/* =========================================================================
   ANGEL ENGINE — divine machinery / win98 / y2k / softclub
   ========================================================================= */

@font-face { font-family: "Cybertown"; src: url("../assets/fonts/cybertown.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Aurix"; src: url("../assets/fonts/aurix.ttf") format("truetype"); font-display: swap; }

:root {
  /* chrome (window frames) */
  --face: #c6ccd8;
  --face-hi: #ffffff;
  --face-lo: #7d8597;
  --face-dk: #0b0d14;
  --title-a: #07174a;
  --title-b: #5f9fe0;
  --title-off-a: #5b6170;
  --title-off-b: #a9b0bf;

  /* void (content wells) */
  --void: #05070d;
  --void-2: #0b1020;
  --ink: #d9e4ff;
  --ink-dim: #8b97b8;
  --link: #8fd8ff;
  --link-hot: #ff4a26;
  --halo: #bfe9ff;
  --ember: #ff4a26;
  --acid: #b6ff3b;

  --ui: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  --mono: "VT323", "Lucida Console", "Courier New", monospace;
  --display: "Cybertown", "Arial Black", sans-serif;
  --script: "Aurix", "Trebuchet MS", sans-serif;

  --taskbar-h: 34px;
}

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

body {
  margin: 0;
  min-height: 100vh;
  padding-bottom: calc(var(--taskbar-h) + 24px);
  font: 13px/1.5 var(--ui);
  color: var(--ink);
  background-color: #02040a;
  background-image:
    radial-gradient(ellipse at 50% -10%, rgba(120, 180, 255, .18), transparent 60%),
    linear-gradient(rgba(2, 4, 10, .72), rgba(2, 4, 10, .9)),
    url("../assets/img/foam-dark.jpg");
  background-size: auto, auto, 620px;
  background-attachment: fixed;
  overflow-x: hidden;
}

a { color: var(--link); }
a:hover { color: var(--link-hot); text-shadow: 0 0 6px rgba(255, 74, 38, .6); }
img { max-width: 100%; display: block; }
::selection { background: var(--title-a); color: #fff; }

/* ---------- page frame ------------------------------------------------- */
.desktop {
  max-width: 1000px;
  margin: 0 auto;
  padding: 18px 12px 0;
  position: relative;
}

/* floating sigil behind everything */
.desktop::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("../assets/img/sigil.png") center 46% / min(760px, 92vw) no-repeat;
  opacity: .07;
  pointer-events: none;
  z-index: -1;
  animation: breathe 9s ease-in-out infinite;
}
@keyframes breathe { 50% { opacity: .12; transform: scale(1.02); } }

/* ---------- win98 window ---------------------------------------------- */
.win {
  background: var(--face);
  color: #000;
  border: 1px solid;
  border-color: var(--face-hi) var(--face-dk) var(--face-dk) var(--face-hi);
  box-shadow: inset 1px 1px 0 #e9edf5, inset -1px -1px 0 var(--face-lo), 4px 6px 0 rgba(0, 0, 0, .45);
  padding: 3px;
  margin-bottom: 14px;
}
.win__title {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 3px 0 5px;
  background: linear-gradient(90deg, var(--title-a), var(--title-b));
  color: #fff;
  font: bold 12px/1 var(--ui);
  letter-spacing: .2px;
  user-select: none;
}
.win:not(.is-active) .win__title.inactive { background: linear-gradient(90deg, var(--title-off-a), var(--title-off-b)); }
.win__title img { width: 16px; height: 16px; image-rendering: pixelated; }
.win__title span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win__btns { display: flex; gap: 2px; }
.win__btn {
  width: 18px; height: 16px;
  padding: 0;
  font: bold 11px/12px var(--ui);
  color: #000;
  background: var(--face);
  border: 1px solid;
  border-color: var(--face-hi) var(--face-dk) var(--face-dk) var(--face-hi);
  box-shadow: inset -1px -1px 0 var(--face-lo);
  cursor: pointer;
}
.win__btn:active { border-color: var(--face-dk) var(--face-hi) var(--face-hi) var(--face-dk); box-shadow: inset 1px 1px 0 var(--face-lo); }
.win__btn:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }

