:root { color-scheme:light; --paper:#faf9f7; --surface:#fff; --ink:#20201f; --muted:#74736f; --line:#e6e4e0; --soft:#f1f0ed; --accent:#775b40; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:16px; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); -webkit-font-smoothing:antialiased; }
button,input,textarea,select { font:inherit; color:inherit; }
button { cursor:pointer; border:0; background:none; }
button:disabled { opacity:.4; cursor:default; }
button:not(:disabled):hover { filter:brightness(.94); }
a { color:inherit; }
button,input,textarea,select { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid #967557; outline-offset:4px; }
button { touch-action:manipulation; }
svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
h1,h2,h3,p { margin:0; }
[hidden] { display:none!important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip { position:absolute; top:-80px; left:16px; z-index:10; padding:12px; background:white; }
.skip:focus { top:12px; }
.topbar { height:88px; padding:0 36px; display:flex; align-items:center; gap:22px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:11px; text-decoration:none; font-size:26px; font-weight:650; letter-spacing:-1px; }
.brand img { border-radius:9px; }
.brand-detail { font-weight:400; color:var(--muted); }
.edition { font-size:.75rem; color:var(--muted); border:1px solid var(--line); border-radius:6px; padding:4px 7px; }
.account-button { margin-left:auto; display:flex; align-items:center; gap:10px; min-height:44px; font-size:.875rem; padding:8px 14px; border:1px solid var(--line); border-radius:24px; background:var(--surface); }
.workspace { display:grid; grid-template-columns:232px minmax(300px,1fr); min-height:calc(100dvh - 88px); max-width:1200px; margin:auto; padding-bottom:calc(var(--folio-dock-height,90px) + 16px); }
.catalogue { padding:30px 16px; border-right:1px solid var(--line); }
.section-heading { display:flex; align-items:center; justify-content:space-between; padding:0 14px; margin-bottom:22px; }
.section-heading h1 { font-size:1.125rem; font-weight:600; letter-spacing:-.3px; }
.section-heading>span { color:var(--muted); font-size:.75rem; }
.family-label { margin:20px 14px 8px; font-size:.75rem; color:var(--muted); font-weight:500; }
.rhythm-button { display:flex; text-align:left; align-items:center; gap:12px; width:100%; min-height:58px; border:1px solid transparent; border-radius:12px; padding:10px 13px; }
.rhythm-button.active { background:var(--surface); border-color:var(--line); box-shadow:0 2px 4px #00000003; }
.rhythm-button .rhythm-mark { font-size:23px; color:#99938b; width:25px; text-align:center; }
.rhythm-button.active .rhythm-mark { color:var(--accent); }
.rhythm-button strong { font-size:.875rem; font-weight:550; display:block; }
.rhythm-button small { display:block; margin-top:4px; color:var(--muted); font-size:.75rem; }
.catalogue-note { font-size:.75rem; line-height:1.6; color:var(--muted); padding:30px 14px 0; }
.practice { padding:38px clamp(24px,4vw,64px) 24px; text-align:center; min-width:0; }
.practice-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.eyebrow { font-size:.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:.13em; font-weight:550; }
.time-signature { font-size:.875rem; border:1px solid var(--line); padding:5px 10px; border-radius:6px; font-variant-numeric:tabular-nums; }
.practice h2 { font-size:clamp(26px,3vw,38px); font-weight:550; letter-spacing:-1.5px; margin-bottom:10px; }
.muted { color:var(--muted); font-size:.875rem; line-height:1.5; }
.tempo-stage { margin:36px auto 24px; max-width:345px; }
.tempo-label { color:var(--muted); font-size:.875rem; }
.tempo-number { display:flex; align-items:center; justify-content:center; gap:8px; }
.tempo-number input { width:clamp(154px,16vw,218px); background:none; border:0; text-align:center; font-size:clamp(76px,8vw,108px); line-height:1.2; font-weight:300; letter-spacing:-6px; font-variant-numeric:tabular-nums; appearance:textfield; -moz-appearance:textfield; padding:4px 0; }
.tempo-number input::-webkit-inner-spin-button { appearance:none; }
.round { width:42px; height:42px; border-radius:50%; font-size:25px; flex-shrink:0; }
.secondary { background:var(--surface); border:1px solid var(--line); }
.bpm-label { font-size:.75rem; color:var(--muted); }
input[type=range] { accent-color:#514b44; cursor:pointer; height:26px; }
.tempo-slider { display:block; width:100%; margin:27px 0 11px; }
.text-button { font-size:.875rem; padding:8px 10px; color:var(--muted); text-decoration:underline; text-underline-offset:4px; min-height:40px; }
.beats { display:flex; justify-content:center; gap:18px; }
.beat { display:grid; place-items:center; width:38px; height:38px; border:1px solid var(--line); border-radius:50%; font-size:.875rem; color:var(--muted); transition:background .06s,color .06s; }
.beat.active { color:white; background:var(--ink); border-color:var(--ink); }
.beat.count { background:var(--accent); border-color:var(--accent); }
.transport-status { font-size:.75rem; color:var(--muted); min-height:20px; margin:13px 0 22px; }
.play-button { display:inline-flex; align-items:center; justify-content:center; gap:12px; background:var(--ink); color:white; border-radius:32px; min-width:145px; min-height:58px; font-size:1rem; padding:15px 26px; }
.play-button svg { fill:currentColor; stroke:none; width:21px; height:21px; }
.practice-settings { border-top:1px solid var(--line); margin:34px auto 0; max-width:410px; padding-top:16px; }
.practice-settings label { display:flex; align-items:center; justify-content:space-between; min-height:50px; gap:18px; text-align:left; font-size:.875rem; }
select { border:1px solid var(--line); background:var(--surface); border-radius:9px; padding:8px 12px; min-height:40px; }
.check-row input { width:20px; height:20px; accent-color:var(--ink); }
.volume-row input { width:54%; }
.sound-note { color:var(--muted); font-size:.75rem; text-align:right; margin:0 0 8px; }
.keyboard-hint { color:var(--muted); font-size:.75rem; margin:24px 0 0; }
.error { font-size:.875rem; color:#a33122; margin-top:14px; line-height:1.5; }
.personas { display:flex; align-items:center; gap:8px; flex:1; }
.persona { width:46px; height:46px; padding:3px; border:1px solid transparent; border-radius:50%; }
.persona img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
.persona.active { border-color:#948476; background:#f2eeea; }
.persona:not(.active) { opacity:.58; }
.personas strong { font-size:1rem; font-weight:600; margin-left:5px; }
.icon-button { width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; flex-shrink:0; }
.icon-button:hover { background:var(--soft); }
.icon-button[aria-pressed=true] { background:var(--soft); color:var(--accent); }
.assistant-tabs button { flex:1; font-size:.875rem; padding:8px 4px; min-height:36px; border-radius:7px; white-space:nowrap; }
.assistant-tabs button[aria-selected=true] { background:var(--surface); box-shadow:0 1px 4px #0000000d; }
.chat-welcome { margin:54px auto 25px; text-align:center; max-width:265px; }
.chat-welcome>img { border-radius:50%; opacity:.92; }
.chat-welcome h2 { font-size:1.1rem; letter-spacing:-.4px; font-weight:550; margin:20px 0 12px; }
.chat-welcome p { color:var(--muted); font-size:.875rem; line-height:1.6; }
.quiet-button { border:1px solid var(--line); background:var(--paper); padding:11px 15px; min-height:44px; border-radius:22px; font-size:.875rem; margin-top:22px; }
.message { margin:0 0 24px; line-height:1.6; font-size:1rem; white-space:pre-wrap; }
.message .author { display:block; font-size:.75rem; font-weight:600; color:var(--muted); margin-bottom:7px; }
.message.user { background:var(--soft); border-radius:15px; padding:12px 15px; margin-left:24px; }
.message.system { font-size:.875rem; color:var(--muted); border-left:2px solid var(--line); padding-left:12px; }
.message a { text-underline-offset:3px; }
.message h3 { font-size:1rem; font-weight:600; margin:12px 0 5px; }
.message ul { padding-left:20px; margin:8px 0; }
.message code { font-size:.9em; background:var(--soft); border-radius:4px; padding:1px 4px; }
.send-button { width:36px; height:36px; background:var(--ink); color:white; border-radius:50%; display:grid; place-items:center; }
#microphone { touch-action:none; user-select:none; -webkit-user-select:none; }
#microphone.recording { color:white; background:#a94332; }
.capabilities { padding:20px 26px; font-size:1rem; line-height:1.6; overflow:auto; }
.capabilities h2,.capabilities h3 { font-size:1rem; margin-bottom:12px; font-weight:600; }
.capabilities h3 { margin-top:30px; }
.capabilities p { color:var(--muted); }
.capabilities ul { padding-left:18px; }
.capabilities li { margin:12px 0; }
dialog { border:1px solid var(--line); padding:38px; border-radius:24px; width:min(460px,calc(100% - 32px)); background:var(--surface); box-shadow:0 24px 100px #0002; }
dialog::backdrop { background:#24211f55; }
.dialog-close { position:absolute; right:12px; top:12px; font-size:26px; }
dialog>img { border-radius:12px; }
dialog h2 { font-size:25px; letter-spacing:-.8px; margin:20px 0 12px; }
dialog p { font-size:.875rem; color:var(--muted); line-height:1.6; margin:12px 0; }
dialog label { display:block; font-size:.875rem; margin:25px 0 8px; }
dialog input { width:100%; border:1px solid var(--line); border-radius:9px; padding:12px; font-size:1rem; }
.primary { width:100%; background:var(--ink); color:white; border-radius:10px; padding:13px; margin-top:16px; min-height:46px; }
.privacy { display:block; font-size:.75rem; color:var(--muted); margin-top:26px; text-underline-offset:3px; }
@media(max-width:560px) { .topbar { height:72px; padding-inline:16px; gap:12px; } .brand { font-size:23px; gap:7px; } .brand img { width:32px; height:32px; } .edition { display:none; } .account-button { padding:8px 10px; gap:6px; } .account-button svg { width:18px; } .workspace { display:block; } .catalogue { border:0; border-bottom:1px solid var(--line); padding:18px 0 10px; } .section-heading { padding-inline:22px; margin-bottom:12px; } .section-heading h1 { font-size:1rem; } .catalogue-list { display:flex; gap:6px; overflow-x:auto; padding:0 16px 8px; } .family-group { display:contents; } .family-label { display:none; } .rhythm-button { width:auto; flex-shrink:0; border:1px solid var(--line); padding:9px 14px; min-height:52px; } .rhythm-button .rhythm-mark { display:none; } .rhythm-button.active { background:var(--ink); color:white; } .rhythm-button.active small { color:#d0cbc5; } .practice { padding:24px 28px; } .practice-heading { margin-bottom:16px; } .tempo-stage { margin-top:26px; } .tempo-number input { font-size:96px; width:190px; } .tempo-slider { margin-top:18px; } .practice-settings { margin-top:26px; } .keyboard-hint { display:none; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; } }

.audio-credits { font-size:.75rem; color:var(--muted); margin:12px 0 0; }
.credits-page { max-width:700px; margin:48px auto; padding:0 24px; line-height:1.7; }