:root{color:#f7f7f7;background:#101010;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--accent: #ff3042;--accent-2: #5167ff;--accent-soft: rgba(255, 48, 66, .36);--accent-warm: #ffd28a;--shell-top: #101010;--shell-mid: #171719;--panel: #1d1d20;--button-start: #ff1f31;--button-end: #e61f31;--panel-soft: #26262a;--muted: #9b9ba1}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{overflow-x:hidden;background:#101010;touch-action:manipulation}button,select,input{font:inherit}.app-shell{min-height:100svh;width:min(100vw,520px);margin:0 auto;padding:calc(env(safe-area-inset-top) + 20px) 18px calc(env(safe-area-inset-bottom) + 22px);background:linear-gradient(180deg,var(--shell-top) 0%,var(--shell-mid) 43%,var(--panel) 100%)}.theme-ruby{--accent: #ff3042;--accent-2: #5167ff;--accent-soft: rgba(255, 48, 66, .36);--accent-warm: #ffd28a;--shell-top: #101010;--shell-mid: #171719;--panel: #1d1d20;--button-start: #ff1f31;--button-end: #e61f31}.theme-ocean{--accent: #20d0ff;--accent-2: #4b7bff;--accent-soft: rgba(32, 208, 255, .34);--accent-warm: #a9f3ff;--shell-top: #071214;--shell-mid: #10191d;--panel: #172126;--button-start: #24d4ff;--button-end: #2768ff}.theme-mint{--accent: #25e6a4;--accent-2: #2f8dff;--accent-soft: rgba(37, 230, 164, .32);--accent-warm: #d5ff88;--shell-top: #0b1310;--shell-mid: #121c18;--panel: #18231f;--button-start: #24e39f;--button-end: #15a877}.theme-sunset{--accent: #ff7a2f;--accent-2: #ff2f70;--accent-soft: rgba(255, 122, 47, .34);--accent-warm: #ffe08a;--shell-top: #140d0b;--shell-mid: #211715;--panel: #261b18;--button-start: #ff8a35;--button-end: #f02f63}.theme-violet{--accent: #b867ff;--accent-2: #31c8ff;--accent-soft: rgba(184, 103, 255, .34);--accent-warm: #f0c8ff;--shell-top: #100d16;--shell-mid: #191521;--panel: #211b2a;--button-start: #b967ff;--button-end: #743eff}.topbar{display:flex;justify-content:center;align-items:center;min-height:38px;font-size:22px;font-weight:700;letter-spacing:0}.meter-panel{display:flex;justify-content:space-between;gap:20px;margin-top:28px}.eyebrow{display:block;color:#f0f0f2;font-size:15px;font-weight:800}.tempo-readout{display:flex;align-items:baseline;gap:8px;margin-top:8px}.tempo-readout strong,.signature-readout strong{font-size:30px;line-height:1}.tempo-readout span:last-child{color:#808086;font-size:18px}.note{color:#bfc0c5;font-size:24px}.signature-readout{text-align:right}.signature-readout strong{display:block;margin-top:8px}.beat-lanes{display:grid;grid-template-columns:repeat(auto-fit,minmax(42px,1fr));gap:clamp(14px,6vw,28px);align-items:end;min-height:clamp(132px,32svh,172px);padding:24px clamp(20px,8vw,34px) 0}.beat-lane{display:block;height:clamp(124px,30svh,168px);border-radius:12px;background:linear-gradient(180deg,#333338,#3f3f41);box-shadow:inset 0 -56px #ffffff0d;opacity:.8;transform-origin:bottom;transition:transform 80ms ease,background 80ms ease,box-shadow 80ms ease}.beat-lane.is-full-active{background:linear-gradient(180deg,var(--accent-warm),var(--accent) 58%,#42434a);box-shadow:0 0 22px var(--accent-soft),inset 0 -56px #ffffff0f;transform:scaleY(1.05)}.beat-lane.is-lower-active{background:linear-gradient(180deg,#333338 0 48%,var(--accent) 49% 100%);box-shadow:0 0 16px var(--accent-soft),inset 0 56px #00000014;transform:scaleY(1.02)}.control-panel{min-height:54svh;margin:24px -18px calc(env(safe-area-inset-bottom)*-1);padding:24px 18px calc(env(safe-area-inset-bottom) + 24px);border-radius:26px 26px 0 0;background:var(--panel)}.quick-row{display:grid;grid-template-columns:minmax(76px,1fr) 48px minmax(72px,.8fr) 48px minmax(76px,1fr);gap:8px;align-items:center}.pill-control,.color-button{display:flex;align-items:center;justify-content:center;min-height:54px;border:0;border-radius:29px;color:#a8a8ad;background:linear-gradient(180deg,#2b2b2f,#1b1b1e);box-shadow:0 10px 18px #00000052,inset 0 1px #ffffff0f}.pill-control{min-width:0;justify-content:center;padding:0 8px}.pill-control select{width:100%;min-width:58px;text-align:center;text-align-last:center;font-size:20px;font-weight:800}select{min-width:0;border:0;color:#dedee2;background:transparent;outline:0}select option{color:#111}.round-step{width:48px;height:48px;border:2px solid #a9a9af;border-radius:50%;color:#e5e5e8;background:transparent;font-size:26px;line-height:1}.bpm-stack{display:grid;justify-items:center;align-content:center;min-width:0;min-height:76px;overflow:hidden}.bpm-stack span{color:#b9b9bf;font-size:13px;font-weight:700}.bpm-value-button,.bpm-input{max-width:100%;width:100%;min-height:40px;padding:0;border:0;color:#fff;background:transparent;font-size:clamp(28px,8.5vw,42px);font-weight:700;line-height:.9;text-align:center;white-space:nowrap}.bpm-value-button{cursor:pointer}.bpm-input{outline:0;caret-color:var(--accent)}.bpm-stack small{color:#b9b9bf;max-width:100%;overflow:hidden;font-size:13px;text-overflow:ellipsis;white-space:nowrap}.color-button{min-width:0;font-size:17px;font-weight:800}.dial{position:relative;width:min(72vw,350px);aspect-ratio:1;margin:36px auto 24px;border-radius:50%;background:radial-gradient(circle at center,transparent 58%,var(--panel) 59%),repeating-conic-gradient(from -140deg,var(--accent) 0 1.5deg,transparent 1.5deg 4deg),conic-gradient(from -140deg,var(--accent) 0 var(--progress),var(--accent-2) var(--progress) 78%,#242429 78% 100%);box-shadow:0 16px 32px #00000057;cursor:default}.dial-hit-ring:active{cursor:grabbing}.dial-hit-ring{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;border-radius:50%;cursor:grab;touch-action:none;-webkit-mask:radial-gradient(circle,transparent 0 50%,#000 52% 100%);mask:radial-gradient(circle,transparent 0 50%,#000 52% 100%)}.dial-track{position:absolute;top:17%;right:17%;bottom:17%;left:17%;border-radius:50%;background:linear-gradient(145deg,#333338,#171719);box-shadow:inset 0 12px 28px #ffffff0f,inset 0 -14px 26px #0000006b,0 8px 22px #00000061}.dial-knob{position:absolute;top:27%;right:27%;bottom:27%;left:27%;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#333337,#202023);box-shadow:inset 0 12px 22px #ffffff0a,0 12px 20px #00000047}.play-button{position:relative;z-index:4;width:clamp(58px,16vw,74px);height:clamp(58px,16vw,74px);border:0;border-radius:50%;color:#fff3eb;background:linear-gradient(145deg,var(--button-start),var(--button-end));box-shadow:0 8px 15px #00000047;font-size:clamp(24px,7vw,30px)}.pause-icon{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;height:100%}.pause-icon span{display:block;width:7px;height:27px;border-radius:7px;background:#fff3eb}.dial.is-running .play-button{animation:buttonPulse .42s ease-out}.dial.accent-pulse .dial-track{box-shadow:inset 0 12px 28px #ffffff0f,inset 0 -14px 26px #0000006b,0 0 0 8px var(--accent-soft),0 0 28px var(--accent-soft)}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}.settings-grid label{display:grid;gap:9px;color:#a5a5ab;font-size:13px;font-weight:700}.settings-grid select,.settings-grid input{width:100%;min-height:42px;padding:0 12px;border:1px solid #34343a;border-radius:8px;color:#efeff3;background:#151517}input[type=range]{accent-color:var(--accent)}button{-webkit-tap-highlight-color:transparent}@keyframes buttonPulse{0%{transform:scale(.94)}to{transform:scale(1)}}@media(max-width:380px){.app-shell{padding-left:14px;padding-right:14px}.control-panel{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px}.quick-row{grid-template-columns:minmax(58px,1fr) 38px minmax(58px,.78fr) 38px minmax(58px,1fr);gap:6px}.round-step{width:38px;height:38px;font-size:22px}.color-button{font-size:16px}.pill-control,.color-button{min-height:48px;border-radius:24px}.bpm-stack{min-height:66px}.bpm-value-button,.bpm-input{font-size:clamp(26px,8vw,34px)}.beat-lanes{gap:18px;padding-inline:24px}.dial{width:min(70vw,300px);margin-top:28px}}@media(max-height:720px){.meter-panel{margin-top:18px}.beat-lanes{min-height:116px;padding-top:18px}.beat-lane{height:112px}.control-panel{margin-top:18px;padding-top:20px}.dial{width:min(64vw,300px);margin-top:24px}}