:root {
  --green: #6bf470;
  --blue: #0734cb;
  --cyan: #52d7fa;
  --ink: #101b20;
  --display: Poppins, "Noto Sans Thai", sans-serif;
  --pad: clamp(20px, 5vw, 100px);
  color: var(--ink);
  font-family: "Noto Sans Thai", Arial, sans-serif;
  font-synthesis: weight;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}
body {
  margin: 0;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  cursor: pointer;
}
button:focus-visible,
a:focus-visible {
  outline: 3px solid #d76200;
  outline-offset: 4px;
}
.skip {
  position: fixed;
  top: -120px;
  z-index: 100;
}
.skip:focus {
  top: 0;
  background: white;
}
.glass {
  position: fixed;
  z-index: 40;
  left: 50%;
  transform: translateX(-50%);
  top: 16px;
  width: min(calc(100% - 32px), 1120px);
  min-height: 68px;
  padding: 10px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-radius: 40px;
  border: 1px solid #ffffffaa;
  background: #ffffff69;
  backdrop-filter: blur(24px) saturate(170%);
  box-shadow:
    0 8px 26px #16233524,
    inset 0 1px #ffffff50;
  color: #0b2034;
}
.wordmark {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #224265;
}
.toplinks,
.nav-actions,
.actions,
.arrows {
  display: flex;
  align-items: center;
  gap: 12px;
}
.toplinks {
  gap: 36px;
  font-weight: 600;
}
.toplinks a:hover {
  text-decoration: underline;
  text-underline-offset: 6px;
}
.login,
.navtoggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid white;
  background: #ffffff60;
  border-radius: 32px;
  padding: 8px 16px;
  font-weight: 600;
  font-size: 14px;
}
.login svg {
  width: 16px;
  height: 16px;
}
.navtoggle {
  display: none;
}
.hero {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 15% 33%, var(--green) 0 18%, transparent 46%),
    radial-gradient(ellipse at 90% 8%, var(--cyan) 0 20%, transparent 48%),
    radial-gradient(ellipse at 33% 59%, #abf8db 0, transparent 40%),
    linear-gradient(130deg, #52bd99, #1679ef 54%, var(--blue) 91%);
  color: white;
  overflow: hidden;
}
.hero-wrap {
  min-height: max(720px, 95svh);
  max-width: 1780px;
  margin: auto;
  padding: 100px var(--pad) 66px;
  display: grid;
  align-items: center;
  grid-template-columns: 56% 42%;
  gap: 2%;
}
.hero-copy {
  z-index: 1;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #ffffffae;
  background: #ffffff22;
  padding: 7px 16px;
  border-radius: 24px;
  letter-spacing: 1px;
  font: 800 12px/1.3 var(--display);
}
.pill i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #70ff8a;
}
.hero h1 {
  margin: 24px 0 25px;
  line-height: 0.97;
  letter-spacing: -0.056em;
  font: 900 clamp(68px, 10.15vw, 166px) / 0.92 var(--display);
}
.hero h1 > * {
  display: block;
  letter-spacing: -0.05em;
}
.hero h1 .prefix {
  display: flex;
  align-items: center;
  gap: 0.2em;
  font-size: 0.43em;
  line-height: 1.15;
  letter-spacing: -0.043em;
}
.prefix img {
  width: 1.44em;
  height: 0.78em;
  object-fit: contain;
  border-radius: 25px;
  background: #f5f9e8;
  border: 2px solid white;
  transform: rotate(-4deg);
  box-shadow: 0 4px 10px #1233;
}
.hero h1 strong {
  font-weight: 900;
  text-shadow: 0 6px 14px #00212425;
}
.hero h1 em,
.services h2 em {
  font-style: normal;
  color: transparent;
  -webkit-text-stroke: 2px white;
}
.hero-copy > p {
  font-weight: 800;
  font-size: clamp(17px, 1.5vw, 23px);
  margin: 25px 0;
}
.actions {
  flex-wrap: wrap;
}
.btn,
.hero-bottom button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 100px;
  padding: 14px 22px;
  font-size: 15px;
  font-weight: 600;
  transition: transform 0.2s;
}
.btn:hover,
.login:hover,
.tiles a:hover {
  transform: translateY(-2px);
}
.white {
  color: #173aca;
  background: white;
  box-shadow: 0 5px 19px #1232;
}
.glassbtn,
.hero-bottom button {
  color: white;
  background: #ffffff24;
  border: 1px solid white;
}
.solid {
  background: #142c25;
  color: white;
}
.cardstack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: center;
  position: relative;
  isolation: isolate;
  padding: 3% 1% 4% 0;
}
.cardstack figure {
  position: relative;
  margin: 0 -1%;
  height: clamp(205px, 23.8vw, 365px);
  border-radius: clamp(16px, 2vw, 30px);
  overflow: hidden;
  background: var(--card);
  transform: rotate(var(--tilt));
  box-shadow: 0 22px 32px #09259233;
  transition: transform 0.3s;
}
.cardstack figure:nth-child(2) {
  transform: translateY(-7%) rotate(var(--tilt));
}
.cardstack figure:nth-child(n + 3) {
  margin-top: -30%;
  z-index: 1;
}
.cardstack figure:nth-child(4) {
  transform: translateY(-4%) rotate(var(--tilt));
}
.cardstack figure:hover {
  transform: translateY(-8px) rotate(0deg);
  z-index: 2;
}
.cardstack img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.cardstack figcaption {
  position: absolute;
  inset: 0;
  padding: 6%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: column;
  font-weight: 800;
}
.cardstack small {
  border-radius: 20px;
  padding: 3px 10px;
  background: #ffffff55;
  font: 800 clamp(10px, 0.93vw, 16px) var(--display);
}
.cardstack figure:last-child {
  color: #392900;
}
.cardstack b {
  text-shadow: 0 1px 4px #0005;
}
.pulse {
  position: absolute;
  width: 100%;
  height: 82px;
  left: 0;
  bottom: 14%;
  color: #ffffff3b;
  z-index: -1;
}
.hero-bottom {
  position: absolute;
  bottom: 75px;
  left: var(--pad);
  right: var(--pad);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hero-bottom button {
  padding: 5px 12px;
  font-size: 12px;
}
.hero-bottom a {
  margin-left: auto;
  letter-spacing: 3px;
  font: 800 12px var(--display);
}
.marquee {
  overflow: hidden;
  background: #0756d5;
  color: white;
  border-block: 1px solid #ffffff44;
  font: 800 17px/44px var(--display);
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee > div {
  width: max-content;
  animation: travel 45s linear infinite;
}
.marquee i {
  color: #75ff94;
  font-style: normal;
  padding: 0 18px;
}
@keyframes travel {
  to {
    transform: translateX(-33.3333%);
  }
}
.center {
  text-align: center;
}
.micro {
  letter-spacing: 2px;
  font: 800 11px/1.4 monospace;
}
.reading,
.crew,
.shop,
.islands,
.services,
.station,
.guide,
footer {
  padding: clamp(65px, 7vw, 120px) var(--pad);
}
.reading h2,
.crew h2,
.shop h2,
.islands h2,
.services h2,
.guide h2,
.station h2,
footer h2,
.intro-panel h2 {
  font: 900 clamp(48px, 6vw, 102px) / 1.02 var(--display);
  letter-spacing: -0.065em;
  margin: 24px 0 16px;
}
.reading {
  background:
    radial-gradient(ellipse at 72% 14%, #20313b, transparent 40%), #0c151d;
  color: #f3f8fa;
  border-radius: 32px 32px 0 0;
}
.reading h2 em {
  font-style: normal;
  text-shadow: 0 0 20px #cff;
}
.reading > .micro,
.case small,
.film span {
  color: #9cd6db;
}
.reading > p {
  color: #bdc7ca;
}
#cases {
  display: grid;
  grid-template-columns: 1.65fr 1fr;
  gap: 24px;
  margin-top: 44px;
}
.film,
.case {
  background: #18262f;
  border: 1px solid #435058;
  border-radius: 16px;
  padding: 20px;
}
.film button {
  display: block;
  width: 100%;
  padding: 12px;
  background: #d9edec;
  border: 0;
  border-radius: 6px;
  cursor: zoom-in;
}
.film img {
  width: 100%;
  aspect-ratio: 1.52;
  object-fit: cover;
}
.film span {
  display: block;
  margin-top: 10px;
  letter-spacing: 2px;
  font: 11px monospace;
}
.case {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(18px, 3vw, 45px);
}
.case h3 {
  font: 800 clamp(28px, 3vw, 60px) / 1.12 var(--display);
  letter-spacing: -0.05em;
  margin: 0.3em 0;
}
.case p {
  color: #c6d5d8;
}
.text-link {
  display: inline-block;
  font-weight: 800;
  border: 0;
  color: inherit;
  background: none;
  text-decoration: underline;
  text-underline-offset: 4px;
  padding: 4px 0;
}
.arrows {
  margin-top: 20px;
}
.arrows button {
  width: 38px;
  height: 38px;
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
  border-radius: 50%;
}
.crew {
  background:
    radial-gradient(ellipse at center, #d4eacb, transparent 50%), #f4f1e5;
  color: #10281b;
  min-height: 76vh;
  display: grid;
  place-content: center;
  justify-items: center;
}
.crew .pill,
.islands .pill {
  background: #fff9;
  border-color: #d3dbc7;
}
.crew h2 {
  font-size: clamp(68px, 12vw, 184px);
  line-height: 0.86;
  margin: 58px 0;
}
.colors {
  color: transparent;
  background: linear-gradient(
    95deg,
    #27b67a,
    #387cec 23%,
    #f13663 40%,
    #ffb62b 60%,
    #ad68ea 79%,
    #15c7c9
  );
  background-clip: text;
}
.person {
  margin: 10px;
}
.person img {
  width: 150px;
}
.shop {
  background: radial-gradient(ellipse at top, #533e27, #17120f 70%);
  color: white;
  overflow: hidden;
}
.rail {
  height: 10px;
  background: linear-gradient(#837263, #32261d);
  border-radius: 9px;
}
.tags {
  display: flex;
  justify-content: center;
  gap: 1%;
  padding: 2% 0;
}
.tags span {
  background: #cbad7b;
  color: #341f0e;
  padding: 2% 1.4%;
  font: 900 clamp(25px, 4.7vw, 90px) Georgia;
  clip-path: polygon(15% 0, 85% 0, 100% 18%, 100% 100%, 0 100%, 0 18%);
  transform: rotate(var(--turn));
}
.shelf,
.postcards,
.contacts {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1080px;
  margin: 42px auto;
}
.shelf a {
  background: #eee8d9;
  color: #261b12;
  border-radius: 3px;
  padding: 12px 12px 22px;
}
.shelf img {
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
}
.shelf small,
.shelf b {
  display: block;
  margin-top: 8px;
}
.islands {
  background: #70d1e0;
  color: #253948;
}
.islands h2 {
  color: white;
  text-shadow: 3px 4px #2c4850;
  -webkit-text-stroke: 1px #2c4850;
  font-size: clamp(40px, 6vw, 90px);
}
.postcards {
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  max-width: 900px;
}
.polaroids {
  display: flex;
  justify-content: center;
}
.polaroids button {
  background: white;
  padding: 8px 8px 22px;
  border: 0;
  width: 74%;
  box-shadow: 0 3px 10px #1645;
  transform: rotate(-4deg);
  margin-bottom: -10px;
}
.polaroids img {
  width: 100%;
  aspect-ratio: 1.8;
  object-fit: cover;
}
.postcard {
  position: relative;
  border: 9px solid transparent;
  border-image: repeating-linear-gradient(
      135deg,
      #ef695d 0 10px,
      #fff5d4 10px 21px,
      #3c7baf 21px 31px,
      #fff5d4 31px 42px
    )
    10;
  background: #fff7dd;
  padding: 24px 18px;
  box-shadow: 2px 5px 0 #29404b;
}
.postcard small {
  letter-spacing: 2px;
  font: 11px monospace;
}
.postcard p {
  font: italic 22px Georgia;
  color: #ae5c40;
  margin-bottom: 0;
}
.postcard h3 {
  font: 800 28px/1.1 var(--display);
  margin: 10px;
}
.postcard .text-link {
  margin-top: 15px;
}
.services {
  background:
    radial-gradient(ellipse at 50% 3%, #1b2130, transparent 28%), #08090e;
  color: white;
  overflow: hidden;
}
.services h2 {
  font-size: clamp(50px, 9vw, 148px);
}
.services h2 em {
  -webkit-text-stroke: 1px #aaa;
}
.services .marquee {
  margin: 64px -8vw;
  background: linear-gradient(90deg, #69e9a5, #ffe243, #fd88ca);
  color: #111;
  transform: rotate(-2.8deg);
}
.services .marquee i {
  color: #111;
}
.tiles {
  max-width: 1260px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  text-align: left;
}
.tiles a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 240px;
  padding: 20px;
  border-radius: 20px;
  border: 1px solid #ffffff28;
  background:
    radial-gradient(
      ellipse at 50% 16%,
      color-mix(in srgb, var(--accent) 23%, transparent),
      transparent 65%
    ),
    #111116;
  transition:
    transform 0.2s,
    border-color 0.2s;
}
.tiles a:hover {
  border-color: var(--accent);
}
.tiles small {
  color: #aaa;
  letter-spacing: 2px;
}
.tile-icon {
  display: grid;
  place-items: center;
  margin: 10px auto 24px;
  background: linear-gradient(
    130deg,
    var(--accent),
    color-mix(in srgb, var(--accent) 55%, #281526)
  );
  border-radius: 15px;
  box-shadow: 0 0 26px color-mix(in srgb, var(--accent) 44%, transparent);
  width: 58px;
  height: 58px;
}
.tile-icon svg {
  width: 29px;
  height: 29px;
}
.tiles h3 {
  font-size: 18px;
  margin: 0;
}
.tiles p {
  font-size: 14px;
  color: #c4c6cb;
  margin: 5px 0 14px;
}
.tiles strong {
  margin-top: auto;
  border-top: 1px solid #ffffff20;
  padding-top: 10px;
  width: 100%;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
}
.guide {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8%;
  background: #fbf6e8;
  color: #17382e;
}
.bookcover {
  width: clamp(175px, 24vw, 320px);
  padding: 30px 22px;
  color: white;
  background: #1f5b48;
  border-left: 10px solid #164936;
  aspect-ratio: 0.72;
  display: grid;
  align-content: space-between;
  transform: rotate(-5deg);
  box-shadow:
    6px 6px #d4ccab,
    12px 14px 12px #101b2022;
}
.bookcover b {
  font: 800 clamp(25px, 3vw, 48px) / 1.1 var(--display);
  letter-spacing: -0.05em;
}
.bookcover img {
  width: 52px;
}
.station {
  background: repeating-linear-gradient(0deg, #d8d6c9 0 2px, #f4f1e8 2px 22px);
  border-bottom: 14px solid #c84537;
}
.station-sign {
  display: inline-block;
  padding: 11px 30px;
  background: #1e3456;
  color: white;
  border-radius: 6px;
  box-shadow: 0 4px #ba4b36;
  font-weight: 800;
}
.station h2 {
  letter-spacing: -0.04em;
  font-size: clamp(42px, 6vw, 88px);
}
footer {
  background:
    radial-gradient(ellipse at 30% 35%, #0e2438, transparent 46%), #05090e;
  color: white;
}
footer h2 {
  margin-bottom: 32px;
}
.contacts {
  margin-left: 0;
}
.contacts a {
  border-top: 1px solid #ffffff55;
  padding: 18px 0;
}
.contacts b,
.contacts small {
  display: block;
}
.contacts small {
  color: #67f6c8;
}
.legal {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  border-top: 1px solid #ffffff30;
  margin: 24px 0;
  padding: 16px 0;
  font-size: 13px;
}
.legal button {
  border: 0;
  background: transparent;
  color: white;
  margin-left: auto;
}
footer > small:last-child {
  color: #b3c1c5;
  font-size: 11px;
}
#cookie aside {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 41;
  width: min(calc(100% - 24px), 760px);
  background: #071b17f7;
  color: #f0f9f4;
  border: 1px solid #21684e;
  border-radius: 17px;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
  line-height: 1.7;
  box-shadow: 0 7px 26px #0003;
}
#cookie a {
  color: #75f1c0;
  text-decoration: underline;
  font-weight: 800;
}
#cookie button {
  border: 0;
  background: #27ce97;
  border-radius: 30px;
  padding: 10px 22px;
  white-space: nowrap;
  color: #07251a;
  font-weight: 800;
}
#viewer {
  border: 0;
  border-radius: 20px;
  padding: 34px;
  max-width: min(90vw, 860px);
  width: fit-content;
  background: #f8f7ed;
  color: #172a22;
}
#viewer::backdrop {
  background: #07101bcd;
}
#viewer-body > img {
  max-height: 65vh;
  object-fit: contain;
  margin: auto;
}
.viewer-close {
  position: absolute;
  top: 5px;
  right: 7px;
  border: 0;
  background: #fff;
  color: #111;
  border-radius: 30px;
  width: 35px;
  height: 35px;
  font-size: 24px;
  z-index: 1;
}
.intro-panel {
  background: #0b3150;
  color: white;
  border-radius: 12px;
  padding: 30px;
  text-align: center;
}
.intro-panel img {
  width: 190px;
  margin: 15px auto;
  border-radius: 18px;
}
.intro-panel h2 {
  font-size: 38px;
}
.missing {
  padding: 160px var(--pad);
}
@media (min-width: 1700px) {
  .hero-wrap {
    min-height: 92svh;
  }
}
@media (max-width: 900px) {
  .tiles {
    grid-template-columns: repeat(2, 1fr);
  }
  .toplinks {
    gap: 16px;
  }
  .hero-wrap {
    min-height: 680px;
  }
  .shelf,
  .contacts {
    gap: 12px;
  }
}
@media (max-width: 700px) {
  .glass {
    width: calc(100% - 24px);
    padding: 9px 12px 9px 16px;
    min-height: 62px;
  }
  .wordmark {
    font-size: 14px;
  }
  .nav-actions {
    gap: 6px;
  }
  .navtoggle {
    display: block;
    padding: 3px 9px;
    font-size: 23px;
    line-height: 1.35;
  }
  .toplinks {
    display: none;
  }
  .opened .toplinks {
    display: grid;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    padding: 20px;
    background: #f5fcf9;
    border-radius: 24px;
    box-shadow: 0 12px 25px #1233;
  }
  .hero-wrap {
    display: block;
    min-height: 0;
    padding: 104px 20px 84px;
  }
  .hero-copy h1 {
    font-size: clamp(54px, 15vw, 103px);
    margin: 20px 0;
  }
  .hero h1 .prefix {
    font-size: 0.48em;
  }
  .hero-copy > p {
    margin: 18px 0 24px;
  }
  .hero-copy > .pill {
    font-size: 10px;
  }
  .cardstack {
    width: min(96%, 490px);
    margin: 38px auto 0;
    padding: 0 0 4%;
  }
  .cardstack figure {
    height: clamp(180px, 54vw, 270px);
    border-radius: 19px;
  }
  .cardstack figure:nth-child(n + 3) {
    margin-top: -21%;
  }
  .cardstack small {
    font-size: 11px;
  }
  .cardstack b {
    font-size: 14px;
  }
  .hero-bottom {
    bottom: 52px;
  }
  .marquee {
    font-size: 13px;
    line-height: 35px;
  }
  .hero h1 em {
    -webkit-text-stroke: 1.5px white;
  }
  .actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .hero-copy .btn {
    padding: 12px 20px;
  }
  .reading,
  .crew,
  .shop,
  .islands,
  .services,
  .guide,
  .station,
  footer {
    padding: 64px 20px;
  }
  #cases {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .film {
    padding: 12px;
  }
  .case {
    padding: 22px;
  }
  .crew {
    min-height: 65svh;
  }
  .shelf {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  .shelf a {
    padding: 5px 5px 11px;
    font-size: 12px;
  }
  .postcards,
  .contacts {
    grid-template-columns: 1fr;
  }
  .guide {
    flex-direction: column;
    gap: 26px;
    text-align: center;
  }
  .tiles {
    gap: 9px;
  }
  .tiles a {
    padding: 13px;
    min-height: 216px;
  }
  .tiles h3 {
    font-size: 15px;
  }
  .tiles p {
    font-size: 12px;
  }
  .services .marquee {
    margin: 35px -25px;
  }
  .legal button {
    margin-left: 0;
  }
  #cookie aside {
    font-size: 12px;
    bottom: 10px;
    padding: 11px 13px;
    gap: 8px;
  }
  #cookie button {
    padding: 8px 14px;
  }
  .reading h2 {
    font-size: 46px;
  }
  .guide h2 {
    font-size: 42px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
.home-team {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}
.home-team .person {
  max-width: 195px;
}
.person img {
  height: 150px;
  object-fit: cover;
  border-radius: 12px;
  margin: 0 auto 8px;
}
.person b {
  display: block;
}
#viewer.cinema {
  max-width: none;
  max-height: none;
  width: 100vw;
  height: 100dvh;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: #e8e5d7;
  color: #151c20;
  overflow: hidden;
}
#viewer.cinema > .viewer-close {
  display: none;
}
.vitals-screen {
  height: 100dvh;
  position: relative;
  display: grid;
  place-items: center;
  background-image:
    linear-gradient(#72756612 1px, transparent 1px),
    linear-gradient(90deg, #72756612 1px, transparent 1px);
  background-size: 45px 45px;
}
.stamp,
.meter {
  font: 800 11px var(--display);
  letter-spacing: 0.5px;
  border: 2px solid #202423;
  background: #f3f0e3;
  padding: 6px 10px;
  text-transform: uppercase;
}
.vitals-screen > .stamp,
.meter {
  position: absolute;
  top: 18px;
}
.vitals-screen > .stamp {
  left: 18px;
}
.meter {
  right: 18px;
  color: #914059;
}
.intro-scene {
  text-align: center;
  position: relative;
  padding: 25px;
  animation: ink-in 0.4s ease-out;
}
.intro-scene:before {
  content: "";
  position: absolute;
  inset: -20%;
  background: radial-gradient(#df40614a 2px, transparent 3px);
  background-size: 9px 9px;
  mask-image: radial-gradient(ellipse, #000 15%, transparent 65%);
  z-index: -1;
}
.intro-scene small {
  font: 800 11px monospace;
  letter-spacing: 4px;
  color: #0072ae;
}
.intro-scene h2 {
  font: 900 clamp(56px, 10vw, 190px) / 0.95 var(--display);
  letter-spacing: -0.07em;
  margin: 12px 0;
  text-shadow:
    4px 1px #f54c92,
    -4px 1px #16a4d7;
}
.intro-scene p {
  font-weight: 800;
  color: #066698;
}
.intro-scene img {
  margin: 0 auto 20px;
  width: clamp(120px, 18vw, 240px);
  border-radius: 16px;
  transform: rotate(-5deg);
  box-shadow: 8px 8px #212a2e;
}
.ecg {
  position: absolute;
  bottom: 16%;
  width: 100%;
  height: 10%;
  stroke: #087db0;
  stroke-width: 3;
  fill: none;
  pointer-events: none;
}
.ecg path {
  stroke-dasharray: 1;
  animation: electro 1.8s ease-out forwards;
}
.cinema-controls {
  position: absolute;
  bottom: 20px;
  left: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cinema-controls .stamp {
  margin-right: auto;
}
.cinema-controls button {
  border: 2px solid #111;
  border-radius: 24px;
  padding: 9px 16px;
  background: #fff4be;
  box-shadow: 3px 3px #171817;
  font: 800 12px var(--display);
}
.cinema-controls #intro-skip {
  background: #ffde21;
}
@keyframes electro {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes ink-in {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@media (min-width: 901px) {
  .hero-wrap {
    min-height: max(710px, 91.5svh);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ecg path,
  .intro-scene {
    animation: none;
  }
}
.equipment-catalog {
  grid-column: 1/-1;
  border: 1px solid #abb6ad;
  border-radius: 12px;
  padding: 18px;
  display: grid;
  gap: 12px;
}
.equipment-catalog legend {
  padding: 0 6px;
  font-weight: 800;
}
.equipment-catalog label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.equipment-catalog label[hidden] {
  display: none;
}
.equipment-catalog input[type="number"] {
  max-width: 80px;
}
.platform {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 36px;
  text-align: left;
  max-width: 1100px;
  margin: 60px auto 36px;
}
.departures {
  padding: 22px;
  background: #1d2225;
  color: #f3be57;
  border: 4px solid #342f26;
  border-radius: 9px;
  box-shadow: 0 6px 14px #162a3430;
}
.departures small {
  font: 800 12px monospace;
  letter-spacing: 1px;
}
.departures p {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 12px 0 0;
  border-top: 1px dashed #7b6946;
  padding: 10px 0;
}
.departures b {
  background: #e34c3a;
  color: white;
  font: 800 12px monospace;
  padding: 3px 5px;
}
.departures time {
  margin-left: auto;
}
.station {
  background-image:
    linear-gradient(0deg, transparent 92%, #c74737 92% 95%, transparent 95%),
    repeating-linear-gradient(0deg, #d8d6c9 0 2px, #f4f1e8 2px 22px);
}
@media (max-width: 700px) {
  .platform {
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 35px auto 20px;
  }
}
.utilities {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 20px 0;
}
.utilities a {
  display: block;
  border: 1px solid #ffffff40;
  border-radius: 24px;
  padding: 6px 14px;
  font-size: 13px;
}
.utilities a:hover {
  border-color: #67f6c8;
}