:root{--ink:#173754;--muted:#536c86;--teal:#2168cc;--mint:#e3efff;--navy:#12376b;--gold:#a7ccff;--line:#d7e3f3;--paper:#fff;--bg:#f1f6fd}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:85px}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.9 'Yu Gothic','Meiryo',sans-serif}a{color:#195fbd;text-underline-offset:4px}button,input,select{font:inherit}button{cursor:pointer}button,a,input,select,summary{outline-offset:4px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #dc8b00}header{background:var(--navy);color:white;overflow:hidden}.hero{max-width:1180px;margin:auto;display:grid;grid-template-columns:1.25fr 1fr;align-items:center;gap:40px;padding:64px 32px}.eyebrow{font-size:12px;font-weight:bold;letter-spacing:.18em;color:#a7ceff}h1{font-size:clamp(30px,4.2vw,51px);line-height:1.45;margin:20px 0}h1 em{font-style:normal;color:#a7ceff}.lead{color:#dae8ff;max-width:660px}.hero-meta{font-size:12px;color:#b9d1f7;margin-top:28px}.hero-art{width:100%;max-height:350px}.hero-pills{display:flex;gap:9px;flex-wrap:wrap}.hero-pills span{border:1px solid #7799c7;border-radius:25px;padding:4px 14px;font-size:13px}.topbar{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:12px max(20px,calc((100vw - 1120px)/2));gap:18px}.topbar strong{white-space:nowrap;font-size:14px}.topbar div{display:flex;gap:10px}.btn{border:1px solid var(--line);background:white;border-radius:8px;padding:7px 15px;font-size:13px;color:var(--ink);text-decoration:none;white-space:nowrap}.btn.primary{background:var(--teal);border-color:var(--teal);color:white}.layout{max-width:1180px;margin:auto;display:grid;grid-template-columns:215px minmax(0,1fr);gap:40px;padding:35px 32px 70px}.sidebar{position:sticky;top:90px;height:max-content;max-height:calc(100vh - 110px);overflow:auto;font-size:13px}.sidebar a{display:block;text-decoration:none;color:var(--muted);padding:9px 12px;border-left:2px solid var(--line)}.sidebar a:hover{background:var(--mint);color:var(--teal);border-color:var(--teal)}.sidebar b{display:block;margin-bottom:15px}.sidebar .small{margin-top:20px;padding:10px}.chapter{background:white;border:1px solid var(--line);border-radius:16px;padding:32px;margin-bottom:26px}.kicker{color:var(--teal);font-size:12px;font-weight:bold;letter-spacing:.13em}h2{font-size:26px;line-height:1.6;margin:6px 0 20px}h3{font-size:18px;line-height:1.8;margin:24px 0 10px}h4{font-size:16px;margin:10px 0}p{margin:12px 0}ul,ol{padding-left:1.5em}li{margin:6px 0}.intro{font-size:17px}.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:20px 0}.card{padding:22px;background:#f2f7fe;border-radius:12px;border:1px solid var(--line)}.card h3{margin:0 0 10px}.number{font:700 44px/1.2 Arial,sans-serif;color:var(--teal)}.number small{font-size:17px;margin-left:5px}.callout{border-left:4px solid var(--teal);background:#eef5ff;padding:16px 20px;margin:22px 0;border-radius:0 9px 9px 0}.callout.warn{border-color:#c58b25;background:#fff7e8}.callout b{display:block}.small{font-size:12px;color:var(--muted)}.table-wrap{overflow:auto;margin:20px 0}table{border-collapse:collapse;width:100%;font-size:14px}th,td{border:1px solid var(--line);padding:12px;text-align:left;vertical-align:top}th{background:#eef4fd}thead th{background:var(--navy);color:#fff}td:first-child{font-weight:bold}figure{margin:25px 0;background:#f3f7fd;border:1px solid var(--line);padding:18px;border-radius:12px}figure svg{display:block;width:100%;height:auto}svg text{font-family:'Yu Gothic','Meiryo',sans-serif}figcaption{font-size:12px;color:var(--muted);margin-top:12px}.sources-inline{font-size:12px;color:var(--muted);margin-top:20px}.sources-inline a{margin-right:14px}.steps{counter-reset:step;list-style:none;padding:0}.steps li{position:relative;padding:13px 16px 13px 54px;border-bottom:1px solid var(--line)}.steps li:before{counter-increment:step;content:counter(step);position:absolute;left:5px;top:17px;border-radius:50%;width:29px;height:29px;background:var(--teal);color:white;text-align:center;line-height:29px;font-weight:bold}.steps b{display:block}.flow{display:flex;align-items:stretch;gap:10px;margin:24px 0}.flow>div{flex:1;background:#e7f0fd;border:1px solid #bbd1ef;border-radius:10px;padding:17px;font-weight:bold;line-height:1.7}.flow .arrow{align-self:center;flex:0;background:none;border:0;padding:0;font-size:24px;color:var(--teal)}.checklist{list-style:none;padding:0}.checklist label{display:block;padding:8px 0}.checklist input{width:19px;height:19px;vertical-align:middle;margin-right:10px;accent-color:var(--teal)}.sign-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.sign-card{border:1px solid var(--line);border-radius:10px;padding:16px;font-size:13px}.sign-card svg{width:78px;height:78px;display:block;margin:0 auto 10px}.sign-card b{display:block;text-align:center;margin-bottom:8px}.tools{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}.tools input{flex:1;min-width:200px}.tools input,.tools select{border:1px solid #a9bdc3;padding:9px 12px;border-radius:7px;background:white;max-width:100%}.question{border-top:1px solid var(--line);padding:24px 0}.question[hidden]{display:none}.question h3{margin:10px 0 15px;font-size:16px}.qmeta{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted)}.tag{background:#e8f1ff;color:#205da7;border-radius:20px;padding:2px 10px;font-size:11px}.tag.amber{background:#fff0d3;color:#825607}.signimg{display:block;max-width:160px;max-height:135px;margin:15px auto}summary{cursor:pointer;color:#195fbd;line-height:1.8;font-weight:bold}.registered{float:right;color:var(--muted);font-size:12px;font-weight:normal}.answer{padding:8px 17px 17px;background:#f3f7fd;border-radius:9px;margin-top:12px;font-size:14px}.memory{border-top:1px solid var(--line);padding-top:10px}.mini{padding:18px 0;border-bottom:1px solid var(--line)}.mini button{border:1px solid #a9bdc3;border-radius:7px;background:white;min-width:70px;margin:5px 7px 5px 0;padding:8px 15px}.mini button.selected{background:var(--navy);color:white}.feedback{padding:12px 15px;background:#edf5ff;border-radius:8px}.feedback.bad{background:#fff1e5}.resultline{font-weight:bold;color:var(--teal)}footer{text-align:center;color:var(--muted);font-size:12px;padding:25px}.print-note{display:none}.source-list li{margin-bottom:15px}.backtop{display:block;text-align:right;font-size:13px;margin-top:15px}.avoid-break{break-inside:avoid}
@media(max-width:950px){.layout{grid-template-columns:1fr;padding:25px 20px}.sidebar{position:static;max-height:none;display:flex;gap:4px;flex-wrap:wrap}.sidebar b,.sidebar .small{display:none}.sidebar a{border:1px solid var(--line);border-radius:20px;padding:5px 12px;background:white}.hero{padding:40px 25px;gap:10px}.chapter{padding:26px}.topbar{padding:10px 20px}}
@media(max-width:600px){body{font-size:15px}.hero{grid-template-columns:1fr}.hero-art{max-height:230px}.hero h1{font-size:31px}.chapter{padding:22px 18px}.cards{grid-template-columns:1fr}.sign-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.flow{flex-direction:column}.flow .arrow{transform:rotate(90deg)}h2{font-size:23px}.topbar strong{font-size:12px}.topbar div{gap:5px}.btn{padding:7px 10px}.registered{float:none;display:block}.qmeta{align-items:flex-start}.layout{padding:18px 12px}.tools select{width:100%}}
@media print{html{scroll-behavior:auto}body{background:white;font-size:10pt;line-height:1.7}.topbar,.sidebar,.tools,.interactive-controls,.backtop,footer{display:none!important}.hero{padding:20px 0;grid-template-columns:1.5fr 1fr;color:#173754}.hero h1{font-size:25pt}.hero .lead,.hero-meta,.eyebrow{color:#173754}header{background:white}.hero-art{max-height:170px}.layout{display:block;padding:0;max-width:none}.chapter{border:0;padding:12px 0;margin-bottom:10px;border-radius:0}.chapter>h2{border-bottom:2px solid #2168cc;padding-bottom:8px}.chapter:not(:first-child){break-before:page}h2,h3,h4,summary{break-after:avoid}.cards,.sign-grid,figure,.question,.mini{break-inside:avoid}figure{padding:10px}figure svg{max-height:230px}table{font-size:9pt}th,td{padding:8px}.question[hidden]{display:block}.question{padding:14px 0}details>summary{list-style:none}.print-note{display:block;font-size:9pt}a{color:inherit;text-decoration:none}.source-list a{text-decoration:underline}*{print-color-adjust:exact;-webkit-print-color-adjust:exact}@page{size:A4;margin:16mm}}

/* Blue edition / mobile reading */
.sign-image-box{height:130px;display:flex;align-items:center;justify-content:center;background:white;margin-bottom:15px;border-radius:8px;padding:8px}.sign-image-box img{display:block;max-width:100%;max-height:114px;object-fit:contain}.sign-card p{margin:8px 0}.sign-card{background:#f8fbff}.road-lines{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.road-lines .card{padding:15px}.road-lines svg{width:100%;height:auto}.road-lines p{font-size:13px}.zoom-button{display:block;margin:12px auto 0;border:1px solid #b0c8e8;background:white;border-radius:8px;padding:8px 16px;color:#195fbd;font-size:13px}.diagram-modal{border:0;border-radius:14px;width:min(1100px,96vw);max-width:96vw;padding:15px;max-height:92vh;overflow:auto;box-shadow:0 15px 70px #12376b55}.diagram-modal::backdrop{background:#0d224ccc}.diagram-modal .close-zoom{position:sticky;top:0;display:block;margin-left:auto;border:1px solid #b8cdec;border-radius:8px;background:#fff;padding:8px 18px;color:#12376b}.diagram-modal .zoom-content{overflow:auto;margin-top:15px}.diagram-modal svg{display:block;width:100%;min-width:720px;height:auto}.diagram-modal h3{margin:8px;font-size:16px}.hero .lead{font-size:16px}.hero-meta{line-height:1.8}
@media(max-width:600px){body{font-family:'Meiryo','Yu Gothic',sans-serif;font-size:16px;line-height:1.85}.chapter{padding:23px 18px}.hero{padding:30px 22px}.hero h1{font-size:30px;letter-spacing:0}.hero-art{max-height:205px}.hero-meta{font-size:11px}.topbar{padding:9px 12px}.topbar strong{font-size:11px}.topbar .btn{font-size:12px;min-height:42px;display:inline-flex;align-items:center;padding:7px 9px}.sidebar{flex-wrap:nowrap;overflow-x:auto;padding:4px 0 10px;max-width:100%;-webkit-overflow-scrolling:touch}.sidebar a{flex:0 0 auto;font-size:12px;min-height:42px;display:flex;align-items:center}.chapter h2{font-size:23px}.sign-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.sign-card{padding:12px;font-size:13px}.sign-card b{font-size:14px}.sign-image-box{height:105px;margin-bottom:10px}.sign-image-box img{max-height:90px}.table-wrap{overflow:visible}table,tbody,tr,td,th{display:block;width:100%}thead{display:none}tbody tr{margin-bottom:13px;border:1px solid #d7e3f3;border-radius:10px;overflow:hidden}td,th{border:0;padding:11px 13px}td:first-child{background:#e8f1ff;color:#17446f;font-size:15px}td+td{border-top:1px solid #d7e3f3}td[data-label]:before{content:attr(data-label);display:block;font-size:11px;font-weight:bold;color:#536c86;margin-bottom:4px}.road-lines{grid-template-columns:1fr}.road-lines .card{display:grid;grid-template-columns:90px 1fr;column-gap:14px;align-items:center}.road-lines svg{grid-row:span 2}.road-lines h4,.road-lines p{margin:0}.flow>div{font-size:15px}.mini button{min-height:48px;min-width:90px}.checklist label{padding:11px 0}figure{padding:10px;margin-left:0;margin-right:0}figcaption{font-size:12px}.zoom-button{min-height:44px}.steps li{padding-left:44px}.chapter p,.chapter li{overflow-wrap:anywhere}.diagram-modal .zoom-content{max-height:70vh}.diagram-modal svg{min-width:760px}}
@media print{.zoom-button,.diagram-modal{display:none!important}.road-lines{grid-template-columns:repeat(3,minmax(0,1fr))}.sign-image-box{height:90px}.sign-image-box img{max-height:85px}.sign-card{break-inside:avoid}}

/* Supplied cover and animated explanations */
.cover-visual{width:100%;margin:0}.hero-cover{display:block;width:100%;height:auto;border-radius:16px;box-shadow:none}.cover-note{font-size:11px;line-height:1.7;color:#dceaff;margin:12px 0 0}.hero{grid-template-columns:1fr 1.12fr;gap:32px}.animation-figure{padding:18px;background:#f4f8ff}.animation-image,.animation-freeze{display:block;width:100%;height:auto;max-width:540px;margin:auto;border-radius:9px}.animation-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px}.animation-actions button{margin:0;min-height:44px;border:1px solid #b0c8e8;background:white;border-radius:8px;padding:9px 16px;font-size:13px;color:#195fbd}.animation-actions .zoom-button{display:inline-block}.diagram-modal .zoom-content img{display:block;width:100%;min-width:620px;height:auto}.diagram-modal .zoom-content{max-height:75vh}.animation-figure figcaption{max-width:620px;margin:15px auto 0;font-size:14px;line-height:1.85}.animation-figure img[hidden],.animation-figure canvas[hidden]{display:none}.chapter>p,.chapter li{line-height:1.95}
@media(max-width:600px){.hero{grid-template-columns:1fr;gap:24px}.hero-cover{border-radius:10px}.hero h1{font-size:31px}.cover-note{font-size:11px}.animation-figure{padding:9px}.animation-figure figcaption{font-size:13px}.animation-actions{gap:7px}.animation-actions button{font-size:12px;padding:9px 13px;flex:1}.animation-image,.animation-freeze{max-width:100%}.chapter h2{font-size:22px}}
@media print{.hero{grid-template-columns:1fr 1fr}.hero-cover{max-height:190px;object-fit:contain;box-shadow:none}.cover-note{color:#173754}.animation-actions{display:none!important}.animation-image,.animation-freeze{max-height:215mm;width:auto;max-width:100%;object-fit:contain}.animation-figure{break-inside:avoid}.animation-figure figcaption{font-size:9pt}}

/* Screen stays animated; printing uses the supplied complete PNG explanations. */
.print-illustration{display:none!important}
@media print{
 @page{size:A4;margin:10mm 12mm 11mm}
 html{scroll-padding-top:0}
 body{font-size:10pt;line-height:1.65;background:white}
 .chapter,.chapter:not(:first-child){display:contents!important;break-before:auto!important;page-break-before:auto!important;break-inside:auto!important;margin:0 0 5mm;padding:3mm 0;border:0}
 .chapter>h2{font-size:16pt;margin:0 0 3mm;padding-bottom:2mm}
 .chapter h3{font-size:12pt;margin:4mm 0 2mm}
 .chapter h4{font-size:10.5pt;margin:2mm 0}
 .chapter>p,.chapter li{line-height:1.65}
 p{margin:2mm 0;orphans:3;widows:3}
 ul,ol{margin:2mm 0;padding-left:1.4em}li{margin:1mm 0}
 h2,h3,h4,.kicker{break-after:avoid!important;page-break-after:avoid!important}
 .cards,.sign-grid,.steps,.checklist,.table-wrap,.road-lines,.flow{break-inside:auto!important;page-break-inside:auto!important}
 .cards{gap:3mm;margin:3mm 0}.card{padding:3mm;break-inside:avoid}
 .number{font-size:29pt}.number small{font-size:11pt}
 .callout{padding:3mm 4mm;margin:3mm 0;break-inside:avoid}
 .table-wrap{margin:3mm 0}table{font-size:9pt}td,th{padding:2mm 3mm}tr{break-inside:avoid}thead{display:table-header-group}
 .steps li{padding:2mm 2mm 2mm 11mm;break-inside:avoid}.steps li:before{width:7mm;height:7mm;line-height:7mm;top:2.5mm;font-size:10pt}
 .hero{padding:0 0 4mm;gap:5mm}.hero h1{font-size:23pt;margin:2mm 0;line-height:1.4}.hero .lead{font-size:10pt;line-height:1.6}.hero-cover{max-height:47mm}.hero-meta,.cover-note{font-size:7pt}.hero-meta{margin-top:2mm}.hero-pills{display:none}.eyebrow{font-size:7pt}
 .animation-figure{padding:0;margin:3mm 0 4mm;background:white;border:0;border-radius:0;break-inside:avoid!important;page-break-inside:avoid!important}
 .animation-image,.animation-freeze,.animation-figure canvas,.animation-actions{display:none!important}
 .print-illustration{display:block!important;height:auto;width:auto;max-width:100%;max-height:150mm;object-fit:contain;margin:0 auto}
 .animation-figure figcaption{font-size:8pt;line-height:1.5;margin:1.5mm auto 0;max-width:165mm}
 .sign-grid{display:block;font-size:0}.sign-card{display:inline-block;width:32%;margin:0 1% 3mm 0;vertical-align:top;padding:3mm;font-size:8.5pt;break-inside:avoid}.sign-card p{line-height:1.5}.sign-image-box{height:18mm;padding:0;margin-bottom:2mm}.sign-image-box img{max-height:18mm}.sign-card b{margin:0;font-size:9pt}
 .road-lines .card{padding:2mm}.road-lines p{font-size:8pt}
 .mini{padding:2mm 0;break-inside:avoid}.mini button{display:none}.mini p{margin:1mm 0}.feedback[hidden]{display:none!important}.resultline,#resetPractice{display:none!important}
 .sources-inline,.source-list,.small{font-size:8pt;line-height:1.5}.source-list li{margin-bottom:2mm}.print-note{display:none}
}

/* Start each numbered chapter on a new sheet, only when printing. */
@media print {
  header { break-after: page; page-break-after: always; }
  main > .chapter,
  main > .chapter:not(:first-child) {
    display: block !important;
    break-before: page !important;
    page-break-before: always !important;
    break-inside: auto !important;
    page-break-inside: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Keep the cover and chapter 01 together; chapter 02 onward starts a new page. */
@media print {
  header { break-after: auto !important; page-break-after: auto !important; }
  main > .chapter:first-child {
    break-before: auto !important;
    page-break-before: auto !important;
  }
}

.site-footer{border-top:1px solid var(--line);padding:28px 20px;line-height:2}.site-footer strong{font-size:16px;color:var(--navy)}.site-footer a{font-size:14px}.site-footer small{display:inline-block;margin-top:10px}@media print{footer.site-footer{display:block!important;padding:4mm 0;break-inside:avoid}.site-footer strong{font-size:10pt}.site-footer a{font-size:9pt}.site-footer small{font-size:7pt;margin-top:1mm}}

/* Compact the mode comparison so its explanation stays together on A4. */
@media print{#mode{font-size:9pt;line-height:1.5}#mode .print-illustration{max-height:82mm}#mode>p,#mode li{line-height:1.5}#mode .cards{margin:2mm 0}#mode .card{padding:2mm}#mode h3{margin:2.5mm 0 1.5mm}#mode .animation-figure{margin:2mm 0}#mode ol{break-inside:avoid}#mode .callout{margin:2mm 0;padding:2mm 3mm}}

@media print{#mode .flow{margin:2mm 0;gap:2mm}#mode .flow>div{padding:2mm;line-height:1.4}#mode .flow .arrow{padding:0}#mode .print-illustration{max-height:76mm}}

@media print{#mode .cards .card{font-size:8pt;line-height:1.4}#mode .cards .number{font-size:22pt}#mode .cards h3{font-size:10pt}#mode .print-illustration{max-height:65mm}#mode .flow>div{font-size:8pt}#mode .sources-inline{font-size:7pt}}