/* The learner app on the web. Builds on site.css: same tokens, same parts. */
body { min-height: 100dvh; }
/* Balance headings, keep body copy off a one-word last line. Everything in
 * the app is short, so an orphan is a third of a row of noise. */
.app-main h1, .app-main h2, .app-main h3, .app-main b { text-wrap: balance; }
.app-main p, .app-main span, .app-main small, .app-main li { text-wrap: pretty; }
#app { min-height: 100dvh; display: flex; flex-direction: column; }
.hidden { display: none !important; }

/* ── Shell ─────────────────────────────────────────────────────────── */
.app-nav { position: sticky; top: 0; z-index: var(--z-nav); height: 64px; background: var(--glass); border-bottom: 1px solid var(--border); }
.app-nav .wrap { height: 100%; display: flex; align-items: center; gap: 18px; }
.app-tabs { position: relative; display: flex; gap: 2px; margin-inline-start: 10px; }
.app-tabs a { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 12px; font-family: var(--font-ui); font-weight: 600; font-size: 14.5px; color: var(--text2); transition: background 140ms, color 140ms; }
.app-tabs a .i { font-size: 18px; }
@media (hover: hover) and (pointer: fine) { .app-tabs a:hover { background: var(--surface2); color: var(--text); } }
.app-tabs a.on { color: var(--teal2); }
.app-tabs.has-on a.on { background: transparent; }
.app-tabs:not(.has-on) a.on { background: var(--teal-soft); }
:root[data-theme="dark"] .app-tabs a.on { color: var(--teal); }
.app-right { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-family: var(--font-ui); font-size: 13.5px; font-weight: 700; }
.pill .i { font-size: 16px; }
.pill.streak { color: var(--amber-ink); }
:root[data-theme="dark"] .pill.streak { color: var(--amber); }
.pill.xp { color: var(--teal2); }
:root[data-theme="dark"] .pill.xp { color: var(--teal); }
.avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--teal), var(--teal2)); color: #fff; font-family: var(--font-ui); font-weight: 800; font-size: 15px; overflow: hidden; border: 0; cursor: pointer; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.app-dock { display: none; }
@media (max-width: 760px) {
  .app-tabs, .app-right .pill { display: none; }
  .app-dock { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: var(--z-nav); height: 64px; display: flex; justify-content: space-around; align-items: center; border-radius: 999px; background: color-mix(in srgb, var(--bg) 88%, transparent); border: 1px solid var(--border); box-shadow: var(--shadow-lg); padding: 0 6px; }
  .app-dock a { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; display: grid; justify-items: center; gap: 3px; color: var(--muted); font-family: var(--font-ui); font-size: 10.5px; font-weight: 700; padding: 6px 4px; border-radius: 999px; transition: color 160ms ease, transform 120ms var(--ease-out); }
  .app-dock a:active { transform: scale(0.94); }
  .app-dock a .i { font-size: 22px; }
  .app-dock a.on { color: var(--teal2); }
  :root[data-theme="dark"] .app-dock a.on { color: var(--teal); }
  .app-main { padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
}
/* Onboarding: no tabs, no dock, no way to wander off half-answered. The bar
 * keeps the mark and the avatar so it still reads as the same app. */
body.solo .app-tabs, body.solo .app-dock, body.solo .app-right .pill { display: none !important; }
body.solo .app-main { padding-bottom: max(32px, env(safe-area-inset-bottom)) !important; }

.app-main { flex: 1; padding: 24px 0 64px; }
.page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; animation: pop 220ms var(--ease-out); }
/* A horizontal scroller must never widen the page: bound every track. */
.page > *, .page section > *, .onb2 > *, .reader > *, .quiz > *, .cards > *, .mode-page > *, .player-page > * { min-width: 0; }
.page-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-title h1 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; }
.page-title p { color: var(--text2); }
.sec-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sec-title h2 { font-size: 20px; }
.sec-title a { font-family: var(--font-ui); font-weight: 700; font-size: 14px; color: var(--teal2); display: inline-flex; align-items: center; gap: 4px; }
:root[data-theme="dark"] .sec-title a { color: var(--teal); }
.menu { position: absolute; right: 0; top: 46px; min-width: 220px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 6px; display: none; z-index: var(--z-menu); }
[dir="rtl"] .menu { right: auto; left: 0; }
.menu.open { display: block; animation: pop 200ms; }
.menu a, .menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 10px; font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--text); text-align: start; }
@media (hover: hover) and (pointer: fine) { .menu a:hover, .menu button:hover { background: var(--surface2); } }
.menu .who { padding: 10px 12px 6px; font-size: 12.5px; color: var(--muted); border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.menu .who b { display: block; color: var(--text); font-size: 14px; }
.rel { position: relative; }

/* ── Home ──────────────────────────────────────────────────────────── */
.home-top { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; }
@media (max-width: 900px) { .home-top { grid-template-columns: 1fr; } }
.goal { display: grid; grid-template-columns: 84px 1fr; gap: 18px; align-items: center; }
.ring { position: relative; width: 84px; height: 84px; }
.ring svg { width: 84px; height: 84px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 8; stroke-linecap: round; }
.ring .bg { stroke: var(--border); }
.ring .fg { stroke: var(--teal); transition: stroke-dashoffset 900ms cubic-bezier(.2,.8,.2,1); }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 17px; font-weight: 800; }
.goal .gt { font-family: var(--font-ui); font-size: 13px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.goal .gv { font-family: var(--font-display); font-size: 22px; font-weight: 800; margin: 2px 0; }
.goal .gs { font-size: 14px; color: var(--text2); }
.stat3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat3 .card { padding: 16px; display: grid; gap: 4px; }
.stat3 .card .i { font-size: 22px; }
.stat3 b { font-family: var(--font-display); font-size: 24px; font-weight: 800; }
.stat3 span { font-family: var(--font-ui); font-size: 12.5px; color: var(--muted); }
.stat3 .streak .i { color: var(--amber-ink); } .stat3 .xpc .i { color: var(--teal2); } .stat3 .coin .i { color: var(--violet); }
:root[data-theme="dark"] .stat3 .streak .i { color: var(--amber); } :root[data-theme="dark"] .stat3 .xpc .i { color: var(--teal); }
.cont { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .cont { grid-template-columns: 1fr; } }
.cont .card { display: grid; grid-template-columns: 64px 1fr; gap: 14px; padding: 14px; align-items: center; }
.cont .cover { width: 64px; }
.cont .cover .t, .cont .cover .glyph { display: none; }
.cont b { font-family: var(--font-ui); font-size: 14.5px; display: block; line-height: 1.3; }
.cont .p { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-family: var(--font-ui); font-size: 12px; color: var(--muted); }
.bar { flex: 1; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--teal); border-radius: 3px; }
.reco .book .why { font-family: var(--font-ui); font-size: 11.5px; color: var(--teal2); font-weight: 700; }
:root[data-theme="dark"] .reco .book .why { color: var(--teal); }
.overview { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 700px) { .overview { grid-template-columns: repeat(2, 1fr); } }
.overview .card { padding: 14px 16px; }
.overview b { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 800; }
.overview span { font-family: var(--font-ui); font-size: 12.5px; color: var(--muted); }

/* ── Book page ─────────────────────────────────────────────────────── */
.actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.action { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); text-align: start; transition: transform 160ms, box-shadow 160ms, border-color 160ms; }
@media (hover: hover) and (pointer: fine) { .action:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--border2); } }
.action .ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.action .ic .i { font-size: 20px; }
.action b { display: block; font-family: var(--font-ui); font-size: 14.5px; }
.action span { display: block; font-size: 12.5px; color: var(--muted); }
.action.done .ic { background: rgba(63, 191, 127, 0.14); color: var(--green); }
.action.lock { opacity: 0.8; }

/* ── Reader ────────────────────────────────────────────────────────── */
.reader { max-width: 720px; margin-inline: auto; display: grid; gap: 22px; }
.reader .top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.reader .top .bar { max-width: 200px; }
.reader h1 { font-size: clamp(26px, 3.4vw, 34px); }
.reader .kicker2 { font-family: var(--font-ui); font-size: 13px; color: var(--muted); font-weight: 600; }
.prose { font-size: var(--reader-size, 18px); line-height: 1.7; color: var(--text); }
.prose p { margin: 0 0 1.1em; }
.reader .nav { display: flex; justify-content: space-between; gap: 10px; padding-top: 8px; border-top: 1px solid var(--border); }
.font-btns { display: inline-flex; gap: 4px; }
.font-btns button { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); font-family: var(--font-ui); font-weight: 700; }
.done-card { text-align: center; display: grid; gap: 12px; justify-items: center; padding: 36px 24px; }
.done-card .big-ic { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; background: var(--teal-soft); color: var(--teal2); }
.done-card .big-ic .i { font-size: 34px; }
.reward { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--amber-soft); color: #9A6413; font-family: var(--font-ui); font-weight: 800; font-size: 14px; }
:root[data-theme="dark"] .reward { color: var(--amber); }

/* ── Quiz ──────────────────────────────────────────────────────────── */
.quiz { max-width: 680px; margin-inline: auto; display: grid; gap: 18px; }
.quiz .qtext { font-family: var(--font-display); font-size: clamp(19px, 2.4vw, 24px); font-weight: 700; line-height: 1.3; }
.quiz .expl { display: none; }
.quiz.answered .expl { display: block; }
.result { display: grid; gap: 14px; justify-items: center; text-align: center; padding: 28px 20px; }
.result .score { font-family: var(--font-display); font-size: 56px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.result.pass .score { color: var(--teal2); } :root[data-theme="dark"] .result.pass .score { color: var(--teal); }
.result.fail .score { color: var(--rose); }

/* ── Flashcards ────────────────────────────────────────────────────── */
.cards { max-width: 620px; margin-inline: auto; display: grid; gap: 18px; }
.flash { perspective: 1200px; height: 320px; }
.flash .inner { position: relative; width: 100%; height: 100%; transition: transform 300ms var(--ease-in-out); transform-style: preserve-3d; cursor: pointer; }
.flash.flipped .inner { transform: rotateY(180deg); }
.flash .face { position: absolute; inset: 0; display: grid; place-items: center; padding: 28px; text-align: center; border-radius: var(--r-xl); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); -webkit-backface-visibility: hidden; backface-visibility: hidden; font-size: 19px; line-height: 1.5; }
.flash .face.back { transform: rotateY(180deg); background: var(--teal-soft); border-color: rgba(24, 184, 166, 0.35); }
.flash .hint { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; font-family: var(--font-ui); font-size: 12px; color: var(--muted); }
.rate { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rate button { height: 48px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); font-family: var(--font-ui); font-weight: 700; font-size: 14px; transition: transform 140ms; }
@media (hover: hover) and (pointer: fine) { .rate button:hover { transform: translateY(-1px); } }
.rate button:active { transform: scale(0.97); }
.rate .again { color: var(--rose); } .rate .hard { color: var(--amber-ink); } .rate .good { color: var(--teal2); } .rate .easy { color: var(--green); }
:root[data-theme="dark"] .rate .good { color: var(--teal); }

/* ── Onboarding ────────────────────────────────────────────────────── */
.onb { max-width: 640px; margin-inline: auto; display: grid; gap: 24px; }
.opts { display: flex; gap: 8px; flex-wrap: wrap; }
.mins { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mins button { height: 64px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); font-family: var(--font-display); font-weight: 800; font-size: 20px; }
.mins button.on { border-color: var(--teal); background: var(--teal-soft); color: var(--teal2); }

/* ── Profile ───────────────────────────────────────────────────────── */
.prof-head { display: flex; align-items: center; gap: 18px; }
.prof-head .avatar { width: 72px; height: 72px; font-size: 28px; }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.badge { display: grid; justify-items: center; gap: 8px; padding: 16px 10px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); text-align: center; font-family: var(--font-ui); font-size: 12.5px; font-weight: 700; }
.badge .ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--amber-soft); color: #9A6413; }
.badge .ic .i { font-size: 22px; }
.badge.off { opacity: 0.45; filter: grayscale(1); }
.list { display: grid; gap: 8px; }
.list .card { padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.list .card .i { font-size: 20px; color: var(--muted); }
.list .card b { font-family: var(--font-ui); font-size: 14.5px; flex: 1; }
.toasts { position: fixed; left: 0; right: 0; bottom: calc(24px + env(safe-area-inset-bottom)); height: 0; z-index: var(--z-toast); pointer-events: none; view-transition-name: toasts; }
@media (max-width: 760px) { .toasts { bottom: calc(92px + env(safe-area-inset-bottom)); } }
/* Sonner's shape: absolute at the bottom, each one lifted by the ones below
 * it via transform, so a new toast never reflows the stack. */
.toast { position: absolute; left: 50%; bottom: 0; max-width: min(92vw, 420px); background: var(--text); color: var(--bg); padding: 12px 18px; border-radius: 999px; font-family: var(--font-ui); font-weight: 700; font-size: 14px; opacity: 0; transition: opacity 200ms ease, transform 360ms var(--ease-out); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: var(--shadow-lg); }
.toast.on { opacity: 1; }
.center { display: grid; place-items: center; min-height: 50dvh; text-align: center; gap: 12px; color: var(--muted); }
.spin { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--teal); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Bits AI ───────────────────────────────────────────────────────── */
.ai-page { display: grid; grid-template-columns: 260px 1fr; gap: 16px; min-height: calc(100dvh - 150px); }
@media (max-width: 900px) { .ai-page { grid-template-columns: 1fr; } .ai-side { display: none; } }
.ai-side { padding: 12px; display: grid; gap: 10px; align-content: start; }
.ai-threads { display: grid; gap: 2px; }
.thread { display: grid; gap: 2px; padding: 10px 10px; border-radius: 12px; text-align: start; }
@media (hover: hover) and (pointer: fine) { .thread:hover { background: var(--surface2); } }
.thread.on { background: var(--teal-soft); }
.thread b { font-family: var(--font-ui); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread span { font-size: 12px; color: var(--muted); }
.ai-main { padding: 0; display: flex; flex-direction: column; min-height: 520px; overflow: hidden; }
.ai-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.ctxsel { display: flex; align-items: center; gap: 8px; }
.ctxsel select { height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--border2); background: var(--surface); color: var(--text); font: inherit; font-size: 16px; max-width: 260px; }
.usage { display: flex; align-items: center; gap: 10px; }
.ai-msgs { flex: 1; overflow: auto; padding: 18px; display: grid; gap: 14px; align-content: start; }
.ai-empty { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 40px 16px; max-width: 520px; margin: auto; }
.ai-empty .big-ic { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: var(--violet-soft); color: var(--violet); }
.ai-empty .big-ic .i { font-size: 30px; }
.msg .ctxl { text-transform: none; letter-spacing: 0; color: var(--muted); font-weight: 600; }
.mdb p { margin: 0 0 0.7em; } .mdb p:last-child { margin: 0; }
.mdb ul, .mdb ol { padding-inline-start: 18px; margin: 4px 0 8px; list-style: disc; } .mdb ol { list-style: decimal; }
.mdb li { margin: 3px 0; }
.mdb code { font-family: ui-monospace, monospace; font-size: 0.92em; background: var(--surface2); padding: 1px 5px; border-radius: 6px; }
.mdb .h { display: block; margin: 8px 0 4px; }
.mdb .err { color: var(--rose); }
.composer { display: flex; gap: 10px; align-items: flex-end; padding: 12px 14px; border-top: 1px solid var(--border); }
.composer textarea { flex: 1; resize: none; border: 1px solid var(--border2); border-radius: 14px; padding: 12px 14px; font: inherit; font-size: 16px; background: var(--bg); color: var(--text); outline: none; max-height: 160px; }
.composer textarea:focus { border-color: var(--teal); box-shadow: var(--ring); }
.composer .btn-icon { width: 46px; height: 46px; border-radius: 14px; }

/* ── AudioBits ─────────────────────────────────────────────────────── */
.player-page { display: grid; gap: 16px; max-width: 860px; margin-inline: auto; }
.player-hero { display: grid; grid-template-columns: 160px 1fr; gap: 24px; align-items: center; }
@media (max-width: 640px) { .player-hero { grid-template-columns: 1fr; } .ph-cover { width: 140px; } }
.ph-main { display: grid; gap: 10px; }
.wave { display: flex; align-items: flex-end; gap: 3px; height: 40px; }
.wave i { width: 4px; border-radius: 2px; background: var(--teal); height: 100%; transform-origin: bottom; transform: scaleY(0.25); opacity: 0.5; }
.wave.on i { animation: wave 1.2s ease-in-out infinite; }
.wave i:nth-child(odd) { animation-duration: 0.9s; } .wave i:nth-child(3n) { animation-duration: 1.5s; }
.scrub { display: flex; align-items: center; gap: 10px; font-family: var(--font-ui); font-size: 12.5px; color: var(--muted); }
.scrub input { flex: 1; accent-color: var(--teal); }
.ph-ctrls { display: flex; align-items: center; gap: 10px; }
.play-big { width: 56px; height: 56px; border-radius: 50%; background: var(--teal); color: #05201C; display: grid; place-items: center; box-shadow: 0 10px 24px -10px rgba(24,184,166,.8); transition: transform 140ms; }
@media (hover: hover) and (pointer: fine) { .play-big:hover { transform: scale(1.04); } }
.play-big:active { transform: scale(0.95); }
.play-big .i { font-size: 24px; }
.tracks { display: grid; }
.tracks li { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .tracks li:hover { background: var(--surface2); } }
.tracks li.on { background: var(--teal-soft); }
.tracks li.lock { opacity: 0.5; cursor: default; }
.tracks .n { font-family: var(--font-ui); font-size: 12.5px; font-weight: 800; color: var(--muted); display: grid; place-items: center; }
.tracks .tt { font-family: var(--font-ui); font-size: 14px; font-weight: 600; }
.tracks .td { font-family: var(--font-ui); font-size: 12.5px; color: var(--muted); }

/* ── Modes ─────────────────────────────────────────────────────────── */
.mode-card { display: grid; gap: 10px; align-content: start; }
.mode-card .go { font-family: var(--font-ui); font-weight: 700; font-size: 14px; color: var(--teal2); display: inline-flex; align-items: center; gap: 4px; }
:root[data-theme="dark"] .mode-card .go { color: var(--teal); }
.mode-page { max-width: 760px; margin-inline: auto; display: grid; gap: 18px; }
.boards { display: grid; gap: 16px; }
.rv-in { animation: pop 420ms cubic-bezier(.2,.8,.2,1) both; }
.eq { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.eq .part { padding: 8px 12px; border-radius: 12px; background: var(--surface2); font-family: var(--font-ui); font-weight: 700; font-size: 14px; }
.eq .part.res { background: var(--teal-soft); color: var(--teal2); }
.eq .op { font-family: var(--font-display); font-weight: 800; color: var(--muted); }
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.pillar { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface2); border-top: 4px solid var(--teal); }
.pillar b { display: block; font-family: var(--font-ui); font-size: 14px; margin-bottom: 4px; }
.pillar span { font-size: 13px; color: var(--text2); }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .compare { grid-template-columns: 1fr; } }
.compare > div { padding: 14px; border-radius: 14px; border: 1px solid var(--border); }
.compare .side-l { background: rgba(242,109,109,.08); } .compare .side-r { background: var(--teal-soft); }
.compare b { display: block; font-family: var(--font-ui); margin-bottom: 8px; }
.compare li { font-size: 14px; color: var(--text2); padding: 3px 0 3px 14px; position: relative; }
.compare li::before { content: ""; position: absolute; left: 0; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--border2); }
.flow.loop li:last-child::after { display: none; }
.big-map .branches { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.big-map .branch li { cursor: pointer; }
.big-map .branch li .ln { display: none; color: var(--text2); font-size: 12.5px; margin-top: 3px; }
.big-map .branch li.open .ln { display: block; animation: pop 200ms; }
.big-map .branch li.open .ll { color: var(--text); font-weight: 600; }
.blank { color: var(--teal2); font-weight: 800; letter-spacing: 0.1em; }
.order { display: grid; gap: 8px; }
.order .opt.picked { border-color: var(--teal); background: var(--teal-soft); }
.order .opt .k { background: var(--surface); }
.expl.on { display: block; }
.apply { width: 100%; border: 1px solid var(--border2); border-radius: 14px; padding: 12px 14px; font: inherit; font-size: 15px; background: var(--bg); color: var(--text); outline: none; resize: vertical; }
.apply:focus { border-color: var(--teal); box-shadow: var(--ring); }
.checklist { display: grid; gap: 6px; margin-top: 10px; }
.checklist li label { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.checklist input { accent-color: var(--teal); margin-top: 4px; }
.scen { gap: 14px; }
.q .opt.ok { border-color: var(--amber); background: var(--amber-soft); }
.outcome { display: grid; gap: 10px; padding: 14px; border-radius: 14px; background: var(--surface2); animation: pop 240ms; }
.outcome b { font-family: var(--font-ui); font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.daylist { display: grid; gap: 10px; }
.day { display: grid; gap: 10px; padding: 18px; }
.day.done { opacity: 0.75; }
.day p { color: var(--text2); }

.week { padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wk { display: flex; gap: 8px; }
.wd { display: grid; justify-items: center; gap: 4px; }
.wd i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--surface2); color: var(--muted); border: 1px solid var(--border); }
.wd i .i { font-size: 16px; }
.wd.on i { background: var(--amber-soft); color: var(--amber-ink); border-color: rgba(242,178,74,.5); }
:root[data-theme="dark"] .wd.on i { color: var(--amber); }
.wd.today i { box-shadow: var(--ring); }
.wd b { font-family: var(--font-ui); font-size: 11px; color: var(--muted); }

.stat3 b, .overview b, .goal .gv, .ring b, .scrub, .usage, .pill { font-variant-numeric: tabular-nums; }
.menu { transform-origin: top right; }
[dir="rtl"] .menu { transform-origin: top left; }
@keyframes menuIn { from { opacity: 0; transform: scale(0.96) translateY(-4px); } to { opacity: 1; transform: none; } }
.menu.open { animation: menuIn 160ms var(--ease-out); }

/* ══════════════════════════════════════════════════════════════════
   Round three: challenges, plans, courses, Your Books, settings, DNA
   ══════════════════════════════════════════════════════════════════ */
:root { --gold: #C98A16; --gold-soft: rgba(242, 178, 74, 0.16); --green2: #1B8F59; }
:root[data-theme="dark"] { --gold: #F2B24A; --green2: #3FBF7F; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --gold: #F2B24A; --green2: #3FBF7F; } }

.clamp1 { display: inline-block; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
/* `.center` is the full-height loading box, so centred rows get their own name. */
.row.rowc, .chips.rowc { justify-content: center; }
.spin.sm { width: 16px; height: 16px; border-width: 2px; display: inline-block; vertical-align: -3px; }
.btn-danger { background: var(--rose); color: #fff; }
@media (hover: hover) and (pointer: fine) { .btn-danger:hover { background: #E45757; } }
.cnt { font-variant-numeric: tabular-nums; opacity: 0.7; font-weight: 700; }

.q .opt { text-align: start; }
.app-main .btn[disabled], .app-main .btn:disabled { opacity: 0.55; pointer-events: none; }
/* Entrances: 40 ms apart, never blocking a tap. */
[data-stagger] > * { animation: pop 320ms var(--ease-out) both; animation-delay: var(--d, 0ms); }

/* ── Loading skeletons and empty states ───────────────────────────── */
.sk { display: grid; gap: 10px; }
.sk-row { position: relative; overflow: hidden; height: 76px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); }
.sk-row::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, var(--surface2) 50%, transparent 80%); transform: translateX(-100%); animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
.empty2 { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 40px 20px; border: 1px dashed var(--border2); border-radius: var(--r-lg); background: var(--surface); }
.empty2 .big-ic { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--teal-soft); color: var(--teal2); }
:root[data-theme="dark"] .empty2 .big-ic { color: var(--teal); }
.empty2 .big-ic .i { font-size: 26px; }
.empty2 p { color: var(--text2); max-width: 46ch; }
.err-slot { margin: 10px 0 0; }
.err-slot .err { display: none; }
.err-slot.bad .err, .field.bad .err { display: block; }

/* ── Progress rows ────────────────────────────────────────────────── */
.rows { display: grid; gap: 10px; }
.prow { display: grid; grid-template-columns: 48px 1fr auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); transition: transform 130ms var(--ease-out), border-color 140ms ease, box-shadow 160ms ease; }
@media (hover: hover) and (pointer: fine) { .prow:hover { border-color: var(--border2); box-shadow: var(--shadow-lg); } }
.prow:active { transform: scale(0.985); }
.prow .cover { width: 48px; border-radius: 8px; }
.prow .cover .t, .prow .cover .glyph { display: none; }
.pr-main { min-width: 0; display: grid; gap: 5px; }
.pr-main b { font-family: var(--font-ui); font-size: 14.5px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-sub { font-family: var(--font-ui); font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pr-go { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--teal-soft); color: var(--teal2); flex: none; }
:root[data-theme="dark"] .pr-go { color: var(--teal); }
.pr-go.done { background: rgba(63, 191, 127, 0.16); color: var(--green2); }
.prow.lock { opacity: 0.72; }
.prow.lock .pr-go { background: var(--gold-soft); color: var(--gold); }
.prow.on .pr-go { background: rgba(63, 191, 127, 0.16); color: var(--green2); }

.listrow, .planrow { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; padding: 16px 18px; }
.listrow .ic, .planrow .ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; margin: 0; }
.listrow b, .planrow b { display: block; font-family: var(--font-ui); font-size: 15px; }
.listrow span, .planrow span { display: block; font-size: 13px; color: var(--muted); }
.ic.teal { background: var(--teal-soft); color: var(--teal2); }
.ic.violet { background: var(--violet-soft); color: var(--violet); }
.ic.amber { background: var(--amber-soft); color: var(--gold); }
.ic.gold { background: var(--gold-soft); color: var(--gold); }
.ic.green { background: rgba(63, 191, 127, 0.16); color: var(--green2); }
:root[data-theme="dark"] .ic.teal { color: var(--teal); }

/* ── Home extras ──────────────────────────────────────────────────── */
.rail { display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; margin: 0; padding: 4px 0 10px; scrollbar-width: none; }
.lab-card { display: grid; grid-template-columns: 46px 1fr auto; gap: 14px; align-items: center; padding: 16px 18px; }
.lab-card .ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; margin: 0; }
.lab-card b { display: block; font-family: var(--font-ui); font-size: 15px; }
.lab-card span { display: block; font-size: 13px; color: var(--muted); }
.stat4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 640px) { .stat4 { grid-template-columns: repeat(2, 1fr); } }
.stat4 .card { padding: 14px 16px; text-align: center; }
.stat4 b { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.stat4 span { font-family: var(--font-ui); font-size: 12.5px; color: var(--muted); }

/* ── Segmented tabs with a sliding indicator (transform only) ─────── */
.segtabs { position: relative; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 0; padding: 4px; border-radius: 999px; background: var(--surface2); border: 1px solid var(--border); overflow: hidden; }
.segtabs-ind { position: absolute; top: 4px; bottom: 4px; inset-inline-start: 4px; width: calc((100% - 8px) / var(--n, 3)); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow); transform: translateX(calc(var(--i, 0) * 100%)); transition: transform 240ms var(--ease-out); }
[dir="rtl"] .segtabs-ind { transform: translateX(calc(var(--i, 0) * -100%)); }
.segtabs a { position: relative; z-index: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 7px; height: 40px; border-radius: 999px; font-family: var(--font-ui); font-weight: 700; font-size: 13.5px; color: var(--muted); transition: color 160ms ease, transform 120ms var(--ease-out); }
.segtabs a[aria-selected="true"] { color: var(--text); }
.segtabs a:active { transform: scale(0.97); }
.segtabs a .i { font-size: 17px; }
/* Four unlabelled glyphs are a guessing game. The label is the information;
 * the icon is decoration, so the icon is what goes when space runs out. */
@media (max-width: 480px) { .segtabs a .i { display: none; } .segtabs a { font-size: 13px; } }
@media (max-width: 340px) { .segtabs a { font-size: 12px; } }
/* Three chips, and all three matter — they wrap rather than hide a tab off
 * the right edge, which reads as a bug rather than as a scroller. */
.countchips { display: flex; flex-wrap: wrap; gap: 8px; }
.countchips .chip { flex: none; }
@media (max-width: 380px) { .countchips .chip { padding: 0 12px; font-size: 13px; } }

/* ── Certificates ─────────────────────────────────────────────────── */
.certs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.cert { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: center; padding: 16px 18px; border-radius: var(--r-lg); border: 1px solid rgba(242, 178, 74, 0.42); background: var(--gold-soft); transition: transform 130ms var(--ease-out); }
.cert:active { transform: scale(0.985); }
.cert .ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--surface); color: var(--gold); }
.cert .ic .i { font-size: 24px; }
.cert b { display: block; font-family: var(--font-ui); font-size: 15px; }
.cert span { display: block; font-size: 12.5px; color: var(--text2); }
.cert .cid { font-family: ui-monospace, monospace; font-size: 12px; color: var(--gold); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

/* ── Profile ──────────────────────────────────────────────────────── */
.prof-head { align-items: center; }
.lvl-ring { position: relative; width: 80px; height: 80px; flex: none; }
.lvl-ring svg { width: 80px; height: 80px; transform: rotate(-90deg); }
.lvl-ring circle { fill: none; stroke-width: 5; stroke-linecap: round; }
.lvl-ring .bg { stroke: var(--border); }
.lvl-ring .fg { stroke: var(--teal); transition: stroke-dashoffset 900ms var(--ease-out); }
.lvl-ring .avatar { position: absolute; inset: 10px; width: auto; height: auto; font-size: 24px; }
.ph-text { min-width: 0; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 760px) { .metrics { grid-template-columns: repeat(2, 1fr); } }
.metrics .card { padding: 16px; display: grid; gap: 2px; }
.metrics .card .ic { width: 38px; height: 38px; border-radius: 12px; margin-bottom: 8px; }
.metrics b { font-family: var(--font-display); font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.metrics span { font-family: var(--font-ui); font-size: 12.5px; color: var(--muted); }
.metrics small { font-size: 11.5px; color: var(--muted); }
.skills { display: grid; gap: 12px; }
.skill { display: grid; grid-template-columns: minmax(96px, 1fr) 2fr auto; gap: 12px; align-items: center; }
.skill .sl { display: flex; align-items: center; gap: 7px; font-family: var(--font-ui); font-size: 13.5px; }
.skill .sl .i { color: var(--muted); font-size: 16px; }
.skill .sn { font-family: var(--font-ui); font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ── The "still in English" note ──────────────────────────────────── */
.en-note { display: inline-flex; align-items: center; gap: 5px; margin-inline-start: 10px; padding: 3px 9px; border-radius: 999px; background: var(--surface2); color: var(--muted); font-family: var(--font-ui); font-size: 11.5px; font-weight: 700; vertical-align: middle; }
.translating { display: grid; gap: 12px; justify-items: center; text-align: center; padding: 32px 22px; }
.translating .big-ic { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: var(--violet-soft); color: var(--violet); }
.translating .big-ic .i { font-size: 28px; }
.translating .bar { width: min(320px, 100%); }
.bar i.indet { width: 34%; animation: indet 1.4s var(--ease-in-out) infinite; }
[dir="rtl"] .bar i.indet { animation-name: indet-rtl; }
@keyframes indet { from { transform: translateX(-110%); } to { transform: translateX(310%); } }
@keyframes indet-rtl { from { transform: translateX(110%); } to { transform: translateX(-310%); } }

/* ── Daily challenges ─────────────────────────────────────────────── */
.chal { position: relative; overflow: hidden; padding: 18px; display: grid; gap: 14px; }
.chal-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chal-head .ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--teal-soft); color: var(--teal2); margin: 0; }
:root[data-theme="dark"] .chal-head .ic { color: var(--teal); }
.chal-head b { font-family: var(--font-ui); font-size: 14.5px; }
.chal.all { background: var(--gold-soft); border-color: rgba(242, 178, 74, 0.42); box-shadow: 0 10px 30px -18px rgba(242, 178, 74, 0.9); }
.chal.all .chal-head .ic { background: var(--surface); color: var(--gold); }
.chal-rows { display: grid; gap: 12px; }
.chal-row { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; }
.chal-row .tile { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--teal-soft); color: var(--teal2); }
:root[data-theme="dark"] .chal-row .tile { color: var(--teal); }
.chal-row.on .tile { background: linear-gradient(135deg, var(--teal), var(--violet)); color: #fff; }
.cr-main { min-width: 0; display: grid; gap: 6px; }
.cr-main b { font-family: var(--font-ui); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-bar { display: flex; align-items: center; gap: 8px; }
.cr-n { font-family: var(--font-ui); font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cr-rw { font-family: var(--font-ui); font-size: 12.5px; font-weight: 800; color: var(--violet); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cr-rw.claimed { color: var(--gold); }
.chal-cel { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--surface) 88%, var(--amber)); animation: celIn 240ms var(--ease-out), celOut 520ms var(--ease-out) 1680ms forwards; }
.chal-cel .cel-in { display: grid; justify-items: center; gap: 4px; text-align: center; color: var(--gold); z-index: 1; }
.chal-cel .cel-in .i { font-size: 38px; }
.chal-cel .cel-in b { font-family: var(--font-display); font-size: 18px; }
.chal-cel .cel-in span { font-size: 13px; color: var(--text2); }
.chal-cel .ring { position: absolute; width: 90px; height: 90px; border-radius: 50%; border: 2px solid var(--gold); opacity: 0; animation: shock 1400ms var(--ease-out) infinite; }
.chal-cel .ring.r2 { animation-delay: 280ms; } .chal-cel .ring.r3 { animation-delay: 560ms; }
@keyframes shock { 0% { transform: scale(0.6); opacity: 0.55; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes celIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes celOut { to { opacity: 0; visibility: hidden; } }

/* ── Plans ────────────────────────────────────────────────────────── */
.plans-page { padding-bottom: 96px; }
.plans-hero { display: grid; justify-items: center; gap: 10px; text-align: center; }
.plans-hero .big-ic { width: 62px; height: 62px; border-radius: 20px; display: grid; place-items: center; background: linear-gradient(135deg, var(--teal-soft), var(--violet-soft)); color: var(--teal2); }
:root[data-theme="dark"] .plans-hero .big-ic { color: var(--teal); }
.plans-hero .big-ic .i { font-size: 30px; }
.plans-hero .lead { max-width: 46ch; }
.seg.bill button { height: 38px; padding: 0 16px; font-size: 13.5px; }
.seg.bill .save { margin-inline-start: 6px; color: var(--teal2); font-weight: 800; }
:root[data-theme="dark"] .seg.bill .save { color: var(--teal); }
.plan-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
@media (max-width: 900px) { .plan-cards { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }
.plan2 { position: relative; display: grid; gap: 10px; align-content: start; text-align: start; padding: 24px 22px; border-radius: var(--r-xl); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); transition: transform 140ms var(--ease-out), border-color 160ms ease, box-shadow 200ms ease; }
.plan2:active { transform: scale(0.99); }
.plan2.on { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal), var(--shadow-lg); }
.plan2.professional.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), var(--shadow-lg); }
.plan2 .badge { position: absolute; top: -12px; inset-inline-start: 22px; display: inline-flex; align-items: center; height: 24px; padding: 0 11px; border-radius: 999px; background: var(--teal); color: #05201C; font-family: var(--font-ui); font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; }
.plan2 .badge.cur { background: var(--text); color: var(--bg); }
.plan2 .name { font-family: var(--font-display); font-size: 21px; font-weight: 800; }
.plan2 .tag { color: var(--text2); font-size: 14px; margin-top: -6px; }
.plan2 .perks { display: grid; gap: 9px; margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--border); }
.plan2 .perks li { display: grid; grid-template-columns: 18px 1fr; gap: 9px; align-items: start; font-size: 13.8px; color: var(--text2); }
.plan2 .perks li .i { color: var(--teal2); font-size: 16px; margin-top: 2px; }
:root[data-theme="dark"] .plan2 .perks li .i { color: var(--teal); }
.plans-page .price { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 6px; }
.plans-page .price .amt { font-family: var(--font-display); font-size: 38px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.plans-page .price .per { font-family: var(--font-ui); color: var(--muted); font-weight: 600; font-size: 14px; }
.plans-page .price .sub { grid-column: 1 / -1; font-family: var(--font-ui); font-size: 13px; color: var(--muted); margin-top: 5px; min-height: 1.4em; font-variant-numeric: tabular-nums; }
.plan-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-nav); background: color-mix(in srgb, var(--bg) 88%, transparent); border-top: 1px solid var(--border); padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); }
@media (max-width: 760px) { .plan-sticky { bottom: calc(76px + env(safe-area-inset-bottom)); padding-bottom: 12px; } }
.ps-in { width: min(1180px, 100% - 0px); margin-inline: auto; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.ps-in .btn-lg { min-width: min(320px, 100%); }
.ps-in .btn-lg[disabled] { background: var(--surface2); color: var(--muted); box-shadow: none; pointer-events: none; }
/* The compare table's visually-hidden labels are absolute; without a
   containing block here they escape the scroller and widen the page. */
.plans-page .tbl-wrap { position: relative; }
.losses { display: grid; gap: 8px; margin: 14px 0 4px; }
.losses li { display: grid; grid-template-columns: 18px 1fr; gap: 9px; align-items: start; font-size: 14px; color: var(--text2); }
.losses li .i { color: var(--rose); font-size: 16px; margin-top: 2px; }
.ok-panel, .warn-panel, .soon-panel { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; padding: 18px; }
.ok-panel .i { color: var(--green); font-size: 20px; }
.warn-panel .i, .soon-panel .i { color: var(--gold); font-size: 20px; }
.soon-panel b { display: block; font-family: var(--font-ui); font-size: 15px; margin-bottom: 4px; }
.soon-panel p, .warn-panel p, .ok-panel p { color: var(--text2); font-size: 14.5px; margin-bottom: 10px; }
.code-in { text-transform: uppercase; letter-spacing: 0.14em; font-family: ui-monospace, monospace; font-size: 16px; }
.upgrade-cel { position: fixed; inset: 0; z-index: var(--z-toast); display: grid; place-items: center; pointer-events: none; background: rgba(8, 13, 23, 0.32); animation: celIn 180ms var(--ease-out), celOut 400ms var(--ease-out) 1500ms forwards; }
.uc-card { display: grid; justify-items: center; gap: 6px; padding: 28px 34px; border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-lg); text-align: center; animation: pop 320ms var(--ease-out) both; }
.uc-card .i { font-size: 40px; color: var(--gold); }
.uc-card b { font-family: var(--font-display); font-size: 20px; }
.uc-card span { font-size: 13.5px; color: var(--muted); }

/* ── Courses and lessons ──────────────────────────────────────────── */
.crs-prog { display: flex; align-items: center; gap: 10px; }
.cert-card { display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: center; padding: 18px; border-color: rgba(242, 178, 74, 0.42); background: var(--gold-soft); }
.cert-card .i { font-size: 24px; color: var(--gold); }
.cert-card b { display: block; font-family: var(--font-ui); font-size: 15px; }
.cert-card span { font-family: ui-monospace, monospace; font-size: 12.5px; color: var(--gold); }
.access-note { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; background: var(--gold-soft); color: var(--text2); font-size: 13.5px; margin-bottom: 12px; }
.access-note .i { color: var(--gold); }
.prow.lesson { grid-template-columns: 38px 1fr auto; }
.prow.lesson .ln { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--surface2); color: var(--muted); font-family: var(--font-ui); font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.prow.lesson.on .ln { background: rgba(63, 191, 127, 0.16); color: var(--green2); }
.lesson-page { gap: 20px; }
.lesson-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lesson-top .bar { max-width: 220px; min-width: 90px; }
.lesson-body { max-width: 720px; margin-inline: auto; display: grid; gap: 20px; width: 100%; }
.lesson-body .kicker2 { font-family: var(--font-ui); font-size: 11.5px; font-weight: 800; letter-spacing: 0.1em; color: var(--muted); }
.lesson-body .ls { display: grid; gap: 10px; }
.lesson-body .ls h2 { font-size: 20px; }
.lesson-body .prose { font-size: 16.5px; line-height: 1.7; display: grid; gap: 14px; }
.remember { background: var(--teal-soft); border-color: rgba(24, 184, 166, 0.3); }
.quickcheck { display: grid; gap: 12px; }
.quickcheck .bt { font-family: var(--font-ui); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.quickcheck .qtext { font-family: var(--font-display); font-size: 19px; font-weight: 700; line-height: 1.35; }
.quickcheck .expl { display: none; }
.quickcheck .q.answered .expl { display: block; animation: pop 220ms var(--ease-out); }
.course-cel { position: fixed; inset: 0; z-index: var(--z-auth); display: grid; place-items: center; padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom)); background: rgba(8, 13, 23, 0.6); animation: celIn 220ms var(--ease-out); overflow: auto; }
.cc-card { position: relative; overflow: hidden; width: min(480px, 100%); display: grid; justify-items: center; gap: 12px; text-align: center; padding: 34px 26px; border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-lg); animation: pop 340ms var(--ease-out) both; }
.cc-card .medallion { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-soft); color: var(--gold); border: 2px solid rgba(242, 178, 74, 0.5); }
.cc-card .medallion .i { font-size: 38px; }
.cc-card .cert-id { font-family: ui-monospace, monospace; font-size: 13px; letter-spacing: 0.04em; padding: 8px 14px; border-radius: 10px; background: var(--surface2); color: var(--gold); }
.cc-card .pills { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.reward.gold { background: var(--gold-soft); color: var(--gold); }
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti i { position: absolute; top: -12px; left: var(--x); width: 7px; height: 11px; border-radius: 2px; background: hsl(var(--h) 70% 58%); animation: fall 1500ms var(--ease-out) var(--d) forwards; opacity: 0; }
@keyframes fall { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(420px) rotate(420deg); opacity: 0; } }

/* ── Your books ───────────────────────────────────────────────────── */
.yours-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.yours-head b { font-family: var(--font-display); font-size: 19px; display: block; }
.adddoc { display: grid; align-content: center; justify-items: center; align-self: start; gap: 7px; text-align: center; padding: 18px 12px; aspect-ratio: 0.7; border-radius: 12px; border: 2px dashed var(--border2); background: var(--surface); transition: border-color 150ms ease, background 150ms ease, transform 120ms var(--ease-out); }
.adddoc:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .adddoc:hover { border-color: var(--teal); background: var(--teal-soft); } }
.adddoc .ad-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, var(--teal), var(--violet)); color: #fff; }
.adddoc .ad-ic .i { font-size: 22px; }
.adddoc b { font-family: var(--font-ui); font-size: 14px; }
.adddoc span { font-size: 12px; color: var(--muted); line-height: 1.4; }
.adddoc.busy { border-style: solid; border-color: var(--teal); }
.build-card { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 34px 24px; max-width: 520px; margin-inline: auto; }
.build-card .big-ic { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: linear-gradient(135deg, var(--teal-soft), var(--violet-soft)); color: var(--violet); }
.build-card .big-ic .i { font-size: 30px; }

/* ── Settings ─────────────────────────────────────────────────────── */
.settings section { display: grid; gap: 10px; }
.setrow { display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; }
.setrow > .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--surface2); color: var(--muted); margin: 0; }
.sr-main { min-width: 0; }
.sr-main b { font-family: var(--font-ui); font-size: 14.5px; }
.sr-main .lbl { display: block; font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; color: var(--text2); margin-bottom: 6px; }
.namerow { display: flex; gap: 8px; }
.namerow input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--border2); background: var(--bg); color: var(--text); font: inherit; font-size: 16px; outline: none; transition: border-color 140ms ease, box-shadow 140ms ease; }
.namerow input:focus { border-color: var(--teal); box-shadow: var(--ring); }
.settings .seg button { display: inline-flex; align-items: center; gap: 6px; height: 34px; }
@media (max-width: 560px) { .settings .seg button span:not(.i) { display: none; } .settings .seg button { padding: 0 12px; } }
.switch { position: relative; width: 52px; height: 30px; border-radius: 999px; background: var(--border2); transition: background 180ms ease; flex: none; }
.switch[aria-checked="true"] { background: var(--teal); }
.switch .knob { position: absolute; top: 3px; inset-inline-start: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.28); transition: transform 180ms var(--ease-out); }
.switch[aria-checked="true"] .knob { transform: translateX(22px); }
[dir="rtl"] .switch[aria-checked="true"] .knob { transform: translateX(-22px); }
.switch:active .knob { transform: scale(0.94) translateX(0); }
.switch[aria-checked="true"]:active .knob { transform: scale(0.94) translateX(22px); }
[dir="rtl"] .switch:active .knob { transform: scale(0.94) translateX(0); }
[dir="rtl"] .switch[aria-checked="true"]:active .knob { transform: scale(0.94) translateX(-22px); }
.settings .list .card { display: flex; align-items: center; gap: 12px; }
.list button.card, .list .card b { text-align: start; }
.settings .list .card .i:last-child { margin-inline-start: auto; color: var(--muted); }
.langlist { display: grid; gap: 4px; max-height: 52dvh; overflow: auto; }
.langlist button { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; text-align: start; font-family: var(--font-ui); font-size: 15px; transition: background 140ms ease, transform 110ms var(--ease-out); }
.langlist button:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) { .langlist button:hover { background: var(--surface2); } }
.langlist button small { color: var(--muted); font-size: 12px; text-transform: uppercase; }
.langlist button .i { margin-inline-start: auto; color: var(--teal2); }
.langlist button[aria-checked="true"] { background: var(--teal-soft); }

/* ── Onboarding and Learning DNA ──────────────────────────────────── */
.onb-shell { display: grid; }
.onb-rail { display: none; }
.onb-cta .onb-back { display: none; }
.onb2 { max-width: 640px; margin-inline: auto; display: grid; gap: 22px; align-content: start; min-height: calc(100dvh - 190px); }
.onb-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dots { display: flex; gap: 6px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border2); transition: background 200ms ease, transform 200ms var(--ease-out); }
.dot.past { background: var(--teal2); }
.dot.on { background: var(--teal); transform: scale(1.5); }
.onb-head { display: grid; gap: 8px; }
.onb-head h1 { font-size: clamp(24px, 4vw, 32px); }
.onb-head .lead { font-size: 15.5px; }
.onb-body { display: grid; gap: 12px; }
/* The button sits on a short band of page colour so the options scrolling
 * under it never look like they are bleeding through the label. */
.onb-cta { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom)); display: grid; padding: 22px 0 2px; background: linear-gradient(to top, var(--bg) 72%, transparent); }
.onb-cta .btn { width: 100%; }
/* Dimmed, not see-through: opacity here let the options scroll visibly
 * through the button's own face. */
.onb-cta .btn[disabled] { background: var(--surface2); color: var(--muted); box-shadow: none; pointer-events: none; }
.pickcards { display: grid; gap: 10px; }
.pickcard { position: relative; display: grid; grid-template-columns: 42px 1fr auto; gap: 14px; align-items: center; text-align: start; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); transition: border-color 150ms ease, background 150ms ease, transform 120ms var(--ease-out); }
.pickcard:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) { .pickcard:hover { border-color: var(--border2); } }
.pickcard.on { border-color: var(--teal); background: var(--teal-soft); }
.pickcard .pc-ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--surface2); color: var(--text2); }
.pickcard.on .pc-ic { background: var(--surface); color: var(--teal2); }
.pickcard .pc-ic .i { font-size: 20px; }
.pickcard .pc-main { min-width: 0; }
.pickcard .pc-main b { display: block; font-family: var(--font-ui); font-size: 14.5px; }
.pickcard .pc-main span { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.pickcard .pc-first { font-family: var(--font-ui); font-size: 10.5px; font-weight: 800; color: var(--teal2); background: var(--surface); border-radius: 999px; padding: 3px 8px; }
.pickcard .pc-tick { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--border2); color: transparent; transition: background 150ms ease, color 150ms ease, border-color 150ms ease; }
.pickcard.on .pc-tick { background: var(--teal); border-color: var(--teal); color: #05201C; }
.pickcard .pc-tick .i { font-size: 14px; }
.pickchips .chip { height: 38px; }
.more-btn { justify-self: start; }
.planview { display: grid; gap: 14px; }
.planrows { display: grid; gap: 8px; }
.planrow2 { display: grid; grid-template-columns: minmax(96px, auto) 1fr; gap: 14px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--border); }
.planrow2:last-child { border-bottom: 0; }
.pl-k { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-ui); font-size: 12.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.pl-k .i { font-size: 15px; }
.pl-v { font-family: var(--font-ui); font-size: 14.5px; }
.firstup { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 16px; background: linear-gradient(135deg, var(--teal-soft), var(--violet-soft)); }
.firstup .ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--surface); color: var(--teal2); margin: 0; }
.firstup b { display: block; font-family: var(--font-ui); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.firstup span { display: block; font-family: var(--font-ui); font-size: 14.5px; }
.dna-page { max-width: 720px; margin-inline: auto; }
.dna-step { display: grid; gap: 0; }
.dna-save { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom)); display: grid; gap: 6px; justify-items: stretch; }
.dna-save .btn { width: 100%; }
.dna-save .btn[disabled] { background: var(--surface2); color: var(--muted); box-shadow: none; pointer-events: none; }


/* The phone dock is a fixed pill at the bottom: sticky CTAs sit above it. */
@media (max-width: 760px) {
  .dna-save { bottom: calc(88px + env(safe-area-inset-bottom)); }
}
/* The player controls must wrap before they widen the card. */
.player-hero, .ph-main, .ph-ctrls, .scrub { min-width: 0; }
.ph-ctrls { flex-wrap: wrap; row-gap: 12px; }
@media (max-width: 520px) { .ph-ctrls .seg { margin-inline-start: 0; width: 100%; justify-content: space-between; } .ph-ctrls .seg button { flex: 1; } }
/* ── Sheets and dialogs ───────────────────────────────────────────── */
.sheet2 { position: fixed; inset: 0; z-index: var(--z-auth); display: flex; align-items: flex-end; justify-content: center; background: rgba(8, 13, 23, 0.5); animation: fade-in 160ms var(--ease-out); }
.sheet2-panel { width: 100%; max-height: 88dvh; overflow: auto; overscroll-behavior: contain; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--shadow-lg); padding: 10px 22px calc(22px + env(safe-area-inset-bottom)); animation: sheetUp 260ms var(--ease-out); }
.sheet2.closing { animation: fade-out 140ms var(--ease-out) forwards; }
.sheet2-grip, .sheet2-head { user-select: none; -webkit-user-select: none; touch-action: none; }
.sheet2-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--border2); margin: 0 auto 12px; }
.sheet2-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.sheet2-body { display: grid; gap: 4px; }
.dlg-body { color: var(--text2); font-size: 15px; }
.sheet2-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; flex-wrap: wrap; }
.sheet2-actions .btn { flex: 1 1 auto; justify-content: center; }
@keyframes sheetUp { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade-out { to { opacity: 0; } }
@media (min-width: 720px) {
  .sheet2 { align-items: center; padding: 24px; }
  .sheet2-panel { width: min(520px, 100%); border-radius: var(--r-xl); padding: 18px 26px 24px; animation: pop 240ms var(--ease-out); }
  .sheet2.wide .sheet2-panel { width: min(680px, 100%); }
  .sheet2-grip { display: none; }
  .sheet2-actions .btn { flex: 0 0 auto; }
}
@media (prefers-reduced-transparency: reduce) { .sheet2, .course-cel, .chal-cel { } }

/* ── Craft pass ───────────────────────────────────────────────────── */
.plan2, .pickcard, .adddoc, .switch, .segtabs a, .chip, .prow, .cert, .langlist button, .lab-card, .listrow, .planrow { -webkit-tap-highlight-color: transparent; }
a.card:active, button.card:active, .lab-card:active, .listrow:active, .planrow:active { transform: scale(0.99); }
.stat4 b, .metrics b, .cr-n, .cr-rw, .pr-sub, .price .amt, .cmp .n, .dots, .goal .gv { font-variant-numeric: tabular-nums; }
.app-main { padding-bottom: max(64px, env(safe-area-inset-bottom)); }


/* ── Narrow phones ─────────────────────────────────────────────────── */
/* Every one of these is a grid child whose content would otherwise set the
   track width and push the page past the screen. */
.home-top > *, .goal > *, .stat3 > *, .overview > *, .metrics > *, .stat4 > *,
.actions > *, .action > *, .prow > *, .setrow > *, .listrow > *, .planrow > *,
.lab-card > *, .cert > *, .plan2 > *, .chal-row > *, .skill > * { min-width: 0; }
/* Two columns of text at 320 px is one column of guesswork. */
@media (max-width: 400px) {
  .actions { grid-template-columns: 1fr; }
  .goal { grid-template-columns: 64px 1fr; gap: 14px; }
  .ring, .ring svg { width: 64px; height: 64px; }
  .stat3 .card, .overview .card { padding: 12px 10px; }
  .stat3 b { font-size: 20px; }
}
/* The reader's two controls sit on one row until they cannot. */
.reader .nav { flex-wrap: wrap; }
.reader .nav .btn { flex: 1 1 auto; justify-content: center; }
/* The mode name is the page's heading; it just happens to look like a chip. */
.mode-h1 { font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; line-height: 1; letter-spacing: 0; margin: 0; }
/* The app could not start. One card, centred, with a way on. */
.boot-fail { display: grid; align-content: center; min-height: 100dvh; padding: 24px 0; }

/* Reduce motion: the switch in Settings behaves exactly like the OS setting. */
@media (prefers-reduced-motion: reduce) {
  .page, .rv-in, [data-stagger] > *, .chal-cel, .uc-card, .cc-card, .sheet2-panel, .sheet2, .menu.open, .outcome, .expl, .quickcheck .q.answered .expl { animation: none !important; }
  .confetti, .chal-cel .ring { display: none !important; }
  .chal-cel { animation: celIn 160ms linear, celOut 300ms linear 1700ms forwards !important; }
  .upgrade-cel { animation: celIn 160ms linear, celOut 300ms linear 1500ms forwards !important; }
  .segtabs-ind, .switch .knob, .bar i, .ring .fg, .lvl-ring .fg, .flash .inner { transition-duration: 1ms !important; }
  .sk-row::after { animation: none !important; }
  .bar i.indet { animation: none !important; width: 40% !important; transform: none !important; }
  .wave.on i { animation: none !important; }
}
:root[data-reduce-motion="1"] .page,
:root[data-reduce-motion="1"] .rv-in,
:root[data-reduce-motion="1"] [data-stagger] > *,
:root[data-reduce-motion="1"] .uc-card,
:root[data-reduce-motion="1"] .cc-card,
:root[data-reduce-motion="1"] .sheet2-panel,
:root[data-reduce-motion="1"] .sheet2,
:root[data-reduce-motion="1"] .menu.open,
:root[data-reduce-motion="1"] .outcome,
:root[data-reduce-motion="1"] .expl,
:root[data-reduce-motion="1"] .faq-item .a,
:root[data-reduce-motion="1"] .msg,
:root[data-reduce-motion="1"] .lang-panel,
:root[data-reduce-motion="1"] .auth-card { animation: none !important; }
:root[data-reduce-motion="1"] .confetti,
:root[data-reduce-motion="1"] .chal-cel .ring,
:root[data-reduce-motion="1"] .wave.on i { display: none !important; }
:root[data-reduce-motion="1"] .chal-cel { animation: celIn 160ms linear, celOut 300ms linear 1700ms forwards !important; }
:root[data-reduce-motion="1"] .upgrade-cel { animation: celIn 160ms linear, celOut 300ms linear 1500ms forwards !important; }
:root[data-reduce-motion="1"] .segtabs-ind,
:root[data-reduce-motion="1"] .switch .knob,
:root[data-reduce-motion="1"] .bar i,
:root[data-reduce-motion="1"] .ring .fg,
:root[data-reduce-motion="1"] .lvl-ring .fg,
:root[data-reduce-motion="1"] .flash .inner,
:root[data-reduce-motion="1"] .book,
:root[data-reduce-motion="1"] .card,
:root[data-reduce-motion="1"] .btn,
:root[data-reduce-motion="1"] .opt,
:root[data-reduce-motion="1"] .action { transition-duration: 1ms !important; }
:root[data-reduce-motion="1"] .sk-row::after { animation: none !important; }
:root[data-reduce-motion="1"] .bar i.indet { animation: none !important; width: 40% !important; transform: none !important; }
:root[data-reduce-motion="1"] { scroll-behavior: auto; }

/* ══════════════════════════════════════════════════════════════════
   Premium pass: transitions, the orb, reward moments, living covers,
   glass, the reading room, quiz and card feel, onboarding, micro-details.
   Transform and opacity only; ease-out in, faster out; every loop pauses
   off-screen (`.paused`) and in a hidden tab (`[data-hidden]`); reduced
   motion degrades everything to a fade at the end of this block.
   ══════════════════════════════════════════════════════════════════ */
:root { --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); --ease-spring: cubic-bezier(0.34, 1.28, 0.64, 1); }

/* ── 1 · Page transitions ─────────────────────────────────────────── */
::view-transition { pointer-events: none; }               /* never block a tap mid-fade */
::view-transition-old(root) { animation: 110ms ease-out both vt-out; }
::view-transition-new(root) { animation: 260ms var(--ease-out) both vt-in; }
:root[data-nav="back"]::view-transition-old(root) { animation-name: vt-out-back; }
:root[data-nav="back"]::view-transition-new(root) { animation-name: vt-in-back; }
::view-transition-group(cover) { animation-duration: 340ms; animation-timing-function: var(--ease-out); }
::view-transition-old(cover), ::view-transition-new(cover) { animation: none; mix-blend-mode: normal; height: 100%; object-fit: cover; }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in-back { from { opacity: 0; transform: translateY(-12px); } }
@keyframes vt-out-back { to { opacity: 0; transform: translateY(6px); } }
.app-nav { view-transition-name: app-nav; }
.app-dock { view-transition-name: app-dock; }
.orb-host { view-transition-name: bits-orb; }
/* The browser's own cross-fade replaces the page pop; an in-place redraw never pops. */
:root[data-vt] .page, #main.still .page, #main.still [data-stagger] > * { animation: none; }

/* ── 2 · The Bits AI orb ──────────────────────────────────────────── */
.orb-host { position: fixed; left: 0; top: 0; z-index: var(--z-menu); touch-action: none; }
.orb { width: 56px; height: 56px; border-radius: 50%; padding: 0; border: 0; background: transparent; cursor: grab; -webkit-tap-highlight-color: transparent; display: grid; place-items: center; transition: transform 200ms var(--ease-out), opacity 200ms ease; }
.orb:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.orb-host.drag .orb { cursor: grabbing; }
.orb-core { position: relative; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 32% 28%, #7FE3D6 0%, var(--teal) 42%, var(--teal2) 100%);
  box-shadow: 0 2px 4px rgba(5, 32, 28, 0.18), 0 14px 28px -10px rgba(24, 184, 166, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  animation: orbBreathe 4s var(--ease-in-out) infinite; transition: transform 140ms var(--ease-out); }
.orb-core .i { font-size: 24px; filter: drop-shadow(0 1px 1px rgba(5, 32, 28, 0.25)); }
.orb-sheen { position: absolute; inset: -10%; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.42) 50%, transparent 62%); transform: translateX(-120%); animation: orbSheen 6s linear infinite; }
@keyframes orbBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@keyframes orbSheen { 0% { transform: translateX(-120%); } 22% { transform: translateX(120%); } 100% { transform: translateX(120%); } }
.orb-host.press .orb-core { transform: scale(0.92); animation-play-state: paused; }
.orb-host.drag .orb-core { animation-play-state: paused; box-shadow: 0 6px 10px rgba(5, 32, 28, 0.2), 0 24px 40px -12px rgba(24, 184, 166, 0.8); }
/* It steps aside where it would be in the way: the AI page, onboarding, any open sheet. */
body.solo .orb, body.dlg .orb, body.on-ai .orb, body.on-form .orb { opacity: 0; transform: scale(0.6); pointer-events: none; }
:root[data-hidden] .orb-core, :root[data-hidden] .orb-sheen { animation-play-state: paused; }
.sheet2.ai .sheet2-panel { height: 88dvh; display: flex; flex-direction: column; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
.sheet2.ai .sheet2-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sheet2.ai .ai-host, .sheet2.ai .ai-page { flex: 1; min-height: 0; display: flex; }
.sheet2.ai .ai-page { grid-template-columns: 1fr; min-height: 0; }
.sheet2.ai .ai-side { display: none; }
.sheet2.ai .ai-main { flex: 1; min-height: 0; border: 0; box-shadow: none; }
.sheet2.ai .sheet2-head { margin-bottom: 8px; }
@media (min-width: 1024px) {
  .sheet2.side { align-items: stretch; justify-content: flex-end; padding: 0; background: rgba(8, 13, 23, 0.18); }
  .sheet2.side .sheet2-panel { width: min(460px, 100%); height: 100dvh; max-height: none; border-radius: var(--r-xl) 0 0 var(--r-xl); animation: sideIn 320ms var(--ease-drawer) both; padding: 18px 22px 20px; }
  [dir="rtl"] .sheet2.side .sheet2-panel { border-radius: 0 var(--r-xl) var(--r-xl) 0; animation-name: sideInRtl; }
  .sheet2.side.closing .sheet2-panel { animation: sideOut 180ms var(--ease-out) forwards; }
  [dir="rtl"] .sheet2.side.closing .sheet2-panel { animation-name: sideOutRtl; }
  .sheet2.side.ai .sheet2-panel { height: 100dvh; }
}
@keyframes sideIn { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sideOut { to { transform: translateX(40px); opacity: 0; } }
@keyframes sideInRtl { from { transform: translateX(-40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sideOutRtl { to { transform: translateX(-40px); opacity: 0; } }

/* ── 3 · Reward moments ───────────────────────────────────────────── */
.cel-canvas { position: fixed; left: 0; top: 0; z-index: var(--z-toast); pointer-events: none; }
.cel-num { position: fixed; z-index: var(--z-toast); transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 2px; pointer-events: none; font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--teal2); text-shadow: 0 1px 0 var(--bg); animation: celNum 1.7s var(--ease-out) both; }
:root[data-theme="dark"] .cel-num { color: var(--teal); }
.cel-num b { font-size: 26px; letter-spacing: -0.02em; }
.cel-num span { font-family: var(--font-ui); font-size: 13px; font-weight: 800; color: var(--gold); }
@keyframes celNum { 0% { opacity: 0; transform: translate(-50%, -30%) scale(0.9); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 70% { opacity: 1; transform: translate(-50%, -80%); } 100% { opacity: 0; transform: translate(-50%, -110%); } }
.pill.pulse, .stat3 .card.pulse { animation: pulseOnce 420ms var(--ease-spring); }
@keyframes pulseOnce { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
.i.flick { animation: flick 640ms var(--ease-in-out); transform-origin: 50% 90%; }
@keyframes flick { 0%, 100% { transform: none; } 20% { transform: scale(1.25) rotate(-6deg); } 45% { transform: scale(0.95) rotate(5deg); } 70% { transform: scale(1.18) rotate(-3deg); } }
/* No backdrop blur here: a full-screen blur under a canvas that repaints
 * every frame is the one thing a mid-range phone cannot afford. */
.lvl-cel { position: fixed; inset: 0; z-index: var(--z-auth); display: grid; place-items: center; padding: 24px; background: rgba(8, 13, 23, 0.62); animation: celIn 220ms var(--ease-out); cursor: pointer; }
.lvl-cel.out { animation: celOut 240ms var(--ease-out) forwards; }
.lvl-card { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 34px 30px; border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-lg); width: min(360px, 100%); animation: materialize 320ms var(--ease-out) both; }
.lvl-ring2 { position: relative; width: 128px; height: 128px; }
.lvl-ring2 svg { width: 128px; height: 128px; transform: rotate(-90deg); }
.lvl-ring2 circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.lvl-ring2 .bg { stroke: var(--border); }
.lvl-ring2 .fg { stroke: var(--gold); stroke-dashoffset: 0; animation: ringFill 900ms var(--ease-out) both; }
@keyframes ringFill { from { stroke-dashoffset: var(--c, 339.3); } }
.lvl-n { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 44px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; animation: pop 400ms var(--ease-spring) 620ms both; }
.lvl-k { font-family: var(--font-ui); font-size: 12.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); animation: pop 300ms var(--ease-out) 760ms both; }
.lvl-t { font-family: var(--font-display); font-size: 22px; font-weight: 800; overflow: hidden; }
.lvl-t span { display: inline-block; clip-path: inset(0 100% 0 0); animation: reveal 460ms var(--ease-out) 980ms forwards; }
[dir="rtl"] .lvl-t span { clip-path: inset(0 0 0 100%); }
@keyframes reveal { to { clip-path: inset(0 0 0 0); } }
@keyframes materialize { from { opacity: 0; transform: scale(0.96); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }

/* ── 4 · Living covers and cards ──────────────────────────────────── */
.cover .art { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }
.cover.has-art .t, .cover.has-art .glyph, .cover.has-art .scrim, .cover.has-art .spine { display: none; }
.cover.has-art::before, .cover.has-art::after { content: none; }
.cover .sheen { position: absolute; inset: -20%; z-index: 2; pointer-events: none; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.28) 50%, transparent 60%); transform: translateX(-130%) skewX(-12deg); }
@media (hover: hover) and (pointer: fine) {
  .book:hover .cover .sheen { transform: translateX(130%) skewX(-12deg); transition: transform 700ms var(--ease-out); }
  .cover.tilting { will-change: transform; transition: none; }
  .book:hover { transform: none; }                    /* the tilt carries the lift */
}
.book:active .cover { transform: scale(0.97); transition: transform 120ms var(--ease-out); }
.pthumb { position: relative; display: block; width: 48px; }
.pring { position: absolute; inset: -6px; width: 60px; height: 60px; transform: rotate(-90deg); pointer-events: none; }
.pring circle { fill: none; stroke-width: 5; stroke-linecap: round; }
.pring .bg { stroke: var(--border); }
.pring .fg { stroke: var(--teal); animation: ringIn 900ms var(--ease-out) both; }
@keyframes ringIn { from { stroke-dashoffset: 213.6; } }
.prow { grid-template-columns: 52px 1fr auto; }
.rail > * { scroll-snap-align: start; }

/* ── 5 · Glass and depth ──────────────────────────────────────────── */
.app-nav { border-bottom-color: transparent; transition: border-color 200ms ease; }
.app-nav::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; pointer-events: none; opacity: 0; transition: opacity 220ms ease; background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 55%, transparent), transparent); }
body.scrolled .app-nav { border-bottom-color: color-mix(in srgb, var(--border) 60%, transparent); }
body.scrolled .app-nav::after { opacity: 1; }
.top-sentinel { display: block; height: 1px; margin-top: -1px; }
.app-dock { box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
:root[data-theme="dark"] .app-dock { box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.10); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .app-dock { box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.10); } }
.dock-ind { position: absolute; top: 8px; bottom: 8px; inset-inline-start: 6px; width: calc((100% - 12px) / 5); border-radius: 999px; background: var(--teal-soft); opacity: 0; transform: translateX(calc(var(--i, 0) * 100%)); transition: transform 380ms var(--ease-spring), opacity 200ms ease; }
[dir="rtl"] .dock-ind { transform: translateX(calc(var(--i, 0) * -100%)); }
.app-dock.has-on .dock-ind { opacity: 1; }
.tabs-ind { position: absolute; top: 0; height: 40px; left: 0; width: 0; border-radius: 12px; background: var(--teal-soft); opacity: 0; transition: transform 360ms var(--ease-spring), width 360ms var(--ease-spring), opacity 200ms ease; }
.app-tabs.has-on .tabs-ind { opacity: 1; }
.sheet2 { animation: fade-in 180ms var(--ease-out); }
.sheet2-panel { animation: sheetUp 380ms var(--ease-drawer); }
.sheet2.closing .sheet2-panel { animation: sheetDown 200ms var(--ease-drawer) forwards; }
.sheet2[data-dragged] .sheet2-panel { animation: none; }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sheetDown { to { transform: translateY(100%); } }
@media (min-width: 720px) {
  .sheet2-panel { animation: materialize 260ms var(--ease-out) both; }
  .sheet2.closing .sheet2-panel { animation: dematerialize 160ms var(--ease-out) forwards; }
}
@keyframes dematerialize { to { opacity: 0; transform: scale(0.97); filter: blur(6px); } }
@media (prefers-reduced-transparency: reduce) {
  .sheet2 { background: rgba(8, 13, 23, 0.72); }
  .sheet2-panel, .lvl-card, .rd-pop { background: var(--surface); }
  .orb-core { background: var(--teal); }
}
@media (prefers-contrast: more) {
  .app-nav, .app-dock, .plan-sticky { background: var(--bg); border: 2px solid var(--text); }
  .app-nav { border-bottom-color: var(--text) !important; }
  .sheet2-panel, .rd-pop, .lvl-card, .toast, .rd-next { border: 2px solid var(--text); }
  .dock-ind, .tabs-ind { outline: 2px solid var(--teal2); }
}

/* ── 6 · The reading room ─────────────────────────────────────────── */
.reader { position: relative; }
.rd-line { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: var(--z-skip); pointer-events: none; }
.rd-line i { display: block; height: 100%; background: var(--teal); transform-origin: left center; transform: scaleX(var(--a, 0)); transition: transform 320ms var(--ease-out); }
[dir="rtl"] .rd-line i { transform-origin: right center; }
.reader.st .rd-line i { animation: rdFill linear both; animation-timeline: scroll(root block); transition: none; }
@keyframes rdFill { from { transform: scaleX(var(--a, 0)); } to { transform: scaleX(var(--b, 1)); } }
.rd-s { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; }
.reader .prose { position: relative; }
.rd-end { position: absolute; left: 0; top: 66%; width: 1px; height: 1px; pointer-events: none; }
.reader:not(.st) .prose p { opacity: 0; transform: translateY(10px); transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out); }
.reader:not(.st) .prose p.in { opacity: 1; transform: none; }
.reader.st .prose p { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
@keyframes rise { from { opacity: 0.15; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.rd-next { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: var(--z-menu); transform: translate(-50%, 16px) scale(0.96); opacity: 0; pointer-events: none; transition: transform 260ms var(--ease-out), opacity 180ms ease; border-radius: 999px; box-shadow: var(--shadow-lg); }
.rd-next.on { transform: translate(-50%, 0) scale(1); opacity: 1; pointer-events: auto; }
@media (max-width: 760px) { .rd-next { bottom: calc(92px + env(safe-area-inset-bottom)); } }
.rd-tools { position: relative; }
.rd-aa { font-family: var(--font-ui); font-weight: 800; }
.rd-pop { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: var(--z-menu); width: min(300px, 88vw); display: grid; gap: 12px; padding: 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); transform-origin: top right; animation: popover 170ms var(--ease-out) both; }
[dir="rtl"] .rd-pop { transform-origin: top left; }
.rd-pop.closing { animation: popoverOut 100ms var(--ease-out) forwards; }
.rd-pop .seg { display: flex; }
.rd-pop .seg button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; }
@keyframes popover { from { opacity: 0; transform: scale(0.94) translateY(-4px); } }
@keyframes popoverOut { to { opacity: 0; transform: scale(0.97); } }
.tick { color: var(--teal2); font-size: 18px; margin-top: 2px; }
:root[data-theme="dark"] .tick { color: var(--teal); }
.tick svg { width: 100%; height: 100%; }
.tick path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; animation: tickIn 420ms var(--ease-out) forwards; animation-delay: calc(var(--d, 0ms) + 200ms); }
@keyframes tickIn { to { stroke-dashoffset: 0; } }

/* ── 7 · Quiz and flashcards with feel ────────────────────────────── */
.q .opt { position: relative; overflow: hidden; isolation: isolate; }
.q .opt.right { background: var(--surface); }
.q .opt.right::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(63, 191, 127, 0.16); clip-path: inset(0 100% 0 0); animation: wipe 340ms var(--ease-out) forwards; }
[dir="rtl"] .q .opt.right::before { clip-path: inset(0 0 0 100%); }
@keyframes wipe { to { clip-path: inset(0 0 0 0); } }
.q .opt.wrong { animation: shake 240ms var(--ease-out); }
@keyframes shake { 0%, 100% { transform: none; } 20% { transform: translateX(-2px); } 40% { transform: translateX(2px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }
.score-ring { position: relative; width: 132px; height: 132px; display: grid; place-items: center; }
.sring { position: absolute; inset: 0; width: 132px; height: 132px; transform: rotate(-90deg); }
.sring circle { fill: none; stroke-width: 6; stroke-linecap: round; }
.sring .bg { stroke: var(--border); }
.sring .fg { stroke: var(--teal); animation: ringIn 1000ms var(--ease-out) both; }
.result.fail .sring .fg { stroke: var(--rose); }
.result .score { font-size: 38px; }
.flash-stack { position: relative; height: 320px; }
.flash-stack .fs { position: absolute; left: 0; right: 0; height: 100%; border-radius: var(--r-xl); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); opacity: 0; transition: transform 300ms var(--ease-out), opacity 200ms ease; pointer-events: none; }
.flash-stack .fs1 { transform: translateY(10px) scale(0.96); }
.flash-stack .fs2 { transform: translateY(20px) scale(0.92); }
.flash-stack.one .fs1, .flash-stack.two .fs1, .flash-stack.two .fs2 { opacity: 1; }
.flash-stack .flash { position: relative; display: block; width: 100%; height: 320px; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.flash .inner { display: block; }
.flash.dragging { will-change: transform; cursor: grabbing; }
.flash.dragging .inner { transition: none; }
.flash .face { transform: translateZ(1px); }
.flash .face.back { transform: rotateY(180deg) translateZ(1px); }
.flash .sw { position: absolute; top: 18px; padding: 6px 12px; border-radius: 999px; font-family: var(--font-ui); font-weight: 800; font-size: 13px; opacity: 0; pointer-events: none; z-index: 2; }
/* The label sits on the side the card is leaving, so it stays in view. */
.flash .sw-l { right: 18px; background: rgba(242, 109, 109, 0.16); color: var(--rose); }
.flash .sw-r { left: 18px; background: rgba(63, 191, 127, 0.18); color: var(--green2); }
.flash-ghost { position: fixed; z-index: var(--z-sheet); border-radius: var(--r-xl); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-lg); pointer-events: none; }
.sw-hint { text-align: center; margin: -6px 0 0; }
.cards .sw-hint[hidden] { display: none; }

/* ── 8 · Onboarding as a story ────────────────────────────────────── */
.onb-step { display: grid; gap: 22px; }
.onb-step[data-dir="fwd"] { animation: stepFwd 300ms var(--ease-out) both; }
.onb-step[data-dir="back"] { animation: stepBack 300ms var(--ease-out) both; }
[dir="rtl"] .onb-step[data-dir="fwd"] { animation-name: stepBack; }
[dir="rtl"] .onb-step[data-dir="back"] { animation-name: stepFwd; }
@keyframes stepFwd { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } }
@keyframes stepBack { from { opacity: 0; transform: translateX(-36px); } to { opacity: 1; transform: none; } }
.dot { transition: background 200ms ease, width 220ms var(--ease-out); }
.dot.on { width: 20px; border-radius: 4px; transform: none; }
.firstup { animation: pop 320ms var(--ease-out) both; animation-delay: var(--d, 0ms); }

/* ── 9 · Micro-details ────────────────────────────────────────────── */
.cnt.pop { animation: badgePop 360ms var(--ease-spring); display: inline-block; }
@keyframes badgePop { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }
.empty2 .big-ic { position: relative; overflow: visible; }
.ambient { position: absolute; inset: -40% -110%; width: auto; height: auto; pointer-events: none; opacity: 0.55; }
.ambient * { fill: none; stroke: var(--teal); stroke-width: 1.2; transform-origin: 80px 45px; transform-box: view-box; }
.ambient .a1 { stroke-dasharray: 8 14; animation: orbitA 16s linear infinite; }
.ambient .a2 { stroke: var(--violet); stroke-dasharray: 5 11; animation: orbitB 22s linear infinite; }
.ambient .a3 { stroke: var(--amber); animation: floatC 7s var(--ease-in-out) infinite; }
@keyframes orbitA { to { transform: rotate(360deg); } }
@keyframes orbitB { to { transform: rotate(-360deg); } }
@keyframes floatC { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-6px) scale(1.08); } }
.paused, .paused * { animation-play-state: paused !important; }
:root[data-hidden] .ambient *, :root[data-hidden] .sk-row::after, :root[data-hidden] .wave i, :root[data-hidden] .typing i { animation-play-state: paused !important; }
.btn { position: relative; }
.btn .bc { display: inline-flex; align-items: center; gap: inherit; transition: filter 200ms ease, opacity 200ms ease; }
.btn.busy .bc { filter: blur(2px); opacity: 0.45; }
.btn.ok .bc { opacity: 0; }
.bspin { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.bspin .i { font-size: 20px; animation: pop 220ms var(--ease-spring) both; }
.btn.busy .spin.sm { border-color: currentColor; border-top-color: transparent; opacity: 0.9; animation-duration: 0.6s; }
.app-main .btn.busy[disabled], .sheet2 .btn.busy[disabled], .btn.busy[disabled] { opacity: 1; pointer-events: none; }
.menu.open { animation: menuIn 140ms var(--ease-out); }
.devpanel { position: fixed; left: 8px; top: 72px; z-index: var(--z-skip); display: grid; gap: 4px; padding: 8px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border2); box-shadow: var(--shadow-lg); font: 700 11px var(--font-ui); }
.devpanel button { padding: 4px 8px; border-radius: 8px; background: var(--surface2); text-align: start; font: inherit; }

/* ── Reduced motion: keep the fades, drop the movement ────────────── */
@media (prefers-reduced-motion: reduce) {
  .orb-core, .orb-sheen, .cover .sheen, .ambient *, .pring .fg, .sring .fg, .lvl-ring2 .fg, .tick path, .q .opt.wrong, .q .opt.right::before, .onb-step, .firstup, .cnt.pop, .pill.pulse, .stat3 .card.pulse, .i.flick, .lvl-n, .lvl-k, .bspin .i, .reader.st .prose p, .reader.st .rd-line i { animation: none !important; }
  .tick path { stroke-dashoffset: 0; }
  .q .opt.right::before { clip-path: none; }
  .lvl-t span { clip-path: none; animation: none; }
  .lvl-card, .sheet2-panel, .cel-num { animation: celIn 180ms linear both !important; }
  .rd-pop { animation: celIn 120ms linear both !important; }
  .rd-pop.closing { animation: celOut 90ms linear forwards !important; }
  .reader:not(.st) .prose p { opacity: 1; transform: none; transition: none; }
  .rd-next, .toast, .dock-ind, .tabs-ind, .dot, .rd-line i, .flash-stack .fs, .orb { transition-duration: 1ms !important; }
  .rd-next { transform: translate(-50%, 0) !important; }
  .orb-core { transform: none; }
  body.solo .orb, body.dlg .orb, body.on-ai .orb { transform: none; }
  .cover.tilting { transform: none !important; }
}
:root[data-reduce-motion="1"] .orb-core, :root[data-reduce-motion="1"] .orb-sheen, :root[data-reduce-motion="1"] .cover .sheen, :root[data-reduce-motion="1"] .ambient *, :root[data-reduce-motion="1"] .pring .fg, :root[data-reduce-motion="1"] .sring .fg, :root[data-reduce-motion="1"] .lvl-ring2 .fg, :root[data-reduce-motion="1"] .tick path, :root[data-reduce-motion="1"] .q .opt.wrong, :root[data-reduce-motion="1"] .q .opt.right::before, :root[data-reduce-motion="1"] .onb-step, :root[data-reduce-motion="1"] .firstup, :root[data-reduce-motion="1"] .cnt.pop, :root[data-reduce-motion="1"] .pill.pulse, :root[data-reduce-motion="1"] .stat3 .card.pulse, :root[data-reduce-motion="1"] .i.flick, :root[data-reduce-motion="1"] .lvl-n, :root[data-reduce-motion="1"] .lvl-k, :root[data-reduce-motion="1"] .bspin .i, :root[data-reduce-motion="1"] .reader.st .prose p, :root[data-reduce-motion="1"] .reader.st .rd-line i { animation: none !important; }
:root[data-reduce-motion="1"] .tick path { stroke-dashoffset: 0; }
:root[data-reduce-motion="1"] .q .opt.right::before { clip-path: none; }
:root[data-reduce-motion="1"] .lvl-t span { clip-path: none; animation: none; }
:root[data-reduce-motion="1"] .lvl-card, :root[data-reduce-motion="1"] .sheet2-panel, :root[data-reduce-motion="1"] .cel-num { animation: celIn 180ms linear both !important; }
:root[data-reduce-motion="1"] .rd-pop { animation: celIn 120ms linear both !important; }
:root[data-reduce-motion="1"] .rd-pop.closing { animation: celOut 90ms linear forwards !important; }
:root[data-reduce-motion="1"] .reader:not(.st) .prose p { opacity: 1; transform: none; transition: none; }
:root[data-reduce-motion="1"] .rd-next, :root[data-reduce-motion="1"] .toast, :root[data-reduce-motion="1"] .dock-ind, :root[data-reduce-motion="1"] .tabs-ind, :root[data-reduce-motion="1"] .dot, :root[data-reduce-motion="1"] .rd-line i, :root[data-reduce-motion="1"] .flash-stack .fs, :root[data-reduce-motion="1"] .orb { transition-duration: 1ms !important; }
:root[data-reduce-motion="1"] .rd-next { transform: translate(-50%, 0) !important; }
:root[data-reduce-motion="1"] .orb-core, :root[data-reduce-motion="1"] body.solo .orb, :root[data-reduce-motion="1"] body.dlg .orb, :root[data-reduce-motion="1"] body.on-ai .orb { transform: none; }
:root[data-reduce-motion="1"] .cover.tilting { transform: none !important; }

/* Dock labels never wrap: five tabs at 360 px is tight, so the label shrinks
 * before it breaks. */
@media (max-width: 760px) { .app-dock a { white-space: nowrap; padding: 6px 6px; } }
@media (max-width: 400px) { .app-dock a { font-size: 9.5px; padding: 6px 4px; } }

/* ══════════════════════════════════════════════════════════════════
   Editorial pass: the app on the website's own system. A left-set
   12-column grid, hairlines instead of card grids, big figures, covers
   with the caption under them, one still ambient disc per page, glass
   only on what floats (the nav pill, the dock, the filter bar, the
   device frames, the liquid button). Sora display at -0.03em, Manrope
   body at 17/1.6. Motion is transform and opacity, ease-out in, faster
   out; hover only under (hover: hover) and (pointer: fine); reduced
   motion keeps the fades (the last block).
   ══════════════════════════════════════════════════════════════════ */
:root { --app-nav-h: 74px; }
@media (max-width: 760px) { :root { --app-nav-h: 64px; } }

/* ── The shell: a floating glass pill, the page scrolls under it ───── */
.app-nav { position: sticky; top: 0; z-index: var(--z-nav); height: var(--app-nav-h); padding-top: max(10px, env(safe-area-inset-top)); background: none; border: 0; pointer-events: none; }
.app-nav::after { display: none; }
.app-nav .wrap { pointer-events: auto; height: 56px; padding: 0 8px 0 16px; border-radius: 999px; gap: 12px; background: var(--glass); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 var(--glass-edge), var(--glass-shadow); transition: box-shadow 220ms ease; }
body.scrolled .app-nav { border: 0; }
body.scrolled .app-nav .wrap { box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow-lg); }
.app-nav .brand { font-size: 17px; }
.app-nav .brand img { border-radius: 9px; }
.app-tabs { margin-inline-start: 6px; }
.app-tabs a { height: 38px; padding: 0 13px; border-radius: 999px; font-size: 14px; }
.tabs-ind { height: 38px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 1px 0 var(--glass-edge), 0 1px 2px rgba(13, 19, 33, 0.08), 0 6px 14px -8px rgba(13, 19, 33, 0.3); }
.app-tabs.has-on a.on { color: var(--text); }
:root[data-theme="dark"] .app-tabs.has-on a.on { color: var(--text); }
.pill { height: 34px; background: transparent; border-color: transparent; padding: 0 8px; }
.avatar { width: 36px; height: 36px; }
@media (max-width: 760px) {
  .app-nav .wrap { height: 50px; padding: 0 6px 0 14px; }
  .app-nav .brand { font-size: 16px; }
  .app-dock { border-color: var(--glass-border); background: var(--glass); box-shadow: inset 0 1px 0 var(--glass-edge), var(--glass-shadow); }
}
@media (prefers-reduced-transparency: reduce) { .app-nav .wrap { background: var(--surface); } }
@media (prefers-contrast: more) { .app-nav .wrap { background: var(--bg); border: 2px solid var(--text); } .app-nav { border: 0; } }
.app-main { padding-top: 16px; }
.page { gap: 0; }
.page > * + * { margin-top: clamp(36px, 4vw, 56px); }
.page > section + section, .page > .sec + .sec { margin-top: clamp(40px, 5vw, 64px); }

/* ── Type: the page head, the section head ──────────────────────────── */
.ph { display: grid; gap: 12px; justify-items: start; padding: clamp(8px, 2vw, 24px) 0 0; }
.ph .h1 { font-size: clamp(34px, 1.6rem + 2.4vw, 56px); letter-spacing: -0.03em; line-height: 1.02; max-width: 18ch; }
.ph .lead { max-width: 52ch; }
.ph .kicker { margin-bottom: 2px; }
.sh { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--text); }
.sh h2 { font-size: clamp(22px, 1rem + 1.2vw, 28px); letter-spacing: -0.02em; }
.sh .tlink { font-family: var(--font-ui); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 4px; }
.sh .cnt-line, .cnt-line { font-family: var(--font-ui); font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.meta-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--font-ui); font-size: 14px; color: var(--text2); font-variant-numeric: tabular-nums; }
.meta-line .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--border2); }
.meta-line .i { font-size: 16px; color: var(--teal2); }
:root[data-theme="dark"] .meta-line .i { color: var(--teal); }
.app-main .crumbs { margin-bottom: 8px; }

/* The one ambient element on a page: a still disc, never animated. */
.amb-disc { position: absolute; inset-inline-end: -14vw; top: -14vw; width: 56vw; max-width: 760px; aspect-ratio: 1; border-radius: 50%; pointer-events: none; z-index: -1; background: radial-gradient(circle closest-side, rgba(24, 184, 166, 0.18), rgba(24, 184, 166, 0.06) 48%, transparent 100%); }
.page { position: relative; }
#main-shell { overflow-x: clip; }

/* ── Figures and hairlines ──────────────────────────────────────────── */
.fig { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.fig .fn { font-family: var(--font-display); font-weight: 800; font-size: clamp(72px, 4rem + 4vw, 128px); line-height: 0.85; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; margin-inline-start: -0.04em; }
.fig .ft { display: grid; gap: 4px; padding-bottom: 6px; }
.fig .ft b { font-family: var(--font-ui); font-size: 16px; }
.fig .ft span { font-size: 15px; color: var(--text2); }
.rule-line.stat3 { gap: 8px 40px; }
@media (max-width: 640px) { .rule-line.stat3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .rule-line.stat3 .tn { flex-wrap: wrap; gap: 2px 6px; } .rule-line.stat3 .tn span { width: 100%; font-size: 12.5px; } }
.rule-line .tn .i { font-size: 18px; align-self: center; }
.rule-line .tn.streak .i { color: var(--amber-ink); } .rule-line .tn.xpc .i { color: var(--teal2); } .rule-line .tn.coin .i { color: var(--violet); }
:root[data-theme="dark"] .rule-line .tn.streak .i { color: var(--amber); } :root[data-theme="dark"] .rule-line .tn.xpc .i { color: var(--teal); }
.rule-line.four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rule-line.four .tn { flex-direction: column; align-items: start; gap: 2px; }
@media (max-width: 560px) { .rule-line.four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; } }
.rule-line .tn small { display: block; font-family: var(--font-ui); font-size: 12px; color: var(--muted); }
.thin { display: block; height: 3px; border-radius: 2px; background: var(--border); overflow: hidden; }
.thin i { display: block; height: 100%; width: var(--p, 0%); background: var(--teal); border-radius: 2px; transform-origin: 0 50%; }
[dir="rtl"] .thin i { transform-origin: 100% 50%; }
.thin.gold i { background: var(--gold); }

/* Numbered hairline list: 01, 02 … in the display face, text beside. */
.app-main .steps li { grid-template-columns: 40px 1fr; padding: 14px 0; }
.app-main .steps p { font-size: 16.5px; }
.app-main .steps .n { padding-top: 5px; }

/* Covers with the caption under them: the app's one way to show a book. */
.app-main .cgrid { gap: 28px 18px; }
.app-main .citem { display: grid; gap: 10px; align-content: start; }
.app-main .citem .cwrap { display: block; position: relative; border-radius: 12px; isolation: isolate; }
.app-main .citem .meta { display: grid; gap: 3px; padding: 0 2px; }
.app-main .citem .bt { font-family: var(--font-ui); font-weight: 700; font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.app-main .citem .ba { font-size: 12.5px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-main .citem .bm { font-family: var(--font-ui); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.app-main .citem .bm em { font-style: normal; font-weight: 700; color: var(--teal2); }
:root[data-theme="dark"] .app-main .citem .bm em { color: var(--teal); }
.app-main .citem .thin { margin-top: 2px; }
.app-main .citem.done .cover::after { display: none; }
.app-main .citem .lockb { position: absolute; top: 8px; inset-inline-end: 8px; z-index: 3; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, 0.32); color: #fff; }
.app-main .citem .lockb .i { font-size: 12px; }
.app-main .citem.hide { display: none !important; }
/* The rail: snap on touch, drag on a mouse (glass.js is not in the app, so it just scrolls). */
.app-rail { display: flex; gap: 18px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 6px 2px 18px; margin: 0 -2px; scrollbar-width: none; }
.app-rail::-webkit-scrollbar { display: none; }
.app-rail > * { flex: 0 0 150px; scroll-snap-align: start; }
@media (max-width: 560px) { .app-rail > * { flex-basis: 132px; } .app-rail { gap: 14px; } }
.cont-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cont-grid .citem { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: center; }
.cont-grid .citem .cover { border-radius: 8px; }
.cont-grid .citem .cover .t, .cont-grid .citem .cover .glyph { display: none; }
@media (max-width: 900px) { .cont-grid { grid-template-columns: 1fr; gap: 0; } .cont-grid .citem { padding: 12px 0; border-top: 1px solid var(--border); border-radius: 0; } .cont-grid .citem:last-child { border-bottom: 1px solid var(--border); } .cont-grid .citem { grid-template-columns: 56px minmax(0, 1fr); } }
.cont-grid .citem .bt { font-family: var(--font-display); font-size: 16px; letter-spacing: -0.01em; }

/* Hairline link rows (the experience rail, modes, account): reuse .rule-links, smaller on a phone. */
.app-main .rule-links .rl-k { display: inline-flex; align-items: center; gap: 10px; font-size: clamp(18px, 1rem + 0.5vw, 21px); }
.app-main .rule-links .rl-k .i { font-size: 20px; color: var(--teal2); }
:root[data-theme="dark"] .app-main .rule-links .rl-k .i { color: var(--teal); }
.app-main .rule-links .rl-k .i.lock { color: var(--gold); }
.app-main .rule-links .rl-k .i.ok { color: var(--green2); }
.app-main .rule-links a { padding: 18px 0; }
.app-main .rule-links .rl-b { font-size: 15px; }
.app-main .rule-links .rl-n { font-weight: 700; }
.app-main .rule-links .rl-n.ok { color: var(--green2); }
.app-main .rule-links .rl-n.lock { color: var(--gold); }
.app-main .rule-links .rl-n.on { color: var(--teal2); }
:root[data-theme="dark"] .app-main .rule-links .rl-n.on { color: var(--teal); }
.app-main .rule-links .rl-idx { grid-column: 1; font-family: var(--font-display); font-size: 12px; font-weight: 800; color: var(--teal2); letter-spacing: 0.1em; font-variant-numeric: tabular-nums; }
:root[data-theme="dark"] .app-main .rule-links .rl-idx { color: var(--teal); }
@media (hover: hover) and (pointer: fine) { .app-main .rule-links a:hover .rl-k .i { transform: none; } }
.app-main .rule-links .thin { grid-column: 1; margin-top: 6px; max-width: 320px; }
@media (max-width: 560px) { .app-main .rule-links a { padding: 16px 0; } }

/* Definition rows: the term left, the answer right, a link where it is one. */
.app-main .rule-list > div { grid-template-columns: 180px 1fr; }
.app-main .rule-list dd { display: grid; gap: 8px; justify-items: start; }
.app-main .rule-list dd .tlink { font-family: var(--font-ui); font-weight: 700; font-size: 14px; }
@media (max-width: 560px) { .app-main .rule-list > div { grid-template-columns: 1fr; } }

/* ── Home ───────────────────────────────────────────────────────────── */
.home { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.home > * { min-width: 0; }
.home-hi { display: grid; gap: 10px; justify-items: start; padding-top: clamp(8px, 2vw, 24px); }
.home-hi .h1 { font-size: clamp(34px, 1.6rem + 2.4vw, 56px); letter-spacing: -0.03em; line-height: 1.02; max-width: 16ch; }
.home-hi > * { animation: rise-in 560ms var(--ease-out) both; }
.home-hi > :nth-child(2) { animation-delay: 60ms; } .home-hi > :nth-child(3) { animation-delay: 120ms; }
.home-aside { display: grid; gap: clamp(28px, 3vw, 40px); align-content: start; margin-top: 32px; }
.home-main { display: grid; gap: clamp(36px, 4vw, 56px); margin-top: 36px; }
.home-main > *, .home-aside > * { min-width: 0; }
.goal-fig { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; }
.goal-fig .fig .fn { font-size: clamp(64px, 3rem + 3vw, 96px); }
.goal-fig .ring, .goal-fig .ring svg { width: 92px; height: 92px; }
.goal-fig .ring circle { stroke-width: 6; }
.goal-fig .ring b { font-size: 16px; font-variant-numeric: tabular-nums; }
.goal-fig .cta { grid-column: 1 / -1; justify-self: start; }
.goal-fig .kicker { grid-column: 1 / -1; }
.lab-strip { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 18px; border-radius: 22px; transition: transform 160ms var(--ease-out), box-shadow 200ms ease; }
.lab-strip .ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; margin: 0; }
.lab-strip .ic .i { font-size: 24px; }
.lab-strip b { display: block; font-family: var(--font-display); font-size: 18px; letter-spacing: -0.01em; }
.lab-strip span.sub { display: block; font-size: 14px; color: var(--text2); margin-top: 2px; }
.lab-strip .go { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--text); color: var(--bg); transition: transform 160ms var(--ease-out); }
.lab-strip:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) { .lab-strip:hover .go { transform: translateX(3px); } [dir="rtl"] .lab-strip:hover .go { transform: translateX(-3px); } }
.home-chal { display: none; }
@media (min-width: 1024px) {
  .home { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .home-hi { grid-column: 1 / -1; }
  .home-main { grid-column: 1 / span 8; grid-row: 2; }
  .home-aside { grid-column: 9 / span 4; grid-row: 2; padding-inline-start: 24px; border-inline-start: 1px solid var(--border); }
  .home-chal { display: block; }
  .goal-fig { grid-template-columns: 1fr; }
  .goal-fig .ring { grid-row: 1; justify-self: start; }
}

/* ── Library: a sticky glass bar over a cover grid ──────────────────── */
.lib-bar { position: sticky; top: var(--app-nav-h); z-index: calc(var(--z-nav) - 1); margin: 18px -16px 0; padding: 10px 16px 0; border-radius: 0 0 22px 22px; background: var(--nav-glass); border-bottom: 1px solid var(--glass-border); }
@media (min-width: 761px) { .lib-bar { margin-inline: -24px; padding-inline: 24px; } }
.lib-bar .cb-row { gap: 10px 12px; }
.lib-bar .search { flex: 1 1 240px; max-width: 480px; height: 44px; border-radius: 999px; box-shadow: none; background: var(--glass-2); border-color: var(--glass-border); }
.lib-bar .segtabs { flex: 0 1 auto; min-width: 280px; background: color-mix(in srgb, var(--text) 6%, transparent); border-color: transparent; }
.lib-bar .segtabs a { height: 36px; }
.lib-bar .segtabs-ind { box-shadow: inset 0 1px 0 var(--glass-edge), 0 1px 2px rgba(13, 19, 33, 0.08), 0 6px 14px -8px rgba(13, 19, 33, 0.3); }
.lib-bar .cb-chips { margin-top: 2px; }
.lib-bar .cb-chips .filters { padding: 10px 0 12px; }
.lib-bar .chip { background: var(--glass-2); border-color: var(--glass-border); }
.lib-bar .chip[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
@media (max-width: 560px) { .lib-bar .segtabs { min-width: 0; width: 100%; } }
.lib-body { padding-top: 26px; }
.lib-body > .cnt-line { margin-bottom: 20px; }
.lib-body .empty { padding: 48px 0; }
@media (prefers-reduced-transparency: reduce) { .lib-bar { background: var(--bg); } }
/* Courses grouped by level, a heavy rule under the group, hairlines between rows. */
.app-main .cgroup { margin-bottom: 40px; }
.app-main .crow { grid-template-columns: 56px auto minmax(0, 1fr) auto 22px; }
.app-main .crow .cover { width: 56px; border-radius: 6px; }
.app-main .crow .cover .t, .app-main .crow .cover .glyph { display: none; }
@media (max-width: 640px) { .app-main .crow { grid-template-columns: 48px minmax(0, 1fr) 22px; } .app-main .crow .cover { grid-row: 1 / span 3; width: 48px; } .app-main .crow .cr-ys, .app-main .crow .cr-t, .app-main .crow .cr-tag { grid-column: 2; justify-self: start; } .app-main .crow .i { grid-column: 3; } }
.app-main .crow .cr-tag.gold { background: var(--gold-soft); color: var(--gold); }
/* Yours: the dashed add tile is the first cover in the grid. */
.app-main .adddoc { background: var(--glass-2); border-color: var(--border2); }

/* ── The book (and course) head ─────────────────────────────────────── */
.bk-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 28px; align-items: center; padding-top: 12px; }
.bk-head > * { min-width: 0; }
.bk-cover { grid-column: span 4; position: relative; display: grid; justify-items: center; padding: 18px 0 8px; }
.bk-cover .cover { width: min(240px, 70%); border-radius: 14px; transform: rotate(-2deg); box-shadow: 0 40px 60px -28px rgba(13, 19, 33, 0.55), 0 12px 24px -12px color-mix(in srgb, var(--c1) 60%, transparent); }
[dir="rtl"] .bk-cover .cover { transform: rotate(2deg); }
.bk-cover .annot { inset-inline-end: 4%; top: 0; justify-items: end; transform: rotate(3deg); }
.bk-cover .annot svg { transform: scaleX(-1); margin: -2px 26px 0 0; }
[dir="rtl"] .bk-cover .annot svg { transform: none; margin: -2px 0 0 26px; }
.bk-cover .thin { width: min(240px, 70%); margin-top: 22px; }
.bk-info { grid-column: span 8; display: grid; gap: 16px; justify-items: start; }
.bk-info .h1 { font-size: clamp(30px, 1.4rem + 2vw, 48px); letter-spacing: -0.03em; line-height: 1.04; max-width: 20ch; }
.bk-info .author { font-size: 17px; color: var(--text2); }
.bk-info .author b { color: var(--text); }
.bk-info .ctas { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.bk-info .ctas .btn { max-width: 100%; }
@media (max-width: 760px) {
  .bk-head { grid-template-columns: 1fr; row-gap: 12px; }
  .bk-cover, .bk-info { grid-column: 1 / -1; }
  .bk-cover { justify-items: start; padding: 8px 0 0; }
  .bk-cover .cover { width: 150px; }
  .bk-cover .thin { width: 150px; margin-top: 16px; }
}
.bk-list .rl-k { font-family: var(--font-display); }

/* ── The reading room ───────────────────────────────────────────────── */
.reader { max-width: 62ch; gap: 26px; }
.reader .top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.reader .top .bar { max-width: none; height: 3px; }
.reader .top .btn-sm { padding-inline: 10px; }
.reader .rd-k { display: flex; align-items: baseline; gap: 12px; font-family: var(--font-display); font-size: 13px; font-weight: 800; color: var(--teal2); letter-spacing: 0.1em; font-variant-numeric: tabular-nums; }
:root[data-theme="dark"] .reader .rd-k { color: var(--teal); }
.reader .rd-k span { font-family: var(--font-ui); font-weight: 600; letter-spacing: 0; color: var(--muted); text-transform: none; }
.reader h1 { font-size: clamp(30px, 1.4rem + 1.8vw, 44px); letter-spacing: -0.03em; line-height: 1.06; margin-top: 8px; }
.prose { font-size: var(--reader-size, 19px); line-height: 1.7; }
.prose p { margin: 0 0 1.15em; text-wrap: pretty; }
.reader .nav { padding-top: 20px; }
.rd-fin { display: grid; gap: 22px; justify-items: start; padding-top: 12px; }
.rd-fin .h1 { font-size: clamp(40px, 2rem + 2.6vw, 64px); letter-spacing: -0.035em; line-height: 0.98; max-width: 14ch; }
.rd-fin .lead { max-width: 46ch; }
.rd-fin .ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.rd-fin .steps { width: 100%; }

/* ── Quiz and flashcards: the chrome ────────────────────────────────── */
.quiz, .cards { gap: 22px; }
.quiz .top, .cards .top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.quiz .top .bar { height: 3px; max-width: none; }
.quiz .qn { font-family: var(--font-display); font-size: 13px; font-weight: 800; color: var(--teal2); letter-spacing: 0.1em; font-variant-numeric: tabular-nums; white-space: nowrap; }
:root[data-theme="dark"] .quiz .qn { color: var(--teal); }
.quiz .qtext { font-size: clamp(22px, 1rem + 1.4vw, 30px); letter-spacing: -0.02em; line-height: 1.22; }
.app-main .q { display: grid; gap: 8px; }
.app-main .q .opt { background: var(--glass-2); border-color: var(--glass-border); border-radius: 14px; padding: 14px 16px; font-size: 15.5px; transition: transform 120ms var(--ease-out), border-color 140ms ease, background 140ms ease; }
.app-main .q .opt:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) { .app-main .q .opt:not([disabled]):hover { border-color: var(--teal); } }
.app-main .q .expl { margin-top: 6px; padding: 14px 0 0; border-top: 1px solid var(--border); background: none; border-radius: 0; font-size: 15px; }
.res { display: grid; gap: 14px; justify-items: start; padding-top: 8px; }
.res .fn { font-family: var(--font-display); font-weight: 800; font-size: clamp(88px, 4rem + 5vw, 160px); line-height: 0.82; letter-spacing: -0.06em; font-variant-numeric: tabular-nums; margin-inline-start: -0.04em; color: var(--teal2); }
:root[data-theme="dark"] .res .fn { color: var(--teal); }
.res.fail .fn { color: var(--rose); }
.res .fn small { font-size: 0.32em; letter-spacing: -0.02em; margin-inline-start: 2px; }
.res .h1 { font-size: clamp(30px, 1.4rem + 1.8vw, 44px); letter-spacing: -0.03em; }
.res .lead { max-width: 44ch; }
.res .ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.res .rule-line { width: 100%; }
.cards .due { font-family: var(--font-ui); font-size: 13.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.flash .face { background: var(--glass-2); border-color: var(--glass-border); box-shadow: inset 0 1px 0 var(--glass-edge), var(--glass-shadow); font-size: 21px; line-height: 1.45; font-family: var(--font-body); }
.flash .face.back { background: color-mix(in srgb, var(--teal) 14%, var(--surface)); }
.flash-stack .fs { background: var(--glass-3); border-color: var(--glass-border); }
.rate { padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--text) 6%, transparent); gap: 4px; }
.rate button { height: 44px; border-radius: 999px; border: 0; background: transparent; }
@media (hover: hover) and (pointer: fine) { .rate button:hover { transform: none; background: var(--surface); } }

/* ── Modes: the index, the mode chrome ──────────────────────────────── */
.mode-page { max-width: 62ch; }
.mode-page .mh { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; }
.mode-page .mh .mode-h1 { font-family: var(--font-display); font-size: 13px; font-weight: 800; color: var(--teal2); letter-spacing: 0.1em; text-transform: uppercase; justify-self: end; }
:root[data-theme="dark"] .mode-page .mh .mode-h1 { color: var(--teal); }
.app-main .board { background: var(--glass-2); border-color: var(--glass-border); box-shadow: inset 0 1px 0 var(--glass-edge); border-radius: 22px; }
.app-main .board .bt { font-family: var(--font-display); font-size: 19px; letter-spacing: -0.01em; }
.app-main .board .big { color: var(--text); }
.app-main .day { background: none; border: 0; border-top: 1px solid var(--border); border-radius: 0; box-shadow: none; padding: 18px 0; }
.app-main .daylist { gap: 0; }
.app-main .daylist .day:last-child { border-bottom: 1px solid var(--border); }
.app-main .fin { display: grid; gap: 16px; justify-items: start; }
.app-main .fin .h1 { font-size: clamp(34px, 1.6rem + 2vw, 52px); letter-spacing: -0.035em; line-height: 1; }
.app-main .fin .ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── The player: a glass device ─────────────────────────────────────── */
.player-page { max-width: 760px; gap: 20px; }
.ph-dev { border-radius: var(--r-xl); overflow: hidden; }
.ph-dev .device-bar { display: flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; color: var(--muted); }
.ph-dev .device-bar .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border2); }
.ph-dev .device-bar span:last-child { margin-inline-start: auto; white-space: nowrap; }
.ph-body { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 24px; align-items: center; padding: clamp(18px, 3vw, 28px); }
.ph-body .cover { border-radius: 12px; box-shadow: 0 24px 40px -20px rgba(13, 19, 33, 0.5); }
.ph-main h1 { font-size: clamp(22px, 1rem + 1.2vw, 30px); letter-spacing: -0.02em; line-height: 1.12; }
.ph-main .rd-k { font-family: var(--font-display); font-size: 12.5px; font-weight: 800; color: var(--teal2); letter-spacing: 0.1em; font-variant-numeric: tabular-nums; }
:root[data-theme="dark"] .ph-main .rd-k { color: var(--teal); }
.play-big { background: color-mix(in srgb, var(--teal) 86%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 2px rgba(5, 32, 28, 0.12), 0 12px 28px -12px rgba(24, 184, 166, 0.75); }
.ph-ctrls .seg { background: color-mix(in srgb, var(--text) 6%, transparent); }
.tracks { border-top: 1px solid var(--border); }
.tracks li { border-radius: 0; border-bottom: 1px solid var(--border); padding: 12px 2px; }
@media (hover: hover) and (pointer: fine) { .tracks li:hover { background: none; } .tracks li:hover .tt { color: var(--teal2); } }
.tracks li.on { background: none; } .tracks li.on .tt { color: var(--teal2); font-weight: 700; }
:root[data-theme="dark"] .tracks li.on .tt, :root[data-theme="dark"] .tracks li:hover .tt { color: var(--teal); }
@media (max-width: 640px) { .ph-body { grid-template-columns: 1fr; } .ph-body .cover { width: 130px; } }

/* ── Bits AI: the chat as a glass device beside a glass side panel ──── */
.ai-page { gap: 20px; }
@media (min-width: 901px) { .ai-page { grid-template-columns: 250px minmax(0, 1fr); } }
.ai-side { border-radius: 22px; }
.ai-main { border-radius: var(--r-xl); }
.ai-top { background: var(--glass-3); border-bottom-color: var(--glass-border); }
.ai-msgs .msg.ai { background: var(--glass-2); border: 1px solid var(--glass-border); }
.composer { border-top-color: var(--glass-border); background: var(--glass-3); }
.composer textarea { background: var(--surface); }
.composer .btn-icon { border-radius: 999px; }
.thread.on { background: var(--surface); box-shadow: inset 0 1px 0 var(--glass-edge), 0 1px 2px rgba(13, 19, 33, 0.06); }
.sheet2.ai .ai-main, .sheet2.ai .ai-page { border-radius: 0; }

/* ── My Learning ────────────────────────────────────────────────────── */
.plan-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding: 16px 0; border-block: 1px solid var(--border); font-size: 16px; color: var(--text2); }
.plan-line b { color: var(--text); font-family: var(--font-ui); }
.app-main .chal { background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; gap: 0; }
.app-main .chal-head { padding: 0 0 12px; }
.app-main .chal-rows { gap: 0; }
.app-main .chal-row { padding: 14px 0; border-top: 1px solid var(--border); }
.app-main .chal-row:last-child { border-bottom: 1px solid var(--border); }
.app-main .chal.all { background: none; box-shadow: none; }
.app-main .chal-cel { border-radius: 18px; }
.ln-tabs { max-width: 520px; }
.rows.cap { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 28px 18px; }
@media (max-width: 560px) { .rows.cap { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 22px 14px; } }
/* Certificates: gold hairline rows. */
.app-main .certs { display: grid; grid-template-columns: 1fr; gap: 0; }
.app-main .cert { grid-template-columns: 40px minmax(0, 1fr) auto; border-radius: 0; border: 0; border-top: 1px solid rgba(242, 178, 74, 0.5); background: none; padding: 16px 0; }
.app-main .cert:last-child { border-bottom: 1px solid rgba(242, 178, 74, 0.5); }
.app-main .cert .ic { width: 40px; height: 40px; background: var(--gold-soft); }
.app-main .cert b { font-family: var(--font-display); font-size: 17px; letter-spacing: -0.01em; }
.app-main .cert .cid { grid-column: 3; grid-row: 1; align-self: center; }
.app-main .cert > div { min-width: 0; }
@media (max-width: 480px) { .app-main .cert { grid-template-columns: 40px minmax(0, 1fr); } .app-main .cert .cid { grid-column: 2; grid-row: 2; } }

/* ── Profile ────────────────────────────────────────────────────────── */
.id-block { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px 28px; align-items: center; padding-top: 12px; }
.id-block .lvl-ring, .id-block .lvl-ring svg { width: 124px; height: 124px; }
.id-block .lvl-ring circle { stroke-width: 4; }
.id-block .lvl-ring .avatar { inset: 16px; font-size: 38px; }
.id-text { display: grid; gap: 8px; justify-items: start; }
.id-text .h1 { font-size: clamp(32px, 1.5rem + 2vw, 52px); letter-spacing: -0.03em; line-height: 1.02; }
.id-text .lvl { font-family: var(--font-ui); font-size: 16px; font-weight: 700; color: var(--teal2); }
:root[data-theme="dark"] .id-text .lvl { color: var(--teal); }
.id-text .meta-line { font-size: 14px; }
.id-xp { grid-column: 1 / -1; display: grid; gap: 8px; }
.id-xp .row { font-family: var(--font-ui); font-size: 14px; color: var(--text2); font-variant-numeric: tabular-nums; }
.id-xp .row b { color: var(--text); font-family: var(--font-display); font-size: 20px; letter-spacing: -0.02em; }
@media (max-width: 480px) { .id-block { grid-template-columns: 1fr; } .id-block .lvl-ring, .id-block .lvl-ring svg { width: 104px; height: 104px; } .id-block .lvl-ring .avatar { font-size: 34px; } }
.skills { gap: 0; }
.skill { grid-template-columns: minmax(120px, 1fr) 2fr auto; padding: 12px 0; border-top: 1px solid var(--border); }
.skill:last-child { border-bottom: 1px solid var(--border); }
.skill .sl { font-weight: 600; }
.skill .bar { height: 3px; }
.badge-strip { display: flex; gap: 18px; overflow-x: auto; scrollbar-width: none; padding: 6px 2px 10px; margin: 0 -2px; }
.badge-strip::-webkit-scrollbar { display: none; }
.badge-strip .badge { flex: 0 0 96px; border: 0; background: none; padding: 0; gap: 8px; }
.badge-strip .badge .ic { width: 60px; height: 60px; border-radius: 50%; background: var(--gold-soft); color: var(--gold); box-shadow: inset 0 0 0 1px rgba(242, 178, 74, 0.5); }
.badge-strip .badge .ic .i { font-size: 26px; }
.badge-strip .badge.off .ic { background: var(--surface2); color: var(--muted); box-shadow: inset 0 0 0 1px var(--border); }
.badge-strip .badge.off { opacity: 0.6; filter: none; }
.foot-line { font-family: var(--font-ui); font-size: 12.5px; color: var(--muted); padding-top: 8px; }

/* ── Plans: the ledger ──────────────────────────────────────────────── */
.plans-page .price-top { padding-top: 12px; }
.plans-page .ledger .lrow { cursor: pointer; text-align: start; width: 100%; transition: opacity 160ms ease; }
.plans-page .lrow .pick { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--border2); display: grid; place-items: center; color: transparent; transition: background 150ms ease, border-color 150ms ease, color 150ms ease; }
.plans-page .lrow .pick .i { font-size: 13px; }
.plans-page .lrow[aria-pressed="true"] .pick { background: var(--teal); border-color: var(--teal); color: #05201C; }
.plans-page .lrow[aria-pressed="true"] .name { color: var(--teal2); }
:root[data-theme="dark"] .plans-page .lrow[aria-pressed="true"] .name { color: var(--teal); }
.plans-page .lrow.professional[aria-pressed="true"] .pick { background: var(--gold); border-color: var(--gold); }
.plans-page .lrow .badge.cur { background: var(--text); color: var(--bg); }
.plans-page .lrow .perks { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 18px; font-family: var(--font-ui); font-size: 13px; color: var(--text2); margin-top: -6px; }
.plans-page .lrow .perks li { display: inline-flex; align-items: center; gap: 6px; }
.plans-page .lrow .perks li .i { font-size: 14px; color: var(--teal2); }
:root[data-theme="dark"] .plans-page .lrow .perks li .i { color: var(--teal); }
.plans-page .lrow .perks[hidden] { display: none; }
.plans-page .bill { margin-inline: 0; }
.plans-page .plan-sticky { background: var(--glass); border-top-color: var(--glass-border); }
.ps-in .btn-lg[disabled] { opacity: 0.6; }

/* ── Settings: grouped hairline rows ────────────────────────────────── */
.settings section { gap: 0; }
.settings .setrow { background: none; border: 0; border-top: 1px solid var(--border); border-radius: 0; box-shadow: none; padding: 14px 0; grid-template-columns: 36px minmax(0, 1fr) auto; }
.settings .setrow:last-of-type { border-bottom: 1px solid var(--border); }
.settings .setrow > .ic { width: 36px; height: 36px; background: none; color: var(--teal2); }
:root[data-theme="dark"] .settings .setrow > .ic { color: var(--teal); }
.settings .seg { background: color-mix(in srgb, var(--text) 6%, transparent); }
.settings .sh { margin-bottom: 0; border-bottom: 0; }
.settings .hint { font-size: 13.5px; color: var(--muted); padding-top: 12px; }

/* ── Onboarding and DNA on the new grid ─────────────────────────────── */
.onb2 { max-width: 620px; margin-inline: 0; }
.onb-head h1 { font-size: clamp(30px, 1.4rem + 2vw, 44px); letter-spacing: -0.03em; line-height: 1.04; }
.onb-head .lead { font-size: 16.5px; }
.onb-head .kicker { display: inline-flex; align-items: center; gap: 7px; }
.onb-head .kicker .i { font-size: 14px; }

/* The web shape: the questionnaire sits beside a rail that reads your
 * answers back, so the whole plan is visible while you build it. */
@media (min-width: 1040px) {
  .onb-shell { grid-template-columns: 252px minmax(0, 1fr); gap: 0 64px; align-items: start; }
  .onb-shell .onb2 { max-width: 700px; min-height: 0; padding-bottom: 8px; }
  .onb-shell .onb-top { display: none; }
  .onb-rail { display: grid; gap: 20px; align-content: start; position: sticky; top: 96px; padding-inline-end: 30px; border-inline-end: 1px solid var(--border); min-height: 420px; }
  .onb-rail-top { display: grid; gap: 4px; }
  .onb-rail-top b { font-family: var(--font-ui); font-size: 17px; letter-spacing: -0.01em; }
  .onb-list { list-style: none; display: grid; gap: 2px; }
  .onb-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; padding: 9px 0; position: relative; }
  /* the spine: a hairline that runs between the markers, lit up to here */
  .onb-list li::before { content: ""; position: absolute; inset-inline-start: 11.5px; top: 0; bottom: 0; width: 1px; background: var(--border); }
  .onb-list li:first-child::before { top: 50%; }
  .onb-list li:last-child::before { bottom: 50%; }
  .onb-list li.done::before, .onb-list li.on::before { background: color-mix(in srgb, var(--teal) 45%, var(--border)); }
  .onb-list li.on::before { background: linear-gradient(to bottom, color-mix(in srgb, var(--teal) 45%, var(--border)) 50%, var(--border) 50%); }
  .onb-list .n { position: relative; z-index: 1; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--border2); color: var(--muted); font-family: var(--font-ui); font-size: 11.5px; font-weight: 700; transition: background 200ms ease, border-color 200ms ease, color 200ms ease; }
  .onb-list .n .i { font-size: 13px; }
  .onb-list .tx { display: grid; gap: 2px; padding-top: 2px; min-width: 0; }
  .onb-list .tx b { font-family: var(--font-ui); font-size: 13.5px; font-weight: 600; color: var(--muted); transition: color 200ms ease; }
  .onb-list .tx span { font-size: 12px; line-height: 1.35; color: var(--text2); opacity: 0.72; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .onb-list li.done .n { background: var(--teal); border-color: var(--teal); color: #05201C; }
  .onb-list li.done .tx b { color: var(--text2); }
  .onb-list li.on .n { border-color: var(--teal); color: var(--teal2); box-shadow: 0 0 0 4px var(--teal-soft); }
  .onb-list li.on .tx b { color: var(--text); font-weight: 800; }
  :root[data-theme="dark"] .onb-list li.on .n { color: var(--teal); }
  .onb-note { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 9px; align-items: start; font-size: 12px; line-height: 1.45; color: var(--muted); }
  .onb-note .i { font-size: 14px; margin-top: 1px; }

  /* Options read as a picker board, not a phone list */
  .onb-shell .pickcards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .onb-shell .pickcard { border: 1px solid var(--border); border-radius: 16px; padding: 13px 15px; background: var(--surface); }
  .onb-shell .pickcard .pc-ic { background: var(--surface2); }
  .onb-shell .pickcard.on { border-color: var(--teal); background: var(--teal-soft); }
  .onb-shell .pickcard.on .pc-ic { background: var(--surface); }
  @media (hover: hover) and (pointer: fine) {
    .onb-shell .pickcard:hover { border-color: var(--border2); }
    .onb-shell .pickcard.on:hover { border-color: var(--teal); }
  }
  .onb-shell .more-btn { justify-self: start; }

  .onb-shell .onb-cta { position: static; display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 26px 0 0; margin-top: 4px; background: none; border-top: 1px solid var(--border); }
  .onb-shell .onb-cta .btn { width: auto; }
  .onb-shell .onb-cta .btn-lg { min-width: 232px; }
  .onb-shell .onb-cta .onb-back { display: inline-flex; margin-inline-end: auto; color: var(--muted); }
  .onb-shell .planview { margin-top: 2px; }
}
@media (min-width: 1040px) and (max-width: 1200px) {
  .onb-shell { grid-template-columns: 216px minmax(0, 1fr); gap: 0 40px; }
  .onb-rail { padding-inline-end: 22px; }
}
.pickcards { gap: 0; }
.pickcard { border-radius: 0; border: 0; border-top: 1px solid var(--border); background: none; padding: 14px 2px; }
.pickcard:last-child { border-bottom: 1px solid var(--border); }
.pickcard.on { background: none; }
.pickcard.on .pc-main b { color: var(--teal2); }
:root[data-theme="dark"] .pickcard.on .pc-main b { color: var(--teal); }
.pickcard .pc-ic { background: none; color: var(--text2); }
.pickcard.on .pc-ic { background: var(--teal-soft); color: var(--teal2); }
@media (hover: hover) and (pointer: fine) { .pickcard:hover { border-color: var(--border); } .pickcard:hover .pc-main b { color: var(--teal2); } }
.dna-page { max-width: 720px; margin-inline: 0; }
.planview { background: var(--glass-2); border-color: var(--glass-border); box-shadow: inset 0 1px 0 var(--glass-edge); border-radius: 22px; }
.planview .sec-title h2 { font-size: 19px; }

/* ── Courses and lessons on the same system ─────────────────────────── */
.app-main .prow { border-radius: 0; border: 0; border-top: 1px solid var(--border); background: none; box-shadow: none; padding: 14px 0; }
.app-main .rows { gap: 0; }
.app-main .rows .prow:last-child { border-bottom: 1px solid var(--border); }
@media (hover: hover) and (pointer: fine) { .app-main .prow:hover { border-color: var(--border); box-shadow: none; } .app-main .prow:hover b { color: var(--teal2); } :root[data-theme="dark"] .app-main .prow:hover b { color: var(--teal); } }
.app-main .prow .pr-go { background: none; }
.lesson-page .lesson-body { max-width: 62ch; margin-inline: 0; }
.lesson-body .prose { font-size: 18px; }
.lesson-body h1 { font-size: clamp(30px, 1.4rem + 1.8vw, 44px); letter-spacing: -0.03em; line-height: 1.06; }
.app-main .takeaways li { background: none; border: 0; border-top: 1px solid var(--border); border-radius: 0; padding: 12px 0; }
.app-main .takeaways { gap: 0; }
.app-main .takeaways li:last-child { border-bottom: 1px solid var(--border); }
.app-main .remember { background: var(--glass-2); }
.app-main .quickcheck { background: none; border: 0; box-shadow: none; padding: 20px 0 0; border-top: 1px solid var(--text); border-radius: 0; }
.app-main .cert-card { border-radius: 0; background: none; border: 0; border-block: 1px solid rgba(242, 178, 74, 0.5); padding: 16px 0; }
.app-main .listrow, .app-main .planrow { background: none; border: 0; border-top: 1px solid var(--border); border-radius: 0; box-shadow: none; padding: 16px 0; }

/* ── Empty states and the done cards, quieter ───────────────────────── */
.app-main .empty2 { background: none; border-style: solid; border-color: var(--border); }
.app-main .done-card { background: none; border: 0; box-shadow: none; padding: 20px 0; justify-items: start; text-align: start; }
.app-main .done-card .row { justify-content: flex-start !important; }
.app-main .done-card .big-ic { border-radius: 50%; }
.app-main .translating { background: var(--glass-2); }

/* ── Reduced motion: keep the fades ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .home-hi > * { animation: fade-in 240ms ease both; }
  .lab-strip .go, .lab-strip, .plans-page .lrow, .app-main .q .opt { transition-duration: 1ms !important; }
}
:root[data-reduce-motion="1"] .home-hi > * { animation: fade-in 240ms ease both; }
:root[data-reduce-motion="1"] .lab-strip .go, :root[data-reduce-motion="1"] .lab-strip, :root[data-reduce-motion="1"] .plans-page .lrow, :root[data-reduce-motion="1"] .app-main .q .opt { transition-duration: 1ms !important; }

/* The ledger rows are buttons here (a plan is picked, then the sticky bar acts). */
.plans-page .plan-cards { display: grid; grid-template-columns: 1fr; gap: 0; max-width: none; margin: 0; }
.plans-page .lrow { font: inherit; color: inherit; }
.plans-page .lname { display: block; min-width: 0; }
.plans-page .lname .name { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; display: inline; transition: color 140ms ease; }
.plans-page .lname .tag { display: block; }
.plans-page .ledger .price { display: grid; grid-template-columns: auto auto; justify-content: end; text-align: end; column-gap: 5px; }
.plans-page .ledger .amt { font-size: 30px; }
.plans-page .ledger .sub { font-size: 12.5px; }
/* A change that has not happened yet, so the next bill is never a surprise */
.lnote.pend { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; align-items: start; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 12.5px; line-height: 1.45; color: var(--text2); }
.lnote.pend .i { font-size: 15px; color: var(--teal2); margin-top: 1px; }
:root[data-theme="dark"] .lnote.pend .i { color: var(--teal); }
@media (max-width: 640px) { .plans-page .ledger .price { justify-content: start; text-align: start; } .plans-page .lrow { grid-template-columns: minmax(0, 1fr) auto; } .plans-page .lrow .pick { grid-column: 2; grid-row: 1; } .plans-page .lrow .price { grid-column: 1; } }
/* On a phone the state line already says it: the figure would say it twice. */
@media (max-width: 560px) { .bk-list .rl-n { display: none; } }
/* The chat's top bar wraps on a phone: the book picker takes the row, the usage line the next. */
.ai-top > * { min-width: 0; max-width: 100%; }
.ctxsel { flex: 1 1 220px; }
.ctxsel select { flex: 1; min-width: 0; max-width: 100%; }
.usage { flex-wrap: wrap; }
@media (max-width: 480px) { .ai-page { min-height: 0; } .ai-main { min-height: 70dvh; } }
@media (max-width: 360px) { .ai-empty .chip { white-space: normal; height: auto; min-height: 34px; padding: 6px 12px; text-align: center; line-height: 1.3; } .ai-msgs { padding: 14px 10px; } .ai-empty { padding: 28px 4px; } }
/* On a phone the "next" button spans the row, so the orb at the edge never covers its centre. */
@media (max-width: 560px) { .quiz .row > .btn, .mode-page .quiz .row > .btn { flex: 1 1 auto; justify-content: center; } }
.rd-fin > div:last-child { margin-top: 20px; }

/* Four figures in the narrow desktop aside: two by two, so "Time learned"
 * never breaks into two lines under its number. */
@media (min-width: 1024px) and (max-width: 1400px) { .home-aside .rule-line.four, .aside .rule-line.four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; } }
.rule-line.four .tn span { white-space: nowrap; }

/* My Learning covers: the generic `.rows` reset landed after `.rows.cap` and
 * took its gap away. */
.app-main .rows.cap { gap: 28px 18px; }
@media (max-width: 560px) { .app-main .rows.cap { gap: 22px 14px; } }
/* The floating nav over a display-size heading: enough body in the glass
 * that the words behind it read as a wash, not as a second headline. */
.app-nav .wrap { background: var(--nav-glass); }

/* Pixel sweep: 40px touch targets in the app chrome. */
@media (pointer: coarse) { .lib-bar .segtabs a, .settings .seg button, .seg button { min-height: 40px; } .avatar { width: 40px; height: 40px; } }
/* The app skin (.app-main .q .opt) outranks the site's answer states; restate them. */
.app-main .q .opt.wrong { border-color: var(--rose); background: rgba(242, 109, 109, 0.12); }
.app-main .q .opt.right { border-color: var(--green); }

/* The strip the floating nav lives in fades the page out behind it, so a
 * heading scrolling under the pill dissolves instead of peeking out above. */
.app-nav { background: linear-gradient(to bottom, var(--bg) 0%, color-mix(in srgb, var(--bg) 82%, transparent) 60%, transparent 100%); }
@media (prefers-reduced-transparency: reduce) { .app-nav { background: var(--bg); } }

/* ══════════════════════════════════════════════════════════════════
   Lesson Lab (lab.js): the phone's interactive lecture, one column -
   head · canvas · caption · hint or answers · transport. The canvas is
   the reel's dark 4.5 × 6.35 frame in both themes (a stage is a canvas,
   not a themed card); everything around it is the editorial system.
   Glass only on the floating transport. Motion is transform/opacity,
   ease-out in, faster out; the canvas itself is the lesson and is exempt.
   ══════════════════════════════════════════════════════════════════ */
.lab { --lab-gold: #B45309; --lab-gold-raw: #E8A33D; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto auto; gap: 8px; height: calc(100dvh - var(--app-nav-h) - 12px - max(12px, env(safe-area-inset-bottom))); min-height: 460px; max-width: 640px; margin-inline: auto; }
:root[data-theme="dark"] .lab { --lab-gold: #E8A33D; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lab { --lab-gold: #E8A33D; } }
body.on-lab .app-main { padding: 12px 0 max(12px, env(safe-area-inset-bottom)) !important; }
body.on-lab .app-main .wrap { width: min(1180px, 100% - 32px); }

/* ── Skeleton while the script loads ─────────────────────────────── */
.lab-skel { display: grid; grid-template-rows: auto 1fr auto; gap: 12px; height: 100%; }
.lab-skel span, .lab-skel-stage { display: block; border-radius: 12px; background: var(--surface2); }
.lab-skel-head { display: grid; gap: 8px; } .lab-skel-head span:first-child { width: 90px; height: 12px; } .lab-skel-head span:last-child { width: 60%; height: 20px; }
.lab-skel-stage { width: min(100%, 60dvh); aspect-ratio: 450 / 635; margin-inline: auto; border-radius: 22px; }
.lab-skel-cap { display: grid; gap: 8px; justify-items: center; } .lab-skel-cap span { height: 14px; width: 70%; } .lab-skel-cap span:last-child { width: 45%; }

/* ── Head: brand kicker, title, section, close; a hairline of progress ── */
.lab-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; }
.lab-titles { display: grid; gap: 2px; min-width: 0; }
.lab-title { font-family: var(--font-display); font-size: 18px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin: 0; text-wrap: balance; }
.lab-section { font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; color: var(--violet); min-height: 1.3em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lab-close { border-radius: 50%; }
.lab-prog { grid-column: 1 / -1; height: 2px; border-radius: 2px; background: var(--border); overflow: hidden; }
.lab-prog i { display: block; height: 100%; background: var(--teal); transform-origin: left center; transform: scaleX(0); transition: transform 500ms var(--ease-out); }
[dir="rtl"] .lab-prog i { transform-origin: right center; }

/* ── The canvas: measured fit of the frame, dark in both themes ───── */
.lab-stage { position: relative; min-height: 0; display: grid; place-items: center; outline: 0; touch-action: pan-y; -webkit-tap-highlight-color: transparent; cursor: default; user-select: none; -webkit-user-select: none; }
.lab-stage.drag { touch-action: none; cursor: grab; }
.lab-stage.drag:active { cursor: grabbing; }
.lab-canvas { position: relative; width: 100%; max-width: 100%; max-height: 100%; aspect-ratio: 450 / 635; border-radius: 22px; overflow: hidden; background: #080D17; border: 1px solid var(--border); contain: layout paint; }
.lab-stage:focus-visible .lab-canvas { outline: 2px solid var(--teal); outline-offset: 3px; }
.lab-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out); }
.lab-svg.prep { opacity: 0; transition: none; pointer-events: none; }
.lab-svg.enter { opacity: 0; transform: translateX(calc(var(--dir, 1) * 6%)); }
.lab-svg.leave { opacity: 0; transform: translateX(calc(var(--dir, 1) * -6%)); transition-duration: 300ms; pointer-events: none; }

/* ── Caption: three lines of room at the text's own size; the old line
      fades fully out before the new one fades in ────────────────────── */
.lab-cap { min-height: calc(1.35em * 3 + 4px); display: grid; align-items: start; text-align: center; padding: 0 8px; }
.lab-cap p { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.35; font-weight: 500; color: var(--text); text-wrap: pretty; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; transition: opacity 220ms var(--ease-out); }
.lab-cap p.hide { opacity: 0; transition-duration: 110ms; }
@media (min-width: 760px) { .lab-cap p { font-size: 17px; } }

/* ── Hint pill or answer chips (one row, never both) ─────────────── */
.lab-row { min-height: 44px; display: grid; place-items: center; }
.lab-hint { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--lab-gold-raw) 60%, transparent); background: color-mix(in srgb, var(--lab-gold-raw) 10%, transparent); color: var(--lab-gold); font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; opacity: 0; transition: opacity 250ms ease; }
.lab-hint .i { font-size: 14px; }
.lab-hint.on { opacity: 1; animation: lab-breathe 900ms ease-in-out infinite alternate; }
.lab-hint.paused { animation-play-state: paused; }
@keyframes lab-breathe { from { transform: scale(1); } to { transform: scale(1.04); } }
.lab-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.lab-chip { height: 40px; padding: 0 16px; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--lab-gold-raw) 70%, transparent); background: color-mix(in srgb, var(--lab-gold-raw) 8%, transparent); color: var(--lab-gold); font-family: var(--font-ui); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; animation: lab-chip-in 320ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 90ms); transition: transform 120ms var(--ease-out), background 220ms ease, border-color 220ms ease, color 220ms ease; }
.lab-chip:active { transform: scale(0.97); }
.lab-chip:disabled { cursor: default; }
.lab-chip[data-state="picked"] { border-color: var(--lab-gold-raw); background: color-mix(in srgb, var(--lab-gold-raw) 25%, transparent); color: var(--text); }
.lab-chip[data-state="right"], .lab-chip[data-state="reveal"] { border-color: var(--teal); background: rgba(24, 184, 166, 0.22); color: var(--text); }
.lab-chip[data-state="wrong"] { border-color: var(--rose); background: rgba(242, 109, 109, 0.18); color: var(--text); }
.lab-chip[data-state="dim"] { border-color: var(--border); background: transparent; color: var(--muted); }
@keyframes lab-chip-in { from { opacity: 0; transform: translateY(40%); } to { opacity: 1; transform: none; } }
.lab-done { animation: lab-chip-in 300ms var(--ease-out) both; }

/* ── Transport: a floating glass pill; Back and Next at the two ends,
      the play/pause control in the middle, replay and speed beside it ── */
.lab-bar { position: sticky; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; border-radius: 999px; }
.lab-mid { display: flex; align-items: center; gap: 10px; }
.lab-nav, .lab-round, .lab-play { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border2); background: transparent; color: var(--text); font-family: var(--font-ui); font-weight: 600; cursor: pointer; transition: transform 140ms var(--ease-out), background 160ms ease, border-color 160ms ease, color 160ms ease, opacity 160ms ease; -webkit-tap-highlight-color: transparent; }
.lab-nav:active, .lab-round:active, .lab-play:active { transform: scale(0.96); }
.lab-nav:disabled, .lab-round:disabled, .lab-play:disabled { opacity: 0.4; cursor: default; transform: none; }
.lab-nav { height: 40px; padding: 0 12px 0 8px; border-radius: 999px; gap: 2px; font-size: 13px; }
.lab-nav.trailing { padding: 0 8px 0 12px; }
.lab-nav .i { font-size: 18px; }
.lab-round { width: 40px; height: 40px; border-radius: 50%; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lab-round .i { font-size: 17px; }
.lab-round.on { color: var(--teal2); border-color: var(--teal); }
:root[data-theme="dark"] .lab-round.on { color: var(--teal); }
.lab-play { width: 50px; height: 50px; border-radius: 50%; background: var(--teal-soft); border: 1.5px solid rgba(24, 184, 166, 0.55); color: var(--teal2); }
:root[data-theme="dark"] .lab-play { color: var(--teal); }
.lab-play .i { font-size: 22px; }
.lab-play .ic-play { display: none; }
.lab-play.paused { background: var(--teal); border-color: var(--teal); color: #05201C; }
.lab-play.paused .ic-play { display: inline-flex; } .lab-play.paused .ic-pause { display: none; }
@media (hover: hover) and (pointer: fine) {
  .lab-nav:not(:disabled):hover, .lab-round:not(:disabled):hover { border-color: var(--teal); background: var(--teal-soft); }
  .lab-play:not(:disabled):not(.paused):hover { background: rgba(24, 184, 166, 0.22); }
}
.lab-nav:focus-visible, .lab-round:focus-visible, .lab-play:focus-visible, .lab-chip:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
@media (max-width: 380px) { .lab-nav span { display: none; } .lab-nav, .lab-nav.trailing { width: 40px; padding: 0; } }
/* the speed menu grows out of its button */
.lab-speedwrap { position: relative; }
.lab-speed-menu { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); transform-origin: bottom center; min-width: 96px; padding: 6px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); z-index: var(--z-menu); display: grid; gap: 2px; animation: lab-pop 160ms var(--ease-out); }
.lab-speed-menu[hidden] { display: none; }
.lab-speed-menu button { height: 36px; border-radius: 10px; border: 0; background: transparent; color: var(--text); font-family: var(--font-ui); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; transition: background 120ms ease, transform 100ms var(--ease-out); }
.lab-speed-menu button:active { transform: scale(0.97); }
.lab-speed-menu button[aria-checked="true"] { background: var(--teal-soft); color: var(--teal2); }
:root[data-theme="dark"] .lab-speed-menu button[aria-checked="true"] { color: var(--teal); }
@media (hover: hover) and (pointer: fine) { .lab-speed-menu button:hover { background: var(--surface2); } }
@keyframes lab-pop { from { opacity: 0; transform: translateX(-50%) scale(0.95); } to { opacity: 1; transform: translateX(-50%) scale(1); } }

/* ── Title card: breathes in over the empty canvas, dissolves on Start ── */
.lab-cover { position: absolute; inset: 0; grid-row: 1 / -1; grid-column: 1 / -1; z-index: 2; display: grid; place-items: center; text-align: center; background: var(--bg); border-radius: 22px; transition: opacity 450ms ease; }
.lab-cover.gone { opacity: 0; pointer-events: none; }
.lab-cover-in { display: grid; justify-items: center; gap: 16px; padding: 0 24px; width: min(100%, 440px); box-sizing: border-box; }
.lab-cover-in > * { animation: lab-rise 600ms var(--ease-out) both; }
.lab-cover-in > :nth-child(2) { animation-delay: 120ms; } .lab-cover-in > :nth-child(3) { animation-delay: 360ms; } .lab-cover-in > :nth-child(4) { animation-delay: 520ms; } .lab-cover-in > :nth-child(5) { animation-delay: 640ms; }
.lab-cover-title { font-family: var(--font-display); font-size: clamp(30px, 6vw, 40px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin: 0; text-wrap: balance; }
.lab-rule { width: 56px; height: 3px; border-radius: 2px; background: var(--lab-gold-raw); }
.lab-cover-line { margin: 0; font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: var(--text2); text-wrap: pretty; }
.lab-cover-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }
@keyframes lab-rise { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }

/* ── Reduced motion keeps the fades, drops the movement ──────────── */
@media (prefers-reduced-motion: reduce) {
  .lab-svg.enter, .lab-svg.leave { transform: none; }
  .lab-hint.on { animation: none; }
  .lab-chip, .lab-done, .lab-cover-in > * { animation: fade-in 240ms ease both; animation-delay: 0ms; }
  .lab-speed-menu { animation: fade-in 120ms ease; }
  .lab-nav:active, .lab-round:active, .lab-play:active, .lab-chip:active { transform: none; }
}
:root[data-reduce-motion="1"] .lab-svg.enter, :root[data-reduce-motion="1"] .lab-svg.leave { transform: none; }
:root[data-reduce-motion="1"] .lab-hint.on { animation: none; }
:root[data-reduce-motion="1"] .lab-chip, :root[data-reduce-motion="1"] .lab-done, :root[data-reduce-motion="1"] .lab-cover-in > * { animation: fade-in 240ms ease both; animation-delay: 0ms; }
:root[data-reduce-motion="1"] .lab-speed-menu { animation: fade-in 120ms ease; }
@media (prefers-reduced-transparency: reduce) { .lab-bar { background: var(--surface); } }
@media (prefers-contrast: more) { .lab-bar { background: var(--bg); border: 2px solid var(--text); } }

/* ══════════════════════════════════════════════════════════════════
   Lesson Lab, wide (≥ 900 px): the same lesson, staged for a laptop.
   The framed phone card goes; the drawing sits on the page itself,
   scaled to the full height between the nav and the transport, with a
   faint vignette so it still reads as a stage. Left column: kicker,
   title, section, the section list (a jump is a Back/Next jump), the
   "Your turn" pill. Right column: the caption set large, the answer
   chips, the live readouts as real text (hidden inside the SVG here,
   shown inside it on phones). Below 900 px nothing in this block
   applies: the side wrappers are display: contents and the phone
   layout is untouched.
   ══════════════════════════════════════════════════════════════════ */
.lab-left, .lab-right { display: contents; }
.lab-head { grid-row: 1; } .lab-stage { grid-row: 2; } .lab-cap { grid-row: 3; } .lab-hintbox, .lab-row { grid-row: 4; grid-column: 1; } .lab-bar { grid-row: 5; }
.lab-hintbox { min-height: 44px; display: grid; place-items: center; }
.lab-toc, .lab-read, .lab-fin, .lab-k-lab { display: none; }

@media (min-width: 900px) {
  .lab { --lab-side: clamp(220px, 24%, 300px); --lab-bar-h: 80px; max-width: none; gap: 0 28px; grid-template-columns: var(--lab-side) minmax(0, 1fr) var(--lab-side); grid-template-rows: minmax(0, 1fr) var(--lab-bar-h); height: calc(100dvh - var(--app-nav-h) - 8px - max(8px, env(safe-area-inset-bottom))); min-height: 520px; }
  body.on-lab .app-main { padding: 8px 0 max(8px, env(safe-area-inset-bottom)) !important; }
  body.on-lab .app-main .wrap { width: min(1180px, 100% - 48px); }
  .lab-left, .lab-right { display: flex; flex-direction: column; min-width: 0; min-height: 0; gap: 22px; padding-top: 10px; }
  .lab-left { grid-area: 1 / 1 / 2 / 2; }
  .lab-right { grid-area: 1 / 3 / 2 / 4; }
  .lab-stage { grid-area: 1 / 2 / 2 / 3; }
  .lab-bar { grid-area: 2 / 2 / 3 / 3; justify-self: center; align-self: end; margin-bottom: 2px; }
  .lab-head, .lab-cap, .lab-hintbox, .lab-row { grid-area: auto; grid-row: auto; grid-column: auto; }

  /* the stage: the page is the canvas; a vignette behind the drawing */
  .lab-stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 58% 52% at 50% 52%, color-mix(in srgb, var(--text) 7%, transparent), transparent 72%); }
  .lab-canvas { border-radius: 0; border: 0; background: transparent; contain: layout; }
  .lab-svg .lab-bg { display: none; }
  .lab-svg .lab-ro { display: none; }
  .lab-stage:focus-visible .lab-canvas { outline: 0; }
  .lab-stage:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; border-radius: 22px; }
  /* the drawing was inked for the reel's dark frame; in the light theme
     its neutrals take the page's own ink (exact-colour overrides, so the
     gold, teal, violet and red shapes stay themselves; gold and teal TEXT
     take the darker inks the rest of the app uses on light) */
  :root[data-theme="light"] .lab-svg [fill="#F4F7FB"] { fill: var(--text); }
  :root[data-theme="light"] .lab-svg [fill="#A9B4C5"] { fill: var(--text2); }
  :root[data-theme="light"] .lab-svg [stroke="#A9B4C5"], :root[data-theme="light"] .lab-svg [stroke="rgba(169,180,197,0.900)"] { stroke: var(--text2); }
  :root[data-theme="light"] .lab-svg [stroke="#26344A"] { stroke: var(--border2); }
  :root[data-theme="light"] .lab-svg [fill="#26344A"] { fill: var(--border2); }
  :root[data-theme="light"] .lab-svg text[fill="#E8A33D"] { fill: var(--lab-gold); }
  :root[data-theme="light"] .lab-svg text[fill="#18B8A6"] { fill: var(--teal2); }
  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .lab-svg [fill="#F4F7FB"] { fill: var(--text); }
    :root:not([data-theme="dark"]) .lab-svg [fill="#A9B4C5"] { fill: var(--text2); }
    :root:not([data-theme="dark"]) .lab-svg [stroke="#A9B4C5"], :root:not([data-theme="dark"]) .lab-svg [stroke="rgba(169,180,197,0.900)"] { stroke: var(--text2); }
    :root:not([data-theme="dark"]) .lab-svg [stroke="#26344A"] { stroke: var(--border2); }
    :root:not([data-theme="dark"]) .lab-svg [fill="#26344A"] { fill: var(--border2); }
    :root:not([data-theme="dark"]) .lab-svg text[fill="#E8A33D"] { fill: var(--lab-gold); }
    :root:not([data-theme="dark"]) .lab-svg text[fill="#18B8A6"] { fill: var(--teal2); }
  }
  /* the hole is punched with the page colour in both themes */
  .lab-svg circle[fill="#080D17"] { fill: var(--bg); }

  /* left column */
  .lab-k-brand { display: none; } .lab-k-lab { display: inline-flex; }
  .lab-head { gap: 6px 12px; padding-bottom: 16px; border-bottom: 1px solid var(--text); }
  .lab-title { font-size: clamp(24px, 1rem + 1.2vw, 30px); letter-spacing: -0.03em; line-height: 1.05; }
  .lab-section { font-size: 13.5px; margin-top: 2px; }
  .lab-prog { margin-top: 8px; }
  .lab-toc { display: block; min-height: 0; overflow: auto; overscroll-behavior: contain; }
  .lab-toc ol { list-style: none; margin: 0; padding: 0; }
  .lab-toc li { border-bottom: 1px solid var(--border); }
  .lab-toc button { display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto auto; gap: 2px 10px; align-items: baseline; width: 100%; padding: 14px 0 14px; border: 0; background: transparent; color: var(--text2); text-align: start; font-family: var(--font-ui); cursor: pointer; border-radius: 10px; transition: transform 140ms var(--ease-out), color 200ms ease; -webkit-tap-highlight-color: transparent; }
  .lab-toc button:active { transform: scale(0.985); }
  .lab-toc button:disabled { cursor: default; opacity: 0.55; transform: none; }
  .lab-toc button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
  .lab-toc .n { grid-row: 1 / 3; font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; line-height: 1; color: var(--muted); font-variant-numeric: tabular-nums; align-self: start; padding-top: 1px; }
  .lab-toc .tt { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -0.015em; line-height: 1.25; color: var(--text2); text-wrap: balance; transition: color 200ms ease; }
  .lab-toc .ct { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .lab-toc .thin { grid-column: 2; margin-top: 6px; height: 2px; }
  .lab-toc .thin i { width: 100%; transform: scaleX(0); transition: transform 500ms var(--ease-out); }
  [dir="rtl"] .lab-toc .thin i { transform-origin: 100% 50%; }
  .lab-toc button[aria-current] .tt, .lab-toc button[aria-current] .n { color: var(--text); }
  .lab-toc button[aria-current] .ct { color: var(--violet); font-weight: 600; }
  .lab-toc button.done:not([aria-current]) .tt { color: var(--text2); }
  .lab-toc button.done .thin i, .lab-toc button[aria-current] .thin i { background: var(--teal); }
  @media (hover: hover) and (pointer: fine) { .lab-toc button:not(:disabled):hover .tt { color: var(--text); } }
  .lab-hintbox { margin-top: auto; min-height: 36px; place-items: center start; }
  .lab-hint { height: 36px; padding: 0 14px; font-size: 13px; transform-origin: 0 50%; }
  [dir="rtl"] .lab-hint { transform-origin: 100% 50%; }

  /* right column: the caption, set large; chips; the readouts as text */
  .lab-cap { min-height: 0; text-align: start; padding: 0; align-items: start; }
  .lab-cap p { font-size: clamp(22px, 1rem + 0.7vw, 26px); line-height: 1.3; font-weight: 500; letter-spacing: -0.012em; -webkit-line-clamp: 7; }
  .lab-row { min-height: 0; place-items: start; }
  .lab-row:empty { display: none; }
  .lab-row .lab-done { display: none; }
  .lab-chips { justify-content: flex-start; gap: 10px; }
  .lab-chip { height: 44px; padding: 0 18px; font-size: 15px; }
  .lab-read { display: grid; gap: 6px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); font-family: var(--font-ui); font-variant-numeric: tabular-nums; opacity: 0; transition: opacity 200ms ease; }
  .lab-read.has { opacity: 1; }
  .lab-live { display: grid; gap: 4px; transition: opacity 240ms ease, transform 240ms var(--ease-out); }
  .lab-live > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 18px; font-weight: 600; }
  .lab-live > div span { font-size: 15px; font-weight: 600; color: var(--text2); }
  .lab-live > div b { font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: -0.02em; line-height: 1.1; }
  .lab-ro-x b { color: var(--lab-gold); }
  .lab-ro-fx b { color: var(--teal2); }
  :root[data-theme="dark"] .lab-ro-fx b { color: var(--teal); }
  /* the value table sits above x / f(x), so new rows grow upward and the
     live pair stays anchored at the bottom */
  .lab-rows { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; order: -1; }
  .lab-rows li:empty { display: none; }
  .lab-rows li { font-size: 17px; font-weight: 600; color: var(--text); line-height: 1.35; transform-origin: 0 50%; transition: opacity 240ms ease, transform 240ms var(--ease-out); }
  .lab-rows li[data-color="gold"] { color: var(--lab-gold); }
  .lab-rows li.rr { color: var(--violet); }
  [dir="rtl"] .lab-rows li { transform-origin: 100% 50%; }

  /* the transport: the same pill, sized to its buttons, centred under the stage */
  .lab-bar { gap: 18px; padding: 8px 10px; }
  .lab-nav { padding: 0 14px 0 10px; } .lab-nav.trailing { padding: 0 10px 0 14px; }

  /* the title card and the finish: full-width statements, left-set on
     the twelve columns, the gold rule; not centred cards */
  .lab-cover, .lab-fin { position: absolute; inset: 0; z-index: 2; display: grid; place-items: stretch; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; align-content: center; text-align: start; border-radius: 0; background: var(--bg); }
  .lab-fin { grid-area: 1 / 1 / 2 / 4; inset: auto; position: relative; min-height: 0; background: color-mix(in srgb, var(--bg) 94%, transparent); animation: fade-in 320ms ease both; }
  .lab-fin[hidden] { display: none; }
  .lab-cover-in, .lab-fin-in { display: grid; grid-column: 1 / 9; justify-self: stretch; align-self: center; justify-items: start; width: auto; padding: 0 0 6vh; gap: 20px; }
  .lab-fin-in > * { animation: lab-rise 600ms var(--ease-out) both; }
  .lab-fin-in > :nth-child(2) { animation-delay: 120ms; } .lab-fin-in > :nth-child(3) { animation-delay: 360ms; } .lab-fin-in > :nth-child(4) { animation-delay: 520ms; } .lab-fin-in > :nth-child(5) { animation-delay: 640ms; }
  .lab-cover-title, .lab-fin-title { font-family: var(--font-display); font-size: clamp(40px, 1.6rem + 3vw, 68px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.0; margin: 0; max-width: 16ch; text-wrap: balance; }
  .lab-rule { width: 72px; height: 3px; }
  .lab-cover-line { font-size: 18px; max-width: 46ch; }
  .lab-cover-actions { justify-content: flex-start; margin-top: 10px; }
  .lab-cover-in .lab-rule, .lab-fin-in .lab-rule { transform-origin: 0 50%; }
  [dir="rtl"] .lab-cover-in .lab-rule, [dir="rtl"] .lab-fin-in .lab-rule { transform-origin: 100% 50%; }

  /* the skeleton in the same shape */
  .lab-skel { grid-template-columns: var(--lab-side) minmax(0, 1fr) var(--lab-side); grid-template-rows: 1fr; gap: 28px; }
  .lab-skel-head { padding-top: 10px; align-content: start; } .lab-skel-head span:last-child { width: 80%; height: 26px; }
  .lab-skel-stage { width: auto; height: 100%; aspect-ratio: auto; border-radius: 0; background: radial-gradient(ellipse 58% 52% at 50% 52%, color-mix(in srgb, var(--text) 7%, transparent), transparent 72%); }
  .lab-skel-cap { justify-items: start; align-content: start; padding-top: 10px; } .lab-skel-cap span { height: 22px; width: 90%; } .lab-skel-cap span:last-child { width: 60%; }

  /* reduced motion, contrast and transparency, as before */
  @media (prefers-reduced-motion: reduce) {
    .lab-fin-in > * { animation: fade-in 240ms ease both; animation-delay: 0ms; }
    .lab-toc button:active { transform: none; }
    .lab-live, .lab-rows li { transition: opacity 240ms ease; transform: none !important; }
  }
  :root[data-reduce-motion="1"] .lab-fin-in > * { animation: fade-in 240ms ease both; animation-delay: 0ms; }
  :root[data-reduce-motion="1"] .lab-live, :root[data-reduce-motion="1"] .lab-rows li { transition: opacity 240ms ease; transform: none !important; }
  @media (prefers-reduced-transparency: reduce) { .lab-fin { background: var(--bg); } }
  @media (prefers-contrast: more) { .lab-stage::before { display: none; } .lab-toc button[aria-current] { outline: 2px solid var(--text); outline-offset: -2px; } }
}

/* ── Corporate ──────────────────────────────────────────────────────────
 * The two doors, the wizard, welcome, the employee onboarding and the
 * company console (corp.js). --brand is the company's colour when its plan
 * allows one; corp.js also retints --teal while a company is worn, so the
 * ordinary parts follow without their own rules. */
:root { --brand: var(--teal); --info: #3B9CF0; --violet2: #7C5CFF; --streak: #F26D6D; --ok: var(--green2); }
body.guest .app-nav .brand { font-family: var(--font-display); font-weight: 800; display: inline-flex; align-items: center; gap: 10px; }
.corp-door { display: grid; justify-items: center; padding: 8px 0 32px; }
.corp-panel { width: min(520px, 100%); padding: 28px 24px 24px; display: grid; gap: 14px; position: relative; }
.corp-door.wide .corp-panel { width: min(640px, 100%); }
@media (max-width: 400px) { .corp-panel { padding: 22px 16px 18px; } }
.corp-back { position: absolute; top: 12px; inset-inline-start: 12px; display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 10px; border-radius: 999px; font-family: var(--font-ui); font-size: 13.5px; font-weight: 600; color: var(--text2); transition: background 140ms ease, transform 120ms var(--ease-out); }
.corp-back:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .corp-back:hover { background: var(--surface2); color: var(--text); } }
.corp-head { display: grid; justify-items: center; text-align: center; gap: 8px; padding-top: 22px; }
.corp-head h1, .corp-head h2 { text-wrap: balance; margin-top: 8px; }
.corp-head .lead { font-size: 15.5px; max-width: 44ch; }
.corp-head.welcome h1 { font-size: clamp(26px, 4vw, 34px); }
.corp-glyph { width: 76px; height: 76px; border-radius: 20px; display: grid; place-items: center; background: var(--teal-soft); color: var(--teal2); animation: pop 380ms var(--ease-out); }
:root[data-theme="dark"] .corp-glyph { color: var(--teal); }
.corp-glyph .i { font-size: 36px; }
.corp-mark { width: var(--s); height: var(--s); border-radius: calc(var(--s) * 0.26); overflow: hidden; display: block; }
.corp-mark img { width: 100%; height: 100%; display: block; }
.corp-logo { --s: 56px; width: var(--s); height: var(--s); border-radius: calc(var(--s) * 0.28); overflow: hidden; display: grid; place-items: center; background: var(--surface2); flex: none; }
.corp-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.corp-logo.initial { background: color-mix(in srgb, var(--brand) 16%, var(--surface)); color: var(--brand); font-family: var(--font-display); font-weight: 800; font-size: calc(var(--s) * 0.44); border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent); }
.corp-logo.pop { animation: pop 380ms var(--ease-out); }
.corp-powered { display: flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; color: var(--muted); }
.corp-powered .i { font-size: 14px; }
.corp-form { display: grid; gap: 2px; }
.corp-form .field { margin-bottom: 10px; }
.corp-form .field .lb, .field .lb { font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; color: var(--text2); display: block; margin-bottom: 6px; }
.corp-form .btn.wide, .corp-panel .btn.wide, .btn.wide { width: 100%; }
.corp-form .btn + .btn, .corp-panel .btn + .btn { margin-top: 8px; }
.hint { font-family: var(--font-ui); font-size: 13px; color: var(--muted); line-height: 1.45; }
.hint.center-t, .center-t { text-align: center; }
.num { font-variant-numeric: tabular-nums; }
.corp-h2 { font-size: 17px; font-weight: 700; margin: 12px 0 8px; }
.corp-err { display: none; font-family: var(--font-ui); font-size: 13.5px; font-weight: 600; color: var(--err); margin: 2px 0 10px; }
.corp-err.on { display: block; }
.corp-pw { position: relative; }
.corp-pw input { width: 100%; padding-inline-end: 48px; }
.corp-pw .btn-icon { position: absolute; inset-inline-end: 4px; top: 3px; width: 40px; height: 40px; border: 0; background: transparent; color: var(--muted); }
.corp-pw .btn-icon[aria-pressed="true"] { color: var(--teal2); }
.corp-ro { position: relative; display: block; }
.corp-ro input { width: 100%; padding-inline-start: 42px; }
.corp-ro input[readonly] { color: var(--text2); background: var(--surface2); }
.corp-ro > .i, .corp-ro .i-lead { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 18px; pointer-events: none; display: inline-flex; }
.field.search { margin-bottom: 12px; }
.field small.hint { display: block; margin-top: 4px; }
.corp-email-line { display: flex; align-items: center; gap: 8px; color: var(--text2); font-family: var(--font-ui); font-size: 14.5px; }
.corp-email-line .i { color: var(--muted); font-size: 18px; flex: none; }
.corp-email-line .clamp1 { flex: 1; min-width: 0; }
.corp-email-line .btn { margin: 0; }
.corp-c { padding: 18px; display: grid; gap: 12px; }
.card.corp-c.pop { animation: pop 250ms var(--ease-out); }
.corp-c .btn.wide { justify-content: center; }
.corp-c form .btn + .btn { margin-top: 8px; }
.corp-note { grid-template-columns: 40px 1fr; align-items: start; gap: 12px; animation: pop 250ms var(--ease-out); }
.corp-note > div { display: grid; gap: 4px; min-width: 0; }
.corp-note b { font-family: var(--font-ui); font-size: 15px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.corp-note span { font-size: 14px; color: var(--text2); }
.corp-note .btn { grid-column: 1 / -1; }
.corp-note.warn { border-color: color-mix(in srgb, var(--amber) 45%, var(--border)); }
.corp-note.err { border-color: color-mix(in srgb, var(--rose) 45%, var(--border)); }
.corp-row { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; min-width: 0; }
.corp-row .cr-t { display: grid; gap: 2px; min-width: 0; }
.corp-row .cr-t b { font-family: var(--font-ui); font-size: 15px; }
.corp-row .cr-t span { font-size: 13.5px; color: var(--text2); }
.corp-row .cr-t h1 { font-size: 22px; }
.corp-line { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; }
.corp-line > .i { font-size: 20px; color: var(--teal2); flex: none; margin-top: 1px; }
:root[data-theme="dark"] .corp-line > .i { color: var(--teal); }
.corp-line.warn > .i { color: var(--gold); }
.corp-line.ok > .i { color: var(--ok); }
.corp-line > div { display: grid; gap: 2px; min-width: 0; }
.corp-line .lb { margin: 0; }
.corp-line .spin.sm { flex: none; margin-top: 2px; }
.corp-perks .corp-line + .corp-line { margin-top: 2px; }
.corp-ic { --s: 40px; width: var(--s); height: var(--s); border-radius: calc(var(--s) * 0.3); display: grid; place-items: center; background: var(--surface2); color: var(--muted); flex: none; }
.corp-ic .i { font-size: calc(var(--s) * 0.5); }
.corp-ic.teal { background: var(--teal-soft); color: var(--teal2); }
:root[data-theme="dark"] .corp-ic.teal { color: var(--teal); }
.corp-ic.ok { background: rgba(63, 191, 127, 0.16); color: var(--ok); }
.corp-ic.warn { background: var(--amber-soft); color: var(--gold); }
.corp-ic.err { background: rgba(242, 109, 109, 0.16); color: var(--rose); }
.corp-ic.info { background: rgba(59, 156, 240, 0.16); color: var(--info); }
.corp-ic.gold { background: var(--gold-soft); color: var(--gold); }
.corp-ic.violet { background: var(--violet-soft); color: var(--violet2); }
.corp-ic.streak { background: rgba(242, 109, 109, 0.14); color: var(--streak); }
.corp-ic.muted { background: var(--surface2); color: var(--muted); }
.corp-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font-family: var(--font-ui); font-size: 11.5px; font-weight: 700; white-space: nowrap; background: var(--surface2); color: var(--text2); border: 1px solid var(--border); }
.corp-tag.ok { background: rgba(63, 191, 127, 0.14); color: var(--ok); border-color: transparent; }
.corp-tag.warn { background: var(--amber-soft); color: var(--gold); border-color: transparent; }
.corp-tag.err { background: rgba(242, 109, 109, 0.14); color: var(--rose); border-color: transparent; }
.corp-tag.info { background: rgba(59, 156, 240, 0.14); color: var(--info); border-color: transparent; }
.corp-tag.teal { background: var(--teal-soft); color: var(--teal2); border-color: transparent; }
:root[data-theme="dark"] .corp-tag.teal { color: var(--teal); }
.corp-tag.brand { background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); border-color: color-mix(in srgb, var(--brand) 40%, transparent); }
.corp-tag.muted { background: var(--surface2); color: var(--muted); }
.corp-actions { flex-wrap: wrap; gap: 8px; }
.corp-actions.between { justify-content: space-between; }
.corp-actions .btn { margin: 0; }
.row.end { justify-content: flex-end; }
.row.between { justify-content: space-between; }
.corp-foot { display: grid; justify-items: center; gap: 6px; padding-top: 14px; border-top: 1px solid var(--border); }
.corp-foot .btn { margin: 0; }
.btn.ok { color: var(--ok); }
.btn.danger-t { color: var(--rose); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Steps */
.corp-wtitle { text-align: center; padding-top: 4px; }
.corp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; list-style: none; margin: 0; padding: 0; }
.corp-steps li { display: grid; gap: 6px; }
.corp-steps .bar { display: block; height: 4px; border-radius: 2px; background: var(--border); transition: background 200ms ease; }
.corp-steps li.on .bar { background: var(--teal); }
.corp-steps .lb { font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.corp-steps li.on .lb { color: var(--text); }
.corp-step { display: grid; gap: 12px; animation: pop 240ms var(--ease-out); }
.corp-step > .lead { font-size: 15px; }
.corp-logo-pick { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.corp-logo-pick > div { display: grid; gap: 2px; min-width: 0; }
.corp-logo-pick b { font-family: var(--font-ui); font-size: 15px; }
.corp-logo-pick span:not(.corp-logo) { font-size: 13.5px; color: var(--text2); }
.corp-logo-pick .row { gap: 8px; flex-wrap: wrap; }
.corp-logo-btn { position: relative; border: 0; background: none; padding: 0; cursor: pointer; border-radius: 22px; transition: transform 120ms var(--ease-out); }
.corp-logo-btn:active { transform: scale(0.96); }
.corp-logo-btn .cam { position: absolute; right: -6px; bottom: -6px; width: 26px; height: 26px; border-radius: 50%; background: var(--teal); color: #fff; display: grid; place-items: center; border: 2px solid var(--surface); }
.corp-logo-btn .cam .i { font-size: 13px; }
.corp-plans { display: grid; gap: 10px; }
.corp-plan { text-align: start; display: grid; gap: 8px; padding: 16px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); cursor: pointer; transition: border-color 160ms ease, box-shadow 200ms ease, transform 160ms var(--ease-out); }
.corp-plan:active { transform: scale(0.985); }
.corp-plan.on { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal) inset; }
.corp-plan:disabled { cursor: default; }
.corp-plan .pl-top { display: flex; align-items: center; gap: 8px; }
.corp-plan .pl-top b { font-family: var(--font-ui); font-size: 16px; flex: 1; min-width: 0; }
.corp-plan .pl-check { color: var(--teal2); font-size: 20px; }
:root[data-theme="dark"] .corp-plan .pl-check { color: var(--teal); }
.corp-plan .pl-tag { font-size: 14px; color: var(--text2); }
.corp-plan .pl-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.corp-plan .pl-perks li { display: flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 13.5px; color: var(--text2); }
.corp-plan .pl-perks .tick { color: var(--teal2); font-size: 16px; }
:root[data-theme="dark"] .corp-plan .pl-perks .tick { color: var(--teal); }
.corp-entc { grid-template-columns: 1fr; gap: 4px; }
.corp-entc b { font-family: var(--font-ui); font-size: 16px; }
.corp-entc span { font-size: 14px; color: var(--text2); }
.corp-colour .cf-row { display: grid; grid-template-columns: 46px 1fr; gap: 8px; }
.corp-colour input[type="color"] { width: 46px; height: 46px; padding: 3px; border-radius: 12px; border: 1px solid var(--border2); background: var(--bg); cursor: pointer; }
.corp-colour input[type="color"]:disabled { opacity: 0.5; cursor: default; }
.corp-colour input[type="text"] { font-family: ui-monospace, monospace; text-transform: uppercase; }
.corp-colour input:disabled { color: var(--muted); }
/* Code entry */
.corp-code { display: grid; gap: 10px; }
.corp-code .field { margin: 4px 0 0; }
.code-field { font-family: var(--font-display); font-weight: 700; font-size: 30px; letter-spacing: 0.4em; text-align: center; font-variant-numeric: tabular-nums; padding-inline-start: calc(14px + 0.4em) !important; height: 60px !important; }
.code-field::placeholder { color: var(--border2); letter-spacing: 0.4em; }
.code-field.shake { animation: shake 360ms var(--ease-out); }
.corp-verified { display: flex; align-items: center; gap: 12px; animation: pop 250ms var(--ease-out); }
.corp-verified > div { display: grid; gap: 2px; min-width: 0; }
.corp-verified b { font-family: var(--font-ui); font-size: 15px; }
.corp-verified span { font-size: 13.5px; color: var(--text2); }
.ok-ring { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(63, 191, 127, 0.16); color: var(--ok); flex: none; animation: pop 420ms var(--ease-out); }
.ok-ring .i { font-size: 24px; }
.ok-ring.big { width: 64px; height: 64px; }
.ok-ring.big .i { font-size: 32px; }
.corp-nomail { display: grid; gap: 12px; animation: shake 360ms var(--ease-out); }
/* The DNS record and the watch */
.corp-dns { display: grid; gap: 10px; }
.corp-copy { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; padding: 8px 6px 8px 12px; border-radius: 12px; background: var(--surface2); border: 1px solid var(--border); }
.corp-copy .cc-main { display: grid; gap: 2px; min-width: 0; }
.corp-copy .cc-l { font-family: var(--font-ui); font-size: 11.5px; font-weight: 600; color: var(--text2); }
.corp-copy .cc-v { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px; word-break: break-all; user-select: all; }
.corp-copy .btn-icon { border: 0; background: transparent; }
.corp-watch { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; }
.cw-ring { position: relative; width: 64px; height: 64px; }
.cw-ring > svg { width: 64px; height: 64px; transform: rotate(-90deg); }
.cw-ring > svg circle { fill: none; stroke-width: 5; stroke-linecap: round; }
.cw-ring .bg { stroke: var(--border); }
.cw-ring .fg { stroke: var(--teal); transition: stroke-dashoffset 900ms linear; }
.cw-ring .radar { position: absolute; inset: 0; display: grid; place-items: center; color: var(--teal2); }
:root[data-theme="dark"] .cw-ring .radar { color: var(--teal); }
.cw-ring .radar .i { font-size: 22px; animation: spin 2.4s linear infinite; }
.cw-ring .radar.paused .i { animation-play-state: paused; }
.cw-t { display: grid; gap: 2px; min-width: 0; }
.cw-t b { font-family: var(--font-ui); font-size: 15px; }
.cw-t > span { font-size: 13.5px; color: var(--text2); }
.cw-clock { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; color: var(--muted); margin-top: 4px; }
.cw-clock .i { font-size: 14px; }
/* Domain rows in Settings */
.corp-dom { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 300ms var(--ease-out); }
.corp-dom-in { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; padding: 8px 0; min-height: 0; overflow: hidden; transition: opacity 220ms ease, transform 220ms ease; }
.corp-dom-in > div { display: grid; gap: 4px; min-width: 0; justify-items: start; }
.corp-dom-in b { font-family: var(--font-ui); font-size: 15px; }
.corp-dom.fading .corp-dom-in { opacity: 0; transform: translateX(8px); }
.corp-dom.collapsed { grid-template-rows: 0fr; }
.corp-hr { border: 0; border-top: 1px solid var(--border); margin: 4px 0; }
.corp-add { align-items: flex-end; gap: 8px; }
.corp-add .field { margin: 0; }
.corp-add .field.grow, .field.grow { flex: 1; min-width: 0; }
.corp-add .btn { margin: 0; height: 46px; }
.corp-policy { gap: 4px; }
.corp-radio { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; text-align: start; padding: 10px 8px; border-radius: 12px; border: 0; background: transparent; cursor: pointer; transition: background 140ms ease; }
@media (hover: hover) and (pointer: fine) { .corp-radio:hover:not(:disabled) { background: var(--surface2); } }
.corp-radio > .i { font-size: 22px; color: var(--muted); }
.corp-radio.on > .i { color: var(--teal2); }
:root[data-theme="dark"] .corp-radio.on > .i { color: var(--teal); }
.corp-radio > span { display: grid; gap: 2px; }
.corp-radio b { font-family: var(--font-ui); font-size: 15px; }
.corp-radio span span { font-size: 13.5px; color: var(--text2); }
.corp-radio:disabled { opacity: 0.55; cursor: default; }
.corp-check { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; cursor: pointer; }
.corp-check.off { opacity: 0.6; cursor: default; }
.corp-check input { width: 20px; height: 20px; accent-color: var(--teal); }
.corp-check > span { display: grid; gap: 2px; }
.corp-check b { font-family: var(--font-ui); font-size: 15px; }
.corp-check span span { font-size: 13px; color: var(--text2); }
.corp-switch-row { padding: 10px 0; cursor: pointer; }
.corp-switch-row > span:nth-child(2) { display: grid; gap: 2px; }
.corp-switch-row b { font-family: var(--font-ui); font-size: 15px; }
.corp-switch-row span span { font-size: 13px; color: var(--text2); }
.corp-switch-row input:checked + .switch { background: var(--teal); }
.corp-switch-row input:checked + .switch .knob { transform: translateX(22px); }
[dir="rtl"] .corp-switch-row input:checked + .switch .knob { transform: translateX(-22px); }
.corp-switch-row input:disabled + .switch { opacity: 0.5; }
.corp-switch-row input:focus-visible + .switch { box-shadow: var(--ring); }
.chip.dep { padding-inline-end: 4px; cursor: default; }
.chip.dep button { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: inherit; background: transparent; margin-inline-start: 2px; }
.chip.dep button .i { font-size: 14px; }
@media (hover: hover) and (pointer: fine) { .chip.dep button:hover { background: rgba(0,0,0,0.08); } }
.corp-onb-head { margin-top: 8px; }
/* ── The console ─────────────────────────────────────────────────── */
body.on-console .app-nav, body.on-console .app-dock, body.on-console .orb-host { display: none !important; }
body.on-console .app-main { padding: 0 !important; }
body.on-console .app-main > .wrap { width: 100%; max-width: none; }
.corp-console { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100dvh; }
.cs-side, .cs-top { display: none; }
.cs-mhead { padding: max(10px, env(safe-area-inset-top)) 16px 0; background: color-mix(in srgb, var(--brand) 11%, var(--bg)); border-bottom: 1px solid var(--border); }
.cs-mrow { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.cs-mt { display: grid; gap: 2px; min-width: 0; }
.cs-mt b { font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.cs-mt > span { display: flex; align-items: center; gap: 4px; font-family: var(--font-ui); font-size: 12px; font-weight: 600; min-width: 0; }
.cs-mt > span.ok { color: var(--ok); }
.cs-mt > span.warn { color: var(--gold); }
.cs-mt > span .i { font-size: 13px; }
.cs-mt em { font-style: normal; color: var(--muted); font-weight: 500; margin-inline-start: 6px; min-width: 0; }
.cs-pills { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 10px 0 8px; }
.cs-pills::-webkit-scrollbar { display: none; }
.cs-pills a { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid transparent; font-family: var(--font-ui); font-size: 14px; font-weight: 500; color: var(--text2); white-space: nowrap; flex: none; transition: background 160ms ease, color 160ms ease, transform 120ms var(--ease-out); }
.cs-pills a:active { transform: scale(0.97); }
.cs-pills a .i { font-size: 16px; }
.cs-pills a[aria-selected="true"] { background: color-mix(in srgb, var(--brand) 14%, transparent); border-color: color-mix(in srgb, var(--brand) 45%, transparent); color: var(--brand); font-weight: 600; }
.cs-acc { display: inline-flex; }
.cs-acc-btn { display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; padding: 0; background: transparent; border: 0; cursor: pointer; color: var(--text); max-width: 100%; }
.cs-acc-btn .cs-acc-t, .cs-acc-btn > .i { display: none; }
.cs-avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 22%, var(--surface)); border: 1px solid var(--border); color: var(--brand); font-family: var(--font-ui); font-weight: 800; font-size: 15px; flex: none; }
.cs-menu { top: 46px; }
.cs-main { min-width: 0; }
.cs-content { padding: 16px 16px 48px; min-width: 0; }
.cs-page { display: grid; gap: 22px; }
.cs-page.in { animation: pageIn 280ms var(--ease-out); }
@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
#cs-title.swap { animation: pop 220ms var(--ease-out); }
.cs-reading { display: grid; gap: 22px; width: min(880px, 100%); margin-inline: auto; }
.cs-reading section { display: grid; gap: 10px; }
.cs-sh { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.cs-sh > div { display: grid; gap: 2px; min-width: 0; }
.cs-sh h2 { font-size: 18px; font-weight: 700; }
.cs-sh span { font-size: 13.5px; color: var(--text2); }
.cs-sh .tlink { flex: none; font-family: var(--font-ui); font-weight: 700; font-size: 14px; color: var(--teal2); display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; cursor: pointer; }
:root[data-theme="dark"] .cs-sh .tlink { color: var(--teal); }
.cs-actions { flex-wrap: wrap; gap: 10px; }
.cs-actions .btn { margin: 0; flex: 1 1 auto; justify-content: center; }
.cs-av { position: relative; width: 42px; height: 42px; border-radius: 50%; display: grid !important; place-items: center; background: var(--teal-soft); color: var(--teal2); font-family: var(--font-ui); font-weight: 800; font-size: 16px; flex: none; border: 1px solid var(--border); }
:root[data-theme="dark"] .cs-av { color: var(--teal); }
.cs-av.muted { background: var(--surface2); color: var(--muted); }
.cs-thumb { width: 36px; display: block; flex: none; }
.cs-thumb .cover { border-radius: 6px; }
.cs-thumb .cover .t, .cs-thumb .cover .glyph { display: none; }
.cs-thumb.sm { width: 28px; }
.btn.ok { color: var(--ok); }
/* Overview: an editorial head, four figures, then the two columns. */
.cs-ov { display: grid; gap: 26px; }
.cs-ov-l, .cs-ov-r { display: grid; gap: 22px; min-width: 0; align-content: start; }
.cs-ov section { display: grid; gap: 10px; }
.cs-greet { display: grid; gap: 18px; padding-bottom: 22px; border-bottom: 1px solid var(--border); }
.cs-greet-t { display: grid; gap: 8px; min-width: 0; }
.cs-greet .kicker { font-size: 12px; }
.cs-greet h2 { font-size: clamp(26px, 2.4vw, 34px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.05; }
.cs-greet p { color: var(--text2); font-size: 15.5px; }
.cs-seats { display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; align-items: center; }
.cs-seats > div { display: grid; gap: 2px; min-width: 0; }
.cs-seats b { font-family: var(--font-ui); font-size: 15px; }
.cs-seats span { font-size: 13.5px; color: var(--text2); }
.cs-seats .btn-icon.btn-sm { width: 36px; height: 36px; margin: 0; }
.seat-ring { position: relative; width: 46px; height: 46px; display: grid; place-items: center; color: var(--brand); }
.seat-ring > svg { position: absolute; inset: 0; width: 46px; height: 46px; transform: rotate(-90deg); }
.seat-ring > svg circle { fill: none; stroke-width: 4; stroke-linecap: round; }
.seat-ring .bg { stroke: color-mix(in srgb, var(--brand) 18%, transparent); }
.seat-ring .fg { stroke: var(--brand); animation: ringFill 900ms var(--ease-out); --c: 125.7; }
.seat-ring.warn .fg { stroke: var(--gold); }
.seat-ring .i { font-size: 18px; position: relative; }
/* The four figures: a hairline tile each, the number set large. */
.cs-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cs-stat { padding: 16px 16px 14px; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: start; border-radius: 18px; transition: transform 200ms var(--ease-out), border-color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .cs-stat:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--teal) 40%, var(--border)); } }
.cs-stat .corp-ic { grid-row: 1; --s: 32px; }
.cs-stat .mini-ring { grid-row: 1; grid-column: 2; width: 26px; height: 26px; }
.cs-stat .mini-ring svg { width: 26px; height: 26px; transform: rotate(-90deg); }
.cs-stat .mini-ring circle { fill: none; stroke-width: 3.5; stroke-linecap: round; }
.cs-stat .mini-ring .bg { stroke: var(--gold-soft); }
.cs-stat .mini-ring .fg { stroke: var(--gold); animation: ringFill 900ms var(--ease-out); --c: 66; }
.cs-stat b { grid-column: 1 / -1; margin-top: 12px; font-family: var(--font-display); font-size: 34px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.cs-stat > span { grid-column: 1 / -1; margin-top: 6px; font-size: 13.5px; color: var(--text2); }
.cs-stat small { grid-column: 1 / -1; margin-top: 8px; font-family: var(--font-ui); font-size: 12px; font-weight: 700; }
.cs-stat small.teal { color: var(--teal2); } :root[data-theme="dark"] .cs-stat small.teal { color: var(--teal); }
.cs-stat small.info { color: var(--info); } .cs-stat small.ok { color: var(--ok); } .cs-stat small.gold { color: var(--gold); }
.cs-two { display: grid; gap: 18px; }
.cs-eng { padding: 18px; display: grid; gap: 12px; border-radius: 18px; }
.cs-eng .bar.big { display: block; height: 10px; border-radius: 8px; background: var(--border); overflow: hidden; }
.cs-eng .bar.big i { display: block; height: 100%; background: var(--teal); border-radius: 8px; transform-origin: 0 50%; animation: barGrow 900ms var(--ease-out); }
[dir="rtl"] .cs-eng .bar.big i { transform-origin: 100% 50%; }
@keyframes barGrow { from { transform: scaleX(0); } }
.cs-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13.5px; color: var(--text2); }
.cs-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.cs-legend .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border); }
.cs-legend .dot.teal { background: var(--teal); }
.cs-legend b { font-family: var(--font-ui); font-weight: 700; color: var(--text); }
.cs-streak { display: flex; align-items: center; gap: 6px; padding-top: 10px; border-top: 1px solid var(--border); }
.cs-streak .i { color: var(--streak); font-size: 16px; }
.cs-asg { padding: 6px 16px; border-radius: 18px; }
.cs-asg-row { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 10px 0; }
.cs-asg-row + .cs-asg-row { border-top: 1px solid var(--border); }
.cs-asg-row > div { display: grid; gap: 5px; min-width: 0; }
.cs-asg-row b { font-family: var(--font-ui); font-size: 14.5px; }
.cs-asg-row .row { gap: 8px; align-items: baseline; flex-wrap: nowrap; }
.cs-asg-row .row > span { font-family: var(--font-ui); font-size: 12.5px; font-weight: 700; }
.cs-asg-row .teal { color: var(--teal2); } :root[data-theme="dark"] .cs-asg-row .teal { color: var(--teal); }
.cs-asg-row .info { color: var(--info); } .cs-asg-row .violet { color: var(--violet2); }
.cs-asg-row small { font-family: var(--font-ui); font-size: 12px; color: var(--muted); }
.cs-page .bar { display: block; height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; }
.cs-page .bar i { display: block; height: 100%; border-radius: 3px; background: var(--teal); }
.cs-page .bar.gold i { background: var(--gold); }
/* Attention: hairline rows, a coloured glyph, a chevron. */
.cs-todos { display: grid; border-top: 1px solid var(--border); }
.cs-todo { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--border); color: var(--text); animation: rowIn 260ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 50ms); transition: background 160ms ease; border-radius: 10px; }
@media (hover: hover) and (pointer: fine) { a.cs-todo:hover { background: color-mix(in srgb, var(--text) 4%, transparent); } }
.cs-todo > div { display: grid; gap: 2px; min-width: 0; }
.cs-todo b { font-family: var(--font-ui); font-size: 14.5px; }
.cs-todo > div > span { font-size: 13px; color: var(--text2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cs-todo > .i { color: var(--muted); font-size: 18px; }
@keyframes rowIn { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: none; } }
/* Who is learning: one line a person, the top six. */
.cs-people { display: grid; border-top: 1px solid var(--border); }
.cs-person { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--border); animation: rowIn 260ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms); }
.cs-person .cs-av { width: 36px; height: 36px; font-size: 14px; }
.cs-person .cs-av i { position: absolute; right: -4px; bottom: -4px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; font-style: normal; font-weight: 800; color: #000; border: 2px solid var(--surface); background: var(--medal, var(--border)); }
.cs-person.m1 { --medal: #F2B24A; } .cs-person.m2 { --medal: #B8C2CC; } .cs-person.m3 { --medal: #CD8A5B; }
.cs-person.medal .cs-av { border-color: var(--medal); border-width: 1.5px; }
.cs-p-main { display: grid; gap: 1px; min-width: 0; }
.cs-p-main b { font-family: var(--font-ui); font-size: 14.5px; }
.cs-p-main > span { font-size: 12.5px; color: var(--text2); }
.cs-p-nums { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-ui); font-size: 12.5px; font-weight: 700; color: var(--text2); }
.cs-p-nums > span { display: inline-flex; align-items: center; gap: 3px; }
.cs-p-nums .i { font-size: 13px; color: var(--muted); }
.cs-p-asg { display: inline-flex; gap: 8px; align-items: center; width: 92px; }
.cs-p-asg .bar { flex: 1; height: 4px; }
.cs-p-asg small { font-family: var(--font-ui); font-size: 12px; color: var(--muted); }
.cs-more { justify-self: end; padding: 10px 4px 0; font-size: 14px; }
@media (max-width: 560px) { .cs-p-nums { display: none; } }
.cs-pick { display: grid; gap: 4px; max-height: 240px; overflow: auto; border: 1px solid var(--border); border-radius: 12px; padding: 4px; }
.cs-pick button { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; text-align: start; padding: 6px 8px; border-radius: 10px; background: transparent; border: 0; cursor: pointer; color: var(--text); }
@media (hover: hover) and (pointer: fine) { .cs-pick button:hover { background: var(--surface2); } }
.cs-pick button[aria-selected="true"] { background: var(--teal-soft); }
.cs-pick .pk-t { display: grid; gap: 1px; min-width: 0; }
.cs-pick b { font-family: var(--font-ui); font-size: 14px; }
.cs-pick .pk-t span { font-size: 12.5px; color: var(--muted); }
.cs-pick > button > .i { color: var(--teal2); font-size: 18px; }
:root[data-theme="dark"] .cs-pick > button > .i { color: var(--teal); }
.sheet2-body .chips { margin: 4px 0 10px; }
.sheet2-body .field .lb { margin-top: 6px; }
.sk-row.tall { height: 140px; }
/* Lists on People and Learning: hairline rows, not stacked cards. */
.cs-list { display: grid; gap: 0; border-top: 1px solid var(--border); }
.cs-list .listrow { width: 100%; text-align: start; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 14px; padding: 12px 4px; border: 0; border-bottom: 1px solid var(--border); border-radius: 12px; background: transparent; box-shadow: none; }
.cs-list .listrow:not(:has(> .i:last-child)) { grid-template-columns: auto minmax(0, 1fr) auto; }
.cs-list .listrow > div { min-width: 0; }
.cs-list .listrow b { font-size: 14.5px; }
.cs-list .listrow > .i:last-child { color: var(--muted); font-size: 18px; }
.cs-list .listrow .cs-av, .cs-list .listrow .corp-ic { display: grid; }
.cs-member { cursor: pointer; transition: background 160ms ease, transform 160ms var(--ease-out); }
.cs-member:active { transform: scale(0.995); }
@media (hover: hover) and (pointer: fine) { .cs-member:hover, .cs-list .listrow:hover { background: color-mix(in srgb, var(--text) 4%, transparent); } }
.cs-member.deactivated b { color: var(--muted); }
.cs-tags { display: inline-flex; gap: 6px; align-items: center; }
.cs-sh-people { align-items: center; }
.cs-sh-people > div:first-child { display: flex; align-items: baseline; gap: 14px; }
.cs-sh-people .field.search { margin: 0; width: min(320px, 100%); }
.cs-sh-people .field.search input { height: 40px; }
@media (max-width: 640px) { .cs-sh-people { flex-direction: column; align-items: stretch; } .cs-sh-people .field.search { width: 100%; } }

/* The website frame from 960 px: a sidebar, a top bar, the page centred at 1240. */
@media (min-width: 960px) {
  .corp-console { grid-template-columns: 264px minmax(0, 1fr); }
  .cs-mhead { display: none; }
  .cs-side { display: grid; grid-template-rows: auto auto 1fr auto auto; position: sticky; top: 0; height: 100dvh; background: color-mix(in srgb, var(--surface) 62%, transparent); border-inline-end: 1px solid var(--border); }
  .cs-company { border-bottom: 1px solid var(--border); margin-bottom: 12px; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 22px 18px 18px; }
  .cs-company > div { display: grid; gap: 2px; min-width: 0; }
  .cs-company b { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
  .cs-company span { font-family: var(--font-ui); font-size: 11.5px; font-weight: 600; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
  .cs-nav { display: grid; gap: 4px; padding: 0 12px; }
  .cs-tile { position: relative; display: grid; grid-template-columns: 3px auto 1fr; gap: 0 11px; align-items: center; height: 42px; padding: 0 8px 0 4px; border-radius: 999px; font-family: var(--font-ui); font-size: 14.5px; font-weight: 500; color: var(--text2); transition: background 180ms ease, color 180ms ease, transform 120ms var(--ease-out); }
  .cs-tile:active { transform: scale(0.98); }
  .cs-tile .bar { width: 3px; height: 0; border-radius: 2px; background: var(--brand); transition: height 220ms var(--ease-out); }
  .cs-tile .i { font-size: 19px; }
  @media (hover: hover) and (pointer: fine) { .cs-tile:hover { background: color-mix(in srgb, var(--text) 5%, transparent); } }
  .cs-tile[aria-current="page"] { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--text); font-weight: 700; }
  .cs-tile[aria-current="page"] .bar { height: 20px; }
  .cs-tile[aria-current="page"] .i { color: var(--brand); }
  .cs-domain { align-self: end; margin: 0 12px 12px; display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--border); background: var(--surface); }
  .cs-domain.ok { border-color: rgba(63, 191, 127, 0.35); color: var(--ok); } .cs-domain.warn { border-color: rgba(242, 178, 74, 0.4); color: var(--gold); }
  .cs-domain .i { font-size: 16px; }
  .cs-domain > div { display: grid; min-width: 0; }
  .cs-domain b { font-family: var(--font-ui); font-size: 12px; font-weight: 700; }
  .cs-domain span { font-family: var(--font-ui); font-size: 12px; color: var(--muted); }
  .cs-side .cs-acc { border-top: 1px solid var(--border); padding: 14px 12px 16px 16px; display: block; }
  .cs-side .cs-acc-btn { width: 100%; }
  .cs-side .cs-acc-btn .cs-acc-t { display: grid; gap: 1px; min-width: 0; text-align: start; flex: 1; }
  .cs-side .cs-acc-btn .cs-acc-t b { font-family: var(--font-ui); font-size: 14px; font-weight: 600; }
  .cs-side .cs-acc-btn .cs-acc-t span { font-family: var(--font-ui); font-size: 12px; color: var(--muted); }
  .cs-side .cs-acc-btn > .i { display: inline-flex; color: var(--muted); font-size: 16px; }
  .cs-side .cs-avatar { width: 36px; height: 36px; }
  .cs-side .cs-menu { top: auto; bottom: 60px; left: 0; right: auto; min-width: 232px; }
  .cs-top { display: flex; align-items: center; gap: 16px; height: 72px; padding: 0 28px; position: sticky; top: 0; z-index: 2; background: var(--nav-glass); border-bottom: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 var(--glass-edge); }
  .cs-top-t { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .cs-top h1 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
  .cs-top-t span { font-size: 13px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cs-date { font-family: var(--font-ui); font-size: 13px; color: var(--muted); white-space: nowrap; }
  .cs-content { width: min(1180px, 100%); margin-inline: auto; padding: 28px 28px 56px; }
  .cs-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cs-greet { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; }
  .cs-actions .btn { flex: 0 1 auto; }
}
@media (min-width: 1180px) {
  .cs-ov { grid-template-columns: 8fr 5fr; gap: 24px; align-items: start; }
  .cs-two { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-transparency: reduce) { .cs-top { background: var(--bg); } }
@media (prefers-reduced-motion: reduce) {
  .cs-page.in, .cs-todo, .cs-person, .corp-step, .corp-glyph, .corp-logo.pop, .ok-ring, .corp-nomail, .code-field.shake, .cs-eng .bar.big i, .seat-ring .fg, .cs-stat .mini-ring .fg { animation: none !important; }
  .cs-page.in { animation: fade-in 180ms ease !important; }
  .corp-dom, .corp-dom-in, .cw-ring .fg { transition: none; }
  .cw-ring .radar .i { animation: none; }
}

/* ── The company popup: both doors, two tabs, in place ───────────────
 * Same card as the website's sign-in popup (glass scrim, surface card),
 * a segmented switch that slides, the door screens stacked inside with
 * a short lateral fade when the tab changes. Nothing floats here but the
 * scrim, so nothing else is glass. */
.corp-sheet { position: fixed; inset: 0; z-index: var(--z-auth); display: grid; place-items: center; padding: 20px; }
.corp-sheet .sh-scrim { position: absolute; inset: 0; background: rgba(8, 13, 23, 0.55); animation: fade-in 200ms ease; }
.sh-card { position: relative; width: min(880px, 100%); max-height: min(92dvh, 860px); display: grid; grid-template-columns: minmax(0, 1fr); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden; animation: pop 260ms cubic-bezier(.2,.8,.2,1); }
.sh-main { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; max-height: min(92dvh, 860px); min-width: 0; }
.sh-side { display: none; }
@media (min-width: 760px) {
  .sh-card { grid-template-columns: 5fr 7fr; }
  .sh-side { display: grid; grid-template-rows: auto 1fr auto auto; }
  .sh-side .sh-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 15px; color: #F4F7FB; }
  .as-glyph { align-self: center; justify-self: center; width: 96px; height: 96px; border-radius: 28px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 24px 40px -20px rgba(0, 0, 0, 0.6); color: var(--teal); animation: hs-float 7s ease-in-out infinite; }
  .as-glyph .i { font-size: 44px; }
  .as-proof.col { flex-direction: column; gap: 8px; }
  .as-proof.col li { display: inline-flex; align-items: center; gap: 8px; }
  .as-proof.col .i { font-size: 15px; color: var(--teal); }
}
@media (max-width: 540px) { .sh-main { max-height: 94dvh; } }
.corp-sheet.out { pointer-events: none; }
.corp-sheet.out .sh-scrim { animation: fade-out 200ms ease forwards; }
.corp-sheet.out .sh-card { animation: csOut 200ms ease forwards; }
@keyframes csOut { to { opacity: 0; transform: translateY(6px) scale(0.985); } }
.sh-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 16px 0 22px; }
.sh-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: -0.01em; }
.sh-tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin: 14px 22px 0; padding: 4px; border-radius: 999px; background: var(--surface2); --tab: 0; }
.sh-tab { position: relative; z-index: 1; height: 40px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-ui); font-size: 14px; font-weight: 700; color: var(--text2); transition: color 200ms ease; -webkit-tap-highlight-color: transparent; }
.sh-tab .i { font-size: 17px; }
.sh-tab[aria-selected="true"] { color: var(--text); }
.sh-tab:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.sh-ind { position: absolute; top: 4px; bottom: 4px; inset-inline-start: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow); transform: translateX(calc(var(--tab) * 100%)); transition: transform 340ms var(--ease-out); }
[dir="rtl"] .sh-ind { transform: translateX(calc(var(--tab) * -100%)); }
:root[data-theme="dark"] .sh-ind { background: var(--bg2); }
.sh-body { overflow: auto; overscroll-behavior: contain; padding: 4px 22px 22px; scrollbar-width: thin; }
.sh-page { display: grid; gap: 14px; animation: csIn 300ms var(--ease-out); }
@keyframes csIn { from { opacity: 0; transform: translateX(var(--dir, 14px)); } }
.sh-page .corp-head { padding-top: 10px; }
.sh-page .corp-head h1 { font-size: clamp(22px, 3vw, 26px); }
.sh-page .corp-glyph { width: 60px; height: 60px; border-radius: 16px; }
.sh-page .corp-glyph .i { font-size: 30px; }
.sh-page .corp-wtitle { margin-top: 8px; }
.sh-wait { min-height: 220px; display: grid; place-items: center; }
.sh-foot { display: flex; justify-content: center; align-items: center; gap: 6px; padding: 12px 22px 14px; border-top: 1px solid var(--border); font-family: var(--font-ui); font-size: 13.5px; color: var(--text2); }
.sh-foot .tlink { font-size: 13.5px; }
@media (max-width: 540px) {
  .corp-sheet { padding: 0; align-items: end; }
  .sh-card { width: 100%; max-height: 94dvh; border-radius: var(--r-xl) var(--r-xl) 0 0; border-bottom: 0; animation: csUp 320ms var(--ease-out); }
  @keyframes csUp { from { transform: translateY(24px); opacity: 0; } }
  .sh-head { padding: 14px 10px 0 18px; }
  .sh-tabs { margin: 12px 16px 0; }
  .sh-body { padding: 4px 16px calc(18px + env(safe-area-inset-bottom)); }
  .sh-tab span { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) { .sh-card, .sh-page, .sh-ind, .corp-sheet .sh-scrim { animation: none; transition: none; } }
/* Console rows run the full width; the 22ch clamp is for cards. */
.cs-list .listrow .clamp1, .cs-p-main .clamp1, .cs-todo .clamp1, .cs-sh .clamp1 { max-width: none; }
.cs-stat b.num, .cs-greet h2 { letter-spacing: -0.03em; }
.cs-sh-people .field.search { padding: 0; border: 0; background: transparent; box-shadow: none; }
/* In the console a button is as wide as its words, never a full-width bar. */
.corp-console .btn.wide { width: auto; justify-self: start; min-width: 0; }
.corp-console form .btn.wide { margin-top: 4px; }
.corp-console .cs-actions .btn { flex: 0 0 auto; }
.corp-console .corp-c .btn.wide { justify-self: start; }
.corp-logo-pick > div.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.corp-logo-pick .btn { margin: 0; }

/* ── Preferences: an index on the left, the sections as a two-column
 * ledger - what it is on the left, the fields on the right - each section
 * closed by a hairline. A live preview of the employee door sits above the
 * branding form and follows the fields as they are typed. */
.cs-prefs { display: grid; gap: 26px; align-items: start; }
.cs-index { display: none; }
.cs-sets { display: grid; min-width: 0; }
.cs-set { display: grid; gap: 16px; padding: 26px 0; border-top: 1px solid var(--border); }
.cs-set:first-child { border-top: 0; padding-top: 0; }
.cs-set-t { display: grid; gap: 6px; align-content: start; min-width: 0; }
.cs-set-t .corp-ic { margin-bottom: 6px; }
.cs-set-t h2 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.cs-set-t p { font-size: 14px; color: var(--text2); max-width: 32ch; }
.cs-set-c { display: grid; gap: 14px; min-width: 0; }
.cs-set-b { display: grid; gap: 14px; }
.cs-set .card { border-radius: 18px; }
.cs-set-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 4px; }
.cs-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 18px; align-items: start; }
.cs-form .span2 { grid-column: 1 / -1; }
.cs-form .setrow { padding: 12px 0 4px; border-top: 1px solid var(--border); margin-top: 6px; }
/* The live preview: the door as an employee will see it. */
.cs-prevcard { padding: 16px; display: grid; gap: 12px; background: color-mix(in srgb, var(--surface) 70%, var(--bg)); }
.cs-prev-head { display: grid; gap: 2px; }
.cs-prev-head b { font-family: var(--font-ui); font-size: 14.5px; }
.cs-prev-head span { font-size: 13px; color: var(--text2); }
.cs-prev { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 24px 20px 18px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); --brand: var(--teal); }
.cs-prev-l { margin-bottom: 2px; }
.cs-prev-t { font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance; }
.cs-prev-m { font-size: 14px; color: var(--text2); max-width: 44ch; text-wrap: pretty; }
.cs-prev-btn { margin-top: 8px; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 22px; border-radius: 999px; background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 84%, #fff), var(--brand) 58%, color-mix(in srgb, var(--brand) 90%, #000)); color: var(--on-accent, #05201C); font-family: var(--font-ui); font-weight: 700; font-size: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 8px 18px -10px color-mix(in srgb, var(--brand) 80%, transparent); }
.cs-prev-p { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-family: var(--font-ui); font-size: 11.5px; color: var(--muted); }
.cs-prev-p .i { font-size: 12px; }
/* Choices laid out in twos. */
.cs-radios { display: grid; gap: 8px; }
.cs-checks { display: grid; gap: 6px; }
.cs-plans { gap: 12px; }
@media (min-width: 720px) {
  .cs-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-radios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-checks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .cs-set { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 28px; }
  .cs-set-t { position: sticky; top: 92px; }
}
@media (min-width: 1100px) {
  .cs-prefs { grid-template-columns: 196px minmax(0, 1fr); gap: 40px; }
  .cs-index { display: grid; gap: 2px; position: sticky; top: 96px; }
  .cs-index .lb { margin-bottom: 8px; padding-inline: 10px; }
  .cs-index a { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; height: 38px; padding: 0 10px; border-radius: 999px; font-family: var(--font-ui); font-size: 14px; font-weight: 500; color: var(--text2); transition: background 160ms ease, color 160ms ease; }
  .cs-index a .i { font-size: 17px; }
  .cs-index a[aria-current="true"] { background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--text); font-weight: 700; }
  .cs-index a[aria-current="true"] .i { color: var(--brand); }
  @media (hover: hover) and (pointer: fine) { .cs-index a:hover { background: color-mix(in srgb, var(--text) 5%, transparent); } }
}
/* Overview: a card never stretches its rows to fill a taller neighbour. */
.cs-eng, .cs-asg { align-content: start; }
.cs-two:has(> :only-child) { grid-template-columns: 1fr; }
.cs-todos { overflow: visible; }
/* Figures are ink, whatever the company colour; on navy a dark brand is lifted toward white wherever it colours text. */
.cs-stat b.num { color: var(--text); }
:root[data-theme="dark"] .corp-console { --brand-ink: color-mix(in srgb, var(--brand) 55%, #fff); }
:root[data-theme="dark"] .corp-console .cs-stat small.teal, :root[data-theme="dark"] .corp-console .cs-sh .tlink, :root[data-theme="dark"] .corp-console .cs-more, :root[data-theme="dark"] .corp-console .cs-greet .kicker, :root[data-theme="dark"] .corp-console .cs-asg-row .teal, :root[data-theme="dark"] .corp-console .cs-index a[aria-current="true"] .i, :root[data-theme="dark"] .corp-console .cs-tile[aria-current="page"] .i, :root[data-theme="dark"] .corp-console .corp-tag.brand, :root[data-theme="dark"] .corp-console .cs-av, :root[data-theme="dark"] .corp-console .corp-ic.teal, :root[data-theme="dark"] .corp-console .hint.num.tlink { color: var(--brand-ink, var(--teal)); }
/* Plans: as many across as fit at 230px, never clipped; a perk is one line where it can be. */
.cs-plans { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.cs-plans .corp-plan { min-width: 0; }
.cs-plans .corp-plan .pl-top { flex-wrap: wrap; row-gap: 4px; }
.cs-plans .corp-plan .pl-perks li { align-items: flex-start; }
.cs-plans .corp-plan .pl-perks .tick { flex: none; margin-top: 1px; }
.cs-plans .corp-plan .pl-tag { text-wrap: pretty; }
@media (min-width: 900px) { #pref-plan { grid-template-columns: 1fr; gap: 14px; } #pref-plan .cs-set-t { position: static; } #pref-plan .cs-set-t p { max-width: 60ch; } }

/* ── Preferences as panes: one at a time, the change a morph ─────────
 * The pane on screen folds down a touch and fades (150 ms); the chosen one
 * rises in (320 ms). Company Preferences and the learner's Preferences
 * share this (prefsNav in corp.js). */
[data-prefs]:not([data-stack]) .prefs-pane { border-top: 0 !important; padding-top: 0 !important; }
.prefs-pane.pane-in { animation: paneIn 320ms var(--ease-out) both; }
.prefs-pane.pane-out { animation: paneOut 150ms ease both; pointer-events: none; }
@keyframes paneIn { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes paneOut { to { opacity: 0; transform: translateY(6px) scale(0.99); } }
.cs-sets { position: relative; }
/* On narrow screens the index is a row of pills the panes sit under. */
@media (max-width: 1099px) {
  .prefs-index { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 10px; margin-bottom: 8px; -webkit-mask-image: linear-gradient(90deg, #000 94%, transparent); mask-image: linear-gradient(90deg, #000 94%, transparent); }
  .prefs-index::-webkit-scrollbar { display: none; }
  .prefs-index .lb { display: none; }
  .prefs-index a { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--text2); white-space: nowrap; flex: none; }
  .prefs-index a .i { font-size: 16px; }
  .prefs-index a[aria-current="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
  .prefs-index a[aria-current="true"] .i { color: inherit; }
}
/* The learner's Preferences page wears the same ledger. */
.prefs-page .cs-set { padding-bottom: 0; }
.settings.prefs-page section { gap: 16px; }
.settings.prefs-page .cs-set-t { display: grid; }
/* Stacked: every section is up, divided by a hairline, and the index follows. */
[data-stack] .cs-sets { gap: 0; }
[data-stack] .prefs-pane { padding: 30px 0; scroll-margin-top: 104px; }
[data-stack] .prefs-pane:first-child { padding-top: 0; }
[data-stack] .prefs-pane:last-child { padding-bottom: 8px; }
@media (min-width: 900px) { [data-stack] .prefs-pane { padding: 40px 0; } }
.prefs-page .cs-index a[aria-current="true"] { background: var(--teal-soft); }
.prefs-page .cs-index a[aria-current="true"] .i { color: var(--teal2); }
:root[data-theme="dark"] .prefs-page .cs-index a[aria-current="true"] .i { color: var(--teal); }
.pf-card { padding: 18px; display: grid; gap: 14px; border-radius: 18px; }
.pf-me { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.pf-avatar { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, color-mix(in srgb, var(--teal) 84%, #fff), var(--teal)); color: var(--on-accent, #05201C); font-family: var(--font-display); font-weight: 800; font-size: 20px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.pf-t { display: grid; gap: 2px; min-width: 0; }
.pf-t b { font-family: var(--font-ui); font-size: 15px; }
.pf-t span { font-size: 13.5px; color: var(--text2); }
.pf-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); }
.pf-row:first-child { border-top: 0; padding-top: 0; }
.pf-ic { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--teal-soft); color: var(--teal2); }
:root[data-theme="dark"] .pf-ic { color: var(--teal); }
.pf-ic .i { font-size: 18px; }
.pf-r { display: inline-flex; align-items: center; gap: 8px; }
.pf-card .field { margin: 0; }
.pf-card .namerow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.pf-out { padding-top: 12px; border-top: 1px solid var(--border); flex-wrap: wrap; gap: 10px; }
.pf-out .hint b { color: var(--text); font-weight: 600; }
.pf-card .rule-links { margin: 0; }
.pf-card .foot-line { margin: 0; }
/* Three small windows for the theme. */
.pf-themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pf-theme { display: grid; gap: 8px; padding: 8px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); text-align: start; cursor: pointer; transition: border-color 160ms ease, box-shadow 200ms ease, transform 160ms var(--ease-out); }
.pf-theme:active { transform: scale(0.985); }
.pf-theme[aria-pressed="true"] { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal) inset; }
.pf-tl { display: inline-flex; align-items: center; gap: 6px; padding: 0 4px 2px; font-family: var(--font-ui); font-size: 13.5px; font-weight: 700; color: var(--text); }
.pf-tl .i { font-size: 15px; color: var(--muted); }
.pf-theme[aria-pressed="true"] .pf-tl .i { color: var(--teal2); }
.pf-win { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 9px; overflow: hidden; border: 1px solid var(--border); --w-bg: #F5F7FB; --w-fg: #0D1321; --w-mute: #C9D1DE; --w-card: #FFFFFF; background: var(--w-bg); }
.pf-theme.dark .pf-win { --w-bg: #080D17; --w-fg: #F4F7FB; --w-mute: #263248; --w-card: #111A2B; }
.pf-theme.system .pf-win { background: linear-gradient(105deg, #F5F7FB 50%, #080D17 50%); }
.pf-win i { position: absolute; display: block; border-radius: 3px; }
.pf-win .w-nav { left: 8%; right: 8%; top: 9%; height: 10%; background: var(--w-card); border: 1px solid var(--w-mute); border-radius: 999px; }
.pf-win .w-h { left: 8%; top: 30%; width: 44%; height: 10%; background: var(--w-fg); }
.pf-win .w-l { left: 8%; top: 46%; width: 56%; height: 5%; background: var(--w-mute); }
.pf-win .w-l.s { top: 56%; width: 40%; }
.pf-win .w-c { right: 8%; top: 30%; width: 26%; height: 50%; background: var(--teal); border-radius: 6px; }
.pf-theme.system .pf-win .w-nav { background: linear-gradient(105deg, #FFFFFF 50%, #111A2B 50%); border-color: transparent; }
.pf-theme.system .pf-win .w-h { background: linear-gradient(105deg, #0D1321 50%, #F4F7FB 50%); }
.pf-theme.system .pf-win .w-l { background: linear-gradient(105deg, #C9D1DE 50%, #263248 50%); }
/* No orb on Preferences: nothing to ask there. */
body.no-orb .orb-host { display: none !important; }
@media (prefers-reduced-motion: reduce) { .prefs-pane.pane-in, .prefs-pane.pane-out { animation: none !important; } }
.pf-card .rule-links a { padding: 11px 0; font-size: 15px; }
.pf-card .rule-links .rl-k { font-family: var(--font-ui); font-size: 15px; letter-spacing: 0; display: inline-flex; align-items: center; gap: 10px; }
.pf-card .rule-links .rl-k .i { font-size: 18px; }
/* The administrator's Preferences inside the console. */
.cs-me { display: grid; }
.cs-me .cs-index a[aria-current="true"] { background: color-mix(in srgb, var(--brand) 12%, transparent); }

/* ── Home: the first thing to pick up, set large; the week in seven dots ──
 * "Up next" is the one card on Home (the rest is hairlines): the cover
 * floats a touch, the bar shows how far, the button is the lit glass. */
.up-next { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 18px 20px 18px 18px; border-radius: 20px; color: var(--text); transition: transform 200ms var(--ease-out), border-color 200ms ease, box-shadow 200ms ease; }
@media (hover: hover) and (pointer: fine) { .up-next:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--teal) 40%, var(--border)); box-shadow: var(--shadow-lg); } }
.up-next .un-cover { display: block; width: 96px; flex: none; }
.up-next .un-cover .cover { border-radius: 10px; box-shadow: 0 18px 30px -14px rgba(13, 19, 33, 0.5); animation: hs-float 7s ease-in-out infinite; --lift: -5px; }
.up-next .un-t { display: grid; gap: 4px; min-width: 0; }
.up-next .un-t .kicker { font-size: 11.5px; }
.up-next .un-t b { font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: -0.015em; line-height: 1.15; }
.up-next .un-by { font-size: 13.5px; color: var(--text2); }
.up-next .un-line { font-family: var(--font-ui); font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.up-next .bar { display: block; height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; margin-top: 6px; max-width: 360px; }
.up-next .bar i { display: block; height: 100%; border-radius: 3px; background: var(--teal); }
.up-next .un-go { pointer-events: none; }
@media (max-width: 640px) { .up-next { grid-template-columns: auto minmax(0, 1fr); } .up-next .un-go { grid-column: 1 / -1; justify-self: start; pointer-events: auto; } .up-next .un-cover { width: 72px; } }
.cont-rows { display: grid; margin-top: 10px; }
.cont-rows .prow { border-top: 1px solid var(--border); }
.stat3 .week { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--border); }
.stat3 .week .wk-l { font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; color: var(--muted); }
.wk-dots { display: inline-flex; gap: 6px; }
.wk-dots i { position: relative; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface2); color: var(--muted); font-style: normal; }
.wk-dots i b { font-family: var(--font-ui); font-size: 10.5px; font-weight: 700; }
.wk-dots i.on { background: var(--teal); color: var(--on-accent, #05201C); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45); }
.wk-dots i.today::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid var(--teal); }
@media (prefers-reduced-motion: reduce) { .up-next .un-cover .cover { animation: none; } }
.stat3 .tn.week { display: flex; grid-column: 1 / -1; }
.stat3 .tn.week .wk-dots i b { font-family: var(--font-ui); font-size: 10.5px; font-weight: 700; line-height: 1; letter-spacing: 0; }
.stat3 .tn.week .wk-dots i { width: 26px; height: 26px; }
.rule-line.stat3 .tn.week { padding: 12px 0 0; }

/* ── Bits AI panel: the composer as a card, the context as a chip ─────
 * After 21st.dev's AI chat inputs, drawn on our system: the question on
 * top, a row beneath with what it is about and one lit send button. */
.ai-id { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 800; font-size: 15px; }
.ai-id .i { color: var(--violet); font-size: 18px; }
.composer { display: grid; gap: 8px; padding: 12px 14px 14px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 60%, transparent); }
.composer textarea { width: 100%; border: 1px solid var(--border2); border-radius: 16px 16px 6px 6px; padding: 12px 14px; }
.composer-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.composer .ctxsel { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 8px 0 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); max-width: 70%; cursor: pointer; }
.composer .ctxsel .cx-ic { color: var(--teal2); font-size: 15px; display: inline-flex; }
:root[data-theme="dark"] .composer .ctxsel .cx-ic { color: var(--teal); }
.composer .ctxsel select { height: 34px; border: 0; background: transparent; padding: 0 4px; font-size: 14px; font-weight: 700; font-family: var(--font-ui); max-width: 220px; appearance: none; -webkit-appearance: none; cursor: pointer; }
.composer .ctxsel > .i:last-child { font-size: 14px; color: var(--muted); }
.composer .send { width: 40px; height: 40px; border-radius: 50%; }
.composer .send .i { font-size: 20px; }
.ai-empty .big-ic { width: 72px; height: 72px; border-radius: 24px; background: radial-gradient(60% 60% at 30% 25%, rgba(255, 255, 255, 0.5), transparent 60%), linear-gradient(180deg, color-mix(in srgb, var(--violet) 80%, #fff), var(--violet)); color: #fff; box-shadow: 0 16px 34px -14px color-mix(in srgb, var(--violet) 80%, transparent); animation: hs-float 6s ease-in-out infinite; --lift: -6px; }
.ai-empty .chips .chip { background: var(--surface); }
.ai-msgs .msg.me { background: linear-gradient(180deg, var(--accent-top, color-mix(in srgb, var(--teal) 84%, #fff)), var(--teal)); color: var(--on-accent, #05201C); border: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); }
/* A progress row: the cover plain, the bar with its number, the play button lit on hover. */
.prow { grid-template-columns: 44px minmax(0, 1fr) auto; }
.prow .pthumb { width: 44px; }
.prow .cover { width: 44px; border-radius: 7px; box-shadow: 0 8px 16px -10px rgba(13, 19, 33, 0.5); }
.pr-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.pr-bar small { font-family: var(--font-ui); font-size: 12px; font-weight: 700; color: var(--muted); }
.pr-bar .bar { display: block; height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; }
.pr-bar .bar i { display: block; height: 100%; border-radius: 3px; background: var(--teal); }
.pr-go { width: 38px; height: 38px; transition: background 160ms ease, color 160ms ease, transform 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .prow:hover .pr-go { background: var(--teal); color: var(--on-accent, #05201C); transform: scale(1.06); } }
/* Library, My Learning, Profile: a quieter lift on the covers, hairline rows that answer to the pointer. */
@media (hover: hover) and (pointer: fine) {
  .book:hover .cover { transform: translateY(-2px); box-shadow: 0 22px 36px -16px color-mix(in srgb, var(--c1) 70%, transparent); }
  .book .cover { transition: transform 200ms var(--ease-out), box-shadow 200ms ease; }
  .skill-row:hover, .rule-links a:hover { background: color-mix(in srgb, var(--text) 3%, transparent); }
}
.sheet2.ai .ai-id { display: none; }

/* ══════════════════════════════════════════════════════════════════
   The magic pass (motion.js magic()): a page's first heading rises a
   word at a time; every section, cover and row arrives as it scrolls
   into view and plays again on the way back; cards lean toward the
   pointer; the orb breathes with three sparks in orbit and a name on
   hover; the Bits AI panel springs open and its parts take their turn.
   Transform and opacity only. Reduced motion keeps the fades.
   ══════════════════════════════════════════════════════════════════ */
/* Words */
.words .w { display: inline-block; animation: w-up 640ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms + 60ms); }
@keyframes w-up { from { opacity: 0; transform: translateY(0.5em); } to { opacity: 1; transform: none; } }
/* Sections and cards arrive */
.rise { opacity: 0; transform: translateY(16px); transition: opacity 360ms ease, transform 360ms ease; }
.rise.in { opacity: 1; transform: none; transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out); transition-delay: calc(var(--k, 0) * 45ms); }
.rise.in .bar i, .rise.in .skill .bar i { animation: barGrow 900ms var(--ease-out) both; transform-origin: 0 50%; }
[dir="rtl"] .rise.in .bar i { transform-origin: 100% 50%; }
/* Cards lean */
.up-next, .book, .goal-fig, .glass.lab-strip { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 260ms var(--ease-out), border-color 200ms ease, box-shadow 200ms ease; }
.up-next.leaning, .glass.lab-strip.leaning { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-2px); box-shadow: var(--shadow-lg); }
.book.leaning .cover { box-shadow: 0 26px 40px -16px color-mix(in srgb, var(--c1) 75%, transparent); }
.rise.up-next, .rise.book { transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out); }
.rise.up-next.in, .rise.book.in { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.lvl-ring { transition: transform 260ms var(--ease-out); transform: perspective(600px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
/* Ambient light: two blobs drifting behind Home and Profile */
.amb-disc { animation: ambDrift 18s ease-in-out infinite alternate; }
.amb-disc::after { content: ""; position: absolute; left: -30%; top: 40%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle closest-side, color-mix(in srgb, var(--violet) 22%, transparent), transparent 100%); animation: ambDrift2 22s ease-in-out infinite alternate; }
@keyframes ambDrift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-6vw, 4vw, 0) scale(1.08); } }
@keyframes ambDrift2 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(8vw, -6vw, 0) scale(1.1); } }
/* The orb: a breathing ring, three sparks, a name on hover */
.orb { position: relative; overflow: visible; }
.orb-ring { position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--teal) 55%, transparent); animation: orbBreathe 3.6s ease-in-out infinite; pointer-events: none; }
@keyframes orbBreathe { 0%, 100% { transform: scale(0.96); opacity: 0.35; } 50% { transform: scale(1.12); opacity: 0.9; } }
.orb-sparks { position: absolute; inset: 0; pointer-events: none; animation: orbOrbit 9s linear infinite; }
.orb-sparks i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px 2px color-mix(in srgb, var(--teal) 80%, #fff); opacity: 0.9; }
.orb-sparks i:nth-child(1) { left: 50%; top: -9px; transform: translateX(-50%); }
.orb-sparks i:nth-child(2) { left: -7px; top: 62%; width: 4px; height: 4px; }
.orb-sparks i:nth-child(3) { right: -8px; top: 58%; width: 3.5px; height: 3.5px; }
@keyframes orbOrbit { to { transform: rotate(360deg); } }
.orb-tip { position: absolute; inset-inline-end: calc(100% + 12px); top: 50%; transform: translateY(-50%) translateX(6px); white-space: nowrap; padding: 6px 10px; border-radius: 999px; background: var(--text); color: var(--bg); font-family: var(--font-ui); font-size: 12.5px; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity 180ms ease, transform 220ms var(--ease-out); }
.orb-host.left .orb-tip { inset-inline-end: auto; inset-inline-start: calc(100% + 12px); transform: translateY(-50%) translateX(-6px); }
@media (hover: hover) and (pointer: fine) { .orb:hover .orb-tip { opacity: 1; transform: translateY(-50%) translateX(0); } .orb:hover .orb-ring { animation-duration: 1.8s; } }
.orb-host.drag .orb-sparks, .orb-host.drag .orb-ring, .orb-host.press .orb-sparks { animation-play-state: paused; }
/* The Bits AI panel springs open; its parts take their turn */
@media (min-width: 1024px) { .sheet2.ai.side .sheet2-panel { animation: sideSpring 520ms cubic-bezier(0.22, 1.2, 0.36, 1) both; } }
@keyframes sideSpring { from { transform: translateX(40px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } }
.ai-empty > * { animation: w-up 560ms var(--ease-out) both; }
.ai-empty > :nth-child(1) { animation-delay: 120ms; } .ai-empty > :nth-child(2) { animation-delay: 200ms; } .ai-empty > :nth-child(3) { animation-delay: 280ms; } .ai-empty > :nth-child(4) { animation-delay: 360ms; }
.ai-empty .chips .chip { animation: w-up 480ms var(--ease-out) both; }
.ai-empty .chips .chip:nth-child(1) { animation-delay: 380ms; } .ai-empty .chips .chip:nth-child(2) { animation-delay: 440ms; } .ai-empty .chips .chip:nth-child(3) { animation-delay: 500ms; } .ai-empty .chips .chip:nth-child(4) { animation-delay: 560ms; }
.ai-msgs .msg { animation: msgIn 360ms var(--ease-out) both; }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
.composer { animation: w-up 480ms var(--ease-out) both; animation-delay: 260ms; }
/* The goal ring fills with a glow when the day is done */
.goal-fig .ring.done .fg { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--teal) 70%, transparent)); }
@media (prefers-reduced-motion: reduce) {
  .words .w, .rise, .rise.in, .amb-disc, .amb-disc::after, .orb-ring, .orb-sparks, .ai-empty > *, .ai-empty .chips .chip, .ai-msgs .msg, .composer, .sheet2.ai.side .sheet2-panel { animation: none !important; transition: none !important; opacity: 1; transform: none; }
  .up-next, .book, .goal-fig, .glass.lab-strip, .lvl-ring { transform: none !important; }
}
:root[data-reduce-motion="1"] .rise, :root[data-reduce-motion="1"] .words .w { opacity: 1; transform: none; animation: none !important; transition: none !important; }

/* ══ Website pass: every tab as a page of the site ══════════════════════
 * Home, Library, My Learning and Profile stop being panels and become
 * pages: a hero with a big line and one lit button, a bento of the
 * numbers, rails of covers, a wide banner. After 21st.dev's hero,
 * bento-grid, feature-section and dock patterns, drawn on our system:
 * hairlines, glass only on what floats, the lit-glass buttons. */

/* ── Home ─────────────────────────────────────────────────────────── */
.w-home > * + * { margin-top: clamp(40px, 5vw, 72px); }
.wh-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(8px, 2vw, 28px) 0 0; }
.wh-hero .amb-disc { inset-inline-end: 8vw; top: -22vw; width: 60vw; max-width: 820px; }
.wh-hero-t { display: grid; gap: 18px; justify-items: start; }
.wh-hero-t .meta-line { font-size: 13.5px; }
.wh-hero-t .meta-line b { font-family: var(--font-display); font-weight: 800; color: var(--text); }
.wh-hero-t .h1 { font-size: clamp(38px, 1.8rem + 3vw, 68px); letter-spacing: -0.035em; line-height: 1.0; max-width: 14ch; }
.wh-hero-t .lead { font-size: clamp(16px, 0.9rem + 0.5vw, 19px); max-width: 44ch; }
.wh-ctas { gap: 12px; margin-top: 6px; }
.wh-hero-empty .empty2 { padding: 28px 22px; border: 1px dashed var(--border2); border-radius: 24px; }
/* The hero card: the cover large and leaning, a ring with the figure */
.up-next.hero { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "cover text" "cover ring" "cover go"; gap: 8px 26px; padding: 26px 28px 26px 26px; border-radius: 28px; overflow: hidden; align-items: start; background: linear-gradient(160deg, color-mix(in srgb, var(--surface) 92%, var(--teal)) 0%, var(--surface) 60%); }
.up-next.hero::before { content: ""; position: absolute; inset: auto -30% -40% auto; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle closest-side, color-mix(in srgb, var(--teal) 24%, transparent), transparent 70%); pointer-events: none; }
.up-next.hero .un-cover { grid-area: cover; width: clamp(120px, 12vw, 164px); transform: rotate(-4deg); transform-origin: bottom left; }
.up-next.hero .un-cover .cover { border-radius: 12px; box-shadow: 0 28px 48px -18px rgba(13, 19, 33, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08) inset; --lift: -7px; }
.up-next.hero .un-t { grid-area: text; align-content: start; }
.up-next.hero .un-t b { font-size: clamp(20px, 1rem + 0.9vw, 26px); }
.up-next.hero .un-t .bar { display: none; }
.up-next.hero .un-ring { grid-area: ring; position: relative; display: inline-grid; place-items: center; width: 68px; height: 68px; margin: 8px 0 4px; }
.up-next.hero .un-pring { position: absolute; inset: 0; width: 68px; height: 68px; }
.up-next.hero .un-pring circle { stroke-width: 4.5; }
.up-next.hero .un-ring b { font-size: 14px; letter-spacing: 0; color: var(--text); }
.up-next.hero .un-go { grid-area: go; justify-self: start; margin-top: 6px; }
@media (max-width: 1023px) { .wh-hero { grid-template-columns: 1fr; } .wh-hero .amb-disc { inset-inline-end: -20vw; top: -30vw; } }
@media (max-width: 640px) { .up-next.hero { grid-template-columns: 1fr; grid-template-areas: "cover" "text" "ring" "go"; padding: 22px; } .up-next.hero .un-cover { width: 110px; } }

/* Bento of the numbers: four tiles, the goal one twice as tall on wide screens */
.wh-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.wb { position: relative; display: grid; align-content: start; gap: 12px; padding: 22px 22px 20px; border-radius: 24px; color: var(--text); overflow: hidden; min-height: 190px; }
.wb .kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; }
.wb .kicker .i { font-size: 15px; }
.wb .kicker::before { display: none; }
.wb-fig { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.wb-fig b { font-family: var(--font-display); font-weight: 800; font-size: 34px; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.wb-fig.big b { font-size: clamp(40px, 2rem + 1.4vw, 56px); }
.wb-fig span { font-family: var(--font-ui); font-size: 13.5px; color: var(--text2); }
.wb small { font-family: var(--font-ui); font-size: 12.5px; color: var(--muted); }
.wb .bar { display: block; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.wb .bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--teal), var(--violet)); }
.wb-goal { background: linear-gradient(170deg, color-mix(in srgb, var(--surface) 90%, var(--teal)), var(--surface) 55%); }
.wb-ring { position: relative; width: 132px; height: 132px; display: grid; place-items: center; margin: 4px 0 2px; }
.wb-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.wb-ring circle { fill: none; stroke-width: 6; stroke-linecap: round; }
.wb-ring .bg { stroke: var(--border); }
.wb-ring .fg { stroke: var(--teal); animation: ringIn 1100ms var(--ease-out) both; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--teal) 55%, transparent)); }
.wb-ring b { font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.wb-goal.done .wb-ring .fg { stroke: var(--gold); }
.wb-goal.done .wb-ring b { color: var(--gold); }
.wb-streak .kicker .i { color: var(--amber-ink, #B7791F); }
.wb .week { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }
.wb .week .wk-l { font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--muted); }
.wb .week .wk-dots i { width: 24px; height: 24px; }
.wb .week .wk-dots i b { font-family: var(--font-ui); font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: 0; }
.wb-level .kicker .i { color: var(--teal2); }
.wb-coins .kicker .i { color: var(--violet); }
.wb-coins .wb-fig b { background: linear-gradient(120deg, var(--violet), var(--teal)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wb-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }
.wb-stats span { display: grid; gap: 2px; font-family: var(--font-ui); font-size: 11.5px; color: var(--muted); }
.wb-stats b { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--text); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
@media (max-width: 1099px) { .wh-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wb-goal { grid-row: span 1; } }
@media (max-width: 560px) { .wh-bento { grid-template-columns: 1fr; } .wb { min-height: 0; } }

/* Continue rail */
.wh-rail > * { flex: 0 0 168px; }
/* Recommended + today's challenges side by side */
.wh-two { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.85fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.wh-recogrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.wr-feat { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 24px; border-radius: 26px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); color: var(--text); overflow: hidden; transition: transform 220ms var(--ease-out), box-shadow 220ms ease, border-color 220ms ease; }
.wr-feat::after { content: ""; position: absolute; inset: 0; background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--teal) 12%, transparent), transparent 60%); opacity: var(--spot, 0); transition: opacity 260ms ease; pointer-events: none; }
.wr-feat .cover { width: min(100%, 220px); margin: 0 auto; border-radius: 12px; box-shadow: 0 26px 44px -20px rgba(13, 19, 33, 0.55); transform: rotate(2deg); transition: transform 320ms var(--ease-out); }
.wr-feat .wr-t { display: grid; gap: 6px; justify-items: start; }
.wr-feat .wr-t .kicker { font-size: 11.5px; }
.wr-feat .wr-t b { font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 1rem + 0.9vw, 26px); letter-spacing: -0.02em; line-height: 1.12; }
.wr-feat .wr-t > span:not(.kicker):not(.btn) { font-size: 13.5px; color: var(--text2); }
.wr-feat .wr-t .btn { margin-top: 10px; pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .wr-feat:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--teal) 36%, var(--border)); } .wr-feat:hover .cover { transform: rotate(0deg) translateY(-4px); } }
.wr-small { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; align-content: start; }
.wr-small .book .bm em { font-style: normal; color: var(--teal2); font-family: var(--font-ui); font-weight: 600; }
:root[data-theme="dark"] .wr-small .book .bm em { color: var(--teal); }
.wh-chalcard { padding: 4px 0 0; overflow: hidden; border-radius: 24px; }
.wh-chalcard .chal-list, .wh-chalcard > * { border: 0; box-shadow: none; }
@media (max-width: 1023px) { .wh-two { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .wh-recogrid { grid-template-columns: 1fr; } }
/* Lesson Lab banner */
.wh-lab { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: center; padding: 28px 30px; border-radius: 28px; overflow: hidden; color: #fff; background: linear-gradient(120deg, #1B1436 0%, #2A1E5C 50%, #0F2A2E 100%); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 30px 60px -30px rgba(42, 30, 92, 0.7); transition: transform 220ms var(--ease-out), box-shadow 220ms ease; }
.wh-lab .bg-paths path { stroke: #B9A6FF; opacity: calc(0.35 - var(--k, 0) * 0.08); }
.wh-lab .ic { width: 58px; height: 58px; border-radius: 18px; margin: 0; background: rgba(255, 255, 255, 0.12); color: #D9CCFF; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.wh-lab .ic .i { font-size: 26px; }
.wh-lab .wl-t { display: grid; gap: 4px; min-width: 0; }
.wh-lab .wl-t .kicker { color: #C9BBFF; font-size: 11.5px; }
.wh-lab .wl-t b { font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 1rem + 1vw, 28px); letter-spacing: -0.02em; line-height: 1.1; }
.wh-lab .wl-t > span:not(.kicker) { color: rgba(255, 255, 255, 0.72); font-size: 14.5px; max-width: 60ch; }
.wh-lab .btn-glass { color: #fff; --glass-2: rgba(255, 255, 255, 0.12); --glass-border: rgba(255, 255, 255, 0.22); pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .wh-lab:hover { transform: translateY(-3px); box-shadow: 0 40px 70px -30px rgba(42, 30, 92, 0.85); } }
@media (max-width: 640px) { .wh-lab { grid-template-columns: auto minmax(0, 1fr); padding: 22px; } .wh-lab .btn-glass { grid-column: 1 / -1; justify-self: start; } }

/* ── Library ──────────────────────────────────────────────────────── */
.lb-hero { position: relative; display: grid; gap: 18px; justify-items: start; padding: clamp(8px, 2vw, 24px) 0 8px; }
.lb-hero .h1 { font-size: clamp(38px, 1.8rem + 3vw, 68px); letter-spacing: -0.035em; line-height: 1.0; max-width: 16ch; }
.lb-hero .lead { max-width: 52ch; }
.lb-hero .amb-disc { inset-inline-end: -8vw; top: -26vw; }
.lb-search { position: relative; width: min(100%, 640px); height: 58px; border-radius: 999px; display: flex; align-items: center; gap: 12px; padding: 0 10px 0 22px; background: var(--surface); border: 1px solid var(--border2); box-shadow: var(--shadow); transition: box-shadow 200ms ease, border-color 200ms ease, transform 200ms var(--ease-out); }
.lb-search:focus-within { border-color: color-mix(in srgb, var(--teal) 55%, var(--border2)); box-shadow: var(--shadow-lg), 0 0 0 4px color-mix(in srgb, var(--teal) 16%, transparent); transform: translateY(-1px); }
.lb-search > .i { font-size: 20px; color: var(--muted); flex: none; }
.lb-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font-size: 16.5px; color: var(--text); outline: none; }
.lb-search input::placeholder { color: var(--muted); }
.lb-search .lb-kbd { font-family: var(--font-ui); font-size: 11.5px; font-weight: 700; color: var(--muted); border: 1px solid var(--border); border-radius: 8px; padding: 4px 7px; line-height: 1; flex: none; }
.lb-search .lb-clear { display: none; }
.lb-search.has .lb-kbd { display: none; }
.lb-search.has .lb-clear { display: inline-grid; }
.lb-hero .lb-stats { display: flex; gap: 22px; flex-wrap: wrap; font-family: var(--font-ui); font-size: 13.5px; color: var(--text2); }
.lb-hero .lb-stats b { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--text); margin-inline-end: 6px; }
.lib-bar.lb-bar2 { margin-top: 10px; }
.lib-body .lib-grid { display: none; }
.lib-body.filtering .lib-grid { display: block; }
.lib-body.filtering .lib-rails { display: none; }
.lib-rails { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 4vw, 56px); min-width: 0; }
.lib-rails > section, .lib-grid, .lib-body { min-width: 0; }
.lb-top .lbc-n { flex: 1; min-width: 0; text-align: start; }
/* Tonight's picks: three tall cards, the cover leaning out of a soft field */
.lp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.lp-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: end; padding: 22px; min-height: 210px; border-radius: 26px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); color: var(--text); overflow: hidden; transition: transform 220ms var(--ease-out), box-shadow 220ms ease, border-color 220ms ease; }
.lp-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, var(--lp-tint, color-mix(in srgb, var(--teal) 12%, transparent)), transparent 62%); pointer-events: none; }
.lp-card::after { content: ""; position: absolute; inset: 0; background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--teal) 12%, transparent), transparent 60%); opacity: var(--spot, 0); transition: opacity 260ms ease; pointer-events: none; }
.lp-card .cover { width: 104px; border-radius: 10px; box-shadow: 0 22px 36px -16px rgba(13, 19, 33, 0.55); transform: rotate(-3deg) translateY(2px); transition: transform 320ms var(--ease-out); }
.lp-card .lp-t { position: relative; display: grid; gap: 4px; min-width: 0; }
.lp-card .lp-t .kicker { font-size: 11px; }
.lp-card .lp-t b { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -0.015em; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lp-card .lp-t span:not(.kicker) { font-family: var(--font-ui); font-size: 12.5px; color: var(--text2); }
.lp-card .lp-n { position: absolute; top: 16px; inset-inline-end: 18px; font-family: var(--font-display); font-weight: 800; font-size: 40px; letter-spacing: -0.04em; color: color-mix(in srgb, var(--text) 8%, transparent); line-height: 1; }
.lp-card:nth-child(2) { --lp-tint: color-mix(in srgb, var(--violet) 12%, transparent); }
.lp-card:nth-child(3) { --lp-tint: color-mix(in srgb, var(--amber, #F2B24A) 14%, transparent); }
@media (hover: hover) and (pointer: fine) { .lp-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--teal) 34%, var(--border)); } .lp-card:hover .cover { transform: rotate(0deg) translateY(-6px); } }
@media (max-width: 960px) { .lp-grid { grid-template-columns: 1fr; } .lp-card { min-height: 0; } }
/* Topic rails */
.lb-topic .sh h2 { display: inline-flex; align-items: center; gap: 10px; }
.lb-topic .sh h2 .i { font-size: 20px; color: var(--teal2); }
:root[data-theme="dark"] .lb-topic .sh h2 .i { color: var(--teal); }
.lb-topic .app-rail > * { flex: 0 0 160px; }
.lb-topic .app-rail { padding-bottom: 10px; }
.lb-top { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 12px; }
.lb-cat { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-family: var(--font-ui); font-weight: 700; font-size: 13.5px; transition: transform 160ms var(--ease-out), border-color 160ms ease, box-shadow 200ms ease; }
.lb-cat .i { font-size: 18px; color: var(--teal2); flex: none; }
.lb-cat .cnt { margin-inline-start: auto; font-size: 12px; color: var(--muted); font-weight: 600; }
:root[data-theme="dark"] .lb-cat .i { color: var(--teal); }
@media (hover: hover) and (pointer: fine) { .lb-cat:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--teal) 40%, var(--border)); box-shadow: var(--shadow); } }

/* ── My Learning ──────────────────────────────────────────────────── */
.ln-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 3vw, 48px); align-items: center; padding: clamp(8px, 2vw, 24px) 0 0; }
.ln-hero .amb-disc { inset-inline-end: -6vw; top: -26vw; }
.ln-hero-t { display: grid; gap: 16px; justify-items: start; }
.ln-hero-t .h1 { font-size: clamp(38px, 1.8rem + 3vw, 68px); letter-spacing: -0.035em; line-height: 1.0; max-width: 14ch; }
.ln-hero-t .lead { max-width: 48ch; }
.ln-plan { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; font-family: var(--font-ui); font-size: 13.5px; color: var(--text2); padding: 10px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); }
.ln-plan b { color: var(--text); }
.ln-plan .tlink { font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.ln-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-width: 300px; }
.ln-stat { display: grid; gap: 6px; padding: 18px 20px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.ln-stat .kicker { font-size: 11px; display: inline-flex; align-items: center; gap: 6px; }
.ln-stat .kicker::before { display: none; }
.ln-stat .kicker .i { font-size: 14px; }
.ln-stat b { font-family: var(--font-display); font-weight: 800; font-size: 30px; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.ln-stat small { font-family: var(--font-ui); font-size: 12px; color: var(--muted); }
.ln-stat b small { font-size: 14px; margin-inline-start: 4px; letter-spacing: 0; }
.ln-stat.wk { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ln-stat.wk .wk-dots i { width: 28px; height: 28px; }
.ln-stat.wk .wk-dots i b { font-family: var(--font-ui); font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: 0; }
.ln-stat.wk .wk-l { font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; color: var(--muted); }
@media (max-width: 900px) { .ln-hero { grid-template-columns: 1fr; } .ln-stats { min-width: 0; } }
/* In progress: big cards with a ring, the cover leaning in */
.lp-prog { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.lg-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 20px 22px 20px 20px; border-radius: 24px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); color: var(--text); overflow: hidden; transition: transform 220ms var(--ease-out), box-shadow 220ms ease, border-color 220ms ease; }
.lg-card::after { content: ""; position: absolute; inset: 0; background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--teal) 10%, transparent), transparent 60%); opacity: var(--spot, 0); transition: opacity 260ms ease; pointer-events: none; }
.lg-card .cover { width: 84px; border-radius: 10px; box-shadow: 0 18px 30px -14px rgba(13, 19, 33, 0.5); transform: rotate(-3deg); transition: transform 300ms var(--ease-out); }
.lg-card .lg-t { display: grid; gap: 4px; min-width: 0; }
.lg-card .lg-t .kicker { font-size: 11px; }
.lg-card .lg-t b { font-family: var(--font-display); font-weight: 800; font-size: 17.5px; letter-spacing: -0.015em; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lg-card .lg-t span:not(.kicker) { font-family: var(--font-ui); font-size: 12.5px; color: var(--muted); }
.lg-card .lg-t .bar { display: block; height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; margin-top: 8px; }
.lg-card .lg-t .bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--teal), var(--violet)); }
.lg-card .lg-ring { position: relative; width: 56px; height: 56px; display: grid; place-items: center; }
.lg-card .lg-ring svg { position: absolute; inset: 0; width: 56px; height: 56px; }
.lg-card .lg-ring circle { stroke-width: 5; }
.lg-card .lg-ring b { font-family: var(--font-display); font-weight: 800; font-size: 12.5px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .lg-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--teal) 36%, var(--border)); } .lg-card:hover .cover { transform: rotate(0deg) translateY(-3px); } }
.ln-done .cgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ln-done .book.done .cover { filter: saturate(0.85); }
.ln-done .book.done .bm { color: var(--green2); font-family: var(--font-ui); font-weight: 600; }
.ln-certs .cert { padding: 22px; border-radius: 22px; grid-template-columns: 56px 1fr; }
.ln-certs .cert .ic { width: 56px; height: 56px; border-radius: 16px; }
.ln-tabs-wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ── Profile ──────────────────────────────────────────────────────── */
.pf-banner { position: relative; border-radius: 30px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.pf-banner-bg { position: relative; height: clamp(140px, 18vw, 220px); overflow: hidden; background: linear-gradient(120deg, color-mix(in srgb, var(--teal) 34%, var(--surface)), color-mix(in srgb, var(--violet) 30%, var(--surface)) 60%, color-mix(in srgb, var(--amber, #F2B24A) 24%, var(--surface))); }
.pf-banner-bg i { position: absolute; border-radius: 50%; filter: blur(30px); opacity: 0.7; animation: pfDrift 14s ease-in-out infinite alternate; }
.pf-banner-bg i:nth-child(1) { width: 40%; aspect-ratio: 1; left: -8%; top: -60%; background: color-mix(in srgb, var(--teal) 60%, transparent); }
.pf-banner-bg i:nth-child(2) { width: 34%; aspect-ratio: 1; right: 8%; top: -30%; background: color-mix(in srgb, var(--violet) 55%, transparent); animation-delay: -5s; }
.pf-banner-bg i:nth-child(3) { width: 26%; aspect-ratio: 1; right: -6%; bottom: -70%; background: color-mix(in srgb, var(--amber, #F2B24A) 60%, transparent); animation-delay: -9s; }
.pf-banner-bg .bg-paths path { stroke: rgba(255, 255, 255, 0.7); }
@keyframes pfDrift { to { transform: translate(6%, 10%) scale(1.08); } }
.pf-body { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 26px; align-items: end; padding: 0 clamp(20px, 3vw, 36px) 28px; }
.pf-body .lvl-ring, .pf-body .lvl-ring svg { width: 136px; height: 136px; }
.pf-body .lvl-ring { margin-top: -64px; background: var(--surface); border-radius: 50%; padding: 0; box-shadow: 0 0 0 6px var(--surface); }
.pf-body .lvl-ring circle { stroke-width: 4; }
.pf-body .lvl-ring .fg { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--teal) 50%, transparent)); }
.pf-body .lvl-ring .avatar { inset: 14px; font-size: 42px; }
.pf-id { display: grid; gap: 6px; justify-items: start; padding-top: 18px; min-width: 0; }
.pf-id .h1 { font-size: clamp(30px, 1.4rem + 2vw, 48px); letter-spacing: -0.03em; line-height: 1.02; }
.pf-id .lvl { font-family: var(--font-ui); font-weight: 700; font-size: 14px; color: var(--teal2); }
:root[data-theme="dark"] .pf-id .lvl { color: var(--teal); }
.pf-id .meta-line { font-size: 13.5px; }
.pf-xp { display: grid; gap: 8px; min-width: 240px; padding-top: 18px; }
.pf-xp .row { font-family: var(--font-ui); font-size: 13px; color: var(--text2); }
.pf-xp .row b { color: var(--text); font-family: var(--font-display); font-size: 16px; }
.pf-xp .thin { display: block; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.pf-xp .thin i { display: block; height: 100%; width: var(--p, 0%); border-radius: 3px; background: linear-gradient(90deg, var(--teal), var(--violet)); transition: width 900ms var(--ease-out); }
.pf-xp .pf-btns { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 860px) { .pf-body { grid-template-columns: auto minmax(0, 1fr); } .pf-xp { grid-column: 1 / -1; padding-top: 6px; } }
@media (max-width: 520px) { .pf-body { grid-template-columns: 1fr; justify-items: start; } .pf-body .lvl-ring, .pf-body .lvl-ring svg { width: 112px; height: 112px; } .pf-body .lvl-ring { margin-top: -56px; } .pf-body .lvl-ring .avatar { inset: 12px; font-size: 34px; } }
/* Bento of the numbers */
.pb-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pb { display: grid; gap: 8px; align-content: start; padding: 20px 20px 18px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); color: var(--text); min-height: 128px; transition: transform 200ms var(--ease-out), box-shadow 200ms ease, border-color 200ms ease; }
.pb .kicker { font-size: 11px; display: inline-flex; align-items: center; gap: 6px; }
.pb .kicker::before { display: none; }
.pb .kicker .i { font-size: 14px; }
.pb b { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 1.4rem + 1vw, 38px); letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.pb small { font-family: var(--font-ui); font-size: 12px; color: var(--muted); }
.pb.wide { grid-column: span 2; }
.pb.acc { background: linear-gradient(160deg, color-mix(in srgb, var(--surface) 88%, var(--teal)), var(--surface) 60%); }
.pb.acc2 { background: linear-gradient(160deg, color-mix(in srgb, var(--surface) 88%, var(--violet)), var(--surface) 60%); }
.pb.acc3 { background: linear-gradient(160deg, color-mix(in srgb, var(--surface) 86%, var(--amber, #F2B24A)), var(--surface) 60%); }
.pb .pb-dna { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.pb .pb-dna .chip { pointer-events: none; }
.pb .tlink { font-family: var(--font-ui); font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; margin-top: auto; }
@media (hover: hover) and (pointer: fine) { a.pb:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--teal) 36%, var(--border)); } }
@media (max-width: 980px) { .pb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .pb-grid { grid-template-columns: 1fr; } .pb.wide { grid-column: auto; } }
.pf-two { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .pf-two { grid-template-columns: 1fr; } }
.pf-skills { display: grid; gap: 14px; padding: 22px 24px; border-radius: 24px; }
.pf-skills .skill { grid-template-columns: minmax(110px, 1fr) 2fr auto; }
.pf-skills .skill .bar i { background: linear-gradient(90deg, var(--teal), var(--violet)); }
.pf-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.pf-badges .badge { border-radius: 18px; padding: 16px 8px; }
.pf-badges .badge .ic { width: 44px; height: 44px; border-radius: 14px; margin: 0; }
.pf-badges .badge:not(.off) { border-color: color-mix(in srgb, var(--gold) 36%, var(--border)); background: var(--gold-soft); }
.pf-badges .badge:not(.off) .ic { background: var(--surface); color: var(--gold); }
.pf-acc { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.pf-acc a { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); color: var(--text); transition: transform 160ms var(--ease-out), border-color 160ms ease, box-shadow 200ms ease; }
.pf-acc a .ic { width: 44px; height: 44px; border-radius: 14px; margin: 0; }
.pf-acc a b { display: block; font-family: var(--font-ui); font-size: 14.5px; }
.pf-acc a span:not(.ic):not(.i) { display: block; font-size: 12.5px; color: var(--text2); }
.pf-acc a > .i { color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .pf-acc a:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--teal) 36%, var(--border)); box-shadow: var(--shadow); } }

/* ── Bits AI: the dock beside the orb, the window in the middle ───── */
.orb-dock { position: absolute; top: 50%; inset-inline-end: calc(100% + 12px); transform: translateY(-50%) translateX(8px) scale(0.96); display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity 200ms ease, transform 260ms var(--ease-out); white-space: nowrap; }
.orb-host.left .orb-dock { inset-inline-end: auto; inset-inline-start: calc(100% + 12px); transform: translateY(-50%) translateX(-8px) scale(0.96); }
.orb-host.docked .orb-dock { opacity: 1; pointer-events: auto; transform: translateY(-50%) translateX(0) scale(1); }
.orb-host.docked .orb-tip { opacity: 0 !important; }
.orb-dock button { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px 0 10px; border-radius: 999px; border: 0; background: transparent; color: var(--text); font-family: var(--font-ui); font-weight: 700; font-size: 13px; cursor: pointer; transition: background 140ms ease, transform 140ms var(--ease-out); }
.orb-dock button .i { font-size: 16px; color: var(--violet); }
.orb-dock button:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.orb-dock button:active { transform: scale(0.96); }
.orb-dock .sep { width: 1px; height: 20px; background: var(--glass-border); margin: 0 2px; }
.orb-host.drag .orb-dock { opacity: 0; pointer-events: none; }
@media (max-width: 1023px), (hover: none) { .orb-dock { display: none; } }
/* The window: a centred glass card from 1024 px */
@media (min-width: 1024px) {
  .sheet2.center { align-items: center; justify-content: center; padding: 24px; background: rgba(8, 13, 23, 0.42); }
  .sheet2.center .sheet2-panel { width: min(860px, 100%); height: min(760px, calc(100dvh - 48px)); max-height: none; border-radius: 28px; padding: 18px 24px 20px; animation: aiWin 360ms var(--ease-out) both; box-shadow: 0 40px 90px -30px rgba(8, 13, 23, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06) inset; }
  .sheet2.center.closing .sheet2-panel { animation: aiWinOut 160ms var(--ease-out) forwards; }
  .sheet2.center.ai .sheet2-panel { height: min(760px, calc(100dvh - 48px)); }
  .sheet2.center.ai .ai-page { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 14px; }
  .sheet2.center.ai .ai-side { padding: 12px; border-radius: 20px; }
  .sheet2.center.ai .ai-side { display: flex; flex-direction: column; }
  .sheet2.center.ai .ai-main { border: 1px solid var(--border); border-radius: 20px; }
}
@keyframes aiWin { from { opacity: 0; transform: translateY(18px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes aiWinOut { to { opacity: 0; transform: translateY(8px) scale(0.98); } }
.sheet2.ai .sheet2-head h2 { display: inline-flex; align-items: center; gap: 10px; }
.sheet2.ai .sheet2-head h2 .i { color: var(--violet); }
/* Prompt cards in the empty state */
.ai-empty { max-width: 640px; gap: 10px; padding: 22px 12px; }
.ai-empty .big-ic { width: 60px; height: 60px; border-radius: 20px; background: linear-gradient(135deg, var(--violet), var(--teal)); color: #fff; box-shadow: 0 16px 30px -14px color-mix(in srgb, var(--violet) 70%, transparent); animation: hs-float 6s ease-in-out infinite; --lift: -4px; }
.ai-empty .h3 { font-size: 22px; letter-spacing: -0.02em; }
.ai-prompts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; margin-top: 8px; text-align: start; }
.ai-prompt { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); color: var(--text); cursor: pointer; text-align: start; transition: transform 160ms var(--ease-out), border-color 160ms ease, box-shadow 200ms ease; }
.ai-prompt .ic { width: 34px; height: 34px; border-radius: 11px; margin: 0; background: var(--violet-soft); color: var(--violet); }
.ai-prompt .ic .i { font-size: 17px; }
.ai-prompt b { display: block; font-family: var(--font-ui); font-size: 13.5px; font-weight: 700; }
.ai-prompt span { display: block; font-size: 12.5px; color: var(--text2); line-height: 1.4; }
.ai-prompt:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--violet) 40%, var(--border)); box-shadow: var(--shadow); }
@media (max-width: 560px) { .ai-prompts { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .pf-banner-bg i, .ai-empty .big-ic { animation: none; } .sheet2.center .sheet2-panel { animation: none; } }

/* ── BitsBot: the app's own character on the orb ─────────────────────
 * The glossy bit with a face from core/brand/bits_bot.dart, drawn as SVG.
 * The head takes the logo tile colour of the theme - teal on light, mint
 * on dark - so it holds on both. It blinks every second and glances
 * somewhere new every two seconds. Nothing else on it moves. */
.orb-core.bot { width: 56px; height: 56px; border-radius: 0; overflow: visible; background: none; box-shadow: none; animation: none; display: grid; place-items: center; }
.orb-core.bot .bot-svg { width: 68px; height: 68px; overflow: visible; }
.bot-svg .bh0 { stop-color: #3DC3B4; } .bot-svg .bh1 { stop-color: #1A7870; }
:root[data-theme="dark"] .bot-svg .bh0 { stop-color: #8DEADD; } :root[data-theme="dark"] .bot-svg .bh1 { stop-color: #309E94; }
.bot-eyes { transform: translate(calc(var(--gx, 0) * 1.1px), calc(var(--gy, 0) * 1px)); transition: transform 380ms var(--ease-out); }
.bot-eye { transform: translate(var(--ex), 28.1px); }
.bot-eye > * { animation: botBlink 1s linear infinite; transform-origin: 0 0; }
.bot-pupil { transform: translate(calc(var(--gx, 0) * 1.5px), calc(var(--gy, 0) * 0.8px)); transition: transform 380ms var(--ease-out); }
.bot-eye .bot-pupil > * { animation: none; }
@keyframes botBlink { 0%, 85%, 100% { transform: scaleY(1); } 92% { transform: scaleY(0.08); } }
.orb-host .orb-tip, .orb-host .orb-dock { --gx: 0; --gy: 0; }
.bot-mini { display: inline-grid; place-items: center; width: 28px; height: 28px; }
.bot-mini .bot-svg { width: 34px; height: 34px; overflow: visible; }
.orb-host.ai-open .orb-tip, .orb-host.ai-open .orb-dock { opacity: 0 !important; pointer-events: none !important; }
@media (hover: hover) and (pointer: fine) { .orb:hover .orb-core.bot { transform: none; } }
@media (prefers-reduced-motion: reduce) { .bot-eye > * { animation: none; } }
:root[data-reduce-motion="1"] .bot-eye > * { animation: none; }

/* ── The Bits AI widget: a panel beside the orb, the page stays live ─ */
.ai-widget { position: fixed; z-index: calc(var(--z-menu) + 1); width: min(440px, calc(100vw - 32px)); display: flex; flex-direction: column; border-radius: 26px; overflow: hidden; transform-origin: var(--ox, 100%) var(--oy, 100%); animation: aiwIn 420ms cubic-bezier(0.22, 1.2, 0.36, 1) both; box-shadow: 0 30px 70px -24px rgba(8, 13, 23, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05) inset, var(--glass-shadow); }
.ai-widget.closing { animation: aiwOut 200ms var(--ease-out) forwards; }
@keyframes aiwIn { from { opacity: 0; transform: scale(0.42) translateY(12px); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes aiwOut { to { opacity: 0; transform: scale(0.6) translateY(10px); } }
.aiw-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--glass-border); flex: none; }
.aiw-head .ai-id { gap: 10px; }
.aiw-acts { display: flex; gap: 2px; }
.aiw-acts .btn-icon { width: 36px; height: 36px; border-radius: 12px; }
.aiw-acts .btn[aria-pressed="true"] { background: color-mix(in srgb, var(--text) 10%, transparent); }
.ai-widget .ai-host { flex: 1; min-height: 0; display: flex; position: relative; }
.ai-widget .ai-page { display: flex; flex: 1; min-height: 0; grid-template-columns: 1fr; position: relative; }
.ai-widget .ai-main { flex: 1; min-height: 0; border: 0; box-shadow: none; background: transparent; border-radius: 0; }
.ai-widget .ai-top { padding: 10px 14px; }
.ai-widget .ai-side { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; border-radius: 0; background: var(--surface); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: transform 220ms var(--ease-out), opacity 160ms ease; overflow: auto; }
.ai-widget.hist .ai-side { transform: none; opacity: 1; pointer-events: auto; }
.ai-widget .ai-empty { padding: 18px 8px 8px; gap: 8px; }
.ai-widget .ai-empty .big-ic { width: 52px; height: 52px; border-radius: 17px; }
.ai-widget .ai-empty .h3 { font-size: 19px; }
.ai-widget .ai-empty p { font-size: 14px; }
.ai-widget .ai-prompts { grid-template-columns: 1fr; gap: 8px; }
.ai-widget .ai-prompt { padding: 10px 12px; }
.ai-widget .composer { padding: 10px 12px 12px; }
.ai-widget .ai-msgs { padding: 14px; }
@media (prefers-reduced-motion: reduce) { .ai-widget { animation: none; } }
/* The context chooser: a small list that opens upward over the composer */
.ctxsel { position: relative; }
.ctx-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px 0 10px; border-radius: 999px; border: 1px solid var(--border2); background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px; cursor: pointer; max-width: 100%; transition: border-color 140ms ease, background 140ms ease; }
.ctx-btn .cx-l { font-family: var(--font-ui); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.ctx-btn > .i:last-child { font-size: 15px; color: var(--muted); transition: transform 200ms var(--ease-out); }
.ctx-btn[aria-expanded="true"] { border-color: color-mix(in srgb, var(--teal) 50%, var(--border2)); }
.ctx-btn[aria-expanded="true"] > .i:last-child { transform: rotate(180deg); }
.ctx-pop { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 5; width: min(320px, calc(100vw - 40px)); max-height: 280px; overflow: auto; padding: 6px; border-radius: 16px; background: var(--glass-2); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow-lg); transform-origin: bottom left; animation: popover 170ms var(--ease-out) both; }
.ctx-pop[hidden] { display: none; }
.ctx-pop button { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font: inherit; font-size: 13.5px; text-align: start; cursor: pointer; }
.ctx-pop button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctx-pop button .i { font-size: 16px; color: var(--muted); }
.ctx-pop button .i:last-child:not(:first-child) { color: var(--teal2); }
.ctx-pop button[aria-selected="true"] { background: color-mix(in srgb, var(--teal) 12%, transparent); font-weight: 600; }
.ctx-pop button:hover, .ctx-pop button:focus-visible { background: color-mix(in srgb, var(--text) 8%, transparent); outline: none; }
.composer-row .ctxsel { flex: 0 1 auto; }
/* Lesson Lab banner: smooth glowing lines, the body line back */
.wh-lab .bg-paths path { stroke: #B9A6FF; stroke-width: 1; stroke-dasharray: 320 160; opacity: calc(0.3 - var(--k, 0) * 0.07); }
.wh-lab .wl-t > span:not(.kicker) { display: block; }
/* Account rows: a lighter tile, the arrow moves */
.pf-acc a { padding: 14px 16px; border-radius: 16px; }
.pf-acc a .ic { width: 40px; height: 40px; border-radius: 12px; }
.pf-acc a .ic .i { font-size: 19px; }
.pf-acc a > .i:last-child { transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .pf-acc a:hover > .i:last-child { transform: translateX(3px); color: var(--text); } [dir="rtl"] .pf-acc a:hover > .i:last-child { transform: translateX(-3px); } }
.ai-widget .ai-top .ai-id { display: none; }
.ai-widget .ai-top { justify-content: flex-start; }
/* Icon tiles centre their glyph wherever they are, not only inside a card */
.ic { display: grid; place-items: center; }
.ai-prompt .ic, .pf-acc a .ic, .wh-lab .ic { display: grid; place-items: center; }
/* The character, bigger */
.orb-core.bot .bot-svg { width: 86px; height: 86px; }
.bot-mini { width: 34px; height: 34px; }
.bot-mini .bot-svg { width: 42px; height: 42px; }
.aiw-head .ai-id b { font-size: 16px; }
/* Scrollbars in the app follow the theme: a thin thumb, no track */
.app-main, .ai-msgs, .ai-side, .ctx-pop, .sheet2-panel, .ai-widget, .lib-rails, .menu, .rd-pop { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text) 22%, transparent) transparent; }
.ai-msgs::-webkit-scrollbar, .ai-side::-webkit-scrollbar, .ctx-pop::-webkit-scrollbar, .sheet2-panel::-webkit-scrollbar { width: 6px; height: 6px; }
.ai-msgs::-webkit-scrollbar-thumb, .ai-side::-webkit-scrollbar-thumb, .ctx-pop::-webkit-scrollbar-thumb, .sheet2-panel::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text) 22%, transparent); border-radius: 999px; }
.ai-msgs::-webkit-scrollbar-track, .ai-side::-webkit-scrollbar-track, .ctx-pop::-webkit-scrollbar-track, .sheet2-panel::-webkit-scrollbar-track { background: transparent; }
html { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text) 22%, transparent) transparent; }
html::-webkit-scrollbar { width: 8px; } html::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text) 22%, transparent); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } html::-webkit-scrollbar-track { background: transparent; }
.ai-msgs { padding-inline-end: 10px; }
/* The chooser list sits solid over the cards */
.ctx-pop { background: color-mix(in srgb, var(--surface) 94%, transparent); }
/* History layer: the header already has New chat, so the big one goes */
.ai-widget .ai-side [data-new] { display: none; }
.ai-widget .ai-side { padding: 8px 12px 14px; }
.ai-widget .ai-threads .kicker { padding: 10px 8px 8px !important; }
.ai-widget .thread { padding: 10px 10px; border-radius: 12px; }
.ai-widget .thread + .thread { border-top: 1px solid var(--border); border-radius: 0 0 12px 12px; }
.orb-core.bot .bot-svg, .bot-mini .bot-svg { max-width: none; max-height: none; }
.orb-core.bot { position: relative; display: block; }
.orb-core.bot .bot-svg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -52%); }

/* ── Bits AI, the app's way ─────────────────────────────────────────── */
.ai2 { display: flex !important; flex-direction: column; flex: 1; min-height: 0; position: relative; }
.ai-top2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px 6px 14px; flex: none; }
.ai-acts { display: flex; gap: 2px; }
.ai-acts .btn-icon { width: 34px; height: 34px; border-radius: 11px; }
.ai-meterchip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--violet) 40%, transparent); background: color-mix(in srgb, var(--violet) 12%, transparent); color: var(--violet); font-family: var(--font-ui); font-size: 12.5px; font-weight: 800; cursor: pointer; font-variant-numeric: tabular-nums; }
.ai-meterchip .ring { width: 14px; height: 14px; border-radius: 50%; background: conic-gradient(currentColor var(--p, 0%), color-mix(in srgb, currentColor 22%, transparent) 0); -webkit-mask: radial-gradient(circle, transparent 4px, #000 4.6px); mask: radial-gradient(circle, transparent 4px, #000 4.6px); }
.ai-meterchip.full { color: var(--amber-ink, #B45309); border-color: color-mix(in srgb, var(--amber, #F2B24A) 50%, transparent); background: color-mix(in srgb, var(--amber, #F2B24A) 14%, transparent); }
.ai-ctxbar { display: flex; align-items: center; gap: 8px; padding: 0 14px 8px; flex: none; min-width: 0; }
.ai-ctxl { font-family: var(--font-ui); font-size: 12px; color: var(--muted); flex: none; }
.ai-pill { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px 0 10px; border-radius: 999px; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--text); font: inherit; font-family: var(--font-ui); font-size: 13px; font-weight: 700; cursor: pointer; min-width: 0; max-width: 100%; }
.ai-pill .i { font-size: 15px; color: var(--teal2); flex: none; } .ai-pill .i:last-child { color: var(--muted); font-size: 14px; }
:root[data-theme="dark"] .ai-pill .i:first-child { color: var(--teal); }
.ai-pill .clamp1 { min-width: 0; }
.btn-icon.sm { width: 30px; height: 30px; border-radius: 10px; }
.btn-icon.sm .i { font-size: 15px; }
.ai2 .ai-msgs { flex: 1; min-height: 0; overflow: auto; padding: 6px 14px 12px; display: block; }
.ai-foot { flex: none; }
/* Welcome */
.ai-welcome { display: grid; gap: 10px; padding: 2px 0 8px; }
.ai-hero { position: relative; overflow: hidden; display: grid; gap: 6px; padding: 18px 18px 18px; border-radius: 22px; color: #fff; background: linear-gradient(135deg, #5B4BE0 0%, #7C5CFF 45%, #18B8A6 130%); box-shadow: 0 20px 40px -22px rgba(92, 75, 224, 0.7); animation: aiIn 400ms var(--ease-out) both; }
.ai-hero .bot-mini.lg { width: 44px; height: 44px; margin-bottom: 4px; }
.ai-hero .bot-mini.lg .bot-svg { width: 54px; height: 54px; }
.ai-hero h2 { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; line-height: 1.15; color: #fff; }
.ai-hero p { font-size: 13.5px; color: rgba(255, 255, 255, 0.85); line-height: 1.45; }
@keyframes aiIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.ai-sech { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--font-ui); font-size: 12.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 8px 2px 0; }
.ai-sech .tlink { font-size: 12.5px; text-transform: none; letter-spacing: 0; display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; cursor: pointer; font-family: var(--font-ui); font-weight: 700; }
.ai-suggest, .ai-recent, .ai-list { display: grid; gap: 8px; }
.ai-sug, .ai-thread { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; text-align: start; cursor: pointer; transition: transform 160ms var(--ease-out), border-color 160ms ease, box-shadow 200ms ease; animation: aiIn 300ms var(--ease-out) both; animation-delay: calc(80ms * (var(--k, 0) + 1)); }
.ai-sug > span:not(.ic), .ai-thread .tt { font-size: 14px; line-height: 1.35; min-width: 0; }
.ai-sug .ic, .ai-thread .ic { width: 36px; height: 36px; border-radius: 12px; margin: 0; background: var(--violet-soft); color: var(--violet); }
.ai-sug .ic .i, .ai-thread .ic .i { font-size: 18px; }
.ai-thread .ic { background: var(--surface2); color: var(--text2); }
.ai-thread.on .ic { background: var(--teal-soft); color: var(--teal2); }
.ai-thread.new .ic { background: var(--violet-soft); color: var(--violet); }
.ai-sug > .i:last-child, .ai-thread > .i:last-child { font-size: 16px; color: var(--muted); }
.ai-thread .tt { display: grid; gap: 2px; }
.ai-thread .tt b { font-family: var(--font-ui); font-size: 14px; }
.ai-thread .tt small { font-size: 12px; color: var(--muted); }
.ai-thread .ai-delq { display: none; align-items: center; gap: 6px; flex-wrap: wrap; font-family: var(--font-ui); font-size: 12.5px; color: var(--text2); margin-top: 6px; }
.ai-thread.confirm .ai-delq { display: flex; }
.ai-thread.confirm [data-del] { visibility: hidden; }
.ai-none { padding: 8px 4px; }
@media (hover: hover) and (pointer: fine) { .ai-sug:hover, .ai-thread:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--teal) 36%, var(--border)); box-shadow: var(--shadow); } }
.ai-signin { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; font-size: 13.5px; }
.ai-signin .ic { width: 40px; height: 40px; border-radius: 12px; margin: 0; }
/* Bubbles */
.ai-u { position: relative; margin: 6px 0 10px 48px; padding: 10px 14px; border-radius: 18px 18px 6px 18px; background: color-mix(in srgb, var(--teal) 16%, transparent); border: 1px solid color-mix(in srgb, var(--teal) 32%, transparent); font-size: 14.5px; line-height: 1.4; animation: aiIn 260ms var(--ease-out) both; }
.ai-u.editing { background: color-mix(in srgb, var(--violet) 10%, transparent); border-color: color-mix(in srgb, var(--violet) 70%, transparent); }
.ai-u .ai-ut { display: block; white-space: pre-wrap; }
.ai-attach { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; color: var(--text2); margin-bottom: 4px; }
.ai-uact { position: absolute; inset-inline-end: 6px; top: -14px; display: none; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.ai-u:hover .ai-uact, .ai-u:focus-within .ai-uact { display: inline-flex; }
.ai-edit { width: 100%; border: 0; background: transparent; font: inherit; font-size: 14.5px; color: var(--text); resize: none; outline: none; padding: 0; }
.ai-editrow { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 6px; }
.ai-editrow small { margin-inline-end: auto; font-family: var(--font-ui); font-size: 12px; color: var(--muted); }
.ai-editrow .ok { color: var(--violet); }
.ai-a { margin: 0 20px 12px 0; padding: 12px 12px 6px 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); animation: aiIn 280ms var(--ease-out) both; }
.ai-ah { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; min-width: 0; }
.ai-ah > b { font-family: var(--font-ui); font-size: 13.5px; font-weight: 700; color: var(--violet); flex: none; }
.ai-mark { width: 20px; height: 20px; display: grid; place-items: center; flex: none; }
.ai-mark img { width: 20px; height: 20px; object-fit: contain; }
.ai-mark .bot-mini { width: 26px; height: 26px; } .ai-mark .bot-mini .bot-svg { width: 32px; height: 32px; }
.ai-tag { font-family: var(--font-ui); font-size: 11.5px; color: var(--muted); padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); min-width: 0; }
.ai-at { font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; }
.ai-at .rw { animation: rwIn 260ms ease both; }
@keyframes rwIn { from { opacity: 0.06; } to { opacity: 1; } }
.ai-aact { display: flex; justify-content: flex-end; margin-top: 2px; }
.ai-a.live .ai-stage { color: var(--muted); font-weight: 600; }
.ai-a.live .ai-at:empty { min-height: 10px; }
/* Errors, limit */
.ai-err { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 14px; font-family: var(--font-ui); font-size: 12.5px; color: var(--rose, #E5484D); }
.ai-limit { display: grid; gap: 6px; justify-items: start; margin: 4px 12px 12px; padding: 14px; border-radius: 16px; background: var(--gold-soft); border: 1px solid rgba(242, 178, 74, 0.4); }
.ai-limit b { font-family: var(--font-ui); font-size: 14px; }
.ai-limit span { font-size: 13px; color: var(--text2); }
.btn-glass.gold { color: var(--gold); border-color: rgba(242, 178, 74, 0.5); }
/* Composer, Gemini-style: the question, then attach · chips · send */
.composer2 { margin: 6px 12px 12px; padding: 8px 8px 8px; border-radius: 22px; background: var(--glass-2); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 var(--glass-edge), 0 12px 28px -18px rgba(8, 13, 23, 0.4); display: grid; gap: 6px; }
.composer2 textarea { width: 100%; border: 0; background: transparent; padding: 8px 10px 4px; font: inherit; font-size: 15px; color: var(--text); resize: none; outline: none; max-height: 160px; }
.composer2 textarea::placeholder { color: var(--muted); }
.composer2-row { display: flex; align-items: center; gap: 8px; }
.composer2-row .btn-icon { width: 38px; height: 38px; border-radius: 999px; flex: none; }
.ai-chips { flex: 1; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.ai-chips::-webkit-scrollbar { display: none; }
.ai-chips .chip { flex: none; height: 32px; padding: 0 12px 0 9px; gap: 6px; background: color-mix(in srgb, var(--violet) 10%, transparent); border-color: color-mix(in srgb, var(--violet) 35%, transparent); color: var(--text); font-size: 12.5px; }
.ai-chips .chip .i { color: var(--violet); font-size: 14px; }
.composer2 .send { opacity: 0.55; transform: scale(0.92); transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 180ms ease; }
.composer2 .send.has { opacity: 1; transform: none; }
.composer2 .send.stop { opacity: 1; transform: none; background: var(--rose, #E5484D); color: #fff; border: 0; }
.composer2 .send.stop .i { font-size: 18px; }
.ai-pend { display: flex; align-items: center; gap: 8px; padding: 4px 6px 0 10px; font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; color: var(--text2); min-width: 0; }
.ai-pend > .i { color: var(--violet); }
.ai-pend .clamp1 { min-width: 0; flex: 1; }
/* Layers over the panel: chats, the book picker, usage */
.ai-layer { position: absolute; inset: 0; z-index: 4; background: color-mix(in srgb, var(--bg) 40%, transparent); display: flex; align-items: flex-end; animation: fade-in 160ms ease; }
.ai-layer[hidden] { display: none; }
.ai-layerin { width: 100%; max-height: 92%; overflow: auto; background: var(--surface); border-radius: 22px 22px 0 0; border-top: 1px solid var(--border); box-shadow: var(--shadow-lg); animation: sheetUp 260ms var(--ease-out); }
.ai-sheet { display: grid; gap: 12px; padding: 16px 16px 18px; }
.ai-sheeth { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ai-sheeth h3 { font-family: var(--font-display); font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.ai-sheeth p { font-size: 13px; color: var(--text2); margin-top: 2px; }
.ai-search { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--border2); background: var(--bg); }
.ai-search input { flex: 1; border: 0; background: transparent; font: inherit; font-size: 14px; color: var(--text); outline: none; min-width: 0; }
.ai-search .i { color: var(--muted); }
.ai-urow { display: grid; gap: 8px; padding: 12px 14px; border-radius: 16px; background: color-mix(in srgb, var(--violet) 8%, transparent); border: 1px solid color-mix(in srgb, var(--violet) 32%, transparent); }
.ai-urow.deep { background: var(--gold-soft); border-color: rgba(242, 178, 74, 0.4); }
.ai-urh { display: flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 14px; }
.ai-urh .i { color: var(--violet); font-size: 17px; } .ai-urow.deep .ai-urh .i { color: var(--gold); }
.ai-urh .num { margin-inline-start: auto; font-family: var(--font-ui); font-weight: 700; color: var(--text); letter-spacing: 0; font-size: 13px; }
.ai-urow .bar { display: block; height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; }
.ai-urow .bar i { display: block; height: 100%; background: var(--violet); border-radius: 3px; } .ai-urow.deep .bar i { background: var(--gold); }
.ai-urow p { font-size: 12.5px; color: var(--text2); line-height: 1.45; }
.ai-sheet .btn.wide { justify-content: center; }
/* Quiz inside the chat */
.ai-quiz { display: grid; gap: 10px; padding-bottom: 6px; }
.ai-qh { display: flex; align-items: center; gap: 10px; }
.ai-qh small { font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--muted); }
.ai-qh .bar { width: 76px; flex: none; height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; }
.ai-qh .bar i, .ai-quiz > .bar i { display: block; height: 100%; background: var(--violet); border-radius: 3px; }
.ai-quiz > .bar { display: block; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.ai-quiz > .bar.ok i { background: var(--green2); } .ai-quiz > .bar.bad i { background: var(--rose, #E5484D); }
.ai-quiz .qq { font-family: var(--font-ui); font-size: 14.5px; font-weight: 700; line-height: 1.35; }
.ai-quiz .qd { font-family: var(--font-ui); font-size: 12px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.ai-quiz .qs { font-family: var(--font-display); font-size: 18px; font-weight: 800; }
.ai-opts { display: grid; gap: 6px; }
.ai-opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); font: inherit; font-size: 14px; text-align: start; cursor: pointer; transition: transform 120ms var(--ease-out), border-color 140ms ease, background 140ms ease; }
.ai-opt:not([disabled]):active { transform: scale(0.98); }
.ai-opt.right { background: color-mix(in srgb, var(--green2) 16%, transparent); border-color: var(--green2); }
.ai-opt.wrong { background: color-mix(in srgb, var(--rose, #E5484D) 14%, transparent); border-color: var(--rose, #E5484D); }
.ai-opt .i { font-size: 16px; flex: none; }
.ai-expl { font-size: 13px; color: var(--text2); line-height: 1.45; }
.ai-hint { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--gold-soft); border: 1px solid rgba(242, 178, 74, 0.35); font-size: 13px; }
.ai-hint .i { color: var(--gold); flex: none; margin-top: 1px; }
.ai-qbtns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.ai-qbtns .sp { flex: 1; }
.ai-analysis { font-size: 13.5px; line-height: 1.5; padding: 10px 12px; border-radius: 12px; background: var(--surface2); white-space: pre-wrap; }
.btn-danger { background: var(--rose, #E5484D); color: #fff; border: 0; }
/* The panel and the sheet both host the same page */
.ai-widget .ai-side { display: none; }
.sheet2.ai .ai2 .ai-msgs { padding-inline-end: 10px; }
.ai-widget .ai-top2 { padding-top: 4px; }
/* The character's head: the logo tile of the theme, or the company's colour */
.bot-svg .bh0 { stop-color: var(--bot-top, #3DC3B4); } .bot-svg .bh1 { stop-color: var(--bot-bottom, #1A7870); }
:root[data-theme="dark"] .bot-svg .bh0 { stop-color: var(--bot-top, #FFFFFF); } :root[data-theme="dark"] .bot-svg .bh1 { stop-color: var(--bot-bottom, #DDF0EC); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bot-svg .bh0 { stop-color: var(--bot-top, #FFFFFF); } :root:not([data-theme="light"]) .bot-svg .bh1 { stop-color: var(--bot-bottom, #DDF0EC); } }
:root[data-theme="dark"] .bot-svg path[stroke="#D27828"] { stroke: #D27828; }
.ai2 { min-width: 0; width: 100%; max-width: 100%; }
.ai2 > *, .ai-msgs > *, .ai-foot > * { min-width: 0; max-width: 100%; }
.ai-u, .ai-a { box-sizing: border-box; }
.ai-u { max-width: calc(100% - 48px); margin-inline-start: auto; }

/* ══ Bits AI, the web experience ═══════════════════════════════════════
 * Same behaviour as the phone; the room is bigger, so the panel earns
 * a richer skin after 21st.dev's AI-chat pieces: an aurora welcome, a
 * composer with a live gradient border, shimmer while it thinks, a
 * cursor while it writes, spotlight on the cards. Everything is
 * transform, opacity and gradients - nothing that fights the reading. */
@property --aia { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.ai-widget { width: min(500px, calc(100vw - 32px)); border-radius: 28px; }
.ai-widget::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(520px circle at 100% -10%, color-mix(in srgb, var(--violet) 16%, transparent), transparent 55%), radial-gradient(420px circle at -10% 110%, color-mix(in srgb, var(--teal) 14%, transparent), transparent 55%); }
.ai-widget > * { position: relative; z-index: 1; }
.aiw-head { padding: 12px 12px 10px 16px; }
.aiw-head .ai-id b { font-size: 16.5px; letter-spacing: -0.01em; }
.ai-top2 { padding: 6px 10px 4px 14px; }
/* Meter: a conic ring that glows a little */
.ai-meterchip { height: 32px; background: color-mix(in srgb, var(--violet) 10%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); transition: transform 160ms var(--ease-out), box-shadow 200ms ease; }
.ai-meterchip:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--violet) 70%, transparent); }
/* Context pill: glass with a soft glow on hover */
.ai-pill { background: var(--glass-2); border-color: var(--glass-border); box-shadow: inset 0 1px 0 var(--glass-edge); transition: transform 160ms var(--ease-out), box-shadow 200ms ease, border-color 200ms ease; }
.ai-pill:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--teal) 45%, var(--glass-border)); box-shadow: inset 0 1px 0 var(--glass-edge), 0 8px 22px -12px color-mix(in srgb, var(--teal) 70%, transparent); }
/* Welcome: an aurora card with drifting blobs and the character floating */
.ai-hero { padding: 22px 20px 20px; border-radius: 24px; background: linear-gradient(135deg, #4C3FD6 0%, #7A5CFF 40%, #1FA8A0 100%); isolation: isolate; box-shadow: 0 24px 50px -24px rgba(92, 75, 224, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.28); }
.ai-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(400px circle at var(--mx, 70%) var(--my, 20%), rgba(255, 255, 255, 0.18), transparent 60%); pointer-events: none; }
.ai-hero i { position: absolute; border-radius: 50%; filter: blur(26px); opacity: 0.75; z-index: -1; animation: ahDrift 12s ease-in-out infinite alternate; pointer-events: none; }
.ai-hero .ah-b1 { width: 60%; aspect-ratio: 1; right: -20%; top: -50%; background: #9F8BFF; }
.ai-hero .ah-b2 { width: 45%; aspect-ratio: 1; left: -15%; bottom: -55%; background: #2FD1C4; animation-delay: -4s; }
.ai-hero .ah-b3 { width: 30%; aspect-ratio: 1; right: 20%; bottom: -30%; background: #FFB86B; opacity: 0.45; animation-delay: -8s; }
@keyframes ahDrift { to { transform: translate(8%, 12%) scale(1.12); } }
.ai-hero .bot-mini.lg { width: 52px; height: 52px; filter: drop-shadow(0 10px 18px rgba(8, 13, 23, 0.35)); animation: hs-float 6s ease-in-out infinite; --lift: -4px; }
.ai-hero .bot-mini.lg .bot-svg { width: 64px; height: 64px; }
.ai-hero h2 { font-size: 22px; letter-spacing: -0.025em; text-wrap: balance; }
.ai-hero p { font-size: 14px; }
.ai-sech { padding-top: 10px; }
/* Cards: hairline, spotlight, arrow slides */
.ai-sug, .ai-thread { position: relative; overflow: hidden; border-radius: 18px; background: color-mix(in srgb, var(--surface) 88%, transparent); }
.ai-sug::after, .ai-thread::after { content: ""; position: absolute; inset: 0; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--violet) 14%, transparent), transparent 60%); opacity: var(--spot, 0); transition: opacity 260ms ease; pointer-events: none; }
.ai-sug > .i:last-child { transition: transform 200ms var(--ease-out), color 160ms ease; }
.ai-sug:hover > .i:last-child { transform: translate(2px, -2px); color: var(--violet); }
.ai-sug .ic { background: linear-gradient(135deg, color-mix(in srgb, var(--violet) 22%, transparent), color-mix(in srgb, var(--teal) 18%, transparent)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); }
/* Bubbles */
.ai-u { border-radius: 20px 20px 6px 20px; background: linear-gradient(135deg, color-mix(in srgb, var(--teal) 18%, transparent), color-mix(in srgb, var(--violet) 14%, transparent)); border-color: color-mix(in srgb, var(--teal) 28%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); }
.ai-a { position: relative; border-radius: 20px; background: color-mix(in srgb, var(--surface) 82%, transparent); box-shadow: inset 0 1px 0 var(--glass-edge); }
.ai-a::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--violet), var(--teal)); opacity: 0.8; }
.ai-a.live::before { animation: aiLine 1.6s ease-in-out infinite; }
@keyframes aiLine { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.ai-aact { opacity: 0; transition: opacity 180ms ease; }
.ai-a:hover .ai-aact, .ai-a:focus-within .ai-aact { opacity: 1; }
.ai-a.live .ai-aact { display: none; }
/* Thinking: shimmering label, the idea bit glowing; writing: a cursor */
.ai-a.live .ai-stage { background: linear-gradient(90deg, var(--muted) 0%, var(--text) 50%, var(--muted) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: aiShimmer 1.6s linear infinite; }
@keyframes aiShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.ai-mark.thinking .bot-svg rect[x="24.9"] { filter: drop-shadow(0 0 4px #FFBE64); animation: aiIdea 1.1s ease-in-out infinite; }
@keyframes aiIdea { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
.ai-cursor { display: inline-block; width: 7px; height: 15px; border-radius: 2px; vertical-align: -2px; margin-inline-start: 2px; background: linear-gradient(180deg, var(--violet), var(--teal)); animation: aiBlink 900ms steps(2, start) infinite; }
.ai-a.live .ai-at:empty + .ai-cursor { display: none; }
@keyframes aiBlink { to { visibility: hidden; } }
.ai-at .rw { animation: rwIn 320ms var(--ease-out) both; display: inline-block; }
@keyframes rwIn { from { opacity: 0; transform: translateY(3px); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
/* Composer: a gradient border that comes alive on focus, lit send */
.composer2 { position: relative; border: 0; border-radius: 24px; background: color-mix(in srgb, var(--surface) 78%, transparent); box-shadow: 0 16px 40px -22px rgba(8, 13, 23, 0.5); }
.composer2::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--aia), color-mix(in srgb, var(--teal) 55%, var(--border)), color-mix(in srgb, var(--violet) 55%, var(--border)), color-mix(in srgb, var(--teal) 55%, var(--border))); -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; opacity: 0.55; pointer-events: none; transition: opacity 200ms ease; }
.composer2:focus-within::before { opacity: 1; animation: aiSpin 4s linear infinite; }
@keyframes aiSpin { to { --aia: 360deg; } }
.composer2::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 0 0 color-mix(in srgb, var(--teal) 20%, transparent); pointer-events: none; transition: box-shadow 260ms ease; }
.composer2:focus-within::after { box-shadow: 0 0 0 5px color-mix(in srgb, var(--teal) 12%, transparent), 0 20px 50px -24px color-mix(in srgb, var(--violet) 60%, transparent); }
.composer2 textarea { font-size: 15.5px; }
.composer2-row .btn-icon.btn-glass { background: color-mix(in srgb, var(--text) 6%, transparent); border-color: transparent; }
.composer2 .send { background: linear-gradient(160deg, var(--accent-top, #7FE3D6), var(--teal) 60%, var(--teal2)); color: var(--on-accent, #05201C); border: 0; box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--teal) 80%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.45); }
.composer2 .send.has:hover { transform: translateY(-1px) scale(1.04); }
.composer2 .send.stop { background: linear-gradient(160deg, #FF8A8E, #E5484D); color: #fff; }
.ai-chips .chip { background: color-mix(in srgb, var(--violet) 8%, transparent); border-color: color-mix(in srgb, var(--violet) 28%, transparent); transition: transform 160ms var(--ease-out), background 160ms ease, border-color 160ms ease; }
.ai-chips .chip:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--violet) 16%, transparent); border-color: color-mix(in srgb, var(--violet) 50%, transparent); }
/* Layers: glass sheets */
.ai-layer { background: color-mix(in srgb, var(--bg) 30%, transparent); }
.ai-layerin { border-radius: 24px 24px 0 0; background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: inset 0 1px 0 var(--glass-edge), 0 -20px 50px -30px rgba(8, 13, 23, 0.5); }
.ai-sheeth h3 { font-size: 19px; }
.ai-search { height: 42px; border-radius: 14px; transition: box-shadow 200ms ease, border-color 200ms ease; }
.ai-search:focus-within { border-color: color-mix(in srgb, var(--teal) 55%, var(--border2)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--teal) 14%, transparent); }
/* Quiz: options arrive one after another, answers flash */
.ai-opts .ai-opt { animation: aiIn 260ms var(--ease-out) both; }
.ai-opts .ai-opt:nth-child(1) { animation-delay: 40ms; } .ai-opts .ai-opt:nth-child(2) { animation-delay: 90ms; } .ai-opts .ai-opt:nth-child(3) { animation-delay: 140ms; } .ai-opts .ai-opt:nth-child(4) { animation-delay: 190ms; }
.ai-opt:not([disabled]):hover { border-color: color-mix(in srgb, var(--violet) 45%, var(--border)); background: color-mix(in srgb, var(--violet) 8%, var(--surface2)); }
.ai-opt.right { animation: aiPop 360ms var(--ease-out); } .ai-opt.wrong { animation: aiShake 360ms var(--ease-out); }
@keyframes aiPop { 0% { transform: scale(0.98); } 50% { transform: scale(1.02); } 100% { transform: none; } }
@keyframes aiShake { 0%, 100% { transform: none; } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.ai-quiz .qs { font-size: 22px; letter-spacing: -0.02em; }
/* Limit card, error */
.ai-limit { border-radius: 18px; background: linear-gradient(135deg, var(--gold-soft), transparent 70%), var(--surface); }
.ai-err { border-radius: 12px; margin: 0 12px; padding: 6px 10px; background: color-mix(in srgb, var(--rose, #E5484D) 8%, transparent); }
@media (prefers-reduced-motion: reduce) { .ai-hero i, .ai-hero .bot-mini.lg, .composer2:focus-within::before, .ai-a.live .ai-stage, .ai-a.live::before, .ai-mark.thinking .bot-svg rect, .ai-at .rw, .ai-opts .ai-opt { animation: none !important; } }
:root[data-reduce-motion="1"] .ai-hero i, :root[data-reduce-motion="1"] .ai-hero .bot-mini.lg, :root[data-reduce-motion="1"] .ai-at .rw { animation: none !important; }
/* Popovers on a desktop: the chats, the book picker and the usage open
   under what you pressed, like a menu; the sheet stays for phones. */
.ai-layer.pop { align-items: flex-start; background: transparent; }
.ai-layer.pop .ai-layerin { position: absolute; width: 360px; border-radius: 18px; border: 1px solid var(--glass-border); background: color-mix(in srgb, var(--surface) 90%, transparent); box-shadow: inset 0 1px 0 var(--glass-edge), 0 30px 60px -24px rgba(8, 13, 23, 0.55); transform-origin: var(--ax, 24px) top; animation: aiPopIn 220ms var(--ease-out) both; overflow: auto; }
.ai-layer.pop .ai-layerin::before { content: ""; position: absolute; top: -6px; left: calc(var(--ax, 24px) - 6px); width: 12px; height: 12px; transform: rotate(45deg); background: inherit; border-left: 1px solid var(--glass-border); border-top: 1px solid var(--glass-border); border-radius: 3px 0 0 0; }
@keyframes aiPopIn { from { opacity: 0; transform: translateY(-6px) scale(0.96); } to { opacity: 1; transform: none; } }
.ai-layer.pop .ai-sheet { padding: 14px 14px 14px; gap: 10px; }
.ai-layer.pop .ai-sheeth h3 { font-size: 16px; }
.ai-layer.pop .ai-sheeth p { font-size: 12.5px; }
.ai-layer.pop .ai-sheeth .btn-icon { width: 30px; height: 30px; border-radius: 10px; }
.ai-layer.pop .ai-thread { padding: 8px 10px; border-radius: 14px; gap: 10px; grid-template-columns: 32px minmax(0, 1fr) auto; animation: none; }
.ai-layer.pop .ai-thread .ic { width: 32px; height: 32px; border-radius: 10px; }
.ai-layer.pop .ai-thread .tt b { font-size: 13.5px; }
.ai-layer.pop .ai-list { gap: 4px; }
.ai-layer.pop .ai-search { height: 38px; }
.ai-layer.pop .ai-urow { padding: 10px 12px; }
.ai-layer.pop .ai-sheet .btn.wide { width: 100%; }
/* New chat: a lit pill with its name */
.ai-newbtn { height: 32px; padding: 0 12px 0 10px; border-radius: 999px; font-size: 12.5px; gap: 6px; }
.ai-newbtn .i { font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .ai-layer.pop .ai-layerin { animation: none; } }

/* ── The bar: theme menu and the plan badge ──────────────────────────── */
.nav-theme { width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); }
.nav-theme .i { font-size: 17px; }
.menu.nav-pop { min-width: 200px; padding: 6px; border-radius: 16px; background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow-lg); transform-origin: top right; animation: popover 170ms var(--ease-out) both; }
.menu.nav-pop.open { display: block; }
.menu.nav-pop [data-theme-mode] { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font: inherit; font-family: var(--font-ui); font-size: 13.5px; font-weight: 600; text-align: start; cursor: pointer; }
.menu.nav-pop [data-theme-mode]:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
.menu.nav-pop [data-theme-mode] .ck { margin-inline-start: auto; opacity: 0; color: var(--teal2); }
.menu.nav-pop [data-theme-mode][aria-checked="true"] .ck { opacity: 1; }
:root[data-theme="dark"] .menu.nav-pop [data-theme-mode] .ck { color: var(--teal); }
/* The badge, as a subscription mark: an outline for Free, a lit gradient for Plus, gold for Pro */
.plan-badge { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text2); font-family: var(--font-ui); font-size: 12.5px; font-weight: 800; letter-spacing: 0.01em; cursor: pointer; transition: transform 160ms var(--ease-out), box-shadow 200ms ease; }
.plan-badge .i { font-size: 14px; }
.plan-badge:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.plan-badge.premium { color: #fff; border: 0; background: linear-gradient(120deg, #18B8A6, #5B4BE0 60%, #7C5CFF); box-shadow: 0 8px 20px -10px rgba(91, 75, 224, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.plan-badge.professional { color: #2A1A00; border: 0; background: linear-gradient(120deg, #FFE6A6, #F2B24A 55%, #E39A22); box-shadow: 0 8px 20px -10px rgba(226, 154, 34, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
.plan-pop { width: 300px; padding: 0; overflow: hidden; }
.pp-head { display: grid; gap: 4px; padding: 16px 16px 14px; color: var(--text); background: linear-gradient(135deg, color-mix(in srgb, var(--teal) 14%, transparent), transparent 70%); }
.pp-head.premium { background: linear-gradient(135deg, color-mix(in srgb, #5B4BE0 22%, transparent), color-mix(in srgb, #18B8A6 16%, transparent) 70%, transparent); }
.pp-head.professional { background: linear-gradient(135deg, color-mix(in srgb, #F2B24A 26%, transparent), transparent 75%); }
.pp-badge { display: inline-flex; align-items: center; gap: 5px; justify-self: start; font-family: var(--font-ui); font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal2); }
.pp-head.premium .pp-badge { color: #7C5CFF; } .pp-head.professional .pp-badge { color: var(--gold); }
:root[data-theme="dark"] .pp-badge { color: var(--teal); } :root[data-theme="dark"] .pp-head.premium .pp-badge { color: #B9A6FF; }
.pp-head b { font-family: var(--font-display); font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.pp-head span:not(.pp-badge):not(.i) { font-size: 12.5px; color: var(--text2); }
.pp-perks { padding: 12px 16px 6px; }
.pp-perks .kicker { font-size: 11px; }
.pp-perks ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.pp-perks li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--text2); }
.pp-perks li .i { color: var(--teal2); font-size: 15px; flex: none; margin-top: 1px; }
:root[data-theme="dark"] .pp-perks li .i { color: var(--teal); }
.pp-acts { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 10px 12px 12px; }
.pp-acts .btn-sm { height: 34px; }
@media (max-width: 720px) { .plan-badge span { display: none; } .plan-badge { padding: 0 9px; } .plan-badge.free { display: none; } .nav-theme { display: none; } }
.app-right .nav-theme, .app-right .nav-theme.btn-icon { border-radius: 999px; }

/* ── Book page, as a page of the site ───────────────────────────────── */
.w-book > * + * { margin-top: clamp(36px, 4vw, 56px); }
.bk-hero { position: relative; padding: 4px 0 8px; }
.bk-glow { position: absolute; inset: -40px -10vw 0; pointer-events: none; z-index: -1; overflow: hidden; }
.bk-glow i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.55; }
.bk-glow .g1 { width: 46vw; max-width: 640px; aspect-ratio: 1; left: -8vw; top: -10vw; background: var(--c1, var(--teal)); }
.bk-glow .g2 { width: 34vw; max-width: 480px; aspect-ratio: 1; right: 4vw; top: 0; background: var(--c3, var(--violet)); opacity: 0.3; }
:root[data-theme="dark"] .bk-glow i { opacity: 0.32; } :root[data-theme="dark"] .bk-glow .g2 { opacity: 0.18; }
.bk-hero .crumbs { margin-bottom: 26px; }
.bk-hero-g { display: grid; grid-template-columns: minmax(220px, 340px) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.bk-cover2 { position: relative; display: grid; justify-items: center; padding: 10px 0; }
.bk-cover2 .cover { width: min(100%, 300px); border-radius: 16px; transform: rotate(-3deg); box-shadow: 0 50px 80px -34px rgba(13, 19, 33, 0.6), 0 14px 30px -14px color-mix(in srgb, var(--c1) 70%, transparent); animation: hs-float 8s ease-in-out infinite; --lift: -8px; transition: transform 400ms var(--ease-out); }
.bk-cover2:hover .cover { transform: rotate(0deg); }
.bk-ring { position: absolute; right: 6%; bottom: 2%; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-lg); }
.bk-ring .bk-pring { position: absolute; inset: 4px; width: 56px; height: 56px; }
.bk-ring .bk-pring circle { stroke-width: 5; }
.bk-ring b { font-size: 12px; letter-spacing: 0; color: var(--text); }
.bk-ring.lg { position: static; width: 72px; height: 72px; box-shadow: none; background: transparent; }
.bk-ring.lg .bk-pring { width: 64px; height: 64px; }
.bk-info2 { display: grid; gap: 14px; justify-items: start; }
.bk-info2 .h1 { font-size: clamp(34px, 1.6rem + 2.6vw, 60px); letter-spacing: -0.035em; line-height: 1.02; max-width: 18ch; }
.bk-info2 .author { font-size: 17px; color: var(--text2); }
.bk-info2 .chip.free .i { color: var(--teal2); }
.bk-facts { display: flex; gap: 18px; flex-wrap: wrap; font-family: var(--font-ui); font-size: 13.5px; color: var(--text2); }
.bk-facts span { display: inline-flex; align-items: center; gap: 6px; }
.bk-facts .i { font-size: 16px; color: var(--teal2); } :root[data-theme="dark"] .bk-facts .i { color: var(--teal); }
.bk-facts b { color: var(--text); font-family: var(--font-display); font-size: 15px; }
.bk-info2 .ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.bot-mini.sm { width: 22px; height: 22px; } .bot-mini.sm .bot-svg { width: 28px; height: 28px; }
@media (max-width: 860px) { .bk-hero-g { grid-template-columns: 1fr; } .bk-cover2 .cover { width: min(70%, 240px); } }
/* Body: the ways, the outline and the takeaways left; progress and Bits AI right */
.bk-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(28px, 4vw, 56px); align-items: start; }
.bk-main { display: grid; gap: clamp(36px, 4vw, 56px); min-width: 0; }
.bk-side { position: sticky; top: calc(var(--app-nav-h, 64px) + 20px); display: grid; gap: 14px; }
@media (max-width: 1023px) { .bk-body { grid-template-columns: 1fr; } .bk-side { position: static; } }
.bk-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bw { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 16px 16px 14px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); color: var(--text); overflow: hidden; transition: transform 200ms var(--ease-out), border-color 200ms ease, box-shadow 200ms ease; }
.bw::after { content: ""; position: absolute; inset: 0; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--c1, var(--teal)) 12%, transparent), transparent 60%); opacity: var(--spot, 0); transition: opacity 260ms ease; pointer-events: none; }
.bw.main { grid-column: 1 / -1; padding: 20px 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--c1, var(--teal)) 14%, var(--surface)), var(--surface) 60%); }
.bw-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--c1, var(--teal)) 14%, transparent); color: var(--c1, var(--teal2)); }
:root[data-theme="dark"] .bw-ic { color: var(--c3, var(--teal)); }
.bw-ic .i { font-size: 21px; }
.bw.ok .bw-ic { background: color-mix(in srgb, var(--green2) 16%, transparent); color: var(--green2); }
.bw.lock .bw-ic { background: var(--gold-soft); color: var(--gold); }
.bw-t { display: grid; gap: 2px; min-width: 0; }
.bw-t b { font-family: var(--font-ui); font-size: 15.5px; }
.bw.main .bw-t b { font-size: 18px; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; }
.bw-t span { font-size: 13px; color: var(--text2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bw-n { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-ui); font-size: 12.5px; font-weight: 800; padding: 5px 10px; border-radius: 999px; background: var(--surface2); color: var(--text2); white-space: nowrap; }
.bw-n.on { background: color-mix(in srgb, var(--teal) 14%, transparent); color: var(--teal2); } :root[data-theme="dark"] .bw-n.on { color: var(--teal); }
.bw-n.ok { background: color-mix(in srgb, var(--green2) 16%, transparent); color: var(--green2); }
.bw-n.lock { background: var(--gold-soft); color: var(--gold); }
.bw-n.go { background: transparent; color: var(--muted); font-size: 18px; padding: 0; transition: transform 200ms var(--ease-out), color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .bw:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c1, var(--teal)) 40%, var(--border)); box-shadow: var(--shadow-lg); } .bw:hover .bw-n.go { transform: translateX(3px); color: var(--text); } }
@media (max-width: 560px) { .bk-ways { grid-template-columns: 1fr; } }
/* The outline */
.bk-secs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bk-secs li a { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px 14px 12px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); color: var(--text); transition: transform 180ms var(--ease-out), border-color 180ms ease, box-shadow 200ms ease; }
.bk-secs li .n { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: 0.08em; color: var(--text2); background: var(--surface2); }
.bk-secs li.ok .n { background: color-mix(in srgb, var(--green2) 16%, transparent); color: var(--green2); }
.bk-secs li.on .n { background: var(--c1, var(--teal)); color: #fff; }
.bk-secs li.on a { border-color: color-mix(in srgb, var(--c1, var(--teal)) 45%, var(--border)); background: linear-gradient(90deg, color-mix(in srgb, var(--c1, var(--teal)) 10%, var(--surface)), var(--surface) 50%); }
.bk-secs .tt { display: grid; gap: 2px; min-width: 0; }
.bk-secs .tt b { font-family: var(--font-ui); font-size: 15px; }
.bk-secs .tt span { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-secs .go { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-ui); font-size: 13px; font-weight: 700; color: var(--text2); white-space: nowrap; }
.bk-secs li.on .go { color: var(--c1, var(--teal2)); } :root[data-theme="dark"] .bk-secs li.on .go { color: var(--c3, var(--teal)); }
@media (hover: hover) and (pointer: fine) { .bk-secs li a:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--c1, var(--teal)) 40%, var(--border)); box-shadow: var(--shadow); } }
@media (max-width: 560px) { .bk-secs .go { display: none; } }
/* Takeaways as numbered cards */
.bk-take { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.bk-tk { position: relative; display: grid; gap: 10px; padding: 18px 18px 18px; border-radius: 18px; border: 1px solid var(--border); background: var(--surface); overflow: hidden; }
.bk-tk::after { content: ""; position: absolute; inset: 0; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--c1, var(--teal)) 10%, transparent), transparent 60%); opacity: var(--spot, 0); transition: opacity 260ms ease; pointer-events: none; }
.bk-tk .n { font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: 0.12em; color: var(--c1, var(--teal2)); }
:root[data-theme="dark"] .bk-tk .n { color: var(--c3, var(--teal)); }
.bk-tk p { font-size: 15px; line-height: 1.5; text-wrap: pretty; }
/* The side: progress and Bits AI */
.bk-prog { display: grid; gap: 14px; padding: 20px; border-radius: 22px; }
.bk-prog .kicker { font-size: 11.5px; }
.bk-prog-row { display: flex; align-items: center; gap: 14px; }
.bk-prog-row > div { display: grid; gap: 2px; min-width: 0; }
.bk-prog-row b { font-family: var(--font-ui); font-size: 14.5px; }
.bk-prog-row span:not(.bk-ring) { font-size: 12.5px; color: var(--text2); }
.bk-earn { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.bk-earn .lb { font-family: var(--font-ui); font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.bk-earn-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; font-size: 13.5px; }
.bk-earn-row .i { font-size: 16px; color: var(--muted); }
.bk-earn-row b { font-family: var(--font-ui); font-size: 12.5px; color: var(--teal2); } :root[data-theme="dark"] .bk-earn-row b { color: var(--teal); }
.bk-earn-row small { font-family: var(--font-ui); font-size: 12px; color: var(--violet); }
.bk-earn.done { display: flex; align-items: center; gap: 8px; color: var(--gold); font-family: var(--font-ui); font-weight: 700; }
.bk-ai { position: relative; display: grid; gap: 12px; justify-items: start; padding: 20px; border-radius: 22px; color: var(--text); overflow: hidden; background: linear-gradient(150deg, color-mix(in srgb, var(--violet) 14%, var(--surface)), var(--surface) 65%); transition: transform 200ms var(--ease-out), box-shadow 200ms ease, border-color 200ms ease; }
.bk-ai::after { content: ""; position: absolute; inset: 0; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--violet) 14%, transparent), transparent 60%); opacity: var(--spot, 0); transition: opacity 260ms ease; pointer-events: none; }
.bk-ai .bot-mini.lg { width: 44px; height: 44px; } .bk-ai .bot-mini.lg .bot-svg { width: 54px; height: 54px; }
.bk-ai > div { display: grid; gap: 4px; }
.bk-ai b { font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: -0.01em; }
.bk-ai > div > span { font-size: 13px; color: var(--text2); }
.bk-ai .btn { pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .bk-ai:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--violet) 40%, var(--border)); } }
.bk-rail > * { flex: 0 0 160px; }
@media (prefers-reduced-motion: reduce) { .bk-cover2 .cover { animation: none; } }
.bk-ring.lg { position: relative; flex: none; }
.bk-ring.lg .bk-pring { position: absolute; inset: 4px; width: 64px; height: 64px; }

/* Takeaways: a few words over the sentence */
.bk-tk b { font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: -0.015em; line-height: 1.2; }
.bk-tk p { font-size: 14px; color: var(--text2); }
/* ── Six ways to learn, as a page ───────────────────────────────────── */
.w-modes > * + * { margin-top: clamp(36px, 4vw, 56px); }
.md-hero-g { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: clamp(24px, 3vw, 44px); align-items: center; }
.md-cover .cover { width: 150px; border-radius: 14px; transform: rotate(-3deg); box-shadow: 0 30px 50px -24px rgba(13, 19, 33, 0.6); transition: transform 300ms var(--ease-out); }
.md-cover:hover .cover { transform: rotate(0deg) translateY(-3px); }
.md-t { display: grid; gap: 12px; justify-items: start; }
.md-t .h1 { font-size: clamp(34px, 1.6rem + 2.6vw, 60px); letter-spacing: -0.035em; line-height: 1.02; }
.md-meta { display: flex; align-items: center; gap: 12px; font-family: var(--font-ui); font-size: 13.5px; color: var(--text2); }
.md-dots { display: inline-flex; gap: 6px; }
.md-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--border2); }
.md-dots i.on { background: var(--c1, var(--teal)); box-shadow: 0 0 8px color-mix(in srgb, var(--c1, var(--teal)) 60%, transparent); }
@media (max-width: 640px) { .md-hero-g { grid-template-columns: 1fr; } .md-cover .cover { width: 120px; } }
.md-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.md-card { position: relative; display: grid; gap: 10px; align-content: start; min-height: 220px; padding: 20px 20px 18px; border-radius: 24px; background: var(--surface); border: 1px solid var(--border); color: var(--text); overflow: hidden; transition: transform 220ms var(--ease-out), border-color 220ms ease, box-shadow 220ms ease; --tone: var(--teal); }
.md-card.violet { --tone: var(--violet); } .md-card.amber { --tone: var(--amber-ink, #B45309); }
:root[data-theme="dark"] .md-card.amber { --tone: var(--amber, #F2B24A); } :root[data-theme="dark"] .md-card.teal { --tone: var(--teal); }
.md-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, color-mix(in srgb, var(--tone) 12%, transparent), transparent 55%); pointer-events: none; }
.md-card::after { content: ""; position: absolute; inset: 0; background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--tone) 14%, transparent), transparent 60%); opacity: var(--spot, 0); transition: opacity 260ms ease; pointer-events: none; }
.md-card > * { position: relative; }
.md-n { position: absolute; top: 14px; inset-inline-end: 16px; font-family: var(--font-display); font-weight: 800; font-size: 34px; letter-spacing: -0.04em; color: color-mix(in srgb, var(--text) 8%, transparent); line-height: 1; }
.md-ic { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: color-mix(in srgb, var(--tone) 16%, transparent); color: var(--tone); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.md-ic .i { font-size: 23px; }
.md-card > b { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; margin-top: 4px; }
.md-body { font-size: 14px; color: var(--text2); line-height: 1.45; }
.md-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 12px; font-family: var(--font-ui); font-size: 12.5px; }
.md-min { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.md-min .i { font-size: 14px; }
.md-go { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--tone); transition: transform 200ms var(--ease-out); }
.md-st { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, var(--green2) 16%, transparent); color: var(--green2); }
.md-card.next { border-color: color-mix(in srgb, var(--tone) 50%, var(--border)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tone) 10%, transparent); }
.md-card.done .md-ic { background: color-mix(in srgb, var(--green2) 14%, transparent); color: var(--green2); }
@media (hover: hover) and (pointer: fine) { .md-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--tone) 45%, var(--border)); box-shadow: var(--shadow-lg); } .md-card:hover .md-go { transform: translateX(3px); } }
@media (max-width: 960px) { .md-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .md-grid { grid-template-columns: 1fr; } .md-card { min-height: 0; } }
.bk-take { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.bk-tk { padding: 16px 18px; gap: 8px; }
.bk-tk b { font-size: 17px; }
.md-ways .bw.next { border-color: color-mix(in srgb, var(--c1, var(--teal)) 50%, var(--border)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c1, var(--teal)) 10%, transparent); }
/* The mode cards, compact, and on the book page too */
.md-card { min-height: 0; padding: 16px 16px 14px; gap: 6px; border-radius: 20px; }
.md-ic { width: 40px; height: 40px; border-radius: 13px; }
.md-ic .i { font-size: 20px; }
.md-n { top: 12px; inset-inline-end: 14px; font-size: 28px; }
.md-card > b { font-size: 18px; margin-top: 2px; }
.md-body { font-size: 13.5px; }
.md-foot { padding-top: 8px; }
.md-st.on { background: color-mix(in srgb, var(--tone) 14%, transparent); color: var(--tone); }
.md-st.lock { background: var(--gold-soft); color: var(--gold); }
.md-card.wide { grid-column: span 2; }
.md-card.done .md-n { color: color-mix(in srgb, var(--green2) 25%, transparent); }
@media (max-width: 960px) { .md-card.wide { grid-column: span 2; } }
@media (max-width: 560px) { .md-card.wide { grid-column: auto; } }
/* Inside the book page's two columns, two cards a row */
.bk-mdgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bk-mdgrid .md-card.wide { grid-column: span 2; }
@media (max-width: 560px) { .bk-mdgrid { grid-template-columns: 1fr; } .bk-mdgrid .md-card.wide { grid-column: auto; } }
/* Compact: glyph and name on one row, the line under, the foot last */
.md-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "ic name" "body body" "foot foot"; column-gap: 12px; row-gap: 4px; padding: 14px 16px 12px; align-items: center; }
.md-card .md-ic { grid-area: ic; width: 40px; height: 40px; }
.md-card > b { grid-area: name; font-size: 17px; margin: 0; padding-inline-end: 44px; }
.md-card .md-body { grid-area: body; margin-top: 4px; }
.md-card .md-foot { grid-area: foot; padding-top: 6px; }
.md-n { top: 10px; font-size: 24px; }
.md-body { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ══ The six modes, the app's way, on the web ═══════════════════════ */
.mp2 { max-width: 760px; margin: 0 auto; --tone: var(--teal); --tone-ink: var(--teal2); }
.mp2.violet { --tone: var(--violet); --tone-ink: var(--violet); } .mp2.amber { --tone: var(--amber, #F2B24A); --tone-ink: var(--amber-ink, #B45309); }
:root[data-theme="dark"] .mp2 { --tone-ink: var(--tone); }
.mp2.m-mindmap { max-width: none; }
.mh2 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mh2 .mode-h1 { color: var(--tone-ink); }
.mh2 .mh-x { margin-inline-start: auto; display: flex; gap: 6px; align-items: center; }
.mp-count { font-family: var(--font-ui); font-weight: 700; font-size: 13px; color: var(--muted); }
.mp-prog { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--text2); margin: 18px 0 14px; }
.mp-prog .bar { grid-column: 1 / -1; display: block; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.mp-prog .bar i { display: block; height: 100%; border-radius: 3px; background: var(--tone); transition: width 400ms var(--ease-out); }
.mp-card { padding: 22px; border-radius: 22px; display: grid; gap: 14px; }
.pr-sent { font-size: 18px; line-height: 1.5; }
.pr-sent .gap { background: color-mix(in srgb, var(--tone) 18%, transparent); color: var(--tone-ink); border-radius: 6px; padding: 0 6px; font-weight: 700; }
.pr-sent .gap.on { background: color-mix(in srgb, var(--tone) 28%, transparent); }
.cts { display: grid; gap: 8px; }
.ct { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); font: inherit; font-size: 15px; text-align: start; cursor: pointer; transition: transform 140ms var(--ease-out), border-color 160ms ease, background 160ms ease, opacity 200ms ease; animation: aiIn 240ms var(--ease-out) both; animation-delay: calc(50ms * var(--k, 0)); }
.cts .ct:nth-child(2) { --k: 1; } .cts .ct:nth-child(3) { --k: 2; } .cts .ct:nth-child(4) { --k: 3; } .cts .ct:nth-child(5) { --k: 4; }
.ct-k { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); font-family: var(--font-ui); font-weight: 800; font-size: 12.5px; color: var(--text2); }
.ct:not([disabled]):hover { border-color: color-mix(in srgb, var(--tone) 45%, var(--border)); transform: translateY(-1px); }
.ct:not([disabled]):active { transform: scale(0.985); }
.ct.sel { border-color: var(--tone); background: color-mix(in srgb, var(--tone) 12%, var(--surface2)); }
.ct.sel .ct-k { background: var(--tone); color: var(--on-accent, #05201C); border-color: transparent; }
.ct.right { border-color: var(--green2); background: color-mix(in srgb, var(--green2) 16%, transparent); animation: aiPop 360ms var(--ease-out); }
.ct.right .ct-k { background: var(--green2); color: #fff; border-color: transparent; }
.ct.wrong { border-color: var(--rose, #E5484D); background: color-mix(in srgb, var(--rose, #E5484D) 14%, transparent); animation: aiShake 360ms var(--ease-out); }
.ct.wrong .ct-k { background: var(--rose, #E5484D); color: #fff; border-color: transparent; }
.ct.dim { opacity: 0.55; }
.ct > .i:last-child { font-size: 18px; }
.ct.right > .i:last-child { color: var(--green2); } .ct.wrong > .i:last-child { color: var(--rose, #E5484D); }
.mp-fb { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface2); animation: aiIn 260ms var(--ease-out) both; }
.mp-fb.ok { border-color: color-mix(in srgb, var(--green2) 40%, var(--border)); background: color-mix(in srgb, var(--green2) 8%, var(--surface2)); }
.mp-fb.ok > .i { color: var(--green2); } .mp-fb.no > .i { color: var(--amber-ink, #B45309); }
.mp-fb b { font-family: var(--font-ui); font-size: 14.5px; display: block; margin-bottom: 4px; }
.mp-fb p { font-size: 14px; color: var(--text2); line-height: 1.5; white-space: pre-line; }
.mp-act { position: sticky; bottom: 16px; display: flex; justify-content: flex-end; padding: 10px 0 0; z-index: 2; }
.mp-act .btn { box-shadow: var(--shadow-lg); }
.mp-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 24px; border-radius: 24px; margin-top: 18px; }
.mp-intro-t { display: grid; gap: 8px; }
.mp-intro-t h2 { font-family: var(--font-display); font-size: clamp(22px, 1.2rem + 1.2vw, 30px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.mp-intro-t p { font-size: 15px; color: var(--text2); line-height: 1.5; }
.mp-intro .kicker { color: var(--tone-ink); }
@media (max-width: 560px) { .mp-intro { grid-template-columns: 1fr; } }
.hint { font-size: 13.5px; color: var(--muted); } .hint.center, .center { text-align: center; }
.pr-hint { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--gold-soft); border: 1px solid rgba(242, 178, 74, 0.35); font-size: 13.5px; }
.pr-hint .i { color: var(--gold); flex: none; margin-top: 2px; }
.pr-apply { width: 100%; border: 1px solid var(--border2); border-radius: 14px; padding: 12px 14px; font: inherit; font-size: 15px; background: var(--bg); color: var(--text); resize: vertical; min-height: 110px; }
.pr-apply:focus { outline: none; border-color: var(--tone); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tone) 14%, transparent); }
.pr-model { display: grid; gap: 6px; padding: 14px 16px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--amber, #F2B24A) 50%, var(--border)); background: var(--surface2); animation: aiIn 260ms var(--ease-out) both; }
.pr-model p { font-size: 14.5px; line-height: 1.5; }
.row.end { justify-content: flex-end; }
/* Finish */
.mp-fin { display: grid; justify-items: center; text-align: center; gap: 12px; padding: 28px 16px 8px; }
.mf-badge { width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--teal), var(--violet)); color: #fff; box-shadow: 0 24px 50px -20px color-mix(in srgb, var(--violet) 70%, transparent); animation: mfIn 650ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.mp-fin.ok .mf-badge { background: linear-gradient(135deg, #FFE6A6, #F2B24A 55%, #E39A22); color: #2A1A00; box-shadow: 0 24px 50px -20px rgba(226, 154, 34, 0.8); }
.mf-badge .i { font-size: 46px; }
@keyframes mfIn { from { opacity: 0; transform: scale(0.4) rotate(-20deg); } to { opacity: 1; transform: none; } }
.mp-fin .h1 { font-size: clamp(30px, 1.4rem + 2vw, 44px); letter-spacing: -0.03em; }
.mp-fin .lead { max-width: 52ch; }
.mf-stats { display: flex; gap: 0; margin-top: 8px; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; background: var(--surface); }
.mf-stats > div { display: grid; gap: 2px; padding: 14px 22px; min-width: 110px; }
.mf-stats > div + div { border-inline-start: 1px solid var(--border); }
.mf-stats b { font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: -0.02em; }
.mf-stats span { font-family: var(--font-ui); font-size: 12px; color: var(--muted); }
.mf-rw { display: flex; gap: 8px; animation: aiIn 300ms var(--ease-out) 700ms both; }
.mf-rw .reward.coin { color: var(--violet); }
.mp-fin .ctas { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
/* Visualize */
.vz-pager { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-top: 16px; }
.vz-nav { width: 40px; height: 40px; border-radius: 999px; }
.vz-track { position: relative; overflow: hidden; border-radius: 24px; }
.vz-board { display: none; }
.vz-board.on { display: block; animation: vzIn 360ms var(--ease-out) both; }
@keyframes vzIn { from { opacity: 0; transform: translateX(24px) scale(0.98); } to { opacity: 1; transform: none; } }
.vz-board { border-radius: 24px; border: 1px solid var(--border); background: var(--surface); overflow: hidden; }
.vz-board header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: linear-gradient(120deg, color-mix(in srgb, var(--tone) 22%, var(--surface)), var(--surface)); border-bottom: 1px solid var(--border); }
.vz-board header .n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--tone); color: var(--on-accent, #05201C); font-family: var(--font-display); font-weight: 800; font-size: 13px; }
.vz-board h2 { font-family: var(--font-display); font-size: 19px; font-weight: 800; letter-spacing: -0.015em; line-height: 1.2; }
.vz-body { padding: 26px 22px; min-height: 220px; display: grid; align-content: center; }
.vz-why { display: flex; gap: 12px; align-items: flex-start; margin: 0 16px 16px; padding: 14px 16px; border-radius: 16px; background: var(--surface2); border: 1px solid var(--border); animation: aiIn 400ms var(--ease-out) 600ms both; }
.vz-why > .i { color: var(--gold); font-size: 20px; flex: none; margin-top: 2px; }
.vz-why b { font-family: var(--font-ui); font-size: 13.5px; display: block; margin-bottom: 4px; }
.vz-why p { font-size: 14px; color: var(--text2); line-height: 1.5; }
.vz-stat { text-align: center; display: grid; gap: 10px; }
.vz-big { font-family: var(--font-display); font-weight: 800; font-size: clamp(48px, 2rem + 4vw, 84px); letter-spacing: -0.04em; line-height: 1; background: linear-gradient(120deg, var(--tone), var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; animation: vzStat 700ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes vzStat { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
.vz-stat p { font-size: 15px; color: var(--text2); animation: aiIn 300ms var(--ease-out) 250ms both; }
.vz-eq { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.vz-eq .op { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--muted); }
.vz-chip { font-size: 14.5px; padding: 8px 14px; animation: aiPop 360ms var(--ease-out) both; animation-delay: calc(60ms + 120ms * var(--k, 0)); }
.vz-chip.res { background: var(--gold-soft); border-color: rgba(242, 178, 74, 0.5); color: var(--gold); font-weight: 700; }
.vz-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.vz-flow li { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; align-items: center; padding: 8px 0; font-size: 15px; animation: vzSlide 320ms var(--ease-out) both; animation-delay: calc(140ms * var(--k, 0)); }
.vz-flow li .n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--tone) 16%, transparent); color: var(--tone-ink); font-family: var(--font-ui); font-weight: 800; font-size: 12.5px; }
.vz-flow li + li::before { content: ""; position: absolute; left: 14px; top: -10px; width: 2px; height: 18px; background: var(--border2); }
.vz-flow li.back { color: var(--text2); font-family: var(--font-ui); font-size: 13.5px; }
@keyframes vzSlide { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.vz-cmp { display: grid; gap: 10px; justify-items: center; }
.vz-cmp .side { width: 100%; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--border); font-size: 15px; line-height: 1.5; }
.vz-cmp .side.l { color: var(--text2); background: var(--surface2); }
.vz-cmp .side.r { color: var(--text); background: color-mix(in srgb, var(--tone) 12%, transparent); border-color: color-mix(in srgb, var(--tone) 40%, var(--border)); }
.vz-cmp .vs { font-family: var(--font-ui); font-weight: 800; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: var(--surface2); color: var(--muted); }
.vz-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.vz-pillars .pillar { padding: 14px 4px 4px; font-size: 14.5px; line-height: 1.45; position: relative; }
.vz-pillars .pillar i { display: block; width: 28px; height: 4px; border-radius: 2px; background: var(--tone); margin-bottom: 10px; }
.vz-dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.vz-dots i { width: 8px; height: 8px; border-radius: 4px; background: var(--border2); transition: width 220ms var(--ease-out), background 220ms ease; cursor: pointer; }
.vz-dots i.on { width: 22px; background: var(--tone); }
@media (max-width: 560px) { .vz-pager { grid-template-columns: 1fr; } .vz-nav { display: none; } }
/* Mind map */
.mm-view { position: relative; height: min(72vh, 720px); margin-top: 16px; border-radius: 24px; border: 1px solid var(--border); background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--violet) 8%, var(--surface)), var(--surface) 70%); overflow: hidden; cursor: grab; touch-action: none; user-select: none; }
.mm-view.drag { cursor: grabbing; }
.mm-edges, .mm-nodes { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: visible; }
.mm-edges { width: 1px; height: 1px; pointer-events: none; }
.mm-edges path { fill: none; stroke-linecap: round; }
.mm-edges .e1 { stroke: color-mix(in srgb, var(--violet) 65%, transparent); stroke-width: 2.2; }
.mm-edges .e2 { stroke: var(--border2); stroke-width: 1.6; }
.mm-node { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-family: var(--font-ui); font-size: 13.5px; font-weight: 600; text-align: start; max-width: 190px; cursor: pointer; box-shadow: var(--shadow); animation: mmIn 320ms cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: calc(40ms * var(--k, 0)); }
.mm-node span { display: block; line-height: 1.3; }
.mm-node.root { max-width: 220px; padding: 14px 18px; font-family: var(--font-display); font-weight: 800; font-size: 15px; color: #fff; background: linear-gradient(135deg, #5B4BE0, #2A1E5C); border-color: #7C5CFF; box-shadow: 0 0 30px color-mix(in srgb, #7C5CFF 40%, transparent); cursor: default; }
.mm-node.branch { border-color: color-mix(in srgb, var(--violet) 45%, var(--border)); }
.mm-node.branch .i { font-size: 14px; color: var(--violet); flex: none; }
.mm-node.branch.open { background: color-mix(in srgb, var(--violet) 14%, var(--surface)); box-shadow: 0 0 22px color-mix(in srgb, var(--violet) 25%, transparent), var(--shadow); }
.mm-node.leaf { max-width: 168px; font-weight: 500; font-size: 13px; animation-delay: calc(60ms * var(--k, 0)); }
.mm-node.leaf:hover { border-color: color-mix(in srgb, var(--violet) 50%, var(--border)); }
@keyframes mmIn { from { opacity: 0; transform: translate(-50%, -50%) scale(0.6); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.mm-hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--glass-border); font-family: var(--font-ui); font-size: 12.5px; color: var(--text2); animation: aiIn 300ms var(--ease-out) 500ms both; pointer-events: none; white-space: nowrap; }
.mm-pop { position: absolute; z-index: 5; animation: aiPopIn 200ms var(--ease-out) both; }
.mm-pop-in { display: grid; gap: 8px; padding: 14px 16px; border-radius: 18px; background: color-mix(in srgb, var(--surface) 94%, transparent); border: 1px solid var(--glass-border); box-shadow: var(--shadow-lg); cursor: default; }
.mm-pop-in h3 { font-family: var(--font-display); font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.mm-pop-in p { font-size: 13.5px; color: var(--text2); line-height: 1.5; }
.mm-pop-in .row { gap: 8px; margin-top: 4px; }
/* Scenario */
.sc-role { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: start; padding: 16px; border-radius: 18px; max-width: 320px; }
.sc-role .ic { width: 44px; height: 44px; border-radius: 14px; margin: 0; }
.sc-role b { font-family: var(--font-ui); display: block; margin-bottom: 4px; color: #EC4899; }
.sc-role p { font-size: 13.5px; color: var(--text2); line-height: 1.45; }
.sc-sit { border-color: color-mix(in srgb, #EC4899 40%, var(--border)); }
.sc-sit p { font-size: 17px; line-height: 1.5; }
.sc-out { margin-top: 12px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface2); animation: aiIn 300ms var(--ease-out) both; }
.sc-out.best { border-color: var(--green2); background: color-mix(in srgb, var(--green2) 10%, var(--surface2)); }
.sc-out.poor { border-color: var(--rose, #E5484D); background: color-mix(in srgb, var(--rose, #E5484D) 8%, var(--surface2)); }
.sc-out.ok { border-color: var(--amber, #F2B24A); background: color-mix(in srgb, var(--amber, #F2B24A) 10%, var(--surface2)); }
.sc-out-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-family: var(--font-ui); font-size: 14px; }
.sc-out-h .tag { margin-inline-start: auto; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; background: var(--surface); border: 1px solid var(--border); }
.sc-out.best .tag { color: var(--green2); } .sc-out.poor .tag { color: var(--rose, #E5484D); } .sc-out.ok .tag { color: var(--amber-ink, #B45309); }
.sc-out p { font-size: 15px; line-height: 1.5; }
.sc-why { display: flex; gap: 12px; align-items: flex-start; margin-top: 10px; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); animation: aiIn 300ms var(--ease-out) 200ms both; }
.sc-why > .i { color: var(--gold); font-size: 20px; flex: none; margin-top: 2px; }
.sc-why b { font-family: var(--font-ui); font-size: 13.5px; display: block; margin-bottom: 4px; }
.sc-why p { font-size: 14px; color: var(--text2); line-height: 1.5; }
/* Challenge */
.ch-ring { position: relative; width: 72px; height: 72px; display: grid; place-items: center; }
.ch-ring svg { position: absolute; inset: 0; width: 72px; height: 72px; transform: rotate(-90deg); }
.ch-ring circle { fill: none; stroke-width: 6; stroke-linecap: round; }
.ch-ring .bg { stroke: var(--border); } .ch-ring .fg { stroke: var(--gold); transition: stroke-dashoffset 600ms var(--ease-out); }
.ch-ring b { font-family: var(--font-display); font-weight: 800; font-size: 14px; }
.ch-pills { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.ch-days { display: grid; gap: 8px; }
.ch-day { border-radius: 18px; border: 1px solid var(--border); background: var(--surface); overflow: hidden; animation: aiIn 300ms var(--ease-out) both; animation-delay: calc(70ms * var(--k, 0)); transition: border-color 200ms ease, box-shadow 200ms ease; }
.ch-day.open { border-color: color-mix(in srgb, var(--gold) 45%, var(--border)); box-shadow: var(--shadow); }
.ch-head { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; cursor: pointer; }
.ch-check { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--border2); background: transparent; display: grid; place-items: center; color: var(--text2); font-family: var(--font-ui); font-weight: 800; font-size: 12px; cursor: pointer; transition: transform 160ms var(--ease-out), background 200ms ease, border-color 200ms ease; }
.ch-check:active { transform: scale(0.9); }
.ch-day.done .ch-check { background: var(--green2); border-color: var(--green2); color: #fff; }
.ch-t { display: grid; gap: 2px; min-width: 0; }
.ch-t b { font-family: var(--font-ui); font-size: 15px; }
.ch-day.done .ch-t b { text-decoration: line-through; color: var(--muted); }
.ch-t small { font-family: var(--font-ui); font-size: 12px; color: var(--muted); }
.ch-head > .i { color: var(--muted); }
.ch-body { display: grid; gap: 10px; padding: 0 16px 16px 60px; animation: aiIn 220ms var(--ease-out) both; }
.ch-body p { font-size: 15px; line-height: 1.5; }
.ch-complete { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: center; margin-top: 16px; padding: 16px 18px; border-radius: 18px; border: 1px solid rgba(242, 178, 74, 0.5); background: var(--gold-soft); animation: aiIn 300ms var(--ease-out) both; }
.ch-complete .mf-badge { width: 56px; height: 56px; background: linear-gradient(135deg, #FFE6A6, #F2B24A 55%, #E39A22); color: #2A1A00; box-shadow: none; }
.ch-complete .mf-badge .i { font-size: 26px; }
.ch-complete b { display: block; font-family: var(--font-display); font-size: 17px; font-weight: 800; }
.ch-complete span:not(.mf-badge):not(.i) { font-size: 13.5px; color: var(--text2); }
@media (max-width: 560px) { .ch-body { padding-inline-start: 16px; } }
/* Review */
.rv-plan { gap: 12px; }
.rv-row { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; }
.rv-row .ic { width: 40px; height: 40px; border-radius: 12px; margin: 0; }
.rv-row b { font-family: var(--font-ui); font-size: 14.5px; display: block; }
.rv-row span:not(.ic):not(.i) { font-size: 12.5px; color: var(--muted); }
.rv-idea { position: relative; margin-top: 18px; padding: 32px 28px 28px; border-radius: 24px; color: #fff; background: linear-gradient(135deg, #4C3FD6 0%, #7A5CFF 45%, #1FA8A0 100%); box-shadow: 0 24px 50px -24px rgba(92, 75, 224, 0.75); animation: aiIn 400ms var(--ease-out) both; }
.rv-idea .q { position: absolute; top: 14px; left: 18px; opacity: 0.5; font-size: 22px; }
.rv-idea p { font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 1.1rem + 1.2vw, 28px); letter-spacing: -0.02em; line-height: 1.25; text-wrap: balance; }
@media (prefers-reduced-motion: reduce) { .ct, .mp-fb, .vz-board.on, .vz-big, .vz-chip, .vz-flow li, .mm-node, .ch-day, .rv-idea, .mf-badge, .mf-rw { animation: none !important; } }
.vz-cmp .side b { display: block; font-family: var(--font-ui); font-size: 14px; margin-bottom: 6px; }
.vz-cmp .side p + p { margin-top: 4px; }
.vz-pillars .pillar b { display: block; font-family: var(--font-ui); font-size: 14.5px; margin-bottom: 4px; }
.vz-pillars .pillar p { font-size: 13.5px; color: var(--text2); }
.ch-pills .chip { color: var(--text); }
.mm-node { width: max-content; } .mm-node span { white-space: normal; max-width: 160px; } .mm-node.root span { max-width: 190px; }
/* Challenge rows: nothing may push past the card; the bar yields first */
.chal > *, .chal-rows > *, .chal-row > * { min-width: 0; }
.chal-row { grid-template-columns: 36px minmax(0, 1fr) auto; }
.cr-bar { min-width: 0; }
.cr-bar .bar { flex: 1 1 0; min-width: 0; width: auto; }
.cr-n { flex: none; }
.cr-rw { align-self: center; }
/* Flashcards: the card fills its stack; the back face stays inside it */
.flash-stack { display: block; }
.flash-stack .flash, .flash { display: block; width: 100%; max-width: 100%; height: 320px; padding: 0; border: 0; background: transparent; }
.flash .inner { display: block; width: 100%; height: 100%; }
.flash .face { inset: 0; width: 100%; height: 100%; overflow: hidden; box-sizing: border-box; padding: 28px 28px 40px; font-size: 18px; line-height: 1.45; }
.flash .face.back { font-size: 17px; }
.flash .face > span:not(.hint) { display: block; }
@media (max-width: 560px) { .flash .face { font-size: 16px; padding: 22px 20px 36px; } }
.chal-row { grid-template-columns: 36px minmax(0, 1fr) max-content; padding-inline-end: 6px; }
.chal-row > .cr-rw { min-width: max-content; }
.wh-chalcard .chal-row { padding-inline: 16px 14px; }
.flash .face.back .hint { color: color-mix(in srgb, var(--text) 50%, transparent); }
/* Today's challenges: a card of rows, the reward as a pill with room to breathe */
.app-main .chal { background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 6px 20px 8px; box-shadow: var(--shadow); }
.app-main .chal-head { padding: 12px 0 10px; }
.app-main .chal-row { padding: 14px 0; grid-template-columns: 36px minmax(0, 1fr) max-content; column-gap: 16px; }
.app-main .chal-row:last-child { border-bottom: 0; }
.chal-row > .cr-rw { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 999px; background: color-mix(in srgb, var(--violet) 12%, transparent); font-size: 12px; }
.chal-row > .cr-rw.claimed { background: var(--gold-soft); }
.cr-bar { padding-inline-end: 4px; }
.wh-chalcard { padding: 0; }
.wh-chalcard .chal { border: 0; box-shadow: none; border-radius: 0; padding: 2px 18px 6px; }
.wh-chalcard .chal-row { padding-inline: 0; }

/* ── The company on a learner's profile ─────────────────────────────── */
.corp-pcard { padding: 0; overflow: hidden; border-radius: 22px; }
.corp-phead { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: center; padding: 18px 20px 14px; }
.corp-pcard .cp-t { display: grid; gap: 3px; min-width: 0; }
.corp-pcard .corp-phead b { font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: -0.015em; }
.corp-pcard .corp-phead span { font-size: 13px; color: var(--text2); }
.corp-pcard .corp-powered { padding: 0 20px 14px; margin: 0; }
.corp-prows { display: grid; border-top: 1px solid var(--border); }
.corp-prow { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; padding: 14px 20px; border: 0; background: transparent; color: var(--text); font: inherit; text-align: start; cursor: pointer; transition: background 160ms ease; }
.corp-prow + .corp-prow { border-top: 1px solid var(--border); }
.corp-prow:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.corp-prow b { display: block; font-family: var(--font-ui); font-size: 14.5px; }
.corp-prow .cp-t span { display: block; font-size: 12.5px; color: var(--text2); }
.corp-prow > .i { color: var(--muted); }
.corp-prow.danger b { color: var(--rose, #E5484D); }
.corp-prow.danger .corp-ic { background: color-mix(in srgb, var(--rose, #E5484D) 12%, transparent); color: var(--rose, #E5484D); }
.pf-guest { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 0 2px; }
.pf-guest span { font-size: 13.5px; color: var(--text2); }

/* ── The mini player: it docks above the nav and stays across pages ── */
.mini-player { position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--z-menu) - 1); padding: 0 16px calc(12px + env(safe-area-inset-bottom)); display: flex; justify-content: center; pointer-events: none; }
.mini-player .mp-bar { pointer-events: auto; position: relative; width: min(640px, 100%); height: 66px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto auto; align-items: center; gap: 4px; padding: 0 10px 0 10px; border-radius: 22px; overflow: hidden; box-shadow: 0 20px 40px -18px rgba(8, 13, 23, 0.55); transform: translateY(18px); opacity: 0; transition: transform 320ms var(--ease-out), opacity 220ms ease; }
.mini-player.on .mp-bar { transform: none; opacity: 1; }
.mp-open { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: center; min-width: 0; color: var(--text); padding: 6px 0; border-radius: 14px; }
.mp-cover { display: block; width: 36px; }
.mp-cover .cover { border-radius: 8px; box-shadow: 0 6px 12px -6px rgba(13, 19, 33, 0.6); }
.mp-t { display: grid; gap: 1px; min-width: 0; }
.mp-t b { font-family: var(--font-ui); font-size: 14px; }
.mp-t span { font-size: 12px; color: var(--text2); }
.mp-b { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 0; background: transparent; color: var(--text); cursor: pointer; transition: background 140ms ease, transform 140ms var(--ease-out); }
.mp-b:hover:not([disabled]) { background: color-mix(in srgb, var(--text) 8%, transparent); }
.mp-b:active:not([disabled]) { transform: scale(0.92); }
.mp-b[disabled] { opacity: 0.4; cursor: default; }
.mp-b.x { color: var(--muted); }
.mp-b .i { font-size: 19px; }
.mp-play { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 0; cursor: pointer; background: color-mix(in srgb, var(--c3, var(--teal)) 22%, transparent); color: var(--c3, var(--teal)); transition: transform 140ms var(--ease-out); }
.mp-play:active { transform: scale(0.92); }
.mp-play .i { font-size: 21px; }
:root[data-theme="light"] .mp-play, :root:not([data-theme="dark"]) .mp-play { color: var(--c1, var(--teal2)); background: color-mix(in srgb, var(--c1, var(--teal)) 16%, transparent); }
.mp-line { position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2.5px; border-radius: 2px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; }
.mp-line i { display: block; height: 100%; border-radius: 2px; background: var(--c3, var(--teal)); transition: width 300ms linear; }
body.has-mini .app-main { padding-bottom: max(96px, calc(78px + env(safe-area-inset-bottom))); }
body.solo .mini-player, body.dlg .mini-player { display: none; }
@media (max-width: 1023px) { .mini-player { bottom: 64px; } }
@media (max-width: 560px) { .mini-player .mp-bar { grid-template-columns: minmax(0, 1fr) auto auto auto; } .mini-player .mp-b.x { display: none; } }
@media (prefers-reduced-motion: reduce) { .mini-player .mp-bar { transition: none; } }
.corp-pcard .corp-powered { justify-content: flex-start; text-align: start; }

/* ── The reader as a page of the site: contents, prose, the line ───── */
@media (min-width: 1100px) {
  .reader { max-width: min(1060px, 100%); display: grid; grid-template-columns: 232px minmax(0, 660px); column-gap: clamp(32px, 4vw, 64px); justify-content: center; align-items: start; }
  .reader > .rd-toc { display: block; }
  .reader > .rd-line, .reader > .top { grid-column: 1 / -1; }
  .rd-toc { position: sticky; top: calc(var(--app-nav-h, 64px) + 24px); grid-row: span 6; display: block; padding-top: 6px; }
  .reader > .rd-mid, .reader > .prose, .reader > .row, .reader > .nav, .reader > .rd-done { grid-column: 2; }
}
.rd-toc { display: none; }
.rd-toc .lb { display: block; font-family: var(--font-ui); font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 0 10px 10px; }
.rd-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: calc(100dvh - 180px); overflow: auto; scrollbar-width: thin; }
.rd-toc button { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; width: 100%; padding: 9px 10px; border: 0; border-radius: 12px; background: transparent; color: var(--text2); font: inherit; font-family: var(--font-ui); font-size: 13px; text-align: start; cursor: pointer; transition: background 140ms ease, color 140ms ease; }
.rd-toc .n { font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em; color: var(--muted); padding-top: 1px; }
.rd-toc .tt { line-height: 1.35; }
.rd-toc button:hover { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); }
.rd-toc li.on button { background: color-mix(in srgb, var(--teal) 12%, transparent); color: var(--text); font-weight: 700; }
.rd-toc li.on .n { color: var(--teal2); }
:root[data-theme="dark"] .rd-toc li.on .n { color: var(--teal); }
.rd-toc li.done .n { color: var(--green2); }
.rd-toc li.done .tt { color: var(--muted); }

/* ── AudioBits as a page: the stage, and the tracks beside it ──────── */
.player-page { position: relative; }
/* A wash, not a disc. A blurred circle still has a circle's edge, and it
 * read as a ring crossing the cover; an ellipse that fades to nothing has
 * no edge to find, and the mask keeps the clip from ruling a line. */
.pl-glow { position: absolute; inset: -60px -10vw auto; height: 480px; pointer-events: none; z-index: -1; overflow: hidden; -webkit-mask-image: linear-gradient(#000 46%, transparent); mask-image: linear-gradient(#000 46%, transparent); }
.pl-glow i { position: absolute; inset: 0; opacity: 0.4; background: radial-gradient(ellipse 46% 84% at 36% 0%, var(--c1, var(--teal)), color-mix(in srgb, var(--c1, var(--teal)) 26%, transparent) 55%, transparent 76%); }
:root[data-theme="dark"] .pl-glow i { opacity: 0.26; }
.pl-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(28px, 4vw, 56px); align-items: start; margin-top: 20px; }
.pl-stage { display: grid; justify-items: center; gap: 18px; text-align: center; }
.pl-cover { width: min(100%, 300px); }
.pl-cover .cover { border-radius: 18px; box-shadow: 0 50px 80px -34px rgba(13, 19, 33, 0.65); animation: hs-float 9s ease-in-out infinite; --lift: -6px; }
.pl-t { display: grid; gap: 6px; max-width: 46ch; }
.pl-t h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 1.2rem + 1.6vw, 36px); letter-spacing: -0.03em; line-height: 1.1; }
.pl-by { font-size: 14px; color: var(--text2); }
.pl-stage .wave { width: min(100%, 520px); height: 46px; }
.pl-stage .scrub { width: min(100%, 520px); }
.pl-ctrls { display: flex; align-items: center; gap: 18px; }
.pl-ctrls .btn-icon { width: 46px; height: 46px; border-radius: 50%; }
.pl-stage .play-big { width: 76px; height: 76px; }
.pl-stage .play-big .i { font-size: 32px; }
.pl-opts { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; }
.pl-side { position: sticky; top: calc(var(--app-nav-h, 64px) + 20px); }
.pl-side .tracks { max-height: min(60vh, 560px); overflow: auto; scrollbar-width: thin; padding-inline-end: 4px; }
@media (max-width: 1023px) { .pl-grid { grid-template-columns: 1fr; } .pl-side { position: static; } }
@media (prefers-reduced-motion: reduce) { .pl-cover .cover { animation: none; } }
.pl-cover { width: min(100%, 210px); }
.pl-stage { gap: 14px; }
.pl-glow i { opacity: 0.32; }
.pl-stage .wave i { background: var(--c1, var(--teal)); }
.pl-stage .play-big { width: 68px; height: 68px; }
.pl-t h1 { font-size: clamp(22px, 1.1rem + 1.2vw, 30px); }

/* ── Quiz and flashcards, as pages of the site ─────────────────────── */
.quiz { max-width: 760px; margin-inline: auto; }
.qz-dots { display: flex; gap: 6px; justify-content: center; margin: 20px 0 4px; }
.qz-dots i { width: 26px; height: 5px; border-radius: 3px; background: var(--border2); transition: background 240ms ease, transform 240ms var(--ease-out); }
.qz-dots i.on { background: var(--teal); transform: scaleY(1.6); }
.qz-dots i.ok { background: var(--green2); }
.qz-dots i.no { background: var(--rose, #E5484D); }
.quiz .qtext { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.025em; text-wrap: balance; }
.quiz .q { display: grid; gap: 10px; }
@media (min-width: 860px) { .quiz .q { grid-template-columns: repeat(2, minmax(0, 1fr)); } .quiz .q .opt { min-height: 74px; } }
.quiz .opt { border-radius: 16px; }
.cards { max-width: 720px; }
.cards .top .bar { max-width: 320px; }

/* ── A course as a page: the hero, then what you learn beside the plan ─ */
.w-course .bk-head { padding-top: 0; }
.w-course .bk-hero .crumbs { margin-bottom: 22px; }
.cs-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); gap: clamp(28px, 4vw, 56px); align-items: start; margin-top: clamp(32px, 4vw, 48px); }
.cs-body > section { min-width: 0; }
.cs-lessons { position: sticky; top: calc(var(--app-nav-h, 64px) + 20px); }
.cs-lessons .rows { max-height: min(62vh, 620px); overflow: auto; scrollbar-width: thin; padding-inline-end: 4px; }
.cs-lessons .lesson { border-radius: 16px; }
@media (max-width: 1023px) { .cs-body { grid-template-columns: 1fr; } .cs-lessons { position: static; } .cs-lessons .rows { max-height: none; } }
.bk-glow { -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
/* A lesson keeps the course beside it */
@media (min-width: 1100px) {
  .lesson-page { display: grid; grid-template-columns: 232px minmax(0, 680px); column-gap: clamp(32px, 4vw, 64px); justify-content: center; align-items: start; max-width: min(1060px, 100%); margin-inline: auto; }
  .lesson-page > .lesson-top { grid-column: 1 / -1; }
  .lesson-page > .ls-toc { display: block; position: sticky; top: calc(var(--app-nav-h, 64px) + 24px); }
  .lesson-page > .lesson-body, .lesson-page > .lesson-nav, .lesson-page > .nav, .lesson-page > section { grid-column: 2; }
}
.rd-toc a { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; padding: 9px 10px; border-radius: 12px; color: var(--text2); font-family: var(--font-ui); font-size: 13px; transition: background 140ms ease, color 140ms ease; }
.rd-toc a:hover { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); }
.rd-toc li.on a { background: color-mix(in srgb, var(--teal) 12%, transparent); color: var(--text); font-weight: 700; }
}

/* Plans: the ledger is a column of rows; give the page a calmer measure */
.plans-page .price-top { align-items: center; }
@media (min-width: 1100px) { .plans-page .ledger { max-width: 560px; margin-inline-start: auto; } }

/* ── Leaving a company, and coming back ─────────────────────────────────
 * Leaving is a request an administrator decides, so the profile row has
 * three faces and two of them are not buttons: waiting, and turned down
 * with the note they were given. */
.corp-prow.waiting { cursor: default; }
.corp-prow.waiting:hover { background: none; }
.corp-prow.waiting .btn { justify-self: end; }
.corp-prow .cp-t span { text-wrap: pretty; }

/* A request row in the console carries the reason it was written with -
 * the administrator is being asked to read, not just to tap. */
.req-row .req-tag { display: inline-block; margin-top: 5px; font-family: var(--font-ui); font-size: 10.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--teal2, var(--teal)); background: var(--teal-soft); border-radius: 999px; padding: 3px 8px; }
:root[data-theme="dark"] .req-row .req-tag { color: var(--teal); }
.req-row .req-tag.warn { color: #B4690E; background: rgba(242, 178, 74, 0.16); }
:root[data-theme="dark"] .req-row .req-tag.warn { color: #F2B24A; }
.req-row .req-why { display: grid; grid-template-columns: 15px minmax(0, 1fr); gap: 7px; align-items: start; margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--text2); text-wrap: pretty; }
.req-row .req-why .i { font-size: 14px; color: var(--muted); margin-top: 2px; }
.req-row.leaving { border-color: color-mix(in srgb, #F2B24A 38%, var(--border)); }

/* The offer to rejoin, on Home. It is an aside, not an announcement: one
 * line, the two answers, and the box that ends the asking for good. */
.corp-rejoin { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 18px; margin-bottom: 22px; }
.corp-rejoin .cr-t { min-width: 0; }
.corp-rejoin .cr-t b { display: block; font-family: var(--font-ui); font-size: 15px; letter-spacing: -0.01em; }
.corp-rejoin .cr-t span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--text2); text-wrap: pretty; }
.corp-rejoin .cr-act { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.corp-rejoin .cr-hide { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.corp-rejoin .cr-hide input { width: 15px; height: 15px; accent-color: var(--teal); }
@media (max-width: 760px) {
  .corp-rejoin { grid-template-columns: 46px minmax(0, 1fr); row-gap: 12px; }
  .corp-rejoin .cr-act { grid-column: 1 / -1; justify-content: flex-start; }
  .corp-prow.waiting { grid-template-columns: 40px minmax(0, 1fr); row-gap: 10px; }
  .corp-prow.waiting .btn { grid-column: 2; justify-self: start; }
}

/* ── Invitations say how their email went (corp.js invRow) ───────────
   .listrow span is display:block at 13px for the two lines of text; the
   delivery tag is a chip under them and keeps its own size. */
.inv-row .corp-tag { display: inline-flex; width: fit-content; margin-top: 6px; font-size: 11.5px; line-height: 1; }
.inv-row > .row { white-space: nowrap; }

/* ── Pure black (Preferences › Appearance) ──────────────────────────
   The phone's OLED palette (app_colors.dart Tokens.oled): the page is #000,
   cards and borders keep their steps just above it. Only while the page is
   dark - app.js resolves "System" to a colour, so [data-theme] is always
   set here; the media twin covers the frame before app.js runs. */
:root[data-oled][data-theme="dark"] {
  --bg: #000000; --bg2: #05080E; --surface: #0B111B; --surface2: #111927;
  --border: #1A2332; --border2: #263145;
  --glass: rgba(0, 0, 0, 0.66); --glass-2: rgba(11, 17, 27, 0.58); --glass-3: rgba(11, 17, 27, 0.4);
}
@media (prefers-color-scheme: dark) {
  :root[data-oled]:not([data-theme="light"]) {
    --bg: #000000; --bg2: #05080E; --surface: #0B111B; --surface2: #111927;
    --border: #1A2332; --border2: #263145;
    --glass: rgba(0, 0, 0, 0.66); --glass-2: rgba(11, 17, 27, 0.58); --glass-3: rgba(11, 17, 27, 0.4);
  }
}
/* The Dark preview shows what the switch does, even from Light. */
:root[data-oled] .pf-theme.dark .pf-win { --w-bg: #000000; --w-card: #0B111B; --w-mute: #1E2A3C; }
:root[data-oled] .pf-theme.system .pf-win { background: linear-gradient(105deg, #F5F7FB 50%, #000000 50%); }
:root[data-oled] .pf-theme.system .pf-win .w-nav { background: linear-gradient(105deg, #FFFFFF 50%, #0B111B 50%); }
/* The chosen theme's glyph was dark teal on a dark card. */
:root[data-theme="dark"] .pf-theme[aria-pressed="true"] .pf-tl .i { color: var(--teal); }

/* ── Badges say what they take (the phone's hint, on the tile) ──────
   Two rows of four when there is room, four rows of two when there is not,
   never a lone badge on a row. A locked badge dims its medal and wears a
   small lock; its words stay at full strength so the hint can be read. */
.pf-two > section { container-type: inline-size; min-width: 0; }
.pf-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container (min-width: 430px) { .pf-badges { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pf-badges .badge { align-content: start; gap: 5px; padding: 16px 10px 14px; min-width: 0; }
.pf-badges .badge .ic { position: relative; margin: 0 0 5px; }
.pf-badges .badge b { font-size: 12.5px; font-weight: 700; line-height: 1.25; color: var(--text); text-wrap: balance; overflow-wrap: anywhere; }
.pf-badges .badge .bh { font-family: var(--font-body); font-size: 11.5px; font-weight: 500; line-height: 1.35; color: var(--text2); text-wrap: pretty; overflow-wrap: anywhere; }
.pf-badges .badge.off { opacity: 1; filter: none; background: var(--surface); }
.pf-badges .badge.off .ic { background: var(--surface2); color: var(--muted); }
.pf-badges .badge.off .ic > .i { opacity: 0.5; }
.pf-badges .badge.off b { color: var(--text2); }
.pf-badges .badge.off .bh { color: var(--muted); }
.pf-badges .badge .lk { position: absolute; inset-inline-end: -6px; bottom: -6px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--muted); box-shadow: 0 0 0 1px var(--border2); }
.pf-badges .badge .lk .i { font-size: 11px; }

/* The assign picker's topic row (corp.js assignSheet) */
.asg-cats { margin-top: 10px; }
/* Long titles in the picker: "Beginner's Guide to …" needs the whole row to be told apart. */
.cs-pick .pk-t .clamp1 { max-width: 100%; }

/* ══ Company courses (corpcat.js): the corporate catalogue ══════════════ */
.ic.blue { background: color-mix(in srgb, #3B82F6 14%, transparent); color: #2563EB; }
.ic.pink { background: color-mix(in srgb, #E879F9 16%, transparent); color: #C026D3; }
:root[data-theme="dark"] .ic.blue { color: #7AA8FF; } :root[data-theme="dark"] .ic.pink { color: #F0A6FB; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ic.blue { color: #7AA8FF; } :root:not([data-theme="light"]) .ic.pink { color: #F0A6FB; } }
.w-cc { max-width: 1040px; }
.cc-search { margin: 6px 0 34px; width: min(100%, 720px); }
.cc-sec { margin: 0 0 40px; }
.cc-sub { margin: -8px 0 16px; font-size: 14px; }
.cc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cc-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.cc-list .listrow { width: 100%; text-align: start; color: inherit; text-decoration: none; font: inherit; cursor: pointer; transition: border-color 160ms ease, transform 160ms var(--ease-out); }
.cc-list .listrow:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) { .cc-list .listrow:hover { border-color: color-mix(in srgb, var(--teal) 45%, var(--border)); } }
.cc-list .listrow:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.cc-r-t { min-width: 0; display: grid; gap: 2px; }
.cc-r-t b { font-family: var(--font-ui); font-size: 15px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: pretty; }
.cc-r-t .clamp1, .cc-r-t > span { max-width: 100%; font-size: 13px; color: var(--muted); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-soon { color: var(--muted); display: inline-grid; }
.cc-end { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.cc-pri { font-family: var(--font-ui); font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: var(--gold); background: var(--gold-soft); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.cc-pri.big { display: inline-block; margin-top: 12px; font-size: 12.5px; }
.cc-dept.mine { border-color: var(--teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 14%, transparent); }
.cc-dept.mine .ic { background: var(--teal-soft); color: var(--teal2); }
.cc-entry { display: grid; grid-template-columns: 48px 1fr auto; gap: 14px; align-items: center; padding: 16px 18px; margin: 0 0 22px; color: inherit; text-decoration: none; border-color: color-mix(in srgb, var(--teal) 40%, var(--border)); transition: transform 160ms var(--ease-out), border-color 160ms ease; }
.cc-entry.console { margin: 18px 0 26px; }
.cc-entry .ic { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: var(--teal-soft); color: var(--teal2); }
.cc-entry .cc-e-t { min-width: 0; display: grid; gap: 3px; }
.cc-entry b { font-family: var(--font-ui); font-size: 16px; }
.cc-entry .cc-e-t span { font-size: 13.5px; color: var(--muted); }
.cc-entry > .i { color: var(--muted); }
.cc-entry:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) { .cc-entry:hover { border-color: var(--teal); } }
.cc-more { margin-top: 14px; text-align: center; font-size: 13.5px; }
.cc-where { margin: -4px 0 14px; }
.cc-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--text); background: var(--surface); }
.cc-tag .i { font-size: 14px; }
.cc-tag.teal { color: var(--teal2); border-color: color-mix(in srgb, var(--teal) 35%, transparent); background: var(--teal-soft); }
.cc-tag.amber { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 35%, transparent); background: var(--gold-soft); }
.cc-tag.violet { color: var(--violet); border-color: color-mix(in srgb, var(--violet) 35%, transparent); background: var(--violet-soft); }
.cc-tag.blue { color: #2563EB; border-color: rgba(59, 130, 246, .35); background: rgba(59, 130, 246, .10); }
.cc-tag.pink { color: #C026D3; border-color: rgba(232, 121, 249, .35); background: rgba(232, 121, 249, .12); }
.cc-soonbox { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin: 16px 0 6px; }
.cc-soonbox .i { color: var(--teal2); font-size: 18px; flex: none; margin-top: 2px; }
.cc-soonbox p { margin: 0; font-size: 14.5px; line-height: 1.5; }
.cc-h { margin: 20px 0 10px; }
.cc-pick { max-height: 60dvh; overflow: auto; padding: 2px; }
.cc-sec .sh button.tlink { background: none; border: 0; padding: 0; cursor: pointer; color: var(--teal2); }
/* .listrow span (muted, block) would win over these otherwise. */
.cc-list .cc-r-t { color: var(--text); }
.cc-list .cc-r-t b { color: var(--text); }
.cc-list .listrow .cc-end { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); white-space: nowrap; }
.cc-list .listrow .cc-pri { display: inline-block; font-size: 11.5px; color: var(--gold); }
.cc-list .listrow .cc-soon { display: inline-grid; color: var(--muted); }
.cc-entry .cc-e-t b { color: var(--text); }
.cc-dhead { margin-bottom: 38px; }
:root[data-theme="dark"] .cc-sec .sh button.tlink { color: var(--brand-ink, var(--teal)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cc-sec .sh button.tlink { color: var(--brand-ink, var(--teal)); } }

/* Library → Courses for a company learner: the catalogue in the tab, shown
   the way the Library shows books - a head over a rule, then a rail that
   scrolls left to right. Priority, Recommended, then every department
   folded shut until it is opened, one rail per team inside. */
/* Links and the onboarding tag take the company's colour; on the dark
   page it is lifted toward white so a deep brand blue still reads. */
.cc-tab { --cc-ink: var(--teal2); }
:root[data-theme="dark"] .cc-tab { --cc-ink: color-mix(in srgb, var(--teal) 62%, #fff); }
.cc-tab .cc-search { margin: 4px 0 34px; }
.cc-tab .cnt-line { margin-bottom: 16px; }
.cc-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 4vw, 56px); min-width: 0; }
.cc-part { min-width: 0; }
.cc-part > .sh { margin-bottom: 10px; }
.cc-part .sh .tlink { color: var(--cc-ink); }
.cc-part .sh button.tlink { background: none; border: 0; padding: 0; cursor: pointer; }
.cc-hint { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: var(--text2); text-wrap: pretty; }
.cc-hint .cc-n { color: var(--muted); font-family: var(--font-ui); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cc-regular { margin-top: 8px; }

/* The rail and its tiles. */
.cc-rail { gap: 18px; padding-bottom: 12px; }
.cc-rail > * { flex: 0 0 272px; }
@media (max-width: 560px) { .cc-rail > * { flex-basis: 232px; } .cc-rail { gap: 14px; } }
.ctile { display: grid; gap: 10px; align-content: start; min-width: 0; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.ctile:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; border-radius: 14px; }
.ctile:active .ccover { transform: scale(0.985); }
.ccover { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; isolation: isolate; color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--c1) 60%, transparent); transition: transform 200ms var(--ease-out), box-shadow 200ms ease; container-type: inline-size; }
.ccover::before { content: ""; position: absolute; width: 62%; aspect-ratio: 1; right: -14%; top: -30%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c3) 38%, transparent), transparent 70%); }
.ccover::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.12) 46%, transparent 66%), linear-gradient(to top, rgba(0, 0, 0, 0.28), transparent 46%); }
.ccover .cc-glyph { position: absolute; right: 5%; bottom: -9%; width: 38%; height: auto; aspect-ratio: 1; color: color-mix(in srgb, var(--c3) 30%, transparent); transform: rotate(-12deg); }
/* The live 3D cover (cc3d.js) draws here, over the gradient and under the words. */
.ccover .cc3d { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.ccover.is3d .cc-glyph { display: none; }
.ccover .cc-top { position: absolute; inset: 7% 6% auto; display: flex; justify-content: flex-start; gap: 6px; z-index: 1; min-width: 0; }
.ccover .cc-pill { font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.94); white-space: nowrap; }
.ccover .cc-pill.soon { letter-spacing: .02em; text-transform: none; font-size: 10.5px; background: rgba(0, 0, 0, 0.26); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ccover .cc-ct { position: absolute; left: 6%; bottom: 8%; max-width: 56%; display: grid; gap: 4px; z-index: 1; }
.ccover .cc-kick { font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(255, 255, 255, 0.86); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccover .cc-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(14px, 6.4cqw, 18px); line-height: 1.15; letter-spacing: -0.01em; color: #fff; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); text-wrap: pretty; }
.ct-meta { display: grid; gap: 3px; padding: 0 2px; justify-items: start; min-width: 0; }
.ct-meta .bt { font-family: var(--font-ui); font-weight: 700; font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ct-meta .ba { font-size: 12.5px; color: var(--text2); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-meta .cr-tag { margin-top: 5px; }
@media (hover: hover) and (pointer: fine) { .ctile:hover .ccover { transform: translateY(-3px); box-shadow: 0 16px 28px -10px color-mix(in srgb, var(--c1) 65%, transparent); } .ctile:hover .bt { color: var(--teal2); } :root[data-theme="dark"] .ctile:hover .bt { color: var(--cc-ink); } }
.cr-tag.cc-k-onboarding { background: var(--teal-soft); color: var(--cc-ink, var(--teal2)); }
.cr-tag.cc-k-core { background: rgba(59, 130, 246, .12); color: #2563EB; }
.cr-tag.cc-k-compliance { background: var(--gold-soft); color: var(--gold); }
.cr-tag.cc-k-ai { background: rgba(232, 121, 249, .14); color: #C026D3; }
:root[data-theme="dark"] .cr-tag.cc-k-core { color: #7FB0FF; }
:root[data-theme="dark"] .cr-tag.cc-k-ai { color: #EFA6FA; }
/* Search results: the same tiles in a grid, as the Library's search does. */
.cc-grid-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 28px 18px; }

.cc-recnone { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 18px; }
.cc-recnone .ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--teal-soft); color: var(--teal2); }
@media (max-width: 520px) { .cc-recnone { grid-template-columns: 44px minmax(0, 1fr); } .cc-recnone .btn { grid-column: 1 / -1; justify-self: start; } }

/* Departments, and a rail per team inside an opened one. */
.cc-dep { border-bottom: 1px solid var(--border); }
.cc-dep > summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 16px 0; cursor: pointer; }
.cc-dep > summary::-webkit-details-marker { display: none; }
.cc-dep > summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 6px; }
.cc-dep > summary .cc-r-t b { font-family: var(--font-display); font-weight: 700; font-size: 17px; -webkit-line-clamp: 1; }
.cc-dep .cc-chev { transition: transform 180ms var(--ease-out); }
.cc-dep[open] .cc-chev { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { .cc-dep > summary:hover b { color: var(--teal2); } :root[data-theme="dark"] .cc-dep > summary:hover b { color: var(--cc-ink); } }
.cc-dep-in { display: grid; gap: 26px; padding: 4px 0 30px; min-width: 0; }
.cc-team { min-width: 0; }
.cc-teamhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cc-teamhead h3 { margin: 0; font-family: var(--font-ui); font-size: 12.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text2); }
.cc-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }

/* Level-3 cover in the course hero (general courses): same tile, bigger. */
.cc-hero { display: block; width: min(360px, 100%); }
.cc-hero .ccover { aspect-ratio: 16 / 10; border-radius: 18px; }
.cgroup .cc-rail { margin-top: 4px; }

/* General course catalogue browser (Library → Courses) */
.gen-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: -18px 0 28px; }
.gen-chips .chip { cursor: pointer; } .gen-chips .chip small { opacity: .6; margin-left: 4px; }
.gen-chips .chip.on { background: var(--teal); color: #fff; }
.gen-grid { display: grid; gap: 18px; }

/* Organised course catalogue: family sections of topic tiles */
.gen-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 6px 0 14px; }
.gen-head .cc-sub { margin: 4px 0 0; }
.gen-rail .cg-head { align-items: flex-start; } .gen-rail .cc-sub { margin: 2px 0 8px; }
.gen-family { margin-bottom: 34px; }
.tp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.tp-tile { position: relative; display: grid; align-content: end; gap: 2px; min-height: 118px; padding: 12px 14px; border: 0; border-radius: 16px; overflow: hidden; isolation: isolate; text-align: left; color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); cursor: pointer; transition: transform 200ms var(--ease-out), box-shadow 200ms ease; }
.tp-tile .tp-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; opacity: .95; }
.tp-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,.08) 60%); }
.tp-tile .tp-name { font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 1.2; letter-spacing: -0.01em; }
.tp-tile .tp-n { font-family: var(--font-ui); font-size: 11.5px; opacity: .8; }
@media (hover: hover) and (pointer: fine) { .tp-tile:hover { transform: translateY(-3px); box-shadow: 0 14px 26px -12px rgba(0,0,0,.6); } }
.tp-tile:active { transform: scale(0.985); }
.tp-tile .tp-obj { position: absolute; right: 4%; top: 6%; height: 78%; aspect-ratio: 1; background-size: 900% 100%; background-position: 0 0; background-repeat: no-repeat; z-index: 0; filter: drop-shadow(0 8px 14px rgba(0,0,0,.4)); pointer-events: none; }
.tp-tile .tp-name, .tp-tile .tp-n { position: relative; z-index: 1; max-width: 62%; }

/* ── Corporate course: roadmap, lecture player, practice, scenario, exam, certificate (corpcourse.js) ──
   Every class here is cx- prefixed on purpose: the site's global .hide / .done / .clamp1 / .card .ic
   rules must never touch this feature. Layout adapts by width (phone → two columns ≥ 960px) and the
   player's own overlays adapt to the size of the player itself via container queries. */
.cx-wrap { display: grid; gap: 14px; width: 100%; max-width: 880px; margin: 0 auto; padding-bottom: 32px; }
.cx-h { margin: 8px 0 0; }
.cx-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-small { font-size: 13px; margin: 0; line-height: 1.4; }
.cx-gap { margin-top: 10px !important; }
.cx-err { color: var(--err); margin: 0; }
.cx-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cx-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--teal-soft); color: var(--teal2); flex: none; margin: 0; }
.cx-ic .i { font-size: 18px; }
.cx-ic.cx-ic-big { width: 52px; height: 52px; border-radius: 16px; } .cx-ic.cx-ic-big .i { font-size: 26px; }
.cx-ic.ok { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); }
.cx-ic.no { background: color-mix(in srgb, var(--err) 14%, transparent); color: var(--err); }
.cx-st-t { display: grid; gap: 2px; min-width: 0; flex: 1; }
.cx-st-t b { line-height: 1.3; overflow-wrap: anywhere; }
.cx-st-t .muted { font-size: 13.5px; line-height: 1.35; }

/* roadmap ------------------------------------------------------------------ */
.cx-road-page { display: grid; gap: 16px; width: 100%; padding-bottom: 32px; align-items: start; }
.cx-aside { display: grid; gap: 12px; min-width: 0; }
.cx-main { display: grid; gap: 6px; min-width: 0; }
@media (min-width: 960px) {
  .cx-road-page { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); gap: 24px; }
  .cx-aside { position: sticky; top: 84px; }
  .cx-main { padding-top: 4px; }
}
@media (min-width: 1280px) { .cx-road-page { grid-template-columns: 380px minmax(0, 1fr); gap: 32px; } }
.cx-hero { display: grid; gap: 12px; padding: 20px; }
.cx-title { margin: 0; font: 800 clamp(22px, 1.2rem + 1.2vw, 30px)/1.15 var(--font-display); letter-spacing: -0.02em; text-wrap: balance; }
.cx-summary { margin: 0; line-height: 1.5; font-size: 15px; }
.cx-prog { margin-top: 2px; }
.cx-go { justify-self: stretch; justify-content: center; }
.cx-mode { display: grid; gap: 10px; padding: 16px; }
.cx-outcard { display: grid; gap: 10px; padding: 16px; }
.cx-out { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cx-out li { display: flex; gap: 8px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; }
.cx-out li .i { color: var(--teal2); margin-top: 3px; flex: none; }
.cx-seg { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--surface2, color-mix(in srgb, var(--text) 6%, transparent)); border: 1px solid var(--border); gap: 2px; }
.cx-seg button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 12px; border: 0; border-radius: 9px; background: transparent; color: var(--text2); font: 700 13.5px var(--font-ui); cursor: pointer; white-space: nowrap; }
.cx-seg button.on { background: var(--surface); color: var(--teal2); box-shadow: var(--shadow); }
.cx-seg-wide { display: flex; width: 100%; } .cx-seg-wide button { padding: 9px 12px; font-size: 14px; }
.cx-road { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.cx-road li { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: stretch; column-gap: 4px; }
.cx-dot { width: 32px; height: 32px; margin: 12px 0 0 4px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--teal); color: var(--teal2); background: var(--surface); font: 800 13px var(--font-ui); grid-row: 1; grid-column: 1; }
.cx-dot .i { font-size: 15px; }
.cx-road li::after { content: ''; grid-column: 1; grid-row: 1; width: 2px; height: calc(100% - 24px); margin: 44px 0 0 19px; background: var(--border); z-index: -1; }
.cx-road li { position: relative; isolation: isolate; }
.cx-road li:last-child::after { display: none; }
.cx-road li.cx-done .cx-dot { background: var(--green); border-color: var(--green); color: #fff; }
.cx-road li.cx-locked .cx-dot { border-color: var(--border); color: var(--muted); }
.cx-road li.cx-locked .cx-station { opacity: 0.62; }
.cx-station { grid-column: 2; display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 56px; color: inherit; text-decoration: none; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); transition: transform 160ms var(--ease-out), border-color 160ms ease; }
.cx-station .cx-arrow { color: var(--muted); flex: none; }
.cx-road li.cx-open .cx-station { border-color: color-mix(in srgb, var(--teal) 45%, var(--border)); }
@media (hover: hover) and (pointer: fine) { .cx-station:hover { transform: translateX(2px); border-color: var(--teal); } }

/* prompts, questions, options, results (shared by checkpoints, practice, scenario, exam) ---------- */
.cx-body { line-height: 1.55; }
.cx-q { display: grid; gap: 10px; margin-top: 6px; }
.cx-qt { font: 700 13px var(--font-ui); color: var(--teal2); letter-spacing: 0.02em; }
.cx-qq { font-weight: 600; line-height: 1.45; margin: 0; }
.cx-opts { display: grid; gap: 8px; }
.cx-opt { display: flex; align-items: flex-start; gap: 10px; text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: 500 15px/1.35 var(--font-body); cursor: pointer; }
.cx-opt .cx-letter { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--border); font: 700 12px var(--font-ui); flex: none; }
.cx-opt.picked { border-color: var(--teal); background: var(--teal-soft); border-width: 1.6px; }
.cx-opt.right { border-color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); border-width: 1.6px; }
.cx-opt.wrong { border-color: var(--err); background: color-mix(in srgb, var(--err) 12%, transparent); border-width: 1.6px; }
.cx-opt.dim { opacity: 0.55; }
.cx-opt:disabled { cursor: default; }
.cx-why { display: flex; gap: 10px; align-items: flex-start; padding: 14px; border-radius: 14px; }
.cx-why[hidden] { display: none; }
.cx-why.ok { background: color-mix(in srgb, var(--green) 12%, transparent); } .cx-why.ok > .i { color: var(--green); }
.cx-why.no { background: color-mix(in srgb, var(--err) 12%, transparent); } .cx-why.no > .i { color: var(--err); }
.cx-why.warn { background: var(--amber-soft); } .cx-why.warn > .i { color: var(--amber); }
.cx-why p { margin: 0; line-height: 1.45; } .cx-why b { display: block; margin-bottom: 4px; }
.cx-cta { margin-top: 8px; width: 100%; justify-content: center; }
.cx-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.cx-result { display: grid; justify-items: center; gap: 10px; padding: 22px; text-align: center; position: relative; }
.cx-result .cx-ring { position: static; inset: auto; width: 120px; height: 120px; }
.cx-result .cx-big { position: absolute; top: 22px; left: 0; right: 0; height: 120px; display: grid; place-items: center; font: 800 26px var(--font-display); }
.cx-result.ok .pring .fg { stroke: var(--green); } .cx-result.no .pring .fg { stroke: var(--err); } .cx-result.warn .pring .fg { stroke: var(--amber); }
.cx-pills { display: flex; gap: 8px; }
.cx-pill { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text2); font: 700 14px var(--font-ui); cursor: pointer; }
.cx-pill.on { border-color: var(--teal); color: var(--teal2); background: var(--teal-soft); }
.cx-pill.ok.on { border-color: var(--green); color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); }
.cx-pill.warn.on { border-color: var(--amber); color: var(--amber-ink); background: var(--amber-soft); }
:root[data-theme="dark"] .cx-pill.warn.on { color: var(--amber); }
.cx-pill:disabled { cursor: default; }

/* lecture page ------------------------------------------------------------- */
.cx-lec { max-width: 1240px; }
@media (min-width: 900px) { .cx-lec { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 20px; align-items: start; } .cx-lec .cx-side { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow: auto; padding-right: 2px; } }
@media (min-width: 1280px) { .cx-lec { grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; } }
.cx-side { display: grid; gap: 10px; min-width: 0; }
.cx-side .h2 { margin: 0; font-size: clamp(22px, 1.1rem + 1vw, 30px); }
.cx-next { display: grid; gap: 8px; padding: 14px; } .cx-next p { margin: 0; }
.cx-chapters, .cx-cps, .cx-review { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cx-chapters button { width: 100%; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px; text-align: left; padding: 8px 8px; border: 0; background: none; color: var(--text); font: 500 14px/1.35 var(--font-body); border-radius: 10px; cursor: pointer; }
.cx-chapters button .muted { font-variant-numeric: tabular-nums; }
.cx-chapters button:hover { background: var(--surface2, var(--teal-soft)); }
.cx-chapters button.on { background: var(--teal-soft); color: var(--teal2); font-weight: 700; }
.cx-cph { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .cx-cph h2 { margin: 0; }
.cx-cp { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }

/* the player: our own controls, subtitles, caption panel, full screen ------ */
.cx-stage, .cx-player { position: relative; border-radius: 16px; overflow: hidden; background: #080D17; outline: none; user-select: none; -webkit-user-select: none; aspect-ratio: 16 / 9; width: 100%; max-width: 100%; container-type: inline-size; }
.cx-player:focus-visible { box-shadow: 0 0 0 3px var(--ring, var(--teal-soft)); }
.cx-player .cx-video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #080D17; object-fit: contain; }
.cx-player.cx-fs { border-radius: 0; aspect-ratio: auto; width: 100vw; height: 100vh; background: #000; }
.cx-cc { position: absolute; left: 12px; right: 12px; bottom: 64px; display: table; margin: 0 auto; max-width: calc(100% - 24px); padding: 5px 10px; border-radius: 8px; background: rgba(0,0,0,0.7); text-align: center; pointer-events: none; z-index: 2; transition: bottom 200ms ease; color: #fff; font: 600 16px/1.35 var(--font-body); }
.cx-cc[hidden] { display: none; }
.cx-cc.s0 { font-size: 13px; } .cx-cc.s2 { font-size: 20px; }
@container (max-width: 480px) { .cx-cc { font-size: 12px; bottom: 54px; padding: 3px 7px; } .cx-cc.s0 { font-size: 10.5px; } .cx-cc.s2 { font-size: 14px; } }
@container (min-width: 900px) { .cx-cc { font-size: 22px; } .cx-cc.s0 { font-size: 17px; } .cx-cc.s2 { font-size: 28px; } }
.cx-player.cx-fs .cx-cc { font-size: clamp(16px, 2.4vw, 26px); } .cx-player.cx-fs .cx-cc.s0 { font-size: clamp(13px, 1.8vw, 20px); } .cx-player.cx-fs .cx-cc.s2 { font-size: clamp(20px, 3.2vw, 34px); }
.cx-cc.nobg { background: transparent; text-shadow: 0 0 4px #000, 0 0 10px #000; }
.cx-cc.top { bottom: auto; top: 12px; }
.cx-player.cx-hide .cx-cc { bottom: 14px; } .cx-player.cx-hide .cx-cc.top { top: 12px; }
.cx-ctl { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto; opacity: 1; transition: opacity 220ms ease; z-index: 3; }
.cx-player.cx-hide .cx-ctl { opacity: 0; pointer-events: none; }
.cx-player.cx-hide { cursor: none; }
.cx-ctl-mid { display: flex; align-items: center; justify-content: center; gap: 18px; }
.cx-rb { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(0,0,0,0.45); color: #fff; display: grid; place-items: center; cursor: pointer; }
.cx-rb .i { font-size: 20px; } .cx-rb.big { width: 60px; height: 60px; background: var(--teal); color: #05201C; } .cx-rb.big .i { font-size: 28px; }
@container (max-width: 480px) { .cx-ctl-mid { gap: 12px; } .cx-rb { width: 34px; height: 34px; } .cx-rb.big { width: 48px; height: 48px; } .cx-rb.big .i { font-size: 22px; } }
.cx-ctl-bar { padding: 6px 10px 6px; background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.72)); display: grid; gap: 2px; }
.cx-scrub { position: relative; height: 26px; cursor: pointer; touch-action: none; }
.cx-scrub .cx-track, .cx-scrub .cx-fill { position: absolute; left: 0; top: 11px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.25); width: 100%; }
.cx-scrub .cx-fill { background: var(--teal); width: 0; }
.cx-scrub .cx-tick { position: absolute; top: 9px; width: 2px; height: 8px; background: rgba(255,255,255,0.55); }
.cx-scrub .cx-knob { position: absolute; top: 6px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.4); }
.cx-ctl-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cx-time { color: #fff; font: 700 12px var(--font-ui); font-variant-numeric: tabular-nums; }
.cx-ctl-right { display: flex; gap: 6px; }
.cx-pill2 { border: 0; border-radius: 8px; padding: 4px 8px; min-height: 26px; background: rgba(255,255,255,0.24); color: #fff; font: 700 12px var(--font-ui); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.cx-pill2 .i { font-size: 15px; } .cx-pill2.on { background: #fff; color: #080D17; }
.cx-player.cx-fs .cx-ctl-bar { padding: 8px 18px 12px; } .cx-player.cx-fs .cx-pill2 { padding: 6px 10px; font-size: 13px; } .cx-player.cx-fs .cx-time { font-size: 13px; }
.cx-spin { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; pointer-events: none; }
/* caption panel: lives inside the player so it works in full screen too; docks bottom-right on a wide
   stage, covers the whole stage on a small one */
.cx-ccpanel { position: absolute; right: 12px; bottom: 58px; width: min(340px, calc(100% - 24px)); max-height: calc(100% - 70px); overflow: auto; z-index: 4; display: grid; gap: 4px; padding: 10px 12px 12px; border-radius: 14px; background: rgba(8, 13, 23, 0.92); color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.45); font: 500 14px var(--font-body); }
.cx-ccpanel[hidden] { display: none; }
.cx-ccp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; font: 700 14px var(--font-ui); }
.cx-ccp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid rgba(255,255,255,0.12); cursor: pointer; }
.cx-ccp-row > span:first-child { min-width: 0; }
.cx-ccpanel .cx-seg { background: rgba(255,255,255,0.12); border-color: transparent; } .cx-ccpanel .cx-seg button { color: rgba(255,255,255,0.8); padding: 5px 10px; font-size: 12.5px; } .cx-ccpanel .cx-seg button.on { background: #fff; color: #080D17; box-shadow: none; }
.cx-switch { position: relative; width: 40px; height: 24px; flex: none; }
.cx-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.cx-switch i { position: absolute; inset: 0; border-radius: 999px; background: rgba(255,255,255,0.28); transition: background 160ms ease; pointer-events: none; }
.cx-switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 160ms var(--ease-out, ease); }
.cx-switch input:checked + i { background: var(--teal); } .cx-switch input:checked + i::after { transform: translateX(16px); }
.cx-switch input:focus-visible + i { box-shadow: 0 0 0 3px rgba(255,255,255,0.35); }
@container (max-width: 560px) { .cx-ccpanel { inset: 0; width: auto; max-height: none; border-radius: 0; padding: 8px 12px; } .cx-ccp-row { padding: 5px 0; font-size: 13px; } .cx-ccp-head { font-size: 13px; } }
@container (max-height: 260px) { .cx-ccpanel { inset: 0; width: auto; max-height: none; border-radius: 0; } }

/* practice ------------------------------------------------------------------ */
.cx-intro { padding: 14px; line-height: 1.45; margin: 0; }
.cx-vendor { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px; }
.cx-note { flex-basis: 100%; display: flex; gap: 6px; margin: 4px 0 0; color: var(--text2); font-size: 14px; }
.cx-note .i { color: var(--amber); }
.cx-docs { display: grid; gap: 10px; }
@media (min-width: 720px) { .cx-docs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cx-doc { padding: 0; overflow: hidden; }
.cx-doc-h { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.cx-doc-h > span { display: grid; min-width: 0; } .cx-doc-h .muted { font-size: 12px; }
.cx-doc.violet .cx-doc-h { background: var(--violet-soft); color: var(--violet); }
.cx-doc.green .cx-doc-h { background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--green); }
.cx-doc.amber .cx-doc-h { background: var(--amber-soft); color: var(--amber-ink); }
:root[data-theme="dark"] .cx-doc.amber .cx-doc-h { color: var(--amber); }
/* "cases" practice (Accounts Receivable on): four more document colours, a third decision tone. */
.cx-doc.teal .cx-doc-h { background: color-mix(in srgb, var(--teal) 12%, transparent); color: var(--teal); }
.cx-doc.blue .cx-doc-h { background: color-mix(in srgb, #3B82F6 12%, transparent); color: #3B82F6; }
.cx-doc.red .cx-doc-h { background: color-mix(in srgb, #EF4444 12%, transparent); color: #EF4444; }
.cx-doc.slate .cx-doc-h { background: color-mix(in srgb, #94A3B8 14%, transparent); color: var(--ink-2, #94A3B8); }
.cx-pill.bad.on { border-color: #EF4444; color: #EF4444; background: color-mix(in srgb, #EF4444 12%, transparent); }
.cx-decide.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 560px) { .cx-decide.three { grid-template-columns: 1fr; } }
.cx-doc-h b { color: var(--text); } .cx-doc-h .muted { color: var(--muted); }
.cx-doc dl { margin: 0; padding: 8px 12px 10px; display: grid; gap: 4px; }
.cx-doc dl div { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.cx-doc dt { color: var(--text2); } .cx-doc dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.cx-missing { padding: 10px 12px; font-style: italic; margin: 0; }
.cx-reasons .cx-opt { align-items: center; }
.cx-prompt { padding: 16px; font-weight: 600; line-height: 1.45; margin: 0; }
.cx-intro-card { display: grid; gap: 10px; padding: 20px; max-width: 640px; margin: 0 auto; width: 100%; } .cx-intro-card p { margin: 0; line-height: 1.5; }
.cx-intro-card .h2 { margin: 0; }

/* exam ---------------------------------------------------------------------- */
.cx-examhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.cc-tag.late { color: var(--err); border-color: var(--err); }
.cx-nav { justify-content: space-between; } .cx-nav .btn-primary { flex: 1; justify-content: center; }
.cx-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-grid button { width: 34px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: 700 12px var(--font-ui); cursor: pointer; }
.cx-grid button.has { background: var(--teal-soft); border-color: color-mix(in srgb, var(--teal) 40%, transparent); }
.cx-grid button.on { background: var(--teal); border-color: var(--teal); color: #05201C; }
.cx-review li { padding: 14px; display: grid; gap: 6px; }
.cx-review li b { display: flex; gap: 8px; align-items: flex-start; line-height: 1.4; }
.cx-review li.ok b .i { color: var(--green); } .cx-review li.no b .i { color: var(--err); }
.cx-rv { display: flex; gap: 6px; align-items: flex-start; font-size: 14px; color: var(--text2); } .cx-rv.ok .i { color: var(--green); } .cx-rv.no .i { color: var(--err); }
.cx-review li p { margin: 0; font-size: 14px; }

/* certificate --------------------------------------------------------------- */
.cx-certcard { display: grid; gap: 6px; padding: 20px; border: 1px solid color-mix(in srgb, var(--teal) 50%, transparent); background: linear-gradient(135deg, var(--teal-soft), var(--surface)); border-radius: var(--r-xl, 22px); }
.cx-certcard p, .cx-certcard h1, .cx-certcard h2 { margin: 0; }
.cx-num { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.cx-num > span { display: grid; } .cx-num b { font-variant-numeric: tabular-nums; }

/* module roadmap (v2 courses: modules of topics of micro-lessons) --------------------------------
   The phone's corp_course_modules.dart: module strip on the course card, "Before you start" folded,
   module cards (the current one open, with an accent border and a bar), topics as numbered stops on
   a small path ending in the module's quiz / practice / scenario, then "Finish the course". */
.cx-v2 .cx-go { white-space: normal; text-align: center; line-height: 1.3; }
.cx-v2 { --cx-ink: var(--teal2); }
:root[data-theme="dark"] .cx-v2 { --cx-ink: var(--teal); }
.cx-v2 .cx-seg button.on { color: var(--cx-ink); }
.cx-v2 .cx-h { margin: 4px 0 2px 4px; font: 700 17px/1.3 var(--font-ui); letter-spacing: 0; }
.cx-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin-top: 4px; }
.cx-strip-m { display: grid; gap: 6px; min-width: 0; }
.cx-sbar { display: block; height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; }
.cx-sbar i { display: block; height: 100%; border-radius: 3px; background: var(--teal); }
.cx-strip-m.cx-s-done .cx-sbar i { background: var(--green); }
.cx-strip-m small { font: 700 12px var(--font-ui); color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-strip-m.cx-s-locked small { color: var(--muted); font-weight: 600; }
.cx-plan-line { margin: 0; font: 700 13px var(--font-ui); color: var(--text2); font-variant-numeric: tabular-nums; }
.cx-mlist { display: grid; gap: 10px; margin-bottom: 14px; }
.cx-mcard { display: grid; gap: 12px; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); min-width: 0; }
.cx-v2 .cx-precard { padding: 12px; margin-bottom: 14px; }
.cx-mcard.cx-s-current { border-color: color-mix(in srgb, var(--teal) 55%, var(--border)); }
.cx-mcard.cx-s-locked { opacity: 0.6; }
.cx-mhead { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 12px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cx-mhead:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
.cx-mnum { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--teal); background: var(--surface); color: var(--cx-ink); font: 800 15px var(--font-ui); }
.cx-mnum .i { font-size: 18px; }
.cx-mcard.cx-s-done > .cx-mhead .cx-mnum { background: var(--green); border-color: var(--green); color: #fff; }
.cx-mcard.cx-s-locked > .cx-mhead .cx-mnum { border-color: var(--border); color: var(--muted); }
.cx-mtext { display: grid; gap: 2px; min-width: 0; flex: 1; }
.cx-mkick { font: 700 12px var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cx-ink); }
.cx-mcard.cx-s-done .cx-mkick { color: var(--green2); }
.cx-mcard.cx-s-locked .cx-mkick { color: var(--muted); }
.cx-mtitle { font: 700 17px/1.3 var(--font-display); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.cx-ptitle { font: 700 15px/1.3 var(--font-ui); }
.cx-mmeta { font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.cx-mcount { flex: none; font: 700 13px var(--font-ui); color: var(--text2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cx-donetag { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font: 700 12.5px var(--font-ui); white-space: nowrap; color: var(--green2); background: color-mix(in srgb, var(--green) 14%, transparent); border: 1px solid color-mix(in srgb, var(--green) 35%, transparent); }
.cx-donetag .i { font-size: 13px; }
.cx-okmark { color: var(--green2); flex: none; }
.cx-chev { flex: none; color: var(--muted); transition: transform 220ms var(--ease-out), color 160ms ease; }
.cx-mhead[aria-expanded="true"] .cx-chev { transform: rotate(180deg); }
.cx-mbar { display: block; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.cx-mbar i { display: block; height: 100%; border-radius: 3px; background: var(--teal); }
/* the path inside an open module */
.cx-path { list-style: none; margin: 2px 0 0; padding: 0; display: grid; }
.cx-path.cx-anim { animation: cxPathIn 280ms var(--ease-out) both; }
@keyframes cxPathIn { from { opacity: 0; transform: translateY(-6px); } }
.cx-prow { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 6px; padding-bottom: 8px; }
.cx-prow.cx-last { padding-bottom: 0; }
.cx-prow::before { content: ""; position: absolute; left: 17px; top: 42px; bottom: -12px; width: 2px; border-radius: 1px; background: var(--border); }
.cx-prow.cx-s-done::before { background: color-mix(in srgb, var(--green) 50%, transparent); }
.cx-prow.cx-last::before { display: none; }
.cx-rail { display: flex; justify-content: center; }
.cx-pdot { position: relative; z-index: 1; width: 30px; height: 30px; margin-top: 12px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--teal); background: var(--surface); color: var(--cx-ink); font: 800 10.5px var(--font-ui); font-variant-numeric: tabular-nums; }
.cx-pdot .i { font-size: 13px; }
.cx-prow.cx-s-done .cx-pdot { background: var(--green); border-color: var(--green); color: #fff; }
.cx-prow.cx-s-locked .cx-pdot { border-color: var(--border); color: var(--muted); }
.cx-pitem { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 56px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 45%, var(--surface)); color: inherit; text-decoration: none; transition: border-color 160ms ease, transform 160ms var(--ease-out); }
.cx-prow.cx-s-current .cx-pitem { background: color-mix(in srgb, var(--teal) 12%, var(--surface)); border-color: color-mix(in srgb, var(--teal) 60%, transparent); }
.cx-prow.cx-s-locked .cx-pitem { opacity: 0.6; }
.cx-pitem .cx-st-t b { font-size: 14.5px; }
.cx-pmeta { font-size: 13px; line-height: 1.35; color: var(--muted); }
.cx-prow.cx-s-current .cx-pmeta { color: var(--cx-ink); font-weight: 600; }
.cx-pitem .cx-arrow, .cx-ftile .cx-arrow { flex: none; color: var(--muted); }
.cx-prow.cx-s-current .cx-arrow { color: var(--cx-ink); }
.cx-pic { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--teal-soft); color: var(--cx-ink); }
.cx-pic .i { font-size: 16px; }
.cx-pic.cx-pic-big { width: 38px; height: 38px; border-radius: 12px; } .cx-pic.cx-pic-big .i { font-size: 18px; }
.cx-prow.cx-s-done .cx-pic, .cx-ftile.cx-s-done .cx-pic, .cx-precard.cx-s-done > .cx-mhead .cx-pic { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green2); }
.cx-prow.cx-s-locked .cx-pic, .cx-ftile.cx-s-locked .cx-pic { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--muted); }
/* finish the course */
.cx-ftile { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); color: inherit; text-decoration: none; transition: border-color 160ms ease, transform 160ms var(--ease-out); }
.cx-ftile .cx-st-t b { font-size: 15px; }
.cx-ftile.cx-s-current { border-color: color-mix(in srgb, var(--teal) 55%, var(--border)); }
.cx-ftile.cx-s-locked { opacity: 0.6; }
.cx-ftile.cx-s-done .cx-arrow { color: var(--green2); }
.cx-pitem:active, .cx-ftile:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) {
  .cx-pitem:hover, .cx-ftile:hover { border-color: var(--teal); }
  .cx-prow.cx-s-locked .cx-pitem:hover, .cx-ftile.cx-s-locked:hover { border-color: var(--border); }
  .cx-mhead:hover .cx-chev { color: var(--text); }
}
@media (prefers-reduced-motion: reduce) {
  .cx-path.cx-anim { animation: none; }
  .cx-chev, .cx-pitem, .cx-ftile { transition-duration: 1ms; }
  .cx-pitem:active, .cx-ftile:active { transform: none; }
}
:root[data-reduce-motion="1"] .cx-path.cx-anim { animation: none !important; }
:root[data-reduce-motion="1"] .cx-chev, :root[data-reduce-motion="1"] .cx-pitem, :root[data-reduce-motion="1"] .cx-ftile { transition-duration: 1ms !important; }
:root[data-reduce-motion="1"] .cx-pitem:active, :root[data-reduce-motion="1"] .cx-ftile:active { transform: none; }

.cc-pill.soon.live, .cc-soon.live { color: var(--teal2); border-color: color-mix(in srgb, var(--teal) 45%, transparent); background: var(--teal-soft); }
@media (max-width: 520px) {
  .cx-road li { grid-template-columns: 34px minmax(0, 1fr); column-gap: 2px; }
  .cx-dot { width: 28px; height: 28px; margin: 12px 0 0 2px; font-size: 12px; }
  .cx-road li::after { margin: 40px 0 0 15px; height: calc(100% - 20px); }
  .cx-station { padding: 10px 10px 10px 12px; gap: 10px; border-radius: 14px; }
  .cx-station .cx-ic { width: 34px; height: 34px; border-radius: 10px; }
  .cx-hero { padding: 16px; } .cx-mode, .cx-outcard { padding: 14px; }
}

/* ── v3: the enhanced course page (corpcourse.js mountModules) ────────────────────────────────────
   The phone's reference (course_v3_ref_test.dart): cover banner with the title over it, a stats row,
   "Your progress" with a ring and the module strip, "Continue watching" with the lesson's poster, the
   path; outcomes in the left column when wide and at the bottom when narrow. */
.cx-v3 .cx-aside { position: static; }
.cx-banner { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: 224px; border-radius: var(--r-xl, 22px); box-shadow: var(--shadow); background: radial-gradient(120% 90% at 70% 20%, #2F6BE8 0%, #13306A 55%, #080D17 100%); }
.cx-banner.cx-t-onboarding { background: radial-gradient(120% 90% at 70% 20%, #18B8A6 0%, #0E4F58 55%, #080D17 100%); }
.cx-banner.cx-t-compliance { background: radial-gradient(120% 90% at 70% 20%, #E8A33D 0%, #6A4412 55%, #080D17 100%); }
.cx-banner.cx-t-ai { background: radial-gradient(120% 90% at 70% 20%, #C026D3 0%, #4E1260 55%, #080D17 100%); }
.cx-banner.cx-t-advanced { background: radial-gradient(120% 90% at 70% 20%, #7C5CF0 0%, #30206E 55%, #080D17 100%); }
.cx-bbg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; }
.cx-bobj { position: absolute; right: 7%; top: 4%; height: 72%; aspect-ratio: 1; background-size: 900% 100%; background-position: 0 0; background-repeat: no-repeat; z-index: -2; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.4)); pointer-events: none; }
.cx-bfade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, transparent 35%, color-mix(in srgb, var(--bg) 18%, transparent) 60%, color-mix(in srgb, var(--bg) 94%, transparent) 100%); }
.cx-bcopy { display: grid; gap: 8px; width: 100%; padding: 16px 16px 14px; }
.cx-banner .cx-title { font-size: clamp(21px, 0.9rem + 0.9vw, 26px); line-height: 1.15; text-shadow: 0 1px 12px color-mix(in srgb, var(--bg) 60%, transparent); }
.cx-banner .cc-tag { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.cx-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 14px 6px; }
.cx-stat { display: grid; justify-items: center; gap: 1px; min-width: 0; text-align: center; }
.cx-stat .i { font-size: 18px; color: var(--cx-ink); margin-bottom: 5px; }
.cx-stat b { font: 800 19px/1.2 var(--font-display); font-variant-numeric: tabular-nums; }
.cx-stat small { font: 600 12.5px var(--font-ui); color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-progress { display: grid; gap: 14px; padding: 16px; }
.cx-prog-top { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cx-pring { position: relative; flex: none; width: 64px; height: 64px; display: grid; place-items: center; }
.cx-pring b { font: 800 15px var(--font-ui); font-variant-numeric: tabular-nums; }
.cx-ring2, .cx-cring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.cx-ring2 circle, .cx-cring circle { fill: none; stroke-width: 6; stroke-linecap: round; }
.cx-ring2 .bg { stroke: var(--border); } .cx-ring2 .fg { stroke: var(--teal); transition: stroke-dashoffset 600ms var(--ease-out); }
.cx-progress .cx-st-t > b { font: 700 15.5px var(--font-ui); }
.cx-progress .cx-plan-line { font-weight: 600; font-size: 13.5px; }
.cx-kick { font: 700 12px var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cx-ink); }
.cx-resume { display: grid; gap: 12px; padding: 12px; border-color: color-mix(in srgb, var(--teal) 45%, var(--border)); }
.cx-rrow { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cx-rrow .cx-st-t b { font: 700 15px/1.3 var(--font-ui); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cx-rthumb { position: relative; flex: none; width: 132px; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: #0B1220; }
.cx-rthumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cx-rthumb::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.25); }
.cx-rplay { position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); transition: transform 160ms var(--ease-out); }
.cx-rplay .i { font-size: 17px; margin-left: 2px; }
.cx-rbar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 1; background: rgba(255, 255, 255, 0.24); }
.cx-rbar i { display: block; height: 100%; background: var(--teal); }
@media (hover: hover) and (pointer: fine) { .cx-rthumb:hover .cx-rplay { transform: scale(1.08); } }
.cx-out2 { gap: 10px; }
.cx-out2 li { gap: 10px; }
.cx-ock { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--teal) 14%, transparent); color: var(--cx-ink); }
.cx-out li .cx-ock .i { font-size: 13px; margin: 0; color: inherit; }
.cx-out-narrow { display: none; margin-top: 6px; }
@media (max-width: 959px) { .cx-out-wide { display: none; } .cx-out-narrow { display: grid; } }

/* ── v3: the lesson player page (corpcourse.js mountLesson) ─────────────────────────────────────────
   Narrow: one column in the phone's order (video, heading, up next, topic, tabs). Wide (>= 1100px):
   video + heading + topic on the left, tabs + transcript + up next on the right. */
.cx-lp { --cx-ink: var(--teal2); display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 1320px; margin: 0 auto; padding-bottom: 32px; }
:root[data-theme="dark"] .cx-lp { --cx-ink: var(--teal); }
.cx-lp-main, .cx-lp-side { display: contents; }
.cx-vwrap { order: 1; } .cx-lhead { order: 2; } .cx-upnext { order: 3; } .cx-topic { order: 4; } .cx-tabs { order: 5; } .cx-panels { order: 6; }
.cx-tbox { max-height: 440px; }
@media (min-width: 1100px) {
  .cx-lp { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; align-items: start; }
  .cx-lp-main { display: grid; gap: 20px; min-width: 0; }
  .cx-lp-side { display: grid; gap: 12px; min-width: 0; position: sticky; top: 84px; }
  .cx-lp-main > *, .cx-lp-side > * { order: 0; }
  .cx-tbox { max-height: max(260px, calc(100vh - 300px)); }
}
/* the video in a rounded frame, with the course colour glowing softly behind it */
.cx-vwrap { position: relative; isolation: isolate; }
.cx-glow { position: absolute; inset: -26px -32px -38px; z-index: -1; pointer-events: none; border-radius: 40px; background: radial-gradient(ellipse 62% 62% at 50% 50%, color-mix(in srgb, var(--teal) 30%, transparent) 0%, color-mix(in srgb, #18B8A6 10%, transparent) 55%, transparent 100%); filter: blur(12px); }
:root[data-theme="light"] .cx-glow { opacity: 0.6; }
.cx-p3 { box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.55); }
/* Nothing over the top of the picture (the lesson's own title and logo live there); only the bottom darkens. */
.cx-p3 .cx-ctl { grid-template-rows: 1fr auto; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12) 55%, rgba(0, 0, 0, 0.78)); }
.cx-ctl-top { display: flex; justify-content: flex-end; padding: 10px 10px 0; }
.cx-rnd { width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(0, 0, 0, 0.45); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background 160ms ease, transform 160ms var(--ease-out); }
.cx-rnd .i { font-size: 16px; }
.cx-rnd.sm { width: 30px; height: 30px; } .cx-rnd.sm .i { font-size: 15px; }
.cx-rnd[aria-expanded="true"] { background: #fff; color: #080D17; }
.cx-p3 .cx-ctl-mid { gap: clamp(18px, 5cqw, 40px); }
.cx-p3 .cx-rb { width: 46px; height: 46px; border: 1px solid rgba(255, 255, 255, 0.22); transition: transform 160ms var(--ease-out); }
.cx-p3 .cx-rb .i { font-size: 21px; }
.cx-p3 .cx-rb.big { width: 64px; height: 64px; border: 0; color: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); }
.cx-p3 .cx-rb.big .i { font-size: 28px; }
.cx-rnd:active, .cx-p3 .cx-rb:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .cx-rnd:hover { background: rgba(0, 0, 0, 0.62); } .cx-rnd[aria-expanded="true"]:hover { background: #fff; } }
@container (max-width: 480px) { .cx-p3 .cx-rb { width: 36px; height: 36px; } .cx-p3 .cx-rb .i { font-size: 17px; } .cx-p3 .cx-rb.big { width: 50px; height: 50px; } .cx-p3 .cx-rb.big .i { font-size: 22px; } .cx-ctl-top { padding: 6px 6px 0; } .cx-rnd { width: 30px; height: 30px; } .cx-rnd.sm { width: 26px; height: 26px; } }
.cx-p3 .cx-ctl-bar { background: none; padding: 2px 14px 10px; gap: 4px; }
.cx-p3 .cx-cc:not(.top) { bottom: 82px; }
.cx-player.cx-p3.cx-hide .cx-cc:not(.top) { bottom: 14px; }
@container (max-width: 480px) { .cx-p3 .cx-cc:not(.top) { bottom: 64px; } .cx-player.cx-p3.cx-hide .cx-cc:not(.top) { bottom: 10px; } }
.cx-p3 .cx-cc.top { top: 54px; } .cx-player.cx-p3.cx-hide .cx-cc.top { top: 12px; }
.cx-ctl-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cx-p3 .cx-ctl-right { align-items: center; gap: 6px; }
.cx-p3 .cx-time { font-size: 13px; }
.cx-p3 .cx-pill2 { border-radius: 999px; padding: 5px 11px; min-height: 30px; background: rgba(255, 255, 255, 0.16); font-size: 13px; }
.cx-p3 .cx-pill2.on { background: var(--teal); color: #fff; }
/* Mute, picture in picture and full screen wear the same chip as CC and speed. */
.cx-p3 .cx-ctl-bar .cx-rnd.sm { width: auto; height: 30px; min-width: 38px; padding: 0 11px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.16); }
.cx-p3 .cx-ctl-bar .cx-rnd.sm:hover { background: rgba(255, 255, 255, 0.26); }
.cx-p3 .cx-ctl-left, .cx-p3 .cx-ctl-right { display: inline-flex; align-items: center; gap: 6px; }
.cx-p3 [data-speed].on { background: rgba(255, 255, 255, 0.16); color: #fff; }
.cx-p3 .cx-pill2[aria-expanded="true"] { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7); }
/* scrubber: track, buffered, played, chapter ticks, checkpoint marks, knob, time bubble */
.cx-p3 .cx-scrub { height: 30px; }
.cx-p3 .cx-scrub .cx-track, .cx-p3 .cx-scrub .cx-fill, .cx-scrub .cx-buf { position: absolute; left: 0; top: 12px; height: 5px; border-radius: 3px; }
.cx-scrub .cx-buf { width: 0; background: rgba(255, 255, 255, 0.42); }
.cx-p3 .cx-scrub .cx-tick { top: 10.5px; }
.cx-scrub .cx-cpdot { position: absolute; top: 10.5px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #E8A33D; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.85); pointer-events: none; }
.cx-p3 .cx-scrub .cx-knob { top: 6.5px; width: 16px; height: 16px; margin-left: -8px; transition: transform 140ms var(--ease-out); }
.cx-p3 .cx-scrub:hover .cx-knob, .cx-p3 .cx-scrub.cx-drag .cx-knob { transform: scale(1.18); }
.cx-tip { position: absolute; bottom: 26px; transform: translateX(-50%); padding: 3px 8px; border-radius: 7px; background: rgba(0, 0, 0, 0.82); color: #fff; font: 700 12.5px var(--font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
.cx-tip[hidden] { display: none; }
/* double-click +-10 s ripple */
.cx-skipfx { position: absolute; top: 0; bottom: 0; width: 34%; z-index: 2; display: grid; place-items: center; pointer-events: none; opacity: 0; background: rgba(255, 255, 255, 0.1); }
.cx-skipfx.l { left: 0; border-radius: 0 50% 50% 0; } .cx-skipfx.r { right: 0; border-radius: 50% 0 0 50%; }
.cx-skipfx > span { display: grid; justify-items: center; gap: 2px; color: #fff; font: 700 14px var(--font-ui); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); }
.cx-skipfx .i { font-size: 28px; }
.cx-skipfx.on { animation: cxSkip 700ms var(--ease-out) both; }
.cx-skipfx.on > span { animation: cxSkipIn 700ms var(--ease-out) both; }
@keyframes cxSkip { 0% { opacity: 0; } 12% { opacity: 1; } 65% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cxSkipIn { from { transform: scale(0.8); } to { transform: none; } }
/* settings panel (speed, autoplay): the caption panel's shape */
.cx-ccp-col { flex-direction: column; align-items: stretch; gap: 8px; cursor: default; }
.cx-ccpanel .cx-speeds { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); width: 100%; }
.cx-ccpanel .cx-speeds button { padding: 6px 2px; font-variant-numeric: tabular-nums; }
@container (max-width: 560px) { .cx-ccpanel .cx-speeds { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cx-ccp-txt { display: grid; gap: 2px; min-width: 0; }
.cx-ccp-txt small { font-size: 12px; line-height: 1.35; color: rgba(255, 255, 255, 0.66); }
/* end of a lesson: countdown ring, what is next, Play now / Cancel */
.cx-endov { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, 0.72); animation: cxEndIn 240ms var(--ease-out) both; }
.cx-endov[hidden] { display: none; }
@keyframes cxEndIn { from { opacity: 0; } }
.cx-endin { display: flex; align-items: center; gap: 20px; max-width: 600px; min-width: 0; }
.cx-count { position: relative; flex: none; width: 76px; height: 76px; display: grid; place-items: center; color: #fff; font: 800 28px var(--font-display); font-variant-numeric: tabular-nums; }
.cx-cring circle { stroke-width: 4.5; }
.cx-cring .bg { stroke: rgba(255, 255, 255, 0.22); } .cx-cring .fg { stroke: var(--teal); }
.cx-cring.go .fg { animation: cxCount 5s linear forwards; }
@keyframes cxCount { to { stroke-dashoffset: 169.6; } }
.cx-endtext { display: grid; gap: 4px; min-width: 0; color: #fff; }
.cx-endkick { font: 700 12.5px var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
.cx-endtext > b { font: 700 clamp(16px, 2.4cqw, 24px)/1.25 var(--font-display); overflow-wrap: anywhere; }
.cx-endact { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cx-endact .btn { min-height: 40px; }
.cx-endov .cx-endcancel { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.35); box-shadow: none; }
@container (max-width: 480px) { .cx-endin { gap: 12px; } .cx-count { width: 54px; height: 54px; font-size: 20px; } .cx-endkick { font-size: 10.5px; } .cx-endact { margin-top: 4px; } .cx-endact .btn { min-height: 34px; padding: 6px 12px; font-size: 13px; } }
/* heading */
.cx-lhead { display: grid; gap: 8px; min-width: 0; }
.cx-lkicker { font: 700 12.5px var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.cx-lh1 { margin: 0; display: flex; align-items: center; gap: 12px; min-width: 0; font: 800 clamp(22px, 1.1rem + 1vw, 30px)/1.15 var(--font-display); letter-spacing: -0.02em; }
.cx-lh1 > span:last-child { min-width: 0; overflow-wrap: anywhere; text-wrap: balance; }
.cx-badge { flex: none; padding: 3px 9px; border-radius: 9px; background: color-mix(in srgb, var(--teal) 15%, transparent); color: var(--cx-ink); font: 800 0.78em/1.3 var(--font-ui); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.cc-tag.cx-acc { color: var(--cx-ink); border-color: color-mix(in srgb, var(--teal) 45%, transparent); background: var(--teal-soft); }
.cx-lhead .cx-donetag { align-self: center; } .cx-lhead .cx-donetag[hidden] { display: none; }
/* in this topic */
.cx-h3 { margin: 0 0 10px; font: 700 17px/1.3 var(--font-ui); }
.cx-lp-main > *, .cx-lp-side > *, .cx-topic { min-width: 0; }
.cx-lstrip { position: relative; display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 2px 2px 10px; scrollbar-width: thin; }
.cx-lcard { flex: 0 0 204px; min-width: 0; scroll-snap-align: start; display: grid; align-content: start; gap: 3px; padding: 8px 8px 12px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); color: inherit; text-decoration: none; transition: border-color 160ms ease, transform 160ms var(--ease-out); }
.cx-lcard.cx-now { background: color-mix(in srgb, var(--teal) 10%, var(--surface)); border-color: color-mix(in srgb, var(--teal) 65%, transparent); }
.cx-lcard:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) { .cx-lcard:hover { border-color: var(--teal); } }
.cx-lthumb { position: relative; aspect-ratio: 16 / 9; margin-bottom: 6px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: #0B1220; }
.cx-lthumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cx-lglyph { color: var(--teal); } .cx-lglyph .i { font-size: 30px; }
.cx-ltick { position: absolute; right: 6px; top: 6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); }
.cx-ltick .i { font-size: 13px; } .cx-ltick[hidden] { display: none; }
.cx-lnow { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; background: rgba(0, 0, 0, 0.42); color: #fff; font: 700 13px var(--font-ui); }
.cx-lnow .i { font-size: 17px; color: #7FB2FF; animation: cxPulse 1.4s ease-in-out infinite; }
@keyframes cxPulse { 50% { opacity: 0.45; } }
.cx-lkick { font: 700 11.5px var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.cx-lcard.cx-now .cx-lkick { color: var(--cx-ink); }
.cx-ltitle { font: 700 14.5px/1.3 var(--font-ui); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cx-lmeta { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* tabs: Transcript | Checkpoint | Notes */
.cx-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text2); font: 700 14px var(--font-ui); cursor: pointer; transition: border-color 160ms ease, background 160ms ease, color 160ms ease; }
.cx-tab .i { font-size: 16px; }
.cx-tab.on { color: var(--cx-ink); border-color: var(--teal); background: color-mix(in srgb, var(--teal) 14%, var(--surface)); }
.cx-tab:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .cx-tab:not(.on):hover { color: var(--text); border-color: color-mix(in srgb, var(--text) 25%, var(--border)); } }
.cx-panels { min-width: 0; }
.cx-tpanel[hidden] { display: none !important; }
.cx-tbox { position: relative; display: grid; align-content: start; gap: 2px; padding: 8px 6px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.cx-tline { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; width: 100%; text-align: left; padding: 9px 10px 9px 8px; border: 0; border-left: 3px solid transparent; border-radius: 10px; background: transparent; color: var(--muted); font: 400 15px/1.45 var(--font-body); cursor: pointer; transition: background 200ms ease, color 200ms ease; }
.cx-tline.cx-past { color: var(--text2); }
.cx-tline.cx-lit { color: var(--text); font-weight: 600; background: color-mix(in srgb, var(--teal) 12%, transparent); border-left-color: var(--teal); }
.cx-tt { font: 600 12.5px/1.95 var(--font-ui); color: var(--muted); font-variant-numeric: tabular-nums; }
.cx-tline.cx-lit .cx-tt { color: var(--cx-ink); }
@media (hover: hover) and (pointer: fine) { .cx-tline:not(.cx-lit):hover { background: color-mix(in srgb, var(--text) 5%, transparent); } }
.cx-tline:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.cx-tempty { padding: 10px; }
.cx-cppanel { display: grid; gap: 10px; }
.cx-cpbox { display: grid; gap: 6px; padding: 14px; }
.cx-cpbox .cx-q { margin-top: 0; }
.cx-cpstat { display: inline-flex; align-items: center; gap: 6px; font: 700 12.5px var(--font-ui); }
.cx-cpstat.ok { color: var(--green2); } .cx-cpstat.no { color: var(--amber-ink, var(--amber)); }
:root[data-theme="dark"] .cx-cpstat.no { color: var(--amber); }
.cx-notes { display: grid; gap: 8px; padding: 12px; }
.cx-notes textarea { width: 100%; min-height: 220px; resize: vertical; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--bg) 50%, var(--surface)); color: var(--text); font: 400 16px/1.5 var(--font-body); }
.cx-notes textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
.cx-nfoot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cx-nstate { display: inline-flex; align-items: center; gap: 4px; flex: none; font: 700 12.5px var(--font-ui); color: var(--muted); white-space: nowrap; }
.cx-nstate .i { font-size: 14px; }
.cx-nstate.ok { color: var(--green2); } .cx-nstate.no { color: var(--err); }
/* up next */
.cx-upnext { display: flex; align-items: center; gap: 12px; padding: 12px; min-width: 0; color: inherit; text-decoration: none; transition: border-color 160ms ease, transform 160ms var(--ease-out); }
.cx-upnext .cx-arrow { flex: none; color: var(--muted); }
.cx-upnext .cx-st-t b { font: 700 15px/1.3 var(--font-ui); }
.cx-unkick { color: var(--muted); }
.cx-unthumb { position: relative; flex: none; width: 112px; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: #0B1220; }
.cx-unthumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cx-upnext:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) { .cx-upnext:hover { border-color: var(--teal); } }
@media (prefers-reduced-motion: reduce) { .cx-skipfx.on, .cx-skipfx.on > span, .cx-endov { animation-duration: 1ms; } .cx-lnow .i { animation: none; } }
:root[data-reduce-motion="1"] .cx-lnow .i { animation: none; }

/* The course trailer in the banner (corpcourse.js trailerPlay). */
.cx-tvid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; opacity: 0; pointer-events: none; transition: opacity .3s var(--ease-out, ease); background: #05070d; }
.cx-banner.playing .cx-tvid { opacity: 1; pointer-events: auto; cursor: pointer; }
.cx-bcopy, .cx-bfade { transition: opacity .28s var(--ease-out, ease); }
.cx-banner.playing .cx-bcopy, .cx-banner.playing .cx-bfade, .cx-banner.playing .cx-tbtn { opacity: 0; pointer-events: none; }
.cx-tbtn, .cx-tskip, .cx-tmute { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 6px; border: 0; color: #fff; background: rgba(0, 0, 0, .42); border-radius: 999px; font: 700 13px/1 Manrope, sans-serif; cursor: pointer; transition: transform .16s var(--ease-out, ease), background .16s, opacity .2s; }
.cx-tbtn { top: 12px; right: 12px; padding: 8px 14px 8px 10px; }
.cx-tbtn svg, .cx-tskip svg, .cx-tmute svg { width: 16px; height: 16px; }
.cx-tbtn:active, .cx-tskip:active, .cx-tmute:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .cx-tbtn:hover, .cx-tskip:hover, .cx-tmute:hover { background: rgba(0, 0, 0, .6); } }
.cx-tskip { top: 10px; right: 10px; padding: 8px 14px; opacity: 0; pointer-events: none; }
.cx-tmute { top: 10px; left: 10px; width: 36px; height: 36px; justify-content: center; padding: 0; opacity: 0; pointer-events: none; }
.cx-tbar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 2; background: rgba(255, 255, 255, .18); opacity: 0; }
.cx-tbar i { display: block; height: 100%; width: 0; background: var(--brand, var(--teal)); }
.cx-banner.playing .cx-tskip, .cx-banner.playing .cx-tmute, .cx-banner.playing .cx-tbar { opacity: 1; pointer-events: auto; }
.cx-banner.has-trailer { aspect-ratio: 16 / 9; min-height: 0; }

/* ── Library · Books: the bookshop (Oct 2026). Same layout as the phone's
   Library → Books: Featured carousel, Continue, Quick reads chart, a shelf
   per topic, every topic at the back. Classes are bk-/bf-/bc-/bq-/bt-. ── */
.bk-home { gap: clamp(40px, 4.4vw, 60px); }
.bk-home .sh h2 small { display: block; margin-top: 4px; font-family: var(--font-ui); font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.bk-home .sh h2 .cnt { margin-inline-start: 4px; font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* Featured */
.bf-track { display: flex; gap: 18px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 34px; margin: 0 -2px -12px; outline: none; }
.bf-track::-webkit-scrollbar { display: none; }
.bf-card { position: relative; flex: 0 0 min(580px, 86%); scroll-snap-align: start; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 28px; align-items: stretch; padding: 28px; border-radius: 28px; overflow: hidden; isolation: isolate; color: #fff; text-decoration: none;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c1) 85%, var(--c2)), color-mix(in srgb, var(--c2) 75%, #000));
  box-shadow: 0 14px 28px -16px color-mix(in srgb, var(--c2) 80%, transparent); transition: transform 160ms var(--ease-out); }
.bf-card:active { transform: scale(0.985); }
.bf-glow { position: absolute; inset-inline-start: -60px; top: -90px; width: 340px; height: 340px; border-radius: 50%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--c3) 38%, transparent), transparent); }
.bf-card .cover { width: 150px; border-radius: 12px; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.55); }
.bf-t { display: flex; flex-direction: column; min-width: 0; }
:root .bf-card .bf-t .kicker, :root[data-theme] .bf-card .bf-t .kicker { color: var(--c3); font-family: var(--font-ui); font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.bf-t b { margin-top: 10px; font-family: var(--font-display); font-size: clamp(22px, 1rem + 1vw, 28px); line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bf-a { margin-top: 6px; font-size: 15px; color: rgba(255, 255, 255, 0.74); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf-row { margin-top: auto; padding-top: 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bf-go { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px; background: #fff; color: color-mix(in srgb, var(--c2) 85%, #000); font-family: var(--font-ui); font-weight: 700; font-size: 14px; }
.bf-m { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: 13.5px; color: rgba(255, 255, 255, 0.82); }
.bf-m .i { font-size: 14px; }
.bf-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bf-dots { display: flex; gap: 6px; }
.bf-dots i { width: 6px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--text) 25%, transparent); transition: width 220ms var(--ease-out), background 220ms ease; }
.bf-dots i.on { width: 20px; background: var(--teal2); }
:root[data-theme="dark"] .bf-dots i.on { background: var(--teal); }
.bf-arrows { display: inline-flex; gap: 6px; }
@media (hover: hover) and (pointer: fine) { .bf-card:hover { transform: translateY(-2px); } }

.bf-card .bf-t .kicker::before { display: none; }

/* Continue learning */
.bk-cont { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.bc-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); color: inherit; text-decoration: none; transition: transform 160ms var(--ease-out), border-color 140ms ease; }
.bc-card:active { transform: scale(0.98); }
.bc-card .cover { width: 64px; border-radius: 8px; }
.bc-card .cover .t, .bc-card .cover .glyph { display: none; }
.bc-t { display: grid; gap: 4px; min-width: 0; }
.bc-t b { font-family: var(--font-ui); font-size: 15px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bc-t > span { font-size: 13px; color: var(--muted); }
.bc-bar { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.bc-bar .thin { flex: 1; height: 5px; border-radius: 3px; }
.bc-bar em { font-style: normal; font-family: var(--font-ui); font-size: 12.5px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .bc-card:hover { border-color: var(--border2); } }

/* Quick reads: a chart, three rows a column */
.bk-quick { display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, auto); grid-auto-columns: minmax(300px, 1fr); column-gap: 32px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.bk-quick::-webkit-scrollbar { display: none; }
.bq-row { display: grid; grid-template-columns: 52px 26px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; min-width: 0; transition: transform 140ms var(--ease-out); }
.bq-row:nth-child(3n) { border-bottom-color: transparent; }
.bq-row:active { transform: scale(0.985); }
.bq-row .cover { width: 52px; border-radius: 7px; }
.bq-row .cover .t, .bq-row .cover .glyph { display: none; }
.bq-n { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bq-t { display: grid; gap: 2px; min-width: 0; }
.bq-t b { font-family: var(--font-ui); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bq-t span { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bq-m { padding: 4px 10px; border-radius: 999px; font-family: var(--font-ui); font-size: 12.5px; font-weight: 700; color: var(--teal2); background: color-mix(in srgb, var(--teal) 14%, transparent); white-space: nowrap; }
:root[data-theme="dark"] .bq-m { color: var(--teal); }
@media (hover: hover) and (pointer: fine) { .bq-row:hover .bq-t b { color: var(--teal2); } :root[data-theme="dark"] .bq-row:hover .bq-t b { color: var(--teal); } }

/* Shelves: a little narrower than before, title + author only */
.lb-topic .bk-rail > * { flex: 0 0 148px; }
.app-main .citem.bare .bm { display: none; }
@media (max-width: 560px) { .lb-topic .bk-rail > * { flex-basis: 124px; } }

/* Browse topics */
.bk-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.bt-tile { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); color: inherit; text-align: start; cursor: pointer; font: inherit; transition: transform 140ms var(--ease-out), border-color 140ms ease; }
.bt-tile:active { transform: scale(0.98); }
.bt-g { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.bt-g .i { font-size: 20px; }
.bt-t { display: grid; gap: 2px; min-width: 0; }
.bt-t b { font-family: var(--font-ui); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-t span { font-size: 13px; color: var(--muted); }
.bt-tile .bt-c { color: var(--muted); font-size: 16px; }
@media (hover: hover) and (pointer: fine) { .bt-tile:hover { border-color: var(--border2); } }

@media (max-width: 720px) {
  .bf-card { grid-template-columns: 104px minmax(0, 1fr); gap: 18px; padding: 20px; border-radius: 24px; }
  .bf-card .cover { width: 104px; }
  .bf-arrows { display: none; }
}
@media (prefers-reduced-motion: reduce) { .bf-card, .bc-card, .bq-row, .bt-tile { transition: none; } .bf-track { scroll-behavior: auto; } }

/* ── Library · Courses: the same shop as Books (Oct 2026). Featured
   course cards (cf-), the topic tiles as two-row rails (tp-rail). ── */
.gen-shop > .lb-search { margin-bottom: clamp(28px, 3vw, 40px); }
.cf-card { position: relative; flex: 0 0 min(440px, 86%); scroll-snap-align: start; display: grid; grid-template-rows: auto 1fr; border-radius: 24px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); color: inherit; text-decoration: none; transition: transform 160ms var(--ease-out), border-color 140ms ease; }
.cf-card:active { transform: scale(0.985); }
.cf-card .ccover { border-radius: 0; box-shadow: none; }
.cf-card .ccover .cc-ct { display: none; }
.cf-t { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; min-width: 0; }
.cf-k { font-family: var(--font-ui); font-size: 11.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-theme="dark"] .cf-k { color: var(--teal); }
.cf-t b { font-family: var(--font-display); font-size: clamp(18px, 1rem + 0.6vw, 22px); line-height: 1.15; letter-spacing: -0.02em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cf-a { font-size: 13.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-t .bf-row { padding-top: 12px; }
.cf-go { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 999px; background: var(--teal); color: #fff; font-family: var(--font-ui); font-weight: 700; font-size: 14px; }
.cf-m { font-family: var(--font-ui); font-size: 13px; color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .cf-card:hover { transform: translateY(-2px); border-color: var(--border2); } }
.tp-rail { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, minmax(118px, 1fr)); grid-auto-columns: 220px; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 2px 2px 10px; margin: 0 -2px; scroll-snap-type: x proximity; }
.tp-rail::-webkit-scrollbar { display: none; }
.tp-rail.one { grid-template-rows: minmax(118px, 1fr); }
.tp-rail > * { scroll-snap-align: start; }
.gen-shop .cgroup { margin: 0; }
@media (max-width: 720px) { .tp-rail { grid-auto-columns: 180px; } .cf-card { flex-basis: 88%; } .cf-t { padding: 14px 16px 16px; } }
@media (prefers-reduced-motion: reduce) { .cf-card { transition: none; } }

/* The company tab as the shop (Oct 2026): Featured, Priority, Recommended,
   departments as tiles, a department's teams in place. */
.cc-tab .cc-body { gap: clamp(36px, 4vw, 52px); }
.cc-tab .cc-part > .sh { margin-bottom: 14px; }
.cc-tab .cc-grid-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 236px), 1fr)); gap: 18px; }
.cc-dept-name { margin-inline-start: 14px; }
.cc-team .sh h2 .cnt { margin-inline-start: 6px; font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.cc-regular { margin-top: clamp(40px, 4.4vw, 60px); }
.gen-head2 { margin-bottom: -12px; }
.gen-head2 .sh { margin-bottom: 0; }

/* ── Video Lesson (video.js): the book as a motion-graphics film ───────── */
.md-card.coral { --tone: #E11D48; } :root[data-theme="dark"] .md-card.coral { --tone: #FB7185; }
.vl-page { display: grid; gap: 18px; width: 100%; max-width: 1320px; margin: 0 auto; padding-bottom: 40px; }
.vl-page .crumbs { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--muted); font: 600 13px var(--font-ui); }
.vl-page .crumbs a { color: inherit; text-decoration: none; min-width: 0; } .vl-page .crumbs a:hover { color: var(--ink); }
.vl-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
@media (max-width: 1100px) { .vl-grid { grid-template-columns: minmax(0, 1fr); } }
.vl-main { display: grid; gap: 18px; min-width: 0; }
.vl-main .cx-vwrap { order: 0; } .vl-main .vl-head { order: 1; }
.vl-head { display: grid; gap: 6px; }
.vl-head .h2 { margin: 2px 0 0; text-wrap: balance; }
.vl-head .author { margin: 0; color: var(--muted); }
.vl-kicker { display: inline-flex; align-items: center; gap: 8px; color: #E11D48; font: 800 12px var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; }
:root[data-theme="dark"] .vl-kicker { color: #FB7185; }
.vl-kicker .i { font-size: 16px; }
.vl-done { display: inline-flex; align-items: center; gap: 4px; color: var(--teal2, var(--teal)); }
.vl-intro { margin: 6px 0 0; max-width: 64ch; text-wrap: pretty; }
.vl-keys { margin: 0; font-size: 12.5px; }
.vl-side { display: grid; gap: 14px; position: sticky; top: 92px; }
.vl-side > .btn { justify-self: start; }
.vl-chapters { padding: 16px 10px 10px; display: grid; gap: 8px; }
.vl-chapters .kicker { padding: 0 8px; }
.vl-chapters ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.vl-chapters button { width: 100%; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 10px; border: 0; border-radius: 12px; background: none; color: var(--ink); text-align: left; cursor: pointer; font: 600 14.5px var(--font-body); transition: background 160ms ease; }
.vl-chapters button .n { color: var(--muted); font: 700 12px var(--font-ui); font-variant-numeric: tabular-nums; }
.vl-chapters button b { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vl-chapters button .tm { color: var(--muted); font: 600 12px var(--font-ui); font-variant-numeric: tabular-nums; }
.vl-chapters button.on { background: color-mix(in srgb, #E11D48 12%, transparent); }
.vl-chapters button.on b, .vl-chapters button.on .n { color: #E11D48; font-weight: 800; }
:root[data-theme="dark"] .vl-chapters button.on b, :root[data-theme="dark"] .vl-chapters button.on .n { color: #FB7185; }
@media (hover: hover) and (pointer: fine) { .vl-chapters button:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); } }
.vl-chapters button:active { transform: scale(0.985); }

/* ══════════════════════════════════════════════════════════════════
   Soft UI (neumorphism) for the learner app: the same one material as
   the site. Content (cards, tiles, rows, boards, bubbles) is FLAT: the
   deeper tone with no shadow; a card inside a card goes back to the page
   tone. RAISED is only what floats (the nav pill, the dock, buttons and
   chips that act, menus, sheets, the mini player, the Bits AI panel).
   What you are "in" (the tab you are on, a field, a switch track, the
   composer, a chosen option) is sunk. Press sinks, hover lifts a little.
   ══════════════════════════════════════════════════════════════════ */

/* ── The shell: a raised pill, the tab you are on sunk into it ─────── */
.app-nav { background: linear-gradient(to bottom, var(--base) 0%, color-mix(in srgb, var(--base) 82%, transparent) 60%, transparent 100%); border: 0; }
.app-nav .wrap { background: var(--base); border: 0; box-shadow: var(--raised); }
body.scrolled .app-nav .wrap { box-shadow: var(--raised-hi); }
.app-tabs a { color: var(--ink-2); transition: color 140ms ease, box-shadow var(--press-ms) ease, transform var(--press-ms) ease; }
.app-tabs a:active { box-shadow: var(--sunk-sm); transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) { .app-tabs a:not(.on):hover { background: none; color: var(--ink); box-shadow: var(--flat); transform: translateY(-1px); } }
.app-tabs a.on, .app-tabs.has-on a.on, :root[data-theme="dark"] .app-tabs.has-on a.on { color: var(--teal-ink); background: none; }
.app-tabs:not(.has-on) a.on { box-shadow: var(--sunk-sm); }
.tabs-ind { background: var(--base); box-shadow: var(--sunk-sm); }
.pill { background: var(--base-2); border: 0; box-shadow: none; padding: 0 12px; }
.pill.xp { color: var(--teal-ink); }
.avatar { box-shadow: var(--flat); }
.nav-theme, .app-right .nav-theme { border: 0; background: var(--base); box-shadow: var(--flat); transition: box-shadow var(--press-ms) ease, transform var(--press-ms) ease; }
.nav-theme:active { box-shadow: var(--press); transform: translateY(1px); }
.plan-badge { border: 0; background: var(--base); box-shadow: var(--flat); transition: box-shadow var(--press-ms) ease, transform var(--press-ms) ease; }
.plan-badge:hover { transform: translateY(-1px); box-shadow: var(--flat-hi); }
.plan-badge:active { transform: translateY(1px); box-shadow: var(--press); }
.plan-badge.premium, .plan-badge.professional { box-shadow: var(--flat), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.menu, .menu.nav-pop, .rd-pop, .devpanel, .ctx-pop, .plan-pop { background: var(--base); border: 0; box-shadow: var(--raised); }
.menu .who { border-bottom-color: var(--border); }
.menu.nav-pop [data-theme-mode] .ck, :root[data-theme="dark"] .menu.nav-pop [data-theme-mode] .ck { color: var(--teal-ink); }
@media (max-width: 760px) {
  .app-dock { background: var(--base); border: 0; box-shadow: var(--raised); }
  .app-dock a.on, :root[data-theme="dark"] .app-dock a.on { color: var(--teal-ink); }
  .dock-ind { background: var(--base); box-shadow: var(--sunk-sm); }
}
:root[data-theme="dark"] .app-dock { box-shadow: var(--raised); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .app-dock { box-shadow: var(--raised); } }
.plan-sticky, .plans-page .plan-sticky { background: var(--base); border-top: 0; box-shadow: 0 -10px 24px -16px var(--sd); }
.toast { box-shadow: var(--raised); }

/* ── flat cards: content never carries a shadow at rest ───────────── */
.wr-feat, .lp-card, .lg-card, .pb, .pf-acc a, .pf-banner, .ln-stat, .lb-cat, .bc-card, .bt-tile, .cf-card, .bk-tk, .bk-secs li a, .vz-board, .mm-node, .action, .plan2, .badge, .ai-prompt, .ai-sug, .ai-thread, .sk-row, .ai-limit, .ai-urow, .ai-hint, .ai-analysis, .ai-err, .corp-plan, .cs-domain, .cs-prev, .prefs-index a, .mf-stats, .ch-day, .cx-lcard, .cx-station, .cx-mcard, .cx-ftile, .cc-card, .empty2, .onb-shell .pickcard, .glass.lab-strip, .up-next, .prow, .bw, .md-card, .app-main .board, .planview, .app-main .translating, .app-main .adddoc, .outcome, .flash .face, .flash-stack .fs, .ph-dev, .chal, .chal.all, .cert, .cert-card, .ai-msgs .msg.ai, .ai-a, .ln-plan, .reward, .bk-ring {
  background: var(--base-2); border-color: transparent; box-shadow: none;
}
/* Coloured cards keep their own face; only the shadow goes. */
.ai-hero, .cx-banner, .bk-ai, .up-next.hero, .wh-lab, .bf-card, .flash .face.back, .reward, .reward.gold, .ai-u, .mm-node.branch.open, .ch-day.open, .app-main div.avatar, .pf-avatar { box-shadow: none; }
.app-main .chal, .app-main .chal.all, .wh-lab { border-color: transparent; }
.reward { background: var(--amber-soft); }
.reward.gold { background: var(--gold-soft); }
.flash .face.back { background: color-mix(in srgb, var(--teal) 14%, var(--base-2)); }
/* A card inside a card goes back to the page tone. */
.pb .action, .pb .prow, .lg-card .prow, .card .action, .card .prow, .cx-mcard .cx-station, .cx-mcard .cx-ftile, .cx-mcard .cx-lcard, .app-main .board .bk-tk, .chal .chal-row, .pf-banner .pill, .pb .pill, .cx-mcard .cx-opt { background: var(--base); }
.empty2 { border: 0; }
.ai-sug::after, .ai-thread::after, .md-card::after { content: none; }
.up-next.leaning, .glass.lab-strip.leaning { box-shadow: var(--flat); }
/* A tappable card lifts a little under a fine pointer and sinks while pressed. */
@media (hover: hover) and (pointer: fine) {
  .wr-feat:hover, .lp-card:hover, .lg-card:hover, a.pb:hover, .md-card:hover, .up-next:hover, .prow:hover, .bw:hover, .bk-ai:hover, .pf-acc a:hover, .lb-cat:hover, .action:hover, .ai-prompt:hover, .ai-sug:hover, .ai-thread:hover, .bt-tile:hover, .bc-card:hover, .bk-secs li a:hover, .cx-station:hover, .cx-ftile:hover, .cx-lcard:hover, .prefs-index a:hover, .onb-shell .pickcard:hover, .onb-shell .pickcard.on:hover { transform: translateY(-2px); box-shadow: var(--flat); border-color: transparent; }
}
.wr-feat:active, .lp-card:active, .lg-card:active, a.pb:active, .md-card:active, .up-next:active, .prow:active, .bw:active, .bk-ai:active, .pf-acc a:active, .lb-cat:active, .action:active, .ai-prompt:active, .ai-sug:active, .ai-thread:active, .bt-tile:active, .bc-card:active, .bk-secs li a:active, .cx-station:active, .cx-ftile:active, .cx-lcard:active, .prefs-index a:active, .plan2:active, .onb-shell .pickcard:active { transform: translateY(1px); box-shadow: var(--sunk); transition: transform var(--press-ms) ease, box-shadow var(--press-ms) ease; }
/* Small things that act stay raised; the chosen one is sunk. */
.cx-opt, .cx-tab, .cx-pill, .cx-grid button, .mins button, .font-btns button { background: var(--base); border-color: transparent; box-shadow: var(--flat); }
.cx-opt:active, .cx-tab:active, .cx-pill:active, .cx-grid button:active, .mins button:active, .font-btns button:active { transform: translateY(1px); box-shadow: var(--press); }
.cx-tab.on, .cx-pill.on, .cx-grid button.on, .cx-grid button.has, .cx-opt.picked, .cx-opt.right, .cx-opt.wrong, .prefs-index a.on, .prefs-index a[aria-current="true"] { box-shadow: var(--sunk-sm); border-color: transparent; }
.cx-tab.on { color: var(--teal-ink); background: var(--base); }
/* Floating: sheets, the celebration cards, the orb dock, the mini player, a dragged card */
.uc-card, .lvl-card, .sheet2-panel, .ai-layerin, .ai-layer.pop .ai-layerin, .orb-dock, .mini-player .mp-bar, .flash-ghost { background: var(--base); border-color: transparent; box-shadow: var(--raised); }
.plan2.on, .plan2.professional.on { border-color: transparent; box-shadow: inset 0 0 0 2px var(--teal); }
.plan2.professional.on { box-shadow: inset 0 0 0 2px var(--gold); }
.plan2 .perks { border-top-color: var(--border); }
.onb-shell .pickcard.on, .mins button.on { border-color: transparent; background: var(--base); color: var(--teal-ink); box-shadow: var(--sunk); }
.pickcard.on .pc-ic, .onb-shell .pickcard.on .pc-ic { background: var(--base-2); color: var(--teal-ink); box-shadow: none; }
.pickcard .pc-tick { border: 0; box-shadow: var(--sunk-sm); }
.pickcard.on .pc-tick { background: var(--teal); color: var(--on-teal); box-shadow: none; }
.pf-body .lvl-ring { box-shadow: 0 0 0 6px var(--base); }
.pf-badges .badge, .pf-badges .badge:not(.off) { border-color: transparent; }
.pf-badges .badge:not(.off) .ic { background: var(--base); }
/* The appearance picker: three flat windows, the chosen one sunk with a teal ring */
.pf-theme { border-color: transparent; background: var(--base); box-shadow: none; transition: box-shadow var(--press-ms) ease, transform var(--press-ms) ease; }
.pf-theme:active { transform: translateY(1px); box-shadow: var(--press); }
.pf-theme[aria-pressed="true"] { border-color: transparent; box-shadow: var(--sunk-sm), inset 0 0 0 2px color-mix(in srgb, var(--teal) 55%, transparent); }
.badge-strip .badge .ic { box-shadow: none; }
.badge-strip .badge.off .ic { box-shadow: none; background: var(--base); }

/* ── "Ways to learn it": flat cards, the icon disc in the alternate tone ── */
.md-card { transition: transform var(--press-ms) ease, box-shadow var(--press-ms) ease; }
.md-card::before { content: none; }
.md-ic { box-shadow: none; background: var(--base); }
.md-card.next { border-color: transparent; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tone) 55%, transparent); }
.md-ways .bw.next { border-color: transparent; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c1, var(--teal)) 55%, transparent); }
.md-st { box-shadow: none; background: var(--base); }

/* ── Segmented tabs: the track sunk, the thumb raised ──────────────── */
.segtabs, .lib-bar .segtabs { background: var(--base); border: 0; box-shadow: var(--sunk); overflow: visible; }
.segtabs-ind, .lib-bar .segtabs-ind { background: var(--base); box-shadow: var(--flat); }
.segtabs a[aria-selected="true"] { color: var(--teal-ink); }
.seg, .settings .seg, .ph-ctrls .seg, .rd-pop .seg, .rate { background: var(--base); box-shadow: var(--sunk); }
.rate button { background: transparent; border: 0; box-shadow: none; transition: box-shadow var(--press-ms) ease, transform var(--press-ms) ease; }
.rate button:active { box-shadow: var(--flat); transform: none; }
@media (hover: hover) and (pointer: fine) { .rate button:hover { transform: none; background: var(--base); box-shadow: var(--flat); } }
.countchips .chip { box-shadow: var(--flat); }

/* ── Fields: sunk ──────────────────────────────────────────────────── */
.composer textarea, .namerow input, .apply, .ai-search, .ctxsel select, .lib-bar .search, .lb-search, .ai-edit, .cs-search, .corp-dns input { background: var(--base); border-color: transparent; box-shadow: var(--sunk); color: var(--ink); }
.composer textarea:focus, .namerow input:focus, .apply:focus, .ai-search:focus-within, .lb-search:focus-within, .lib-bar .search:focus-within { border-color: transparent; box-shadow: var(--sunk), var(--ring); transform: none; }
.lb-search .lb-kbd { border: 0; box-shadow: none; background: var(--base-2); }
.ctx-btn { border: 0; background: var(--base); box-shadow: var(--flat); }
.ctx-btn[aria-expanded="true"] { box-shadow: var(--sunk-sm); }
.composer2 { background: var(--base); border: 0; box-shadow: var(--sunk); }
.composer2::before, .composer2::after { content: none; }
.composer2:focus-within { box-shadow: var(--sunk), var(--ring); }
.composer2-row .btn-icon.btn-glass { background: var(--base); border: 0; box-shadow: var(--flat); }
.composer2 .send { background: var(--teal); color: var(--on-teal); box-shadow: var(--teal-raised); }
.composer2 .send:active { box-shadow: var(--teal-press); }
.composer2 .send.stop { background: var(--err); color: #fff; }
.composer { background: var(--base); border-top: 1px solid var(--border); }
.switch { background: var(--base); box-shadow: var(--sunk-sm); }
.switch[aria-checked="true"] { background: var(--teal); box-shadow: var(--sunk-sm); }
.switch .knob { box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.28), -1px -1px 3px rgba(255, 255, 255, 0.5); }
.langlist button[aria-checked="true"], .thread.on, .tracks li.on, .vl-chapters button.on, .ctx-pop button[aria-selected="true"] { background: var(--base); box-shadow: var(--sunk-sm); }
.thread.on { color: var(--teal-ink); }
.langlist button .i, .vl-done { color: var(--teal-ink); }

/* ── Bits AI: a solid panel of the page tone ───────────────────────── */
.ai-widget { background: var(--base); border: 0; box-shadow: var(--raised), 0 30px 70px -24px var(--sd); }
.ai-widget::before { content: none; }
.aiw-head, .ai-top { border-bottom: 1px solid var(--border); background: var(--base); }
.aiw-acts .btn[aria-pressed="true"] { box-shadow: var(--sunk-sm); background: var(--base); }
.ai-widget .ai-side, .sheet2.center.ai .ai-side { background: var(--base); }
.sheet2.center.ai .ai-main { border: 0; box-shadow: var(--sunk); }
.ai-msgs .msg.ai { border: 0; }
.ai-a { border: 0; }
.ai-u { background: var(--teal); color: var(--on-teal); border: 0; box-shadow: none; }
.ai-u.editing { background: var(--base); color: var(--ink); box-shadow: var(--sunk); }
.ai-uact { border: 0; background: var(--base); box-shadow: var(--flat); }
.ai-pill { background: var(--base); border: 0; box-shadow: var(--flat); }
.ai-pill:hover { border-color: transparent; box-shadow: var(--flat-hi); }
.ai-pill:active { box-shadow: var(--press); transform: translateY(1px); }
.ai-meterchip { border: 0; box-shadow: var(--flat); }
.ai-meterchip:hover { box-shadow: var(--flat-hi); }
.ai-chips .chip { border: 0; box-shadow: var(--flat); background: var(--base); }
.ai-chips .chip:hover { background: var(--base); box-shadow: var(--flat-hi); }
.ai-chips .chip:active { box-shadow: var(--press); }
.ai-opt { background: var(--base); border: 0; box-shadow: var(--flat); }
.ai-opt:not([disabled]):hover { background: var(--base); border-color: transparent; box-shadow: var(--flat-hi); }
.ai-opt.right { background: color-mix(in srgb, var(--green2) 16%, var(--base)); box-shadow: var(--sunk-sm); }
.ai-opt.wrong { background: color-mix(in srgb, var(--rose, #E5484D) 14%, var(--base)); box-shadow: var(--sunk-sm); }
.ai-hint, .ai-analysis, .ai-limit, .ai-urow, .ai-err { border: 0; box-shadow: none; }
.ai-urow .bar, .ai-qh .bar, .ai-quiz > .bar { background: var(--base-2); box-shadow: inset 2px 2px 4px var(--sd-in), inset -2px -2px 4px var(--sl-in); }
.ai-layer { background: color-mix(in srgb, var(--base) 55%, transparent); }
.ai-layerin { border: 0; border-radius: 24px 24px 0 0; }
.ai-layer.pop .ai-layerin { border: 0; background: var(--base); box-shadow: var(--raised), 0 30px 60px -24px var(--sd); }
.ai-layer.pop .ai-layerin::before { border: 0; background: var(--base); }
.ai-sug .ic, .ai-thread .ic, .ai-prompt .ic, .ai-signin .ic, .ai-empty .big-ic { box-shadow: none; }
.ai-empty .big-ic { box-shadow: 0 16px 30px -14px color-mix(in srgb, var(--violet) 60%, transparent); }
.ai-tag { border: 0; box-shadow: var(--sunk-sm); }
.ai-newbtn { box-shadow: var(--teal-raised); }
.orb-dock .sep { background: var(--border2); }
.orb-dock button:active { box-shadow: var(--sunk-sm); }
.ai-hero { box-shadow: none; }
.sheet2.ai .ai-main { box-shadow: none; }

/* ── Reading, quiz, cards, modes ───────────────────────────────────── */
.app-main .q .opt { background: var(--base); border-color: transparent; box-shadow: var(--flat); }
.app-main .q .opt:active { transform: translateY(1px); box-shadow: var(--press); }
@media (hover: hover) and (pointer: fine) { .app-main .q .opt:not([disabled]):hover { border-color: transparent; box-shadow: var(--flat-hi); transform: translateY(-1px); } }
.app-main .q .opt.right { border-color: transparent; background: color-mix(in srgb, var(--green) 14%, var(--base)); box-shadow: var(--sunk-sm); }
.app-main .q .opt.wrong { border-color: transparent; background: color-mix(in srgb, var(--rose) 14%, var(--base)); box-shadow: var(--sunk-sm); }
.app-main .q .opt.right::before { content: none; }
.app-main .adddoc { border: 2px dashed var(--border2); box-shadow: none; }
.app-main .remember, .pillar, .compare > div, .eq .part, .mdb code, .cc-card .cert-id, .access-note, .firstup { background: var(--base); border-color: transparent; box-shadow: none; }
.pillar { border-top: 4px solid var(--teal); }
.eq .part.res { color: var(--teal-ink); }
.flash .face { border: 0; }
.flash-stack .fs { border: 0; }
.done-card .big-ic, .empty2 .big-ic, .translating .big-ic, .build-card .big-ic, .plans-hero .big-ic, .cc-card .medallion, .pr-go, .lab-strip .ic, .lab-card .ic, .setrow > .ic, .chal-head .ic, .chal-row .tile, .wd i, .ic.teal, .ic.violet, .ic.amber, .ic.gold, .ic.green, .action .ic, .cert .ic, .prow.lesson .ln { box-shadow: none; }
.wd i { border: 0; background: var(--base-2); }
.wd.today i { box-shadow: var(--ring); }
.lab-strip .go { background: var(--teal); color: var(--on-teal); box-shadow: var(--teal-raised); }
.bar, .thin, .mp-line { background: var(--base-2); box-shadow: inset 2px 2px 4px var(--sd-in), inset -2px -2px 4px var(--sl-in); }
.ring .bg, .lvl-ring .bg, .pring .bg, .sring .bg, .lvl-ring2 .bg, .goal .track { stroke: var(--sd); }
.play-big { background: var(--teal); color: var(--on-teal); box-shadow: var(--teal-raised); }
.play-big:active { box-shadow: var(--teal-press); }
.mp-play { box-shadow: var(--flat); }
.mp-play:active { box-shadow: var(--press); }
.mp-cover .cover { box-shadow: 0 6px 12px -6px rgba(13, 19, 33, 0.6); }
.lib-bar { background: var(--base); border-bottom: 0; box-shadow: 0 12px 18px -16px var(--sd); }
.lib-bar .chip { background: var(--base); border-color: transparent; box-shadow: var(--flat); }
.lib-bar .chip[aria-pressed="true"] { background: var(--base); color: var(--teal-ink); box-shadow: var(--sunk-sm); }
.vl-chapters button { transition: box-shadow var(--press-ms) ease, transform var(--press-ms) ease, background 140ms ease; }
.vl-chapters button:active { transform: translateY(1px); box-shadow: var(--sunk-sm); }
.app-main .cert, .app-main .cert-card, .app-main .chal, .app-main .chal.all { box-shadow: none; }
.chal-cel { background: var(--base); }
.onb-cta { background: linear-gradient(to top, var(--base) 72%, transparent); }
.onb-cta .btn[disabled], .dna-save .btn[disabled], .ps-in .btn-lg[disabled] { background: var(--base); color: var(--muted); box-shadow: var(--sunk-sm); }
.onb-list .n { background: var(--base-2); border: 0; box-shadow: none; }
.onb-list li.done .n { background: var(--teal); box-shadow: none; }
.onb-list li.on .n { box-shadow: var(--sunk-sm), 0 0 0 4px var(--teal-soft); color: var(--teal-ink); }
.dot { background: var(--sd); }
.dot.past { background: var(--teal-ink); }

/* ── The corporate console ─────────────────────────────────────────── */
.cs-side, .cs-top { background: var(--base); }
.cs-top { box-shadow: 0 12px 18px -16px var(--sd); border-bottom: 0; }
.corp-sheet .sh-scrim { background: rgba(8, 13, 23, 0.55); }

/* ── Teal as text ──────────────────────────────────────────────────── */
.sec-title a, .mode-card .go, .reco .book .why, .stat3 .xpc .i, .rule-line .tn.xpc .i, .meta-line .i, .reader .rd-k, .quiz .qn, .res .fn, .mode-page .mh .mode-h1, .ph-main .rd-k, .id-text .lvl, .plans-page .lrow[aria-pressed="true"] .name, .app-main .rule-links .rl-k .i, .app-main .rule-links .rl-n.on, .app-main .rule-links .rl-idx, .app-main .citem .bm em, .lnote.pend .i, .plan2 .perks li .i, .plans-page .lrow .perks li .i, .pp-perks li .i, .pp-badge, .tick, .blank, .seg.bill .save, .cel-num, .done-card .big-ic, .empty2 .big-ic, .chal-head .ic, .chal-row .tile, .pr-go, .settings .setrow > .ic, .rate .good, .result.pass .score, .firstup .ic { color: var(--teal-ink); }

/* ── Reduced motion: keep the shadows, drop the travel ─────────────── */
@media (prefers-reduced-motion: reduce) {
  .wr-feat:hover, .lp-card:hover, .lg-card:hover, a.pb:hover, .md-card:hover, .up-next:hover, .prow:hover, .bw:hover, .bk-ai:hover, .pf-acc a:hover, .lb-cat:hover, .action:hover, .ai-prompt:hover, .ai-sug:hover, .ai-thread:hover, .bt-tile:hover, .bc-card:hover, .bk-secs li a:hover, .cx-station:hover, .cx-ftile:hover, .cx-lcard:hover, .prefs-index a:hover, .onb-shell .pickcard:hover, .app-tabs a:hover, .plan-badge:hover, .app-main .q .opt:hover { transform: none; }
}