--pc-* vars so dark mode works (R-WEB-CLONE-DARK-MODE-SUPPORT). The .spl-* namespace is disjoint per ADR-033. */ .spl-younger{--spl-tile: 92px}.spl-younger .ff-btn{min-height:52px;font-size:1.05rem}.spl-hero{text-align:center}.spl-hero-emoji{font-size:4rem;line-height:1;display:block;margin:0 auto .3rem}.spl-hud{margin-top:.5rem;display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;justify-content:center}.spl-section-h{text-align:center;margin:.4rem 0 .8rem}.spl-activity-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;margin-bottom:1.2rem}@media (min-width: 620px){.spl-activity-grid{grid-template-columns:repeat(4,1fr)}}.spl-activity-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.3rem;padding:1.1rem .8rem;background:var(--ff-paper);text-decoration:none;color:var(--ff-anvil);border:3px solid var(--ff-forge);border-radius:20px;box-shadow:0 4px #0000001f;transition:transform .12s ease,box-shadow .12s ease;min-height:132px;justify-content:center}.spl-activity-card:hover,.spl-activity-card:focus-visible{transform:translateY(-3px);box-shadow:0 7px #00000024;outline:none}.spl-activity-emoji{font-size:2.6rem;line-height:1}.spl-activity-card strong{font-size:1.1rem;color:var(--ff-forge-text)}.spl-activity-blurb{font-size:.9rem;color:var(--ff-anvil);opacity:.75}.spl-stage{display:flex;flex-direction:column;align-items:center;gap:1rem}.spl-ref,.spl-hole{display:inline-flex;align-items:center;justify-content:center;padding:.5rem;background:var(--ff-warm);border:2px dashed var(--ff-forge);border-radius:16px}.spl-ref svg,.spl-hole svg{width:92px;height:92px}.spl-tiles{display:flex;gap:.9rem;flex-wrap:wrap;justify-content:center;margin-top:.4rem}.spl-tile{min-width:var(--spl-tile, 92px);min-height:var(--spl-tile, 92px);display:inline-flex;align-items:center;justify-content:center;padding:.4rem;background:var(--ff-paper);border:3px solid var(--ff-forge);border-radius:18px;cursor:pointer;box-shadow:0 4px #0000001f;transition:transform .1s ease}.spl-tile svg{width:72px;height:72px}.spl-tile:hover:not(:disabled){transform:translateY(-2px)}.spl-tile:disabled{cursor:default}.spl-tile--correct{background:var(--pc-correct-bg);border-color:var(--pc-correct)}.spl-tile--correct:after{content:"✓";position:absolute;margin:-64px 0 0 56px;font-size:1.4rem;font-weight:900;color:var(--pc-correct)}.spl-tile--wrong{background:var(--pc-incorrect-bg);border-color:var(--pc-incorrect);opacity:.85}.spl-tile{position:relative}.spl-tiles--color .spl-tile--color{min-width:72px;min-height:72px}.spl-swatch{width:48px;height:48px;border-radius:50%;border:3px solid var(--ff-anvil);display:block}.spl-bead-strip{display:flex;gap:.5rem;align-items:center;justify-content:center;flex-wrap:wrap}.spl-bead{width:44px;height:44px;border-radius:50%;border:3px solid var(--ff-anvil);box-shadow:0 3px #0000001f}.spl-bead--q{display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:900;background:var(--ff-warm);color:var(--ff-forge-text);border-style:dashed;border-color:var(--ff-forge)}.spl-mirror-grid{display:grid;grid-template-columns:repeat(var(--spl-cols, 4),1fr);gap:4px;width:min(360px,90vw);padding:8px;background:var(--ff-paper);border:3px solid var(--ff-forge-text);border-radius:16px}.spl-mirror-grid--done{border-color:var(--pc-correct)}.spl-mirror-cell{aspect-ratio:1;min-height:44px;padding:0;border:2px solid var(--ff-forge);border-radius:8px;background:var(--ff-paper)}.spl-mirror-cell--tap{cursor:pointer}.spl-mirror-cell--tap:hover:not(:disabled){background:var(--ff-warm)}.spl-mirror-cell--tap:disabled{cursor:default}.spl-mirror-cell--on{background:var(--pc-select, var(--ff-forge));border-color:var(--ff-forge-text)}.spl-mirror-axis{border-right:4px dashed var(--pc-select, var(--ff-slate))}.spl-mirror-readout{font-weight:800;color:var(--ff-forge-text);text-align:center;margin-top:.5rem}.spl-picture{display:flex;align-items:center;justify-content:center;min-height:150px}.spl-picture-scene{width:min(220px,72vw);height:auto}.spl-sc-stage{display:flex;flex-direction:column;align-items:center;gap:.85rem}.spl-sc-svg{width:200px;height:208px}.spl-sc-edge{stroke:var(--pc-select, var(--ff-forge));stroke-width:6;transition:opacity .2s ease}.spl-sc-dot{fill:var(--pc-correct, var(--ff-forge));stroke:var(--ff-outline);stroke-width:2;transition:opacity .2s ease}.spl-sc-readout{font-size:1.25rem;font-weight:900;color:var(--ff-anvil);background:var(--ff-paper);border:3px solid var(--ff-outline);border-radius:14px;padding:.25rem .9rem;font-variant-numeric:tabular-nums}.spl-sc-answers{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center}.spl-sc-answer{min-width:60px;min-height:60px;padding:.4rem .7rem;font-size:1.6rem;font-weight:900;color:var(--ff-anvil);background:var(--ff-paper);border:3px solid var(--ff-outline);border-radius:16px;box-shadow:0 4px #0000001f;cursor:pointer;transition:transform .1s ease;font-variant-numeric:tabular-nums}.spl-sc-answer:hover:not(:disabled){transform:translateY(-2px)}.spl-sc-answer:disabled{cursor:default}.spl-sc-answer--right{border-color:var(--pc-correct);background:var(--pc-correct-bg, var(--ff-paper))}.spl-sc-answer--nudge{animation:spl-sc-nudge .32s ease}@keyframes spl-sc-nudge{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}@media (prefers-reduced-motion: reduce){.spl-sc-answer--nudge{animation:none}.spl-sc-answer,.spl-sc-edge,.spl-sc-dot{transition:none}}