/* Content-sized practice panels with compact pop-art accents. */
:root{background:#fffaf2;color:#221b35;font-size:16px}html{scroll-padding-bottom:calc(112px + env(safe-area-inset-bottom,0px));scroll-padding-top:16px}body{background:#fffaf2;background-image:none;padding-bottom:calc(112px + env(safe-area-inset-bottom,0px));min-height:100dvh}.site-header{height:64px;max-width:760px;padding:8px 20px;border-bottom:0;gap:12px;background:transparent}.brand{font-size:22px;letter-spacing:-.9px;white-space:nowrap}.brand-mark{width:30px;height:32px;font-size:23px;box-shadow:2px 2px 0 #221b35}.brand-dot{font-size:27px}.character-stage{position:static;flex:none;width:44px;height:42px;margin-left:auto}.character-stage svg{max-height:42px;animation-duration:.24s}main{max-width:760px;margin:0 auto;padding:8px 20px 0}.practice{height:auto;min-height:0;max-height:none;display:grid;grid-template-rows:auto auto;align-content:start;align-items:start;gap:14px;padding:0;background:transparent;border:0;box-shadow:none;border-radius:0;scroll-margin-top:12px}.sentence-area{display:block;min-height:0;height:auto;max-height:clamp(9rem,36dvh,22rem);overflow:auto;overscroll-behavior:contain;margin:0;padding:15px 17px;background:#fff09a;border:2px solid #221b35;border-radius:13px;box-shadow:3px 3px 0 #221b35;scrollbar-width:thin;scrollbar-color:#ae96bd transparent}.sentence-area:focus-visible{outline:3px solid #4b59e5;outline-offset:2px}#english{font-family:Arial,Helvetica,sans-serif;font-size:clamp(1.9rem,5.8vw,2.5rem);font-weight:700;line-height:1.35;letter-spacing:-.5px;overflow-wrap:anywhere;margin:0;color:#221b35}.translation-slot{height:auto;min-height:0;flex:none;margin:0;padding:0;overflow:auto;overscroll-behavior:contain;max-height:clamp(9rem,36dvh,22rem);border:2px solid #221b35;border-radius:13px;background:#ffdce8;box-shadow:3px 3px 0 #221b35;scrollbar-width:thin;scrollbar-color:#ae96bd transparent}.translation-slot .translation{height:auto;min-height:0;margin:0;padding:13px 17px;border:0;border-radius:0;background:transparent}.translation-label{font-size:.7rem;line-height:1.4;letter-spacing:1px;color:#674d76}.translation>p{font-family:Arial,Helvetica,sans-serif;font-size:clamp(1.8rem,5.5vw,2.35rem);font-weight:600;line-height:1.38;letter-spacing:-.3px;margin:8px 0 0;color:#221b35;overflow-wrap:anywhere}.translation-placeholder{height:auto;min-height:0;background:transparent;font-size:1rem;line-height:1.5;color:#74627e;padding:20px;border:0}.next-dock{display:block;max-width:720px;width:calc(100% - 40px);bottom:calc(8px + env(safe-area-inset-bottom,0px) + var(--keyboard-offset,0px));padding:8px 0 0;background:#fffaf2f5;border:0;box-shadow:none;border-radius:0;pointer-events:auto}.action-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;align-items:stretch}.action-row>.target-toggle,.action-row>.next,.action-row>.listen-button{width:auto;min-width:0;min-height:48px;height:auto;margin:0;padding:11px 8px;border:1.5px solid #221b35;border-radius:10px;box-shadow:none;font-size:1rem;line-height:1.3;font-weight:700;justify-content:center;gap:8px}.action-row>.listen-button{background:#ffd7e1;color:#221b35}.action-row>.listen-button:hover{background:#ffc1d0}.action-row>.target-toggle{background:#ffe989}.action-row>.next{background:#4b59e5;color:#fff}.action-row>.next:hover{transform:none;background:#3b43be}#speech-status{display:block;margin:6px 1px 0;max-width:none;min-height:1.2rem;font-size:.72rem;line-height:1.35;color:#65566c;overflow-wrap:anywhere}.word{cursor:help;text-underline-offset:5px}.word-popover.meaning-only{font-size:1rem;max-width:min(320px,calc(100vw - 24px));box-shadow:2px 2px 0 #221b35}.word-popover.meaning-only #word-meaning{font-size:1rem;line-height:1.45}
.options-menu{flex:none}.options-menu>summary{display:flex;align-items:center;gap:6px;min-height:44px;padding:8px 10px;border:1px solid #d4c7dc;border-radius:10px;background:#fff;font-size:.9rem;font-weight:600;color:#221b35}.options-menu[open]>summary{background:#eee5fa}.options-panel{position:fixed;z-index:130;right:max(16px,calc((100vw - 720px)/2));top:62px;width:min(360px,calc(100vw - 32px));max-height:calc(100dvh - 178px - env(safe-area-inset-bottom,0px));overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;background:#fffdf8;padding:18px;border:1.5px solid #d4c7dc;border-radius:14px;box-shadow:0 8px 32px #221b3520}.options-panel h2{font-size:1.1rem;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 15px}.source-number{font-size:.65rem;color:#6d5b75}.options-panel .direction-toggle,.options-panel .word-box-open{width:100%;justify-content:space-between;min-height:46px;font-size:.9rem;border:1px solid #d4c7dc;border-radius:8px;box-shadow:none;margin:10px 0}.options-panel .direction-toggle{background:#e9f4d9}.options-panel .word-box-open{background:#fff}.options-panel .journey{padding:12px 0 0}.options-panel .journey-top{font-size:.75rem}.options-panel .journey>p{font-size:.75rem;line-height:1.5}.options-panel .source-details{margin:16px 0 0}.options-panel .source-details>summary{font-size:.8rem}.options-panel footer{display:block;padding:14px 0 0;font-size:.7rem}.options-panel .about summary{font-size:.8rem}.options-panel .about p{font-size:.8rem}.footer-mark{display:none}.word-box{margin:20px 0 0;box-shadow:none;border:1px solid #d4c7dc;border-radius:14px;padding:20px}.word-box h2{font-size:1.6rem}.word-box-open>span{background:#f9d5e0}.word-toast{bottom:calc(110px + env(safe-area-inset-bottom,0px) + var(--keyboard-offset,0px))}.error{margin:12px 0;font-size:1rem}.options-panel:focus-within{scroll-behavior:auto}
@media(min-width:760px){.site-header{height:76px;padding-top:14px}.character-stage{width:54px;height:48px}.character-stage svg{max-height:48px}main{padding-top:10px}.practice{height:auto}.options-panel{top:74px}.sentence-area{padding:19px 23px}.translation-slot .translation{padding:17px 23px}.translation-placeholder{padding:15px 23px}}
@media(max-width:360px){.site-header{padding-inline:14px;gap:6px}.brand{font-size:19px;gap:6px}.brand-mark{width:25px;height:28px;font-size:21px}.character-stage{width:34px;height:36px}.options-menu>summary{font-size:.8rem;padding:8px}main{padding-inline:14px}.sentence-area{padding:16px}.translation-slot .translation{padding:15px 16px}.next-dock{width:calc(100% - 28px)}.action-row{gap:6px}.action-row>.target-toggle,.action-row>.next,.action-row>.listen-button{font-size:.9rem;padding-inline:6px}#english{font-size:1.9rem}.translation>p{font-size:1.8rem}}
@media(max-height:480px) and (min-width:541px){.site-header{height:54px}.practice{height:auto;min-height:0;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto;align-items:start}.sentence-area,.translation-slot{max-height:clamp(7rem,calc(100dvh - 160px),18rem);min-height:0}.options-panel{top:52px;max-height:calc(100dvh - 154px)}}
@media(prefers-reduced-motion:reduce){.character-stage svg,.practice.animating #sentence-area{animation:none!important}}

/* The colour stays; the large decorative stage does not return. */
.character-stage{background:#c7ed75;border:1.5px solid #221b35;border-radius:12px;box-shadow:2px 2px 0 #221b35;transform:rotate(5deg);padding:2px}.brand-mark{background:#ffe76b;transform:rotate(-7deg)}.options-menu>summary{border:1.5px solid #221b35;box-shadow:2px 2px 0 #221b35;background:#eee4ff}.action-row>.target-toggle,.action-row>.next,.action-row>.listen-button{border:2px solid #221b35;box-shadow:2px 2px 0 #221b35}.action-row>.target-toggle{background:#ffe76b}.action-row>.listen-button{background:#ff9cba}.action-row>.listen-button[aria-pressed=true]{background:#c7ed75}.word:hover,.word[aria-expanded=true],.word:focus-visible{background:#ffc4d6}.translation-slot .word:hover,.translation-slot .word[aria-expanded=true]{background:#ffe76b}

/* The boxed first word is part of the title, not a duplicate logo. */
.brand-mark{letter-spacing:0;flex-shrink:0}

/* Compact boxed first word for Another Sentence. */
.brand-mark{width:auto;min-width:38px;padding:0 5px;font-size:17px;letter-spacing:-.6px}.brand{gap:8px}
@media(max-width:360px){.brand{font-size:17px;gap:6px}.brand-mark{min-width:34px;font-size:15px;padding:0 4px}}
@media(min-width:361px) and (max-width:540px){.site-header{gap:8px;padding-inline:16px}.brand{font-size:18px}.character-stage{width:38px}.options-menu>summary{padding-inline:8px}}

/* Visual, silent mini posters; fit-only placement remains outside page flow. */
.house-ad{position:absolute;z-index:1;min-width:0;margin:0;padding:8px 10px;background:var(--ad-paper,#e8e0ff);border:2px solid #221b35;border-radius:12px;box-shadow:2px 2px 0 #221b35}
.house-ad-label{position:absolute;top:5px;right:9px;color:#574367;font-size:.6rem;font-weight:700;line-height:1.3;letter-spacing:.25px}
.house-ad-link{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:60px;color:#221b35;text-decoration:none}
.house-ad-art{display:block;flex:none;width:84px;height:62px;line-height:0}
.house-ad-art svg{display:block;width:100%;height:100%}
.house-ad-copy{display:flex;flex-wrap:wrap;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;min-width:0;flex:1;padding-top:12px}
.house-ad-copy strong{font-size:1.05rem;line-height:1.15;font-weight:900;letter-spacing:-.3px}
.house-ad-copy>span{font-size:.75rem;line-height:1.3;color:#51405f;overflow-wrap:anywhere}
.house-ad-arrow{display:grid;place-items:center;flex:none;width:26px;height:26px;border:1.5px solid #221b35;border-radius:50%;background:#ffe76b;font-size:1.1rem}
.house-ad-stamp{font-size:1.25rem;line-height:1;align-self:flex-end;margin-bottom:3px;color:#4b59e5}
.house-ad-link:hover .house-ad-arrow{background:#c7ed75}
.house-ad-link:focus-visible{outline:3px solid #4b59e5;outline-offset:3px;border-radius:4px}
.lesson-set-controls{display:grid;grid-template-columns:1fr 1fr;gap:7px}.lesson-set-controls #set-mixed{grid-column:1/-1}
.lesson-set-controls button{min-height:44px;padding:7px;font-size:.8rem;line-height:1.35;color:#221b35;background:white;border:1.5px solid #d4c7dc;border-radius:8px;font-weight:700}
.lesson-set-controls button[aria-pressed=true]{background:#ffe76b;border-color:#221b35;box-shadow:2px 2px 0 #221b35}
.lesson-set-note{margin:9px 0 13px;font-size:.72rem;line-height:1.4;color:#65566c}
@media(max-width:360px){.house-ad{padding-inline:8px}.house-ad-link{gap:7px}.house-ad-art{width:70px;height:58px}.house-ad-copy strong{font-size:.95rem}.house-ad-copy>span{font-size:.72rem}.house-ad-stamp{display:none}}

/* Use existing blank space for a larger visual; the fit guard chooses the size. */
.house-ad[data-size=large]{padding:14px 16px;border-radius:15px}
.house-ad[data-size=large] .house-ad-link{min-height:116px;gap:18px}
.house-ad[data-size=large] .house-ad-art{width:158px;height:116px}
.house-ad[data-size=large] .house-ad-copy strong{font-size:1.5rem;line-height:1.15}
.house-ad[data-size=large] .house-ad-copy>span{font-size:.9rem;line-height:1.4}
.house-ad[data-size=large] .house-ad-label{font-size:.65rem;right:14px;top:7px}
.house-ad[data-size=medium]{padding:10px 12px}
.house-ad[data-size=medium] .house-ad-link{min-height:88px;gap:12px}
.house-ad[data-size=medium] .house-ad-art{width:120px;height:88px}
.house-ad[data-size=medium] .house-ad-copy strong{font-size:1.2rem}
.house-ad[data-size=medium] .house-ad-copy>span{font-size:.8rem}
@media(max-width:540px){.house-ad[data-size=large]{padding:12px}.house-ad[data-size=large] .house-ad-link{gap:12px}.house-ad[data-size=large] .house-ad-art{width:126px;height:96px}.house-ad[data-size=large] .house-ad-copy strong{font-size:1.25rem}.house-ad[data-size=large] .house-ad-copy>span{font-size:.83rem}.house-ad[data-size=large] .house-ad-stamp{display:none}.house-ad[data-size=medium] .house-ad-art{width:100px;height:76px}}
@media(max-width:360px){.house-ad[data-size=large] .house-ad-art{width:104px;height:80px}.house-ad[data-size=large] .house-ad-copy strong{font-size:1.15rem}.house-ad[data-size=large] .house-ad-copy>span{font-size:.78rem}}

/* Locally hosted photographs, official product links, and accessible credits. */
.house-ad.is-photo{background:#fffdf8}
.house-ad-art img{display:block;width:100%;height:100%;object-fit:contain;border-radius:7px;background:#fff}
.house-ad-cta{display:block;margin-top:3px;font-size:.7rem!important;font-weight:800;color:#4b59e5!important}
.house-ad-credit{display:block;width:max-content;max-width:100%;margin:4px 0 0 auto;font-size:.6rem;line-height:1.4;color:#6b5874;text-underline-offset:2px}
.house-ad[data-size=large] .house-ad-art{width:180px;height:132px}
.house-ad[data-size=large] .house-ad-copy strong{font-size:1.35rem}
@media(max-width:540px){.house-ad[data-size=large] .house-ad-art{width:136px;height:106px}.house-ad[data-size=large] .house-ad-copy strong{font-size:1.1rem}}
@media(max-width:360px){.house-ad[data-size=large] .house-ad-art{width:112px;height:90px}.house-ad[data-size=large] .house-ad-copy strong{font-size:1rem}}

/* Photo-first ads: more of the available card belongs to the product itself.
   The fit guard still chooses a measured size or hides the entire card. */
.house-ad.is-photo{display:grid;grid-template-columns:minmax(0,1fr) max-content;column-gap:8px;row-gap:5px;padding:6px 8px}
.house-ad.is-photo .house-ad-link{grid-column:1/-1;grid-row:1;gap:10px;min-height:0}
.house-ad.is-photo .house-ad-art{width:62%;height:96px;min-width:0}
.house-ad.is-photo .house-ad-copy{padding-top:0;gap:4px}
.house-ad.is-photo #house-ad-caption{display:none}
.house-ad.is-photo .house-ad-copy strong{overflow-wrap:anywhere}
.house-ad.is-photo .house-ad-label{position:static;grid-column:1;grid-row:2;align-self:center;font-size:.625rem;line-height:1.35;letter-spacing:0}
.house-ad.is-photo .house-ad-credit{grid-column:2;grid-row:2;align-self:center;margin:0;font-size:.625rem;line-height:1.35}
.house-ad.is-photo[data-size=large]{padding:6px 8px}
.house-ad.is-photo[data-size=large] .house-ad-art{width:62%;height:176px}
.house-ad.is-photo[data-size=medium]{padding:6px 8px}
.house-ad.is-photo[data-size=medium] .house-ad-art{width:62%;height:136px}
@media(max-width:540px){.house-ad.is-photo .house-ad-art{height:86px}.house-ad.is-photo .house-ad-link{gap:8px}.house-ad.is-photo[data-size=large] .house-ad-art{height:148px}.house-ad.is-photo[data-size=medium] .house-ad-art{height:116px}}

/* Approved character and rounded, level wordmark share the same width. */
@font-face{font-family:'AS Nunito';src:url('./assets/fonts/nunito-variable.ttf') format('truetype');font-style:normal;font-weight:200 1000;font-display:swap}
.site-header{height:96px}
.site-header .brand{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;flex:none;width:8.716em;transform:none;color:#221b35;font:900 23px/1.1 'AS Nunito',Arial,sans-serif;font-kerning:none;letter-spacing:0;white-space:nowrap}
.brand-dreamer{display:block;width:100%;height:auto;aspect-ratio:1675/510;flex:none;overflow:hidden;margin:0;transform:none}
.brand-wordmark{display:block;white-space:nowrap;transform:none;text-align:center;color:#731930;margin-top:-.4em}
.options-panel{top:94px}
@media(min-width:760px){.site-header{height:104px}.site-header .brand{font-size:24px}.options-panel{top:102px}}
@media(max-width:360px){.site-header{height:80px}.site-header .brand{font-size:19px}.options-panel{top:78px}}
@media(max-height:480px) and (min-width:541px){.site-header{height:76px}.site-header .brand{font-size:18px}.options-panel{top:74px}.sentence-area,.translation-slot{max-height:clamp(7rem,calc(100dvh - 182px),18rem)}}

/* Approved POV video: full 2:1 canvas, no crop and no audio. */
:root,body{background:#fefefe;background-image:none}
.next-dock{background:#fefefef5}
.brand-pov{display:block;width:110%;height:auto;aspect-ratio:2/1;object-fit:contain;flex:none;background:#fefefe}
.brand:has(.brand-pov) .brand-dreamer{display:none}
.site-header{height:auto;min-height:96px;padding-top:8px;padding-bottom:8px}
#english{font-size:calc(clamp(1.9rem,5.8vw,2.5rem) - 2pt)}
.translation>p{font-size:calc(clamp(1.8rem,5.5vw,2.35rem) - 2pt)}
@media(max-width:360px){#english{font-size:calc(1.9rem - 2pt)}.translation>p{font-size:calc(1.8rem - 2pt)}}

/* Give the 10% larger uncropped POV canvas its own horizontal breathing room. */
.site-header .brand{margin-inline:0 11px}
@media(max-width:360px){.site-header{padding-inline:12px;gap:6px}.character-stage{width:30px}}