/* Reusable blocks: trace, filmstrip, exercises, "in general", code listings, definitions, help. */

/* ───────── Code listing (pseudocode in the book's plain style) ───────── */
.code{margin:1.2rem 0 1.4rem;padding:18px 22px;border-radius:18px;background:var(--paper-hi);box-shadow:0 0 0 1px var(--rule),0 10px 30px -22px rgba(43,45,47,.35);
  font-size:17px;line-height:1.75;overflow-x:auto;corner-shape:squircle}
@supports (corner-shape:squircle){ .code{border-radius:28px} }
.code.small{font-size:15.5px;padding:16px 18px;margin:0}
.cl{position:relative;padding-left:calc(var(--in,0) * 1.5em + 8px);padding-right:8px;margin:0 -8px;border-radius:7px;transition:background-color .3s,color .3s}
.cl b{font-family:var(--f-ui);font-weight:600;font-size:.94em}
.cl.on{background:var(--ink-soft);color:var(--ink)}

/* ───────── In general ───────── */
.general{max-width:40rem;margin:2.4rem 0;padding:20px 24px 8px;border-radius:20px;background:color-mix(in srgb,var(--ink) 5%,var(--paper-hi));corner-shape:squircle}
@supports (corner-shape:squircle){ .general{border-radius:30px} }
.g-h{font-family:var(--f-ui);font-weight:600;font-size:15px;color:var(--ink);margin-bottom:.35em}
.g-eq{font-size:20px;text-align:center;margin:1.1em 0}

/* ───────── Trace: algorithm on the left, a fresh example on the right ───────── */
.trace-intro{margin:6rem 0 1.4rem}
.trace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:22px;margin:0 0 5rem;padding:22px;border-radius:30px;outline:none;
  background:color-mix(in srgb,var(--paper-hi) 62%,transparent);box-shadow:0 0 0 1px var(--rule),0 24px 60px -40px rgba(43,45,47,.35);corner-shape:squircle}
.trace:focus-visible{box-shadow:0 0 0 2px var(--ink)}
.tr-left{display:flex;flex-direction:column;gap:14px;min-width:0}
.tr-code{margin:0;font-size:16px;line-height:1.85}
.tr-code .cl.on::before{content:"";position:absolute;left:-12px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--ink)}
.tr-general{padding:14px 18px 2px;border-radius:20px;background:color-mix(in srgb,var(--ink) 5%,var(--paper-hi));font-size:16px}
.tr-general .g-eq{font-size:18px;margin:.4em 0 .7em}
.tr-right{display:flex;flex-direction:column;min-width:0;border-radius:22px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--rule);padding:16px 16px 12px}
.tr-stage{flex:1;display:flex;align-items:center;justify-content:center;touch-action:pan-y;min-height:250px;cursor:pointer}
.tr-cap{font-size:16px;line-height:1.5;min-height:3em;margin:10px 4px 8px}
/* the values inside the current call, one labelled row each */
.wt-call{display:flex;align-items:baseline;gap:10px;margin:0 0 6px;font-size:17px}
.wt-call span{font-family:var(--f-ui);font-size:12.5px;font-weight:600;color:var(--graphite-2)}
.wr{display:grid;grid-template-columns:4.2em minmax(0,1fr) auto;align-items:center;gap:12px;padding:7px 12px;margin:0 -12px;border-radius:12px;transition:background-color .3s}
.wr + .wr{box-shadow:0 -1px 0 var(--rule)}
.wr-sym{font-size:16px;white-space:nowrap}
.wr-desc{font-family:var(--f-ui);font-size:13px;line-height:1.35;color:var(--graphite-2)}
.wr-val{font-size:17px;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.wr.c-vir .wr-val,.wr.c-vir .wr-sym{color:var(--viridian)} .wr.c-plum .wr-val,.wr.c-plum .wr-sym{color:var(--plum)} .wr.c-ink .wr-val,.wr.c-ink .wr-sym{color:var(--ink)}
.wr.is-new,.wr.is-changed{background:color-mix(in srgb,var(--hl-solid) 20%,transparent);box-shadow:none}
.wr.is-new + .wr,.wr.is-changed + .wr{box-shadow:none}
.wr-tag{display:inline-block;margin-left:8px;padding:0 7px;border-radius:999px;font-size:11px;font-weight:600;color:var(--hl-text);background:color-mix(in srgb,var(--hl-solid) 30%,transparent);vertical-align:1px}
.wv-dec{display:block;font-family:var(--f-ui);font-size:11.5px;color:var(--graphite-3);margin-top:1px}
.wv-tiles{display:inline-flex;gap:3px}
.wv-tiles b{width:24px;height:24px;display:grid;place-items:center;border-radius:6px;font-weight:400;font-size:14px;
  background:color-mix(in srgb,var(--c) 26%,var(--paper-hi));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 60%,transparent);color:color-mix(in srgb,var(--c) 70%,black)}
