:root { --ink:#1e3048; --muted:#69788a; --teal:#28649b; --line:#e2e8f0; }
body { background:radial-gradient(ellipse at 85% 0%,#dfeaf7 0,transparent 42%),#f3f5f9; }
main { max-width:1100px; padding:24px 30px 0; }
.library-heading { display:flex; align-items:center; justify-content:space-between; margin:0 0 18px; gap:14px; }
.library-heading h1 { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:650; letter-spacing:-.2px; margin:0; color:#425a77; }
.library-dot { width:7px; height:7px; border-radius:50%; background:#568bbf; box-shadow:0 0 0 4px #568bbf12; }
.library-edition { font-size:9px; color:#8493a7; letter-spacing:1.7px; }
.library-layout { display:block; }
.situation-toolbar { display:grid; grid-template-columns:minmax(130px,1fr) minmax(220px,2fr) 44px; gap:12px; align-items:end; margin-bottom:22px; padding:16px; background:#ffffffbf; border:1px solid #ffffff; border-radius:18px; box-shadow:0 4px 18px #203b6207; backdrop-filter:blur(16px); }
.selector-field label { display:block; font-size:12px; font-weight:600; color:#71839b; margin-bottom:8px; }
.selector-field select { display:block; width:100%; min-height:46px; font-size:15px; font-weight:500; background:#f8fafd; border:1px solid #dfe7f1; border-radius:11px; padding:10px 12px; color:#273d59; }
#toggle-search { display:grid; place-items:center; width:44px; height:46px; background:#edf3fa; border:1px solid #dfe7f1; border-radius:11px; color:#346b9e; cursor:pointer; }
#toggle-search svg { fill:none; stroke:currentColor; stroke-width:1.7; }
#toggle-search[aria-expanded="true"] { background:#dce9f9; }
#situation-search-panel { grid-column:1/-1; padding-top:10px; }
#situation-search-panel label { display:block; font-size:13px; margin-bottom:8px; }
#situation-search-panel input { font-size:16px; }
.search-result { display:block; text-decoration:none; padding-top:14px; font-size:15px; }
.topic-heading { display:grid; grid-template-columns:52px 1fr; gap:7px 14px; align-items:center; padding:0 4px; margin-bottom:18px; }
.topic-emblem { grid-row:1/3; display:grid; place-items:center; width:52px; height:56px; border-radius:16px; background:linear-gradient(145deg,#fff4e8,#ffead7); border:1px solid #f1ddc6; box-shadow:0 4px 10px #b67a2d0a; }
.topic-emblem svg { width:28px; fill:#b47c42; }
.topic-meta { grid-column:2; grid-row:1; gap:9px; font-size:11px; color:#7c8b9f; }
.badge { background:#e6edf6; color:#44688f; padding:4px 8px; }
.topic-heading h2 { grid-column:2; grid-row:2; font-size:28px; line-height:1.2; letter-spacing:-.8px; margin:0; }
.learning-audio-bar { display:flex; align-items:center; gap:12px; position:sticky; top:10px; z-index:5; padding:9px 13px; background:#f9fbfef2; border:1px solid #e1e8f2; border-radius:12px; backdrop-filter:blur(18px); box-shadow:0 3px 12px #1b3b6505; margin:0 0 9px; }
.learning-audio-bar>span { flex:1; font-size:11px; color:#73859a; }
.learning-audio-bar label { font-size:11px; color:#647c96; white-space:nowrap; }
.learning-audio-bar select { border:1px solid #e2e8f1; background:#fff; }
#stop-speech { border-color:#dde6f0; color:#53718f; }
.learning-context { margin:0 0 18px; padding-left:3px; }
.learning-context summary { font-size:12px; color:#7e8da0; cursor:pointer; padding:6px 0; }
.checklist-intro,.checklist-scenario { font-size:13px; color:var(--muted); line-height:1.8; }
.learning-card { padding:0; overflow:hidden; border:1px solid #e0e7f0; border-radius:22px; box-shadow:0 6px 28px #29436509,0 1px 3px #29436503; margin-bottom:26px; }
.card-heading { display:flex; align-items:center; gap:13px; padding:16px 24px; background:linear-gradient(115deg,#edf3fb,#f8fafd 78%); border-bottom:1px solid #e5ebf4; }
.card-number { flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:2px; background:#fff; color:#3c6eaa; border:1px solid #dce6f4; width:48px; padding:6px 0; border-radius:12px; font-size:28px; font-weight:600; line-height:1; letter-spacing:-.6px; box-shadow:0 2px 5px #1f4c8205; }
.card-number small { font-size:8px; letter-spacing:1.4px; font-weight:650; color:#91a5c0; }
.card-heading h3 { font-size:22px; letter-spacing:-.5px; line-height:1.3; margin:0; }
.card-heading p { font-size:15px; line-height:1.5; color:#6c7f95; margin:0; }
.card-context { font-size:14px; line-height:1.7; color:#718096; margin:20px 28px 14px; }
.card-dialogue { padding:12px 28px 0; }
.phrase-card { border:1px solid #e5ebf3; background:#f6f8fc; border-radius:14px; padding:16px 18px; margin:10px 0; gap:16px; }
.phrase-card.dialogue-controller { background:#eef5fb; border-color:#dce9f7; }
.role { background:transparent; padding:0; color:#8a96a8; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; }
.role.controller { background:transparent; color:#507eac; }
.role::before { content:''; display:inline-block; width:5px; height:5px; border-radius:50%; background:#a2afc1; margin-right:7px; vertical-align:middle; }
.role.controller::before { background:#5f92c1; }
.phrase-card p { margin:8px 0 0; font-size:18px; line-height:1.7; color:#2d405b; }
.speak { background:#fff; color:#3c71a5; border:1px solid #e1e9f3; box-shadow:0 2px 4px #29436503; border-radius:10px; padding:10px 12px; font-size:12px; transition:background .15s,box-shadow .15s; }
.speak:hover { background:#e5effb; box-shadow:0 2px 8px #2943650a; }
.speak[aria-pressed="true"] { color:#fff; background:#4379b1; border-color:#4379b1; }
.card-vocabulary { margin:22px 28px 0; padding:18px; background:#fcfaf6; border:1px solid #eee8dd; border-radius:14px; }
.card-vocabulary h4 { margin:0 0 14px; font-size:11px; font-weight:650; text-transform:uppercase; letter-spacing:1.5px; color:#a38c68; }
.mini-word { display:flex; align-items:center; gap:14px; margin:11px 0; }
.card-vocabulary .word-audio { color:#806c50; background:#fffefa; border-color:#e9e0d1; font-size:16px; font-weight:500; padding:9px 12px; white-space:normal; text-align:left; flex-shrink:0; max-width:55%; }
.mini-word span { font-size:15px; color:#736b5d; line-height:1.7; }
.card-tip { margin:18px 28px 9px; padding-left:11px; border-left:2px solid #dce5f0; color:#718096; font-size:13px; line-height:1.8; }
.card-reference { display:block; padding:0 28px 23px; color:#73859a; font-size:11px; text-decoration:none; }
.sources { background:#ffffff9c; box-shadow:none; padding:22px 26px; }
.sources summary { color:#617792; font-size:13px; cursor:pointer; }
.reference-card { margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.guide-phase { color:#8395ad; font-size:11px; }
.sources p { font-size:13px; line-height:1.8; color:var(--muted); }
.page-footer { font-size:11px; color:#98a5b7; }
@media(max-width:650px) {
 main { padding:18px 18px 0; }
 .library-edition { font-size:8px; letter-spacing:1px; }
 .topic-heading h2 { font-size:25px; }
 .card-heading { padding:15px 20px; gap:12px; }
 .card-heading h3 { font-size:21px; }
 .card-heading p { font-size:15px; }
 .card-context { margin:18px 22px 12px; }
 .card-dialogue { padding:0 20px; }
 .phrase-card { padding:14px; gap:12px; }
 .phrase-card p { font-size:17px; }
 .card-vocabulary { margin:18px 22px 0; }

 .card-vocabulary .word-audio { max-width:100%; }
 .card-tip { margin:18px 22px 10px; }
 .card-reference { padding:0 22px 22px; }
 .learning-audio-bar { gap:8px; }
 .learning-audio-bar label { font-size:0; }
}
@media(max-width:520px) {
 .situation-toolbar { grid-template-columns:minmax(0,1fr) 44px; padding:13px; }
 .selector-field:first-child { grid-column:1/-1; }
 .selector-field select { font-size:16px; }
 .topic-heading { grid-template-columns:44px 1fr; gap:7px 12px; }
 .topic-emblem { width:44px; height:50px; }
 .topic-heading h2 { font-size:24px; }
 .learning-audio-bar>span { font-size:10px; }
}
@media(prefers-reduced-motion:reduce) { .speak { transition:none; } }

.learning-card { padding-bottom:24px; }

.phrase-card { display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:center; gap:12px; padding:13px 16px; }
.phrase-card p { margin:0; line-height:1.6; }
.speaker-icon { display:grid; place-items:center; width:30px; height:30px; border-radius:9px; background:#e8edf5; color:#8192a9; }
.speaker-icon svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.dialogue-controller .speaker-icon { background:#dfeaf7; color:#5985b2; }
@media(max-width:520px) { .phrase-card { grid-template-columns:24px minmax(0,1fr) auto; gap:8px; padding:12px; } .speaker-icon { width:24px; height:28px; } .phrase-card>.speak { padding:9px 10px; } }

.phrase-card>.icon-play { width:34px; height:34px; padding:0; display:grid; place-items:center; font-size:12px; border-radius:50%; line-height:1; }

.card-vocabulary { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:14px 28px 0; padding:16px 0 0; background:transparent; border:0; border-top:1px solid #e5ebf3; border-radius:0; }
.card-vocabulary h4 { width:100%; margin:0 0 2px; font-size:10px; color:#8493a7; }
.card-vocabulary .mini-word { display:inline-flex; flex-direction:row; align-items:center; margin:0; padding:5px 7px 5px 4px; border:1px solid #dfe7f1; border-radius:22px; background:#f5f8fc; box-shadow:0 2px 5px #29436504; }
.card-vocabulary .word-audio { max-width:100%; flex-shrink:1; font-size:16px; padding:5px 8px; border:0; box-shadow:none; border-radius:16px; color:#405d7c; background:transparent; }
@media(max-width:650px) { .card-vocabulary { margin:12px 20px 0; gap:8px; } }

.example-tabs { display:flex; gap:4px; width:max-content; max-width:calc(100% - 40px); margin:14px 28px 0; padding:4px; border-radius:12px; background:#eaf0f7; }
.example-tabs button { border:0; border-radius:9px; padding:7px 12px; background:transparent; color:#6b7f98; font:inherit; font-size:13px; cursor:pointer; }
.example-tabs button[aria-pressed="true"] { background:#fff; color:#2d5f95; box-shadow:0 2px 6px #29436510; }
.example-tabs button:focus-visible { outline:2px solid #679bd3; outline-offset:2px; }
.learning-examples { display:grid; }
.learning-example { grid-area:1/1; min-width:0; align-self:start; }
.learning-example[hidden] { display:block!important; visibility:hidden; pointer-events:none; }
@media(max-width:650px) { .example-tabs { margin-left:20px; margin-right:20px; } }