/* Hallmark · shape: app screen · genre: playful · theme: Hum (by request; deal seed piano-learning-app-lessons-7ac5·3640f2c4·2026-11-08·r0) · redesign: full
 * nav: kept top bar, card-stock buttons · signature: the lit keyboard dock with the target note set large in blue · states: idle, target, down, bad, auto, complete
 * axes: light/rounded-sans/chromatic-yellow · posture: full-palette · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H3 E4 S4 R4 V3 · weakest: V, Chillax has no stacked Vietnamese marks so Nunito (also rounded, single-storey a) carries every string, and torn edges and paper grain are left out of an app screen */
/* Hallmark · waive 24b · padding-bottom: var(--fallh) and the .w label offset · js/07 sizes --fallh and the keyboard sets --kbh, so those two lengths stay off the 4px scale */
@import url("./tokens.css");
@import url("./base.css");
:root {
  /* tên cũ → token Hum: JS (js/03 vẽ khuông) vẫn đọc var(--accent) = xanh dương, màu của nốt cần bấm */
  --font-display:"Nunito", ui-rounded, ui-sans-serif, sans-serif; --font-body:var(--font-display); --display-weight:700; --tracking-display:-0.01em;
  --bg:var(--color-paper); --surface:var(--color-card); --surface-2:var(--color-paper-2); --border:var(--color-rule);
  --fg:var(--color-ink); --dim:var(--color-muted); --brand:var(--color-accent); --brand-ink:var(--color-accent-ink);
  --link:var(--color-accent-2); --accent:var(--color-accent-2); --ok:var(--color-success); --bad:var(--color-error);
  --dock:var(--color-paper-3);
  --tint-ok:color-mix(in oklab, var(--color-mint) 30%, transparent); --tint-bad:color-mix(in oklab, var(--color-accent-3) 22%, transparent);
  --tint-brand:color-mix(in oklab, var(--color-accent) 40%, transparent); --edge-brand:var(--color-accent-deep);
  --scrim:color-mix(in oklab, var(--color-ink) 45%, transparent);
  --key-w1:oklch(99% 0.004 95); --key-w2:oklch(95% 0.008 95); --key-w-edge:oklch(86% 0.014 90); --key-line:oklch(55% 0.014 255); --key-label:oklch(47% 0.014 255);
  --key-b1:oklch(34% 0.014 255); --key-b2:oklch(20% 0.014 255);
  --felt:var(--color-kraft);
  --staff-next:var(--color-ink-2); --staff-done:oklch(78% 0.012 255); /* nốt sắp tới đậm, nốt đã chơi nhạt, đọc được trên cả nền sáng và tối */
  --tgt-w1:oklch(94% 0.1 96); --tgt-w2:oklch(87% 0.175 96); --tgt-w-edge:oklch(72% 0.16 92); --tgt-b1:oklch(80% 0.16 94); --tgt-b2:oklch(66% 0.15 90);
  --down-w1:oklch(93% 0.08 152); --down-w2:oklch(82% 0.15 152); --down-w-edge:oklch(68% 0.14 152); --down-b:oklch(48% 0.12 155);
  --auto-w1:oklch(95% 0.02 236); --auto-w2:oklch(86% 0.045 236); --auto-b:oklch(50% 0.17 250);
}
/* giao diện tối: giữ nguyên bảng màu Hum, chỉ đổi giấy kem thành mực xanh đen; phím đàn vẫn trắng/đen như đàn thật */
:root[data-theme="dark"] {
  color-scheme:dark;
  --color-paper:oklch(18% 0.014 255); --color-paper-2:oklch(22% 0.015 255); --color-paper-3:oklch(26% 0.016 255);
  --color-ink:oklch(94% 0.01 95); --color-ink-2:oklch(85% 0.01 95); --color-muted:oklch(72% 0.014 255); --color-rule:oklch(32% 0.016 255);
  --color-accent-2:oklch(76% 0.13 250); --color-accent-3:oklch(72% 0.17 25); --color-focus:oklch(76% 0.13 250);
  --color-mint-deep:oklch(72% 0.14 155); --color-card:oklch(24% 0.016 255); --color-edge:oklch(13% 0.014 255);
  --color-success:oklch(76% 0.14 150); --color-error:oklch(72% 0.16 27);
  --shadow-card:0 1px 2px oklch(0% 0 0 / 0.3), 0 12px 28px -14px oklch(0% 0 0 / 0.6);
  --scrim:oklch(0% 0 0 / 0.6); --dock:oklch(14% 0.014 255); --staff-done:oklch(42% 0.014 255);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme:dark;
    --color-paper:oklch(18% 0.014 255); --color-paper-2:oklch(22% 0.015 255); --color-paper-3:oklch(26% 0.016 255);
    --color-ink:oklch(94% 0.01 95); --color-ink-2:oklch(85% 0.01 95); --color-muted:oklch(72% 0.014 255); --color-rule:oklch(32% 0.016 255);
    --color-accent-2:oklch(76% 0.13 250); --color-accent-3:oklch(72% 0.17 25); --color-focus:oklch(76% 0.13 250);
    --color-mint-deep:oklch(72% 0.14 155); --color-card:oklch(24% 0.016 255); --color-edge:oklch(13% 0.014 255);
    --color-success:oklch(76% 0.14 150); --color-error:oklch(72% 0.16 27);
    --shadow-card:0 1px 2px oklch(0% 0 0 / 0.3), 0 12px 28px -14px oklch(0% 0 0 / 0.6);
    --scrim:oklch(0% 0 0 / 0.6); --dock:oklch(14% 0.014 255); --staff-done:oklch(42% 0.014 255);
  }
}

  * { box-sizing:border-box; }
  /* bố cục toàn màn hình: thanh trên + nội dung cuộn bên trong + bàn phím ghim ở đáy (không cần cuộn trang) */
  body { display:flex; flex-direction:column; height:100vh; height:100dvh; overflow:hidden; }
  .content { flex:1; min-height:0; overflow:auto; }
  body { --kbh:170px; margin:0; background:var(--bg); color:var(--fg); font:500 16px/1.5 var(--font-body); }
  button { font:inherit; }
  :focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
  kbd { font:600 12px/1 var(--font-body); background:var(--surface-2); border:1px solid var(--border); border-bottom-width:2px; border-radius:6px; padding:var(--space-2xs) var(--space-xs); color:var(--fg); }
  .ico { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

  /* thanh trên cùng */
  .topbar { position:fixed; top:0; left:0; right:0; display:flex; align-items:center; gap:var(--space-sm) var(--space-md); flex-wrap:wrap; padding:var(--space-xs) var(--space-lg); border-bottom:1px solid var(--border); background:var(--bg); z-index:40; transition:transform var(--dur-short) var(--ease-out), opacity var(--dur-short); }
  .js body.idle .topbar { transform:translateY(-100%); opacity:0; pointer-events:none; } /* chuột đứng yên: ẩn thanh, di chuột thì hiện lại */
  .content { padding-top:var(--space-xl); } /* chỗ cho thanh công cụ */
  .tools { display:flex; gap:var(--space-xs); flex-wrap:wrap; }
  .tbtn { padding:var(--space-xs) var(--space-md); background:transparent; color:var(--dim); border:1px solid var(--border); border-radius:var(--radius-stock); cursor:pointer; font-size:14px; font-weight:500; min-height:40px; background:var(--color-card); box-shadow:0 3px 0 var(--color-edge); transition:translate var(--dur-micro) var(--ease-snap), box-shadow var(--dur-micro) var(--ease-snap), background var(--dur-micro); }
  .tbtn:active { translate:0 3px; box-shadow:0 0 0 var(--color-edge); }
  .tbtn:hover { color:var(--fg); border-color:var(--dim); } .tbtn[aria-pressed=true] { color:var(--brand-ink); border-color:var(--color-accent-deep); background:var(--brand); box-shadow:0 3px 0 var(--color-accent-deep); }
  .brand { display:flex; align-items:center; gap:var(--space-sm); font:800 22px/1 var(--font-display); letter-spacing:var(--tracking-display); }
  .brand .logo { width:32px; height:32px; border-radius:var(--radius-stock); background:var(--brand); display:grid; place-items:center; color:var(--brand-ink); }
  .status { display:block; flex:0 1 auto; min-width:0; max-width:56ch; white-space:nowrap; overflow:clip; text-overflow:ellipsis; font-size:14px; color:var(--dim); background:transparent; border:1px solid var(--border); border-radius:var(--radius-pill); padding:var(--space-xs) var(--space-sm); min-height:40px; }
  .status i { display:inline-block; width:3px; height:14px; margin-right:var(--space-xs); vertical-align:-2px; border-radius:6px; background:var(--dim); } .status i.ok { background:var(--ok); }
  .status i.warn { background:var(--brand); } .status i.err { background:var(--bad); }
  .toggles { margin-left:auto; display:flex; gap:var(--space-md); flex-wrap:wrap; }
  .tgl { display:flex; align-items:center; gap:var(--space-xs); font-size:14px; color:var(--dim); cursor:pointer; user-select:none; }
  .tgl input { appearance:none; width:34px; height:20px; border-radius:var(--radius-pill); background:var(--surface-2); border:1px solid var(--border); position:relative; cursor:pointer; transition:background var(--dur-short); margin:0; }
  .tgl input::after { content:''; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:var(--radius-pill); background:var(--dim); transition:transform var(--dur-short), background var(--dur-short); }
  .tgl input:checked { background:var(--tint-brand); border-color:var(--link); } .tgl input:checked::after { transform:translateX(14px); background:var(--brand); }
  .tgl:hover { color:var(--fg); }

  /* bố cục: chỉ phần bài học ở giữa; danh sách bài, cách đặt tay và phím tắt là khung nổi bật tắt từ thanh công cụ */
  .layout { max-width:1560px; height:100%; margin:0 auto; padding:var(--space-sm) var(--space-lg) var(--space-sm); }
  #stage { height:100%; display:flex; flex-direction:column; } 
  /* hẹp: hai cột xếp chồng như cũ; rộng: trái = điều khiển bài, phải = nốt cần bấm + khuông (đỡ cao, đỡ trống hai bên) */
  .col-l, .col-r { display:contents; } #stage .col-l > *, #stage .col-r > * { flex:none; }
  @media (min-width:960px) {
    #stage { display:grid; grid-template-columns:minmax(360px, 520px) minmax(0, 1fr); gap:var(--space-lg) var(--space-xl); grid-template-rows:auto minmax(0, 1fr); }
    @media (max-height:860px) { .col-l .info, .col-l .lessoninfo .hint { max-height:3em; overflow:auto; } } /* màn thấp: hướng dẫn bài cuộn trong ô nhỏ, để khuông còn chỗ */
    #stage > #staff { grid-column:1 / -1; height:100%; min-height:110px; max-height:300px; margin-top:0; }
    .col-l, .col-r { display:flex; flex-direction:column; min-width:0; min-height:0; }
    .col-r .practice:first-child { margin-top:0; }
  }
  #lessons { position:fixed; left:12px; top:64px; bottom:12px; width:340px; max-width:calc(100% - 24px); z-index:30; transform:translateX(calc(-100% - 24px)); transition:transform var(--dur-short) var(--ease-out); }
  body.show-lessons #lessons { transform:none; }
  #guide { position:fixed; right:12px; top:64px; width:300px; z-index:25; display:none; }
  body.show-guide #guide { display:block; }
  .card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); box-shadow:var(--shadow-card); }
  /* điện thoại: thanh trên cùng gọn một hàng, vuốt ngang để thấy hết nút; logo và trạng thái chỉ còn biểu tượng */
  @media (max-width:820px) {
    .topbar { flex-wrap:nowrap; overflow-x:auto; gap:var(--space-xs); padding:var(--space-xs) var(--space-sm); scrollbar-width:none; } .topbar::-webkit-scrollbar { display:none; }
    .topbar > * { flex:none; } .brand { font-size:0; gap:0; } .status { font-size:0; gap:0; padding:var(--space-xs); } .status i { margin:0; }
    .tools { flex-wrap:nowrap; } .toggles { margin-left:0; flex-wrap:nowrap; gap:var(--space-sm); } .tgl { white-space:nowrap; font-size:13px; }
    body #lessons, body #guide, body .shortcuts { top:52px; }
    body .playbar { flex-wrap:wrap; gap:var(--space-xs); } body #pbseek { order:5; flex-basis:100%; } /* body: thắng quy tắc gốc viết phía sau */
    /* phần đầu bài gọn lại để khuông còn chỗ phía trên bàn phím */
    body #ltitle { font-size:19px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } body .songbar small { display:none; }
    body .stages { gap:var(--space-2xs); padding:var(--space-3xs); } body .stage { padding:var(--space-xs); font-size:12px; gap:var(--space-xs); min-height:36px; } body .stage small { display:none; } body .stage b { width:20px; height:20px; font-size:11px; }
  }
  @media (max-width:820px) { .layout { padding:var(--space-sm) var(--space-md) 0; } .content { padding-top:var(--space-xl); }
    .stagearea { padding-left:var(--space-md); padding-right:var(--space-md); } body { --kbh:140px; } }

  /* danh sách bài */
  #lessons { padding:var(--space-sm); overflow:auto; }
  #lessons details { border-radius:var(--radius-stock); }
  #lessons .navtabs { display:flex; gap:var(--space-2xs); padding:var(--space-3xs); margin-bottom:var(--space-xs); background:var(--surface-2); border-radius:var(--radius-stock); }
  #lessons .navtabs button.navtab { flex:1; justify-content:center; margin:0; padding:var(--space-xs) var(--space-xs); border:0; border-radius:var(--radius-stock); background:none; color:var(--dim); font-weight:600; }
  #lessons .navtabs button.navtab.on { background:var(--bg); color:var(--link); box-shadow:inset 0 -2px 0 var(--brand); }
  #lessons details + details { margin-top:var(--space-2xs); }
  #lessons summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:var(--space-xs); padding:var(--space-sm); border-radius:var(--radius-stock); font-weight:600; font-size:15px; }
  #lessons summary::-webkit-details-marker { display:none; }
  #lessons summary::before { content:''; width:7px; height:7px; border-right:2px solid var(--dim); border-bottom:2px solid var(--dim); transform:rotate(-45deg); transition:transform var(--dur-short); flex:none; }
  #lessons details[open] summary::before { transform:rotate(45deg); }
  #lessons summary span:first-of-type { flex:1; }
  #lessons summary:hover { background:var(--surface-2); }
  #lessons .cnt { font-size:12px; font-weight:500; color:var(--dim); background:var(--surface-2); border-radius:var(--radius-pill); padding:var(--space-3xs) var(--space-xs); font-variant-numeric:tabular-nums; }
  /* tiêu đề chặng: chevron | (nhãn CHẶNG n + tên chặng) / (nhãn) / (thanh tiến độ) — tên không còn bị nhãn chen hẹp */
  #lessons > details > summary { display:grid; grid-template-columns:10px minmax(0,1fr); column-gap:var(--space-sm); row-gap:var(--space-xs); align-items:start; padding:var(--space-sm); }
  #lessons > details > summary::before { grid-column:1; grid-row:1; margin-top:var(--space-xs); }
  #lessons > details > summary .ttl { grid-column:2; display:flex; flex-direction:column; min-width:0; line-height:1.3; overflow-wrap:anywhere; }
  #lessons > details > summary .ttl small { color:var(--dim); font-size:12px; font-weight:500; }
  #lessons > details > summary .lvmeta { grid-column:2; display:flex; flex-wrap:wrap; gap:var(--space-xs); }
  #lessons > details > summary .lvbar { grid-column:2; height:3px; background:var(--surface-2); border-radius:var(--radius-stock); overflow:hidden; }
  #lessons > details > summary .lvbar i { display:block; height:100%; background:var(--color-mint-deep); border-radius:var(--radius-stock); }
  #lessons .cnt { white-space:nowrap; flex:0 0 auto; }
  #lessons > details > summary .lvmeta .cnt { flex:0 0 auto; } /* không bị kéo giãn bởi quy tắc span:first-of-type */
  #lessons .phase-teach > summary, #lessons .phase-practice > summary, #lessons .phase-check > summary { justify-content:flex-start; gap:var(--space-xs); } /* chữ sát mũi tên, không căn phải */
  #lessons details.complete > summary { background:var(--tint-ok); }
  #lessons details.complete > summary .cnt { color:var(--ok); }
  #lessons .theory-review { margin-bottom:var(--space-xs); border:1px solid var(--edge-brand); border-radius:var(--radius-stock); }
  #lessons .theory-review > summary { color:var(--link); }
  #lessons .theory-review-card { margin:0 var(--space-sm) var(--space-sm) var(--space-lg); padding:var(--space-sm); background:var(--surface-2); border-radius:var(--radius-stock); }
  #lessons .theory-review-card p { margin:var(--space-2xs) 0 var(--space-xs); }
  #lessons .theory-review-card select { width:100%; padding:var(--space-xs); border:1px solid var(--border); border-radius:var(--radius-stock); background:var(--bg); color:var(--fg); font:inherit; }
  #lessons .theory-review-card button { width:auto; min-height:32px; margin:var(--space-xs) 0 0; padding:var(--space-2xs) var(--space-sm); background:var(--brand); color:var(--brand-ink); border:0; border-radius:var(--radius-stock); font-size:12px; font-weight:600; }
  #lessons .theory-review-card .quiz-feedback.ok { color:var(--ok); }
  #lessons .theory-review-card .quiz-feedback.retry { color:var(--link); }
  #lessons .phase-goal { margin:0 var(--space-sm) var(--space-xs) var(--space-lg); padding:var(--space-xs) var(--space-sm); border-left:2px solid var(--brand); color:var(--dim); font-size:12px; line-height:1.5; }
  #lessons .phase-goal b { color:var(--fg); font-weight:600; }
  #lessons .phase-teach { margin:0 var(--space-sm) var(--space-xs) var(--space-lg); color:var(--dim); font-size:12px; }
  #lessons .phase-teach summary { padding:var(--space-2xs) 0; font-weight:600; color:var(--fg); }
  #lessons .phase-teach p { margin:var(--space-2xs) 0 var(--space-xs); line-height:1.55; }
  #lessons .phase-practice { margin:0 var(--space-sm) var(--space-xs) var(--space-lg); color:var(--dim); font-size:12px; }
  #lessons .phase-practice summary { padding:var(--space-2xs) 0; font-weight:600; color:var(--fg); }
  #lessons .phase-practice ol { margin:var(--space-2xs) 0 var(--space-xs); padding-left:var(--space-lg); line-height:1.55; }
  #lessons .phase-practice li { padding:1px 0; }
  #lessons .phase-check { margin:0 var(--space-sm) var(--space-xs) var(--space-lg); color:var(--dim); font-size:12px; }
  #lessons .phase-check summary { padding:var(--space-2xs) 0; font-weight:600; color:var(--link); }
  #lessons .phase-check p { margin:var(--space-2xs) 0; padding-left:var(--space-sm); }
  #lessons .phase-check .quiz-progress { display:block; margin:var(--space-3xs) 0; color:var(--dim); }
  #lessons .phase-check select { width:100%; margin:var(--space-2xs) 0; padding:var(--space-xs); border:1px solid var(--border); border-radius:var(--radius-stock); background:var(--surface-2); color:var(--fg); font:inherit; }
  #lessons .phase-check .ear-prompts { display:flex; gap:var(--space-xs); margin:var(--space-2xs) 0; }
  #lessons .phase-check button.ear-play { width:auto; min-height:32px; margin:0; padding:var(--space-2xs) var(--space-sm); background:var(--surface-2); color:var(--fg); border:1px solid var(--border); border-radius:var(--radius-stock); font-size:12px; }
  #lessons .phase-check button.quiz-check { width:auto; min-height:32px; margin:var(--space-2xs) 0; padding:var(--space-2xs) var(--space-sm); background:var(--brand); color:var(--brand-ink); border:0; border-radius:var(--radius-stock); font-size:12px; font-weight:600; }
  #lessons .phase-check .quiz-feedback { padding:0; }
  #lessons .phase-check .quiz-feedback.ok { color:var(--ok); }
  #lessons .phase-check .quiz-feedback.retry { color:var(--link); }
  #lessons button { display:flex; justify-content:space-between; align-items:center; gap:var(--space-xs); width:100%; margin:var(--space-3xs) 0; padding:var(--space-xs) var(--space-sm) var(--space-xs) var(--space-lg); background:transparent; color:var(--fg); border:1px solid transparent; border-radius:var(--radius-stock); cursor:pointer; font-size:15px; text-align:left; transition:background var(--dur-micro), border-color var(--dur-micro); }
  #lessons button:hover { background:var(--surface-2); }
  #lessons button.cpbtn { margin-top:var(--space-xs); border:1px dashed var(--edge-brand); color:var(--link); }
  .opt { font-style:normal; font-size:12px; color:var(--dim); border:1px solid var(--border); border-radius:6px; padding:0 var(--space-xs); margin-left:var(--space-2xs); }
  #lessons button.active { background:var(--tint-brand); border-color:var(--edge-brand); box-shadow:inset 3px 0 0 var(--brand); }
  .dots { white-space:nowrap; } .dots i { display:inline-block; width:8px; height:8px; border-radius:6px; background:var(--color-rule); margin-left:var(--space-2xs); }
  .dots i.ok { background:var(--ok); } .dots i.try { background:var(--brand); }

  /* thẻ bài học */
  #stage { padding:var(--space-md) var(--space-lg); min-width:0; }
  .crumb { color:var(--dim); font-size:14px; font-weight:500; min-height:20px; }
  #ltitle { margin:var(--space-3xs) 0 var(--space-xs); font:700 24px/1.2 var(--font-body); letter-spacing:0; max-width:none; }
  .info { margin:0 0 var(--space-sm); color:var(--fg); }
  .lessoninfo { margin-top:var(--space-sm); } .lessoninfo summary { cursor:pointer; color:var(--dim); font-size:13px; width:max-content; } .lessoninfo .info { margin:var(--space-xs) 0 0; font-size:14px; }
  #target .where { display:block; font-size:14px; font-weight:500; color:var(--dim); margin-top:var(--space-3xs); }
  .hint { color:var(--dim); font-size:14px; margin:var(--space-xs) 0 0; }
  .clamp { position:relative; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .clamp.more { cursor:pointer; }
  .clamp.more:not(.open)::after { content:'Xem thêm ▾'; position:absolute; right:0; bottom:0; padding-left:var(--space-xl); font-size:12px; font-weight:600; color:var(--link); background:var(--surface); }
  .clamp.open { display:block; -webkit-line-clamp:unset; overflow:visible; }
  .clamp.more.open::after { content:' Thu gọn ▴'; font-size:12px; font-weight:600; color:var(--link); }
  .meter-warning { color:var(--link); font-size:13px; margin:var(--space-xs) 0 0; }
  .keyhint { color:var(--dim); font-size:13px; display:flex; align-items:center; gap:var(--space-xs); flex-wrap:wrap; }
  .stages { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-xs); background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-stock); padding:var(--space-2xs); }
  .stage { display:flex; align-items:center; gap:var(--space-sm); text-align:left; background:transparent; color:var(--dim); border:0; border-radius:var(--radius-stock); padding:var(--space-xs) var(--space-sm); cursor:pointer; transition:background var(--dur-micro), color var(--dur-micro); min-height:44px; }
  .stage:hover { background:var(--surface-2); color:var(--fg); }
  .stage b { width:28px; height:28px; border-radius:var(--radius-stock); display:grid; place-items:center; font:800 15px/1 var(--font-display); background:var(--surface-2); border:1px solid var(--border); flex:none; font-variant-numeric:tabular-nums; }
  .stage b .ico { width:14px; height:14px; }
  .stage span { display:flex; flex-direction:column; font-weight:600; font-size:14px; line-height:1.25; }
  .stage small { font-weight:400; font-size:12px; color:var(--dim); }
  .stage.done b { background:var(--tint-ok); border-color:var(--ok); color:var(--ok); }
  .stage.on { background:var(--surface-2); color:var(--fg); box-shadow:inset 0 0 0 1px var(--brand); }
  .stage.on b { background:var(--brand); border-color:var(--link); color:var(--brand-ink); }
  .actions { display:flex; align-items:center; gap:var(--space-sm); flex-wrap:wrap; margin-top:var(--space-sm); }
  .btn { display:inline-flex; align-items:center; gap:var(--space-xs); background:var(--brand); color:var(--brand-ink); border:1px solid var(--brand); border-radius:var(--radius-stock); padding:var(--space-sm) var(--space-lg); font-weight:600; cursor:pointer; min-height:44px; box-shadow:0 5px 0 var(--color-accent-deep); transition:translate var(--dur-micro) var(--ease-snap), box-shadow var(--dur-micro) var(--ease-snap); }
  .btn:hover { translate:0 -2px; box-shadow:0 7px 0 var(--color-accent-deep); } .btn:active { translate:0 4px; box-shadow:0 1px 0 var(--color-accent-deep); }
  .btn.ghost { background:var(--color-card); color:var(--fg); border-color:var(--border); box-shadow:0 5px 0 var(--color-edge); } .btn.ghost:hover { border-color:var(--link); color:var(--link); background:transparent; }
  .result { display:flex; align-items:center; gap:var(--space-sm); font-size:18px; font-weight:600; padding:var(--space-sm) var(--space-md); border-radius:var(--radius-stock); }
  .result .ico { width:24px; height:24px; }
  .result.pass { background:var(--tint-ok); color:var(--ok); } .result.fail { background:var(--tint-bad); color:var(--bad); }

  /* vùng luyện tập */
  .practice { display:flex; align-items:center; gap:var(--space-lg); margin-top:var(--space-sm); padding:var(--space-sm) var(--space-md); background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-stock); flex-wrap:wrap; }
  .practice { height:118px; overflow:hidden; box-sizing:border-box; flex-wrap:nowrap; }
  .practice[hidden] { display:none; }
  .nowbox { min-width:110px; max-width:58%; overflow:hidden; white-space:nowrap; }
  .nowbox.long #target { font-size:36px; }
  .nowbox.prompt { max-width:none; flex:1; white-space:normal; } .nowbox.prompt #target { font:700 28px/1.15 var(--font-body); }
  .practice.slim { height:64px; }
  #target .where { overflow:hidden; text-overflow:ellipsis; }
  .lbl { color:var(--dim); font-size:14px; font-weight:500; }
  #target { font:800 48px/1 var(--font-display); letter-spacing:var(--tracking-display); color:var(--accent); min-height:48px; }
  #upnext { display:flex; gap:var(--space-xs); flex-wrap:nowrap; overflow:hidden; align-items:center; flex:1; min-width:0; }
  #upnext .lbl { margin-right:var(--space-2xs); }
  .chip { white-space:nowrap; flex:none; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-stock); padding:var(--space-2xs) var(--space-xs); font-size:16px; font-weight:500; }
  .chip.now { background:var(--brand); border-color:var(--color-accent-deep); color:var(--brand-ink); font-weight:700; }
  .chip sub { font-size:12px; margin-left:1px; }
  .bar { height:4px; background:var(--surface-2); border-radius:var(--radius-stock); overflow:hidden; margin-top:var(--space-sm); }
  .bar i { display:block; height:100%; width:0; background:var(--color-mint-deep); border-radius:var(--radius-stock); }
  .meta { display:flex; justify-content:space-between; gap:var(--space-sm); flex-wrap:wrap; margin-top:var(--space-xs); font-size:14px; }
  #progress { color:var(--dim); } #fb { color:var(--fg); font-weight:600; min-height:22px; }
  #staff { width:100%; flex:1 1 0; min-height:110px; max-height:300px; color:var(--fg); display:block; margin-top:var(--space-xs); } /* khuông lấp phần còn trống của khung bài: cả bài và bàn phím vừa một màn, không cuộn */
  #played { color:var(--dim); font-size:13px; }

  /* hướng dẫn đặt tay */
  #guide { padding:var(--space-md) var(--space-md) var(--space-md); }
  #guide h3 { display:flex; align-items:center; gap:var(--space-xs); margin:0; font:700 18px/1.2 var(--font-body); }
  #guide .sub { color:var(--dim); font-size:13px; margin:var(--space-3xs) 0 var(--space-xs); }
  #guide svg#handsvg { width:100%; max-height:230px; display:block; }
  #guide details.tips summary { cursor:pointer; color:var(--link); font-size:13px; font-weight:600; padding:var(--space-2xs) 0; }
  #guide ul { font-size:13px; margin:var(--space-xs) 0 0; padding-left:var(--space-md); color:var(--dim); } #guide li b { color:var(--fg); font-weight:600; }

  /* bàn phím */
  .stagearea { flex:none; position:relative; z-index:3; clip-path:inset(-340px 0 0 0); padding:var(--space-sm) var(--space-lg) 0; background:var(--dock); border-top:1px solid var(--border); }
  .stagearea::after { content:''; position:absolute; left:0; right:0; bottom:0; height:48px; background:linear-gradient(transparent, var(--dock)); pointer-events:none; z-index:6; } /* cổ tay mờ dần ở mép màn hình */
  .dockin { position:relative; max-width:1560px; margin:0 auto; }
  /* thanh sáng mọc lên khi bấm phím; nhả phím thì bay lên và mờ dần */
  #kb .rise { position:absolute; bottom:100%; margin-bottom:var(--space-2xs); border-radius:var(--radius-stock); pointer-events:none; z-index:4;
    background:var(--color-accent-3); opacity:.9; height:160px; clip-path:inset(100% 0 0 0); animation:riseGrow 3s linear forwards; }
  #kb .rise.blk { background:var(--color-accent-2); }
  .js #kb .rise.fly { animation:none; transform:translateY(-200px); opacity:0; transition:transform 1.5s var(--ease-out), opacity 1.5s var(--ease-in); }
  @keyframes riseGrow { to { clip-path:inset(0); } } /* thấp hơn ô "Nốt cần bấm" để không che bài */
  @media (prefers-reduced-motion: reduce) { #kb .rise { display:none; } }
  .audiohint { position:fixed; top:64px; left:50%; transform:translateX(-50%); z-index:45; max-width:calc(100vw - 24px); padding:var(--space-sm) var(--space-md); border:0; border-radius:var(--radius-stock); background:var(--brand); color:var(--brand-ink); font-weight:600; font-size:14px; cursor:pointer; }
  .audiohint[hidden] { display:none; }
  /* luyện nhạc: chọn tay; phím máy tự đánh (tay còn lại) màu xanh dương */
  .songbar { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-xs) var(--space-xs); margin:var(--space-xs) 0 var(--space-xs); }
  .songbar small { color:var(--dim); font-size:12px; margin-left:var(--space-2xs); }
  .w.auto { background:linear-gradient(var(--auto-w1), var(--auto-w2)); } .b.auto { background:var(--auto-b); }
  .importrow { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-xs) var(--space-sm); margin:0 0 var(--space-sm); } .importrow small { color:var(--dim); font-size:12px; flex:1 1 180px; }
  /* tiền tố #lessons: thắng quy tắc "#lessons button { width:100% }", nếu không nút ✕ giãn hết hàng và ép tên bài còn một cột hẹp */
  #lessons .userrow { display:flex; gap:var(--space-2xs); align-items:stretch; } #lessons .userrow > button:first-child { flex:1 1 auto; width:auto; min-width:0; text-align:left; }
  #lessons .udel { flex:none; width:44px; padding:0; justify-content:center; background:none; border:1px solid var(--border); border-radius:var(--radius-stock); color:var(--dim); cursor:pointer; } #lessons .udel:hover { color:var(--bad); border-color:var(--bad); }
  .playbar { display:flex; align-items:center; gap:var(--space-sm); margin:0 0 var(--space-xs); padding:var(--space-xs) var(--space-sm); background:var(--surface-2); border-radius:var(--radius-stock); }
  .pbplay { flex:none; width:44px; height:44px; display:grid; place-items:center; border:none; border-radius:var(--radius-stock); background:var(--brand); color:var(--brand-ink); cursor:pointer; }
  .pbplay .ico { width:16px; height:16px; fill:currentColor; stroke:none; }
  .pbtime { flex:none; font-variant-numeric:tabular-nums; font-size:13px; color:var(--dim); min-width:84px; }
  #pbseek { flex:1; min-width:60px; accent-color:var(--link); }
  .playbar select { flex:none; padding:var(--space-2xs) var(--space-xs); background:var(--bg); color:var(--fg); border:1px solid var(--border); border-radius:var(--radius-stock); font:inherit; font-size:13px; }
  /* luyện đọc sheet: bảng số liệu và tùy chọn */
  #sheetbar { margin:var(--space-xs) 0 var(--space-sm); }
  .sheetstats { display:flex; flex-wrap:wrap; gap:var(--space-xs); }
  .sheetstats span { display:flex; flex-direction:column; padding:var(--space-xs) var(--space-sm); background:var(--surface-2); border-radius:var(--radius-stock); min-width:64px; }
  .sheetstats small { color:var(--dim); font-size:12px; } .sheetstats b { font-size:18px; }
  .sheetstats .weak b { font-size:14px; color:var(--bad); line-height:1.7; }
  .sheetopts summary { cursor:pointer; color:var(--link); font-size:13px; font-weight:600; padding:var(--space-xs) 0 var(--space-2xs); }
  .sheetopts .opts { display:flex; flex-wrap:wrap; gap:var(--space-xs) var(--space-md); font-size:13px; align-items:center; }
  .sheetopts select { margin-left:var(--space-xs); padding:var(--space-2xs) var(--space-xs); background:var(--bg); color:var(--fg); border:1px solid var(--border); border-radius:var(--radius-stock); font:inherit; }
  body.falling .content { padding-bottom:var(--fallh, 150px); } /* = FALL_H (js/07): khung nốt rơi nổi lên che phần dưới nội dung, nên khuông co lại phía trên */
  /* đang phát/chơi: ẩn phần ít dùng và rút tiêu đề còn một dòng để khuông đủ chỗ trên màn thấp */
  body.falling #msg .stages, body.falling #msg .lessoninfo, body.falling #msg .info, body.falling .songbar { display:none; }
  body.f-demo #msg .actions, body.f-run #playbar { display:none; } /* nghe mẫu: dừng bằng thanh phát; tự chơi: dừng bằng nút Dừng */
  body.falling #ltitle { white-space:nowrap; overflow:clip; text-overflow:ellipsis; font-size:22px; }
  /* màn thấp (laptop 1366x768 chỉ còn ~650px cho trang): bàn phím thấp hơn, bớt chỗ chừa cho bàn tay, khuông mới có chỗ */
  @media (max-height:760px) { body { --kbh:120px; } #kb { margin-bottom:var(--space-xl); } #stage { padding-top:var(--space-sm); padding-bottom:var(--space-sm); } #ltitle { font-size:20px; }
    body.falling #nowrow { display:none; } } /* ô "nốt cần bấm" trùng với khung nốt rơi */
  #fall { position:absolute; left:0; right:0; bottom:100%; border-radius:var(--radius-stock); border:1px solid var(--border); border-bottom:0; } /* nổi lên trên nội dung bài khi đang chơi, không chiếm chỗ lúc nghỉ */
  #kb { position:relative; height:var(--kbh); margin-bottom:var(--space-xl); user-select:none; border-top:4px solid var(--felt); border-radius:var(--radius-stock); } /* viền nỉ đỏ như đàn thật; chừa chỗ cho bàn tay phía dưới */
  .w { position:absolute; top:0; height:100%; background:linear-gradient(var(--key-w1), var(--key-w2)); border:1px solid var(--key-line); border-top:0; border-radius:var(--radius-stock) 0 6px 6px@@; color:var(--key-label); font-size:10px; text-align:center; padding-top:calc(var(--kbh) - 46px); cursor:pointer; box-shadow:inset 0 -6px 0 var(--key-w-edge); }
  .b { position:absolute; top:0; height:62%; background:linear-gradient(var(--key-b1), var(--key-b2)); border-radius:var(--radius-stock) 0 6px 6px@@; z-index:2; cursor:pointer; box-shadow:inset 0 -5px 0 var(--key-b2); }
  #kb.nolabel .w { color:transparent; }
  .w.target { background:linear-gradient(var(--tgt-w1), var(--tgt-w2)); box-shadow:inset 0 -6px 0 var(--tgt-w-edge); } .b.target { background:linear-gradient(var(--tgt-b1), var(--tgt-b2)); }
  .w.target::after, .b.target::after { content:attr(data-f); position:absolute; top:8px; left:0; right:0; color:var(--key-b2); font-weight:700; font-size:15px; }
  .b.target::after { color:var(--key-b2); top:auto; bottom:8px; }
  .w.down { background:linear-gradient(var(--down-w1), var(--down-w2)); box-shadow:inset 0 -2px 0 var(--down-w-edge); } .b.down { background:var(--down-b); }
  .w.bad, .b.bad { background:var(--bad) !important; }
  /* trợ lý hướng dẫn */
  #coach { position:fixed; left:50%; transform:translateX(-50%); width:min(640px, 92vw); z-index:50; background:var(--surface); border:1px solid var(--color-accent-deep); border-top-width:6px; border-radius:var(--radius-card); padding:var(--space-md) var(--space-md); }
  #coach[hidden] { display:none; } #coach.top { top:72px; } #coach .who { font-size:14px; font-weight:600; color:var(--link); }
  #coach p { margin:var(--space-xs) 0 var(--space-sm); font-size:16px; line-height:1.5; } #coach .actions { margin-top:0; }
  #kb .coachhl { z-index:6; outline:3px solid var(--color-accent-2); outline-offset:-3px; animation:cpulse 1s ease-in-out infinite; }
  #kb .w.coachhl::after, #kb .b.coachhl::after { content:attr(data-c); position:absolute; left:-4px; right:-4px; top:auto; bottom:6px; color:var(--key-b2); font-weight:700; font-size:13px; }
  #kb .b.coachhl::after { color:var(--key-w1); }
  @keyframes cpulse { 50% { outline-color:var(--color-accent-3); } }
  .w.ctl, #kb.nolabel .w.ctl { color:var(--color-accent-deep); font-size:16px; font-weight:700; background:linear-gradient(var(--tgt-w1), var(--tgt-w2)); } /* phím điều khiển A0 B0 C1 */
  .w.next { background:var(--tgt-w1); outline:2px dashed var(--accent); outline-offset:-4px; } .b.next { background:var(--tgt-b2); outline:2px dashed var(--accent); outline-offset:-3px; } /* phím của nốt kế tiếp */

  /* chân trang: phím tắt */
  .shortcuts { display:none; position:fixed; top:64px; left:50%; transform:translateX(-50%); z-index:25; width:max-content; max-width:900px; padding:var(--space-md) var(--space-lg); gap:var(--space-sm) var(--space-lg); flex-wrap:wrap; color:var(--dim); font-size:14px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-stock); }
  body.show-keys .shortcuts { display:flex; }
  .shortcuts span { display:flex; align-items:center; gap:var(--space-xs); }

  
  /* màn hình thấp (laptop): gọn lại để vùng bài học + bàn phím vừa một màn */
  @media (max-height:860px) {
    body { --kbh:140px; } #kb { margin-bottom:var(--space-xl); }
    .layout { padding-top:var(--space-sm); } #stage { padding:var(--space-md) var(--space-lg); } #ltitle { font-size:22px; } .info { margin-bottom:var(--space-sm); }
    .hint { font-size:13px; margin-top:var(--space-xs); } .actions { margin-top:var(--space-sm); } .btn { min-height:40px; padding:var(--space-xs) var(--space-md); }
    .practice { margin-top:var(--space-sm); padding:var(--space-sm) var(--space-md); height:104px; } .practice.slim { height:60px; } #target { font-size:36px; min-height:40px; } .stage { min-height:42px; padding:var(--space-xs) var(--space-sm); }
  }

