/* Medulla 3.0 look. Loaded after polish.css on every page.
   Sections:
     1. tokens (light, dark)           6. landing sections
     2. page backdrop                  7. app (top bar, brain map)
     3. floating top bar               8. sign-in page
     4. surfaces and buttons           9. reduced motion, high contrast
     5. icons and icon tiles
   Light theme: white and lavender with soft purple light. Dark theme
   ("midnight"): deep navy-black surfaces, neutral hairlines of light, and
   purple kept for actions and highlights only, so it reads calm, not loud.
   Colours stay inside the locked palette (navy #0D1128, purple #6C5CE7,
   lavender #A29BFE, white, orange #FF9F43) and their tints and shades. */

/* -------------------------------------------------------------- 1. tokens */

:root {
  --g-brand: linear-gradient(135deg, #8B7DF4 0%, #6C5CE7 48%, #4F3FCF 100%);
  --g-text: linear-gradient(100deg, #5A4AD6 0%, #6C5CE7 40%, #9188F7 100%);
  --g-line: linear-gradient(90deg, rgba(162, 155, 254, 0), rgba(162, 155, 254, 0.7), rgba(255, 159, 67, 0.5), rgba(162, 155, 254, 0));
  --surface-grad: linear-gradient(180deg, #FFFFFF 0%, #FBFAFF 100%);
  --card-bg: linear-gradient(180deg, #FFFFFF, #FBFAFF);
  --card-edge: linear-gradient(180deg, rgba(108, 92, 231, 0.2), rgba(108, 92, 231, 0.07) 50%, rgba(108, 92, 231, 0.12));
  --card-edge-hover: linear-gradient(180deg, rgba(108, 92, 231, 0.42), rgba(108, 92, 231, 0.14) 50%, rgba(108, 92, 231, 0.2));
  --edge: rgba(108, 92, 231, 0.12);
  --edge-strong: rgba(108, 92, 231, 0.28);
  --lift-1: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(13, 17, 40, 0.05), 0 10px 30px -18px rgba(54, 40, 160, 0.28);
  --lift-2: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 6px rgba(13, 17, 40, 0.05), 0 28px 60px -30px rgba(54, 40, 160, 0.42);
  --bar-bg: rgba(255, 255, 255, 0.78);
  --bar-edge: rgba(108, 92, 231, 0.12);
  --bar-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 12px 34px -18px rgba(40, 28, 130, 0.38);
  --tile-bg: linear-gradient(180deg, #FFFFFF, #F3F1FF);
  --tile-edge: rgba(108, 92, 231, 0.16);
  --tile-ink: #5A4AD6;
  --tile-shadow: inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(13, 17, 40, 0.06), 0 6px 14px -10px rgba(76, 60, 200, 0.35);
}

html[data-theme="dark"] {
  color-scheme: dark;
  /* "Deep violet" (3.0): a violet-black night, violet light from above, glass cards
     lit at their top edge. Built from shades of the brand purple #6C5CE7. */
  --bg: #08061A;
  --bg-soft: #0D0A26;
  --surface: #130F33;
  --lav-100: #1C1745;
  --lav-200: #261F5A;
  --lav-300: #352C78;
  --orange-100: #2A1A16;
  --orange-200: #45291A;
  --ink: #F3F1FF;
  --ink-2: #D0CCF2;
  --ink-3: #A39FCC;
  --line: #201A4A;
  --line-2: #2E2766;
  --purple-600: #C9C3FF;
  --accent-text: #B9B1FF;
  --g-text: linear-gradient(100deg, #FFFFFF 0%, #D6D1FF 40%, #9F94FF 100%);
  --g-line: linear-gradient(90deg, rgba(162, 155, 254, 0), rgba(162, 155, 254, 0.45), rgba(162, 155, 254, 0));
  --surface-grad: linear-gradient(180deg, #161140 0%, #100C2C 100%);
  --card-bg: linear-gradient(180deg, rgba(124, 108, 255, 0.11), rgba(124, 108, 255, 0.025) 55%), linear-gradient(180deg, #120E32, #0D0A25);
  --card-edge: linear-gradient(180deg, rgba(178, 168, 255, 0.5), rgba(124, 108, 255, 0.16) 40%, rgba(124, 108, 255, 0.07));
  --card-edge-hover: linear-gradient(180deg, rgba(200, 192, 255, 0.85), rgba(124, 108, 255, 0.32) 50%, rgba(124, 108, 255, 0.12));
  --edge: rgba(162, 155, 254, 0.14);
  --edge-strong: rgba(162, 155, 254, 0.3);
  --lift-1: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.5), 0 20px 40px -26px rgba(0, 0, 0, 0.95);
  --lift-2: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 6px rgba(0, 0, 0, 0.5), 0 30px 60px -30px rgba(0, 0, 0, 0.95), 0 0 70px -24px rgba(108, 92, 231, 0.55);
  --shadow-1: var(--lift-1);
  --shadow-2: var(--lift-2);
  --ring: 0 0 0 1px rgba(162, 155, 254, 0.06);
  --glass: rgba(20, 15, 52, 0.66);
  --glass-line: rgba(162, 155, 254, 0.16);
  --hero-glow: rgba(108, 92, 231, 0.3);
  --bar-bg: rgba(16, 12, 42, 0.72);
  --bar-edge: rgba(162, 155, 254, 0.16);
  --bar-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 40px -22px rgba(0, 0, 0, 0.95), 0 0 40px -20px rgba(108, 92, 231, 0.5);
  --tile-bg: linear-gradient(180deg, rgba(162, 155, 254, 0.16), rgba(108, 92, 231, 0.06));
  --tile-edge: rgba(162, 155, 254, 0.18);
  --tile-ink: #CFC9FF;
  --tile-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 14px -10px rgba(0, 0, 0, 0.9);
}

/* Character tints written inline (style="--tint:…") become quiet dark stages. */
html[data-theme="dark"] [style*="--tint"] { --tint: #1A1542 !important; }
html[data-theme="dark"] [style*="#FFF1E4"], html[data-theme="dark"] [style*="#FFF5EC"], html[data-theme="dark"] [style*="#FFF0E6"], html[data-theme="dark"] [style*="#FFF2E9"] { --tint: #1A1720 !important; }

/* ------------------------------------------------------- 2. page backdrop */

body {
  background:
    radial-gradient(900px 520px at 88% -120px, rgba(162, 155, 254, 0.2), transparent 70%),
    radial-gradient(700px 480px at -10% 40%, rgba(255, 159, 67, 0.05), transparent 70%),
    var(--bg);
}
/* Dark: violet light falling from the top, a soft beam from the top-left corner and fine
   star dust (fixed behind the page, like a night sky the page scrolls over). */
html[data-theme="dark"] body {
  background:
    radial-gradient(1200px 520px at 50% -240px, rgba(108, 92, 231, 0.34), transparent 70%),
    radial-gradient(900px 700px at -10% -10%, rgba(124, 108, 255, 0.16), transparent 65%),
    var(--bg);
}
html[data-theme="dark"] body::before, html[data-theme="dark"] body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
}
html[data-theme="dark"] body::before { /* the beam */
  background:
    linear-gradient(122deg, transparent 6%, rgba(150, 136, 255, 0.07) 13%, rgba(190, 182, 255, 0.13) 15.5%, rgba(150, 136, 255, 0.06) 19%, transparent 27%),
    radial-gradient(260px 200px at 0% 0%, rgba(200, 192, 255, 0.22), transparent 70%);
}
html[data-theme="dark"] body::after { /* star dust, three tile sizes so it never looks repeated */
  opacity: 0.55;
  background-image:
    radial-gradient(1px 1px at 23px 41px, rgba(255, 255, 255, 0.9), transparent 60%),
    radial-gradient(1px 1px at 151px 113px, rgba(214, 209, 255, 0.8), transparent 60%),
    radial-gradient(1.5px 1.5px at 97px 187px, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(1px 1px at 271px 29px, rgba(214, 209, 255, 0.7), transparent 60%),
    radial-gradient(1px 1px at 337px 251px, rgba(255, 255, 255, 0.6), transparent 60%);
  background-size: 211px 211px, 331px 331px, 467px 467px, 389px 389px, 523px 523px;
}
html.a11y-nodecor[data-theme="dark"] body::before, html.a11y-nodecor[data-theme="dark"] body::after { display: none; }

.section.is-soft, .page-hero { position: relative; }
.section.is-soft {
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(162, 155, 254, 0.14), transparent 70%),
    linear-gradient(180deg, var(--bg-soft), color-mix(in srgb, var(--bg-soft) 60%, var(--bg)));
}
.section.is-soft::before, .page-hero::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none;
  background: var(--g-line); opacity: 0.6;
}
html[data-theme="dark"] .section.is-soft { background: radial-gradient(60% 90% at 100% 0%, rgba(108, 92, 231, 0.14), transparent 70%), rgba(13, 10, 38, 0.6); }
html[data-theme="dark"] .section.is-soft::before, html[data-theme="dark"] .page-hero::after { opacity: 1; }
html[data-theme="dark"] .page-hero { background: radial-gradient(60% 120% at 80% 0%, rgba(108, 92, 231, 0.22), transparent 70%), rgba(13, 10, 38, 0.55); }

/* ------------------------------------------------------ 3. floating top bar */

/* The public site's header is a floating rounded bar resting above the page.
   The app keeps its own top bar (section 7). */
.site-header:not(.app-hud) {
  padding: 12px 0 0;
  background: transparent !important;
  border-bottom: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  pointer-events: none;
}
.site-header:not(.app-hud) > * { pointer-events: auto; }
.site-header:not(.app-hud) .header-inner {
  position: relative;
  min-height: 64px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--bar-edge);
  border-radius: 22px;
  background: var(--bar-bg);
  backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px);
  box-shadow: var(--bar-shadow);
}
.site-header:not(.app-hud) .header-inner::after {
  content: ""; position: absolute; left: 24px; right: 24px; bottom: -1px; height: 1px; pointer-events: none;
  background: var(--g-line); opacity: 0.55; border-radius: 1px;
}
.site-header:not(.app-hud) .container.header-inner { width: min(100% - 2 * var(--gutter), 1240px); }
.site-header:not(.app-hud) .brand-mark { width: 40px; height: 40px; border-radius: 13px; }
.site-header:not(.app-hud) .brand-mark img { width: 36px; height: 36px; }
.site-header:not(.app-hud) .icon-btn { width: 40px; min-width: 40px; height: 40px; padding: 0; border-radius: 12px; border-color: transparent; background: transparent; }
/* In the bar the accessibility button is an icon (its name stays in aria-label and the tooltip). */
.site-header:not(.app-hud) .ax-toggle-text { display: none !important; }
.site-header:not(.app-hud) .header-tools { gap: 6px; }
.site-header:not(.app-hud) .icon-btn:hover { background: var(--bg-soft); border-color: var(--edge); }
html[data-theme="dark"] .site-header:not(.app-hud) .icon-btn:hover { background: rgba(255, 255, 255, 0.06); }
.site-header:not(.app-hud) .lang-switch { padding: 3px; background: color-mix(in srgb, var(--bg-soft) 80%, transparent); border-color: var(--edge); }
.site-header:not(.app-hud) .lang-btn { min-width: 36px; min-height: 34px; padding: 0 8px; font-size: 0.78rem; }
html[data-theme="dark"] .lang-btn[aria-pressed="true"] { background: rgba(255, 255, 255, 0.1); color: #FFFFFF; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.site-header:not(.app-hud) .header-auth .btn, .site-header:not(.app-hud) .header-cta { min-height: 42px; }
@media (min-width: 1160px) {
  .site-header:not(.app-hud) .site-nav a { min-height: 40px; padding: 0 13px; border-radius: 12px; font-weight: 600; }
  .site-header:not(.app-hud) .site-nav a:hover { background: color-mix(in srgb, var(--lav-100) 70%, transparent) !important; color: var(--ink); }
  html[data-theme="dark"] .site-header:not(.app-hud) .site-nav a:hover { background: rgba(255, 255, 255, 0.06) !important; }
  .site-header:not(.app-hud) .site-nav a[aria-current="page"] { color: var(--ink); background: color-mix(in srgb, var(--lav-100) 80%, transparent) !important; }
  html[data-theme="dark"] .site-header:not(.app-hud) .site-nav a[aria-current="page"] { background: rgba(255, 255, 255, 0.08) !important; }
  .site-header:not(.app-hud) .site-nav a[aria-current="page"]::after { bottom: 2px; background: var(--orange); }
}
.site-header:not(.app-hud) .site-nav.is-open {
  top: calc(100% + 8px); left: 0; right: 0;
  border: 1px solid var(--bar-edge); border-radius: 20px;
  background: var(--surface-grad); box-shadow: var(--lift-2);
}
@media (max-width: 640px) {
  .site-header:not(.app-hud) { padding-top: 8px; }
  .site-header:not(.app-hud) .container.header-inner { width: calc(100% - 16px); }
  .site-header:not(.app-hud) .header-inner { min-height: 58px; padding: 0 6px 0 8px; border-radius: 18px; }
}

/* ------------------------------------------------- 4. surfaces and buttons */

.feature-list li, .timeline li, .person, .advisor-chip, .callout-box, .quiz-q, .result-card, dialog.modal, .related-list a {
  border-color: var(--edge);
  background: var(--surface-grad);
  box-shadow: var(--lift-1);
}
/* Cards: the edge is a gradient, a little brighter at the top, as if lit from above. */
:is(.card:where(:not(.danger-zone, .community)), .char-card, .explainer, .activity-card, .stats, .access-teaser, .topic-hub, .quiz-q, .result-card, .related-list a) {
  border-color: transparent;
  background: var(--card-bg) padding-box, var(--card-edge) border-box;
  box-shadow: var(--lift-1);
}
.card { border-radius: 24px; }
:is(a.card, .activity-card, .char-card, .related-list a, .topic-hub):hover {
  background: var(--card-bg) padding-box, var(--card-edge-hover) border-box;
  box-shadow: var(--lift-2);
}
html[data-theme="dark"] .card.community {
  border-color: transparent;
  background: linear-gradient(135deg, rgba(108, 92, 231, 0.16), transparent 60%) padding-box, var(--card-bg) padding-box, var(--card-edge) border-box;
}
html[data-theme="dark"] .card.danger-zone { background: linear-gradient(180deg, var(--surface), #1C1220); border-color: #3A2817; }
html[data-theme="dark"] .chapter.is-night .explainer {
  border-color: transparent;
  background: linear-gradient(180deg, rgba(22, 17, 60, 0.92), rgba(15, 11, 40, 0.92)) padding-box, var(--card-edge) border-box;
}
html.a11y-contrast :is(.card, .char-card, .explainer, .activity-card, .stats, .access-teaser, .topic-hub, .quiz-q, .result-card) { border-color: var(--line); background: var(--surface); }

.btn-primary {
  background: var(--g-brand);
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -2px 0 rgba(30, 18, 120, 0.22), 0 12px 26px -12px rgba(108, 92, 231, 0.75);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #998CF6 0%, #7565EA 48%, #5646D6 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), inset 0 -2px 0 rgba(30, 18, 120, 0.22), 0 16px 32px -12px rgba(108, 92, 231, 0.85);
}
html[data-theme="dark"] .btn-primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 10px 24px -14px rgba(108, 92, 231, 0.7); }
.btn-ghost { border-color: var(--edge-strong); background: color-mix(in srgb, var(--surface) 85%, transparent); }
html[data-theme="dark"] .btn-ghost { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.12); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); }
html[data-theme="dark"] .btn-ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.22); color: #FFFFFF; }

.input, .field input, .field textarea, .field select { border-color: var(--edge-strong); box-shadow: inset 0 1px 2px rgba(13, 17, 40, 0.06); }
html[data-theme="dark"] :is(.input, .field input, .field textarea, .field select) {
  background: #0A0720; border-color: rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}
.input:focus, .field input:focus { border-color: var(--purple); box-shadow: 0 0 0 4px rgba(108, 92, 231, 0.18); }

.hero h1 .accent, html[data-theme="dark"] .hero h1 .accent, .page-hero h1 .accent {
  background: var(--g-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.eyebrow { gap: 10px; }
.eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; flex: none; background: linear-gradient(90deg, var(--orange), var(--lavender)); }
.eyebrow:has(.icon)::before { display: none; }

html[data-theme="dark"] .chip, html[data-theme="dark"] .tag { background: rgba(255, 255, 255, 0.06); color: var(--ink-2); }

/* -------------------------------------------------- 5. icons and icon tiles */

/* Clean line icons: one thin stroke, no tinted blob behind the shape and no
   white shine marks. Small solid details (dots, the play triangle, a saved
   bookmark) stay solid. */
svg.icon { stroke-width: 1.75; }
html .icon .f { fill: none; }
html .icon .s { display: none; }
.icon-sm { stroke-width: 2; }

/* Tiles: a calm square with a hairline edge, not a glossy bubble. */
:is(.tile, .stat .tile, .badge-pill .dot, .checks .check, .toast-icon, .bot-feats .icon, .topic-hub .tile, .ax-p-icon, .hud-ico) {
  background: var(--tile-bg);
  box-shadow: var(--tile-shadow), inset 0 0 0 1px var(--tile-edge);
  color: var(--tile-ink);
}
.tile, .stat .tile, .topic-hub .tile { border-radius: 14px; }
.stat .tile { width: 44px; height: 44px; }
.stat .tile .icon { width: 22px; height: 22px; }
.tile.is-orange { --tile-ink: #C76A12; background: linear-gradient(180deg, #FFFFFF, #FFF3E6); box-shadow: inset 0 1px 0 #FFFFFF, 0 6px 14px -10px rgba(255, 159, 67, 0.5), inset 0 0 0 1px rgba(255, 159, 67, 0.25); color: #C76A12; }
html[data-theme="dark"] .tile.is-orange { background: linear-gradient(180deg, rgba(255, 159, 67, 0.14), rgba(255, 159, 67, 0.05)); box-shadow: inset 0 0 0 1px rgba(255, 159, 67, 0.2); color: #FFC08A; }
.footer-access .icon { background: var(--g-brand); }
.ax-badge { background: var(--g-brand); }
/* The app's top-bar icons sit on the navy bar in both themes. */
.app-hud .hud-ico { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); color: #C9C3FF; }
.app-hud .hud-tab[aria-current="page"] .hud-ico { background: #FFFFFF; box-shadow: none; color: var(--purple); }

/* ----------------------------------------------------- 6. landing sections */

.hero::before { background: radial-gradient(closest-side, rgba(162, 155, 254, 0.42), transparent); }
html[data-theme="dark"] .hero::before { background: radial-gradient(closest-side, rgba(108, 92, 231, 0.24), rgba(108, 92, 231, 0.05) 60%, transparent); }
html[data-theme="dark"] .hero::after { background: linear-gradient(180deg, transparent, var(--bg)); opacity: 1; }
html[data-theme="dark"] .hero-circle {
  background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015) 55%, transparent 72%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .hero-brain { filter: drop-shadow(0 0 50px rgba(108, 92, 231, 0.28)); }
.float-card { border-radius: 18px; box-shadow: var(--lift-2); }
html[data-theme="dark"] .float-card { background: rgba(20, 15, 52, 0.7); border-color: rgba(255, 255, 255, 0.09); }

.stats { border-radius: 26px; overflow: hidden; }
.stat-value { display: inline-block; background: var(--g-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-theme="dark"] .stat-value { background: none; color: #FFFFFF; }
html[data-theme="dark"] .stats .stat + .stat { border-color: rgba(255, 255, 255, 0.06); }
html.a11y-contrast .stat-value, html.a11y-contrast .hero h1 .accent, html.a11y-contrast .page-hero h1 .accent { background: none; color: var(--accent-text); }

.char-card { border-radius: 24px; overflow: hidden; }
.char-art { position: relative; }
.char-art::after {
  content: ""; position: absolute; left: 22%; right: 22%; bottom: 10px; height: 14px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(54, 40, 160, 0.28), transparent); pointer-events: none;
}
html[data-theme="dark"] .char-art {
  background: radial-gradient(60% 70% at 50% 100%, rgba(162, 155, 254, 0.12), transparent 70%), #130F36;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
html[data-theme="dark"] .char-art::after { background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), transparent); }

html[data-theme="dark"] .host-circle {
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02) 60%, transparent 75%), #0F0B2A;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 30px 60px -30px rgba(0, 0, 0, 0.9);
}
html[data-theme="dark"] .chapter:nth-child(even) { background: var(--bg-soft); }
html[data-theme="dark"] .story-nav { background: rgba(18, 14, 48, 0.8); border-color: rgba(255, 255, 255, 0.08); }

.cta-band {
  background:
    radial-gradient(60% 120% at 100% 0%, rgba(162, 155, 254, 0.55), transparent 60%),
    radial-gradient(50% 100% at 0% 100%, rgba(255, 159, 67, 0.22), transparent 60%),
    linear-gradient(115deg, rgba(76, 60, 200, 0.92), rgba(108, 92, 231, 0.55) 60%, rgba(108, 92, 231, 0.2)),
    url("../assets/img/waves.webp") center / cover no-repeat,
    var(--purple);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 40px 80px -40px rgba(76, 60, 200, 0.8);
}
html[data-theme="dark"] .cta-band {
  background:
    linear-gradient(115deg, rgba(38, 28, 120, 0.94), rgba(58, 45, 166, 0.6) 60%, rgba(58, 45, 166, 0.25)),
    url("../assets/img/waves.webp") center / cover no-repeat,
    #3A2DA6;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 40px 80px -40px rgba(0, 0, 0, 0.9);
}
html[data-theme="dark"] .bot-card { background: var(--card-bg) padding-box, var(--card-edge) border-box; border-color: transparent; box-shadow: var(--lift-2); }
html[data-theme="dark"] .bot-card-art { background: radial-gradient(70% 70% at 50% 100%, rgba(42, 171, 238, 0.12), transparent 70%), #0C0924; }

.site-footer { position: relative; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--g-line); opacity: 0.6; }
html[data-theme="dark"] .site-footer { background: #06041A; }
html[data-theme="dark"] .site-footer::before { opacity: 1; }
html[data-theme="dark"] .footer-access, html[data-theme="dark"] .btn-social { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.08); }

/* ------------------------------------------------- 7. app (top bar, brain map) */

.app-hud.site-header {
  background:
    radial-gradient(60% 200% at 80% -40%, rgba(108, 92, 231, 0.4), transparent 70%),
    linear-gradient(180deg, #151B44, #0B0F26);
  border-bottom: 1px solid rgba(162, 155, 254, 0.16);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.03), 0 14px 34px -20px rgba(0, 0, 0, 0.8);
}
html[data-theme="dark"] .app-hud.site-header {
  background: rgba(12, 9, 34, 0.82);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 10px 30px -20px rgba(0, 0, 0, 0.9);
}
html[data-theme="dark"] .hud-chip, html[data-theme="dark"] .app-hud .icon-btn { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.09); box-shadow: none; }
html[data-theme="dark"] .app-tabbar { background: rgba(12, 9, 34, 0.92); border-top-color: rgba(255, 255, 255, 0.07); }
.app-card { border-radius: 26px; }
.app-card.map-card { background: radial-gradient(70% 60% at 50% 45%, rgba(162, 155, 254, 0.16), transparent 70%) padding-box, var(--card-bg) padding-box, var(--card-edge) border-box; }
html[data-theme="dark"] .app-card.map-card { background: radial-gradient(55% 50% at 50% 45%, rgba(108, 92, 231, 0.14), transparent 70%) padding-box, var(--card-bg) padding-box, var(--card-edge) border-box; }

/* ------------------------------------------------------------ 8. sign-in page */

/* One card on a calm backdrop: a picture panel on the left, the form on the right. */
.start.start-v3 {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; gap: 16px;
  height: auto; min-height: 100vh; min-height: 100dvh;
  padding: 16px clamp(16px, 3vw, 40px) 18px;
  background:
    radial-gradient(900px 600px at 15% -10%, rgba(162, 155, 254, 0.28), transparent 70%),
    radial-gradient(700px 500px at 100% 100%, rgba(255, 159, 67, 0.1), transparent 70%),
    linear-gradient(180deg, #F4F2FF, #ECE9FB);
}
html[data-theme="dark"] .start.start-v3 {
  background: radial-gradient(900px 500px at 20% -15%, rgba(108, 92, 231, 0.14), transparent 70%), var(--bg);
}
.start-backdrop { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.start-backdrop i { position: absolute; border-radius: 50%; }
.start-backdrop .ring { border: 1px solid rgba(108, 92, 231, 0.16); }
html[data-theme="dark"] .start-backdrop .ring { border-color: rgba(255, 255, 255, 0.06); }
.start-backdrop .r1 { width: 760px; height: 760px; left: -340px; bottom: -420px; }
.start-backdrop .r2 { width: 520px; height: 520px; right: -180px; top: -260px; }
.start-backdrop .dot { width: 14px; height: 14px; background: rgba(108, 92, 231, 0.28); }
html[data-theme="dark"] .start-backdrop .dot { background: rgba(255, 255, 255, 0.08); }
.start-backdrop .d1 { left: 18%; top: 9%; }
.start-backdrop .d2 { right: 7%; top: 38%; width: 18px; height: 18px; background: var(--purple); opacity: 0.55; }
.start-backdrop .d3 { left: 62%; bottom: 4%; width: 12px; height: 12px; }

.start-v3 .start-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: min(100%, 1120px); margin-inline: auto; }
.start-v3 .start-bar .header-tools { margin-left: 0; }
.start-v3 .start-bar .icon-btn { border-color: var(--edge); background: var(--bar-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.start-v3 .start-bar .lang-switch { background: var(--bar-bg); border-color: var(--edge); }

.start-shell {
  align-self: center;
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 10px;
  width: min(100%, 1120px); min-height: min(720px, calc(100dvh - 150px)); margin-inline: auto; padding: 10px;
  border: 1px solid transparent; border-radius: 34px;
  background: var(--card-bg) padding-box, var(--card-edge) border-box;
  box-shadow: var(--lift-2);
}

/* Left: the picture panel, the glass brain resting in the light (no character). */
.start-v3 .start-art {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 300px; padding: 30px;
  border-radius: 26px; color: var(--white);
  background: #1A1450 url("../assets/img/waves.webp") center / cover no-repeat;
}
.start-v3 .start-art::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 45% at 50% 40%, rgba(162, 155, 254, 0.3), transparent 70%),
    linear-gradient(180deg, rgba(13, 17, 40, 0.1) 0%, rgba(13, 17, 40, 0) 40%, rgba(9, 10, 22, 0.82) 100%);
}
.start-art-stars { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1.5px 1.5px at 12% 14%, rgba(255, 255, 255, 0.85), transparent 60%),
    radial-gradient(1px 1px at 30% 8%, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 68% 18%, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(1px 1px at 84% 9%, rgba(255, 255, 255, 0.8), transparent 60%),
    radial-gradient(1px 1px at 92% 30%, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 6% 40%, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(1px 1px at 46% 26%, rgba(255, 255, 255, 0.5), transparent 60%);
}
.start-v3 .start-art .brand { position: absolute; top: 24px; left: 26px; color: var(--white); }
.start-v3 .start-art .brand-tag { color: #D9D5FF; }
.start-stage { position: absolute; left: 0; right: 0; top: 8%; bottom: 34%; display: grid; place-items: center; z-index: -1; }
.start-stage::after { /* a soft pool of light under the brain */
  content: ""; position: absolute; left: 22%; right: 22%; bottom: 4%; height: 16%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(162, 155, 254, 0.35), transparent);
  filter: blur(6px);
}
.start-stage .start-brain { position: relative; width: min(82%, 400px); height: auto; filter: drop-shadow(0 0 40px rgba(162, 155, 254, 0.45)) drop-shadow(0 30px 30px rgba(8, 6, 40, 0.5)); }
.start-art h2 { margin: 0 0 8px; max-width: 18ch; color: var(--white); font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2rem); }
.start-slide-text { min-height: 3em; margin: 0 0 18px; max-width: 34ch; color: #E2DFFF; font-size: 1rem; line-height: 1.45; }
.start-slide-text span { display: inline-block; animation: slide-in 0.45s var(--ease-out) both; }
@keyframes slide-in { from { opacity: 0; transform: translateY(6px); } }
.start-dots { display: flex; gap: 8px; }
.start-dots button { position: relative; width: 30px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.start-dots button::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px;
  background: rgba(255, 255, 255, 0.35); transition: background-color 0.2s ease;
}
.start-dots button[aria-current="true"] { width: 46px; }
.start-dots button[aria-current="true"]::before { background: var(--white); }

/* Right: the form. */
.start-v3 .start-main {
  display: flex; flex-direction: column; justify-content: center; align-items: stretch;
  height: auto; overflow: visible;
  padding: clamp(18px, 3vw, 40px) clamp(16px, 3.4vw, 48px);
  background: none;
}
html[data-theme="dark"] .start-v3 .start-main { background: none; }
.start-v3 .start-card {
  width: 100%; max-width: 470px; margin-inline: auto; padding: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible;
}
html[data-theme="dark"] .start-v3 .start-card { box-shadow: none; }
.start-v3 .start-card::before { display: none; }
.start-v3 .start-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.start-v3 .start-head h1 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem); margin-bottom: 6px; }
.start-v3 .start-head .lead { margin: 0; font-size: 0.95rem; }
.start-v3 .start-hero-art { width: 72px; height: 72px; margin: 0; border-radius: 22px; flex: none; }
html[data-theme="dark"] .start-v3 .start-hero-art { background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.08), #1A1542 70%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.start-v3 .start-card .start-step { margin-bottom: 18px; }
html[data-theme="dark"] .start-picker .avatar-option { background: #1A1542; border-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .start-picker .avatar-option[aria-checked="true"] { border-color: var(--purple); box-shadow: 0 0 0 4px rgba(108, 92, 231, 0.25); }
html[data-theme="dark"] .start-tag { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.1); }
html[data-theme="dark"] .start-chosen { background: rgba(255, 255, 255, 0.08); color: var(--ink); }
.start-v3 .start-foot { text-align: center; margin: 0; }

/* "or" line and the Telegram button, always in view. */
.start-or-line { display: flex; align-items: center; gap: 14px; margin: 20px 0 14px; color: var(--ink-3); font-size: 0.85rem; font-weight: 600; }
.start-or-line::before, .start-or-line::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.start-tg { display: grid; gap: 12px; }
.btn-telegram {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 18px;
  border: 1.5px solid var(--edge-strong); border-radius: 16px;
  background: var(--surface-grad); color: var(--ink);
  font: inherit; font-weight: 700; cursor: pointer;
  box-shadow: var(--lift-1);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-telegram:hover { border-color: #2AABEE; transform: translateY(-1px); box-shadow: 0 0 0 4px rgba(42, 171, 238, 0.14), var(--lift-1); }
.btn-telegram .tg-logo { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(180deg, #37AEE2, #1E96C8); color: #fff; flex: none; }
.btn-telegram .tg-logo svg { width: 16px; height: 16px; margin-left: -2px; }
html[data-theme="dark"] .btn-telegram { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.12); }
/* The agreement: a checkbox and one short line with a link, like any sign-up form. */
.start-tg-panel { display: grid; gap: 12px; }
.start-tg-panel[hidden] { display: none; }
.start-tg .login-consent { display: flex; align-items: center; gap: 10px; margin: 2px 0 0; color: var(--ink-2); font-size: 0.92rem; font-weight: 600; line-height: 1.3; }
.start-tg .login-consent input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--purple); }
.start-tg .login-consent a { color: var(--accent-text); font-weight: 700; }
.start-tg .start-note { margin: 0; font-size: 0.82rem; }
.start-tg .start-note:empty { display: none; }

@media (max-width: 959px) {
  .start.start-v3 { padding: 10px 10px 16px; gap: 10px; }
  .start-shell { grid-template-columns: 1fr; min-height: 0; padding: 8px; border-radius: 28px; }
  .start-v3 .start-art { min-height: 260px; padding: 18px 20px; border-radius: 22px; }
  /* Phones: the bar above links home, so the panel shows the brain and one line. */
  .start-v3 .start-art .brand, .start-art h2 { display: none; }
  .start-stage { top: 2%; bottom: 44%; }
  .start-stage .start-brain { width: min(56%, 240px); }
  .start-slide-text { min-height: 0; margin-bottom: 12px; font-size: 0.92rem; }
  .start-v3 .start-main { padding: 18px 10px 12px; }
}

/* ------------------------------------------- 9. reduced motion, high contrast */

@media (prefers-reduced-motion: reduce) { .start-slide-text span { animation: none; } }
html.calm .start-slide-text span { animation: none; }
html.a11y-contrast .card, html.a11y-contrast .start-shell { box-shadow: none; }
html.a11y-nodecor .start-stage, html.a11y-nodecor .start-backdrop { display: none !important; }

/* --------------------------------------------------- 10. 3D icons (tiles, top bar) */

/* A tile whose icon has a 3D picture (js/main.js ICON_3D) shows the picture: it brings its own
   rounded tile, so the CSS tile behind it steps back. The line icon stays for screen readers
   (it is aria-hidden anyway) and as a fallback while the picture loads. */
:is(.tile, .hud-ico):has(.icon[data-i3d="brain"]) { --i3d: url("../assets/icons/brain.webp"); }
:is(.tile, .hud-ico):has(.icon[data-i3d="moon"]) { --i3d: url("../assets/icons/moon.webp"); }
:is(.tile, .hud-ico):has(.icon[data-i3d="book"]) { --i3d: url("../assets/icons/book.webp"); }
:is(.tile, .hud-ico):has(.icon[data-i3d="bolt"]) { --i3d: url("../assets/icons/bolt.webp"); }
:is(.tile, .hud-ico):has(.icon[data-i3d="eye"]) { --i3d: url("../assets/icons/eye.webp"); }
:is(.tile, .hud-ico):has(.icon[data-i3d="bulb"]) { --i3d: url("../assets/icons/bulb.webp"); }
:is(.tile, .hud-ico):has(.icon[data-i3d="target"]) { --i3d: url("../assets/icons/target.webp"); }
:is(.tile, .hud-ico):has(.icon[data-i3d="globe"]) { --i3d: url("../assets/icons/globe.webp"); }
:is(.tile, .hud-ico):has(.icon[data-i3d="flask"]) { --i3d: url("../assets/icons/flask.webp"); }
:is(.tile, .hud-ico):has(.icon[data-i3d="calendar"]) { --i3d: url("../assets/icons/calendar.webp"); }
:is(.tile, .hud-ico):has(.icon[data-i3d="flame"]) { --i3d: url("../assets/icons/flame.webp"); }
:is(.tile, .hud-ico):has(.icon[data-i3d="chat"]) { --i3d: url("../assets/icons/chat.webp"); }
:is(.tile, .stat .tile, .topic-hub .tile, .hud-ico):has(.icon[data-i3d]) {
  background: var(--i3d) center / 116% no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 6px 10px rgba(40, 28, 130, 0.28));
}
html[data-theme="dark"] :is(.tile, .hud-ico):has(.icon[data-i3d]) { filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.55)); }
:is(.tile, .hud-ico) .icon[data-i3d] { visibility: hidden; }
.app-hud .hud-tab[aria-current="page"] .hud-ico:has(.icon[data-i3d]) { box-shadow: 0 0 0 2px #FFFFFF !important; border-radius: 10px; }
.topic-hub .tile:has(.icon[data-i3d]), .stat .tile:has(.icon[data-i3d]) { width: 48px; height: 48px; }
html.a11y-contrast :is(.tile, .hud-ico):has(.icon[data-i3d]) { filter: none; }

/* ------------------------------------------- 11. brain-map area scenes (app) */

/* Each area panel opens with its diorama (assets/areas/) and the area's character at its edge. */
.area-head { gap: 18px; }
.area-scene { position: relative; flex: none; width: 132px; aspect-ratio: 1; }
.area-diorama { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(40, 28, 130, 0.3)); }
html[data-theme="dark"] .area-diorama { filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.7)); }
.area-char { position: absolute; right: -14px; bottom: -6px; width: 58px; height: 58px; }
.area-char img { width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 960px) { .area-scene { width: 150px; } .area-char { width: 64px; height: 64px; } }
@media (max-width: 420px) { .area-scene { width: 108px; } .area-char { width: 48px; height: 48px; right: -10px; } }
html.a11y-nodecor .area-diorama { display: none; }
html.a11y-nodecor .area-scene { width: 72px; }
html.a11y-nodecor .area-char { position: static; width: 72px; height: 72px; }

/* ----------------------------------------------------------- 12. badge medals */

/* Medal pictures (assets/badges/): full colour when earned, a grey coin with a lock before. */
.badge-art.is-medal, .badge-pop-disc.is-medal {
  place-items: center; overflow: visible; border-radius: 50%; background: none !important; box-shadow: none !important;
}
.badge-art.is-medal { width: 88px; height: 88px; }
.badge-art.is-medal img, .badge-pop-disc.is-medal img { width: 100%; height: 100%; max-width: none; object-fit: contain; }
.badge-art.is-medal img { filter: grayscale(1) brightness(1.05); opacity: 0.45; }
.badge-art.is-medal { filter: none; opacity: 1; }
.badge.is-earned .badge-art.is-medal img { filter: drop-shadow(0 8px 14px rgba(201, 106, 26, 0.35)); opacity: 1; }
html[data-theme="dark"] .badge.is-earned .badge-art.is-medal img { filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.6)); }
.badge-art.is-medal .badge-lock { right: 4px; bottom: 6px; }
.badge-pop-disc.is-medal { width: 148px; height: 148px; }
.badge-pop-disc.is-medal img { filter: drop-shadow(0 14px 22px rgba(201, 106, 26, 0.4)); }
.badge-pop-body:not(.is-earned) .badge-pop-disc.is-medal { filter: none; opacity: 1; }
.badge-pop-body:not(.is-earned) .badge-pop-disc.is-medal img { filter: grayscale(1); opacity: 0.5; }

