@font-face{font-family:'Rude';src:url(/assets/fonts/Rude.ttf) format('truetype');font-display:swap}
:root{
  color-scheme:dark;
  --ink:#07090C; --night:#0F1316; --deck:#121618; --slate:#283944; --slate-2:#3A4F5C;
  --sand:#EBDDB9; --sand-hi:#F6EDD4; --bone:#EEEFDF; --mist:#A7B3AA; --dim:#7E9088;
  --match:#9FE0B8; --eo:cubic-bezier(.16,1,.3,1); --es:cubic-bezier(.34,1.4,.64,1); --ei:cubic-bezier(.7,0,.84,0);
  --gut:clamp(16px,4vw,60px);
  --ui:'DM Sans',ui-sans-serif,system-ui,sans-serif;
  --mono:'JetBrains Mono','SF Mono',ui-monospace,Menlo,monospace;
  --display:'Rude','DM Sans',ui-sans-serif,sans-serif;

}
*{box-sizing:border-box}
html,body{background:var(--ink)}
body{margin:0;color:var(--bone);font:400 16px/1.5 var(--ui);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.lock{overflow:hidden}
::selection{background:var(--sand);color:var(--ink)}
:focus-visible{outline:2px solid var(--sand);outline-offset:3px;border-radius:6px}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit}
svg.i{width:1.2em;height:1.2em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
svg.i.f{fill:currentColor;stroke:none}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--slate);border-radius:10px;border:3px solid var(--ink)}::-webkit-scrollbar-track{background:var(--ink)}

/* ---------- INTRO ---------- */
#intro{position:fixed;inset:0;z-index:100;background:var(--ink);display:grid;place-items:center;overflow:hidden;cursor:pointer}
#intro .mark{display:flex;align-items:center;gap:clamp(12px,2vw,26px);transform-origin:50% 50%}
#intro .plogo{width:clamp(240px,44vw,580px);height:auto;color:var(--bone);overflow:visible;display:block}
#intro .plogo .arc,#intro .plogo .dot{fill:var(--sand)}
#intro .plogo .arc{transform-box:view-box;transform-origin:43.96px 103.38px}
#intro .plogo .dot,#intro .plogo .l{transform-box:fill-box;transform-origin:50% 50%}
.hinge svg{display:block;width:100%;height:100%;color:var(--sand)}
#intro .ribbons{position:absolute;inset:0;display:flex;justify-content:center;pointer-events:none;opacity:0}
#intro .ribbons i{flex:none;width:3.2vw;height:100%;transform-origin:50% 50%;filter:blur(2px)}
#intro .skip{position:absolute;bottom:calc(24px + env(safe-area-inset-bottom,0px));right:24px;font-size:13px;color:var(--dim);letter-spacing:.08em;text-transform:uppercase}
#intro.run .plogo .dot{animation:dotIn .8s var(--es) .1s both}
#intro.run .plogo .arc{animation:arcSwing 1.3s var(--eo) .3s both}
#intro.run .plogo .l{animation:letterIn 1s var(--eo) both;animation-delay:calc(.8s + var(--i)*60ms)}
#intro.run .ribbons{animation:ribbons 1.5s var(--eo) 1.75s both}
#intro.run .ribbons i{animation:ribbon 1.5s var(--eo) both;animation-delay:calc(1.75s + var(--d))}
#intro.run .mark{animation:zoomOut 1s var(--ei) 2.35s both}
#intro.out{animation:fadeOut .6s var(--eo) both}
@keyframes dotIn{from{transform:scale(0);opacity:0}}
@keyframes arcSwing{from{transform:rotate(-200deg);opacity:0}30%{opacity:1}}
@keyframes letterIn{from{opacity:0;transform:translateY(40%);filter:blur(10px)}}
@keyframes ribbons{0%{opacity:0}20%{opacity:1}100%{opacity:0}}
@keyframes ribbon{0%{transform:scaleX(0) scaleY(.2)}40%{transform:scaleX(1) scaleY(1)}100%{transform:scaleX(6) scaleY(1.2);opacity:0}}
@keyframes zoomOut{to{transform:scale(9);opacity:0;filter:blur(12px)}}
@keyframes fadeOut{to{opacity:0;visibility:hidden}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}}
@keyframes chIn{from{opacity:0;transform:translateY(.55em) rotate(6deg);filter:blur(10px)}}

/* ---------- PROFILE GATE ---------- */
#gate{position:fixed;inset:0;z-index:60;background:radial-gradient(120% 90% at 50% 0%,#131A20 0%,var(--ink) 60%);display:grid;place-items:center;padding:var(--gut)}
#gate h1{font:500 clamp(28px,4.4vw,56px)/1.05 var(--ui);letter-spacing:-.04em;text-align:center;margin:0 0 8px;text-wrap:balance}
#gate p.sub{margin:0 auto clamp(28px,5vw,56px);text-align:center;color:var(--mist);max-width:44ch;text-wrap:balance}
.profiles{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(16px,3vw,40px)}
.prof{display:grid;justify-items:center;gap:14px;width:clamp(116px,13vw,172px);animation:fadeUp .9s var(--eo) both;animation-delay:calc(.15s + var(--i)*80ms)}
.prof .av{width:100%;aspect-ratio:1;border-radius:14%;transition:transform .5s var(--es),box-shadow .5s var(--eo)}
.prof .nm{color:var(--mist);font-weight:600;transition:color .3s}
.prof small{display:block;color:var(--dim);font-size:12.5px;margin-top:-10px;text-align:center}
.prof:hover .av,.prof:focus-visible .av{transform:translateY(-6px) scale(1.04);box-shadow:0 0 0 3px var(--ink),0 0 0 6px var(--sand),0 24px 50px -10px rgba(0,0,0,.8)}
.prof:hover .nm,.prof:focus-visible .nm{color:var(--bone)}
.prof:focus-visible{outline:none}
#gate .login-note{margin-top:clamp(32px,6vw,64px);text-align:center;color:var(--dim);font-size:13px}
#gate .login-note b{color:var(--mist);font-weight:600}
#gate.leave{animation:gateLeave .8s var(--eo) both}
@keyframes gateLeave{to{opacity:0;transform:scale(1.06);filter:blur(10px);visibility:hidden}}

/* avatar art: flat planes */
.av{position:relative;display:block;overflow:hidden;background:var(--c1)}
.av i{position:absolute;display:block}
.av.ops i:nth-child(1){left:18%;top:18%;width:64%;height:64%;border-radius:50%;background:var(--c2)}
.av.ops i:nth-child(2){left:44%;top:6%;width:12%;height:88%;border-radius:99px;background:var(--c3)}
.av.mkt i:nth-child(1){left:-10%;bottom:-30%;width:120%;height:80%;border-radius:50% 50% 0 0;background:var(--c2)}
.av.mkt i:nth-child(2){left:36%;top:16%;width:28%;height:28%;border-radius:50%;background:var(--c3)}
.av.sales i:nth-child(1){left:14%;top:14%;width:72%;height:72%;border-radius:50%;background:repeating-radial-gradient(circle,var(--c2) 0 9%,var(--c1) 9% 18%)}
.av.sales i:nth-child(2){left:58%;top:28%;width:14%;height:14%;border-radius:50%;background:var(--c3)}
.av.lead i:nth-child(1){left:14%;bottom:14%;width:18%;height:34%;background:var(--c2);border-radius:4px}
.av.lead i:nth-child(2){left:41%;bottom:14%;width:18%;height:52%;background:var(--c2);border-radius:4px}
.av.lead i:nth-child(3){left:68%;bottom:14%;width:18%;height:72%;background:var(--c3);border-radius:4px}

