:root {
  color: #f8f4e9;
  background: #101c1a;
  --display-font: Georgia, "Times New Roman", serif;
  --archive-font: "Cascadia Mono", Consolas, "Courier New", monospace;
  font-family:
    var(--display-font);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
}

html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}

body {
  background:
    linear-gradient(130deg, rgba(244, 111, 100, 0.2), transparent 32%),
    linear-gradient(250deg, rgba(99, 255, 244, 0.26), transparent 38%),
    linear-gradient(180deg, #101c1a 0%, #172724 54%, #0d1715 100%);
}

.page-shell {
  min-height: 100svh;
}

.stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.stage::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(90deg, rgba(248, 244, 233, 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(248, 244, 233, 0.032) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 50% 48%, #000 0 34%, transparent 72%);
  opacity: 0.86;
  transition: opacity 760ms ease;
}

.stage::after {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  height: 42vh;
  pointer-events: none;
  content: "";
  background: linear-gradient(to top, rgba(12, 23, 21, 0.66), transparent);
  opacity: 1;
  transition: opacity 760ms ease;
}

.stage.is-awaiting::before {
  opacity: 0;
}

.stage.is-awaiting::after {
  opacity: 0.2;
}

#toroid-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: opacity 900ms ease;
}

.stage.is-awaiting #toroid-canvas {
  opacity: 1;
}

.entry-screen {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: min(420px, calc(100vw - 42px));
  text-align: center;
  opacity: 1;
  transform: translate(-50%, -50%);
  transition:
    opacity 520ms ease,
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 520ms ease;
}

.stage:not(.is-awaiting) .entry-screen {
  opacity: 0;
  pointer-events: none;
  filter: blur(8px);
  transform: translate(-50%, -50%) scale(1.18);
}

.eyebrow,
.panel-label,
.message-kicker {
  margin: 0 0 10px;
  color: #f2b45f;
  font-size: clamp(0.72rem, 0.68rem + 0.18vw, 0.86rem);
  font-weight: 760;
  letter-spacing: 0;
  text-transform: uppercase;
}

.enter-button {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(148px, 18vw, 210px);
  aspect-ratio: 1;
  border: 1px solid rgba(99, 255, 244, 0.54);
  border-radius: 50%;
  color: #f8f4e9;
  background:
    radial-gradient(circle at 50% 44%, rgba(99, 255, 244, 0.2), rgba(10, 38, 39, 0.48) 48%, rgba(2, 13, 18, 0.62) 72%),
    linear-gradient(180deg, rgba(18, 58, 62, 0.52), rgba(1, 8, 11, 0.66));
  box-shadow:
    0 0 0 1px rgba(99, 255, 244, 0.14),
    0 0 54px rgba(18, 200, 187, 0.2),
    inset 0 0 34px rgba(18, 200, 187, 0.24),
    inset 0 0 0 999px rgba(1, 8, 11, 0.04);
  font-family: var(--archive-font);
  font-size: clamp(0.94rem, 1.6vw, 1.22rem);
  font-weight: 820;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  transition:
    border-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.enter-button::before,
.enter-button::after {
  position: absolute;
  inset: 9px;
  pointer-events: none;
  content: "";
  border-radius: 50%;
}

.enter-button::before {
  border: 1px solid rgba(99, 255, 244, 0.22);
  border-top-color: rgba(242, 180, 95, 0.72);
  border-right-color: rgba(242, 180, 95, 0.4);
  animation: entrySpin 8s linear infinite;
}

.enter-button::after {
  inset: 23px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 22px rgba(99, 255, 244, 0.12);
}

.enter-button:hover,
.enter-button:focus-visible {
  border-color: rgba(242, 180, 95, 0.86);
  color: #fff9e8;
  box-shadow:
    0 0 0 1px rgba(242, 180, 95, 0.22),
    0 0 76px rgba(18, 200, 187, 0.3),
    0 0 40px rgba(242, 180, 95, 0.16),
    inset 0 0 44px rgba(18, 200, 187, 0.26);
  outline: none;
  transform: scale(1.04);
}

.portal-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  width: min(1200px, calc(100vw - 48px));
  color: rgba(248, 244, 233, 0.88);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, calc(-50% + 16px)) scale(0.96);
  transition:
    opacity 520ms ease,
    filter 520ms ease,
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.panel-label {
  position: relative;
  z-index: 3;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  font-size: 0.72rem;
}

.portal-console {
  position: relative;
  z-index: 1;
  width: min(1200px, calc(100vw - 48px));
  height: min(720px, 74vh);
  min-height: 500px;
  border: 1px solid rgba(18, 200, 187, 0.46);
  color: rgba(232, 255, 252, 0.95);
  background:
    linear-gradient(180deg, rgba(13, 48, 52, 0.44), rgba(10, 25, 28, 0.3)),
    rgba(14, 38, 40, 0.24);
  box-shadow:
    0 0 0 1px rgba(18, 200, 187, 0.12),
    0 20px 70px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px) saturate(1.18);
  overflow: hidden;
}

.portal-console::before,
.portal-console::after {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  content: "";
}

.portal-console::before {
  inset: 0;
  background:
    linear-gradient(90deg, rgba(18, 200, 187, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(18, 200, 187, 0.06) 1px, transparent 1px);
  background-size: 30px 30px;
  opacity: 0.24;
}

.portal-console::after {
  inset: -1px;
  border: 1px solid rgba(109, 255, 244, 0.22);
  box-shadow: inset 0 0 36px rgba(18, 200, 187, 0.18);
}

.terminal-header {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(18, 200, 187, 0.34);
  color: #63fff4;
  background:
    linear-gradient(90deg, rgba(21, 75, 82, 0.48), rgba(14, 35, 42, 0.44)),
    rgba(17, 46, 50, 0.28);
  font-family: var(--archive-font);
  font-size: 0.72rem;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(99, 255, 244, 0.62);
}

.terminal-header > span:first-child {
  justify-self: start;
}

.terminal-header span:last-child {
  justify-self: end;
  color: rgba(232, 255, 252, 0.62);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
}

.grid-back-button {
  position: relative;
  z-index: 2;
  justify-self: center;
  min-height: 24px;
  padding: 0 14px;
  border: 1px solid rgba(99, 255, 244, 0.34);
  border-radius: 3px;
  color: rgba(232, 255, 252, 0.84);
  background: rgba(18, 58, 62, 0.3);
  box-shadow: inset 0 0 18px rgba(18, 200, 187, 0.08);
  font: inherit;
  font-family: var(--archive-font);
  font-size: 0.62rem;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    border-color 180ms ease,
    color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.grid-back-button:hover,
.grid-back-button:focus-visible {
  border-color: rgba(242, 180, 95, 0.78);
  color: #fff9e8;
  background: rgba(18, 200, 187, 0.14);
  box-shadow:
    inset 0 0 18px rgba(18, 200, 187, 0.18),
    0 0 16px rgba(18, 200, 187, 0.16);
  outline: none;
}

.portal-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(5, minmax(0, 1fr));
  gap: 0;
  height: calc(100% - 34px);
}

.portal-grid button,
.reset-button {
  border: 1px solid rgba(18, 200, 187, 0.18);
  border-radius: 0;
  color: rgba(232, 255, 252, 0.88);
  background: rgba(2, 13, 18, 0.2);
  font: inherit;
  font-family: var(--archive-font);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease,
    opacity 180ms ease,
    transform 180ms ease;
}

.portal-grid button {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: start;
  min-height: 0;
  padding: clamp(12px, 1.45vw, 22px) clamp(14px, 1.8vw, 24px);
  overflow: hidden;
  border-width: 0 1px 1px 0;
  text-align: left;
  text-transform: uppercase;
}

.portal-grid button::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(90deg, transparent, rgba(99, 255, 244, 0.16), transparent),
    linear-gradient(180deg, rgba(99, 255, 244, 0.08), transparent 42%);
  opacity: 0.24;
  transform: translateX(-120%);
  transition:
    opacity 180ms ease,
    transform 360ms ease;
}

.portal-grid button::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 48%);
  opacity: 0.7;
}

.portal-grid button:nth-child(4n) {
  border-right-width: 0;
}

.portal-grid button:nth-child(n + 17) {
  border-bottom-width: 0;
}

.file-code {
  position: relative;
  z-index: 1;
  display: block;
  margin-bottom: 6px;
  color: #63fff4;
  font-size: 0.62rem;
  font-weight: 820;
  line-height: 1;
  text-shadow: 0 0 10px rgba(99, 255, 244, 0.7);
}

