@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;600;800;900&display=swap');
:root{
  --bg:#020202;--fg:#f3f3f3;--muted:#777;--line:rgba(255,255,255,.14);--red:#c70d0d;
  --mx:50vw;--my:50vh;--corrupt:0;
}
*{box-sizing:border-box}
html{background:#000;scroll-behavior:smooth}
body{margin:0;background:#000;color:var(--fg);font-family:Inter,Arial,sans-serif;overflow-x:hidden;cursor:crosshair}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
.hidden{display:none!important}

#webgl {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
#webgl canvas{width:100%!important;height:100%!important}
#trail{position:fixed;inset:0;z-index:70;pointer-events:none}
.fx{position:fixed;inset:0;pointer-events:none}
.noise{z-index:91;opacity:.085;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:noise .16s steps(2) infinite}
.scanlines{z-index:92;opacity:.07;background:repeating-linear-gradient(to bottom,transparent 0 3px,rgba(255,255,255,.14) 4px)}
.chroma{z-index:90;mix-blend-mode:screen;opacity:calc(.1 + var(--corrupt)*.08);background:linear-gradient(90deg,rgba(255,0,0,.035),transparent 35%,rgba(0,255,255,.025))}
.vignette{z-index:89;box-shadow:inset 0 0 210px rgba(0,0,0,.95)}
@keyframes noise{0%{transform:translate(0)}25%{transform:translate(2%,-1%)}50%{transform:translate(-2%,2%)}75%{transform:translate(1%,2%)}100%{transform:translate(0)}}

.screen{min-height:100svh;position:relative;z-index:2}
.boot{display:grid;place-items:center;background:#000}
.boot-shell{width:min(850px,86vw);font-family:"IBM Plex Mono",monospace;letter-spacing:.1em}
.boot-title{font-size:12px;color:#aaa;margin-bottom:25px}
.boot-log{font-size:12px;line-height:1.95;color:#8d8d8d}
.boot-status{margin-top:28px;color:#4d4d4d;font-size:9px}
.intro{overflow:hidden}
#heroVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.4) brightness(.4);transform:scale(1.07)}
.intro-fog{position:absolute;inset:0;background:radial-gradient(circle at var(--mx) var(--my),transparent 0 5%,rgba(0,0,0,.22) 21%,rgba(0,0,0,.84) 74%),linear-gradient(to bottom,rgba(0,0,0,.05),rgba(0,0,0,.8))}
.flash-layer{position:absolute;inset:0;opacity:0;background:#fff;mix-blend-mode:difference}
.hero-center{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:20px}
.eyebrow,.hero-sub,.hud-corner{font:500 10px "IBM Plex Mono",monospace;letter-spacing:.2em;color:#8a8a8a}
.hero-title{font-size:clamp(74px,17vw,260px);line-height:.75;margin:15px 0 30px;font-weight:900;letter-spacing:-.08em;position:relative}
.hero-title:before,.hero-title:after{content:attr(data-text);position:absolute;inset:0;pointer-events:none;opacity:.8}
.hero-title:before{transform:translate(4px,-1px);clip-path:inset(12% 0 60% 0)}
.hero-title:after{transform:translate(-5px,2px);clip-path:inset(62% 0 8% 0)}
.hero-title.glitching:before{animation:g1 .11s steps(2) infinite}
.hero-title.glitching:after{animation:g2 .09s steps(2) infinite}
@keyframes g1{0%{transform:translate(8px,-2px)}50%{transform:translate(-7px,2px)}100%{transform:translate(3px)}}
@keyframes g2{0%{transform:translate(-8px,3px)}50%{transform:translate(8px,-2px)}100%{transform:translate(-2px)}}
#enterBtn{margin-top:22px;padding:14px 18px;border:1px solid #777;background:rgba(0,0,0,.55);color:#fff;font:600 11px "IBM Plex Mono",monospace;letter-spacing:.18em;cursor:crosshair;transition:.2s}
#enterBtn:hover{background:#fff;color:#000;box-shadow:0 0 70px rgba(255,255,255,.25);transform:scale(1.04)}
.hud-corner{position:absolute;z-index:5}
.tl{top:20px;left:20px}.tr{top:20px;right:20px}.bl{bottom:20px;left:20px}.br{bottom:20px;right:20px}

#site{position:relative;z-index:2}
.topbar{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;justify-content:space-between;align-items:center;padding:17px 21px;background:linear-gradient(to bottom,rgba(0,0,0,.9),transparent);mix-blend-mode:difference}
.logo{font-weight:900;letter-spacing:-.04em}
.topbar nav{display:flex;gap:18px}
.topbar nav a,.tiny{font:500 9px "IBM Plex Mono",monospace;letter-spacing:.12em;color:#8d8d8d}
.tiny{background:none;border:1px solid #444;padding:7px 9px;cursor:pointer}

.portal-screen{display:grid;place-items:center;background:radial-gradient(circle at center,rgba(18,18,18,.6),rgba(0,0,0,.96) 70%)}
.world-label{position:absolute;top:90px;font:500 10px "IBM Plex Mono",monospace;letter-spacing:.18em;color:#666}
.portals{width:min(1100px,88vw);height:70vh;position:relative;perspective:1400px;transform-style:preserve-3d}
.portal{position:absolute;border:1px solid rgba(255,255,255,.18);background:rgba(5,5,5,.42);backdrop-filter:blur(7px);display:grid;place-items:center;overflow:hidden;transform-style:preserve-3d;transition:.28s}
.portal:before{content:"";position:absolute;inset:-35%;background:conic-gradient(from 0deg,transparent 0 35%,rgba(255,255,255,.09),transparent 55% 100%);animation:spin 8s linear infinite}
.portal:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(255,255,255,.05),transparent 55%);opacity:0;transition:.2s}
.portal:hover:after{opacity:1}.portal:hover{border-color:#aaa;transform:translateZ(90px) scale(1.08);box-shadow:0 0 90px rgba(255,255,255,.08)}
.portal.red:hover{border-color:var(--red);box-shadow:0 0 100px rgba(199,13,13,.18)}
.portal span{position:relative;font-size:clamp(25px,4.8vw,68px);font-weight:900;letter-spacing:-.055em}
.portal i{position:absolute;right:10px;bottom:8px;font:500 9px "IBM Plex Mono",monospace;color:#666}
.portal-a{width:34%;height:29%;left:3%;top:4%}.portal-b{width:29%;height:35%;right:3%;top:3%}.portal-c{width:24%;height:28%;left:17%;bottom:6%}.portal-d{width:31%;height:24%;right:15%;bottom:11%}.portal-e{width:19%;height:21%;left:41%;top:39%}
.oracle{position:absolute;bottom:20px;font:500 9px "IBM Plex Mono",monospace;letter-spacing:.18em;color:#4d4d4d}
@keyframes spin{to{transform:rotate(1turn)}}

.section{min-height:100vh;padding:130px max(24px,6vw);border-top:1px solid rgba(255,255,255,.07)}
.section-title{display:grid;grid-template-columns:140px auto 1fr;align-items:end;gap:20px;border-bottom:1px solid var(--line);padding-bottom:13px;margin-bottom:70px}
.section-title>div,.section-title small{font:500 9px "IBM Plex Mono",monospace;letter-spacing:.15em;color:#6f6f6f}
.section-title h2{margin:0;font-size:clamp(58px,10vw,150px);line-height:.74;letter-spacing:-.075em}
.section-title small{text-align:right}

.tunnel{display:flex;gap:9vw;overflow-x:auto;padding:9vh 12vw 14vh;scroll-snap-type:x mandatory;perspective:1600px}
.tunnel::-webkit-scrollbar{height:1px}.tunnel::-webkit-scrollbar-thumb{background:#555}
.release{flex:0 0 min(58vw,690px);scroll-snap-align:center;transform:rotateY(-17deg) scale(.82);opacity:.38;transition:.35s;position:relative}
.release.active,.release:hover{transform:rotateY(0deg) scale(1);opacity:1}
.art{aspect-ratio:1;background:radial-gradient(circle at 30% 25%,#272727,#080808 50%,#020202);border:1px solid var(--line);display:grid;place-items:center;font-size:clamp(60px,11vw,180px);font-weight:900;letter-spacing:-.07em;position:relative;overflow:hidden;box-shadow:0 50px 110px rgba(0,0,0,.5)}
.art:after{content:"";position:absolute;inset:-20%;background:linear-gradient(110deg,transparent 42%,rgba(255,255,255,.1) 50%,transparent 57%);transform:translateX(-80%)}
.release:hover .art:after{animation:sheen .8s ease}
@keyframes sheen{to{transform:translateX(80%)}}
.release-copy{display:flex;justify-content:space-between;align-items:end;margin-top:14px;gap:20px}
.release-copy b{font-size:clamp(24px,4vw,62px);letter-spacing:-.05em;line-height:.9}
.release-copy span{font:500 9px "IBM Plex Mono",monospace;color:#777;letter-spacing:.1em}

.surveillance{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.monitor-screen{aspect-ratio:4/3;border:1px solid var(--line);background:#060606;position:relative;overflow:hidden}
.monitor-screen video{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.5) brightness(.75)}
.monitor-overlay{position:absolute;inset:0;background:repeating-linear-gradient(to bottom,transparent 0 2px,rgba(255,255,255,.09) 3px),radial-gradient(circle at center,transparent 35%,rgba(0,0,0,.72));mix-blend-mode:screen}
.monitor:hover .monitor-screen{box-shadow:0 0 80px rgba(255,255,255,.06)}
.monitor-meta{display:grid;grid-template-columns:1fr 1fr 1fr;padding-top:10px;font:500 9px "IBM Plex Mono",monospace;color:#6d6d6d;letter-spacing:.1em}.monitor-meta b{color:#ddd}.monitor-meta i{text-align:right}

.radar{height:68vh;border:1px solid var(--line);position:relative;overflow:hidden;display:grid;place-items:center;background:radial-gradient(circle at center,rgba(255,255,255,.02),transparent 65%)}
.radar-circle{width:min(55vw,620px);aspect-ratio:1;border:1px solid #222;border-radius:50%;position:absolute;box-shadow:0 0 0 90px rgba(255,255,255,.008),0 0 0 180px rgba(255,255,255,.004)}
.radar-line{width:min(55vw,620px);height:min(55vw,620px);position:absolute;border-radius:50%;background:conic-gradient(from 0deg,rgba(255,255,255,.11),transparent 14% 100%);animation:radar 5s linear infinite}
@keyframes radar{to{transform:rotate(1turn)}}
.radar-copy{text-align:center;position:relative}.radar-copy span,.radar-copy small{display:block;font:500 10px "IBM Plex Mono",monospace;letter-spacing:.14em;color:#666}.radar-copy b{display:block;margin:14px 0;font-size:clamp(30px,6vw,88px);letter-spacing:-.05em}

.archive-field{height:78vh;border:1px solid var(--line);position:relative;overflow:hidden;background:#030303}
.scrap{position:absolute;border:1px solid rgba(255,255,255,.17);background:#0a0a0a;box-shadow:0 30px 90px rgba(0,0,0,.7);font:500 11px "IBM Plex Mono",monospace;padding:16px;transition:translate .1s linear}
.scrap.photo{width:260px;height:340px;display:grid;place-items:end start;background:linear-gradient(145deg,#1c1c1c,#080808 60%,#111)}
.scrap.note{max-width:300px}.x1{left:4%;top:10%;transform:rotate(-5deg)}.x2{left:29%;top:11%;transform:rotate(6deg)}.x3{right:8%;top:7%;transform:rotate(-8deg)}.x4{left:9%;bottom:10%;transform:rotate(3deg)}.x5{right:22%;bottom:4%;transform:rotate(5deg)}.x6{left:45%;bottom:7%;transform:rotate(-3deg)}.x7{right:6%;top:52%;transform:rotate(7deg)}
.private-lock{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#000;color:#5e5e5e;border:1px solid #222;padding:12px 15px;font:500 10px "IBM Plex Mono",monospace;letter-spacing:.14em;cursor:not-allowed}

.confess-screen{display:grid;place-items:center;background:#000}
.terminal{width:min(900px,90vw);border:1px solid #262626;background:rgba(0,0,0,.9);box-shadow:0 0 120px rgba(255,255,255,.03)}
.terminal-bar{padding:12px 14px;border-bottom:1px solid #222;font:500 9px "IBM Plex Mono",monospace;color:#666;letter-spacing:.12em}
.terminal-body{padding:28px;font:500 12px/1.8 "IBM Plex Mono",monospace;color:#aaa}.terminal-body form{display:flex;gap:10px;margin-top:18px}.terminal-body input{flex:1;background:transparent;border:0;border-bottom:1px solid #333;outline:0;color:#fff}.verdict{min-height:1em;margin-top:30px;font:900 clamp(40px,8vw,110px)/.9 Inter,sans-serif;letter-spacing:-.06em;color:#fff}
.private-section{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at center,#1a0000,#000 55%);position:relative;z-index:2}.private-inner{text-align:center;max-width:700px;padding:40px}.private-label{font:500 9px "IBM Plex Mono",monospace;letter-spacing:.18em;color:#7b1111}.private-inner h2{font-size:clamp(60px,10vw,140px);line-height:.82;letter-spacing:-.07em;margin:20px 0}.private-inner p{color:#888}
footer{display:flex;justify-content:space-between;border-top:1px solid #222;padding:28px 22px;font:500 9px "IBM Plex Mono",monospace;color:#666;letter-spacing:.12em}

.holdfx{position:fixed;inset:0;z-index:100;display:grid;place-items:center;pointer-events:none;opacity:0;background:rgba(110,0,0,.06);font:600 10px "IBM Plex Mono",monospace;letter-spacing:.22em;transition:.12s}
.holdfx.active{opacity:1;animation:violent .08s steps(2) infinite}
@keyframes violent{0%{transform:translate(0)}25%{transform:translate(4px,-2px)}50%{transform:translate(-5px,2px)}75%{transform:translate(2px,3px)}100%{transform:translate(0)}}
.burst{position:fixed;inset:0;z-index:99;pointer-events:none;opacity:0;background:#fff;mix-blend-mode:difference}
.burst.hit{animation:burst .16s steps(2)}
@keyframes burst{0%{opacity:1}40%{opacity:.1}70%{opacity:.9}100%{opacity:0}}

body.decay1{--corrupt:1}.decay1 .scanlines{opacity:.1}
body.decay2{--corrupt:2}.decay2 #site{filter:contrast(1.05)}
body.decay3{--corrupt:3}.decay3 .topbar{animation:violent .22s steps(2) infinite}
body.decay4{--corrupt:4}.decay4:after{content:"SIGNAL DECAY // DO NOT TRUST THIS PAGE";position:fixed;bottom:10px;right:12px;z-index:94;font:500 8px "IBM Plex Mono",monospace;color:#721010;letter-spacing:.14em}

@media(max-width:800px){
  .topbar nav{display:none}.section-title{grid-template-columns:45px 1fr}.section-title small{display:none}
  .portals{height:74vh}.portal-a{width:55%;height:20%;left:0;top:5%}.portal-b{width:41%;height:24%;right:0;top:11%}.portal-c{width:46%;height:21%;left:2%;bottom:12%}.portal-d{width:47%;height:18%;right:0;bottom:5%}.portal-e{width:40%;height:17%;left:30%;top:43%}
  .release{flex-basis:82vw}.surveillance{grid-template-columns:1fr}.archive-field{height:90vh}.scrap.photo{width:185px;height:240px}
  footer{flex-direction:column;gap:10px}
}
/* ============================================
   THREE SWORDS SHRINE HOME
============================================ */

.shrine-home {
    position: relative;
    min-height: 100svh;

    display: flex;
    justify-content: center;
    align-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(255,255,255,.025),
            transparent 35%
        );
}


/* text over the 3D object */

.shrine-copy {
    position: relative;

    z-index: 5;

    text-align: center;

    pointer-events: none;

    transform: translateY(3vh);
}


.shrine-system {
    font-size: 9px;

    letter-spacing: .22em;

    color: #666;

    margin-bottom: 25px;
}


.shrine-title {
    margin: 0;

    font-size: clamp(
        80px,
        15vw,
        230px
    );

    line-height: .75;

    letter-spacing: -.075em;

    font-weight: 900;

    color: white;

    mix-blend-mode: difference;
}


.shrine-subtitle {

    margin-top: 30px;

    font-size: 10px;

    letter-spacing: .38em;

    color: #777;
}


/* bottom instruction */

.shrine-instruction {

    position: absolute;

    bottom: 55px;

    left: 50%;

    transform: translateX(-50%);

    font-size: 8px;

    letter-spacing: .22em;

    color: #555;

    white-space: nowrap;

    z-index: 5;

    pointer-events: none;
}

/* ==========================================
   THREE SWORDS SHRINE HOMEPAGE
========================================== */

.shrine-home {
    position: relative;

    width: 100%;

    min-height: 100vh;
    min-height: 100svh;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: transparent;

    z-index: 2;
}


.shrine-copy {

    position: relative;

    z-index: 10;

    text-align: center;

    pointer-events: none;

}


.shrine-system {

    margin-bottom: 24px;

    font-size: 9px;

    letter-spacing: .25em;

    color: #666;

}


.shrine-title {

    margin: 0;

    font-size: clamp(
        90px,
        15vw,
        240px
    );

    line-height: .75;

    font-weight: 900;

    letter-spacing: -.075em;

    color: white;

    mix-blend-mode: difference;

}


.shrine-subtitle {

    margin-top: 32px;

    font-size: 10px;

    letter-spacing: .4em;

    color: #777;

}


.shrine-instruction {

    position: absolute;

    bottom: 55px;

    left: 50%;

    transform: translateX(-50%);

    z-index: 10;

    font-size: 8px;

    letter-spacing: .2em;

    color: #555;

    white-space: nowrap;

    pointer-events: none;

}

/* =========================================
   TINY PIXEL HACKER CURSOR
========================================= */

html,
body,
a,
button,
input,
textarea,
select,
label {
  cursor:
    url("assets/hacker-cursor-10x16.png") 0 0,
    default !important;
}


/* =========================================
   CURSOR FX LAYER
========================================= */

#trail {
  position: fixed;
  inset: 0;

  width: 100vw;
  height: 100vh;

  pointer-events: none;

  /* Above the website graphics,
     but the real mouse cursor still renders above it */
  z-index: 99998;
}

/* =========================================
   FLASHING PIXEL UNDER CURSOR
========================================= */

#cursorFlash {
  position: fixed;

  left: 0;
  top: 0;

  width: 4px;
  height: 4px;

  background: #ffffff;

  pointer-events: none;

  z-index: 999999;

  transform:
    translate(-2px, -2px);

  box-shadow:
    0 0 3px #ffffff,
    0 0 7px rgba(255,255,255,.8),
    0 0 14px rgba(255,255,255,.35);

  animation:
    cursorFlashPulse .42s
    steps(2, end)
    infinite;
}


@keyframes cursorFlashPulse {

  0% {
    opacity: 1;
    transform:
      translate(-2px, -2px)
      scale(1);
  }

  50% {
    opacity: .15;
    transform:
      translate(-2px, -2px)
      scale(.6);
  }

  100% {
    opacity: 1;
    transform:
      translate(-2px, -2px)
      scale(1);
  }

}

/* =========================================
   CURSOR EFFECT MUST SIT ABOVE THE WEBSITE
========================================= */

#trail {
  position: fixed !important;
  inset: 0 !important;

  width: 100vw !important;
  height: 100vh !important;

  pointer-events: none !important;

  z-index: 999998 !important;

  opacity: 1 !important;
  display: block !important;
  visibility: visible !important;
}

/* HIDE THE REAL CURSOR */
html,
body,
a,
button,
input,
textarea,
select,
label {
  cursor: none !important;
}

/* REMOVE OLD RGB EFFECT */

.chroma {
  display: none !important;
}

/* =========================================
   HERO LOGO
========================================= */

.hero-logo {
  position: relative;

  width: min(72vw, 980px);
  height: auto;

  display: block;

  margin: 0 auto;

  z-index: 5;

  pointer-events: none;

  filter:
    drop-shadow(0 0 8px rgba(255,255,255,.12));

  animation:
    heroLogoFlicker 7s steps(1,end) infinite;
}


@keyframes heroLogoFlicker {

  0%,
  93%,
  96%,
  100% {
    opacity: 1;
    transform: translate(0,0);
  }

  94% {
    opacity: .7;
    transform: translate(-2px,0);
  }

  95% {
    opacity: 1;
    transform: translate(2px,0);
  }

  97% {
    opacity: .35;
  }

}

@media (max-width: 700px) {

  .hero-logo {
    width: 88vw;
  }

}

/* TOM SAINT — FOUR-ARTWORK MUSIC GRID */

.tunnel {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 996px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  overflow: visible !important;
}

.release {
  width: 100%;
  min-width: 0;
  height: auto;
  flex: none;
  margin: 0;
}

.art.cube-face {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.art.cube-face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Smaller screens */
@media (max-width: 600px) {
  .tunnel {
    gap: 6px;
    padding: 0 10px;
  }
}


/* RELEASE TITLE WIDTH */
.release-copy {
  width: 250px;
  max-width: 100%;
  box-sizing: border-box;
}

.release-copy {
  text-align: center;
  margin: 10px auto 0;
}

/* MINIMAL RELEASE TITLES */

.release-copy {
  width: 250px;
  max-width: 100%;
  margin: 8px auto 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.release-copy b {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1.4;
}

.release-copy span {
  font-size: 7px;
  font-weight: 400;
  letter-spacing: 1.8px;
  opacity: 0.45;
  text-transform: uppercase;
}
/* Confession box placeholder */
.terminal-body input{font:500 12px "IBM Plex Mono",monospace;letter-spacing:.12em;padding:4px 0}
.terminal-body input::placeholder{color:#555;text-transform:uppercase;letter-spacing:.12em}

/* =========================================
   MOBILE + TOUCH (iPhone / iPad / Android)
   html.touch is added by script.js on
   devices without a mouse.
========================================= */

/* Hold-to-sin: tint the screen with an overlay instead of
   filtering <body> (that made fixed elements jump on phones) */
.holdfx.active{
  -webkit-backdrop-filter:contrast(1.45) saturate(.25);
  backdrop-filter:contrast(1.45) saturate(.25);
}

html.touch,
html.touch body{
  -webkit-tap-highlight-color:transparent;
}

/* No text-selection / long-press menu while holding */
html.touch body{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
html.touch input,
html.touch textarea{
  -webkit-user-select:text;
  user-select:text;
}

/* No cursor on touch screens */
html.touch #trail,
html.touch #cursorFlash{
  display:none !important;
}

/* No hover on touch: show the artwork properly,
   highlight the one that's playing */
html.touch .release{
  transform:none;
  opacity:1;
}
html.touch .release.active{
  opacity:1;
}
html.touch .release.active .art{
  outline:1px solid rgba(255,255,255,.7);
  outline-offset:3px;
}


@media (max-width:800px){

  /* Keep the menu on phones, just smaller */
  .topbar{padding:14px}
  .topbar nav{display:flex !important;gap:12px}
  .topbar nav a{font-size:9px;letter-spacing:.08em;padding:6px 0}
  .logo{font-size:14px;white-space:nowrap}

  .section{min-height:auto;padding:96px 18px 80px}
  .section-title{margin-bottom:36px;gap:12px}

  .surveillance{gap:28px}
  .monitor-meta{font-size:8px}

  .radar{height:56vh;min-height:340px}
  .radar-circle,
  .radar-line{width:80vw;height:80vw}

  .terminal{width:calc(100vw - 32px)}
  .terminal-body{padding:20px 16px}

  /* 16px stops iPhone zooming in when you tap the box */
  .terminal-body input{font-size:16px;letter-spacing:.06em}

  .verdict{font-size:clamp(34px,11vw,60px)}

  .private-inner h2{font-size:clamp(44px,13vw,80px)}

  #typedIntro pre{font-size:10px;letter-spacing:.08em}

  .hud-corner{font-size:9px;letter-spacing:.14em}
  .tl,.tr{top:16px}.bl,.br{bottom:16px}
  .tl,.bl{left:14px}.tr,.br{right:14px}
}

/* Music: 2 x 2 grid on phones */
@media (max-width:600px){
  .tunnel{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px 12px;
    padding:0;
  }
  .release-copy b{font-size:9px;letter-spacing:1.5px}
}