/* call tree drawn by the algorithm modules */
.tr-svg{width:100%;height:auto;overflow:visible}
.tr-edges line{stroke:var(--graphite-3);stroke-width:1.2;opacity:0;transition:opacity .4s var(--ease)}
.tr-edges .shown,.tr-slot.shown,.tr-node.shown{opacity:1}
.tr-slot{font-family:var(--f-ui);font-size:12px;font-weight:600;opacity:0;transition:opacity .4s}
.tr-node{opacity:0;transition:opacity .45s var(--ease)}
.tr-node rect{fill:var(--paper-hi);stroke:var(--rule);stroke-width:1.2;transition:stroke .3s,fill .3s,stroke-width .3s}
.tr-node.stack rect{stroke:color-mix(in srgb,var(--ink) 45%,transparent);stroke-dasharray:4 3}
.tr-node.fresh rect{fill:color-mix(in srgb,var(--hl-solid) 22%,var(--paper-hi));stroke:var(--hl-solid)}
.tr-node.act rect{stroke:var(--ink);stroke-width:2;fill:color-mix(in srgb,var(--ink) 7%,var(--paper-hi))}
.tr-node.act.fresh rect{fill:color-mix(in srgb,var(--hl-solid) 18%,var(--paper-hi))}
.tr-in{font-size:15px;fill:var(--graphite);font-variant-numeric:tabular-nums}
.tr-out{font-family:var(--f-ui);font-size:12.5px;font-weight:600;fill:var(--graphite)}
.tr-ord{font-family:var(--f-ui);font-size:11px;fill:var(--graphite-3)}
.tr-node.act .tr-ord{fill:var(--ink);font-weight:600}
.tr-svg.ms .tr-node rect{fill:transparent}
.tr-svg.ms .tr-node.done rect{fill:var(--paper-hi)}
.tr-tile{transition:transform .6s var(--spring)}
.tr-tile text{font-size:14px;font-variant-numeric:tabular-nums}
.tr-fly{font-family:var(--f-ui);font-size:15px;font-weight:700;transition:transform .9s var(--spring),opacity .35s ease .85s;paint-order:stroke;stroke:var(--paper);stroke-width:4px}
.tr-fly.go{opacity:0}
/* timeline + Back / Next */
.tr-scrub{display:flex;align-items:center;gap:3px;margin:0 2px;padding:4px 0;cursor:pointer;touch-action:none}
.tr-scrub.dragging{cursor:grabbing}
.tick{flex:1;height:14px;position:relative;pointer-events:none}
.tick i{position:absolute;left:1px;right:1px;top:6px;height:2px;border-radius:1px;background:var(--graphite-3);transition:background .25s,transform .25s var(--ease)}
.tick.seen i{background:color-mix(in srgb,var(--ink) 55%,var(--graphite-3))}
.tick.on i{background:var(--ink);transform:scaleY(2)}
.tr-ctl{display:flex;align-items:center;gap:8px;margin:10px 2px 0;flex-wrap:wrap;font-family:var(--f-ui)}
.tr-ctl .btn{padding:6px 16px;font-size:14.5px}
.tr-count{margin-left:4px;font-size:12.5px;color:var(--graphite-2);font-variant-numeric:tabular-nums;white-space:nowrap}
/* fixed widths, so changing labels (Start / Next step / Finished, 9 of 17 / 10 of 17) never reflow the row */
.tr-next{min-width:7.4em}
.tr-back{min-width:4.6em}
.tr-count{min-width:5.2em}
.tr-ask{margin-left:auto;font-size:13.5px}
@media (max-width:960px){ .trace{grid-template-columns:1fr;padding:14px} .tr-right{order:-1} }

