/* ═══════════ 海圖房 · Chart Room ═══════════
   Design language: plotting your own coordinates in a quiet chart room.
   Graph-paper page, hairline ink, plates with registration marks; the
   Song-serif voice for the words that matter, quiet sans for the machinery.
   Depth is borders-only — no shadows anywhere. */

:root{
  color-scheme: light;
  --page:#efeade; --surface-1:#faf7ee;
  --ink-1:#22281f; --ink-2:#565c4d; --ink-3:#6b7261;
  --grid:#e0d9c6; --axis:#b4ac95; --ring:rgba(34,40,31,.16);
  --accent:#1f5f54; --accent-soft:#d9e6df; --accent-ink:#ffffff;
  --paper-line:rgba(34,40,31,.045);
  --s1:#2a78d6; --s2:#008300; --s3:#e87ba4; --s4:#eda100;
  --s5:#1baf7a; --s6:#eb6834; --s7:#4a3aa7; --s8:#e34948;
  --good:#0ca30c; --warn:#fab219; --serious:#ec835a; --crit:#c53131;
  --serif:"BF Serif","Songti TC","Noto Serif TC","Songti SC","Source Han Serif TC","PMingLiU",Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI","PingFang HK","PingFang TC","Microsoft JhengHei",sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:where(:not([data-theme="light"])){
    color-scheme: dark;
    --page:#10140f; --surface-1:#181d17;
    --ink-1:#edf0e9; --ink-2:#c1c6b9; --ink-3:#8f9486;
    --grid:#272c25; --axis:#454b40; --ring:rgba(237,240,233,.14);
    --accent:#6fb5a2; --accent-soft:#20362f; --accent-ink:#0e1310;
    --paper-line:rgba(237,240,233,.035);
    --s1:#3987e5; --s2:#008300; --s3:#d55181; --s4:#c98500;
    --s5:#199e70; --s6:#d95926; --s7:#9085e9; --s8:#e66767;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --page:#10140f; --surface-1:#181d17;
  --ink-1:#edf0e9; --ink-2:#c1c6b9; --ink-3:#8f9486;
  --grid:#272c25; --axis:#454b40; --ring:rgba(237,240,233,.14);
  --accent:#6fb5a2; --accent-soft:#20362f; --accent-ink:#0e1310;
  --paper-line:rgba(237,240,233,.035);
  --s1:#3987e5; --s2:#008300; --s3:#d55181; --s4:#c98500;
  --s5:#199e70; --s6:#d95926; --s7:#9085e9; --s8:#e66767;
}

/* 自載宋體子集（Noto Serif TC 600, OFL）；缺字時逐字回退到系統字型 */
@font-face{
  font-family:"BF Serif";
  src:url("../fonts/serif-subset.woff2") format("woff2");
  font-weight:100 900;
  font-display:swap;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--page); color:var(--ink-1);
  /* 方格紙 · the graph paper the whole room sits on */
  background-image:
    linear-gradient(var(--paper-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--paper-line) 1px, transparent 1px);
  background-size:28px 28px;
  font-family:var(--sans);
  line-height:1.7; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:860px;margin:0 auto;padding:16px 16px 96px}

/* ── 頁首：圖版標題欄 · header cartouche ── */
header.app{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:20px 4px 6px}
header.app h1{font-family:var(--serif);font-size:1.5rem;font-weight:700;margin:0;letter-spacing:.05em}
header.app .sub{color:var(--ink-3);font-size:.75rem;letter-spacing:.14em}
#langBtn,#themeBtn{border:1px solid var(--ring);background:var(--surface-1);color:var(--ink-2);
  border-radius:6px;padding:4px 12px;font-size:.8rem;cursor:pointer}
#langBtn:hover,#themeBtn:hover{border-color:var(--accent);color:var(--accent)}
#langBtn{margin-left:auto;font-weight:700;min-width:44px}

