/* FloralPro — the flower, whorl by whorl. A teaching app.
   Loaded AFTER labg-base.css, the stylesheet shared by the whole LABG Suite:
   neutrals, type and spacing scales, focus ring, top bar, block bar, buttons,
   messages, dialogs and print come from there. This file keeps only the
   identity of FloralPro and what is its own. The dark theme follows the
   system preference unless the user picks one explicitly
   (<html data-theme="light|dark">). Palette: bougainvillea, marigold and leaf.
   Every whorl keeps the same colour everywhere in the app (formula, diagram,
   3D flower, section, atlas): --wK calyx, --wC corolla, --wP perigon,
   --wA androecium, --wG gynoecium, --wE epicalyx.
   In dark, --primary-dark is the LIGHTER tone (text and hover), as in the
   rest of the suite. */

:root {
  --primary-rgb: 140, 47, 111;
  --primary: #8c2f6f;
  --primary-dark: #6f2358;
  --accent-rgb: 212, 128, 26;
  --accent: #c8741a;
  --accent-soft: rgba(212, 128, 26, 0.13);
  --gold: #e7b21f;
  --leaf-rgb: 63, 127, 58;
  --leaf: #3f7f3a;
  --sky: #2f7fb4;
  --wK: #4f8f3a; --wC: #d6457a; --wP: #9a5cc6; --wA: #c98c0e; --wG: #2a7fb8; --wE: #7c8f3a;
  --wK-soft: rgba(79, 143, 58, .14); --wC-soft: rgba(214, 69, 122, .13); --wP-soft: rgba(154, 92, 198, .14);
  --wA-soft: rgba(224, 162, 27, .18); --wG-soft: rgba(42, 127, 184, .14); --wE-soft: rgba(124, 143, 58, .15);
  /* the same whorl colours, darkened ONLY for text in light (formulas, the
     letter of each card): at least 4.5:1 on the page and on the cards. The
     drawings keep --wX. In dark the text uses --wX itself. */
  --wK-text: #3f722e; --wC-text: #b43a66; --wP-text: #844faa; --wA-text: #895f0a; --wG-text: #236b9b; --wE-text: #5e6d2c;
  --serif: ui-serif, serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary-rgb: 229, 140, 200; --primary: #e58cc8; --primary-dark: #f2b6de; --primary-soft: rgba(229, 140, 200, 0.14);
    --accent-rgb: 242, 166, 74; --accent: #f2a64a; --accent-soft: rgba(242, 166, 74, 0.15);
    --gold: #f2c94e; --leaf-rgb: 124, 199, 117; --leaf: #7cc775; --sky: #74b8ea;
    --wK: #86c96b; --wC: #f07fa8; --wP: #c39bea; --wA: #f2c14e; --wG: #6fb6e8; --wE: #b3c46a;
    --wK-soft: rgba(134, 201, 107, .16); --wC-soft: rgba(240, 127, 168, .16); --wP-soft: rgba(195, 155, 234, .16);
    --wA-soft: rgba(242, 193, 78, .16); --wG-soft: rgba(111, 182, 232, .16); --wE-soft: rgba(179, 196, 106, .16);
    --wK-text: var(--wK); --wC-text: var(--wC); --wP-text: var(--wP); --wA-text: var(--wA); --wG-text: var(--wG); --wE-text: var(--wE);
  }
}
:root[data-theme="dark"] {
  --primary-rgb: 229, 140, 200; --primary: #e58cc8; --primary-dark: #f2b6de; --primary-soft: rgba(229, 140, 200, 0.14);
  --accent-rgb: 242, 166, 74; --accent: #f2a64a; --accent-soft: rgba(242, 166, 74, 0.15);
  --gold: #f2c94e; --leaf-rgb: 124, 199, 117; --leaf: #7cc775; --sky: #74b8ea;
  --wK: #86c96b; --wC: #f07fa8; --wP: #c39bea; --wA: #f2c14e; --wG: #6fb6e8; --wE: #b3c46a;
  --wK-soft: rgba(134, 201, 107, .16); --wC-soft: rgba(240, 127, 168, .16); --wP-soft: rgba(195, 155, 234, .16);
  --wA-soft: rgba(242, 193, 78, .16); --wG-soft: rgba(111, 182, 232, .16); --wE-soft: rgba(179, 196, 106, .16);
  --wK-text: var(--wK); --wC-text: var(--wC); --wP-text: var(--wP); --wA-text: var(--wA); --wG-text: var(--wG); --wE-text: var(--wE);
}

/* ---------- language: both texts live in the page, one is hidden ---------- */
html[lang="es"] [data-l="en"], html[lang="en"] [data-l="es"] { display: none !important; }

body { transition: background-color .25s, color .25s; }
main { max-width: 1200px; margin: 0 auto; padding: 0 20px 80px; }
main:focus, main:focus-visible { outline: none; box-shadow: none; }
@media (max-width: 640px) { main { padding: 0 14px 60px; } }
sub, sup { line-height: 0; }
i.sci, .sci { font-style: italic; }

/* ---------- Top bar: only what is FloralPro's own (the convention switch
   adds a fifth tool, so on a phone the tools may go to a second line) ---------- */
@media (max-width: 480px) {
  .topbar-row { flex-wrap: wrap; gap: 4px 8px; }
  .top-tools { display: contents; }
  .top-tools > .suite-link { margin-left: auto; }
  .top-tools > .conv-seg { order: 10; margin-left: auto; }
  .brand { font-size: 1rem; gap: 6px; }
  .brand svg { width: 26px; height: 26px; }
}

/* ---------- Panels ---------- */
.step-panel { display: none; animation: fadein .25s ease; }
.step-panel.active { display: block; }
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- Hero (Block 1) ---------- */
.hero {
  position: relative; overflow: hidden; border-radius: 24px; margin: 22px 0 26px;
  background:
    radial-gradient(1000px 520px at 6% -14%, rgba(var(--primary-rgb), 0.18), transparent 60%),
    radial-gradient(900px 440px at 98% 2%, rgba(var(--accent-rgb), 0.16), transparent 60%),
    radial-gradient(700px 340px at 55% 118%, rgba(var(--leaf-rgb), 0.16), transparent 60%),
    linear-gradient(180deg, var(--card-bg), var(--bg-soft));
  border: 1px solid var(--border); box-shadow: var(--shadow);
}
.hero-inner { display: grid; grid-template-columns: 1.02fr 1fr; gap: 20px; align-items: center; padding: 42px 44px 34px; }
@media (max-width: 920px) { .hero-inner { grid-template-columns: 1fr; padding: 26px 18px; } }
.hero h1 { font-size: 2.9rem; line-height: 1.06; margin: 0 0 14px; letter-spacing: -1.3px; font-weight: 800; }
@media (max-width: 640px) { .hero h1 { font-size: 2.05rem; } }
.hero h1 .accent { color: var(--primary-text); }
.hero h1 .gold { color: var(--accent-text); }
.hero .lead { font-size: 1.08rem; color: var(--text-muted); margin: 0 0 22px; max-width: 600px; }
.hero .lead b { color: var(--text); }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--primary-text); margin-bottom: 14px; }
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--accent); border-radius: 2px; }
.badge-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.badge { font-size: 0.74rem; padding: 4px 11px; border-radius: 999px; background: var(--card-bg); border: 1px solid var(--border); color: var(--text-muted); }
.badge.ok::before { content: "✓ "; color: var(--success); }
.hero-stage { position: relative; }
.hero-stage .f3d { width: 100%; height: auto; display: block; }
.hero-caption { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); font-size: .74rem; color: var(--text-muted); background: color-mix(in srgb, var(--card-bg) 80%, transparent); padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); white-space: nowrap; }

/* Section headings */
.section-title { font-size: 1.5rem; letter-spacing: -0.5px; margin: 42px 0 6px; }
.section-sub { color: var(--text-muted); margin: 0 0 18px; max-width: 860px; }

/* ---------- Cards ---------- */
.card { padding: 18px 20px; }
.hint { font-size: .86rem; color: var(--text-muted); }
.muted { color: var(--text-muted); }

/* ---------- Floral formula ---------- */
.ff { font-family: var(--serif); font-size: 1.5rem; letter-spacing: .01em; white-space: normal; line-height: 1.9; }
.ff .ff-o { display: inline-block; padding: 0 .08em; border-radius: 6px; transition: background .15s, color .15s; cursor: default; }
.ff-classic sub { font-size: .66em; vertical-align: -0.34em; position: relative; }
.ff-prenner .ff-n { font-size: .9em; }
.ff-prenner sup, .ff-classic sup { font-size: .6em; vertical-align: .6em; }
.ff-pos { display: inline-block; line-height: 1.05; }
.ff-pos.ff-low { border-bottom: 1.6px solid currentColor; padding-bottom: 1px; }
.ff-pos.ff-over { border-top: 1.6px solid currentColor; padding-top: 1px; }
.ff-pos.ff-mid { background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat; }
.ff-u { text-decoration: underline; text-decoration-thickness: 1.6px; text-underline-offset: 3px; }
.ff-adn { position: relative; display: inline-block; padding: .38em .05em 0; }
.ff-adn::before { content: ''; position: absolute; left: .45em; right: .45em; top: .12em; height: .5em; border: 1.6px solid currentColor; border-bottom: 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0; opacity: .8; }
.ff-br { color: var(--text-muted); font-weight: 400; padding: 0 .02em; }
.ff-color .ff-o[data-org="K"] { color: var(--wK-text); }
.ff-color .ff-o[data-org="C"] { color: var(--wC-text); }
.ff-color .ff-o[data-org="P"] { color: var(--wP-text); }
.ff-color .ff-o[data-org="A"] { color: var(--wA-text); }
.ff-color .ff-o[data-org="G"], .ff-color .ff-o[data-org="V"] { color: var(--wG-text); }
.ff-color .ff-o[data-org="E"] { color: var(--wE-text); }
.ff .ff-o.hl { background: var(--primary-soft); }
.ff .ff-o[data-org="K"].hl { background: var(--wK-soft); }
.ff .ff-o[data-org="C"].hl { background: var(--wC-soft); }
.ff .ff-o[data-org="P"].hl { background: var(--wP-soft); }
.ff .ff-o[data-org="A"].hl { background: var(--wA-soft); }
.ff .ff-o[data-org="G"].hl, .ff .ff-o[data-org="V"].hl { background: var(--wG-soft); }
.ff .ff-o[data-org="E"].hl { background: var(--wE-soft); }
.ff-text { font-family: var(--mono); font-size: .8rem; color: var(--text-muted); word-break: break-word; }

