:root{color:var(--ink);background:var(--canvas);font-synthesis:none;--canvas:#f8f4eb;--surface:#fffdf6;--ink:#263e35;--muted:#536658;--accent:#246957;--accent-soft:#e5f1e7;--border:#ccd8c8;--warm:#8e541f;--warm-soft:#fff0ce;--danger:#a23d2a;--danger-soft:#fff0e9;--focus:#a24b21;--white:#fff;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-md:1.125rem;--text-lg:1.375rem;--text-xl:1.75rem;--text-display:2.25rem;--radius-sm:12px;--radius-md:20px;--radius-lg:28px;--radius-round:999px;--line:1px;--line-strong:2px;--focus-width:3px;--target:44px;--nav-target:56px;--page-max:1280px;--board-max:1150px;--sidebar:240px;--image-parent:160px;--image-hero:144px;--image-topic:44px;--image-mobile:132px;--board-min:42rem;--mobile-card:13rem;--duration:.16s;--ease:ease-out;font-family:ui-rounded,SF Pro Rounded,Segoe UI,system-ui,sans-serif;line-height:1.5}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{cursor:pointer;color:inherit;border:0}button:disabled{cursor:default;opacity:.55}button:focus-visible,a:focus-visible{outline:var(--focus-width) solid var(--focus);outline-offset:var(--space-1)}a{color:inherit;text-decoration:none}h1,h2,p{margin:0}img{max-width:100%;display:block}.site-header{max-width:var(--page-max);padding:var(--space-4) var(--space-8);border-bottom:var(--line) solid var(--border);justify-content:space-between;align-items:center;gap:var(--space-3);margin:auto;display:flex}.wordmark{min-height:var(--target);font-size:var(--text-lg);align-items:center;gap:var(--space-2);font-weight:750;display:flex}.brand-mark{font-size:var(--text-xl);color:var(--accent)}.parent-badge{color:var(--muted);font-size:var(--text-xs);background:var(--accent-soft);padding:var(--space-2) var(--space-3);border-radius:var(--radius-round)}.parent-main{max-width:var(--page-max);padding:0 var(--space-8) var(--space-8);margin:auto}.hero{justify-content:space-between;align-items:center;gap:var(--space-6);padding:var(--space-6) 0;display:flex}.eyebrow,.step-label{font-size:var(--text-xs);color:var(--muted);margin-bottom:var(--space-2);font-weight:750}.hero h1{font-size:var(--text-display);font-weight:750;line-height:1.2}.hero h1 span{color:var(--accent)}.hero p:not(.eyebrow){color:var(--muted);font-size:var(--text-sm);margin-top:var(--space-3)}.hero-art{width:var(--image-hero);margin-right:var(--space-10);flex-shrink:0;position:relative}.hero-art img{border-radius:var(--radius-round)}.bubble{right:calc(-1 * var(--space-10));top:var(--space-2);background:var(--surface);border:var(--line) solid var(--border);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);font-size:var(--text-sm);position:absolute}.hero-star{display:none}.lesson-layout{grid-template-columns:var(--sidebar) minmax(0,1fr);gap:var(--space-6);align-items:start;display:grid}.topic-panel{padding-top:var(--space-3)}.topic-panel h2{font-size:var(--text-md);margin-bottom:var(--space-4)}.topic-list{gap:var(--space-2);flex-direction:column;display:flex}.topic-button{align-items:center;gap:var(--space-3);padding:var(--space-3);min-height:var(--nav-target);border-radius:var(--radius-md);text-align:left;border:var(--line-strong) solid transparent;background:0 0;display:flex}.topic-button img{width:var(--image-topic);height:var(--image-topic);border-radius:var(--radius-sm)}.topic-button>span:first-of-type{font-weight:650;font-size:var(--text-sm);flex:1}.topic-button small{font-weight:400;font-size:var(--text-xs);color:var(--muted);margin-top:var(--space-1);display:block}.topic-button>span:last-child{color:var(--accent)}.topic-button.selected{background:var(--accent-soft);border-color:var(--accent)}.parent-note{background:var(--accent-soft);border-radius:var(--radius-md);margin-top:var(--space-6);padding:var(--space-5)}.parent-note>span{font-size:var(--text-lg);margin-bottom:var(--space-2);color:var(--accent);display:block}.parent-note strong{font-size:var(--text-sm)}.parent-note p{font-size:var(--text-sm);color:var(--muted);margin-top:var(--space-2)}.lesson-panel{background:var(--surface);border:var(--line) solid var(--border);border-radius:var(--radius-lg);padding:var(--space-6)}.panel-heading{justify-content:space-between;align-items:center;gap:var(--space-4);margin-bottom:var(--space-4);display:flex}.panel-heading h2{font-size:var(--text-xl)}.text-button{color:var(--accent);font-size:var(--text-sm);min-height:var(--target);padding:var(--space-2);text-underline-offset:var(--space-1);background:0 0;text-decoration:underline}.sentence-options{gap:var(--space-6);padding:var(--space-4) 0;border-block:var(--line) solid var(--border);flex-wrap:wrap;display:flex}.sentence-options fieldset{border:0;margin:0;padding:0}.sentence-options legend{font-size:var(--text-sm);color:var(--muted);margin-bottom:var(--space-2);font-weight:650}.option-row{gap:var(--space-2);flex-wrap:wrap;display:flex}.option-button{padding:var(--space-2) var(--space-3);min-height:var(--target);border-radius:var(--radius-sm);font-size:var(--text-sm);color:var(--muted);background:var(--canvas);border:var(--line-strong) solid var(--border)}.option-button.selected{color:var(--accent);background:var(--accent-soft);border-color:var(--accent)}.selection-grid{gap:var(--space-4);margin-top:var(--space-5);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.selection-card{border:var(--line-strong) solid var(--border);border-radius:var(--radius-md);padding-bottom:var(--space-2);background:var(--surface);transition:border-color var(--duration) var(--ease);overflow:hidden}.selection-card.chosen{border-color:var(--accent);background:var(--surface)}.select-picture{width:100%;padding:var(--space-3) var(--space-3) 0;background:0 0;flex-direction:column;align-items:center;display:flex;position:relative}.select-picture img{width:100%;height:var(--image-parent);object-fit:contain;border-radius:var(--radius-sm)}.select-picture strong{font-size:var(--text-base);margin-top:var(--space-2)}.selection-tick{top:var(--space-3);right:var(--space-3);height:var(--space-8);width:var(--space-8);background:var(--surface);border:var(--line) solid var(--accent);border-radius:var(--radius-round);font-size:var(--text-base);place-items:center;display:grid;position:absolute}.chosen .selection-tick{background:var(--accent);color:var(--white)}.selection-card>p{font-size:var(--text-sm);color:var(--muted);text-align:center;padding:var(--space-1) var(--space-3) var(--space-2);min-height:var(--space-10)}.phrase-button{min-height:var(--target);font-size:var(--text-sm);color:var(--accent);padding:var(--space-2) var(--space-3);background:0 0;margin:auto;display:block}.card-tools{padding-inline:var(--space-1);gap:var(--space-1);display:flex}.card-tools .phrase-button{min-width:var(--target);font-size:var(--text-xs);padding:var(--space-1);flex:1}.phrase-button span{padding-left:var(--space-2)}.phrase-list{padding:0 var(--space-4);font-size:var(--text-sm);margin:0;list-style:none}.phrase-list li{padding:var(--space-2) 0;border-top:var(--line) solid var(--border)}.phrase-list small{color:var(--muted);font-size:var(--text-xs);margin-bottom:var(--space-1);display:block}.audio-readiness{align-items:center;gap:var(--space-3);margin-top:var(--space-5);padding:var(--space-4);border-radius:var(--radius-md);background:var(--warm-soft);color:var(--warm);display:flex}.audio-readiness>span{font-size:var(--text-lg)}.audio-readiness>div{flex:1}.audio-readiness strong{font-size:var(--text-sm)}.audio-readiness p{font-size:var(--text-sm);margin-top:var(--space-1)}.small-button{background:var(--surface);border:var(--line) solid var(--warm);border-radius:var(--radius-sm);font-size:var(--text-sm);padding:var(--space-2);min-height:var(--target)}.start-bar{justify-content:space-between;align-items:center;gap:var(--space-4);border-top:var(--line) solid var(--border);margin-top:var(--space-5);padding-top:var(--space-5);display:flex}.start-bar strong{font-size:var(--text-base)}.start-bar p{font-size:var(--text-sm);color:var(--muted);margin-top:var(--space-1)}.primary-button{background:var(--accent);color:var(--white);border-radius:var(--radius-md);padding:var(--space-4) var(--space-6);min-height:var(--nav-target);font-size:var(--text-base);font-weight:750}.primary-button span{padding-left:var(--space-3)}.site-footer{text-align:center;padding-top:var(--space-6);color:var(--muted);font-size:var(--text-xs)}.notice,.inline-message{color:var(--danger);font-size:var(--text-sm);margin:var(--space-3) 0}.play-shell{max-width:var(--board-max);height:100svh;min-height:var(--board-min);gap:var(--space-3);padding:max(var(--space-4),env(safe-area-inset-top)) max(var(--space-5),env(safe-area-inset-right)) max(var(--space-4),env(safe-area-inset-bottom)) max(var(--space-5),env(safe-area-inset-left));-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;grid-template-rows:auto auto minmax(0,1fr) auto;margin:auto;display:grid}.play-header{justify-content:space-between;align-items:center;gap:var(--space-3);display:flex}.back-button{background:var(--accent-soft);padding:var(--space-2) var(--space-4);min-height:var(--nav-target);border:var(--line) solid var(--border);border-radius:var(--radius-md);font-size:var(--text-sm)}.play-heading{justify-content:space-between;align-items:center;column-gap:var(--space-4);row-gap:var(--space-1);flex-wrap:wrap;display:flex}.play-heading .eyebrow{color:var(--accent);font-size:var(--text-sm);margin:0}.play-heading h1{font-size:var(--text-lg)}.play-heading>p:last-child{width:100%;color:var(--muted);font-size:var(--text-sm)}.play-grid{gap:var(--space-3);grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);min-height:0;display:grid}.picture-card{border-radius:var(--radius-lg);min-width:0;min-height:0;padding:var(--space-2) var(--space-3);background:var(--surface);border:var(--line-strong) solid var(--border);justify-items:center;gap:var(--space-1);transition:background-color var(--duration) var(--ease), border-color var(--duration) var(--ease);grid-template-rows:minmax(0,1fr) auto;display:grid;position:relative}.picture-card img{object-fit:contain;border-radius:var(--radius-md);width:100%;height:100%;min-height:0}.picture-card.active{border-color:var(--accent)}.picture-card[data-playback=playing]{background:var(--accent-soft);border-color:var(--accent)}.picture-card[data-playback=loading]{background:var(--warm-soft);border-color:var(--warm)}.picture-card[data-playback=error],.picture-card[data-playback=blocked]{background:var(--danger-soft);border-color:var(--danger)}.card-label{font-size:var(--text-lg);font-weight:750}.card-action{top:var(--space-2);right:var(--space-2);height:var(--space-10);min-width:var(--space-10);border-radius:var(--radius-round);background:var(--surface);color:var(--accent);font-size:var(--text-xl);pointer-events:none;place-items:center;display:grid;position:absolute}.picture-card[data-playback=playing] .card-action{background:var(--accent);color:var(--white)}.picture-card[data-playback=loading] .card-action{color:var(--warm)}.picture-card[data-playback=error] .card-action,.picture-card[data-playback=blocked] .card-action{background:var(--danger);color:var(--white)}.sentence-strip{align-items:center;gap:var(--space-3);background:var(--accent-soft);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);display:flex}.sentence-strip>span{font-size:var(--text-xl);color:var(--accent)}.sentence-strip strong{font-size:var(--text-lg)}.sentence-strip p{font-size:var(--text-xs);color:var(--muted);margin-top:var(--space-1)}.sentence-strip[data-playback=error],.sentence-strip[data-playback=blocked]{background:var(--danger-soft)}.pagination{gap:var(--space-4);justify-content:center;align-items:center;display:flex}.pagination button{min-height:var(--nav-target);min-width:var(--nav-target);background:var(--accent);color:var(--white);border-radius:var(--radius-md);padding:var(--space-2) var(--space-5);font-weight:750}.pagination .page-arrow{font-style:normal;font-size:var(--text-xl);line-height:1}.pagination .page-label{margin-inline:var(--space-2);font-size:var(--text-sm)}.pagination>span{font-size:var(--text-base);font-variant-numeric:tabular-nums;font-weight:750}@media (hover:hover){.topic-button:not(.selected):hover,.option-button:not(.selected):hover,.picture-card:not(.active):hover{background:var(--accent-soft)}.phrase-button:hover,.text-button:hover{color:var(--ink)}.primary-button:not(:disabled):hover,.pagination button:not(:disabled):hover{background:var(--ink)}}button:not(:disabled):active{filter:brightness(.94)}@media (width<=1000px){.site-header,.parent-main{padding-inline:var(--space-6)}.lesson-layout{gap:var(--space-5);grid-template-columns:1fr}.topic-panel{padding:0}.topic-panel h2{margin-bottom:var(--space-3)}.topic-list{gap:var(--space-2);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.topic-button{padding:var(--space-2);gap:var(--space-2);flex-wrap:wrap;align-content:start}.topic-button>span:first-of-type{flex-basis:calc(100% - var(--image-topic) - var(--space-2));font-size:var(--text-sm)}.topic-button small{font-size:var(--text-xs)}.topic-button>span:last-child,.parent-note{display:none}.lesson-panel{padding:var(--space-5)}}@media (width<=600px){.site-header{padding:var(--space-3) var(--space-4)}.wordmark{font-size:var(--text-md)}.parent-badge{font-size:var(--text-xs)}.parent-main{padding-inline:var(--space-4)}.hero{padding:var(--space-5) 0;gap:var(--space-3)}.hero h1{font-size:var(--text-xl)}.hero p:not(.eyebrow){font-size:var(--text-sm)}.hero-art,.desktop-break{display:none}.topic-list{grid-template-columns:repeat(2,minmax(0,1fr))}.topic-button{flex-wrap:nowrap}.lesson-panel{padding:var(--space-4);border-radius:var(--radius-md)}.panel-heading h2{font-size:var(--text-lg)}.selection-grid{gap:var(--space-2);grid-template-columns:repeat(2,minmax(0,1fr))}.select-picture img{height:var(--image-mobile)}.sentence-options{gap:var(--space-4)}.start-bar{gap:var(--space-3);flex-wrap:wrap}.primary-button{width:100%}.audio-readiness{flex-wrap:wrap}.play-shell{height:auto;min-height:100svh;padding-inline:var(--space-3)}.play-heading{display:block}.play-heading h1{font-size:var(--text-lg);margin-block:var(--space-1)}.play-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:var(--mobile-card);gap:var(--space-2)}.picture-card{padding:var(--space-2);border-radius:var(--radius-md)}.card-label,.sentence-strip strong{font-size:var(--text-md)}.pagination .page-label{display:none}}@media (width>=601px) and (height<=670px){.play-shell{height:auto;min-height:100svh}.play-grid{grid-auto-rows:var(--mobile-card)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}.parent-shell{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}