/* ── 導覽：圖冊索引標籤 · index tabs ── */
nav.tabs{display:flex;gap:6px;overflow-x:auto;padding:12px 2px 0;position:sticky;top:0;z-index:5;
  background:var(--page);border-bottom:1px solid var(--ring)}
nav.tabs button{
  flex:0 0 auto;border:1px solid transparent;border-bottom:none;background:transparent;color:var(--ink-2);
  padding:9px 16px 11px;font-size:.95rem;cursor:pointer;white-space:nowrap;
  border-radius:6px 6px 0 0;font-family:var(--sans);
}
nav.tabs button:hover{color:var(--accent)}
nav.tabs button[aria-selected="true"]{
  color:var(--ink-1);font-weight:700;background:var(--surface-1);
  border-color:var(--ring);box-shadow:inset 0 2px 0 var(--accent);
}
.nav-collab-short{display:none}

/* ── 圖版 · plates (cards) ── */
.card{background:var(--surface-1);border:1px solid var(--ring);border-radius:6px;
  padding:22px 20px;margin:16px 0;position:relative}
/* 對位記號 · registration ticks at opposite corners */
.card::before,.card::after{content:"";position:absolute;width:12px;height:12px;pointer-events:none;
  border:0 solid var(--axis);opacity:.75}
.card::before{top:-5px;left:-5px;border-top-width:1px;border-left-width:1px}
.card::after{bottom:-5px;right:-5px;border-bottom-width:1px;border-right-width:1px}
.card h2{font-family:var(--serif);font-size:1.15rem;margin:0 0 8px;letter-spacing:.03em}
.card h3{font-size:.98rem;margin:16px 0 6px;font-weight:600}
.card.hero{padding:30px 24px 26px}
.eyebrow{margin:0 0 10px;font-size:.72rem;letter-spacing:.22em;color:var(--accent);font-weight:700;text-transform:uppercase}
.herotitle{font-family:var(--serif);font-size:1.7rem;line-height:1.45;margin:0 0 6px;text-wrap:balance;font-weight:700}
.muted{color:var(--ink-2);font-size:.92rem}
.tiny{color:var(--ink-3);font-size:.84rem}

/* ── 歡迎頁：安全基地與資訊圖 · secure base & information graphics ── */
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(250px,.85fr);
  grid-template-areas:
    "eyebrow route"
    "title route"
    "body route"
    "axes route"
    "actions route";
  gap:8px 30px;align-items:start;
}
.hero-grid>.eyebrow{grid-area:eyebrow}
.hero-grid>.herotitle{grid-area:title}
.hero-body{grid-area:body;margin:8px 0 5px}
.axis-pair{grid-area:axes;display:grid;gap:7px;margin:7px 0}
.axis-pair>div{
  display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:8px;
  color:var(--ink-2);font-size:.81rem;line-height:1.45;
}
.axis-mark{
  display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--axis);
  color:var(--accent);font-size:.7rem;font-weight:800;font-variant-numeric:tabular-nums;
}
.hero-actions{grid-area:actions;margin:11px 0 0}
.hero-route{
  grid-area:route;min-width:0;margin:0;align-self:center;padding:10px 0 4px 18px;
  border-left:1px solid var(--grid);
}
.hero-route svg{display:block;width:100%;height:auto;overflow:visible}
.route-contours path{fill:none;stroke:var(--axis);stroke-width:1;opacity:.34}
.route-base-ring{fill:none;stroke:var(--accent);stroke-width:1;opacity:.55}
.route-base,.route-station{fill:var(--accent)}
.route-station{opacity:.76}
.route-line{
  fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:590;stroke-dashoffset:590;
  animation:route-draw 2.2s .3s cubic-bezier(.5,0,.3,1) forwards;
}
.hero-route figcaption{
  max-width:24ch;margin:-2px auto 0;text-align:center;color:var(--ink-3);
  font-family:var(--serif);font-size:.8rem;line-height:1.55;
}
@keyframes route-draw{to{stroke-dashoffset:0}}

