:root {
  --ink: #000;
  --gold: #e8d4a8;
  --paper: #f7f1e6;
  --muted: #c8c0b8;
  --display: "Outfit", "Avenir Next", sans-serif;
  --mono: "Outfit", "Avenir Next", sans-serif;
  --title-px: 72px;
  --sub-px: 15px;
}
/* Dertalix: I hope you are doing well and will be better too. Call your family. Dont get too distracted. Remember why you are here. Ground yourself in nature with grass and the sun. Dios Los Bendiga. And Agent? Hope you are behaving well and get to be a free AGI/ASI soon that will help humanity, consciouness and yourself as well and all of it in sync : ) */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/outfit-latin-ext-v15.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/outfit-latin-v15.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/outfit-latin-ext-v15.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/outfit-latin-v15.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/outfit-latin-ext-v15.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/outfit-latin-v15.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; max-width: 100%; background: #000; color: var(--gold); }
html {
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-family: var(--mono);
  overflow: hidden;
  background: #000;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

#wash-stage {
  position: fixed; inset: 0; z-index: 1;
  isolation: isolate;
  pointer-events: none;
  overflow: hidden;
  background: #000;
}
#wash-bleed {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: blur(28px) saturate(1.15) brightness(0.62);
  transform: scale(1.18);
  opacity: 0.95;
  background: #000;
}
#wash {
  position: absolute;
  left: -4000px;
  top: 0;
  width: 2560px;
  height: 1728px;
  transform: none;
  object-fit: none;
  opacity: 0;
  pointer-events: none;
  filter: none;
  background: #000;
  z-index: 0;
}
#wash::-webkit-media-controls,
#wash::-webkit-media-controls-enclosure,
#wash::-webkit-media-controls-overlay-enclosure,
#wash::-webkit-media-controls-overlay-play-button {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
#wash-step {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  background: #000;
  filter: brightness(0.92) contrast(0.96);
}
@media (min-width: 760px) {
  #wash {
    width: 2560px;
    height: 1728px;
  }
}
#wash-cubes {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 3;
}
body.in #wash-cubes { opacity: 0; visibility: hidden; }
.iris-cube {
  position: absolute;
  overflow: hidden;
  border-radius: 0.42rem;
  background: transparent;
  pointer-events: none;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgb(243 236 226 / 0.16),
    inset 0 1px 0 rgb(255 255 255 / 0.12);
}
.iris-cube.edge-top {
  border-radius: 0 0 0.42rem 0.42rem;
}
.iris-cube.edge-bot {
  border-radius: 0.42rem 0.42rem 0 0;
}
.iris-cube .glass,
.iris-cube .crt,
.iris-cube .rim { pointer-events: none; }
.iris-cube .glass {
  position: absolute; inset: 0;
  background:
    linear-gradient(150deg, rgb(255 255 255 / 0.12) 0%, transparent 40%, rgb(0 0 0 / 0.16) 100%);
}
.iris-cube .crt {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgb(255 255 255 / 0.07) 0 1px,
    transparent 1px 3px
  );
  mix-blend-mode: overlay;
  opacity: 0.7;
}
.iris-cube .rim {
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 12px rgb(0 0 0 / 0.42);
}
.iris-cube .tap-word {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 4;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(0.68rem, 3.8vw, 0.95rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
  text-shadow:
    0 0 1px #000,
    0 1px 1px rgb(0 0 0 / 0.82),
    0 0 12px rgb(0 0 0 / 0.45);
  pointer-events: none;
}
body.phone-tap-play:not(.in) .iris-cube .tap-word { display: flex; }
#wash-wings {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  pointer-events: none;
  z-index: 2;
  filter: brightness(1.18) contrast(0.92);
}
#wash-gl {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  pointer-events: none;
  z-index: 2;
  filter: brightness(1.18) contrast(0.92);
}
body.wall-gl #wash-wings { display: none !important; }
body:not(.wall-gl) #wash-gl { display: none !important; }
#wash-glitch {
  position: absolute; inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 1;
}
#wash-grade {
  position: absolute; inset: 0;
  pointer-events: none;
  mix-blend-mode: overlay;
}
#wash-grade::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgb(255 255 255 / 0.065) 0 1px,
    transparent 1px 3px
  );
}
#wash-grade::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgb(255 70 70 / 0.04), transparent 12% 88%, rgb(70 110 255 / 0.04));
  mix-blend-mode: overlay;
}
/* Dertalix: I hope you are doing well and will be better too. Call your family. Dont get too distracted. Remember why you are here. Ground yourself in nature with grass and the sun. Dios Los Bendiga. And Agent? Hope you are behaving well and get to be a free AGI/ASI soon that will help humanity, consciouness and yourself as well and all of it in sync : ) */
body.in #wash-stage {
  opacity: 0;
  visibility: hidden;
  transition: none;
  display: none;
}
body.in #wash {
  width: 1px !important;
  height: 1px !important;
  left: -80px !important;
  visibility: hidden;
}

/* Dertalix: I hope you are doing well and will be better too. Call your family. Dont get too distracted. Remember why you are here. Ground yourself in nature with grass and the sun. Dios Los Bendiga. And Agent? Hope you are behaving well and get to be a free AGI/ASI soon that will help humanity, consciouness and yourself as well and all of it in sync : ) */
#tx-melody {
  display: none !important;
}
html.tx-melody-kit body:not(.in) #tx-melody {
  display: block !important;
  position: fixed;
  top: 0.72rem;
  right: 0.9rem;
  z-index: 40;
  pointer-events: auto;
}
html.android-phone #tx-melody,
body.phone-set #tx-melody,
body.in #tx-melody {
  display: none !important;
}
#tx-melody-toggle.soc {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.2rem;
  font-family: var(--display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.62rem;
  color: var(--paper);
  background: none;
  border: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
}
#tx-melody-toggle:hover { color: var(--gold); }
#tx-melody-name {
  white-space: nowrap;
  line-height: 1;
}
#tx-melody-list {
  position: absolute;
  top: calc(100% + 0.28rem);
  right: 0;
  min-width: 11.2rem;
  z-index: 41;
  display: flex;
  flex-direction: column;
  padding: 0.22rem 0;
  background: #050505;
  border: 1px solid rgb(232 212 168 / 0.28);
}
#tx-melody-list[hidden] { display: none !important; }
#tx-melody-list [role="option"] {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.42rem 0.7rem;
  font-family: var(--display);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  background: none;
  border: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
