:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--ground:#f4f4f1;--canvas:#fdfdfb;--ink:#282724;--ochre:#c6920f;--brown:#8b6042;--rose:#dc4179;--blue:#2f62cf;--violet:#7b4fd0;--green:#2e9a58;--copper:#d8472b;--teal:#1c99a6;--secondary:#5d5c5a;--muted:#888785;--line:#cfcfcd;--fill:#d9d9d6;--select:2px;--radius:6px;--radius-sheet:8px;--mono:ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;font-family:var(--mono);background:var(--ground);color:var(--ink);font-synthesis:none}*{box-sizing:border-box}body{min-width:320px;margin:0}button,a,select,input,textarea{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;background:0 0;border:0}button:disabled{opacity:.28;cursor:default}button,a,select,input,textarea{outline-offset:3px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--ink)}button{transition:color .12s,background .12s}a{color:inherit;text-decoration:none}button svg{flex:none}input[type=checkbox]{accent-color:var(--ink);margin:0}#audio-diagnostics{font:9px var(--mono);background:var(--canvas);white-space:pre-wrap;pointer-events:none;max-width:95vw;position:fixed;bottom:4px;left:12px}@media (prefers-reduced-motion:reduce){*{transition:none!important}}.hover-label{z-index:10;background:var(--ink);color:var(--canvas);white-space:nowrap;pointer-events:none;opacity:0;border-radius:4px;padding:4px 8px;font-size:11px;font-weight:400;transition:opacity .12s;position:absolute;top:50%;left:calc(100% + 8px);transform:translateY(-50%)}@media (hover:hover){:hover>.hover-label{opacity:1}}:focus-visible>.hover-label,.announce>.hover-label{opacity:1}.workspace:not(.controls-left) .sidebar .hover-label{left:auto;right:calc(100% + 8px)}@media (width<=800px){.hover-label,.workspace:not(.controls-left) .sidebar .hover-label{inset:auto auto calc(100% + 6px) 50%;transform:translate(-50%)}}@media (prefers-reduced-motion:reduce){.hover-label{transition:none}}.app-shell{height:100dvh;min-height:540px;padding:max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));flex-direction:column;display:flex;position:relative}.sheet.scenic{--sheet-fill:transparent}.sheet .canvas-host{z-index:1;position:relative}.sheet:after{z-index:2}.workspace{--panel:80px;--sound-panel:288px;grid-template-columns:var(--panel) minmax(0, 1fr) var(--sound-panel);flex:1;grid-template-rows:minmax(44px,auto) minmax(0,1fr) auto;grid-template-areas:"top top top""bar canvas sound"".transport.";gap:16px 24px;min-height:0;display:grid}.workspace:not(.controls-left){grid-template-columns:var(--sound-panel) minmax(0, 1fr) var(--panel);grid-template-areas:"top top top""sound canvas bar"".transport."}.drawing-area{grid-area:canvas;justify-content:center;align-items:center;min-width:0;min-height:0;display:flex}.sheet{width:100%;height:100%;position:relative}.canvas-feedback{z-index:4;overscroll-behavior:contain;pointer-events:none;flex-direction:column;gap:8px;width:min(440px,100% - 32px);max-height:calc(100% - 32px);margin-inline:auto;display:flex;position:absolute;bottom:16px;left:16px;right:16px;overflow-y:auto}.sheet:after{content:"";border-radius:var(--radius-sheet);box-shadow:inset 0 0 0 1px var(--line);pointer-events:none;position:absolute;inset:0}.sidebar{z-index:5;flex-direction:column;grid-area:bar;align-items:flex-start;gap:24px;min-height:0;font-size:12px;display:flex;position:relative;overflow:visible}.workspace:not(.controls-left) .sidebar{align-items:flex-end}@media (width>=801px) and (width<=1100px){.app-shell{padding:16px}.workspace{--sound-panel:248px;column-gap:16px}}@media (width>=1101px) and (width<=1279px){.workspace{--sound-panel:248px}}@media (width>=801px) and (height<=690px){.app-shell{min-height:664px}}@media (width<=800px){.app-shell{height:auto;min-height:100dvh;padding:max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left))}.workspace,.workspace.controls-left,.workspace:not(.controls-left){grid-template:"top"minmax(44px,auto)"canvas"max(280px,44dvh)"transport""bar""sound"/minmax(0,1fr);gap:16px}.sidebar,.workspace:not(.controls-left) .sidebar{align-items:stretch;gap:8px}}.countdown{z-index:3;pointer-events:none;color:var(--secondary);font-family:var(--mono);font-variant-numeric:tabular-nums;place-items:center;font-size:clamp(72px,16vmin,160px);animation:1s ease-out both count;display:grid;position:absolute;inset:0}@keyframes count{0%{opacity:0;transform:scale(.7)}25%{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.08)}}@media (prefers-reduced-motion:reduce){.countdown{opacity:.8;animation:none}}