.gate-label {
  position: relative;
  z-index: 1;
  max-width: 100%;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(0.68rem, 0.52rem + 0.38vw, 0.86rem);
  font-weight: 640;
  line-height: 1.32;
  overflow-wrap: anywhere;
}

.portal-grid:has(button:hover) button:not(:hover),
.portal-grid:has(button:focus-visible) button:not(:focus-visible) {
  opacity: 0.58;
}

.portal-grid button.is-selected {
  border-color: rgba(242, 180, 95, 0.72);
  background:
    linear-gradient(90deg, rgba(242, 180, 95, 0.13), rgba(18, 200, 187, 0.07)),
    rgba(6, 44, 46, 0.41);
}

.portal-grid button.is-selected .file-code {
  color: #f2b45f;
  text-shadow: 0 0 10px rgba(242, 180, 95, 0.66);
}

.portal-grid button[data-portal="inner-outer"] {
  border-color: rgba(227, 168, 95, 0.34);
  background: rgba(2, 13, 18, 0.2);
}

.portal-grid button[data-portal="inner-outer"]::after {
  inset: 0;
  border: 1px solid rgba(227, 168, 95, 0.34);
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(255, 255, 255, 0.28) 12%, transparent 18% 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 48%);
  background-size: 280% 100%, 100% 100%;
  box-shadow:
    inset 0 0 0 1px rgba(227, 168, 95, 0.08),
    0 0 10px rgba(227, 168, 95, 0.08);
  opacity: 0.78;
  animation: purposeEdgeTwinkle 6.2s ease-in-out infinite;
}

.portal-grid button[data-portal="inner-outer"] .file-code {
  color: #f2b45f;
  text-shadow:
    0 0 10px rgba(242, 180, 95, 0.58),
    0 0 22px rgba(242, 180, 95, 0.18);
}

.portal-grid button:hover,
.portal-grid button:focus-visible,
.reset-button:hover,
.reset-button:focus-visible {
  border-color: rgba(99, 255, 244, 0.68);
  color: #ffffff;
  background:
    linear-gradient(90deg, rgba(18, 200, 187, 0.24), rgba(18, 200, 187, 0.06)),
    rgba(4, 42, 48, 0.38);
  box-shadow:
    inset 0 0 32px rgba(18, 200, 187, 0.22),
    0 0 22px rgba(18, 200, 187, 0.2);
  outline: none;
  transform: translateY(-1px);
}

.reset-button:hover,
.reset-button:focus-visible {
  transform: translateY(-1px);
}

.portal-grid button:hover::before,
.portal-grid button:focus-visible::before {
  opacity: 1;
  transform: translateX(0);
  animation: buttonSweep 1.25s linear infinite;
}

.stage.is-grid-open .portal-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.stage.is-message-open .portal-panel {
  opacity: 0.08;
  pointer-events: none;
  filter: blur(1px);
  transform: translate(-50%, -50%) scale(0.985);
}

.stage.is-gate-hot .portal-console {
  box-shadow: none;
}

.message-box {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  width: min(1390px, calc(100vw - 80px));
  height: min(820px, calc(100svh - 70px));
  min-height: 560px;
  padding: 0;
  border: 1px solid rgba(124, 158, 160, 0.26);
  border-radius: 10px;
  color: rgba(241, 246, 241, 0.92);
  background:
    linear-gradient(180deg, rgba(18, 43, 45, 0.86), rgba(10, 25, 27, 0.78)),
    rgba(13, 31, 33, 0.76);
  box-shadow:
    0 34px 92px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(18, 200, 187, 0.06),
    inset 0 0 70px rgba(18, 200, 187, 0.035);
  backdrop-filter: blur(20px) saturate(1.08);
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  text-align: left;
  transform: translate(-50%, calc(-50% + 14px)) scale(0.98);
  transition: opacity 420ms ease, transform 420ms ease;
}

.stage.is-message-open .message-box {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.detail-panel {
  position: relative;
  display: grid;
  grid-template-rows: 112px minmax(0, 1fr);
  height: 100%;
}

.detail-panel::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: "";
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.024) 0 1px, transparent 1px 5px),
    linear-gradient(90deg, rgba(18, 200, 187, 0.04), transparent 30%, rgba(242, 180, 95, 0.035));
  opacity: 0.62;
}

.detail-header,
.detail-content {
  position: relative;
  z-index: 1;
}

.detail-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding: 30px 28px 24px;
  border-bottom: 1px solid rgba(156, 176, 176, 0.24);
}

.detail-path {
  margin: 0;
  color: rgba(241, 246, 241, 0.78);
  font-family: var(--archive-font);
  font-size: clamp(0.72rem, 0.62rem + 0.22vw, 0.9rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.close-button {
  display: grid;
  place-items: center;
  width: 38px;
  min-width: 38px;
  min-height: 38px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(156, 176, 176, 0.44);
  border-radius: 5px;
  color: rgba(241, 246, 241, 0.86);
  background: rgba(1, 8, 11, 0.38);
  box-shadow: none;
  font-family: var(--archive-font);
  font-size: 1rem;
  line-height: 1;
}

.detail-content {
  display: grid;
  grid-template-columns: minmax(310px, 0.38fr) minmax(440px, 0.62fr);
  gap: clamp(24px, 3vw, 44px);
  min-height: 0;
  padding: clamp(28px, 4.2vw, 66px) 28px 30px;
}

.detail-copy-panel {
  display: grid;
  align-content: start;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding-right: 6px;
  scrollbar-color: rgba(99, 255, 244, 0.35) rgba(255, 255, 255, 0.04);
}

.message-kicker {
  margin: 0 0 18px;
  font-size: 0.72rem;
}

.detail-copy {
  max-width: 62ch;
  margin: 0;
  color: rgba(241, 246, 241, 0.92);
  font-family: var(--archive-font);
  font-size: clamp(0.78rem, 0.68rem + 0.28vw, 0.96rem);
  line-height: 1.55;
}

.download-chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 34px;
  margin-top: clamp(22px, 3.6vh, 38px);
  padding: 0 26px;
  border: 1px solid rgba(156, 176, 176, 0.38);
  border-radius: 3px;
  color: rgba(241, 246, 241, 0.84);
  background: rgba(2, 14, 18, 0.42);
  font-family: var(--archive-font);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.download-chip::first-letter {
  color: #63fff4;
}

.detail-meta {
  display: grid;
  gap: 0;
  margin: clamp(24px, 3.8vh, 38px) 0 0;
  font-family: var(--archive-font);
  font-size: clamp(0.62rem, 0.55rem + 0.18vw, 0.78rem);
  line-height: 1.2;
  text-transform: uppercase;
}

.detail-meta div {
  display: grid;
  grid-template-columns: minmax(120px, 0.35fr) minmax(0, 0.65fr);
  gap: 18px;
  padding: 11px 4px;
  border-bottom: 1px solid rgba(156, 176, 176, 0.22);
}

.detail-meta dt {
  color: rgba(241, 246, 241, 0.65);
}

.detail-meta dd {
  margin: 0;
  color: rgba(241, 246, 241, 0.92);
  text-align: right;
  overflow-wrap: anywhere;
}

.document-frame {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(156, 176, 176, 0.24);
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.032) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 50% 0%, rgba(18, 200, 187, 0.09), transparent 46%),
    rgba(0, 0, 0, 0.46);
  box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.48);
  overflow: hidden;
}

.paper-sheet {
  width: auto;
  height: min(660px, 86%);
  max-width: 68%;
  aspect-ratio: 0.78;
  margin: 0;
  padding: clamp(34px, 4vw, 58px);
  overflow: hidden;
  color: #111817;
  background: #cfcfcf;
  box-shadow:
    0 22px 70px rgba(0, 0, 0, 0.38),
    inset 0 0 0 1px rgba(255, 255, 255, 0.38);
}

