:root{
      /* Polar Pop palette */
      --polar-deep:#065758;
      --polar-ice:#E2F0EF;
      --polar-mist:#A9D4D6;
      --polar-sea:#82C3C5;
      --polar-coral:#C46960;

      /* Theme (high contrast) */
      --bg:#065758;
      --bg-elev:#0c4a4c;
      --text:#E2F0EF;
      --muted:#A9D4D6;
      --card:#082f30;
      --accent:#C46960;
      --accent-2:#82C3C5;
      --ring: 0 0 0 2px color-mix(in oklab, var(--accent) 45%, transparent);
      --radius: 18px;
      --shadow: 0 10px 30px rgba(0,0,0,.35);
      --container: 1200px;

      /* Sparkles */
      --sparkle:#fff;

      /* Astrozaar */
      --az-bg:#0e0f1d;
      --az-cyan: color-mix(in oklab, var(--accent-2) 70%, white 10%);
    }

    html{scroll-behavior:smooth}
    *{box-sizing:border-box}
    body{
      margin:0; background:var(--bg); color:var(--text);
      font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
    }
    a{ color:var(--accent); text-decoration:none }
    a:hover{ filter:brightness(1.1) saturate(1.05) }

    /* Header */
    header{
      position:sticky;
      top:0;
      z-index:50;
      backdrop-filter:saturate(140%) blur(8px);
      background: color-mix(in oklab, var(--bg) 90%, transparent);
      border-bottom:1px solid color-mix(in oklab, var(--accent) 40%, transparent);
      overflow:visible;
    }
.holiday-on header::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-26px;
  height:24px;
  background-image:url('../images/xmas_lights.png');
  background-repeat:repeat-x;
  background-position:top center;
  background-size:auto 24px;
  pointer-events:none;
  z-index:40;
}
.nav{ max-width:var(--container); margin:auto; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 20px; position:relative }
.nav-right{ display:flex; align-items:center; gap:12px }
    .brand{ display:flex; align-items:center; gap:12px; font-weight:900; letter-spacing:.5px }
    .brand .logo-img{
      width:36px;
      height:36px;
      border-radius:10px;
      box-shadow:none;          /* remove glow / square shadow behind logo */
      background:transparent;   /* no background tile */
      object-fit:contain;
      padding:0;
    }
    .brand span{ color: var(--accent); }
    .nav a{ color:var(--text); opacity:.95 }
    .nav a.btn{ padding:10px 14px; border-radius:12px; background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; font-weight:700 }
    .nav a.top-btn{ background: var(--accent); color:#fff; border:1px solid color-mix(in oklab, var(--accent) 60%, transparent); }

/* Switch (holiday/theme toggle) */
.switch{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid color-mix(in oklab, var(--text) 10%, transparent);
  background:var(--bg-elev);
  color:var(--text);
  cursor:pointer;
  position:relative;
  margin-left:auto;   /* push to the right in flex row */
  margin-right:0;
}
.switch .switch-label{ font-weight:700; font-size:.95rem }
.switch .track{ position:relative; width:38px; height:22px; border-radius:999px; background: color-mix(in oklab, var(--text) 12%, transparent); display:inline-block }
.switch .thumb{ position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:var(--accent); transition:left .15s ease, background .15s ease }
.switch[aria-checked="true"] .track{ background: var(--accent-2); }
.switch[aria-checked="true"] .thumb{ left:18px; background:var(--accent) }

/* Hover helper text */
.switch::after{
  content: attr(aria-label);
  position:absolute; left:50%; top:calc(100% + 8px);
  transform: translateX(-50%);
  background: var(--bg-elev);
  border: 1px solid color-mix(in oklab, var(--text) 10%, transparent);
  color: var(--text); font-size:.85rem; padding:6px 10px; border-radius:10px; white-space:nowrap; box-shadow: var(--shadow);
  opacity:0; pointer-events:none; transition: opacity .12s ease;
  z-index:60;
}
.switch:hover::after{ opacity:.98 }

/* Light snowfall overlay for holiday mode */
#snowLayer{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:40;
  overflow:hidden;
}
#snowLayer .flake{
  position:absolute;
  top:-10%;
  color:#ffffff;
  text-shadow:0 0 6px rgba(255,255,255,0.7);
  opacity:0.9;
  animation-name:snow-fall;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}
