/* Distill. Colour tokens are shared with scripts/render.py: --bg must equal the lesson video background. */
*{box-sizing:border-box}

/* Light is the base; dark applies from the system preference unless overridden, or explicitly via data-theme. */
:root{color-scheme:light;--bg:#F6F6F3;--surface:#FFFFFF;--surface-2:#EFEFEA;--surface-3:#E5E5DF;--line:#E1E1DB;--line-strong:#C9C9C2;--ink:#14161A;--muted:#585E69;--faint:#6E747E;--on-ink:#FFFFFF;--on-accent:#FFFFFF;--success:#15803D;--warning:#A35400;--danger:#B91C1C;--focus:#2D57CC;--scrim:rgb(20 22 26 / .42);--img-outline:rgb(0 0 0 / .1);--shadow:0 1px 2px rgb(20 22 26 / .05),0 6px 18px rgb(20 22 26 / .06);--shadow-lg:0 2px 6px rgb(20 22 26 / .08),0 24px 60px rgb(20 22 26 / .18);--logic:#6A3FDB;--complexity:#A35400;--strategy:#0F7A4B;--data:#0A6A9C;--algorithms:#BD2368;--databases:#2D57CC;--computers:#BF3F0E;--programming:#557A0C;--principles:#4C6582;--creational:#06726E;--structural:#7F6604;--behavioral:#9C379C}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;--bg:#0E1014;--surface:#171A20;--surface-2:#1E222A;--surface-3:#272C35;--line:#2A2F38;--line-strong:#3B414C;--ink:#F3F4F6;--muted:#A3AAB6;--faint:#8C939F;--on-ink:#0E1014;--on-accent:#0E1014;--success:#4ADE80;--warning:#FFB547;--danger:#FF8A8A;--focus:#82A6FF;--scrim:rgb(0 0 0 / .62);--img-outline:rgb(255 255 255 / .1);--shadow:0 0 0 1px rgb(255 255 255 / .02);--shadow-lg:0 24px 70px rgb(0 0 0 / .55);--tint-mix:13%;--logic:#B9A0FF;--complexity:#FFB547;--strategy:#5EDB9C;--data:#4FC8F0;--algorithms:#FF7EB6;--databases:#82A6FF;--computers:#FF8C73;--programming:#C4E35A;--principles:#A8C1DA;--creational:#04DACB;--structural:#EFD03C;--behavioral:#EA91EF}}
:root[data-theme="dark"]{color-scheme:dark;--bg:#0E1014;--surface:#171A20;--surface-2:#1E222A;--surface-3:#272C35;--line:#2A2F38;--line-strong:#3B414C;--ink:#F3F4F6;--muted:#A3AAB6;--faint:#8C939F;--on-ink:#0E1014;--on-accent:#0E1014;--success:#4ADE80;--warning:#FFB547;--danger:#FF8A8A;--focus:#82A6FF;--scrim:rgb(0 0 0 / .62);--img-outline:rgb(255 255 255 / .1);--shadow:0 0 0 1px rgb(255 255 255 / .02);--shadow-lg:0 24px 70px rgb(0 0 0 / .55);--tint-mix:13%;--logic:#B9A0FF;--complexity:#FFB547;--strategy:#5EDB9C;--data:#4FC8F0;--algorithms:#FF7EB6;--databases:#82A6FF;--computers:#FF8C73;--programming:#C4E35A;--principles:#A8C1DA;--creational:#04DACB;--structural:#EFD03C;--behavioral:#EA91EF}
:root{--b-logic:#B9A0FF;--b-complexity:#FFB547;--b-strategy:#5EDB9C;--b-data:#4FC8F0;--b-algorithms:#FF7EB6;--b-databases:#82A6FF;--b-computers:#FF8C73;--b-programming:#C4E35A;--b-principles:#A8C1DA;--b-creational:#04DACB;--b-structural:#EFD03C;--b-behavioral:#EA91EF;--tint-mix:24%;--bright:var(--ink);--accent:var(--ink);--accent-soft:var(--surface-2);--accent-line:var(--line-strong);--top:calc(56px + env(safe-area-inset-top));--nav:calc(60px + env(safe-area-inset-bottom));--ease:cubic-bezier(.2,0,0,1);--drawer:cubic-bezier(.32,.72,0,1);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* Each area keeps one identity colour across reels, Explore, checks and the lesson video. */
[data-topic="logic"]{--accent:var(--logic);--bright:var(--b-logic)}
[data-topic="complexity"]{--accent:var(--complexity);--bright:var(--b-complexity)}
[data-topic="strategy"]{--accent:var(--strategy);--bright:var(--b-strategy)}
[data-topic="data"]{--accent:var(--data);--bright:var(--b-data)}
[data-topic="algorithms"]{--accent:var(--algorithms);--bright:var(--b-algorithms)}
[data-topic="databases"]{--accent:var(--databases);--bright:var(--b-databases)}
[data-topic="computers"]{--accent:var(--computers);--bright:var(--b-computers)}
[data-topic="programming"]{--accent:var(--programming);--bright:var(--b-programming)}
[data-topic="principles"]{--accent:var(--principles);--bright:var(--b-principles)}
[data-topic="creational"]{--accent:var(--creational);--bright:var(--b-creational)}
[data-topic="structural"]{--accent:var(--structural);--bright:var(--b-structural)}
[data-topic="behavioral"]{--accent:var(--behavioral);--bright:var(--b-behavioral)}
/* Later books reuse the palette; areas within one book stay distinct (shared with scripts/diagrams.py). */
[data-topic="risks"]{--accent:var(--computers);--bright:var(--b-computers)}
[data-topic="teams"]{--accent:var(--databases);--bright:var(--b-databases)}
[data-topic="vision"]{--accent:var(--logic);--bright:var(--b-logic)}
[data-topic="discovery"]{--accent:var(--creational);--bright:var(--b-creational)}
[data-topic="build"]{--accent:var(--structural);--bright:var(--b-structural)}
[data-topic="habits"]{--accent:var(--strategy);--bright:var(--b-strategy)}
[data-topic="judgement"]{--accent:var(--data);--bright:var(--b-data)}
[data-topic="creativity"]{--accent:var(--algorithms);--bright:var(--b-algorithms)}
[data-topic="internet"]{--accent:var(--creational);--bright:var(--b-creational)}
[data-topic="teamlaws"]{--accent:var(--complexity);--bright:var(--b-complexity)}
[data-topic="scaling"]{--accent:var(--algorithms);--bright:var(--b-algorithms)}
[data-topic="distdata"]{--accent:var(--data);--bright:var(--b-data)}
[data-topic="flow"]{--accent:var(--strategy);--bright:var(--b-strategy)}
[data-topic="resilience"]{--accent:var(--computers);--bright:var(--b-computers)}
[data-topic="shipping"]{--accent:var(--creational);--bright:var(--b-creational)}
[data-topic="migrations"]{--accent:var(--logic);--bright:var(--b-logic)}
[data-topic="syslaws"]{--accent:var(--behavioral);--bright:var(--b-behavioral)}
[data-topic="crypto"]{--accent:var(--principles);--bright:var(--b-principles)}
[data-topic="threats"]{--accent:var(--computers);--bright:var(--b-computers)}
[data-topic="identity"]{--accent:var(--structural);--bright:var(--b-structural)}
[data-topic="llmsec"]{--accent:var(--behavioral);--bright:var(--b-behavioral)}
[data-topic="prediction"]{--accent:var(--strategy);--bright:var(--b-strategy)}
[data-topic="llms"]{--accent:var(--logic);--bright:var(--b-logic)}
[data-topic="inference"]{--accent:var(--complexity);--bright:var(--b-complexity)}
[data-topic="evals"]{--accent:var(--data);--bright:var(--b-data)}
[data-topic="agents"]{--accent:var(--creational);--bright:var(--b-creational)}
[data-topic="context"]{--accent:var(--algorithms);--bright:var(--b-algorithms)}
[data-topic="evidence"]{--accent:var(--databases);--bright:var(--b-databases)}
[data-topic="metrics"]{--accent:var(--complexity);--bright:var(--b-complexity)}
[data-topic="scope"]{--accent:var(--strategy);--bright:var(--b-strategy)}
[data-topic="choice"]{--accent:var(--behavioral);--bright:var(--b-behavioral)}
[data-topic="loops"]{--accent:var(--algorithms);--bright:var(--b-algorithms)}
[data-topic="attention"]{--accent:var(--principles);--bright:var(--b-principles)}
[data-topic="forge"]{--accent:var(--complexity);--bright:var(--b-complexity)}
[data-topic="theseus"]{--accent:var(--databases);--bright:var(--b-databases)}
[data-topic="labours"]{--accent:var(--data);--bright:var(--b-data)}
[data-topic="troy"]{--accent:var(--computers);--bright:var(--b-computers)}
[data-topic="desire"]{--accent:var(--structural);--bright:var(--b-structural)}
[data-topic="control"]{--accent:var(--principles);--bright:var(--b-principles)}
[data-topic="rehearsal"]{--accent:var(--logic);--bright:var(--b-logic)}
[data-topic="perspective"]{--accent:var(--algorithms);--bright:var(--b-algorithms)}
/* Dutch psychodiagnostics. Keep these paired with diagrams.py PSYCHOLOGY_PALETTE. */
[data-topic="psychocontext"]{--accent:var(--logic);--bright:var(--b-logic)}
[data-topic="psychodiary"]{--accent:var(--complexity);--bright:var(--b-complexity)}
[data-topic="psychofamily"]{--accent:var(--strategy);--bright:var(--b-strategy)}
[data-topic="psychocycle"]{--accent:var(--data);--bright:var(--b-data)}
[data-topic="psychohypotheses"]{--accent:var(--algorithms);--bright:var(--b-algorithms)}
[data-topic="psychodecision"]{--accent:var(--databases);--bright:var(--b-databases)}
[data-topic="psychointelligence"]{--accent:var(--computers);--bright:var(--b-computers)}
[data-topic="psychotheories"]{--accent:var(--programming);--bright:var(--b-programming)}
[data-topic="psychotesting"]{--accent:var(--principles);--bright:var(--b-principles)}
[data-topic="psychoneuro"]{--accent:var(--creational);--bright:var(--b-creational)}
[data-topic="psychodomains"]{--accent:var(--structural);--bright:var(--b-structural)}
[data-topic="psychoneurotest"]{--accent:var(--behavioral);--bright:var(--b-behavioral)}
[data-topic]{--accent-soft:color-mix(in srgb,var(--accent) 13%,var(--surface));--accent-line:color-mix(in srgb,var(--accent) 45%,var(--surface))}
/* Each domain has one colour for its glyph, chip and heading; areas keep their own accents. classics.css may refine classics. */
[data-domain="foundations"]{--domain-accent:var(--logic)}
[data-domain="craft"]{--domain-accent:var(--programming)}
[data-domain="systems"]{--domain-accent:var(--databases)}
[data-domain="security"]{--domain-accent:var(--computers)}
[data-domain="ai"]{--domain-accent:var(--creational)}
[data-domain="analytics"]{--domain-accent:var(--structural)}
[data-domain="product"]{--domain-accent:var(--algorithms)}
[data-domain="mind"]{--domain-accent:var(--strategy)}
[data-domain="classics"]{--domain-accent:var(--complexity)}

html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);overscroll-behavior:none}
body{overflow:hidden;font-size:15px;line-height:1.5}
button,input{font:inherit;color:inherit}
button,a,label{-webkit-tap-highlight-color:transparent}
button{cursor:pointer;border:0;background:transparent;padding:0;transition-property:transform,opacity,background-color,border-color,color;transition-duration:130ms;transition-timing-function:var(--ease)}
button:active:not(:disabled){transform:scale(.96)}
button:disabled{opacity:.45;cursor:default}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
:focus:not(:focus-visible){outline:none}
a{color:inherit;text-underline-offset:3px}
/* Interface icons. Drawings made by modules (explorable stages, the sky map, constellations) keep their own SVG attributes. */
svg:where(:not(.play-stage svg,.map-host svg,.picture-sky svg)){width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
h1,h2,h3,p{margin-top:0}
h1{font-size:32px;line-height:1.1;letter-spacing:-.8px;font-weight:720;text-wrap:balance}
h2{font-size:22px;line-height:1.25;letter-spacing:-.4px;font-weight:680;text-wrap:balance}
h3{font-size:16px;line-height:1.35;letter-spacing:-.1px;font-weight:650}
p{color:var(--muted);text-wrap:pretty}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.skip-link{position:fixed;left:12px;top:calc(8px + env(safe-area-inset-top));z-index:50;padding:10px 14px;border-radius:10px;background:var(--ink);color:var(--on-ink);font-weight:650;transform:translateY(-200%)}
.skip-link:focus{transform:none}
.eyebrow{display:block;font-size:11px;font-weight:680;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.subtle{font-size:12px!important;line-height:1.5;color:var(--muted)}

/* App frame */
.app-shell{width:100%;max-width:480px;height:100dvh;margin:auto;position:relative;display:flex;flex-direction:column;background:var(--bg)}
.topbar{position:absolute;inset:0 0 auto;height:var(--top);padding:env(safe-area-inset-top) max(12px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));display:flex;align-items:center;gap:10px;z-index:6;pointer-events:none;background:linear-gradient(color-mix(in srgb,var(--bg) 94%,transparent) 55%,transparent)}
.topbar>*{pointer-events:auto}
.brand{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:28px;font-weight:700;letter-spacing:-1.4px;text-decoration:none;line-height:1;padding:4px 2px 8px;border-radius:8px}
.theme-toggle{display:grid;place-items:center;width:44px;height:44px;margin-left:auto;flex-shrink:0;border-radius:50%}
.theme-toggle svg{width:22px;height:22px}
.app-shell:not([data-view="feed"]) .topbar{background:var(--bg);box-shadow:inset 0 -1px 0 var(--line)}
main{flex:1;min-height:0;position:relative}
main:focus{outline:none}
.view{display:none;height:100%}
.view.active{display:block}

/* Reels. The feed has no header: each item starts under the status bar. Pictures and explorables are one column (a
   kicker line and the title, the content, one row of actions). A card story states its title on its cover and its
   actions on its last card. A video shows only the lesson until it is paused or ends (On demand, below). The lesson is
   a size container. */
#feedView{position:relative}
.feed{height:100%;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;scrollbar-width:none;overscroll-behavior:contain;touch-action:pan-y}
.feed::-webkit-scrollbar{display:none}
.feed:focus-visible{outline-offset:-3px}
.lesson{height:100%;min-height:100%;scroll-snap-align:start;scroll-snap-stop:always;position:relative;overflow:hidden;overflow:clip;isolation:isolate;touch-action:pan-y;background:var(--bg);user-select:none;-webkit-user-select:none;container:reel/size}
.reel-surface{position:absolute;inset:0;display:flex;flex-direction:column;padding-top:var(--top);overflow:hidden;overflow:clip;transform:translate3d(var(--drag-x,0px),0,0) rotate(var(--drag-rotate,0deg));transition:transform 280ms var(--drawer);transform-origin:50% 75%}
.is-dragging .reel-surface{transition:none;will-change:transform}
.topic-glyph{display:grid;place-items:center;width:26px;height:26px;flex-shrink:0;border-radius:8px;background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent-line)}
.topic-glyph svg{width:16px;height:16px;stroke-width:2}
.level-meter{display:inline-flex;gap:2px}
.level-meter i{width:4px;height:11px;border-radius:2px;background:var(--line-strong)}
.level-meter i.on{background:var(--accent)}

/* The kicker (area glyph, area · layer) and the title: stated once per item, always above its content. */
.reel-head{position:relative;z-index:2;flex-shrink:0;display:grid;gap:4px;padding:2px 16px 14px}
.reel-kicker{display:flex;align-items:center;gap:6px;min-width:0;margin:0;font-size:12.5px;line-height:1.35;font-weight:600;color:var(--muted);white-space:nowrap}
.reel-kicker .topic-glyph{width:18px;height:18px;border-radius:0;background:none;box-shadow:none}
.reel-kicker .topic-glyph svg{width:17px;height:17px;stroke-width:2.1}
.reel-area{min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--ink);font-weight:620}
.reel-layer{flex-shrink:0}
.reel-title{margin:0;font-size:21px;line-height:1.2;letter-spacing:-.4px;font-weight:720;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* A video fills its reel: contained, centred and never cropped. Its background equals the page's, so the frame has no
   visible edge whatever its shape (720×616 now; 720×820 and 720×1280 before). */
.reel-media{position:relative;z-index:1;flex:1;min-height:0;container:media/size}
.lesson video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 50%;background:var(--bg);z-index:0}

