/* ---------- loader ---------- */
#loader{position:fixed;inset:0;z-index:100;background:#EFE4D3;display:flex;align-items:center;justify-content:center;transition:opacity 1.1s cubic-bezier(.6,0,.2,1),visibility 1.1s}
#loader .lm{width:64px;height:64px}
#loader .lm svg{width:100%;height:100%}
#loader .lm path,#loader .lm polygon,#loader .lm circle{stroke-dasharray:120;stroke-dashoffset:120;animation:ld 1.6s cubic-bezier(.6,0,.2,1) infinite alternate}
@keyframes ld{to{stroke-dashoffset:0}}
body.ready #loader{opacity:0;visibility:hidden}

/* ---------- nav ---------- */
#nav .lockA{pointer-events:auto;display:block;line-height:0}
#nav .lock{display:block;height:40px}
#nav .lock svg{height:40px;width:auto;display:block;overflow:visible;filter:drop-shadow(0 2px 10px rgba(255,255,255,.4))}
.navR{position:relative;pointer-events:auto}
#chap{cursor:pointer;border:1px solid rgba(255,255,255,.5)}
#chap .t{min-width:120px;text-align:left}
#menu{position:absolute;right:0;top:52px;width:300px;padding:10px;border-radius:22px;opacity:0;transform:translateY(-8px);pointer-events:none;transition:all .35s cubic-bezier(.16,1,.3,1)}
#menu.on{opacity:1;transform:none;pointer-events:auto}
#menu button{display:flex;width:100%;gap:14px;align-items:center;border:none;background:none;cursor:pointer;text-align:left;padding:10px 12px;border-radius:12px;font-size:15px;font-weight:500;color:var(--ink)}
#menu button:hover,#menu button.cur{background:rgba(255,255,255,.7)}
#menu button b{font-weight:500;color:var(--mist);font-variant-numeric:tabular-nums;width:22px}
body.dark #nav .lock svg{filter:drop-shadow(0 2px 14px rgba(0,0,0,.35))}

/* ---------- reveal system ---------- */
.rv .m{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .12em;margin:0 -.04em -.12em}
.rv .w{display:inline-block;transform:translateY(112%);transition:transform 1.05s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i)*45ms)}
.rv.on .w{transform:none}
.rv.gone .w{transform:translateY(-112%);transition-duration:.7s;transition-delay:calc(var(--i)*25ms)}
.fx{opacity:0;transform:translateY(26px);filter:blur(8px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1),filter .9s}
.fx.on{opacity:1;transform:none;filter:none}
.fx.gone{opacity:0;transform:translateY(-18px);filter:blur(6px);transition-duration:.6s}
.tc{position:absolute;left:0;width:1600px;text-align:center;top:330px}

/* ---------- hero ---------- */
#heroLock{top:476px;height:150px}
#heroLock svg{height:150px;width:auto;display:block;overflow:visible}
#heroLock .dr{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
body.go #heroLock .dr{transition:stroke-dashoffset 1.8s cubic-bezier(.65,0,.2,1);transition-delay:calc(.9s + var(--i)*90ms);stroke-dashoffset:0}
#heroLock .fl{opacity:0}
body.go #heroLock .fl{transition:opacity 1s 1.9s;opacity:1}
#heroTag{position:absolute;left:0;width:1600px;top:660px;text-align:center;opacity:0}
#heroTag .d3{color:var(--ink)}
#heroTag .ar{margin-top:8px;color:var(--ink2);direction:rtl}
#s-hero .cue{opacity:0;transition:opacity 1s 3s}
body.go #s-hero .cue{opacity:1}
#shadow{position:absolute;left:0;top:0;width:300px;height:60px;border-radius:50%;background:radial-gradient(closest-side,rgba(80,45,15,.32),rgba(80,45,15,0));opacity:0;will-change:transform,opacity;filter:blur(4px)}