/* fib1: a repeated call (its answer was already computed elsewhere) is ochre */
.tr-svg.fib .tr-node.repeat rect{stroke:var(--ochre);fill:color-mix(in srgb,var(--ochre) 14%,var(--paper-hi))}
.tr-svg.fib .tr-node.repeat.act rect{stroke:var(--ink)}
.tr-svg.fib .tr-in{font-size:13.5px}
/* fib2: the array; the cell being filled is blue ink, the two it adds are highlighted */
.f2-cell rect{fill:transparent;stroke:var(--rule);stroke-width:1.2;transition:fill .3s,stroke .3s}
.f2-cell.filled rect{fill:var(--paper-hi)}
.f2-cell.src rect{fill:color-mix(in srgb,var(--hl-solid) 22%,var(--paper-hi));stroke:var(--hl-solid)}
.f2-cell.act rect,.f2-cell.ans rect{stroke:var(--ink);stroke-width:2;fill:color-mix(in srgb,var(--ink) 7%,var(--paper-hi))}
.f2-cell.act .tr-in,.f2-cell.ans .tr-in{fill:var(--ink)}
.f2-idx,.f2-lab{font-family:var(--f-ui);font-size:11px;fill:var(--graphite-3)}

/* ───────── Filmstrip: every step of a figure side by side ───────── */
.film-block{margin:4rem 0 0;max-width:66rem}
.film{display:flex;gap:12px;overflow-x:auto;padding:6px 4px 14px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.frame{flex:0 0 226px;scroll-snap-align:start;border:0;padding:10px 10px 12px;border-radius:20px;background:color-mix(in srgb,var(--paper-hi) 65%,transparent);
  box-shadow:inset 0 0 0 1px var(--rule);cursor:zoom-in;text-align:left;font:inherit;color:inherit;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .25s;corner-shape:squircle}
.frame:hover{transform:translateY(-3px);background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--rule),0 16px 30px -20px rgba(43,45,47,.45)}
.frame.on{box-shadow:inset 0 0 0 1.5px var(--ink)}
.frame-art{height:200px;overflow:hidden;pointer-events:none}
.frame-art > .stage{zoom:.42;width:480px}
.frame-art *,.fd-art *{transition:none!important;animation:none!important}
/* Thumbnails show the structure; captions carry essential values. Fine tree
   labels belong in the full-size view, not as unreadable miniature text. */
.frame-art .ns-caption,.frame-art .ft-foot,.frame-art .ft-lab,.frame-art .ft-n text,.frame-art .area-foot,.frame-art .area .op,.frame-art .area .side,.frame-art .area .pn{display:none}
.frame-art .ft-v{font-size:25px}
.frame-art .fibt-svg,.frame-art .area svg{max-width:none}
.frame-art .ns-svg .ns-small{font-size:22px}
.frame-art .merge-scrub .tile{font-size:0!important}
.frame-art .merge-scrub .m-ann{display:none}
.film-heading{margin-bottom:.3em}
.film-block > .hint{margin-bottom:.7rem}
.frame-cap{display:flex;gap:8px;margin-top:8px;font-family:var(--f-ui);font-size:12.5px;line-height:1.35;color:var(--graphite-2)}
.frame-cap b{color:var(--ink);font-weight:600}
.film-dialog{border:0;padding:24px 28px 20px;border-radius:30px;max-width:min(720px,calc(100vw - 24px));width:100%;max-height:calc(100dvh - 24px);overflow:auto;background:var(--paper-hi);color:var(--graphite);
  box-shadow:0 40px 90px -30px rgba(43,45,47,.5);corner-shape:squircle}