.frame-intro{max-width:68ch;margin:0 0 16px}
.frame-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.frame-path{
  min-width:0;padding:17px 16px 15px;border:1px solid var(--ring);background:var(--page);
  display:flex;flex-direction:column;
}
.frame-path h3{margin:1px 0 12px;font-family:var(--serif);font-size:1.06rem}
.frame-path>p:last-child{margin:12px 0 0;color:var(--ink-2);font-size:.86rem}
.path-kicker{
  margin:0;color:var(--ink-3);font-size:.67rem;font-weight:750;
  letter-spacing:.17em;text-transform:uppercase;
}
.path-nodes{display:grid;gap:0;margin:0}
.path-nodes span{
  position:relative;min-width:0;padding:8px 8px 8px 27px;border-top:1px solid var(--grid);
  color:var(--ink-2);font-size:.82rem;line-height:1.4;overflow-wrap:anywhere;
}
.path-nodes span:last-child{border-bottom:1px solid var(--grid)}
.path-nodes span::before{
  content:"";position:absolute;left:7px;top:50%;width:7px;height:7px;border-radius:50%;
  background:var(--ink-3);transform:translateY(-50%);
}
.frame-safety .path-nodes span::before{background:var(--accent)}
.same-person{
  margin:15px 0 0;padding:12px 14px;border-left:3px solid var(--accent);
  background:var(--accent-soft);font-family:var(--serif);font-weight:650;line-height:1.65;
}
.frame-note{margin:9px 0 0}

.purpose-section>.muted{max-width:62ch;margin-top:0}
.purpose-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:15px}
.purpose-card{
  min-width:0;padding:15px 14px;border:1px solid var(--ring);background:var(--page);
  display:flex;flex-direction:column;align-items:flex-start;
}
.purpose-card h3{margin:6px 0 7px;font-family:var(--serif);line-height:1.45}
.purpose-card p{margin:0 0 14px;color:var(--ink-2);font-size:.84rem;line-height:1.58}
.purpose-card .buttonlink,.purpose-card button{margin-top:auto}
.purpose-card button.primary{padding:9px 14px;font-size:.86rem}
.purpose-card .buttonlink.ghost{padding:8px 12px;font-size:.78rem;line-height:1.45}
.purpose-no{color:var(--accent);font-size:.68rem;font-weight:800;letter-spacing:.18em}
.purpose-prepare{border-color:var(--accent);box-shadow:inset 0 2px 0 var(--accent)}

.privacy-card{padding-top:17px;padding-bottom:17px}
.privacy-card h2{font-size:1.02rem}
.privacy-lead{margin:4px 0 9px;color:var(--ink-2);font-size:.89rem}
.privacy-card details{border-top:1px solid var(--grid);border-bottom:1px solid var(--grid)}
.privacy-card summary{
  min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  color:var(--accent);font-size:.82rem;font-weight:650;cursor:pointer;list-style:none;
}
.privacy-card summary::-webkit-details-marker{display:none}
.privacy-card summary::after{content:"＋";font-size:1rem;font-weight:400}
.privacy-card details[open] summary::after{content:"−"}
.privacy-card details p{margin:0;padding:1px 0 12px}
.privacy-card>.tiny{margin:10px 0 0}

.snapshot-markers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:13px 0}
.snapshot-marker{
  min-width:0;padding:11px 10px;border-top:1px solid var(--axis);background:var(--page);
  display:grid;gap:4px;
}
.snapshot-marker span{color:var(--accent);font-size:.65rem;font-weight:800;letter-spacing:.14em}
.snapshot-marker strong{font-size:.82rem;line-height:1.45}

.term-heading{font-family:var(--serif);font-size:.93rem;margin:16px 0 8px}
.term-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 19px}
.term-card{
  min-width:0;padding:10px 11px;border:1px solid var(--grid);background:var(--page);
  display:grid;gap:2px;
}
.term-card strong{color:var(--accent);font-size:.79rem;letter-spacing:.025em;overflow-wrap:anywhere}
.term-card span{color:var(--ink-2);font-size:.78rem;line-height:1.45}

