:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, sans-serif; background: #08090b; color: #e5e3df; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; -webkit-text-size-adjust: 100%; }
body { overflow: hidden; -webkit-tap-highlight-color: transparent; }
main { height: 100vh; height: var(--viewport-height, 100svh); min-height: 240px; position: relative; isolation: isolate; }
.gate { position: absolute; inset: 0; display: grid; place-items: center; padding: env(safe-area-inset-top) 24px env(safe-area-inset-bottom); z-index: 3; overflow: hidden; background: #08090b; transition: opacity 1400ms cubic-bezier(.4,0,.2,1), filter 1400ms ease; }
.ambient { position: absolute; inset: -15%; pointer-events: none; background: radial-gradient(ellipse at 50% 38%, #79736719 0%, #393e4814 27%, transparent 58%), radial-gradient(ellipse at 12% 0%, #75808e16, transparent 48%), linear-gradient(115deg, transparent 35%, #c8c0ac06 47%, transparent 60%); animation: atmosphere 18s ease-in-out infinite alternate; transition: opacity 1600ms ease; opacity: .75; }
.gate:focus-within .ambient { opacity: 1; }
.gate::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
.gate::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 42%, transparent 24%, #0007 100%); }
.question-wrap { position: relative; z-index: 2; text-align: center; transform: translateY(-4vh); animation: arrive 1800ms cubic-bezier(.2,.65,.3,1) both; }
h1 { font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif CJK JP", serif; font-size: clamp(1.15rem, 4.7vw, 1.45rem); font-weight: 400; line-height: 2; letter-spacing: .2em; margin: 0 0 58px; padding-left: .2em; color: #eee9de; text-shadow: 0 0 32px #e6d7ba16; }
.phrase-input { position: relative; width: min(280px, calc(100vw - 64px)); margin: auto; animation: resolve 2200ms ease both; }
input { width: 100%; height: 66px; border: 0; border-bottom: 1px solid #ffffff28; border-radius: 0; padding: 10px 44px 14px 16px; background: linear-gradient(0deg, #e4d8bf03, transparent 65%); color: #eee9de; font: 400 1.2rem/1.5 "Hiragino Mincho ProN", "Yu Mincho", serif; letter-spacing: .1em; text-align: center; outline: none; caret-color: #c9bda8; transition: border-color 600ms, color 600ms, box-shadow 800ms, background-color 800ms; appearance: none; }
input:focus { border-color: #d5c8aeaa; background-color: #d7c7a504; box-shadow: 0 12px 22px -18px #e8d3a98c; }
.phrase-submit { position: absolute; right: 0; top: 8px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: #a89d8c; cursor: pointer; transition: color 400ms; }
.phrase-submit svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.phrase-submit:hover { color: #eee9de; }
.phrase-submit:focus-visible { outline: 1px solid #d5c8aeaa; outline-offset: -4px; border-radius: 50%; }
.gate.leaving { opacity: 0; filter: blur(3px); pointer-events: none; }
.phrase-input.invalid { animation: hesitate 460ms ease; }
.phrase-input.invalid input { border-color: #79716e; color: #aaa09b; }
.screen { position: absolute; inset: 0; z-index: 1; background: #000; }
video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
#youtube-mount { display: block; width: 100%; height: 100%; border: 0; background: #000; }
.curtain { position: absolute; inset: 0; z-index: 2; background: #000; opacity: 1; pointer-events: none; transition: opacity 800ms ease; }
.curtain.open { opacity: 0; }
.play-button { position: absolute; z-index: 4; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border: 1px solid #c9bda855; border-radius: 50%; background: #08090bb3; color: #eee9de; box-shadow: 0 0 35px #d5c8ae0b; cursor: pointer; }
.play-button svg { width: 27px; fill: currentColor; }
.play-button:focus-visible { outline: 2px solid #eee; outline-offset: 6px; }
.media-error { position: absolute; z-index: 4; inset: 50% 20px auto; text-align: center; font-size: .875rem; color: #a6a3a0; }
.youtube-link { display: inline-block; min-height: 44px; padding: 12px; color: #e5e3df; text-underline-offset: 5px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
[hidden] { display: none !important; }
@keyframes arrive { from { opacity: 0; transform: translateY(calc(-4vh + 8px)); } to { opacity: 1; transform: translateY(-4vh); } }
@keyframes resolve { 0%, 20% { opacity: 0; } 100% { opacity: 1; } }
@keyframes atmosphere { from { transform: translate3d(-1%, -1%, 0); } to { transform: translate3d(1%, 1%, 0); } }
@keyframes hesitate { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 65% { transform: translateX(3px); } }
@media (max-height: 480px) { .question-wrap { transform: none; animation-name: resolve; } h1 { margin-bottom: 24px; } }
@media (prefers-reduced-motion: reduce) { .question-wrap, .phrase-input, .ambient { animation: none; } .gate { transition: opacity 400ms; } .curtain { transition-duration: 350ms; } .phrase-input.invalid { animation: none; } }