/* One row of actions under a picture or an explorable. */
.lesson-actions{position:relative;z-index:2;flex-shrink:0;display:flex;align-items:center;gap:8px;padding:12px 16px 26px}
.action-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 14px;border-radius:12px;font-size:14px;font-weight:620;background:var(--surface);color:var(--ink);box-shadow:var(--shadow),inset 0 0 0 1px var(--line);white-space:nowrap;flex-shrink:0}
.action-button svg{width:19px;height:19px;stroke-width:2}
.action-button.primary-action{background:var(--accent);color:var(--on-accent);box-shadow:none}
.action-button.is-saved svg{fill:currentColor}
.action-button.icon-only{width:40px;padding:0}
.sound-toggle.is-muted .icon-on,.sound-toggle:not(.is-muted) .icon-off{display:none}
.speed-value.bump{display:inline-block;animation:bump 220ms var(--ease)}
@keyframes bump{40%{scale:1.1}}
@container reel (max-height:700px){.reel-title{font-size:19.5px}.reel-head{padding-bottom:12px}.lesson-actions{padding:10px 16px 22px}}
@container reel (max-height:540px){.reel-title{font-size:17.5px;letter-spacing:-.3px}.reel-head{gap:2px;padding-bottom:10px}.reel-kicker{font-size:12px}.lesson-actions{padding:8px 16px 23px}.action-button{height:36px}}
@container reel (max-width:360px){.lesson-actions{gap:6px}.action-button{padding:0 12px;font-size:13.5px}}

/* ===== Videos: On demand =====
   While a lesson plays, only the lesson and a thin progress line show. A tap pauses it: the area, title and scene come
   in on top, and the controls at the bottom (−10, play, +10; speed, theme, sound; the scene scrubber). Another tap plays
   on and hides them. Keyboard focus in the controls also shows them. When the lesson ends, the end card replaces them.
   Panels are solid, with a strong play button, so they read in light mode as clearly as in dark. */
:root{--panel:#FFFFFF;--ctl:rgb(20 22 26 / .08);--panel-top:0 1px 0 rgb(20 22 26 / .08),0 10px 28px rgb(20 22 26 / .08);--panel-bottom:0 -1px 0 rgb(20 22 26 / .08),0 -10px 28px rgb(20 22 26 / .08)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--panel:rgb(14 16 20 / .96);--ctl:rgb(243 244 246 / .14);--panel-top:0 1px 0 rgb(255 255 255 / .06);--panel-bottom:0 -1px 0 rgb(255 255 255 / .06)}}
:root[data-theme="dark"]{--panel:rgb(14 16 20 / .96);--ctl:rgb(243 244 246 / .14);--panel-top:0 1px 0 rgb(255 255 255 / .06);--panel-bottom:0 -1px 0 rgb(255 255 255 / .06)}
.app-shell[data-view="feed"]{--top:env(safe-area-inset-top);--edge:calc(var(--top) + min(var(--top),30px))}
/* --edge clears the status bar's soft edge: on an iPhone, Safari tints and blurs the page for about 30 points below the
   safe area (measured on a 402×874 screen: solid to 60, fading out by 100). Text starts below it; without a status bar
   (desktop) there is no edge and nothing is added. */
.app-shell[data-view="feed"] .topbar{display:none}
.is-post:not(.is-cards) .reel-surface{padding-top:calc(var(--edge,var(--top)) + 14px)}
.is-cards .deck-stage{top:calc(var(--edge,var(--top)) - var(--top))}
.is-cards .deck-progress{padding-bottom:14px}
.reel-progress{position:absolute;inset:auto 0 0;z-index:2;display:flex;gap:2px;height:3px;pointer-events:none;transition:opacity 160ms var(--ease)}
.reel-progress i,.scrub-track i{flex:1 1 0;min-width:0;overflow:hidden;background:var(--line-strong)}
.reel-progress b,.scrub-track b{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}
.lesson.controls .reel-progress,.lesson.ended .reel-progress{opacity:0}
.video-top,.video-controls{position:absolute;left:0;right:0;z-index:3;background:var(--panel);opacity:0;pointer-events:none;transition-property:opacity,translate;transition-duration:160ms;transition-timing-function:var(--ease)}
.video-top{top:0;padding:calc(var(--edge,var(--top)) + 16px) 16px 14px;box-shadow:var(--panel-top);translate:0 -6px}
.video-top .reel-head{padding:0}
.video-chapter{margin:8px 0 0;font-size:14px;line-height:1.35;font-weight:560;color:var(--muted);font-variant-numeric:tabular-nums}
.video-controls{bottom:0;padding:18px 16px 6px;box-shadow:var(--panel-bottom);translate:0 6px}
.lesson.controls .video-top{opacity:1;translate:none}
.lesson.controls .video-controls,.video-controls:focus-within{opacity:1;pointer-events:auto;translate:none}
.lesson.ended :is(.video-top,.video-controls){display:none}
.ctl-main{display:flex;justify-content:center;align-items:center;gap:36px}
.ctl-skip{width:52px;height:52px;border-radius:50%;background:var(--ctl);color:var(--ink);font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.ctl-play{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--ink);color:var(--on-ink)}
.ctl-play svg{width:30px;height:30px}
.ctl-play .icon-play{margin-left:3px}
.lesson.playing .ctl-play .icon-play,.lesson:not(.playing) .ctl-play .icon-pause{display:none}
.ctl-skip,.ctl-play,.ctl-setting,.end-link{transition:scale 120ms var(--ease)}
.ctl-skip:active,.ctl-play:active,.ctl-setting:active,.end-link:active{scale:.96}
.ctl-settings{display:flex;margin:10px -6px 0}
.ctl-setting{flex:1;display:flex;align-items:center;gap:8px;min-width:0;min-height:44px;padding:0 6px;font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap}
.ctl-setting:first-child{justify-content:flex-start}
.ctl-setting:nth-child(2){justify-content:center}
.ctl-setting:last-child{justify-content:flex-end}
.ctl-setting svg{width:20px;height:20px;flex-shrink:0;stroke-width:1.8}
.speed-value{font-weight:720}
.theme-switch .icon-dark,:root[data-theme="dark"] .theme-switch .icon-light{display:none}
:root[data-theme="dark"] .theme-switch .icon-dark{display:block}
.sound-toggle.is-muted .icon-on,.sound-toggle:not(.is-muted) .icon-off{display:none}
.scrubber{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.scrub-area{position:relative;flex:1;min-width:0;height:36px;display:flex;align-items:center;cursor:pointer;touch-action:pan-y}
.scrub-track{display:flex;gap:3px;width:100%;height:4px;pointer-events:none}
.scrub-track i{border-radius:2px}
.scrub-thumb-rail{position:absolute;left:0;top:50%;width:0;height:0;pointer-events:none}
.scrub-thumb{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--panel)}
.scrub-area input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none}
.scrub-area:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px;border-radius:6px}

/* The end of a video (and the last card of a story): the quick check first, then what comes next, then a row of links.
   The finished lesson fades back behind it; the actions sit low, within reach of the thumb. */
