:root {
  --ink: #302839;
  --muted: #665f6e;
  --paper: #fffdf8;
  --cream: #fff7ec;
  --line: #ebdcd3;
  --theme: #ce56a6;
  --theme-dark: #85336f;
  --theme-soft: #fff0f8;
  --teal: #2d8d92;
  --amber: #edb848;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: radial-gradient(circle at 8% 0, #f8e4f3, transparent 25rem), radial-gradient(circle at 94% 14%, #e5f5f3, transparent 28rem), var(--cream);
  font-family: "Yu Gothic UI", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  line-height: 1.82;
}
body.stage-cpu { --theme:#2c9a9c; --theme-dark:#246d72; --theme-soft:#ecf9f8; }
body.stage-gpu { --theme:#8267be; --theme-dark:#584285; --theme-soft:#f4f0ff; }
img { max-width: 100%; }
a { color: var(--theme-dark); text-underline-offset: 3px; }
.skip { position:absolute; left:-10000px; top:auto; }
.skip:focus { left:12px; top:12px; z-index:20; padding:8px 12px; background:white; }
.top-nav, .lesson-page, .bottom-nav { width: min(1080px, calc(100% - 28px)); margin-inline: auto; }
.top-nav { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:9px; padding:18px 4px 10px; font-size:.9rem; font-weight:800; }
.top-nav a { text-decoration:none; }
.top-nav .chapter-mark { color:var(--muted); }
.lesson-page {
  overflow:hidden;
  margin-top:8px;
  border:2px solid #eadccd;
  border-radius:30px;
  background:var(--paper);
  box-shadow:0 13px 0 #eadcc9,0 20px 55px #513b4b1b;
}
.lesson-hero {
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(220px,.8fr);
  align-items:center;
  gap:18px;
  min-height:430px;
  padding:38px 48px 30px;
  background:radial-gradient(circle at 85% 10%, #ffffffbf 0 6%, transparent 6.5%), linear-gradient(128deg,var(--theme-soft),#fff9ef 76%);
  border-bottom:3px dashed color-mix(in srgb,var(--theme),white 44%);
}
.kicker { display:inline-flex; padding:5px 13px; border:2px solid var(--theme); border-radius:999px; color:var(--theme-dark); background:#fff; font-weight:900; box-shadow:3px 3px 0 color-mix(in srgb,var(--theme),white 63%); }
h1,h2,h3,h4 { line-height:1.35; }
h1 { margin:15px 0 12px; color:var(--theme-dark); font-size:clamp(2rem,4.4vw,3.5rem); letter-spacing:-.05em; }
.lead { max-width:680px; margin:0; color:#584d60; font-size:1.08rem; font-weight:650; }
.teacher-talk { margin:20px 0 0; padding:14px 17px; max-width:600px; border:2px solid var(--theme); border-radius:17px; background:#fff; color:var(--theme-dark); font-weight:750; box-shadow:4px 5px 0 #e8d8cd; }
.teacher-frame { position:relative; align-self:end; display:flex; align-items:end; justify-content:center; min-height:345px; border-radius:28px; background:radial-gradient(circle at 50% 48%,#dff0f1,#f5edfb 68%,transparent 69%); }
.teacher-frame img { display:block; width:min(100%,270px); height:365px; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 7px 5px #483e4e33); }
.lesson-content { padding:0 clamp(20px,5vw,60px) 50px; }
.contents { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:26px 0 32px; padding:12px; border:1px solid var(--line); border-radius:15px; background:#fffaf2; }
.contents strong { margin-right:7px; color:var(--theme-dark); }
.contents a { padding:4px 10px; border-radius:999px; background:white; text-decoration:none; font-size:.87rem; font-weight:800; }
.lesson-content h2 { display:flex; align-items:center; gap:10px; margin:2.25em 0 .85em; padding:10px 16px; border-radius:14px 21px 14px 21px; color:var(--theme-dark); background:var(--theme-soft); font-size:clamp(1.2rem,2.4vw,1.55rem); box-shadow:0 4px 0 color-mix(in srgb,var(--theme),white 72%); }
.lesson-content h2::before { content:"✎"; flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; color:#fff; background:var(--theme); font-size:1.1rem; }
.lesson-content h3 { margin-top:1.55em; color:var(--theme-dark); }
.lesson-content p { margin:.85em 0; }
.lesson-content li { margin:.35em 0; }
.lesson-content li::marker { color:var(--theme); font-weight:900; }
.goal-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 16px; margin:0; padding-left:1.3em; }
.case-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; margin:18px 0; }
.case { min-width:0; padding:17px; border:2px solid #eadfd6; border-radius:17px; background:#fff; box-shadow:0 4px 0 #efe5db; }
.case-label { display:inline-block; margin-bottom:6px; color:var(--theme-dark); font-size:.83rem; font-weight:900; }
.case p { margin:0; font-size:.94rem; }
.plain-pattern { padding:15px 18px; border-left:6px solid var(--amber); border-radius:12px; background:#fff8df; }
.plain-pattern strong { color:#7a581a; }
.formula { overflow-x:auto; margin:16px 0; padding:15px 17px; border:2px solid color-mix(in srgb,var(--theme),white 58%); border-radius:15px; color:var(--theme-dark); background:var(--theme-soft); font-family:Cambria,"Times New Roman",serif; font-size:clamp(1.03rem,2vw,1.28rem); font-weight:800; text-align:center; white-space:normal; }
.symbol-note { color:var(--muted); font-size:.94rem; }
.example { margin:20px 0; padding:18px 22px; border:2px solid #b9d9c4; border-radius:19px; background:#f4fcf5; box-shadow:0 5px 0 #e1efdf; }
.example strong { color:#2d7550; }
.example ol { margin:8px 0; padding-left:1.4em; }
.example .answer-line { padding:8px 12px; border-radius:10px; background:#fff; font-weight:800; }
.chapter { margin-top:26px; }
.chapter h2 { margin-top:1.7em; }
.chapter table { width:100%; border-collapse:collapse; margin:15px 0; }
.chapter th,.chapter td { padding:9px 11px; border:1px solid #e3d8d9; text-align:left; }
.chapter th { color:var(--theme-dark); background:var(--theme-soft); }
.chapter table { display:block; max-width:100%; overflow-x:auto; }
.chapter pre { overflow-x:auto; margin:15px 0; padding:15px 18px; border-radius:14px; color:#2e3040; background:#f3f4f7; font-size:.91rem; line-height:1.6; }
code { overflow-wrap:anywhere; color:var(--theme-dark); background:var(--theme-soft); border-radius:4px; padding:1px 3px; }
pre code { color:inherit; background:transparent; padding:0; overflow-wrap:normal; }
.chapter blockquote { margin:15px 0; padding:5px 18px; border-left:5px solid var(--theme); background:var(--theme-soft); }
.mascot-callout { display:grid; grid-template-columns:105px minmax(0,1fr); align-items:center; gap:12px; min-height:125px; margin:22px 0; padding:12px 17px 12px 7px; border:2px solid color-mix(in srgb,var(--theme),white 48%); border-radius:21px; background:linear-gradient(135deg,#fff,var(--theme-soft)); box-shadow:0 5px 0 #ede2d7; }
.mascot-callout.right { grid-template-columns:minmax(0,1fr) 105px; padding:12px 7px 12px 17px; }
.mascot-callout.right .mascot-art { grid-column:2; grid-row:1; }
.mascot-callout.right .mascot-copy { grid-column:1; grid-row:1; }
.mascot-art { display:block; width:100px; height:122px; object-fit:contain; }
.mascot-label { display:inline-block; padding:2px 10px; border-radius:999px; color:#fff; background:var(--theme); font-size:.83rem; font-weight:900; }
.mascot-copy p { margin:4px 0; }
.mascot-callout.caution { border-color:#eeb39a; background:linear-gradient(135deg,#fff,#fff0e8); }
.mascot-callout.caution .mascot-label { background:#dc744b; }
.practice { counter-reset:question; padding-left:0; list-style:none; }
.practice > li { position:relative; margin:14px 0; padding:14px 15px 14px 48px; border:1px solid #cbdde9; border-radius:13px; background:#f5fbff; }
.practice > li::before { counter-increment:question; content:counter(question); position:absolute; top:13px; left:12px; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; color:#fff; background:#558cab; font-weight:900; }
details { margin-top:8px; padding:8px 12px; border:1px dashed var(--theme); border-radius:10px; background:#fff; }
summary { color:var(--theme-dark); cursor:pointer; font-weight:800; }
.extra-task { padding:16px 19px; border:2px solid #d7e5e4; border-radius:17px; background:#f4fbfb; }
.diagram { margin:22px 0; padding:14px; border:2px solid var(--line); border-radius:18px; background:#fff; }
.diagram svg { display:block; width:100%; height:auto; }
.diagram figcaption { margin-top:8px; color:var(--muted); font-size:.92rem; text-align:center; }
.lesson-footer { margin-top:34px; padding:18px; border-top:2px dashed var(--line); color:var(--muted); font-size:.9rem; }
.bottom-nav { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:28px 4px 54px; }
.bottom-nav a { padding:9px 15px; border:2px solid var(--theme); border-radius:999px; background:#fff; font-weight:800; text-decoration:none; }
@media (max-width:740px) {
  .lesson-hero { grid-template-columns:1fr 150px; min-height:330px; padding:26px 21px; }
  .teacher-frame { min-height:230px; }
  .teacher-frame img { height:245px; }
  .case-grid { grid-template-columns:1fr; }
}
@media (max-width:520px) {
  .lesson-page { border-radius:20px; }
  .lesson-hero { display:block; }
  .teacher-frame { min-height:195px; max-width:220px; margin:15px auto 0; }
  .teacher-frame img { height:225px; }
  .goal-list { grid-template-columns:1fr; }
  .mascot-callout,.mascot-callout.right { grid-template-columns:78px minmax(0,1fr); padding:10px 9px 10px 3px; }
  .mascot-callout.right .mascot-art { grid-column:1; }
  .mascot-callout.right .mascot-copy { grid-column:2; }
  .mascot-art { width:75px; height:94px; }
  .top-nav,.bottom-nav { font-size:.82rem; }
}
@media print {
  @page { margin:14mm; }
  body { background:#fff; }
  .top-nav,.bottom-nav,.contents { display:none; }
  .lesson-page { width:100%; margin:0; border:0; box-shadow:none; }
  .lesson-hero,.mascot-callout,.example,.chapter,.practice > li { break-inside:avoid; }
  .lesson-content { padding:0 12px; }
  details { break-inside:avoid; }
}