:root{color-scheme:dark;--bg: #0f0f10;--panel: rgba(27, 27, 29, .92);--panel-strong: rgba(36, 36, 39, .96);--panel-soft: rgba(48, 48, 52, .96);--text: #f4f4f4;--muted: #b8b8bc;--line: rgba(255, 255, 255, .12);--shadow: 0 18px 60px rgba(0, 0, 0, .42);--radius-lg: 30px;--radius-md: 22px;--radius-sm: 16px;--font: "Manrope", sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;font-family:var(--font);background:radial-gradient(circle at top center,rgba(255,255,255,.07),transparent 38%),linear-gradient(180deg,#171718,#101011 28%,#0c0c0d);color:var(--text)}button,input,select{font:inherit}button{border:0;cursor:pointer}.app-shell{min-height:100vh;padding:28px 34px 36px;overflow:hidden}.top-bar{display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{display:flex;align-items:center;gap:14px}.brand h1{margin:0;font-size:clamp(2rem,2vw,2.5rem);font-weight:700;letter-spacing:-.04em}.icon-button,.ghost-icon{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50%;color:#f7f7f8;background:transparent}.icon-button svg,.ghost-icon svg,.panel-title svg,.volume-row svg,.tap-button svg{width:26px;height:26px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}.hero-controller{display:flex;justify-content:center;margin:0 0 18px}.hero-panel{width:min(346px,100%);padding:14px 30px 18px;background:linear-gradient(180deg,#232326fa,#1b1b1dfa);border-radius:28px;box-shadow:var(--shadow)}.bpm-label{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--muted);font-size:.95rem;font-weight:800;letter-spacing:.26em}.bpm-label:before,.bpm-label:after{content:"";width:38px;height:1px;background:var(--line)}.tempo-row{display:grid;grid-template-columns:54px 1fr 54px;align-items:center;gap:18px;margin-top:8px}.round-button{width:50px;height:50px;border-radius:50%;background:var(--panel-soft);color:#fff;font-size:2rem;line-height:1;box-shadow:inset 0 0 0 1px var(--line),0 6px 16px #00000059}.bpm-display{text-align:center;font-size:clamp(3.3rem,6vw,4.6rem);font-weight:800;letter-spacing:-.08em;line-height:.9}.slider{width:100%;margin-top:14px;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:6px;border-radius:999px;background:linear-gradient(90deg,#ffffff38,#ffffff1a)}.slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;background:#f7f7f7;border:4px solid rgba(0,0,0,.18);box-shadow:0 6px 16px #00000059}.tap-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:210px;margin:18px auto 0;padding:12px 18px;border-radius:999px;background:linear-gradient(180deg,#36363af5,#26262af5);color:#fff;font-weight:700;box-shadow:inset 0 0 0 1px #ffffff1f,0 8px 22px #0000005c}.tap-button svg{width:22px;height:22px}.dashboard{display:grid;grid-template-columns:minmax(280px,460px) minmax(320px,520px) minmax(280px,420px);gap:18px;align-items:start}.column{display:grid;gap:18px}.center-column{align-content:start}.side-column{padding-top:14px}.panel{background:linear-gradient(180deg,#1b1b1dfa,#171719f2);border-radius:var(--radius-md);padding:22px 22px 20px;box-shadow:var(--shadow)}.panel-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.panel-title{display:flex;align-items:center;gap:10px}.panel-title h2{margin:0;font-size:1.15rem;font-weight:700;letter-spacing:-.03em}.grid{display:grid;gap:12px}.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.chip,.dropdown,.select-button,.accent-cell,.sound-card,.preset-card{border-radius:16px;background:var(--panel-soft);color:#f2f2f2;box-shadow:inset 0 0 0 1px #ffffff0a}.chip{min-height:56px;padding:10px 12px;font-size:1.2rem;font-weight:600}.chip.active,.accent-cell.active,.preset-card.selected,.sound-card.active,.select-button:focus-visible,.chip:focus-visible{background:#f4f4f5;color:#111113}.accent-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;overflow:hidden;border-radius:18px;background:var(--panel-soft)}.accent-cell{min-height:60px;border-radius:0;font-size:1.2rem;border-right:1px solid rgba(255,255,255,.16);transition:background .15s ease,color .15s ease,box-shadow .15s ease}.accent-cell:last-child{border-right:0}.custom-toggle{display:inline-flex;align-items:center;gap:12px;margin-top:18px;font-size:1.05rem}.custom-toggle input{position:absolute;opacity:0;pointer-events:none}.checkbox{width:28px;height:28px;border-radius:7px;border:2px solid rgba(255,255,255,.8)}.play-stage{position:relative;display:flex;flex-direction:column;align-items:center}.tick-ring{position:relative;width:70%;max-width:234px;aspect-ratio:1;display:grid;place-items:center}.tick-ring-visual,.play-button-anchor{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center}.play-stage-content{display:flex;flex-direction:column;align-items:center;margin-top:18px}.tick{position:absolute;top:50%;left:50%;width:5px;height:20px;border-radius:999px;background:linear-gradient(180deg,#ffffffa8,#fff3);transform:translate(-50%,-50%) rotate(var(--rotation)) translateY(-102px);transform-origin:center center;opacity:.9}.tick.lit{background:var(--text)}.play-button{width:126px;height:126px;border-radius:50%;background:radial-gradient(circle at 30% 20%,#323235,#1f1f21 80%);color:#f5f5f5;transition:transform .12s ease,box-shadow .12s ease}.play-button svg{width:51px;height:51px;fill:currentColor}.signature-readout{margin-top:0;font-size:3rem;font-weight:700;letter-spacing:-.05em}.signature-caption{color:var(--muted);font-size:1.1rem}.beat-track{display:flex;align-items:center;gap:10px;margin-top:18px}.beat-dot{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:#f5f5f5;color:#111113;font-size:1.2rem;font-weight:800;line-height:1;transform:scale(.37);transition:transform .15s ease,box-shadow .15s ease,font-size .15s ease}.beat-dot.current{transform:scale(1.02);box-shadow:0 0 0 7px color-mix(in srgb,var(--text) 16%,transparent)}.preset-grid,.sound-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.preset-card{min-height:86px;padding:12px 10px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px}.preset-bpm{font-size:2rem;font-weight:700;line-height:1}.preset-label{font-size:.95rem;color:inherit}.add-card{align-items:center;justify-content:center;gap:6px}.add-plus{font-size:2.2rem;line-height:1}.dropdown,.select-button{display:flex;align-items:center;justify-content:space-between;min-height:60px;padding:0 18px;font-size:1.15rem;margin-bottom:14px}.sound-card{min-height:98px;padding:14px 10px;display:grid;place-items:center;gap:8px;text-align:center;font-size:.95rem}.sound-glyph{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#ffffff1f;font-size:1.2rem;font-weight:800}.volume-row,.visual-row,.color-row{display:flex;align-items:center;gap:12px}.volume-row{margin-top:14px}.volume-row svg{flex:none}.visual-row{justify-content:space-between;margin-bottom:16px;color:#e6e6e8}.select-button{flex:1;margin:0}.chevron{font-size:1.6rem;line-height:1}.color-row{justify-content:space-between}.color-swatch{width:42px;height:42px;border-radius:50%;background:var(--swatch);box-shadow:inset 0 0 0 2px #ffffff29}.color-swatch.selected{outline:3px solid rgba(255,255,255,.82);outline-offset:3px}@media (max-width: 1180px){.dashboard{grid-template-columns:1fr}.side-column,.center-column{padding-top:0}.hero-controller{margin-top:18px}.play-stage{min-height:380px}.tick-ring{width:70%;max-width:210px}}@media (max-width: 640px){.app-shell{padding:20px 16px 28px}.brand h1{font-size:1.8rem}.hero-panel{clip-path:none;border-radius:28px;padding:18px 18px 20px}.grid.four,.grid.three,.sound-grid,.preset-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.accent-strip{grid-template-columns:repeat(4,minmax(0,1fr))}.play-button{width:108px;height:108px}}