/* bundled accessibility fonts (SIL OFL licenses) */
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/atkinson-hyperlegible-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/atkinson-hyperlegible-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/atkinson-hyperlegible-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/atkinson-hyperlegible-latin-ext-700-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Lexend';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/lexend-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Lexend';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/lexend-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Lexend';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/lexend-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Lexend';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/lexend-latin-ext-600-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'OpenDyslexic';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/OpenDyslexic-Regular.woff') format('woff')}
@font-face{font-family:'OpenDyslexic';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/OpenDyslexic-Bold.woff') format('woff')}
:root{color-scheme:dark;--bg:#07111f;--bg-2:#0b1729;--panel:#101f34;--panel-2:#13273e;--line:#213955;--text:#eef5ff;--muted:#91a5bf;--accent:#31d7c5;--accent-2:#7c8cff;--danger:#ff6b81;--warning:#ffbd59;--success:#67e8a5;--shadow:0 22px 65px rgba(0,0,0,.32);--radius:22px;--sidebar:270px;--topbar:78px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.theme-aurora{--bg:#07151c;--bg-2:#0d1c27;--panel:#122631;--panel-2:#17303a;--line:#28505b;--text:#f1fffb;--muted:#9fc8c2;--accent:#65f0d4;--accent-2:#a68cff;--warning:#ffd166}
.theme-ocean{--bg:#041625;--bg-2:#071f33;--panel:#0a2940;--panel-2:#0d3550;--line:#174b68;--text:#eef9ff;--muted:#9cc9de;--accent:#26c6da;--accent-2:#7cb9ff;--warning:#ffd166}
.theme-solar{--bg:#17120b;--bg-2:#21190d;--panel:#2a2012;--panel-2:#382918;--line:#5c4325;--text:#fff4d5;--muted:#d5bd91;--accent:#ffb84a;--accent-2:#f77f57;--warning:#ffe08a}
*{box-sizing:border-box}html{background:var(--bg);scroll-behavior:smooth}body{margin:0;background:transparent;color:var(--text);min-height:100vh}button,input,select{font:inherit}button{cursor:pointer}.hidden{display:none!important}.skip-link{position:fixed;z-index:999;left:12px;top:-80px;background:var(--accent);color:#04111a;padding:10px 16px;border-radius:10px}.skip-link:focus{top:12px}.app-shell{display:grid;grid-template-columns:var(--sidebar) 1fr;min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);padding:22px 16px;border-right:1px solid color-mix(in srgb,var(--line) 80%,transparent);background:linear-gradient(180deg,var(--bg-2),var(--bg));display:flex;flex-direction:column;z-index:40}.brand-block{display:flex;align-items:center;gap:13px;padding:6px 10px 24px}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#06111e;font-weight:900;box-shadow:0 8px 26px color-mix(in srgb,var(--accent) 25%,transparent)}.brand-block strong{display:block;font-size:17px}.brand-block span{display:block;color:var(--muted);font-size:12px;margin-top:2px}.nav-list{display:grid;gap:5px}.nav-item{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:9px;width:100%;border:0;background:transparent;color:var(--muted);padding:11px 13px;border-radius:13px;text-align:left}.nav-item:hover,.nav-item:focus-visible{background:color-mix(in srgb,var(--panel) 72%,transparent);color:var(--text)}.nav-item.active{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 18%,var(--panel)),color-mix(in srgb,var(--accent-2) 10%,var(--panel)));color:var(--text);box-shadow:inset 3px 0 var(--accent)}.nav-item b{font-size:14px}.nav-item em{font-style:normal;background:var(--accent);color:#07111f;border-radius:999px;min-width:24px;padding:2px 7px;text-align:center;font-size:11px;font-weight:800}.sidebar-footer{margin-top:auto;display:grid;gap:12px}.free-badge{padding:13px;border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line));border-radius:15px;background:color-mix(in srgb,var(--accent) 6%,var(--panel));font-size:11px}.free-badge strong,.free-badge small{display:block}.free-badge small{color:var(--muted);margin-top:4px}.account-chip{border:1px solid var(--line);background:var(--panel);border-radius:15px;color:var(--text);padding:9px;display:flex;gap:10px;align-items:center;text-align:left}.account-chip>span:first-child{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#07111f;font-weight:900}.account-chip strong,.account-chip small{display:block}.account-chip small{color:var(--muted);font-size:11px}.workspace{grid-column:2;min-width:0}.topbar{height:var(--topbar);position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;padding:14px 26px;border-bottom:1px solid color-mix(in srgb,var(--line) 75%,transparent);background:var(--bg)}.global-search{flex:1;display:flex;align-items:center;gap:10px;max-width:850px;margin:auto;padding:0 14px;height:48px;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--panel) 86%,transparent);box-shadow:0 10px 30px rgba(0,0,0,.12)}.global-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}.global-search input{flex:1;background:transparent;border:0;outline:0;color:var(--text);min-width:0}.global-search kbd{border:1px solid var(--line);border-radius:7px;color:var(--muted);padding:3px 6px;font-size:11px}.top-actions{display:flex;align-items:center;gap:9px}.compact-select,select,input{border:1px solid var(--line);background:var(--bg-2);color:var(--text);border-radius:11px;padding:10px 11px;outline:0}input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}main{max-width:1600px;margin:0 auto;padding:22px 28px 28px}.view{display:none}.view.active{display:block;animation:fadeIn .22s ease}@keyframes fadeIn{from{opacity:.2;transform:translateY(4px)}to{opacity:1;transform:none}}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(30px,4vw,54px);letter-spacing:-.045em;line-height:1.02;margin-bottom:13px}h2{letter-spacing:-.025em}.eyebrow{color:var(--accent-text,var(--accent));font-weight:800;text-transform:uppercase;letter-spacing:.13em;font-size:11px;margin-bottom:8px}.hero-card{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);min-height:clamp(240px,38vh,430px);overflow:hidden;border:1px solid var(--line);border-radius:32px;background:linear-gradient(135deg,color-mix(in srgb,var(--panel) 95%,transparent),color-mix(in srgb,var(--accent-2) 9%,var(--panel)));box-shadow:var(--shadow);position:relative}.hero-card:before{content:"";position:absolute;inset:auto -100px -220px auto;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 14%,transparent),transparent 70%)}.hero-copy{padding:clamp(34px,6vw,76px);display:flex;flex-direction:column;justify-content:center;position:relative;z-index:2}.hero-copy p:not(.eyebrow){max-width:720px;color:var(--muted);line-height:1.7;font-size:16px}.hero-actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:15px}.primary-button,.secondary-button,.ghost-button,.danger-button,.icon-button{border-radius:12px;padding:11px 16px;font-weight:800;border:1px solid transparent;color:var(--text)}.primary-button{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 60%,var(--accent-2)));color:#06131e;box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 20%,transparent)}.secondary-button{background:color-mix(in srgb,var(--accent-2) 15%,var(--panel));border-color:color-mix(in srgb,var(--accent-2) 38%,var(--line))}.ghost-button,.icon-button{background:var(--panel);border-color:var(--line)}.danger-button{background:color-mix(in srgb,var(--danger) 12%,var(--panel));border-color:color-mix(in srgb,var(--danger) 35%,var(--line));color:var(--danger-text,var(--danger))}.primary-button:hover,.secondary-button:hover,.ghost-button:hover,.icon-button:hover{transform:translateY(-1px);filter:brightness(1.08)}.icon-button{width:42px;height:42px;padding:0;display:grid;place-items:center}.orbit-visual{position:relative;min-height:min(390px,34vh);align-self:stretch}.orbit{position:absolute;border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);border-radius:50%;inset:50% auto auto 50%;transform:translate(-50%,-50%) rotate(-14deg)}.o1{width:310px;height:190px}.o2{width:230px;height:330px;transform:translate(-50%,-50%) rotate(38deg);border-color:color-mix(in srgb,var(--accent-2) 30%,transparent)}.planet{position:absolute;display:grid;place-items:center;border-radius:50%;font-weight:900;color:#06121d;box-shadow:0 10px 30px rgba(0,0,0,.3)}.p1{width:92px;height:92px;left:42%;top:38%;background:linear-gradient(135deg,var(--accent),#d3fff7);font-size:26px}.p2{width:54px;height:54px;left:19%;top:28%;background:#79d9ff}.p3{width:62px;height:62px;right:16%;top:22%;background:#a995ff}.p4{width:48px;height:48px;right:18%;bottom:22%;background:#ffd166}.p5{width:58px;height:58px;left:23%;bottom:18%;background:#ff8fa3}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin:20px 0}.metric-card{padding:21px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(160deg,var(--panel),color-mix(in srgb,var(--panel-2) 88%,transparent));box-shadow:0 14px 35px rgba(0,0,0,.13)}.metric-card b{font-size:30px;letter-spacing:-.04em}.metric-card span{display:block;color:var(--muted);font-size:12px;margin-top:5px}.dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}.panel{border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(160deg,var(--panel),color-mix(in srgb,var(--panel-2) 82%,var(--panel)));padding:18px;box-shadow:0 16px 42px rgba(0,0,0,.14)}.panel-heading,.page-heading,.result-bar,.study-top,.dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.page-heading{margin-bottom:14px}.page-heading>div{max-width:850px}.page-heading h1{font-size:clamp(34px,4vw,52px)}.page-heading p:not(.eyebrow){color:var(--muted);line-height:1.6}.level-badge,.count-badge,.coin-badge{border:1px solid var(--line);background:var(--bg-2);border-radius:999px;padding:7px 11px;font-size:12px;font-weight:800}.coin-badge{color:var(--warning-text,var(--warning))}.progress-ring-row{display:flex;align-items:center;gap:22px}.progress-ring{--progress-angle:0deg;width:118px;height:118px;display:grid;place-items:center;border-radius:50%;background:conic-gradient(var(--accent) var(--progress-angle),var(--line) 0);position:relative;flex:0 0 auto}.progress-ring:after{content:"";position:absolute;inset:10px;border-radius:50%;background:var(--panel)}.progress-ring span{position:relative;z-index:1;font-weight:900}.progress-copy{flex:1}.progress-copy p{color:var(--muted)}.progress-bar,.quest-track{height:8px;border-radius:999px;background:var(--line);overflow:hidden}.progress-bar span,.quest-track span{display:block;height:100%;width:var(--progress-pct,0%);background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:inherit;transition:width .3s}.badge-strip{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}.badge{border:1px solid var(--line);border-radius:11px;padding:8px 10px;color:var(--muted);font-size:12px}.badge.unlocked{color:var(--warning-text,var(--warning));border-color:color-mix(in srgb,var(--warning) 35%,var(--line));background:color-mix(in srgb,var(--warning) 8%,transparent)}.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.quick-grid button{min-height:110px;border:1px solid var(--line);border-radius:15px;background:var(--bg-2);color:var(--text);text-align:left;padding:17px}.quick-grid b{display:block;font-size:24px;color:var(--accent-text,var(--accent))}.quick-grid span{display:block;color:var(--muted);margin-top:7px}.quest-track{margin:14px 0}.filter-panel{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));gap:10px;padding:15px;border:1px solid var(--line);border-radius:18px;background:var(--panel);margin-bottom:15px}.filter-panel label,.panel label{display:grid;gap:7px;color:var(--muted);font-size:12px;font-weight:700}.filter-panel label:has(input[type=range]){grid-template-columns:1fr auto;align-items:center}.filter-panel input[type=range]{grid-column:1/-1;padding:0;border:0;box-shadow:none}.result-bar{align-items:center;margin:12px 2px;color:var(--muted);font-size:13px}.result-bar label{display:flex;align-items:center;gap:8px}.record-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.record-card{border:1px solid var(--line);border-radius:18px;background:linear-gradient(160deg,var(--panel),color-mix(in srgb,var(--panel-2) 75%,var(--panel)));padding:18px;display:grid;gap:14px;min-width:0}.record-card:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));transform:translateY(-1px)}.record-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.record-head h3{font-size:23px;margin:0}.record-head small{display:block;color:var(--muted);margin-top:5px}.score-ring{--score:0;display:grid;place-items:center;min-width:48px;height:48px;border-radius:50%;background:conic-gradient(var(--accent) calc(var(--score)*1%),var(--line) 0);position:relative}.score-ring:after{content:"";position:absolute;inset:5px;background:var(--panel);border-radius:50%}.score-ring b{z-index:1;font-size:11px}.chip-row{display:flex;flex-wrap:wrap;gap:7px}.chip{padding:5px 8px;border-radius:999px;background:var(--bg-2);border:1px solid var(--line);font-size:11px;color:var(--muted)}.chip.ready{color:var(--success-text,var(--success))}.chip.warn{color:var(--warning-text,var(--warning))}.language-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.language-pair{border:1px solid var(--line);background:var(--bg-2);border-radius:10px;padding:8px;min-width:0}.language-pair b{display:block;font-size:10px;color:var(--muted)}.language-pair span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:3px}.card-actions{display:flex;gap:8px;margin-top:auto}.card-actions button{flex:1}.pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin:22px 0;flex-wrap:wrap}.pagination button{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:10px;padding:8px 11px}.pagination button.active{background:var(--accent);color:#07111f}.search-groups{display:grid;gap:18px}.search-group{border:1px solid var(--line);border-radius:20px;background:var(--panel);overflow:hidden}.search-group>header{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid var(--line)}.search-group>header h2{margin:0}.search-result{display:grid;grid-template-columns:1fr auto;gap:16px;padding:14px 18px;border-bottom:1px solid color-mix(in srgb,var(--line) 65%,transparent)}.search-result:last-child{border:0}.search-result p{color:var(--muted);margin:5px 0 0}.tab-list{display:flex;gap:6px;overflow:auto;padding-bottom:3px;margin-bottom:16px}.tab{border:1px solid var(--line);border-radius:11px;background:var(--panel);color:var(--muted);padding:10px 13px;white-space:nowrap}.tab.active{color:#07111f;background:var(--accent);border-color:var(--accent)}.table-shell{overflow:auto;border:1px solid var(--line);border-radius:17px}.data-table{width:100%;border-collapse:collapse;min-width:760px}.data-table th,.data-table td{padding:12px 13px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}.data-table th{position:sticky;top:0;background:var(--panel-2);z-index:2;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}.data-table tr:hover td{background:color-mix(in srgb,var(--accent) 4%,transparent)}.study-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:18px}.study-stage{min-height:min(620px,74vh);border:1px solid var(--line);border-radius:26px;padding:23px;background:radial-gradient(circle at 50% -20%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 38%),var(--panel);display:flex;flex-direction:column}.study-top{color:var(--muted)}.study-card{flex:1;min-height:min(390px,44vh);margin:14px 0;border:1px solid color-mix(in srgb,var(--accent) 32%,var(--line));border-radius:24px;background:linear-gradient(145deg,var(--bg-2),var(--panel-2));color:var(--text);display:grid;place-items:center;align-content:center;gap:18px;padding:45px;box-shadow:inset 0 1px rgba(255,255,255,.04),0 24px 55px rgba(0,0,0,.2)}.study-card span{color:var(--accent-text,var(--accent));font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:900}.study-card strong{font-size:clamp(25px,4vw,48px);line-height:1.25;max-width:850px}.study-card small{color:var(--muted)}.rating-row{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.rating-row button{border:1px solid var(--line);border-radius:13px;background:var(--bg-2);color:var(--text);padding:12px}.rating-row b,.rating-row small{display:block}.rating-row small{color:var(--muted);margin-top:3px}.rating-row .again{border-color:color-mix(in srgb,var(--danger) 45%,var(--line))}.rating-row .easy{border-color:color-mix(in srgb,var(--success) 45%,var(--line))}.study-sidebar{display:grid;gap:18px;align-content:start}.deck-list{max-height:330px;overflow:auto;margin-top:10px}.deck-item{display:grid;grid-template-columns:1fr auto;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}.deck-item small{color:var(--muted)}.deck-item button{border:0;background:transparent;color:var(--danger-text,var(--danger))}.export-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.export-grid button{font-size:12px}.dictionary-form{display:grid;grid-template-columns:200px 1fr auto;gap:10px;border:1px solid var(--line);border-radius:20px;padding:16px;background:var(--panel)}.dictionary-result{margin-top:18px}.definition-card{border:1px solid var(--line);border-radius:18px;background:var(--panel);padding:20px}.definition-card ol{line-height:1.7}.definition-card a{color:var(--accent-text,var(--accent))}.shop-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}.theme-card{border:1px solid var(--line);border-radius:22px;background:var(--panel);overflow:hidden}.theme-preview{--c1:#07111f;--c2:#31d7c5;--c3:#eef5ff;height:170px;position:relative;background:linear-gradient(135deg,var(--c1),var(--c2))}.theme-preview:after{content:"Aa";position:absolute;inset:32px;display:grid;place-items:center;border-radius:18px;background:var(--c1);color:var(--c3);font-size:44px;font-weight:900;border:1px solid color-mix(in srgb,var(--c2) 60%,transparent)}.theme-info{padding:18px}.theme-info p{color:var(--muted);min-height:45px}.theme-price{font-size:20px;font-weight:900}.theme-actions{display:flex;gap:8px;margin-top:13px}.notice{border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line));border-radius:14px;background:color-mix(in srgb,var(--accent) 6%,var(--panel));padding:13px;margin-bottom:15px;color:var(--muted)}.download-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.download-grid a{color:var(--text);text-decoration:none;border:1px solid var(--line);border-radius:20px;background:var(--panel);padding:22px}.download-grid a:hover{border-color:var(--accent)}.download-grid b{display:inline-block;color:var(--accent-text,var(--accent));margin-bottom:18px}.download-grid strong,.download-grid span{display:block}.download-grid span{color:var(--muted);margin-top:6px}.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:16px;align-items:start}.settings-grid h2{font-size:17px;margin-top:18px}.settings-grid h2:first-child{margin-top:0}.settings-grid select,.settings-grid input{width:100%}.button-stack{display:grid;gap:8px}.detail-dialog,.account-dialog{width:min(900px,calc(100vw - 28px));max-height:88vh;border:1px solid var(--line);border-radius:24px;background:var(--bg-2);color:var(--text);padding:0;box-shadow:var(--shadow)}.account-dialog{width:min(500px,calc(100vw - 28px))}.detail-dialog::backdrop,.account-dialog::backdrop{background:rgba(1,7,15,.72);backdrop-filter:blur(7px)}.dialog-head{position:sticky;top:0;z-index:3;padding:18px 20px;border-bottom:1px solid var(--line);background:var(--bg-2)}#dialog-body{padding:20px}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.detail-row{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:11px}.detail-row b{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em}.detail-row span{display:block;margin-top:5px;white-space:pre-wrap}.paradigm-group{margin:18px 0}.paradigm-group h3{color:var(--accent-text,var(--accent))}.account-tabs{display:flex;gap:6px;padding:16px 20px 0}.account-form{display:grid;gap:12px;padding:20px}.account-form label{display:grid;gap:6px;color:var(--muted)}.form-error{color:var(--danger-text,var(--danger));padding:0 20px 20px}.empty-state{text-align:center;padding:60px 20px;color:var(--muted);border:1px dashed var(--line);border-radius:20px}.toast{position:fixed;right:24px;bottom:24px;z-index:100;max-width:360px;background:var(--text);color:#07111f;border-radius:13px;padding:12px 16px;font-weight:800;box-shadow:var(--shadow);opacity:0;transform:translateY(15px);pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:none}.mobile-only{display:none}
@media(max-width:1150px){.filter-panel{grid-template-columns:repeat(3,1fr)}.record-grid{grid-template-columns:1fr}.metric-grid{grid-template-columns:repeat(2,1fr)}.shop-grid,.settings-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.study-layout{grid-template-columns:1fr}.study-sidebar{grid-template-columns:1fr 1fr}.hero-card{grid-template-columns:1fr}.orbit-visual{display:none}}
@media(max-width:820px){:root{--sidebar:285px}.app-shell{display:block}.sidebar{transform:translateX(-105%);transition:.22s;box-shadow:var(--shadow)}.sidebar.open{transform:none}.workspace{grid-column:auto}.mobile-only{display:grid}.topbar{padding:11px 13px}.top-actions .ghost-button{display:none}.compact-select{max-width:100px}.global-search kbd{display:none}main{padding:22px 14px 70px}.hero-copy{padding:34px 25px}.metric-grid,.dashboard-grid,.shop-grid,.download-grid,.settings-grid,.study-sidebar{grid-template-columns:1fr}.filter-panel{grid-template-columns:1fr 1fr}.record-grid{grid-template-columns:1fr}.language-grid{grid-template-columns:1fr 1fr}.dictionary-form{grid-template-columns:1fr}.rating-row{grid-template-columns:1fr 1fr}.study-card{min-height:340px;padding:24px}.page-heading{display:block}.page-heading>button{margin-top:10px}.detail-grid{grid-template-columns:1fr}}
@media(max-width:520px){.filter-panel{grid-template-columns:1fr}.metric-grid{grid-template-columns:1fr 1fr;gap:9px}.metric-card{padding:15px}.metric-card b{font-size:24px}.quick-grid{grid-template-columns:1fr}.language-grid{grid-template-columns:1fr}.top-actions{gap:5px}.top-actions .icon-button{display:none}.global-search{height:44px}.hero-card{min-height:auto}.hero-copy h1{font-size:34px}.export-grid{grid-template-columns:1fr}.rating-row{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* CSP-safe dynamic presentation classes. */
.progress-pct-0{--progress-pct:0%;--progress-angle:0.0deg}
.progress-pct-1{--progress-pct:1%;--progress-angle:3.6deg}
.progress-pct-2{--progress-pct:2%;--progress-angle:7.2deg}
.progress-pct-3{--progress-pct:3%;--progress-angle:10.8deg}
.progress-pct-4{--progress-pct:4%;--progress-angle:14.4deg}
.progress-pct-5{--progress-pct:5%;--progress-angle:18.0deg}
.progress-pct-6{--progress-pct:6%;--progress-angle:21.6deg}
.progress-pct-7{--progress-pct:7%;--progress-angle:25.2deg}
.progress-pct-8{--progress-pct:8%;--progress-angle:28.8deg}
.progress-pct-9{--progress-pct:9%;--progress-angle:32.4deg}
.progress-pct-10{--progress-pct:10%;--progress-angle:36.0deg}
.progress-pct-11{--progress-pct:11%;--progress-angle:39.6deg}
.progress-pct-12{--progress-pct:12%;--progress-angle:43.2deg}
.progress-pct-13{--progress-pct:13%;--progress-angle:46.800000000000004deg}
.progress-pct-14{--progress-pct:14%;--progress-angle:50.4deg}
.progress-pct-15{--progress-pct:15%;--progress-angle:54.0deg}
.progress-pct-16{--progress-pct:16%;--progress-angle:57.6deg}
.progress-pct-17{--progress-pct:17%;--progress-angle:61.2deg}
.progress-pct-18{--progress-pct:18%;--progress-angle:64.8deg}
.progress-pct-19{--progress-pct:19%;--progress-angle:68.4deg}
.progress-pct-20{--progress-pct:20%;--progress-angle:72.0deg}
.progress-pct-21{--progress-pct:21%;--progress-angle:75.60000000000001deg}
.progress-pct-22{--progress-pct:22%;--progress-angle:79.2deg}
.progress-pct-23{--progress-pct:23%;--progress-angle:82.8deg}
.progress-pct-24{--progress-pct:24%;--progress-angle:86.4deg}
.progress-pct-25{--progress-pct:25%;--progress-angle:90.0deg}
.progress-pct-26{--progress-pct:26%;--progress-angle:93.60000000000001deg}
.progress-pct-27{--progress-pct:27%;--progress-angle:97.2deg}
.progress-pct-28{--progress-pct:28%;--progress-angle:100.8deg}
.progress-pct-29{--progress-pct:29%;--progress-angle:104.4deg}
.progress-pct-30{--progress-pct:30%;--progress-angle:108.0deg}
.progress-pct-31{--progress-pct:31%;--progress-angle:111.60000000000001deg}
.progress-pct-32{--progress-pct:32%;--progress-angle:115.2deg}
.progress-pct-33{--progress-pct:33%;--progress-angle:118.8deg}
.progress-pct-34{--progress-pct:34%;--progress-angle:122.4deg}
.progress-pct-35{--progress-pct:35%;--progress-angle:126.0deg}
.progress-pct-36{--progress-pct:36%;--progress-angle:129.6deg}
.progress-pct-37{--progress-pct:37%;--progress-angle:133.20000000000002deg}
.progress-pct-38{--progress-pct:38%;--progress-angle:136.8deg}
.progress-pct-39{--progress-pct:39%;--progress-angle:140.4deg}
.progress-pct-40{--progress-pct:40%;--progress-angle:144.0deg}
.progress-pct-41{--progress-pct:41%;--progress-angle:147.6deg}
.progress-pct-42{--progress-pct:42%;--progress-angle:151.20000000000002deg}
.progress-pct-43{--progress-pct:43%;--progress-angle:154.8deg}
.progress-pct-44{--progress-pct:44%;--progress-angle:158.4deg}
.progress-pct-45{--progress-pct:45%;--progress-angle:162.0deg}
.progress-pct-46{--progress-pct:46%;--progress-angle:165.6deg}
.progress-pct-47{--progress-pct:47%;--progress-angle:169.20000000000002deg}
.progress-pct-48{--progress-pct:48%;--progress-angle:172.8deg}
.progress-pct-49{--progress-pct:49%;--progress-angle:176.4deg}
.progress-pct-50{--progress-pct:50%;--progress-angle:180.0deg}
.progress-pct-51{--progress-pct:51%;--progress-angle:183.6deg}
.progress-pct-52{--progress-pct:52%;--progress-angle:187.20000000000002deg}
.progress-pct-53{--progress-pct:53%;--progress-angle:190.8deg}
.progress-pct-54{--progress-pct:54%;--progress-angle:194.4deg}
.progress-pct-55{--progress-pct:55%;--progress-angle:198.0deg}
.progress-pct-56{--progress-pct:56%;--progress-angle:201.6deg}
.progress-pct-57{--progress-pct:57%;--progress-angle:205.20000000000002deg}
.progress-pct-58{--progress-pct:58%;--progress-angle:208.8deg}
.progress-pct-59{--progress-pct:59%;--progress-angle:212.4deg}
.progress-pct-60{--progress-pct:60%;--progress-angle:216.0deg}
.progress-pct-61{--progress-pct:61%;--progress-angle:219.6deg}
.progress-pct-62{--progress-pct:62%;--progress-angle:223.20000000000002deg}
.progress-pct-63{--progress-pct:63%;--progress-angle:226.8deg}
.progress-pct-64{--progress-pct:64%;--progress-angle:230.4deg}
.progress-pct-65{--progress-pct:65%;--progress-angle:234.0deg}
.progress-pct-66{--progress-pct:66%;--progress-angle:237.6deg}
.progress-pct-67{--progress-pct:67%;--progress-angle:241.20000000000002deg}
.progress-pct-68{--progress-pct:68%;--progress-angle:244.8deg}
.progress-pct-69{--progress-pct:69%;--progress-angle:248.4deg}
.progress-pct-70{--progress-pct:70%;--progress-angle:252.0deg}
.progress-pct-71{--progress-pct:71%;--progress-angle:255.6deg}
.progress-pct-72{--progress-pct:72%;--progress-angle:259.2deg}
.progress-pct-73{--progress-pct:73%;--progress-angle:262.8deg}
.progress-pct-74{--progress-pct:74%;--progress-angle:266.40000000000003deg}
.progress-pct-75{--progress-pct:75%;--progress-angle:270.0deg}
.progress-pct-76{--progress-pct:76%;--progress-angle:273.6deg}
.progress-pct-77{--progress-pct:77%;--progress-angle:277.2deg}
.progress-pct-78{--progress-pct:78%;--progress-angle:280.8deg}
.progress-pct-79{--progress-pct:79%;--progress-angle:284.40000000000003deg}
.progress-pct-80{--progress-pct:80%;--progress-angle:288.0deg}
.progress-pct-81{--progress-pct:81%;--progress-angle:291.6deg}
.progress-pct-82{--progress-pct:82%;--progress-angle:295.2deg}
.progress-pct-83{--progress-pct:83%;--progress-angle:298.8deg}
.progress-pct-84{--progress-pct:84%;--progress-angle:302.40000000000003deg}
.progress-pct-85{--progress-pct:85%;--progress-angle:306.0deg}
.progress-pct-86{--progress-pct:86%;--progress-angle:309.6deg}
.progress-pct-87{--progress-pct:87%;--progress-angle:313.2deg}
.progress-pct-88{--progress-pct:88%;--progress-angle:316.8deg}
.progress-pct-89{--progress-pct:89%;--progress-angle:320.40000000000003deg}
.progress-pct-90{--progress-pct:90%;--progress-angle:324.0deg}
.progress-pct-91{--progress-pct:91%;--progress-angle:327.6deg}
.progress-pct-92{--progress-pct:92%;--progress-angle:331.2deg}
.progress-pct-93{--progress-pct:93%;--progress-angle:334.8deg}
.progress-pct-94{--progress-pct:94%;--progress-angle:338.40000000000003deg}
.progress-pct-95{--progress-pct:95%;--progress-angle:342.0deg}
.progress-pct-96{--progress-pct:96%;--progress-angle:345.6deg}
.progress-pct-97{--progress-pct:97%;--progress-angle:349.2deg}
.progress-pct-98{--progress-pct:98%;--progress-angle:352.8deg}
.progress-pct-99{--progress-pct:99%;--progress-angle:356.40000000000003deg}
.progress-pct-100{--progress-pct:100%;--progress-angle:360.0deg}
.score-0{--score:0}
.score-1{--score:1}
.score-2{--score:2}
.score-3{--score:3}
.score-4{--score:4}
.score-5{--score:5}
.score-6{--score:6}
.score-7{--score:7}
.score-8{--score:8}
.score-9{--score:9}
.score-10{--score:10}
.score-11{--score:11}
.score-12{--score:12}
.score-13{--score:13}
.score-14{--score:14}
.score-15{--score:15}
.score-16{--score:16}
.score-17{--score:17}
.score-18{--score:18}
.score-19{--score:19}
.score-20{--score:20}
.score-21{--score:21}
.score-22{--score:22}
.score-23{--score:23}
.score-24{--score:24}
.score-25{--score:25}
.score-26{--score:26}
.score-27{--score:27}
.score-28{--score:28}
.score-29{--score:29}
.score-30{--score:30}
.score-31{--score:31}
.score-32{--score:32}
.score-33{--score:33}
.score-34{--score:34}
.score-35{--score:35}
.score-36{--score:36}
.score-37{--score:37}
.score-38{--score:38}
.score-39{--score:39}
.score-40{--score:40}
.score-41{--score:41}
.score-42{--score:42}
.score-43{--score:43}
.score-44{--score:44}
.score-45{--score:45}
.score-46{--score:46}
.score-47{--score:47}
.score-48{--score:48}
.score-49{--score:49}
.score-50{--score:50}
.score-51{--score:51}
.score-52{--score:52}
.score-53{--score:53}
.score-54{--score:54}
.score-55{--score:55}
.score-56{--score:56}
.score-57{--score:57}
.score-58{--score:58}
.score-59{--score:59}
.score-60{--score:60}
.score-61{--score:61}
.score-62{--score:62}
.score-63{--score:63}
.score-64{--score:64}
.score-65{--score:65}
.score-66{--score:66}
.score-67{--score:67}
.score-68{--score:68}
.score-69{--score:69}
.score-70{--score:70}
.score-71{--score:71}
.score-72{--score:72}
.score-73{--score:73}
.score-74{--score:74}
.score-75{--score:75}
.score-76{--score:76}
.score-77{--score:77}
.score-78{--score:78}
.score-79{--score:79}
.score-80{--score:80}
.score-81{--score:81}
.score-82{--score:82}
.score-83{--score:83}
.score-84{--score:84}
.score-85{--score:85}
.score-86{--score:86}
.score-87{--score:87}
.score-88{--score:88}
.score-89{--score:89}
.score-90{--score:90}
.score-91{--score:91}
.score-92{--score:92}
.score-93{--score:93}
.score-94{--score:94}
.score-95{--score:95}
.score-96{--score:96}
.score-97{--score:97}
.score-98{--score:98}
.score-99{--score:99}
.score-100{--score:100}
.lang-Spanish{color:#ff8d7b}.lang-Portuguese{color:#58d68d}.lang-French{color:#7fb3ff}.lang-Italian{color:#ffd166}.lang-Romanian{color:#b49cff}
.preview-theme-nocturne{--c1:#07111f;--c2:#31d7c5;--c3:#eef5ff}
.preview-theme-pitch-black{--c1:#000;--c2:#57e4cd;--c3:#fff}
.preview-theme-popsicle{--c1:#050b21;--c2:#ff3f5f;--c3:#57a4ff}
.preview-theme-parchment{--c1:#17110b;--c2:#b96a4d;--c3:#f6e6c6}
.preview-theme-velvet{--c1:#16070d;--c2:#d4a84f;--c3:#fff1df}
.preview-theme-aurora{--c1:#07151c;--c2:#65f0d4;--c3:#a68cff}
.preview-theme-ocean{--c1:#041625;--c2:#26c6da;--c3:#7cb9ff}
.preview-theme-solar{--c1:#17120b;--c2:#ffb84a;--c3:#fff4d5}
.theme-preview>span{position:absolute;z-index:2;top:12px;right:12px;border:1px solid color-mix(in srgb,var(--c3) 45%,transparent);border-radius:999px;background:color-mix(in srgb,var(--c1) 76%,transparent);color:var(--c3);padding:5px 9px;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.font-sample{display:grid;gap:7px;margin:14px 0 0;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--bg-2)}.font-sample b{color:var(--accent-text,var(--accent));font-size:11px;text-transform:uppercase;letter-spacing:.08em}.font-sample span{font-size:22px}.font-sample small{color:var(--muted);line-height:1.5}.primary-button,.secondary-button,.ghost-button,.danger-button,.theme-choice{min-height:44px;touch-action:manipulation}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 72%,white);outline-offset:2px}


.word-with-audio{display:flex;align-items:center;gap:9px;min-width:0}.word-with-audio h3,.dialog-word h2{margin:0}.word-with-audio.compact{justify-content:space-between}.word-with-audio.compact span{min-width:0;overflow:hidden;text-overflow:ellipsis}.speak-button{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));border-radius:999px;background:color-mix(in srgb,var(--accent) 8%,var(--panel));color:var(--accent-text,var(--accent));font-size:11px;font-weight:900;padding:0 9px}.speak-button:hover{background:color-mix(in srgb,var(--accent) 18%,var(--panel))}.speak-button.large{height:40px;padding:0 15px;white-space:nowrap}.gloss-line{color:var(--muted);margin:8px 0 0;font-size:13px}.gloss-line b{color:var(--text)}.dialog-word{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:16px}.dictionary-section{padding:16px 0;border-top:1px solid var(--line)}.dictionary-section:first-of-type{border-top:0}.dictionary-section h3{margin:0 0 12px}.dictionary-section h4{margin:18px 0 8px}.local-definition{padding:12px;border:1px solid var(--line);border-radius:13px;background:var(--bg-2);margin:9px 0}.local-definition p{margin:8px 0}.local-definition small{display:block;color:var(--muted);margin-top:5px}.definition-meta{display:flex;flex-wrap:wrap;gap:7px}.definition-meta span{font-size:11px;padding:5px 8px;border:1px solid var(--line);border-radius:999px;color:var(--muted);background:var(--bg-2)}.example-list{line-height:1.65;color:var(--muted)}.audio-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0}.audio-links a{border:1px solid var(--line);border-radius:999px;padding:6px 9px;text-decoration:none}.attribution-note{font-size:11px;color:var(--muted);border-top:1px solid var(--line);padding-top:13px}.variety-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.variety-grid label{display:grid;gap:5px;color:var(--muted);font-size:12px}.settings-copy{color:var(--muted);font-size:13px;margin-top:-8px}.shop-account-note span{display:block;margin-top:7px}
@media(max-width:560px){.variety-grid{grid-template-columns:1fr}.dialog-word{display:grid}.speak-button.large{justify-self:start}}

/* Latin, library, paired reader, onboarding and accessibility */
.lang-Latin{color:#f0a6ff}.orbit-visual .p6{left:48%;top:3%;transform:translate(-50%,-50%);background:linear-gradient(145deg,#c184ff,#7c4dff)}
.xp-level-copy{font-size:12px;color:var(--muted);margin:4px 0 8px}
.legal-notice{margin-bottom:18px;line-height:1.55}
.library-controls{display:grid;grid-template-columns:180px 220px minmax(220px,1fr) auto auto;gap:12px;align-items:end;margin-bottom:16px}.library-controls label{display:grid;gap:6px;color:var(--muted);font-size:12px}.library-query{min-width:0}
.book-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.book-card{position:relative;display:grid;grid-template-rows:auto 1fr auto;min-height:280px;padding:18px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,color-mix(in srgb,var(--panel) 96%,var(--accent) 4%),var(--panel));box-shadow:var(--shadow)}.book-card header{display:flex;gap:13px;align-items:flex-start}.book-cover{width:74px;aspect-ratio:2/3;border-radius:9px;object-fit:cover;background:linear-gradient(145deg,var(--accent-2),var(--accent));border:1px solid var(--line);box-shadow:0 10px 28px #0005}.book-cover.placeholder{display:grid;place-items:center;color:#fff;font-weight:900;font-size:11px;text-align:center;padding:7px}.book-card h3{font-size:17px;line-height:1.25;margin:0 0 5px}.book-card p{color:var(--muted);font-size:13px;line-height:1.5}.book-meta{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}.book-meta span{font-size:10px;border:1px solid var(--line);border-radius:999px;padding:4px 7px;color:var(--muted)}.book-actions{display:flex;flex-wrap:wrap;gap:8px}.book-actions a,.book-actions button{font-size:12px}.source-status{font-size:12px;color:var(--muted)}
.reader-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin-bottom:12px}.reader-toolbar label{display:grid;gap:5px;color:var(--muted);font-size:11px}.reader-progress-line{display:grid;grid-template-columns:1fr auto;align-items:center;gap:13px;margin-bottom:16px}.reader-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}.reader-pane{min-width:0;border:1px solid var(--line);border-radius:18px;background:var(--panel);overflow:hidden;box-shadow:var(--shadow)}.reader-pane>header{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;padding:15px 17px;border-bottom:1px solid var(--line);background:var(--bg-2)}.reader-pane h2{font-size:17px;margin:3px 0 0}.reader-pane small{color:var(--accent-text,var(--accent));text-transform:uppercase;letter-spacing:.08em}.reader-text{height:58vh;min-height:430px;overflow:auto;padding:24px;font-size:var(--reader-font-size,20px);line-height:1.82;scroll-behavior:smooth}.reader-sentence{display:inline;border-radius:5px;padding:2px 1px;transition:.18s background,.18s color}.reader-sentence.active{background:color-mix(in srgb,var(--accent) 28%,transparent);color:var(--text);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent)}.reader-sentence.completed{color:color-mix(in srgb,var(--muted) 75%,var(--text))}.reader-sentence:not(:last-child)::after{content:' '}.file-import{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding:12px 16px;color:var(--muted);font-size:12px}.file-import input{max-width:210px}.reading-progress-panel{margin-top:18px}.reading-progress-list{display:grid;gap:10px}.reading-progress-item{display:grid;grid-template-columns:minmax(160px,1fr) 2fr auto;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:13px;background:var(--bg-2)}.reading-progress-item strong{display:block}.reading-progress-item small{color:var(--muted)}
.toggle-row{display:flex!important;align-items:flex-start!important;gap:11px!important;padding:11px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2);margin:9px 0}.toggle-row input{width:auto!important;margin-top:4px}.toggle-row span{display:grid;gap:4px}.toggle-row small{color:var(--muted);line-height:1.4}.focus-prefix{font-weight:850;color:var(--accent-text,var(--accent))}.focus-rest{color:inherit}
html{--learning-font:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--display-font:"Aptos Display","Segoe UI Variable Display","Trebuchet MS",sans-serif}.page-heading h1,.today-hero h1,.onboarding-hero h2{font-family:var(--display-font);font-weight:760}.reader-text,.study-card,.lesson-content,.record-card p,.tutor-answer,.definition-card,.font-sample{font-family:var(--learning-font)}
html.reading-dyslexic{--reader-font-size:21px}html.reading-dyslexic .reader-text,html.reading-dyslexic .study-card,html.reading-dyslexic .record-card p,html.reading-dyslexic .lesson-content{font-family:var(--learning-font);letter-spacing:.045em;word-spacing:.12em;line-height:1.95}html.reading-dyslexic .reader-text{max-width:78ch;margin:auto}html.reading-dyslexic .reader-sentence{margin-bottom:.08em}
.onboarding-dialog{width:min(760px,calc(100vw - 28px));border:1px solid var(--line);border-radius:24px;background:var(--panel);color:var(--text);padding:0;box-shadow:0 32px 100px #000b}.onboarding-dialog::backdrop{background:#020713dc;backdrop-filter:blur(8px)}.onboarding-dialog form{padding:28px;display:grid;gap:20px}.onboarding-hero{display:flex;gap:15px;align-items:center}.onboarding-hero h2{margin:4px 0}.onboarding-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.onboarding-steps section{display:flex;gap:10px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--bg-2)}.onboarding-steps section>b{display:grid;place-items:center;min-width:28px;height:28px;border-radius:50%;background:var(--accent);color:#031318}.onboarding-steps h3{margin:0 0 6px;font-size:14px}.onboarding-steps p{margin:0;color:var(--muted);font-size:12px;line-height:1.45}.onboarding-options{display:flex;flex-wrap:wrap;gap:16px}.onboarding-options label{display:flex;gap:8px;align-items:center;color:var(--muted)}
.latin-basics-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.latin-topic{border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:16px;overflow:hidden}.latin-topic h3{margin-top:0}.latin-topic .data-table{font-size:12px}
.scripture-panel{margin-bottom:16px}.scripture-work-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin:16px 0}.scripture-work-card{border:1px solid var(--line);border-radius:14px;padding:15px;background:linear-gradient(145deg,var(--bg-2),color-mix(in srgb,var(--accent) 5%,var(--bg-2)))}.scripture-work-card small{color:var(--accent-text,var(--accent));font-size:10px;text-transform:uppercase;letter-spacing:.08em}.scripture-work-card h3{font-size:16px;margin:6px 0}.scripture-work-card p{font-size:12px;color:var(--muted);margin:0}.scripture-compare-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center}.scripture-compare-grid fieldset{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;border:1px solid var(--line);border-radius:14px;padding:14px;margin:0}.scripture-compare-grid legend{padding:0 7px;color:var(--accent-text,var(--accent));font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.scripture-compare-grid label{display:grid;gap:5px;color:var(--muted);font-size:11px}.scripture-compare-mark{font-size:24px;color:var(--accent-text,var(--accent))}.scripture-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}.scripture-rights{font-size:11px;color:var(--muted);margin:13px 0 0}.reader-sentence{position:relative}.reader-verse-ref{display:block;color:var(--accent-text,var(--accent));font-size:.62em;font-weight:800;letter-spacing:.03em;margin-bottom:2px}.reader-sentence.has-reference{display:block;width:100%;padding:8px 10px;margin:0 0 5px;border-left:2px solid color-mix(in srgb,var(--accent) 35%,transparent)}.reader-sentence.has-reference:not(:last-child)::after{content:''}
.verse-dialog{width:min(620px,calc(100vw - 24px));max-height:90vh;overflow:auto;border:1px solid var(--line);border-radius:24px;background:var(--bg-2);color:var(--text);padding:0;box-shadow:var(--shadow)}.verse-dialog::backdrop{background:rgba(1,7,15,.78);backdrop-filter:blur(8px)}.verse-dialog-body{padding:20px;display:grid;gap:18px}.verse-dialog blockquote{font-size:20px;line-height:1.7;margin:0;padding:18px;border-left:3px solid var(--accent);border-radius:0 14px 14px 0;background:var(--panel)}.verse-action-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.verse-highlight-picker{display:flex;flex-wrap:wrap;gap:8px;border:1px solid var(--line);border-radius:14px;padding:13px}.verse-highlight-picker legend{padding:0 7px;color:var(--muted);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.verse-highlight-picker button{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--text);padding:8px 10px}.verse-highlight-picker button.active{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent)}.highlight-swatch{width:13px;height:13px;border-radius:50%}.highlight-swatch.gold{background:#f2c94c}.highlight-swatch.blue{background:#56a8ff}.highlight-swatch.rose{background:#ff7fa2}.highlight-swatch.green{background:#54d68c}.verse-note-label{display:grid;gap:7px;color:var(--muted);font-size:12px;font-weight:800}.verse-note-label textarea{width:100%;resize:vertical;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);padding:12px;font:inherit;line-height:1.55}.verse-note-label textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}.verse-note-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}.verse-note-actions small{color:var(--muted)}.reader-sentence.verse-highlight-gold{background:color-mix(in srgb,#f2c94c 24%,transparent)}.reader-sentence.verse-highlight-blue{background:color-mix(in srgb,#56a8ff 22%,transparent)}.reader-sentence.verse-highlight-rose{background:color-mix(in srgb,#ff7fa2 20%,transparent)}.reader-sentence.verse-highlight-green{background:color-mix(in srgb,#54d68c 20%,transparent)}.reader-note-marker{font-style:normal;float:right;color:var(--warning-text,var(--warning));font-size:10px}.reader-sentence.has-note{border-left-width:4px}
@media(max-width:1100px){.library-controls{grid-template-columns:1fr 1fr}.library-query{grid-column:1/-1}.book-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.reader-pair{grid-template-columns:1fr}.reader-text{height:48vh}.onboarding-steps{grid-template-columns:1fr}.latin-basics-grid{grid-template-columns:1fr}.scripture-work-list{grid-template-columns:1fr}.scripture-compare-grid{grid-template-columns:1fr}.scripture-compare-mark{transform:rotate(90deg);justify-self:center}.scripture-compare-grid fieldset{grid-template-columns:1fr}}
@media(max-width:560px){.verse-action-grid{grid-template-columns:1fr}.verse-note-actions{align-items:stretch;flex-direction:column}.verse-note-actions button{width:100%}}
@media(max-width:660px){.library-controls{grid-template-columns:1fr}.book-grid{grid-template-columns:1fr}.reading-progress-item{grid-template-columns:1fr}.reader-toolbar{display:grid;grid-template-columns:1fr 1fr}.reader-toolbar .primary-button{grid-column:1/-1}.reader-text{min-height:360px;padding:18px}.onboarding-dialog form{padding:20px}}
.reader-sentence{appearance:none;border:0;background:transparent;color:inherit;font:inherit;line-height:inherit;text-align:left;cursor:pointer}
.reader-sentence:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.progress-bar>span[class^="progress-pct-"]{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
/* Mobile QA: language switching remains available in Settings without forcing topbar overflow. */
@media(max-width:520px){.top-actions{display:none}.topbar{gap:8px}.global-search{min-width:0;max-width:none}}

/* v4: Pattern Lab */
.pattern-route-panel{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:16px;padding:18px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(135deg,var(--panel),color-mix(in srgb,var(--accent-2) 8%,var(--panel)))}
.pattern-route{display:grid;grid-template-columns:minmax(150px,1fr) auto minmax(150px,1fr) auto auto;gap:12px;align-items:end;flex:1}.pattern-route label{display:grid;gap:6px;color:var(--muted);font-size:12px}.pattern-arrow{align-self:center;color:var(--accent-text,var(--accent));font-size:24px;font-weight:900}.pattern-route-copy{font-weight:900;color:var(--accent-text,var(--accent));white-space:nowrap}
.pattern-tabs{display:flex;gap:7px;overflow-x:auto;padding:4px 0 13px;margin-bottom:9px;scrollbar-width:thin}.pattern-tabs .tab{white-space:nowrap}
.pattern-intro{padding:22px;margin-bottom:17px;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));border-radius:18px;background:color-mix(in srgb,var(--accent) 6%,var(--panel))}.pattern-intro h2{margin-bottom:8px}.pattern-intro p:last-child{margin-bottom:0;color:var(--muted);line-height:1.65}
.pattern-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.pattern-card{min-width:0;padding:19px;border:1px solid var(--line);border-radius:17px;background:linear-gradient(150deg,var(--panel),color-mix(in srgb,var(--panel-2) 88%,var(--panel)));box-shadow:0 13px 32px rgba(0,0,0,.12)}.pattern-card h2{font-size:20px}.pattern-card p,.pattern-card li{color:var(--muted);line-height:1.58}.pattern-card strong,.pattern-card b{color:var(--text)}.pattern-card-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.confidence{font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;padding:6px 8px;border-radius:999px;border:1px solid var(--line)}.confidence-high{color:var(--success-text,var(--success));border-color:color-mix(in srgb,var(--success) 50%,var(--line))}.confidence-medium,.confidence-medium-high{color:var(--warning-text,var(--warning))}.confidence-low{color:var(--danger-text,var(--danger))}
.suffix-pair{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin:13px 0;padding:12px;border-radius:13px;background:var(--bg-2);border:1px solid var(--line);text-align:center}.suffix-pair span{color:var(--accent-text,var(--accent));font-size:18px}.suffix-pair b{overflow-wrap:anywhere}
.pattern-examples{display:grid;gap:7px;margin:13px 0}.example-pair{display:grid;grid-template-columns:1fr auto 1fr auto;gap:8px;align-items:center;width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:11px;background:var(--bg-2);color:var(--text);text-align:left}.example-pair:hover{border-color:var(--accent)}.example-pair b{color:var(--accent-text,var(--accent))}.example-pair small{color:var(--muted);font-size:10px}.notice.compact{font-size:12px;padding:10px;margin:11px 0}.section-title{margin:28px 0 14px}.source-note,.muted{color:var(--muted);font-size:12px}.example-box{padding:11px;border:1px solid var(--line);border-radius:11px;background:var(--bg-2);line-height:1.65}
.table-scroll{overflow:auto;margin:13px 0}.pattern-table{width:100%;border-collapse:collapse;min-width:540px}.pattern-table th,.pattern-table td{padding:10px;border:1px solid var(--line);text-align:left;vertical-align:top;font-size:12px;line-height:1.45}.pattern-table th{background:var(--bg-2);color:var(--accent-text,var(--accent));position:sticky;top:0}.pattern-table td{color:var(--muted)}.alphabet-table{min-width:620px}.pattern-definition-list{display:grid;gap:9px}.pattern-definition-list>div{display:grid;grid-template-columns:150px 1fr;gap:10px;padding-bottom:9px;border-bottom:1px solid var(--line)}.pattern-definition-list dt{font-weight:900;color:var(--accent-text,var(--accent))}.pattern-definition-list dd{margin:0;color:var(--muted);line-height:1.55}
@media(max-width:900px){.pattern-grid{grid-template-columns:1fr}.pattern-route-panel{align-items:stretch;flex-direction:column}.pattern-route-copy{white-space:normal}}
@media(max-width:620px){.pattern-route{grid-template-columns:1fr}.pattern-arrow{text-align:center;transform:rotate(90deg)}.pattern-definition-list>div{grid-template-columns:1fr}.example-pair{grid-template-columns:1fr auto 1fr}.example-pair small{display:none}}

/* Nexus v5: guided-course information architecture and accessible core themes */
.theme-soft-dark{color-scheme:dark;--bg:#070d16;--bg-2:#0c1623;--panel:#111d2b;--panel-2:#142436;--line:#26394e;--text:#f4f7fb;--muted:#9aabba;--accent:#39d0be;--accent-2:#7896ff;--shadow:0 18px 55px rgba(0,0,0,.28)}
.theme-pitch-black{color-scheme:dark;--bg:#000;--bg-2:#050505;--panel:#090909;--panel-2:#101010;--line:#292929;--text:#fff;--muted:#aaa;--accent:#57e4cd;--accent-2:#8da5ff;--shadow:none}
.theme-popsicle{color-scheme:dark;--bg:#030719;--bg-2:#07102a;--panel:#0d1835;--panel-2:#14234a;--line:#2c4275;--text:#fff;--muted:#b9c6e6;--accent:#ff4567;--accent-2:#57a4ff;--warning:#ffe8ef;--shadow:0 18px 58px rgba(1,7,28,.55)}
.theme-parchment{color-scheme:dark;--bg:#17110b;--bg-2:#21170f;--panel:#2b1f15;--panel-2:#38281a;--line:#6c4b31;--text:#f6e6c6;--muted:#c7ab82;--accent:#d58a64;--accent-2:#7fa5c8;--danger:#ff8990;--warning:#e6bf68;--success:#8fcf99;--shadow:0 16px 44px rgba(5,2,0,.48);--display-font:Charter,"Bitstream Charter",Georgia,serif}
.theme-velvet{color-scheme:dark;--bg:#10040a;--bg-2:#19070e;--panel:#230c15;--panel-2:#30121d;--line:#56303a;--text:#fff1df;--muted:#c7aeb0;--accent:#d4a84f;--accent-2:#e27b8f;--warning:#f3cf79;--shadow:0 22px 60px rgba(9,0,4,.52);--display-font:Charter,"Bitstream Charter",Georgia,serif}
.theme-focus-light{color-scheme:light;--accent-text:#067068;--bg:#f7f8fa;--bg-2:#fff;--panel:#fff;--panel-2:#f1f3f6;--line:#d4d9e0;--text:#17202a;--muted:#596674;--accent:#087f72;--accent-2:#365bc9;--danger:#b2263d;--warning:#9a6200;--success:#087b4c;--shadow:0 12px 34px rgba(25,40,55,.08)}
.theme-paper{color-scheme:light;--bg:#f3eddf;--bg-2:#fbf7ed;--panel:#fffaf0;--panel-2:#f4ead8;--line:#d7c9b0;--text:#28231c;--muted:#6b6257;--accent:#8b4d27;--accent-2:#536b87;--danger:#a63838;--warning:#87590a;--success:#3e7049;--shadow:0 13px 35px rgba(70,49,26,.10)}
.theme-high-contrast{color-scheme:dark;--bg:#000;--bg-2:#000;--panel:#050505;--panel-2:#0a0a0a;--line:#fff;--text:#fff;--muted:#e9e9e9;--accent:#00ffff;--accent-2:#ffff00;--danger:#ff6f91;--warning:#ffff00;--success:#66ff99;--shadow:none}
.theme-pitch-black body,.theme-high-contrast body{background:#000}.theme-focus-light body{background:#f7f8fa}.theme-paper body{background:#f3eddf}.theme-focus-light .sidebar,.theme-paper .sidebar{background:color-mix(in srgb,var(--bg-2) 97%,transparent)}
.theme-popsicle body{background:radial-gradient(circle at 82% 0,#295cc950,transparent 28%),linear-gradient(112deg,transparent 0 47%,#ff456712 47% 49%,#f8fbff10 49% 51%,#57a4ff12 51% 53%,transparent 53%),var(--bg)}
.theme-parchment body{background:repeating-linear-gradient(0deg,rgba(246,230,198,.025) 0 1px,transparent 1px 5px),radial-gradient(circle at 20% 10%,#8d4f2f33,transparent 31%),linear-gradient(135deg,#17110b,#23170e 55%,#130d09)}
.theme-velvet body{background:radial-gradient(circle at 78% -10%,#d4a84f20,transparent 30%),radial-gradient(circle at 15% 10%,#a3214624,transparent 28%),var(--bg)}
.app-shell{position:relative;z-index:1}body::before{content:"";position:fixed;z-index:0;inset:-18%;pointer-events:none;opacity:.78;transform:translate3d(0,0,0);background:radial-gradient(circle at 22% 18%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 27%),radial-gradient(circle at 80% 9%,color-mix(in srgb,var(--accent-2) 13%,transparent),transparent 25%);animation:nexus-background-drift 22s ease-in-out infinite alternate}.theme-pitch-black body::before{inset:0;opacity:1;background:radial-gradient(ellipse at 100% 0,#57e4cd0d,transparent 27%),radial-gradient(ellipse at 0 100%,#8da5ff09,transparent 24%);animation:none}.theme-popsicle body::before{opacity:.9;background:radial-gradient(circle at 83% 10%,#57a4ff45,transparent 24%),radial-gradient(circle at 17% 78%,#ff456738,transparent 26%),linear-gradient(116deg,transparent 0 44%,#ff456712 44% 46%,#f8fbff14 46% 48%,#57a4ff14 48% 50%,transparent 50%);animation-duration:18s}.theme-parchment body::before{opacity:.7;background:repeating-linear-gradient(7deg,transparent 0 12px,#f6e6c605 12px 13px),radial-gradient(ellipse at 75% 10%,#d58a6422,transparent 35%);animation:none}.theme-velvet body::before{opacity:.75;background:repeating-linear-gradient(90deg,transparent 0 72px,#d4a84f08 72px 73px),radial-gradient(circle at 72% 8%,#d4a84f24,transparent 27%),radial-gradient(circle at 10% 70%,#b42d5530,transparent 30%);animation-duration:30s}.theme-aurora body::before{opacity:.9;background:radial-gradient(ellipse at 18% 18%,#65f0d44a,transparent 30%),radial-gradient(ellipse at 82% 20%,#a68cff4a,transparent 33%),linear-gradient(125deg,transparent 25%,#65f0d410 45%,#a68cff16 58%,transparent 75%);filter:blur(4px);animation-duration:15s}.theme-ocean body::before{opacity:.84;background:radial-gradient(ellipse at 50% -5%,#7cb9ff42,transparent 28%),repeating-radial-gradient(ellipse at 50% 0,#26c6da10 0 2px,transparent 3px 34px);animation-duration:28s}.theme-solar body::before{opacity:.82;background:radial-gradient(circle at 78% 4%,#ffb84a45,transparent 28%),radial-gradient(circle at 12% 82%,#f77f5724,transparent 29%);animation-duration:26s}.theme-high-contrast body::before,.theme-focus-light body::before,.theme-paper body::before{display:none}@keyframes nexus-background-drift{from{transform:translate3d(-1.5%,-1%,0) scale(1)}to{transform:translate3d(1.5%,1%,0) scale(1.05)}}@media(prefers-reduced-motion:reduce){body::before{animation:none!important;transform:none!important}}
.nav-index{font:800 10px/1 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--muted);letter-spacing:.08em}.nav-item.active .nav-index{color:var(--accent-text,var(--accent))}
.today-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:28px;padding:clamp(28px,5vw,58px);border:1px solid var(--line);border-radius:28px;background:var(--panel);box-shadow:var(--shadow)}.today-hero h1{max-width:760px}.today-hero>div>p:not(.eyebrow){max-width:820px;color:var(--muted);font-size:16px;line-height:1.68}.route-badge{min-width:230px;padding:22px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:19px;background:var(--bg-2)}.route-badge small,.route-badge strong,.route-badge span{display:block}.route-badge small{color:var(--muted);text-transform:uppercase;letter-spacing:.11em;font-size:10px}.route-badge strong{margin:9px 0 5px;font-size:20px}.route-badge span{color:var(--accent-text,var(--accent));font-size:12px}
.today-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(330px,.75fr);gap:18px;margin-bottom:18px}.today-plan-list{display:grid;gap:9px}.today-plan-item{display:grid;grid-template-columns:38px 1fr auto;gap:13px;align-items:center;width:100%;padding:14px 15px;border:1px solid var(--line);border-radius:14px;background:var(--bg-2);color:var(--text);text-align:left}.today-plan-item:hover{border-color:var(--accent);transform:translateY(-1px)}.today-plan-item>span{display:grid;place-items:center;width:33px;height:33px;border-radius:9px;background:var(--panel);font-size:11px;color:var(--accent-text,var(--accent));font-weight:900}.today-plan-item small,.today-plan-item b,.today-plan-item p{display:block}.today-plan-item small{color:var(--accent-text,var(--accent));font-size:10px;text-transform:uppercase;letter-spacing:.09em}.today-plan-item b{margin:3px 0}.today-plan-item p{margin:0;color:var(--muted);font-size:12px}.today-plan-item em{font-style:normal;font-weight:900;color:var(--accent-text,var(--accent))}.today-plan-item.done{opacity:.72}.weekly-sequence{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}.weekly-sequence article{display:flex;align-items:center;gap:9px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2);font-size:12px}.weekly-sequence span{display:grid;place-items:center;min-width:25px;height:25px;border-radius:50%;background:var(--accent);color:#07111f;font-weight:900}
.progress-ring-svg{width:132px;height:132px;overflow:visible}.progress-ring-svg circle{fill:none;stroke-width:10;transform:rotate(-90deg);transform-origin:60px 60px}.ring-track{stroke:var(--line)}.ring-meter{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset .45s ease}.progress-ring-svg text{fill:var(--text);font-weight:900;font-size:18px}.progress-ring-svg .ring-caption{fill:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.08em}
.course-route-panel{display:grid;grid-template-columns:1fr auto 1fr 1fr;align-items:center;gap:16px;margin-bottom:18px}.course-route-panel>div{display:grid;gap:4px}.course-route-panel small{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.09em}.course-route-panel strong{font-size:19px}.course-route-panel>span{color:var(--accent-text,var(--accent));font-size:24px}.course-route-stat{padding-left:20px;border-left:1px solid var(--line)}.course-layout{display:grid;grid-template-columns:minmax(280px,360px) minmax(0,1fr);gap:18px;align-items:start}.roadmap-panel{position:sticky;top:98px;max-height:calc(100vh - 125px);overflow:auto}.course-roadmap{display:grid;gap:13px}.roadmap-unit{padding-bottom:13px;border-bottom:1px solid var(--line)}.roadmap-unit:last-child{border-bottom:0}.roadmap-unit>header{display:flex;gap:10px;align-items:center}.roadmap-unit>header>span{font:900 11px/1 ui-monospace,monospace;color:var(--accent-text,var(--accent))}.roadmap-unit header div{display:grid;gap:2px}.roadmap-unit header small,.roadmap-unit>p{color:var(--muted);font-size:11px}.roadmap-unit>p{line-height:1.45;margin:8px 0}.roadmap-unit>div{display:grid;gap:5px}.roadmap-lesson{display:grid;grid-template-columns:20px 1fr auto;gap:7px;align-items:center;padding:8px 9px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--muted);text-align:left;font-size:12px}.roadmap-lesson small{font-size:9px}.roadmap-lesson:hover,.roadmap-lesson.active{background:var(--bg-2);border-color:var(--line);color:var(--text)}.roadmap-lesson.active{border-left:3px solid var(--accent)}.roadmap-lesson.complete>span{color:var(--success-text,var(--success))}.lesson-panel{min-height:650px}.lesson-header{display:flex;justify-content:space-between;gap:18px;border-bottom:1px solid var(--line);padding-bottom:18px}.lesson-header h1{font-size:clamp(30px,4vw,46px)}.lesson-header>div>p:not(.eyebrow){color:var(--muted)}.lesson-meta{display:flex;gap:7px;align-items:flex-start}.lesson-meta span{white-space:nowrap;padding:7px 10px;border:1px solid var(--line);border-radius:999px;background:var(--bg-2);font-size:11px}.lesson-method{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin:18px 0}.lesson-method span{padding:7px 5px;border-bottom:2px solid var(--line);color:var(--muted);font-size:9px;text-align:center;text-transform:uppercase;letter-spacing:.04em}.lesson-method span.active{border-color:var(--accent);color:var(--accent-text,var(--accent))}.lesson-body{display:grid;gap:18px}.lesson-pattern{border-left:4px solid var(--accent);padding:16px 18px;background:var(--bg-2);border-radius:0 12px 12px 0}.lesson-pattern span{font-size:10px;color:var(--accent-text,var(--accent));text-transform:uppercase;font-weight:900;letter-spacing:.1em}.lesson-pattern p{margin:7px 0 0;line-height:1.6}.route-comparison{display:grid;grid-template-columns:1fr auto 1fr;gap:13px;align-items:stretch}.route-comparison article{padding:17px;border:1px solid var(--line);border-radius:14px;background:var(--bg-2)}.route-comparison>span{align-self:center;color:var(--accent-text,var(--accent));font-size:28px}.route-comparison small{color:var(--muted)}.route-comparison h3{margin:5px 0 9px}.route-comparison p{color:var(--muted);line-height:1.5}.lesson-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.lesson-stats span{padding:13px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2);font-size:11px;color:var(--muted)}.lesson-stats b{display:block;color:var(--text);font-size:22px;margin-bottom:4px}.lesson-step-list{display:grid;gap:9px}.lesson-step-list article{display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:center;padding:13px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2)}.lesson-step-list span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#07111f;font-weight:900}.lesson-step-list p{margin:0}.lesson-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.lesson-card-grid article{padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--bg-2)}.lesson-card-grid h3{font-size:16px}.lesson-card-grid p{color:var(--muted);line-height:1.5}.lesson-card-grid small{display:block;color:var(--warning-text,var(--warning));line-height:1.45}.lesson-card-grid button{margin-top:11px}.verb-course-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.verb-course-grid article{position:relative;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2)}.verb-course-grid article>span{position:absolute;right:10px;top:9px;color:var(--muted);font-size:9px}.verb-course-grid h3{margin:0 0 5px;font-size:17px}.verb-course-grid p{margin:0 0 7px;color:var(--muted)}.verb-course-grid small{display:block;min-height:30px;color:var(--accent-text,var(--accent));font-size:10px}.verb-course-grid button{margin-top:10px;padding:7px 9px;font-size:10px}.lesson-tip{padding:14px;border:1px solid color-mix(in srgb,var(--success) 45%,var(--line));border-radius:12px;background:color-mix(in srgb,var(--success) 7%,var(--panel));line-height:1.55}.lesson-footer{display:flex;justify-content:space-between;gap:12px;margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}.lesson-actions-inline{display:flex;gap:9px;flex-wrap:wrap}
.reference-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.reference-grid>button{display:grid;gap:9px;min-height:150px;padding:21px;border:1px solid var(--line);border-radius:17px;background:var(--panel);color:var(--text);text-align:left}.reference-grid>button:hover{border-color:var(--accent);transform:translateY(-2px)}.reference-grid strong{font-size:20px}.reference-grid span{color:var(--muted);line-height:1.55}
.library-mode-tabs{display:flex;gap:7px;margin-bottom:15px}.library-mode-tabs .tab{border:1px solid var(--line);background:var(--panel);color:var(--muted);border-radius:999px;padding:9px 15px}.library-mode-tabs .tab.active{background:var(--accent);border-color:var(--accent);color:#07111f}.starter-reader-panel{margin-bottom:16px}.starter-reader-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.starter-reader-card{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--bg-2)}.starter-reader-card span{color:var(--accent-text,var(--accent));font-size:10px;text-transform:uppercase;letter-spacing:.08em}.starter-reader-card h3{margin:5px 0}.starter-reader-card p{margin:0;color:var(--muted);font-size:12px}
.dictionary-pack-panel{margin-top:20px}.dictionary-pack-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.dictionary-pack-card{padding:17px;border:1px solid var(--line);border-radius:14px;background:var(--bg-2)}.dictionary-pack-card header{display:flex;justify-content:space-between;gap:10px}.dictionary-pack-card header small{color:var(--accent-text,var(--accent))}.dictionary-pack-card header>span{white-space:nowrap;color:var(--muted);font-size:10px}.dictionary-pack-card h3{margin:4px 0}.dictionary-pack-card p{color:var(--muted);font-size:12px;line-height:1.5}.dictionary-pack-card dl{display:grid;gap:5px}.dictionary-pack-card dl>div{display:grid;grid-template-columns:65px 1fr;gap:8px;font-size:11px}.dictionary-pack-card dt{color:var(--muted)}.dictionary-pack-card dd{margin:0}.dictionary-pack-card a{display:inline-block;margin-top:11px;text-decoration:none}
.theme-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:10px 0 20px}.theme-choice{display:grid;grid-template-columns:64px minmax(0,1fr);grid-template-rows:auto auto auto;gap:4px 11px;align-items:center;min-height:78px;padding:11px;border:1px solid var(--line);border-radius:13px;background:var(--bg-2);color:var(--text);text-align:left;overflow:hidden}.theme-choice.active{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 20%,transparent)}.theme-choice.locked{border-style:dashed;background:color-mix(in srgb,var(--accent-2) 5%,var(--bg-2))}.theme-choice b{grid-column:2;align-self:end;min-width:0;overflow-wrap:anywhere}.theme-choice small{grid-column:2;color:var(--muted);font-size:10px;line-height:1.35;min-width:0}.theme-choice em{grid-column:2;grid-row:3;justify-self:start;align-self:start;margin-top:2px;border:1px solid var(--line);border-radius:999px;padding:3px 7px;color:var(--accent-text,var(--accent));font-size:9px;font-style:normal;font-weight:900;text-transform:uppercase;letter-spacing:.06em}.theme-choice.locked em{color:var(--warning-text,var(--warning))}.theme-swatch{grid-row:1/4;display:grid;grid-template-columns:repeat(3,1fr);gap:3px;width:72px;height:52px;padding:6px;border-radius:8px;background:var(--bg);border:1px solid var(--line)}.theme-swatch i{display:block;border-radius:3px;background:var(--panel)}.theme-swatch i:nth-child(2){background:var(--accent)}.theme-swatch i:nth-child(3){background:var(--text)}.route-settings{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 16px}.route-settings label{display:grid;gap:6px}.voice-status{padding:12px;border:1px solid var(--line);border-radius:11px;background:var(--bg-2);font-size:12px;line-height:1.5;margin-bottom:10px}.voice-ready{border-color:color-mix(in srgb,var(--success) 60%,var(--line));color:var(--success-text,var(--success))}.voice-missing{border-color:color-mix(in srgb,var(--warning) 60%,var(--line));color:var(--warning-text,var(--warning))}
.onboarding-dialog{width:min(840px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow:auto}.onboarding-dialog form{min-height:560px}.onboarding-progress{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.onboarding-progress span{height:4px;border-radius:999px;background:var(--line)}.onboarding-progress span.active{background:var(--accent)}.onboarding-page{display:none;min-height:310px}.onboarding-page.active{display:grid;align-content:start;gap:15px}.onboarding-page>p{color:var(--muted);line-height:1.6;max-width:680px}.onboarding-page label{display:grid;gap:7px}.goal-options{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;border:0;padding:0}.goal-options legend{grid-column:1/-1;font-weight:800;margin-bottom:4px}.goal-options label{display:flex;flex-direction:row;align-items:center;padding:12px;border:1px solid var(--line);border-radius:11px;background:var(--bg-2)}.goal-options input{width:auto}.onboarding-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:auto}.onboarding-actions #onboarding-back{margin-right:auto}
.deck-group{margin-bottom:15px;border:1px solid var(--line);border-radius:12px;overflow:hidden}.deck-group>header{display:flex;justify-content:space-between;padding:9px 11px;background:var(--bg-2);font-size:11px}.deck-group>header span{color:var(--accent-text,var(--accent))}
@media(max-width:1180px){.course-layout{grid-template-columns:310px minmax(0,1fr)}.verb-course-grid{grid-template-columns:repeat(2,1fr)}.reference-grid{grid-template-columns:repeat(2,1fr)}.weekly-sequence{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.today-hero{grid-template-columns:1fr}.route-badge{min-width:0}.today-layout,.course-layout{grid-template-columns:1fr}.roadmap-panel{position:static;max-height:none}.lesson-card-grid,.starter-reader-list,.dictionary-pack-list{grid-template-columns:1fr}.lesson-stats{grid-template-columns:repeat(2,1fr)}.weekly-sequence{grid-template-columns:1fr 1fr}.course-route-panel{grid-template-columns:1fr auto 1fr}.course-route-stat{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);padding:12px 0 0}.reference-grid{grid-template-columns:1fr}}
@media(max-width:620px){.today-hero{padding:24px 20px}.progress-ring-row{align-items:flex-start}.progress-ring-svg{width:105px;height:105px}.weekly-sequence,.lesson-stats,.verb-course-grid,.theme-gallery,.route-settings,.goal-options{grid-template-columns:1fr}.course-route-panel{grid-template-columns:1fr}.course-route-panel>span{transform:rotate(90deg);justify-self:center}.route-comparison{grid-template-columns:1fr}.route-comparison>span{transform:rotate(90deg);justify-self:center}.lesson-header{display:block}.lesson-meta{margin-top:10px}.lesson-method{grid-template-columns:repeat(3,1fr)}.lesson-footer{flex-direction:column-reverse}.starter-reader-card{display:grid}.theme-choice{grid-template-columns:62px 1fr}.theme-swatch{width:62px}.onboarding-dialog form{min-height:620px}.onboarding-actions{position:sticky;bottom:0;padding-top:10px;background:var(--panel)}}
.sentence-builder-demo{display:grid;grid-template-columns:repeat(7,auto);gap:8px;align-items:center;justify-content:start;overflow:auto;padding:15px;border:1px solid var(--line);border-radius:13px;background:var(--bg-2)}.sentence-builder-demo span{white-space:nowrap;padding:9px 12px;border-radius:9px;background:var(--panel);border:1px solid var(--line);font-weight:800;font-size:12px}.sentence-builder-demo b{color:var(--accent-text,var(--accent))}.diagnostic-list{display:grid;gap:9px}.diagnostic-list label{display:flex;gap:10px;align-items:flex-start;padding:13px;border:1px solid var(--line);border-radius:11px;background:var(--bg-2)}.diagnostic-list input{width:auto;margin-top:3px}
@media(max-width:620px){.sentence-builder-demo{grid-template-columns:1fr}.sentence-builder-demo b{transform:rotate(90deg);justify-self:center}}
.deck-item.locked{opacity:.62;background:color-mix(in srgb,var(--muted) 5%,transparent)}
.deck-item.locked strong{font-weight:700}.deck-item.locked small{font-style:italic}

/* v5.1 review-list readability */
.deck-item strong,.deck-item small{display:block}.deck-item small{margin-top:3px;line-height:1.35}.deck-item>div{min-width:0}.deck-item strong{overflow-wrap:anywhere}

/* v5.2 pattern tutor, explicit practice, and language tools */
.pattern-method-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin:14px 0}.pattern-method-strip span{display:flex;gap:7px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2);font-size:10px;line-height:1.4}.pattern-method-strip b{display:grid;place-items:center;width:21px;height:21px;flex:0 0 auto;border-radius:50%;color:#07111f;background:var(--accent)}
.explicit-pattern-guide{margin:12px 0;padding:15px;border:1px solid var(--line);border-radius:14px;background:var(--bg-2)}.explicit-pattern-guide>h3,.pattern-practice>h3{margin-top:0}.explicit-pattern-guide ul{margin:7px 0 0;padding-left:20px}.explicit-pattern-guide li+li{margin-top:8px}
.conjugation-models{display:grid;gap:12px;margin:12px 0}.conjugation-model{overflow:hidden;border:1px solid var(--line);border-radius:14px;background:var(--panel)}.conjugation-model>header{display:flex;gap:10px;align-items:baseline;padding:13px 15px 0}.conjugation-model>header span{color:var(--accent-text,var(--accent));font-weight:900}.conjugation-model>header h3{margin:0}.conjugation-model>header small{margin-left:auto;color:var(--muted)}
.pattern-check .pattern-answer{margin-top:10px;padding:11px;border-left:3px solid var(--accent);background:var(--panel)}.pattern-answer b{color:var(--accent-text,var(--accent));font-size:17px}.pattern-answer p{margin:5px 0 0}
.language-tools-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:16px;align-items:start}.tool-status{display:grid;gap:5px;margin:11px 0 14px;padding:13px 15px;border-radius:13px;border:1px solid var(--line)}.tool-status.ready{border-color:color-mix(in srgb,var(--success) 55%,var(--line));background:color-mix(in srgb,var(--success) 8%,var(--panel))}.tool-status.disabled{background:var(--bg-2)}.tool-status span,.tool-status small,.privacy-hint{color:var(--muted)}
.tool-form{display:grid;gap:13px}.tool-route{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.translation-panel .tool-route{grid-template-columns:repeat(2,minmax(0,1fr))}.tool-form textarea{width:100%;min-height:112px;resize:vertical}.privacy-hint{margin:0;font-size:11px;line-height:1.45}.tool-result{margin-top:14px}.tutor-answer{display:grid;gap:9px}.tutor-answer section{padding:12px 14px;border:1px solid var(--line);border-radius:13px;background:var(--bg-2)}.tutor-answer small{color:var(--accent-text,var(--accent));font-weight:900;text-transform:uppercase;letter-spacing:.08em}.tutor-answer h3,.tutor-answer p{margin:5px 0 0}.translation-panel .tool-result>p{font-size:16px;line-height:1.65}
.corpus-panel{margin-top:16px}.corpus-query{max-width:680px}.corpus-method{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:0;list-style:none}.corpus-method li{display:flex;gap:8px;padding:10px;border:1px solid var(--line);border-radius:11px;background:var(--bg-2);font-size:11px}.corpus-method b{color:var(--accent-text,var(--accent))}.corpus-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin-top:14px}.corpus-card{display:flex;flex-direction:column;gap:8px;padding:15px;border:1px solid var(--line);border-radius:14px;background:var(--bg-2)}.corpus-card h3,.corpus-card p{margin:0}.corpus-card>small{color:var(--accent-text,var(--accent));font-weight:900}.corpus-card>span{color:var(--muted);font-size:10px}.corpus-card>div{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto}.voice-profile-panel{align-self:start}
.voice-settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.tts-engine-panel{margin:12px 0;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2)}.tts-engine-panel>small{display:block;margin-top:10px;color:var(--muted);line-height:1.55}.voice-download-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:10px}.voice-download-row span{color:var(--muted);font-size:12px}.voice-download-row button{min-height:44px}
@media(max-width:620px){.voice-settings-grid{grid-template-columns:1fr}.voice-download-row{align-items:stretch}.voice-download-row button{width:100%}}
@media(max-width:900px){.language-tools-grid{grid-template-columns:1fr}.pattern-method-strip,.corpus-method{grid-template-columns:1fr 1fr}.corpus-list{grid-template-columns:1fr}}
@media(max-width:560px){.tool-route,.translation-panel .tool-route,.pattern-method-strip,.corpus-method{grid-template-columns:1fr}}

/* v5.5 community leaderboard, voiced setup, and local feedback */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.primary-button,.secondary-button,.ghost-button,.danger-button{min-height:44px}.leaderboard-preview-panel{margin-top:18px}.leaderboard-preview{display:grid;grid-template-columns:minmax(180px,.4fr) minmax(0,1fr);gap:18px;align-items:center}.leaderboard-preview>div:not(.empty-state){display:grid;gap:3px;padding-right:18px;border-right:1px solid var(--line)}.leaderboard-preview strong{font-size:34px;letter-spacing:-.04em;color:var(--accent-text,var(--accent))}.leaderboard-preview span,.leaderboard-preview p{color:var(--muted)}.leaderboard-preview p{margin:0;line-height:1.55}.leaderboard-tabs{display:flex;gap:8px;margin-bottom:16px}.leaderboard-summary-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:16px;margin-bottom:16px}.leaderboard-me,.leaderboard-stats{min-height:230px}.standing-number{font-size:clamp(54px,8vw,92px);font-weight:950;line-height:.9;letter-spacing:-.075em;background:linear-gradient(135deg,var(--accent),var(--accent-2));background-clip:text;color:transparent;margin:14px 0}.leaderboard-me h2{margin-bottom:8px}.leaderboard-me p,.leaderboard-me small,.leaderboard-stats small{color:var(--muted);line-height:1.55}.leaderboard-distribution{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:22px 0}.leaderboard-distribution>div{padding:13px;border:1px solid var(--line);border-radius:13px;background:var(--bg-2)}.leaderboard-distribution dt{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em}.leaderboard-distribution dd{margin:5px 0 0;font-weight:900}.leaderboard-board{overflow:hidden}.leaderboard-podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;align-items:end;margin:20px 0}.podium-place{position:relative;display:grid;justify-items:center;gap:5px;min-height:150px;padding:21px 14px 16px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(160deg,var(--bg-2),color-mix(in srgb,var(--accent-2) 8%,var(--panel)));text-align:center}.podium-place.place-1{min-height:180px;order:2;border-color:color-mix(in srgb,var(--warning) 52%,var(--line));background:linear-gradient(160deg,color-mix(in srgb,var(--warning) 10%,var(--bg-2)),var(--panel))}.podium-place.place-2{order:1}.podium-place.place-3{order:3}.podium-place i,.leaderboard-person>span{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#06131e;font-style:normal;font-weight:950}.podium-place b{max-width:100%;overflow:hidden;text-overflow:ellipsis}.podium-place small{color:var(--muted)}.podium-rank{position:absolute;left:12px;top:11px;color:var(--warning-text,var(--warning));font-weight:950}.leaderboard-table-wrap{overflow:auto;border:1px solid var(--line);border-radius:15px}.leaderboard-table{width:100%;min-width:670px;border-collapse:collapse}.leaderboard-table th,.leaderboard-table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line)}.leaderboard-table th{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.09em;background:var(--bg-2)}.leaderboard-table tbody tr:last-child td{border-bottom:0}.leaderboard-table tbody tr:hover td{background:color-mix(in srgb,var(--accent) 5%,transparent)}.leaderboard-rank{display:inline-grid;place-items:center;min-width:34px;height:34px;border-radius:10px;background:var(--bg-2);font-weight:900}.leaderboard-person{display:flex;align-items:center;gap:10px}.leaderboard-person>span{width:38px;height:38px}.leaderboard-person b,.leaderboard-person small{display:block}.leaderboard-person small{color:var(--muted);margin-top:2px}.leaderboard-privacy{margin-top:16px}.community-settings-panel .secondary-button{margin-top:8px}.account-leaderboard-choice{margin:2px 0 12px!important}
@media(max-width:900px){.leaderboard-summary-grid{grid-template-columns:1fr}.leaderboard-me,.leaderboard-stats{min-height:0}}
@media(max-width:620px){.leaderboard-preview{grid-template-columns:1fr}.leaderboard-preview>div:not(.empty-state){padding:0 0 14px;border-right:0;border-bottom:1px solid var(--line)}.leaderboard-podium{grid-template-columns:1fr;align-items:stretch}.podium-place,.podium-place.place-1{min-height:0;order:initial}.leaderboard-distribution{grid-template-columns:1fr}.leaderboard-board{padding:16px}.leaderboard-tabs .tab{flex:1}}

/* v5.6 hosted PayPal checkout */
.paypal-checkout-panel{position:relative;display:grid;grid-template-columns:minmax(240px,.72fr) minmax(320px,1fr);gap:24px;align-items:start;margin-bottom:20px;padding:24px;overflow:hidden;border-color:color-mix(in srgb,var(--accent) 34%,var(--line));background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 7%,var(--panel)),var(--panel) 58%,color-mix(in srgb,var(--accent-2) 5%,var(--panel)))}
.paypal-checkout-panel::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:linear-gradient(var(--accent),var(--accent-2))}.paypal-checkout-panel.hidden{display:none}.paypal-checkout-copy h2{margin:3px 0 9px;font-size:clamp(24px,3vw,34px);letter-spacing:-.035em}.paypal-checkout-copy>p:not(.eyebrow){max-width:48ch;margin:0;color:var(--muted);line-height:1.6}.checkout-status{margin-top:16px;padding:11px 13px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2);color:var(--muted);font-size:12px;line-height:1.5}.checkout-status.failed{border-color:color-mix(in srgb,var(--danger) 60%,var(--line));color:var(--danger-text,var(--danger))}#paypal-checkout-retry{margin-top:10px;width:100%}.paypal-checkout-widget{width:100%;min-width:0;min-height:175px;overflow:hidden;padding:18px;border:1px solid color-mix(in srgb,#ffffff 12%,var(--line));border-radius:16px;background:#fff;box-shadow:0 18px 50px rgba(0,0,0,.2)}#paypal-hosted-button-container{min-width:0;min-height:135px}.checkout-fulfillment-note{grid-column:1/-1;margin:0;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--warning) 8%,var(--bg-2));color:var(--muted);font-size:12px;line-height:1.55}.checkout-fulfillment-note strong{color:var(--warning-text,var(--warning))}
@media(max-width:1050px){.paypal-checkout-panel{grid-template-columns:1fr;padding:20px}.paypal-checkout-widget{min-height:165px}.checkout-fulfillment-note{grid-column:auto}}
@media(max-width:420px){.paypal-checkout-panel{margin-inline:-14px;padding:0}.paypal-checkout-copy{padding:17px 17px 5px}.paypal-checkout-widget{padding:0;border-inline:0;border-radius:0;box-shadow:none}.checkout-fulfillment-note{margin:8px 12px 12px}}

.commerce-coming-soon{margin-bottom:20px;border-color:color-mix(in srgb,var(--accent) 30%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 7%,var(--panel)),var(--panel) 58%,color-mix(in srgb,var(--accent-2) 6%,var(--panel)))}
.commerce-coming-soon h2{margin:4px 0 8px;font-size:clamp(23px,3vw,32px);letter-spacing:-.03em}.commerce-coming-soon>p:last-child{max-width:68ch;margin:0;color:var(--muted);line-height:1.6}
.theme-coming-soon:disabled{min-height:44px;opacity:.68;cursor:not-allowed;border-style:dashed;background:color-mix(in srgb,var(--accent) 10%,var(--bg-2));color:var(--muted)}

/* v5.7 progress-safe Update Center */
.update-center-panel{position:relative;overflow:hidden;border-color:color-mix(in srgb,var(--accent) 32%,var(--line));background:linear-gradient(155deg,color-mix(in srgb,var(--accent) 7%,var(--panel)),var(--panel) 62%)}.update-center-panel::after{content:"";position:absolute;width:160px;height:160px;right:-90px;top:-90px;border:22px solid color-mix(in srgb,var(--accent) 9%,transparent);border-radius:50%;pointer-events:none}.update-center-heading{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.update-center-heading h2{margin:0}.update-center-heading .level-badge{font-variant-numeric:tabular-nums;color:var(--accent-text,var(--accent))}.update-preservation{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0}.update-preservation>span{display:grid;grid-template-columns:auto 1fr;gap:3px 8px;align-items:baseline;padding:11px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2)}.update-preservation b{grid-row:1/3;color:var(--accent-text,var(--accent));font-size:20px;font-variant-numeric:tabular-nums}.update-preservation small{color:var(--muted);line-height:1.35}.update-status{display:grid;gap:4px;min-height:76px;padding:13px 14px;border:1px solid var(--line);border-radius:13px;background:var(--bg-2);line-height:1.45}.update-status strong{color:var(--text)}.update-status span{color:var(--muted);font-size:12px}.update-status.checking{border-color:color-mix(in srgb,var(--accent) 48%,var(--line))}.update-status.ready{border-color:color-mix(in srgb,var(--success) 55%,var(--line));background:color-mix(in srgb,var(--success) 7%,var(--bg-2))}.update-status.error{border-color:color-mix(in srgb,var(--danger) 55%,var(--line));background:color-mix(in srgb,var(--danger) 6%,var(--bg-2))}.update-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.update-actions>*{display:inline-flex;align-items:center;justify-content:center;min-height:44px;text-decoration:none}.update-help{display:block;margin-top:12px;color:var(--muted);line-height:1.5}.update-help code{color:var(--accent-text,var(--accent))}
@media(max-width:420px){.update-preservation{grid-template-columns:1fr}.update-actions{display:grid}.update-actions>*{width:100%}}

/* v5.8 adaptive Flashcard Studio and AI speaking edge light */
.card-studio{display:grid;gap:13px}.card-studio .settings-copy{margin:0}.card-studio-auto{display:grid;grid-template-columns:minmax(150px,.7fr) minmax(150px,.7fr) auto;gap:9px;align-items:end}.card-studio-auto label{margin:0}.card-studio-auto button{white-space:nowrap}.card-suggestion-heading{display:flex;justify-content:space-between;align-items:end;gap:10px;padding-top:4px;border-top:1px solid var(--line)}.card-suggestion-heading h3{margin:0}.card-suggestion-heading small{display:block;margin-top:4px;color:var(--muted)}.card-suggestions{display:grid;gap:7px;max-height:310px;overflow:auto}.card-suggestion{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;padding:10px;border:1px solid var(--line);border-radius:11px;background:var(--bg-2)}.card-suggestion input{width:auto;margin-top:3px}.card-suggestion b,.card-suggestion small{display:block}.card-suggestion small{margin-top:3px;color:var(--muted);line-height:1.4}.compact-empty{padding:25px 14px}.custom-card-details{border-top:1px solid var(--line);padding-top:9px}.custom-card-details summary{cursor:pointer;color:var(--accent-text,var(--accent));font-weight:850}.custom-card-form{display:grid;gap:10px;margin-top:12px}.custom-card-form textarea{min-height:76px;resize:vertical}.card-studio .tool-status{margin:0}.card-studio .toggle-row{margin:0}.tutor-speech-action{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.tutor-speech-action small{color:var(--muted);text-transform:none;letter-spacing:0}
html.ai-speaking body::before{content:"";position:fixed;z-index:9997;inset:0;pointer-events:none;border:2px solid color-mix(in srgb,var(--accent) 75%,white);box-shadow:inset 0 0 34px color-mix(in srgb,var(--accent) 24%,transparent),inset 0 0 70px color-mix(in srgb,var(--accent-2) 12%,transparent);animation:nexus-ai-edge-breathe 2.2s ease-in-out infinite}
html.ai-speaking body::after{content:"";position:fixed;z-index:9998;left:-90px;top:-90px;width:180px;height:180px;pointer-events:none;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 82%,white) 0,color-mix(in srgb,var(--accent-2) 42%,transparent) 34%,transparent 70%);filter:blur(13px);mix-blend-mode:screen;animation:nexus-ai-edge-cycle 7s linear infinite}
@keyframes nexus-ai-edge-breathe{0%,100%{opacity:.52}50%{opacity:.95}}
@keyframes nexus-ai-edge-cycle{0%{transform:translate3d(0,0,0)}25%{transform:translate3d(100vw,0,0)}50%{transform:translate3d(100vw,100vh,0)}75%{transform:translate3d(0,100vh,0)}100%{transform:translate3d(0,0,0)}}
@media(max-width:520px){.card-studio-auto{grid-template-columns:1fr}.card-studio-auto button{width:100%}}
@media(prefers-reduced-motion:reduce){html.ai-speaking body::after{display:none}html.ai-speaking body::before{animation:none;opacity:.7}}

/* v5.9 private saved-resource shelf */
.resource-layout{display:grid;grid-template-columns:minmax(310px,.7fr) minmax(0,1.3fr);gap:16px;align-items:start}.resource-editor-panel{position:sticky;top:82px}.resource-lock{padding:6px 9px;border:1px solid color-mix(in srgb,var(--success) 40%,var(--line));border-radius:999px;background:color-mix(in srgb,var(--success) 7%,var(--bg-2));color:var(--success-text,var(--success));font-size:10px;font-weight:850;white-space:nowrap}.resource-form{display:grid;gap:12px;margin-top:16px}.resource-form>label,.resource-form-row label,.resource-filters label{display:grid;gap:6px}.resource-form-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}.resource-form textarea{min-height:118px;resize:vertical}.resource-form-actions{display:flex;flex-wrap:wrap;gap:8px}.resource-filters{display:grid;grid-template-columns:minmax(180px,1fr) minmax(130px,.55fr) minmax(130px,.55fr);gap:9px;align-items:end;margin:14px 0}.resource-favorite-filter{display:flex!important;grid-column:1/-1;grid-template-columns:auto 1fr!important;align-items:center;justify-self:start;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg-2)}.resource-favorite-filter input{width:auto}.resource-list{display:grid;gap:11px}.resource-card{position:relative;display:grid;gap:12px;padding:16px;border:1px solid var(--line);border-radius:15px;background:linear-gradient(145deg,var(--bg-2),color-mix(in srgb,var(--accent-2) 3%,var(--panel)));overflow:hidden}.resource-card::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--line)}.resource-card.favorite::before{background:linear-gradient(var(--warning),var(--accent))}.resource-card>header{display:flex;justify-content:space-between;gap:12px}.resource-card h3{margin:5px 0 3px;font-size:18px;overflow-wrap:anywhere}.resource-card header p{margin:0;color:var(--muted);font-size:11px}.resource-category{color:var(--accent-text,var(--accent));font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.resource-favorite{display:grid;place-items:center;width:44px;height:44px;flex:0 0 auto;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--warning-text,var(--warning));font-size:24px}.resource-notes{margin:0;padding:11px 13px;border-left:3px solid color-mix(in srgb,var(--accent) 60%,var(--line));background:color-mix(in srgb,var(--accent) 4%,var(--panel));color:var(--text);line-height:1.55;white-space:pre-line;overflow-wrap:anywhere}.resource-tags{display:flex;flex-wrap:wrap;gap:6px}.resource-tags span{padding:5px 8px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--muted);font-size:10px}.resource-card>footer{display:flex;flex-wrap:wrap;gap:7px}.resource-card>footer a{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}.resource-delete{margin-left:auto;color:var(--danger-text,var(--danger))}
@media(max-width:960px){.resource-layout{grid-template-columns:1fr}.resource-editor-panel{position:static}.resource-filters{grid-template-columns:1fr 1fr}.resource-search{grid-column:1/-1}}
@media(max-width:560px){.resource-form-row,.resource-filters{grid-template-columns:1fr}.resource-search{grid-column:auto}.resource-card{padding:14px}.resource-card>footer{display:grid;grid-template-columns:1fr 1fr}.resource-card>footer .primary-button{grid-column:1/-1}.resource-delete{margin-left:0}.resource-form-actions{display:grid}.resource-form-actions>*{width:100%}.resource-lock{white-space:normal}}

/* v6.0 guided suggestions, certifications, PDF study, and quick setup */
.topic-card-builder{display:grid;grid-template-columns:.7fr 1.2fr .9fr auto;gap:9px;align-items:end;padding:13px;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));border-radius:13px;background:color-mix(in srgb,var(--accent) 4%,var(--bg-2))}.topic-card-builder label{margin:0}.local-pdf-panel{margin:16px 0}.pdf-reader-shell{margin:14px 0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#303030}.pdf-reader-heading{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;background:var(--bg-2)}#pdf-viewer{display:block;width:100%;height:min(72vh,760px);border:0}.pdf-discuss-form{display:grid;grid-template-columns:1.3fr .7fr auto;gap:9px;align-items:end;margin-top:14px}.pdf-discuss-form textarea{min-height:92px;resize:vertical}.certification-panel{margin-top:16px}.certification-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.certification-grid article{display:grid;align-content:start;gap:8px;padding:14px;border:1px solid var(--line);border-radius:13px;background:var(--bg-2)}.certification-grid article>b{font-size:17px}.certification-grid p{margin:0;color:var(--muted);line-height:1.5}.certification-grid a{color:var(--accent-text,var(--accent));font-weight:800}.terms-accept{display:grid!important;grid-template-columns:auto 1fr!important;align-items:start!important;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2)}.terms-accept input{width:auto;margin-top:3px}.terms-accept button{display:inline;padding:0;border:0;background:none;color:var(--accent-text,var(--accent));font:inherit;font-weight:900;text-decoration:underline}.terms-copy{display:grid;gap:11px;padding:0 20px 20px;line-height:1.6}.terms-copy p{margin:0;color:var(--muted)}
@media(max-width:980px){.topic-card-builder,.pdf-discuss-form{grid-template-columns:1fr 1fr}.certification-grid{grid-template-columns:1fr 1fr}.topic-card-builder button,.pdf-discuss-form button{width:100%}}
@media(max-width:620px){.topic-card-builder,.pdf-discuss-form,.certification-grid{grid-template-columns:1fr}#pdf-viewer{height:62vh}}
/* r1.1 polish */
button:disabled,.primary-button:disabled,.secondary-button:disabled{opacity:.45;cursor:not-allowed;filter:saturate(.4)}
.lesson-summary{color:var(--muted);font-size:1.02rem;line-height:1.55;margin:0 0 14px;max-width:70ch}
.lesson-header h1{font-family:var(--display-font);letter-spacing:-.01em}
.lesson-body h3{margin-top:24px}
.library-warning{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border:1px solid var(--warning);border-radius:14px;background:color-mix(in srgb,var(--warning) 12%,transparent);color:var(--text);font-size:.92rem}
.book-note{align-self:center;color:var(--muted);font-size:.85rem}
.own-ai-fields{display:grid;gap:10px;margin-top:10px}
.own-ai-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#own-ai-status{font-size:.85rem;color:var(--muted)}
.own-ai-setup{border:1px solid var(--line);border-radius:14px;padding:10px 14px;margin-top:4px}
.own-ai-setup summary{cursor:pointer;font-weight:600}
.own-ai-setup code{background:var(--panel-2);padding:2px 6px;border-radius:6px;font-size:.85em;word-break:break-all}
.own-ai-setup ol{padding-left:20px;display:grid;gap:8px;margin:10px 0}
.sound-family-grid article table{font-size:.85rem}
.onboarding-page label em{font-style:normal;color:var(--muted);font-weight:400}
.study-card-extra{display:block;margin-top:14px;font-size:.55em;font-weight:400;color:var(--muted);line-height:1.4}
/* desktop density: fit the dashboard at 100% zoom on laptops */
@media (min-width:821px){
:root{--sidebar:236px;--topbar:64px}
main{padding:22px 26px 60px}
.today-hero{padding:clamp(20px,2.6vw,34px);gap:20px;border-radius:22px}
.today-hero h1{font-size:clamp(26px,2.6vw,38px);margin:6px 0 8px}
.today-hero p{font-size:.98rem}
.page-heading h1{font-size:clamp(26px,2.6vw,38px)}
.page-heading{margin-bottom:16px}
.panel{padding:18px}
.panel h2,.panel-heading h2{font-size:1.15rem}
.eyebrow{font-size:.68rem}
.sidebar .brand-copy small{display:none}
.nav-item{padding:9px 12px}
}
.term-link{display:inline;background:none;border:none;padding:0;margin:0;font:inherit;color:var(--accent-text,var(--accent));border-bottom:1px dotted var(--accent);cursor:pointer}
.term-link:hover{border-bottom-style:solid}
.lesson-plain{margin:0 0 16px;padding:10px 14px;border-left:3px solid var(--accent);border-radius:0 12px 12px 0;background:color-mix(in srgb,var(--accent) 8%,transparent);font-size:.95rem;color:var(--text)}
.glossary-dialog{border:1px solid var(--line);border-radius:18px;background:var(--panel);color:var(--text);padding:22px;max-width:420px;box-shadow:var(--shadow)}
.glossary-dialog::backdrop{background:rgba(0,0,0,.5)}
.glossary-dialog h3{margin:4px 0 8px;font-size:1.3rem}
.glossary-dialog p{margin:0 0 10px;line-height:1.5}
.glossary-example{color:var(--muted);font-size:.92rem}
/* games */
.games-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:18px}
.game-hint{color:var(--muted);font-size:.95rem;margin:8px 0}
.spaceman-scene{display:flex;align-items:center;gap:6px;min-height:56px;padding:8px 12px;border:1px solid var(--line);border-radius:14px;background:var(--bg-2);overflow:hidden}
.spaceman-scene .ship{font-size:1.7rem;order:0}
.spaceman-scene .tether{display:flex;gap:4px;order:1}
.spaceman-scene .tether span{width:12px;height:4px;border-radius:2px;background:var(--accent)}
.spaceman-scene .tether span.off{background:var(--line);opacity:.4}
.spaceman-scene .astronaut{font-size:1.6rem;order:2;transition:transform .5s ease,opacity .5s ease}
.spaceman-scene .astronaut.drift-1{transform:translateX(8px) rotate(10deg)}
.spaceman-scene .astronaut.drift-2{transform:translateX(18px) rotate(-14deg)}
.spaceman-scene .astronaut.drift-3{transform:translateX(30px) rotate(22deg)}
.spaceman-scene .astronaut.drift-4{transform:translateX(44px) rotate(-30deg)}
.spaceman-scene .astronaut.drift-5{transform:translateX(60px) rotate(40deg)}
.spaceman-scene .astronaut.drift-6{transform:translateX(80px) rotate(-52deg)}
.spaceman-scene .astronaut.lost{transform:translateX(120px) rotate(80deg);opacity:.25}
@media(prefers-reduced-motion:reduce){.spaceman-scene .astronaut{transition:none}}
.spaceman-word{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0;min-height:44px}
.spaceman-word .letter{width:30px;height:38px;border-bottom:2px solid var(--accent);display:grid;place-items:center;font-size:1.25rem;font-weight:700}
.spaceman-word .letter.gap{border-bottom-color:transparent}
.spaceman-keys{display:flex;flex-wrap:wrap;gap:6px}
.spaceman-keys .key{min-width:34px;height:36px;border:1px solid var(--line);border-radius:9px;background:var(--panel-2);color:var(--text);font-weight:600;cursor:pointer}
.spaceman-keys .key.used{opacity:.35}
.game-actions{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.gapfill-sentence{font-size:1.15rem;line-height:1.7;margin:10px 0;min-height:44px}
.gap-slot{color:var(--accent-text,var(--accent));font-weight:700;letter-spacing:2px}
.gapfill-options{display:flex;flex-wrap:wrap;gap:8px}
/* classroom */
.classroom-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:18px;align-items:start}
.class-home-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:10px 0}
.class-assignment-list{display:grid;gap:10px}
.class-assignment{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--bg-2)}
.class-assignment small{display:block;color:var(--muted)}
.class-code-bar{display:flex;align-items:center;gap:10px;border:1px dashed var(--accent);border-radius:12px;padding:10px 14px;margin:8px 0;font-size:1.05rem}
.class-code-bar b{letter-spacing:4px;font-size:1.3rem}
.class-live{border:1px solid var(--accent);border-radius:16px;padding:14px;margin:12px 0;background:color-mix(in srgb,var(--accent) 7%,transparent)}
.live-lobby{display:grid;gap:4px}
.live-lobby span{color:var(--muted)}
.live-slide h3{font-size:1.5rem;margin:6px 0}
.live-slide p{font-size:1.1rem;line-height:1.6}
.live-question h3{margin:6px 0 12px}
.live-scoreboard{list-style:none;padding:10px 0 0;margin:0;display:grid;gap:4px}
.live-topic{display:flex;flex-direction:column;gap:2px;font-size:.85rem}
/* the live room: a countdown you can feel, a shape per answer so the colour is
   never the only cue, and standings that stay up when the session ends */