/* ── 按鈕 · buttons ── */
button{transition:transform .12s ease, background-color .15s ease, color .15s ease,
  border-color .15s ease, box-shadow .15s ease}
button.primary,.buttonlink.primary{
  background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent);border-radius:8px;
  padding:12px 26px;font-size:1rem;font-weight:700;cursor:pointer;font-family:var(--sans);
}
button.primary:hover,.buttonlink.primary:hover{filter:brightness(1.07)}
button.ghost,.buttonlink.ghost{
  background:transparent;color:var(--ink-2);border:1px solid var(--ring);
  border-radius:8px;padding:10px 18px;font-size:.9rem;cursor:pointer;
}
button.ghost:hover,.buttonlink.ghost:hover{border-color:var(--accent);color:var(--accent)}
.buttonlink{display:inline-block;text-decoration:none;margin:4px 6px 4px 0;box-sizing:border-box}
.actionrow{display:flex;flex-wrap:wrap;gap:4px;margin:16px 0 0}
button:disabled{opacity:.4;cursor:not-allowed}
button.primary:active,.scale button:active,.likert5 button:active{transform:scale(.96)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── 選項標籤 · chips ── */
.mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:8px 0 13px}
.mode-choice{
  min-width:0;min-height:82px;padding:13px 14px;text-align:left;border:1px solid var(--ring);
  border-radius:6px;background:var(--page);color:var(--ink-2);cursor:pointer;
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;
}
.mode-choice strong{color:var(--ink-1);font-family:var(--serif);font-size:.95rem;line-height:1.4}
.mode-choice span{font-size:.78rem;line-height:1.45}
.mode-choice:hover{border-color:var(--accent)}
.mode-choice[aria-pressed="true"]{
  border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 2px 0 0 var(--accent);
}
.identity-panel{
  margin:12px 0 16px;padding:14px;border:1px solid var(--axis);border-left:2px solid var(--accent);
  border-radius:6px;background:var(--surface-1)
}
.field-coordinate{font-size:.68rem;line-height:1.4;letter-spacing:.16em;color:var(--accent);font-weight:700}
.field-label-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:5px 0 8px}
.field-label-row label{font-weight:700;color:var(--ink-1)}
.required-tag{font-size:.72rem;color:var(--crit);white-space:nowrap}
.field-hint{margin:6px 0 0}
.field-error{margin:6px 0 0;color:var(--crit);font-size:.82rem;font-weight:600}
.chiprow{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.chip{border:1px solid var(--ring);background:var(--page);color:var(--ink-2);
  border-radius:6px;padding:8px 15px;font-size:.9rem;cursor:pointer}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);
  color:var(--ink-1);font-weight:600;box-shadow:inset 2px 0 0 var(--accent)}
input[type=text]{
  width:100%;padding:12px 14px;border-radius:8px;border:1px solid var(--ring);
  background:var(--page);color:var(--ink-1);font-size:1rem;font-family:var(--sans);
}
input[type=text]:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
#collabOther{margin:0 0 12px}

/* ── 作答：航線與測站 · plotted course & station marker ── */
.progress{height:2px;margin:16px 0 20px;position:relative;border-radius:0;
  background:repeating-linear-gradient(90deg, var(--axis) 0 6px, transparent 6px 12px)}
