/* Cyber edition: same atlas, library and learning progress; black, acid yellow, cyan and signal red. */
:root{color-scheme:dark;--gold:#ecff3d;--acid:#ecff3d;--cyan:#3ef2ff;--red:#ff3355;--text:#eef2f4;--muted:#a3adb5;--line:#ecff3d38;--ink:#050507;--display:"Avenir Next Condensed","Bahnschrift","DIN Condensed","Roboto Condensed",sans-serif-condensed,"Arial Narrow",system-ui,sans-serif;--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
body{background:var(--ink)}
button:focus-visible,a:focus-visible,input:focus-visible{outline-color:var(--acid)}

/* Header */
header{background:linear-gradient(#050507f5,#05050700);border-bottom:1px solid #ffffff10}
header:after{content:'';position:absolute;left:3%;bottom:-1px;width:64px;height:2px;background:var(--acid)}
.brand{font:700 13px/1 var(--mono);letter-spacing:.2em}
.orb{color:var(--acid);font-size:28px;font-weight:400;text-shadow:0 0 18px #ecff3d55}
nav button{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#9aa6ad}
nav button:hover{color:#fff}
nav button[aria-current]{color:var(--acid);border-bottom:2px solid var(--acid)}
#count{color:var(--cyan)}
.search-toggle{color:var(--acid)}
.skins{border-radius:0;border-color:#ecff3d3a}
.skins a{border-radius:0;font:600 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#aeb9bf}
.skins a[aria-current]{background:var(--acid);color:#050507}

/* Scene */
.universe{background:var(--ink)}
.universe:before{content:'';position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(90deg,#050507 0%,#050507e0 26%,#0505075c 52%,#05050724 100%),linear-gradient(0deg,#050507 0%,#05050700 32%),linear-gradient(180deg,#050507 0%,#05050700 22%),url(/assets/cyberpunk-guide.webp);background-size:cover;background-position:center,center,center,78% 26%;background-repeat:no-repeat;opacity:.5}
.universe:after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(transparent 0 2px,#00000016 2px 3px)}
.interactive-atlas .scene picture{display:none!important}
.scene:after{background:none}
.signals path{stroke:var(--cyan)}
.cp-hud{position:absolute;top:100px;left:3%;right:3%;z-index:2;display:flex;justify-content:space-between;gap:16px;font:600 10px var(--mono);letter-spacing:.14em;color:#7f8b92;pointer-events:none}
.cp-hud span:first-child:before{content:'■ ';color:var(--acid)}
.cp-hud span:last-child{color:#ff6b84}

/* Intro panel */
.intro{max-width:390px}
.intro .eyebrow{font:600 10px/1.5 var(--mono);letter-spacing:.16em;color:var(--cyan)}
h1{font-family:var(--display);font-stretch:condensed;font-weight:800;font-size:clamp(40px,4.6vw,74px);line-height:.94;letter-spacing:-.005em;text-transform:uppercase;margin:20px 0}
h1 em{color:var(--acid);text-shadow:0 0 30px #ecff3d2e}
.intro .rule{width:76px;height:3px;background:linear-gradient(90deg,var(--red) 0 58%,transparent 58% 68%,var(--red) 68%)}
.intro p:not(.eyebrow){color:#b5bec4}
.cp-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:22px}
.outline{border:0;border-radius:0;background:var(--acid);color:#050507;font:700 12px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:15px 24px 15px 18px;margin:0;min-height:46px;box-shadow:none;clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)}
.outline:hover{background:#f6ff9e}
.outline:focus-visible{outline:none;background:#fff;box-shadow:inset 0 0 0 3px var(--cyan)}
.cp-replay{pointer-events:auto;min-height:44px;padding:0 16px;border:1px solid #3ef2ff66;background:#05050799;color:var(--cyan);font:600 11px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.cp-replay:hover{background:#3ef2ff14;border-color:var(--cyan)}
.cp-replay[hidden]{display:none}

/* Map chrome */
.node{color:#e6edf0;border-radius:0;font-family:var(--mono)}
.node i{border-radius:0;border-color:#ecff3d88;box-shadow:none}
.interactive-atlas .node:not(.post){border-radius:0;background:#07080bdd;border:1px solid #ffffff1c;border-left:2px solid var(--acid);color:#dfe6ea}
.interactive-atlas .node[data-category="models"]{border-left-color:var(--cyan)}
.interactive-atlas .node[data-category="videos"]{border-left-color:var(--red)}
.interactive-atlas .node[data-category="thoughts"]{border-left-color:#ffb43d}
.interactive-atlas .node[data-category="training"]{border-left-color:#b8ffe9}
.node:hover,.node:focus-visible{background:#121318;border-color:var(--acid)}
.controls,.interactive-atlas .controls{border-radius:0;border:1px solid #ecff3d33;background:#07080bd9;padding:0}
.controls button{color:var(--acid);font-family:var(--mono);border-bottom:1px solid #ffffff10}
.controls button:last-child{border-bottom:0}
.scene-footer{font-family:var(--mono)}
.status b{background:var(--acid);border-radius:0;box-shadow:0 0 10px var(--acid)}
#browse{color:var(--acid)}
.signature{color:#ff6b84;letter-spacing:.12em}
.atlas-hint,.interactive-atlas .atlas-hint{font-family:var(--mono);color:#7d8a92;letter-spacing:.06em}
.hovercard{background:#07080bf2;border:1px solid #ffffff1c;border-top:2px solid var(--acid);border-radius:0}
.hovercard h3{font-family:var(--display);font-stretch:condensed;font-weight:800;text-transform:uppercase;letter-spacing:0}
.hovercard .tag{color:var(--cyan);font-family:var(--mono)}

/* Library and training panel */
#dialog{background:linear-gradient(160deg,#0e1015 0%,#07080b 62%);border:1px solid #ffffff1c;border-top:2px solid var(--acid);border-radius:0;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 40px 120px #000d;color:var(--text)}
#dialog::backdrop{background:#020203cc;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#dialog .dialog-top{background:linear-gradient(#0e1015 0%,#0e1015 86%,#0e101500)}
#dialog-kicker{color:var(--cyan);font-family:var(--mono);letter-spacing:.18em}
#close{border-radius:0;background:transparent;border:1px solid #ffffff2a;box-shadow:none;color:var(--acid)}
#close:hover{border-color:var(--acid)}
#dialog h2{font-family:var(--display);font-stretch:condensed;font-weight:800;text-transform:uppercase;letter-spacing:0;line-height:1;font-size:clamp(30px,3.4vw,46px)}
#dialog .search{border-radius:0;background:#050507;border:1px solid #ffffff24;font-family:var(--mono);box-shadow:none}
#dialog .filters button{border-radius:0;background:#ffffff08;border:1px solid #ffffff14;color:#c4ccd1;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
#dialog .filters button.active{background:var(--acid);border-color:var(--acid);color:#050507;box-shadow:none}
#dialog .card{border-radius:0;background:linear-gradient(135deg,#ffffff0a,#ffffff03);border:1px solid #ffffff17;border-left:2px solid #3ef2ff66;box-shadow:none}
#dialog .card:hover{background:#ecff3d0a;border-color:#ecff3d88}
#dialog .card h3{font-family:var(--display);font-stretch:condensed;font-weight:700;letter-spacing:0;font-size:22px}
#dialog .tag{color:var(--cyan);font-family:var(--mono);letter-spacing:.12em}
#dialog .source{color:var(--cyan)}
#dialog .outline{clip-path:none;background:transparent;border:1px solid #ecff3d77;color:var(--acid);min-height:46px;padding:12px 18px;margin-top:20px;font:700 11px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase}
#dialog .outline:hover{background:#ecff3d14}
#dialog .outline:focus-visible{outline:2px solid var(--acid);outline-offset:3px;box-shadow:none;background:#ecff3d14}
#dialog .notice{color:#aab4bb}
#dialog progress{border-radius:0;background:#ffffff12}
#dialog progress::-webkit-progress-bar{background:#ffffff12}
#dialog progress::-webkit-progress-value{background:linear-gradient(90deg,var(--acid),var(--cyan));border-radius:0}
#dialog progress::-moz-progress-bar{background:var(--acid)}
#dialog .exercise{border-radius:0;border:1px solid #ffffff14;border-left:2px solid var(--red);background:#ff33550a}
#dialog .video{border-radius:0}

@media(min-width:751px) and (max-width:1100px){.intro{max-width:300px}
.signature{display:none}
.cp-hud span:last-child{display:none}
}
@media(max-width:750px){
header:after{left:6%}
.brand{font-size:11px;letter-spacing:.14em;gap:8px}
.orb{font-size:22px}
nav{background:#060608f7;border-top:1px solid #ecff3d2e;box-shadow:0 -12px 30px #000a}
nav button{font-size:9px;letter-spacing:.03em;border-radius:0}
nav button[aria-current]{background:#ecff3d10;color:var(--acid);box-shadow:inset 0 2px 0 var(--acid)}
.cp-hud{display:none}
.universe:before{background-position:center,center,center,70% 20%;opacity:.42}
.intro .eyebrow{font-size:8px;letter-spacing:.12em}
.interactive-atlas .intro h1,.intro h1{font-size:clamp(30px,9vw,40px);line-height:.95}
.cp-actions{margin-top:12px}
.intro .outline{display:none}
.cp-replay{min-height:40px;font-size:10px;padding:0 12px}
.interactive-atlas .scene{inset:236px 0 105px}
.interactive-atlas .controls button{border-bottom:0;border-right:1px solid #ffffff10}
.interactive-atlas .controls button:last-child{border-right:0}
#dialog .dialog-top{background:linear-gradient(#0e1015 0%,#0e1015 86%,#0e101500)}
}
@media(prefers-contrast:more){.universe:before{opacity:.3}
.universe:after{display:none}
#dialog{border-color:#fff}
.cp-hud,.atlas-hint{color:#fff}
}

/* ECHO briefing: one key art plate staged as a full-bleed cinematic shot. */
#echo-intro{position:fixed;inset:0;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#020203;color:#f3f6f7;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;overflow:hidden;overscroll-behavior:contain;scrollbar-width:none}
#echo-intro::backdrop{background:#000}
#echo-intro :focus-visible{outline:2px solid var(--acid);outline-offset:3px}
.echo-shot{position:absolute;inset:0;overflow:hidden;background:#020203}
.echo-cam{position:absolute;inset:0;transform:scale(var(--s,1.1)) translate3d(var(--x,0),var(--y,0),0);transition:transform 4.2s cubic-bezier(.22,.61,.2,1),opacity 2s ease;will-change:transform}
.echo-plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 30%;filter:saturate(1.08) contrast(1.04);animation:echo-drift 28s ease-in-out infinite alternate}
@keyframes echo-drift{from{transform:scale(1.02) translate3d(-.8%,.4%,0)}to{transform:scale(1.06) translate3d(.8%,-.6%,0)}}
#echo-intro[data-cam="wide"]{--s:1.1;--x:0%;--y:2%}
#echo-intro[data-cam="holo"]{--s:1.16;--x:5%;--y:3%}
#echo-intro[data-cam="close"]{--s:1.3;--x:-9%;--y:10%}
#echo-intro[data-cam="city"]{--s:1.16;--x:5.5%;--y:-2%}
#echo-intro[data-cam="pull"]{--s:1.03;--x:0%;--y:1%}
#echo-intro.is-booting{--s:1.26;--x:-2%;--y:1%}
.is-booting .echo-cam{opacity:0}
#echo-intro.no-plate .echo-plate{visibility:hidden}
#echo-intro.no-plate .echo-cam{background:radial-gradient(45% 35% at 74% 24%,#3ef2ff26,transparent 70%),radial-gradient(35% 30% at 86% 72%,#ff335526,transparent 70%),repeating-linear-gradient(90deg,#0a0c12 0 38px,#06070b 38px 46px,#0d1018 46px 92px,#050608 92px 100px),linear-gradient(#05060a,#0b0d14 62%,#020203)}
.echo-frame{position:absolute;left:58%;top:7%;width:31%;height:50%;opacity:0;transition:opacity 1.4s ease;--c:#ecff3dc0;background:linear-gradient(var(--c),var(--c)) 0 0/24px 1px,linear-gradient(var(--c),var(--c)) 0 0/1px 24px,linear-gradient(var(--c),var(--c)) 100% 0/24px 1px,linear-gradient(var(--c),var(--c)) 100% 0/1px 24px,linear-gradient(var(--c),var(--c)) 0 100%/24px 1px,linear-gradient(var(--c),var(--c)) 0 100%/1px 24px,linear-gradient(var(--c),var(--c)) 100% 100%/24px 1px,linear-gradient(var(--c),var(--c)) 100% 100%/1px 24px;background-repeat:no-repeat}
.echo-frame span{position:absolute;font:600 10px/1 var(--mono);letter-spacing:.18em;color:var(--acid);white-space:nowrap}
.echo-frame span:first-child{top:-20px;left:0}
.echo-frame span:last-child{bottom:-20px;right:0;color:#ff6b84}
.is-live[data-cam="wide"] .echo-frame,.is-live[data-cam="close"] .echo-frame{opacity:.75}
.echo-neon{position:absolute;inset:-10%;background:radial-gradient(40% 50% at 18% 28%,#00e5ff2b,transparent 70%),radial-gradient(30% 45% at 94% 40%,#ecff3d1f,transparent 70%),radial-gradient(35% 30% at 36% 82%,#ff33551f,transparent 70%);mix-blend-mode:screen;animation:echo-breathe 9s ease-in-out infinite alternate;pointer-events:none}
#echo-intro[data-cam="city"] .echo-neon{background:radial-gradient(45% 50% at 20% 40%,#ff335533,transparent 70%),radial-gradient(35% 45% at 80% 20%,#00e5ff24,transparent 70%)}
@keyframes echo-breathe{from{opacity:.62;transform:translate3d(-1%,0,0)}to{opacity:1;transform:translate3d(1%,-1%,0)}}
.echo-rain{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:screen}
.echo-scrim{position:absolute;inset:0;background:linear-gradient(90deg,#020203eb 0%,#020203a8 32%,#02020300 60%),linear-gradient(0deg,#020203f2 0%,#020203b0 24%,#02020300 50%)}
.echo-grain{position:absolute;inset:0;opacity:.09;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.echo-sweep{position:absolute;inset:0;opacity:0;transform:translate3d(-100%,0,0);background:linear-gradient(100deg,transparent 34%,#3ef2ff1c 46%,#ecff3d26 50%,#3ef2ff1c 54%,transparent 66%);pointer-events:none}
.is-cut .echo-sweep{animation:echo-sweep 1.1s cubic-bezier(.5,0,.2,1)}
@keyframes echo-sweep{0%{opacity:0;transform:translate3d(-100%,0,0)}25%{opacity:1}100%{opacity:0;transform:translate3d(100%,0,0)}}
.echo-bars:before,.echo-bars:after{content:'';position:absolute;left:0;right:0;height:51%;background:#000;transform:scaleY(.17);transition:transform 1.8s cubic-bezier(.7,0,.2,1)}
.echo-bars:before{top:0;transform-origin:top}
.echo-bars:after{bottom:0;transform-origin:bottom}
.is-booting .echo-bars:before,.is-booting .echo-bars:after{transform:scaleY(1);transition:none}
.is-final .echo-bars:before,.is-final .echo-bars:after{transform:scaleY(0)}
.echo-boot{position:absolute;inset:0;z-index:3;display:grid;place-content:center;gap:8px;text-align:center;font:600 11px/1.4 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--cyan);opacity:0;visibility:hidden;transition:opacity .6s,visibility 0s .6s;pointer-events:none}
.echo-boot p{margin:0}
.echo-boot p+p{color:#8d989f;letter-spacing:.16em;text-transform:none}
.echo-boot i{display:block;width:180px;height:2px;margin:14px auto 0;background:#ffffff1a;position:relative;overflow:hidden}
.echo-boot i:after{content:'';position:absolute;inset:0;background:var(--acid);transform:scaleX(0);transform-origin:left}
.is-booting .echo-boot{opacity:1;visibility:visible;transition:none}
.is-booting .echo-boot i:after{animation:echo-load 1.5s cubic-bezier(.6,0,.2,1) forwards}
@keyframes echo-load{to{transform:scaleX(1)}}

/* Briefing interface */
.echo-ui{position:relative;z-index:4;height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto auto;padding:max(16px,env(safe-area-inset-top)) clamp(18px,5vw,72px) max(14px,env(safe-area-inset-bottom));overflow-x:hidden;overflow-y:auto;scrollbar-width:none}
.echo-top{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px}
.echo-id{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:600 11px/1.3 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#d9e1e5}
.echo-mark{color:var(--acid);font-size:15px}
.echo-id small{font-size:9px;letter-spacing:.14em;color:#ff6b84;border:1px solid #ff335566;padding:3px 6px}
.echo-skip{flex:none;display:flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border:1px solid #ffffff3a;background:#02020399;color:#fff;font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.echo-skip:hover{border-color:var(--acid);color:var(--acid)}
.echo-skip kbd{font:inherit;font-size:9px;letter-spacing:.06em;color:#9aa5ac;border:1px solid #ffffff2a;padding:3px 5px}
.echo-holo{grid-row:2;position:relative;justify-self:start;align-self:stretch;height:100%;aspect-ratio:1;max-width:min(46vw,560px);min-height:0;margin-top:8px;opacity:0;visibility:hidden;transform:translate3d(-16px,0,0) scale(.96);transition:opacity .9s ease,transform 1.2s cubic-bezier(.2,.7,.2,1),visibility 0s .9s}
.has-holo .echo-holo{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.echo-holo:before{content:'';position:absolute;inset:7%;border-radius:50%;border:1px solid #3ef2ff2b;box-shadow:inset 0 0 70px #3ef2ff12,0 0 60px #3ef2ff0d;pointer-events:none}
#echo-brain{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab;-webkit-mask-image:radial-gradient(closest-side,#000 74%,transparent);mask-image:radial-gradient(closest-side,#000 74%,transparent)}
#echo-brain:active{cursor:grabbing}
#echo-brain:focus-visible{outline:none}
.echo-holo:has(#echo-brain:focus-visible):after{content:'';position:absolute;inset:3%;border-radius:50%;border:2px solid var(--acid);pointer-events:none}
.echo-ping{position:absolute;left:0;right:0;bottom:0;margin:0;text-align:center;font:600 10px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);pointer-events:none;text-shadow:0 1px 8px #000}
.echo-stage{grid-row:3;max-width:min(640px,100%);padding:18px 0 6px;transition:opacity .24s ease,transform .24s ease}
.echo-stage.is-leaving{opacity:0;transform:translate3d(0,6px,0)}
.echo-chapter>*{animation:echo-in .9s cubic-bezier(.2,.7,.2,1) both}
.echo-chapter>:nth-child(2){animation-name:echo-title;animation-delay:.08s}
.echo-chapter>:nth-child(3){animation-delay:.2s}
.echo-chapter>:nth-child(4){animation-delay:.3s}
.echo-chapter>:nth-child(5){animation-delay:.38s}
@keyframes echo-in{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
@keyframes echo-title{from{opacity:0;transform:translate3d(0,10px,0);text-shadow:-7px 0 #ff335599,7px 0 #3ef2ff99}to{opacity:1;transform:none;text-shadow:0 2px 24px #000}}
.echo-kicker{display:flex;align-items:center;gap:12px;margin:0 0 14px;font:600 11px/1.4 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--cyan)}
.echo-kicker:before{content:'';flex:none;width:28px;height:2px;background:var(--red)}
#echo-intro .echo-chapter h2{margin:0 0 18px;font-family:var(--display);font-stretch:condensed;font-weight:800;font-size:clamp(40px,6.2vw,94px);line-height:.92;letter-spacing:-.005em;text-transform:uppercase;color:#fff;text-wrap:balance;overflow-wrap:break-word;text-shadow:0 2px 24px #000}
.echo-chapter p:not(.echo-kicker):not(.echo-meter){margin:0;max-width:56ch;font-size:clamp(15px,1.2vw,18px);line-height:1.6;color:#d8e0e4;text-shadow:0 1px 12px #000}
.echo-meter{display:flex;align-items:center;gap:12px;margin:18px 0 0;font:600 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#aeb8be}
.echo-cells{display:flex;gap:5px}
.echo-cells i{width:28px;height:6px;background:#ffffff1f;transform:skewX(-20deg)}
.echo-cells i.on{background:var(--acid);box-shadow:0 0 12px #ecff3d66}
.echo-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.echo-btn{min-height:50px;padding:0 22px;border:1px solid #ffffff44;background:#02020399;color:#fff;font:700 12px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.echo-btn:hover{border-color:var(--cyan);color:var(--cyan)}
.echo-primary{border-color:var(--acid);background:var(--acid);color:#050507;padding-right:30px;clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%)}
.echo-primary:hover{background:#f6ff9e;color:#050507;border-color:#f6ff9e}
#echo-intro .echo-primary:focus-visible{outline:none;background:#fff;box-shadow:inset 0 0 0 3px var(--cyan)}
.echo-deck{grid-row:4;display:flex;align-items:center;gap:clamp(12px,3vw,32px);padding-top:12px}
.echo-steps{list-style:none;display:flex;gap:6px;flex:1;min-width:0;margin:0;padding:0}
.echo-steps li{flex:1}
.echo-steps button{width:100%;min-height:44px;display:flex;align-items:center;padding:0}
.echo-steps i{display:block;width:100%;height:3px;background:#ffffff26;position:relative;overflow:hidden}
.echo-steps i:after{content:'';position:absolute;inset:0;background:var(--acid);transform:scaleX(0);transform-origin:left}
.echo-steps button:hover i{background:#ffffff55}
.echo-steps .done i:after{transform:scaleX(1);background:#ecff3d8c}
.echo-steps [aria-current] i{background:#ecff3d4d}
.echo-steps.run [aria-current] i:after{animation:echo-fill var(--dur,8s) linear forwards}
.is-paused .echo-steps [aria-current] i:after{animation-play-state:paused}
.is-final .echo-steps [aria-current] i:after{animation:none;transform:scaleX(1)}
@keyframes echo-fill{to{transform:scaleX(1)}}
.echo-controls{flex:none;display:flex;gap:6px}
.echo-controls button{min-width:44px;min-height:44px;padding:0 12px;border:1px solid #ffffff2e;background:#02020399;color:#fff;font:600 13px/1 var(--mono)}
.echo-controls button:hover:not(:disabled){border-color:var(--acid);color:var(--acid)}
.echo-controls button:disabled{opacity:.32;cursor:default}
.echo-controls .echo-listen{font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.echo-listen[aria-pressed="true"]{border-color:var(--acid);color:var(--acid);background:#ecff3d14}
.echo-listen[hidden]{display:none}
.echo-legal{grid-row:5;margin:8px 0 0;max-width:90ch;font:500 10px/1.5 var(--mono);letter-spacing:.03em;color:#8d989f}
.echo-stage,.echo-deck,.echo-legal{transition:opacity .8s ease .2s}
.echo-stage{transition:opacity .24s ease,transform .24s ease}
.is-booting .echo-stage,.is-booting .echo-deck,.is-booting .echo-legal{opacity:0}
.is-booting .echo-chapter>*{animation:none}

@media(max-width:750px){
.echo-plate{object-position:68% 22%}
#echo-intro[data-cam="holo"]{--s:1.12;--x:4%;--y:2%}
#echo-intro[data-cam="close"]{--s:1.24;--x:-4%;--y:6%}
#echo-intro[data-cam="city"]{--s:1.12;--x:4%;--y:-1%}
.echo-scrim{background:linear-gradient(0deg,#020203 0%,#020203eb 36%,#02020390 58%,#02020300 80%),linear-gradient(180deg,#020203d0 0%,#02020300 16%)}
.echo-frame{display:none}
.echo-ui{padding-left:18px;padding-right:18px}
.echo-top{gap:10px}
.echo-id{font-size:10px;letter-spacing:.12em;gap:6px}
.echo-id small{font-size:8px}
.echo-skip{padding:0 12px;font-size:10px;letter-spacing:.08em}
.echo-skip kbd{display:none}
.echo-holo{justify-self:start;max-width:62vw}
.echo-stage{padding-top:10px}
.echo-kicker{font-size:10px;letter-spacing:.14em;margin-bottom:10px}
#echo-intro .echo-chapter h2{font-size:clamp(32px,10.4vw,48px);margin-bottom:12px}
.echo-chapter p:not(.echo-kicker):not(.echo-meter){font-size:15px;line-height:1.55}
.echo-cta{gap:10px;margin-top:16px}
.echo-btn{flex:1 1 auto;min-height:48px;padding:0 16px;font-size:11px}
.echo-deck{flex-wrap:wrap;gap:2px 8px;padding-top:6px}
.echo-steps{flex-basis:100%}
.echo-controls{width:100%}
.echo-controls .echo-listen{margin-left:auto}
.echo-legal{font-size:9px}
}
@media(max-height:560px){
.echo-holo{display:none}
#echo-intro .echo-chapter h2{font-size:clamp(28px,6vw,40px)}
.echo-chapter p:not(.echo-kicker):not(.echo-meter){font-size:14px}
.echo-bars{display:none}
}
@media(prefers-reduced-motion:reduce){
.echo-plate,.echo-neon{animation:none}
.echo-rain,.echo-sweep{display:none}
.echo-cam,.echo-holo,.echo-stage,.echo-bars:before,.echo-bars:after{transition:none}
}
@media(prefers-contrast:more){
.echo-scrim{background:linear-gradient(90deg,#000000f2 0%,#000000c0 45%,#00000040 75%),linear-gradient(0deg,#000 0%,#000000c0 40%,transparent 70%)}
.echo-chapter p:not(.echo-kicker):not(.echo-meter),.echo-legal,.echo-meter{color:#fff}
.echo-grain,.echo-rain{display:none}
}
/* Browser QA: constrain the implicit grid column at narrow widths. */
.echo-ui{grid-template-columns:minmax(0,1fr)}
.echo-ui>*{min-width:0}
.echo-top{width:100%}.echo-id{min-width:0}
.echo-stage,.echo-deck{width:100%;min-width:0}
.echo-holo{width:min(100%,480px);aspect-ratio:auto}
@media(max-width:750px){.echo-holo{width:100%}.echo-id{letter-spacing:.03em}.echo-id small{font-size:7px}.echo-top{gap:8px}.echo-skip{padding:0 10px;font-size:9px}}
@media(prefers-reduced-motion:reduce){.echo-ui *{animation:none!important;transition:none!important}}