:root {
  --ink:#1d1f23; --muted:#6b6f76; --faint:#9a9ea5; --line:#e6e3de; --bg:#f6f4f0; --card:#fff;
  --accent:#7a2e1f; --accent-2:#f4ebe6; --accent-3:#e9d6cc; --hl:#c2410c; --radius:10px;
  --soft:#fbf8f5; --track:#d6d3ce; --glass:rgba(255,255,255,.94); --guide:#d9d4cd; --guide-2:#c9c2b9; --on-accent:#fff;
  color-scheme: light;
}
/* tema scuro: carta d'inchiostro, accento color rame chiaro */
:root[data-theme="dark"] {
  --ink:#e8e4de; --muted:#a7a29b; --faint:#7d7972; --line:#34312d; --bg:#161514; --card:#1f1d1b;
  --accent:#e39a7a; --accent-2:#3a2620; --accent-3:#5a372b; --hl:#c2410c;
  --soft:#1b1917; --track:#4a4641; --glass:rgba(31,29,27,.94); --guide:#4b4640; --guide-2:#6a645c; --on-accent:#1a1210;
  color-scheme: dark;
}
:root[data-theme="dark"] .levels button.on, :root[data-theme="dark"] .btn.primary, :root[data-theme="dark"] .btn.play { color:var(--on-accent); }
:root[data-theme="dark"] .levels button.on b { color:var(--on-accent); }
:root[data-theme="dark"] .btn.play.playing { background:var(--ink); color:var(--bg); }
/* la notazione usa currentColor: note chiare su fondo scuro */
.score { color:var(--ink); }
:root[data-theme="dark"] .sheet {
  /* la partitura resta sempre un foglio bianco con scrittura nera */
  --ink:#1d1f23; --muted:#6b6f76; --faint:#9a9ea5; --line:#e6e3de; --bg:#f6f4f0; --card:#fff;
  --accent:#7a2e1f; --accent-2:#f4ebe6; --accent-3:#e9d6cc; --soft:#fbf8f5; --guide:#d9d4cd; --guide-2:#c9c2b9;
  background:#fff; color:var(--ink); color-scheme:light; border-color:#3a3632;
}
.score svg.definition-scale, .score svg svg { color:inherit; }
:root[data-theme="dark"] .switch span::after { background:#e8e4de; }
.theme-btn { width:34px; height:34px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; padding:0; border:1px solid var(--line); background:var(--card); color:var(--muted); }
.theme-btn:hover { color:var(--ink); }
.theme-btn svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }
* { box-sizing:border-box; }
html, body { height:100%; }
body { margin:0; font:14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; color:var(--ink); background:var(--bg); }
button, input, select { font:inherit; color:inherit; }
button { cursor:pointer; }