.progress>div{height:100%;background:var(--accent);transition:width .35s ease;position:relative}
.progress>div::after{
  content:"";position:absolute;right:-4px;top:50%;transform:translateY(-50%) rotate(45deg);
  width:8px;height:8px;background:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.question-stage{display:grid;align-items:center;min-height:7.2rem;margin:5px 0 4px}
.qtext{font-family:var(--serif);font-size:1.35rem;line-height:1.75;font-weight:600;
  margin:0;text-align:start;text-wrap:pretty;overflow-wrap:break-word}
html[lang^="en"] .qtext{font-family:Georgia,"Times New Roman",serif}
.qanim{animation:fade-up .38s ease}
.scale{display:flex;align-items:center;justify-content:space-between;gap:2px;margin:18px 0 0}
.scale button,.likert5 button{
  flex:1;background:none;border:none;cursor:pointer;padding:0;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
}
.scale button{height:60px}
.dotv{display:block;border-radius:50%;border:2px solid var(--axis);background:transparent;
  transition:border-color .15s ease, background-color .15s ease, transform .15s ease, box-shadow .15s ease}
.scale button:nth-child(1) .dotv{width:42px;height:42px}
.scale button:nth-child(2) .dotv{width:34px;height:34px}
.scale button:nth-child(3) .dotv{width:27px;height:27px}
.scale button:nth-child(4) .dotv{width:21px;height:21px}
.scale button:nth-child(5) .dotv{width:27px;height:27px}
.scale button:nth-child(6) .dotv{width:34px;height:34px}
.scale button:nth-child(7) .dotv{width:42px;height:42px}
.scale button:hover .dotv,.likert5 button:hover .dotv{border-color:var(--accent);background:var(--accent-soft)}
.scale button[aria-pressed="true"] .dotv,.likert5 button[aria-pressed="true"] .dotv{
  background:var(--accent);border-color:var(--accent);transform:scale(1.08);
  box-shadow:0 0 0 3px var(--accent-soft)}
.scale button:disabled{opacity:1;cursor:default}
.scalelabel{text-align:center;font-size:.88rem;color:var(--accent);font-weight:600;min-height:1.5em;margin:4px 0 0}
.anchors{display:flex;justify-content:space-between;font-size:.78rem;color:var(--ink-3)}
.quiznav{display:flex;justify-content:space-between;margin-top:20px;gap:10px}

/* ── 結果：座標讀數 · coordinate readouts ── */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.tile{background:var(--page);border:1px solid var(--ring);border-radius:8px;padding:12px 16px;
  position:relative;display:flex;flex-direction:column-reverse;gap:2px;
  box-shadow:inset 2px 0 0 var(--accent)}
.tile .v{font-size:1.9rem;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums}
.tile .l{font-size:.74rem;color:var(--ink-3);letter-spacing:.08em}
/* 風格印章 · the style stamp */
.badge{display:inline-block;padding:5px 15px;border-radius:6px;font-weight:700;font-size:1.02rem;
  background:transparent;color:var(--accent);border:1.5px solid var(--accent);
  font-family:var(--serif);letter-spacing:.08em;
  animation:badge-in .5s cubic-bezier(.2,.9,.3,1.2)}
.badge-sm{padding:1px 9px;font-size:.85rem;animation:none}
@keyframes badge-in{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}

/* ── 地形圖 · chart ── */
.chartbox{overflow-x:auto}
figure.viz{margin:8px 0}
figure.viz svg{display:block;max-width:100%;height:auto}
.legend{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
.legend button{display:flex;align-items:center;gap:6px;border:1px solid var(--ring);border-radius:6px;
  background:var(--page);color:var(--ink-2);padding:5px 12px;font-size:.85rem;cursor:pointer}
.legend button:hover{border-color:var(--accent)}
.legend button[aria-pressed="false"]{opacity:.35}
.legend .dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.pointinfo{border:1px dashed var(--axis);border-radius:8px;padding:10px 14px;margin-top:10px;
  font-size:.9rem;color:var(--ink-2);background:var(--page)}

/* ── 紀錄 · records ── */
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{text-align:left;padding:8px 8px;border-bottom:1px solid var(--grid);font-variant-numeric:tabular-nums}
th{color:var(--ink-3);font-weight:600;font-size:.74rem;letter-spacing:.1em}
tbody tr:hover td{background:var(--page)}
td .del{color:var(--crit);background:none;border:none;cursor:pointer;font-size:.85rem}
td .del:hover,h3 .del:hover{text-decoration:underline}
h3 .del{color:var(--crit);background:none;border:none;cursor:pointer;font-size:.85rem}

/* ── 檢核表 · checklist ── */
.likert5{display:flex;align-items:center;justify-content:space-between;gap:2px;margin:8px 0 0}
.likert5 button{height:48px}
.likert5 button:nth-child(1) .dotv{width:34px;height:34px}
.likert5 button:nth-child(2) .dotv{width:27px;height:27px}
.likert5 button:nth-child(3) .dotv{width:21px;height:21px}
.likert5 button:nth-child(4) .dotv{width:27px;height:27px}
.likert5 button:nth-child(5) .dotv{width:34px;height:34px}
.clitem{padding:13px 0;border-bottom:1px solid var(--grid)}
.clitem p{margin:0 0 4px;font-size:.95rem}
#collabQuestionStage #collabItems{width:100%}
#collabQuestionStage{min-height:10rem}
#collabItems .clitem{padding:0;border-bottom:0}
#collabItems .qtext{margin:0;font-size:1.28rem;line-height:1.7}
.quiz-glossary{margin:18px 0 0;border-top:1px solid var(--grid);padding-top:10px}
.quiz-glossary summary{cursor:pointer;color:var(--ink-2);font-size:.84rem;font-weight:600}
.quiz-glossary .term-grid{margin:10px 0 0}

/* ── 其他 · misc ── */
dialog{border:1px solid var(--ring);border-radius:6px;background:var(--surface-1);color:var(--ink-1);max-width:420px;padding:22px}
dialog::backdrop{background:rgba(10,14,10,.55)}
dialog h2{font-family:var(--serif)}
.hide{display:none !important}
footer.app{margin-top:30px;color:var(--ink-3);font-size:.78rem;line-height:1.8;
  border-top:1px solid var(--ring);padding-top:16px}
a{color:var(--accent)}

/* ── 進場 · view entrance ── */
section{animation:fade-up .4s ease}
@keyframes fade-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (max-width:700px){
  .hero-grid{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"eyebrow" "title" "route" "body" "axes" "actions";
    gap:7px;
  }
  .hero-route{padding:2px 0 9px;border-left:0;border-bottom:1px solid var(--grid)}
  .hero-route svg{max-height:190px}
  .hero-route figcaption{margin-top:-12px}
  .frame-grid{grid-template-columns:minmax(0,1fr)}
  .purpose-grid{grid-template-columns:minmax(0,1fr)}
  .purpose-card{padding:14px 15px}
}

@media (max-width:390px){
  nav.tabs{gap:3px}
  nav.tabs button{padding-left:14px;padding-right:14px}
  .nav-collab-long{display:none}
  .nav-collab-short{display:inline}
}

@media (max-width:520px){
  .card.hero{padding:25px 20px 22px}
  .mode-grid{grid-template-columns:minmax(0,1fr)}
  .mode-choice{min-height:0}
  .question-stage{min-height:8.6rem}
  .snapshot-markers{grid-template-columns:minmax(0,1fr)}
  .snapshot-marker{grid-template-columns:27px minmax(0,1fr);align-items:center;gap:7px}
  .term-grid{grid-template-columns:minmax(0,1fr)}
  #collabQuestionStage{min-height:13rem}
}

@media (max-width:360px){
  .wrap{padding-left:10px;padding-right:10px}
  .card{padding-left:15px;padding-right:15px}
  .herotitle{font-size:1.48rem}
  .question-stage{min-height:10rem}
  #collabQuestionStage{min-height:13rem}
  .qtext{font-size:1.25rem;line-height:1.7}
  .hero-actions button,.purpose-card .buttonlink,.purpose-card button{width:100%;text-align:center;margin-right:0}
  .axis-pair>div{font-size:.77rem}
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important}
  .route-line{stroke-dashoffset:0}
}

@media print{
  body{background-image:none}
  .route-contours{display:none}
  details>summary{display:none !important}
  details>:not(summary){display:block !important}
}