/* KS2 Lesson Engine: Light Neumorphism (soft UI). One cool clay surface; depth comes only from paired shadows. */
@font-face{font-family:"Adventor";src:url(../fonts/adventor-400.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Adventor";src:url(../fonts/adventor-700.woff) format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Schola";src:url(../fonts/schola-400.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Schola";src:url(../fonts/schola-700.woff) format("woff");font-weight:700;font-style:normal;font-display:swap}

:root{
  color-scheme:light;
  --bg:#E0E5EC; --surface:#E0E5EC; --well:#E0E5EC; --fg:#3D4852; --muted:#6B7280; --placeholder:#A0AEC0; --on-accent:#fff; --line:transparent;
  --accent:#6C63FF; --accent-2:#8B84FF; --accent-3:#38B2AC; --heart:#F0476F;
  --sd:rgb(163 177 198 / .6); --sd2:rgb(163 177 198 / .7); --sl:rgb(255 255 255 / .5); --sl2:rgb(255 255 255 / .6);
  --ex:9px 9px 16px var(--sd),-9px -9px 16px var(--sl);
  --ex-hover:12px 12px 20px var(--sd2),-12px -12px 20px var(--sl2);
  --ex-sm:5px 5px 10px var(--sd),-5px -5px 10px var(--sl);
  --in:inset 6px 6px 10px var(--sd),inset -6px -6px 10px var(--sl);
  --in-deep:inset 10px 10px 20px var(--sd2),inset -10px -10px 20px var(--sl2);
  --in-sm:inset 3px 3px 6px var(--sd),inset -3px -3px 6px var(--sl);
  --r-xl:32px; --r:16px; --r-sm:12px;
  --f-display:"Plus Jakarta Sans","Poppins","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-body:"DM Sans","Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-kid:"Adventor","Century Gothic","Avenir Next","Plus Jakarta Sans",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  /* engine colours: used for icon glyphs and small accents only */
  --violet:#6C63FF; --indigo:#4F5BD5; --pink:#E2558A; --teal:#2C9C96; --green:#3B9A62; --blue:#3584D6;
  --orange:#E07B2E; --plum:#9A55CF; --gold:#C38A12; --cyan:#1A9CB8; --red:#D9534A;
  --c:var(--accent);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:max(9px,calc(16px * var(--m,1)));line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
[hidden]{display:none!important}
h1,h2,h3,h4{font-family:var(--f-display);letter-spacing:-.02em;color:var(--fg)}
a{color:var(--accent)}
button{font:inherit;color:inherit}
.i{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.i .f{fill:currentColor;stroke:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:12px}
::selection{background:rgb(108 99 255 / .22)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}

/* ---------- buttons, chips, segmented ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border:0;text-decoration:none;border-radius:var(--r);
  background:var(--surface);color:var(--fg);font-family:var(--f-display);font-weight:700;font-size:max(9px,calc(15px * var(--m,1)));letter-spacing:-.005em;cursor:pointer;white-space:nowrap;
  box-shadow:var(--ex-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease),color .3s}
.btn .i{width:19px;height:19px}
.btn:hover{transform:translateY(-1px);box-shadow:var(--ex)}
.btn:active{transform:translateY(.5px);box-shadow:var(--in-sm)}
.btn.primary{background:linear-gradient(135deg,var(--accent-2),var(--accent));color:#fff;box-shadow:6px 6px 12px rgb(108 99 255 / .32),-6px -6px 12px rgb(255 255 255 / .6),inset 1px 1px 0 rgb(255 255 255 / .25)}
.btn.primary:hover{box-shadow:9px 9px 18px rgb(108 99 255 / .38),-9px -9px 16px rgb(255 255 255 / .65),inset 1px 1px 0 rgb(255 255 255 / .25)}
.btn.primary:active{box-shadow:inset 4px 4px 8px rgb(60 52 190 / .45),inset -3px -3px 6px rgb(255 255 255 / .2)}
.btn.big{min-height:56px;font-size:max(9px,calc(16.5px * var(--m,1)));padding:0 28px;border-radius:18px}
.btn.wide{width:100%}
.btn.small{min-height:40px;padding:0 15px;font-size:max(9px,calc(13.5px * var(--m,1)));border-radius:13px}
.btn.icon{width:48px;padding:0}
.btn.small.icon{width:40px}
.btn[disabled]{opacity:.55;cursor:default;transform:none}
/* A Make button while the engine guard holds it (guard.js): raised, never pressed in; a clock, the time left and a bar
   along the bottom that fills up. "waiting" is the one-thing-at-a-time state. */
.btn.resting[disabled],.btn.waiting[disabled],.btn.primary.resting[disabled],.btn.primary.waiting[disabled]{opacity:1;cursor:default;transform:none;color:var(--accent);box-shadow:var(--ex-sm);font-variant-numeric:tabular-nums;
  background:linear-gradient(90deg,var(--accent-2),var(--accent)) left bottom / calc(var(--rest,0) * 100%) 4px no-repeat,var(--surface)}
.btn.waiting[disabled],.btn.primary.waiting[disabled]{color:var(--muted)}
.btn.resting[disabled]:hover,.btn.resting[disabled]:active,.btn.waiting[disabled]:hover,.btn.waiting[disabled]:active{box-shadow:var(--ex-sm);transform:none}
.btn.tint{color:var(--c)}
.linkbtn{background:none;border:0;padding:4px 2px;color:var(--accent);font-weight:700;font-size:max(9px,calc(14px * var(--m,1)));cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-display);font-size:max(9px,calc(12.5px * var(--m,1)));font-weight:700;color:var(--muted);padding:6px 12px;border-radius:999px;box-shadow:var(--in-sm);white-space:nowrap}
.chip .i{width:14px;height:14px;color:var(--c)}
.chip.c{color:var(--c)}
.kicker{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-display);font-weight:800;font-size:max(9px,calc(12px * var(--m,1)));letter-spacing:.14em;text-transform:uppercase;color:var(--c);margin:0}
.kicker .dot{width:8px;height:8px;border-radius:50%;background:var(--accent-3);box-shadow:0 0 0 4px rgb(56 178 172 / .16)}
.seg{display:inline-flex;gap:4px;padding:5px;border-radius:999px;box-shadow:var(--in-sm)}
.seg button{border:0;background:transparent;font-family:var(--f-display);font-weight:700;font-size:max(9px,calc(13.5px * var(--m,1)));color:var(--muted);padding:8px 15px;border-radius:999px;cursor:pointer;min-height:36px;transition:box-shadow .3s,color .3s}
.seg button[aria-pressed="true"],.seg button[aria-selected="true"]{color:var(--c);box-shadow:var(--ex-sm);background:var(--surface)}

/* ---------- inputs ---------- */
.fld{display:grid;gap:8px;min-width:0}
.fld > span,.fld > .lbl{font-family:var(--f-display);font-weight:700;font-size:max(9px,calc(14px * var(--m,1)));color:var(--fg)}
.fld .opt{font-weight:500;color:var(--muted)}
.fld .hint{font-size:max(9px,calc(13px * var(--m,1)));color:var(--muted);margin-top:-2px}
input[type=text],input[type=password],input[type=number],select,textarea{width:100%;min-width:0;border:0;border-radius:var(--r);background-color:var(--well);color:var(--fg);
  font-family:var(--f-body);font-size:max(9px,calc(15.5px * var(--m,1)));padding:14px 16px;box-shadow:var(--in);transition:box-shadow .3s var(--ease)}
input::placeholder,textarea::placeholder{color:var(--placeholder);opacity:1}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:2px;box-shadow:var(--in-deep)}
textarea{resize:vertical;min-height:96px;line-height:1.5}
select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center}
input[type=password]{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.02em}
.pills{display:flex;flex-wrap:wrap;gap:10px}
.pill{border:0;background:var(--surface);color:var(--muted);font-family:var(--f-display);font-weight:700;font-size:max(9px,calc(14px * var(--m,1)));min-height:44px;padding:0 17px;border-radius:999px;cursor:pointer;
  box-shadow:var(--ex-sm);transition:box-shadow .3s var(--ease),color .3s,transform .3s var(--ease)}
.pill:hover{color:var(--fg);transform:translateY(-1px)}
.pill[aria-pressed="true"]{box-shadow:var(--in-sm);color:var(--c);transform:none}
.try{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.try > span{font-size:max(9px,calc(13px * var(--m,1)));color:var(--muted);font-weight:500}
.try button{border:0;background:var(--surface);font-family:var(--f-body);font-weight:500;font-size:max(9px,calc(13px * var(--m,1)));color:var(--muted);padding:6px 12px;border-radius:999px;cursor:pointer;box-shadow:var(--ex-sm);transition:color .3s,box-shadow .3s}
.try button:hover{color:var(--c)}
.try button:active{box-shadow:var(--in-sm)}
.fine{margin:0;font-size:max(9px,calc(13px * var(--m,1)));color:var(--muted);line-height:1.5}
.notice{border-radius:var(--r);padding:12px 16px;font-size:max(9px,calc(14px * var(--m,1)));line-height:1.5;box-shadow:var(--in-sm);color:var(--fg)}
.notice.err{color:#B03A48}
.notice .btn{margin-top:10px}

/* ---------- header ---------- */
.top{position:fixed;inset:0 0 auto;z-index:50;transition:background .3s,box-shadow .3s}
.top.solid{background:rgb(224 229 236 / .78);-webkit-backdrop-filter:saturate(1.3) blur(14px);backdrop-filter:saturate(1.3) blur(14px);box-shadow:0 10px 24px -18px rgb(110 125 150 / .9)}
.top-in{height:76px;display:flex;align-items:center;gap:18px;max-width:1240px;margin:0 auto;padding:0 24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--fg);min-width:0;border-radius:18px}
.logo{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;flex:none;box-shadow:var(--ex-sm);background:var(--surface)}
.logo i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;box-shadow:var(--in-sm)}
.logo svg{width:20px;height:20px}
.brand-t{display:grid;line-height:1.15;min-width:0}
.brand-t b{font-family:var(--f-display);font-weight:800;font-size:max(9px,calc(16.5px * var(--m,1)));letter-spacing:-.02em;white-space:nowrap}
.brand-t span{font-size:max(9px,calc(12.5px * var(--m,1)));color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-t .hrt{color:var(--heart)}
.nav{display:flex;gap:6px;margin-left:auto}
.nav a{font-family:var(--f-display);font-weight:700;font-size:max(9px,calc(14px * var(--m,1)));color:var(--muted);text-decoration:none;padding:10px 14px;border-radius:999px;transition:box-shadow .3s,color .3s}
.nav a:hover{color:var(--fg);box-shadow:var(--ex-sm)}
.nav a[aria-current="page"]{color:var(--accent);box-shadow:var(--in-sm)}
.top-r{display:flex;align-items:center;gap:12px;margin-left:18px}
.conn{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 16px;border:0;border-radius:999px;background:var(--surface);box-shadow:var(--ex-sm);cursor:pointer;
  font-family:var(--f-display);font-weight:700;font-size:max(9px,calc(13.5px * var(--m,1)));color:var(--fg);transition:box-shadow .3s,transform .3s}
.conn:hover{box-shadow:var(--ex);transform:translateY(-1px)}
.conn .st{width:9px;height:9px;border-radius:50%;background:#E0A526;box-shadow:0 0 0 4px rgb(224 165 38 / .18)}
.conn.on .st{background:var(--accent-3);box-shadow:0 0 0 4px rgb(56 178 172 / .18)}
.menu-btn{display:none}
.mnav{position:fixed;top:84px;left:12px;right:12px;z-index:55;border-radius:28px;padding:16px;background:var(--surface);box-shadow:var(--ex);display:grid;gap:8px}
.mnav a{font-family:var(--f-display);font-weight:700;font-size:max(9px,calc(16px * var(--m,1)));color:var(--fg);text-decoration:none;padding:14px 16px;border-radius:16px}
.mnav a:active{box-shadow:var(--in-sm)}
.mnav .seg{justify-self:start;margin:6px 4px 2px}

/* ---------- dock ---------- */
.dock{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:45;width:max-content;max-width:calc(100vw - 16px);pointer-events:none}
.dock-panel{pointer-events:auto;display:flex;align-items:flex-end;gap:12px;height:70px;padding:0 16px 10px;border-radius:28px;max-width:100%;
  background:rgb(224 229 236 / .86);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:var(--ex)}
.dock-item{position:relative;flex:none;width:50px;height:50px;border:0;border-radius:50%;background:var(--surface);color:var(--c);cursor:pointer;display:grid;place-items:center;
  box-shadow:var(--ex-sm);transition:box-shadow .3s var(--ease)}
.dock-item:hover{box-shadow:7px 7px 13px var(--sd2),-7px -7px 13px var(--sl2)}
.dock-item.on{box-shadow:var(--in-sm)}
.dock-item.warn::after{content:"";position:absolute;top:2px;right:2px;width:10px;height:10px;border-radius:50%;background:#E0A526;box-shadow:0 0 0 3px var(--bg)}
.dock-ico{display:grid;place-items:center}
.dock-ico .i{width:calc(23px * var(--s,1));height:calc(23px * var(--s,1));stroke-width:2}
.dock-dot{position:absolute;bottom:-8px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--c);opacity:0;transition:opacity .3s}
.dock-item.on .dock-dot{opacity:1}
.dock-tip{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translate(-50%,8px);opacity:0;pointer-events:none;white-space:nowrap;
  background:var(--surface);color:var(--fg);font-family:var(--f-display);font-weight:700;font-size:max(9px,calc(12.5px * var(--m,1)));padding:7px 11px;border-radius:11px;box-shadow:var(--ex-sm);transition:opacity .2s,transform .2s}
.dock-item:hover .dock-tip,.dock-item:focus-visible .dock-tip{opacity:1;transform:translate(-50%,0)}
.dock-sep{flex:none;align-self:center;width:2px;height:38px;margin:0 2px 6px;border-radius:2px;box-shadow:var(--in-sm)}

/* ---------- landing: hero, the real-time Earth in space; the words sit bottom left ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;overflow:hidden;isolation:isolate;
  padding:110px clamp(20px,5.2vw,84px) calc(120px + env(safe-area-inset-bottom,0px));background:#080A12;color:#EEF1F8}
.hero .earth{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;touch-action:pan-y;cursor:grab;opacity:0;transition:opacity 1.6s ease}
.hero .earth.on{opacity:1}
.hero .earth:active{cursor:grabbing}
.hero{background:radial-gradient(60% 55% at 72% 46%,rgb(40 92 170 / .22),rgb(8 10 18 / 0) 70%),#03040A}
.hero.earth-off{background:radial-gradient(42% 46% at 72% 46%,rgb(77 178 255 / .2),rgb(77 178 255 / .05) 55%,rgb(3 4 10 / 0) 72%),#03040A}
.hero.earth-off .earth{display:none}
@media (max-aspect-ratio:23/20){.hero,.hero.earth-off{background:radial-gradient(70% 34% at 50% 33%,rgb(40 92 170 / .22),rgb(8 10 18 / 0) 72%),#03040A}}
.hero-shade{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(85% 65% at 0% 100%,rgb(8 10 18 / .84) 0%,rgb(8 10 18 / .5) 40%,rgb(8 10 18 / 0) 72%),linear-gradient(to top,rgb(8 10 18 / .6),rgb(8 10 18 / 0) 28%)}
.hero-in{position:relative;z-index:3;max-width:min(760px,100%);pointer-events:none;text-align:left}
.hero-in a,.hero-in button{pointer-events:auto}
.hero .kicker{color:#C9D2E3;font-weight:700;letter-spacing:.14em;padding:9px 16px;border-radius:999px;background:rgb(255 255 255 / .07);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .14);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hero h1{margin:22px 0 0;font-size:max(9px,calc(clamp(2.7rem,7.2vw,6.6rem) * var(--m,1)));font-weight:800;line-height:.95;letter-spacing:-.05em;color:#F5F7FC;text-shadow:0 0 26px rgb(0 0 0 / .7),0 2px 3px rgb(0 0 0 / .35)}
.hero h1 .ks2{background:linear-gradient(120deg,#D8CCFF 0%,#9D97FF 42%,#5EEAD4 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 0 18px rgb(139 132 255 / .5))}
.made{margin:18px 0 0;font-family:var(--f-display);font-size:max(9px,calc(clamp(1.1rem,2.1vw,1.6rem) * var(--m,1)));font-weight:600;color:#B8C1D4;letter-spacing:-.01em}
.made b{color:#fff;font-weight:800}
.heart{display:inline-block;color:#FF5C8A;margin:0 .12em;animation:beat 1.6s ease-in-out infinite;filter:drop-shadow(0 0 10px rgb(255 92 138 / .6))}
.lede{margin:14px 0 0;max-width:46ch;font-size:max(9px,calc(clamp(1rem,1.4vw,1.16rem) * var(--m,1)));color:#A9B3C7;line-height:1.6;text-shadow:0 1px 14px rgb(0 0 0 / .7)}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.btn.glow{background:#F5F7FC;color:#141828;box-shadow:0 12px 32px -10px rgb(157 151 255 / .75),inset 0 0 0 1px rgb(255 255 255 / .7)}
.btn.glow:hover{box-shadow:0 16px 40px -10px rgb(157 151 255 / .9),inset 0 0 0 1px #fff}
.btn.glass{background:rgb(255 255 255 / .08);color:#EEF1F8;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .22);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.btn.glass:hover{background:rgb(255 255 255 / .15);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .35)}
.btn.glow:active,.btn.glass:active{transform:translateY(2px)}
.hero-hint{position:absolute;right:clamp(20px,5.2vw,84px);bottom:calc(126px + env(safe-area-inset-bottom,0px));z-index:3;display:flex;align-items:center;gap:8px;margin:0;
  font-family:var(--f-display);font-weight:700;font-size:max(9px,calc(11.5px * var(--m,1)));letter-spacing:.16em;text-transform:uppercase;color:rgb(238 241 248 / .6);pointer-events:none;animation:hintpulse 3.2s ease-in-out infinite}
.hero-hint .i{width:15px;height:15px}
button.hero-hint{border:0;background:none;padding:0}
.hero-hint.act{pointer-events:auto;cursor:pointer;padding:9px 15px;border-radius:999px;color:#EEF1F8;background:rgb(255 255 255 / .08);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:none}
.hh-m{display:none}
@keyframes hintpulse{0%,100%{opacity:.5}50%{opacity:1}}
/* header while it floats over the dark hero */
.top.on-hero.glass{background:rgb(8 10 18 / .72);-webkit-backdrop-filter:saturate(1.2) blur(14px);backdrop-filter:saturate(1.2) blur(14px);box-shadow:0 10px 24px -18px rgb(0 0 0 / .9)}
.top.on-hero .brand{color:#F5F7FC}
.top.on-hero .brand-t span{color:#AEB7CA}
.top.on-hero .logo{background:rgb(255 255 255 / .06);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .16)}
.top.on-hero .logo i{box-shadow:inset 0 0 0 1px rgb(255 255 255 / .1)}
.top.on-hero .nav a{color:#C3CBDB}
.top.on-hero .nav a:hover{color:#fff;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .2)}
.top.on-hero .seg{background:rgb(255 255 255 / .05);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .16)}
.top.on-hero .seg button{color:#AEB7CA}
.top.on-hero .seg button[aria-pressed="true"]{background:rgb(255 255 255 / .15);color:#fff;box-shadow:none}
.top.on-hero .conn,.top.on-hero .menu-btn{background:rgb(255 255 255 / .08);color:#EEF1F8;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .2)}

/* ---------- landing sections ---------- */
.sec{max-width:1240px;margin:0 auto;padding:96px 24px}
.sec-h{max-width:720px;margin-bottom:44px}
.sec-h h2{margin:14px 0 0;font-size:max(9px,calc(clamp(2rem,4vw,3.1rem) * var(--m,1)));font-weight:800;line-height:1.05;letter-spacing:-.035em}
.sec-h p{margin:16px 0 0;font-size:max(9px,calc(17px * var(--m,1)));color:var(--muted)}
.egrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:30px}
.ecard{position:relative;display:grid;align-content:start;gap:14px;text-align:left;border:0;background:var(--surface);border-radius:30px;padding:26px 26px 24px;cursor:pointer;
  box-shadow:var(--ex);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.ecard:hover{transform:translateY(-3px);box-shadow:var(--ex-hover)}
.ecard:active{transform:translateY(0);box-shadow:var(--in-sm)}
.ewell{width:60px;height:60px;border-radius:20px;display:grid;place-items:center;box-shadow:var(--in-deep);color:var(--c)}
.ewell .i{width:27px;height:27px;stroke-width:2}
.ecard h3{margin:4px 0 0;font-size:max(9px,calc(19.5px * var(--m,1)));font-weight:800;letter-spacing:-.02em}
.ecard p{margin:0;font-size:max(9px,calc(14.5px * var(--m,1)));color:var(--muted);line-height:1.5}
.etags{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.ecard .go{position:absolute;top:24px;right:24px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--muted);box-shadow:var(--ex-sm);transition:color .3s,transform .5s var(--ease)}
.ecard:hover .go{color:var(--c);transform:rotate(-45deg)}
.ecard.wide{grid-column:span 2}
.eshort{display:none}
/* Phones: a 3-column grid of icon tiles (icon + one-word label); Wonder Window is one full-width tile at the end. */
@media (max-width:640px){
  .ecard.wide{grid-column:auto}
  .egrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .ecard{gap:9px;justify-items:center;text-align:center;padding:16px 6px 13px;border-radius:22px}
  .ecard h3,.ecard p,.ecard .etags,.ecard .go{display:none}
  .eshort{display:block;font-family:var(--f-display);font-weight:800;font-size:max(9px,calc(13px * var(--m,1)));letter-spacing:-.01em;line-height:1.15;color:var(--fg)}
  .ewell{width:56px;height:56px;border-radius:18px}
  .ewell .i{width:26px;height:26px}
  .ecard[data-go="play"]{grid-column:1 / -1;grid-template-columns:auto minmax(0,1fr) auto;grid-auto-flow:column;align-items:center;justify-items:start;text-align:left;gap:14px;padding:12px 14px 12px 12px}
  .ecard[data-go="play"] .eshort{font-size:max(9px,calc(16px * var(--m,1)))}
  .ecard[data-go="play"] .go{display:grid;position:static;width:36px;height:36px}
}
.show{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:48px;align-items:center}
.show ul{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:16px}
.show li{display:flex;gap:14px;align-items:flex-start;font-size:max(9px,calc(16px * var(--m,1)));line-height:1.5}
.show li i{flex:none;width:38px;height:38px;border-radius:13px;display:grid;place-items:center;box-shadow:var(--in-sm);color:var(--c)}
.show li i .i{width:18px;height:18px}
.show li b{font-family:var(--f-display)}
.cs-stage{position:relative;height:500px;perspective:1300px}
.cs-root{position:absolute;left:2%;bottom:16px;width:min(470px,80%);aspect-ratio:470/310;transform-style:preserve-3d}
.cs-card{position:absolute;top:50%;left:50%;width:100%;height:100%;border-radius:26px;background:var(--surface);box-shadow:var(--ex);overflow:hidden;cursor:pointer;
  transform-style:preserve-3d;will-change:transform;backface-visibility:hidden;display:grid;grid-template-rows:minmax(0,1fr) auto}
.cs-card .board{border-radius:0;box-shadow:none;aspect-ratio:auto;height:100%}
.cs-label{display:flex;align-items:center;gap:10px;padding:11px 16px 13px;font-family:var(--f-display);font-weight:800;font-size:max(9px,calc(14px * var(--m,1)));box-shadow:0 -1px 0 rgb(163 177 198 / .35)}
.cs-label .i{width:18px;height:18px;color:var(--c)}
.cs-label span{margin-left:auto;font-weight:600;font-size:max(9px,calc(12.5px * var(--m,1)));color:var(--muted)}
.how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.how div{border-radius:30px;padding:28px;box-shadow:var(--ex)}
.how b{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;box-shadow:var(--in-deep);font-family:var(--f-display);font-weight:800;font-size:max(9px,calc(22px * var(--m,1)));color:var(--accent)}
.how h3{margin:18px 0 6px;font-size:max(9px,calc(19px * var(--m,1)))}
.how p{margin:0;color:var(--muted);font-size:max(9px,calc(15px * var(--m,1)))}
.foot{text-align:center;color:var(--muted);font-size:max(9px,calc(14px * var(--m,1)));padding:40px 24px 150px}
.foot p{margin:6px 0}
.foot .hrt{color:var(--heart)}

/* ---------- engine page ---------- */
.view{padding:104px 0 150px}
.eng-head{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.eng-ico{width:78px;height:78px;border-radius:26px;display:grid;place-items:center;box-shadow:var(--ex);flex:none}
.eng-ico i{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;box-shadow:var(--in-deep);color:var(--c)}
.eng-ico .i{width:26px;height:26px;stroke-width:2}
.eng-head h1{margin:4px 0 0;font-size:max(9px,calc(clamp(2rem,3.6vw,2.9rem) * var(--m,1)));font-weight:800;line-height:1.05;letter-spacing:-.035em}
.eng-head p{margin:8px 0 0;color:var(--muted);font-size:max(9px,calc(16.5px * var(--m,1)));max-width:60ch}
.eng-head .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.eng-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:30px;margin-top:32px;align-items:start}
.card{border-radius:var(--r-xl);padding:28px;background:var(--surface);box-shadow:var(--ex);min-width:0}
.form{display:grid;gap:20px}
.row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.saved{display:grid;gap:10px;padding-top:4px}
.saved > span{font-family:var(--f-display);font-weight:700;font-size:max(9px,calc(13px * var(--m,1)));color:var(--muted)}
.saved ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.saved li{display:flex;align-items:center;gap:4px;border-radius:999px;box-shadow:var(--ex-sm);padding:3px 4px 3px 4px}
.saved li button{border:0;background:transparent;cursor:pointer;border-radius:999px}
.saved .op{font-size:max(9px,calc(13px * var(--m,1)));font-weight:600;padding:6px 10px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fg)}
.saved .op[aria-current="true"]{color:var(--c)}
.saved .rm{width:28px;height:28px;display:grid;place-items:center;color:var(--muted)}
.saved .rm .i{width:14px;height:14px}
.helper{position:sticky;top:96px;display:grid;justify-items:center;text-align:center;gap:16px;padding:26px 24px 24px;overflow:hidden}
.sym-well{width:min(250px,100%);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;box-shadow:var(--in-deep);
  background:radial-gradient(circle at 50% 46%,#F7F8FB 0%,#F0F2F7 38%,#E6EAF0 62%,#E0E5EC 76%)}
.bubble{position:relative;width:100%;border-radius:22px;padding:16px 18px;box-shadow:var(--ex-sm);font-size:max(9px,calc(15px * var(--m,1)));line-height:1.5;text-align:left;min-height:64px}
.bubble::before{content:"";position:absolute;top:-8px;left:50%;width:16px;height:16px;margin-left:-8px;background:var(--surface);transform:rotate(45deg);
  box-shadow:-3px -3px 5px rgb(255 255 255 / .5);border-radius:3px 0 0 0}
.bubble b{font-family:var(--f-display)}
.helper-name{font-family:var(--f-display);font-weight:800;font-size:max(9px,calc(14px * var(--m,1)));letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:-4px 0 0}
.meter{width:100%;height:12px;border-radius:999px;box-shadow:var(--in-sm);overflow:hidden;padding:2px}
.meter i{display:block;height:100%;width:5%;border-radius:999px;background:linear-gradient(90deg,var(--accent-2),var(--accent),var(--accent-3));transition:width .6s var(--ease)}
.helper .btn{justify-self:center}
.result{margin-top:40px}
.res-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap}
.res-head h2{margin:6px 0 0;font-size:max(9px,calc(clamp(1.5rem,2.6vw,2rem) * var(--m,1)));font-weight:800;letter-spacing:-.03em;line-height:1.15}
.res-actions{display:flex;flex-wrap:wrap;gap:12px}
.res-tabs{margin-top:24px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.screen-nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.screen-nav button{display:inline-flex;align-items:center;gap:9px;border:0;background:var(--surface);border-radius:999px;padding:7px 15px 7px 7px;cursor:pointer;
  font-family:var(--f-display);font-weight:700;font-size:max(9px,calc(13.5px * var(--m,1)));color:var(--muted);box-shadow:var(--ex-sm);transition:box-shadow .3s,color .3s}
.screen-nav button b{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:max(9px,calc(12.5px * var(--m,1)));box-shadow:var(--in-sm);color:var(--c)}
.screen-nav button[aria-selected="true"]{box-shadow:var(--in-sm);color:var(--fg)}
.screen-nav button[aria-selected="true"] b{box-shadow:var(--ex-sm)}
.board-frame{container-type:inline-size;container-name:frame;margin-top:18px;border-radius:30px;padding:16px;box-shadow:var(--in-deep)}
.notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:22px}
.note{border-radius:24px;padding:22px 24px;box-shadow:var(--ex-sm);min-width:0}
.note.full{grid-column:1/-1}
.note h3{margin:0 0 10px;font-size:max(9px,calc(16px * var(--m,1)));font-weight:800;display:flex;align-items:center;gap:8px;color:var(--fg)}
.note h3 .i{width:18px;height:18px;color:var(--c)}
.note p{margin:0;font-size:max(9px,calc(15px * var(--m,1)))}
.note ul,.note ol{margin:0;padding-left:20px;display:grid;gap:6px;font-size:max(9px,calc(15px * var(--m,1)))}
.note dl{margin:0;display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 14px;font-size:max(9px,calc(15px * var(--m,1)))}
.note dt{font-weight:700;font-family:var(--f-display)}
.note dd{margin:0;color:var(--muted)}
.note table{width:100%;border-collapse:collapse;font-size:max(9px,calc(14.5px * var(--m,1)))}
.note th,.note td{text-align:left;padding:8px 10px;vertical-align:top}
.note th{font-family:var(--f-display);font-size:max(9px,calc(11.5px * var(--m,1)));letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.note tr+tr td{box-shadow:inset 0 1px 0 rgb(163 177 198 / .35)}
.note .tr{color:var(--muted);font-size:max(9px,calc(13px * var(--m,1)))}
.empty-state{text-align:center;color:var(--muted);padding:28px}

/* ---------- presenting ---------- */
.present{position:fixed;inset:0;z-index:70;background:var(--bg);display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.pr-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 22px 6px;min-height:62px}
.pr-name{display:flex;align-items:center;gap:12px;font-family:var(--f-display);font-weight:800;font-size:max(9px,calc(15px * var(--m,1)));min-width:0}
.pr-name i{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;box-shadow:var(--in-sm);color:var(--c);flex:none}
.pr-name i .i{width:20px;height:20px}
.pr-name span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-name small{font-weight:600;color:var(--muted);font-size:max(9px,calc(13.5px * var(--m,1)))}
.pr-timer{font-family:var(--f-display);font-weight:800;font-size:max(9px,calc(26px * var(--m,1)));font-variant-numeric:tabular-nums;padding:6px 18px;border-radius:999px;box-shadow:var(--ex-sm);color:var(--fg);min-width:110px;text-align:center}
.pr-timer.low{color:#D9534A}
.pr-timer.done{color:#fff;background:#E2574C;box-shadow:6px 6px 12px rgb(226 87 76 / .35),-6px -6px 12px rgb(255 255 255 / .6)}
.pr-stage{display:grid;place-items:center;padding:6px 24px 10px;min-height:0;position:relative}
.pr-fit{container-type:inline-size;width:min(calc(100vw - 48px),calc((100vh - 168px) * 1.7778))}
.pr-bar{position:relative;z-index:73;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:10px 16px calc(16px + env(safe-area-inset-bottom,0px))}
.pbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:46px;min-height:46px;padding:0 14px;border:0;border-radius:999px;background:var(--surface);cursor:pointer;
  font-family:var(--f-display);font-weight:700;font-size:max(9px,calc(14px * var(--m,1)));color:var(--fg);box-shadow:var(--ex-sm);transition:box-shadow .3s,color .3s,transform .3s}
.pbtn .i{width:19px;height:19px}
.pbtn:hover{transform:translateY(-1px)}
.pbtn[aria-pressed="true"]{box-shadow:var(--in-sm);color:var(--accent)}
.pbtn[disabled]{opacity:.4;cursor:default;transform:none}
.pr-dots{display:flex;gap:8px;align-items:center;padding:0 6px}
.pr-dots button{width:12px;height:12px;border-radius:50%;border:0;padding:0;cursor:pointer;box-shadow:var(--in-sm);background:var(--well)}
.pr-dots button[aria-current="true"]{background:var(--c);box-shadow:0 0 0 4px rgb(108 99 255 / .15)}
.pr-sep{width:2px;height:28px;border-radius:2px;box-shadow:var(--in-sm);margin:0 4px}
.pr-notes{position:fixed;top:72px;right:16px;bottom:96px;z-index:74;width:min(440px,calc(100vw - 32px));overflow:auto;border-radius:26px;padding:22px 22px 26px;background:var(--surface);box-shadow:var(--ex)}
.pr-notes h3{margin:0 0 4px;font-size:max(9px,calc(16px * var(--m,1)))}
.pr-notes .warn{font-size:max(9px,calc(12.5px * var(--m,1)));color:#B26A00;margin:0 0 14px}
.pr-notes .note{box-shadow:var(--in-sm);margin-bottom:14px;padding:16px 18px}
.pr-menu{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);display:flex;gap:8px;padding:10px;border-radius:22px;background:var(--surface);box-shadow:var(--ex)}
.ribbons{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:72}
.present .ribbons{position:fixed}
.confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:80}

/* ---------- connect dialog, toast, copy fallback ---------- */
.modal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px;background:rgb(224 229 236 / .66);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.modal-card{width:min(580px,100%);max-height:calc(100vh - 32px);overflow:auto;border-radius:32px;padding:30px;background:var(--surface);box-shadow:var(--ex-hover);display:grid;gap:18px}
.modal-card h2{margin:0;font-size:max(9px,calc(24px * var(--m,1)));font-weight:800;display:flex;align-items:center;gap:12px}
.modal-card h2 i{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;box-shadow:var(--in-sm);color:var(--accent)}
.modal-card h2 .i{width:21px;height:21px}
.modal-card p{margin:0;color:var(--muted);font-size:max(9px,calc(15px * var(--m,1)))}
.modal-x{position:absolute;top:18px;right:18px}
.kstat{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 16px;border-radius:18px;box-shadow:var(--in-sm);font-weight:600}
.kstat .st{width:10px;height:10px;border-radius:50%;background:var(--accent-3);box-shadow:0 0 0 4px rgb(56 178 172 / .18)}
.steps-mini{margin:0;padding-left:20px;display:grid;gap:6px;color:var(--muted);font-size:max(9px,calc(14.5px * var(--m,1)))}
details.more{border-radius:18px;padding:12px 16px;box-shadow:var(--in-sm)}
details.more summary{cursor:pointer;font-family:var(--f-display);font-weight:700;font-size:max(9px,calc(14px * var(--m,1)))}
details.more[open] summary{margin-bottom:10px}
.kvoice{display:grid;gap:14px;margin-top:6px;padding-top:20px;border-top:1px solid rgb(163 177 198 / .35)}
.kvoice h3{margin:0;display:flex;align-items:center;gap:12px;font-size:max(9px,calc(18px * var(--m,1)));font-weight:800}
.kvoice h3 i{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;box-shadow:var(--in-sm);color:var(--heart)}
.kvoice h3 .i{width:19px;height:19px}
.kvoice h3 small{font-family:var(--f-body);font-weight:600;font-size:max(9px,calc(12.5px * var(--m,1)));color:var(--muted)}
.toast{position:fixed;left:50%;bottom:104px;z-index:95;transform:translate(-50%,14px);opacity:0;pointer-events:none;max-width:calc(100% - 32px);text-align:center;
  background:var(--fg);color:#fff;font-family:var(--f-display);font-weight:700;font-size:max(9px,calc(14px * var(--m,1)));padding:13px 20px;border-radius:999px;box-shadow:0 14px 30px -10px rgb(61 72 82 / .55);transition:opacity .25s,transform .25s}
.toast.is-on{opacity:1;transform:translate(-50%,0)}
.fallback{position:fixed;inset:0;z-index:96;background:rgb(224 229 236 / .7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:grid;place-items:center;padding:16px}
.fb-card{background:var(--surface);border-radius:28px;box-shadow:var(--ex-hover);max-width:660px;width:100%;max-height:86vh;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:12px;padding:24px}
.fb-card h2{margin:0;font-size:max(9px,calc(19px * var(--m,1)))}
.fb-card p{margin:0;color:var(--muted);font-size:max(9px,calc(14px * var(--m,1)))}
.fb-text{overflow:auto;border-radius:16px;padding:14px;box-shadow:var(--in);white-space:pre-wrap;font-size:max(9px,calc(14px * var(--m,1)));min-height:0}
.fb-card .btn{justify-self:end}

/* ---------- animation ---------- */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes beat{0%,100%{transform:scale(1)}12%{transform:scale(1.18)}24%{transform:scale(1)}36%{transform:scale(1.12)}48%{transform:scale(1)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.skeleton{border-radius:24px;height:260px;box-shadow:var(--in-sm);background:linear-gradient(100deg,transparent 30%,rgb(255 255 255 / .45) 50%,transparent 70%) var(--bg);background-size:200% 100%;animation:shimmer 1.6s linear infinite}

/* ---------- Symphony ---------- */
.sym{position:relative;width:100%;aspect-ratio:1;display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:50%}
.sym[role="img"]{cursor:default}
.sym-float{position:relative;width:100%;height:100%;animation:symfloat 6s ease-in-out infinite}
.sym-orb{position:absolute;inset:0;width:100%;height:100%;display:block}
.sym-css{position:absolute;inset:14%;border-radius:50%;display:none;filter:blur(6px);
  background:radial-gradient(circle at 34% 30%,rgb(255 255 255 / .9),rgb(255 255 255 / 0) 34%),radial-gradient(circle at 30% 60%,#67E8F9 0,transparent 55%),radial-gradient(circle at 70% 40%,#A78BFA 0,transparent 58%),radial-gradient(circle at 62% 80%,#F9A8D4 0,transparent 52%),radial-gradient(circle at 55% 75%,#93C5FD 0,transparent 60%),#B9C8F5;
  box-shadow:0 0 40px 18px rgb(167 139 250 / .35),0 0 70px 30px rgb(103 232 249 / .22);transform:scale(var(--breath,1))}
.sym--css .sym-css{display:block;animation:spin 18s linear infinite}
.sym--css .sym-orb{display:none}
.sym-face{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 2px rgb(255 255 255 / .95)) drop-shadow(0 0 7px rgb(214 220 255 / .9)) drop-shadow(0 0 14px rgb(160 180 255 / .55))}
.sf-move{transform-origin:100px 100px;transition:transform .1s linear}
.sf-brow,.sf-lash,.sf-smile,.sf-clip,.sf-notes{fill:none;stroke:#fff;stroke-width:4.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--ease),opacity .3s}
.sf-lash{stroke-width:3}
.sf-clip,.sf-notes{stroke-width:3.2}
.sf-clip ellipse,.sf-notes ellipse{fill:#fff;stroke:none}
.sf-eye{fill:#fff;transform-box:fill-box;transform-origin:center;transition:transform .12s ease}
.sf-cheek{fill:rgb(255 140 190 / .55);stroke:none}
.sf-open{fill:#fff;opacity:0;transform-box:fill-box;transform-origin:center;transform:scaleY(.25)}
.sf-notes{opacity:0}
.sym-blink .sf-eye{transform:scaleY(.12)}
.sym[data-state="think"] .sf-brow{transform:translateY(-4px)}
.sym[data-state="happy"] .sf-brow{transform:translateY(-5px)}
.sym[data-state="listen"] .sf-brow.sf-l{transform:translateY(-2px)}
.sym[data-state="breathe"] .sf-eye{transform:scaleY(.55)}
.sym[data-state="speak"] .sf-smile{opacity:0}
.sym[data-state="speak"] .sf-open{opacity:1;animation:symtalk .3s ease-in-out infinite alternate}
.sym[data-state="speak"] .sf-notes,.sym[data-state="happy"] .sf-notes{animation:symnotes 2.6s ease-out infinite}
.sym-pulse .sym-float{animation:sympulse .7s var(--ease),symfloat 6s ease-in-out infinite}
@keyframes symfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes sympulse{0%{scale:1}35%{scale:1.07}100%{scale:1}}
@keyframes symtalk{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
@keyframes symnotes{0%{opacity:0;transform:translateY(8px)}25%{opacity:1}100%{opacity:0;transform:translateY(-24px)}}

/* ---------- responsive ---------- */
@media (max-width:1060px){
  .eng-grid{grid-template-columns:minmax(0,1fr)}
  .helper{position:relative;top:0;grid-template-columns:150px minmax(0,1fr);text-align:left;justify-items:stretch;align-items:start;column-gap:22px;row-gap:10px}
  .helper .sym-well{width:150px;grid-column:1;grid-row:1 / span 2;align-self:center}
  .helper-name{grid-column:2;grid-row:1;align-self:end;margin:0}
  .helper .bubble{grid-column:2;grid-row:2;align-self:start}
  .helper .meter,.helper #eng-stop{grid-column:1 / -1}
  .helper .bubble::before{top:22px;left:-8px;margin:0;box-shadow:-3px 3px 5px rgb(255 255 255 / .35)}
  .show{grid-template-columns:minmax(0,1fr)}
  .cs-stage{height:420px}
}
@media (max-width:900px){
  .nav,.top-r .seg,.top-r .seg-q{display:none}
  .menu-btn{display:inline-flex}
  .top-r{margin-left:auto}
  .dock-panel{gap:9px;height:62px;padding:0 12px 8px;overflow-x:auto;scrollbar-width:none;border-radius:24px}
  .dock-panel::-webkit-scrollbar{display:none}
  .dock-item{width:44px;height:44px}
  .dock-tip{display:none}
  .how{grid-template-columns:minmax(0,1fr)}
  .notes{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .wrap,.sec,.top-in{padding-left:16px;padding-right:16px}
  .brand-t span{display:none}
  .conn span:not(.st){display:none}
  .conn{padding:0 15px}
  .hero{padding:96px 20px calc(100px + env(safe-area-inset-bottom,0px))}
  .hero h1{font-size:max(9px,calc(clamp(2.55rem,12.5vw,3.7rem) * var(--m,1)))}
  .hero .lede{font-size:max(9px,calc(15.5px * var(--m,1)))}
  .hero-cta{gap:12px;margin-top:22px}
  .hero-cta .btn.big{min-height:52px;padding:0 20px;font-size:max(9px,calc(15.5px * var(--m,1)))}
  .hero-hint{top:calc(33vh + min(49vw, 29vh) + 18px);top:calc(33svh + min(49vw, 29svh) + 18px);left:50%;right:auto;bottom:auto;transform:translateX(-50%);white-space:nowrap}
  .hh-d{display:none}.hh-m{display:inline}
  .hero-shade{background:linear-gradient(to top,rgb(8 10 18 / .9) 0%,rgb(8 10 18 / .72) 42%,rgb(8 10 18 / .25) 66%,rgb(8 10 18 / 0) 80%)}
  .row2{grid-template-columns:minmax(0,1fr)}
  .card{padding:22px 18px;border-radius:26px}
  .helper{grid-template-columns:78px minmax(0,1fr);column-gap:14px;row-gap:6px;padding:16px}
  .helper .sym-well{width:78px;align-self:start;grid-row:1 / span 2}
  .helper .bubble{padding:12px 14px;font-size:max(9px,calc(14.5px * var(--m,1)));border-radius:18px;min-height:0}
  .helper .bubble::before{top:16px}
  .board-frame{padding:8px;border-radius:22px}
  .sec{padding-top:72px;padding-bottom:72px}
  .pbtn span{display:none}
  .pr-sep{display:none}
  .cs-stage{height:340px;overflow:hidden;overflow:clip;border-radius:26px}
  .cs-root{bottom:26px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---------- protection: no selecting page text, no image callouts, nothing to print ---------- */
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,select,[contenteditable="true"],.allow-copy,.fb-text,.msg .mt{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
img,svg,canvas{-webkit-user-drag:none}
.shield{position:fixed;inset:0;z-index:2147483000;display:none;place-items:center;text-align:center;padding:24px;background:#0B0E17;color:#E6EAF2;font-family:var(--f-display)}
.shield.on{display:grid}
.shield div{display:grid;gap:10px;max-width:420px}
.shield b{font-size:max(9px,calc(22px * var(--m,1)));font-weight:800;letter-spacing:-.02em}
.shield span{font-family:var(--f-body);font-size:max(9px,calc(15px * var(--m,1)));color:#9AA5BA;line-height:1.5}
@media print{
  body *{display:none!important}
  body::after{content:"Printing is turned off on this site.";display:block;padding:40px;font:600 max(9px,calc(18px * var(--m,1)))/1.5 Arial,sans-serif;color:#333}
}

/* Phones: all interface text 25% smaller (--m scales every font size above; nothing goes under 9px). Class screens
   and slides keep their own sizing, because they already shrink to fit and are what pupils see. Form fields stay at
   16px, the size that stops iPhones zooming in when you tap them. */
@media (max-width:640px){
  :root{--m:.75}
  input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select{font-size:16px!important}
}

/* ---------- the dashboard shelf: your lessons, each with a picture of its topic ---------- */
.shelf{padding-top:72px;padding-bottom:16px}
.shelf .sec-h{margin-bottom:28px}
.shelf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:24px}
.sh-card{position:relative;min-width:0;display:grid}
.sh-open{display:grid;grid-template-rows:auto 1fr;align-content:start;height:100%;width:100%;text-align:left;border:0;padding:0;background:var(--surface);border-radius:24px;overflow:hidden;cursor:pointer;color:var(--fg);box-shadow:var(--ex);transition:transform .3s var(--ease),box-shadow .3s}
.sh-open:hover{transform:translateY(-3px);box-shadow:var(--ex-hover)}
.sh-open:active{transform:none;box-shadow:var(--in-sm)}
.sh-cover{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb,var(--c) 24%,var(--surface)),var(--surface))}
.sh-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sh-cover img:not([src]){display:none}
.sh-ph{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:8px;color:var(--c)}
.sh-ph .i{width:34px;height:34px}
.sh-ph b{font-family:var(--f-display);font-size:max(9px,calc(13px * var(--m,1)));color:var(--muted)}
.sh-body{display:grid;gap:5px;padding:14px 16px 16px;min-width:0}
.sh-kind{font-family:var(--f-display);font-weight:700;font-size:max(9px,calc(11.5px * var(--m,1)));letter-spacing:.05em;text-transform:uppercase;color:var(--c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-title{font-family:var(--f-display);font-size:max(9px,calc(16.5px * var(--m,1)));font-weight:800;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sh-meta{font-size:max(9px,calc(13px * var(--m,1)));color:var(--muted)}
.sh-pin{position:absolute;top:10px;right:10px;width:40px;height:40px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;color:#4A5468;background:rgb(255 255 255 / .88);box-shadow:0 4px 14px rgb(0 0 0 / .18);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:transform .2s}
.sh-pin:hover{transform:scale(1.06)}
.sh-pin .i{width:18px;height:18px}
.sh-pin[aria-pressed="true"]{background:var(--c);color:#FFFFFF}
.sh-more{margin-top:16px}
.sh-more:empty{display:none}
.ss .actions #a-keep[aria-pressed="true"]{box-shadow:var(--in-sm);color:var(--accent)}
@media (max-width:640px){ .shelf{padding-top:48px} .shelf-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .sh-body{padding:10px 12px 12px} .sh-title{font-size:max(9px,calc(14.5px * var(--m,1)))} .sh-pin{width:34px;height:34px;top:8px;right:8px} }

/* ---------- How it works: every rule in one place (howto.js) ---------- */
.howm{z-index:120}
.howm-card{position:relative;width:min(1080px,100%);height:min(840px,calc(100vh - 32px));height:min(840px,calc(100dvh - 32px));display:flex;flex-direction:column;border-radius:32px;background:var(--surface);color:var(--fg);box-shadow:var(--ex-hover);overflow:hidden;animation:howIn .32s var(--ease)}
@keyframes howIn{from{opacity:0;transform:translateY(12px) scale(.985)}}
.howm-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:26px 30px 12px}
.howm-top .kicker{margin:0}
.howm-top h2{margin:4px 0 0;font-family:var(--f-display);font-weight:800;font-size:max(9px,calc(clamp(1.7rem,3vw,2.4rem) * var(--m,1)));letter-spacing:-.02em;line-height:1.05}
.howm-in{flex:1;min-height:0;display:grid;grid-template-columns:250px minmax(0,1fr);gap:10px;padding:0 18px 18px}
.howm-nav{display:flex;flex-direction:column;gap:6px;padding:6px;overflow:auto}
.howm-nav button{display:flex;align-items:center;gap:10px;text-align:left;border:0;border-radius:16px;padding:11px 14px;background:transparent;cursor:pointer;font-family:var(--f-display);font-weight:700;font-size:max(9px,calc(14px * var(--m,1)));color:var(--muted)}
.howm-nav button .i{width:18px;height:18px;flex:none}
.howm-nav button:hover{color:var(--fg)}
.howm-nav button[aria-current="true"]{color:var(--accent);box-shadow:var(--in-sm)}
.howm-main{overflow:auto;padding:4px 18px 45vh 14px;border-radius:22px;outline:none}
.howm-sec{padding:16px 0 24px}
.howm-sec + .howm-sec{border-top:1px solid rgb(120 130 150 / .16)}
.howm-sec h3{display:flex;align-items:center;gap:12px;margin:0 0 8px;font-family:var(--f-display);font-weight:800;font-size:max(9px,calc(22px * var(--m,1)));letter-spacing:-.01em}
.howm-sec h3 i{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;box-shadow:var(--in-sm);color:var(--accent);flex:none}
.howm-sec h3 .i{width:19px;height:19px}
.howm-lede{margin:0 0 10px;color:var(--muted);font-size:max(9px,calc(16px * var(--m,1)));line-height:1.55}
.howm-sub{margin:18px 0 6px;font-family:var(--f-display);font-weight:800;font-size:max(9px,calc(15.5px * var(--m,1)))}
.howm-list{margin:0;padding:0 0 0 20px;display:grid;gap:8px;font-size:max(9px,calc(15px * var(--m,1)));line-height:1.55}
.howm-list li::marker{color:var(--accent)}
.howm-rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin:10px 0 6px}
.howm-rules > div{padding:16px 18px;border-radius:22px;box-shadow:var(--ex-sm);display:grid;gap:8px;align-content:start}
.howm-rules h4{display:flex;align-items:center;gap:8px;margin:0;font-family:var(--f-display);font-weight:800;font-size:max(9px,calc(15.5px * var(--m,1)))}
.howm-rules h4 .i{width:17px;height:17px;color:var(--accent)}
.howm-rules p{margin:0;color:var(--muted);font-size:max(9px,calc(13.5px * var(--m,1)));line-height:1.5}
.howm-note{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;padding:12px 14px;border-radius:16px;box-shadow:var(--in-sm);color:var(--muted);font-size:max(9px,calc(14px * var(--m,1)))}
.howm-note .i{width:18px;height:18px;flex:none;color:var(--accent);margin-top:2px}
.howm-tbl{display:grid;border-radius:18px;overflow:hidden;box-shadow:var(--ex-sm);margin:6px 0 4px}
.howm-tbl > div{display:grid;grid-template-columns:minmax(96px,.6fr) 1fr 1fr;gap:12px;padding:10px 16px;font-size:max(9px,calc(14px * var(--m,1)));align-items:center}
.howm-tbl > div:nth-child(even){background:rgb(255 255 255 / .3)}
[data-theme="night"] .howm-tbl > div:nth-child(even){background:rgb(255 255 255 / .04)}
.howm-tbl .hd{font-family:var(--f-display);font-weight:800;color:var(--accent);font-size:max(9px,calc(12px * var(--m,1)));letter-spacing:.1em;text-transform:uppercase}
.howm-tbl [role="rowheader"]{font-weight:700}
html.howm-open{overflow:hidden}
.how-more{display:flex;justify-content:center;margin:26px 0 0}
.seg-q{width:26px;height:26px;flex:none;border:0;border-radius:50%;display:inline-grid;place-items:center;cursor:pointer;background:var(--surface);color:var(--muted);box-shadow:var(--ex-sm);font-family:var(--f-display);font-weight:800;font-size:max(9px,calc(13px * var(--m,1)))}
.seg-q:hover{color:var(--accent)}
.mnav .seg-q{margin:6px 0 2px 6px}
@media (max-width:760px){
  .howm{padding:0}
  .howm-card{height:100%;border-radius:0;width:100%}
  .howm-top{padding:16px 16px 6px}
  .howm-in{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);padding:0 6px 6px;gap:4px}
  .howm-nav{flex-direction:row;overflow-x:auto;padding:4px 10px 10px;scrollbar-width:none}
  .howm-nav::-webkit-scrollbar{display:none}
  .howm-nav button{flex:none;padding:9px 12px;white-space:nowrap}
  .howm-main{padding:0 12px 45vh}
  .howm-tbl > div{grid-template-columns:1fr 1fr;gap:6px 12px}
  .howm-tbl [role="rowheader"]{grid-column:1/-1}
  .howm-tbl .hd span:first-child{display:none}
}
@media (prefers-reduced-motion:reduce){ .howm-card{animation:none} }

/* ---------- fractions: the numerator over the denominator, wherever 3/4 appears (fractions.js) ---------- */
.fr{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1.05;margin:0 .14em;font-size:.76em;font-weight:inherit;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap;position:relative;top:-.04em}
.fr-n,.fr-d{display:block;padding:0 .22em}
.fr-n{border-bottom:.1em solid currentColor;padding-bottom:.08em}
.fr-d{padding-top:.08em}
.fr-s{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}