/* Дизайн-система musicly. Собрано scripts/extract-prototype.php из прототипа. */


:root{--w:48rem}
.strum button,.pulse .cell{aspect-ratio:1/1}
h1{letter-spacing:-.045em}
.mod-head b{letter-spacing:0}
.strum button[data-v="U"]{background:var(--accent-soft); color:var(--accent); border-color:var(--accent)}
.strum button[data-v="X"]{background:var(--ink); color:var(--paper)}

*,*::before,*::after{box-sizing:border-box}
:root{padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 64px); -webkit-text-size-adjust:100%}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--font); font-size:17px; line-height:1.6;
  overflow-x:hidden}
img,svg{max-width:100%}
.wrap{width:100%; max-width:var(--w,48rem); margin:0 auto; padding:0 1rem}
.mono{font-family:var(--mono)}

/* шапка */
header.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:30; background:var(--bar);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.top-in{display:flex; align-items:center; gap:.7rem; height:60px; max-width:var(--w,48rem); margin:0 auto; padding:0 1rem}
.logo{font-weight:700; letter-spacing:-.03em; text-decoration:none; color:inherit; font-size:1.08rem; white-space:nowrap}
.logo i{font-style:normal; color:var(--accent)}
.top nav{margin-left:auto; display:flex; gap:.1rem; overflow-x:auto; scrollbar-width:none; min-width:0}
.top nav::-webkit-scrollbar{display:none}
.top nav a{font-size:.87rem; color:var(--muted); text-decoration:none; padding:.3rem .55rem; border-radius:7px; white-space:nowrap}
.top nav a:hover{color:var(--ink); background:var(--sunk)}

/* текст */
.crumbs{font-size:.8rem; color:var(--muted); margin:1.5rem 0 .5rem}
.crumbs a{color:inherit; text-decoration:none; border-bottom:1px solid var(--line)}
h1{font-family:var(--display); font-size:clamp(1.85rem,6vw,2.7rem); line-height:1.08; letter-spacing:-.03em; margin:0 0 .45rem; font-weight:var(--h1w,700)}
h2{font-family:var(--display); font-size:clamp(1.2rem,4.2vw,1.45rem); letter-spacing:-.02em; margin:2.5rem 0 .3rem; font-weight:var(--h2w,600)}
h3{font-size:1.02rem; margin:1.5rem 0 .2rem; font-weight:600}
p{margin:.55rem 0; max-width:62ch}
.lede{font-size:1.05rem; color:var(--muted); max-width:54ch}
.facts{display:flex; gap:.35rem; flex-wrap:wrap; margin:1rem 0 0; padding:0; list-style:none}
.facts li{font-family:var(--mono); font-size:.72rem; color:var(--muted); border:1px solid var(--line);
  border-radius:var(--rs); padding:.22rem .55rem; background:var(--card)}
.toc{border:1px solid var(--line); border-radius:var(--r); background:var(--card); padding:.85rem 1rem; margin:1.4rem 0 0}
.toc b{font-family:var(--mono); font-size:.7rem; letter-spacing:0; color:var(--muted)}
.toc ol{margin:.45rem 0 0; padding-left:1.25rem; font-size:.94rem}
.toc li{margin:.15rem 0}
.toc a{color:inherit; text-decoration:none; border-bottom:1px solid var(--line)}
.toc a:hover{border-color:var(--accent); color:var(--accent)}
.callout{border-left:3px solid var(--accent); background:var(--accent-soft); border-radius:var(--rs) var(--r) var(--r) 0;
  padding:.8rem 1rem; margin:1.4rem 0; font-size:.95rem}
.callout p{margin:0}

/* модуль */
.mod{border:1px solid var(--line); border-radius:var(--r); background:var(--card); margin:1.1rem 0 0; overflow:hidden;
  box-shadow:var(--shadow,none)}
.mod-head{display:flex; align-items:center; gap:.6rem; padding:.55rem .85rem; border-bottom:1px solid var(--line);
  background:var(--head); min-width:0}
