:root { font-family: "Hiragino Sans", "Yu Gothic", system-ui, sans-serif; color: #17364e; --blue: #2f5fb7; --good: #17835f; --bad: #c2405a; --line: #c3d2e0; }
* { box-sizing: border-box; }
body { margin: 0; background: linear-gradient(#f2f8ff, #fff 42%); }
.lab { width: min(100%, 720px); margin: auto; padding: 12px max(12px, env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
.eyebrow { margin: 0 0 3px; color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
h1 { margin: 0 0 6px; font-size: 21px; }
.lead { margin: 0 0 10px; color: #5a6b83; font-size: 13px; line-height: 1.55; }

.proof-pick { display: grid; gap: 4px; margin-bottom: 10px; color: #61728a; font-size: 12px; font-weight: 700; }
.proof-pick select { min-height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: 11px; background: #fff; color: #17364e; font: inherit; font-size: 15px; }

.premise { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.figure { display: grid; place-items: center; }
.figure svg { width: min(100%, 240px); height: auto; }
.premise-list { display: grid; gap: 6px; margin: 0; }
.premise-list > div { display: grid; grid-template-columns: 62px 1fr; gap: 8px; align-items: baseline; }
.premise-list dt { color: #61728a; font-size: 12px; font-weight: 700; }
.premise-list dd { margin: 0; font-size: 14px; font-weight: 700; }

.steps { display: grid; gap: 9px; margin-top: 10px; }
.step { padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.step.solved { border-color: #9fd6bf; background: #f2fbf7; }
.step.locked { opacity: .55; }
.claim { display: flex; align-items: center; gap: 9px; }
.no { display: grid; place-items: center; flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 12px; font-weight: 800; }
.step.solved .no { background: var(--good); }
.claim b { font-size: 16px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ask { margin: 9px 0 7px; color: #61728a; font-size: 12px; font-weight: 700; }
.locked-note { margin: 7px 0 0; color: #8c9ab0; font-size: 12px; }

.choices { display: grid; gap: 6px; }
.choice { min-height: 46px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 11px; background: #fff; color: #17364e; font: inherit; font-size: 13.5px; line-height: 1.45; text-align: left; cursor: pointer; touch-action: manipulation; }
.choice.correct { border-color: var(--good); color: #0d5c42; background: #e4f6ee; font-weight: 700; }
.choice.wrong { border-color: var(--bad); color: #8e2438; background: #fdeef1; }
.choice:disabled { cursor: default; }
.hint { margin: 8px 0 0; padding: 8px 10px; border-radius: 9px; background: #fff6e2; color: #7a5a12; font-size: 12.5px; line-height: 1.6; }

.done { margin-top: 12px; padding: 14px; border: 1px solid #9fd6bf; border-radius: 13px; background: #eefaf4; }
.done b { color: var(--good); font-size: 16px; }
.done p { margin: 6px 0 10px; color: #3f5468; font-size: 13px; line-height: 1.7; }
.done button { min-height: 44px; padding: 0 18px; border: 0; border-radius: 11px; background: var(--good); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }

@media (max-width: 420px) {
  h1 { font-size: 19px; }
  .claim b { font-size: 14.5px; }
  .choice { font-size: 13px; }
  .premise-list > div { grid-template-columns: 54px 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }