:root {
      /* live scene vars: driven by scroll in JS */
      --sky-top: #2A1644;
      --sky-bot: #FF8E6B;
      --ink: #F5F1FD;
      --ink-mute: rgba(245, 241, 253, .72);
      --ink-dim: rgba(245, 241, 253, .5);
      --panel: rgba(12, 6, 32, .55);
      --panel-text: rgba(12, 6, 32, .7);
      --edge: rgba(245, 241, 253, .18);
      /* brand + line colors */
      --mag: #E06BF5;
      --halo: rgba(245, 241, 253, .5);
      --violet: #A78BFA;
      --lineH: #FF6B81;
      --lineT: #46D4E8;
      --lineE: #FFC24D;
      --lineB: #A78BFA;
      --text-mag: var(--mag);
      --text-violet: var(--violet);
      --text-lineH: var(--lineH);
      --text-lineT: var(--lineT);
      --text-lineE: var(--lineE);
      --text-lineB: var(--lineB);
      --max: 1080px;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth
    }

    body {
      background: var(--sky-top);
      color: var(--ink);
      font-family: 'Outfit', system-ui, sans-serif;
      font-size: 17px;
      line-height: 1.65;
      font-weight: 300;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    h1,
    h2,
    h3 {
      font-family: 'Unbounded', sans-serif;
      line-height: 1.06;
      font-weight: 900;
      letter-spacing: -.01em
    }

    .mono {
      font-family: 'JetBrains Mono', monospace
    }

    a {
      color: inherit
    }

    strong {
      font-weight: 600;
      color: var(--ink)
    }

    .wrap {
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 24px
    }

    ::selection {
      background: var(--mag);
      color: #1A0A30
    }

    a:focus-visible,
    button:focus-visible,
    summary:focus-visible {
      outline: 2px solid var(--mag);
      outline-offset: 3px;
      border-radius: 4px
    }

    .skip {
      position: absolute;
      left: -9999px;
      top: 0;
      z-index: 100;
      background: var(--mag);
      color: #1A0A30;
      padding: 10px 18px;
      font-family: 'JetBrains Mono';
      font-size: 13px;
      text-decoration: none
    }

    .skip:focus {
      left: 12px;
      top: 12px
    }

    main,
    header,
    footer {
      position: relative;
      z-index: 10
    }

    section {
      position: relative;
      z-index: 10
    }

    /* ================= THE SCENE ================= */
    #sky {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bot) 100%);
    }

    #sun,
    #moon {
      position: fixed;
      z-index: 1;
      border-radius: 50%;
      pointer-events: none;
      will-change: transform, opacity
    }

    #sun {
      width: 92px;
      height: 92px;
      left: 0;
      top: 0;
      background: radial-gradient(circle at 38% 35%, #FFF6D8, #FFCE5C 55%, #FF9D3D);
      box-shadow: 0 0 70px 28px rgba(255, 200, 90, .45);
    }

    #moon {
      width: 64px;
      height: 64px;
      left: 0;
      top: 0;
      opacity: 0;
      background: radial-gradient(circle at 60% 35%, #FFFFFF, #D9D4F0 60%, #B7AEDD);
      box-shadow: 0 0 44px 14px rgba(220, 210, 255, .35);
    }

    #moon::after {
      /* craters */
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background:
        radial-gradient(circle at 30% 60%, rgba(150, 140, 190, .5) 0 7px, transparent 8px),
        radial-gradient(circle at 62% 30%, rgba(150, 140, 190, .45) 0 5px, transparent 6px),
        radial-gradient(circle at 70% 68%, rgba(150, 140, 190, .4) 0 4px, transparent 5px);
    }

    #stars {
      position: fixed;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      opacity: 0;
      transition: opacity .3s
    }

    #stars i {
      position: absolute;
      width: 2px;
      height: 2px;
      border-radius: 50%;
      background: #fff
    }

    @media (prefers-reduced-motion:no-preference) {
      #stars i {
        animation: tw 3.5s ease-in-out infinite
      }

      @keyframes tw {

        0%,
        100% {
          opacity: .9
        }

        50% {
          opacity: .25
        }
      }
    }

    .cloud {
      position: fixed;
      opacity: calc(.5 - .42 * var(--dark, 0));
      z-index: 2;
      pointer-events: none;
      border-radius: 999px;
      background: rgba(255, 255, 255, .85);
      filter: blur(22px);
      will-change: transform;
    }

    .cloud.c1 {
      width: 280px;
      height: 64px;
      top: 16%;
      left: -300px
    }

    .cloud.c2 {
      width: 200px;
      height: 48px;
      top: 30%;
      left: -220px
    }

    .cloud.c3 {
      width: 340px;
      height: 72px;
      top: 9%;
      left: -360px
    }

    @media (prefers-reduced-motion:no-preference) {
      .cloud.c1 {
        animation: drift 90s linear infinite
      }

      .cloud.c2 {
        animation: drift 70s linear infinite 18s
      }

      .cloud.c3 {
        animation: drift 120s linear infinite 40s
      }

      @keyframes drift {
        to {
          transform: translateX(calc(100vw + 420px))
        }
      }
    }

    /* ================= SKYLINE SCENE =================
       One hand-drawn SVG city in three depth layers (far / mid / front).
       Windows are generated into .wins grids by JS; --night lights them,
       --mx (mouse) parallaxes the layers, .fl floors stack up with scroll. */
    #city {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      height: min(31.25vw, 54vh);
      min-height: 240px;
      z-index: 3;
      pointer-events: none;
    }

    #city svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    /* PERF: one cheap warm halo over the skyline at night, instead of a blurred
   box-shadow on every one of the ~hundreds of lit windows (that pile of
   shadows is what lagged the bottom of the scroll). Opacity tracks --night. */
    #city::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 150%;
      background: radial-gradient(120% 90% at 50% 100%, rgba(255, 198, 118, .18), rgba(255, 198, 118, .05) 45%, transparent 70%);
      opacity: var(--night, 0);
      pointer-events: none;
      z-index: -1;
    }

    #scene .blk { fill: #0E0820 }
    #scene .ln { stroke: #0E0820; fill: none; stroke-linecap: square }
    #lfar { opacity: .38 }
    #lfar circle, #lmid circle[fill="currentColor"] { color: #0E0820 }

    /* faint rim light on the main silhouettes once it gets dark */
    #lmid .blk, #lfront .blk {
      stroke: #A78BFA;
      stroke-opacity: calc(.16 * var(--night, 0));
      stroke-width: 1;
    }

    #scene .w {
      fill: rgba(167, 139, 250, .15);
      transition: fill .5s ease;
      pointer-events: auto;
      cursor: pointer;
    }

    #scene .w.lit { fill: #FFD479 }
    #scene .w.warm.lit { fill: #FFC46B }
    #scene .cabw { fill: #FFD479; fill-opacity: calc(.1 + .8 * var(--night, 0)) }
    #scene .bkn { fill: #FF5560 }
    #scene .bpanel { fill: #FFD479; fill-opacity: calc(.86 * var(--night, 0)) }
    #scene .bpanel2 { fill: #F5F1FD; fill-opacity: calc(.2 - .2 * var(--night, 0)) }
    #scene .lglow { fill: #FFD479; opacity: calc(.2 * var(--night, 0)) }
    #scene .lhead { fill: #FFD479; opacity: calc(.15 + .85 * var(--night, 0)) }
    #scene .hglow { fill: url(#headg); opacity: calc(.65 * var(--night, 0)) }

    /* floors of the tower under construction: stacked by scroll progress */
    #scene .fl {
      opacity: 0;
      transform: translateY(12px);
      transform-box: fill-box;
      transition: opacity .45s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1);
    }

    #scene .fl.on {
      opacity: 1;
      transform: none;
    }

    /* mouse parallax between depth layers (desktop only; --mx set by JS) */
    #lfar, #lmid, #lfront { will-change: transform }
    #lfar { transform: translateX(calc(var(--mx, 0) * -6px)) }
    #lmid { transform: translateX(calc(var(--mx, 0) * -14px)) }
    #lfront { transform: translateX(calc(var(--mx, 0) * -26px)) }

    @media (prefers-reduced-motion:no-preference) {

      /* entrance: buildings bounce up from the ground, steelwork drops in */
      .js #scene .rise {
        transform-box: fill-box;
        transform-origin: 50% 100%;
        animation: cityrise .65s cubic-bezier(.34, 1.56, .64, 1) both;
        animation-delay: var(--d, 0s);
      }

      .js #scene .steel {
        animation: citysteel .5s cubic-bezier(.2, .7, .3, 1) both;
        animation-delay: var(--d, 0s);
      }

      @keyframes cityrise {
        from { transform: scaleY(0) }
      }

      @keyframes citysteel {
        from { opacity: 0; transform: translateY(26px) }
      }

      #scene .bkn { animation: beacon 2.4s ease-in-out infinite }

      @keyframes beacon {
        0%, 100% { opacity: 1 }
        50% { opacity: .15 }
      }

      /* the cranes never stop working */
      #slewA {
        transform-box: view-box;
        transform-origin: 520px 216px;
        animation: swingA 17s ease-in-out -6s infinite alternate;
      }

      #slewB {
        transform-box: view-box;
        transform-origin: 1276px 300px;
        animation: swingB 21s ease-in-out -3s infinite alternate;
      }

      @keyframes swingA {
        from { transform: rotate(-2.4deg) }
        to { transform: rotate(3.2deg) }
      }

      @keyframes swingB {
        from { transform: rotate(2.6deg) }
        to { transform: rotate(-2.2deg) }
      }

      #trolA { animation: trolleyA 27s ease-in-out -8s infinite alternate }
      #trolB { animation: trolleyB 33s ease-in-out infinite alternate }

      @keyframes trolleyA {
        from { transform: translateX(-150px) }
        to { transform: translateX(84px) }
      }

      @keyframes trolleyB {
        from { transform: translateX(64px) }
        to { transform: translateX(-36px) }
      }

      #hookA { animation: hookbob 3.4s ease-in-out infinite alternate }
      #hookB { animation: hookbob 2.9s ease-in-out -1.2s infinite alternate }

      @keyframes hookbob {
        from { transform: translateY(0) }
        to { transform: translateY(14px) }
      }

      #car { animation: cardrive 44s linear infinite }

      @keyframes cardrive {
        from { transform: translateX(-120px) }
        to { transform: translateX(2040px) }
      }
    }

    @media (prefers-reduced-motion:reduce) {
      #scene .fl {
        opacity: 1;
        transform: none;
      }
    }

    /* film grain over the sky gradient: kills banding, keeps it from
   looking computer-clean. Sits under modals, over everything else. */
    #grain {
      position: fixed;
      inset: 0;
      z-index: 90;
      pointer-events: none;
      opacity: .05;
      mix-blend-mode: overlay;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 160px 160px;
    }

    #litnote {
      position: fixed;
      bottom: 12px;
      right: 16px;
      z-index: 4;
      font-family: 'JetBrains Mono';
      font-size: 10.5px;
      color: var(--ink-dim);
      opacity: 0;
      transition: opacity .5s;
      pointer-events: none;
      letter-spacing: .06em;
    }

    #litnote.show {
      opacity: 1
    }

    /* scene clock */
    #scene-clock {
      position: fixed;
      top: 72px;
      right: 18px;
      z-index: 40;
      color: var(--ink-mute);
      pointer-events: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
    }

    #scene-clock .clock-face {
      width: 46px;
      height: 46px;
      border: 1px solid var(--edge);
      border-radius: 50%;
      overflow: hidden;
      background: var(--panel);
      box-shadow: 0 5px 16px rgba(0, 0, 0, .28);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
    }

    #scene-clock .clock-face svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    #scene-clock .clock-digi {
      font-family: 'JetBrains Mono';
      font-size: 10px;
      letter-spacing: .1em;
      font-variant-numeric: tabular-nums;
      padding: 2px 8px;
      border: 1px solid var(--edge);
      border-radius: 999px;
      background: var(--panel);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
    }

    @media (max-width:720px) {
      #scene-clock {
        display: none
      }
    }

    /* ================= HEADER ================= */
    header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 50;
      background: var(--panel);
      -webkit-backdrop-filter: blur(14px);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--edge)
    }

    .nav {
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 24px;
      height: 62px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none
    }

    .brand .ihmark {
      width: 32px;
      height: 32px;
      border-radius: 9px;
      flex: none;
      background: linear-gradient(135deg, #B07CFA, #8E3DF0);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Unbounded';
      font-weight: 900;
      font-size: 14px;
      color: #fff;
    }

    .brand-name {
      font-family: 'Unbounded';
      font-weight: 700;
      font-size: 16px;
      letter-spacing: -.01em;
      color: var(--ink)
    }

    .nav-links {
      display: flex;
      gap: 20px;
      list-style: none;
      align-items: center
    }

    .nav-links a {
      font-family: 'JetBrains Mono';
      font-size: 11.5px;
      letter-spacing: .06em;
      text-transform: uppercase;
      text-decoration: none;
      color: var(--ink-mute);
      transition: .2s
    }

    .nav-links a:hover,
    .nav-links a.active {
      color: var(--text-mag)
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      font-family: 'Outfit';
      font-weight: 600;
      font-size: 15px;
      background: linear-gradient(95deg, #B07CFA, #E06BF5);
      color: #1A0A30;
      text-decoration: none;
      cursor: pointer;
      padding: 12px 24px;
      border: 0;
      border-radius: 999px;
      box-shadow: 0 6px 26px rgba(176, 124, 250, .4);
      transition: transform .16s, box-shadow .25s;
    }

    .btn:hover {
      transform: translateY(-2px) rotate(-1deg);
      box-shadow: 0 10px 36px rgba(224, 107, 245, .5)
    }

    .btn:active {
      transform: translateY(0)
    }

    .btn.ghost {
      background: var(--panel);
      color: var(--ink);
      border: 1px solid var(--edge);
      box-shadow: none;
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px)
    }

    .btn.ghost:hover {
      border-color: var(--mag);
      color: var(--text-mag)
    }

    .menu-btn {
      display: none;
      background: none;
      border: 1px solid var(--edge);
      border-radius: 8px;
      width: 42px;
      height: 38px;
      cursor: pointer;
      position: relative
    }

    .menu-btn span {
      position: absolute;
      left: 10px;
      right: 10px;
      height: 2px;
      background: var(--ink);
      transition: .25s
    }

    .menu-btn span:nth-child(1) {
      top: 11px
    }

    .menu-btn span:nth-child(2) {
      top: 18px
    }

    .menu-btn span:nth-child(3) {
      top: 25px
    }

    body.nav-open .menu-btn span:nth-child(1) {
      top: 18px;
      transform: rotate(45deg)
    }

    body.nav-open .menu-btn span:nth-child(2) {
      opacity: 0
    }

    body.nav-open .menu-btn span:nth-child(3) {
      top: 18px;
      transform: rotate(-45deg)
    }

    /* ================= CONTENT ================= */
    .hero {
      min-height: 100svh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 120px 0 40vh;
      text-align: center
    }

    .daychip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 8px 12px;
      margin: 0 auto 24px;
      max-width: 100%;
      border: 1px solid var(--edge);
      border-radius: 22px;
      background: var(--panel);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      padding: 9px 18px;
      font-family: 'JetBrains Mono';
      font-size: 12.5px;
      letter-spacing: .08em;
    }

    .daychip .k {
      color: var(--ink-dim);
      font-size: 10px;
      letter-spacing: .2em;
      text-transform: uppercase
    }

    .daychip .clock {
      color: var(--text-lineE);
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      font-size: 14px
    }

    .hero h1 {
      font-size: clamp(38px, 6.6vw, 84px);
      max-width: 15ch;
      margin: 0 auto
    }

    .hero h1 .sun-word {
      color: var(--text-lineE)
    }

    .hero h1 .grad {
      background: linear-gradient(95deg, #C4B5FD, var(--mag));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent
    }

    .hero-sub {
      margin: 22px auto 0;
      max-width: 560px;
      font-size: 18px;
      color: var(--ink-mute);
      /* dawn halo: keeps the line readable where it crosses the cranes */
      text-shadow: 0 1px 14px var(--halo), 0 0 30px var(--halo);
    }

    .hero-pills {
      margin-top: 26px;
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .hpill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: 'JetBrains Mono';
      font-size: 11.5px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--ink-mute);
      border: 1px solid var(--edge);
      border-radius: 999px;
      padding: 8px 15px;
      background: var(--panel);
    }

    .hpill i {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--mag);
      flex: none;
    }

    .hero-cta {
      margin-top: 32px;
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      justify-content: center
    }

    .scroll-cue {
      margin-top: 54px;
      font-family: 'JetBrains Mono';
      font-size: 10.5px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--ink-dim);
      text-shadow: 0 1px 10px var(--halo), 0 0 20px var(--halo);
    }

    @media (prefers-reduced-motion:no-preference) {

      .hero .daychip,
      .hero h1,
      .hero-sub,
      .hero-cta,
      .scroll-cue {
        animation: rise .7s cubic-bezier(.2, .8, .3, 1) backwards
      }

      .hero h1 {
        animation-delay: .1s
      }

      .hero-sub {
        animation-delay: .2s
      }

      .hero-cta {
        animation-delay: .3s
      }

      .scroll-cue {
        animation-delay: .45s
      }

      @keyframes rise {
        from {
          opacity: 0;
          transform: translateY(16px)
        }

        to {
          opacity: 1;
          transform: none
        }
      }
    }

    /* big poster sections */
    .sec {
      padding: 16vh 0 18vh;
      text-align: center;
      position: relative;
      z-index: 4;
      pointer-events: none;
    }

    .sec a, .sec button, .sec input, .sec details, .sec summary, .sec form {
      pointer-events: auto;
    }

    /* Keep type crisp: broad halos washed out the day-to-night palette. */
    .sec, .final, .hero {
      text-shadow: 0 1px 2px var(--halo);
    }

    .sec h2, .sec h3, .sec .tagchip, .final h2 {
      text-shadow: none;
    }

    /* The event story sits over sunrise. Give it a consistent reading surface. */
    #about, .modal, footer {
      --ink: #F5F1FD;
      --ink-mute: #D9D2E9;
      --ink-dim: #BDB2D1;
      --panel: #302443;
      --edge: rgba(245, 241, 253, .18);
      --text-mag: var(--mag);
      --text-violet: var(--violet);
      --text-lineH: var(--lineH);
      --text-lineT: var(--lineT);
      --text-lineE: var(--lineE);
      --text-lineB: var(--lineB);
      color: var(--ink);
      text-shadow: none;
    }

    #about {
      padding-left: 16px;
      padding-right: 16px;
    }

    #about > .wrap {
      padding: clamp(28px, 5vw, 60px) clamp(20px, 4vw, 48px);
      background: #1C122D;
      border: 1px solid var(--edge);
      border-radius: 28px;
    }

    #about .bigstats {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 30px 20px;
    }

    #about .bigstats .n { font-size: clamp(30px, 4vw, 48px); }

    #about .bigstats .bs:first-child .n {
      font-size: clamp(24px, 2.7vw, 34px);
      line-height: 1.42;
      white-space: nowrap;
    }

    @media (max-width: 760px) {
      #about .bigstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    /* clip-text words paint the shadow as a blob behind the glyphs; the h1 is
   huge and white on the dawn sky, it needs no halo at all */
    .hero h1 {
      text-shadow: none;
    }

    /* the two longest ledes dive deepest into the skyline: put them on glass */
    #sponsors .lede, #looking .lede {
      background: var(--panel-text);
      border: 1px solid var(--edge);
      border-radius: 18px;
      padding: 18px 26px;
      -webkit-backdrop-filter: blur(7px);
      backdrop-filter: blur(7px);
    }

    .tagchip {
      display: inline-block;
      margin-bottom: 18px;
      font-family: 'JetBrains Mono';
      font-size: 10.5px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--ink-dim);
      border: 1px solid var(--edge);
      border-radius: 999px;
      padding: 7px 16px;
      background: var(--panel);
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
    }

    .sec h2 {
      font-size: clamp(32px, 5.4vw, 64px);
      max-width: 17ch;
      margin: 0 auto
    }

    .sec .lede {
      max-width: 620px;
      margin: 20px auto 0;
      font-size: 18px;
      color: var(--ink-mute)
    }

    .bigstats {
      margin: 46px auto 0;
      display: flex;
      gap: 34px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .bigstats .bs .n {
      font-family: 'Unbounded';
      font-weight: 900;
      font-size: clamp(36px, 5vw, 56px);
      line-height: 1
    }

    .bigstats .bs:nth-child(1) .n {
      color: var(--text-lineH)
    }

    .bigstats .bs:nth-child(2) .n {
      color: var(--text-lineT)
    }

    .bigstats .bs:nth-child(3) .n {
      color: var(--text-lineE)
    }

    .bigstats .bs:nth-child(4) .n {
      color: var(--text-lineB)
    }

    .bigstats .bs .l {
      font-family: 'JetBrains Mono';
      font-size: 10px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--ink-dim);
      margin-top: 8px
    }

    /* hours timeline */
    .hours {
      max-width: 760px;
      margin: 50px auto 0;
      text-align: left;
      display: grid;
      gap: 0
    }

    .hour {
      display: grid;
      grid-template-columns: 120px 1fr;
      gap: 22px;
      align-items: start;
      padding: 22px 26px;
      background: var(--panel-text);
      border: 1px solid var(--edge);
      border-radius: 18px;
    }

    .hour + .hour {
      margin-top: 14px;
    }

    .hour:last-child {
      border-bottom: 1px solid var(--edge)
    }

    .hour .hh {
      font-family: 'Unbounded';
      font-weight: 900;
      font-size: 26px;
      text-shadow: 0 1px 14px rgba(250, 246, 255, .5);
      color: var(--text-mag)
    }

    .hour .hh small {
      display: block;
      font-family: 'JetBrains Mono';
      font-weight: 400;
      font-size: 10px;
      letter-spacing: .16em;
      color: var(--ink-dim);
      margin-top: 4px;
      text-transform: uppercase
    }

    .hour h3 {
      font-family: 'Outfit';
      font-weight: 600;
      font-size: 19px;
      margin-bottom: 4px;
      color: var(--ink)
    }

    .hour p {
      font-size: 15.5px;
      color: var(--ink-mute)
    }

    /* tracks: giant rows, not cards */
    /* who-gets-in + prizes */
    .lookcols {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      max-width: 820px;
      margin: 42px auto 0;
      text-align: left
    }

    @media(max-width:680px) {
      .lookcols {
        grid-template-columns: 1fr
      }
    }

    .lookcol {
      border: 1px solid var(--edge);
      border-radius: 16px;
      padding: 22px 24px;
      background: var(--panel-text);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px)
    }

    .lookcol .lk {
      font-family: 'JetBrains Mono';
      font-size: 11px;
      letter-spacing: .16em;
      text-transform: uppercase;
      margin-bottom: 14px
    }

    .look-yes .lk {
      color: var(--text-lineT)
    }

    .look-no .lk {
      color: var(--ink-dim)
    }

    .lookcol ul {
      list-style: none;
      display: grid;
      gap: 11px
    }

    .lookcol li {
      padding-left: 24px;
      position: relative;
      font-size: 15px;
      color: var(--ink-mute);
      line-height: 1.45
    }

    .look-yes li::before {
      content: '✓';
      position: absolute;
      left: 0;
      color: var(--text-lineT);
      font-weight: 700
    }

    .look-no li::before {
      content: '✕';
      position: absolute;
      left: 0;
      color: var(--ink-dim)
    }

    .prizegrid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 16px;
      max-width: 880px;
      margin: 42px auto 0
    }

    .prize {
      border: 1px solid var(--edge);
      border-radius: 16px;
      padding: 26px 20px;
      background: var(--panel-text);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      text-align: center;
      transition: transform .2s, border-color .2s
    }

    .prize:hover {
      transform: translateY(-5px);
      border-color: var(--mag)
    }

    .prize .pi {
      font-size: 34px;
      margin-bottom: 10px
    }

    .prize .pn {
      font-family: 'Unbounded';
      font-weight: 700;
      font-size: 17px;
      margin-bottom: 8px
    }

    .prize .pd {
      font-size: 13.5px;
      color: var(--ink-mute);
      line-height: 1.5
    }

    /* prizes · pre-launch "locked vault" teaser (scoped, reveals nothing) */
    #prizes .vault .vlock,
    #prizes .vault .vmore {
      position: relative;
      overflow: hidden
    }

    #prizes .vault .vnum {
      position: absolute;
      top: 13px;
      left: 15px;
      font-family: 'JetBrains Mono';
      font-weight: 500;
      font-size: 11px;
      letter-spacing: .18em;
      color: var(--ink-dim)
    }

    #prizes .vault .vmedal {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 46px;
      height: 46px;
      margin: 2px auto 14px;
      border-radius: 50%;
      color: var(--text-lineE);
      border: 1px solid var(--edge);
      background: rgba(255, 194, 77, .07)
    }

    #prizes .vault .vredact {
      height: 15px;
      width: 72%;
      margin: 0 auto 10px;
      border-radius: 5px;
      background: linear-gradient(95deg, var(--violet), var(--mag));
      opacity: .5;
      filter: blur(.5px)
    }

    #prizes .vault .vlock::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(120deg, transparent 38%, rgba(255, 194, 77, .12) 50%, transparent 62%);
      background-size: 240% 100%;
      background-position: 120% 0
    }

    #prizes .vault .vmore {
      border-style: dashed
    }

    #prizes .vault .vplus {
      display: block;
      font-family: 'Unbounded';
      font-weight: 900;
      font-size: 34px;
      line-height: 1;
      margin-bottom: 10px;
      background: linear-gradient(95deg, var(--violet), var(--mag));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent
    }

    #prizes .vault .vmore:hover {
      border-color: var(--violet)
    }

    #prizes .vault-status {
      width: fit-content;
      margin: 22px auto 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 9px 17px;
      background: var(--panel-solid, var(--panel));
      border: 1px solid var(--edge);
      border-radius: 999px;
      font-family: 'JetBrains Mono';
      font-size: 11.5px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--ink-dim);
      text-align: center
    }

    #prizes .vault-status .vdot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--lineE);
      flex: none;
      box-shadow: 0 0 0 0 rgba(255, 194, 77, .5)
    }

    #prizes .pool-panel {
      max-width: 680px;
      margin: 26px auto 0;
      padding: 26px 32px 22px;
      background: var(--panel-text);
      border: 1px solid var(--edge);
      border-radius: 22px;
    }

    #prizes .pool-stat {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      flex-wrap: wrap;
      margin: 0 auto
    }

    #prizes .pool-fine {
      margin-top: 14px;
      font-size: 14.5px;
      line-height: 1.55;
      color: var(--ink-dim);
      text-align: center
    }

    #prizes .pool-amt {
      font-family: 'Unbounded';
      font-weight: 900;
      font-size: clamp(36px, 6.4vw, 50px);
      line-height: 1;
      color: var(--text-lineE);
      text-shadow: 0 0 26px rgba(255, 194, 77, .35)
    }

    #prizes .pool-lbl {
      font-size: 15px;
      line-height: 1.45;
      color: var(--ink-mute);
      max-width: 280px;
      text-align: left
    }

    @media (max-width:480px) {
      #prizes .pool-stat {
        gap: 8px
      }

      #prizes .pool-lbl {
        text-align: center;
        max-width: 100%
      }
    }

    #prizes .vault-nudge {
      margin: 12px auto 0;
      text-align: center
    }

    /* two small pills, cheap to blur; smooths the towers behind them */
    #prizes .vault-status,
    #prizes .vault-nudge a,
    #prizes .pool-panel {
      -webkit-backdrop-filter: blur(7px);
      backdrop-filter: blur(7px);
    }

    #prizes .vault-nudge a {
      display: inline-block;
      font-family: 'JetBrains Mono';
      font-size: 11px;
      letter-spacing: .08em;
      font-weight: 600;
      color: var(--text-mag);
      text-decoration: none;
      padding: 8px 15px;
      background: var(--panel-solid, var(--panel));
      border: 1px solid var(--edge);
      border-radius: 999px;
      transition: color .2s, border-color .2s
    }

    #prizes .vault-nudge a:hover {
      color: var(--ink);
      border-color: var(--mag)
    }

    @media (prefers-reduced-motion:no-preference) {
      #prizes .vault .vlock::after {
        animation: vsheen 6s ease-in-out infinite
      }

      #prizes .vault .vlock:nth-child(2)::after {
        animation-delay: 1.1s
      }

      #prizes .vault .vlock:nth-child(3)::after {
        animation-delay: 2.2s
      }

      @keyframes vsheen {

        0%,
        72% {
          background-position: 120% 0
        }

        100% {
          background-position: -120% 0
        }
      }

      #prizes .vault-status .vdot {
        animation: vpulse 2.6s ease-out infinite
      }

      @keyframes vpulse {
        0% {
          box-shadow: 0 0 0 0 rgba(255, 194, 77, .45)
        }

        70%,
        100% {
          box-shadow: 0 0 0 7px rgba(255, 194, 77, 0)
        }
      }
    }

    #prizes .vault .vsr {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
      border: 0
    }

    @media (max-width:420px) {
      #prizes .vault .vnum {
        font-size: 10px;
        top: 12px;
        left: 13px
      }
    }

    /* timetable */
    .timetable {
      max-width: 760px;
      margin: 42px auto 0;
      text-align: left;
      border: 1px solid var(--edge);
      border-radius: 16px;
      overflow: hidden;
      background: var(--panel-text);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px)
    }

    .tt-row {
      display: grid;
      grid-template-columns: 104px 88px 1fr;
      gap: 14px;
      align-items: baseline;
      padding: 14px 20px;
      border-bottom: 1px solid var(--edge);
      font-family: 'JetBrains Mono';
    }

    .tt-row:last-child {
      border-bottom: 0
    }

    .tt-row .day {
      font-size: 10px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--ink-dim)
    }

    .tt-row .t {
      font-size: 13.5px;
      font-weight: 700;
      color: var(--text-lineE);
      font-variant-numeric: tabular-nums
    }

    .tt-row .e {
      font-family: 'Outfit';
      font-size: 15px;
      color: var(--ink-mute);
      font-weight: 300
    }

    .tt-row .e b {
      font-weight: 600;
      color: var(--ink)
    }

    .tt-row.key .e b {
      color: var(--text-mag)
    }

    .tzbar {
      display: inline-flex;
      border: 1px solid var(--edge);
      border-radius: 999px;
      overflow: hidden;
      background: var(--panel);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      margin-top: 22px
    }

    .tzbar button {
      font-family: 'JetBrains Mono';
      font-size: 12px;
      letter-spacing: .06em;
      text-transform: uppercase;
      padding: 10px 18px;
      background: transparent;
      color: var(--ink-mute);
      border: 0;
      cursor: pointer
    }

    .tzbar button[aria-pressed="true"] {
      background: var(--mag);
      color: #1A0A30;
      font-weight: 700
    }

    .tznote {
      display: block;
      margin-top: 8px;
      font-family: 'JetBrains Mono';
      font-size: 10.5px;
      color: var(--ink-dim)
    }

    /* when sponsors section is in view: force header + clock readable */
    header,
    #scene-clock,
    .nav-links a,
    .brand-name {
      transition: background .5s ease, color .5s ease, border-color .5s ease;
    }

    body.sponsors-visible header {
      background: rgba(12, 6, 32, .88) !important;
      border-bottom-color: rgba(245, 241, 253, .15) !important;
    }

    body.sponsors-visible .nav-links a {
      color: rgba(245, 241, 253, .72) !important;
    }

    body.sponsors-visible .nav-links a:hover,
    body.sponsors-visible .nav-links a.active {
      color: #E06BF5 !important;
    }

    body.sponsors-visible .brand-name {
      color: #F5F1FD !important;
    }

    body.sponsors-visible #scene-clock {
      color: rgba(245, 241, 253, .72) !important;
    }

    body.sponsors-visible #scene-clock .clock-face,
    body.sponsors-visible #scene-clock .clock-digi {
      background: rgba(12, 6, 32, .82) !important;
      border-color: rgba(245, 241, 253, .18) !important;
    }

    /* sponsors section: force high-contrast dark text against mid-tone sky */
    #sponsors h2 {
      color: #1A0A30;
      text-shadow: 0 1px 8px rgba(255, 200, 140, .25);
    }

    #sponsors .lede {
      color: rgba(26, 10, 48, .85);
    }

    #sponsors .tagchip {
      color: #1A0A30;
      background: rgba(255, 255, 255, .45);
      border-color: rgba(26, 10, 48, .2);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
    }

    #sponsors .tierline {
      color: rgba(26, 10, 48, .75);
    }

    #sponsors .tierline b {
      color: #7C2DB8;
    }

    #sponsors .btn.ghost {
      background: rgba(255, 255, 255, .4);
      color: #1A0A30;
      border-color: rgba(26, 10, 48, .25);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
    }

    #sponsors .btn.ghost:hover {
      background: rgba(255, 255, 255, .55);
      border-color: #8E3DF0;
      color: #8E3DF0;
    }

    /* sponsors + faq share poster style */
    .backed {
      margin: 34px auto 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px 18px;
      flex-wrap: wrap;
    }

    .backed-k {
      font-family: 'JetBrains Mono';
      font-size: 10.5px;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--ink-dim);
    }

    .backed-n {
      font-family: 'Unbounded';
      font-weight: 700;
      font-size: 15px;
      color: var(--ink);
      border: 1px solid var(--edge);
      border-radius: 12px;
      padding: 9px 18px;
      background: var(--panel);
    }

    .stiers {
      display: grid;
      gap: 14px;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      max-width: 940px;
      margin: 30px auto 0;
      text-align: left;
    }

    .stier {
      border: 1px solid var(--edge);
      border-radius: 16px;
      padding: 20px 22px;
      background: var(--panel-text);
      transition: transform .2s, border-color .2s;
    }

    .stier:hover {
      transform: translateY(-4px);
      border-color: var(--mag);
    }

    .stier.feat {
      border-color: var(--mag);
      box-shadow: 0 0 0 1px var(--mag) inset;
    }

    .stier .sn {
      font-family: 'JetBrains Mono';
      font-size: 10.5px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--ink-dim);
    }

    .stier .sp {
      font-family: 'Unbounded';
      font-weight: 900;
      font-size: 27px;
      margin: 8px 0 7px;
    }

    .stier:nth-child(1) .sp { color: var(--text-mag); }
    .stier:nth-child(2) .sp { color: var(--text-violet); }
    .stier:nth-child(3) .sp { color: var(--text-lineE); }
    .stier:nth-child(4) .sp { color: var(--text-lineT); }

    .stier .sd {
      color: var(--ink-mute);
      font-size: 14px;
      line-height: 1.5;
    }

    .tierline {
      max-width: 680px;
      margin: 34px auto 0;
      font-family: 'JetBrains Mono';
      font-size: 13px;
      color: var(--ink-mute);
      display: flex;
      flex-wrap: wrap;
      gap: 10px 26px;
      justify-content: center;
    }

    .tierline b {
      color: var(--text-lineE);
      font-weight: 700
    }

    .faq {
      max-width: 720px;
      margin: 42px auto 0;
      text-align: left
    }

    details {
      border: 1px solid var(--edge);
      border-radius: 14px;
      background: var(--panel-text);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      margin-bottom: 12px;
      transition: border-color .25s
    }

    details[open] {
      border-color: var(--mag)
    }

    summary {
      cursor: pointer;
      list-style: none;
      padding: 17px 22px;
      font-weight: 500;
      font-size: 16px;
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: center
    }

    summary::-webkit-details-marker {
      display: none
    }

    summary::after {
      content: "+";
      font-family: 'Unbounded';
      color: var(--text-mag);
      font-size: 22px;
      font-weight: 900;
      transition: transform .2s;
      flex: none
    }

    details[open] summary::after {
      transform: rotate(45deg)
    }

    details .a {
      padding: 0 22px 20px;
      color: var(--ink-mute);
      font-size: 15px
    }

    /* final */
    .final {
      padding: 18vh 0 52vh;
      text-align: center
    }

    .final h2 {
      font-size: clamp(40px, 7.4vw, 92px)
    }

    .final p {
      margin: 18px auto 32px;
      max-width: 480px;
      color: var(--ink-mute);
      font-size: 17px
    }

    /* footer floats above city */
    footer {
      position: relative;
      z-index: 10;
      background: rgba(8, 4, 20, .85);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      border-top: 1px solid var(--edge)
    }

    .foot {
      max-width: var(--max);
      margin: 0 auto;
      padding: 22px 24px;
      display: flex;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
      align-items: center
    }

    .foot .sys {
      font-family: 'JetBrains Mono';
      font-size: 11px;
      color: rgba(245, 241, 253, .5);
      letter-spacing: .06em;
      text-transform: uppercase
    }

    .foot a {
      color: rgba(245, 241, 253, .65);
      text-decoration: none;
      font-family: 'JetBrains Mono';
      font-size: 11.5px
    }

    .foot a:hover {
      color: var(--text-mag)
    }

    .foot .links {
      display: flex;
      gap: 18px;
      flex-wrap: wrap
    }

    /* reveal */
    .reveal {
      opacity: 0;
      transform: translateY(22px);
      transition: opacity .7s ease, transform .7s ease
    }

    .reveal.in {
      opacity: 1;
      transform: none
    }

    @media (prefers-reduced-motion:reduce) {
      .reveal {
        opacity: 1;
        transform: none;
        transition: none
      }

      html {
        scroll-behavior: auto
      }

      #sun,
      #moon,
      .cloud {
        display: none
      }

      #stars {
        opacity: .8
      }
    }

    section[id] {
      scroll-margin-top: 80px
    }

    @media (max-width:720px) {
      .menu-btn {
        display: block
      }

      header .btn {
        padding: 8px 15px;
        font-size: 13px;
      }

      .nav-links {
        position: fixed;
        top: 62px;
        left: 0;
        right: 0;
        bottom: 0;
        display: none;
        flex-direction: column;
        align-items: flex-start;
        background: rgba(10, 5, 24, .97);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        padding: 26px;
        border-top: 1px solid var(--edge)
      }

      body.nav-open {
        overflow: hidden
      }

      body.nav-open .nav-links {
        display: flex
      }

      .nav-links a {
        font-size: 16px;
        width: 100%;
        padding: 15px 0;
        border-bottom: 1px dashed var(--edge);
        color: #F5F1FD
      }

      .tt-row {
        grid-template-columns: 1fr;
        gap: 2px;
        padding: 13px 16px
      }

      .hour {
        grid-template-columns: 1fr;
        gap: 6px
      }

    }

    /* ================= REGISTRATION MODAL ================= */
    .modal {
      position: fixed;
      inset: 0;
      z-index: 200;
      display: none;
      align-items: flex-start;
      justify-content: center;
      padding: 6vh 18px 40px;
      overflow-y: auto;
      background: rgba(6, 3, 16, .74);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
    }

    .modal.open {
      display: flex
    }

    /* ---- SCROLL PERF ----------------------------------------------------
   #sky is a fixed, full-viewport gradient whose colours change on every
   scroll frame. Any element with backdrop-filter on top of it must
   re-blur that moving backdrop every frame: a dozen of them tanks the
   frame rate on Firefox / integrated GPUs. The backdrop is a smooth
   gradient, so blurring it is visually negligible; we keep the frosted
   glass only on the fixed header + mobile nav (few, genuinely frosted)
   and drop it on all the scrolling content. Look unchanged, jank gone. */
    #scene-clock,
    .daychip,
    .tagchip,
    .btn.ghost,
    .lookcol,
    .prize,
    .timetable,
    .tzbar,
    details,
    footer {
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    body.modal-open {
      overflow: hidden
    }

    .modal-card {
      position: relative;
      width: 100%;
      max-width: 560px;
      background: linear-gradient(180deg, rgba(28, 16, 56, .96), rgba(14, 7, 34, .97));
      border: 1px solid var(--edge);
      border-radius: 22px;
      box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
      padding: 34px 30px 30px;
      animation: rise .4s cubic-bezier(.2, .8, .3, 1) backwards;
    }

    .modal-close {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 38px;
      height: 38px;
      border: 1px solid var(--edge);
      border-radius: 10px;
      background: transparent;
      color: var(--ink-mute);
      font-size: 20px;
      cursor: pointer;
      line-height: 1;
      transition: .2s;
    }

    .modal-close:hover {
      border-color: var(--mag);
      color: var(--text-mag)
    }

    .modal-card .mtag {
      font-family: 'JetBrains Mono';
      font-size: 10.5px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--text-violet);
    }

    .modal-card h2 {
      font-size: clamp(26px, 4.6vw, 34px);
      margin: 8px 0 6px
    }

    .modal-card .msub {
      color: var(--ink-mute);
      font-size: 15px;
      margin-bottom: 22px
    }

    .frm {
      display: grid;
      gap: 15px
    }

    .frm .row {
      display: grid;
      gap: 15px;
      grid-template-columns: 1fr 1fr
    }

    @media (max-width:480px) {
      .frm .row {
        grid-template-columns: 1fr
      }
    }

    .field {
      display: flex;
      flex-direction: column;
      gap: 6px
    }

    .field label {
      font-family: 'JetBrains Mono';
      font-size: 10.5px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--ink-dim);
    }

    .field label .req {
      color: var(--text-mag)
    }

    .field input,
    .field select,
    .field textarea {
      width: 100%;
      font-family: 'Outfit';
      font-size: 15px;
      font-weight: 300;
      color: var(--ink);
      background: rgba(245, 241, 253, .05);
      border: 1px solid var(--edge);
      border-radius: 11px;
      padding: 12px 14px;
      transition: border-color .2s, background .2s;
    }

    .field textarea {
      resize: vertical;
      min-height: 70px
    }

    .field input:focus,
    .field select:focus,
    .field textarea:focus {
      outline: none;
      border-color: var(--mag);
      background: rgba(245, 241, 253, .08);
    }

    .field select {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      cursor: pointer;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23A78BFA' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 14px center;
      padding-right: 34px;
    }

    .field select option {
      background: #1A0E36;
      color: var(--ink)
    }

    .hp {
      position: absolute;
      left: -9999px;
      width: 1px;
      height: 1px;
      opacity: 0
    }

    .agree {
      display: flex;
      gap: 11px;
      align-items: flex-start;
      font-size: 13.5px;
      color: var(--ink-mute);
      line-height: 1.5
    }

    .agree input {
      margin-top: 3px;
      width: 17px;
      height: 17px;
      flex: none;
      accent-color: var(--mag);
      cursor: pointer
    }

    .agree a {
      color: var(--text-mag);
      text-decoration: underline
    }

    .frm .submit {
      width: 100%;
      justify-content: center;
      margin-top: 4px;
      border: 0;
      font-size: 16px
    }

    .frm .submit[disabled] {
      opacity: .6;
      cursor: progress
    }

    .frm-msg {
      font-family: 'JetBrains Mono';
      font-size: 13px;
      line-height: 1.5;
      padding: 12px 14px;
      border-radius: 11px;
      display: none
    }

    .frm-msg.show {
      display: block
    }

    .frm-msg.err {
      background: rgba(255, 90, 110, .12);
      border: 1px solid rgba(255, 90, 110, .4);
      color: #FF9AAA
    }

    .frm-msg.ok {
      background: rgba(70, 212, 232, .1);
      border: 1px solid rgba(70, 212, 232, .4);
      color: #9DEAF4
    }

    .frm-done {
      text-align: center;
      padding: 18px 6px
    }

    .frm-done .big {
      font-size: 46px;
      line-height: 1;
      margin-bottom: 14px
    }

    .frm-done h3 {
      font-size: 24px;
      margin-bottom: 8px
    }

    .frm-done p {
      color: var(--ink-mute);
      font-size: 15px
    }

    .field.invalid input,
    .field.invalid select,
    .field.invalid textarea {
      border-color: #FF5A6E
    }

    /* ---- full-screen application (page-to-page) ---- */
    .appx {
      position: fixed;
      inset: 0;
      z-index: 200;
      display: none;
      overflow: hidden;
      background: radial-gradient(130% 95% at 50% -12%, #2a1652, #0c0620 72%)
    }

    .appx.open {
      display: block
    }

    .appx form {
      height: 100%;
      display: block
    }

    .appx-top {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 6;
      padding: 16px 22px 12px;
      background: linear-gradient(180deg, rgba(10, 5, 24, .92), rgba(10, 5, 24, 0))
    }

    .appx-bar {
      display: flex;
      align-items: center;
      gap: 14px;
      max-width: 640px;
      margin: 0 auto 12px
    }

    .appx-bar .mtag {
      flex: 1;
      margin: 0
    }

    .appx-bar .modal-close {
      position: static
    }

    .wiz-progress {
      max-width: 640px;
      margin: 0 auto;
      height: 4px;
      background: rgba(245, 241, 253, .12);
      border-radius: 999px;
      overflow: hidden
    }

    .wiz-bar {
      height: 100%;
      width: 16.6%;
      background: linear-gradient(95deg, var(--violet), var(--mag));
      border-radius: 999px;
      transition: width .45s cubic-bezier(.4, 0, .2, 1)
    }

    .wiz-meta {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      max-width: 640px;
      margin: 9px auto 0;
      font-family: 'JetBrains Mono';
      font-size: 10px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--ink-dim)
    }

    .wiz-meta #wiz-title {
      color: var(--text-violet)
    }

    .draft-note {
      font-family: 'JetBrains Mono';
      font-size: 10px;
      letter-spacing: .08em;
      color: var(--text-lineT);
      opacity: 0;
      transition: opacity .3s;
      white-space: nowrap
    }

    .draft-note.show {
      opacity: .85
    }

    .app-track {
      position: relative;
      height: 100%
    }

    .app-page {
      position: absolute;
      inset: 0;
      z-index: 1;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 122px 24px 128px;
      transform: translateX(40px);
      opacity: 0;
      pointer-events: none;
      transition: transform .5s cubic-bezier(.4, 0, .2, 1), opacity .4s
    }

    .app-page.active {
      z-index: 2;
      transform: none;
      opacity: 1;
      pointer-events: auto
    }

    .app-page.past {
      transform: translateX(-40px);
      opacity: 0
    }

    .app-inner {
      width: 100%;
      max-width: 600px;
      margin: auto 0
    }

    .app-inner .step-h {
      font-family: 'Unbounded', sans-serif;
      font-weight: 900;
      letter-spacing: -.01em;
      line-height: 1.08;
      font-size: clamp(27px, 5.4vw, 42px);
      margin-bottom: 10px
    }

    .app-inner .step-h .req {
      font-size: .5em;
      vertical-align: super;
      color: var(--text-mag)
    }

    .app-inner .step-sub {
      color: var(--ink-mute);
      font-size: clamp(15px, 2.1vw, 17px);
      margin-bottom: 26px;
      line-height: 1.5
    }

    .app-inner .field,
    .app-inner .row {
      margin-bottom: 16px
    }

    .app-inner .field:last-child,
    .app-inner .row:last-child {
      margin-bottom: 0
    }

    .app-inner .row {
      display: grid;
      gap: 16px;
      grid-template-columns: 1fr 1fr
    }

    @media (max-width:560px) {
      .app-inner .row {
        grid-template-columns: 1fr
      }
    }

    .app-page textarea {
      min-height: 200px;
      font-size: 16px
    }

    .app-page input,
    .app-page select {
      font-size: 16px;
      padding: 14px 16px
    }

    .counter {
      font-family: 'JetBrains Mono';
      font-size: 10px;
      color: var(--ink-dim);
      text-align: right;
      margin-top: 7px
    }

    .counter.warn {
      color: var(--text-lineE)
    }

    .appx-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 6;
      padding: 14px 22px 22px;
      background: linear-gradient(0deg, rgba(10, 5, 24, .95), rgba(10, 5, 24, 0))
    }

    .appx-nav .frm-msg {
      max-width: 640px;
      margin: 0 auto 10px
    }

    .appx-nav-row {
      display: flex;
      gap: 12px;
      max-width: 640px;
      margin: 0 auto
    }

    .appx-nav-row .btn {
      justify-content: center
    }

    .appx-nav-row #wiz-next,
    .appx-nav-row #reg-submit {
      flex: 1
    }

    .appx-nav-row .btn[hidden] {
      display: none
    }

    .review {
      display: grid;
      gap: 10px;
      margin-bottom: 20px
    }

    .review .ri {
      border: 1px solid var(--edge);
      border-radius: 12px;
      padding: 12px 15px;
      background: rgba(245, 241, 253, .03)
    }

    .review .ri .rk {
      font-family: 'JetBrains Mono';
      font-size: 9.5px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--ink-dim);
      margin-bottom: 4px
    }

    .review .ri .rv {
      font-size: 14.5px;
      color: var(--ink);
      white-space: pre-wrap;
      line-height: 1.5
    }

    .review .ri .rv.empty {
      color: var(--ink-dim);
      font-style: italic
    }

    .appx-done {
      position: fixed;
      inset: 0;
      z-index: 8;
      display: none;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 28px;
      background: radial-gradient(130% 95% at 50% -12%, #2a1652, #0c0620 72%)
    }

    .appx-done.show {
      display: flex;
      animation: rise .5s cubic-bezier(.2, .8, .3, 1)
    }

    .appx-done .big {
      font-size: 54px;
      margin-bottom: 16px
    }

    .appx-done h3 {
      font-family: 'Unbounded', sans-serif;
      font-weight: 900;
      font-size: clamp(27px, 5.4vw, 40px);
      margin-bottom: 13px
    }

    .appx-done p {
      color: var(--ink-mute);
      font-size: 16px;
      max-width: 440px;
      margin: 0 auto;
      line-height: 1.6
    }

    @media (prefers-reduced-motion:reduce) {
      .app-track {
        transition: none
      }

      .app-inner {
        transition: none;
        opacity: 1;
        transform: none
      }
    }
  

      .notify {
        max-width: 520px;
        margin: 26px auto 0
      }

      .notify .hp {
        position: absolute !important;
        left: -9999px;
        width: 1px;
        height: 1px;
        opacity: 0
      }

      .notify-row {
        display: flex;
        gap: 10px;
        flex-wrap: wrap
      }

      .notify-row input {
        flex: 1 1 220px;
        min-width: 0;
        padding: 15px 18px;
        border-radius: 14px;
        border: 1px solid var(--edge);
        background: rgba(12, 6, 32, .5);
        color: var(--ink);
        font: inherit;
        font-size: 16px
      }

      .notify-row input::placeholder {
        color: var(--ink-dim)
      }

      .notify-row input:focus {
        outline: none;
        border-color: var(--violet);
        box-shadow: 0 0 0 3px rgba(167, 139, 250, .25)
      }

      .notify-row .btn {
        flex: 0 0 auto
      }

      .notify-msg {
        margin: 12px 0 0;
        font-size: 14px;
        min-height: 18px;
        color: var(--ink-mute)
      }

      .notify-msg.err {
        color: #FF8E9E
      }

      .notify-msg.ok {
        color: #7BE0A0
      }

      .notify-fine {
        margin: 10px 0 0;
        font-size: 12.5px;
        color: var(--ink-dim)
      }

      .notify-done {
        max-width: 520px;
        margin: 8px auto 0;
        text-align: center
      }

      .notify-done .big {
        font-size: 38px;
        color: var(--text-lineE);
        margin-bottom: 6px
      }

      .notify-done h3 {
        font-family: Unbounded, sans-serif;
        margin: 0 0 8px
      }

      .notify-done p {
        margin: 0 0 18px
      }

      .signup-count {
        display: none;
        align-items: center;
        justify-content: center;
        gap: 9px;
        margin: 0 auto 18px;
        font-family: 'JetBrains Mono';
        font-size: 13px;
        letter-spacing: .03em;
        color: var(--ink-mute)
      }

      .signup-count.on {
        display: flex
      }

      .signup-count b {
        color: var(--ink);
        font-size: 15px;
        font-weight: 700
      }

      .signup-count .scdot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--lineT, #46D4E8);
        flex: none;
        box-shadow: 0 0 0 0 rgba(70, 212, 232, .5)
      }

      @media (prefers-reduced-motion:no-preference) {
        .signup-count .scdot {
          animation: scpulse 2.4s ease-out infinite
        }
      }

      @keyframes scpulse {
        0% {
          box-shadow: 0 0 0 0 rgba(70, 212, 232, .5)
        }

        70%,
        100% {
          box-shadow: 0 0 0 8px rgba(70, 212, 232, 0)
        }
      }

      /* noticeable live signup badge above the CTA */
      .hero-signups {
        display: none;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: max-content;
        max-width: 92vw;
        margin: 0 auto 22px;
        padding: 9px 20px;
        border: 1px solid rgba(70, 212, 232, .38);
        border-radius: 999px;
        background: rgba(70, 212, 232, .09);
        font-family: 'JetBrains Mono';
        font-size: 13px;
        letter-spacing: .04em;
        color: var(--ink);
        white-space: nowrap
      }

      .hero-signups.on {
        display: flex
      }

      .hero-signups b {
        color: var(--lineT, #46D4E8);
        font-weight: 700;
        font-size: 16px
      }

      .hero-signups .scdot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--lineT, #46D4E8);
        flex: none;
        box-shadow: 0 0 0 0 rgba(70, 212, 232, .6)
      }

      @media (prefers-reduced-motion:no-preference) {
        .hero-signups .scdot {
          animation: scpulse 2.4s ease-out infinite
        }
      }

      @media (max-width:400px) {
        .hero-signups {
          font-size: 11.5px;
          padding: 8px 16px
        }

        .hero-signups b {
          font-size: 14px
        }
      }

      .ref-share {
        margin: 22px auto 0;
        max-width: 520px
      }

      .ref-label {
        font-size: 13.5px;
        color: var(--ink-mute);
        margin: 0 0 8px;
        text-align: center
      }

      .ref-row {
        display: flex;
        gap: 8px
      }

      .ref-row input {
        flex: 1 1 auto;
        min-width: 0;
        padding: 11px 14px;
        border-radius: 12px;
        border: 1px solid var(--edge);
        background: rgba(12, 6, 32, .5);
        color: var(--ink);
        font: inherit;
        font-size: 14px
      }

      .ref-copy {
        flex: 0 0 auto;
        padding: 11px 18px;
        border-radius: 12px;
        border: 1px solid var(--edge);
        background: var(--panel-text);
        color: var(--ink);
        font: inherit;
        font-weight: 600;
        cursor: pointer
      }

      .ref-copy:hover {
        border-color: var(--mag);
        color: var(--text-mag)
      }

      .ref-copy.done {
        color: var(--text-lineT);
        border-color: var(--lineT)
      }
    
