:root { color-scheme: light; --ink:#203336; --muted:#67787b; --teal:#286c62; --line:#e4eae7; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:100px; }
body { margin:0; background:#f5f7f5; color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input,select { font:inherit; }
a { color:var(--teal); }
button { cursor:pointer; }
button:disabled { cursor:default; opacity:.5; }
[hidden] { display:none !important; }
:focus-visible { outline:3px solid #62a99a; outline-offset:4px; }
main { max-width:1250px; padding:52px 36px 0; margin:auto; }
.library-heading { margin-bottom:40px; }
.eyebrow { font-size:11px; font-weight:700; letter-spacing:1.7px; color:var(--teal); margin:0 0 12px; }
h1 { font-size:clamp(32px,4vw,48px); letter-spacing:-1.8px; margin:0 0 12px; font-weight:650; }
.library-heading>p:last-child { color:var(--muted); font-size:17px; }
.library-layout { display:grid; grid-template-columns:268px minmax(0,1fr); gap:38px; align-items:start; }
.library-sidebar { position:sticky; top:100px; }
.library-sidebar label { display:block; font-size:14px; font-weight:600; margin-bottom:12px; }
input { width:100%; padding:15px 12px; border:1px solid #dce4df; background:#fff; border-radius:12px; font-size:12px; }
.sidebar-label { font-size:10px; letter-spacing:1.4px; color:var(--muted); margin-top:30px; }
.situation { display:flex; gap:12px; align-items:center; text-decoration:none; padding:18px 14px; border-radius:16px; background:#e6efea; font-size:14px; font-weight:600; }
.situation small { display:block; font-size:10px; color:var(--muted); margin-top:9px; font-weight:400; }
.medical-symbol { background:#fff; padding:4px 10px; border-radius:10px; font-size:25px; font-weight:400; }
.pilot-note,#search-empty { color:var(--muted); font-size:12px; line-height:1.8; padding:10px; }
.topic-heading { padding:0 2px 20px; }
.topic-meta { display:flex; align-items:center; gap:12px; color:var(--muted); font-size:11px; }
.badge { color:var(--teal); padding:6px 10px; background:#e5eee8; border-radius:20px; }
h2 { font-size:32px; letter-spacing:-1px; margin:17px 0 10px; font-weight:650; }
.topic-heading>p { color:var(--muted); font-size:14px; line-height:1.7; }
.topic-nav { display:flex; gap:25px; border-bottom:1px solid var(--line); margin-bottom:25px; padding:0 0 17px; }
.topic-nav a { text-decoration:none; font-size:12px; font-weight:600; }
.panel { background:#fff; padding:30px; border:1px solid #e9eee9; border-radius:22px; margin-bottom:22px; box-shadow:0 4px 16px #243c3003; }
.section-heading { display:flex; justify-content:space-between; gap:15px; align-items:center; margin-bottom:24px; }
h3 { font-size:23px; letter-spacing:-.5px; margin:0; font-weight:600; }
.section-note { color:var(--muted); font-size:11px; }
.response-grid { display:grid; grid-template-columns:1fr 1fr; gap:25px 30px; }
.step-number { color:#8da89b; font-size:12px; }
h4 { margin:9px 0; font-size:15px; font-weight:600; }
.response-item p,.word-card p { font-size:13px; line-height:1.8; color:var(--muted); margin:0; }
.learning-note { background:#f0f5f1; border-radius:12px; padding:17px; margin-top:26px; font-size:12px; line-height:1.8; color:#4c665d; }
.learning-note strong { display:block; }
.source-note { font-size:11px; color:var(--muted); line-height:1.7; margin-bottom:0; }
.vocabulary-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 24px; }
.word-card { padding:15px 0; border-top:1px solid var(--line); }
.word-card>div { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.word-card h4 { font-size:14px; }
.speak { border:0; background:#edf4f0; color:var(--teal); font-size:11px; padding:9px 12px; border-radius:20px; white-space:nowrap; }
.speak:hover { background:#dcebe2; }
.speed-control { font-size:11px; color:var(--muted); white-space:nowrap; }
select { border:1px solid var(--line); border-radius:8px; background:#f7faf8; padding:7px; color:var(--ink); font-size:12px; }
.phrase-intro { font-size:12px; color:var(--muted); line-height:1.7; }
.phrase-card { display:flex; align-items:center; justify-content:space-between; gap:18px; border-top:1px solid var(--line); padding:19px 0; }
.role { font-size:10px; border-radius:5px; padding:4px 7px; background:#edf0f8; color:#526588; }
.role.controller { background:#e9f2ec; color:var(--teal); }
.phrase-context { color:var(--muted); font-size:10px; margin-left:9px; }
.phrase-card p { font-size:15px; line-height:1.6; margin:12px 0 0; }
.audio-footer { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-top:10px; }
.audio-footer p { color:var(--muted); font-size:11px; line-height:1.6; }
#stop-speech { background:none; border:1px solid var(--line); padding:8px 12px; border-radius:10px; font-size:11px; white-space:nowrap; }
.sources a { display:block; margin-top:18px; font-size:12px; line-height:1.7; text-decoration:none; }
.sources p:last-child { color:var(--muted); font-size:11px; line-height:1.8; margin-top:20px; }
.page-footer { text-align:center; color:var(--muted); padding:15px 0 40px; font-size:11px; }
@media(max-width:850px) { main { padding:30px 20px 0; } .library-layout { grid-template-columns:1fr; gap:24px; } .library-sidebar { position:static; } .pilot-note { margin:0; } .library-heading { margin-bottom:25px; } }
@media(max-width:520px) { .panel { padding:22px 18px; } h2 { font-size:28px; } .response-grid,.vocabulary-grid { grid-template-columns:1fr; } .topic-nav { gap:0; justify-content:space-between; } .section-note { display:none; } h3 { font-size:21px; } .phrase-context { display:block; margin:10px 0 0; } .phrase-card p { font-size:14px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

.browse-controls { padding-bottom:22px; margin-bottom:22px; border-bottom:1px solid var(--line); }
.browse-controls select { display:block; width:100%; padding:13px 10px; margin-bottom:18px; background:#fff; font-size:12px; border-color:#dce4df; border-radius:12px; }
.browse-hint { color:var(--muted); font-size:11px; line-height:1.6; margin:0; }