/* ============================================================
   REBURN™ — playlist 2 plastic
   Y2K desktop system: Win98 teal ground, Luna chrome, sharpie ink
   ============================================================ */

/* served from the site, not read from the visitor's font book — so the pixel
   font shows up on phones and on machines that don't have it installed.
   the family is named "FS Tahoma" (no "8px") so it never collides with a
   locally-installed copy of the same face. */
@font-face {
  font-family: "FS Tahoma";
  src: url("fonts/fs-tahoma-8px.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;   /* show tahoma immediately, swap when the file lands */
}

:root {
  --desktop: #067a74;
  --desktop-deep: #024541;
  --luna-a: #2e5cb8;
  --luna-b: #6a9ce8;
  --luna-line: #16337a;
  --beige: #ece9d8;
  --chrome: #c0c0c0;
  --chrome-hi: #ffffff;
  --chrome-lo: #808080;
  --chrome-dk: #404040;
  --ink: #141319;
  --paper: #f6f2e6;
  --sharpie: #ff5c00;
  --sharpie-dk: #c93f00;
  --lime: #c6ff3f;
  --cd-pink: #ff8ad4;
  --cd-cyan: #7de8ff;
  --shadow-hard: 4px 4px 0 rgba(10, 20, 18, 0.45);
  /* fs Tahoma 8px is a pixel font: 2000 upem with a 1000-unit cap height, so
     one design pixel = 250 units and it only lands on whole pixels at MULTIPLES
     OF 8. 16px (2x design size) is the one usable UI size — 12/14/18px render
     off-grid and go soft. everything chrome-sized derives from --ui-size so the
     whole scale moves together; Tahoma stays as the fallback for other machines. */
  /* "FS Tahoma" is the @font-face above (served, works everywhere);
     "fs Tahoma 8px" is the locally-installed copy, kept first so this mac
     skips the download. tahoma remains the fallback if neither resolves. */
  --ui-font: "fs Tahoma 8px", "FS Tahoma", Tahoma, "MS Sans Serif", Geneva, Verdana, sans-serif;
  --ui-size: 16px;
  --display-font: Impact, "Arial Black", "Helvetica Neue", sans-serif;
  --marker-font: "Marker Felt", "Comic Sans MS", "Segoe Print", "Comic Neue", cursive;
  --mono-font: "Courier New", Courier, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* safari 26 (liquid glass) tints its floating toolbar by sampling the ROOT
   background, and ignores <meta theme-color>. painting html in the taskbar's
   dark blue makes safari's bottom bar read as part of the taskbar instead of
   showing the teal desktop through it. body paints over this everywhere else. */
html {
  -webkit-text-size-adjust: 100%;
  background-color: #142e6b;
}

body {
  font-family: var(--ui-font);
  font-size: var(--ui-size);
  color: var(--ink);
  background-color: var(--desktop);
  background-image:
    radial-gradient(ellipse 120% 90% at 50% -10%, rgba(255, 255, 255, 0.14), transparent 60%),
    radial-gradient(ellipse 140% 110% at 50% 115%, rgba(0, 0, 0, 0.38), transparent 55%),
    repeating-conic-gradient(rgba(255, 255, 255, 0.028) 0% 25%, transparent 0% 50%);
  background-size: auto, auto, 4px 4px;
  min-height: 100vh;
  min-height: 100svh; /* not 100vh on ios: body must not run under safari's chrome */
  overflow-x: hidden;
  cursor: default;
}

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

/* --- film grain over everything --- */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.9s steps(4) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-1.2%, 0.8%); }
  50% { transform: translate(0.9%, -1.1%); }
  75% { transform: translate(-0.6%, -0.5%); }
  100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
}

a { color: #0b2fbf; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px dashed var(--sharpie);
  outline-offset: 2px;
}

button { font-family: var(--ui-font); cursor: pointer; }
input, select, textarea { font-family: var(--ui-font); font-size: var(--ui-size); }

