:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--ground:#f4f4f1;--canvas:#fdfdfb;--ink:#282724;--ochre:#c6920f;--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{-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{outline-offset:5px}button:focus-visible,a:focus-visible,input:focus-visible{outline:1px 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}.message{color:var(--secondary);text-align:center;flex:none;font-size:10px;line-height:1.4}.message:not(:empty){padding-top:12px}#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%)}:hover>.hover-label,: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}.drawing-area.scenic{--sheet-fill:transparent}.drawing-area .canvas-host{z-index:1;position:relative}.drawing-area:after{z-index:2}.workspace{--panel:44px;--sound-panel:288px;grid-template-columns:var(--panel) minmax(0, 1fr) var(--sound-panel);flex:1;grid-template-rows:44px minmax(0,1fr) auto;grid-template-areas:".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.""sound canvas bar"".transport."}.drawing-area{grid-area:canvas;min-width:0;min-height:0;position:relative}.drawing-area: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:center;gap:24px;min-height:0;font-size:12px;display:flex;position:relative;overflow:visible}@media (width>=801px) and (width<=1100px){.app-shell{padding:16px}.workspace{--sound-panel:248px;column-gap:16px}}@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"44px"canvas"max(280px,44dvh)"transport""bar""sound"/minmax(0,1fr);gap:16px}.sidebar{align-items:stretch;gap:8px}}