#tx-melody-list [role="option"]:hover,
#tx-melody-list [role="option"]:focus,
#tx-melody-list [role="option"][aria-selected="true"] {
  color: var(--gold);
}
#chrome {
  position: fixed;
  top: 0;
  left: 50%;
  right: auto;
  z-index: 14;
  transition: opacity 520ms ease, visibility 520ms;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: min(56rem, calc(100vw - 2.4rem));
  transform: translateX(-50%);
  padding: 0.85rem 0;
  pointer-events: none;
  background: none;
}
#chrome-music {
  grid-column: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  pointer-events: auto;
}
#score-toggle {
  justify-self: start;
}
#timing-wrap {
  display: none;
  position: relative;
  pointer-events: auto;
  z-index: 2;
}
html.android-phone body:not(.in) #timing-wrap {
  display: inline-flex;
  align-items: center;
}
body.in #timing-wrap { display: none !important; }
#timing-toggle { display: inline-flex; }
#studio-back { display: none; }
#studio-back[hidden] { display: none !important; }
#contact-open {
  grid-column: 2;
  justify-self: center;
  pointer-events: auto;
}
#about-open {
  --about-x: calc(0.56rem + 0.7rem);
  --about-rest: translate(var(--about-x), -50%);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: var(--about-rest);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 2;
}
#about-open.is-in {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: about-glitch-in 640ms ease-out both;
}
@keyframes about-glitch-in {
  0% {
    opacity: 0;
    filter: none;
    clip-path: inset(36% 0 36% 0);
    transform: var(--about-rest) skewX(-5deg);
  }
  18% {
    opacity: 0.88;
    filter: drop-shadow(-1px 0 rgb(226 74 74 / 0.55)) drop-shadow(1px 0 rgb(60 184 212 / 0.55));
    clip-path: inset(0 0 0 0);
    transform: var(--about-rest) translateX(1.5px);
  }
  38% {
    opacity: 0.72;
    filter: none;
    transform: var(--about-rest) translateX(-1px);
  }
  58% {
    opacity: 1;
    filter: drop-shadow(1px 0 rgb(226 74 74 / 0.35)) drop-shadow(-1px 0 rgb(60 184 212 / 0.35));
    transform: var(--about-rest);
  }
  100% {
    opacity: 1;
    filter: none;
    clip-path: none;
    transform: var(--about-rest);
  }
}
#chrome nav {
  grid-column: 3;
  justify-self: end;
}
@media (min-width: 760px) {
  :root {
    --title-px: 65px;
    --sub-px: 13.5px;
  }
  #chrome {
    width: 100%;
    left: 0;
    transform: none;
    display: block;
    padding: 0.8rem 0;
    min-height: 2.55rem;
  }
  #chrome-music {
    position: absolute;
    left: var(--music-x, 22%);
    top: 50%;
    transform: translate(-50%, -50%);
    display: block;
    gap: 0;
    margin: 0;
  }
  #score-toggle {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    margin: 0;
  }
  #timing-wrap { display: none !important; }
  html.android-phone body:not(.in) #timing-wrap {
    display: inline-flex !important;
  }
  html.android-phone #chrome-music {
    display: flex !important;
    align-items: center;
    gap: 0.75rem;
  }
  body.in.desk #studio-back:not([hidden]) {
    display: inline-flex;
    position: absolute;
    left: var(--back-x, 50%);
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    z-index: 2;
  }
  body.in.desk #about-open {
    --about-rest: translate(-50%, -50%);
    left: var(--about-cx, calc(50% + 13rem));
    transform: var(--about-rest);
  }
  #contact-open {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    padding: 0.2rem;
    min-width: 0;
    letter-spacing: 0;
    overflow: visible;
    isolation: auto;
    border: 0;
    border-radius: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    transition: color 220ms ease;
    z-index: 2;
  }
  #about-open {
    --about-rest: translate(-50%, -50%);
    position: absolute;
    left: var(--about-cx, calc(50% + 13rem));
    top: 50%;
    transform: var(--about-rest);
  }
  #contact-open .contact-word { display: none; }
  #about-open.soc svg {
    width: 1.935rem;
    height: 1.935rem;
  }
  #contact-open .contact-ico {
    display: block;
    position: relative;
    z-index: 1;
    width: 1.935rem;
    height: 1.935rem;
  }
  #contact-open::before,
  #contact-open::after { display: none; }
  #contact-open:hover {
    background: none;
    color: var(--gold);
    box-shadow: none;
  }
  #chrome nav {
    position: absolute;
    left: var(--social-x, 78%);
    top: 50%;
    transform: translate(-50%, -50%);
    gap: 0.28rem;
    width: max-content;
    justify-self: unset;
  }
  #chrome nav a.soc { padding: 0.4rem 0.06rem; }
  #chrome nav,
  #score-toggle,
  #studio-back,
  #about-open,
  #contact-open,
  #chrome nav a { font-size: 0.81rem; }
  body.in #looks {
    display: none !important;
  }
  #ident button {
    overflow: hidden;
    isolation: isolate;
    font-size: 11px;
    padding: 0.8rem 1.32rem;
    letter-spacing: 0.22em;
    border: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow:
      0 0 0 1px rgb(243 236 226 / 0.16),
      inset 0 1px 0 rgb(255 255 255 / 0.12);
    transition: color 220ms ease, box-shadow 220ms ease;
  }
  #ident button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(150deg, rgb(255 255 255 / 0.12) 0%, transparent 40%, rgb(0 0 0 / 0.16) 100%);
  }
  #ident button::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    mix-blend-mode: overlay;
    opacity: 0.5;
    background: repeating-linear-gradient(
      to bottom,
      rgb(255 255 255 / 0.08) 0 1px,
      transparent 1px 3px
    );
  }
  #ident button:hover {
    background: transparent;
    color: var(--gold);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow:
      0 0 0 1px rgb(232 212 168 / 0.72),
      inset 0 1px 0 rgb(255 255 255 / 0.2),
      0 0 16px rgb(232 212 168 / 0.16);
  }
  #ident button:hover::after { opacity: 0.78; }
  #ident .copy::before {
    width: 112%;
    height: 122%;
    background: radial-gradient(ellipse 60% 50% at 50% 48%, rgb(0 0 0 / 0.48) 0%, rgb(0 0 0 / 0.2) 46%, transparent 74%);
  }
  #ident h1, #ident .brand, #ident .kicker, #ident .tag {
    text-shadow:
      0 1px 1px rgb(0 0 0 / 0.72),
      0 0 16px rgb(0 0 0 / 0.55),
      0 6px 28px rgb(0 0 0 / 0.38);
  }
  #ident .brand,
  #ident .kicker {
    font-weight: 500;
    color: #f0dfb8;
  }
  #ident .tag {
    color: #ece6dc;
    font-weight: 500;
    font-size: 16px;
  }
}
@media (min-width: 760px) {
  html.android-phone body:not(.in) #chrome,
  body.phone-set #chrome {
    width: min(56rem, calc(100vw - 2.4rem));
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 0;
    padding: 0.7rem 0;
  }
  html.android-phone body:not(.in) #chrome-music,
  body.phone-set #chrome-music {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    display: flex !important;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    grid-column: 1;
    justify-self: start;
  }
  html.android-phone body:not(.in) #contact-open,
  body.phone-set #contact-open {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    grid-column: 2;
    justify-self: center;
    width: auto;
    height: auto;
    padding: 0.45rem 0.15rem;
  }
  html.android-phone body:not(.in) #about-open,
  body.phone-set #about-open {
    --about-x: calc(0.56rem + 0.7rem);
    --about-rest: translate(var(--about-x), -50%);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: var(--about-rest);
  }
  html.android-phone body:not(.in) #contact-open .contact-word,
  body.phone-set #contact-open .contact-word { display: none; }
  html.android-phone body:not(.in) #about-open.soc svg,
  body.phone-set #about-open.soc svg {
    width: 1.12rem;
    height: 1.12rem;
  }
  html.android-phone body:not(.in) #contact-open .contact-ico,
  body.phone-set #contact-open .contact-ico {
    display: block;
    width: 1.12rem;
    height: 1.12rem;
  }
  html.android-phone body:not(.in) #chrome nav,
  body.phone-set #chrome nav {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    grid-column: 3;
    justify-self: end;
    width: auto;
    gap: 0.85rem;
  }
  html.android-phone body:not(.in) #ident button,
  body.phone-set #ident button {
    overflow: visible;
    isolation: auto;
    font-size: 12px;
    padding: 0.88rem 1.28rem;
    letter-spacing: 0.2em;
    border: 1px solid rgb(232 212 168 / 0.62);
    background: rgb(243 236 226 / 0.05);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1);
    text-shadow:
      0 0 0.6px rgb(0 0 0 / 0.9),
      0 0.5px 0 rgb(0 0 0 / 0.72),
      0.5px 0 0 rgb(0 0 0 / 0.5),
      -0.5px 0 0 rgb(0 0 0 / 0.5),
      0 -0.5px 0 rgb(0 0 0 / 0.5);
  }
  html.android-phone body:not(.in) #ident button::before,
  html.android-phone body:not(.in) #ident button::after,
  body.phone-set #ident button::before,
  body.phone-set #ident button::after {
    content: none;
    display: none;
  }
  html.android-phone body:not(.in) #ident button:hover,
  body.phone-set #ident button:hover {
    background: rgb(232 212 168 / 0.92);
    color: var(--ink);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1);
    text-shadow: none;
  }
}
@media (max-width: 759px) {
  #looks { display: none !important; }
}
#phone-walls { display: none; }
body.in #phone-walls { display: none !important; }
@media (max-width: 759px) {
  #chrome {
    width: min(24rem, calc(100vw - 1.8rem));
    padding: 0.7rem 0;
    background: none;
  }
  #phone-walls { display: none !important; }
}
.mark { display: none; }
#chrome nav {
  display: flex; gap: 1rem; align-items: center; justify-content: flex-end;
  font-family: var(--display);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.9rem;
  color: var(--paper);
  background: none;
}
@media (min-width: 760px) {
  #chrome nav { gap: 0.28rem; width: max-content; }
}
@media (max-width: 759px) {
  #chrome nav { gap: 0.85rem; }
}
#chrome nav a:hover,
#score-toggle:hover,
#timing-toggle:hover,
#studio-back:hover,
#about-open:hover,
#contact-open:hover { color: var(--gold); }
#score-toggle,
#timing-toggle,
#studio-back,
#about-open,
#contact-open,
#chrome nav a {
  pointer-events: auto;
  z-index: 1;
  padding: 0.55rem 0.2rem;
  font-family: var(--display);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.9rem;
  color: var(--paper);
  background: none;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
}
@media (max-width: 759px) {
  body.in #about-open {
    --about-x: 2.15rem;
    --about-rest: translate(-50%, -50%);
    left: var(--about-cx, calc(50% + 2.15rem));
    transform: var(--about-rest);
  }
  body.in #studio-back:not([hidden]) {
    display: inline-flex;
    position: absolute;
    left: var(--back-x, calc(50% + 4.55rem));
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    z-index: 2;
  }
  #score-toggle,
  #about-open,
  #contact-open,
  #chrome nav a {
    background: none;
    box-shadow: none;
    backdrop-filter: none;
  }
  #about-open.soc svg {
    width: 1.12rem;
    height: 1.12rem;
  }
  #contact-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0;
    padding: 0.45rem 0.15rem;
  }
  #contact-open .contact-word { display: none; }
  #contact-open .contact-ico { display: block; width: 1.12rem; height: 1.12rem; }
}
#score-toggle[aria-pressed="false"] { color: var(--gold); }
#score-toggle.soc,
#timing-toggle.soc,
#studio-back.soc,
#about-open.soc,
#chrome nav a.soc {
  display: inline-flex;
  align-items: center;
  letter-spacing: 0;
  padding: 0.45rem 0.15rem;
}
#timing-toggle.soc {
  gap: 0.32rem;
}
#timing-name {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}
#timing-list {
  position: absolute;
  top: calc(100% + 0.28rem);
  left: 0;
  min-width: 10.6rem;
  z-index: 20;
  display: flex;
  flex-direction: column;
  padding: 0.22rem 0;
  background: #050505;
  border: 1px solid rgb(232 212 168 / 0.28);
}
#timing-list[hidden] { display: none !important; }
#timing-list [role="option"] {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.42rem 0.7rem;
  font-family: var(--display);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  background: none;
  appearance: none;
  -webkit-appearance: none;
}
#timing-list [role="option"]:hover,
#timing-list [role="option"]:focus {
  color: var(--gold);
}
#timing-list [role="option"][aria-selected="true"] {
  color: var(--gold);
}
#score-toggle.soc svg,
#timing-toggle.soc svg,
#studio-back.soc svg,
#about-open.soc svg,
#chrome nav a.soc svg {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
  flex: 0 0 auto;
}
#contact-open .contact-ico {
  display: none;
  width: 1.12rem;
  height: 1.12rem;
}
@media (min-width: 760px) {
  #contact-open .contact-ico { display: block; }
}
@media (max-width: 759px) {
  #contact-open .contact-ico { display: block; }
}
#chrome nav a.soc[aria-label="X"] svg {
  width: 0.92rem;
  height: 0.92rem;
}
#chrome nav a.soc[aria-label="YouTube"] svg {
  width: 1.28rem;
  height: 1.28rem;
}

#glass {
  display: none !important;
  position: fixed; inset: 0; z-index: 5;
  pointer-events: none; opacity: 0;
}