/* barra superiore */
.appbar { display:flex; align-items:center; gap:20px; padding:10px 20px; background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; }
.brand { font-family: Georgia, "Times New Roman", serif; font-size:20px; letter-spacing:.2px; white-space:nowrap; }
.brand em { color:var(--accent); }
.levels { display:flex; gap:4px; flex:1; justify-content:center; flex-wrap:wrap; }
.levels button { border:1px solid transparent; background:none; border-radius:8px; padding:4px 9px 3px; min-width:62px; text-align:center; line-height:1.15; color:var(--muted); }
.levels button b { display:block; font-size:16px; color:var(--ink); font-weight:600; }
.levels button small { font-size:10.5px; letter-spacing:.2px; }
.levels button:hover { background:var(--bg); }
.levels button.on { background:var(--accent); border-color:var(--accent); color:#f3e3dc; }
.levels button.on b { color:#fff; }
.levels button.base { border-color:var(--accent-3); border-style:dashed; }
.gen { display:flex; align-items:center; gap:10px; }
.seed { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:12px; }
.seed input { width:80px; padding:5px 7px; border:1px solid var(--line); border-radius:7px; background:var(--bg); font-family: ui-monospace, Menlo, Consolas, monospace; font-size:12.5px; }

.btn { border:1px solid var(--line); background:var(--card); border-radius:8px; padding:6px 13px; }
.btn:hover { background:var(--bg); }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.primary:hover { filter:brightness(1.12); }
.btn.ghost { background:transparent; }
.btn.sq { width:30px; padding:4px 0; }
.link { border:0; background:none; color:var(--accent); font-size:12px; padding:0; }
.link:hover { text-decoration:underline; }

/* area di lavoro: pannello e partitura scorrono separatamente, la partitura resta sempre in vista */
html, body { overflow:hidden; }
body { display:flex; flex-direction:column; height:100vh; }
.appbar { position:relative; flex:none; }
.workspace { flex:1; min-height:0; display:grid; grid-template-columns: 372px minmax(0,1fr); }
.panel { background:var(--card); border-right:1px solid var(--line); display:flex; flex-direction:column; min-height:0; }
.panel-head { display:flex; justify-content:space-between; align-items:center; padding:10px 16px 9px; border-bottom:1px solid var(--line); flex:none; }
.preset-state { font-size:12.5px; color:var(--muted); }
.preset-state b { color:var(--ink); font-weight:600; }
.preset-state .mod { color:var(--accent); }
.changes { display:flex; flex-wrap:wrap; gap:4px; padding:8px 12px; border-bottom:1px solid var(--line); background:var(--soft); flex:none; max-height:96px; overflow:auto; }
.changes[hidden] { display:none; }
.chg { display:inline-flex; align-items:center; gap:4px; border:1px solid var(--accent-3); background:var(--card); border-radius:999px; padding:1px 4px 1px 8px; font-size:11.5px; color:var(--muted); max-width:100%; }
.chg b { color:var(--accent); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px; }
.chg i { font-style:normal; color:var(--faint); width:15px; height:15px; line-height:14px; border-radius:50%; text-align:center; }
.chg:hover i { background:var(--accent-2); color:var(--accent); }
.panel-body { flex:1; min-height:0; display:grid; grid-template-columns:74px minmax(0,1fr); }
.rail { border-right:1px solid var(--line); background:var(--bg); padding:6px 0; overflow:auto; }
.rail button { display:flex; flex-direction:column; align-items:center; gap:1px; width:100%; border:0; background:none; padding:9px 2px 8px; font-size:10.5px; color:var(--muted); position:relative; line-height:1.15; hyphens:manual; }
.rail .ri { width:22px; height:22px; color:var(--faint); }
.rail .ri svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.rail .ri svg .f { fill:currentColor; stroke:none; }
.rail button:hover { color:var(--ink); }
.rail button.on { background:var(--card); color:var(--accent); font-weight:600; box-shadow: inset 3px 0 0 var(--accent); }
.rail button.on .ri { color:var(--accent); }
.rail button.changed::after { content:""; position:absolute; top:8px; right:12px; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.sections { overflow:auto; padding:4px 14px 30px; }
.sec-title { font-size:13px; text-transform:uppercase; letter-spacing:.6px; color:var(--faint); font-weight:600; margin:10px 0 8px; }
.sec-body { display:flex; flex-direction:column; gap:11px; }
.ctl > .lab { font-size:12px; color:var(--muted); margin-bottom:4px; display:flex; justify-content:space-between; }
.ctl > .lab output { color:var(--ink); font-weight:600; }
.ctl.changed > .lab, .ctl.changed .switch { color:var(--accent); }
.ctl.changed > .lab::before { content:"•"; color:var(--accent); margin-right:4px; }
.ctl.changed > .lab { justify-content:flex-start; }
.ctl.changed > .lab output { margin-left:auto; }
.grp-lab { font-size:10.5px; color:var(--faint); margin:3px 0 3px; text-transform:uppercase; letter-spacing:.5px; }
.main { overflow:auto; min-width:0; padding:0 22px 40px; }
.main > .bars { position:sticky; top:0; z-index:10; background:var(--bg); padding-top:12px; }
.sheet.flash { animation: flash 0.9s ease-out; }
@keyframes flash { 0% { box-shadow:0 0 0 3px var(--accent-3); } 100% { box-shadow:0 1px 2px rgba(0,0,0,.03); } }

/* controlli */
.seg { display:inline-flex; flex-wrap:wrap; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--bg); }
.seg button { border:0; background:none; padding:5px 10px; font-size:12.5px; color:var(--muted); border-right:1px solid var(--line); }
.seg button:last-child { border-right:0; }
.seg button.on { background:var(--card); color:var(--accent); font-weight:600; box-shadow: inset 0 -2px 0 var(--accent); }
.seg.small button { padding:3px 8px; font-size:12px; }
.chips { display:flex; flex-wrap:wrap; gap:5px; }
.chips button { border:1px solid var(--line); background:var(--card); border-radius:999px; padding:3px 10px; font-size:12.5px; color:var(--muted); }
.chips button:hover { border-color:var(--accent-3); }
.chips button.on { background:var(--accent-2); border-color:var(--accent-3); color:var(--accent); font-weight:600; }
.switch { display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:13px; user-select:none; }
.switch input { position:absolute; opacity:0; pointer-events:none; }
.switch span { width:30px; height:17px; border-radius:999px; background:var(--track); position:relative; transition:background .15s; flex:none; }
.switch span::after { content:""; position:absolute; left:2px; top:2px; width:13px; height:13px; border-radius:50%; background:#fff; transition:transform .15s; box-shadow:0 1px 2px rgba(0,0,0,.2); }
.switch input:checked + span { background:var(--accent); }
.switch input:checked + span::after { transform:translateX(13px); }
.switch input:focus-visible + span { outline:2px solid var(--accent-3); outline-offset:2px; }
input[type=range] { width:100%; accent-color:var(--accent); }
select { padding:5px 8px; border:1px solid var(--line); border-radius:7px; background:var(--card); max-width:220px; }
.ctl select { width:100%; max-width:none; }
.ctl .seg { display:flex; width:100%; flex-wrap:nowrap; }
.ctl .seg button { flex:1 1 auto; padding:5px 4px; font-size:12px; white-space:nowrap; }
.transport select#instrument { max-width:170px; }
.tempo .glyph { display:inline-flex; align-items:flex-end; height:24px; }

/* trasporto e vista */
.transport, .viewbar { display:flex; align-items:center; flex-wrap:wrap; gap:10px 16px; }
.transport { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:9px 12px; }
.viewbar { padding:9px 4px 9px; font-size:13px; }
.field { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--muted); }
.grow { flex:1; }
.btn.play { background:var(--accent); color:#fff; border-color:var(--accent); display:inline-flex; gap:7px; align-items:center; padding:7px 16px; font-weight:600; }
.btn.play.playing { background:var(--ink); border-color:var(--ink); }
.tempo { display:inline-flex; align-items:center; gap:5px; font-size:14px; }
.tempo .glyph { font-size:19px; line-height:1; font-family: "Bravura Text", "Noto Music", "Segoe UI Symbol", serif; }
.tempo input { width:54px; padding:4px 6px; border:1px solid var(--line); border-radius:7px; text-align:center; }
.tag-btn { border:1px solid var(--line); background:var(--bg); color:var(--muted); border-radius:999px; font-size:11px; padding:1px 8px; }
.tag-btn.on { background:var(--accent-2); color:var(--accent); border-color:var(--accent-3); }
.zoom { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); }
.menu { position:relative; }
.menu-list { position:absolute; right:0; top:calc(100% + 6px); background:var(--card); border:1px solid var(--line); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.08); padding:5px; z-index:30; min-width:220px; }
.menu-list button { display:block; width:100%; text-align:left; border:0; background:none; padding:7px 10px; border-radius:6px; }
.menu-list button:hover { background:var(--bg); }

/* foglio */
.sheet { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px 10px; box-shadow:0 1px 2px rgba(0,0,0,.03); }
.sheet-head h1 { font-family: Georgia, "Times New Roman", serif; font-weight:normal; font-size:21px; margin:0 0 6px; }
.tags { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:6px; }
.tags span { font-size:12px; color:var(--muted); background:var(--bg); border-radius:999px; padding:2px 9px; }
.score svg { display:block; width:100%; height:auto; }
.loading { color:var(--muted); }
g.note.playing, g.note.playing * { fill:var(--hl) !important; stroke:var(--hl); }
.toast { position:fixed; left:50%; bottom:22px; transform:translateX(-50%); background:var(--ink); color:var(--bg); padding:8px 14px; border-radius:8px; font-size:13px; opacity:0; transition:opacity .2s; pointer-events:none; }
.toast.show { opacity:.94; }

@media (max-width: 1100px) {
  .levels button small { display:none; } .levels button { min-width:36px; }
}
@media (max-width: 860px) {
  html, body { overflow:auto; } body { height:auto; display:block; }
  .workspace { grid-template-columns:1fr; }
  .panel { border-right:0; border-bottom:1px solid var(--line); max-height:70vh; }
  .main { overflow:visible; }
  .appbar { flex-wrap:wrap; }
}
@media print {
  :root { --ink:#1d1f23; --card:#fff; --bg:#fff; --line:#e6e3de; --muted:#6b6f76; }
  .score { color:#000 !important; }
  html, body { overflow:visible; height:auto; display:block; }
  .main { overflow:visible; }
  .appbar, .panel, .transport, .viewbar, .toast { display:none !important; }
  body { background:#fff; }
  .workspace { display:block; }
  .main { padding:0; }
  .sheet { border:0; box-shadow:none; padding:0; }
  .score svg { page-break-inside:avoid; }
}

/* menu condivisione */
.menu-code { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 10px 2px; font-size:12.5px; color:var(--muted); }
.menu-code input { width:96px; padding:4px 7px; border:1px solid var(--line); border-radius:7px; background:var(--bg); font-family: ui-monospace, Menlo, Consolas, monospace; font-size:12.5px; }
.menu-hint { margin:4px 10px 6px; font-size:11.5px; color:var(--faint); max-width:250px; line-height:1.35; }
.menu-list hr { border:0; border-top:1px solid var(--line); margin:5px 4px; }
.menu-list { min-width:280px; }
.sheet-foot { font-size:11px; color:var(--faint); text-align:right; padding:2px 2px 6px; font-family: ui-monospace, Menlo, Consolas, monospace; }

/* gesto della mano */
.gesture { position:fixed; right:26px; bottom:24px; width:168px; height:168px; background:var(--glass); border:1px solid var(--line); border-radius:14px; box-shadow:0 6px 22px rgba(0,0,0,.08); z-index:15; backdrop-filter: blur(3px); }
.gesture[hidden] { display:none; }
.gesture-svg { position:absolute; inset:8px; width:calc(100% - 16px); height:calc(100% - 16px); overflow:visible; }
.g-path { fill:none; stroke:var(--guide); stroke-width:1.1; stroke-dasharray:2 2.2; }
.g-pt { fill:var(--guide-2); }
.g-tx { font-size:6.5px; fill:var(--faint); font-family: system-ui, sans-serif; }
.g-trail { fill:none; stroke:var(--accent); stroke-opacity:.28; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.g-dot { fill:var(--accent); }
.g-num { position:absolute; top:8px; right:11px; font: 600 15px/1 Georgia, serif; color:var(--accent); }
.g-num.down { font-size:19px; }
.g-lab { position:absolute; top:9px; left:11px; font-size:11px; color:var(--faint); }
@media print { .gesture { display:none !important; } }

.ctl .seg.wrap { display:grid; grid-template-columns:repeat(3, 1fr); }
.ctl .seg.wrap button { border-bottom:1px solid var(--line); }
.ctl .seg.wrap button:nth-child(3n) { border-right:0; }

.credits { border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--ink); max-width:560px; padding:22px 26px; box-shadow:0 20px 60px rgba(0,0,0,.25); }
.credits::backdrop { background:rgba(0,0,0,.35); }
.credits h2 { font-family:Georgia,"Times New Roman",serif; font-weight:normal; font-size:21px; margin:0 0 10px; }
.credits h3 { font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:16px 0 4px; }
.credits p, .credits li { font-size:13.5px; line-height:1.5; }
.credits ul { padding-left:18px; margin:4px 0; }
.credits a { color:var(--accent); }
.credits-note { color:var(--faint); font-size:12px !important; }
.credits form { text-align:right; margin-top:14px; }
@media print { .credits { display:none !important; } }