.preview-label {
  margin: 0 0 14px;
  color: rgba(17, 24, 23, 0.62);
  font-family: var(--display-font);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.paper-sheet h3 {
  margin: 0 0 18px;
  color: #111817;
  font-family: var(--display-font);
  font-size: clamp(0.98rem, 1.3vw, 1.28rem);
  line-height: 1.1;
  letter-spacing: 0;
}

.preview-copy {
  display: grid;
  gap: 11px;
  color: rgba(17, 24, 23, 0.9);
  font-family: var(--display-font);
  font-size: clamp(0.6rem, 0.68vw, 0.72rem);
  line-height: 1.45;
}

.booking-section {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: clamp(48px, 6vh, 78px) 22px;
  overflow: hidden;
  color: rgba(232, 255, 252, 0.94);
  background:
    radial-gradient(circle at 50% 22%, rgba(18, 200, 187, 0.18), transparent 30%),
    radial-gradient(circle at 18% 82%, rgba(242, 180, 95, 0.16), transparent 34%),
    radial-gradient(circle at 88% 70%, rgba(244, 111, 100, 0.12), transparent 32%),
    linear-gradient(180deg, #060807 0%, #0b1211 48%, #040605 100%);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  isolation: isolate;
}

.booking-section::before,
.booking-section::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: "";
}

.booking-section::before {
  background:
    linear-gradient(90deg, rgba(18, 200, 187, 0.075) 1px, transparent 1px),
    linear-gradient(0deg, rgba(18, 200, 187, 0.055) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at 50% 50%, #000 0 44%, transparent 82%);
  opacity: 0.62;
  transform: translateY(var(--booking-shift, 0px));
}

.booking-section::after {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 5px),
    linear-gradient(90deg, rgba(18, 200, 187, 0.08), transparent 35%, rgba(242, 180, 95, 0.05));
  opacity: 0.52;
}

.booking-shell {
  position: relative;
  z-index: 1;
  width: min(1200px, calc(100vw - 48px));
  transform: translateY(var(--booking-shell-shift, 0px));
}

.booking-shell::before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: min(780px, 82vw);
  aspect-ratio: 1;
  pointer-events: none;
  content: "";
  border: 1px solid rgba(99, 255, 244, 0.14);
  border-radius: 50%;
  box-shadow:
    inset 0 0 72px rgba(18, 200, 187, 0.07),
    0 0 90px rgba(242, 180, 95, 0.08);
  opacity: 0.78;
  transform:
    translate(-50%, -50%)
    rotate(var(--booking-rotate, 0deg))
    scale(var(--booking-scale, 1));
}

.booking-console {
  width: min(1200px, calc(100vw - 48px));
  height: min(760px, 76vh);
  min-height: 560px;
}

.booking-header {
  grid-template-columns: 1fr auto 1fr;
}

#booking-status {
  justify-self: center;
  color: #f2b45f;
  font-size: 0.62rem;
}

.booking-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(300px, 0.35fr) minmax(560px, 0.65fr);
  height: calc(100% - 34px);
  min-height: 0;
}

.booking-copy-panel {
  display: grid;
  align-content: center;
  min-width: 0;
  padding: clamp(28px, 4vw, 54px);
  border-right: 1px solid rgba(18, 200, 187, 0.22);
  text-align: left;
}

.booking-copy-panel h2 {
  max-width: 10ch;
  margin: 0;
  color: #f8f4e9;
  font-size: clamp(2.2rem, 4.6vw, 4.35rem);
  font-family: var(--display-font);
  font-weight: 420;
  line-height: 0.96;
  letter-spacing: 0;
  text-shadow:
    0 0 34px rgba(18, 200, 187, 0.18),
    0 18px 46px rgba(0, 0, 0, 0.32);
}

.booking-lede {
  max-width: 46ch;
  margin: 18px 0 0;
  color: rgba(232, 255, 252, 0.72);
  font-size: clamp(0.92rem, 1.1vw, 1.08rem);
  line-height: 1.56;
}

.booking-meta {
  display: grid;
  margin: clamp(26px, 4vh, 42px) 0 0;
  font-family: var(--archive-font);
  font-size: clamp(0.6rem, 0.62vw, 0.74rem);
  line-height: 1.22;
  text-transform: uppercase;
}

.booking-meta div {
  display: grid;
  grid-template-columns: minmax(96px, 0.4fr) minmax(0, 0.6fr);
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(156, 176, 176, 0.2);
}

.booking-meta dt {
  color: rgba(241, 246, 241, 0.58);
}

.booking-meta dd {
  margin: 0;
  color: rgba(241, 246, 241, 0.92);
  text-align: right;
  overflow-wrap: anywhere;
}

.booking-controls {
  display: grid;
  align-content: center;
  gap: clamp(16px, 2vh, 22px);
  min-width: 0;
  padding: clamp(22px, 3.2vw, 42px);
}

.booking-row {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.booking-label,
.booking-form label span {
  margin: 0;
  color: #63fff4;
  font-family: var(--archive-font);
  font-size: 0.64rem;
  font-weight: 780;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(99, 255, 244, 0.42);
}

.booking-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid rgba(18, 200, 187, 0.18);
}

.booking-option {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: start;
  min-height: 104px;
  padding: 16px;
  overflow: hidden;
  border: 0;
  border-right: 1px solid rgba(18, 200, 187, 0.18);
  color: rgba(232, 255, 252, 0.88);
  background: rgba(2, 13, 18, 0.2);
  font: inherit;
  font-family: var(--archive-font);
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease,
    opacity 180ms ease,
    transform 180ms ease;
}

.booking-option:last-child {
  border-right: 0;
}

.booking-option::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(90deg, transparent, rgba(99, 255, 244, 0.16), transparent),
    linear-gradient(180deg, rgba(99, 255, 244, 0.08), transparent 42%);
  opacity: 0.2;
  transform: translateX(-120%);
  transition:
    opacity 180ms ease,
    transform 360ms ease;
}

.booking-option span,
.booking-option strong,
.booking-option small {
  position: relative;
  z-index: 1;
}

.booking-option span {
  color: #63fff4;
  font-size: 0.62rem;
  font-weight: 820;
  line-height: 1;
  text-shadow: 0 0 10px rgba(99, 255, 244, 0.7);
}

.booking-option strong {
  margin-top: 9px;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(0.68rem, 0.7vw, 0.86rem);
  line-height: 1.22;
}

.booking-option small {
  margin-top: 7px;
  color: rgba(232, 255, 252, 0.54);
  font-size: 0.58rem;
}

.booking-options-compact .booking-option {
  min-height: 76px;
}

.booking-options:has(.booking-option:hover) .booking-option:not(:hover),
.booking-options:has(.booking-option:focus-visible) .booking-option:not(:focus-visible) {
  opacity: 0.58;
}

.booking-option.is-selected {
  background:
    linear-gradient(90deg, rgba(242, 180, 95, 0.14), rgba(18, 200, 187, 0.07)),
    rgba(6, 44, 46, 0.42);
  box-shadow: inset 0 0 30px rgba(242, 180, 95, 0.08);
}

.booking-option.is-selected span {
  color: #f2b45f;
  text-shadow: 0 0 10px rgba(242, 180, 95, 0.66);
}

.booking-option:hover,
.booking-option:focus-visible {
  color: #ffffff;
  background:
    linear-gradient(90deg, rgba(18, 200, 187, 0.24), rgba(18, 200, 187, 0.06)),
    rgba(4, 42, 48, 0.38);
  box-shadow:
    inset 0 0 32px rgba(18, 200, 187, 0.22),
    0 0 22px rgba(18, 200, 187, 0.2);
  outline: 1px solid rgba(99, 255, 244, 0.68);
  transform: translateY(-1px);
}

.booking-option:hover::before,
.booking-option:focus-visible::before {
  opacity: 1;
  transform: translateX(0);
  animation: buttonSweep 1.25s linear infinite;
}

.booking-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

.booking-form label {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.booking-intention,
.booking-submit,
.booking-confirmation {
  grid-column: 1 / -1;
}

.booking-form input,
.booking-form textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(18, 200, 187, 0.22);
  border-radius: 0;
  color: rgba(241, 246, 241, 0.92);
  background:
    linear-gradient(180deg, rgba(1, 19, 24, 0.34), rgba(3, 9, 13, 0.28)),
    rgba(2, 13, 18, 0.22);
  box-shadow: inset 0 0 18px rgba(18, 200, 187, 0.08);
  font: inherit;
  font-family: var(--archive-font);
  font-size: 0.78rem;
  outline: none;
}

.booking-form input {
  min-height: 42px;
  padding: 0 12px;
}

.booking-form textarea {
  min-height: 86px;
  resize: vertical;
  padding: 11px 12px;
}

.booking-form input::placeholder,
.booking-form textarea::placeholder {
  color: rgba(232, 255, 252, 0.34);
}

.booking-form input:focus,
.booking-form textarea:focus {
  border-color: rgba(242, 180, 95, 0.76);
  box-shadow:
    inset 0 0 22px rgba(18, 200, 187, 0.14),
    0 0 18px rgba(242, 180, 95, 0.12);
}