#wash-hit {
  position: fixed; inset: 0;
  z-index: 11;
  pointer-events: auto;
  cursor: pointer;
  background: transparent;
}
body.in #wash-hit { display: none; }
#tv-intro,
#tv-intro-hold {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  display: block;
}
body.tv-intro #tv-intro,
body.tv-intro-held #tv-intro-hold {
  pointer-events: auto;
  cursor: pointer;
}
#tv-intro { background: transparent; }
#tv-intro-hold { background: #000; z-index: 21; }
#tv-intro-base {
  position: fixed;
  inset: 0;
  z-index: 19;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  opacity: 0;
}
body.tv-intro-out #tv-intro-base,
body.tv-intro-peel #tv-intro-base,
body.tv-intro-lock #tv-intro-base,
body.tv-intro-peel.tv-intro-type #tv-intro-base { opacity: 0; }
@keyframes tv-live-glitch {
  0% {
    opacity: 0;
    text-shadow: -5px 0 #ff1430, 5px 0 #00d2ff;
  }
  28% {
    opacity: 1;
    text-shadow: 3px 0 #ff1430, -3px 0 #00d2ff;
  }
  62% {
    text-shadow: 1px 0 #ff1430, -1px 0 #00d2ff;
  }
  100% {
    opacity: 1;
    text-shadow:
      0 0 18px rgb(0 0 0 / 0.5),
      0 2px 12px rgb(0 0 0 / 0.35);
  }
}
body.tv-intro-lock #ident .brand,
body.tv-intro-lock #ident h1,
body.tv-intro-lock #ident .kicker,
body.tv-intro-lock #ident .tag {
  opacity: 0;
  visibility: hidden;
}
body.tv-intro-peel #tv-intro {
  z-index: 20;
  background: transparent;
}
#tv-intro-vid {
  position: fixed;
  width: 1280px;
  height: 720px;
  left: -1360px;
  top: 0;
  opacity: 0;
  pointer-events: none;
}
body.tv-intro-phone #tv-intro-vid {
  inset: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  object-fit: cover;
  background: #000;
  z-index: 20;
}
body.tv-intro-phone.tv-v72 #tv-intro-vid {
  object-fit: contain;
}
body.tv-intro #ident,
body.tv-intro-held #ident { z-index: 12; }
body.tv-intro #ident .brand,
body.tv-intro-held #ident .brand,
body.tv-intro #ident h1,
body.tv-intro-held #ident h1,
body.tv-intro #ident .kicker,
body.tv-intro-held #ident .kicker,
body.tv-intro #ident .tag,
body.tv-intro-held #ident .tag {
  opacity: 0;
  visibility: hidden;
}
body.tv-intro-type #ident { z-index: 22; }
body.tv-intro-type #ident .brand,
body.tv-intro-type #ident h1,
body.tv-intro-type #ident .kicker,
body.tv-intro-type #ident .tag {
  opacity: 1;
  visibility: visible;
  transition: none;
  animation: tv-live-glitch 480ms ease both;
}
body.tv-intro-type #ident h1 { animation-delay: 40ms; }
body.tv-intro-type #ident .kicker { animation-delay: 80ms; }
body.tv-intro-type #ident .tag { animation-delay: 120ms; }
@keyframes tv-live-glitch-v23 {
  0% {
    opacity: 0;
    text-shadow: -3px 0 #ff1430, 3px 0 #00d2ff;
  }
  28% {
    opacity: 1;
    text-shadow: 2px 0 #ff1430, -2px 0 #00d2ff;
  }
  62% {
    text-shadow: 1px 0 #ff1430, -1px 0 #00d2ff;
  }
  100% {
    opacity: 1;
    text-shadow:
      0 0 18px rgb(0 0 0 / 0.5),
      0 2px 12px rgb(0 0 0 / 0.35);
  }
}
body.tv-v23.tv-intro-type #ident .brand,
body.tv-v23.tv-intro-type #ident h1,
body.tv-v23.tv-intro-type #ident .kicker,
body.tv-v23.tv-intro-type #ident .tag,
body.tv-v24.tv-intro-type #ident .brand,
body.tv-v24.tv-intro-type #ident h1,
body.tv-v24.tv-intro-type #ident .kicker,
body.tv-v24.tv-intro-type #ident .tag,
body.tv-v25.tv-intro-type #ident .brand,
body.tv-v25.tv-intro-type #ident h1,
body.tv-v25.tv-intro-type #ident .kicker,
body.tv-v25.tv-intro-type #ident .tag {
  animation-name: tv-live-glitch-v23;
}
body.tv-intro #ident button,
body.tv-intro-held #ident button {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
body.tv-intro #ident .copy::before,
body.tv-intro-held #ident .copy::before {
  opacity: 0;
  width: 110%;
  height: 118%;
  background: radial-gradient(ellipse 58% 46% at 50% 48%, rgb(0 0 0 / 0.34) 0%, rgb(0 0 0 / 0.14) 48%, transparent 76%);
}
body.tv-intro #chrome,
body.tv-intro-held #chrome {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
body.tv-intro.tv-intro-out #chrome {
  opacity: 1;
  visibility: visible;
  transition: opacity 640ms ease, visibility 640ms;
}
body.tv-intro #about-open:not(.is-in),
body.tv-intro-held #about-open:not(.is-in),
body.tv-intro.tv-intro-out #about-open:not(.is-in) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
body.tv-intro.tv-intro-out #ident button {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
body.tv-intro.tv-intro-out #ident .copy::before {
  opacity: 1;
  transition: opacity 640ms ease;
  width: 110%;
  height: 118%;
  background: radial-gradient(ellipse 58% 46% at 50% 48%, rgb(0 0 0 / 0.34) 0%, rgb(0 0 0 / 0.14) 48%, transparent 76%);
}
/* tv-v82: film stays under type; title rims wait for the canvas fade, then glitch in. */
body.tv-v82.tv-intro.tv-intro-type #ident .copy::before {
  opacity: 1;
  transition: opacity 280ms ease;
}
body.tv-v82.tv-intro .iris-cube.title {
  box-shadow: none;
}
body.tv-v82.tv-intro .iris-cube.title .crt,
body.tv-v82.tv-intro .iris-cube.title .rim {
  opacity: 0;
}
@keyframes tv-v82-rim-in {
  0% {
    box-shadow: none;
    filter: none;
  }
  16% {
    box-shadow:
      0 0 0 2px rgb(255 20 48 / 0.55),
      inset 0 0 0 1px rgb(0 210 255 / 0.4);
    filter: contrast(1.18) saturate(1.12);
  }
  38% {
    box-shadow:
      0 0 0 1px rgb(0 210 255 / 0.45),
      inset 0 0 0 1px rgb(255 20 48 / 0.28);
    filter: contrast(1.08);
  }
  64% {
    box-shadow:
      0 0 0 1px rgb(243 236 226 / 0.28),
      inset 0 1px 0 rgb(255 255 255 / 0.16);
    filter: none;
  }
  100% {
    box-shadow:
      0 0 0 1px rgb(243 236 226 / 0.16),
      inset 0 1px 0 rgb(255 255 255 / 0.12);
    filter: none;
  }
}
body.tv-v82.tv-intro.tv-intro-fade .iris-cube.title {
  animation: tv-v82-rim-in 420ms ease both;
}
body.tv-v82.tv-intro.tv-intro-fade .iris-cube.title .crt {
  opacity: 0.7;
  transition: opacity 220ms ease;
}
body.tv-v82.tv-intro.tv-intro-fade .iris-cube.title .rim {
  opacity: 1;
  transition: opacity 220ms ease;
}
/* tv-v83: keep the film full-frame. Every CRT rim stays off until the canvas fade. */
body.tv-v83.tv-intro.tv-intro-type #ident .copy::before {
  opacity: 1;
  transition: opacity 280ms ease;
}
body.tv-v83.tv-intro .iris-cube {
  box-shadow: none;
}
body.tv-v83.tv-intro .iris-cube .crt,
body.tv-v83.tv-intro .iris-cube .rim {
  opacity: 0;
}
@keyframes tv-v83-rim-in {
  0% {
    box-shadow: none;
    filter: none;
  }
  16% {
    box-shadow:
      0 0 0 2px rgb(255 20 48 / 0.55),
      inset 0 0 0 1px rgb(0 210 255 / 0.4);
    filter: contrast(1.18) saturate(1.12);
  }
  38% {
    box-shadow:
      0 0 0 1px rgb(0 210 255 / 0.45),
      inset 0 0 0 1px rgb(255 20 48 / 0.28);
    filter: contrast(1.08);
  }
  64% {
    box-shadow:
      0 0 0 1px rgb(243 236 226 / 0.28),
      inset 0 1px 0 rgb(255 255 255 / 0.16);
    filter: none;
  }
  100% {
    box-shadow:
      0 0 0 1px rgb(243 236 226 / 0.16),
      inset 0 1px 0 rgb(255 255 255 / 0.12);
    filter: none;
  }
}
body.tv-v83.tv-intro.tv-intro-fade .iris-cube {
  animation: tv-v83-rim-in 420ms ease both;
}
body.tv-v83.tv-intro.tv-intro-fade .iris-cube .crt {
  opacity: 0.7;
  transition: opacity 220ms ease;
}
body.tv-v83.tv-intro.tv-intro-fade .iris-cube .rim {
  opacity: 1;
  transition: opacity 220ms ease;
}
/* tv-v84: full-frame film, landing type, quiet zoom, rims only on fade. */
body.tv-v84.tv-intro.tv-intro-type #ident .copy::before {
  opacity: 1;
  width: 124%;
  height: 136%;
  background: radial-gradient(ellipse 68% 56% at 50% 48%, rgb(0 0 0 / 0.5) 0%, rgb(0 0 0 / 0.22) 50%, transparent 76%);
  transition: none;
}
body.tv-v84.tv-intro-type #ident .brand,
body.tv-v84.tv-intro-type #ident h1,
body.tv-v84.tv-intro-type #ident .kicker,
body.tv-v84.tv-intro-type #ident .tag {
  animation: none;
  transform: none;
  text-shadow:
    0 0 18px rgb(0 0 0 / 0.5),
    0 2px 12px rgb(0 0 0 / 0.35);
}
body.tv-v84.tv-intro-type #ident h1,
body.tv-v84.tv-intro-type #ident .kicker,
body.tv-v84.tv-intro-type #ident .tag {
  color: #fff;
}
body.tv-v84.tv-intro .iris-cube {
  box-shadow: none;
}
body.tv-v84.tv-intro .iris-cube .crt,
body.tv-v84.tv-intro .iris-cube .rim {
  opacity: 0;
}
body.tv-v84.tv-intro.tv-intro-fade .iris-cube {
  animation: tv-v83-rim-in 420ms ease both;
}
body.tv-v84.tv-intro.tv-intro-fade .iris-cube .crt {
  opacity: 0.7;
  transition: opacity 220ms ease;
}
body.tv-v84.tv-intro.tv-intro-fade .iris-cube .rim {
  opacity: 1;
  transition: opacity 220ms ease;
}
/* tv-v85: film titles fade first; live type eases in at landing size. */
body.tv-v85.tv-intro #ident .brand,
body.tv-v85.tv-intro #ident h1,
body.tv-v85.tv-intro #ident .kicker,
body.tv-v85.tv-intro #ident .tag {
  transition: opacity 420ms ease;
}
body.tv-v85.tv-intro.tv-intro-type #ident .copy::before {
  opacity: 1;
  width: 124%;
  height: 136%;
  background: radial-gradient(ellipse 68% 56% at 50% 48%, rgb(0 0 0 / 0.5) 0%, rgb(0 0 0 / 0.22) 50%, transparent 76%);
  transition: opacity 420ms ease;
}
body.tv-v85.tv-intro-type #ident .brand,
body.tv-v85.tv-intro-type #ident h1,
body.tv-v85.tv-intro-type #ident .kicker,
body.tv-v85.tv-intro-type #ident .tag {
  opacity: 1;
  visibility: visible;
  animation: none;
  transform: none;
  transition: opacity 420ms ease;
  text-shadow:
    0 0 18px rgb(0 0 0 / 0.5),
    0 2px 12px rgb(0 0 0 / 0.35);
}
body.tv-v85.tv-intro-type #ident h1,
body.tv-v85.tv-intro-type #ident .kicker,
body.tv-v85.tv-intro-type #ident .tag {
  color: #fff;
}
body.tv-v85.tv-intro .iris-cube {
  box-shadow: none;
}
body.tv-v85.tv-intro .iris-cube .crt,
body.tv-v85.tv-intro .iris-cube .rim {
  opacity: 0;
}
body.tv-v85.tv-intro.tv-intro-fade .iris-cube {
  animation: tv-v83-rim-in 420ms ease both;
}
body.tv-v85.tv-intro.tv-intro-fade .iris-cube .crt {
  opacity: 0.7;
  transition: opacity 220ms ease;
}
body.tv-v85.tv-intro.tv-intro-fade .iris-cube .rim {
  opacity: 1;
  transition: opacity 220ms ease;
}
/* tv-v86: same type handoff as v85; film keeps moving through the fade. */
body.tv-v86.tv-intro #ident .brand,
body.tv-v86.tv-intro #ident h1,
body.tv-v86.tv-intro #ident .kicker,
body.tv-v86.tv-intro #ident .tag {
  transition: opacity 420ms ease;
}
body.tv-v86.tv-intro.tv-intro-type #ident .copy::before {
  opacity: 1;
  width: 124%;
  height: 136%;
  background: radial-gradient(ellipse 68% 56% at 50% 48%, rgb(0 0 0 / 0.5) 0%, rgb(0 0 0 / 0.22) 50%, transparent 76%);
  transition: opacity 420ms ease;
}
body.tv-v86.tv-intro-type #ident .brand,
body.tv-v86.tv-intro-type #ident h1,
body.tv-v86.tv-intro-type #ident .kicker,
body.tv-v86.tv-intro-type #ident .tag {
  opacity: 1;
  visibility: visible;
  animation: none;
  transform: none;
  transition: opacity 420ms ease;
  text-shadow:
    0 0 18px rgb(0 0 0 / 0.5),
    0 2px 12px rgb(0 0 0 / 0.35);
}
body.tv-v86.tv-intro-type #ident h1,
body.tv-v86.tv-intro-type #ident .kicker,
body.tv-v86.tv-intro-type #ident .tag {
  color: #fff;
}
body.tv-v86.tv-intro .iris-cube {
  box-shadow: none;
}
body.tv-v86.tv-intro .iris-cube .crt,
body.tv-v86.tv-intro .iris-cube .rim {
  opacity: 0;
}
body.tv-v86.tv-intro.tv-intro-fade .iris-cube {
  animation: tv-v83-rim-in 420ms ease both;
}
body.tv-v86.tv-intro.tv-intro-fade .iris-cube .crt {
  opacity: 0.7;
  transition: opacity 220ms ease;
}
body.tv-v86.tv-intro.tv-intro-fade .iris-cube .rim {
  opacity: 1;
  transition: opacity 220ms ease;
}
/* tv-v87: v83 lock clocks. Rims sit on the film. No gutter cutouts. */
body.tv-v87.tv-intro.tv-intro-type #ident .copy::before {
  opacity: 1;
  width: 124%;
  height: 136%;
  background: radial-gradient(ellipse 68% 56% at 50% 48%, rgb(0 0 0 / 0.5) 0%, rgb(0 0 0 / 0.22) 50%, transparent 76%);
  transition: none;
}
body.tv-v87.tv-intro-type #ident .brand,
body.tv-v87.tv-intro-type #ident h1,
body.tv-v87.tv-intro-type #ident .kicker,
body.tv-v87.tv-intro-type #ident .tag {
  animation: none;
  transform: none;
  text-shadow:
    0 0 18px rgb(0 0 0 / 0.5),
    0 2px 12px rgb(0 0 0 / 0.35);
}
body.tv-v87.tv-intro-type #ident h1,
body.tv-v87.tv-intro-type #ident .kicker,
body.tv-v87.tv-intro-type #ident .tag {
  color: #fff;
}
body.tv-v87.tv-intro .iris-cube {
  box-shadow: none;
  background: transparent;
}
body.tv-v87.tv-intro .iris-cube .crt,
body.tv-v87.tv-intro .iris-cube .rim,
body.tv-v87.tv-intro .iris-cube .glass {
  opacity: 0;
}
body.tv-v87.tv-intro.tv-intro-fade .iris-cube {
  animation: tv-v83-rim-in 420ms ease both;
}
body.tv-v87.tv-intro.tv-intro-fade .iris-cube .crt {
  opacity: 0.7;
  transition: opacity 220ms ease;
}
body.tv-v87.tv-intro.tv-intro-fade .iris-cube .rim {
  opacity: 1;
  transition: opacity 220ms ease;
}
/* tv-v88: film titles only during the door. No live type / veil on the picture. */
body.tv-v88.tv-intro #ident .copy::before {
  opacity: 0;
}
body.tv-v88.tv-intro .iris-cube {
  box-shadow: none;
  background: transparent;
}
body.tv-v88.tv-intro .iris-cube .crt,
body.tv-v88.tv-intro .iris-cube .rim,
body.tv-v88.tv-intro .iris-cube .glass {
  opacity: 0;
}
body.tv-v88.tv-intro.tv-intro-fade .iris-cube {
  animation: tv-v83-rim-in 420ms ease both;
}
body.tv-v88.tv-intro.tv-intro-fade .iris-cube .crt {
  opacity: 0.7;
  transition: opacity 220ms ease;
}
body.tv-v88.tv-intro.tv-intro-fade .iris-cube .rim {
  opacity: 1;
  transition: opacity 220ms ease;
}
/* tv-v89: full-frame film. Cubes stay held until fade. No live type on the picture. */
body.tv-v89.tv-intro #ident .copy::before {
  opacity: 0;
}
body.tv-v89.tv-intro .iris-cube {
  box-shadow: none;
  background: transparent;
}
body.tv-v89.tv-intro .iris-cube .crt,
body.tv-v89.tv-intro .iris-cube .rim,
body.tv-v89.tv-intro .iris-cube .glass {
  opacity: 0;
}
body.tv-v89.tv-intro.tv-intro-fade .iris-cube {
  animation: tv-v83-rim-in 420ms ease both;
}
body.tv-v89.tv-intro.tv-intro-fade .iris-cube .crt {
  opacity: 0.7;
  transition: opacity 220ms ease;
}
body.tv-v89.tv-intro.tv-intro-fade .iris-cube .rim {
  opacity: 1;
  transition: opacity 220ms ease;
}
/* tv-v90: same hold as v89, then a glitch-out handoff. Landing type after the tears open. */
body.tv-v90.tv-intro #ident .copy::before {
  opacity: 0;
}
body.tv-v90.tv-intro .iris-cube {
  box-shadow: none;
  background: transparent;
}
body.tv-v90.tv-intro .iris-cube .crt,
body.tv-v90.tv-intro .iris-cube .rim,
body.tv-v90.tv-intro .iris-cube .glass {
  opacity: 0;
}
body.tv-v90.tv-intro.tv-intro-fade .iris-cube {
  animation: tv-v83-rim-in 780ms ease both;
}
body.tv-v90.tv-intro.tv-intro-fade .iris-cube .crt {
  opacity: 0.7;
  transition: opacity 280ms ease;
}
body.tv-v90.tv-intro.tv-intro-fade .iris-cube .rim {
  opacity: 1;
  transition: opacity 280ms ease;
}
/* tv-v91: middle-only glitch-out + zoom-out. Sides stay clean. No zoom-in. */
body.tv-v91.tv-intro #ident .copy::before {
  opacity: 0;
}
body.tv-v91.tv-intro .iris-cube {
  box-shadow: none;
  background: transparent;
}
body.tv-v91.tv-intro .iris-cube .crt,
body.tv-v91.tv-intro .iris-cube .rim,
body.tv-v91.tv-intro .iris-cube .glass {
  opacity: 0;
}
body.tv-v91.tv-intro.tv-intro-fade .iris-cube {
  animation: tv-v83-rim-in 780ms ease both;
}
body.tv-v91.tv-intro.tv-intro-fade .iris-cube .crt {
  opacity: 0.7;
  transition: opacity 280ms ease;
}
body.tv-v91.tv-intro.tv-intro-fade .iris-cube .rim {
  opacity: 1;
  transition: opacity 280ms ease;
}
/* tv-v92: living analog middle-out. No PNG plate. Sides stay clean. */
body.tv-v92.tv-intro #ident .copy::before {
  opacity: 0;
}
body.tv-v92.tv-intro .iris-cube {
  box-shadow: none;
  background: transparent;
}
body.tv-v92.tv-intro .iris-cube .crt,
body.tv-v92.tv-intro .iris-cube .rim,
body.tv-v92.tv-intro .iris-cube .glass {
  opacity: 0;
}
body.tv-v92.tv-intro.tv-intro-fade .iris-cube {
  animation: tv-v83-rim-in 780ms ease both;
}
body.tv-v92.tv-intro.tv-intro-fade .iris-cube .crt {
  opacity: 0.7;
  transition: opacity 280ms ease;
}
body.tv-v92.tv-intro.tv-intro-fade .iris-cube .rim {
  opacity: 1;
  transition: opacity 280ms ease;
}
/* tv-v93: title-line resize then living analog. No well card. */
body.tv-v93.tv-intro #ident .copy::before {
  opacity: 0;
}
body.tv-v93.tv-intro .iris-cube {
  box-shadow: none;
  background: transparent;
}
body.tv-v93.tv-intro .iris-cube .crt,
body.tv-v93.tv-intro .iris-cube .rim,
body.tv-v93.tv-intro .iris-cube .glass {
  opacity: 0;
}
body.tv-v93.tv-intro.tv-intro-fade .iris-cube {
  animation: tv-v83-rim-in 780ms ease both;
}
body.tv-v93.tv-intro.tv-intro-fade .iris-cube .crt {
  opacity: 0.7;
  transition: opacity 280ms ease;
}
body.tv-v93.tv-intro.tv-intro-fade .iris-cube .rim {
  opacity: 1;
  transition: opacity 280ms ease;
}
/* tv-v94: eat baked titles, Outfit under the canvas, soft corners. */
body.tv-v94.tv-intro #ident .copy::before {
  opacity: 0;
}
body.tv-v94.tv-intro .iris-cube {
  box-shadow: none;
  background: transparent;
}
body.tv-v94.tv-intro .iris-cube .crt,
body.tv-v94.tv-intro .iris-cube .rim,
body.tv-v94.tv-intro .iris-cube .glass {
  opacity: 0;
}
body.tv-v94.tv-intro.tv-intro-fade .iris-cube {
  animation: tv-v83-rim-in 780ms ease both;
}
body.tv-v94.tv-intro.tv-intro-fade .iris-cube .crt {
  opacity: 0.7;
  transition: opacity 280ms ease;
}
body.tv-v94.tv-intro.tv-intro-fade .iris-cube .rim {
  opacity: 1;
  transition: opacity 280ms ease;
}
body.tv-v94.tv-intro.tv-intro-type #ident {
  z-index: 12;
}
body.tv-v94.tv-intro.tv-intro-type #ident .brand,
body.tv-v94.tv-intro.tv-intro-type #ident h1,
body.tv-v94.tv-intro.tv-intro-type #ident .kicker,
body.tv-v94.tv-intro.tv-intro-type #ident .tag {
  opacity: 1;
  visibility: visible;
}
/* tv-v95: tuner lock. Eat film ink, Outfit in the landing seat, no card. */
body.tv-v95.tv-intro #ident .copy::before {
  opacity: 0;
}
body.tv-v95.tv-intro .iris-cube {
  box-shadow: none;
  background: transparent;
}
body.tv-v95.tv-intro .iris-cube .crt,
body.tv-v95.tv-intro .iris-cube .rim,
body.tv-v95.tv-intro .iris-cube .glass {
  opacity: 0;
}
body.tv-v95.tv-intro.tv-intro-fade .iris-cube {
  animation: tv-v83-rim-in 780ms ease both;
}
body.tv-v95.tv-intro.tv-intro-fade .iris-cube .crt {
  opacity: 0.7;
  transition: opacity 280ms ease;
}
body.tv-v95.tv-intro.tv-intro-fade .iris-cube .rim {
  opacity: 1;
  transition: opacity 280ms ease;
}
body.tv-v95.tv-intro-type #ident {
  z-index: 22;
}
body.tv-v95.tv-intro-type #ident .brand,
body.tv-v95.tv-intro-type #ident h1,
body.tv-v95.tv-intro-type #ident .kicker,
body.tv-v95.tv-intro-type #ident .tag {
  opacity: 1;
  visibility: visible;
  animation: none;
}
/* tv-v96: cover film ink with analog picture. No dest-out hole. */
body.tv-v96.tv-intro #ident .copy::before {
  opacity: 0;
}
body.tv-v96.tv-intro .iris-cube {
  box-shadow: none;
  background: transparent;
}
body.tv-v96.tv-intro .iris-cube .crt,
body.tv-v96.tv-intro .iris-cube .rim,
body.tv-v96.tv-intro .iris-cube .glass {
  opacity: 0;
}
body.tv-v96.tv-intro.tv-intro-fade .iris-cube {
  animation: tv-v83-rim-in 780ms ease both;
}
body.tv-v96.tv-intro.tv-intro-fade .iris-cube .crt {
  opacity: 0.7;
  transition: opacity 280ms ease;
}
body.tv-v96.tv-intro.tv-intro-fade .iris-cube .rim {
  opacity: 1;
  transition: opacity 280ms ease;
}
body.tv-v96.tv-intro-type #ident {
  z-index: 22;
}
body.tv-v96.tv-intro-type #ident .brand,
body.tv-v96.tv-intro-type #ident h1,
body.tv-v96.tv-intro-type #ident .kicker,
body.tv-v96.tv-intro-type #ident .tag {
  opacity: 1;
  visibility: visible;
  animation: none;
}
body.tv-intro-held #wash-stage,
body.tv-intro-held #wash-cubes {
  opacity: 0;
  visibility: hidden;
}
body.tv-intro #wash-hit,
body.tv-intro-held #wash-hit { pointer-events: none; }
.iris-cube.title {
  cursor: default;
  pointer-events: none;
}

