@font-face{font-family:Geist;src:url('./fonts/geist-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Mono;src:url('./fonts/geistmono-latin.woff2') format('woff2');font-display:swap}
:root{color-scheme:dark;--bg:#0c0c0e;--panel:#161618;--surface:#101012;--ink:#ededee;--muted:#959599;--line:#2b2b2f;--accent:#d4d4d8;--track:#343438;--shadow:#0005;font:14px/1.5 Geist,Arial,sans-serif}
:root[data-theme=light]{color-scheme:light;--bg:#f6f6f7;--panel:#fff;--surface:#f8f8f9;--ink:#212124;--muted:#717178;--line:#e2e2e6;--accent:#404047;--track:#dedee3;--shadow:#20202512}
*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;min-height:100svh;background:var(--bg);color:var(--ink);display:flex;flex-direction:column}button,input{font:inherit}button{cursor:pointer;color:inherit;border:0;background:none;padding:0}button:disabled{opacity:.3;cursor:default}a{color:inherit;text-decoration:none}a:hover,button:hover{color:var(--ink)}:is(a,button,input):focus-visible{outline:2px solid var(--muted);outline-offset:4px}h1,h2,p{margin:0}svg{display:block}
.header,footer{display:flex;align-items:center;justify-content:space-between;padding:30px 42px;gap:24px}.identity{display:flex;align-items:baseline;gap:24px}h1{font-size:18px;font-weight:520;letter-spacing:-.04em}.identity p{font-size:12px;color:var(--muted)}.header-actions{display:flex;align-items:center;gap:28px;font-size:12px}.header-actions>button:first-child{border-bottom:1px solid var(--line);padding:4px 0}.header-actions span{margin-left:6px}.theme{font-size:22px;line-height:1;padding:4px}.theme span{margin:0}
main{width:min(100%,1100px);margin:auto;flex:1;display:flex;flex-direction:column;padding:0 40px}.stage{width:100%;height:clamp(310px,calc(100svh - 240px),760px);position:relative;overflow:hidden;flex-shrink:0}.stage canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.fallback{position:absolute;inset:0;opacity:1;pointer-events:none}.fallback svg{width:100%;height:100%}.ready .fallback{opacity:0;transition:opacity .16s ease}.render-status{position:absolute;bottom:12px;left:0;right:0;text-align:center;font-size:11px;color:var(--muted)}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:24px;width:min(100%,760px);margin:24px auto 10px;padding:0 4px}.forms{display:flex;gap:22px}.forms button{font-size:12px;color:var(--muted);padding:8px 0;border-bottom:1px solid transparent}.forms button[aria-pressed=true]{color:var(--ink);border-color:var(--ink)}.forms button:hover{color:var(--ink)}.tool-actions{display:flex;align-items:center;gap:22px;flex-shrink:0}.tool-actions button{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:7px;padding:9px 0;white-space:nowrap}.tool-actions button:hover,.tool-actions button[aria-pressed=true]{color:var(--ink)}.tool-actions svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}footer{font-size:11px;color:var(--muted);padding:24px 42px}footer span{margin-left:5px}
.sr-only,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip:focus{position:fixed;z-index:20;top:10px;left:10px;padding:10px 16px;color:var(--bg);background:var(--ink)}
/* The controls use a thin neutral track in Safari, Chromium and Firefox. */
input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:24px;margin:10px 0 0;background:transparent;cursor:pointer;--fill:50%}input[type=range]::-webkit-slider-runnable-track{height:2px;border-radius:2px;background:linear-gradient(to right,var(--accent) 0 var(--fill),var(--track) var(--fill) 100%)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;margin-top:-5px;border-radius:50%;background:var(--ink);border:2px solid var(--panel);box-shadow:0 0 0 1px var(--line)}input[type=range]::-moz-range-track{height:2px;border-radius:2px;background:var(--track)}input[type=range]::-moz-range-progress{height:2px;background:var(--accent)}input[type=range]::-moz-range-thumb{width:8px;height:8px;border-radius:50%;background:var(--ink);border:2px solid var(--panel);box-shadow:0 0 0 1px var(--line)}input[type=checkbox]{accent-color:var(--ink);width:13px;height:13px;margin:0}.control{margin-top:26px}.control label{display:flex;justify-content:space-between;align-items:center;font-size:12px}.control output{font:11px Mono,monospace;color:var(--muted)}.control p{font-size:10px;color:var(--muted);margin-top:6px;line-height:1.6}
dialog{width:min(440px,calc(100% - 32px));max-height:calc(100svh - 32px);padding:28px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--ink);box-shadow:0 24px 100px var(--shadow)}dialog::backdrop{background:#0007;backdrop-filter:blur(6px)}.dialog-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:18px}h2{font-size:22px;font-weight:500;letter-spacing:-.035em;line-height:1.3}h2:focus{outline:none}.dialog-heading p{font-size:12px;color:var(--muted);margin-top:6px}.dialog-heading button{display:grid;place-items:center;flex-shrink:0;width:28px;height:28px;border:1px solid transparent;border-radius:7px;font-size:22px;line-height:1;color:var(--muted)}.dialog-heading button:hover{background:var(--line);color:var(--ink)}dialog>p{font-size:13px;color:var(--muted);line-height:1.7}
.settings-dialog{position:fixed;inset:76px 24px auto auto;margin:0;width:300px;max-height:calc(100svh - 100px);padding:24px;border-radius:12px}.settings-dialog::backdrop{background:#0001;backdrop-filter:none}.settings-dialog h2{font-size:16px;letter-spacing:-.02em}.settings-dialog .dialog-heading{margin:0}.settings-dialog .motion-controls{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);margin-top:26px;padding-top:18px;font-size:11px;color:var(--muted)}.motion-controls button{padding:6px 0}
.download,.primary{display:flex;align-items:center;justify-content:space-between;gap:20px;border-radius:7px;background:var(--ink);color:var(--bg);padding:13px 16px;font-size:12px}.download{margin:25px 0}.download:hover,.primary:hover{color:var(--bg);opacity:.9}.install{margin-top:10px}code{font:11px/1.8 Mono,monospace;overflow-wrap:anywhere}.prompt{display:flex;gap:16px;margin-top:12px;padding:15px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.prompt button{font-size:11px;color:var(--muted);align-self:flex-start}.copy-status{min-height:26px;font-size:11px}.resources{display:flex;justify-content:space-between;gap:16px;color:var(--muted);font-size:11px}
/* Drawing workspace: one generous pad, with volume controls beside it. */
#draw-dialog{width:min(860px,calc(100% - 40px));padding:26px}#draw-dialog .dialog-heading{margin-bottom:26px}.draw-layout{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:26px}.draw-workspace{min-width:0}.draw-modebar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.segmented{display:flex;border:1px solid var(--line);padding:3px;border-radius:8px;gap:2px}.segmented button{padding:6px 13px;border-radius:5px;color:var(--muted);font-size:11px}.segmented button[aria-pressed=true]{background:var(--line);color:var(--ink)}.snap-toggle{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:11px}#draw-pad{display:block;width:100%;aspect-ratio:4/3;background:var(--surface);border:1px solid var(--line);border-radius:8px;touch-action:none;cursor:crosshair}#draw-pad:focus-visible{outline:1px solid var(--muted);outline-offset:3px}.pad-grid{opacity:.16;pointer-events:none}#draw-empty{fill:var(--muted);font-size:11px;pointer-events:none;opacity:.65}#draw-fill{fill:var(--ink);fill-opacity:.04;stroke:var(--muted);stroke-width:1;stroke-dasharray:3 5;pointer-events:none}#draw-line{fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}#draw-points{fill:var(--ink);pointer-events:none}#draw-cursor{display:none;fill:none;stroke:var(--ink);stroke-width:1;pointer-events:none}#draw-pad.keyboard #draw-cursor{display:block}.draw-tools{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-top:12px;font-size:10px;color:var(--muted)}.draw-tools p{max-width:230px}.draw-tools>div{display:flex;gap:12px;flex-shrink:0}.draw-properties{display:flex;flex-direction:column;justify-content:space-between;border-left:1px solid var(--line);padding-left:24px;padding-top:6px}.eyebrow{font:9px Mono,monospace;letter-spacing:.12em;color:var(--muted)}.draw-properties .control{margin-top:24px}.muted{font-size:11px;color:var(--muted);line-height:1.8;margin-top:14px}.draw-submit{margin-top:30px}#draw-status{font-size:11px;color:var(--muted);line-height:1.7;min-height:38px;margin-bottom:18px}#draw-create{width:100%;padding:12px;font-size:11px}.local-note{display:block;text-align:center;font-size:9px;color:var(--muted);margin-top:12px}
/* Theater is an in-page expansion, with an explicit exit and Escape support. */
body.theater{overflow:hidden}body.theater>.header,body.theater>footer{display:none}body.theater main{width:100%;max-width:none;height:100svh;margin:0;padding:12px 24px 18px;flex:1}body.theater .stage{height:calc(100svh - 100px);flex:1;min-height:0}body.theater .toolbar{flex-shrink:0;width:min(100%,900px);margin:14px auto 0}body.theater .settings-dialog{top:24px;max-height:calc(100svh - 48px)}
@media(min-height:1000px){main{flex:0}.stage{height:710px}}
@media(max-width:760px){.header,footer{padding:24px}.identity{display:block}.identity p{margin-top:3px;font-size:11px}.header-actions{gap:18px;font-size:11px}main{padding:0 12px}.stage{height:clamp(300px,calc(100svh - 260px),650px)}.toolbar{padding:0 14px;gap:16px;flex-wrap:wrap;margin-top:16px}.forms{gap:18px}.forms button{font-size:11px}.tool-actions{margin-left:auto;gap:22px}footer{font-size:10px}.settings-dialog{inset:auto 12px 12px;width:min(340px,calc(100% - 24px));max-height:calc(100svh - 24px);margin-left:auto}#draw-dialog{width:calc(100% - 24px);padding:20px}.draw-layout{grid-template-columns:minmax(0,1fr);gap:20px}.draw-properties{border-left:0;padding:18px 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:20px}.draw-properties .control{margin-top:10px}.draw-properties .muted{display:none}.draw-submit{margin-top:0}#draw-status{margin-bottom:12px;font-size:10px;min-height:30px}.local-note{margin-top:8px}.draw-tools{flex-wrap:wrap;gap:10px}.draw-tools>div{margin-left:auto}body.theater main{padding:12px 12px 20px}body.theater .stage{height:calc(100svh - 140px)}body.theater .toolbar{gap:8px}body.theater .settings-dialog{top:auto;max-height:calc(100svh - 24px)}}
@media(max-width:380px){.header,footer{padding-inline:18px}.header-actions{gap:12px}.forms{gap:15px}.identity p{font-size:10px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.install-command{align-items:center;padding:16px;border:1px solid var(--line);border-radius:7px}.prompt code{min-width:0;flex:1}.prompt button{flex-shrink:0}.install-note{font-size:11px!important;color:var(--muted)}.resources{flex-wrap:wrap}

/* Shape studio */
#draw-dialog{width:min(1060px,calc(100% - 32px));padding:28px}.draw-layout{grid-template-columns:minmax(0,1fr) 260px;gap:28px}.draw-properties{display:block;padding-left:26px;padding-top:0}.draw-properties .control{margin-top:14px}.draw-workspace{min-width:0}.draw-modebar{gap:12px}.presetbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0}.presetbar button,.edit-actions button,.preview-heading button,.orientation button,.image-heading button{font-size:11px;color:var(--muted);padding:6px 0}.presetbar select,select{font:11px Geist,sans-serif;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:8px 10px;max-width:100%}.presetbar select{max-width:60%}.edit-actions{display:flex;flex-wrap:wrap;gap:4px 16px;margin:14px 0;border-top:1px solid var(--line);padding-top:8px}.draw-tools{flex-wrap:wrap}.draw-tools>div{gap:14px;flex-wrap:wrap}#draw-fill{fill-opacity:.14;stroke-dasharray:none;stroke-width:.4}#draw-line{stroke-width:1.3}#draw-points .selected{fill:var(--panel);stroke:var(--ink);stroke-width:1.5}#draw-empty{font-size:9px}#draw-pad.drop-ready{outline:2px solid var(--ink)}#image-reference{pointer-events:none}.preview-heading{display:flex;align-items:center;justify-content:space-between}#draw-preview{display:block;width:100%;height:auto;aspect-ratio:13/9;background:var(--surface);border:1px solid var(--line);border-radius:8px;touch-action:none;cursor:grab;margin-top:10px}#draw-preview:active{cursor:grabbing}.preview-hint{font-size:10px;color:var(--muted);line-height:1.6;margin-top:8px}.orientation{margin-top:18px;color:var(--muted);font-size:11px}.orientation summary{cursor:pointer}.orientation button{margin-top:10px}.draw-submit{margin-top:20px}#draw-status{min-height:32px;margin-bottom:12px}.image-heading{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-top:12px}.image-heading span{font-size:11px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.image-heading button{flex-shrink:0}.image-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;align-items:end}.image-controls .control{margin-top:10px}.select-label{display:grid;gap:9px;font-size:12px}.image-toggles{display:flex;flex-wrap:wrap;gap:12px 18px;margin-top:18px;font-size:10px;color:var(--muted)}.image-toggles label{display:flex;align-items:center;gap:6px}#image-settings{border-top:1px solid var(--line);padding-top:6px}#image-settings .muted{font-size:10px;margin:12px 0 0}
@media(max-width:760px){#draw-dialog{width:calc(100% - 20px);padding:18px}.draw-layout{grid-template-columns:1fr;gap:18px}.draw-properties{display:block;padding:18px 0 0;border-left:0;border-top:1px solid var(--line)}#draw-preview{max-height:190px;object-fit:contain}.draw-modebar .segmented button{padding:6px 9px}.draw-submit{position:sticky;bottom:-18px;background:var(--panel);padding:12px 0 18px}.draw-tools>div{margin-left:0}.image-controls{gap:10px 16px}.draw-properties .control{margin-top:12px}.preview-hint{display:none}}

#draw-pad{width:min(100%,560px,calc(42svh * 4 / 3));margin-inline:auto}.draw-properties{position:sticky;top:0;align-self:start}.draw-workspace .draw-tools p{max-width:none;flex-basis:100%}.draw-workspace .draw-tools>div{margin-left:0}.draw-workspace .draw-tools{gap:6px}.draw-workspace .edit-actions{gap:2px 14px}.draw-workspace .presetbar{margin:10px 0}.draw-workspace .image-heading{margin-top:6px}.draw-workspace .image-controls{gap:6px 20px}.draw-workspace .image-toggles{margin-top:12px}
@media(max-width:760px){#draw-pad{width:100%}.draw-properties{position:static}.draw-workspace .draw-tools>div{gap:12px}.image-controls{grid-template-columns:1fr 1fr}}

#draw-dialog[data-mode=image] #draw-pad{width:min(100%,480px,calc(30svh * 4 / 3))}#draw-dialog[data-mode=image] .draw-tools,#draw-dialog[data-mode=image] .edit-actions{display:none}#draw-dialog[data-mode=image] #image-settings{margin-top:14px}#image-settings input:disabled,#image-settings select:disabled{opacity:.4;cursor:default}
@media(max-width:760px){#draw-dialog[data-mode=image] #draw-pad{width:min(100%,380px)}}