/* a chart cannot say what it is for; these two lines can */
.lesson-guide{margin:14px 0;padding:13px 15px;border:1px solid color-mix(in srgb,var(--accent) 26%,var(--line));border-left-width:4px;border-radius:0 13px 13px 0;background:color-mix(in srgb,var(--accent) 5%,var(--panel))}
.lesson-guide b{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-text,var(--accent));margin-bottom:5px}
.lesson-guide p{margin:0;line-height:1.6}
.lesson-guide.lesson-do{border-color:color-mix(in srgb,var(--success) 34%,var(--line));background:color-mix(in srgb,var(--success) 6%,var(--panel))}
.lesson-guide.lesson-do b{color:var(--success-text,var(--success))}
/* show a little, expand only if asked — the rule the saved-links shelf follows */
.chart-fold{margin:9px 0}
.chart-fold>.table-scroll{margin:0}
.chart-more{margin-top:8px}
.chart-more>summary{cursor:pointer;display:inline-block;padding:7px 12px;border:1px solid var(--line);border-radius:11px;background:var(--panel);font-size:12px;font-weight:800;color:var(--accent-text,var(--accent));list-style:none}
.chart-more>summary::-webkit-details-marker{display:none}
.chart-more>summary::after{content:" ▾"}
.chart-more[open]>summary::after{content:" ▴"}
.chart-more>summary:hover{border-color:var(--accent)}
.chart-more>.table-scroll{margin-top:8px}
/* a pair that was guessed must not look like a pair that was verified */
.book-pair{margin:6px 0 0;font-size:12px;line-height:1.45}
.book-pair small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.book-pair.pair-sure{color:var(--success-text,var(--success))}
.book-pair.pair-guess{color:var(--warning-text,var(--warning))}
/* Charts and tables were paying for air: twelve pixels of padding on every cell
   of a six-by-seven grid pushed the useful part off the screen on a phone. */