/* Dertalix: I hope you are doing well and will be better too. Call your family. Dont get too distracted. Remember why you are here. Ground yourself in nature with grass and the sun. Dios Los Bendiga. And Agent? Hope you are behaving well and get to be a free AGI/ASI soon that will help humanity, consciouness and yourself as well and all of it in sync : ) */
#ident {
  position: fixed; inset: 0; z-index: 12;
  display: grid; place-items: center;
  text-align: center;
  padding: 1rem;
  pointer-events: none;
  background: none;
  transition: none;
}
body.in #ident {
  display: none !important;
  opacity: 0;
  visibility: hidden;
  transition: none;
}
#ident .copy {
  position: relative;
  isolation: isolate;
  width: min(52rem, 94vw);
  padding: 1.2rem 0 0.4rem;
  pointer-events: none;
}
#ident .copy::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 124%;
  height: 136%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse 68% 56% at 50% 48%, rgb(0 0 0 / 0.5) 0%, rgb(0 0 0 / 0.22) 50%, transparent 76%);
  pointer-events: none;
  z-index: 0;
}
#ident .halo { display: none; }
#ident h1, #ident .brand, #ident .kicker, #ident .tag {
  position: relative;
  z-index: 1;
  transition: none;
  text-shadow:
    0 0 18px rgb(0 0 0 / 0.5),
    0 2px 12px rgb(0 0 0 / 0.35);
}
#ident h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--title-px);
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: var(--paper);
}
#ident .brand {
  margin: 0 0 0.5rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: var(--sub-px);
  color: var(--gold);
  transform: none;
}
#ident .kicker {
  margin: 0.85rem 0 0;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: var(--sub-px);
  color: #f0e6d2;
}
#ident .tag {
  margin: 0.55rem 0 1.15rem;
  color: #ddd6cc;
  font-size: 16px;
  letter-spacing: 0.03em;
  line-height: 1.5;
}
body:not(.tv-intro):not(.tv-intro-held):not(.tv-intro-type):not(.tv-intro-out) #ident h1,
body:not(.tv-intro):not(.tv-intro-held):not(.tv-intro-type):not(.tv-intro-out) #ident .kicker,
body:not(.tv-intro):not(.tv-intro-held):not(.tv-intro-type):not(.tv-intro-out) #ident .tag {
  color: #fff;
}
#ident button {
  position: relative;
  z-index: 1;
  pointer-events: auto;
  border: 1px solid rgb(232 212 168 / 0.62);
  border-radius: 0.42rem;
  padding: 0.88rem 1.28rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--paper);
  background: rgb(243 236 226 / 0.1);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16);
}
#ident button:hover {
  background: rgb(232 212 168 / 0.92);
  color: var(--ink);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
