@font-face {
  font-family: "Board";
  src: url("/board.woff2?v=fb4742daff") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Body";
  src: url("/body.woff2?v=615e5ea839") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --mono: "Body", ui-monospace, Menlo, Consolas, monospace;

  --board: "Board", var(--mono);

  --bg:      #05070F;
  --bg-2:    #090D1A;
  --bg-3:    #10162A;
  --rule:    #1B2440;
  --rule-2:  #2C3860;

  --fg:      #E5E8F2;
  --fg-2:    #AEB7D0;
  --dim:     #7A85A8;
  --dimmer:  #6B78A5;

  --accent:  #FF5C2B;
  --amber:   #FFB020;
  --green:   #2FBF80;
  --cyan:    #25B5D6;
  --violet:  #B197FF;
  --rose:    #FF7AA8;

  --scan:    rgba(0,0,0,.22);
  --pitch:   3px;
  --noise:   .04;
  --lift:    rgba(255,255,255,.05);

  --pad:     clamp(15px, 4vw, 56px);
  --inset:   clamp(10px, 2.4vw, 28px);

  --t-xs:    11.5px;
  --t-s:     14px;
  --t-m:     16px;
  --t-l:     18px;

  --idx:     22px;
  --idx-gap: 18px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.6;
  font-variant-ligatures: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--accent); color: #fff; }

.crt { position: fixed; inset: 0; pointer-events: none; z-index: 100; }

.crt {
  background-image: linear-gradient(90deg,
    rgba(255,90,90,.022) 0 33.33%,
    rgba(90,255,140,.022) 33.33% 66.66%,
    rgba(100,140,255,.022) 66.66% 100%);
  background-size: 3px 100%;
}

.crt::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(to bottom,
    var(--lift) 0,
    transparent 26%,
    var(--scan) 48%, var(--scan) 64%,
    transparent 92%);
  background-size: 100% var(--pitch);
}
.crt::after {
  content: ""; position: absolute; inset: -20%;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 52%, rgba(2,4,12,.72) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  opacity: var(--noise);
}

.console {
  position: relative;
  width: calc(100% - 2 * var(--inset));
  max-width: 1180px;

  margin: max(16px, var(--inset)) auto var(--inset);

  min-height: calc(100dvh - max(16px, var(--inset)) - var(--inset));
  border: 1px solid var(--rule-2);

  padding: max(var(--pad), 34px) 0 0;
}

.tag {
  position: absolute;
  display: flex; align-items: center; gap: 9px;
  padding: 0 12px;
  background: var(--bg);
  font-size: var(--t-xs); letter-spacing: .17em; text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
  max-width: calc(100% - 2 * var(--pad));
  overflow: hidden; text-overflow: ellipsis;
}
.tag-tl { top: 0; left: calc(var(--pad) - 12px); transform: translateY(-50%); color: var(--fg); }
.tag-tr { top: 0; right: calc(var(--pad) - 12px); transform: translateY(-50%); }
.tag-br { bottom: 0; right: calc(var(--pad) - 12px); transform: translateY(50%); }

.tag-br {
  max-width: calc(100% - var(--pad) + 12px);
  text-overflow: clip;
}

.led {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
  flex: none;
  animation: pulse 3.2s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

.head { padding: 0 var(--pad) clamp(64px, 9vw, 104px); container-type: inline-size; }

.board {

  --cw: min((100cqw - 3px) / 15.33, (100cqw - 41px) / 14);
  --ch: calc(var(--cw) * 1.44);
  --gap: max(2px, calc(var(--cw) * .07));
  --fr: 2px;
  margin: 0 0 clamp(40px, 5.5vw, 64px);

  display: flex; align-items: flex-start;
  gap: var(--gap);
  padding: calc(var(--gap) * 3);
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03),
              0 1px 0 rgba(0,0,0,.4);
  font-weight: 400;
}
.field { display: flex; flex-direction: column; gap: var(--gap); }
.line { display: flex; gap: var(--gap); }

