*{box-sizing:border-box}body{margin:0;background:#0c1220;color:#eaf1fb;font-family:system-ui,-apple-system,"Noto Sans JP",sans-serif;line-height:1.85}a{color:#90d7ff}header,main,footer{max-width:840px;margin:auto;padding:24px}header{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid #314158}header a{text-decoration:none}h1{font-size:clamp(30px,5vw,49px);line-height:1.35;letter-spacing:-.03em}h2{margin-top:46px;font-size:25px}p{color:#cbd6e7}.eyebrow{color:#9ee7c8;font-weight:700;letter-spacing:.1em}.lead{font-size:20px}.panel{background:#162237;border:1px solid #30415b;border-radius:18px;padding:24px;margin:32px 0}.nav{display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap}.nav a,.copy{display:inline-block;border:1px solid #8cd6fb;padding:12px 18px;border-radius:9px;background:#15364d;color:white;text-decoration:none;font-weight:700;cursor:pointer}.progress{display:flex;gap:6px}.progress span{height:5px;flex:1;background:#34445d;border-radius:3px}.progress .on{background:#9ee7c8}blockquote{border-left:4px solid #9ee7c8;padding-left:20px;font-size:21px;color:white}pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#0b1626;padding:20px;border-radius:10px;color:#f0f7ff}footer{border-top:1px solid #30415b;font-size:13px;color:#9eacc0}.sources li{margin:8px 0}
.lesson-content p{margin:1.35em 0;line-height:2.05}.lesson-content{font-size:17px}.gift-panel{background:#142a35;border:1px solid #75d8b2;border-radius:18px;padding:22px;margin:30px 0}.gift-panel pre{line-height:1.85;font-family:inherit;font-size:15px}.gift-panel button{margin-right:14px}#copy-status{color:#9ee7c8}.sources{font-size:13px;overflow-wrap:anywhere}.sources a{word-break:break-all}@media(max-width:600px){header,main,footer{padding:18px}header{flex-direction:column}h1{font-size:clamp(27px,8vw,38px)}.lesson-content{font-size:16px}.gift-panel{padding:14px}.nav a{width:100%;text-align:center}}

/* B5 responsive visual integration */
.feature-visual,.lesson-diagram{margin:24px auto 32px;max-width:560px;text-align:center}
.feature-visual img,.lesson-diagram img{display:block;width:100%;height:auto;object-fit:contain;border-radius:12px;border:1px solid rgba(82,193,225,.3)}
.lesson-diagram figcaption{font-size:12px;opacity:.75;line-height:1.7;margin-top:8px}
@media(max-width:600px){.feature-visual,.lesson-diagram{margin:18px auto 25px;max-width:100%}}

/* B6: editable, accessible HTML diagrams replace AI-generated text diagrams */
.lesson-diagram{max-width:760px;text-align:left;padding:22px;border:1px solid #2d6b84;border-radius:16px;background:linear-gradient(135deg,#10253a,#0d1b2b)}
.lesson-diagram h2{font-size:clamp(20px,4vw,26px);margin:0 0 16px;color:#e9cb7c;line-height:1.4}
.diagram-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.diagram-card{border:1px solid #386078;border-radius:10px;padding:16px;background:#142e45;min-width:0}
.diagram-card strong{display:block;color:#8fe2ff;line-height:1.5;font-size:15px}
.diagram-card p{font-size:14px;line-height:1.7;margin:8px 0 0;color:#e0e8f1;overflow-wrap:anywhere}
@media(max-width:640px){.diagram-cards{grid-template-columns:1fr}.lesson-diagram{padding:15px}.diagram-card{padding:13px}}

/* B6: make AI-generated embedded Japanese illegible; replace with real selectable HTML */
.text-safe-hero{position:relative;overflow:hidden;border-radius:14px;max-width:560px;background:#0c1a2e;min-height:300px}
.text-safe-hero img{height:340px;object-fit:cover;object-position:center;border:0;opacity:.57;transform:scale(1.05)}
.hero-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:15px;padding:22px;background:linear-gradient(0deg,rgba(5,16,30,.8),transparent 70%);text-shadow:0 2px 14px #001}
.hero-overlay span{font-size:12px;letter-spacing:.25em;color:#9bdcff}
.hero-overlay strong{font-size:clamp(24px,5vw,37px);line-height:1.4;color:#fff3c4}
@media(max-width:600px){.text-safe-hero img{height:280px}.text-safe-hero{min-height:260px}}