:root{color-scheme:dark;--cyan:#a4f7ff;--ink:#f1faff;--muted:#9fb7ca;--scene-w:100vw;--scene-h:56.25vw;--scene-center-y:50%}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#030817;color:var(--ink);font-family:Inter,"Segoe UI",Arial,sans-serif}body{overflow:hidden}a{color:inherit}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:default}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:2px solid var(--cyan);outline-offset:6px}[hidden]{display:none!important}
.world{height:100svh;min-height:520px;position:relative;isolation:isolate;overflow:hidden;background:#030817}.world:before{content:'';position:absolute;inset:0;z-index:-1;background:url('/assets/hero-normal.png') center/cover;filter:blur(30px);opacity:.14}.scene{position:absolute;left:50%;top:var(--scene-center-y);width:var(--scene-w);height:var(--scene-h);transform:translate(-50%,-50%)}.scene-art{width:100%;height:100%;display:block;user-select:none}.hotspot{fill:transparent;cursor:pointer;outline:none;transition:fill .15s}.hotspot:hover,.hotspot:focus-visible,.scene-link:hover .hotspot,.scene-link:focus-visible .hotspot,.chat-hover .chat-art{fill:url(#brightPat)}.hotspot:focus-visible,.scene-link:focus-visible .hotspot{stroke:#ccfcff;stroke-width:2}.hotspot.played{fill:url(#dimPat)}.scene-link{outline:none}.action-label{fill:white;text-anchor:middle;font-size:25px;font-weight:600;letter-spacing:-.015em;paint-order:stroke;stroke:#020613d4;stroke-width:10;stroke-linejoin:round;pointer-events:none}.action-glint{stroke:#adf7ff;stroke-width:2;stroke-linecap:round;stroke-dasharray:20 90;opacity:.7;pointer-events:none;filter:drop-shadow(0 0 5px #b2faff)}.scene-link:hover .action-glint,.scene-link:focus-visible .action-glint{animation:glint 1.8s linear infinite;opacity:1}@keyframes glint{to{stroke-dashoffset:-110}}
.topbar{position:absolute;z-index:6;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:20px 28px;pointer-events:none;background:linear-gradient(#02081988,transparent)}.topbar>*{pointer-events:auto}.wordmark{display:flex;gap:10px;align-items:center;text-decoration:none;font-weight:700;font-size:14px;line-height:1.2;letter-spacing:.17em;text-shadow:0 2px 10px #000}.network-word{display:block;font-size:8px;letter-spacing:.33em;margin-top:5px;color:#c0e0e7}.brand-mark{position:relative;font-size:24px;letter-spacing:-3px;font-weight:500;display:grid;place-items:center;width:37px;height:40px;border:1px solid #b7efff66;border-radius:10px;transform:rotate(-9deg);color:#aaf8ff;background:#06142b66;box-shadow:inset 0 1px 8px #d0faff12}.brand-mark span{color:#f9a5e7;position:absolute;right:8px;bottom:3px;font-size:20px}.scene-tools{display:flex;align-items:center;gap:18px}.scene-tools button{border:0;background:transparent;font-size:10px;text-shadow:0 2px 8px #000;min-height:40px;color:#c7dce9;display:flex;align-items:center;gap:7px;padding:4px}.scene-tools svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4}.scene-tools button:hover{color:#fff}.footnote{position:absolute;bottom:20px;left:28px;right:28px;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:9px;color:#c5d7e9;letter-spacing:.07em;text-shadow:0 2px 6px #000,0 0 12px #000}.footnote>span:first-child{display:none}.preview-tag{font-size:7px;letter-spacing:.16em;color:#a9c3d6}.chatty-entry{position:absolute;z-index:4;left:calc(50% + var(--scene-w)*.315);top:calc(var(--scene-center-y) - var(--scene-h)*.456);width:calc(var(--scene-w)*.139);height:calc(var(--scene-h)*.219);border:0;background:transparent;padding:0;display:flex;justify-content:center;align-items:flex-end;padding-bottom:calc(var(--scene-h)*.022);font-size:calc(var(--scene-w)*.01302);font-weight:600;text-shadow:0 2px 5px #000,0 0 4px #000,0 0 12px #000}.chatty-entry small,.mobile-chat-icon{display:none}.chatty-entry:hover{color:#eddbff}.chatty-entry:focus-visible{outline:2px solid #e1aaff;border-radius:28px}.mobile-nav{display:none}.skip-link{position:fixed;left:20px;top:10px;transform:translateY(-150%);z-index:60;background:#0b213b;color:white;padding:12px;text-decoration:none}.skip-link:focus{transform:none}
.intro{position:fixed;inset:0;z-index:30;background:#030817;transition:opacity .7s}.intro video{width:100%;height:100%;object-fit:cover}.intro.fading{opacity:0;pointer-events:none}#skip-intro{position:absolute;right:28px;bottom:26px;background:linear-gradient(#effaff1c,#effaff08);backdrop-filter:blur(18px);border:1px solid #c7eaff55;border-radius:14px;padding:14px 22px;font-size:12px;box-shadow:inset 0 1px 0 #e8ffff2b,0 8px 24px #0005}.intro-links{position:absolute;bottom:32px;left:28px;display:flex;gap:28px;font-size:12px}.intro-links a{text-decoration:none;text-shadow:0 2px 8px #000}.intro-links a:hover{text-decoration:underline}
#emitter-layer{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;overflow:hidden;z-index:3}.emitter-icon{position:absolute;left:0;top:0;width:200px;height:200px;transform-origin:50% 50%;will-change:transform;user-select:none;pointer-events:none;cursor:pointer}.emitter-flash{position:absolute;pointer-events:none;overflow:visible;will-change:transform,opacity}
@media(max-width:720px), (max-aspect-ratio:4/5){body{overflow:auto}.world{height:auto;min-height:100svh;padding:calc(56.25vw + 82px) 15px 75px;background:radial-gradient(ellipse at 60% 0,#10224470,transparent 65%),#030817}.world:before{opacity:.1}.scene{top:65px;left:0;transform:none;width:100%;height:56.25vw;mask-image:linear-gradient(#000 90%,transparent)}.scene-art .hotspot,.scene-art .scene-link{display:none}.topbar{padding:14px 20px}.wordmark{font-size:12px}.brand-mark{width:32px;height:35px;font-size:21px}.network-word{font-size:7px}.scene-tools{gap:7px}.scene-tools button{font-size:9px}.scene-tools button span{display:none}.mobile-nav{display:grid;grid-template-columns:1fr 1fr;gap:25px 15px;max-width:500px;margin:auto;padding:0 0 185px}.mobile-action{display:flex;flex-direction:column;align-items:center;text-decoration:none;position:relative;min-width:0;font-size:14px;font-weight:500;line-height:1.3;gap:4px;min-height:165px}.mobile-action img{width:119px;height:119px;object-fit:contain;transition:transform .2s,filter .2s;filter:drop-shadow(0 6px 18px #163e6630)}.mobile-action:hover img,.mobile-action:focus-visible img{filter:drop-shadow(0 0 18px #aacdff80);transform:translateY(-4px)}.mobile-action small,.chatty-entry small{font-size:8px;font-weight:400;letter-spacing:.14em;color:#88aabe;margin-top:3px}.mediahammer{position:absolute;bottom:85px;left:15px;width:calc(50% - 22px)}.chatty-entry{top:auto;left:auto;right:15px;bottom:85px;width:calc(50% - 22px);height:165px;min-height:165px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:0;font-size:14px;font-weight:500;gap:4px;text-shadow:none}.mobile-chat-icon{display:block;width:119px;height:119px;object-fit:contain}.chatty-entry small{display:block}.chatty-entry:hover img{filter:drop-shadow(0 0 18px #bd8af788)}.footnote{bottom:25px;left:20px;right:20px;justify-content:space-between}.footnote>span:first-child{display:block;font-size:9px}.scene-instruction{display:none}.intro video{object-fit:contain}.intro-links{bottom:87px;left:20px;right:20px;justify-content:center;gap:20px;font-size:11px}#skip-intro{bottom:24px;left:50%;right:auto;transform:translateX(-50%);white-space:nowrap}.skip-link{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}#emitter-layer{display:none}.intro{display:none!important}}
/* All touch destinations share one flow; no absolute mobile row. */
@media(min-width:721px) and (min-aspect-ratio:4/5){.mobile-nav{display:contents}.mobile-action{display:none}}
@media(max-width:720px), (max-aspect-ratio:4/5){.world{padding-top:calc(72vw + 86px);padding-bottom:76px;overflow:hidden}.scene{height:72vw;overflow:hidden}.scene-art{width:128%;height:100%;margin-left:-14%}.mobile-nav{padding:0;gap:22px 15px}.mediahammer{position:relative;left:auto;bottom:auto;width:auto}.chatty-entry{position:relative;top:auto;right:auto;bottom:auto;left:auto;width:auto;height:165px}.mobile-action img,.mobile-chat-icon{width:111px;height:111px}.mobile-action,.chatty-entry{min-height:154px;height:154px}.mobile-action{height:auto}.mobile-action span{max-width:100%;text-align:center}.footnote{bottom:22px}}
.scene-instruction{font-size:11px;letter-spacing:.02em;color:#d3e7f4}.action-label{stroke-width:12;stroke:#020613ed}

/* Fill wide screens; keep the upper navigation icons visible on ultrawide. */
@media(min-width:721px) and (min-aspect-ratio:2/1){.world{--scene-center-y:calc(var(--scene-h)*.5)}.intro{overflow:hidden}.intro video{position:absolute;left:0;top:0;width:var(--scene-w);height:var(--scene-h);object-fit:fill;object-position:center top}}

/* Original MediaHammer intro typography and light animation. */
  .intro .top-lyric{
    position:fixed;top:0;left:0;right:0;
    display:flex;justify-content:center;gap:.6em;
    padding:14vh 24px 0;
    z-index:6;pointer-events:none;
    font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#fff;
    font-size:clamp(28px,6vw,84px);
    line-height:1;
    text-shadow:0 4px 28px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.6);
    text-align:center;flex-wrap:wrap;
  }
  .intro .top-lyric .w{
    opacity:0;transform:translateY(.25em);
    
    transition:opacity 1.1s ease, transform 1.2s cubic-bezier(.2,.7,.2,1), filter 1.1s ease;
    filter:blur(2px);
    will-change:opacity,transform,filter;
  }
  .intro .top-lyric .w.on{
    opacity:1;transform:translateY(0);filter:blur(0);
    
    transition:opacity .35s ease, transform .45s cubic-bezier(.2,.7,.2,1), filter .35s ease;
  }

  .intro .bottom-lyric{
    position:fixed;left:0;right:0;bottom:0;
    padding:0 24px 14vh;
    z-index:6;pointer-events:none;text-align:center;
    color:#fff;
    font-weight:800;letter-spacing:.16em;text-transform:uppercase;
    font-size:clamp(20px,4.2vw,56px);line-height:1.1;
    text-shadow:0 4px 28px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.6);
  }
  
  .intro .bottom-lyric .line1{
    display:block;
    opacity:0;transform:translateY(.4em);filter:blur(2px);
    
    transition:opacity 1.1s ease, transform 1.2s cubic-bezier(.2,.7,.2,1), filter 1.1s ease;
    will-change:opacity,transform,filter;
  }
  .intro .bottom-lyric .line1.on{
    opacity:1;transform:translateY(0);filter:blur(0);
    
    transition:opacity .55s ease, transform .7s cubic-bezier(.2,.7,.2,1), filter .55s ease;
  }
  
  .intro .bottom-lyric .line1.no-anim,
  .intro .bottom-lyric .soon.no-anim{ transition:none !important; animation:none !important; }
  .intro .bottom-lyric .soon{
    display:block;margin-top:.45em;
    font-size:.78em;letter-spacing:.42em;
    color:#ff3b3b;
    text-shadow:0 0 18px rgba(255,40,40,.55), 0 4px 28px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.7);
    opacity:0;
    
    will-change:opacity,transform,letter-spacing,text-shadow;
  }
  .intro .bottom-lyric .soon.on{
    
    animation: introSoonFlash .65s cubic-bezier(.15,.85,.25,1) 0s 1 forwards;
  }
  
  @keyframes introSoonFlash{
    
    0%   {opacity:0;  transform:scale(.94); filter:brightness(1) blur(0);
          text-shadow:0 0 0 rgba(255,255,255,0)}
    
    1%   {opacity:1;  transform:scale(1.08); filter:brightness(1.9) blur(.4px);
          color:#fff;
          text-shadow:
            0 0 6px  #fff,
            0 0 22px rgba(255,255,255,.95),
            0 0 48px rgba(255,90,90,.95),
            0 0 90px rgba(255,40,40,.7)}
    
    18%  {opacity:1;  transform:scale(1.02); filter:brightness(1.25) blur(0);
          color:#ffb3b3;
          text-shadow:
            0 0 4px  rgba(255,200,200,.7),
            0 0 28px rgba(255,80,80,.85),
            0 0 60px rgba(255,40,40,.55)}
    45%  {opacity:1;  transform:scale(1);   filter:brightness(1.05);
          color:#ff5050;
          text-shadow:0 0 24px rgba(255,40,40,.6), 0 4px 28px rgba(0,0,0,.85)}
    100% {opacity:1;  transform:scale(1);   filter:none;
          color:#ff3b3b;
          text-shadow:0 0 18px rgba(255,40,40,.55), 0 4px 28px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.7)}
  }

.intro.lyrics-reset .w,.intro.lyrics-reset .line1,.intro.lyrics-reset .soon{transition:none!important;animation:none!important}
