@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+KR:wght@400;500;600;700;800;900&display=swap');
@font-face { font-family:'Noto Sans KR'; src:url('fonts/noto-sans-kr-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Noto Sans KR'; src:url('fonts/noto-sans-kr-900.woff2') format('woff2'); font-weight:900; font-display:swap; }
:root { --ink:#252b2a; --paper:#f7f3ea; --muted:#727771; --coral:#ed7657; --line:#dcded5; --white:#fffefa; font-family:'Manrope','Noto Sans KR',sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); }
button { font:inherit; cursor:pointer; }
a { color:inherit; }
button:focus-visible, a:focus-visible, video:focus-visible { outline:3px solid #2d6c64; outline-offset:4px; }
.page-shell { max-width:1600px; padding:0 clamp(20px,5.1vw,84px); margin:auto; }
.site-header { min-height:96px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); gap:16px; }
.brand { display:inline-flex; align-items:center; gap:12px; text-decoration:none; font-size:20px; letter-spacing:-.08em; font-weight:900; white-space:nowrap; }
.brand-icon { display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--coral); color:#fff; font:800 22px 'DM Sans',sans-serif; transform:rotate(-14deg); }
.brand-dot { color:var(--coral); }
.header-note, .eyebrow, .tiny-label, .panel-kicker { font:800 11px 'DM Sans','Noto Sans KR',sans-serif; letter-spacing:.14em; }
.header-note { color:#737972; display:flex; align-items:center; gap:11px; }
.header-edition { color:#aeb3aa; }
.live-dot { width:7px; height:7px; background:#80ad81; border-radius:50%; }
.hero { min-height:650px; display:grid; grid-template-columns:1.03fr .97fr; align-items:center; gap:20px; padding:58px 0 88px; }
.hero-copy { position:relative; z-index:2; }
.eyebrow { color:var(--coral); display:flex; align-items:center; gap:12px; margin:0 0 22px; }
.eyebrow-line { display:block; height:1px; width:28px; background:var(--coral); }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { letter-spacing:-.08em; }
h1 { font-size:clamp(49px,5.6vw,88px); line-height:1.2; margin:0 0 28px; font-weight:900; word-break:keep-all; }
h1 em { color:var(--coral); font-style:normal; }
.hero-description { font-size:clamp(16px,1.25vw,19px); line-height:1.85; color:#646c66; letter-spacing:-.04em; margin-bottom:34px; word-break:keep-all; }
.primary-button, .secondary-button { border:0; border-radius:100px; min-height:58px; display:inline-flex; align-items:center; justify-content:space-between; gap:46px; padding:0 26px; font-weight:800; letter-spacing:-.04em; transition:transform .2s,box-shadow .2s,background .2s; }
.primary-button { background:var(--ink); color:white; box-shadow:0 10px 24px #252b2a17; }
.hero-actions { display:grid; gap:12px; width:min(100%,330px); }
.hero-actions .primary-button { width:100%; gap:12px; text-align:left; }
.hero-actions .topics-button { background:#b54c30; }
.hero-actions .send-button { background:#356d66; }
.primary-button:hover, .secondary-button:hover, .small-action:hover { transform:translateY(-2px); box-shadow:0 8px 20px #252b2a23; }
.primary-button span, .secondary-button span { font-size:22px; font-weight:400; }
.hero-footnote { color:#999f96; font-size:12px; margin:18px 0 0; letter-spacing:-.02em; }
.hero-art { height:530px; position:relative; display:flex; justify-content:center; align-items:center; isolation:isolate; }
.hero-orbit { position:absolute; border:1px solid #e5e2d9; border-radius:50%; z-index:-2; }
.orbit-one { width:500px; height:500px; }.orbit-two { width:390px; height:390px; }
.preview-card { position:absolute; width:min(360px,72%); height:405px; border-radius:22px; padding:25px 29px; box-shadow:0 24px 55px #29302c27; display:flex; flex-direction:column; overflow:hidden; }
.preview-back { background:#a69bc4; transform:translate(97px,-74px) rotate(13deg) scale(.86); color:#f7f0ff; }
.preview-mid { background:#e9ae72; transform:translate(-77px,20px) rotate(-12deg) scale(.94); color:#fff8e9; }
.preview-back .preview-index, .preview-mid .preview-index { font:800 118px 'DM Sans',sans-serif; letter-spacing:-.1em; margin-top:31px; }
.preview-back .preview-label, .preview-mid .preview-label { font-size:33px; font-weight:900; margin-top:auto; letter-spacing:-.08em; }
.preview-back .preview-mark, .preview-mid .preview-mark { position:absolute; bottom:12px; right:25px; font:800 110px 'DM Sans',sans-serif; opacity:.35; }
.preview-front { background:var(--coral); color:#fffaf2; transform:translate(18px,18px) rotate(4deg); z-index:2; }
.preview-top, .preview-bottom { display:flex; justify-content:space-between; align-items:center; font:700 11px 'DM Sans','Noto Sans KR',sans-serif; letter-spacing:.12em; }
.preview-index { font:800 128px 'DM Sans',sans-serif; letter-spacing:-.105em; line-height:1; margin:24px 0 0 -8px; }
.preview-spark { font-size:42px; vertical-align:top; padding-left:20px; letter-spacing:0; }
.preview-question { font-size:29px; font-weight:900; line-height:1.4; letter-spacing:-.08em; margin-top:auto; }
.preview-bottom { border-top:1px solid #ffffff72; margin-top:30px; padding-top:17px; letter-spacing:-.03em; }
.preview-bottom span { font-size:24px; font-weight:400; }
.floating-sticker { position:absolute; z-index:3; right:0; bottom:44px; width:105px; height:105px; border-radius:50%; background:#f3df8f; color:#53493a; display:grid; place-items:center; font-size:16px; font-weight:900; letter-spacing:-.08em; transform:rotate(15deg); box-shadow:0 12px 23px #2a262022; }
.experience { border-top:1px solid var(--line); padding:67px 0 104px; scroll-margin-top:20px; }
.section-intro { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:30px; }
.section-intro .eyebrow { margin-bottom:10px; }
h2 { font-size:clamp(32px,3.2vw,48px); line-height:1.25; margin:0; font-weight:900; }
.title-star { font-size:.55em; color:var(--coral); vertical-align:top; margin-left:10px; }
.section-intro > p { color:var(--muted); font-size:13px; letter-spacing:-.04em; margin-bottom:6px; }
.experience-panel { border:1px solid #e1e2da; border-radius:28px; background:#fffefa; box-shadow:0 18px 55px #3d44370a; overflow:hidden; min-height:500px; }
.intro-state { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:44px; min-height:500px; padding:clamp(28px,5vw,70px); background:radial-gradient(circle at 22% 50%,#f9e9dc 0,#fffefa 45%); }
.intro-number { font:800 clamp(130px,20vw,290px)/1 'DM Sans',sans-serif; letter-spacing:-.13em; color:var(--coral); white-space:nowrap; }
.intro-number span { color:#efc5b1; transform:rotate(-10deg); display:inline-block; margin-left:8px; }
.panel-kicker { color:var(--coral); margin-bottom:14px; }
.intro-state h3 { font-size:clamp(35px,4vw,55px); line-height:1.3; margin:0 0 17px; font-weight:900; }
.intro-state p:not(.panel-kicker) { color:#717870; font-size:15px; line-height:1.9; max-width:400px; word-break:keep-all; }
.secondary-button { background:var(--coral); color:white; margin-top:10px; }
.quiz-toolbar { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:23px clamp(22px,3vw,42px); border-bottom:1px solid #e7e8e2; }
.progress-track { display:flex; gap:9px; }
.progress-cell { border:1px solid #d9ddd4; color:#a7ada4; background:#f9faf5; width:46px; height:35px; border-radius:30px; display:grid; place-items:center; font:800 12px 'DM Sans',sans-serif; }
.progress-cell.current { background:var(--ink); border-color:var(--ink); color:#fff; }
.progress-cell.done { border-color:#b6ccba; background:#e6f1e6; color:#466950; }
.progress-count { font:800 22px 'DM Sans',sans-serif; letter-spacing:-.05em; }
.progress-count span { font-size:14px; color:#abb0a8; }
.quiz-grid { padding:clamp(20px,3vw,42px); display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(24px,4vw,65px); align-items:stretch; }
.question-card { min-height:480px; border-radius:20px; background:var(--question-accent); color:#fffaf2; padding:28px clamp(25px,3vw,38px); display:flex; flex-direction:column; box-shadow:0 15px 24px #252b2a15; }
.card-topline, .card-bottomline { display:flex; justify-content:space-between; gap:20px; align-items:center; font:700 11px 'DM Sans','Noto Sans KR',sans-serif; letter-spacing:.11em; }
.card-content { margin-top:auto; }
.card-tag { display:inline-block; background:#ffffff2d; border:1px solid #ffffff66; border-radius:30px; font-size:12px; font-weight:700; padding:7px 12px; letter-spacing:-.04em; }
.question-card h3 { font-size:clamp(30px,3vw,42px); line-height:1.34; font-weight:900; margin:15px 0 23px; word-break:keep-all; }
.question-inline-number { font-family:'DM Sans','Noto Sans KR',sans-serif; letter-spacing:-.04em; white-space:nowrap; }
.card-bottomline { border-top:1px solid #ffffff7c; padding-top:18px; letter-spacing:-.04em; }
.card-arrow { font-size:26px; line-height:1; font-weight:400; }
.answer-side { display:flex; flex-direction:column; min-width:0; padding:22px 0 8px; }
.tiny-label { color:#9fa69c; display:inline-block; }
.side-heading h3 { margin:11px 0 6px; font-weight:900; font-size:clamp(25px,2.7vw,34px); }
.side-heading p { font-size:14px; color:#8b9188; margin-bottom:20px; }
.choices { display:grid; gap:11px; }
.choice { width:100%; min-height:70px; background:#fffefa; border:1.5px solid #e0e2d9; border-radius:14px; display:flex; align-items:center; text-align:left; gap:17px; padding:10px 16px; font-size:16px; font-weight:700; letter-spacing:-.05em; color:var(--ink); transition:background .18s,border .18s,transform .18s; }
.choice:hover { transform:translateX(3px); border-color:var(--question-accent); background:#f9f9f3; }
.choice.selected { border-color:var(--question-accent); background:#fff9f3; box-shadow:0 0 0 2px var(--question-accent); }
.choice-letter { width:38px; height:38px; border-radius:50%; background:#f1f3ec; color:#8a9087; display:grid; place-items:center; flex:none; font:800 13px 'DM Sans',sans-serif; }
.choice.selected .choice-letter { background:var(--question-accent); color:white; }
.choice-check { margin-left:auto; color:#bbc1b7; font-size:20px; }
.choice.selected .choice-check { color:var(--question-accent); }
.answer-footer, .reveal-footer { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-top:auto; padding-top:22px; }
.answer-footer > span { color:#a4aaa1; font-size:11px; }
.small-action { border:0; border-radius:100px; min-height:49px; background:var(--ink); color:white; padding:0 18px 0 22px; display:inline-flex; align-items:center; gap:22px; justify-content:space-between; flex:none; font-size:13px; font-weight:800; letter-spacing:-.04em; transition:transform .2s,box-shadow .2s; }
.small-action span { font-size:19px; font-weight:400; }
.small-action:disabled { opacity:.35; cursor:not-allowed; transform:none; box-shadow:none; }
.reveal-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.result-pill { padding:8px 12px; border-radius:30px; font-size:12px; font-weight:800; letter-spacing:-.04em; }
.result-pill.right { color:#366f46; background:#e7f3e6; }.result-pill.surprise { color:#ac5e3e; background:#fff0df; }
.answer-headline { font-size:clamp(27px,2.65vw,36px); font-weight:900; margin:12px 0 15px; }
.video-frame { aspect-ratio:16/9; background:#202b29; border-radius:14px; overflow:hidden; box-shadow:0 12px 27px #252b2a1a; }
.video-frame video { display:block; width:100%; height:100%; object-fit:cover; }
.watch-status { font-size:11px; color:#9aa198; margin:8px 0 5px; }
.explanation { font-size:14px; line-height:1.75; color:#59615a; margin:8px 0 0; word-break:keep-all; }
.reveal-footer { align-items:end; padding-top:16px; }
.reveal-footer a { font-size:11px; color:#7c867b; text-underline-offset:3px; word-break:break-word; }
.summary-head { padding:clamp(26px,4vw,52px) clamp(24px,4vw,52px) 30px; background:#f2ede3; }
.summary-head-row { display:flex; justify-content:space-between; align-items:end; gap:20px; }
.summary h3 { font-size:clamp(32px,3.5vw,50px); font-weight:900; margin:8px 0; word-break:keep-all; }
.summary h3 span { color:var(--coral); padding-left:8px; font-size:.6em; vertical-align:top; }
.summary-head p { color:#747a71; margin:0; font-size:14px; }
.score-badge { border-radius:20px; background:var(--coral); color:white; padding:17px 22px; display:flex; flex-direction:column; min-width:116px; transform:rotate(4deg); }
.score-badge strong { font:800 38px 'DM Sans',sans-serif; letter-spacing:-.08em; white-space:nowrap; }.score-badge small { font-size:16px; }.score-badge span { font-size:11px; font-weight:700; }
.recap-list { padding:0 clamp(24px,4vw,52px); margin:0; list-style:none; }
.recap-list li { display:flex; align-items:center; gap:22px; padding:23px 0; border-bottom:1px solid #e4e6dd; }
.recap-number { font:800 30px 'DM Sans',sans-serif; color:var(--coral); width:45px; flex:none; }
.recap-list li > div { display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; min-width:0; }
.recap-animal { font-size:12px; font-weight:800; color:#8c9389; }
.recap-list strong { font-size:16px; letter-spacing:-.05em; word-break:keep-all; }
.recap-list a { font-size:11px; color:#939b91; text-underline-offset:3px; }
.recap-result { margin-left:auto; flex:none; border-radius:30px; padding:7px 11px; font-size:11px; font-weight:800; color:#b16c4d; background:#fff0df; }
.recap-result.is-right { color:#3e7651; background:#e8f2e5; }
.summary-footer { padding:26px clamp(24px,4vw,52px) 38px; display:flex; justify-content:space-between; align-items:center; gap:15px; }
.summary-footer p { margin:0; font-weight:800; font-size:15px; }
.site-footer { border-top:1px solid var(--line); padding:28px 0 42px; display:flex; justify-content:space-between; gap:15px; color:#8d958b; font-size:12px; letter-spacing:-.03em; }
.site-footer span span { color:var(--coral); }
@media (max-width:900px) { .hero { min-height:auto; grid-template-columns:1fr 1fr; padding:75px 0; }.hero-art { transform:scale(.8); margin:-50px; }.preview-card { width:360px; }.quiz-grid { gap:24px; }.question-card { min-height:460px; }.answer-footer { flex-wrap:wrap; }.answer-footer > span { width:100%; } }
@media (max-width:700px) { .site-header { min-height:72px; }.brand { font-size:17px; }.header-note { font-size:9px; }.header-edition { display:none; }.hero { display:flex; flex-direction:column; align-items:stretch; padding:65px 0 37px; gap:16px; overflow:clip; }.hero-copy { order:1; }.hero-art { order:2; height:330px; transform:scale(.68); margin:-20px -12vw -50px; }.hero-description { margin-bottom:25px; }.hero-footnote { margin-bottom:0; }.experience { padding:45px 0 75px; }.section-intro { align-items:start; flex-direction:column; gap:8px; }.section-intro > p { font-size:12px; }.experience-panel { border-radius:19px; }.intro-state { grid-template-columns:1fr; gap:0; padding:31px 24px 38px; }.intro-number { font-size:125px; }.intro-state h3 { font-size:33px; }.quiz-toolbar { padding:17px 17px; }.progress-track { gap:5px; }.progress-cell { width:36px; height:30px; font-size:10px; }.progress-count { font-size:18px; }.quiz-grid { display:flex; flex-direction:column; padding:16px; gap:5px; }.question-card { min-height:320px; padding:22px 25px; border-radius:15px; }.question-card h3 { font-size:29px; margin:12px 0 13px; }.card-content { margin-top:auto; }.card-bottomline { padding-top:12px; }.answer-side { padding:24px 6px 10px; }.side-heading h3 { font-size:25px; }.choice { min-height:61px; font-size:14px; }.answer-footer { align-items:stretch; }.answer-footer > span { display:none; }.answer-footer .small-action { width:100%; }.video-frame { margin-top:2px; }.explanation { font-size:13px; }.reveal-footer { flex-wrap:wrap; gap:14px; }.reveal-footer .small-action { width:100%; }.reveal-footer a { order:2; }.summary-head-row { align-items:center; }.summary h3 { font-size:30px; }.score-badge { min-width:85px; padding:12px; }.score-badge strong { font-size:30px; }.recap-list li { gap:10px; padding:18px 0; align-items:start; }.recap-number { width:30px; font-size:22px; }.recap-list li > div { display:flex; flex-direction:column; gap:4px; align-items:start; }.recap-list strong { font-size:14px; }.recap-result { font-size:10px; padding:5px 8px; }.summary-footer { align-items:stretch; flex-direction:column; }.site-footer { flex-direction:column; gap:5px; } }
@media (max-width:390px) { .page-shell { padding:0 16px; }.hero-art { transform:scale(.6); margin:-25px -17vw -70px; }.progress-cell { width:32px; }.progress-count { font-size:16px; }.question-card h3 { font-size:26px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *, *::before, *::after { transition-duration:0.01ms !important; animation-duration:0.01ms !important; } }

/* Keep channel subtitles fully visible. */
.video-frame video { object-fit:contain; }
.watch-status, .reveal-footer a, .recap-list a { font-size:12px; }
.explanation { font-size:16px; }

.share-quiet { display:block; border:0; background:none; color:var(--ink); text-decoration:underline; text-underline-offset:4px; margin-top:18px; padding:8px 0; font-size:14px; }
.summary-share { margin-top:24px; }.summary-share .secondary-button { margin:0; gap:16px; }.summary-share p { margin:12px 0 0; font-size:14px; line-height:1.6; }
#share-dialog { color:var(--ink); background:var(--white); border:1px solid var(--line); border-radius:24px; padding:32px; width:min(520px,calc(100% - 32px)); max-height:calc(100dvh - 32px); overflow:auto; box-shadow:0 24px 80px #0004; }
#share-dialog::backdrop { background:#19232099; }#share-dialog h2 { font-size:28px; padding-right:20px; margin-bottom:12px; }#share-dialog label { font-size:14px; font-weight:700; }
.share-close { position:absolute; right:12px; top:10px; border:0; background:transparent; font-size:28px; width:44px; height:44px; color:var(--ink); }.share-help { font-size:15px; line-height:1.6; color:var(--muted); }
#share-message { display:block; width:100%; resize:vertical; min-height:170px; border:1px solid var(--line); border-radius:12px; padding:14px; margin:10px 0 18px; font:14px/1.7 'Noto Sans KR',sans-serif; background:#f7f3ea; color:var(--ink); overflow-wrap:anywhere; }
.share-actions { display:flex; flex-wrap:wrap; gap:10px; }.share-actions button { font-size:14px; min-height:46px; }.share-copy { border:1px solid var(--line); border-radius:100px; background:white; padding:10px 16px; color:var(--ink); }#native-share[hidden] { display:none; }#share-status { margin:16px 0 0; font-size:14px; line-height:1.6; min-height:24px; }textarea:focus-visible { outline:3px solid #2d6c64; outline-offset:3px; }
@media(max-width:390px) { #share-dialog { padding:24px 18px; }#share-dialog h2 { font-size:24px; }.share-actions button { flex:1 1 auto; }.summary-share .secondary-button { width:100%; padding:12px 18px; justify-content:center; font-size:14px; } }

.topic-picker{padding:clamp(24px,4vw,52px)}.topic-picker h3{font-size:clamp(28px,3vw,40px);margin:0 0 14px}.topic-help{font-size:16px;line-height:1.8;color:var(--muted)}.topic-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px}.topic-tile{background:var(--white);border:1px solid var(--line);border-top:6px solid var(--tile-accent);border-radius:18px;padding:24px;text-align:left;display:flex;flex-direction:column;gap:18px;color:var(--ink);min-height:185px}.topic-tile:hover{background:#f7f3ea}.topic-number{font-size:24px;color:var(--tile-accent);font-weight:900}.topic-tile strong{font-size:25px;letter-spacing:-.05em}.topic-tile>span:last-child{font-size:14px;color:var(--muted)}.topic-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 24px;border-bottom:1px solid var(--line)}.topic-toolbar .share-quiet{margin:0}.topic-toolbar strong{font-size:16px}.next-topic p{margin-bottom:14px}.topic-secondary{display:flex;flex-wrap:wrap;gap:10px}.summary-footer{flex-wrap:wrap;align-items:center}.topic-secondary button{font-size:14px}.question-card h3:focus{outline:none}@media(max-width:700px){.topic-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.topic-tile{padding:16px;min-height:160px}.topic-tile strong{font-size:21px}.topic-toolbar{padding:12px 17px}.next-topic .small-action{width:100%}.topic-secondary button{flex:1}.summary-footer .next-topic{width:100%}}@media(max-width:390px){.topic-grid{grid-template-columns:1fr}.topic-tile{min-height:135px;gap:10px}.topic-toolbar strong{font-size:14px}}

.question-visual{display:block;margin-bottom:20px;text-decoration:none}.question-visual img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line)}.question-visual span{display:block;text-align:right;margin-top:6px;font-size:14px;color:var(--muted)}.topic-tile{min-height:150px;gap:12px}.topic-grid{margin-top:24px}

.daily-invite{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);max-width:330px}.daily-invite>span{font-size:14px;color:var(--muted)}.daily-invite .share-quiet{margin-top:2px;font-weight:800}.return-strip{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:24px;border-bottom:1px solid var(--line)}.return-strip>span{font-size:14px;color:var(--muted)}.return-strip .share-quiet{margin:0;font-size:14px}.share-copy:disabled{opacity:.5;cursor:not-allowed}.personal-best{font-weight:800;color:#356d66!important}.challenge-banner{padding:16px 24px;margin:0;background:#e9f2ef;font-size:16px;line-height:1.7}.channel-card{margin:24px clamp(24px,4vw,52px) 0;padding:24px;background:#e9f2ef;border:1px solid #c9ddd7;border-radius:18px;display:flex;align-items:center;justify-content:space-between;gap:20px}.channel-card strong{font-size:20px}.channel-card p{font-size:15px;line-height:1.7;margin:8px 0 0}.channel-card a{text-decoration:none;background:#356d66;font-size:14px}.site-footer a{color:var(--ink);text-underline-offset:4px}@media(max-width:700px){.channel-card{flex-direction:column;align-items:stretch}.channel-card a{justify-content:center}.return-strip{padding:20px}.return-strip>.small-action{width:100%}.daily-invite{max-width:100%}}

.reading-page{max-width:850px;margin:40px auto 80px}.reading-page h1{font-size:clamp(32px,5vw,50px)}.reading-page p{font-size:17px;line-height:1.9;word-break:keep-all}.reading-page .primary-button{text-decoration:none;margin:16px 0}.reading-facts article{padding:24px 0;border-bottom:1px solid var(--line)}.reading-facts h2{font-size:23px;line-height:1.6}.reading-facts summary{cursor:pointer;font-size:16px;padding:12px 0;color:#356d66}.reading-facts a{color:#356d66}.reading-page .topic-tile{text-decoration:none}.site-footer{flex-wrap:wrap}
.video-youtube-link{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 14px;padding:13px 16px;margin:0 0 12px;border:1px solid #c9ddd7;border-radius:12px;background:#e9f2ef;color:#24534d;font-size:16px;font-weight:800;text-decoration:none;line-height:1.6}.video-youtube-link small{font-size:13px;font-weight:400}.video-youtube-link:hover{background:#dbece6}
.topic-recommendations{max-width:520px;margin:0 0 22px}.topic-recommendations h2{font-size:18px;line-height:1.6;margin:0 0 14px;letter-spacing:-.04em}.recommended-topics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.recommended-topic{border:0;border-radius:18px;background:#283937;color:#fff;padding:20px 16px;min-height:118px;text-align:left;display:flex;flex-direction:column;justify-content:space-between;gap:14px;transition:transform .2s,box-shadow .2s}.recommended-topic:nth-child(2){background:#b54c30}.recommended-topic:nth-child(3){background:#356d66}.recommended-topic:hover{transform:translateY(-2px);box-shadow:0 8px 20px #252b2a23}.recommended-topic strong{font-size:20px;line-height:1.4;word-break:keep-all;overflow-wrap:anywhere}.recommended-topic>span{display:flex;justify-content:space-between;font-size:14px}.topic-recommendations .share-quiet{margin:10px 0 0 auto;padding:8px 0;font-size:14px}@media(max-width:700px){.topic-recommendations{max-width:none}}@media(max-width:480px){.recommended-topics{grid-template-columns:1fr}.recommended-topic{min-height:70px;flex-direction:row;align-items:center;padding:18px 22px;gap:14px}.recommended-topic>span{gap:14px;flex-shrink:0}}

/* Keep the mobile question and its choices together in the visible viewport. */
@media (max-width:700px) {
  .experience-panel[data-phase="question"], .experience-panel[data-phase="video"] { min-height:0; scroll-margin-top:8px; }
  .topic-toolbar { padding:8px 14px; min-height:44px; }
  .quiz-toolbar { padding:8px 14px; }
  .quiz-grid { padding:12px; gap:12px; }
  .question-card { min-height:0; padding:16px 18px; border-radius:14px; box-shadow:none; }
  .card-content { margin-top:0; }
  .card-topline, .card-bottomline, .card-tag { display:none; }
  .question-card h3 { font-size:23px; line-height:1.4; margin:0; }
  .answer-side { padding:0; }
  .side-heading { display:none; }
  .choices { gap:8px; }
  .choice { min-height:50px; padding:8px 12px; gap:12px; font-size:16px; line-height:1.4; }
  .choice-letter { width:30px; height:30px; }
  .answer-footer { padding-top:12px; }
  .answer-footer .small-action { min-height:46px; }
  .question-visual { margin-bottom:10px; }
  .question-visual img { height:88px; object-fit:contain; background:white; }
  .question-visual span { font-size:12px; margin-top:3px; }
  .challenge-banner { margin:8px 14px; font-size:12px; }
}

/* Keep progression within reach while reading or watching the answer. */
@media (max-width:700px) {
  .experience-panel[data-phase="video"] { padding-bottom:calc(78px + env(safe-area-inset-bottom, 0px)); }
  .reveal-footer .small-action {
    position:fixed;
    z-index:30;
    left:16px;
    right:16px;
    bottom:calc(12px + env(safe-area-inset-bottom, 0px));
    width:auto;
    min-height:50px;
    box-shadow:0 0 0 12px var(--paper, #f7f4eb), 0 8px 24px #252b2a30;
  }
}