:root{
    --gold:#d8b46a; --gold-bright:#f0d493; --gold-deep:#9c7320;
    --ink:#070912; --panel:rgba(10,13,26,.72); --line:rgba(216,180,106,.28);
    --text:#e9e3d2; --muted:#9aa3bd; --serif:'Cinzel',serif; --sans:'Space Grotesk',sans-serif;
    --site-night:#07111f;--site-line:rgba(192,215,255,.14);--site-text:#f5f8ff;--site-muted:#aab9cf;--site-cyan:#5ce3d6;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{min-width:320px;overflow-x:hidden;background:var(--site-night);color:var(--site-text)}
  body{min-width:320px;min-height:100%;overflow-x:hidden;background:var(--site-night);color:var(--site-text);
    font-family:'DM Sans',sans-serif;-webkit-font-smoothing:antialiased}
  .site-container{width:min(1160px,calc(100% - 40px));margin-inline:auto}
  .site-header{position:relative;z-index:20;padding:16px 0;border-bottom:1px solid var(--site-line);
    background:rgba(7,17,31,.92);backdrop-filter:blur(18px)}
  .site-nav{display:flex;align-items:center;justify-content:space-between;gap:24px}
  .site-brand{display:inline-flex;align-items:center;gap:12px;color:var(--site-text);font-family:'Manrope',sans-serif;
    font-size:1.04rem;font-weight:800;letter-spacing:-.02em;text-decoration:none}
  .site-brand-mark{display:block;width:46px;height:46px;flex:0 0 46px;filter:drop-shadow(0 10px 19px rgba(18,64,143,.34));transition:.22s}
  .site-brand-mark img{display:block;width:100%;height:100%}
  .site-brand:hover .site-brand-mark,.site-brand:focus-visible .site-brand-mark{filter:drop-shadow(0 12px 24px rgba(92,227,214,.3));transform:translateY(-2px) rotate(-3deg)}
  .site-nav-links{display:flex;gap:5px}
  .site-nav-links a{padding:9px 14px;border:1px solid transparent;border-radius:999px;color:var(--site-muted);
    font-size:.91rem;font-weight:700;text-decoration:none;transition:.18s;white-space:nowrap}
  .site-nav-links a:hover,.site-nav-links a:focus-visible,.site-nav-links a.active{border-color:var(--site-line);color:var(--site-text);background:rgba(255,255,255,.05)}
  .watch-page{width:100%;background:var(--ink)}
  .watch-stage{position:relative;width:100%;height:calc(100svh - 79px);min-height:680px;overflow:hidden;isolation:isolate;
    color:var(--text);font-family:var(--sans)}
  .site-footer{position:relative;z-index:20;padding:26px 0 30px;border-top:1px solid var(--site-line);
    color:#8698b2;background:rgba(2,8,17,.96)}
  .site-footer-inner{display:flex;align-items:center;justify-content:space-between;gap:22px}
  .site-footer p{font-size:.9rem}
  .site-footer a{color:var(--site-text);font-weight:700;text-decoration:none}
  .site-footer a:hover,.site-footer a:focus-visible{color:var(--site-cyan)}
  /* layered cosmic backdrop (parallax target) */
  .space{position:absolute;inset:-6%;z-index:0;transition:transform .6s cubic-bezier(.2,.7,.2,1);
    background:
      radial-gradient(60% 50% at 18% 22%, rgba(58,40,110,.55), transparent 60%),
      radial-gradient(55% 45% at 82% 30%, rgba(20,80,96,.42), transparent 62%),
      radial-gradient(70% 60% at 70% 85%, rgba(120,40,80,.34), transparent 60%),
      radial-gradient(50% 50% at 30% 80%, rgba(30,50,120,.40), transparent 60%),
      radial-gradient(120% 120% at 50% 50%, #0a0d1c 0%, #05060d 60%, #020308 100%);
  }
  .space::after{content:"";position:absolute;inset:0;opacity:.5;mix-blend-mode:screen;
    background-image:radial-gradient(1px 1px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 70% 60%,#cfe,transparent),
      radial-gradient(1px 1px at 40% 80%,#fff,transparent),radial-gradient(1.5px 1.5px at 85% 20%,#ffd,transparent),
      radial-gradient(1px 1px at 55% 45%,#fff,transparent),radial-gradient(1px 1px at 10% 70%,#def,transparent);
    background-size:340px 340px,280px 280px,420px 420px,300px 300px,260px 260px,380px 380px;}
  canvas#scene{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%}

  /* ---- overlay UI ---- */
  .ui{position:absolute;inset:0;z-index:3;pointer-events:none}
  .ui > *{pointer-events:auto}

  .brand{position:absolute;top:30px;left:34px;max-width:330px;opacity:0;transform:translateY(14px);
    animation:rise .9s .25s cubic-bezier(.2,.7,.2,1) forwards}
  .brand .mark{font-family:var(--serif);font-weight:700;letter-spacing:.42em;font-size:30px;color:var(--gold-bright);
    text-shadow:0 1px 0 rgba(0,0,0,.6),0 0 22px rgba(216,180,106,.25);padding-left:.42em}
  .brand .rule{height:1px;width:120px;margin:12px 0 10px;
    background:linear-gradient(90deg,var(--gold),transparent)}
  .brand .sub{font-size:11px;letter-spacing:.34em;color:var(--muted);text-transform:uppercase}
  .brand .ref{margin-top:6px;font-size:12.5px;letter-spacing:.18em;color:var(--text);font-weight:300}
  .brand .ref b{color:var(--gold);font-weight:600}

  .wordmark{position:absolute;right:18px;top:50%;transform:translateY(-50%) rotate(180deg);
    writing-mode:vertical-rl;font-family:var(--serif);letter-spacing:.5em;font-size:12px;color:rgba(216,180,106,.5);
    opacity:0;animation:fade 1s .8s forwards}

  .clock{position:absolute;top:30px;right:34px;text-align:right;opacity:0;animation:fade 1s .5s forwards}
  .clock .t{font-variant-numeric:tabular-nums;font-size:26px;font-weight:300;letter-spacing:.12em;color:var(--text)}
  .clock .lab{font-size:10px;letter-spacing:.32em;color:var(--muted);text-transform:uppercase;margin-top:2px;display:flex;gap:8px;align-items:center;justify-content:flex-end}
  .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold)}
  .dot.live{animation:pulse 1.6s infinite}
  .dot.off{background:#5a6076;box-shadow:none}

  .iconbtn{position:absolute;top:96px;right:34px;width:42px;height:42px;border-radius:50%;
    border:1px solid var(--line);background:var(--panel);color:var(--gold);cursor:pointer;
    display:grid;place-items:center;backdrop-filter:blur(6px);transition:.25s;opacity:0;animation:fade 1s .7s forwards}
  .iconbtn:hover{border-color:var(--gold);color:var(--gold-bright);transform:translateY(-2px);box-shadow:0 8px 24px rgba(216,180,106,.18)}
  .iconbtn svg{width:18px;height:18px}

  /* dock */
  .dock{position:absolute;left:34px;bottom:30px;transform:translateY(20px);
    display:flex;gap:6px;padding:7px;border:1px solid var(--line);border-radius:40px;background:var(--panel);
    backdrop-filter:blur(10px);box-shadow:0 18px 50px rgba(0,0,0,.5);opacity:0;animation:rise .9s .55s cubic-bezier(.2,.7,.2,1) forwards}
  .dock>*{flex:0 0 auto}
  .dock button{font-family:var(--sans);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
    color:var(--muted);background:transparent;border:1px solid transparent;border-radius:30px;padding:9px 15px;cursor:pointer;
    transition:.22s;white-space:nowrap}
  .dock button:hover{color:var(--text);border-color:var(--line);transform:translateY(-1px)}
  .dock button.on{color:#1a1407;background:linear-gradient(180deg,var(--gold-bright),var(--gold));border-color:var(--gold);
    box-shadow:0 4px 16px rgba(216,180,106,.35)}
  .dock .sep{width:1px;background:var(--line);margin:6px 2px}
  .timezone-wrap{position:relative;display:flex;align-items:center}
  .timezone-wrap::after{content:"⌄";position:absolute;right:11px;top:50%;transform:translateY(-58%);
    color:var(--gold);font-size:12px;pointer-events:none}
  .dock select{font-family:var(--sans);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;
    color:var(--text);background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:30px;
    padding:9px 28px 9px 13px;cursor:pointer;outline:none;appearance:none;max-width:132px;transition:.22s}
  .dock select:hover,.dock select:focus{border-color:var(--gold);background:rgba(216,180,106,.08)}
  .dock select option,.dock select optgroup{font-family:var(--sans);font-size:15px;letter-spacing:.02em;line-height:1.5;
    color:#e9e3d2;background:#0c1020;text-transform:none}

  .hint{position:absolute;left:50%;bottom:92px;transform:translateX(-50%);font-size:11px;letter-spacing:.22em;
    color:var(--muted);text-transform:uppercase;opacity:0;animation:fade 1s 1.1s forwards;transition:opacity .6s}
  .hint.gone{opacity:0!important}
  .hint b{color:var(--gold);font-weight:500}

  /* drawer */
  .drawer{position:absolute;top:0;right:0;height:100%;width:380px;max-width:88vw;background:var(--panel);
    border-left:1px solid var(--line);backdrop-filter:blur(14px);transform:translateX(102%);
    transition:transform .5s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column;padding:30px 30px 24px}
  .drawer.open{transform:translateX(0)}
  .drawer h2{font-family:var(--serif);font-weight:600;letter-spacing:.22em;font-size:18px;color:var(--gold-bright)}
  .tabs{display:flex;gap:18px;margin:18px 0 6px;border-bottom:1px solid var(--line)}
  .tabs button{background:none;border:none;color:var(--muted);font-family:var(--sans);font-size:11px;letter-spacing:.2em;
    text-transform:uppercase;padding:0 0 10px;cursor:pointer;position:relative;transition:.2s}
  .tabs button.on{color:var(--text)}
  .tabs button.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gold)}
  .tabbody{overflow-y:auto;padding-right:6px;margin-top:14px;flex:1}
  .tabbody::-webkit-scrollbar{width:6px}
  .tabbody::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px}
  .spec{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.06)}
  .spec .k{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);flex:0 0 38%}
  .spec .v{font-size:13px;color:var(--text);font-weight:300;text-align:right;line-height:1.45}
  .story p{font-size:14px;line-height:1.85;color:#cdd2e2;font-weight:300;margin-bottom:16px}
  .story p:first-letter{font-family:var(--serif);font-size:42px;float:left;line-height:.8;padding:6px 10px 0 0;color:var(--gold)}
  .story .sig{font-family:var(--serif);letter-spacing:.2em;color:var(--gold);font-size:13px;margin-top:8px}
  .close{position:absolute;top:24px;right:24px;background:none;border:none;color:var(--muted);font-size:22px;cursor:pointer;line-height:1;transition:.2s}
  .close:hover{color:var(--gold);transform:rotate(90deg)}

  /* loader */
  .loader{position:absolute;inset:0;z-index:9;background:var(--ink);display:grid;place-items:center;transition:opacity .8s}
  .loader.hide{opacity:0;pointer-events:none}
  .loader .lm{font-family:var(--serif);letter-spacing:.5em;font-size:24px;color:var(--gold-bright);padding-left:.5em}
  .loader .lt{margin-top:14px;font-size:10px;letter-spacing:.4em;color:var(--muted);text-transform:uppercase}
  .spin{width:46px;height:46px;margin:24px auto 0;border:2px solid rgba(216,180,106,.18);border-top-color:var(--gold);
    border-radius:50%;animation:sp 1s linear infinite}
  .loader .err{color:#e08;margin-top:18px;font-size:12px;letter-spacing:.1em;max-width:300px;text-align:center;display:none}

  @keyframes rise{to{opacity:1;transform:translateY(0)}}
  @keyframes fade{to{opacity:1}}
  @keyframes sp{to{transform:rotate(360deg)}}
  @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
  @media(max-width:900px){
    .dock{position:absolute;left:8px;right:auto;bottom:8px;width:calc(100% - 16px);
      max-width:calc(100% - 16px);justify-content:flex-start;flex-wrap:nowrap;overflow-x:scroll!important;overflow-y:hidden;
      border-radius:20px;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
      touch-action:pan-x;scroll-snap-type:x proximity;scroll-padding-inline:7px}
    .dock>*{scroll-snap-align:start}
    .dock::-webkit-scrollbar{display:none}
  }
  @media(max-width:640px){
    .site-container{width:calc(100% - 24px)}
    .site-header{padding:10px 0}
    .site-nav{gap:8px}
    .site-brand>span:last-child{display:none}
    .site-nav-links{min-width:0;overflow-x:auto;scrollbar-width:none}
    .site-nav-links::-webkit-scrollbar{display:none}
    .site-nav-links a{padding:8px 10px;font-size:.78rem}
    .site-nav-links a:nth-child(n+3){display:none}
    .watch-stage{height:calc(100svh - 67px);min-height:620px}
    .site-footer-inner{align-items:flex-start;flex-direction:column;gap:8px}
    .brand .mark{font-size:22px}.brand .sub,.brand .ref{display:none}
    .wordmark{display:none}.dock button{padding:8px 10px;font-size:10px}.dock select{font-size:10px;padding:8px 26px 8px 11px}
  }