/* kokomoji.art homepage: one column of the Kokomoji wall, framed like the grid kit's console.
     top     the night sky in the top bar, a crescent moon of cloud letters overhead
     middle  the eclipse on one TV; the tuner (a number pad and a square TV) powers on beside it
     bottom  under the cloud sea, letters rain down the roots behind the channel guide
   The layers (data-stage on <html>) are set by home/boot.js. Without JavaScript the guide and the sky still show.
   Chassis measurements (border-image slices and widths) are the grid kit's own (grid-kit/css/config.css). */

:root {
  --red: #EC3013;
  --violet: #b026ff;
  --void: #1A1029;
  --slate: #453A5C;
  --moon: #efe8ff;
  --lilac: #cdb8ff;
  --ink: #e6defa;
  --dim: #8f86a6;
  --label: "JetBrains Mono", ui-monospace, monospace;
  --mono: "Martian Mono", ui-monospace, monospace;
  --u: clamp(9px, .62vw + .3vh, 21px);
  --foot: 46px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }   /* bezel lips at a narrow window's edge: no sideways scroll */
body.home {
  margin: 0; min-height: 100vh; background: #07040c; color: var(--ink);
  overflow-x: clip;   /* the bezels' outer lip and sheen may reach past a narrow window's edge; never a sideways scroll */
  font: calc(var(--u) * 1.02)/1.45 var(--mono);
}
button { font: inherit; color: inherit; }
a { color: inherit; }
::selection { background: var(--violet); color: #0d0a13; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------------------------------------------------------------- the rack */
.rack {
  position: relative;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: calc(var(--u) * 1.1);
  padding: calc(var(--u) * 1.4) calc(var(--u) * 2) calc(var(--u) * 1.2);
  min-height: calc(100vh - var(--foot));
  background:
    radial-gradient(75% 55% at 10% 0%, rgba(255, 240, 255, .08), transparent 62%),
    linear-gradient(180deg, rgba(24, 14, 36, .55) 0%, rgba(14, 8, 22, .7) 55%, rgba(8, 4, 14, .82) 100%),
    url(art/chassis.webp) 0 0 / calc(var(--u) * 44) repeat,
    #2e2342;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -3px 6px rgba(0, 0, 0, .6);
}
/* the faint grid over the chassis (grid kit's dusk preset) */
.rack::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: url(art/grid.png) 0 0 / calc(var(--u) * 1.3) repeat;
  -webkit-mask: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 100%); mask: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 100%);
}
.rack > * { position: relative; }

/* ---------------------------------------------------------------- bezels and glass (the grid kit's pieces) */
.bezel {
  position: relative; height: 100%;
  border-style: solid; border-width: 0; border-color: transparent;
  /* The frame is pre-shrunk (art/bezel-1x, -2x) to about the size it is drawn, so the browser barely scales it. Shrunk
     from the full 1459 px art at draw time, the corners (scaled evenly) and the straight runs (scaled unevenly) were
     filtered differently and came out at different brightnesses, with a visible step where they meet. stretch, not
     round: each straight run is one continuous piece of the metal. */
  border-image: url(art/bezel-1x.webp) 64 / calc(var(--u) * 4.9694) / calc(var(--u) * 1.1106) stretch;
  padding: calc(var(--u) * 1.9) calc(var(--u) * 2.16) calc(var(--u) * 2) calc(var(--u) * 1.94);
  filter: drop-shadow(0 calc(var(--u) * .7) calc(var(--u) * 1.2) rgba(0, 0, 0, .7));
}
.glass {
  position: relative; height: 100%; overflow: hidden; isolation: isolate; container-type: size;
  border-radius: calc(var(--u) * 1.48);
  background: #0c0716;
  box-shadow: inset 0 0 calc(var(--u) * 3) rgba(0, 0, 0, .6);
}
.fx {
  position: absolute; inset: 0; z-index: 8; pointer-events: none; border-radius: inherit;
  background: radial-gradient(120% 110% at 50% 50%, transparent 62%, rgba(0, 0, 0, .6) 100%),
    radial-gradient(40% 26% at 18% 8%, rgba(255, 255, 255, .06), transparent 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), inset 0 0 calc(var(--u) * 4) rgba(0, 0, 0, .45);
}
/* the scanlines, a layer of their own: over the picture on every screen but the top bar, where it sits behind the robots,
   over the Kokomoji art too */
.fx::before, .glass.night::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .2) 0 1px, transparent 1px 3px);
  transition: opacity 1.6s ease-in-out;
}
.glass.night > .fx::before { content: none; }
.glass.night::before { z-index: 0; }
.stage { position: absolute; inset: 0; z-index: 1; }
.stage canvas { display: block; width: 100% !important; height: 100% !important; }
.stage { opacity: 0; transition: opacity 1.2s var(--ease); }
.stage.live { opacity: 1; }

/* a TV's place on the wall: no well of its own any more, the bezels sit straight on the chassis (the wells' rims
   behind the bezels read as a second, overlapping frame) */