/* ============================================================
   WINDOW CHROME
   ============================================================ */

.window {
  min-width: 0;
  max-width: 100%;
  background: var(--beige);
  border: 1px solid var(--luna-line);
  border-radius: 8px 8px 0 0;
  box-shadow: var(--shadow-hard), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  overflow: hidden;
}

.titlebar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 8px;
  background: linear-gradient(180deg, #7fa9ee 0%, var(--luna-b) 8%, var(--luna-a) 45%, #234a9d 92%, var(--luna-line) 100%);
  color: #fff;
  font-weight: bold;
  font-size: var(--ui-size);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.55);
  user-select: none;
}
@media (min-width: 901px) and (pointer: fine) {
  .titlebar { touch-action: none; }
}
.titlebar .t-icon { font-size: calc(var(--ui-size) + 1px); line-height: 1; filter: drop-shadow(1px 1px 0 rgba(0,0,0,.4)); }
.titlebar .t-text { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; letter-spacing: 0.02em; }

.t-btns { display: flex; gap: 2px; }
.t-btn {
  /* the minimize/close boxes are a fixed 20x18 — that geometry IS the xp look,
     so the glyph stays fixed too. scaling it with --ui-size just overflows the
     box and the ▁/✕ start clipping. */
  width: 20px; height: 18px;
  border: 1px solid #fff;
  border-radius: 3px;
  font: bold 10px/1 var(--ui-font);
  color: #fff;
  background: linear-gradient(180deg, #6d97e2, #3560b6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
  display: grid; place-items: center;
  padding: 0;
}
.t-btn.close { background: linear-gradient(180deg, #f0955b, #d3502a 55%, #b03510); }
.t-btn:active { transform: translateY(1px); }

.win-body { padding: 12px; min-width: 0; }

.win-statusbar {
  border-top: 1px solid #fff;
  box-shadow: 0 -1px 0 var(--chrome-lo);
  background: var(--beige);
  padding: 3px 8px;
  font-size: calc(var(--ui-size) - 2px);
  color: #4c4a44;
  display: flex;
  gap: 14px;
  overflow: hidden;
  white-space: nowrap;
}

/* windows minimized */
.window.minimized .win-body,
.window.minimized .win-statusbar { display: none; }

/* ============================================================
   BEVEL BUTTONS & CONTROLS (98-style)
   ============================================================ */

.btn95 {
  background: var(--chrome);
  border: none;
  padding: 5px 14px;
  font-size: var(--ui-size);
  color: var(--ink);
  box-shadow:
    inset -1px -1px 0 var(--chrome-dk),
    inset 1px 1px 0 var(--chrome-hi),
    inset -2px -2px 0 var(--chrome-lo),
    inset 2px 2px 0 #e6e6e6;
}
.btn95:active {
  box-shadow:
    inset 1px 1px 0 var(--chrome-dk),
    inset -1px -1px 0 var(--chrome-hi),
    inset 2px 2px 0 var(--chrome-lo);
  padding: 6px 13px 4px 15px;
}
.btn95:disabled { color: var(--chrome-lo); text-shadow: 1px 1px 0 #fff; cursor: not-allowed; }

.field95 {
  background: #fff;
  border: none;
  padding: 5px 7px;
  box-shadow:
    inset 1px 1px 0 var(--chrome-lo),
    inset -1px -1px 0 var(--chrome-hi),
    inset 2px 2px 0 var(--chrome-dk);
}

.inset95 {
  background: #fff;
  box-shadow:
    inset 1px 1px 0 var(--chrome-lo),
    inset -1px -1px 0 var(--chrome-hi),
    inset 2px 2px 0 rgba(64, 64, 64, 0.6);
}

/* big burn CTA */
.btn-burn {
  display: inline-block;
  font-family: var(--display-font);
  font-size: 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 2px 2px 0 var(--sharpie-dk);
  text-decoration: none;
  background:
    linear-gradient(180deg, #ffb46b 0%, var(--sharpie) 40%, #e34a00 60%, #ff7c2e 100%);
  border: 2px solid var(--ink);
  border-radius: 4px;
  padding: 12px 28px 10px;
  box-shadow: var(--shadow-hard), inset 0 2px 0 rgba(255, 255, 255, 0.55);
  cursor: pointer;
}
.btn-burn:hover { filter: saturate(1.2) brightness(1.05); }
.btn-burn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 rgba(10, 20, 18, 0.45); }

/* ============================================================
   STICKERS, STARBURSTS, TAPE
   ============================================================ */

.sticker {
  display: inline-block;
  background: var(--lime);
  color: var(--ink);
  font-family: var(--marker-font);
  font-size: 14px;
  padding: 4px 10px;
  border: 2px solid var(--ink);
  border-radius: 3px 14px 4px 12px;
  box-shadow: 0 0 0 3px #fff, 3px 4px 0 3px rgba(10, 20, 18, 0.35);
  transform: rotate(-4deg);
  user-select: none;
}
.sticker.pink { background: var(--cd-pink); }
.sticker.cyan { background: var(--cd-cyan); }
.sticker.white { background: #fff; }

.starburst {
  width: 118px; height: 118px;
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--sharpie);
  color: #fff;
  font-family: var(--display-font);
  font-size: 15px;
  line-height: 1.05;
  text-transform: uppercase;
  clip-path: polygon(50% 0%, 59% 12%, 72% 5%, 75% 19%, 90% 17%, 87% 32%, 100% 38%, 91% 50%, 100% 62%, 87% 68%, 90% 83%, 75% 81%, 72% 95%, 59% 88%, 50% 100%, 41% 88%, 28% 95%, 25% 81%, 10% 83%, 13% 68%, 0% 62%, 9% 50%, 0% 38%, 13% 32%, 10% 17%, 25% 19%, 28% 5%, 41% 12%);
  transform: rotate(8deg);
  user-select: none;
}

.tape {
  position: absolute;
  width: 84px; height: 26px;
  background: rgba(250, 244, 200, 0.55);
  border-left: 1px dashed rgba(120, 110, 70, 0.5);
  border-right: 1px dashed rgba(120, 110, 70, 0.5);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  transform: rotate(-6deg);
  pointer-events: none;
}

/* ============================================================
   THE DISC — white printable CD-R, full-surface print
   ============================================================ */

.cd {
  --cd-size: 260px;
  --cd-print: linear-gradient(160deg, #ffffff, #f2f4f8 55%, #e6eaf0);
  position: relative;
  width: var(--cd-size);
  height: var(--cd-size);
  border-radius: 50%;
  overflow: hidden;
  background: var(--cd-print) center/cover no-repeat, #fff;
  box-shadow:
    inset 0 0 0 1px rgba(150, 160, 175, 0.5),
    6px 8px 0 rgba(10, 20, 18, 0.35);
}

/* printable stock: matte paper tooth + the faint lacquer sheen of a real disc */
.cd::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0.16) 0 1px, rgba(120,130,145,0.05) 1px 3px),
    conic-gradient(from 200deg,
      rgba(255,255,255,0) 0deg,
      rgba(255,255,255,0.3) 55deg,
      rgba(190, 205, 225, 0.16) 120deg,
      rgba(255,255,255,0.26) 195deg,
      rgba(190, 205, 225, 0.14) 280deg,
      rgba(255,255,255,0) 360deg);
  mix-blend-mode: overlay;
}

/* unprinted clamping ring, stacking ring + hub + hole */
.cd::before {
  content: "";
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  z-index: 2;
  background:
    radial-gradient(circle,
      var(--desktop) 0 24%,              /* hole shows the desktop through */
      rgba(228, 232, 238, 0.98) 25% 33%, /* clear plastic hub */
      rgba(206, 212, 222, 0.95) 34% 38%,
      rgba(249, 250, 252, 0.98) 39% 62%, /* unprinted white margin */
      rgba(224, 229, 237, 0.9) 63% 68%,  /* stacking ring */
      rgba(252, 253, 255, 0.75) 69% 78%,
      transparent 79%);
  box-shadow: inset 0 0 8px rgba(90, 105, 125, 0.25);
}
.cd .cd-hole-ring {
  position: absolute;
  inset: 37%;
  border-radius: 50%;
  border: 1px solid rgba(120, 132, 150, 0.5);
  z-index: 3;
  pointer-events: none;
}

/* printed text, laid inside the print ring */
.cd .cd-title {
  position: absolute;
  left: 50%; top: 13%;
  transform: translateX(-50%);
  width: 72%;
  text-align: center;
  font-family: var(--ui-font);
  font-weight: bold;
  font-size: calc(var(--cd-size) * 0.072);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink);
  z-index: 3;
  pointer-events: none;
  overflow-wrap: anywhere;
}
.cd .cd-sub {
  position: absolute;
  left: 50%; bottom: 15%;
  transform: translateX(-50%);
  max-width: 72%;
  text-align: center;
  font: calc(var(--cd-size) * 0.042)/1.2 var(--mono-font);
  letter-spacing: 0.1em;
  color: #4c5666;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cd .cd-brand {
  position: absolute;
  left: 50%; bottom: 9%;
  transform: translateX(-50%);
  font: 400 calc(var(--cd-size) * 0.028)/1 var(--mono-font);
  letter-spacing: 0.24em;
  color: rgba(95, 108, 126, 0.85);
  z-index: 3;
  pointer-events: none;
  white-space: nowrap;
}

/* when artwork is printed across the face, text sits on a legible scrim */
.cd.has-print .cd-title,
.cd.has-print .cd-sub,
.cd.has-print .cd-brand { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75); }
.cd.has-print::before { box-shadow: inset 0 0 10px rgba(40, 50, 65, 0.35); }

