/* Kinetic Mind launcher: the classroom board.
   Light = a whiteboard with marker colours. Dark = a chalkboard with chalk colours.
   Chapters are grouped by topic; each topic keeps one colour. */

:root {
  --wall: #e9ece8;
  --board: #fcfdfb;
  --frame: #c3cac5;
  --frame-hi: #e3e7e3;
  --card: #ffffff;
  --line: color-mix(in srgb, var(--frame) 55%, #ffffff);
  --ink: #1b2530;
  --muted: #5a6670;
  --hl: #ffcf3f;          /* highlighter / bulb */
  --g0: #12884f;          /* green marker */
  --g1: #d4542a;          /* red-orange marker */
  --g2: #1f6bcf;          /* blue marker */
  --g3: #7448cc;          /* purple marker */
  --fill: #ffffff;        /* inside of icon shapes */
  --btn: #1b2530;
  --btn-ink: #ffffff;
  --shadow: 0 1px 0 rgba(27, 37, 48, .06), 0 10px 24px -14px rgba(27, 37, 48, .35);
  --a1: #d4542a; --a2: #1f6bcf; --a3: #7448cc;   /* colours of the board picture */
  --pc: rgba(27, 37, 48, .09);                     /* colour of the wall pattern */
  --pattern: radial-gradient(var(--pc) 1px, transparent 1.2px);
  --psize: 22px 22px;
  --bn: "Hind Siliguri", "Nirmala UI", "Vrinda", system-ui, sans-serif;
  --head: "Baloo Da 2", "Hind Siliguri", "Nirmala UI", system-ui, sans-serif;
  --math: "STIX Two Text", "Cambria Math", Cambria, "Times New Roman", serif;
  --mono: "JetBrains Mono", "IBM Plex Mono", Consolas, monospace;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --wall: #121815;
  --board: #22302a;
  --frame: #6e5238;
  --frame-hi: #8b6a4a;
  --card: color-mix(in srgb, var(--board) 62%, var(--wall));   /* follows each design */
  --line: color-mix(in srgb, var(--ink) 13%, var(--card));
  --ink: #eef1e8;
  --muted: #a3b2a9;
  --hl: #ffd75e;
  --g0: #a9e27c;          /* green chalk */
  --g1: #ffab76;          /* orange chalk */
  --g2: #8fd0ff;          /* blue chalk */
  --g3: #d2b1ff;          /* violet chalk */
  --fill: #22302a;
  --btn: #eef1e8;
  --btn-ink: #15201b;
  --shadow: 0 12px 26px -16px rgba(0, 0, 0, .8);
  --a1: #ffab76; --a2: #8fd0ff; --a3: #d2b1ff;
  --pc: rgba(238, 241, 232, .07);
  color-scheme: dark;
}

/* ---------- the 10 designs: wall, board, frame and picture colours (light, then dark) ---------- */
/* d1 classroom board: the defaults above */

/* d2 blueprint */
:root[data-design="d2"] { --wall: #e3ecf7; --board: #f5f9fe; --frame: #a9bedb; --frame-hi: #d5e1f0; --a1: #1f5fbf; --a2: #e0602b; --a3: #6a4bc9; --pc: rgba(31, 95, 191, .10);
  --pattern: linear-gradient(var(--pc) 1px, transparent 1px), linear-gradient(90deg, var(--pc) 1px, transparent 1px); --psize: 28px 28px; }
:root[data-design="d2"][data-theme="dark"] { --wall: #0b1729; --board: #123058; --frame: #29496f; --frame-hi: #3b5f8b; --a1: #a9d0ff; --a2: #ffb37a; --a3: #d7c2ff; --pc: rgba(169, 208, 255, .08); }

/* d3 oscilloscope / graph paper */
:root[data-design="d3"] { --wall: #ecf3e9; --board: #fbfdf8; --frame: #b6c6ac; --frame-hi: #dbe5d4; --a1: #0f8a5a; --a2: #c2410c; --a3: #6a4bc9; --pc: rgba(15, 138, 90, .10);
  --pattern: linear-gradient(var(--pc) 1px, transparent 1px), linear-gradient(90deg, var(--pc) 1px, transparent 1px), linear-gradient(color-mix(in srgb, var(--pc) 45%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--pc) 45%, transparent) 1px, transparent 1px);
  --psize: 100px 100px, 100px 100px, 20px 20px, 20px 20px; }
:root[data-design="d3"][data-theme="dark"] { --wall: #08100b; --board: #07170e; --frame: #26352c; --frame-hi: #3a4d41; --a1: #6dff9e; --a2: #ffd36b; --a3: #7fd6ff; --pc: rgba(109, 255, 158, .07); }

/* d4 optics bench */
:root[data-design="d4"] { --wall: #eeecf6; --board: #fdfcff; --frame: #c7c0dc; --frame-hi: #e4e0ef; --a1: #e2452d; --a2: #3b5bd6; --a3: #8a4fd0; --pc: rgba(91, 74, 160, .08);
  --pattern: repeating-linear-gradient(45deg, var(--pc) 0 1px, transparent 1px 18px); --psize: auto; }
:root[data-design="d4"][data-theme="dark"] { --wall: #100e19; --board: #1c1a2c; --frame: #3c3659; --frame-hi: #554d7a; --a1: #ff7f5c; --a2: #97b5ff; --a3: #d7b0ff; --pc: rgba(215, 176, 255, .06); }

/* d5 circuit board */
:root[data-design="d5"] { --wall: #e6f0ea; --board: #f8fcf9; --frame: #9fc4ae; --frame-hi: #cfe3d6; --a1: #c06a0e; --a2: #0f7a4f; --a3: #c93838; --pc: rgba(15, 122, 79, .10);
  --pattern: radial-gradient(circle, var(--pc) 2.4px, transparent 3px), linear-gradient(90deg, var(--pc) 1px, transparent 1px), linear-gradient(var(--pc) 1px, transparent 1px); --psize: 48px 48px, 48px 48px, 96px 96px; }
:root[data-design="d5"][data-theme="dark"] { --wall: #06120c; --board: #0c2a1b; --frame: #a9773a; --frame-hi: #c99555; --a1: #ffb04a; --a2: #6fe3a5; --a3: #ff8a8a; --pc: rgba(255, 176, 74, .08); }

/* d6 magnetism */
:root[data-design="d6"] { --wall: #f1eeeb; --board: #fffdfb; --frame: #cbbdb3; --frame-hi: #e6ddd7; --a1: #d33a3a; --a2: #2f63d1; --a3: #7a6a60; --pc: rgba(122, 106, 96, .12);
  --pattern: repeating-radial-gradient(circle at 50% 120%, transparent 0 44px, var(--pc) 44px 45px); --psize: auto; }
:root[data-design="d6"][data-theme="dark"] { --wall: #15110f; --board: #241c19; --frame: #5c473c; --frame-hi: #7a6052; --a1: #ff7b6e; --a2: #8db6ff; --a3: #cdb8aa; --pc: rgba(255, 123, 110, .06); }

/* d7 atoms and stars */
:root[data-design="d7"] { --wall: #e9eff8; --board: #f9fbff; --frame: #b7c5dc; --frame-hi: #dbe3ef; --a1: #e0582f; --a2: #2b67d1; --a3: #7b4ed0; --pc: rgba(43, 103, 209, .16);
  --pattern: radial-gradient(var(--pc) 1px, transparent 1.4px), radial-gradient(color-mix(in srgb, var(--pc) 60%, transparent) 1.4px, transparent 2px); --psize: 37px 41px, 89px 97px; }
:root[data-design="d7"][data-theme="dark"] { --wall: #060914; --board: #0f1631; --frame: #2a3866; --frame-hi: #3d4f8a; --a1: #ff9d6b; --a2: #8ec5ff; --a3: #c9a8ff; --pc: rgba(220, 230, 255, .28); }

/* d8 sketchbook */
:root[data-design="d8"] { --wall: #e8e1d3; --board: #faf6ee; --frame: #b9a27e; --frame-hi: #d8c7aa; --a1: #c2452d; --a2: #2a5fa8; --a3: #2f7d4f; --pc: rgba(110, 86, 52, .08);
  --pattern: repeating-linear-gradient(45deg, var(--pc) 0 1px, transparent 1px 12px), repeating-linear-gradient(-45deg, var(--pc) 0 1px, transparent 1px 12px); --psize: auto; }
:root[data-design="d8"][data-theme="dark"] { --wall: #16130e; --board: #272219; --frame: #6d5839; --frame-hi: #8b7350; --a1: #ff9a7a; --a2: #9cc0ff; --a3: #9ee0a8; --pc: rgba(232, 214, 180, .05); }

/* d9 ruled notebook */
:root[data-design="d9"] { --wall: #eef1f5; --board: #ffffff; --frame: #c2cad6; --frame-hi: #e1e6ed; --a1: #1f5fbf; --a2: #d6453d; --a3: #2f8a5a; --pc: rgba(31, 95, 191, .13);
  --pattern: linear-gradient(transparent 27px, var(--pc) 27px); --psize: 100% 28px; }
:root[data-design="d9"][data-theme="dark"] { --wall: #0f121a; --board: #181d28; --frame: #343d50; --frame-hi: #4a5570; --a1: #8fbaff; --a2: #ff8a80; --a3: #8fe0b0; --pc: rgba(143, 186, 255, .07); }

/* d10 lens and light */
:root[data-design="d10"] { --wall: #e5f1f0; --board: #f8fdfc; --frame: #9dcbc5; --frame-hi: #cbe5e1; --a1: #e0522d; --a2: #0f7f86; --a3: #6a4bc9; --pc: rgba(15, 127, 134, .11);
  --pattern: repeating-radial-gradient(circle at 100% 100%, transparent 0 34px, var(--pc) 34px 35px); --psize: auto; }
:root[data-design="d10"][data-theme="dark"] { --wall: #061312; --board: #0f2624; --frame: #285b56; --frame-hi: #3b7a73; --a1: #ff9a6a; --a2: #6fe0e0; --a3: #cdb0ff; --pc: rgba(111, 224, 224, .06); }

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
[hidden] { display: none !important; }

body {
  color: var(--ink);
  background-color: var(--wall);
  background-image: var(--pattern);
  background-size: var(--psize);
  background-attachment: fixed;
  font: 16px/1.5 var(--bn);
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s ease, color .25s ease;
}

:focus-visible { outline: 3px solid var(--g2); outline-offset: 3px; }

/* ---------- the board: used for the hero and the key card ---------- */
.board {
  position: relative;
  background: var(--board);
  border: 10px solid var(--frame);
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px var(--frame-hi), var(--shadow);
}
/* faint wiped marks, so it reads as a used board rather than a blank card */
.board::before {
  content: ""; position: absolute; inset: 0; border-radius: 8px; pointer-events: none;
  background:
    radial-gradient(60% 40% at 18% 30%, color-mix(in srgb, var(--ink) 4%, transparent), transparent 70%),
    radial-gradient(40% 30% at 80% 75%, color-mix(in srgb, var(--ink) 3%, transparent), transparent 70%);
}
:root[data-theme="dark"] .board::before {
  background:
    radial-gradient(55% 40% at 22% 35%, rgba(255, 255, 255, .05), transparent 70%),
    radial-gradient(45% 35% at 78% 70%, rgba(255, 255, 255, .04), transparent 70%);
}
.board > * { position: relative; }
.board > .bulb { position: absolute; }

/* ---------- top-right tools: another design, light / dark ---------- */
.tools {
  position: absolute; top: 24px; right: max(32px, calc((100vw - 1160px) / 2 + 32px)); z-index: 5;
  display: flex; gap: 10px; align-items: center;
}
.shuffle {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0; cursor: pointer;
  background: var(--card); border: 1.5px solid var(--line); border-radius: 50%; box-shadow: var(--shadow);
  transition: transform .3s cubic-bezier(.3, .7, .3, 1);
}
.shuffle svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.8; }
.shuffle .pip { fill: var(--a1); stroke: none; }
.shuffle:hover { transform: rotate(90deg); }
.shuffle:active { transform: rotate(180deg) scale(.92); }
body:has(#v-home[hidden]) .shuffle { display: none; }
.theme {
  position: relative;
  display: inline-flex; align-items: center; justify-content: space-between;
  width: 74px; height: 36px; padding: 0 9px; cursor: pointer;
  background: var(--card); border: 1.5px solid var(--line); border-radius: 999px; box-shadow: var(--shadow);
}
.theme svg { width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; position: relative; z-index: 1; }
.theme .knob {
  position: absolute; top: 3px; left: 3px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--hl); transition: transform .22s cubic-bezier(.3, .7, .3, 1);
}
.theme[aria-pressed="false"] .sun { stroke: #1b2530; }
.theme[aria-pressed="true"] .knob { transform: translateX(37px); background: var(--ink); }
.theme[aria-pressed="true"] .moon { stroke: var(--btn-ink); fill: var(--btn-ink); }

/* ---------- shared pieces ---------- */
.msg:empty { display: none; }
.msg {
  margin: 16px 0 0; padding: 10px 14px; text-align: left; white-space: pre-line;
  color: var(--ink); font-size: 15px; font-weight: 500;
  background: color-mix(in srgb, var(--hl) 28%, var(--card));
  border-left: 5px solid var(--hl); border-radius: 8px;
}

.btn {
  display: inline-flex; align-items: baseline; justify-content: center; gap: 10px;
  width: 100%; padding: 12px 20px; cursor: pointer;
  color: var(--btn-ink); background: var(--btn); border: 0; border-radius: 12px;
  transition: transform .08s ease, filter .15s ease;
}
.btn .bn { font: 700 21px/1.2 var(--head); }
.btn .en { font: 500 14px var(--bn); opacity: .8; }
.btn:hover { filter: brightness(1.15); }
.btn:active { transform: translateY(2px); }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ---------- key screen and online screen ---------- */
.center { min-height: 100vh; display: grid; place-items: center; padding: 64px 16px 40px; }
.card { width: min(480px, 100%); text-align: center; padding: 30px 32px 26px; }
.logo-lg { width: 180px; height: auto; display: block; margin: 0 auto 12px; border-radius: 12px; }
h1 { font: 700 30px/1.2 var(--head); margin: 6px 0 2px; }
.sub { margin: 0 0 20px; color: var(--muted); }
form { display: grid; gap: 14px; }
/* the key is written on a ruled line */
input {
  width: 100%; padding: 12px 8px 10px; text-align: center; text-transform: uppercase;
  font: 600 19px var(--mono); letter-spacing: .06em; color: var(--ink);
  background: transparent; border: 0; border-bottom: 3px solid var(--line); border-radius: 0;
  transition: border-color .15s ease;
}
input::placeholder { color: var(--muted); opacity: .55; font-weight: 400; }
input:focus { outline: none; border-bottom-color: var(--g2); }
.fine { margin: 18px 0 0; color: var(--muted); font-size: 13px; }

/* the bulb lights up when a whole key has been typed */
.bulb {
  top: 14px; right: 16px; width: 36px; height: 48px;
  fill: none; stroke: var(--muted); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .2s ease;
}
.bulb .glass { fill: transparent; transition: fill .2s ease; }
.bulb .rays { opacity: 0; transition: opacity .2s ease; }
.bulb.on { stroke: var(--ink); }
.bulb.on .glass { fill: var(--hl); }
.bulb.on .rays { opacity: 1; stroke: var(--hl); }

.signal {
  display: block; width: 92px; height: 70px; margin: 0 auto 10px;
  fill: var(--g2); stroke: var(--g2); stroke-width: 5; stroke-linecap: round;
}
.signal path { fill: none; animation: ping 1.6s ease-in-out infinite; }
.signal .s2 { animation-delay: .2s; } .signal .s3 { animation-delay: .4s; }
@keyframes ping { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

/* ---------- chapter screen ---------- */
#v-home { min-height: 100vh; display: flex; flex-direction: column; }
.top { display: flex; align-items: center; gap: 14px; width: min(1160px, 100%); margin: 0 auto; padding: 18px 130px 0 32px; }
.logo-sm { width: 84px; height: auto; display: block; border-radius: 8px; }
.brand { display: grid; font: 700 19px/1.15 var(--head); }
.brand small { font: 500 12.5px var(--bn); color: var(--muted); }

.wrap { flex: 1; width: min(1160px, 100%); margin: 0 auto; padding: 18px 32px 28px; }

.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); align-items: center; gap: 28px; padding: 34px 36px 30px; overflow: hidden; }
.h1 { font: 700 clamp(30px, 4vw, 44px)/1.15 var(--head); margin: 0 0 6px; }
.lead { margin: 0 0 18px; color: var(--muted); }

.continue {
  display: inline-grid; justify-items: start; cursor: pointer; text-align: left; font: inherit;
  padding: 9px 20px 10px 18px; color: var(--btn-ink); background: var(--btn); border: 0; border-radius: 12px;
  border-left: 6px solid var(--hl); transition: transform .08s ease, filter .15s ease;
}
.continue:hover { filter: brightness(1.15); }
.continue:active { transform: translateY(2px); }
.continue .c1 { font: 700 18px/1.25 var(--head); }
.continue .c2 { font-size: 14px; opacity: .8; }

/* the picture on the board: one of 10 designs (scenes.js). It draws itself, then labels appear. */
.scene { margin: 0; min-width: 0; }
.scene-art svg { display: block; width: 100%; height: auto; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.scene-name { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; justify-content: flex-end; margin-top: 6px; font-size: 13px; color: var(--muted); }
.scene-name b { font: 600 14px var(--head); color: var(--ink); }

.scene-svg .ax { stroke: var(--muted); stroke-width: 2; }
.scene-svg .thin { stroke-width: 1.5; }
.scene-svg .gd { stroke: var(--muted); stroke-width: 1.4; stroke-dasharray: 3 6; opacity: .75; }
.scene-svg .ink { stroke: var(--ink); stroke-width: 2.6; }
.scene-svg .ink.thin { stroke-width: 1.6; }
.scene-svg .ink-dot { fill: var(--ink); }
.scene-svg .a1 { stroke: var(--a1); stroke-width: 4.5; }
.scene-svg .a2 { stroke: var(--a2); stroke-width: 3.5; }
.scene-svg .a3 { stroke: var(--a3); stroke-width: 3.5; }
.scene-svg .a2s { stroke: var(--a2); }
.scene-svg .vec { stroke-width: 2.6; }
.scene-svg .vec.a1 path { stroke: var(--a1); }
.scene-svg .vec.a2 path { stroke: var(--a2); }
.scene-svg .vec.a3 path { stroke: var(--a3); }
.scene-svg .vec text, .scene-svg .lb, .scene-svg .eq, .scene-svg .pole { stroke: none; }
.scene-svg .vec text { font: italic 500 20px var(--math); }
.scene-svg .vec.a1 text { fill: var(--a1); } .scene-svg .vec.a2 text { fill: var(--a2); } .scene-svg .vec.a3 text { fill: var(--a3); }
.scene-svg .lb { font: italic 500 19px var(--math); fill: var(--muted); }
.scene-svg .lb.t-a2 { fill: var(--a2); } .scene-svg .lb.t-a3 { fill: var(--a3); }
.scene-svg .eq { font: italic 500 22px var(--math); fill: var(--ink); }
.scene-svg .pole { font: 700 18px var(--bn); fill: #fff; }
.scene-svg .ball { fill: var(--hl); stroke: var(--ink); stroke-width: 2.5; }
.scene-svg .ghost { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 3 4; }
.scene-svg .glass { fill: color-mix(in srgb, var(--a2) 14%, transparent); stroke: color-mix(in srgb, var(--a2) 60%, transparent); stroke-width: 2; }
.scene-svg .bulbc { fill: var(--hl); stroke: var(--ink); stroke-width: 2.6; animation: glow 1.8s ease-in-out infinite alternate; }
.scene-svg .electron { fill: var(--a2); }
.scene-svg .zig { stroke-width: 3; }
.scene-svg .field { stroke-width: 1.8; stroke-dasharray: 6 7; animation: flow 1.2s linear infinite; opacity: .85; }
.scene-svg .mN { fill: var(--a1); stroke: var(--ink); stroke-width: 2; }
.scene-svg .mS { fill: var(--a2); stroke: var(--ink); stroke-width: 2; }
.scene-svg .nN { fill: var(--a1); } .scene-svg .nS { fill: var(--muted); }
.scene-svg .orbit { stroke: var(--muted); stroke-width: 1.6; opacity: .8; }
.scene-svg .pro { fill: var(--a1); stroke: var(--ink); stroke-width: 1.5; }
.scene-svg .neu { fill: var(--board); stroke: var(--ink); stroke-width: 1.5; }
.scene-svg .slope { fill: color-mix(in srgb, var(--muted) 12%, transparent); stroke: var(--ink); stroke-width: 2.4; }
.scene-svg .block { fill: var(--hl); stroke: var(--ink); stroke-width: 2.4; }
.scene-svg .mass .pole { fill: #1b2530; font: italic 600 22px var(--math); }
.scene-svg .coil { stroke-width: 3; }
.scene-svg .spring { transform-box: view-box; transform-origin: 40px 0; animation: stretch 2.2s ease-in-out infinite alternate; }
.scene-svg .mass { animation: carry 2.2s ease-in-out infinite alternate; }
.scene-svg .travel { animation: travel 2.4s linear infinite; }
.scene-svg .wave { stroke-width: 4; }

.scene-svg .draw { stroke-dasharray: 1; animation: plot 1.5s cubic-bezier(.3, .55, .4, 1) .05s backwards; }
.scene-svg .draw.dl1 { animation-delay: .7s; }
.scene-svg .draw.dl2 { animation-delay: 1.3s; }
.scene-svg .fx { animation: write .5s ease backwards; }
.scene-svg .w1 { animation-delay: 1.5s; } .scene-svg .w2 { animation-delay: 1.8s; }
.scene-svg .w3 { animation-delay: 2.1s; } .scene-svg .w4 { animation-delay: 2.4s; }
:root[data-theme="dark"] .scene-svg .a1, :root[data-theme="dark"] .scene-svg .vec { filter: drop-shadow(0 0 2px rgba(255, 255, 255, .2)); }
@keyframes plot { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes write { from { opacity: 0; } to { opacity: 1; } }
@keyframes glow { from { fill: color-mix(in srgb, var(--hl) 55%, var(--board)); } to { fill: var(--hl); } }
@keyframes stretch { from { transform: scaleX(.78); } to { transform: scaleX(1.22); } }
@keyframes carry { from { transform: translateX(-41px); } to { transform: translateX(41px); } }
@keyframes travel { to { transform: translateX(160px); } }

/* faint formulas left on the board from earlier lessons */
.chalk { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: 8px; }
.chalk span { position: absolute; font: italic 500 22px var(--math); color: var(--ink); opacity: .07; white-space: nowrap; }
.chalk .k1 { left: 46%; top: 8%; transform: rotate(-6deg); }
.chalk .k2 { left: 3%; bottom: 6%; transform: rotate(4deg); font-size: 26px; }
.chalk .k3 { right: 3%; bottom: 5%; font-size: 18px; }
.chalk .k4 { left: 34%; bottom: 10%; transform: rotate(-3deg); }
.chalk .k5 { right: 4%; top: 7%; transform: rotate(3deg); font-size: 18px; }
.chalk .k6 { left: 40%; top: 46%; transform: rotate(5deg); font-size: 18px; }
:root[data-theme="dark"] .chalk span { opacity: .09; }

/* ---------- topic sections ---------- */
.sections { display: grid; gap: 30px; margin-top: 30px; }
.sec { --c: var(--g0); }
.sec.g1 { --c: var(--g1); } .sec.g2 { --c: var(--g2); } .sec.g3 { --c: var(--g3); }
.sec-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 12px; }
.sec-bn {
  font: 700 23px/1.2 var(--head); color: var(--ink); padding: 0 4px;
  /* a marker underline in the topic colour */
  background: linear-gradient(transparent 62%, color-mix(in srgb, var(--c) 34%, transparent) 62%, color-mix(in srgb, var(--c) 34%, transparent) 92%, transparent 92%);
}
.sec-en { font-size: 14px; color: var(--muted); }

.rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap: 12px; }

/* one chapter */
.ch {
  position: relative; display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 16px;
  min-height: 92px; padding: 12px 20px 12px 16px; text-align: left; cursor: pointer; font: inherit; color: var(--ink);
  background: var(--card); border: 1.5px solid var(--line); border-radius: 14px; overflow: hidden;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, background-color .25s ease;
}
.ch::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--c); }
.ch:hover, .ch:focus-visible {
  transform: translateY(-2px); border-color: var(--c); box-shadow: var(--shadow);
  background: color-mix(in srgb, var(--c) 7%, var(--card));
}
.ch:active { transform: translateY(1px); }
.ch.busy { opacity: .7; cursor: progress; }

.lens {
  width: 62px; height: 62px; display: grid; place-items: center; border-radius: 50%;
  background: color-mix(in srgb, var(--c) 16%, var(--card));
  border: 2px solid color-mix(in srgb, var(--c) 55%, transparent);
}
.txt { display: grid; min-width: 0; }
.txt .num { font: 600 13px/1.3 var(--bn); color: var(--c); }
.t { font: 700 19px/1.25 var(--head); }
.txt .en { font-size: 13px; color: var(--muted); }
.fm { font: italic 500 25px/1 var(--math); color: var(--c); white-space: nowrap; padding-left: 8px; }
.fm.long { font-size: 19px; }

/* icon drawing: every icon uses the same few fills */
.ico { width: 46px; height: 46px; fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; overflow: hidden; }
/* shapes that already carry a rotate() in the drawing keep their own origin */
.ico *:not([transform]) { transform-box: fill-box; transform-origin: center; }
.ico .fw { fill: var(--fill); } .ico .fy { fill: var(--hl); } .ico .fo { fill: var(--g1); }
.ico .so { stroke: var(--g1); stroke-width: 5; }
.ico .dash, .ico .loop { stroke-dasharray: 5 4; }
.ico .c1 { stroke: #ff7a45; } .ico .c2 { stroke: #ffc21a; } .ico .c3 { stroke: #5cc93a; }
.ico .c4 { stroke: #20b5d2; } .ico .c5 { stroke: #8f5cff; }
.ico .c1, .ico .c2, .ico .c3, .ico .c4, .ico .c5 { stroke-width: 2.8; }
.ico .merc { transform-origin: 50% 100%; }

/* icons move only when you point at (or tab to) a chapter */
.ch:hover .slide, .ch:focus-visible .slide { animation: slide 1.3s ease-in-out infinite; }
.ch:hover .ball, .ch:focus-visible .ball { animation: ball 1.2s ease-in-out infinite alternate; }
.ch:hover .box, .ch:focus-visible .box { animation: nudge .7s ease-in-out infinite alternate; }
.ch:hover .arr, .ch:focus-visible .arr { animation: nudge .7s ease-in-out infinite alternate; }
.ch:hover .bolt, .ch:focus-visible .bolt { animation: pulse .6s ease-in-out infinite alternate; }
.ch:hover .piston, .ch:focus-visible .piston { animation: piston 1.2s ease-in-out infinite alternate; }
.ch:hover .j1, .ch:focus-visible .j1 { animation: jig .5s ease-in-out infinite alternate; }
.ch:hover .j2, .ch:focus-visible .j2 { animation: jig .42s ease-in-out infinite alternate-reverse; }
.ch:hover .j3, .ch:focus-visible .j3 { animation: jig .55s ease-in-out infinite alternate; }
.ch:hover .merc, .ch:focus-visible .merc { animation: merc 1.1s ease-in-out infinite alternate; }
.ch:hover .flame, .ch:focus-visible .flame { animation: pulse .45s ease-in-out infinite alternate; }
.ch:hover .drift, .ch:focus-visible .drift { animation: drift 1.1s linear infinite; }
.ch:hover .dash, .ch:focus-visible .dash, .ch:hover .loop, .ch:focus-visible .loop { animation: flow .7s linear infinite; }
.ch:hover .fan, .ch:focus-visible .fan { animation: fan 1s ease-in-out infinite alternate; }
.ch:hover .chg1, .ch:focus-visible .chg1 { animation: toward .6s ease-in-out infinite alternate; }
.ch:hover .chg2, .ch:focus-visible .chg2 { animation: toward-r .6s ease-in-out infinite alternate; }
.ch:hover .spark, .ch:focus-visible .spark { animation: flicker .35s steps(2) infinite; }
.ch:hover .bulb2, .ch:focus-visible .bulb2 { animation: pulse .5s ease-in-out infinite alternate; }
.ch:hover .orbits, .ch:focus-visible .orbits { animation: spin 2.4s linear infinite; }

@keyframes slide { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(9px); } }
@keyframes ball { from { transform: translate(0, 0); } to { transform: translate(16px, -17px); } }
@keyframes nudge { from { transform: translateX(0); } to { transform: translateX(4px); } }
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.14); } }
@keyframes piston { from { transform: translateY(0); } to { transform: translateY(8px); } }
@keyframes jig { from { transform: translate(-2px, -2px); } to { transform: translate(2px, 2px); } }
@keyframes merc { from { transform: scaleY(1); } to { transform: scaleY(1.45); } }
@keyframes drift { to { transform: translateX(-26px); } }
@keyframes flow { to { stroke-dashoffset: -18; } }
@keyframes fan { from { transform: rotate(-5deg); } to { transform: rotate(6deg); } }
@keyframes toward { from { transform: translateX(0); } to { transform: translateX(5px); } }
@keyframes toward-r { from { transform: translateX(0); } to { transform: translateX(-5px); } }
@keyframes flicker { from { opacity: 1; } to { opacity: .25; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- footer ---------- */
.foot {
  display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; width: min(1160px, 100%); margin: 0 auto;
  padding: 14px 32px 20px; color: var(--muted); font-size: 13px; border-top: 1.5px solid var(--line);
}
.remove { margin-left: auto; }
.link { background: none; border: 0; color: var(--muted); font: inherit; cursor: pointer; text-decoration: underline; padding: 0 4px; }
.link:hover { color: var(--ink); }
.link.danger { color: var(--g1); font-weight: 600; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .plot { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


/* =====================================================================
   Demo website additions (everything above is the desktop app's launcher)
   ===================================================================== */
a { color: inherit; }
a.ch { text-decoration: none; }
.link { font-family: inherit; }

/* landing: code + video on the board */
.hero.demo { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); align-items: center; }
.hero.demo .hero-text { min-width: 0; }
.hero.demo .h1 { font-size: clamp(28px, 3.6vw, 40px); }
.hero.demo .lead { margin-bottom: 20px; max-width: 34em; }
.hero.demo .bulb { top: 12px; right: 14px; }
.codeform { display: grid; gap: 12px; max-width: 440px; }
.codeform input { font-size: 22px; padding-top: 14px; }
.hero.demo .msg { max-width: 440px; }
.facts { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 7px; max-width: 480px; font-size: 14.5px; color: var(--muted); }
.facts li { position: relative; padding-left: 20px; }
.facts li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 9px; height: 9px; border-radius: 50%; background: var(--g0); }
.facts li:nth-child(2)::before { background: var(--g2); }
.facts li:nth-child(3)::before { background: var(--g1); }
.facts .en { color: var(--muted); }
.ask { margin: 16px 0 0; font-size: 14.5px; color: var(--muted); }
.ask a { color: var(--g2); font-weight: 600; }

.vid { margin: 0; min-width: 0; }
.vid video {
  display: block; width: 100%; aspect-ratio: 16 / 9; background: #0b0d0c;
  border: 2px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
}
.vid figcaption { margin-top: 8px; font-size: 13px; color: var(--muted); text-align: right; }

.feat { cursor: default; }
.feat:hover, .feat:active { transform: none; box-shadow: none; border-color: var(--line); background: var(--card); }
.feat .fm { font-size: 22px; }

/* chapter list: session pill */
.sess { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 16px; }
.pill {
  display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 14px; border-radius: 999px;
  background: var(--btn); color: var(--btn-ink); font-size: 14.5px; font-weight: 600;
}
.pill b { color: var(--hl); font-family: var(--head); }
:root[data-theme="dark"] .pill b { color: #8a5a00; }
.pill.warn { background: #b45309; color: #fff; }
.pill.warn b { color: #fff; }
a.continue { text-decoration: none; }

/* admin */
.admin .wrap { max-width: 1000px; }
.admin h1 { font: 700 30px/1.2 var(--head); margin: 6px 0 4px; }
.admin form { display: flex; }
.panel { background: var(--card); border: 1.5px solid var(--line); border-radius: 14px; padding: 18px 20px; margin-top: 16px; box-shadow: var(--shadow); }
.panel h2 { font: 700 21px/1.2 var(--head); margin: 0 0 12px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.row label { display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
.row .grow { flex: 1 1 220px; }
.admin input, .admin select {
  width: 100%; text-align: left; text-transform: none; letter-spacing: 0; font: 500 16px var(--bn); color: var(--ink);
  background: var(--card); border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px;
}
.admin input:focus, .admin select:focus { outline: none; border-color: var(--g2); }
.admin .btn { width: auto; font: 600 15px var(--bn); padding: 11px 20px; align-items: center; }
.btn.small { padding: 6px 12px !important; font-size: 14px !important; border-radius: 10px; }
.btn.alt { background: var(--card); color: var(--ink); border: 1.5px solid var(--line); }
.en { color: var(--muted); font-size: .92em; }
.msg.err { background: color-mix(in srgb, var(--g1) 18%, var(--card)); border-left-color: var(--g1); }
.msg.ok { background: color-mix(in srgb, var(--g0) 16%, var(--card)); border-left-color: var(--g0); }
.made { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.made li { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--card); }
.made code { font: 600 19px var(--mono); letter-spacing: .06em; }
.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1.5px solid var(--line); vertical-align: middle; }
th { color: var(--muted); font-weight: 600; }
.st { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: color-mix(in srgb, var(--muted) 18%, var(--card)); }
.st.live { background: color-mix(in srgb, var(--g0) 22%, var(--card)); color: var(--ink); }
.st.unused { background: color-mix(in srgb, var(--g2) 20%, var(--card)); color: var(--ink); }
.st.revoked { background: color-mix(in srgb, var(--g1) 22%, var(--card)); color: var(--ink); }

/* phones */
@media (max-width: 900px) {
  .hero.demo { grid-template-columns: 1fr; }
  .vid figcaption { text-align: left; }
}
@media (max-width: 600px) {
  .top { padding: 14px 120px 0 16px; }
  .logo-sm { width: 66px; }
  .tools { top: 14px; right: 14px; gap: 8px; }
  .wrap { padding: 12px 14px 22px; }
  .board { border-width: 7px; }
  .hero { padding: 22px 16px 20px; gap: 20px; }
  .sections { gap: 24px; margin-top: 24px; }
  .ch { grid-template-columns: 54px 1fr; gap: 12px; padding: 10px 14px 10px 14px; }
  .ch .fm { display: none; }
  .lens { width: 54px; height: 54px; }
  .ico { width: 40px; height: 40px; }
  .foot { padding: 12px 16px 18px; }
  .hero.demo .bulb { display: none; }
}


/* polish */
.h1, .lead { text-wrap: balance; }
#expired { margin: 0 0 16px; }
.facts .en { display: block; }
.rows.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feat { grid-template-columns: 62px 1fr; }
.feat .fm { display: none; }
@media (max-width: 1000px) { .rows.three { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .feat { grid-template-columns: 54px 1fr; } }

a.btn { text-decoration: none; }
.card p { margin: 0 0 14px; line-height: 1.6; }
.ch.seen .num::after { content: " · খোলা হয়েছে"; color: var(--muted); font-weight: 500; }