/* A restrained finishing pass on the original InfraHacks design.
   The typography, purple branding, composition and full scene stay intact. */
[hidden] { display:none!important }
body { font-weight:400 }
#grain { display:none }
header { background:var(--panel-solid,rgba(12,6,32,.94)); backdrop-filter:none; -webkit-backdrop-filter:none }
.btn { box-shadow:0 3px 14px rgba(176,124,250,.16); transition:background .2s,box-shadow .2s; }
.btn:hover { transform:none; box-shadow:0 4px 18px rgba(176,124,250,.25) }
.btn.ghost { background:var(--panel-solid,var(--panel)); box-shadow:none }
.hero-sub { font-weight:400; text-shadow:0 1px 3px rgba(12,6,32,.65); color:var(--ink); }
.daychip { border-radius:8px; border-color:transparent; background:var(--panel-solid,var(--panel)); }
.daychip .k { color:var(--ink-mute); letter-spacing:.12em }
.hero-pills { gap:0; width:fit-content; margin-inline:auto; border-top:1px solid var(--edge); border-bottom:1px solid var(--edge); padding:4px 8px; background:var(--panel-solid,var(--panel)); border-radius:6px }
.hpill { border:0; border-radius:0; background:none; padding:9px 13px; letter-spacing:.04em; color:var(--ink-mute) }
.hpill i { display:none }
.hpill+.hpill { border-left:1px solid var(--edge) }
.tagchip, #sponsors .tagchip { padding:0; border:0; border-radius:0; background:none; backdrop-filter:none; -webkit-backdrop-filter:none; font-weight:500; color:var(--text-violet); }
.sec { padding-top:clamp(80px,14vh,140px); padding-bottom:clamp(90px,16vh,160px) }
.sec h2 { font-weight:700; line-height:1.12 }
#about>.wrap { border-radius:16px }
.bigstats .bs:nth-child(n) .n { color:var(--text-violet) }
.bigstats .bs:nth-child(2) .n { color:var(--text-lineE) }
.hour,.lookcol,.timetable,#prizes .pool-panel { border-radius:10px; background:var(--panel-solid,var(--panel)); backdrop-filter:none; -webkit-backdrop-filter:none }
.hours { overflow:hidden; border-radius:10px; background:var(--panel-solid,var(--panel)); border:1px solid var(--edge) }
.hour { background:none; border:0; border-radius:0; padding:26px }
.hour+.hour { margin-top:0; border-top:1px solid var(--edge) }
.hour:last-child { border-bottom:0 }
.hour .hh { text-shadow:none; color:var(--text-violet) }
.lookcol li { line-height:1.65 }
#sponsors .lede,#looking .lede { border-radius:10px; background:var(--panel-solid,var(--panel)); backdrop-filter:none; -webkit-backdrop-filter:none }
#sponsors h2 { color:var(--ink); text-shadow:none }
#sponsors .lede { color:var(--ink-mute) }
.prize:hover,.stier:hover { transform:none }
#prizes .vault .vlock:after { display:none }
#prizes .vault .vredact { background:var(--text-violet); filter:none; opacity:.3; height:5px; width:50% }
#prizes .vault .prize { border-radius:10px; background:var(--panel-solid,var(--panel)); }
#prizes .vault-status { background:none; border:0; padding:0; border-radius:0; font-size:10px }
#prizes .vault-status .vdot { animation:none; box-shadow:none }
#prizes .pool-amt { text-shadow:none }
#prizes .vault-nudge a { border:0; border-radius:0; border-bottom:1px solid var(--edge); background:var(--panel-solid,var(--panel)); }
.tzbar { border-radius:7px }
.faq { background:var(--panel-solid,var(--panel)); border-radius:10px; border:1px solid var(--edge); overflow:hidden }
.faq details { background:none; border:0; border-radius:0; margin:0 }
.faq details+details { border-top:1px solid var(--edge) }
.faq details[open] { background:var(--panel) }
.faq details .a { line-height:1.75 }
.reveal { opacity:1; transform:none; transition:none }
h2.reveal { opacity:0; transform:translateY(12px); transition:opacity .55s ease,transform .55s ease }
h2.reveal.in { opacity:1; transform:none }
#stars i,#scene .bkn,#hookA,#hookB { animation:none }
.notify-fine { color:var(--ink-mute) }
.notify-msg:empty { min-height:0;margin:0 }
@media (min-width:721px) and (max-width:1050px) {
  .nav { gap:12px;padding-inline:18px }
  .nav-links { gap:12px }
  .nav-links a { font-size:9px;letter-spacing:0 }
  .brand-name { font-size:14px }
  header .btn { padding:10px 16px;font-size:13px }
}
@media (max-width:720px) {
  .hero { padding-top:110px;padding-bottom:30vh }
  .hero h1 { font-size:clamp(30px,7.7vw,52px);max-width:16ch;line-height:1.12 }
  .hero-sub { font-size:16px;max-width:34ch;line-height:1.65 }
  .hero-pills { display:grid;grid-template-columns:1fr 1fr;width:100%;padding:5px 0 }
  .hpill { justify-content:center;font-size:9px;padding:9px 5px;letter-spacing:0 }
  .hpill:nth-child(3) { border-left:0 }
  .hpill:nth-child(n+3) { border-top:1px solid var(--edge) }
  .hero-cta { gap:12px;margin-top:25px }
  .hero-cta .btn { font-size:14px;padding:12px 20px }
  .daychip { font-size:11px;gap:6px 10px;padding:9px 12px }
  .daychip .k { font-size:8px }
  .daychip .clock { font-size:12px }
  .nav-links { background:#130b25 }
  .nav-links a { border-bottom-style:solid }
  .sec h2 { font-size:clamp(27px,7.2vw,42px) }
  .sec .lede { font-size:16px }
  .hour { padding:22px }
  .hour .hh { font-size:23px }
  .sec { padding-top:75px;padding-bottom:85px }
  #sponsors .lede,#looking .lede { padding:19px }
  .scroll-cue { font-size:9px;letter-spacing:.12em }
}
@media(prefers-reduced-motion:reduce) {
  h2.reveal { opacity:1;transform:none;transition:none }
  *,*:before,*:after { animation:none!important;transition:none!important }
}