/* Spartito editoriale: paper, ink, fine rules and an index in the margin. */
:root {
  --bg:#252320; --surface:#2b2824; --surface2:#36312c;
  --border:#49433b; --border2:#74695c; --text:#f3ecdf;
  --muted:#c1b6a5; --hint:#b9ad9c; --accent:#f0a099; --accent-text:#2c201c;
  --key-bg:#efe8da; --key-black:#242220;
  --serif:Georgia,'Times New Roman',serif;
}
html[data-theme=light] {
  --bg:#f8f2e6; --surface:#fbf6ed; --surface2:#eee6d8;
  --border:#d6cbbb; --border2:#a59884; --text:#29251f;
  --muted:#6c6154; --hint:#766957; --accent:#a63732; --accent-text:#fff8ed;
  --key-bg:#fffaf1; --key-black:#302d29;
}
body { font-size:15px; }
.topbar { padding-top:22px; padding-bottom:20px; font-weight:400; border-color:var(--text); }
.topbar>a { font:italic 20px var(--serif); }
.topbar span { font-family:var(--font); font-size:12px; }
header { padding:36px 32px 32px; }
header h1 { font:normal clamp(38px,5vw,62px)/1.1 var(--serif); letter-spacing:-.05em; }
header p { font-size:13px; color:var(--muted); margin-top:14px; }
.header-actions { top:40px; }
.icon-btn { border-radius:0; background:transparent; border-color:var(--border2); }
main { display:grid; grid-template-columns:150px minmax(0,1fr); column-gap:32px; align-items:start; }
main>.control-panel { grid-column:2; grid-row:1; padding:18px 0 24px; border-top:1px solid var(--text); }
main>.workspace-nav { grid-column:1; grid-row:1 / span 2; position:sticky; top:24px; flex-direction:column; align-items:stretch; gap:6px; padding:8px 18px 30px 0; margin:0; border:0; border-right:1px solid var(--border2); overflow:visible; min-height:360px; }
main>.workspace-nav a { min-height:48px; padding:10px 0; gap:10px; border:0; background:transparent; font:11px var(--font); color:var(--muted); }
main>.workspace-nav a span { font:17px var(--serif); }
main>.workspace-nav a[aria-current] { color:var(--accent); }
main>.workspace-nav a[aria-current] span { text-decoration:underline; text-underline-offset:7px; text-decoration-thickness:1px; }
main>#studio,main>#patterns,main>#circle,main>#theory,main>#library,main>#perform { grid-column:2; grid-row:2; min-width:0; }
.section-heading { margin:28px 0 24px; align-items:center; }
.section-heading h2 { font:normal 36px/1.15 var(--serif); letter-spacing:-.035em; margin-top:8px; }
.eyebrow,.seg-label { font:10px/1.5 var(--font); letter-spacing:.12em; color:var(--muted); }
.panel { background:transparent; border:0; border-top:1px solid var(--border2); border-radius:0; box-shadow:none; padding:22px 0; }
.panel h3 { font:normal 23px/1.25 var(--serif); }
.workspace { grid-template-columns:minmax(0,1.4fr) minmax(250px,1fr); gap:26px; }
.workspace>.panel+.panel { border-left:1px solid var(--border); padding-left:24px; }
.panel h3.scale-title-big { font:normal 40px/1.15 var(--serif); }
.button,select,input,.search-input,.small-action { border-radius:0; }
.button { background:transparent; border-color:var(--border2); }
.button.primary { background:var(--accent); color:var(--accent-text); }
input,select { background:var(--surface); }
.seg-btn { border-radius:0; background:transparent; border-color:transparent; font:16px var(--serif); }
.seg-btn.on { background:transparent; color:var(--accent); border-color:transparent; box-shadow:inset 0 -2px var(--accent); }
.note-btn { border:0; border-bottom:1px solid var(--border2); border-radius:0; background:transparent; font:22px var(--serif); }
.note-btn:first-child { border-bottom:2px solid var(--accent); }
.chord-palette { gap:0; border-top:1px solid var(--border); }
.palette-item { border:0; border-right:1px solid var(--border); border-bottom:1px solid var(--border); border-radius:0; background:transparent; }
.palette-item.selected { background:transparent; box-shadow:inset 0 -2px var(--accent); }
.chord-preview strong { font:28px var(--serif); }
.chord-add { border-radius:0; }
.chord-detail { padding-top:18px; }
.chord-box { background:transparent; border:0; border-radius:0; }
.chord-box-name { font:26px var(--serif); }
.sequence { gap:0; border-top:1px solid var(--text); border-bottom:1px solid var(--text); padding:0; }
.step { border:0; border-right:1px solid var(--border2); border-radius:0; background:transparent; min-width:142px; }
.step-preview strong { font:36px var(--serif); }
.step.playing { background:var(--surface2); box-shadow:inset 0 -3px var(--accent); }
.step-duration input { background:transparent; border-color:var(--border); }
.step-controls { border-top:1px solid var(--border); }
.secondary-card { border-radius:0; background:transparent; padding:16px 0; }
.secondary-card strong { font:25px var(--serif); }
.pattern-results { gap:0 28px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.pattern-card { padding:22px 0; border:0; border-top:1px solid var(--border2); border-radius:0; background:transparent; }
.pattern-card h3 { font:25px/1.2 var(--serif); }
.pattern-chords { font:18px/1.5 var(--serif); }
.pattern-bottom { border:0; }
.scale-card { background:transparent; border:0; border-top:1px solid var(--border2); border-radius:0; }
.scale-card.open { background:var(--surface); border-color:var(--border2); }
.scale-title { font:26px var(--serif); }
.filter-btn { border-radius:0; background:transparent; }
.filter-btn.on { background:var(--surface2); color:var(--accent); }
.lesson-grid { gap:24px; }
.lesson-card,.theory-lab { border:0; border-top:1px solid var(--border2); border-radius:0; background:transparent; padding:22px 0; }
.lesson-card h4,.theory-lab h4 { font:25px/1.3 var(--serif); }
.lesson-card p { font-size:14px; line-height:1.85; }
.chapter-title { font:30px var(--serif); }
.theory-tabs .button { border-radius:0; }
.theory-tabs .button.primary { background:transparent; border-color:transparent; color:var(--accent); box-shadow:inset 0 -2px var(--accent); }
.theory-fret-voicing { background:transparent; border-radius:0; }
.practice-toolbar h3 { font-size:26px; }
.practice-item { border-top-width:1px; }
.circle-layout { grid-template-columns:minmax(0,1fr) minmax(270px,1fr); gap:26px; }
.circle-node,.circle-node.selected,.circle-reading,.circle-step { border-radius:0; }
.circle-node.playing { box-shadow:none; }
.circle-reading { background:transparent; border-left:2px solid var(--accent); }
.circle-step { background:transparent; border-width:0 1px 1px 0; }
.circle-chord-title h3 { font-size:44px; }
.circle-sector.predominant { fill:var(--muted); stroke:var(--muted); }
.circle-sector.dominant { fill:var(--accent); stroke:var(--accent); }
.circle-legend .predominant { color:var(--muted); }
.circle-legend .dominant,.circle-edge.playing { color:var(--accent); stroke:var(--accent); }
.perform-sequence { gap:0; }
.perform-sequence .button { border-width:1px 1px 1px 0; }
.perform-sequence .selected { background:transparent; box-shadow:inset 0 -3px var(--accent); }
.perform-sequence strong,#performChord { font-family:var(--serif); font-weight:400; }
.perform-transport { top:0; }
footer { border-top:1px solid var(--border2); margin-top:36px; font-family:var(--serif); }
@media(max-width:1050px) {
 main { display:block; }
 main>.workspace-nav { flex-direction:row; align-items:center; min-height:0; top:0; gap:18px; padding:0; border:0; border-bottom:1px solid var(--border2); overflow-x:auto; margin:0 0 24px; }
 main>.workspace-nav a { flex:none; padding:14px 0; min-height:55px; }
 main>.workspace-nav a span { font-size:16px; }
 .perform-transport { top:56px; }
}
@media(max-width:700px) {
 .workspace { grid-template-columns:1fr; }
 .workspace>.panel+.panel { border-left:0; padding-left:0; }
 .circle-layout { grid-template-columns:1fr; }
 .pattern-results { grid-template-columns:1fr; }
 header { padding:26px 18px; }
 header h1 { font-size:38px; padding-right:90px; }
 .header-actions { top:27px; right:18px; }
 .section-heading h2 { font-size:30px; }
 .section-heading>span { max-width:110px; text-align:right; }
 main>.workspace-nav { gap:18px; }
 main>.workspace-nav a { font-size:0; gap:0; }
 main>.workspace-nav a span { font-size:15px; }
 .panel { padding:20px 0; }
 .step { min-width:135px; }
}
@media(prefers-reduced-motion:reduce) { body { transition:none; } }