/* ---------- NAV ---------- */
#app{opacity:1}
#app[hidden]{display:none}
nav.top{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;gap:clamp(14px,2.4vw,36px);padding:calc(14px + env(safe-area-inset-top,0px)) var(--gut) 14px;transition:background .5s var(--eo),backdrop-filter .5s;background:linear-gradient(180deg,rgba(7,9,12,.85),rgba(7,9,12,0))}
nav.top.solid{background:rgba(7,9,12,.92);backdrop-filter:saturate(1.4) blur(14px)}
.brand{display:flex;align-items:center;color:var(--bone);text-decoration:none}
.brand svg{height:24px;width:auto;display:block}
.brand .arc,.brand .dot{fill:var(--sand)}
.links{display:flex;gap:clamp(12px,1.6vw,22px);font-size:14.5px}
.links button{color:var(--mist);transition:color .25s;position:relative;padding:4px 0}
.links button:hover{color:var(--bone)}
.links button.on{color:var(--bone);font-weight:600}
.links button.on::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;border-radius:2px;background:var(--sand);animation:grow .5s var(--eo) both}
@keyframes grow{from{transform:scaleX(0)}}
.nav-r{margin-left:auto;display:flex;align-items:center;gap:clamp(10px,1.6vw,20px)}
.search{display:flex;align-items:center;gap:8px;height:38px;border-radius:99px;padding:0 10px;transition:background .45s var(--eo),box-shadow .45s var(--eo)}
.search input{width:0;opacity:0;border:0;background:none;color:var(--bone);font:inherit;font-size:14px;outline:none;transition:width .55s var(--eo),opacity .3s}
.search.open{background:rgba(21,27,33,.9);box-shadow:inset 0 0 0 1px var(--slate)}
.search.open input{width:clamp(120px,18vw,240px);opacity:1}
.search input::placeholder{color:var(--dim)}
.cta-s{font-size:13px;font-weight:500;color:rgba(255,255,255,.9);background:rgba(255,255,255,.10);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);padding:7px 16px;border-radius:12px;text-decoration:none;white-space:nowrap;transition:background .3s,transform .3s var(--es)}
.cta-s:hover{background:rgba(255,255,255,.18);transform:translateY(-1px)}
.me{display:flex;align-items:center;gap:6px;position:relative}
.me .av{width:34px;height:34px;border-radius:7px}
.me .chev{transition:transform .35s var(--eo)}
.me.open .chev{transform:rotate(180deg)}
.menu{position:absolute;right:0;top:calc(100% + 14px);min-width:230px;background:rgba(14,18,22,.97);border-radius:12px;padding:8px;box-shadow:0 30px 60px -20px rgba(0,0,0,.9),inset 0 0 0 1px rgba(58,79,92,.6);transform-origin:top right;animation:menuIn .35s var(--eo) both}
.menu[hidden]{display:none}
@keyframes menuIn{from{opacity:0;transform:translateY(-6px) scale(.96)}}
.menu button{display:flex;align-items:center;gap:12px;width:100%;padding:8px;border-radius:8px;font-size:14px;text-align:left;color:var(--mist)}
.menu button:hover{background:var(--deck);color:var(--bone)}
.menu .av{width:28px;height:28px;border-radius:6px}
.menu hr{border:0;height:1px;background:var(--slate);margin:6px 4px}

/* ---------- BILLBOARD ---------- */
.bb{position:relative;height:clamp(560px,88vh,900px);overflow:hidden;isolation:isolate}
.bb-art{position:absolute;inset:0;z-index:-1}
.bb-layer{position:absolute;inset:0;opacity:0;transition:opacity 1.2s var(--eo)}
.bb-layer.on{opacity:1}
.bb-layer .tilt{position:absolute;right:-6%;top:50%;width:min(80vw,1480px);transform:translateY(-46%) perspective(1600px) rotateY(calc(var(--mx,0)*-4deg - 7deg)) rotateX(calc(var(--my,0)*3deg + 2deg));transition:transform 1.2s var(--eo);transform-origin:70% 50%}
.bb-layer .tilt .stage{border-radius:14px;box-shadow:0 60px 120px -30px rgba(0,0,0,.9)}
.bb-layer.on .tilt .stage{animation:kb 16s linear both}
.bb-layer.enter .tilt{animation:artIn 1.6s var(--eo) both}
@keyframes artIn{from{opacity:0;filter:blur(18px);transform:translateY(-46%) perspective(1600px) rotateY(-16deg) translateX(8%) scale(1.06)}}
@keyframes kb{from{transform:scale(1.0)}to{transform:scale(1.045)}}
.bb-scrim{position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 0%,rgba(7,9,12,.96) 30%,rgba(7,9,12,.55) 50%,rgba(7,9,12,0) 72%),linear-gradient(0deg,var(--ink) 0%,rgba(7,9,12,0) 32%),linear-gradient(180deg,rgba(7,9,12,.6) 0%,rgba(7,9,12,0) 18%);pointer-events:none}
.bb-grain{position:absolute;inset:-50%;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}}
.bb-copy{position:absolute;left:var(--gut);bottom:clamp(120px,19vh,190px);width:min(560px,calc(100% - 2*var(--gut)))}
.bb-title{margin:0 0 18px;line-height:.92;color:var(--bone);text-wrap:balance}
.bb-title .w{display:inline-block;white-space:nowrap}
.bb-title .ch{display:inline-block}
.bb-title.in .ch{animation:chIn 1s var(--eo) both;animation-delay:calc(var(--i)*32ms)}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:14.5px;color:var(--mist);margin-bottom:14px}
.meta .m{color:var(--match);font-weight:700}
.tag-s{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:3px 7px;border-radius:4px;background:rgba(235,221,185,.12);color:var(--sand)}
.tag-o{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:3px 9px 3px 7px;border-radius:4px;background:var(--sand);color:var(--ink)}
.tag-o .hinge{width:8px;height:11px}.tag-o .hinge svg{color:var(--ink)}
.dotsep{width:4px;height:4px;border-radius:50%;background:var(--dim)}
.syn{font-size:clamp(15px,1.25vw,18px);line-height:1.5;color:#D5D8CB;margin:0 0 24px;max-width:48ch;text-wrap:pretty}
.bb-copy .fx{animation:fadeUp .9s var(--eo) both}
.acts{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 26px 0 22px;border-radius:10px;font-weight:700;font-size:16.5px;position:relative;overflow:hidden;transition:transform .35s var(--es),background .3s,box-shadow .4s var(--eo)}
.btn:active{transform:scale(.96)}
.btn.play{background:var(--sand);color:var(--ink)}
.btn.play:hover{background:var(--sand-hi);box-shadow:0 12px 40px -10px rgba(235,221,185,.55)}
.btn.play::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%)}
.btn.play:hover::after{transition:transform .9s var(--eo);transform:translateX(120%)}
.btn.info{background:rgba(58,79,92,.72);color:var(--bone);backdrop-filter:blur(8px)}
.btn.info:hover{background:rgba(58,79,92,.95)}
.btn.sm{height:42px;font-size:15px;padding:0 20px 0 16px}
.bb-rail{position:absolute;right:var(--gut);bottom:clamp(120px,19vh,190px);display:flex;align-items:center;gap:16px}
.bb-ticks{display:flex;gap:6px}
.bb-ticks button{width:34px;height:14px;display:grid;align-items:center}
.bb-ticks button i{display:block;height:3px;border-radius:3px;background:rgba(238,239,223,.22);overflow:hidden;position:relative;transition:height .25s}
.bb-ticks button:hover i{height:5px}
.bb-ticks button i b{position:absolute;inset:0;background:var(--sand);transform-origin:left;transform:scaleX(0)}
.bb-ticks button.done i b{transform:scaleX(1)}
.bb-ticks button.cur i b{animation:tick var(--dur,14s) linear both}
.bb.paused .bb-ticks button.cur i b{animation-play-state:paused}
@keyframes tick{to{transform:scaleX(1)}}
.rating{font-size:13px;font-weight:600;color:var(--bone);padding:6px 16px 6px 12px;background:rgba(7,9,12,.5);box-shadow:inset 3px 0 0 var(--sand)}