.end-card{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;justify-content:flex-end;padding:var(--top) 16px 16px;background:linear-gradient(to bottom,color-mix(in srgb,var(--bg) 55%,transparent),var(--bg) 40%);animation:fadeIn 240ms var(--ease)}
@keyframes fadeIn{from{opacity:0}}
.end-inner{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;width:100%;max-width:440px;margin:0 auto}
.end-kicker{display:flex;align-items:center;gap:8px;margin:0;font-size:14px;font-weight:600;color:var(--muted)}
.end-kicker svg{width:18px;height:18px;flex-shrink:0;color:var(--accent);stroke-width:2.4}
.end-title{margin:0 0 12px;font-size:24px;line-height:1.2;letter-spacing:-.5px;font-weight:740;text-wrap:balance}
.end-inner>.button{min-height:52px;border-radius:26px;font-size:16px}
.up-next{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:10px 14px 10px 10px;border-radius:18px;text-align:left;background:var(--ctl)}
.up-next-text{flex:1;min-width:0}
.up-next small{display:block;font-size:12.5px;font-weight:650;color:var(--muted)}
.up-next strong{display:block;margin-top:1px;font-size:15.5px;line-height:1.3;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.up-next .chevron{width:18px;height:18px;flex-shrink:0;color:var(--muted);stroke-width:2.2}
.countdown{position:relative;display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;color:var(--accent)}
.countdown svg:first-child{position:absolute;inset:0;width:44px;height:44px;rotate:-90deg}
.countdown>svg:last-child{width:18px;height:18px}
.countdown .track{fill:none;stroke:color-mix(in srgb,var(--accent) 25%,transparent);stroke-width:3}
.countdown .ring{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:106.8;stroke-dashoffset:106.8}
.end-card.counting .ring{animation:countdown 6s linear forwards}
.end-card.paused .ring{animation-play-state:paused}
@keyframes countdown{to{stroke-dashoffset:0}}
.end-row{display:flex;margin:0 -6px}
.end-link{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:48px;padding:0 4px;border-radius:12px;font-size:15px;font-weight:600;color:var(--ink);white-space:nowrap}
.end-link svg{width:19px;height:19px;flex-shrink:0;stroke-width:1.9}
.end-link.is-saved{color:var(--accent)}
.end-link.is-saved svg{fill:currentColor}
.kind-end .end-kicker{font-size:.875em}
.kind-end .end-row{margin-top:-2px}
.kind-end .end-link{font-size:.9375em}
@container reel (max-height:640px){
  .video-top{padding:calc(var(--edge,var(--top)) + 12px) 16px 10px}.video-chapter{margin-top:5px;font-size:13px}
  .video-controls{padding:12px 16px 4px}.ctl-main{gap:28px}.ctl-play{width:60px;height:60px}.ctl-play svg{width:26px;height:26px}.ctl-skip{width:46px;height:46px;font-size:14px}
  .ctl-settings{margin-top:4px}.ctl-setting{min-height:40px}.scrub-area{height:30px}
  .end-title{font-size:21px;margin-bottom:6px}.end-inner{gap:8px}.end-inner>.button{min-height:46px}.up-next{min-height:56px;padding-top:6px;padding-bottom:6px}.end-link{min-height:44px}
}
/* Very short reels (a 320×568 phone): tighter controls, and the video sits a little above centre while it plays too, so a
   three-line subtitle stays clear of the paused controls and pausing never moves the video. */
@container reel (max-height:540px){
  .is-video .reel-media{margin-bottom:24px}
  .video-controls{padding:8px 14px 2px}.ctl-main{gap:24px}.ctl-play{width:52px;height:52px}.ctl-play svg{width:22px;height:22px}.ctl-skip{width:40px;height:40px;font-size:13px}
  .ctl-settings{margin-top:2px}.ctl-setting{min-height:36px}.scrub-area{height:28px}
}
@container reel (max-width:360px){.ctl-setting{gap:6px;padding:0 4px;font-size:13px}.ctl-setting svg{width:18px;height:18px}.end-link{gap:6px;font-size:14px}}

/* These overlays stay absent until the pointer crosses 30% of reel width. */
.swipe-feedback{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;transition:opacity 120ms var(--ease);display:grid;place-items:center}
.swipe-feedback::before{content:"";position:absolute;inset:0;opacity:calc(.6 + var(--swipe-strength,0)*.4)}
.swipe-feedback.hard::before{background:linear-gradient(270deg,color-mix(in srgb,var(--warning) 34%,transparent),transparent 80%)}
.swipe-feedback.known::before{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 38%,transparent),transparent 80%)}
.swipe-stamp{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px 26px;background:var(--surface);color:var(--ink);border-radius:24px;box-shadow:var(--shadow-lg),inset 0 0 0 1px var(--line);transform:scale(.94) rotate(-4deg);transition:transform 180ms var(--ease);max-width:calc(100% - 48px);text-align:center}
.swipe-stamp svg{width:34px;height:34px;stroke-width:2}
.hard .swipe-stamp svg{color:var(--warning)}
.known .swipe-stamp svg{color:var(--accent)}
.swipe-stamp strong{font-size:26px;letter-spacing:-.6px;font-weight:740;white-space:nowrap}
.swipe-stamp span{font-size:13px;color:var(--muted)}
.swipe-armed.swipe-hard .swipe-feedback.hard,.swipe-armed.swipe-known .swipe-feedback.known{opacity:1}
.swipe-armed .swipe-stamp{transform:scale(1) rotate(-4deg)}
.swipe-armed.swipe-known .swipe-stamp{transform:scale(1) rotate(4deg)}

/* First-run guide */
.coach{position:absolute;left:16px;right:16px;top:calc(var(--edge,var(--top)) + 8px);z-index:7;padding:18px 18px 14px;border-radius:22px;background:var(--surface);box-shadow:var(--shadow-lg),inset 0 0 0 1px var(--line);transition-property:opacity,translate;transition-duration:200ms;transition-timing-function:var(--ease)}
.coach[hidden]{display:none}
.coach.leaving{opacity:0;translate:0 -6px}
.coach h2{font-size:17px;margin:0 0 10px}
.coach ul{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:9px}
.coach li{display:flex;align-items:center;gap:12px;font-size:14px;line-height:1.35}
.coach li b{font-weight:650}
.coach li svg{width:20px;height:20px;padding:7px;box-sizing:content-box;border-radius:10px;background:var(--surface-2);color:var(--ink)}
.coach li span{color:var(--muted)}
.coach .button{margin-top:8px}

/* Bottom navigation */
.bottom-nav{height:var(--nav);padding:4px 12px env(safe-area-inset-bottom);display:flex;justify-content:space-around;flex-shrink:0;z-index:6;background:var(--bg);box-shadow:inset 0 1px 0 var(--line)}
.bottom-nav button{position:relative;flex:1;max-width:120px;min-height:52px;color:var(--faint);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;font-weight:600;border-radius:12px}
.bottom-nav button svg{width:24px;height:24px}
.bottom-nav .selected{color:var(--ink)}
.bottom-nav .selected svg{stroke-width:2.1}
.bottom-nav .selected .nav-fill{fill:currentColor}
.nav-badge{position:absolute;top:8px;left:calc(50% + 7px);width:9px;height:9px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 2px var(--bg)}

/* Pages */
.page{padding:calc(var(--top) + 22px) 16px 40px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.page-heading{padding:0 4px;margin-bottom:20px}
.page-heading h1{margin:6px 0 8px}
.page-heading p{font-size:15px;margin:0;max-width:400px}

/* Buttons */
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 18px;border-radius:14px;font-size:15px;font-weight:640;text-decoration:none;text-align:center;line-height:1.2}
.button svg{width:19px;height:19px;stroke-width:2}
.button.block{display:flex;width:100%}
.button.primary{background:var(--ink);color:var(--on-ink)}
.button.accent{background:var(--accent);color:var(--on-accent)}
.button.secondary{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong)}
.button.ghost{min-height:44px;padding:0 12px;color:var(--ink);font-weight:600}
.button.danger{color:var(--danger)}
.stack{display:grid;gap:10px}
.icon-button{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--muted)}
.icon-button svg{width:22px;height:22px}

/* Cards */
.card{background:var(--surface);border-radius:22px;padding:18px;margin-bottom:14px;box-shadow:var(--shadow),inset 0 0 0 1px var(--line)}
.card>h3{margin-bottom:6px}
.card>p{font-size:14px}
.note{display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:18px;margin-bottom:16px;background:var(--surface-2)}
.note svg{color:var(--ink);margin-top:1px}
.note p{margin:0 0 8px;font-size:14px;color:var(--ink)}
.note .button{min-height:40px;padding:0}

/* Explore */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px}
.stat{padding:14px 12px 12px;border-radius:18px;background:var(--surface);box-shadow:var(--shadow),inset 0 0 0 1px var(--line)}
.stat strong{display:block;font-size:24px;line-height:1.1;letter-spacing:-.6px;font-weight:720;font-variant-numeric:tabular-nums}
.stat strong small{font-size:14px;font-weight:600;color:var(--muted);letter-spacing:0}
.stat span{display:block;margin-top:4px;font-size:12px;line-height:1.3;color:var(--muted)}
.stat.attention strong{color:var(--danger)}
.topic-card{padding:16px 16px 14px;border-radius:24px;margin-bottom:14px;background:var(--surface);box-shadow:var(--shadow),inset 0 0 0 1px var(--line)}
.topic-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.topic-head .topic-glyph{width:42px;height:42px;border-radius:13px}
.topic-head .topic-glyph svg{width:22px;height:22px}
.topic-head h3{margin:1px 0 2px;font-size:17px}
.topic-head p{font-size:13.5px;line-height:1.4;margin:0}
.topic-number{margin-left:auto;font-size:12px;font-weight:650;color:var(--faint);font-variant-numeric:tabular-nums}
.layer-path{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px;list-style:none;padding:0}
.layer-tile{display:flex;flex-direction:column;gap:7px;width:100%;text-align:left;border-radius:14px;padding:0 0 4px;position:relative}
.layer-thumb{position:relative;display:block;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--accent-soft);outline:1px solid var(--img-outline);outline-offset:-1px}
.layer-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.layer-thumb img.poster-crop{object-position:50% 34%;scale:1.05}
.layer-tile.is-next .layer-thumb{outline:2px solid var(--accent);outline-offset:1px}
.layer-badge{position:absolute;left:6px;bottom:6px;display:inline-flex;align-items:center;gap:3px;height:20px;padding:0 7px;border-radius:999px;font-size:11px;font-weight:680;background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgb(0 0 0 / .18)}
.layer-badge svg{width:12px;height:12px;stroke-width:2.6}
.layer-badge.checked{background:var(--success);color:var(--on-accent)}
.layer-badge.next{background:var(--accent);color:var(--on-accent)}
.layer-label{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:680;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.layer-title{font-size:13px;line-height:1.3;font-weight:600;overflow-wrap:break-word;hyphens:auto;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.topic-progress{display:flex;flex-wrap:wrap;gap:6px 12px;margin:0 0 12px;font-size:12.5px;color:var(--muted)}
.topic-progress span{display:inline-flex;align-items:center;gap:5px}
.topic-progress svg{width:14px;height:14px;stroke-width:2.2}
.topic-progress .due{color:var(--danger);font-weight:600}
.topic-actions{display:flex;gap:8px}
.topic-actions .button{flex:1;min-height:44px;font-size:14px;padding:0 12px}
.page-foot{padding:4px 4px 0}

/* Profile */
.profile-head{display:flex;align-items:center;gap:14px}
.avatar{display:grid;place-items:center;width:52px;height:52px;flex-shrink:0;border-radius:50%;font-size:21px;font-weight:700;background:var(--ink);color:var(--on-ink)}
.profile-head h2{margin:0 0 2px;font-size:20px}
.profile-head p{margin:0;font-size:14px;overflow-wrap:anywhere}
.setting{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;box-shadow:inset 0 -1px 0 var(--line)}
.setting:last-child{box-shadow:none;padding-bottom:2px}
.setting:first-of-type{padding-top:4px}
.setting-text strong{display:block;font-size:15px;font-weight:600}
.setting-text span{display:block;font-size:13px;color:var(--muted);margin-top:1px}
.setting.stacked{flex-direction:column;align-items:stretch}
.segmented{display:flex;padding:3px;gap:2px;border-radius:13px;background:var(--surface-2);border:0;margin:0;min-width:0}
.segmented legend{padding:0}
.segmented label{flex:1;position:relative;display:flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:0 10px;border-radius:10px;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;transition-property:background-color,color,box-shadow;transition-duration:130ms;transition-timing-function:var(--ease);white-space:nowrap}
.segmented label svg{width:17px;height:17px}
.segmented input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.segmented label:has(input:checked){background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgb(0 0 0 / .12),inset 0 0 0 1px var(--line)}
.segmented label:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:1px}
.switch{position:relative;width:51px;height:31px;flex-shrink:0}
.switch input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer;z-index:1}
.switch span{position:absolute;inset:0;border-radius:999px;background:var(--surface-3);box-shadow:inset 0 0 0 1px var(--line-strong);transition:background-color 160ms var(--ease)}
.switch span::after{content:"";position:absolute;top:3px;left:3px;width:25px;height:25px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgb(0 0 0 / .3);transition:translate 160ms var(--ease)}
.switch input:checked+span{background:var(--success)}
.switch input:checked+span::after{translate:20px 0}
.switch input:focus-visible+span{outline:2px solid var(--focus);outline-offset:2px}
.saved-lesson{display:flex;gap:12px;align-items:center;padding:12px 0;box-shadow:inset 0 -1px 0 var(--line)}
.saved-lesson:last-child{box-shadow:none;padding-bottom:0}
.saved-lesson .layer-thumb{width:76px;flex-shrink:0}
.saved-lesson div{min-width:0;flex:1}
.saved-lesson h3{font-size:14px;margin:0 0 3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.saved-lesson p{font-size:12.5px;margin:0}
.empty{display:flex;gap:12px;align-items:center;font-size:14px;color:var(--muted);margin:4px 0 0}
.empty svg{color:var(--faint)}
.link-row{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:0;text-align:left;text-decoration:none;font-size:15px;font-weight:600;box-shadow:inset 0 -1px 0 var(--line)}
.link-row:last-child{box-shadow:none}
.link-row svg{color:var(--muted)}
.link-row .chevron{margin-left:auto;width:18px;height:18px}
.link-row.danger,.link-row.danger svg{color:var(--danger)}
.install-row{display:flex;align-items:flex-start;gap:14px}
.install-mark{display:grid;place-items:center;width:46px;height:46px;flex-shrink:0;border-radius:12px;background:var(--ink);color:var(--on-ink);font:italic 700 27px Georgia,serif}
.install-row strong{display:block;font-size:15px;margin-bottom:3px}
.install-row p{margin:0;font-size:13.5px}

/* Forms */
.auth-tabs{margin-bottom:16px}
.form-field{display:block;margin:0 0 14px;font-size:14px;font-weight:600}
.field-control{display:block;position:relative;margin-top:7px}
.form-field input{display:block;width:100%;border-radius:13px;border:0;box-shadow:inset 0 0 0 1px var(--line-strong);background:var(--bg);color:var(--ink);padding:0 14px;min-height:50px;font-size:16px;font-weight:450;transition:box-shadow 130ms var(--ease)}
.form-field input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--focus)}
.form-field input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--danger)}
.field-control input[type="password"],.field-control input.revealable{padding-right:56px}
.reveal{position:absolute;right:3px;top:3px;width:44px;height:44px;border-radius:10px;display:grid;place-items:center;color:var(--muted)}
.reveal svg{width:20px;height:20px}
.field-hint{display:block;margin-top:7px;font-size:12.5px;font-weight:450;color:var(--muted)}
.form-error{color:var(--danger);font-size:14px;font-weight:550;min-height:0;margin:0 0 12px}
.form-error:empty{display:none}
.form-foot{font-size:12.5px;color:var(--muted);margin:14px 0 0}