.mod-head b{font-family:var(--mono); font-size:.72rem; font-weight:500; letter-spacing:0; color:var(--headtx); white-space:nowrap}
.mod-head .badge,.mod-head .counter{margin-left:auto; font-family:var(--mono); font-size:.7rem; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mod-body{padding:.95rem .85rem 1.05rem}
.mod-foot{border-top:1px solid var(--line); padding:.6rem .85rem; font-size:.84rem; color:var(--muted); background:var(--foot,transparent)}

/* управление */
.ctl{display:flex; gap:.45rem; align-items:center; flex-wrap:wrap; margin:.85rem 0 0}
.btn{font:inherit; font-size:.88rem; font-weight:500; border:1px solid var(--line); background:var(--card); color:var(--ink);
  border-radius:var(--rs); padding:.5rem .85rem; cursor:pointer; display:inline-flex; align-items:center; gap:.35rem}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent); border-color:transparent; color:var(--on-accent)}
.btn.primary[data-on="1"]{background:var(--ink); color:var(--paper)}
.btn.sm{font-size:.8rem; padding:.38rem .62rem}
.seg{display:inline-flex; border:1px solid var(--line); border-radius:var(--rs); overflow:hidden; max-width:100%}
.seg button{font:inherit; font-size:.8rem; border:0; background:var(--card); color:var(--muted); padding:.45rem .62rem; cursor:pointer; white-space:nowrap}
.seg button+button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--segon); color:var(--segontx); font-weight:600}
.rng{display:flex; align-items:center; gap:.5rem; flex:1 1 200px; min-width:0; font-family:var(--mono); font-size:.73rem; color:var(--muted)}
.rng input{flex:1 1 60px; min-width:0; accent-color:var(--accent)}
.rng b{color:var(--ink); font-weight:500; min-width:3.4rem; text-align:right}
.counter{font-family:var(--mono); font-size:.72rem; color:var(--muted); background:var(--sunk);
  border:1px solid var(--line); border-radius:var(--rs); padding:.22rem .5rem}
.counter b{color:var(--accent); font-weight:500}

/* бой */
.strum{display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:.3rem}
.strum button{aspect-ratio:1/1.1; min-width:0; border:1px solid var(--line); border-radius:var(--rs); background:var(--card);
  cursor:pointer; font-size:clamp(.95rem,3.6vw,1.3rem); line-height:1; color:var(--ink); display:grid; place-items:center; padding:0}
.strum button[data-v="D"]{background:var(--accent); border-color:transparent; color:var(--on-accent)}
.strum button[data-v="U"]{background:var(--accent-soft); border-color:var(--accent); color:var(--accent)}
.strum button[data-v="X"]{background:var(--ink); border-color:transparent; color:var(--paper)}
.strum button[data-now]{outline:1px solid var(--field); outline-offset:2px}
.counts{display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:.3rem; margin:.3rem 0 0;
  font-family:var(--mono); font-size:.7rem; color:var(--muted); text-align:center}
.legend{display:flex; gap:.6rem .9rem; flex-wrap:wrap; font-size:.79rem; color:var(--muted); margin:.75rem 0 0}
.legend span{display:inline-flex; align-items:center; gap:.3rem}
.legend i{width:15px; height:15px; border-radius:4px; display:inline-block; border:1px solid var(--line); flex:0 0 auto}

/* табы */
.tabscroll{overflow-x:auto; overflow-y:hidden; padding-bottom:.25rem; -webkit-overflow-scrolling:touch}
table.tab{border-collapse:collapse; font-family:var(--mono); font-size:.88rem}
table.tab th{width:1.5rem; text-align:right; padding-right:.35rem; color:var(--muted); font-weight:400; font-size:.76rem}
table.tab td{min-width:25px; height:23px; text-align:center; position:relative; color:var(--ink)}
table.tab td::before{content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--line)}
table.tab td.barline{min-width:0; width:8px}
table.tab td.barline::after{content:""; position:absolute; left:3px; top:-1px; bottom:-1px; width:1px; background:var(--muted); opacity:.45}
table.tab td span{position:relative; background:var(--card); padding:0 3px; border-radius:3px}
table.tab td[data-now] span{background:var(--accent); color:var(--on-accent)}
table.tab tr.meta td{height:15px; font-size:.66rem; color:var(--muted)}
table.tab tr.meta td::before{display:none}
table.tab tr.meta td[data-now]{color:var(--accent); font-weight:600}
table.tab tr.strokes td{height:17px; font-size:.82rem; color:var(--muted)}
table.tab tr.strokes td::before{display:none}

