:root{--text:#3d382f;--surface-body:linear-gradient(145deg, #f6f2ec 0%, #efe9e0 100%);--surface-edge:#ffffffb3;--glass-bg:#fdfcfa6b;--glass-edge:#ffffffbf;--glass-glow:0 4px 22px #3d382f29, inset 0 1px 0 #fff9;--neon:#ff7a1a;--neon-edge:#ff7a1a80;--neon-halo:#ff7a1a47}[data-theme=dark]{--text:#e8e2d8;--surface-body:linear-gradient(145deg, #17150f 0%, #100f0d 100%);--surface-edge:#ffffff0f;--glass-bg:#1c1a1775;--glass-edge:#ffffff21;--glass-glow:0 4px 26px #0000008c, inset 0 1px 0 #ffffff14;--neon:#ff8c3a;--neon-edge:#ff8c3a99;--neon-halo:#ff8c3a6b}*{box-sizing:border-box}html,body,#root{height:100%}body{color:var(--text);background:var(--surface-body);overscroll-behavior:none;-webkit-user-select:none;user-select:none;margin:0;font-family:Segoe UI,Noto Sans Thai,Inter,sans-serif;overflow:hidden}.bg-layer{z-index:0;pointer-events:none;position:fixed;inset:0}.stage{z-index:1;touch-action:none;cursor:crosshair;position:fixed;inset:0}.ink-canvas{width:100%;height:100%;position:absolute;inset:0}.eraser-cursor{z-index:2;border:1.5px solid var(--neon);background:color-mix(in srgb, var(--neon) 12%, transparent);box-shadow:0 0 10px var(--neon-halo);pointer-events:none;border-radius:50%;position:absolute;top:0;left:0}.glass-capsule{background:var(--glass-bg);-webkit-backdrop-filter:blur(14px)saturate(1.35);border:1px solid var(--glass-edge);box-shadow:var(--glass-glow)}.toolbar{z-index:10;border-radius:22px;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px;max-width:min(96vw,900px);padding:6px 12px;display:flex;position:fixed;top:10px;left:50%;transform:translate(-50%)}.tb-btn{min-width:46px;color:inherit;font:inherit;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:14px;flex-direction:column;align-items:center;gap:1px;padding:5px 7px;font-size:17px;line-height:1.1;transition:box-shadow .15s,background .15s,color .15s;display:inline-flex}.tb-btn small{opacity:.75;font-size:10px}.tb-btn:hover:not(:disabled){background:color-mix(in srgb, var(--neon) 10%, transparent)}.tb-btn.active{border-color:var(--neon-edge);box-shadow:0 0 0 1px var(--neon-edge), 0 0 14px var(--neon-halo);color:var(--neon)}.tb-btn:disabled{opacity:.35;cursor:default}.tb-zoom{font-family:JetBrains Mono,Consolas,monospace;font-size:13px}.tb-sep{background:var(--glass-edge);align-self:stretch;width:1px;margin:6px 3px}.tb-swatches{align-items:center;gap:5px;padding:0 4px;display:inline-flex}.swatch{border:2px solid var(--glass-edge);cursor:pointer;border-radius:50%;width:22px;height:22px;padding:0;box-shadow:0 1px 4px #00000040}.swatch.active{outline:2px solid var(--neon);outline-offset:2px}.tb-size{align-items:center;padding:0 4px;display:inline-flex}.tb-slider{width:90px;accent-color:var(--neon)}.tb-toggle{opacity:.9;align-items:center;gap:4px;font-size:12px;display:inline-flex}.tb-toggle input{accent-color:var(--neon)}.debug-btn{z-index:20;cursor:pointer;width:44px;height:44px;color:inherit;border-radius:50%;font-size:20px;position:fixed;bottom:12px;right:12px}.debug-btn.active{box-shadow:0 0 0 1px var(--neon-edge), 0 0 14px var(--neon-halo)}.debug-panel{z-index:20;border-radius:14px;flex-direction:column;gap:6px;width:min(320px,90vw);max-height:42vh;padding:10px;font-family:JetBrains Mono,Consolas,monospace;font-size:10px;line-height:1.5;display:flex;position:fixed;bottom:64px;right:12px}.debug-actions{gap:6px;display:flex}.debug-actions button{border:1px solid var(--glass-edge);color:inherit;font:inherit;cursor:pointer;background:0 0;border-radius:8px;flex:1;padding:6px}.debug-list{-webkit-user-select:text;user-select:text;overflow-y:auto}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}