:root { color-scheme:light; --ink:#17202b; --muted:#6c7480; --paper:#f8f8f5; --line:#d8dcd6; --lime:#d5ff5c; --blue:#4974f5; --orange:#ff7147; --panel:#eef0ea; }
* { box-sizing:border-box; } html,body { min-height:100%; } body { background:var(--paper); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; } #observablehq-main { max-width:none; padding:0; } .observablehq--sidebar,.observablehq--header { display:none; } .studio { width:min(1240px,calc(100vw - 48px)); margin:auto; padding:28px 0 36px; }
.hero { display:flex;justify-content:space-between;align-items:center;padding-bottom:44px; } .brand { display:flex;align-items:center;gap:9px;font-weight:750;font-size:22px;letter-spacing:-.07em; } .brand-mark { display:grid;place-items:center;width:28px;height:28px;background:var(--ink);color:var(--lime);font-size:18px;border-radius:8px; } .header-actions { display:flex;gap:13px;align-items:center; } .connection { display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted); } .connection span { width:8px;height:8px;border-radius:50%;background:#e9a235; } .connection.connected span { background:#1d9b69; } .account-button { color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:7px;padding:7px 10px;font:600 12px inherit;cursor:pointer; }
.theme-button { color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:7px;padding:7px 10px;font:600 12px inherit;cursor:pointer; }
.workspace-link { margin-left:10px;border-left:1px solid var(--line);padding-left:12px;color:var(--blue);font:600 11px inherit;letter-spacing:0;text-decoration:none;white-space:nowrap; }
.intro { max-width:770px;padding-bottom:54px; } .eyebrow { margin:0 0 8px;color:var(--blue);font-size:11px;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;font-weight:700; } .intro h1 { font-size:clamp(42px,6.6vw,82px);letter-spacing:-.075em;line-height:.95;margin:0;font-weight:730; } .intro em { color:var(--blue);font-style:normal; } .lede { max-width:630px;color:var(--muted);font-size:16px;line-height:1.6;margin:27px 0 0; }
.library { display:flex;align-items:end;justify-content:space-between;gap:28px;margin:0 0 25px;padding:20px 22px;background:#e9eefc;border-radius:13px; } .library h2 { margin:0;font-size:18px;letter-spacing:-.04em; } .deck-tabs { display:flex;gap:7px;overflow:auto;max-width:60%;padding-bottom:2px; } .deck-tabs button { min-width:135px;text-align:left;border:1px solid #c8d1e7;background:#f9fbff;border-radius:7px;padding:8px 10px;cursor:pointer; } .deck-tabs button.active { border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue); } .deck-tabs span,.deck-tabs small { display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .deck-tabs span { font-size:12px;font-weight:700; } .deck-tabs small,.no-decks { font-size:10px;color:var(--muted);margin-top:3px; }
.workspace { display:grid;grid-template-columns:290px 1fr;background:#fff;border:1px solid var(--line);border-radius:17px;overflow:hidden;box-shadow:0 12px 30px rgb(18 35 25 / 4%); } .request-panel { background:var(--panel);border-right:1px solid var(--line);padding:27px 24px; } .section-heading { display:flex;gap:12px;align-items:baseline;margin-bottom:22px; } .section-heading span { color:var(--orange);font-size:12px;font-weight:750; } .section-heading h2,.composer h2,.results h2,.auth-dialog h2 { margin:0;font-size:20px;letter-spacing:-.045em; } .segmented { display:grid;grid-template-columns:1fr 1fr;background:#dfe4dc;border-radius:8px;padding:3px;margin-bottom:22px; } .segmented button,.export-actions button { background:transparent;border:0;border-radius:6px;color:var(--muted);padding:8px;font:inherit;font-size:12px;cursor:pointer; } .segmented button.active { background:#fff;color:var(--ink);box-shadow:0 1px 3px #00000012; }
.mode-note { margin:0 0 21px;padding:10px;border:1px solid #d7ddd5;border-radius:8px;font-size:11px;line-height:1.45; }.mode-note strong { display:block;font-size:12px;margin-bottom:2px; }.mode-note a { color:var(--blue);text-decoration:none; }.mode-note span { color:var(--muted); }
.request-panel label,.auth-dialog label { display:block;font-size:11px;font-weight:720;letter-spacing:.025em;margin:15px 0; } .request-panel input,.request-panel select,.auth-dialog input { width:100%;border:1px solid #ccd1ca;background:#f9faf7;border-radius:7px;padding:9px 10px;margin-top:6px;color:var(--ink);font:inherit;font-size:13px; } .request-panel small { color:var(--muted);font-size:10px;line-height:1.35;display:block;margin-top:5px;font-weight:500;letter-spacing:0; }
.composer { padding:30px; } .composer-top { display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:24px; } .upload { cursor:pointer;border:1px solid var(--line);border-radius:7px;padding:8px 11px;font-size:12px;color:var(--ink);font-weight:650;white-space:nowrap; } .composer textarea { width:100%;resize:vertical;border:1px solid var(--line);border-radius:10px;background:#fcfcfa;padding:17px;color:var(--ink);font:15px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace; } .input-footer { display:flex;justify-content:space-between;color:var(--muted);font-size:11px;margin:9px 1px 23px; } .generate { width:100%;border:0;background:var(--ink);color:#fff;border-radius:8px;padding:15px 18px;text-align:left;font:650 14px inherit;cursor:pointer;display:flex;justify-content:space-between; } .generate:hover { background:var(--blue); } .generate:disabled { opacity:.6;cursor:wait; } .generate span { color:var(--lime);font-size:18px;line-height:12px; }.error { color:#b63318;background:#fff0eb;border-radius:7px;padding:9px 11px;font-size:12px; }
.results { margin-top:25px;border-top:1px solid var(--line);padding-top:28px; } .results-head { display:flex;justify-content:space-between;align-items:flex-end;gap:20px; } .export-actions { display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end; } .export-actions button,.export-actions .action-link { display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:36px;border:1px solid var(--line);border-radius:6px;color:var(--ink);padding:8px 12px;font:inherit;font-size:12px;line-height:1;text-decoration:none; } .export-actions .action-link { background:#fff;cursor:pointer; } .export-actions .dark { background:var(--ink);color:white;border-color:var(--ink); } .export-actions .listen { background:var(--lime);border-color:var(--lime); } .export-actions .delete { color:#b63318; } .empty-output { min-height:178px;display:grid;place-items:center;align-content:center;text-align:center;color:var(--muted);border:1px dashed #c8cec5;border-radius:14px;margin-top:20px; } .empty-output span { color:var(--orange);font-size:23px; } .empty-output p { max-width:320px;font-size:13px;line-height:1.5; }
.card-list { display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px; } .study-card { min-height:180px;padding:17px;display:grid;grid-template-columns:27px minmax(0,1fr);gap:10px;border:1px solid var(--line);border-radius:11px;background:#fff; } .study-card.is-playing { border-color:var(--blue);box-shadow:0 0 0 2px #4974f522; } .card-number { color:var(--orange);font-size:11px;font-weight:750; } .card-content { min-width:0; } .original { margin:0 0 13px;font-size:13px;line-height:1.45;color:#59616c; } .translated { margin:0;font-size:15px;line-height:1.42;font-weight:680; } .note { color:var(--muted);font-size:11px;line-height:1.45; } .audio { justify-self:end;text-align:center;color:var(--muted);font-size:9px; } .audio button { width:29px;height:29px;border-radius:50%;border:0;background:var(--lime);color:var(--ink);cursor:pointer; } .audio small { display:block;margin-top:5px;font-size:9px; } .audio span { font-size:9px;line-height:1.4; }.card-audio { grid-column:2;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:3px;padding-top:12px;border-top:1px solid var(--line); }.card-audio p { margin:0;color:var(--muted);font-size:10px;font-weight:700; }.card-audio>div { display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end; }.card-audio button { border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);padding:6px 8px;font:650 10px inherit;cursor:pointer; }.card-audio .make-both { background:var(--lime);border-color:var(--lime); }.studio footer { display:flex;justify-content:space-between;color:var(--muted);font-size:11px;padding:25px 2px 0; }
.persona { margin:10px 0 0;color:var(--blue);font-size:10px; }.card-tools { display:flex;justify-content:flex-start;gap:8px;margin-top:12px;flex-wrap:wrap; }.card-tools button { border:0;background:transparent;color:var(--muted);font-size:10px;cursor:pointer;padding:1px; }.card-tools button:disabled { opacity:.35;cursor:not-allowed; }.card-editor { grid-template-columns:27px minmax(0,1fr); }.card-editor form { display:grid;gap:9px; }.card-editor label { display:block;font-size:10px;font-weight:700;color:var(--muted); }.card-editor input,.card-editor textarea,.card-editor select { width:100%;margin-top:3px;border:1px solid var(--line);border-radius:5px;padding:6px;font:12px inherit; }.card-editor textarea { resize:vertical; }.card-fields { display:grid;grid-template-columns:1fr 1fr;gap:7px; }.editor-actions { display:flex;gap:6px; }.editor-actions button { border:1px solid var(--line);background:#fff;border-radius:5px;padding:6px 8px;font:600 11px inherit;cursor:pointer; }.editor-actions .dark { background:var(--ink);color:#fff;border-color:var(--ink); }
.document-studio .intro.compact { max-width:680px;padding-bottom:35px; }.document-layout { display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:18px;align-items:stretch; }.document-compose,.document-guide { border:1px solid var(--line);border-radius:14px;background:#fff;padding:25px; }.document-guide { background:#17202b;color:white; }.document-guide .eyebrow { color:var(--lime); }.document-guide h2 { font-size:20px;letter-spacing:-.04em;line-height:1.05;margin:0; }.document-guide p { font-size:13px;line-height:1.55;color:#d5dae0; }.document-guide .ai-note { font-size:10px;color:var(--lime); }.doc-grid { display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:10px; }.document-compose label { display:block;margin:12px 0;font-size:10px;font-weight:700;color:var(--muted); }.document-compose input,.document-compose select { width:100%;margin-top:5px;padding:8px;border:1px solid var(--line);border-radius:6px;font:13px inherit;color:var(--ink); }.document-compose textarea { width:100%;resize:vertical;border:1px solid var(--line);border-radius:9px;padding:12px;font:14px/1.55 ui-monospace,SFMono-Regular,monospace;color:var(--ink); }.paragraph-list { display:grid;gap:10px;margin-top:18px; }.paragraph { display:grid;grid-template-columns:145px 1fr 38px;gap:16px;padding:18px;border:1px solid var(--line);border-radius:10px;background:#fff; }.paragraph.is-playing { border-color:var(--blue);box-shadow:0 0 0 2px #4974f522; }.paragraph-meta span,.paragraph-meta strong,.paragraph-meta small { display:block; }.paragraph-meta span { color:var(--orange);font-size:11px;font-weight:700; }.paragraph-meta strong { font-size:13px;margin-top:7px; }.paragraph-meta small { font-size:10px;color:var(--muted);margin-top:4px;line-height:1.4; }
.paragraph-editor { grid-template-columns:145px 1fr; }.paragraph-editor form { display:grid;gap:8px; }.paragraph-editor label { color:var(--muted);font-size:10px;font-weight:700; }.paragraph-editor input,.paragraph-editor textarea,.paragraph-editor select { width:100%;margin-top:3px;border:1px solid var(--line);border-radius:5px;padding:7px;font:12px inherit; }.paragraph-editor textarea { resize:vertical; }.paragraph-editor button { width:max-content;border:1px solid var(--line);background:white;border-radius:5px;padding:6px 8px;font:600 11px inherit;cursor:pointer; }.paragraph-editor .dark { background:var(--ink);color:white;border-color:var(--ink); }
.auth-overlay { position:fixed;z-index:10;inset:0;display:grid;place-items:center;padding:20px;background:#17202b77; } .auth-dialog { position:relative;width:min(100%,390px);background:#fff;padding:28px;border-radius:14px;box-shadow:0 22px 80px #0004; } .auth-dialog p { color:var(--muted);font-size:13px;line-height:1.5; } .auth-dialog form { margin-top:20px; } .auth-submit { width:100%;border:0;border-radius:7px;background:var(--ink);color:#fff;padding:11px;font:650 13px inherit;cursor:pointer; } .auth-switch { border:0;background:transparent;color:var(--blue);font:600 12px inherit;padding:14px 0 0;cursor:pointer; } .auth-message { min-height:18px;font-size:11px!important;color:#b63318!important;margin:12px 0 0; } .close { position:absolute;right:12px;top:10px;border:0;background:transparent;font-size:24px;cursor:pointer;color:var(--muted); }
@media (max-width:760px) { .studio { width:min(100% - 28px,1240px); }.hero { padding-bottom:30px; }.brand { flex-wrap:wrap; }.workspace-link { margin-left:0;border-left:0;padding-left:0;width:100%; }.intro { padding-bottom:32px; }.library { align-items:flex-start;flex-direction:column; }.deck-tabs { max-width:100%;width:100%; }.workspace,.document-layout { grid-template-columns:1fr; }.request-panel { border-right:0;border-bottom:1px solid var(--line); }.composer { padding:23px 18px; }.card-list { grid-template-columns:1fr; }.input-footer,.studio footer { gap:8px;flex-direction:column; }.results-head { align-items:flex-start;flex-direction:column; }.export-actions { width:100%;justify-content:stretch; }.export-actions button,.export-actions .action-link { flex:1; }.connection { font-size:10px; }.doc-grid { grid-template-columns:1fr 1fr; }.paragraph { grid-template-columns:1fr 34px; }.paragraph-meta { grid-column:1/-1; }.document-compose,.document-guide { padding:18px; } }

html[data-lng0-theme="dark"] { color-scheme:dark; --ink:#edf2fa; --muted:#a6b0c0; --paper:#0d1118; --line:#2b3442; --lime:#cafb67; --blue:#7fa2ff; --orange:#ff9773; --panel:#151b24; }
html[data-lng0-theme="dark"] body { background:#0d1118;color:var(--ink); }
html[data-lng0-theme="dark"] .workspace,html[data-lng0-theme="dark"] .study-card,html[data-lng0-theme="dark"] .paragraph,html[data-lng0-theme="dark"] .document-compose,html[data-lng0-theme="dark"] .auth-dialog { background:#171e29;border-color:var(--line); }
html[data-lng0-theme="dark"] .request-panel { background:#111720;border-color:var(--line); }
html[data-lng0-theme="dark"] .composer textarea,html[data-lng0-theme="dark"] .request-panel input,html[data-lng0-theme="dark"] .request-panel select,html[data-lng0-theme="dark"] .document-compose input,html[data-lng0-theme="dark"] .document-compose select,html[data-lng0-theme="dark"] .document-compose textarea,html[data-lng0-theme="dark"] .card-editor input,html[data-lng0-theme="dark"] .card-editor textarea,html[data-lng0-theme="dark"] .card-editor select,html[data-lng0-theme="dark"] .paragraph-editor input,html[data-lng0-theme="dark"] .paragraph-editor textarea,html[data-lng0-theme="dark"] .paragraph-editor select,html[data-lng0-theme="dark"] .auth-dialog input { background:#0d131c;color:var(--ink);border-color:#394557; }
html[data-lng0-theme="dark"] .library { background:#17223a; } html[data-lng0-theme="dark"] .deck-tabs button { background:#111a2a;border-color:#34425b;color:var(--ink); } html[data-lng0-theme="dark"] .mode-note { border-color:#384252;background:#101722; } html[data-lng0-theme="dark"] .account-button,html[data-lng0-theme="dark"] .theme-button,html[data-lng0-theme="dark"] .upload,html[data-lng0-theme="dark"] .export-actions button,html[data-lng0-theme="dark"] .export-actions .action-link,html[data-lng0-theme="dark"] .editor-actions button,html[data-lng0-theme="dark"] .paragraph-editor button { background:#151c27;color:var(--ink);border-color:#3a4657; }
html[data-lng0-theme="dark"] .original,html[data-lng0-theme="dark"] .input-footer,html[data-lng0-theme="dark"] .studio footer,html[data-lng0-theme="dark"] .paragraph-meta small { color:var(--muted); } html[data-lng0-theme="dark"] .empty-output { border-color:#3a4657; } html[data-lng0-theme="dark"] .document-guide { background:#111a27;border-color:#45546c; } html[data-lng0-theme="dark"] .generate,html[data-lng0-theme="dark"] .export-actions .dark,html[data-lng0-theme="dark"] .auth-submit { background:#7fa2ff;color:#0d1118;border-color:#7fa2ff; } html[data-lng0-theme="dark"] .export-actions .listen,html[data-lng0-theme="dark"] .audio button { background:var(--lime);color:#101511; } html[data-lng0-theme="dark"] .editor-actions .dark,html[data-lng0-theme="dark"] .paragraph-editor .dark { background:#7fa2ff;color:#0d1118;border-color:#7fa2ff; } html[data-lng0-theme="dark"] .error { background:#40231f;color:#ffb5a1; }

.auth-nudge { padding:34px;border:1px dashed var(--line);border-radius:13px;text-align:center; }.auth-nudge h2 { margin:0;font-size:21px;letter-spacing:-.04em; }.auth-nudge p { color:var(--muted);font-size:13px; }.auth-nudge a,.new-list { color:var(--blue);font-weight:700;font-size:13px;text-decoration:none; }.auth-nudge .compact-auth,.document-guide .compact-auth { width:auto;min-width:148px;margin-top:5px; }.list-toolbar { display:flex;justify-content:space-between;gap:15px;align-items:end;margin-bottom:20px; }.list-toolbar label,.practice-head label { color:var(--muted);font-size:11px;font-weight:700; }.list-toolbar input,.practice-head select { display:block;min-width:270px;margin-top:6px;border:1px solid var(--line);border-radius:7px;padding:10px;background:#fff;color:var(--ink);font:13px inherit; }.deck-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:13px; }.deck-card { min-height:180px;display:flex;flex-direction:column;padding:20px;border:1px solid var(--line);border-radius:12px;background:#fff; }.deck-card h2 { margin:1px 0 10px;font-size:20px;letter-spacing:-.045em; }.deck-card>p:not(.eyebrow) { color:var(--muted);font-size:12px;margin:0; }.deck-card>div { display:flex;gap:8px;align-items:center;margin-top:auto;padding-top:20px; }.deck-card a,.deck-card button { border:1px solid var(--line);border-radius:6px;padding:7px 9px;background:white;color:var(--ink);font:600 11px inherit;text-decoration:none;cursor:pointer; }.deck-card .practice-link { background:var(--lime);border-color:var(--lime); }.deck-card button { margin-left:auto;color:#b63318; }
.practice-head { display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:24px; }.practice-head h1 { margin:0;font-size:clamp(34px,5vw,58px);letter-spacing:-.065em;line-height:.96; }.practice-shell { width:min(760px,100%);margin:0 auto; }.practice-progress { display:flex;justify-content:space-between;color:var(--muted);font-size:12px;margin-bottom:10px; }.practice-card { min-height:340px;display:grid;align-content:center;justify-items:center;text-align:center;padding:42px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 15px 40px rgb(18 35 25 / 6%); }.practice-card h2 { max-width:610px;margin:8px 0;font-size:clamp(26px,4vw,44px);letter-spacing:-.055em;line-height:1.1; }.practice-label { margin:0;color:var(--orange);font-size:11px;font-weight:750;letter-spacing:.13em;text-transform:uppercase; }.practice-answer { width:100%;margin-top:28px;padding-top:24px;border-top:1px solid var(--line); }.practice-answer p:not(.practice-label) { color:var(--muted);font-size:13px; }.reveal { margin-top:28px;border:0;border-radius:7px;background:var(--ink);color:#fff;padding:12px 17px;font:650 13px inherit;cursor:pointer; }.practice-controls,.practice-rating { display:flex;justify-content:center;gap:9px;margin-top:17px; }.practice-controls button,.practice-rating button { border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink);padding:10px 13px;font:650 12px inherit;cursor:pointer; }.practice-controls button:disabled { opacity:.4;cursor:not-allowed; }.practice-controls .audio-play { background:var(--lime);border-color:var(--lime); }.practice-controls .next,.practice-rating .good { background:var(--ink);color:#fff;border-color:var(--ink); }.practice-rating button { min-width:95px; }
html[data-lng0-theme="dark"] .deck-card,html[data-lng0-theme="dark"] .practice-card { background:#171e29;border-color:var(--line); } html[data-lng0-theme="dark"] .list-toolbar input,html[data-lng0-theme="dark"] .practice-head select,html[data-lng0-theme="dark"] .deck-card a,html[data-lng0-theme="dark"] .deck-card button,html[data-lng0-theme="dark"] .practice-controls button,html[data-lng0-theme="dark"] .practice-rating button { background:#151c27;color:var(--ink);border-color:#3a4657; } html[data-lng0-theme="dark"] .practice-controls .next,html[data-lng0-theme="dark"] .practice-rating .good { background:#7fa2ff;color:#0d1118;border-color:#7fa2ff; } html[data-lng0-theme="dark"] .practice-controls .audio-play { background:var(--lime);color:#101511; }
@media (max-width:760px) { .deck-grid { grid-template-columns:1fr; }.list-toolbar,.practice-head { align-items:flex-start;flex-direction:column; }.list-toolbar input,.practice-head select { min-width:0;width:100%; }.practice-card { min-height:280px;padding:26px 18px; }.practice-controls,.practice-rating { flex-wrap:wrap; }.practice-controls button { flex:1; } }

/* Card audio is deliberate and language-specific, rather than a cramped icon action. */
.card-audio { grid-column:2;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:3px;padding-top:12px;border-top:1px solid var(--line); }.card-audio p { margin:0;color:var(--muted);font-size:10px;font-weight:700; }.card-audio>div { display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end; }.card-audio button { border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);padding:6px 8px;font:650 10px inherit;cursor:pointer; }.card-audio .make-both { background:var(--lime);border-color:var(--lime); }.card-content { min-width:0; }.study-card { grid-template-columns:27px minmax(0,1fr); }.card-tools { justify-content:flex-start;gap:8px; }.card-editor { grid-template-columns:27px minmax(0,1fr); }

.practice-audio { display:flex;justify-content:space-between;gap:18px;align-items:center;margin-top:14px;padding:15px 17px;border:1px solid var(--line);border-radius:11px; }.practice-audio>div:first-child p:last-child { margin:5px 0 0;color:var(--muted);font-size:11px; }.practice-audio-actions { display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end; }.practice-audio button { border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink);padding:10px 13px;font:650 12px inherit;cursor:pointer; }.practice-audio button:disabled { opacity:.4;cursor:not-allowed; }.practice-audio .audio-play { background:var(--lime);border-color:var(--lime); }.practice-controls label { display:flex;align-items:center;gap:6px;color:var(--muted);font-size:11px;font-weight:700; }.practice-controls select { border:1px solid var(--line);border-radius:7px;padding:10px;background:#fff;color:var(--ink);font:650 12px inherit; }

html[data-lng0-theme="dark"] .card-audio button,html[data-lng0-theme="dark"] .practice-audio button,html[data-lng0-theme="dark"] .practice-controls select { background:#151c27;color:var(--ink);border-color:#3a4657; } html[data-lng0-theme="dark"] .card-audio .make-both,html[data-lng0-theme="dark"] .practice-audio .audio-play { background:var(--lime);color:#101511;border-color:var(--lime); } html[data-lng0-theme="dark"] .practice-audio { background:#171e29;border-color:var(--line); } html[data-lng0-theme="dark"] .reveal { background:#7fa2ff;color:#0d1118; }

button.is-busy,button[aria-busy="true"] { cursor:progress; }
button.is-busy { display:inline-flex;align-items:center;justify-content:center;gap:7px; }
.inline-spinner { display:inline-block;width:.9em;height:.9em;box-sizing:border-box;flex:0 0 auto;vertical-align:-.1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:lng0-spin .7s linear infinite; }
@keyframes lng0-spin { to { transform:rotate(360deg); } }
@media (max-width:760px) { .card-audio,.practice-audio { align-items:flex-start;flex-direction:column; }.card-audio>div,.practice-audio-actions { justify-content:flex-start; }.practice-controls label { width:100%;justify-content:space-between; }.practice-controls select { flex:1; } }

.change-set { display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:14px 0 0;padding:9px 11px;border:1px solid #bed0ae;border-radius:8px;background:#f2faeb;color:#41602c;font-size:11px; }.change-set strong { color:#263d19; }.change-set span { padding-left:8px;border-left:1px solid #cfe0bf; }.version-history { display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-top:24px;padding:16px 18px;border:1px solid var(--line);border-radius:11px;background:var(--panel); }.version-history h3 { margin:0;font-size:16px;letter-spacing:-.035em; }.revision-list { display:flex;gap:6px;max-width:68%;overflow:auto;padding-bottom:2px; }.revision { min-width:150px;padding:9px 10px;border:1px solid var(--line);border-radius:7px;background:#fff; }.revision.current { border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue); }.revision strong,.revision span,.revision small { display:block; }.revision strong { font-size:12px; }.revision span,.revision small { margin-top:3px;color:var(--muted);font-size:10px;line-height:1.3; }
html[data-lng0-theme="dark"] .change-set { background:#182417;border-color:#3f6330;color:#c8e8ae; }.change-set strong { color:#e0f6c9; }.change-set span { border-color:#456b36; } html[data-lng0-theme="dark"] .version-history { background:#121a24; } html[data-lng0-theme="dark"] .revision { background:#171e29;border-color:#394557; }
@media (max-width:760px) { .version-history { flex-direction:column; }.revision-list { max-width:100%;width:100%; } }

.revision button { margin-top:8px;border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--ink);padding:5px 7px;font:650 10px inherit;cursor:pointer; } html[data-lng0-theme="dark"] .revision button { background:#171e29;border-color:#394557;color:var(--ink); }