:root{--bg: #8f9396;--bg-dark: #666b70;--bg-light: #a7adb1;--panel: #7daf52;--panel-dark: #537b32;--panel-light: #9fd36a;--ink: #16210e;--muted: #314223;--accent: #3d5f22;--accent-dark: #2b4517;--line: #426126;--paper: #d7d2c3;--track-unit-size: 34px}*{box-sizing:border-box}html,body,#root{min-height:100%}body{min-height:100vh;margin:0;font-family:Trebuchet MS,Segoe UI,sans-serif;color:var(--ink);background:linear-gradient(90deg,rgba(255,255,255,.05) 0 12.5%,transparent 12.5% 25%,rgba(0,0,0,.04) 25% 37.5%,transparent 37.5% 50%,rgba(255,255,255,.05) 50% 62.5%,transparent 62.5% 75%,rgba(0,0,0,.05) 75% 87.5%,transparent 87.5% 100%),linear-gradient(0deg,rgba(255,255,255,.04) 0 12.5%,transparent 12.5% 25%,rgba(0,0,0,.05) 25% 37.5%,transparent 37.5% 50%,rgba(255,255,255,.04) 50% 62.5%,transparent 62.5% 75%,rgba(0,0,0,.05) 75% 87.5%,transparent 87.5% 100%),linear-gradient(180deg,var(--bg-light),var(--bg-dark));background-size:32px 32px,32px 32px,100% 100%;background-repeat:repeat,repeat,no-repeat;background-attachment:scroll,scroll,fixed}.hero{padding:1.5rem 1rem .75rem;text-align:center}.hero h1{margin:0;font-size:clamp(1.4rem,3.2vw,2.2rem)}.hero p{margin:.65rem auto 0;max-width:64ch;color:var(--muted)}main{width:100%;max-width:none;margin:0;padding:.75rem 1rem 2rem;display:grid;gap:.85rem;min-width:0}.example-panel__layout{display:flex;gap:1.25rem;align-items:flex-start;flex-wrap:wrap}.example-panel__description{flex:1 1 220px;margin:0;color:var(--ink);font-size:.95rem;line-height:1.55}.example-panel__images{flex:3 1 400px;display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}.example-panel__figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:.35rem;min-width:0}.example-panel__figure img{max-height:200px;width:100%;border-radius:6px;border:2px solid var(--line);box-shadow:0 2px 8px #00000059;object-fit:cover}.example-panel__figure figcaption{font-size:.8rem;color:var(--ink);text-align:center}.site-footer{padding:0 1rem 1.5rem;text-align:center;color:#222}.site-footer p{margin:0;font-size:.92rem}.site-footer a{color:#111;font-weight:700}.panel{background:linear-gradient(180deg,var(--panel-light) 0 16%,var(--panel) 16% 100%);border:1px solid var(--line);border-radius:6px;padding:.85rem;box-shadow:inset 0 4px #ffffff2e,inset 0 -5px #2a461659,0 8px #363a3d59;min-width:0}.panel h2{margin:0 0 .7rem;font-size:1rem}.panel-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.panel-header h2{margin-bottom:0}.panel-header-toggle{width:calc(100% + 1.7rem);margin:-.85rem -.85rem 0;padding:.8rem .85rem .75rem;border:0;border-radius:6px 6px 0 0;background:linear-gradient(180deg,#ffffff2e,#3d5f2214);color:var(--ink);box-shadow:none;border-bottom:1px solid rgba(42,70,22,.35);cursor:pointer}.panel-header-toggle:hover:not(:disabled){background:linear-gradient(180deg,#ffffff3d,#3d5f221f)}.panel-header-toggle:disabled{opacity:1;cursor:default}.panel-header-meta{font-size:.85rem;color:var(--muted)}.panel-body{margin:.75rem -.1rem -.1rem;padding-top:.05rem}.control-row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}.option-row{display:inline-flex;align-items:center;gap:.5rem;margin-top:.7rem;color:var(--ink);font-size:.92rem}.option-row input{margin:0}.option-row-stacked{display:flex;flex-wrap:wrap}.option-row select{border:1px solid var(--line);border-radius:4px;padding:.38rem .5rem;background:var(--paper);color:var(--ink)}.playback-controls{display:flex;flex-wrap:wrap;align-items:end;gap:.85rem;margin-bottom:.35rem}.playback-actions{display:inline-flex;flex-wrap:wrap;gap:.45rem}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:2.2rem;height:2.2rem;padding:0;min-width:unset;border-radius:4px}.icon-btn svg{width:1rem;height:1rem;fill:currentColor;display:block}.playback-meta{font-size:.85rem;color:var(--muted);padding-bottom:.15rem}input[type=file]{flex:1;min-width:220px}input[type=text],input[aria-label="output filename"]{min-width:180px;border:1px solid var(--line);border-radius:4px;padding:.52rem .6rem;background:var(--paper);color:var(--ink)}button{border:0;border-radius:4px;padding:.55rem .9rem;background:var(--accent);color:#fff;cursor:pointer;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;box-shadow:inset 0 2px #ffffff24,0 3px 0 var(--accent-dark)}.button-link{display:inline-flex;align-items:center;border-radius:4px;padding:.55rem .9rem;background:var(--accent);color:#fff;text-decoration:none;font-weight:700;box-shadow:inset 0 2px #ffffff24,0 3px 0 var(--accent-dark)}button:disabled{opacity:.5;cursor:not-allowed}#status{margin:.65rem 0 0;color:var(--muted)}.status-busy{display:inline-flex;align-items:center;gap:.55rem}.spinner{width:.95rem;height:.95rem;border:2px solid rgba(122,154,45,.25);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;flex:0 0 auto}.spinner-inline{width:.85rem;height:.85rem;border-color:#ffffff59;border-top-color:#fff}.downloads{display:grid;gap:.5rem}.output-summary{margin-top:.55rem}.download-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;border:2px solid rgba(42,70,22,.35);border-radius:4px;padding:.5rem .6rem;background:#deebc647}.download-row .meta,.meta{color:var(--muted);font-size:.9rem}.viz-toggles{display:flex;flex-wrap:wrap;gap:.5rem 1rem;margin-bottom:.5rem}.viz-toggle-label{display:flex;align-items:center;gap:.35rem;font-size:.88rem;cursor:pointer;-webkit-user-select:none;user-select:none}.hint{margin:0 0 .6rem;color:var(--muted);font-size:.92rem}.track-wrap{display:grid;gap:.35rem;min-width:100%}.track-scroll-proxy-top{overflow-x:scroll;overflow-y:hidden}.track-scroll-spacer{height:1px;pointer-events:none}.track-scroll-wrap{position:relative;width:100%;max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;padding-bottom:.4rem}.track-stage{position:relative;width:max-content;min-width:max(100%,calc(var(--timeline-unit-count, 1) * var(--track-unit-size)))}.drag-scroll-area{cursor:grab;touch-action:pan-y pinch-zoom}.drag-scroll-area.dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}.track-headers{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.35rem}.track-header{display:flex;flex-direction:row;align-items:center;gap:.5rem;font-weight:700;padding:.2rem .5rem;background:#9dc378;border:1px solid rgba(66,97,38,.65);border-radius:4px;transition:opacity .14s ease,filter .14s ease;box-sizing:border-box}.track-scroll-column{width:100%;min-width:0}.track-row{border:1px solid rgba(66,97,38,.65);border-radius:4px;background:#dbe9c257;padding:.35rem .45rem;width:max-content;transition:opacity .14s ease,filter .14s ease}.track-row-dimmed{opacity:.45;filter:saturate(.78)}.playhead{position:absolute;top:0;bottom:0;width:18px;transform:translate(-50%);padding:0;background:transparent;box-shadow:none;border:0;z-index:15;cursor:ew-resize;touch-action:none}.playhead-line{position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translate(-50%);background:#f4f2e9;box-shadow:0 0 0 1px #3d5f22cc}.playhead-head{position:absolute;top:0;left:50%;width:14px;height:14px;transform:translate(-50%,-15%);border-radius:50%;background:#f4f2e9;border:2px solid rgba(61,95,34,.9)}.playhead:focus-visible,.playhead-dragging{outline:none}.playhead:focus-visible .playhead-line,.playhead-dragging .playhead-line{background:#fffbe6}.track-index{font-size:.88rem}.track-count{font-size:.72rem;color:var(--muted)}.track-line{display:flex;align-items:flex-end;gap:2px;min-height:120px;white-space:nowrap;background-image:repeating-linear-gradient(90deg,transparent calc(4 * (var(--track-unit-size) + 2px) - 2px),rgba(66,97,38,.3) calc(4 * (var(--track-unit-size) + 2px) - 2px),rgba(66,97,38,.3) calc(4 * (var(--track-unit-size) + 2px)))}.track-row-empty .track-line{min-height:20px}.track-mute-btn{width:1.4rem;height:1.4rem;min-width:unset;flex-shrink:0}.note-unit,.note-stack-item{width:var(--track-unit-size);min-width:var(--track-unit-size);display:flex;flex-direction:column;align-items:center}.note-unit-button{cursor:pointer;border-radius:4px;outline:none;transition:transform .12s ease,background-color .12s ease;position:relative}.note-corner-color{position:absolute;top:2px;right:2px;width:9px;height:9px;border:1px solid rgba(22,33,14,.8);border-radius:2px;box-shadow:0 0 0 1px #ffffff47;z-index:2}.note-use-count{position:absolute;top:4px;left:3px;min-width:14px;padding:0 3px;border-radius:3px;background:#1a210ed1;color:#f7f3dd;font-size:.58rem;font-weight:700;line-height:1.2;text-align:center;z-index:2;pointer-events:none}.note-unit-button:hover{background:#ffffff24}.note-unit-button:active{transform:translateY(1px)}.note-unit-button:focus-visible{box-shadow:0 0 0 2px #ffffff59,0 0 0 4px #3d5f22d9}.cell-tooltip{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%);min-width:max-content;max-width:180px;padding:.35rem .45rem;border:1px solid rgba(34,44,21,.9);border-radius:4px;background:#1a210ef5;color:#f7f3dd;font-size:.72rem;line-height:1.35;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .12s ease;z-index:20}.cell-tooltip-below{top:calc(100% + 8px);bottom:auto}.cell-tooltip:after{content:"";position:absolute;left:50%;top:100%;transform:translate(-50%);border:5px solid transparent;border-top-color:#1a210ef5}.cell-tooltip-below:after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:#1a210ef5}.note-unit-button:hover .cell-tooltip,.note-unit-button:focus-visible .cell-tooltip{opacity:1;visibility:visible}.note-img{width:var(--track-unit-size);height:var(--track-unit-size);image-rendering:pixelated}.support-img{margin-top:-4px;width:var(--track-unit-size);height:var(--track-unit-size);image-rendering:pixelated}@keyframes spin{to{transform:rotate(360deg)}}.schematic-controls{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center;margin-bottom:.35rem}.schematic-tutorial{border:1px solid rgba(42,70,22,.25);border-radius:6px;margin:.75rem 0 .5rem;background:#00000014}.schematic-tutorial-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.5rem .75rem;background:none;border:none;cursor:pointer;color:var(--muted);font-size:.82rem;font-weight:600;text-align:left;gap:.5rem}.schematic-tutorial-toggle:hover{color:var(--fg)}.schematic-tutorial-toggle-arrow{font-size:.65rem;flex-shrink:0}.schematic-tutorial-body{padding:0 .75rem .75rem}.schematic-tutorial-note{font-size:.82rem;color:var(--muted);margin:0 0 .75rem;line-height:1.5}.schematic-tutorial-images{display:flex;flex-wrap:wrap;gap:.75rem}.schematic-tutorial-figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:.3rem;flex:1 1 240px}.schematic-tutorial-figure img{max-width:100%;border-radius:4px;border:1px solid rgba(42,70,22,.3);display:block}.schematic-tutorial-figure figcaption{font-size:.73rem;color:var(--muted);text-align:center}.schematic-legend{display:flex;flex-wrap:wrap;gap:.4rem .85rem;margin:.5rem 0 .65rem}.schematic-legend-item{display:inline-flex;align-items:center;gap:.3rem;font-size:.78rem;color:var(--muted)}.schematic-legend-swatch{display:inline-block;width:12px;height:12px;border:1px solid rgba(42,70,22,.45);border-radius:2px;flex-shrink:0}.schematic-scroll{overflow-x:auto;overflow-y:visible;padding-bottom:.4rem;cursor:grab}.schematic-scroll:active{cursor:grabbing}.schematic-table{border-collapse:collapse;width:max-content;table-layout:auto}.schematic-table th,.schematic-table td{border:1px solid rgba(0,0,0,.15);padding:0;vertical-align:middle}.schematic-th-corner{position:sticky;left:0;z-index:6;background:var(--panel)}.schematic-th-seg{background:var(--panel);border-right-color:transparent}.schematic-th-anchor{background:var(--panel);text-align:center;vertical-align:bottom;border-bottom:2px solid rgba(240,192,64,.5)}.schematic-tick-btn{display:block;width:100%;padding:3px 0 2px;font-size:.58rem;font-weight:700;font-family:monospace;color:#000;text-align:center;background:#f0c0401f;border:0;box-shadow:none;border-radius:0;cursor:pointer;line-height:1;white-space:nowrap}.schematic-tick-btn:hover{background:#f0c04059;color:#000}.schematic-td-connector{position:sticky;left:0;z-index:5;background:var(--panel);padding:0}.schematic-td-seg{padding:0;background:var(--panel);border-right-color:transparent}.schematic-td-anchor{padding:0}.schematic-cell--passthrough{opacity:.35}.schematic-instrument-label-row td{background:var(--panel-dark, #c8d8a8);font-size:.74rem;font-weight:700;color:var(--muted);padding:3px 6px;border-top:2px solid rgba(0,0,0,.2);position:sticky;left:0}.schematic-grid{width:max-content}.schematic-row{display:contents}.schematic-group-label{font-size:.74rem;font-weight:700;color:var(--muted);padding:2px 4px;display:flex;flex-direction:column;gap:1px}.schematic-group-separator{height:8px}.schematic-multi-grid{display:flex;flex-direction:column;gap:0}.schematic-instrument-section{display:block}.schematic-group-label--full{display:block;width:max-content}.schematic-group-separator--full{display:block;height:8px}.schematic-row{display:flex;align-items:center;gap:2px}.schematic-connector{flex-shrink:0}.schematic-content{position:relative;width:max-content;min-width:100%}.schematic-indicator{position:absolute;top:0;bottom:0;width:18px;transform:translate(-50%);padding:0;background:transparent;box-shadow:none;border:0;z-index:15;cursor:ew-resize;touch-action:none}.schematic-indicator-line{position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translate(-50%);background:#f0c040;box-shadow:0 0 0 1px #8c5a00cc}.schematic-indicator-head{position:absolute;top:0;left:50%;width:14px;height:14px;transform:translate(-50%,-10%);border-radius:50%;background:#f0c040;border:2px solid rgba(140,90,0,.9)}.schematic-indicator:focus-visible .schematic-indicator-line{background:#fffbe6}.schematic-h-indicator{position:absolute;left:0;right:0;height:18px;transform:translateY(-50%);padding:0;background:transparent;box-shadow:none;border:0;z-index:14;cursor:ns-resize;touch-action:none}.schematic-h-indicator-line{position:absolute;left:0;right:0;top:50%;height:2px;transform:translateY(-50%);background:#40a0f0;box-shadow:0 0 0 1px #003c8c80}.schematic-h-indicator-head{position:absolute;left:0;top:50%;width:14px;height:14px;transform:translate(-10%,-50%);border-radius:50%;background:#40a0f0;border:2px solid rgba(0,60,140,.8)}.schematic-h-indicator:focus-visible .schematic-h-indicator-line{background:#e6f3ff}.schematic-cell--last-pressed{position:relative;z-index:1;outline:2px solid #ff8c00;outline-offset:-1px;box-shadow:0 0 6px 1px #ff8c008c}.schematic-group,.schematic-sublanes{display:contents}.schematic-ruler-corner{position:sticky;left:0;z-index:6;background:var(--panel)}.schematic-connector--sticky{background:var(--panel);padding:0;border:0;border-radius:0;box-shadow:none;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}.schematic-connector--sticky:hover{background:var(--panel-light)}.schematic-connector--sticky:hover svg{opacity:.85}.schematic-group-title{font-weight:700}.schematic-group-counts{font-weight:400;opacity:.85}.schematic-totals{display:flex;flex-direction:column;gap:.6rem;margin:.5rem 0 .75rem;padding:.55rem .75rem;background:#00000014;border-radius:5px;border-left:3px solid var(--panel-dark);font-size:.8rem;color:var(--ink)}.schematic-totals-section{display:flex;flex-direction:column;gap:.3rem}.schematic-totals-heading{margin:0;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}.schematic-totals-chips{display:flex;flex-wrap:wrap;gap:.35rem}.schematic-dimensions{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-top:.2rem}.schematic-dim-chip{display:inline-flex;align-items:baseline;gap:.25rem;background:#ffffff47;border:1px solid rgba(42,70,22,.2);border-radius:4px;padding:3px 8px}.schematic-dim-axis{font-size:.65rem;font-weight:700;font-family:monospace;color:var(--muted);text-transform:uppercase}.schematic-dim-value{font-size:1rem;font-weight:700;font-family:monospace;color:var(--ink)}.schematic-dim-unit{font-size:.7rem;color:var(--muted)}.schematic-dim-sep{font-size:.85rem;color:var(--muted);font-weight:300}.totals-chip{display:inline-flex;align-items:center;gap:.3rem;background:#ffffff47;border:1px solid rgba(42,70,22,.2);border-radius:4px;padding:3px 7px 3px 4px}.totals-chip svg{flex-shrink:0;border-radius:2px;image-rendering:pixelated}.totals-chip-info{display:flex;flex-direction:column;line-height:1.2}.totals-chip-count{font-weight:700;font-size:.82rem}.totals-chip-label{font-size:.75rem;color:var(--muted)}.totals-chip-stacks{font-size:.68rem;color:var(--accent);font-style:italic}.schematic-cell{flex-shrink:0;position:relative;image-rendering:pixelated;background:var(--panel)}.schematic-cell--empty{background:var(--panel)}.schematic-segment{display:flex;flex-direction:row;align-items:center;background:var(--panel)}.schematic-cell-tip{cursor:pointer;outline:none}.schematic-cell-tip:hover .cell-tooltip,.schematic-cell-tip:focus-visible .cell-tooltip{opacity:1;visibility:visible}.cell-tooltip-portal{position:fixed;transform:translate(-50%) translateY(-100%);min-width:max-content;max-width:180px;padding:.35rem .45rem;border:1px solid rgba(34,44,21,.9);border-radius:4px;background:#1a210ef5;color:#f7f3dd;font-size:.72rem;line-height:1.35;white-space:nowrap;pointer-events:none;z-index:9999}.cell-tooltip-portal:after{content:"";position:absolute;left:50%;top:100%;transform:translate(-50%);border:5px solid transparent;border-top-color:#1a210ef5}.cell-tooltip-portal-below{transform:translate(-50%)}.cell-tooltip-portal-below:after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:#1a210ef5}.schematic-cell svg{display:block;image-rendering:pixelated}@media (max-width: 700px){:root{--track-unit-size: 30px}.playback-controls{align-items:stretch}.note-meta{max-width:calc(var(--track-unit-size) + 10px)}}