/* 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 auto auto auto;gap:10px;padding:16px;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) 100%,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 -8px 30px rgba(0,0,0,.16)}

/* 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)}
/* Any chart that turns out to be a paradigm gets the same treatment as the conjugation
   pages: the person's colour on the row, the ending in that colour inside the cell. */
.paradigm tbody tr.pn1 td:first-child{border-left:4px solid var(--p1)}
.paradigm tbody tr.pn2 td:first-child{border-left:4px solid var(--p2)}
.paradigm tbody tr.pn3 td:first-child{border-left:4px solid var(--p3)}
.paradigm tbody tr.pn4 td:first-child{border-left:4px solid var(--p4)}
.paradigm tbody tr.pn5 td:first-child{border-left:4px solid var(--p5)}
.paradigm tbody tr.pn6 td:first-child{border-left:4px solid var(--p6)}
.paradigm tbody td:first-child{white-space:nowrap}
/* Gender inks. Same three values as the person palette uses for those slots, so they are
   already measured against every panel this app can paint behind them. */
html{--g1:var(--p1);--g2:var(--p6);--g3:var(--p3)}
html.cv-mono{--g1:var(--text);--g2:var(--text);--g3:var(--text)}
.gendered tbody tr.gn1 td:first-child{border-left:4px solid var(--g1)}
.gendered tbody tr.gn2 td:first-child{border-left:4px solid var(--g2)}
.gendered tbody tr.gn3 td:first-child{border-left:4px solid var(--g3)}
.gn1 .gender-mark{color:var(--g1);font-weight:800}
.gn2 .gender-mark{color:var(--g2);font-weight:800}
.gn3 .gender-mark{color:var(--g3);font-weight:800}
/* Minimal colour keeps the meaning legible without the ink. */
html.cv-mono .gn1 .gender-mark{text-decoration:underline;text-underline-offset:3px}
html.cv-mono .gn2 .gender-mark{text-decoration:underline;text-decoration-style:double;text-underline-offset:3px}
html.cv-mono .gn3 .gender-mark{text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
/* The endings alone, under the chart they came from. */
.pattern-strip{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;margin:8px 0 2px;padding:8px 10px;border-radius:12px;background:var(--bg-2);font-variant-numeric:tabular-nums}
.pattern-strip .ending{font-size:1.02rem;letter-spacing:.01em}
html.cv-mono .pattern-strip .ending{text-decoration:none}
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)}
/* This used to be a second @keyframes nx-shimmer. The name was already taken by the conic
   ring sweep 400 lines above, and the later definition wins for every user of the name - so
   every card border stopped rotating and slid off to the right instead. That is the "radial
   shimmer that slides off to the right" report. A loading skeleton and a border ring are not
   the same animation and no longer share a name. */
.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-skeleton-sweep 1.4s infinite}
@keyframes nx-skeleton-sweep{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{
  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 */
/* 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,var(--panel),var(--bg-2));
  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,html.theme-win98,html.theme-notebook{--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. */
[data-view-panel="games"] .game-panel,[data-view-panel="games"] .invaders-wrap,.game-stage{width:100%;max-width:none}
[data-view-panel="games"] .game-panel{min-height:calc(100vh - var(--topbar) - 90px);display:flex;flex-direction:column}
[data-view-panel="games"] canvas{width:100%!important;height:auto!important;max-height:calc(100vh - var(--topbar) - 190px);display:block;margin:auto}
[data-view-panel="games"] .game-board,[data-view-panel="games"] .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)}
  [data-view-panel="games"] .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%}

/* A game is the page, not a card sitting on an empty one. The view container is
   [data-view-panel="games"]; an earlier rule targeted #games-view, which matches nothing. */
[data-view-panel="games"].active{display:flex!important;flex-direction:column;min-height:calc(100vh - var(--topbar) - 60px)}
[data-view-panel="games"] .game-board,[data-view-panel="games"] .game-panel{flex:1;display:flex;flex-direction:column}
[data-view-panel="games"] .games-grid{flex:0 0 auto}
@media(max-width:820px){[data-view-panel="games"].active{min-height:calc(100vh - 120px)}}

/* The board sits directly in the view; give it the room rather than leaving it a card
   floating on an empty page. Measured: 335px board in an 844px window before this. */
