:root{--bg: #e9e9e7;--panel: #ffffff;--line: #d6d6d3;--ink: #111111;--muted: #7a7a78;--accent: #e5322d;--shadow: 0 16px 48px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .08);--chamfer: 7px;--panel-width: 208px}@media (prefers-color-scheme: dark){:root{--bg: #121212;--panel: #1a1a1a;--line: #2b2b2b;--ink: #f2f2f2;--muted: #8c8c8c;--shadow: 0 16px 48px rgba(0, 0, 0, .6), 0 1px 2px rgba(0, 0, 0, .5)}}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;height:100%;overflow:hidden}body{font-family:Quantico,system-ui,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;user-select:none;-webkit-user-select:none;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}#app{display:grid;grid-template-columns:var(--panel-width) minmax(0,1fr);height:100dvh}.panel{display:flex;flex-direction:column;gap:14px;padding:18px;background:var(--panel);border-right:1px solid var(--line);overflow-y:auto;min-height:0}.brand{display:block;line-height:0}.logo{width:100%;aspect-ratio:1;display:block}.group{display:flex;flex-direction:column;gap:6px}.row{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px}.label{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:4px 0 -2px}button{--c: var(--chamfer);-webkit-appearance:none;-moz-appearance:none;appearance:none;font:inherit;font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;height:40px;padding:0 12px;border:0;border-radius:0;background:var(--ink);color:var(--panel);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;touch-action:manipulation;clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c));transition:background-color .12s ease,color .12s ease,box-shadow .12s ease,opacity .12s ease}button:hover{box-shadow:inset 0 0 0 2px var(--accent)}button:active{background:var(--accent);color:#fff;box-shadow:none}button:disabled{opacity:.3;cursor:default;box-shadow:none}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}button.ghost:hover{box-shadow:inset 0 0 0 2px var(--accent);color:var(--accent)}button.ghost:active{background:var(--accent);color:#fff;box-shadow:none}button.ghost[aria-pressed=false]{opacity:.45}button.icon{padding:0}button svg{width:16px;height:16px;display:block}.palette{gap:4px}.palette button{height:34px;background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}.palette button svg{width:14px;height:14px}.palette button:hover{box-shadow:inset 0 0 0 2px var(--accent);color:var(--accent)}.palette button[aria-pressed=true],.palette button[aria-pressed=true]:hover{background:var(--accent);color:#fff;box-shadow:none}.stepper{display:grid;grid-template-columns:40px 1fr 40px;gap:6px;align-items:center}.stepper button{font-size:20px}.stepper output{text-align:center;font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}.hints{font-size:11px;line-height:1.9;color:var(--muted);margin-top:4px}.hints kbd{font:inherit;font-weight:700;color:var(--ink)}.hints kbd+kbd{margin-left:2px}.footer{margin-top:auto;padding-top:10px;display:flex;align-items:center;justify-content:space-between;gap:8px}button.small{--c: 5px;height:28px;width:28px;background:transparent;color:var(--muted);box-shadow:inset 0 0 0 2px var(--line)}button.small svg{width:14px;height:14px}button.small:hover{color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)}button.small[aria-pressed=false] .wave{display:none}.credit{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-decoration:none}.credit:hover{color:var(--accent)}.stage{position:relative;display:grid;place-items:center;padding:28px;min-width:0;min-height:0;overflow:hidden}.canvas-wrap{position:relative;background:#fff;box-shadow:var(--shadow);transition:outline-color .15s ease;outline:3px dashed transparent;outline-offset:8px}.stage.dropping .canvas-wrap{outline-color:var(--accent)}.canvas-wrap canvas{position:absolute;top:0;right:0;bottom:0;left:0;display:block;touch-action:none}@media (hover: hover){.canvas-wrap canvas{cursor:none}}.toast{position:absolute;left:50%;bottom:20px;transform:translate(-50%,8px);padding:10px 14px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--ink);color:var(--panel);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}.toast.show{opacity:1;transform:translate(-50%)}@media (max-width: 720px){#app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}.panel{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px;padding:10px max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left));padding-top:max(10px,env(safe-area-inset-top));border-right:0;border-bottom:1px solid var(--line);overflow:visible}.brand{flex:0 0 auto}.logo{width:44px}.group{flex-direction:row;align-items:center;gap:6px}.label,.hints,.credit{display:none}.footer{margin-top:0;padding-top:0}button.small{height:44px;width:44px}.row{grid-auto-columns:auto;gap:6px}button,.palette button{height:44px}button.icon{width:44px}.palette{gap:6px}.palette button svg{width:16px;height:16px}.stepper{grid-template-columns:44px 48px 44px}.stepper output{font-size:20px}.stage{align-content:start;padding:12px max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}}@media (pointer: coarse){.hints{display:none}}