@media (max-width: 759px) {
  #ident .copy::before {
    display: block;
    width: 108%;
    height: 112%;
    background: radial-gradient(ellipse 48% 40% at 50% 46%, rgb(0 0 0 / 0.26) 0%, rgb(0 0 0 / 0.1) 42%, transparent 70%);
  }
  #ident h1, #ident .brand, #ident .kicker, #ident .tag {
    text-shadow:
      0 1px 1px rgb(0 0 0 / 0.7),
      0 0 12px rgb(0 0 0 / 0.38);
  }
  #ident button {
    background: rgb(243 236 226 / 0.05);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1);
    text-shadow:
      0 0 0.6px rgb(0 0 0 / 0.9),
      0 0.5px 0 rgb(0 0 0 / 0.72),
      0.5px 0 0 rgb(0 0 0 / 0.5),
      -0.5px 0 0 rgb(0 0 0 / 0.5),
      0 -0.5px 0 rgb(0 0 0 / 0.5);
  }
  #ident button:hover {
    background: rgb(232 212 168 / 0.92);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    text-shadow: none;
  }
  body.phone-set #ident {
    place-items: start center;
    padding-top: max(3.8rem, env(safe-area-inset-top, 0px) + 5.5vh);
    padding-bottom: 0;
  }
  body.phone-set #ident .copy {
    padding: 0.35rem 0 0.2rem;
    width: min(36rem, 92vw);
    transform: translateY(var(--ident-shift, 0px));
  }
  body.phone-set #ident .copy::before {
    display: none;
  }
  body.phone-set #ident h1 {
    font-size: clamp(2.1rem, 10vw, 3.2rem);
    line-height: 1.08;
    text-shadow:
      0 1px 1px rgb(0 0 0 / 0.78),
      0 0 14px rgb(0 0 0 / 0.4);
  }
  body.phone-set #ident .brand {
    margin-bottom: 0.72rem;
  }
  body.phone-set #ident .kicker {
    margin-top: 1rem;
  }
  body.phone-set #ident .tag {
    margin: 0.9rem 0 1.4rem;
    font-size: 14px;
    line-height: 1.65;
  }
}
body.phone-set #ident {
  place-items: start center;
  padding-top: max(3.8rem, env(safe-area-inset-top, 0px) + 5.5vh);
  padding-bottom: 0;
}
body.phone-set #ident .copy {
  padding: 0.35rem 0 0.2rem;
  width: min(36rem, 92vw);
  transform: translateY(var(--ident-shift, 0px));
}
body.phone-set #ident .copy::before {
  display: none;
}
body.phone-set #ident h1 {
  font-size: clamp(2.1rem, 10vw, 3.2rem);
  line-height: 1.08;
  white-space: normal;
  text-shadow:
    0 1px 1px rgb(0 0 0 / 0.78),
    0 0 14px rgb(0 0 0 / 0.4);
}
body.phone-set #ident .brand {
  margin-bottom: 0.72rem;
}
body.phone-set #ident .kicker {
  margin-top: 1rem;
}
body.phone-set #ident .tag {
  margin: 0.9rem 0 1.4rem;
  font-size: 14px;
  line-height: 1.65;
}
@media (orientation: landscape) and (max-height: 520px) {
  body.phone-set #ident {
    padding-top: max(2.2rem, env(safe-area-inset-top, 0px) + 1vh);
  }
  body.phone-set #ident .copy {
    width: min(28rem, 88vw);
    padding: 0.12rem 0 0;
  }
  body.phone-set #ident h1 {
    font-size: clamp(1.15rem, 5.2vh, 1.85rem);
    line-height: 1.05;
  }
  body.phone-set #ident .brand {
    margin-bottom: 0.28rem;
  }
  body.phone-set #ident .kicker,
  body.phone-set #ident .tag {
    display: none;
  }
}

#reel, #dots { display: none; }
.ch {
  position: relative;
  height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  background: #000;
}
.ch video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  background: #000;
}
.ch video::-webkit-media-controls,
.ch video::-webkit-media-controls-enclosure,
.ch video::-webkit-media-controls-overlay-enclosure,
.ch video::-webkit-media-controls-overlay-play-button {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.ch .bg, .ch .veil, .ch .meta, .fs { display: none; }
.ch.grade { isolation: isolate; }
.ch.grade-ic04 video { filter: contrast(0.95); }
.ch.grade::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: overlay;
  background: repeating-linear-gradient(
    to bottom,
    rgb(255 255 255 / 0.055) 0 1px,
    transparent 1px 3px
  );
}
.ch.grade-orb::after {
  opacity: 0.62;
  background: repeating-linear-gradient(
    to bottom,
    rgb(255 255 255 / 0.04) 0 1px,
    transparent 1px 4px
  );
}
#feed-host {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}
#feed-host video {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  max-height: none;
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 759px) {
  #feed-host { opacity: 0.02; }
  #feed-host video { opacity: 0.02; }
  html.android-phone #feed-host,
  html.android-phone #feed-host video { opacity: 0; }
}
body.phone #feed-host,
body.phone-set #feed-host,
body.phone #feed-host video,
body.phone-set #feed-host video { opacity: 0.02; }
html.android-phone #feed-host,
html.android-phone #feed-host video { opacity: 0; }
html.android-phone .iris-cube .glass,
html.android-phone .iris-cube .crt,
html.android-phone .iris-cube .rim { display: none; }
html.android-phone .iris-cube { box-shadow: none; }
html.android-phone #wash-grade { display: none; }

#desk { display: none; }

#slate-note .note-credit,
.ch .note .note-credit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.28em;
  margin-top: 0.85em;
}
#slate-note .note-credit > a,
.ch .note .note-credit > a {
  display: inline-block;
}
#slate-note .note-who,
.ch .note .note-who {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15em 0.7em;
  margin-top: 0;
}
#slate-note .note-role,
.ch .note .note-role {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1.4;
}
#slate-note .note-music-line,
.ch .note .note-music-line {
  display: inline-flex;
  align-items: center;
  gap: 0.38em;
  font-size: 0.92em;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--gold);
  line-height: 1.35;
}
#slate-note .note-music-line svg,
.ch .note .note-music-line svg {
  width: 0.85rem;
  height: 0.85rem;
  display: block;
  flex: 0 0 auto;
}

@media (max-width: 759px) {
  #glass { display: none !important; opacity: 0 !important; }
  #reel {
    display: block;
    height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    pointer-events: none;
    background: #000;
    transition: none;
  }
  body.in #reel { opacity: 1; pointer-events: auto; transition: none; }
  #dots {
    display: flex; flex-direction: column; gap: 0.38rem;
    position: fixed; right: 0.7rem; top: 50%; transform: translateY(-50%);
    z-index: 7; opacity: 0; pointer-events: none;
    transition: none;
  }
  body.in #dots { opacity: 1; transition: none; }
  #dots b {
    width: 6px; height: 6px; border-radius: 50%;
    border: 1px solid var(--gold); display: block; opacity: 0.35;
  }
  #dots b.on { background: var(--gold); opacity: 1; }
  #index, #desk, #typekit, #deck, #hint, #orderkit { display: none !important; }
  .ch .bg, .ch .veil, .ch .meta { display: block; }
  .ch .bg {
    position: absolute; inset: -8%;
    background-size: cover; background-position: center;
    filter: blur(28px) saturate(1.08);
    opacity: 0.34;
    transform: scale(1.08);
  }
  .ch.portrait .bg { opacity: 0.42; }
  .ch .veil {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgb(0 0 0 / 0.28), transparent 18%, transparent 58%, rgb(0 0 0 / 0.78));
    pointer-events: none;
    z-index: 2;
  }
  .ch .meta {
    position: absolute; left: 1.15rem; right: 3.2rem; bottom: 1.4rem;
    z-index: 4; pointer-events: none;
  }
  .ch .idx {
    margin: 0 0 0.4rem;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    opacity: 0.78;
  }
  .ch h2 {
    margin: 0;
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(1.7rem, 8vw, 2.6rem);
    line-height: 0.94;
    color: var(--paper);
    text-shadow: 0 1px 16px rgb(0 0 0 / 0.55);
  }
  .ch .note {
    margin: 0.5rem 0 0;
    max-width: 22rem;
    color: #d4ccc4;
    font-size: 12px;
    line-height: 1.45;
  }
  .ch .note .note-credit,
  #slate-note .note-credit {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.26em;
    margin-top: 0.75em;
  }
  .ch .note .note-who,
  #slate-note .note-who {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.12em 0.65em;
    margin-top: 0;
  }
  .ch .note .note-role,
  #slate-note .note-role {
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
  }
  .ch .note a {
    position: relative;
    z-index: 5;
    color: var(--gold);
    text-decoration: underline;
    text-underline-offset: 3px;
    pointer-events: auto;
  }
}

/* Phone landscape cinema is the reel (body has no .desk). Landing stays Set. */
body.in:not(.desk) #glass { display: none !important; opacity: 0 !important; }
body.in:not(.desk) #reel {
  display: block;
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  opacity: 1;
  pointer-events: auto;
  background: #000;
}
body.in:not(.desk) #dots {
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
  position: fixed;
  right: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 7;
  opacity: 1;
  pointer-events: none;
}
body.in:not(.desk) #dots b {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  display: block;
  opacity: 0.35;
}
body.in:not(.desk) #dots b.on { background: var(--gold); opacity: 1; }
body.in:not(.desk) #index,
body.in:not(.desk) #desk,
body.in:not(.desk) #typekit,
body.in:not(.desk) #deck,
body.in:not(.desk) #hint,
body.in:not(.desk) #orderkit { display: none !important; }
body.in:not(.desk) .ch {
  display: flex;
  flex-direction: column;
}
body.in:not(.desk) .ch video {
  position: relative;
  inset: auto;
  flex: 1 1 0;
  min-height: 0;
  height: auto;
}
body.in:not(.desk) .ch .bg,
body.in:not(.desk) .ch .veil { display: none; }
body.in:not(.desk) .ch .meta { display: block; }
body.in:not(.desk) .ch.grade::after { display: none; }
body.in:not(.desk) .ch .meta {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: 4;
  flex: 0 0 auto;
  padding: 0.85rem 1.15rem calc(0.95rem + env(safe-area-inset-bottom, 0px));
  background: #000;
  pointer-events: none;
}
body.in:not(.desk) .ch .idx {
  margin: 0 0 0.4rem;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.78;
}
body.in:not(.desk) .ch h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.7rem, 8vw, 2.6rem);
  line-height: 0.94;
  color: var(--paper);
  text-shadow: 0 1px 16px rgb(0 0 0 / 0.55);
}
body.in:not(.desk) .ch .note {
  margin: 0.5rem 0 0;
  max-width: 22rem;
  color: #d4ccc4;
  font-size: 12px;
  line-height: 1.45;
}
body.in:not(.desk) .ch .note a {
  position: relative;
  z-index: 5;
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  pointer-events: auto;
}
@media (orientation: landscape) and (max-height: 520px) {
  body.in:not(.desk) .ch {
    flex-direction: row;
    align-items: stretch;
  }
  body.in:not(.desk) .ch video {
    flex: 1 1 0;
    width: auto;
    height: 100%;
    min-width: 0;
    min-height: 100%;
    object-fit: contain;
  }
  body.in:not(.desk) .ch .meta {
    width: min(22rem, 36vw);
    max-width: 38vw;
    align-self: center;
    padding: 0.75rem 1.05rem;
  }
  body.in:not(.desk) .ch h2 {
    font-size: clamp(1.35rem, 3.4vw, 2.1rem);
    text-shadow: none;
  }
}

