.ska-viewer{--ska-bg:#101316;--ska-surface:#1e2227;--ska-border:#333a42;--ska-text:#e4e8ed;--ska-muted:#8b929c;--ska-accent:#a8be5c;--ska-accent-soft:rgba(168,190,92,.06);position:relative;width:100%;height:clamp(420px,78vh,780px);overflow:hidden;background:radial-gradient(ellipse at 50% 45%,#171c21,var(--ska-bg) 72%);border:1px solid #ffffff0c;border-radius:8px;color:var(--ska-text);font-family:Instrument Sans Variable,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color-scheme:dark}.ska-viewer *{box-sizing:border-box}.ska-stage{position:absolute;inset:16px 0 56px;touch-action:none;cursor:grab}.ska-stage:active{cursor:grabbing}.ska-stage canvas{display:block;width:100%;height:100%}.ska-mark{position:absolute;top:20px;left:22px;font-size:9px;letter-spacing:.14em;color:var(--ska-muted);pointer-events:none;opacity:.65}.ska-mark span{color:var(--ska-accent);padding:0 6px}.ska-status{position:absolute;inset:0;display:grid;place-items:center;color:var(--ska-muted);font-size:12px;pointer-events:none}.ska-controls{position:absolute;bottom:10px;left:20px;right:20px;display:flex;align-items:center;justify-content:center;gap:28px;min-height:38px;padding:0;background:transparent}.ska-views{display:flex;gap:3px}.ska-views button{display:flex;gap:6px;align-items:center;justify-content:center;padding:7px 9px;min-height:34px;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--ska-muted);font:inherit;font-size:10px;cursor:pointer;transition:background .16s,color .16s}.ska-views svg{width:15px;height:15px}.ska-views button:hover{color:var(--ska-text);background:#ffffff06}.ska-views button[aria-pressed=true]{color:var(--ska-accent);background:var(--ska-accent-soft)}.ska-views button:focus-visible,.ska-fader input:focus-visible,.ska-gizmo g:focus-visible{outline:1px solid var(--ska-accent);outline-offset:3px}.ska-fader{display:flex;align-items:center;gap:12px;width:240px}.ska-fader label{font-size:8px;letter-spacing:.065em;color:var(--ska-muted);font-family:IBM Plex Mono,SFMono-Regular,Consolas,monospace}.ska-fader input{appearance:none;display:block;width:100%;height:22px;margin:0;background:transparent;cursor:pointer}.ska-fader input::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(to right,var(--ska-accent) var(--ska-fill),var(--ska-border) var(--ska-fill));box-shadow:inset 0 1px 1px #0003}.ska-fader input::-webkit-slider-thumb{appearance:none;width:13px;height:13px;margin-top:-5px;border:1px solid var(--ska-muted);border-radius:50%;background:#171a1e;box-shadow:inset 0 1px 1px #fff3,0 1px 2px #0003}.ska-fader input::-moz-range-track{height:3px;background:var(--ska-border)}.ska-fader input::-moz-range-progress{height:3px;background:var(--ska-accent)}.ska-fader input::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:#171a1e;border:1px solid var(--ska-muted)}.ska-gizmo{position:absolute;top:12px;right:14px;width:90px;height:90px;z-index:2}.ska-gizmo g{cursor:pointer}.ska-gizmo g:hover circle{fill:#31373e}.ska-gizmo text{font-family:IBM Plex Mono,ui-monospace,monospace;font-size:9px;pointer-events:none}@media(max-width:640px){.ska-viewer{height:500px;border-radius:6px}.ska-stage{inset:34px 0 96px}.ska-controls{left:12px;right:12px;bottom:12px;gap:8px;flex-direction:column}.ska-views button{padding:8px 10px;min-height:36px}.ska-fader{width:min(260px,85%)}.ska-gizmo{width:76px;height:76px;top:8px;right:8px}.ska-mark{top:18px;left:18px}}@media(prefers-reduced-motion:reduce){.ska-views button{transition:none}}.ska-viewer.ska-embedded{height:100vh;border:0;border-radius:0}.ska-viewer[data-accent=orange]{--ska-accent:#f97316;--ska-accent-soft:rgba(249,115,22,.06)}