:root{
    --bg:#0d141c;
    --panel:#131e28;
    --panel2:#182634;
    --text:#e9f0f7;
    --muted:#9fb0bf;
    --line:#2b3b49;
    --accent:#58b7f3;
    --accent2:#95d5ff;
    --ok:#7fd3a7;
    --warn:#f5ca7b;
    --root:#ffcf6e;
    --third:#89d1ff;
    --fifth:#a8e6b2;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
    background:linear-gradient(180deg,#0c131b 0%,#0f1821 100%);
    color:var(--text);
    line-height:1.55;
  }
  a{color:var(--accent)}
  .wrap{max-width:1040px;margin:auto;padding:24px}
  header{
    padding:28px 0 18px;
    border-bottom:1px solid var(--line);
  }
  .eyebrow{
    text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;
    color:var(--accent);font-weight:700
  }
  h1{font-size:clamp(2rem,6vw,4rem);line-height:1.05;margin:.35rem 0 .75rem}
  h2{font-size:clamp(1.4rem,3vw,2rem);margin:0 0 .7rem}
  h3{font-size:1.08rem;margin:0 0 .4rem}
  p{margin:.55rem 0 1rem}
  .lead{font-size:1.08rem;color:var(--muted);max-width:820px}
  .grid{display:grid;gap:18px}
  .grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card{
    background:rgba(19,30,40,.92);
    border:1px solid var(--line);
    border-radius:16px;
    padding:20px;
  }
  .card.soft{background:rgba(24,38,52,.75)}
  .section{padding:28px 0}
  .pill{
    display:inline-flex;align-items:center;gap:.45rem;
    padding:.35rem .65rem;border-radius:999px;border:1px solid var(--line);
    color:var(--muted);font-size:.9rem;margin:.15rem .25rem .15rem 0;
  }
  .flow{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:16px
  }
  .step{
    min-height:124px;padding:14px;border-radius:14px;
    border:1px solid var(--line);background:var(--panel2)
  }
  .step b{display:block;color:var(--accent2);margin-bottom:6px}
  .formula{
    font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
    font-size:1.02rem;letter-spacing:.03em;
    padding:12px 14px;border-radius:10px;background:#0b1218;border:1px solid var(--line);
    overflow:auto;
  }
  .legend{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 2px}
  .dot{width:.72rem;height:.72rem;border-radius:50%;display:inline-block;margin-right:.35rem}
  .root{background:var(--root)}
  .third{background:var(--third)}
  .fifth{background:var(--fifth)}
  .note-row{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
  .note{
    min-width:44px;text-align:center;padding:8px 10px;border-radius:999px;
    border:1px solid var(--line);background:#0f1820;font-weight:700
  }
  .note.r{border-color:#8b7137;box-shadow:inset 0 0 0 1px #8b7137}
  .note.t{border-color:#4c88a7}
  .note.f{border-color:#5f8d6c}
  .quote{
    border-left:4px solid var(--accent);padding:8px 14px;margin:14px 0;
    background:rgba(88,183,243,.08);border-radius:0 10px 10px 0
  }
  .exercise{
    display:grid;grid-template-columns:100px 1fr;gap:14px;
    padding:14px 0;border-top:1px solid var(--line)
  }
  .exercise:first-child{border-top:none}
  .time{
    font-size:1.35rem;font-weight:800;color:var(--accent2)
  }
  .checklist label{
    display:flex;gap:.7rem;align-items:flex-start;padding:.5rem 0;cursor:pointer
  }
  .checklist input{margin-top:.28rem;transform:scale(1.15)}
  .mini{
    font-size:.92rem;color:var(--muted)
  }
  .fret{
    overflow:auto;border:1px solid var(--line);border-radius:14px;background:#0b1218
  }
  table{border-collapse:collapse;width:100%;min-width:680px}
  th,td{padding:10px 12px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center}
  th{color:var(--muted);font-weight:600;background:#101b25}
  tr:last-child td{border-bottom:none}
  td:first-child,th:first-child{text-align:left;position:sticky;left:0;background:#101b25}
  .nroot{background:rgba(255,207,110,.14)}
  .nthird{background:rgba(137,209,255,.12)}
  .nfifth{background:rgba(168,230,178,.12)}
  .buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
  button{
    appearance:none;border:1px solid #3e83aa;background:#123047;color:var(--text);
    border-radius:10px;padding:10px 14px;font:inherit;font-weight:650;cursor:pointer
  }
  button:hover{background:#173d58}
  button.secondary{background:#111b24;border-color:var(--line)}
  .timerbox{
    margin-top:16px;padding:16px;border-radius:14px;border:1px solid var(--line);background:#0b1218
  }
  .timerline{display:flex;justify-content:space-between;gap:15px;align-items:center;flex-wrap:wrap}
  #clock{font:700 2.4rem/1 ui-monospace,SFMono-Regular,Consolas,monospace}
  #phase{font-weight:700;color:var(--accent2)}
  .progress{height:8px;background:#1b2a36;border-radius:999px;overflow:hidden;margin-top:12px}
  .progress > div{height:100%;width:0;background:var(--accent)}
  .toc{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
  .toc a{text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:6px 10px;color:var(--muted)}
  footer{padding:28px 0 40px;color:var(--muted);border-top:1px solid var(--line)}
  @media(max-width:760px){
    .grid.two,.flow{grid-template-columns:1fr}
    .exercise{grid-template-columns:1fr}
    .wrap{padding:18px}
  }
  @media print{
    body{background:#fff;color:#111}
    .card,.step,.timerbox{background:#fff;color:#111;border-color:#bbb}
    .lead,.mini,.pill{color:#444}
    button,.progress{display:none}
    a{color:#111;text-decoration:none}
  }

.page-navigation { margin-bottom: 18px; }
.page-navigation a { display: inline-flex; align-items: center; min-height: 44px; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.section-spaced { margin-top: 18px; }