.film-dialog[open]{animation:dlgIn .35s var(--ease)}
.film-dialog::backdrop{background:rgba(237,235,228,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
@keyframes dlgIn{from{opacity:0;transform:scale(.96) translateY(8px)}}
.fd-cap{font-size:20px;text-align:center;margin:12px 0 14px}
.fd-nav{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.fd-count{font-family:var(--f-ui);font-size:13px;color:var(--graphite-2);min-width:4.5em;text-align:center}
.fd-close{margin-left:12px}

/* ───────── Exercises (collapsed by default; only the number shows until opened) ───────── */
.practice{max-width:54rem;margin:0 0 6rem;display:grid;gap:12px}
.exercise{min-width:0;border:1px solid var(--rule);border-radius:10px;background:rgba(248,247,242,.5);transition:border-color .3s,background-color .3s;corner-shape:squircle}
.exercise[open]{background:var(--paper-hi);border-color:color-mix(in srgb,var(--ink) 28%,var(--rule))}
.exercise summary{list-style:none;display:flex;align-items:center;gap:14px;padding:14px 20px;cursor:pointer;border-radius:10px}
@supports (corner-shape:squircle){ .exercise,.exercise summary{border-radius:18px} }
.exercise summary::-webkit-details-marker{display:none}
.ex-tag{font-family:var(--f-ui);font-weight:600;font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.ex-meta{margin-left:auto;display:flex;align-items:center;gap:12px;min-width:0;font-family:var(--f-ui);font-size:14px;color:var(--graphite-2);white-space:nowrap}
.ex-ticks{display:flex;gap:3px;min-width:0;flex-shrink:1}
.ex-ticks i{width:10px;min-width:1px;flex:0 1 10px;height:1.5px;background:var(--graphite-3);transition:background .3s}
.ex-ticks i.on{background:var(--viridian)}
.ex-chev{width:8px;height:8px;flex-shrink:0;border-right:1.5px solid var(--graphite-2);border-bottom:1.5px solid var(--graphite-2);transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--ease)}
.exercise[open] .ex-chev{transform:translateY(2px) rotate(-135deg)}
.exercise::details-content{block-size:0;overflow:clip;transition:block-size .45s var(--ease),content-visibility .45s allow-discrete}
.exercise[open]::details-content{block-size:auto}
.ex-body{padding:2px 22px 22px}
.ex-title{font-size:21px;letter-spacing:-.01em;margin:.3em 0 .25em}
.ex-intro{color:var(--graphite-2);font-size:17px}
.ex-grid.has-visual{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:26px;align-items:start}
.ex-steps{list-style:none;margin:0;padding:0;counter-reset:s}
.ex-step{counter-increment:s;position:relative;padding:14px 0 4px 2.2rem;border-top:1px solid var(--rule)}
.ex-step::before{content:counter(s);position:absolute;left:2px;top:15px;font-family:var(--f-ui);font-size:14px;color:var(--graphite-3);font-variant-numeric:tabular-nums}
.ex-step.is-done::before{content:"✓";color:var(--viridian)}
.ex-step.is-current{animation:stepIn .4s var(--ease)}
.ex-step.is-done .ex-ask{color:var(--graphite-2)}
@keyframes stepIn{from{opacity:0;transform:translateY(6px)}}
.ex-ask{margin-bottom:8px}
.ex-act{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px}
.ex-field{display:inline-flex;align-items:baseline;gap:8px}
.ex-in{font:inherit;font-size:20px;border:0;border-bottom:1.5px solid var(--graphite-3);background:transparent;padding:2px 4px;text-align:center;color:var(--ink);border-radius:0;outline:none;transition:border-color .2s,color .2s;max-width:9ch}
.ex-in:focus{border-color:var(--ink)}
.ex-in.good{border-color:var(--viridian);color:var(--viridian)}
.ex-in.bad{border-color:var(--red);color:var(--red)}
.ex-choice.good{border-color:var(--viridian);color:var(--viridian);background:color-mix(in srgb,var(--viridian) 10%,transparent)}
.ex-choice.bad{border-color:var(--red);color:var(--red);opacity:.65}
.ex-choice:disabled{cursor:default}
.ex-fb{font-size:16px;margin:10px 0 6px}
.ex-fb:empty{display:none}
.ex-fb.good{color:var(--viridian)}
.ex-fb.bad{color:var(--red)}
.fb-acts{display:inline-flex;gap:14px;margin-left:10px;font-family:var(--f-ui);font-size:14.5px}
.ex-done{border-top:1px solid var(--rule);padding-top:16px}
.ex-done .btn{margin:2px 8px 0 0}
/* exercise visuals (js/exercises/visuals.js) */
.ex-visual{position:sticky;top:24px;padding:14px;border-radius:20px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--rule);font-family:var(--f-ui);font-size:13px;color:var(--graphite-2)}
.xv-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.xv-lab{width:12px;font-family:var(--f-text);font-size:16px;color:var(--graphite-2)}
.xbits{display:flex;gap:2px}
.xbits b{width:21px;height:26px;display:grid;place-items:center;border-radius:6px;font-family:var(--f-text);font-weight:400;font-size:15px;color:var(--graphite);
  background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--rule);transition:background-color .4s,color .4s,box-shadow .4s,margin .5s var(--spring)}
.xbits.split b.h{background:color-mix(in srgb,var(--viridian) 18%,var(--paper-hi));color:var(--viridian-text);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--viridian) 40%,transparent)}
.xbits.split b.l{background:color-mix(in srgb,var(--plum) 16%,var(--paper-hi));color:var(--plum-text);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--plum) 38%,transparent)}
.xbits.split b.l.first{margin-left:8px}
.xv-rect{display:block;width:100%;margin:12px 0 6px}
.xv-rect .q{fill-opacity:0;transition:fill-opacity .5s}
.xv-rect .tl{fill:var(--viridian)} .xv-rect .br{fill:var(--plum)} .xv-rect .tr,.xv-rect .bl{fill:var(--ochre)}
.xv-rect .q-out{fill:none;stroke:var(--graphite-3);stroke-width:1.2;transition:stroke .4s,stroke-width .4s}
.xv-rect .qt{font-family:var(--f-text);font-size:15px;text-anchor:middle;opacity:0;transition:opacity .4s}
.xv-rect .qt.tl{fill:var(--viridian-text)} .xv-rect .qt.br{fill:var(--plum-text)} .xv-rect .qt.mid{fill:var(--hl-text)}
.xv-rect.c-corners .q.tl,.xv-rect.c-corners .q.br{fill-opacity:.22} .xv-rect.c-corners .qt.tl,.xv-rect.c-corners .qt.br{opacity:1}
.xv-rect.c-whole .q-out{stroke:var(--ink);stroke-width:2.2}
.xv-rect.c-middle .q.tr,.xv-rect.c-middle .q.bl{fill-opacity:.3} .xv-rect.c-middle .qt.mid{opacity:1}
.xv-total{margin:6px 0 0;font-family:var(--f-text);font-size:15px;line-height:1.45;color:var(--graphite);min-height:1.5em}
.xv-total b{font-weight:600}
.xv-algs{display:grid;gap:8px}
.xv-alg{margin:0;display:flex;flex-direction:column;gap:4px;padding:8px 8px 6px;border-radius:14px;transition:opacity .4s,background-color .4s,box-shadow .4s}
.xv-alg svg{width:100%;height:auto}
.mt-e line{stroke:var(--graphite-3);stroke-width:.6}
.xv-alg figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:13px}
.xv-alg figcaption b{font-size:15px;color:var(--graphite)}
.xv-rt{font-family:var(--f-text);font-size:15px;color:var(--ink)}
.xv-alg.dim{opacity:.32}
.xv-alg.pick{background:var(--paper-hi);box-shadow:inset 0 0 0 1.5px var(--ink)}
.xv-note{margin:8px 0 0;font-size:12.5px;line-height:1.45;min-height:2.9em}
.xv-svg{display:block;width:100%}
.xv-bars{opacity:0;transition:opacity .5s}
.xv-bars.on{opacity:1}
.xv-bars rect{opacity:.45} .xv-bars rect.top{opacity:1}
@media (max-width:860px), (hover:none) and (pointer:coarse){
  .ex-meta .ex-mt{display:none}
  .exercise summary{padding:12px 16px}
  .ex-body{padding:2px 16px 18px}
}
@media (max-width:760px){ .ex-grid.has-visual{grid-template-columns:1fr} .ex-visual{position:static;order:-1;margin-bottom:8px} }

