:root{color:var(--ink);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;--bg:#111317;--panel:#1c1f25eb;--panel-strong:#20242b;--field:#0d0f13;--ink:#f3f5f0;--muted:#a9b2ad;--line:#ffffff1f;--accent:#55d6b0;--accent-strong:#24b88d;--accent-soft:#55d6b029;--accent-2:#d36f43;--danger:#d75555;--shadow:0 22px 70px #0000005c;--focus:#55d6b05c;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}body[data-theme=petrucci]{--bg:#100f1d;--panel:#181627ed;--panel-strong:#211d36;--field:#0a0912;--ink:#f5f1ff;--muted:#b5adca;--line:#d2beff24;--accent:#a64dff;--accent-strong:#7d2bea;--accent-soft:#a64dff2b;--accent-2:#ff4e64;--danger:#e34b62;--focus:#a64dff6b}body[data-theme=wong]{--bg:#f2d7cd;--panel:#fff4eceb;--panel-strong:#fff7ef;--field:#fffdfa;--ink:#252831;--muted:#746f73;--line:#43374029;--accent:#2f8768;--accent-strong:#246c54;--accent-soft:#2f876821;--accent-2:#d1a83f;--danger:#b84f63;--focus:#2f876857}body[data-theme=mayer]{--bg:#17110d;--panel:#251c17f0;--panel-strong:#31251f;--field:#100c0a;--ink:#f8efe4;--muted:#c3b2a3;--line:#f5ddc224;--accent:#c97891;--accent-strong:#ae5874;--accent-soft:#c9789129;--accent-2:#78a66e;--danger:#d16b57;--focus:#c9789161}body[data-theme=henson]{--bg:#171318;--panel:#251d27f0;--panel-strong:#332435;--field:#100d12;--ink:#fff3fb;--muted:#d3bacb;--line:#ffc5e829;--accent:#ff9fd2;--accent-strong:#ff73bc;--accent-soft:#ff9fd22b;--accent-2:#98e6ff;--danger:#ff6f91;--focus:#ff9fd26b}*{box-sizing:border-box}body{background:linear-gradient(150deg, var(--accent-soft), transparent 34rem), radial-gradient(circle at 86% 8%, color-mix(in srgb, var(--accent-2) 24%, transparent), transparent 23rem), var(--bg);min-width:320px;min-height:100vh;margin:0}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--focus);outline-offset:3px}#app{place-items:start center;min-height:100vh;padding:14px;display:grid}.shell{gap:12px;width:min(100%,780px);display:grid}.tempo-panel,.control-block,.pulse-area{background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:8px}.tempo-panel{grid-template-columns:86px minmax(0,1fr);align-items:stretch;gap:10px;padding:12px;display:grid}.transport{border:1px solid color-mix(in srgb, var(--accent) 58%, var(--line));min-height:92px;color:var(--ink);background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 25%, var(--panel-strong)), var(--panel-strong));border-radius:8px;place-items:center;gap:2px;font-weight:850;display:grid;box-shadow:inset 0 0 0 1px #ffffff0d}.transport:active,.choice:active{transform:translateY(1px)}.transport[aria-pressed=true]{border-color:color-mix(in srgb, var(--danger) 72%, var(--line));background:linear-gradient(180deg, color-mix(in srgb, var(--danger) 30%, var(--panel-strong)), var(--panel-strong))}.transport-icon{color:var(--accent);font-size:1.5rem;line-height:1}.transport[aria-pressed=true] .transport-icon{color:var(--danger)}.transport-label{color:var(--muted);text-transform:uppercase;font-size:.78rem}.bpm-field{gap:6px;display:grid}.bpm-field span,.section-label,.effective span{color:var(--muted);letter-spacing:0;text-transform:uppercase;font-size:.72rem;font-weight:850}.bpm-field input{border:1px solid var(--line);background:var(--field);width:100%;min-height:92px;color:var(--ink);text-align:center;border-radius:8px;padding:4px 10px;font-size:3.25rem;font-weight:880}.effective{background:var(--accent-soft);border-radius:8px;grid-column:1/-1;justify-content:space-between;align-items:center;gap:10px;min-height:46px;padding:10px 12px;display:flex}.effective strong{color:var(--accent);font-size:1.35rem;line-height:1}.effective[data-dim=true] strong{color:var(--muted)}.pulse-area{grid-template-columns:1fr;place-items:center;gap:10px;min-height:118px;padding:14px 16px;display:grid}.pulse-ring{aspect-ratio:1;border:7px solid color-mix(in srgb, var(--accent) 22%, transparent);background:radial-gradient(circle at center, var(--panel-strong) 0 45%, var(--accent-soft) 46%), var(--field);width:86px;color:var(--accent);border-radius:999px;place-items:center;transition:transform 80ms,border-color 80ms,color 80ms;display:grid}.pulse-ring[data-pulse=beat]{border-color:color-mix(in srgb, var(--accent) 56%, transparent);transform:scale(1.035)}.pulse-ring[data-pulse=accent]{border-color:color-mix(in srgb, var(--accent-2) 70%, transparent);color:var(--accent-2);transform:scale(1.08)}.pulse-ring>span{font-family:Times New Roman,Georgia,serif;font-size:3.1rem;line-height:1}.beat-dots{justify-content:center;align-items:center;gap:10px;min-height:18px;display:flex}.beat-dot{background:color-mix(in srgb, var(--muted) 42%, transparent);border-radius:999px;width:11px;height:11px;transition:transform 80ms,background-color 80ms}.beat-dot[data-accent=true]{background:color-mix(in srgb, var(--accent-2) 48%, transparent);width:14px;height:14px}.beat-dot[data-active=true]{background:var(--accent);transform:scale(1.45)}.beat-dot[data-accent=true][data-active=true]{background:var(--accent-2)}.control-block{gap:10px;padding:12px;display:grid}.speed-grid,.division-grid,.select-grid{gap:8px;display:grid}.speed-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.division-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.select-grid{grid-template-columns:1fr}.choice{border:1px solid var(--line);background:var(--field);min-height:58px;color:var(--ink);border-radius:8px;place-items:center;transition:border-color .12s,background-color .12s,color .12s,transform .12s;display:grid}.choice[aria-pressed=true]{border-color:color-mix(in srgb, var(--accent) 70%, var(--line));background:color-mix(in srgb, var(--accent) 24%, var(--field));color:var(--ink)}.speed-choice{text-align:left;grid-template-rows:auto auto;grid-template-columns:1fr auto;gap:2px 7px;padding:10px}.speed-choice strong{justify-self:start;font-size:1.1rem}.speed-choice small{color:var(--muted);grid-column:1;justify-self:start;font-size:.76rem;font-weight:780}.speed-choice span{background:color-mix(in srgb, var(--muted) 16%, transparent);min-width:1.55rem;min-height:1.55rem;color:var(--muted);border-radius:999px;grid-area:1/2/3;place-items:center;font-size:.76rem;font-weight:850;display:grid}.speed-choice[aria-pressed=true] small,.speed-choice[aria-pressed=true] span{color:var(--ink)}.speed-choice[aria-pressed=true] span{background:color-mix(in srgb, var(--accent) 28%, transparent)}.division-choice{text-align:center;gap:4px;min-height:76px;padding:10px 8px}.notation{place-items:center;min-height:2.1rem;font-family:Times New Roman,Georgia,serif;font-size:2rem;line-height:1;display:grid}.division-label{color:var(--muted);font-size:.78rem;font-weight:760}.division-choice[aria-pressed=true] .division-label{color:var(--ink)}.tone-label,.theme-label{gap:10px;display:grid}select{border:1px solid var(--line);background:var(--field);width:100%;min-height:54px;color:var(--ink);border-radius:8px;padding:0 44px 0 14px;font-weight:750}@media (width>=620px){#app{padding:24px}.shell{gap:14px}.tempo-panel{grid-template-columns:106px minmax(0,1fr) 220px;align-items:end}.transport,.bpm-field input{min-height:104px}.effective{grid-column:auto;place-content:center stretch;min-height:104px;display:grid}.effective strong{font-size:1.8rem}.pulse-area{min-height:96px}.pulse-ring{border-width:6px;width:74px}.pulse-ring span{font-size:2.7rem}.speed-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.division-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.select-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}