:root{
  --gap-opt:.4rem;
  --paper:#F6F7F5; --ink:#1B2427; --muted:#5D6C71; --line:#DCE1DF;
  --accent:#0E6E6B; --accent-soft:#E4F0EF; --card:#FFFFFF;
  --warn:#8A5A14; --warn-soft:#FAF3E4; --err:#A8342C; --err-soft:#FBEDEC;
  --r:10px;
}
@media (prefers-color-scheme: dark){
  :root{ --paper:#12181A; --ink:#E6EBE9; --muted:#94A5A9; --line:#293336;
    --accent:#54B8B1; --accent-soft:#162A29; --card:#1A2124;
    --warn:#D9A55A; --warn-soft:#241D12; --err:#E08078; --err-soft:#291C1B; }
}
*{ box-sizing:border-box; }
html{ background:var(--paper); -webkit-text-size-adjust:100%; }
body{
  margin:0; color:var(--ink); background:var(--paper);
  font-family:"PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;
  font-size:16px; line-height:1.7;
}
.screen{ min-height:100dvh; display:flex; justify-content:center; padding:1rem 0.85rem 4rem; }
/* author styles beat the UA rule for [hidden], so restate it */
[hidden]{ display:none !important; }
.card{
  width:100%; max-width:40rem; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); padding:1.4rem 1.25rem 1.6rem; align-self:flex-start;
}
.card.center{ text-align:center; margin-top:18vh; }
.kicker{ font-size:.74rem; letter-spacing:.16em; color:var(--accent); font-weight:700; margin-bottom:.5rem; }
h1{ font-size:1.35rem; line-height:1.4; margin:0 0 1rem; text-wrap:balance; }
h2{ font-size:1.15rem; margin:0; text-wrap:balance; }

/* consent */
.consent{ font-size:.93rem; color:var(--ink); }
.consent p{ margin:.85rem 0; }
.consent-flag{ background:var(--warn-soft); border-left:3px solid var(--warn); padding:.6rem .8rem; border-radius:0 6px 6px 0; font-size:.86rem; }
.decline{ color:var(--muted); font-size:.83rem; text-align:center; margin:.7rem 0 0; }

/* progress */
.progress{ position:fixed; top:0; left:0; right:0; height:3px; background:var(--line); z-index:20; }
.progress-bar{ height:100%; width:0; background:var(--accent); transition:width .25s ease; }

.page-head{ display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; padding-bottom:.7rem; border-bottom:1px solid var(--line); margin-bottom:1rem; }
.tag{ font-size:.72rem; color:var(--muted); background:var(--accent-soft); padding:.12rem .5rem; border-radius:5px; }
.sec-intro{ font-size:.9rem; color:var(--muted); margin-bottom:1.1rem; }
.sec-note{ font-size:.84rem; color:var(--warn); background:var(--warn-soft); padding:.5rem .7rem; border-radius:6px; margin-bottom:1rem; }
.grp{ font-weight:700; font-size:.9rem; color:var(--accent); margin:1.3rem 0 .5rem; }

/* question card — one question per card, works on narrow screens */
.q{ padding:.95rem 0 .3rem; border-top:1px solid var(--line); }
.q:first-of-type{ border-top:none; padding-top:0; }
.q-head{ font-size:.97rem; line-height:1.6; margin-bottom:.6rem; }
.qid{ display:inline-block; font-size:.68rem; font-weight:700; color:var(--muted);
  background:var(--paper); border:1px solid var(--line); border-radius:4px;
  padding:0 .32rem; margin-right:.45rem; vertical-align:.1em; font-variant-numeric:tabular-nums; }
.q-help{ font-size:.83rem; color:var(--muted); background:var(--paper); border-radius:6px; padding:.5rem .65rem; margin-bottom:.6rem; }
.opt-tag{ font-size:.7rem; color:var(--muted); margin-left:.4rem; }