.win__menu {
  display: flex; gap: 12px;
  padding: 2px 6px;
  font-size: 12px;
}
.win__menu u { text-decoration: underline; }

/* content area = sunken dark void */
.win__body {
  margin-top: 3px;
  padding: 12px;
  background: var(--void);
  color: var(--ink);
  border: 1px solid;
  border-color: var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo);
  box-shadow: inset 1px 1px 0 var(--face-dk);
}
.win__body.light { background: #fff; color: #000; }
.win__body.light a { color: #0000ee; }
.win__body.flush { padding: 0; }
.win.is-min .win__body, .win.is-min .win__menu, .win.is-min .win__status { display: none; }

.win__status {
  display: flex; gap: 3px; margin-top: 3px;
  font-size: 11px;
}
.win__status > * {
  flex: 1; padding: 1px 5px;
  border: 1px solid; border-color: var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- 98 buttons / inputs -------------------------------------- */
.btn98 {
  display: inline-block;
  min-width: 72px;
  padding: 4px 12px;
  font: 12px var(--ui);
  color: #000;
  text-decoration: none;
  text-align: center;
  background: var(--face);
  border: 1px solid;
  border-color: var(--face-hi) var(--face-dk) var(--face-dk) var(--face-hi);
  box-shadow: inset -1px -1px 0 var(--face-lo), inset 1px 1px 0 #e9edf5;
  cursor: pointer;
}
.btn98:hover { color: #000; text-shadow: none; }
.btn98:active, .btn98.is-on {
  border-color: var(--face-dk) var(--face-hi) var(--face-hi) var(--face-dk);
  box-shadow: inset 1px 1px 0 var(--face-lo);
  padding: 5px 11px 3px 13px;
}
.btn98:focus-visible { outline: 1px dotted #000; outline-offset: -5px; }
.btn98[disabled] { color: var(--face-lo); text-shadow: 1px 1px 0 #fff; cursor: default; }

.field98, textarea.field98 {
  width: 100%;
  padding: 4px 5px;
  font: 13px var(--ui);
  background: #fff;
  color: #000;
  border: 1px solid;
  border-color: var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo);
  box-shadow: inset 1px 1px 0 var(--face-dk);
  border-radius: 0;
}
.field98:focus { outline: 1px dotted var(--title-a); outline-offset: 1px; }

/* ---------- header ----------------------------------------------------- */
.masthead { text-align: center; padding: 6px 0 12px; position: relative; }
.masthead__logo {
  width: min(620px, 90%);
  margin: 0 auto;
  filter: drop-shadow(0 0 10px rgba(160, 210, 255, .55)) drop-shadow(0 0 1px #fff);
  animation: glitch 7s steps(1) infinite;
}
@keyframes glitch {
  0%, 92%, 100% { transform: none; filter: drop-shadow(0 0 10px rgba(160, 210, 255, .55)) drop-shadow(0 0 1px #fff); }
  93% { transform: translate(-3px, 1px) skewX(-4deg); filter: drop-shadow(3px 0 0 rgba(255, 60, 40, .8)) drop-shadow(-3px 0 0 rgba(60, 200, 255, .8)); }
  95% { transform: translate(2px, -1px); filter: drop-shadow(-2px 0 0 rgba(255, 60, 40, .8)) drop-shadow(2px 0 0 rgba(60, 200, 255, .8)); }
  97% { transform: none; opacity: .7; }
}
.masthead__leet {
  font: 22px/1 var(--mono);
  letter-spacing: 6px;
  color: var(--halo);
  margin-top: 6px;
  text-shadow: 0 0 8px rgba(120, 200, 255, .7);
}
.masthead__tag {
  font: 15px/1 var(--script);
  color: var(--ink-dim);
  margin-top: 8px;
  letter-spacing: 1px;
  word-spacing: .5em;
}

.ticker {
  overflow: hidden;
  white-space: nowrap;
  font: 18px/26px var(--mono);
  color: var(--acid);
  background: #000;
  border: 1px solid;
  border-color: var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo);
}
.ticker__inner { display: inline-block; padding-left: 100%; animation: tick 38s linear infinite; }
.ticker:hover .ticker__inner { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-100%); } }

/* nav */
.nav { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; padding: 6px 2px 2px; }
.nav .btn98 { font-weight: bold; text-transform: lowercase; }
.nav .btn98[aria-current="page"] {
  border-color: var(--face-dk) var(--face-hi) var(--face-hi) var(--face-dk);
  box-shadow: inset 1px 1px 0 var(--face-lo);
  background: repeating-conic-gradient(var(--face) 0 25%, #fff 0 50%) 0 0 / 2px 2px;
}

/* ---------- layout grid ------------------------------------------------- */
.cols { display: grid; grid-template-columns: 220px 1fr 230px; gap: 14px; align-items: start; }
.cols--two { grid-template-columns: 1fr 260px; }
.cols > * { min-width: 0; }

/* ---------- headings / text ------------------------------------------- */
h1, h2, h3 { font-family: var(--display); font-weight: normal; letter-spacing: 2px; margin: 0 0 10px; color: #fff; }
h1 { font-size: 26px; }
h2 { font-size: 18px; text-shadow: 0 0 8px rgba(140, 200, 255, .55); }
h3 { font-size: 14px; color: var(--halo); }
p { margin: 0 0 10px; }
.dim { color: var(--ink-dim); }
.mono { font-family: var(--mono); font-size: 17px; line-height: 1.25; }
.script { font-family: var(--script); word-spacing: .45em; letter-spacing: .5px; }
.hot { color: var(--ember); }
.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
hr.rule { border: 0; height: 9px; margin: 12px 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='9'%3E%3Cpath d='M9 0l2 4 4 .5-4 .5-2 4-2-4-4-.5 4-.5z' fill='%238fd8ff'/%3E%3C/svg%3E") center / 18px 9px repeat-x; opacity: .7; }

/* ---------- sidebar widgets ------------------------------------------- */
.cam { position: relative; overflow: hidden; background: #000; }
.cam img { width: 100%; filter: grayscale(.4) contrast(1.2); }
.cam::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .35) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply; pointer-events: none;
}
.cam__rec { position: absolute; top: 6px; left: 8px; font: 18px/1 var(--mono); color: #ff3b2f; z-index: 1; text-shadow: 0 0 4px #000; }
.cam__time { position: absolute; bottom: 6px; right: 8px; font: 16px/1 var(--mono); color: #fff; z-index: 1; text-shadow: 0 0 4px #000; }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 8px; font-size: 12px; }
.kv dt { color: var(--ink-dim); }
.kv dd { margin: 0; }

.counter {
  display: inline-flex; gap: 2px; padding: 3px;
  background: #000; border: 1px solid var(--face-lo);
}
.counter span {
  display: inline-block; width: 16px; text-align: center;
  font: 22px/26px var(--mono); color: var(--ember);
  background: linear-gradient(#1a0400, #000 50%, #1a0400);
  text-shadow: 0 0 6px rgba(255, 74, 38, .8);
}

.buttons88 { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.buttons88 img { width: 88px; height: 31px; image-rendering: pixelated; }

.gb-cta {
  display: block; text-align: center; text-decoration: none;
  font: 15px/1.2 var(--display); letter-spacing: 1px;
  color: var(--ember); padding: 8px;
  border: 1px dashed var(--ember);
  animation: flash 1.4s steps(1) infinite;
}
@keyframes flash { 50% { color: #fff; border-color: #fff; text-shadow: 0 0 8px var(--ember); } }

/* ---------- updates / todo ------------------------------------------- */
.log { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; }
.log li { padding: 6px 0; border-bottom: 1px dotted #26304d; }
.log time { font: 17px/1 var(--mono); color: var(--acid); margin-right: 6px; }
.todo { list-style: none; padding: 0; margin: 0; }
.todo li::before { content: "☐ "; color: var(--halo); }
.todo li.done { color: var(--ink-dim); text-decoration: line-through; }
.todo li.done::before { content: "☒ "; }

/* scrollbars, the 98 way */
.log::-webkit-scrollbar, .scroll98::-webkit-scrollbar { width: 16px; }
.log::-webkit-scrollbar-track, .scroll98::-webkit-scrollbar-track { background: repeating-conic-gradient(var(--face) 0 25%, #fff 0 50%) 0 0 / 2px 2px; }
.log::-webkit-scrollbar-thumb, .scroll98::-webkit-scrollbar-thumb {
  background: var(--face); border: 1px solid; border-color: var(--face-hi) var(--face-dk) var(--face-dk) var(--face-hi);
}

/* ---------- featured carousel ---------------------------------------- */
.feature { display: grid; grid-template-columns: 200px 1fr; gap: 14px; align-items: center; }
.feature__cover { position: relative; aspect-ratio: 1; background: #000; overflow: hidden; border: 1px solid #26304d; }
.feature__cover img { width: 100%; height: 100%; object-fit: cover; transition: opacity .3s; }
.feature__nav { display: flex; gap: 6px; align-items: center; margin-top: 10px; }
.feature__nav .btn98 { min-width: 34px; padding: 2px 8px; }
.feature__dots { font: 16px var(--mono); color: var(--ink-dim); margin-left: 6px; }
.feature__type { font: 16px/1 var(--mono); color: var(--acid); text-transform: uppercase; }

/* ---------- player (winamp-ish) -------------------------------------- */
.amp {
  background: linear-gradient(#2a3042, #11141d);
  border: 1px solid; border-color: #6c7896 #000 #000 #6c7896;
  padding: 6px;
  color: var(--ink);
  font-family: var(--ui);
}
.amp__screen {
  display: grid; grid-template-columns: 1fr; gap: 4px;
  background: #000; padding: 6px 8px;
  border: 1px solid; border-color: #000 #3b4560 #3b4560 #000;
}
.amp__row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.amp__time { font: 30px/1 var(--mono); color: var(--acid); text-shadow: 0 0 6px rgba(182, 255, 59, .6); }
.amp__meta { font: 14px/1 var(--mono); color: #6f8; text-align: right; }
.amp__title { font: 18px/1.1 var(--mono); color: var(--acid); white-space: nowrap; overflow: hidden; }
.amp__title span { display: inline-block; padding-left: 100%; animation: tick 14s linear infinite; }
.amp__viz { width: 100%; height: 38px; display: block; }
.amp__seek, .amp__vol { width: 100%; margin: 6px 0 2px; accent-color: var(--title-b); }
.amp__ctrls { display: flex; gap: 3px; margin-top: 4px; }
.amp__ctrls button {
  flex: 1; height: 22px; padding: 0;
  font: 12px/1 var(--ui); color: #000;
  background: linear-gradient(#e4e8f0, #9aa3b5);
  border: 1px solid; border-color: #fff #222 #222 #fff;
  cursor: pointer;
}
.amp__ctrls button:active, .amp__ctrls button.is-on { border-color: #222 #fff #fff #222; background: linear-gradient(#9aa3b5, #e4e8f0); }
.amp__vol-row { display: flex; align-items: center; gap: 6px; font: 14px var(--mono); color: var(--ink-dim); }
.amp__list {
  list-style: none; margin: 6px 0 0; padding: 4px 0;
  max-height: 150px; overflow-y: auto;
  background: #000; border: 1px solid; border-color: #000 #3b4560 #3b4560 #000;
  font: 16px/1.25 var(--mono); color: #4bd36b;
}
.amp__list li { padding: 0 6px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.amp__list li:hover { background: #0b2a10; }
.amp__list li.is-current { color: #fff; background: #1a3cff; }
.amp__nosig { color: var(--ember) !important; }

/* ---------- discography ------------------------------------------------ */
.release { display: grid; grid-template-columns: 260px 1fr; gap: 16px; }
.release__cover { cursor: zoom-in; border: 1px solid #26304d; }
.release__alts { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.release__alts img { width: 40px; height: 40px; object-fit: cover; cursor: pointer; border: 1px solid #26304d; }
.release__alts img:hover { border-color: var(--halo); }
.tracks { list-style: none; margin: 8px 0 12px; padding: 0; counter-reset: t; }
.tracks li {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px; counter-increment: t;
  border-bottom: 1px dotted #26304d;
}
.tracks li::before { content: counter(t, decimal-leading-zero); font: 17px/1 var(--mono); color: var(--ink-dim); }
.tracks li button.play { all: unset; flex: 1; cursor: pointer; }
.tracks li button.play:hover, .tracks li button.play:focus-visible { color: var(--link-hot); }
.tracks li button.play:focus-visible { outline: 1px dotted var(--halo); }
.tracks li .lyr { font: 15px/1 var(--mono); }
.stores { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- shows ------------------------------------------------------ */
.shows { width: 100%; border-collapse: collapse; font-size: 13px; }
.shows th { text-align: left; font: 16px var(--mono); color: var(--ink-dim); font-weight: normal; border-bottom: 1px solid #26304d; padding: 4px 6px; }
.shows td { padding: 8px 6px; border-bottom: 1px dotted #26304d; vertical-align: top; }
.shows td:first-child { font: 18px/1.1 var(--mono); color: var(--acid); white-space: nowrap; }
.shows .past td { opacity: .5; }
.empty { text-align: center; padding: 26px 10px; }
.empty .mono { color: var(--ember); font-size: 22px; }

.members { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.member .win__body { padding: 8px; }
.member img { aspect-ratio: 1; object-fit: cover; width: 100%; filter: grayscale(.3) contrast(1.15); }
.member h3 { margin: 8px 0 4px; }

/* ---------- gallery ---------------------------------------------------- */
.explorer { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 16px 10px; }
.explorer button {
  all: unset; cursor: pointer; text-align: center;
  font-size: 11px; color: #000; word-break: break-all;
}
.explorer img { width: 96px; height: 96px; object-fit: cover; margin: 0 auto 4px; border: 1px solid #888; background: #000; }
.explorer button:hover span, .explorer button:focus-visible span { background: var(--title-a); color: #fff; outline: 1px dotted #fff; }

/* ---------- guestbook ------------------------------------------------- */
.gb-form { display: grid; gap: 8px; }
.gb-form label { font-size: 12px; color: #000; }
.gb-entries { list-style: none; margin: 0; padding: 0; }
.gb-entry { padding: 10px 0; border-bottom: 1px dotted #26304d; }
.gb-entry header { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin-bottom: 4px; }
.gb-entry b { color: #fff; }
.gb-entry time { font: 15px var(--mono); color: var(--ink-dim); }
.gb-entry p { white-space: pre-wrap; word-break: break-word; margin: 0; }
.notice { font-size: 12px; padding: 6px 8px; background: #fffbe0; color: #000; border: 1px solid #000; margin-bottom: 10px; }

.linklist { list-style: none; margin: 0; padding: 0; }
.linklist li { padding: 3px 0; break-inside: avoid; }
.linklist li::before { content: "➤ "; color: var(--halo); }
.code98 { width: 100%; height: 66px; font: 12px var(--mono); resize: none; }

/* ---------- floating windows (lightbox, lyrics, dialog) -------------- */
.float {
  position: fixed; z-index: 900;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, calc(100vw - 24px));
  max-height: calc(100vh - var(--taskbar-h) - 24px);
  display: flex; flex-direction: column;
  margin: 0;
}
.float.is-placed { transform: none; }
.float .win__title { cursor: move; }
.float .win__body { overflow: auto; flex: 1; }
.float .win__body img { margin: 0 auto; max-height: 70vh; width: auto; }
.lyrics { font: 19px/1.25 var(--mono); white-space: pre-wrap; margin: 0; color: var(--ink); }

/* ---------- taskbar ---------------------------------------------------- */
.taskbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  height: var(--taskbar-h);
  display: flex; align-items: center; gap: 4px;
  padding: 3px 3px;
  background: var(--face);
  border-top: 1px solid var(--face-hi);
  box-shadow: inset 0 1px 0 #e9edf5, 0 -1px 0 var(--face-lo);
  color: #000;
}
.start-btn {
  display: flex; align-items: center; gap: 4px;
  height: 26px; padding: 0 8px 0 4px; min-width: 0;
  font-weight: bold;
}
.start-btn img { width: 20px; height: 20px; object-fit: contain; filter: invert(1); }
.taskbar__tasks { flex: 1; display: flex; gap: 3px; overflow: hidden; }
.taskbar__task {
  max-width: 170px; flex: 1; text-align: left; height: 26px; padding: 3px 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tray {
  display: flex; align-items: center; gap: 8px;
  height: 26px; padding: 0 8px;
  border: 1px solid; border-color: var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo);
  font-size: 12px;
}
.tray button { all: unset; cursor: pointer; font-size: 14px; line-height: 1; }
.tray button:focus-visible { outline: 1px dotted #000; }

.startmenu {
  position: fixed; left: 2px; bottom: calc(var(--taskbar-h) - 2px); z-index: 1001;
  display: none; min-width: 230px;
  background: var(--face);
  border: 1px solid; border-color: var(--face-hi) var(--face-dk) var(--face-dk) var(--face-hi);
  box-shadow: inset -1px -1px 0 var(--face-lo), 3px 3px 0 rgba(0, 0, 0, .5);
}
.startmenu.is-open { display: flex; }
.startmenu__side {
  writing-mode: vertical-rl; transform: rotate(180deg);
  padding: 8px 4px; width: 28px;
  background: linear-gradient(0deg, var(--title-a), var(--title-b));
  color: #fff; font: 16px/1 var(--display); letter-spacing: 3px;
}
.startmenu ul { list-style: none; margin: 0; padding: 3px 0; flex: 1; }
.startmenu a, .startmenu button {
  all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 6px 14px 6px 8px; font: 13px var(--ui); color: #000; cursor: pointer;
}
.startmenu a:hover, .startmenu a:focus-visible, .startmenu button:hover, .startmenu button:focus-visible { background: var(--title-a); color: #fff; text-shadow: none; }
.startmenu .ico { width: 22px; text-align: center; font-size: 17px; }
.startmenu hr { border: 0; border-top: 1px solid var(--face-lo); border-bottom: 1px solid #fff; margin: 3px 4px; }

/* ---------- boot screen ----------------------------------------------- */
.boot {
  position: fixed; inset: 0; z-index: 2000;
  background: #000; color: #cfd8e6;
  font: 20px/1.25 var(--mono);
  padding: 24px;
  display: flex; flex-direction: column;
  cursor: pointer;
}
.boot__top { display: flex; gap: 20px; align-items: flex-start; }
.boot__top img { width: 90px; image-rendering: pixelated; }
.boot pre { margin: 0; white-space: pre-wrap; font: inherit; flex: 1; }
.boot__skip { margin-top: auto; color: #6f7a90; }
.boot.is-done { animation: crtoff .45s ease-in forwards; }
@keyframes crtoff {
  60% { transform: scaleY(.008); filter: brightness(4); }
  100% { transform: scale(0, .008); opacity: 0; }
}

/* ---------- CRT / noise overlay --------------------------------------- */
.crt {
  position: fixed; inset: 0; z-index: 1500; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, .45) 100%);
}
.crt::after {
  content: ""; position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity: .07;
  animation: grain .5s steps(4) infinite;
}
@keyframes grain { 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-1%, 3%); } }
body.no-crt .crt { display: none; }

/* cursor trail sparkles */
.spark {
  position: fixed; z-index: 1600; pointer-events: none;
  width: 9px; height: 9px; margin: -4px 0 0 -4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0l1 4 4 1-4 1-1 4-1-4-4-1 4-1z' fill='%23dff4ff'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: spark .7s ease-out forwards;
}
@keyframes spark { to { transform: translateY(14px) scale(.2) rotate(90deg); opacity: 0; } }

/* ---------- footer ---------------------------------------------------- */
.foot { text-align: center; font-size: 11px; color: var(--ink-dim); padding: 10px 0 0; }
.foot .mono { font-size: 15px; }

/* ---------- small screens --------------------------------------------- */
@media (max-width: 900px) {
  .cols { grid-template-columns: 1fr 1fr; }
  .cols > .col-main { grid-column: 1 / -1; order: -1; }
}
@media (max-width: 640px) {
  body { font-size: 14px; }
  .desktop { padding: 12px 10px 0; }
  .cols, .cols--two { grid-template-columns: 1fr; }
  .cols > .col-right { order: 0; }
  .cols > .col-left { order: 1; }
  .feature, .release { grid-template-columns: 1fr; }
  .feature__cover { max-width: 280px; }
  .release__cover { max-width: 340px; }
  .masthead__leet { font-size: 17px; letter-spacing: 3px; }
  .linklist { columns: 1; }
  .taskbar__tasks { display: none; }
  .tray .tray__clock { display: inline; }
  .nav .btn98 { min-width: 0; flex: 1 1 28%; }
  .win__menu { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; }
  .ticker__inner, .amp__title span { padding-left: 0; }
}