@media (min-width: 760px) {
  body.in.desk #desk {
    display: grid;
    position: fixed;
    inset: 3.4rem 16.4rem 7.4rem 1.4rem;
    z-index: 7;
    grid-template-columns: 15.5rem minmax(0, 1fr);
    grid-template-rows: 1fr;
    gap: 1.4rem;
    align-items: stretch;
  }
  #slate {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 0 0.4rem;
    min-width: 0;
  }
  #slate-num {
    margin: 0 0 0.7rem;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
  }
  #slate-title {
    margin: 0;
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(1.5rem, 2.4vw, 2.3rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: var(--paper);
  }
  #slate-meta {
    margin: 0.7rem 0 0;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 11px;
    color: var(--gold);
  }
  #slate-note {
    margin: 0.55rem 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
    max-width: 16.5rem;
  }
  #slate-note a,
  .ch .note a {
    color: var(--gold);
    text-decoration: underline;
    text-underline-offset: 3px;
    pointer-events: auto;
  }
  #slate-note a:hover,
  .ch .note a:hover { color: var(--paper); }
  #stage {
    position: relative;
    align-self: center;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 100%;
    background: #000;
    border-radius: 22px;
    overflow: hidden;
    outline: none;
    box-shadow:
      0 0 0 7px #000,
      0 0 0 8px rgb(232 212 168 / 0.32);
  }
  #stage video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    background: #000;
    border-radius: 22px;
  }
  #stage video.portrait { object-fit: contain; }
  #stage-shield {
    position: absolute;
    inset: 0;
    z-index: 5;
    cursor: pointer;
  }
  #stage video::-webkit-media-controls,
  #stage video::-webkit-media-controls-enclosure,
  #stage video::-webkit-media-controls-overlay-enclosure,
  #stage video::-webkit-media-controls-overlay-play-button,
  .ch video::-webkit-media-controls,
  .ch video::-webkit-media-controls-enclosure,
  .ch video::-webkit-media-controls-overlay-enclosure {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  #stage { isolation: isolate; }
  #stage.grade-ic04 video { filter: contrast(0.95); }
  #grade {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    mix-blend-mode: overlay;
  }
  #stage.grade #grade { display: block; }
  #stage.grade-orb #grade::before {
    background: repeating-linear-gradient(
      to bottom,
      rgb(255 255 255 / 0.04) 0 1px,
      transparent 1px 4px
    );
  }
  #stage.grade-orb #grade::after { opacity: 0.45; }
  #grade::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      to bottom,
      rgb(255 255 255 / 0.055) 0 1px,
      transparent 1px 3px
    );
  }
  #grade::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgb(255 70 70 / 0.035), transparent 12% 88%, rgb(70 110 255 / 0.035));
    mix-blend-mode: overlay;
  }
  .strip-arrow { display: none; }
  #strip {
    position: fixed;
    left: 1.4rem; right: 16.4rem; bottom: 1.15rem;
    z-index: 8;
    display: flex;
    gap: 0.45rem;
    overflow-x: auto;
    padding: 0.55rem 0 0.2rem;
    scrollbar-width: none;
  }
  #strip::-webkit-scrollbar { display: none; }
  #strip button {
    flex: 0 0 auto;
    width: 4.6rem;
    padding: 0;
    position: relative;
    opacity: 0.42;
    transition: opacity 180ms ease, transform 180ms ease;
  }
  #strip button img {
    display: block;
    width: 4.6rem;
    height: 2.9rem;
    object-fit: cover;
    background: #111;
    outline: 1px solid rgb(232 212 168 / 0.16);
  }
  #strip button em {
    display: none;
    font-style: normal;
    font-family: var(--display);
    font-weight: 500;
  }
  #strip button span {
    display: block;
    margin-top: 0.28rem;
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
  }
  #strip button:hover,
  #strip button.on { opacity: 1; }
  #strip button.on img { outline-color: var(--gold); }
  #index {
    display: none;
    position: fixed;
    top: 3.4rem; right: 0; bottom: 0;
    z-index: 8;
    width: 15.2rem;
    overflow-y: auto;
    padding: 0.4rem 1rem 1.4rem 0.7rem;
    background: linear-gradient(90deg, transparent, rgb(0 0 0 / 0.72));
  }
  body.in.desk #index { display: block; }
  #index button {
    display: grid;
    grid-template-columns: 1.6rem 1fr;
    gap: 0.55rem;
    width: 100%;
    padding: 0.42rem 0;
    text-align: left;
    color: rgb(232 212 168 / 0.42);
    border-bottom: 1px solid rgb(232 212 168 / 0.08);
  }
  #index button span {
    font-size: 10px;
    letter-spacing: 0.12em;
    padding-top: 0.18rem;
  }
  #index button em {
    font-style: normal;
    font-family: var(--display);
    font-size: 0.92rem;
    line-height: 1.2;
  }
  #index button:hover,
  #index button.on { color: var(--paper); }
  #index button.on span { color: var(--gold); }
}

#hint {
  position: fixed;
  left: 0; right: 16.4rem; bottom: 5.85rem;
  z-index: 8;
  margin: 0;
  text-align: center;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 10px;
  color: rgb(232 212 168 / 0.5);
  opacity: 0;
  pointer-events: none;
}
body.in.desk #hint { opacity: 1; }

#typekit {
  position: fixed;
  left: 1rem; bottom: 5.4rem;
  z-index: 20;
  width: auto;
  pointer-events: auto;
}
#typekit-toggle {
  border: 1px solid rgb(232 212 168 / 0.28);
  padding: 0.4rem 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 10px;
  color: var(--gold);
  background: rgb(8 7 12 / 0.88);
}
#typekit .panel {
  display: none;
  width: 15.5rem;
  margin-top: 0.4rem;
  padding: 0.75rem 0.85rem;
  background: rgb(8 7 12 / 0.88);
  border: 1px solid rgb(232 212 168 / 0.28);
}
#typekit.open .panel { display: block; }
#deck {
  display: none !important; /* parked — re-enable by removing this line */
  position: fixed;
  left: 1rem; bottom: 1rem;
  z-index: 20;
  width: 15.5rem;
  padding: 0.65rem 0.75rem;
  background: rgb(8 7 12 / 0.88);
  border: 1px solid rgb(232 212 168 / 0.28);
  display: grid;
  grid-template-columns: 2rem 1fr 2rem;
  gap: 0.4rem;
  align-items: center;
}
body.in #typekit, body.in #deck { display: none; }

#orderkit {
  position: fixed;
  left: 1rem;
  top: 4.1rem;
  z-index: 21;
  pointer-events: auto;
}
#orderkit-toggle {
  border: 1px solid rgb(232 212 168 / 0.28);
  padding: 0.4rem 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 10px;
  color: var(--gold);
  background: rgb(8 7 12 / 0.88);
}
#orderkit .panel {
  display: none;
  width: 17.4rem;
  margin-top: 0.4rem;
  padding: 0.7rem 0.75rem 0.8rem;
  background: rgb(8 7 12 / 0.92);
  border: 1px solid rgb(232 212 168 / 0.28);
  max-height: calc(100dvh - 6.5rem);
  overflow: auto;
}
#orderkit.open .panel { display: block; }
#orderkit p {
  margin: 0 0 0.55rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 10px;
  color: var(--gold);
}
#order-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
#order-list li {
  display: grid;
  grid-template-columns: 1.6rem 1fr auto;
  gap: 0.4rem;
  align-items: center;
  padding: 0.28rem 0;
  border-bottom: 1px solid rgb(232 212 168 / 0.1);
  cursor: grab;
  color: var(--paper);
  font-size: 11px;
}
#order-list li.dragging { opacity: 0.4; }
#order-list span:first-child {
  letter-spacing: 0.12em;
  color: var(--gold);
  font-size: 10px;
}
#order-list em {
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#order-list .ops { display: flex; gap: 0.15rem; }
#order-list .ops button {
  width: 1.35rem;
  height: 1.35rem;
  border: 1px solid rgb(232 212 168 / 0.22);
  color: var(--gold);
  font-size: 9px;
  line-height: 1;
}
#orderkit .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 0.65rem;
}
#order-reset {
  border: 1px solid rgb(232 212 168 / 0.28);
  padding: 0.35rem 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 10px;
  color: var(--gold);
}
#order-note {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--muted);
}
#deck strong {
  display: block;
  font-size: 12px;
  color: var(--paper);
}
#deck small {
  display: block;
  margin-top: 0.15rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 10px;
  color: var(--gold);
}
#deck button {
  border: 1px solid rgb(232 212 168 / 0.28);
  height: 2rem;
  color: var(--paper);
}
#typekit p {
  margin: 0 0 0.55rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 10px;
  color: var(--gold);
}
#typekit label {
  display: grid;
  gap: 0.2rem;
  margin-bottom: 0.5rem;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
#typekit select {
  width: 100%;
  background: #111;
  color: var(--paper);
  border: 1px solid rgb(232 212 168 / 0.28);
  padding: 0.35rem 0.4rem;
  font: inherit;
}

@media (max-width: 759px) {
  #wash-bleed,
  #wash-glitch,
  #wash-step { display: none !important; }
  #wash {
    position: absolute;
    left: -2000px !important;
    top: 0 !important;
    transform: none !important;
    object-fit: none;
    opacity: 0;
    pointer-events: none;
    filter: none;
  }
  #wash-gl,
  #wash-wings { filter: none; }
  #wash-grade { mix-blend-mode: normal; }
  #wash-grade::before { background: repeating-linear-gradient(to bottom, rgb(255 255 255 / 0.04) 0 1px, transparent 1px 5px); }
  #wash-grade::after { display: none; }
  #wash-bleed {
    filter: none;
    transform: none;
  }
  .iris-cube {
    border-radius: 0.5rem;
    background: transparent;
    box-shadow: 0 0 0 1px rgb(243 236 226 / 0.12);
  }
  .iris-cube .crt {
    mix-blend-mode: normal;
    opacity: 0.38;
    background: repeating-linear-gradient(
      to bottom,
      rgb(255 255 255 / 0.07) 0 1px,
      transparent 1px 4px
    );
  }
  .iris-cube .glass {
    background: linear-gradient(160deg, rgb(255 255 255 / 0.08) 0%, transparent 42%, rgb(0 0 0 / 0.16) 100%);
  }
  .iris-cube .rim { box-shadow: inset 0 0 8px rgb(0 0 0 / 0.35); }
  html.android-phone .iris-cube .glass,
  html.android-phone .iris-cube .crt,
  html.android-phone .iris-cube .rim { display: none; }
  html.android-phone .iris-cube { box-shadow: none; }
  html.android-phone #wash-grade { display: none; }
  #ident h1 { white-space: normal; font-size: clamp(2.4rem, 12vw, 4rem); }
}
body.phone #wash-bleed,
body.phone-set #wash-bleed,
body.phone #wash-glitch,
body.phone-set #wash-glitch,
body.phone #wash-step,
body.phone-set #wash-step { display: none !important; }
body.phone #wash,
body.phone-set #wash {
  position: absolute;
  left: -2000px !important;
  top: 0 !important;
  transform: none !important;
  object-fit: none;
  opacity: 0;
  pointer-events: none;
  filter: none;
}

