/* Reflexive Verbs Trainer v4: the approved full-scene design on the v3 trainer. One font, Karla, self-hosted. */
@font-face { font-family:'Karla'; src:url('fonts/karla-variable.woff2') format('woff2'); font-weight:200 800; font-display:swap; }
:root {
 color-scheme:light;
 --bg:#D5D0C5; --ink:#262624; --ink-soft:rgba(38,38,36,.72); --focus:#252523;
 --orange:#F15A24; --green:#2E8F5C; --orange-ink:#191918;
 --panel:rgba(255,255,255,.5); --panel-64:rgba(255,255,255,.64); --panel-70:rgba(255,255,255,.7);
 --pill:rgba(255,255,255,.64); --pill-quiet:rgba(255,255,255,.55); --pill-hover:rgba(255,255,255,.8); --pill-border:rgba(255,255,255,.32); --key:rgba(255,255,255,.35);
 --line:rgba(38,38,36,.2); --input:rgba(255,255,255,.75); --input-line:rgba(38,38,36,.28); --placeholder:rgba(38,38,36,.5);
 --bar:rgba(213,208,197,.86); --tile-chip:rgba(255,255,255,.72);
 --h-opt-default:0px; --h-opt-top:0px; --h-opt-col:0px; --h-q-default:0px; --h-q-top:0px; --h-q-col:0px; --h-fb:0px; --h-cap-default:0px; --h-rt:0px;
}
[data-theme="dark"] {
 color-scheme:dark;
 --bg:#1B1B1A; --ink:#F2F1EC; --ink-soft:rgba(242,241,236,.72); --focus:#FFFFFF;
 --panel:rgba(22,22,21,.6); --panel-64:rgba(22,22,21,.7); --panel-70:rgba(22,22,21,.76);
 --pill:rgba(22,22,21,.66); --pill-quiet:rgba(22,22,21,.55); --pill-hover:rgba(22,22,21,.82); --pill-border:rgba(255,255,255,.14); --key:rgba(255,255,255,.14);
 --line:rgba(242,241,236,.22); --input:rgba(0,0,0,.4); --input-line:rgba(242,241,236,.3); --placeholder:rgba(242,241,236,.5);
 --bar:rgba(27,27,26,.86); --tile-chip:rgba(22,22,21,.72);
}
* { box-sizing:border-box; }
html,body { margin:0; width:100%; min-height:100%; background:var(--bg); color:var(--ink); font:16px/1.5 'Karla',sans-serif; -webkit-text-size-adjust:100%; }
button,input,a { font:inherit; }
button,a { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; border:0; color:inherit; background:none; padding:0; text-align:left; }
a { color:inherit; text-decoration:none; }
button:disabled { cursor:default; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:3px solid var(--focus); outline-offset:5px; }
.page:focus,.overlay:focus { outline:none; }
h1,h2,h3,p { margin:0; }
[hidden] { display:none !important; }
strong,b,h1,h2,h3 { font-weight:700; }
.sr-only { position:absolute; width:1px; height:1px; clip:rect(0,0,0,0); overflow:hidden; white-space:nowrap; }
.noscript { padding:24px; }
.de { color:var(--orange); font-weight:700; }