.booking-submit {
  min-height: 42px;
  border: 1px solid rgba(242, 180, 95, 0.76);
  border-radius: 3px;
  color: #07100f;
  background: #f2b45f;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.22);
  font-family: var(--archive-font);
  font-size: 0.72rem;
  font-weight: 820;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    filter 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.booking-submit:hover,
.booking-submit:focus-visible {
  filter: brightness(1.08);
  outline: none;
  transform: translateY(-1px);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.28),
    0 0 20px rgba(242, 180, 95, 0.22);
}

.booking-confirmation {
  min-height: 24px;
  margin: 0;
  color: rgba(241, 246, 241, 0.72);
  font-family: var(--archive-font);
  font-size: 0.68rem;
  line-height: 1.4;
  text-transform: uppercase;
}

.work-system-section,
.contact-section {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: clamp(44px, 6vh, 80px) 22px;
  overflow: hidden;
  color: rgba(232, 255, 252, 0.94);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  isolation: isolate;
}

.work-system-section {
  background: #17221f;
}

.contact-section {
  background:
    radial-gradient(circle at 28% 32%, rgba(99, 255, 244, 0.26), transparent 30%),
    radial-gradient(circle at 72% 68%, rgba(242, 180, 95, 0.18), transparent 36%),
    linear-gradient(180deg, #101c1a 0%, #172724 52%, #0d1715 100%);
}

.work-system-section::before,
.work-system-section::after,
.contact-section::before,
.contact-section::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: "";
}

.contact-section::before {
  background:
    linear-gradient(90deg, rgba(18, 200, 187, 0.07) 1px, transparent 1px),
    linear-gradient(0deg, rgba(18, 200, 187, 0.05) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: radial-gradient(circle at 50% 50%, #000 0 48%, transparent 82%);
  opacity: 0.58;
}

.contact-section::after {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 5px),
    radial-gradient(circle at 50% 50%, transparent 0 38%, rgba(5, 14, 13, 0.38) 88%);
  box-shadow: inset 0 0 92px rgba(0, 0, 0, 0.34);
  opacity: 0.68;
}

.work-system-section::before {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(248, 244, 233, 0.032) 1px, transparent 1px),
    linear-gradient(0deg, rgba(248, 244, 233, 0.022) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(circle at 50% 48%, #000 0 28%, transparent 74%);
  opacity: 0.38;
}

.work-system-section::after {
  z-index: 2;
  background:
    radial-gradient(circle at 50% 50%, rgba(248, 244, 233, 0.04) 0 16%, transparent 44%, rgba(8, 17, 15, 0.42) 90%),
    linear-gradient(180deg, rgba(15, 26, 23, 0.28), transparent 30%, transparent 72%, rgba(13, 22, 20, 0.48));
  box-shadow: inset 0 0 76px rgba(0, 0, 0, 0.28);
  opacity: 0.72;
}

.work-toroid-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.work-system-shell,
.contact-shell {
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: center;
  width: min(1180px, calc(100vw - 36px));
  text-align: center;
}

.work-system-shell {
  justify-items: center;
  text-align: center;
  transform: translateY(clamp(-18px, -2.4vh, -8px));
  padding: 0 clamp(18px, 3vw, 34px) clamp(28px, 4vh, 44px);
  border: 1px solid rgba(156, 176, 176, 0.28);
  background:
    linear-gradient(180deg, rgba(17, 44, 45, 0.42), rgba(10, 22, 22, 0.28)),
    rgba(8, 18, 18, 0.22);
  box-shadow:
    0 0 0 1px rgba(227, 168, 95, 0.08),
    0 24px 76px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px) saturate(1.08);
  overflow: hidden;
}

.work-system-shell::before,
.work-system-shell::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: "";
}

.work-system-shell::before {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 5px),
    linear-gradient(90deg, rgba(18, 200, 187, 0.035), transparent 34%, rgba(227, 168, 95, 0.03));
  opacity: 0.62;
}

.work-system-shell::after {
  border: 1px solid rgba(109, 255, 244, 0.1);
  box-shadow: inset 0 0 42px rgba(18, 200, 187, 0.07);
}

.work-system-shell > * {
  position: relative;
  z-index: 1;
}

.work-archive-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  align-self: stretch;
  min-height: 36px;
  margin: 0 clamp(-34px, -3vw, -18px) clamp(28px, 4vh, 42px);
  padding: 0 clamp(14px, 2vw, 22px);
  border-bottom: 1px solid rgba(156, 176, 176, 0.25);
  color: rgba(244, 236, 220, 0.62);
  background:
    linear-gradient(90deg, rgba(21, 75, 82, 0.28), rgba(14, 35, 42, 0.24)),
    rgba(10, 22, 22, 0.34);
  font-family: var(--archive-font);
  font-size: clamp(0.56rem, 0.68vw, 0.72rem);
  font-weight: 650;
  letter-spacing: 0.11em;
  line-height: 1;
  text-transform: uppercase;
}

.work-archive-header span:first-child {
  justify-self: start;
  color: rgba(99, 255, 244, 0.74);
  text-shadow: 0 0 10px rgba(99, 255, 244, 0.32);
}

.work-archive-header span:nth-child(2) {
  justify-self: end;
  color: rgba(244, 236, 220, 0.78);
}

.work-archive-header span:last-child {
  justify-self: end;
  color: rgba(227, 168, 95, 0.66);
}

.system-kicker {
  margin: 0 0 14px;
  color: #63fff4;
  font-family: var(--archive-font);
  font-size: clamp(0.66rem, 0.72vw, 0.82rem);
  font-weight: 780;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 0 14px rgba(99, 255, 244, 0.44);
}

.work-system-shell h2,
.contact-shell h2 {
  max-width: 13ch;
  margin: 0;
  color: #f8f4e9;
  font-size: clamp(2rem, 5.6vw, 5.8rem);
  font-weight: 520;
  line-height: 0.94;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow:
    0 0 24px rgba(18, 200, 187, 0.24),
    0 18px 58px rgba(0, 0, 0, 0.52);
}

.work-system-shell h2 {
  display: grid;
  width: min(1040px, 92vw);
  max-width: none;
  justify-self: center;
  color: #f4ecdc;
  font-family: var(--display-font);
  font-size: clamp(1.6rem, 3.15vw, 3.65rem);
  font-weight: 420;
  line-height: 1.04;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
  text-shadow:
    0 0 18px rgba(242, 180, 95, 0.12),
    0 18px 48px rgba(0, 0, 0, 0.42);
}

.work-system-main,
.work-system-soon {
  display: block;
}

.work-system-main {
  white-space: nowrap;
}

.work-title-accent {
  color: #e3a85f;
  text-shadow:
    0 0 10px rgba(227, 168, 95, 0.34),
    0 0 24px rgba(227, 168, 95, 0.14);
}

.glitch-text {
  position: relative;
  display: inline-block;
  text-shadow:
    0 0 7px rgba(255, 255, 255, 0.18),
    1px 0 0 rgba(0, 255, 255, 0.12),
    -1px 0 0 rgba(255, 0, 128, 0.1),
    0 0 18px rgba(0, 255, 255, 0.12);
  animation:
    comingSoonGlitchDrift 4.8s steps(1, end) infinite,
    cyberpunkGlitchFlicker 12s steps(1, end) infinite;
  isolation: isolate;
}

.glitch-text::before,
.glitch-text::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: attr(data-text);
  opacity: 0.22;
  mix-blend-mode: screen;
}

.glitch-text::before {
  color: rgba(0, 255, 255, 0.62);
  clip-path: inset(0 0 58% 0);
  text-shadow:
    0 0 8px rgba(0, 255, 255, 0.32),
    0 0 18px rgba(0, 255, 255, 0.16);
  transform: translate(-1px, 0);
  animation: comingSoonGlitchA 3.1s steps(1, end) infinite;
}

.glitch-text::after {
  color: rgba(255, 0, 128, 0.52);
  clip-path: inset(42% 0 0 0);
  text-shadow:
    0 0 8px rgba(255, 0, 128, 0.28),
    0 0 18px rgba(255, 0, 128, 0.12);
  transform: translate(1px, 0);
  animation: comingSoonGlitchB 3.4s steps(1, end) infinite;
}

