.cv2 {
  display: grid;
  gap: 1.25rem;
  --cv2-bg: #eff8f7;
  --cv2-paper: #fff;
  --cv2-ink: #183c45;
  --cv2-muted: #3c5f68;
  --cv2-accent: #176873;
  --cv2-accent-soft: #d9eeeb;
  --cv2-line: #9dbabf;
  --cv2-sky: #133e54;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 56rem;
  margin: 0 auto;
  padding: clamp(.75rem, 3vw, 1.75rem);
  border: 1px solid var(--cv2-line);
  border-radius: 1.5rem;
  background: var(--cv2-bg);
  color: var(--cv2-ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.cv2-ambar { --cv2-bg:#fff7e8; --cv2-ink:#482e1a; --cv2-muted:#6a4c32; --cv2-accent:#87441c; --cv2-accent-soft:#fae3c5; --cv2-line:#c6a683; --cv2-sky:#4d352e; }
.cv2-noite { --cv2-bg:#f1effa; --cv2-ink:#31284d; --cv2-muted:#595074; --cv2-accent:#58418a; --cv2-accent-soft:#e4dcf6; --cv2-line:#b3a6cd; --cv2-sky:#252440; }
.cv2 *, .cv2 *::before, .cv2 *::after { box-sizing:border-box; }
.cv2 :where(p, h2, h3, figure) { margin:0; }
.cv2 :where(p, h2, h3, figcaption, button, summary) { overflow-wrap:anywhere; }
.cv2 :where(button, input, summary):focus-visible { outline:3px solid #bd461d; outline-offset:4px; }
.cv2 :where(h3):focus { outline:2px solid var(--cv2-accent); outline-offset:5px; }
.cv2-header, .cv2-body { display:grid; gap:1rem; min-width:0; }
.cv2-kicker { color:var(--cv2-muted); font-size:.78em; font-weight:750; letter-spacing:.04em; }
.cv2-title { font-size:clamp(1.5em, 5vw, 2em); line-height:1.2; }
.cv2-view-title { font-size:1.25em; line-height:1.3; }
.cv2-scope { background:var(--cv2-accent-soft); padding:.75rem; border-radius:.75rem; font-size:.92em; }
.cv2-provisional, .cv2-small, .cv2-session-note { color:var(--cv2-muted); font-size:.88em; }
.cv2-person { display:grid; justify-items:center; align-content:start; gap:.5rem; text-align:center; min-width:0; }
.cv2-portrait { display:block; width:6rem; max-width:100%; height:auto; }
.cv2-person-caption { display:grid; gap:.1rem; }
.cv2-person-role { color:var(--cv2-muted); font-size:.8em; }
.cv2-person-name { font-weight:750; }
.cv2-review-nav { display:flex; flex-wrap:wrap; gap:.5rem; margin:1.25rem 0; padding:1rem 0; border-block:1px solid var(--cv2-line); }
.cv2-review-nav[hidden] { display:none; }
.cv2-button { appearance:none; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:48px; min-width:48px; max-width:100%; padding:.7rem 1rem; margin:0; border:2px solid var(--cv2-accent); border-radius:.75rem; background:var(--cv2-accent); color:#fff; font:inherit; font-weight:700; line-height:1.35; text-align:center; white-space:normal; cursor:pointer; touch-action:manipulation; }
.cv2-button-secondary { background:var(--cv2-paper); color:var(--cv2-accent); }
.cv2-button[aria-pressed="true"] { background:var(--cv2-accent); color:#fff; box-shadow:0 0 0 2px var(--cv2-paper),0 0 0 4px var(--cv2-accent); }
.cv2-actions { display:flex; flex-wrap:wrap; gap:.65rem; align-items:stretch; }
.cv2-actions > .cv2-button { flex:1 1 9rem; }
.cv2-personal { display:grid; gap:.8rem; padding:1rem; border:1px solid var(--cv2-line); border-radius:1rem; background:var(--cv2-paper); }
.cv2-personal-heading { display:flex; align-items:center; gap:1rem; min-width:0; }
.cv2-personal-heading > div { min-width:0; }
.cv2-symbol { display:block; width:3.5rem; height:3.5rem; flex:0 0 3.5rem; max-width:100%; }
.cv2-milestone-label { font-size:1.15em; line-height:1.4; }
.cv2-attribution { color:var(--cv2-muted); font-size:.9em; }
.cv2-personal-text { white-space:pre-wrap; }
.cv2-board-section { display:grid; gap:.8rem; min-width:0; }
.cv2-board-directions { font-size:.93em; }
.cv2-path-description { background:var(--cv2-paper); padding:.6rem .8rem; border-radius:.7rem; }
.cv2-path-description summary { min-height:48px; display:list-item; align-content:center; cursor:pointer; }
.cv2-edge-list { margin:.5rem 0; padding-left:1.5rem; }
.cv2-notice { padding:.8rem 1rem; border-left:4px solid var(--cv2-accent); background:var(--cv2-accent-soft); border-radius:.3rem; }
.cv2-sky { position:relative; display:grid; justify-items:center; gap:1rem; min-width:0; padding:1.5rem 1rem; border-radius:1.25rem; background:var(--cv2-sky); color:#fff7da; text-align:center; }
.cv2-sky-title { font-size:1.1em; font-weight:600; }
.cv2-orbit { display:grid; place-items:center; width:7rem; height:7rem; border:2px dashed #e8dba5; border-radius:50%; color:#fff0ac; }
.cv2-orbit .cv2-symbol { width:4.5rem; height:4.5rem; }
.cv2-empty-star { font-size:2em; }
.cv2-sky-label { font-weight:700; white-space:pre-wrap; }
.cv2-sky-scope { font-size:.85em; color:#e0e7ec; }
.cv2-sky-stars { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.7rem; width:100%; }
.cv2-star { position:relative; min-width:0; padding:.65rem; border:1px dashed #d9d1a6; border-radius:1rem; }
.cv2-star-complete[open]::before, .cv2-star-complete[open] + .cv2-star-complete::before { display:none; }
.cv2-star-empty { display:grid; align-content:center; justify-items:center; min-height:8rem; font-size:.8em; }
.cv2-star-summary { display:flex; flex-direction:column; align-items:center; gap:.4rem; min-height:48px; cursor:pointer; }
.cv2-star-summary .cv2-symbol { width:2.75rem; height:2.75rem; }
.cv2-star-complete { background:#ffffff10; }
.cv2-star-complete .cv2-attribution { color:#e5e1cd; }
.cv2-star-complete .cv2-personal-text { margin-top:.6rem; text-align:left; }
.cv2-star-complete[open] { grid-column:1/-1; }
.cv2-star-complete[open] .cv2-star-summary { align-items:flex-start; }
.cv2-sky-note { font-size:.82em; color:#e5e1cd; }
.cv2-ending, .cv2-reader, .cv2-read-part { display:grid; gap:1rem; min-width:0; }
.cv2-read-part { margin:1rem 0; padding-block:1rem; border-block:1px solid var(--cv2-line); }
.cv2-final-message { white-space:pre-wrap; padding:1.25rem; border:2px solid var(--cv2-accent); border-radius:1rem; background:var(--cv2-paper); font-size:1.12em; }
.cv2[data-motion="full"] .cv2-star-complete { animation:cv2-arrive .4s ease-out both; }
.cv2[data-motion="full"] .cv2-sky-revealed .cv2-orbit { animation:cv2-arrive .4s ease-out both; }
.cv2-live:empty { display:none; margin:0; }
.cv2-live:not(:empty) { margin-top:1rem; padding:.7rem; border:1px solid var(--cv2-line); border-radius:.6rem; }
.cv2-session-note { margin-top:1.25rem; }
@keyframes cv2-arrive { from { opacity:.4; transform:scale(.92); } to { opacity:1; transform:scale(1); } }
@media (max-width:360px) { .cv2-board { gap:5px; } .cv2-personal { padding:.75rem; } .cv2-personal-heading { gap:.6rem; } }
@media (prefers-reduced-motion:reduce) { .cv2 .cv2-orbit { animation:none !important; } }
.cv2[data-motion="reduced"] .cv2-orbit { animation:none; }
@media (prefers-reduced-motion:reduce) { .cv2 .cv2-star-complete { animation:none !important; } }
.cv2[data-motion="reduced"] .cv2-star-complete { animation:none; }
@media (max-width:360px) { .cv2-sky { padding:1rem .6rem; } .cv2-sky-stars { gap:.35rem; } .cv2-star { padding:.4rem; } .cv2-star-summary strong { font-size:.85em; } }
@media (forced-colors:active) { .cv2 .cv2-tile, .cv2 .cv2-button, .cv2 .cv2-sky { border:2px solid CanvasText; } }


/* The path, labels and controls have independent geometry. Every tile has an equal square canvas. */
.cv2-board-frame { display:grid; grid-template-columns:clamp(2rem,8vw,5.5rem) minmax(0,1fr) clamp(2rem,8vw,5.5rem); align-items:center; gap:.3rem; width:100%; max-width:42rem; margin-inline:auto; min-width:0; }
.cv2-board-frame .cv2-person { gap:.25rem; font-size:clamp(.56rem,1.7vw,.86rem); line-height:1.25; }
.cv2-board-frame .cv2-person-role { font-size:.9em; }
.cv2-board-frame .cv2-portrait { width:100%; }
.cv2-board-stage { position:relative; min-width:0; padding:8px; }
.cv2-board { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; width:100%; min-width:0; container-type:inline-size; }
.cv2-tile { appearance:none; position:relative; display:block; min-width:44px; width:100%; aspect-ratio:1; padding:0; margin:0; border:2px solid var(--cv2-line); border-radius:.6rem; background:#f3f3ef; color:var(--cv2-ink); font:inherit; cursor:default; opacity:1; overflow:visible; }
.cv2-tile-movable { border-color:var(--cv2-accent); background:var(--cv2-paper); }
.cv2-tile-movable:not(:disabled) { cursor:pointer; box-shadow:0 2px 0 var(--cv2-accent); touch-action:manipulation; }
.cv2-tile-indicated { outline:3px dashed #bd461d; outline-offset:2px; }
.cv2-pipe { display:block; width:100%; height:100%; aspect-ratio:1; color:var(--cv2-muted); }
.cv2-tile-id, .cv2-tile-kind { position:absolute; z-index:3; left:3px; max-width:calc(50% - 8px); text-align:left; line-height:1; font-weight:750; white-space:nowrap; color:var(--cv2-ink); pointer-events:none; }
.cv2-tile-id { top:3px; font-size:clamp(9px,3.3cqi,13px); }
.cv2-tile-kind { bottom:3px; font-size:clamp(8px,2.65cqi,11px); }
.cv2-solution-line { position:absolute; inset:0; z-index:2; display:block; width:100%; height:100%; color:var(--cv2-accent); pointer-events:none; overflow:visible; }
.cv2-destination { display:flex; align-items:center; gap:.6rem; padding:.65rem .85rem; border:1px solid var(--cv2-line); border-radius:.6rem; background:var(--cv2-accent-soft); font-weight:750; }
.cv2-destination .cv2-symbol { width:2rem; height:2rem; flex:0 0 2rem; }
.cv2-port-marker { position:absolute; z-index:4; display:grid; place-items:center; width:20px; height:20px; background:var(--cv2-accent); color:white; border:1px solid var(--cv2-paper); border-radius:50%; font-size:15px; line-height:1; pointer-events:none; }
.cv2-port-marker[data-port="W"] { left:-10px; top:calc(50% - 10px); }
.cv2-port-marker[data-port="E"] { right:-10px; top:calc(50% - 10px); }
.cv2-port-marker[data-port="N"] { top:-10px; left:calc(50% - 10px); }
.cv2-port-marker[data-port="S"] { bottom:-10px; left:calc(50% - 10px); }
.cv2-port-marker[data-port="N"][data-endpoint="entry"] { transform:rotate(90deg); }
.cv2-port-marker[data-port="N"][data-endpoint="exit"] { transform:rotate(-90deg); }
.cv2-header[hidden], .cv2-session-note[hidden] { display:none; }
.cv2-reveal-mask { position:absolute; inset:0; z-index:5; display:grid; place-items:center; padding:12px; border-radius:.6rem; background:color-mix(in srgb,var(--cv2-paper) 65%,transparent); }
.cv2-reveal-overlay { display:flex; flex-direction:column; gap:8px; padding:12px; width:100%; background:var(--cv2-paper); color:var(--cv2-accent); border:2px solid var(--cv2-accent); overflow-wrap:anywhere; }
.cv2-reveal-overlay .cv2-symbol { width:48px; height:48px; flex:0 0 48px; }
.cv2-reveal-label { font-size:.9em; }
.cv2-personal[data-cv2-key="message"]:focus { outline:3px solid var(--cv2-accent); outline-offset:4px; }
/* On narrow boards the reveal region grows; neither label nor touch target is clipped. */
.cv2-board-stage:has(.cv2-reveal-mask) { min-height:15rem; }
@media (forced-colors:active) { .cv2-reveal-mask { background:Canvas; } .cv2-reveal-overlay { border-color:ButtonText; color:ButtonText; } }
@media (max-width:440px) { .cv2 {padding:.65rem;font-size:16px;} .cv2-board-frame {grid-template-columns:2.5rem minmax(0,1fr) 2.5rem;gap:0;} .cv2-board {gap:6px;} .cv2-board-stage {padding:8px;} .cv2-board-frame .cv2-person {font-size:.65rem;} .cv2-board-frame .cv2-person-role {font-size:.82em;} }