/* ---- cài đặt dạng menu thả xuống ---- */
body #settings { display:none; position:fixed; right:12px; top:60px; z-index:40; flex-direction:column; align-items:flex-start; gap:var(--space-sm); margin:0; padding:var(--space-md) var(--space-md); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); }
body #settings.open { display:flex; }
body #settings .tbtn { align-self:stretch; }
@media (max-width:820px) { body #settings { top:52px; } }
.status { cursor:pointer; }
/* ---- làm quen lần đầu ---- */
.onboard { position:fixed; inset:0; z-index:100; background:var(--scrim); display:flex; align-items:center; justify-content:center; padding:var(--space-md); overflow:auto; }
.onboard[hidden] { display:none; }
.obbox { width:min(560px,100%); background:var(--surface); border:1px solid var(--border); border-top:6px solid var(--brand); border-radius:var(--radius-card); padding:var(--space-lg) var(--space-lg); max-height:calc(100% - 32px); overflow:auto; }
.obbox h2 { margin:var(--space-xs) 0 var(--space-sm); font:700 24px/1.2 var(--font-body); max-width:none; } .obbody { font-size:15px; line-height:1.55; } .obbody p, .obbody ul, .obbody ol { margin:0 0 var(--space-sm); } .obbody li { margin:var(--space-2xs) 0; }
.obdots { display:flex; gap:var(--space-xs); } .obdots i { width:22px; height:4px; border-radius:var(--radius-stock); background:var(--border); } .obdots i.on { background:var(--brand); }
.obdev { display:grid; gap:var(--space-sm); margin-top:var(--space-xs); }
.obcard { text-align:left; display:flex; flex-direction:column; gap:var(--space-3xs); padding:var(--space-sm) var(--space-md); background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-stock); color:var(--fg); font:inherit; cursor:pointer; min-height:44px; }
.obcard span { color:var(--dim); font-size:13px; } .obcard:hover { border-color:var(--link); } .obcard.on { border-color:var(--link); background:var(--tint-brand); }
.obstat { font-size:14px; padding:var(--space-xs) var(--space-sm); border-radius:var(--radius-stock); background:var(--surface-2); color:var(--dim); } .obtest { margin:var(--space-sm) 0 0; padding:var(--space-sm) var(--space-sm); border:1px dashed var(--border); border-radius:var(--radius-stock); color:var(--dim); } .obtest.ok { color:var(--ok); border-color:var(--ok); font-weight:600; }
.onboard .actions { margin-top:var(--space-md); } .btn:disabled { opacity:.45; cursor:not-allowed; }