.work-info-button {
  position: relative;
  z-index: 7;
  margin: clamp(14px, 2.2vh, 22px) 0 0;
  min-height: 44px;
  padding: 12px 24px;
  color: rgba(244, 236, 220, 0.84);
  background:
    linear-gradient(90deg, rgba(227, 168, 95, 0.08), rgba(248, 244, 233, 0.035)),
    rgba(10, 17, 16, 0.42);
  border: 1px solid rgba(227, 168, 95, 0.3);
  border-radius: 999px;
  font-family: var(--archive-font);
  font-size: clamp(0.68rem, 0.82vw, 0.82rem);
  font-weight: 560;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
  box-shadow:
    0 0 18px rgba(227, 168, 95, 0.06),
    inset 0 0 18px rgba(248, 244, 233, 0.025);
  cursor: pointer;
  transition:
    border-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
  isolation: isolate;
}

.work-info-button::before,
.work-info-button::after {
  position: absolute;
  inset: -7px;
  z-index: -1;
  pointer-events: none;
  content: "";
  border-radius: inherit;
}

.work-info-button::before {
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg 42deg,
      rgba(227, 168, 95, 0.72) 43deg 50deg,
      transparent 51deg 158deg,
      rgba(248, 244, 233, 0.42) 159deg 166deg,
      transparent 167deg 270deg,
      rgba(227, 168, 95, 0.52) 271deg 278deg,
      transparent 279deg 360deg
    );
  opacity: 0.5;
  filter:
    drop-shadow(0 0 7px rgba(227, 168, 95, 0.22))
    drop-shadow(0 0 12px rgba(248, 244, 233, 0.08));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  padding: 1px;
}

.work-info-button::after {
  inset: -13px;
  border-top: 1px solid rgba(227, 168, 95, 0.3);
  border-bottom: 1px solid rgba(248, 244, 233, 0.14);
  opacity: 0.28;
  transform: rotate(0deg);
}

.work-button-glitch {
  position: relative;
  display: inline-block;
  text-shadow:
    0 0 10px rgba(227, 168, 95, 0.34),
    1px 0 0 rgba(0, 255, 255, 0.1),
    -1px 0 0 rgba(255, 0, 128, 0.08);
  animation:
    workAccentGlitch 5.4s steps(1, end) infinite,
    workAccentFlicker 9s steps(1, end) infinite;
  isolation: isolate;
}

.work-button-glitch::before,
.work-button-glitch::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: attr(data-text);
  opacity: 0.22;
  mix-blend-mode: screen;
}

.work-button-glitch::before {
  color: rgba(0, 255, 255, 0.46);
  clip-path: inset(0 0 52% 0);
  transform: translate(-1px, 0);
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.22);
  animation: workAccentSliceA 5.8s steps(1, end) infinite;
}

.work-button-glitch::after {
  color: rgba(255, 0, 128, 0.38);
  clip-path: inset(46% 0 0 0);
  transform: translate(1px, 0);
  text-shadow: 0 0 10px rgba(255, 0, 128, 0.18);
  animation: workAccentSliceB 6.2s steps(1, end) infinite;
}

.work-info-button:hover,
.work-info-button:focus-visible,
.work-info-button[aria-expanded="true"] {
  color: #f2b45f;
  border-color: rgba(227, 168, 95, 0.68);
  box-shadow:
    0 0 22px rgba(227, 168, 95, 0.14),
    inset 0 0 18px rgba(227, 168, 95, 0.045);
  outline: none;
  transform: translateY(-1px);
}

.work-info-panel {
  width: min(760px, 86vw);
  max-height: 0;
  margin: 0 auto;
  overflow: hidden;
  color: rgba(244, 236, 220, 0.74);
  font-family: var(--archive-font);
  font-size: clamp(0.68rem, 0.78vw, 0.84rem);
  line-height: 1.58;
  text-align: center;
  border-top: 1px solid rgba(227, 168, 95, 0.2);
  text-shadow: none;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    max-height 460ms ease,
    margin 460ms ease,
    opacity 320ms ease,
    transform 460ms ease;
}

.work-info-panel.is-open {
  max-height: 320px;
  margin-top: clamp(16px, 2.4vh, 24px);
  padding-top: clamp(14px, 2vh, 20px);
  opacity: 1;
  transform: translateY(0);
}

.work-info-panel p {
  margin: 0 auto 9px;
  max-width: 76ch;
}

.work-info-panel p:last-child {
  margin-bottom: 0;
}

.work-info-panel strong {
  color: rgba(227, 168, 95, 0.92);
  font-weight: 620;
}

.work-track {
  margin: clamp(14px, 2.2vh, 22px) 0 0;
  color: rgba(227, 168, 95, 0.86);
  font-family: var(--archive-font);
  font-size: clamp(0.58rem, 0.82vw, 0.78rem);
  font-weight: 560;
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-transform: uppercase;
  text-shadow:
    0 0 10px rgba(227, 168, 95, 0.18);
}

.work-track-glitch {
  position: relative;
  display: inline-block;
  pointer-events: none;
  text-shadow:
    0 0 10px rgba(227, 168, 95, 0.34),
    1px 0 0 rgba(0, 255, 255, 0.08),
    -1px 0 0 rgba(255, 0, 128, 0.07);
  animation:
    workAccentGlitch 5.4s steps(1, end) infinite,
    workAccentFlicker 9s steps(1, end) infinite;
  isolation: isolate;
}

.work-track-glitch::before,
.work-track-glitch::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: attr(data-text);
  opacity: 0.18;
  mix-blend-mode: screen;
}

.work-track-glitch::before {
  color: rgba(0, 255, 255, 0.38);
  clip-path: inset(0 0 52% 0);
  transform: translate(-1px, 0);
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.18);
  animation: workAccentSliceA 5.8s steps(1, end) infinite;
}

.work-track-glitch::after {
  color: rgba(255, 0, 128, 0.34);
  clip-path: inset(46% 0 0 0);
  transform: translate(1px, 0);
  text-shadow: 0 0 10px rgba(255, 0, 128, 0.16);
  animation: workAccentSliceB 6.2s steps(1, end) infinite;
}

.work-track-x {
  color: #ffffff;
  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.36);
}

.work-system-soon {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(24px, 4.4vh, 46px);
  z-index: 3;
  display: block;
  justify-self: center;
  color: #ffffff;
  font-family: var(--archive-font);
  font-size: clamp(0.5rem, 0.76vw, 0.72rem);
  font-weight: 430;
  letter-spacing: 0.2em;
  line-height: 1.2;
  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.22);
  text-align: center;
}

.work-system-soon::before {
  color: rgba(255, 255, 255, 0.66);
}

.work-system-soon::after {
  color: rgba(255, 255, 255, 0.44);
}

@keyframes comingSoonGlitchDrift {
  0%,
  82%,
  100% {
    transform: translate(0);
  }

  84% {
    transform: translate(1px, 0) skewX(0.5deg);
  }

  86% {
    transform: translate(-1px, 1px) skewX(-0.8deg);
  }

  88% {
    transform: translate(0, -1px);
  }

  90% {
    transform: translate(-1px, 0);
  }

  92% {
    transform: translate(0);
  }
}

@keyframes comingSoonGlitchA {
  0%,
  74%,
  100% {
    clip-path: inset(0 0 58% 0);
    transform: translate(-1px, 0);
  }

  76% {
    clip-path: inset(2% 0 82% 0);
    transform: translate(2px, -1px);
  }

  78% {
    clip-path: inset(30% 0 46% 0);
    transform: translate(-2px, 1px);
  }

  80% {
    clip-path: inset(68% 0 12% 0);
    transform: translate(2px, 0);
  }

  82% {
    clip-path: inset(12% 0 64% 0);
    transform: translate(-1px, 0);
  }
}

@keyframes comingSoonGlitchB {
  0%,
  70%,
  100% {
    clip-path: inset(42% 0 0 0);
    transform: translate(1px, 0);
  }

  72% {
    clip-path: inset(78% 0 2% 0);
    transform: translate(-2px, 1px);
  }

  75% {
    clip-path: inset(38% 0 40% 0);
    transform: translate(2px, -1px);
  }

  78% {
    clip-path: inset(8% 0 76% 0);
    transform: translate(-2px, 1px);
  }

  81% {
    clip-path: inset(54% 0 18% 0);
    transform: translate(1px, 0);
  }
}

@keyframes cyberpunkGlitchFlicker {
  0%,
  100% {
    filter: brightness(1) saturate(1);
  }

  12% {
    filter: brightness(1.12) saturate(1.12);
  }

  13% {
    filter: brightness(0.94) saturate(1.22);
  }

  14%,
  58% {
    filter: brightness(1) saturate(1);
  }

  59% {
    filter: brightness(1.16) saturate(1.18);
  }

  61% {
    filter: brightness(0.96) saturate(1.08);
  }
}

