:root {
  --bg: #070707;
  --ink: #ededed;
  --dim: #8a8a8a;
  --line: rgba(237, 237, 237, .14);
  --acid: #d6ff3c;
  --signal: #ff4d6d;
  --panel: #101010;
  --font: "IBM Plex Mono", "Consolas", "Microsoft YaHei", monospace;
  --display: Syne, "Arial Black", "PingFang SC", sans-serif;
  --max: 920px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.5;
  overflow-x: hidden;
}
body.is-splash { overflow: hidden; }
body.is-rtl { direction: rtl; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; background: none; border: 0; }

.boot {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-content: center; gap: 10px;
  background: #000; text-align: center;
  transition: opacity .4s ease, visibility .4s ease;
}
.boot.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.boot__code { color: var(--acid); font-size: 13px; letter-spacing: .08em; }
.boot__pct { color: var(--dim); font-size: 12px; }

.rail {
  position: sticky; top: 0; z-index: 50;
  display: grid; grid-template-columns: auto 1fr auto auto;
  align-items: center; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
  background: rgba(7,7,7,.92); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
.rail__brand {
  font-family: var(--display); font-weight: 800; font-size: 18px;
  letter-spacing: -.02em; text-transform: uppercase;
}
.rail__id { color: var(--dim); font-size: 11px; letter-spacing: .12em; justify-self: center; }
.rail__lang {
  border: 1px solid var(--line); padding: 8px 10px; cursor: pointer; font-size: 12px;
}
.rail__menu {
  position: absolute; right: 16px; top: calc(100% + 6px);
  list-style: none; min-width: 160px; max-height: 50vh; overflow: auto;
  background: #111; border: 1px solid var(--line); z-index: 60;
}
.rail__menu li { padding: 10px 12px; cursor: pointer; font-size: 12px; }
.rail__menu li:hover, .rail__menu li[aria-selected="true"] { background: #1a1a1a; color: var(--acid); }
.rail__menu-btn {
  display: none; width: 42px; height: 42px; place-items: center; gap: 6px;
  border: 1px solid var(--line); cursor: pointer;
}
.rail__menu-btn span { display: block; width: 16px; height: 2px; background: var(--ink); }
.drawer {
  display: none; flex-direction: column; border-bottom: 1px solid var(--line); background: #0c0c0c;
}
.drawer a { padding: 14px 16px; border-top: 1px solid var(--line); font-size: 13px; letter-spacing: .06em; }
.drawer:not([hidden]) { display: flex; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 22px; background: var(--acid); color: #111;
  font-family: var(--display); font-weight: 700; font-size: 14px;
  letter-spacing: .04em; text-transform: uppercase; cursor: pointer;
  border: 1px solid var(--acid); transition: transform .2s ease, background .2s;
}
.btn:hover { transform: translateY(-1px); background: #e7ff6a; }
.btn--ghost { background: transparent; color: var(--acid); }

.hero {
  position: relative; min-height: 100svh;
  display: grid; align-content: end;
  padding: 48px 16px 36px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero__scan {
  position: absolute; inset: 0; z-index: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(214,255,60,.03) 3px 4px),
    radial-gradient(ellipse 90% 60% at 80% 20%, rgba(255,77,109,.18), transparent 55%),
    linear-gradient(160deg, #121212 0%, #070707 55%, #000 100%);
  animation: scanPulse 6s ease-in-out infinite;
}
.hero__stamp {
  position: absolute; z-index: 0; right: -4%; top: 12%;
  font-family: var(--display); font-weight: 800; font-size: clamp(96px, 28vw, 240px);
  line-height: .8; letter-spacing: -.06em; color: transparent;
  -webkit-text-stroke: 2px rgba(255,77,109,.55);
  transform: rotate(-12deg);
  animation: stampIn .9s cubic-bezier(.2,.8,.2,1) both;
  pointer-events: none; user-select: none;
}
@keyframes scanPulse {
  0%,100% { filter: brightness(1); }
  50% { filter: brightness(1.08); }
}
@keyframes stampIn {
  from { opacity: 0; transform: rotate(-12deg) scale(1.2); }
  to { opacity: 1; transform: rotate(-12deg) scale(1); }
}
.hero__copy {
  position: relative; z-index: 1; max-width: 640px;
  animation: rise .7s .1s ease both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
.hero__brand {
  font-family: var(--display); font-weight: 800; font-size: clamp(48px, 12vw, 88px);
  line-height: .9; letter-spacing: -.04em; text-transform: uppercase;
  margin-bottom: 14px;
}
.hero h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(22px, 4.2vw, 34px); line-height: 1.15;
  max-width: 18ch; margin-bottom: 12px;
}
.lead { color: var(--dim); font-size: 14px; max-width: 48ch; }
.hero .btn { margin-top: 22px; }
.hero__meta {
  position: relative; z-index: 1; margin-top: 40px;
  color: var(--dim); font-size: 11px; letter-spacing: .16em;
}

.docket {
  max-width: var(--max); margin: 0 auto;
  padding: 40px 16px 56px;
}
.docket__head {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  border-bottom: 2px solid var(--ink); padding-bottom: 10px; margin-bottom: 28px;
}
.docket__label {
  font-family: var(--display); font-weight: 800; letter-spacing: .08em; font-size: 14px;
}
.docket__progress { color: var(--acid); font-size: 12px; letter-spacing: .1em; }

.field { margin-bottom: 28px; animation: rise .45s ease both; }
.field__q {
  font-family: var(--display); font-weight: 700; font-size: 20px;
  margin-bottom: 6px; text-transform: uppercase; letter-spacing: .02em;
}
.field__hint { color: var(--dim); font-size: 12px; margin-bottom: 14px; }
.field__opts { display: grid; gap: 0; border: 1px solid var(--line); }
.field__opt {
  display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: start;
  text-align: left; width: 100%; padding: 14px 14px;
  border-bottom: 1px solid var(--line); cursor: pointer;
  transition: background .15s ease;
}
.field__opt:last-child { border-bottom: 0; }
.field__opt:hover, .field__opt.is-on { background: #141414; }
.field__opt.is-on .field__code { color: #111; background: var(--acid); }
.field__code {
  font-size: 11px; letter-spacing: .08em; color: var(--acid);
  border: 1px solid currentColor; padding: 4px 6px; height: fit-content;
  transition: .15s ease;
}
.field__opt strong {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: 15px; letter-spacing: .02em; margin-bottom: 4px;
}
.field__opt span { color: var(--dim); font-size: 12px; }

.docket__seal {
  margin-top: 32px; padding: 24px; border: 2px dashed var(--signal);
  position: relative; animation: stampIn .55s ease both;
}
.docket__seal-k {
  color: var(--signal); font-size: 11px; letter-spacing: .18em; margin-bottom: 8px;
}
.docket__seal h2 {
  font-family: var(--display); font-weight: 800; font-size: 28px;
  text-transform: uppercase; margin-bottom: 8px;
}
.docket__seal p { color: var(--dim); font-size: 13px; margin-bottom: 16px; }

.sheet {
  border-block: 1px solid var(--line);
  background: #0c0c0c;
  padding: 0 0 48px;
}
.sheet__bar {
  display: flex; justify-content: space-between; gap: 12px;
  max-width: var(--max); margin: 0 auto; padding: 14px 16px;
  font-size: 11px; letter-spacing: .14em; color: var(--dim);
  border-bottom: 1px solid var(--line);
}
.sheet.is-closed .sheet__body { filter: blur(3px); opacity: .35; pointer-events: none; user-select: none; }
.sheet:not(.is-closed) #sheetStatus { color: var(--acid); }
.sheet__body { max-width: var(--max); margin: 0 auto; padding: 24px 16px 0; }
.map-block {
  border-left: 3px solid var(--line); padding: 0 0 22px 16px; margin-bottom: 8px;
  transition: border-color .25s ease;
}
.map-block.is-match { border-left-color: var(--acid); }
.map-block h3 {
  font-family: var(--display); font-weight: 800; font-size: 18px;
  text-transform: uppercase; margin-bottom: 4px;
}
.map-block .blurb { color: var(--dim); font-size: 12px; margin-bottom: 10px; }
.map-block ol { list-style: none; counter-reset: line; display: grid; gap: 6px; }
.map-block li {
  counter-increment: line; font-size: 13px; color: #d2d2d2;
  display: grid; grid-template-columns: 28px 1fr; gap: 8px;
}
.map-block li::before {
  content: counter(line, decimal-leading-zero);
  color: var(--dim); font-size: 11px;
}

.slip {
  max-width: var(--max); margin: 0 auto; padding: 48px 16px;
  position: relative;
}
.slip__perf {
  height: 14px; margin-bottom: 22px;
  background: radial-gradient(circle, var(--bg) 45%, transparent 46%) 0 0 / 14px 14px repeat-x;
  border-bottom: 1px dashed var(--line);
}
.slip__inner {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px;
  background: var(--panel); border: 1px solid var(--line); padding: 22px;
}
.slip__k { color: var(--acid); font-size: 11px; letter-spacing: .16em; margin-bottom: 8px; }
.slip h2 {
  font-family: var(--display); font-weight: 800; font-size: 26px;
  text-transform: uppercase; letter-spacing: -.01em; margin-bottom: 10px;
}
.slip__form { display: grid; gap: 12px; }
.slip__form label { display: grid; gap: 6px; font-size: 11px; letter-spacing: .1em; color: var(--dim); }
.slip__form input {
  width: 100%; border: 1px solid var(--line); padding: 12px 12px; font-size: 16px;
  background: #070707;
}
.slip__form input:focus { outline: 1px solid var(--acid); border-color: var(--acid); }
.slip__msg { color: var(--acid); font-size: 12px; }

.appendix {
  max-width: var(--max); margin: 0 auto; padding: 24px 16px 56px;
}
.appendix__k { color: var(--dim); font-size: 11px; letter-spacing: .16em; margin-bottom: 8px; }
.appendix h2 {
  font-family: var(--display); font-weight: 800; font-size: 22px;
  text-transform: uppercase; margin-bottom: 18px;
}
.appendix details { border-top: 1px solid var(--line); padding: 12px 0; }
.appendix summary {
  cursor: pointer; list-style: none; font-size: 13px;
  display: flex; justify-content: space-between; gap: 12px;
}
.appendix summary::-webkit-details-marker { display: none; }
.appendix summary::after { content: "//"; color: var(--signal); }
.appendix details[open] summary::after { content: "\\\\"; }
.appendix details p { color: var(--dim); margin-top: 8px; font-size: 12px; max-width: 70ch; }

.foot {
  display: flex; flex-wrap: wrap; gap: 10px 20px;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line); color: var(--dim); font-size: 11px;
  letter-spacing: .06em;
}
.foot span:first-child {
  font-family: var(--display); font-weight: 800; color: var(--ink); letter-spacing: .04em;
}

@media (max-width: 1100px), (hover: none) and (pointer: coarse) {
  .rail__menu-btn { display: grid; }
  .rail__id { font-size: 10px; justify-self: start; grid-column: 1 / -1; order: 5; }
  .hero { min-height: 100svh; padding-bottom: 28px; }
  .hero__stamp { font-size: 120px; right: -18%; top: 8%; opacity: .7; }
  .slip__inner { grid-template-columns: 1fr; }
  .field__opt { grid-template-columns: 48px 1fr; }
  .slip__form input { font-size: 16px; }
}