:root{--bg: #1a1a1a;--fg: #e6e6e6;--muted: #888;--done: #4a90e2;--future: #444;--current: #ff4040;--pane: #222;--border: #333;font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:13px}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;background:var(--bg);color:var(--fg)}body{display:grid;grid-template-rows:auto 1fr auto;height:100vh}#controls{display:flex;align-items:center;gap:12px;padding:8px 12px;background:var(--pane);border-bottom:1px solid var(--border)}#controls button,#controls input[type=file]::file-selector-button{background:#333;color:var(--fg);border:1px solid var(--border);padding:4px 12px;font:inherit;cursor:pointer}#controls button:hover,#controls input[type=file]::file-selector-button:hover{background:#444}#controls #scrub{flex:1;max-width:400px}#controls #step-counter{min-width:80px;color:var(--muted)}#controls #design-info{margin-left:auto;color:var(--muted)}main{display:grid;grid-template-columns:360px 1fr;overflow:hidden;border-bottom:1px solid var(--border)}#canvas-wrap{position:relative;overflow:hidden}#step-list{margin:0;padding:0;list-style:none;overflow-y:auto;background:var(--pane);border-right:1px solid var(--border)}#step-list li{padding:4px 12px;border-bottom:1px solid #2a2a2a;cursor:pointer;white-space:nowrap}#step-list li:hover{background:#2a2a2a}#step-list li.current{background:#3a2a2a;color:var(--current);font-weight:700}#step-list li.done{color:var(--done)}#step-list li.future{color:var(--muted)}#step-list .kind-jump{font-style:italic}#step-list .element-header{padding:6px 12px;background:#1a1a1a;color:var(--muted);border-top:1px solid #444;border-bottom:1px solid #444;cursor:default;font-size:11px;font-weight:700;letter-spacing:.05em}#step-list li.element-1{border-left:2px solid #2eaa6a}#step-list li.element-2{border-left:2px solid #d4a017}#step-list li.element-3{border-left:2px solid #b85cc7}#step-list li.element-4{border-left:2px solid #d97758}#step-list .satin-header{background:#1c2a3a;color:#8aaed4}#step-list li.kind-satin{border-left:2px solid #5a8ec0;font-style:italic;color:#8aaed4}#step-list li.kind-satin.current{background:#3a2a2a;color:var(--current);font-weight:700}#svg-canvas{width:100%;height:100%;background:#fff}#svg-canvas line.future{stroke:#d0d0d0;stroke-width:.05}#svg-canvas line.done{stroke:var(--done);stroke-width:.08}#svg-canvas line.current{stroke:var(--current);stroke-width:.16}#svg-canvas line.jump{stroke-dasharray:.2 .2}#svg-canvas .grid{pointer-events:none}#svg-canvas .grid line{fill:none}#svg-canvas line.grid-minor-x,#svg-canvas line.grid-minor-y{stroke:#f0f0f0;stroke-width:.015}#svg-canvas line.grid-major-x,#svg-canvas line.grid-major-y{stroke:#b8b8b8;stroke-width:.04}#svg-canvas line.grid-axis-x,#svg-canvas line.grid-axis-y{stroke:#6a8caf;stroke-width:.06}#svg-canvas text.grid-label{fill:#666;font-family:ui-monospace,monospace;font-weight:500;-webkit-user-select:none;user-select:none;paint-order:stroke;stroke:#fff;stroke-width:.06}#legend{position:absolute;top:8px;right:8px;background:#222222eb;border:1px solid var(--border);padding:8px 10px;font-size:11px;line-height:1.5;color:var(--fg);border-radius:4px;pointer-events:none;max-width:240px}#legend .legend-title{font-weight:700;margin-bottom:4px;color:var(--muted);text-transform:uppercase;font-size:10px;letter-spacing:.05em}#legend .legend-row{display:flex;align-items:center;gap:6px}#legend .legend-grid{margin-top:2px}#legend .legend-scale{display:block;margin-top:4px;padding-top:4px;border-top:1px solid #333;color:var(--muted);font-size:10px}#legend .legend-cursor{margin-top:4px;padding-top:4px;border-top:1px solid #333;font-family:ui-monospace,monospace}#legend #cursor-pos{color:var(--current);font-weight:700}#legend .swatch{display:inline-block;flex:none;width:18px;height:12px}#legend .swatch.line{height:0;border-top-width:3px;border-top-style:solid}#legend .swatch.line.done{border-top-color:var(--done)}#legend .swatch.line.current{border-top-color:var(--current);border-top-width:4px}#legend .swatch.line.future{border-top-color:#888;border-top-style:solid}#legend .swatch.line.jump{border-top-color:var(--done);border-top-style:dashed}#legend .swatch.dot{width:10px;height:10px;border-radius:50%}#legend .swatch.dot.from{background:#2ecc40;border:1px solid #1a8a26}#legend .swatch.dot.to{background:var(--current);border:1px solid #aa1a1a}#legend .swatch.dot.needle{background:#2a4a6e;border:1px solid var(--done);width:6px;height:6px}#legend .swatch.axis{height:0;border-top:2px solid #6a8caf}#legend .swatch.major{height:0;border-top:2px solid #b8b8b8}#svg-canvas circle.dir-from{fill:#2ecc40;stroke:#1a8a26;stroke-width:.02}#svg-canvas circle.dir-to{fill:var(--current);stroke:#aa1a1a;stroke-width:.02}#svg-canvas circle.needle-point{pointer-events:none}#svg-canvas circle.needle-point.done{fill:#2a4a6e;stroke:var(--done);stroke-width:.02}#svg-canvas circle.needle-point.future{fill:#b8b8b8;stroke:#888;stroke-width:.02}#svg-canvas line.element-0.done{stroke:#4a90e2}#svg-canvas line.element-1.done{stroke:#2eaa6a}#svg-canvas line.element-2.done{stroke:#d4a017}#svg-canvas line.element-3.done{stroke:#b85cc7}#svg-canvas line.element-4.done{stroke:#d97758}#svg-canvas circle.needle-point.element-0.done{fill:#2a4a6e;stroke:#4a90e2}#svg-canvas circle.needle-point.element-1.done{fill:#1d6442;stroke:#2eaa6a}#svg-canvas circle.needle-point.element-2.done{fill:#7d600d;stroke:#d4a017}#svg-canvas circle.needle-point.element-3.done{fill:#6c3677;stroke:#b85cc7}#svg-canvas circle.needle-point.element-4.done{fill:#7f4633;stroke:#d97758}#svg-canvas polygon.satin{fill:#a0c8f02e;stroke:#5082b499;stroke-width:.05;cursor:pointer}#svg-canvas polygon.satin.future{fill:#b4b4b41f;stroke:#8c8c8c80}#svg-canvas polygon.satin.done{fill:#a0c8f040;stroke:#5082b4b3}#svg-canvas polygon.satin.current{fill:#ff646440;stroke:var(--current)}#svg-canvas line.satin-stitch{stroke:#5082b48c;stroke-width:.05;stroke-linecap:round;pointer-events:none}#svg-canvas line.satin-stitch.satin-1{stroke:#50a06e8c}#svg-canvas line.satin-stitch.satin-2{stroke:#b48c468c}#svg-canvas line.satin-stitch.current{stroke:var(--current)}#byte-info{padding:8px 12px;background:var(--pane);border-top:1px solid var(--border);font-size:12px;color:var(--muted);height:96px;box-sizing:border-box;white-space:pre;overflow:auto}#byte-info .hex-current{color:var(--current);font-weight:700}