/* ---------- Floral diagram ---------- */
svg.fdiagram { width: 100%; height: auto; display: block; overflow: visible; }
svg.fdiagram .dg-o, svg.fdiagram .dg-ring, svg.fdiagram .dg-fuse, svg.fdiagram .dg-adn { transition: opacity .18s; }
svg.fdiagram.has-hl .dg-o, svg.fdiagram.has-hl .dg-fuse, svg.fdiagram.has-hl .dg-adn, svg.fdiagram.has-hl .dg-plane { opacity: .2; }
svg.fdiagram.has-hl .dg-o.hl, svg.fdiagram.has-hl .dg-fuse.hl { opacity: 1; }
:root[data-theme="dark"] svg.fdiagram.on-card path[stroke="#2b2b2b"] { stroke: #d8cbd3; }

/* ---------- 3D flower ---------- */
svg.f3d { width: 100%; height: auto; display: block; touch-action: none; cursor: grab; user-select: none; }
svg.f3d:active { cursor: grabbing; }
svg.f3d .p3 { transition: opacity .18s; }
svg.f3d.has-hl .p3 { opacity: .16; }
svg.f3d.has-hl .p3.hl { opacity: 1; }
svg.f3d .lbl3 { font: 600 11px system-ui, sans-serif; fill: var(--text-muted); }
svg.f3d .lbl3 tspan.k { font-weight: 800; }

/* ---------- Longitudinal section ---------- */
svg.fsection { width: 100%; height: auto; display: block; }
svg.fsection .sc-o { transition: opacity .18s; }
svg.fsection.has-hl .sc-o { opacity: .18; }
svg.fsection.has-hl .sc-o.hl { opacity: 1; }
svg.fsection .sc-lbl { font: 500 5.4px system-ui, sans-serif; fill: var(--text-muted); }

/* ---------- The three languages of the flower (home demo) ---------- */
.trio { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px 18px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.chip { font: inherit; font-size: .8rem; border: 1px solid var(--border-strong); background: var(--bg-soft); color: var(--text); padding: 5px 11px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all .15s; }
.chip:hover { border-color: var(--primary); }
.chip.on { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.chip i { font-style: italic; }
.trio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1080px) { .trio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .trio-grid { grid-template-columns: 1fr; } }
.pane { border: 1px solid var(--border); border-radius: 12px; background: var(--bg-soft); overflow: hidden; position: relative; }
.pane-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--card-bg) 70%, transparent); }
.pane-h .pane-t { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-right: auto; }
.pane-b { padding: 10px 12px; }
.pane .fdiagram { max-width: 380px; margin: 0 auto; }
.pane-b { display: flex; align-items: center; justify-content: center; min-height: 300px; }
.pane-b > div { width: 100%; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .duo { grid-template-columns: 1fr; } }
.formula-box { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; margin-top: 12px; }
.formula-box .ff { display: block; text-align: center; }
.formula-box .ff-text { text-align: center; margin-top: 2px; }
.formula-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; font-size: .78rem; color: var(--text-muted); margin-top: 6px; }
.wl { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.wl:hover, .wl.hl { background: var(--bg-soft); color: var(--text); }
.wl .sw { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.desc-box { font-size: .9rem; margin-top: 12px; }
.desc-box p { margin: 0 0 6px; padding-left: 12px; border-left: 3px solid var(--border); }
.desc-box p[data-org="K"] { border-left-color: var(--wK); }
.desc-box p[data-org="C"] { border-left-color: var(--wC); }
.desc-box p[data-org="P"] { border-left-color: var(--wP); }
.desc-box p[data-org="A"] { border-left-color: var(--wA); }
.desc-box p[data-org="G"] { border-left-color: var(--wG); }
.desc-box p[data-org="E"] { border-left-color: var(--wE); }
.desc-box p.hl { background: var(--bg-soft); border-radius: 0 8px 8px 0; }
dfn { font-style: normal; border-bottom: 1px dotted var(--text-muted); cursor: help; }
.sp-note { font-size: .88rem; color: var(--text-muted); margin: 0 0 10px; }
.sp-note b { color: var(--text); }
.range { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--text-muted); }
.range input[type=range] { width: 96px; accent-color: var(--primary); }
.tgl { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--text-muted); cursor: pointer; }
.tgl input { accent-color: var(--primary); }
select.sel { font: inherit; font-size: .8rem; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--card-bg); color: var(--text); }

/* ---------- Whorl cards ---------- */
.whorl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.whorl-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px 14px; position: relative; overflow: hidden; }
.whorl-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--wc, var(--primary)); }
.whorl-card .wc-art { height: 104px; display: flex; align-items: center; justify-content: center; }
.whorl-card .wc-art svg { height: 100%; width: auto; max-width: 100%; }
.whorl-card h3 { margin: 6px 0 2px; font-size: 1rem; display: flex; align-items: baseline; gap: 8px; }
.whorl-card h3 .let { font-family: var(--serif); font-size: 1.2rem; color: var(--wct, var(--wc)); font-weight: 700; }
.whorl-card p { margin: 0; font-size: .84rem; color: var(--text-muted); }
.whorl-card .wc-terms { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px; }
.whorl-card .wc-terms > span { display: contents; }
.whorl-card .wc-terms > span > span { font-size: .7rem; padding: 1px 7px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--border); color: var(--text-muted); }

