:root {
  --night: #0c1633;
  --dusk: #15234b;
  --plain: #070d20;
  --star: #eaf0ff;
  --mist: #aebbdb;
  --amber: #f3a63f;
  --omega: #4fe6d8;
  --omega-ink: #04292c;
  --moon: #dfe6f6;
  --moon-ink: #141f40;

  --sign: Bahnschrift, "DIN Alternate", "DIN Next", "Roboto Condensed", "Arial Narrow", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;
  --read: "Sitka Text", "Iowan Old Style", Palatino, "Palatino Linotype", "Noto Serif SC", "Songti SC", SimSun, Georgia, serif;

  --edge: clamp(1.25rem, 5vw, 5rem);
  --rail: clamp(9rem, 22vw, 15.5rem);
}

html:lang(zh) {
  --read: "Noto Serif SC", "Songti SC", SimSun, Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--night);
  color: var(--star);
  font: 1.0625rem/1.65 var(--read);
}
h1, h2, h3, p, ol, ul, dl, dd, figure, fieldset { margin: 0; padding: 0; }
ol, ul { list-style: none; }
fieldset { border: 0; min-width: 0; }
main:focus { outline: none; }
section[id] { scroll-margin-top: 1rem; }

a { color: inherit; text-underline-offset: .2em; }
:focus-visible { outline: 2px solid var(--focus, var(--amber)); outline-offset: 3px; }

h2, h3, .statement, time, .t, .top, table, legend, label, dt, .lane, .lv, .go {
  font-family: var(--sign);
}
h2 {
  max-width: 18ch;
  font-size: clamp(2.1rem, 5vw, 3.75rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.01em;
}
h3 { font-size: 1.3rem; font-weight: 600; line-height: 1.2; }
code, kbd { font-family: var(--sign); font-weight: 600; }
kbd { padding: 0 .35em; border: 1px solid currentColor; border-radius: 3px; }
var { font-style: italic; }

.wrap { max-width: 76rem; margin-inline: auto; padding-inline: var(--edge); }
.sub { max-width: 58ch; margin-top: 1rem; color: var(--mist); }
.note { max-width: 58ch; margin-top: 1rem; font-size: .95rem; color: var(--mist); }

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 3;
  padding: .5rem 1rem;
  background: var(--star); color: var(--night);
}
.skip:focus { top: 1rem; }

/* Header */
.top {
  position: absolute; inset: 0 0 auto; z-index: 2;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: .6rem 1.5rem;
  padding: 1.1rem var(--edge);
}
.top nav { justify-self: end; }
.language { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--mist); }
.language select {
  min-height: 2.4rem; padding: .25rem .5rem;
  border: 1px solid var(--mist); border-radius: 2px;
  background: var(--plain); color: var(--star); font: inherit;
}
html:lang(zh) .ladder .zh { display: none; }
.brand { font-size: 1.15rem; font-weight: 600; letter-spacing: .08em; text-decoration: none; }
.top ul { display: flex; flex-wrap: wrap; gap: .1rem 1.4rem; }
.top nav a { display: inline-block; padding-block: .3rem; color: var(--mist); text-decoration: none; }
.top nav a:hover { color: var(--star); text-decoration: underline; }