/* Loading and error states */
.loading{height:100%;display:flex;flex-direction:column;justify-content:center;padding:40px 28px calc(40px + var(--top))}
.loading h1{margin:12px 0;font-size:36px}
.loading p{font-size:15px}
.loading .button{margin-top:10px;align-self:flex-start}
.loading-bar{display:block;width:120px;height:3px;border-radius:3px;margin-top:14px;background:linear-gradient(90deg,var(--line-strong),var(--ink),var(--line-strong));background-size:200% 100%;animation:sweep 1.2s linear infinite}
@keyframes sweep{to{background-position:-200% 0}}
.offline{color:var(--warning)}

/* Bottom sheet */
dialog{width:100%;max-width:480px;max-height:90dvh;margin:auto auto 0;border:0;border-radius:28px 28px 0 0;background:var(--surface);color:var(--ink);padding:0;overscroll-behavior:contain;box-shadow:var(--shadow-lg),inset 0 1px 0 var(--line);opacity:0;transform:translateY(18px);transition:opacity 200ms var(--ease),transform 260ms var(--drawer),display 260ms allow-discrete,overlay 260ms allow-discrete}
dialog[open]{opacity:1;transform:translateY(0)}
dialog::backdrop{background:var(--scrim);opacity:0;transition:opacity 200ms var(--ease),display 260ms allow-discrete,overlay 260ms allow-discrete}
dialog[open]::backdrop{opacity:1}
@starting-style{dialog[open]{opacity:0;transform:translateY(18px)}
dialog[open]::backdrop{opacity:0}
}
.sheet-handle{width:36px;height:5px;border-radius:5px;background:var(--line-strong);margin:8px auto 0}
.sheet-inner{padding:2px 20px calc(24px + env(safe-area-inset-bottom))}
.sheet-top{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 -20px 6px;padding:6px 10px 6px 20px;background:var(--surface)}
.sheet-top .eyebrow{display:flex;align-items:center;gap:8px}
.sheet-top .icon-button{background:var(--surface-2);width:36px;height:36px;position:relative}
.sheet-top .icon-button::after{content:"";position:absolute;inset:-4px}
.sheet-top .icon-button svg{width:18px;height:18px;stroke-width:2.2;color:var(--ink)}
#sheetContent h2{margin-bottom:8px}
#sheetContent>p{font-size:15px}
.sheet-section{margin-top:22px}
.sheet-section>h3{font-size:13px;font-weight:680;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.kicker-dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}

/* Sources and transcript */
.source-book{display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:18px;background:var(--surface-2);margin:16px 0 4px}
.book-spine{display:grid;place-items:center;width:40px;height:52px;flex-shrink:0;border-radius:4px 8px 8px 4px;background:var(--accent);color:var(--on-accent);box-shadow:inset 4px 0 0 rgb(0 0 0 / .18)}
.book-spine svg{width:20px;height:20px}
.source-book strong{display:block;font-size:15px;line-height:1.3}
.source-book p{margin:3px 0 0;font-size:13.5px}
.source-book a{display:inline-flex;align-items:center;gap:4px;margin-top:8px;font-size:14px;font-weight:600;min-height:32px}
.source-book a svg{width:15px;height:15px}
.link-list{display:grid;margin:0;padding:0;list-style:none}
.source-link{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 0;text-decoration:none;font-size:14.5px;font-weight:550;line-height:1.35;box-shadow:inset 0 -1px 0 var(--line)}
.source-link svg{width:18px;height:18px;color:var(--muted);margin-left:auto}
.source-link small{display:block;font-size:12.5px;font-weight:450;color:var(--muted);margin-top:2px}
.transcript-scene{padding:16px 0;box-shadow:inset 0 -1px 0 var(--line)}
.transcript-scene:last-of-type{box-shadow:none}
.transcript-scene h3{display:flex;gap:10px;align-items:baseline;margin:0 0 6px;font-size:16px}
.transcript-scene h3 span{font-size:12px;font-weight:650;color:var(--accent);font-variant-numeric:tabular-nums}
.transcript-scene p{margin:0;font-size:15.5px;line-height:1.65;color:var(--ink)}

/* The foundation scaffold ("A simpler way in") */
.steps{display:grid;gap:10px;margin:16px 0 20px;padding:0;list-style:none;counter-reset:step}
.steps li{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:16px;background:var(--surface-2);font-size:15px;font-weight:550;line-height:1.4;counter-increment:step}
.steps li::before{content:counter(step);display:grid;place-items:center;width:26px;height:26px;flex-shrink:0;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:13px;font-weight:700}