[data-view-panel="games"].active > .game-board{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
[data-view-panel="games"].active > .game-board > *:last-child{flex:1 1 auto}

/* The games page was a 683px picker above a 335px game. The picker is navigation, not
   content: it scrolls sideways in one row and hands the height to the game. */
/* This one-row sideways scroller was written for a phone and shipped without a media query,
   so a 1440px desktop got 2,519px of games in a 900px box and four of the seven were simply
   cut off. Sideways below 820px, where the room genuinely is not there; a wrapping grid
   above it, where it is. */
[data-view-panel="games"].active > .game-chooser{flex:0 0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;padding-bottom:6px}
/* The sideways scroller was still the phone layout, and on a phone it cut off whatever did
   not fit while leaving the rest of the screen empty. Games are app tiles now - a grid that
   wraps, with the icon back, so all seven are on screen at 390px instead of three and a half. */
@media(max-width:820px){
  [data-view-panel="games"].active > .game-chooser{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:9px;overflow:visible}
}
[data-view-panel="games"].active .game-pick{min-height:0;padding:13px 10px 11px;width:auto;grid-template-columns:auto;gap:5px;border-radius:18px;justify-items:center;text-align:center}
[data-view-panel="games"].active .game-pick-art{display:grid;place-items:center;font-size:1.9rem;line-height:1;letter-spacing:0}
[data-view-panel="games"].active .game-pick b{font-size:12.5px;line-height:1.25}
[data-view-panel="games"].active .game-pick span:not(.game-pick-art){display:none}
[data-view-panel="games"].active > .page-heading{margin-bottom:8px}
[data-view-panel="games"].active > .page-heading p:not(.eyebrow){display:none}

.library-more{display:block;margin:14px auto 0}

/* A shelf card is for choosing a book, not reading about one. Measured at 390x844:
   the card was 397-428px, so twelve of them were 4,810px. Cover, title, author,
   the translation note and one button stay out; everything else lives in the
   card's own disclosure. */
.book-card>header{align-items:center}
.book-card .book-pair{margin:0;font-size:.78rem;line-height:1.4}
.book-card .book-pair small{display:block;opacity:.75}
.book-card .book-actions{gap:8px}
.book-more[open]{margin-top:2px}
.book-more .book-meta{margin:8px 0 0}
.book-more .book-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.book-more .book-rights{margin:8px 0 0;font-size:.78rem;color:var(--muted);line-height:1.5}
@media(max-width:660px){
  .book-card{padding:14px}
  .book-cover{width:58px}
  .book-card h3{font-size:15px;margin:0 0 3px}
  .book-card header p{font-size:12px}
}

/* The dashboard hero was 529px of a 844px phone screen before the first thing to do.
   Measured: route copy 108px, route badge 109px, three stacked buttons 152px.
   The curriculum sentence belongs on the course page; the route and stage are one
   line, not a card; the actions sit two across. */
@media(max-width:660px){
  #today-route-copy{display:none}
  .route-badge{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;padding:10px 12px;min-width:0}
  .route-badge small{order:1;width:100%}
  .route-badge strong{order:2;margin:0;font-size:15px}
  .route-badge span{display:inline;order:3;font-size:12px}
  .hero-actions{grid-template-columns:1fr 1fr}
  .hero-actions .ghost-button{grid-column:1/-1}
}

/* The rest of the route is one button away rather than eleven rows you cannot start. */
.course-show-all{display:block;margin:12px auto 0}

/* Grouped settings: the outer group carries the card, the sections inside it are a list. */
.settings-group>.settings-section-body{display:grid;gap:10px;padding-top:4px}
.settings-group .settings-section{box-shadow:none;background:var(--panel-2)}
.settings-group .settings-section>summary{padding:12px 14px}
.settings-group .settings-section>summary b{font-size:14px}

/* Two folded summary cards stacked were 156px of an 844px phone screen for two headings. */
@media(max-width:660px){
  .leaderboard-summary-grid{grid-template-columns:1fr 1fr;gap:10px}
  .leaderboard-summary-grid>details>summary{padding:12px 13px}
  .leaderboard-summary-grid>details>summary b{font-size:14px}
}

/* While a game is running the view holds the page heading and the game, nothing else.
   Measured at 390x844: the running game panel was 694px and the page 1,269px; the view
   has 182px less room than the window and the heading takes 64px of what is left. */
[data-view-panel="games"].playing .game-panel{min-height:calc(100vh - 246px)}
@media(max-width:820px){[data-view-panel="games"].playing .game-panel{min-height:calc(100vh - 246px)}}

/* A paragraph explaining translation theory sat above the reader on every visit. */
.reader-why{margin-top:8px}
.reader-why summary{cursor:pointer;color:var(--muted);font-size:.82rem}
.reader-why p{margin:8px 0 0;color:var(--muted);line-height:1.55;max-width:62ch}
/* A locked lesson reads as locked rather than as a step you simply have not reached. */
.map-node.locked{opacity:.55}
.map-node.locked .map-meta{font-style:italic}

/* Teaching the pattern rather than printing the paradigm. The rule sits above the table,
   the ending is the only coloured thing in the line, and the family note is the point of
   the whole product. */
.pattern-teach{margin:0 0 18px;padding:18px;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));border-radius:var(--r-lg,18px);background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 7%,var(--panel)),var(--panel))}
.pattern-teach h3{margin:0 0 4px;font-size:17px;letter-spacing:-.02em}
.pattern-teach h4{margin:16px 0 6px;font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.pattern-lead{margin:0 0 12px;color:var(--muted);line-height:1.55;max-width:64ch}
.pattern-rules{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pattern-rules li{display:grid;grid-template-columns:minmax(90px,auto) 1fr;gap:4px 12px;align-items:baseline;padding:10px 12px;border-radius:12px;background:var(--bg-2)}
.pattern-rules li b{font-size:15px}
.pattern-rules .pattern-rule{font-size:14px}
.pattern-rules li small{grid-column:1/-1;color:var(--muted);font-size:12px;line-height:1.5}
.pattern-rules .ending{font-weight:900}
.pattern-family{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:13px;line-height:1.6;color:var(--muted)}
.pattern-family span{display:inline-block;margin-right:12px;white-space:nowrap}
.pattern-family b{color:var(--text,inherit)}
@media(max-width:660px){.pattern-teach{padding:14px}.pattern-rules li{grid-template-columns:1fr}}

/* The exam and certificate belong to the end of the course, not under every lesson. The
   original rule targeted #exam-panel, but tidyView folds that panel and the <details> that
   replaces it carries no id — so the rule stopped matching and the card came back, exactly
   where the owner said it was. Match the fold too. */
#lesson-panel:not(.hidden) ~ #exam-panel,
#lesson-panel:not(.hidden) ~ [data-folded-from="exam-panel"]{display:none!important}
.pattern-observations{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pattern-observations li{padding:10px 12px;border-radius:12px;background:var(--bg-2);border-left:3px solid color-mix(in srgb,var(--accent) 55%,transparent)}
.pattern-observations li b{display:block;font-size:14px;margin-bottom:3px}
.pattern-observations li small{color:var(--muted);font-size:12px;line-height:1.55}

/* A completed task has to look completed. Struck through, dimmed, and its number replaced
   by the tick rather than sitting beside one. */
.today-plan-item.done{opacity:.55}
.today-plan-item.done b{text-decoration:line-through;text-decoration-thickness:1.5px}
.today-plan-item.done>span{background:color-mix(in srgb,var(--success,#3aa) 22%,transparent);color:var(--success-text,var(--success,#3aa))}
/* False friends fold away: a caution belongs behind a heading, not on the front page. */
.keepup-traps{margin-top:12px;border:1px solid color-mix(in srgb,var(--warning,#c93) 35%,var(--line));border-radius:12px;padding:10px 12px;background:color-mix(in srgb,var(--warning,#c93) 6%,transparent)}
.keepup-traps summary{cursor:pointer;font-size:.85rem;font-weight:700}
.keepup-warning{margin:8px 0 6px;font-size:.78rem;color:var(--muted);line-height:1.5}
.mask-toggle{display:inline-block;margin:0 0 10px}

/* Present mode: the class on a projector, read from the back of the room. */
.present-class{display:inline-block;margin:0 0 12px}
body.presenting [data-view-panel="classroom"]{background:var(--bg);padding:32px;overflow:auto}
body.presenting .pattern-table{font-size:1.35rem}
body.presenting .pattern-table th,body.presenting .pattern-table td{padding:16px 20px}
body.presenting h2{font-size:2rem}
body.presenting .sidebar,body.presenting .topbar,body.presenting .bottom-nav,body.presenting .present-class,body.presenting .mask-toggle{display:none!important}

/* ---------- Surface system: liquid glass, real depth, one hierarchy ----------
   The owner's brief was "liquid glass, drop shadows, better hierarchy, anti-slop", and the
   frontend-design skill they attached asks for atmosphere and depth rather than flat fills.
   The constraint this app has that a mockup does not: backdrop-filter is banned outside
   ::backdrop because a blurred fixed element re-blurs the whole page every frame and cost
   7fps against 60. So the glass here is built from layered gradients, an inner top
   highlight and a hairline edge — the read of glass, none of the cost. Measured after:
   still 60fps on every view.

   Three elevations, and only three. A card that needs to sit above another gets the next
   step, not a bespoke shadow. */
:root{
  --nx-e1: 0 1px 2px rgba(8,12,20,.06), 0 2px 6px rgba(8,12,20,.05);
  --nx-e2: 0 2px 4px rgba(8,12,20,.07), 0 8px 20px rgba(8,12,20,.08);
  --nx-e3: 0 4px 8px rgba(8,12,20,.09), 0 18px 44px rgba(8,12,20,.12);
  --nx-edge: inset 0 1px 0 rgba(255,255,255,.55);
  --nx-glass: linear-gradient(160deg, color-mix(in srgb,#fff 62%,transparent), color-mix(in srgb,#fff 22%,transparent) 42%, transparent 78%);
}
html.theme-soft-dark,html.theme-pitch-black,html.theme-high-contrast,html.theme-velvet,
html.theme-aurora,html.theme-ocean,html.theme-forest,html.theme-terminal,html.theme-arcade{
  --nx-e1: 0 1px 2px rgba(0,0,0,.34), 0 2px 8px rgba(0,0,0,.28);
  --nx-e2: 0 2px 6px rgba(0,0,0,.4), 0 10px 26px rgba(0,0,0,.34);
  --nx-e3: 0 6px 14px rgba(0,0,0,.46), 0 22px 54px rgba(0,0,0,.44);
  --nx-edge: inset 0 1px 0 rgba(255,255,255,.09);
  --nx-glass: linear-gradient(160deg, color-mix(in srgb,#fff 12%,transparent), color-mix(in srgb,#fff 4%,transparent) 44%, transparent 78%);
}
/* the glass itself: a lit top edge, a gradient that falls away, a hairline, real depth */
.panel,.metric-card,.record-card,.book-card,.theme-card,.search-group,.conjugation-model,
.game-panel,.takeaway,.cheat-row,.pack-card,.settings-section,.pattern-card,.study-card,
.hero-card,.today-hero,.class-assignment,.dictionary-pack-card{
  position:relative;
  box-shadow:var(--nx-e2),var(--nx-edge);
  border:1px solid color-mix(in srgb,var(--line) 82%,transparent);
}
.panel::before,.metric-card::before,.book-card::before,.settings-section::before,
.today-hero::before,.study-card::before,.pattern-teach::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:var(--nx-glass);opacity:.85;
}
.panel>*,.metric-card>*,.book-card>*,.settings-section>*,.today-hero>*,.study-card>*,.pattern-teach>*{position:relative;z-index:1}
/* hierarchy: the thing you came for sits a step above its page, and lifts a step on hover */
.today-plan-panel,.resource-collection-panel,.pattern-teach,#library-list{box-shadow:var(--nx-e3),var(--nx-edge)}
.settings-group .settings-section{box-shadow:var(--nx-e1)}
.book-card:hover,.metric-card:hover,.pattern-card:hover,.game-pick:hover,.theme-card:hover{box-shadow:var(--nx-e3),var(--nx-edge)}
/* labels stop shouting: one small-caps eyebrow per block, never a paragraph of it */
.page-heading .eyebrow,.panel-heading .eyebrow{font-size:11px;letter-spacing:.14em;opacity:.72}
@media(prefers-reduced-motion:reduce){
  .book-card,.metric-card,.pattern-card,.game-pick,.theme-card{transition:none}
}

/* The alphabet is something you hear. One play button per letter, one for the lot. */
.alphabet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin:12px 0}
.alphabet-letter{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2)}
.alphabet-letter>div{display:flex;flex-direction:column}
.alphabet-letter b{font-size:20px;line-height:1.1}
.alphabet-letter small{color:var(--muted);font-size:11px}
.alphabet-letter p{grid-column:2;margin:0;font-size:12px;color:var(--muted);line-height:1.45}
.alphabet-play{grid-row:span 2;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--panel);cursor:pointer;font-size:13px}
.alphabet-play:hover{background:color-mix(in srgb,var(--accent) 18%,var(--panel))}
.pack-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pack-import{cursor:pointer;display:inline-flex;align-items:center}
.pack-status{margin:8px 0 0;font-size:12px;color:var(--muted);line-height:1.5}
.corpus-pick{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.corpus-pick span{display:flex;flex-direction:column}
.corpus-pick small{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.1em}
.corpus-pick b{font-size:15px}
.corpus-access{display:block;font-size:11px;color:var(--muted);margin:6px 0 8px}

/* ================= Editorial pass =================
   The brief was "advanced front end design, ours is placeholder garbage" and, separately,
   "this is more like a data dump than a language learning app". Those are one problem: the
   page has no voice and no hierarchy, so everything shouts at the same volume and reads as a
   database export. The direction here is editorial — a printed grammar, not a dashboard. One
   display face with real weight contrast, a proper type scale, an accent reserved almost
   entirely for the thing being taught, and atmosphere instead of flat fills.
   Constraint that shapes all of it: backdrop-filter is banned outside ::backdrop (7fps
   against 60), and every font must already be on the device because the app works offline.
   Lexend and Atkinson Hyperlegible are both bundled; the display voice is built from weight,
   optical size and tracking rather than a download. */
:root{
  --nx-display: 'Lexend', 'Atkinson Hyperlegible', ui-sans-serif, system-ui, sans-serif;
  --nx-text: 'Atkinson Hyperlegible', 'Lexend', ui-sans-serif, system-ui, sans-serif;
  --nx-quote: ui-serif, 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  /* a fourth-scale, so a heading is unmistakably a heading */
  --nx-t1: clamp(2rem, 1.2rem + 2.6vw, 3.1rem);
  --nx-t2: clamp(1.4rem, 1.05rem + 1.2vw, 1.9rem);
  --nx-t3: 1.15rem;
  --nx-measure: 66ch;
}
/* The reading font applied to two selectors — the reader text and the study card — so
   choosing one changed almost nothing. It is the body font now, which is what "learning-content
   font" was always meant to mean, and it falls back to the app's own stack when set to system. */
body{font-family:var(--learning-font,var(--nx-text))}
button,input,select,textarea{font-family:inherit}
h1,h2,h3,.page-heading h1,.study-ask,.map-unit-tag{font-family:var(--nx-display)}
.page-heading h1{font-size:var(--nx-t1);font-weight:800;letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
.panel-heading h2,.page-heading h2{font-size:var(--nx-t2);font-weight:750;letter-spacing:-.02em;line-height:1.12;text-wrap:balance}
h3{font-size:var(--nx-t3);letter-spacing:-.012em}
p,li,dd{max-width:var(--nx-measure)}
/* the eyebrow was on every block and told you nothing; it whispers now */
.eyebrow{font-size:10px!important;letter-spacing:.18em!important;font-weight:700!important;opacity:.55!important;text-transform:uppercase}
/* a count badge is a footnote, not a headline */
.count-badge,.level-badge{font-weight:600;font-size:11px;letter-spacing:.02em;opacity:.8}
/* the example sentence is the one place a serif earns its keep: it reads as quoted text
   rather than as another row of interface */
.example-box,.book-card .book-pair,.lesson-summary,blockquote{font-family:var(--nx-quote);font-size:1.05rem;line-height:1.6}
/* atmosphere: two soft fields and a hairline grain, painted once on the shell rather than
   on every card, so it costs nothing per frame */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(58% 42% at 12% 0%, color-mix(in srgb,var(--accent) 12%,transparent), transparent 68%),
    radial-gradient(48% 38% at 100% 8%, color-mix(in srgb,var(--accent-2) 10%,transparent), transparent 70%);
}
#app-shell{position:relative;z-index:1}
/* the accent belongs to what is being taught, not to the furniture */
.pattern-rules .ending,.ending,.map-node.current .map-dot{color:var(--accent-text,var(--accent))}
/* one orchestrated reveal per view change, not scattered micro-motion */
.view.active > *{animation:nx-rise .42s cubic-bezier(.2,.85,.3,1) both}
.view.active > *:nth-child(1){animation-delay:0ms}
.view.active > *:nth-child(2){animation-delay:45ms}
.view.active > *:nth-child(3){animation-delay:90ms}
.view.active > *:nth-child(4){animation-delay:130ms}
.view.active > *:nth-child(n+5){animation-delay:165ms}
@keyframes nx-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .view.active > *{animation:none}
  body::before{display:none}
}
/* A word in a lesson is a thing you can ask about, and has to look like one without turning
   the page into a field of links. */
.lesson-word{background:none;border:0;padding:0 1px;margin:0;font:inherit;color:inherit;cursor:pointer;border-bottom:1px dotted color-mix(in srgb,var(--accent) 45%,transparent)}
.lesson-word:hover,.lesson-word:focus-visible{background:color-mix(in srgb,var(--accent) 15%,transparent);border-radius:4px}
.lesson-read{margin-left:auto;align-self:flex-start;white-space:nowrap}
.lesson-header{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start}

/* ================= Liquid glass, for real this time =================
   Asked for repeatedly and refused each time on one measurement: blur took scrolling from
   60fps to 7. That measurement was taken on *fixed* surfaces — the sidebar, the topbar, the
   bottom nav — where a blurred layer that never moves re-composites the entire page behind
   it on every frame. It is not a fact about backdrop-filter; it is a fact about blurring a
   fixed element over a scrolling document.

   So the ban stays exactly where it was earned — nothing fixed is blurred, ever — and the
   glass goes on the cards, which are in flow, bounded, and cheap. Real refraction: a blurred
   and slightly over-saturated backdrop, a bright specular edge along the top, a darker one
   along the bottom, and a hairline rim. Re-measured after, on every view. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .panel:not(.sidebar):not(.topbar),
  .metric-card,.record-card,.book-card,.theme-card,.study-card,.game-panel,
  .pattern-teach,.settings-section,.conjugation-model,.pack-card,.corpus-card,
  .today-hero,.class-assignment,.dictionary-pack-card,.search-group,.certificate{
    -webkit-backdrop-filter:blur(16px) saturate(155%);
    backdrop-filter:blur(16px) saturate(155%);
    background-color:color-mix(in srgb,var(--panel) 62%,transparent);
    box-shadow:
      var(--nx-e2),
      inset 0 1px 0 color-mix(in srgb,#fff 55%,transparent),
      inset 0 -1px 0 color-mix(in srgb,#000 12%,transparent);
    border:1px solid color-mix(in srgb,#fff 26%,var(--line));
  }
  /* the rim light that makes glass read as a solid object rather than a translucent panel */
  .panel:not(.sidebar):not(.topbar)::after,.metric-card::after,.study-card::after,
  .pattern-teach::after,.today-hero::after{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
    background:linear-gradient(150deg,color-mix(in srgb,#fff 30%,transparent) 0%,transparent 34%,transparent 66%,color-mix(in srgb,#fff 12%,transparent) 100%);
    mix-blend-mode:screen;opacity:.7;
  }
  html.theme-soft-dark .panel:not(.sidebar):not(.topbar),html.theme-pitch-black .panel:not(.sidebar):not(.topbar),
  html.theme-velvet .panel:not(.sidebar):not(.topbar),html.theme-aurora .panel:not(.sidebar):not(.topbar),
  html.theme-ocean .panel:not(.sidebar):not(.topbar),html.theme-forest .panel:not(.sidebar):not(.topbar),
  html.theme-soft-dark .metric-card,html.theme-pitch-black .metric-card,
  html.theme-soft-dark .study-card,html.theme-pitch-black .study-card,
  html.theme-soft-dark .book-card,html.theme-pitch-black .book-card,
  html.theme-soft-dark .settings-section,html.theme-pitch-black .settings-section{
    background-color:color-mix(in srgb,var(--panel) 52%,transparent);
    border-color:color-mix(in srgb,#fff 12%,var(--line));
    box-shadow:var(--nx-e2),inset 0 1px 0 color-mix(in srgb,#fff 14%,transparent),inset 0 -1px 0 rgba(0,0,0,.35);
  }
  /* the one rule that must never come back: nothing fixed is blurred */
  /* The bottom bar is the exception, and it is a measured one: the ban was earned on the
     sidebar and topbar, whose blur region is a full screen height over a scrolling document.
     A phone's bottom bar is 390x71. See the liquid-glass block at the end of this file. */
  .sidebar,.topbar,.global-search{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  @media(min-width:821px){.bottom-nav{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}
}
.lesson-step p.typing::after{content:"";display:inline-block;width:.5ch;height:1em;margin-left:1px;vertical-align:-.12em;background:currentColor;opacity:.6;animation:nx-caret .9s steps(2) infinite}
@keyframes nx-caret{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.lesson-step p.typing::after{display:none}}

/* A shared-word card was a full page of chips, language rows and buttons for one word.
   The word, what it means and the languages it covers stay out; the score ring, the
   provenance chips and the per-language audio fold into the card's own disclosure. */
.record-card .chip-row{gap:5px}
.record-card .chip{font-size:10px;padding:3px 7px}
.record-card .language-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.record-card .language-pair{padding:6px 8px;font-size:13px}
.record-card .score-ring{width:44px;height:44px;font-size:13px}
.record-card h3{font-size:1.05rem}
.grid-show-all{display:block;margin:14px auto 0}

/* The scripture shelf used to ask which chapter went on the left and which on the right,
   in two identical five-field forms. One form now, three fields wide; the pair of
   languages comes from the route already chosen in settings, and the only reason to open
   the fold below is to override an edition. */
.scripture-compare-grid.single{display:grid;grid-template-columns:1fr;gap:12px;align-items:stretch}
.scripture-compare-grid.single fieldset{grid-template-columns:repeat(3,minmax(0,1fr))}
.scripture-advanced{border:1px solid var(--line);border-radius:14px;background:var(--bg-2)}
.scripture-advanced>summary{cursor:pointer;padding:11px 15px;font-size:12px;font-weight:700;color:var(--muted);list-style:none}
.scripture-advanced>summary::-webkit-details-marker{display:none}
.scripture-advanced>summary::before{content:'+';display:inline-block;width:1.1em;color:var(--accent-text,var(--accent));font-weight:800}
.scripture-advanced[open]>summary::before{content:'–'}
.scripture-advanced-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;padding:0 15px 15px}
.scripture-advanced-body label{display:grid;gap:5px;color:var(--muted);font-size:11px}
.scripture-advanced-body .scripture-edition-note{grid-column:1/-1;margin:0}
/* Alignment offset is a repair tool, not a reading control. */
.reader-tune{font-size:11px}
.reader-tune>summary{cursor:pointer;color:var(--muted);list-style:none;padding:6px 2px}
.reader-tune>summary::-webkit-details-marker{display:none}
.reader-tune>summary::before{content:'+ ';color:var(--accent-text,var(--accent));font-weight:800}
.reader-tune[open]>summary::before{content:'– '}
.reader-tune label{display:grid;gap:4px;color:var(--muted)}
.reader-import{border:1px solid var(--line);border-top:1px solid var(--line);border-radius:14px;margin-top:14px;background:var(--bg-2)}
@media(max-width:1100px){.scripture-advanced-body{grid-template-columns:1fr}.scripture-compare-grid.single fieldset{grid-template-columns:1fr}}

/* A lesson that shows a table and says "notice this" is a reference page. The teaching block
   gives the same four things every time — what it is, why the language does it, what to
   watch for, a worked example from this route — so a learner always knows where to look. */
.teach-block{display:grid;gap:18px;margin:18px 0 22px}
.teach-block>section{border-left:2px solid color-mix(in srgb,var(--accent) 45%,transparent);padding:2px 0 2px 16px}
.teach-block>section h3{margin:0 0 6px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text,var(--accent))}
.teach-block>section p{margin:0;font-size:16px;line-height:1.65}
.teach-block em{font-style:italic;color:var(--text)}
.teach-examples{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:11px}
.teach-examples article{border:1px solid var(--line);border-radius:13px;padding:13px 15px;background:var(--bg-2);display:grid;gap:5px;align-content:start}
.teach-examples b{font-size:17px;line-height:1.25}
.teach-examples span{font-size:14px;color:var(--muted);line-height:1.45}
.teach-examples small{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text,var(--accent))}
@media(max-width:640px){.teach-block{gap:15px}.teach-examples{grid-template-columns:1fr}}

/* Steps arrive a block at a time rather than all at once behind one typing line. */
@media (prefers-reduced-motion: no-preference) {
  .lesson-step .step-appear{animation:step-appear .34s ease-out both}
  @keyframes step-appear{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
}
/* Forwards and backwards are arrows, asked for directly. The accessible name stays a word. */
.icon-nav{min-width:46px;font-size:19px;line-height:1;padding:11px 14px;font-weight:700}
.lesson-footer .icon-nav{flex:0 0 auto}
/* Complete waits until the last step has been reached, and looks like it is waiting. */
[data-complete-lesson].waiting{opacity:.45;cursor:not-allowed;filter:grayscale(.5)}
/* Material that is worth having but is not the lesson. */
.lesson-fold{border:1px solid var(--line);border-radius:14px;margin:16px 0 0;background:var(--bg-2)}
.lesson-fold>summary{cursor:pointer;padding:12px 15px;font-size:13px;font-weight:700;color:var(--muted);list-style:none}
.lesson-fold>summary::-webkit-details-marker{display:none}
.lesson-fold>summary::before{content:'+';display:inline-block;width:1.1em;color:var(--accent-text,var(--accent));font-weight:800}
.lesson-fold[open]>summary::before{content:'–'}
.lesson-fold-body{padding:0 15px 15px}

/* Workbooks are generated on the device from the route pack, so the page lists what it can
   actually build rather than announcing a future release. */
.workbook-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:6px 0 18px}
.workbook-card{border:1px solid var(--line);border-radius:16px;padding:16px;background:var(--panel);display:grid;gap:10px;align-content:start;box-shadow:var(--shadow)}
.workbook-card h3{margin:0;font-size:17px}
.workbook-card p{margin:0;font-size:13px;color:var(--muted);line-height:1.5}
.workbook-actions{display:flex;gap:8px;flex-wrap:wrap}
.workbook-actions button{flex:1 1 auto}
.family-examples{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px;margin-top:10px}
.family-warning{color:var(--muted);border-top:1px dotted var(--line);padding-top:7px;margin-top:2px;display:block}
/* A card is two languages. Both sides say which one they are. */
.deck-lang{color:var(--accent-text,var(--accent));font-weight:700;letter-spacing:.02em}
.deck-back{display:block;color:var(--muted);margin-top:2px}
.study-foot em{font-style:normal;letter-spacing:.1em;text-transform:uppercase;font-size:11px;color:var(--accent-text,var(--accent));font-weight:700}
/* The lesson footer carries navigation and a question mark while you read; the things you do
   when you have finished appear when you have finished. */
.lesson-footer{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.lesson-footer-end{display:flex;gap:9px;flex-wrap:wrap;margin-left:auto;align-items:center}
.lesson-footer-end.hidden{display:none}
.lesson-tutor{width:38px;height:38px;border-radius:999px;font-size:17px;font-weight:800;flex:0 0 auto}
@media(max-width:640px){.lesson-footer-end{margin-left:0;width:100%}.lesson-footer-end button{flex:1 1 auto}}
#own-ai-status{font-size:12.5px;color:var(--muted);line-height:1.5}
#own-ai-status.ready{color:var(--good,#2c7a4b);font-weight:600}
/* One page: preview, price and use, on the theme itself. */
.theme-choice-shell{display:grid;gap:8px;border:1px solid var(--line);border-radius:16px;padding:10px;background:var(--panel)}
.theme-choice-shell.active{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 22%,transparent)}
.theme-choice-shell .theme-choice{width:100%;border:0;background:transparent;padding:4px;text-align:left}
.theme-choice-shell.locked .theme-choice{opacity:.85}
.theme-choice-actions{display:flex;gap:7px}
.theme-choice-actions .small{flex:1 1 auto;padding:8px 10px;font-size:12px}
/* Decks you can see and choose between. */
.deck-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto;gap:8px;align-items:end;margin-bottom:10px}
.deck-pick{display:grid;gap:4px;font-size:11px;color:var(--muted)}
.deck-summary{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:11px}
.deck-chip{display:inline-flex;align-items:baseline;gap:7px;border:1px solid var(--line);border-radius:999px;padding:7px 13px;background:var(--bg-2);font-size:12.5px;cursor:pointer;color:var(--text)}
.deck-chip b{font-weight:800}
.deck-chip i{font-style:normal;color:var(--accent-text,var(--accent));font-weight:700;font-size:11px}
.deck-chip u{text-decoration:none;color:var(--muted);font-size:11px}
.deck-chip.active{background:var(--ink,var(--text));color:var(--panel);border-color:transparent}
.deck-chip.active i,.deck-chip.active u{color:inherit;opacity:.85}
@media(max-width:640px){.deck-controls{grid-template-columns:1fr 1fr;}.deck-controls #deck-filter{grid-column:1/-1}}
/* Look at the word, reach for the meaning, then check. The skill the lessons describe and
   never asked anyone to perform. */
.try-it{border:1px solid color-mix(in srgb,var(--accent) 34%,var(--line));border-radius:14px;padding:14px 15px;background:color-mix(in srgb,var(--accent) 5%,transparent);display:grid;gap:10px}
.try-it-head{margin:0;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text,var(--accent));font-weight:700}
.try-it-rows{display:grid;gap:7px}
.try-it-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:stretch}
.try-it-word{text-align:left;border:1px solid var(--line);border-radius:11px;background:var(--panel);padding:10px 12px;font-size:16px;font-weight:600;color:var(--text);cursor:pointer}
.try-it-word::after{content:' ▸';color:var(--accent-text,var(--accent));font-size:12px}
.try-it-meaning{border:1px dashed var(--rule,var(--line));border-radius:11px;background:var(--bg-2);padding:10px 12px;cursor:pointer;text-align:left;color:var(--muted)}
.try-it-meaning span{filter:blur(6px);transition:filter .16s;display:inline-block}
.try-it-meaning.shown span{filter:none;color:var(--text)}
.try-it-meaning:not(.shown)::after{content:'tap to check';display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);filter:none;margin-top:2px}
@media(max-width:520px){.try-it-row{grid-template-columns:1fr}}
/* The sequence is five places to go, not five labels. */
#weekly-sequence article{display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center}
#weekly-sequence article small{display:block;color:var(--muted);font-size:12px;line-height:1.45;margin-top:2px}
#weekly-sequence article .small{padding:7px 11px;font-size:15px;min-width:38px}

/* The voice picker where the lesson tells you to change your voice, and the note that says
   which lesson a game is drawing its words from. */
.lesson-voice-picker{margin-top:12px;padding:12px;border:1px solid var(--nx-line);border-radius:12px;background:var(--nx-surface-2,rgba(255,255,255,.03));display:grid;gap:10px}
.lesson-voice-picker label{display:grid;gap:6px;font-size:.9rem}
.lesson-voice-picker label span{opacity:.8}
.lesson-voice-picker select{width:100%;padding:9px 10px;border-radius:10px;border:1px solid var(--nx-line);background:var(--nx-surface);color:inherit;font:inherit}
.lesson-voice-actions{display:flex;gap:8px;flex-wrap:wrap}
.lesson-game-note{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 12px;padding:10px 12px;border:1px solid var(--nx-line);border-radius:12px;background:var(--nx-surface-2,rgba(255,255,255,.03));font-size:.92rem}
.lesson-game-note[hidden]{display:none}
.lesson-game-note span{flex:1 1 220px}

/* The letters that behave differently, with the word you hear them in. */
.alphabet-different{border-color:var(--nx-accent,#6ea8fe)}
.alphabet-example{display:block;margin-top:6px;padding:5px 8px;border:1px solid var(--nx-line);border-radius:8px;background:transparent;color:inherit;font:inherit;font-size:.82rem;text-align:left;cursor:pointer;width:100%}
.alphabet-example:hover{background:var(--nx-surface-2,rgba(255,255,255,.05))}

/* ---------------------------------------------------------------------------
   Tabs that run off the edge of a phone.

   Measured at 390px: the Pattern Lab tabs ended at 987px, the grammar tabs at 908, the
   library tabs at 462. All three were horizontal scroll strips, which is the same defect
   already reported for the games chooser — an option you cannot see is an option that does
   not exist, and a sideways scroll gives no sign there is more to the right.

   They wrap into a grid on a phone, the way the games tiles now do. Every choice is visible
   at once and the page grows down, which is the direction a phone already scrolls.
   --------------------------------------------------------------------------- */
/* Not only on a phone: measured at 1440px the Pattern Lab tabs still ran to 2313px, so seven
   of its sections were off the right edge of a desktop screen too. Wrapping is the rule at
   every width — there is no size at which hiding half the tabs is correct. */
.pattern-tabs,.tab-list,.library-mode-tabs{display:flex;flex-wrap:wrap;overflow:visible;gap:6px}
.pattern-tabs .tab,.tab-list .tab,.library-mode-tabs .tab{white-space:normal;min-height:38px}
@media(max-width:820px){
  .pattern-tabs .tab,.tab-list .tab,.library-mode-tabs .tab{flex:1 1 auto;text-align:center}
}
/* A control you tap has to be big enough to tap. Measured at 19-26px on the Pattern Lab
   filters, the grammar chips and the study-shelf links. */
/* A 19px link is hard to hit with a thumb and hard to hit with a trackpad; the size of the
   screen does not change the size of the target. */
button.chip,a.chip,.book-link{min-height:32px;display:inline-flex;align-items:center;padding:6px 10px}
.shelf-group a,.link-list a,#resource-shelf a,[data-view-panel="resources"] li a,.certification-grid article a{display:inline-flex;align-items:center;min-height:32px}
@media(max-width:820px){
  button.chip,a.chip,.book-link{min-height:34px;display:inline-flex;align-items:center;padding:7px 11px}
  /* Bare links in a list — exam boards, saved shelves — were 19px of text to hit with a thumb.
     They stay links; they just get a row's worth of height around them. */
  .shelf-group a,.link-list a,#resource-shelf a,[data-view-panel="resources"] li a,.certification-grid article a{display:inline-flex;align-items:center;min-height:32px}
  /* Glossary words inside a sentence stay inline: growing them to 34px would break the line
     they sit in, and a word in a paragraph is read before it is tapped. */
}

/* ===========================================================================
   Shimmer and sheen — the premium layer

   Techniques taken from the freefrontend shimmer collection and applied where they carry
   meaning rather than decoration:

   - the skeleton sweep (a linear-gradient panned with background-position) on every loading
     placeholder, so a slow network reads as "working" instead of "broken";
   - a light streak across primary actions, so the thing you are meant to press looks live;
   - a conic-gradient border on premium and owned items, which is what tells the two apart;
   - a pointer-tracked iridescent sheen on the theme cards, because a theme shop that cannot
     show you what a theme feels like is a price list;
   - a slow sheen on the current lesson node and the study card.

   Every one of these is animation or background-position only — no layout, no paint of text —
   so a phone holds 60fps. The global prefers-reduced-motion rule at the top of this file
   already disables all of it with animation:none!important; each block is built so that the
   still frame it freezes on is the correct resting appearance, not a half-swept gradient.
   =========================================================================== */

/* --- the skeleton sweep ------------------------------------------------- */
@keyframes nx-shimmer{from{background-position:-160% 0}to{background-position:260% 0}}
.skeleton-card span,.skeleton-line{
  background-image:linear-gradient(100deg,
    color-mix(in srgb,var(--panel-2) 100%,transparent) 0 38%,
    color-mix(in srgb,var(--accent) 22%,var(--panel-2)) 50%,
    color-mix(in srgb,var(--panel-2) 100%,transparent) 62% 100%);
  background-size:220% 100%;
  background-repeat:no-repeat;
  animation:nx-shimmer 1.5s linear infinite;
}
.skeleton-card span:nth-child(2){animation-delay:.12s}
.skeleton-card span:nth-child(3){animation-delay:.24s}
.skeleton-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,color-mix(in srgb,var(--accent) 9%,transparent) 50%,transparent 60%);
  background-size:240% 100%;animation:nx-shimmer 1.9s linear infinite;
}

/* --- the light streak on the action you are meant to take ---------------- */
.primary-button,.game-pick,.map-node.current,.theme-actions .secondary-button{position:relative;overflow:hidden;isolation:isolate}
.primary-button::after,.game-pick::after,.theme-actions .secondary-button::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.42) 50%,transparent 58%);
  background-size:280% 100%;background-position:-160% 0;background-repeat:no-repeat;
  transition:background-position .62s ease;
}
.primary-button:hover::after,.primary-button:focus-visible::after,
.game-pick:hover::after,.game-pick:focus-visible::after,
.theme-actions .secondary-button:hover::after{background-position:260% 0}
/* The one action the app is actually asking for keeps a slow sweep of its own, so on a phone
   where nothing hovers it still reads as the live control. */
.hero-actions .primary-button::after,#weekly-sequence .primary-button::after{animation:nx-shimmer 4.4s linear infinite;transition:none}

/* --- premium and owned, told apart by their border -----------------------
   The standard spinning-conic rim: an oversized conic gradient behind the card, clipped by
   the card's own overflow, with an inset panel on top of it so only a hairline of the sweep
   shows at the edge. The first attempt skipped the inset and put overflow on the wrong
   pseudo-element, so the gradient escaped the card and painted gold wedges across the whole
   settings page. Measured, not assumed: this is why the screenshot is the check, not the
   computed style. */
@keyframes nx-border-spin{to{transform:translate(-50%,-50%) rotate(1turn)}}
.theme-card.is-premium,.theme-card.is-owned,
.theme-choice-shell.is-premium,.theme-choice-shell.is-owned,.premium-tile{
  position:relative;overflow:hidden;isolation:isolate;border-color:transparent
}
.theme-card.is-premium::before,.theme-card.is-owned::before,
.theme-choice-shell.is-premium::before,.theme-choice-shell.is-owned::before,.premium-tile::before{
  content:"";position:absolute;z-index:-2;left:50%;top:50%;width:210%;aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 58%,var(--nx-sheen,#d4a84f) 76%,transparent 90% 100%);
  animation:nx-border-spin 6s linear infinite;
}
.theme-card.is-premium::after,.theme-card.is-owned::after,
.theme-choice-shell.is-premium::after,.theme-choice-shell.is-owned::after,.premium-tile::after{
  content:"";position:absolute;z-index:-1;inset:1.5px;border-radius:inherit;
  background:linear-gradient(160deg,var(--panel),color-mix(in srgb,var(--panel-2) 82%,var(--panel)));
}
.theme-card.is-premium,.theme-choice-shell.is-premium,.premium-tile{--nx-sheen:#d4a84f}
.theme-card.is-owned,.theme-choice-shell.is-owned{--nx-sheen:color-mix(in srgb,var(--accent) 85%,white)}

/* --- the theme cards show you what a theme feels like -------------------- */
.theme-preview,.theme-swatch{position:relative;overflow:hidden}
.theme-preview::before,.theme-swatch::before{
  content:"";position:absolute;inset:-40%;pointer-events:none;mix-blend-mode:overlay;opacity:.0;
  background:radial-gradient(circle at var(--nx-px,50%) var(--nx-py,50%),
    rgba(255,255,255,.55),rgba(255,255,255,.14) 26%,transparent 52%),
    conic-gradient(from calc(var(--nx-angle,0deg)) at var(--nx-px,50%) var(--nx-py,50%),
      #ff6b9d40,#ffd16640,#5ef2c840,#7cb9ff40,#c084fc40,#ff6b9d40);
  transition:opacity .25s ease;
}
.theme-card:hover .theme-preview::before,.theme-card:focus-within .theme-preview::before,
.theme-card.is-pointing .theme-preview::before,
.theme-choice-shell:hover .theme-swatch::before,.theme-choice-shell:focus-within .theme-swatch::before,
.theme-choice-shell.is-pointing .theme-swatch::before{opacity:1}
.theme-card,.theme-choice-shell{transition:transform .18s ease,border-color .18s ease}
.theme-card.is-pointing,.theme-choice-shell.is-pointing{transform:perspective(900px) rotateX(var(--nx-rx,0deg)) rotateY(var(--nx-ry,0deg))}

/* --- a slow sheen where the eye should land ------------------------------ */
.study-card::after,.map-node.current::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:0;
  background:linear-gradient(105deg,transparent 44%,color-mix(in srgb,var(--accent) 14%,transparent) 50%,transparent 56%);
  background-size:300% 100%;animation:nx-shimmer 6s linear infinite;
}
.study-card{position:relative;overflow:hidden}
.study-card>*{position:relative;z-index:1}
.map-node.current{position:relative;overflow:hidden}
.map-node.current>*{position:relative;z-index:1}

/* --- text that earns a shine: milestones only ---------------------------- */
.nx-shine-text{
  background:linear-gradient(100deg,
    var(--text) 0 40%,
    color-mix(in srgb,var(--accent) 90%,white) 50%,
    var(--text) 60% 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:nx-shimmer 3.4s linear infinite;
}
@media(prefers-reduced-motion:reduce){
  .nx-shine-text{background:none;-webkit-text-fill-color:currentColor;color:var(--text)}
  .skeleton-card::after,.study-card::after,.map-node.current::after{display:none}
  .theme-card.is-premium::before,.theme-card.is-owned::before,.theme-choice-shell.is-premium::before,.theme-choice-shell.is-owned::before,.premium-tile::before{background:var(--nx-sheen,#d4a84f);animation:none}
}
/* Phones get the same effects; only the tilt is dropped, because there is no pointer to
   track and a card that tilts under a thumb reads as a bug. */
@media(hover:none){
  .theme-card.is-pointing,.theme-choice-shell.is-pointing{transform:none}
  .theme-preview::before,.theme-swatch::before{opacity:.55;animation:nx-shimmer 5s linear infinite;background-size:200% 100%}
}

/* ---------------------------------------------------------------------------
   The theme gallery gets the room a shop needs.

   Measured on a 1440px screen: the gallery was 297px wide inside a 1152px settings grid,
   because it sits two <details> deep inside a three-column layout. Seventeen theme cards were
   sharing two 144px columns, so "Aurora Glass" wrapped as "Auro / ra / Glass". The one page
   in the app that has to look worth paying for was the worst-laid-out page in it.

   The section that holds it spans the full width once opened, and the cards size themselves.
   --------------------------------------------------------------------------- */
.settings-grid>.settings-section:has(#theme-gallery)[open]{grid-column:1/-1}
.theme-gallery{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
/* 140px left one column at 286px of usable width once the gap is counted; 128 fits two. */
@media(max-width:520px){.theme-gallery{grid-template-columns:repeat(auto-fit,minmax(128px,1fr))}}
.theme-choice-shell{min-width:0}
.theme-choice b,.theme-choice small{overflow-wrap:anywhere}
/* The shop grid has the same problem in a milder form. */
.shop-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}

/* On a narrow card the swatch and the text cannot sit side by side: measured at 138px per
   card, "Aurora Glass" rendered as "Auror Glass" and the PREMIUM pill as "PREMIU", clipped by
   the overflow the rim needs. Below 520px the swatch takes its own row and the text gets the
   full card width. */
@media(max-width:520px){
  .theme-choice{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto;gap:6px}
  .theme-choice .theme-swatch{grid-column:1;grid-row:1;width:100%;max-width:none;height:34px}
  .theme-choice b{grid-column:1;grid-row:2;align-self:start}
  .theme-choice small{grid-column:1;grid-row:3}
  .theme-choice em{grid-column:1;grid-row:4;justify-self:start}
  .theme-choice-actions{flex-wrap:wrap}
  .theme-choice-actions .small{flex:1 1 auto;min-width:0}
}


/* ---------------------------------------------------------------------------
   What the screenshots showed, and what was wrong underneath.
   --------------------------------------------------------------------------- */

/* The bottom bar sat over the page at 72-88% opacity, so the last card of every page was
   legible *through* the navigation. It is opaque now — not blurred, because this stylesheet
   deliberately forbids backdrop-filter on anything fixed — and the page reserves room for it
   rather than scrolling underneath. */
@media(max-width:820px){
  main{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom))}
}

/* A folded panel was stretching to the height of the tall panel beside it — that is the empty
   white box on the desktop home screen, 600px of nothing under the words "Your course". A
   collapsed thing should be the height of its own heading. */
.today-layout>*, .dashboard-grid>*, .settings-grid>*{align-self:start}

/* The games chooser is an app drawer: three across on a phone, and as many as fit after that.
   It was rendering two 112px tiles in a 233px strip — half the width of the screen unused. */
#game-chooser.game-chooser{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));width:100%}
@media(min-width:821px){#game-chooser.game-chooser{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}

/* The four grades are the point of the Review page and they were display:none until you found
   a 10px gray "FLIP CARD" in the corner of the card. The answer control is now the size of the
   thing it is asking you to do. */
.study-reveal{width:100%;margin-top:2px}
.rating-row.hidden{display:grid!important}
.rating-row.hidden button{opacity:.35;pointer-events:none;filter:saturate(.2)}

/* On a phone the search box is 185px wide and the placeholder is 45 characters, so it was cut
   mid-word: "Search words, forn". */
@media(max-width:820px){
  .global-search input::placeholder{font-size:14px}
}

/* The pool note is a footnote under the tiles, not a preamble above them. */
.game-pool-note{margin:12px 0 4px;font-size:.86rem;opacity:.9}


/* ===========================================================================
   RGB Rig — pitch black, and every edge lit.

   The one theme in the set that is meant to be loud. True black so an OLED panel actually
   switches its pixels off, and a spectrum that runs around the border of every raised surface
   rather than sitting still: the hue is a custom property that a single keyframe animation
   drives, so one 8-second loop lights the whole interface and the GPU only ever interpolates
   a number.

   Written so the still frame is correct: at hue 0 the borders are magenta and the app looks
   deliberate rather than half-painted, which is what reduced motion gets.
   =========================================================================== */
@property --nx-rgb{syntax:'<angle>';inherits:true;initial-value:0deg}
@keyframes nx-rgb-cycle{to{--nx-rgb:360deg}}
@keyframes nx-rgb-cycle-fallback{
  0%{filter:hue-rotate(0deg)}100%{filter:hue-rotate(360deg)}
}

.theme-rgb-rig{--c1:#000;--c2:#ff00d4;--c3:#00ffe1}
html.theme-rgb-rig{
  color-scheme:dark;
  --bg:#000;--bg-2:#020204;--panel:#08080c;--panel-2:#0d0d12;
  --line:#2a2a36;--glass-rim:#3a3a48;
  --text:#f4f4ff;--muted:#9a9ab4;
  --accent:#00ffe1;--accent-2:#ff00d4;--accent-text:#5cffe9;
  --success:#3dff88;--warning:#ffd23d;--danger:#ff3d6e;--shade:#000;--shadow:none;
  --nx-rgb:0deg;
  animation:nx-rgb-cycle 8s linear infinite;
}
/* The lit edge. One gradient, one variable, every raised surface. */
html.theme-rgb-rig .panel,
html.theme-rgb-rig .metric-card,
html.theme-rgb-rig .record-card,
html.theme-rgb-rig .book-card,
html.theme-rgb-rig .study-card,
html.theme-rgb-rig .game-panel,
html.theme-rgb-rig .game-pick,
html.theme-rgb-rig .settings-section,
html.theme-rgb-rig .today-hero,
html.theme-rgb-rig .pack-card,
html.theme-rgb-rig .theme-choice-shell,
html.theme-rgb-rig .search-group,
html.theme-rgb-rig .map-node,
html.theme-rgb-rig .lesson-step{
  border:1px solid transparent;
  background-image:
    linear-gradient(var(--panel),var(--panel)),
    linear-gradient(calc(var(--nx-rgb) + 0deg),
      hsl(from #ff00d4 h s l) 0%,
      hsl(from #00ffe1 h s l) 25%,
      hsl(from #7cff3d h s l) 50%,
      hsl(from #ffd23d h s l) 75%,
      hsl(from #ff00d4 h s l) 100%);
  background-origin:border-box;
  background-clip:padding-box,border-box;
  box-shadow:0 0 18px -6px color-mix(in srgb,var(--accent) 45%,transparent);
}
/* Browsers without relative colour syntax still get the spectrum, just fixed stops. */
@supports not (color:hsl(from red h s l)){
  html.theme-rgb-rig .panel,html.theme-rgb-rig .metric-card,html.theme-rgb-rig .record-card,
  html.theme-rgb-rig .book-card,html.theme-rgb-rig .study-card,html.theme-rgb-rig .game-panel,
  html.theme-rgb-rig .game-pick,html.theme-rgb-rig .settings-section,html.theme-rgb-rig .today-hero,
  html.theme-rgb-rig .pack-card,html.theme-rgb-rig .theme-choice-shell,html.theme-rgb-rig .search-group,
  html.theme-rgb-rig .map-node,html.theme-rgb-rig .lesson-step{
    background-image:
      linear-gradient(var(--panel),var(--panel)),
      linear-gradient(var(--nx-rgb),#ff00d4,#00ffe1,#7cff3d,#ffd23d,#ff00d4);
  }
}
/* The primary action is the brightest thing on the screen, as it should be. */
html.theme-rgb-rig .primary-button{
  background:linear-gradient(var(--nx-rgb),#ff00d4,#00ffe1);
  color:#03030a;text-shadow:none;
  box-shadow:0 0 24px -4px #00ffe1aa,0 0 40px -12px #ff00d4aa;
}
html.theme-rgb-rig .secondary-button,html.theme-rgb-rig .ghost-button,html.theme-rgb-rig .icon-button{
  background:#0b0b12;border-color:#33334a;color:var(--text);
}
html.theme-rgb-rig .nav-item.active{
  background:linear-gradient(90deg,#ff00d41f,#00ffe11a);
  box-shadow:inset 3px 0 var(--accent),0 0 22px -10px var(--accent);
}
html.theme-rgb-rig .bottom-nav button.active{color:#5cffe9;text-shadow:0 0 12px #00ffe166}
html.theme-rgb-rig .bottom-nav button.active::before{box-shadow:0 0 10px 1px #00ffe1}
/* The background is not black nothing: two slow spectral pools, well under the text. */
html.theme-rgb-rig body::before{
  opacity:.5;
  background:
    radial-gradient(ellipse at 12% 8%,#ff00d43a,transparent 34%),
    radial-gradient(ellipse at 88% 14%,#00ffe133,transparent 32%),
    radial-gradient(ellipse at 50% 96%,#7c3dff2e,transparent 38%);
  animation:nexus-background-drift 26s ease-in-out infinite alternate;
}
html.theme-rgb-rig .ending.pn1{color:#ff5c8a}
html.theme-rgb-rig .ending.pn2{color:#ffb03d}
html.theme-rgb-rig .ending.pn3{color:#ffe14d}
html.theme-rgb-rig .ending.pn4{color:#5cff9e}
html.theme-rgb-rig .ending.pn5{color:#5ce1ff}
html.theme-rgb-rig .ending.pn6{color:#c78aff}
@media(prefers-reduced-motion:reduce){
  html.theme-rgb-rig{animation:none;--nx-rgb:0deg}
}

/* ===========================================================================
   Liquid glass, on the one fixed surface that can afford it.

   The ban on blurring fixed elements was earned: blurring the sidebar and topbar over a
   scrolling document took scrolling from 60fps to 7. But that cost scales with the area being
   re-composited every frame, and a phone's bottom bar is 390x71 — about 28,000 pixels against
   a full-height sidebar's 300,000+. It is a different measurement, so it was worth taking
   again rather than inheriting the conclusion.

   Measured after: see vault/04-LOG.md. The bar keeps a near-opaque floor underneath the blur
   so that if a device refuses backdrop-filter the navigation is still readable — which is the
   defect this replaced, not one to reintroduce.
   =========================================================================== */
@media(max-width:820px){
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
    .bottom-nav{
      -webkit-backdrop-filter:blur(22px) saturate(180%);
      backdrop-filter:blur(22px) saturate(180%);
      /* 62-78% let the page's own words be read through the bar. Glass is the blur, the
         specular edge and the rim — not the transparency. The floor is high enough that
         nothing underneath is legible, and the blur still bends the colour through it. */
      background:
        linear-gradient(180deg,
          color-mix(in srgb,var(--panel) 88%,transparent),
          color-mix(in srgb,var(--panel) 95%,transparent));
      border-top:1px solid color-mix(in srgb,#fff 26%,var(--glass-rim));
      box-shadow:
        inset 0 1px 0 color-mix(in srgb,#fff 42%,transparent),
        inset 0 -1px 0 color-mix(in srgb,#000 22%,transparent),
        0 -10px 34px color-mix(in srgb,var(--shade) 20%,transparent);
    }
    /* The specular highlight that makes it read as a lens rather than a tinted sheet: a bright
       band along the top edge, brightest in the middle, exactly as light behaves on a curve. */
    .bottom-nav::before{
      content:"";position:absolute;inset:0 0 auto;height:52%;pointer-events:none;
      background:linear-gradient(180deg,color-mix(in srgb,#fff 20%,transparent),transparent);
      -webkit-mask-image:radial-gradient(120% 100% at 50% 0,#000 40%,transparent 78%);
      mask-image:radial-gradient(120% 100% at 50% 0,#000 40%,transparent 78%);
    }
    .bottom-nav{position:fixed;isolation:isolate}
    .bottom-nav>*{position:relative;z-index:1}
  }
}

/* ---------------------------------------------------------------------------
   Visual cards: the picture has to be a picture.
   Measured at 22px on a phone before this — an emoji at body size is a smudge, and the whole
   premise of the card is that you recognise the thing without reading anything.
   --------------------------------------------------------------------------- */
.study-card-visual #study-card-text{font-size:clamp(88px,26vw,190px);line-height:1.05}
.study-card-visual .study-ask{opacity:.75}
.visual-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px;margin:12px 0}
.visual-chip{display:grid;justify-items:center;gap:3px;padding:9px 5px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2);color:inherit;font:inherit;min-height:72px}
.visual-chip:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.visual-face,.study-card-visual #study-card-text{
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Twemoji Mozilla","EmojiOne Color","Android Emoji",sans-serif;
  font-variant-emoji:emoji;
}
.visual-face{font-size:30px;line-height:1}
.visual-chip small{color:var(--muted);font-size:10.5px;line-height:1.2;text-align:center;overflow-wrap:anywhere;hyphens:auto}
@media(max-width:520px){
  .visual-strip{grid-template-columns:repeat(auto-fill,minmax(66px,1fr))}
  .visual-face{font-size:26px}
}


/* The glass card rule tints every panel to 62% and blurs the backdrop. Over a true-black page
   that reads as grey, not glass — the hero and Today's plan came out light grey against black
   neighbours. In this theme the spectral border is the effect and the fill stays black. */
html.theme-rgb-rig .panel:not(.sidebar):not(.topbar),
html.theme-rgb-rig .metric-card,html.theme-rgb-rig .record-card,
html.theme-rgb-rig .book-card,html.theme-rgb-rig .study-card,html.theme-rgb-rig .game-panel,
html.theme-rgb-rig .settings-section,html.theme-rgb-rig .today-hero,html.theme-rgb-rig .pack-card,
html.theme-rgb-rig .search-group,html.theme-rgb-rig .theme-choice-shell,
html.theme-rgb-rig .class-assignment,html.theme-rgb-rig .dictionary-pack-card,
html.theme-rgb-rig .conjugation-model,html.theme-rgb-rig .corpus-card,html.theme-rgb-rig .pattern-teach{
  background-color:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}


/* The glass rim light is a white sheet at 30% on screen blend. Over a true-black panel that is
   a grey wash across the whole card, and the bigger the card the worse it looks — the hero and
   Today's plan came out light grey against black neighbours while the small metric cards got
   away with it. In this theme the lit edge is the border, so the sheen comes off. */
html.theme-rgb-rig .panel:not(.sidebar):not(.topbar)::after,
html.theme-rgb-rig .metric-card::after,
html.theme-rgb-rig .study-card::after,
html.theme-rgb-rig .pattern-teach::after,
html.theme-rgb-rig .today-hero::after,
html.theme-rgb-rig .panel:not(.sidebar):not(.topbar)::before,
html.theme-rgb-rig .metric-card::before,
html.theme-rgb-rig .study-card::before,
html.theme-rgb-rig .pattern-teach::before,
html.theme-rgb-rig .today-hero::before,
html.theme-rgb-rig .record-card::before,
html.theme-rgb-rig .book-card::before,
html.theme-rgb-rig .pack-card::before,
html.theme-rgb-rig .settings-section::before,
html.theme-rgb-rig .game-panel::before{display:none}


/* The toast reads its background from --text, which in this theme is near-white at a low
   enough alpha over black that the page showed through it — "10 due cards" was legible under
   the message. A message that arrives on top of the page has to be opaque. */
html.theme-rgb-rig .toast{
  background:#0b0b14;color:var(--text);
  border:1px solid transparent;
  background-image:linear-gradient(#0b0b14,#0b0b14),linear-gradient(var(--nx-rgb),#ff00d4,#00ffe1,#7cff3d,#ffd23d,#ff00d4);
  background-origin:border-box;background-clip:padding-box,border-box;
  box-shadow:0 0 30px -8px #00ffe166;
}

/* ---------------------------------------------------------------------------
   Charts that fit, and cells that say one thing.

   Measured at 390px: a two-column pronoun chart rendered 540px wide inside a 390px column
   because .data-table carries min-width:760px — written for the seven-language reference
   tables, applied to everything. So a two-column chart looked like a seven-column one, with
   the answer off the right edge.
   --------------------------------------------------------------------------- */
.pattern-table.fits,.data-table.fits{min-width:0;width:100%;table-layout:auto}
.table-scroll:has(.fits){overflow:visible}
.pattern-table.fits th,.pattern-table.fits td{padding:9px 10px;overflow-wrap:anywhere}
@media(max-width:520px){
  .pattern-table.fits{font-size:13px}
  .pattern-table.fits th,.pattern-table.fits td{padding:8px 7px}
}
/* The qualifier is a tap, not a third of the row. */
.cell-more{border:0;background:none;color:inherit;font:inherit;padding:0;text-align:left;display:inline-flex;align-items:baseline;gap:4px;min-height:28px}
.cell-more i{font-style:normal;font-size:.72em;opacity:.5;font-weight:900;line-height:1}
.cell-more:hover i,.cell-more:focus-visible i{opacity:1;color:var(--accent-text,var(--accent))}

/* An introduction folds itself away ten seconds after you meet it. */
.try-it-head[data-intro],[data-intro]{cursor:pointer;transition:opacity .25s ease}
[data-intro].intro-folded{
  font-size:0;line-height:0;padding:0;margin:0 0 6px;overflow:hidden;
  height:22px;display:flex;align-items:center;
}
[data-intro].intro-folded::before{
  content:"?";font-size:11px;line-height:1;font-weight:900;letter-spacing:0;
  display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  border:1px solid var(--line);color:var(--muted);opacity:.75;
}
[data-intro].intro-folded:hover::before{opacity:1;border-color:var(--accent);color:var(--accent-text,var(--accent))}


/* ---------------------------------------------------------------------------
   Focus: the page, and nothing else on it.

   Written as one state on <html> so it costs nothing when it is off, and so that anything
   added to the app later is hidden by default rather than needing to be added to a list.
   The rule is "keep the first panel of the view and whatever is actively in use"; everything
   after that is put away.
   --------------------------------------------------------------------------- */
html.nx-focus .view.active > .panel:not(:first-of-type),
html.nx-focus .view.active > details,
html.nx-focus .view.active > .settings-section,
html.nx-focus .view.active > section:not(.page-heading):not(:first-of-type),
html.nx-focus .progress-panel,
html.nx-focus .game-board,
html.nx-focus #keepup-panel,
html.nx-focus .metric-grid,
html.nx-focus .chart-more,
html.nx-focus .lesson-fold,
html.nx-focus .study-sidebar,
html.nx-focus .free-badge,
html.nx-focus .sidebar-footer,
html.nx-focus .game-pool-note,
html.nx-focus .page-heading p:not(.eyebrow),
html.nx-focus .lesson-summary,
html.nx-focus [data-intro]{display:none!important}

/* The lesson, the card and the running game are what Focus is for, so they get the room. */
html.nx-focus .study-layout{grid-template-columns:minmax(0,1fr)}
html.nx-focus .today-layout{grid-template-columns:minmax(0,1fr)}
html.nx-focus main{padding-top:10px}
html.nx-focus .page-heading{margin-bottom:8px}
html.nx-focus .page-heading h1{font-size:clamp(24px,5vw,32px)}
/* The button itself has to stay visible in order to turn it off again. */
html.nx-focus #focus-button{background:var(--accent);color:#06131e;border-color:var(--accent)}


/* ===========================================================================
   Nine themes with a personality each.

   Each is the same four moves — a background treatment on body::before, a panel fill, a border
   and an accent — so none of them costs a repaint the others do not, and each falls back to a
   flat readable page if a device drops the decorative layer. Swatch colours come from --c1/2/3
   the same way every existing theme's do.
   =========================================================================== */

/* ---- Windows 98 --------------------------------------------------------- */
.theme-win98{--c1:#c0c0c0;--c2:#000080;--c3:#fff}
html.theme-win98{
  color-scheme:light;
  --bg:#008787;--bg-2:#c0c0c0;--panel:#c0c0c0;--panel-2:#d4d0c8;
  --line:#808080;--glass-rim:#fff;--text:#000;--muted:#404040;
  --accent:#000080;--accent-2:#1084d0;--accent-text:#000080;--shadow:none;--shade:#000;
  --learning-font:"Tahoma","Verdana","MS Sans Serif",system-ui,sans-serif;
}
html.theme-win98 .panel,html.theme-win98 .metric-card,html.theme-win98 .record-card,
html.theme-win98 .book-card,html.theme-win98 .study-card,html.theme-win98 .game-panel,
html.theme-win98 .settings-section,html.theme-win98 .today-hero,html.theme-win98 .pack-card{
  border-radius:0;background:#c0c0c0;
  border-top:2px solid #fff;border-left:2px solid #fff;
  border-right:2px solid #404040;border-bottom:2px solid #404040;
  box-shadow:inset -1px -1px 0 #808080,inset 1px 1px 0 #dfdfdf;
}
html.theme-win98 .primary-button,html.theme-win98 .secondary-button,
html.theme-win98 .ghost-button,html.theme-win98 .icon-button{
  border-radius:0;background:#c0c0c0;color:#000;
  border-top:2px solid #fff;border-left:2px solid #fff;
  border-right:2px solid #404040;border-bottom:2px solid #404040;box-shadow:none;
}
html.theme-win98 .primary-button:active,html.theme-win98 .secondary-button:active{
  border-top:2px solid #404040;border-left:2px solid #404040;
  border-right:2px solid #fff;border-bottom:2px solid #fff;
}
html.theme-win98 .panel-heading,html.theme-win98 .page-heading{
  background:linear-gradient(90deg,#000080,#1084d0);color:#fff;padding:4px 8px;margin:-2px -2px 10px;
}
html.theme-win98 .page-heading h1,html.theme-win98 .panel-heading h2,
html.theme-win98 .page-heading .eyebrow,html.theme-win98 .panel-heading .eyebrow{color:#fff}
html.theme-win98 body::before{display:none}
html.theme-win98 .bottom-nav{background:#c0c0c0;border-top:2px solid #fff}

/* ---- Deep Space --------------------------------------------------------- */
.theme-space{--c1:#05060f;--c2:#7c5cff;--c3:#e8ecff}
html.theme-space{
  color-scheme:dark;
  --bg:#04040c;--bg-2:#070a18;--panel:#0b0f22;--panel-2:#101733;
  --line:#25305c;--glass-rim:#3a4a86;--text:#e8ecff;--muted:#9aa6d4;
  --accent:#8ea0ff;--accent-2:#c78aff;--accent-text:#a8b6ff;--shade:#000;
}
html.theme-space body::before{
  opacity:1;
  background:
    radial-gradient(1.5px 1.5px at 12% 22%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 78% 12%,#fff,transparent),
    radial-gradient(1px 1px at 34% 66%,#dfe6ff,transparent),
    radial-gradient(1.5px 1.5px at 62% 78%,#fff,transparent),
    radial-gradient(1px 1px at 88% 52%,#cfd8ff,transparent),
    radial-gradient(1px 1px at 22% 88%,#fff,transparent),
    radial-gradient(2px 2px at 48% 34%,#fff,transparent),
    radial-gradient(ellipse at 78% 22%,#7c5cff33,transparent 42%),
    radial-gradient(ellipse at 18% 72%,#2f7fff26,transparent 40%);
  animation:nexus-background-drift 40s ease-in-out infinite alternate;
}

/* ---- Notebook Paper ----------------------------------------------------- */
.theme-notebook{--c1:#fdfcf7;--c2:#2f6fd0;--c3:#e05252}
html.theme-notebook{
  color-scheme:light;
  --bg:#fdfcf7;--bg-2:#fffef9;--panel:#fffef9;--panel-2:#f7f5ec;
  --line:#d8d3c2;--glass-rim:#fff;--text:#1e2430;--muted:#6b7280;
  --accent:#2f6fd0;--accent-2:#e05252;--accent-text:#2f6fd0;--shade:#8a8266;
  --learning-font:"Comic Neue","Segoe Print","Bradley Hand",var(--nx-text);
}
html.theme-notebook .panel,html.theme-notebook .today-hero,html.theme-notebook .settings-section,
html.theme-notebook .pack-card,html.theme-notebook .game-panel{
  background-image:repeating-linear-gradient(180deg,transparent 0 27px,#c9d8ee 27px 28px);
  background-position:0 12px;
}
html.theme-notebook .panel::before,html.theme-notebook .today-hero::before{
  content:"";position:absolute;left:26px;top:0;bottom:0;width:1.5px;background:#f0a3a3;opacity:.85;
}
html.theme-notebook body::before{display:none}

/* ---- Workshop Wood ------------------------------------------------------ */
.theme-wood{--c1:#3a2415;--c2:#c8963e;--c3:#f4e7d3}
html.theme-wood{
  color-scheme:dark;
  --bg:#2a1a0f;--bg-2:#33200f;--panel:#3d2917;--panel-2:#4a3320;
  --line:#6a4a2a;--glass-rim:#8a6238;--text:#f6ead6;--muted:#c4a882;
  --accent:#e0a94a;--accent-2:#b5763a;--accent-text:#f0c164;--shade:#150c05;
}
html.theme-wood body::before{
  opacity:.55;
  background:
    repeating-linear-gradient(92deg,#00000018 0 3px,transparent 3px 9px,#ffffff08 9px 10px,transparent 10px 22px),
    repeating-linear-gradient(88deg,#00000012 0 60px,#ffffff06 60px 61px),
    radial-gradient(ellipse at 24% 32%,#00000030,transparent 8%),
    radial-gradient(ellipse at 72% 68%,#00000028,transparent 7%);
  animation:none;
}
html.theme-wood .primary-button{background:linear-gradient(180deg,#e8b75c,#b5763a);color:#2a1a0f;box-shadow:0 2px 0 #7a4c22}

/* ---- Farm Morning ------------------------------------------------------- */
.theme-farm{--c1:#f6f1e0;--c2:#4a8b3b;--c3:#e0b93f}
html.theme-farm{
  color-scheme:light;
  --bg:#f7f3e4;--bg-2:#fffdf3;--panel:#fffdf3;--panel-2:#f2ecd8;
  --line:#cfc6a4;--glass-rim:#fff;--text:#2c3320;--muted:#6d7358;
  --accent:#4a8b3b;--accent-2:#e0b93f;--accent-text:#3d7530;--shade:#8c8460;
}
html.theme-farm body::before{
  opacity:.5;
  background:
    repeating-linear-gradient(0deg,#d8452c14 0 14px,transparent 14px 28px),
    repeating-linear-gradient(90deg,#d8452c14 0 14px,transparent 14px 28px),
    linear-gradient(180deg,#bfe0f5aa,transparent 34%),
    radial-gradient(ellipse at 50% 108%,#4a8b3b3a,transparent 46%);
  animation:none;
}

/* ---- Aquarium ----------------------------------------------------------- */
.theme-aquarium{--c1:#062b3d;--c2:#2ec5c0;--c3:#dffaff}
html.theme-aquarium{
  color-scheme:dark;
  --bg:#04222f;--bg-2:#062c3d;--panel:#08394d;--panel-2:#0b475e;
  --line:#12657f;--glass-rim:#2a94ad;--text:#e6fbff;--muted:#8fc9d8;
  --accent:#3ad6cf;--accent-2:#4aa8ff;--accent-text:#5ce4dd;--shade:#021620;
}
html.theme-aquarium body::before{
  opacity:.8;
  background:
    linear-gradient(180deg,#7fe8ff2e,transparent 44%),
    repeating-linear-gradient(104deg,#bff6ff14 0 2px,transparent 2px 46px),
    radial-gradient(ellipse at 22% 12%,#7fe8ff26,transparent 30%),
    radial-gradient(ellipse at 76% 8%,#7fe8ff1c,transparent 26%);
  animation:nexus-background-drift 18s ease-in-out infinite alternate;
}

/* ---- Candy Counter ------------------------------------------------------ */
.theme-candy{--c1:#fff6f8;--c2:#ff5f8d;--c3:#8fd6a8}
html.theme-candy{
  color-scheme:light;
  --bg:#fff6f8;--bg-2:#fffafc;--panel:#fffafc;--panel-2:#ffeef3;
  --line:#f4cdd8;--glass-rim:#fff;--text:#3a2430;--muted:#8a6674;
  --accent:#ff5f8d;--accent-2:#54c07d;--accent-text:#e0447a;--shade:#c69aa8;
}
html.theme-candy body::before{
  opacity:.42;
  background:repeating-linear-gradient(58deg,#ff5f8d1f 0 16px,transparent 16px 32px,#54c07d1a 32px 48px,transparent 48px 64px);
  animation:none;
}

/* ---- Blueprint ---------------------------------------------------------- */
.theme-blueprint{--c1:#0d2a5c;--c2:#7fb2ff;--c3:#eaf2ff}
html.theme-blueprint{
  color-scheme:dark;
  --bg:#0b2350;--bg-2:#0e2b60;--panel:#12336e;--panel-2:#173d80;
  --line:#3f6ec0;--glass-rim:#6f9bef;--text:#eaf2ff;--muted:#a8c2f0;
  --accent:#8fc0ff;--accent-2:#ffffff;--accent-text:#b7d6ff;--shade:#04122c;
  --learning-font:"IBM Plex Mono","Courier New",ui-monospace,monospace;
}
html.theme-blueprint body::before{
  opacity:.55;
  background:
    repeating-linear-gradient(0deg,#ffffff1c 0 1px,transparent 1px 24px),
    repeating-linear-gradient(90deg,#ffffff1c 0 1px,transparent 1px 24px),
    repeating-linear-gradient(0deg,#ffffff33 0 1px,transparent 1px 120px),
    repeating-linear-gradient(90deg,#ffffff33 0 1px,transparent 1px 120px);
  animation:none;
}
html.theme-blueprint .panel,html.theme-blueprint .metric-card,html.theme-blueprint .today-hero{
  border:1px solid #7fb2ff88;box-shadow:none;
}

/* ---- Comic Book --------------------------------------------------------- */
.theme-comic{--c1:#fff8e6;--c2:#ff3b30;--c3:#2b2b2b}
html.theme-comic{
  color-scheme:light;
  --bg:#fff8e6;--bg-2:#fffdf5;--panel:#fffdf5;--panel-2:#fff3d6;
  --line:#1a1a1a;--glass-rim:#fff;--text:#141414;--muted:#333333;
  --accent:#ff3b30;--accent-2:#2f6fd0;--accent-text:#d02a20;--shade:#1a1a1a;
}
html.theme-comic .panel,html.theme-comic .metric-card,html.theme-comic .record-card,
html.theme-comic .book-card,html.theme-comic .study-card,html.theme-comic .game-panel,
html.theme-comic .settings-section,html.theme-comic .today-hero,html.theme-comic .pack-card,
html.theme-comic .primary-button,html.theme-comic .secondary-button,html.theme-comic .ghost-button{
  border:3px solid #141414;box-shadow:4px 4px 0 #141414;
}
html.theme-comic body::before{
  opacity:.3;
  background:radial-gradient(#ff3b3055 1.4px,transparent 1.5px) 0 0/12px 12px;
  animation:none;
}
html.theme-comic .page-heading h1{-webkit-text-stroke:1.5px #141414}

/* Every one of these keeps the accessibility floor: the reduced-motion rule at the top of the
   file already stops their backgrounds moving, and none of them relies on motion to be read. */


/* One stroke width across the set. The shapes are the originals — a redraw to a single
   geometry read worse than the drawings it replaced, so only the inconsistent stroke weights
   were changed. */
.nx-icon-consistent{}


/* ---------------------------------------------------------------------------
   The game tiles: the picture in the middle of its circle, and the tile balanced.

   Five rules defined .game-pick-art and the last one — display:block, line-height:1 — dropped
   the place-items:center from the rule above it. The emoji rendered at the top-left of its
   46px circle, and with line-height:1 the glyph's ascent pushed it higher again: measured
   14px of space above it and 39px below inside its own tile.
   --------------------------------------------------------------------------- */
.game-pick .game-pick-art{
  display:grid;place-items:center;line-height:1;
  /* an emoji's own box is taller than the glyph, so it is nudged onto the optical centre
     rather than the box centre */
  padding-bottom:.06em;
}
.game-pick{align-content:center;padding-top:14px;padding-bottom:14px}


/* ---------------------------------------------------------------------------
   The tour darkens the room and leaves one light on.

   A pulse on a fully-lit page is a highlight among eleven other things worth looking at. The
   hole is one positioned rectangle with a spread shadow big enough to cover any screen, so
   there is no second copy of the element to fall out of step and no clip-path to cost a frame.
   --------------------------------------------------------------------------- */
.tour-spot{
  position:fixed;z-index:68;pointer-events:none;
  box-shadow:0 0 0 9999px color-mix(in srgb,#000 74%,transparent);
  border:2px solid var(--accent);
  transition:top .28s ease,left .28s ease,width .28s ease,height .28s ease;
}
.tour-spot.hidden{display:none}
/* The thing in the light keeps its pulse, but it no longer has to compete for attention. */
html.tour-running .tour-pulse{position:relative;z-index:69}
/* The pop moves to the half of the screen the target is not in, and clears the bottom bar. */
.tour-pop{bottom:calc(96px + env(safe-area-inset-bottom));top:auto}
.tour-pop.tour-pop-top{top:calc(72px + env(safe-area-inset-top));bottom:auto}
@media(min-width:821px){
  .tour-pop{bottom:32px}
  .tour-pop.tour-pop-top{top:88px}
}
@media(prefers-reduced-motion:reduce){.tour-spot{transition:none}}


/* The rest of an explanation, one line high until it is wanted. */
.teach-more{margin-top:6px}
.teach-more>summary{font-size:.86rem;color:var(--accent-text,var(--accent));cursor:pointer;padding:4px 0;list-style:none}
.teach-more>summary::-webkit-details-marker{display:none}
.teach-more>summary::before{content:"+ ";font-weight:900}
.teach-more[open]>summary::before{content:"– "}
.teach-more .lesson-fold-body{padding-top:2px}
/* Ollama found on this computer — one line, one button, no explanation of a thing that is
   already on screen. */
.own-ai-found{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2)}
.own-ai-found span{color:var(--muted)}
/* What the notes and cards buttons are doing, on the line under them. */
.link-work{margin:8px 0 0;color:var(--muted);font-size:.86rem;min-height:1.1em}
.link-work:empty{display:none}
/* Books a learner can open, on the sources page. */
.free-books ul{margin:8px 0 0;padding-left:18px;display:grid;gap:8px}
.free-books li{line-height:1.4}
.free-books small{display:block;color:var(--muted);font-size:.76rem}
/* The key sentence of a paragraph, lit left to right the first time it reaches the screen. */
/* Painted on the text itself rather than behind it: an absolutely positioned box drew one
   rectangle across a sentence that wraps over three lines, which read as two broken boxes with
   a hole between them. A background that clones per line fragment wraps with the words. */
/* A <mark> carries the browser's own yellow; without clearing it the wipe reads as highlighter
   pen rather than the app's accent. */
.key-line{background-color:transparent;color:inherit;border-radius:3px;padding:1px 2px;margin:0 -2px;background-image:linear-gradient(90deg,color-mix(in srgb,var(--accent) 30%,transparent),color-mix(in srgb,var(--accent) 14%,transparent));background-repeat:no-repeat;background-size:0% 100%;transition:background-size .7s cubic-bezier(.22,.61,.36,1);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.key-line.lit{background-size:100% 100%}
/* The word being spoken. */
.spoken-word{background:color-mix(in srgb,var(--accent) 34%,transparent);color:inherit;border-radius:4px;padding:0 2px;box-decoration-break:clone}
@media(prefers-reduced-motion:reduce){.key-line{transition:none}}

/* A saved link's picture, over the lettered tile that stands in when it will not load. Both
   occupy the same square, so a card is the same size whether the picture arrives or not — a
   missing thumbnail used to collapse the card and leave the grid ragged. */
.link-art{position:relative;display:block}
.link-art .link-shot{display:grid}
.link-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--bg-2);border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
/* Every tile the same height, whatever its title does. */
.resource-card{align-content:start}
.link-face h3{display:block;overflow:hidden}

/* Saved links: the filters fold, like the book search on the library page. Measured at
   390x844, the first link sat 630px down — behind a search box, two drop-downs, a checkbox
   and a second heading repeating the page title. */
.resource-find{margin-bottom:12px}
.resource-find .resource-filters{margin:0}
.heading-quiet{margin:0;padding:0;min-height:0}
.heading-quiet:empty{display:none}
/* Once the editor and the shelf are folds, a two-column grid gives them a 310px column with a
   wrapped heading in it and 500px of nothing underneath. A fold is a row. */
.resource-layout{grid-template-columns:minmax(0,1fr)}
.resource-editor-panel{position:static}
/* The explicit placements that made the two columns go with them, or the unfolded collection
   keeps its grid-column:2 and the browser invents the second column back. */
.resource-layout>*,.resource-layout>#starter-shelf-panel{grid-column:1;grid-row:auto}