/* Hero: the name hangs in the sky, the argument stands on the ground */
.hero {
  display: grid; grid-template-rows: 1fr auto;
  min-height: 100vh; min-height: 100svh;
  overflow: hidden;
}
.sky {
  display: flex; align-items: flex-end;
  padding: clamp(5.5rem, 12vh, 8rem) var(--edge) clamp(2.5rem, 7vh, 4.5rem);
  background: url("assets/sky.svg") center bottom / cover no-repeat,
              linear-gradient(#0a1230, #16275a 88%);
}
h1 { width: 100%; max-width: 66rem; margin-inline: auto; }
.wordmark { display: block; width: 100%; max-height: 54vh; overflow: visible; }
.c-lines polyline { fill: none; stroke: var(--star); stroke-width: .62; stroke-opacity: .72; }
.c-nodes { fill: var(--star); }

.plain {
  position: relative;
  padding: clamp(1.75rem, 4vh, 3rem) var(--edge) clamp(2rem, 5vh, 3.5rem);
  background: var(--plain);
}
.outpost {
  position: absolute; right: var(--edge); bottom: 100%;
  width: clamp(9rem, 22vw, 18rem); margin-bottom: -1px;
  fill: var(--plain);
}
.outpost .lamp { fill: var(--amber); }
.plain-text {
  display: grid; grid-template-columns: 1.1fr 1fr; align-items: end;
  gap: 1.5rem clamp(2rem, 6vw, 5rem);
  max-width: 66rem; margin-inline: auto;
}
.statement { font-size: clamp(1.8rem, 3.6vw, 2.9rem); font-weight: 600; line-height: 1.1; }
.intro { font-size: 1rem; color: var(--mist); }
.go { display: inline-block; margin-top: .6rem; font-size: 1.1rem; font-weight: 600; color: var(--amber); }

/* Round clock: the gap under each entry is proportional to the minutes until the next */
.round {
  padding-top: clamp(4rem, 10vw, 7.5rem);
  background: linear-gradient(var(--plain), var(--dusk) 70rem);
}
.clock { margin-top: clamp(2.5rem, 6vw, 4rem); }
.clock li {
  display: grid; grid-template-columns: var(--rail) minmax(0, 40rem);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-bottom: calc(var(--gap, 0) * clamp(.8rem, 1.5vw, 1.4rem) + 1.5rem);
}
.clock time, .clock .t {
  font-size: clamp(2.6rem, 7vw, 5.25rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: .95;
  text-align: right;
}
.clock p { max-width: 60ch; margin-top: .5rem; color: var(--mist); }
.clock .hot time, .clock .hot h3 { color: var(--amber); }

.omega {
  --focus: var(--omega-ink);
  padding-block: clamp(3rem, 7vw, 5rem) 1rem;
  background: var(--omega); color: var(--omega-ink);
}
.omega .clock { margin-top: 0; }
.omega .clock p { color: inherit; }
.omega .clock h3 { font-size: 1.7rem; }

.after {
  display: grid; grid-template-columns: var(--rail) minmax(0, 40rem);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-block: clamp(3rem, 7vw, 5rem);
}
.after h3 { font-size: 1.7rem; text-align: right; }
.after p { max-width: 60ch; color: var(--mist); }

/* HUD mock */
.screen-sec { padding-block: clamp(4rem, 9vw, 7rem); }
.hud { margin-top: 2rem; }
.views { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.views legend { display: block; width: 100%; padding: 0 0 .4rem; color: var(--mist); }
.views input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.views label {
  padding: .45rem .95rem;
  border: 1px solid var(--mist); border-radius: 2px;
  cursor: pointer;
}
.views label:hover { border-color: var(--star); }
.views input:checked + label { border-color: var(--star); background: var(--star); color: var(--night); font-weight: 600; }
.views input:focus-visible + label { outline: 2px solid var(--amber); outline-offset: 3px; }

.monitor {
  position: relative; overflow: hidden;
  container-type: inline-size;
  aspect-ratio: 16 / 9;
  border: 1px solid #3a4770; border-radius: 4px;
  background: radial-gradient(ellipse at 50% 52%, #33415f, #161e33 62%);
}
.corridor {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  fill: none; stroke: #5f6f97; stroke-width: 1;
}
.corridor path { vector-effect: non-scaling-stroke; }
.lane {
  position: absolute;
  font-size: clamp(10px, 1.45cqw, 17px);
  line-height: 1.35;
  text-shadow: 0 1px 2px #000a;
}
.lane b { font-weight: 600; color: var(--omega); }
.lane i { margin-inline: .35em; font-style: normal; opacity: .5; }
.lane u {
  display: inline-block; width: 5em; height: .4em;
  vertical-align: .1em; text-decoration: none;
  background: linear-gradient(90deg, var(--amber) 40%, #fff3 40%);
}
.l-greet { top: 1.5%; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.l-notice { top: 13%; left: 50%; transform: translateX(-50%); font-size: clamp(11px, 1.7cqw, 20px); color: var(--amber); white-space: nowrap; }
.l-scp { top: 18%; right: 6%; display: grid; grid-template-columns: auto auto auto; gap: .2em 1.1em; }
.l-ping { top: 42%; left: 50%; transform: translateX(-50%); font-size: clamp(20px, 4cqw, 44px); color: var(--amber); }
.l-chat { top: 58%; left: 3%; display: grid; gap: .15em; }
.l-count { right: 6%; bottom: 13%; display: grid; justify-items: end; gap: .15em; }
.l-respawn { bottom: 7%; left: 50%; transform: translateX(-50%); font-size: clamp(12px, 1.9cqw, 22px); }

figcaption { margin-top: .5rem; font-size: .9rem; color: var(--mist); }
.legend { columns: 2 22rem; column-gap: 3rem; margin-top: 1.5rem; }
.legend li { padding-bottom: .7rem; break-inside: avoid; color: var(--mist); }
.legend b { font-family: var(--sign); font-weight: 600; color: var(--star); }

.hud:has(#view-human:checked) [data-for]:not([data-for~="human"]),
.hud:has(#view-scp:checked) [data-for]:not([data-for~="scp"]),
.hud:has(#view-spec:checked) [data-for]:not([data-for~="spec"]) { display: none; }
.hud:has(#view-spec:checked) .l-greet { top: 9%; }
.hud:has(#view-spec:checked) .l-notice { top: 16%; }

/* Ranks */
.ranks { padding-block: clamp(4rem, 9vw, 7rem); background: var(--dusk); }
.ranks-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 6vw, 5rem); }
.ranks h3 { margin-top: 2.25rem; }
table { width: 100%; margin-top: 2rem; border-collapse: collapse; font-variant-numeric: tabular-nums; }
caption { padding-bottom: .4rem; font-size: 1.3rem; font-weight: 600; text-align: left; }
thead th { font-weight: 400; color: var(--mist); }
th, td { padding: .5rem .75rem .5rem 0; border-bottom: 1px solid #ffffff2b; text-align: left; vertical-align: baseline; }
tbody th { font-weight: 400; }
.perks { margin-top: .6rem; }
.perks div { display: grid; grid-template-columns: 11rem 1fr; gap: .1rem 1rem; padding-block: .25rem; }
.perks dt { color: var(--mist); }

/* The ladder falls to the right; each step's offset is the rank's real share of the level range */
.ladder { align-self: center; }
.ladder li {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .8rem;
  margin-left: calc(var(--p) * 34%);
  padding: .55rem 0 .55rem 1.5rem;
}
.ladder li::before {
  content: "";
  position: absolute; left: 0; top: 1.05rem;
  width: .8rem; height: .8rem;
  background: var(--star);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}
.ladder li:last-child::before { background: var(--amber); }
.lv { min-width: 4.3rem; color: var(--mist); font-variant-numeric: tabular-nums; }
.nm { font-family: var(--sign); font-size: 1.2rem; font-weight: 600; }
.zh { font-size: .95rem; color: var(--mist); }

/* Talk */
.talk { padding-block: clamp(4rem, 9vw, 7rem); }
.talk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem clamp(2.5rem, 6vw, 5rem); margin-top: 2.5rem; }
.talk-grid p { max-width: 58ch; margin-top: .5rem; color: var(--mist); }
.talk-grid code, .talk-grid kbd { color: var(--star); }
.cmds { margin-top: .75rem; }
.cmds div { padding-block: .4rem; border-bottom: 1px solid #ffffff2b; }
.cmds dt code { font-size: 1.1rem; }
.cmds dd { color: var(--mist); }

/* Rules: a pale moonlit sheet, the one light section */
.rules { --focus: var(--moon-ink); padding-block: clamp(4rem, 9vw, 7rem); background: var(--moon); color: var(--moon-ink); }
.ledger { margin-top: 2.5rem; border-top: 2px solid var(--moon-ink); }
.ledger div {
  display: grid; grid-template-columns: minmax(10rem, 19rem) minmax(0, 44rem); gap: .2rem 2.5rem;
  padding-block: .85rem;
  border-bottom: 1px solid #141f4040;
}
.ledger dt { font-size: 1.15rem; font-weight: 600; }

/* QQ */
.qq { padding-block: clamp(4rem, 9vw, 7rem); }
.qq-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 5rem); }
.qq .cmds { margin-top: 1.75rem; }
.first { align-self: start; padding-left: clamp(1.25rem, 3vw, 2.5rem); border-left: 1px solid var(--amber); }
.first ol { margin-top: 1rem; counter-reset: step; }
.first li { position: relative; padding: 0 0 1rem 2.2rem; color: var(--mist); counter-increment: step; }
.first li::before {
  content: counter(step);
  position: absolute; left: 0; top: -.1rem;
  font: 600 1.4rem/1.3 var(--sign);
  color: var(--amber);
}

/* Owner: the hero's sky returns, with the name drawn in the wordmark's line and star language */
.owner {
  padding-block: clamp(4.5rem, 10vw, 8rem);
  background: url("assets/sky.svg") center bottom / cover no-repeat,
              linear-gradient(var(--night), var(--dusk) 88%);
}
.owner-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center;
  gap: clamp(2.5rem, 6vw, 5rem);
}
.monogram { display: block; width: 100%; max-width: 30rem; overflow: visible; }
.eyebrow { font: 600 1.1rem/1.3 var(--sign); color: var(--amber); }
.owner h2 { max-width: none; margin-top: .25rem; font-size: clamp(2.8rem, 7vw, 5.25rem); }
.owner-quote { margin: 1.25rem 0 0; font-size: clamp(1.35rem, 2.6vw, 1.8rem); line-height: 1.35; }
.gloss { margin-top: .35rem; font-size: 1.0625rem; line-height: 1.5; color: var(--mist); }
html:lang(zh) .gloss { display: none; }
.owner-coda { margin-top: .5rem; color: var(--mist); }
.owner-facts { max-width: 34rem; margin-top: 1.75rem; border-top: 1px solid #ffffff2b; }
.owner-facts div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: .1rem 1rem; padding-block: .5rem; border-bottom: 1px solid #ffffff2b; }
.owner-facts dt { color: var(--mist); }

/* Sponsorship: amber marks the status, the same colour the page saves for its deadline */
.sponsor { padding-block: clamp(4rem, 9vw, 7rem); background: var(--dusk); }
.status {
  margin-top: 2rem; padding: 1.1rem clamp(1.1rem, 3vw, 1.75rem);
  border: 2px solid transparent;
  background: var(--amber); color: var(--night);
}
.status p { max-width: 70ch; }
.status-flag { font: 600 clamp(1.5rem, 3.4vw, 2.2rem)/1.15 var(--sign); }
.status-flag + p { margin-top: .4rem; }

.catalog {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr); align-items: start;
  gap: 2.5rem clamp(2.5rem, 6vw, 5rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.terms { padding-left: clamp(1.25rem, 3vw, 2rem); border-left: 1px solid var(--amber); }
.terms ul { margin-top: .75rem; }
.terms li { padding-bottom: .7rem; color: var(--mist); }

.prices { margin-top: 0; }
.prices thead th { vertical-align: bottom; }
.prices small { display: block; font-size: .85rem; line-height: 1.4; color: var(--mist); }
.prices tbody th span { font-size: 1.15rem; font-weight: 600; }
.prices tbody th small { max-width: 34ch; font-family: var(--read); font-size: .92rem; }
.prices td, .prices thead th:not(:first-child) { text-align: right; }
.prices td { font: 600 1.25rem/1.4 var(--sign); }
.prices th:last-child, .prices td:last-child { padding-right: 0; }

.roles { margin-top: clamp(3rem, 6vw, 4.5rem); }
.roles h3, .contact h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
.roles .sub { margin-top: .35rem; }
/* The steps rise with the price, each offset being its real share of the price range */
.role-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: clamp(1rem, 3vw, 2.5rem); margin-top: 1.5rem; }
.role-steps li {
  position: relative;
  margin-top: calc((1 - var(--p)) * 3.5rem);
  padding: .9rem 0 .5rem 1.5rem;
  border-top: 1px solid var(--mist);
}
.role-steps li::before {
  content: "";
  position: absolute; left: 0; top: 1.25rem;
  width: .8rem; height: .8rem;
  background: var(--star);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}
.role-steps li:last-child { border-top-color: var(--amber); }
.role-steps li:last-child::before { background: var(--amber); }
.role-steps code { display: block; font-size: 1.15rem; }
.role-price { display: block; font: 600 clamp(2.2rem, 5vw, 3.5rem)/1.1 var(--sign); font-variant-numeric: tabular-nums; }
.role-notes { max-width: 62ch; margin-top: 1.25rem; }
.role-notes li { padding-bottom: .35rem; color: var(--mist); }

.contact { margin-top: clamp(3rem, 6vw, 4.5rem); }
.contact dl {
  display: grid; grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr));
  gap: 1rem clamp(1.5rem, 4vw, 3rem);
  margin-top: 1rem; padding-block: .85rem;
  border-block: 1px solid #ffffff2b;
}
.contact dt { color: var(--mist); }
.contact dd { font-size: 1.1rem; overflow-wrap: anywhere; }
.more { margin-top: 2rem; font: 600 1.1rem/1.4 var(--sign); color: var(--amber); }

.foot { padding-block: 2.5rem; background: var(--plain); font-size: .9rem; color: var(--mist); }
.foot p { max-width: 70ch; }
.foot p + p { margin-top: .5rem; }

/* Narrow layouts */
@media (max-width: 860px) {
  .top { grid-template-columns: 1fr auto; }
  .top nav { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
  .plain-text, .ranks-grid, .talk-grid, .qq-grid, .owner-grid, .catalog { grid-template-columns: minmax(0, 1fr); }
  .ladder li { margin-left: calc(var(--p) * 16%); }
  .ledger div { grid-template-columns: minmax(0, 1fr); }
  .monogram { max-width: 18rem; }
  .contact dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact dl div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .top ul { gap: 0 1rem; font-size: .95rem; }
  .sky { padding-top: 8.5rem; }
  .clock li, .after { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
  .clock time, .clock .t, .after h3 { text-align: left; }
  .clock li { padding-bottom: calc(var(--gap, 0) * .6rem + 1.5rem); }

  /* 16:9 text is unreadable on a phone, so the lanes stack instead */
  .monitor {
    display: grid; gap: .75rem;
    aspect-ratio: auto; padding: 1rem;
    background: #161e33;
  }
  .corridor, .l-ping { display: none; }
  .lane { position: static; font-size: .9rem; white-space: normal; transform: none; }
  .l-count { justify-items: start; }

  /* Each price row keeps three aligned columns under a sticky header, with the item name above them */
  .prices, .prices tbody { display: block; }
  .prices caption { display: block; }
  .prices thead { position: sticky; top: 0; z-index: 1; display: block; background: var(--dusk); }
  .prices tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .prices th, .prices td { padding-right: .75rem; }
  .prices thead th:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .prices tbody th { grid-column: 1 / -1; padding-bottom: .1rem; border-bottom: 0; }
  .prices td { padding-top: 0; }
  .prices td, .prices thead th:not(:first-child) { text-align: left; }
  .prices tbody th small { max-width: none; }

  .role-steps { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .role-steps li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0; }
  .role-steps li::before { top: calc(50% - .2rem); }
  .owner-facts div { grid-template-columns: minmax(0, 1fr); }
}

/* The one authored motion: the constellation is drawn once on load */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .c-lines polyline {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: draw 2.4s cubic-bezier(.3, .1, .2, 1) .35s forwards;
  }
  .c-nodes { animation: appear 1s ease-out both; }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  @keyframes appear { from { opacity: 0; } }
}

@media (forced-colors: active) {
  .views input:checked + label { outline: 2px solid; }
  .c-lines polyline { stroke: CanvasText; }
  .c-nodes { fill: CanvasText; }
}