.accbox { display:flex; flex-direction:column; gap:var(--space-xs); width:100%; padding-bottom:var(--space-sm); border-bottom:1px solid var(--border); font-size:13px; color:var(--dim); }
.accin { padding:var(--space-xs) var(--space-sm); background:var(--bg); color:var(--fg); border:1px solid var(--border); border-radius:var(--radius-stock); font:inherit; } .accmsg { min-height:1em; }

/* ---- màn hình nhỏ: điện thoại và máy tính bảng dọc ----
   thứ tự trên điện thoại: tiêu đề, điều khiển bài, ô "nốt cần bấm", khuông, rồi thanh phát; cột trái/phải đã là display:contents nên order xếp lại được */
@media (max-width:820px) {
  body { --kbh:100px; }
  .layout { height:auto; min-height:100%; padding:var(--space-sm) var(--space-sm) var(--space-md); }
  #stage { height:auto; min-height:100%; padding:var(--space-md); gap:0; }
  .crumb { order:1; } #ltitle { order:2; font-size:20px; } #sheetbar { order:3; } #songbar { order:3; } #msg { order:4; }
  #nowrow { order:5; } .bar { order:6; } .meta { order:7; } #staff { order:8; flex:none; height:150px; max-height:none; min-height:0; } #playbar { order:9; }
  .col-l .info, .col-l .lessoninfo .hint { max-height:4.5em; overflow:auto; }
  .practice { height:84px; padding:var(--space-xs) var(--space-md); gap:var(--space-md); } #target { font-size:36px; min-height:40px; } .nowbox { min-width:0; }
  .btn { min-height:44px; padding:var(--space-xs) var(--space-md); } .actions { gap:var(--space-xs); }
  .stagearea { padding:var(--space-xs) var(--space-sm) 0; } #kb { margin-bottom:var(--space-xl); }
  #kb .w { font-size:0; } /* 88 phím trên bề ngang điện thoại: nhãn chữ không đọc được, phím sáng mới là thông tin */
  .playbar { padding:var(--space-xs); } .pbtime { min-width:0; }
  .onboard { padding:var(--space-sm); } .obbox { padding:var(--space-md); }
  #coach { width:calc(100% - 24px); } #coach.top { top:56px; } #coach p { font-size:15px; }
}
@media (max-width:480px) {
  .tbtn { padding:var(--space-xs) var(--space-sm); font-size:13px; }
  #stage { padding:var(--space-sm); border-radius:var(--radius-stock); }
  .stage span { font-size:13px; } body .stage b { width:24px; height:24px; }
  #target { font-size:32px; } .chip { font-size:14px; padding:var(--space-2xs) var(--space-xs); }
  #staff { height:130px; } .col-l .info, .col-l .lessoninfo .hint { max-height:3em; } body .stage { min-height:40px; }
}
/* điện thoại nằm ngang: thấp, ưu tiên khuông và phím */
@media (max-height:520px) and (orientation:landscape) {
  body { --kbh:64px; } #kb { margin-bottom:0; } #handlay { display:none; } .stagearea::after { display:none; }
  .layout { padding:var(--space-xs) var(--space-sm); } #stage { padding:var(--space-sm); } .content { padding-top:52px; }
  .col-l .info, .col-l .lessoninfo .hint { max-height:3em; }
  .topbar { padding:var(--space-2xs) var(--space-sm); } .tbtn, .status { min-height:36px; }
}
@media (max-height:520px) and (min-width:600px) {
  /* ngang: trái = điều khiển bài; phải = ô nốt cần bấm trên, khuông dưới */
  #stage { display:grid; grid-template-columns:minmax(220px, 1fr) minmax(0, 1.7fr); grid-template-rows:auto minmax(0, 1fr); gap:var(--space-xs) var(--space-md); min-height:0; height:100%; }
  .col-l, .col-r { display:flex; flex-direction:column; min-width:0; }
  .col-l { grid-column:1; grid-row:1 / span 2; overflow:auto; } .col-r { grid-column:2; grid-row:1; }
  #stage > #staff { grid-column:2; grid-row:2; height:100%; min-height:90px; max-height:none; }
  .layout { height:100%; } .practice { height:64px; margin-top:0; } #target { font-size:28px; min-height:32px; } .col-l .info, .col-l .lessoninfo { display:none; }
  #ltitle { font-size:16px; } .crumb { display:none; } .btn { min-height:40px; } body .stages { margin-top:var(--space-xs); }
}

