/* board — the board's blocks, pages, questions, pad, source pages and the engine's cards (web/board/*.js; TutorMe).
   One column of blocks on a phone, a wider centred column on a desktop, one screen per slide. Reveal animates
   opacity and transform only (cheap on low-end phones) and stops under "reduce motion". Colours come from the shell's
   palette (web/workspace/shell.css); the four curve colours are distinct in hue AND lightness. */

html[data-ws-shell] { --bd-c1: #4f46e5; --bd-c2: #e5484d; --bd-c3: #0f9f73; --bd-c4: #b45309; --bd-hl: #fff1b8; --bd-ink: #1b2140; }
html[data-ws-shell][data-theme="dark"] { --bd-c1: #9aa2ff; --bd-c2: #ff8589; --bd-c3: #4fd1a5; --bd-c4: #ffc857; --bd-hl: #5a4a12; --bd-ink: #eef0ff; }

.bd-root { display: flex; flex-direction: column; position: relative; min-height: 0; }
.bd-pages { flex: 0 0 auto; display: flex; gap: 6px; overflow-x: auto; padding: 6px 10px 0; scrollbar-width: none; }
.bd-pages[hidden] { display: none; }
.bd-tab { flex: 0 0 auto; min-height: 36px; max-width: 46vw; padding: 0 14px; border-radius: 12px 12px 0 0; border: 1px solid var(--ws-line); border-bottom: 0; background: var(--ws-soft); color: var(--ws-dim); font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.bd-tab.on { background: var(--ws-surface); color: var(--ws-acc); }
.bd-scroll { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scroll-padding: 16px 0 70px; }
.bd-page { max-width: 760px; margin: 0 auto; padding: 14px 14px 76px; display: flex; flex-direction: column; gap: 12px; }
.bd-jump { position: absolute; right: 12px; bottom: 60px; z-index: 5; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--ws-acc); color: var(--ws-acc-ink); font-weight: 700; font-size: 14px; box-shadow: var(--ws-shadow); cursor: pointer; }
.bd-jump[hidden] { display: none; }
.bd-dim { color: var(--ws-dim); font-size: 14px; margin: 0; }

/* ---- blocks ---- */
.bd-block { position: relative; background: var(--ws-surface); border: 1px solid var(--ws-line); border-radius: 18px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(27, 33, 64, .04); scroll-margin: 12px 0 90px; }
.bd-block[hidden] { display: none; }
.bd-block.k-heading { background: transparent; border: 0; box-shadow: none; padding: 4px 4px 0; }
.bd-block.k-heading h2 { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; }
.bd-prose { font-size: 17px; line-height: 1.5; }
.bd-prose p { margin: 0 0 .5em; } .bd-prose > span > :last-child { margin-bottom: 0; }
.bd-block.k-note { background: color-mix(in srgb, var(--ws-sun) 14%, var(--ws-surface)); border-color: color-mix(in srgb, var(--ws-sun) 45%, var(--ws-line)); }
.bd-block.k-callout { background: var(--ws-acc-soft); border-color: color-mix(in srgb, var(--ws-acc) 40%, var(--ws-line)); font-weight: 600; }
.bd-math, .bd-steps .bd-tex { font-size: 20px; overflow-x: auto; overflow-y: hidden; padding: 4px 0; text-align: center; }
.bd-tex .katex-display { margin: .2em 0; }
.bd-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: ln; }
.bd-line { display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 4px 8px; padding: 4px 6px; border-radius: 12px; counter-increment: ln; }
.bd-line::before { content: counter(ln); width: 24px; height: 24px; border-radius: 50%; background: var(--ws-soft); color: var(--ws-dim); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.bd-why { grid-column: 2; font-size: 14px; color: var(--ws-dim); text-align: center; }
.bd-caption { margin: 6px 0 0; font-size: 14px; color: var(--ws-dim); text-align: center; }
.bd-figure { margin: 0; padding: 8px; background: #fff; border-radius: 12px; border: 1px solid var(--ws-line); }
.bd-figure svg { display: block; width: 100%; height: auto; max-height: 46vh; }
.bd-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; border: 1px solid var(--ws-line); }
.bd-tablewrap table { border-collapse: collapse; width: 100%; font-size: 16px; }
.bd-tablewrap th, .bd-tablewrap td { padding: 8px 10px; border-bottom: 1px solid var(--ws-line); text-align: left; vertical-align: top; }
.bd-tablewrap th { background: var(--ws-soft); font-weight: 700; }
.bd-tablewrap tr:last-child td { border-bottom: 0; }

/* plot */
.bd-plot { margin: 0; }
.bd-plot svg { display: block; width: 100%; height: auto; max-height: 50vh; background: var(--ws-surface); border-radius: 12px; }
.bd-grid line { stroke: var(--ws-line); stroke-width: 1; } .bd-grid text { font: 10px var(--ws-sans); fill: var(--ws-dim); }
.bd-axes line { stroke: var(--ws-dim); stroke-width: 1.5; }
.bd-curve { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.bd-dot { fill: var(--ws-sun); stroke: var(--bd-ink); stroke-width: 1.5; } .bd-dotlabel { font: 700 11px var(--ws-sans); fill: var(--ws-fg); }
.bd-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: center; font-size: 14px; color: var(--ws-dim); margin-top: 4px; }
.bd-legend span::before { content: ""; display: inline-block; width: 14px; height: 4px; border-radius: 2px; background: var(--c); margin-right: 6px; vertical-align: middle; }
.bd-jxg { width: 100%; aspect-ratio: 16 / 11; border-radius: 12px; }

/* diagrams */
.bd-chain { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.bd-chain li { display: flex; align-items: center; gap: 8px; }
.bd-node { display: inline-block; padding: 8px 14px; border-radius: 14px; background: var(--ws-soft); border: 2px solid var(--ws-line); font-weight: 700; font-size: 15px; }
.bd-chain li:nth-child(4n+1) .bd-node { border-color: var(--bd-c1); } .bd-chain li:nth-child(4n+2) .bd-node { border-color: var(--bd-c3); } .bd-chain li:nth-child(4n+3) .bd-node { border-color: var(--bd-c4); } .bd-chain li:nth-child(4n+4) .bd-node { border-color: var(--bd-c2); }
.bd-arrow { color: var(--ws-dim); font-size: 20px; font-weight: 700; display: inline-flex; flex-direction: column; align-items: center; line-height: 1; }
.bd-arrow small { font-size: 11px; font-weight: 600; }
.d-timeline .bd-chain { flex-direction: column; align-items: stretch; gap: 0; border-left: 4px solid var(--ws-acc); margin-left: 10px; padding-left: 0; }
.d-timeline .bd-chain li { position: relative; padding: 6px 0 6px 18px; }
.d-timeline .bd-chain li::before { content: ""; position: absolute; left: -10px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: var(--ws-sun); border: 3px solid var(--ws-surface); }
.d-parts .bd-chain { justify-content: flex-start; }
.bd-tree, .bd-tree ul { list-style: none; margin: 0; padding-left: 20px; border-left: 2px dashed var(--ws-line); } .bd-tree { padding-left: 0; border: 0; } .bd-tree li { padding: 4px 0; }

/* citations and marks */
.bd-cite { display: inline-flex; align-items: center; margin-top: 8px; min-height: 28px; padding: 0 10px; border-radius: 999px; border: 0; background: color-mix(in srgb, var(--ws-mint) 16%, transparent); color: var(--ws-mint); font: 700 12.5px var(--ws-sans); cursor: pointer; }
.bd-cite.beyond { background: var(--ws-soft); color: var(--ws-dim); cursor: default; }
.bd-srcthumb { min-height: 44px; padding: 0 14px; border-radius: 12px; border: 2px dashed var(--ws-line); background: transparent; color: var(--ws-acc); font-weight: 700; cursor: pointer; }
.bd-block.mk-highlight, .bd-part.mk-highlight, .bd-line.mk-highlight { background: var(--bd-hl); color: inherit; }
.bd-part { border-radius: 4px; padding: 0 2px; }
.bd-block.mk-circle, .bd-line.mk-circle, .bd-part.mk-circle { outline: 3px solid var(--ws-coral); outline-offset: 2px; border-radius: 14px; }
.bd-block.mk-underline, .bd-line.mk-underline, .bd-part.mk-underline { box-shadow: inset 0 -4px 0 var(--ws-sky); }
.bd-block.mk-arrow::before { content: "➜"; position: absolute; left: -4px; top: 10px; transform: translateX(-60%); color: var(--ws-coral); font-size: 22px; font-weight: 800; }
.bd-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.bd-badge { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 800; color: #fff; }
.bd-badge.mk-tick { background: var(--ws-mint); } .bd-badge.mk-cross { background: var(--ws-coral); }
.bd-marknote { font-size: 14px; font-weight: 600; background: color-mix(in srgb, var(--ws-sun) 22%, var(--ws-surface)); border-radius: 8px; padding: 2px 8px; }
.bd-block.tapped { border-color: var(--ws-acc); box-shadow: 0 0 0 3px var(--ws-acc-soft); }
.bd-block.bd-look { border-color: var(--ws-sun); }

/* reveal + pointer (opacity / transform only) */
.bd-in { animation: bd-in .38s ease-out both; }
@keyframes bd-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.bd-in .bd-line { animation: bd-in .32s ease-out both; animation-delay: calc(var(--i, 0) * .35s + .15s); }
.bd-in .bd-curve { stroke-dasharray: 1; stroke-dashoffset: 1; animation: bd-draw .9s ease-out .15s forwards; }
@keyframes bd-draw { to { stroke-dashoffset: 0; } }
.bd-pointer { position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--ws-sun); border: 3px solid var(--ws-surface); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ws-sun) 35%, transparent); z-index: 4; pointer-events: none; transition: transform .35s ease; will-change: transform; }
.bd-pointer[hidden] { display: none; }

/* ---- buttons ---- */
.bd-btn { min-height: 48px; padding: 0 18px; border-radius: 16px; border: 2px solid var(--ws-line); background: var(--ws-surface); color: var(--ws-fg); font: 700 16px var(--ws-sans); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.bd-btn.primary { background: var(--ws-acc); border-color: var(--ws-acc); color: var(--ws-acc-ink); }
.bd-btn.big { min-height: 56px; font-size: 18px; flex: 1 1 160px; }
.bd-btn.small { min-height: 44px; font-size: 14px; padding: 0 12px; }
.bd-btn.quiet { border-color: transparent; background: var(--ws-soft); }
.bd-btn.danger { color: var(--ws-coral); }
.bd-btn.icon { min-width: 44px; min-height: 44px; padding: 0; border-color: transparent; background: var(--ws-soft); font-size: 14px; }
.bd-btn:disabled { opacity: .45; cursor: default; }
.bd-btn:not(:disabled):active { transform: scale(.98); }

/* ---- questions ---- */
.bd-block.k-question { border: 2px solid var(--ws-acc); background: color-mix(in srgb, var(--ws-acc) 5%, var(--ws-surface)); }
.bd-block.k-question:has(.bd-q.right) { border-color: var(--ws-mint); } .bd-block.k-question:has(.bd-q.wrong) { border-color: var(--ws-sun); }
.bd-qprompt { margin: 0 0 10px; font-size: 18px; font-weight: 700; line-height: 1.35; }
.bd-opts { display: grid; gap: 8px; }
.bd-opt { min-height: 52px; padding: 10px 14px; border-radius: 16px; border: 2px solid var(--ws-line); background: var(--ws-surface); color: var(--ws-fg); font: 600 17px var(--ws-sans); text-align: left; cursor: pointer; }
.bd-opt:hover:not(:disabled) { border-color: var(--ws-acc); } .bd-opt.on { border-color: var(--ws-acc); background: var(--ws-acc-soft); }
.bd-q.right .bd-opt.on { border-color: var(--ws-mint); background: color-mix(in srgb, var(--ws-mint) 14%, var(--ws-surface)); }
.bd-ansrow { display: flex; align-items: center; gap: 8px; }
.bd-ans { width: 100%; min-height: 52px; border-radius: 14px; border: 2px solid var(--ws-line); background: var(--ws-surface); color: var(--ws-fg); font: 600 20px var(--ws-sans); padding: 8px 12px; }
textarea.bd-ans { font-size: 16px; font-weight: 400; resize: vertical; }
.bd-unit { font-weight: 700; color: var(--ws-dim); }
.bd-keys { display: grid; gap: 6px; margin-top: 8px; } .bd-keys.num { grid-template-columns: repeat(3, 1fr); max-width: 300px; } .bd-keys.expr { grid-template-columns: repeat(5, 1fr); max-width: 380px; }
.bd-key { min-height: 48px; border-radius: 14px; border: 0; background: var(--ws-soft); color: var(--ws-fg); font: 700 19px var(--ws-sans); cursor: pointer; }
.bd-key:active { background: var(--ws-acc-soft); }
.bd-order { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .bd-order li { display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; border-radius: 14px; background: var(--ws-surface); border: 2px solid var(--ws-line); } .bd-oi { flex: 1 1 auto; font-weight: 600; }
.bd-mv { width: 44px; height: 44px; border-radius: 12px; border: 0; background: var(--ws-soft); color: var(--ws-fg); cursor: pointer; } .bd-mv:disabled { opacity: .35; }
.bd-match { display: grid; gap: 8px; } .bd-mrow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center; font-weight: 600; } .bd-mrow select { min-height: 48px; border-radius: 12px; border: 2px solid var(--ws-line); background: var(--ws-surface); color: var(--ws-fg); font: 16px var(--ws-sans); padding: 0 8px; }
.bd-qfoot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.bd-qres { margin: 0; flex: 1 1 100%; font-weight: 800; font-size: 17px; } .bd-q.right .bd-qres { color: var(--ws-mint); } .bd-q.wrong .bd-qres { color: var(--ws-fg); }
.bd-who { display: inline-block; margin-left: 8px; font-size: 11.5px; font-weight: 700; color: var(--ws-dim); background: var(--ws-soft); border-radius: 999px; padding: 1px 8px; vertical-align: middle; }
.bd-ainote { flex: 1 1 100%; margin: 0; font-size: 13px; color: var(--ws-dim); }
.bd-hint { flex: 1 1 100%; margin: 0; padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, var(--ws-sun) 16%, var(--ws-surface)); font-size: 15px; }

/* ---- celebration (one short burst; no loop) ---- */
.bd-cheer { position: absolute; z-index: 12; width: 0; height: 0; pointer-events: none; }
.bd-cheer-word { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); white-space: nowrap; background: var(--ws-mint); color: #fff; font: 800 18px var(--ws-sans); padding: 6px 16px; border-radius: 999px; box-shadow: var(--ws-shadow); animation: bd-pop 1.25s ease-out both; }
html[data-theme="dark"] .bd-cheer-word { color: #06281d; }
@keyframes bd-pop { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.7); } 18% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } 30% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -90%) scale(1); } }
.bd-cheer i { position: absolute; left: 0; top: 0; width: 9px; height: 13px; border-radius: 2px; opacity: 0; animation: bd-fly 1s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes bd-fly { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 60px)) rotate(var(--rot)); } }