/* Quick check */
.quiz-progress{display:flex;gap:6px;margin:4px 0 20px}
.quiz-progress span{height:4px;flex:1;border-radius:4px;background:var(--surface-3)}
.quiz-progress span.done{background:var(--accent)}
.quiz-lesson{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:8px}
.quiz-options{display:grid;gap:10px;margin:20px 0}
.quiz-option{display:flex;gap:14px;align-items:center;width:100%;min-height:60px;padding:13px 14px;text-align:left;border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line-strong);font-size:15.5px;font-weight:520;line-height:1.4}
.quiz-option .letter{display:grid;place-items:center;width:30px;height:30px;flex-shrink:0;border-radius:50%;font-size:13px;font-weight:700;color:var(--muted);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.quiz-option.chosen{background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--accent)}
.quiz-option.chosen .letter{background:var(--accent);color:var(--on-accent);box-shadow:none}
.quiz-nav{display:flex;gap:10px}
.quiz-nav .button.primary,.quiz-nav .button.accent{flex:1}
.quiz-score{display:flex;align-items:center;gap:16px;margin:6px 0 16px}
.score-ring{--p:0;position:relative;display:grid;place-items:center;width:84px;height:84px;flex-shrink:0;border-radius:50%;background:conic-gradient(var(--ring) calc(var(--p)*1%),var(--surface-3) 0)}
.score-ring::before{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--surface)}
.score-ring strong{position:relative;font-size:26px;font-weight:740;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.score-ring strong small{font-size:15px;color:var(--muted);font-weight:600}
.score-ring.p0{--p:0}.score-ring.p33{--p:33.4}.score-ring.p67{--p:66.7}.score-ring.p100{--p:100}
.score-ring{--ring:var(--warning)}
.score-ring.p100{--ring:var(--success)}
.quiz-score h2{margin:0 0 4px}
.quiz-score p{margin:0;font-size:14px}
.feedback-item{display:flex;gap:12px;padding:16px 0;box-shadow:inset 0 1px 0 var(--line)}
.feedback-mark{display:grid;place-items:center;width:28px;height:28px;flex-shrink:0;border-radius:50%;background:color-mix(in srgb,var(--warning) 16%,var(--surface));color:var(--warning)}
.feedback-mark.right{background:color-mix(in srgb,var(--success) 16%,var(--surface));color:var(--success)}
.feedback-mark svg{width:16px;height:16px;stroke-width:2.6}
.feedback-item strong{display:block;font-size:15px;line-height:1.4;font-weight:620}
.feedback-item p{margin:6px 0 0;font-size:14px}
.answer-line{display:block;margin-top:6px;font-size:13.5px;line-height:1.4}
.answer-line b{font-weight:650}
.answer-line.correct b{color:var(--success)}
.answer-line.yours b{color:var(--warning)}

/* Toast */
#toast{position:fixed;bottom:calc(var(--nav) + 14px);left:50%;transform:translateX(-50%) translateY(8px);width:max-content;max-width:min(444px,calc(100% - 32px));display:flex;align-items:center;gap:12px;background:var(--ink);color:var(--on-ink);box-shadow:var(--shadow-lg);border-radius:14px;padding:12px 16px;font-size:14px;font-weight:560;z-index:30;opacity:0;pointer-events:none;transition-property:opacity,transform;transition-duration:160ms;transition-timing-function:var(--ease)}
#toast.visible{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.toast-link{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;min-height:32px;padding:0 4px;flex-shrink:0}

@media (min-width:700px){body{background:color-mix(in srgb,var(--bg) 92%,var(--ink))}
.app-shell{box-shadow:0 0 0 1px var(--line),var(--shadow-lg)}
dialog{margin:auto;border-radius:28px;max-height:85dvh}
.sheet-handle{display:none}
.sheet-inner{padding-top:12px}
}
@media (max-width:420px){.theme-toggle{width:40px}
.topbar{gap:8px}
}
@media (max-width:360px){.brand{font-size:25px}
.page{padding-left:12px;padding-right:12px}
.stats{gap:6px}
.stat{padding:12px 10px 10px}
.stat strong{font-size:21px}
.topic-card{padding:14px 12px 12px}
.layer-path{gap:6px}
.sheet-inner{padding-left:16px;padding-right:16px}
.sheet-top{margin:0 -16px 6px;padding-left:16px}
}
@media (hover:hover) and (pointer:fine){.button:hover,.action-button:hover{filter:brightness(.97)}
:root[data-theme="dark"] .button:hover,:root[data-theme="dark"] .action-button:hover{filter:brightness(1.12)}
.quiz-option:not(.chosen):hover{background:var(--surface-3)}
.layer-tile:hover .layer-thumb img{scale:1.04}
.layer-thumb img{transition:scale 220ms var(--ease)}
.bottom-nav button:hover{color:var(--ink)}
}
/* Theme swaps snap instead of cross-fading every surface. */
.theme-switching,.theme-switching *,.theme-switching *::before,.theme-switching *::after{transition:none!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
.reel-surface{transform:none!important}
.swipe-stamp,.swipe-armed .swipe-stamp{transform:none!important}
}
@media (prefers-contrast:more){:root{--line:var(--line-strong);--muted:var(--ink)}}
button.saved-lesson{width:100%;text-align:left;border-radius:0;min-height:68px}
.saved-lesson .chevron{width:18px;height:18px;color:var(--faint)}
.coach li div{min-width:0}
.layer-label .level-meter i{height:9px;width:3px}
.quiz-lesson .topic-glyph{width:22px;height:22px;border-radius:7px}
#sheetContent .subtle,.card .subtle{margin:14px 0 0}
.layer-thumb img[hidden]{display:none}
.explore-filter{margin:0 0 18px}
/* Several books: the filter becomes a row of chips that scrolls sideways. */
.segmented.chips{overflow-x:auto;scrollbar-width:none;justify-content:flex-start;scroll-padding:3px}
.segmented.chips::-webkit-scrollbar{display:none}
.segmented.chips label{flex:0 0 auto;padding:0 14px}
.segmented.chips.more-right{mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent)}
.segmented.chips.more-left{mask-image:linear-gradient(to left,#000 calc(100% - 40px),transparent)}
.segmented.chips.more-left.more-right{mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
.book-heading{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin:24px 4px 12px}
.book-heading h2{margin:0;font-size:19px}
.book-heading span{font-size:13px;color:var(--muted)}
.stats+.explore-filter,.note+.explore-filter{margin-top:4px}

/* ===== Mixed feed: shared post frame ===== */
[data-topic]{--spot:color-mix(in srgb,var(--bright) 55%,var(--bg));--wash:color-mix(in srgb,var(--bright) 15%,var(--bg));--tint:color-mix(in srgb,var(--bright) var(--tint-mix),var(--surface))}
.post-backdrop{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(130% 75% at 50% 30%,var(--wash),var(--bg) 72%)}

/* Illustrations: licensed line art as a mask in the theme's ink over the area's colour. */
.art{position:relative;display:grid;place-items:center;isolation:isolate}
.art .blob{position:absolute;top:50%;left:50%;translate:-50% -50%;height:96%;max-width:100%;aspect-ratio:1.08;z-index:-1;background:var(--spot);border-radius:42% 58% 63% 37%/41% 44% 56% 59%}
.blob-1 .blob{border-radius:58% 42% 38% 62%/52% 61% 39% 48%}
.blob-2 .blob{border-radius:47% 53% 51% 49%/58% 39% 61% 42%}
.lesson.is-active .art .blob{animation:breathe 9s ease-in-out infinite alternate}
@keyframes breathe{50%{border-radius:55% 45% 48% 52%/46% 56% 44% 54%;scale:1.03}}
.illo{position:relative;display:block;width:100%;height:100%}
.illo-ink{position:absolute;inset:0;background:var(--ink);-webkit-mask:var(--illo) center/contain no-repeat;mask:var(--illo) center/contain no-repeat}

/* ===== Card stories ===== */
/* The story is a full-width band in the area's tint: no outline, inset box or shadow. The band's view holds the two tap
   zones (left back, right forward); the cards sit above them, letting taps through except on their own buttons. One
   progress indicator, the stripes, follows the band. */
.deck{position:relative;z-index:1;flex:1;min-height:0;display:flex;flex-direction:column}
.deck-view{position:relative;flex:1;min-height:0;background:linear-gradient(170deg,var(--tint),var(--surface) 64%)}
.deck-view:has(>.deck-stage>.kind-cover.is-current){background:linear-gradient(170deg,color-mix(in srgb,var(--bright) calc(var(--tint-mix)*1.8),var(--surface)),var(--surface) 72%)}
.deck-view:has(>.deck-stage>.kind-recap.is-current){background:linear-gradient(170deg,color-mix(in srgb,var(--bright) calc(var(--tint-mix)*1.5),var(--surface)),var(--surface) 70%)}
.deck-stage{position:absolute;inset:0;z-index:2;pointer-events:none}
.deck-card{position:absolute;inset:0;display:flex;flex-direction:column;gap:.75em;padding:1.5em 20px;font-size:calc(16px*var(--fit,1));overflow:hidden;opacity:0;visibility:hidden;transition:opacity 220ms var(--ease),translate 280ms var(--drawer),visibility 0s linear 280ms}
.deck-card :is(button,a){pointer-events:auto}
.deck-card.is-current{opacity:1;visibility:visible;translate:none;transition-delay:0s}
.deck-card.is-next{translate:28px 0}
.deck-card.is-past{translate:-28px 0}
.deck-tap{position:absolute;top:0;bottom:0;z-index:1;cursor:pointer}
.deck-tap.prev{left:0;width:30%}
.deck-tap.next{right:0;width:70%}
.deck-tap:focus-visible{outline:2px solid var(--focus);outline-offset:-4px;border-radius:6px}
.deck-progress{display:flex;gap:4px;padding:10px 16px 0;flex-shrink:0}
.deck-progress i{flex:1;height:3px;border-radius:3px;background:color-mix(in srgb,var(--ink) 16%,transparent);transition:background-color 200ms var(--ease)}
.deck-progress i.on{background:var(--accent)}
.card-kicker{display:inline-flex;align-items:center;gap:6px;font-size:.75em;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent)}
.card-kicker svg{width:15px;height:15px;stroke-width:2.2}
.card-index{font-size:2.875em;line-height:.9;font-weight:820;letter-spacing:-2px;color:var(--accent)}
.card-title{margin:0;font-size:1.5625em;line-height:1.18;letter-spacing:-.5px;font-weight:740;text-wrap:balance}
.card-title.display{font-size:1.625em;line-height:1.14;letter-spacing:-.6px}
.card-text{margin:0;font-size:1.0625em;line-height:1.5;color:var(--ink);text-wrap:pretty}
.card-text.lead{font-size:1.1875em;line-height:1.48}
.card-art{flex:1 1 44%;min-height:6.5em;max-height:46%;margin:-6px -8px 4px}
.card-art.small{flex:1 1 30%;min-height:5em;max-height:32%}
.card-steps{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:10px;counter-reset:step}
.card-steps li{display:flex;gap:.75em;align-items:flex-start;font-size:1.03em;line-height:1.4;font-weight:560;counter-increment:step;padding:.7em .85em;border-radius:16px;background:color-mix(in srgb,var(--bright) calc(var(--tint-mix)*.7),var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bright) 35%,var(--line))}
.card-steps li::before{content:counter(step);display:grid;place-items:center;width:26px;height:26px;flex-shrink:0;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:13px;font-weight:760}
/* A card still too long at its smallest type (fitText) keeps every word and tightens its rhythm instead. */
.deck-card.is-tight{gap:.45em;padding-top:1.05em;padding-bottom:1.05em}
/* :where keeps this below the classics numerals, which hide the digits. */
:where(.deck-card.is-tight) .card-index{font-size:2em;letter-spacing:-1px}
.deck-card.is-tight .card-steps{gap:4px;margin-top:0}
.deck-card.is-tight .card-steps li{padding:.32em .6em;gap:.55em;border-radius:12px;line-height:1.32}
.deck-card.is-tight .card-steps li::before{width:22px;height:22px;font-size:12px}
.deck-card.is-tight .card-text{line-height:1.42}
.card-contrast{display:grid;gap:10px;margin-top:4px}
.card-contrast .side{padding:.85em 1em;border-radius:18px}
.card-contrast .side p{margin:6px 0 0;font-size:1.03em;line-height:1.42;color:var(--ink)}
.card-contrast .side{background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}
.card-contrast .side.is-right{background:var(--tint);box-shadow:inset 0 0 0 1.5px var(--accent)}
.card-contrast .side.is-wrong{background:var(--surface-2);box-shadow:none}
.card-contrast:not(.has-verdict) .side-label{color:var(--ink)}
.side-label{display:inline-flex;align-items:center;gap:6px;font-size:.78em;font-weight:720;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.side-label svg{width:15px;height:15px;stroke-width:2.6}
.side.is-right .side-label,.card-kicker{color:color-mix(in srgb,var(--accent) 88%,var(--ink))}
.card-myth{display:grid;gap:10px;justify-items:start}
.chip{display:inline-flex;align-items:center;gap:5px;height:2.1em;padding:0 10px 0 8px;border-radius:999px;font-size:.78em;font-weight:720;letter-spacing:.04em;text-transform:uppercase}
.chip svg{width:14px;height:14px;stroke-width:2.6}
.chip.myth{background:color-mix(in srgb,var(--warning) 14%,var(--surface));color:color-mix(in srgb,var(--warning) 86%,var(--ink))}
.chip.truth{background:var(--accent);color:var(--on-accent);margin-top:8px}
.myth-text{margin:0;font-size:1.1875em;line-height:1.4;color:var(--muted);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--warning) 70%,transparent);text-decoration-thickness:2px}
.truth-text{margin:0;font-size:1.1875em;line-height:1.45;font-weight:600;color:var(--ink)}
.card-recap{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:12px}
.card-recap li{display:flex;gap:.75em;align-items:flex-start;font-size:1.0625em;line-height:1.4;font-weight:560}
.card-recap svg{width:26px;height:26px;padding:5px;flex-shrink:0;border-radius:50%;background:var(--accent);color:var(--on-accent);stroke-width:3}
.card-actions{position:relative;display:grid;gap:8px;margin-top:6px}

/* ===== Pictures ===== */
.picture{position:relative;z-index:1;flex:1;min-height:0;margin:0 18px;display:flex;flex-direction:column;gap:.85em;font-size:calc(16px*var(--fit,1))}
.picture>:first-child{margin-top:auto}.picture>:last-child{margin-bottom:auto}
.picture-art{flex:1 1 auto;min-height:120px;max-height:66%}
.fact-chip{position:absolute;right:2%;bottom:5%;display:flex;flex-direction:column;align-items:flex-start;max-width:58%;padding:10px 14px;border-radius:18px;background:var(--surface);box-shadow:var(--shadow-lg),inset 0 0 0 1px var(--line);rotate:-2deg}
.fact-chip strong{font-size:22px;line-height:1.1;font-weight:800;letter-spacing:-.3px;color:var(--accent)}
.fact-chip span{font-size:12.5px;line-height:1.3;color:var(--muted);font-weight:560}
.picture-caption{margin:0;font-size:1.0625em;line-height:1.5;color:var(--ink);text-wrap:pretty}
.lesson.is-active .picture-art .illo{animation:float 7s ease-in-out infinite alternate}
@keyframes float{to{translate:0 -6px}}