@keyframes workAccentGlitch {
  0%,
  58%,
  100% {
    transform: translate(0);
  }

  60% {
    transform: translate(3px, -1px) skewX(2deg);
  }

  63% {
    transform: translate(-4px, 2px) skewX(-3deg);
  }

  66% {
    transform: translate(2px, -1px);
  }

  70% {
    transform: translate(-2px, 1px);
  }

  73% {
    transform: translate(0);
  }
}

@keyframes workAccentSliceA {
  0%,
  46%,
  100% {
    clip-path: inset(0 0 52% 0);
    transform: translate(-4px, -1px);
  }

  48% {
    clip-path: inset(4% 0 78% 0);
    transform: translate(12px, -2px);
  }

  51% {
    clip-path: inset(34% 0 34% 0);
    transform: translate(-10px, 2px);
  }

  54% {
    clip-path: inset(72% 0 8% 0);
    transform: translate(8px, 0);
  }

  57% {
    clip-path: inset(12% 0 64% 0);
    transform: translate(-5px, -1px);
  }
}

@keyframes workAccentSliceB {
  0%,
  42%,
  100% {
    clip-path: inset(46% 0 0 0);
    transform: translate(4px, 1px);
  }

  44% {
    clip-path: inset(80% 0 2% 0);
    transform: translate(-12px, 2px);
  }

  47% {
    clip-path: inset(28% 0 48% 0);
    transform: translate(10px, -1px);
  }

  51% {
    clip-path: inset(6% 0 78% 0);
    transform: translate(-8px, 1px);
  }

  54% {
    clip-path: inset(58% 0 16% 0);
    transform: translate(5px, 1px);
  }
}

@keyframes workAccentFlicker {
  0%,
  100% {
    filter: brightness(1) saturate(1);
  }

  18% {
    filter: brightness(1.55) saturate(1.4);
  }

  20% {
    filter: brightness(0.86) saturate(1.85);
  }

  22%,
  70% {
    filter: brightness(1) saturate(1);
  }

  72% {
    filter: brightness(1.45) saturate(1.55);
  }

  74% {
    filter: brightness(0.92) saturate(1.18);
  }
}

@keyframes workButtonOrbit {
  to {
    transform: rotate(360deg);
  }
}

.work-symbol-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  justify-items: center;
  gap: 0;
  width: min(920px, 86vw);
  margin: clamp(38px, 4.8vh, 56px) auto 0;
  min-height: min(280px, 34vh);
  text-align: center;
  transition:
    margin 460ms ease,
    min-height 460ms ease;
}

.work-system-section.is-info-open .work-symbol-grid {
  margin-top: clamp(30px, 3.8vh, 48px);
  min-height: min(250px, 30vh);
}

.work-symbol-grid::before {
  content: none;
}

.work-symbol-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: center;
  gap: clamp(10px, 1.2vw, 15px);
  width: 100%;
  min-height: min(284px, 31vh);
  margin: 0;
  padding: clamp(18px, 2.4vw, 28px) clamp(14px, 2vw, 24px);
  overflow: visible;
  border: 1px solid rgba(156, 176, 176, 0.18);
  border-right-width: 0;
  background:
    linear-gradient(180deg, rgba(248, 244, 233, 0.025), transparent 44%),
    rgba(2, 13, 18, 0.13);
  filter: none;
  transition:
    background 240ms ease,
    border-color 240ms ease,
    filter 240ms ease,
    opacity 240ms ease,
    transform 240ms ease;
}

.work-symbol-card:first-child {
  border-radius: 3px 0 0 3px;
}

.work-symbol-card:last-child {
  border-right-width: 1px;
  border-radius: 0 3px 3px 0;
}

.work-symbol-card:hover,
.work-symbol-card:focus-within {
  border-color: rgba(227, 168, 95, 0.38);
  background:
    linear-gradient(180deg, rgba(227, 168, 95, 0.065), transparent 48%),
    rgba(6, 34, 35, 0.22);
  opacity: 1;
  transform: translateY(-3px);
  filter:
    drop-shadow(0 0 12px rgba(248, 244, 233, 0.28))
    drop-shadow(0 0 26px rgba(227, 168, 95, 0.18));
}

.work-system-section.is-info-open .work-symbol-card {
  min-height: min(286px, 29vh);
}

.work-symbol-card::before,
.work-symbol-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.work-symbol-card::before {
  top: 12px;
  left: 14px;
  color: rgba(99, 255, 244, 0.54);
  content: "FILE";
  font-family: var(--archive-font);
  font-size: 0.54rem;
  font-weight: 720;
  letter-spacing: 0.14em;
  text-shadow: 0 0 8px rgba(99, 255, 244, 0.24);
  opacity: 0.8;
}

.work-symbol-card::after {
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 5px);
  opacity: 0.58;
  transition: opacity 240ms ease;
}

.work-symbol-card:hover::after,
.work-symbol-card:focus-within::after {
  opacity: 0.76;
}

.work-symbol-card img {
  position: relative;
  z-index: 1;
  display: block;
  width: min(150px, 13vw);
  height: min(150px, 13vw);
  object-fit: contain;
  opacity: 0.82;
  filter: brightness(1.02) contrast(1.02);
  mix-blend-mode: screen;
  transition:
    filter 240ms ease,
    opacity 240ms ease;
}

.work-symbol-card:hover img,
.work-symbol-card:focus-within img {
  opacity: 0.96;
  filter: brightness(1.15) contrast(1.04);
}

.work-symbol-card figcaption {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: 12px;
  border-top: 1px solid rgba(156, 176, 176, 0.18);
  color: rgba(244, 236, 220, 0.76);
  font-family: var(--archive-font);
  font-size: clamp(0.58rem, 0.72vw, 0.72rem);
  font-weight: 540;
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(227, 168, 95, 0.1);
  transition:
    color 220ms ease,
    text-shadow 220ms ease;
}

.work-symbol-card:hover figcaption,
.work-symbol-card:focus-within figcaption {
  color: rgba(227, 168, 95, 0.92);
  text-shadow: 0 0 14px rgba(227, 168, 95, 0.22);
}

.contact-shell {
  z-index: 2;
  display: grid;
  place-items: center;
  width: min(820px, calc(100vw - 48px));
  transform: translateY(clamp(-54px, -5vh, -28px));
}

.contact-shell h2.contact-title {
  display: grid;
  justify-items: center;
  gap: clamp(8px, 1.2vh, 14px);
  color: #f8f4e9;
  font-family: var(--display-font);
  font-size: clamp(1.55rem, 3.9vw, 4.45rem);
  font-weight: 420;
  letter-spacing: 0.01em;
  line-height: 1.04;
  max-width: min(12ch, 100%);
  margin: 0;
  text-transform: none;
  text-shadow:
    0 0 18px rgba(242, 180, 95, 0.14),
    0 16px 48px rgba(0, 0, 0, 0.46);
}

.contact-title span {
  display: block;
  white-space: nowrap;
}

.contact-title a {
  display: block;
  color: #f2b45f;
  text-decoration: none;
  text-shadow:
    0 0 14px rgba(242, 180, 95, 0.42),
    0 0 34px rgba(242, 180, 95, 0.16);
  transition:
    color 180ms ease,
    text-shadow 180ms ease;
}

.contact-title a:hover,
.contact-title a:focus-visible {
  color: #fff4d8;
  text-shadow:
    0 0 18px rgba(242, 180, 95, 0.58),
    0 0 46px rgba(242, 180, 95, 0.22);
  outline: none;
}

.contact-toroid-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.58;
  mix-blend-mode: screen;
  pointer-events: none;
}

.lazy-reveal {
  opacity: 0;
  transform: translateY(34px) scale(0.98);
  transition:
    opacity 780ms ease,
    transform 780ms cubic-bezier(0.16, 1, 0.3, 1);
}

.lazy-reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.booking-controls .lazy-reveal:nth-child(2) {
  transition-delay: 110ms;
}

.booking-controls .lazy-reveal:nth-child(3) {
  transition-delay: 220ms;
}

.vortex-section {
  position: relative;
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100svh;
  min-height: 560px;
  padding: 0;
  overflow: hidden;
  color: #f8f4e9;
  background:
    radial-gradient(circle at 50% 48%, rgba(99, 255, 244, 0.26), transparent 30%),
    radial-gradient(circle at 53% 51%, rgba(242, 180, 95, 0.14), transparent 42%),
    linear-gradient(180deg, #101c1a 0%, #172724 54%, #0d1715 100%);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  isolation: isolate;
}

.vortex-section::before,
.vortex-section::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  content: "";
}

