/* The Future Market Academy: house style. 2026-11-14: two looks, Space (default) and Nature; see the theme layer at the end. */
:root{
  /* SPACE look (default, 2026-11-14): night sky, glass, neon. NATURE look: html.nature below. Old names kept so every page follows. */
  --paper:#0b1030; --paper-2:#151d4a; --ink:#eaf2ff; --ink-2:#c8d3ee; --mute:#9fb0d0; --line:rgba(160,200,255,.22);
  --night:#070b1f; --night-2:#0e1430; --night-line:rgba(94,242,255,.12); --signal:#5ef2ff; --ball:#ffcf4a;
  --surface:#131b45; --surface-2:#1a2357; --edge:rgba(160,200,255,.4); --on-dark:#eaf2ff;
  --fill:linear-gradient(90deg,#5ef2ff,#9d7bff); --on-fill:#0b1020; --glow:0 0 22px -8px #5ef2ff; --accent2:#9d7bff;
  --pagebg:radial-gradient(900px 600px at 100% 0%,rgba(157,123,255,.18),transparent 60%),radial-gradient(700px 500px at 0% 60%,rgba(94,242,255,.08),transparent 60%);
  --stars:radial-gradient(1.5px 1.5px at 6% 12%,#fff,transparent),radial-gradient(1px 1px at 18% 38%,#cff,transparent),radial-gradient(1.5px 1.5px at 32% 8%,#fff,transparent),radial-gradient(1px 1px at 47% 30%,#fff,transparent),radial-gradient(1.5px 1.5px at 61% 14%,#bdf,transparent),radial-gradient(1px 1px at 74% 42%,#fff,transparent),radial-gradient(1.5px 1.5px at 88% 9%,#fff,transparent),radial-gradient(1px 1px at 12% 72%,#fff,transparent),radial-gradient(1px 1px at 41% 66%,#dff,transparent),radial-gradient(1.5px 1.5px at 93% 62%,#fff,transparent);
  --sans:"Avenir Next","Nunito Sans",ui-rounded,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --head:"Futura","Jost","Century Gothic","Avenir Next",ui-rounded,system-ui,sans-serif;
  --serif:"Futura","Jost","Century Gothic","Avenir Next",ui-rounded,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --wrap:1180px;
}
html.nature{
  --paper:#eefaf1; --paper-2:#dcf2e3; --ink:#12362a; --ink-2:#2e5a49; --mute:#4f7263; --line:#c3e3cc;
  --night:#0f2f24; --night-2:#16402f; --night-line:rgba(125,255,176,.12); --signal:#0fa47a; --ball:#c6f26b;
  --surface:#ffffff; --surface-2:#f4fbf6; --edge:rgba(18,54,42,.3); --on-dark:#f2fff6;
  --fill:linear-gradient(90deg,#3ee0a5,#a6e35a); --on-fill:#06261a; --glow:0 6px 18px -10px rgba(18,140,90,.7); --accent2:#8bd346;
  --pagebg:radial-gradient(700px 420px at 92% 0%,rgba(255,214,110,.45),transparent 65%),linear-gradient(180deg,#dcf6ff 0,#eefaf1 520px);
  --stars:none;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(rgba(20,18,16,.05) 1px,transparent 1px);background-size:3px 3px}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.mono,.s-label,.k-label,.meta li,.school,.price,.tag{font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em}
.serif{font-family:var(--serif);font-style:italic;font-weight:400}

/* progress + top bar */
.progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:30}
.progress i{display:block;height:100%;width:0;background:var(--signal)}
.top{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:14px 24px;
  background:var(--paper);border-bottom:1px solid var(--edge)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:900;letter-spacing:.06em;font-size:14px;font-variation-settings:"wdth" 120}
.mark{width:14px;height:14px;border:2px solid var(--edge);border-radius:50%;position:relative}
.mark:after{content:"";position:absolute;inset:3px;background:var(--signal);border-radius:50%}
.tag{font-size:10px;border:1px solid var(--edge);border-radius:999px;padding:2px 8px;font-weight:600}
.top nav{display:flex;gap:18px;align-items:center;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.top nav a{text-decoration:none}
.price{background:var(--fill);color:var(--on-fill);padding:6px 12px;border-radius:999px;font-size:11px}

/* hero */
.hero{background:var(--night);color:var(--on-dark);padding:64px 0 40px;position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--night-line) 1px,transparent 1px),linear-gradient(90deg,var(--night-line) 1px,transparent 1px);
  background-size:64px 64px;opacity:.45}
.hero .wrap{position:relative}
.school{display:inline-block;color:var(--ball);font-size:12px;border:1px solid var(--night-line);padding:5px 10px;border-radius:2px}
.hero h1{font-size:clamp(36px,6vw,76px);line-height:.98;margin:18px 0 18px;font-weight:900;letter-spacing:-.02em;font-variation-settings:"wdth" 112;max-width:980px}
.hero h1 .serif{color:var(--signal);font-weight:400}
.lede{max-width:640px;font-size:18px;color:#cfc8bc}
.meta{list-style:none;padding:0;margin:0 0 18px;display:flex;flex-wrap:wrap;gap:8px}
.meta li{font-size:11px;border:1px solid var(--night-line);padding:6px 10px;border-radius:2px;color:#d9d2c6}
.notice{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--ball);margin:0 0 18px}
.outcomes{border-top:1px solid var(--night-line);padding-top:16px;max-width:760px}
.outcomes ul{margin:8px 0 0;padding-left:18px;color:#e6dfd3}
.s-label{font-size:11px;color:var(--mute);margin-bottom:8px}
.hero .s-label{color:#9b9187}

/* simple-mode switch */
.mode{display:flex;align-items:center;gap:12px;margin-top:22px;cursor:pointer;font-size:14px;color:#e6dfd3}
.mode input{position:absolute;opacity:0}
.sw{width:46px;height:24px;border:1.5px solid var(--paper);border-radius:999px;position:relative;flex:none}
.sw:after{content:"";position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:50%;background:var(--paper);transition:transform .2s}
.mode input:checked+.sw{background:var(--signal);border-color:var(--signal)}
.mode input:checked+.sw:after{transform:translateX(22px)}
.mode input:focus-visible+.sw{outline:2px solid var(--ball);outline-offset:3px}
body.simple .detail>.facts,body.simple .detail>.content,body.simple .detail>.sources{display:none}

/* layout */
.layout{display:grid;grid-template-columns:240px 1fr;gap:48px;padding-top:40px;padding-bottom:80px}
.rail{position:sticky;top:76px;align-self:start;display:flex;flex-direction:column;gap:2px;max-height:calc(100vh - 96px);overflow:auto}
.rail a{display:flex;gap:10px;text-decoration:none;font-size:14px;padding:8px 10px;border-left:2px solid var(--line);color:var(--ink-2)}
.rail a span{font-family:var(--mono);font-size:12px;color:var(--mute);min-width:20px}
.rail a.on,.rail a:hover{border-left-color:var(--signal);background:var(--paper-2)}
.rail a.on span{color:var(--signal)}

/* lessons */
.lesson{padding:8px 0 40px;border-bottom:1px solid var(--line);margin-bottom:36px;scroll-margin-top:80px}
.l-head{display:flex;align-items:baseline;gap:16px;margin-bottom:18px}
.l-num{font-family:var(--mono);font-size:14px;color:var(--signal);border:1px solid var(--signal);padding:2px 8px;border-radius:2px}
.l-head h2{margin:0;font-size:clamp(24px,3vw,34px);line-height:1.1;font-weight:850;letter-spacing:-.01em;font-variation-settings:"wdth" 108}
.kid{background:var(--fill);color:var(--on-fill);padding:22px 24px;border-radius:4px;margin-bottom:22px;position:relative}
.kid:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--ball);border-radius:4px 0 0 4px}
.kid p{font-family:var(--serif);font-size:24px;line-height:1.3;margin:6px 0}
.k-label{font-size:11px;color:var(--ball)}
.detail>div,.detail>figure,.detail>details{margin:0 0 20px}
.facts,.content{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:18px 22px}
.facts ul,.content ul,.exercise ul{padding-left:20px}
.exercise{border:1.5px solid var(--edge);border-radius:4px;padding:18px 22px;background:var(--paper)}
.exercise .s-label{color:var(--signal)}
.sources{font-size:13px;color:var(--mute)}
.sources summary{cursor:pointer;font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;font-size:11px}
.sources a{color:var(--ink-2)}
blockquote{margin:8px 0;padding:0 0 0 14px;border-left:2px solid var(--signal);font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.4}
code{font-family:var(--mono);font-size:.9em;background:var(--paper-2);padding:1px 5px;border-radius:3px}
.tbl{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px;margin:8px 0}
th,td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
th{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;background:var(--paper-2)}

/* video frame */
.video{margin:0}
.frame{position:relative;aspect-ratio:16/9;background:var(--night);border-radius:4px;overflow:hidden;
  background-image:linear-gradient(var(--night-line) 1px,transparent 1px),linear-gradient(90deg,var(--night-line) 1px,transparent 1px);background-size:40px 40px}
.frame .c{position:absolute;width:18px;height:18px;border-color:var(--on-dark);border-style:solid;border-width:0}
.c.tl{top:14px;left:14px;border-top-width:2px;border-left-width:2px}.c.tr{top:14px;right:14px;border-top-width:2px;border-right-width:2px}
.c.bl{bottom:14px;left:14px;border-bottom-width:2px;border-left-width:2px}.c.br{bottom:14px;right:14px;border-bottom-width:2px;border-right-width:2px}
.play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border:2px solid var(--paper);border-radius:50%}
.play:after{content:"";position:absolute;left:25px;top:19px;border-style:solid;border-width:13px 0 13px 20px;border-color:transparent transparent transparent var(--paper)}
.vmeta{position:absolute;left:40px;right:40px;bottom:16px;display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:#bdb5a9;letter-spacing:.08em}
.rec{position:absolute;top:16px;left:40px;font-family:var(--mono);font-size:11px;color:var(--signal);letter-spacing:.1em}
.rec:before{content:"";display:inline-block;width:7px;height:7px;background:var(--signal);border-radius:50%;margin-right:8px;vertical-align:1px}
figcaption{padding:14px 2px 0}
figcaption blockquote{font-size:17px}

/* quiz */
.quiz{padding-left:22px}
.quiz li{margin-bottom:14px}
.quiz p{margin:0 0 6px}
.reveal{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;background:none;border:1px solid var(--edge);border-radius:999px;padding:5px 12px;cursor:pointer}
.reveal:hover{background:var(--fill);color:var(--on-fill)}
.ans{background:var(--ball);display:inline-block;padding:4px 10px;border-radius:2px;font-weight:600}

/* library */
.hero.lib{padding:88px 0 56px}
.school-row{padding:44px 0 8px;border-bottom:1px solid var(--line)}
.school-row h2{font-size:28px;margin:0 0 18px;font-weight:850;font-variation-settings:"wdth" 110}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;padding-bottom:28px}
.card{display:flex;flex-direction:column;gap:10px;border:1px solid var(--line);border-radius:4px;padding:16px;min-height:150px;text-decoration:none;background:var(--surface)}
.card h3{margin:0;font-size:17px;line-height:1.25;font-weight:750;flex:1}
.card .num,.card .lv{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.card.live{background:var(--fill);color:var(--on-fill);border-color:var(--edge)}
.card.live .lv{color:var(--ball)}
.card.live:hover{transform:translateY(-2px);box-shadow:0 8px 0 var(--signal)}
.card{transition:transform .15s,box-shadow .15s}

/* footer */
.foot{background:var(--night);color:#9b9187;padding:28px 0;font-size:13px}
.foot .mono{font-size:11px}

@media (max-width:860px){
  .layout{grid-template-columns:1fr;gap:20px}
  .rail{position:static;flex-direction:row;overflow-x:auto;max-height:none;padding-bottom:6px}
  .rail a{white-space:nowrap;border-left:0;border-bottom:2px solid var(--line)}
  .rail .s-label{display:none}
  .kid p{font-size:21px}
  .top nav a{display:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card,.sw:after{transition:none}}
.soon{padding:40px 24px 80px}
.back{font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;font-size:12px}
.card:hover{border-color:var(--edge)}
.pick-note{max-width:720px;color:var(--mute);margin:-6px 0 18px}
.card.uni{border-color:var(--edge);background:var(--paper)}
.card.uni .num{color:var(--signal)}
.card .about{margin:0;font-size:14px;color:var(--ink-2)}
.meta li a{text-decoration:none;color:var(--ball)}
/* animated lesson player */
.player .stage{position:absolute;inset:44px 40px 64px;display:flex;flex-direction:column;justify-content:center;color:var(--on-dark)}
.player .cue{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ball);min-height:18px;margin-bottom:14px}
.player .say{font-weight:850;font-size:clamp(22px,3.4vw,40px);line-height:1.12;letter-spacing:-.01em;font-variation-settings:"wdth" 110;max-width:92%}
.player .say .kicker{display:block;font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.1em;color:var(--signal);margin-bottom:10px}
.player .say.in{animation:sayIn .5s ease both}
@keyframes sayIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.player .play{z-index:3;cursor:pointer;background:var(--night)}
.player .play:hover{border-color:var(--signal)}
.player .play:hover:after{border-left-color:var(--signal)}
.player.playing .play,.player.done .play{display:none}
.player.done .play{display:block}
.player .bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--night-line)}
.player .bar i{display:block;height:100%;width:0;background:var(--signal);transition:width .2s linear}
.player .ctrls{position:absolute;top:12px;right:40px;display:none;gap:8px;z-index:4}
.player.playing .ctrls,.player.paused .ctrls,.player.done .ctrls{display:flex}
.player .ctrls button,.player .voice{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;background:none;color:var(--on-dark);border:1px solid var(--night-line);border-radius:999px;padding:4px 10px;cursor:pointer;display:flex;align-items:center;gap:6px}
.player .ctrls button:hover{border-color:var(--on-dark)}
.player .voice input{accent-color:var(--signal)}
.player.playing .stage:after{content:"";position:absolute;right:0;bottom:-30px;width:8px;height:8px;border-radius:50%;background:var(--signal);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.rec{display:none}
.video .script{margin-top:12px}
.video .script summary{cursor:pointer;font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;font-size:11px;color:var(--mute)}
@media (max-width:860px){.player .stage{inset:36px 22px 56px}.player .ctrls{right:22px}.vmeta{left:22px;right:22px}}
@media (prefers-reduced-motion:reduce){.player .say.in{animation:none}}
/* categories + filter (library) */
.row-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 18px}
.row-head h2{margin:0}
.count{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.cats{padding:44px 0 36px;border-bottom:1px solid var(--line)}
.cats h2{font-size:28px;font-weight:850;font-variation-settings:"wdth" 110}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:0;border-top:1px solid var(--edge);border-left:1px solid var(--edge)}
.cat-tile{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto 1fr auto;column-gap:10px;row-gap:6px;padding:16px;text-decoration:none;border-right:1px solid var(--edge);border-bottom:1px solid var(--edge);background:var(--surface);transition:background .15s}
.cat-tile:hover{background:var(--fill);color:var(--on-fill)}
.cat-tile:hover .cat-about{color:#cfc6b7}.cat-tile:hover .cat-count{color:var(--ball)}
.cat-n{grid-row:1/4;font-family:var(--mono);font-size:12px;color:var(--signal);padding-top:3px}
.cat-tile strong{font-size:19px;line-height:1.15;font-weight:850;font-variation-settings:"wdth" 108}
.cat-about{font-size:14px;color:var(--ink-2);line-height:1.4}
.cat-count{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.filter{position:sticky;top:55px;z-index:10;background:var(--paper);border-bottom:1px solid var(--edge);margin:0 -24px;padding:14px 24px 10px}
.search{display:flex;align-items:center;gap:12px;border:1px solid var(--edge);border-radius:4px;padding:0 0 0 12px;background:var(--surface)}
.search span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.search input{flex:1;border:0;background:none;font:inherit;font-size:16px;padding:11px 12px 11px 0;outline:none;color:var(--ink)}
.chips{display:flex;gap:6px;overflow-x:auto;padding:10px 0 2px;scrollbar-width:thin}
.chips .lab{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);align-self:center;padding:0 4px 0 8px;white-space:nowrap}
.chips .lab:first-child{padding-left:0}
.chip{white-space:nowrap;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;background:none;color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:6px 11px;cursor:pointer}
.chip i{font-style:normal;color:var(--mute);margin-left:2px}
.chip:hover{border-color:var(--edge)}
.chip.on{background:var(--fill);color:var(--on-fill);border-color:var(--edge)}
.chip.on i{color:var(--ball)}
.chip.path.on,.chip.lvl.on{background:var(--signal);border-color:var(--signal);color:var(--ink)}
.chip.path.on i{color:var(--ink)}
.result{margin:8px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);min-height:14px}
.empty{padding:48px 0;font-size:18px}
.school-row{scroll-margin-top:200px}
.card .num{display:flex;gap:6px}
@media (max-width:860px){.filter{top:49px}.cat-grid{grid-template-columns:1fr 1fr}.cat-about{display:none}}
[hidden]{display:none!important}
/* real-app screenshots inside the lesson player */
.player .shot{position:absolute;inset:0;display:none;background:#0d0c0b;overflow:hidden;z-index:1}
.player.show-shot .shot{display:block}
.player .shot img{width:100%;height:100%;object-fit:contain;display:block}
.player .shot img.in{animation:shotIn .45s ease both}
@keyframes shotIn{from{opacity:0;transform:scale(1.015)}to{opacity:1;transform:none}}
.player.show-shot .stage{inset:auto 0 4px 0;z-index:2;justify-content:flex-end;background:rgba(18,17,16,.9);padding:12px 40px 30px;border-top:1px solid var(--night-line)}
.player.show-shot .say{font-size:clamp(16px,2.1vw,22px);font-weight:700;max-width:100%}
.player.show-shot .cue{margin-bottom:6px;font-size:11px}
.player.show-shot .vmeta{z-index:3;bottom:8px}
.player.show-shot .c{z-index:3}
.player .ctrls{z-index:4}
.player.playing.show-shot .stage:after{display:none}
/* ===== look-alike app demos (virtual 960x540 screen, scaled to the player) ===== */
.player .demo{position:absolute;inset:0 0 74px 0;display:none;z-index:1;overflow:hidden;background:#0d0c0b}
.player.show-demo .demo{display:block}
.player.show-demo .stage{inset:auto 0 4px 0;z-index:2;justify-content:flex-end;background:var(--night);padding:10px 40px 28px;border-top:1px solid var(--night-line);min-height:70px}
.player.show-demo .say{font-size:clamp(15px,1.9vw,20px);font-weight:700;max-width:100%}
.player.show-demo .cue{display:none}
.player.show-demo .vmeta{z-index:3;bottom:8px}
.player.show-demo .c{z-index:3}
.player.playing.show-demo .stage:after{display:none}
.player .demo.dm-pres-on{background:#000}
.dm-scaler{position:absolute;left:0;top:0;width:960px;height:540px;transform-origin:0 0;font-family:-apple-system,"Segoe UI",system-ui,Helvetica,Arial,sans-serif;color:#222;font-size:12px;line-height:1.3}
.dm-screen{position:absolute;inset:0}
.dm-badge{position:absolute;right:8px;bottom:6px;font:600 9px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#7d7d7d;background:rgba(255,255,255,.85);padding:3px 6px;border-radius:2px;z-index:9}
.dm-ptr{position:absolute;left:0;top:0;width:18px;height:24px;margin:-2px 0 0 -3px;z-index:20;pointer-events:none;transform:translate(690px,320px);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='24' viewBox='0 0 18 24'%3E%3Cpath d='M1 1v19l5-5 3.5 7.5 3-1.4L9 13.8h7z' fill='%23111' stroke='%23fff' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat}
.dm-ptr:before{content:"";position:absolute;left:-14px;top:-14px;width:34px;height:34px;border-radius:50%;background:rgba(255,91,31,.45);transform:scale(0);opacity:0}
.dm-ptr.down:before{animation:dmClick .45s ease-out}
@keyframes dmClick{0%{transform:scale(.2);opacity:1}100%{transform:scale(1.2);opacity:0}}
.dm-ptr.drag:after{content:attr(data-label);position:absolute;left:16px;top:16px;background:#fff;border:1px solid #1f7244;color:#1f7244;font-size:11px;padding:2px 8px;white-space:nowrap;border-radius:2px;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.dm-keys{position:absolute;right:28px;top:200px;z-index:15;display:flex;align-items:center;gap:8px;opacity:0;transform:translateY(8px);transition:.2s}
.dm-keys.on{opacity:1;transform:none}
.dm-keys kbd{font:700 26px/1 -apple-system,system-ui,sans-serif;background:#fff;color:#111;border:1px solid #bbb;border-bottom-width:4px;border-radius:8px;padding:12px 16px;min-width:52px;text-align:center;box-shadow:0 6px 16px rgba(0,0,0,.35)}
.dm-keys b{color:#fff;font-size:22px;text-shadow:0 1px 4px #000}
.dm-caret{display:inline-block;width:1.5px;height:1.05em;background:#111;vertical-align:-2px;margin-left:1px;animation:dmBlink 1s steps(2) infinite}
@keyframes dmBlink{50%{opacity:0}}
/* window chrome */
.dm-win{position:absolute;inset:0;background:#fff;display:flex;flex-direction:column;overflow:hidden}
.dm-title{height:30px;flex:none;background:var(--app);color:#fff;display:flex;align-items:center;gap:12px;padding:0 10px;font-size:12px}
.dm-dots{display:flex;gap:6px}.dm-dots i{width:11px;height:11px;border-radius:50%;background:#ff5f57}.dm-dots i+i{background:#febc2e}.dm-dots i+i+i{background:#28c840}
.dm-file{font-weight:600}.dm-appn{opacity:.75}
.dm-search{margin-left:auto;background:rgba(255,255,255,.2);border-radius:4px;padding:3px 60px 3px 10px;opacity:.85}
.dm-tabs{height:28px;flex:none;display:flex;gap:2px;align-items:flex-end;padding:0 8px;background:#fff;border-bottom:1px solid #e1e1e1}
.dm-tabs span{padding:5px 11px 6px;color:#333;font-size:12px;border-bottom:3px solid transparent}
.dm-tabs span:first-child{color:var(--app);font-weight:600}
.dm-tabs span.on{color:var(--app);font-weight:600;border-bottom-color:var(--app)}
.dm-tabs span.ctx{color:var(--app)}
.dm-ribbon{height:80px;flex:none;display:flex;background:#f5f5f5;border-bottom:1px solid #d6d6d6;padding:4px 4px 0;overflow:hidden}
.dm-grp{display:flex;flex-direction:column;border-right:1px solid #dcdcdc;padding:0 6px}
.dm-btns{flex:1;display:flex;flex-wrap:wrap;align-content:flex-start;gap:2px;max-width:330px}
.dm-gl{font-size:10px;color:#777;text-align:center;padding:2px 0 3px}
.dm-btn{display:flex;align-items:center;gap:4px;padding:2px 5px;border-radius:3px;font-size:10.5px;white-space:nowrap;border:1px solid transparent;height:22px}
.dm-btn i{font-style:normal;font-weight:700;font-size:10px;color:var(--app);width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1px solid #d0d0d0;border-radius:3px;font-family:Georgia,serif}
.dm-btn.big{flex-direction:column;height:56px;justify-content:center;width:72px;white-space:normal;text-align:center;line-height:1.1;font-size:10px;gap:3px}
.dm-btn.big i{width:24px;height:24px;font-size:12px}
.dm-btn.hot{background:#cfe3f7;border-color:#7fb0e0}
.dm-btn.on{background:#dcdcdc}
.dm-swatch{width:54px;height:40px;border:1px solid #c8c8c8;display:inline-flex;align-items:flex-end;justify-content:center;font:600 13px/1 Georgia,serif;position:relative;padding-bottom:6px;margin-right:3px}
.dm-swatch i{position:absolute;left:0;right:0;top:0;height:6px}
.dm-swatch.on{outline:2px solid var(--app);outline-offset:1px}
.dm-status{height:20px;flex:none;background:#f3f3f3;border-top:1px solid #dadada;font-size:10.5px;color:#555;display:flex;align-items:center;padding:0 12px}
/* excel */
.dm-fx{height:26px;flex:none;display:flex;align-items:center;border-bottom:1px solid #d6d6d6;font-size:12px;background:#fff}
.dm-nb{width:76px;border-right:1px solid #d6d6d6;padding:0 6px;height:100%;display:flex;align-items:center}
.dm-fxl{font-style:italic;color:#777;padding:0 10px;border-right:1px solid #d6d6d6;font-family:Georgia,serif}
.dm-fxv{padding:0 10px;font-family:Menlo,Consolas,monospace;font-size:12px;white-space:nowrap}
.dm-xbody{flex:1;display:flex;min-height:0;position:relative}
.dm-gridwrap{position:relative;overflow:hidden;flex:none}
.dm-grid{border-collapse:collapse;table-layout:fixed;font-size:11.5px}
.dm-grid th{background:#f3f3f3;color:#555;font-weight:400;border:1px solid #dadada;height:20px;font-size:10.5px}
.dm-grid th.corner{width:34px}
.dm-grid tr th:first-child{width:34px;height:24px}
.dm-grid th.hl{background:#d9e8dc;color:#1f7244;font-weight:600;box-shadow:inset 0 -2px 0 #1f7244}
.dm-grid tr th.hl:first-child{box-shadow:inset -2px 0 0 #1f7244}
.dm-grid td{border:1px solid #e3e3e3;height:24px;padding:0 5px;white-space:nowrap;overflow:hidden;position:relative;background:#fff}
.dm-grid td.num{text-align:right}
.dm-grid td.b{font-weight:700}
.dm-grid td.editing{overflow:visible;z-index:2;font-family:Menlo,Consolas,monospace;font-size:11px;text-align:left}
.dm-grid td.insel{background:#e7efe9}
.dm-grid td.thead{background:#1f7244;color:#fff;font-weight:700}
.dm-grid td.band{background:#e2efe5}
.dm-grid td.st-bad{background:#ffc7ce;color:#9c0006}
.dm-grid td.st-good{background:#c6efce;color:#006100}
.dm-grid td.st-head{background:#f2f2f2;font-weight:700}
.dm-grid td.st-total{font-weight:700;border-top:2px solid #333}
.dm-grid td.st-dupe{background:#fff2cc}
.dm-grid td.st-hide{color:#bbb;text-decoration:line-through}
.dm-grid td.ref.rl{box-shadow:inset 2px 0 0 var(--ref)}.dm-grid td.ref.rr{box-shadow:inset -2px 0 0 var(--ref)}
.dm-grid td.ref.rt{border-top:2px solid var(--ref)}.dm-grid td.ref.rb{border-bottom:2px solid var(--ref)}
.dm-grid td.ref.rl.rr{box-shadow:inset 2px 0 0 var(--ref),inset -2px 0 0 var(--ref)}
.dm-fa{position:absolute;right:2px;top:4px;width:14px;height:14px;background:#fff;border:1px solid #bbb;border-radius:2px}
.dm-fa:after{content:"";position:absolute;left:3px;top:5px;border:3.5px solid transparent;border-top-color:#555}
.dm-dda{position:absolute;right:-17px;top:3px;width:16px;height:17px;background:#f3f3f3;border:1px solid #aaa;z-index:3}
.dm-dda:after{content:"";position:absolute;left:4px;top:7px;border:4px solid transparent;border-top-color:#333}
.dm-ddl{position:absolute;background:#fff;border:1px solid #888;z-index:6;box-shadow:0 4px 10px rgba(0,0,0,.2)}
.dm-ddl span{display:block;padding:3px 6px;font-size:11.5px}
.dm-sel{position:absolute;border:2px solid #1f7244;pointer-events:none;z-index:3;box-sizing:border-box}
.dm-sel:after{content:"";position:absolute;right:-4px;bottom:-4px;width:6px;height:6px;background:#1f7244;border:1px solid #fff}
.dm-chart{position:absolute;background:#fff;border:1px solid #c6c6c6;box-shadow:0 2px 8px rgba(0,0,0,.12);z-index:4;animation:dmPop .35s ease}
.dm-chart-svg text{font-size:9px;fill:#555}.dm-chart-svg .dm-ct{font-size:12px;fill:#333;font-weight:600}
.dm-bar{animation:dmGrow .6s ease both;transform-origin:bottom;transform-box:fill-box}
@keyframes dmGrow{from{transform:scaleY(0)}}
@keyframes dmPop{from{opacity:0;transform:scale(.96)}}
.dm-slicer{position:absolute;width:150px;background:#fff;border:1px solid #9bb7a3;box-shadow:0 2px 8px rgba(0,0,0,.15);z-index:5;padding:0 8px 8px}
.dm-slh{font-weight:600;padding:6px 0;border-bottom:1px solid #ddd;margin-bottom:6px}
.dm-slicer span{display:block;padding:4px 8px;margin-top:4px;background:#d6e7da;border:1px solid #b5cfbc;font-size:11px}
.dm-slicer span.on{background:#1f7244;color:#fff}.dm-slicer span.off{background:#f2f2f2;color:#999;border-color:#e3e3e3}
.dm-pane{width:260px;border-left:1px solid #d6d6d6;background:#fafafa;display:flex;flex-direction:column;font-size:11.5px;flex:none}
.dm-ph{font-weight:600;padding:8px 10px;border-bottom:1px solid #e0e0e0;font-size:12.5px}
.dm-pf span{display:flex;align-items:center;gap:6px;padding:4px 10px}
.dm-pf i{width:11px;height:11px;border:1px solid #888;background:#fff}
.dm-pf i.ck{background:#1f7244;border-color:#1f7244}
.dm-areas{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px;margin-top:auto}
.dm-areas div{border:1px solid #d6d6d6;background:#fff;min-height:58px;padding:4px}
.dm-areas b{display:block;font-size:10px;color:#666;font-weight:600;margin-bottom:3px}
.dm-areas em{display:block;font-style:normal;background:#e6efe8;border:1px solid #b5cfbc;padding:2px 5px;margin-top:2px;font-size:10.5px}
.dm-sheets{height:24px;flex:none;display:flex;gap:2px;align-items:stretch;background:#f3f3f3;border-top:1px solid #d6d6d6;padding-left:34px;font-size:11px}
.dm-sheets span{padding:4px 14px;color:#444}
.dm-sheets span.on{background:#fff;color:#1f7244;font-weight:600;box-shadow:inset 0 -2px 0 #1f7244}
/* word */
.dm-wbody{flex:1;display:flex;min-height:0}
.dm-nav{width:200px;flex:none;background:#fff;border-right:1px solid #d6d6d6;font-size:11.5px;animation:dmSlide .3s ease}
@keyframes dmSlide{from{transform:translateX(-30px);opacity:0}}
.dm-navt{display:flex;gap:10px;padding:6px 10px;border-bottom:1px solid #eee;color:#666;font-size:11px}.dm-navt .on{color:#2b5797;font-weight:600;border-bottom:2px solid #2b5797}
.dm-ni{padding:5px 10px}.dm-ni.h2{padding-left:24px;color:#555}.dm-ni.on{background:#dbe6f4}
.dm-canvas{flex:1;background:#e9e9e9;overflow:hidden;padding:14px 0;display:flex;justify-content:center}
.dm-page{width:500px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.18);padding:34px 46px;min-height:600px;font-family:Calibri,"Segoe UI",Arial,sans-serif;font-size:11.5px;color:#222}
.dm-page>div,.dm-page>p{margin:0 0 9px;border-radius:2px;transition:background .2s}
.dm-page .sel{background:#cfe0f5}
.dm-page .bold{font-weight:700}
.dm-page .w-title{font:300 26px/1.1 "Calibri Light",Calibri,Arial,sans-serif;color:#111;margin-bottom:12px}
.dm-page .w-h1{font:400 17px/1.2 "Calibri Light",Calibri,Arial,sans-serif;color:#2f5496;margin-top:12px}
.dm-page .w-h2{font:400 14px/1.2 "Calibri Light",Calibri,Arial,sans-serif;color:#2f5496}
.dm-page .w-big{font-size:15px;font-weight:700}
.dm-page .w-p{line-height:1.5}
.dm-lines i{display:block;height:6px;background:#d9d9d9;margin:7px 0;border-radius:3px}
.dm-toc{border:1px dashed #bbb;padding:8px 10px}
.dm-toch{font:400 16px "Calibri Light",Calibri,sans-serif;color:#2f5496;margin-bottom:6px}
.dm-toc div{display:flex;gap:4px;font-size:11px;margin:3px 0}.dm-toc div.l2{padding-left:16px}
.dm-toc i{flex:1;border-bottom:1px dotted #888;margin-bottom:3px}
.dm-ref{padding-left:24px;text-indent:-24px;font-size:11px;line-height:1.5}
/* powerpoint */
.dm-pbody{flex:1;display:flex;min-height:0;background:#e6e6e6}
.dm-thumbs{width:132px;flex:none;background:#f3f3f3;border-right:1px solid #d6d6d6;padding:8px 8px 0;overflow:hidden}
.dm-th{display:flex;gap:4px;margin-bottom:8px;font-size:10px;color:#666}
.dm-th span{width:12px;text-align:right}.dm-th em{display:block;font-style:normal;color:#c0461f;font-size:8px}
.dm-th .dm-slide{border:2px solid transparent}
.dm-th.on .dm-slide{border-color:#c0461f}
.dm-stage{flex:1;display:flex;flex-direction:column;align-items:center;padding:12px 10px 0;min-width:0}
.dm-pnotes{width:540px;background:#fff;border:1px solid #d6d6d6;margin-top:8px;padding:6px 10px;font-size:11px;color:#777;height:30px;overflow:hidden}
.dm-slide{position:relative;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.2);font-family:"Segoe UI",-apple-system,Arial,sans-serif;container-type:inline-size}
.dm-slide.main{width:540px;height:304px}
.dm-slide.mini{width:100px;height:56px;pointer-events:none}
.dm-slide.full{position:absolute;inset:0;width:auto;height:auto}
.dm-slide .bar{position:absolute;left:0;top:0;bottom:0;width:1.6cqw;background:var(--acc)}
.dm-slide .ttl{position:absolute;left:8%;right:8%;top:30%;font-size:7.2cqw;font-weight:700;line-height:1.05}
.dm-slide .sub{position:absolute;left:8%;right:8%;top:58%;font-size:3.4cqw;color:var(--sub)}
.dm-slide .h{position:absolute;left:7%;right:7%;top:7%;font-size:5.6cqw;font-weight:700;line-height:1.1}
.dm-slide .cols{position:absolute;left:7%;right:7%;top:28%;bottom:8%;display:flex;gap:4%}
.dm-slide ul{margin:0;padding-left:4cqw;font-size:3.5cqw;flex:1;line-height:1.35}
.dm-slide li{margin-bottom:1.6cqw;transition:opacity .4s,transform .4s}
.dm-slide li::marker{color:var(--acc)}
.dm-slide li.hid{opacity:0;transform:translateX(-3cqw)}
.dm-slide .sidepic{width:42%}.dm-slide .dm-pic{width:100%;display:block}
.dm-slide .onepic{position:absolute;left:24%;right:24%;top:27%}
.dm-slide .onepic.picsel{outline:.5cqw solid #2b79d0;outline-offset:.4cqw}
.dm-slide .bigw{position:absolute;left:7%;top:24%;width:50%;font-size:8.4cqw;font-weight:800;line-height:1.02}
.dm-slide .bigpic{position:absolute;right:6%;top:20%;width:34%}
.dm-slide .wall{position:absolute;left:7%;right:7%;top:24%}
.dm-slide .wall i{display:block;height:1.3cqw;background:currentColor;opacity:.35;margin:1.1cqw 0;border-radius:1cqw}
.dm-slide.end{background:#000;color:#aaa;display:flex;align-items:center;justify-content:center;font-size:12px}
.dm-slide.fxFade{animation:dmFade .9s ease}.dm-slide.fxPush{animation:dmPush .7s ease}
@keyframes dmFade{from{opacity:0}}@keyframes dmPush{from{transform:translateY(100%)}}
.dm-win.show{background:#000}.dm-win.show .dm-slide{box-shadow:none}
.dm-pres{position:absolute;inset:0;background:#2b2b2b;color:#eee;display:grid;grid-template-columns:600px 1fr;grid-template-rows:38px 1fr;gap:12px;padding:0 16px 16px}
.dm-pres-top{grid-column:1/3;display:flex;gap:40px;align-items:center;font-size:15px;border-bottom:1px solid #444}
.dm-pres-top span:first-child{font-size:22px;font-weight:300}
.dm-pres-cur .dm-slide{width:600px;height:338px}
.dm-pres-side .lab{font-size:11px;color:#aaa;margin:2px 0 6px}
.dm-pres-side .dm-slide{width:300px;height:169px}
.dm-notes{font-size:16px;line-height:1.4;color:#fff}
.dm-pi{padding:5px 10px;border-bottom:1px solid #eee}
.dm-pfield{margin:8px 10px;border:1px solid #888;background:#fff;min-height:70px;padding:6px;font-size:11.5px}
/* menus + dialogs */
.dm-menu{position:absolute;z-index:8;background:#fff;border:1px solid #c8c8c8;box-shadow:0 6px 18px rgba(0,0,0,.2);min-width:170px;padding:4px 0;font-size:12px;animation:dmPop .18s ease}
.dm-menu span{display:block;padding:5px 16px}
.dm-menu span.on{background:#cfe3f7}
.dm-menu hr{border:0;border-top:1px solid #e3e3e3;margin:3px 0}
.dm-mh{font-size:10.5px;color:#666;padding:4px 12px;font-weight:600}
.dm-menu.grid{display:grid;grid-template-columns:repeat(3,110px);gap:6px;padding:8px}
.dm-menu.grid .dm-mh{grid-column:1/4}
.dm-menu.grid span{padding:4px;text-align:center;font-size:10px}
.dm-menu.grid b{display:block;height:50px;border:1px solid #ccc;background:#fff;margin-bottom:3px;position:relative}
.dm-menu.grid b i{position:absolute;left:12%;right:12%;height:6px;background:#bbb;top:16%}
.dm-menu.grid b i+i{top:42%;height:40%;background:#e2e2e2}
.dm-menu.grid b.lay-TitleSlide i{top:36%}.dm-menu.grid b.lay-TitleSlide i+i{top:58%;height:5px;left:25%;right:25%}
.dm-menu.grid b.lay-Blank i,.dm-menu.grid b.lay-Blank i+i{display:none}
.dm-menu.grid b.lay-TitleOnly i+i{display:none}
.dm-back{position:absolute;inset:30px 0 0 0;z-index:8;display:flex;animation:dmSlide .25s ease}
.dm-bl{width:170px;background:var(--app,#2b5797);color:#fff;padding-top:14px;font-size:13px}
.dm-win.excel~.dm-back .dm-bl{background:#1f7244}.dm-win.word~.dm-back .dm-bl{background:#2b5797}.dm-win.ppt~.dm-back .dm-bl{background:#c0461f}
.dm-bl span{display:block;padding:8px 20px}
.dm-bl span.on{background:rgba(255,255,255,.22)}
.dm-br{flex:1;background:#fff;padding:24px 30px}
.dm-bh{font-size:26px;font-weight:300;margin-bottom:16px}
.dm-bo{border:1px solid #ddd;padding:12px 14px;margin-bottom:8px;width:340px;font-size:13px}
.dm-bo.on{background:#e8eef7;border-color:#9ab3d6}
.dm-dlg-bg{position:absolute;inset:0;background:rgba(0,0,0,.18);z-index:9}
.dm-dlg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:400px;background:#fff;z-index:10;border-radius:8px;box-shadow:0 12px 40px rgba(0,0,0,.35);font-size:12px;animation:dmPop .2s ease}
.dm-dh{font-weight:700;padding:12px 16px 4px;font-size:13px}
.dm-db{padding:6px 16px 10px}
.dm-db p{margin:0 0 8px;color:#444}
.dm-db label{display:flex;align-items:center;gap:10px;margin:6px 0}
.dm-db label span{width:120px;color:#444;text-align:right}
.dm-db label em{flex:1;font-style:normal;border:1px solid #b9b9b9;border-radius:4px;padding:4px 8px;min-height:24px;background:#fff}
.dm-db label em.selc{background:linear-gradient(#fff,#f1f1f1)}
.dm-db label em.typing{border-color:#2f6fdb;box-shadow:0 0 0 2px rgba(47,111,219,.25)}
.dm-db label.ck span{display:none}
.dm-db label.ck i{width:13px;height:13px;border:1px solid #888;border-radius:2px;display:inline-block}
.dm-db label.ck i.on{background:#2f6fdb;border-color:#2f6fdb}
.dm-dl{border:1px solid #ccc;max-height:150px;overflow:hidden;margin-top:6px}
.dm-dl span{display:block;padding:4px 8px}.dm-dl span.on{background:#2f6fdb;color:#fff}
.dm-dnote{margin-top:8px;padding:8px;background:#f2f7ec;border:1px solid #cfe2bf;color:#2d5016;border-radius:4px}
.dm-df{display:flex;justify-content:flex-end;gap:8px;padding:8px 16px 14px}
.dm-df span{border:1px solid #b9b9b9;border-radius:5px;padding:4px 16px;background:#fff}
.dm-df span.pri{background:#2f6fdb;border-color:#2f6fdb;color:#fff}
.dm-toast{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);background:#222;color:#fff;padding:8px 16px;border-radius:6px;z-index:12;font-size:12.5px;animation:dmPop .25s ease}
@media (max-width:860px){.player .demo{bottom:66px}.player.show-demo .stage{padding:8px 22px 24px;min-height:62px}}
.player.show-demo .ctrls{top:auto;bottom:30px;right:40px}
.player.show-demo .say{max-width:calc(100% - 250px)}
.dm-grid td{box-sizing:border-box}
@media (max-width:860px){.player.show-demo .ctrls{right:22px;bottom:26px}.player.show-demo .say{max-width:calc(100% - 200px)}}
.manifesto{max-width:860px;margin:6px 0 22px;font-size:clamp(20px,2.6vw,30px);line-height:1.25;font-weight:700;letter-spacing:-.005em;color:var(--on-dark);border-left:3px solid var(--signal);padding-left:18px}
.manifesto span{color:var(--ball)}
.dm-btns{max-width:420px}
.dm-grid td:has(.dm-dda){overflow:visible}
/* ===== campus landing (modern, futuristic, nature) ===== */
.campus-hero{background:#e3efe8;color:var(--ink);border-bottom:1px solid #8bb88a;position:relative}
.campus-hero .sky{padding-top:56px;padding-bottom:8px;position:relative;z-index:1}
.campus-hero .school{color:#2f5e45;border-color:#9cc19c;background:#f3f8f3}
.campus-hero h1{font-size:clamp(36px,6vw,76px);line-height:.98;margin:18px 0 18px;font-weight:900;letter-spacing:-.02em;font-variation-settings:"wdth" 112;max-width:980px;color:var(--ink)}
.campus-hero h1 .serif{color:var(--signal)}
.campus-hero .manifesto{color:var(--ink);border-left-color:#3e7b4f}
.campus-hero .manifesto span{color:#2f6e45}
.campus-hero .lede{color:#3d4d44;max-width:700px}
.campus-hero .meta li{border-color:#9cc19c;color:#2f4a3a;background:#f3f8f3}
.campus-hero .meta li a{color:#2f6e45}
.map-hint{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#4d6656;margin:18px 0 0}
.map{line-height:0}
.campus{display:block;width:100%;height:auto}
.campus .bld{cursor:pointer;outline:none}
.campus .bld .lift{transition:transform .25s ease}
.campus .bld:hover .lift,.campus .bld:focus .lift{transform:translateY(-8px)}
.campus .tag text{font:700 13px var(--sans);fill:#1d2c24}
.campus .bld:hover .tag rect,.campus .bld:focus .tag rect{fill:#1d2c24}
.campus .bld:hover .tag text,.campus .bld:focus .tag text{fill:#fff}
.campus .blades{animation:spin 9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.campus .cloud{animation:drift 40s ease-in-out infinite alternate}
@keyframes drift{to{transform:translateX(40px)}}
@media (prefers-reduced-motion:reduce){.campus .blades,.campus .cloud{animation:none}}
body.library{background-color:var(--surface)}
/* classroom tiles + rooms */
.room-icon{width:64px;height:74px;flex:none}
.cat-grid{border-color:var(--line)}
.cat-tile{grid-template-columns:70px 1fr;grid-template-rows:auto auto 1fr auto;border-color:var(--line);background:#fbfaf4;position:relative}
.cat-tile:before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:var(--room)}
.cat-tile .room-icon{grid-row:1/5}
.cat-tile:hover{background:#1d2c24}
.room-no{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--room)}
.cat-tile:hover .room-no{color:var(--ball)}
.cat-n{display:none}
.room-head{align-items:center;justify-content:flex-start}
.room-head>div{flex:1}
.room-head .room-icon{width:56px;height:64px}
.room-head h2{margin:2px 0 0}
.school-row{border-bottom-color:var(--line)}
.card.live{border-top:4px solid var(--room)}
.card.live:hover{box-shadow:0 8px 0 var(--room)}
.filter{background:var(--surface)}
/* classroom badge on course pages */
.hero.room{border-top:6px solid var(--room)}
.room-badge{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--on-dark);border:1px solid var(--night-line);border-radius:6px;padding:4px 14px 4px 6px;margin-bottom:14px;background:var(--night-2)}
.room-badge .room-icon{width:42px;height:48px}
.room-badge span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;line-height:1.4}
.room-badge small{display:block;color:var(--room);font-size:10px}
.room-badge:hover{border-color:var(--room)}
.hero.room .school{color:var(--room);border-color:var(--room);margin-left:10px}
@media (max-width:860px){.campus .tag text{font-size:14px}.cat-tile{grid-template-columns:56px 1fr}.cat-tile .room-icon{width:52px;height:60px}}
/* each classroom page takes its building's colour */
.hero.room{background:color-mix(in srgb,var(--room) 22%,#121110)}
.hero.room:before{opacity:.3}
.hero.room .kid,.lesson .l-num{border-color:var(--room)}
body:has(.hero.room) .rail a.on{border-left-color:var(--room)}
body:has(.hero.room) .progress i{background:var(--room)}
/* 3D campus (falls back to the flat map if WebGL can't load) */
.map{position:relative}
.campus3d{display:none;position:relative;width:100%;aspect-ratio:16/8.2;max-height:78vh;min-height:420px;overflow:hidden;background:#dcebe6;border-top:1px solid var(--line)}
.has-3d .campus3d{display:block}
.has-3d .campus{display:none}
.campus3d canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:pan-y}
.c3-labels{position:absolute;inset:0;pointer-events:none}
.c3-tag{position:absolute;left:0;top:0;pointer-events:auto;white-space:nowrap;text-decoration:none;font:700 12px var(--sans);color:var(--ink);background:#fffdf7;border:2px solid var(--room);border-radius:999px;padding:3px 10px 3px 8px;box-shadow:0 2px 6px rgba(0,0,0,.12);transition:background .15s,color .15s,opacity .2s}
.c3-tag i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--room);margin-right:6px;vertical-align:0}
.c3-tag.on,.c3-tag:hover{background:#1d2c24;color:#fff}
.c3-help{position:absolute;left:24px;bottom:14px;z-index:2;margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:rgba(255,253,247,.85);padding:6px 10px;border-radius:4px;pointer-events:none}
@media (max-width:860px){.campus3d{aspect-ratio:4/5;min-height:0}.c3-tag{font-size:10.5px;padding:2px 8px 2px 6px}}
/* copy-paste prompt for Claude */
.ask{margin:14px 0 4px;border:1px solid var(--line);border-left:4px solid #d97757;border-radius:4px;background:var(--surface)}
.ask summary{cursor:pointer;padding:12px 14px;font-weight:700;display:flex;align-items:center;gap:10px;list-style:none}
.ask summary::-webkit-details-marker{display:none}
.ask summary:after{content:"+";margin-left:auto;font-family:var(--mono);color:var(--mute)}
.ask[open] summary:after{content:"–"}
.ask-i{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;background:#d97757;color:#fff;padding:3px 7px;border-radius:3px}
.ask-note{margin:0 14px 8px;color:var(--ink-2);font-size:14px}
.ask pre{margin:0 14px;white-space:pre-wrap;font-family:var(--mono);font-size:12.5px;line-height:1.5;background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:12px;max-height:260px;overflow:auto}
.ask-btns{display:flex;gap:10px;align-items:center;padding:12px 14px}
.ask-btns .copy,.ask-btns .open{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:8px 14px;cursor:pointer;text-decoration:none;border:1px solid var(--edge)}
.ask-btns .copy{background:var(--fill);color:var(--on-fill)}
.ask-btns .open{background:none;color:var(--ink)}
.ask-btns .copied{font-family:var(--mono);font-size:11px;color:#2f6e45;letter-spacing:.06em;text-transform:uppercase}
.kids-only{display:none}
body.kids .kids-only{display:block}
body.kids .adult-only{display:none}
/* ===== cartoon lesson scenes (toon.js) ===== */
.player .toonbox{position:absolute;inset:0 0 74px 0;display:none;z-index:1;overflow:hidden;background:#f3f1e8}
.player.show-toon .toonbox{display:block}
.player.show-toon .stage{inset:auto 0 4px 0;z-index:2;justify-content:flex-end;background:var(--night);padding:10px 40px 28px;border-top:1px solid var(--night-line);min-height:70px}
.player.show-toon .say{font-size:clamp(15px,1.9vw,20px);font-weight:700;max-width:calc(100% - 250px)}
.player.show-toon .cue{display:none}
.player.show-toon .ctrls{top:auto;bottom:30px;right:40px}
.player.show-toon .vmeta,.player.show-toon .c{z-index:3}
.player.playing.show-toon .stage:after{display:none}
.player.show-toon.kidmode .toonbox{inset:0}
.player.show-toon.kidmode .stage{display:none}
.player.show-toon.kidmode .ctrls{bottom:auto;top:12px}
.player.show-toon.kidmode .vmeta{bottom:10px;color:#24332b}
.player.show-toon.kidmode .vmeta .vlabel{background:rgba(255,255,255,.8);padding:2px 6px;border-radius:3px}
.player.show-toon.kidmode .ctrls button,.player.show-toon.kidmode .voice{color:#24332b;border-color:#24332b;background:rgba(255,255,255,.75)}
.toon{display:block;width:100%;height:100%}
.toon *{transform-box:fill-box}
.tn-text{width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;font-family:"Archivo","Arial Rounded MT Bold",system-ui,sans-serif;font-weight:800;line-height:1.18;color:#24332b;padding:6px 18px;box-sizing:border-box}
.tn-bob{animation:tnBob 2.4s ease-in-out infinite;transform-origin:50% 100%}
@keyframes tnBob{50%{transform:translateY(-7px)}}
.tn-lid{transform-origin:50% 0;transform:scaleY(0);animation:tnBlink 4.2s infinite}
@keyframes tnBlink{0%,92%,100%{transform:scaleY(0)}95%{transform:scaleY(1)}}
.tn-mouth{transform-origin:50% 30%;animation:tnTalk .28s ease-in-out infinite alternate}
@keyframes tnTalk{from{transform:scaleY(.55)}to{transform:scaleY(1.25)}}
.pip .arm-r{transform-origin:0% 50%}.pip .arm-l{transform-origin:100% 50%}
.kid.wave .pip .arm-r{animation:tnWave .45s ease-in-out 6 alternate}
@keyframes tnWave{from{transform:rotate(-55deg)}to{transform:rotate(-15deg)}}
.kid.point .pip .arm-r{animation:tnPoint .6s ease-out both}
@keyframes tnPoint{to{transform:rotate(-28deg) translateX(8px)}}
.kid.cheer .pip .arm-r{animation:tnUpR .4s ease-out both}.kid.cheer .pip .arm-l{animation:tnUpL .4s ease-out both}
@keyframes tnUpR{to{transform:rotate(-70deg)}}@keyframes tnUpL{to{transform:rotate(70deg)}}
.kid.cheer .pip{animation:tnJump .5s ease-in-out 2}
@keyframes tnJump{50%{transform:translateY(-28px)}}
.kid.think .tn-pupil{animation:tnLookUp .5s ease-out both}
@keyframes tnLookUp{to{transform:translate(6px,-9px)}}
.kid.think .pip .arm-l{animation:tnChin .5s ease-out both}
@keyframes tnChin{to{transform:rotate(-40deg) translate(30px,-4px)}}
.tn-ant{transform-origin:50% 100%;animation:tnAnt 1.2s ease-in-out infinite alternate}
@keyframes tnAnt{from{transform:rotate(-12deg)}to{transform:rotate(12deg)}}
.tn-bubble{transform-origin:5% 100%;animation:tnPop .45s cubic-bezier(.3,1.5,.6,1) both}
.tn-prop{animation:tnPop .5s .25s cubic-bezier(.3,1.6,.6,1) both,tnWiggle 2.6s 1s ease-in-out infinite}
@keyframes tnPop{from{transform:scale(.2);opacity:0}to{transform:none;opacity:1}}
@keyframes tnWiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}
.tn-sparkle path{transform-origin:50% 50%;animation:tnTwinkle 1.4s ease-in-out infinite alternate}
.tn-sparkle path+path{animation-delay:.7s}
@keyframes tnTwinkle{from{transform:scale(.4);opacity:.3}to{transform:scale(1.1);opacity:1}}
.tn-cloud{animation:tnDrift 18s linear infinite alternate}
@keyframes tnDrift{to{transform:translateX(60px)}}
.sam .arm-r{transform-origin:0% 0%}.sam .arm-l{transform-origin:100% 0%}
.adult.talk .sam .arm-r,.adult.wave .sam .arm-r{animation:tnExplain 1.6s ease-in-out infinite alternate}
@keyframes tnExplain{from{transform:rotate(-8deg)}to{transform:rotate(-38deg)}}
.adult.point .sam .arm-r{animation:tnSamPoint .6s ease-out both}
@keyframes tnSamPoint{to{transform:rotate(-62deg)}}
.adult.cheer .sam .arm-r{animation:tnSamPoint .5s ease-out both}.adult.cheer .sam .arm-l{animation:tnSamOpen .5s ease-out both}
@keyframes tnSamOpen{to{transform:rotate(30deg)}}
.adult.think .tn-head{transform-origin:50% 100%;animation:tnTilt .6s ease-out both}
@keyframes tnTilt{to{transform:rotate(-7deg)}}
.tn-board{animation:tnSlide .5s ease-out both}
@keyframes tnSlide{from{transform:translateX(40px);opacity:0}}
.tn-word{font-family:"Archivo",system-ui,sans-serif;font-weight:850;fill:#24332b;animation:tnWord .45s ease-out both}
@keyframes tnWord{from{opacity:0;transform:translateY(14px)}}
.tn-kicker{font-family:"JetBrains Mono",monospace;font-size:15px;letter-spacing:2px;fill:#7a7168}
@media (prefers-reduced-motion:reduce){.toon *{animation:none!important}}
@media (max-width:860px){.player .toonbox{bottom:66px}.player.show-toon .stage{padding:8px 22px 24px}.player.show-toon .say{max-width:calc(100% - 200px)}}
/* Kids mode on course pages */
body.kids .detail>.facts,body.kids .detail>.content,body.kids .detail>.sources{display:none}
body.kids .kid{border-color:#ffb547;background:#fff6e3}
body.kids .kid p{font-size:clamp(20px,2.4vw,26px)}
body.kids .exercise .s-label{color:#e07b00}
.mode.kidsw{margin-top:10px}
.mode.kidsw b{color:#ffb547}
/* full-frame cartoon scenes: the sentence is on screen, so the caption bar steps aside */
.player.show-toon .toonbox{inset:0}
.player.show-toon .stage{display:none}
.player.show-toon .ctrls{bottom:auto;top:12px}
.player.show-toon .vmeta{bottom:10px;color:#24332b}
.player.show-toon .vmeta span{background:rgba(255,255,255,.82);padding:2px 6px;border-radius:3px}
.player.show-toon .ctrls button,.player.show-toon .voice{color:#24332b;border-color:#24332b;background:rgba(255,255,255,.8)}
.player.show-toon .c{border-color:#24332b}
.tn-sentence{font-family:"Archivo",system-ui,sans-serif;font-weight:800;line-height:1.16;color:#24332b;animation:tnWord .5s .15s ease-out both}
.tn-sentence mark{background:none;color:var(--room);box-shadow:inset 0 -.32em 0 color-mix(in srgb,var(--room) 22%,transparent)}
.tn-onscreen{font-family:"JetBrains Mono",monospace;font-size:.62em;font-weight:600;color:#fff;background:#24332b;display:inline-block;padding:4px 10px;border-radius:4px;margin-bottom:12px}
.player.show-demo .say{max-width:calc(100% - 320px)}
@media (max-width:860px){.player.show-demo .say{max-width:calc(100% - 300px)}}
/* language picker + notes */
#langpick{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;background:none;border:1px solid var(--edge);border-radius:999px;padding:5px 8px;color:var(--ink);cursor:pointer}
.ai-note{font-size:12px;color:#bdb5a9;margin-top:6px}
.ai-note:empty{display:none}
.trans-note{display:inline-block;background:#ffe9a8;color:#3a2a00;font-size:13px;padding:6px 10px;border-radius:4px;margin:0 0 10px}
@media (max-width:860px){.top nav{gap:10px}#langpick{padding:4px 6px}}

/* ---- My notebook ---- */
.note{margin:18px 0 0;padding:14px 16px;border:1px dashed var(--line);border-radius:4px;background:var(--surface)}
.note .s-label{color:var(--ink-2)}
.note textarea{width:100%;min-height:84px;margin-top:6px;padding:10px 12px;border:1px solid var(--line);border-radius:4px;font:inherit;font-size:15px;line-height:1.5;resize:vertical;
  background:var(--surface);box-sizing:border-box;color:var(--ink)}
.note textarea:focus{outline:2px solid var(--signal);outline-offset:1px}
.note-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:10px;font-size:14px}
.learned{display:flex;align-items:center;gap:6px;cursor:pointer;font-weight:600}
.learned input{width:18px;height:18px;accent-color:var(--signal)}
.note .saved{font-family:var(--mono);font-size:11px;color:var(--mute)}
.nb-open{font:inherit;cursor:pointer}
.note .nb-open{margin-left:auto;background:none;border:1px solid var(--edge);border-radius:3px;padding:6px 10px;font-size:13px}
.note .nb-open:hover{background:var(--fill);color:var(--on-fill)}
section.lesson.is-done .l-num{background:var(--signal);color:#fff;border-color:var(--signal)}
.rail a.done span:after{content:" ✓";color:var(--signal)}
.rail .rail-nb{display:flex;gap:10px;margin-top:10px;padding:9px 10px;border:1px solid var(--edge);border-radius:3px;background:var(--paper);font-size:14px;text-align:left;color:var(--ink)}
.rail .rail-nb span{font-family:var(--mono);font-size:12px;color:var(--signal);min-width:20px}
.rail .rail-nb:hover{background:var(--fill);color:var(--on-fill)}
.nb-fab{position:fixed;right:18px;bottom:18px;z-index:40;display:flex;align-items:center;gap:8px;padding:11px 16px;border:0;border-radius:999px;background:var(--fill);color:var(--on-fill);
  font-weight:700;font-size:14px;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.nb-fab:hover{background:var(--signal)}
.nb-count:not(:empty){background:var(--signal);color:#fff;border-radius:999px;font-size:11px;padding:2px 7px;font-family:var(--mono)}
.nb{position:fixed;inset:0;z-index:60}
.nb-shade{position:absolute;inset:0;background:rgba(20,18,16,.45)}
.nb-panel{position:absolute;top:0;right:0;bottom:0;width:min(560px,100%);overflow:auto;background:var(--paper);padding:22px 24px 40px;box-shadow:-10px 0 40px rgba(0,0,0,.25);box-sizing:border-box}
.nb-head{display:flex;gap:16px;align-items:flex-start;justify-content:space-between}
.nb-head h2{margin:4px 0 6px;font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.1}
.nb-prog{margin:0 0 6px;font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.nb-bar{height:6px;background:var(--paper-2);border-radius:3px;overflow:hidden;width:260px;max-width:100%}
.nb-bar i{display:block;height:100%;width:0;background:var(--signal);transition:width .3s}
.nb-x{font:inherit;font-size:13px;cursor:pointer;background:none;border:1px solid var(--edge);border-radius:3px;padding:6px 10px}
.nb-private{font-size:13px;color:var(--mute);margin:14px 0 10px}
.nb-tools{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.nb-tools button{font:inherit;font-size:13px;font-weight:700;cursor:pointer;border:0;border-radius:3px;padding:9px 12px;background:var(--fill);color:var(--on-fill)}
.nb-tools button:hover{background:var(--signal)}
.nb-list{list-style:none;margin:0;padding:0}
.nb-list li{border-top:1px solid var(--line);padding:14px 0}
.nb-l{display:flex;align-items:baseline;gap:10px}
.nb-num{font-family:var(--mono);font-size:12px;color:var(--mute);min-width:22px}
.nb-list li.is-done .nb-num{color:var(--signal)}
.nb-t{font-weight:700;color:var(--ink);text-decoration:none}
.nb-t:hover{text-decoration:underline}
.nb-ok{margin-left:auto;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--signal);white-space:nowrap}
.nb-what{margin:6px 0 8px 32px;font-size:14px;color:var(--ink-2)}
.nb-mine{margin-left:32px;padding:8px 12px;border-left:3px solid var(--signal);background:var(--surface)}
.nb-mine b{font-size:12px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}
.nb-mine p{margin:4px 0 0;white-space:pre-wrap;font-size:15px}
.nb-mine p.nb-empty{color:var(--mute);font-style:italic}
body.nb-on{overflow:hidden}
@media (max-width:700px){.nb-fab span{display:none}.nb-fab{padding:13px}.note .nb-open{margin-left:0}}
@media print{
  body.nb-on>*:not(#notebook){display:none!important}
  body.nb-on{overflow:visible}
  body.nb-on .nb{position:static}
  body.nb-on .nb-shade,body.nb-on .nb-x,body.nb-on .nb-tools,body.nb-on .nb-private{display:none}
  body.nb-on .nb-panel{position:static;width:auto;box-shadow:none;overflow:visible;padding:0}
  .nb-list li{break-inside:avoid}
}

/* ---- Lesson checks, final exam, certificate ---- */
.check{margin:16px 0 0;padding:16px 18px;border:1.5px solid var(--edge);border-radius:4px;background:var(--paper)}
.check-head{display:flex;align-items:center;gap:10px}
.check-head .s-label{color:var(--signal)}
.check-badge:not(:empty){font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;background:var(--signal);color:#fff;padding:3px 7px;border-radius:3px}
.check-info{font-size:14px;color:var(--ink-2);margin:6px 0 10px}
.exq-q{border:0;margin:0 0 12px;padding:10px 12px;border-radius:4px;background:var(--surface);border-left:3px solid var(--line)}
.exq-q legend{font-weight:700;padding:0;margin-bottom:6px;float:left;width:100%}
.exq-q legend+*{clear:both}
.exq-c{display:flex;gap:8px;align-items:flex-start;padding:6px 4px;cursor:pointer;font-size:15px;border-radius:3px}
.exq-c:hover{background:var(--paper-2)}
.exq-c input{margin-top:4px;accent-color:var(--signal)}
.exq-q.ok{border-left-color:#2f8f4e}
.exq-q.no{border-left-color:#c8372d}
.exq-why:empty{display:none}
.exq-why{margin:6px 0 0;font-size:14px}
.exq-q.ok .exq-why{color:#2f6f40}
.exq-q.no .exq-why{color:var(--ink)}
.exq-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.exq-go{font:inherit;font-weight:700;font-size:14px;cursor:pointer;border:0;border-radius:3px;padding:10px 14px;background:var(--fill);color:var(--on-fill)}
.exq-go:hover{background:var(--signal)}
.exq-ghost{font:inherit;font-size:13px;cursor:pointer;background:none;border:1px solid var(--edge);border-radius:3px;padding:7px 11px;color:var(--ink)}
.exq-msg{margin:0;font-weight:700;font-size:14px}
.exq-msg.pass{color:#2f8f4e}.exq-msg.fail,.exq-msg.warn{color:#c8372d}
.exam-box,.cert-box{padding:4px 0}
.ex-lock{padding:14px 16px;border:1px dashed var(--line);border-radius:4px;background:var(--surface)}
.ex-lock p{margin:0 0 6px;font-weight:700}
.ex-lock ul{margin:0;padding-left:20px}
.ce-list{list-style:none;padding:0;margin:8px 0;display:grid;gap:6px}
.ce-list li{padding:8px 12px;border:1px solid var(--line);border-radius:3px;background:var(--surface);color:var(--mute)}
.ce-list li:before{content:"○  ";color:var(--mute)}
.ce-list li.ok{color:var(--ink)}
.ce-list li.ok:before{content:"✓  ";color:#2f8f4e;font-weight:700}
.ce-form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.ce-form label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;flex:1 1 280px}
.ce-form input{font:inherit;font-size:16px;padding:10px 12px;border:1px solid var(--edge);border-radius:3px;background:var(--surface)}
.cert{position:relative;margin:6px 0 14px;padding:42px 36px 26px;text-align:center;background:var(--surface);border:2px solid var(--edge);outline:6px double var(--room,var(--signal));outline-offset:-14px;border-radius:2px}
.cert-brand{font-family:var(--mono);font-size:12px;letter-spacing:.24em;color:var(--ink-2)}
.cert-title{font-family:var(--serif);font-size:40px;line-height:1.1;margin:14px 0 18px}
.cert-this{font-size:14px;color:var(--mute);text-transform:uppercase;letter-spacing:.08em}
.cert-name{font-family:var(--serif);font-size:44px;line-height:1.1;margin:8px auto 12px;padding-bottom:6px;border-bottom:1px solid var(--line);max-width:90%;word-break:break-word}
.cert-course{font-weight:800;font-size:20px;margin:8px auto 10px;max-width:90%}
.cert-pass{font-size:15px;color:var(--ink-2)}
.cert-foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:26px;font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.cert-note{margin-top:12px;font-size:11px;color:var(--mute)}
@media (max-width:600px){.cert{padding:34px 18px 20px}.cert-title{font-size:30px}.cert-name{font-size:32px}}
@media print{
  body.cert-print *{visibility:hidden}
  body.cert-print .cert,body.cert-print .cert *{visibility:visible}
  body.cert-print .cert{position:fixed;left:0;right:0;top:0;margin:0}
  body.cert-print .nb-fab{display:none}
  @page{margin:12mm}
}

/* ---- Step by step ---- */
.steps{margin:14px 0;padding:16px 20px;border-radius:4px;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--room,var(--signal))}
.steps .s-label{color:var(--ink-2)}
.steps ol{counter-reset:st;list-style:none;padding:0;margin:8px 0 0}
.steps ol li{counter-increment:st;position:relative;padding:6px 0 6px 40px;border-top:1px dashed var(--line)}
.steps ol li:first-child{border-top:0}
.steps ol li:before{content:counter(st);position:absolute;left:0;top:5px;width:26px;height:26px;border-radius:50%;background:var(--fill);color:var(--on-fill);
  font-family:var(--mono);font-size:12px;display:flex;align-items:center;justify-content:center}
/* ---- YouTube references ---- */
.yt-list{margin:14px 0}
.yt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:8px}
.yt{border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--surface)}
.yt-play{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;cursor:pointer;background:#000}
.yt-play img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92}
.yt-btn{position:absolute;left:50%;top:50%;width:62px;height:44px;margin:-22px 0 0 -31px;border-radius:12px;background:#e62117}
.yt-btn:after{content:"";position:absolute;left:25px;top:13px;border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #fff}
.yt-play:hover .yt-btn{background:#ff0000}
.yt-frame{width:100%;aspect-ratio:16/9;border:0;display:block}
.yt-meta{padding:8px 10px;font-size:14px;line-height:1.35}
.yt-meta b{display:block}
.yt-meta span{font-size:12px;color:var(--mute)}
.yt-note{font-size:12px;color:var(--mute);margin:8px 0 0}
/* ---- Music: watch how to play ---- */
.mv{margin:14px 0;padding:14px 16px;border:1.5px solid var(--edge);border-radius:4px;background:var(--surface)}
.mv-label{color:var(--signal)}
.mv-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.mv-btn{font:inherit;font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid var(--edge);border-radius:999px;background:var(--paper);color:var(--ink)}
.mv-btn:hover,.mv-btn.on{background:var(--fill);color:var(--on-fill)}
.mv-ico{width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor}
.mv-stage{margin-top:12px;padding:14px;border-radius:6px;background:#141210;color:#f1ece2}
.mv-top{display:flex;align-items:center;gap:8px}
.mv-title{font-weight:800;font-size:17px;margin-right:auto}
.mv-x{font:inherit;font-size:12px;cursor:pointer;background:none;border:1px solid #6b635a;color:#f1ece2;border-radius:3px;padding:5px 9px}
.mv-pic{display:flex;justify-content:center;margin:10px 0}
.mv-svg{width:100%;max-width:300px;height:auto}
.mv-svg.kb{max-width:640px}.mv-svg.bt{max-width:420px}
.mv-cap{min-height:46px;font-size:17px;line-height:1.35;text-align:center;font-weight:600}
.mv-cap.in{animation:mvin .35s ease}
@keyframes mvin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.mv-svg .nut{fill:#f1ece2}.mv-svg .fretl{stroke:#8a8178;stroke-width:2}.mv-svg .str{stroke:#d9cfbf}
.mv-svg .sn,.mv-svg .frl{fill:#a39a8f;font:600 12px var(--mono)}.mv-svg .om{fill:#f1ece2;font:700 16px var(--sans)}
.mv-svg .dot{fill:var(--signal)}.mv-svg .dotn{fill:#fff;font:800 14px var(--sans)}
.mv-svg .pop{animation:pop .45s cubic-bezier(.3,1.6,.5,1);transform-box:fill-box;transform-origin:center}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
.mv-svg .str.vib{animation:vib .5s linear}
@keyframes vib{0%,100%{transform:translateX(0)}20%{transform:translateX(1.5px)}40%{transform:translateX(-1.5px)}60%{transform:translateX(1px)}80%{transform:translateX(-1px)}}
.mv-svg .wk{fill:#fbf8f2;stroke:#2b2723}.mv-svg .bk{fill:#141210;stroke:#000}
.mv-svg .wk.lit{fill:#ffd9c7}.mv-svg .bk.lit{fill:#b5401a}
.mv-svg .hit{animation:hit .35s ease}
@keyframes hit{0%{filter:brightness(1.6)}100%{filter:none}}
.mv-svg .kl{fill:#7a7168;font:600 10px var(--mono)}.mv-svg .kn{fill:var(--signal);font:800 13px var(--sans);paint-order:stroke;stroke:#fff;stroke-width:3px}
.mv-svg .kf{fill:var(--signal)}.mv-svg .kfn{fill:#fff;font:800 11px var(--sans)}
.mv-svg .beatl{stroke:#6b635a;stroke-width:1.5}.mv-svg .bnum{fill:#a39a8f;font:800 22px var(--sans);transition:fill .1s}
.mv-svg .bnum.on{fill:var(--ball)}.mv-svg .nblk{fill:var(--signal)}.mv-svg .nrest{fill:none;stroke:#a39a8f;stroke-dasharray:5 4}
/* ---- Sports: watch it ---- */
.sport{margin:14px 0;padding:14px 16px;border:1.5px solid var(--edge);border-radius:4px;background:var(--surface)}
.sport .s-label{color:var(--signal)}
.sp-fig{width:100%;max-width:420px;height:auto}
.sp-court{width:100%;max-width:640px;height:auto}
.sp-fig .gnd{stroke:#6b635a;stroke-width:2}.sp-fig .wall{fill:#4a443e}.sp-fig .nett{fill:#8a8178;font:600 11px var(--mono)}
.sp-fig .lb{fill:none;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.sp-fig .lb.front{stroke:#f1ece2}.sp-fig .lb.back{stroke:#a39a8f}.sp-fig .lb.torso{stroke:#f1ece2;stroke-width:9}
.sp-fig .hd{fill:#f1ece2}
.sp-fig .rk-h{stroke:#d8f24a;stroke-width:4;stroke-linecap:round}.sp-fig .rk-f{fill:none;stroke:#d8f24a;stroke-width:3}
.sp-fig .bl,.sp-court .bl{fill:#d8f24a;stroke:#141210;stroke-width:1}
.sp-court .crt.tennis{fill:#2f6f8f}.sp-court .crt.pickle{fill:#2e7d5b}
.sp-court .crt{stroke:#fff;stroke-width:2}.sp-court .cl{stroke:#fff;stroke-width:2}
.sp-court .kz{fill:rgba(255,255,255,.06)}.sp-court .kz.on{fill:rgba(255,91,31,.35)}
.sp-court .kzt{fill:#fff;font:700 10px var(--mono);letter-spacing:.1em}
.sp-court .net{stroke:#141210;stroke-width:4;stroke-dasharray:3 2}
.sp-court .plc.near{fill:#ff5b1f;stroke:#fff;stroke-width:2}.sp-court .plc.far{fill:#f1ece2;stroke:#141210;stroke-width:2}
.sp-court .plt{font:800 11px var(--sans);fill:#141210}.sp-court .plc.near+.plt{fill:#fff}
.sp-court .pl.hide{opacity:0}
.sp-court .bsh{fill:rgba(0,0,0,.35)}
.sp-court .bnc circle{fill:none;stroke:#d8f24a;stroke-width:2;animation:bnc 1.2s ease-out forwards}
@keyframes bnc{from{r:3;opacity:1}to{r:14;opacity:0}}
/* ---- Level ladder ---- */
.ladder{margin:16px 0 4px}
.ladder ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:6px 0 0;counter-reset:lv}
.ladder li{flex:1 1 150px;counter-increment:lv}
.ladder li a,.ladder li span{display:block;height:100%;padding:8px 10px;border:1px solid rgba(255,255,255,.25);border-radius:4px;text-decoration:none;color:inherit;box-sizing:border-box}
.ladder li a:hover{border-color:var(--room,var(--signal))}
.ladder li.on span{background:var(--room,var(--signal));border-color:var(--room,var(--signal));color:#fff}
.ladder b{display:block;font-size:12px;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase}
.ladder b:before{content:counter(lv) ". "}
.ladder small{display:block;font-size:12px;opacity:.8;line-height:1.3;margin-top:2px}
/* ---- News Center ---- */
.news-hero{background:#141210;color:#f1ece2;padding:48px 0 28px}
.news-hero .school{color:var(--ball)}
.news-promise{max-width:720px;font-size:17px;color:#d9cfbf}
.news-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.news-nav a{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--ink);background:var(--ball);padding:6px 10px;border-radius:3px;text-decoration:none}
.news-main{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:28px;padding:28px 0 60px}
@media (max-width:860px){.news-main{grid-template-columns:1fr}}
.news-sec{grid-column:1;margin-bottom:26px}
.news-sec h2{font-family:var(--serif);font-weight:400;font-size:34px;margin:4px 0 10px}
.news-tag{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;padding:3px 8px;border-radius:3px;background:var(--fill);color:var(--on-fill)}
.news-sec.world .news-tag{background:#8a2b1f}.news-sec.economy .news-tag{background:#1f6b4a}.news-sec.politics .news-tag{background:#2d4f8a}
.news-sec.sports .news-tag{background:#c2571a}.news-sec.calm .news-tag{background:#5d4a8a}
.story{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:16px 18px;margin:12px 0}
.story h3{margin:0 0 8px;font-size:19px;line-height:1.3}
.story p{margin:6px 0}
.story strong{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.news-arch{grid-column:2;grid-row:1 / span 10;align-self:start;position:sticky;top:80px;font-size:14px}
@media (max-width:860px){.news-arch{grid-column:1;grid-row:auto;position:static}}
.news-arch ul{padding-left:18px}
.news-note{font-size:12px;color:var(--mute)}
/* ---- Vocabulary Hall ---- */
.vq{width:100%;max-width:520px;font:inherit;font-size:17px;padding:12px 14px;border:2px solid var(--room);border-radius:6px;margin:14px 0 10px;box-sizing:border-box}
.vchips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.chip{font:inherit;font-size:12px;cursor:pointer;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 10px;color:var(--ink)}
.chip.on{background:var(--room);border-color:var(--room);color:#fff}
.az{display:flex;flex-wrap:wrap;gap:4px}
.az a{font-family:var(--mono);font-size:13px;text-decoration:none;padding:4px 8px;border-radius:3px;background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.vocab-main{padding:24px 0 60px}
.letter h2{font-family:var(--serif);font-weight:400;font-size:40px;margin:22px 0 6px;color:var(--ink)}
.term{background:var(--surface);border:1px solid var(--line);border-left:4px solid #7a2e3b;border-radius:4px;padding:12px 16px;margin:10px 0;scroll-margin-top:80px}
.term.hit{outline:3px solid var(--signal)}
.term h3{margin:0 0 4px;font-size:19px}
.term p{margin:4px 0;font-size:15px}
.term b{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mute);margin-right:4px}
.t-used a{font-family:var(--mono);font-size:12px;margin-right:6px}
.words{margin:14px 0 4px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);border-radius:4px;padding:8px 12px}
.words summary{cursor:pointer}
.words-list{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.words-list a{font-size:13px;padding:3px 8px;border-radius:999px;background:var(--surface);color:var(--ink);text-decoration:none}
.words-more{font-size:13px}
/* ---- English from Zero: picture words ---- */
.pw,.psx{margin:14px 0;padding:14px;border-radius:8px;background:var(--surface);border:2px solid var(--line)}
.pw .s-label,.psx .s-label{color:#a8641a}
.pw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;margin-top:10px}
.pw-card{position:relative;text-align:center;background:var(--surface);border:2px solid var(--line);border-radius:14px;padding:8px 6px 10px;transition:transform .15s}
.pw-card.on{transform:scale(1.06);border-color:var(--line);box-shadow:0 6px 16px rgba(242,160,61,.35)}
.pw-pic{display:block;width:100%;border:0;background:none;cursor:pointer;padding:0}
.pw-pic img{width:100%;max-width:110px;height:auto;aspect-ratio:1}
.pw-word{font-size:22px;font-weight:800;margin-top:4px;color:var(--ink)}
.pw-hint{font-size:14px;color:#7a6a50;min-height:1em}
.pw-slow{position:absolute;top:6px;right:6px;width:32px;height:32px;border-radius:50%;border:0;background:#f7efe0;color:#a8641a;cursor:pointer;display:flex;align-items:center;justify-content:center}
.pw-slow:hover{background:#f2c94c}
.pw-bar{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.pw-btn{font:inherit;font-size:17px;font-weight:800;cursor:pointer;border:0;border-radius:999px;padding:12px 20px;background:#2b2723;color:#fff}
.pw-btn.game{background:#2e9e5b}
.pw-btn:hover{filter:brightness(1.15)}
.pw-game{margin-top:14px;padding:14px;border-radius:12px;background:#e9f7ee;border:2px solid #2e9e5b}
.pw-ghead{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.pw-gmsg{font-size:20px;font-weight:800;margin-right:auto}
.pw-stars{font-size:26px;color:#f2a03d;letter-spacing:2px}
.pw-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-top:12px}
.pw-opt{border:3px solid var(--line);background:var(--surface);border-radius:16px;padding:8px;cursor:pointer}
.pw-opt img{width:100%;max-width:120px;aspect-ratio:1}
.pw-opt.yes{border-color:#2e9e5b;background:#d6f5e1;animation:pwyes .4s}
.pw-opt.no{border-color:#e57373;animation:pwno .4s}
@keyframes pwyes{50%{transform:scale(1.1)}}
@keyframes pwno{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.ps-list{display:grid;gap:10px;margin-top:10px}
.ps-row{display:flex;align-items:center;gap:10px;background:var(--surface);border:2px solid var(--line);border-radius:14px;padding:8px 10px}
.ps-row.on{border-color:var(--line)}
.ps-play{flex:none;width:48px;height:48px;border-radius:50%;border:0;background:#2e9e5b;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.ps-mid{flex:1}
.ps-line{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px}
.ps-w{display:flex;flex-direction:column;align-items:center}
.ps-w img{width:64px;height:64px}
@media (max-width:560px){.ps-w img{width:50px;height:50px}}
.ps-t{font-size:20px;font-weight:700}
.ps-w.pic .ps-t{color:#a8641a}
.ps-row .pw-slow{position:static;flex:none}
@media (max-width:560px){.pw-grid{grid-template-columns:repeat(2,1fr)}.pw-word{font-size:20px}}

/* country (2026-11-12) */
#ctypick{font:inherit;font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;border:1.5px solid currentColor;border-radius:999px;padding:6px 10px;background:transparent;color:inherit;max-width:150px}
.cty{border:2px solid #2f6f9f;border-radius:14px;padding:12px 14px;margin:14px 0;background:#f2f8fc}
.cty .s-label{color:#2f6f9f}
.cty-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.cty-tab{border:1.5px solid #2f6f9f;background:var(--surface);color:#2f6f9f;border-radius:999px;padding:4px 12px;font:inherit;font-size:14px;cursor:pointer}
.cty-tab.on{background:#2f6f9f;color:#fff}
.cty-none{font-size:14px;color:#6b4a1a;background:#fff4dc;border-radius:8px;padding:6px 10px;margin:6px 0}
.cty-only{background:#fff4dc;border:1.5px solid #e2b04a;border-radius:10px;padding:10px 14px;margin:12px 0;font-size:15px}
.cty-only .cty-alts a{margin-right:10px;font-weight:700}
.cty-ask{position:fixed;inset:0;background:rgba(20,16,12,.55);display:flex;align-items:center;justify-content:center;z-index:9999;padding:16px}
.cty-card{background:var(--surface);border-radius:18px;max-width:460px;width:100%;padding:22px 22px 18px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.cty-card h2{margin:0 0 6px;font-size:26px}
.cty-card p{margin:0 0 14px;font-size:15px;line-height:1.45}
.cty-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cty-btn{font:inherit;font-size:16px;font-weight:700;padding:12px;border-radius:12px;border:2px solid #2b2723;background:var(--surface);cursor:pointer}
.cty-btn:hover{background:#2b2723;color:#fff}

/* feedback (2026-11-12) */
.fb-open{font:inherit;font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;border:1.5px solid currentColor;border-radius:999px;padding:6px 12px;background:transparent;color:inherit;cursor:pointer}
.fb-wrap{position:fixed;inset:0;background:rgba(20,16,12,.55);display:flex;align-items:center;justify-content:center;z-index:9999;padding:16px}
.fb-card{background:var(--surface);border-radius:18px;max-width:480px;width:100%;padding:20px 22px;box-shadow:0 20px 60px rgba(0,0,0,.3);max-height:92vh;overflow:auto}
.fb-card h2{margin:0 0 10px;font-size:24px}
.fb-q{font-weight:700;margin:10px 0 4px}
.fb-stars{display:flex;gap:4px}
.fb-star{font-size:30px;line-height:1;background:none;border:0;color:#d9cdb4;cursor:pointer;padding:0 2px}
.fb-star.on{color:#f2a03d}
.fb-kind,.fb-msg,.fb-mail{width:100%;box-sizing:border-box;font:inherit;font-size:15px;border:1.5px solid var(--line);border-radius:10px;padding:8px 10px;margin-top:6px;background:var(--surface)}
.fb-note{font-size:12px;color:#7a6a50;margin:8px 0 0}
.fb-info{color:var(--ink);font-size:14px;margin:6px 0 0;min-height:1em}
.fb-row{display:flex;gap:8px;margin-top:10px}
.fb-send{font:inherit;font-weight:700;background:#2e9e5b;color:#fff;border:0;border-radius:999px;padding:10px 22px;cursor:pointer}
.fb-close{font:inherit;background:transparent;border:1.5px solid #2b2723;border-radius:999px;padding:10px 18px;cursor:pointer}
.brand{white-space:nowrap}
.price{white-space:nowrap}
#ctypick{font-size:11px;padding:5px 8px;border-width:1px;max-width:130px}
.fb-open{font-size:11px;padding:5px 10px;border-width:1px}
@media (max-width:1100px){.top nav{gap:10px}.brand .tag{display:none}}
@media (max-width:900px){.price{font-size:10px;padding:5px 9px}.top{padding:10px 14px}}
@media (max-width:860px){.top{flex-wrap:wrap;row-gap:8px}.top nav{flex-wrap:wrap;row-gap:6px}}
@media (max-width:560px){.brand{font-size:12px}#ctypick{max-width:132px}.fb-open{padding:4px 8px}}
.cty-only{color:var(--ink)}.cty-only a{color:var(--ink)}
.cty{color:var(--ink)}.cty a{color:#1d5f8f}

/* sign-up and buy (2026-11-12) */
button.price{border:0;cursor:pointer;font:inherit;font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;font-size:11px}
.acc-sub{margin:0 0 8px;color:#5c5240}
.acc-l{display:block;margin:8px 0 0;font-weight:700;font-size:14px}
.acc-l span{display:block}
.acc-c{display:flex;gap:8px;align-items:flex-start;font-size:14px;margin:10px 0 0;line-height:1.35}
.acc-c input{margin-top:3px;width:18px;height:18px;flex:none}
.acc-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.acc-switch{background:none;border:0;color:#1d5f8f;text-decoration:underline;font:inherit;font-size:14px;cursor:pointer;margin-top:10px;padding:0;display:block;text-align:left}

/* learner accounts and the lock (2026-11-12) */
.acct-btn{font:inherit;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;border:1px solid currentColor;border-radius:999px;padding:5px 10px;background:transparent;color:inherit;cursor:pointer}
button.price.is-member{background:#2e9e5b}
.locked{margin:14px 0 6px;padding:16px 18px;border:2px dashed var(--line);border-radius:14px;background:var(--surface);color:var(--ink)}
.locked .lk-msg{margin:0 0 10px;font-size:16px}
.locked .lk-row{margin:0;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.locked .price{font-size:12px;padding:8px 14px}
.lk-in{font:inherit;background:none;border:1px solid #2b2723;border-radius:999px;padding:7px 14px;cursor:pointer;color:var(--ink)}
.acct-page{color:var(--ink)}
.acct-main{max-width:720px;margin:0 auto;padding:34px 20px 60px;font-size:17px;line-height:1.5}
.acct-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin:12px 0}
.acct-name{font-size:22px;font-weight:800;margin:0}
.acct-muted{color:#7a6f5e}
.acct-pill{display:inline-block;border-radius:999px;padding:2px 10px;font-weight:700;font-size:14px;background:var(--surface)}
.acct-pill.on{background:#d8f0e1;color:#14532d}
.acct-cert{display:flex;flex-direction:column;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:8px 0}
.acct-cert span{color:#7a6f5e;font-size:14px}.acct-cert a{font-size:14px;word-break:break-all}
.foot-links{font-size:14px;margin:0 0 10px}.foot-links a{text-decoration:underline}

/* ---------- learning paths (2026-11-14) ---------- */
.lp-badge,.stepno{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--room,var(--signal));color:var(--room,var(--signal));border-radius:999px;padding:2px 8px;white-space:nowrap}
.card .stepno{align-self:flex-start}
.step-group{margin:4px 0 8px}
.step-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin:8px 0 12px;font-size:16px}
.step-head small{flex-basis:100%;color:var(--mute);font-size:14px}
.room-head .lp-link{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--edge);border-radius:999px;padding:4px 10px;text-decoration:none;margin-left:10px;white-space:nowrap}
.room-head .lp-link:hover{background:var(--fill);color:var(--on-fill)}
.lp-start{padding:40px 0 12px;border-bottom:1px solid var(--line)}
.lp-start h2{font-size:28px;margin:0;font-weight:850}
.lp-lede{color:var(--ink-2);margin:6px 0 16px}
.lp-goals{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;padding-bottom:24px}
.lp-goal{border:1px solid var(--line);border-radius:4px;padding:14px 16px;background:var(--surface)}
.lp-goal h3{margin:0 0 8px;font-size:17px}
.lp-goal ol,.lp-courses{margin:0;padding-left:20px;font-size:14px}
.lp-goal li,.lp-courses li{margin:3px 0}
.lp-num{font-family:var(--mono);font-size:11px;color:var(--mute)}
.lp-line{margin:14px 0 4px;font-size:15px}
.lp-line p{margin:2px 0}
.lp-line a{color:inherit}
.lp-next b{font-family:var(--mono);font-size:12px;font-weight:600}
.lp-main{padding:32px 0 56px}
.lp-steps{list-style:none;margin:0;padding:0}
.lp-step{border-bottom:1px solid var(--line);padding:18px 0}
.lp-step-head{display:flex;align-items:baseline;gap:12px}
.lp-step-head h2{margin:0;font-size:22px}
.lp-why{color:var(--ink-2);margin:6px 0 10px}
.lp-courses small{font-family:var(--mono);font-size:10px;color:var(--mute);text-transform:uppercase;margin-left:4px}
.lp-index{list-style:none;padding:0;margin:0 0 24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.lp-index a{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-left:4px solid var(--room);border-radius:4px;padding:12px 14px;text-decoration:none;background:var(--surface)}
.lp-index a svg{width:36px;height:36px;flex:none}
.lp-index small{display:block;font-family:var(--mono);font-size:11px;color:var(--mute)}

  /* ===== campus buildings (adapt to Space / Nature) ===== */
  .bld { --c:var(--cs); }
  html.nature .bld { --c:var(--cn); }
  .bsvg { display:block; overflow:visible; filter:drop-shadow(0 0 3px var(--c)); }
  .bsvg .b-w, .bsvg .b-w2, .bsvg .b-g, .bsvg .b-a, .bsvg .b-dk, .bsvg .b-rf, .bsvg .b-wh, .bsvg .b-flag { stroke:var(--c); stroke-width:1.8; stroke-linejoin:round; }
  .bsvg .b-ln, .bsvg .b-hand, .bsvg .b-rib, .bsvg .b-glass-ln { fill:none; stroke:var(--c); stroke-width:2; stroke-linecap:round; }
  .bsvg .b-rib { stroke-width:1.2; opacity:.7; } .bsvg .b-scope { fill:none; stroke:var(--c); stroke-width:6; stroke-linecap:round; }
  .bsvg .b-w { fill:#18214c; } .bsvg .b-w2 { fill:#252f68; } .bsvg .b-g { fill:rgba(94,242,255,.2); } .bsvg .b-a { fill:var(--c); } .bsvg .b-dk { fill:#070b1c; }
  .bsvg .b-rf { fill:#2f3b7a; } .bsvg .b-wh { fill:#dfe8ff; } .bsvg .b-win { fill:#2c3b7e; } .bsvg .b-lit { fill:#5ef2ff; }
  .bsvg .b-tree { display:none; } .bsvg .b-trunk { fill:#6b4f3a; stroke:#24332b; stroke-width:1; } .bsvg .b-leaf { fill:#3f9f5f; stroke:#24332b; stroke-width:1.2; } .bsvg .b-leaf2 { fill:#6cc77a; }
  .bsvg .b-neon { display:inline; } .bsvg .b-beacon { fill:var(--c); filter:drop-shadow(0 0 4px var(--c)); }
  html.nature .bsvg { filter:none; }
  html.nature .bsvg .b-w, html.nature .bsvg .b-w2, html.nature .bsvg .b-g, html.nature .bsvg .b-a, html.nature .bsvg .b-dk, html.nature .bsvg .b-rf, html.nature .bsvg .b-wh, html.nature .bsvg .b-flag,
  html.nature .bsvg .b-ln, html.nature .bsvg .b-hand, html.nature .bsvg .b-rib, html.nature .bsvg .b-scope, html.nature .bsvg .b-glass-ln { stroke:#24332b; }
  html.nature .bsvg .b-w { fill:#f7f2e6; } html.nature .bsvg .b-w2 { fill:#e8dfc8; } html.nature .bsvg .b-g { fill:#bfe6f2; } html.nature .bsvg .b-dk { fill:#2c3e37; }
  html.nature .bsvg .b-rf { fill:#7cc36f; } html.nature .bsvg .b-wh { fill:#fff; } html.nature .bsvg .b-win { fill:#cfe9f5; } html.nature .bsvg .b-lit { fill:#ffe3a3; }
  html.nature .bsvg .b-tree { display:inline; } html.nature .bsvg .b-neon { display:none; } html.nature .bsvg .b-glass-ln { stroke:#9ec3dd; }

/* =====================================================================================================
   SPACE + NATURE LOOKS (2026-11-14). Everything above uses the theme variables; this layer adds the
   futuristic finish: glass, glow, rounded shapes, the look switch, David, and the 2D campus.
   ===================================================================================================== */
body{font-family:var(--sans);background:var(--pagebg),var(--paper);background-attachment:fixed;color:var(--ink);background-size:auto}
body:before{content:"";position:fixed;inset:0;background:var(--stars);opacity:.75;pointer-events:none;z-index:-1}
h1,h2,h3,.brand{font-family:var(--head)}
::selection{background:var(--signal);color:var(--on-fill)}

/* top bar: glass */
.top{background:color-mix(in srgb,var(--paper) 78%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);gap:14px;flex-wrap:wrap}
.brand{font-weight:800;letter-spacing:.12em}
.brand .tag{border-color:var(--edge);color:var(--signal)}
.mark{border-color:var(--signal);box-shadow:var(--glow)}
.mark:after{background:var(--fill)}
.top nav{gap:12px;flex-wrap:wrap;justify-content:flex-end}
.top nav select,.top nav button{border-radius:999px}
.price{background:var(--fill);color:var(--on-fill);border:0;font-weight:700;box-shadow:var(--glow);padding:8px 14px;cursor:pointer}
.lookpick{display:inline-flex;gap:2px;padding:3px;border-radius:999px;border:1px solid var(--line);background:var(--surface)}
.lookpick button{border:0;background:transparent;color:var(--mute);font:600 12px/1 var(--sans);padding:6px 10px;border-radius:999px;cursor:pointer;text-transform:none;letter-spacing:0}
.lookpick button.on{background:var(--fill);color:var(--on-fill)}

/* rounded, glassy surfaces */
.facts,.content,.exercise,.card,.cat-tile,.lp-goal,.country,.cty,.steps,.yt,.quizbox,.exam,.nb-panel,.acc-modal .acc-card,.fb-card{border-radius:18px}
.facts,.content{background:var(--surface);border-color:var(--line)}
.exercise{background:var(--surface-2);border-color:var(--edge)}
table{border-radius:12px;overflow:hidden}
th{background:var(--surface-2);color:var(--ink)}
.frame,.player{border-radius:18px}
code{background:var(--surface-2)}
.kid{background:var(--surface-2);color:var(--ink);border:1px solid var(--edge);border-radius:18px;box-shadow:var(--glow)}
.kid:before{background:var(--fill);border-radius:18px 0 0 18px}
.k-label,.exercise .s-label,.l-num{color:var(--signal)}
.l-num{border-color:var(--signal);border-radius:999px}
.kid p{font-family:var(--sans);font-weight:600}
blockquote{font-family:var(--sans);font-style:normal;font-weight:600}
.ans{background:var(--ball);color:var(--ink);border-radius:8px}

/* course hero (night strip): space glow / forest */
.hero{background:radial-gradient(800px 360px at 85% -20%,rgba(157,123,255,.35),transparent 60%),var(--night)}
html.nature .hero{background:radial-gradient(700px 320px at 90% -20%,rgba(255,214,110,.35),transparent 60%),linear-gradient(160deg,#0f2f24,#16402f)}
.hero:before{opacity:.25}
.hero h1 .serif{background:var(--fill);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:normal;font-weight:800}
.school{border-radius:999px;color:var(--ball)}

/* library cards */
.card{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-top:3px solid var(--room,var(--signal))}
.card.live{background:var(--surface);color:var(--ink);border-color:var(--line);border-top-color:var(--room,var(--signal))}
.card.live .lv{color:var(--signal)}
.card.live:hover,.card:hover{transform:translateY(-3px);box-shadow:0 0 24px -8px var(--room,var(--signal))}
.chip{border-radius:999px}
.chip.on{background:var(--fill);color:var(--on-fill);border-color:transparent}
.foot{background:var(--night);color:color-mix(in srgb,var(--on-dark) 70%,transparent)}

/* ---------- home: hero with David ---------- */
.th-hero{position:relative;overflow:hidden;padding:46px 0 70px;border-bottom:1px solid var(--line)}
.th-hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:200px;pointer-events:none;background:var(--hills,none)}
.th-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:36px;align-items:center;position:relative;z-index:1}
.th-hero .school{border:1px solid var(--line);color:var(--signal);background:var(--surface)}
.th-hero h1{font-size:clamp(40px,6vw,68px);line-height:1.02;margin:16px 0 14px;font-weight:800;letter-spacing:-.01em}
.th-hero h1 .serif{background:var(--fill);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:normal;font-weight:800;font-family:var(--head)}
.th-hero .manifesto{color:var(--ink-2);border-left:3px solid var(--signal);font-size:clamp(17px,2vw,21px);font-weight:600;max-width:640px}
.th-hero .lede{color:var(--mute);font-size:17px}
.th-hero .meta li{color:var(--ink-2);border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.th-hero .meta a{color:inherit}
.th-ask{border-radius:24px;padding:18px;margin:18px 0 6px;max-width:620px;background:color-mix(in srgb,var(--surface) 82%,transparent);border:1px solid var(--line);backdrop-filter:blur(10px)}
.th-ask b{display:block;font-family:var(--head);font-size:18px;margin-bottom:10px}
.th-goals{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.th-goal{border-radius:14px;padding:10px 6px;font:700 13px/1.2 var(--sans);text-align:center;background:var(--surface-2);border:1px solid var(--line);color:var(--ink);cursor:pointer;text-decoration:none}
.th-goal i{display:block;font-style:normal;font-size:20px;margin-bottom:4px}
.th-goal:hover{border-color:var(--signal);box-shadow:var(--glow)}
.th-stage{position:relative;min-height:440px}
.th-david{position:absolute;left:46%;top:60px;transform:translateX(-50%);width:280px;animation:thbob 3.4s ease-in-out infinite}
@keyframes thbob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-10px)}}
.th-bubble{position:absolute;right:0;top:0;border-radius:18px;padding:12px 16px;font-weight:700;font-size:15px;max-width:240px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--glow)}
.th-float{position:absolute;border-radius:18px;padding:14px 16px;font-size:13px;background:color-mix(in srgb,var(--surface) 88%,transparent);border:1px solid var(--line);backdrop-filter:blur(10px)}
.th-float .k{font:700 10.5px/1 var(--mono);letter-spacing:.14em;color:var(--signal);text-transform:uppercase}
.th-float b{display:block;font-family:var(--head);font-size:16px;margin:6px 0 4px}
.th-f1{left:0;bottom:30px;width:240px}.th-f2{right:0;bottom:0;width:220px}
.th-bar{height:7px;border-radius:7px;background:var(--line);overflow:hidden}.th-bar i{display:block;height:100%;width:var(--w,30%);background:var(--fill)}
html.nature .th-hero{--hills:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpath d='M0 120 C 200 70, 420 110, 640 92 S 1000 60, 1200 90 V200 H0Z' fill='%23bfeacd' opacity='.7'/%3E%3Cpath d='M0 160 C 220 130, 460 165, 700 148 S 1040 130, 1200 150 V200 H0Z' fill='%23a3dfb7' opacity='.7'/%3E%3C/svg%3E") bottom/100% 100% no-repeat}
@media (max-width:900px){.th-grid{grid-template-columns:1fr}.th-goals{grid-template-columns:repeat(2,1fr)}.th-stage{min-height:0;display:grid;gap:10px}
  .th-david{position:relative;left:auto;top:auto;width:200px;margin:0 auto;animation:none;transform:none}.th-bubble,.th-float{position:static;width:auto;max-width:none}.th-bubble{order:-1;text-align:center}}

/* ---------- home: 2D campus (buildings follow the look) ---------- */
.th-campus{--ground:#0e1538;--groundtx:#eaf2ff;margin:34px 0 10px;border-radius:28px;overflow:hidden;position:relative;padding:30px 20px 0;border:1px solid var(--line);
  background:radial-gradient(520px 260px at 86% 0%,rgba(157,123,255,.38),transparent 60%),linear-gradient(180deg,#090e2a 0%,#141c48 100%)}
.th-campus:before{content:"";position:absolute;inset:0;background:radial-gradient(1.5px 1.5px at 8% 12%,#fff,transparent),radial-gradient(1px 1px at 22% 30%,#cff,transparent),radial-gradient(1.5px 1.5px at 40% 8%,#fff,transparent),radial-gradient(1px 1px at 58% 22%,#fff,transparent),radial-gradient(1.5px 1.5px at 76% 10%,#bdf,transparent),radial-gradient(1px 1px at 92% 28%,#fff,transparent);pointer-events:none}
html.nature .th-campus{--ground:#bfe8c6;--groundtx:#12362a;--curb:#7cc36f;background:radial-gradient(360px 220px at 88% 0%,rgba(255,214,110,.9),rgba(255,214,110,0) 70%),linear-gradient(180deg,#d6f2ff 0%,#eefbf2 100%)}
html.nature .th-campus:before{display:none}
.th-campus h2{position:relative;margin:0 0 4px;font-size:clamp(24px,3vw,32px);color:var(--groundtx)}
.th-campus p.hint{position:relative;margin:0 0 18px;color:var(--groundtx);opacity:.75}
.streets{display:grid;grid-template-columns:repeat(9,1fr);row-gap:20px;position:relative}
.streets .bld{display:flex;flex-direction:column;align-items:center;text-decoration:none;padding:0 3px;cursor:pointer;
  background:linear-gradient(to top,var(--ground) 0 44px,var(--curb,var(--c)) 44px 47px,transparent 47px)}
.streets .bld .bsvg{width:100%;max-width:128px;margin-bottom:-4px;transition:transform .25s}
.streets .bld:hover .bsvg{transform:translateY(-6px) scale(1.04)}
.streets .bld .nm{height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;font:700 11.5px/1.1 var(--sans);color:var(--groundtx);text-align:center}
.streets .bld .nm small{font-weight:600;font-size:10.5px;color:var(--c);margin-top:2px}
html.nature .streets .bld .nm small{color:#2e5a49}
@media (max-width:980px){.streets{grid-template-columns:repeat(6,1fr)}}
@media (max-width:640px){.streets{grid-template-columns:repeat(3,1fr)}.th-campus{padding:22px 10px 0}}
.bsvg .b-abc{fill:var(--c)} html.nature .bsvg .b-abc{fill:#24332b}
:root{--d-eye:#5ef2ff;--d-ant:#5ef2ff;--d-leaf:none;--d-glow:#5ef2ff}
html.nature{--d-eye:#3df2a0;--d-ant:#8bd346;--d-leaf:inline;--d-glow:#7dffb0}
:root{--fill-text:linear-gradient(90deg,#5ef2ff,#c08bff)} html.nature{--fill-text:linear-gradient(90deg,#0fa47a,#5fae2e)}
.th-hero h1 .serif,.hero h1 .serif{background:var(--fill-text);-webkit-background-clip:text;background-clip:text}
html.nature .th-hero .manifesto span,html.nature .manifesto span{color:#2e5a49}
button,select,input,textarea{color:inherit}
.reveal{color:var(--ink);border-color:var(--edge)}
.locked{border-color:var(--edge)}
.ans{color:#0b1020}
.exq-q.no .exq-why,.fb-info{color:#ff8a8a} html.nature .exq-q.no .exq-why,html.nature .fb-info{color:#b3261e}
.letter h2{color:#ff9ab0} html.nature .letter h2{color:#7a2e3b}
.cty-only a{color:var(--signal)}

/* ===== simpler home page, same layout and fonts as design/website.html (2026-11-14) ===== */
h1,h2,h3{font-weight:700;letter-spacing:-.01em}
.mono,.s-label,.k-label,.meta li,.school,.price,.tag,.card .num,.card .lv,.l-num,.room-no,.count,.lp-badge,.stepno{font-family:var(--sans);font-weight:700}
.top nav{font-family:var(--sans);text-transform:none;letter-spacing:0;font-size:14px;font-weight:600}
.top nav a{color:var(--mute)} .top nav a:hover{color:var(--ink)}
#langpick,#ctypick,.acct-btn{font-family:var(--sans);text-transform:none;letter-spacing:0;font-size:13px}
.price{text-transform:none;letter-spacing:0;font-size:13px;font-weight:800}
.kicker{display:inline-block;font:800 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--signal)}
.linklike{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
.th-hero{border-bottom:0;padding:56px 0 84px}
.th-hero h1{font-size:clamp(40px,5.6vw,64px);margin:14px 0 18px}
.th-hero .manifesto{border-left:0;padding-left:0;font-weight:500;color:var(--ink-2);font-size:18px;line-height:1.55;margin:0 0 24px}
html.nature .th-hero .manifesto span,.th-hero .manifesto span{color:var(--ink-2)}
.th-goal{font-family:var(--sans)}
.th-goal.on{border-color:var(--signal);box-shadow:var(--glow);background:color-mix(in srgb,var(--signal) 14%,var(--surface-2))}
.th-answer{margin-top:12px;padding:12px 14px;border-radius:14px;font-size:14px;background:color-mix(in srgb,var(--signal) 10%,transparent);border:1px solid color-mix(in srgb,var(--signal) 40%,transparent)}
.th-answer a{color:var(--signal);font-weight:700}
.th-answer .th-all{margin-left:6px;white-space:nowrap}
.hp-meta{list-style:none;padding:0;margin:22px 0 0;display:flex;gap:18px;flex-wrap:wrap;font-size:14px;color:var(--mute)}
.hp-meta li:before{content:"◆ ";color:var(--signal)}
.hp-sec{padding:84px 0;scroll-margin-top:60px}
.hp-sec .sh{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px;flex-wrap:wrap}
.hp-sec .sh h2{font-size:clamp(28px,3.4vw,38px);line-height:1.1;margin:8px 0 0}
.hp-sec .sh p{margin:8px 0 0;color:var(--mute);font-size:17px;max-width:560px;line-height:1.5}
.hp-search{display:flex;align-items:center;gap:8px;border-radius:16px;padding:6px 6px 6px 16px;background:var(--surface);border:1px solid var(--line);min-width:400px;color:var(--mute)}
.hp-search input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:15px;color:var(--ink);outline:none}
.hp-search button{border:0;border-radius:12px;padding:10px 16px;background:var(--fill);color:var(--on-fill);font:800 14px var(--sans);cursor:pointer}
.hp-sec .th-campus{margin:0}
.hp-box{border-radius:28px;padding:26px 28px 22px;background:var(--surface);border:1px solid var(--line)}
.hp-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.hp-chip{--c:var(--cs);font:700 13px/1 var(--sans);padding:9px 13px;border-radius:999px;cursor:pointer;color:var(--ink);background:var(--surface-2);border:1px solid var(--line)}
html.nature .hp-chip{--c:var(--cn)}
.hp-chip.on{border-color:var(--c);box-shadow:0 0 12px -3px var(--c);color:var(--c)}
html.nature .hp-chip.on{color:var(--ink);background:color-mix(in srgb,var(--c) 14%,#fff)}
.hp-track{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);gap:14px;overflow-x:auto;padding:22px 4px 6px}
.hp-track:before{content:"";position:absolute;left:14px;right:14px;top:33px;height:5px;border-radius:5px;background:var(--fill);box-shadow:var(--glow)}
.hp-stop{position:relative;padding-top:28px;font-size:13.5px;line-height:1.35;text-decoration:none;color:var(--ink)}
.hp-stop:before{content:"";position:absolute;left:4px;top:2px;width:18px;height:18px;border-radius:50%;background:var(--surface);border:3px solid var(--signal);box-shadow:0 0 10px -2px var(--signal)}
.hp-stop:first-child:before{background:var(--signal)}
.hp-stop .n{font:800 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--signal)}
.hp-stop b{display:block;margin:5px 0 3px;font-size:14px} .hp-stop small{color:var(--mute)}
.hp-stop:hover b{color:var(--signal)}
.hp-open{margin:14px 0 0} .hp-open a{color:var(--signal);font-weight:800;text-decoration:none}
.hp-how{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.hp-card{border-radius:24px;padding:24px;background:var(--surface);border:1px solid var(--line)}
.hp-card .num{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font:700 18px var(--head);color:var(--on-fill);background:var(--fill);margin-bottom:14px}
.hp-card h3{font-size:21px;margin:0 0 8px} .hp-card p{margin:0;color:var(--mute);font-size:15.5px;line-height:1.5}
.hp-app{border-radius:32px;padding:40px 44px;display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;background:var(--surface);border:1px solid var(--line)}
.hp-app h2{font-size:clamp(28px,3.2vw,36px);margin:8px 0 12px} .hp-app p{color:var(--mute);font-size:17px;line-height:1.55;margin:0 0 18px;max-width:520px}
.hp-soon{display:inline-block;padding:11px 18px;border-radius:999px;border:1px dashed var(--edge);color:var(--mute);font-weight:800}
.hp-phones{display:flex;gap:16px}
.hp-ph{width:150px;height:300px;border-radius:30px;border:6px solid #05070f;display:grid;place-items:center;font-size:44px;box-shadow:0 20px 40px -14px rgba(0,0,0,.5)}
.hp-ph.space{background:radial-gradient(160px 120px at 80% 0%,#3a2a8a,transparent 60%),linear-gradient(#0b1030,#131a46)}
.hp-ph.nature{background:radial-gradient(130px 100px at 90% 0%,rgba(255,214,110,.85),transparent 70%),linear-gradient(#dcf6ff,#e6f9ec)}
.hp-prices{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.hp-pc{border-radius:28px;padding:30px;background:var(--surface);border:1px solid var(--line)}
.hp-pc.main{border-color:var(--signal);box-shadow:0 0 50px -18px var(--signal)}
.hp-pc .big{font:700 clamp(36px,4.4vw,52px)/1.1 var(--head);margin:10px 0 0;color:var(--ink)}
.hp-pc ul{list-style:none;padding:0;margin:18px 0 22px;display:grid;gap:10px;font-size:15.5px}
.hp-pc li:before{content:"✓  ";color:var(--signal);font-weight:800}
.hp-btn{display:inline-block;border-radius:16px;padding:14px 22px;font:800 15px var(--sans);text-decoration:none;cursor:pointer;border:0;background:var(--fill);color:var(--on-fill)}
.hp-btn.ghost{background:transparent;border:1px solid var(--edge);color:var(--ink)}
.hp-pc .price{font-size:15px;padding:14px 22px;border-radius:16px}
.hp-tax{font-size:13px;color:var(--mute);margin:10px 0 0}
.hp-note{font-size:13px;color:var(--mute);margin:16px 0 0;line-height:1.5}
.lib-head{padding:44px 0 4px} .lib-head h1{font-size:clamp(36px,5vw,54px);margin:10px 0 6px} .lib-head p{color:var(--mute);font-size:17px;margin:0}
@media (max-width:900px){.hp-how,.hp-prices,.hp-app{grid-template-columns:1fr}.hp-search{min-width:0;width:100%}.hp-phones{justify-content:center}.hp-sec{padding:56px 0}.hp-app{padding:26px}.hp-ph{width:120px;height:240px}}
button.price,.top .price{font-family:var(--sans);text-transform:none;letter-spacing:0;font-size:13px;font-weight:800}
.hp-pc button.price{font-size:15px}
@media (max-width:640px){.hp-chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}.hp-chip{flex:none}.hp-box{padding:20px 16px}}

/* ===== installed app (2026-11-14): bottom tab bar, app home, get-the-app page ===== */
.appbar{display:none}
html.standalone .appbar,.appbar.ap-always{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;justify-content:space-around;padding:8px 6px calc(10px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line)}
.appbar a{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:64px;text-decoration:none;font:700 11px/1.1 var(--sans);color:var(--mute)}
.appbar a i{font-style:normal;font-size:20px;opacity:.75}
.appbar a.on,.appbar a:hover{color:var(--signal)} .appbar a.on i{opacity:1}
html.standalone body{padding-bottom:78px}
html.standalone .nb-fab{bottom:92px}
html.standalone .top nav a[href$="library.html"],html.standalone .top nav a[href$="paths/index.html"]{display:none}
body.app-home{padding-bottom:84px}
.ap{max-width:560px;margin:0 auto;padding:calc(18px + env(safe-area-inset-top)) 16px 20px}
.ap-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.ap-head .ap-av{width:54px;height:62px;flex:none}
.ap-head small{display:block;font:800 11px/1 var(--sans);letter-spacing:.14em;color:var(--signal)}
.ap-head b{display:block;font:700 22px/1.2 var(--head);margin-top:4px}
.ap-look{margin-left:auto;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--surface);font-size:19px;cursor:pointer}
.ap-search{min-width:0;margin-bottom:14px}
.ap-continue{display:block;text-decoration:none;color:var(--ink);border-radius:20px;padding:16px;margin-bottom:6px;background:color-mix(in srgb,var(--signal) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--signal) 45%,transparent);box-shadow:var(--glow)}
.ap-continue b{display:block;font:700 17px/1.3 var(--head);margin-top:6px}
.ap-sec{margin-top:22px}
.ap-sec h2{font-size:19px;margin:0 0 12px}
.ap-goals{grid-template-columns:repeat(2,1fr)}
.ap-campus{padding:14px 6px 0;border-radius:20px}
.ap-campus .streets{grid-template-columns:repeat(3,1fr);row-gap:10px}
.ap-campus .bld .nm{height:34px;font-size:10px}
.ap-campus .streets .bld{background:linear-gradient(to top,var(--ground) 0 34px,var(--curb,var(--c)) 34px 36px,transparent 36px)}
.ap-me{border-radius:20px;padding:16px;background:var(--surface);border:1px solid var(--line)}
.ap-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-top:1px solid var(--line);font-weight:600}
.ap-row:first-of-type{border-top:0}
.ap-row select{max-width:60%;padding:8px 10px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2)}
.ap-btns{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.ap-btns .acct-btn{padding:8px 12px;border-radius:999px;border:1px solid var(--edge);background:transparent;cursor:pointer}
.ap-links{margin-top:10px;font-size:13px;color:var(--mute)} .ap-links a{color:var(--mute)}
.ga{max-width:760px;padding-top:40px;padding-bottom:70px}
.ga-top{display:flex;gap:20px;align-items:center;margin-bottom:22px}
.ga-icon{border-radius:24px;box-shadow:var(--glow);flex:none}
.ga-top h1{font-size:clamp(28px,4vw,40px);margin:0 0 8px} .ga-top p{margin:0;color:var(--mute);font-size:17px}
.ga-done{padding:14px 16px;border-radius:16px;background:color-mix(in srgb,var(--signal) 14%,transparent);border:1px solid var(--signal);font-weight:700}
.ga-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--surface);border:1px solid var(--line);margin:6px 0 18px}
.ga-tab{border:0;background:transparent;font:700 15px var(--sans);padding:10px 18px;border-radius:999px;cursor:pointer;color:var(--mute)}
.ga-tab.on{background:var(--fill);color:var(--on-fill)}
.ga-pane{border-radius:24px;padding:22px;background:var(--surface);border:1px solid var(--line)}
.ga-steps{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.ga-steps li{display:flex;gap:14px;align-items:flex-start;font-size:17px;line-height:1.45}
.ga-n{flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font:700 16px var(--head);background:var(--fill);color:var(--on-fill)}
.ga-share{vertical-align:-5px;color:var(--signal)}
.ga-note{margin:16px 0 0;font-size:14px;color:var(--mute)}
.ga-install{margin-bottom:18px}
.ga-pc{margin-top:18px;color:var(--mute);font-size:15px}
.off-david{width:160px;height:200px}
.linklike,.fb-open.linklike{text-transform:none;letter-spacing:0;font-family:inherit;font-size:inherit;font-weight:inherit;border:0;background:none;padding:0;color:inherit}

/* ===== Library as a real library (2026-11-14): courses are books on bookshelves, one bookcase per building ===== */
body.library{--case:linear-gradient(180deg,#0d1436,#111a46);--case-side:#1c2763;--case-line:rgba(94,242,255,.25);
  --plank:rgba(94,242,255,.16);--plank-top:#5ef2ff;--plank-shade:rgba(0,0,0,.45);--bh:236px;--bgap:42px;--pad:20px}
html.nature body.library{--case:linear-gradient(180deg,#f7ecd9,#f1e2c8);--case-side:#b9845a;--case-line:#d8bf9c;
  --plank:#a8734a;--plank-top:#d6a57a;--plank-shade:rgba(80,45,20,.28)}
/* the reading-room header: a row of spines */
.lib-spines{display:flex;align-items:flex-end;gap:3px;height:70px;margin:22px 0 0;padding:0 6px;border-bottom:8px solid var(--plank,#a8734a);border-radius:0 0 4px 4px;box-shadow:0 6px 0 -2px var(--plank-shade,rgba(0,0,0,.3))}
.lib-spines i{display:block;width:16px;border-radius:2px 2px 0 0;background:var(--sp,#3b6fd8);height:var(--h,56px);box-shadow:inset -3px 0 0 rgba(0,0,0,.2),inset 0 8px 0 -5px rgba(255,255,255,.35)}
.lib-spines i:nth-child(7n+1){--sp:#3b6fd8;--h:58px}.lib-spines i:nth-child(7n+2){--sp:#e0622e;--h:64px;width:20px}.lib-spines i:nth-child(7n+3){--sp:#0e9f6e;--h:50px}
.lib-spines i:nth-child(7n+4){--sp:#b8892b;--h:66px;width:22px}.lib-spines i:nth-child(7n+5){--sp:#7a4fb5;--h:54px}.lib-spines i:nth-child(7n+6){--sp:#d9466f;--h:60px;width:14px}.lib-spines i:nth-child(7n){--sp:#1f8a8a;--h:48px;transform:rotate(-8deg);transform-origin:bottom left;margin-right:6px}
html:not(.nature) .lib-spines i{box-shadow:inset -3px 0 0 rgba(0,0,0,.25),0 0 10px -3px var(--sp)}
/* each building is a bookcase */
body.library .school-row{border:0;margin:26px 0;padding:0 0 10px;border-radius:20px;background:var(--case);box-shadow:inset 12px 0 0 var(--case-side),inset -12px 0 0 var(--case-side),0 18px 40px -24px rgba(0,0,0,.6);overflow:hidden}
body.library .school-row .room-head{margin:0;padding:16px 26px 14px;border-bottom:4px solid var(--case-side);background:color-mix(in srgb,var(--case-side) 35%,transparent)}
body.library .school-row .room-head h2{margin:2px 0 0}
body.library .step-group{margin:0;padding:0 12px}
body.library .step-head{margin:16px 14px 0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
body.library .step-head b{display:inline-block;padding:5px 12px;border-radius:6px;font-size:14px;background:linear-gradient(180deg,#e9cf8c,#c99d48);color:#3a2a10;box-shadow:0 2px 0 rgba(0,0,0,.25)}
body.library .step-head small{color:var(--mute)}
/* the shelves: a plank under every row of books */
body.library .school-row .cards{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-auto-rows:var(--bh);column-gap:18px;row-gap:var(--bgap);
  padding:var(--pad) 22px calc(var(--bgap) - 6px);background-image:linear-gradient(to bottom,transparent 0 calc(var(--pad) + var(--bh) + 2px),var(--plank-top) calc(var(--pad) + var(--bh) + 2px) calc(var(--pad) + var(--bh) + 5px),var(--plank) calc(var(--pad) + var(--bh) + 5px) calc(var(--pad) + var(--bh) + 17px),var(--plank-shade) calc(var(--pad) + var(--bh) + 17px) calc(var(--pad) + var(--bh) + 23px),transparent calc(var(--pad) + var(--bh) + 23px));
  background-size:100% calc(var(--bh) + var(--bgap));background-repeat:repeat-y}
html:not(.nature) body.library .school-row .cards{filter:none}
/* each course is a hardcover book, face out */
body.library .school-row .card{--book:color-mix(in srgb,var(--room,#2b5797) 82%,#0b1030);position:relative;height:var(--bh);min-height:0;gap:8px;padding:16px 16px 12px 24px;border:0;border-radius:3px 12px 12px 3px;color:#fff;overflow:visible;
  background:linear-gradient(90deg,rgba(0,0,0,.38) 0 9px,rgba(255,255,255,.16) 9px 11px,transparent 11px),linear-gradient(160deg,color-mix(in srgb,var(--book) 80%,#fff),var(--book) 55%,color-mix(in srgb,var(--book) 80%,#000));
  box-shadow:0 12px 18px -10px rgba(0,0,0,.65),inset -2px 0 0 rgba(255,255,255,.18);transition:transform .2s,box-shadow .2s}
body.library .school-row .card:nth-child(3n+2){--book:color-mix(in srgb,var(--room,#2b5797) 62%,#3a1f12)}
body.library .school-row .card:nth-child(3n){--book:color-mix(in srgb,var(--room,#2b5797) 70%,#122a4a)}
body.library .school-row .card:after{content:"";position:absolute;right:-5px;top:7px;bottom:7px;width:6px;border-radius:0 4px 4px 0;background:repeating-linear-gradient(180deg,#f7f1e3 0 2px,#d8ccb2 2px 3px);box-shadow:1px 0 0 rgba(0,0,0,.2)}
body.library .school-row .card:hover{transform:translateY(-10px) rotate(-1.2deg);box-shadow:0 22px 26px -12px rgba(0,0,0,.7),0 0 22px -6px var(--room,#5ef2ff)}
body.library .school-row .card .num{color:#f3dfa6;font-size:10.5px;letter-spacing:.1em;opacity:.95}
body.library .school-row .card h3{flex:1;margin:0;padding:9px 0;border-top:1px solid rgba(243,223,166,.55);border-bottom:1px solid rgba(243,223,166,.55);font:700 15px/1.22 var(--head);color:#fff;
  display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 0 rgba(0,0,0,.35)}
body.library .school-row .card .about{display:none}
body.library .school-row .card .lv{align-self:flex-start;background:#f7f1e3;color:#2b2723;border-radius:5px;padding:4px 7px;font-size:10px;letter-spacing:.04em;box-shadow:0 1px 0 rgba(0,0,0,.3)}
body.library .school-row .card .lv span{color:#2b2723}
body.library .school-row .card .stepno{position:absolute;top:-6px;right:14px;z-index:1;padding:8px 6px 12px;font-size:9.5px;line-height:1;letter-spacing:.06em;text-transform:uppercase;border:0;border-radius:2px 2px 0 0;
  background:var(--ball,#ffcf4a);color:#2b2723;clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);box-shadow:none}
html.nature body.library .school-row .card .stepno{background:#e8574a;color:#fff}
body.library .school-row .card[data-level="Intermediate"] h3:after,body.library .school-row .card[data-level="Advanced"] h3:after,body.library .school-row .card[data-level="Expert"] h3:after{content:"";display:block}
body.library .school-row .card[data-level="Expert"]{box-shadow:0 12px 18px -10px rgba(0,0,0,.65),inset 0 0 0 2px #e9cf8c,inset -2px 0 0 rgba(255,255,255,.18)}
body.library .school-row .card:not(.live):not(.uni){filter:grayscale(.65);opacity:.72}
body.library #university-picks{padding:0 0 10px}
body.library #university-picks>h2,body.library #university-picks>.pick-note{padding:0 26px}
body.library #university-picks>h2{padding-top:18px}
body.library #university-picks .card{--room:#2b5797}
/* "Where to start": library catalog cards */
body.library .lp-goal{position:relative;border-radius:6px;padding:16px 16px 14px;background:#fffdf6;color:#2b2723;border:1px solid #e3d9c4;box-shadow:0 8px 16px -12px rgba(0,0,0,.5);
  background-image:linear-gradient(#e8574a,#e8574a),repeating-linear-gradient(180deg,transparent 0 23px,#cfe0ef 23px 24px);background-size:100% 2px,100% 100%;background-position:0 46px,0 52px;background-repeat:no-repeat,repeat}
body.library .lp-goal:before{content:"";position:absolute;left:50%;bottom:8px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--paper);box-shadow:inset 0 2px 3px rgba(0,0,0,.3)}
body.library .lp-goal h3{color:#2b2723;font-family:var(--mono);font-size:15px;text-transform:uppercase;letter-spacing:.06em;margin:0 0 18px}
body.library .lp-goal li{line-height:24px;margin:0}
body.library .lp-goal a{color:#1f4f8f} body.library .lp-goal .lp-num{color:#8a7f6b}
body.library .lp-goal ol{padding-bottom:26px}
html:not(.nature) body.library .lp-goal{background-color:#121a46;color:var(--ink);border-color:var(--line);
  background-image:linear-gradient(#5ef2ff,#5ef2ff),repeating-linear-gradient(180deg,transparent 0 23px,rgba(94,242,255,.1) 23px 24px)}
html:not(.nature) body.library .lp-goal h3{color:#5ef2ff} html:not(.nature) body.library .lp-goal a{color:#cfe9ff} html:not(.nature) body.library .lp-goal .lp-num{color:var(--mute)}
@media (max-width:640px){body.library{--bh:214px;--bgap:38px;--pad:16px}body.library .school-row .cards{grid-template-columns:repeat(2,1fr);column-gap:14px;padding-left:16px;padding-right:16px}
  body.library .school-row .card h3{font-size:14px;-webkit-line-clamp:6}body.library .school-row .room-head{padding:14px 20px}}
body.library .school-row .cards{grid-template-columns:repeat(auto-fill,minmax(172px,1fr))}
body.library .school-row .card h3{font-size:14.5px;line-height:1.2;-webkit-line-clamp:7}
body.library .school-row .card .lv{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;font-size:9.5px}
@media (max-width:640px){body.library .school-row .cards{grid-template-columns:repeat(2,1fr)}body.library .school-row .card h3{font-size:13.5px}}
.cat-grid{gap:12px;border:0}
.cat-tile{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.cat-tile .cat-about{color:var(--mute)} .cat-tile .cat-count{color:var(--signal)} .cat-tile .room-no{color:var(--mute)}
.cat-tile:hover{background:var(--surface-2);color:var(--ink);box-shadow:0 0 22px -8px var(--room)}
.cat-tile:hover .cat-about{color:var(--mute)}
@media (max-width:640px){body.library .school-row .cards{grid-template-columns:repeat(2,minmax(0,1fr))}body.library .step-group{padding:0 6px}}
body.library .school-row .card{min-width:0}
body.library .school-row .card .num{padding-right:46px}
@media (max-width:640px){body.library{--bh:246px}body.library .school-row .card{padding:14px 12px 10px 20px}body.library .school-row .card h3{font-size:13px;-webkit-line-clamp:8}body.library .school-row .card .num{font-size:9.5px}}
/* kids mode "In simple words" box: readable in both looks (2026-11-14) */
body.kids .kid{border-color:#ffb547;background:color-mix(in srgb,#ffb547 16%,var(--surface));color:var(--ink)}
body.kids .kid p{color:var(--ink)}
body.kids .kid .k-label{color:#ffb547}
html.nature body.kids .kid{background:#fff6e3;color:#2b2723} html.nature body.kids .kid p{color:#2b2723} html.nature body.kids .kid .k-label{color:#c46a00}
html.nature body.kids .exercise .s-label{color:#c46a00} body.kids .exercise .s-label{color:#ffb547}
.ask-btns .copied{color:var(--signal)}

/* ===== My learning (2026-11-14) ===== */
.ml{max-width:900px;padding-top:40px;padding-bottom:70px}
.ml-head h1{font-size:clamp(32px,4.6vw,48px);margin:8px 0 6px} .ml-head p{color:var(--mute);margin:0 0 22px;font-size:16px}
.ml-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.ml-stats div{border-radius:18px;padding:16px;background:var(--surface);border:1px solid var(--line);text-align:center}
.ml-stats b{display:block;font:700 32px/1.1 var(--head);color:var(--signal)} .ml-stats span{font-size:13px;color:var(--mute);font-weight:600}
.ml-stats div:first-child b:after{content:" 🔥";font-size:22px}
.ml-cont{margin:0 0 18px}
.ml-empty{border-radius:20px;padding:22px;background:var(--surface);border:1px dashed var(--edge)} .ml-empty p{margin:0 0 14px;font-size:16px}
.ml section{margin-top:24px} .ml section h2{font-size:22px;margin:0 0 12px}
.ml-list{display:grid;gap:10px}
.ml-item{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center;text-decoration:none;color:var(--ink);border-radius:16px;padding:14px 16px;background:var(--surface);border:1px solid var(--line)}
.ml-item:hover{border-color:var(--signal);box-shadow:var(--glow)}
.ml-num{grid-row:1/4;font:700 13px var(--sans);color:var(--signal);background:color-mix(in srgb,var(--signal) 14%,transparent);border-radius:10px;padding:8px 9px}
.ml-item b{font:700 16px/1.25 var(--head)}
.ml-bar{height:8px;border-radius:8px;background:var(--line);overflow:hidden} .ml-bar i{display:block;height:100%;background:var(--fill)}
.ml-item small{color:var(--mute);font-size:13px}
@media (max-width:640px){.ml-stats{grid-template-columns:repeat(2,1fr)}}
html.standalone .appbar a{min-width:56px}
/* readability fixes from the full-site check (2026-11-14) */
.cty{background:var(--surface-2);border-color:#6bb8ff;color:var(--ink)}
.cty .s-label{color:#6bb8ff} .cty-tab{border-color:#6bb8ff;color:#6bb8ff} .cty-tab.on{background:#6bb8ff;color:#0b1020}
html.nature .cty{border-color:#2f6f9f} html.nature .cty .s-label{color:#2f6f9f} html.nature .cty-tab{border-color:#2f6f9f;color:#2f6f9f} html.nature .cty-tab.on{background:#2f6f9f;color:#fff}
.cty-none,.cty-only{background:color-mix(in srgb,#e2b04a 16%,var(--surface));color:var(--ink)} .cty-only .cty-alts a{color:var(--signal)}
.news-tag{color:#fff}
.room-badge small{color:color-mix(in srgb,var(--room) 35%,#ffffff)}
.hero code,.th-hero code{background:rgba(255,255,255,.14);color:inherit}
html.nature{--signal:#0b8a66}
.news-tag a,a.news-tag{color:#fff}
.cty a{color:#9fd3ff} html.nature .cty a{color:#1f5a8a}
.hero .school{color:#fff;background:rgba(0,0,0,.28);border-color:rgba(255,255,255,.35)}
.hero.room .school{color:#fff;border-color:color-mix(in srgb,var(--room) 60%,#fff);background:color-mix(in srgb,var(--room) 45%,rgba(0,0,0,.35))}

/* Forgot password (2026-11-14): the "link sent" note and the reset page */
.acc-sent{color:var(--ink)!important;font-weight:600;line-height:1.45;font-size:15px}
.acc-forgot{font-size:14px}
.rs-ok{color:var(--ink);font-weight:600}
.acct-main a.price{text-decoration:none;display:inline-block}
.acc-sub{color:var(--ink);opacity:.85;font-size:15px;line-height:1.45}

/* 404 page (2026-11-14) */
.nf{text-align:center}.nf .nf-bot svg{width:170px;height:auto;margin:10px auto 0;display:block}
.nf h1{margin-top:8px}.nf-go{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:18px}.nf-go a{text-decoration:none}

/* ===== Profile / My account (2026-11-14) ===== */
.pf{max-width:880px;padding-top:26px;padding-bottom:50px}
.pf-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px 22px;margin:14px 0;box-shadow:0 10px 30px -22px rgba(0,0,0,.6)}
.pf-card h2{font-family:Jost,Futura,sans-serif;font-size:21px;margin:0 0 12px}
.pf-hero{display:flex;gap:24px;align-items:center;background:linear-gradient(135deg,var(--surface) 0%,var(--surface-2) 100%);position:relative;overflow:hidden}
.pf-hero::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:var(--fill);opacity:.12}
.pf-av-wrap{position:relative;flex:0 0 auto}
.pf-av{width:112px;height:112px;border-radius:50%;display:grid;place-items:center;font:800 40px Jost,Futura,sans-serif;color:var(--on-fill);
  background:var(--fill);box-shadow:var(--glow),0 0 0 4px var(--surface),0 0 0 6px var(--edge);overflow:hidden}
.pf-av.has-img{background:var(--surface-2)}
.pf-av img{width:100%;height:100%;object-fit:cover;display:block}
.pf-cam{position:absolute;right:-2px;bottom:-2px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:var(--surface);border:1px solid var(--edge);font-size:18px;box-shadow:0 4px 12px -4px rgba(0,0,0,.5)}
.pf-cam:hover{transform:scale(1.06)}
.pf-who{min-width:0;position:relative;z-index:1}
.pf-who h1{font-family:Jost,Futura,sans-serif;font-size:clamp(26px,4vw,36px);margin:4px 0 2px;overflow-wrap:anywhere}
.pf-mail{margin:0;color:var(--mute);overflow-wrap:anywhere}
.pf-tags{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 0 6px}
.pf-since{color:var(--mute);font-size:14px}
.pf-photo-btns{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:8px 0 2px}
.pf-up{cursor:pointer}
.pf-note{font-size:13px;color:var(--mute);margin:4px 0 0}
.pf-stats{margin:4px 0 6px}
.pf-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:12px 0 0}
.pf-row a{text-decoration:none}
.pf-lede{color:var(--ink-2);margin:0 0 6px;line-height:1.5}
.pf-form{display:grid;gap:4px;max-width:560px}
.pf-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pf-check{display:flex;gap:10px;align-items:flex-start;margin:8px 0 2px;color:var(--ink-2);font-size:15px;line-height:1.4}
.pf-check input{width:18px;height:18px;margin-top:2px;accent-color:#5ef2ff}
html.nature .pf-check input{accent-color:#0b8a66}
.pf-form select.fb-mail{appearance:auto}
.pf-form input[disabled]{opacity:.65}
.pf-cert{display:grid;grid-template-columns:auto 1fr auto;gap:2px 12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:14px;
  margin:8px 0;text-decoration:none;color:var(--ink);background:var(--surface-2)}
.pf-cert:hover{border-color:var(--edge)}
.pf-cert-ic{grid-row:span 2;font-size:26px}
.pf-cert small{color:var(--mute);grid-column:2}
.pf-cert em{grid-row:1/span 2;grid-column:3;font-style:normal;font-weight:700;font-size:14px;color:var(--signal)}
.pf-danger summary{cursor:pointer;font-weight:700;color:#ff8a8a;list-style:none}
.pf-danger summary::-webkit-details-marker{display:none}
.pf-danger summary::before{content:"▸ ";}
.pf-danger[open] summary::before{content:"▾ ";}
.pf-danger[open] summary{margin-bottom:10px}
html.nature .pf-danger summary{color:#b3261e}
.pf-del-btn{background:#c62828;color:#fff;border:0;border-radius:999px;padding:11px 20px;font-weight:700;cursor:pointer}
.pf-out{text-align:center;padding:40px 0}
.pf-out .pf-row{justify-content:center}
/* small photo in the top bar */
.acct-btn .acct-av{width:22px;height:22px;border-radius:50%;object-fit:cover;display:inline-grid;place-items:center;margin-right:7px;vertical-align:-6px;
  background:var(--fill);color:var(--on-fill);font:800 10px Jost,sans-serif;letter-spacing:0}
@media (max-width:620px){
  .pf-hero{flex-direction:column;text-align:center}.pf-tags,.pf-photo-btns{justify-content:center}
  .pf-two{grid-template-columns:1fr}.pf-card{padding:18px 16px}
  .pf-cert{grid-template-columns:auto 1fr}.pf-cert em{grid-column:2;grid-row:auto}
}

/* App home tagline (Bogs, 2026-11-14): "Learn a real skill. Build your future." + manifesto */
.ap-hero{margin:6px 0 14px}.ap-hero h1{font-family:Jost,Futura,sans-serif;font-size:clamp(26px,7vw,34px);line-height:1.08;margin:0 0 8px}
.ap-hero h1 .serif{background:var(--fill);-webkit-background-clip:text;background-clip:text;color:transparent}
.ap-manifesto{margin:0;color:var(--ink-2);font-size:15px;line-height:1.5}