/* All animation is CSS. No scripts or external assets. */
/* Fixed 32-color base palette: 7 rainbow hues x 4 shades + 4 neutrals. */
:root {
  --black: #000; --white: #fff; --charcoal: #111; --muted: #999;
  --red-0: #400; --red-1: #a11; --red-2: #f22; --red-3: #f66;
  --orange-0: #420; --orange-1: #a40; --orange-2: #f70; --orange-3: #f94;
  --yellow-0: #330; --yellow-1: #990; --yellow-2: #ee0; --yellow-3: #ff6;
  --green-0: #030; --green-1: #181; --green-2: #2d2; --green-3: #6f6;
  --cyan-0: #033; --cyan-1: #088; --cyan-2: #0dd; --cyan-3: #6ff;
  --blue-0: #114; --blue-1: #22a; --blue-2: #44f; --blue-3: #88f;
  --violet-0: #304; --violet-1: #81a; --violet-2: #d2e; --violet-3: #f6f;
  color-scheme: dark; font-family: "Courier New", Courier, monospace; background: var(--charcoal); color: var(--white);
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; padding: 0 24px; display: grid; grid-template-rows: 65px minmax(400px, 1fr) 66px; height: 100svh; }
.masthead, .toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.site-name { color: var(--white); text-decoration: none; font-size: 17px; font-weight: 700; letter-spacing: -1px; }
.cursor { color: var(--cyan-2); animation: blink 1.2s steps(2, end) infinite; }
.toolbar { justify-content: flex-end; }
.edition, .toolbar { font-size: 10px; letter-spacing: 1.5px; color: var(--muted); }
.edition b { padding: 0 12px; color: var(--cyan-1); }
.screen { position: relative; overflow: hidden; border-radius: 12px; background: var(--black); border: 1px solid var(--muted); box-shadow: 0 0 0 4px var(--charcoal), 0 12px 0 var(--black); }
.cube-wall { --size: min(5vw, 6.3svh, 80px); position: absolute; inset: -8% -6%; display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(7, 1fr); align-items: center; justify-items: center; animation: drift 18s ease-in-out infinite alternate; opacity: 1; }
.cube { position: relative; width: var(--size); height: var(--size); }
/* One rotating 3D layer per cube, with fixed palette shading. */
.rainbow-red { --shade-0: var(--red-0); --shade-1: var(--red-1); --shade-2: var(--red-2); --shade-3: var(--red-3); }
.rainbow-orange { --shade-0: var(--orange-0); --shade-1: var(--orange-1); --shade-2: var(--orange-2); --shade-3: var(--orange-3); }
.rainbow-yellow { --shade-0: var(--yellow-0); --shade-1: var(--yellow-1); --shade-2: var(--yellow-2); --shade-3: var(--yellow-3); }
.rainbow-green { --shade-0: var(--green-0); --shade-1: var(--green-1); --shade-2: var(--green-2); --shade-3: var(--green-3); }
.rainbow-cyan { --shade-0: var(--cyan-0); --shade-1: var(--cyan-1); --shade-2: var(--cyan-2); --shade-3: var(--cyan-3); }
.rainbow-blue { --shade-0: var(--blue-0); --shade-1: var(--blue-1); --shade-2: var(--blue-2); --shade-3: var(--blue-3); }
.rainbow-violet { --shade-0: var(--violet-0); --shade-1: var(--violet-1); --shade-2: var(--violet-2); --shade-3: var(--violet-3); }
.cube-depth { --front: var(--shade-2); --side: var(--shade-1); --top: var(--shade-3); position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(-26deg) rotateY(-35deg) rotateZ(0deg); will-change: transform; animation: turn 8s linear var(--delay) infinite; }
.cube i { display: block; position: absolute; inset: 0; backface-visibility: hidden; }
.cube i:nth-child(1) { background-color: var(--front); transform: translateZ(calc(var(--size) / 2)); }
.cube i:nth-child(2) { background-color: var(--side); transform: rotateY(90deg) translateZ(calc(var(--size) / 2)); }
.cube i:nth-child(3) { background-color: var(--top); transform: rotateX(90deg) translateZ(calc(var(--size) / 2)); }
.cube i:nth-child(4) { background-color: var(--front); transform: rotateY(180deg) translateZ(calc(var(--size) / 2)); }
.cube i:nth-child(5) { background-color: var(--side); transform: rotateY(-90deg) translateZ(calc(var(--size) / 2)); }
.cube i:nth-child(6) { background-color: var(--top); transform: rotateX(-90deg) translateZ(calc(var(--size) / 2)); }
.shade { display: none; }
/* Soft stationary scanlines cover the whole page, including the credits. */
body::after { content: ""; position: fixed; inset: -2px; z-index: 3; pointer-events: none; opacity: .26; filter: blur(.65px); background: repeating-linear-gradient(0deg, transparent 0, var(--black) 1px, transparent 2px, transparent 5px); }
.credits-window { position: absolute; inset: 0 5%; overflow: hidden; z-index: 2; }
.credits { position: absolute; top: 100%; width: 100%; text-align: center; font-size: clamp(16px, 2.1vw, 31px); line-height: 1.38; font-weight: 700; letter-spacing: 1px; color: var(--white); text-shadow: 2px 2px 0 var(--black), -1px -1px var(--black); animation: scroll-credits 65s linear -8s infinite; }
.credits p { margin: 0 0 1.9em; }
.credits h1 { font-size: clamp(34px, 4.3vw, 64px); margin: .2em 0 .3em; letter-spacing: -2px; }
.credits h2 { font-size: clamp(25px, 3.1vw, 46px); line-height: 1.22; margin: 1.1em 0 1.4em; }
.credits .eyebrow { font-size: .48em; letter-spacing: 3px; margin-bottom: 1.5em; }
.credits .subtitle { font-size: .65em; letter-spacing: 5px; }
.credits .divider { font-size: .62em; letter-spacing: 4px; margin: 3em 0; }
.credits .signoff { font-size: 1.5em; }
@keyframes scroll-credits { from { transform: translateY(0); } to { transform: translateY(calc(-100% - 100svh)); } }
@keyframes turn { from { transform: rotateX(-26deg) rotateY(-35deg) rotateZ(0deg); } to { transform: rotateX(334deg) rotateY(325deg) rotateZ(360deg); } }
@keyframes drift { from { transform: translate(-1%, 1%); } to { transform: translate(1%, -1%); } }
@keyframes blink { to { opacity: 0; } }
@media (max-width: 650px) {
  body { padding: 0 12px; grid-template-rows: 55px minmax(360px, 1fr) 75px; }
  .edition { font-size: 7px; letter-spacing: .8px; }
  .edition b { padding: 0 3px; }
  .site-name { font-size: 14px; }
  .cube-wall { --size: min(38px, 6svh); width: 850px; left: -80px; }
  .credits-window { left: 3%; right: 3%; }
  .credits { font-size: clamp(13px, 3vw, 20px); letter-spacing: 0; }
  .credits h1 { font-size: 28px; }
  .credits h2 { font-size: 22px; }
  .credits .eyebrow { letter-spacing: 1px; font-size: 8px; }
  .toolbar { flex-wrap: wrap; gap: 0; justify-content: center; padding: 8px 0; }
  .footer-note { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .screen *, .cursor { animation: none !important; }
  .cube-depth { will-change: auto; }
  .credits-window { overflow-y: auto; }
  .credits { position: relative; top: 0; padding: 60px 0; }
}