:root{--page-bg: #16151A;--overlay-bg: rgba(10, 9, 14, .92);--congrats-bg: rgba(10, 9, 14, .62);--card-bg: rgba(20, 18, 26, .88);--card-border: rgba(255, 255, 255, .09);--card-shadow: rgba(0, 0, 0, .8);--card-ring: rgba(255, 92, 61, .05);--text-title: rgba(255, 255, 255, .9);--text-body: #8A8598;--text-sub: #5A5470;--text-desc: #4A4465;--text-brand: rgba(255, 255, 255, .1);--accent: #FF5C3D;--accent-dim: rgba(255, 92, 61, .5);--accent-hover: #FF7A60;--accent-ring: rgba(255, 92, 61, .34);--accent-ring-hov: rgba(255, 92, 61, .46);--hud-bg: rgba(255, 255, 255, .1);--hud-border: rgba(255, 255, 255, .22);--hud-fg: #D2CDDE;--hud-hover-bg: rgba(255, 255, 255, .17);--hud-hover-fg: #FFFFFF;--hud-hover-border: rgba(255, 255, 255, .32);--hud-active-bg: rgba(255, 255, 255, .24);--stn-fg: #4A4460;--stn-hover-fg: #8A84A0;--stn-hover-bg: rgba(255, 255, 255, .05);--stn-active-bg: rgba(255, 255, 255, .09);--ctrl-bg: rgba(14, 12, 20, .88);--ctrl-border: rgba(255, 255, 255, .07);--ctrl-shadow: rgba(0, 0, 0, .6);--ctrl-shadow2: rgba(0, 0, 0, .4);--ctrl-fade: rgba(14, 12, 20, .94);--divider: rgba(255, 255, 255, .06);--tile-bg: rgba(255, 255, 255, .03);--tile-border: rgba(255, 255, 255, .05);--tile-hover-bg: rgba(255, 92, 61, .1);--tile-hover-border: rgba(255, 92, 61, .3);--tile-hover-desc: #6A6485;--tile-active-bg: rgba(255, 92, 61, .16);--size-fg: #BAB4CC;--size-hover-bg: rgba(255, 255, 255, .13);--size-hover-fg: #FFFFFF;--size-active-bg: rgba(255, 255, 255, .17);--app-title: rgba(255, 255, 255, .08);--app-accent: rgba(255, 92, 61, .35);--cta-fg: rgba(255, 255, 255, .2);--btn-text: #16151A}html[data-theme=light]{--page-bg: #ECEAE3;--overlay-bg: rgba(224, 221, 212, .92);--congrats-bg: rgba(224, 221, 212, .72);--card-bg: rgba(250, 248, 242, .96);--card-border: rgba(0, 0, 0, .09);--card-shadow: rgba(0, 0, 0, .16);--card-ring: rgba(255, 92, 61, .08);--text-title: rgba(22, 18, 30, .92);--text-body: #6A6480;--text-sub: #7A7490;--text-desc: #8A84A0;--text-brand: rgba(0, 0, 0, .28);--accent: #E04828;--accent-dim: rgba(200, 55, 30, .6);--accent-hover: #C83A1A;--accent-ring: rgba(200, 55, 30, .28);--accent-ring-hov: rgba(200, 55, 30, .4);--hud-bg: rgba(0, 0, 0, .06);--hud-border: rgba(0, 0, 0, .24);--hud-fg: #33304A;--hud-hover-bg: rgba(0, 0, 0, .12);--hud-hover-fg: #16121E;--hud-hover-border: rgba(0, 0, 0, .36);--hud-active-bg: rgba(0, 0, 0, .16);--stn-fg: #7A7492;--stn-hover-fg: #2A2440;--stn-hover-bg: rgba(0, 0, 0, .06);--stn-active-bg: rgba(0, 0, 0, .1);--ctrl-bg: rgba(246, 244, 237, .94);--ctrl-border: rgba(0, 0, 0, .09);--ctrl-shadow: rgba(0, 0, 0, .14);--ctrl-shadow2: rgba(0, 0, 0, .08);--ctrl-fade: rgba(246, 244, 237, .94);--divider: rgba(0, 0, 0, .09);--tile-bg: rgba(0, 0, 0, .03);--tile-border: rgba(0, 0, 0, .07);--tile-hover-bg: rgba(200, 55, 30, .08);--tile-hover-border: rgba(200, 55, 30, .26);--tile-hover-desc: #7A7490;--tile-active-bg: rgba(200, 55, 30, .13);--size-fg: #4A4464;--size-hover-bg: rgba(0, 0, 0, .1);--size-hover-fg: #16121E;--size-active-bg: rgba(0, 0, 0, .14);--app-title: rgba(0, 0, 0, .2);--app-accent: rgba(200, 55, 30, .5);--cta-fg: rgba(0, 0, 0, .38);--btn-text: #FAFAF8}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}html,body{width:100%;height:100%;overflow:hidden;background:var(--page-bg);font-family:Space Mono,Courier New,monospace;color:var(--text-body);-webkit-tap-highlight-color:transparent;transition:background .3s ease}#canvas{position:fixed;inset:0;display:block;cursor:crosshair;touch-action:none}#welcome{position:fixed;inset:0;background:var(--overlay-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);z-index:200;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:opacity .38s ease;padding:24px}#welcome.hiding{opacity:0;pointer-events:none}#welcome-card{text-align:center;max-width:720px;width:100%;padding:clamp(28px,4vw,56px) clamp(24px,3.5vw,52px) clamp(24px,3.5vw,48px);background:var(--card-bg);border:1px solid var(--card-border);border-radius:20px;box-shadow:0 32px 80px var(--card-shadow),0 0 0 1px var(--card-ring);pointer-events:auto}#welcome-brand{font-size:clamp(10px,1.1vw,13px);letter-spacing:.16em;color:var(--text-brand);margin-bottom:20px;text-transform:lowercase}#welcome-brand span{color:var(--accent-dim)}#welcome-title{font-size:clamp(24px,5vw,46px);font-weight:700;color:var(--text-title);letter-spacing:-.01em;margin-bottom:6px;line-height:1.15}#welcome-sub{font-size:clamp(12px,1.5vw,18px);color:var(--text-sub);margin-bottom:26px;letter-spacing:.05em}#welcome-list{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,18px) clamp(8px,1.1vw,14px);margin-bottom:28px;text-align:left}#welcome-list li{display:flex;flex-direction:column;gap:clamp(3px,.5vw,6px);padding:clamp(8px,1.1vw,15px) clamp(10px,1.4vw,18px);background:var(--tile-bg);border-radius:8px;border:1px solid var(--tile-border);cursor:pointer;transition:background .14s ease,border-color .14s ease,transform .1s ease;user-select:none;-webkit-user-select:none}#welcome-list li:hover{background:var(--tile-hover-bg);border-color:var(--tile-hover-border)}#welcome-list li:hover .wl-tag{color:var(--accent-hover)}#welcome-list li:hover .wl-desc{color:var(--tile-hover-desc)}#welcome-list li:active{transform:scale(.96);background:var(--tile-active-bg)}#welcome-list li:focus-visible{outline:2px solid var(--accent);outline-offset:2px}#welcome-list li[data-station=paper]{background:#d2bc9417;border-color:#d2bc9438}#welcome-list li[data-station=glass]{background:#78c6eb17;border-color:#78c6eb38}#welcome-list li[data-station=pop]{background:#d78e6917;border-color:#d78e6938}#welcome-list li[data-station=slime]{background:#58d25017;border-color:#58d25038}#welcome-list li[data-station=squish]{background:#d2943417;border-color:#d2943438}#welcome-list li[data-station=ice]{background:#64c0e417;border-color:#64c0e438}#welcome-list li[data-station=sand]{background:#c29e5817;border-color:#c29e5838}#welcome-list li[data-station=bubble]{background:#948ade17;border-color:#948ade38}#welcome-list li[data-station=crisp]{background:#c69e3e17;border-color:#c69e3e38}#welcome-list li[data-station=peel]{background:#c6443717;border-color:#c6443738}html[data-theme=light] #welcome-list li[data-station=paper]{background:#d2bc9424;border-color:#d2bc9452}html[data-theme=light] #welcome-list li[data-station=glass]{background:#78c6eb21;border-color:#78c6eb4d}html[data-theme=light] #welcome-list li[data-station=pop]{background:#d78e6921;border-color:#d78e694d}html[data-theme=light] #welcome-list li[data-station=slime]{background:#58d25021;border-color:#58d2504d}html[data-theme=light] #welcome-list li[data-station=squish]{background:#d2943421;border-color:#d294344d}html[data-theme=light] #welcome-list li[data-station=ice]{background:#64c0e424;border-color:#64c0e452}html[data-theme=light] #welcome-list li[data-station=sand]{background:#c29e5821;border-color:#c29e584d}html[data-theme=light] #welcome-list li[data-station=bubble]{background:#948ade21;border-color:#948ade4d}html[data-theme=light] #welcome-list li[data-station=crisp]{background:#c69e3e21;border-color:#c69e3e4d}html[data-theme=light] #welcome-list li[data-station=peel]{background:#c6443721;border-color:#c644374d}#welcome-list li[data-station=paper] .wl-tag{color:#c8a870}#welcome-list li[data-station=glass] .wl-tag{color:#6bbde8}#welcome-list li[data-station=pop] .wl-tag{color:#d08060}#welcome-list li[data-station=slime] .wl-tag{color:#58d250}#welcome-list li[data-station=squish] .wl-tag{color:#d49434}#welcome-list li[data-station=ice] .wl-tag{color:#5cb8dc}#welcome-list li[data-station=sand] .wl-tag{color:#bf9848}#welcome-list li[data-station=bubble] .wl-tag{color:#9088de}#welcome-list li[data-station=crisp] .wl-tag{color:#c09838}#welcome-list li[data-station=peel] .wl-tag{color:#c84438}html[data-theme=light] #welcome-list li[data-station=paper] .wl-tag{color:#8b6a3a}html[data-theme=light] #welcome-list li[data-station=glass] .wl-tag{color:#2a7aaa}html[data-theme=light] #welcome-list li[data-station=pop] .wl-tag{color:#a05030}html[data-theme=light] #welcome-list li[data-station=slime] .wl-tag{color:#2a8a24}html[data-theme=light] #welcome-list li[data-station=squish] .wl-tag{color:#906418}html[data-theme=light] #welcome-list li[data-station=ice] .wl-tag{color:#2888aa}html[data-theme=light] #welcome-list li[data-station=sand] .wl-tag{color:#7a6020}html[data-theme=light] #welcome-list li[data-station=bubble] .wl-tag{color:#5048b0}html[data-theme=light] #welcome-list li[data-station=crisp] .wl-tag{color:#886020}html[data-theme=light] #welcome-list li[data-station=peel] .wl-tag{color:#902e24}.station-btn[data-station=paper].active,.station-btn[data-station=paper]:hover{color:#c8a870}.station-btn[data-station=glass].active,.station-btn[data-station=glass]:hover{color:#6bbde8}.station-btn[data-station=pop].active,.station-btn[data-station=pop]:hover{color:#d08060}.station-btn[data-station=slime].active,.station-btn[data-station=slime]:hover{color:#58d250}.station-btn[data-station=squish].active,.station-btn[data-station=squish]:hover{color:#d49434}.station-btn[data-station=ice].active,.station-btn[data-station=ice]:hover{color:#5cb8dc}.station-btn[data-station=sand].active,.station-btn[data-station=sand]:hover{color:#bf9848}.station-btn[data-station=bubble].active,.station-btn[data-station=bubble]:hover{color:#9088de}.station-btn[data-station=crisp].active,.station-btn[data-station=crisp]:hover{color:#c09838}.station-btn[data-station=peel].active,.station-btn[data-station=peel]:hover{color:#c84438}html[data-theme=light] .station-btn[data-station=paper].active,html[data-theme=light] .station-btn[data-station=paper]:hover{color:#8b6a3a}html[data-theme=light] .station-btn[data-station=glass].active,html[data-theme=light] .station-btn[data-station=glass]:hover{color:#2a7aaa}html[data-theme=light] .station-btn[data-station=pop].active,html[data-theme=light] .station-btn[data-station=pop]:hover{color:#a05030}html[data-theme=light] .station-btn[data-station=slime].active,html[data-theme=light] .station-btn[data-station=slime]:hover{color:#2a8a24}html[data-theme=light] .station-btn[data-station=squish].active,html[data-theme=light] .station-btn[data-station=squish]:hover{color:#906418}html[data-theme=light] .station-btn[data-station=ice].active,html[data-theme=light] .station-btn[data-station=ice]:hover{color:#2888aa}html[data-theme=light] .station-btn[data-station=sand].active,html[data-theme=light] .station-btn[data-station=sand]:hover{color:#7a6020}html[data-theme=light] .station-btn[data-station=bubble].active,html[data-theme=light] .station-btn[data-station=bubble]:hover{color:#5048b0}html[data-theme=light] .station-btn[data-station=crisp].active,html[data-theme=light] .station-btn[data-station=crisp]:hover{color:#886020}html[data-theme=light] .station-btn[data-station=peel].active,html[data-theme=light] .station-btn[data-station=peel]:hover{color:#902e24}.wl-tag{font-size:clamp(9px,1.05vw,13px);font-weight:700;color:var(--accent);letter-spacing:.16em;line-height:1}.wl-desc{font-size:clamp(9px,.95vw,12px);color:var(--text-desc);letter-spacing:.04em;line-height:1.3}#welcome-cta{font-size:clamp(9px,1vw,12px);font-weight:700;letter-spacing:.24em;color:var(--cta-fg);animation:welcome-pulse 2.2s ease-in-out infinite}@keyframes welcome-pulse{0%,to{opacity:.45}50%{opacity:1}}#congrats{position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--congrats-bg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;visibility:hidden;pointer-events:none;cursor:pointer;transition:opacity .34s ease,visibility .34s ease}#congrats.show{opacity:1;visibility:visible;pointer-events:auto}#congrats-card{text-align:center;max-width:420px;width:100%;padding:38px 32px 34px;background:var(--card-bg);border:1px solid var(--card-border);border-radius:20px;box-shadow:0 32px 80px var(--card-shadow),0 0 0 1px var(--card-ring);pointer-events:auto;transform:scale(.92);transition:transform .34s cubic-bezier(.18,.9,.32,1.2)}#congrats.show #congrats-card{transform:scale(1)}#congrats-brand{font-size:10px;letter-spacing:.16em;color:var(--text-brand);margin-bottom:18px;text-transform:lowercase}#congrats-brand span{color:var(--accent-dim)}#congrats-title{font-size:clamp(20px,4.6vw,28px);font-weight:700;color:var(--text-title);letter-spacing:-.01em;line-height:1.15;margin-bottom:8px}#congrats-sub{font-size:12px;color:var(--text-sub);letter-spacing:.05em;margin-bottom:26px}#congrats-btn{font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--btn-text);background:var(--accent);border:none;border-radius:9px;padding:13px 30px;min-height:46px;cursor:pointer;box-shadow:0 10px 30px var(--accent-ring);transition:background .15s ease,transform .1s ease,box-shadow .15s ease}#congrats-btn:hover{background:var(--accent-hover);box-shadow:0 12px 36px var(--accent-ring-hov)}#congrats-btn:active{transform:scale(.96)}#congrats-btn:focus-visible{outline:2px solid var(--text-title);outline-offset:3px}#app-title{position:fixed;top:18px;left:24px;font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--app-title);text-transform:lowercase;-webkit-user-select:none;user-select:none;z-index:10;pointer-events:none}#app-title span{color:var(--app-accent)}#hud{position:fixed;top:14px;right:18px;display:flex;gap:6px;z-index:10}.hud-btn{background:var(--hud-bg);border:1px solid var(--hud-border);color:var(--hud-fg);padding:7px 12px;min-height:44px;border-radius:7px;font-family:inherit;font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;cursor:pointer;transition:background .15s,color .15s,border-color .15s;display:flex;align-items:center;gap:5px;user-select:none;-webkit-user-select:none}.hud-btn:hover{background:var(--hud-hover-bg);color:var(--hud-hover-fg);border-color:var(--hud-hover-border)}.hud-btn:active{background:var(--hud-active-bg)}.hud-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.hud-btn.muted .mute-icon:after{content:"🔇"}#tool-size{display:flex;align-items:center;gap:2px;background:var(--hud-bg);border:1px solid var(--hud-border);border-radius:7px;padding:0 6px;height:44px}.size-btn{background:transparent;border:1px solid transparent;border-radius:6px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--size-fg);transition:background .15s,color .15s;touch-action:manipulation;-webkit-user-select:none;user-select:none}.size-btn:hover{background:var(--size-hover-bg);color:var(--size-hover-fg)}.size-btn:active{background:var(--size-active-bg)}.size-btn.active{color:#fff;background:var(--accent);box-shadow:0 2px 12px var(--accent-ring)}.size-btn.active:hover{background:var(--accent-hover);color:#fff}.size-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.size-dot{display:block;border-radius:50%;background:currentColor;flex-shrink:0}[data-size=s] .size-dot{width:8px;height:8px}[data-size=m] .size-dot{width:12px;height:12px}[data-size=l] .size-dot{width:17px;height:17px}#control-bar{position:fixed;bottom:26px;left:50%;transform:translate(-50%);max-width:calc(100vw - 48px);background:var(--ctrl-bg);border:1px solid var(--ctrl-border);border-radius:12px;padding:5px 0;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);z-index:10;box-shadow:0 12px 40px var(--ctrl-shadow),0 2px 8px var(--ctrl-shadow2);overflow:hidden}#control-bar:before,#control-bar:after{content:"";position:absolute;top:0;bottom:0;width:48px;pointer-events:none;z-index:2;transition:opacity .18s ease;opacity:0}#control-bar:before{left:0;background:linear-gradient(to right,var(--ctrl-fade) 0%,transparent 100%)}#control-bar:after{right:0;background:linear-gradient(to left,var(--ctrl-fade) 0%,transparent 100%)}#control-bar.can-scroll-left:before{opacity:1}#control-bar.can-scroll-right:after{opacity:1}#station-scroll{display:flex;align-items:center;gap:2px;padding:0 8px;overflow-x:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:pan-x;scrollbar-width:none;cursor:grab}#station-scroll::-webkit-scrollbar{display:none}#station-scroll.is-dragging{cursor:grabbing;-webkit-user-select:none;user-select:none;scroll-behavior:auto}.station-btn{background:transparent;border:1px solid transparent;color:var(--stn-fg);padding:0 14px;height:44px;border-radius:8px;font-family:inherit;font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;cursor:pointer;transition:background .16s ease,color .16s ease,border-color .16s ease;user-select:none;-webkit-user-select:none;white-space:nowrap;flex-shrink:0;touch-action:manipulation}.station-btn:hover{color:var(--stn-hover-fg);background:var(--stn-hover-bg)}.station-btn:active{background:var(--stn-active-bg)}.station-btn.active{color:var(--accent);background:#ff5c3d1a;border-color:#ff5c3d38}html[data-theme=light] .station-btn.active{background:#c8371e1a;border-color:#c8371e38}.station-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.station-btn[aria-pressed=true]{color:var(--accent)}.control-divider{width:1px;height:18px;background:var(--divider);margin:0 1px;flex-shrink:0}@media(min-width:1024px){#welcome-card{border-radius:24px}#welcome-list li{border-radius:10px}}@media(max-width:480px){#welcome-card{padding:28px 20px 24px;border-radius:16px}#welcome-list{grid-template-columns:repeat(2,1fr);gap:8px 6px}#welcome-list li{gap:3px;padding:8px 10px}#welcome-title{font-size:24px}#control-bar{bottom:14px;border-radius:10px;max-width:calc(100vw - 20px)}#station-scroll{padding:0 6px;gap:1px}.station-btn{padding:0 11px;font-size:9px;letter-spacing:.12em}#app-title{font-size:11px;top:12px;left:12px}#hud{top:8px;right:10px;gap:4px}.hud-btn{padding:6px 10px;min-height:40px}.hud-label{display:none}}@media(min-width:481px)and (max-width:900px){#welcome-list{grid-template-columns:repeat(3,1fr)}#control-bar{bottom:20px}}@media(prefers-reduced-motion:reduce){.station-btn,.hud-btn{transition:none}#welcome-cta{animation:none;opacity:.6}#congrats,#congrats-card{transition:opacity .2s ease,visibility .2s ease}#congrats-card,#congrats.show #congrats-card{transform:none}}
