/* Оформление musicly. Собрано scripts/extract-prototype.php из прототипа. */

/* ===== musicly · светлая тема с синим акцентом ===== */
:root{
  --font:'Onest',system-ui,-apple-system,'Segoe UI',sans-serif; --display:'Unbounded','Onest',system-ui,sans-serif;
  --mono:'Onest',system-ui,sans-serif; --code:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --paper:#FFFFFF; --card:#FFFFFF; --sunk:#F4F6FA; --soft:#F6F7FA; --line:#E4E7EE; --rule:#C3C9D4; --field:#D5DAE3;
  --head:#FFFFFF; --headtx:#14161B; --ink:#14161B; --ink-2:#3B414D; --muted:#5A6170;
  --accent:#2F5BEA; --accent-dark:#2448C0; --accent-soft:#EEF2FE; --accent-text:#1E3FAE; --on-accent:#FFFFFF; --ok:#1F7A4D;
  --segon:#FFFFFF; --segontx:#14161B; --bar:rgba(255,255,255,.9);
  --r:16px; --rs:10px; --h1w:500; --h2w:500; --shadow:none; --lift:0 1px 2px rgba(20,22,27,.08),0 4px 16px rgba(20,22,27,.04);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0F1117; --card:#161922; --sunk:#1C202B; --soft:#1A1D27; --line:#2A2F3B; --rule:#4A5162; --field:#3A4050;
  --head:#161922; --headtx:#E8EAF0; --ink:#E8EAF0; --ink-2:#C4C9D4; --muted:#9AA1B0;
  --accent:#7C9BFF; --accent-dark:#9DB4FF; --accent-soft:#1B2445; --accent-text:#B3C4FF; --on-accent:#0B1020; --ok:#5BD69A;
  --segon:#2C3242; --segontx:#E8EAF0; --bar:rgba(15,17,23,.88); --lift:none;
}}
:root[data-theme="dark"]{
  --paper:#0F1117; --card:#161922; --sunk:#1C202B; --soft:#1A1D27; --line:#2A2F3B; --rule:#4A5162; --field:#3A4050;
  --head:#161922; --headtx:#E8EAF0; --ink:#E8EAF0; --ink-2:#C4C9D4; --muted:#9AA1B0;
  --accent:#7C9BFF; --accent-dark:#9DB4FF; --accent-soft:#1B2445; --accent-text:#B3C4FF; --on-accent:#0B1020; --ok:#5BD69A;
  --segon:#2C3242; --segontx:#E8EAF0; --bar:rgba(15,17,23,.88); --lift:none;
}
body{font-family:var(--font); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
::selection{background:var(--accent-soft); color:var(--accent-text)}
a{color:var(--accent)} a:hover{color:var(--accent-dark)}

/* заголовки */
h1{font-family:var(--display); font-weight:500; letter-spacing:-.025em; line-height:1.12}
h2{font-family:var(--display); font-weight:500; letter-spacing:-.02em}
h3{font-family:var(--font); font-weight:600; letter-spacing:-.005em}
.lede{color:var(--muted)}

/* шапка */
header.top{background:var(--bar); border-bottom:1px solid var(--line); backdrop-filter:saturate(1.4) blur(14px)}
.top-in{height:64px; gap:1rem}
.logo{display:inline-flex; align-items:center; gap:.5rem; font-family:var(--display); font-weight:600; font-size:1.12rem; letter-spacing:-.02em; color:var(--ink)}
.logo:hover{color:var(--ink); text-decoration:none}
.logo svg.mk{width:26px; height:26px; flex:0 0 auto; display:block}
.top nav{gap:.15rem}
.top nav a{color:var(--ink-2); font-weight:500; font-size:.9rem; padding:.45rem .75rem; border-radius:999px}
.top nav a:hover{background:var(--sunk); color:var(--ink); text-decoration:none}
.top nav a[aria-current="page"]{background:var(--accent-soft); color:var(--accent-text)}

/* хлебные крошки */
.crumbs{color:var(--muted)}
.crumbs a{border-bottom:0; color:var(--muted)} .crumbs a:hover{color:var(--accent)}

/* метки и подписи — без капса и трекинга */
.lbl,.mod-head b,.toc b,.sf-cols p,.cs-foot,.bar-label,.viz-head b,.sec-head b{letter-spacing:0!important; text-transform:none!important}
.lbl{font-family:var(--font); color:var(--accent); font-weight:600; font-size:.8rem}

/* чипы фактов */
.facts li{font-family:var(--font); font-size:.8rem; color:var(--ink-2); border:0; background:var(--sunk); border-radius:999px; padding:.3rem .75rem}

/* содержание, врезка */
.toc{background:var(--sunk); border:0; border-radius:var(--r); padding:1rem 1.2rem}
.toc b{font-family:var(--font); font-size:.85rem; font-weight:600; color:var(--ink)}
.toc a{border-bottom:0; color:var(--ink-2)} .toc a:hover{color:var(--accent)}
.callout{border-left:0; border-radius:var(--r); background:var(--accent-soft); color:var(--ink); padding:1rem 1.2rem}
.zone{border-left:0; background:var(--sunk); border-radius:var(--rs); padding:.6rem .85rem}

/* модуль-упражнение */
.mod{border:1px solid var(--line); border-radius:20px; background:var(--card); box-shadow:var(--lift)}
.mod-head{background:transparent; border-bottom:1px solid var(--line); padding:.85rem 1.1rem}
.mod-head b{font-family:var(--font); font-size:.95rem; font-weight:600; color:var(--ink)}
.mod-head .badge,.mod-head .counter{font-family:var(--font)}
.mod-body{padding:1.1rem 1.1rem 1.2rem}
.mod-foot{border-top:0; background:var(--sunk); padding:.75rem 1.1rem; color:var(--muted)}

/* кнопки */
.btn{border:1px solid var(--field); border-radius:var(--rs); font-weight:500; padding:.55rem .95rem; transition:border-color .12s, background .12s}
.btn:hover{border-color:var(--ink-2)}
.btn.primary{background:var(--accent); color:var(--on-accent); border-color:transparent; font-weight:600}
.btn.primary:hover{background:var(--accent-dark)}
.btn.primary[data-on="1"]{background:var(--ink); color:var(--paper)}
.seg{border:0; background:var(--sunk); border-radius:12px; padding:3px; gap:3px}
.seg button{background:transparent; border-radius:9px; color:var(--muted); font-weight:500}
.seg button+button{border-left:0}
.seg button[aria-pressed="true"]{background:var(--segon); color:var(--segontx); box-shadow:0 1px 2px rgba(20,22,27,.14); font-weight:600}
.counter{font-family:var(--font); border:0; background:var(--sunk); border-radius:999px; padding:.25rem .65rem}
.counter b{color:var(--accent)}
.rng{font-family:var(--font)}
.rng b{font-variant-numeric:tabular-nums}
input[type="range"]{accent-color:var(--accent)}

/* поля */
select,input[type="text"],input[type="search"],input[type="number"],textarea,input.q{font-family:var(--font)}
.field input,.field select,.filters3 select,.filters3 input,input.q,.hero-search input.q,.search input,.field2 input,.modal textarea{
  border:1px solid var(--field)!important; border-radius:var(--rs)!important; background:var(--card)}
input.q:focus,.search input:focus{border-color:var(--accent)!important; outline:0; box-shadow:0 0 0 3px var(--accent-soft)}
input[type="checkbox"]{border:1.5px solid var(--field)!important; border-radius:6px!important}
input[type="checkbox"]:checked{border-color:var(--accent)!important}

/* бой, сетки, пульсация */
.strum button,.square button,.pulse .cell,.beats button,.draw button,.g16 button,.diagrams button,.strs button,.chords button{border-radius:var(--rs)}
.strum button[data-v="U"]{background:var(--accent-soft); color:var(--accent-text); border-color:var(--accent)}
.strum button[data-v="X"]{background:var(--ink); color:var(--paper)}
.strum button[data-now],.square button[data-now]{outline:2px solid var(--accent); outline-offset:2px}
.counts{font-family:var(--font)}
.legend i{border-radius:5px}
.chords button{border-radius:14px}
.chords button:hover{border-color:var(--accent); box-shadow:var(--lift)}
.chords small{font-family:var(--font)}

/* табы и гриф — моноширинный только здесь */
table.tab,pre.lines,.sys .tab,.sys .fr,.sys .mnum,.seo-ascii pre,kbd,code{font-family:var(--code)}
table.tab td::before{background:var(--rule)}
table.fb button::before,table.fb button::after{background:var(--rule)}
table.fb tr.nut button::after{background:var(--ink)}
table.fb button[data-hit] span{outline-color:var(--accent)}
svg.dg .s,svg.dg .f{stroke:var(--rule)}
svg.dg text{font-family:var(--font)}

/* списки */
.list{border-top:1px solid var(--line)}
.list .y{font-family:var(--font); font-variant-numeric:tabular-nums}
.sys div{border-radius:14px}
.verdict{border-radius:var(--rs)}

/* плавающая панель темпа */
.dock{background:var(--bar)!important; backdrop-filter:saturate(1.4) blur(14px); border-top:1px solid var(--line)!important; box-shadow:0 -4px 20px rgba(20,22,27,.05)}

/* блоки инструментов и уроков */
.stage,.viz,.drawpad,.hero-search,.sec{border-radius:20px!important; overflow:hidden}
.stats,.strs,.diagrams,.lesson-nav,.tbl-wrap,.cents,canvas.strobe{border-radius:16px!important; overflow:hidden}
.meter,.progbar .tr{border-radius:999px!important; overflow:hidden}
.lesson-nav a:hover{background:var(--accent-soft)}
.pop,.modal .box,.drawer,.cs-pop{border-radius:16px!important; box-shadow:0 12px 40px rgba(20,22,27,.16)!important}
.pop .x{border-radius:10px}
.go{border-radius:14px!important}
.sq{border-radius:12px!important}
.chip{border-radius:999px!important}
.cs-btn{border-radius:var(--rs)!important}
.card,.cc,.path{border-radius:18px!important}
.tag,.badge{border-radius:6px!important; letter-spacing:0!important; font-family:var(--font)!important}

/* подвал и FAQ */
.seo-faq summary::after{color:var(--accent)}
.site-foot{border-top:1px solid var(--line); background:var(--soft)}
.sf-cols p{font-family:var(--font); font-size:.85rem; font-weight:600; color:var(--ink)}
.sf-cols a{color:var(--ink-2)} .sf-cols a:hover{color:var(--accent); text-decoration:none}
.sf-note{border-top:1px solid var(--line)}
.sf-brand{display:inline-flex; align-items:center; gap:.45rem; font-family:var(--display); font-weight:600; font-size:1rem; color:var(--ink); margin:0 0 1.2rem}
.sf-brand svg{width:22px; height:22px}

/* иконки */
.material-symbols-outlined{font-family:"Material Symbols Rounded"!important}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ---- доработки ---- */
h1{font-size:clamp(1.75rem,5vw,2.45rem)}
.hero h1{font-size:clamp(2rem,5.4vw,3rem)}
.lbl{color:var(--muted); font-weight:500}
p.lbl{color:var(--accent); font-weight:600}
.src{border:0!important; background:var(--sunk); border-radius:16px}
.sys .secbg{fill:var(--accent)}
.cards{gap:16px!important; border:0!important}
.cards .card{border:1px solid var(--line)!important}
.cards .card:hover{border-color:var(--field)!important; box-shadow:var(--lift)}
.steps{margin-bottom:1.1rem}