.cheat-endings th,.cheat-endings td{padding:7px 9px}
.pattern-table th,.pattern-table td{padding:7px 8px}
.data-table th,.data-table td{padding:9px 10px}
.table-scroll{margin:9px 0}
@media(max-width:820px){
  .cheat-endings th,.cheat-endings td{padding:6px 7px;font-size:13px}
  .cheat-endings thead th small,.cheat-endings tbody th small{font-size:10px}
  .cheat-tense{margin-top:13px}
  .data-table th,.data-table td{padding:8px 9px}
  /* the pronoun column was taking more than half a phone screen and pushing the
     third verb group off the side */
  .cheat-endings{min-width:0}
  .cheat-endings tbody th{max-width:8.5em;line-height:1.25;overflow-wrap:break-word;hyphens:auto}
  .cheat-endings tbody th small{display:inline;margin-left:5px}
  .cheat-head-actions{width:100%}
}
/* the cheat sheet: one table per tense, a column per verb group, endings only */
.cheat-head-actions{display:flex;gap:8px;flex-wrap:wrap}
.cheat-tense{margin-top:18px}
.cheat-tense h3{margin:0 0 8px;font-size:1.05rem;color:var(--accent-text,var(--accent))}
.cheat-endings{width:100%;border-collapse:collapse;min-width:320px}
.cheat-endings th,.cheat-endings td{padding:9px 11px;border:1px solid var(--line);text-align:left;vertical-align:top}
.cheat-endings thead th{background:var(--bg-2);white-space:nowrap}
.cheat-endings thead th small,.cheat-endings tbody th small{display:block;font-weight:500;color:var(--muted);font-size:11px;margin-top:2px}
.cheat-endings tbody th{background:var(--bg-2);font-weight:700;white-space:nowrap}
.cheat-ending{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.cheat-note{margin-top:14px}
.scripture-compare-grid fieldset .scripture-edition,.scripture-compare-grid fieldset .scripture-edition-note{grid-column:1/-1}
.scripture-edition select{max-width:100%}
.scripture-edition-note{margin:6px 0 0;font-size:12px;color:var(--muted);line-height:1.5}
.scripture-edition-note:empty{display:none}
.nav-history{display:flex;gap:4px;flex:0 0 auto}
.nav-history .icon-button{width:36px;height:36px;font-size:20px;line-height:1;font-weight:700}
.nav-history .icon-button:disabled{opacity:.35;filter:none;cursor:default;transform:none}
@media(max-width:820px){.nav-history .icon-button{width:34px;height:34px}}
.live-lobby.waiting{opacity:.92}
.live-lobby.waiting b::before{content:"";display:inline-block;width:9px;height:9px;margin-right:8px;border-radius:50%;background:var(--accent);animation:live-pulse 1.6s ease-in-out infinite}
@keyframes live-pulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
@media(prefers-reduced-motion:reduce){.live-lobby.waiting b::before{animation:none;opacity:.9}}
.live-rank{float:right;font-weight:800;color:var(--accent-text,var(--accent))}
.live-clock{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;margin:10px 0 4px}
.live-clock::before{content:"";grid-column:1;grid-row:1;height:10px;border-radius:999px;background:color-mix(in srgb,var(--line) 70%,transparent)}
.live-clock i{grid-column:1;grid-row:1;justify-self:start;height:10px;width:var(--live-left,100%);border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .25s linear}
.live-clock b{grid-column:2;grid-row:1;min-width:2.2em;text-align:right;font-size:13px;font-weight:900;color:var(--muted);font-variant-numeric:tabular-nums}
.live-clock.urgent i{background:var(--danger)}
.live-shape{display:inline-grid;place-items:center;width:24px;height:24px;margin-right:10px;border-radius:7px;background:color-mix(in srgb,var(--accent) 18%,transparent);font-size:12px;vertical-align:-5px}
/* results are read, not pressed, so the generic disabled dimming was hiding the
   one line the class is there to see */
.live-question .quiz-option:disabled{opacity:.62;filter:none;cursor:default}
.live-question .quiz-option.correct:disabled,.live-question .quiz-option.mine:disabled{opacity:1}
.live-question .quiz-option.correct{border-width:2px;font-weight:800}
.live-verdict{margin:10px 0 0;font-weight:700}
.live-question.was-right .live-verdict{color:var(--success-text,var(--success))}
.live-question.was-wrong .live-verdict{color:var(--muted)}
.live-final{display:grid;gap:2px}
.live-final h3{margin:4px 0 0;font-size:1.5rem}
.live-standings{margin-top:12px}
.live-standings ol{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:5px;counter-reset:place}
.live-standings li{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:11px;background:var(--bg-2)}
.live-standings li.you{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--bg-2))}
.live-standings li span{font-weight:900;color:var(--muted)}
.live-standings li em{font-style:normal;font-weight:800}
.quiz-dialog{border:1px solid var(--line);border-radius:18px;background:var(--panel);color:var(--text);padding:22px;max-width:520px;width:92vw;box-shadow:var(--shadow)}
.quiz-dialog::backdrop{background:rgba(0,0,0,.55)}
.quiz-top{display:flex;justify-content:space-between;color:var(--muted);margin-bottom:8px}
.quiz-options{display:grid;gap:8px;margin:10px 0}
.quiz-option{text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2);color:var(--text);cursor:pointer;font-size:1rem}
.quiz-option:hover:not(:disabled){border-color:var(--accent)}
.quiz-option.correct{border-color:var(--success);background:color-mix(in srgb,var(--success) 14%,transparent)}
.quiz-option.wrong{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,transparent)}
.quiz-option.mine{outline:2px solid var(--accent)}
.quiz-option em{float:right;font-style:normal;color:var(--muted)}
/* delight: skeletons, xp bursts, level-up, reactive glow, stronger AI light */
.skeleton-card{border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:18px;display:grid;gap:10px;min-height:96px;position:relative;overflow:hidden}
.skeleton-card span{display:block;height:12px;border-radius:6px;background:var(--panel-2)}
.skeleton-card span:nth-child(1){width:45%}
.skeleton-card span:nth-child(2){width:85%}
.skeleton-card span:nth-child(3){width:65%}
.skeleton-card::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--text) 7%,transparent) 50%,transparent 70%);animation:nexus-shimmer 1.4s infinite}
.skeleton-card.book{min-height:180px}
@keyframes nexus-shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){.skeleton-card::after{animation:none}}
.xp-burst{position:fixed;left:var(--burst-x,50%);bottom:26%;z-index:9999;pointer-events:none;font-weight:800;font-size:1.5rem;color:var(--accent-text,var(--accent));text-shadow:0 2px 14px color-mix(in srgb,var(--accent) 60%,transparent);animation:nexus-xp-rise 1.4s ease-out forwards}
@keyframes nexus-xp-rise{0%{transform:translateY(0) scale(.7);opacity:0}18%{opacity:1;transform:translateY(-14px) scale(1.15)}100%{transform:translateY(-110px) scale(1);opacity:0}}
.level-pop{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;pointer-events:none;background:rgba(0,0,0,.28);animation:nexus-fade 2.6s forwards}
.level-pop-card{position:relative;background:var(--panel);border:1px solid var(--accent);border-radius:22px;padding:30px 46px;text-align:center;box-shadow:0 24px 80px rgba(0,0,0,.4);animation:nexus-pop .5s cubic-bezier(.2,1.6,.4,1)}
.level-pop-card b{display:block;font-size:2rem;color:var(--accent-text,var(--accent))}
.level-pop-card span{color:var(--muted)}
.level-pop .confetti{position:absolute;top:50%;left:50%;width:9px;height:9px;border-radius:2px;background:var(--accent);animation:nexus-confetti 1.6s ease-out forwards}
.level-pop .confetti:nth-child(odd){background:var(--accent-2);border-radius:50%}
.level-pop .c0{--cx:-130px;--cy:-90px}.level-pop .c1{--cx:120px;--cy:-110px}.level-pop .c2{--cx:-80px;--cy:-140px}.level-pop .c3{--cx:70px;--cy:-70px}.level-pop .c4{--cx:-150px;--cy:-20px}.level-pop .c5{--cx:150px;--cy:-40px}.level-pop .c6{--cx:-40px;--cy:-160px}.level-pop .c7{--cx:40px;--cy:-150px}.level-pop .c8{--cx:-110px;--cy:-120px}.level-pop .c9{--cx:100px;--cy:-130px}
@keyframes nexus-confetti{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--cx),var(--cy)) rotate(320deg);opacity:0}}
@keyframes nexus-pop{0%{transform:scale(.6)}100%{transform:scale(1)}}
@keyframes nexus-fade{0%,70%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.xp-burst,.level-pop{animation-duration:.01s}.level-pop .confetti{display:none}.level-pop-card{animation:none}}
html.ai-speaking body::after{width:260px;height:260px;filter:blur(18px)}
html.ai-speaking .app-shell{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 55%,transparent),inset 0 0 46px color-mix(in srgb,var(--accent) 22%,transparent);transition:box-shadow .4s;border-radius:0}
body::after{transition:opacity .3s}
html{--pointer-x:50%;--pointer-y:30%}
#bg-react{position:fixed;inset:0;z-index:0;pointer-events:none;will-change:transform;background:radial-gradient(640px circle at var(--pointer-x) var(--pointer-y),color-mix(in srgb,var(--accent) 7%,transparent),transparent 70%)}
.app-shell{position:relative;z-index:1}
@media(hover:none),(prefers-reduced-motion:reduce){#bg-react{display:none}}
.dictionary-pack-card.downloaded{border-color:var(--success)}
.pack-note{display:block;margin-top:8px;color:var(--success-text,var(--success))}
.rating-row .hard{border-color:var(--warning)}
.rating-row .good{border-color:var(--accent)}
/* course map */
.course-map{display:grid;gap:18px;max-width:860px;margin:0 auto}
.map-unit{border:1px solid var(--line);border-radius:20px;background:var(--panel);padding:16px 18px}
.map-unit.complete{border-color:var(--success)}
.map-unit header{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.map-unit header h2{margin:0;font-size:1.1rem;flex:1}
.map-unit header small{color:var(--muted)}
.map-unit-tag{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text,var(--accent));border:1px solid var(--accent);border-radius:999px;padding:3px 10px;white-space:nowrap}
.map-nodes{display:flex;flex-wrap:wrap;gap:10px}
.map-node{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;border:1px solid var(--line);border-radius:14px;background:var(--bg-2);color:var(--text);padding:10px 14px;cursor:pointer;min-width:180px;flex:1 1 180px;max-width:260px}
.map-node:hover{border-color:var(--accent)}
.map-node .map-dot{grid-row:1/3;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;background:var(--panel-2);border:2px solid var(--line)}
.map-node.done .map-dot{background:var(--success);border-color:var(--success);color:#fff}
.map-node.current{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.map-node.current .map-dot{border-color:var(--accent);animation:nexus-node-pulse 1.6s infinite}
@keyframes nexus-node-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 45%,transparent)}50%{box-shadow:0 0 0 8px transparent}}
@media(prefers-reduced-motion:reduce){.map-node.current .map-dot{animation:none}}
.map-label{font-weight:600;font-size:.95rem}
.map-meta{grid-column:2;color:var(--muted);font-size:.78rem}
.lesson-back{margin-bottom:10px}
/* bottom nav (mobile) */
.bottom-nav{display:none}
@media(max-width:820px){
.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:repeat(5,1fr);background:var(--panel);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
.bottom-nav button{display:grid;justify-items:center;gap:2px;background:none;border:none;color:var(--muted);font-size:.72rem;font-weight:600;padding:6px 2px;border-radius:10px;cursor:pointer}
.bottom-nav button span{font-size:1.15rem;line-height:1}
.bottom-nav button.active{color:var(--accent-text,var(--accent))}
main{padding-bottom:96px}
}
/* guided tour */
.tour-pop{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:70;background:var(--panel);border:1px solid var(--accent);border-radius:16px;padding:16px 18px;max-width:340px;width:calc(100vw - 32px);box-shadow:0 18px 60px rgba(0,0,0,.35)}
.tour-pop b{display:block;font-size:1.05rem;margin-bottom:4px}
.tour-pop p{margin:0 0 12px;color:var(--muted);line-height:1.45}
@media(max-width:820px){.tour-pop{bottom:96px}}
.tour-pulse{position:relative;animation:nexus-node-pulse 1.4s infinite;border-radius:12px}
@media(prefers-reduced-motion:reduce){.tour-pulse{animation:none;outline:2px solid var(--accent)}}
/* star defense */
.invaders-wrap{position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:radial-gradient(circle at 30% 20%,color-mix(in srgb,var(--accent-2) 12%,transparent),transparent 60%),var(--bg-2)}
#invaders-canvas{display:block;width:100%;height:auto}
.invaders-overlay{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:10px;background:color-mix(in srgb,var(--bg) 72%,transparent);text-align:center}
.invaders-overlay b{font-size:1.4rem}
.invaders-lives{color:var(--danger-text,var(--danger));font-size:1.2rem;letter-spacing:2px;margin-left:auto}
.invaders-controls{user-select:none}
@media(hover:hover) and (min-width:821px){.invaders-controls [data-inv-left],.invaders-controls [data-inv-right]{display:none}}
#main:focus:not(:focus-visible){outline:none}
/* iteration 2 */
#main:focus{outline:none}
.study-layout>*{min-width:0}
.topic-card-builder{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.card-studio select,.card-studio input{min-width:0;width:100%;max-width:100%}
.card-studio *{min-width:0}
.study-sidebar .panel{overflow:hidden}
.card-studio-auto{display:flex;flex-wrap:wrap;gap:10px;align-items:end}
.card-studio-auto>*{flex:1 1 130px}
.card-studio-auto button{flex:1 1 100%;white-space:nowrap}
/* per-tense tables (image-style simplicity) */
.tense-block{margin:18px 0}
.tense-block h3{margin:0 0 4px;font-size:1.15rem;text-align:center}
.tense-what{margin:0 auto 12px;color:var(--muted);font-size:.92rem;text-align:center;max-width:52ch}
.tense-table{margin:0 auto;border-collapse:collapse;background:var(--panel)}
.tense-table th,.tense-table td{border:1px solid var(--line);padding:8px 22px;text-align:center;font-size:1rem}
.tense-table thead th{font-weight:800;font-size:1.05rem}
.tense-table tbody th{font-weight:500;text-align:right;white-space:nowrap}
.tense-table td{font-weight:700;letter-spacing:.02em}
/* premium hover: lift + chromatic ring */
@media(hover:hover){
.map-node:hover,.book-card:hover,.game-panel:hover,.reference-grid button:hover,.class-assignment:hover,.dictionary-pack-card:hover,.pattern-card:hover{transform:translateY(-2px) scale(1.012);transition:transform .18s ease,box-shadow .18s ease}
.map-node,.book-card,.game-panel,.reference-grid button,.class-assignment,.dictionary-pack-card,.pattern-card{transition:transform .18s ease,box-shadow .18s ease}
.map-node:hover,.reference-grid button:hover{box-shadow:0 6px 22px rgba(0,0,0,.10),0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent),0 0 18px color-mix(in srgb,var(--accent-2) 30%,transparent)}
.book-card:hover,.game-panel:hover,.class-assignment:hover,.dictionary-pack-card:hover,.pattern-card:hover{box-shadow:0 10px 30px rgba(0,0,0,.12),0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent),0 0 24px color-mix(in srgb,var(--accent-2) 26%,transparent)}
.primary-button:hover,.secondary-button:hover{transform:translateY(-1px) scale(1.02);box-shadow:0 4px 16px color-mix(in srgb,var(--accent) 35%,transparent)}
.primary-button,.secondary-button{transition:transform .15s ease,box-shadow .15s ease,filter .15s ease}
}
@media(prefers-reduced-motion:reduce){.map-node:hover,.book-card:hover,.game-panel:hover,.reference-grid button:hover,.primary-button:hover,.secondary-button:hover{transform:none}}
/* progressive path */
.map-unit-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:1px solid var(--line);border-radius:16px;background:var(--panel);color:var(--text);padding:12px 16px;cursor:pointer}
.map-unit-row .map-row-dot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:700;background:var(--panel-2);border:2px solid var(--line);flex:none}
.map-unit-row.done .map-row-dot{background:var(--success);border-color:var(--success);color:#fff}
.map-unit-row.current{border-color:var(--accent)}
.map-unit-row.future{opacity:.55}
.map-row-title{font-weight:600;flex:1}
.map-row-meta{color:var(--muted);font-size:.85rem}
.map-trail{display:grid;gap:10px;position:relative;padding:6px 0}
.map-trail::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--line);transform:translateX(-50%)}
.trail-step{display:flex;position:relative;z-index:1}
.trail-step.left{justify-content:flex-start;padding-right:52%}
.trail-step.right{justify-content:flex-end;padding-left:52%}
.trail-step .map-node{width:100%;max-width:none;flex:none}
@media(max-width:640px){.trail-step.left,.trail-step.right{padding:0}.map-trail::before{left:24px}}
.study-timer{font-variant-numeric:tabular-nums;color:var(--accent-text,var(--accent));font-weight:700;margin:0 10px}
/* game chooser + full pages */
.game-chooser{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;max-width:900px;margin:0 auto}
.game-pick{display:grid;gap:8px;justify-items:center;text-align:center;padding:30px 20px;border:1px solid var(--line);border-radius:20px;background:var(--panel);color:var(--text);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}
.game-pick-art{font-size:2.2rem;letter-spacing:4px}
.game-pick b{font-size:1.2rem}
.game-pick span:last-child{color:var(--muted);font-size:.9rem}
@media(hover:hover){.game-pick:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 10px 30px rgba(0,0,0,.12),0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent),0 0 22px color-mix(in srgb,var(--accent-2) 28%,transparent)}}
#games-panels .game-panel{display:none}
[data-view-panel="games"].playing #game-chooser{display:none}
#games-panels .game-panel.active-game{display:block;max-width:900px;margin:0 auto}
.game-panel.active-game .invaders-wrap{max-width:760px;margin:0 auto}
.invaders-power{margin-left:12px;color:var(--accent-text,var(--accent));font-size:.9rem;font-weight:600}
/* logo */
.brand-mark{display:grid;place-items:center;padding:5px;background:var(--panel-2);border:1px solid var(--line)}
.brand-mark svg{width:100%;height:100%;display:block}
/* free-AI provider presets */
.own-ai-presets{display:grid;gap:8px}
.preset-label{font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.preset-chips{display:flex;flex-wrap:wrap;gap:8px}
.preset-chip{border:1px solid var(--line);border-radius:999px;background:var(--bg-2);color:var(--text);padding:8px 14px;font-weight:600;font-size:.9rem;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
@media(hover:hover){.preset-chip:hover{transform:translateY(-1px);border-color:var(--accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent),0 0 14px color-mix(in srgb,var(--accent-2) 25%,transparent)}}
.preset-chip.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)}
.preset-note{margin:0;color:var(--muted);font-size:.9rem;line-height:1.5}
.preset-note a{font-weight:600}
/* tutor memory + backup keys */
.memory-summary{border:1px solid var(--line);border-radius:14px;background:var(--bg-2);padding:12px 14px;color:var(--muted);font-size:.92rem;line-height:1.6;margin-bottom:12px}
.own-ai-backups{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.own-ai-backups .preset-label{width:100%}
.backup-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:5px 8px 5px 12px;font-size:.85rem;background:var(--bg-2)}
.backup-chip.resting{opacity:.55}
.backup-chip button{border:none;background:none;color:var(--muted);cursor:pointer;font-size:1rem;line-height:1}
.own-ai-device{display:grid;gap:10px}
.device-progress{width:100%;height:10px;border-radius:999px;overflow:hidden;accent-color:var(--accent)}
/* shimmering radial outline on cards */
@property --nx-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.map-node,.book-card,.game-panel,.game-pick,.reference-grid button,.class-assignment,.dictionary-pack-card,.pattern-card,.map-unit-row,.preset-chip{position:relative;isolation:isolate}
.map-node::after,.book-card::after,.game-panel::after,.game-pick::after,.reference-grid button::after,.class-assignment::after,.dictionary-pack-card::after,.pattern-card::after,.map-unit-row::after,.preset-chip::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--nx-angle),transparent 0deg,color-mix(in srgb,var(--accent) 85%,transparent) 55deg,color-mix(in srgb,var(--accent-2) 85%,transparent) 110deg,transparent 190deg,transparent 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;opacity:0;transition:opacity .25s ease;pointer-events:none;z-index:2}
@media(hover:hover){
.map-node:hover::after,.book-card:hover::after,.game-panel:hover::after,.game-pick:hover::after,.reference-grid button:hover::after,.class-assignment:hover::after,.dictionary-pack-card:hover::after,.pattern-card:hover::after,.map-unit-row:hover::after,.preset-chip:hover::after{opacity:1;animation:nx-shimmer 2.4s linear infinite}
}
.map-node.current::after{opacity:.75;animation:nx-shimmer 3.6s linear infinite}
@keyframes nx-shimmer{to{--nx-angle:360deg}}
@media(prefers-reduced-motion:reduce){.map-node::after,.book-card::after,.game-panel::after,.game-pick::after,.reference-grid button::after,.class-assignment::after,.dictionary-pack-card::after,.pattern-card::after,.map-unit-row::after,.preset-chip::after{animation:none!important}}
/* onboarding pitch */
.pitch h3{margin:14px 0 6px;font-size:1.05rem;color:var(--accent-text,var(--accent))}
.pitch h3:first-child{margin-top:0}
.pitch p{margin:0 0 10px;line-height:1.65}
.pitch-close{font-weight:600;color:var(--text)}
/* paged bilingual reader */
#reader-panes{position:relative}
.reader-link{position:absolute;inset:0;pointer-events:none;z-index:5;overflow:visible}
.reader-page-copy{font-weight:600;color:var(--muted);font-size:.9rem;margin:0 4px}
.reader-text{scroll-behavior:smooth}
.rw{cursor:pointer;border-radius:4px;padding:0 1px;transition:background .15s ease}
@media(hover:hover){.rw:hover{background:color-mix(in srgb,var(--accent) 16%,transparent)}}
.rw.linked{background:none;outline:none}
.word-card{max-width:460px}
.word-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px}
.word-card-head h3{margin:0;font-size:1.5rem}
.word-meaning{font-size:1.05rem;margin:0 0 10px}
.word-more{margin:0 0 10px;padding-left:18px;color:var(--muted)}
.word-verb{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:10px}
.word-verb .tense-table{margin:8px 0}
.word-verb .tense-table th{text-transform:capitalize;font-weight:500}
.word-cognate{color:var(--muted);font-size:.92rem}
.word-card[open].anchored{inset:auto;right:auto;bottom:auto}
.word-card[open]{position:fixed;inset:auto 24px 24px auto;margin:0;z-index:80;width:min(420px,calc(100vw - 32px));box-shadow:0 22px 60px rgba(0,0,0,.28);animation:nx-word-in .18s ease}
@keyframes nx-word-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:820px){.word-card[open]{inset:auto 12px 96px 12px;width:auto}}
@media(prefers-reduced-motion:reduce){.word-card[open]{animation:none}}
/* ---- liquid glass surfaces ---- */
.nx-defs{position:absolute;width:0;height:0;opacity:0;pointer-events:none}
.word-card[open],.tour-pop,.bottom-nav{background:color-mix(in srgb,var(--panel) 66%,transparent);-webkit-box-shadow:inset 0 0 2px 1px rgb(255 255 255/.38),inset 0 0 12px 4px rgb(255 255 255/.12),0 18px 50px rgba(0,0,0,.22)}