.vortex-section::before {
  background:
    linear-gradient(90deg, rgba(248, 244, 233, 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(248, 244, 233, 0.032) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 50% 48%, #000 0 36%, transparent 73%);
  opacity: 0.8;
  animation: vortexGridDrift 12s linear infinite;
  will-change: transform;
}

.vortex-section::after {
  z-index: 5;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 26%, rgba(12, 23, 21, 0.1) 46%, rgba(7, 17, 15, 0.48) 84%),
    linear-gradient(180deg, rgba(12, 23, 21, 0.48), transparent 32%, transparent 70%, rgba(12, 23, 21, 0.52));
  box-shadow:
    inset 0 0 92px rgba(0, 0, 0, 0.34),
    inset 0 0 44px rgba(18, 200, 187, 0.08);
}

.vortex-canvas {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 1;
  transform-origin: center;
  will-change: transform;
}

.vortex-section.is-vortex-entering .vortex-canvas {
  animation: vortexCanvasSurge 3.15s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

@keyframes vortexCanvasSurge {
  0% {
    transform: scale(0.945);
  }

  62% {
    transform: scale(1.015);
  }

  100% {
    transform: scale(1);
  }
}

.vortex-shade {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(99, 255, 244, 0.24), transparent 9%),
    radial-gradient(circle at 50% 50%, transparent 0 22%, rgba(18, 200, 187, 0.12) 38%, transparent 56%),
    conic-gradient(from 180deg at 50% 50%, transparent 0deg, rgba(242, 180, 95, 0.12) 70deg, transparent 146deg, rgba(18, 200, 187, 0.16) 250deg, transparent 360deg),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 5px);
  box-shadow:
    inset 0 0 70px rgba(18, 200, 187, 0.08),
    inset 0 0 150px rgba(0, 0, 0, 0.58);
  mix-blend-mode: screen;
}

.vortex-shade::before,
.vortex-shade::after {
  content: none;
}

.vortex-shade::before {
  background:
    conic-gradient(
      from 12deg at 50% 50%,
      transparent 0deg,
      rgba(99, 255, 244, 0.18) 34deg,
      transparent 72deg,
      rgba(242, 180, 95, 0.14) 134deg,
      transparent 190deg,
      rgba(248, 244, 233, 0.1) 252deg,
      transparent 360deg
    );
  opacity: 0.54;
  animation: vortexOverlaySpin 12s linear infinite;
}

.vortex-shade::after {
  background:
    repeating-conic-gradient(
      from 0deg at 50% 50%,
      rgba(248, 244, 233, 0.16) 0deg 0.7deg,
      transparent 0.7deg 9deg
    );
  mask-image: radial-gradient(circle at 50% 50%, transparent 0 9%, #000 12% 55%, transparent 74%);
  opacity: 0.18;
  animation: vortexOverlaySpin 12s linear infinite reverse;
}

@keyframes vortexGridDrift {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  100% {
    transform: translate3d(44px, 44px, 0) rotate(0.001deg);
  }
}

@keyframes vortexOverlaySpin {
  0% {
    transform: rotate(0deg) scale(1);
  }

  50% {
    transform: rotate(180deg) scale(1.025);
  }

  100% {
    transform: rotate(360deg) scale(1);
  }
}

.vortex-title {
  position: relative;
  z-index: 6;
  width: min(17ch, calc(100vw - 34px));
  margin: 0;
  color: #f8f4e9;
  font-size: clamp(1.45rem, 3.8vw, 3.8rem);
  font-weight: 420;
  line-height: 0.96;
  letter-spacing: 0;
  text-align: center;
  font-family: var(--display-font);
  text-transform: none;
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.24),
    1px 0 0 rgba(0, 255, 255, 0.1),
    -1px 0 0 rgba(255, 0, 128, 0.09),
    0 0 26px rgba(18, 200, 187, 0.18),
    0 16px 52px rgba(0, 0, 0, 0.92);
  animation:
    titleGlitchDrift 3.6s steps(1, end) infinite,
    cyberpunkGlitchFlicker 8.8s steps(1, end) infinite;
  isolation: isolate;
}

.vortex-title::before,
.vortex-title::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: attr(data-text);
  opacity: 0.28;
  text-shadow: none;
  mix-blend-mode: screen;
}

.vortex-title::before {
  color: rgba(0, 255, 255, 0.58);
  clip-path: inset(12% 0 62% 0);
  transform: translate(-1px, 0);
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.28);
  animation: titleGlitchSliceA 3.2s steps(1, end) infinite;
}

.vortex-title::after {
  color: rgba(255, 0, 128, 0.46);
  clip-path: inset(58% 0 16% 0);
  transform: translate(1px, 0);
  text-shadow: 0 0 10px rgba(255, 0, 128, 0.24);
  animation: titleGlitchSliceB 3.4s steps(1, end) infinite;
}

@keyframes titleGlitchDrift {
  0%,
  82%,
  100% {
    transform: translate(0);
  }

  84% {
    transform: translate(1px, 0) skewX(0.6deg);
  }

  86% {
    transform: translate(-1px, 1px) skewX(-0.8deg);
  }

  88% {
    transform: translate(0, -1px);
  }

  90% {
    transform: translate(-1px, 0);
  }

  92% {
    transform: translate(0);
  }
}

@keyframes titleGlitchSliceA {
  0%,
  76%,
  100% {
    clip-path: inset(12% 0 62% 0);
    transform: translate(-1px, 0);
  }

  78% {
    clip-path: inset(3% 0 82% 0);
    transform: translate(2px, -1px);
  }

  80% {
    clip-path: inset(42% 0 34% 0);
    transform: translate(-2px, 1px);
  }

  82% {
    clip-path: inset(72% 0 8% 0);
    transform: translate(2px, 0);
  }

  84% {
    clip-path: inset(18% 0 57% 0);
    transform: translate(-1px, 0);
  }
}

@keyframes titleGlitchSliceB {
  0%,
  72%,
  100% {
    clip-path: inset(58% 0 16% 0);
    transform: translate(1px, 0);
  }

  74% {
    clip-path: inset(72% 0 5% 0);
    transform: translate(-2px, 1px);
  }

  76% {
    clip-path: inset(30% 0 50% 0);
    transform: translate(2px, -1px);
  }

  79% {
    clip-path: inset(6% 0 78% 0);
    transform: translate(-2px, 0);
  }

  82% {
    clip-path: inset(58% 0 16% 0);
    transform: translate(1px, 0);
  }
}

@keyframes buttonSweep {
  from {
    transform: translateX(-120%);
  }

  to {
    transform: translateX(120%);
  }
}

@keyframes purposeEdgeTwinkle {
  0%,
  100% {
    border-color: rgba(227, 168, 95, 0.3);
    background-position: 160% 0, 0 0;
    box-shadow:
      inset 0 0 0 1px rgba(227, 168, 95, 0.06),
      0 0 8px rgba(227, 168, 95, 0.06);
    opacity: 0.58;
  }

  34% {
    border-color: rgba(227, 168, 95, 0.46);
    background-position: 90% 0, 0 0;
    box-shadow:
      inset 0 0 0 1px rgba(227, 168, 95, 0.12),
      0 0 13px rgba(227, 168, 95, 0.12);
    opacity: 0.76;
  }

  39% {
    border-color: rgba(255, 255, 255, 0.56);
    background-position: 44% 0, 0 0;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.22),
      0 0 18px rgba(227, 168, 95, 0.18),
      0 0 8px rgba(255, 255, 255, 0.12);
    opacity: 0.96;
  }

  46% {
    border-color: rgba(227, 168, 95, 0.38);
    background-position: -20% 0, 0 0;
    box-shadow:
      inset 0 0 0 1px rgba(227, 168, 95, 0.08),
      0 0 10px rgba(227, 168, 95, 0.08);
    opacity: 0.66;
  }
}

@keyframes entrySpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.message-box p {
  margin: 0;
}

#message-copy {
  color: rgba(241, 246, 241, 0.9);
  font-size: clamp(0.76rem, 0.66rem + 0.24vw, 0.9rem);
  line-height: 1.55;
}

.reset-button:not(.close-button) {
  width: auto;
  min-height: 40px;
  margin-top: 18px;
  padding: 0 16px;
  color: #07100f;
  background: #f2b45f;
  border-color: rgba(242, 180, 95, 0.85);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.22);
}

