:root{--bg:#e9e9ec;--ink:#1d1d22;--muted:#6b6b75;--panel:#ffffffd1;--line:#00000014;--accent:#1d1d22;--radius:14px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--ink);-webkit-tap-highlight-color:transparent;overscroll-behavior:none;margin:0;font:15px/1.4 system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;overflow:hidden}#stage{touch-action:none;outline:none;width:100%;height:100%;display:block;position:fixed;top:0;bottom:0;left:0;right:0}#stage.painting{cursor:crosshair}.title{top:max(16px, env(safe-area-inset-top));pointer-events:none;-webkit-user-select:none;user-select:none;position:fixed;left:20px}.title h1{letter-spacing:-.01em;margin:0;font-size:20px;font-weight:650}.hint{color:var(--muted);margin:2px 0 0;font-size:13px;transition:opacity .6s}.hint.hidden{opacity:0}.panel{left:50%;bottom:max(16px, env(safe-area-inset-bottom));background:var(--panel);-webkit-backdrop-filter:blur(14px)saturate(1.4);border:1px solid var(--line);border-radius:var(--radius);-webkit-user-select:none;user-select:none;align-items:center;gap:14px;max-width:calc(100vw - 32px);padding:10px 12px;display:flex;position:fixed;transform:translate(-50%);box-shadow:0 8px 30px #00000014}.row{align-items:center;gap:8px;display:flex}.palette{gap:6px}.swatch{width:28px;height:28px;box-shadow:0 0 0 1px var(--line);cursor:pointer;border:2px solid #fff;border-radius:50%;flex:none;padding:0;transition:transform .12s,box-shadow .12s;position:relative}.swatch:hover{transform:scale(1.08)}.swatch[aria-checked=true]{box-shadow:0 0 0 2px var(--ink);transform:scale(1.1)}.swatch.custom{background:conic-gradient(#e63946,#f4a261,#ffd23f,#2a9d8f,#1d7ae0,#7b2cbf,#e63946);overflow:hidden}.swatch.custom input{opacity:0;cursor:pointer;border:0;width:100%;height:100%;padding:0;position:absolute;top:0;bottom:0;left:0;right:0}.btn{-webkit-appearance:none;appearance:none;border:1px solid var(--line);color:var(--ink);font:inherit;cursor:pointer;white-space:nowrap;background:#fff;border-radius:10px;justify-content:center;align-items:center;gap:6px;height:36px;padding:0 14px;font-size:14px;font-weight:550;transition:background .12s,transform 80ms;display:inline-flex}.btn:hover{background:#f4f4f6}.btn:active{transform:scale(.97)}.btn:focus-visible{outline-offset:2px;outline:2px solid #1d7ae0}.swatch:focus-visible{outline-offset:2px;outline:2px solid #1d7ae0}input[type=range]:focus-visible{outline-offset:2px;outline:2px solid #1d7ae0}.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn.primary:hover{background:#33333b}.btn.icon{min-width:36px;padding:0 10px}.btn svg{width:18px;height:18px}#spin{min-width:64px}#mute .off,#mute[aria-pressed=true] .on{display:none}#mute[aria-pressed=true] .off{display:block}.speed{color:var(--muted);align-items:center;gap:6px;display:flex}.speed svg{flex:none;width:18px;height:18px}input[type=range]{-webkit-appearance:none;appearance:none;cursor:pointer;background:0 0;width:110px;height:24px;margin:0}input[type=range]::-webkit-slider-runnable-track{background:#d6d6dc;border-radius:2px;height:4px}input[type=range]::-moz-range-track{background:#d6d6dc;border-radius:2px;height:4px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:#fff;border:1px solid #0003;border-radius:50%;width:18px;height:18px;margin-top:-7px;box-shadow:0 1px 4px #00000026}input[type=range]::-moz-range-thumb{background:#fff;border:1px solid #0003;border-radius:50%;width:18px;height:18px;box-shadow:0 1px 4px #00000026}.sr{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.divider{background:var(--line);align-self:stretch;width:1px}.info-btn{top:max(14px, env(safe-area-inset-top));border:1px solid var(--line);background:var(--panel);-webkit-backdrop-filter:blur(14px)saturate(1.4);width:40px;height:40px;color:var(--ink);cursor:pointer;z-index:5;border-radius:50%;place-items:center;padding:0;transition:background .12s,transform 80ms;display:grid;position:fixed;right:16px}.info-btn:hover{background:#fff}.info-btn:active{transform:scale(.95)}.info-btn:focus-visible{outline-offset:2px;outline:2px solid #1d7ae0}.info-btn svg{width:22px;height:22px}.info-btn[aria-expanded=true]{opacity:0;pointer-events:none}.setup{border:1px solid var(--line);z-index:10;background:#fff;border-radius:18px;flex-direction:column;width:340px;max-width:calc(100vw - 24px);transition:transform .24s cubic-bezier(.2,.8,.2,1);display:flex;position:fixed;top:12px;bottom:12px;right:12px;transform:translate(calc(100% + 24px));box-shadow:0 12px 40px #0000001f}.setup.open{transform:none}.setup[hidden]{display:none}.setup-head{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding:12px 12px 8px 18px;display:flex}.setup-head h2{margin:0;font-size:16px;font-weight:650}.setup-body{overscroll-behavior:contain;flex:1;padding:4px 18px 12px;overflow-y:auto}.setup-body section{padding:10px 0 4px}.setup-body section+section{border-top:1px solid var(--line)}.setup-body h3{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:4px 0 6px;font-size:11px;font-weight:650}.setting{padding:6px 0}.setting-top{align-items:center;gap:6px;display:flex}.setting-top label{flex:1;font-size:13.5px;font-weight:550}.setting input[type=range]{width:100%;height:22px}.setting input[type=number]{border:1px solid var(--line);width:70px;height:26px;color:var(--ink);font:inherit;font-variant-numeric:tabular-nums;text-align:right;background:#fff;border-radius:7px;padding:0 6px;font-size:13px}.setting input[type=number]:focus-visible{outline-offset:1px;outline:2px solid #1d7ae0}.changed-dot{cursor:pointer;visibility:hidden;background:0 0;border:0;place-items:center;width:18px;height:18px;padding:0;display:grid}.changed-dot:before{content:"";background:#1d7ae0;border-radius:50%;width:8px;height:8px}.changed-dot:hover:before{background:#e63946}.setting.is-changed .changed-dot{visibility:visible}.setting-hint{color:var(--muted);margin:0;font-size:12px;line-height:1.35}.about p{color:var(--muted);margin:0 0 8px;font-size:13px}.about .keys{line-height:2}kbd{border:1px solid var(--line);min-width:20px;color:var(--ink);text-align:center;background:#fff;border-bottom-width:2px;border-radius:5px;padding:0 5px;font:600 11.5px/18px system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;display:inline-block}.setup-foot{border-top:1px solid var(--line);gap:8px;padding:10px 12px 12px;display:flex}.setup-foot .btn{flex:1}@media (max-width:860px){.panel{max-width:none;padding:12px 16px max(12px, env(safe-area-inset-bottom));border-bottom:0;border-left:0;border-right:0;border-radius:18px 18px 0 0;flex-direction:column;align-items:stretch;gap:10px;bottom:0;left:0;right:0;transform:none}.palette{justify-content:space-between}.swatch{width:34px;height:34px}.controls .speed{flex:1}input[type=range]{width:100%;height:32px}.btn{height:44px}.btn.icon{min-width:44px}.actions .btn:not(.icon){flex:1}input[type=range]::-webkit-slider-thumb{width:24px;height:24px;margin-top:-10px}input[type=range]::-moz-range-thumb{width:24px;height:24px}.setup{top:max(8px, env(safe-area-inset-top));border-radius:18px 18px 0 0;width:auto;max-width:none;bottom:0;left:0;right:0;transform:translateY(100%)}.setup-foot{padding-bottom:max(12px, env(safe-area-inset-bottom))}.setup-foot .btn{height:44px}.setting input[type=number]{width:78px;height:32px;font-size:16px}}@media (max-width:380px){.swatch{width:28px;height:28px}}