:root{color-scheme:light;--page:#e9edf0;--card:#f9fafb;--ink:#23313b;--muted:#566674;--line:#b9c5ce;--accent:#3b586e;--selection:#dce6ed;--bubble:#f0f4f7;--sidebar:#25323d;--sidebar-text:#dce5ed;--nav-active:#3b4c5a;--success:#216440;--success-bg:#e5f3ea;--error:#a32d37;--error-bg:#fbe9e9;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
:root[data-theme=warm]{--page:#e7e2dc;--card:#f5f2ed;--ink:#302c35;--muted:#665d69;--line:#c3b9ae;--accent:#624d6d;--selection:#e7dfea;--bubble:#efebe5;--sidebar:#302938;--sidebar-text:#e7dfec;--nav-active:#4b3f54}
:root[data-theme=dark]{color-scheme:dark;--page:#20262d;--card:#2a323c;--ink:#edf0f4;--muted:#b7c1cd;--line:#657383;--accent:#a7c3d9;--selection:#3b4d5d;--bubble:#303c48;--sidebar:#1a2027;--sidebar-text:#d9e2eb;--nav-active:#354452;--success:#a1e0b9;--success-bg:#203f32;--error:#ffb5b9;--error-bg:#492c32}
*{box-sizing:border-box}body{margin:0;background:var(--page);color:var(--ink)}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{font:inherit;cursor:pointer;min-height:44px;border:1px solid var(--line);border-radius:12px;padding:10px 16px;color:var(--ink);background:var(--card)}button:disabled{cursor:default;opacity:.55}button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}a{color:var(--accent)}
.preview-toolbar{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px max(20px,env(safe-area-inset-right)) 12px max(20px,env(safe-area-inset-left));background:var(--card);border-bottom:1px solid var(--line)}.preview-toolbar>div:first-child{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}.preview-toolbar a{font-size:13px;text-decoration:none}.preview-toolbar strong{font-size:15px}.preview-toolbar small{flex-basis:100%;font-size:12px;color:var(--muted)}.theme-picker{display:flex;gap:6px;flex-shrink:0}.theme-picker button{display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:13px;font-weight:650;white-space:nowrap}.theme-picker button[aria-pressed=true]{background:var(--selection);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.swatch{display:block;width:16px;height:16px;border:1px solid #78828d;border-radius:50%}.swatch.neutral{background:#e9edf0}.swatch.warm{background:#e7e2dc}.swatch.dark{background:#20262d}
.preview-shell{display:grid;grid-template-columns:230px minmax(0,1fr);min-height:calc(100dvh - 86px)}.sidebar{background:var(--sidebar);color:var(--sidebar-text);padding:24px 16px;display:flex;flex-direction:column;gap:32px}.wordmark{font-size:25px;font-weight:850;letter-spacing:-.035em;white-space:nowrap;color:#fff}.wordmark span:last-child{color:#ffdc91}.sample-nav{display:grid;gap:8px;font-size:15px}.sample-nav small{font-size:10px;letter-spacing:.1em;padding:14px 12px 4px}.sample-nav div{padding:14px 12px;border-radius:12px}.sample-nav .current{background:var(--nav-active);box-shadow:inset 3px 0 #ffdc91;color:#fff}.sidebar-note{margin-top:auto;font-size:13px;line-height:1.7}.sidebar-note small{font-size:11px}
main{width:100%;max-width:950px;margin:0 auto;padding:28px clamp(20px,4vw,52px) max(28px,calc(env(safe-area-inset-bottom) + 16px))}.lesson-heading{display:flex;justify-content:space-between;align-items:center;gap:16px}.eyebrow{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--muted)}h1{font-size:clamp(23px,3vw,32px);line-height:1.2;letter-spacing:-.035em;margin:6px 0 12px}#counter{white-space:nowrap;font-size:13px;color:var(--muted)}progress{display:block;width:100%;height:6px;border:0;border-radius:8px;overflow:hidden;background:var(--line);accent-color:var(--accent)}progress::-webkit-progress-bar{background:var(--line)}progress::-webkit-progress-value{background:var(--accent)}progress::-moz-progress-bar{background:var(--accent)}
.nova{display:grid;grid-template-columns:76px minmax(0,1fr);gap:18px;align-items:center;margin:24px 0}.nova img{width:76px;height:95px;object-fit:contain;transform:scaleX(-1)}.nova>div{position:relative;padding:16px 20px;border:1px solid var(--accent);border-radius:18px;background:var(--card)}.nova strong{font-size:11px;color:var(--accent)}.nova p{margin:5px 0 0;font-size:15px;line-height:1.5;min-height:45px}.exercise{background:var(--card);padding:clamp(20px,3vw,30px);border:1px solid var(--line);border-radius:20px}h2{font-size:clamp(18px,2vw,22px);line-height:1.5;margin:10px 0 18px;font-weight:650}.dialogue{background:var(--bubble);border:1px solid var(--line);border-radius:14px 14px 14px 4px;padding:14px 18px;max-width:380px}.dialogue span,.dialogue small{font-size:12px;color:var(--muted)}.dialogue p{font-size:25px;line-height:1.5;margin:6px 0}.answer-label{font-size:12px;color:var(--muted);margin:20px 0 8px}.answers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.answers button{min-height:60px;font-size:20px;word-break:keep-all}.answers button[aria-pressed=true]{background:var(--selection);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.answers button[data-result=correct]{background:var(--success-bg);border-color:var(--success);color:var(--success);box-shadow:inset 0 0 0 1px var(--success);opacity:1}.answers button[data-result=wrong]{background:var(--error-bg);border-color:var(--error);color:var(--error);box-shadow:inset 0 0 0 1px var(--error);opacity:1}.vocabulary{font-size:13px;color:var(--muted);margin:18px 0 0}.lesson-actions{display:flex;justify-content:space-between;gap:12px;padding-top:16px}.primary{background:var(--accent);border-color:var(--accent);color:var(--card);min-width:150px;font-weight:650}.secondary{background:transparent}.preview-note{font-size:12px;color:var(--muted);text-align:center;margin:18px 0 0}
@media(max-width:1000px){.preview-shell{grid-template-columns:190px minmax(0,1fr)}.wordmark{font-size:21px}.sidebar{padding:24px 12px}main{padding:20px}.preview-toolbar{flex-wrap:wrap}.answers{grid-template-columns:1fr}.answers button{min-height:48px}.nova{margin:18px 0}}
@media(max-width:700px){.sidebar{display:none}.preview-shell{display:block}.preview-toolbar{position:static;gap:12px}.theme-picker{width:100%;flex-wrap:wrap}.theme-picker button{flex:1;justify-content:center}.nova{grid-template-columns:56px minmax(0,1fr);gap:10px}.nova img{width:56px;height:75px}.nova>div{padding:12px}.nova p{font-size:14px}main{padding:20px 16px max(28px,env(safe-area-inset-bottom))}}