:root{--bg:#f1ece1;--paper:#f1ece1;--surface:#fdfbf7;--surface-soft:#ffffff8c;--surface-hover:#fff;--ink:#1c1a17;--ink-soft:#6b655c;--line:#1c1a171a;--line-strong:#1c1a172e;--accent:#b4530a;--accent-hover:#97450a;--accent-soft:#f6e6d3;--mori:#7c3aed;--live:#e11d48;--on-accent:#fff;--glass:#fcfaf5b3;--glass-border:#ffffffa6;--dot:#1c1a170e;--scrim:#1c1a176b;--shadow:0 10px 30px -12px #1c1a174d, 0 3px 8px -3px #1c1a171f;--ui:"Hanken Grotesk", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;--display:"Fraunces", "Noto Sans TC", serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}[data-theme=dark]{--bg:#1e201c;--paper:#1e201c;--surface:#2a2c27;--surface-soft:#ece7dc12;--surface-hover:#33352f;--ink:#ece7dc;--ink-soft:#9c968b;--line:#ece7dc21;--line-strong:#ece7dc3d;--accent:#d9762a;--accent-hover:#e8853a;--accent-soft:#d9762a2e;--mori:#a78bfa;--live:#f43f5e;--on-accent:#fff;--glass:#21231ebd;--glass-border:#ece7dc1f;--dot:#ece7dc0f;--scrim:#0009;--shadow:0 12px 34px -12px #0009, 0 3px 8px -3px #00000073;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}::-webkit-scrollbar{width:11px;height:11px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--line-strong);background-clip:padding-box;border:3px solid #0000;border-radius:8px}::-webkit-scrollbar-thumb:hover{background:var(--ink-soft);background-clip:padding-box}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--ui);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;transition:background .3s,color .3s}.board-bg{background-color:var(--paper);background-image:radial-gradient(var(--dot) 1.1px, transparent 1.1px);background-position:-1px -1px;background-size:24px 24px}.glass{background:var(--glass);-webkit-backdrop-filter:blur(16px)saturate(1.3);border:1px solid var(--glass-border);box-shadow:var(--shadow);border-radius:16px}.muted{color:var(--ink-soft)}.accent-text{color:var(--accent)}.code{font-family:var(--display);letter-spacing:.04em;font-weight:600}button{font-family:var(--ui);color:var(--ink);background:var(--surface-soft);border:1px solid var(--line);cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent;border-radius:10px;padding:6px 11px;font-size:13px;font-weight:500;transition:transform 80ms,background .15s,box-shadow .15s,border-color .15s,filter .15s}button:hover{background:var(--surface-hover);border-color:var(--line-strong);box-shadow:0 2px 10px -4px #00000038}button:active{transform:translateY(1px)scale(.98)}button:disabled{opacity:.4;cursor:default;box-shadow:none}.btn{font:500 13px var(--ui);color:var(--ink);background:var(--surface-soft);border:1px solid var(--line);cursor:pointer;border-radius:10px;padding:6px 11px}.btn-accent{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}.btn-accent:hover{background:var(--accent-hover);border-color:var(--accent-hover);box-shadow:none}.btn-soft{background:var(--accent-soft);color:var(--accent);border-color:color-mix(in srgb, var(--accent) 32%, var(--line))}.btn-soft:hover{background:color-mix(in srgb, var(--accent) 16%, var(--surface));border-color:var(--accent);box-shadow:none}.btn-on{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}.btn-on:hover{background:color-mix(in srgb, var(--accent) 16%, var(--surface));border-color:var(--accent);box-shadow:none}.btn-primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}.btn-primary:hover{background:var(--ink);border-color:var(--ink);filter:brightness(1.12);box-shadow:none}.btn-rec{background:var(--ink);color:var(--bg);border-color:var(--ink)}.btn-rec:hover{background:var(--ink);border-color:var(--ink);filter:brightness(1.12);box-shadow:none}.btn-rec.live{background:var(--live);color:#fff;border-color:var(--live);animation:1.6s ease-in-out infinite livePulse}.btn-rec.live:hover{background:var(--live);border-color:var(--live);filter:brightness(1.08)}.btn-danger{color:var(--live);border-color:color-mix(in srgb, var(--live) 40%, var(--line));background:var(--surface-soft)}.btn-danger:hover{background:color-mix(in srgb, var(--live) 12%, var(--surface));border-color:var(--live);box-shadow:none}.toolstrip{z-index:1000;flex-direction:column;gap:6px;display:flex;position:fixed;top:78px;left:14px}.tool{width:60px;min-height:50px;color:var(--ink);background:var(--glass);border:1px solid var(--glass-border);cursor:pointer;box-shadow:var(--shadow);-webkit-tap-highlight-color:transparent;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:3px;padding:7px 4px;font-size:11px;line-height:1.1;transition:transform 80ms,background .15s,border-color .15s;display:flex}.tool:hover{background:var(--surface-hover);border-color:var(--line-strong)}.tool:active{transform:translateY(1px)scale(.97)}.tool:disabled{opacity:.4;cursor:default}.tool.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.tool-divider{background:var(--line);height:1px;margin:2px 6px}input,textarea,select{font-family:var(--ui)}textarea,input:not([type=radio]):not([type=checkbox]):not([type=range]){background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:7px 9px}textarea::placeholder,input::placeholder{color:var(--ink-soft);opacity:.8}input:focus,textarea:focus,select:focus{outline:2px solid var(--accent);outline-offset:0;border-color:#0000}.scrim{z-index:3000;background:var(--scrim);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.dialog-card{background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:18px;padding:22px}@keyframes livePulse{0%,to{box-shadow:0 0 #e11d4873}50%{box-shadow:0 0 0 9px #e11d4800}}@keyframes fadeScale{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}@keyframes floatIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}.float-in{animation:.4s cubic-bezier(.2,.8,.2,1) both floatIn}.modal-in{animation:.22s cubic-bezier(.2,.8,.2,1) both fadeScale}.live{animation:1.6s ease-in-out infinite livePulse}.rec-dot{vertical-align:middle;background:#e11d48;border-radius:50%;flex:none;width:11px;height:11px;margin-right:9px;display:inline-block}.btn-rec.live .rec-dot{background:#fff;border-radius:2px}.konvajs-content{touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}@media (prefers-reduced-motion:reduce){*,.float-in,.modal-in,.live,.btn-rec.live{animation:none!important}}@media (width<=700px){button,.btn{font-size:14px}.btn-rec,.btn-accent,.btn-soft,.btn-primary,.btn-danger,.btn-on{min-height:44px;padding:11px 14px}input,textarea,select{font-size:16px!important}.toolstrip{top:calc(74px + env(safe-area-inset-top,0px));background:var(--surface);scrollbar-width:none;border-radius:13px;flex-direction:row;gap:5px;padding:5px 7px;left:8px;right:8px;overflow-x:auto;box-shadow:0 4px 16px #1c1a171a}.toolstrip::-webkit-scrollbar{display:none}.toolstrip .tool{flex:none;gap:0;min-height:44px;padding:10px;font-size:0}.toolstrip .tool svg{width:22px;height:22px;margin:0}.tool-divider{flex:none;align-self:center;width:1px;height:24px;margin:0 2px}}