/* ---------- REEL (3D wheel) ---------- */
main{position:relative;z-index:2;margin-top:clamp(-120px,-9vh,-60px);padding-bottom:40px}
.reel{position:relative}
.reel-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 16px;padding:0 var(--gut);position:relative;z-index:3}
.reel-h h2{font:500 clamp(22px,2.2vw,32px)/1.1 var(--ui);letter-spacing:-.04em;margin:0}
.reel-h .count{font:500 13px/1 var(--mono);color:var(--dim);font-variant-numeric:tabular-nums}
.reel-h .hint{margin-left:auto;font-size:13px;color:var(--dim)}
.wheel{--tw:clamp(380px,36vw,600px);--persp:1100px;position:relative;height:clamp(420px,40vw,620px);perspective:var(--persp);perspective-origin:50% 44%;overflow:hidden;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;outline:none}
.wheel.dragging{cursor:grabbing}
.wheel:focus-visible{box-shadow:inset 0 0 0 2px var(--sand)}
.wheel::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--ink) 0%,rgba(7,9,12,0) 9%,rgba(7,9,12,0) 91%,var(--ink) 100%),linear-gradient(0deg,var(--ink) 0%,rgba(7,9,12,0) 14%)}
.tile{position:absolute;left:50%;top:48%;width:var(--tw);margin-left:calc(var(--tw) / -2);margin-top:calc(var(--tw) * -9 / 32);border-radius:14px;overflow:hidden;container-type:inline-size;will-change:transform,opacity;backface-visibility:hidden;box-shadow:0 40px 80px -24px rgba(0,0,0,.95);text-align:left;transition:box-shadow .6s var(--eo)}
.tile .stage{border-radius:0}
.tile .shade{position:absolute;inset:0;background:var(--ink);pointer-events:none}
.tile.front{box-shadow:0 0 0 2px rgba(235,221,185,.85),0 60px 120px -30px #000}
.tile .card-logo{transition:opacity .5s var(--eo)}
.tile.front .card-logo,.tile.front .card-badge{opacity:0}
.card .scn .sp,.tile .scn .sp{display:none}
.ring-nav{position:absolute;top:48%;z-index:4;width:52px;height:52px;margin-top:-26px;border-radius:50%;display:grid;place-items:center;background:rgba(7,9,12,.7);box-shadow:inset 0 0 0 1px rgba(238,239,223,.22);color:var(--bone);transition:transform .35s var(--es),background .3s,box-shadow .3s}
.ring-nav:hover{background:var(--ink);box-shadow:inset 0 0 0 1px var(--sand);transform:scale(1.08)}
.ring-nav.l{left:var(--gut)}.ring-nav.r{right:var(--gut)}
.now{position:relative;z-index:3;display:grid;justify-items:center;text-align:center;gap:12px;padding:0 var(--gut);margin-top:clamp(-40px,-3vw,-10px);min-height:250px}
.now .lgo{text-shadow:0 2px 24px rgba(0,0,0,.6)}
.now .meta{justify-content:center;margin:0}
.now .syn{margin:0 auto;max-width:56ch}
.now .acts{justify-content:center}
.now.swap>*{animation:fadeUp .7s var(--eo) both;animation-delay:calc(var(--i,0)*70ms)}
.pips{display:flex;gap:6px;justify-content:center;margin-top:6px}
.pips button{width:22px;height:14px;display:grid;align-items:center}
.pips i{display:block;height:3px;border-radius:3px;background:rgba(238,239,223,.2);transition:background .4s,height .25s}
.pips button:hover i{height:5px}
.pips button.on i{background:var(--sand)}
.reel-empty{padding:40px var(--gut) 60px;color:var(--mist);max-width:60ch}

.card{flex:0 0 calc((100% - 5*clamp(6px,.5vw,10px)) / 5.35);scroll-snap-align:start;position:relative;border-radius:8px;overflow:hidden;container-type:inline-size;text-align:left;transition:transform .5s var(--eo),filter .5s var(--eo),opacity .5s}
.card .stage{border-radius:0}
.card-scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,9,12,.94) 0%,rgba(7,9,12,.72) 32%,rgba(7,9,12,0) 68%);pointer-events:none}
.card-logo{position:absolute;left:6cqw;right:6cqw;bottom:7cqw;line-height:.95;text-shadow:0 2px 18px rgba(0,0,0,.6);pointer-events:none}
.card-badge{position:absolute;left:5cqw;top:5cqw;display:flex;gap:4px;align-items:center;pointer-events:none}
.card-badge .hinge{width:max(9px,4.2cqw);height:max(12px,6cqw)}
.card-badge .tx{font-size:max(9px,3.6cqw);font-weight:800;letter-spacing:.18em;color:var(--sand);text-transform:uppercase}
.card .prog{position:absolute;left:6cqw;right:6cqw;bottom:3cqw;height:3px;border-radius:3px;background:rgba(238,239,223,.25);overflow:hidden}
.card .prog b{display:block;height:100%;background:var(--sand);border-radius:3px}
.card .sample,.tile .sample{position:absolute;right:4cqw;top:4.5cqw;font-size:max(8.5px,3cqw);font-weight:800;letter-spacing:.14em;color:rgba(238,239,223,.7);pointer-events:none}


/* ---------- STAGE + SCENES ---------- */
.stage{position:relative;aspect-ratio:16/9;width:100%;overflow:hidden;container-type:inline-size;background:var(--bg)}
.scn{position:absolute;inset:0;font:500 calc(100cqw/60)/1.3 var(--ui);color:var(--fg);background:var(--bg);overflow:hidden;letter-spacing:0}
.scn *{box-sizing:border-box}
.scn .app{position:absolute;left:3em;right:3em;top:2.6em;bottom:-1.2em;background:var(--p1);border-radius:1.1em 1.1em 0 0;box-shadow:0 2em 4em rgba(0,0,0,.45);overflow:hidden}
.scn .bar{height:2.8em;display:flex;align-items:center;gap:.8em;padding:0 1.3em;background:var(--p2)}
.scn .lg{width:1.2em;height:1.2em;border-radius:.35em;background:var(--k)}
.scn .an{font-weight:700;font-size:.95em}
.scn .tb{display:flex;gap:1.2em;margin-left:1.6em;font-size:.8em;opacity:.55}
.scn .tb b{opacity:1;font-weight:700;color:var(--k)}
.scn .sp{margin-left:auto;font-size:.7em;font-weight:800;letter-spacing:.14em;padding:.35em .7em;border-radius:.4em;background:rgba(0,0,0,.25);opacity:.8}
.scn .bd{position:absolute;top:2.8em;left:0;right:0;bottom:1.2em;padding:1.5em 1.6em}
.scn .mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.scn .lb{font-size:.72em;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.6}
.scn .chip{display:inline-block;font-size:.72em;font-weight:700;padding:.3em .7em;border-radius:99px;background:var(--k);color:var(--bg)}
.scn .pl{background:var(--p2);border-radius:.7em}
.live .in{animation:sIn .9s var(--eo) both;animation-delay:calc(var(--i,0)*.11s + .15s)}
@keyframes sIn{from{opacity:0;transform:translateY(1em)}}
.still *,.still *::before,.still *::after{animation:none!important}

