:root {
  --navy-950: #061426;
  --navy-900: #081c34;
  --navy-800: #0d2947;
  --navy-700: #123b60;
  --ink: #10233b;
  --muted: #63748a;
  --line: #dce5eb;
  --paper: #f7f9f6;
  --white: #fffdf9;
  --yellow: #f6cf4b;
  --yellow-soft: #fff2b8;
  --mint: #9ee4cf;
  --mint-deep: #2caa8e;
  --coral: #fc8a6a;
  --lavender: #beb9ff;
  --shadow: 0 22px 60px rgba(7, 27, 51, .13);
  --radius: 22px;
  --mono: 'DM Mono', monospace;
  --sans: 'Noto Sans TC', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); line-height: 1.7; overflow-x: hidden; }
button, a { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
.site-noise { position: fixed; inset: 0; pointer-events: none; opacity: .055; z-index: 10; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); }
.topbar { height: 78px; padding: 0 clamp(20px, 5vw, 76px); display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 4; background: var(--navy-950); color: #f6f9f6; }
.brand { display: inline-flex; align-items: center; gap: 12px; letter-spacing: .08em; line-height: 1; }
.brand > span:last-child { display: grid; gap: 4px; font-family: var(--mono); font-size: 12px; }
.brand strong { font-weight: 500; color: var(--yellow); }
.brand em { font-style: normal; font-size: 10px; color: #91abc2; letter-spacing: .22em; }
.brand-mark { width: 29px; height: 29px; display: inline-grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 3px; transform: rotate(45deg); }
.brand-mark span { background: var(--mint); border-radius: 2px; }
.brand-mark span:nth-child(2) { background: var(--yellow); }
.brand-mark span:nth-child(3) { background: var(--coral); }
.main-nav { display: flex; align-items: center; gap: clamp(18px, 3vw, 42px); margin-left: auto; margin-right: clamp(18px, 4vw, 55px); }
.nav-link { color: #9eb0c0; font-size: 13px; transition: color .25s ease; position: relative; }
.nav-link:hover, .nav-link.active { color: white; }
.nav-link.active::after { content: ''; position: absolute; height: 2px; width: 18px; background: var(--yellow); bottom: -9px; left: 0; }
.nav-cta, .button { border: 0; border-radius: 999px; font-weight: 700; transition: transform .22s ease, box-shadow .22s ease, background .22s ease; }
.nav-cta { padding: 10px 17px; background: var(--yellow); color: var(--navy-950); font-size: 12px; }
.nav-cta:hover, .button:hover { transform: translateY(-2px); }
.nav-cta span, .button span { font-family: var(--mono); margin-left: 10px; }
.hero { min-height: 650px; padding: clamp(70px, 10vw, 125px) clamp(20px, 8vw, 132px) 80px; display: grid; grid-template-columns: 1fr .86fr; gap: clamp(30px, 5vw, 80px); align-items: center; background: var(--navy-950); color: white; position: relative; overflow: hidden; }
.hero::before { content: ''; width: 560px; height: 560px; position: absolute; left: -280px; bottom: -330px; border: 1px solid rgba(158,228,207,.22); border-radius: 50%; box-shadow: 0 0 0 60px rgba(158,228,207,.03), 0 0 0 120px rgba(158,228,207,.02); }
.hero::after { content: '01'; position: absolute; right: 5%; top: 16%; font: 200px/1 var(--mono); color: rgba(255,255,255,.025); }
.hero-copy { position: relative; z-index: 1; max-width: 670px; }
.eyebrow { color: var(--yellow); font: 500 11px/1.2 var(--mono); letter-spacing: .16em; margin: 0 0 22px; text-transform: uppercase; }
.eyebrow-dot { display: inline-block; width: 7px; height: 7px; background: var(--mint); border-radius: 50%; margin-right: 9px; box-shadow: 0 0 0 5px rgba(158,228,207,.12); }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(50px, 7vw, 98px); line-height: 1.06; letter-spacing: -.08em; margin-bottom: 28px; font-weight: 800; }
h1 .hero-title-kicker { display: inline-block; color: var(--mint); font-size: clamp(19px, 2.3vw, 30px); line-height: 1.2; letter-spacing: -.04em; font-weight: 700; margin-bottom: 9px; }
h1 span, h2 span { color: var(--yellow); }
.hero-lead { color: #a8bbcb; font-size: 16px; margin-bottom: 34px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.button { padding: 14px 21px; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.button-primary { background: var(--yellow); color: var(--navy-950); box-shadow: 0 10px 25px rgba(246,207,75,.18); }
.button-primary:hover { box-shadow: 0 14px 32px rgba(246,207,75,.3); }
.button-ghost { color: white; border: 1px solid rgba(255,255,255,.23); background: rgba(255,255,255,.03); }
.button-ghost:hover { background: rgba(255,255,255,.1); }
.hero-metrics { display: flex; gap: clamp(20px, 4vw, 50px); margin-top: 66px; }
.hero-metrics div { display: grid; gap: 2px; }
.hero-metrics strong { font: 500 27px/1 var(--mono); color: var(--mint); }
.hero-metrics span { font-size: 11px; color: #7890a5; }
.hero-art-wrap { position: relative; min-height: 430px; display: grid; place-items: center; }
.hero-art-card { width: min(100%, 510px); aspect-ratio: 1 / .92; background: #123354; border: 1px solid rgba(158,228,207,.33); padding: 14px; border-radius: 28px; box-shadow: 0 22px 90px rgba(0,0,0,.28); transform: rotate(3deg); position: relative; z-index: 1; animation: float-card 5s ease-in-out infinite; }
.hero-art-card img { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; display: block; }
.hero-art-caption { position: absolute; left: 27px; bottom: 25px; display: grid; grid-template-columns: 11px 1fr; column-gap: 7px; background: rgba(6,20,38,.84); padding: 9px 13px; border-radius: 10px; backdrop-filter: blur(8px); font: 9px/1.2 var(--mono); color: #90a8bb; letter-spacing: .08em; }
.hero-art-caption .status-dot { width: 7px; height: 7px; margin-top: 1px; background: var(--mint); border-radius: 50%; box-shadow: 0 0 0 4px rgba(158,228,207,.16); }
.hero-art-caption strong { grid-column: 2; color: white; font-size: 10px; margin-top: 4px; }
.hero-orbit { border-radius: 50%; position: absolute; border: 1px dashed rgba(158,228,207,.32); }
.orbit-one { width: 410px; height: 410px; transform: rotate(35deg) scaleY(.44); }
.orbit-two { width: 500px; height: 500px; transform: rotate(-32deg) scaleY(.32); border-color: rgba(246,207,75,.25); }
.float-chip { position: absolute; z-index: 2; color: var(--navy-950); padding: 9px 13px; border-radius: 8px; font-size: 11px; font-weight: 800; box-shadow: 0 12px 25px rgba(0,0,0,.2); }
.float-chip span { font: 15px var(--mono); margin-right: 5px; }
.chip-top { top: 57px; right: 3%; background: var(--yellow); transform: rotate(5deg); }
.chip-bottom { bottom: 55px; left: -4%; background: var(--mint); transform: rotate(-5deg); }
@keyframes float-card { 0%,100% { transform: rotate(3deg) translateY(0); } 50% { transform: rotate(3deg) translateY(-8px); } }
.mission-strip { background: var(--yellow); min-height: 62px; padding: 0 clamp(20px, 8vw, 132px); display: grid; grid-template-columns: 1fr minmax(190px, 2fr) 1fr; gap: 25px; align-items: center; color: var(--navy-950); }
.strip-label, .strip-note { display: flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 800; }
.strip-label strong { font-family: var(--mono); font-weight: 500; }
.mini-signal { width: 10px; height: 10px; border-radius: 2px; background: var(--navy-950); transform: rotate(45deg); }
.strip-progress { height: 5px; background: rgba(6,20,38,.2); border-radius: 99px; overflow: hidden; }
.strip-progress span { display: block; height: 100%; width: 0; background: var(--navy-950); border-radius: inherit; transition: width .5s ease; }
.strip-note { justify-content: flex-end; font-family: var(--mono); font-weight: 500; }
.strip-note .divider { opacity: .4; }
.section { padding: clamp(80px, 10vw, 136px) clamp(20px, 8vw, 132px); }
.missions-section { background: var(--paper); }
.section-heading, .quiz-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 47px; }
.section-heading h2, .quiz-heading h2 { font-size: clamp(31px, 4vw, 58px); line-height: 1.12; letter-spacing: -.07em; margin-bottom: 0; }
.section-heading h2 span, .quiz-heading h2 span { color: var(--navy-700); }
.section-intro { max-width: 280px; color: var(--muted); font-size: 13px; margin-bottom: 3px; }
.mission-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.mission-card { background: white; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: 0 8px 26px rgba(17,43,67,.04); transition: transform .25s ease, box-shadow .25s ease; }
.mission-card:hover { transform: translateY(-7px); box-shadow: var(--shadow); }
.card-topline { padding: 18px 18px 13px; display: flex; align-items: center; justify-content: space-between; }
.mission-num { font: 500 11px var(--mono); color: var(--muted); }
.card-tag { font: 10px var(--mono); padding: 5px 8px; border-radius: 99px; background: var(--yellow-soft); color: #886e07; }
.mission-software .card-tag { background: #dcf7ef; color: #217664; }
.mission-copyright .card-tag { background: #e9e7ff; color: #6258c4; }
.mission-bullying .card-tag { background: #ffe7df; color: #a4503a; }
.mission-visual { height: 182px; padding: 0 12px; position: relative; overflow: hidden; }
.mission-visual img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 14px; }
.visual-label { position: absolute; left: 21px; bottom: 12px; font: 9px var(--mono); letter-spacing: .1em; color: white; text-shadow: 0 1px 7px #061426; }
.mission-info { padding: 19px 19px 22px; }
.mission-info h3 { font-size: 22px; letter-spacing: -.06em; margin-bottom: 7px; }
.mission-info p { min-height: 50px; color: var(--muted); font-size: 12px; line-height: 1.7; margin-bottom: 13px; }
.text-button { padding: 0; border: 0; background: none; color: var(--navy-700); font-size: 12px; font-weight: 800; }
.text-button span { font-family: var(--mono); margin-left: 8px; transition: margin .2s ease; }
.text-button:hover span { margin-left: 14px; }
.card-icon-art { height: 100%; border-radius: 14px; background: linear-gradient(135deg, #dedcff, #a9a5fb); position: relative; display: grid; place-items: center; overflow: hidden; }
.card-icon-art::before { content: ''; position: absolute; width: 160px; height: 160px; border: 1px dashed rgba(255,255,255,.75); border-radius: 50%; }
.copyright-art span { font: 900 86px/1 var(--sans); color: white; text-shadow: 0 7px 0 rgba(94,83,193,.2); z-index: 1; }
.copyright-art i { position: absolute; right: 29px; top: 28px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--yellow); color: var(--navy-950); font-style: normal; font-weight: 900; }
.learning-section { background: #eaf2f1; position: relative; }
.learning-section::before { content: 'LEARN'; position: absolute; right: 2%; top: 11%; font: 180px/1 var(--mono); color: rgba(13,41,71,.035); }
.compact-heading { position: relative; z-index: 1; }
.learning-layout { display: grid; grid-template-columns: minmax(220px, .45fr) 1.55fr; gap: clamp(22px, 5vw, 80px); position: relative; z-index: 1; }
.lesson-nav { display: flex; flex-direction: column; gap: 7px; }
.lesson-tab { display: grid; grid-template-columns: 34px 1fr 20px; align-items: center; gap: 7px; padding: 15px 15px; text-align: left; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--muted); transition: .2s ease; }
.lesson-tab span { font: 10px var(--mono); }
.lesson-tab b { font-size: 14px; }
.lesson-tab i { font-style: normal; font: 16px var(--mono); opacity: 0; transform: translateX(-6px); transition: .2s ease; }
.lesson-tab:hover, .lesson-tab.active { background: var(--navy-950); color: white; border-color: var(--navy-950); box-shadow: 0 12px 25px rgba(7,27,51,.16); }
.lesson-tab.active i, .lesson-tab:hover i { opacity: 1; transform: translateX(0); color: var(--yellow); }
.lesson-tip { margin-top: auto; background: var(--yellow); padding: 15px; border-radius: 14px; display: flex; gap: 11px; font-size: 11px; line-height: 1.6; }
.tip-icon { font-size: 19px; }
.lesson-tip p { margin: 0; }
.lesson-tip strong { font-size: 12px; }
.lesson-content { background: var(--white); border: 1px solid #d7e3e1; border-radius: 24px; padding: 18px; display: grid; grid-template-columns: 1.03fr 1fr; gap: 28px; box-shadow: 0 22px 50px rgba(33,80,76,.08); min-height: 390px; }
.lesson-image { border-radius: 16px; overflow: hidden; min-height: 315px; position: relative; }
.lesson-image img { width: 100%; height: 100%; display: block; object-fit: cover; }
.lesson-image .image-stamp { position: absolute; left: 15px; top: 15px; background: rgba(6,20,38,.82); color: white; border-radius: 8px; padding: 7px 9px; font: 9px var(--mono); letter-spacing: .09em; }
.lesson-copy { padding: 17px 16px 12px 2px; display: flex; flex-direction: column; }
.lesson-copy .eyebrow { color: var(--mint-deep); margin-bottom: 13px; }
.lesson-copy h3 { font-size: 32px; line-height: 1.2; letter-spacing: -.07em; margin-bottom: 8px; }
.lesson-copy > p { color: var(--muted); font-size: 13px; margin-bottom: 19px; }
.fact-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.fact-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; line-height: 1.55; }
.fact-list li::before { content: '✓'; flex: 0 0 auto; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 5px; background: var(--mint); color: var(--navy-950); font-weight: 900; }
.lesson-action { margin-top: auto; padding-top: 21px; }
.quiz-section { background: var(--navy-950); color: white; }
.quiz-heading { margin-bottom: 38px; }
.quiz-heading h2 span { color: var(--yellow); }
.quiz-head-status { color: #8ca3b7; display: flex; align-items: center; gap: 9px; font: 11px var(--mono); white-space: nowrap; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 5px rgba(252,138,106,.13); }
.quiz-shell { background: #0c2643; border: 1px solid #1b4568; border-radius: 24px; min-height: 340px; overflow: hidden; }
.quiz-welcome { min-height: 340px; padding: clamp(28px, 6vw, 65px); display: grid; grid-template-columns: 90px 1fr auto; align-items: center; gap: 30px; }
.welcome-mark { width: 78px; height: 78px; display: grid; place-items: center; border: 1px dashed var(--yellow); border-radius: 50%; color: var(--yellow); font: 40px var(--mono); transform: rotate(-10deg); }
.quiz-welcome h3 { font-size: 25px; letter-spacing: -.05em; margin-bottom: 7px; }
.quiz-welcome p:not(.eyebrow) { color: #8ea8bd; font-size: 13px; max-width: 560px; margin: 0; }
.quiz-active { padding: clamp(27px, 5vw, 58px) clamp(22px, 7vw, 84px) 48px; }
.hidden { display: none !important; }
.quiz-meta { display: flex; justify-content: space-between; gap: 12px; color: var(--mint); font: 11px var(--mono); letter-spacing: .05em; margin-bottom: 13px; }
.quiz-meta #quizTimer { color: var(--yellow); }
.quiz-progress { height: 4px; background: rgba(158,228,207,.17); border-radius: 99px; margin-bottom: 35px; overflow: hidden; }
.quiz-progress span { display: block; width: 0; height: 100%; background: var(--mint); transition: width .35s ease; }
.quiz-card { max-width: 840px; }
.quiz-type { color: var(--yellow); font: 10px var(--mono); letter-spacing: .15em; margin-bottom: 13px; }
.quiz-card h3 { font-size: clamp(21px, 3vw, 34px); line-height: 1.35; letter-spacing: -.06em; margin-bottom: 24px; }
.quiz-media { width: 170px; height: 108px; border-radius: 12px; overflow: hidden; margin-bottom: 18px; border: 1px solid #2c5373; }
.quiz-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.answer-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.answer-option { width: 100%; display: flex; align-items: center; gap: 13px; text-align: left; color: #d4e1e8; border: 1px solid #2b4e6b; background: #102f50; padding: 14px 15px; border-radius: 11px; transition: .2s ease; }
.answer-option:hover { border-color: var(--mint); transform: translateY(-2px); }
.answer-option.selected { border-color: var(--yellow); background: #3a3b32; color: white; }
.answer-option.correct { border-color: var(--mint); background: rgba(71,190,153,.16); color: #dcfff2; }
.answer-option.wrong { border-color: var(--coral); background: rgba(252,138,106,.15); color: #ffe1d8; }
.option-letter { width: 24px; height: 24px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid #54718a; border-radius: 7px; font: 11px var(--mono); color: var(--mint); }
.answer-option.selected .option-letter { background: var(--yellow); color: var(--navy-950); border-color: var(--yellow); }
.match-grid { display: grid; gap: 10px; max-width: 650px; }
.match-row { display: grid; grid-template-columns: 1fr minmax(170px, .9fr); gap: 12px; align-items: center; color: #d4e1e8; font-size: 13px; }
.match-row label { padding: 12px; background: #102f50; border: 1px solid #2b4e6b; border-radius: 9px; }
.match-row select { color: white; background: #183b5d; border: 1px solid #47708e; padding: 11px; border-radius: 9px; outline: none; }
.match-row select:disabled { opacity: .65; cursor: not-allowed; }
.submit-wrap { margin-top: 27px; display: flex; gap: 12px; align-items: center; }
.feedback { border-radius: 9px; padding: 10px 14px; font-size: 12px; }
.feedback.correct { color: #bdf3df; background: rgba(71,190,153,.13); border: 1px solid rgba(71,190,153,.4); }
.feedback.wrong { color: #ffd0c3; background: rgba(252,138,106,.12); border: 1px solid rgba(252,138,106,.42); }
.quiz-result { padding: clamp(35px, 6vw, 70px); text-align: center; }
.result-kicker { color: var(--mint); font: 11px var(--mono); letter-spacing: .13em; }
.quiz-result h3 { font-size: clamp(30px, 5vw, 55px); letter-spacing: -.08em; margin: 10px 0 7px; }
.quiz-result h3 span { color: var(--yellow); }
.result-score { font: 500 70px/1 var(--mono); color: var(--yellow); margin: 22px 0 10px; }
.result-summary { color: #9bb0c2; font-size: 13px; margin-bottom: 27px; }
.result-stats { display: flex; justify-content: center; gap: 9px; flex-wrap: wrap; margin: 0 auto 27px; }
.result-stats div { min-width: 120px; padding: 12px 16px; background: #102f50; border: 1px solid #2b4e6b; border-radius: 10px; }
.result-stats strong, .result-stats span { display: block; }
.result-stats strong { color: var(--mint); font: 500 21px var(--mono); }
.result-stats span { color: #9bb0c2; font-size: 10px; margin-top: 3px; }
.result-topics { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 29px; }
.result-topic { padding: 8px 12px; border-radius: 99px; font-size: 11px; background: #123454; color: #c6dbe7; }
.result-review { max-width: 760px; margin: 0 auto 28px; text-align: left; }
.review-label { color: var(--yellow); font: 10px var(--mono); letter-spacing: .14em; margin-bottom: 11px; }
.review-list { display: grid; gap: 8px; }
.review-list article { padding: 13px 15px; border: 1px solid #2b4e6b; border-radius: 10px; background: #102f50; }
.review-topic { color: var(--mint); font: 10px var(--mono); }
.review-list h4 { margin: 4px 0; font-size: 13px; color: white; }
.review-list p, .review-list strong { display: block; margin: 0; font-size: 11px; color: #9bb0c2; font-weight: 400; }
.review-list strong { color: var(--yellow); margin-top: 3px; }
.perfect-note { max-width: 650px; margin: 0 auto 28px; padding: 12px; color: #bdf3df; background: rgba(71,190,153,.12); border: 1px solid rgba(71,190,153,.35); border-radius: 9px; font-size: 12px; }
.final-cta { padding-top: 96px; padding-bottom: 96px; background: var(--mint); color: var(--navy-950); position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: end; gap: 30px; }
.final-cta::before { content: ''; position: absolute; width: 500px; height: 500px; border: 1px solid rgba(6,20,38,.18); border-radius: 50%; right: 11%; top: -260px; box-shadow: 0 0 0 44px rgba(6,20,38,.035), 0 0 0 90px rgba(6,20,38,.025); }
.final-copy, .final-actions { position: relative; z-index: 1; }
.final-copy h2 { font-size: clamp(38px, 5vw, 69px); line-height: 1.05; letter-spacing: -.08em; margin-bottom: 20px; }
.final-copy h2 span { color: var(--navy-700); }
.final-copy p:last-child { max-width: 390px; font-size: 13px; }
.final-cta .eyebrow { color: var(--navy-700); }
.final-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.final-cta .button-primary { background: var(--navy-950); color: white; }
.final-cta .button-ghost.light { color: var(--navy-950); border-color: rgba(6,20,38,.3); }
.footer { min-height: 68px; padding: 0 clamp(20px, 8vw, 132px); display: flex; justify-content: space-between; align-items: center; background: var(--navy-950); color: #708ba1; font: 9px var(--mono); letter-spacing: .08em; }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: var(--navy-950); color: white; padding: 11px 16px; border-radius: 9px; font-size: 12px; z-index: 20; transition: .25s ease; box-shadow: var(--shadow); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; padding-top: 80px; }
  .hero-art-wrap { min-height: 370px; max-width: 650px; width: 100%; justify-self: center; }
  .mission-grid { grid-template-columns: repeat(2, 1fr); }
  .learning-layout { grid-template-columns: 1fr; }
  .lesson-nav { display: grid; grid-template-columns: repeat(4, 1fr); }
  .lesson-tab { grid-template-columns: 1fr; text-align: center; gap: 3px; }
  .lesson-tab i { display: none; }
  .lesson-tip { grid-column: 1 / -1; margin-top: 10px; }
}
@media (max-width: 680px) {
  .topbar { height: 68px; }
  .main-nav { display: none; }
  .nav-cta { padding: 8px 12px; }
  .hero { min-height: auto; padding-top: 68px; padding-bottom: 60px; }
  h1 { font-size: 52px; }
  .hero-art-wrap { min-height: 300px; }
  .hero-art-card { border-radius: 20px; }
  .chip-top { top: 16px; right: 0; }
  .chip-bottom { bottom: 10px; left: 0; }
  .hero-metrics { margin-top: 45px; }
  .mission-strip { grid-template-columns: 1fr auto; gap: 11px; padding-top: 16px; padding-bottom: 16px; }
  .strip-progress { grid-column: 1 / -1; grid-row: 2; }
  .strip-note { justify-content: flex-end; }
  .section-heading, .quiz-heading { display: block; }
  .section-intro { margin-top: 18px; }
  .mission-grid { grid-template-columns: 1fr; }
  .lesson-nav { grid-template-columns: repeat(2, 1fr); }
  .lesson-content { grid-template-columns: 1fr; gap: 10px; padding: 12px; }
  .lesson-image { min-height: 210px; }
  .lesson-copy { padding: 12px 8px 16px; }
  .lesson-copy h3 { font-size: 27px; }
  .quiz-welcome { grid-template-columns: 1fr; gap: 18px; padding: 30px 24px; }
  .welcome-mark { width: 60px; height: 60px; font-size: 30px; }
  .quiz-active { padding: 25px 20px 34px; }
  .answer-grid { grid-template-columns: 1fr; }
  .match-row { grid-template-columns: 1fr; gap: 6px; }
  .final-cta { display: block; }
  .final-actions { margin-top: 30px; }
  .footer { display: grid; gap: 5px; padding-top: 18px; padding-bottom: 18px; }
}