/* Educational lab v3: colorful, playful, progressively enhanced. */
html { scroll-padding-top:0; }
:root { --royal:#3d49bb; --ink:#212f46; --muted:#4a5c70; --line:#b8c7d5; --page-tone:#ebefff; }
body { font-size:15px; }
.page-light { background:radial-gradient(ellipse at 8% 8%,#fff8 0,transparent 48%),radial-gradient(ellipse at 92% 60%,#fff6 0,transparent 45%); }
.site-header { background:#fffef5f2; border-bottom:2px solid #24384e; backdrop-filter:blur(12px); }
.wordmark { font-weight:800; letter-spacing:.12em; }
.wordmark span { letter-spacing:.13em; font-weight:700; }
.header-nav { font-weight:700; }
.eyebrow,.tiny-label { font-weight:700; }
.hero { column-gap:60px; padding-top:65px; }
.lab-badge { display:inline-flex; color:#253f38; background:#d7f797; border:1px solid #6b8662; border-radius:30px; padding:9px 17px; font-family:inherit; letter-spacing:.05em; font-size:12px; transform:rotate(-2deg); }
.hero-kicker { font-weight:700; font-size:13px; }
h1 { font-family:inherit; font-weight:800; font-size:clamp(42px,4.5vw,65px); letter-spacing:-.015em; line-height:1.32; }
.hero-three { font-family:Arial,sans-serif; font-weight:900; }
.hero h1 .royal { display:inline-block; position:relative; }
.hero h1 .royal::after { content:""; position:absolute; z-index:-1; height:14px; background:#b8ed79; left:0; right:0; bottom:2px; transform:rotate(-2deg); }
.hero-lead { font-weight:700; letter-spacing:.03em; margin-top:23px; }
.hero-playful { font-size:14px; color:var(--muted); margin-top:16px; }
.button { border-radius:12px; border-width:2px; font-weight:700; box-shadow:3px 4px 0 #24384e; border-color:#24384e; }
.button-primary { background:#3d49bb; }
.button-primary:hover { background:#2e3a99; box-shadow:1px 2px 0 #24384e; }
.button-lime { background:#d7f797; color:#263943; }
.button-lime:hover { background:#c5ed7f; }
.hero .button { margin-top:27px; }
.hero .hero-lab-link { margin-top:13px; display:flex; width:max-content; }
.hero-faq { margin-top:15px; }
.hero-art { padding-top:25px; padding-bottom:0; isolation:isolate; }
.molecule { top:0; left:-3%; width:105%; z-index:-1; opacity:.85; }
.hero-guide { width:85%; margin:34px 0 0 auto; position:relative; border:2px solid #24384e; border-radius:140px 140px 24px 24px; overflow:hidden; background:#d9eaf3; box-shadow:9px 10px 0 #b6c5ed; }
.hero-guide img { width:100%; aspect-ratio:4/5; height:auto; object-fit:cover; object-position:50% 14%; }
.hero-guide figcaption { background:#ffffffec; font-size:13px; font-weight:700; text-align:center; padding:10px 5px; border-top:2px solid #24384e; }
.guide-speech { position:absolute; z-index:2; top:0; left:-4px; background:#fffef5; padding:17px 22px; border:2px solid #24384e; border-radius:20px 20px 3px 20px; transform:rotate(-5deg); box-shadow:4px 4px 0 #eec092; }
.guide-speech>span { font-size:10px; color:#3746a3; font-weight:800; letter-spacing:.09em; }
.guide-speech p { font-size:18px; font-weight:800; line-height:1.6; margin-top:4px; }
.hero-sticker { position:absolute; right:-8px; top:35px; display:grid; place-content:center; text-align:center; background:#e6f56e; border:2px solid #24384e; border-radius:50%; width:95px; height:95px; transform:rotate(10deg); font:900 42px/1 Arial,sans-serif; box-shadow:3px 3px 0 #24384e; }
.hero-sticker span { font-size:10px; letter-spacing:.07em; padding-top:3px; }
.guide-partners { display:flex; gap:14px; justify-content:center; margin-top:27px; }
.guide-partners a { display:flex; flex-direction:column; align-items:center; gap:7px; font-size:12px; font-weight:700; min-width:0; padding:4px; border-radius:10px; }
.guide-partners a:hover { background:#fff7; }
.avatar { width:69px; height:69px; border:2px solid #24384e; border-radius:50%; display:block; position:relative; overflow:hidden; flex:none; background:#edf2fa; }
.avatar img { position:absolute; max-width:none; height:auto; width:210%; left:-84%; top:-29%; }
.avatar-rei img { width:180%; left:-46%; top:-18%; }
.avatar-micro img { left:-68%; top:-11%; }
.avatar-catal img { width:210%; left:-86%; top:-5%; }
.avatar-hema img { width:210%; left:-90%; top:-3%; }
.hero-bottom { margin-top:47px; font-weight:700; color:#364a65; border-top:2px dashed #91a3bb; }
.hero-bottom>span { font-family:Arial,sans-serif; letter-spacing:.08em; }
.section-heading h2,.technology h2,.closing h2 { font-family:inherit; font-weight:800; line-height:1.5; letter-spacing:-.015em; }
.section-heading>p:last-child { font-size:15px; }
.perspective-copy { font-size:15px; }
.perspective-copy .emphasis { font-weight:800; font-size:23px; }
.contact-flow { gap:16px; border:0; margin-top:55px; }
.contact-flow li { border:2px solid #24384e; border-radius:16px; padding:22px; background:#fff; box-shadow:4px 4px 0 #edcc8b; font-weight:700; }
.flow-number { font-family:Arial,sans-serif; font-weight:800; color:#b16725; }
.story-heading { margin-bottom:50px; }
.section-heading .scroll-hint { display:flex; align-items:center; gap:12px; margin-top:20px; color:#165e5a; font-weight:700; font-size:13px; }
.scroll-hint span { font:700 22px Arial,sans-serif; }
.story-layout { gap:60px; }
.story-visual { background:#fffef5; border:2px solid #24384e; border-radius:24px; box-shadow:8px 9px 0 #9ad6ce; }
.visual-heading .tiny-label { font-size:10px; }
.visual-counter { font-family:Arial,sans-serif; font-weight:800; }
.process-art { max-height:265px; }
.process-node circle { stroke-width:2; }
.process-node text { font-family:Arial,sans-serif; font-weight:800; }
.visual-title { font-family:inherit; font-weight:800; font-size:20px; min-height:55px; }
.step-nav a { font-size:12px; font-weight:700; }
.step-nav a span { font-family:Arial,sans-serif; font-weight:800; }
.step-nav a[aria-current] { background:#e9f4d6; border-radius:6px 6px 0 0; }
.process-cues { display:grid; min-height:45px; margin-top:17px; text-align:center; align-items:center; }
.process-cues .cue { grid-area:1/1; font-size:12px; font-weight:700; padding:10px 7px; border-radius:9px; background:#ebefff; opacity:0; transform:translateY(7px); transition:opacity .4s ease,transform .4s ease; }
[data-step="0"] .cue-observe,[data-step="1"] .cue-roles,[data-step="2"] .cue-water,[data-step="3"] .cue-video { opacity:1; transform:none; }
[data-step="0"] .node-observe circle { fill:#3d49bb; stroke:#3d49bb; }
[data-step="1"] .node-roles circle { fill:#367061; stroke:#367061; }
[data-step="2"] .node-water circle { fill:#386fbc; stroke:#386fbc; }
[data-step="3"] .node-video circle { fill:#89409a; stroke:#89409a; }
.hair-line { transition:stroke .5s ease; }
[data-step="1"] .hair-line { stroke:#367061; }
[data-step="2"] .hair-line { stroke:#386fbc; }
[data-step="3"] .hair-line { stroke:#89409a; }
.story-step { border-left:3px solid #b8d8d0; padding-left:30px; }
.story-step::before { width:9px; left:-6px; border-radius:20px; height:56px; }
.story-step h3 { font-weight:800; }
.story-step>p { font-size:15px; }
.step-label { font-weight:800; font-size:11px; }
.learning-point { background:#ffffff8f; border:1px solid #a7c4bd; padding:16px 18px; border-radius:12px; }
.learning-point>span { font-size:11px; font-weight:700; }
.learning-point p { font-size:14px; }
.step-mini { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:12px; font-weight:700; }
.step-mini span { padding:8px 12px; background:#d8edfd; border:1px solid #81a7c4; border-radius:8px; }
.step-mini b { font-size:18px; color:#53737d; }
.comic { border-top:2px dashed #c1a992; }
.comic-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:42px; }
.comic-card { min-width:0; border:2px solid #24384e; background:#fffef5; border-radius:18px; overflow:hidden; box-shadow:5px 6px 0 #eacdb5; }
.comic-open { display:block; position:relative; background:#f1f4f6; }
.comic-open img { width:100%; aspect-ratio:4/3; height:auto; object-fit:cover; object-position:50% 38%; }
.comic-future .comic-open img { object-fit:contain; background:#fff; }
.comic-open>span { display:flex; align-items:center; justify-content:space-between; background:#24384ef5; color:#fff; padding:10px 18px; font-weight:700; font-size:13px; }
.comic-open>span>span { font-size:21px; }
.comic-open:hover>span { background:#3d49bb; }
.comic-open:focus-visible { outline-offset:-6px; }
.comic-caption { padding:24px 22px; }
.speech-bubble { position:relative; background:#edf3ff; border:1px solid #b2bdd9; border-radius:14px 14px 14px 3px; font-size:16px; font-weight:700; padding:15px 18px; }
.comic-response { text-align:right; font-size:14px; margin-top:15px; }
.comic-note { font-size:13px; color:var(--muted); margin:27px 0 8px; }
.roles { border-top:2px dashed #b2c996; }
.lab-instruction { display:flex; flex-wrap:wrap; gap:8px 15px; align-items:center; }
.lab-instruction strong { color:#fff; background:#367061; padding:6px 12px; border-radius:20px; font:800 12px Arial,sans-serif; }
.role-grid { gap:24px; margin-top:40px; }
.role-card { border:2px solid #24384e; border-radius:22px; background:#fff; box-shadow:5px 6px 0 var(--card-shadow,#b5d0e6); padding:26px; position:relative; transition:box-shadow .25s ease,background-color .25s ease; }
.role-hydrogen { --card-shadow:#b5c4fa; --card-color:#eaf0ff; }
.role-carbon { --card-shadow:#b8d98b; --card-color:#f1f8e6; }
.role-bubble { --card-shadow:#99d8eb; --card-color:#e6f7ff; }
.role-catalase { --card-shadow:#c7b5e5; --card-color:#f2eafd; }
.role-hematin { --card-shadow:#df9d9f; --card-color:#fcebee; }
.role-keratin { --card-shadow:#e8c577; --card-color:#fff5d8; }
.role-card.is-selected { background:var(--card-color); box-shadow:2px 3px 0 #24384e; }
.role-top { margin-bottom:16px; align-items:center; flex-direction:row; }
.material-sign { width:45px; height:45px; font-size:17px; border-width:2px; background:var(--card-color); border-color:var(--card-shadow); font-family:Arial,sans-serif; font-weight:800; }
.bubble-sign { font-size:30px; }
.role-top .tiny-label { font-size:8px; }
.role-person { display:flex; align-items:center; gap:16px; margin:4px 0 18px; }
.role-person .avatar { width:85px; height:85px; border-color:var(--card-shadow); }
.role-person>span:last-child { font-size:18px; font-weight:800; line-height:1.5; }
.role-person>span:last-child>span { display:block; color:var(--muted); font:700 11px/1.5 Arial,sans-serif; margin-top:3px; }
.keratin-emblem { width:85px; height:85px; border:2px solid var(--card-shadow); border-radius:50%; display:grid; place-items:center; font-size:48px; line-height:1; background:var(--card-color); color:#9b6a12; }
.role-card h3 { font-weight:800; font-size:21px; }
.role-purpose { font-size:13px; font-weight:700; }
.role-card>p:not(.role-purpose) { font-size:14px; }
.role-card .text-link { font-size:12px; }
.role-choice { display:flex; align-items:center; gap:10px; background:var(--card-color); border:1px solid var(--card-shadow); border-radius:10px; min-height:50px; margin-top:20px; padding:9px 12px; cursor:pointer; font-size:12px; font-weight:700; }
.role-choice input { width:21px; height:21px; accent-color:#3d49bb; flex:none; }
.role-choice:has(input:focus-visible) { outline:3px solid #3d49bb; outline-offset:4px; }
.role-board { display:flex; align-items:center; justify-content:space-between; gap:25px; border:2px solid #24384e; border-radius:14px; background:#fffef5; padding:20px 23px; margin-top:42px; }
.role-selection { font-size:14px; font-weight:700; min-width:0; }
#role-clear { background:#fff; border:1px solid #8da0b4; padding:10px 13px; border-radius:8px; min-height:44px; font-size:12px; color:var(--ink); flex:none; cursor:pointer; }
#role-clear:disabled { color:#66727b; background:#eee; cursor:default; }
.connection-map { margin-top:25px; }
.connection-map .connector { stroke-width:2; }
.connection-map .connector.is-selected { stroke:#3d49bb; stroke-width:5; animation:connect-in .7s ease both; }
.connection-map figcaption p { font-family:inherit; font-weight:800; }
.connection-map .diagram-note { font-size:12px; margin:11px auto 0; max-width:570px; }
@keyframes connect-in { from { stroke-dasharray:1; stroke-dashoffset:1; } to { stroke-dasharray:1; stroke-dashoffset:0; } }
.technology { border-top:2px dashed #b3aace; }
.technology-art { border:2px solid #24384e; border-radius:24px; box-shadow:7px 8px 0 #c1b8ed; }
.technology-name { font-weight:700; }
.technology-name strong { font-family:Arial,sans-serif; font-weight:800; }
.technology-statement { font-size:16px; font-weight:700; }
.technology-copy>p:not([class]) { font-size:14px; }
.learning { border-top:2px dashed #a5b7d6; }
.learning-nav a { font-size:13px; font-weight:700; background:#fff; border:2px solid #24384e; border-radius:10px; }
.video-card { border:2px solid #24384e; border-radius:22px; background:#ffffffed; box-shadow:6px 7px 0 #b9c9e9; }
.video-card h3,.video-feature h3 { font-family:inherit; font-weight:800; }
.video-feature .video-description { font-family:inherit; font-weight:700; }
.video-copy>p:not([class]),.video-description { font-size:15px; }
.media-frame { border-radius:12px; }
.play-icon { width:70px; height:70px; font-size:23px; background:#3d49bf; border:2px solid #fff; box-shadow:3px 3px 0 #273c62; }
.direct-video { font-size:12px; }
.quiz { border-top:2px dashed #c4a761; }
.quiz-play { max-width:800px; background:#fffef5; border:2px solid #24384e; border-radius:22px; margin:40px auto 0; padding:35px; box-shadow:7px 8px 0 #e6c46d; }
.quiz-meta { display:flex; align-items:center; justify-content:space-between; color:#766224; font:700 12px Arial,sans-serif; margin-bottom:18px; }
.quiz-meta>span:last-child { font-size:25px; width:42px; height:42px; border:2px solid #c5a74e; border-radius:50%; display:grid; place-items:center; background:#fff3b9; }
#quiz-question { font-size:23px; font-weight:800; line-height:1.6; min-height:75px; }
.quiz-options { display:grid; gap:13px; margin-top:22px; }
.quiz-options button { text-align:left; min-height:64px; padding:15px 20px; border:2px solid #a4b1c7; background:#fff; color:var(--ink); border-radius:12px; font-size:15px; line-height:1.7; cursor:pointer; }
.quiz-options button:hover { border-color:#3d49bb; background:#eef1ff; }
.quiz-options button:disabled { color:#47566a; cursor:default; }
.quiz-options button.is-correct { border-color:#28765d; background:#e0f5e6; color:#1e5a47; font-weight:700; }
.quiz-options button.is-wrong { border-color:#a64c39; background:#fff0e9; }
.quiz-feedback { min-height:100px; padding-top:22px; font-size:14px; }
.quiz-feedback.has-answer { font-weight:700; }
.quiz-play>.button { margin-top:10px; }
.quiz-static { display:grid; gap:15px; max-width:800px; margin:40px auto 0; }
.quiz-static details { border:1px solid #bca765; border-radius:12px; background:#fffef5; }
.quiz-static summary { padding:18px; cursor:pointer; font-weight:700; font-size:15px; }
.quiz-static p { margin:0 18px 18px; font-size:14px; }
.next { border-top:2px dashed #c4b88d; }
.next-card { border:2px solid #24384e; border-radius:20px; background:#fffef5; box-shadow:5px 6px 0 #e4cd90; }
.next-card h3 { font-family:inherit; font-weight:800; }
.next-card p { font-size:14px; }
.next-link { font-size:13px; font-weight:700; }
.closing { border-top:2px dashed #b9abc9; }
.closing-philosophy { font-family:inherit; font-weight:700; }
.closing-brand { font-weight:800; }
.earth-origin-button { border:2px solid #24384e; background:#fff; border-radius:10px; }
.footer-bottom button { font-size:12px; }
#comic-dialog { width:min(94vw,900px); max-height:94vh; padding:22px; color:var(--ink); border:2px solid #24384e; border-radius:20px; background:#fffef5; overflow:auto; }
#comic-dialog::backdrop { background:#182735b8; backdrop-filter:blur(4px); }
.dialog-toolbar { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:14px; }
.dialog-toolbar h2 { font-size:16px; font-weight:700; min-width:0; }
#comic-close,.dialog-navigation button { min-height:44px; background:#fff; border:1px solid #7f93a8; border-radius:8px; color:var(--ink); font-size:13px; padding:9px 14px; cursor:pointer; flex:none; }
#comic-full { max-height:65vh; width:100%; height:auto; object-fit:contain; background:#fff; }
#comic-dialog-caption { font-size:13px; text-align:center; margin-top:12px; }
.dialog-navigation { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:16px; }
#comic-count { font:700 12px Arial,sans-serif; }
.dialog-navigation button:disabled { background:#eee; color:#657280; cursor:default; }
.demo-banner { padding:13px 20px; background:#d7f797; border-bottom:2px solid #24384e; text-align:center; font-size:13px; font-weight:700; }
.demo-banner a { text-decoration:underline; text-underline-offset:3px; margin-left:12px; display:inline-flex; min-height:30px; align-items:center; }
.demo-info { margin-top:22px; font-size:12px; padding:18px; background:#fff8; border:1px dashed #7e90a8; border-radius:10px; }
@media (min-width:901px) and (max-width:1100px) {
  .role-top { flex-direction:column; align-items:flex-start; }
  .role-person { gap:12px; }
  .role-person .avatar,.keratin-emblem { width:72px; height:72px; }
  .role-person>span:last-child { font-size:17px; }
}
@media (max-width:900px) {
  .hero { column-gap:32px; padding-top:50px; }
  h1 { font-size:39px; }
  .hero-guide { width:92%; margin-top:55px; border-radius:100px 100px 20px 20px; }
  .guide-speech { left:-13px; padding:12px 15px; top:15px; }
  .guide-speech p { font-size:15px; }
  .hero-sticker { width:70px; height:70px; font-size:32px; right:-4px; top:85px; }
  .guide-partners { gap:4px; margin-top:18px; }
  .guide-partners .avatar { width:48px; height:48px; }
  .guide-partners a { font-size:10px; }
  .contact-flow li { padding:16px; font-size:13px; gap:10px; }
  .flow-number { font-size:20px; }
  .story-layout { display:block; }
  .story-visual { box-shadow:5px 6px 0 #9ad6ce; }
  .comic-grid { gap:22px; }
  .comic-caption { padding:20px 18px; }
  .speech-bubble { font-size:14px; padding:13px 15px; }
  .role-board { gap:16px; }
  .video-feature { padding:40px; }
}
@media (max-width:600px) {
  .hero { padding-top:35px; }
  .hero .eyebrow { margin-bottom:23px; }
  .hero-kicker { font-size:11px; }
  h1 { font-size:clamp(37px,10.6vw,49px); line-height:1.35; }
  .hero-lead { font-size:15px; margin-top:20px; }
  .hero-playful { font-size:14px; }
  .button { font-size:13px; }
  .hero-art { max-width:380px; margin:38px auto 0; padding-top:10px; }
  .hero-guide { width:84%; margin:35px 0 0 auto; border-radius:115px 115px 20px 20px; }
  .hero-guide img { aspect-ratio:4/4.7; }
  .molecule { width:103%; left:-1%; top:0; }
  .guide-speech { left:0; top:0; padding:13px 17px; }
  .guide-speech p { font-size:17px; }
  .hero-sticker { right:-3px; top:36px; width:75px; height:75px; font-size:34px; }
  .hero-sticker span { font-size:8px; }
  .guide-partners { gap:12px; margin-top:23px; }
  .guide-partners .avatar { width:57px; height:57px; }
  .guide-partners a { font-size:11px; }
  .hero-bottom { font-size:9px; margin-top:26px; gap:10px; }
  .hero-bottom a { gap:10px; }
  .section-heading h2,.technology h2 { font-size:28px; line-height:1.5; }
  .section-heading>p:last-child,.section-heading>p { font-size:14px; }
  .section-heading .eyebrow { font-size:10px; }
  .perspective-copy { font-size:14px; }
  .contact-flow { gap:0; margin-top:30px; }
  .contact-flow li { margin-top:13px; padding:17px 20px; font-size:14px; gap:19px; }
  .flow-number { font-size:23px; }
  .story-visual { padding:20px 18px; }
  .visual-title { display:flex; font-size:17px; min-height:45px; }
  .visual-heading .tiny-label { font-size:8px; }
  .process-art { width:92%; }
  .step-nav a { font-size:11px; }
  .process-cues .cue { font-size:11px; }
  .story-step,.story-step:last-child { padding-left:19px; gap:22px; }
  .story-step h3 { font-size:22px; }
  .story-step>p { font-size:14px; }
  .learning-point { padding:14px; }
  .learning-point p { font-size:13px; }
  .comic-grid { grid-template-columns:1fr; gap:25px; margin-top:30px; }
  .comic-caption { padding:20px; }
  .comic-open img { aspect-ratio:4/3; }
  .comic-open>span { font-size:12px; padding-inline:16px; }
  .speech-bubble { font-size:14px; }
  .comic-note { font-size:12px; }
  .role-grid { gap:23px; margin-top:30px; }
  .role-card { padding:24px; }
  .role-top { margin-bottom:15px; }
  .role-person { gap:19px; }
  .role-person .avatar,.keratin-emblem { width:92px; height:92px; }
  .role-person>span:last-child { font-size:21px; }
  .role-card h3 { font-size:22px; }
  .role-purpose { font-size:14px; }
  .role-card>p:not(.role-purpose) { font-size:14px; }
  .role-card .text-link { font-size:12px; }
  .role-choice { font-size:12px; min-height:52px; }
  .role-board { flex-direction:column; align-items:flex-start; margin-top:32px; padding:18px; }
  .role-selection { font-size:13px; min-height:65px; }
  #role-clear { align-self:flex-end; }
  .connection-map .diagram-note { font-size:11px; }
  .technology-statement { font-size:15px; }
  .technology-copy>p:not([class]) { font-size:14px; }
  .technology-art { padding:25px; }
  .video-feature,.video-card { padding:25px; }
  .video-feature .video-description { font-size:22px; }
  .video-description,.video-copy>p:not([class]) { font-size:14px; }
  .learning-nav a { font-size:12px; }
  .video-grid { margin-top:22px; }
  .video-grid .video-card+.video-card { margin-top:23px; }
  .quiz-play { padding:23px; margin-top:30px; }
  #quiz-question { font-size:20px; min-height:90px; }
  .quiz-options button { font-size:14px; padding:14px; }
  .quiz-feedback { font-size:13px; min-height:145px; }
  .quiz-meta { font-size:11px; }
  .quiz-static summary { font-size:14px; }
  .next-card p,.next-link { font-size:13px; }
  .next-card+.next-card { margin-top:23px; }
  .closing h2 { font-size:26px; }
  #comic-dialog { padding:14px; border-radius:14px; max-height:94vh; }
  .dialog-toolbar h2 { font-size:13px; }
  #comic-close,.dialog-navigation button { font-size:11px; padding:9px 10px; }
  #comic-full { max-height:61vh; }
  .demo-banner { text-align:left; font-size:12px; padding:11px 18px; }
  .demo-banner a { margin-left:0; margin-right:12px; }
}
@media (max-width:350px) {
  h1 { font-size:37px; }
  .hero-kicker { font-size:10px; }
  .lab-badge { font-size:11px; padding:8px 13px; }
  .section-heading h2,.technology h2 { font-size:25px; }
  .guide-partners { gap:8px; }
  .guide-partners .avatar { width:51px; height:51px; }
  .story-step h3 { font-size:20px; }
  .role-card { padding:21px; }
  .role-person .avatar,.keratin-emblem { width:84px; height:84px; }
  .video-feature,.video-card { padding:20px; }
  .closing h2 { font-size:23px; }
  .quiz-play { padding:19px; }
  #quiz-question { font-size:18px; }
  .comic-caption { padding:17px; }
}

/* Above the Treatment: additions scoped to the role-learning section. */
#roles .role-philosophy {
  position:relative; isolation:isolate; overflow:hidden;
  display:grid; grid-template-columns:minmax(0,1.8fr) minmax(220px,1fr); gap:32px 45px;
  margin:32px 0 30px; padding:40px; border:2px solid #6576a2; border-radius:23px;
  background:linear-gradient(115deg,#f7faff 0%,#fffef5 68%,#f4fadd 100%);
  box-shadow:6px 7px 0 #b9cce0;
}
#roles .role-philosophy::before {
  content:""; position:absolute; z-index:-1; pointer-events:none;
  width:440px; height:440px; right:-160px; top:-230px; border-radius:50%;
  background:radial-gradient(circle,#e3e9ff 0%,#d5e8fc7a 35%,transparent 70%);
}
#roles .role-philosophy::after {
  content:""; position:absolute; pointer-events:none; z-index:2; inset:-50% -20%;
  background:linear-gradient(110deg,transparent 37%,#ffffff55 49%,transparent 61%);
  opacity:0; transform:translateX(-70%);
}
.motion-ready #roles .role-philosophy.is-visible::after { animation:philosophy-light 1.4s ease-out .2s both; }
@keyframes philosophy-light {
  0% { opacity:0; transform:translateX(-70%); }
  30% { opacity:.55; }
  100% { opacity:0; transform:translateX(70%); }
}
#roles .philosophy-copy { min-width:0; }
#roles .philosophy-copy h3 { font-size:clamp(27px,2.65vw,38px); line-height:1.2; color:#35469c; font-weight:800; letter-spacing:-.035em; }
#roles .philosophy-reading { display:block; font-size:12px; font-weight:500; color:#516580; letter-spacing:.03em; line-height:1.6; margin-top:11px; }
#roles .philosophy-view { font-size:clamp(25px,2.3vw,33px); font-weight:800; letter-spacing:-.02em; line-height:1.55; margin-top:24px; }
#roles .philosophy-principle { font-size:clamp(17px,1.5vw,21px); line-height:1.8; font-weight:700; color:#35469c; margin-top:13px; }
#roles .philosophy-body { font-size:15px; line-height:2; color:#485e73; margin-top:22px; max-width:650px; }
#roles .philosophy-steps { display:grid; align-content:center; gap:13px; list-style:none; margin:0; padding:0; min-width:0; }
#roles .philosophy-steps li { display:flex; align-items:center; gap:15px; padding:17px 18px; border:1px solid #b8c5d7; border-radius:13px; background:#ffffffab; min-width:0; }
#roles .philosophy-number { flex:none; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; font:800 12px Arial,sans-serif; color:#3d49bb; background:#e8edf9; }
#roles .philosophy-steps li:nth-child(2) .philosophy-number { background:#e6f2db; color:#477343; }
#roles .philosophy-steps li:nth-child(3) .philosophy-number { background:#fff0da; color:#926625; }
#roles .philosophy-steps strong { display:block; font-size:18px; line-height:1.5; }
#roles .philosophy-steps li>div>span { display:block; font-size:12px; line-height:1.7; color:#516580; margin-top:3px; }
#roles .philosophy-author { grid-column:1/-1; display:flex; align-items:center; gap:13px; font-size:17px; font-weight:700; line-height:1.8; margin:0; border-top:1px solid #bfcddd; padding-top:22px; }
#roles .philosophy-author>.philosophy-author-icon { color:#386b6a; font-size:25px; flex:none; }
#roles .role-map-controls { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; margin:18px 0 3px; }
#roles .role-map-controls button {
  --topic-color:#5262c9; color:#263950; font-size:12px; font-weight:700; line-height:1.6;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  min-width:0; min-height:70px; padding:10px 6px; border:1px solid #aab8c9; border-radius:12px;
  background:#ffffffb3; cursor:pointer; transition:background-color .25s ease,border-color .25s ease,box-shadow .25s ease;
}
#roles .role-map-controls button:hover { border-color:var(--topic-color); background:#fff; }
#roles .role-map-controls button[aria-pressed="true"] { background:var(--topic-tint,#eaf0ff); border:2px solid var(--topic-color); padding:9px 5px; box-shadow:0 3px 0 var(--topic-color); }
#roles .map-topic-number { font:700 10px/1.4 Arial,sans-serif; color:var(--topic-color); letter-spacing:.03em; }
#roles [data-role-toggle="hydrogen"] { --topic-color:#5262c9; --topic-tint:#eaf0ff; }
#roles [data-role-toggle="carbon"] { --topic-color:#487c37; --topic-tint:#f1f8e6; }
#roles [data-role-toggle="bubble"] { --topic-color:#237da3; --topic-tint:#e6f7ff; }
#roles [data-role-toggle="catalase"] { --topic-color:#8755af; --topic-tint:#f2eafd; }
#roles [data-role-toggle="hematin"] { --topic-color:#ad4857; --topic-tint:#fcebee; }
#roles [data-role-toggle="keratin"] { --topic-color:#986b1b; --topic-tint:#fff5d8; }
#roles .connector[data-connection="hydrogen"].is-selected,#roles [data-role-node="hydrogen"].is-selected { stroke:#5262c9; }
#roles .connector[data-connection="carbon"].is-selected,#roles [data-role-node="carbon"].is-selected { stroke:#487c37; }
#roles .connector[data-connection="bubble"].is-selected,#roles [data-role-node="bubble"].is-selected { stroke:#237da3; }
#roles .connector[data-connection="catalase"].is-selected,#roles [data-role-node="catalase"].is-selected { stroke:#8755af; }
#roles .connector[data-connection="hematin"].is-selected,#roles [data-role-node="hematin"].is-selected { stroke:#ad4857; }
#roles .connector[data-connection="keratin"].is-selected,#roles [data-role-node="keratin"].is-selected { stroke:#986b1b; }
#roles .role-source-node { transition:fill .3s ease,stroke .3s ease,stroke-width .3s ease; }
#roles .role-source-node.is-selected { fill:#fff; stroke-width:4; }
#roles .designer-hub { transition:filter .4s ease; }
#roles .designer-halo { transition:stroke .4s ease; }
#roles .connection-map.has-selection .designer-hub { filter:drop-shadow(0 0 8px #8aa6db77); }
#roles .connection-map.has-selection .designer-halo { stroke:#3d49bb; }
#roles .connection-map figcaption { margin-top:9px; }
#roles .connection-map figcaption p { font-size:clamp(19px,2.2vw,27px); line-height:1.7; }
#roles .designer-purpose { display:block; font-size:14px; color:#4a5c70; line-height:1.9; margin-top:10px; }
#roles .connection-map .diagram-note { font-size:12px; line-height:1.9; max-width:640px; margin-top:16px; }
@media (max-width:900px) {
  #roles .role-philosophy { grid-template-columns:1fr; padding:30px; gap:24px; }
  #roles .philosophy-steps { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
  #roles .philosophy-steps li { flex-direction:column; align-items:flex-start; padding:16px; gap:10px; }
  #roles .philosophy-steps strong { font-size:17px; }
  #roles .philosophy-steps li>div>span { font-size:11px; }
  #roles .role-map-controls { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
}
@media (max-width:600px) {
  #roles .role-philosophy { margin:27px 0 29px; padding:24px 22px; border-radius:18px; gap:23px; box-shadow:4px 5px 0 #b9cce0; }
  #roles .philosophy-copy h3 { font-size:29px; line-height:1.25; max-width:290px; }
  #roles .philosophy-reading { font-size:11px; letter-spacing:0; }
  #roles .philosophy-view { font-size:25px; margin-top:22px; }
  #roles .philosophy-principle { font-size:18px; line-height:1.85; margin-top:14px; }
  #roles .philosophy-body { font-size:14px; line-height:2; margin-top:19px; }
  #roles .philosophy-steps { grid-template-columns:1fr; gap:10px; }
  #roles .philosophy-steps li { flex-direction:row; align-items:center; padding:13px 16px; gap:15px; }
  #roles .philosophy-steps strong { font-size:17px; }
  #roles .philosophy-steps li>div>span { font-size:12px; }
  #roles .philosophy-author { font-size:15px; padding-top:19px; gap:9px; align-items:flex-start; }
  #roles .philosophy-author>.philosophy-author-icon { font-size:21px; }
  #roles .role-map-controls { gap:10px; }
  #roles .role-map-controls button { font-size:12px; min-height:74px; padding-inline:7px; }
  #roles .role-map-controls button[aria-pressed="true"] { padding-inline:6px; }
  #roles .designer-purpose { font-size:13px; }
  #roles .connection-map .diagram-note { font-size:11px; }
}
@media (max-width:350px) {
  #roles .role-philosophy { padding:22px 18px; }
  #roles .philosophy-copy h3 { font-size:27px; }
  #roles .philosophy-view { font-size:23px; }
  #roles .philosophy-principle { font-size:17px; }
}

#roles .philosophy-view>span,#roles .philosophy-principle>span,#roles .philosophy-terms,#roles .designer-word { display:inline-block; }
#roles .philosophy-author-text { min-width:0; }

/* Five-role grid layout: three on top, two centered below. */
@media (min-width:901px) {
  .role-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .role-grid > .role-card { grid-column:span 2; }
  .role-grid > .role-card:nth-child(4) { grid-column:2 / span 2; }
  .role-grid > .role-card:nth-child(5) { grid-column:4 / span 2; }
}
@media (min-width:601px) and (max-width:900px) {
  .role-grid > .role-card:nth-child(5) { grid-column:1 / -1; width:calc(50% - 12px); justify-self:center; }
}


/* Four distinct concept scenes, with native anchor fallback and one active card on phones. */
.story-visual { padding:20px; top:calc(var(--header-height) + 14px); scroll-margin-top:calc(var(--header-height) + 12px); }
.story-visual .step-nav { grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin:12px 0 6px; }
.story-visual .step-nav a { flex-direction:column; justify-content:center; gap:3px; min-height:50px; padding:7px 4px; border:1px solid #b6c6de; border-radius:9px; background:#fff; color:#354360; font-size:11px; line-height:1.5; text-align:center; }
.story-visual .step-nav a span { color:inherit; font-size:15px; }
.story-visual .step-nav a[aria-current] { color:#fff; background:#4351b9; border-color:#4351b9; }
.story-visual .step-nav a:focus-visible,.story-actions button:focus-visible,.process-node:focus-visible { outline:3px solid #5269d1; outline-offset:3px; }
.story-visual .process-art { display:block; width:100%; max-width:480px; height:clamp(160px,29svh,245px); margin:8px auto 4px; overflow:visible; }
.process-scene { opacity:0; transform:translateY(9px); transition:opacity .3s ease,transform .35s ease; pointer-events:none; }
[data-step="0"] .scene-observe,[data-step="1"] .scene-roles,[data-step="2"] .scene-water,[data-step="3"] .scene-video { opacity:1; transform:translateY(0); }
.process-scene text { fill:#324366; font:700 17px "Yu Gothic","Meiryo",sans-serif; }
.process-scene text.story-small { font-size:12px; font-weight:500; }
.process-node { cursor:pointer; }
.process-node circle { fill:#fff; stroke:#a1b5d0; }
.process-node:hover circle { stroke:#4351b9; stroke-width:3px; }
.story-visual .visual-title { min-height:30px; margin:6px 0; font-size:17px; line-height:1.6; }
.story-actions { display:flex; justify-content:space-between; gap:12px; margin-top:10px; }
.story-actions button { display:flex; align-items:center; justify-content:center; min-height:44px; padding:8px 15px; border:1px solid #829ac3; border-radius:10px; background:#fff; color:#3447a5; font:700 13px/1.5 "Yu Gothic","Meiryo",sans-serif; }
.story-actions button[hidden] { display:none; }
.story-actions button:disabled { color:#7d889c; border-color:#d0d7e3; background:#f3f5f8; cursor:default; }
.story-control-hint { margin:10px 0 0; color:#465570; text-align:center; font-size:11px; line-height:1.6; }
.story-hint-mobile { display:none; }
.story-visual .diagram-note { margin:3px 0 0; font-size:10px; }
[data-step="0"] .story-scan { transform-box:fill-box; transform-origin:center; animation:story-scan .9s ease-out both; }
[data-step="1"] .story-path { stroke-dasharray:260; animation:story-draw .8s ease-out both; }
[data-step="1"] .story-role-tile,[data-step="3"] .story-video-tile { animation:story-arrive .55s ease-out both; }
[data-step="1"] .tile-b,[data-step="3"] .tile-b { animation-delay:.08s; }
[data-step="1"] .tile-c,[data-step="3"] .tile-c { animation-delay:.16s; }
[data-step="2"] .story-drop { animation:story-drip .7s ease-out both; }
[data-step="2"] .drop-b { animation-delay:.13s; }
[data-step="2"] .story-water-line { stroke-dasharray:240; animation:story-draw .9s ease-out both; }
[data-step="2"] .story-clock-hand { transform-origin:362px 84px; animation:story-clock .7s ease-out both; }
@keyframes story-scan { from { transform:translate(-25px,-14px); } to { transform:translate(0,0); } }
@keyframes story-draw { from { stroke-dashoffset:260; } to { stroke-dashoffset:0; } }
@keyframes story-arrive { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@keyframes story-drip { from { opacity:0; transform:translateY(-18px); } to { opacity:1; transform:translateY(0); } }
@keyframes story-clock { from { transform:rotate(-55deg); } to { transform:rotate(0); } }
@media(min-width:901px) {
 .story-visual { position:sticky; }
 .story-step:last-child { min-height:max(76vh,calc(100svh - var(--header-height) + 32px)); }
}
@media(max-width:900px) {
 .story-visual { position:static; margin-bottom:20px; max-width:620px; padding:18px; }
 .story-visual .process-art { width:100%; max-width:480px; height:180px; }
 .story-heading-desktop,.story-hint-desktop { display:none; }
 .story-hint-mobile { display:inline; }
 .story-ready[data-story-mode="cards"] .story-step:not(.is-active) { display:none; }
 .story-ready[data-story-mode="cards"] .story-steps { margin:0 auto; }
 .story-ready[data-story-mode="cards"] .story-step,.story-ready[data-story-mode="cards"] .story-step:last-child { min-height:0; margin-top:0; padding-top:22px; }
}
@media(max-width:560px) {
 .story-visual { padding:14px; }
 .story-visual .step-nav a { min-height:50px; font-size:10px; }
 .story-visual .step-nav a span { font-size:14px; }
 .story-visual .process-art { height:195px; }
 .story-visual .visual-title { font-size:15px; min-height:25px; }
 .story-actions { margin-top:8px; gap:8px; }
 .story-actions button { flex:1; font-size:12px; padding:8px; }
 .story-control-hint { font-size:10px; }
}
@media(min-width:901px) and (max-height:750px) {
 .story-visual { padding:14px; }
 .story-visual .process-art { height:120px; }
 .story-visual .step-nav a { min-height:44px; padding-block:5px; }
 .story-visual .visual-title { min-height:25px; font-size:15px; }
 .story-control-hint { font-size:10px; margin-top:6px; }
 .story-actions { margin-top:6px; }
}
@media(max-width:560px) and (max-height:720px) {
 .story-visual { padding:12px; }
 .story-visual .process-art { height:125px; }
 .story-control-hint { margin-top:5px; }
}
@media(prefers-reduced-motion:reduce) {
 .process-scene { transition:none; }
 .story-scan,.story-path,.story-role-tile,.story-video-tile,.story-drop,.story-water-line,.story-clock-hand { animation:none!important; }
}

/* User-supplied Above the Treatment visual; scoped to the existing 03 section. */
#roles .role-concept-visual {
  width:100%; max-width:1040px; margin:44px auto 40px;
}
#roles .role-concept-image-link {
  display:block; min-width:0; border:1px solid #bccddb; border-radius:16px;
  overflow:hidden; background:#fff; box-shadow:0 6px 20px #24384e0c;
  cursor:zoom-in;
}
#roles .role-concept-image-link img {
  display:block; width:100%; height:auto; aspect-ratio:16 / 9; object-fit:contain;
}
#roles .role-concept-image-link:focus-visible {
  outline:3px solid #5269d1; outline-offset:5px;
}
#roles .role-concept-visual figcaption {
  margin-top:12px; color:#516580; font-size:12px; line-height:1.7; text-align:center;
}
@media (max-width:600px) {
  #roles .role-concept-visual { margin:32px auto 34px; }
  #roles .role-concept-image-link { border-radius:12px; }
  #roles .role-concept-visual figcaption { font-size:11px; }
}

/* REN research thumbnail and external-video links; confined to the added card. */
#video-research {
  display:grid; grid-template-columns:minmax(0,360px) minmax(0,1fr);
  align-items:center; gap:48px; margin-top:32px; padding:40px;
  border:1px solid #b7c6df; border-radius:22px; background:#f9fbff;
  box-shadow:0 5px 18px #24384e0d;
}
#video-research .research-media, #video-research .research-copy { min-width:0; }
#video-research .research-thumbnail {
  position:relative; display:block; width:100%; border-radius:14px;
  overflow:hidden; border:1px solid #d2dcea; background:#fff;
}
#video-research .research-thumbnail img {
  display:block; width:100%; height:auto; aspect-ratio:941 / 1672; object-fit:contain;
}
#video-research .research-play {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:flex; align-items:center; justify-content:center;
  width:64px; height:64px; padding-left:3px; border-radius:50%;
  background:#29377cc9; color:#fff; border:1px solid #ffffffc4;
  font:24px/1 Arial,sans-serif; pointer-events:none;
  transition:background-color .2s ease;
}
#video-research a.research-thumbnail:hover .research-play { background:#3547a9; }
#video-research a.research-thumbnail:focus-visible { outline:3px solid #5269d1; outline-offset:5px; }
#video-research .research-kicker { margin-top:20px; font-size:14px; font-weight:700; color:#3d49bb; }
#video-research h3 { margin-top:12px; font-size:clamp(25px,2.6vw,34px); line-height:1.6; }
#video-research .research-description { margin-top:20px; font-size:15px; line-height:1.9; }
#video-research .research-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; align-items:stretch; }
#video-research .research-actions .button {
  min-width:0; min-height:52px; padding:13px 18px; gap:14px;
  font-size:13px; line-height:1.6; border-radius:10px;
}
#video-research .research-kao-button { color:#405783; background:#fff; border:1px solid #aebed5; box-shadow:none; }
#video-research .research-kao-button:hover { background:#edf2fc; border-color:#687fb3; }
#video-research .research-note { margin-top:18px; color:#54667f; font-size:12px; line-height:1.8; }
@media (max-width:1000px) {
  #video-research { grid-template-columns:minmax(0,290px) minmax(0,1fr); gap:32px; padding:32px; }
}
@media (max-width:800px) {
  #video-research { display:block; padding:28px; }
  #video-research .research-media { max-width:400px; margin-inline:auto; }
  #video-research .research-copy { margin-top:28px; }
}
@media (max-width:600px) {
  #video-research { padding:20px; margin-top:26px; border-radius:18px; }
  #video-research .research-media { max-width:none; width:100%; }
  #video-research .research-thumbnail { border-radius:10px; }
  #video-research .research-play { width:56px; height:56px; font-size:21px; }
  #video-research .research-copy { margin-top:24px; }
  #video-research h3 { font-size:clamp(22px,6.4vw,25px); }
  #video-research .research-description { font-size:14px; margin-top:16px; }
  #video-research .research-actions { flex-direction:column; margin-top:22px; }
  #video-research .research-actions .button { width:100%; min-height:52px; padding:13px 14px; }
  #video-research .research-note { font-size:11px; }
}