:root{--bg:#070b14;--panel:#080e1cb8;--line:#ffffff1f;--ink:#eef3fa;--dim:#9fb0c6;--accent:#d9f24b;--accent-ink:#0b1220;--display:"Archivo", "Inter", system-ui, sans-serif;--body:"Inter", system-ui, sans-serif;--mono:ui-monospace, "SF Mono", Menlo, monospace}body.ucla{--accent:#ffd100;--bg:#06101d}body.galaxy{--accent:#ffd200;--bg:#050c1c}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--ink);font:16px/1.55 var(--body);-webkit-font-smoothing:antialiased;margin:0}a{color:inherit}.top{z-index:5;padding:calc(12px + env(safe-area-inset-top,0px)) max(16px, env(safe-area-inset-right,0px)) 12px max(16px, env(safe-area-inset-left,0px));pointer-events:none;background:linear-gradient(#05080fcc,#05080f00);align-items:center;gap:18px;display:flex;position:fixed;top:0;left:0;right:0}.top>*{pointer-events:auto}.brand{font:800 15px var(--display);letter-spacing:.02em;text-decoration:none}.brand b{color:var(--accent)}.top nav{color:var(--dim);gap:14px;font-size:14px;display:flex}.top nav a{text-decoration:none}.top nav a[aria-current]{color:var(--ink)}div.hero:not(.card){height:100svh;min-height:560px;position:relative;overflow:hidden}#stage{position:absolute;inset:0}#stage canvas{display:block}.poster{pointer-events:none;background:50%/cover no-repeat;transition:opacity .8s;position:absolute;inset:0}.poster.gone{opacity:0}.shade{pointer-events:none;background:linear-gradient(#05080f00,#05080fdb);height:46%;position:absolute;inset:auto 0 0}.caption{left:max(16px, env(safe-area-inset-left,0px));bottom:calc(86px + env(safe-area-inset-bottom,0px));max-width:min(640px,100% - 32px);position:absolute}.caption h2{font:800 clamp(26px, 4.2vw, 46px)/1.05 var(--display);letter-spacing:-.01em;text-wrap:balance;margin:0 0 6px}.caption p{color:#d6e0ee;max-width:60ch;margin:0;font-size:clamp(15px,1.5vw,18px)}.caption .note{color:var(--dim);margin-top:8px;font-size:13px}.caption.in{animation:.6s cubic-bezier(.2,.7,.2,1) rise}@keyframes rise{0%{opacity:0;transform:translateY(10px)}}.controls{left:max(16px, env(safe-area-inset-left,0px));right:max(16px, env(safe-area-inset-right,0px));bottom:calc(28px + env(safe-area-inset-bottom,0px));align-items:center;gap:10px;display:flex;position:absolute}.dots{flex:1;gap:6px;max-width:520px;display:flex}.dot{cursor:pointer;background:0 0;border:0;flex:1;align-items:center;height:22px;padding:0;display:flex}.dot span{background:#ffffff38;border-radius:2px;width:100%;height:4px;display:block;position:relative;overflow:hidden}.dot span:after{content:"";background:var(--accent);width:0;position:absolute;inset:0}.dot.done span:after{width:100%}.dot.on span:after{width:calc(var(--p,0) * 100%)}.arrow{border:1px solid var(--line);background:var(--panel);width:38px;height:38px;color:var(--ink);cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:50%;font-size:18px}.arrow:focus-visible,.dot:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.hud{right:max(16px, env(safe-area-inset-right,0px));top:calc(64px + env(safe-area-inset-top,0px));background:var(--panel);border:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-variant-numeric:tabular-nums;border-radius:10px;width:min(300px,44vw);padding:12px 14px;transition:opacity .5s;position:absolute}.hud.off{opacity:0;pointer-events:none}.hud .k{color:var(--dim);font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase}.hud .big{font:800 30px var(--display)}.hud .big small{color:var(--dim);font-size:14px;font-weight:600}.hud .row{border-top:1px solid var(--line);justify-content:space-between;gap:12px;padding:3px 0;font-size:14px;display:flex}.hud .row:first-of-type{border-top:0}.hud .call{background:var(--accent);color:var(--accent-ink);font:800 14px var(--display);letter-spacing:.06em;border-radius:4px;padding:2px 10px;display:inline-block}.tag{background:var(--panel);border:1px solid var(--line);font:600 12px var(--body);white-space:nowrap;pointer-events:none;border-radius:6px;padding:4px 8px;transition:opacity .4s;position:absolute;transform:translate(-50%,-100%)}.tag:after{content:"";background:var(--line);width:1px;height:6px;position:absolute;bottom:-6px;left:50%}.tag.off{opacity:0}.bubble{background:var(--accent);width:max-content;max-width:min(260px,70vw);color:var(--accent-ink);font:700 14px/1.3 var(--body);pointer-events:none;border-radius:10px;padding:9px 12px;transition:opacity .4s;position:absolute;transform:translate(-50%,-100%);box-shadow:0 8px 30px #00000059}.bubble.off{opacity:0}main.body{padding:64px max(16px, env(safe-area-inset-left,0px)) 80px;max-width:1080px;padding-right:max(16px, env(safe-area-inset-right,0px));gap:56px;margin:0 auto;display:grid}section h3{font:800 28px/1.1 var(--display);text-wrap:balance;margin:0 0 14px}section p{color:#d3dcea;max-width:68ch;margin:0 0 12px}.steps{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:18px;display:grid}.steps div{border:1px solid var(--line);background:#0c1426;border-radius:10px;padding:16px}.steps b{font:800 32px var(--display);color:var(--accent);display:block}.steps span{color:var(--dim);font-size:14px}.src{color:var(--dim);font-size:13px}.src li{margin-bottom:6px}@media (width<=720px){.top nav{display:none}.hud{top:calc(52px + env(safe-area-inset-top,0px));width:calc(100% - 32px);padding:8px 12px;left:16px;right:16px}.hud .big{font-size:24px}.hud .row{padding:2px 0;font-size:13px}.caption{bottom:calc(80px + env(safe-area-inset-bottom,0px))}.hud.off+.caption,.caption{max-width:calc(100% - 32px)}}@media (prefers-reduced-motion:reduce){.caption.in{animation:none}}.cut{opacity:0;pointer-events:none;background:#05080f;transition:opacity .35s;position:absolute;inset:0}.cut.on{opacity:1;transition:opacity .2s}.bug{left:max(16px, env(safe-area-inset-left,0px));top:calc(64px + env(safe-area-inset-top,0px));border:1px solid var(--line);font:600 13px var(--body);font-variant-numeric:tabular-nums;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#080c18d1;border-radius:8px;min-width:210px;padding:6px 8px 7px;transition:opacity .4s;position:absolute}.bug.off{opacity:0;pointer-events:none}.bug .ev{color:var(--dim);font:600 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;margin-bottom:3px}.bug .r{grid-template-columns:1fr 22px 22px 34px;align-items:center;gap:6px;padding:2px 0;display:grid}.bug .r .n{font-weight:700}.bug .r.srv .n:after{content:"";background:var(--accent);vertical-align:middle;border-radius:50%;width:6px;height:6px;margin-left:6px;display:inline-block}.bug .r .g{text-align:center;color:#c9d4e3}.bug .r .p{text-align:center;background:var(--accent);color:var(--accent-ink);border-radius:4px;font-weight:800}.panel{right:max(16px, env(safe-area-inset-right,0px));top:calc(64px + env(safe-area-inset-top,0px));border:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#080c18db;border-radius:12px;width:min(400px,40vw);padding:14px 16px 12px;transition:opacity .5s,transform .5s;position:absolute}.panel.off{opacity:0;pointer-events:none;transform:translateY(-8px)}.panel .k{color:var(--dim);font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase}.panel h4{font:800 20px/1.15 var(--display);margin:4px 0 8px}.panel .legend{color:var(--dim);gap:14px;margin-top:6px;font-size:12px;display:flex}.panel .legend i{vertical-align:-1px;border-radius:50%;width:9px;height:9px;margin-right:5px;display:inline-block}.servemap{width:100%;height:auto;display:block}.servemap .surface{fill:#23426b}.servemap line{stroke:#fffc;stroke-width:1.4px}.servemap line.net{stroke:#fff;stroke-width:2.4px;stroke-dasharray:3 2}.servemap .band{fill:#0000}.servemap .band.hot{fill:#d9f24b29;stroke:var(--accent);stroke-width:1.5px;stroke-dasharray:4 3}.servemap circle.dim{opacity:.18}.servemap text.big{fill:#fff;font:800 22px var(--display)}.servemap text.small{fill:var(--dim);font:600 10px var(--mono);letter-spacing:.06em;text-transform:uppercase}.winbars{width:100%;height:auto;margin-top:8px;display:block}.winbars .lab{fill:#c9d4e3;font:600 12px var(--body)}.winbars .val{fill:#fff;font:700 12px var(--body)}.winbars .track{fill:#ffffff1a}.winbars .bar{fill:#7f9ab8}.winbars .row.hot .bar{fill:var(--accent)}.winbars .row.hot .lab{fill:#fff}.caption .go{color:var(--accent);margin-top:10px;font-weight:700;text-decoration:none;display:inline-block}@media (width<=640px){.panel{width:auto;left:12px;right:12px;top:calc(52px + env(safe-area-inset-top,0px));padding:10px 12px}.panel h4{font-size:16px}.servemap{max-height:34vh}.bug{top:calc(50px + env(safe-area-inset-top,0px));width:46vw;min-width:0;padding:4px 6px 5px;font-size:11px}.bug .r{grid-template-columns:1fr 16px 16px 26px;gap:4px}.bug:not(.off)~.hud{top:calc(50px + env(safe-area-inset-top,0px));width:46vw;left:auto}.hud:has(~.bug:not(.off)){top:calc(50px + env(safe-area-inset-top,0px));width:46vw;left:auto}}.daycard{text-align:center;color:#fff;opacity:0;pointer-events:none;z-index:30;background:#070b14;place-content:center;display:grid;position:absolute;inset:0}.daycard span{font:600 14px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}.daycard b{font:800 clamp(36px, 7vw, 72px) var(--display)}.daycard.show{animation:2.2s forwards daycard}@keyframes daycard{0%{opacity:0}12%{opacity:1}62%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion:reduce){.daycard.show{animation-duration:1.2s}}[data-ts] .caption:before{content:attr(data-step);font:600 11px var(--mono);letter-spacing:.14em;color:var(--accent);margin-bottom:8px;display:block}[data-ts=b] .shade{background:linear-gradient(#05080f00,#05080f8c);height:26%}[data-ts=b] .caption{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-left:3px solid var(--accent);max-width:min(560px,100% - 32px);bottom:calc(78px + env(safe-area-inset-bottom,0px));background:#080c18c7;border-radius:10px;padding:14px 18px 16px 20px}[data-ts=b] .caption h2{font:700 22px/1.2 var(--display);letter-spacing:0;margin-bottom:4px}[data-ts=b] .caption p{font-size:15px;line-height:1.5}[data-ts=b] .caption .note{margin-top:6px;font-size:12px}[data-ts=c] .shade{display:none}[data-ts=c] .caption{bottom:calc(76px + env(safe-area-inset-bottom,0px));color:#0b1220;background:#fafbfdf0;border-radius:14px;width:min(420px,100% - 32px);padding:22px 22px 20px;box-shadow:0 18px 50px #00000059}[data-ts=c] .caption:before{color:#5b6b80}[data-ts=c] .caption h2{font:800 26px/1.15 var(--display);color:#0b1220;margin-bottom:10px}[data-ts=c] .caption p{color:#33415a;font-size:15.5px;line-height:1.6}[data-ts=c] .caption .note{color:#6b7a90;border-top:1px solid #e3e8ef;margin-top:12px;padding-top:10px;font-size:12px}[data-ts=d] .shade{background:linear-gradient(#05080f00,#05080fb3);height:30%}[data-ts=d] .caption{text-align:center;width:max-content;max-width:min(780px,100% - 32px);left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translate(-50%)}[data-ts=d] .caption:before{content:attr(data-step) "  ·  ";display:inline}[data-ts=d] .caption h2{font:600 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:inline}[data-ts=d] .caption p{color:#fff;text-shadow:0 2px 10px #000000b3;margin:10px auto 0;font-size:clamp(16px,1.8vw,21px);line-height:1.45}[data-ts=d] .caption .note{text-shadow:none;font-size:12px}[data-ts=e] .shade{background:linear-gradient(#05080f00,#05080fb8);height:40%}[data-ts=e] .caption{max-width:min(500px,100% - 32px);bottom:calc(96px + env(safe-area-inset-bottom,0px))}[data-ts=e] .caption:before{border-bottom:2px solid var(--accent);width:max-content;margin-bottom:14px;padding-bottom:10px}[data-ts=e] .caption h2{font:700 clamp(22px, 2.6vw, 32px)/1.15 var(--display);letter-spacing:-.005em;margin-bottom:12px}[data-ts=e] .caption p{color:#dfe7f2;font-size:16px;line-height:1.65}[data-ts=e] .caption .note{margin-top:12px}@media (width<=640px){[data-ts=c] .caption{top:auto;bottom:calc(80px + env(safe-area-inset-bottom,0px));width:calc(100% - 32px);padding:16px;transform:none}[data-ts=c] .caption h2{font-size:20px}[data-ts=c] .caption p{font-size:14px}[data-ts=b] .caption h2{font-size:19px}[data-ts=b] .caption p{font-size:14px}[data-ts=d] .caption{width:calc(100% - 32px)}}.panel #pbars,.panel .legend{display:none}[data-ts=c] .caption .go{color:#0a5cc2}.veil{opacity:0;pointer-events:none;z-index:22;background:#05080f;position:absolute;inset:0}.veil.on{animation:.9s veil}@keyframes veil{0%{opacity:0}30%{opacity:.85}to{opacity:0}}.veil.on.hard{animation:.7s ease-out veilcut}@keyframes veilcut{0%{opacity:1}25%{opacity:1}to{opacity:0}}.caption,.controls,header.top{z-index:30}[data-ts=c] .caption.in{animation:.7s cubic-bezier(.2,.7,.2,1) cardin}@keyframes cardin{0%{opacity:0;transform:translateY(18px)}35%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.veil.on,[data-ts=c] .caption.in{animation:none}}.shield~.caption,.caption,.controls,header.top{z-index:70}@media (width>=1100px){body .shield main{margin-left:max(420px,50% - 500px)!important;margin-right:auto!important}}body.shield-open header.top{opacity:0;pointer-events:none}@media (width<=760px){.shield main{padding-bottom:260px!important}}body.shield-open .controls{max-width:380px}body.shield-open .dots{flex:1;min-width:0}[data-ts=c] .caption p{text-wrap:pretty}[data-ts=c] .caption h2{text-wrap:balance}[data-ts=c] .hud{left:max(16px, env(safe-area-inset-left,0px));top:auto;right:auto;bottom:calc(76px + env(safe-area-inset-bottom,0px) + var(--caph,200px) + 10px);color:#0b1220;background:#fafbfdf0;border:0;border-radius:14px;width:min(420px,100% - 32px);padding:16px 22px 14px;transition:opacity .5s,bottom .4s;box-shadow:0 18px 50px #0000004d}[data-ts=c] .hud .k,[data-ts=c] .hud .big small{color:#5b6b80}[data-ts=c] .hud .row{color:#33415a;border-top-color:#e3e8ef}[data-ts=c] .hud .row b{color:#0b1220;font:800 15px var(--display);white-space:nowrap}[data-ts=c] .hud .row>span[style*=grid-column]{background:#e6ebf2!important}[data-ts=c] .hud svg line[stroke=\#fff]{stroke:#0b1220}[data-ts=c] .hud svg polyline{stroke:#7d8ca3}[data-ts=c] .hud .reveal .row{opacity:0;animation:.5s forwards rowin}[data-ts=c] .hud .reveal .row:first-child{animation-delay:.6s}[data-ts=c] .hud .reveal .row:nth-child(2){animation-delay:1.6s}[data-ts=c] .hud .reveal .row:nth-child(3){animation-delay:2.6s}[data-ts=c] .hud .reveal .row:nth-child(4){animation-delay:3.6s}@keyframes rowin{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@media (width<=700px){[data-ts=c] .hud{width:calc(100% - 32px);left:16px;bottom:calc(80px + env(safe-area-inset-bottom,0px) + var(--caph,200px) + 8px);padding:12px 16px}}@media (prefers-reduced-motion:reduce){[data-ts=c] .hud .reveal .row{opacity:1;animation:none}}@media (width>=701px){[data-ts=c] .panel{left:max(16px, env(safe-area-inset-left,0px));top:auto;right:auto;bottom:calc(76px + env(safe-area-inset-bottom,0px) + var(--caph,200px) + 10px);color:#0b1220;background:#fafbfdf5;border:0;border-radius:14px;width:min(420px,100% - 32px);box-shadow:0 18px 50px #0000004d}[data-ts=c] .panel .k{color:#5b6b80}[data-ts=c] .panel.off{transform:translateY(8px)}[data-ts=c] .panel #pmap svg{width:100%;height:clamp(160px, calc(100vh - 76px - var(--caph,200px) - 150px), 300px);display:block}}main.body section.demo{max-width:1180px}main.body section.demo iframe{border:1px solid var(--line);background:#fff;border-radius:14px;width:100%;height:min(860px,80vh);margin-top:12px;display:block}main.body section.demo a{color:var(--accent);white-space:nowrap}