:root{--bg:#a9cdbf;--sheen:rgba(255,255,255,.22);--card:#f6f1e1;--ink:#14211e;--mute:#4a5c57;--line:#c8bfa2;--edge:#a89e7c;--hi:rgba(255,255,255,.65);--acc:#e0ad2f;--accink:#1b1608;--link:#0d6a5c;--wood:#4c2e1d;--wood2:#2b1a10;--fret:#cfcdc2;--str:#dfe1e1;--dot:#efe8d2;--pearl:#efe8d2;--note:#1d2b27;--noteink:#f6f1e1;--bnote:#f1e9d2;--bnoteink:#2a1810;--bmute:#bdb4a0;--root:#d6342c;--rootink:#fff;--sh:rgba(20,33,30,.22);
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0c1922;--sheen:rgba(255,255,255,.035);--card:#14262f;--ink:#e8efe6;--mute:#9bada8;--line:#2a4550;--edge:#0a151b;--hi:rgba(255,255,255,.07);--acc:#e3b341;--accink:#1b1608;--link:#7fd6bd;--wood:#47291a;--wood2:#26150c;--fret:#cfcdc2;--str:#dfe1e1;--dot:#efe8d2;--pearl:#efe8d2;--note:#eee7d3;--noteink:#14262f;--bnote:#f1e9d2;--bnoteink:#2a1810;--bmute:#bdb4a0;--root:#ff7a68;--rootink:#2b0e0a;--sh:rgba(0,0,0,.35)}}
:root[data-theme="dark"]{--bg:#0c1922;--sheen:rgba(255,255,255,.035);--card:#14262f;--ink:#e8efe6;--mute:#9bada8;--line:#2a4550;--edge:#0a151b;--hi:rgba(255,255,255,.07);--acc:#e3b341;--accink:#1b1608;--link:#7fd6bd;--wood:#47291a;--wood2:#26150c;--fret:#cfcdc2;--str:#dfe1e1;--dot:#efe8d2;--pearl:#efe8d2;--note:#eee7d3;--noteink:#14262f;--bnote:#f1e9d2;--bnoteink:#2a1810;--bmute:#bdb4a0;--root:#ff7a68;--rootink:#2b0e0a;--sh:rgba(0,0,0,.35)}
*{box-sizing:border-box}html,body{margin:0}[hidden]{display:none!important}
body{background:var(--bg) linear-gradient(120deg,var(--sheen),rgba(255,255,255,0) 40%,rgba(0,0,0,.07)) fixed;color:var(--ink);font:400 16px/1.55 "Hanken Grotesk",system-ui,sans-serif}
main{max-width:1120px;margin:0 auto;padding:22px 18px 56px}
h1{font:700 clamp(22px,3.3vw,34px)/1.18 Unbounded,"Hanken Grotesk",system-ui,sans-serif;letter-spacing:-.01em;margin:0 0 8px}
.sub{margin:0 0 18px;max-width:64ch;color:var(--mute)}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}.tbr{display:flex;align-items:center;gap:10px}
.brand{font:500 12.5px Unbounded,sans-serif}
button,select,a{font:inherit;color:var(--ink)}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button,.sb,.chip.lk{border:2px solid var(--edge);background:var(--card);border-radius:7px;padding:5px 12px;min-width:40px;cursor:pointer;font-weight:600;box-shadow:0 3px 0 var(--edge);transition:transform .08s,box-shadow .08s;text-decoration:none;display:inline-block}
.seg button:hover,.sb:hover,.chip.lk:hover{border-color:var(--link)}
.seg button:active,.sb:active,.chip.lk:active{transform:translateY(3px);box-shadow:0 0 0 var(--edge)}
.seg button.on{background:var(--acc);color:var(--accink);transform:translateY(2px);box-shadow:0 1px 0 var(--edge)}
#lang button{padding:4px 10px}
:focus-visible{outline:3px solid var(--link);outline-offset:2px}
.panel{position:relative;background:var(--card);border:2px solid var(--edge);border-radius:46px 14px 46px 14px;padding:26px 30px;margin-bottom:18px;box-shadow:inset 0 0 0 4px var(--hi),0 6px 0 var(--sh)}
.panel::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:
radial-gradient(circle,#d9d4c1 0 2.4px,#8b8570 3px 4px,transparent 4.6px) 18px 18px/10px 10px no-repeat,
radial-gradient(circle,#d9d4c1 0 2.4px,#8b8570 3px 4px,transparent 4.6px) calc(100% - 28px) 18px/10px 10px no-repeat,
radial-gradient(circle,#d9d4c1 0 2.4px,#8b8570 3px 4px,transparent 4.6px) 18px calc(100% - 28px)/10px 10px no-repeat,
radial-gradient(circle,#d9d4c1 0 2.4px,#8b8570 3px 4px,transparent 4.6px) calc(100% - 28px) calc(100% - 28px)/10px 10px no-repeat}
.row{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin-bottom:14px}.row:last-child{margin-bottom:0}
.lab{font-weight:700;font-size:14px;min-width:96px;color:var(--mute)}
select{background:var(--card);border:2px solid var(--edge);border-radius:7px;padding:7px 10px;min-width:240px;box-shadow:0 3px 0 var(--edge);font-weight:500}
.q{margin-left:8px;width:26px;height:26px;border-radius:50%;border:2px solid var(--edge);background:var(--card);box-shadow:0 2px 0 var(--edge);font:700 13px/1 "Hanken Grotesk",sans-serif;color:var(--ink);cursor:pointer;padding:0;vertical-align:middle}
.q:hover,.q:focus-visible{background:var(--acc);color:var(--accink)}
.sheet,.legend,.shapes{position:relative;background:var(--card);border:2px solid var(--edge);border-radius:6px;padding:16px 20px 18px 36px;margin-bottom:18px;box-shadow:0 5px 0 var(--sh)}
.sheet::before,.legend::before,.shapes::before{content:"";position:absolute;left:0;top:0;bottom:0;width:15px;background:linear-gradient(90deg,var(--pearl) 0 4px,#16100a 4px 6px,var(--pearl) 6px 10px,var(--acc) 10px 15px);border-right:2px solid var(--edge);border-radius:3px 0 0 3px}
.shapes h2,.sheet h2,.fam{font:600 15px/1.3 Unbounded,sans-serif;margin:0 0 12px}
.shapes h2::after,.fam::after{content:"";display:block;height:18px;margin-top:9px;opacity:.38;background:
linear-gradient(var(--ink),var(--ink)) 0 0/100% .8px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 3px/100% 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 6px/100% 1.3px no-repeat,
linear-gradient(var(--ink),var(--ink)) 0 9px/100% 1.7px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 12px/100% 2.2px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 15px/100% 2.8px no-repeat}
.hint{color:var(--mute);font-size:13.5px}.empty{color:var(--mute);font-size:14px}
svg{display:block}
svg text{font-family:"Hanken Grotesk",system-ui,sans-serif;font-weight:600}
@media (max-width:620px){.panel{padding:20px 16px;border-radius:30px 12px 30px 12px}.sheet,.legend,.shapes{padding-left:30px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}