[hidden]{display:none!important}
img{max-width:100%}
html{-webkit-text-size-adjust:100%}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}

/* Layout: you enter through Des's chrome doors, then land in a bright ice-blue station. Frosted glass decks float over a slow liquid-holographic sky; her real 3D objects orbit the work. Navy is reserved for vault and console moments. Single committed light look. */
:root{
  color-scheme:light;
  --ice:#eef5fd; --sky:#cfe1f6; --blue:#8fb6ee; --azure:#2f6fe0; --navy:#0b1836; --ink:#0a1228; --soft:#46567a; --line:#b9cdea;
  --glass:rgba(255,255,255,.68); --pist:#d6f7a0;
  --holo:linear-gradient(100deg,#f7b9df,#bfa9f6 25%,#8fd2f5 50%,#b4f0cb 75%,#fbe9a0);
  --chrome:linear-gradient(180deg,#fff,#d5dfee 42%,#f6f9fd 55%,#a9b9d1);
  --good:#12703a; --warn:#8a5a00; --bad:#b0261f;
  --display:"Unbounded","Arial Black",sans-serif; --body:"Manrope","Helvetica Neue",Arial,sans-serif; --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --px:0; --py:0;
}
*{box-sizing:border-box}
html.gated{overflow:hidden}
body{background:#dfecfb linear-gradient(180deg,#d0e2f8,#f4f9ff);color:var(--ink);font:500 16px/1.6 var(--body);margin:0}
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.wrap{position:relative;z-index:1;max-width:1100px;margin:0 auto;padding-inline:16px;padding-block:0 110px}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.08;margin:0;text-wrap:balance;letter-spacing:-.01em;color:var(--navy)}
h1{font-size:clamp(1.7rem,5.2vw,3.1rem);font-weight:900} h2{font-size:clamp(1.2rem,3.2vw,1.65rem)} h3{font-size:1rem}
h4,.mono{font:700 .7rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;margin:0;color:var(--azure)}
p{margin:0;max-width:64ch}
.stack{display:flex;flex-direction:column;gap:16px} .stack.tight{gap:8px} .stack.loose{gap:28px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center} .row>*{min-width:0}
.grow{flex:1 1 220px} .soft{color:var(--soft)} .small{font-size:.875rem}

/* ---------- the gate ---------- */
#gate{position:fixed;inset:0;z-index:50;overflow:hidden;background:#cfe1f6;cursor:pointer}
#gate.out{opacity:0;transition:opacity .9s ease;pointer-events:none}
.cam{position:absolute;inset:0;transform-origin:50% 46%}
.fill{position:absolute;inset:-10%;background:url(assets/scene.jpg) 50% 42%/cover;filter:blur(36px) saturate(1.15)}
.stage{position:absolute;left:50%;top:46%;height:135vh;height:135dvh;aspect-ratio:1152/2048;transform:translate(-51.08%,-45%)}
.scene{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.scene.sl{left:-99.9%;transform:scaleX(-1)} .scene.sr{left:99.9%;transform:scaleX(-1)}
.portal{position:absolute;left:35.33%;top:24.27%;width:31.51%;height:41.41%;border-radius:50% 50% 0 0/22.4% 22.4% 0 0;overflow:hidden;perspective:1100px;background:radial-gradient(ellipse at 50% 62%,#fff 0,#f1f8ff 24%,#a9d0ff 60%,#5f97ea)}
.rays{position:absolute;inset:-70%;background:repeating-conic-gradient(from 0deg at 50% 52%,rgba(255,255,255,0) 0 6deg,rgba(255,255,255,.6) 8deg,rgba(191,169,246,.4) 10deg,rgba(143,210,245,0) 14deg);filter:blur(5px);animation:rot 16s linear infinite}
.dl,.dr{position:absolute;top:0;height:100%;width:50.2%;background:url(assets/door.jpg) 0 0/200% 100%}
.dl{left:0;transform-origin:0 50%} .dr{right:0;background-position:100% 0;transform-origin:100% 50%}
.dl::after,.dr::after{content:"";position:absolute;inset:0;background:#06112b;opacity:0}
.seam{position:absolute;left:50%;top:0;bottom:0;width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 28px 10px #fff,0 0 80px 26px rgba(160,205,255,.9);transform:scaleY(0)}
.mark{position:absolute;left:36.46%;top:34.96%;width:29.25%;height:20.31%;perspective:900px}
.mark::before{content:"";position:absolute;inset:8% 4% -4%;background:radial-gradient(closest-side,rgba(8,22,60,.5),transparent);filter:blur(14px);transform:translate(3%,5%)}
.tilt{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(calc(var(--px)*16deg)) rotateX(calc(var(--py)*-9deg))}
.stk{position:absolute;inset:0;transform-style:preserve-3d}
.stk img{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.mark .stk{animation:idle 5s ease-in-out infinite}
.flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 46%,#fff 30%,#eaf4ff);opacity:0;pointer-events:none}
.gate-ui{position:absolute;left:0;right:0;bottom:calc(5vh + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding-inline:16px}
.gate-ui .mono{color:var(--navy);text-shadow:0 0 12px #fff,0 0 4px #fff}
.gate-ui h1{line-height:0} .gate-ui h1 img{width:min(50vw,250px);filter:drop-shadow(0 10px 18px rgba(20,60,140,.35))}
#enter{font:700 .7rem/1 var(--display);letter-spacing:.16em;text-transform:uppercase;padding:15px 24px;color:var(--navy);background:rgba(255,255,255,.42);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 0 0 1px rgba(255,255,255,.95) inset,0 10px 30px -12px rgba(30,80,170,.55);animation:pulse 2.6s ease-out infinite}
#enter:hover{background:rgba(255,255,255,.7)}
#gate.go .gate-ui{opacity:0;transition:opacity .4s;pointer-events:none}
#gate.go .mark{animation:lift 1.3s cubic-bezier(.3,0,.2,1) forwards,fly 1.25s cubic-bezier(.6,0,.9,.3) 2.25s forwards}
#gate.go .mark::before{opacity:0;transition:opacity .5s}
#gate.go .mark .stk{animation:spin 3.5s cubic-bezier(.5,0,.25,1) forwards}
#gate.go .seam{animation:seam .55s ease-out 1.25s forwards}
#gate.go .dl{animation:openL 1.8s cubic-bezier(.65,0,.2,1) 1.7s forwards} #gate.go .dr{animation:openR 1.8s cubic-bezier(.65,0,.2,1) 1.7s forwards}
#gate.go .dl::after,#gate.go .dr::after{animation:shade 1.8s 1.7s forwards}
#gate.go .cam{animation:push 1.7s cubic-bezier(.7,0,.9,.45) 2.55s forwards}
#gate.go .flash{animation:flash .85s ease-in 3.3s forwards}
@keyframes rot{to{transform:rotate(360deg)}}
@keyframes idle{0%,100%{transform:rotateY(-13deg) translateY(0)}50%{transform:rotateY(13deg) translateY(-2%)}}
@keyframes spin{from{transform:rotateY(-13deg)}to{transform:rotateY(1800deg)}}
@keyframes lift{to{transform:scale(1.22) translateY(-3%)}}
@keyframes fly{from{transform:scale(1.22) translateY(-3%);opacity:1}to{transform:scale(7) translateY(-3%);opacity:0}}
@keyframes seam{to{transform:scaleY(1)}}
@keyframes openL{to{transform:rotateY(97deg)}} @keyframes openR{to{transform:rotateY(-97deg)}}
@keyframes shade{to{opacity:.55}}
@keyframes push{to{transform:scale(5.5)}}
@keyframes flash{to{opacity:1}}
@keyframes pulse{0%{box-shadow:0 0 0 1px rgba(255,255,255,.95) inset,0 0 0 0 rgba(255,255,255,.75)}100%{box-shadow:0 0 0 1px rgba(255,255,255,.95) inset,0 0 0 20px rgba(255,255,255,0)}}

/* ---------- header ---------- */
header.top{position:sticky;top:calc(env(safe-area-inset-top,0px) + 10px);z-index:5;margin-top:10px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:8px 10px 8px 14px;border-radius:26px;background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);border:1px solid #fff;box-shadow:0 0 0 1px rgba(120,160,220,.35),0 18px 40px -22px rgba(30,80,170,.55)}
.brand{display:flex;align-items:center;gap:10px;background:none;border:0;padding:0;color:var(--navy);font:900 .82rem/1.05 var(--display);text-align:left;letter-spacing:.02em;border-radius:12px;box-shadow:none}
.brand:hover{background:none}
.brand small{display:block;font:700 .58rem/1 var(--mono);letter-spacing:.2em;color:var(--azure);margin-bottom:3px}
.spinner{width:30px;height:37px;perspective:300px;flex:0 0 auto;position:relative}
.spinner .stk{animation:rotY 7s linear infinite}
@keyframes rotY{to{transform:rotateY(360deg)}}
nav.tabs{display:flex;gap:2px;overflow-x:auto;margin-left:auto;padding:3px;border-radius:99px;background:rgba(200,220,245,.55)}
.save{font:700 .64rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--soft);padding:8px 10px;white-space:nowrap;display:flex;align-items:center;gap:7px;background:none;border:0;box-shadow:none}
.save:hover{background:none}
.save::before{content:"";width:8px;height:8px;border-radius:50%;background:#35c46b;box-shadow:0 0 0 0 rgba(53,196,107,.6);animation:dot 2.4s infinite}
.save.err{color:var(--bad)} .save.err::before{background:var(--bad)}
@keyframes dot{70%{box-shadow:0 0 0 7px rgba(53,196,107,0)}100%{box-shadow:0 0 0 0 rgba(53,196,107,0)}}
.ticker{overflow:hidden;margin-top:12px;border-block:1px solid rgba(47,111,224,.25);padding:7px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.ticker div{display:flex;gap:28px;width:max-content;animation:tick 38s linear infinite;font:700 .68rem/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--azure);white-space:nowrap}
.ticker i{width:26px;height:8px;border-radius:9px;background:var(--holo);align-self:center}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- controls ---------- */
button{font:800 .92rem/1 var(--body);cursor:pointer;border-radius:99px;padding:13px 20px;border:0;background:var(--navy);color:#fff;position:relative;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.5) inset,0 10px 24px -10px rgba(11,24,54,.7);transition:transform .15s,box-shadow .2s,background .2s}
button::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);transform:translateX(-120%);pointer-events:none}
button:hover{background:#16306b;transform:translateY(-1px)} button:hover::after{transform:translateX(120%);transition:transform .6s}
button.ghost{background:rgba(255,255,255,.85);color:var(--navy);box-shadow:0 0 0 1.5px var(--line) inset,0 6px 16px -10px rgba(30,80,170,.5)} button.ghost:hover{background:#fff;box-shadow:0 0 0 1.5px var(--azure) inset,0 8px 20px -10px rgba(30,80,170,.6)}
button.tab{background:transparent;color:var(--soft);padding:10px 15px;box-shadow:none;flex:0 0 auto;font-size:.86rem}
button.tab:hover{color:var(--navy);transform:none}
button.tab[aria-current=page]{background:var(--navy);color:#fff;box-shadow:0 6px 16px -8px rgba(11,24,54,.8)}
button.mini{padding:8px 13px;font-size:.78rem}
button.link{background:none;color:var(--azure);text-decoration:underline;padding:4px;border-radius:6px;font-weight:700;box-shadow:none;overflow:visible} button.link:hover{background:none;transform:none}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--azure);outline-offset:2px}
label{display:flex;flex-direction:column;gap:6px;font-weight:800;font-size:.9rem;color:var(--navy)}
label .hint{font-weight:500;color:var(--soft);font-size:.84rem}
input[type=text],input[type=email],input[type=datetime-local],textarea,select{font:500 1rem/1.45 var(--body);color:var(--ink);background:rgba(255,255,255,.9);border:1.5px solid var(--line);border-radius:14px;padding:12px 13px;width:100%;transition:border-color .2s,box-shadow .2s}
input[type=text]:focus,input[type=email]:focus,input[type=datetime-local]:focus,textarea:focus,select:focus{border-color:var(--azure);box-shadow:0 0 0 4px rgba(47,111,224,.16),0 0 24px -4px rgba(143,210,245,.9);outline:0}
textarea{resize:vertical;min-height:84px}
label.check{flex-direction:row;align-items:flex-start;gap:10px;font-weight:600}
label.check input,.item>input[type=checkbox]{width:20px;height:20px;margin-top:2px;accent-color:var(--azure);flex:0 0 auto}

/* ---------- surfaces ---------- */
.paper{position:relative;background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(1.35);backdrop-filter:blur(22px) saturate(1.35);border:1px solid #fff;border-radius:28px;padding:24px;box-shadow:0 1px 0 #fff inset,0 0 0 1px rgba(120,160,220,.3),0 30px 60px -34px rgba(30,80,170,.6)}
.paper.plain{background:rgba(255,255,255,.86)}
.paper.plain::before{content:"";position:absolute;left:28px;right:28px;top:-1px;height:3px;border-radius:3px;background:var(--holo)}
.room{position:relative;overflow:hidden;background:linear-gradient(150deg,#081229,#132d66 60%,#1d4fb0);border-radius:28px;padding:24px;color:#d6e4ff;box-shadow:0 0 0 1px rgba(160,200,255,.4) inset,0 30px 60px -30px rgba(11,24,54,.8)}
.room h2,.room h3{color:#fff} .room .mono{color:#9ec4ff}
.room::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(140,180,255,.09) 1px,transparent 1px) 0 0/100% 28px,linear-gradient(90deg,rgba(140,180,255,.09) 1px,transparent 1px) 0 0/28px 100%;-webkit-mask-image:radial-gradient(ellipse at 80% 0,#000,transparent 70%);mask-image:radial-gradient(ellipse at 80% 0,#000,transparent 70%);pointer-events:none}
.room>*{position:relative}
.holo{background:var(--holo);background-size:200% 100%;padding:2px;border-radius:22px;animation:sheen 6s linear infinite;box-shadow:0 14px 34px -18px rgba(150,120,240,.8)}
.holo>div{background:rgba(255,255,255,.94);border-radius:20px;padding:18px}
@keyframes sheen{to{background-position:200% 0}}
.badge{display:inline-flex;align-items:center;gap:6px;font:700 .64rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:7px 10px;border-radius:99px;background:rgba(255,255,255,.9);color:var(--navy);box-shadow:0 0 0 1px var(--line) inset;white-space:nowrap}
.badge.done{background:var(--navy);color:var(--pist);box-shadow:0 0 14px -2px rgba(214,247,160,.9)} .badge.live{background:var(--holo);box-shadow:none} .badge.lock{background:var(--chrome)}
.draft{border:1.5px dashed var(--blue);border-radius:14px;padding:12px 14px;background:rgba(255,255,255,.7);color:var(--soft);font-size:.9rem}

/* ---------- home deck ---------- */
.deck{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:center;margin-top:8px}
.deck .txt{display:flex;flex-direction:column;gap:18px}
.core{position:relative;aspect-ratio:1;max-width:440px;width:100%;margin-inline:auto}
.halo{position:absolute;inset:6%;border-radius:50%;background:conic-gradient(#f7b9df,#bfa9f6,#8fd2f5,#b4f0cb,#fbe9a0,#f7b9df);filter:blur(34px);opacity:.75;animation:rot 14s linear infinite}
.ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ring .tk{fill:none;stroke:rgba(47,111,224,.45);stroke-width:1.6;stroke-dasharray:.35 2.26}
.ring .trk{fill:rgba(255,255,255,.55);stroke:#fff;stroke-width:5}
.ring .arc{fill:none;stroke-width:5;stroke-linecap:round;animation:draw 1.6s cubic-bezier(.3,0,.2,1) .3s both}
@keyframes draw{from{stroke-dashoffset:var(--c)}}
.obj{position:absolute;max-width:none;filter:drop-shadow(0 18px 18px rgba(20,60,140,.28))}
.core .head{height:66%;left:50%;top:50%;margin:-33% 0 0 -20%;transform:translate(calc(var(--px)*-8px),calc(var(--py)*-8px));animation:bob 6s ease-in-out infinite}
.core .f1{height:30%;left:-2%;top:2%;animation:bob 5s ease-in-out -1s infinite;translate:calc(var(--px)*14px) calc(var(--py)*14px)}
.core .f2{height:25%;right:-6%;top:8%;animation:bob 7s ease-in-out -3s infinite;translate:calc(var(--px)*22px) calc(var(--py)*22px)}
.core .f3{height:27%;right:-3%;bottom:1%;animation:bob 6.5s ease-in-out -2s infinite;translate:calc(var(--px)*18px) calc(var(--py)*18px)}
@keyframes bob{50%{margin-top:calc(-33% - 10px)}}
.core .f1,.core .f2,.core .f3{animation-name:bob2} @keyframes bob2{50%{transform:translateY(-12px) rotate(3deg)}}
.readout{position:absolute;left:0;bottom:4%;display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:16px;background:rgba(255,255,255,.85);box-shadow:0 0 0 1px #fff,0 14px 30px -16px rgba(30,80,170,.7)}
.readout b{font:900 1.7rem/1 var(--display);color:var(--navy)}
.rail{display:grid;grid-template-columns:repeat(3,1fr);gap:0;position:relative}
.rail::before{content:"";position:absolute;left:16.6%;right:16.6%;top:13px;height:2px;background:linear-gradient(90deg,var(--azure),var(--line))}
.node{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding-inline:8px;position:relative}
.node i{width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--line);display:grid;place-items:center;font:700 .68rem/1 var(--mono);font-style:normal;color:var(--soft)}
.node.on i{background:var(--navy);color:var(--pist);box-shadow:0 0 0 2px #fff,0 0 0 5px rgba(47,111,224,.35),0 0 26px 4px rgba(143,210,245,.95)}
.node b{font:700 .82rem/1.2 var(--display);color:var(--navy)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.stat{padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.75);box-shadow:0 0 0 1px #fff inset}
.pods{display:grid;grid-template-columns:repeat(auto-fill,minmax(164px,1fr));gap:16px}
.pod{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:18px 14px 20px;border-radius:50% 50% 26px 26px/120px 120px 26px 26px;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(235,244,255,.8));color:var(--ink);font-weight:500;line-height:1.4;overflow:visible;isolation:isolate;box-shadow:0 0 0 1px #fff inset,0 0 0 1px rgba(120,160,220,.35),0 26px 44px -30px rgba(30,80,170,.8);transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.pod::before{content:"";position:absolute;inset:-2px;border-radius:inherit;background:var(--holo);z-index:-2;opacity:0;transition:opacity .3s}
.pod::after{display:none}
.pod:hover{background:linear-gradient(180deg,#fff,#e9f2fe);transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px);box-shadow:0 30px 50px -26px rgba(90,110,230,.9)} .pod:hover::before{opacity:1}
.podimg{height:112px;display:grid;place-items:center;margin-top:10px}
.podimg img{max-height:104px;max-width:128px;filter:drop-shadow(0 12px 10px rgba(20,60,140,.25));transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.pod:hover .podimg img{transform:translateY(-8px) scale(1.09) rotate(-4deg)}
.pod .n{font:700 .86rem/1.2 var(--display);color:var(--navy)} .pod .d{font-size:.82rem;color:var(--soft)}
.pod.is-done .mono{color:var(--good)}
.vault{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.vd{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.vd .mono{font-size:.58rem;letter-spacing:.08em}
.dmini{position:relative;display:block;width:100%;max-width:86px;aspect-ratio:3/4.6;border-radius:50% 50% 6px 6px/32% 32% 6px 6px;overflow:hidden;background:radial-gradient(ellipse at 50% 60%,#fff,#bfe0ff 55%,#6ea5f2);box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(120,160,220,.6);flex:0 0 auto}
.dmini i{position:absolute;top:0;bottom:0;width:50.5%;background:url(assets/door.jpg) 0 0/200% 100%;transition:transform 1s cubic-bezier(.65,0,.2,1)}
.dmini .ml{left:0} .dmini .mr{right:0;background-position:100% 0}
.dmini.open{box-shadow:0 0 0 2px #fff,0 0 22px 4px rgba(160,210,255,.95)} .dmini.open .ml{transform:translateX(-88%)} .dmini.open .mr{transform:translateX(88%)}
.dmini.open::before{content:"";position:absolute;inset:-60%;background:repeating-conic-gradient(from 0deg at 50% 55%,rgba(255,255,255,0) 0 7deg,rgba(255,255,255,.7) 9deg,rgba(191,169,246,.45) 11deg,rgba(143,210,245,0) 15deg);filter:blur(3px);animation:rot 18s linear infinite}
.dmini img{position:absolute;inset:0;margin:auto;width:70%;height:62%;max-width:none;object-fit:contain;filter:drop-shadow(0 6px 7px rgba(20,50,130,.5));animation:bob2 5s ease-in-out infinite}
.pic{border-radius:28px;min-height:340px;background:var(--sky) url(assets/doors.jpg) center 40%/cover;box-shadow:0 0 0 1px #fff,0 30px 60px -30px rgba(30,80,170,.7)}

/* ---------- tools ---------- */
.thead{display:flex;gap:16px;align-items:center;justify-content:space-between}
.thead img{height:120px;filter:drop-shadow(0 16px 14px rgba(20,60,140,.3));animation:bob2 6s ease-in-out infinite;flex:0 0 auto}
.num{font:700 .8rem/1 var(--mono);letter-spacing:.14em;color:var(--azure)}
.clip{display:flex;gap:14px;align-items:center;background:linear-gradient(120deg,#081229,#17367c);color:#fff;border-radius:20px;padding:14px 16px;box-shadow:0 0 0 1px rgba(160,200,255,.4) inset}
.clip .play{flex:0 0 52px;height:52px;border-radius:50%;background:var(--holo);display:grid;place-items:center;box-shadow:0 0 22px rgba(160,200,255,.8)}
.clip .play::after{content:"";border-left:16px solid var(--navy);border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.clip q{font:700 .92rem/1.3 var(--display);quotes:"\201C" "\201D";display:block;margin-block:4px} .clip .small{color:#a9c4f5}
.ask{border-top:1px solid var(--line);padding-top:16px}
.item{display:flex;gap:10px;align-items:flex-start;background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.item input[type=text]{padding:8px 10px} .item .why{font:500 .68rem/1.3 var(--mono);letter-spacing:.04em;color:var(--azure)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:rgba(255,255,255,.9);color:var(--navy);padding:10px 15px;font-weight:700;box-shadow:0 0 0 1.5px var(--line) inset}
.chip:hover{background:#fff} .chip[aria-pressed=true]{background:var(--navy);color:var(--pist);box-shadow:0 0 16px -2px rgba(143,210,245,.9)}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:18px;background:#fff}
table{border-collapse:collapse;width:100%;min-width:560px}
th,td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid #dbe6f5;font-size:.9rem}
th{font:700 .68rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--navy);background:#f1f6fd} tr:last-child td{border-bottom:0}
td.pick{background:#f1fbdc}
.s-ok{color:var(--good);font-weight:800} .s-mid{color:var(--warn);font-weight:800} .s-no{color:var(--bad);font-weight:800}
.sec{border-radius:24px;background:var(--glass);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid #fff;box-shadow:0 0 0 1px rgba(120,160,220,.3),0 20px 40px -30px rgba(30,80,170,.7);overflow:hidden}
.sec>button,.sec.locked>div{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;background:transparent;color:var(--ink);border-radius:0;padding:12px 18px;text-align:left;box-shadow:none}
.sec>button:hover{background:rgba(255,255,255,.6);transform:none}
.sec .dmini{width:58px} .sec .row.nw{flex-wrap:nowrap} .sec .row.nw h3{min-width:0} .sec.locked{opacity:.82} .sec.locked h3{color:var(--soft)}
.sec .body{padding:4px 20px 22px;border-top:1px solid var(--line)}
.offer{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.block h3{margin-bottom:6px;font-size:.85rem} .block p{white-space:pre-wrap}
.empty{color:var(--soft);font-style:italic}
.result{scroll-margin-top:120px}
#scan{position:fixed;inset:0;z-index:40;display:grid;place-items:center;background:rgba(210,228,250,.6);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
#scan .box{display:flex;flex-direction:column;align-items:center;gap:18px;padding:30px 36px;border-radius:28px;background:rgba(255,255,255,.9);box-shadow:0 0 0 1px #fff,0 40px 80px -30px rgba(30,80,170,.8)}
#scan .spinner{width:70px;height:86px} #scan .spinner .stk{animation-duration:1s}
#scan .bar{width:220px;height:6px;border-radius:6px;background:#dbe6f5;overflow:hidden} #scan .bar i{display:block;height:100%;background:var(--holo);animation:fill 1.1s ease-in-out both}
@keyframes fill{from{width:0}to{width:100%}}
.av{width:38px;height:38px;border-radius:50%;flex:0 0 auto;object-fit:cover;background:var(--holo);display:grid;place-items:center;font:700 .8rem/1 var(--display);color:var(--navy);box-shadow:0 0 0 2px #fff}
.post b{color:var(--navy)} .post .item .av{width:30px;height:30px;font-size:.65rem}
button.mini.ghost[aria-pressed=true]{background:var(--navy);color:var(--pist)}
.avbtn{padding:0;background:none;box-shadow:none;border-radius:50%;overflow:visible;flex:0 0 auto} .avbtn:hover{background:none} .avbtn .av{width:36px;height:36px;box-shadow:0 0 0 2px #fff,0 0 0 4px rgba(47,111,224,.35)}
.av.xl{width:112px;height:112px;font-size:2rem;box-shadow:0 0 0 3px #fff,0 0 0 6px rgba(47,111,224,.3),0 0 40px rgba(143,210,245,.9)}
.pick{display:inline-flex;flex-direction:row;align-items:center;cursor:pointer;font:800 .86rem/1 var(--body);padding:12px 18px;border-radius:99px;background:rgba(255,255,255,.9);color:var(--navy);box-shadow:0 0 0 1.5px var(--line) inset}
.pick:hover{box-shadow:0 0 0 1.5px var(--azure) inset} .pick:focus-within{outline:3px solid var(--azure);outline-offset:2px}
#login{position:fixed;inset:0;z-index:44;display:grid;place-items:center;padding:16px;overflow:auto;background:rgba(206,224,248,.55);-webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3)}
#login .card{width:min(100%,440px);display:flex;flex-direction:column;gap:16px;align-items:stretch;text-align:center;padding:30px 26px;border-radius:32px;background:rgba(255,255,255,.88);box-shadow:0 0 0 1px #fff,0 0 0 2px rgba(120,160,220,.3),0 50px 90px -40px rgba(30,80,170,.9)}
#login .spinner{width:64px;height:79px;margin:0 auto} #login label{text-align:left} #login .av.xl{margin:0 auto}
@media (prefers-reduced-motion:no-preference){#login .card{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}}
.cgrid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
.lvl{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:99px;background:var(--holo);font:700 .68rem/1 var(--mono);color:var(--navy);box-shadow:0 0 0 1.5px #fff;vertical-align:middle}
.lvl.big{min-width:54px;height:54px;font:900 1.4rem/1 var(--display);box-shadow:0 0 0 2px #fff,0 0 26px rgba(160,200,255,.9)}
.bar{height:10px;border-radius:99px;background:rgba(255,255,255,.2);overflow:hidden} .bar i{display:block;height:100%;border-radius:99px;background:var(--holo)}
.lb{flex-wrap:nowrap;padding:8px 0;border-bottom:1px solid var(--line)} .lb:last-child{border-bottom:0} .lb .av{width:30px;height:30px;font-size:.65rem}
#win{position:fixed;inset:0;z-index:45;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:16px;background:rgba(214,230,251,.78);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);cursor:pointer}
#win img{height:min(34vh,240px);filter:drop-shadow(0 24px 24px rgba(20,60,140,.35));animation:pop .9s cubic-bezier(.2,1.5,.4,1) both}
#win .burst{position:absolute;left:50%;top:42%;width:220px;height:220px;margin:-110px;border-radius:50%;background:conic-gradient(#f7b9df,#bfa9f6,#8fd2f5,#b4f0cb,#fbe9a0,#f7b9df);-webkit-mask:radial-gradient(closest-side,transparent 88%,#000 90%);mask:radial-gradient(closest-side,transparent 88%,#000 90%);animation:burst 1.4s cubic-bezier(.1,.6,.2,1) both}
#win .b2{animation-delay:.22s} #win .b3{animation-delay:.44s}
#win>*:not(.burst){position:relative}
@keyframes pop{from{transform:scale(0) rotate(-40deg);opacity:0}}
@keyframes burst{from{transform:scale(.2);opacity:1}to{transform:scale(4.5);opacity:0}}
.team{position:fixed;left:0;right:0;bottom:0;z-index:6;background:rgba(8,18,41,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#d6e4ff;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));max-height:60vh;overflow:auto;border-top:1px solid rgba(160,200,255,.4)}
.team h3{color:#fff} .team .mono{color:#9ec4ff}
.team button.ghost{background:transparent;color:#fff;box-shadow:0 0 0 1.5px rgba(160,200,255,.6) inset} .team button.ghost[aria-pressed=true]{background:var(--holo);color:var(--navy);box-shadow:none}
.team .inner{max-width:1100px;margin:0 auto}
@media (max-width:760px){
  .deck{grid-template-columns:1fr} .core{max-width:300px;order:-1}
  .stats,.offer{grid-template-columns:1fr} .paper,.room{padding:18px;border-radius:24px}
  .vault{grid-template-columns:repeat(3,1fr)} nav.tabs{margin-left:0;width:100%;justify-content:space-between} button.tab{padding:9px 10px;font-size:.8rem}
  .cgrid{grid-template-columns:1fr} .thead img{height:84px} .brand{flex:1} .team .wide{display:none}
}
@media (prefers-reduced-motion:no-preference){
  .enter>*{animation:rise .75s cubic-bezier(.2,.7,.2,1) both}
  .enter>*:nth-child(2){animation-delay:.08s}.enter>*:nth-child(3){animation-delay:.16s}.enter>*:nth-child(4){animation-delay:.24s}.enter>*:nth-child(5){animation-delay:.32s}.enter>*:nth-child(n+6){animation-delay:.4s}
  .enter .pod{animation:rise .7s cubic-bezier(.2,.7,.2,1) both} .enter .pod:nth-child(2){animation-delay:.3s}.enter .pod:nth-child(3){animation-delay:.38s}.enter .pod:nth-child(4){animation-delay:.46s}.enter .pod:nth-child(5){animation-delay:.54s}.enter .pod:nth-child(6){animation-delay:.62s}.enter .pod:nth-child(1){animation-delay:.22s}
  .result>*{animation:rise .6s cubic-bezier(.2,.7,.2,1) both} .result>*:nth-child(2){animation-delay:.1s}.result>*:nth-child(3){animation-delay:.2s}.result>*:nth-child(n+4){animation-delay:.3s}
  @keyframes rise{from{opacity:0;transform:translateY(26px);filter:blur(8px)}}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- production additions ---------- */
.wrap{padding-block:0 60px}
#toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:min(92vw,460px)}
#toast div{pointer-events:auto;background:var(--navy);color:#fff;border-radius:16px;padding:12px 16px;font-weight:700;box-shadow:0 0 0 1px rgba(160,200,255,.5),0 18px 40px -16px rgba(11,24,54,.9);animation:rise .4s both}
#toast div.err{background:#5a1410}
.pillars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.pcard{display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:22px;background:rgba(255,255,255,.92);box-shadow:0 0 0 1px #fff inset,0 0 0 1px rgba(120,160,220,.35),0 20px 40px -30px rgba(30,80,170,.8)}
.pcard .ph{display:flex;gap:12px;align-items:center} .pcard .ph img{width:48px;height:56px;object-fit:contain;flex:0 0 auto;filter:drop-shadow(0 6px 6px rgba(20,60,140,.3))}
.starter{background:linear-gradient(120deg,#081229,#17367c);color:#e6efff;border-radius:14px;padding:12px 14px;font-weight:600;line-height:1.45}
.lockbox{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:26px 18px}
.lockbox img{height:150px;filter:drop-shadow(0 18px 18px rgba(20,60,140,.35))}
.lockbox.shut img{filter:drop-shadow(0 18px 18px rgba(20,60,140,.35)) saturate(.6) brightness(.95)}
.code{font:900 clamp(1.6rem,7vw,2.6rem)/1 var(--display);letter-spacing:.08em;color:var(--navy);padding:16px 22px;border-radius:18px;background:#fff;box-shadow:0 0 0 2px #fff,0 0 0 5px rgba(160,200,255,.7),0 0 40px rgba(143,210,245,.9);user-select:all}
@media (prefers-reduced-motion:no-preference){.lockbox.reveal .code{animation:pop .9s cubic-bezier(.2,1.5,.4,1) both}}
.vid{position:relative;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#081229}
.vid iframe,.vid video{position:absolute;inset:0;width:100%;height:100%;border:0}
.console .row.sp{justify-content:space-between}
.ctable{width:100%;min-width:520px}
.seg{display:inline-flex;gap:4px;padding:4px;border-radius:99px;background:rgba(200,220,245,.6)}
.seg button{padding:9px 14px;font-size:.82rem;background:transparent;color:var(--navy);box-shadow:none}
.seg button[aria-pressed=true]{background:var(--navy);color:var(--pist)}
.pill{display:inline-flex;align-items:center;gap:6px;font:700 .64rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:6px 9px;border-radius:99px}
.pill.on{background:#e5f8d0;color:var(--good)} .pill.off{background:#fde3df;color:var(--bad)} .pill.wait{background:#fff1d6;color:var(--warn)}
.muted{opacity:.6}
.center{text-align:center;align-items:center}
.otp{letter-spacing:.4em;text-align:center;font:700 1.3rem/1 var(--mono)!important}
.cdown{font:700 .7rem/1 var(--mono);color:var(--soft)}
@media (max-width:760px){.pillars{grid-template-columns:1fr}}

.crow .dmini{width:44px}
.vault{grid-template-columns:repeat(auto-fit,minmax(64px,1fr))}