/* ============ MERIDIAN tokens — treat as law ============ */
  :root{
    --bg:#F4F6F8; --surface:#FBFCFD; --ink:#1B2430; --soft:#5A6878; --faint:#93A1B0;
    --hair:rgba(27,36,48,.14); --gold:#A98B5F; --gold-soft:rgba(169,139,95,.55);
    --glass:rgba(255,255,255,.6); --glass-brd:rgba(255,255,255,.88);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scrollbar-width:thin;scrollbar-color:rgba(27,36,48,.25) transparent;}
  body{background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,sans-serif;
    font-weight:300;overflow-x:hidden;}
  ::selection{background:rgba(169,139,95,.25);}
  .mono{font-family:'IBM Plex Mono',monospace;font-weight:300;letter-spacing:.16em;}
  .sr{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
  a{color:inherit;}

  #track{height:2200vh;}
  #gl{position:fixed;inset:0;z-index:1;}
  #whiteout{position:fixed;inset:0;z-index:8;background:var(--bg);opacity:0;pointer-events:none;}
  #grain{position:fixed;inset:-50%;z-index:9;pointer-events:none;opacity:.028;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
    animation:gr 8s steps(10) infinite;}
  @keyframes gr{0%,100%{transform:translate(0,0)}10%{transform:translate(-5%,-8%)}30%{transform:translate(3%,-4%)}50%{transform:translate(-8%,3%)}70%{transform:translate(6%,8%)}90%{transform:translate(-3%,5%)}}

  /* ============ boot ============ */
  #boot{position:fixed;inset:0;z-index:40;background:var(--bg);display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:22px;transition:opacity .7s;}
  #boot.off{opacity:0;pointer-events:none;}
  #boot svg{width:52px;height:52px;}
  #boot .t{font-size:9px;letter-spacing:.34em;color:var(--soft);}
  #boot .bar{width:132px;height:1px;background:var(--hair);overflow:hidden;}
  #boot .bar i{display:block;height:1px;width:40%;background:var(--gold);animation:boot 1.5s ease-in-out infinite;}
  @keyframes boot{0%{transform:translateX(-110%)}100%{transform:translateX(340%)}}
  #bootHand{transform-origin:26px 26px;animation:sweep 6s linear infinite;}
  @keyframes sweep{to{transform:rotate(360deg)}}

  /* ============ chrome ============ */
  #brand{position:fixed;top:28px;left:32px;z-index:20;display:flex;align-items:center;gap:14px;}
  #brand svg{width:30px;height:30px;}
  #brand .w{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:15px;letter-spacing:.34em;}
  #brand .s{font-size:8.5px;letter-spacing:.22em;color:var(--soft);margin-top:3px;}
  #clock{position:fixed;top:32px;right:36px;z-index:20;text-align:right;font-size:12px;font-variant-numeric:tabular-nums;}
  #clock b{font-weight:400;color:var(--gold);}
  #clock .tz{font-size:8.5px;color:var(--faint);margin-top:4px;letter-spacing:.2em;}
  #nav{position:fixed;bottom:30px;left:34px;z-index:20;font-size:9px;color:var(--faint);letter-spacing:.18em;
    font-variant-numeric:tabular-nums;}
  #nav b{color:var(--soft);font-weight:300;}
  #phase{position:fixed;bottom:30px;right:76px;z-index:22;text-align:right;font-size:9.5px;
    letter-spacing:.22em;color:var(--soft);cursor:pointer;background:none;border:none;
    font-family:'IBM Plex Mono',monospace;font-weight:300;}
  #phase b{font-weight:400;color:var(--ink);}
  #phase:hover span{color:var(--ink);}
  #phase::after{content:'▾';margin-left:8px;color:var(--faint);font-size:8px;}
  #pmenu{position:fixed;right:70px;bottom:52px;z-index:23;background:var(--glass);
    border:1px solid var(--glass-brd);border-radius:3px;backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);box-shadow:0 12px 44px rgba(27,36,48,.10);
    padding:8px 0;opacity:0;visibility:hidden;transform:translateY(6px);transition:.32s;}
  #pmenu.open{opacity:1;visibility:visible;transform:none;}
  #pmenu button{display:flex;gap:14px;align-items:baseline;width:100%;text-align:left;
    padding:7px 20px 7px 16px;background:none;border:none;cursor:pointer;
    font-family:'IBM Plex Mono',monospace;font-weight:300;font-size:9px;
    letter-spacing:.22em;color:var(--soft);}
  #pmenu button b{font-weight:300;color:var(--faint);}
  #pmenu button:hover{color:var(--ink);background:rgba(255,255,255,.55);}
  #pmenu button.cur b{color:var(--gold);}
  #rail{position:fixed;right:12px;top:50%;transform:translateY(-50%);z-index:20;
    display:flex;flex-direction:column;gap:3px;align-items:flex-end;
    padding:6px 4px 6px 14px;cursor:pointer;}
  #rail i{display:block;width:8px;height:1px;background:var(--hair);transition:background .35s;pointer-events:none;}
  #rail i.q{width:13px;}
  #rail i.on{background:var(--ink);}
  #rail i.q.on{background:var(--gold);}
  #hint{position:fixed;bottom:44px;left:50%;transform:translateX(-50%);z-index:20;text-align:center;
    color:var(--soft);font-size:10px;letter-spacing:.14em;transition:opacity .8s;pointer-events:none;}
  #hint .ln{width:1px;height:44px;background:linear-gradient(var(--soft),transparent);
    margin:14px auto 0;position:relative;overflow:hidden;}
  #hint .ln::after{content:'';position:absolute;left:0;top:-12px;width:1px;height:12px;
    background:var(--gold);animation:drop 2.1s cubic-bezier(.6,0,.3,1) infinite;}
  @keyframes drop{0%{top:-12px}70%,100%{top:48px}}
  #satcred{position:fixed;z-index:20;bottom:12px;left:50%;transform:translateX(-50%);
    font-size:7px;letter-spacing:.18em;color:var(--faint);opacity:0;transition:opacity .6s;pointer-events:none;}

  /* ============ live data panel ============ */
  #feed{position:fixed;right:44px;top:50%;transform:translateY(-50%);z-index:18;width:300px;
    background:var(--glass);border:1px solid var(--glass-brd);border-radius:4px;
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    box-shadow:0 12px 44px rgba(27,36,48,.08);padding:20px 20px 14px;transition:opacity .6s;}
  #feed .hd{display:flex;justify-content:space-between;align-items:baseline;
    border-bottom:1px solid var(--hair);padding-bottom:12px;}
  #feed .hd .t{font-size:10px;letter-spacing:.26em;}
  #feed .hd .lv{font-size:8.5px;color:var(--gold);letter-spacing:.2em;display:flex;align-items:center;gap:6px;}
  #feed .hd .lv i{width:5px;height:5px;border-radius:50%;background:var(--gold);animation:pl 2s infinite;}
  @keyframes pl{0%,100%{opacity:1}50%{opacity:.25}}
  #feed .blk{padding:13px 0;border-bottom:1px solid rgba(27,36,48,.07);}
  #feed .blk:last-of-type{border-bottom:none;}
  #feed .bl{font-size:8px;color:var(--faint);letter-spacing:.24em;margin-bottom:8px;}
  #feed .bv{display:flex;justify-content:space-between;align-items:baseline;}
  #feed .bv .big{font-family:'Space Grotesk',sans-serif;font-size:21px;font-weight:300;}
  #feed .bv .big b{font-weight:400;color:var(--gold);}
  #feed .bv .sm{font-size:8.5px;color:var(--soft);letter-spacing:.12em;text-align:right;line-height:1.8;}
  #feed .ft{font-size:7.5px;color:var(--faint);letter-spacing:.16em;padding-top:10px;
    display:flex;justify-content:space-between;}

  /* ============ stations ============ */
  .station{position:fixed;z-index:15;inset:0;display:flex;align-items:center;
    pointer-events:none;opacity:0;visibility:hidden;}
  .station .in{max-width:540px;}
  .station.L .in{margin-left:clamp(32px,8vw,140px);}
  .station.R{justify-content:flex-end;}
  .station.R .in{margin-right:clamp(32px,8vw,140px);}
  .station.C{justify-content:center;text-align:center;}
  .k{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.3em;
    color:var(--gold);margin-bottom:24px;font-weight:400;}
  .k::after{content:'';display:block;width:34px;height:1px;background:var(--gold-soft);margin-top:12px;}
  .C .k::after{margin:12px auto 0;}
  h1,h2{font-family:'Space Grotesk',sans-serif;font-weight:300;
    font-size:clamp(32px,4.2vw,58px);line-height:1.07;letter-spacing:-0.012em;margin-bottom:24px;}
  .lede{font-size:clamp(14.5px,1.2vw,16.5px);line-height:1.75;color:var(--soft);max-width:46ch;}
  .C .lede{margin:0 auto;}
  .svc{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.26em;
    color:var(--gold);margin-top:26px;font-weight:400;line-height:2.1;}
  .cta{display:inline-block;margin-top:34px;padding:15px 34px;font-family:'IBM Plex Mono',monospace;
    font-size:10.5px;letter-spacing:.26em;color:var(--ink);border:1px solid var(--ink);border-radius:2px;
    text-decoration:none;background:var(--glass);backdrop-filter:blur(10px);transition:.3s;}
  .cta:hover{border-color:var(--gold);color:var(--gold);}
  .cta.ghost{border-color:var(--hair);color:var(--soft);margin-left:14px;}
  .cta.ghost:hover{border-color:var(--gold);color:var(--gold);}

  /* ============ media modal ============ */
  #mediaModal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
    opacity:0;pointer-events:none;transition:opacity .35s ease;}
  #mediaModal.open{opacity:1;pointer-events:auto;}
  .modalBackdrop{position:absolute;inset:0;background:rgba(27,36,48,.84);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);}
  .modalContent{position:relative;z-index:2;width:min(90vw,920px);aspect-ratio:16/9;background:#0A0E13;
    border:1px solid var(--glass-brd);border-radius:6px;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.6);}
  #closeModalBtn{position:absolute;top:14px;right:18px;z-index:10;background:rgba(255,255,255,.1);border:none;color:#fff;
    width:36px;height:36px;border-radius:50%;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;
    transition:background .2s;}
  #closeModalBtn:hover{background:rgba(255,255,255,.25);}
  .videoWrapper{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--bg);padding:30px;}
  .videoWrapper iframe,.videoWrapper video{width:100%;height:100%;border:none;}

  /* graceful floor: no WebGL → the journey lays itself out as a page */
  .no3d #track,.no3d #gl,.no3d #whiteout,.no3d #feed,.no3d #rail,.no3d #hint,
  .no3d #nav,.no3d #phase,.no3d #pmenu,.no3d #satcred,.no3d #boot{display:none!important;}
  .no3d .station{position:static;opacity:1!important;visibility:visible!important;
    pointer-events:auto;display:block;padding:110px 8vw 0;transform:none!important;filter:none!important;}
  .no3d .station .in{margin:0!important;max-width:640px;}

  @media(prefers-reduced-motion: reduce){
    #grain{animation:none;}
    #hint .ln::after{animation:none;}
    #boot .bar i{animation:none;width:100%;}
    #bootHand{animation:none;}
  }
  @media(max-width:900px){
    #feed{display:none;}#rail{display:none;}#pmenu{right:20px;bottom:52px;}
    .station.L .in,.station.R .in{margin:0 26px;}
    #brand{top:20px;left:22px;gap:10px;}
    #brand svg{width:24px;height:24px;}
    #brand .w{font-size:12px;}
    #brand .s{display:none;}
    #clock{top:22px;right:22px;font-size:10px;}
    #clock .tz{font-size:7px;}
    #nav{bottom:52px;left:22px;right:22px;font-size:7.5px;}
    #phase{bottom:26px;right:22px;font-size:8.5px;}
    #hint{bottom:104px;}
    .cta{padding:13px 22px;font-size:9.5px;}
    .cta.ghost{margin-left:6px;}
  }