/* Cosmos interactive notes. Loaded only on /notes/ pages. */

.note-page { padding: 28px 0 80px; }
.note-page [hidden] { display: none !important; }
.note-layout { display: block; }
.note-layout.has-side { display: block; }
.note-layout.has-side .note-main { max-width: 860px; margin: 0 auto; }
.note-main { min-width: 0; max-width: 800px; }
.note-hub .wrap { max-width: 1000px; }

/* Breadcrumbs */
.note-crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: .86rem; color: var(--muted); margin-bottom: 22px; }
.note-crumbs a { color: var(--muted); text-decoration: none; }
.note-crumbs a:hover { color: var(--text); }

/* Header */
.note-head { margin-bottom: 30px; }
.note-head h1 { font-size: clamp(1.9rem, 4.2vw, 2.8rem); margin-bottom: .35em; }
.note-head .lead { max-width: 60ch; font-size: 1.08rem; }
.note-hub-head { padding: 40px 0 20px; }
.note-hub-head h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.note-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 18px; font-size: .9rem; color: var(--muted); }
.note-mastered { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: .88rem; font-weight: 600; color: var(--text); background: var(--panel); border: 1px solid var(--panel-border); border-radius: 999px; padding: 7px 14px 7px 10px; cursor: pointer; }
.note-mastered .tick { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--muted); display: inline-grid; place-items: center; }
.note-mastered[aria-pressed="true"] { border-color: rgba(111, 214, 168, .5); background: rgba(111, 214, 168, .1); }
.note-mastered[aria-pressed="true"] .tick { border-color: #6fd6a8; background: #6fd6a8; }
.note-mastered[aria-pressed="true"] .tick::after { content: ""; width: 5px; height: 9px; border: solid #062016; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }

/* Sidebar */

.note-side-box { background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius); padding: 14px; }
.note-side-title { font-weight: 700; font-size: 1.05rem; line-height: 1.3; padding: 2px 4px 12px; }
.note-side-kicker { display: block; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: 4px; }
.note-toc { list-style: none; margin: 0; padding: 0; }
.note-toc a { display: flex; gap: 10px; padding: 8px 8px; border-radius: 8px; color: var(--muted); text-decoration: none; font-size: .9rem; line-height: 1.35; }
.note-toc a:hover { background: rgba(255,255,255,.05); color: var(--text); }
.note-toc .is-current a { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--text); }
.note-toc-code { flex: none; width: 26px; font-weight: 700; color: var(--accent-2); font-size: .82rem; padding-top: 1px; }
.note-toc .is-done .note-toc-code { color: #6fd6a8; }
.note-toc .is-done .note-toc-code::after { content: " ✓"; }
.note-tool { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: .88rem; font-weight: 600; color: #fff; background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 999px; padding: 7px 14px; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.note-tool svg { width: 16px; height: 16px; color: var(--accent); flex: none; }
.note-tool:hover { background: var(--accent); border-color: var(--accent); }
.note-tool:hover svg { color: #fff; }

/* Chapter sections: slide-out drawer, so notes always use the full width */
.note-side { position: fixed; top: 0; left: 0; bottom: 0; z-index: 70; width: min(320px, 86vw); padding: 64px 16px 24px; overflow-y: auto; background: #050b1c; border-right: 1px solid var(--panel-border); box-shadow: 24px 0 60px rgba(0,0,0,.45); transform: translateX(-105%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; }
.side-open .note-side { transform: none; visibility: visible; transition: transform .25s ease; }
body.admin-bar .note-side { top: 32px; }
@media (max-width: 782px) { body.admin-bar .note-side { top: 46px; } }
.note-side-box { background: transparent; border: 0; padding: 0; }
.note-side-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--panel-border); background: transparent; color: var(--text); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.note-side-close:hover { border-color: var(--accent); color: var(--accent); }
.note-side-backdrop { position: fixed; inset: 0; z-index: 65; background: rgba(2, 6, 18, .55); }
.note-side-toggle { position: fixed; left: 20px; bottom: 24px; z-index: 60; display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: .95rem; font-weight: 600; color: #fff; background: #050b1c; border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); border-radius: 999px; padding: 10px 18px 10px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.45); cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.note-side-toggle svg { width: 18px; height: 18px; color: var(--accent); }
.note-side-toggle:hover { background: var(--accent); border-color: var(--accent); }
.note-side-toggle:hover svg { color: #fff; }
.side-open .note-side-toggle { visibility: hidden; }
body.cn-noscroll { overflow: hidden; }

}

/* Body typography */
.note-content { font-size: 1.04rem; }
.note-content h2 { font-size: clamp(1.45rem, 3vw, 1.85rem); margin: 2.2em 0 .6em; scroll-margin-top: 90px; }
.note-content h3 { font-size: 1.18rem; margin: 1.8em 0 .5em; scroll-margin-top: 90px; }
.note-content > :first-child { margin-top: 0; }
.note-content ul, .note-content ol { padding-left: 1.3em; margin: 0 0 1em; }
.note-content li { margin-bottom: .35em; }
.note-content strong { color: #fff; }
.note-content table { width: 100%; border-collapse: collapse; margin: 1em 0 1.4em; font-size: .95rem; display: block; overflow-x: auto; }
.note-content th, .note-content td { border: 1px solid var(--panel-border); padding: 9px 12px; text-align: left; }
.note-content th { background: rgba(255,255,255,.04); font-weight: 600; }
.cn-anchor { margin-left: 8px; font-size: .8em; color: var(--muted); text-decoration: none; opacity: 0; transition: opacity .15s; }
h2:hover > .cn-anchor, h3:hover > .cn-anchor { opacity: 1; }
.cn-math-display { overflow-x: auto; overflow-y: hidden; margin: .8em 0; padding: 2px 0; }
.katex { font-size: 1.08em; }

/* Boxes */
.cn-box { border-radius: var(--radius); padding: 16px 20px; margin: 1.4em 0; border: 1px solid var(--panel-border); background: var(--panel); }
.cn-box > :last-child { margin-bottom: 0; }
.cn-box ul { margin-bottom: 0; }
.cn-box-label { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 8px; color: var(--muted); }
.cn-box-label span { color: var(--text); letter-spacing: .06em; margin-left: 6px; }
.cn-syllabus { border-left: 3px solid var(--accent-2); }
.cn-syllabus .cn-box-label { color: var(--accent-2); }
.cn-goals { border-left: 3px solid #6fd6a8; }
.cn-goals .cn-box-label { color: #6fd6a8; }
.cn-key { border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, transparent), color-mix(in srgb, var(--accent) 2%, transparent)); }
.cn-key .cn-box-label { color: var(--accent); }
.cn-mistake { border-left: 3px solid #ff8f8f; background: rgba(255, 107, 107, .06); }
.cn-mistake .cn-box-label { color: #ff9f9f; }
.cn-mistake .cn-box-label::before { content: "⚠ "; }
.cn-tip .cn-box-label, .cn-why .cn-box-label { color: var(--accent-2); }
.cn-exam { border-left: 3px solid var(--accent); }
.cn-exam .cn-box-label { color: var(--accent); }
.cn-think { border-left: 3px solid #c9a7ff; }
.cn-think .cn-box-label { color: #c9a7ff; }

.cn-formula { margin: 1.2em 0; padding: 14px 18px; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 4%, transparent); }
.cn-formula .cn-math-display { margin: .2em 0; }
.cn-formula-name { font-size: .78rem; font-weight: 700; color: var(--accent); letter-spacing: .06em; text-transform: uppercase; }

.cn-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 1.2em 0; }
.cn-col { min-width: 0; }
@media (max-width: 640px) { .cn-cols { grid-template-columns: 1fr; } }

.cn-term { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: help; border-bottom: 1.5px dotted var(--accent-2); }
.cn-term[aria-expanded="true"] { color: var(--accent-2); }
.cn-tip { position: absolute; z-index: 60; background: #172038; color: var(--text); border: 1px solid color-mix(in srgb, var(--accent-2) 40%, transparent); border-radius: 10px; padding: 10px 14px; font-size: .9rem; line-height: 1.45; box-shadow: 0 12px 30px rgba(0,0,0,.4); }

.cn-reveal { margin: 1em 0; border: 1px solid var(--panel-border); border-radius: 10px; padding: 10px 14px; }
.cn-reveal summary { cursor: pointer; color: var(--accent-2); font-weight: 600; }
.cn-reveal[open] summary { margin-bottom: 8px; }

/* Worked examples */
.cn-example { margin: 1.6em 0; border: 1px solid var(--panel-border); border-radius: var(--radius); background: var(--bg-2); overflow: hidden; }
.cn-example > header { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px; background: color-mix(in srgb, var(--accent-2) 8%, transparent); border-bottom: 1px solid var(--panel-border); }
.cn-ex-title { font-weight: 700; font-size: .92rem; letter-spacing: .02em; }
.cn-level { color: var(--accent); font-size: .7rem; letter-spacing: 2px; }
.cn-level-1 { color: #6fd6a8; } .cn-level-3 { color: #ff8fb1; }
.cn-ex-body { padding: 16px 18px 14px; }
.cn-ex-body > p:first-child { font-weight: 500; }
.cn-step { position: relative; padding: 10px 0 10px 18px; border-left: 2px solid color-mix(in srgb, var(--accent-2) 35%, transparent); margin-left: 4px; animation: cnIn .25s ease; }
.cn-step + .cn-step { margin-top: 2px; }
.cn-step-work > :last-child { margin-bottom: 0; }
.cn-step-work .cn-math-display { margin: .2em 0; }
.cn-why-btn { font: inherit; font-size: .78rem; font-weight: 600; color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 10%, transparent); border: 0; border-radius: 999px; padding: 3px 11px; cursor: pointer; margin-top: 6px; }
.cn-step-why { margin-top: 8px; font-size: .92rem; color: var(--muted); background: rgba(255,255,255,.03); border-radius: 8px; padding: 8px 12px; }
.cn-ex-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.cn-ex-hint { flex: 1 1 100%; font-size: .88rem; color: var(--muted); }
@keyframes cnIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cn-step { animation: none; } }

/* Graphs */
.cn-graph { margin: 1.8em 0; padding: 16px; border: 1px solid var(--panel-border); border-radius: var(--radius); background: var(--bg-2); }
.cn-graph-title { font-weight: 700; margin-bottom: 10px; font-size: .98rem; }
.cn-graph-eq { font-family: "Cambria Math", "STIX Two Math", Georgia, serif; font-size: 1.25rem; text-align: center; padding: 8px 10px 12px; color: #fff; letter-spacing: .01em; }
.cn-graph-box { width: 100%; border-radius: 10px; overflow: hidden; background: color-mix(in srgb, var(--bg) 70%, #000); touch-action: none; }
.cn-svg { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; }
.cn-grid line { stroke: rgba(255,255,255,.06); stroke-width: 1; }
.cn-axes line { stroke: rgba(232,236,246,.55); stroke-width: 1.4; }
.cn-ticks text, .cn-axis-name { fill: #8d98b5; font: 11px var(--font); }
.cn-axis-name { font-style: italic; font-size: 13px; fill: #c3cbe0; }
.cn-curve { fill: none; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.cn-curve.is-dash { stroke-dasharray: 7 6; stroke-width: 1.8; }
.cn-curve.is-faint { opacity: .45; stroke-width: 1.8; }
.cn-marks circle { fill: #fff; stroke: color-mix(in srgb, var(--bg) 70%, #000); stroke-width: 2; }
.cn-marks .is-root { fill: #6fd6a8; } .cn-marks .is-turn { fill: var(--accent); } .cn-marks .is-yint { fill: var(--accent-2); } .cn-marks .is-int { fill: #ff8fb1; }
.cn-mark-label, .cn-label { fill: #e8ecf6; font: 600 12px var(--font); paint-order: stroke; stroke: color-mix(in srgb, var(--bg) 70%, #000); stroke-width: 4px; stroke-linejoin: round; }
.cn-point { cursor: grab; outline: none; }
.cn-point:active { cursor: grabbing; }
.cn-point-hit { fill: transparent; }
.cn-point-dot { fill: var(--accent); stroke: #fff; stroke-width: 2; }
.cn-point:focus-visible .cn-point-dot { stroke: var(--accent-2); stroke-width: 4; }
.cn-hair line { stroke: rgba(255,255,255,.25); stroke-dasharray: 3 4; }
.cn-hair circle { fill: #fff; }
.cn-shade rect { fill: rgba(111,214,168,.08); }
.cn-shade-axis { stroke: #6fd6a8; stroke-width: 5; stroke-linecap: round; }
.cn-graph-ctrls { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 22px; margin-top: 14px; align-items: end; }
.cn-slider label { display: block; font-size: .9rem; color: var(--muted); margin-bottom: 2px; }
.cn-slider-name { font-style: italic; font-family: Georgia, serif; color: var(--text); font-size: 1.05rem; }
.cn-slider output { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.cn-slider input { width: 100%; accent-color: var(--accent); height: 28px; }
.cn-graph-reset { justify-self: start; font: inherit; font-size: .85rem; color: var(--muted); background: transparent; border: 1px solid var(--panel-border); border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.cn-graph-readout { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cn-graph-readout span { background: rgba(255,255,255,.05); border: 1px solid var(--panel-border); border-radius: 8px; padding: 5px 11px; font-size: .9rem; font-variant-numeric: tabular-nums; }
.cn-graph-trace { font-size: .8rem; color: var(--muted); margin-top: 8px; min-height: 1.4em; font-variant-numeric: tabular-nums; }
.cn-graph-caption { font-size: .88rem; color: var(--muted); margin: 10px 0 0; }
.cn-graph-tasks { margin-top: 14px; padding: 12px 16px; border-radius: 10px; background: rgba(201,167,255,.07); border: 1px solid rgba(201,167,255,.25); font-size: .95rem; }
.cn-graph-tasks .cn-box-label { color: #c9a7ff; }
.cn-graph-tasks ol, .cn-graph-tasks ul { margin: 0; }

/* Quiz and practice */
.cn-quiz, .cn-practice, .cn-cards { margin: 2em 0; border: 1px solid var(--panel-border); border-radius: var(--radius); background: var(--bg-2); padding: 0 0 16px; overflow: hidden; }
.cn-quiz > header, .cn-practice > header, .cn-cards > header { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid var(--panel-border); background: rgba(111,214,168,.07); }
.cn-practice-more { margin: 16px 0 0; border: 0; border-top: 1px solid var(--panel-border); border-radius: 0; background: transparent; padding: 0; overflow: visible; }
.cn-practice-note { margin: 10px 18px 0; font-size: .9rem; color: var(--muted); }
.cn-practice > header { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.cn-cards > header { background: rgba(201,167,255,.08); }
.cn-quiz-title { font-weight: 700; }
.cn-quiz-score, .cn-practice-streak, .cn-cards-count { font-size: .86rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.cn-qs { margin: 0; padding: 6px 18px 0 40px; }
.cn-q { padding: 12px 0; border-bottom: 1px solid var(--panel-border); }
.cn-q:last-child { border-bottom: 0; }
.cn-q > p { margin-bottom: .6em; }
.cn-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 4px; }
@media (max-width: 560px) { .cn-opts { grid-template-columns: 1fr; } }
.cn-opt { display: flex; align-items: center; gap: 10px; text-align: left; font: inherit; font-size: .97rem; color: var(--text); background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: 10px 12px; cursor: pointer; min-height: 48px; }
.cn-opt:hover:not([aria-disabled]) { border-color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 8%, transparent); }
.cn-opt-text { flex: 1; min-width: 0; }
.cn-opt-key { flex: none; width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; font-size: .78rem; font-weight: 700; background: rgba(255,255,255,.08); color: var(--muted); }
.cn-opt[aria-disabled] { cursor: default; }
.cn-opt.is-right { border-color: #6fd6a8; background: rgba(111,214,168,.12); }
.cn-opt.is-right .cn-opt-key { background: #6fd6a8; color: #062016; }
.cn-opt.is-wrong { border-color: #ff8f8f; background: rgba(255,107,107,.1); }
.cn-opt.is-wrong .cn-opt-key { background: #ff8f8f; color: #2a0606; }
.cn-feedback { font-weight: 700; margin-top: 8px; font-size: .92rem; }
.cn-feedback.ok, .cn-practice-fb .ok { color: #6fd6a8; }
.cn-feedback.no, .cn-practice-fb .no { color: #ff9f9f; }
.cn-why { margin-top: 6px; font-size: .94rem; color: var(--muted); background: rgba(255,255,255,.03); border-radius: 8px; padding: 10px 12px; }
.cn-why > :last-child { margin-bottom: 0; }
.cn-quiz-actions { padding: 6px 18px 0; }
.cn-input-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.cn-input-row input { flex: 1 1 180px; min-width: 0; font: inherit; font-size: 16px; color: var(--text); background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.18); border-radius: 10px; padding: 9px 12px; min-height: 44px; }
.cn-input-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.cn-practice-mount { padding: 14px 18px 0; }
.cn-practice-q { font-size: 1.04rem; margin-bottom: 4px; }
.cn-practice-fb { margin: 8px 0; font-size: .95rem; }
.cn-practice-sol { margin-top: 6px; color: var(--muted); background: rgba(255,255,255,.03); border-radius: 8px; padding: 10px 12px; overflow-x: auto; }
.cn-practice-next { margin-top: 4px; }

/* Flashcards */
.cn-cards-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; padding: 16px 18px 0; }
.cn-cards-shuffle { font: inherit; font-size: .82rem; color: var(--muted); background: transparent; border: 1px solid var(--panel-border); border-radius: 999px; padding: 4px 12px; cursor: pointer; }
.cn-card { perspective: 900px; min-height: 150px; cursor: pointer; outline: none; }
.cn-card-inner { position: relative; width: 100%; height: 100%; min-height: 150px; transition: transform .45s ease; transform-style: preserve-3d; }
.cn-card.is-flipped .cn-card-inner { transform: rotateY(180deg); }
.cn-card-front, .cn-card-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 12px; padding: 16px; display: flex; flex-direction: column; justify-content: center; text-align: center; border: 1px solid rgba(255,255,255,.12); overflow: auto; }
.cn-card-front { background: linear-gradient(160deg, color-mix(in srgb, var(--accent-2) 14%, transparent), color-mix(in srgb, var(--accent-2) 3%, transparent)); font-weight: 600; }
.cn-card-front::after { content: "Tap to flip"; position: absolute; bottom: 8px; left: 0; right: 0; font-size: .7rem; font-weight: 500; color: var(--muted); }
.cn-card-back { background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 14%, transparent), color-mix(in srgb, var(--accent) 3%, transparent)); transform: rotateY(180deg); font-size: .94rem; }
.cn-card-back > :last-child { margin-bottom: 0; }
.cn-card:focus-visible .cn-card-front, .cn-card:focus-visible .cn-card-back { border-color: var(--accent); }
.cn-card-known { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: transparent; color: var(--muted); cursor: pointer; font-size: .9rem; }
.cn-card.is-known .cn-card-known { background: #6fd6a8; color: #062016; border-color: #6fd6a8; }
.cn-card.is-known .cn-card-front { border-color: rgba(111,214,168,.5); }
.cn-card.is-known .cn-card-front::before { content: "✓ known"; position: absolute; top: 8px; right: 12px; font-size: .7rem; color: #6fd6a8; }
@media (prefers-reduced-motion: reduce) { .cn-card-inner { transition: none; } }

/* Contents cards on subject and chapter pages */
.note-children { margin-top: 36px; }
.note-children h2 { font-size: 1.4rem; }
.note-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.note-cards-lg { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); margin-bottom: 40px; }
.note-card a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 18px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--panel-border); color: var(--text); text-decoration: none; transition: border-color .15s, transform .15s; }
.note-card a:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); transform: translateY(-2px); color: var(--text); }
.note-card-code { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2); }
.note-card-title { font-weight: 700; font-size: 1.04rem; line-height: 1.3; }
.note-card-desc { font-size: .9rem; color: var(--muted); line-height: 1.5; }
.note-card-bar { display: block; height: 4px; border-radius: 4px; background: rgba(255,255,255,.08); margin-top: auto; overflow: hidden; }
.note-card-bar span { display: block; height: 100%; width: 0; background: #6fd6a8; transition: width .3s; }
.note-card-count { font-size: .8rem; color: var(--muted); }
.note-card.is-done a { border-color: rgba(111,214,168,.4); }
.note-card.is-done .note-card-code::after { content: " ✓ mastered"; color: #6fd6a8; }
.note-features { margin-top: 20px; }

/* Pager + CTA */
.note-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 48px 0 24px; }
.note-pager a { display: block; padding: 16px 18px; border-radius: var(--radius); border: 1px solid var(--panel-border); background: var(--panel); color: var(--text); text-decoration: none; font-weight: 600; line-height: 1.35; }
.note-pager a:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.note-pager small { display: block; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 4px; }
.note-pager-next { text-align: right; grid-column: 2; }
@media (max-width: 560px) { .note-pager { grid-template-columns: 1fr; } .note-pager-next { grid-column: 1; } }
.note-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 30px; padding: 24px; border-radius: 18px; border: 1px solid var(--panel-border); background: radial-gradient(500px 200px at 100% 0%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 70%), var(--bg-2); }
.note-cta h2 { font-size: 1.3rem; margin: 0 0 4px; }
.note-cta p { margin: 0; color: var(--muted); }

/* Formula dialog */
.note-dialog { width: min(640px, calc(100vw - 32px)); max-height: 80vh; border: 1px solid var(--panel-border); border-radius: 16px; background: var(--bg-2); color: var(--text); padding: 0; }
.note-dialog::backdrop { background: rgba(0,0,0,.6); }
.note-dialog-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--panel-border); position: sticky; top: 0; background: var(--bg-2); }
.note-dialog-head h2 { margin: 0; font-size: 1.2rem; }
.note-dialog-close { font-size: 1.6rem; line-height: 1; background: none; border: 0; color: var(--muted); cursor: pointer; }
.note-dialog-body { padding: 10px 20px 20px; }

/* Print: light, no interactivity chrome, all steps visible */
@media print {
	body { background: #fff !important; color: #000 !important; font-size: 11pt; }
	body::before, .site-header, .site-footer, .note-side, .note-side-toggle, .note-side-backdrop, .note-pager, .note-cta, .note-meta, .cn-ex-bar, .cn-why-btn, .cn-graph-ctrls, .cn-graph-trace, .cn-quiz-actions, .cn-practice, .cn-cards-shuffle, .cn-card-known, .note-crumbs { display: none !important; }
	.note-layout.has-side { display: block; }
	.note-main { max-width: none; }
	.cn-step, .cn-step-why, .cn-why { display: block !important; }
	.cn-step[hidden], .cn-why[hidden], .cn-step-why[hidden] { display: block !important; }
	.cn-box, .cn-example, .cn-graph, .cn-quiz, .cn-cards, .cn-formula { background: #fff !important; border-color: #999 !important; color: #000; break-inside: avoid; }
	.cn-card-inner { transform: none !important; }
	.cn-card-front, .cn-card-back { position: static; transform: none !important; color: #000; background: #fff !important; }
	.note-content strong, .note-head h1, .cn-graph-eq { color: #000; }
	.cn-graph-box { background: #fff; }
	.cn-ticks text, .cn-axis-name { fill: #333; }
	.cn-axes line { stroke: #000; }
	.cn-grid line { stroke: #ddd; }
	.cn-mark-label, .cn-label { fill: #000; stroke: #fff; }
	a { color: #000; }
}

/* Tables: .cn-table uses the same look as every other note table. */
.cn-table-wrap { overflow-x: auto; margin: 1em 0 1.4em; }
.cn-table-wrap .cn-table { margin: 0; }

/* ---------------------------------------------------------------- */
/* 1.5.0: chapter chooser, chapter tabs, quizzes page, all chapters  */
/* ---------------------------------------------------------------- */

/* Chapter cards on the subject page: Notes / Quizzes buttons */
.note-card[data-quiz-url] { position: relative; }
.note-card[data-quiz-url] > a { padding-bottom: 74px; }
.note-card-modes { position: absolute; left: 19px; right: 19px; bottom: 18px; display: flex; gap: 8px; }
.note-card .note-card-modes a { flex: 1 1 0; flex-direction: row; height: auto; transform: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 8px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--text); font-size: .9rem; font-weight: 600; text-decoration: none; transition: background-color .15s, border-color .15s, color .15s; }
.note-card .note-card-modes a:hover, .note-card .note-card-modes a:focus-visible { background: var(--accent); border-color: var(--accent); color: #fff; outline: none; }
.note-card-modes svg { width: 16px; height: 16px; flex: none; }

/* Notes or quizzes? */
.note-choose { width: min(560px, calc(100vw - 32px)); }
.note-choose .note-dialog-head { align-items: flex-start; padding: 18px 20px 14px; }
.note-choose-kicker { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 4px; }
.note-choose-kicker:empty { display: none; }
.note-choose .note-dialog-body { padding: 16px 20px 22px; }
.note-choose-sub { margin: 0 0 14px; color: var(--muted); font-size: .95rem; }
.note-choose-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.note-choose-opt { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--panel-border); color: var(--text); text-decoration: none; transition: border-color .15s, transform .15s, background-color .15s; }
.note-choose-opt:hover, .note-choose-opt:focus-visible { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--panel)); color: var(--text); transform: translateY(-2px); outline: none; }
.note-choose-icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 4px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.note-choose-icon svg { width: 22px; height: 22px; }
.note-choose-label { font-weight: 700; font-size: 1.1rem; }
.note-choose-desc { font-size: .87rem; line-height: 1.5; color: var(--muted); }
@media (max-width: 480px) { .note-choose-opts { grid-template-columns: 1fr; } .note-choose-opt { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 12px; } .note-choose-icon { margin: 0; } .note-choose-desc { flex-basis: 100%; } }

/* Notes | Quizzes switch on chapter pages */
.note-tabs { display: inline-flex; gap: 4px; margin-top: 22px; padding: 4px; border-radius: 999px; background: var(--panel); border: 1px solid var(--panel-border); }
.note-tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 999px; font-size: .93rem; font-weight: 600; color: var(--muted); text-decoration: none; transition: background-color .15s, color .15s; }
.note-tabs a:hover { color: var(--text); background: rgba(255,255,255,.05); }
.note-tabs a[aria-current="page"] { background: var(--accent); color: #fff; }
.note-tabs svg { width: 17px; height: 17px; flex: none; }

/* Quizzes page */
.note-quiz-empty { text-align: center; padding: 48px 24px; border-radius: var(--radius); background: var(--panel); border: 1px dashed var(--panel-border); }
.note-quiz-empty-icon { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.note-quiz-empty-icon svg { width: 30px; height: 30px; }
.note-quiz-empty h2 { margin: 18px 0 8px; font-size: 1.4rem; }
.note-quiz-empty p { max-width: 48ch; margin: 0 auto 22px; color: var(--muted); }
.note-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 999px; background: var(--accent); border: 1px solid var(--accent); color: #fff; font-weight: 600; text-decoration: none; transition: filter .15s, transform .15s; }
.note-btn:hover { color: #fff; filter: brightness(1.08); transform: translateY(-1px); }
.note-btn svg { width: 18px; height: 18px; }

/* Sections drawer: every chapter, expandable */
.note-side-chapters { display: flex; flex-direction: column; gap: 2px; }
.note-side-ch { border-radius: 10px; transition: background-color .15s; }
.note-side-ch[open] { background: rgba(255,255,255,.035); }
.note-side-ch > summary { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-radius: 8px; list-style: none; cursor: pointer; font-weight: 600; font-size: .94rem; line-height: 1.3; color: var(--text); user-select: none; }
.note-side-ch > summary::-webkit-details-marker { display: none; }
.note-side-ch > summary::marker { content: ""; }
.note-side-ch > summary:hover { background: rgba(255,255,255,.05); }
.note-side-ch > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.note-side-ch-title { flex: 1; min-width: 0; }
.note-side-chev { flex: none; width: 8px; height: 8px; margin: 0 6px 3px 0; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .2s; }
.note-side-ch[open] > summary .note-side-chev { transform: rotate(45deg); margin-bottom: 5px; }
.note-side-ch.is-here > summary .note-toc-code { color: var(--accent); }
.note-side-ch .note-toc { padding: 0 6px 4px 14px; }
.note-side-ch .note-toc a { font-size: .9rem; padding: 7px 8px; }
.note-side-quiz { display: flex; align-items: center; gap: 8px; margin: 2px 6px 10px 22px; padding: 7px 10px; border-radius: 8px; border: 1px dashed color-mix(in srgb, var(--accent) 40%, transparent); font-size: .84rem; font-weight: 600; color: var(--accent); text-decoration: none; }
.note-side-quiz:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--text); }
.note-side-quiz svg { width: 16px; height: 16px; flex: none; }
.note-side { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; overscroll-behavior: contain; }
.note-side::-webkit-scrollbar { width: 8px; }
.note-side::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 8px; }
.note-side::-webkit-scrollbar-track { background: transparent; }
@media (prefers-reduced-motion: reduce) { .note-side-chev, .note-choose-opt, .note-btn { transition: none; } }
@media print { .note-tabs { display: none; } }

/* Chapter pages: short white summary, then straight to the sections */
.note-depth-1 .note-head .lead { color: #fff; font-size: clamp(1.05rem, 1.6vw, 1.15rem); line-height: 1.6; max-width: 62ch; }
.note-depth-1 .note-children { margin-top: 28px; }

/* Subject page: short white summary and a 3-step how-to */
.note-depth-0 .note-head .lead { color: #fff; font-size: clamp(1.05rem, 1.6vw, 1.15rem); line-height: 1.6; max-width: 62ch; }
.note-depth-0 .note-content > .note-howto { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.note-howto li { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 16px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--panel-border); color: var(--text); font-size: .97rem; line-height: 1.5; }
.note-howto strong { color: #fff; }
.note-howto-n { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; font-size: .9rem; }
.note-howto-foot { margin: 0; color: var(--muted); font-size: .93rem; }
.note-depth-0 .note-children { margin-top: 32px; }
@media (max-width: 720px) { .note-depth-0 .note-content > .note-howto { grid-template-columns: 1fr; gap: 8px; } .note-howto li { padding: 12px 14px; } }

/* ---------------------------------------------------------------- */
/* Timed quizzes (1.6.0)                                             */
/* ---------------------------------------------------------------- */
.tq { margin-top: 4px; }
.tq-running .note-head .lead, .tq-running .note-tabs { display: none; }
.tq-running .note-head { margin-bottom: 18px; }
.tq-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 22px; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent); color: #fff; font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer; transition: filter .15s, background-color .15s, border-color .15s; }
.tq-btn:hover { filter: brightness(1.08); }
.tq-btn:focus-visible, .tq-opt:focus-visible, .tq-pal-btn:focus-visible, .tq-chip:focus-visible, .tq-link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tq-btn:disabled { opacity: .4; cursor: default; filter: none; }
.tq-btn-ghost { background: transparent; border-color: var(--panel-border); color: var(--text); }
.tq-btn-ghost:hover:not(:disabled) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); filter: none; }
.tq-link { background: none; border: 0; padding: 8px 0; font: inherit; font-size: .9rem; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.tq-link:hover { color: var(--text); }

/* List */
.tq-intro { color: var(--text); max-width: 64ch; margin: 0 0 20px; }
.tq-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.tq-card { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--panel-border); }
.tq-card-kicker { font-weight: 800; font-size: 1.3rem; color: #fff; }
.tq-card-meta { color: var(--muted); font-size: .92rem; }
.tq-card-best { font-size: .88rem; font-weight: 600; color: #6fd6a8; }
.tq-card-best.is-live { color: var(--accent-2); }
.tq-card-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tq-card-acts .tq-btn { flex: 1 1 auto; }

/* Runner */
.tq-bar { position: sticky; z-index: 20; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px 14px; margin: 0 0 16px; padding: 12px 16px 14px; border-radius: var(--radius); background: #0b1838; border: 1px solid var(--panel-border); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.tq-bar-title { font-weight: 800; color: #fff; }
.tq-count { color: var(--muted); font-size: .9rem; }
.tq-timer { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 1.15rem; padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,.07); color: #fff; min-width: 74px; text-align: center; }
.tq-timer.is-low { background: color-mix(in srgb, var(--accent) 25%, transparent); color: #ffd2b5; }
.tq-timer.is-crit { background: #c0392b; color: #fff; animation: tq-pulse 1s ease-in-out infinite; }
@keyframes tq-pulse { 50% { opacity: .7; } }
.tq-progress { grid-column: 1 / -1; height: 4px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
.tq-progress span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .25s; }
.tq-qcard { padding: 22px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--panel-border); }
.tq-qnum { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 8px; }
.tq-qtext { font-size: 1.08rem; line-height: 1.65; color: #fff; }
.tq-fig { margin: 16px 0 4px; padding: 10px; border-radius: 12px; background: #fff; text-align: center; }
.tq-fig img { display: block; max-width: 100%; max-height: 520px; width: auto; height: auto; margin: 0 auto; }
.tq-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.tq-opt { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--panel-border); background: rgba(255,255,255,.03); color: var(--text); font: inherit; font-size: 1.02rem; text-align: left; cursor: pointer; transition: border-color .12s, background-color .12s; }
.tq-opt:hover { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: rgba(255,255,255,.06); }
.tq-opt[aria-checked="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); color: #fff; }
.tq-opt-l { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--muted); font-weight: 700; font-size: .88rem; color: var(--text); }
.tq-opt[aria-checked="true"] .tq-opt-l { background: var(--accent); border-color: var(--accent); color: #fff; }
.tq-opt-t { min-width: 0; overflow-x: auto; }
.tq-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; }
.tq-nav .tq-btn { min-width: 130px; }
.tq-pal { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.tq-pal-btn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--panel-border); background: transparent; color: var(--muted); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; }
.tq-pal-btn:hover { border-color: var(--accent); color: var(--text); }
.tq-pal-btn.is-done { background: color-mix(in srgb, var(--accent) 32%, transparent); color: #fff; border-color: transparent; }
.tq-pal-btn.is-current { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color: #fff; }
.tq-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--panel-border); }
.tq-confirm { width: min(440px, calc(100vw - 32px)); }
.tq-confirm h2 { margin: 6px 0 8px; font-size: 1.25rem; }
.tq-confirm .note-dialog-body { padding: 20px 22px 22px; }
.tq-confirm p { color: var(--text); margin: 0 0 18px; }
.tq-confirm-acts { display: flex; justify-content: flex-end; gap: 10px; }

/* Results */
.tq-res { display: flex; align-items: center; gap: 28px; padding: 24px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--panel-border); }
.tq-ring { --p: 0; flex: none; display: grid; place-items: center; align-content: center; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(closest-side, var(--bg-2) 80%, transparent 81%), conic-gradient(var(--accent) calc(var(--p) * 1%), rgba(255,255,255,.1) 0); }
.tq-ring strong { font-size: 2rem; line-height: 1; color: #fff; }
.tq-ring span { font-size: 1rem; font-weight: 700; color: var(--accent-2); margin-top: 4px; }
.tq-res-info { flex: 1; min-width: 0; }
.tq-res-kicker { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2); }
.tq-res-info h2 { margin: 4px 0 6px; font-size: 1.6rem; }
.tq-res-note { color: #ffd2b5; margin: 0 0 8px; }
.tq-stats { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tq-stats li { display: flex; flex-direction: column; min-width: 92px; padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,.05); }
.tq-stats strong { font-size: 1.2rem; color: #fff; }
.tq-stats span { font-size: .8rem; color: var(--muted); }
.tq-stats .is-right strong { color: #6fd6a8; }
.tq-stats .is-wrong strong { color: #ff8a80; }
.tq-res-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.tq-review-title { margin: 34px 0 12px; font-size: 1.35rem; }
.tq-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.tq-chip { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--panel-border); background: transparent; color: var(--text); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; }
.tq-chip.is-on { background: #fff; border-color: #fff; color: #0a1633; }
.tq-review { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.tq-review.only-bad .tq-rev.is-right { display: none; }
.tq-rev { padding: 20px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--panel-border); border-left: 4px solid var(--panel-border); }
.tq-rev.is-right { border-left-color: #3fbf86; }
.tq-rev.is-wrong { border-left-color: #e5534b; }
.tq-rev.is-blank { border-left-color: #8a94ad; }
.tq-rev-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 4px; }
.tq-rev-head .tq-qnum { margin: 0; }
.tq-badge { font-size: .78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.tq-badge.is-right { background: rgba(63,191,134,.18); color: #7fe0b2; }
.tq-badge.is-wrong { background: rgba(229,83,75,.18); color: #ff9b94; }
.tq-badge.is-blank { background: rgba(255,255,255,.08); color: var(--muted); }
.tq-ropts { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tq-ropt { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--panel-border); color: var(--text); }
.tq-ropt.is-answer { border-color: #3fbf86; background: rgba(63,191,134,.12); }
.tq-ropt.is-answer .tq-opt-l { background: #3fbf86; border-color: #3fbf86; color: #fff; }
.tq-ropt.is-picked { border-color: #e5534b; background: rgba(229,83,75,.12); }
.tq-ropt.is-picked .tq-opt-l { background: #e5534b; border-color: #e5534b; color: #fff; }
.tq-ropt-tag { margin-left: auto; font-size: .78rem; font-weight: 700; color: #fff; }
.tq-sol { margin-top: 14px; padding: 14px 16px; border-radius: 10px; background: rgba(255,255,255,.04); }
.tq-sol-title { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 6px; }
.tq-sol-text { color: #fff; line-height: 1.65; overflow-x: auto; }
.tq-src { display: block; margin-top: 8px; font-size: .8rem; color: var(--muted); }

@media (max-width: 640px) {
	.tq-opts, .tq-ropts { grid-template-columns: 1fr; }
	.tq-bar { grid-template-columns: 1fr auto; padding: 10px 12px 12px; }
	.tq-bar-title { display: none; }
	.tq-qcard, .tq-rev { padding: 16px; }
	.tq-qtext { font-size: 1.02rem; }
	.tq-fig { padding: 6px; }
	.tq-res { flex-direction: column; align-items: stretch; text-align: center; padding: 20px; }
	.tq-ring { margin: 0 auto; width: 130px; height: 130px; }
	.tq-stats, .tq-res-acts { justify-content: center; }
	.tq-stats li { flex: 1 1 40%; }
	.tq-nav .tq-btn { min-width: 0; flex: 1; }
	.tq-pal-btn { width: 36px; height: 36px; }
	.tq-foot { flex-direction: column-reverse; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) { .tq-timer.is-crit { animation: none; } .tq-progress span { transition: none; } }
@media print { .tq-bar, .tq-nav, .tq-pal, .tq-foot, .tq-filter, .tq-res-acts { display: none; } }

/* Subject page: chapters as an expandable list (1.7.0) */
.note-chlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.note-ch details { border-radius: var(--radius); background: var(--panel); border: 1px solid var(--panel-border); transition: border-color .15s, background-color .15s; }
.note-ch details:hover, .note-ch details[open] { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.note-ch details[open] { background: color-mix(in srgb, var(--accent) 5%, var(--panel)); }
.note-ch summary { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 14px 18px; list-style: none; cursor: pointer; border-radius: var(--radius); }
.note-ch summary::-webkit-details-marker { display: none; }
.note-ch summary::marker { content: ""; }
.note-ch summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.note-ch-num { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 18%, transparent); color: #fff; font-weight: 800; font-size: .95rem; }
.note-ch-title { flex: 1; min-width: 0; font-weight: 700; font-size: 1.08rem; line-height: 1.3; color: #fff; }
.note-ch .note-card-count { flex: none; font-size: .85rem; color: var(--muted); }
.note-ch-chev { flex: none; width: 10px; height: 10px; margin: 0 4px 4px 2px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); transition: transform .2s; }
.note-ch details[open] .note-ch-chev { transform: rotate(-135deg); margin-bottom: -4px; }
.note-ch.is-done .note-ch-num { background: #3fbf86; }
.note-ch-body { padding: 0 18px 18px 68px; }
.note-ch-desc { margin: 0 0 12px; color: #fff; font-size: .98rem; line-height: 1.6; max-width: 70ch; }
.note-ch .note-card-bar { max-width: 320px; margin: 0 0 14px; }
.note-ch-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.note-ch-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 140px; min-height: 44px; padding: 10px 22px; border-radius: 999px; background: var(--accent); border: 1px solid var(--accent); color: #fff; font-weight: 600; text-decoration: none; transition: filter .15s, transform .15s; }
.note-ch-btn + .note-ch-btn { background: transparent; color: #fff; border-color: color-mix(in srgb, var(--accent) 70%, transparent); }
.note-ch-btn:hover { color: #fff; filter: brightness(1.1); transform: translateY(-1px); }
.note-ch-btn + .note-ch-btn:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.note-ch-btn svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 600px) {
	.note-ch summary { gap: 12px; padding: 12px 14px; }
	.note-ch .note-card-count { display: none; }
	.note-ch-body { padding: 0 14px 16px; }
	.note-ch-btn { flex: 1 1 0; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .note-ch-chev, .note-ch-btn { transition: none; } }