/* đếm ngược sang bước kế: số lớn + thanh cạn dần, để mắt người chơi biết sắp chuyển */
.countdown { position:relative; display:flex; align-items:center; gap:var(--space-md); margin-top:var(--space-sm); padding:var(--space-sm) var(--space-md); overflow:hidden; background:var(--tint-brand); border:1px solid var(--edge-brand); border-radius:var(--radius-stock); }
.countdown b { flex:none; display:grid; place-items:center; width:56px; height:56px; border-radius:var(--radius-pill); background:var(--brand); color:var(--brand-ink); font:800 32px/1 var(--font-display); font-variant-numeric:tabular-nums; }
.countdown span { font-weight:700; font-size:18px; }
.countdown .cdbar { position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--color-accent-deep); transform-origin:left; animation:cdshrink 5s linear forwards; }
@keyframes cdshrink { to { transform:scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .countdown .cdbar { animation:none; } }

/* gói miễn phí / trả phí */
a.tbtn { display:inline-flex; align-items:center; text-decoration:none; } a.tbtn[hidden] { display:none; }
.tbtn.primary { background:var(--brand); color:var(--brand-ink); border-color:var(--color-accent-deep); box-shadow:0 3px 0 var(--color-accent-deep); font-weight:700; }
.tbtn.primary:hover { color:var(--brand-ink); border-color:var(--color-accent-deep); }
#lessons .cnt.tier { font-weight:700; } #lessons .cnt.tier.free { background:var(--tint-ok); color:var(--ok); } #lessons .cnt.tier.pro { background:var(--brand); color:var(--brand-ink); }
#lessons details.locked > summary { opacity:.75; }
#lessons .paywall { margin:0 var(--space-sm) var(--space-sm) 26px; padding:var(--space-sm); border:1px dashed var(--edge-brand); border-radius:var(--radius-stock); font-size:14px; }
#lessons .paywall a { color:var(--link); font-weight:700; }
#lessons button:disabled { opacity:.6; cursor:not-allowed; }