.opts{ display:flex; flex-direction:column; gap:var(--gap-opt); }
.opts.row2{ flex-direction:row; gap:var(--gap-opt); }
.opts.row2 .opt{ flex:1; justify-content:center; }
.opt{
  display:flex; align-items:center; gap:.55rem; min-height:2.6rem;
  padding:.4rem .7rem; border:1px solid var(--line); border-radius:8px;
  cursor:pointer; background:var(--card); transition:border-color .12s, background .12s;
}
.opt:hover{ border-color:var(--accent); }
.opt input{ position:absolute; opacity:0; width:0; height:0; }
.dot{ flex:none; width:16px; height:16px; border:2px solid var(--line); border-radius:50%; transition:border-color .12s; }
.opt input:checked ~ .dot{ border-color:var(--accent); border-width:5px; }
.opt:has(input:checked){ border-color:var(--accent); background:var(--accent-soft); }
.opt input:focus-visible ~ .dot{ outline:2px solid var(--accent); outline-offset:2px; }
.lbl{ font-size:.92rem; }
.opt.dk{ margin-top:.25rem; border-style:dashed; }
.opt.dk .lbl{ color:var(--muted); font-size:.86rem; }

.err{ background:var(--err-soft); color:var(--err); border-radius:7px; padding:.6rem .8rem; font-size:.87rem; margin-top:1rem; }

.nav{ display:flex; align-items:center; justify-content:space-between; gap:.7rem; margin-top:1.6rem; padding-top:1rem; border-top:1px solid var(--line); }
.ptext{ font-size:.8rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.btn{ font:inherit; font-size:.92rem; border-radius:8px; padding:.7rem 1.1rem; cursor:pointer; border:1px solid transparent; min-height:2.8rem; }
.btn.primary{ background:var(--accent); color:#fff; font-weight:600; }
.btn.primary:hover{ filter:brightness(1.08); }
.btn.ghost{ background:transparent; color:var(--muted); border-color:var(--line); }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
#btn-consent{ width:100%; margin-top:1.2rem; }
.done-body{ color:var(--muted); }
.done-body code{ background:var(--accent-soft); color:var(--accent); padding:.1rem .4rem; border-radius:4px; }

/* design panel */
.dp{ position:fixed; right:0; top:0; height:100dvh; z-index:30; display:flex; align-items:flex-start; pointer-events:none; }
.dp-toggle{
  pointer-events:auto; margin-top:1rem; font:inherit; font-size:.72rem; font-weight:700; letter-spacing:.06em;
  writing-mode:vertical-rl; background:var(--accent); color:#fff; border:none;
  border-radius:8px 0 0 8px; padding:.85rem .38rem; cursor:pointer;
}
.dp-inner{
  pointer-events:auto; width:0; overflow:hidden; height:100dvh; background:var(--card);
  border-left:1px solid var(--line); transition:width .2s ease;
}
.dp.open .dp-inner{ width:min(21rem, 88vw); overflow-y:auto; padding:1.1rem 1rem; }
.dp-head{ font-weight:700; display:flex; justify-content:space-between; align-items:baseline; gap:.5rem; margin-bottom:.4rem; }
.dp-total{ font-size:.8rem; color:var(--accent); font-variant-numeric:tabular-nums; }
.dp-hint,.dp-foot{ font-size:.78rem; color:var(--muted); margin-bottom:.8rem; }
.dp-foot{ margin:1rem 0 0; padding-top:.7rem; border-top:1px solid var(--line); }
.dp-row{ display:grid; grid-template-columns:auto 1fr auto; gap:.5rem; align-items:center;
  padding:.42rem .3rem; border-bottom:1px solid var(--line); font-size:.85rem; cursor:pointer; }
.dp-row.locked{ opacity:.55; cursor:default; }
.dp-name{ line-height:1.35; }
.dp-n{ font-variant-numeric:tabular-nums; color:var(--accent); font-weight:700; }
.dp-rq{ grid-column:2/4; font-size:.72rem; color:var(--muted); }

@media (max-width:520px){
  .card{ padding:1.1rem .9rem 1.3rem; border-radius:0; border-left:none; border-right:none; }
  .screen{ padding:.6rem 0 4rem; }
}
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }

/* language bar */
.lang-bar{ display:flex; align-items:center; justify-content:flex-end; gap:.5rem; margin-bottom:.9rem; }
.lang-label{ font-size:.74rem; color:var(--muted); letter-spacing:.06em; }
.lang-select{
  font:inherit; font-size:.85rem; color:var(--ink); background:var(--paper);
  border:1px solid var(--line); border-radius:7px; padding:.35rem 1.9rem .35rem .6rem;
  cursor:pointer; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 15px) 55%,calc(100% - 10px) 55%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
.lang-select:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }

/* wallet page */
.w-input{ width:100%; font:inherit; font-size:.95rem; padding:.75rem .85rem; margin:1rem 0 .2rem;
  border:1px solid var(--line); border-radius:8px; background:var(--paper); color:var(--ink); }
