:root{--cream:#fffef0;--ink:#242020;--accent:#1d8f73}*{box-sizing:border-box}body,html{height:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--cream);color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button{font:inherit}header{position:-webkit-sticky;position:sticky;top:0;z-index:3;padding:12px 16px calc(12px + env(safe-area-inset-top));background:color-mix(in oklab,var(--cream) 92%,white 8%);-webkit-backdrop-filter:blur(6px) saturate(140%);backdrop-filter:blur(6px) saturate(140%);border-bottom:1px solid #00000012}.header-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.track-name{font-weight:600;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:60vw}.time{font-feature-settings:"tnum";font-variant-numeric:tabular-nums;opacity:.8}main{max-width:480px;margin:0 auto;padding:8px 16px calc(20px + env(safe-area-inset-bottom))}.gesture-surface{touch-action:none}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;padding:12px 18px;border-radius:999px;background:var(--ink);color:var(--cream);font-weight:700;box-shadow:0 2px 0 #0006;cursor:pointer}.btn:active{transform:translateY(1px);box-shadow:0 1px 0 #0004}.btn.full{width:100%;text-align:center}.btn.ghost{background:transparent;color:var(--ink);border:1px solid #00000026;box-shadow:none;font-weight:600}.topbar-controls{margin-top:8px}.topbar-controls .btn{width:100%}.platter-wrap{width:100%;display:grid;place-items:center;margin-top:10px}.platter,.platter-wrap{aspect-ratio:1/1;position:relative}.platter{width:92%;border-radius:50%;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:manipulation;cursor:pointer;background:radial-gradient(circle at 50% 50%,#2a2a2a 0 24%,#1f1f1f 24.5% 26%,#141414 26.5% 41%,#0c0c0c 41.5% 100%),repeating-radial-gradient(circle at 50% 50%,#0b0b0b 0 2px,#0f0f0f 2px 3.5px);box-shadow:inset 0 0 0 3px #0008,inset 0 0 60px #000a,0 12px 36px #00000030;transform:translateZ(0) rotate(0deg)}.label{position:absolute;inset:0;margin:auto;width:36%;height:36%;display:grid;place-items:center;text-align:center;color:#1b1107;padding:8px;box-shadow:inset 0 0 0 2px #0005,inset 0 0 20px #0006;background:radial-gradient(circle at 30% 30%,#ffd6a8,#ffb36a 60%,#e07c2b 100%)}.label,.spindle{border-radius:50%}.spindle{position:absolute;inset:0;margin:auto;width:10px;height:10px;background:#d9d9d9;box-shadow:0 0 0 1px #0006,inset 0 0 4px #0008}.controls-row{display:grid;grid-template-columns:1fr auto;grid-gap:12px;gap:12px;align-items:center;margin-top:14px}.scrub-section{margin-top:12px}.scrub{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:30px;background:transparent}.scrub::-webkit-slider-runnable-track{height:6px;background:#00000020;border-radius:999px}.scrub::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:var(--ink);margin-top:-9px;box-shadow:0 2px 0 #0006}.scrub::-moz-range-track{height:6px;background:#00000020;border-radius:999px}.scrub::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--ink);border:none}.pitch-section{margin-top:10px}.pitch{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:36px;background:transparent}.pitch::-webkit-slider-runnable-track{height:6px;background:#00000020;border-radius:999px}.pitch::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;background:var(--ink);margin-top:-10px;box-shadow:0 2px 0 #0006}.pitch::-moz-range-track{height:6px;background:#00000020;border-radius:999px}.pitch::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--ink);border:none}.pitch-label-row{display:flex;align-items:center;justify-content:space-between;margin:6px 2px 8px}.pitch-title{font-weight:700}.pitch-values{opacity:.9}.pitch-values,.readouts{font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.readouts{display:flex;gap:12px;justify-content:center;margin-top:8px}.small{font-size:12px;opacity:.8}.error{color:#b00020}