:root{color-scheme:light;--paper:#f2f4f0;--ink:#172019;--muted:#657168;--rule:#cfd6d0;--dark:#080d0b;--mint:#67c99c;--coral:#ee8177}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--paper);color:var(--ink)}body{font:13px/1.4 Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:0}button,input,select{font:inherit;color:inherit}.mono{font:11px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace;font-variant-numeric:tabular-nums}.eyebrow{color:var(--muted);font-size:10px;text-transform:uppercase}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.app{height:100dvh;display:grid;grid-template-rows:auto auto minmax(0,1fr);overflow:hidden}.masthead{min-height:55px;display:flex;align-items:center;gap:14px;padding:8px 16px;border-bottom:1px solid var(--rule);background:#f7f8f5}.brand{color:inherit;font:600 18px/1 Georgia,serif;text-decoration:none}.recorded{display:flex;align-items:center;gap:7px;padding-left:14px;border-left:1px solid var(--rule);font-weight:600}.recorded-dot{width:7px;height:7px;border-radius:50%;background:var(--coral)}.identity{display:flex;gap:15px;margin-left:auto;color:var(--muted);white-space:nowrap}.identity b{color:var(--ink);font-weight:500}.masthead nav{display:flex;gap:12px}.masthead nav a{color:var(--muted);text-underline-offset:3px}.error{padding:7px 16px;border-bottom:1px solid #d49a94;background:#fff0ed;color:#7c302a}
.workspace{min-width:0;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 326px}.viewer{min-width:0;min-height:0;display:grid;grid-template-rows:minmax(260px,1fr) auto;background:var(--dark)}.stage{position:relative;min-width:0;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;background:var(--dark)}.stage-header{min-width:0;display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:12px 20px;padding:17px 18px 0}.stage canvas{display:block;min-width:0;min-height:0;width:100%;height:100%;touch-action:none}.stage-title{min-width:0;max-width:100%;color:#dbe8e1;overflow-wrap:anywhere;pointer-events:none}.stage-title .eyebrow{display:block;color:#90a49a}.stage-title strong{display:block;margin-top:2px;font-size:22px;font-weight:550}.stage-title strong span{color:#78dbad;font-size:29px}.stage-stats{min-width:0;max-width:100%;display:flex;justify-content:flex-end;flex-wrap:wrap;gap:5px 13px;color:#8fa298;pointer-events:none}.stage-stats span{max-width:100%;overflow-wrap:anywhere}.stage-stats b{color:#dfe9e4;font-weight:500}.frame-stamp{min-width:0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 18px;padding:6px 18px 12px;color:#85978e;pointer-events:none}.frame-stamp span{min-width:0;max-width:100%;overflow-wrap:anywhere}.frame-stamp span:last-child{color:#e7b18a}.loading{position:absolute;inset:0;display:grid;place-items:center;background:var(--dark);color:#91a299}.loading[hidden]{display:none}
.transport{display:grid;gap:9px;padding:12px 14px;border-top:1px solid #29342e;background:#111713;color:#d9e3de}.timeline-controls{display:grid;grid-template-columns:repeat(3,36px) minmax(90px,1fr) auto;align-items:center;gap:9px}.icon-button{width:34px;height:34px;display:grid;place-items:center;padding:0;border:1px solid #34433b;border-radius:3px;background:transparent;color:#dce7e1;cursor:pointer}.icon-button:hover,.icon-button:focus-visible{border-color:#a6bcb0;background:#1a241f}.icon-button:focus-visible,input:focus-visible,select:focus-visible,.download:focus-visible{outline:2px solid var(--mint);outline-offset:2px}.icon-button:disabled{opacity:.38;cursor:default}.icon-button svg,.download svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.timeline-controls>input{width:100%;accent-color:var(--mint)}.playback-settings{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}.speed-control,.draw-control{display:flex;align-items:center;gap:7px;color:#94a69c;font-size:11px;white-space:nowrap}.playback-settings input,.playback-settings select{height:32px;max-width:100%;padding:0 7px;border:1px solid #34433b;border-radius:3px;background:#151d19;color:#dce7e1;font:11px ui-monospace,SFMono-Regular,Consolas,monospace}.speed-control input{width:112px}.playback-settings :disabled{opacity:.45}.frame-count{white-space:nowrap;color:#94a69c}.clock-readout{display:flex;flex-wrap:wrap;gap:4px 20px;color:#94a69c}.clock-readout b{color:#e2ece7;font-weight:500}.sampling-note{display:grid;gap:3px;color:#94a69c;font-size:11px;line-height:1.45}.sampling-note>span:first-child{color:#e7b18a}#playback-status{color:#94a69c;font-size:11px;margin-left:auto}#rate-error{flex-basis:100%;color:#ffc0b6;font-size:11px}
.inspector{min-height:0;overflow:auto;border-left:1px solid var(--rule);background:#f7f8f5}.panel{padding:13px 15px;border-bottom:1px solid var(--rule)}.panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}.panel h2{margin:0;font-size:12px;font-weight:650}.empty{padding:9px 0;color:var(--muted)}.selected{display:flex;align-items:center;gap:7px;margin-bottom:9px}.swatch{width:9px;height:9px;flex:0 0 auto;border-radius:50%}.selected b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kv{display:grid;grid-template-columns:minmax(86px,auto) minmax(0,1fr);gap:5px 10px;margin:0}.kv dt{color:var(--muted)}.kv dd{min-width:0;margin:0;text-align:right;overflow-wrap:anywhere;font:11px/1.35 ui-monospace,SFMono-Regular,Consolas,monospace}.subobject{margin-top:9px;padding-top:8px;border-top:1px solid var(--rule)}.subobject .kv{margin-top:5px}.chart{display:block;width:100%;height:108px}.chart.compact{height:78px}.legend{display:flex;gap:12px;color:var(--muted);font-size:10px}.legend span:before{content:"";display:inline-block;width:8px;height:2px;margin:0 4px 2px 0;background:var(--key)}.frequency-list,.resource-list{display:grid;gap:5px;margin-top:8px}.frequency,.resource{display:grid;grid-template-columns:minmax(65px,1fr) auto;gap:8px;align-items:center}.track{grid-column:1/-1;height:3px;background:#dce2dd}.fill{height:100%}.download{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:12px;padding:8px 10px;border:1px solid var(--ink);border-radius:3px;color:inherit;text-decoration:none}.download[hidden]{display:none}.download:hover{background:var(--ink);color:#fff}.facts{padding-bottom:20px}
@media(max-width:800px){.app{height:auto;min-height:100dvh;overflow:visible}.masthead{flex-wrap:wrap}.identity{order:3;width:100%;margin:0;overflow:auto}.workspace{grid-template-columns:1fr}.viewer{grid-template-rows:500px auto}.inspector{border-left:0;border-top:1px solid var(--rule);display:grid;grid-template-columns:1fr 1fr;overflow:visible}.panel{min-width:0}.transport{position:sticky;top:0;z-index:5}.stage-stats{justify-content:flex-start}}
@media(max-width:620px){.transport{padding:10px;gap:9px}.timeline-controls{grid-template-columns:repeat(3,34px) minmax(80px,1fr);gap:7px}.frame-count{display:none}.clock-readout{display:grid;gap:4px}.speed-control input{width:95px}#playback-status{margin-left:0;flex-basis:100%}}
@media(max-width:520px){.masthead{padding:8px 10px}.masthead nav{margin-left:auto}.identity span:nth-child(2),.identity span:nth-child(3){display:none}.viewer{grid-template-rows:440px auto}.stage-title strong{font-size:18px}.stage-title strong span{font-size:24px}.stage-stats{gap:5px 11px}.inspector{grid-template-columns:1fr}.chart{height:112px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}