/* ---------------------------------------------- 13. deep violet extras (dark) */

/* Main buttons glow like a lit pill. */
html[data-theme="dark"] .btn-primary {
  background: linear-gradient(135deg, #8F82FF 0%, #6C5CE7 50%, #4A3BD0 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 0 1px rgba(178, 168, 255, 0.35), 0 10px 30px -10px rgba(124, 108, 255, 0.9), 0 0 50px -14px rgba(124, 108, 255, 0.8);
}
html[data-theme="dark"] .btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 0 1px rgba(200, 192, 255, 0.5), 0 12px 34px -10px rgba(124, 108, 255, 1), 0 0 64px -12px rgba(124, 108, 255, 0.9); }
/* The app's top bar: violet glass. */
html[data-theme="dark"] .app-hud.site-header {
  background: radial-gradient(50% 220% at 20% -60%, rgba(108, 92, 231, 0.32), transparent 70%), rgba(12, 9, 34, 0.82);
  border-bottom-color: rgba(162, 155, 254, 0.14);
}
html[data-theme="dark"] .app-hud .hud-tab[aria-current="page"] { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.2), 0 0 30px -8px rgba(124, 108, 255, 0.9); }
/* Icon tiles get a faint violet halo on hover. */
html[data-theme="dark"] :is(a.card, .activity-card, .topic-hub):hover { box-shadow: var(--lift-2), 0 0 0 1px rgba(178, 168, 255, 0.12); }
html[data-theme="dark"] .hero-brain { filter: drop-shadow(0 0 70px rgba(124, 108, 255, 0.45)); }