/* ---------- Feature grid (blocks) ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.feature {
  position: relative; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; cursor: pointer;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.feature:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: var(--shadow); }
.feature .f-art { height: 112px; border-radius: 10px; background: var(--bg-soft); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.feature .f-art svg { width: 100%; height: 100%; }
.feature .f-num { position: absolute; top: 10px; left: 10px; width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-size: 0.78rem; font-weight: 700; display: flex; align-items: center; justify-content: center; z-index: 1; }
.feature h3 { margin: 4px 0 0; font-size: 1rem; }
.feature p { margin: 0; font-size: 0.84rem; color: var(--text-muted); }
.feature .f-soon { margin-left: 6px; vertical-align: 1px; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 2px 8px; border-radius: 999px; background: var(--bg-soft); color: var(--text-muted); border: 1px solid var(--border); }

/* ---------- Symbol table ---------- */
.sym-table { width: 100%; border-collapse: collapse; font-size: .88rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.sym-table th, .sym-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.sym-table th { background: var(--bg-soft); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.sym-table td.s { font-family: var(--serif); font-size: 1.15rem; white-space: nowrap; }
.sym-table tr:last-child td { border-bottom: 0; }
.table-wrap { overflow-x: auto; border-radius: 12px; }

/* ---------- Anatomy of a formula ---------- */
.anatomy { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 16px 8px; }
.anatomy svg { width: 100%; height: auto; display: block; }

/* ---------- Accordion (theory) ---------- */
details.acc { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 8px; }
details.acc > summary { cursor: pointer; padding: 11px 14px; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 8px; }
details.acc > summary::-webkit-details-marker { display: none; }
details.acc > summary::before { content: '▸'; color: var(--accent-text); transition: transform .15s; }
details.acc[open] > summary::before { transform: rotate(90deg); }
details.acc .acc-b { padding: 0 16px 14px; font-size: .92rem; }
.refs { font-size: .84rem; color: var(--text-muted); padding-left: 18px; }
.refs li { margin-bottom: 4px; }

/* ---------- Placeholder for blocks still to come ---------- */
.coming { text-align: center; padding: 60px 20px; }
.coming h2 { margin: 0 0 8px; }
.coming p { color: var(--text-muted); max-width: 620px; margin: 0 auto 18px; }

footer.foot { max-width: 1200px; margin: 0 auto; padding: 20px; font-size: .78rem; color: var(--text-muted); border-top: 1px solid var(--border); }

/* Diagrams and sections are figures: they keep a light "paper" background in both themes,
   so that their black outlines stay legible and they print as they look. */
.paper { background: #fcf9fa; }
.paper svg.fsection .sc-lbl { fill: #6f5f69; }
:root[data-theme="dark"] .paper { background: #f1ebee; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .paper { background: #f1ebee; } }
.trio-grid .pane { display: flex; flex-direction: column; }
.trio-grid .pane-b { flex: 1; }

/* ---------- linked views (views.js) ---------- */
.views { container-type: inline-size; }
@container (max-width: 1000px) { .views .trio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 560px) { .views .trio-grid { grid-template-columns: 1fr; } }
.icon-btn.sm { width: 26px; height: 26px; }
.icon-btn.sm svg { width: 14px; height: 14px; }
.dl-wrap { position: relative; display: inline-flex; }
.dl-menu { display: none; position: absolute; right: 0; top: 30px; z-index: 20; background: var(--card-bg); border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: var(--shadow); padding: 4px; gap: 4px; }
.dl-wrap.open .dl-menu { display: flex; }
.dl-menu button { font: inherit; font-size: .74rem; font-weight: 700; border: 1px solid var(--border); background: var(--bg-soft); color: var(--text); border-radius: 6px; padding: 3px 9px; cursor: pointer; }
.dl-menu button:hover { border-color: var(--primary); color: var(--primary-text); }
.btn-xs { padding: 1px 8px; font-size: .72rem; border-radius: 6px; vertical-align: 1px; }

/* ---------- Block 2: build a flower ---------- */
.blk-title { font-size: 1.7rem; letter-spacing: -0.6px; margin: 26px 0 4px; }
.b2-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; margin-bottom: 10px; }
.b2-toolbar .sel { max-width: 290px; }
.tb-sep { width: 1px; height: 22px; background: var(--border); margin: 0 2px; }
.b2-name { font: inherit; font-size: .86rem; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--card-bg); color: var(--text); width: 200px; }
.b2-link { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: -2px 0 10px; }
.b2-link input { flex: 1; min-width: 220px; font: inherit; font-size: .78rem; font-family: var(--mono); padding: 5px 8px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--bg-soft); color: var(--text); }
.b2-note { font-size: .76rem; color: var(--text-muted); }
.b2-fbox { padding: 12px 14px; margin-bottom: 14px; }
.b2-fin { display: flex; gap: 8px; flex-wrap: wrap; }
.b2-fin input { flex: 1; min-width: 240px; font-family: var(--serif); font-size: 1.15rem; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--card-bg); color: var(--text); }
.b2-fin input:focus { border-color: var(--primary); }
.kbd { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.kbd .kb { font-family: var(--serif); font-size: 1rem; min-width: 32px; padding: 3px 7px; border-radius: 7px; border: 1px solid var(--border-strong); background: var(--bg-soft); color: var(--text); cursor: pointer; }
.kbd .kb:hover { border-color: var(--primary); color: var(--primary-text); }
.kbd .kb-wide { min-width: 44px; }
.b2-fmsg { font-size: .82rem; margin-top: 8px; }
.b2-fmsg ul { margin: 4px 0 0; padding-left: 18px; }
.b2-fmsg .ok, .b2-checks .ok { color: var(--success-text); }
.b2-fmsg .bad { color: var(--danger-text); }

.b2-grid { display: grid; grid-template-columns: minmax(360px, 430px) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 1000px) { .b2-grid { grid-template-columns: 1fr; } }
.b2-right { position: sticky; top: 92px; max-height: calc(100vh - 104px); overflow: auto; padding-right: 2px; }
@media (max-width: 1000px) { .b2-right { position: static; max-height: none; overflow: visible; } }
.b2-ed details.b2-sec { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; }
.b2-ed details.b2-sec > summary { cursor: pointer; padding: 9px 12px; font-weight: 700; list-style: none; }
.b2-ed details.b2-sec > summary::-webkit-details-marker { display: none; }
.b2-ed details.b2-sec > summary::before { content: '▸ '; color: var(--accent-text); }
.b2-ed details.b2-sec[open] > summary::before { content: '▾ '; }
.b2-body { padding: 2px 12px 12px; }
.b2-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px; align-items: center; margin: 6px 0; font-size: .84rem; }
.b2-row .b2-l { color: var(--text-muted); font-size: .78rem; }
.b2-row .b2-c { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.b2-l2 { font-size: .78rem; color: var(--text-muted); }
.b2-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--border-strong); border-radius: 9px; overflow: hidden; }
.b2-seg button { font: inherit; font-size: .78rem; border: 0; border-right: 1px solid var(--border); background: var(--bg-soft); color: var(--text); padding: 4px 9px; cursor: pointer; }
.b2-seg button:last-child { border-right: 0; }
.b2-seg button.on { background: var(--primary); color: var(--on-primary); }
.b2-chk { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; cursor: pointer; }
.b2-chk input { accent-color: var(--primary); }
.b2-ed .sel { font-size: .78rem; max-width: 100%; }
.b2-hint { font-size: .78rem; color: var(--text-muted); margin: 4px 0; }
.obox { position: relative; border: 1px solid var(--border); border-radius: 10px; padding: 6px 10px 8px 14px; margin: 8px 0; background: var(--bg-soft); }
.obox::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 10px 0 0 10px; background: var(--wc); }
.obox-h { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.obox-h .let { font-family: var(--serif); font-weight: 800; font-size: 1.15rem; color: var(--wct, var(--wc)); }
.obox-h .icon-btn { margin-left: auto; }
.obox-f { font-size: 1rem !important; line-height: 1.2 !important; margin-left: auto; color: var(--wct, var(--wc)); }
.wrow { border-top: 1px dashed var(--border); padding: 5px 0; }
.wrow:first-of-type { border-top: 0; }
.wrow-h { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .8rem; }
.wlab { font-weight: 700; font-size: .74rem; color: var(--text-muted); min-width: 64px; }
.wsum { font-size: .8rem; font-weight: 600; }
.wrow-act { margin-left: auto; display: inline-flex; gap: 4px; align-items: center; }
.cnt { display: inline-flex; align-items: center; border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; background: var(--card-bg); }
.cnt button { font: inherit; font-size: .82rem; width: 24px; border: 0; background: var(--bg-soft); color: var(--text); cursor: pointer; padding: 2px 0; }
.cnt button:hover { color: var(--primary-text); }
.cnt input { width: 46px; text-align: center; border: 0; font: inherit; font-size: .84rem; font-weight: 700; background: transparent; color: var(--text); padding: 2px 0; }
.cnt input.bad { background: rgba(196, 58, 47, .15); }
.parts { margin: 4px 0 2px 18px; padding-left: 8px; border-left: 2px solid var(--border); }
.parts-h { font-size: .74rem; color: var(--text-muted); margin-bottom: 3px; }
.prow { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin: 3px 0; font-size: .78rem; }
.prow .pn { font-weight: 700; color: var(--text-muted); width: 14px; }
.b2-txt, .b2-num { font: inherit; font-size: .78rem; padding: 3px 6px; border-radius: 7px; border: 1px solid var(--border-strong); background: var(--card-bg); color: var(--text); }
.b2-num { width: 64px; }
.b2-size { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; color: var(--text-muted); }
.b2-size input { width: 64px; accent-color: var(--primary); }
.b2-col { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--text-muted); }
.b2-col input { width: 34px; height: 22px; padding: 0; border: 1px solid var(--border-strong); border-radius: 5px; background: none; }
.b2-opts { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 4px; }
.b2-checks { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; margin-bottom: 10px; font-size: .84rem; }
.b2-checks ul { margin: 4px 0 0; padding-left: 18px; }
.b2-checks li.warn { color: var(--danger-text); }
.b2-checks li.info { color: var(--text-muted); }
.b2-checks.has-warn { border-color: rgba(196, 58, 47, .45); }
.b2-saved { margin-top: 12px; padding: 12px 14px; }
.b2-saved h3 { margin: 0 0 2px; font-size: 1rem; }
.sv-row { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--border); padding: 5px 0; }
.sv-load { font: inherit; font-size: .84rem; font-weight: 600; border: 0; background: none; color: var(--primary-text); cursor: pointer; padding: 0; text-align: left; }
.sv-f { font-size: .95rem !important; line-height: 1.2 !important; color: var(--text-muted); flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ---------- focus on one whorl (atlas plates) ---------- */
svg.fdiagram[data-focus] .dg-o, svg.fdiagram[data-focus] .dg-fuse, svg.fdiagram[data-focus] .dg-adn, svg.f3d[data-focus] .p3, svg.fsection[data-focus] .sc-o { opacity: .2; }
svg.fdiagram[data-focus~="K"] [data-org="K"], svg.f3d[data-focus~="K"] .p3[data-org="K"], svg.fsection[data-focus~="K"] .sc-o[data-org="K"] { opacity: 1; }
svg.fdiagram[data-focus~="C"] [data-org="C"], svg.f3d[data-focus~="C"] .p3[data-org="C"], svg.fsection[data-focus~="C"] .sc-o[data-org="C"] { opacity: 1; }
svg.fdiagram[data-focus~="P"] [data-org="P"], svg.f3d[data-focus~="P"] .p3[data-org="P"], svg.fsection[data-focus~="P"] .sc-o[data-org="P"] { opacity: 1; }
svg.fdiagram[data-focus~="A"] [data-org="A"], svg.f3d[data-focus~="A"] .p3[data-org="A"], svg.fsection[data-focus~="A"] .sc-o[data-org="A"] { opacity: 1; }
svg.fdiagram[data-focus~="G"] [data-org="G"], svg.f3d[data-focus~="G"] .p3[data-org="G"], svg.fsection[data-focus~="G"] .sc-o[data-org="G"] { opacity: 1; }
svg.fdiagram[data-focus~="E"] [data-org="E"], svg.f3d[data-focus~="E"] .p3[data-org="E"], svg.fsection[data-focus~="E"] .sc-o[data-org="E"] { opacity: 1; }
svg.fdiagram[data-focus~="hyp"] [data-org="hyp"], svg.f3d[data-focus~="hyp"] .p3[data-org="hyp"], svg.fsection[data-focus~="hyp"] .sc-o[data-org="hyp"] { opacity: 1; }
svg.fdiagram[data-focus~="disc"] [data-org="disc"], svg.f3d[data-focus~="disc"] .p3[data-org="disc"], svg.fsection[data-focus~="disc"] .sc-o[data-org="disc"] { opacity: 1; }
svg.fdiagram[data-focus~="corona"] [data-org="corona"], svg.f3d[data-focus~="corona"] .p3[data-org="corona"], svg.fsection[data-focus~="corona"] .sc-o[data-org="corona"] { opacity: 1; }
svg.f3d.still { cursor: default; touch-action: auto; }

/* ---------- Block 3: whorl atlas ---------- */
.at-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 860px) { .at-layout { grid-template-columns: 1fr; } }
.at-side { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 860px) { .at-side { position: static; } }
.at-search { font: inherit; font-size: .86rem; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--card-bg); color: var(--text); width: 100%; }
.at-nav { display: flex; flex-direction: column; gap: 1px; }
@media (max-width: 860px) { .at-nav { flex-direction: row; flex-wrap: wrap; gap: 4px; } }
.at-nav a { font-size: .84rem; color: var(--text-muted); text-decoration: none; padding: 4px 8px; border-radius: 7px; }
.at-nav a:hover { background: var(--bg-soft); color: var(--primary-text); }
@media (max-width: 860px) { .at-nav a { border: 1px solid var(--border); background: var(--card-bg); } }
.at-sec { scroll-margin-top: 96px; }
.at-sec h3 { font-size: 1.25rem; margin: 22px 0 2px; display: flex; align-items: center; gap: 8px; }
.at-sec:first-child h3 { margin-top: 4px; }
.at-n { font-size: .7rem; font-weight: 700; background: var(--bg-soft); border: 1px solid var(--border); color: var(--text-muted); border-radius: 999px; padding: 1px 8px; }
.at-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; }
.at-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: border-color .15s, box-shadow .15s; scroll-margin-top: 110px; }
.at-card:hover { border-color: rgba(var(--primary-rgb), .45); box-shadow: var(--shadow); }
.at-card.flash { animation: flash 1.6s ease; }
@keyframes flash { 0%, 40% { box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .55); } 100% { box-shadow: none; } }
.at-fig { height: 172px; display: flex; cursor: zoom-in; border-bottom: 1px solid var(--border); background: var(--bg-soft); }
.at-fig .at-f1 { flex: 1; display: flex; align-items: center; justify-content: center; min-width: 0; padding: 6px; }
.at-fig.two .at-f1 + .at-f1 { border-left: 1px solid var(--border); }
.at-f1.paper { background: #fcf9fa; }
:root[data-theme="dark"] .at-f1.paper { background: #f1ebee; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .at-f1.paper { background: #f1ebee; } }
.at-f1.plain { background: var(--card-bg); }
.at-f1 svg { max-width: 100%; max-height: 100%; width: auto; height: 100%; display: block; }
.at-body { padding: 9px 12px 10px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.at-body h4 { margin: 0; font-size: .98rem; }
.at-form .ff { font-size: 1.12rem; line-height: 1.5; }
.at-d { margin: 0; font-size: .84rem; }
.at-x { margin: 0; font-size: .78rem; color: var(--text-muted); }
.at-x b { color: var(--text); font-weight: 600; }
.at-act { margin-top: auto; padding-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.gl-letters { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.gl-letters a { font-weight: 700; font-size: .8rem; text-decoration: none; color: var(--primary-text); border: 1px solid var(--border); background: var(--card-bg); border-radius: 6px; padding: 2px 8px; }
.gl-list { margin: 0; columns: 2 340px; column-gap: 24px; }
.gl-letter { font-weight: 800; color: var(--accent-text); font-size: 1.05rem; margin: 10px 0 2px; break-after: avoid; scroll-margin-top: 100px; }
.gl-item { break-inside: avoid; margin-bottom: 8px; scroll-margin-top: 100px; }
.gl-item dt { font-weight: 700; font-size: .9rem; }
.gl-item dd { margin: 0; font-size: .84rem; color: var(--text-muted); }
.gl-item dd a { font-size: .78rem; }
.gl-pop { position: fixed; z-index: 200; background: var(--card-bg); color: var(--text); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: var(--shadow); padding: 9px 12px; font-size: .84rem; opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity .15s, transform .15s; }
.gl-pop.on { opacity: 1; pointer-events: auto; transform: none; }
.gl-pop b { display: block; margin-bottom: 2px; }
.gl-pop p { margin: 0 0 4px; color: var(--text-muted); }
.gl-pop a { font-size: .8rem; }
dfn[data-term]:hover { color: var(--primary-text); border-bottom-color: var(--primary); }
.at-dlg { width: min(1180px, 96vw); max-height: 94vh; border: 1px solid var(--border-strong); border-radius: 16px; background: var(--bg); color: var(--text); padding: 14px 16px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.at-dlg::backdrop { background: rgba(20, 10, 18, .55); }
.at-dlg-h { display: flex; align-items: center; gap: 10px; }
.at-dlg-h h3 { margin: 0 auto 0 0; font-size: 1.3rem; }
.at-dlg-t { font-size: .92rem; margin: 6px 0 10px; }
.at-dlg-t p { margin: 0 0 4px; }
.at-dlg-art { display: flex; gap: 12px; }
.at-dlg-art .at-f1 { flex: 1; border: 1px solid var(--border); border-radius: 12px; padding: 12px; display: flex; justify-content: center; }
.at-dlg-art svg { width: 100%; max-height: 62vh; }
.at-f1 { overflow: hidden; }

/* ==================== Block 4 · families and species ==================== */
.fm-side { max-height: calc(100vh - 110px); }
.fm-tree { overflow-y: auto; min-height: 0; flex: 1; padding-right: 4px; font-size: .82rem; }
@media (max-width: 860px) { .fm-side { max-height: none; } .fm-tree { max-height: 260px; border: 1px solid var(--border); border-radius: 10px; padding: 6px; } }
.tr-g { margin-bottom: 4px; }
.tr-g summary { font-weight: 700; font-size: .8rem; color: var(--primary-text); cursor: pointer; padding: 3px 2px; }
.tr-o { font-size: .7rem; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); margin: 5px 0 1px 8px; }
.tr-f { display: block; text-decoration: none; color: var(--text); padding: 1px 8px 1px 16px; border-radius: 6px; }
.tr-f:hover { background: var(--bg-soft); color: var(--primary-text); }
.tr-f.dim { color: var(--text-muted); }
.fm-filters { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.fm-frow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fm-flab { font-size: .74rem; font-weight: 700; color: var(--text-muted); min-width: 92px; }
.chip .n { font-size: .7rem; }
.fm-count { margin: 4px 0 2px; }
.st-badge { display: inline-block; font-size: .68rem; font-weight: 600; padding: 1px 7px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; vertical-align: 1px; }
.st-end { background: var(--danger-soft); color: var(--danger-text); border-color: rgba(196, 58, 47, .3); }
.st-nat { background: var(--success-soft); color: var(--success-text); border-color: rgba(47, 143, 74, .3); }
.st-dom { background: rgba(212, 128, 26, .14); color: #8a500e; border-color: rgba(212, 128, 26, .35); }
.st-cult { background: rgba(47, 127, 180, .12); color: #25628c; border-color: rgba(47, 127, 180, .3); }
.st-intro { background: rgba(111, 95, 105, .12); color: var(--text-muted); border-color: rgba(111, 95, 105, .28); }
:root[data-theme="dark"] .st-end { color: #f59a90; }
:root[data-theme="dark"] .st-nat { color: #86d69b; }
:root[data-theme="dark"] .st-dom { color: #f2b36a; }
:root[data-theme="dark"] .st-cult { color: #8cc6ee; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .st-end { color: #f59a90; }
  :root:not([data-theme="light"]) .st-nat { color: #86d69b; }
  :root:not([data-theme="light"]) .st-dom { color: #f2b36a; }
  :root:not([data-theme="light"]) .st-cult { color: #8cc6ee; }
}
.chip.on .st-badge, .chip.on .n { color: inherit; }
.fm-sec { scroll-margin-top: 96px; }
.fm-sec h3 { font-size: 1.2rem; margin: 18px 0 8px; display: flex; align-items: center; gap: 8px; }
.fm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: 12px; }
.fm-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; scroll-margin-top: 110px; }
.fm-card:hover, .fm-card:focus-visible { border-color: rgba(var(--primary-rgb), .5); box-shadow: var(--shadow); transform: translateY(-1px); }
.fm-card.flash { animation: flash 1.6s ease; }
.fm-fig { height: 150px; display: flex; background: #fcf9fa; border-bottom: 1px solid var(--border); }
:root[data-theme="dark"] .fm-fig { background: #f1ebee; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fm-fig { background: #f1ebee; } }
.fm-f1 { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 6px; }
.fm-fig.two .fm-f1 + .fm-f1 { border-left: 1px solid #e6dce1; }
.fm-f1 svg { max-width: 100%; max-height: 100%; width: auto; height: 100%; display: block; }
.fm-body { padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.fm-ord { font-size: .68rem; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); }
.fm-body h4 { margin: 0; font-size: 1.02rem; }
.fm-vern { font-size: .8rem; color: var(--text-muted); }
.fm-form { margin: 4px 0 2px; }
.fm-form .ff { font-size: 1rem; line-height: 1.45; }
.fm-match { font-size: .76rem; color: var(--primary-text); }
.fm-match:empty { display: none; }
.fm-st { margin-top: auto; padding-top: 5px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.fm-nsp { font-size: .72rem; color: var(--text-muted); margin-right: 2px; }
/* family sheet */
.fs-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.fs-crumbs { font-size: .78rem; color: var(--text-muted); flex: 1; min-width: 200px; }
.fs-crumbs .sep { color: var(--text-muted); margin: 0 2px; }
.fs-pn { display: flex; gap: 4px; flex-wrap: wrap; }
.fs-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 10px; }
.fs-head h2 { margin: 0; font-size: 2rem; letter-spacing: -.6px; }
.fs-vern { color: var(--text-muted); }
.fs-act { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fs-act .sel { max-width: 100%; }
.fs-flowers { margin-bottom: 4px; }
.chip.sp i { font-style: italic; opacity: 1; }
.fs-flnote { min-height: 1.2em; }
#b4Views { margin-bottom: 14px; }
.fs-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 14px; align-items: start; }
@media (max-width: 980px) { .fs-cols { grid-template-columns: 1fr; } }
.fs-chars h3, .fs-sp h3 { margin: 0 0 8px; font-size: 1.1rem; display: flex; align-items: center; gap: 8px; }
.fs-chars ul { margin: 0 0 10px; padding-left: 20px; }
.fs-chars li { margin-bottom: 4px; }
.fs-chars h4 { margin: 10px 0 2px; font-size: .92rem; color: var(--primary-text); }
.fs-chars p { margin: 0; }
.fs-stl { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.sp-list { display: flex; flex-direction: column; gap: 6px; }
.sp-row { border: 1px solid var(--border); border-radius: 10px; padding: 7px 10px; transition: border-color .15s, background .15s; }
.sp-row.on { border-color: rgba(var(--primary-rgb), .55); background: var(--primary-soft); }
.sp-sci { font-weight: 700; }
.sp-cn { color: var(--text-muted); font-size: .88rem; }
.sp-t { font-size: .84rem; margin-top: 2px; }
.sp-a { margin-top: 4px; font-size: .76rem; }
/* comparer */
.cmp-title { margin: 0 auto 0 4px; font-size: 1.4rem; }
.cmp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 700px) { .cmp-grid { grid-template-columns: 1fr; } }
.cmp-col { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cmp-col select { width: 100%; }
.cmp-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cmp-f { border-radius: 10px; border: 1px solid var(--border); height: 220px; display: flex; align-items: center; justify-content: center; padding: 6px; overflow: hidden; }
.cmp-f.paper { background: #fcf9fa; }
:root[data-theme="dark"] .cmp-f.paper { background: #f1ebee; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cmp-f.paper { background: #f1ebee; } }
.cmp-f.soft { background: var(--bg-soft); }
.cmp-f svg { max-width: 100%; max-height: 100%; width: auto; height: 100%; }
.cmp-form .ff { font-size: 1.15rem; }
.cmp-col > .btn { align-self: flex-start; }
.cmp-n { margin: 12px 0 6px; }
.cmp-table { width: 100%; border-collapse: collapse; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; font-size: .88rem; margin-bottom: 14px; }
.cmp-table th, .cmp-table td { padding: 6px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.cmp-table thead th { background: var(--bg-soft); font-size: .92rem; }
.cmp-table tbody th { width: 22%; color: var(--text-muted); font-weight: 600; }
.cmp-table tr.diff td { background: var(--accent-soft); }
.cmp-table tr.diff th { color: var(--accent-text); }
.cmp-table tr.diff th::before { content: "≠ "; }
.cmp-table .ff { font-size: 1.02rem; }
.cmp-chars h4 { margin: 0 0 6px; }
.cmp-chars ul { margin: 0; padding-left: 20px; font-size: .88rem; }
.fs-key { margin-top: 14px; }
.fs-key h3 { margin: 0 0 8px; font-size: 1.1rem; }

/* ==================== Block 5 · interactive key ==================== */
.k-tabs { margin: 4px 0 12px; }
.k-tabs button { padding: 7px 16px; font-size: .9rem; }
.k-bar { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; padding: 10px 14px; margin-bottom: 10px; font-size: .86rem; }
.k-bar label { display: inline-flex; align-items: center; gap: 6px; }
.k-from { margin: 0 0 10px; }
.k-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 980px) { .k-layout { grid-template-columns: 1fr; } }
.k-grp { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px 10px; margin-bottom: 10px; }
.k-grp h4 { margin: 2px 0 6px; font-size: .78rem; text-transform: uppercase; letter-spacing: .7px; color: var(--primary-text); }
.k-char { padding: 6px 0; border-top: 1px solid var(--border); scroll-margin-top: 110px; border-radius: 8px; }
.k-grp h4 + .k-char { border-top: 0; }
.k-char.flash { animation: flash 1.6s ease; }
.k-q { font-size: .86rem; font-weight: 600; margin-bottom: 4px; }
.k-q .btn { margin-left: 4px; }
.k-sts { display: flex; flex-wrap: wrap; gap: 5px; }
.k-st { font-size: .78rem; padding: 3px 9px; }
/* a state no remaining family shows: muted and dashed, but still legible */
.k-st.zero { color: var(--text-muted); background: transparent; border-style: dashed; }
.k-char.set .k-q { color: var(--primary-text); }
.k-results { position: sticky; top: 92px; max-height: calc(100vh - 110px); overflow-y: auto; }
@media (max-width: 980px) { .k-results { position: static; max-height: none; } }
.k-left { font-size: 1.1rem; margin: 2px 0 6px; }
.k-left b { color: var(--primary-text); font-size: 1.4rem; }
.k-sug { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; font-size: .82rem; }
.k-sug:empty { display: none; }
.k-sug-l { color: var(--text-muted); font-weight: 600; }
.k-res { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.k-fam { display: flex; gap: 8px; align-items: center; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 6px; cursor: pointer; transition: border-color .15s; }
.k-fam:hover, .k-fam:focus-visible { border-color: rgba(var(--primary-rgb), .55); }
.k-fig { width: 64px; height: 64px; flex: none; background: #fcf9fa; border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
:root[data-theme="dark"] .k-fig { background: #f1ebee; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .k-fig { background: #f1ebee; } }
.k-fig svg { width: 100%; height: 100%; }
.k-fb { min-width: 0; font-size: .86rem; line-height: 1.3; }
.k-miss { font-size: .72rem; color: var(--accent-text); margin-top: 2px; }
.k-diff { margin-bottom: 10px; }
.k-diff:empty { display: none; }
.k-diff h4 { margin: 4px 0 6px; font-size: .9rem; }
.k-dtab { width: 100%; border-collapse: collapse; font-size: .78rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.k-dtab th, .k-dtab td { padding: 4px 7px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.k-dtab thead th { background: var(--bg-soft); }
.k-dtab tbody th { color: var(--text-muted); font-weight: 600; }
.k-view button { padding: 5px 12px; font-size: .8rem; }
.k-crumbs { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; align-items: flex-start; }
.k-crumb { font: inherit; font-size: .8rem; text-align: left; background: none; border: 0; color: var(--text-muted); cursor: pointer; padding: 1px 4px; border-radius: 6px; }
.k-crumb:hover { background: var(--bg-soft); color: var(--primary-text); }
.k-cp { max-width: 820px; }
.k-cp-h { font-size: .8rem; color: var(--text-muted); margin-bottom: 6px; }
.k-lead { font: inherit; width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left; background: var(--card-bg); color: var(--text); border: 1px solid var(--border-strong); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.k-lead:hover { border-color: var(--primary); box-shadow: var(--shadow); }
.k-ln { font-weight: 800; color: var(--primary-text); }
.k-lt { font-size: 1rem; }
.k-lc { font-size: .78rem; color: var(--text-muted); text-align: right; }
.k-ex { font-size: .72rem; }
.k-end-l { font-size: .9rem; color: var(--text-muted); margin-bottom: 6px; }
.k-end .k-fam { max-width: 360px; margin-bottom: 6px; }
.k-full { list-style: none; margin: 0; padding: 0; max-width: 900px; }
.k-full li { padding: 4px 6px; border-radius: 8px; scroll-margin-top: 110px; }
.k-full li.flash { animation: flash 1.6s ease; }
.k-row { display: flex; align-items: baseline; gap: 6px; font-size: .88rem; }
.k-row .k-ln { width: 42px; flex: none; }
.k-dots { flex: 1; border-bottom: 1px dotted var(--border-strong); min-width: 20px; transform: translateY(-3px); }
.k-to { font-weight: 600; text-align: right; }
.k-fl { font-style: normal; }
.k-path { margin: 0 0 10px; padding-left: 0; list-style: none; font-size: .86rem; }
.k-path li { padding: 2px 0; }
.k-path .k-ln { display: inline-block; width: 38px; }
/* ==================== Block 6 · self-assessment ==================== */
.q-tabs { margin: 4px 0 12px; }
.q-tabs button { padding: 7px 16px; font-size: .9rem; }
.q-cols { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 900px) { .q-cols { grid-template-columns: 1fr; } }
.q-setup h3, .q-join h3, .q-verify h3, .q-end h3, .q-intro h3 { margin: 0 0 6px; }
.q-types { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.q-grp { border: 1px solid var(--border); border-radius: 10px; padding: 6px 12px 8px; margin: 0; display: flex; flex-direction: column; gap: 3px; min-width: 200px; flex: 1; }
.q-grp legend { font-size: .78rem; font-weight: 700; color: var(--primary-text); padding: 0 4px; }
.q-grp .tgl { font-size: .86rem; }
.q-stmt { font-size: 1.15rem; font-style: italic; background: var(--bg-soft); border-radius: 12px; padding: 16px 18px; text-align: center; margin-bottom: 10px; }
.q-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; font-size: .86rem; }
.q-row label { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 200px; }
.q-lab { font-weight: 600; min-width: 74px; color: var(--text-muted); }
.q-seg button { padding: 4px 12px; font-size: .82rem; }
.q-num { width: 76px; }
.q-msg { margin-left: 8px; font-size: .84rem; color: var(--danger-text); }
.q-lvl-note { font-size: .78rem; }
.q-join input, .q-verify textarea { width: 100%; margin: 4px 0 6px; }
.q-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 8px; }
.q-prog { flex: 1; min-width: 200px; font-size: .9rem; }
.q-bar { height: 6px; background: var(--bg-soft); border-radius: 99px; overflow: hidden; margin-top: 5px; }
.q-bar span { display: block; height: 100%; background: var(--primary); transition: width .3s; }
.q-who { font-size: .84rem; color: var(--text-muted); }
.q-timer { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.05rem; }
.q-timer.late { color: var(--danger-text); }
.q-score { font-size: .88rem; }
.q-dots { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; }
.q-dot { font: inherit; font-size: .76rem; min-width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--card-bg); color: var(--text); cursor: pointer; }
.q-dot.done { background: var(--primary-soft); border-color: rgba(var(--primary-rgb), .45); }
.q-dot.on { outline: 2px solid var(--primary); outline-offset: 1px; }
.q-card { padding: 14px 18px 16px; }
.q-type { font-size: .72rem; text-transform: uppercase; letter-spacing: .7px; color: var(--primary-text); font-weight: 700; }
.q-prompt { margin: 4px 0 10px; font-size: 1.2rem; }
.q-views { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-bottom: 10px; }
.q-pane { border: 1px solid var(--border); border-radius: 12px; min-height: 230px; display: flex; align-items: center; justify-content: center; padding: 6px; overflow: hidden; }
.q-pane.paper, .q-optfig.paper, .q-fig.paper { background: #fcf9fa; }
:root[data-theme="dark"] .q-pane.paper, :root[data-theme="dark"] .q-optfig.paper, :root[data-theme="dark"] .q-fig.paper { background: #f1ebee; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .q-pane.paper, :root:not([data-theme="light"]) .q-optfig.paper, :root:not([data-theme="light"]) .q-fig.paper { background: #f1ebee; } }
.q-pane svg { max-width: 100%; max-height: 240px; width: auto; height: 100%; }
.q-3d { background: var(--bg-soft); }
.q-3d > * { width: 100%; }
.q-formula { font-size: 1.7rem; text-align: center; padding: 14px; background: var(--bg-soft); border-radius: 12px; margin-bottom: 10px; }
.q-fig { max-width: 420px; height: 260px; margin: 0 auto 10px; border: 1px solid var(--border); border-radius: 12px; display: flex; align-items: center; justify-content: center; padding: 8px; }
.q-fig.soft, .q-optfig.soft { background: var(--bg-soft); }
.q-fig svg { max-width: 100%; max-height: 100%; }
.q-opts { display: flex; flex-direction: column; gap: 6px; }
.q-opts.figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .q-opts.figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .q-optfig { height: 140px; } }
.q-opt { font: inherit; text-align: left; display: flex; gap: 10px; align-items: center; background: var(--card-bg); color: var(--text); border: 1px solid var(--border-strong); border-radius: 10px; padding: 9px 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.q-opt.fig { flex-direction: column; align-items: stretch; }
.q-opt:hover:not(:disabled) { border-color: var(--primary); }
.q-opt.on { border-color: var(--primary); background: var(--primary-soft); }
.q-opt.right { border-color: var(--success); background: var(--success-soft); }
.q-opt.wrong { border-color: var(--danger); background: var(--danger-soft); }
.q-opt:disabled { cursor: default; }
.q-letter { font-weight: 800; color: var(--primary-text); min-width: 18px; }
.q-otext { flex: 1; min-width: 0; }
.q-otext .ff { font-size: 1.15rem; }
.q-optfig { height: 170px; border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.q-optfig svg { max-width: 100%; max-height: 100%; }
.q-write .q-input { width: 100%; font-size: 1.2rem; }
.q-write .kbd { margin: 6px 0; }
.q-echo { font-size: .9rem; margin-top: 4px; min-height: 1.4em; }
.q-echo .ff { font-size: 1.1rem; }
.q-warn { color: var(--warning-text); font-size: .84rem; }
.q-fb:empty { display: none; }
.q-fb { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
.q-verdict { font-weight: 800; font-size: 1.1rem; margin-bottom: 4px; }
.q-verdict.ok { color: var(--success-text); } .q-verdict.part { color: var(--warning-text); } .q-verdict.bad { color: var(--danger-text); }
.q-right { margin: 4px 0 8px; }
.q-right .ff { font-size: 1.2rem; }
.q-checks { border-collapse: collapse; font-size: .84rem; width: 100%; }
.q-checks td, .q-checks th { padding: 3px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.q-checks th { font-weight: 600; width: 38%; }
.q-checks tr.ok td:first-child { color: var(--success-text); font-weight: 800; }
.q-checks tr.bad td:first-child { color: var(--danger-text); font-weight: 800; }
.q-who2 { font-size: .9rem; margin: 8px 0 0; }
.q-why { font-size: .9rem; margin: 6px 0 0; padding: 7px 10px; border-left: 3px solid var(--danger); background: rgba(196, 58, 47, .06); border-radius: 0 8px 8px 0; }
.q-why ul { margin: 4px 0 0; padding-left: 18px; }
.q-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.q-handin { background: var(--bg-soft); border-radius: 10px; padding: 10px 12px; }
.q-big { font-size: 3rem; font-weight: 800; color: var(--primary-text); line-height: 1; margin: 6px 0 12px; }
.q-big span { display: block; font-size: .9rem; font-weight: 500; color: var(--text-muted); margin-top: 4px; }
.q-cert { background: var(--bg-soft); border-radius: 12px; padding: 10px 14px; margin: 8px 0 12px; }
.q-code { width: 100%; font-family: var(--mono); font-size: .72rem; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--card-bg); color: var(--text); padding: 6px 8px; word-break: break-all; }
.q-review { width: 100%; border-collapse: collapse; font-size: .84rem; margin-top: 6px; }
.q-review th, .q-review td { padding: 4px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.q-review tr.ok td:last-child { color: var(--success-text); font-weight: 700; }
.q-review tr.bad td:last-child { color: var(--danger-text); font-weight: 700; }
.q-review tr.part td:last-child { color: var(--warning-text); font-weight: 700; }
.q-ans { font-family: var(--serif); word-break: break-word; }
.q-vtab td:last-child { font-weight: 700; }
.q-made { margin-top: 10px; background: var(--bg-soft); border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; font-size: .86rem; }
.q-made label { display: flex; flex-direction: column; gap: 3px; }
.q-made input { width: 100%; }
.q-intro { max-width: 760px; }

/* ---------------- Block 7 · gymnosperms ---------------- */
svg.cfig { width: 100%; height: auto; max-height: 360px; display: block; overflow: visible; }
svg.cfig .c-o { transition: opacity .18s; }
svg.cfig.has-hl .c-o { opacity: .18; }
svg.cfig.has-hl .c-o.hl { opacity: 1; }
svg.cfig .sc-lbl { font: 500 5.4px system-ui, sans-serif; fill: var(--text-muted); }
svg.cfig .cf-num { font: 700 5px system-ui, sans-serif; fill: #9a5a86; }
.cf-two { display: grid; grid-template-columns: 1.25fr 1fr; gap: 8px; align-items: end; width: 100%; }
.cf-two figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cf-two figcaption, .cf-stack figcaption { font-size: .74rem; color: #6f5f69; text-align: center; }
.cf-two svg.cfig { max-height: 280px; }
.cf-stack { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.cf-stack figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.cf-stack figure.cf-top svg.cfig { max-width: 62%; max-height: 150px; }
svg.c3d.still { width: 100%; height: 100%; }
.g-tabs { margin-bottom: 14px; }
.g-intro { max-width: 900px; font-size: .92rem; }
.quad-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.quad-grid .pane { display: flex; flex-direction: column; }
.quad-grid .pane-b { flex: 1; min-height: 330px; }
.cviews { container-type: inline-size; }
@container (max-width: 720px) { .cviews .quad-grid { grid-template-columns: 1fr; } }
.pane-b.cv-col { flex-direction: column; gap: 6px; }
.cv-cap { font-size: .76rem; color: var(--text-muted); margin: 0; text-align: center; max-width: 420px; }
/* the paper panes stay light in the dark theme too: their text stays dark */
.paper .cv-cap { color: #5b5260; }
.cv-legend { margin-top: 10px; }
.g-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 900px) { .g-layout { grid-template-columns: 1fr; } }
.g-nav { position: sticky; top: 104px; padding: 10px; display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 120px); overflow: auto; }
@media (max-width: 900px) { .g-nav { position: static; max-height: none; flex-direction: row; flex-wrap: wrap; } }
.g-nav-t { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 3px; }
.g-nav-x { display: flex; flex-direction: column; padding: 4px 8px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: .86rem; }
.g-nav-x span { font-size: .7rem; color: var(--text-muted); }
.g-nav-x:hover { background: var(--bg-soft); }
.g-nav-x.on { background: var(--primary-soft); color: var(--primary-text); }
.g-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.g-head h2 { margin: 0; }
.g-note { margin: 6px 0 0; font-size: .9rem; max-width: 820px; }
.g-segs { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 12px; }
.g-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
@media (max-width: 820px) { .g-cols { grid-template-columns: 1fr; } }
.g-sheet { width: 100%; border-collapse: collapse; font-size: .86rem; }
.g-sheet th, .g-sheet td { padding: 5px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.g-sheet th { width: 38%; color: var(--text-muted); font-weight: 600; }
.g-grp { margin-top: 12px; }
.g-grp ul { margin: 4px 0 8px; padding-left: 20px; }
.g-grp h4 { margin: 10px 0 4px; }
.g-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
@media (max-width: 760px) { .g-pair { grid-template-columns: 1fr; } }
.g-side { display: flex; flex-direction: column; gap: 8px; }
.g-side-h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.g-side-h h3 { margin: 0; }
.g-side-h .sel { max-width: 100%; }
.g-side-f { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.g-3d { height: 300px; display: flex; align-items: center; justify-content: center; background: var(--bg-soft); border-radius: 10px; }
.g-3d > svg { width: 100%; height: 100%; }
.g-tablewrap { overflow-x: auto; }
.g-ctab { width: 100%; border-collapse: collapse; font-size: .86rem; min-width: 560px; }
.g-ctab th, .g-ctab td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.g-ctab thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.g-ctab tbody th { width: 20%; }
.g-ctab tbody tr.hl, .g-hom.hl { background: var(--bg-soft); }
.g-homs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.g-hom { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; transition: background .15s; }
.g-hom-row { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: .88rem; flex-wrap: wrap; }
.g-hom-x { color: var(--primary-text); }
.g-hom-g { color: var(--primary-text); }
.g-hom-fig { height: 120px; display: flex; align-items: center; justify-content: center; background: #fcf9fa; border-radius: 8px; }
.g-hom-fig:empty { display: none; }
.g-hom-fig svg { max-height: 112px; max-width: 100%; width: auto; }
.g-hom p { margin: 0; font-size: .82rem; }
.g-filters { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.g-count { font-size: .8rem; color: var(--text-muted); }
.g-fig { height: 170px; display: flex; align-items: center; justify-content: center; background: #fcf9fa; }
.nom-badge { display: inline-block; font-size: .68rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--danger-soft); color: var(--danger-text); white-space: nowrap; vertical-align: 1px; }
:root[data-theme="dark"] .g-hom-fig, :root[data-theme="dark"] .g-fig { background: #f1ebee; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .g-hom-fig, :root:not([data-theme="light"]) .g-fig { background: #f1ebee; } }

/* ---------------- Block 8 · classroom ---------------- */
.p8-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.p8-bar .sel { max-width: 260px; }
.p8-title { flex: 1; min-width: 200px; }
.p8-bar-r { display: flex; gap: 6px; flex-wrap: wrap; }
.p8-file { position: relative; overflow: hidden; cursor: pointer; }
.p8-file input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.p8-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; align-items: start; }
@media (max-width: 900px) { .p8-cols { grid-template-columns: minmax(0, 1fr); } }
.p8-form select, .p8-form input, .p8-pform select, .p8-phedit select, .p8-phedit input { max-width: 100%; min-width: 0; }
.p8-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; counter-reset: sl; }
.p8-list li { display: grid; grid-template-columns: 26px 110px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px; font-size: .86rem; counter-increment: sl; }
.p8-list li::before { content: counter(sl); font-weight: 800; color: var(--primary-text); text-align: center; }
@media (max-width: 640px) { .p8-list li { grid-template-columns: 22px minmax(0, 1fr); } .p8-list li .p8-kind { grid-column: 2; } .p8-list li > .p8-name, .p8-list li > select, .p8-list li > span:not(.p8-kind) { grid-column: 2; } }
.p8-kind { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 700; }
.p8-name { overflow: hidden; text-overflow: ellipsis; }
.p8-acts { display: flex; gap: 2px; }
.sel-sm { font-size: .78rem; padding: 3px 6px; }
.p8-kinds { flex-wrap: wrap; margin-bottom: 10px; }
.p8-form, .p8-pform { display: flex; flex-direction: column; gap: 8px; }
.p8-form label, .p8-pform > label { display: flex; flex-direction: column; gap: 3px; font-size: .84rem; }
.p8-pform > label.tgl, .p8-form > label.tgl { flex-direction: row; align-items: center; gap: 6px; }
.pp-strob .pp-figs3 { height: 50mm; }
.pp-strob .pp-tab { font-size: 7.4pt; margin-top: 1mm; }
.pp-strob .pp-tab th, .pp-strob .pp-tab td { padding: .5mm 1.2mm; }
.pp-strob .pp-cols { font-size: 8pt; gap: 4mm; }
.pp-strob .pp-cols h3 { font-size: 9.5pt; }
.pp-strob .pp-note { font-size: 8.5pt; }
.p8-ta { resize: vertical; font: inherit; }
.p8-gen { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.p8-gen label { display: flex; flex-direction: column; gap: 3px; font-size: .82rem; }
.p8-phpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; max-height: 220px; overflow: auto; }
.ph-th { border: 2px solid transparent; border-radius: 8px; padding: 0; background: none; cursor: pointer; aspect-ratio: 1; overflow: hidden; }
.ph-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-th.on { border-color: var(--primary); }
.ph-strip { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ph-strip-t { width: 100%; font-weight: 700; font-size: .9rem; }
.ph-strip .ph-th { width: 96px; }
.ph-dlg { border: none; border-radius: 14px; padding: 12px 44px; max-width: min(96vw, 1100px); background: var(--card-bg); color: var(--text); }
.ph-dlg::backdrop { background: rgba(10, 5, 10, .75); }
.ph-fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ph-fig img { max-width: 100%; max-height: 78vh; border-radius: 8px; }
.ph-fig figcaption { font-size: .9rem; text-align: center; }
.ph-cr { display: block; font-size: .78rem; color: var(--text-muted); }
.ph-x { position: absolute; top: 8px; right: 8px; }
.ph-prev, .ph-next { position: absolute; top: 50%; transform: translateY(-50%); font-size: 1.4rem; }
.ph-prev { left: 6px; } .ph-next { right: 6px; }
/* the player */
body.playing { overflow: hidden; }
.pl { position: fixed; inset: 0; z-index: 1000; background: #fbf7f9; color: #231a20; display: flex; flex-direction: column; outline: none; }
.pl.dark { background: #16111a; color: #f2e9ef; }
.pl-top { display: flex; align-items: baseline; gap: 16px; padding: 14px 26px 6px; }
.pl-t { font-size: clamp(1.2rem, 2.6vw, 2.2rem); font-weight: 700; flex: 1; }
.pl-t .muted { font-weight: 500; }
.pl-n { font-size: 1rem; opacity: .6; font-variant-numeric: tabular-nums; }
.pl-stage { flex: 1; min-height: 0; padding: 6px 26px; display: flex; flex-direction: column; gap: 10px; overflow: auto; }
.pl-figs { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; }
.pl-3d { min-height: 0; display: flex; align-items: center; justify-content: center; }
.pl-3d svg { width: 100%; height: 100%; max-height: 62vh; }
.pl-col { display: grid; grid-template-rows: 1fr 1fr; gap: 10px; min-height: 0; }
.pl-paper { background: #fcf9fa; border-radius: 12px; padding: 8px; display: flex; align-items: center; justify-content: center; min-height: 0; color: #231a20; }
.pl-paper svg { width: 100%; height: 100%; max-height: 32vh; }
.pl-formula { text-align: center; font-size: clamp(1.6rem, 3.6vw, 3rem); padding: 4px 0; }
.pl-formula .ff { font-size: inherit; }
.pl-hide { position: relative; }
.pl-hide > .pl-a { visibility: hidden; }
.pl-hide { min-height: 4.2rem; }
.pl-hide > .pl-q { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: clamp(1.8rem, 4.5vw, 3.6rem); font-weight: 800; color: #b07aa1; border: 3px dashed #d9bfd0; border-radius: 16px; }
.pl-hide.shown > .pl-a { visibility: visible; }
.pl-hide.shown > .pl-q { display: none; }
.pl-hide.pl-hfig { flex: 1; min-height: 0; display: flex; }
.pl-hide.pl-hfig > .pl-a { flex: 1; display: flex; min-height: 0; }
.pl-plate { flex: 1; min-height: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 14px; }
.pl-plate .pl-paper svg { max-height: 56vh; }
.pl-def { font-size: clamp(1rem, 2vw, 1.5rem); max-width: 1100px; margin: 0 auto; text-align: center; }
.pl-k-cmp { flex-direction: row; }
.pl-side { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pl-side h3 { margin: 0; font-size: 1.3rem; text-align: center; }
.pl-side .pl-3d { height: 30vh; }
.pl-side .pl-paper svg { max-height: 26vh; }
.pl-side .pl-formula { font-size: clamp(1.1rem, 2.4vw, 2rem); }
.pl-photo { margin: 0; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pl-photo img { max-width: 100%; max-height: 66vh; border-radius: 10px; object-fit: contain; }
.pl-photo figcaption { font-size: clamp(1rem, 2.2vw, 1.6rem); text-align: center; }
.pl-cr { font-size: .85rem; opacity: .7; }
.pl-text { max-width: 1000px; margin: auto; text-align: center; }
.pl-text h2 { font-size: clamp(2rem, 5vw, 4rem); margin: 0 0 16px; }
.pl-text p { font-size: clamp(1.1rem, 2.4vw, 1.9rem); line-height: 1.4; }
.pl-bot { display: flex; gap: 8px; justify-content: center; padding: 8px; opacity: .35; transition: opacity .2s; flex-wrap: wrap; }
.pl-bot:hover, .pl-bot:focus-within { opacity: 1; }
.pl-b { font: inherit; border: 1px solid rgba(128, 100, 120, .4); background: transparent; color: inherit; border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.pl-b:disabled { opacity: .35; cursor: default; }
.pl-blank { position: absolute; inset: 0; background: #000; display: none; }
.pl.blank .pl-blank { display: block; }
.pl.dark .pl-t .muted { color: #c8b6c2; }
@media (max-width: 760px) { .pl-figs { grid-template-columns: 1fr; } .pl-k-cmp { flex-direction: column; } .pl-plate { grid-auto-flow: row; } }
/* printable sheets: the preview on screen and the page in print */
.p8-pcols { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 980px) { .p8-pcols { grid-template-columns: minmax(0, 1fr); } }
.p8-checks { display: flex; flex-direction: column; gap: 6px; max-height: 340px; overflow: auto; }
.p8-checks .q-grp { min-width: 0; }
.p8-checks.one { gap: 2px; }
.p8-quick { display: flex; gap: 6px; }
.p8-prev { overflow: auto; background: var(--bg-soft); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 14px; min-height: 200px; }
.pp-page { background: #fff; color: #1d1a1c; box-shadow: 0 2px 10px rgba(0, 0, 0, .15); padding: 11mm 12mm 14mm; box-sizing: border-box; position: relative; overflow: hidden; font-size: 9.5pt; line-height: 1.32; flex: none; }
.pp-letter { width: 216mm; height: 279mm; }
.pp-a4 { width: 210mm; height: 297mm; }
.pp-foot { position: absolute; bottom: 6mm; left: 12mm; right: 12mm; font-size: 7pt; color: #888; border-top: .3pt solid #ddd; padding-top: 1.5mm; }
.pp-h { border-bottom: 1.2pt solid #8c2f6f; margin-bottom: 4mm; padding-bottom: 2mm; }
.pp-h h1 { font-size: 20pt; margin: 0; color: #8c2f6f; }
.pp-sub { color: #555; font-size: 9pt; }
.pp-figs3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3mm; height: 62mm; margin-bottom: 3mm; }
.pp-fig { border: .3pt solid #e4dbe0; border-radius: 2mm; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5mm; background: #fcfafb; overflow: hidden; min-height: 0; }
.pp-fig svg { width: 100%; height: 100%; max-height: 100%; }
.pp-fig.tall { height: 58mm; }
.pp-fig.sm { height: 30mm; width: 30mm; display: inline-flex; vertical-align: middle; }
.pp-cap { font-size: 7pt; color: #666; }
.pp-formula { text-align: center; font-size: 17pt; margin: 1mm 0 3mm; }
.pp-formula.sm { font-size: 14pt; margin: 2mm 0; }
.pp-formula .ff { font-size: inherit; }
.pp-f2 { font-size: 13pt; color: #555; }
.pp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm; }
.pp-cols h3 { font-size: 10.5pt; margin: 2mm 0 1mm; color: #8c2f6f; }
.pp-cols p, .pp-cols ul { margin: 0 0 1.5mm; }
.pp-cols ul { padding-left: 4.5mm; }
.pp-page dfn { font-style: normal; text-decoration: none; border: none; }
.pp-tab { width: 100%; border-collapse: collapse; font-size: 8.5pt; margin-top: 3mm; }
.pp-tab th, .pp-tab td { border-bottom: .3pt solid #ddd; padding: .8mm 1.5mm; text-align: left; vertical-align: top; }
.pp-kv th { width: 42%; color: #666; font-weight: 600; }
.pp-photos { display: flex; gap: 3mm; margin-top: 3mm; }
.pp-photos figure { margin: 0; flex: 1; }
.pp-photos img { width: 100%; height: 34mm; object-fit: cover; border-radius: 1.5mm; }
.pp-photos figcaption { font-size: 7pt; color: #555; }
.pp-note { margin: 0 0 3mm; }
.pp-wh { display: flex; flex-direction: column; gap: 2mm; }
.pp-fields { display: flex; gap: 6mm; flex-wrap: wrap; font-size: 10pt; }
.pp-exgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 5mm; }
.pp-ex { border: .4pt solid #ccc; border-radius: 2mm; padding: 2.5mm; display: flex; flex-direction: column; gap: 2mm; break-inside: avoid; }
.pp-exh { font-weight: 600; font-size: 9.5pt; }
.pp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 2mm; height: 42mm; }
.pp-line { border-bottom: .6pt solid #999; height: 9mm; }
.pp-ex .pp-fig { height: 62mm; }
.pp-ex .pp-two .pp-fig { height: auto; }
.pp-blank { width: 100%; height: 100%; }
.pp-key { font-size: 9.5pt; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 2mm; }
.pp-dense .pp-figs3 { height: 52mm; }
.pp-dense { font-size: 8.6pt; line-height: 1.26; }
.pp-dense .pp-tab { font-size: 7.8pt; }
.pp-dense .pp-tab th, .pp-dense .pp-tab td { padding: .45mm 1.5mm; }
.pp-dense .pp-formula { font-size: 15pt; margin-bottom: 2mm; }
.pp-kfig { display: flex; align-items: center; gap: 3mm; }
.pp-ktxt .ff { font-size: 12pt; }
.pp-cards { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, 1fr); height: 100%; }
.pp-letter .pp-cards, .pp-a4 .pp-cards { height: calc(100% - 4mm); }
.pp-card { border: .4pt dashed #aaa; display: flex; align-items: center; justify-content: center; padding: 3mm; overflow: hidden; }
.pp-cfront { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.pp-cfront svg { width: 100%; height: 100%; }
.pp-cimg { max-width: 100%; max-height: 100%; object-fit: contain; }
.pp-cback { display: flex; flex-direction: column; align-items: center; gap: 1.5mm; text-align: center; font-size: 9pt; }
.pp-cback b { font-size: 13pt; }
.pp-def { font-size: 8.5pt; color: #444; }
/* my photos */
.p8-phbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.p8-drop { border: 2px dashed var(--border-strong); border-radius: 10px; padding: 6px 14px; font-size: .84rem; color: var(--text-muted); }
.p8-drop.on { border-color: var(--primary); color: var(--primary-text); }
.p8-phcols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 12px; align-items: start; }
@media (max-width: 860px) { .p8-phcols { grid-template-columns: minmax(0, 1fr); } }
.p8-phgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.p8-ph { border: 2px solid var(--border); border-radius: 10px; background: var(--card-bg); padding: 0; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; text-align: left; font: inherit; color: inherit; }
.p8-ph img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.p8-ph span { font-size: .78rem; padding: 4px 6px; }
.p8-ph.on { border-color: var(--primary); }
.p8-app { font-style: normal; font-size: .66rem; background: var(--primary-soft); color: var(--primary-text); border-radius: 999px; padding: 0 5px; }
.p8-phedit { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 104px; }
.p8-phedit label { display: flex; flex-direction: column; gap: 3px; font-size: .82rem; }
.p8-phbig { border: none; padding: 0; background: none; cursor: zoom-in; }
.p8-phbig img { width: 100%; max-height: 220px; object-fit: contain; border-radius: 8px; }
.p8-help { margin-top: 12px; font-size: .88rem; }
.p8-help summary { cursor: pointer; font-weight: 600; }
.fs-ph { margin-top: 12px; }
#printArea { display: none; }
.about-dlg { max-width: 720px; }
.about-b { display: flex; flex-direction: column; gap: 6px; font-size: .92rem; }
.about-b h4 { margin: 8px 0 0; }
.about-b p { margin: 0; }
.about-cite { background: var(--bg-soft); border-radius: 8px; padding: 8px 12px; font-size: .88rem; }

@media print {
  body.printing > :not(#printArea) { display: none !important; }
  body.printing #printArea { display: block; }
  body.printing .pp-page { box-shadow: none; margin: 0; break-after: page; page-break-after: always; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.printing .pp-page:last-child { break-after: auto; page-break-after: auto; }
  .topbar, .foot, .k-tabs, .k-bar, #k5Walk, .section-sub, .blk-title + .section-sub { display: none !important; }
  .k-full .k-row { font-size: 10pt; }
  .k-full a { color: #000; text-decoration: none; }
}