/* гриф */
.fret{overflow-x:auto; -webkit-overflow-scrolling:touch}
table.fb{border-collapse:collapse; margin:0 auto}
table.fb th{font-family:var(--mono); font-weight:400; font-size:.66rem; color:var(--muted); padding:0 0 .25rem}
table.fb td{padding:0}
table.fb button{width:clamp(34px,9vw,46px); height:36px; border:0; background:none; cursor:pointer; position:relative; color:var(--ink); padding:0}
table.fb button::before{content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--line); transform:translateX(-50%)}
table.fb button::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--line)}
table.fb tr.nut button::after{height:3px; background:var(--muted)}
table.fb button span{position:relative; z-index:2; display:grid; place-items:center; width:25px; height:25px; margin:0 auto;
  border-radius:50%; font-family:var(--mono); font-size:.7rem; background:transparent}
table.fb button[data-deg] span{background:var(--sunk); border:1px solid var(--line)}
table.fb button[data-deg="0"] span{background:var(--accent); color:var(--on-accent); border-color:transparent}
table.fb button[data-hit] span{outline:1px solid var(--field); outline-offset:1px}
.fb-side{font-family:var(--mono); font-size:.68rem; color:var(--muted); text-align:center; margin:.45rem 0 0}

/* квадрат */
.square{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.4rem}
.square button{font-family:var(--mono); font-size:clamp(.9rem,3.4vw,1.1rem); font-weight:500; padding:.8rem .2rem .7rem;
  cursor:pointer; border:1px solid var(--line); border-radius:var(--rs); background:var(--card); color:var(--ink);
  position:relative; min-width:0}
.square button small{position:absolute; top:3px; left:6px; font-size:.58rem; color:var(--muted)}
.square button[data-v="IV"]{background:var(--sunk)}
.square button[data-v="V"]{background:var(--accent-soft); color:var(--accent); border-color:var(--accent)}
.square button[data-now]{outline:1px solid var(--field); outline-offset:2px}
.verdict{font-size:.87rem; border:1px dashed var(--line); border-radius:var(--rs); padding:.55rem .7rem; margin:.75rem 0 0; color:var(--muted)}
.verdict[data-ok="1"]{border-color:var(--ok); color:var(--ok); border-style:solid}

/* аккорды */
.chords{display:grid; grid-template-columns:repeat(auto-fit,minmax(6.5rem,1fr)); gap:.55rem}
.chords button{border:1px solid var(--line); border-radius:var(--r); background:var(--card); cursor:pointer;
  padding:.6rem .35rem .5rem; text-align:center; min-width:0; color:var(--ink)}
.chords button:hover{border-color:var(--accent)}
.chords b{display:block; font-size:1rem; margin-bottom:.15rem}
.chords small{display:block; font-family:var(--mono); font-size:.62rem; color:var(--muted); margin-top:.25rem}
.chords svg{display:block; margin:0 auto}
svg.dg .s,svg.dg .f{stroke:var(--line); stroke-width:1.4}
svg.dg .nut{stroke:var(--ink); stroke-width:3.5}
svg.dg circle{fill:var(--accent)}
svg.dg text{fill:var(--muted); font-family:var(--mono); font-size:10px}

/* списки */
.list{margin:.8rem 0 0; padding:0; list-style:none; border-top:1px solid var(--line)}
.list li{display:grid; grid-template-columns:3.1rem minmax(0,1fr); gap:.8rem; padding:.55rem 0;
  border-bottom:1px solid var(--line); align-items:baseline}