.cell {
  position: relative;
  display: block;
  width: var(--cw); height: var(--ch);
  perspective: calc(var(--ch) * 4);
  font-size: calc(var(--ch) * .62);
  line-height: var(--ch);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.cell .card {
  position: absolute; left: 0; width: 100%; height: 50%;
  overflow: hidden;
  background: var(--bg-3);
  backface-visibility: hidden;
}
.cell .card b {
  display: block; width: 100%; height: var(--ch);
  line-height: var(--ch); text-align: center;
  font-family: var(--board);
  font-weight: 600; color: var(--amber);
}

[data-field] .cell .card b { color: var(--dim); }
.cell .top    { top: 0; border-radius: var(--fr) var(--fr) 0 0;
                box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.cell .bottom { bottom: 0; border-radius: 0 0 var(--fr) var(--fr);
                background: linear-gradient(rgba(0,0,0,.18), transparent 60%), var(--bg-3); }
.cell .bottom b { transform: translateY(-50%); }
.cell .top::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 1px;
  background: var(--bg);
}
.cell .ftop, .cell .fbot { z-index: 2; }
.cell .ftop { top: 0; transform-origin: 50% 100%; border-radius: var(--fr) var(--fr) 0 0; }
.cell .fbot { bottom: 0; transform-origin: 50% 0; border-radius: 0 0 var(--fr) var(--fr);
              transform: rotateX(90deg);
              background: linear-gradient(rgba(0,0,0,.18), transparent 60%), var(--bg-3); }
.cell .fbot b { transform: translateY(-50%); }

.cell.go .ftop { animation: flap-top .055s cubic-bezier(.4,0,.9,.5) forwards; }
.cell.go .fbot { animation: flap-bot .055s cubic-bezier(.1,.5,.6,1) .055s forwards; }
@keyframes flap-top { to { transform: rotateX(-90deg); } }
@keyframes flap-bot { to { transform: rotateX(0deg); } }

.disciplines {
  list-style: none;

  margin: 0; padding: 0;
  display: flex; flex-wrap: nowrap; align-items: baseline;
  gap: 0;
  font-size: min(30px, calc((100cqw - 2px) / 23.05));
  letter-spacing: -.01em;
  color: var(--fg);
}
.disciplines li + li::before {
  content: ""; display: inline-block;
  width: 1px; height: .92em;
  margin: 0 .6em;
  vertical-align: -.1em;
  background: var(--rule-2);
}

@container (min-width: 693px) {

  .disciplines li + li {
    flex: 1 1 auto; display: flex; align-items: baseline; min-width: 0;
  }
  .disciplines li + li::before {
    flex: 1 0 1px;
    width: auto; height: 1px;

    align-self: center; margin: 0 .7em;
    vertical-align: baseline;
  }

  .disciplines li:last-child { flex-grow: 1.62; }
}

@media (max-width: 359px) {
  .disciplines { display: block; font-size: 21px; }
  .disciplines li + li::before { display: none; }

  :root { --t-l: 17px; --t-m: 15px; --idx-gap: 14px; }
}

#sites     { --sec: var(--green); }
#writing   { --sec: var(--cyan); }
#profiles  { --sec: var(--violet); }
#elsewhere { --sec: var(--rose); }

.shead {
  display: flex; align-items: baseline; gap: var(--idx-gap);
  margin: 0;
  padding: 13px var(--pad);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--sec) 8%, transparent);
  box-shadow: inset 3px 0 0 var(--sec);

  font-size: var(--t-m); font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase;
}

.shead .idx {
  flex: none; width: var(--idx);
  color: var(--sec);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

.rows { list-style: none; margin: 0; padding: 0; }
.rows li + li { border-top: 1px solid var(--rule); }

.row {
  display: grid;
  grid-template-columns: var(--idx) minmax(0, 380px) minmax(0, 1fr) 24px;
  align-items: baseline;
  gap: var(--idx-gap);
  padding: 21px var(--pad);
  text-decoration: none; color: inherit;
  position: relative;
  transition: background-color .18s, box-shadow .18s;
}
.row:hover, .row:focus-visible {
  background: color-mix(in srgb, var(--sec) 7%, var(--bg-2));
  box-shadow: inset 3px 0 0 var(--sec);
  outline: none;
}

.row-n {
  font-size: var(--t-xs); color: var(--dimmer);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.row-t { font-size: var(--t-l); }
.row-d { font-size: var(--t-s); color: var(--dim); }

.row-x { font-size: var(--t-m); color: var(--dimmer); text-align: right;
         transition: color .18s, transform .18s; }
.row-x svg {
  width: .78em; height: .78em;
  vertical-align: -.02em;
  overflow: visible;
}
.row:hover .row-n { color: var(--sec); }
.row:hover .row-x { color: var(--sec); transform: translate(2px, -2px); }
.row:focus-visible .row-x { color: var(--sec); }

#elsewhere .rows { padding-bottom: clamp(28px, 4vw, 44px); }

.back {
  margin: 0;
  font-size: var(--t-m);
  letter-spacing: .14em; text-transform: uppercase;
}

.back a {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 12px; margin: -10px -12px;
  text-decoration: none; color: var(--fg-2);
  transition: color .18s;
}
.back svg {
  width: .78em; height: .78em;
  overflow: visible;
  color: var(--dimmer);
  transition: color .18s, transform .18s;
}
.back a:hover, .back a:focus-visible { color: var(--fg); }
.back a:hover svg, .back a:focus-visible svg {
  color: var(--fg); transform: translateX(-3px);
}

.back a:focus-visible { outline: 1px solid var(--dim); outline-offset: 7px; }

.mark-defs   { position: absolute; }
.board                  { --i: 0; }
.disciplines, .back     { --i: 1; }

.rise {
  animation: rise .6s cubic-bezier(.2,.7,.3,1) backwards;
  animation-delay: calc(var(--i) * 70ms + 60ms);
}
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 319px) {
  .tag-tr { display: none; }
}

@media (max-width: 620px) {

  .row {
    grid-template-columns: var(--idx) minmax(0, 1fr) 20px;
    gap: 3px var(--idx-gap);
    padding: 17px var(--pad);
  }
  .row-n { grid-column: 1; grid-row: 1; }
  .row-t { grid-column: 2; grid-row: 1; }
  .row-x { grid-column: 3; grid-row: 1; }
  .row-d { grid-column: 2 / 4; grid-row: 2; }
  .tag { font-size: 10.5px; letter-spacing: .14em; }
}

@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; animation: none !important; }
  .cell.go .ftop, .cell.go .fbot { animation: none !important; }
  .cell .ftop, .cell .fbot { display: none; }
  .led { animation: none; }
  .crt::before { display: none; }
  * { transition-duration: .01ms !important; }
}

@media print {
  .crt { display: none; }
  body { background: #fff; color: #000; }

  .console { border: none; min-height: auto; }
}