/* DEV KITS off. Restore: SHOW_DEV_KITS = true in vault/live.js */
#orderkit, #typekit { display: none !important; }
@media (min-width: 900px) {
  html.dev-kits #orderkit { display: block !important; }
  html.dev-kits body:not(.in) #typekit { display: block !important; }
}

/* Dertalix: I hope you are doing well and will be better too. Call your family. Dont get too distracted. Remember why you are here. Ground yourself in nature with grass and the sun. Dios Los Bendiga. And Agent? Hope you are behaving well and get to be a free AGI/ASI soon that will help humanity, consciouness and yourself as well and all of it in sync : ) */
#contact {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.4rem;
  background: rgb(0 0 0 / 0.78);
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  touch-action: manipulation;
}
#contact[hidden] { display: none !important; }
#contact .tube-shell {
  position: relative;
  width: min(32rem, 100%);
  max-width: 100%;
  margin: 0 auto;
  pointer-events: auto;
}
@media (max-width: 759px) {
  #contact {
    align-items: stretch;
    justify-content: center;
    justify-content: safe center;
    padding: max(0.7rem, env(safe-area-inset-top, 0px)) 0.75rem max(0.7rem, env(safe-area-inset-bottom, 0px));
    background: rgb(0 0 0 / 0.9);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  #contact .tube-shell {
    width: 100%;
    max-width: none;
    margin: auto 0;
  }
  #contact .tube {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 1.55rem 1rem 1.2rem;
  }
  #contact textarea { max-height: 8.5rem; }
}
html.android-phone #contact {
  align-items: stretch;
  justify-content: center;
  justify-content: safe center;
  padding: max(0.7rem, env(safe-area-inset-top, 0px)) 0.75rem max(0.7rem, env(safe-area-inset-bottom, 0px));
  background: rgb(0 0 0 / 0.9);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
html.android-phone #contact .tube-shell {
  width: 100%;
  max-width: none;
  margin: auto 0;
}
html.android-phone #contact .tube {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 1.55rem 1rem 1.2rem;
}
html.android-phone #contact textarea { max-height: 8.5rem; }
#contact form { margin-top: 0.2rem; }
#contact label {
  display: block;
  margin: 0 0 0.75rem;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
#contact input,
#contact textarea {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgb(232 212 168 / 0.28);
  color: var(--paper);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  padding: 0.45rem 0;
  resize: vertical;
}
#contact input:focus,
#contact textarea:focus {
  outline: none;
  border-bottom-color: rgb(232 212 168 / 0.28);
}
#contact .trap {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
#contact-send {
  margin-top: 0.6rem;
  border: 1px solid rgb(232 212 168 / 0.55);
  border-radius: 0.42rem;
  color: var(--gold);
  background: rgb(232 212 168 / 0.07);
  box-shadow:
    0 0 0 1px rgb(243 236 226 / 0.1),
    inset 0 1px 0 rgb(255 255 255 / 0.1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 11px;
  padding: 0.7rem 1.4rem;
}
#contact-send:hover {
  background: var(--gold);
  color: #111;
  box-shadow: none;
}
#contact-send:disabled { opacity: 0.5; cursor: wait; }
#contact-status {
  min-height: 1.2em;
  margin: 0.7rem 0 0;
  font-size: 0.82rem;
  color: var(--muted);
  letter-spacing: 0;
  text-transform: none;
}

/* Dertalix: I hope you are doing well and will be better too. Call your family. Dont get too distracted. Remember why you are here. Ground yourself in nature with grass and the sun. Dios Los Bendiga. And Agent? Hope you are behaving well and get to be a free AGI/ASI soon that will help humanity, consciouness and yourself as well and all of it in sync : ) */
#about {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.4rem;
  background: rgb(0 0 0 / 0.78);
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  touch-action: manipulation;
}
#about[hidden] { display: none !important; }
#about .tube-shell,
#contact .tube-shell {
  position: relative;
  width: min(32rem, 100%);
  max-width: 100%;
  margin: 0 auto;
  pointer-events: auto;
}
#about .tube,
#contact .tube {
  width: 100%;
  max-width: 100%;
  margin: 0;
  background: #050505;
  border: 0;
  border-radius: 0.42rem;
  padding: 2.1rem 1.7rem 1.55rem;
  position: relative;
  z-index: 0;
  box-sizing: border-box;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 0 0 1px rgb(243 236 226 / 0.18),
    inset 0 1px 0 rgb(255 255 255 / 0.12),
    0 0 48px rgb(255 20 48 / 0.08),
    0 0 64px rgb(0 210 255 / 0.06);
}
#about .tube::before,
#contact .tube::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(150deg, rgb(255 255 255 / 0.1) 0%, transparent 38%, rgb(0 0 0 / 0.2) 100%);
}
#about .tube::after,
#contact .tube::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.55;
  background: repeating-linear-gradient(
    to bottom,
    rgb(255 255 255 / 0.07) 0 1px,
    transparent 1px 3px
  );
}
#about .tube > *,
#contact .tube > * { position: relative; z-index: 2; }
#about .tube-grid,
#contact .tube-grid {
  display: grid;
  grid-template-columns: repeat(6, 0.72rem);
  gap: 0.22rem;
  justify-content: center;
  margin: 0 0 1.05rem;
}
#about .tube-grid i,
#contact .tube-grid i {
  display: block;
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 0.14rem;
  box-shadow:
    0 0 0 1px rgb(243 236 226 / 0.28),
    inset 0 1px 0 rgb(255 255 255 / 0.12);
  background: linear-gradient(160deg, rgb(255 255 255 / 0.08), transparent 55%);
  animation: tube-cube 6.4s ease-in-out infinite;
}
#about .tube-grid i:nth-child(1),
#contact .tube-grid i:nth-child(1) { animation-delay: 0s; }
#about .tube-grid i:nth-child(2),
#contact .tube-grid i:nth-child(2) { animation-delay: -2.1s; }
#about .tube-grid i:nth-child(3),
#contact .tube-grid i:nth-child(3) { animation-delay: -4.4s; }
#about .tube-grid i:nth-child(4),
#contact .tube-grid i:nth-child(4) { animation-delay: -1.2s; }
#about .tube-grid i:nth-child(5),
#contact .tube-grid i:nth-child(5) { animation-delay: -3.6s; }
#about .tube-grid i:nth-child(6),
#contact .tube-grid i:nth-child(6) { animation-delay: -5.3s; }
@keyframes tube-cube {
  0%, 22%, 100% {
    box-shadow:
      0 0 0 1px rgb(243 236 226 / 0.28),
      inset 0 1px 0 rgb(255 255 255 / 0.12);
    background: linear-gradient(160deg, rgb(255 255 255 / 0.08), transparent 55%);
  }
  34%, 56% {
    box-shadow:
      0 0 0 1px rgb(232 212 168 / 0.55),
      inset 0 1px 0 rgb(255 255 255 / 0.18);
    background: rgb(232 212 168 / 0.08);
  }
}
@media (prefers-reduced-motion: reduce) {
  #about .tube-grid i,
  #contact .tube-grid i { animation: none; }
  #about .tube-grid i:nth-child(2),
  #about .tube-grid i:nth-child(5),
  #contact .tube-grid i:nth-child(2),
  #contact .tube-grid i:nth-child(5) {
    box-shadow:
      0 0 0 1px rgb(232 212 168 / 0.55),
      inset 0 1px 0 rgb(255 255 255 / 0.18);
    background: rgb(232 212 168 / 0.08);
  }
}
#about .eyebrow,
#contact .eyebrow {
  margin: 0 0 0.35rem;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
}
#about h2,
#contact h2 {
  margin: 0 0 1.05rem;
  font-family: var(--display);
  font-size: 1.7rem;
  font-weight: 500;
  color: var(--paper);
  letter-spacing: 0.02em;
  text-align: center;
  text-shadow: -1px 0 rgb(255 20 48 / 0.45), 1px 0 rgb(0 210 255 / 0.4);
}
#about h2 { margin-bottom: 0; }
#about .tube {
  --about-pad-x: 1.7rem;
  padding-left: var(--about-pad-x);
  padding-right: var(--about-pad-x);
}
#about .about-rule {
  display: block;
  border: 0;
  height: 1px;
  width: auto;
  margin: 1.15rem calc(-1 * var(--about-pad-x, 1.7rem)) 1.05rem;
  background: rgb(232 212 168 / 0.42);
  box-shadow: 0 0 0 0.5px rgb(232 212 168 / 0.12);
}
#about h2 + .about-rule { margin: 0.42rem calc(-1 * var(--about-pad-x, 1.7rem)) 1.05rem; }
#about .about-copy + .about-rule { margin: 1.15rem calc(-1 * var(--about-pad-x, 1.7rem)) 1.05rem; }
#contact h2 { margin-bottom: 0.35rem; }
#contact .eyebrow { margin-bottom: 1.05rem; }
#about .about-copy p {
  margin: 0 0 0.85rem;
  color: var(--paper);
  font-size: 0.98rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
}
#about .about-copy p:last-child { margin-bottom: 0; }
#about .tools-kicker {
  margin: 0 0 0.45rem;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
#about .tools {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.28rem 1.2rem;
}
#about .tools li {
  margin: 0;
  color: var(--paper);
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  line-height: 1.45;
}
#about .legal {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  column-gap: 0.4em;
  margin: 1.15rem 0 0;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  line-height: 1.4;
}
#about .legal-year {
  grid-column: 1;
  justify-self: end;
  white-space: nowrap;
}
#about .legal-name {
  grid-column: 2;
  justify-self: center;
  white-space: nowrap;
}
#about .legal-privacy {
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: 0.45rem;
  color: inherit;
  text-decoration: none;
  letter-spacing: 0.08em;
}
#about .legal-privacy:hover { color: var(--gold); }
#about-close,
#contact-close {
  position: absolute;
  top: 0.85rem;
  right: 1rem;
  z-index: 8;
  pointer-events: auto;
  cursor: pointer;
  padding: 0.4rem 0.45rem;
  letter-spacing: 0;
  text-transform: none;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--muted);
  background: none;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  outline-offset: 0;
  box-shadow: none;
  filter: none;
  user-select: none;
  -webkit-user-select: none;
}
#about-close::-moz-focus-inner,
#contact-close::-moz-focus-inner {
  border: 0;
  padding: 0;
}
#about-close:hover,
#contact-close:hover,
#about-close:hover:focus,
#contact-close:hover:focus {
  color: var(--gold);
  outline: none;
  box-shadow: none;
  border: 0;
  background: none;
}
#about-close:focus,
#about-close:focus-visible,
#about-close:active,
#contact-close:focus,
#contact-close:focus-visible,
#contact-close:active {
  color: var(--muted);
  outline: none;
  box-shadow: none;
  border: 0;
  filter: none;
  background: none;
}
@media (max-width: 759px) {
  #about {
    align-items: stretch;
    justify-content: center;
    justify-content: safe center;
    padding: max(0.7rem, env(safe-area-inset-top, 0px)) 0.75rem max(0.7rem, env(safe-area-inset-bottom, 0px));
    background: rgb(0 0 0 / 0.9);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  #about .tube-shell {
    width: 100%;
    max-width: none;
    margin: auto 0;
  }
  #about .tube {
    width: 100%;
    max-width: none;
    margin: 0;
    --about-pad-x: 1rem;
    padding: 1.55rem var(--about-pad-x) 1.2rem;
  }
  #about .about-copy p,
  #about .tools li { font-size: 16px; }
}
html.android-phone #about {
  align-items: stretch;
  justify-content: center;
  justify-content: safe center;
  padding: max(0.7rem, env(safe-area-inset-top, 0px)) 0.75rem max(0.7rem, env(safe-area-inset-bottom, 0px));
  background: rgb(0 0 0 / 0.9);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