/* ───────── Definitions on hover ───────── */
.defcard{position:fixed;left:0;top:0;z-index:60;width:min(320px,calc(100vw - 24px));padding:14px 16px 12px;border-radius:18px;pointer-events:none;
  background:color-mix(in srgb,var(--paper-hi) 82%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:0 0 0 1px var(--rule),0 18px 40px -18px rgba(43,45,47,.4);opacity:0;transform:translateY(4px) scale(.98);transform-origin:var(--arrow,50%) 100%;
  transition:opacity .2s var(--ease),transform .25s var(--ease);corner-shape:squircle}
.defcard.below{transform-origin:var(--arrow,50%) 0}
.defcard.on{opacity:1;transform:none}
.dc-term{font-family:var(--f-ui);font-weight:600;font-size:13.5px;color:var(--ink);margin:0 0 4px}
.dc-text{font-size:15.5px;line-height:1.5;margin:0}

/* ───────── Copy a question for help ───────── */
.askbar,.askchip{position:fixed;left:0;top:0;z-index:70;opacity:0;pointer-events:none;transform:translateY(4px) scale(.98);transition:opacity .2s var(--ease),transform .25s var(--ease)}
.askbar.on,.askchip.on{opacity:1;pointer-events:auto;transform:none}
.askbar{width:min(340px,calc(100vw - 24px));padding:14px 16px 12px;border-radius:20px;font-family:var(--f-ui);
  background:color-mix(in srgb,var(--paper-hi) 86%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:0 0 0 1px var(--rule),0 22px 50px -22px rgba(43,45,47,.45);corner-shape:squircle}
.ab-h{display:flex;align-items:center;gap:8px;font-size:14px;margin:0}
.ab-ok{width:16px;height:16px;border-radius:50%;background:var(--viridian);position:relative;flex:none}
.ab-ok::after{content:"";position:absolute;left:5px;top:3px;width:4px;height:7px;border:solid var(--paper-hi);border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}
.askbar.fail .ab-ok{background:var(--red)}
.askbar.fail .ab-ok::after{display:none}
.ab-peek{margin-top:10px;font-size:12.5px;color:var(--graphite-2)}
.ab-peek summary{cursor:pointer;list-style:none}
.ab-peek summary::-webkit-details-marker{display:none}
.ab-peek summary::before{content:"› ";display:inline-block;transition:transform .2s}
.ab-peek[open] summary::before{transform:rotate(90deg)}
.ab-pre{white-space:pre-wrap;max-height:220px;overflow:auto;margin:8px 0 0;padding:10px 12px;border-radius:12px;background:var(--paper);font:12px/1.5 ui-monospace,"SF Mono",Menlo,monospace;color:var(--graphite)}
.askchip{border:0;padding:6px 14px;border-radius:999px;font-family:var(--f-ui);font-size:13.5px;font-weight:600;color:var(--paper-hi);background:var(--ink);cursor:pointer;box-shadow:0 10px 24px -12px rgba(45,75,142,.8)}
/* chapter 0 exercise visuals */
.xv-cap{margin:0 0 6px;font-family:var(--f-text);font-size:14px;color:var(--graphite-2)}
.xv-t{font-family:var(--f-ui);font-size:9.5px;fill:var(--graphite-3)}
.xv-one{stroke:var(--graphite-3);stroke-dasharray:2 3}
.xv-curve{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round;opacity:0;transition:opacity .6s var(--ease)}
.xv-ratio.on .xv-curve{opacity:1}
.xv-geo rect{opacity:.5;transition:opacity .4s}
.xv-geo.decide rect.big{opacity:1;stroke:var(--ink);stroke-width:1.2}
.xv-fib circle{fill:var(--graphite)}
.xv-bound,.xv-bl{opacity:0;transition:opacity .5s var(--ease)}
.xv-bound{stroke:var(--ink);stroke-width:1.4;stroke-dasharray:4 3}
.xv-bound.on,.xv-bl.on{opacity:1}
.xv-bl{fill:var(--ink);font-size:10px}
.xv-mats{display:flex;flex-wrap:wrap;gap:10px 14px}
.xv-mat{display:flex;flex-direction:column;gap:3px;transition:opacity .5s var(--ease)}
.xv-mat.sq,.xv-mat.last{opacity:0}
.xv-mat.on{opacity:1}
.xv-mlab{font-family:var(--f-text);font-size:13px;color:var(--graphite-2)}
.xv-grid{display:grid;grid-template-columns:repeat(2,auto);gap:2px 10px;padding:3px 8px;border-left:1.5px solid var(--graphite-3);border-right:1.5px solid var(--graphite-3);border-radius:4px;justify-self:start}
.xv-grid b{font-family:var(--f-text);font-weight:400;font-size:15px;color:var(--graphite);text-align:right;font-variant-numeric:tabular-nums}
.xv-grid b.tr{color:var(--ink)}
.xv-mat.last:not(.filled) .xv-grid b{color:transparent;background:var(--paper-lo);border-radius:3px}
.xv-mat.last.filled .xv-grid b.tr{background:var(--hl);border-radius:3px}

/* Compact worksheets: related answers share a table and one check action. */
.ex-tabular{display:block}
.ex-table{border-collapse:collapse;width:100%;max-width:360px;margin:12px 0 16px;font-size:17px}
.ex-table th,.ex-table td{padding:5px 10px;border-bottom:1px solid var(--rule);text-align:center;font-weight:400}
.ex-table thead th{font:13px var(--f-ui);color:var(--graphite-2);padding-bottom:8px}
.ex-table tbody th{text-align:left;width:32%;font-variant-numeric:tabular-nums}
.ex-table .ex-field{display:block;margin:0}
.ex-table .ex-field > span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.ex-table .ex-in{font-size:18px;max-width:6ch;padding:2px 3px;background:transparent}
.ex-table select.ex-in{font:15px var(--f-ui);max-width:none;width:100%;min-width:85px;text-align:left;border:1px solid var(--rule);border-radius:6px;padding:5px 7px;color:var(--graphite-2)}