@font-face{
  font-family:"Latin Modern Math";
  src:url("/assets/fonts/latinmodern-math.otf") format("opentype");
  font-display:block;
}

:root{
  --ink:#233149;
  --muted:#66748a;
  --line:#d8e0ea;
  --blue:#2f63ad;
  --blue-dark:#334963;
  --blue-soft:#f5f8fd;
  --soft:#fafbfd;
  --accent:#a76f20;
  --warn:#fff8ed;
  --green:#2f7a64;
  --green-soft:#f2faf7;
  --page:1040px;
}
*{box-sizing:border-box}

/*
  GOLDEN MASTER TYPOGRAPHY
  Source of truth: the completed Section 35 (trig identities) design.
  Lesson-specific work must not alter these computed typography values.
*/
html{font-size:16px}
body{
  margin:0;
  color:var(--ink);
  background:#fff;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic","Noto Sans CJK JP",Meiryo,sans-serif;
  line-height:1.82;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.wrap{width:min(var(--page),calc(100% - 40px));margin-inline:auto}
.top{position:sticky;top:0;z-index:100;border-bottom:1px solid var(--line);padding:12px 0;background:rgba(255,255,255,.97);backdrop-filter:blur(12px)}
.lesson-topbar{display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{color:inherit;text-decoration:none;font-size:1.02rem;font-weight:800;letter-spacing:.01em;white-space:nowrap}
.lesson-quick{display:flex;align-items:center;justify-content:flex-end;gap:8px;font-size:.9rem;font-weight:700}
.lesson-quick>a,.lesson-picker>summary{display:inline-flex;align-items:center;min-height:38px;padding:6px 11px;border-radius:9px;color:var(--blue-dark);text-decoration:none}
.lesson-quick>a:hover,.lesson-picker>summary:hover{background:var(--blue-soft);color:var(--blue)}
.lesson-picker{position:relative;margin:0}
.lesson-picker>summary{width:auto;max-width:none;cursor:pointer;list-style:none;font-size:.9rem;font-weight:750}
.lesson-picker>summary::-webkit-details-marker{display:none}
.lesson-picker>summary::after{content:'⌄';margin-left:6px;color:var(--muted);font-size:.8rem}
.lesson-picker[open]>summary{background:var(--blue-soft);color:var(--blue)}
.lesson-picker-panel{position:absolute;top:calc(100% + 10px);right:0;width:min(760px,calc(100vw - 28px));max-height:min(680px,calc(100vh - 86px));overflow:auto;padding:18px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 18px 48px rgba(35,49,73,.16)}
.lesson-picker:not([open])>.lesson-picker-panel{display:none}
.lesson-picker-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 2px 10px;border-bottom:1px solid var(--line)}
.lesson-picker-head span{color:var(--muted);font-size:.82rem;font-weight:600}
.lesson-picker-chapter{margin:14px 2px 7px;color:var(--blue);font-size:.78rem;font-weight:800;letter-spacing:.05em}
.lesson-picker-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.lesson-picker-grid a{display:grid;grid-template-columns:30px minmax(0,1fr);gap:8px;align-items:center;min-height:38px;padding:6px 8px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:.85rem;font-weight:650;line-height:1.35}
.lesson-picker-grid a:hover{background:#f6f8fb}
.lesson-picker-grid a[aria-current="page"]{background:var(--blue-soft);color:var(--blue);font-weight:800}
.lesson-picker-grid a>span{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.76rem}
.short-label{display:none}
.hero{padding:54px 0 28px}
.eyebrow,.section-label{color:var(--blue);font-size:.78rem;font-weight:800;letter-spacing:.08em}
.hero h1{margin:.35rem 0 .6rem;font-size:clamp(2.1rem,4.8vw,3.2rem);line-height:1.2;letter-spacing:-.025em}
.lead{margin:0;color:var(--muted);font-size:1.05rem;max-width:none}
.meta{margin-top:.8rem;color:var(--muted);font-size:.88rem}
section{margin:46px 0}
h2{margin:.3rem 0 1rem;font-size:1.62rem;line-height:1.42;letter-spacing:-.012em}
h3{margin:2rem 0 .65rem;font-size:1.16rem;line-height:1.45}
p{margin:.75rem 0}
strong{font-weight:750}
math{
  font-family:"Latin Modern Math","STIX Two Math","Cambria Math",serif;
  color:var(--ink);
  font-variant-numeric:lining-nums;
}
.inline-math{font-size:1.02em}
.eq{display:flex;align-items:center;justify-content:center;gap:.35em;margin:18px 0 20px;font-size:1.34rem;line-height:1.25;min-height:2.3em;overflow-x:auto;overflow-y:hidden;padding:.38em .2em}
.eq math{font-size:1em}
.eq strong{font-weight:700}
.calculation{display:grid;grid-template-columns:max-content 1.2em max-content;width:max-content;max-width:100%;margin:18px auto 20px;font-size:1.34rem;line-height:1.25;overflow-x:auto;padding:.25em .2em}
.calc-row{display:contents}
.calc-row>*{align-self:center;min-height:2.35em;display:inline-flex;align-items:center}
.calc-left{justify-self:end}.calc-sign{justify-self:center;font-family:"STIX Math","Cambria Math","Times New Roman",serif}.calc-right{justify-self:start}
.calculation math{font-size:1em}
.eqpair{display:flex;justify-content:center;align-items:center;gap:2.2rem;flex-wrap:wrap;margin:18px 0 20px;font-size:1.34rem;line-height:1.25}
.eqpair>span{display:inline-flex;align-items:center;gap:.2em;min-height:2.2em}

.question{margin-top:.45rem;padding:18px 20px;border-left:4px solid var(--blue);border-radius:0 10px 10px 0;background:#f8faff;font-size:1.04rem}
.card{border:1px solid var(--line);border-radius:14px;background:#fff;padding:24px 26px}
.soft{background:var(--soft)}
.point{margin-top:24px;border:1px solid #cad8eb;border-radius:12px;background:var(--blue-soft);padding:18px 20px}
.point-title{margin-bottom:.25rem;color:var(--blue);font-weight:800}
.bridge{margin:32px 0;padding:22px 4px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bridge .ask{font-size:1.12rem;font-weight:750}
.mini{font-size:.94rem;color:var(--muted)}
.term-stage{margin:25px auto 22px;max-width:840px;border:1px solid var(--line);border-radius:14px;background:#fbfcfe;padding:24px}
.term-stage-title{font-weight:750;color:#4e5f77;margin-bottom:15px}
.term-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:center}
.term-chip{display:inline-flex;align-items:center;justify-content:center;min-width:126px;min-height:58px;padding:10px 14px;border:1px solid #cbd7e6;border-radius:12px;background:#fff;font-size:1.18rem}
.term-chip.x2{border-color:#aec7e8;background:#f4f8fd}
.term-chip.x1{border-color:#b9d8cc;background:#f3faf7}
.term-chip.c0{border-color:#e3d2b6;background:#fffaf1}
.term-key{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px}
.term-key>div{border-top:3px solid var(--line);padding-top:8px;text-align:center;color:var(--muted);font-size:.9rem}
.term-key .k1{border-color:#8eb0de}.term-key .k2{border-color:#8fc1af}.term-key .k3{border-color:#d7b678}
.term-equation{display:flex;align-items:center;justify-content:center;min-height:58px;font-size:1.2rem;white-space:nowrap}
.term-equation math{font-size:1em}
.step-list{display:grid;gap:12px;margin-top:18px}
.step{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:start}
.step-num{width:34px;height:34px;border-radius:999px;background:var(--blue);color:white;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;margin-top:2px}
.step-body{padding:1px 0}
.step-body strong{display:block;margin-bottom:.25rem}
.def-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:20px}
.def-card{border:1px solid var(--line);border-radius:12px;padding:19px 20px;background:#fff}
.def-card h3{margin:0 0 .45rem;font-size:1.05rem}
.def-card p{margin:.35rem 0}
.def-card .sample{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);font-size:.95rem;color:var(--muted)}
.focus-card{margin-top:22px;border:1px solid #bfd6ce;border-radius:13px;background:var(--green-soft);padding:22px 24px}
.focus-card .focus-title{color:var(--green);font-weight:800;margin-bottom:.45rem}
.focus-table{width:100%;border-collapse:collapse;margin-top:15px;font-size:.95rem}
.focus-table th,.focus-table td{padding:11px 12px;border-bottom:1px solid #d9e9e3;text-align:left;vertical-align:top}
.focus-table th{font-size:.88rem;color:#526b62;background:rgba(255,255,255,.55)}
.focus-table tr:last-child td{border-bottom:0}
.example-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.badge{display:inline-block;border-radius:999px;background:var(--blue);color:white;font-size:.76rem;font-weight:800;padding:4px 10px;line-height:1.7}
.solution{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.warn{margin-top:20px;border-left:4px solid var(--accent);border-radius:0 10px 10px 0;background:var(--warn);padding:16px 18px}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.compare>div{border:1px solid var(--line);border-radius:11px;padding:18px 20px}
.compare>div>strong{display:block;margin-bottom:.45rem}
.practice{display:grid;gap:14px}
.problem{border:1px solid var(--line);border-radius:11px;padding:18px 20px}
.problem p{margin:0}
details{margin-top:9px}
summary{width:max-content;max-width:100%;cursor:pointer;color:var(--blue);font-size:.93rem;font-weight:700}
.answer{margin-top:11px;padding-top:10px;border-top:1px dashed var(--line);font-size:.95rem}
.answer p{margin:.28rem 0}
.result{font-weight:750}
.summary-box ul{margin:.4rem 0 0;padding-left:1.35rem}
.summary-box li+li{margin-top:.35rem}
.next{border-top:1px solid var(--line);padding-top:25px;color:var(--muted)}
.navrow{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:14px;align-items:stretch;margin-top:24px}
.navrow a{border:1px solid var(--line);border-radius:12px;padding:14px 16px;text-decoration:none;color:var(--ink);background:#fff}
.navrow .nav-next{text-align:right}
.navrow .nav-index{min-width:150px;text-align:center}
.navrow a:hover{border-color:#aac0df;background:#f8faff}
.navrow .small{display:block;color:var(--muted);font-size:.82rem;margin-bottom:2px}
.rule{border:1px solid #cad8eb;background:var(--blue-soft);border-radius:12px;padding:18px 20px;margin:18px 0}
.rule strong{color:var(--blue)}
.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.flow{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;margin:18px 0}
.flow span{border:1px solid var(--line);border-radius:10px;padding:10px 14px;background:#fff}
.flow .arrow{border:0;background:transparent;color:var(--muted);padding:0}
.numberline{margin:20px auto;max-width:760px;padding:26px 18px 18px;border:1px solid var(--line);border-radius:12px;background:#fbfcfe;overflow:hidden}
.numberline .axis{height:2px;background:#52627a;position:relative;margin:18px 14px}
.numberline .axis:before,.numberline .axis:after{content:'';position:absolute;top:-4px;width:10px;height:10px;border-top:2px solid #52627a;border-right:2px solid #52627a}
.numberline .axis:before{left:-1px;transform:rotate(-135deg)}
.numberline .axis:after{right:-1px;transform:rotate(45deg)}
.tickrow{display:flex;justify-content:space-between;color:var(--muted);font-size:.9rem;padding:0 8px}
.checklist{display:grid;gap:10px;margin-top:14px}
.checkitem{border-left:3px solid #9ab8df;padding:10px 14px;background:#f8faff;border-radius:0 9px 9px 0}
.callout{border:1px solid #d8e6de;background:#f5fbf8;border-radius:12px;padding:18px 20px;margin:18px 0}
.callout strong{color:var(--green)}
.math-figure{margin:22px auto 26px;max-width:820px;border:1px solid var(--line);border-radius:14px;background:#fbfcfe;padding:18px 18px 12px}
.math-figure svg{display:block;width:100%;height:auto;overflow:visible}
.math-figure figcaption{margin-top:8px;color:var(--muted);font-size:.9rem;text-align:center}
.math-figure .axis-line{stroke:#52627a;stroke-width:2}
.math-figure .tick{stroke:#7a879a;stroke-width:1.5}
.math-figure .range{stroke:var(--blue);stroke-width:7;stroke-linecap:round}
.math-figure .range-soft{stroke:#9ab8df;stroke-width:7;stroke-linecap:round}
.math-figure .endpoint-open{fill:#fff;stroke:var(--blue);stroke-width:3}
.math-figure .endpoint-closed{fill:var(--blue);stroke:var(--blue);stroke-width:2}
.math-figure .guide{stroke:#a8b3c2;stroke-width:1.5;stroke-dasharray:5 5}
.math-figure .accent-line{stroke:var(--accent);stroke-width:3}
.math-figure .label{fill:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic","Noto Sans CJK JP",Meiryo,sans-serif;font-size:15px}
.math-figure .math-label{fill:var(--ink);font-family:"STIX Math","Cambria Math","Times New Roman",serif;font-size:17px}
.math-figure .muted-label{fill:var(--muted);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic","Noto Sans CJK JP",Meiryo,sans-serif;font-size:13px}
.standard-number-lines .row-label{font-weight:750}
.standard-number-lines .range-soft{stroke:#9ab8df}
.standard-number-lines .soft-end{stroke:#7899c4}
.standard-number-lines .endpoint-closed.soft-end{fill:#7899c4}
.standard-number-lines .no-overlap{fill:var(--muted);font-weight:700}
.formula-list{display:grid;gap:12px;margin-top:12px;justify-items:center;font-size:1.2rem;overflow:visible}
.figure-legend{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin:4px 0 0;color:var(--muted);font-size:.9rem}
.figure-legend span{display:inline-flex;align-items:center;gap:7px}
.legend-open,.legend-closed{display:inline-block;width:13px;height:13px;border-radius:50%;border:2px solid var(--blue)}
.legend-open{background:#fff}.legend-closed{background:var(--blue)}
.reason-row{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;margin:18px 0}
.reason-row>div{border:1px solid var(--line);border-radius:12px;padding:16px 18px;background:#fff;text-align:center}
.reason-row .reason-arrow{border:0;background:transparent;color:var(--muted);padding:0;font-size:1.3rem}
.model-table{width:100%;border-collapse:collapse;margin:18px 0;font-size:.95rem}
.model-table th,.model-table td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.model-table th{background:#f7f9fc;color:#52627a;font-size:.88rem}

@media(max-width:720px){
  .wrap{width:min(100% - 28px,var(--page))}
  .top{padding:9px 0}
  .lesson-topbar{gap:8px}
  .lesson-quick{gap:2px;font-size:.82rem}
  .lesson-quick>a,.lesson-picker>summary{min-height:36px;padding:5px 7px;font-size:.82rem}
  .wide-label{display:none}.short-label{display:inline}
  .lesson-picker-panel{position:fixed;top:56px;right:14px;left:14px;width:auto;max-height:calc(100vh - 72px);padding:14px}
  .lesson-picker-grid{grid-template-columns:1fr}
  .lesson-picker-grid a{min-height:36px}
  .hero{padding-top:38px}
  section{margin:38px 0}
  h2{font-size:1.42rem}
  .card{padding:20px 18px}
  .eq,.eqpair{font-size:1.17rem}.calculation{font-size:.98rem}
  .long-formula{font-size:1rem}
  .eq{justify-content:center;padding:.42em 0;overflow-x:auto;overflow-y:hidden}
  .calculation{display:grid;width:100%;justify-content:start;overflow-x:auto;padding:.35em 0}
  .eqpair{gap:1rem}
  .term-stage{padding:20px 14px}
  .term-chip{min-width:100px;font-size:1.04rem;min-height:52px}
  .term-key{grid-template-columns:1fr}
  .def-grid,.compare,.two-col,.navrow{grid-template-columns:1fr;display:grid}
  .navrow .nav-prev,.navrow .nav-next{text-align:left}
  .navrow .nav-index{min-width:0;text-align:left}
  .nav-spacer{display:none}
  .focus-card{padding:19px 16px}
  .focus-table{font-size:.88rem;display:block;overflow-x:auto;white-space:nowrap}
  .model-table{width:100%;table-layout:fixed;font-size:.82rem}
  .model-table th,.model-table td{padding:8px 6px;overflow-wrap:anywhere}
  .model-table math{font-size:.88em}
  .step{grid-template-columns:36px 1fr;gap:9px}
  .math-figure{padding:12px 8px 8px;border-radius:11px}
  .math-figure .label{font-size:13px}.math-figure .math-label{font-size:15px}.math-figure .muted-label{font-size:11px}
  .standard-number-lines{overflow:hidden}.standard-number-lines svg{min-width:0}
  .standard-number-lines .label{font-size:23px}.standard-number-lines .math-label{font-size:22px}
  .reason-row{grid-template-columns:1fr}.reason-row .reason-arrow{transform:rotate(90deg)}
}
