:root { --ink:#182321; --paper:#f5f0e6; --coral:#ef6c55; --mint:#b8d9cb; --line:rgba(24,35,33,.15); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial, Helvetica, sans-serif; }
button, a { font:inherit; }
button { color:inherit; }
.app-shell { min-height:100vh; overflow:hidden; }
.topbar { height:82px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(24px,6vw,96px); border-bottom:1px solid var(--line); background:rgba(245,240,230,.92); }
.brand { display:flex; align-items:center; gap:10px; font-size:18px; font-weight:900; letter-spacing:.12em; border:0; background:none; cursor:pointer; }
.brand span { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; color:var(--paper); background:var(--coral); font-family:serif; font-size:20px; }
.topbar nav { display:flex; gap:38px; }
.topbar nav a { color:var(--ink); text-decoration:none; font-size:14px; }
.topbar-right { display:flex; align-items:center; gap:24px; }.language-picker select { min-height:38px; padding:0 30px 0 12px; border:1px solid var(--line); border-radius:6px; color:var(--ink); background:#fffaf1; font:inherit; cursor:pointer; }
.status-dot { display:flex; align-items:center; gap:9px; font-size:13px; }
.status-dot i { width:8px; height:8px; border-radius:50%; background:#5e9b82; box-shadow:0 0 0 4px rgba(94,155,130,.15); }
.hero { min-height:650px; display:grid; grid-template-columns:1.1fr .9fr; border-bottom:1px solid var(--line); }
.hero-copy { padding:clamp(70px,9vw,130px) clamp(28px,7vw,112px); }
.eyebrow { display:block; color:#67716d; text-transform:uppercase; font-size:11px; font-weight:800; letter-spacing:.14em; margin-bottom:22px; }
.hero h1 { margin:0; font-size:clamp(52px,6.4vw,94px); line-height:.92; letter-spacing:-.07em; font-weight:800; }
.hero h1 em { color:var(--coral); font-family:Georgia, serif; font-weight:400; }
.hero-copy>p { max-width:600px; margin:32px 0; color:#59615e; font-size:18px; line-height:1.7; }
.primary { display:inline-flex; align-items:center; justify-content:center; gap:25px; min-height:54px; padding:0 26px; border:0; border-radius:4px; background:var(--ink); color:white; font-weight:800; cursor:pointer; text-decoration:none; transition:.2s; }
.primary:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(24,35,33,.18); }
.primary:disabled { opacity:.35; cursor:not-allowed; transform:none; box-shadow:none; }
.primary span { font-size:20px; }
.stats { display:flex; gap:42px; margin-top:62px; }
.stats div { display:flex; flex-direction:column; gap:4px; }
.stats b { font-family:Georgia, serif; font-size:28px; }
.stats span { color:#727b77; font-size:12px; }
.hero-art { position:relative; min-height:600px; background:var(--ink); color:white; display:grid; place-items:center; overflow:hidden; }
.sun { position:absolute; top:80px; right:13%; width:170px; height:170px; border-radius:50%; background:var(--coral); }
.kanji { z-index:2; position:relative; font-family:serif; font-size:clamp(150px,19vw,280px); line-height:1; text-shadow:12px 12px 0 rgba(184,217,203,.13); }
.kanji small { position:absolute; font-size:15px; letter-spacing:.3em; right:-35px; top:36px; writing-mode:vertical-rl; color:var(--mint); }
.hero-art p { position:absolute; bottom:48px; left:50px; font-family:serif; font-size:22px; line-height:1.6; }
.hero-art p b { font-family:Arial; font-size:11px; letter-spacing:.12em; color:var(--mint); text-transform:uppercase; }
.sound-lines { position:absolute; left:8%; top:22%; display:flex; gap:10px; align-items:center; }
.sound-lines i { display:block; width:3px; height:65px; background:var(--mint); border-radius:5px; transform:rotate(18deg); }
.sound-lines i:nth-child(2) { height:110px; }.sound-lines i:nth-child(3) { height:80px; }.sound-lines i:nth-child(4) { height:35px; }
.level-section { display:grid; grid-template-columns:.6fr 1.4fr; gap:60px; padding:100px clamp(28px,7vw,112px); background:#fffaf1; }
h2 { margin:0; font-family:Georgia, serif; font-size:clamp(36px,4vw,58px); font-weight:400; letter-spacing:-.04em; }
.levels { border-top:1px solid var(--line); }
.level { width:100%; display:grid; grid-template-columns:90px 1fr auto; gap:25px; align-items:center; text-align:left; padding:25px 12px; border:0; border-bottom:1px solid var(--line); background:transparent; }
.level>span { font-family:Georgia, serif; font-size:36px; }
.level div { display:flex; flex-direction:column; gap:7px; }.level small { color:#78817d; }
.level em { padding:7px 12px; border:1px solid var(--line); border-radius:20px; font-size:10px; text-transform:uppercase; font-style:normal; letter-spacing:.1em; }
.level.active { cursor:pointer; }.level.active>span,.level.active em { color:var(--coral); }.level:disabled { opacity:.36; cursor:not-allowed; }
.mode-section { padding:110px clamp(28px,7vw,112px); }.section-heading { margin-bottom:48px; }
.mode-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.mode-card { min-height:570px; padding:45px; display:flex; flex-direction:column; }.mode-card.dark { background:var(--ink); color:white; }.mode-card.cream { background:#e8dfcf; color:var(--ink); }
.mode-top { display:flex; justify-content:space-between; align-items:center; }.mode-number { font-family:Georgia,serif; font-size:52px; color:var(--coral); }.tag { border:1px solid currentColor; padding:7px 12px; border-radius:20px; font-size:10px; text-transform:uppercase; letter-spacing:.1em; opacity:.65; }
.mode-card h3 { margin:32px 0 12px; font-family:Georgia,serif; font-size:46px; font-weight:400; }.mode-card>p { max-width:500px; margin:0; opacity:.7; line-height:1.6; }
.type-list { margin:38px 0 30px; border-top:1px solid rgba(255,255,255,.18); }.type-list div { display:grid; grid-template-columns:36px 1fr auto; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.18); }.type-list span,.type-list small { color:var(--mint); font-size:11px; }.type-list small { opacity:.7; }
.mode-card .primary { margin-top:auto; width:100%; }.primary.coral { background:var(--coral); }.primary.ink { background:var(--ink); }
.shuffle-art { flex:1; display:flex; justify-content:center; align-items:center; }.shuffle-art span { display:grid; place-items:center; width:110px; height:140px; background:#fffaf1; border:1px solid var(--line); font:64px serif; box-shadow:0 16px 28px rgba(24,35,33,.12); }.shuffle-art span:first-child { transform:rotate(-9deg) translateX(18px); }.shuffle-art span:last-child { transform:rotate(9deg) translateX(-18px); }.shuffle-art span:nth-child(2) { z-index:2; color:var(--coral); }
.how-section { background:#fffaf1; padding:100px clamp(28px,7vw,112px); }.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:50px; margin-top:45px; }.steps div { border-top:1px solid var(--line); padding-top:25px; }.steps b { color:var(--coral); font:36px Georgia,serif; }.steps h3 { font-size:24px; margin:20px 0 8px; }.steps p { color:#6c7471; line-height:1.6; }
footer { display:flex; align-items:center; justify-content:space-between; padding:45px clamp(28px,7vw,112px); background:var(--ink); color:white; }footer p,footer>span { font-size:12px; opacity:.65; }.brand.light span { background:var(--coral); }.footer-links { display:flex; align-items:center; gap:24px; font-size:12px; }.footer-links a { color:white; text-underline-offset:4px; }.footer-links span { opacity:.65; }

.topbar.compact { position:sticky; top:0; z-index:5; height:72px; }.session-meta { display:flex; gap:18px; font-size:13px; }.session-meta span { color:#7a827f; }.exit { background:none; border:0; cursor:pointer; color:#6c7471; }.progress { height:4px; background:#dfd9ce; }.progress span { display:block; height:100%; background:var(--coral); transition:.3s; }
.exercise-wrap { width:min(880px,calc(100% - 40px)); margin:0 auto; padding:70px 0 100px; }.exercise-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:25px; }.exercise-heading>div { min-width:0; flex:1; }.exercise-heading h1 { width:100%; margin:0 0 35px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:Georgia,serif; font-size:clamp(20px,2.5vw,32px); line-height:1.2; font-weight:400; }.difficulty { white-space:nowrap; padding:8px 12px; border:1px solid var(--line); border-radius:20px; font-size:10px; text-transform:uppercase; }
.audio-card { display:flex; align-items:center; gap:24px; padding:26px; background:var(--ink); border-radius:8px; }.play { flex:0 0 58px; width:58px; height:58px; border-radius:50%; border:0; background:var(--coral); color:white; font-weight:800; cursor:pointer; }.audio-timeline { flex:1; min-width:0; }.time-row { display:grid; grid-template-columns:38px 1fr 38px; align-items:center; gap:12px; color:var(--mint); font-size:11px; font-variant-numeric:tabular-nums; }.time-row span:last-child { text-align:right; }.time-row input { width:100%; height:4px; accent-color:var(--coral); cursor:pointer; }.replay { background:none; border:0; color:white; cursor:pointer; }.replay span { font-size:12px; margin-left:5px; }.listen-hint { margin:14px 0 32px; color:#727a77; font-size:13px; }
.choices { display:grid; gap:12px; }.choices button { min-height:68px; display:flex; align-items:center; gap:18px; text-align:left; padding:12px 20px; background:#fffaf1; border:1px solid var(--line); cursor:pointer; transition:.15s; }.choices button:hover:not(:disabled),.choices button.selected { border-color:var(--ink); transform:translateX(4px); }.choices button>span { display:grid; place-items:center; flex:0 0 34px; width:34px; height:34px; border:1px solid var(--line); border-radius:50%; font-family:Georgia,serif; }.choices button b { font-weight:500; }.choices button em { margin-left:auto; font-size:22px; font-style:normal; }.choices button.correct { border-color:#5e9b82; background:#e3f0ea; }.choices button.wrong { border-color:var(--coral); background:#fbe7e2; }.choices button:disabled { cursor:default; }
.feedback { margin-top:22px; padding:22px; border-left:4px solid #5e9b82; background:#e3f0ea; }.feedback.bad { border-color:var(--coral); background:#fbe7e2; }.feedback strong { font-family:Georgia,serif; font-size:22px; }.feedback p { margin:8px 0 0; line-height:1.55; color:#4d5653; font-size:14px; }.exercise-actions { display:flex; justify-content:flex-end; margin-top:14px; }.exercise-actions .primary { width:100%; }
.translation { position:relative; margin-top:24px; padding:26px; border:1px solid var(--line); background:#fffaf1; transition:.2s; }.translation-heading { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; padding-bottom:20px; border-bottom:1px solid var(--line); }.translation .eyebrow { margin-bottom:8px; }.translation h2 { font-size:26px; }.lock-mark { padding:7px 11px; border-radius:18px; background:#dfece6; color:#46715f; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }.translation-body p { margin:20px 0 0; white-space:pre-line; color:#4d5653; font-size:15px; line-height:1.75; }.bilingual-body { max-width:720px; }.translation.locked { background:#e9e4da; color:#777d7a; }.translation.locked .translation-body { filter:blur(4px); user-select:none; opacity:.45; }.translation.locked .lock-mark { background:#d8d2c8; color:#686d6b; }
.result-screen { min-height:100vh; padding:34px clamp(28px,7vw,112px); background:var(--ink); color:white; text-align:center; }.result-screen>.brand { color:white; }.result-screen section { width:min(620px,100%); margin:90px auto; }.result-screen h1 { font:52px/1.1 Georgia,serif; }.score-ring { width:190px; height:190px; margin:35px auto; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:50%; border:2px solid var(--coral); box-shadow:0 0 0 12px rgba(239,108,85,.08); }.score-ring b { font:72px Georgia,serif; }.score-ring span { color:var(--mint); }.result-screen .primary { background:var(--coral); margin-top:25px; }.text-button { display:block; margin:18px auto; border:0; background:none; color:var(--mint); cursor:pointer; }

@media (max-width:800px) { .topbar nav { display:none; }.hero { grid-template-columns:1fr; }.hero-art { min-height:460px; }.level-section { grid-template-columns:1fr; }.mode-grid { grid-template-columns:1fr; }.steps { grid-template-columns:1fr; }.stats { gap:24px; flex-wrap:wrap; }.level { grid-template-columns:60px 1fr auto; }.mode-card { padding:30px; }.exercise-heading { display:block; }.exercise-heading h1 { font-size:clamp(16px,4vw,24px); }.difficulty { display:inline-block; margin-bottom:20px; } footer { flex-direction:column; gap:20px; text-align:center; } }
@media (max-width:520px) { .status-dot { display:none; }.hero-copy { padding:70px 24px; }.hero h1 { font-size:54px; }.stats { gap:18px; }.stats b { font-size:22px; }.level-section,.mode-section,.how-section { padding:72px 24px; }.level { grid-template-columns:55px 1fr; }.level em { display:none; }.mode-card h3 { font-size:38px; }.shuffle-art span { width:82px; height:110px; font-size:48px; }.replay span { display:none; }.exercise-wrap { padding-top:48px; }.topbar.compact { padding:0 18px; }.session-meta b { display:none; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }

/* Focused MVP flow */
.compact-hero { min-height:540px; }
.compact-hero .hero-copy { padding-top:72px; padding-bottom:64px; }
.compact-art { min-height:540px; }
.hero-mascot { position:relative; z-index:2; width:min(78%,460px); height:auto; max-height:490px; object-fit:contain; filter:drop-shadow(0 22px 34px rgba(0,0,0,.24)); }
.product-line { margin:0 0 18px!important; color:var(--coral)!important; font-size:17px!important; font-weight:800; }
.hero-actions { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.secondary-link { color:var(--ink); font-size:14px; font-weight:700; text-underline-offset:5px; }
.trust-line { margin:16px 0 0!important; font-size:12px!important; color:#59615e!important; }
.compact-hero .stats { margin-top:34px; }
.coming-soon { margin:14px 0 0; color:#68716e; font-size:13px; }
.quick-card,.skill-card { min-height:520px; }
.skill-actions { display:grid; gap:10px; margin-top:28px; }
.skill-actions button { width:100%; min-height:88px; display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:14px; padding:14px 0; color:white; text-align:left; border:0; border-top:1px solid rgba(255,255,255,.18); background:transparent; cursor:pointer; }
.skill-actions button:last-child { border-bottom:1px solid rgba(255,255,255,.18); }
.skill-actions button>span:first-child { color:var(--mint); font-size:11px; }
.skill-actions button>span:nth-child(2) { display:grid; gap:6px; }
.skill-actions small { color:#bfc8c5; font-weight:400; line-height:1.35; }
.skill-actions em { color:var(--mint); font-size:11px; font-style:normal; white-space:nowrap; }
.skill-actions button:hover { color:var(--coral); }

.session-meta { align-items:center; }.session-meta b { color:var(--coral); }
.exercise-wrap { width:min(760px,calc(100% - 40px)); }
.choices { margin:0; padding:0; border:0; }
.choice { position:relative; min-height:68px; display:flex; align-items:center; gap:18px; text-align:left; padding:12px 20px; background:#fffaf1; border:1px solid var(--line); cursor:pointer; transition:.15s; }
.choice:hover,.choice.selected { border-color:var(--ink); transform:translateX(4px); }
.choice input { position:absolute; width:1px; height:1px; opacity:0; }
.choice-number { display:grid; place-items:center; flex:0 0 34px; width:34px; height:34px; border:1px solid var(--line); border-radius:50%; font-family:Georgia,serif; }
.choice.selected .choice-number { color:white; border-color:var(--ink); background:var(--ink); }
.choice b { min-width:0; font-weight:500; overflow-wrap:anywhere; }
.choice-result { margin-left:auto; font-size:12px; font-style:normal; font-weight:800; white-space:nowrap; }
.choice.correct { border-color:#39755d; background:#e3f0ea; transform:none; }.choice.correct .choice-number { color:white; background:#39755d; border-color:#39755d; }
.choice.wrong { border-color:#b84937; background:#fbe7e2; transform:none; }.choice.wrong .choice-number { color:white; background:#b84937; border-color:#b84937; }
.choice:has(input:disabled) { opacity:1; cursor:default; color:var(--ink); }
.choice:has(input:focus-visible) { outline:3px solid var(--coral); outline-offset:3px; }
.after-answer-hint { margin:12px 0 0; text-align:right; color:#626b68; font-size:12px; }
.feedback { margin-top:22px; }
.transcript { margin-top:24px; border:1px solid var(--line); background:#fffaf1; }
.transcript summary { min-height:54px; display:flex; align-items:center; padding:14px 20px; font-weight:800; cursor:pointer; list-style:none; }.transcript summary::after { content:'+'; margin-left:auto; font-size:22px; }.transcript[open] summary::after { content:'−'; }
.transcript-controls { padding:16px 20px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.transcript-controls label { display:inline-flex; min-height:44px; align-items:center; gap:10px; cursor:pointer; }.transcript-controls input { width:20px; height:20px; accent-color:var(--coral); }
.transcript-body { padding:8px 20px 22px; }.utterance { padding:16px 0; border-bottom:1px solid var(--line); }.utterance:last-child { border-bottom:0; }.utterance p { margin:0; line-height:1.65; }.speaker-label { display:inline-block; margin-right:10px; color:#39755d; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }.utterance-translation { margin-top:8px!important; color:#59615e; font-size:14px; }
.audio-error { margin:10px 0 0; color:#ffd7cf; font-size:12px; }.audio-error button { color:white; background:none; border:0; padding:4px; text-decoration:underline; cursor:pointer; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible { outline:3px solid var(--coral); outline-offset:3px; }

@media (max-width:800px) { .compact-art { min-height:380px; }.hero-mascot { width:min(70%,360px); max-height:350px; }.mode-grid { grid-template-columns:1fr; }.exercise-heading h1 { white-space:normal; overflow:visible; }.choice-result { white-space:normal; text-align:right; } }
@media (max-width:520px) { .compact-hero .hero-copy { padding:54px 24px; }.compact-hero .hero-art { min-height:330px; }.hero-actions { align-items:stretch; flex-direction:column; }.hero-actions .primary { width:100%; }.secondary-link { text-align:center; min-height:44px; display:grid; place-items:center; }.mode-section { padding-top:64px; }.skill-actions button { grid-template-columns:28px 1fr; }.skill-actions em { grid-column:2; }.exercise-wrap { width:min(100% - 28px,760px); padding-top:36px; }.audio-card { gap:12px; padding:18px 14px; }.play { flex-basis:48px; width:48px; height:48px; }.replay { min-width:44px; min-height:44px; }.exercise-actions .primary { width:100%; }.choice { min-height:64px; padding:10px 12px; gap:12px; }.choice-result { font-size:11px; }.exit { max-width:110px; text-align:right; font-size:12px; }.session-meta { gap:6px; flex-direction:column; }.session-meta b { display:block; }.after-answer-hint { text-align:center; } }

.brand { text-decoration:none; }
.public-levels { align-items:start; padding-bottom:44px; scroll-margin-top:24px; }
.level-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.level-cards article { min-height:340px; padding:30px; display:flex; flex-direction:column; border:1px solid var(--line); background:var(--paper); }
.level-cards article>span { color:var(--coral); font:42px Georgia,serif; }.level-cards h3 { margin:28px 0 10px; font-size:22px; }.level-cards p { color:#59615e; line-height:1.55; }.level-cards small { margin-bottom:28px; color:#68716e; }.level-cards .primary { margin-top:auto; width:100%; }
.types-section { padding-top:52px; }.types-section h2 { margin-bottom:18px; }.types-cta { display:flex; justify-content:center; margin-top:48px; }.types-cta .primary { min-width:min(100%,320px); }.level-hero { max-width:880px; min-height:520px; margin:auto; padding:100px 28px; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; }.level-hero h1 { margin:0; font:clamp(46px,7vw,82px)/1 Georgia,serif; }.level-hero>p { max-width:700px; color:#59615e; font-size:18px; line-height:1.7; }.level-hero .proof { color:var(--coral); font-weight:800; }
.result-breakdown { width:min(480px,100%); margin:28px auto; padding:18px 24px; border:1px solid rgba(255,255,255,.18); text-align:left; }.result-breakdown p { display:flex; justify-content:space-between; margin:9px 0; }
.feedback-panel,.waitlist { width:min(620px,100%); margin:44px auto 0; padding:28px; color:var(--ink); background:var(--paper); text-align:left; }.feedback-panel h2,.waitlist h2 { font-size:28px; }.feedback-panel textarea,.waitlist input,.waitlist select { width:100%; min-height:48px; margin-top:12px; padding:12px; border:1px solid var(--line); background:white; }.feedback-panel textarea { min-height:100px; resize:vertical; }.feedback-panel button,.waitlist button { min-height:48px; margin-top:14px; padding:0 18px; border:0; cursor:pointer; }.feedback-panel>div { display:grid; gap:8px; margin:18px 0; }.feedback-panel label { min-height:44px; display:flex; gap:10px; align-items:center; }.waitlist .text-button { color:#52605b; }.transcript-body>p { padding:12px 0; margin:0; border-bottom:1px solid var(--line); line-height:1.7; }
@media(max-width:900px){.public-levels{grid-template-columns:1fr}.level-cards{grid-template-columns:1fr}.level-cards article{min-height:260px}.topbar nav{gap:18px}}
@media(max-width:520px){.topbar{padding-inline:16px}.topbar nav a:first-child{display:none}.topbar nav{gap:12px}.topbar-right{gap:10px}.brand{gap:7px;font-size:14px;letter-spacing:.045em}.brand span{width:34px;height:34px}.language-picker select{min-height:36px;padding-left:10px;padding-right:26px}.compact-hero .hero-copy{padding:42px 24px 46px}.compact-hero .hero-copy h1{font-size:clamp(38px,10.5vw,44px);line-height:.98;letter-spacing:-.055em}.compact-hero .hero-copy>p{margin:24px 0;font-size:16px;line-height:1.55}.public-levels{padding:52px 24px 32px}.types-section{padding:42px 24px 56px}.types-cta{margin-top:34px}.types-cta .primary{width:100%}.level-hero{min-height:430px;padding:72px 22px}.feedback-panel,.waitlist{padding:22px}.result-screen{padding-inline:16px}}

.policy-shell { padding:72px 24px 110px; background:#fffaf1; }
.policy-document { width:min(820px,100%); margin:0 auto; color:#34403c; font-size:16px; line-height:1.75; }
.policy-document h1 { margin:0 0 14px; color:var(--ink); font:clamp(42px,7vw,72px)/1 Georgia,serif; letter-spacing:-.045em; }
.policy-document h2 { margin:64px 0 18px; padding-top:22px; border-top:1px solid var(--line); color:var(--ink); font-size:32px; letter-spacing:-.025em; }
.policy-document h3 { margin:34px 0 12px; color:var(--ink); font-size:20px; }
.policy-document p { margin:0 0 20px; }.policy-document ul { margin:0 0 24px; padding-left:25px; }.policy-document li { margin:7px 0; }
.policy-document hr { margin:42px 0; border:0; border-top:1px solid var(--line); }.policy-document code { padding:2px 5px; border-radius:3px; background:#e9e1d3; font-size:.9em; }
.policy-table-wrap { overflow-x:auto; margin:24px 0 32px; }.policy-document table { width:100%; border-collapse:collapse; background:var(--paper); }.policy-document th,.policy-document td { padding:13px 15px; border:1px solid var(--line); text-align:left; vertical-align:top; }.policy-document th { color:var(--ink); background:#e9e1d3; }
.guide-shell { padding:92px 24px 80px; background:#fffaf1; }
.guide-document { width:min(880px,100%); }
.guide-document>h1:first-child { max-width:820px; margin-bottom:34px; }
.guide-document>h1:first-child::before { content:'JLPT LISTENING GUIDE'; display:block; margin-bottom:20px; color:var(--coral); font:800 11px/1 Arial,sans-serif; letter-spacing:.14em; }
.guide-document h2,.guide-document h3 { scroll-margin-top:28px; }
.guide-document a { color:#2d6954; text-underline-offset:3px; }
.guide-document ol { margin:0 0 30px; padding-left:25px; }.guide-document ol li { margin:9px 0; }
.guide-document>ol:first-of-type { padding:24px 28px 24px 48px; border:1px solid var(--line); background:var(--paper); }
.guide-cta { display:flex; align-items:center; justify-content:space-between; gap:36px; padding:56px clamp(24px,8vw,120px); color:white; background:var(--ink); }
.guide-cta h2 { max-width:680px; margin:0; font:clamp(32px,5vw,54px)/1.05 Georgia,serif; }.guide-cta p { color:#c6cfcc; }.guide-cta .eyebrow { color:var(--mint); }.guide-cta .primary { flex:0 0 auto; }
@media(max-width:520px){.footer-links{flex-direction:column;gap:10px}.policy-shell{padding:46px 18px 72px}.policy-document{font-size:15px}.policy-document h1{font-size:42px}.policy-document h2{margin-top:48px;font-size:27px}.policy-document th,.policy-document td{padding:10px 12px}}
@media(max-width:800px){.guide-cta{align-items:flex-start;flex-direction:column}.guide-cta .primary{width:100%}}
@media(max-width:800px){.topbar nav a:nth-child(n+2):nth-child(-n+4){display:none}}
@media(max-width:520px){.guide-shell{padding:52px 18px 60px}.guide-document>ol:first-of-type{padding:18px 18px 18px 38px}.guide-cta{padding:44px 20px}}

.footer-links button { padding:0; border:0; color:white; background:none; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.cookie-banner { position:fixed; z-index:30; right:20px; bottom:20px; width:min(520px,calc(100% - 40px)); padding:20px; border:1px solid rgba(255,255,255,.2); border-radius:8px; color:white; background:var(--ink); box-shadow:0 18px 50px rgba(0,0,0,.25); }
.cookie-banner p { margin:0; font-size:14px; line-height:1.55; }.cookie-banner a { color:var(--mint); text-underline-offset:3px; }.cookie-banner-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }.cookie-banner-actions button { min-height:44px; padding:8px 14px; border:1px solid var(--mint); border-radius:4px; color:white; background:transparent; font-weight:800; cursor:pointer; }.cookie-banner-actions button:hover { color:var(--ink); background:var(--mint); }
.cookie-settings-fab { position:fixed; z-index:18; left:14px; bottom:14px; min-height:36px; padding:7px 12px; border:1px solid var(--line); border-radius:18px; color:#4e5955; background:#fffaf1; box-shadow:0 5px 16px rgba(24,35,33,.12); font-size:11px; cursor:pointer; }
.cookie-settings { width:min(600px,calc(100% - 30px)); padding:0; border:0; border-radius:8px; color:var(--ink); background:var(--paper); box-shadow:0 24px 70px rgba(0,0,0,.28); }.cookie-settings::backdrop { background:rgba(24,35,33,.55); }.cookie-settings-card { padding:28px; }.cookie-settings-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; }.cookie-settings-heading h2 { font-size:32px; }.cookie-dialog-close { width:42px; height:42px; border:1px solid var(--line); border-radius:50%; background:transparent; font-size:26px; cursor:pointer; }
.cookie-category { display:grid; grid-template-columns:1fr auto; align-items:center; gap:22px; padding:22px 0; border-bottom:1px solid var(--line); }.cookie-category h3 { margin:0 0 7px; font-size:18px; }.cookie-category p { max-width:410px; margin:0; color:#626c68; font-size:14px; line-height:1.5; }.cookie-category strong { color:#39755d; font-size:12px; white-space:nowrap; }
.cookie-toggle { position:relative; display:block; width:52px; height:30px; }.cookie-toggle input { position:absolute; opacity:0; }.cookie-toggle span { display:block; width:100%; height:100%; border:2px solid #6f7774; border-radius:18px; background:#d8d3ca; cursor:pointer; }.cookie-toggle span::after { content:''; display:block; width:22px; height:22px; margin:2px; border-radius:50%; background:white; box-shadow:0 1px 4px rgba(0,0,0,.25); transition:.15s; }.cookie-toggle input:checked+span { border-color:#39755d; background:#39755d; }.cookie-toggle input:checked+span::after { transform:translateX(22px); }.cookie-toggle input:focus-visible+span { outline:3px solid var(--coral); outline-offset:3px; }.cookie-save { width:100%; margin-top:22px; }.cookie-save-status { min-height:18px; margin:8px 0 0; text-align:center; font-size:12px; }
@media(max-width:520px){.cookie-banner{right:12px;bottom:12px;width:calc(100% - 24px);padding:16px}.cookie-banner-actions{gap:8px}.cookie-settings-card{padding:20px}.cookie-category{align-items:start;gap:14px}.cookie-category strong{white-space:normal}.cookie-settings-fab{left:10px;bottom:10px}}
@media(max-width:520px) and (max-height:720px){.compact-hero .hero-copy{padding-top:30px;padding-bottom:38px}.compact-hero .hero-copy>p{margin:16px 0}.cookie-banner{right:8px;bottom:8px;width:calc(100% - 16px);padding:12px}.cookie-banner p{font-size:12px;line-height:1.35}.cookie-banner-actions{margin-top:10px}.cookie-banner-actions button{min-height:40px;padding:5px 8px;font-size:12px}}