.w-input:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
#btn-wallet-submit{ width:100%; margin-top:1rem; }
.w-skip{ width:100%; margin-top:.5rem; }

/* ---------- horizontal five-point scale ----------
   One row per item so a five-item block is five rows, not thirty stacked options.
   Narrow screens keep the row and carry the wording in anchors at each end;
   wide screens drop the anchors and label every point instead. Nothing scrolls sideways. */
.scale-row{ display:flex; align-items:center; gap:.45rem; }
.anchor{ flex:0 0 3.6rem; font-size:.7rem; line-height:1.25; color:var(--muted); }
.anchor.left{ text-align:right; }
.pts{ display:flex; flex:1; gap:var(--gap-opt); }
.pt{ position:relative; flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:.25rem; min-height:46px; padding:.4rem .15rem;
  border:1px solid var(--line); border-radius:8px; cursor:pointer; transition:border-color .12s, background .12s; }
.pt:hover{ border-color:var(--accent); }
.pt input{ position:absolute; opacity:0; width:0; height:0; }
.pt-dot{ display:grid; place-items:center; width:24px; height:24px; border-radius:50%;
  border:2px solid var(--line); font-size:.78rem; font-variant-numeric:tabular-nums; color:var(--muted); }
.pt-lbl{ display:none; font-size:.68rem; line-height:1.15; text-align:center; color:var(--muted); }
.pt:has(input:checked){ border-color:var(--accent); background:var(--accent-soft); }
.pt:has(input:checked) .pt-dot{ border-color:var(--accent); background:var(--accent); color:#fff; }
.pt:has(input:checked) .pt-lbl{ color:var(--ink); }
.pt input:focus-visible ~ .pt-dot{ outline:2px solid var(--accent); outline-offset:3px; }
.opt.dk.slim{ margin-top:.4rem; padding:.4rem .6rem; }

@media (min-width:620px){
  .anchor{ display:none; }
  .pt-lbl{ display:block; }
  .pt{ min-height:64px; }
}

/* orientation page */
.info-body{ font-size:.95rem; line-height:1.75; }
.info-body p{ margin:0 0 .8rem; }
.info-body ul{ margin:.2rem 0 .9rem; padding-left:1.15rem; color:var(--muted); }
.info-body li{ margin-bottom:.35rem; }

/* the re-anchoring line that opens each block of attitude items */
.sec-anchor{ font-size:.88rem; line-height:1.6; color:var(--ink); background:var(--accent-soft);
  border-radius:8px; padding:.6rem .75rem; margin-bottom:.9rem; }
.done-body p{ margin:0 0 .8rem; line-height:1.7; }
.done-body .dbg{ font-size:.78rem; opacity:.7; }

/* ---------- option controls ----------
   The control is chosen from the shape of the option set: a short ordinal ladder reads
   best as a row, a handful of short labels as a grid, ten place names as an OS picker.
   Long option text is left in a single column, because it has to be read, not scanned. */
.opts.seg{ display:flex; flex-direction:row; gap:var(--gap-opt); }
.opts.seg .opt{ flex:1; justify-content:center; text-align:center; min-height:46px; }
.opts.chips{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap-opt); }
.opts.chips .opt{ min-height:46px; }
@media (min-width:620px){ .opts.chips{ grid-template-columns:repeat(3,1fr); } }

.sel{ width:100%; font:inherit; padding:.7rem .8rem; border:1px solid var(--line);
  border-radius:8px; background:var(--card); color:var(--ink); min-height:46px; }
.sel:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }

/* "Don't know" is a statement about the question, not a sixth point on it, so it sits
   apart from the row and carries much less weight than a full-width dashed box. */
.opt.dk{ display:inline-flex; margin-top:.55rem; padding:.42rem .7rem; border-style:dashed; }
.opt.dk .dot{ width:14px; height:14px; }
.opt.dk .lbl{ color:var(--muted); font-size:.84rem; }
.lang-inline{ margin-left:auto; font-size:.78rem; padding:.2rem .4rem; max-width:9rem; }

/* A section lead-in that corrects a likely misreading has to be seen, not skimmed past.
   Used where the段 asks what the agent is *allowed* to do, which reads as felt control. */
.sec-intro.callout{
  color:var(--ink); background:var(--accent-soft); border-left:3px solid var(--accent);
  border-radius:0 6px 6px 0; padding:.7rem .85rem; font-size:.9rem;
}