/* ---- the pad ---- */
.kind-pad { max-width: 860px; }
.pad-prompt { margin: 0; font-size: 18px; font-weight: 700; }
.pad-bar { display: flex; gap: 6px; flex-wrap: wrap; }
.pad-tool { width: 48px; height: 48px; border-radius: 14px; border: 2px solid var(--ws-line); background: var(--ws-surface); font-size: 20px; cursor: pointer; color: var(--ws-fg); }
.pad-tool.on { border-color: var(--ws-acc); background: var(--ws-acc-soft); }
.pad-surface { display: block; width: 100%; aspect-ratio: 10 / 7; background-color: #fff; border: 2px solid var(--ws-line); border-radius: 16px; touch-action: none; color: #16193a; cursor: crosshair; user-select: none; -webkit-user-select: none; }
.pad-surface.bg-grid { background-image: linear-gradient(#e3e6f7 1px, transparent 1px), linear-gradient(90deg, #e3e6f7 1px, transparent 1px); background-size: 5% 7.14%; }
.pad-surface.bg-lines { background-image: linear-gradient(#cfd4f0 1px, transparent 1px); background-size: 100% 10%; }
.pad-mk { fill: none; stroke: #e5484d; stroke-width: 6; stroke-linecap: round; }
.pad-glyph { font: 800 64px var(--ws-sans); text-anchor: middle; } .pad-glyph.g-tick { fill: #0f9f73; } .pad-glyph.g-cross { fill: #e5484d; }
.pad-note { font: 700 26px var(--ws-sans); fill: #b3261e; }
.pad-typed { width: 100%; border-radius: 14px; border: 2px solid var(--ws-line); background: var(--ws-surface); color: var(--ws-fg); font: 16px var(--ws-sans); padding: 10px; }
.pad-typed[hidden] { display: none; }
.pad-check { align-self: flex-start; }

/* ---- source pages ---- */
.kind-source { max-width: 900px; }
.src-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.src-name { font-weight: 700; color: var(--ws-mint); font-size: 14px; }
.src-nav { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.src-wrap { position: relative; border-radius: 14px; overflow: auto; border: 1px solid var(--ws-line); background: #fff; touch-action: pan-x pan-y pinch-zoom; }
.src-img { display: block; width: 100%; height: auto; }
.src-band { position: absolute; background: rgba(255, 196, 0, .32); border-radius: 10px; box-shadow: 0 0 0 6px rgba(255, 196, 0, .16); pointer-events: none; mix-blend-mode: multiply; }
.src-band.exact { border-radius: 3px; box-shadow: none; background: rgba(255, 214, 0, .45); }
.src-found { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.src-chip { background: var(--ws-soft); border-radius: 999px; padding: 4px 12px; font-size: 14px; font-weight: 600; }
.src-note { flex: 1 1 100%; margin: 0; font-size: 15px; }

/* ---- the engine's cards ---- */
.cd { max-width: 720px; margin: 0 auto; padding: 18px 16px 90px; display: grid; gap: 14px; }
.cd h1 { margin: 0; font-size: 26px; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; }
.cd-h2, .cd h2 { margin: 6px 0 0; font-size: 17px; font-weight: 800; }
.cd-sub { margin: 0; color: var(--ws-dim); font-size: 16px; }
.cd-streak { margin: 0; justify-self: start; padding: 6px 14px; border-radius: 999px; background: var(--ws-soft); font-weight: 700; font-size: 14px; color: var(--ws-dim); }
.cd-streak.on { background: color-mix(in srgb, var(--ws-sun) 26%, var(--ws-surface)); color: var(--ws-fg); }
.cd-ways, .cd-continue { display: grid; gap: 10px; }
.cd-way, .cd-course { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 12px 16px; border-radius: 22px; border: 2px solid transparent; text-align: left; height: auto; justify-content: flex-start; }
.cd-way.w1 { background: color-mix(in srgb, var(--ws-acc) 12%, var(--ws-surface)); } .cd-way.w2 { background: color-mix(in srgb, var(--ws-mint) 14%, var(--ws-surface)); } .cd-way.w3 { background: color-mix(in srgb, var(--ws-sun) 22%, var(--ws-surface)); }
.cd-way:hover, .cd-course:hover { border-color: var(--ws-acc); }
.cd-course { background: var(--ws-surface); border-color: var(--ws-line); }
.cd-emoji { font-size: 30px; line-height: 1; flex: 0 0 auto; }
.cd-ct { display: grid; gap: 2px; min-width: 0; } .cd-ct b { font-size: 18px; } .cd-ct small { font-size: 14px; font-weight: 500; color: var(--ws-dim); }
.cd-fine { font-size: 13px; color: var(--ws-dim); border-top: 1px solid var(--ws-line); padding-top: 12px; } .cd-fine p { margin: 0 0 8px; }
.cd-rows { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; margin: 0; padding: 16px; border-radius: 20px; background: var(--ws-surface); border: 1px solid var(--ws-line); }
.cd-rows dt { color: var(--ws-dim); font-size: 14px; font-weight: 700; } .cd-rows dd { margin: 0; font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.cd-acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cd-okd { margin: 0; font-weight: 800; color: var(--ws-mint); }
.cd-edit { display: grid; gap: 10px; padding: 14px; border-radius: 18px; background: var(--ws-soft); } .cd-edit[hidden] { display: none; }
.cd-edit label { display: grid; gap: 4px; font-size: 14px; font-weight: 700; } .cd-edit input, .cd-edit select { min-height: 48px; border-radius: 12px; border: 2px solid var(--ws-line); background: var(--ws-surface); color: var(--ws-fg); font: 16px var(--ws-sans); padding: 0 10px; }
.cd-session { display: grid; gap: 8px; }
.cd-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cd-step { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 18px; background: var(--ws-surface); border: 1px solid var(--ws-line); }
.cd-step.new { border-color: var(--ws-mint); border-width: 2px; } .cd-step.s-done { opacity: .8; } .cd-step.s-active { border-color: var(--ws-acc); border-width: 2px; }
.cd-num { flex: 0 0 auto; min-width: 38px; height: 30px; border-radius: 10px; background: var(--ws-soft); color: var(--ws-dim); font-weight: 800; font-size: 13px; display: grid; place-items: center; }
.cd-st { flex: 1 1 auto; min-width: 0; display: grid; gap: 4px; }
.cd-title { font: 700 16px var(--ws-sans); color: var(--ws-fg); background: none; border: 0; padding: 0; text-align: left; cursor: text; }
button.cd-title { cursor: pointer; min-height: 28px; }
.cd-rename { min-height: 44px; border-radius: 10px; border: 2px solid var(--ws-acc); background: var(--ws-surface); color: var(--ws-fg); font: 16px var(--ws-sans); padding: 0 8px; width: 100%; }
.cd-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 13px; color: var(--ws-dim); } .cd-meta .bd-cite { margin: 0; min-height: 22px; font-size: 12px; }
.cd-new { background: var(--ws-mint); color: #fff; border-radius: 999px; padding: 0 8px; font-weight: 800; font-size: 11.5px; } .cd-donechip { color: var(--ws-mint); font-weight: 800; }
.cd-rowacts { display: flex; gap: 4px; flex: 0 0 auto; }
.cd-rej { font-size: 14px; color: var(--ws-dim); } .cd-rej ul { margin: 6px 0 0; padding-left: 18px; }
.cd-chead { display: flex; align-items: center; gap: 14px; } .cd-chead .cd-ring { width: 64px; height: 64px; } .cd-chead .cd-ring b { font-size: 15px; }
.cd-priv { border-top: 1px solid var(--ws-line); padding-top: 10px; } .cd-priv summary { min-height: 44px; display: flex; align-items: center; font-weight: 800; cursor: pointer; }
.cd-sources { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; } .cd-sources li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .cd-sources li > span { flex: 1 1 140px; min-width: 0; overflow-wrap: anywhere; }

/* ---- slides and wide screens ---- */
.kind-slide { min-height: 100%; justify-content: center; } .bd-slidetitle { margin: 0 0 6px; font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
@media (min-width: 700px) {
  .bd-page { padding: 22px 22px 90px; gap: 14px; } .bd-prose { font-size: 18px; } .bd-math, .bd-steps .bd-tex { font-size: 23px; }
  .cd-ways { grid-template-columns: repeat(3, 1fr); } .cd-way { flex-direction: column; align-items: flex-start; min-height: 132px; } .cd-continue { grid-template-columns: repeat(2, 1fr); }
  .bd-opts { grid-template-columns: repeat(2, 1fr); }
  .kind-slide { max-width: 980px; display: grid; grid-template-columns: 1fr 1fr; align-content: center; gap: 16px; } .kind-slide .bd-slidetitle, .kind-slide .k-heading { grid-column: 1 / -1; }
}
@media (min-width: 1000px) { .bd-page { max-width: 820px; } }
@media (prefers-reduced-motion: reduce) {
  .bd-in, .bd-in .bd-line, .bd-cheer-word { animation: none; } .bd-in .bd-curve { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
  .bd-pointer { transition: none; } .bd-btn:not(:disabled):active { transform: none; }
}
@media print { .bd-block { break-inside: avoid; box-shadow: none; } .bd-scroll { overflow: visible; } .bd-pointer, .bd-qfoot .bd-btn, .bd-keys { display: none !important; } }