/* Variant A: full-screen artwork with a restrained application interface. */
@font-face {
  font-family: "Russo One"; src: url("assets/fonts/RussoOne-Regular.ttf") format("truetype");
  font-style: normal; font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono"; src: url("assets/fonts/IBMPlexMono-Regular.ttf") format("truetype");
  font-style: normal; font-weight: 400; font-display: swap;
}
html[data-variant="A"] {
  --bg: #080b0e;
  --surface: #11161b;
  --surface-2: #0e1318;
  --ink: #f1f4f6;
  --muted: #aab4be;
  --serif: var(--sans);
  --display: "Russo One", var(--sans);
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --ice: #a5e1ff;
}
[data-variant="A"] h1,
[data-variant="A"] h2 { font-weight: 500; letter-spacing: -.045em; }
[data-variant="A"] h1 em,
[data-variant="A"] h2 em { font-style: normal; color: inherit; }
[data-variant="A"] .site-shell { max-width: none; padding: 0 40px; }
[data-variant="A"] .topbar { height: 88px; gap: 24px; }
[data-variant="A"] .brand { font: 400 16px/1 var(--display); letter-spacing: .015em; gap: 12px; }
.screen-monogram { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #a5e1ff66; color: var(--ice); font: 19px/1 var(--mono); position: relative; }
.screen-monogram:before,.screen-monogram:after { content: ""; position: absolute; width: 7px; height: 7px; border-color: var(--ice); }
.screen-monogram:before { top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; }
.screen-monogram:after { bottom: -1px; right: -1px; border-right: 2px solid; border-bottom: 2px solid; }
[data-variant="A"] .nav { gap: 28px; }
[data-variant="A"] .nav-item { font: 10px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .09em; }
[data-variant="A"] .nav-item.active { color: var(--ice); }
[data-variant="A"] .nav-item.active:after { height: 2px; background: var(--ice); box-shadow: 0 0 13px #84caff88; }
[data-variant="A"] .header-tools { gap: 18px; }
[data-variant="A"] .local-indicator { font-size: 10px; }
[data-variant="A"] .local-indicator:before { box-shadow: none; background: #b3bcc7; }
[data-variant="A"] .icon-button { border-radius: 3px; color: #b9c4d1; }
[data-variant="A"] .header-export { min-height: 34px; padding: 7px 0; color: #cad2dc; font: 10px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
[data-variant="A"] .button.primary { background: var(--ice); border-color: var(--ice); color: #07141d; }
[data-variant="A"] .button.primary:hover { background: #d4f2ff; border-color: #d4f2ff; }
[data-variant="A"] .eyebrow { font: 10px/1.6 var(--mono); letter-spacing: .12em; }
[data-variant="A"] .eyebrow>.icon,
[data-variant="A"] .authority-seal,
[data-variant="A"] .policy-banner>.icon,
[data-variant="A"] .task-orbit { display: none; }
[data-variant="A"] .section-heading h1 { font: 400 clamp(28px, 3.2vw, 43px)/1.2 var(--display); letter-spacing: -.015em; }
[data-variant="A"] .section-heading { padding-top: 44px; }
[data-variant="A"] .task-row h3,
[data-variant="A"] .export-note h3 { font-size: 23px; }
[data-variant="A"] .refusal-panel h2 { font-size: 29px; }
[data-variant="A"] .record-detail h2 { font: 400 25px/1.3 var(--display); letter-spacing: -.015em; }
[data-variant="A"] .record-tag,
[data-variant="A"] .list-heading,
[data-variant="A"] .detail-meta,
[data-variant="A"] .provenance-line small { font-family: var(--mono); }
[data-variant="A"] .memory-layout { position: relative; border-color: #344c60; }
[data-variant="A"] .memory-layout:before { content: ""; position: absolute; top: -1px; left: -1px; width: 22px; height: 22px; border-top: 2px solid var(--ice); border-left: 2px solid var(--ice); pointer-events: none; z-index: 1; }
[data-variant="A"] .policy-banner { background: #11181f; border-color: #2a3540; }
[data-variant="A"] .modal h2 { font: 400 29px/1.2 var(--display); letter-spacing: -.02em; }
[data-variant="A"] .prototype-switcher { font-size: 10px; padding: 5px 9px 5px 13px; }
[data-variant="A"][data-screen="entry"] .site-shell { padding: 0; }
[data-variant="A"][data-screen="entry"] .topbar {
  position: relative; inset: auto; margin: 0 40px; z-index: 3;
  border-bottom: 1px solid #ffffff20;
}
[data-variant="A"][data-screen="entry"] .page-footer { display: none; }
.screen-entry { min-height: 720px; min-height: max(720px, 100svh); position: relative; isolation: isolate; overflow: hidden; background: #070b0e; }
.screen-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; z-index: -4; }
.glyph-rain {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -3;
  mask-image: linear-gradient(90deg, #000, #000d 23%, #0004 43%, #0004 57%, #000e 80%, #000);
}
.glyph-stream {
  position: absolute; top: 0; left: var(--x); white-space: pre; text-align: center;
  font: var(--size)/1.65 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #98d8fb; opacity: var(--alpha);
  text-shadow: 0 0 9px #85cfff80;
  background: linear-gradient(180deg, transparent 0%, #548bad88 30%, #94d5f8 80%, #e9faff 100%);
  background-clip: text; -webkit-background-clip: text; color: transparent;
  animation: glyph-fall var(--duration) linear var(--delay) infinite;
  will-change: transform;
}
.glyph-stream b { display: block; color: #e6f7ff; font-weight: 400; text-shadow: 0 0 12px #c2eeff; }
@keyframes glyph-fall {
  from { transform: translate3d(0, -100%, 0); }
  to { transform: translate3d(0, max(100svh, 730px), 0); }
}
[data-motion="paused"] .glyph-stream,
.modal-open .glyph-stream { animation-play-state: paused; }
[data-variant="A"] .motion-toggle {
  padding: 8px 0; min-height: 34px; justify-self: end;
  font: 10px/1.5 var(--sans); color: #b8d2e1; border-bottom: 1px solid #8ebbd84d;
}
[data-variant="A"] .motion-toggle:hover { color: white; border-color: #b3dffa; }
.screen-shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, #030609a6 0%, transparent 24%, transparent 39%, #06090d6b 64%, #06090df5 100%), linear-gradient(90deg, #05090d88, transparent 75%); }
.screen-caption { position: absolute; right: 40px; top: 118px; display: grid; gap: 8px; text-align: right; font: 10px/1.5 var(--mono); color: #d0e0eb; padding-right: 14px; border-right: 1px solid #b3e5ff70; }
.screen-caption:before { content: ""; position: absolute; top: 0; right: -1px; width: 11px; height: 2px; background: var(--ice); }
.screen-caption span+span { font: 8px/1.5 var(--mono); color: #99acbe; text-transform: uppercase; letter-spacing: .06em; }
.screen-copy { position: absolute; left: 40px; right: 40px; bottom: 104px; z-index: 1; }
.screen-copy:before { content: ""; display: block; width: 60px; height: 4px; background: linear-gradient(90deg, var(--ice) 0 24px, transparent 24px 28px, #a5e1ff80 28px 44px, transparent 44px 48px, #a5e1ff40 48px); margin-bottom: 17px; }
.screen-copy .eyebrow { font-size: 10px; color: #bddef1; letter-spacing: .14em; }
[data-variant="A"] .screen-copy h1 { font: 400 clamp(58px, 8.3vw, 128px)/1.04 var(--display); margin: 16px 0 23px; letter-spacing: -.025em; text-transform: uppercase; color: #eaf7ff; text-shadow: 0 2px 35px #76b8e222; }
.screen-copy p { font-size: 13px; line-height: 1.8; color: #bdccda; padding-left: 14px; border-left: 1px solid #b4dbf45c; }
.screen-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 25px; }
.screen-actions .button { min-height: 51px; padding: 15px 22px; font: 10px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .035em; border-radius: 0; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.screen-actions .button:focus-visible { box-shadow: inset 0 0 0 2px white; outline-offset: -4px; }
.screen-actions .screen-secondary { border-color: #8ebddb66; background: #0b1720b3; color: #c4e6f8; }
.screen-actions .screen-secondary:hover { background: #25303c; }
.screen-status { display: block; margin-top: 18px; color: #8fa5b7; font: 8px/1.6 var(--mono); letter-spacing: .025em; }
@media (min-width: 1450px) {
  .screen-art { object-position: center 20%; }
}
@media (max-width: 900px) {
  [data-variant="A"] .site-shell { padding: 0 30px; }
  [data-variant="A"] .topbar { gap: 15px; }
  [data-variant="A"] .nav { gap: 23px; }
  [data-variant="A"] .header-tools { gap: 16px; }
  [data-variant="A"][data-screen="entry"] .topbar { margin-inline: 30px; }
  .screen-copy { left: 30px; right: 30px; }
  .screen-caption { right: 30px; }
  .screen-art { object-position: center 25%; }
}
@media (max-width: 650px) {
  [data-variant="A"] .site-shell { padding: 0 22px; }
  [data-variant="A"] .topbar { height: 114px; padding-top: 22px; align-items: flex-start; }
  [data-variant="A"] .brand { font-size: 14px; gap: 10px; }
  [data-variant="A"] .header-tools { padding-top: 0; gap: 15px; }
  [data-variant="A"] .header-export { min-height: 29px; font-size: 9px; padding: 5px 0; }
  [data-variant="A"] .topbar>.nav { justify-content: flex-start; gap: 30px; }
  [data-variant="A"] .topbar .nav-item { padding-bottom: 13px; font-size: 10px; }
  [data-variant="A"][data-screen="entry"] .topbar { margin-inline: 22px; }
  .screen-entry { min-height: max(730px, 100svh); }
  .screen-art { object-position: center 15%; }
  .glyph-stream:nth-child(even) { display: none; }
  .glyph-rain { opacity: .75; }
  .screen-shade { background: linear-gradient(180deg, #030609b0 0%, transparent 28%, transparent 39%, #05090dc4 70%, #06090d 100%); }
  .screen-caption { right: 22px; top: 138px; font-size: 9px; gap: 5px; padding-right: 10px; }
  .screen-caption span+span { font-size: 8px; }
  .screen-copy { left: 22px; right: 22px; bottom: 87px; }
  .screen-copy:before { margin-bottom: 13px; }
  .screen-copy .eyebrow { font-size: 8px; letter-spacing: .1em; }
  [data-variant="A"] .screen-copy h1 { font-size: clamp(42px, 13vw, 64px); margin: 15px 0 21px; letter-spacing: -.035em; }
  .screen-copy p { font-size: 12px; }
  .screen-actions { gap: 9px; margin-top: 22px; }
  .screen-actions .button { font-size: 9px; padding: 13px; min-height: 47px; gap: 13px; }
  .screen-status { font-size: 7px; margin-top: 16px; }
  [data-variant="A"] .section-heading h1 { font-size: 30px; }
  [data-variant="A"] .section-heading { padding-top: 30px; }
  [data-variant="A"] .refusal-panel h2 { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .glyph-rain { display: none; }
  [data-variant="A"] .motion-toggle { display: none; }
}