:root{--sk-black:#0a0b0d;--sk-graphite-900:#16181c;--sk-graphite-800:#23262c;--sk-graphite-600:#3a3e46;--sk-text:#e8eaed;--sk-text-muted:#9aa0a6;--sk-accent-red:#e10600;--sk-axis-x:#ff5a5f;--sk-axis-y:#3ddc84;--sk-axis-z:#4c8dff;--sk-font:"Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;--sk-mono:"Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace;--sk-radius:6px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{background:var(--sk-black);height:100%;color:var(--sk-text);font-family:var(--sk-font);-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;overscroll-behavior:none;touch-action:manipulation;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;margin:0;font-size:13px;overflow:hidden}body{position:fixed;inset:0}#root,.app-root{height:100%}.app{height:100vh;grid-template-rows:48px minmax(0,1fr) 28px;grid-template-columns:minmax(0,1fr);height:100dvh;display:grid}.topbar{background:linear-gradient(180deg, var(--sk-graphite-900), var(--sk-black));border-bottom:1px solid var(--sk-graphite-800);justify-content:space-between;align-items:center;padding:0 16px;display:flex}.brand{align-items:center;gap:10px;display:flex}.brand-text{flex-direction:column;line-height:1.1;display:flex}.brand-producer{letter-spacing:.18em;font-size:12px;font-weight:700}.brand-product{letter-spacing:.12em;color:var(--sk-text-muted);font-size:11px}.brand-product:before{content:"";vertical-align:middle;background:var(--sk-accent-red);width:14px;height:2px;margin-right:6px;display:inline-block}.topbar-meta{gap:8px;display:flex}.badge{border:1px solid var(--sk-graphite-600);font-family:var(--sk-mono);color:var(--sk-text);white-space:nowrap;border-radius:999px;padding:3px 8px;font-size:11px}.topbar-meta{min-width:0;margin-left:16px}.badge-engine{text-overflow:ellipsis;min-width:0;overflow:hidden}.brand{flex:none}.brand-producer,.brand-product{white-space:nowrap}.badge-muted{font-family:var(--sk-font);color:var(--sk-text-muted);border-color:var(--sk-graphite-800)}.workspace{min-height:0;position:relative}.viewport{--sk-transport-h:72px;position:absolute;inset:0;overflow:hidden}#viewport-canvas{touch-action:none;outline:none;width:100%;height:100%;display:block}#viewport-canvas:focus-visible{box-shadow:inset 0 0 0 1px var(--sk-accent-red)}.viewport-toolbar{border:1px solid var(--sk-graphite-800);border-radius:var(--sk-radius);background:#0a0b0dd1;align-items:center;gap:12px;padding:6px 10px;display:flex;position:absolute;top:12px;left:50%;transform:translate(-50%)}.btn{border:1px solid var(--sk-graphite-600);border-radius:var(--sk-radius);height:30px;color:var(--sk-text);font:inherit;cursor:pointer;background:#16181ce0;align-items:center;gap:6px;padding:0 12px;transition:border-color .12s,background-color .12s;display:inline-flex}.btn:hover{border-color:var(--sk-accent-red);background:var(--sk-graphite-800)}.btn:active{background:var(--sk-graphite-900)}.btn:focus-visible{outline:2px solid var(--sk-accent-red);outline-offset:2px}.axis-legend{right:12px;bottom:calc(var(--sk-transport-h) + 12px);border:1px solid var(--sk-graphite-800);border-radius:var(--sk-radius);color:var(--sk-text-muted);background:#0a0b0dcc;margin:0;padding:8px 10px;font-size:11px;line-height:1.7;list-style:none;position:absolute}.axis-swatch{vertical-align:middle;border-radius:2px;width:14px;height:3px;margin-right:8px;display:inline-block}.axis-x{background:var(--sk-axis-x)}.axis-y{background:var(--sk-axis-y)}.axis-z{background:var(--sk-axis-z)}.hint{left:12px;bottom:calc(var(--sk-transport-h) + 12px);color:var(--sk-text-muted);margin:0;font-size:11px;position:absolute}.error-panel{background:var(--sk-black);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:24px;display:flex;position:absolute;inset:0}.error-panel[hidden]{display:none}.error-panel h2{color:var(--sk-text);border-bottom:2px solid var(--sk-accent-red);margin:0;padding-bottom:6px;font-size:16px}.error-panel p{max-width:560px;color:var(--sk-text-muted);-webkit-user-select:text;user-select:text;margin:0}.statusbar{border-top:1px solid var(--sk-graphite-800);background:var(--sk-graphite-900);color:var(--sk-text-muted);white-space:nowrap;align-items:center;gap:24px;padding:0 16px;font-size:11px;display:flex}.status-item{text-overflow:ellipsis;overflow:hidden}.status-camera{font-family:var(--sk-mono);flex:1}.signature{color:var(--sk-text);letter-spacing:.02em;margin-left:auto}.signature:before{content:"";vertical-align:middle;background:var(--sk-accent-red);border-radius:50%;width:6px;height:6px;margin-right:8px;display:inline-block}.mono{font-family:var(--sk-mono);font-variant-numeric:tabular-nums}.segmented{border:1px solid var(--sk-graphite-600);border-radius:var(--sk-radius);display:inline-flex;overflow:hidden}.seg{border:0;border-right:1px solid var(--sk-graphite-600);height:28px;color:var(--sk-text-muted);font:inherit;cursor:pointer;background:0 0;padding:0 11px;transition:background-color .12s,color .12s}.seg:last-child{border-right:0}.seg:hover{background:var(--sk-graphite-800);color:var(--sk-text)}.seg[aria-pressed=true]{background:var(--sk-graphite-800);color:var(--sk-text);box-shadow:inset 0 -2px 0 var(--sk-accent-red)}.seg:focus-visible,.part:focus-visible,.select:focus-visible,.slider:focus-visible{outline:2px solid var(--sk-accent-red);outline-offset:2px}.field{flex-direction:column;gap:3px;min-width:0;display:flex}.field-grow{flex:1}.field-rpm{width:220px}.field-label{color:var(--sk-text-muted);white-space:nowrap;justify-content:space-between;gap:12px;font-size:11px;display:flex}.field-label output{color:var(--sk-text)}.viewport-toolbar .field{flex-direction:row;align-items:center;gap:6px}.select{border:1px solid var(--sk-graphite-600);border-radius:var(--sk-radius);background:var(--sk-graphite-900);height:28px;color:var(--sk-text);font:inherit;padding:0 8px}.slider{width:100%;height:18px;accent-color:var(--sk-accent-red);cursor:pointer;background:0 0;margin:0}.btn-small{height:26px;padding:0 9px;font-size:12px}.btn-primary{border-color:var(--sk-accent-red);justify-content:center;min-width:96px;font-weight:600}.panel{border:1px solid var(--sk-graphite-800);border-radius:var(--sk-radius);background:#101215db;width:248px;position:absolute;top:64px}.panel-parts{left:12px}.panel-perf{right:12px}.panel-title{letter-spacing:.14em;text-transform:uppercase;color:var(--sk-text-muted);margin:0;font-size:11px;font-weight:600}.panel-title:before{content:"";vertical-align:middle;background:var(--sk-accent-red);width:10px;height:2px;margin-right:6px;display:inline-block}.part-row{align-items:center;gap:4px;margin-bottom:6px;display:flex}.part-row-label{width:74px;color:var(--sk-text-muted);font-size:11px}.part{border:1px solid var(--sk-graphite-600);min-width:30px;height:26px;color:var(--sk-text);font:inherit;cursor:pointer;background:0 0;border-radius:4px;padding:0 8px}.part:hover{background:var(--sk-graphite-800)}.part[aria-pressed=true]{border-color:var(--sk-accent-red);background:var(--sk-graphite-800);box-shadow:inset 0 0 0 1px var(--sk-accent-red)}.selection{border-top:1px solid var(--sk-graphite-800);margin-top:10px;padding-top:10px}.selection-title{margin:0 0 6px;font-size:13px;font-weight:600}.selection-hint,.selection-note,.measure{color:var(--sk-text-muted);margin:6px 0 0;font-size:11px;line-height:1.45}.readout{grid-template-columns:1fr auto;gap:3px 10px;margin:0;font-size:11px;display:grid}.readout dt{color:var(--sk-text-muted)}.readout dd{text-align:right;font-family:var(--sk-mono);font-variant-numeric:tabular-nums;color:var(--sk-text);margin:0}.panel-perf .btn{margin-top:10px}.transport{height:var(--sk-transport-h);border-top:1px solid var(--sk-graphite-800);background:#101215f0;align-items:center;gap:16px;padding:0 16px;display:flex;position:absolute;bottom:0;left:0;right:0}.steps{gap:4px;display:flex}.overlay-top,.toolbar-wrap{display:contents}.panel-header{width:100%;color:inherit;font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;align-items:center;gap:8px;padding:10px 12px;display:flex}.panel-header:focus-visible{outline:2px solid var(--sk-accent-red);outline-offset:-2px}.panel-summary{color:var(--sk-text-muted);text-overflow:ellipsis;white-space:nowrap;margin-left:auto;font-size:11px;overflow:hidden}.panel-chevron{border-left:4px solid #0000;border-right:4px solid #0000;border-top:5px solid var(--sk-text-muted);flex:none;width:0;height:0;transition:transform .12s}.panel-header[aria-expanded=true] .panel-chevron{transform:rotate(180deg)}.panel-body{padding:0 12px 12px}.panel-note{color:var(--sk-text-muted);margin:0 0 6px;font-size:11px}.toolbar-wrap>.panel-header{display:none}.seg-solo{border:1px solid var(--sk-graphite-600);border-radius:var(--sk-radius)}.viewport-toolbar{width:max-content;max-width:calc(100% - 24px)}.seg,.viewport-toolbar .field{white-space:nowrap;flex:none}.hint-touch{display:none}@media (pointer:coarse){.hint-mouse{display:none}.hint-touch{display:block}.seg{height:40px;padding:0 14px}.select{height:40px;font-size:16px}.part{min-width:44px;height:40px}.btn-small{justify-content:center;min-width:44px;height:40px}.btn-primary{height:44px}.slider{height:32px}.panel-header{min-height:40px}}@media (max-width:760px),(max-height:520px){.app{grid-template-rows:auto minmax(0,1fr) auto}.topbar{min-height:44px;padding:calc(6px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 6px max(12px, env(safe-area-inset-left))}.badge-engine,.badge-stage,.axis-legend,.status-camera{display:none}.topbar{gap:8px}.brand{flex:0 auto}.brand,.brand-text{min-width:0}.topbar-meta{margin-left:0}.brand-producer,.brand-product{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.topbar-meta{flex:none}.badge{white-space:nowrap;font-size:10px}.statusbar{min-height:26px;padding:4px max(12px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));gap:12px}.overlay-top{top:8px;left:max(8px, env(safe-area-inset-left));right:max(8px, env(safe-area-inset-right));pointer-events:none;flex-wrap:wrap;align-items:flex-start;gap:6px;display:flex;position:absolute}.toolbar-wrap,.panel{border:1px solid var(--sk-graphite-800);border-radius:var(--sk-radius);pointer-events:auto;background:#101215e6;flex:0 auto;width:auto;min-width:0;display:block;position:static}.toolbar-wrap[data-open=true],.panel[data-open=true]{max-height:46vh;overscroll-behavior:contain;flex-basis:100%;order:2;max-height:46dvh;overflow-y:auto}.toolbar-wrap>.panel-header{display:flex}.panel-header{padding:6px 10px}.panel-summary{max-width:38vw;margin-left:0}.viewport-toolbar{background:0 0;border:0;flex-wrap:wrap;gap:8px;width:auto;max-width:none;padding:2px 10px 10px;display:none;position:static;transform:none}.toolbar-wrap[data-open=true] .viewport-toolbar{display:flex}#viewport-canvas{height:calc(100% - var(--sk-transport-h))}.hint{left:max(12px, env(safe-area-inset-left));right:max(12px, env(safe-area-inset-right));bottom:calc(var(--sk-transport-h) + 8px)}.transport{padding:10px max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left));align-items:center;gap:8px 10px;display:grid}.transport>.btn-primary{grid-area:play}.transport>.steps{grid-area:steps}.transport>.field-grow{grid-area:angle}.transport>.field-rpm{grid-area:rpm;width:auto}.transport>.field-slow{grid-area:slow}.steps .btn{flex:1;justify-content:center;padding:0}}@media (max-width:760px){.viewport{--sk-transport-h:174px}.brand-product{letter-spacing:.08em;font-size:10px}.panel-header{gap:6px;padding:6px 8px}.panel-title{letter-spacing:.06em}.panel-title:before{width:6px;margin-right:4px}.status-renderer,.toolbar-wrap>.panel-header .panel-summary{display:none}.transport{grid-template-rows:repeat(3,46px);grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"play steps steps""angle angle angle""rpm rpm slow"}}@media (max-height:520px){.viewport{--sk-transport-h:66px}.topbar{min-height:36px;padding-top:calc(4px + env(safe-area-inset-top));padding-bottom:4px}.hint{display:none}.transport{grid-template:"play steps angle rpm slow"46px/auto auto minmax(0,1.4fr) minmax(0,1fr) auto}.toolbar-wrap[data-open=true],.panel[data-open=true]{max-height:56vh;max-height:56dvh}}