.cd.spinning { animation: cdspin 7s linear infinite; }
@keyframes cdspin { to { transform: rotate(360deg); } }

/* ============================================================
   JEWEL CASE
   ============================================================ */

.jewel {
  --jw: 300px;
  position: relative;
  width: var(--jw);
  height: calc(var(--jw) * 0.9);
  background: linear-gradient(160deg, rgba(255,255,255,0.5), rgba(215, 225, 235, 0.25) 40%, rgba(255,255,255,0.4));
  border: 2px solid rgba(255, 255, 255, 0.75);
  outline: 1px solid rgba(20, 30, 40, 0.5);
  box-shadow:
    inset 0 0 0 6px rgba(255, 255, 255, 0.22),
    inset 6px 0 12px rgba(255, 255, 255, 0.3),
    7px 9px 0 rgba(10, 20, 18, 0.35);
}
/* THE ART SLOT — drop real album art in here and the shine layer above makes
   it look like it's sitting inside the case. set --art to a url() and it just
   works: <div class="jw-art" style="--art:url(cover.jpg)"> */
.jewel .jw-art {
  position: absolute;
  inset: 10px;
  background: #ddd center/cover no-repeat;
  background-image: var(--art, none);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.jewel .jw-spine {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 18px;
  background: linear-gradient(90deg, rgba(255,255,255,0.65), rgba(200,210,220,0.35));
  border-right: 1px solid rgba(20, 30, 40, 0.35);
  z-index: 2;
}
/* THE REFLECTION LAYER — this is the "alpha layer" that sells the mockup.
   it is a transparent sheet stacked ON TOP of .jw-art, so any artwork dropped
   into the art slot appears to sit behind real polystyrene. all of it is
   pointer-events:none so it never eats clicks on the art underneath. */
.jewel .jw-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background:
    /* 1. the big diagonal window reflection — the dominant read */
    linear-gradient(115deg,
      transparent 26%,
      rgba(255,255,255,0.46) 33%,
      rgba(255,255,255,0.10) 40%,
      rgba(255,255,255,0.28) 45%,
      transparent 53%),
    /* 2. soft counter-light bouncing off the lower right */
    linear-gradient(295deg, transparent 58%, rgba(255,255,255,0.26) 78%, transparent 88%),
    /* 3. vertical brightening down the left edge where the lid curves */
    linear-gradient(90deg, rgba(255,255,255,0.34) 0 3%, transparent 12%),
    /* 4. the plastic is slightly cool//tinted, strongest at the corners */
    radial-gradient(ellipse 120% 90% at 18% 8%, rgba(214,232,245,0.30), transparent 55%),
    radial-gradient(ellipse 90% 70% at 92% 96%, rgba(180,205,225,0.22), transparent 60%);
}
/* the moulded front lip: a bright hairline just inside the case edge */
.jewel .jw-shine::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(255,255,255,0.5);
  border-right-color: rgba(255,255,255,0.22);
  border-bottom-color: rgba(255,255,255,0.18);
}
/* hinge teeth down the spine — the detail that reads instantly as "jewel case" */
.jewel .jw-shine::after {
  content: "";
  position: absolute;
  left: 0; top: 12%; bottom: 12%;
  width: 18px;
  background: repeating-linear-gradient(180deg,
    rgba(255,255,255,0.42) 0 6px,
    rgba(120,140,155,0.20) 6px 9px);
  opacity: 0.55;
}
/* recess shadow so the artwork reads as sunk into the tray, not pasted on */
.jewel .jw-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow:
    inset 0 0 10px rgba(10,20,30,0.45),
    inset 0 1px 0 rgba(0,0,0,0.35);
}
.jewel .jw-crack {
  position: absolute;
  top: 6%; right: 10%;
  width: 34%; height: 26%;
  pointer-events: none;
  z-index: 3;
  opacity: 0.5;
}

