@font-face{font-family:Brico;src:url(../fonts/bricolage.woff2) format("woff2");font-weight:500 800;font-display:swap}
@font-face{font-family:Atk;src:url(../fonts/atkinson-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Atk;src:url(../fonts/atkinson-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:JB;src:url(../fonts/jbmono.woff2) format("woff2");font-display:swap}
:root{
  --ink:#14101f;--paper:#fffaf0;--paper2:#f3ecdc;--kas:#49eacb;--kas2:#1fb89b;--pink:#ff5fa2;--yellow:#ffd23f;--violet:#a685ff;--lime:#b8f35a;--orange:#ff8a3d;--sky:#5ac8fa;--red:#ff4d4d;--blue:#3b6cff;
  --tick:30px;--bar:56px;--r:14px;
  --ui:Atk,"Segoe UI",system-ui,sans-serif;--disp:Brico,Atk,system-ui,sans-serif;--mono:JB,ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;font-family:var(--ui);color:var(--ink);background:#1a1038;-webkit-tap-highlight-color:transparent}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:#2a3fd1}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--paper);border:2.5px solid var(--ink);border-radius:11px;box-shadow:3px 3px 0 var(--ink);padding:8px 14px;font-weight:700;font-size:15px;line-height:1.15;transition:transform .08s,box-shadow .08s;text-decoration:none;color:var(--ink)}
@media (hover:hover) and (pointer:fine){.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn.kas{background:var(--kas)}.btn.pink{background:var(--pink)}.btn.yellow{background:var(--yellow)}.btn.violet{background:var(--violet)}.btn.lime{background:var(--lime)}.btn.orange{background:var(--orange)}.btn.sky{background:var(--sky)}.btn.red{background:var(--red)}
.btn.sm{padding:5px 10px;font-size:13px;border-radius:9px;box-shadow:2px 2px 0 var(--ink)}
.btn[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* BOOT */
#boot{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:radial-gradient(circle at 30% 20%,#3b1f8f,#120a2a 70%);color:var(--kas);font-family:var(--mono);transition:opacity .45s}
#boot.gone{opacity:0;pointer-events:none}
.boot-inner{width:min(640px,92vw)}
.boot-logo{display:flex;gap:10px;margin-bottom:18px}
.bk{width:34px;height:34px;border:3px solid var(--ink);border-radius:8px;box-shadow:3px 3px 0 #000;animation:drop .6s cubic-bezier(.3,1.6,.5,1) both}
.b1{background:var(--kas)}.b2{background:var(--pink);animation-delay:.1s}.b3{background:var(--yellow);animation-delay:.2s}.b4{background:var(--violet);animation-delay:.3s}.b5{background:var(--lime);animation-delay:.4s}
@keyframes drop{from{transform:translateY(-60px) rotate(-30deg);opacity:0}}
#bootlog{white-space:pre-wrap;font-size:14px;line-height:1.55;min-height:230px;margin:0 0 14px;color:#d9fff6}
#bootlog b{color:var(--kas)}
.boot-bar{height:20px;border:2.5px solid var(--kas);border-radius:20px;padding:3px;margin-bottom:16px}
#bootfill{height:100%;width:0;border-radius:20px;background:linear-gradient(90deg,var(--kas),var(--pink),var(--yellow));transition:width .2s}
#bootskip{background:transparent;color:#d9fff6;border-color:var(--kas);box-shadow:none;font-family:var(--mono);font-size:13px}

/* DESKTOP */
#desktop{position:fixed;inset:0 0 var(--bar) 0;overflow:hidden;background:
 radial-gradient(circle at 12% 18%,rgba(255,95,162,.55),transparent 38%),
 radial-gradient(circle at 85% 80%,rgba(73,234,203,.55),transparent 42%),
 radial-gradient(circle at 70% 10%,rgba(255,210,63,.35),transparent 30%),
 linear-gradient(140deg,#2a1477,#5b2bd1 48%,#0f7f7a)}
#wall{position:absolute;inset:var(--tick) 0 0 0;width:100%;height:calc(100% - var(--tick));display:block}
body.night #desktop{filter:brightness(.6) saturate(.8)}
#tickerbar{position:absolute;top:0;left:0;right:0;height:var(--tick);background:var(--ink);color:var(--kas);font-family:var(--mono);font-size:13px;overflow:hidden;white-space:nowrap;border-bottom:3px solid var(--kas);z-index:5}
#ticker{display:inline-flex;animation:tick 90s linear infinite;line-height:27px}
.tk-half{display:inline-flex;gap:34px;padding-right:34px}
@media (hover:hover) and (pointer:fine){#tickerbar:hover #ticker{animation-play-state:paused}}
@keyframes tick{to{transform:translateX(-50%)}}
.tk{background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer}
.tk b{color:#fff;font-weight:400}.tk .v{color:var(--lime)}.tk i{color:#ffb4d6;font-style:normal}
#wallpaper{position:absolute;right:4vw;bottom:5vh;text-align:right;color:#fff;user-select:none;pointer-events:none}
.wp-logo{font-family:var(--disp);font-weight:800;font-size:clamp(54px,9vw,128px);line-height:.85;letter-spacing:-.04em;color:rgba(255,255,255,.92);text-shadow:5px 5px 0 var(--ink);-webkit-text-stroke:2px var(--ink)}
.wp-logo span{color:var(--kas)}
.wp-sub{font-family:var(--mono);font-size:15px;margin-top:10px;color:#fff;text-shadow:1px 1px 0 var(--ink),0 0 6px var(--ink)}
.wp-live{display:inline-block;margin-top:8px;font-family:var(--mono);font-size:13px;background:var(--ink);color:#fff;border-radius:20px;padding:4px 10px}
.wp-live b{color:var(--kas)}
#disclaimer{position:absolute;left:12px;bottom:6px;margin:0;font-size:12px;color:#fff;font-family:var(--mono);background:rgba(20,16,31,.78);padding:2px 8px;border-radius:8px;z-index:3}

#icons{position:absolute;top:calc(var(--tick) + 12px);left:12px;bottom:34px;display:grid;grid-auto-flow:column;grid-template-rows:repeat(auto-fill,98px);grid-auto-columns:96px;gap:4px 8px;z-index:2}
.ico{width:94px;height:96px;display:flex;flex-direction:column;align-items:center;gap:5px;background:none;border:0;border-radius:12px;color:#fff;padding:4px 2px;font-size:12.5px;text-align:center;position:relative}
.ico .emo{width:54px;height:54px;display:grid;place-items:center;font-size:30px;border:3px solid var(--ink);border-radius:15px;box-shadow:3px 3px 0 var(--ink);background:var(--c,var(--paper));transition:transform .15s}
@media (hover:hover) and (pointer:fine){.ico:hover .emo{transform:translateY(-4px) rotate(-6deg)}}
.ico:active .emo{transform:scale(.92)}
.ico .lbl{line-height:1.15;background:rgba(20,16,31,.82);padding:2px 6px;border-radius:7px;font-weight:700}
.ico.sel .lbl{background:var(--ink);outline:2px solid var(--kas)}
.ico .new{position:absolute;top:0;right:12px;background:var(--yellow);color:var(--ink);border:2px solid var(--ink);border-radius:10px;font-size:10px;font-weight:700;padding:0 4px}

/* WINDOWS */
.win{position:absolute;min-width:280px;min-height:180px;background:var(--paper);border:3px solid var(--ink);border-radius:var(--r);box-shadow:8px 8px 0 var(--ink);display:flex;flex-direction:column;z-index:10;animation:pop .22s cubic-bezier(.3,1.5,.6,1);overflow:hidden}
@keyframes pop{from{transform:scale(.85) translateY(10px);opacity:0}}
.win.min{display:none}
.win.max{left:0!important;top:var(--tick)!important;width:100%!important;height:calc(100% - var(--tick))!important;border-radius:0}
.win.closing{animation:shrink .16s ease-in forwards}
@keyframes shrink{to{transform:scale(.8);opacity:0}}
.titlebar{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 10px;background:var(--c,var(--kas));border-bottom:3px solid var(--ink);font-family:var(--disp);font-weight:800;font-size:16px;user-select:none;touch-action:none;cursor:grab}
.win.inactive .titlebar{filter:saturate(.35) brightness(1.05)}
.t-ico{font-size:18px}
.t-txt{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-btn{width:28px;height:26px;padding:0;border:2.5px solid var(--ink);border-radius:8px;background:var(--paper);font-weight:800;font-size:14px;line-height:1}
@media (hover:hover) and (pointer:fine){.tb-btn.x:hover{background:var(--red)}}
.win-body{flex:1;overflow:auto;padding:14px;font-size:15px;line-height:1.45;position:relative}
.win-status{border-top:2.5px solid var(--ink);padding:4px 10px;font-size:12px;font-family:var(--mono);background:var(--paper2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* TASKBAR */
#taskbar{position:fixed;left:0;right:0;bottom:0;height:var(--bar);background:var(--paper);border-top:3px solid var(--ink);display:flex;align-items:center;gap:8px;padding:6px 8px;z-index:1000}
.start{height:40px;font-family:var(--disp);font-size:17px;background:var(--kas)}
.start-logo{display:inline-grid;place-items:center;width:24px;height:24px;background:var(--ink);color:var(--kas);border-radius:7px;font-weight:800;transition:transform .3s}
@media (hover:hover) and (pointer:fine){.start:hover .start-logo{transform:rotate(-12deg) scale(1.1)}}
.start[aria-expanded="true"]{background:var(--ink);color:var(--paper)}
#tasks{flex:1;display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;min-width:0}
.task{height:38px;max-width:180px;min-width:44px;white-space:nowrap;overflow:hidden;font-size:13px;padding:4px 10px;box-shadow:2px 2px 0 var(--ink);justify-content:flex-start}
.task .tt{overflow:hidden;text-overflow:ellipsis}
.task.active{background:var(--yellow)}
#tray{display:flex;align-items:center;gap:4px;height:40px;padding:0 6px;border:2.5px solid var(--ink);border-radius:11px;background:var(--paper2)}
.tray-btn{background:none;border:0;padding:4px 6px;font-size:16px;border-radius:8px;display:inline-flex;align-items:center;gap:3px}
@media (hover:hover) and (pointer:fine){.tray-btn:hover{background:#fff}}
.tray-btn b{font-size:13px;font-family:var(--mono)}
.clock{font-family:var(--mono);font-weight:700;font-size:13px}
.live-pill{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:12px;padding:2px 8px;border-radius:20px;background:var(--ink);color:#fff}
.live-pill i{position:relative;width:9px;height:9px;border-radius:50%;background:#999}
.live-pill i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--kas);opacity:0;pointer-events:none}
.live-pill.on i{background:var(--kas)}
/* three soft rings when the feed connects, then still: no endless pulse */
.live-pill.on i::after{animation:pulse 1.4s ease-out 3}
.live-pill.off i{background:var(--orange)}
@keyframes pulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(2.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.live-pill.on i::after{animation:none}}

/* MENUS */
.menu{position:fixed;background:var(--paper);border:3px solid var(--ink);border-radius:var(--r);box-shadow:6px 6px 0 var(--ink);z-index:2000;overflow:hidden}
#startmenu{left:8px;bottom:calc(var(--bar) + 8px);display:flex;width:330px;max-height:calc(100% - var(--bar) - 20px)}
#startmenu[hidden],#ctxmenu[hidden]{display:none}
.sm-side{width:40px;background:linear-gradient(0deg,var(--violet),var(--pink));border-right:3px solid var(--ink);display:flex;align-items:flex-end;justify-content:center;padding:10px 0}
.sm-side span{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--disp);font-weight:800;font-size:20px;color:#fff;letter-spacing:.02em}
.sm-side b{color:var(--yellow)}
.sm-items{flex:1;padding:6px;overflow:auto}
.mi{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;border-radius:9px;padding:7px 10px;text-align:left;font-size:14.5px}
.mi:focus-visible{background:var(--kas);outline:none}@media (hover:hover) and (pointer:fine){.mi:hover{background:var(--kas);outline:none}}
.mi .emo{font-size:20px;width:26px;text-align:center}
.mi small{display:block;font-size:12px;color:#4a4458}
.sep{border-top:2.5px dashed var(--ink);margin:6px 4px}
#ctxmenu{min-width:240px;padding:5px}

/* HELPER */
#helper{position:absolute;right:16px;bottom:34px;z-index:900;display:flex;align-items:flex-end;gap:6px;max-width:340px}
#helper.hidden{display:none}
.helper-bubble{background:var(--paper);border:3px solid var(--ink);border-radius:16px 16px 4px 16px;padding:10px 12px;font-size:14px;box-shadow:4px 4px 0 var(--ink);margin-bottom:46px}
#helper.quiet .helper-bubble{display:none}
.helper-body{background:none;border:0;padding:0;animation:float 3s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px) rotate(4deg)}}
.helper-x{position:absolute;top:-10px;left:-10px;width:26px;height:26px;border-radius:50%;border:2.5px solid var(--ink);background:var(--paper);font-weight:800;padding:0;line-height:18px;z-index:2}
#helper.quiet .helper-x{display:none}

/* TOASTS + FX */
#toasts{position:fixed;top:calc(var(--tick) + 12px);left:50%;transform:translateX(-50%);z-index:3000;display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none;width:min(92vw,540px)}
.toast{background:var(--ink);color:#fff;font-size:14.5px;padding:9px 14px;border:2.5px solid var(--kas);border-radius:12px;box-shadow:4px 4px 0 rgba(0,0,0,.4);animation:tin .25s cubic-bezier(.3,1.5,.6,1)}
.toast.st{border-color:var(--yellow);background:#2b1b4f}
@keyframes tin{from{transform:translateY(-12px) scale(.9);opacity:0}}
#fx{position:fixed;inset:0;pointer-events:none;z-index:2500;overflow:hidden}
.fall{position:absolute;top:-50px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(var(--r,360deg))}}
.float{position:absolute;font-weight:800;font-family:var(--disp);font-size:20px;animation:up 1.6s ease-out forwards;transform:rotate(var(--r,0))}
@keyframes up{to{transform:translateY(-70px) rotate(var(--r,0));opacity:0}}
.gmb{position:absolute;font-family:var(--disp);font-weight:800;font-size:22px;border:3px solid var(--ink);border-radius:14px;padding:4px 12px;box-shadow:3px 3px 0 var(--ink);animation:gmb 2.6s ease forwards}
@keyframes gmb{0%{transform:scale(0)}15%{transform:scale(1.15)}25%{transform:scale(1)}85%{opacity:1}100%{opacity:0;transform:translateY(-30px)}}
#shutdown{position:fixed;inset:0;z-index:5000;background:var(--ink);color:#fff;display:grid;place-items:center;text-align:center;padding:20px}
#shutdown[hidden]{display:none}
.sd-inner{max-width:520px}
.sd-big{font-family:var(--disp);font-weight:800;font-size:clamp(34px,7vw,60px);color:var(--kas);margin-bottom:10px}
body.tilt #desktop{transform:rotate(-2deg);transition:transform .3s}

/* SHARED APP BITS */
.lead{font-size:16px;margin:0 0 10px}
.kick{font-family:var(--disp);font-weight:800;font-size:22px;line-height:1.1;margin:0 0 6px}
.muted{color:#4a4458;font-size:13px}
.tag{display:inline-block;font-family:var(--mono);font-size:11.5px;border:2px solid var(--ink);border-radius:20px;padding:1px 8px;background:var(--paper2);vertical-align:middle}
.tag.live{background:var(--kas)}.tag.sim{background:var(--yellow)}.tag.toy{background:#ffd6e8}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0}
.panel{border:2.5px solid var(--ink);border-radius:12px;background:#fff;padding:10px 12px;box-shadow:3px 3px 0 var(--ink)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin:10px 0}
.stat{border:2.5px solid var(--ink);border-radius:12px;padding:8px 10px;background:#fff}
.stat b{display:block;font-family:var(--disp);font-weight:800;font-size:22px;line-height:1.1}
.stat span{font-size:12px;color:#4a4458}
.verdict{margin-top:10px;padding:10px 12px;border:2.5px solid var(--ink);border-radius:12px;background:var(--paper2);font-weight:700;min-height:44px}
.verdict.ok{background:var(--kas)}.verdict.no{background:var(--red);animation:shake .35s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.cv{display:block;width:100%;border:2.5px solid var(--ink);border-radius:12px;background:#120b2c}
label.sl{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;font-size:14px;margin:6px 0}
label.sl output{font-family:var(--mono);font-weight:700;min-width:84px;text-align:right}
input[type=range]{accent-color:var(--violet);width:100%}
details.why{margin-top:12px;border-top:2.5px dashed var(--ink);padding-top:8px}
details.why summary{cursor:pointer;font-weight:700}
details.why p{margin:6px 0}
.src{font-size:12.5px}

/* RADIO */
.radio-top{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;flex-wrap:wrap}
.bpm{font-family:var(--disp);font-weight:800;font-size:44px;line-height:.9}
.bpm small{font-size:15px;font-family:var(--ui);font-weight:700}
.realblock{font-family:var(--mono);font-size:12.5px;word-break:break-all}
/* PHOTO (GHOSTDAG) */
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:13px}
.legend i{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:4px;vertical-align:-1px;border:2px solid var(--ink)}
/* CHECKOUT */
.lanes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lane h3{margin:0 0 6px;font-family:var(--disp);font-size:17px}
.tx{display:flex;justify-content:space-between;gap:6px;border:2px solid var(--ink);border-radius:9px;padding:5px 8px;margin:4px 0;font-size:13px;background:#fff;transition:background .2s}
.tx.run{background:var(--yellow)}.tx.ok{background:var(--kas)}.tx.no{background:var(--red)}
.tx .st{font-family:var(--mono);font-size:12px;white-space:nowrap}
/* HEIST */
.crew{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.big-n{font-family:var(--disp);font-weight:800;font-size:28px;line-height:1.05}
.cliff{color:#b3001b}
/* JAR */
.jar-wrap{display:grid;grid-template-columns:170px 1fr;gap:14px;align-items:start}
.jar{position:relative;height:200px;border:3px solid var(--ink);border-radius:20px 20px 30px 30px;background:linear-gradient(#fff0,#fff0),#e9fbff;overflow:hidden;box-shadow:4px 4px 0 var(--ink)}
.jar .lid{position:absolute;top:0;left:0;right:0;height:22px;background:var(--orange);border-bottom:3px solid var(--ink)}
.jar .fill{position:absolute;left:0;right:0;bottom:0;background:repeating-linear-gradient(45deg,var(--kas),var(--kas) 12px,var(--kas2) 12px,var(--kas2) 24px);transition:height .5s cubic-bezier(.3,1.4,.6,1);border-top:3px solid var(--ink)}
.jar .amt{position:absolute;left:0;right:0;top:40px;text-align:center;font-family:var(--disp);font-weight:800;font-size:24px;z-index:2}
.jar .face{position:absolute;left:0;right:0;top:74px;text-align:center;font-size:34px;z-index:2;transition:transform .2s}
.rules{list-style:none;padding:0;margin:0 0 8px}
.rules li{border:2px solid var(--ink);border-radius:9px;padding:5px 9px;margin:4px 0;background:#fff;font-size:14px}
.rules li.pass{background:var(--kas)}.rules li.fail{background:var(--red);font-weight:700}
.rules li::before{content:"📜 "}
/* PIANO */
.pk-wrap{overflow-x:auto;border:2.5px solid var(--ink);border-radius:12px;background:#120b2c;padding:8px 0}
#pk-cv{display:block;cursor:pointer;height:200px}
/* FEED */
.post{border:2.5px solid var(--ink);border-radius:14px;padding:10px 12px;margin:0 0 12px;background:#fff;box-shadow:3px 3px 0 var(--ink)}
.post .who{display:flex;justify-content:space-between;gap:8px;font-size:13px;font-weight:700}
.post .plain{font-family:var(--disp);font-weight:700;font-size:17px;line-height:1.25;margin:8px 0}
.post blockquote{margin:6px 0;padding:6px 10px;border-left:4px solid var(--kas);background:var(--paper2);font-size:13px;white-space:pre-wrap;border-radius:0 8px 8px 0;color:#2d2838}
.post .cav{font-size:13px;margin:6px 0;background:#fff3c4;border-radius:8px;padding:4px 8px}
.post .meta{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.tlab{font-family:var(--mono);font-size:11.5px;border:2px solid var(--ink);border-radius:20px;padding:1px 8px}
.tlab.t-live{background:var(--kas)}.tlab.t-test{background:var(--yellow)}.tlab.t-page{background:#d9ccff}.tlab.t-talk{background:#ffd6e8}
/* REAL OR NOT */
.card{border:3px solid var(--ink);border-radius:18px;padding:16px;background:#fff;box-shadow:5px 5px 0 var(--ink);text-align:center;min-height:150px;display:flex;flex-direction:column;justify-content:center;gap:6px}
.card h3{font-family:var(--disp);font-weight:800;font-size:24px;margin:0}
.guess{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.board{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-top:10px}
.col h4{margin:0 0 6px;font-family:var(--disp);font-size:16px;border:2.5px solid var(--ink);border-radius:10px;padding:4px 8px}
.col.live h4{background:var(--kas)}.col.test h4{background:var(--yellow)}.col.page h4{background:#d9ccff}.col.comp h4{background:#ffd6e8}
.item{border:2px solid var(--ink);border-radius:10px;padding:6px 8px;margin:5px 0;background:#fff;font-size:13px}
.item b{display:block}.item p{margin:3px 0}
/* QUIZ */
.q-opts{display:grid;gap:8px;margin-top:10px}
.q-opts .btn{justify-content:flex-start;text-align:left}
.cert{border:4px double var(--ink);border-radius:18px;padding:18px;text-align:center;background:repeating-linear-gradient(135deg,#fffaf0,#fffaf0 14px,#fff3d6 14px,#fff3d6 28px)}
.cert h3{font-family:var(--disp);font-weight:800;font-size:28px;margin:4px 0}
.seal{display:inline-grid;place-items:center;width:84px;height:84px;border-radius:50%;background:var(--kas);border:3px solid var(--ink);font-size:34px;box-shadow:3px 3px 0 var(--ink);transform:rotate(-12deg)}
/* JARGON */
.terms{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.term{text-align:left;justify-content:flex-start}
.def{margin-top:12px}
.def h3{font-family:var(--disp);font-size:22px;margin:0 0 4px}
.def .joke{background:#ffd6e8;border-radius:10px;padding:6px 10px;border:2px solid var(--ink)}
/* NOTEPAD */
.note{font-family:var(--mono);font-size:14px;white-space:pre-wrap;line-height:1.55;background:#fff;margin:-14px;padding:14px;min-height:calc(100% + 28px)}
.note h3{font-family:var(--mono);font-size:15px;margin:14px 0 2px}
.note p{margin:0 0 4px}
/* STICKERS */
.stickers{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.stk{border:3px dashed #8a8398;border-radius:16px;padding:10px 6px;text-align:center;font-size:13px;color:#4a4458;min-height:112px}
.stk .e{font-size:34px;filter:grayscale(1);opacity:.35;display:block}
.stk.got{border-style:solid;border-color:var(--ink);background:var(--c,var(--kas));color:var(--ink);box-shadow:3px 3px 0 var(--ink);transform:rotate(var(--rot,-2deg))}
.stk.got .e{filter:none;opacity:1}
.prog{height:16px;border:2.5px solid var(--ink);border-radius:20px;overflow:hidden;background:#fff;margin:8px 0}
.prog i{display:block;height:100%;background:linear-gradient(90deg,var(--kas),var(--pink),var(--yellow))}
/* BIN */
.bin-big{font-size:90px;text-align:center;line-height:1;margin:6px 0}
.binlist{border:2.5px solid var(--ink);border-radius:12px;background:#fff;min-height:70px;padding:10px;font-family:var(--mono);font-size:13px}

@media (max-width:700px){
  :root{--bar:58px}
  #icons{position:absolute;inset:calc(var(--tick) + 10px) 0 auto 0;grid-auto-flow:row;grid-template-columns:repeat(4,1fr);grid-template-rows:none;grid-auto-rows:94px;gap:2px;padding:0 4px;bottom:auto}
  .ico{width:100%}
  .ico .emo{width:52px;height:52px}
  .ico .lbl{font-size:11.5px;max-width:100%;padding:2px 5px;text-wrap:balance}
  .win{left:0!important;top:var(--tick)!important;width:100%!important;height:calc(100% - var(--tick))!important;border-radius:0;border-left:0;border-right:0;box-shadow:none}
  .titlebar{cursor:default;padding:8px 8px 8px 12px}
  .tb-btn{width:36px;height:32px;font-size:16px}
  .tb-btn.mx{display:none}
  #wallpaper{right:14px;bottom:150px}
  .wp-logo{font-size:64px}
  .wp-sub{font-size:12px}
  .wp-live{font-size:11.5px;padding:4px 10px;text-align:center}
  #helper{right:8px;bottom:36px;max-width:calc(100% - 16px)}
  .helper-bubble{font-size:13px}
  .task .tt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .task{min-width:42px;max-width:46px;padding:4px;justify-content:center}
  #disclaimer{font-size:10.5px;left:6px;right:6px;bottom:4px;text-align:center}
  #startmenu{left:4px;right:4px;width:auto}
  .jar-wrap{grid-template-columns:1fr}
  .jar{height:150px;max-width:220px;margin:0 auto}
  .lanes{grid-template-columns:1fr}
  .live-pill span{display:none}
  .clock{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important;animation-iteration-count:1!important;transition:none!important}}
#icons{pointer-events:none}.ico{pointer-events:auto}
#blockcard{position:absolute;z-index:950;width:min(300px,calc(100% - 20px));background:var(--paper);border:3px solid var(--ink);border-radius:var(--r);box-shadow:6px 6px 0 var(--ink);padding:12px 14px;font-size:14px;animation:pop .2s}
#blockcard h2{font-family:var(--disp);font-size:18px;margin:0 0 6px}
#blockcard dl{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:6px 0;font-size:13px}
#blockcard dt{color:#4a4458}#blockcard dd{margin:0;font-family:var(--mono);font-weight:700}
#blockcard .x{position:absolute;top:6px;right:6px}
.pads{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:12px 0}
.pads i{aspect-ratio:1.6;border:3px solid var(--ink);border-radius:12px;background:#2b2442;box-shadow:3px 3px 0 var(--ink);transition:background .5s,transform .1s}
.pads i.hit{transform:scale(1.07);transition:none}
.mono{font-family:var(--mono)}
.hooks{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.hook{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;background:var(--c);border:3px solid var(--ink);border-radius:14px;box-shadow:4px 4px 0 var(--ink);padding:10px 12px;transition:transform .1s,box-shadow .1s;min-height:104px}
@media (hover:hover) and (pointer:fine){.hook:hover{transform:translate(-2px,-2px) rotate(-1deg);box-shadow:6px 6px 0 var(--ink)}}
.hook:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.hook .e{font-size:28px}.hook b{font-family:var(--disp);font-size:17px;line-height:1.1}.hook span:last-child{font-size:12.5px}
@media (max-width:700px){.hooks{grid-template-columns:1fr 1fr}}
@media (max-width:700px){body.has-win #helper{display:none}}

/* Gate fixes (Oct 31): wordmark never sits under Dag or his bubble; bigger hit areas */
.wp-logo{line-height:1;padding-bottom:.12em;font-size:clamp(54px,min(9vw,12vh),128px)}
.wp-sub{margin-top:4px}
#wallpaper{right:max(4vw,96px);transition:transform .35s cubic-bezier(.3,.7,.2,1)}
@media (min-width:701px){#desktop:has(#helper:not(.quiet):not(.hidden)) #wallpaper{transform:translateX(-290px)}}
@media (max-width:700px){#wallpaper{bottom:172px}.wp-logo{font-size:64px}}
@media (prefers-reduced-motion:reduce){#wallpaper{transition:none}}
.helper-x::after,.tray-btn::after{content:"";position:absolute;inset:-9px}
.tray-btn{position:relative}
@media (max-width:600px){.tray-btn::after{inset:-8px -6px}:root{--tick:44px}#tickerbar{display:flex;align-items:center}.tk{min-height:41px;display:inline-flex;align-items:center}}