/* ---------- the scene: photo fills the viewport, everything floats over it ---------- */
#app { width:100%; }
.page { display:none; }
.page.active { display:block; animation:appear .15s ease-out; }
@keyframes appear { from { opacity:.6 } to { opacity:1 } }
.scene { position:relative; width:100%; height:100dvh; isolation:isolate; overflow:hidden; }
.scene-visual { position:fixed; inset:0; z-index:0; }
.photo-surface { position:absolute; inset:0; z-index:0; width:100%; height:100%; padding:0; background:transparent; cursor:pointer; border-radius:0; }
.photo-surface:focus-visible { outline:3px solid #FFF; outline-offset:-8px; }
.scene-photo { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 49%; pointer-events:none; }
.tile-wall { position:absolute; inset:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:repeat(4,minmax(0,1fr)); grid-auto-rows:minmax(0,1fr); gap:4px; padding:4px; background:#D5D0C5; }
.tile-wall img { min-width:0; min-height:0; width:100%; height:100%; object-fit:cover; border-radius:4px; display:block; }
@media (max-width:700px) { .tile-wall { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(6,minmax(0,1fr)); } }
.image-mirrored .scene-photo { transform:scaleX(-1); }

/* header, top right */
.scene-header { position:absolute; z-index:2; top:max(28px,env(safe-area-inset-top)); left:40px; right:40px; display:flex; justify-content:flex-end; pointer-events:none; }
.header-right { display:flex; align-items:center; gap:32px; pointer-events:auto; }
.sound-toggle,.theme-toggle,.exit { background:none; padding:10px 0; border-radius:0; font-size:14px; font-weight:700; min-height:44px; display:inline-flex; align-items:center; line-height:1.4; white-space:nowrap; }
.sound-toggle:hover,.theme-toggle:hover,.exit:hover { text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; }
.exit { min-width:44px; justify-content:flex-end; }
.sound-toggle { min-width:72px; }
.theme-toggle { min-width:40px; }
.scene-position { font-size:13px; width:150px; display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:6px 18px; }
.phase-name { font-weight:700; }
.scene-counter { font-variant-numeric:tabular-nums; white-space:nowrap; }
.scene-counter strong { font-size:21px; font-weight:700; }
.scene-counter > span { font-weight:600; }
progress { grid-column:1/-1; width:100%; height:2px; appearance:none; border:0; background:var(--line); overflow:hidden; border-radius:0; display:block; }
progress::-webkit-progress-bar { background:var(--line); }
progress::-webkit-progress-value { background:var(--ink); }
progress::-moz-progress-bar { background:var(--ink); }

/* the four answer pills */
.choice-area { position:absolute; z-index:1; left:45%; right:40px; top:128px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:end; }
.choice { background:var(--pill); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border:1px solid var(--pill-border); border-radius:20px; min-height:max(70px,var(--h-opt-default)); display:flex; gap:15px; align-items:center; text-align:left; padding:18px 22px; font-weight:700; font-size:18px; line-height:1.3; transition:transform .15s,background .15s; overflow-wrap:anywhere; }
.choice:nth-child(odd) { transform:rotate(-2deg); }
.choice:nth-child(even) { transform:rotate(2deg); }
.choice:hover:not(:disabled) { transform:translateY(-3px); background:var(--pill-hover); }
.choice .key { width:26px; height:26px; border-radius:50%; background:var(--key); font-size:12px; display:grid; place-items:center; flex-shrink:0; }
.choice.correct { background:rgba(46,143,92,.96); border-color:transparent; color:#FFF; }
.choice.correct .key { background:#FFF; color:#2E8F5C; }
.choice.wrong { background:rgba(241,90,36,.96); border-color:transparent; color:#191918; }
.choice.wrong .key { background:rgba(255,255,255,.55); color:#191918; }
.choice.quiet { background:var(--pill-quiet); border-color:transparent; color:var(--ink); }

/* caption panel at the bottom: example, memory hook, the orange button */
.scene-caption { position:absolute; z-index:2; bottom:max(26px,env(safe-area-inset-bottom)); left:40px; right:40px; display:flex; gap:20px; align-items:flex-end; justify-content:center; pointer-events:none; }
.scene-caption > * { pointer-events:auto; }
.caption-copy { width:840px; max-width:calc(100% - 200px); min-width:0; background:var(--panel); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); padding:16px 22px; border-radius:12px; animation:caption-appear .18s ease-out; }
.mnemonic-text { font-size:21px; line-height:1.45; text-align:left; font-weight:600; }
.result-note { font-size:21px; line-height:1.45; font-weight:600; }
.result-note .example { display:block; }
.cap-label { display:block; font-size:12px; line-height:1.2; letter-spacing:.14em; text-transform:uppercase; color:var(--orange); font-weight:700; margin-bottom:3px; }
.result-note:not([hidden]) + .mnemonic-text .cap-label { margin-top:2px; }
.result-note strong,.mnemonic-text strong { color:inherit; font-weight:700; }
.result-note:not([hidden]) + .mnemonic-text { margin-top:10px; font-size:21px; text-align:left; }
@keyframes caption-appear { from { opacity:0; transform:translateY(5px) } to { opacity:1; transform:translateY(0) } }
.next { background:var(--orange); color:var(--orange-ink); font-weight:700; font-size:17px; border-radius:14px; padding:16px 24px; min-width:180px; min-height:58px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; text-align:center; line-height:1.3; }
.next:disabled { visibility:hidden; }
.caption-copy.empty { visibility:hidden; animation:none; } /* the slot stays, so the button never moves */
.tap-hint { position:absolute; z-index:2; left:0; bottom:0; font-size:13px; font-weight:700; color:var(--ink-soft); background:var(--panel); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); padding:8px 12px; border-radius:8px; line-height:1.3; }

/* side panel: Part 2 sentence and input, the card from the list; sits where the pills sit */
.side-panel { position:absolute; z-index:1; left:45%; right:40px; top:128px; padding:18px 22px; background:var(--panel-64); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border-radius:14px; }
.pronoun-question { font-size:21px; line-height:1.45; min-height:var(--h-q-default); overflow-wrap:anywhere; }
.gap { display:inline-block; border-bottom:2px solid; min-width:70px; line-height:1.1; }
.gap-fill { color:var(--green); font-weight:700; }
.answer-row { margin-top:14px; }
input { width:100%; min-height:52px; padding:12px 16px; border:1px solid var(--input-line); border-radius:12px; background:var(--input); color:var(--ink); appearance:none; }
input::placeholder { color:var(--placeholder); font-weight:400; }
input:focus { border-color:var(--ink); }
#p2-input { font-size:20px; font-weight:700; }
#p2-input.right { background:rgba(46,143,92,.96); border-color:transparent; color:#FFF; }
#p2-input.wrong { background:rgba(241,90,36,.96); border-color:transparent; color:#191918; }
#p2-input:disabled { opacity:1; -webkit-text-fill-color:currentColor; }
.feedback { min-height:var(--h-fb); margin-top:10px; font-size:16px; line-height:1.4; overflow-wrap:anywhere; }
.answer-status { font-weight:700; }
.answer-status:empty,.typed:empty,.note:empty { display:none; }
.typed { font-weight:700; font-size:20px; display:flex; gap:14px; flex-wrap:wrap; }
.typed .was { color:#B8401A; }
.typed .is { color:var(--green); }
.note { color:var(--ink-soft); margin-top:4px; }
.card-panel .verb-line { font-size:30px; line-height:1.15; overflow-wrap:anywhere; }
.card-panel .verb { font-weight:700; color:var(--orange); }
.case { display:inline-block; margin-left:10px; padding:3px 8px; border-radius:6px; font-size:12px; line-height:1.2; font-weight:700; color:var(--ink); background:var(--panel-70); vertical-align:middle; }
.case:empty { display:none; }
.card-panel .meaning { margin-top:6px; font-size:17px; color:var(--ink-soft); }
.card-panel .row { margin-top:16px; display:flex; gap:12px; flex-wrap:wrap; }
.secondary { border:1px solid var(--input-line); background:var(--input); border-radius:14px; min-height:48px; padding:10px 22px; font-weight:700; min-width:110px; display:inline-flex; align-items:center; justify-content:center; }
.secondary:disabled { opacity:.4; }

/* panels: home, results, grammar */
.panel { position:absolute; z-index:1; background:var(--panel-70); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border-radius:18px; padding:32px; }
.subject-label { font-size:12px; line-height:1.2; letter-spacing:.14em; text-transform:uppercase; color:var(--orange); font-weight:700; }
.home-panel { right:40px; top:50%; transform:translateY(-50%); width:min(480px,46%); }
.home-panel h1 { font-size:46px; line-height:1.05; margin-top:10px; }
.lede { margin-top:16px; font-size:19px; line-height:1.45; font-weight:400; }
.lede .de { font-weight:inherit; }
.home-progress { margin-top:22px; }
.stats { font-size:13px; font-weight:700; margin-bottom:8px; white-space:nowrap; }
.home-actions { margin-top:24px; display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.links { display:flex; gap:20px; }
.link { font-size:14px; font-weight:700; min-height:44px; display:inline-flex; align-items:center; text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; }
.foot { position:absolute; z-index:1; left:40px; bottom:max(26px,env(safe-area-inset-bottom)); font-size:12px; line-height:1.4; color:var(--ink-soft); background:var(--panel); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); padding:8px 12px; border-radius:8px; max-width:440px; }
.foot a { text-decoration:underline; text-underline-offset:3px; }
.results-sheet { right:40px; top:140px; width:min(480px,46%); }
.results-sheet h2 { font-size:42px; line-height:1.1; }
.score { font-size:52px; line-height:1.1; font-weight:700; margin-top:14px; color:var(--orange); }
.results-text { margin-top:16px; font-size:19px; line-height:1.45; font-weight:600; min-height:var(--h-rt); }
.results-sheet .next { margin-top:24px; }
.grammar-panel { right:40px; top:100px; width:min(680px,56%); display:flex; flex-direction:column; }
.reference-heading { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; }
.count { font-size:13px; font-weight:700; color:var(--ink-soft); white-space:nowrap; font-variant-numeric:tabular-nums; }
.sections { display:grid; width:100%; }
.section { grid-area:1/1; visibility:hidden; }
.section.active { visibility:visible; }
.section h2 { font-size:30px; line-height:1.15; }
.section p { margin-top:14px; font-size:17px; line-height:1.5; font-weight:600; }
.pronouns { width:100%; border-collapse:collapse; margin-top:18px; }
.pronouns td,.pronouns th { padding:6px 12px; text-align:left; border-bottom:1px solid var(--line); }
.pronouns th { font-size:13px; font-weight:700; color:var(--ink-soft); }
.pronouns td { font-size:17px; font-weight:700; color:var(--orange); }
.pronouns td:first-child { color:var(--ink); }
.invite-body { display:flex; gap:24px; align-items:flex-start; margin-top:16px; }
.portrait { width:150px; height:225px; object-fit:cover; border-radius:14px; flex-shrink:0; display:block; }
.invite-copy { flex:1; min-width:0; }
.invite-copy p { margin-top:0; }
.invite .next { margin:20px auto 0; display:flex; width:max-content; color:#FFF; }
.nav.paged { display:flex; align-items:center; gap:12px; margin-top:20px; padding-top:14px; border-top:1px solid var(--line); }
.nav.paged .count { margin-left:auto; }

/* all verbs: the one screen that scrolls, a dense wall of scenes */
.wall { min-height:100dvh; background:var(--bg); }
.wall.active { display:block; }
.wall-bar { position:sticky; top:0; z-index:3; display:flex; align-items:center; gap:24px; padding:max(16px,env(safe-area-inset-top)) 40px 16px; background:var(--bar); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.wall-bar .head { display:flex; align-items:baseline; gap:14px; }
.wall-bar h2 { font-size:28px; line-height:1.1; }
#dict-search { max-width:320px; min-height:44px; font-size:15px; font-weight:600; }
.wall-bar .header-right { margin-left:auto; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(300px,45%),1fr)); gap:4px; padding:4px; }
.tile { position:relative; display:block; padding:0; border-radius:4px; overflow:hidden; aspect-ratio:900/672; background:var(--panel); }
.tile img { display:block; width:100%; height:100%; object-fit:cover; }
.tile .chip { position:absolute; left:8px; bottom:8px; max-width:calc(100% - 16px); background:var(--tile-chip); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border-radius:8px; padding:6px 10px; line-height:1.25; }
.tile .tv { font-size:15px; font-weight:700; color:var(--ink); overflow-wrap:anywhere; }
.tile .tm { font-size:12px; font-weight:600; color:var(--ink-soft); overflow-wrap:anywhere; }
.tile:hover .tv { text-decoration:underline; text-underline-offset:3px; }
.tile:focus-visible { outline-offset:-4px; }
.empty-state { padding:60px 40px; display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.empty-state h3 { font-size:28px; }
.empty-state p { color:var(--ink-soft); font-weight:600; }

/* the card from the list */
.overlay { position:fixed; inset:0; z-index:10; background:var(--bg); }
body.card-open { overflow:hidden; }

/* ---------- the five scene layouts: pills and panels on the side that leaves the figure free ---------- */
@media (min-width:701px) {
 .scene-top-row .scene-photo { object-position:50% 0; }
 .scene-top-row .choice-area { top:100px; left:40px; right:40px; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
 .scene-top-row .choice { font-size:16px; padding:15px; gap:10px; min-height:max(68px,var(--h-opt-top)); }
 .scene-top-row .side-panel { top:100px; left:40px; right:auto; width:min(750px,55%); }
 .scene-top-row .pronoun-question { min-height:var(--h-q-top); }
 .scene-right-column .choice-area { top:116px; left:auto; right:40px; width:27%; max-width:380px; grid-template-columns:minmax(0,1fr); gap:12px; }
 .scene-right-column .choice { min-height:max(64px,var(--h-opt-col)); padding:14px 18px; font-size:17px; gap:12px; }
 .scene-right-column .choice:nth-child(n) { transform:none; }
 .scene-right-column .choice:hover:not(:disabled) { transform:translateY(-3px); }
 .scene-right-column .side-panel { top:116px; left:auto; right:40px; width:27%; max-width:380px; }
 .scene-right-column .pronoun-question { min-height:var(--h-q-col); }
 .image-mirrored .scene-photo { object-position:50% 32%; }
 .scene-right-column.image-mirrored .scene-caption { left:auto; right:40px; width:36%; max-width:480px; flex-direction:column; align-items:stretch; gap:12px; }
 .scene-right-column.image-mirrored .caption-copy { width:100%; max-width:none; }
 .scene-right-column.image-mirrored .next { align-self:flex-end; }
 .scene-right-column.image-mirrored .mnemonic-text { text-align:left; }
 .scene-thermometer .scene-caption { justify-content:flex-start; }
 .scene-thermometer .caption-copy { max-width:44%; }
 .scene-right-column.image-mirrored .tap-hint { left:auto; right:0; }
}
@media (min-width:1450px) { .scene-header,.scene-caption { left:6%; right:6%; } .foot { left:6%; } .home-panel,.results-sheet,.grammar-panel { right:6%; } }
@media (min-width:701px) and (max-width:1200px) {
 .choice-area { left:38%; right:24px; }
 .choice { font-size:15px; padding:13px; gap:8px; }
 .scene-top-row .choice-area { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .scene-right-column .choice-area,.scene-right-column .side-panel { width:34%; max-width:none; }
 .scene-right-column .choice { font-size:16px; padding:12px 14px; gap:10px; }
 .scene-right-column .pronoun-question { font-size:19px; }
 .scene-right-column.image-mirrored .scene-caption { width:42%; max-width:none; }
 .scene-header,.scene-caption { left:24px; right:24px; }
 .header-right { gap:24px; }
 .side-panel { left:38%; right:24px; }
 .caption-copy { padding:12px 17px; max-width:calc(100% - 170px); }
 .mnemonic-text,.result-note,.result-note:not([hidden]) + .mnemonic-text { font-size:18px; }
 .next { min-width:150px; font-size:15px; }
 .foot { left:24px; }
 .scene-top-row .side-panel { left:24px; width:calc(100% - 48px); max-width:none; }
 .scene-right-column .side-panel,.scene-right-column .choice-area,.scene-right-column.image-mirrored .scene-caption { right:24px; }
 .home-panel,.results-sheet,.grammar-panel { right:24px; width:min(480px,52%); }
 .grammar-panel { width:min(680px,62%); padding:24px; }
 .section h2 { font-size:28px; }
 .section p { font-size:17px; }
 .wall-bar { padding-left:24px; padding-right:24px; }
}
/* short desktop viewports: the right-column caption must stay clear of the pills above it */
@media (min-width:701px) and (max-height:760px) {
 .scene-right-column.image-mirrored .mnemonic-text,.scene-right-column.image-mirrored .result-note,.scene-right-column.image-mirrored .result-note:not([hidden]) + .mnemonic-text { font-size:17px; line-height:1.4; }
 .scene-right-column.image-mirrored .caption-copy { padding:12px 16px; }
 .scene-right-column .choice-area,.scene-right-column .side-panel { top:100px; }
 .scene-right-column .choice { min-height:max(58px,var(--h-opt-col)); padding:12px 16px; }
 .scene-right-column .choice-area { gap:10px; }
 .grammar-panel { top:88px; padding:24px; }
 .section p { margin-top:12px; font-size:17px; line-height:1.45; }
 .pronouns td,.pronouns th { padding:6px 12px; }
 .nav.paged { margin-top:16px; padding-top:12px; }
 .home-panel { padding:24px; }
 .results-sheet { top:100px; }
}

/* ---------- phones: header, photo, then the pills and the caption in a column, nothing scrolls ---------- */
@media (max-width:700px) {
 .scene { height:100dvh; flex-direction:column; gap:12px; padding:12px 16px max(18px,env(safe-area-inset-bottom)); }
 .page.scene.active,.overlay.scene,#measure .scene { display:flex; }
 .scene-header { position:relative; top:auto; left:auto; right:auto; flex-shrink:0; padding-top:env(safe-area-inset-top); }
 .header-right { width:100%; display:grid; grid-template-columns:auto auto minmax(0,1fr) auto; gap:10px; }
 #home .header-right,#results .header-right,#grammar .header-right { grid-template-columns:auto auto minmax(0,1fr); }
 #home .header-right .sound-toggle,#results .header-right .sound-toggle,#grammar .header-right .sound-toggle { grid-column:2; }
 #results .header-right .exit,#grammar .header-right .exit { grid-column:3; justify-self:end; }
 #card .header-right { grid-template-columns:minmax(0,1fr) auto; }
 #card .header-right .exit { grid-column:2; }
 .sound-toggle,.theme-toggle,.exit { font-size:12px; min-height:44px; }
 .sound-toggle { min-width:60px; }
 .scene-position { width:auto; min-width:0; gap:4px 10px; font-size:12px; }
 .scene-counter strong { font-size:20px; }
 .scene { justify-content:flex-end; }
 .scene-header { margin-bottom:auto; }
 .scene-visual { position:fixed; inset:0; width:auto; margin:0; flex:none; min-height:0; max-height:none; }
 .scene-photo { object-fit:cover; object-position:26% 30%; }
 .scene-top-row .scene-photo { object-position:50% 34%; }
 .image-mirrored .scene-photo { transform:scaleX(-1); object-position:74% 30%; }
 .photo-surface:focus-visible { outline-offset:-4px; }
 .choice-area { position:relative; left:auto; right:auto; top:auto; width:100%; display:grid; grid-template-columns:minmax(0,1fr); gap:8px; flex-shrink:0; }
 .choice { width:100%; font-size:16px; min-height:max(50px,var(--h-opt-default)); padding:12px 16px; gap:12px; border-radius:12px; }
 .choice:nth-child(n),.choice:hover:not(:disabled) { transform:none; }
 .choice .key { width:23px; height:23px; font-size:11px; }
 .tap-hint { position:static; flex-shrink:0; align-self:flex-start; margin-bottom:auto; }
 .scene-caption { position:relative; left:auto; right:auto; bottom:auto; display:flex; flex-direction:column; gap:10px; align-items:stretch; flex-shrink:0; min-height:calc(var(--h-cap-default) + 58px); justify-content:flex-end; }
 .caption-copy { width:100%; max-width:none; padding:12px 16px; border-radius:10px; }
 .mnemonic-text,.result-note,.result-note:not([hidden]) + .mnemonic-text { font-size:14px; line-height:1.5; }
 .result-note:not([hidden]) + .mnemonic-text { margin-top:8px; }
 .next { align-self:flex-end; min-height:48px; min-width:136px; padding:12px 20px; border-radius:12px; font-size:16px; }
 .side-panel { position:relative; left:auto; right:auto; top:auto; width:100%; max-width:none; flex-shrink:0; padding:14px 16px; }
 .pronoun-question { font-size:19px; line-height:1.4; }
 .answer-row { margin-top:10px; }
 input { min-height:48px; }
 #p2-input { font-size:18px; }
 .feedback { font-size:14px; margin-top:8px; }
 .typed { font-size:17px; }
 .panel { position:relative; transform:none; left:auto; right:auto; top:auto; width:100%; max-width:none; padding:20px; border-radius:14px; flex-shrink:0; }
 .home-panel { margin-top:auto; }
 .home-panel h1 { font-size:36px; }
 .lede { font-size:16px; margin-top:10px; }
 .home-progress { margin-top:14px; }
 .home-actions { margin-top:16px; gap:16px; }
 .foot { position:relative; left:auto; bottom:auto; flex-shrink:0; max-width:none; font-size:11px; }
 .results-sheet { margin-top:auto; }
 .results-sheet h2 { font-size:32px; }
 .score { font-size:40px; }
 .results-text { font-size:16px; }
 #grammar .scene-visual { position:fixed; inset:0; width:auto; margin:0; flex:none; max-height:none; }
 #grammar .scene-photo { object-fit:cover; }
 .grammar-panel { flex:1 1 auto; min-height:0; justify-content:flex-start; }
 .section h2 { font-size:24px; }
 .section p { font-size:15px; line-height:1.45; margin-top:12px; }
 .pronouns { margin-top:12px; }
 .pronouns td,.pronouns th { padding:6px 8px; }
 .pronouns td { font-size:15px; }
 .invite-body { gap:14px; margin-top:12px; }
 .portrait { width:96px; height:144px; }
 .invite-copy .next { margin-top:14px; min-width:0; }
 .nav.paged { margin-top:auto; padding-top:12px; }
 .card-panel .verb-line { font-size:24px; }
 .card-panel .meaning { font-size:15px; }
 .wall-bar { flex-wrap:wrap; gap:10px 16px; padding:12px 16px; }
 .wall-bar h2 { font-size:22px; }
 .wall-bar .header-right { width:100%; display:flex; margin-left:0; gap:16px; }
 .wall-bar .header-right .exit { margin-left:auto; }
 #dict-search { max-width:none; flex:1 1 100%; order:3; }
 .tile .chip { left:6px; bottom:6px; padding:4px 8px; }
 .tile .tv { font-size:13px; }
 .tile .tm { font-size:11px; }
 .empty-state { padding:40px 16px; }
}
@media (max-width:700px) and (max-height:700px) {
 .scene { gap:8px; padding-top:8px; }
 .choice-area { gap:6px; }
 .choice { min-height:max(44px,var(--h-opt-default)); padding:9px 14px; font-size:15px; }
 .mnemonic-text,.result-note,.result-note:not([hidden]) + .mnemonic-text { font-size:13px; line-height:1.4; }
 .caption-copy { padding:10px 12px; }
 .scene-caption { gap:8px; min-height:calc(var(--h-cap-default) + 52px); }
 .next { min-height:44px; }
 .pronoun-question { font-size:17px; }
 .home-panel h1 { font-size:30px; }
 .lede { font-size:14px; }
 .section h2 { font-size:21px; }
 .section p { font-size:14px; margin-top:8px; }
 .pronouns td,.pronouns th { padding:4px 8px; }
 .pronouns td { font-size:14px; }
 .portrait { width:72px; height:108px; }
}

/* the measuring stage: same layouts, same widths, never seen */
#measure { position:fixed; inset:0; visibility:hidden; pointer-events:none; z-index:-1; overflow:hidden; --h-opt-default:0px; --h-opt-top:0px; --h-opt-col:0px; --h-q-default:0px; --h-q-top:0px; --h-q-col:0px; --h-fb:0px; --h-cap-default:0px; --h-rt:0px; }
#measure .scene { position:absolute; inset:0; height:auto; min-height:100dvh; }
#measure .caption-copy,#measure .scene-caption { animation:none; min-height:0; }
#measure .next { visibility:visible; }
@media (max-width:700px) { #measure .scene-caption { min-height:0; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }

/* Grammar: balanced topics reserve one compact slot, so navigation stays still. */
#grammar .grammar-panel { width:min(720px,62%); padding:26px 28px; }
#grammar .reference-heading { margin-bottom:6px; }
#grammar .g-hint { font-size:12px; color:var(--ink-soft); margin:0 0 14px; }
#grammar .section h2 { font-size:28px; line-height:1.2; }
#grammar .section p { font-size:16px; line-height:1.45; margin-top:12px; font-weight:400; }
#grammar .akk { color:#0061A8; font-weight:700; }
#grammar .dat { color:#F04E23; font-weight:700; }
[data-theme="dark"] #grammar .akk { color:#83C9FF; }
[data-theme="dark"] #grammar .dat { color:#FF926C; }
#grammar .g-examples,#grammar .g-patterns { margin:14px 0 0 28px; display:grid; gap:8px; }
#grammar .g-example { position:relative; display:block; width:fit-content; max-width:100%; padding:0; text-align:left; font-size:18px; line-height:1.4; font-weight:700; cursor:help; }
#grammar .g-tip { position:absolute; z-index:5; left:0; top:100%; width:max-content; max-width:min(300px,65vw); padding:9px 12px; border-radius:8px; background:#262624; color:#FFFFFF; font-size:14px; line-height:1.4; font-weight:500; visibility:hidden; pointer-events:auto; }
#grammar .g-example:hover .g-tip,#grammar .g-example:focus-visible .g-tip,#grammar .g-example.tip-open .g-tip { visibility:visible; }
#grammar .g-example.tip-dismissed .g-tip { visibility:hidden; }
#grammar .g-patterns > div { display:grid; grid-template-columns:105px 1fr; align-items:baseline; gap:12px; }
#grammar .g-label { font-size:12px; color:var(--ink-soft); font-weight:700; }
#grammar .pronouns { margin-top:12px; }
#grammar .pronouns th,#grammar .pronouns td { border:0; padding:2px 10px; font-size:16px; line-height:1.3; }
#grammar .pronouns tbody th { color:var(--ink); font-weight:600; }
#grammar .pronouns tbody td:nth-child(2) { color:#0061A8; }
#grammar .pronouns tbody td:nth-child(3) { color:#F04E23; }
[data-theme="dark"] #grammar .pronouns tbody td:nth-child(2) { color:#83C9FF; }
[data-theme="dark"] #grammar .pronouns tbody td:nth-child(3) { color:#FF926C; }
#grammar .nav.paged { border:0; padding-top:0; margin-top:20px; }
@media (max-width:700px) {
 #grammar { justify-content:flex-start; }
 #grammar .scene-header { margin-bottom:0; }
 #grammar .grammar-panel { width:100%; padding:20px; flex:0 0 auto; }
 #grammar .section h2 { font-size:23px; }
 #grammar .section p { font-size:15px; line-height:1.4; margin-top:10px; }
 #grammar .g-examples,#grammar .g-patterns { margin:12px 0 0 16px; gap:8px; }
 #grammar .g-example { font-size:16px; }
 #grammar .g-patterns > div { grid-template-columns:75px 1fr; gap:8px; }
 #grammar .pronouns th,#grammar .pronouns td { padding:3px 6px; font-size:15px; }
}
@media (max-width:700px) and (max-height:700px), (min-width:701px) and (max-height:650px) {
 #grammar .grammar-panel { padding:16px 20px; }
 #grammar .g-hint { margin-bottom:10px; }
 #grammar .section h2 { font-size:21px; }
 #grammar .section p { font-size:14px; line-height:1.35; margin-top:8px; }
 #grammar .g-examples,#grammar .g-patterns { margin-top:10px; gap:5px; }
 #grammar .g-example { font-size:15px; }
 #grammar .pronouns th,#grammar .pronouns td { font-size:14px; padding:2px 6px; }
 #grammar .nav.paged { margin-top:14px; }
}

@media (max-width:350px) {
 #grammar .grammar-panel { padding:14px; }
 #grammar .g-examples,#grammar .g-patterns { margin-left:10px; }
}
@media (orientation:landscape) and (max-height:500px) {
 #grammar .scene-header { top:10px; left:20px; right:20px; }
 #grammar .grammar-panel { top:58px; left:20px; right:20px; width:auto; padding:12px 20px; }
 #grammar .reference-heading { margin-bottom:2px; }
 #grammar .g-hint { font-size:11px; margin-bottom:6px; }
 #grammar .section { column-count:2; column-gap:28px; }
 #grammar .section h2 { column-span:all; margin-bottom:6px; }
 #grammar .section > p,#grammar .g-examples,#grammar .g-patterns,#grammar .pronouns { break-inside:avoid; }
 #grammar .section p { margin-top:6px; }
 #grammar .g-examples,#grammar .g-patterns { margin-top:6px; margin-left:12px; }
 #grammar .pronouns { margin-top:6px; }
 #grammar .pronouns th,#grammar .pronouns td { padding:0 6px; }
 #grammar .invite .next { margin-top:10px; }
 #grammar .nav.paged { margin-top:12px; }
}

#grammar .grammar-panel:has(.invite.active) .g-hint { visibility:hidden; }

/* Desktop practice text grows with the viewport, bounded for shorter screens. */
@media (min-width:1201px) {
 .choice,.scene-top-row .choice,.scene-right-column .choice { font-size:clamp(20px,min(1.6vw,2.8vh),28px); }
 .mnemonic-text,.result-note,.result-note:not([hidden]) + .mnemonic-text,.pronoun-question { font-size:clamp(22px,min(1.8vw,3vh),30px); }
 .cap-label { font-size:clamp(12px,.9vw,16px); }
 .next { font-size:clamp(18px,1.3vw,24px); }
 .sound-toggle,.theme-toggle,.exit { font-size:clamp(14px,1.05vw,18px); }
 .scene-position { font-size:clamp(13px,1vw,17px); }
 .home-panel .lede { font-size:clamp(20px,1.4vw,26px); }
}
@media (min-width:1201px) and (max-height:760px) {
 .scene-right-column.image-mirrored .mnemonic-text,.scene-right-column.image-mirrored .result-note,.scene-right-column.image-mirrored .result-note:not([hidden]) + .mnemonic-text { font-size:18px; }
}

@media (min-width:1201px) {
 .scene-right-column .choice { font-size:clamp(18px,1.2vw,22px); }
 .scene-right-column .choice-area,.scene-right-column .side-panel { max-width:440px; }
 .scene-right-column.image-mirrored .scene-caption { width:40%; max-width:560px; }
 .scene-right-column.image-mirrored .mnemonic-text,.scene-right-column.image-mirrored .result-note,.scene-right-column.image-mirrored .result-note:not([hidden]) + .mnemonic-text { font-size:clamp(18px,min(1.3vw,2.8vh),24px); }
}

/* Compact illustrated controls, with no full-width toolbar. */
.theme-toggle,.sound-toggle { width:44px; min-width:44px; height:44px; padding:10px; display:inline-flex; justify-content:center; border-radius:50%; background:var(--panel-70); }
.theme-toggle svg,.sound-toggle svg { width:25px; height:25px; overflow:visible; }
.theme-toggle:hover,.sound-toggle:hover { text-decoration:none; background:var(--pill-hover); }
.theme-toggle svg { color:var(--orange); }
.theme-toggle:has(svg path[fill]) svg path:last-child { stroke:var(--bg); }
.hint-toggle,.scene-header .exit { min-height:44px; padding:8px 14px; border-radius:22px; background:var(--panel-70); font-size:13px; font-weight:700; text-align:center; }
.hint-toggle[aria-expanded="true"] { background:var(--orange); color:var(--orange-ink); }
.scene-header .header-right { gap:12px; }
.scene-position { padding:6px 10px; border-radius:12px; background:var(--panel-70); }
.tile-wall { width:100dvw; height:100dvh; }
#grammar .grammar-panel:has(.invite.active) .g-hint { display:none; }
#grammar .sections:has(.invite.active) { display:block; }
#grammar .sections:has(.invite.active) > .section:not(.active) { display:none; }
#grammar .invite.active { column-count:1; }
#grammar .invite .next { max-width:100%; }
#image-viewer { position:fixed; inset:0; z-index:30; background:#171716; }
.image-open { overflow:hidden; }
.image-canvas { position:absolute; width:100%; height:100%; }
#image-stage { position:absolute; inset:0; width:100%; height:100%; display:block; }
#full-image { display:block; width:100%; height:100%; object-fit:contain; }
#image-close { position:absolute; top:max(12px,env(safe-area-inset-top)); right:max(12px,env(safe-area-inset-right)); min-height:44px; padding:10px 18px; border-radius:24px; background:#F0EDE6; color:#262624; font-weight:700; }
@media (max-width:700px) {
 .scene .scene-header { margin-top:env(safe-area-inset-top); padding-top:0; }
 .scene .scene-header .header-right { display:flex; flex-wrap:wrap; width:auto; gap:8px; margin-left:auto; }
 .scene .scene-header .scene-position { width:120px; font-size:11px; }
 .scene .scene-header .scene-counter strong { font-size:16px; }
 .scene .scene-header .exit { margin-left:auto; }
 .wall-bar { padding-top:max(12px,env(safe-area-inset-top)); }
 #card { background:var(--bg); justify-content:flex-start; overflow-y:auto; }
 #card .scene-header { margin-bottom:0; }
 #card .scene-visual { position:relative; inset:auto; width:100%; flex:0 0 auto; min-height:0; aspect-ratio:900/672; margin-top:auto; }
 #card .scene-photo { object-fit:contain; object-position:center; transform:none; border-radius:14px; }
 #card .card-panel { flex:0 0 auto; }
 #card .scene-caption { flex:0 0 auto; min-height:0; margin-bottom:auto; }
 #card .caption-copy { width:100%; }
}
/* Landscape phones keep the controls above the scene and explanations below. */
@media (orientation:landscape) and (max-height:500px) {
 .page.scene.active,#card { display:block; }
 :is(.scene,.scene-right-column.image-mirrored) { height:100dvh; min-height:100dvh; padding:0; overflow:hidden; }
 :is(.scene,.scene-right-column.image-mirrored) .scene-visual,#card .scene-visual { position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; margin:0; }
 :is(.scene,.scene-right-column.image-mirrored) .scene-header { position:absolute; margin:0; }
 :is(.scene,.scene-right-column.image-mirrored) .choice-area,:is(.scene,.scene-right-column.image-mirrored) .scene-caption,:is(.scene,.scene-right-column.image-mirrored) .side-panel,:is(.scene,.scene-right-column.image-mirrored) .panel { position:absolute; }
 :is(.scene,.scene-right-column.image-mirrored) .scene-caption { min-height:0; margin:0; }
 :is(.scene,.scene-right-column.image-mirrored) .scene-photo { object-position:center; }
 :is(.scene,.scene-right-column.image-mirrored) .panel { margin:0; }
 .tile-wall { grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:repeat(4,minmax(0,1fr)); }
 .wall-bar { flex-wrap:nowrap; }
 .wall-bar .header-right { width:auto; margin-left:auto; }
 #dict-search { flex:1; order:0; }
 .scene-header { top:max(4px,env(safe-area-inset-top)); left:max(12px,env(safe-area-inset-left)); right:max(12px,env(safe-area-inset-right)); }
 .scene-header .header-right { gap:8px; }
 .scene-position { width:130px; }
 :is(.scene,.scene-right-column.image-mirrored) .choice-area { top:62px; left:max(12px,env(safe-area-inset-left)); right:max(12px,env(safe-area-inset-right)); width:auto; max-width:none; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
 :is(.scene,.scene-right-column.image-mirrored) .choice { font-size:14px; padding:10px; gap:8px; min-height:max(44px,var(--h-opt-top)); border-radius:12px; transform:none; }
 :is(.scene,.scene-right-column.image-mirrored) .scene-caption { left:max(12px,env(safe-area-inset-left)); right:max(12px,env(safe-area-inset-right)); bottom:max(8px,env(safe-area-inset-bottom)); width:auto; max-width:none; flex-direction:row; gap:10px; align-items:flex-end; }
 :is(.scene,.scene-right-column.image-mirrored) .caption-copy { width:auto; flex:1; max-width:calc(100% - 132px); padding:10px 14px; }
 :is(.scene,.scene-right-column.image-mirrored) .mnemonic-text,:is(.scene,.scene-right-column.image-mirrored) .result-note,:is(.scene,.scene-right-column.image-mirrored) .result-note:not([hidden]) + .mnemonic-text { font-size:14px; line-height:1.35; }
 :is(.scene,.scene-right-column.image-mirrored) .cap-label { font-size:10px; }
 :is(.scene,.scene-right-column.image-mirrored) .result-note:not([hidden]) + .mnemonic-text { margin-top:6px; }
 :is(.scene,.scene-right-column.image-mirrored) .next { font-size:14px; min-width:122px; min-height:44px; padding:10px 16px; }
 :is(.scene,.scene-right-column.image-mirrored) .side-panel { top:62px; left:52%; right:max(12px,env(safe-area-inset-right)); width:auto; max-width:none; padding:12px 14px; }
 :is(.scene,.scene-right-column.image-mirrored) .pronoun-question { font-size:16px; line-height:1.3; min-height:0; }
 :is(.scene,.scene-right-column.image-mirrored) .answer-row { margin-top:8px; }
 :is(.scene,.scene-right-column.image-mirrored) input { min-height:40px; padding:8px 12px; }
 :is(.scene,.scene-right-column.image-mirrored) #p2-input { font-size:16px; }
 :is(.scene,.scene-right-column.image-mirrored) .feedback { min-height:0; font-size:12px; margin-top:6px; }
 :is(.scene,.scene-right-column.image-mirrored) .typed { font-size:14px; }
 .home-panel { top:58px; bottom:max(12px,env(safe-area-inset-bottom)); right:max(12px,env(safe-area-inset-right)); width:48%; transform:none; padding:18px; overflow-y:auto; }
 .home-panel h1 { font-size:30px; }
 .home-panel .lede { font-size:15px; margin-top:10px; }
 .home-panel .home-progress { margin-top:12px; }
 .home-panel .home-actions { margin-top:14px; gap:12px; }
 .home-panel .links { gap:14px; }
 .home-panel .link { font-size:13px; }
 .foot { left:max(12px,env(safe-area-inset-left)); width:40%; font-size:11px; }
 #grammar .grammar-panel { top:58px; left:max(12px,env(safe-area-inset-left)); right:max(12px,env(safe-area-inset-right)); width:auto; padding:12px 18px; max-height:calc(100dvh - 70px - env(safe-area-inset-bottom)); overflow-y:auto; }
 #grammar .invite.active h2 { font-size:22px; }
 #grammar .invite.active p { font-size:14px; }
 #grammar .invite.active .next { margin-top:12px; }
 #card .card-panel { top:62px; }
 #card .card-panel .verb-line { font-size:24px; }
 #card .card-panel .meaning { font-size:15px; }
 #card .card-panel .row { margin-top:10px; }
 #card .scene-caption .caption-copy { max-width:100%; flex:0 1 800px; }
 .results-sheet { top:62px; right:max(12px,env(safe-area-inset-right)); padding:18px; }
 .results-sheet h2 { font-size:28px; }
 .results-sheet .score { font-size:34px; margin-top:8px; }
 .results-sheet .results-text { font-size:15px; margin-top:8px; }
 .results-sheet .next { margin-top:12px; }
 .wall-bar { padding-top:max(8px,env(safe-area-inset-top)); padding-left:max(12px,env(safe-area-inset-left)); padding-right:max(12px,env(safe-area-inset-right)); gap:16px; }
 .wall-bar .head { gap:8px; }
 .wall-bar h2 { font-size:22px; }
 #dict-search { width:200px; min-width:0; }
 .wall-bar .header-right { gap:8px; }
}

/* Portrait: complete artwork first, exercises below in normal document flow. */
@media (orientation:portrait) and (max-width:1024px) {
 .page.scene.active,#card,#measure .scene { display:flex; flex-direction:column; }
 :is(#home,#p1,#p2,#grammar,#results,#card) { height:auto; min-height:100dvh; padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); gap:12px; overflow:visible; justify-content:flex-start; background:var(--bg); }
 #card { height:100dvh; overflow-y:auto; }
 :is(#home,#p1,#p2,#grammar,#results,#card) .scene-header { position:relative; inset:auto; width:100%; margin:0; padding:0; flex:0 0 auto; }
 :is(#home,#p1,#p2,#grammar,#results,#card) .header-right { width:100%; display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
 :is(#p1,#p2) .scene-position { order:5; width:100%; display:flex; justify-content:flex-end; align-items:center; gap:8px; background:none; padding:0; font-size:12px; }
 :is(#p1,#p2) .scene-position progress { width:72px; }
 :is(#p1,#p2) .hint-toggle { margin-right:auto; padding:8px 10px; }
 :is(#home,#p1,#p2,#grammar,#results,#card) .scene-visual { position:relative; inset:auto; width:100%; height:auto; min-height:0; max-height:none; aspect-ratio:900/672; margin:0; flex:0 0 auto; }
 :is(#home,#p1,#p2,#grammar,#results,#card) .scene-photo { object-fit:contain; object-position:center; border-radius:14px; }
 #grammar .tile-wall { width:100%; height:100%; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:repeat(4,minmax(0,1fr)); border-radius:14px; overflow:hidden; }
 :is(#home,#p1,#p2,#grammar,#results,#card) .panel,:is(#p1,#p2,#card) .side-panel { position:relative; inset:auto; transform:none; width:100%; max-width:none; max-height:none; margin:0; padding:18px; flex:0 0 auto; }
 :is(#p1,#p2) .choice-area { position:relative; inset:auto; width:100%; max-width:none; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; flex:0 0 auto; }
 :is(#p1,#p2) .choice { min-height:62px; padding:12px; font-size:16px; gap:8px; transform:none; border-radius:12px; }
 :is(#p1,#p2) .choice .key { width:22px; height:22px; font-size:11px; }
 :is(#p1,#p2,#card) .scene-caption { position:relative; inset:auto; width:100%; max-width:none; min-height:0; margin:0; flex:0 0 auto; flex-direction:column; align-items:stretch; gap:10px; }
 :is(#p1,#p2,#card) .caption-copy { width:100%; max-width:none; padding:14px 16px; flex:0 0 auto; }
 :is(#p1,#p2) .caption-copy.empty { display:none; }
 :is(#p1,#p2,#card) .mnemonic-text,:is(#p1,#p2,#card) .result-note,:is(#p1,#p2,#card) .result-note:not([hidden]) + .mnemonic-text { font-size:16px; line-height:1.4; }
 :is(#p1,#p2) .next { min-height:46px; padding:12px 20px; font-size:16px; align-self:flex-end; }
 #p2 .pronoun-question { min-height:0; font-size:19px; }
 #p2 .feedback { min-height:0; }
 #p2 input { min-height:46px; font-size:18px; }
 #home .home-panel h1 { font-size:32px; }
 #home .lede { font-size:17px; font-weight:400; }
 #home .home-actions { flex-wrap:wrap; }
 #home .foot { position:relative; inset:auto; width:100%; margin:0; font-size:12px; }
 #grammar .grammar-panel { padding:18px; }
 #grammar .sections { display:block; }
 #grammar .section:not(.active) { display:none; }
 #grammar .section { column-count:1; }
 #grammar .section h2 { font-size:24px; }
 #grammar .section p { font-size:16px; line-height:1.4; }
 #grammar .nav.paged { margin-top:18px; padding-top:0; }
 #grammar .invite.active .next { margin-top:16px; }
 #card .card-panel .verb-line { font-size:26px; }
 #card .card-panel .meaning { font-size:16px; }
 .image-canvas { transform:none; }
}

/* Sentence translations share one slot, so the two-second switch does not move the layout. */
.sentence-toggle { display:inline-grid; width:100%; font:inherit; color:inherit; text-align:inherit; line-height:inherit; border-radius:4px; cursor:pointer; }
.sentence-toggle > span { grid-area:1/1; min-width:0; transition:opacity .18s ease; }
.sentence-toggle .sentence-en { opacity:0; visibility:hidden; }
.sentence-toggle.show-english .sentence-de { opacity:0; visibility:hidden; }
.sentence-toggle.show-english .sentence-en { opacity:1; visibility:visible; }
#grammar .g-example.sentence-toggle { display:inline-grid; cursor:pointer; }
@media (prefers-reduced-motion:reduce) { .sentence-toggle > span { transition:none; } }
/* One compact progress pill, matching Home on every layout. */
:is(#p1,#p2) .scene-header .scene-position { display:inline-flex; order:0; flex:0 0 auto; align-items:center; justify-content:center; width:auto; min-width:64px; height:44px; padding:8px 14px; gap:0; border-radius:22px; background:var(--panel-70); font-size:13px; line-height:1.4; font-weight:700; }
:is(#p1,#p2) .scene-position progress { position:absolute; width:1px; height:1px; clip:rect(0,0,0,0); overflow:hidden; }