/* preset artwork faces (landing wall + creator presets)
   doubled class keeps these winning against .jewel .jw-art / .art-live rules */
.a1.a1 { background: linear-gradient(160deg, #ff8ad4 0%, #b03a8c 55%, #3c1030 100%),
                   repeating-linear-gradient(0deg, rgba(255,255,255,0.12) 0 2px, transparent 2px 5px); background-blend-mode: overlay; }
.a2.a2 { background: radial-gradient(circle at 30% 25%, #c6ff3f 0%, #3f8a1f 45%, #10250b 100%); }
.a3.a3 { background: linear-gradient(200deg, #7de8ff 0%, #2456b8 55%, #0a1030 100%),
                   repeating-conic-gradient(rgba(255,255,255,0.08) 0% 25%, transparent 0% 50%); background-size: auto, 8px 8px; }
.a4.a4 { background: linear-gradient(160deg, #4a4e59 0%, #17181d 70%),
                   repeating-linear-gradient(45deg, rgba(255,92,0,0.35) 0 6px, transparent 6px 14px); }

/* the whole desktop chrome scales up on big screens to match the pages —
   see the per-page "DESKTOP SCALE-UP" blocks. gated on min-width so phones,
   which have no room to give, keep the compact original. */
@media (min-width: 900px) {
  /* --ui-size lives HERE, not in the per-page blocks: every page shares this
     stylesheet, so one definition means the taskbar/statusbar/buttons can never
     end up at different sizes depending on which page you're on. */
  :root { --ui-size: 24px; }

  .taskbar { height: 52px; font-size: calc(var(--ui-size) - 4px); }
  .start-btn { font-size: calc(var(--ui-size) - 3px); padding: 0 24px 0 16px; border-radius: 0 16px 16px 0; }
  .task-item { font-size: calc(var(--ui-size) - 4px); padding: 0 14px; min-width: 200px; }
  .task-tray { font-size: calc(var(--ui-size) - 4px); padding: 0 16px; }
  .win-statusbar { padding: 5px 12px; }
  .t-btn { width: 30px; height: 26px; font-size: calc(var(--ui-size) - 10px); }
  .titlebar { padding: 6px 6px 6px 12px; gap: 9px; }
}

/* ============================================================
   TASKBAR
   ============================================================ */

.taskbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  /* content stays 38px; the safe-area inset is added as padding below it so the
     luna gradient paints under the iphone home indicator / safari bottom bar */
  box-sizing: content-box;
  height: 38px;
  z-index: 5000;
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 3px 8px calc(3px + env(safe-area-inset-bottom, 0px)) 0;
  background: linear-gradient(180deg, #3b6fd0 0%, #2a55ae 12%, #1f4494 80%, #142e6b 100%);
  /* the last stop repeats so the inset strip stays solid #142e6b, not a fade */
  background-size: 100% 44px;
  background-repeat: no-repeat;
  background-color: #142e6b;
  border-top: 1px solid #7fa9ee;
  box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.4);
  /* the taskbar has a fixed 38px height, so it steps down from --ui-size */
  font-size: calc(var(--ui-size) - 3px);
}
/* ios safari's url pill floats over the page below the taskbar, so the page
   shows through around it. this fills that strip with taskbar colour. it is a
   SEPARATE fixed element, not a ::after on .taskbar — a negative-z-index child
   paints behind its own parent's background and would never be visible. */
/* ios 26 safari refuses to RENDER fixed content below its floating controls —
   it clips rather than paints, so a "skirt" below 100svh can never work.
   instead safari tints its own toolbar by sampling the page behind it, which
   is handled by the html background colour (see the html rule up top). */
.start-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  border: none;
  padding: 0 18px 0 12px;
  border-radius: 0 12px 12px 0;
  background: linear-gradient(180deg, #7ed05e 0%, #3f9a26 45%, #2c7d18 90%);
  box-shadow: inset 0 2px 1px rgba(255,255,255,0.45), 2px 0 4px rgba(0,0,0,0.35);
  color: #fff;
  font: italic bold 15px/1 var(--ui-font);
  text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
  text-decoration: none;
}
.start-btn:hover { filter: brightness(1.1); }
.task-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  min-width: 0;
  color: #fff;
  background: linear-gradient(180deg, #4a7ad8, #2f57ab);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  font-size: calc(var(--ui-size) - 3px);
  border-width: 1px;
  cursor: pointer;
}
.task-item.active { background: linear-gradient(180deg, #1d3d85, #16306a); box-shadow: inset 0 2px 3px rgba(0,0,0,0.45); }
.task-tray {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  color: #dbe7ff;
  background: linear-gradient(180deg, #2a55ae, #1a3a80);
  border-left: 1px solid rgba(255,255,255,0.3);
  font-size: calc(var(--ui-size) - 3px);
  white-space: nowrap;
}

/* ============================================================
   MARQUEE
   ============================================================ */

.marquee-strip {
  overflow: hidden;
  background: var(--ink);
  color: var(--lime);
  border-top: 2px solid var(--lime);
  border-bottom: 2px solid var(--lime);
  font: 13px/1 var(--mono-font);
  letter-spacing: 0.06em;
  user-select: none;
}
.marquee-inner {
  display: inline-block;
  white-space: nowrap;
  padding: 7px 0;
  animation: marquee 26s linear infinite;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================
   UTILITIES
   ============================================================ */

.display {
  font-family: var(--display-font);
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: 0.01em;
}
.chrome-text {
  color: #eef3fa;
  background: linear-gradient(180deg, #ffffff 12%, #b8c4d4 38%, #5c6b80 50%, #dfe7f2 55%, #8fa0b6 78%, #ffffff 96%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(2px 3px 0 rgba(10, 20, 18, 0.55));
}
.scrawl { font-family: var(--marker-font); }
.mono { font-family: var(--mono-font); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}