.list .y{font-family:var(--mono); font-size:.78rem; color:var(--muted)}
.list b{font-weight:600}
.list span span{display:block; font-size:.85rem; color:var(--muted); font-weight:400}
.sys{display:grid; grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr)); gap:.55rem; margin:.8rem 0 0}
.sys div{border:1px solid var(--line); border-radius:var(--rs); padding:.6rem .75rem; background:var(--card); min-width:0}
.sys b{display:block; font-size:.92rem}
.sys span{font-size:.81rem; color:var(--muted)}

/* пульсация */
.pulse{display:grid; grid-template-columns:repeat(var(--n,12),minmax(0,1fr)); gap:.25rem}
.pulse .cell{min-width:0; aspect-ratio:1/1.25; display:grid; place-items:center; border-radius:var(--rs);
  border:1px solid var(--line); background:var(--sunk); color:var(--muted);
  font-family:var(--mono); font-size:clamp(.6rem,2.4vw,.8rem); user-select:none}
.pulse .cell[data-play]{background:var(--card); color:var(--ink)}
.pulse .cell[data-beat]{border-color:var(--accent); color:var(--accent); font-weight:600}
.pulse .cell[data-now]{background:var(--accent); border-color:transparent; color:var(--on-accent)}
.pulse .cell:not([data-play]){opacity:.45; border-style:dashed}
.zone{margin:.75rem 0 0; font-size:.86rem; color:var(--muted); border-left:3px solid var(--accent);
  padding:.35rem 0 .35rem .7rem}
.zone b{color:var(--ink); font-weight:600}
.list.tempos li{grid-template-columns:4.4rem minmax(0,1fr)}
.list.tempos .y{color:var(--accent); font-weight:500}
.list.plain{border-top:0}
.list.plain li{grid-template-columns:minmax(0,1fr); border-bottom:1px dashed var(--line)}
footer{border-top:1px solid var(--line); margin-top:2.6rem; padding:1.2rem 0 3rem; font-size:.82rem; color:var(--muted)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}
@media (max-width:560px){
  .mod-body{padding:.8rem .6rem .9rem}
  .mod-head{padding:.5rem .6rem}
  .mod-foot{padding:.55rem .6rem}
  h2{margin-top:2rem}
}

/* ===== кастомный селект ===== */
.cs{position:relative; display:inline-block; min-width:7.5rem; vertical-align:middle}
.field .cs,.filters3 .cs,.fbar .cs{display:block; width:100%}
.cs-native{position:absolute!important; opacity:0!important; pointer-events:none!important; width:1px!important; height:1px!important; overflow:hidden}
.cs-btn{font:inherit; font-size:.92rem; width:100%; text-align:left; border:1px solid var(--line); background:var(--card); color:var(--ink);
  padding:.5rem 2.1rem .5rem .65rem; cursor:pointer; position:relative; border-radius:var(--rs); line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-height:2.5rem}
.cs-btn::after{content:""; position:absolute; right:.7rem; top:50%; width:7px; height:7px; border-right:1px solid var(--field);
  border-bottom:1px solid var(--field); transform:translateY(-70%) rotate(45deg); transition:transform .12s}
.cs[data-open] .cs-btn{border-color:var(--accent)}
.cs[data-open] .cs-btn::after{transform:translateY(-25%) rotate(-135deg)}
.cs-btn .cs-ph{color:var(--muted)}
.cs-btn .cs-n{font-family:var(--mono); font-size:.7rem; background:var(--accent); color:var(--on-accent); padding:.05rem .35rem; margin-left:.35rem}
/* ---- блоки SEO-разметки ---- */