/* radar */
.rd{display:grid;grid-template-columns:21em 1fr;gap:2.2em;height:100%;align-items:center}
.rd-scope{width:21em;height:21em;border-radius:50%;position:relative;overflow:hidden;background:repeating-radial-gradient(circle,var(--p2) 0 2.1em,var(--p1) 2.1em 4.2em)}
.rd-sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 290deg,color-mix(in oklab,var(--k) 60%,transparent) 360deg);animation:spin 4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.rd-core{position:absolute;left:50%;top:50%;width:1.4em;height:1.4em;margin:-.7em;border-radius:50%;background:var(--fg)}
.blip{position:absolute;width:1.1em;height:1.1em;margin:-.55em;border-radius:50%;background:var(--k);animation:blip 4s var(--eo) infinite;animation-delay:var(--d)}
@keyframes blip{0%{transform:scale(0);opacity:0}8%{transform:scale(1.7);opacity:1}25%,85%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:.35}}
.rd-list{display:grid;gap:.6em;align-content:center}
.rd-row{display:grid;grid-template-columns:1fr 3em 7em;align-items:center;gap:1em;padding:.75em 1em;background:var(--p2);border-radius:.6em;animation:rowCycle 10s var(--eo) infinite;animation-delay:calc(var(--i)*.4s)}
.rd-row b{font-size:.95em;display:block}
.rd-row span{font-size:.75em;opacity:.6}
.rd-row .mono{font-size:1.05em;font-weight:600;color:var(--k);text-align:right}
.meter{height:.5em;border-radius:1em;background:rgba(0,0,0,.3);overflow:hidden}
.meter b{display:block;height:100%;width:var(--w);border-radius:1em;background:var(--k);transform-origin:left;animation:meter 10s var(--eo) infinite;animation-delay:calc(var(--i)*.4s)}
@keyframes rowCycle{0%{opacity:0;transform:translateX(2.5em)}6%,90%{opacity:1;transform:none}97%,100%{opacity:0;transform:translateX(-1em)}}
@keyframes meter{0%,4%{transform:scaleX(0)}16%,100%{transform:scaleX(1)}}

