@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('dmsans-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600 800;font-display:swap;src:url('manrope-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{color-scheme:dark;--bg:#0a0d18;--surface:#111628;--surface2:#171d32;--ink:#f7f7fb;--muted:#a5abc0;--line:#ffffff16;--glass:#0a0d18d9;--shadow:#0008;--accent:#8b6cff}
:root[data-theme=light]{color-scheme:light;--bg:#f4f1eb;--surface:#fffdf9;--surface2:#f0ece5;--ink:#17202b;--muted:#68717d;--line:#17202b18;--glass:#f4f1ebdf;--shadow:#453e3520;--accent:#6848e8}
*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 'DM Sans',system-ui,sans-serif;transition:background .25s,color .25s}button,a{font:inherit}header{position:fixed;z-index:10;inset:0 0 auto;display:grid;grid-template-columns:1fr auto 1fr;gap:1.2rem;align-items:center;padding:.7rem 1.2rem;border-bottom:1px solid var(--line)}
header::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--glass);backdrop-filter:blur(18px)}header nav,.tools{display:flex;gap:.35rem;align-items:center}.tools{justify-content:flex-end}.brand{display:flex;align-items:center;gap:.65rem;color:inherit;text-decoration:none;font:800 1.05rem 'Manrope',sans-serif;letter-spacing:-.025em}.brand img{width:38px;height:38px;filter:drop-shadow(0 6px 12px #6d55ff44)}.brand small{display:block;color:var(--muted);font:500 .65rem 'DM Sans';letter-spacing:.02em}.tools a,button,.primary{border:1px solid var(--line);border-radius:999px;background:transparent;color:inherit;padding:.53rem .78rem;cursor:pointer;transition:transform .18s,background .18s,border .18s}.tools a{min-width:40px;text-align:center;text-decoration:none}button:hover,.tools a:hover{background:var(--surface2);transform:translateY(-1px)}nav .active,.primary{color:white;background:var(--accent);border-color:transparent;box-shadow:0 7px 22px color-mix(in srgb,var(--accent),transparent 66%)}#themeToggle{font-size:1.1rem;min-width:40px}#feed{height:100vh;overflow-y:auto;scroll-snap-type:y proximity;padding-top:64px}.lesson{--track:#8b6cff;position:relative;isolation:isolate;min-height:calc(100vh - 64px);scroll-snap-align:start;display:grid;align-content:center;justify-items:center;overflow:hidden;padding:2rem}.lesson:has(.deeper[open]){align-content:start}.lesson:before{content:'';position:absolute;inset:8% 5%;z-index:-2;background:radial-gradient(circle at 78% 30%,color-mix(in srgb,var(--track),transparent 75%),transparent 30%),radial-gradient(circle at 13% 88%,color-mix(in srgb,var(--track),transparent 87%),transparent 35%)}.lesson-content{width:min(820px,100%);position:relative;z-index:2}.eyebrow{display:flex;align-items:center;gap:.6rem;color:var(--track);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.73rem}.track-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:color-mix(in srgb,var(--track),transparent 83%);font-size:1rem}.lesson-number{margin-left:auto;color:var(--muted);font-variant-numeric:tabular-nums}.lesson h2{font:800 clamp(2.5rem,7.2vw,5.7rem)/.98 'Manrope',sans-serif;letter-spacing:-.065em;max-width:760px;margin:.55rem 0 1rem;text-wrap:balance}.hook{font-size:clamp(1.08rem,2vw,1.35rem);color:var(--muted);max-width:680px;margin-bottom:1.6rem}.lesson-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}.lesson section{background:color-mix(in srgb,var(--surface),transparent 8%);border:1px solid var(--line);border-radius:20px;padding:1rem 1.15rem;box-shadow:0 18px 50px var(--shadow)}.lesson-grid h3,#modalBody h2,.panel h2{font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--track);margin:.1rem 0 .55rem}.lesson section p{margin:0}.lesson footer{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:1rem}.lesson footer button{background:var(--surface);box-shadow:0 6px 20px var(--shadow)}.lesson footer button:first-child{color:#e85680}.swipe-hint{text-align:center;color:var(--muted);font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;margin-top:1rem}.swipe-hint span{display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:50%;width:24px;height:24px;margin-right:.3rem}.art{position:absolute;z-index:0;right:4%;top:12%;width:min(32vw,360px);aspect-ratio:1;opacity:.3;pointer-events:none}.orbit{position:absolute;inset:10%;border:1px solid var(--track);border-radius:50%;animation:spin 22s linear infinite}.orbit:before,.orbit:after{content:'';position:absolute;width:12px;height:12px;border-radius:50%;background:var(--track);top:10%;left:16%;box-shadow:0 0 20px var(--track)}.orbit.two{inset:26%;animation-direction:reverse;animation-duration:14s}.glyph{position:absolute;inset:40%;display:grid;place-items:center;color:var(--track);font-size:4rem;filter:drop-shadow(0 0 25px var(--track))}@keyframes spin{to{transform:rotate(360deg)}}dialog{width:min(620px,92vw);border:1px solid var(--line);border-radius:26px;background:var(--surface);color:var(--ink);padding:2rem;box-shadow:0 30px 100px #0007}dialog::backdrop{background:#080b14b8;backdrop-filter:blur(8px)}dialog h1{font:800 2rem 'Manrope';letter-spacing:-.04em}.close{float:right;font-size:1.4rem}.modal-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:color-mix(in srgb,var(--accent),transparent 82%);color:var(--accent);font-size:1.4rem}.quiz-question{font-size:1.25rem}.answer{margin:1rem 0;padding:1rem;background:var(--surface2);border-radius:16px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin:1rem 0 2rem}.stats div{padding:1rem;background:var(--surface2);border-radius:16px}.stats b{display:block;font:800 1.8rem 'Manrope'}.stats span{color:var(--muted);font-size:.8rem}.gap{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:.6rem 0}.gap b{color:var(--muted);font-size:.8rem}.install{display:grid;place-items:center;min-height:100vh}.panel{width:min(520px,92vw);background:var(--surface);padding:2rem;border-radius:24px}.panel label{display:block;margin:1rem 0}.panel input{display:block;width:100%;padding:.8rem;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}.error{color:#e85d75}.success{color:#2cad7d}.empty{text-align:center;margin-top:30vh}.loading{opacity:.7}
@media(max-width:900px){header{grid-template-columns:auto 1fr}.brand small{display:none}header nav{grid-row:2;grid-column:1/-1;justify-content:center}.tools{margin-left:auto}#feed{padding-top:108px}.lesson{min-height:calc(100vh - 108px)}.art{right:-10%;top:15%;width:55vw}.lesson-grid{grid-template-columns:1fr}}
@media(max-width:600px){header{padding:.55rem .7rem}.brand span{display:none}.brand img{width:34px;height:34px}.tool-label{display:none}header nav{overflow-x:auto;justify-content:flex-start;padding-bottom:.1rem}header nav button{white-space:nowrap;font-size:.78rem}.lesson{padding:1.4rem 1rem}.lesson h2{font-size:clamp(2.35rem,12vw,4rem)}.hook{margin-bottom:1rem}.lesson section{padding:.85rem 1rem}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.lesson footer button{position:relative}.lesson footer span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.lesson footer button{width:42px;height:42px;padding:0}.swipe-hint{display:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.orbit{animation:none}}
.game-score{white-space:nowrap;padding:.45rem .7rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:.78rem;font-weight:700}.lesson-content{padding-right:190px}.visual{position:absolute;right:4.5%;top:17%;width:clamp(150px,18vw,245px);aspect-ratio:1;border-radius:28px;background-size:400% 300%;background-repeat:no-repeat;box-shadow:0 24px 70px color-mix(in srgb,var(--track),transparent 62%);transform:rotate(2deg);border:5px solid color-mix(in srgb,var(--surface),transparent 8%);z-index:1}.subject-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-top:1.3rem;max-height:58vh;overflow:auto;padding:.15rem}.subject-card{display:flex;flex-direction:column;align-items:stretch;text-align:left;border-radius:18px;padding:.5rem;background:var(--surface2);min-height:150px}.subject-card.selected{outline:3px solid var(--accent);outline-offset:1px}.subject-image{display:grid;place-items:center;position:relative;overflow:hidden;width:100%;aspect-ratio:1.45;border-radius:14px;margin-bottom:.55rem}.subject-all{display:grid;place-items:center;width:100%;aspect-ratio:1.45;border-radius:12px;background:radial-gradient(circle,#9479ff,#43319b);color:#fff;font-size:2.8rem;margin-bottom:.55rem}.subject-card b{line-height:1.15;font-size:.84rem}.subject-card small,.modal-lead{color:var(--muted)}#toast{position:fixed;z-index:30;left:50%;bottom:2rem;transform:translate(-50%,30px);opacity:0;background:var(--ink);color:var(--bg);padding:.7rem 1rem;border-radius:999px;font-weight:700;box-shadow:0 14px 45px #0005;transition:.25s;pointer-events:none}#toast.show{opacity:1;transform:translate(-50%,0)}.quiz-actions{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}.quiz-result{flex:1;min-width:220px;font-weight:700}.stats{grid-template-columns:repeat(auto-fit,minmax(95px,1fr))}
@media(max-width:1100px){.game-score{position:fixed;right:.7rem;top:112px;z-index:2}.lesson-content{padding-right:150px}.visual{width:145px;top:20%}}
@media(max-width:720px){.lesson-content{padding-right:0}.visual{position:relative;right:auto;top:auto;width:100%;height:138px;aspect-ratio:auto;border-radius:20px;margin-bottom:1rem;background-size:400% 300%;transform:none;border-width:3px}.subject-grid{grid-template-columns:repeat(2,1fr)}.subject-card{min-height:135px}.game-score{top:104px;font-size:.68rem}.lesson footer{padding-right:0}}
.subject-active{border-color:var(--accent);color:var(--accent);max-width:220px}.subject-active .tool-label{display:inline-block;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.tools{overflow-x:auto;scrollbar-width:none}.tools::-webkit-scrollbar{display:none}.count{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:.25rem;border-radius:99px;background:#ef5d75;color:white;font-size:.65rem}.path-grid{display:grid;gap:.7rem;margin-top:1.2rem}.path-card{display:flex;align-items:center;gap:1rem;text-align:left;border-radius:18px;padding:1rem;background:var(--surface2)}.path-card>span{display:grid;place-items:center;flex:0 0 48px;height:48px;border-radius:15px;background:color-mix(in srgb,var(--accent),transparent 82%);color:var(--accent);font-size:1.4rem}.path-card div{flex:1}.path-card b,.path-card small{display:block}.path-card small{color:var(--muted)}.path-card i{display:block;height:5px;margin-top:.55rem;background:var(--line);border-radius:5px;overflow:hidden}.path-card em{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#35d1b5)}.mastery-strip{display:flex;gap:.7rem;flex-wrap:wrap;padding:.7rem 0;color:var(--muted)}.mastery-strip b{color:var(--ink)}.path-steps{list-style:none;padding:0}.path-steps li{display:flex;gap:.8rem;align-items:center;padding:.65rem 0;border-bottom:1px solid var(--line)}.path-steps li>span{display:grid;place-items:center;flex:0 0 30px;height:30px;border-radius:50%;background:var(--surface2);font-weight:700}.path-steps li.done>span{background:#32b989;color:white}.path-steps b,.path-steps small{display:block}.path-steps small{color:var(--muted)}.challenge{margin-top:1.2rem;padding:1rem;background:var(--surface2);border-radius:18px}.challenge textarea{width:100%;min-height:110px;padding:.8rem;margin:.5rem 0;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);font:inherit}.badge-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem}.badge{padding:1rem;border-radius:18px;background:var(--surface2);border:1px solid var(--line)}.badge>span{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;font-size:1.5rem;background:var(--bg);margin-bottom:.65rem}.badge b,.badge small{display:block}.badge p{font-size:.85rem;color:var(--muted)}.badge.locked{filter:grayscale(1);opacity:.52}.badge.earned{border-color:#e5b94b;box-shadow:inset 0 0 25px #e5b94b16}.review-meta{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-size:.72rem}
@media(max-width:900px){header{grid-template-columns:auto minmax(0,1fr)}.tools{max-width:100%}}
@media(max-width:560px){.badge-grid{grid-template-columns:1fr}.path-card{padding:.75rem}.tools{gap:.2rem}}
.mobile-menu-toggle .tool-label{display:inline!important}
.mobile-menu-toggle{display:none}.mobile-hub{display:grid;grid-template-columns:repeat(2,1fr);gap:.65rem}.mobile-hub button,.mobile-hub a{display:grid;grid-template-columns:38px 1fr;grid-template-rows:auto auto;column-gap:.65rem;text-align:left;align-items:center;padding:.85rem;border-radius:16px;background:var(--surface2);color:var(--ink);text-decoration:none;border:1px solid var(--line)}.mobile-hub span{grid-row:1/3;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--bg);font-size:1.1rem}.mobile-hub b,.mobile-hub small{display:block}.mobile-hub small{color:var(--muted);font-size:.72rem}
@media(max-width:720px){header{height:58px;display:flex;padding:.55rem .65rem;gap:.35rem}.brand{flex:0 0 36px}.brand span{display:none}.brand img{width:36px;height:36px}header nav{position:fixed;z-index:20;left:0;right:0;bottom:0;top:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem;padding:.5rem max(.6rem,env(safe-area-inset-right)) calc(.5rem + env(safe-area-inset-bottom)) max(.6rem,env(safe-area-inset-left));background:var(--glass);border-top:1px solid var(--line);backdrop-filter:blur(18px)}header nav button{min-height:42px;padding:.45rem .25rem;font-size:.74rem;white-space:nowrap}.tools{flex:1;justify-content:flex-end;overflow:visible}.tools>#skillsToggle,.tools>#reviewToggle,.tools>#badgesToggle,.tools>#shuffleToggle,.tools>#savedToggle,.tools>#progressToggle,.tools>a{display:none}.mobile-menu-toggle{display:inline-flex!important}.tools .tool-label{display:none}.tools #subjectLabel{display:inline-block;max-width:82px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}.game-score{position:static;padding:.43rem .55rem;font-size:.65rem}#themeToggle,.mobile-menu-toggle{min-width:38px;padding:.45rem}#feed{padding-top:58px;padding-bottom:58px}.lesson{min-height:calc(100vh - 116px);padding:1.3rem 1rem}.visual{display:none!important}.lesson-content{padding-right:0}.lesson h2{font-size:clamp(2.15rem,11vw,3.5rem)}.lesson-grid{gap:.55rem}.lesson section{box-shadow:none}.mobile-hub{grid-template-columns:1fr 1fr}}
@media(max-width:430px){.tools #subjectLabel{max-width:58px}.game-score{font-size:.6rem;padding:.4rem}.mobile-hub{grid-template-columns:1fr}.lesson footer{gap:.35rem}}
.visual{display:none!important}.lesson-content{padding-right:0}.mobile-menu-toggle{display:inline-flex!important}.tools>#skillsToggle,.tools>#reviewToggle,.tools>#badgesToggle,.tools>#subjectToggle,.tools>#shuffleToggle,.tools>#savedToggle,.tools>#progressToggle,.tools>a{display:none!important}header{grid-template-columns:1fr auto auto}.tools{overflow:visible}.lesson h2{max-width:820px}.mission-hub{grid-column:1/-1;border-color:color-mix(in srgb,var(--accent),transparent 35%)!important;background:linear-gradient(135deg,color-mix(in srgb,var(--accent),transparent 82%),var(--surface2))!important}.mission-progress{margin:1rem 0 1.25rem}.mission-progress i{display:block;height:9px;background:var(--surface2);border-radius:9px;overflow:hidden;margin-bottom:.5rem}.mission-progress em{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#35d1b5);border-radius:9px}.mission-progress b{font-size:.8rem;color:var(--muted)}.mission-list{display:grid;gap:.5rem;margin-bottom:1rem}.mission-list article{display:flex;gap:.75rem;align-items:center;padding:.75rem;background:var(--surface2);border:1px solid var(--line);border-radius:15px}.mission-list article>span{display:grid;place-items:center;flex:0 0 32px;height:32px;border-radius:50%;background:var(--bg);font-weight:700}.mission-list article.done{opacity:.62}.mission-list article.done>span{background:#31b886;color:white}.mission-list b,.mission-list small{display:block}.mission-list small{color:var(--muted)}.mission-finish{padding:1rem;border-radius:16px;background:linear-gradient(135deg,#7557df,#22a88f);color:#fff;font-weight:700}.mission-reading{padding:1rem;margin:1rem 0;background:var(--surface2);border-radius:16px}.choice-list{display:grid;gap:.6rem;margin:1rem 0}.choice-list button{display:grid;grid-template-columns:32px 1fr;align-items:center;gap:.7rem;text-align:left;border-radius:15px;padding:.75rem;background:var(--surface2)}.choice-list button b{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--bg)}.choice-list button:disabled{opacity:.55}.assessment-feedback{padding:1rem;border-radius:16px;background:var(--surface2)}.assessment-feedback.correct{border-left:4px solid #31b886}.assessment-feedback.missed{border-left:4px solid #e7a846}

/* ---- v12 -------------------------------------------------------------- */
/* Folded in from repair.css so the page loads one stylesheet, not two. */
.floating-menu{display:none;position:fixed;z-index:100;right:14px;bottom:calc(76px + env(safe-area-inset-bottom));background:var(--accent);color:#fff;border:2px solid #ffffff55;box-shadow:0 10px 35px #0007;font-weight:800}
.floating-menu span{position:static!important;width:auto!important;height:auto!important;clip-path:none!important;display:inline!important}
dialog{max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain}
.mobile-hub{padding-bottom:max(1rem,env(safe-area-inset-bottom))}
@media(max-width:720px){
  .floating-menu{display:inline-flex;align-items:center;gap:.4rem}
  .mobile-hub{grid-template-columns:1fr!important}
  .mobile-hub button,.mobile-hub a{min-height:66px}
  dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);padding:1.25rem;margin:auto}
  .close{position:sticky;top:0;z-index:4;background:var(--surface)}
  /* The blur has to live on a pseudo-element or the fixed tab bar below is
     positioned against the header instead of the viewport. */
  header{background:transparent}
  header::before{border-bottom:1px solid var(--line)}
  /* Leave room for the bottom tab bar and the floating menu button. */
  #feed{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
}

/* Admin and upgrade screens */
.admin-panel{width:min(900px,94vw);margin:3rem auto}
.admin-logout{float:right}
.upgrade-log{list-style:none;padding:0;margin:.5rem 0 0;font:500 .82rem/1.5 'DM Sans',sans-serif}
.upgrade-log li{padding:.4rem .6rem;border-radius:8px;margin-bottom:.25rem;background:var(--surface2)}
.upgrade-log li::before{margin-right:.5rem;font-weight:700}
.upgrade-log li.ok::before{content:'¹3';color:#32b989}
.upgrade-log li.skip::before{content:'92';color:var(--muted)}

/* Respect a reduced-motion preference for the feed's scroll snapping too. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
}

.data-note{margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.data-note p{color:var(--muted);font-size:.85rem;line-height:1.5}
.data-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.7rem}
.data-actions button.danger{border-color:#ef5d7555;color:#ef5d75}
.data-actions button.danger:hover{background:#ef5d7518}
.feed-end{max-width:36rem;margin:2rem auto;text-align:center}

.v14-preview{border:1px solid var(--line);border-radius:12px;padding:.9rem 1rem;margin:.6rem 0;background:var(--surface2)}
.v14-preview.after{border-color:#32b98955}
.v14-tag{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 .4rem}
.v14-preview.after .v14-tag{color:#32b989}
.v14-q{font-weight:600;margin:0 0 .35rem}
.v14-a{color:var(--muted);margin:0;font-size:.9rem;line-height:1.5}
.v14-note{margin:.5rem 0 0;font-size:.8rem;color:#ef5d75}

.track-counts{list-style:none;padding:0;margin:.6rem 0;font-size:.88rem}
.track-counts li{display:flex;justify-content:space-between;gap:1rem;padding:.35rem .6rem;border-radius:7px;margin-bottom:.2rem;background:var(--surface2)}
.track-counts li b{font-variant-numeric:tabular-nums}
.track-counts li.short b{color:#ef5d75}
.track-counts li.ok b{color:#32b989}

/* Subject tiles for tracks beyond the 4x3 photographic atlas. Built from the
   track's own colour and glyph, so a new track needs no new artwork. */




/* ---- Subject tiles -------------------------------------------------------
   Every tile is built from the track's own colour and glyph: a layered mesh
   gradient rather than a flat fill, so the grid reads as one system and a new
   track never needs artwork. */
.subject-image{
  background:
    radial-gradient(120% 100% at 18% 8%,  color-mix(in srgb,var(--tile,#7b6cf0),#ffffff 34%) 0%, transparent 58%),
    radial-gradient(100% 120% at 88% 96%, color-mix(in srgb,var(--tile,#7b6cf0),#000000 55%) 0%, transparent 62%),
    linear-gradient(150deg, var(--tile,#7b6cf0) 0%, color-mix(in srgb,var(--tile,#7b6cf0),#05070f 72%) 100%);
}
.subject-image::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(#ffffff1f 1px,transparent 1px);
  background-size:13px 13px;
  mask-image:linear-gradient(160deg,#000 0%,transparent 72%);
  -webkit-mask-image:linear-gradient(160deg,#000 0%,transparent 72%)}
.subject-image::after{
  content:var(--glyph,'\2726');position:relative;
  font-size:2rem;line-height:1;color:#fff;
  text-shadow:0 2px 14px #00000059;
  transition:transform .25s ease}
.subject-card:hover .subject-image::after{transform:scale(1.08)}
.subject-card.selected .subject-image{box-shadow:inset 0 0 0 2px #ffffffb0}
.subject-all{display:none}

/* ---- Go Deeper ----------------------------------------------------------- */
.deep{margin-top:.4rem}
.deep h2{margin-top:1.3rem}
.deep p{margin:0 0 .8rem;line-height:1.65}
.deep-limits{margin:1.3rem 0;padding:.85rem 1rem;border-left:3px solid var(--line);background:var(--surface2);border-radius:0 12px 12px 0}
.deep-limits h2{margin-top:0}
.deep-limits p{margin:0;color:var(--muted)}

/* Glossary terms inside prose */
.gterm{display:inline;padding:0;border:0;background:none;color:inherit;font:inherit;
  border-bottom:1px dashed color-mix(in srgb,var(--accent),transparent 35%);
  cursor:pointer;border-radius:0;transition:background .15s}
.gterm:hover{background:color-mix(in srgb,var(--accent),transparent 88%)}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem}
.gterm.chip{display:inline-flex;border:1px solid var(--line);border-bottom:1px solid var(--line);
  border-radius:999px;padding:.3rem .7rem;font-size:.82rem;color:var(--muted);background:var(--surface2)}
.gterm.chip:hover{color:var(--ink);border-color:var(--accent)}
.term-card{margin-top:1rem;padding:.9rem 1rem;border:1px solid var(--accent);border-radius:14px;
  background:color-mix(in srgb,var(--accent),transparent 92%)}
.term-card b{display:block;margin-bottom:.3rem}
.term-card p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.55}

/* Glossary browser */
.gloss-search{width:100%;padding:.7rem .9rem;margin:.4rem 0 1rem;border:1px solid var(--line);
  border-radius:12px;background:var(--bg);color:var(--ink);font:inherit}
.gloss-list{display:flex;flex-direction:column;gap:.55rem;max-height:56vh;overflow-y:auto}
.gloss-item{padding:.75rem .9rem;border-radius:12px;background:var(--surface2)}
.gloss-item b{display:block}
.gloss-item i{display:block;font-style:normal;font-size:.75rem;color:var(--muted);margin-top:.1rem}
.gloss-item p{margin:.35rem 0 0;color:var(--muted);font-size:.88rem;line-height:1.55}

/* ---- Admin insights ------------------------------------------------------ */
.admin-nav{margin:.2rem 0 1.2rem}
.insight-range{display:flex;gap:.4rem;flex-wrap:wrap;margin:.6rem 0 1.2rem}
.insight-range a{padding:.35rem .8rem;border:1px solid var(--line);border-radius:999px;
  text-decoration:none;color:var(--muted);font-size:.85rem}
.insight-range a.on{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent),transparent 90%)}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  list-style:none;padding:0;margin:0 0 1.6rem}
.stat-row li{background:var(--surface);padding:.9rem 1rem;display:flex;flex-direction:column;gap:.15rem}
.stat-row b{font:800 1.5rem/1 'Manrope',sans-serif;font-variant-numeric:tabular-nums}
.stat-row span{font-size:.74rem;color:var(--muted);letter-spacing:.03em}
.insight-note{color:var(--muted);font-size:.88rem;margin:.2rem 0 .8rem;max-width:60ch}
.insight-empty{color:var(--muted);font-size:.9rem;padding:.8rem 1rem;background:var(--surface2);border-radius:12px}
.insight-list{display:flex;flex-wrap:wrap;gap:.35rem;margin:.4rem 0}
.insight-list span{font-size:.8rem;color:var(--muted);background:var(--surface2);padding:.25rem .6rem;border-radius:999px}
.admin-panel h2 small{font-weight:400;color:var(--muted);font-size:.8rem}

/* ---- Due-review prompt --------------------------------------------------- */
.due-prompt{position:fixed;z-index:60;left:50%;transform:translateX(-50%);
  top:calc(var(--header-h,72px) + .6rem);width:min(38rem,calc(100vw - 1.5rem))}
.due-inner{display:flex;align-items:center;gap:.9rem;padding:.8rem 1rem;
  border:1px solid color-mix(in srgb,var(--accent),transparent 55%);border-radius:16px;
  background:var(--surface);box-shadow:0 14px 40px var(--shadow)}
.due-icon{display:grid;place-items:center;flex:0 0 38px;height:38px;border-radius:12px;
  background:color-mix(in srgb,var(--accent),transparent 82%);color:var(--accent);font-size:1.15rem}
.due-inner b{display:block;font-size:.95rem}
.due-inner small{display:block;color:var(--muted);font-size:.8rem;line-height:1.4}
.due-actions{margin-left:auto;display:flex;gap:.4rem;flex-shrink:0}
.due-actions button{font-size:.82rem;padding:.42rem .8rem}
@media(max-width:720px){
  .due-prompt{top:auto;bottom:calc(76px + env(safe-area-inset-bottom));width:calc(100vw - 1.2rem)}
  .due-inner{flex-wrap:wrap}
  .due-actions{margin-left:0;width:100%}
  .due-actions button{flex:1}
}

/* ---- Device transfer ----------------------------------------------------- */
.transfer{margin-top:1.3rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.transfer h2{margin-bottom:.3rem}
.transfer p{color:var(--muted);font-size:.87rem;line-height:1.55;margin:0 0 .7rem}
.transfer-code{margin-top:.8rem;padding:.9rem 1rem;border:1px dashed var(--accent);border-radius:14px;
  background:color-mix(in srgb,var(--accent),transparent 92%);text-align:center}
.transfer-code code{display:block;font:700 1.6rem/1 'IBM Plex Mono',ui-monospace,monospace;
  letter-spacing:.14em;color:var(--ink);margin-bottom:.45rem}
.transfer-code small{display:block;color:var(--muted);font-size:.76rem;line-height:1.45}
.transfer-ok{margin-top:.7rem;color:#32b989;font-size:.88rem}
.transfer-error{margin-top:.7rem;color:#ef5d75;font-size:.88rem}
#transferCode{text-transform:uppercase;letter-spacing:.12em;font-family:'IBM Plex Mono',ui-monospace,monospace}

/* ---- Server-rendered pages ----------------------------------------------- */
body.page{background:var(--bg);color:var(--ink);padding:0}
.page-wrap{max-width:46rem;margin:0 auto;padding:clamp(1.6rem,5vw,3.5rem) clamp(1.1rem,4vw,2rem) 5rem}
.page-wrap h1{font:800 clamp(2rem,5.5vw,3rem)/1.08 'Manrope',sans-serif;letter-spacing:-.04em;
  margin:.4rem 0 .6rem;text-wrap:balance}
.page-wrap h2{font:700 .72rem/1.3 'DM Sans',sans-serif;text-transform:uppercase;letter-spacing:.12em;
  color:var(--muted);margin:1.6rem 0 .5rem}
.page-wrap p{line-height:1.65;margin:0 0 .85rem}
.page-lead{font-size:1.1rem;color:var(--muted);margin-bottom:1.4rem}
.crumbs{font-size:.82rem;color:var(--muted);margin-bottom:1rem}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.crumbs span{margin:0 .35rem;opacity:.5}
.page-block{padding:1.1rem 1.2rem;margin:1rem 0;background:var(--surface);border:1px solid var(--line);border-radius:16px}
.page-block h2:first-child{margin-top:0}
.page-recall{border-color:color-mix(in srgb,var(--accent),transparent 60%)}
.page-question{font-weight:600}
.page-recall details{margin-top:.5rem}
.page-recall summary{cursor:pointer;color:var(--accent);font-size:.9rem}
.page-recall details p{margin-top:.6rem;color:var(--muted)}
.page-cta{display:flex;flex-direction:column;gap:.5rem;align-items:flex-start;margin:1.6rem 0}
.page-cta .primary{text-decoration:none;display:inline-block}
.page-cta small{color:var(--muted);font-size:.82rem}
.page-list{list-style:none;padding:0;margin:1rem 0;display:flex;flex-direction:column;gap:.6rem;counter-reset:pl}
.page-list li{padding:.85rem 1rem;background:var(--surface);border:1px solid var(--line);border-radius:14px}
.page-list a{text-decoration:none;color:var(--ink)}
.page-list a:hover b{color:var(--accent)}
.page-list p{margin:.25rem 0 0;color:var(--muted);font-size:.88rem}
.page-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0 1.2rem}
.page-tags a{font-size:.84rem;padding:.35rem .75rem;border:1px solid var(--line);border-radius:999px;
  text-decoration:none;color:var(--muted)}
.page-tags a:hover{border-color:var(--accent);color:var(--accent)}

/* ---- Accounts ------------------------------------------------------------ */
#accountToggle.is-signed-in{border-color:color-mix(in srgb,var(--accent),transparent 45%);color:var(--accent)}
.auth-tabs{display:flex;gap:.4rem;margin:1rem 0 .3rem}
.auth-tabs button{flex:1;font-size:.86rem;padding:.5rem .6rem}
.auth-tabs button.on{border-color:var(--accent);color:var(--accent);
  background:color-mix(in srgb,var(--accent),transparent 90%)}
.auth-form{display:flex;flex-direction:column;gap:.55rem;margin-top:.9rem}
.auth-form h2{margin-top:1.1rem}
.auth-form label{display:flex;flex-direction:column;gap:.25rem;font-size:.85rem;color:var(--muted)}
.auth-form label small{color:var(--muted);opacity:.75}
.auth-form input{padding:.65rem .8rem;border:1px solid var(--line);border-radius:12px;
  background:var(--bg);color:var(--ink);font:inherit}
.auth-form input:focus{outline:2px solid var(--accent);outline-offset:1px}
.auth-note{color:var(--muted);font-size:.8rem;line-height:1.5;margin:.2rem 0 0}
.linkish{border:0;background:none;padding:0;color:var(--accent);cursor:pointer;font:inherit;text-decoration:underline}
.interest-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.45rem;margin:.5rem 0}
.interest{display:flex;align-items:center;gap:.5rem;text-align:left;padding:.5rem .7rem;
  border:1px solid var(--line);border-radius:12px;background:var(--surface2);font-size:.82rem;color:var(--muted)}
.interest span{display:grid;place-items:center;flex:0 0 24px;height:24px;border-radius:7px;
  background:color-mix(in srgb,var(--tile,#8b6cff),transparent 70%);color:#fff;font-size:.85rem}
.interest.on{border-color:var(--tile,var(--accent));color:var(--ink);
  background:color-mix(in srgb,var(--tile,#8b6cff),transparent 88%)}

/* ---------------------------------------------------------------- lesson body
   The card carries the whole lesson now. These blocks were previously inside a
   modal, so they inherit its spacing rather than inventing new values. */
.matters,.doing{width:100%;max-width:760px;margin:.8rem 0 0}
.matters h3,.doing h3,.deeper h3{font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--track);margin:0 0 .35rem}
.matters p,.doing p{margin:0;color:var(--muted);max-width:68ch}
.doing p{color:var(--ink)}

/* Going deeper opens in place: reading the mechanism should never cost you your
   position in the feed. */
.deeper{width:100%;max-width:760px;margin:.9rem 0 0;border:1px solid var(--line);border-radius:16px;
  background:color-mix(in srgb,var(--surface),transparent 20%)}
.deeper[hidden]{display:none}
.deeper>summary{cursor:pointer;list-style:none;padding:.7rem .95rem;display:flex;flex-wrap:wrap;
  align-items:baseline;gap:.5rem;border-radius:16px}
.deeper>summary::-webkit-details-marker{display:none}
.deeper>summary::after{content:'+';margin-left:auto;color:var(--track);font-weight:700;font-size:1.1rem;line-height:1}
.deeper[open]>summary::after{content:'\2212'}
.deeper>summary>span{font-weight:700;font-size:.86rem}
.deeper>summary>small{color:var(--muted);font-size:.76rem}
.deeper>summary:hover{background:var(--surface2)}
.deeper>summary:focus-visible{outline:2px solid var(--track);outline-offset:2px}
.deeper-body{padding:0 .95rem 1rem;border-top:1px solid var(--line)}
.deeper-body p{margin:.75rem 0 0;color:var(--muted);max-width:68ch}
.deep-limits{margin-top:1rem;padding-top:.85rem;border-top:1px dashed var(--line)}
.deep-terms{margin-top:1rem}
.deeper .chips{display:flex;flex-wrap:wrap;gap:.35rem}

/* A term definition appears next to the lesson that used the word. */
.lesson .term-card{width:100%;max-width:760px;margin:.7rem 0 0;padding:.8rem .95rem;
  background:var(--surface2);border:1px solid var(--line);border-radius:14px}
.lesson .term-card[hidden]{display:none}
.lesson .term-card b{color:var(--track)}
.lesson .term-card p{margin:.25rem 0 0;color:var(--muted);font-size:.92rem}

@media (max-width:640px){
  .matters,.doing,.deeper,.lesson .term-card{max-width:none}
  .deeper>summary{padding:.65rem .8rem}
  .deeper-body{padding:0 .8rem .9rem}
}

/* A long card must never animate its own height away from the reader. */
@media (prefers-reduced-motion:reduce){
  .deeper>summary{transition:none}
}

/* ------------------------------------------------------------------- courses
   A course is the feed with a beginning and an end. The retention bar is the
   only new visual idea here: four states, sized by how many concepts are in
   each, so the shape is readable before any number is. */
.course-list{display:grid;gap:.6rem;margin-top:1rem}
.course-card{display:block;width:100%;text-align:left;padding:1rem 1.15rem;border-radius:18px;
  background:var(--surface2);border:1px solid var(--line)}
.course-card:hover{border-color:var(--accent)}
#modalBody .course-card h2{font:800 1.15rem 'Manrope',sans-serif;letter-spacing:-.02em;
  margin:0 0 .3rem;color:var(--ink);text-transform:none}
.course-claim{margin:0 0 .6rem;color:var(--muted);font-size:.92rem}
.course-state{margin:0 0 .4rem;color:var(--muted);font-size:.8rem}
.course-baseline{margin:.2rem 0 .8rem;color:var(--muted)}

.framing-choice{display:grid;gap:.6rem;margin:1rem 0}
.framing{display:block;width:100%;text-align:left;padding:1rem 1.15rem;border-radius:18px;
  background:var(--surface2);border:1px solid var(--line)}
.framing:hover{border-color:var(--accent)}
#modalBody .framing h2{font:800 1.05rem 'Manrope',sans-serif;margin:0 0 .3rem;
  color:var(--ink);text-transform:none;letter-spacing:-.02em}
.framing p{margin:0;color:var(--muted);font-size:.92rem}

.retention-bar{display:flex;gap:2px;height:10px;border-radius:999px;overflow:hidden;
  background:var(--surface2);margin:.5rem 0}
.retention-bar span{display:block}
.is-retained{background:#2cad7d}
.is-learning{background:var(--accent)}
.is-shaky{background:#e8a33d}
.is-untested{background:var(--line)}
.retention-key{list-style:none;padding:0;margin:.6rem 0 0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.35rem .8rem}
.retention-key li{display:flex;align-items:center;gap:.45rem;font-size:.85rem;color:var(--muted)}
.retention-key span{width:10px;height:10px;border-radius:3px;flex:none}
.retention-key b{color:var(--ink);font-variant-numeric:tabular-nums}

.baseline-prompt{font-size:clamp(1.3rem,3.4vw,1.9rem)!important;line-height:1.25}
.baseline-options{display:grid;gap:.5rem;margin:1rem 0}
.baseline-option{display:flex;gap:.7rem;align-items:flex-start;text-align:left;width:100%;
  padding:.8rem .95rem;border-radius:14px;background:var(--surface2);border:1px solid var(--line)}
.baseline-option:hover{border-color:var(--accent)}
.baseline-option.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent),transparent 86%)}
.baseline-option b{color:var(--accent);flex:none;font-variant-numeric:tabular-nums}
.baseline-review{margin:.6rem 0 0;padding-left:1.1rem}
.baseline-review li{margin-bottom:.9rem}
.baseline-q{margin:0 0 .25rem;color:var(--ink);font-size:.92rem}
.baseline-a{margin:0;color:var(--muted);font-size:.88rem}

.transfer-done{margin:.8rem 0 .3rem;color:var(--muted);font-size:.85rem}
.transfer-note{margin:0;padding:.8rem .95rem;border-left:3px solid var(--accent);
  background:var(--surface2);border-radius:0 12px 12px 0;color:var(--ink)}
textarea.gloss-search{resize:vertical;min-height:4.5rem;font:inherit}

/* ------------------------------------------------------------- reading a card
   One lesson, on its own. Wider measure, larger body text, no snapping, and
   none of the chrome that exists to help you choose what to read next. */
body.is-reading #feed{scroll-snap-type:none;overscroll-behavior:contain}
body.is-reading .lesson:not(.reading){display:none}
body.is-reading .floating-menu{display:none!important}
body.is-reading .swipe-hint{display:none}

.lesson.reading{min-height:auto;align-content:start;padding-top:1.2rem;padding-bottom:1.4rem;cursor:auto;overflow:visible}
.lesson.reading .lesson-content{width:min(680px,100%)}
.lesson.reading h2{font-size:clamp(2.1rem,5.2vw,3.6rem)}
.lesson.reading .hook{font-size:clamp(1.05rem,1.7vw,1.25rem)}
.lesson.reading .lesson-grid{grid-template-columns:1fr}
.lesson.reading .idea,.lesson.reading .example,.lesson.reading .why,
.lesson.reading .action,.lesson.reading .deeper-body p{font-size:1.02rem;line-height:1.72}
.lesson.reading .deeper{background:transparent}
.lesson.reading .deeper>summary{cursor:default}

/* A card in the feed advertises that it opens; the one being read does not. */
body:not(.is-reading) .lesson{cursor:pointer}
body:not(.is-reading) .lesson:hover .lesson-content::after{opacity:.75}
.lesson-content{position:relative}
body:not(.is-reading) .lesson-content::after{
  content:'Tap to read';position:absolute;top:-.2rem;right:0;font-size:.66rem;
  text-transform:uppercase;letter-spacing:.12em;color:var(--muted);opacity:0;
  transition:opacity .18s;pointer-events:none}

.reading-back{
  display:block;width:calc(100% + 2 * clamp(1rem,3.5vw,2rem));
  margin:-1.6rem calc(-1 * clamp(1rem,3.5vw,2rem)) 1rem;
  padding:.85rem clamp(1rem,3.5vw,2rem);
  text-align:left;font-size:.85rem;color:var(--muted);
  background:var(--surface);border:0;border-bottom:1px solid var(--line);
  border-radius:26px 26px 0 0}
@supports (backdrop-filter:blur(1px)){
  .reading-back{background:color-mix(in srgb,var(--surface),transparent 12%);backdrop-filter:blur(14px)}
}
.reading-back:hover{color:var(--ink);background:var(--surface2);transform:none}

@media (max-width:640px){
  .lesson.reading{padding-top:1rem}
  /* No hover on touch, so the hint would sit there permanently saying nothing. */
  body:not(.is-reading) .lesson-content::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  body:not(.is-reading) .lesson:hover .lesson-content::after{transition:none}
}
.swipe-hint b{color:var(--track);font-weight:700;margin-right:.55rem}

/* -------------------------------------------------- the card that came forward
   Reading mode hid the other cards, which is not the same as showing that this
   one moved. It now sits on its own surface, lifted, edged in the track's colour
   so the change is unmistakable and the subject is still legible at a glance. */
.lesson.reading .lesson-content{
  background:color-mix(in srgb,var(--surface),transparent 6%);
  border:1px solid color-mix(in srgb,var(--track),var(--line) 55%);
  border-radius:26px;
  padding:1.6rem clamp(1rem,3.5vw,2rem) .2rem;
  box-shadow:0 26px 70px var(--shadow),
             0 0 0 1px color-mix(in srgb,var(--track),transparent 62%),
             0 0 30px color-mix(in srgb,var(--accent),transparent 62%),
             0 0 90px color-mix(in srgb,var(--accent),transparent 80%);
}
.lesson.reading::before{opacity:.55}
.lesson.reading .visual{opacity:.35}

@media (prefers-reduced-motion:no-preference){
  .lesson.reading .lesson-content{animation:lift .26s cubic-bezier(.2,.7,.3,1) both}
  @keyframes lift{from{transform:translateY(10px) scale(.985);opacity:.4}to{transform:none;opacity:1}}
}

/* The actions have to stay in reach: a full lesson is longer than a screen, and
   a footer at the bottom of it is a footer nobody finds. */
.lesson.reading footer{
  position:sticky;bottom:0;z-index:3;margin:1.4rem -0.4rem 0;
  padding:.7rem .4rem calc(.7rem + env(safe-area-inset-bottom));
  background:linear-gradient(to top,var(--surface) 72%,transparent);
  border-radius:0 0 24px 24px;justify-content:center
}
.lesson.reading footer::before{
  content:'';position:absolute;left:.9rem;right:.9rem;top:0;height:1px;
  background:linear-gradient(to right,transparent,var(--line),transparent)
}
.lesson.reading footer button{box-shadow:0 4px 16px var(--shadow)}
.lesson.reading .term-card{margin-bottom:.4rem}

.reading-back{position:sticky;top:0;z-index:4}