:root{
  --bg:#0A0818; --bg2:#100D22; --panel:#15122B; --panel2:#1C1838; --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.15);
  --text:#F4F1FF; --muted:#A49FC2; --dim:#6E6990;
  --lead:#8B5CF6; --research:#38BDF8; --content:#FBBF24; --designer:#F472B6; --reviewer:#FF3D71; --mail:#34D399; --rail:#FB923C;
  --display:"Archivo", "Arial Black", system-ui, sans-serif;
  --sans:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"JetBrains Mono", ui-monospace, Menlo, monospace;
  --ease:cubic-bezier(.16,1,.3,1); --pop:cubic-bezier(.34,1.56,.64,1);
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
:root[data-theme]{--bg:#0A0818}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth; scroll-padding-top:calc(env(safe-area-inset-top,0px) + 76px)}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
body::before{content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background:
  radial-gradient(40% 35% at 15% 10%, rgba(139,92,246,.18), transparent 70%),
  radial-gradient(35% 30% at 90% 30%, rgba(244,114,182,.12), transparent 70%),
  radial-gradient(40% 40% at 50% 100%, rgba(56,189,248,.10), transparent 70%)}
body::after{content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size:44px 44px; mask-image:radial-gradient(ellipse 70% 60% at 50% 20%, #000, transparent 80%)}
main,header{position:relative; z-index:1}
img{max-width:100%; display:block}
button{font:inherit; color:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--designer); outline-offset:3px}
.wrap{max-width:1240px; margin:0 auto; padding:0 28px}
.muted{color:var(--muted)}
h1,h2,h3{font-family:var(--display); font-weight:700; margin:0; letter-spacing:-.01em}
h2{font-size:clamp(38px,5.2vw,70px); line-height:1; max-width:15ch; margin-bottom:22px}
h3{font-size:24px; line-height:1.15; margin-bottom:8px; font-weight:600}
p{margin:0 0 1em}
.lede{font-size:19px; color:var(--muted); max-width:58ch}
.sec{padding:130px 0; position:relative}
.tag{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; color:var(--muted); margin-bottom:20px}
.tag b{font-weight:500; color:#0A0818; background:var(--c,var(--lead)); padding:3px 9px; border-radius:99px}
.btn{display:inline-flex; align-items:center; gap:10px; padding:14px 24px; border-radius:99px; border:2px solid var(--line2); background:rgba(255,255,255,.04); color:var(--text); text-decoration:none; font-family:var(--display); font-weight:600; font-size:16px; letter-spacing:.02em; transition:transform .3s var(--pop), background .2s, border-color .2s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.96)}
.btn.go{background:#fff; color:#170f35; border-color:#fff; box-shadow:0 0 0 4px rgba(139,92,246,.45), 0 10px 40px rgba(139,92,246,.4)}
.btn.sm{padding:9px 16px; font-size:14px}
.chip{display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:99px; border:1px solid var(--line2); font-size:13px; background:rgba(255,255,255,.03)}
.dot{width:8px; height:8px; border-radius:50%; background:var(--c); flex:none; box-shadow:0 0 10px var(--c)}
.card{background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid var(--line); border-radius:26px; position:relative}
.shot{margin:0; border-radius:26px; overflow:hidden; position:relative; border:1px solid var(--line2); background:var(--panel); box-shadow:0 30px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04)}
.shot::before{content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; background:linear-gradient(130deg,var(--lead),var(--research),var(--content),var(--designer),var(--reviewer)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.55; z-index:2; pointer-events:none}
.shot img{width:100%; height:auto}
.cap{display:flex; justify-content:space-between; gap:12px; font-family:var(--mono); font-size:11px; color:var(--dim); padding:12px 4px 0}
.av{width:44px; height:44px; border-radius:14px; overflow:hidden; flex:none; background:var(--panel2); box-shadow:0 0 0 2px var(--c,transparent)}
.av img{width:100%; height:100%; object-fit:cover}

/* nav */
.nav{position:fixed; top:0; left:0; right:0; z-index:60; padding-top:env(safe-area-inset-top,0px); transition:background .3s, border-color .3s; border-bottom:1px solid transparent}
.nav.solid{background:rgba(10,8,24,.75); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-color:var(--line)}
.nav-in{height:66px; display:flex; align-items:center; justify-content:space-between; gap:12px}
.logo{font-family:var(--display); font-weight:700; font-size:22px; letter-spacing:.06em; text-decoration:none; display:flex; gap:1px}
.logo span:nth-child(5n+1){color:var(--lead)} .logo span:nth-child(5n+2){color:var(--research)} .logo span:nth-child(5n+3){color:var(--content)} .logo span:nth-child(5n+4){color:var(--designer)} .logo span:nth-child(5n){color:var(--reviewer)}
.logo i{width:10px}
.steps{display:flex; gap:4px; align-items:center}
.steps a{width:22px; height:6px; border-radius:3px; background:var(--line2); transition:background .3s, width .3s var(--ease)}
.steps a.on{background:var(--c); width:34px}

/* hero */
.hero{min-height:100svh; padding:120px 0 70px; display:flex; flex-direction:column; justify-content:center}
.hero-top{text-align:center}
.title{font-size:clamp(64px,12vw,184px); line-height:.9; letter-spacing:.02em; display:flex; justify-content:center; flex-wrap:wrap; gap:0 .28em}
.title .word{display:inline-flex}
.title .ch{display:inline-block}
.title .ch:nth-child(1){color:var(--lead)} 
.ttl-colors .ch{text-shadow:0 6px 0 rgba(0,0,0,.35)}
.hero-sub{font-family:var(--display); font-weight:600; font-size:clamp(22px,2.6vw,34px); margin:18px 0 0}
.hero p.lede{margin:16px auto 0; text-align:center}
.hero-tags{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:26px}
.hero-cta{display:flex; justify-content:center; gap:12px; margin-top:30px; flex-wrap:wrap}
.crew-row{display:flex; justify-content:center; gap:10px; margin-top:34px}
.crew-row .av{width:58px; height:58px; border-radius:18px; transition:transform .4s var(--pop)}
.crew-row .av:hover{transform:translateY(-8px) rotate(-6deg)}
.hero-shot{margin-top:60px; perspective:1600px}
.hero-shot .shot{transform:rotateX(14deg); transform-origin:center top; transition:transform .2s linear}

/* question */
.qbig{font-family:var(--display); font-weight:700; font-size:clamp(34px,5vw,72px); line-height:1.02; text-align:center; max-width:18ch; margin:0 auto}
.qbig em{font-style:normal; background:linear-gradient(90deg,var(--research),var(--designer),var(--content)); -webkit-background-clip:text; background-clip:text; color:transparent}
.flow3{display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:40px}
.flow3 span{font-family:var(--display); font-weight:600; font-size:17px; padding:10px 18px; border-radius:99px; background:var(--panel); border:1px solid var(--line2)}
.flow3 span:nth-child(odd){border-color:color-mix(in srgb,var(--c) 60%, transparent); color:var(--c)}

/* split */
.split{display:grid; grid-template-columns:1fr 1.15fr; gap:70px; align-items:center}
.seg{display:inline-flex; padding:5px; border-radius:99px; background:var(--panel); border:1px solid var(--line)}
.seg button{border:0; background:none; padding:10px 18px; border-radius:99px; font-family:var(--display); font-weight:600; font-size:15px; color:var(--muted)}
.seg button[aria-selected="true"]{background:#fff; color:#170f35}
.view{padding:22px; margin-top:16px; min-height:330px}
.drow{display:grid; grid-template-columns:1fr auto; padding:13px 0; border-top:1px solid var(--line); font-family:var(--mono); font-size:13px; color:var(--muted)}
.drow:first-child{border-top:0}
.hrow{display:grid; grid-template-columns:44px 1fr; gap:14px; padding:12px 0; border-top:1px solid var(--line); align-items:center; animation:rise .5s var(--ease) both}
.hrow:first-child{border-top:0}
.hrow b{font-family:var(--display); font-weight:600; color:var(--c)}
@keyframes rise{from{opacity:0; transform:translateY(10px)}}
.qs{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px}

/* three views */
.views{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:50px}
.vcard{padding:26px; text-align:left; border:1px solid var(--line); transition:translate .4s var(--pop), border-color .3s}
.vcard:hover,.vcard.on{translate:0 -6px; border-color:var(--c)}
.vcard .ico{height:120px; border-radius:18px; background:var(--bg2); margin-bottom:20px; position:relative; overflow:hidden; border:1px solid var(--line)}
.vcard .k{font-family:var(--mono); font-size:11px; color:var(--c)}
.vcard h3{margin:6px 0 6px}
.vcard .q{font-family:var(--display); font-size:20px; font-weight:600; color:var(--text)}
.vcard .new{position:absolute; right:18px; top:18px; font-family:var(--mono); font-size:10px; padding:3px 8px; border-radius:99px; background:var(--designer); color:#170f35}
.mini-rows i{display:block; height:10px; border-radius:5px; background:var(--line2); margin:14px 16px 0}
.mini-rows i:nth-child(2){width:60%; background:color-mix(in srgb,var(--research) 60%, transparent)}
.mini-rows i:nth-child(3){width:75%}
.mini-graph svg,.mini-house svg{width:100%; height:100%}

/* grammar */
.grammar{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:50px}
.gcard{padding:24px 22px 26px; min-height:230px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; transition:translate .4s var(--pop), rotate .4s var(--pop)}
.gcard:hover{translate:0 -6px; rotate:-1deg}
.gcard .big{font-family:var(--display); font-weight:700; font-size:clamp(28px,2.7vw,42px); line-height:1; color:var(--c)}
.gcard .eq{font-family:var(--display); font-weight:600; font-size:22px}
.gcard small{color:var(--muted); font-size:14px}
.gcard::after{content:""; position:absolute; width:160px; height:160px; right:-50px; top:-50px; border-radius:50%; background:radial-gradient(closest-side, color-mix(in srgb,var(--c) 40%, transparent), transparent)}

/* translation */
.trans{margin-top:50px; border:1px solid var(--line); border-radius:26px; overflow:hidden}
.trow{display:grid; grid-template-columns:1fr 60px 1fr; align-items:center; padding:14px 26px; border-top:1px solid var(--line); transition:background .25s}
.trow:first-child{border-top:0; background:var(--panel)}
.trow:first-child span{font-family:var(--mono); font-size:11px; color:var(--dim)}
.trow span:first-child{color:var(--muted); font-family:var(--mono); font-size:14px}
.trow span:last-child{font-family:var(--display); font-weight:600; font-size:19px}
.trow .ar{color:var(--dim); text-align:center; transition:color .3s, transform .3s var(--pop)}
.trow:not(:first-child):hover{background:color-mix(in srgb,var(--c) 10%, transparent)}
.trow:not(:first-child):hover .ar{color:var(--c); transform:translateX(6px)}
.trow:not(:first-child):hover span:last-child{color:var(--c)}

/* world */
.three-beats{display:grid; gap:0; margin-top:28px}
.three-beats p{margin:0; padding:16px 0; border-top:1px solid var(--line); font-family:var(--display); font-weight:600; font-size:clamp(20px,2.2vw,28px); color:var(--dim); transition:color .4s}
.three-beats p span{font-family:var(--mono); font-size:12px; color:var(--dim); display:block; font-weight:400}
.three-beats p.on{color:var(--text)}

/* team */
.roster{display:flex; gap:10px; flex-wrap:wrap; margin:40px 0 18px}
.rbtn{display:flex; align-items:center; gap:10px; padding:8px 16px 8px 8px; border-radius:99px; border:1px solid var(--line2); background:var(--panel); transition:border-color .3s, background .3s, translate .3s var(--pop)}
.rbtn .av{width:40px; height:40px; border-radius:50%}
.rbtn b{font-family:var(--display); font-weight:600}
.rbtn[aria-pressed="true"]{border-color:var(--c); background:color-mix(in srgb,var(--c) 14%, var(--panel)); translate:0 -3px}
.team-grid{display:grid; grid-template-columns:380px 1fr; gap:20px; align-items:start}
.idcard{padding:22px; background:#fbf9ff; color:#1d1638; border-radius:26px; position:relative; box-shadow:0 30px 70px rgba(0,0,0,.45)}
.idcard .tbid{display:inline-block; font-family:var(--mono); font-size:11px; padding:3px 9px; border-radius:6px; background:color-mix(in srgb,var(--c) 22%, #fff); color:color-mix(in srgb,var(--c) 70%, #000)}
.idcard .hd{display:flex; gap:16px; align-items:center; margin:16px 0 18px}
.idcard .hd .av{width:96px; height:96px; border-radius:24px; box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 40%, #fff)}
.idcard h3{font-size:28px; font-weight:700; color:#1d1638; margin:0}
.idcard .sub{font-weight:600; font-size:14px; color:#5b5378}
.idcard dt{font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:#8b84a8; text-transform:uppercase; margin-top:12px}
.idcard dd{margin:2px 0 0; font-weight:600; font-size:15px}
.idcard .bar{height:8px; border-radius:4px; background:#ece7f7; margin-top:6px; overflow:hidden}
.idcard .bar i{display:block; height:100%; width:0; background:var(--c); border-radius:4px; transition:width 1.2s var(--ease)}
.idcard .desc{border-top:1px dashed #ddd6ee; margin-top:16px; padding-top:12px; font-size:14px; color:#5b5378}
.idcard .agent{font-family:var(--mono); font-size:11px; color:#a39cbd}
.team-shot{position:relative}
.team-shot .shot img{aspect-ratio:16/10; object-fit:cover}
.placeholder-art{aspect-ratio:16/10; display:grid; place-items:center; background:radial-gradient(60% 60% at 50% 50%, color-mix(in srgb,var(--c) 25%, transparent), var(--panel))}
.placeholder-art .av{width:180px; height:180px; border-radius:46px; box-shadow:0 0 0 4px var(--c), 0 30px 60px rgba(0,0,0,.5)}

/* states */
.stage-bot{background:radial-gradient(55% 50% at 50% 62%, color-mix(in srgb,var(--bc,var(--designer)) 22%, transparent), transparent 72%), linear-gradient(180deg,#14121d,#0e0c15)!important; aspect-ratio:1.25!important; display:block!important; cursor:grab}
.stage-bot:active{cursor:grabbing}
.stage-bot .floor{position:absolute; left:-10%; right:-10%; bottom:0; height:30%; background:repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 46px), repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 46px); transform:perspective(380px) rotateX(62deg); transform-origin:bottom; mask-image:linear-gradient(transparent, #000 60%)}
#bot3d{position:absolute; inset:0; z-index:2}
#bot3d canvas{display:block; width:100%!important; height:100%!important}
.bot-fallback{position:absolute; left:50%; top:52%; width:62%; transform:translate(-50%,-50%); z-index:1; display:none}
.no-webgl .bot-fallback{display:block}
.stage-bot .zz{left:58%; top:12%}
.stage-bot .ding{top:8%}
.stage-bot .wait{top:7%}
.bot-pick{position:absolute; left:14px; bottom:12px; z-index:4; display:flex; gap:6px}
.bot-pick button{display:flex; align-items:center; gap:6px; padding:5px 10px 5px 5px; border-radius:10px; border:2px solid rgba(255,255,255,.14); background:rgba(14,12,21,.8); font-family:var(--display); font-weight:800; font-size:12px; text-transform:uppercase; font-variation-settings:"wdth" 110; backdrop-filter:blur(8px)}
.bot-pick button .av{width:26px; height:26px; border-radius:7px}
.bot-pick button[aria-pressed="true"]{border-color:var(--c); background:color-mix(in srgb,var(--c) 20%, rgba(14,12,21,.85))}
.drag-hint{position:absolute; right:14px; bottom:12px; z-index:4; font-family:var(--mono); font-size:10px; text-transform:uppercase; color:var(--dim); letter-spacing:.06em}
.states{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; margin-top:40px}
.stage-bot{position:relative; aspect-ratio:1.2; border-radius:30px; background:radial-gradient(60% 60% at 50% 60%, rgba(244,114,182,.18), transparent 70%), var(--panel); border:1px solid var(--line); display:grid; place-items:center; overflow:hidden}
.stage-bot .desk{position:absolute; left:15%; right:15%; bottom:14%; height:12%; border-radius:14px; background:var(--panel2); border:1px solid var(--line2); transition:box-shadow .4s, border-color .4s}
.stage-bot .me{width:42%; aspect-ratio:1; border-radius:36%; overflow:hidden; position:relative; z-index:2; box-shadow:0 0 0 4px var(--designer), 0 20px 50px rgba(0,0,0,.5); transition:transform .5s var(--pop), filter .4s}
.stage-bot .me img{width:100%; height:100%; object-fit:cover}
.fx{position:absolute; z-index:3; pointer-events:none; font-family:var(--display); font-weight:700}
.zz{left:63%; top:22%; display:none}
.zz span{position:absolute; color:var(--research); animation:zz 2.4s ease-in infinite; opacity:0}
.zz span:nth-child(1){font-size:18px; animation-delay:0s}
.zz span:nth-child(2){font-size:24px; animation-delay:.8s; left:14px}
.zz span:nth-child(3){font-size:34px; animation-delay:1.6s; left:30px}
@keyframes zz{0%{opacity:0; transform:translate(0,10px)} 30%{opacity:1} 100%{opacity:0; transform:translate(16px,-50px)}}
.ding{left:50%; top:16%; transform:translateX(-50%); display:none; font-size:34px; color:var(--content); text-shadow:0 0 30px var(--content)}
.ring{position:absolute; left:50%; top:50%; width:46%; aspect-ratio:1; border-radius:50%; border:3px solid var(--content); transform:translate(-50%,-50%) scale(.8); opacity:0; z-index:1}
.think{left:63%; top:18%; display:none; background:#fff; color:#1d1638; padding:8px 16px; border-radius:18px 18px 18px 4px; font-size:22px; min-width:66px; text-align:center}
.okay{left:62%; top:18%; display:none; width:58px; height:58px; border-radius:50%; background:var(--mail); color:#082418; font-size:32px; place-items:center}
.wait{left:50%; top:10%; transform:translateX(-50%); display:none; background:var(--reviewer); color:#fff; padding:9px 18px; border-radius:99px; font-size:16px; letter-spacing:.06em; white-space:nowrap; box-shadow:0 0 40px rgba(255,61,113,.6)}
.gear{right:22%; bottom:28%; display:none; font-size:30px}
.gear span{display:inline-block; animation:spin 2s linear infinite; color:var(--content)}
@keyframes spin{to{transform:rotate(360deg)}}
.workbar{left:22%; right:22%; bottom:18%; height:8px; border-radius:4px; background:var(--line2); display:none; overflow:hidden}
.workbar i{display:block; height:100%; width:30%; background:linear-gradient(90deg,var(--designer),var(--content)); border-radius:4px; animation:work 1.6s ease-in-out infinite}
@keyframes work{0%{transform:translateX(-100%)} 100%{transform:translateX(340%)}}
.s-sleep .zz,.s-ding .ding,.s-think .think,.s-done .okay,.s-wait .wait,.s-work .gear,.s-work .workbar{display:block}
.s-done .okay{display:grid}
.s-sleep .me{filter:saturate(.4) brightness(.7); transform:rotate(-8deg) translateY(6px)}
.s-ding .me{transform:scale(1.06) rotate(4deg)}
.s-ding .ring{animation:ringo 1s ease-out infinite}
@keyframes ringo{0%{opacity:.9; transform:translate(-50%,-50%) scale(.9)} 100%{opacity:0; transform:translate(-50%,-50%) scale(1.6)}}
.s-work .desk{border-color:var(--designer); box-shadow:0 0 40px rgba(244,114,182,.4)}
.s-done .me{transform:translateY(-8px)}
.s-wait .me{transform:scale(1.14); box-shadow:0 0 0 4px var(--reviewer), 0 0 60px rgba(255,61,113,.5)}
.sbtns{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.sbtn{text-align:left; padding:14px 16px; border-radius:18px; border:1px solid var(--line2); background:var(--panel); transition:border-color .3s, background .3s, translate .3s var(--pop)}
.sbtn b{display:block; font-family:var(--display); font-weight:600; font-size:18px}
.sbtn small{font-family:var(--mono); font-size:12px; color:var(--muted)}
.sbtn[aria-pressed="true"]{border-color:var(--c); background:color-mix(in srgb,var(--c) 14%, var(--panel)); translate:0 -3px}
.loop-play{margin-top:14px}

/* railway */
.rail-card{margin-top:44px; padding:26px 26px 18px; overflow:hidden}
.rail-card svg{width:100%; height:auto; display:block}
.track-base{fill:none; stroke:#2a2450; stroke-width:16; stroke-linecap:round}
.track-ties{fill:none; stroke:url(#railg); stroke-width:10; stroke-dasharray:6 6; stroke-linecap:butt}
.st-name{font-family:var(--display); font-weight:600; font-size:15px; fill:var(--muted); transition:fill .3s}
.st-sub{font-family:var(--mono); font-size:10px; fill:var(--dim)}
.st.on .st-name{fill:#fff}
.st circle.pad{fill:var(--panel2); stroke-width:3; transition:r .4s}
.st.on circle.pad{r:30}
.st .zzz{font-family:var(--display); font-size:12px; fill:var(--research); opacity:.8}
.st.on .zzz{opacity:0}
.rail-ctl{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:14px}
.rail-msg{font-family:var(--mono); font-size:13px; color:var(--muted); margin-left:auto; min-height:1.6em}
.rail-msg b{color:var(--text); font-weight:500}
.back-note{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px}
.back-note .card{padding:20px}
.flowtxt{font-family:var(--mono); font-size:13px; color:var(--muted); line-height:2}
.flowtxt b{color:var(--c); font-weight:500}

/* human */
.human{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; margin-top:44px}
.pkg{background:#fbf9ff; color:#1d1638; border-radius:28px; padding:24px; box-shadow:0 0 0 3px rgba(255,61,113,.4), 0 30px 80px rgba(0,0,0,.5); position:relative; overflow:hidden}
.pkg .wt{display:inline-flex; gap:6px; align-items:center; background:var(--reviewer); color:#fff; font-family:var(--display); font-weight:700; letter-spacing:.08em; font-size:12px; padding:5px 12px; border-radius:8px}
.pkg .hd{display:flex; gap:12px; align-items:center; margin:12px 0 10px}
.pkg .hd .av{width:52px; height:52px; border-radius:16px}
.pkg h3{color:#1d1638; font-size:22px; margin:0}
.pkg .sub{font-size:13px; color:#6b6388; font-weight:600}
.pkg .box{border:1px solid #e6e0f3; border-radius:18px; padding:16px; margin:14px 0}
.pkg .lab{font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:.08em; color:#7c4dff}
.pkg .lab.y{color:#d18a00}.pkg .lab.p{color:#e0457b}
.pkg ul{margin:6px 0 12px; padding-left:18px; font-size:14px}
.pkg .hook{font-family:var(--display); font-weight:700; font-size:20px; margin:4px 0 12px}
.frames{display:flex; gap:8px}
.frames i{width:46px; height:64px; border-radius:8px; background:linear-gradient(180deg,#1d1638 50%, var(--f) 50%); position:relative; box-shadow:0 0 0 2px #1d1638}
.frames i::before{content:""; position:absolute; left:50%; top:22%; width:16px; height:16px; margin-left:-8px; border-radius:50%; background:var(--f)}
.frames i.small::after{content:"logo"; position:absolute; left:4px; bottom:3px; font-family:var(--mono); font-size:7px; color:#1d1638}
.pkg .acts{display:flex; gap:10px; flex-wrap:wrap}
.ap{background:#22c55e; color:#fff; border:0; font-family:var(--display); font-weight:700; font-size:16px; padding:12px 20px; border-radius:14px; box-shadow:0 4px 0 #15803d}
.rq{background:#fff1ea; color:#e0457b; border:0; font-family:var(--display); font-weight:700; font-size:16px; padding:12px 20px; border-radius:14px; box-shadow:0 4px 0 #f5c9b8}
.ap:active,.rq:active{transform:translateY(3px); box-shadow:none}
.notes{display:none; flex-wrap:wrap; gap:8px; margin-top:12px}
.notes.show{display:flex}
.notes button{border:1px solid #e6e0f3; background:#fff; color:#1d1638; border-radius:99px; padding:7px 13px; font-size:13px; font-weight:600}
.notes button:hover{border-color:#e0457b; color:#e0457b}
.stamp{position:absolute; right:22px; top:40%; font-family:var(--display); font-weight:700; font-size:44px; letter-spacing:.06em; padding:4px 18px; border:5px solid; border-radius:12px; transform:rotate(-12deg) scale(2.2); opacity:0; pointer-events:none; transition:transform .45s var(--pop), opacity .2s; background:rgba(255,255,255,.85)}
.stamp.show{opacity:1; transform:rotate(-12deg) scale(1)}
.stamp.ok{color:#16a34a; border-color:#16a34a}
.stamp.no{color:#e11d48; border-color:#e11d48}
.result{margin-top:14px; font-size:14px; color:#5b5378; min-height:1.5em; font-weight:600}
.route-mini{display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:10px; font-family:var(--mono); font-size:12px}
.route-mini span{padding:4px 9px; border-radius:99px; background:#f1edf9; color:#5b5378; opacity:.35; transition:opacity .3s, background .3s, color .3s}
.route-mini span.lit{opacity:1; background:#1d1638; color:#fff}

/* workspaces */
.ws{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:44px}
.wcard{padding:24px; min-height:200px; overflow:hidden; transition:translate .4s var(--pop), border-color .3s}
.wcard:hover{translate:0 -6px; border-color:var(--c)}
.wcard .wi{width:54px; height:54px; border-radius:16px; background:color-mix(in srgb,var(--c) 22%, var(--panel2)); display:grid; place-items:center; margin-bottom:16px; border:1px solid color-mix(in srgb,var(--c) 50%, transparent)}
.wcard .wi svg{width:28px; height:28px; stroke:var(--c); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.wcard:hover .wi{animation:wob .6s var(--pop)}
@keyframes wob{30%{transform:rotate(-12deg) scale(1.1)} 60%{transform:rotate(8deg)}}
.wcard p{color:var(--muted); font-size:15px; margin:0}
.wcard .out{display:inline-block; margin-top:14px; font-family:var(--mono); font-size:11px; color:var(--c)}

/* camera */
.cam{margin-top:44px; position:relative; border-radius:28px; overflow:hidden; border:1px solid var(--line2); background:#c9bdf3; aspect-ratio:16/10; touch-action:none; cursor:grab; user-select:none}
.cam:active{cursor:grabbing}
.cam-in{position:absolute; inset:0; transform-origin:0 0; will-change:transform}
.cam-in img{width:100%; height:100%; object-fit:cover; pointer-events:none}
.hot{position:absolute; transform:translate(-50%,-50%); z-index:2; width:30px; height:30px; border-radius:50%; border:3px solid #fff; background:var(--c); box-shadow:0 0 0 6px color-mix(in srgb,var(--c) 35%, transparent); cursor:pointer; padding:0; animation:hotp 1.8s ease-in-out infinite}
@keyframes hotp{50%{box-shadow:0 0 0 12px color-mix(in srgb,var(--c) 10%, transparent)}}
.cam-ui{position:absolute; left:16px; right:16px; bottom:16px; z-index:3; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; pointer-events:none}
.cam-ui > *{pointer-events:auto}
.cam-bots{display:flex; gap:6px; padding:6px; border-radius:20px; background:rgba(255,255,255,.92)}
.cam-bots button{border:0; background:none; padding:4px; border-radius:14px; display:flex; flex-direction:column; align-items:center; gap:2px; font-family:var(--display); font-weight:600; font-size:11px; color:#1d1638}
.cam-bots button .av{width:36px; height:36px; border-radius:12px}
.cam-bots button[aria-pressed="true"]{background:color-mix(in srgb,var(--c) 22%, #fff)}
.cam-ctl{display:flex; gap:6px; padding:6px; border-radius:20px; background:rgba(255,255,255,.92); align-items:center}
.cam-ctl button{border:0; background:#f1edf9; color:#1d1638; width:38px; height:38px; border-radius:12px; font-size:18px; font-weight:700}
.cam-ctl button.wide{width:auto; padding:0 14px; font-family:var(--display); font-weight:600; font-size:14px}
.cam-label{position:absolute; left:16px; top:16px; z-index:3; background:rgba(255,255,255,.92); color:#1d1638; border-radius:16px; padding:8px 14px; font-family:var(--display); font-weight:600; font-size:14px}
.cam-label small{display:block; font-family:var(--sans); font-weight:500; font-size:12px; color:#6b6388}
.ctrl-list{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}

/* demo vs live */
.dl{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:40px}
.dl .card{padding:28px}
.switch{display:inline-flex; align-items:center; gap:12px; margin-top:24px; font-family:var(--display); font-weight:600}
.switch button{width:64px; height:34px; border-radius:99px; border:0; background:var(--panel2); position:relative; box-shadow:inset 0 0 0 1px var(--line2)}
.switch button::after{content:""; position:absolute; left:4px; top:4px; width:26px; height:26px; border-radius:50%; background:var(--content); transition:transform .4s var(--pop), background .3s}
.switch button[aria-checked="true"]::after{transform:translateX(30px); background:var(--mail)}
.dl .card{transition:opacity .4s, border-color .4s, transform .4s var(--pop)}
.dl .card.dim{opacity:.35; transform:scale(.97)}
.dl .card.lit{border-color:var(--c)}
.views3{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:70px; border-top:1px solid var(--line)}
.views3 div{padding:26px 24px 0 0}
.views3 div+div{padding-left:24px; border-left:1px solid var(--line)}
.views3 b{display:block; font-family:var(--display); font-weight:700; font-size:30px; color:var(--c)}
.views3 span{font-family:var(--display); font-weight:600; font-size:20px}

/* perf */
.perf{display:flex; flex-wrap:wrap; gap:10px; margin-top:30px}
.perf span{padding:10px 16px; border-radius:14px; background:var(--panel); border:1px solid var(--line); font-size:15px}
.perf span::before{content:"✦ "; color:var(--content)}

/* learn */
.learn{margin-top:44px; display:grid; gap:0}
.lrow{display:grid; grid-template-columns:1fr 70px 1.2fr; align-items:center; padding:20px 0; border-top:1px solid var(--line); font-family:var(--display); font-weight:600; font-size:clamp(20px,2.4vw,32px)}
.lrow span:first-child{color:var(--muted)}
.lrow .ar{height:3px; background:linear-gradient(90deg,transparent,var(--c)); border-radius:2px; position:relative}
.lrow .ar::after{content:""; position:absolute; right:-2px; top:-5px; border-left:10px solid var(--c); border-top:6.5px solid transparent; border-bottom:6.5px solid transparent}
.lrow span:last-child{color:var(--c); padding-left:16px}
.final-q{margin-top:80px; font-family:var(--display); font-weight:700; font-size:clamp(28px,3.6vw,50px); line-height:1.1; max-width:24ch}

/* closing */
.closing{padding:170px 0 80px; text-align:center}
.closing h2{margin:0 auto; max-width:18ch; font-size:clamp(42px,6.4vw,96px)}
.closing h2 span{display:block; color:var(--dim)}
.closing .crew-row .av{width:72px; height:72px; border-radius:22px}
.foot{border-top:1px solid var(--line); margin-top:110px; padding:28px 0; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:13px; color:var(--muted)}
.slot{border-radius:26px; border:2px dashed var(--line2); background:repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 12px, transparent 12px 24px); display:flex; align-items:flex-end; padding:16px; font-family:var(--mono); font-size:11px; color:var(--dim)}

@media (max-width:980px){
  .wrap{padding:0 20px}
  .sec{padding:96px 0}
  .split,.team-grid,.states,.human,.dl,.back-note{grid-template-columns:1fr; gap:36px}
  .views,.ws{grid-template-columns:1fr}
  .grammar{grid-template-columns:1fr 1fr}
  .views3{grid-template-columns:1fr}
  .views3 div,.views3 div+div{padding:20px 0; border-left:0; border-top:1px solid var(--line)}
  .trow{grid-template-columns:1fr 34px 1fr; padding:12px 16px}
  .lrow{grid-template-columns:1fr 40px 1fr; font-size:18px}
  .sbtns{grid-template-columns:1fr 1fr}
  .steps{display:none}
}
@media (max-width:480px){.logo{font-size:18px} .nav .btn.sm{padding:8px 12px; font-size:13px}}
.btn{white-space:nowrap}
.btn[disabled]{opacity:.45; cursor:default; transform:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important; transition:none!important} html{scroll-behavior:auto}}


:root{--bg:#0B0A12; --bg2:#12101C; --panel:#16141F; --panel2:#1D1A29; --text:#F5F3FA; --muted:#A6A1B8; --dim:#6F6A82;
  --lead:#8B5CF6; --research:#3BB6FF; --content:#FFC83D; --designer:#FF6FB5; --reviewer:#FF3B5C; --mail:#2FD38A; --rail:#FF8A2A; --star:#FFD23F}
body::before{background:radial-gradient(45% 40% at 10% 0%, rgba(139,92,246,.16), transparent 70%), radial-gradient(35% 30% at 95% 25%, rgba(255,111,181,.10), transparent 70%), radial-gradient(40% 40% at 50% 100%, rgba(59,182,255,.08), transparent 70%)}
body::after{background-image:radial-gradient(rgba(255,255,255,.06) 1.2px, transparent 1.2px); background-size:26px 26px}
h1,h2,h3,.logo{font-family:var(--display); font-variation-settings:"wdth" 112; letter-spacing:-.025em}
h2{font-weight:800; font-size:clamp(38px,5vw,72px); line-height:.95; max-width:14ch}
h3{font-weight:750}
.lede{font-size:19px}
/* logo */
.logo{font-weight:900; font-size:19px; color:var(--text); display:flex; align-items:center; gap:6px; font-variation-settings:"wdth" 125}
.logo em{font-style:normal; background:var(--star); color:#17130a; padding:2px 7px 1px; border-radius:6px; transform:rotate(-6deg); display:inline-block; font-size:15px}
.nav-r{display:flex; gap:10px; align-items:center}
/* buttons: chunky, pressable */
.btn{border-radius:12px; border:2px solid rgba(255,255,255,.18); background:var(--panel2); font-family:var(--display); font-weight:800; font-variation-settings:"wdth" 110; letter-spacing:.01em; text-transform:uppercase; font-size:14px; box-shadow:0 5px 0 #000; transition:transform .12s, box-shadow .12s, background .2s}
.btn:hover{transform:translateY(-2px); box-shadow:0 7px 0 #000}
.btn:active{transform:translateY(4px); box-shadow:0 1px 0 #000}
.btn.go{background:var(--star); color:#17130a; border-color:#17130a; box-shadow:0 5px 0 #b48a00, 0 0 0 0 transparent}
.btn.go:hover{box-shadow:0 7px 0 #b48a00}
.btn.go:active{box-shadow:0 1px 0 #b48a00}
.btn.sm{padding:9px 14px; font-size:12px; box-shadow:0 4px 0 #000}
/* chips + tags: label stickers */
.chip{border-radius:8px; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.04em; border:1.5px solid rgba(255,255,255,.16); background:var(--panel)}
.tag{font-size:11px; text-transform:uppercase; letter-spacing:.06em}
.tag b{border-radius:6px; transform:rotate(-4deg); display:inline-block; padding:4px 9px; color:#0B0A12; box-shadow:3px 3px 0 #000; font-weight:700}
/* cards: game-UI, hard shadows */
.card{border-radius:18px; border:2px solid rgba(255,255,255,.1); background:var(--panel)}
.vcard,.gcard,.wcard{border:2px solid color-mix(in srgb,var(--c) 70%, transparent); box-shadow:7px 7px 0 color-mix(in srgb,var(--c) 45%, #000)}
.vcard:hover,.vcard.on,.gcard:hover,.wcard:hover{box-shadow:10px 10px 0 color-mix(in srgb,var(--c) 55%, #000)}
.gcard::after{display:none}
.gcard{background:linear-gradient(160deg, color-mix(in srgb,var(--c) 16%, var(--panel)), var(--panel))}
.gcard .big{font-weight:900; font-variation-settings:"wdth" 125; letter-spacing:-.03em; text-transform:uppercase; font-size:clamp(26px,2.5vw,38px)}
.gcard .eq{font-weight:700; font-size:20px}
.vcard .new{border-radius:6px; transform:rotate(6deg); box-shadow:2px 2px 0 #000; background:var(--star)}
/* shots: white sticker frames, slight tilt */
.shot{border-radius:18px; border:3px solid #fff; box-shadow:10px 10px 0 rgba(0,0,0,.55)}
.shot::before{display:none}
.split > div > .shot, .human .shot, .back-note + div .shot{transform:rotate(-1deg)}
#workspaces .shot{transform:rotate(1deg)}
.cap{font-size:10px; text-transform:uppercase; letter-spacing:.06em}
/* hero title: white letters with stacked 3D extrusion */
.hero{padding-top:110px}
.title{font-weight:900; font-variation-settings:"wdth" 125; letter-spacing:-.02em; font-size:clamp(60px,11vw,170px); line-height:.86; gap:0 .22em; color:#fff}
.title .word{--x:var(--lead)}
.title .word:nth-child(2){--x:var(--research)}
.title .word:nth-child(3){--x:var(--designer)}
.ttl-colors .ch{color:#fff; text-shadow:1px 1px 0 var(--x),2px 2px 0 var(--x),3px 3px 0 var(--x),4px 4px 0 var(--x),5px 5px 0 var(--x),6px 6px 0 var(--x),7px 7px 0 color-mix(in srgb,var(--x) 60%, #000),8px 8px 0 color-mix(in srgb,var(--x) 60%, #000),9px 9px 0 color-mix(in srgb,var(--x) 60%, #000),14px 16px 24px rgba(0,0,0,.5)}
.hero-sub{font-family:var(--display); font-weight:800; font-variation-settings:"wdth" 110; text-transform:uppercase; letter-spacing:.02em; font-size:clamp(18px,2vw,26px); color:var(--star)}
.crew-row .av{border-radius:50%; box-shadow:0 0 0 3px #fff, 4px 6px 0 rgba(0,0,0,.6)}
.av{border-radius:12px}
.hero-shot .shot{border-width:4px}
.qbig{font-weight:900; font-variation-settings:"wdth" 118; letter-spacing:-.03em; line-height:.98}
.qbig em{background:var(--star); color:#17130a; -webkit-background-clip:border-box; background-clip:border-box; padding:0 .15em; border-radius:10px; display:inline-block; transform:rotate(-2deg)}
.flow3 span{font-family:var(--mono); font-weight:500; font-size:13px; text-transform:uppercase; border-radius:10px; border-width:2px}
/* ticker bands */
.ticker{position:relative; z-index:2; overflow:hidden; padding:14px 0; background:var(--star); color:#17130a; transform:rotate(-2deg); margin:30px -20px; box-shadow:0 8px 0 rgba(0,0,0,.4); border-block:3px solid #17130a}
.ticker.pink{background:var(--designer); transform:rotate(1.5deg)}
.ticker.blue{background:var(--research); transform:rotate(-1.2deg)}
.ticker-track{display:flex; width:max-content; animation:tick 28s linear infinite; font-family:var(--display); font-weight:900; font-variation-settings:"wdth" 125; text-transform:uppercase; font-size:clamp(20px,2.4vw,32px); letter-spacing:-.01em; white-space:nowrap}
.ticker.pink .ticker-track{animation-direction:reverse}
.ticker-track span{padding:0 22px; display:flex; align-items:center; gap:22px}
.ticker-track span::after{content:"✦"; font-size:.7em}
@keyframes tick{to{transform:translateX(-50%)}}
/* section headings with big ghost numbers */
.sec .tag b{font-family:var(--display)}
/* seg / toggles */
.seg{border-radius:14px; border:2px solid rgba(255,255,255,.12)}
.seg button{border-radius:10px; font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:13px; font-variation-settings:"wdth" 110}
.seg button[aria-selected="true"]{background:var(--star); color:#17130a}
.rbtn{border-radius:14px; border-width:2px; box-shadow:0 4px 0 #000}
.rbtn b,.sbtn b{font-weight:800; font-variation-settings:"wdth" 110}
.rbtn .av{border-radius:10px}
.sbtn{border-width:2px; border-radius:14px; box-shadow:0 4px 0 #000}
.trow span:last-child{font-weight:800; font-variation-settings:"wdth" 110}
.three-beats p{font-weight:800; font-variation-settings:"wdth" 110}
.idcard{border-radius:18px; border:3px solid #fff; box-shadow:10px 10px 0 color-mix(in srgb,var(--c) 60%, #000); transform:rotate(-1.5deg)}
.idcard h3{font-weight:900; font-variation-settings:"wdth" 118}
.idcard .tbid{border-radius:4px; font-weight:700}
.idcard .hd .av{border-radius:16px}
.stage-bot{border-radius:20px; border:2px solid rgba(255,255,255,.1)}
.stage-bot .me{border-radius:28%}
.fx{font-family:var(--display); font-variation-settings:"wdth" 120}
.wait{border-radius:8px; box-shadow:4px 4px 0 #000}
.think{border-radius:12px 12px 12px 3px}
.rail-card{border-radius:20px}
.st-name{font-weight:800; font-variation-settings:"wdth" 110; text-transform:uppercase; font-size:13px}
.pkg{border-radius:18px; border:3px solid #fff; box-shadow:10px 10px 0 rgba(255,59,92,.55)}
.pkg .wt{border-radius:5px}
.pkg h3{font-weight:900; font-variation-settings:"wdth" 112}
.pkg .hook{font-weight:900; font-variation-settings:"wdth" 112}
.ap,.rq{font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:14px; border-radius:10px; border:2px solid #17130a}
.stamp{font-weight:900; font-variation-settings:"wdth" 125; border-radius:6px}
.wcard .wi{border-radius:12px}
.cam{border-radius:20px; border:3px solid #fff; box-shadow:10px 10px 0 rgba(0,0,0,.55)}
.cam-bots,.cam-ctl,.cam-label{border-radius:12px; border:2px solid #17130a; box-shadow:4px 4px 0 rgba(0,0,0,.4)}
.cam-label{font-weight:800}
.cam-bots button{font-weight:700}
.hot{border-radius:8px; transform-origin:center}
.dl .card{box-shadow:7px 7px 0 rgba(0,0,0,.5)}
.views3 b{font-weight:900; font-variation-settings:"wdth" 120; text-transform:uppercase; font-size:24px}
.views3 span{font-weight:700}
.perf span{border-radius:10px; border:2px solid rgba(255,255,255,.1)}
.perf span::before{color:var(--star)}
.lrow{font-weight:800; font-variation-settings:"wdth" 110}
.final-q{font-weight:900; font-variation-settings:"wdth" 115; letter-spacing:-.03em}
.closing h2{font-weight:900; font-variation-settings:"wdth" 118}
.slot{border-radius:18px}
/* quotes strip (reviews) */
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:60px}
.quote-card{padding:22px; border-radius:16px; background:var(--panel); border:2px solid rgba(255,255,255,.1); box-shadow:6px 6px 0 #000}
.quote-card p{font-family:var(--display); font-weight:800; font-variation-settings:"wdth" 108; font-size:19px; line-height:1.2; margin:0 0 12px}
.quote-card span{font-family:var(--mono); font-size:11px; color:var(--muted); text-transform:uppercase}
.quote-card:nth-child(1){transform:rotate(-1.5deg)} .quote-card:nth-child(3){transform:rotate(1.2deg)}
/* hidden stickers */
.stk-count{display:flex; align-items:center; gap:8px; border:2px solid rgba(255,255,255,.16); background:var(--panel); border-radius:10px; padding:6px 10px; font-family:var(--mono); font-size:11px; text-transform:uppercase; color:var(--muted)}
.stk-dots{display:flex; gap:3px}
.stk-dots i{width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.14); transition:background .3s, transform .3s}
.stk-dots i.got{background:var(--star); transform:scale(1.2)}
.sticker{position:absolute; z-index:5; width:58px; height:58px; border-radius:50%; padding:0; border:3px solid #fff; overflow:hidden; box-shadow:3px 4px 0 rgba(0,0,0,.6); transform:rotate(var(--r,-12deg)); transition:transform .3s; cursor:pointer; background:#fff}
.sticker img{width:100%; height:100%; object-fit:cover}
.sticker:hover{transform:rotate(0) scale(1.12)}
.sticker.found{pointer-events:none}
.toast{position:fixed; left:50%; bottom:24px; transform:translate(-50%,140%); z-index:90; background:var(--star); color:#17130a; border:3px solid #17130a; border-radius:14px; padding:14px 18px; box-shadow:6px 6px 0 rgba(0,0,0,.5); display:flex; gap:14px; align-items:center; max-width:min(560px, calc(100vw - 32px)); transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.toast:not(.show){transform:translate(-50%,calc(100% + 60px)); visibility:hidden; transition:transform .5s cubic-bezier(.34,1.56,.64,1), visibility 0s .5s}
.toast.show{transform:translate(-50%,0)}
.toast b{font-family:var(--display); font-weight:900; font-variation-settings:"wdth" 115; text-transform:uppercase; display:block; font-size:17px}
.toast span{font-size:14px}
.toast .tav{display:flex}
.toast .tav .av{width:34px; height:34px; border-radius:50%; margin-left:-8px; box-shadow:0 0 0 2px #17130a}
.hunt{display:inline-flex; gap:10px; align-items:center; margin-top:22px; font-family:var(--mono); font-size:12px; text-transform:uppercase; color:var(--muted)}
.hunt b{color:var(--star); font-weight:700}
@media (max-width:980px){.quotes{grid-template-columns:1fr} .stk-count #stkTxt{display:none} .ticker{margin:20px -20px}}
@media (max-width:480px){.nav .btn.sm{display:none}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}}


/* ================= MISSION OS — the case study behaves like HQ ================= */
.sr-only{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* speech bubble (shared) */
.bubble{margin:0; background:#fff; color:#17130a; font-family:var(--display); font-weight:800; font-variation-settings:"wdth" 108; font-size:15px; line-height:1.15; padding:8px 13px; border:2px solid #17130a; border-radius:14px 14px 14px 4px; box-shadow:3px 3px 0 rgba(0,0,0,.55); white-space:nowrap; letter-spacing:0}
.bubble.say{animation:say .45s var(--pop)}
@keyframes say{from{transform:scale(.55); opacity:0}}

/* ---------- rail component (nav + human) ---------- */
.rl-track{position:relative; height:100%}
.rl-track::before{content:""; position:absolute; left:0; right:0; top:var(--ry,50%); height:4px; margin-top:-2px; border-radius:2px; background:repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 6px, transparent 6px 10px)}
.rl-fill{position:absolute; left:0; right:0; top:var(--ry,50%); height:4px; margin-top:-2px; border-radius:2px; background:linear-gradient(90deg,#F5F3FA,var(--lead) 17%,var(--research) 33%,var(--content) 50%,var(--designer) 67%,var(--reviewer) 83%,var(--mail)); clip-path:inset(0 100% 0 0)}
.rl[data-mode="rev"] .rl-fill{background:var(--reviewer)}
.rl-stop{position:absolute; left:calc(var(--i) * 100% / 6); top:var(--ry,50%); transform:translate(-50%,-50%); display:grid; place-items:center; text-decoration:none; color:inherit}
.rl-stop > i{width:10px; height:10px; border-radius:50%; background:var(--bg); border:2px solid color-mix(in srgb,var(--c) 70%, transparent); transition:background .3s, transform .3s var(--pop)}
.rl-stop.done > i,.rl-stop.cur > i{background:var(--c); border-color:var(--c)}
.rl-stop.ping > i{animation:rlping .7s var(--pop)}
@keyframes rlping{40%{transform:scale(2)}}
.rl-cap{position:absolute; left:0; top:var(--ry,50%); transform:translate(-50%,-50%); z-index:2; pointer-events:none; will-change:transform; --c:#fff}
.rl-cap b{display:block; white-space:nowrap; font-family:var(--display); font-weight:900; font-variation-settings:"wdth" 112; text-transform:uppercase; letter-spacing:.02em; background:#fff; color:#17130a; border:2px solid #17130a; border-radius:6px; box-shadow:0 3px 0 var(--c); transition:background .3s, color .3s}
.rl[data-mode="wait"] .rl-cap b{background:var(--reviewer); color:#fff; box-shadow:0 3px 0 #7a0f22; animation:capwait 1.4s ease-in-out infinite}
.rl[data-mode="rev"] .rl-cap b{background:var(--reviewer); color:#fff; box-shadow:0 3px 0 #7a0f22}
@keyframes capwait{50%{box-shadow:0 3px 0 #7a0f22, 0 0 0 7px rgba(255,59,92,.28)}}

/* nav mission rail */
.mrail{position:relative; flex:1 1 auto; max-width:580px; height:46px; margin:0 22px; --ry:16px}
.mrail .rl-stop::after{content:""; position:absolute; inset:-12px -16px -20px}
.mrail .rl-stop span{position:absolute; top:14px; font-family:var(--mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); white-space:nowrap; transition:color .3s}
.mrail .rl-stop.cur span{color:var(--text)}
.mrail .rl-stop:focus-visible{outline:none}
.mrail .rl-stop:focus-visible > i{outline:2px solid var(--designer); outline-offset:3px}
.mrail .rl-cap b{font-size:9px; padding:2px 7px}
.mr-nudge{position:absolute; right:0; top:calc(100% + 4px); display:flex; gap:8px; align-items:center; background:var(--reviewer); color:#fff; border:2px solid #17130a; border-radius:10px; padding:3px 10px 3px 3px; font-family:var(--display); font-weight:800; font-size:11px; text-transform:uppercase; letter-spacing:.02em; box-shadow:3px 3px 0 #000; animation:nudge 1s ease-in-out 4; white-space:nowrap}
.mr-nudge img{width:24px; height:24px; border-radius:50%; background:#fff}
.mr-nudge[hidden]{display:none}
@keyframes nudge{50%{transform:translateY(3px)}}
@media (max-width:1080px){
  .nav-in{position:relative}
  .mrail{position:absolute; left:14px; right:14px; top:calc(100% - 4px); margin:0; max-width:none; height:28px; --ry:13px; padding:0 22px; background:rgba(11,10,18,.84); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1.5px solid rgba(255,255,255,.12); border-radius:99px}
  .mrail .rl-stop span{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .mr-nudge{right:50%; translate:50% 0; top:calc(100% + 8px); font-size:10px}
  html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 112px)}
}

/* ---------- handoff strips (department transitions) ---------- */
.handoff{position:relative; z-index:2; padding:92px 0 72px}
.ho-rail{position:absolute; left:0; right:0; top:48px; height:16px; pointer-events:none}
.ho-line{position:absolute; inset:0; border-block:3px solid color-mix(in srgb,var(--c) 60%, transparent); background:repeating-linear-gradient(90deg, color-mix(in srgb,var(--c) 32%, transparent) 0 5px, transparent 5px 16px)}
.ho-cap{position:absolute; top:50%; left:calc(100% - 160px); transform:translateY(-50%); z-index:1}
.ho-cap b{display:block; white-space:nowrap; font-family:var(--display); font-weight:900; font-variation-settings:"wdth" 112; font-size:12px; text-transform:uppercase; padding:5px 12px; background:#fff; color:#17130a; border:2px solid #17130a; border-radius:8px; box-shadow:0 4px 0 var(--c)}
.handoff.pre .ho-cap{left:-160px}
.handoff[data-state="held"] .ho-cap{left:24px}
.handoff[data-state="held"] .ho-cap b{background:var(--reviewer); color:#fff}
.ho-in{position:relative; display:grid; grid-template-columns:240px minmax(0,1fr) minmax(0,1.1fr); gap:44px; align-items:center}
.ho-who{position:relative; justify-self:center}
.ho-bot{width:210px; aspect-ratio:1; border-radius:50%; overflow:hidden; border:5px solid #fff; background:#fff; box-shadow:9px 10px 0 color-mix(in srgb,var(--c) 55%, #000); transform:rotate(-6deg); margin-top:-64px; transition:filter .6s, transform .6s var(--pop)}
.ho-bot img{width:100%; height:100%; object-fit:cover}
.ho-crew{display:flex; margin-top:-30px; padding-left:12px}
.ho-crew span{width:58px; height:58px; border-radius:50%; overflow:hidden; border:4px solid #fff; background:#fff; margin-left:-14px; box-shadow:4px 6px 0 rgba(0,0,0,.55); transition:filter .6s}
.ho-crew span:nth-child(odd){transform:translateY(-10px)}
.ho-crew img{width:100%; height:100%; object-fit:cover}
.handoff.pre .ho-bot img{animation:breathe 3.2s ease-in-out infinite}
@keyframes breathe{50%{transform:translateY(-3px) scale(1.025)}}
.handoff[data-state="held"] .ho-crew span{filter:saturate(.6); opacity:.8}
.ho-zz{position:absolute; right:4px; top:-58px; font-family:var(--display); font-weight:900; color:var(--research); font-size:28px; opacity:0; pointer-events:none}
.handoff.pre .ho-zz{opacity:1; animation:hozz 2.2s ease-in-out infinite}
@keyframes hozz{50%{transform:translate(6px,-8px); opacity:.4}}
.ho-who .bubble{position:absolute; left:66%; top:-76px; transform-origin:0 100%}
.handoff.pre .ho-who .bubble{opacity:0}
@media (min-width:981px){.handoff[data-dept="delivery"] .ho-who .bubble{top:-92px; left:40%}}
.ho-k{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--c)}
.ho-t{font-family:var(--display); font-weight:900; font-variation-settings:"wdth" 118; text-transform:uppercase; font-size:clamp(28px,3.1vw,44px); line-height:.95; letter-spacing:-.02em; margin:10px 0 12px}
.ho-t i{font-style:normal; color:var(--c)}
.ho-p{color:var(--muted); font-size:16px; margin:0; max-width:40ch}
.ho-cta{display:none; margin-top:14px; font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:13px; color:#fff; background:var(--reviewer); padding:7px 12px; border-radius:9px; border:2px solid #17130a; box-shadow:3px 3px 0 #000; text-decoration:none}
.handoff[data-state="held"] .ho-cta{display:inline-block}
.ho-demo{position:relative; background:var(--panel); border:2px solid color-mix(in srgb,var(--c) 55%, transparent); border-radius:18px; padding:22px; min-height:196px; box-shadow:7px 7px 0 color-mix(in srgb,var(--c) 40%, #000); transform:rotate(1.2deg); overflow:hidden}
.ho-replay{position:absolute; right:-10px; bottom:-16px; z-index:3; width:34px; height:34px; border-radius:50%; border:2px solid #17130a; background:#fff; color:#17130a; font-weight:900; font-size:16px; box-shadow:2px 3px 0 #000; transition:transform .3s var(--pop)}
.ho-replay:hover{transform:rotate(-120deg)}
/* lead: plan the route */
.plan-brief{display:inline-flex; gap:8px; align-items:center; font-family:var(--mono); font-size:11px; text-transform:uppercase; background:#fbf9ff; color:#1d1638; border-radius:8px; padding:6px 10px; box-shadow:3px 3px 0 #000; margin-bottom:26px}
.plan-brief b{font-family:var(--display); font-weight:900; font-size:13px}
.plan{display:flex; justify-content:space-between; position:relative}
.plan::before{content:""; position:absolute; left:14px; right:14px; top:11px; height:3px; background:repeating-linear-gradient(90deg, var(--line2) 0 6px, transparent 6px 10px)}
.plan span{position:relative; display:grid; justify-items:center; gap:8px; font-family:var(--mono); font-size:10px; text-transform:uppercase; color:var(--dim); transition:color .3s}
.plan span::before{content:""; width:20px; height:20px; border-radius:50%; border:3px solid color-mix(in srgb,var(--c) 50%, transparent); background:var(--panel); transition:background .3s, border-color .3s, transform .35s var(--pop)}
.plan span.lit,.handoff.done .plan span{color:var(--text)}
.plan span.lit::before,.handoff.done .plan span::before{background:var(--c); border-color:var(--c)}
.plan-note{margin:18px 0 0; font-family:var(--mono); font-size:11px; color:var(--muted)}
/* research: scan sources */
.src-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.src{position:relative; font-size:13px; font-weight:600; line-height:1.3; padding:10px 10px 10px 36px; border-radius:10px; background:var(--panel2); border:1.5px solid rgba(255,255,255,.1); transition:opacity .3s, border-color .3s}
.src::before{content:""; position:absolute; left:10px; top:50%; width:18px; height:18px; margin-top:-9px; border-radius:5px; border:2px solid var(--dim); display:grid; place-items:center; font-size:11px; font-weight:900}
.src.ok.hit,.handoff.done .src.ok{border-color:var(--research)}
.src.ok.hit::before,.handoff.done .src.ok::before{content:"✓"; background:var(--research); border-color:var(--research); color:#0B0A12}
.src.no.hit,.handoff.done .src.no{opacity:.42; text-decoration:line-through}
.src.no.hit::before,.handoff.done .src.no::before{content:"✕"; border-color:var(--reviewer); color:var(--reviewer)}
.scan{position:absolute; left:0; right:0; top:0; height:44px; background:linear-gradient(180deg, transparent, color-mix(in srgb,var(--research) 35%, transparent)); border-bottom:2px solid var(--research); opacity:0; pointer-events:none; box-shadow:0 6px 24px color-mix(in srgb,var(--research) 40%, transparent)}
.pack{margin-top:16px; display:inline-flex; gap:8px; align-items:center; font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:13px; background:var(--research); color:#0B0A12; padding:6px 12px; border-radius:8px; box-shadow:3px 3px 0 #000}
/* content: generate a hook */
.demo-content{display:grid; gap:12px; align-content:start}
.note{position:relative; justify-self:start; font-family:var(--display); font-weight:800; font-size:17px; padding:9px 14px; border-radius:6px; background:#FFE9A8; color:#3d2e00; box-shadow:3px 4px 0 rgba(0,0,0,.45); transition:opacity .3s}
.note:nth-child(1){rotate:-2deg} .note:nth-child(2){rotate:1.5deg; margin-left:26px}
.note.x::after{content:""; position:absolute; left:8px; right:8px; top:50%; height:3px; background:#e0457b; transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease)}
.note.x.struck::after,.handoff.done .note.x::after{transform:scaleX(1)}
.note.x.struck,.handoff.done .note.x{opacity:.55}
.note.pick{background:#fff; color:#17130a; font-size:21px; font-weight:900; border:2px solid #17130a; rotate:-1deg; min-height:1.75em; min-width:13ch; margin-top:6px}
.note.pick::before{content:"HOOK"; position:absolute; top:-10px; left:10px; font-family:var(--mono); font-size:9px; font-weight:700; background:var(--content); color:#17130a; padding:1px 6px; border-radius:4px}
.note.pick.got::after,.handoff.done .note.pick::after{content:"✓"; position:absolute; right:-11px; top:-11px; width:26px; height:26px; border-radius:50%; background:var(--mail); color:#0B0A12; display:grid; place-items:center; font-size:13px; border:2px solid #17130a}
/* design: frames + swatches */
.demo-design{display:grid; gap:20px; align-content:center}
.kf{display:flex; gap:14px; perspective:600px}
.kf i{width:clamp(58px,6vw,80px); aspect-ratio:3/4; border-radius:8px; background:linear-gradient(180deg,#1d1638 52%, var(--f) 52%); position:relative; box-shadow:0 0 0 2px #fff, 4px 4px 0 #000}
.kf i::before{content:""; position:absolute; left:50%; top:20%; width:34%; aspect-ratio:1; transform:translateX(-50%); border-radius:50%; background:var(--f)}
.kf i::after{content:attr(data-n); position:absolute; left:5px; bottom:3px; font-family:var(--mono); font-style:normal; font-size:8px; color:#1d1638}
.sw{display:flex; gap:8px; align-items:center}
.sw i{width:34px; height:34px; border-radius:50%; background:var(--s); border:2px solid #fff; box-shadow:2px 3px 0 #000}
.sw small{margin-left:8px; font-family:var(--mono); font-size:10px; text-transform:uppercase; color:var(--muted)}
/* review: checklist */
.chk{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.chk li{display:flex; gap:10px; align-items:center; font-size:14px; font-weight:600; color:var(--dim); transition:color .3s}
.chk li::before{content:""; flex:none; width:22px; height:22px; border-radius:6px; border:2px solid var(--dim); display:grid; place-items:center; font-size:12px; font-weight:900}
.chk li.on,.handoff.done .chk li{color:var(--text)}
.chk li.ok.on::before,.handoff.done .chk li.ok::before{content:"✓"; background:var(--mail); border-color:var(--mail); color:#0B0A12}
.chk li.ask.on::before,.handoff.done .chk li.ask::before{content:"?"; background:var(--reviewer); border-color:var(--reviewer); color:#fff}
.mini-stamp{position:absolute; right:22px; bottom:26px; font-family:var(--display); font-weight:900; font-variation-settings:"wdth" 125; font-size:22px; color:var(--reviewer); border:4px solid var(--reviewer); border-radius:6px; padding:2px 10px; rotate:-10deg; background:rgba(11,10,18,.7)}
/* delivery: ship the package */
.demo-delivery{display:grid; place-items:center; gap:14px}
.parcel{position:relative; width:150px; height:100px; margin-top:26px; background:#C9955B; border:3px solid #17130a; border-radius:6px; box-shadow:6px 6px 0 #000}
.parcel::before{content:""; position:absolute; left:50%; top:0; bottom:0; width:22px; margin-left:-11px; background:rgba(255,255,255,.3)}
.parcel-lid{position:absolute; left:-6px; right:-6px; top:-22px; height:22px; background:#B57F45; border:3px solid #17130a; border-radius:5px; transform-origin:0 100%; transform:rotate(-24deg)}
.handoff[data-state="sent"] .parcel-lid{transform:none}
.parcel-lbl{position:absolute; left:10px; bottom:10px; background:#fff; font-family:var(--mono); font-size:9px; text-transform:uppercase; color:#17130a; padding:3px 6px; border-radius:3px}
.parcel-stamp{position:absolute; right:-26px; top:20px; font-family:var(--display); font-weight:900; font-variation-settings:"wdth" 125; font-size:19px; color:var(--mail); border:3px solid var(--mail); border-radius:5px; padding:1px 8px; rotate:-12deg; background:rgba(11,10,18,.8); opacity:0}
.handoff[data-state="sent"] .parcel-stamp{opacity:1}
.d-state{margin:0; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.04em; text-align:center}
.d-state.held{color:var(--reviewer)} .d-state.sent{color:var(--mail); display:none}
.handoff[data-state="sent"] .d-state.held{display:none}
.handoff[data-state="sent"] .d-state.sent{display:block}

@media (max-width:980px){
  .handoff{padding:78px 0 56px}
  .ho-rail{top:40px}
  .ho-cap{left:calc(100% - 128px)}
  .ho-in{grid-template-columns:1fr; gap:22px}
  .ho-who{justify-self:start; display:flex; align-items:center; gap:14px}
  .ho-bot{width:120px; margin-top:-36px; border-width:4px}
  .ho-crew{margin-top:-20px} .ho-crew span{width:46px; height:46px; margin-left:-12px}
  .ho-who .bubble{position:relative; left:auto; top:auto; white-space:normal; max-width:190px}
  .ho-zz{top:-40px; right:auto; left:96px}
  .ho-replay{bottom:-14px; right:-4px}
  .ho-demo{transform:none}
}

/* ---------- design principle: system → HQ transformation ---------- */
.xf{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:56px; margin-top:34px; align-items:start}
.xf-steps{list-style:none; margin:0; padding:0}
.xf-steps li{min-height:54vh; display:flex; align-items:center}
.xf-steps li:first-child{min-height:44vh}
.xf-step{appearance:none; background:none; border:0; border-left:4px solid var(--line2); padding:14px 0 14px 22px; text-align:left; color:var(--text); opacity:.34; transition:opacity .4s, border-color .4s; width:100%}
.xf-step[aria-pressed="true"]{opacity:1; border-color:var(--c)}
.xf-step:hover{opacity:.8}
.xf-n{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--c); margin-bottom:8px}
.xf-pair{display:flex; flex-wrap:wrap; align-items:baseline; gap:.15em .45em; font-family:var(--display); font-weight:900; font-variation-settings:"wdth" 118; text-transform:uppercase; letter-spacing:-.02em; line-height:.95}
.xf-a{font-size:clamp(20px,2vw,28px); color:var(--muted)}
.xf-pair i{font-style:normal; color:var(--c); font-size:clamp(20px,2vw,28px)}
.xf-b{font-size:clamp(28px,3.2vw,46px); color:var(--c)}
.xf-step small{display:block; margin-top:10px; font-size:15px; color:var(--muted); max-width:36ch}
.xf-sticky{position:sticky; top:max(100px, calc(50vh - 250px))}
.xf-stage{--c:var(--lead); position:relative; aspect-ratio:16/11; border-radius:20px; border:3px solid #fff; overflow:hidden; box-shadow:10px 10px 0 color-mix(in srgb,var(--c) 45%, #000); background:radial-gradient(60% 60% at 50% 55%, color-mix(in srgb,var(--c) 22%, transparent), transparent 72%), var(--panel); transition:background-color .6s, box-shadow .6s, border-color .6s}
.xf-stage[data-v="sys"]{background:linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0/22px 22px, linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0/22px 22px, #0d0c13; border-color:#3a3650; box-shadow:10px 10px 0 rgba(0,0,0,.5)}
.xf-bar{position:absolute; left:14px; right:14px; top:12px; display:flex; justify-content:space-between; align-items:center; gap:10px; z-index:3}
.xf-mode{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; padding:4px 9px; border-radius:6px; background:rgba(255,255,255,.08); color:var(--muted); transition:background .4s, color .4s}
.xf-stage[data-v="hq"] .xf-mode{background:var(--c); color:#0B0A12}
.xf-flip{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.04em; padding:5px 10px; border-radius:8px; border:1.5px solid rgba(255,255,255,.22); background:rgba(11,10,18,.75); color:var(--text)}
.xf-flip:hover{border-color:var(--c)}
.xf-scene{position:absolute; inset:48px 16px 52px; display:none}
.xf-scene.on{display:block}
.xf-scene .sys,.xf-scene .hq{position:absolute; inset:0; display:grid; place-items:center; transition:opacity .45s var(--ease), transform .7s var(--pop), filter .45s}
.xf-stage[data-v="sys"] .hq,.xf-stage[data-v="hq"] .sys{opacity:0; transform:scale(.9); filter:blur(8px); pointer-events:none}
.xf-stage[data-v="hq"] .sys{transform:scale(1.08)}
.xf-cap{position:absolute; left:16px; right:16px; bottom:14px; margin:0; font-family:var(--mono); font-size:12px; line-height:1.4; color:var(--muted); z-index:3}
.xf-cap b{color:var(--c); font-weight:500}
.code{margin:0; font-family:var(--mono); font-size:clamp(11px,1.15vw,14px); line-height:1.75; color:#8f8aa6; background:#14131c; border:1px solid #2c2a3a; border-radius:10px; padding:14px 18px; white-space:pre; text-align:left}
.code .k{color:#d6d1ea} .code .ok{color:#7ee2b0}
.code .cur{display:inline-block; width:.6em; background:#d6d1ea; animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.xf-stage[data-v="hq"] .on .pop{animation:xpop .7s var(--pop) both}
.xf-stage[data-v="hq"] .on .pop.d1{animation-delay:.15s} .xf-stage[data-v="hq"] .on .pop.d2{animation-delay:.3s}
@keyframes xpop{from{opacity:0; transform:scale(.4) rotate(-10deg)}}
.x-port{--c:var(--designer); width:clamp(84px,12vw,150px); aspect-ratio:1; border-radius:50%; overflow:hidden; border:4px solid #fff; background:#fff; box-shadow:6px 8px 0 color-mix(in srgb,var(--c) 55%, #000)}
.x-port img{width:100%; height:100%; object-fit:cover}
/* scene 1 */
.x-char{display:flex; align-items:center; gap:20px}
.x-tag{background:#fbf9ff; color:#1d1638; border-radius:12px; padding:10px 14px; border:3px solid #fff; box-shadow:5px 5px 0 color-mix(in srgb,var(--designer) 55%, #000)}
.x-tag b{display:block; font-family:var(--display); font-weight:900; font-variation-settings:"wdth" 115; font-size:clamp(15px,1.7vw,21px); text-transform:uppercase}
.x-tag span{font-family:var(--mono); font-size:10px; color:#6b6388}
.x-char .bubble{position:absolute; left:50%; top:4%; font-size:13px}
/* scene 2: status → behaviour (6s loop, both layers share timing) */
.cy{display:block; opacity:.28}
.cy:nth-child(1){animation:cy1 6s infinite} .cy:nth-child(2){animation:cy2 6s infinite} .cy:nth-child(3){animation:cy3 6s infinite}
@keyframes cy1{0%,32%{opacity:1; color:#d6d1ea} 34%,100%{opacity:.28}}
@keyframes cy2{0%,32%{opacity:.28} 34%,48%{opacity:1; color:#d6d1ea} 50%,100%{opacity:.28}}
@keyframes cy3{0%,48%{opacity:.28} 50%,100%{opacity:1; color:#7ee2b0}}
.x-beh{position:relative; width:100%; height:100%; display:grid; place-items:center}
.x-beh .x-port{--c:var(--content); animation:beh 6s infinite}
@keyframes beh{0%{transform:none} 9%{transform:translateX(-6px) rotate(-4deg)} 20%{transform:translateX(6px) rotate(4deg)} 30%{transform:none} 36%{transform:scale(1.12) rotate(6deg)} 46%,100%{transform:none}}
.b-z{position:absolute; left:calc(50% + 46px); top:6%; font-family:var(--display); font-weight:900; color:var(--research); font-size:24px; animation:bz 6s infinite}
@keyframes bz{0%,30%{opacity:1} 33%,100%{opacity:0}}
.b-ding{position:absolute; top:2%; font-family:var(--display); font-weight:900; color:var(--content); font-size:26px; text-shadow:0 0 24px var(--content); opacity:0; animation:bding 6s infinite}
@keyframes bding{0%,32%{opacity:0; transform:scale(.6)} 36%{opacity:1; transform:scale(1.2)} 46%{opacity:1; transform:none} 50%,100%{opacity:0}}
.b-bar{position:absolute; bottom:4%; width:44%; height:10px; border-radius:5px; background:rgba(255,255,255,.12); overflow:hidden; opacity:0; animation:bbs 6s infinite}
.b-bar i{display:block; height:100%; background:linear-gradient(90deg,var(--content),var(--designer)); transform-origin:left; animation:bbar 6s infinite}
@keyframes bbs{0%,48%{opacity:0} 52%,100%{opacity:1}}
@keyframes bbar{0%,50%{transform:scaleX(0)} 100%{transform:scaleX(1)}}
.b-lbl{position:absolute; left:0; top:0; font-family:var(--mono); font-size:10px; text-transform:uppercase; color:var(--muted)}
/* scene 3-5: routes */
.x-graph{display:flex; align-items:center; width:84%}
.nd{font-family:var(--mono); font-size:12px; padding:9px 13px; border:1px solid #3a3650; border-radius:6px; background:#14131c; color:#d6d1ea}
.edge{flex:1; height:1px; background:#6f6a82; position:relative; margin:0 6px}
.edge::after{content:""; position:absolute; right:-1px; top:-4px; border-left:8px solid #6f6a82; border-top:4.5px solid transparent; border-bottom:4.5px solid transparent}
.edge em{position:absolute; left:50%; top:-22px; transform:translateX(-50%); font-family:var(--mono); font-style:normal; font-size:10px; color:#6f6a82; white-space:nowrap}
.x-route{position:relative; width:78%; height:70%}
.x-route .rail{position:absolute; left:0; right:0; top:50%; height:14px; margin-top:-7px; border-block:3px solid var(--rail); background:repeating-linear-gradient(90deg, rgba(255,138,42,.55) 0 5px, transparent 5px 14px); transform-origin:left}
.xf-stage[data-v="hq"] .on .x-route .rail{animation:raildraw .9s var(--ease) both .1s}
@keyframes raildraw{from{transform:scaleX(0)}}
.x-route .pad{position:absolute; top:50%; z-index:2; width:clamp(54px,7vw,86px); aspect-ratio:1; border-radius:50%; overflow:hidden; border:4px solid var(--c); background:#fff; transform:translate(-50%,-50%); box-shadow:3px 5px 0 rgba(0,0,0,.5)}
.x-route .pad img{width:100%; height:100%; object-fit:cover}
.x-route small{position:absolute; top:calc(50% + clamp(36px,4.6vw,54px)); transform:translateX(-50%); font-family:var(--mono); font-size:10px; text-transform:uppercase; color:var(--muted); white-space:nowrap}
.xcap{position:absolute; top:50%; left:0; z-index:3; transform:translate(-50%,-50%); font-family:var(--display); font-weight:900; font-variation-settings:"wdth" 112; font-size:11px; text-transform:uppercase; white-space:nowrap; background:#fff; color:#17130a; border:2px solid #17130a; border-radius:6px; padding:3px 8px; box-shadow:0 3px 0 var(--research); animation:xmove 3.6s var(--ease) infinite}
@keyframes xmove{0%,8%{left:0%; opacity:1} 66%{left:100%; opacity:1} 80%,100%{left:100%; opacity:0}}
.x-route .pad.arr{animation:arr 3.6s infinite}
@keyframes arr{0%,62%{filter:saturate(.3) brightness(.7)} 68%{filter:none; transform:translate(-50%,-50%) scale(1.18)} 76%,100%{filter:none; transform:translate(-50%,-50%)}}
.x-route .dg{position:absolute; left:100%; top:calc(50% - clamp(54px,6vw,74px)); transform:translateX(-50%); font-family:var(--display); font-weight:900; color:var(--content); font-size:16px; opacity:0; animation:dg 3.6s infinite}
@keyframes dg{0%,64%{opacity:0} 68%,86%{opacity:1} 92%,100%{opacity:0}}
.x-route.revr .rail{border-color:var(--reviewer); background:repeating-linear-gradient(90deg, rgba(255,59,92,.5) 0 5px, transparent 5px 14px)}
.xcap.rev{background:var(--reviewer); color:#fff; box-shadow:0 3px 0 #7a0f22; animation-name:xback}
@keyframes xback{0%,8%{left:100%; opacity:1} 66%{left:0%; opacity:1} 80%,100%{left:0%; opacity:0}}
.chev{position:absolute; left:50%; top:calc(50% - 40px); transform:translateX(-50%); font-family:var(--display); font-weight:900; color:var(--reviewer); font-size:20px; letter-spacing:.12em; animation:chev 1s linear infinite}
@keyframes chev{50%{opacity:.3}}
/* scene 6: the world waits */
.x-hold{position:relative; width:100%; height:100%; display:grid; place-items:center}
.x-hold .others{position:absolute; left:2%; right:2%; top:0; display:flex; justify-content:space-between}
.x-hold .others span{position:relative; width:clamp(30px,3.6vw,44px); aspect-ratio:1; border-radius:50%; overflow:hidden; border:2px solid rgba(255,255,255,.25); filter:grayscale(1) brightness(.5)}
.x-hold .others img{width:100%; height:100%; object-fit:cover}
.x-hold .x-port{--c:var(--reviewer); box-shadow:0 0 0 6px rgba(255,59,92,.3), 0 0 60px rgba(255,59,92,.45)}
.x-wait{position:absolute; top:22%; left:50%; translate:-50% 0; z-index:2; background:var(--reviewer); color:#fff; font-family:var(--display); font-weight:900; font-size:13px; letter-spacing:.04em; padding:6px 12px; border-radius:8px; box-shadow:4px 4px 0 #000; white-space:nowrap}
.x-you{position:absolute; right:0; bottom:0; font-family:var(--display); font-weight:800; font-size:12px; text-transform:uppercase; text-decoration:none; color:#17130a; background:var(--star); padding:6px 10px; border-radius:8px; border:2px solid #17130a; box-shadow:3px 3px 0 #000}
.xf-more{margin-top:40px}
.xf-more summary{cursor:pointer; display:inline-flex; gap:10px; align-items:center; font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); padding:10px 14px; border:2px solid rgba(255,255,255,.12); border-radius:10px; list-style:none}
.xf-more summary::-webkit-details-marker{display:none}
.xf-more summary::before{content:"+"; font-weight:700; color:var(--content)}
.xf-more[open] summary::before{content:"−"}
.xf-more .trans{margin-top:16px}
@media (max-width:980px){
  .xf{grid-template-columns:1fr; gap:0}
  .xf-sticky{grid-row:1; top:104px; z-index:4; padding:10px 0 14px; background:linear-gradient(var(--bg) 85%, transparent)}
  .xf-stage{aspect-ratio:1.18}
  .xf-scene{inset:44px 10px 48px}
  .xf-steps li,.xf-steps li:first-child{min-height:46vh; align-items:flex-end}
  .xf-cap{font-size:11px}
}

/* ---------- human in the loop: the climax ---------- */
.hold-veil{position:fixed; inset:0; z-index:30; pointer-events:none; opacity:0; transition:opacity .8s var(--ease); background:radial-gradient(62% 58% at 50% 55%, rgba(6,5,14,.2), rgba(6,5,14,.7))}
body.hold .hold-veil{opacity:1}
#human .human{position:relative; z-index:31; margin-top:100px}
body.hold .ticker-track, body.hold .handoff *, body.hold .xf *, body.hold .hot, body.hold .zz span, body.hold .workbar i, body.hold .gear span, body.hold .rl-cap b:not(#hrail *), body.hold .mr-nudge{animation-play-state:paused!important}
body.hold .pkg{animation:pkgwait 2.6s ease-in-out infinite}
@keyframes pkgwait{50%{box-shadow:0 0 0 4px rgba(255,59,92,.55), 0 0 0 16px rgba(255,59,92,.12), 10px 10px 0 rgba(255,59,92,.55)}}
.pkg-wrap{position:relative}
.rv-peek{position:absolute; right:-30px; top:-80px; z-index:3; pointer-events:none}
.rv-av{width:120px; height:120px; border-radius:50%; overflow:hidden; border:4px solid #fff; background:#fff; box-shadow:6px 8px 0 rgba(255,59,92,.6); transform:rotate(8deg)}
.rv-av img{width:100%; height:100%; object-fit:cover}
.rv-peek .bubble{position:absolute; right:calc(100% - 10px); top:2px; border-radius:14px 14px 4px 14px; transform-origin:100% 100%}
body.hold .rv-av{animation:rvlook 2.6s ease-in-out infinite}
@keyframes rvlook{50%{transform:rotate(2deg) scale(1.05)}}
.pkg[data-state="approved"] .wt{background:#16a34a}
.pkg[data-state="revising"] .wt{background:#f59e0b; color:#17130a}
.wait-meter{display:flex; align-items:center; gap:10px; margin:2px 0 4px; font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:#6b6388}
.wm-av{display:flex; padding-left:5px}
.wm-av img{width:20px; height:20px; border-radius:50%; margin-left:-5px; box-shadow:0 0 0 2px #fbf9ff; filter:grayscale(1); opacity:.75}
.wait-meter b{margin-left:auto; color:#e0457b; font-weight:700; font-variant-numeric:tabular-nums}
.pkg:not([data-state="waiting"]) .wait-meter{opacity:.45}
.pkg .notes button:focus-visible{outline:2px solid #e0457b; outline-offset:2px}
.hrail-card{padding:18px 20px 12px; margin-bottom:18px; border-color:color-mix(in srgb,var(--reviewer) 45%, transparent)!important}
.hr-k{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}
.hr-k b{color:var(--reviewer); font-weight:700}
.hrail{height:104px; --ry:78px; margin:0 24px}
.hrail .rl-track::before{height:10px; margin-top:-5px; border-block:2px solid rgba(255,255,255,.16); background:repeating-linear-gradient(90deg, rgba(255,255,255,.2) 0 4px, transparent 4px 12px)}
.hrail .rl-fill{height:6px; margin-top:-3px}
.rl-av{position:absolute; bottom:14px; left:50%; translate:-50% 0; width:44px; height:44px; border-radius:50%; overflow:hidden; border:3px solid var(--c); background:var(--panel2); display:grid; place-items:center; font-family:var(--display); font-weight:900; font-size:12px; color:var(--c); opacity:.6; transition:opacity .4s, scale .4s var(--pop)}
.rl-av img{width:100%; height:100%; object-fit:cover}
.hrail .rl-stop.done .rl-av,.hrail .rl-stop.cur .rl-av{opacity:1}
.hrail .rl-stop.cur .rl-av{scale:1.14}
.hrail .rl-stop.ding .rl-av{animation:avding .9s var(--pop)}
@keyframes avding{30%{scale:1.4; rotate:-10deg} 60%{rotate:8deg}}
.hrail .rl-stop.ding::before{content:"DING!"; position:absolute; bottom:64px; left:50%; translate:-50% 0; font-family:var(--display); font-weight:900; font-size:13px; color:var(--content); animation:dingup 1.2s ease-out forwards}
@keyframes dingup{from{opacity:1; transform:translateY(6px)} to{opacity:0; transform:translateY(-14px)}}
.hrail .rl-cap b{font-size:10px; padding:3px 8px}
#routeMini{display:none}
@media (max-width:980px){
  #human .human{margin-top:40px}
  .pkg-wrap{margin-top:60px}
  .rv-peek{right:-6px; top:-70px}
  .rv-av{width:88px; height:88px}
  .hrail{margin:0 14px}
  .rl-av{width:34px; height:34px}
}

/* ---------- contextual guides ---------- */
.guide{position:absolute; z-index:6; display:flex; align-items:center; gap:8px; pointer-events:none; opacity:0; transform:translateY(8px) scale(.9); transition:opacity .35s, transform .5s var(--pop)}
.guide.inline{position:relative; display:inline-flex; vertical-align:middle; margin-left:12px}
.guide.show{opacity:1; transform:none}
.g-av{width:40px; height:40px; flex:none; border-radius:50%; overflow:hidden; border:3px solid #fff; background:#fff; box-shadow:2px 3px 0 rgba(0,0,0,.6)}
.g-av img{width:100%; height:100%; object-fit:cover}
.guide .bubble{font-size:13px; padding:6px 11px}

/* ---------- hero crew: each bot says what it does ---------- */
.crew-b{position:relative; display:block; border-radius:50%; outline:none}
.crew-b::after{content:attr(data-say); position:absolute; bottom:calc(100% + 12px); left:50%; transform:translate(-50%,8px) scale(.85); opacity:0; pointer-events:none; white-space:nowrap; background:#fff; color:#17130a; font-family:var(--display); font-weight:800; font-size:13px; padding:6px 11px; border:2px solid #17130a; border-radius:12px 12px 12px 4px; box-shadow:3px 3px 0 rgba(0,0,0,.5); transition:opacity .25s, transform .4s var(--pop); z-index:4}
.crew-b:hover::after,.crew-b:focus-visible::after{opacity:1; transform:translate(-50%,0) scale(1)}
.crew-b:focus-visible .av{outline:2px solid var(--designer); outline-offset:3px}

/* ---------- fewer card lifts, more contextual reactions ---------- */
.vcard:hover{translate:none}
.vcard:not(.on):hover{box-shadow:7px 7px 0 color-mix(in srgb,var(--c) 45%, #000)}
.vcard:hover .mini-rows i{animation:rowfill 1.1s var(--ease) both}
.vcard:hover .mini-rows i:nth-child(2){animation-delay:.12s} .vcard:hover .mini-rows i:nth-child(3){animation-delay:.24s} .vcard:hover .mini-rows i:nth-child(4){animation-delay:.36s}
@keyframes rowfill{from{width:6%}}
.vcard:hover .mini-graph path{stroke-dasharray:8 6; animation:dashflow 1s linear infinite}
@keyframes dashflow{to{stroke-dashoffset:-28}}
.mini-house circle{transform-box:fill-box; transform-origin:center bottom}
.vcard:hover .mini-house circle{animation:hbob .45s var(--pop) infinite alternate}
.vcard:hover .mini-house circle:nth-of-type(2){animation-delay:.1s} .vcard:hover .mini-house circle:nth-of-type(3){animation-delay:.2s} .vcard:hover .mini-house circle:nth-of-type(4){animation-delay:.3s}
@keyframes hbob{to{transform:translateY(-7px)}}
.vcard:hover .mini-house path[stroke-dasharray]{animation:dashflow 1.2s linear infinite}
.wcard:hover{translate:none; box-shadow:7px 7px 0 color-mix(in srgb,var(--c) 45%, #000)}
.wcard:hover .wi{animation:none}
.wcard:focus-visible{outline:2px solid var(--designer); outline-offset:4px}
.wtop{display:flex; justify-content:space-between; align-items:flex-start}
.wbot{position:relative}
.wbot .av{width:50px; height:50px; border-radius:50%; box-shadow:0 0 0 3px var(--c); transition:transform .5s var(--pop), box-shadow .4s}
.wz{position:absolute; right:-10px; top:-14px; font-family:var(--display); font-weight:900; font-style:normal; color:var(--research); font-size:16px; transition:opacity .2s}
.wact{display:block; height:1.6em; margin-top:12px; opacity:0; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--c); transition:opacity .3s, transform .4s var(--pop); transform:translateY(4px)}
.wcard .wi{transition:box-shadow .4s}
.wcard .out{transition:transform .5s var(--pop), background .3s, color .3s; padding:3px 8px; border-radius:6px; margin:6px 0 0 -8px}
.wcard:is(:hover,:focus-visible) .wbot .av{filter:none; transform:translateY(-4px) scale(1.08)}
.wcard:is(:hover,:focus-visible) .wz{opacity:0}
.wcard:is(:hover,:focus-visible) .wi{box-shadow:0 0 0 3px var(--c), 0 0 28px color-mix(in srgb,var(--c) 60%, transparent)}
.wcard:is(:hover,:focus-visible) .wact{opacity:1; transform:none}
.wcard:is(:hover,:focus-visible) .out{transform:translateX(12px); background:var(--c); color:#0B0A12}
.wcard[data-ws="mail"]:is(:hover,:focus-visible) .wi svg{animation:send .8s var(--pop)}
@keyframes send{40%{transform:translateX(8px) rotate(8deg)} 70%{transform:translateX(-3px)}}

/* ---------- sticker hunt: crew celebration ---------- */
.party{position:fixed; left:50%; bottom:108px; transform:translateX(-50%); z-index:94; display:flex; gap:12px; pointer-events:none}
.pb{position:relative; width:78px; height:78px; --c:#fff}
.pb img{width:100%; height:100%; border-radius:50%; border:4px solid #fff; background:#fff; box-shadow:0 0 0 4px var(--c), 5px 7px 0 rgba(0,0,0,.6)}
.pb i{position:absolute; bottom:calc(100% + 12px); left:50%; transform:translateX(-50%) rotate(-4deg); white-space:nowrap; font-style:normal; background:#fff; color:#17130a; font-family:var(--display); font-weight:800; font-size:13px; padding:5px 10px; border:2px solid #17130a; border-radius:12px 12px 12px 4px; box-shadow:3px 3px 0 rgba(0,0,0,.5)}
.pb:nth-child(even) i{bottom:calc(100% + 46px); transform:translateX(-50%) rotate(4deg)}
@media (max-width:600px){.party{gap:6px} .pb{width:56px; height:56px} .pb i{font-size:10px; padding:4px 7px}}


/* ================= V2 — editorial chapters ================= */
html,body{overflow-x:clip} /* tilted tickers and rails bleed past the edges by design; never widen the phone layout */
.ch-head{display:flex; align-items:center; gap:12px 16px; flex-wrap:wrap; margin-bottom:22px}
.ch-head .tag{margin:0}
.ch-q{font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--dim); padding:5px 10px; border:1.5px dashed rgba(255,255,255,.18); border-radius:8px}
.ch-q b{color:var(--text); font-weight:500}
.subsec{position:relative; margin-top:120px}
.sub-k{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--c,var(--muted)); margin-bottom:14px}
.sub-t{font-family:var(--display); font-weight:900; font-variation-settings:"wdth" 115; letter-spacing:-.025em; font-size:clamp(30px,3.6vw,50px); line-height:.98; margin:0 0 18px; max-width:18ch}
.chapter + .chapter, .chapter{padding-bottom:110px}
/* decision callouts */
.decision{position:relative; margin-top:44px; display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px 18px; padding:20px 24px 22px; border-radius:16px; background:linear-gradient(135deg, color-mix(in srgb,var(--c) 14%, var(--panel)), var(--panel) 70%); border:2px solid color-mix(in srgb,var(--c) 55%, transparent); box-shadow:6px 6px 0 color-mix(in srgb,var(--c) 35%, #000); max-width:880px}
.decision .d-k{grid-row:span 3; align-self:start; font-family:var(--display); font-weight:900; font-variation-settings:"wdth" 120; text-transform:uppercase; font-size:12px; letter-spacing:.06em; color:#0B0A12; background:var(--c); padding:5px 9px; border-radius:6px; rotate:-4deg; box-shadow:2px 2px 0 #000}
.decision .d-t{margin:0; font-family:var(--display); font-weight:800; font-variation-settings:"wdth" 108; font-size:clamp(18px,1.8vw,23px); line-height:1.2}
.decision .d-w{margin:0; color:var(--muted); font-size:15px; max-width:70ch}
.decision .d-w b{color:var(--text); font-weight:600; margin-right:4px}
.decision .d-src{margin:0; font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--dim)}
@media (max-width:640px){.decision{grid-template-columns:1fr} .decision .d-k{grid-row:auto; justify-self:start}}
/* four questions */
.meta-row{display:flex; flex-wrap:wrap; gap:8px 28px; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--dim)}
.meta-row b{color:var(--text); font-weight:500; margin-left:6px}
.qs-h{font-size:clamp(30px,3.6vw,48px)!important; max-width:none!important; margin:26px 0 0!important}
.qs4{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:28px}
.qs4 a{display:flex; flex-direction:column; text-decoration:none; color:inherit; padding:18px 18px 20px; border-radius:16px; background:var(--panel); border:2px solid color-mix(in srgb,var(--c) 45%, transparent); box-shadow:5px 5px 0 color-mix(in srgb,var(--c) 32%, #000); transition:border-color .3s}
.qs4 a:hover,.qs4 a:focus-visible{border-color:var(--c)}
.qs4 .qn{font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--c)}
.qs4 b{display:block; font-family:var(--display); font-weight:800; font-variation-settings:"wdth" 108; font-size:19px; line-height:1.15; margin:10px 0 14px}
.qs4 small{margin-top:auto; font-family:var(--mono); font-size:10px; text-transform:uppercase; color:var(--dim)}
@media (max-width:980px){.qs4{grid-template-columns:1fr 1fr}} @media (max-width:520px){.qs4{grid-template-columns:1fr}}
/* iteration timeline — a vertical railway */
.evo{position:relative; margin-top:60px; padding-left:64px}
.evo::before{content:""; position:absolute; left:20px; top:10px; bottom:30px; width:8px; border-radius:4px; border-inline:2px solid rgba(255,255,255,.14); background:repeating-linear-gradient(180deg, rgba(255,255,255,.18) 0 4px, transparent 4px 13px)}
.evo-step{position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:44px; align-items:start; padding-bottom:96px}
.evo-step::before{content:attr(data-n); position:absolute; left:-64px; top:-4px; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:var(--c); color:#0B0A12; font-family:var(--display); font-weight:900; font-size:18px; border:3px solid #fff; box-shadow:3px 3px 0 #000}
.evo-date{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--c)}
.evo-t{font-family:var(--display); font-weight:900; font-variation-settings:"wdth" 115; font-size:clamp(25px,2.7vw,36px); line-height:1.02; margin:10px 0 14px; letter-spacing:-.02em}
.evo-p{color:var(--muted); font-size:16px; margin:0 0 16px}
.evo-q{margin:0 0 16px; padding:2px 0 2px 16px; border-left:3px solid var(--c)}
.evo-q p{margin:0; font-family:var(--display); font-weight:700; font-variation-settings:"wdth" 106; font-size:17px; line-height:1.3; color:var(--text)}
.evo-q p::before{content:"“"} .evo-q p::after{content:"”"}
.evo-q cite{display:block; margin-top:6px; font-style:normal; font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--dim)}
.evo-d{margin:0; font-size:15px; color:var(--muted); padding:12px 14px; border-radius:12px; background:rgba(255,255,255,.04); border:1.5px solid rgba(255,255,255,.08)}
.evo-d b{display:block; font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--c); margin-bottom:4px; font-weight:700}
.evo-d span{color:var(--dim)}
.evo-shots{display:grid; gap:16px}
.evo-shots.two{grid-template-columns:1fr 1fr; align-items:start}
.evo-shot{margin:0; border-radius:14px; overflow:hidden; border:3px solid #fff; box-shadow:8px 8px 0 rgba(0,0,0,.5); background:#fff; rotate:-.8deg}
.evo-shot.tilt{rotate:1.2deg}
.evo-shots.two .evo-fig:nth-child(2){margin-top:28px}
.evo-shot img{width:100%; height:auto; display:block}
.evo-vis .cap{padding-top:10px}
.evo-shift{display:grid; grid-template-columns:auto auto 1fr; gap:6px 8px; align-items:center; margin:0 0 16px; font-family:var(--mono); font-size:11px; text-transform:uppercase}
.evo-shift span{padding:3px 8px; border-radius:6px; background:rgba(255,255,255,.06); color:var(--dim); text-decoration:line-through; text-decoration-color:rgba(255,255,255,.3); justify-self:start}
.evo-shift span.to{background:var(--c); color:#0B0A12; text-decoration:none; font-weight:700}
.evo-shift i{font-style:normal; color:var(--c)}
.evo-sum{margin:0; padding:22px 24px; border-radius:16px; border:2px dashed rgba(255,255,255,.16); font-size:17px; color:var(--muted); max-width:860px}
.evo-sum b{color:var(--text); font-weight:600}
@media (max-width:980px){
  .evo{padding-left:48px} .evo::before{left:14px}
  .evo-step{grid-template-columns:1fr; gap:22px; padding-bottom:70px}
  .evo-step::before{left:-48px; width:36px; height:36px; font-size:15px}
}
@media (max-width:560px){.evo-shots.two{grid-template-columns:1fr} .evo-shots.two .evo-fig:nth-child(2){margin-top:0}}
/* outcome: one system, three interfaces */
.tri{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:48px}
.tri-core{grid-column:1/-1; justify-self:center; text-align:center; padding:14px 26px; border-radius:16px; background:#fbf9ff; color:#1d1638; border:3px solid #fff; box-shadow:8px 8px 0 rgba(0,0,0,.5)}
.tri-core b{display:block; font-family:var(--display); font-weight:900; font-variation-settings:"wdth" 118; text-transform:uppercase; font-size:clamp(20px,2.2vw,28px); line-height:1.1; margin:2px 0}
.tri-core span{font-family:var(--mono); font-size:10.5px; color:#6b6388; text-transform:uppercase; letter-spacing:.05em}
.tri-lines{grid-column:1/-1; width:100%; height:44px; margin:-20px 0 -20px; overflow:visible}
.tri-lines path{fill:none; stroke:var(--rail); stroke-width:4; stroke-dasharray:8 6; vector-effect:non-scaling-stroke}
.tri-card{padding:16px 16px 20px; border-radius:18px; background:var(--panel); border:2px solid color-mix(in srgb,var(--c) 55%, transparent); box-shadow:7px 7px 0 color-mix(in srgb,var(--c) 40%, #000)}
.tri-card.on{background:linear-gradient(170deg, color-mix(in srgb,var(--c) 16%, var(--panel)), var(--panel))}
.tri-card .shot{border-width:2px; box-shadow:none; transform:none!important; border-radius:12px}
.tri-card .shot img{aspect-ratio:16/10; object-fit:cover; object-position:top left}
.tri-card .k{display:block; margin-top:16px; font-family:var(--mono); font-size:11px; color:var(--c); text-transform:uppercase}
.tri-card h3{font-family:var(--display); font-weight:900; font-variation-settings:"wdth" 115; font-size:28px; text-transform:uppercase; margin:4px 0 6px}
.tri-q{margin:0 0 8px; font-family:var(--display); font-weight:700; font-size:19px}
.tri-a{margin:0; color:var(--muted); font-size:15px}
@media (max-width:980px){.tri{grid-template-columns:1fr} .tri-lines{display:none}}
.same{margin-top:26px; border:2px solid rgba(255,255,255,.1); border-radius:18px; overflow:hidden}
.same-row{display:grid; grid-template-columns:200px minmax(0,1fr); gap:18px; padding:16px 22px; border-top:1px solid var(--line); align-items:baseline}
.same-row:first-child{border-top:0}
.same-row b{font-family:var(--display); font-weight:800; font-variation-settings:"wdth" 110; text-transform:uppercase; color:var(--c)}
.same-row span{font-size:16px}
.same-h{background:var(--panel)} .same-h span{font-family:var(--mono); font-size:11px; text-transform:uppercase; color:var(--dim)} .same-h span:last-child{color:var(--text)}
@media (max-width:640px){.same-row{grid-template-columns:1fr; gap:4px}}
/* production video container */
.vid{margin:30px 0 0}
.vid-frame{position:relative; aspect-ratio:16/9; border-radius:18px; overflow:hidden; border:3px solid #fff; box-shadow:10px 10px 0 rgba(0,0,0,.55); background:#0d0c13}
.vid-frame video{position:absolute; inset:0; width:100%; height:100%; background:#000; object-fit:contain}
.vid-cover{position:absolute; inset:0; display:grid; place-items:center; z-index:2}
.vid-cover img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.72) saturate(.95)}
.vid-play{position:relative; display:flex; align-items:center; gap:14px; padding:12px 22px 12px 12px; border-radius:16px; border:3px solid #17130a; background:var(--star); color:#17130a; text-align:left; box-shadow:6px 6px 0 #000; transition:transform .15s, box-shadow .15s}
.vid-play:hover{transform:translateY(-2px); box-shadow:8px 8px 0 #000}
.vid-play:active{transform:translateY(3px); box-shadow:2px 2px 0 #000}
.vid-play i{flex:none; width:48px; height:48px; border-radius:50%; background:#17130a; color:var(--star); display:grid; place-items:center; font-style:normal; font-size:18px; padding-left:3px}
.vid-play b{display:block; font-family:var(--display); font-weight:900; font-variation-settings:"wdth" 112; text-transform:uppercase; font-size:17px}
.vid-play small{display:block; font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.04em; opacity:.75}
.vid[data-state="playing"] .vid-cover{display:none}
.vid[data-state="missing"] .vid-play{background:#fff; cursor:default; box-shadow:4px 4px 0 #000}
.vid[data-state="missing"] .vid-play i{background:var(--dim); color:#fff}
/* measured performance */
.perf-m{margin-top:30px; padding:22px 24px; border-radius:18px; background:var(--panel); border:2px solid color-mix(in srgb,var(--rail) 50%, transparent); box-shadow:7px 7px 0 color-mix(in srgb,var(--rail) 35%, #000); max-width:900px}
.pm-head{display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; margin-bottom:14px}
.pm-head b{font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:12px; color:#0B0A12; background:var(--rail); padding:4px 9px; border-radius:6px}
.pm-head span{font-family:var(--mono); font-size:11px; text-transform:uppercase; color:var(--dim)}
.pm-r{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:12px; padding:12px 0; border-top:1px solid var(--line); align-items:baseline}
.pm-r span{font-family:var(--display); font-weight:800; font-variation-settings:"wdth" 108; font-size:20px}
.pm-r span:first-child{font-family:var(--sans); font-weight:600; font-size:15px; color:var(--muted)}
.pm-h{border-top:0; padding-top:0} .pm-h span,.pm-h span:first-child{font-family:var(--mono); font-weight:400; font-size:10.5px; text-transform:uppercase; color:var(--dim)}
.pm-note{margin:12px 0 0; font-size:14px; color:var(--muted)}
.pm-k{margin:30px 0 0; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--dim)}
.pm-k + .perf{margin-top:12px}
.pm-ba{margin-top:20px}
@media (max-width:640px){.perf-m{padding:18px 16px} .pm-r{grid-template-columns:1.5fr 1fr .8fr 1.1fr; gap:8px} .pm-r span{font-size:14px} .pm-r span:first-child{font-size:12px} .pm-h span,.pm-h span:first-child{font-size:9px}}
/* lessons */
.lessons{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:16px}
.lesson{padding:22px 22px 24px; border-radius:16px; background:var(--panel); border:2px solid color-mix(in srgb,var(--c) 50%, transparent); box-shadow:6px 6px 0 color-mix(in srgb,var(--c) 35%, #000)}
.lesson span{font-family:var(--mono); font-size:11px; color:var(--c)}
.lesson b{display:block; margin:8px 0 8px; font-family:var(--display); font-weight:900; font-variation-settings:"wdth" 112; font-size:clamp(20px,2vw,26px); line-height:1.1}
.lesson p{margin:0; color:var(--muted); font-size:15px}
@media (max-width:760px){.lessons{grid-template-columns:1fr}}