/* Explore: formats per lesson, and the six-step speed control */
.layer-formats{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;font-size:11.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.layer-formats .fmt{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.layer-formats svg{width:12px;height:12px;stroke-width:2.2}
.speed-segmented label{padding:0 4px;font-size:13px}

@container reel (max-height:660px){.deck-card{padding:1.3em 18px}.deck-progress{padding-top:8px}}
@container reel (max-height:560px){.picture{margin:0 14px}.deck-card{padding:1.1em 16px;gap:.55em}.card-steps{gap:6px}.card-steps li{padding:.45em .7em;gap:.6em}.card-steps li::before{width:22px;height:22px;font-size:12px}.card-contrast{gap:6px}.card-contrast .side{padding:.6em .8em}.card-index{font-size:2.2em}}
@media (prefers-reduced-motion:reduce){.deck-card{translate:none!important}.end-card .countdown .track,.end-card .countdown .ring{display:none}.video-top,.video-controls{translate:none!important}}
.tile-art{position:absolute;inset:0;padding:6% 10%}
.tile-art .blob{height:88%}
.layer-thumb:has(.tile-art){background:var(--wash)}
.empty-state{display:grid;justify-items:center;gap:6px;text-align:center;margin-top:4px}
.empty-state p{margin:0;font-size:14px;color:var(--muted)}
.empty-art{width:150px;height:130px}
.loading-art{display:block;position:relative;width:180px;height:180px;margin-bottom:6px}
.loading-art::before{content:"";position:absolute;inset:6% 4%;border-radius:47% 53% 51% 49%/58% 39% 61% 42%;background:conic-gradient(from 200deg,color-mix(in srgb,var(--logic) 55%,var(--bg)),color-mix(in srgb,var(--creational) 55%,var(--bg)),color-mix(in srgb,var(--structural) 55%,var(--bg)),color-mix(in srgb,var(--behavioral) 55%,var(--bg)),color-mix(in srgb,var(--logic) 55%,var(--bg)));animation:breathe 9s ease-in-out infinite alternate}
.loading-art span{position:absolute;inset:0;background:var(--ink);-webkit-mask:url(/illustrations/app-curious.svg) center/contain no-repeat;mask:url(/illustrations/app-curious.svg) center/contain no-repeat}
.deck-card>:first-child{margin-top:auto}.deck-card>:last-child{margin-bottom:auto}

/* ===== Domains: glyphs and Explore ===== */
.domain-glyph{display:grid;place-items:center;width:40px;height:40px;flex-shrink:0;border-radius:12px;color:var(--domain-accent,var(--ink));background:color-mix(in srgb,var(--domain-accent,var(--ink)) 13%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--domain-accent,var(--ink)) 40%,var(--surface))}
.domain-glyph svg{width:21px;height:21px;stroke-width:1.9}

/* Explore: "Your feed" (what the feed plays now, with a way back to For you) */
.feed-now{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:12px 12px 12px 14px;border-radius:20px;background:var(--surface);box-shadow:var(--shadow),inset 0 0 0 1px var(--line)}
.feed-now .mix-glyph{display:grid;place-items:center;width:40px;height:40px;flex-shrink:0;border-radius:12px;background:var(--ink);color:var(--on-ink)}
.feed-now .mix-glyph svg{width:21px;height:21px}
.feed-now .topic-glyph{width:40px;height:40px;border-radius:12px}
.feed-now .topic-glyph svg{width:21px;height:21px}
.feed-now-text{flex:1;min-width:0;display:grid;gap:1px}
.feed-now-text .eyebrow{margin:0 0 1px;font-size:10.5px;line-height:1.3}
.feed-now-text strong{font-size:16px;line-height:1.25;font-weight:680;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feed-now-text span{font-size:13px;line-height:1.35;color:var(--muted)}
.feed-for-you{min-height:40px;padding:0 12px;font-size:14px;flex-shrink:0;gap:6px}
.feed-for-you svg{width:17px;height:17px}
/* On a narrow phone the title keeps the full width and For you moves under it. */
@media (max-width:374px){.feed-now{flex-wrap:wrap;row-gap:10px}.feed-now-text{flex-basis:calc(100% - 52px)}.feed-now-text strong{white-space:normal}.feed-for-you{margin-left:52px;min-height:36px}}

/* Explore: the sky map entry, domain chips and domain sections */
:root{--night:#1B2236}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--night:#141B2E}}
:root[data-theme="dark"]{--night:#141B2E}
.map-entry{display:flex;align-items:center;gap:14px;width:100%;margin:0 0 16px;padding:12px 14px 12px 12px;border-radius:22px;text-align:left;background:linear-gradient(115deg,color-mix(in srgb,var(--b-databases) 14%,var(--surface)),var(--surface) 62%);box-shadow:var(--shadow),inset 0 0 0 1px var(--line)}
.map-entry-art{display:block;flex-shrink:0;width:104px;height:64px;border-radius:15px;background:radial-gradient(120% 120% at 30% 20%,color-mix(in srgb,var(--night) 80%,#4b5b9c),var(--night));box-shadow:inset 0 0 0 1px rgb(255 255 255 / .08);overflow:hidden}
.star-art{display:block;width:100%;height:100%;padding:4px}
.star-art .star-lines{fill:none;stroke:rgb(255 255 255 / .34);stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.star-art .star{stroke:none}
.star-art .s1{fill:var(--b-logic)}.star-art .s2{fill:var(--b-creational)}.star-art .s3{fill:var(--b-structural)}.star-art .s4{fill:#FFFFFF}.star-art .s5{fill:var(--b-algorithms)}.star-art .s6{fill:var(--b-strategy)}.star-art .s7{fill:var(--b-complexity)}
.star-art .dust{fill:rgb(255 255 255 / .55);stroke:none}
.map-entry-text{flex:1;min-width:0;display:grid;gap:2px}
.map-entry-text strong{font-size:16.5px;line-height:1.25;font-weight:700;letter-spacing:-.2px}
.map-entry-text span{font-size:13.5px;line-height:1.38;color:var(--muted)}
.map-entry .chevron{width:18px;height:18px;color:var(--faint);stroke-width:2.2}
@media (max-width:360px){.map-entry{gap:12px;padding:10px 12px 10px 10px}.map-entry-art{width:76px;height:52px;border-radius:13px}.map-entry-text span{font-size:13px}}
@media (hover:hover) and (pointer:fine){.map-entry:hover{background:linear-gradient(115deg,color-mix(in srgb,var(--b-databases) 20%,var(--surface)),var(--surface) 66%)}}
.chip-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--domain-accent)}
/* Off-screen domains skip layout and paint until they near the viewport (Explore holds every area and lesson). */
.domain-section{scroll-margin-top:calc(var(--top) + 8px);content-visibility:auto;contain-intrinsic-size:auto 1800px}
.domain-heading{display:flex;align-items:flex-start;gap:12px;margin:26px 4px 12px}
.explore-filter+.domain-section .domain-heading{margin-top:6px}
.domain-heading .domain-glyph{width:38px;height:38px;border-radius:12px;margin-top:1px}
.domain-heading-text{min-width:0}
.domain-heading h2{margin:0;font-size:19px;line-height:1.25}
.domain-heading p{margin:2px 0 0;font-size:13.5px;line-height:1.4}
.domain-heading-text{flex:1}
.domain-meta-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px}
.domain-meta{font-size:12px;font-weight:620;color:var(--muted);font-variant-numeric:tabular-nums}
/* Plays the whole domain, its areas mixed. A 44 px hit area around a quiet pill. */
.domain-play{position:relative;display:inline-flex;align-items:center;gap:5px;flex-shrink:0;min-height:32px;padding:0 12px 0 10px;border-radius:999px;font-size:13px;font-weight:650;color:var(--ink);background:color-mix(in srgb,var(--domain-accent,var(--ink)) 12%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--domain-accent,var(--ink)) 38%,var(--surface))}
.domain-play::after{content:"";position:absolute;inset:-6px -2px}
.domain-play svg{width:13px;height:13px;color:var(--domain-accent,var(--ink))}

/* The sky map: a full-screen layer above the app. map.css styles what map.js draws inside .map-host. */
dialog.map-dialog{position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border-radius:0;background:var(--bg);color:var(--ink);box-shadow:none;transform:none;overflow:hidden;transition:opacity 220ms var(--ease),display 220ms allow-discrete,overlay 220ms allow-discrete}
dialog.map-dialog::backdrop{background:var(--bg)}
@starting-style{dialog.map-dialog[open]{opacity:0;transform:none}}
.map-host{position:absolute;inset:0}
.map-status{position:absolute;inset:0;z-index:3;display:grid;place-items:center;padding:calc(24px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));background:var(--bg);overflow:auto}
.map-status[hidden]{display:none}
.map-loading{display:grid;justify-items:center;gap:14px;text-align:center}
.map-loading p{margin:0;font-size:15px;font-weight:600;color:var(--ink)}
.map-loading .loading-bar{margin:0}
.map-fallback{width:100%;max-width:360px;display:grid;gap:10px}
.map-fallback .star-art{width:150px;height:92px;padding:10px;border-radius:22px;background:radial-gradient(120% 120% at 30% 20%,color-mix(in srgb,var(--night) 80%,#4b5b9c),var(--night));margin-bottom:6px}
.map-fallback h2{margin:0}
.map-fallback p{margin:0;font-size:15px}
.map-fallback .button{margin-top:10px}

/* ===== Explorables (play posts) ===== */
.play{position:relative;z-index:1;flex:1;min-height:0;margin:0 14px;display:flex;flex-direction:column;gap:10px}
.play-prompt{margin:0;padding:0 2px;font-size:14.5px;line-height:1.42;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.play-stage{position:relative;flex:1;min-height:150px;border-radius:26px;overflow:hidden;overflow:clip;background:var(--surface);box-shadow:var(--shadow),inset 0 0 0 1px color-mix(in srgb,var(--bright) 30%,var(--line));user-select:none;-webkit-user-select:none}
.play-stage:not(:has(>.pl-root)):focus-within{box-shadow:var(--shadow),inset 0 0 0 1.5px var(--accent)}
/* The play kit draws its own card (.pl-root, public/play/play.css); the stage then steps back. */
.play-stage:has(>.pl-root){background:none;box-shadow:none;overflow:visible}
.play-status{position:absolute;inset:0;display:grid;place-items:center}
.play-status>*{grid-area:1/1}
.play-glyph{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;color:var(--accent);background:var(--accent-soft);opacity:.7}
.play-glyph svg{width:26px;height:26px}
.play-spinner{display:none;width:26px;height:26px;border-radius:50%;border:2.5px solid color-mix(in srgb,var(--accent) 22%,transparent);border-top-color:var(--accent);animation:spin 900ms linear infinite}
.play-loading .play-spinner{display:block}
.play-loading .play-glyph{display:none}
@keyframes spin{to{rotate:1turn}}
.play-foot{display:flex;align-items:center;gap:12px;min-height:46px;padding:0 2px}
.play-takeaway{flex:1;min-width:0;margin:0;display:flex;align-items:flex-start;gap:8px;font-size:14px;line-height:1.38;font-weight:600;color:var(--ink);opacity:0;translate:0 4px;transition:opacity 280ms var(--ease),translate 280ms var(--ease)}
.play-takeaway svg{width:18px;height:18px;margin-top:1px;color:var(--accent);stroke-width:2.2}
.play-tried .play-takeaway{opacity:1;translate:none}
.play-reset{min-height:40px;padding:0 14px;font-size:14px;margin-left:auto;flex-shrink:0}
.play-fallback{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;padding:20px;text-align:center}
.play-fallback p{margin:0;font-size:14.5px;max-width:280px}
.play-fallback strong{color:var(--ink)}
.play-fallback svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
@container reel (max-height:660px){.play{gap:8px}.play-prompt{font-size:13.5px;-webkit-line-clamp:2}.play-foot{min-height:42px}.play-takeaway{font-size:13px}}
@container reel (max-height:560px){.play{margin:0 10px;gap:6px}.play-stage{min-height:130px;border-radius:20px}.play-reset{min-height:36px;padding:0 12px;font-size:13px}.play-takeaway{-webkit-line-clamp:2}}

/* ===== Connections ===== */
.connection-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.connection{display:flex;align-items:center;gap:11px;padding:9px 7px 9px 10px;border-radius:16px;background:color-mix(in srgb,var(--surface-2) 80%,transparent);box-shadow:inset 0 0 0 1px var(--line)}
.connection .topic-glyph{width:34px;height:34px;border-radius:10px}
.connection .topic-glyph svg{width:18px;height:18px}
.connection-text{flex:1;min-width:0;display:grid;gap:2px}
.connection-text strong{font-size:.9375em;line-height:1.28;font-weight:650;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.connection-text small{font-size:12px;line-height:1.3;font-weight:600;color:var(--muted)}
.connection-why{font-size:.8125em;line-height:1.38;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.connection-play{display:grid;place-items:center;width:40px;height:40px;flex-shrink:0;border-radius:50%;background:var(--accent);color:var(--on-accent);position:relative}
.connection-play::after{content:"";position:absolute;inset:-4px}
.connection-play svg{width:17px;height:17px;margin-left:2px}
.connection-list.in-sheet .connection{padding:12px 8px 12px 12px;background:var(--surface-2);box-shadow:none;align-items:flex-start}
.connection-list.in-sheet .topic-glyph{margin-top:2px}
.connection-list.in-sheet .connection-text strong{font-size:15px}
.connection-list.in-sheet .connection-why{font-size:13.5px;display:block;margin-top:2px}
.connection-list.in-sheet .connection-play{align-self:center;width:44px;height:44px}
.credits ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.credits li{font-size:12.5px;line-height:1.45;color:var(--muted)}

/* ===== Constellations in pictures (drawn by living.js) ===== */
.picture-sky{position:absolute;inset:0;z-index:-2;display:flex;flex-direction:column;justify-content:center;pointer-events:none;color:var(--ink)}
.picture-sky>svg{display:block;width:100%;flex:1 1 0;min-height:0}
.picture-sky>:not(svg){flex-shrink:0}
/* With an illustration, the star pattern sits faintly on the colour shape, under the ink, like a figure on a celestial globe. */
.picture-art.has-sky .picture-sky{z-index:-1;inset:6% 10%;opacity:.6}
.picture-art.has-sky .lv-sky-label{display:none}
.picture-art.sky-only{min-height:160px}
.picture-art.sky-only .picture-sky{z-index:0}

/* Playback diagnostics overlay (?diag=1 only). */
#diag{position:fixed;left:6px;right:6px;top:calc(env(safe-area-inset-top) + 64px);z-index:9999;max-height:42vh;overflow:hidden;margin:0;padding:6px 8px;border-radius:8px;background:rgb(0 0 0 / .78);color:#9ef09e;font:10px/1.35 ui-monospace,Menlo,monospace;white-space:pre-wrap;pointer-events:none}
.diag-video{position:fixed;right:8px;bottom:96px;width:72px;height:128px;z-index:9999;border:1px solid #9ef09e;pointer-events:none}

/* The cover card states the area, layer and title once, then the art and the story's opening text. */
.kind-cover .cover-text{font-size:1.14em;line-height:1.45}
.card-head{padding:0;gap:4px}
.card-head .reel-title{font-size:calc(21px*var(--fit,1))}

/* ===== Welcome and onboarding: landing page, account, topics with search, install ===== */
/* Full screen without the header or tabs. Text starts below the status bar's soft edge (see --edge on the feed). */
.app-shell[data-view="welcome"]{--top:env(safe-area-inset-top);--edge:calc(var(--top) + min(var(--top),30px))}
.app-shell[data-view="welcome"] :is(.topbar,.bottom-nav){display:none}
#welcomeView{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;background:var(--bg);scrollbar-width:none}
#welcomeView::-webkit-scrollbar{display:none}
#welcomeView[data-step="topics"]{overflow:hidden}
.welcome-inner{min-height:100%;display:flex;flex-direction:column;padding:calc(var(--edge) + 8px) 20px calc(env(safe-area-inset-bottom) + 28px)}
.welcome-inner.narrow{max-width:440px;margin:0 auto}
.welcome-inner h1:focus{outline:none}
.welcome-top{display:flex;align-items:center;gap:6px;min-height:48px;margin:0 -8px 8px}
.welcome-back{color:var(--ink)}
.welcome-brand{padding-left:8px}
.welcome-step{margin-left:auto;padding-right:8px;font-size:13px;font-weight:600;color:var(--muted)}
.welcome-inner h1{font-size:28px;line-height:1.15;letter-spacing:-.6px;margin:8px 0 10px}
.welcome-sub{font-size:15.5px;line-height:1.5;color:var(--muted);margin:0 0 22px}
.link-button{display:inline;min-height:44px;padding:0 2px;font:inherit;font-weight:650;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.field-optional{font-weight:450;color:var(--muted)}
/* Landing. One illustration-led screen; supporting information and the guest route follow below.
   Only decorative layers move. The reveal settles within 4.4 seconds, with no endless motion or delayed controls. */
.welcome-inner.landing{padding:0 max(24px,env(safe-area-inset-left)) calc(env(safe-area-inset-bottom) + 28px)}
.welcome-fold{height:100svh;min-height:480px;display:flex;flex-direction:column;padding:calc(var(--edge) + 8px) 0 calc(env(safe-area-inset-bottom) + 24px)}
.landing .welcome-top{flex:none;margin-bottom:0}
.welcome-hero{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center}
.welcome-art{position:relative;flex:1;min-height:96px;width:calc(100% + 48px);overflow:hidden;overflow:clip;isolation:isolate;pointer-events:none}
.welcome-halo,.welcome-orbit,.welcome-ink{position:absolute;display:block}
.welcome-halo{inset:0;margin:auto;width:82%;max-height:90%;aspect-ratio:1;border-radius:47% 53% 51% 49%/58% 39% 61% 42%;background:conic-gradient(from 200deg,color-mix(in srgb,var(--logic) 46%,var(--bg)),color-mix(in srgb,var(--creational) 40%,var(--bg)),color-mix(in srgb,var(--structural) 48%,var(--bg)),color-mix(in srgb,var(--behavioral) 38%,var(--bg)),color-mix(in srgb,var(--logic) 46%,var(--bg)));animation:welcome-halo-in 4200ms var(--ease) both}
.welcome-orbit{inset:0;margin:auto;width:91%;max-height:96%;aspect-ratio:1;border:1px solid color-mix(in srgb,var(--logic) 22%,transparent);border-radius:50%;transform:rotate(-16deg) scaleY(.86);animation:welcome-orbit-in 4200ms var(--ease) both}
.welcome-orbit::before,.welcome-orbit::after{content:"";position:absolute;top:15%;left:12%;width:7px;height:7px;border-radius:50%;background:var(--logic);box-shadow:0 0 0 5px color-mix(in srgb,var(--logic) 12%,transparent)}
.welcome-orbit::after{top:auto;left:auto;right:10%;bottom:17%;width:5px;height:5px;background:var(--creational);box-shadow:0 0 0 4px color-mix(in srgb,var(--creational) 12%,transparent)}
.welcome-ink{inset:2% 5%;background:var(--ink);-webkit-mask:url(/illustrations/app-curious.svg) center/contain no-repeat;mask:url(/illustrations/app-curious.svg) center/contain no-repeat;animation:welcome-reader-in 4000ms var(--ease) both}
.welcome-satellite{position:absolute;display:grid;place-items:center;width:clamp(42px,13vw,62px);aspect-ratio:1;border-radius:28%;background:var(--surface);color:var(--ink);box-shadow:0 2px 4px rgb(0 0 0 / .04),0 12px 28px rgb(0 0 0 / .1),inset 0 0 0 1px var(--line);animation:welcome-satellite-in 4000ms var(--ease) both}
.welcome-satellite .domain-glyph{width:70%;height:70%;border-radius:24%;background:color-mix(in srgb,var(--domain-accent) 12%,var(--surface));box-shadow:none}
.welcome-satellite .domain-glyph svg{width:62%;height:62%;stroke-width:1.7}
.satellite-code{left:5%;top:31%;--tilt:-10deg;transform:rotate(var(--tilt));animation-delay:100ms}
.satellite-mind{right:7%;top:15%;--tilt:12deg;transform:rotate(var(--tilt));animation-delay:200ms}
.satellite-myth{right:5%;bottom:14%;--tilt:-8deg;transform:rotate(var(--tilt));animation-delay:300ms}
.welcome-spark{position:absolute;display:grid;place-items:center;color:var(--logic);animation:welcome-spark-in 3800ms var(--ease) both}
.spark-one{left:12%;bottom:19%;animation-delay:200ms}
.spark-two{right:14%;top:42%;color:var(--creational);animation-delay:400ms}
.spark-one svg{width:22px;height:22px;stroke-width:1.3}.spark-two svg{width:15px;height:15px;stroke-width:1.4}
.welcome-copy{flex:none;width:100%;max-width:390px;padding-top:12px;text-align:center}
.landing .welcome-hero h1{font-size:clamp(30px,8.7vw,40px);line-height:1.08;letter-spacing:-1.25px;margin:0 0 24px;font-weight:720;text-wrap:balance}
.landing .welcome-hero h1 span{display:block}
.landing .welcome-hero h1 em{font-family:Georgia,"Times New Roman",serif;font-weight:500;letter-spacing:-1.4px}
.welcome-actions{display:grid;gap:10px;width:100%}
.welcome-actions .button{min-height:52px;border-radius:26px;font-size:16px}
.welcome-actions [data-go="signup"]{background:var(--ink);color:var(--on-ink)}
.welcome-actions [data-go="signup"] svg{margin-right:-8px}
.welcome-guest{align-self:center;min-height:44px;margin-top:18px;padding:0 12px;font-size:15px;font-weight:600;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
@keyframes welcome-halo-in{from{opacity:0;transform:scale(.94) rotate(-18deg)}15%{opacity:1}55%{transform:scale(1.025) rotate(5deg)}to{opacity:1;transform:none}}
@keyframes welcome-orbit-in{from{opacity:0;transform:rotate(-40deg) scaleY(.86)}15%{opacity:1}to{opacity:1;transform:rotate(-16deg) scaleY(.86)}}
@keyframes welcome-reader-in{from{opacity:0;transform:translateY(14px) scale(.96)}15%{opacity:1;transform:none}45%{transform:translateY(-6px) rotate(-1deg)}75%{transform:translateY(3px)}to{opacity:1;transform:none}}
@keyframes welcome-satellite-in{from{opacity:0;transform:translateY(18px) rotate(0deg) scale(.9)}18%{opacity:1;transform:translateY(-4px) rotate(var(--tilt))}55%{transform:translateY(-10px) rotate(calc(var(--tilt) + 4deg))}to{opacity:1;transform:rotate(var(--tilt))}}
@keyframes welcome-spark-in{from{opacity:0;transform:scale(.9) rotate(-30deg)}25%{opacity:1;transform:scale(1.15)}to{opacity:1;transform:none}}
@media (min-width:700px){
  body:has(#welcomeView.active[data-step="landing"]){background:var(--bg)}
  .app-shell:has(#welcomeView.active[data-step="landing"]){max-width:1100px;box-shadow:none}
  .welcome-inner.landing{padding-left:48px;padding-right:48px}
  .welcome-fold{min-height:480px;padding-top:calc(var(--edge) + 24px);padding-bottom:calc(env(safe-area-inset-bottom) + 40px)}
  .welcome-hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:32px;align-items:center}
  .welcome-art{width:100%;height:min(65svh,600px);max-height:none}
  .welcome-copy{text-align:left;max-width:420px;padding:0}
  .landing .welcome-hero h1{font-size:clamp(36px,4vw,48px);line-height:1.1;letter-spacing:-1.6px;margin-bottom:32px}
  .welcome-satellite{width:62px}
}
@media (max-height:500px){.welcome-fold{min-height:0}.welcome-copy{padding-top:4px}.landing .welcome-hero h1{font-size:26px;margin-bottom:14px}.welcome-actions{gap:8px}.welcome-actions .button{min-height:48px}.welcome-satellite{width:36px}}
@media (max-height:500px) and (min-width:480px){
  body:has(#welcomeView.active[data-step="landing"]){background:var(--bg)}
  .app-shell:has(#welcomeView.active[data-step="landing"]){max-width:1100px;box-shadow:none}
  .welcome-fold{padding-top:calc(var(--edge) + 8px);padding-bottom:calc(env(safe-area-inset-bottom) + 16px)}
  .welcome-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:20px;align-items:center}
  .welcome-art{width:100%;height:min(70svh,280px)}
  .welcome-copy{padding:0}
}
@media (prefers-reduced-motion:reduce){.welcome-art *,.welcome-art *::before,.welcome-art *::after{animation:none!important}}
.welcome-how{margin-top:36px}
.welcome-how h2,.welcome-subjects h2{font-size:18px;margin:0 0 12px}
.welcome-how ol{margin:0;padding:0;list-style:none;counter-reset:how;display:grid;gap:14px}
.welcome-how li{counter-increment:how;display:grid;grid-template-columns:30px 1fr;gap:12px;font-size:15px;line-height:1.5}
.welcome-how li::before{content:counter(how);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--on-ink);font-size:14px;font-weight:720}
.welcome-subjects{margin-top:32px}
.welcome-subjects ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.welcome-subjects li{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:6px 12px 6px 6px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);font-size:14px;font-weight:600}
.welcome-subjects li>span:not(.domain-glyph){min-width:0;overflow-wrap:anywhere}
.welcome-subjects .domain-glyph{width:28px;height:28px;border-radius:50%}
.welcome-subjects .domain-glyph svg{width:16px;height:16px}
.welcome-foot{margin:28px 0 0}
/* Account step */
.welcome-form .button{margin-top:4px;min-height:52px;border-radius:26px;font-size:16px}
.welcome-form input{min-height:50px;font-size:16px}
.welcome-switch{margin:18px 0 0;font-size:15px;color:var(--muted)}
/* Topics: a fixed head with the search, a scrolling list and a bar with the choice */
.welcome-picker{display:flex;flex-direction:column;height:100%}
.picker-head{flex:none;padding:calc(var(--edge) + 8px) 20px 12px;background:var(--bg);box-shadow:0 1px 0 var(--line)}
.picker-head h1{font-size:24px;margin:2px 0 12px}
.picker-search{position:relative}
.picker-search input{display:block;width:100%;min-height:48px;padding:0 48px 0 44px;border:0;border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--ink);font:inherit;font-size:16px;-webkit-appearance:none;appearance:none}
.picker-search input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--focus)}
.picker-search input::-webkit-search-cancel-button{display:none}
.picker-search-icon{position:absolute;left:14px;top:50%;translate:0 -50%;color:var(--muted);pointer-events:none;display:grid}
.picker-search-icon svg{width:20px;height:20px}
.picker-clear{position:absolute;right:2px;top:2px;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:var(--muted)}
.picker-clear svg{width:18px;height:18px}
.picker-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 20px 24px}
.picker-scroll .welcome-sub{margin-bottom:6px}
.picker-domain{margin-top:20px}
.picker-domain-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.picker-domain-head h2{flex:1;margin:0;font-size:16px}
.picker-domain-head .domain-glyph{width:32px;height:32px;border-radius:10px}
.picker-domain-head .domain-glyph svg{width:18px;height:18px}
.picker-domain-head .link-button{font-size:14px}
.picker-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.picker-area{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:12px;border-radius:16px;text-align:left;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);transition-property:background-color,box-shadow,scale}
.picker-area:active{scale:.98}
.picker-area[aria-pressed="true"]{background:color-mix(in srgb,var(--accent) 9%,var(--surface));box-shadow:inset 0 0 0 2px var(--accent)}
.picker-area .topic-glyph{width:36px;height:36px;border-radius:11px}
.picker-area .topic-glyph svg{width:19px;height:19px}
.picker-text{flex:1;min-width:0}
.picker-text strong{display:block;font-size:15.5px;line-height:1.3;font-weight:650}
.picker-text span{display:block;margin-top:2px;font-size:13.5px;line-height:1.4;color:var(--muted)}
.picker-text .picker-match{color:var(--ink);font-weight:550}
.picker-check{display:grid;place-items:center;width:28px;height:28px;flex-shrink:0;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-strong);color:transparent}
.picker-check svg{width:16px;height:16px;stroke-width:3}
.picker-area[aria-pressed="true"] .picker-check{background:var(--accent);color:var(--on-accent);box-shadow:none}
.picker-empty{margin-top:24px;font-size:15px;color:var(--muted)}
.picker-bar{flex:none;display:flex;align-items:center;gap:12px;padding:12px 20px calc(env(safe-area-inset-bottom) + 12px);background:var(--bg);box-shadow:0 -1px 0 var(--line)}
.picker-chosen{flex:1;font-size:14px;font-weight:600;color:var(--muted)}
.picker-bar .button{min-height:50px;border-radius:25px;padding:0 22px;font-size:16px}
.picker-bar .button:disabled{opacity:.45;cursor:default}
/* Install */
.install-mark.big{width:72px;height:72px;border-radius:18px;font-size:42px;margin:12px 0 8px}
.install-mark.small{width:36px;height:36px;border-radius:10px;font-size:21px}
.install-how{margin:4px 0 22px}
.install-how .button{min-height:52px;border-radius:26px;font-size:16px}
.install-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.install-steps li{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);font-size:15px;line-height:1.45}
.install-step-icon{display:grid;place-items:center;width:40px;height:40px;flex-shrink:0;border-radius:12px;background:var(--surface-2);color:var(--ink)}
.install-step-icon svg{width:22px;height:22px}
.install-how .subtle{margin:12px 2px 0}
.install-desktop{font-size:15px;line-height:1.5;margin:0}
.card .install-how{margin:14px 0 4px}
/* Explore's install row and Profile's topics */
.install-strip{display:flex;align-items:center;gap:12px;padding:12px 6px 12px 12px;margin-bottom:14px;border-radius:18px;background:var(--surface);box-shadow:var(--shadow),inset 0 0 0 1px var(--line)}
.install-strip-text{flex:1;min-width:0;display:grid}
.install-strip-text strong{font-size:14.5px;line-height:1.3}
.install-strip-text span{font-size:13px;color:var(--muted)}
.install-strip .button{min-height:40px;padding:0 14px;font-size:14px}
.topic-chips{list-style:none;margin:6px 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.topic-chips li{display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 5px;border-radius:999px;background:var(--surface-2);font-size:13.5px;font-weight:600}
.topic-chips .topic-glyph{width:24px;height:24px;border-radius:50%}
.topic-chips .topic-glyph svg{width:14px;height:14px}
@media (max-height:620px){.picker-head h1{font-size:21px;margin-bottom:8px}.picker-head{padding-bottom:10px}}

/* Assessment completion is a static label first; its rare celebration is finite and decorative. */
:root{--checked-ink:color-mix(in srgb,var(--success) 90%,var(--ink))}
.lesson-checked{display:inline-flex;align-items:center;gap:4px;flex-shrink:0;padding:3px 7px;border-radius:999px;background:color-mix(in srgb,var(--success) 9%,var(--surface));color:var(--checked-ink);font-size:11px;line-height:1.3;font-weight:680;white-space:nowrap}
.lesson-checked svg{width:12px;height:12px;stroke-width:2.5}
.video-checked-status{position:absolute;top:calc(var(--edge) + 12px);right:18px;z-index:3;pointer-events:none}
.is-video:has(.video-checked-status [data-checked]:not([hidden])) .reel-kicker{padding-right:88px}
.is-video.ended .video-checked-status{display:none}
.action-button.is-checked{background:color-mix(in srgb,var(--success) 9%,var(--surface));color:var(--checked-ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--success) 25%,var(--line))}
.saved-lesson .layer-thumb>.lesson-checked{position:absolute;left:4px;bottom:4px;font-size:10px}
.topic-completion{display:grid;grid-template-columns:56px minmax(0,1fr);gap:14px 12px;padding:20px;margin:0 0 20px;border-radius:32px;background:linear-gradient(135deg,color-mix(in srgb,var(--success) 8%,var(--surface)),color-mix(in srgb,var(--accent,var(--focus)) 5%,var(--surface)));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--success) 25%,var(--line));overflow:hidden}
.completion-emblem{position:relative;display:grid;place-items:center;align-self:start;width:56px;height:56px;border-radius:50%;background:var(--surface);color:var(--success);box-shadow:0 2px 8px rgb(0 0 0 / .06)}
.completion-emblem>svg{width:34px;height:34px;stroke-width:2}
.completion-emblem i{position:absolute;width:5px;height:5px;border-radius:2px;background:var(--success);opacity:0;pointer-events:none}
.completion-emblem i:nth-of-type(1){top:4px;right:-3px;--burst-x:8px;--burst-y:-9px}
.completion-emblem i:nth-of-type(2){top:-3px;left:6px;--burst-x:-7px;--burst-y:-9px;background:var(--accent,var(--focus))}
.completion-emblem i:nth-of-type(3){bottom:7px;right:-3px;--burst-x:10px;--burst-y:5px}
.completion-copy{min-width:0}
.completion-copy .completion-count{margin:0 0 4px;font-size:12px;line-height:1.4;font-weight:680;color:var(--checked-ink)}
.completion-copy h2{margin:0 0 6px;font-size:23px;line-height:1.18;letter-spacing:-.4px;overflow-wrap:anywhere}
.completion-copy>p:last-child{margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
.topic-completion>.button,.topic-completion>.topic-suggestions,.topic-completion>.completion-all-done{grid-column:1/-1}
.completion-all-done{margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
.topic-completion.is-compact{grid-template-columns:40px minmax(0,1fr);padding:14px;margin:0 0 16px;border-radius:18px;gap:10px}
.is-compact .completion-emblem{width:40px;height:40px}
.is-compact .completion-emblem>svg{width:26px;height:26px}
.is-compact .completion-copy>p:last-child{font-size:13px}
.is-celebrating .completion-emblem>svg{animation:completion-check-in 300ms cubic-bezier(0.2,0,0,1) both}
.is-celebrating .completion-emblem i{animation:completion-burst 700ms cubic-bezier(0.2,0,0,1) 100ms both}
@keyframes completion-check-in{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@keyframes completion-burst{0%{opacity:0;transform:translate(0,0)}25%{opacity:1}100%{opacity:0;transform:translate(var(--burst-x),var(--burst-y)) rotate(35deg)}}
.topic-suggestions{display:grid;gap:8px;min-width:0}
.topic-suggestions h3{font-size:13px;font-weight:650;margin:0 0 2px;color:var(--muted)}
.topic-suggestion{display:flex;align-items:center;gap:10px;min-height:64px;width:100%;padding:10px;border:0;border-radius:12px;color:var(--ink);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);text-align:left;cursor:pointer;transition:transform 120ms cubic-bezier(0.2,0,0,1)}
.topic-suggestion:active{transform:scale(.96)}
.suggestion-glyph{flex-shrink:0}
.suggestion-glyph .topic-glyph{width:34px;height:34px;border-radius:10px}
.suggestion-text{display:grid;gap:3px;min-width:0;flex:1}
.suggestion-text strong{font-size:14px;font-weight:650;line-height:1.3;overflow-wrap:anywhere}
.suggestion-text small{font-size:12px;color:var(--muted)}
.topic-suggestion>.chevron{width:16px;height:16px;flex-shrink:0}
.topic-chips small{color:var(--checked-ink);font-size:11px;font-weight:650}
.feed-clear{height:100%;overflow-y:auto;overscroll-behavior:contain;padding:calc(var(--edge) + 24px) 20px 32px;max-width:520px;margin:0 auto}
.feed-terminal{height:100%;min-height:100%;scroll-snap-align:start;scroll-snap-stop:always;position:relative;overflow:hidden}
.feed-clear>.topic-completion{margin-bottom:16px}
.feed-clear>[data-feed-again]{margin-top:10px}
#topicSuccess .completion-result{margin:0 0 16px}
.feed-clear-heading>svg{width:48px;height:48px;color:var(--muted)}
.feed-clear-heading.is-complete>svg{color:var(--checked-ink)}
.feed-clear-heading h1{font-size:26px;line-height:1.2;margin:16px 0 10px}
.feed-clear-heading p{font-size:15px;line-height:1.5;color:var(--muted);margin:0 0 20px}
.feed-clear>.topic-suggestions{margin-bottom:20px}
.setting-status{min-height:20px;margin:10px 0 0}
label.setting{cursor:pointer;min-height:44px}
.switch input:disabled+span{opacity:.55}
@media (hover:hover) and (pointer:fine){.topic-suggestion:hover{box-shadow:inset 0 0 0 1px var(--line-strong)}}
@media (max-width:350px){.topic-completion{padding:16px;border-radius:28px;grid-template-columns:44px minmax(0,1fr);gap:12px 10px}.completion-emblem{width:44px;height:44px}.completion-copy h2{font-size:21px}.feed-clear{padding-left:16px;padding-right:16px}}
@media (prefers-reduced-motion:reduce){.is-celebrating .completion-emblem>svg,.is-celebrating .completion-emblem i{animation:none}.topic-suggestion{transition:none}}

/* Quick Learn uses ordinary vertical reading, never the reel's swipe preferences or auto-advance. */
#quickContent{overflow-wrap:anywhere}
#quickContent textarea{display:block;width:100%;min-height:88px;margin-top:8px;padding:12px;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface);color:var(--ink);font:inherit;font-size:16px;line-height:1.5;resize:vertical}
.quick-ask .subtle{margin-top:12px}
.quick-session-row{width:100%;display:flex;align-items:center;gap:16px;min-height:64px;padding:14px 0;text-align:left;border-bottom:1px solid var(--line)}
.quick-session-row:last-child{border-bottom:0}
.quick-session-row>span:first-child{flex:1;min-width:0;display:grid;gap:5px}
.quick-session-row strong{font-size:15px;line-height:1.4;font-weight:620}
.quick-session-row small{font-size:12px;color:var(--muted)}
.quick-session-row>span:last-child{font-size:24px;color:var(--muted)}
.quick-preparing{margin-top:16px}
.quick-preparing [data-preparing-status]{padding:14px 0;border-top:1px solid var(--line);color:var(--ink)}
.quick-reader{padding:24px 0;margin-bottom:24px;border-bottom:1px solid var(--line)}
.quick-title{font-size:27px;line-height:1.2;letter-spacing:-.5px;margin:10px 0}
.quick-steps{display:flex;gap:8px;margin:24px 0}
.quick-steps button{width:44px;height:44px;border:1px solid var(--line-strong);border-radius:50%;color:var(--muted)}
.quick-steps button[aria-current]{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.quick-reading{min-height:240px}
.quick-reading h2{margin:8px 0 18px}
.quick-reading>p{color:var(--ink);font-size:17px;line-height:1.75;white-space:pre-wrap}
#quickContent summary{min-height:44px;padding:10px 0;cursor:pointer;font-size:14px;font-weight:600}
.quick-citations{padding-left:20px;font-size:12px;color:var(--muted);line-height:1.6}
.quick-citations li+li{margin-top:10px}
.quick-reader-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:28px}
.quick-reader-nav>span{font-size:12px;color:var(--muted);white-space:nowrap}
.quick-choice-buttons{display:flex;flex-wrap:wrap;gap:10px}
.quick-choice-buttons .button{flex:1 1 150px}
.quick-check fieldset{padding:0;margin:24px 0;border:0;min-width:0}
.quick-check legend{font-weight:650;margin-bottom:12px}
.quick-check label{display:flex;align-items:flex-start;gap:10px;margin:8px 0;padding:12px;border:1px solid var(--line-strong);border-radius:12px;min-height:48px;cursor:pointer}
.quick-check label:has(input:checked){background:var(--surface-2);border-color:var(--ink)}
.quick-check input{margin-top:5px;flex-shrink:0;accent-color:var(--ink)}
.quick-feedback{padding:18px 0;border-bottom:1px solid var(--line)}
.quick-feedback p{margin-bottom:8px}
.quick-sources ol{padding-left:20px;font-size:14px}
.quick-sources li+li{margin-top:16px}
.quick-sources li p{font-size:12px;margin:6px 0 0}
.quick-delete{margin:24px 0}
.quick-delete summary{color:var(--muted)}
@media (max-width:350px){.bottom-nav button span{font-size:10px}.quick-reader-nav .button{padding-inline:12px}.quick-title{font-size:25px}}
@media (prefers-reduced-motion:reduce){.quick-session-row,.quick-steps button{transition:none}}