/* ---------- storm ---------- */
#chips{perspective:1100px;perspective-origin:50% 48%}
#chips .chip3{transform-style:preserve-3d}
#stLede{position:absolute;left:0;width:1600px;top:640px;text-align:center}
#stLede::before{content:"";position:absolute;left:280px;right:280px;top:-40px;bottom:-40px;background:radial-gradient(closest-side,rgba(40,18,6,.45),rgba(40,18,6,0));z-index:-1}
#stLede .lede{max-width:none;font-size:24px}
#stLede .ar{margin-top:10px;font-size:24px}
.white{color:#fff}
.lede.white,.ar.white{color:#fff}
#calmH{position:absolute;left:0;width:1600px;top:62px;text-align:center}
#calmH::before{content:"";position:absolute;left:300px;right:300px;top:-40px;height:280px;background:radial-gradient(closest-side,rgba(255,246,234,.78),rgba(255,246,234,0));z-index:-1;pointer-events:none}
#calmH .lede,#calmH .ar{color:var(--ink)}
#calmH .lede{max-width:none;margin-top:10px}
#calmH .ar{margin-top:2px}
#sorted .sortcol{top:590px}
#sorted .sortcol div{font-size:16px;padding:11px 14px;margin-bottom:8px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.note3{position:absolute;left:0;top:0;width:330px;padding:14px 16px 14px 14px;border-radius:18px;display:flex;gap:12px;align-items:flex-start;background:rgba(255,250,244,.9);box-shadow:0 22px 50px rgba(50,25,8,.3);border:1px solid rgba(255,255,255,.9);will-change:transform,opacity}
.note3 .ic{flex:none;width:36px;height:36px;border-radius:11px;background:linear-gradient(135deg,#2B1D14,#5B4D42);position:relative}
.note3 .ic::after{content:"";position:absolute;right:-3px;top:-3px;width:12px;height:12px;border-radius:12px;background:#FF5E7E;border:2px solid #fff}
.note3 b{display:block;font-size:16px;font-weight:600;line-height:1.25}
.note3 span{display:block;font-size:13px;color:var(--mist);margin-top:3px}

/* ---------- highway ---------- */
#hwHead{position:absolute;left:90px;top:64px;width:1400px;white-space:nowrap}
#hwHead .ar{margin-top:4px;text-align:left;direction:rtl;display:inline-block;color:var(--ink);text-shadow:0 0 16px rgba(255,240,225,.9)}
#route{position:absolute;left:90px;top:440px;width:480px;border-radius:26px;padding:22px 12px 14px}
#route .rl{font-size:18px;line-height:1.45;color:var(--ink);padding:0 16px 14px;margin-bottom:6px;border-bottom:1px solid var(--hair)}
#route ol{list-style:none}
#route li{position:relative;padding:12px 16px 12px 58px;border-radius:16px;transition:background .5s}
#route li .n{position:absolute;left:14px;top:12px;width:30px;height:30px;border-radius:30px;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:14px;background:rgba(30,22,17,.08);color:var(--ink2);transition:all .5s}
#route li b{display:block;font-family:var(--display);font-weight:400;font-size:21px;letter-spacing:-.02em;line-height:30px}
#route li p{font-size:15px;line-height:1.45;color:var(--ink2);max-height:0;overflow:hidden;opacity:0;transition:max-height .6s cubic-bezier(.16,1,.3,1),opacity .5s,margin .5s}
#route li.act{background:rgba(255,255,255,.62)}
#route li.act .n,#route li.done .n{background:var(--grad);color:#fff}
#route li.act p{max-height:60px;opacity:1;margin-top:2px}
#hwLayer{position:fixed;inset:0;pointer-events:none;visibility:hidden}
#hwLayer svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#hwLayer .sg{position:absolute;transform-origin:50% 100%;display:flex;flex-direction:column;align-items:center;opacity:0;transition:opacity .6s}
#hwLayer .sg.on{opacity:1}
#hwLayer .sg .p{padding:13px 20px;border-radius:16px;font-size:24px;font-weight:600;white-space:nowrap;background:rgba(255,252,248,.92);box-shadow:0 18px 40px rgba(30,15,5,.3)}
#hwLayer .sg .p em{font-style:normal;font-family:var(--display);font-weight:500;margin-right:10px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
#hwLayer .sg .s{width:2px;height:70px;background:linear-gradient(rgba(255,255,255,.95),rgba(255,255,255,0))}
#youTag{position:absolute;transform-origin:50% 100%;padding:11px 18px;border-radius:99px;font-size:19px;font-weight:600;color:#fff;background:var(--grad);box-shadow:0 0 0 5px rgba(255,255,255,.28),0 12px 30px rgba(108,71,255,.5);white-space:nowrap;opacity:0;z-index:12;pointer-events:none}
#accel{top:350px}
#accelS{top:480px;max-width:none}

/* ---------- frame ---------- */
#frHead{position:absolute;left:80px;top:58px}
#frHead .ar{margin-top:12px;direction:rtl;text-align:left;display:inline-block}
.pillar{width:400px;top:384px;padding:28px 30px 26px;border-radius:30px}
#pMewe{left:80px}
#pBedu{left:1120px}
.pillar .hd{display:flex;align-items:baseline;justify-content:space-between}
.pillar h3{font-size:50px}
.pillar h5{margin:0;font-size:15px;color:var(--copper)}
.pillar ul{margin-top:18px}
.pillar li{font-size:17px;opacity:0;transform:translateX(var(--dx,-16px));transition:all .7s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i)*70ms)}
.pillar.on li{opacity:1;transform:none}
.pillar li i{font-style:normal;width:7px;height:7px;border-radius:7px;background:var(--grad);flex:none;align-self:center}
.pillar .role{font-size:24px}
#frLede{margin-top:14px;max-width:420px;font-size:20px;color:var(--ink)}

/* ---------- composer ---------- */
#wheelWrap{left:30px;top:50px;width:800px;height:800px}
#wheel{position:absolute;inset:0;width:800px;height:800px;overflow:visible}
#wheel text{font-family:var(--text)}
#wcore{position:absolute;left:310px;top:310px;width:180px;height:180px;border-radius:180px;border:none;background:transparent;cursor:pointer}
#wcount{display:none;position:absolute;left:0;width:800px;top:498px;text-align:center;font-size:13px;font-weight:600;color:var(--ink2);pointer-events:none}
.cpanel{left:880px;top:58px;width:680px}
.cpanel .lede{margin-top:12px;font-size:19px;max-width:600px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.crow .lbl{width:56px}
.pv{margin-top:8px}
.pv .media{height:206px;background:linear-gradient(135deg,#F4E8D6,#EBD9BF)}
.pv .media.swap{animation:swap .6s cubic-bezier(.16,1,.3,1)}
@keyframes swap{from{opacity:.2;transform:scale(1.03)}to{opacity:1;transform:none}}
.pv .body{padding:14px 22px 16px;height:150px;overflow:hidden}
.pv .nm{font-size:26px}
.pv .ds{font-size:15px}
.pv .uses{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;max-height:62px;overflow:hidden}
.pv .uses button{cursor:pointer;padding:5px 10px;border-radius:99px;font-size:12.5px;font-weight:600;border:1px solid rgba(30,22,17,.1);background:rgba(255,255,255,.7)}
.pv .uses button.on{background:var(--grad);color:#fff;border-color:transparent}
.pv .out{display:inline-block;margin-top:10px;padding:6px 12px;border-radius:99px;font-size:13px;font-weight:600;color:#fff}
.order{margin-top:12px;padding:14px 18px 16px}
.order .ct{font-size:20px}
.order .pills{min-height:26px;max-height:58px}
.order .pills em{font-style:normal;font-size:14px;color:var(--mist)}
.gen{height:46px;margin-top:10px}
.gen:disabled{opacity:.35;cursor:default;transform:none}
.mockfit{position:absolute;left:50%;top:50%;width:350px;height:168px;transform-origin:center}

/* ---------- mini UIs (350x168) ---------- */
.mk{position:relative;width:350px;height:168px;overflow:hidden;font-family:var(--text);color:var(--ink)}
.mk *{box-sizing:border-box}
.mk .bub{position:absolute;max-width:230px;padding:8px 11px;border-radius:13px;font-size:12.5px;line-height:1.3;box-shadow:0 4px 12px rgba(0,0,0,.06);opacity:0;animation:7s infinite}
.mk .b1{animation-name:b1}.mk .b2{animation-name:b2}.mk .b3{animation-name:b3}
@keyframes b1{0%{opacity:0;transform:translateY(8px)}5%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes b2{0%,44%{opacity:0;transform:translateY(8px)}49%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes b3{0%,66%{opacity:0;transform:translateY(8px)}71%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
.mk .bub.in{left:14px;background:#fff;border-bottom-left-radius:4px}
.mk .bub.out{right:14px;background:#D9F7E4;border-bottom-right-radius:4px}
@keyframes bub{0%{opacity:0;transform:translateY(8px) scale(.96)}6%{opacity:1;transform:none}88%{opacity:1}96%,100%{opacity:0}}
.mk .wah{position:absolute;left:0;right:0;top:0;height:34px;background:#0F5C4E;color:#fff;font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:8px;padding:0 12px}
.mk .wah i{width:20px;height:20px;border-radius:20px;background:var(--grad)}
.mk .wabg{position:absolute;inset:34px 0 0;background:#EFE7DC}
.mk .typ{position:absolute;left:14px;padding:9px 12px;border-radius:13px;background:#fff;display:flex;gap:4px;opacity:0;animation:typ 7s infinite}
.mk .typ i{width:6px;height:6px;border-radius:6px;background:#9A8E83;animation:dot 1s infinite}
.mk .typ i:nth-child(2){animation-delay:.15s}.mk .typ i:nth-child(3){animation-delay:.3s}
@keyframes typ{0%,20%{opacity:0}24%,42%{opacity:1}45%,100%{opacity:0}}
@keyframes dot{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.mk .bars{position:absolute;left:50%;top:44px;transform:translateX(-50%);display:flex;gap:5px;align-items:center;height:64px}
.mk .bars i{width:6px;border-radius:6px;background:var(--grad);height:12px;animation:bar 1.1s ease-in-out infinite}
@keyframes bar{0%,100%{height:10px}50%{height:var(--h)}}
.mk .vcap{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-family:var(--ar);font-size:15px;direction:rtl}
.mk .vlbl{position:absolute;left:14px;top:12px;font-size:12px;font-weight:600;color:var(--mist);display:flex;align-items:center;gap:6px}
.mk .vlbl::before{content:"";width:8px;height:8px;border-radius:8px;background:#13C296}
.mk .skel{position:absolute;border-radius:6px;background:rgba(30,22,17,.08)}
.mk .pop{position:absolute;right:12px;bottom:12px;width:200px;padding:10px 12px;border-radius:14px;background:#fff;box-shadow:0 12px 30px rgba(40,20,5,.18);font-size:12px;line-height:1.35;animation:pop 6s infinite}
.mk .pop b{display:block;font-size:12.5px;margin-bottom:3px}
.mk .pop u{display:inline-block;margin-top:6px;text-decoration:none;padding:4px 9px;border-radius:99px;background:var(--grad);color:#fff;font-weight:600;font-size:11px}
@keyframes pop{0%,20%{opacity:0;transform:translateY(16px)}28%,90%{opacity:1;transform:none}100%{opacity:0}}
.mk .cur{position:absolute;width:14px;height:14px;animation:cur 6s infinite}
.mk .cur::before{content:"";position:absolute;inset:0;background:#1E1611;clip-path:polygon(0 0,100% 60%,55% 62%,40% 100%)}
@keyframes cur{0%{left:60px;top:120px}20%{left:150px;top:70px}30%,100%{left:270px;top:136px}}
.mk .subj{position:absolute;left:14px;right:14px;top:30px;height:22px;overflow:hidden;font-size:14px;font-weight:600}
.mk .subj div{animation:subj 7.5s infinite}
.mk .subj span{display:block;height:22px;line-height:22px}
@keyframes subj{0%,28%{transform:translateY(0)}33%,61%{transform:translateY(-22px)}66%,94%{transform:translateY(-44px)}100%{transform:translateY(-66px)}}
.mk .ln{position:absolute;left:14px;height:7px;border-radius:7px;background:rgba(30,22,17,.12);transform-origin:left;animation:ln 7.5s infinite}
@keyframes ln{0%{transform:scaleX(0)}20%,90%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.mk .ab{position:absolute;right:14px;top:8px;display:flex;gap:5px}
.mk .ab span{padding:3px 8px;border-radius:99px;font-size:11px;font-weight:700;background:rgba(30,22,17,.07)}
.mk .ab span.w{background:#13C296;color:#fff}
.mk .cal{position:absolute;left:14px;top:14px;display:grid;grid-template-columns:repeat(7,22px);gap:4px}
.mk .cal i{width:22px;height:20px;border-radius:6px;background:rgba(30,22,17,.06);font-style:normal;font-size:10px;display:flex;align-items:center;justify-content:center;color:var(--ink2)}
.mk .cal i.sel{background:var(--grad);color:#fff;animation:sel 6s infinite}
@keyframes sel{0%,15%{filter:grayscale(1);opacity:.4}25%,100%{filter:none;opacity:1}}
.mk .conf{position:absolute;right:14px;top:30px;width:140px;padding:12px;border-radius:14px;background:#fff;box-shadow:0 10px 26px rgba(40,20,5,.14);font-size:12px;animation:pop 6s infinite}
.mk .conf b{display:flex;align-items:center;gap:6px;font-size:13px;color:#0E9F74}
.mk .conf b::before{content:"✓";width:18px;height:18px;border-radius:18px;background:#13C296;color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center}
.mk .tl{position:absolute;left:30px;right:30px;top:78px;height:3px;border-radius:3px;background:rgba(30,22,17,.1)}
.mk .tl i{position:absolute;left:0;top:0;height:3px;border-radius:3px;background:var(--grad);animation:tl 6s infinite}
@keyframes tl{0%{width:0}80%,100%{width:100%}}
.mk .nd{position:absolute;top:66px;width:28px;height:28px;margin-left:-14px;border-radius:28px;background:#fff;border:3px solid rgba(30,22,17,.12);animation:6s infinite}
.mk .nd.n1{animation-name:nd1}.mk .nd.n2{animation-name:nd2}.mk .nd.n3{animation-name:nd3}
@keyframes nd1{0%,8%{border-color:rgba(30,22,17,.12)}10%,96%{border-color:#6C47FF;box-shadow:0 0 0 5px rgba(108,71,255,.15)}100%{border-color:rgba(30,22,17,.12)}}
@keyframes nd2{0%,48%{border-color:rgba(30,22,17,.12)}50%,96%{border-color:#1FB6FF;box-shadow:0 0 0 5px rgba(31,182,255,.15)}100%{border-color:rgba(30,22,17,.12)}}
@keyframes nd3{0%,70%{border-color:rgba(30,22,17,.12)}72%,96%{border-color:#F29A12;box-shadow:0 0 0 5px rgba(242,154,18,.18)}100%{border-color:rgba(30,22,17,.12)}}
.mk .ndl{position:absolute;top:104px;transform:translateX(-50%);font-size:12px;font-weight:600;text-align:center;line-height:1.3}
.mk .ndl span{display:block;font-weight:400;color:var(--mist);font-size:11px}
.mk .stars{position:absolute;left:14px;top:14px;font-size:20px;letter-spacing:2px;color:rgba(30,22,17,.12)}
.mk .stars i{font-style:normal;position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;color:#F2A31B;animation:st 7s infinite}
@keyframes st{0%{width:0}25%,100%{width:100%}}
.mk .rq{position:absolute;left:14px;top:48px;right:60px;font-size:12px;color:var(--ink2);line-height:1.35}
.mk .chart{position:absolute;left:14px;top:40px;width:220px;height:110px}
.mk .chart path{stroke-dasharray:400;animation:draw 6s infinite}
@keyframes draw{0%{stroke-dashoffset:400}60%,100%{stroke-dashoffset:0}}
.mk .kpi{position:absolute;right:14px;top:40px;width:96px}
.mk .kpi b{display:block;font-family:var(--display);font-weight:400;font-size:22px;letter-spacing:-.02em}
.mk .kpi span{font-size:11px;color:var(--mist)}
.mk .kpi .up{color:#0E9F74;font-weight:600}
.mk .hb{position:absolute;border-radius:50%;filter:blur(10px);mix-blend-mode:multiply;animation:hb 3s ease-in-out infinite}
@keyframes hb{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.15);opacity:1}}

/* ---------- fairmont ---------- */
#fHead{position:absolute;left:80px;top:60px}
#fHead .note{margin-top:12px;font-size:15px;color:var(--ink2)}
#ask{position:absolute;left:80px;top:210px;width:1440px;height:72px;border-radius:24px;display:flex;align-items:center;padding:0 22px 0 14px;font-size:21px;font-weight:500}
#askOrb{width:46px;height:46px;border-radius:46px;flex:none;margin-right:16px}
#ask{-webkit-mask:radial-gradient(circle 25px at 37px 36px,transparent 96%,#000 100%);mask:radial-gradient(circle 25px at 37px 36px,transparent 96%,#000 100%)}
.caret{width:2px;height:24px;background:var(--ink);margin-left:3px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
#askA{margin-left:auto;padding:9px 16px;border-radius:99px;background:var(--grad);color:#fff;font-size:15px;font-weight:600;opacity:0;transform:translateX(12px);transition:all .6s cubic-bezier(.16,1,.3,1)}
#askA.on{opacity:1;transform:none}
#fcols{position:absolute;left:80px;top:312px;width:1440px;height:480px}
.fcol{position:absolute;top:0;width:330px}
.fcol h4{margin-bottom:10px;padding:13px 16px;opacity:0;transform:translateY(16px);transition:all .8s cubic-bezier(.16,1,.3,1)}
.fcol h4 b{font-size:23px}
.fcol h4 small{font-size:12.5px;opacity:.9;font-weight:500;text-align:right;max-width:150px;line-height:1.25}
.fcol.on h4{opacity:1;transform:none}
.fcard{position:relative;opacity:0;transform:translateY(18px);transition:opacity .7s,transform .8s cubic-bezier(.16,1,.3,1),box-shadow .3s;transition-delay:calc(var(--i)*90ms + 120ms)}
.fcol.on .fcard{opacity:1;transform:none}
.fcol.on .fcard:hover{transform:translateY(-3px)}
.fcard .th{width:92px;height:62px}
.fcard .tt{font-size:16px}
.fcard .tg{font-size:12.5px;color:var(--ink2);font-weight:500}
.fcard .ring{border-radius:18px;inset:-1px}
.fcard.hold .ring{animation:hold 1s linear forwards}
@keyframes hold{0%{box-shadow:inset 0 0 0 0 rgba(108,71,255,0)}100%{box-shadow:inset 0 0 0 2px #6C47FF}}
.fcard .live{position:absolute;right:12px;top:10px;width:auto;height:auto;padding:3px 7px;border-radius:99px;background:#13C296;color:#fff;font-size:10.5px;font-weight:700;animation:none}
#bi{position:absolute;left:80px;top:792px;width:1440px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#bi span{padding:9px 15px;border-radius:99px;font-size:14px;font-weight:500;background:rgba(255,252,248,.75);border:1px solid rgba(255,255,255,.8)}
#bi .bl{background:var(--ink);color:#fff;border-color:transparent}
#fHint{position:absolute;right:80px;top:150px;font-size:14px;color:var(--ink2)}

/* ---------- creative ---------- */
#cHead{position:absolute;left:80px;top:64px}
#cHead .lede{margin-top:12px}
#trackWrap{position:absolute;left:0;top:0;width:1600px;height:900px;perspective:1800px;perspective-origin:50% 55%}
#track{top:236px;transform-style:preserve-3d}
.cap{position:relative;will-change:transform}
.cap .media{height:300px}
.cap .body{padding:18px 22px 20px}
.cap h3{font-size:27px}
.cap p{font-size:16px;min-height:46px}
.cap .watch{font-size:14px}
.cap .num{font-family:var(--text);font-weight:600;font-size:13px;padding:5px 10px;border-radius:99px;background:rgba(20,12,6,.35);backdrop-filter:blur(8px);text-shadow:none}
.works{position:relative}
.works h3{font-size:27px}
.works p.sub{font-size:16px;color:var(--ink2);margin:-8px 0 16px}
#tprog{position:absolute;left:80px;top:842px;width:1440px;height:2px;border-radius:2px;background:rgba(30,22,17,.12);overflow:hidden}
#tprog i{display:block;height:100%;width:100%;background:var(--grad);transform-origin:left;transform:scaleX(0)}

/* ---------- tech stack ---------- */
#sHead{position:absolute;left:80px;top:60px}
#sHead .lede{margin-top:10px;max-width:760px}
.lane-h{top:286px;width:440px}
.lane-h h4{font-size:30px}
.dchip{opacity:0}
#brain{position:absolute;left:690px;top:450px;width:220px;height:220px;border-radius:220px}
#brainL{position:absolute;left:560px;top:700px;width:480px;text-align:center}
#brainL b{display:block;font-family:var(--display);font-weight:400;font-size:28px;letter-spacing:-.025em}
#brainL span{display:block;font-size:16px;color:var(--ink2);margin-top:6px}

/* ---------- output ---------- */
#oHead{position:absolute;left:80px;top:56px}
#oHead .lede{margin-top:10px;max-width:640px}
#brain2{position:absolute;left:1366px;top:78px;width:108px;height:108px;border-radius:108px}
#comps .comp{opacity:0}
.comp .lb b{font-size:18px}
.comp .lb span{font-size:13.5px;line-height:1.35;display:block;margin-top:2px}

/* ---------- heat ---------- */
#hHead{position:absolute;left:80px;top:56px}
#hHead .lede{margin-top:10px;max-width:760px}
#browser{position:absolute;left:80px;top:222px;width:860px;height:606px;border-radius:22px;overflow:hidden}
.bbar{height:42px;display:flex;align-items:center;gap:7px;padding:0 16px;border-bottom:1px solid var(--hair)}
.bbar i{width:11px;height:11px;border-radius:11px;background:rgba(30,22,17,.14)}
.bbar span{margin-left:16px;padding:5px 14px;border-radius:99px;background:rgba(255,255,255,.7);font-size:12.5px;color:var(--ink2)}
.page{position:relative;height:564px;background:#FFFCF8;overflow:hidden}
.pg-nav{height:46px;display:flex;align-items:center;gap:26px;padding:0 26px;font-size:13.5px;color:var(--ink2)}
.pg-nav b{font-family:var(--display);font-weight:500;color:var(--ink);margin-right:auto}
.pg-ar{font-family:var(--ar)}
.pg-hero{position:relative;height:250px;margin:0 18px;border-radius:16px;overflow:hidden}
.pg-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pg-hero::after{content:"";position:absolute;inset:40% 0 0;background:linear-gradient(transparent,rgba(20,12,6,.55))}
.pg-hero div{position:absolute;z-index:1;left:28px;bottom:26px;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.35)}
.pg-hero h5{font-family:var(--display);font-weight:400;font-size:30px;letter-spacing:-.03em}
.pg-hero p{font-size:14px;margin-top:6px}
.pg-hero button{margin-top:14px;border:none;padding:10px 18px;border-radius:99px;background:#fff;color:var(--ink);font-weight:600;font-size:13.5px;text-shadow:none;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.pg-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 18px 0}
.pg-row div{height:96px;border-radius:14px;background:#F4ECE1;padding:14px}
.pg-row b{display:block;font-size:14px}.pg-row span{font-size:12px;color:var(--mist)}
.pg-rates{display:flex;gap:12px;margin:14px 18px 0;align-items:center}
.tog{display:flex;padding:4px;border-radius:99px;background:#F1E7DA;font-size:12px;font-weight:600}
.tog span{padding:6px 12px;border-radius:99px}.tog span.on{background:#fff}
.rt{flex:1;height:58px;border-radius:12px;background:#F4ECE1}
#heatc{position:absolute;left:0;top:0;width:860px;height:560px;pointer-events:none;mix-blend-mode:multiply;opacity:.95}
#hcursor{position:absolute;left:0;top:0;width:20px;height:20px;pointer-events:none;z-index:3;opacity:0}
#hcursor::before{content:"";position:absolute;inset:0;background:#1E1611;clip-path:polygon(0 0,100% 60%,55% 62%,40% 100%);filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
#hrip{position:absolute;inset:0;pointer-events:none}
#liveH,#fixH{position:absolute;left:990px;display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:400;font-size:22px;letter-spacing:-.02em}
#liveH{top:226px}
#evlist{position:absolute;left:990px;top:270px;width:530px;height:210px;overflow:hidden}
#fixH{top:500px}
#fixOrb{width:34px;height:34px;border-radius:34px;flex:none}
#fixes .fix{left:990px;width:530px;min-height:66px;opacity:0;transform:translateX(30px);transition:all .8s cubic-bezier(.16,1,.3,1)}
#fixes .fix.on{opacity:1;transform:none}
.fix .ok{width:30px;height:30px;font-size:14px}
.fix b{font-size:16px;line-height:1.3}
.fix span{font-size:13px}

/* ---------- outcome ---------- */
#rHead{position:absolute;left:80px;top:90px}
#rHead .lede{margin-top:12px;color:rgba(255,255,255,.86)}
.stat{opacity:0;transform:translateY(40px) rotateX(18deg);transition:all 1.1s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i)*110ms)}
.stat.on{opacity:1;transform:none}
.stat small{font-size:15px;font-weight:500}
.stat .big{font-size:58px;margin-top:18px;line-height:1.02}
.stat p{font-size:17px;margin-top:18px}
#stats{perspective:1200px}
#rNote{position:absolute;left:80px;top:760px;font-size:15px;color:rgba(255,255,255,.75)}

/* ---------- finale ---------- */
#fin{position:absolute;left:0;width:1600px;top:44px;text-align:center}
#fin .ar{font-size:26px;margin-top:10px}
#lnAre{left:80px;top:520px;width:540px}
#lnNot{left:980px;top:420px;width:540px}
.lines li i{background:rgba(255,255,255,.14)}
#lnAre li i{background:var(--grad)}
#finCta{position:absolute;left:0;width:1600px;top:790px;display:flex;justify-content:center;gap:14px}
.cta.ghost{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.4);backdrop-filter:blur(10px)}
#finLock{position:absolute;left:80px;top:830px;display:none}

/* ---------- modals ---------- */
#lb .lbm{position:relative}
#lb .lbm img{max-width:100%;max-height:82vh;border-radius:18px;display:block;margin:0 auto}
#lb .cap a{text-decoration:none;padding:8px 14px;border-radius:99px;background:rgba(255,255,255,.16)}
#brief .bh{display:flex;justify-content:space-between;align-items:center}
#brief .bh svg{height:22px;width:auto}
#brief #bid{font-size:13px;color:var(--mist);font-variant-numeric:tabular-nums}
#brief h3{margin-top:18px}
#bnote{margin-top:20px;font-size:14px;color:var(--mist)}
#pop .t b{font-size:15px;font-weight:600;display:block}
#pop .t small{display:block;font-size:12.5px;color:var(--mist);margin-top:2px}

@media (prefers-reduced-motion:reduce){.rv .w,.fx,.fcard,.pillar li{transition:none!important}}

/* portrait hint */
#rot{position:fixed;left:16px;right:16px;bottom:16px;z-index:70;display:none;padding:14px 18px;border-radius:18px;font-size:15px;line-height:1.4;text-align:center}
@media (orientation:portrait) and (max-width:820px){#rot{display:block}}

#bg{position:fixed;inset:0;z-index:0;width:100vw;height:100vh;display:block;background:#E9DCC8}