:root { color-scheme: light dark; font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif; color: #263044; background: #f5f1e8; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; line-height: 1.75; }
button, input { font: inherit; }
.lab { max-width: 760px; margin: 0 auto; padding: 22px; }
header { margin-bottom: 16px; }
.eyebrow { margin: 0 0 5px; color: #3157b7; font-size: 12px; font-weight: 800; letter-spacing: .12em; }
h1 { margin: 0; font-size: clamp(24px, 4vw, 32px); }
header > p { margin: 8px 0 0; color: #606b7d; }
.standalone-link { display: inline-flex; min-height: 44px; align-items: center; margin-top: 12px; padding: 8px 16px; border: 2px solid #3157b7; border-radius: 9px; background: #3157b7; color: #fff; font-weight: 800; text-decoration: none; }
.standalone-link:hover { background: #26459b; border-color: #26459b; }
.standalone-link[hidden] { display: none; }

/* 進み方 */
.stepper { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 14px; -webkit-overflow-scrolling: touch; }
.step { flex: 0 0 auto; display: grid; gap: 2px; justify-items: center; min-width: 62px; min-height: 56px; padding: 7px 10px; border: 2px solid #ddd8ce; border-radius: 12px; background: #fff; color: #606b7d; cursor: pointer; }
.step-icon { font-size: 17px; }
.step-label { font-size: 11.5px; font-weight: 800; }
.step[aria-current="true"] { border-color: #3157b7; background: #e8eefc; color: #2c4c9b; }
.step:focus-visible { outline: 3px solid rgba(49,87,183,.35); outline-offset: 2px; }
.step-title { margin: 0 0 12px; font-size: clamp(18px, 3vw, 23px); }

.lead { margin: 0 0 16px; padding: 13px 15px; border: 1px solid #ddd8ce; border-radius: 12px; background: #fff; font-size: 14.5px; color: #55617a; }
.card { margin-bottom: 14px; padding: 18px 16px; border: 1px solid #ddd8ce; border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(40,35,25,.06); }
.card-title { margin: 0 0 12px; font-size: 16px; }

/* 触れる数値 */
.controls { display: grid; gap: 14px; margin-bottom: 16px; }
.value-control { padding: 12px 14px; border: 1px solid #e4e0d7; border-radius: 12px; background: #faf8f3; }
.value-control.is-locked { border-style: dashed; background: #f0eee8; }
.value-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.value-label { font-size: 13.5px; font-weight: 700; }
.value-readout { margin-left: auto; padding: 2px 10px; border-radius: 7px; background: #e8eefc; color: #2c4c9b; font-family: "Lexend", ui-monospace, monospace; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lock { min-width: 44px; min-height: 44px; border: 0; background: none; cursor: pointer; font-size: 17px; }
.lock:focus-visible { outline: 3px solid rgba(49,87,183,.35); outline-offset: 2px; border-radius: 8px; }
.value-row { display: flex; align-items: center; gap: 10px; }
.step-button { width: 48px; min-height: 48px; border: 2px solid #ccc6b9; border-radius: 10px; background: #fff; color: inherit; cursor: pointer; font-size: 20px; font-weight: 700; }
.step-button:hover:not(:disabled) { border-color: #3157b7; }
.step-button:disabled { opacity: .4; cursor: not-allowed; }
.step-button:focus-visible { outline: 3px solid rgba(49,87,183,.35); outline-offset: 2px; }
.value-slider { flex: 1; min-width: 0; height: 44px; accent-color: #3157b7; }

/* 図 */
.figure { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto 14px; }
.tri-face { fill: rgba(49,87,183,.08); stroke: none; }
.edge { stroke: #3157b7; stroke-width: 3; stroke-linecap: round; }
.edge.is-active { stroke: #a34b2d; stroke-width: 5; }
.is-pickable { cursor: pointer; stroke-width: 12; stroke-opacity: .001; }
.is-pickable + .edge-label { pointer-events: none; }
.edge.is-pickable { stroke: #3157b7; stroke-opacity: 1; stroke-width: 4; }
.edge.is-correct, .vertex.is-correct { stroke: #278a64; fill: rgba(39,138,100,.2); stroke-width: 5; }
.edge.is-wrong, .vertex.is-wrong { stroke: #d26745; fill: rgba(210,103,69,.18); stroke-width: 5; }
.vertex { fill: rgba(49,87,183,.12); stroke: #3157b7; stroke-width: 2; cursor: pointer; }
.right-angle { fill: none; stroke: #8b93a4; stroke-width: 2; }
.arc { fill: none; stroke: #a34b2d; stroke-width: 2.5; }
.edge-label, .part-label, .point-label, .tick { fill: #55617a; font-size: 12px; font-family: "Lexend", ui-monospace, monospace; }
.part-label { font-size: 15px; font-weight: 700; fill: #263044; }
.angle-label { fill: #a34b2d; font-size: 13px; font-weight: 700; }
.axis { stroke: #b9b3a6; stroke-width: 1.5; }
.unit-circle { fill: none; stroke: #8b93a4; stroke-width: 2; }
.radius { stroke: #3157b7; stroke-width: 3; }
.point-p { fill: #a34b2d; }
.guide { stroke-width: 2.5; stroke-dasharray: 5 4; }
.guide-cos { stroke: #278a64; }
.guide-sin { stroke: #a34b2d; }
.ground { stroke: #8b7355; stroke-width: 3; }
.building { fill: rgba(49,87,183,.16); stroke: #3157b7; stroke-width: 2.5; }
.sight-line { stroke: #a34b2d; stroke-width: 2.5; stroke-dasharray: 6 4; }
.person { fill: #a34b2d; }
.series { fill: none; stroke-width: 2.5; }
.series-sin { stroke: #a34b2d; }
.series-cos { stroke: #278a64; }
.dot.series-sin { fill: #a34b2d; }
.dot.series-cos { fill: #278a64; }
.graph-box { margin-top: 8px; }
.legend { display: flex; justify-content: center; gap: 16px; font-size: 12.5px; }
.legend-item::before { content: "―"; margin-right: 5px; font-weight: 700; }
.legend-sin { color: #a34b2d; }
.legend-cos { color: #278a64; }

/* 比の表示 */
.ratio-list { display: grid; gap: 9px; margin: 14px 0; }
.ratio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 11px 13px; border-radius: 10px; background: #faf8f3; }
.ratio-name { font-size: 13.5px; font-weight: 700; }
.ratio-calc { color: #687386; font-family: "Lexend", ui-monospace, monospace; font-size: 13.5px; }
.ratio-value { margin-left: auto; color: #2c4c9b; font-family: "Lexend", ui-monospace, monospace; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ratio-value.is-negative { color: #a34024; }
.big-value { margin: 10px 0 0; text-align: center; color: #2c4c9b; font-family: "Lexend", ui-monospace, monospace; font-size: 26px; font-weight: 700; }
.notice { margin: 12px 0 0; padding: 11px 13px; border-radius: 10px; background: #fff7e7; font-size: 13.5px; }

/* 表 */
.table-scroll { overflow-x: auto; }
.note-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.note-table th, .note-table td { padding: 9px 10px; border-bottom: 1px solid #e4e0d7; text-align: left; font-variant-numeric: tabular-nums; }
.note-table th { color: #687386; font-size: 12.5px; }
.note-table td { font-family: "Lexend", ui-monospace, monospace; }
.highlight-cell { color: #2c4c9b; font-weight: 700; background: #e8eefc; }
.mini-table { display: grid; gap: 4px; margin-top: 10px; }
.mini-row { display: flex; justify-content: space-between; padding: 6px 12px; border-radius: 7px; background: #faf8f3; font-size: 13.5px; }
.mono { font-family: "Lexend", ui-monospace, monospace; font-variant-numeric: tabular-nums; }

/* 発見 */
.discovery { margin-top: 14px; padding: 14px 16px; border-left: 5px solid #278a64; border-radius: 0 12px 12px 0; background: #e2f3ea; }
.discovery-title { display: block; margin-bottom: 5px; color: #176c4a; font-size: 16px; font-weight: 800; }
.discovery p { margin: 0; font-size: 14px; }

/* 定義 */
.define-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; padding: 12px 0; border-bottom: 1px solid #e4e0d7; }
.define-row:last-of-type { border-bottom: 0; }
.define-name { font-size: 15px; font-weight: 800; }
.define-formula { color: #687386; font-size: 13.5px; }

/* 問題 */
.question-text { margin: 0 0 14px; font-size: 16px; font-weight: 700; line-height: 1.7; }
.given-list { margin: 0 0 14px; padding-left: 0; list-style: none; display: grid; gap: 6px; }
.given-list li { padding: 9px 12px; border-radius: 9px; background: #faf8f3; font-size: 14px; }
.choice-list { display: grid; gap: 10px; }
.choice { min-height: 56px; padding: 13px 16px; border: 2px solid #ccc6b9; border-radius: 12px; background: #fff; color: inherit; cursor: pointer; font-size: 16px; text-align: left; }
.choice:hover:not(:disabled) { border-color: #3157b7; }
.choice:focus-visible { outline: 3px solid rgba(49,87,183,.35); outline-offset: 2px; }
.choice.ok { border-color: #278a64; background: #e2f3ea; color: #176c4a; font-weight: 800; }
.choice.ng { border-color: #d26745; background: #fff4ed; color: #a34024; }
.formula-choice { display: grid; gap: 3px; }
.formula-name { font-weight: 800; }
.formula-expr { color: #687386; font-family: "Lexend", ui-monospace, monospace; font-size: 13px; }
.formula-choice.ok .formula-expr, .formula-choice.ng .formula-expr { color: inherit; }

/* 間違い探し */
.token-row { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; padding: 14px; border-radius: 12px; background: #faf8f3; }
.token { min-height: 48px; padding: 10px 14px; border: 2px solid #ddd8ce; border-radius: 10px; background: #fff; color: inherit; cursor: pointer; font-family: "Lexend", ui-monospace, monospace; font-size: 16px; }
.token:hover:not(:disabled) { border-color: #3157b7; }
.token:focus-visible { outline: 3px solid rgba(49,87,183,.35); outline-offset: 2px; }
.token.is-wrong-spot { border-color: #d26745; background: #fff4ed; color: #a34024; font-weight: 800; }
.token.ng { border-color: #8b93a4; opacity: .6; }

/* 判定 */
.feedback { display: grid; gap: 7px; margin-top: 14px; padding: 14px 16px; border-radius: 12px; font-size: 14px; }
.feedback.right { background: #e2f3ea; color: #176c4a; }
.feedback.wrong { background: #fff4ed; color: #a34024; }
.verdict { font-size: 17px; font-weight: 800; }
.reason { color: #55617a; }
.feedback.right .reason, .feedback.wrong .reason { color: inherit; opacity: .92; }
.correct-line { padding: 9px 12px; border-radius: 8px; background: rgba(255,255,255,.7); color: #263044; font-family: "Lexend", ui-monospace, monospace; font-size: 15px; }
.step-list { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 13.5px; }

/* 操作 */
.action { min-height: 52px; padding: 12px 20px; border: 2px solid transparent; border-radius: 11px; cursor: pointer; font-weight: 800; font-size: 15px; }
.action:focus-visible { outline: 3px solid rgba(49,87,183,.35); outline-offset: 2px; }
.primary { background: #3157b7; color: #fff; }
.primary:hover { background: #26459b; }
.ghost { border-color: #ccc6b9; background: #fff; color: #55617a; }
.ghost:hover { border-color: #8b93a4; color: #263044; }
.wide { width: 100%; }
.drill-bar { display: grid; gap: 9px; margin-top: 14px; }
.answer-form { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
input.full { flex: 1 1 160px; min-height: 52px; padding: 12px 15px; border: 2px solid #ccc6b9; border-radius: 11px; background: #fff; color: inherit; font-size: 17px; }
input.full:focus { border-color: #3157b7; outline: 3px solid rgba(49,87,183,.16); }
.mini-action { min-height: 44px; padding: 8px 14px; border: 1px solid #ccc6b9; border-radius: 9px; background: transparent; color: #606b7d; cursor: pointer; font-size: 13.5px; font-weight: 700; }
.mini-action:hover { border-color: #8b93a4; color: #263044; }
.mini-action:focus-visible { outline: 3px solid rgba(49,87,183,.35); outline-offset: 2px; }
.step-nav { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-top: 18px; }
.hint-box { margin-top: 14px; padding: 11px 14px; border: 1px solid #e4e0d7; border-radius: 10px; background: #faf8f3; font-size: 13.5px; }
.hint-box summary { cursor: pointer; font-weight: 700; }
.hint-box p { margin: 8px 0 0; }
.notebook .action { margin-top: 12px; }

@media (max-width: 680px) {
  .lab { padding: 14px 12px 28px; }
  .ratio { gap: 6px; }
  .ratio-value { font-size: 18px; }
  .step-nav .action, .step-nav .mini-action { flex: 1 1 100%; }
}

@media (pointer: coarse) {
  .step-button, .choice, .token, .action { min-height: 52px; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

@media (prefers-color-scheme: dark) {
  :root { color: #edf1f8; background: #111722; }
  header > p, .lead, .reason, .value-label, .mini-action, .ghost { color: #b8c1d0; }
  .eyebrow { color: #9bb7ff; }
  .card, .step, input.full, .choice, .token, .ghost { border-color: #4a566b; background: #1d2635; color: #edf1f8; }
  .lead { border-color: #4a566b; background: #1d2635; }
  .value-control, .ratio, .given-list li, .mini-row, .token-row, .hint-box, .note-table td { background: #232d3f; border-color: #4a566b; }
  .value-control.is-locked { background: #1a212e; }
  .value-readout, .highlight-cell { background: #26334c; color: #9bb7ff; }
  .ratio-value, .big-value { color: #9bb7ff; }
  .ratio-value.is-negative { color: #ffad8f; }
  .notice { background: #332b1d; }
  .step[aria-current="true"] { border-color: #6c8ede; background: #26334c; color: #9bb7ff; }
  .primary, .standalone-link { background: #3157b7; border-color: #3157b7; color: #fff; }
  .primary:hover, .standalone-link:hover { background: #4067cd; border-color: #4067cd; }
  .note-table th, .edge-label, .part-label, .point-label, .tick, .ratio-calc, .define-formula, .formula-expr { color: #97a1b3; }
  .part-label { fill: #edf1f8; }
  .edge-label, .point-label, .tick { fill: #97a1b3; }
  .note-table th, .note-table td { border-color: #404b5e; }
  .discovery { background: #1d3a2e; border-left-color: #3f8a66; }
  .discovery-title { color: #74d3a5; }
  .feedback.right, .choice.ok { background: #1d3a2e; color: #74d3a5; }
  .feedback.wrong, .choice.ng, .token.is-wrong-spot { background: #3b241d; color: #ffad8f; }
  .choice.ok { border-color: #3f8a66; }
  .choice.ng, .token.is-wrong-spot { border-color: #8c4a33; }
  .correct-line { background: rgba(0,0,0,.28); color: #edf1f8; }
  .axis, .unit-circle { stroke: #6b7689; }
  .tri-face { fill: rgba(108,142,222,.14); }
  .edge, .edge.is-pickable, .radius { stroke: #6c8ede; }
  .vertex { fill: rgba(108,142,222,.2); stroke: #6c8ede; }
  .define-row { border-bottom-color: #404b5e; }
  .step-button { border-color: #4a566b; background: #232d3f; }
}

/* ===== 公式ラボ固有 ===== */
.tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.tab { flex: 1; display: grid; gap: 2px; justify-items: center; min-height: 58px; padding: 8px 6px; border: 2px solid #ddd8ce; border-radius: 12px; background: #fff; color: #606b7d; cursor: pointer; }
.tab-icon { font-size: 18px; }
.tab-label { font-size: 12.5px; font-weight: 800; }
.tab[aria-selected="true"] { border-color: #3157b7; background: #e8eefc; color: #2c4c9b; }
.tab:focus-visible { outline: 3px solid rgba(49,87,183,.35); outline-offset: 2px; }

.identity { margin-top: 14px; padding: 13px 15px; border-radius: 12px; background: #faf8f3; }
.identity-title { margin-bottom: 8px; font-size: 14px; font-weight: 800; }
.identity-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: "Lexend", ui-monospace, monospace; font-size: 17px; font-variant-numeric: tabular-nums; }
.term { padding: 5px 11px; border-radius: 8px; background: #fff; }
.term-sin { color: #a34024; background: #fff4ed; }
.term-cos { color: #176c4a; background: #e2f3ea; }
.term-total { color: #2c4c9b; background: #e8eefc; font-weight: 700; }
.op { color: #8b93a4; font-weight: 700; }
.identity-note { margin: 8px 0 0; color: #55617a; font-size: 13px; }

.area-sin { fill: rgba(163,64,36,.3); stroke: #a34024; stroke-width: 2; }
.area-cos { fill: rgba(23,108,74,.28); stroke: #176c4a; stroke-width: 2; }
.area-label { fill: #55617a; font-size: 11px; font-family: "Lexend", ui-monospace, monospace; }

.pill-group { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pill { min-height: 46px; padding: 9px 15px; border: 2px solid #ccc6b9; border-radius: 999px; background: #fff; color: inherit; cursor: pointer; font-size: 14px; font-weight: 700; }
.pill:hover { border-color: #3157b7; }
.pill[aria-pressed="true"] { border-color: #3157b7; background: #e8eefc; color: #2c4c9b; }
.pill:focus-visible { outline: 3px solid rgba(49,87,183,.35); outline-offset: 2px; }

.compare-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.compare-table th, .compare-table td { padding: 9px 8px; border-bottom: 1px solid #e4e0d7; text-align: left; font-family: "Lexend", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.compare-table th { color: #687386; font-size: 12px; font-family: inherit; }
.row-name { font-weight: 700; }
.compare-table .is-same { color: #176c4a; background: #e2f3ea; font-weight: 700; }
.compare-table .is-opposite { color: #a34024; background: #fff4ed; font-weight: 700; }
.relation { color: #55617a; font-size: 12px; }

.point-base { stroke: #3157b7; }
.dot.point-base { fill: #3157b7; }
.point-other { stroke: #a34024; }
.dot.point-other { fill: #a34024; }

.example-list { display: grid; gap: 8px; }
.example { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; padding: 10px 13px; border-radius: 10px; background: #faf8f3; }
.example-angle { color: #a34024; font-family: "Lexend", ui-monospace, monospace; font-size: 16px; font-weight: 700; }
.example-body { font-family: "Lexend", ui-monospace, monospace; font-size: 13.5px; }

.steps-box { margin-top: 14px; padding: 13px 15px; border-radius: 12px; background: #e8eefc; }
.steps-title { margin-bottom: 8px; font-size: 13.5px; font-weight: 800; color: #2c4c9b; }
.steps-list { margin: 0; padding-left: 20px; display: grid; gap: 7px; font-size: 13.5px; }

.warn-box { margin-top: 14px; padding: 14px 16px; border-left: 5px solid #d26745; border-radius: 0 12px 12px 0; background: #fff4ed; }
.warn-title { display: block; margin-bottom: 5px; color: #a34024; font-size: 15px; font-weight: 800; }
.warn-box p { margin: 0; font-size: 13.5px; }
.warn-text { color: #a34024; font-size: 14px; }
.preset-row { display: flex; flex-wrap: wrap; gap: 8px; }

@media (prefers-color-scheme: dark) {
  .tab { border-color: #4a566b; background: #1d2635; color: #b8c1d0; }
  .tab[aria-selected="true"] { border-color: #6c8ede; background: #26334c; color: #9bb7ff; }
  .identity, .example, .steps-box { background: #232d3f; }
  .steps-box { background: #26334c; }
  .steps-title { color: #9bb7ff; }
  .identity-note, .relation { color: #97a1b3; }
  .term { background: #1d2635; }
  .term-sin { background: #3b241d; color: #ffad8f; }
  .term-cos { background: #1d3a2e; color: #74d3a5; }
  .term-total { background: #26334c; color: #9bb7ff; }
  .area-label, .compare-table th { color: #97a1b3; }
  .area-label { fill: #97a1b3; }
  .pill { border-color: #4a566b; background: #1d2635; }
  .pill[aria-pressed="true"] { border-color: #6c8ede; background: #26334c; color: #9bb7ff; }
  .compare-table th, .compare-table td { border-color: #404b5e; }
  .compare-table .is-same { background: #1d3a2e; color: #74d3a5; }
  .compare-table .is-opposite { background: #3b241d; color: #ffad8f; }
  .warn-box { background: #3b241d; }
  .warn-title, .warn-text { color: #ffad8f; }
  .example-angle { color: #ffad8f; }
}