/* ---------------------------------------------- 14. sign in with Telegram screen */

.tg-steps { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; counter-reset: tg; }
.tg-steps > li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding: 12px 0 14px; border-top: 1px solid var(--line); opacity: 0.55; transition: opacity 0.25s ease; }
.tg-steps > li:first-child { border-top: 0; }
.tg-steps > li.is-on, .tg-steps > li.is-done { opacity: 1; }
.tg-steps strong { display: block; margin: 4px 0 10px; color: var(--ink); font-family: var(--font-head); font-size: 1rem; }
.tg-n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--lav-100); color: var(--accent-text); font-family: var(--font-head); font-weight: 700; font-size: 0.85rem; box-shadow: inset 0 0 0 1px var(--edge); }
.tg-steps > li.is-on .tg-n { background: var(--g-brand); color: #fff; box-shadow: 0 6px 16px -6px rgba(108, 92, 231, 0.9); }
.tg-steps > li.is-done .tg-n { background: #2BB673; color: #fff; font-size: 0; box-shadow: none; }
.tg-steps > li.is-done .tg-n::after { content: ""; width: 12px; height: 7px; border: solid #fff; border-width: 0 0 2.5px 2.5px; transform: translateY(-2px) rotate(-45deg); }
.tg-steps .login-consent { display: flex; gap: 10px; align-items: center; font-size: 0.92rem; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.tg-steps .login-consent input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--purple); }
.tg-steps .login-consent a { color: var(--accent-text); font-weight: 700; }
.tg-steps a.btn-telegram { text-decoration: none; }
.tg-steps > li:not(.is-on):not(.is-done) .btn-telegram { pointer-events: none; }
.tg-check { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 12px 0 0; color: var(--ink-3); font-size: 0.85rem; }
.tg-check b { padding: 4px 12px; border-radius: 10px; background: var(--lav-100); color: var(--ink); font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 1.05rem; letter-spacing: 0.22em; box-shadow: inset 0 0 0 1px var(--edge-strong); }
.tg-check small { flex-basis: 100%; }
.tg-wait { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--ink-2); font-size: 0.9rem; }
.tg-wait[hidden] { display: none; }
.tg-spin { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--lav-200); border-top-color: var(--purple); animation: tg-spin 0.9s linear infinite; }
@keyframes tg-spin { to { transform: rotate(360deg); } }
html.calm .tg-spin { animation-duration: 3s; }
.tg-alt { margin-top: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--bg-soft) 70%, transparent); }
.tg-alt summary { cursor: pointer; color: var(--ink-2); font-weight: 700; font-size: 0.9rem; }
.tg-alt .tg-code { margin-top: 10px; border: 0; padding: 0; background: none; }
.tg-done { display: grid; justify-items: center; gap: 10px; padding: 12px 0; text-align: center; }
.tg-done .start-hero-art { width: 112px; height: 112px; }
.tg-done-mark { display: grid; place-items: center; width: 44px; height: 44px; margin-top: -30px; border-radius: 50%; background: #2BB673; color: #fff; box-shadow: 0 0 0 4px var(--surface), 0 10px 20px -8px rgba(43, 182, 115, 0.8); }
.tg-done-mark .icon { width: 24px; height: 24px; stroke-width: 3; }
.tg-done h1 { margin: 6px 0 0; outline: none; }
.tg-done .lead { margin: 0 0 8px; }
@media (prefers-reduced-motion: reduce) { .tg-spin { animation-duration: 3s; } }

/* ------------------------------------------------- 15. Parents page picture */

/* Two lanterns (a family) and Syno on a hill at dusk. No people on purpose. */
.page-hero:has(.parents-pic) .container { align-items: center; }
.parents-pic { position: relative; margin: 0; justify-self: end; width: min(42vw, 480px); }
.parents-pic img { width: 100%; height: auto; border-radius: 28px; box-shadow: var(--lift-2); outline: 1px solid var(--edge); outline-offset: -1px; }
.parents-pic .bubble { position: absolute; left: 16px; top: 16px; right: auto; max-width: 240px; margin: 0; border-radius: 16px 16px 16px 4px; }
@media (max-width: 859px) { .parents-pic { justify-self: stretch; width: 100%; margin-top: 18px; } }
html.a11y-nodecor .parents-pic img { display: none; }
html.a11y-nodecor .parents-pic .bubble { position: static; }