/* ===== THEME TOKENS (^-^ edit default colors here) ===== */
:root{--a:#6366f1;--b:#ec4899;--bg:#f5f6fb;--fg:#0f172a;--mut:#475569;--card:rgba(255,255,255,.72);--bd:rgba(15,23,42,.12)}
html.dark{--bg:#070a14;--fg:#f1f5f9;--mut:#aab4c8;--card:rgba(18,24,44,.62);--bd:rgba(255,255,255,.15)}

body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;background:var(--bg);color:var(--fg);min-height:100vh;overflow-x:hidden}
body::before,body::after{content:"";position:fixed;z-index:-2;width:70vmax;height:70vmax;border-radius:50%;background:radial-gradient(circle,var(--a),transparent 62%);opacity:.2;top:-25vmax;left:-25vmax;animation:drift 22s ease-in-out infinite alternate;will-change:transform;pointer-events:none}
body::after{background:radial-gradient(circle,var(--b),transparent 62%);top:auto;left:auto;bottom:-28vmax;right:-28vmax;animation-delay:-11s}
@keyframes drift{to{transform:translate(8vmax,6vmax) scale(1.15)}}
h1,h2,h3,.brand{font-family:'Space Grotesk',sans-serif;letter-spacing:-.02em}
#pc{position:fixed;inset:0;z-index:-1;pointer-events:none}
#pg{position:fixed;top:0;left:0;right:0;height:3px;z-index:80;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--a),var(--b))}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;z-index:99;background:#fff;color:#000;padding:.5rem 1rem;border-radius:.5rem}
:focus-visible{outline:3px solid var(--a);outline-offset:3px}
#hd{position:sticky;top:0;z-index:60;border-bottom:1px solid var(--bd);background:var(--card);transition:box-shadow .3s}
#hd.sc{box-shadow:0 10px 30px -15px rgba(0,0,0,.4)}


html:not(.glass) #hd,html:not(.glass) .card,html:not(.glass) #dr,html:not(.glass) .wg,html:not(.glass) footer{background:var(--bg)}
.brand{font-weight:800;font-size:1.15rem;display:flex;gap:.5rem;align-items:center}
nav a{padding:.45rem .8rem;border-radius:999px;font-size:.88rem;font-weight:600;color:var(--mut);transition:.25s}
nav a:hover,nav a[aria-current]{color:var(--fg);background:linear-gradient(135deg,color-mix(in srgb,var(--a) 22%,transparent),color-mix(in srgb,var(--b) 22%,transparent))}
footer{margin-top:6rem;border-top:1px solid var(--bd);background:var(--card)}
.card{background:var(--card);border:1px solid var(--bd);border-radius:1.25rem;padding:1.4rem;transition:box-shadow .3s,border-color .3s}
.card:hover{border-color:var(--a);box-shadow:0 18px 40px -22px var(--a)}
.grad{background:linear-gradient(120deg,var(--a),var(--b));-webkit-background-clip:text;background-clip:text;color:transparent}
.btn,.btn2{display:inline-flex;align-items:center;gap:.5rem;justify-content:center;padding:.75rem 1.4rem;border-radius:999px;font-weight:700;cursor:pointer;transition:.3s;border:1px solid transparent}
.btn{color:#fff;background:linear-gradient(120deg,var(--a),var(--b));background-size:160% 100%}
.btn:hover{background-position:100% 0;transform:translateY(-2px)}
.btn2{border-color:var(--bd);background:var(--card);color:var(--fg)}.btn2:hover{border-color:var(--a);transform:translateY(-2px)}
.btn.sm,.btn2.sm{padding:.45rem 1rem;font-size:.85rem}
.ib{width:2.4rem;height:2.4rem;border-radius:50%;border:1px solid var(--bd);background:var(--card);cursor:pointer;transition:.25s}.ib:hover{transform:rotate(15deg) scale(1.1)}
.chip{display:inline-flex;gap:.4rem;padding:.35rem .9rem;border-radius:999px;border:1px solid var(--bd);background:var(--card);font-size:.85rem;font-weight:600}
.in{width:100%;padding:.65rem .9rem;border-radius:.8rem;border:1px solid var(--bd);background:var(--card);color:var(--fg);margin-top:.25rem}
.lb{font-size:.8rem;font-weight:700;color:var(--mut);display:block}.mut{color:var(--mut)}
.avatar{position:relative;overflow:hidden;width:min(100%,260px);margin-inline:auto;aspect-ratio:1;border-radius:50%;padding:6px;display:grid;place-items:center}.avatar.lg{width:min(70vw,340px)}
.avatar::before{content:"";position:absolute;inset:-25%;background:conic-gradient(from 0deg,var(--a),var(--b),var(--a));animation:spin 8s linear infinite}
.avatar>div{position:relative;z-index:1;width:100%;height:100%;border-radius:50%;background:var(--bg);display:grid;place-items:center;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
@keyframes spin{to{transform:rotate(360deg)}}
.float{animation:float 5s ease-in-out infinite}@keyframes float{50%{transform:translateY(-14px)}}
.caret{animation:blink 1s steps(2) infinite}@keyframes blink{50%{opacity:0}}
.bar{height:.6rem;border-radius:99px;background:var(--bd);overflow:hidden}.bar>i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--a),var(--b));transition:width 1.3s cubic-bezier(.2,.8,.2,1)}.shown .bar>i{width:var(--w)}
.tl{border-left:2px solid var(--bd);padding-left:1.4rem;display:grid;gap:1.4rem}.tl>article{position:relative}.tl>article::before{content:"";position:absolute;left:-1.95rem;top:1.5rem;width:.8rem;height:.8rem;border-radius:50%;background:linear-gradient(135deg,var(--a),var(--b))}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s,transform .7s}.reveal.shown{opacity:1;transform:none}.reveal.shown.tilt{transition:transform .2s,box-shadow .3s,border-color .3s}
html.neon .btn,html.neon .avatar,html.neon .card:hover{box-shadow:0 0 14px var(--a),0 0 38px var(--b)}
html.neon .grad{filter:drop-shadow(0 0 10px var(--a))}html.neon nav a[aria-current]{box-shadow:0 0 14px var(--a)}
#ov{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:.3s;z-index:90}#ov.open{opacity:1;pointer-events:auto}
#dr{position:fixed;top:0;right:0;bottom:0;width:min(92vw,400px);z-index:100;padding:1.2rem;overflow-y:auto;transform:translateX(105%);transition:transform .4s cubic-bezier(.2,.8,.2,1);border-left:1px solid var(--bd);background:var(--card)}#dr.open{transform:none}
#dr details{border:1px solid var(--bd);border-radius:1rem;margin-bottom:.7rem}#dr summary{padding:.8rem 1rem;font-weight:700;cursor:pointer}
.row{display:flex;justify-content:space-between;align-items:center}
.tg{width:3rem;height:1.6rem;border-radius:99px;background:var(--bd);position:relative;cursor:pointer;transition:.3s}.tg::after{content:"";position:absolute;top:3px;left:3px;width:1.1rem;height:1.1rem;border-radius:50%;background:#fff;transition:.3s}.tg[aria-checked=true]{background:linear-gradient(90deg,var(--a),var(--b))}.tg[aria-checked=true]::after{left:calc(100% - 1.1rem - 3px)}
.sw{width:2rem;height:2rem;border-radius:50%;border:2px solid var(--bd);cursor:pointer;transition:.2s}.sw:hover,.sw.on{transform:scale(1.2);border-color:var(--fg)}
#dr ul{padding:0 1rem 1rem;font-size:.85rem;display:grid;gap:.3rem}
.vbars{display:flex;align-items:flex-end;gap:.4rem;height:110px;padding:0 1rem 1rem}.vbars div{flex:1;text-align:center;font-size:.65rem}.vbars i{display:block;border-radius:6px 6px 0 0;background:linear-gradient(var(--a),var(--b));min-height:3px}
#top{position:fixed;right:1rem;bottom:4.8rem;z-index:50}
#toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:1.2rem;z-index:120;display:grid;gap:.5rem}.toast{background:#111827;color:#fff;padding:.7rem 1.2rem;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.4);animation:up .4s}@keyframes up{from{opacity:0;transform:translateY(20px)}}
#sk{position:fixed;inset:0;z-index:200;background:var(--bg);padding:5rem 1.5rem;display:grid;gap:1.2rem;align-content:start;transition:opacity .35s;animation:skout .3s 4s forwards}#sk.off{opacity:0;pointer-events:none}@keyframes skout{to{opacity:0;visibility:hidden}}
#sk i{height:2.4rem;border-radius:1rem;background:linear-gradient(90deg,var(--bd) 25%,color-mix(in srgb,var(--a) 25%,transparent) 50%,var(--bd) 75%);background-size:200% 100%;animation:sh 1.2s infinite}#sk i:nth-child(1){width:60%;height:4rem}#sk i:nth-child(3){height:10rem}@keyframes sh{to{background-position:-200% 0}}
#cur{position:fixed;left:0;top:0;z-index:300;pointer-events:none;display:none;will-change:transform}
@media(pointer:fine){html:not([data-cur="0"]) *{cursor:none!important}html:not([data-cur="0"]) #cur{display:block}}
html[data-cur="1"] #cur::before{content:"";position:absolute;width:8px;height:8px;margin:-4px;border-radius:50%;background:var(--a)}html[data-cur="1"] #cur::after{content:"";position:absolute;width:34px;height:34px;margin:-17px;border-radius:50%;border:2px solid var(--b)}
html[data-cur="2"] #cur::before{content:"";position:absolute;width:46px;height:46px;margin:-23px;border-radius:50%;background:radial-gradient(var(--a),transparent 70%)}
html[data-cur="3"] #cur::before{content:"🚀";position:absolute;font-size:24px;margin:-12px}
html[data-cur="4"] #cur::before{content:"";position:absolute;width:26px;height:2px;margin:-1px -13px;background:var(--a)}html[data-cur="4"] #cur::after{content:"";position:absolute;width:2px;height:26px;margin:-13px -1px;background:var(--b)}
.mg{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;max-width:360px}.mc{aspect-ratio:1;border-radius:1rem;font-size:1.8rem;background:linear-gradient(135deg,var(--a),var(--b));color:#fff;cursor:pointer}.mc.up{background:var(--card);color:var(--fg);border:1px solid var(--bd)}
.rx{width:100%;height:12rem;border-radius:1.2rem;font-weight:800;font-size:1.3rem;color:#fff;background:linear-gradient(135deg,var(--a),var(--b))}.rx.wait{background:#dc2626}.rx.go{background:#16a34a}
canvas.sn{width:100%;max-width:360px;aspect-ratio:1;border-radius:1rem;border:1px solid var(--bd);background:rgba(0,0,0,.25);touch-action:none}
@media(prefers-reduced-motion:reduce){*,::before,::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
/* profile avatar click, date widget, Robot AI chat */
.avatar{cursor:pointer}
.cal{display:flex;gap:.8rem;align-items:center}
.tile{width:4.4rem;flex:none;border-radius:.9rem;overflow:hidden;border:1px solid var(--bd);text-align:center;background:var(--card)}
.tile .m{background:linear-gradient(135deg,var(--a),var(--b));color:#fff;font-size:.7rem;font-weight:800;letter-spacing:.08em;padding:.22rem 0;text-transform:uppercase}
.tile .d{font:700 2rem/1.25 'Space Grotesk',sans-serif}.tile .y{font-size:.72rem;color:var(--mut);padding-bottom:.3rem}
#rbBtn{position:fixed;right:1rem;bottom:1rem;z-index:55;box-shadow:0 10px 30px -10px var(--a)}
#rbo{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;place-items:center;padding:1rem;z-index:150}#rbo.open{display:grid}
#rbp{width:min(100%,480px);height:min(78vh,640px);display:flex;flex-direction:column;border-radius:1.5rem;border:1px solid var(--bd);background:var(--bg);overflow:hidden;box-shadow:0 30px 80px -20px rgba(0,0,0,.6);animation:pop .3s}
@keyframes pop{from{opacity:0;transform:scale(.92) translateY(20px)}}
#rbh{padding:.9rem 1rem;background:linear-gradient(120deg,var(--a),var(--b));color:#fff;display:flex;justify-content:space-between;align-items:center}
#rbm{flex:1;overflow-y:auto;padding:1rem;display:grid;gap:.6rem;align-content:start}
.bm{max-width:88%;padding:.6rem .9rem;border-radius:1rem;font-size:.92rem;line-height:1.55}
.bm.bot{background:var(--card);border:1px solid var(--bd);justify-self:start}.bm.me{justify-self:end;color:#fff;background:linear-gradient(120deg,var(--a),var(--b))}
.dots i{display:inline-block;width:.45rem;height:.45rem;margin:0 .12rem;border-radius:50%;background:var(--mut);animation:blink 1s infinite}.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}
#rbc{display:flex;gap:.4rem;overflow-x:auto;padding:.5rem 1rem}
#rbf{display:flex;gap:.5rem;padding:.7rem 1rem;border-top:1px solid var(--bd);align-items:center}

/* v4: widgets on every page, translation chrome, CAD, tic-tac-toe */
#wgs{position:fixed;left:.7rem;bottom:.7rem;z-index:50;display:flex;flex-direction:column;gap:.5rem;align-items:flex-start}
.wg{padding:.6rem .85rem;border-radius:1rem;border:1px solid var(--bd);background:var(--card)}
.wg b{font:700 1.35rem 'Space Grotesk',sans-serif;font-variant-numeric:tabular-nums}
@media(max-width:767px){#wgs{flex-direction:row;align-items:flex-end;gap:.4rem}.wg{padding:.4rem .5rem}.wg .cl,.wg .bar,.wg .vs{display:none}.wg b{font-size:.95rem}.tile{width:3rem}.tile .d{font-size:1.3rem}.tile .m,.tile .y{font-size:.6rem}.wg .text-3xl{font-size:1.2rem}}
footer{padding-bottom:5rem}nav a{padding:.4rem .65rem;font-size:.85rem}
body{top:0!important}iframe.skiptranslate,.goog-te-banner-frame{display:none!important}#goog-gt-tt,.goog-tooltip{display:none!important}.goog-text-highlight{background:none!important;box-shadow:none!important}
.chip.on,.btn2.on{background:linear-gradient(120deg,var(--a),var(--b));color:#fff;border-color:transparent}
.bm ul{list-style:disc;padding-left:1.2rem}.bm ol{list-style:decimal;padding-left:1.2rem}
#cv{width:100%;aspect-ratio:4/3;min-height:300px;border-radius:1rem;background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--a) 20%,transparent),transparent 70%);touch-action:none;cursor:grab;overflow:hidden}#cv canvas{display:block;width:100%;height:100%}
.ttt{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;max-width:300px}.tc{aspect-ratio:1;border-radius:1rem;border:1px solid var(--bd);background:var(--card);font:800 2.4rem 'Space Grotesk',sans-serif;color:var(--a);cursor:pointer;transition:transform .2s}.tc:hover{transform:scale(1.05)}.tc.o{color:var(--b)}.tc.w{background:linear-gradient(135deg,var(--a),var(--b));color:#fff}

#wgs{pointer-events:none}@media(max-width:767px){#wgs{opacity:.95}}
.grid>*,.flex>*{min-width:0}dd,dt,.card{overflow-wrap:anywhere}
@media(max-width:767px){#rbBtn{bottom:calc(var(--wh,5.5rem) + 1.3rem)}#top{bottom:calc(var(--wh,5.5rem) + 5.2rem)}}
.chip{flex:none}
#sv{width:100%;aspect-ratio:4/3;min-height:300px;border-radius:1rem;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--b) 18%,transparent),transparent 70%);touch-action:none;overflow:hidden}#sv canvas{display:block;width:100%;height:100%}
.rg{width:100%;height:1.6rem;accent-color:var(--a);cursor:pointer}

/* ===== v7 ===== */
/* header: single-line navigation */
.hin{max-width:1480px;margin:0 auto;padding:0 1rem;height:4rem;display:flex;align-items:center;gap:1rem}
.brand{white-space:nowrap;flex:none}.hc{display:flex;align-items:center;gap:.5rem;flex:none}.hc .btn{white-space:nowrap}
#hd nav.hnav{display:none;flex:1;min-width:0;justify-content:center;gap:.1rem;overflow:hidden}
@media(min-width:1024px){#hd nav.hnav{display:flex}}#hd.nonav nav.hnav{display:none}
nav a{white-space:nowrap;flex:none;padding:.4rem .6rem;font-size:.84rem}
.btn,.btn2,.chip,.opt{white-space:nowrap}.opt{white-space:normal}
/* glassmorphism variants */
html.glass{--gb:12px;--gs:1.15;--gbg:var(--card);--gbd:var(--bd);--gsh:none;--gr:1.25rem}
html.glass[data-gv=crystal]{--gb:22px;--gs:1.7;--gbg:rgba(255,255,255,.07);--gbd:rgba(255,255,255,.28);--gsh:inset 0 1px 0 rgba(255,255,255,.35),0 10px 34px -14px rgba(0,0,0,.5)}
html.glass:not(.dark)[data-gv=crystal]{--gbg:rgba(255,255,255,.5);--gbd:rgba(255,255,255,.95);--gsh:inset 0 1px 0 #fff,0 10px 34px -14px rgba(60,60,120,.35)}
html.glass[data-gv=aurora]{--gb:16px;--gs:1.4;--gbg:linear-gradient(135deg,color-mix(in srgb,var(--a) 22%,transparent),color-mix(in srgb,var(--b) 14%,transparent));--gbd:color-mix(in srgb,var(--a) 45%,transparent);--gsh:0 8px 28px -14px var(--a)}
html.glass[data-gv=liquid]{--gb:30px;--gs:2.1;--gbg:rgba(255,255,255,.06);--gbd:rgba(255,255,255,.22);--gsh:inset 0 0 22px rgba(255,255,255,.07),0 14px 40px -18px rgba(0,0,0,.5);--gr:1.9rem}
html.glass:not(.dark)[data-gv=liquid]{--gbg:rgba(255,255,255,.42);--gbd:rgba(255,255,255,.85);--gsh:inset 0 0 22px rgba(255,255,255,.6),0 14px 40px -18px rgba(80,80,160,.35)}
html.glass #hd,html.glass #dr,html.glass .wg,html.glass footer{backdrop-filter:blur(var(--gb)) saturate(var(--gs));-webkit-backdrop-filter:blur(var(--gb)) saturate(var(--gs));background:var(--gbg);border-color:var(--gbd);box-shadow:var(--gsh)}
html.glass .card{background:var(--gbg);border-color:var(--gbd);box-shadow:var(--gsh);border-radius:var(--gr)}
@media(min-width:768px){html.glass .card{backdrop-filter:blur(var(--gb)) saturate(var(--gs));-webkit-backdrop-filter:blur(var(--gb)) saturate(var(--gs))}}
/* cursor trails */
#ct{position:fixed;inset:0;z-index:299;pointer-events:none;display:none}html[data-cur="5"] #ct,html[data-cur="6"] #ct{display:block}@media(pointer:coarse){#ct{display:none!important}}
html[data-cur="5"] #cur::before{content:"";position:absolute;width:10px;height:10px;margin:-5px;border-radius:50%;background:#fff;box-shadow:0 0 14px 5px var(--a)}
html[data-cur="6"] #cur::before{content:"";position:absolute;width:18px;height:18px;margin:-9px;border-radius:50%;border:2px solid var(--b);box-shadow:0 0 12px var(--b)}
/* skills + lists */
.sk .bar{height:.7rem}.ib.s{width:1.9rem;height:1.9rem;font-size:.8rem;flex:none}
/* Control Center v2 */
#dr{padding:0;display:flex;flex-direction:column;width:min(94vw,430px)}
.dh{display:flex;justify-content:space-between;align-items:center;padding:1.1rem 1.2rem .5rem}.dh h2{font-size:1.35rem;font-weight:800}
.acct{display:flex;align-items:center;gap:.8rem;margin:.5rem 1.2rem .9rem;padding:.85rem;border-radius:1.1rem;border:1px solid var(--bd);background:linear-gradient(135deg,color-mix(in srgb,var(--a) 14%,transparent),color-mix(in srgb,var(--b) 10%,transparent))}
.av{width:2.8rem;height:2.8rem;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--a),var(--b));flex:none}
.dtabs{display:grid;grid-template-columns:repeat(4,1fr);gap:.3rem;margin:0 1.2rem;padding:.3rem;border-radius:1rem;background:color-mix(in srgb,var(--fg) 8%,transparent)}
.dtabs button{border-radius:.75rem;padding:.5rem .2rem;font-size:.7rem;font-weight:700;display:grid;gap:.15rem;justify-items:center;color:var(--mut);transition:.2s}
.dtabs button.on{background:var(--bg);color:var(--fg);box-shadow:0 4px 14px -6px rgba(0,0,0,.45)}
.dbody{flex:1;overflow-y:auto;padding:.4rem 1.2rem 2.5rem}
.dp h4{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mut);margin:1.3rem 0 .6rem;font-weight:800}
.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(5.4rem,1fr));gap:.5rem}
.opt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;padding:.7rem .3rem;border-radius:.95rem;border:1px solid var(--bd);background:var(--card);font-size:.74rem;font-weight:600;text-align:center;transition:.2s;min-height:3.8rem}
.opt:hover{transform:translateY(-2px);border-color:var(--a)}.opt.on{border-color:transparent;color:#fff;background:linear-gradient(135deg,var(--a),var(--b));box-shadow:0 8px 20px -10px var(--a)}
.oi{font-size:1.25rem;line-height:1}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-top:.8rem}
.tt{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.8rem .3rem;border-radius:1rem;border:1px solid var(--bd);background:var(--card);font-size:.78rem;font-weight:700;transition:.2s}
.tt small{font-weight:600;color:var(--mut);font-size:.66rem}.tt[aria-checked=true]{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--a),var(--b));box-shadow:0 10px 24px -12px var(--a)}.tt[aria-checked=true] small{color:rgba(255,255,255,.85)}
.tt::after{content:"OFF";font-size:.62rem;font-weight:800;opacity:.7}.tt[aria-checked=true]::after{content:"ON"}
.swg{display:grid;grid-template-columns:repeat(auto-fill,minmax(3.4rem,1fr));gap:.6rem}
.swg .sw{width:100%;height:auto;aspect-ratio:1;border-radius:.9rem;border:2px solid transparent;position:relative}.swg .sw.on{border-color:var(--fg);transform:scale(1.06)}.swg .sw.on::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-weight:800;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.dcard{border:1px solid var(--bd);border-radius:1rem;background:var(--card);padding:.9rem;margin-top:.7rem}.dcard summary{font-weight:700;cursor:pointer}
.vcw iframe{width:100%;height:150px;border:0;border-radius:.8rem;background:transparent}
#dr .dcard ul{padding:0;margin:0}

/* ===== WebGL simulation lab ===== */
.simv{position:relative;width:100%;aspect-ratio:16/10;min-height:320px;border-radius:1rem;overflow:hidden;background:radial-gradient(circle at 50% 30%,#1c2350,#070a14 78%);touch-action:none;cursor:grab}.simv canvas{display:block;width:100%;height:100%}
.zb{position:absolute;right:.7rem;top:.7rem;display:flex;gap:.4rem;z-index:2}.zb button{width:2.1rem;height:2.1rem;border-radius:.65rem;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.25);font-weight:800;backdrop-filter:blur(6px)}.zb button:hover{background:rgba(255,255,255,.25)}
.simh{position:absolute;left:.8rem;bottom:.7rem;font-size:.7rem;color:rgba(255,255,255,.6);pointer-events:none}
.kgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem}.kp{border:1px solid var(--bd);border-radius:.9rem;padding:.7rem .85rem;background:color-mix(in srgb,var(--fg) 4%,transparent)}
.kp small{display:block;color:var(--mut);font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.15rem}.kp b{font:700 1.35rem 'Space Grotesk',sans-serif;font-variant-numeric:tabular-nums}
.gph{width:100%;height:68px;display:block;border-radius:.7rem;background:#0b1020;border:1px solid var(--bd);margin-top:.4rem}
.stt{padding:.28rem .75rem;border-radius:99px;font-size:.7rem;font-weight:800;letter-spacing:.07em;color:#fff;background:#2563eb;white-space:nowrap}
.slog{max-height:8rem;overflow:auto;font:.7rem/1.55 ui-monospace,Consolas,monospace;background:#0b1020;color:#9fb4d8;border-radius:.7rem;padding:.65rem .75rem;border:1px solid var(--bd)}
.trq{display:grid;grid-template-columns:3rem 1fr 1fr;gap:.55rem .8rem;align-items:center;font-size:.76rem;margin-top:.5rem}.trq .bar{height:.45rem;margin-top:.2rem}.trq small{font-size:.62rem}

/* ===== v9: loader, splash, blobs, transitions, parallax album, music widget, live 3D hero ===== */
#sk{display:none!important}
/* ^-^ PAGE TRANSITIONS (no loading screen any more): when you change page, a plain curtain in the page colour wipes / slides / pushes / dissolves over it (js/app.js, search "PAGE TRANSITIONS").
   Only transform + opacity are animated, so it stays smooth. The new page shows skeleton placeholders while its data loads. */
#ld{position:fixed;inset:0;z-index:500;overflow:hidden;visibility:hidden;pointer-events:none}
.ld-w{position:absolute;inset:0;background:var(--bg)}
html.arrive #ld,#ld.go{visibility:visible;pointer-events:auto}
html.arrive #ld{animation:ldfail .3s 3s forwards}
#ld.go{will-change:transform,opacity}#ld.go[data-fx=wipe] .ld-w{will-change:transform}
/* while the curtain moves, glass blur is paused (it is the most expensive effect to redraw) and comes back right after = no lag */
html.ldm :not(#ld):not(#ld *){-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
@keyframes ldr{to{stroke-dashoffset:0}}@keyframes ldp{50%{opacity:.55;transform:scale(.94)}}@keyframes ldfail{to{opacity:0;visibility:hidden}}
/* blurry blobs that follow the cursor */
#blobs{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
#blobs i{position:absolute;left:0;top:0;border-radius:50%;will-change:transform;opacity:.34;background:radial-gradient(circle,var(--a) 0,transparent 68%);transform:translate3d(50vw,50vh,0)}
#blobs i:nth-child(1){width:46vmax;height:46vmax;margin:-23vmax 0 0 -23vmax}#blobs i:nth-child(2){width:34vmax;height:34vmax;margin:-17vmax 0 0 -17vmax;opacity:.3;background:radial-gradient(circle,var(--b) 0,transparent 68%)}#blobs i:nth-child(3){width:22vmax;height:22vmax;margin:-11vmax 0 0 -11vmax;opacity:.42}
html.dark #blobs i{mix-blend-mode:screen}html.noblob #blobs{display:none}
/* component transitions */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .9s cubic-bezier(.2,.7,.2,1) var(--d,0s),filter .8s ease var(--d,0s);will-change:transform,opacity}
.reveal[data-a=left]{transform:translateX(-54px)}.reveal[data-a=right]{transform:translateX(54px)}.reveal[data-a=zoom]{transform:scale(.88)}
.reveal[data-a=pop]{transform:scale(.6) translateY(18px);transition-timing-function:cubic-bezier(.34,1.56,.64,1)}
.reveal[data-a=blur]{transform:translateY(24px);filter:blur(14px)}.reveal[data-a=flip]{transform:perspective(900px) rotateX(-16deg) translateY(34px);transform-origin:50% 0}
.reveal[data-a=skew]{transform:translateX(-30px) skewX(-6deg)}
.reveal.shown{opacity:1;transform:none;filter:none}.reveal.shown.done{will-change:auto;transition:box-shadow .3s,border-color .3s,transform .22s}
.tilt{transition:transform .2s,box-shadow .3s,border-color .3s}
/* album hover: parallax for videos; photos use the layered dolly zoom + bokeh below (v10) */
.pl .pt{--px:0;--py:0;--fx:50%;--fy:50%;--dz:0;transform:perspective(900px) rotateX(calc(var(--py)*-5deg)) rotateY(calc(var(--px)*6deg));transform-style:preserve-3d}
.pl.on .pt{will-change:transform}
.pl .pw{overflow:hidden;border-radius:.9rem;transform:translateZ(22px);box-shadow:0 16px 34px -20px rgba(0,0,0,.6)}
.pl .pw:not(.dz)>*{display:block;transform:translate3d(calc(var(--px)*-14px),calc(var(--py)*-12px),0) scale(1.1)}
.pl .cap{transform:translate3d(calc(var(--px)*10px),calc(var(--py)*8px),38px)}
/* live 3D hero */
.hero3d{position:relative;width:min(100%,25rem);aspect-ratio:4/5;margin-inline:auto}
.h3-stage{position:absolute;inset:0;border-radius:1.8rem;overflow:hidden;background:radial-gradient(circle at 50% 30%,#12307a 0,#08183b 62%,#050d24 100%);box-shadow:0 30px 70px -28px var(--a),0 0 0 1px rgba(255,255,255,.14),inset 0 0 60px rgba(124,140,255,.12);cursor:pointer}
.h3-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.h3-fb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .8s;transform:translate3d(calc(var(--tx,0)*-12px),calc(var(--ty,0)*-9px),0) scale(1.05)}.h3-fb.off{opacity:0;pointer-events:none}
.h3-bub{position:absolute;left:50%;top:.9rem;max-width:88%;padding:.6rem .95rem;border-radius:1rem;background:rgba(255,255,255,.96);color:#0b1020;font-weight:600;font-size:.86rem;line-height:1.35;text-align:center;opacity:0;pointer-events:none;transform:translate(-50%,-8px) scale(.9);transition:opacity .3s,transform .4s cubic-bezier(.34,1.56,.64,1);z-index:3;box-shadow:0 12px 30px -10px rgba(0,0,0,.6)}
.h3-bub::after{content:"";position:absolute;left:50%;bottom:-6px;width:13px;height:13px;background:inherit;transform:translateX(-50%) rotate(45deg)}.h3-bub.show{opacity:1;transform:translate(-50%,0) scale(1)}
.h3-hint{position:absolute;right:.9rem;bottom:.8rem;font-size:.7rem;color:rgba(255,255,255,.75);background:rgba(0,0,0,.4);padding:.28rem .65rem;border-radius:99px;z-index:2;pointer-events:none}
.hero3d>.chip{z-index:4;position:absolute}
/* Spotify-style music widget */
#wgs .mw{pointer-events:auto}
.mw{width:15.5rem;padding:.55rem .65rem;border-radius:1rem;background:#161618;color:#fff;border:1px solid rgba(255,255,255,.1);box-shadow:0 14px 34px -14px rgba(0,0,0,.65);overflow:hidden}
.mw button{color:inherit}.mw-top{display:flex;align-items:center;gap:.6rem}
.mw-art{position:relative;width:2.7rem;height:2.7rem;border-radius:.55rem;overflow:hidden;flex:none;background:linear-gradient(135deg,var(--a),var(--b))}.mw-art img{width:100%;height:100%;object-fit:cover;display:block}
.eq{position:absolute;inset:0;display:none;gap:2px;justify-content:center;align-items:flex-end;background:rgba(0,0,0,.4);padding-bottom:.45rem}.mw.playing .eq{display:flex}.eq i{width:3px;background:#fff;border-radius:2px;height:25%;animation:eqb .9s ease-in-out infinite}.eq i:nth-child(2){animation-delay:-.3s}.eq i:nth-child(3){animation-delay:-.6s}@keyframes eqb{50%{height:70%}}
.mw-meta{flex:1;min-width:0;text-align:left;display:grid}.mw-t,.mw-t2{font-weight:700;font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.mw-a,.mw-a2{font-size:.7rem;color:#a7a7ad;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.mw-pp{width:2.3rem;height:2.3rem;border-radius:50%;flex:none;background:#fff;color:#000!important;padding:.5rem;transition:transform .2s}.mw-pp:hover{transform:scale(1.08)}.mw.blocked .mw-pp{animation:mwp 1.3s infinite;background:linear-gradient(135deg,var(--a),var(--b));color:#fff!important}
@keyframes mwp{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--a) 70%,transparent)}100%{box-shadow:0 0 0 12px transparent}}
.mw-prog{height:3px;border-radius:3px;background:rgba(255,255,255,.14);margin-top:.5rem;overflow:hidden}.mw-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--a),var(--b));transition:width .5s linear}
.mw-more{display:none;margin-top:.6rem}
.mw[data-open="1"]{position:fixed;left:.7rem;bottom:.7rem;width:19.5rem;max-height:calc(100vh - 1.4rem);overflow-y:auto;z-index:70;padding:.8rem;animation:mwo .4s cubic-bezier(.2,.8,.2,1)}
.mw[data-open="1"] .mw-more{display:block}.mw[data-open="1"] .mw-prog{display:none}@keyframes mwo{from{opacity:.4;transform:translateY(16px) scale(.96)}}
html.mwopen #rbBtn,html.mwopen #top{opacity:0;pointer-events:none}
.mw-hd{display:flex;justify-content:space-between;align-items:center;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#a7a7ad;margin-bottom:.5rem}.mw-x{width:1.9rem;height:1.9rem;padding:.2rem}
.mw-big{border-radius:.8rem;overflow:hidden;aspect-ratio:16/9;background:linear-gradient(135deg,var(--a),var(--b));box-shadow:0 12px 30px -14px #000}.mw-big img{width:100%;height:100%;object-fit:cover;display:block}
.mw-m2{margin-top:.7rem;display:grid}.mw-t2{font-size:1rem}
.mw-seek{display:grid;grid-template-columns:2.2rem 1fr 2.2rem;align-items:center;gap:.4rem;font-size:.68rem;color:#a7a7ad;margin-top:.55rem;font-variant-numeric:tabular-nums}.mw-seek span:last-child{text-align:right}
.mw input[type=range]{-webkit-appearance:none;appearance:none;height:4px;border-radius:4px;background:linear-gradient(90deg,#fff var(--f,0%),rgba(255,255,255,.22) var(--f,0%));outline:none;width:100%;cursor:pointer}
.mw input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff}.mw input[type=range]::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#fff}
.mw-vol input{--f:100%}
.mw-ctl{display:flex;justify-content:space-between;align-items:center;margin:.6rem .3rem}.mw-ctl button{width:2.1rem;height:2.1rem;color:#a7a7ad;padding:.4rem;transition:.2s;border-radius:50%}.mw-ctl button:hover{color:#fff}.mw-ctl button.on{color:var(--a)}.mw-ctl .big{width:2.9rem;height:2.9rem;background:#fff;color:#000;padding:.7rem}.mw-ctl .big:hover{transform:scale(1.07);color:#000}
.mw-vol{display:flex;align-items:center;gap:.5rem;color:#a7a7ad}.mw-vol svg{width:1.1rem;height:1.1rem;flex:none}
.mw-list{margin:.8rem 0 .4rem;max-height:9.5rem;overflow-y:auto;display:grid;gap:.2rem}.mw-list li{display:flex;align-items:center;gap:.5rem;padding:.3rem;border-radius:.5rem;cursor:pointer}.mw-list li:hover{background:rgba(255,255,255,.07)}.mw-list li.on{background:rgba(255,255,255,.13)}
.mw-list img{width:2.3rem;height:2.3rem;border-radius:.35rem;object-fit:cover;flex:none;background:#2a2a30}.mw-list span{flex:1;min-width:0;display:grid}.mw-list b{font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mw-list small{font-size:.66rem;color:#a7a7ad}.mw-list li button{width:1.6rem;height:1.6rem;color:#a7a7ad;padding:.3rem;opacity:.5}.mw-list li:hover button{opacity:1}
.mw-add{display:flex;gap:.4rem;margin-top:.4rem}.mw-add input{flex:1;min-width:0;background:#26262a;border-radius:.6rem;padding:.45rem .6rem;font-size:.74rem;color:#fff;border:1px solid rgba(255,255,255,.08)}.mw-add button{width:2.2rem;border-radius:.6rem;background:#fff;color:#000!important;font-weight:800}
.mw-note{font-size:.68rem;color:#fbbf24;margin-top:.5rem;line-height:1.4}
@media(max-width:767px){.mw{width:auto;padding:.35rem}.mw:not([data-open="1"]) .mw-meta,.mw:not([data-open="1"]) .mw-pp,.mw:not([data-open="1"]) .mw-prog{display:none}.mw:not([data-open="1"]) .mw-art{width:2.5rem;height:2.5rem}.mw.blocked:not([data-open="1"]) .mw-art{animation:mwp 1.3s infinite}.mw[data-open="1"]{left:.6rem;right:.6rem;bottom:.6rem;width:auto}}
.tiles{grid-template-columns:repeat(4,1fr)}.tiles .tt{padding:.7rem .15rem;font-size:.72rem}
/* splash screen */
.sp-body{--mx:0;--my:0;min-height:100vh;min-height:100dvh;overflow:hidden;background:radial-gradient(ellipse at 50% 18%,#1b2266 0,#0a0e2c 46%,#04060f 100%);color:#fff}.sp-body::before,.sp-body::after{display:none}
.sp-l{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.sp-orb{position:absolute;border-radius:50%;background:radial-gradient(circle,var(--c) 0,transparent 66%);opacity:.55;transform:translate3d(calc(var(--mx)*var(--z)*1px),calc(var(--my)*var(--z)*1px),0);animation:spo 16s ease-in-out infinite alternate}
@keyframes spo{to{filter:hue-rotate(40deg);scale:1.12}}
.sp-grid{position:absolute;inset:-20% -10% 0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:56px 56px;transform:perspective(520px) rotateX(62deg) translate3d(calc(var(--mx)*50px),calc(var(--my)*24px),0) translateY(18%);mask-image:radial-gradient(circle at 50% 35%,#000,transparent 70%);-webkit-mask-image:radial-gradient(circle at 50% 35%,#000,transparent 70%)}
.sp-fl{position:absolute;font-size:2rem;opacity:.9;filter:drop-shadow(0 8px 14px rgba(0,0,0,.5));transform:translate3d(calc(var(--mx)*var(--z)*1px),calc(var(--my)*var(--z)*1px),0)}.sp-fl>span{display:block;animation:float 6s ease-in-out infinite}
#spc{position:fixed;inset:0;z-index:1;pointer-events:none}
.sp-main{position:relative;z-index:2;min-height:100vh;min-height:100dvh;display:grid;place-content:center;justify-items:center;gap:1.1rem;padding:2rem 1rem;text-align:center}
.sp-logo{width:6.2rem;height:6.2rem;position:relative;display:grid;place-items:center;opacity:0;transform:scale(.6) rotate(-30deg)}.go .sp-logo{animation:splg 1.1s cubic-bezier(.2,.8,.2,1) .1s forwards}
.sp-logo svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}.sp-logo circle{fill:none;stroke:url(#spg);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:276;stroke-dashoffset:276}.go .sp-logo circle{animation:ldr 1.6s cubic-bezier(.5,0,.2,1) .3s forwards}
.sp-logo b{font:800 1.9rem 'Space Grotesk',sans-serif;background:linear-gradient(120deg,var(--a),var(--b));-webkit-background-clip:text;background-clip:text;color:transparent}@keyframes splg{to{opacity:1;transform:none}}
.sp-name{font:800 clamp(1.7rem,6.4vw,3.7rem)/1.08 'Space Grotesk',sans-serif;letter-spacing:.02em;max-width:92vw}.sp-name span{display:inline-block;opacity:0;transform:translateY(24px) scale(.8);filter:blur(10px)}.go .sp-name span{animation:spl .85s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.7s + var(--i)*.045s)}@keyframes spl{to{opacity:1;transform:none;filter:none}}
.sp-role{min-height:1.6em;font-size:clamp(1rem,2.6vw,1.35rem);font-weight:600;background:linear-gradient(120deg,var(--a),var(--b));-webkit-background-clip:text;background-clip:text;color:transparent;opacity:0}.go .sp-role{animation:spf .8s ease 1.7s forwards}@keyframes spf{to{opacity:1}}
#spCard{width:min(92vw,28rem);perspective:900px;opacity:0;transform:translateY(46px) scale(.94)}.go #spCard{animation:spc 1.1s cubic-bezier(.2,.8,.2,1) 2s forwards}@keyframes spc{to{opacity:1;transform:none}}
.sp-fw{animation:spfl 7s ease-in-out 3.2s infinite}@keyframes spfl{50%{transform:translateY(-7px)}}
.sp-in{padding:1.8rem 1.6rem;border-radius:1.7rem;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 34px 80px -30px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.3);transform-style:preserve-3d;transform:rotateX(calc(var(--my)*-9deg)) rotateY(calc(var(--mx)*11deg));transition:transform .25s ease-out;text-align:center}
.sp-in>*{transform:translateZ(26px)}.sp-in .sp-btns{transform:translateZ(46px)}.sp-in .sp-eb{transform:translateZ(16px)}
.sp-eb{font-size:.7rem;font-weight:800;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.6)}.sp-in h2{font:800 1.6rem 'Space Grotesk',sans-serif;margin:.4rem 0}.sp-in p.sp-p{color:rgba(255,255,255,.72);font-size:.93rem;line-height:1.55}
.sp-btns{display:grid;gap:.7rem;margin-top:1.3rem}.sp-btns .btn,.sp-btns .btn2{width:100%;padding:.9rem 1.2rem;font-size:1rem;color:#fff;border-color:rgba(255,255,255,.25);background-color:rgba(255,255,255,.08)}.sp-btns .btn{background:linear-gradient(120deg,var(--a),var(--b));border-color:transparent;box-shadow:0 14px 34px -14px var(--a)}
.sp-tip{margin-top:1rem;font-size:.72rem;color:rgba(255,255,255,.5)}
.sp-out{position:fixed;inset:0;z-index:60;background:linear-gradient(135deg,var(--a),var(--b));clip-path:circle(0% at var(--ox,50%) var(--oy,50%));transition:clip-path .8s cubic-bezier(.7,0,.2,1);pointer-events:none}.leave .sp-out{clip-path:circle(150% at var(--ox,50%) var(--oy,50%))}.leave .sp-main{opacity:0;transform:scale(1.06);transition:.6s ease}
@media(prefers-reduced-motion:reduce){#ld,.sp-out{transition:opacity .3s}.sp-name span,.sp-logo,.sp-role,#spCard{opacity:1!important;transform:none!important;filter:none!important;animation:none!important}.sp-logo circle{stroke-dashoffset:0!important}.reveal{opacity:1;transform:none;filter:none}}


/* ===== v10 ===== */
/* cursor stays above the page loader so it never disappears while pages change */
#cur{z-index:600}#ct{z-index:599}

/* ---- Album: Dolly Zoom + Bokeh (photos). The JS in app.js (parallaxInit) eases --dz / --fx / --fy / --px / --py ---- */
.pw.dz{position:relative;aspect-ratio:4/3;background:#0b1020;isolation:isolate}
.dz-bg,.dz-fg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none;user-select:none;transform-origin:var(--fx) var(--fy)}
.dz-bg{z-index:0;filter:blur(calc(var(--dz)*11px)) saturate(calc(1 + var(--dz)*.22)) brightness(calc(1 - var(--dz)*.07));transform:translate3d(calc(var(--px)*-18px),calc(var(--py)*-14px),0) scale(calc(1.08 + var(--dz)*.28))}
.dz-fg{z-index:1;transform:translate3d(calc(var(--px)*-7px),calc(var(--py)*-5px),0) scale(calc(1.08 - var(--dz)*.075));-webkit-mask-image:radial-gradient(ellipse 36% 42% at var(--fx) var(--fy),#000 46%,rgba(0,0,0,.55) 74%,transparent 100%);mask-image:radial-gradient(ellipse 36% 42% at var(--fx) var(--fy),#000 46%,rgba(0,0,0,.55) 74%,transparent 100%)}
.dz-bk{position:absolute;inset:-8%;z-index:2;pointer-events:none;mix-blend-mode:screen;opacity:calc(var(--dz)*.95);filter:blur(.7px);transform:translate3d(calc(var(--px)*-30px),calc(var(--py)*-22px),0) scale(calc(1 + var(--dz)*.1));
background:
radial-gradient(circle 30px at 12% 22%,rgba(255,255,255,.16) 0,rgba(255,255,255,.22) 78%,rgba(255,255,255,.5) 92%,transparent 100%),
radial-gradient(circle 18px at 27% 70%,rgba(255,255,255,.14) 0,rgba(255,255,255,.2) 78%,rgba(255,255,255,.46) 92%,transparent 100%),
radial-gradient(circle 36px at 84% 16%,color-mix(in srgb,var(--a) 40%,rgba(255,255,255,.2)) 0,color-mix(in srgb,var(--a) 46%,rgba(255,255,255,.22)) 78%,rgba(255,255,255,.5) 92%,transparent 100%),
radial-gradient(circle 24px at 90% 64%,rgba(255,255,255,.14) 0,rgba(255,255,255,.2) 78%,rgba(255,255,255,.44) 92%,transparent 100%),
radial-gradient(circle 14px at 58% 12%,rgba(255,255,255,.18) 0,rgba(255,255,255,.24) 78%,rgba(255,255,255,.5) 92%,transparent 100%),
radial-gradient(circle 26px at 70% 86%,color-mix(in srgb,var(--b) 38%,rgba(255,255,255,.2)) 0,color-mix(in srgb,var(--b) 44%,rgba(255,255,255,.22)) 78%,rgba(255,255,255,.46) 92%,transparent 100%),
radial-gradient(circle 20px at 8% 80%,rgba(255,255,255,.12) 0,rgba(255,255,255,.18) 78%,rgba(255,255,255,.4) 92%,transparent 100%),
radial-gradient(circle 12px at 42% 90%,rgba(255,255,255,.16) 0,rgba(255,255,255,.22) 78%,rgba(255,255,255,.46) 92%,transparent 100%)}
.pl.on .dz-bk{animation:dzDrift 6s ease-in-out infinite alternate}
@keyframes dzDrift{to{translate:7px -9px}}
/* iPhone-style focus square (^-^ delete the .dz-fx rules + the <span class="dz-fx"> in js/app.js to remove it) */
.dz-fx{position:absolute;z-index:3;pointer-events:none;left:var(--fx);top:var(--fy);width:24%;aspect-ratio:1;border:1.5px solid #ffd60a;border-radius:2px;box-shadow:0 0 0 .5px rgba(0,0,0,.25),0 0 12px rgba(255,214,10,.28);opacity:calc(var(--dz)*var(--dz));transform:translate(-50%,-50%) scale(calc(1.5 - var(--dz)*.5));
background:linear-gradient(#ffd60a,#ffd60a) 50% 0/1.5px 6px no-repeat,linear-gradient(#ffd60a,#ffd60a) 50% 100%/1.5px 6px no-repeat,linear-gradient(#ffd60a,#ffd60a) 0 50%/6px 1.5px no-repeat,linear-gradient(#ffd60a,#ffd60a) 100% 50%/6px 1.5px no-repeat}

/* ---- Control Center: cursor-blobs switch ---- */
.tiles{grid-template-columns:repeat(3,1fr)}
.tg{flex:none}
.dsw{display:flex;align-items:center;justify-content:space-between;gap:.9rem}.dsw>div{display:flex;align-items:center;gap:.7rem;min-width:0}.dsw b{display:block;font-size:.88rem}.dsw small{display:block;color:var(--mut);font-size:.72rem;line-height:1.35}
.dnote{font-size:.72rem;line-height:1.45;color:var(--mut)}

/* ---- 3D live character: voice on/off ---- */
.h3-vo{position:absolute;top:.8rem;right:.8rem;z-index:5;width:2.4rem;height:2.4rem;border-radius:50%;display:grid;place-items:center;font-size:1.05rem;line-height:1;color:#fff;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:transform .2s,opacity .2s,background .2s}
.h3-vo:hover{transform:scale(1.1);background:rgba(0,0,0,.6)}.h3-vo[aria-pressed=false]{opacity:.7}
.h3-vo[hidden]{display:none}
.h3-bub{max-width:calc(100% - 6.6rem)}
.hero3d.talking .h3-vo{box-shadow:0 0 0 3px color-mix(in srgb,var(--a) 55%,transparent)}

/* ---- Math Tug of War ---- */
.tw-top{display:flex;flex-wrap:wrap;gap:.8rem 1.2rem;align-items:flex-end;margin-bottom:1rem}.tw-top .lb{width:min(100%,11rem)}
.tw-svg{width:100%;height:auto;display:block;border-radius:1rem;border:1px solid var(--bd);background:linear-gradient(180deg,transparent 50%,color-mix(in srgb,var(--fg) 6%,transparent))}
.tw-grp{transform:translateX(calc(var(--pos,0)*24px));transition:transform .65s cubic-bezier(.34,1.4,.5,1)}
.tw-lean{transition:transform .6s cubic-bezier(.34,1.4,.5,1)}
.tw-lean.l{transform:rotate(-9deg)}.tw-lean.r{transform:rotate(9deg)}
.tw-svg[data-lead="1"] .tw-lean.l{transform:rotate(-17deg)}.tw-svg[data-lead="1"] .tw-lean.r{transform:rotate(3deg)}
.tw-svg[data-lead="2"] .tw-lean.r{transform:rotate(17deg)}.tw-svg[data-lead="2"] .tw-lean.l{transform:rotate(-3deg)}
.tw-svg[data-win="1"] .tw-lean.l .tw-hop,.tw-svg[data-win="2"] .tw-lean.r .tw-hop{animation:towHop .5s ease-in-out infinite alternate}
@keyframes towHop{to{transform:translateY(-9px)}}
.tw-board{display:grid;grid-template-columns:auto 1fr auto;gap:.8rem;align-items:center;margin:.9rem 0 1rem}
.tw-sc{text-align:center;min-width:4.6rem;padding:.4rem .7rem;border-radius:1rem;border:1px solid var(--bd);background:var(--card)}.tw-sc small{display:block;font-size:.66rem;font-weight:800;color:var(--mut)}.tw-sc b{font:800 1.6rem/1.2 'Space Grotesk',sans-serif;font-variant-numeric:tabular-nums}
.tw-sc.p1 b{color:var(--a)}.tw-sc.p2 b{color:var(--b)}
.tw-msg{text-align:center;font-weight:700;font-size:.92rem}
.tw-play{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
.tw-p{min-width:0;border:1px solid var(--bd);border-radius:1.2rem;padding:.8rem;background:color-mix(in srgb,var(--fg) 3%,transparent);transition:border-color .3s,box-shadow .3s}
.tw-p.p1{border-top:3px solid var(--a)}.tw-p.p2{border-top:3px solid var(--b)}
.tw-p h3{font-size:.82rem;font-weight:800;color:var(--mut);text-align:center}
.tw-q{min-height:3.4rem;display:grid;place-items:center;text-align:center;font:800 clamp(1.05rem,3.4vw,1.7rem)/1.25 'Space Grotesk',sans-serif;padding:.3rem .1rem;overflow-wrap:anywhere}
.tw-in{display:block;min-height:2.7rem;margin:.4rem 0 .6rem;padding:.3rem .6rem;border-radius:.9rem;border:1px dashed var(--bd);text-align:center;font:800 1.5rem/1.7 'Space Grotesk',sans-serif;font-variant-numeric:tabular-nums;color:var(--mut);overflow:hidden}
.tw-in.has{color:var(--fg);border-style:solid;border-color:var(--a)}.tw-p.p2 .tw-in.has{border-color:var(--b)}
.tw-pad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem}
.tw-k{min-height:2.9rem;border-radius:.85rem;border:1px solid var(--bd);background:var(--card);font:700 1.1rem 'Space Grotesk',sans-serif;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;transition:transform .12s,border-color .2s}
.tw-k:hover{border-color:var(--a)}.tw-k:active{transform:scale(.93)}
.tw-k.ok{color:#fff;border-color:transparent;background:linear-gradient(120deg,var(--a),var(--b))}.tw-p.p2 .tw-k.ok{background:linear-gradient(120deg,var(--b),var(--a))}
.tw-p.ok{border-color:#16a34a;box-shadow:0 0 0 3px rgba(22,163,74,.28)}
.tw-p.bad{border-color:#dc2626;animation:towShake .4s}
.tw-p.win{box-shadow:0 0 0 3px var(--a),0 20px 50px -20px var(--a)}.tw-p.p2.win{box-shadow:0 0 0 3px var(--b),0 20px 50px -20px var(--b)}
@keyframes towShake{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@media(max-width:480px){.card.tw{padding:.8rem}.tw-play{gap:.5rem}.tw-p{padding:.5rem}.tw-pad{gap:.3rem}.tw-k{min-height:2.8rem;font-size:1rem}.tw-q{min-height:4.6rem}.tw-in{font-size:1.25rem;min-height:2.5rem}.tw-board{gap:.5rem}.tw-sc{min-width:3.7rem;padding:.35rem .5rem}.tw-msg{font-size:.84rem}}

/* ---- Mobile / phone: one tidy bottom dock (clock · date · music on the left, Robot AI on the right) ---- */
@media(max-width:767px){
:root{--dock:3rem;--dk:max(.6rem,env(safe-area-inset-bottom))}
#wgs{left:max(.6rem,env(safe-area-inset-left));bottom:var(--dk);flex-direction:row;align-items:center;gap:.4rem;opacity:1}
#wgs .wg{height:var(--dock);padding:0 .7rem;display:flex;align-items:center;border-radius:1rem}
#wgs .wg .row{gap:.45rem!important}
#wgs .wg .text-3xl{font-size:1.15rem;line-height:1}
#wgs .wg b{font-size:.92rem;white-space:nowrap}
#wgs .wg .cal{gap:0}
#wgs .wg:nth-child(2){padding:0 .35rem}
#wgs .wg .tile{width:2.7rem;height:2.25rem;border-radius:.65rem;display:grid;grid-template-rows:auto 1fr}
#wgs .wg .tile .m{font-size:.5rem;padding:.1rem 0;line-height:1.2}
#wgs .wg .tile .d{font-size:1.05rem;line-height:1.15}
#wgs .wg .tile .y{display:none}
#wgs .mw:not([data-open="1"]){width:var(--dock);height:var(--dock);padding:.28rem;border-radius:1rem;flex:none}
#wgs .mw:not([data-open="1"]) .mw-top{height:100%}
#wgs .mw:not([data-open="1"]) .mw-art{width:100%;height:100%;border-radius:.7rem}
#rbBtn{right:max(.6rem,env(safe-area-inset-right));bottom:var(--dk);width:var(--dock);height:var(--dock);padding:0;font-size:1.4rem;line-height:1;border-radius:50%}
#rbBtn span{display:none}
#top{right:calc(max(.6rem,env(safe-area-inset-right)) + (var(--dock) - 2.4rem)/2);bottom:calc(var(--dk) + var(--dock) + .6rem)}
#toasts{bottom:calc(var(--dk) + var(--dock) + .7rem);width:max-content;max-width:calc(100vw - 1.2rem)}
footer{padding-bottom:calc(var(--dock) + var(--dk) + 1.6rem)}
.mw[data-open="1"]{bottom:var(--dk);max-height:calc(100vh - 1.4rem);max-height:calc(100dvh - 1.4rem)}
#rbo{padding:.6rem}#rbp{height:min(84vh,640px);height:min(84dvh,640px)}
}
@media(max-width:359px){#wgs .wg .text-3xl{display:none}#wgs .wg{padding:0 .5rem}#wgs .wg b{font-size:.82rem}
/* very small phones (320px): keep the header on one line, inside the screen */
.hin{gap:.4rem;padding:0 .6rem}.brand{flex:1 1 auto;min-width:0;font-size:1rem}.brand [data-brand]{overflow:hidden;text-overflow:ellipsis}.hc{gap:.3rem}.hc .btn.sm{padding:.4rem .75rem}.hc .ib{width:2.2rem;height:2.2rem}}


/* ===== v12: SKELETON LOADING ^-^ grey shimmer blocks that stand where the content will appear while the database answers ===== */
.sl-line,.sl-box,.sl-pill{background:linear-gradient(100deg,color-mix(in srgb,var(--fg) 10%,transparent) 30%,color-mix(in srgb,var(--fg) 20%,transparent) 50%,color-mix(in srgb,var(--fg) 10%,transparent) 70%);background-size:220% 100%;animation:slShim 1.25s ease-in-out infinite}
.sl-line{height:.9rem;border-radius:.55rem;margin-top:.7rem}.sl-line.h{height:1.25rem;margin-top:0;width:55%}.sl-line.w25{width:25%}.sl-line.w40{width:40%}.sl-line.w60{width:60%}.sl-line.w80{width:80%}
.sl-box{width:100%;aspect-ratio:4/3;border-radius:.9rem}
.sl-pill{display:inline-block;height:1.3em;width:2.6ch;border-radius:.5rem;vertical-align:middle}
.sl-text{color:transparent!important;background:linear-gradient(100deg,color-mix(in srgb,var(--fg) 10%,transparent) 30%,color-mix(in srgb,var(--fg) 20%,transparent) 50%,color-mix(in srgb,var(--fg) 10%,transparent) 70%);background-size:220% 100%;animation:slShim 1.25s ease-in-out infinite;border-radius:.5rem;-webkit-text-fill-color:transparent}
.sl-num{color:transparent!important;-webkit-text-fill-color:transparent;background:linear-gradient(100deg,color-mix(in srgb,var(--fg) 11%,transparent) 30%,color-mix(in srgb,var(--fg) 22%,transparent) 50%,color-mix(in srgb,var(--fg) 11%,transparent) 70%);background-size:220% 100%;animation:slShim 1.25s ease-in-out infinite;border-radius:.5rem}
.avatar>div.sl-box{aspect-ratio:auto}
.sl-row .bar{margin-top:.2rem}
@keyframes slShim{from{background-position:120% 0}to{background-position:-120% 0}}
.sl-in{animation:slIn .45s ease both}
@keyframes slIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}