:root{--ink: #e9eef1;--muted: #7d8a92;--tick: #3a4348;--accent: #ff4d3d;--card: rgba(255, 255, 255, .045);--card-border: rgba(255, 255, 255, .07)}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#010205;color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased}#stage{position:fixed;inset:0}#stage canvas{display:block}#panel{position:fixed;left:50%;bottom:16px;transform:translate(-50%);width:max-content;max-width:calc(100vw - 24px);display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;gap:6px;padding:6px;border-radius:16px;border:1px solid var(--card-border);background:#0e1012c7;backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 18px 50px #00000073;user-select:none;-webkit-user-select:none}#panel[hidden]{display:none}.toggles{display:flex;flex-direction:column;justify-content:space-between;gap:4px;width:150px}.segment{flex:1;display:flex;align-items:stretch;gap:2px;padding:2px;border-radius:10px;background:#00000059;border:1px solid var(--card-border)}.segment button{flex:1;padding:0 6px;border:0;border-radius:8px;background:transparent;color:var(--muted);font:500 10px/1 ui-monospace,SF Mono,Consolas,monospace;letter-spacing:.02em;white-space:nowrap;cursor:pointer;transition:background .15s,color .15s}.segment button:hover{color:var(--ink)}.segment button.on{background:#ffffff1a;color:var(--ink);cursor:default}.card{width:170px;padding:7px 10px 6px;border-radius:12px;background:var(--card);border:1px solid var(--card-border)}.head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:3px}.label{font:400 9.5px/1.2 ui-monospace,SF Mono,Consolas,monospace;color:var(--muted);white-space:nowrap}.value{font-size:17px;line-height:1;font-weight:400;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--ink)}.ruler{--track: 420px;--offset: 0px;position:relative;height:18px;overflow:hidden;cursor:grab;outline:none;touch-action:none}.ruler.active{cursor:grabbing}.layer{position:absolute;inset:0}.track{position:absolute;top:0;bottom:0;left:50%;width:var(--track);transform:translate(calc(var(--offset) * -1))}.track.dim{left:calc(50% - 420px);width:calc(var(--track) + 840px);background:repeating-linear-gradient(to right,#343c41 0 1px,transparent 1px 6px) bottom / 100% 7px no-repeat,repeating-linear-gradient(to right,#444d53 0 1px,transparent 1px 30px) bottom / 100% 12px no-repeat}.track.range{background:repeating-linear-gradient(to right,#8e9aa1 0 1px,transparent 1px 6px) bottom / 100% 7px no-repeat,repeating-linear-gradient(to right,#d3dbe0 0 1px,transparent 1px 30px) bottom / 100% 12px no-repeat,linear-gradient(to right,#d3dbe0 0 1px,transparent 1px) right bottom / 1px 12px no-repeat}.layer.lit{-webkit-mask-image:radial-gradient(32px 100% at 50% 100%,#000 0%,transparent 100%);mask-image:radial-gradient(32px 100% at 50% 100%,#000 0%,transparent 100%)}.track.range.lit{background:repeating-linear-gradient(to right,#ff9a8e 0 1px,transparent 1px 6px) bottom / 100% 7px no-repeat,repeating-linear-gradient(to right,#ffc2ba 0 1px,transparent 1px 30px) bottom / 100% 12px no-repeat}.needle{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;border-radius:1px;background:var(--accent);box-shadow:0 0 8px #ff4d3d99;pointer-events:none}.ruler:focus-visible .needle{box-shadow:0 0 0 3px #ff4d3d47,0 0 8px #ff4d3d99}@media (max-width: 640px){#panel{left:8px;right:8px;bottom:8px;width:auto;max-width:none;transform:none;padding:5px;gap:5px;justify-content:stretch}.toggles{flex:1 1 100%;flex-direction:row;width:auto;min-height:34px}.segment{min-width:0}.card{flex:1 1 calc(50% - 5px);width:auto;min-width:0}}