/* Shared book-style presentation. SVG geometry, input hit areas and result colours remain owned by each exercise. */
:root {
  color-scheme: light !important;
  --bg: #fbfbfa !important; --paper: #fbfbfa; --fg: #10151c !important; --ink: #10151c;
  --muted: #626b75 !important; --card: #fff !important; --white: #fff;
  --border: #d9dfe4 !important; --line: #d9dfe4; --line-strong: #c7cfd6;
  --blue: #017efe; --teal: #40a4ae; --purple: #8f52df; --orange: #fd8a10;
  --activefg: #fff !important; --soft: #f3f7fc !important;
  --tip-bg: #fff7df !important; --tip-border: #e1cfb2 !important;
  --right: #1f7a3d !important; --wrong: #c62828 !important;
}
.book-theory { --accent: var(--blue); --accent-dark: #0066cc; --accent-wash: #eef5ff; --accent-line: #bdcfe8; --active: #0066cc; --strip: linear-gradient(90deg,#cfe3ff,#d4ecef 58%,#ffe0bf); }
.book-ear { --accent: var(--purple); --accent-dark: #7540b7; --accent-wash: #f6f0fc; --accent-line: #d4c0e5; --active: #8f52df; --strip: linear-gradient(90deg,#ddd2fb,#efd5ee 54%,#ffd7c5); }
.book-build { --action-bg: var(--orange); --action-fg: #281706; }
html { background: #fbfbfa; }
.book-exercise { margin:0; background:var(--paper); color:var(--ink); font:16px/1.48 "Avenir Next","Futura","Century Gothic",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.book-strip { height:12px; background:var(--strip); border-bottom:1px solid #10151c0d; }
.book-exercise .wrap { max-width:860px; margin:0 auto; padding:34px 28px 54px; }
.book-exercise .title-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:start; padding-bottom:22px; border-bottom:1px solid var(--line-strong); }
.book-exercise .title-copy { min-width:0; }
.book-kicker { margin:0 0 10px; color:var(--accent-dark); font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.book-exercise h1 { margin:0; max-width:720px; font-size:clamp(29px,5vw,43px); line-height:1.08; letter-spacing:-.025em; font-weight:800; text-transform:uppercase; overflow-wrap:anywhere; }
.book-exercise #pageSubtitle, .book-exercise .subtitle { max-width:650px; margin:11px 0 0 !important; color:var(--muted); font-size:16px; }
.book-exercise .language-select { width:auto; min-width:72px; min-height:40px; padding:6px 9px; border:1px solid var(--line-strong); border-radius:4px; background:#fff; color:var(--ink); font-size:14px; font-weight:700; }
.book-module, .book-exercise .settings-disclosure { margin-top:28px; background:var(--accent-wash); border:0; border-left:4px solid var(--accent); border-radius:0; box-shadow:none; }
.book-module { padding:20px 22px 22px; }
.book-section-kicker { margin:0 0 15px; color:var(--accent-dark); font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.book-exercise .settings-disclosure summary { padding:16px 20px; min-height:54px; }
.book-exercise .settings-summary-title { color:var(--accent-dark); }
.book-exercise .settings-disclosure .settings { padding:16px 20px 20px; border-top:1px solid var(--accent-line); }
.book-exercise .setting-card { border-radius:3px; border-color:var(--accent-line); padding:12px 14px; background:#ffffffd1; }
.book-exercise select:not(.language-select) { min-height:42px; border:1px solid var(--line-strong); border-radius:4px; background:#fff; color:var(--ink); font:inherit; padding:7px 10px; max-width:100%; }
.book-ear .settings, .book-ear .soundrow { background:transparent; margin:16px 0 0; padding:0; border:0; display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.book-ear .level-select-row { margin:0; }
.book-ear .level-select-row select { width:100%; }
.book-ear .levels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:14px; }
.book-ear .level-section, .book-ear .book-module > section { margin:0; }
.book-ear .book-module h2, .book-section-heading, .book-answer-heading { margin:0; font-size:20px; line-height:1.2; font-weight:800; }
.book-ear .level { min-height:76px; padding:12px 14px 12px 16px; border:1px solid var(--accent-line); border-left:4px solid transparent; border-radius:3px; background:#ffffffd1; color:var(--ink); text-align:left; box-shadow:none; }
.book-ear .level strong { display:block; margin-bottom:4px; font-size:15px; line-height:1.2; }
.book-ear .level span { color:var(--muted); font-size:14px; }
.book-ear .level.active { border-color:#bda0d9; border-left-color:var(--purple); background:#fff; outline:none; }
.book-ear .level:focus-visible { outline:3px solid var(--accent-dark); outline-offset:3px; }
.book-exercise .prompt { margin-top:26px; font-size:20px; font-weight:800; }
.book-exercise .prompt-sub { font-size:14px; color:var(--muted); }
.book-exercise .notation-card { margin-top:16px; padding:12px 14px 10px; border:1px solid var(--line); border-radius:0; background:#fff; box-shadow:none; }
.book-exercise .accidental-toolbar, .book-exercise .input-tools, .book-exercise .note-tool, .book-exercise .interval-answer-card { border-radius:3px; border-color:var(--line); box-shadow:none; }
.book-exercise .accidental-toolbar, .book-exercise .input-tools { background:#eff8f9; border-left:3px solid var(--teal); }
.book-exercise .tool-btn, .book-exercise .acc-btn { border-radius:3px; background:#fff; color:var(--ink); border-color:var(--line-strong); }
.book-exercise .tool-btn.selected, .book-exercise .acc-btn.selected { background:#e0f0f1; color:var(--ink); border-color:#256873; outline-color:#256873; }
.book-listen { margin-top:26px; padding:20px 22px 22px; border:1px solid var(--line); background:#fff; }
.book-section-heading { padding-bottom:13px; border-bottom:1px solid var(--line); }
.book-exercise .book-listen :is(.playrow,.play-row,.row,.toprow) { display:flex; flex-wrap:wrap; gap:9px; margin-top:17px; }
.book-ear .player { margin:0; padding:0; background:transparent; border:0; box-shadow:none; }
.book-answer-heading { margin-top:26px; padding-bottom:11px; border-bottom:1px solid var(--line-strong); }
.book-exercise :is(.answer,.answer-btn) { min-height:48px; padding:10px 12px; border:1px solid var(--line); border-radius:3px; background:#fff; color:var(--ink); font-size:15px; font-weight:700; box-shadow:none; }
.book-ear .answer { min-height:62px; }
.book-exercise :is(.answer,.answer-btn):hover:not(:disabled) { border-color:var(--accent); background:var(--accent-wash); }
.book-exercise :is(.answer,.answer-btn).selected { outline:2px solid var(--accent-dark); outline-offset:1px; }
.book-exercise :is(.answer,.answer-btn).correct { border-color:var(--right) !important; color:var(--right) !important; background:#f4fbf6 !important; }
.book-exercise :is(.answer,.answer-btn).wrong { border-color:var(--wrong) !important; color:var(--wrong) !important; background:#fff6f6 !important; }
.book-exercise :is(.answer,.answer-btn).selected:is(.correct,.wrong) { outline-color:currentColor !important; }
.book-exercise :is(.answer,.answer-btn):disabled:is(.correct,.wrong) { opacity:1; }
.book-exercise :is(.primary,.secondary,.tip-toggle) { min-height:46px; padding:10px 16px; border-radius:4px; font:inherit; font-weight:800; box-shadow:none; }
.book-exercise .primary { background:var(--action-bg,var(--active)); color:var(--action-fg,#fff); border:1px solid transparent; }
.book-exercise .primary:hover:not(:disabled) { filter:brightness(.96); }
.book-exercise .secondary { background:#fff; color:var(--ink); border:1px solid var(--line-strong); }
.book-exercise .tip-toggle { background:var(--tip-bg); color:var(--ink); border:1px solid var(--tip-border); }
.book-exercise .tip-box { margin:12px 0 0 !important; padding:15px 17px !important; border:0 !important; border-left:4px solid var(--orange) !important; border-radius:0 !important; background:var(--tip-bg) !important; color:var(--ink) !important; }
.book-exercise .tip-box[hidden] { display:none !important; }
.book-exercise .tip-box :is(h2,h3) { margin:0 0 9px; font-size:17px; }
.book-exercise .tip-box p { margin:0; }
.book-exercise .tip-box p+p { margin-top:8px; }
.book-ear .tip-area { margin-top:16px; }
.book-exercise .reference { padding:16px 0 0; background:transparent; border:0; border-top:1px solid var(--accent-line); border-radius:0; }
.book-exercise .feedback { font-size:16px; line-height:1.48; }
.book-exercise .score { color:var(--muted); font-size:14px; }
.book-exercise :is(button,select,summary,a):focus-visible { outline:3px solid var(--accent-dark); outline-offset:3px; }
.book-test-list { padding:0; list-style:none; margin-bottom:0; }
.book-test-list li+li { border-top:1px solid var(--line); }
.book-test-list a { display:block; padding:12px 0; color:var(--accent-dark); text-decoration:none; }
.book-test-list a:hover { text-decoration:underline; }
.book-link-code { font-size:12px; font-weight:800; display:inline-block; min-width:60px; color:var(--muted); }
@media(max-width:680px) {
  .book-exercise .wrap { padding:26px 18px 40px; }
  .book-exercise .title-row { gap:12px; }
  .book-ear .levels { grid-template-columns:1fr; }
  .book-exercise .settings-summary-text { white-space:normal; }
}
@media(max-width:450px) {
  .book-strip { height:9px; }
  .book-exercise .title-copy { display:contents; }
  .book-exercise .title-row { row-gap:10px; }
  .book-exercise .book-kicker { grid-column:1; grid-row:1; margin:0; align-self:center; }
  .book-exercise .language-select { grid-column:2; grid-row:1; }
  .book-exercise .title-row h1 { grid-column:1 / -1; grid-row:2; }
  .book-exercise .title-row :is(#pageSubtitle,.subtitle) { grid-column:1 / -1; grid-row:3; margin-top:0 !important; }
  .book-exercise h1 { font-size:clamp(24px,6.8vw,29px); }
  .book-module,.book-listen { padding:17px 16px; }
  .book-exercise .settings-disclosure summary { padding:14px; }
  .book-exercise .settings-disclosure .settings { padding:14px; }
}

.book-portal-link { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; background: #0066cc; color: #fff; text-decoration: none; border-radius: 4px; font-weight: 750; }
.book-exercise-nav { margin:0 0 12px; }
.book-exercise-nav a { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:8px 0; color:var(--accent-dark); font-size:14px; font-weight:750; text-decoration:none; }
.book-exercise-nav a:hover { text-decoration:underline; }
.book-exercise-description { margin:12px 0 0; color:var(--muted); font-size:14px; line-height:1.5; }
.book-exercise .key-answer-grid { grid-template-columns:repeat(7,minmax(0,1fr)); align-items:start; gap:8px; }
.key-letter-group { display:grid; gap:6px; min-width:0; }
.key-letter { text-align:center; font-weight:800; font-size:16px; color:var(--muted); }
.book-exercise .key-letter-group .answer-btn { width:100%; min-height:44px; padding:8px 3px; font-size:14px; }
@media(max-width:760px) { .book-exercise .key-answer-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px 8px; } }
@media(max-width:520px) { .book-exercise .key-answer-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }