@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}:root{--ink:#0a0a0a;--paper:#f1f1ef;--line:#2c2c2c;--muted:#8d8d8a;--muted-2:#787874;--amber:#e8a020;--font-mono:"IBM Plex Mono", "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;--layers:260px;--inspector:340px;--bar:32px;--gutter:16px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box;border-radius:0}html,body{height:100%}body{background:var(--ink);color:var(--paper);font:13px/1.5 var(--font-mono);-webkit-font-smoothing:antialiased;margin:0}a{color:inherit;-webkit-text-decoration-color:var(--muted);text-decoration-color:var(--muted);text-underline-offset:2px}button,input,select{font:inherit;color:inherit;background:0 0;border:0;margin:0;padding:0}button{cursor:pointer;text-align:left}button:disabled{cursor:default}:focus{outline:none}:focus-visible{outline:2px solid var(--amber);outline-offset:1px}pre,code,kbd,output{font:inherit}pre{white-space:pre;margin:0}img{display:block}ul,dl,dd{margin:0;padding:0}ul{list-style:none}p,h1,h2{margin:0}h1,h2{font-weight:500}.label{text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-size:11px;line-height:16px}.btn{border:1px solid var(--line);text-transform:uppercase;letter-spacing:.04em;height:24px;color:var(--paper);white-space:nowrap;align-items:center;padding:0 8px;font-size:11px;line-height:16px;display:inline-flex}.btn:hover:not(:disabled){border-color:var(--muted)}.btn:disabled{color:var(--muted)}.btn[data-state=copied]{background:var(--paper);border-color:var(--paper);color:var(--ink)}.chip{border:1px solid var(--line);text-transform:uppercase;letter-spacing:.04em;height:20px;color:var(--muted);white-space:nowrap;align-items:center;padding:0 6px;font-size:11px;line-height:16px;display:inline-flex}.chip:hover{color:var(--paper)}.chip[aria-pressed=true]{background:var(--paper);border-color:var(--paper);color:var(--ink)}.seg{border:1px solid var(--line);display:inline-flex}.seg-item{text-transform:uppercase;letter-spacing:.04em;height:22px;color:var(--muted);padding:0 8px;font-size:11px;line-height:16px}.seg-item+.seg-item{border-left:1px solid var(--line)}.seg-item:hover{color:var(--paper)}.seg-item[aria-pressed=true]{background:var(--paper);color:var(--ink)}.seg-item:focus-visible{outline-offset:-2px}.field{border-bottom:1px solid var(--line);width:100%;height:26px;color:var(--paper);padding:0}.field::placeholder{color:var(--muted);opacity:1}.field:focus-visible{outline-offset:2px}input[type=search]{appearance:none}kbd{letter-spacing:.04em;color:var(--muted);border:1px solid var(--line);white-space:nowrap;padding:0 4px;font-size:11px;line-height:16px}.app{grid-template-columns:var(--layers) minmax(0, 1fr) var(--inspector);height:calc(100dvh - var(--bar));grid-template-areas:"layers canvas inspector";min-height:0;display:grid}.layers{border-right:1px solid var(--line);flex-direction:column;grid-area:layers;min-height:0;display:flex;overflow-y:auto}.canvas{flex-direction:column;grid-area:canvas;min-width:0;min-height:0;display:flex}.inspector{border-left:1px solid var(--line);grid-area:inspector;min-height:0;overflow-y:auto}.status{height:var(--bar);padding:0 var(--gutter);border-top:1px solid var(--line);text-transform:uppercase;letter-spacing:.04em;color:var(--muted);white-space:nowrap;align-items:center;gap:24px;font-size:11px;line-height:16px;display:flex;overflow-x:auto}.status a{text-decoration:none}.status a:hover{color:var(--paper)}.layers-brand{height:40px;padding:0 var(--gutter);border-bottom:1px solid var(--line);flex:none;justify-content:space-between;align-items:center;display:flex}.layers-brand svg{flex:none}.layers-search{padding:8px var(--gutter);border-bottom:1px solid var(--line);flex:none;align-items:center;display:flex;position:relative}.layers-search .field{padding-right:56px}.layers-search kbd{right:var(--gutter);position:absolute}.layers-tags{padding:10px var(--gutter);border-bottom:1px solid var(--line);flex-wrap:wrap;flex:none;gap:6px;display:flex}.layers-tags[hidden]{display:none}.layers-filter{flex:none}.layers-list{flex:1}.layers-head{width:100%;height:32px;padding:0 var(--gutter);border-bottom:1px solid var(--line);align-items:center;gap:8px;display:flex}.layers-head:focus-visible{outline-offset:-2px}.layers-twist{width:1ch;color:var(--muted)}.layers-count{color:var(--muted);margin-left:auto;font-size:11px}.layers-row{width:100%;height:28px;padding:0 var(--gutter);color:var(--muted);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);align-items:center;gap:10px;display:flex}.layers-row:hover{color:var(--paper)}.layers-row:focus-visible{outline-offset:-2px}.layers-row[aria-current=true]{color:var(--paper);border-color:var(--line)}.layers-marker{flex:none;width:6px;height:6px}.layers-row[aria-current=true] .layers-marker{background:var(--amber)}.layers-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.layers-note{color:var(--muted);margin-left:auto;font-size:11px}.layers-empty{padding:12px var(--gutter);color:var(--muted)}.canvas-bar{align-items:center;gap:var(--gutter);height:40px;padding:0 var(--gutter);border-bottom:1px solid var(--line);flex:none;display:flex;overflow-x:auto}.canvas-zoom{align-items:center;gap:4px;display:flex}.canvas-readout{text-align:right;min-width:4ch;color:var(--paper);font-variant-numeric:tabular-nums;margin-left:6px}.canvas-hint{white-space:nowrap;margin-left:auto}@media (max-width:1279px){.canvas-hint{display:none}}.canvas-live{gap:8px;display:flex}.canvas-viewport{touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none;flex:1;min-height:0;position:relative;overflow:hidden}.canvas-viewport[data-dragging]{cursor:grabbing}.canvas-surface{transform-origin:0 0;position:absolute;top:0;left:0}.canvas-surface[data-eased],.canvas-surface[data-eased] .frame-label,.canvas-surface[data-eased] .canvas-section{transition:transform .18s ease-out}.canvas-section{transform-origin:0 0;transform:scale(var(--k)) translateY(-100%);white-space:nowrap;position:absolute;left:0}.canvas-section span{margin-left:8px}.canvas-surface[data-labels=none] .frame-label,.canvas-surface[data-labels=none] .canvas-section,.canvas-surface[data-labels=sections] .frame-label{visibility:hidden}.frame{outline:calc(1px * var(--k)) solid var(--line);position:absolute}.frame[data-selected]{outline-color:var(--amber)}.frame:focus-visible{outline:calc(2px * var(--k)) solid var(--amber);outline-offset:0}.frame[data-dimmed] .frame-thumb,.frame[data-dimmed] .frame-missing{opacity:.3}.frame[data-dimmed] .frame-title{color:var(--muted)}.frame-label{max-width:calc(1280px / var(--k));transform-origin:0 0;transform:scale(var(--k)) translateY(calc(-100% - 6px));white-space:nowrap;gap:10px;font-size:12px;line-height:16px;display:flex;position:absolute;top:0;left:0}.frame-title,.frame-slug{text-overflow:ellipsis;min-width:0;overflow:hidden}.frame-title{color:var(--paper);flex:0 auto}.frame-slug{color:var(--muted);flex:0 4 auto}.frame-thumb{object-fit:cover;pointer-events:none;width:100%;height:100%}.frame-missing{letter-spacing:.04em;text-transform:uppercase;width:100%;height:100%;color:var(--muted);place-items:center;font-size:48px;display:grid}.frame-stage{background:var(--ink);justify-content:center;width:100%;height:100%;display:flex}.frame-stage[data-ground=paper]{background:var(--paper)}.frame-live{background:0 0;border:0;height:100%;display:block}.canvas-viewport[data-passthrough] .frame-live{pointer-events:none}.inspector-empty{padding:14px var(--gutter);color:var(--muted);flex-direction:column;gap:10px;display:flex}.inspector-empty .label+p{color:var(--paper)}.inspector-head{padding:14px var(--gutter) 16px;flex-direction:column;gap:6px;display:flex}.inspector-title{font-size:15px;line-height:20px}.inspector-desc{color:var(--muted)}.inspector-meta{grid-template-columns:auto 1fr;gap:2px 12px;margin-top:4px;font-size:12px;display:grid}.inspector-meta dt{text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-size:11px;line-height:18px}.inspector-tags{flex-wrap:wrap;gap:6px;margin-top:6px;display:flex}.inspector-section{padding:12px var(--gutter) 16px;border-top:1px solid var(--line)}.inspector-note{color:var(--muted)}.section-head{justify-content:space-between;align-items:center;min-height:24px;margin-bottom:4px;display:flex}.section-note{text-transform:none;letter-spacing:0}.control{flex-direction:column;gap:6px;padding:8px 0;display:flex}.control-head{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.control-readout{font-variant-numeric:tabular-nums;font-size:12px}.control-hint{color:var(--muted);font-size:11px;line-height:15px}.control-number{grid-template-columns:minmax(0,1fr) 64px;align-items:center;gap:12px;display:grid}.control-num{text-align:right;font-variant-numeric:tabular-nums;-moz-appearance:textfield}.control-num::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.control-num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=range]{appearance:none;background:0 0;width:100%;height:20px;margin:0}input[type=range]::-webkit-slider-runnable-track{background:var(--muted-2);height:1px}input[type=range]::-moz-range-track{background:var(--muted-2);height:1px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--paper);border:0;width:8px;height:14px;margin-top:-6.5px}input[type=range]::-moz-range-thumb{background:var(--paper);border:0;width:8px;height:14px}.control-check{cursor:pointer;align-items:center;gap:10px;display:flex}.control-check .label{color:var(--paper)}input[type=checkbox]{appearance:none;border:1px solid var(--muted);flex:none;width:12px;height:12px}input[type=checkbox]:checked{background:var(--paper);border-color:var(--paper)}.control-select{position:relative}.control-select select{appearance:none;border-bottom:1px solid var(--line);width:100%;height:26px;color:var(--paper);cursor:pointer;padding-right:20px}.control-select select option{background:var(--ink);color:var(--paper)}.control-select:after{content:"▾";color:var(--muted);pointer-events:none;position:absolute;top:3px;right:4px}.field.control-textarea{border:1px solid var(--line);resize:vertical;height:auto;min-height:64px;padding:6px 8px}.control-json{flex-direction:column;gap:4px;display:flex}.control-error{color:var(--amber);font-size:11px;line-height:15px}.field[aria-invalid=true]{border-color:var(--amber)}.control-color{grid-template-columns:26px minmax(0,1fr);align-items:center;gap:12px;display:grid}input[type=color]{appearance:none;border:1px solid var(--line);cursor:pointer;width:26px;height:20px;padding:0}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:0}input[type=color]::-moz-color-swatch{border:0}.tablist{border-bottom:1px solid var(--line);display:flex}.tablist [role=tab]{text-transform:uppercase;letter-spacing:.04em;height:32px;color:var(--muted);padding:0 12px;font-size:11px;line-height:16px;position:relative}.tablist [role=tab]:hover{color:var(--paper)}.tablist [role=tab]:focus-visible{outline-offset:-2px}.tablist [role=tab][aria-selected=true]{color:var(--paper)}.tablist [role=tab][aria-selected=true]:after{content:"";background:var(--paper);height:1px;position:absolute;bottom:-1px;left:0;right:0}.tabpanel{flex-direction:column;gap:8px;padding-top:12px;display:flex}.code-head{justify-content:space-between;align-items:center;gap:8px;min-height:24px;display:flex}.code-head .label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.code{border-left:1px solid var(--line);tab-size:2;padding:6px 0 6px 10px;font-size:12px;line-height:18px;overflow:auto}.code-file{max-height:320px}.code-status,.tabs-note{color:var(--muted);font-size:12px}.tabs-links{flex-direction:column;gap:6px;display:flex}.tabs-links li{flex-direction:column;gap:2px;display:flex}.tabs-links a{color:var(--paper)}.tabs-links span{color:var(--muted);font-size:12px}.credits{flex-direction:column;gap:10px;margin-top:8px;display:flex}.credits li{flex-direction:column;gap:2px;display:flex}.credits-by{color:var(--muted);font-size:12px}.palette{flex-direction:column;gap:8px;display:flex}.palette-row{grid-template-columns:5ch 26px minmax(0,1fr) auto;align-items:center;gap:10px;display:grid}.palette-token{text-transform:uppercase}.palette-row input[type=color]{border:1px solid var(--line);cursor:pointer;width:26px;height:20px;padding:0}.palette-row input[type=color]::-webkit-color-swatch-wrapper{padding:0}.palette-row input[type=color]::-webkit-color-swatch{border:0}.palette-row input[type=color]::-moz-color-swatch{border:0}.events-log{flex-direction:column;max-height:240px;display:flex;overflow-y:auto}.events-row{border-top:1px solid var(--ink);grid-template-columns:minmax(0,1fr) minmax(0,2fr) auto;align-items:baseline;gap:10px;padding:5px 0;font-size:12px;display:grid}.events-row:first-child{border-top:0}.events-name{color:var(--paper);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.events-detail{text-overflow:ellipsis;white-space:nowrap;color:var(--muted);overflow:hidden}.events-time{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}@media (max-width:899px){.app{grid-template-columns:minmax(0,1fr);grid-template-areas:"canvas""layers""inspector";height:auto}.canvas{border-bottom:1px solid var(--line);height:60vh;min-height:360px}.canvas-bar{height:auto;min-height:40px;padding:8px var(--gutter);gap:8px var(--gutter);flex-wrap:wrap;overflow:visible}.canvas-hint{display:none}.layers{border-right:0;border-bottom:1px solid var(--line);overflow:visible}.inspector{border-left:0;overflow:visible}}