@keyframes snow-fall{
  0%{
    transform:translate3d(0, -10%, 0) rotate(0deg);
    opacity:0;
  }
  10%{
    opacity:0.8;
  }
  100%{
    transform:translate3d(10px, 110vh, 0) rotate(360deg);
    opacity:0;
  }
}

/* Holiday mode tweaks */
.holiday-subline{
  display:none;
  margin:0 0 18px;
  color:var(--muted);
  font-style:italic;
  font-size:0.95rem;
}
.holiday-footer-note{
  display:none;
  margin-top:4px;
  font-size:0.9rem;
  color:var(--muted);
}
.holiday-on .holiday-subline,
.holiday-on .holiday-footer-note{
  display:block;
}
.holiday-on{
  /* Push accent to a classic Christmas red while keeping the greens intact */
  --accent:#e01139;      /* deep, non‑orange red */
  --polar-coral:#ff6b81; /* lighter companion red for soft glows */
}

    /* Hero */
    .hero-wrap{ background: radial-gradient(900px 600px at 12% -10%, color-mix(in oklab, var(--polar-coral) 22%, transparent), transparent 70%),
                               radial-gradient(900px 600px at 100% 0%, color-mix(in oklab, var(--polar-sea) 22%, transparent), transparent 70%),
                               color-mix(in oklab, var(--polar-ice) 14%, var(--bg)); }
    .holiday-on .hero-wrap{
      background: radial-gradient(900px 600px at 12% -10%, color-mix(in oklab, #e01139 36%, transparent), transparent 70%),
                               radial-gradient(900px 600px at 100% 0%, color-mix(in oklab, var(--polar-sea) 22%, transparent), transparent 70%),
                               color-mix(in oklab, var(--polar-ice) 14%, var(--bg));
    }
    .hero{ max-width:var(--container); margin:auto; padding:56px 20px 28px; display:grid; grid-template-columns: 1.1fr .9fr; gap:32px; align-items:center }
    /* Guides hero: desktop = side-by-side (text left, image right like homepage), mobile = stacked (image top) */
    .guides-hero{ display:grid; grid-template-columns: 1.1fr .9fr; gap:32px; align-items:center }
    .guides-hero .hero-text{ grid-column: 1; text-align:left }
    .guides-hero .hero-art{ grid-column: 2; }
    @media (max-width: 800px){
      .guides-hero{ display:flex; flex-direction:column; gap:32px; align-items:center; text-align:center }
      .guides-hero .hero-art{ order:-1; display:flex; justify-content:center; width:100%; grid-column: auto; }
      .guides-hero .hero-text{ width:100%; max-width:800px; text-align:center; grid-column: auto; }
      .guides-hero .illustration{ max-width:min(540px, 90vw) }
    }
    .hero h1{ font-size:clamp(32px,4.2vw,54px); line-height:1.05; margin:0 0 10px }
    .hero p{ color:var(--muted); margin:0 0 18px }
    .cta{ display:flex; gap:12px; flex-wrap:wrap }
    .btn{ display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:14px; border:1px solid color-mix(in oklab, var(--text) 10%, transparent); background:var(--bg-elev); color:var(--text); box-shadow:var(--shadow); transition: transform .12s ease; position:relative; overflow:visible; font-weight:600 }
    .btn.btn-zemew{ background:#1a365d; border-color: rgba(255,255,255,.15); color:#fff }
    .btn.btn-zemew:hover{ background:#234876; color:#fff }
    .btn .btn-icon{ width:22px; height:22px; display:inline-block; vertical-align:middle }
    .btn:hover{ transform:translateY(-2px) }
    .hero-art{ position:relative; }
    .illustration{ width:100%; border-radius: var(--radius); box-shadow: var(--shadow); border:1px solid color-mix(in oklab, var(--text) 10%, transparent) }

.hero-snow{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.hero-snow img{
  position:absolute;
  bottom:0;
  display:block;
  max-width:40%;
  height:auto;
}
.hero-snow img.hero-snow-left{
  left:-11px;
}
.hero-snow img.hero-snow-right{
  right:-11px;
}
.hero-snow img.hero-snow-mid{
  left:50%;
  transform:translateX(-50%);
  bottom:-10px;
  max-width:60%;
}

@media (max-width: 800px){
  .hero-snow img.hero-snow-left{
    left:-9px;
    bottom:-4px;
  }
  .hero-snow img.hero-snow-right{
    right:-9px;
    bottom:-4px;
  }
}

    /* Sections */
    section{ padding: 42px 0 }
    section .wrap{ max-width:var(--container); margin:auto; padding:0 20px }

    /* Alternating section background (only alt-b used on this page) */
    section.alt-b{ background: radial-gradient(circle at bottom right, color-mix(in oklab, var(--polar-sea) 25%, transparent), transparent 70%), color-mix(in oklab, var(--polar-mist) 20%, var(--bg)) }
    section#ai-disclaimer.alt-b{ 
      background: var(--bg) !important;
      border-top:none !important; 
      border-bottom:none; 
      outline:none; 
      box-shadow:none; 
      padding-top:60px !important;
      padding-bottom:60px !important;
      margin-top:0;
    }
    section#ai-disclaimer::before,
    section#ai-disclaimer::after{
      display:none !important;
      content:none !important;
    }
    section#ai-disclaimer .wrap{ border-top:none !important; outline:none; }
    section#projects{ border-bottom:none; }

    /* Cards */
    .grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:18px }
    .grid.grid-2{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:24px }
    @media (max-width:1000px){ .hero{ grid-template-columns:1fr } .grid{ grid-template-columns:1fr 1fr } .grid.grid-2{ grid-template-columns:1fr } }
/* Home hero: image first on mobile and tablet (use grid row swap) */
@media (max-width: 1000px){
  /* Use flex on Edge/Safari for reliable reordering */
  .home-hero{ display:flex; flex-direction:column }
  .home-hero .hero-art{ order:-1; display:flex; justify-content:center }
  .home-hero .illustration{ max-width:min(540px, 90vw) }
}
    @media (max-width:640px){ .grid{ grid-template-columns:1fr } }
    .card{
      background:linear-gradient(180deg, color-mix(in oklab, var(--card) 86%, transparent), color-mix(in oklab, var(--bg) 40%, transparent));
      border:1px solid color-mix(in oklab, var(--text) 8%, transparent);
      border-radius: var(--radius);
      padding:16px;
      position:relative;
      overflow:hidden;
      display:flex;
      flex-direction:column;
      height:100%;
    }
    /* About card layout: text left, image right (stacks on mobile) */
    .about-card{
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap:14px;
      align-items:center;
    }
    .about-card .thumb{
      width:100%;
      height:auto;
      max-height:260px;
      object-fit:cover;
    }
    @media (max-width:900px){
      .about-card{ grid-template-columns:1fr; }
    }

    .card:hover{ box-shadow:var(--shadow) }
    .card .top{ display:flex; align-items:center; gap:12px; margin-bottom:8px }
    .badge{ font-size:12px; background:var(--accent-2); color:#fff; padding:4px 8px; border-radius:999px; border:none }
    .card p{ color:var(--muted); margin:8px 0 12px }
    .actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:auto }
    .thumb{ width:100%; height:160px; object-fit:cover; border-radius:12px; border:1px solid color-mix(in oklab, var(--text) 10%, transparent); margin-bottom:10px; background:var(--bg-elev) }

    /* Education illustration anchored to bottom of Bellevue column */
    .about-sections .edu-two > div:last-child{
      display:flex;
      flex-direction:column;
    }
    .about-sections .edu-two > div:last-child > ul{
      margin-bottom:0;
    }
    .edu-image{
      padding-top:16px;
      margin:auto 0;
      text-align:center;
    }
    .edu-image img{
      max-width:320px;
      width:100%;
      display:block;
      margin:0 auto;
      border-radius:16px;
      box-shadow:var(--shadow);
      border:1px solid color-mix(in oklab, var(--text) 10%, transparent);
      object-fit:cover;
    }

    /* TinkersCraft: fit by height, no crop, themed BG */
    .thumb.tc-fit{
      object-fit: contain !important;
      object-position: center;
      background: var(--az-bg);
    }

    /* --- Astrozaar custom thumbnail (starfield + meteors + black hole + glowing PNG) --- */
    .astro-card{ overflow:visible }
    .astro-thumb{
      width:100%; height:160px; margin-bottom:10px;
      background: var(--az-bg);
      border-radius:12px; border:1px solid color-mix(in oklab, var(--text) 10%, transparent);
      position:relative; overflow:hidden;
    }
    .astro-thumb::after{
      content:""; position:absolute; inset:0;
      background: radial-gradient(60% 80% at 50% 45%, transparent 0 60%, rgba(0,0,0,.35) 100%);
      pointer-events:none;
    }
    .astro-thumb canvas.stars{
      position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; z-index:0;
    }
    .astro-thumb .blackhole-layer{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:visible; }
    .astro-thumb .meteor-layer   { position:absolute; inset:0; z-index:2; pointer-events:none; overflow:visible; }
    .astro-thumb .blackhole{
      position:absolute; left:0; top:0; width:45px; height:45px; pointer-events:none;
      will-change: transform, opacity; z-index:1;
    }
    .astro-thumb .meteor{
      position:absolute; left:0; top:0; width:auto; height:auto;
      will-change: transform, opacity; image-rendering:auto; opacity:1; filter:none;
    }
    .astro-logo{
      position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
      max-width:70%; max-height:70%; width:auto; height:auto; image-rendering:auto;
      filter:
        drop-shadow(0 0 1.2px #fff)
        drop-shadow(0 0 5px var(--az-cyan))
        drop-shadow(0 0 12px color-mix(in oklab, var(--az-cyan) 80%, transparent));
      animation: azGlow 3.6s ease-in-out infinite alternate; z-index:3;
    }
    @keyframes azGlow{
      0%  { filter: drop-shadow(0 0 1.2px #fff) drop-shadow(0 0 4px var(--az-cyan))  drop-shadow(0 0 10px color-mix(in oklab, var(--az-cyan) 70%, transparent)); }
      100%{ filter: drop-shadow(0 0 1.2px #fff) drop-shadow(0 0 8px var(--az-cyan))  drop-shadow(0 0 18px color-mix(in oklab, var(--az-cyan) 80%, transparent)); }
    }

    /* --- Astrozaar neon sign (top-left) --- */
    .astro-card .neon-wrap{
      position:absolute; top:-10px; left:-56px; width: clamp(190px, 44%, 340px);
      aspect-ratio: 2.4 / 1; transform: rotate(-20deg); transform-origin: 18% 40%;
      pointer-events:none; z-index:5; mix-blend-mode: screen; isolation:isolate;
    }
    .astro-card .neon-sign{ width:100%; height:100%; display:block }
    .astro-card .neon-back{
      fill:none; stroke: color-mix(in oklab, var(--text) 18%, transparent);
      stroke-width:10; stroke-linecap:round; opacity:.35; filter: blur(.6px);
    }
    .astro-card .neon-tube{
      font: 900 26px/1.1 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,sans-serif;
      letter-spacing:.18em; text-transform:uppercase;
      --tube-alpha: .62; --stroke-alpha: .65;
      --glow-a: color-mix(in oklab, var(--accent) 45%, transparent);
      --glow-b: color-mix(in oklab, var(--accent) 25%, transparent);
      fill: url(#neon-fill); fill-opacity: var(--tube-alpha);
      stroke:#fff; stroke-opacity: var(--stroke-alpha);
      stroke-width:1.4; stroke-linejoin:round; paint-order: stroke fill;
      filter:
        drop-shadow(0 0 1.4px #fff)
        drop-shadow(0 0 4px var(--glow-a))
        drop-shadow(0 0 9px var(--glow-b));
      animation: neon-broken 4.8s infinite steps(1);
    }
    .astro-card .neon-wrap.neon-flash .neon-tube{
      --tube-alpha: .55;
      fill: url(#neon-fill-cyan);
      filter:
        drop-shadow(0 0 1px #fff)
        drop-shadow(0 0 3px color-mix(in oklab, var(--accent-2) 45%, transparent))
        drop-shadow(0 0 7px color-mix(in oklab, var(--accent-2) 30%, transparent))
        saturate(.8) brightness(.9);
    }
    @keyframes neon-broken{
      0%,6%,7%,9%,37%,38%,39%,60%,100% { opacity:1; }
      6.5%, 38.5%, 59% { opacity:.28; }
      10%, 11% { opacity:.7; }
    }
    @media (prefers-reduced-motion: reduce){
      .astro-card .neon-tube{ animation:none }
      .astro-logo{ animation:none }
    }

    /* Footer */
    footer{ border-top:1px solid color-mix(in oklab, var(--accent) 40%, transparent); background: radial-gradient(circle at 50% -30%, color-mix(in oklab, var(--polar-ice) 15%, transparent), transparent 80%), color-mix(in oklab, var(--polar-ice) 10%, var(--bg)) }
    .foot{ max-width:var(--container); margin:auto; padding:28px 20px; color:var(--muted); display:flex; flex-direction:column; gap:4px; align-items:center; text-align:center }
    footer a[href="#top"]{ color: var(--accent); }

    /* Utilities */
    .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
    .icon{ width:22px; height:22px; display:inline-block }
    .icon svg{ width:100%; height:100% }
    #toTop{
      position:fixed;
      right:18px;
      bottom:18px;
      opacity:0;
      transform:translateY(10px);
      transition: all .15s ease;
      background: var(--accent);
      color:#fff;
      cursor:pointer;
      z-index:1000;
      pointer-events:none;
      border-radius:50%;
      width:46px;
      height:46px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:20px;
    }
    #toTop.show{ opacity:1; transform:none; pointer-events:auto }

    /* Holiday: swap FAB to Christmas tree icon */
    .holiday-on #toTop{
      background:transparent;
      border:none;
      box-shadow:none;
      color:transparent;
      padding:0;
      width:92px;
      height:92px;
      right:12px;
      bottom:12px;
    }
    .holiday-on #toTop::before{
      content:"";
      position:absolute;
      inset:0;
      background:url('../images/xmas_tree.png') no-repeat center;
      background-size:contain;
      filter:drop-shadow(0 4px 10px rgba(0,0,0,.6));
    }

    /* Sparkle host for non-.btn links */
    .sparkle-host{ position:relative }

    /* Sparkles (default white) */
    .sparkle{
      position:absolute; left:0; top:0;
      width:6px; height:6px; pointer-events:none; border-radius:50%;
      background:
        radial-gradient(circle,
          #fff 0 28%,
          color-mix(in oklab, var(--sparkle) 92%, #fff) 29% 60%,
          transparent 61%);
      filter: drop-shadow(0 0 6px color-mix(in oklab, var(--sparkle) 85%, transparent));
      transform: translate(-50%, -50%) scale(.9) rotate(0deg);
      opacity:.95;
      animation: tt-sparkle .8s ease-out forwards;
      z-index:7;
    }
    /* iOS/Safari fallbacks for better visibility/compositing */
    @supports not (color: color-mix(in oklab, white, black)){
      .sparkle{
        background: radial-gradient(circle, #fff 0 28%, rgba(255,255,255,.9) 29% 60%, transparent 61%);
        filter: drop-shadow(0 0 6px rgba(255,255,255,.6));
      }
    }
    .adhd-play{ -webkit-transform: translateZ(0); will-change: transform; isolation:isolate }
    @keyframes tt-sparkle{
      to{
        transform:
          translate(calc(-50% + var(--dx)), calc(-50% + var(--dy)))
          scale(.1)
          rotate(90deg);
        opacity:0;
      }
    }
    @media (prefers-reduced-motion: reduce){
      .sparkle{ animation:none; opacity:0 }
      .btn:hover{ box-shadow: 0 0 0 3px color-mix(in oklab, var(--sparkle) 25%, transparent) inset; }
    }
    /* Keep Sparkle Pad visible even with Reduce Motion (no animation, but not hidden) */
    @media (prefers-reduced-motion: reduce){
      .adhd-play .sparkle{ opacity:.95 }
    }

    

/* Lore / About sections */
.about-sections{ display:flex; flex-direction:column; gap:28px; }
.about-sections section{ padding:42px 0; }
.about-sections .wrap{ max-width:var(--container); margin:auto; padding:0 20px; }
.about-sections .card{ background:linear-gradient(180deg, color-mix(in oklab, var(--card) 86%, transparent), color-mix(in oklab, var(--bg) 40%, transparent)); border:1px solid color-mix(in oklab, var(--text) 8%, transparent); border-radius: var(--radius); box-shadow:var(--shadow); padding:18px; }
.about-sections .about-card{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr); gap:18px; align-items:center; }
.about-sections .about-card p{ margin-bottom:14px; color:var(--muted); }
.about-sections .story-carousel{ margin-top:18px; }
.about-sections .carousel{ position:relative; border:1px solid color-mix(in oklab, var(--text) 12%, transparent); border-radius:14px; overflow:hidden; background:var(--bg-elev); height:360px; }
.about-sections .carousel-track{ display:flex; will-change:transform; transition:transform .45s ease; height:100%; }
.about-sections .story-slide{ min-width:100%; margin:0; height:100%; display:flex; align-items:center; justify-content:center; background:var(--bg-elev); }
.about-sections .story-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-sections .carousel .nav{ position:absolute; top:50%; transform:translateY(-50%); background: color-mix(in oklab, var(--bg-elev) 92%, transparent); color:#fff; border:1px solid color-mix(in oklab, var(--text) 22%, transparent); border-radius:12px; padding:10px 14px; display:inline-flex; align-items:center; gap:8px; box-shadow:var(--shadow); z-index:3; font-size:16px; line-height:1; cursor:pointer; transition: filter .18s ease, transform .18s ease; }
.about-sections .carousel .nav:hover{ filter:brightness(1.06) saturate(1.05); transform:translateY(-50%) scale(1.02); }
.about-sections .carousel .nav .chev{ font-size:22px; line-height:1; }
.about-sections .carousel .prev{ left:14px; }
.about-sections .carousel .next{ right:14px; }
.about-sections .carousel .dots{ position:absolute; left:50%; bottom:14px; transform:translateX(-50%); display:flex; gap:6px; }
.about-sections .carousel .dot{ width:9px; height:9px; border-radius:50%; background: color-mix(in oklab, var(--text) 28%, transparent); border:1px solid color-mix(in oklab, var(--text) 38%, transparent); opacity:.9; cursor:pointer; transition: transform .18s ease, opacity .18s ease; }
.about-sections .carousel .dot.active{ background: var(--accent); border-color: transparent; opacity:1; transform:scale(1.2); }

@media (max-width: 900px){ .about-sections .about-card{ grid-template-columns:1fr; } }
@media (max-width: 640px){
  .about-sections .carousel{ height:240px; }
  .about-sections .carousel .nav{ padding:8px 12px; }
}

.about-sections .collapsible{ margin-top:18px; }
.about-sections .collapsible summary{display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;font-weight:700;font-size:1.1em;color:var(--text);padding:4px 0 6px;text-align:center}
.about-sections .collapsible .content{padding-top:10px;color:var(--muted)}
.about-sections .collapsible summary::-webkit-details-marker{display:none}
.about-sections .collapsible summary::after{content:'▸'; font-size:14px; line-height:1; margin-left:8px; transform:rotate(0deg); transition:transform .2s ease}
.about-sections .collapsible[open] summary::after{transform:rotate(90deg)}

    .about-sections .edu-two{ display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:stretch; }
@media (max-width:900px){ .about-sections .edu-two{ grid-template-columns:1fr; } }
.about-sections .edu-two > div > h3{ margin:18px 0 8px; }
.about-sections .edu-two > div > h3:first-child{ margin-top:0; }
.about-sections .edu-two > div > ul{ column-count:2; column-gap:26px; list-style:none; padding-left:0; margin:6px 0 18px; }
.about-sections .edu-two > div > ul li{ margin-bottom:4px; color:var(--muted); }
@media (max-width:600px){ .about-sections .edu-two > div > ul{ column-count:1; } }

.about-sections .vol-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
@media (max-width:900px){ .about-sections .vol-grid{ grid-template-columns:1fr; } }
.about-sections .vol-card{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; }
.about-sections .vol-card .vol-logo{
  max-width:100%;
  height:auto;
  max-height:92px;
  object-fit:contain;
  margin:4px auto 10px;
}
@media (min-width:900px){
  .about-sections .vol-card .vol-logo{
    max-height:130px;
  }
}

.about-sections .feature-stack{ display:flex; flex-direction:column; gap:18px; }
.about-sections .feature-card{
  display:block;
  position:relative;
  height: clamp(260px, 45vw, 460px);
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid color-mix(in oklab, var(--text) 12%, transparent);
  box-shadow: var(--shadow);
  background-color: var(--bg-elev);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.about-sections .feature-card::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,.82));
  pointer-events:none;
  transition: opacity .2s ease;
  opacity:1;
}
.about-sections .feature-card:hover::after{ opacity:.88; }
.about-sections .feature-card:nth-of-type(2){ background-position:center bottom; }
.about-sections .feature-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  text-align:center;
  padding:32px;
  z-index:1;
  color:#fff;
}
.about-sections .feature-logo{ height:84px; width:auto; object-fit:contain; display:block; filter:drop-shadow(0 0 8px rgba(0,0,0,.45)); }
.about-sections .feature-card:nth-of-type(2) .feature-logo{ height:135px; }
.about-sections .feature-text{ max-width:900px; margin:0 auto; font-weight:700; }
.about-sections .feature-text .sub{ font-weight:700; margin-top:6px; }
.about-sections .card a.btn{ margin-top:8px; }

.ai-disclaimer{
  margin:0 auto 0;
  padding:18px 20px;
  border-radius:16px;
  border:1px solid color-mix(in oklab, var(--text) 14%, transparent);
  border-top:none;
  background: color-mix(in oklab, var(--bg-elev) 85%, var(--polar-mist) 15%);
  display:flex;
  align-items:center;
  gap:22px;
}
.ai-disclaimer-text{
  flex:2;
}
.ai-disclaimer-text h3{
  margin:0 0 6px;
  font-size:1.2rem;
}
.ai-disclaimer-text p{
  margin:0;
  color:var(--muted);
}
.ai-disclaimer-art{
  flex:1;
  display:flex;
  justify-content:center;
}
.ai-disclaimer-art img{
  max-width:220px;
  width:100%;
  border-radius:14px;
  box-shadow:var(--shadow);
  border:1px solid color-mix(in oklab, var(--text) 10%, transparent);
  object-fit:cover;
}
@media (max-width:900px){
  .ai-disclaimer{
    flex-direction:column-reverse;
    text-align:center;
  }
  .ai-disclaimer-art{
    justify-content:center;
  }
}

/* Removed Sparkle Pad styles */

/* ===== LAN Party — soft-start fade, slightly dimmer RGB, slightly brighter blue bottom ===== */

/* Keep header above the dimmer; don't change its look */
body.lan-party header{ z-index:10000; }

/* No bar sitting on the nav itself */
body.lan-party header::after{ content:none !important; }

/* RGB SPILL under the nav — keep fade & reach, but ease brightness down a touch */
body.lan-party header::before{
  content:"";
  position:absolute;
  top:100%;
  left:-6%; right:-6%;
  height:120px;
  background: var(--lan-rgb, linear-gradient(90deg,#ff0080,#00e5ff,#a6ff00,#ff0080));
  filter: blur(28px) saturate(1.45) brightness(0.7); /* ↓ brightness from 1.18 */
  opacity:.95;
  pointer-events:none;
  mix-blend-mode: screen;

  /* Smooth feather from top (kills bar) to 0 at end */
  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0,0,0,0.96) 0%,
    rgba(0,0,0,0.90) 6%,
    rgba(0,0,0,0.72) 22%,
    rgba(0,0,0,0.45) 48%,
    rgba(0,0,0,0.18) 76%,
    rgba(0,0,0,0.00) 100%
  );
          mask-image: linear-gradient(to bottom,
    rgba(0,0,0,0.96) 0%,
    rgba(0,0,0,0.90) 6%,
    rgba(0,0,0,0.72) 22%,
    rgba(0,0,0,0.45) 48%,
    rgba(0,0,0,0.18) 76%,
    rgba(0,0,0,0.00) 100%
  );
}

/* Dimmer under everything EXCEPT the header — blue bottom glow slightly stronger */
.lan-overlay{
  position:fixed; inset:0; z-index:9998; pointer-events:none;
  background:
    radial-gradient(80vw 55vh at -10% -10%, rgba(255,0,120,.35), transparent 60%),
    radial-gradient(80vw 55vh at 110% -10%, rgba(0,200,255,.35), transparent 60%),
    radial-gradient(90vw 60vh at 50% 110%, rgba(0,150,255,.38), transparent 60%), /* ↑ blue from .30 to .38 */
    linear-gradient(rgba(0,0,0,.60), rgba(0,0,0,.60));
}

/* Keep the rest of the page normal (no global filter) */
body.lan-party{ filter:none; }

/* Small screens: same tweaks, proportionally shorter */
@media (max-width: 640px){
  body.lan-party header::before{
    height:88px;
    filter: blur(22px) saturate(1.45) brightness(1.10);
    -webkit-mask-image: linear-gradient(to bottom,
      rgba(0,0,0,0.95) 0%,
      rgba(0,0,0,0.70) 24%,
      rgba(0,0,0,0.00) 56%);
            mask-image: linear-gradient(to bottom,
      rgba(0,0,0,0.95) 0%,
      rgba(0,0,0,0.70) 24%,
      rgba(0,0,0,0.00) 56%);
  }