/* The lit rim was on exactly one card. Every raised surface wears it now — but
   the modal dialogs get the rim only: they sit over a dark backdrop, and making
   them translucent would drag their own text down with them. */
.glossary-dialog,.quiz-dialog,.detail-dialog,.account-dialog,.exam-dialog,.panel,.record-card,.metric-card,.study-card{box-shadow:inset 0 0 0 1px rgb(255 255 255/.10),inset 0 1px 0 0 rgb(255 255 255/.22),0 18px 50px rgba(0,0,0,.22)}
/* ---- holographic premium surfaces ---- */
@property --nx-holo-a{syntax:"<percentage>";initial-value:20%;inherits:false}
@property --nx-holo-b{syntax:"<percentage>";initial-value:80%;inherits:false}
.theme-choice.locked,.game-pick{position:relative;overflow:hidden}
.theme-choice.locked::before,.game-pick::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;opacity:var(--nx-holo-opacity,.34);mix-blend-mode:var(--nx-holo-blend,multiply);background:radial-gradient(120% 90% at var(--nx-holo-a) 8%,oklch(78% .19 305/.85),transparent 58%),radial-gradient(120% 90% at var(--nx-holo-b) 96%,oklch(80% .17 195/.8),transparent 58%),conic-gradient(from 200deg,oklch(82% .16 25/.55),oklch(84% .15 145/.55),oklch(80% .17 265/.55),oklch(82% .16 25/.55));}
.theme-choice.locked::after,.game-pick .holo-sheen{content:""}
.game-pick,.theme-choice.locked{background-image:linear-gradient(120deg,transparent 42%,color-mix(in srgb,var(--nx-sheen,#fff) 45%,transparent) 50%,transparent 58%);background-size:280% 280%;background-position:0% 50%;transition:background-position .9s ease,transform .18s ease,box-shadow .18s ease}
@media(hover:hover){.game-pick:hover,.theme-choice.locked:hover{background-position:100% 50%}}
.theme-choice.locked>*,.game-pick>*{position:relative;z-index:2}
@keyframes nx-holo{to{--nx-holo-a:80%;--nx-holo-b:22%}}
@media(prefers-reduced-motion:reduce){.theme-choice.locked::before,.game-pick::before{animation:none;opacity:.28}}
/* ---- letters settling into place ---- */
.nx-reveal span{display:inline-block;white-space:pre;transform:translate(var(--dx,0),var(--dy,0)) rotate(var(--dr,0deg));opacity:0;filter:blur(4px);transition:transform .55s cubic-bezier(.2,.9,.25,1),opacity .5s ease,filter .5s ease;transition-delay:calc(var(--i,0)*18ms)}
.nx-reveal.settled span{transform:none;opacity:1;filter:none}
@media(prefers-reduced-motion:reduce){.nx-reveal span{transition:none;opacity:1;transform:none;filter:none}}
/* ---- curved scrollbars ---- */
.has-curve{scrollbar-width:none}
.has-curve::-webkit-scrollbar{width:0;height:0}
.curve-bar{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:visible}
.curve-track{fill:none;stroke:color-mix(in srgb,var(--line) 80%,transparent);stroke-width:3;stroke-linecap:round}
.curve-thumb{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;transition:stroke .2s ease}
html{--nx-holo-blend:multiply;--nx-holo-opacity:.34;--nx-sheen:#5b6b8c}
html.theme-soft-dark,html.theme-pitch-black,html.theme-high-contrast,html.theme-popsicle,html.theme-parchment,html.theme-velvet,html.theme-aurora,html.theme-ocean,html.theme-solar,html.theme-arcade,html.theme-forest,html.theme-terminal{--nx-holo-blend:plus-lighter;--nx-holo-opacity:.5;--nx-sheen:#ffffff}
/* circled counterpart words + routed connector */
.link-line{fill:none;stroke:var(--link-blue,#2563eb);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.link-ring{fill:none;stroke:var(--link-blue,#2563eb);stroke-width:1.8;vector-effect:non-scaling-stroke}
/* --accent-text is the accent used as *ink*. It follows --accent everywhere it
   is readable and is overridden only on the themes whose accent is picked to
   look good as a fill: citrus green and bubblegum teal sat at 3.0-3.5:1 as
   text, which is where the vocabulary term links live. */
/* colour-vision modes (Okabe-Ito safe hues; never colour alone).
   Okabe-Ito is specified against paper, so the darker half of it fails on a
   dark UI and the lighter half fails on a light one. Same hue family, picked
   per surface. */
html.cv-deuteranopia,html.cv-protanopia{--success:#56b4e9;--danger:#ff9d4d;--warning:#e69f00;--accent:#56b4e9;--accent-2:#a3d9f5;--accent-text:#56b4e9;--accent-2-text:#a3d9f5;--success-text:#56b4e9;--danger-text:#ff9d4d;--warning-text:#e69f00;--link-blue:#56b4e9}
html.cv-tritanopia{--success:#009e73;--danger:#ff9d4d;--warning:#cc79a7;--accent:#2fd3a5;--accent-2:#ff9d4d;--accent-text:#2fd3a5;--accent-2-text:#ff9d4d;--success-text:#2fd3a5;--danger-text:#ff9d4d;--warning-text:#cc79a7;--link-blue:#ff9d4d}
html.theme-focus-light.cv-deuteranopia,html.theme-paper.cv-deuteranopia,html.theme-citrus.cv-deuteranopia,html.theme-bubblegum.cv-deuteranopia,html.theme-sakura.cv-deuteranopia,html.theme-focus-light.cv-protanopia,html.theme-paper.cv-protanopia,html.theme-citrus.cv-protanopia,html.theme-bubblegum.cv-protanopia,html.theme-sakura.cv-protanopia{--success:#0072b2;--danger:#a83c00;--warning:#8a6100;--accent:#0072b2;--accent-2:#56b4e9;--accent-text:#0072b2;--accent-2-text:#005a8f;--success-text:#0072b2;--danger-text:#a83c00;--warning-text:#8a6100;--link-blue:#0072b2}
html.theme-focus-light.cv-tritanopia,html.theme-paper.cv-tritanopia,html.theme-citrus.cv-tritanopia,html.theme-bubblegum.cv-tritanopia,html.theme-sakura.cv-tritanopia{--success:#00695a;--danger:#a83c00;--warning:#8f3f6a;--accent:#00695a;--accent-2:#a83c00;--accent-text:#00695a;--accent-2-text:#a83c00;--success-text:#00695a;--danger-text:#a83c00;--warning-text:#8f3f6a;--link-blue:#a83c00}
/* Monochrome mode strips hue, so lightness is the only thing left — and one
   fixed set of dark inks vanished on every dark theme. The accessibility
   "high contrast" switch turns on mono AND the black theme together, which put
   vocabulary term links and table headings at 1.4:1 on black: the setting was
   erasing the words it exists to clarify. Ink now follows the surface. */
html.cv-mono{--success:#ffffff;--danger:#dcdcdc;--warning:#b4b4b4;--accent:#ededed;--accent-2:#bcbcbc;--accent-text:#ededed;--accent-2-text:#bcbcbc;--success-text:#ffffff;--danger-text:#dcdcdc;--warning-text:#b4b4b4;--link-blue:#ffffff}
html.theme-focus-light.cv-mono,html.theme-paper.cv-mono,html.theme-citrus.cv-mono,html.theme-bubblegum.cv-mono,html.theme-sakura.cv-mono{--success:#111111;--danger:#111111;--warning:#111111;--accent:#1f2937;--accent-2:#4b5563;--accent-text:#1f2937;--accent-2-text:#4b5563;--success-text:#111111;--danger-text:#111111;--warning-text:#111111;--link-blue:#111111}
html.cv-mono .quiz-option.correct{border-width:3px;border-style:double}
html.cv-mono .quiz-option.wrong{border-style:dashed}
html.cv-mono .theme-choice.locked::before,html.cv-mono .game-pick::before{display:none}
.quiz-option.correct::before{content:"✓ ";font-weight:800}
.quiz-option.wrong::before{content:"✕ ";font-weight:800}
.cv-sample{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.cv-chip{border-radius:999px;padding:6px 12px;font-weight:700;font-size:.85rem;border:2px solid}
.cv-good{color:var(--success-text,var(--success));border-color:var(--success)}
.cv-bad{color:var(--danger-text,var(--danger));border-color:var(--danger)}
.cv-warn{color:var(--warning-text,var(--warning));border-color:var(--warning)}
.cv-accent{color:var(--accent-text,var(--accent));border-color:var(--accent)}
.word-pos{margin:0 0 6px;font-size:.85rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--accent-text,var(--accent))}
/* person colours for conjugation endings — Okabe-Ito based, distinct per mode */
/* Person colours. These were one fixed set of dark inks: fine on paper, invisible
   on a dark panel, and the colour-vision palettes were worse — cv-mono put six
   identical near-blacks on a dark background at 1.11:1, so turning the
   accessibility setting on erased the very endings it exists to clarify.
   Each palette now has a light-background and a dark-background version, and
   every value clears 4.5:1 against the panels it can land on. */
html{--p1:#0072b2;--p2:#a54700;--p3:#00795a;--p4:#7b3fb5;--p5:#8a6508;--p6:#c2185b}
html.cv-deuteranopia,html.cv-protanopia{--p1:#0072b2;--p2:#8f6300;--p3:#1a72a6;--p4:#7b3fb5;--p5:#6f5206;--p6:#111111}
html.cv-tritanopia{--p1:#046b50;--p2:#a04600;--p3:#7b3fb5;--p4:#111111;--p5:#c2185b;--p6:#5a5a5a}
/* "minimal colour" means the colour carries no meaning — the pronoun row already
   says who. It must still be readable, so it follows the theme's text colour. */
html.cv-mono{--p1:var(--text);--p2:var(--text);--p3:var(--text);--p4:var(--text);--p5:var(--text);--p6:var(--text)}
.ending{font-weight:800}
.ending.pn1,.tense-table th.pn1,.legend-chip.pn1{color:var(--p1)}
.ending.pn2,.tense-table th.pn2,.legend-chip.pn2{color:var(--p2)}
.ending.pn3,.tense-table th.pn3,.legend-chip.pn3{color:var(--p3)}
.ending.pn4,.tense-table th.pn4,.legend-chip.pn4{color:var(--p4)}
.ending.pn5,.tense-table th.pn5,.legend-chip.pn5{color:var(--p5)}
.ending.pn6,.tense-table th.pn6,.legend-chip.pn6{color:var(--p6)}
.tense-table tbody tr.pn1 th{border-left:4px solid var(--p1)}
.tense-table tbody tr.pn2 th{border-left:4px solid var(--p2)}
.tense-table tbody tr.pn3 th{border-left:4px solid var(--p3)}
.tense-table tbody tr.pn4 th{border-left:4px solid var(--p4)}
.tense-table tbody tr.pn5 th{border-left:4px solid var(--p5)}
.tense-table tbody tr.pn6 th{border-left:4px solid var(--p6)}
html.cv-mono .ending{text-decoration:underline;text-underline-offset:3px}
html.cv-mono .ending.pn1{text-decoration-style:solid}
html.cv-mono .ending.pn2{text-decoration-style:double}
html.cv-mono .ending.pn3{text-decoration-style:dotted}
html.cv-mono .ending.pn4{text-decoration-style:dashed}
html.cv-mono .ending.pn5{text-decoration-style:wavy}
html.cv-mono .ending.pn6{text-decoration:none;font-style:italic}
.person-legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0}
.legend-label{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.legend-chip{font-weight:800;font-size:.86rem;border:2px solid currentColor;border-radius:999px;padding:3px 10px}
.tense-name{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;border-bottom:1px dotted currentColor}
.tense-name:hover{border-bottom-style:solid}
.tense-formal{display:block;font-size:.78rem;font-weight:500;color:var(--muted);margin-top:2px;letter-spacing:.02em}
.word-note{margin:10px 0 0;font-size:.82rem;color:var(--muted);line-height:1.5}
/* centred, readable conjugation charts */
.tense-table th,.tense-table td{text-align:center;vertical-align:middle}
.tense-table tbody th,.tense-table thead th{font-weight:600}
.tense-table tbody tr th:first-child{color:var(--muted);font-weight:600;white-space:nowrap}
.tense-table tbody tr.pn1 th:first-child,.tense-table tbody tr.pn2 th:first-child,.tense-table tbody tr.pn3 th:first-child,.tense-table tbody tr.pn4 th:first-child,.tense-table tbody tr.pn5 th:first-child,.tense-table tbody tr.pn6 th:first-child{color:var(--text)}
.ending-none{color:var(--muted);opacity:.75;font-size:.78rem;font-style:italic}
.ending-mark{color:var(--muted);font-size:.7em;margin-left:1px}
.model-note{margin:0;padding:0 15px 13px;font-size:.82rem;color:var(--muted);text-align:center}
.conjugation-model>header{display:flex;align-items:baseline;justify-content:center;gap:10px;flex-wrap:wrap;text-align:center;padding:14px 15px 0}
.conjugation-model>header small{margin-left:0}
.conjugation-model .table-scroll{margin:12px 0 0;padding:0 4px 12px}
.conjugation-model .tense-table{min-width:0;table-layout:fixed}
.conjugation-model .tense-table th,.conjugation-model .tense-table td{padding:9px 6px;font-size:.95rem;word-break:break-word}
.conjugation-model .tense-table tbody tr th:first-child,.conjugation-model .tense-table thead th:first-child{width:92px;white-space:normal;text-align:right}
.conjugation-model .tense-table thead th,.conjugation-model .tense-table tbody td{text-align:center;white-space:normal}
@media (max-width:640px){.tense-table th,.tense-table td{padding:8px 12px;font-size:.92rem}}
.word-verb .tense-table th{text-align:right}
.word-verb .tense-table td{text-align:left}

/* typing and speed games */
.sprint-bar{height:8px;border-radius:999px;background:var(--line);overflow:hidden;margin:12px 0}
.sprint-bar span{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width 1s linear}
.sprint-prompt{margin:18px 0;text-align:center;font-size:clamp(22px,4vw,34px);font-weight:800;line-height:1.25}
.sprint-prompt small{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.sprint-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sprint-options button{min-height:62px;font-size:17px}
.fade-word{min-height:96px;display:grid;place-items:center;font-size:clamp(28px,6vw,52px);font-weight:900;letter-spacing:-.02em}
.fade-word.fading{animation:nx-fade-out 2.6s ease-in forwards}
@keyframes nx-fade-out{0%{opacity:1;filter:blur(0)}70%{opacity:.35;filter:blur(1px)}100%{opacity:0;filter:blur(6px)}}
.fade-form{display:grid;grid-template-columns:1fr auto;gap:9px;margin-bottom:12px}
.fade-form input{width:100%;font-size:18px;text-align:center}
.typing-line{margin:14px 0;font-size:clamp(18px,3vw,26px);line-height:1.7;letter-spacing:.01em;white-space:pre-wrap;overflow-wrap:break-word}
.typing-line span{border-radius:3px}
.typing-line .hit{color:var(--success-text,var(--success))}
.typing-line .miss{color:var(--danger-text,var(--danger));background:color-mix(in srgb,var(--danger) 16%,transparent)}
.typing-line .miss.sp{background:color-mix(in srgb,var(--danger) 26%,transparent)}
.typing-line .hit.sp,.typing-line .sp{background:none}
.typing-line .at{position:relative}
.typing-line .at::before{content:"";position:absolute;left:-1px;top:.1em;bottom:.05em;width:2px;background:var(--accent);border-radius:2px;animation:nx-caret 1s step-end infinite}
@keyframes nx-caret{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.typing-line .at::before{animation:none}}
#typing-input{width:100%;font-size:18px;margin-bottom:12px}
.game-board{margin-top:18px}
[data-view-panel="games"].playing .game-board{display:none}
@media(max-width:640px){.sprint-options{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.fade-word.fading{animation-duration:.01ms;opacity:0}}

/* the "have done" and "-ing" form charts */
.extra-forms{margin:18px 0}
.extra-forms>h3{margin-bottom:12px}
.form-lead{margin:0;padding:0 15px;color:var(--muted);line-height:1.6;font-size:.92rem}
.form-use{margin:0;padding:12px 15px 15px;font-size:1rem;line-height:1.6;border-top:1px solid var(--line);background:color-mix(in srgb,var(--accent) 5%,transparent)}
.extra-form-table th:first-child{text-align:right;color:var(--muted);white-space:normal}
.conjugation-model .extra-form-table thead th:first-child,.conjugation-model .extra-form-table tbody tr th:first-child{width:150px}
.extra-form-table thead th{color:var(--accent-text,var(--accent))}
.extra-form-table td:last-child b{color:var(--accent-2-text,var(--accent-2));font-size:1.05em}
.section-lead{color:var(--muted);margin:0 0 12px;font-size:.92rem}

.tense-table caption{caption-side:top;text-align:left;padding:0 6px 6px;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.form-more{margin:0;padding:10px 15px 14px;border-top:1px solid var(--line)}
.form-more summary{cursor:pointer;color:var(--accent-text,var(--accent));font-size:.85rem;font-weight:700;list-style:none}
.form-more summary::-webkit-details-marker{display:none}
.form-more summary::before{content:"＋ ";font-weight:900}
.form-more[open] summary::before{content:"− "}
.form-more p{margin:9px 0 0;color:var(--muted);font-size:.88rem;line-height:1.6}

/* study card: the question on top, the side label small at the bottom */
.study-card{position:relative;grid-template-rows:auto 1fr auto;justify-items:center}
.study-ask{color:var(--muted)!important;font-size:12px!important;letter-spacing:.02em!important;text-transform:none!important;font-weight:600!important;align-self:start}
.study-card .study-foot{display:flex;align-items:center;gap:10px;align-self:end;color:var(--muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.study-card .study-foot em{font-style:normal;color:var(--accent-text,var(--accent));opacity:.8}
.study-card .study-foot small{color:var(--muted);opacity:.7;font-size:11px}
.study-card-extra{font-size:14px!important;max-width:520px;margin-left:auto;margin-right:auto}

/* the one idea to remember, at the end of a lesson */
.takeaway{margin:24px 0 6px;padding:20px 22px;border:1px solid color-mix(in srgb,var(--accent) 34%,var(--line));border-radius:20px;background:color-mix(in srgb,var(--accent) 7%,var(--panel))}
.takeaway .eyebrow{margin-bottom:6px}
.takeaway-line{margin:0;font-size:clamp(17px,2.2vw,22px);line-height:1.45;font-weight:700}
.takeaway-chart{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:6px}
.takeaway-chart li{padding:8px 12px;border-radius:11px;background:var(--panel);border:1px solid var(--line);font-weight:700;font-size:.95rem}
.takeaway-chart .takeaway-title{background:transparent;border:0;padding:0 2px 2px;color:var(--muted);font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;font-weight:800}
.takeaway-chart li.pn1{color:var(--p1)}.takeaway-chart li.pn2{color:var(--p2)}.takeaway-chart li.pn3{color:var(--p3)}
.takeaway-chart li.pn4{color:var(--p4)}.takeaway-chart li.pn5{color:var(--p5)}.takeaway-chart li.pn6{color:var(--p6)}

/* cheat sheets */
.cheat-pick{display:grid;gap:6px;max-width:230px;margin-bottom:16px;color:var(--muted);font-size:12px;font-weight:700}
.cheat-pick select{width:100%}
.cheat-grid{display:grid;gap:8px;margin:0}
.cheat-row{display:grid;grid-template-columns:minmax(150px,230px) 1fr;gap:14px;padding:11px 14px;border:1px solid var(--line);border-radius:13px;background:var(--bg-2);align-items:baseline}
.cheat-row dt{margin:0;color:var(--muted);font-size:.82rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.cheat-row dd{margin:0;font-size:1.02rem;font-weight:700;line-height:1.45}
.cheat-row.pn1 dd{color:var(--p1)}.cheat-row.pn2 dd{color:var(--p2)}.cheat-row.pn3 dd{color:var(--p3)}
.cheat-row.pn4 dd{color:var(--p4)}.cheat-row.pn5 dd{color:var(--p5)}.cheat-row.pn6 dd{color:var(--p6)}
.cheat-table{min-width:860px}
.cheat-table th,.cheat-table td{padding:9px 10px;font-size:.9rem;line-height:1.45}
.cheat-table tbody th{width:112px;font-size:.7rem}
.cheat-table tbody th{white-space:normal;color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.05em}
.cheat-table tr.pn1 td{color:var(--p1)}.cheat-table tr.pn2 td{color:var(--p2)}.cheat-table tr.pn3 td{color:var(--p3)}
.cheat-table tr.pn4 td{color:var(--p4)}.cheat-table tr.pn5 td{color:var(--p5)}.cheat-table tr.pn6 td{color:var(--p6)}
@media(max-width:640px){.cheat-row{grid-template-columns:1fr;gap:4px}}
@media print{.sidebar,.topbar,.bottom-nav,.tab-list,.cheat-pick,[data-print-cheat]{display:none!important}main{padding:0}.cheat-sheet{border:0;box-shadow:none}}

/* books: cover, reading level, paired edition */
.book-cover.placeholder{flex-direction:column;gap:2px;background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 22%,var(--panel)),var(--panel-2));border:1px solid var(--line)}
.book-cover.placeholder b{font-size:19px;font-weight:900;letter-spacing:-.02em;color:var(--accent-text,var(--accent))}
.book-cover.placeholder span{font-size:9px;color:var(--muted)}
.book-level{display:inline-flex;gap:3px;align-items:center;margin-top:7px}
.book-level i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--line);background:transparent}
.book-level.level-1 i:nth-child(1),.book-level.level-2 i:nth-child(-n+2),.book-level.level-3 i{background:var(--accent);border-color:var(--accent)}
.book-pair{margin:0 0 8px;font-size:.85rem;color:var(--muted)}
.book-pair b{color:var(--text)}
.book-more{margin-top:10px}
.book-more summary{cursor:pointer;color:var(--muted);font-size:.78rem}
.book-more p{margin:7px 0 0;font-size:.78rem;color:var(--muted);line-height:1.5}

/* keep an already-known Romance language alive */
.keepup-list{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px}
.keepup-list li{padding:10px 13px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2)}
.keepup-list b{color:var(--accent-text,var(--accent))}
.keepup-list span{display:block;color:var(--muted);font-size:.85rem;margin-top:4px;line-height:1.5}
.workflow-steps{padding:14px 16px}
.workflow-steps summary{cursor:pointer;font-weight:800;color:var(--accent-text,var(--accent));list-style:none;font-size:1rem}
.workflow-steps summary::-webkit-details-marker{display:none}
.workflow-steps summary::before{content:"＋ ";font-weight:900}
.workflow-steps[open] summary::before{content:"− "}
.workflow-steps .lesson-step-list{margin-top:12px}

/* Silly Story */
.story-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:16px}
.story-options button{display:grid;gap:2px;min-height:64px;text-align:center}
.story-options button b{font-size:1.05rem}
.story-options button small{color:var(--muted);font-weight:600;font-size:.76rem}
.story-text{margin:0;padding:18px 20px;border:1px solid var(--line);border-radius:16px;background:var(--bg-2);font-size:1.05rem;line-height:2}
.story-word{display:inline-block;position:relative;color:var(--accent-text,var(--accent));border-bottom:2px solid color-mix(in srgb,var(--accent) 55%,transparent);margin-bottom:14px}
.story-word small{position:absolute;left:0;right:0;top:100%;display:block;font-size:.66rem;color:var(--muted);font-weight:600;line-height:1.3;border:0;white-space:nowrap}
.story-blank{display:inline-block;padding:1px 9px;border-radius:8px;border:1px dashed var(--line);background:var(--panel);color:var(--muted);font-size:.82em;font-weight:700}
.story-blank.now{border-color:var(--accent);border-style:solid;color:var(--accent-text,var(--accent));background:color-mix(in srgb,var(--accent) 12%,transparent)}
.story-options button.wrong{opacity:.45;border-color:color-mix(in srgb,var(--danger) 55%,var(--line))}
.sprint-prompt em{display:block;font-style:normal;font-size:.8rem;font-weight:600;color:var(--muted);margin-top:8px;line-height:1.5}
.region-row{display:grid;gap:6px;margin-top:10px;color:var(--muted);font-size:12px;font-weight:700}
.region-row select{width:100%}
.story-note{margin:12px 0 0;padding:12px 15px;border-radius:13px;background:color-mix(in srgb,var(--accent) 8%,var(--panel));border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));font-size:.92rem;line-height:1.6;color:var(--muted)}
.story-note:empty{display:none}
.story-note b{color:var(--accent-text,var(--accent))}

/* letters that are not on an ordinary keyboard */
.accent-bar{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.accent-bar:empty{display:none}
.accent-key{min-width:40px;min-height:40px;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg-2);color:var(--text);font-size:17px;font-weight:700;line-height:1}
.accent-key:hover,.accent-key:focus-visible{border-color:var(--accent);color:var(--accent-text,var(--accent))}

/* =====================================================================
   Release polish — one spacing, radius and type rhythm across the app.
   Everything above this line is feature CSS; this section is the finish.
   ===================================================================== */
:root{
  --sp-1:6px;--sp-2:10px;--sp-3:14px;--sp-4:18px;--sp-5:24px;--sp-6:32px;--sp-7:44px;
  --r-sm:10px;--r-md:14px;--r-lg:18px;--r-xl:24px;--r-pill:999px;
  --e-1:0 1px 2px rgba(8,18,32,.05), 0 1px 1px rgba(8,18,32,.04);
  --e-2:0 2px 4px rgba(8,18,32,.05), 0 6px 16px rgba(8,18,32,.06);
  --e-3:0 4px 8px rgba(8,18,32,.06), 0 16px 40px rgba(8,18,32,.08);
  --ring:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent);
}
html.theme-soft-dark,html.theme-pitch-black,html.theme-high-contrast,html.theme-popsicle,html.theme-parchment,html.theme-velvet,html.theme-aurora,html.theme-ocean,html.theme-solar,html.theme-arcade,html.theme-forest,html.theme-terminal{
  --e-1:0 1px 2px rgba(0,0,0,.3);
  --e-2:0 2px 6px rgba(0,0,0,.32), 0 10px 24px rgba(0,0,0,.28);
  --e-3:0 6px 14px rgba(0,0,0,.35), 0 22px 52px rgba(0,0,0,.34);
}

/* type: a deliberate scale that stays readable on a phone */
h1{font-size:clamp(26px,3.2vw,44px);line-height:1.08;letter-spacing:-.03em}
.page-heading h1{font-size:clamp(26px,3.2vw,42px)}
h2{font-size:clamp(19px,1.8vw,25px);line-height:1.2;letter-spacing:-.02em}
h3{font-size:clamp(16px,1.3vw,19px);line-height:1.3;letter-spacing:-.01em}
p{line-height:1.62}
.page-heading p:not(.eyebrow),.hero-copy p:not(.eyebrow),.settings-copy{font-size:15px;max-width:64ch}
.eyebrow{font-size:10.5px;letter-spacing:.14em}

/* surfaces: one radius family, one shadow family, quieter borders */
.panel,.metric-card,.record-card,.book-card,.theme-card,.search-group,.conjugation-model,.game-panel,.takeaway,.cheat-row{
  border-color:color-mix(in srgb,var(--line) 72%,transparent);
}
.panel{border-radius:var(--r-xl);padding:var(--sp-5);box-shadow:var(--e-2)}
.metric-card{border-radius:var(--r-lg);padding:var(--sp-4);box-shadow:var(--e-1)}
.metric-card b{font-size:clamp(24px,2.4vw,30px)}
.record-card,.book-card,.theme-card,.search-group,.conjugation-model{border-radius:var(--r-lg);box-shadow:var(--e-1)}
.hero-card{border-radius:var(--r-xl);box-shadow:var(--e-3);min-height:0}
.hero-copy{padding:clamp(24px,4vw,56px)}

/* controls: one height, one shape, one focus ring */
.primary-button,.secondary-button,.ghost-button,.danger-button{
  min-height:44px;padding:0 18px;border-radius:var(--r-md);font-size:14.5px;font-weight:750;letter-spacing:-.005em;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .14s ease,box-shadow .14s ease,filter .14s ease,border-color .14s ease;
}
.primary-button{background:var(--accent);color:#04121b;box-shadow:var(--e-1)}
.primary-button:hover{filter:brightness(1.05);box-shadow:var(--e-2)}
.secondary-button{background:color-mix(in srgb,var(--accent) 10%,var(--panel));border-color:color-mix(in srgb,var(--accent) 26%,var(--line));color:var(--text)}
.ghost-button{background:transparent;border-color:var(--line)}
.ghost-button:hover{background:color-mix(in srgb,var(--accent) 6%,transparent);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.primary-button:active,.secondary-button:active,.ghost-button:active{transform:translateY(1px)}
.primary-button:hover,.secondary-button:hover,.ghost-button:hover,.icon-button:hover{transform:none}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;box-shadow:var(--ring)}
input,select,textarea{min-height:44px;border-radius:var(--r-md)}
.icon-button{border-radius:var(--r-md)}

/* navigation reads as one list, not ten boxes */
.nav-item{border-radius:var(--r-md);padding:10px 12px}
.nav-index{opacity:.5;font-variant-numeric:tabular-nums}
.brand-block{padding-bottom:var(--sp-5)}

/* the game chooser: a calm surface with the shimmer kept to a whisper */
html{--nx-holo-opacity:.14}
.games-grid,#game-chooser{gap:var(--sp-3)}
#game-chooser{grid-template-columns:repeat(auto-fill,minmax(228px,1fr))}
.game-pick{padding:var(--sp-5) var(--sp-4);border-radius:var(--r-lg);gap:var(--sp-1);box-shadow:var(--e-1)}
.game-pick-art{display:grid;place-items:center;width:56px;height:56px;margin-bottom:var(--sp-1);border-radius:var(--r-pill);background:color-mix(in srgb,var(--accent) 12%,var(--panel));font-size:1.5rem;letter-spacing:0}
.game-pick b{font-size:1.05rem;letter-spacing:-.01em}
.game-pick span:last-child{font-size:12.5px;color:var(--muted);line-height:1.5}
@media(hover:hover){.game-pick:hover{transform:translateY(-2px);box-shadow:var(--e-2),0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent)}}

/* tables and lists */
.data-table th{font-size:10.5px;letter-spacing:.1em}
.data-table td{font-size:14px}
.table-shell{border-radius:var(--r-lg);border-color:color-mix(in srgb,var(--line) 72%,transparent)}
.empty-state{border-radius:var(--r-lg);padding:44px 20px;font-size:14px}

/* the toast must never sit under the bottom bar */
.toast{border-radius:var(--r-md);font-size:14px;font-weight:650;box-shadow:var(--e-3)}
@media(max-width:820px){.toast{right:12px;left:12px;max-width:none;bottom:calc(var(--bottom-nav-h,72px) + 12px)}}

/* phone: full-width actions, tighter rhythm, no oversized type */
@media(max-width:640px){
  main{padding:20px 14px 96px}
  .panel{padding:var(--sp-4);border-radius:var(--r-lg)}
  .page-heading{margin-bottom:var(--sp-4)}
  .hero-actions{display:grid;grid-template-columns:1fr;gap:var(--sp-2)}
  .hero-actions>button{width:100%}
  .hero-copy p:not(.eyebrow){font-size:14.5px}
  .metric-grid{gap:var(--sp-2);margin:var(--sp-4) 0}
  .metric-card{padding:var(--sp-3)}
  .metric-card b{font-size:22px}
  .metric-card span{font-size:11.5px}
  .game-actions{flex-wrap:wrap;gap:var(--sp-2)}
  .rating-row{grid-template-columns:1fr 1fr;gap:var(--sp-2)}
  .study-card{padding:var(--sp-5) var(--sp-4);min-height:300px}
  .dialog-head,#dialog-body{padding:var(--sp-4)}
  .filter-panel{grid-template-columns:1fr;gap:var(--sp-2);padding:var(--sp-3)}
  .book-card header{gap:var(--sp-3)}
}

/* content loading should look like the content, not like a spinner */
.skeleton{position:relative;overflow:hidden;background:color-mix(in srgb,var(--line) 40%,transparent);border-radius:var(--r-sm)}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--text) 8%,transparent),transparent);animation:nx-shimmer 1.4s infinite}
@keyframes nx-shimmer{100%{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){.skeleton::after{animation:none}}
:root{--bottom-nav-h:74px}
.game-pick-art{font-size:1.7rem;line-height:1}
@media(max-width:640px){
  #game-chooser{grid-template-columns:1fr 1fr;gap:var(--sp-2)}
  .game-pick{padding:var(--sp-4) var(--sp-2)}
  .game-pick-art{width:46px;height:46px;font-size:1.4rem}
  .game-pick b{font-size:.95rem}
  .game-pick span:last-child{font-size:11.5px}
}

/* =====================================================================
   Depth layer — liquid glass, layered shadow, and a radial shimmer edge.
   Applied to the surfaces a learner actually looks at, not everything.
   ===================================================================== */
@property --nx-ring{syntax:"<angle>";initial-value:0deg;inherits:false}

/* liquid glass: real refraction where the browser supports it, a clean
   translucent panel where it does not */
.nx-glass-card,.detail-dialog,.account-dialog,.quiz-dialog,.onboarding-dialog,.topbar,.bottom-nav{
  -webkit-
  
}
@supports (
    
  

.nx-glass-card{
  position:relative;
  background:linear-gradient(150deg,color-mix(in srgb,var(--panel) 72%,transparent),color-mix(in srgb,var(--panel-2) 58%,transparent));
  border:1px solid color-mix(in srgb,var(--text) 8%,transparent);
  box-shadow:var(--e-2), inset 0 1px 0 color-mix(in srgb,#fff 22%,transparent), inset 0 -1px 0 color-mix(in srgb,var(--text) 6%,transparent);
}
.nx-glass-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 70% at 12% -10%,color-mix(in srgb,#fff 32%,transparent),transparent 62%);
  opacity:.55;
}
.nx-glass-card>*{position:relative}

/* a shimmer that lives on the edge of a card, not across its face */
.nx-shimmer,.pack-card,.game-pick,.metric-card,.takeaway,.record-card{position:relative}
.nx-shimmer::after,.pack-card::after,.takeaway::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:0;
  padding:1px;opacity:.75;
  background:conic-gradient(from var(--nx-ring),
    transparent 0deg, color-mix(in srgb,var(--accent) 70%,transparent) 40deg,
    color-mix(in srgb,var(--accent-2) 70%,transparent) 90deg, transparent 150deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:nx-ring-spin 9s linear infinite;
}
.takeaway::after{opacity:.5;animation-duration:14s}
@keyframes nx-ring-spin{to{--nx-ring:360deg}}
@media (prefers-reduced-motion:reduce){.nx-shimmer::after,.pack-card::after,.takeaway::after{animation:none;opacity:.4}}

/* Overachieve */
.overachieve-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:var(--sp-4);margin-top:var(--sp-4)}
.pack-card{padding:var(--sp-5);border-radius:var(--r-xl);display:grid;align-content:start;gap:var(--sp-3)}
.pack-head{display:flex;gap:var(--sp-3);align-items:flex-start}
.pack-icon{display:grid;place-items:center;flex:0 0 auto;width:48px;height:48px;border-radius:var(--r-md);background:color-mix(in srgb,var(--accent) 14%,transparent);font-size:1.4rem}
.pack-head h3{margin:0 0 4px}
.pack-head p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}
.pack-table{min-width:0}
.pack-table th{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);background:transparent;position:static}
.pack-table td{padding:9px 10px;font-size:14.5px;vertical-align:top;color:var(--text)}
.pack-table td b{color:var(--accent-text,var(--accent))}
.pack-gap{color:var(--muted);font-style:italic;font-size:12.5px}
.pack-where{display:inline-block;padding:2px 8px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--accent-2) 14%,transparent);font-size:11.5px;color:var(--muted);white-space:nowrap}
.pack-note{margin:0;font-size:12.5px;color:var(--muted);line-height:1.55}
#overachieve-ask{margin-bottom:var(--sp-4)}
@media(max-width:640px){.overachieve-grid{grid-template-columns:1fr;gap:var(--sp-3)}.pack-card{padding:var(--sp-4)}}

/* ---- fun themes ---- */
.theme-citrus{color-scheme:light;--accent-text:#2f7a22;--accent-2-text:#8a6100;--success-text:#2f7a22;--danger-text:#b02525;--warning-text:#8a6100;--bg:#fffdf4;--bg-2:#fff8e2;--panel:#fffefa;--panel-2:#fff6d9;--line:#e8dcae;--text:#2e2a12;--muted:#6d6440;--accent:#3f9b2f;--accent-2:#e8a300;--danger:#d64545;--warning:#e8a300;--success:#3f9b2f;--shadow:0 16px 40px rgba(120,100,20,.14)}
.theme-bubblegum{color-scheme:light;--accent-text:#0a6a5f;--accent-2-text:#a8206e;--success-text:#0a6a5f;--danger-text:#b01e4b;--warning-text:#8a5a00;--bg:#fff6fb;--bg-2:#ffeaf5;--panel:#fffdfe;--panel-2:#ffe3f2;--line:#f3c8e0;--text:#3a1330;--muted:#7a4f6c;--accent:#12a594;--accent-2:#e5439b;--danger:#d6295e;--warning:#f08c00;--success:#12a594;--shadow:0 16px 42px rgba(190,90,150,.16)}
.theme-forest{color-scheme:dark;--bg:#0b1410;--bg-2:#0f1c16;--panel:#13261d;--panel-2:#183024;--line:#2c4d3a;--text:#eaf6ee;--muted:#9dbcaa;--accent:#7ad17f;--accent-2:#d9b45c;--danger:#ff8a7a;--warning:#e8c46a;--success:#7ad17f;--shadow:0 20px 52px rgba(0,12,6,.5)}
.theme-arcade{color-scheme:dark;--bg:#06040d;--bg-2:#0c0718;--panel:#130b26;--panel-2:#1b1036;--line:#3a2568;--text:#f6f0ff;--muted:#b3a2d6;--accent:#22e0d4;--accent-2:#ff3ea5;--danger:#ff4d6d;--warning:#ffd166;--success:#22e0d4;--shadow:0 22px 60px rgba(255,62,165,.18)}
.theme-sakura{color-scheme:light;--accent-text:#9c3a60;--accent-2-text:#3f6390;--success-text:#2f7355;--danger-text:#a8384a;--warning-text:#8a5a1e;--bg:#fbf7f8;--bg-2:#f6eef1;--panel:#fffdfd;--panel-2:#f9edf1;--line:#e6d2d8;--text:#2f2429;--muted:#6c5a62;--accent:#b54a72;--accent-2:#6f8fb5;--danger:#c94f5f;--warning:#c98b3f;--success:#4f9e78;--shadow:0 16px 40px rgba(120,80,95,.12)}
.theme-terminal{color-scheme:dark;--bg:#000;--bg-2:#040804;--panel:#060d06;--panel-2:#0a140a;--line:#1d3b1d;--text:#c9ffc9;--muted:#6fb36f;--accent:#39ff6a;--accent-2:#8affb0;--danger:#ff6a6a;--warning:#ffd76a;--success:#39ff6a;--shadow:none;--display-font:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.theme-terminal,.theme-terminal .study-card strong,.theme-terminal h1,.theme-terminal h2{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
html.theme-citrus,html.theme-bubblegum,html.theme-sakura{--nx-holo-blend:multiply;--nx-holo-opacity:.16;--nx-sheen:#8a7aa0}
html.theme-forest,html.theme-arcade,html.theme-terminal{--nx-holo-blend:plus-lighter;--nx-holo-opacity:.42;--nx-sheen:#ffffff}

/* the free study shelf */
.starter-shelf{display:grid;gap:var(--sp-4)}
.shelf-group h3{margin:0 0 var(--sp-2);font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--accent-text,var(--accent))}
.shelf-group ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2)}
.shelf-group li{display:flex;gap:var(--sp-3);align-items:center;justify-content:space-between;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:color-mix(in srgb,var(--bg-2) 70%,transparent)}
.shelf-group a{color:var(--text);font-weight:700;text-decoration:none}
.shelf-group a:hover{color:var(--accent-text,var(--accent));text-decoration:underline}
.shelf-group small{display:block;color:var(--muted);font-size:12.5px;margin-top:3px;line-height:1.5}
.shelf-group button{flex:0 0 auto}
@media(max-width:640px){.shelf-group li{flex-direction:column;align-items:stretch}.shelf-group button{width:100%}}

/* paste a link and press save */
.paste-field input{font-size:16px}
.paste-hint{margin:-4px 0 0;color:var(--muted);font-size:12.5px;line-height:1.55}
.resource-details{margin:0}
.resource-details summary{cursor:pointer;color:var(--accent-text,var(--accent));font-size:13px;font-weight:700;list-style:none;padding:6px 0}
.resource-details summary::-webkit-details-marker{display:none}
.resource-details summary::before{content:"＋ ";font-weight:900}
.resource-details[open] summary::before{content:"− "}
.resource-details>label,.resource-details>.resource-form-row{margin-top:var(--sp-2)}

/* put it on the home screen */
.install-prompt{display:flex;gap:var(--sp-3);align-items:center;justify-content:space-between;flex-wrap:wrap;padding:var(--sp-4);margin-bottom:var(--sp-4);border:1px solid color-mix(in srgb,var(--accent) 32%,var(--line));border-radius:var(--r-lg);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.install-copy b{display:block;font-size:15px;margin-bottom:4px}
.install-copy p{margin:0;color:var(--muted);font-size:13px;line-height:1.55;max-width:46ch}
.install-prompt.installed{border-style:dashed;background:transparent}

/* the certificate: something worth printing */
.certificate-list{display:grid;gap:var(--sp-5);margin-top:var(--sp-4)}
.certificate{--cert-ink:#1d2432;--cert-gold:#a8863c;--cert-paper:#fdfaf3;container-type:inline-size;background:var(--cert-paper);color:var(--cert-ink);border-radius:var(--r-md);padding:10px;box-shadow:var(--e-3);font-family:Charter,"Bitstream Charter",Georgia,"Times New Roman",serif}
.cert-frame{position:relative;border:2px solid var(--cert-gold);outline:1px solid var(--cert-gold);outline-offset:5px;border-radius:4px;padding:clamp(26px,5cqi,54px) clamp(20px,6cqi,66px);text-align:center;background:
  radial-gradient(circle at 50% 0,rgba(168,134,60,.09),transparent 60%),
  repeating-linear-gradient(45deg,rgba(168,134,60,.045) 0 2px,transparent 2px 9px)}
.cert-crest{font-size:clamp(22px,4cqi,34px);color:var(--cert-gold);line-height:1}
.cert-kicker{margin:6px 0 0;font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--cert-gold)}
.cert-title{margin:6px 0 2px;font-size:clamp(23px,5.4cqi,40px);letter-spacing:.02em;font-weight:600;color:var(--cert-ink)}
.cert-course{margin:0 0 6px;font-size:clamp(13px,2.4cqi,17px);font-style:italic;color:#5a5340}
.cert-lead{margin:12px 0 0;font-size:clamp(12.5px,2.2cqi,15px);color:#4a5162;line-height:1.7}
.cert-name{margin:8px 0 4px;font-size:clamp(26px,6.4cqi,46px);font-weight:600;letter-spacing:.01em;border-bottom:1px solid var(--cert-gold);display:inline-block;padding:0 clamp(14px,4cqi,40px) 6px}
.cert-facts{display:flex;justify-content:center;gap:clamp(18px,6cqi,64px);flex-wrap:wrap;margin:clamp(18px,4cqi,32px) 0 0}
.cert-facts div{display:grid;gap:3px}
.cert-facts span{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#8a8371}
.cert-facts b{font-size:clamp(17px,3.4cqi,25px);font-weight:600}
.cert-signatures{display:flex;justify-content:center;gap:clamp(24px,8cqi,90px);flex-wrap:wrap;margin-top:clamp(20px,5cqi,40px)}
.cert-sign{display:grid;gap:4px;min-width:150px}
.cert-signature{font-size:clamp(19px,4cqi,28px);font-style:italic;border-bottom:1px solid var(--cert-ink);padding-bottom:4px}
.cert-sign small{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#8a8371;line-height:1.5}
.cert-serial{margin:clamp(16px,4cqi,28px) 0 0;font-size:11px;letter-spacing:.16em;color:#8a8371;font-variant-numeric:tabular-nums}
.cert-verify{margin:6px 0 0;font-size:10.5px;color:#7a7361;line-height:1.5}
.cert-small{margin:8px 0 0;font-size:10.5px;color:#9a937f;line-height:1.5}
/* checking a serial is the point of printing one */
.certificate-check{margin-top:22px;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.certificate-check h3{margin:0 0 6px}
.cert-check-form{display:grid;grid-template-columns:minmax(0,260px) auto;gap:9px;margin:12px 0}
.cert-check-form input{font-variant-numeric:tabular-nums;letter-spacing:.08em}
.cert-check{display:grid;gap:3px;padding:13px;border:1px solid var(--line);border-radius:13px;background:var(--bg-2)}
.cert-check span{color:var(--muted);font-size:13px}
.cert-check.good{border-color:color-mix(in srgb,var(--success) 55%,var(--line))}
.cert-check.good b{color:var(--success-text,var(--success))}
.cert-check.bad{border-color:color-mix(in srgb,var(--danger) 55%,var(--line))}
.cert-check.bad b{color:var(--danger-text,var(--danger))}
@media(max-width:600px){.cert-check-form{grid-template-columns:1fr}}
.cert-actions{justify-content:center}
#exam-panel{margin-top:var(--sp-5)}
#exam-text{width:100%;min-height:150px;font-size:16px;line-height:1.6}
.exam-dialog{width:min(680px,calc(100vw - 24px))}
@media print{
  body.printing-cert>*{display:none!important}
  body.printing-cert .certificate.print-me{display:block!important;position:fixed;inset:0;margin:0;padding:0;box-shadow:none;border-radius:0}
  body.printing-cert .certificate.print-me .cert-frame{height:100vh;display:flex;flex-direction:column;justify-content:center;border-radius:0}
  @page{size:landscape;margin:12mm}
}

/* saved links: a picture and a name, and nothing else until asked */
.resource-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:var(--sp-3)}
.resource-card{position:relative;display:grid;gap:0;padding:0;overflow:hidden;border:1px solid color-mix(in srgb,var(--line) 72%,transparent);border-radius:var(--r-lg);background:var(--panel);box-shadow:var(--e-1);transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease}
.resource-card:hover,.resource-card:focus-visible,.resource-card.open{border-color:color-mix(in srgb,var(--accent) 42%,var(--line));box-shadow:var(--e-2);transform:translateY(-2px)}
.link-face{display:block;text-decoration:none;color:inherit}
.link-face h3{margin:0;padding:11px 13px 13px;font-size:14px;line-height:1.4;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.link-shot{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--bg-2);border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.link-shot.placeholder{display:grid;place-items:center;font-size:34px;font-weight:900;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.28);background:linear-gradient(145deg,hsl(var(--seed) 58% 52%),hsl(calc(var(--seed) + 42deg) 55% 38%))}
.resource-card.no-shot .link-shot{display:none}
.resource-favorite{position:absolute;top:8px;right:8px;z-index:2;width:34px;height:34px;padding:0;border:0;border-radius:var(--r-pill);background:color-mix(in srgb,#000 42%,transparent);color:#ffd166;font-size:16px;line-height:1;opacity:0;transition:opacity .16s ease}
.resource-card:hover .resource-favorite,.resource-card:focus-within .resource-favorite,.resource-card.open .resource-favorite,.resource-card.favorite .resource-favorite{opacity:1}
/* the detail is laid out but not shown, so opening it does not reflow the grid */
.link-more{display:grid;gap:9px;padding:0 13px;max-height:0;opacity:0;overflow:hidden;transition:max-height .22s ease,opacity .18s ease,padding .22s ease}
.resource-card:hover .link-more,.resource-card:focus-within .link-more,.resource-card.open .link-more{max-height:420px;opacity:1;padding:0 13px 13px}
.link-where{margin:0;font-size:11.5px;color:var(--muted);letter-spacing:.01em}
.resource-card .resource-notes{margin:0;font-size:12.5px;color:var(--muted);line-height:1.55;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.resource-card .resource-tags{display:flex;flex-wrap:wrap;gap:5px}
.resource-card .resource-tags span{padding:2px 7px;border-radius:var(--r-pill);background:var(--bg-2);border:1px solid var(--line);font-size:10.5px;color:var(--muted)}
.resource-card footer{display:flex;gap:6px;flex-wrap:wrap}
.resource-card footer .secondary-button,.resource-card footer .ghost-button{min-height:34px;padding:0 11px;font-size:12.5px;flex:1}
@media (hover:none){
  /* on a touch screen there is no hover, so the card opens on tap instead */
  .resource-card:hover .link-more{max-height:0;opacity:0;padding:0 13px}
  .resource-card.open .link-more{max-height:420px;opacity:1;padding:0 13px 13px}
  .resource-favorite{opacity:1}
}
@media (prefers-reduced-motion:reduce){.resource-card,.link-more{transition:none}}
@media(max-width:640px){.resource-list{grid-template-columns:1fr 1fr;gap:var(--sp-2)}.link-face h3{font-size:13px;padding:9px 10px 11px}}

/* the saved-links page has three panels in a two-column grid: the editor is the
   sidebar, the shelf and the collection stack beside it */
.resource-layout{align-items:start}
.resource-editor-panel{grid-column:1;grid-row:1}
#starter-shelf-panel{grid-column:2;grid-row:1}
.resource-collection-panel{grid-column:2;grid-row:2}
@media(max-width:900px){
  .resource-editor-panel,#starter-shelf-panel,.resource-collection-panel{grid-column:1;grid-row:auto}
}
/* the save form is one field now, so it does not need a third of the page */
.resource-layout{grid-template-columns:minmax(250px,300px) minmax(0,1fr)}
.resource-list{grid-template-columns:repeat(auto-fill,minmax(178px,1fr))}
@media(max-width:900px){.resource-layout{grid-template-columns:1fr}}

/* saved links: small thumbnails you scroll through */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.resource-list{grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:10px;max-height:min(62vh,560px);overflow-y:auto;overscroll-behavior:contain;padding:2px 4px 2px 2px}
.resource-card{border-radius:var(--r-md)}
.link-face h3{padding:7px 8px 9px;font-size:11.5px;line-height:1.35;font-weight:650;-webkit-line-clamp:2}
.link-shot{aspect-ratio:1/1}
.link-shot.placeholder{font-size:26px}
.resource-favorite{top:5px;right:5px;width:26px;height:26px;font-size:13px}
.link-more{gap:7px;padding:0 8px}
.resource-card:hover .link-more,.resource-card:focus-within .link-more,.resource-card.open .link-more{max-height:340px;padding:0 8px 9px}
.link-where{font-size:10.5px}
.resource-card .resource-notes{font-size:11.5px;-webkit-line-clamp:3}
.resource-card .resource-tags span{font-size:9.5px;padding:1px 6px}
/* the three actions are icons, not sentences */
.link-tools{display:flex;gap:6px}
.link-tool{display:grid;place-items:center;flex:1;min-width:0;height:30px;border:1px solid var(--line);border-radius:9px;background:var(--bg-2);color:var(--text);font-size:14px;line-height:1;text-decoration:none}
.link-tool:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--line));color:var(--accent-text,var(--accent))}
.link-tool.danger:hover{border-color:color-mix(in srgb,var(--danger) 55%,var(--line));color:var(--danger-text,var(--danger))}
.resource-list::-webkit-scrollbar{width:8px}
.resource-list::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--line) 90%,transparent);border-radius:99px}
@media(max-width:640px){.resource-list{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;max-height:none;overflow:visible}}
/* each tile keeps its own height, so opening one does not stretch its neighbours */
.resource-list{align-items:start}
/* a fixed two-line box: taller and the clamped third line shows through */
.link-face h3{height:calc(1.35em * 2 + 16px);box-sizing:content-box;padding:7px 8px 9px}
.resource-card:hover,.resource-card:focus-within,.resource-card.open{z-index:3}

/* ---------- Saved links: smaller still, and quiet until asked ---------- */
/* the tile is a picture and a title. Hovering does nothing; a tap opens it. */
.resource-list{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;max-height:min(58vh,520px)}
.link-face h3{display:block;box-sizing:border-box;font-size:10.5px;line-height:1.3;height:calc(1.3em * 2 + 12px);min-height:0;padding:5px 6px 7px;overflow:hidden;-webkit-line-clamp:none;line-clamp:none}
.link-face h3.clipped{-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 97%);mask-image:linear-gradient(180deg,#000 55%,transparent 97%)}
.resource-favorite{top:4px;right:4px;width:22px;height:22px;font-size:11px}
.link-shot.placeholder{font-size:20px}
.resource-card:hover .link-more,.resource-card:focus-within .link-more{max-height:0;padding:0 7px;opacity:0}
.resource-card.open .link-more{max-height:420px;padding:0 7px 8px;opacity:1}
.resource-card.open{outline:2px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:1px}
.link-more{padding:0 7px}
.resource-card .resource-notes{-webkit-line-clamp:unset;line-clamp:unset;display:block}
@media(max-width:640px){.resource-list{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:7px}.link-face h3{font-size:10px}}

/* ---------- Class calendar ---------- */
.class-calendar{display:grid;gap:10px;margin:10px 0 4px}
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cal-head b{font-size:14px;text-transform:capitalize}
.cal-head .ghost-button{min-width:34px;padding:4px 10px;line-height:1}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-weekday{padding:2px 0;color:var(--muted);font-size:9.5px;font-weight:800;letter-spacing:.05em;text-align:center;text-transform:uppercase}
.cal-cell{min-height:52px;display:grid;align-content:start;gap:2px;padding:4px;border:1px solid var(--line);border-radius:9px;background:var(--bg-2)}
.cal-cell.empty{border-color:transparent;background:none}
.cal-cell b{font-size:10.5px;font-weight:700;color:var(--muted)}
.cal-cell.today{border-color:color-mix(in srgb,var(--accent) 60%,var(--line));box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent) inset}
.cal-cell.today b{color:var(--accent-text,var(--accent))}
.cal-cell.has-due{background:color-mix(in srgb,var(--accent) 7%,var(--bg-2))}
.cal-cell.overdue{background:color-mix(in srgb,var(--danger) 9%,var(--bg-2));border-color:color-mix(in srgb,var(--danger) 45%,var(--line))}
.cal-pip{display:block;overflow:hidden;padding:1px 4px;border-radius:5px;background:color-mix(in srgb,var(--accent) 22%,var(--panel));color:var(--text);font-size:8.5px;font-weight:800;white-space:nowrap;text-overflow:ellipsis}
.cal-pip.done{background:color-mix(in srgb,var(--success) 25%,var(--panel));color:var(--success-text,var(--success))}
.cal-late{margin:0;padding:7px 10px;border-radius:9px;background:color-mix(in srgb,var(--danger) 8%,var(--panel));color:var(--danger-text,var(--danger));font-size:11.5px;font-weight:700}
.cal-next{display:grid;gap:5px;margin:0;padding:0;list-style:none}
.cal-next li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;padding:7px 10px;border:1px solid var(--line);border-radius:9px;background:var(--bg-2);font-size:12px}
.cal-next li b{color:var(--accent-text,var(--accent));font-size:11px;white-space:nowrap}
.cal-next li small{color:var(--muted);font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.cal-empty{margin:0;color:var(--muted);font-size:12px}
@media(max-width:640px){.cal-cell{min-height:42px;padding:3px}.cal-pip{font-size:0;padding:3px}.cal-pip::after{content:"";display:block;width:100%;height:3px;border-radius:99px;background:currentColor}}
/* the ⋯ button is the only way to the detail: tapping the tile itself opens the link */
.link-expand{position:absolute;top:4px;left:4px;z-index:2;display:grid;place-items:center;width:22px;height:22px;padding:0;border:0;border-radius:8px;background:color-mix(in srgb,#000 42%,transparent);color:#fff;font-size:13px;line-height:1;}
.link-expand:hover,.link-expand:focus-visible{background:color-mix(in srgb,var(--accent) 78%,#000);color:#04111a}
.resource-card.open .link-expand{background:var(--accent);color:#04111a}

/* the detail lives under the strip, where a sentence has room to be a sentence */
.link-detail{display:grid;gap:10px;margin-top:12px;padding:14px 15px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:var(--r-md);background:linear-gradient(150deg,var(--bg-2),color-mix(in srgb,var(--accent) 4%,var(--panel)));box-shadow:0 10px 30px color-mix(in srgb,#000 12%,transparent)}
.link-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.link-detail-head h3{margin:0 0 3px;font-size:15px;line-height:1.35;overflow-wrap:anywhere}
.link-detail-head .link-tool{flex:0 0 auto;width:30px}
.link-detail .link-where{margin:0;color:var(--muted);font-size:11.5px}
.link-detail .resource-notes{margin:0;font-size:13px;line-height:1.6;-webkit-line-clamp:unset;line-clamp:unset;display:block}
.link-detail .link-tools{display:flex;gap:8px;max-width:280px}
.link-detail .resource-tags span{font-size:10px}
.resource-card.open{outline:2px solid var(--accent);outline-offset:1px}
/* delete is red before you press it, not after, and never the same glyph as close */
.link-tool.danger{color:var(--danger-text,var(--danger));border-color:color-mix(in srgb,var(--danger) 30%,var(--line))}

/* =====================================================================
   Depth II — the premium pass.
   The first depth layer was written against a dark theme: white inset
   highlights and near-black shadows. Half the themes are light, and on
   white paper both vanish — which is why the app read flat. This layer
   is theme-aware, and it puts something behind the glass worth blurring.
   ===================================================================== */
:root{
  /* the tint a glass surface adds on top of what shows through it */
  --glass-1:color-mix(in srgb,var(--panel) 74%,transparent);
  --glass-2:color-mix(in srgb,var(--panel-2) 58%,transparent);
  --glass-rim:color-mix(in srgb,var(--text) 13%,transparent);
  --glass-sheen:color-mix(in srgb,#fff 26%,transparent);
  --glass-blur:20px;
  /* the wash behind everything, so blur has something to work on */
  --aurora-1:color-mix(in srgb,var(--accent) 26%,transparent);
  --aurora-2:color-mix(in srgb,var(--accent-2) 24%,transparent);
  --aurora-3:color-mix(in srgb,var(--accent) 14%,transparent);
  /* shadows carry a little of the accent hue rather than flat black */
  --shade:color-mix(in srgb,var(--accent-2) 22%,#0a1420);
}
/* light themes: a shadow at 5% black is invisible on paper, and a white
   inset highlight even more so. Deepen the shadow, cool the sheen.
   NOTE: these must not use :where() — :root scores a class, html:where(...)
   scores an element, so a :where() list silently loses to the block above and
   the override never lands. That is why the app had no shadows for a month. */
html.theme-paper,html.theme-citrus,html.theme-bubblegum,html.theme-sakura,html.theme-focus-light{
  --glass-1:color-mix(in srgb,var(--panel) 82%,transparent);
  --glass-2:color-mix(in srgb,var(--panel-2) 66%,transparent);
  --glass-rim:color-mix(in srgb,var(--text) 11%,transparent);
  --glass-sheen:color-mix(in srgb,#fff 78%,transparent);
  --aurora-1:color-mix(in srgb,var(--accent) 30%,transparent);
  --aurora-2:color-mix(in srgb,var(--accent-2) 28%,transparent);
  --aurora-3:color-mix(in srgb,var(--accent) 18%,transparent);
  --e-1:0 1px 2px color-mix(in srgb,var(--shade) 12%,transparent),0 2px 6px color-mix(in srgb,var(--shade) 10%,transparent);
  --e-2:0 2px 6px color-mix(in srgb,var(--shade) 13%,transparent),0 12px 28px color-mix(in srgb,var(--shade) 14%,transparent);
  --e-3:0 6px 16px color-mix(in srgb,var(--shade) 15%,transparent),0 28px 64px color-mix(in srgb,var(--shade) 18%,transparent);
}

/* The aurora: soft pools of colour behind every surface, so the glass has
   something to refract instead of white on white.
   The dark themes already had an ambient wash on body::before; the light ones
   were switched off entirely, which is why they read as a flat white sheet.
   These extend the same layer rather than adding a competing one — a second
   fixed backdrop would just be painted over by the theme's own body colour. */
.theme-focus-light body::before,.theme-paper body::before,
.theme-citrus body::before,.theme-bubblegum body::before,.theme-sakura body::before{
  display:block;inset:0;animation:none;transform:none;
  background:
    radial-gradient(1150px 720px at 88% -12%,var(--aurora-2),transparent 62%),
    radial-gradient(950px 640px at 4% 2%,var(--aurora-1),transparent 60%),
    radial-gradient(900px 900px at 52% 116%,var(--aurora-3),transparent 62%);
  background-repeat:no-repeat;
}
/* the two calm themes get a whisper of it; the playful ones get the whole thing */
.theme-focus-light body::before,.theme-paper body::before{opacity:.45}
.theme-citrus body::before,.theme-bubblegum body::before,.theme-sakura body::before{opacity:.85}
/* high contrast keeps its flat black: an ambient wash behind text is exactly
   what that theme exists to avoid */
.theme-high-contrast body::before{display:none}
/* the ambient layer is a positioned z-index:0 box, so the app has to sit above it */
.app-shell{position:relative;z-index:1}
/* the theme body colour is opaque and would hide the wash */
.theme-focus-light body,.theme-paper body,.theme-citrus body,
.theme-bubblegum body,.theme-sakura body{background:transparent}

/* one glass recipe, applied to the surfaces a learner actually looks at */
.panel,.hero-card,.metric-card,.record-card,.game-panel,.study-card,.search-group,
.book-card,.theme-card,.class-assignment,.link-detail,.takeaway,.pack-card,
.certificate,.filter-panel,.definition-card,.dictionary-form,.empty-state,.cal-next li{
  background-image:
    radial-gradient(130% 84% at 14% -22%,var(--glass-sheen),transparent 58%),
    linear-gradient(158deg,var(--glass-1),var(--glass-2));
  background-color:transparent;
  border:1px solid var(--glass-rim);
  -webkit-
  
}
.panel{box-shadow:var(--e-2),inset 0 1px 0 var(--glass-sheen)}
.hero-card,.study-card,.certificate{box-shadow:var(--e-3),inset 0 1px 0 var(--glass-sheen)}
.metric-card,.record-card,.game-panel,.search-group,.book-card,.theme-card,
.class-assignment,.link-detail,.takeaway,.pack-card,.filter-panel,.definition-card,
.dictionary-form,.cal-next li{box-shadow:var(--e-1),inset 0 1px 0 var(--glass-sheen)}
/* real refraction where the browser has the filter, plain blur where not */
@supports (
    
  


/* lift on hover, so a card feels like an object rather than a rectangle */
.metric-card,.record-card,.book-card,.theme-card,.class-assignment,.pack-card,.game-panel{
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.metric-card:hover,.record-card:hover,.book-card:hover,.theme-card:hover,
.class-assignment:hover,.pack-card:hover,.game-panel:hover{
  transform:translateY(-2px);
  box-shadow:var(--e-3),inset 0 1px 0 var(--glass-sheen);
  border-color:color-mix(in srgb,var(--accent) 34%,var(--glass-rim));
}

/* the shimmering rim, now on the cards that were prepared for it and never got it */
.metric-card::after,.record-card::after,.game-panel::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:0;
  padding:1px;opacity:0;transition:opacity .25s ease;
  background:conic-gradient(from var(--nx-ring),
    transparent 0deg,color-mix(in srgb,var(--accent) 72%,transparent) 42deg,
    color-mix(in srgb,var(--accent-2) 72%,transparent) 96deg,transparent 156deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.metric-card:hover::after,.record-card:hover::after,.game-panel:hover::after{opacity:.9;animation:nx-ring-spin 7s linear infinite}
.game-panel,.record-card,.metric-card{position:relative}

/* chrome: sidebar, topbar and the phone nav are glass over the aurora */
.sidebar{
  background:linear-gradient(180deg,color-mix(in srgb,var(--bg-2) 76%,transparent),color-mix(in srgb,var(--bg) 66%,transparent));
  -webkit-
  border-right:1px solid var(--glass-rim);
  box-shadow:1px 0 0 color-mix(in srgb,#fff 6%,transparent),var(--e-2);
}
.topbar{
  background:color-mix(in srgb,var(--bg) 62%,transparent);
  -webkit-
  border-bottom:1px solid var(--glass-rim);
}
.global-search{
  background:linear-gradient(160deg,var(--glass-1),var(--glass-2));
  border-color:var(--glass-rim);
  box-shadow:var(--e-1),inset 0 1px 0 var(--glass-sheen);
}
.nav-item.active{
  background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 26%,transparent),color-mix(in srgb,var(--accent-2) 16%,transparent));
  box-shadow:inset 3px 0 var(--accent),0 6px 18px color-mix(in srgb,var(--accent) 20%,transparent);
}
.brand-mark{box-shadow:0 10px 30px color-mix(in srgb,var(--accent) 34%,transparent),inset 0 1px 0 color-mix(in srgb,#fff 45%,transparent)}

/* buttons get a gloss and a real shadow */
.primary-button{
  background-image:linear-gradient(180deg,color-mix(in srgb,#fff 22%,transparent),transparent 46%),
    linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 55%,var(--accent-2)));
  box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 32%,transparent),inset 0 1px 0 color-mix(in srgb,#fff 40%,transparent);
}
.secondary-button,.ghost-button,.icon-button{
  background-image:linear-gradient(180deg,var(--glass-sheen),transparent 52%);
  box-shadow:var(--e-1);
}
.primary-button:active,.secondary-button:active,.ghost-button:active{transform:translateY(1px)}

/* dialogs sit on a properly blurred backdrop */
.detail-dialog,.account-dialog,.quiz-dialog,.onboarding-dialog,.verse-dialog{
  border:1px solid var(--glass-rim);
  box-shadow:var(--e-3),inset 0 1px 0 var(--glass-sheen);
}
.detail-dialog::backdrop,.account-dialog::backdrop,.quiz-dialog::backdrop,
.onboarding-dialog::backdrop,.verse-dialog::backdrop{
  background:color-mix(in srgb,var(--bg) 62%,transparent);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);
}

/* Nobody's readability is worth a visual effect: high contrast, forced colours
   and a stated preference for less transparency all turn the glass off. */
html.theme-high-contrast .panel,html.theme-high-contrast .hero-card,html.theme-high-contrast .metric-card,html.theme-high-contrast .record-card,html.theme-high-contrast .game-panel,html.theme-high-contrast .study-card,html.theme-high-contrast .search-group,html.theme-high-contrast .book-card,html.theme-high-contrast .theme-card,html.theme-high-contrast .class-assignment,html.theme-high-contrast .link-detail,html.theme-high-contrast .takeaway,html.theme-high-contrast .pack-card,html.theme-high-contrast .certificate,html.theme-high-contrast .sidebar,html.theme-high-contrast .topbar,html.theme-high-contrast .bottom-nav,html.theme-high-contrast .global-search{
  -webkit-background:var(--panel);background-image:none;box-shadow:none
}
html.theme-high-contrast body{background:var(--bg)}
@media (prefers-reduced-transparency:reduce){
  .panel,.hero-card,.metric-card,.record-card,.game-panel,.study-card,.search-group,.book-card,.theme-card,.class-assignment,.link-detail,.takeaway,.pack-card,.certificate,.sidebar,.topbar,.bottom-nav,.global-search{
    -webkit-background-image:none;background-color:var(--panel)
  }
  body{background:var(--bg)}
}
@media (forced-colors:active){
  .panel,.hero-card,.metric-card,.record-card,.game-panel,.study-card,.sidebar,.topbar,.bottom-nav{
    -webkit-background-image:none
  }
}
@media (prefers-reduced-motion:reduce){
  .metric-card,.record-card,.book-card,.theme-card,.class-assignment,.pack-card,.game-panel{transition:none}
  .metric-card:hover,.record-card:hover,.book-card:hover,.theme-card:hover,
  .class-assignment:hover,.pack-card:hover,.game-panel:hover{transform:none}
  .metric-card:hover::after,.record-card:hover::after,.game-panel:hover::after{animation:none}
}

/* ---------- Bottom-nav pictograms ----------
   Drawn rather than borrowed from a font: a pirate-map trail with an X for the
   course, a fanned hand of cards for review, a controller for the games. They
   inherit currentColor, so every theme and the active state come for free. */
.nav-glyph{display:grid;place-items:center;width:26px;height:26px}
.nav-glyph svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.nav-glyph .fill{fill:currentColor;stroke:none}
/* the trail is dotted, like a route drawn on a map */
.nav-glyph .trail{stroke-dasharray:0.1 3.4;stroke-width:2.1}
.bottom-nav button.active .nav-glyph svg{filter:drop-shadow(0 2px 6px color-mix(in srgb,var(--accent) 55%,transparent))}
.bottom-nav button.active .nav-glyph{transform:translateY(-1px)}
.bottom-nav button{transition:color .18s ease}
.nav-glyph,.nav-glyph svg{transition:transform .18s ease}
@media (prefers-reduced-motion:reduce){.nav-glyph,.nav-glyph svg,.bottom-nav button{transition:none}.bottom-nav button.active .nav-glyph{transform:none}}
/* the phone bar is glass, like the rest of the chrome */
.bottom-nav{
  background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 72%,transparent),color-mix(in srgb,var(--bg-2) 88%,transparent));
  -webkit-
  border-top:1px solid var(--glass-rim);
  box-shadow:0 -8px 28px color-mix(in srgb,var(--shade) 16%,transparent);
}

/* ---------- Class messages ---------- */
.unread-dot{display:inline-grid;place-items:center;min-width:19px;height:19px;margin-left:8px;padding:0 5px;border-radius:var(--r-pill);background:var(--danger);color:#fff;font-size:10.5px;font-weight:900;vertical-align:middle}
.msg-layout{display:grid;grid-template-columns:minmax(180px,240px) minmax(0,1fr);gap:var(--sp-3);align-items:start}
.msg-people{display:grid;gap:6px;max-height:340px;overflow:auto;padding-right:2px}
.msg-person{display:grid;gap:3px;text-align:left;padding:9px 11px;border:1px solid var(--glass-rim);border-radius:var(--r-md);background:var(--bg-2);color:var(--text)}
.msg-person b{display:flex;align-items:center;font-size:13.5px}
.msg-person small{color:var(--muted);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-person:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--glass-rim))}
.msg-person.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--bg-2))}
.msg-panel{display:grid;gap:var(--sp-2);min-width:0}
.msg-thread{display:grid;gap:8px;align-content:start;max-height:320px;overflow-y:auto;padding:10px;border:1px solid var(--glass-rim);border-radius:var(--r-lg);background:color-mix(in srgb,var(--bg-2) 60%,transparent)}
.msg{justify-self:start;max-width:min(82%,560px);padding:9px 12px;border:1px solid var(--glass-rim);border-radius:14px 14px 14px 4px;background:var(--panel);box-shadow:var(--e-1)}
.msg-mine{justify-self:end;border-radius:14px 14px 4px 14px;background:color-mix(in srgb,var(--accent) 14%,var(--panel));border-color:color-mix(in srgb,var(--accent) 32%,var(--glass-rim))}
.msg p{margin:0;font-size:14px;line-height:1.55;overflow-wrap:anywhere}
.msg small{display:block;margin-top:4px;color:var(--muted);font-size:10.5px}
.msg-thread .empty-state{padding:26px 14px;border:0;background:none}
.msg-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end}
.msg-form textarea{width:100%;resize:vertical;min-height:46px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg-2);color:var(--text);padding:11px 12px;font:inherit;line-height:1.5}
.msg-form textarea:focus{outline:0;border-color:var(--accent);box-shadow:var(--ring)}
@media(max-width:760px){.msg-layout{grid-template-columns:1fr}.msg-people{max-height:200px}.msg{max-width:92%}}

/* ---------- Classroom: tabs instead of one very long page ---------- */
.classroom-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-4)}
.class-role{display:inline-flex;gap:4px;margin-bottom:var(--sp-4);padding:4px;border:1px solid var(--glass-rim);border-radius:var(--r-pill);background:color-mix(in srgb,var(--bg-2) 70%,transparent)}
.class-role-button{padding:9px 18px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--muted);font-size:13.5px;font-weight:750}
.class-role-button.active{background:var(--accent);color:var(--on-accent);box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 28%,transparent)}
.class-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:var(--sp-4) 0 var(--sp-3);padding-bottom:var(--sp-2);border-bottom:1px solid var(--glass-rim)}
.class-tabs .tab{position:relative;font-size:13px}
.class-tabs .tab .unread-dot{margin-left:6px;min-width:17px;height:17px;font-size:10px}
.class-tabpanel{display:grid;gap:var(--sp-3);align-content:start}
.class-tabpanel:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--r-md)}
.class-tabpanel>h3{margin:var(--sp-2) 0 0}
.class-tabpanel>h3:first-child{margin-top:0}
@media(max-width:640px){.class-role{width:100%}.class-role-button{flex:1;padding:9px 10px}.class-tabs{gap:5px}.class-tabs .tab{padding:8px 10px;font-size:12.5px}}

/* ---------- Contrast: one token for text that sits on the accent ----------
   Dark-on-accent was hardcoded in six places. On the default light theme that
   put #04121b on #087f72 — 3.87:1, under AA on the app's most-used control.
   --on-accent is whichever of white or near-black actually passes for that
   theme's accent, computed rather than guessed; the worst case is now 4.90:1. */
:root{--on-accent:#06121d}
html.theme-focus-light,html.theme-paper,html.theme-sakura{--on-accent:#ffffff}
.primary-button,.tab.active,.skip-link,.pagination button.active,
.nav-item em,.brand-mark,.account-chip>span:first-child,.class-role-button.active{color:var(--on-accent)}
.progress-ring span,.score-ring b{color:var(--text)}
/* The toast is the app's only status channel and it was invisible on every light
   theme: background:var(--text) with a hardcoded near-black label, 1.15:1.
   Pairing it with var(--bg) inverts correctly whichever way the theme runs. */
.toast{background:var(--text);color:var(--bg)}

/* the same six identities, lightened for a dark panel */
html.theme-soft-dark,html.theme-pitch-black,html.theme-high-contrast,html.theme-popsicle,html.theme-parchment,html.theme-velvet,html.theme-aurora,html.theme-ocean,html.theme-solar,html.theme-arcade,html.theme-forest,html.theme-terminal{--p1:#4ea8e0;--p2:#ff9d5c;--p3:#43cfa5;--p4:#b494f5;--p5:#e0b83c;--p6:#ff7fa8}
html.theme-soft-dark.cv-deuteranopia,html.theme-soft-dark.cv-protanopia,html.theme-pitch-black.cv-deuteranopia,html.theme-pitch-black.cv-protanopia,html.theme-high-contrast.cv-deuteranopia,html.theme-high-contrast.cv-protanopia,html.theme-popsicle.cv-deuteranopia,html.theme-popsicle.cv-protanopia,html.theme-parchment.cv-deuteranopia,html.theme-parchment.cv-protanopia,html.theme-velvet.cv-deuteranopia,html.theme-velvet.cv-protanopia,html.theme-aurora.cv-deuteranopia,html.theme-aurora.cv-protanopia,html.theme-ocean.cv-deuteranopia,html.theme-ocean.cv-protanopia,html.theme-solar.cv-deuteranopia,html.theme-solar.cv-protanopia,html.theme-arcade.cv-deuteranopia,html.theme-arcade.cv-protanopia,html.theme-forest.cv-deuteranopia,html.theme-forest.cv-protanopia,html.theme-terminal.cv-deuteranopia,html.theme-terminal.cv-protanopia{--p1:#4ea8e0;--p2:#f0b429;--p3:#8fd3f7;--p4:#b494f5;--p5:#c9a94a;--p6:#e8e8e8}
html.theme-soft-dark.cv-tritanopia,html.theme-pitch-black.cv-tritanopia,html.theme-high-contrast.cv-tritanopia,html.theme-popsicle.cv-tritanopia,html.theme-parchment.cv-tritanopia,html.theme-velvet.cv-tritanopia,html.theme-aurora.cv-tritanopia,html.theme-ocean.cv-tritanopia,html.theme-solar.cv-tritanopia,html.theme-arcade.cv-tritanopia,html.theme-forest.cv-tritanopia,html.theme-terminal.cv-tritanopia{--p1:#43cfa5;--p2:#ff9d5c;--p3:#b494f5;--p4:#e8e8e8;--p5:#ff7fa8;--p6:#b9b9b9}
/* the selected tab must not be signalled by colour alone */
.bottom-nav button.active{color:var(--accent-text,var(--accent));font-weight:800}
.bottom-nav button.active::before{content:"";position:absolute;top:2px;left:50%;translate:-50% 0;width:22px;height:3px;border-radius:99px;background:currentColor}
.bottom-nav button{position:relative}

/* The review stage is a grid item next to a very tall settings column, so it was
   being stretched to match it — the card grew past 900px and centred the word
   being tested below the fold. The stage sizes itself now, and the column beside
   it scrolls on its own. */
.study-layout{align-items:start}
.study-stage{min-height:0}
.study-card{min-height:0;max-height:min(52vh,460px);padding:clamp(20px,3vw,40px)}
.study-card strong{font-size:clamp(24px,3.4vw,40px)}
@media(max-width:900px){.study-card{max-height:none}}

/* ---------- Gradebook ----------
   The roster gave one average per student, so a teacher could see somebody was
   struggling but not on what. This is students down, assignments across. */
.grade-toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap}
.grade-toolbar .settings-copy{margin:0;max-width:52ch}
.gradebook{width:100%;border-collapse:separate;border-spacing:0;min-width:520px}
.gradebook th,.gradebook td{padding:8px 10px;text-align:center;border-bottom:1px solid var(--glass-rim);vertical-align:middle}
.gradebook thead th{position:sticky;top:0;z-index:2;background:var(--panel-2);font-size:11px;font-weight:800;line-height:1.25}
.gradebook thead th span{display:block;max-width:118px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0 auto}
.gradebook thead th small{display:block;color:var(--muted);font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.gradebook .g-name{position:sticky;left:0;z-index:1;background:var(--panel);text-align:left;min-width:150px}
.gradebook thead .g-name{z-index:3}
.gradebook .g-name small{display:block;color:var(--muted);font-size:10.5px;font-weight:600}
.gradebook td b{display:block;font-size:13.5px;line-height:1.1}
.gradebook td small{display:block;color:var(--muted);font-size:10px}
.gradebook tbody tr:hover td,.gradebook tbody tr:hover .g-name{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.gradebook .g-foot th,.gradebook .g-foot td{border-top:2px solid var(--glass-rim);border-bottom:0;font-weight:800}
/* the bands double up as text so the colour is never the only signal */
.g-a{background:color-mix(in srgb,var(--success) 22%,transparent)}
.g-b{background:color-mix(in srgb,var(--success) 12%,transparent)}
.g-c{background:color-mix(in srgb,var(--warning) 16%,transparent)}
.g-d{background:color-mix(in srgb,var(--warning) 26%,transparent)}
.g-e{background:color-mix(in srgb,var(--danger) 20%,transparent)}
.g-none{color:var(--muted)}
.g-pill{display:inline-grid;place-items:center;min-width:48px;padding:3px 8px;border-radius:var(--r-pill);font-size:12px;font-weight:800}
.link-button{border:0;background:none;padding:0;color:var(--accent-text,var(--accent));font:inherit;font-weight:750;text-align:left;text-decoration:underline;text-underline-offset:2px}
.grade-detail{margin-top:var(--sp-3);padding:var(--sp-4);border:1px solid var(--glass-rim);border-radius:var(--r-lg);background:color-mix(in srgb,var(--bg-2) 60%,transparent)}
.grade-stats{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-bottom:var(--sp-3)}
.grade-stats span{display:grid}
.grade-stats b{font-size:22px;line-height:1}
.grade-stats small{color:var(--muted);font-size:11px}
.grade-list{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.grade-list li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--glass-rim);border-radius:var(--r-md);background:var(--panel)}
.grade-list small{color:var(--muted);font-size:11px;white-space:nowrap}
.grade-missing{margin:var(--sp-3) 0 0;padding:9px 11px;border-radius:var(--r-md);background:color-mix(in srgb,var(--danger) 9%,transparent);font-size:12.5px}
@media(max-width:640px){.grade-toolbar{flex-direction:column}.gradebook{min-width:420px}.grade-list li{grid-template-columns:auto 1fr}}

/* ---------- False friends: a warning, not a pairing ----------
   Rendering them as "casualidad ↔ casualty" taught the association the word
   exists to break. One word leads with its real meaning; the lookalike is
   marked as the thing it is NOT. */
.false-friend{display:grid;gap:6px;padding:var(--sp-4);border:1px solid var(--glass-rim);border-radius:var(--r-lg);background:var(--panel)}
.false-friend .ff-word{margin:0;font-size:19px;letter-spacing:-.01em}
.false-friend .ff-means{margin:0;font-size:14.5px;color:var(--text)}
.false-friend .ff-trap{display:flex;align-items:flex-start;gap:8px;margin:4px 0 0;padding:8px 11px;border-radius:var(--r-md);background:color-mix(in srgb,var(--danger) 10%,transparent);font-size:13.5px;line-height:1.5}
.false-friend .ff-trap b{color:var(--danger-text,var(--danger))}
.false-friend .ff-trap small{color:var(--muted)}
.ff-x{flex:0 0 auto;font-weight:900;color:var(--danger-text,var(--danger));line-height:1.45}
.false-friend .ff-note{color:var(--muted);font-size:12px;line-height:1.5}
/* the dashboard "keep it sharp" list uses the same shape, one line each */
.keepup-list li b{display:block;font-size:15px}
.keepup-list li span em{color:var(--danger-text,var(--danger));font-style:normal;font-weight:700}

/* ---------- Person legend: name the pronoun, and the one that is missing ---- */
.legend-chip{display:inline-grid;gap:1px;line-height:1.25}
.legend-chip small{color:var(--muted);font-size:10.5px;font-weight:600}
.person-note{margin:8px 0 0;padding:9px 12px;border-left:3px solid var(--accent);border-radius:0 var(--r-md) var(--r-md) 0;background:color-mix(in srgb,var(--accent) 7%,transparent);color:var(--text);font-size:12.5px;line-height:1.55}

/* Skip paint work for cards scrolled out of view. Long pages were repainting every
   panel on every frame, which is what made scrolling feel like ten frames a second. */
.panel,.record-card,.theme-card,.search-group,.table-shell{content-visibility:auto;contain-intrinsic-size:auto 320px}
.sidebar,.topbar,.study-stage{contain:paint}

/* Front/Back and the flip hint used to sit in the flow at the same weight as the word
   being studied. They are chrome, not content: put them in the bottom corner, small,
   and let the hint fade once it has been read. */
.study-card{position:relative}
.study-card .study-foot{position:absolute;left:14px;right:14px;bottom:10px;display:flex;justify-content:space-between;align-items:flex-end;gap:10px;pointer-events:none}
.study-card .study-foot em{font-style:normal;font-size:9px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--muted);opacity:.55}
.study-card .study-foot small{font-size:9px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--muted);opacity:.55;animation:nexus-flip-hint-fade .4s ease 5s forwards}
@keyframes nexus-flip-hint-fade{to{opacity:0;visibility:hidden}}
@media(prefers-reduced-motion:reduce){.study-card .study-foot small{animation-duration:.01s}}
.study-card .study-ask{font-size:11px}

.settings-section{border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(160deg,var(--panel),color-mix(in srgb,var(--panel-2) 82%,var(--panel)));padding:0;overflow:hidden;box-shadow:0 16px 42px rgba(0,0,0,.14)}
.settings-section>summary{list-style:none;cursor:pointer;padding:15px 18px;display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.settings-section>summary::-webkit-details-marker{display:none}
.settings-section>summary b{font-size:16px;letter-spacing:-.02em}
.settings-section>summary span{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.12em;font-weight:800}
.settings-section>summary::after{content:"+";color:var(--muted);font-weight:900;margin-left:auto}
.settings-section[open]>summary::after{content:"−"}
.settings-section-body{padding:0 18px 18px}

/* The exam and certificate belong to the end of the course. Hiding them in JS depended on
   call order; as a sibling rule it cannot come apart. */
#lesson-panel:not(.hidden) ~ #exam-panel{display:none}

.lesson-step{display:none}
.lesson-step.active{display:block;animation:fadeIn .18s ease}
.lesson-overview>.eyebrow{margin-bottom:10px}
.lesson-steps-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.lesson-step-count{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:800}
.lesson-steps-nav button[disabled]{opacity:.4}

/* The game applied a "fading" class that no rule ever defined, so the word simply sat
   there and Fade Recall had nothing to recall. */
#fade-word{font-size:clamp(30px,6vw,56px);font-weight:900;letter-spacing:-.02em;min-height:1.2em;display:block}
#fade-word.fading{animation:nexus-word-fade 2.6s ease-in forwards}
@keyframes nexus-word-fade{0%{opacity:1;filter:blur(0)}55%{opacity:.85;filter:blur(0)}100%{opacity:0;filter:blur(6px)}}
@media(prefers-reduced-motion:reduce){#fade-word.fading{animation-duration:2.6s;animation-timing-function:steps(2,end)}}

/* Games ran inside a small box on a large empty page. A game is the page. */
#games-view .game-panel,#games-view .invaders-wrap,.game-stage{width:100%;max-width:none}
#games-view .game-panel{min-height:calc(100vh - var(--topbar) - 90px);display:flex;flex-direction:column}
#games-view canvas{width:100%!important;height:auto!important;max-height:calc(100vh - var(--topbar) - 190px);display:block;margin:auto}
#games-view .game-board,#games-view .quiz-options{flex:1}

/* Density. Headings were sized for a poster, not a workspace. */
h1{font-size:clamp(24px,2.6vw,38px)!important}
.page-heading h1{font-size:clamp(24px,2.6vw,36px)!important}
.metric-card b{font-size:24px}
.study-card strong{font-size:clamp(22px,3vw,38px)}
.hero-copy{padding:clamp(20px,3vw,40px)}
.panel{padding:16px}

/* Mobile is its own layout, not a squeezed desktop. */
@media(max-width:820px){
  main{padding:14px 14px 90px}
  .dashboard-grid,.settings-grid,.record-grid,.shop-grid,.detail-grid,.language-grid{grid-template-columns:1fr!important}
  .metric-grid{grid-template-columns:repeat(2,1fr)!important;gap:10px}
  .hero-card{grid-template-columns:1fr!important;min-height:0}
  .orbit-visual{display:none}
  h1{font-size:26px!important}
  .panel{padding:14px;border-radius:16px}
  .rating-row{grid-template-columns:repeat(2,1fr)}
  #games-view .game-panel{min-height:calc(100vh - 150px)}
}

/* The holographic overlay is position:absolute;inset:0, but neither host was positioned,
   so it sized itself against the page rather than the card — a sheen stretching off to
   the right and dragging the document width out with it. */
.game-pick,.theme-choice{position:relative;overflow:hidden}
.game-pick::before,.theme-choice.locked::before{contain:paint}
html,body{overflow-x:hidden;max-width:100%}