.stats-panel{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:20px;display:flex;flex-direction:column;gap:14px}.stat-row{display:flex;justify-content:space-between;align-items:center}.label{font-size:13px;color:var(--text-muted)}.value{font-size:16px;font-weight:600;color:var(--text-primary)}.value.early{color:var(--early)}.value.late{color:var(--late)}.value.neutral{color:var(--perfect)}.sidebar{width:260px;padding:24px;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;gap:24px}.sidebar h2{font-size:20px;font-weight:600;color:var(--text-primary)}.section{display:flex;flex-direction:column;gap:8px}.section label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--text-muted)}.sidebar input[type=range]{accent-color:var(--accent)}.sidebar input,.sidebar select{background:var(--bg);border:1px solid var(--border);color:var(--text-primary);padding:6px 8px;border-radius:6px;transition:border .2s ease,box-shadow .2s ease}.sidebar input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}.buttonSection{margin-top:auto}.button{padding:10px 16px;border-radius:6px;border:none;cursor:pointer;transition:transform .08s ease,background .2s ease}.button:active{transform:scale(.98)}.start{background:var(--accent);color:#000}.stop{background:var(--late);color:#fff}.tap-pads{display:none}@media(max-width:768px){.tap-pads{display:flex;margin-top:auto;height:300px;width:100%}.tap-button{flex:1;border:none;background:var(--accent-soft);font-size:20px;color:var(--text-primary)}.tap-button.left{border-right:1px solid var(--border)}.tap-button:active{background:var(--accent)}html,body{overscroll-behavior:none;touch-action:manipulation}}.app{display:flex;height:100vh;background:var(--bg);color:var(--text-primary)}.main{flex:1;padding:40px;display:flex;flex-direction:column;gap:24px}.stats{margin-top:20px;color:var(--text-muted);font-size:14px}@media(max-width:768px){.app{flex-direction:column}.sidebar{width:100%;border-right:none;border-top:1px solid var(--border);order:2}.main{padding:16px;order:1}}:root{--bg: #0f172a;--surface: #111827;--border: #1f2937;--text-primary: #e5e7eb;--text-muted: #94a3b8;--accent: #22d3ee;--accent-soft: rgba(34, 211, 238, .2);--perfect: #22d3ee;--early: #f97316;--late: #ef4444;--grid: #1e293b}*{box-sizing:border-box;margin:0;padding:0;font-family:system-ui,sans-serif}html,body,#root{height:100%}