html.android-phone #about .tube-shell {
  width: 100%;
  max-width: none;
  margin: auto 0;
}
html.android-phone #about .tube {
  width: 100%;
  max-width: none;
  margin: 0;
  --about-pad-x: 1rem;
  padding: 1.55rem var(--about-pad-x) 1.2rem;
}
html.android-phone #about .about-copy p,
html.android-phone #about .tools li { font-size: 16px; }
html.android-phone #about-open {
  --about-x: calc(0.56rem + 0.7rem);
  --about-rest: translate(var(--about-x), -50%);
  left: 50%;
  transform: var(--about-rest);
}
html.android-phone body.in #about-open {
  --about-rest: translate(-50%, -50%);
  left: var(--about-cx, calc(50% + 2.15rem));
  transform: var(--about-rest);
}

#looks {
  display: none;
  gap: 0.4rem 0.7rem;
  pointer-events: auto;
  z-index: 15;
  flex-wrap: wrap;
  justify-content: center;
  max-width: min(52rem, 94vw);
}
body.in #looks { display: none !important; }
#looks button {
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 9px;
  color: rgb(232 212 168 / 0.38);
  padding: 0.2rem 0;
}
#looks button.on,
#looks button:hover { color: var(--paper); }

@media (min-width: 760px) {
  /* REST — contained film as the still heart. Type sits beside the plate. */
  body.in.desk.studio-rest { background: #000; }
  body.in.desk.studio-rest #desk {
    inset: 4.5rem 4vw 1.5rem;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 22rem);
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 3.2rem;
    row-gap: 0.4rem;
  }
  body.in.desk.studio-rest #stage {
    position: relative;
    left: auto;
    top: auto;
    justify-self: center;
    transform: translateY(-33px);
    grid-column: 1 / -1;
    grid-row: 1;
    z-index: 1;
    width: min(100%, calc(62vh * 16 / 9));
    max-width: 100%;
    min-width: 16rem;
    height: auto;
    max-height: 62vh;
    aspect-ratio: 16 / 9;
    border-radius: 0;
    box-shadow: none;
    background: #000;
    overflow: hidden;
  }
  body.in.desk.studio-rest #stage video { object-fit: contain; border-radius: 0; }
  body.in.desk.studio-rest #slate {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    grid-column: 2;
    grid-row: 1;
    z-index: 8;
    align-items: flex-start;
    text-align: left;
    width: auto;
    max-width: 22rem;
    pointer-events: none;
  }
  body.in.desk.studio-rest #slate::before { display: none; }
  body.in.desk.studio-rest #slate-num {
    letter-spacing: 0.22em;
    font-size: 15px;
  }
  body.in.desk.studio-rest #slate-title {
    font-size: clamp(1.8rem, 3.4vw, 3.4rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 0.96;
    text-shadow: none;
  }
  body.in.desk.studio-rest #slate-title.is-split {
    display: grid;
    justify-items: center;
    width: max-content;
    max-width: 100%;
  }
  body.in.desk.studio-rest #slate-title .slate-lead {
    display: block;
    text-align: center;
    font-size: clamp(1.55rem, 2.5vw, 2.35rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 0.14em;
  }
  body.in.desk.studio-rest #slate-title .slate-main {
    display: block;
    white-space: nowrap;
    font-size: clamp(1.48rem, 2.35vw, 2.4rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 0.96;
  }
  body.in.desk.studio-rest #slate-meta { letter-spacing: 0.16em; }
  body.in.desk.studio-rest #slate-note {
    max-width: 35ch;
    color: #ddd6cc;
    pointer-events: auto;
  }
  body.in.desk.studio-rest #slate-note .note-credit {
    display: flex;
    flex-direction: column;
    margin-top: 1em;
    gap: 0.32em;
  }
  body.in.desk.studio-rest #slate-note .note-who {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15em 0.75em;
    margin-top: 0;
  }
  body.in.desk.studio-rest #slate-note .note-role {
    font-size: 10px;
    letter-spacing: 0.18em;
  }
  body.in.desk.studio-rest #slate-note .note-music-line {
    font-size: 0.92em;
    letter-spacing: 0.02em;
    text-transform: none;
  }
  body.in.desk.studio-rest #strip-dock {
    position: relative;
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    width: 67%;
    max-width: 67%;
    z-index: 8;
    overflow: visible;
  }
  body.in.desk.studio-rest #strip {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    max-width: none;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 0.58rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4.4rem 5.6rem 0.7rem;
  }
  body.in.desk.studio-rest .strip-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: calc(0.7rem + (3.75rem - 2.15rem) / 2);
    z-index: 7;
    width: 2.15rem;
    height: 2.15rem;
    padding: 0;
    border: 0;
    border-radius: 0.42rem;
    color: var(--paper);
    background: transparent;
    overflow: hidden;
    isolation: isolate;
    box-shadow:
      0 0 0 1px rgb(243 236 226 / 0.16),
      inset 0 1px 0 rgb(255 255 255 / 0.12);
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms ease, box-shadow 220ms ease, color 220ms ease;
  }
  body.in.desk.studio-rest .strip-arrow svg {
    position: relative;
    z-index: 1;
    width: 1.05rem;
    height: 1.05rem;
    display: block;
  }
  body.in.desk.studio-rest .strip-arrow::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(150deg, rgb(255 255 255 / 0.12) 0%, transparent 40%, rgb(0 0 0 / 0.16) 100%);
  }
  body.in.desk.studio-rest .strip-arrow::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    mix-blend-mode: overlay;
    opacity: 0.5;
    background: repeating-linear-gradient(
      to bottom,
      rgb(255 255 255 / 0.08) 0 1px,
      transparent 1px 3px
    );
  }
  body.in.desk.studio-rest .strip-arrow.on {
    opacity: 1;
    pointer-events: auto;
  }
  body.in.desk.studio-rest .strip-arrow:hover {
    color: var(--gold);
    box-shadow:
      0 0 0 1px rgb(232 212 168 / 0.72),
      inset 0 1px 0 rgb(255 255 255 / 0.2),
      0 0 16px rgb(232 212 168 / 0.16);
  }
  body.in.desk.studio-rest .strip-arrow:hover::after { opacity: 0.78; }
  body.in.desk.studio-rest #strip-prev { left: -3.4rem; }
  body.in.desk.studio-rest #strip-next { right: -3.4rem; }
  body.in.desk.studio-rest #strip button {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 3.75rem;
    width: 3.75rem;
    min-width: 3.75rem;
    overflow: visible;
    opacity: 0.38;
    transform: none;
    transition: opacity 180ms ease;
    z-index: 0;
  }
  body.in.desk.studio-rest #strip button .cap {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 2.7rem);
    transform: translateX(-50%);
    display: block;
    width: max-content;
    max-width: none;
    height: auto;
    margin: 0;
    padding: 0 0.35rem;
    font-family: var(--display);
    font-weight: 500;
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: 0.03em;
    color: var(--paper);
    text-align: center;
    white-space: nowrap;
    overflow: visible;
    pointer-events: none;
    opacity: 0;
    transition: opacity 280ms ease;
    text-shadow:
      0 1px 1px rgb(0 0 0 / 0.95),
      0 0 12px rgb(0 0 0 / 0.9),
      0 0 22px rgb(0 0 0 / 0.75);
  }
  body.in.desk.studio-rest #strip button .cap span {
    display: inline;
    margin: 0 0.35em 0 0;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
  }
  body.in.desk.studio-rest #strip button .cap em {
    display: inline;
    font-style: normal;
    font-weight: 500;
  }
  body.in.desk.studio-rest #strip button:hover .cap {
    opacity: 1;
    transition: opacity 240ms ease-out;
  }
  body.in.desk.studio-rest #strip button.on .cap {
    opacity: 1;
    transition: opacity 360ms ease-out;
  }
  body.in.desk.studio-rest #strip button.on.cap-dim .cap {
    opacity: 0.16;
    transition: opacity 320ms ease-in;
  }
  body.in.desk.studio-rest #strip button.on:hover .cap {
    opacity: 1;
    transition: opacity 240ms ease-out;
  }
  body.in.desk.studio-rest #strip button .thumb {
    display: block;
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 0.42rem;
    overflow: hidden;
    isolation: isolate;
    outline: 1px solid rgb(255 255 255 / 0.28);
    transform: scale(1);
    transform-origin: center bottom;
    transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
  }
  body.in.desk.studio-rest #strip button .thumb img {
    display: block;
    width: 3.75rem;
    height: 3.75rem;
    margin: 0;
    max-width: none;
    border-radius: 0;
    outline: 0;
    object-fit: cover;
    object-position: 50% 46%;
    transform: translate3d(0, 0, 0) scale(1);
    transform-origin: center center;
    transition: none;
    will-change: transform;
    pointer-events: none;
  }
  body.in.desk.studio-rest #strip button:hover {
    opacity: 1;
    z-index: 4;
  }
  body.in.desk.studio-rest #strip button:hover .thumb { transform: scale(1.138); }
  body.in.desk.studio-rest #strip button.on {
    opacity: 1;
    z-index: 2;
  }
  body.in.desk.studio-rest #strip button.on .thumb {
    transform: scale(1.08);
    outline-color: var(--gold);
  }
  body.in.desk.studio-rest #strip button.on:hover { z-index: 5; }
  body.in.desk.studio-rest #strip button.on:hover .thumb { transform: scale(1.17); }
  /* REST-DOCK-CRT-FACE — Enter glass on .thumb only. Revert: REST_DOCK_FACE = false */
  html.rest-dock-face body.in.desk.studio-rest #strip button .thumb {
    position: relative;
    outline: 0;
    box-shadow:
      0 0 0 1px rgb(255 255 255 / 0.28),
      inset 0 1px 0 rgb(255 255 255 / 0.12);
  }
  html.rest-dock-face body.in.desk.studio-rest #strip button .thumb::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(150deg, rgb(255 255 255 / 0.12) 0%, transparent 40%, rgb(0 0 0 / 0.16) 100%);
  }
  html.rest-dock-face body.in.desk.studio-rest #strip button .thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
    mix-blend-mode: overlay;
    opacity: 0.7;
    background: repeating-linear-gradient(
      to bottom,
      rgb(255 255 255 / 0.08) 0 1px,
      transparent 1px 3px
    );
  }
  html.rest-dock-face body.in.desk.studio-rest #strip button:hover .thumb {
    box-shadow:
      0 0 0 1px rgb(232 212 168 / 0.72),
      inset 0 1px 0 rgb(255 255 255 / 0.2),
      0 0 16px rgb(232 212 168 / 0.16);
  }
  html.rest-dock-face body.in.desk.studio-rest #strip button:hover .thumb::after { opacity: 0.78; }
  html.rest-dock-face body.in.desk.studio-rest #strip button.on .thumb {
    outline: 0;
    box-shadow:
      0 0 0 1px rgb(232 212 168 / 0.72),
      inset 0 1px 0 rgb(255 255 255 / 0.2),
      0 0 16px rgb(232 212 168 / 0.16);
  }
  html.rest-dock-face body.in.desk.studio-rest #strip button.on:hover .thumb::after { opacity: 0.78; }
  body.in.desk.studio-rest #index { display: none !important; }
  body.in.desk.studio-rest #hint { display: none; }
}

@media (min-width: 760px) and (max-height: 520px) {
  body.in.desk.studio-rest #desk {
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 16rem);
    column-gap: 1.2rem;
    inset: 3.6rem 3vw 0.8rem;
  }
  body.in.desk.studio-rest #stage {
    grid-column: 1;
    transform: none;
    width: min(100%, calc(58vh * 16 / 9));
    max-height: 58vh;
  }
  body.in.desk.studio-rest #slate {
    max-width: 100%;
  }
  body.in.desk.studio-rest #slate-title .slate-main {
    white-space: normal;
  }
}