html.intro-active #app,html.intro-active .credit{visibility:hidden}
#film-intro{position:fixed;inset:0;z-index:2000;background:#080b10;color:#edf2f7;font-family:'Courier New',monospace;transition:opacity .7s ease;isolation:isolate}
#film-intro.leaving{opacity:0;pointer-events:none}
#film-intro video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#film-intro:after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,#0003,transparent 28%,transparent 70%,#0006)}
.intro-top{position:absolute;top:max(22px,env(safe-area-inset-top));left:2.2vw;right:2.2vw;display:flex;justify-content:space-between;align-items:center;z-index:1;font-size:10px;letter-spacing:2.5px}
.intro-controls{display:flex;gap:26px;align-items:center}#intro-sound:before{content:'▥';display:inline-block;margin-right:10px;font-size:17px;vertical-align:middle}#intro-skip{border-left:1px solid #ffffff80!important;padding-left:24px!important}
#film-intro button{background:none;border:0;color:inherit;padding:10px 0;cursor:pointer;font:10px 'Courier New',monospace;letter-spacing:1.8px;text-transform:uppercase}#film-intro button:focus-visible{outline:1px solid white;outline-offset:5px}
#intro-caption{position:absolute;z-index:1;max-width:43vw;text-shadow:0 1px 12px #0009;transition:opacity .25s,filter .25s;pointer-events:none}#intro-caption[data-position=right]{left:60%;top:35%}#intro-caption[data-position=left]{left:5.5%;top:23%}#intro-caption[data-position=lower-left]{left:5.5%;top:63%}#intro-caption[data-position=upper-left]{left:5.5%;top:16%}#intro-caption.changing{opacity:0;filter:blur(5px)}
#intro-caption h1{font-size:clamp(12px,1.15vw,19px);font-weight:400;letter-spacing:.36em;line-height:1.8;margin:0 0 8px}#intro-caption p{font-size:clamp(10px,.92vw,15px);letter-spacing:.22em;line-height:1.8;margin:0}
.intro-bottom{position:absolute;bottom:max(25px,env(safe-area-inset-bottom));left:2.2vw;right:2.2vw;display:grid;grid-template-columns:1fr minmax(200px,40%) 1fr;align-items:center;gap:20px;z-index:1;font-size:10px;letter-spacing:2.5px;text-transform:uppercase}#intro-clock{text-align:right;white-space:nowrap}.intro-track{position:relative;height:30px}.intro-segments{position:absolute;inset:14px 0;display:flex;gap:10px}.intro-segments i{flex:1;background:#ffffff40;height:1px;position:relative}.intro-segments b{display:block;height:1px;background:#e3eeff;transform:scaleX(0);transform-origin:left;box-shadow:0 0 5px #d0e8ff80}#intro-particles{position:absolute;left:-20px;top:-10px;width:calc(100% + 40px);height:50px;pointer-events:none}
#intro-play{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);padding:18px!important;background:#080b10bb!important}#intro-play[hidden]{display:none}
@media(max-width:650px){#film-intro video{object-fit:contain}.intro-top{left:20px;right:20px;top:20px;font-size:9px}.intro-controls{gap:15px}#intro-skip{padding-left:15px!important}#film-intro button{font-size:9px}#intro-caption{max-width:85vw!important;left:7%!important;top:69%!important}#intro-caption h1{font-size:12px;letter-spacing:.25em}#intro-caption p{font-size:10px;letter-spacing:.13em}.intro-bottom{left:20px;right:20px;bottom:max(24px,env(safe-area-inset-bottom));grid-template-columns:1fr 1fr;gap:9px;font-size:8px;letter-spacing:1.5px}.intro-track{grid-row:1;grid-column:1/3}#intro-clock{grid-column:2}#intro-status{grid-column:1}.intro-segments{gap:6px}}
@media(prefers-reduced-motion:reduce){#film-intro,#intro-caption{transition:none}}