.tv {
  position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0;
  padding: calc(var(--u) * .4) calc(var(--u) * .2) 0;
}
.tv > .tints { display: none; }

/* ---------------------------------------------------------------- top: the kit's sky strip without its sun, five heads */
.topbar .bezel { padding: calc(var(--u) * 1.5) calc(var(--u) * 1.8) calc(var(--u) * 1.6); }
.glass.night {
  min-height: calc(var(--u) * 9.2);
  background: url(stills/top-center.webp) 50% 22% / cover no-repeat, #05030a;
}
.glass.night, .glass.deep { container-type: normal; }   /* these grow with their content */
#pd-topsky { cursor: default; }
.hud {
  position: relative; z-index: 3; height: 100%; pointer-events: none;   /* clicks reach the heads behind */
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto; column-gap: calc(var(--u) * 1.2);
  min-width: 0;
  padding: calc(var(--u) * .7) calc(var(--u) * 1.1) calc(var(--u) * .45);
}
.logo {
  grid-column: 1; grid-row: 1 / span 2; margin: 0;
  font: 800 calc(var(--u) * .52)/1 var(--label); white-space: pre; letter-spacing: 0; color: var(--red);
  text-shadow: 0 0 calc(var(--u) * .5) rgba(236, 48, 19, .55), 0 0 1px rgba(236, 48, 19, .9);
}
.lcd {
  font: 800 calc(var(--u) * 1.15)/1 var(--label); color: var(--red); letter-spacing: .06em;
  padding: calc(var(--u) * .3) calc(var(--u) * .65);
  border-style: solid; border-width: 0; border-color: transparent;
  border-image: url(art/lcd.webp) 46 fill / calc(var(--u) * .3847) / calc(var(--u) * .1672) stretch;
  text-shadow: 0 0 calc(var(--u) * .45) rgba(236, 48, 19, .7);
}
.lcd i { font-style: normal; opacity: .7; margin: 0 .4em; }
.clock { grid-column: 2; grid-row: 1; align-self: start; white-space: nowrap; }
.stats {
  grid-column: 4; grid-row: 1; display: flex; gap: calc(var(--u) * 1.3); white-space: nowrap;
  font: 500 calc(var(--u) * .72)/1 var(--mono); color: rgba(221, 218, 255, .6); letter-spacing: .04em; padding-top: calc(var(--u) * .3);
}
.stats b { font-weight: 600; color: rgba(239, 232, 255, .92); }
.ticker {
  grid-column: 1 / -1; grid-row: 3; overflow: hidden; white-space: nowrap; padding: calc(var(--u) * .25) 0;
  min-width: 0;   /* the moving line is wider than the bar: it must not widen the grid */
  font: 500 calc(var(--u) * .74)/1.2 var(--mono); color: rgba(221, 218, 255, .7);
  -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.ticker .track { display: inline-block; padding-left: 100%; animation: tick 70s linear infinite; }
.ticker span { margin-right: calc(var(--u) * 2.6); }
.ticker i { font-style: normal; color: var(--red); margin-right: 6px; font-size: .8em; }
.ticker b { font-weight: 600; color: var(--glow); margin-right: 6px; }
@keyframes tick { to { transform: translateX(-100%); } }

/* ---------------------------------------------------------------- middle: the wall of TVs */
.wall {
  display: grid; grid-template-columns: var(--tw, min(60%, calc(100vh - 140px))) minmax(0, 1fr); gap: calc(var(--u) * 1.1);
  min-height: 0;
  transition: grid-template-columns .9s var(--ease), gap .9s var(--ease);
}

.skytv .glass { background: url(stills/center.webp) center / cover no-repeat, #0c0716; }

/* the sky TV and, on the far right, the agents' pad: the keypad's twin, so the wall is framed by a pad at each end */
.skies { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.pair { display: flex; flex-direction: row; gap: calc(var(--u) * 1.1); flex: 1; min-height: 0; }
.pair > .skytv { flex: 1 1 0; min-width: 0; min-height: 0; }
.pair > .tv > .bezel { flex: 1; height: auto; min-height: 0; }
.pair > .agentpad { flex: none; }
.agentpad .padtv.bezel { width: calc(var(--u) * 20.5); }

/* the agents' pad: the keypad's glass and one key, nothing else */
.glass.pad.agent { gap: calc(var(--u) * .9); text-align: center; }
.glass.pad.agent > .sr { position: absolute; margin: 0; }   /* the hidden lines for agents take no room: the key sits dead centre */
.agentlabel { margin: 0; font: 600 calc(var(--u) * .62)/1 var(--mono); letter-spacing: .32em; text-transform: uppercase; color: rgba(205, 184, 255, .5); }
.agent .key.copy {
  width: calc(var(--u) * 13); padding: calc(var(--u) * 1) 0; border-image-width: calc(var(--u) * 1.2);
  font-size: calc(var(--u) * .95); letter-spacing: .24em; color: var(--red);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .8), 0 0 calc(var(--u) * .3) rgba(236, 48, 19, .55);
}
.agent .padhint { min-height: 1.3em; }
.agent .padhint b { color: var(--moon); font-weight: 600; }


/* the keys: one texture, one colour (#453A5C) */
.key {
  display: inline-grid; place-items: center; cursor: pointer;
  border-style: solid; border-width: 0; border-color: transparent;
  border-image: url(art/key.webp) 52 fill / calc(var(--u) * 1.5) stretch;
  background: none;
  font: 800 calc(var(--u) * 1.5)/1 var(--label); color: var(--moon);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .7), 0 0 calc(var(--u) * .5) rgba(239, 232, 255, .25);
  transition: transform .08s, filter .12s;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.key:hover { filter: brightness(1.14); }
.key:active { transform: translateY(2px); filter: brightness(.92); }
.key:focus-visible { outline: none; filter: brightness(1.18) drop-shadow(0 0 calc(var(--u) * .5) rgba(236, 48, 19, .8)); }
.key.wide { grid-auto-flow: column; gap: calc(var(--u) * .9); padding: calc(var(--u) * .9) calc(var(--u) * 1.6); font-size: calc(var(--u) * 1.05); letter-spacing: .12em; text-transform: uppercase; }
.key.fn { font-size: calc(var(--u) * 1.25); color: var(--lilac); }
.key.go { color: var(--red); text-shadow: 0 0 calc(var(--u) * .5) rgba(236, 48, 19, .7); }

/* the tuner */
html:not(.pd) .tuner { display: none; }
.tuner-body { flex: 1; min-height: 0; display: flex; gap: calc(var(--u) * 1.4); align-items: stretch; }
.padtv.bezel { flex: none; width: calc(var(--u) * 20.5); height: var(--sq, auto); }
.glass.pad {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * .9);
  padding: calc(var(--u) * .9) calc(var(--u) * .8); container-type: normal;
  justify-content: safe center;
  background: radial-gradient(90% 70% at 50% 35%, #1d1230, #0a0612 75%);
}
.glass.pad > :not(.fx) { position: relative; z-index: 1; flex-shrink: 0; }   /* the keys size themselves (--key); never squashed */
.glass.pad .fx { opacity: .55; }
.readout { display: flex; align-items: center; gap: .15em; font-size: calc(var(--u) * 2); padding: calc(var(--u) * .5) calc(var(--u) * .8); cursor: text; }
.readout .hash { opacity: .75; }
.readout input {
  width: 5.4ch; min-width: 0; padding: 0; border: 0; outline: none; background: transparent;
  font: inherit; color: inherit; letter-spacing: .12em; text-shadow: inherit; caret-color: var(--red);
}
.readout input::placeholder { color: rgba(236, 48, 19, .28); }
.readout:focus-within { box-shadow: 0 0 0 1px rgba(236, 48, 19, .45), 0 0 calc(var(--u) * 1) rgba(236, 48, 19, .25); }
/* the keys take what height the screen has: four rows of keys, the clear bar, the readout and the hint always fit */
.glass.pad { --key: var(--keyfit, clamp(24px, calc((var(--sq, 520px) - var(--u) * 9.6) / 6.45), calc(var(--u) * 4.6))); gap: calc(var(--u) * .5); }
.glass.pad .readout { font-size: calc(var(--key) * .6); padding: calc(var(--key) * .14) calc(var(--key) * .28); }
.pad .keys { display: grid; grid-template-columns: repeat(3, var(--key)); grid-auto-rows: var(--key); gap: calc(var(--key) * .12); }
.pad .keys .key { font-size: calc(var(--key) * .33); border-image-width: calc(var(--key) * .33); }
.key.clear { width: calc(var(--key) * 3.24); height: calc(var(--key) * .62); padding: 0; border-image-width: calc(var(--key) * .26); font-size: calc(var(--key) * .2); letter-spacing: .3em; color: var(--lilac); }
.padhint { margin: 0; font-size: calc(var(--u) * .7); letter-spacing: .08em; color: var(--dim); text-align: center; }
@keyframes nope { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.pad.nope .readout { animation: nope .35s; }
.pad.nope .padhint { color: var(--red); }

.screen { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .7); }
.screen .bezel.sq { height: auto; width: min(100%, var(--sq, 100%)); aspect-ratio: 1; flex: none; }
.tx { position: absolute; inset: 0; z-index: 1; background: radial-gradient(60% 60% at 50% 45%, #1a0f2a, #07040c); }
.tx iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.clip {
  /* the channel change plays on top, at full strength, over whatever the screen was showing */
  position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; object-fit: cover; background: #07040c;
  opacity: 0; pointer-events: none;   /* no fade: the clip cuts in, like changing channel */
}
.clip.on { opacity: 1; }
@keyframes relock { 0% { transform: scale(1.02, .02); filter: brightness(3); } 45% { transform: scale(1, 1.06); filter: brightness(1.6); } 100% { transform: none; filter: none; } }
.glass.relock > .tx, .glass.relock > .stage { animation: relock .42s cubic-bezier(.2, .9, .3, 1.2); }
.pd-calm .glass.relock > .tx, .pd-calm .glass.relock > .stage { animation: none; }

/* your Kokomoji's next steps: only once it is tuned in */
.next { margin-top: calc(var(--u) * .6); display: flex; gap: calc(var(--u) * 2.2); flex-wrap: nowrap; white-space: nowrap; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .5s .6s, transform .5s .6s, visibility 0s 1.1s; }
.pd[data-stage="2"] .next { opacity: 1; visibility: visible; transform: none; transition: opacity .5s .6s, transform .5s .6s, visibility 0s; }
/* retired: the guide below and the TVs do these now (look up: click the art; token account: the sun TV; run a worker
   and post a task: the guide). Kept in the page, out of sight, for the scripts that set its links. */
.next { display: none !important; }
.next a {
  font: 500 calc(var(--u) * .78)/1 var(--mono); letter-spacing: .06em; color: rgba(221, 218, 255, .7); text-decoration: none;
  padding: calc(var(--u) * .35) 0; border-bottom: 1px dotted rgba(221, 218, 255, .3);
}
.next a::after { content: " \203A"; color: var(--red); }
.next a b { font-weight: 600; color: var(--moon); }
.next a:hover, .next a:focus-visible { outline: none; color: var(--moon); border-bottom-color: var(--red); }

/* ---------------------------------------------------------------- bottom: under the clouds, the channel guide */
.guide .bezel { padding: calc(var(--u) * 1.5) calc(var(--u) * 1.8) calc(var(--u) * 1.6); }
.glass.deep {
  min-height: calc(var(--u) * 10.5);
  background: url(stills/bottom-center.webp) 50% 40% / cover no-repeat, #07030f;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: calc(var(--u) * .5);
  padding: calc(var(--u) * 1.1) calc(var(--u) * 1.6);
}
.menu { position: relative; z-index: 3; display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * .4) calc(var(--u) * 1.9); }
.opt {
  display: inline-flex; align-items: baseline; gap: calc(var(--u) * .45);
  text-decoration: none; color: rgba(239, 232, 255, .82); padding: calc(var(--u) * .2) 0;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .9);
}
.opt .key {
  /* the guide's [n]: a label, not a cap */
  display: inline; border: 0; border-image: none; cursor: inherit;
  font: 800 calc(var(--u) * .82)/1 var(--label); color: var(--red); text-shadow: 0 0 6px rgba(236, 48, 19, .6);
}
.opt .key:hover, .opt .key:active { filter: none; transform: none; }
.opt .txt b { font: 600 calc(var(--u) * .82)/1.2 var(--mono); letter-spacing: .03em; }
.opt .txt small, .opt .go { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
a.opt:hover, a.opt:focus-visible, a.opt.lit { outline: none; color: #fff; }
a.opt:hover .txt b, a.opt:focus-visible .txt b, a.opt.lit .txt b { text-shadow: 0 0 10px rgba(205, 184, 255, .8); }
a.opt:focus-visible .txt b { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 4px; }
.opt.disabled { opacity: .5; cursor: default; }
html:not(.pd) .clock { visibility: hidden; }

/* ---------------------------------------------------------------- footer */
.foot {
  height: var(--foot); display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1.6); flex-wrap: wrap;
  font: 500 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #6b5d95;
}
.foot .socials { display: flex; gap: 14px; }
.foot .sbtn { display: inline-flex; align-items: center; gap: 6px; color: rgba(221, 218, 255, .6); text-decoration: none; }
.foot .sbtn svg { width: 12px; height: 12px; fill: currentColor; }
.foot .sbtn:hover, .foot a:hover { color: var(--moon); }
.footlink { color: #c48bff; }

/* ---------------------------------------------------------------- the console fits one screen on a desktop */
@media (min-width: 900px) and (min-height: 620px) {
  .rack { height: calc(100vh - var(--foot)); }
}

/* ---------------------------------------------------------------- tablets and phones: one TV under another */
@media (max-width: 899px), (max-height: 619px) {
  :root { --u: clamp(9px, 1.6vw + .2vh, 14px); }
  .rack { padding: 14px; gap: 12px; grid-template-rows: auto auto auto; align-content: start; }
  .skytv .bezel { height: auto; }
  .hud { grid-template-columns: auto minmax(0, 1fr) auto; }
  .stats { display: none; }
  .clock { grid-column: 3; }
  .wall { grid-template-columns: 1fr; gap: 12px; }
  .skytv .glass { aspect-ratio: 4 / 3; height: auto; }
  .pair { flex-direction: column; gap: 12px; height: auto; }
  .pair > .tv, .pair > .tv > .bezel { flex: none; }   /* their own heights, one under another */
  .agentpad .padtv.bezel { width: 100%; height: auto; }
  .glass.pad.agent { padding: 18px 14px; }
  .agent .key.copy { width: auto; padding: 12px 30px; font-size: 13px; border-image-width: 14px; }
  .agentlabel { font-size: 10px; }
  .agent .padhint { font-size: 11px; }
  .tuner-body { gap: 12px; }
  .padtv.bezel { height: var(--sq, auto); }     /* side by side: the art TV's height (home.js) */
  .glass.pad { padding: 12px 10px; --key: var(--keyfit, clamp(22px, calc((var(--sq, 400px) - var(--u) * 12) / 6.6), calc(var(--u) * 4.4))); }
  .next { flex-wrap: wrap; white-space: normal; }
  .screen .bezel.sq { width: 100%; }
  .glass.deep { padding: 12px 14px; }
  .menu { flex-direction: column; gap: 8px; }
  .opt { display: grid; grid-template-columns: 3ch 1fr; row-gap: 2px; }
  .opt .txt { display: grid; gap: 2px; }
  .opt .txt small { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; white-space: normal; font: 400 calc(var(--u) * .78)/1.4 var(--mono); color: rgba(205, 184, 255, .66); }
}
@media (max-width: 699px) {   /* too narrow for keypad and art TV side by side: stacked */
  .logo { font-size: 5px; }
  .clock { font-size: 12px; }
  #pd-date, .clock i { display: none; }
  .tuner-body { flex-direction: column; align-items: center; }
  .padtv.bezel { width: 100%; height: auto; }   /* stacked: the keypad's own height */
  .glass.pad { height: auto; padding: 16px 12px; --key: calc(var(--u) * 4); }
  .screen { width: 100%; }
}

/* reduced motion: no flights, no flashes, nothing scrolling */
.pd-calm .ticker .track { animation: none; padding-left: calc(var(--u) * 1); }
.pd-calm .next { transition: none !important; }

/* ---------------------------------------------------------------- the boot film (the grid kit's #boot layer) */
#pd-boot { display: none; position: fixed; inset: 0; z-index: 40; background: #07040c; transform-origin: 0 0; will-change: transform; overflow: hidden; }
.pd-film #pd-boot { display: block; }
#pd-boot.gone { display: none !important; }
#pd-boot.zooming { transition: transform 1.15s cubic-bezier(.65, 0, .25, 1), border-radius 1.15s; }
#pd-boot .boot-skip { position: absolute; z-index: 2; right: 18px; bottom: 14px; font: 400 11px var(--mono); letter-spacing: .14em; color: rgba(221, 218, 255, .35); text-transform: uppercase; }
#pd-boot.zooming .boot-skip { opacity: 0; }
.filmstage, .tourstage { position: absolute; inset: 0; overflow: hidden; background: #07040c; }
.filmstage { z-index: 1; transition: opacity 1.4s ease-in-out; }
.filmstage.fading { opacity: 0; }   /* the film's sun fades into the TV's own sun */
.filmstage canvas, .tourstage canvas { display: block; width: 100% !important; height: 100% !important; }
.rack, .foot { transition: opacity .5s; }
.pd-booting .rack, .pd-booting .foot { opacity: 0; }

/* under the sky TV, on the line of the art TV's next steps: the key that plays the film again */
.tvfoot { display: flex; justify-content: flex-end; margin-top: calc(var(--u) * .6); padding-right: calc(var(--u) * 1.2); }
.tab-key {
  font-size: calc(var(--u) * .62); font-weight: 600; font-family: var(--mono);
  border: 0; background: none; padding: 0; cursor: pointer;
  letter-spacing: .14em; color: rgba(221, 218, 255, .45); text-transform: uppercase;
}
.tab-key::first-letter { color: var(--red); }
.tab-key:hover, .tab-key:focus-visible { outline: none; color: var(--moon); }

/* ---------------------------------------------------------------- the colour cycle
   The chassis drifts through four of the grid kit's presets: each holds 22.5 s, then crossfades into the next over
   22.5 s (a 3 min loop, so a colour is about for 45 s):
   dusk (deep purples, a violet glow), slate (the metal cooled to slate: #453A5C laid on as colour), neon (void with
   a neon purple glow), og (the metal as it is: all three faded out). Only opacity animates, on three layers under the
   TVs, so it costs next to nothing. The bezels, the screens, signal red and the token art never change; reduced
   motion holds dusk. The ticker's accent drifts with it. */
@property --glow { syntax: "<color>"; inherits: true; initial-value: #c48bff; }
:root { --cycle: 180s; --glow: #c48bff; animation: glow-cycle var(--cycle) linear infinite; }
@keyframes glow-cycle {
  0%, 12.5% { --glow: #c48bff; }     /* dusk */
  25%, 37.5% { --glow: #b8b2e6; }     /* slate */
  50%, 62.5% { --glow: #d27bff; }     /* neon */
  75%, 87.5% { --glow: #c9a7f2; }     /* og */
  100% { --glow: #c48bff; }
}
.tints { position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; overflow: hidden; }
.rack > .tints { position: absolute; }
/* inside each TV's well too (over the well's metal, under its bezel and screen) */
.tv > .tints { border-radius: calc(var(--u) * .9); }
.tv > :not(.tints):not(.sr) { position: relative; z-index: 1; }
.tints i { position: absolute; inset: 0; opacity: 0; animation: tint var(--cycle) linear infinite; will-change: opacity; }
/* each layer: fades in over 22.5 s, holds 22.5 s, fades out over 22.5 s; the next one is fading in as it goes */
/* a layer's own clock: in over 0-12.5%, held 12.5-25%, out over 25-37.5%. Offsets: dusk holds at 0-12.5% of the
   loop, slate at 25-37.5%, neon at 50-62.5%, the plain metal (og) at 75-87.5%; each fade overlaps the next one's */
@keyframes tint { 0% { opacity: 0; } 12.5% { opacity: 1; } 25% { opacity: 1; } 37.5% { opacity: 0; } 100% { opacity: 0; } }
.t-dusk {
  animation-delay: calc(var(--cycle) * -.125) !important;     /* dusk is fully in as the page opens */
  background: radial-gradient(120% 90% at 85% 100%, rgba(13, 7, 22, .7), rgba(26, 16, 48, .62) 50%, rgba(52, 34, 84, .55));
  box-shadow: inset 0 0 calc(var(--u) * 4) rgba(176, 38, 255, .28);
}
.t-slate { animation-delay: calc(var(--cycle) * -.875) !important; background: rgba(110, 100, 140, .9); mix-blend-mode: color; }
.t-neon {
  animation-delay: calc(var(--cycle) * -.625) !important;
  background: radial-gradient(80% 70% at 50% 0%, rgba(176, 38, 255, .26), transparent 72%),
    radial-gradient(120% 90% at 85% 100%, rgba(30, 6, 52, .55), rgba(60, 14, 100, .45) 55%, rgba(90, 24, 140, .4));
  box-shadow: inset 0 0 calc(var(--u) * 5) rgba(176, 38, 255, .4);
}
.pd-calm { animation: none; }
.pd-calm .tints i { animation: none; }
.pd-calm .t-dusk { opacity: 1; }

/* ---------------------------------------------------------------- bezel sheen
   One soft light across each frame, so the corner pieces and the straight runs read as one surface of metal. It is
   masked to the frame ring only (the glass is cut out), so the screens are untouched. */
.bezel::after {
  content: ""; position: absolute; inset: calc(var(--u) * -1.1106); pointer-events: none; z-index: 9; border-radius: calc(var(--u) * 2.6);
  background:
    linear-gradient(180deg, rgba(255, 245, 255, .10), transparent 22%, transparent 78%, rgba(10, 4, 18, .18)),
    linear-gradient(90deg, rgba(10, 4, 18, .10), transparent 18%, transparent 82%, rgba(10, 4, 18, .10));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  padding: calc(var(--u) * 2.9);
}

/* ---------------------------------------------------------------- the art TV */
.idle {
  position: absolute; z-index: 6; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; cursor: text;
  font: 800 clamp(13px, 4.6cqw, 26px)/1.2 var(--label); letter-spacing: .08em; color: var(--moon);
  text-shadow: 0 0 calc(var(--u) * .8) rgba(205, 184, 255, .6), 2px 2px 0 rgba(0, 0, 0, .6);
  animation: idle-blink 2.4s steps(1) infinite;
}
@keyframes idle-blink { 0%, 70% { opacity: 1; } 71%, 100% { opacity: .35; } }
.pd[data-stage="2"] .idle, html:not(.pd) .idle { display: none; }
.pd-calm .idle { animation: none; }
.raw { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; }
/* the letters are the opening: once locked they hold a moment (boot.js), then the picture fades up and stays */
.raw.shown { animation: raw-in 1.6s ease-in-out forwards; }
@keyframes raw-in { from { opacity: 0; } to { opacity: 1; } }
.pd-calm .raw.shown { animation: none; opacity: 1; }
/* the letters, a little dimmer, nearer the picture's own brightness */
.tx iframe { filter: brightness(.7) saturate(.92); }

/* high-DPI screens: the 2x frame (after the main .bezel rule so it wins) */
@media (min-resolution: 1.5dppx) { .bezel { border-image-source: url(art/bezel-2x.webp); border-image-slice: 128; } }

/* the sky TV is the job board's channel: the whole screen opens the board */
.tvlink { position: absolute; inset: 0; z-index: 7; border-radius: inherit; }
.tvlink:focus-visible { outline: 2px solid var(--red); outline-offset: -4px; }

/* the console fits one screen: the sky TV's bezel takes the same height as the keypad and the art TV, tops and
   bottoms in line (--sq, home.js) */
@media (min-width: 900px) and (min-height: 620px) {
  .pair { height: calc(var(--sq, 100%) + var(--u) * .4); flex: none; }   /* + the TVs' top padding: bottoms in line */
  /* a very wide window: the sky TV stops at 1.6 times the art TV's width and the row centres, rather than one long screen */
  .wall { grid-template-columns: var(--tw, min(60%, calc(100vh - 140px))) minmax(0, calc(var(--sq, 400px) * 1.6 + var(--u) * 21.8)); justify-content: center; }
}

/* without the live sky (reduced motion, no WebGL, a light device): the call to action over the still */
.cta-still {
  position: absolute; z-index: 6; left: 0; right: 0; bottom: 16%; margin: 0; text-align: center; pointer-events: none;
  font: 800 clamp(13px, 4cqw, 24px)/1.2 var(--label); letter-spacing: .1em; color: var(--moon);
  text-shadow: 0 0 calc(var(--u) * .8) rgba(205, 184, 255, .6), 2px 2px 0 rgba(0, 0, 0, .6);
}
#pd-sky.live ~ .cta-still { display: none; }

/* ---------------------------------------------------------------- the sun TV's account channel (home/acctv.js)
   "connect wallet" switches only this TV: the token accounts page's own rows (accounts/accounts.js, styled by
   home/tokrows.css) on the dark of the eclipse, scrolling inside the glass. The Kokomoji on the keypad comes first. */
.acctv {
  position: absolute; inset: 0; z-index: 6; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(var(--u) * 1.2) calc(var(--u) * 1.4) calc(var(--u) * 1.6);
  background: linear-gradient(180deg, rgba(10, 5, 18, .9), rgba(10, 5, 18, .82)), url(stills/center.webp) center / cover no-repeat, #0c0716;
  font-size: calc(var(--u) * .9);
  scrollbar-width: thin; scrollbar-color: rgba(205, 184, 255, .3) transparent;
}
.acctv #live { display: grid; gap: calc(var(--u) * 1); }
.acbar { display: flex; align-items: center; gap: calc(var(--u) * .8); flex-wrap: wrap; }
.acbar .who { flex: 1; min-width: 0; font: 400 calc(var(--u) * .74)/1.3 var(--mono); letter-spacing: .06em; color: rgba(221, 218, 255, .66); text-align: right; }
.acbar .who b { font: 800 calc(var(--u) * 1)/1 var(--label); color: var(--red); letter-spacing: .06em; text-shadow: 0 0 calc(var(--u) * .45) rgba(236, 48, 19, .7); }
.acctv .toks { display: grid; gap: calc(var(--u) * .9); grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--u) * 24)), 1fr)); align-items: start; }
.acctv .toks > .empty { grid-column: 1 / -1; text-align: center; }
/* each row on a slab of glass of its own (the TV is already the frame) */
.acctv .tok {
  padding: calc(var(--u) * .9); border-radius: calc(var(--u) * .7);
  background: radial-gradient(90% 80% at 30% 20%, rgba(36, 22, 58, .85), rgba(10, 6, 18, .9) 80%);
  box-shadow: inset 0 0 0 1px rgba(205, 184, 255, .12), inset 0 0 calc(var(--u) * 1.6) rgba(0, 0, 0, .6);
  animation: acpower .6s var(--ease) both;
}
.acctv .tok { grid-template-columns: calc(var(--u) * 5.2) minmax(0, 1fr); }
/* the keypad's Kokomoji: first, and a little larger */
.aclooked #lookup-out { grid-template-columns: 1fr; }
.aclooked .tok { grid-template-columns: calc(var(--u) * 7.4) minmax(0, 1fr); box-shadow: inset 0 0 0 1px rgba(236, 48, 19, .35), 0 0 calc(var(--u) * 1.4) rgba(236, 48, 19, .12), inset 0 0 calc(var(--u) * 1.6) rgba(0, 0, 0, .6); }
.notuned .aclooked { display: none; }
.acyours:has(#mine > .empty:only-child) .band { display: none; }
@keyframes acpower { 0% { opacity: 0; transform: scaleY(.05); filter: brightness(3); } 60% { opacity: 1; transform: scaleY(1.02); } 100% { transform: none; } }
.glass:has(> .acctv:not([hidden])) > .cta-still { display: none; }
.pd-calm .acctv .tok { animation: none; }
#pd-skyclip { z-index: 7; }
.acctv #mine > .tok.dup { display: none; }     /* the keypad's Kokomoji is already shown first */

/* ---------------------------------------------------------------- the art TV's look up (home/artinfo.js)
   While the real picture is up, its rarity rank (left) and Agent Dial's score (right) sit small in the bottom corners,
   fading in after the picture. A click on the art turns the TV to the card: traits and Agent
   Dial's review in the keypad's glass; a click anywhere on the card turns it back. */
.artcap {
  position: absolute; z-index: 3; left: 5%; right: 5%; bottom: 4.5%; display: flex; justify-content: space-between; align-items: baseline;
  pointer-events: none; opacity: 0;
  font: 600 clamp(9px, 2.1cqw, 13px)/1 var(--mono); letter-spacing: .1em; color: rgba(239, 232, 255, .78);
  text-shadow: 0 1px 4px #000, 0 0 2px #000;
}
.artcap b { font: 800 1.15em/1 var(--label); color: var(--red); text-shadow: 0 0 calc(var(--u) * .4) rgba(236, 48, 19, .6), 0 1px 3px #000; }
.glass:has(> .raw.shown) > .artcap { animation: cap-in 1s ease-out 1.2s forwards; }
@keyframes cap-in { from { opacity: 0; } to { opacity: 1; } }
.pd-calm .glass:has(> .raw:not([hidden])) > .artcap { animation: none; opacity: 1; }
.artlink {
  position: absolute; inset: 0; z-index: 4; display: none; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit;
  background: none; cursor: pointer; color: transparent; font-size: 0;
}
.artlink:focus-visible { outline: 2px solid var(--red); outline-offset: -4px; }
.pd[data-stage="2"] .artlink { display: block; }
.glass:has(> .artinfo:not([hidden])) > .artlink { display: none; }
.glass:has(> .artinfo:not([hidden])) > .artcap { visibility: hidden; }

.artinfo {
  position: absolute; inset: 0; z-index: 4; overflow-y: auto; overscroll-behavior: contain; cursor: pointer;
  display: flex; flex-direction: column; gap: calc(var(--u) * .7);
  padding: calc(var(--u) * 1.3) calc(var(--u) * 1.5) calc(var(--u) * 1.1);
  background: radial-gradient(90% 70% at 50% 30%, #1d1230, #0a0612 78%);
  font: 400 calc(var(--u) * .74)/1.5 var(--mono); color: rgba(221, 218, 255, .8);
  scrollbar-width: thin; scrollbar-color: rgba(205, 184, 255, .3) transparent;
}
.artinfo:focus-visible { outline: 2px solid var(--red); outline-offset: -4px; }
.ai-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; }
.ai-name { font: 800 calc(var(--u) * 1.15)/1.1 var(--label); letter-spacing: .06em; color: var(--moon); }
.ai-rank { font: 600 calc(var(--u) * .66)/1 var(--mono); letter-spacing: .1em; color: rgba(205, 184, 255, .7); white-space: nowrap; }
.ai-rank b { color: var(--moon); font-weight: 600; }
.ai-rule { height: 1px; flex: none; background: linear-gradient(90deg, transparent, rgba(205, 184, 255, .28), transparent); }
.ai-traits { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * .25) calc(var(--u) * 1.4); margin: 0; }
.ai-traits div { display: flex; justify-content: space-between; gap: .8em; min-width: 0; }
.ai-traits dt { color: rgba(205, 184, 255, .55); letter-spacing: .04em; }
.ai-traits dd { margin: 0; color: var(--moon); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-traits .rare dd { color: #ffb35c; }
.ai-says { display: flex; justify-content: space-between; align-items: baseline; }
.ai-says span { font: 800 calc(var(--u) * .6)/1 var(--label); letter-spacing: .26em; color: rgba(205, 184, 255, .6); }
.ai-says b { font: 800 calc(var(--u) * 1.5)/1 var(--label); color: var(--red); text-shadow: 0 0 calc(var(--u) * .5) rgba(236, 48, 19, .65); }
.ai-says b small { font-size: .45em; color: rgba(205, 184, 255, .55); text-shadow: none; margin-left: .2em; }
.ai-headline { margin: 0; font: 800 calc(var(--u) * .86)/1.3 var(--label); color: var(--moon); }
.ai-bars { display: grid; gap: calc(var(--u) * .3); }
.ai-bar { display: grid; grid-template-columns: 9.5em 1fr 2.4em; align-items: center; gap: .8em; }
.ai-bar span { color: rgba(205, 184, 255, .62); }
.ai-bar i { position: relative; display: block; height: 2px; background: rgba(205, 184, 255, .14); }
.ai-bar i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w, 0%); background: var(--red); box-shadow: 0 0 6px rgba(236, 48, 19, .7); }
.ai-bar em { font-style: normal; text-align: right; color: var(--moon); }
.ai-review { margin: 0; color: rgba(221, 218, 255, .78); }
.ai-back { margin-top: auto; align-self: flex-end; font: 800 calc(var(--u) * .62)/1 var(--label); letter-spacing: .2em; text-transform: uppercase; color: rgba(205, 184, 255, .55); }
.ai-back::before { content: "\25C2  "; color: var(--red); }
.ai-wait { margin: auto; font: 800 calc(var(--u) * .7)/1 var(--label); letter-spacing: .26em; text-transform: uppercase; color: rgba(205, 184, 255, .5); }
@keyframes ai-on { from { opacity: 0; transform: scaleY(.04); filter: brightness(2.6); } to { opacity: 1; transform: none; filter: none; } }
.artinfo:not([hidden]) { animation: ai-on .35s var(--ease); }
.pd-calm .artinfo { animation: none; }

/* ---------------------------------------------------------------- the footer's links on a phone: the footer grows */
.foot a { white-space: nowrap; }
@media (max-width: 899px) {
  .foot { height: auto; min-height: var(--foot); padding: 12px 16px; row-gap: 10px; line-height: 1.6; text-align: center; }
}