/* content */
.ct{display:grid;grid-template-columns:15em 1fr;gap:2em;height:100%}
.brief{padding:1.3em;display:grid;gap:.8em;align-content:start}
.brief p{margin:0;font-size:1.05em;line-height:1.35;font-weight:600}
.brief .chips{display:flex;flex-wrap:wrap;gap:.4em}
.brief .chips i{font-style:normal;font-size:.72em;padding:.3em .7em;border-radius:99px;background:rgba(0,0,0,.25)}
.genbar{height:.45em;border-radius:1em;background:rgba(0,0,0,.3);overflow:hidden;margin-top:.4em}
.genbar b{display:block;height:100%;width:100%;background:var(--k);transform-origin:left;animation:gen 6s var(--eo) infinite}
@keyframes gen{0%{transform:scaleX(0)}70%,100%{transform:scaleX(1)}}
.posts{position:relative;display:flex;align-items:flex-end;gap:1.3em}
.post{position:relative;border-radius:.8em;overflow:hidden;background:var(--p2);display:flex;flex-direction:column;animation:postCycle 12s var(--eo) infinite;animation-delay:calc(var(--i)*.5s)}
@keyframes postCycle{0%{opacity:0;transform:translateY(2em) scale(.94)}6%,90%{opacity:1;transform:none}98%,100%{opacity:0;transform:translateY(-1em)}}
.post .art{position:relative;flex:1;overflow:hidden;background:var(--c0)}
.post .art i{position:absolute;display:block}
.post .art .sun{border-radius:50%;background:var(--k);animation:sun 6s ease-in-out infinite alternate}
.post .art .hill{left:-10%;right:-10%;bottom:-30%;height:65%;border-radius:50% 50% 0 0;background:var(--c1)}
.post .art .plate{border-radius:50%;background:var(--fg)}
.post .art .plate2{border-radius:50%;background:var(--c2)}
@keyframes sun{to{transform:translateY(-12%) scale(1.06)}}
.post .cap{padding:.6em .8em;font-size:.72em;line-height:1.3}
.post .cap b{display:block;font-size:1.05em}
.post .plat{position:absolute;top:.6em;left:.6em;font-size:.62em;font-weight:800;padding:.25em .6em;border-radius:99px;background:rgba(0,0,0,.45);color:#fff;z-index:2;letter-spacing:.05em}

/* store */
.st{display:grid;grid-template-columns:1fr 17em;gap:1.4em;height:100%}
.prods{display:grid;grid-template-columns:repeat(3,1fr);gap:.9em;align-content:start}
.prod{border-radius:.7em;background:var(--p2);overflow:hidden}
.prod .pa{height:6.4em;position:relative;background:var(--c0)}
.prod .pa i{position:absolute;display:block;left:50%;bottom:0;transform:translateX(-50%)}
.prod .pi{padding:.55em .7em;display:flex;justify-content:space-between;align-items:center;gap:.4em;font-size:.76em}
.prod .pi b{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stk{font-size:.62em;font-weight:800;padding:.2em .55em;border-radius:99px;white-space:nowrap}
.stk.low{background:#F08A6E;color:#2A140C;animation:swapStk 8s steps(1) infinite;animation-delay:var(--d)}
.stk.ok{background:rgba(0,0,0,.28)}
@keyframes swapStk{0%,45%{background:#F08A6E;color:#2A140C}46%,100%{background:var(--k);color:var(--bg)}}
.side{display:grid;gap:.9em;align-content:start}
.chart{padding:1em;border-radius:.7em;background:var(--p2)}
.chart .big{font-size:1.9em;font-weight:700;margin:.1em 0 .2em}
.chart svg{width:100%;height:4.5em;display:block}
.chart .ln{fill:none;stroke:var(--k);stroke-width:3;stroke-dasharray:400;stroke-dashoffset:0;animation:draw 8s var(--eo) infinite}
.chart .ar{fill:var(--k);opacity:.16}
@keyframes draw{0%{stroke-dashoffset:400}40%,100%{stroke-dashoffset:0}}
.feed{display:grid;gap:.5em}
.ev{font-size:.74em;line-height:1.3;padding:.6em .8em;border-radius:.6em;background:var(--p2);display:grid;grid-template-columns:.6em 1fr;gap:.6em;align-items:start;animation:rowCycle 12s var(--eo) infinite;animation-delay:calc(var(--i)*.9s)}
.ev::before{content:"";width:.6em;height:.6em;border-radius:50%;background:var(--k);margin-top:.3em}
.ev em{font-style:normal;opacity:.55;display:block;font-size:.9em}

/* board */
.bo{display:grid;grid-template-columns:repeat(4,1fr);gap:1em;height:100%;position:relative}
.col{background:rgba(0,0,0,.18);border-radius:.8em;padding:.8em;display:grid;gap:.6em;align-content:start}
.col h5{margin:0 0 .2em;font-size:.8em;display:flex;justify-content:space-between;opacity:.8}
.col h5 span{opacity:.6}
.tk{background:var(--p2);border-radius:.6em;padding:.7em .8em;font-size:.8em;line-height:1.3;display:grid;gap:.5em}
.tk b{font-weight:600}
.tk .tf{display:flex;align-items:center;gap:.4em;font-size:.82em;opacity:.8}
.tk .who{width:1.6em;height:1.6em;border-radius:50%;background:var(--k);color:var(--bg);display:grid;place-items:center;font-size:.72em;font-weight:800}
.tk .who.p{background:var(--fg)}
.tk.gold{box-shadow:inset 0 0 0 2px var(--k)}
.trav{position:absolute;left:.8em;top:14.2em;width:calc(25% - 2.35em);z-index:2;box-shadow:0 1.2em 2em rgba(0,0,0,.4);animation:travel 10s var(--eo) infinite}
@keyframes travel{0%,14%{transform:translate(0,0) rotate(0)}18%{transform:translate(4%,-.6em) rotate(-2deg)}30%,42%{transform:translate(calc(100% + 2.6em),0) rotate(0)}46%{transform:translate(calc(104% + 2.6em),-.6em) rotate(-2deg)}58%,70%{transform:translate(calc(200% + 5.2em),0)}74%{transform:translate(calc(204% + 5.2em),-.6em) rotate(-2deg)}86%,100%{transform:translate(calc(300% + 7.8em),0)}}
.trav .st2{font-size:.78em;font-weight:700;color:var(--k)}
.trav .st2::after{content:"Assigned";animation:stLabel 10s steps(1) infinite}
@keyframes stLabel{0%{content:"Reported"}30%{content:"Assigned"}58%{content:"On site"}86%{content:"Fixed"}}

/* inbox */
.ib{display:grid;grid-template-columns:24em 1fr;gap:1.2em;height:100%}
.mails{display:grid;gap:.45em;align-content:start}
.ml{display:grid;grid-template-columns:.55em 1fr auto;gap:.7em;align-items:center;padding:.65em .8em;border-radius:.6em;background:var(--p2);font-size:.8em;line-height:1.25}
.ml .dt{width:.55em;height:.55em;border-radius:50%;background:var(--k)}
.ml b{display:block;font-size:.98em}
.ml span{opacity:.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.ml .tg{font-size:.78em;font-weight:800;padding:.25em .6em;border-radius:99px;background:var(--tc);color:#101320;animation:chipIn 9s var(--es) infinite;animation-delay:calc(var(--i)*.35s + .6s)}
@keyframes chipIn{0%,5%{transform:scale(0);opacity:0}12%,92%{transform:scale(1);opacity:1}100%{opacity:0}}
.ml.sel{box-shadow:inset 0 0 0 2px var(--k)}
.pane{border-radius:.8em;background:var(--p2);padding:1.2em 1.4em;display:grid;gap:.7em;align-content:start}
.pane h4{margin:0;font-size:1.15em}
.pane .fr{font-size:.78em;opacity:.65}
.draft{background:rgba(0,0,0,.2);border-radius:.6em;padding:1em;display:grid;gap:.5em;font-size:.84em;line-height:1.4}
.draft .lb{color:var(--k);opacity:1}
.typ{display:block;clip-path:inset(0 0 0 0);animation:typ 9s steps(28) infinite;animation-delay:var(--d)}
@keyframes typ{0%,8%{clip-path:inset(0 100% 0 0)}40%,100%{clip-path:inset(0 0 0 0)}}
.sendbtn{justify-self:start;font-size:.78em;font-weight:700;padding:.55em 1em;border-radius:.5em;background:var(--k);color:var(--bg)}

/* report */
.rp{display:grid;grid-template-columns:1fr 15em;gap:1.4em;height:100%}
.doc{background:var(--fg);color:#1B1F24;border-radius:.7em;padding:1.4em 1.6em;display:grid;gap:.7em;align-content:start}
.doc h4{margin:0;font:400 1.6em/1.05 'Young Serif',Georgia,serif}
.doc .sub{font-size:.75em;opacity:.6;margin-top:-.4em}
.bars{display:flex;align-items:flex-end;gap:.6em;height:7em;padding-top:.4em}
.bars i{flex:1;height:var(--h);border-radius:.3em .3em 0 0;background:#C9CCC0;transform-origin:bottom;animation:barUp 8s var(--eo) infinite;animation-delay:calc(var(--i)*.08s)}
.bars i.k{background:var(--k)}
@keyframes barUp{0%,3%{transform:scaleY(0)}22%,100%{transform:scaleY(1)}}
.doc ul{margin:0;padding:0 0 0 1em;font-size:.82em;line-height:1.45;display:grid;gap:.2em}
.doc li{animation:typ 8s steps(30) infinite;animation-delay:calc(var(--i)*.5s + .6s)}
.kpis{display:grid;gap:.8em;align-content:start}
.kpi{background:var(--p2);border-radius:.7em;padding:.9em 1em}
.kpi .v{font-size:1.6em;font-weight:700;margin-top:.1em}
.kpi .d{font-size:.72em;color:var(--k);font-weight:700}

/* quote */
.qt{display:grid;grid-template-columns:18em 1fr;gap:1.4em;height:100%}
.form{display:grid;gap:.7em;align-content:start}
.fld{background:var(--p2);border-radius:.6em;padding:.6em .8em}
.fld .lb{display:block;margin-bottom:.15em}
.fld div{font-size:.86em}
.qdoc{background:var(--fg);color:#18201A;border-radius:.7em;padding:1.3em 1.5em;display:grid;gap:.5em;align-content:start}
.qdoc .qh{display:flex;justify-content:space-between;align-items:baseline}
.qdoc h4{margin:0;font:italic 900 1.5em/1 'Chivo',var(--ui)}
.li{display:grid;grid-template-columns:1fr auto;gap:1em;font-size:.82em;padding:.45em 0;border-bottom:1px solid rgba(0,0,0,.1);animation:rowCycle 10s var(--eo) infinite;animation-delay:calc(var(--i)*.45s)}
.qtot{display:flex;justify-content:space-between;align-items:baseline;margin-top:.4em;font-weight:700}
.qtot .mono{font-size:1.5em}
.qdoc .ok{justify-self:end;background:#18201A;color:var(--k);font-size:.75em;font-weight:700;padding:.45em .9em;border-radius:.4em}

/* reviews */
.rv2{display:grid;grid-template-columns:1fr 1fr;gap:1.2em;height:100%}
.rvs{display:grid;gap:.8em;align-content:start}
.rvw{background:var(--p2);border-radius:.8em;padding:.9em 1em;display:grid;gap:.4em;font-size:.82em;line-height:1.35;animation:rowCycle 12s var(--eo) infinite;animation-delay:calc(var(--i)*.6s)}
.rvw .hd{display:flex;justify-content:space-between;align-items:center}
.stars{display:flex;gap:.15em}
.stars svg{width:.95em;height:.95em;fill:var(--k)}
.stars svg.off{fill:rgba(0,0,0,.3)}
.rvw .src{font-size:.8em;opacity:.55}
.reply{background:var(--k);color:var(--bg);border-radius:.8em .8em .8em .2em;padding:1em 1.1em;font-size:.86em;line-height:1.4;display:grid;gap:.4em;align-self:start}
.reply .lb{opacity:.75}
.flag{margin-top:.6em;background:rgba(0,0,0,.22);border-radius:.8em;padding:.8em 1em;font-size:.8em;display:flex;gap:.6em;align-items:center}
.flag i{width:.7em;height:.7em;border-radius:50%;background:#F08A6E;flex:none;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.5);opacity:.6}}

/* catalog */
.cg{display:grid;grid-template-columns:20em 1fr 17em;gap:0;height:100%;align-items:center}
.feedl{display:grid;gap:.5em}
.sup{font-size:.68em;padding:.6em .7em;border-radius:.5em;background:rgba(0,0,0,.25);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.85}
.pipes{position:relative;height:100%}
.pipes svg{position:absolute;inset:0;width:100%;height:100%}
.pipes path{fill:none;stroke:var(--p2);stroke-width:3}
.pipes path.fl{stroke:var(--k);stroke-dasharray:10 26;stroke-linecap:round;animation:dash 1.1s linear infinite}
.cards2{display:grid;gap:.7em}
.pc{background:var(--p2);border-radius:.7em;padding:.7em .8em;display:grid;grid-template-columns:3em 1fr;gap:.8em;align-items:center;font-size:.8em;animation:rowCycle 9s var(--eo) infinite;animation-delay:calc(var(--i)*.5s + .8s)}
.pc .th{height:3em;border-radius:.5em;background:var(--c0);position:relative;overflow:hidden}
.pc .th i{position:absolute;left:25%;right:25%;bottom:0;height:60%;border-radius:.4em .4em 0 0;background:var(--k)}
.pc b{display:block}
.pc span{opacity:.6;font-size:.9em}

/* pivot */
.pv{position:relative;height:100%}
.pv svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pv .lnk{fill:none;stroke:var(--p2);stroke-width:4}
.pv.architect .lnk{stroke:var(--k);stroke-dasharray:6 9;opacity:.7;animation:dash 1.4s linear infinite}
.pv.install .lnk,.pv.calibrate .lnk{stroke:var(--k);opacity:.9;stroke-dasharray:16 12;animation:dash .8s linear infinite}
@keyframes dash{to{stroke-dashoffset:-30}}
.nd{position:absolute;width:10.5em;padding:.8em 1em;border-radius:.8em;background:var(--p2);font-size:.85em;display:grid;gap:.25em;translate:-50% -50%}
.nd b{font-size:1.05em}
.nd span{opacity:.6;font-size:.85em}
.pv.inspect .nd.hot{box-shadow:0 0 0 .3em rgba(240,138,110,.35),0 0 3em rgba(240,138,110,.35);animation:hot 2s ease-in-out infinite}
@keyframes hot{50%{box-shadow:0 0 0 .6em rgba(240,138,110,.15),0 0 4em rgba(240,138,110,.45)}}
.pv .hub{position:absolute;left:50%;top:50%;width:7em;height:7em;margin:-3.5em;border-radius:50%;background:var(--k);display:grid;place-items:center;color:var(--bg);font-weight:800;font-size:.9em;text-align:center;line-height:1.1}
.pv.inspect .hub{background:transparent;box-shadow:inset 0 0 0 .25em var(--p2);color:var(--fg);opacity:.6}
.pv.architect .hub{background:transparent;box-shadow:inset 0 0 0 .25em var(--k);color:var(--k)}
.pv.install .hub,.pv.calibrate .hub{animation:hubPulse 3s ease-in-out infinite}
@keyframes hubPulse{50%{box-shadow:0 0 0 1em color-mix(in oklab,var(--k) 20%,transparent)}}
.gauge{position:absolute;right:1em;bottom:.6em;display:flex;gap:1em}
.gauge div{width:6em;background:var(--p2);border-radius:.6em;padding:.6em;font-size:.7em;display:grid;gap:.4em}
.gauge .meter b{width:var(--w);animation:settle 5s var(--eo) infinite;transform-origin:left}
@keyframes settle{0%{transform:scaleX(.3)}20%{transform:scaleX(1.25)}35%{transform:scaleX(.85)}50%,100%{transform:scaleX(1)}}
.pv:not(.calibrate) .gauge{display:none}
.stagecap{position:absolute;left:1.6em;bottom:1.2em;font-size:.75em;opacity:.7;max-width:22em}

/* ---------- HOVER POP ---------- */
#pop{position:fixed;z-index:30;width:320px;border-radius:10px;overflow:hidden;background:var(--night);box-shadow:0 40px 80px -20px rgba(0,0,0,.95),0 0 0 1px rgba(58,79,92,.45);transform-origin:50% 0}
#pop[hidden]{display:none}
#pop .stage{border-radius:0}
#pop .pi{padding:14px 16px 18px;display:grid;gap:11px}
.ctrls{display:flex;align-items:center;gap:8px}
.cb{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 2px rgba(238,239,223,.4);transition:box-shadow .3s,transform .35s var(--es),background .3s}
.cb:hover{box-shadow:inset 0 0 0 2px var(--bone);transform:scale(1.08)}
.cb.pl{background:var(--sand);color:var(--ink);box-shadow:none}
.cb.pl:hover{background:var(--sand-hi)}
.cb.more{margin-left:auto}
.cb.on{background:rgba(235,221,185,.14);box-shadow:inset 0 0 0 2px var(--sand);color:var(--sand)}
.gen{display:flex;flex-wrap:wrap;gap:4px 8px;font-size:13px;color:var(--mist)}
.gen span+span::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--dim);margin-right:8px;vertical-align:middle}
.pop-logo{position:absolute;left:14px;bottom:12px;right:14px;line-height:.95;text-shadow:0 2px 20px rgba(0,0,0,.7);pointer-events:none}

/* ---------- DETAIL ---------- */
#detail{position:fixed;inset:0;z-index:50;overflow-y:auto;overscroll-behavior:contain;padding:clamp(20px,4vh,48px) 16px 60px}
#detail[hidden]{display:none}
.dt-bd{position:fixed;inset:0;background:rgba(3,4,6,.72);backdrop-filter:blur(6px)}
.dt{position:relative;margin:0 auto;width:min(920px,100%);border-radius:14px}
.dt-bg{position:absolute;inset:0;border-radius:14px;background:var(--night);box-shadow:0 60px 120px -30px #000}
.dt-hero{position:relative;border-radius:14px 14px 0 0;overflow:hidden;transform-origin:0 0}
.dt-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--night) 0%,rgba(14,18,22,0) 48%);pointer-events:none}
.dt-hero-copy{position:absolute;left:clamp(20px,5%,48px);right:clamp(20px,5%,48px);bottom:clamp(18px,4%,40px);z-index:2}
.dt-hero-copy .logo{margin:0 0 18px;line-height:.92}
.dt-x{position:absolute;right:16px;top:16px;z-index:3;width:40px;height:40px;border-radius:50%;background:rgba(7,9,12,.8);display:grid;place-items:center;transition:transform .4s var(--es),background .3s}
.dt-x:hover{transform:rotate(90deg);background:var(--ink)}
.dt-body{position:relative;padding:8px clamp(20px,5%,48px) 44px}
.dt-body>*{animation:fadeUp .8s var(--eo) both;animation-delay:calc(.18s + var(--i,0)*70ms)}
.dt-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:clamp(20px,4vw,44px)}
.dt-grid .syn{margin-bottom:10px}
.facts{font-size:14px;line-height:1.55;color:var(--dim);display:grid;gap:8px}
.facts b{color:var(--mist);font-weight:500}
.samplebar{display:flex;gap:12px;align-items:center;background:rgba(235,221,185,.08);border-radius:10px;padding:12px 14px;font-size:13.5px;color:var(--mist);margin:22px 0 6px}
.samplebar svg{color:var(--sand)}
.h3{font:700 22px/1.2 var(--ui);letter-spacing:-.01em;margin:34px 0 14px;display:flex;justify-content:space-between;align-items:baseline}
.h3 small{font-size:14px;color:var(--mist);font-weight:500}
.eps{display:grid}
.ep{display:grid;grid-template-columns:34px clamp(110px,20%,160px) 1fr auto;gap:18px;align-items:center;padding:18px 14px;border-radius:10px;text-align:left;border-bottom:1px solid rgba(58,79,92,.45);transition:background .3s}
.ep:hover{background:var(--deck)}
.ep .n{font:700 22px/1 var(--ui);color:var(--mist);text-align:center}
.ep .th{position:relative;border-radius:6px;overflow:hidden}
.ep .th .ov{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.35);opacity:0;transition:opacity .3s}
.ep:hover .th .ov{opacity:1}
.ep .ov span{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(7,9,12,.7);box-shadow:inset 0 0 0 2px var(--bone)}
.ep h4{margin:0 0 4px;font-size:16px}
.ep p{margin:0;font-size:14px;color:var(--mist);line-height:1.45}
.ep .d{font-size:14px;color:var(--mist);align-self:start}
.more{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mc{border-radius:8px;overflow:hidden;background:var(--deck);text-align:left;transition:transform .45s var(--es)}
.mc:hover{transform:translateY(-4px)}
.mc .stage{border-radius:0}
.mc .mb{padding:12px 14px 16px;display:grid;gap:6px}
.mc .mb .m{font-size:13px;color:var(--match);font-weight:700}
.mc h5{margin:0;font-size:15px}
.mc p{margin:0;font-size:13px;color:var(--mist);line-height:1.45}
.mc{position:relative;container-type:inline-size}
.mc .card-logo{bottom:auto;top:calc(56.25cqw - 17cqw)}

/* ---------- PLAYER ---------- */
#player{position:fixed;inset:0;z-index:70;background:var(--ink);overflow:hidden}
#player[hidden]{display:none}
.pl-stage{position:absolute;inset:0;display:grid;place-items:center}
.pl-stage .fit{width:min(100vw,177.78vh);aspect-ratio:16/9;position:relative}
#pl-fit.paused *{animation-play-state:paused!important}
.pl-stage .stage{border-radius:0}
.pl-layer{position:absolute;inset:0;display:grid;place-items:center;transition:opacity .9s var(--eo),filter .9s var(--eo),transform 1.2s var(--eo)}
.pl-layer.out{opacity:0;filter:blur(14px);transform:scale(1.04)}
.pl-ui{position:absolute;inset:0;transition:opacity .5s var(--eo);pointer-events:none}
.pl-ui>*{pointer-events:auto}
#player.idle .pl-ui{opacity:0}
#player.idle{cursor:none}
.pl-top{position:absolute;left:0;right:0;top:0;padding:calc(18px + env(safe-area-inset-top,0px)) var(--gut) 60px;display:flex;align-items:center;gap:16px;background:linear-gradient(180deg,rgba(0,0,0,.75),transparent)}
.pl-top .back{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;transition:transform .35s var(--es),background .3s}
.pl-top .back:hover{background:rgba(238,239,223,.1);transform:translateX(-3px)}
.pl-top .tt{font-size:15px;color:var(--mist)}
.pl-top .tt b{color:var(--bone);font-weight:700}
.pl-top .tag-s{margin-left:auto}
.pl-cap{position:absolute;left:var(--gut);bottom:140px;max-width:min(560px,80vw);background:rgba(7,9,12,.8);border-radius:12px;padding:16px 20px}
.pl-cap b{color:var(--sand);font-weight:600}
.pl-cap p{margin:0;font-size:clamp(15px,1.4vw,19px);line-height:1.45}
.pl-cap.swap{animation:capIn .8s var(--eo) both}
@keyframes capIn{from{opacity:0;transform:translateY(14px);filter:blur(6px)}}
.pl-bot{position:absolute;left:0;right:0;bottom:0;padding:60px var(--gut) calc(22px + env(safe-area-inset-bottom,0px));background:linear-gradient(0deg,rgba(0,0,0,.85),transparent)}
.scrub{position:relative;height:18px;display:grid;align-items:center;cursor:pointer}
.scrub .rail{position:relative;height:4px;border-radius:4px;background:rgba(238,239,223,.2);transition:height .25s}
.scrub:hover .rail{height:7px}
.scrub .fill{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:var(--sand)}
.scrub .knob{position:absolute;top:50%;width:16px;height:16px;margin:-8px;border-radius:50%;background:var(--sand);transform:scale(0);transition:transform .3s var(--es)}
.scrub:hover .knob{transform:scale(1)}
.scrub .seg{position:absolute;top:-2px;bottom:-2px;width:3px;background:#000}
.pl-row{display:flex;align-items:center;gap:clamp(8px,1.6vw,22px);margin-top:12px}
.pl-row .pb{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;transition:transform .3s var(--es),background .3s}
.pl-row .pb:hover{transform:scale(1.15);background:rgba(238,239,223,.08)}
.pl-row .pb svg{width:26px;height:26px}
.pl-row .time{white-space:nowrap;font-family:var(--mono);font-size:13px;color:var(--mist);font-variant-numeric:tabular-nums}
.pl-row .ttl{margin:0 auto;font-size:15px;color:var(--mist);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-row .ttl b{color:var(--bone)}
.pl-row .launch{font-size:14px;font-weight:700;padding:10px 16px;border-radius:8px;background:rgba(238,239,223,.1);display:flex;gap:8px;align-items:center;white-space:nowrap}
.pl-row .launch[aria-disabled="true"]{color:var(--dim);cursor:not-allowed}
.next{position:absolute;right:var(--gut);bottom:140px;width:min(360px,80vw);border-radius:12px;overflow:hidden;background:var(--night);box-shadow:0 30px 70px rgba(0,0,0,.8);animation:nextIn .8s var(--eo) both}
.next[hidden]{display:none}
@keyframes nextIn{from{opacity:0;transform:translateX(40px) scale(.96)}}
.next .nb{padding:14px 16px 16px;display:grid;gap:10px}
.next small{font-size:13px;color:var(--mist)}
.next .row2{display:flex;gap:10px;align-items:center}
.ring{width:40px;height:40px;position:relative;flex:none}
.ring svg{width:40px;height:40px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:3}
.ring .bgc{stroke:rgba(238,239,223,.2)}
.ring .fgc{stroke:var(--sand);stroke-dasharray:113;stroke-dashoffset:113;animation:ring 6s linear forwards}
@keyframes ring{to{stroke-dashoffset:0}}
.ring button{position:absolute;inset:0;display:grid;place-items:center}

/* ---------- SEARCH + LIST + FOOT ---------- */
#results{padding:calc(110px + env(safe-area-inset-top,0px)) var(--gut) 40px;min-height:70vh}
#results[hidden]{display:none}
#results h2{font-size:18px;color:var(--mist);font-weight:500;margin:0 0 20px}
#results h2 b{color:var(--bone)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,44vw),1fr));gap:14px 10px}
.grid .card{flex:none;width:100%;animation:fadeUp .6s var(--eo) both;animation-delay:calc(var(--i)*40ms)}
.empty{color:var(--mist);max-width:50ch}
foot,.foot{display:block;padding:clamp(40px,7vw,90px) var(--gut) calc(40px + env(safe-area-inset-bottom,0px))}
.close{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,5vw,80px);align-items:end;padding:clamp(28px,5vw,56px);border-radius:18px;background:var(--slate);position:relative;overflow:hidden;isolation:isolate}
.close::before{content:"";position:absolute;right:-8%;top:-40%;width:52%;aspect-ratio:1;border-radius:50%;background:#314654;z-index:-1}
.close h3{font:500 clamp(30px,4.2vw,58px)/1.05 var(--ui);letter-spacing:-.04em;margin:0 0 18px;color:var(--bone);text-wrap:balance}
.rude{font-family:var(--display);font-weight:400;color:var(--sand);font-size:1.15em;letter-spacing:0;margin:0 .15em}
.close p{margin:0 0 26px;color:#D5DBD3;max-width:44ch}
.close blockquote{margin:0;font-size:clamp(17px,1.6vw,21px);line-height:1.45;color:var(--bone)}
.close cite{display:block;margin-top:12px;font-style:normal;font-size:14px;color:#AEB9B4}
.small{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;color:var(--dim);font-size:13px;margin-top:28px}
#toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom,0px));z-index:90;transform:translateX(-50%);background:var(--sand);color:var(--ink);font-weight:700;font-size:14.5px;padding:12px 20px;border-radius:99px;box-shadow:0 20px 40px -10px rgba(0,0,0,.7);display:flex;gap:8px;align-items:center}
#toast[hidden]{display:none}
#toast.show{animation:toast 2.6s var(--eo) both}
@keyframes toast{0%{opacity:0;transform:translate(-50%,20px) scale(.9)}12%,82%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,10px)}}

/* ---------- RESPONSIVE ---------- */
@media (max-width:760px){
  .links{display:none}
  .cta-s{padding:6px 12px;font-size:12.5px}
  .search input{display:none}
  .bb{height:auto;padding-top:calc(70px + env(safe-area-inset-top,0px))}
  .bb-art{position:relative;height:auto;z-index:0}
  .bb-layer{position:absolute}
  .bb-art{aspect-ratio:16/10}
  .bb-layer .tilt{position:absolute;left:0;right:0;top:0;width:100%;transform:none!important}
  .bb-layer.enter .tilt{animation:fadeUp 1s var(--eo) both}
  .bb-layer .tilt .stage{border-radius:0}
  .bb-scrim{background:linear-gradient(0deg,var(--ink) 0%,rgba(7,9,12,0) 40%)}
  .bb-copy{position:relative;left:auto;bottom:auto;width:auto;padding:0 var(--gut);margin-top:-40px}
  .bb-rail{position:relative;right:auto;bottom:auto;padding:18px var(--gut) 0;justify-content:space-between}
  main{margin-top:30px}
  .wheel{--tw:min(64vw,300px);--persp:720px;height:clamp(300px,82vw,380px)}
  .ring-nav{width:42px;height:42px;margin-top:-21px}
  .reel-h .hint{display:none}
  .now{min-height:300px}
  .dt-grid{grid-template-columns:1fr}
  .more{grid-template-columns:repeat(2,1fr)}
  .ep{grid-template-columns:24px 96px 1fr;gap:12px}
  .ep .d{display:none}
  .close{grid-template-columns:1fr}
  .pl-row .ttl{display:none}
  .pl-cap{bottom:150px}
  .next{bottom:150px}
}
@media (max-width:420px){.btn{height:46px;padding:0 18px 0 14px;font-size:15.5px}.pl-row .launch span{display:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---------- REAL MEDIA (trailers, posters, episode video) ---------- */
.stage.media>video,.stage.media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:var(--ink)}
.pl-stage .stage.media>video{object-fit:contain}
/* Subtitle card for real episodes: lives in the video frame's bottom-right corner (where
   Clueso's free-plan badge sits, at 67–99% x, 88–99% y) and stays up for the whole episode. */
.pl-cap[hidden]{display:none}
.pl-sub{position:absolute;right:.5%;bottom:.7%;z-index:2;box-sizing:border-box;width:max(34%,min(260px,96%));min-height:12%;display:flex;align-items:center;padding:max(8px,1cqw) max(10px,1.3cqw);border-radius:max(8px,.8cqw);background:var(--ink);box-shadow:0 1.2cqw 3cqw -1cqw rgba(0,0,0,.7);animation:capIn .8s var(--eo) both}
.pl-sub p{margin:0;font-size:max(10px,1.05cqw);line-height:1.4;color:var(--bone)}
.pl-sub b{color:var(--sand);font-weight:600}
/* Optional subtitles (player CC). Centred just above the bottom-right subtitle card; on small frames,
   where that card grows, captions move to the top of the frame so the two never overlap. */
.pl-cc{position:absolute;left:50%;bottom:14.5%;transform:translateX(-50%);z-index:3;max-width:64%;width:max-content;padding:.35em .75em .4em;border-radius:max(6px,.45cqw);background:rgba(7,9,12,.86);color:var(--bone);font:500 max(13px,1.3cqw)/1.35 var(--ui);text-align:center;text-wrap:balance;box-shadow:0 .8cqw 2cqw -1cqw rgba(0,0,0,.6)}
.pl-cc[hidden]{display:none}
@container (max-width: 700px){.pl-cc{bottom:auto;top:4%;max-width:92%}}
.pl-row .pb.on{color:var(--ink);background:var(--sand)}
.pl-row .pb.on:hover{background:var(--sand-hi)}
.links button[hidden]{display:none}
/* Hire-role avatars (flat planes, brand grounds only). depot: a welfare cabin on wheels; ledger: a stamped invoice. */
.av.depot i:nth-child(1){left:12%;top:28%;width:76%;height:40%;border-radius:8%;background:var(--c2)}
.av.depot i:nth-child(2){left:22%;top:36%;width:22%;height:16%;border-radius:12%;background:var(--c1)}
.av.depot i:nth-child(3){left:18%;top:62%;width:64%;height:20%;background:radial-gradient(circle closest-side,var(--c3) 96%,transparent) left/32% 100% no-repeat,radial-gradient(circle closest-side,var(--c3) 96%,transparent) right/32% 100% no-repeat}
.av.ledger i:nth-child(1){left:24%;top:14%;width:52%;height:72%;border-radius:6%;background:var(--c2)}
.av.ledger i:nth-child(2){left:32%;top:26%;width:36%;height:22%;background:repeating-linear-gradient(to bottom,var(--c1) 0 22%,transparent 22% 42%)}
.av.ledger i:nth-child(3){left:52%;top:56%;width:30%;height:30%;border-radius:50%;background:var(--c3)}