@font-face{font-family:Mincho;src:url(assets/Mincho-subset.otf?v=0.3.3) format('opentype');font-display:swap}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#030203;color:#dec693;font-family:system-ui,sans-serif}body>canvas{position:fixed;inset:0;display:block}#ceremony{position:fixed;inset:0;z-index:1}.overlay{position:absolute;inset:0;pointer-events:none}.vignette{background:radial-gradient(ellipse at 50% 42%,transparent 38%,#000a 100%)}
#top{position:absolute;top:max(5%,env(safe-area-inset-top));width:100%;text-align:center;font:clamp(10px,.8vw,14px) Georgia,serif;letter-spacing:.3em;opacity:0;padding:0 12px}
#copy{position:absolute;top:62%;width:100%;padding:0 16px;text-align:center;opacity:0;text-shadow:0 2px 18px #000,0 2px 7px #000}
#copy h1{font:clamp(30px,3.1vw,54px)/1.4 Mincho,'Yu Mincho',serif;letter-spacing:.2em;margin:0 0 clamp(9px,1.6vh,18px);padding-left:.2em}
#copy p{font:clamp(18px,1.85vw,30px)/1.6 Mincho,'Yu Mincho',serif;letter-spacing:.08em;margin:0}
#rule{height:1px;width:clamp(100px,12vw,200px);margin:clamp(10px,1.7vh,18px) auto;background:linear-gradient(90deg,transparent,#a58b55 35%,#fff0cb var(--sweep,50%),#a58b55 65%,transparent)}
#small{font:clamp(15px,1.3vw,21px)/1.6 Mincho,'Yu Mincho',serif;letter-spacing:.12em;color:#c3ab7d}
#black{background:#000;opacity:1}.panel{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;background:radial-gradient(ellipse at center,#1c1009b8,transparent 70%)}.panel h2{font:clamp(30px,4vw,58px)/1.5 Mincho,serif;letter-spacing:.14em;margin:24px 0}.panel p{font-size:clamp(14px,1.2vw,19px);line-height:1.8;color:#bfaf93;max-width:36em}.eyebrow{font:11px Georgia,serif;letter-spacing:.4em}.actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}button{font:inherit;font-size:13px;cursor:pointer;border:1px solid #8d7349;border-radius:2px;background:#22170ee8;color:#f4dfb8;padding:13px 20px;min-height:44px}button:hover{background:#49351f}button:focus-visible{outline:2px solid #fff1c8;outline-offset:4px}button:disabled{cursor:wait;opacity:.4}.subtle{background:transparent;border-color:#63513a;color:#cbb791}#controls{position:absolute;bottom:max(12px,env(safe-area-inset-bottom));right:max(16px,env(safe-area-inset-right));display:flex;gap:8px;align-items:center;z-index:4}#controls button{font-size:11px;padding:10px 13px;background:#0e0b08dd}#ending button{margin:6px}#motion-note{max-width:30em;font-size:12px}body.capture #welcome,body.capture #controls,body.capture #ending{display:none!important}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(orientation:portrait){#copy{top:59%;padding:0 12px}#copy h1{font-size:clamp(26px,6.8vw,43px);letter-spacing:.12em;margin-bottom:12px}#copy p{font-size:clamp(16px,4.2vw,26px);letter-spacing:.015em}#small{font-size:clamp(15px,3.6vw,22px);letter-spacing:.06em}#rule{width:24vw;margin:14px auto}#top{font-size:11px;letter-spacing:.2em}#controls{left:8px;right:8px;justify-content:center;gap:5px}#controls button{padding:10px;font-size:11px}}
@media(max-height:560px){#copy{top:58%}#copy h1{font-size:clamp(22px,4.2vh,30px);margin-bottom:4px}#copy p{font-size:clamp(14px,2.8vh,18px)}#small{font-size:13px}#rule{margin:6px auto}#controls{bottom:5px}#controls button{min-height:36px;padding:7px 10px}#top{top:4%;font-size:10px}}

/* TOPとの導線：開始前と終了後だけ表示。映像の再生中には重ねない。 */
.taizo-return-home{display:inline-block;margin-top:23px;padding:8px 12px;color:#d6bd8e;
  font-size:13px;line-height:1.6;text-decoration:underline;text-underline-offset:4px;
  border-radius:4px;background:rgba(12,8,4,.45)}
.taizo-return-home:hover{color:#fff0c7;background:rgba(70,47,20,.55)}
.taizo-return-home:focus-visible{outline:2px solid #fff1c8;outline-offset:3px}
@media(max-height:480px){.taizo-return-home{margin-top:9px;font-size:12px;padding:5px 8px}}

/* v0.3.4: TOP内の選択ダイアログから直接開始するためのローディング表示 */
.taizo-loading {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 22px;
  background: radial-gradient(ellipse at center,#1d100b 0%,#080504 58%,#020202 100%);
  text-align: center;
}
.taizo-loading-spinner {
  width: 45px;
  height: 45px;
  border: 2px solid rgba(206,165,92,.16);
  border-top-color: #e3be72;
  border-radius: 50%;
  animation: taizo-loading-turn 1.1s linear infinite;
}
@keyframes taizo-loading-turn {to{transform:rotate(360deg)}}
.taizo-loading .taizo-loading-eyebrow {
  margin: 3px 0 5px;
  font: 11px Georgia,serif;
  letter-spacing: .3em;
  color: #d5ae68;
}
.taizo-loading #loading-status {font-size:14px;line-height:1.75;color:#e2cba1}
.taizo-loading .taizo-return-home {margin-top:15px}
.taizo-audio-prompt {
  position: absolute;
  z-index: 7;
  top: max(14px,env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  width: min(95vw, 540px);
  padding: 10px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px 10px;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(205,165,91,.7);
  border-radius: 7px;
  background: rgba(11,8,6,.96);
  color: #f0d9aa;
  font-size: 12px;
  line-height:1.45;
  text-align:center;
}
.taizo-audio-prompt button {padding:7px 10px;font-size:12px;min-height:34px}
.taizo-audio-prompt #audio-prompt-dismiss {padding:6px 9px;background:transparent;border:none;font-size:20px}
@media(prefers-reduced-motion: reduce) {.taizo-loading-spinner{animation:none}}


/* Shooting stars v2: long glowing tails with full-screen trajectories. */
.anniversary-meteors{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;contain:layout paint}
.anniversary-meteor{position:absolute;left:0;top:0;height:2px;border-radius:10px;opacity:0;
  transform-origin:100% 50%;pointer-events:none;will-change:transform,opacity;
  background:linear-gradient(90deg,transparent,rgba(246,186,87,.11) 18%,var(--meteor-trail,rgba(246,186,87,.62)) 75%,var(--meteor-tip,#fff8dc) 100%);
  box-shadow:0 0 5px rgba(240,197,102,.40)}
.anniversary-meteor::after{content:"";position:absolute;right:-2px;top:-2px;width:6px;height:6px;
  border-radius:50%;background:var(--meteor-tip,#fff8dc);
  box-shadow:0 0 7px 2px rgba(255,223,165,.52)}
@media(prefers-reduced-motion:reduce){.anniversary-meteors{display:none}}


.anniversary-meteor{height:2.5px;
  background:linear-gradient(90deg,transparent 0%,rgba(246,186,87,.05) 12%,
    var(--meteor-trail,rgba(246,186,87,.64)) 76%,var(--meteor-tip,#fff8dc) 100%);
  box-shadow:0 0 7px rgba(240,197,102,.47),0 0 2px rgba(255,242,198,.4)}
.anniversary-meteor::after{top:-2.75px;right:-3px;width:8px;height:8px;
  box-shadow:0 0 9px 2px rgba(255,223,165,.56),0 0 17px 1px rgba(246,186,87,.16)}
@media (max-width:600px){.anniversary-meteor{height:2px}}