.seo-faq{max-width:48rem; margin:2.6rem auto 0; padding:0 1rem}
.seo-faq h2{font-size:1.35rem; letter-spacing:-.02em; margin:0 0 .6rem}
.seo-faq details{border-top:1px solid var(--line)} .seo-faq details:last-child{border-bottom:1px solid var(--line)}
.seo-faq summary{cursor:pointer; padding:.8rem 0; font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:1rem}
.seo-faq summary::-webkit-details-marker{display:none}
.seo-faq summary::after{content:"+"; font-family:var(--mono,monospace); color:var(--accent)} .seo-faq details[open] summary::after{content:"−"}
.seo-faq details p{margin:0 0 .9rem; color:var(--muted); max-width:62ch}
.site-foot{border-top:1px solid var(--line); margin-top:3rem; background:var(--paper); position:relative; z-index:1}
.site-foot.has-dock{padding-bottom:calc(var(--dockh, 110px) + 1rem)}
.sf-in{max-width:76rem; margin:0 auto; padding:1.6rem 1.2rem 1.4rem}
.sf-cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:1.2rem}
.sf-cols p{font-family:var(--mono,monospace); font-size:.64rem; letter-spacing:0; color:var(--muted); margin:0 0 .5rem; text-transform:none}
.sf-cols ul{list-style:none; margin:0; padding:0} .sf-cols li{margin:.25rem 0}
.sf-cols a{color:var(--ink); text-decoration:none; font-size:.9rem} .sf-cols a:hover{color:var(--accent)} .sf-cols a[aria-current]{color:var(--muted)}
.sf-note{font-size:.8rem; color:var(--muted); margin:1.2rem 0 0; border-top:1px solid var(--line); padding-top:.8rem}
.seo-ascii{max-width:76rem; margin:1rem auto 0; padding:0 1.25rem}
.seo-ascii summary{cursor:pointer; font-family:var(--mono,monospace); font-size:.74rem; letter-spacing:0; color:var(--muted)}
.seo-ascii pre{font-family:var(--mono,monospace); font-size:.74rem; overflow-x:auto; background:var(--card); border:1px solid var(--line); padding:.8rem}


/* ---- Material Symbols ---- */
.material-symbols-outlined{font-family:"Material Symbols Outlined"; font-weight:normal; font-style:normal; font-size:20px; line-height:1; letter-spacing:normal;
  text-transform:none; display:inline-block; white-space:nowrap; direction:ltr; -webkit-font-smoothing:antialiased; font-feature-settings:"liga";
  font-variation-settings:"FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20; user-select:none}
button .material-symbols-outlined, a .material-symbols-outlined, summary .material-symbols-outlined{font-size:1.2em; vertical-align:-.24em}
.ico-l{margin-right:.3em} .ico-r{margin-left:.25em} .ico-only .ico-l{margin-right:0}
[data-on="1"] .material-symbols-outlined, [aria-pressed="true"] .material-symbols-outlined{font-variation-settings:"FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20}
.crumbs .crumb-sep{font-size:1.05em; vertical-align:-.22em; color:var(--muted); margin:0 .1em}
.arrow .material-symbols-outlined{font-size:1em; vertical-align:0; font-variation-settings:"FILL" 1, "wght" 600}
.logo-mark{display:inline-block; width:.62em; height:.62em; background:var(--accent); margin-right:.4em; vertical-align:.02em}
/* ---- чекбоксы musicly ---- */
input[type="checkbox"]{-webkit-appearance:none!important; appearance:none!important; width:18px!important; height:18px!important; margin:0; flex:0 0 auto;
  border:1px solid var(--field); background:var(--card); border-radius:var(--rs); display:inline-grid; place-content:center; cursor:pointer; vertical-align:-.2em;
  transition:background .1s, border-color .1s}
input[type="checkbox"]::after{content:"check"; font-family:"Material Symbols Outlined"; font-feature-settings:"liga"; font-size:16px; line-height:1;
  font-variation-settings:"FILL" 0, "wght" 700, "GRAD" 0, "opsz" 20; color:var(--on-accent); opacity:0; transform:scale(.6); transition:opacity .1s, transform .1s}
input[type="checkbox"]:checked{background:var(--accent); border-color:var(--accent)}
input[type="checkbox"]:checked::after{opacity:1; transform:none}
input[type="checkbox"]:hover:not(:disabled){border-color:var(--accent)}
input[type="checkbox"]:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
input[type="checkbox"]:disabled{opacity:.35; cursor:default}
@media (prefers-reduced-motion:reduce){input[type="checkbox"],input[type="checkbox"]::after{transition:none}}