.section-scroll-cue {
  position: absolute;
  right: 0;
  bottom: clamp(18px, 3.1vh, 34px);
  left: 0;
  z-index: 8;
  display: grid;
  justify-items: center;
  width: 46px;
  margin: 0 auto;
  pointer-events: none;
  opacity: 0.86;
  filter:
    drop-shadow(0 0 8px rgba(99, 255, 244, 0.68))
    drop-shadow(0 0 18px rgba(242, 180, 95, 0.2));
  mix-blend-mode: screen;
}

.stage .section-scroll-cue {
  z-index: 4;
}

.section-scroll-cue::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(99, 255, 244, 0.16);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 255, 244, 0.1), transparent 68%);
  transform: translate(-50%, -50%);
  animation: scrollCueHalo 2.4s ease-in-out infinite;
}

.section-scroll-cue span {
  position: relative;
  display: block;
  width: 13px;
  height: 13px;
  border-right: 2px solid rgba(235, 255, 252, 0.92);
  border-bottom: 2px solid rgba(235, 255, 252, 0.92);
  transform: translateY(-8px) rotate(45deg);
  animation: sectionCueDown 1.55s ease-in-out infinite;
}

.section-scroll-cue span + span {
  margin-top: -4px;
  border-color: rgba(242, 180, 95, 0.76);
  animation-delay: 180ms;
}

.section-scroll-cue.is-up-cue span {
  transform: translateY(8px) rotate(225deg);
  animation-name: sectionCueUp;
}

.work-scroll-cue {
  bottom: clamp(58px, 8.5vh, 86px);
}

/* Contact-theme pass applied sitewide */
.stage,
.vortex-section,
.work-system-section,
.booking-section,
.contact-section {
  color: rgba(232, 255, 252, 0.94);
  background:
    radial-gradient(circle at 28% 32%, rgba(99, 255, 244, 0.26), transparent 30%),
    radial-gradient(circle at 72% 68%, rgba(242, 180, 95, 0.18), transparent 36%),
    linear-gradient(180deg, #101c1a 0%, #172724 52%, #0d1715 100%);
}

.stage::before,
.vortex-section::before,
.work-system-section::before,
.booking-section::before,
.contact-section::before {
  background:
    linear-gradient(90deg, rgba(18, 200, 187, 0.07) 1px, transparent 1px),
    linear-gradient(0deg, rgba(18, 200, 187, 0.05) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: radial-gradient(circle at 50% 50%, #000 0 48%, transparent 82%);
  opacity: 0.58;
}

.stage::after,
.vortex-section::after,
.work-system-section::after,
.booking-section::after,
.contact-section::after {
  inset: 0;
  height: auto;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 5px),
    radial-gradient(circle at 50% 50%, transparent 0 38%, rgba(5, 14, 13, 0.38) 88%);
  box-shadow: inset 0 0 92px rgba(0, 0, 0, 0.34);
  opacity: 0.68;
}

.stage.is-awaiting::before {
  opacity: 0.58;
}

.stage.is-awaiting::after {
  opacity: 0.68;
}

.portal-console,
.message-box,
.work-system-shell,
.booking-console {
  color: rgba(232, 255, 252, 0.95);
  border-color: rgba(18, 124, 116, 0.46);
  background:
    linear-gradient(180deg, rgba(13, 48, 52, 0.44), rgba(10, 25, 28, 0.3)),
    rgba(14, 38, 40, 0.24);
  box-shadow:
    0 0 0 1px rgba(18, 124, 116, 0.12),
    0 20px 70px rgba(0, 0, 0, 0.28),
    inset 0 0 44px rgba(18, 200, 187, 0.08);
}

@media (max-width: 720px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .stage {
    overflow-x: hidden;
  }

  .message-box {
    top: 50%;
    left: 50%;
    width: calc(100vw - 32px);
    max-width: calc(100vw - 32px);
    height: min(92svh, 720px);
    min-height: 0;
    border-radius: 7px;
    overflow: hidden;
  }

  .detail-panel {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .detail-header {
    align-items: start;
    gap: 12px;
    padding: 16px 14px 14px;
  }

  .detail-path {
    min-width: 0;
    max-width: calc(100vw - 86px);
    font-size: 0.58rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  .close-button {
    width: 34px;
    min-width: 34px;
    min-height: 34px;
    font-size: 0.9rem;
  }

  .detail-content {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 18px 14px 20px;
    scrollbar-color: rgba(99, 255, 244, 0.28) rgba(255, 255, 255, 0.04);
  }

  .detail-copy-panel {
    overflow: visible;
    padding-right: 0;
  }

  .message-kicker {
    margin-bottom: 12px;
    font-size: 0.62rem;
  }

  .detail-copy {
    max-width: 100%;
    font-size: 0.72rem;
    line-height: 1.52;
    overflow-wrap: anywhere;
  }

  .download-chip {
    min-height: 32px;
    margin-top: 18px;
    padding: 0 18px;
    font-size: 0.6rem;
  }

  .detail-meta {
    margin-top: 20px;
    font-size: 0.58rem;
  }

  .detail-meta div {
    grid-template-columns: minmax(82px, 0.36fr) minmax(0, 0.64fr);
    gap: 10px;
    padding: 9px 0;
  }

  .detail-meta dd {
    text-align: right;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .document-frame {
    min-height: 260px;
    width: 100%;
  }

  .paper-sheet {
    width: min(210px, 66vw);
    max-width: 78%;
    height: auto;
    min-height: 270px;
    padding: 24px 20px;
  }

  .paper-sheet p {
    font-size: 0.42rem;
    line-height: 1.5;
  }

  .work-system-section {
    min-height: 100svh;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    padding: 48px 12px 76px;
  }

  .work-system-shell {
    width: 100%;
    max-width: 100%;
    transform: none;
    padding: 0 12px 22px;
    overflow: hidden;
  }

  .work-archive-header {
    min-height: 34px;
    margin: 0 -12px 20px;
    padding: 0 10px;
    font-size: 0.52rem;
    letter-spacing: 0.08em;
  }

  .work-archive-header span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .work-system-shell h2 {
    width: 100%;
    font-size: clamp(1.24rem, 7.2vw, 2rem);
    line-height: 1.08;
  }

  .work-system-main {
    white-space: normal;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  .work-track {
    max-width: min(312px, 86vw);
    margin-top: 14px;
    font-size: clamp(0.56rem, 2.55vw, 0.68rem);
    line-height: 1.35;
    text-align: center;
    letter-spacing: 0.1em;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  .work-info-button {
    min-height: 40px;
    margin-top: 14px;
    padding: 10px 19px;
    font-size: 0.68rem;
    letter-spacing: 0.13em;
  }

  .work-info-panel {
    width: 100%;
    max-width: min(100%, 84vw);
    max-height: none;
    font-size: 0.62rem;
    line-height: 1.48;
    overflow-wrap: anywhere;
  }

  .work-info-panel.is-open {
    max-height: none;
    margin-top: 14px;
    padding-top: 13px;
  }

  .work-symbol-grid {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 20px;
    min-height: 0;
  }

  .work-symbol-card {
    min-height: 118px;
    padding: 24px 6px 10px;
  }

  .work-symbol-card img {
    width: min(72px, 20vw);
    height: min(72px, 20vw);
  }

  .work-symbol-card figcaption {
    font-size: 0.46rem;
    line-height: 1.15;
    overflow-wrap: anywhere;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portal-grid button,
  .reset-button,
  .message-box,
  .booking-shell,
  .booking-console,
  .booking-option,
  .booking-submit,
  .vortex-section::before,
  .vortex-section.is-vortex-entering .vortex-canvas,
  .vortex-shade::before,
  .vortex-shade::after,
  .vortex-title,
  .vortex-title::before,
  .vortex-title::after,
  .glitch-text,
  .glitch-text::before,
  .glitch-text::after,
  .work-track-glitch,
  .work-track-glitch::before,
  .work-track-glitch::after,
  .work-info-button::before,
  .work-info-button::after,
  .work-system-soon,
  .work-system-soon::before,
  .work-system-soon::after,
  .section-scroll-cue::before,
  .section-scroll-cue span {
    animation: none;
    backdrop-filter: none;
  }

  html {
    scroll-behavior: auto;
    scroll-snap-type: none;
  }

  .lazy-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .booking-shell::before,
  .booking-option::before {
    animation: none;
  }
}