/* ─── Home: big hero, ticker and the featured app panels ─────────────────────
   Each panel wears its app's own colors (from the app's site), whatever the page theme,
   with a technical frame around it: mono labels, grid lines and live readouts. */

/* JetBrains Mono (variable), self-hosted from fonts/. */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-v24-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-v24-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --serif: ui-serif, "New York", "Iowan Old Style", Georgia, serif;
  --grid-line: rgba(0, 0, 0, 0.05);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --grid-line: rgba(255, 255, 255, 0.05); }
}
:root[data-theme="dark"] { --grid-line: rgba(255, 255, 255, 0.05); }

/* ─── Hero ─────────────────────────────────────────────── */
.hero { position: relative; padding-block: 120px 88px; isolation: isolate; overflow: clip; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px; background-position: center top;
  -webkit-mask-image: radial-gradient(60% 70% at 50% 40%, #000 30%, transparent 75%);
  mask-image: radial-gradient(60% 70% at 50% 40%, #000 30%, transparent 75%);
}
.hero .eyebrow { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.04em; }
.hero h1 {
  font-size: clamp(2.9rem, 8.4vw, 6.6rem); font-weight: 800; letter-spacing: -0.04em;
  line-height: 0.98; max-width: 1000px;
}
.hero-lede { font-size: clamp(1.1rem, 2.1vw, 1.35rem); max-width: 640px; margin-top: 28px; }

/* ─── Ticker ───────────────────────────────────────────── */
.ticker {
  overflow: hidden; border-block: 1px solid var(--border); padding-block: 14px;
  font-family: var(--mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-3);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ticker-track { display: flex; gap: 28px; width: max-content; animation: ticker 48s linear infinite; }
.ticker-track i { font-style: normal; color: var(--accent); font-size: 0.6rem; align-self: center; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ─── Showcase ─────────────────────────────────────────── */
.showcase { padding-block: 104px 40px; }
.mono-label { font-family: var(--mono); font-size: 0.78rem; color: var(--text-3); letter-spacing: 0.02em; }
.showcase-head { margin-bottom: 44px; }
.showcase-head h2 {
  font-size: clamp(2.3rem, 6vw, 4.8rem); font-weight: 800; letter-spacing: -0.038em; line-height: 1.02;
  margin-top: 14px; max-width: 900px;
}
.showcase-head h2 span { color: var(--text-3); }
.showcase-head p { color: var(--text-2); font-size: 1.15rem; margin-top: 18px; max-width: 560px; }

.panel {
  --p-bg: #111; --p-accent: #fff; --p-glow: rgba(255, 255, 255, 0.2); --p-glow-2: transparent;
  --p-head: linear-gradient(90deg, #fff, #fff);
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 56px); align-items: center;
  margin-top: 24px; padding: clamp(24px, 4.4vw, 56px);
  border-radius: 32px; color: #fff; background: var(--p-bg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.45);
}
/* The grid and a slow glow behind every panel */
.panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: linear-gradient(115deg, transparent 5%, #000 55%, transparent 95%);
  mask-image: linear-gradient(115deg, transparent 5%, #000 55%, transparent 95%);
}
.panel::after {
  content: ""; position: absolute; z-index: -2; pointer-events: none; width: 70%; aspect-ratio: 1; right: -15%; top: -35%;
  background: radial-gradient(closest-side, var(--p-glow), transparent), radial-gradient(closest-side at 20% 90%, var(--p-glow-2), transparent);
  filter: blur(10px); animation: drift 16s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translate(-18%, 22%) scale(1.15); } }

.panel--flip .panel-copy { order: 2; }
.panel-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.panel-pair .panel { margin-top: 24px; }
.panel--tall { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 28px; }
@media (max-width: 900px) {
  .panel { grid-template-columns: minmax(0, 1fr); }
  .panel--flip .panel-copy { order: 0; }
  .panel-pair { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

.panel-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  font-family: var(--mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.62);
}
.panel-num {
  color: #0b0b0c; background: var(--p-accent); border-radius: 6px; padding: 2px 7px; font-weight: 700; letter-spacing: 0.04em;
}
.panel-plat::before { content: "/ "; opacity: 0.5; }
.panel h3 {
  font-size: clamp(2.4rem, 5vw, 4.2rem); font-weight: 800; letter-spacing: -0.038em; line-height: 1;
  margin-top: 22px; text-wrap: balance;
}
.panel--tall h3 { font-size: clamp(2.1rem, 3.7vw, 3.1rem); }
.panel h3 em, .panel h3.serif {
  font-style: normal; background: var(--p-head); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.panel h3.serif { font-family: var(--serif); font-weight: 700; letter-spacing: -0.02em; line-height: 1.04; padding-bottom: 0.04em; }
.panel p { color: rgba(255, 255, 255, 0.72); font-size: 1.07rem; line-height: 1.6; margin-top: 18px; max-width: 34em; }
.panel-points { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin-top: 22px; }
.panel-points li {
  font-family: var(--mono); font-size: 0.74rem; color: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; padding: 5px 11px;
}
.panel-points li::before { content: "+ "; color: var(--p-accent); }
.panel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 28px; }
.panel--tall .panel-actions { margin-top: 0; }
.panel-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px;
  background: #fff; color: #0b0b0c; font-family: var(--mono); font-size: 0.86rem; font-weight: 500;
  transition: transform 0.2s, box-shadow 0.2s;
}
.panel-btn span { transition: transform 0.2s; }
.panel-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 30px -8px var(--p-glow); }
.panel-btn:hover span { transform: translateX(4px); }
.panel-link { font-family: var(--mono); font-size: 0.82rem; color: rgba(255, 255, 255, 0.7); }
.panel-link:hover { color: #fff; }
.panel :focus-visible { outline-color: #fff; }

/* The live preview's frame, with corner ticks and a readout along the bottom */
.panel-demo {
  position: relative; display: grid; place-items: center; min-height: 300px;
  padding: 28px 22px 52px; border-radius: 22px;
  background: rgba(0, 0, 0, 0.26); border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.panel-demo::before, .panel-demo::after {
  content: ""; position: absolute; width: 14px; height: 14px; border: 1.5px solid rgba(255, 255, 255, 0.35); pointer-events: none;
}
.panel-demo::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; border-top-left-radius: 4px; }
.panel-demo::after { top: 10px; right: 10px; border-left: 0; border-bottom: 0; border-top-right-radius: 4px; }
.readout {
  position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5);
}
.readout b { font-weight: 500; color: rgba(255, 255, 255, 0.92); font-variant-numeric: tabular-nums; }
.readout span:last-child { margin-left: auto; color: var(--p-accent); }
.readout span:last-child::before { content: "● "; animation: blinkdot 1.6s steps(2) infinite; }
@keyframes blinkdot { 50% { opacity: 0.2; } }

/* ─── 01 EyeSpy ────────────────────────────────────────── */
.panel--eyespy {
  --p-bg: radial-gradient(120% 90% at 80% 0%, #3a2475 0%, #1a0f35 45%, #0e0820 100%);
  --p-accent: #b39cff; --p-glow: rgba(148, 102, 245, 0.55); --p-glow-2: rgba(77, 173, 242, 0.35);
  --p-head: linear-gradient(100deg, #cdb8ff, #4dadf2);
}
.demo-eyes svg { width: 100%; max-width: 440px; overflow: visible; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.45)); }

/* ─── 02 Quotastic, 03 Factastic ───────────────────────── */
.panel--quotastic {
  --p-bg: linear-gradient(165deg, #2a1650 0%, #140b2c 55%, #0a0817 100%);
  --p-accent: #ffb8db; --p-glow: rgba(219, 69, 179, 0.5); --p-glow-2: rgba(120, 41, 148, 0.5);
  --p-head: linear-gradient(180deg, #fff2db 0%, #ffb8db 55%, #cc9eff 100%);
  --wall: linear-gradient(160deg, #3a2170, #25154a 50%, #140c2a);
}
.panel--factastic {
  --p-bg: linear-gradient(165deg, #0d2d57 0%, #081a36 55%, #050d1c 100%);
  --p-accent: #ffd185; --p-glow: rgba(56, 189, 240, 0.45); --p-glow-2: rgba(26, 82, 168, 0.5);
  --p-head: linear-gradient(180deg, #fff5db 0%, #ffd185 55%, #9ee6ff 100%);
  --wall: linear-gradient(160deg, #134a82, #0d2d57 50%, #07162d);
}
.demo-card { padding-inline: 16px; }
.mini-desktop {
  position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden;
  background: var(--wall); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
.mini-bar {
  position: absolute; inset: 0 0 auto; height: 20px; display: flex; align-items: center; gap: 5px; padding-inline: 10px;
  background: rgba(0, 0, 0, 0.3); font-family: var(--mono); font-size: 9.5px; color: rgba(255, 255, 255, 0.8);
}
.mini-bar i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); }
.mini-bar span { margin-left: auto; }
.mini-window {
  position: absolute; left: 7%; top: 30%; bottom: -8%; width: 55%; padding: 22px 14px 0; border-radius: 10px;
  background: #242226; border: 1px solid rgba(255, 255, 255, 0.07);
}
.mini-window b { display: block; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); margin-bottom: 9px; }
.mini-window b:nth-child(2) { width: 80%; } .mini-window b:nth-child(4) { width: 60%; } .mini-window b:nth-child(5) { width: 86%; }
.mini-card {
  position: absolute; top: 28px; right: 8px; width: min(64%, 300px); padding: 13px 26px 16px 14px; border-radius: 12px;
  color: #fff; background: #333 center / cover; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45), inset 0 0 0 0.5px rgba(255, 255, 255, 0.25);
  transform: translateX(calc(100% + 16px)); opacity: 0;
  transition: transform 0.6s cubic-bezier(0.2, 0.9, 0.25, 1), opacity 0.5s;
}
.mini-card.is-shown { transform: none; opacity: 1; }
.mini-card.is-leaving { transform: none; opacity: 0; }
.mini-card p { font-family: var(--serif); font-size: clamp(0.82rem, 1.5vw, 0.98rem); line-height: 1.3; margin: 0 0 8px; color: #fff; }
.mini-card span { display: block; font-size: 8.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-timer { position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2px; }
.mini-timer i { display: block; height: 100%; background: rgba(255, 255, 255, 0.55); border-radius: 1px; transform-origin: left; }

/* ─── 04 TapWriter ─────────────────────────────────────── */
.panel--tapwriter {
  --p-bg: radial-gradient(90% 90% at 0% 100%, rgba(69, 217, 245, 0.18), transparent 60%), radial-gradient(90% 90% at 100% 0%, rgba(140, 94, 255, 0.3), transparent 60%), #090912;
  --p-accent: #45d9f5; --p-glow: rgba(140, 94, 255, 0.45); --p-glow-2: rgba(69, 217, 245, 0.3);
  --p-head: linear-gradient(120deg, #45d9f5, #8c5eff);
}
.demo-keys { gap: 16px; align-content: center; }
.typed {
  width: 100%; min-height: 1.6em; font-family: var(--mono); font-size: clamp(1rem, 2vw, 1.25rem); color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: clip; direction: ltr;
}
.caret { display: inline-block; width: 2px; height: 1.1em; vertical-align: -0.18em; margin-left: 2px; background: var(--p-accent); animation: blinkdot 1s steps(2) infinite; }
.wave { width: 100%; height: 34px; display: flex; align-items: center; gap: 3px; }
.wave i { flex: 1; height: 8%; min-height: 2px; border-radius: 2px; background: linear-gradient(180deg, #45d9f5, #8c5eff); transition: height 0.12s ease-out; }
.kb { width: 100%; display: grid; gap: 6px; }
.kb-row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.kb-row:nth-child(2) { padding-inline: 4%; } .kb-row:nth-child(3) { padding-inline: 10%; } .kb-row:nth-child(4) { padding-inline: 24%; }
.k {
  display: grid; place-items: center; height: clamp(26px, 3.4vw, 36px); border-radius: 7px;
  font-family: var(--mono); font-size: clamp(0.6rem, 1.1vw, 0.74rem); color: rgba(255, 255, 255, 0.75);
  background: linear-gradient(180deg, #232334, #1a1a28); border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); transition: transform 0.08s, background 0.08s, box-shadow 0.08s, color 0.08s;
}
.k.is-down {
  transform: translateY(2px); color: #fff; box-shadow: 0 0 0 rgba(0, 0, 0, 0.5), 0 0 18px rgba(69, 217, 245, 0.45);
  background: linear-gradient(180deg, #4b3a8f, #2c6b9a);
}

/* ─── 05 EyeEase20 ─────────────────────────────────────── */
.panel--eyeease {
  --p-bg: linear-gradient(160deg, #1b2a5e 0%, #142049 45%, #26174d 100%);
  --p-accent: #b8c8ff; --p-glow: rgba(124, 92, 255, 0.5); --p-glow-2: rgba(143, 208, 255, 0.35);
}
.demo-ring svg { width: min(250px, 80%); overflow: visible; }
.ring-track { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 10; }
.ring-bar {
  fill: none; stroke: #9fb6ff; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 1000; stroke-dashoffset: 0;
  transform: rotate(-90deg); transform-origin: 100px 100px; filter: drop-shadow(0 0 8px rgba(124, 92, 255, 0.7));
  transition: stroke 0.4s;
}
.demo-ring.is-break .ring-bar { stroke: #7ef0c4; filter: drop-shadow(0 0 10px rgba(126, 240, 196, 0.7)); }
.ring-time { fill: #fff; font-family: var(--mono); font-size: 36px; font-weight: 500; text-anchor: middle; dominant-baseline: middle; font-variant-numeric: tabular-nums; }
.ring-label { fill: rgba(255, 255, 255, 0.6); font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; text-anchor: middle; }

/* ─── 06 Keyhand ───────────────────────────────────────── */
.panel--keyhand {
  --p-bg: radial-gradient(80% 80% at 100% 100%, rgba(255, 214, 10, 0.14), transparent 60%), linear-gradient(160deg, #18206a 0%, #0c1030 60%);
  --p-accent: #ffd60a; --p-glow: rgba(111, 134, 255, 0.5); --p-glow-2: rgba(255, 214, 10, 0.25);
}
.mini-app {
  width: 100%; border-radius: 14px; overflow: hidden; background: #1c1d2a; border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
.mini-app .mini-bar { position: static; background: #262738; }
.mini-ui { display: flex; flex-wrap: wrap; gap: 12px 10px; padding: 20px 16px 18px; }
.mini-ui > span {
  position: relative; font-size: 0.8rem; color: rgba(255, 255, 255, 0.85); border-radius: 8px; padding: 6px 11px;
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.08); transition: background 0.2s, box-shadow 0.2s;
}
.mini-ui .ui-field { flex: 1 1 100%; color: rgba(255, 255, 255, 0.4); }
.mini-ui .ui-row { flex: 1 1 100%; background: transparent; border-color: transparent; border-bottom-color: rgba(255, 255, 255, 0.06); border-radius: 0; }
.mini-ui .ui-send { margin-left: auto; background: #3653f5; border-color: #3653f5; color: #fff; }
.mini-ui > span::after {
  content: attr(data-hint); position: absolute; top: -9px; left: -6px; z-index: 1;
  font-family: var(--mono); font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: 0.04em; color: #1a1400;
  background: #ffd60a; border-radius: 5px; padding: 3px 5px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
  opacity: 0; transform: scale(0.6); transition: opacity 0.18s, transform 0.18s;
}
.demo-hints.hints-on .mini-ui > span::after { opacity: 1; transform: none; }
.demo-hints.hints-on .mini-ui > span.is-dim::after { opacity: 0.25; }
.mini-ui > span.is-match::after { background: #fff; }
.mini-ui > span.is-clicked { background: rgba(111, 134, 255, 0.35); box-shadow: 0 0 0 2px #6f86ff, 0 0 24px rgba(111, 134, 255, 0.6); }

/* Still, for people who prefer less motion: the previews show one resting frame */
/* ─── 07 Chodesh ───────────────────────────────────────── */
.panel--chodesh {
  --p-bg: linear-gradient(165deg, #17264f 0%, #0c1533 55%, #050a1c 100%);
  --p-accent: #c9b8ff; --p-glow: rgba(140, 92, 245, 0.5); --p-glow-2: rgba(92, 194, 245, 0.35);
  --p-head: linear-gradient(160deg, #fffaed 0%, #d6ccff 55%, #99dbff 100%);
}
.demo-month { padding-inline: 16px; }
.mini-month {
  width: 100%; max-width: 420px; border-radius: 14px; overflow: hidden;
  background: rgba(30, 30, 36, 0.92); border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.45); transition: opacity 0.22s;
}
.demo-month.is-switching .mini-month { opacity: 0.35; }
.mini-month-bar {
  display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
  background: linear-gradient(90deg, #2b4a85, #7585cc); font-size: 0.72rem; font-weight: 600; color: #fff;
}
.mini-month-bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); }
.mini-month-date { margin-inline-start: auto; padding: 1px 7px; border-radius: 5px; background: rgba(255, 255, 255, 0.22); white-space: nowrap; }
.mini-month-body { padding: 12px 14px 14px; }
.mini-month-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mini-month-head b { display: block; font-size: 1rem; color: #fff; }
.mini-month-head span { font-size: 0.72rem; color: rgba(255, 255, 255, 0.55); }
.mini-month-badge {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px;
  background: linear-gradient(90deg, #5cc2f5, #8c5cf5); color: #fff; font-weight: 800; font-size: 0.95rem;
}
.mini-month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; }
.mini-month-grid .dow { font-size: 0.62rem; font-weight: 700; color: rgba(255, 255, 255, 0.4); padding-bottom: 3px; }
.mini-month-grid .day { position: relative; display: grid; padding: 3px 0; border-radius: 8px; z-index: 0; }
.mini-month-grid .day b { font-size: 0.78rem; font-weight: 600; color: rgba(255, 255, 255, 0.9); line-height: 1.2; }
.mini-month-grid .day i { font-style: normal; font-size: 0.55rem; color: rgba(255, 255, 255, 0.42); }
.mini-month-grid .is-shabbat b { color: #c9b8ff; }
.mini-month-grid .is-today { background: linear-gradient(90deg, #5cc2f5, #8c5cf5); box-shadow: 0 4px 14px rgba(140, 92, 245, 0.45); }
.mini-month-grid .is-today b, .mini-month-grid .is-today i { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .ticker-track, .panel::after, .readout span:last-child::before, .caret, .nm-led { animation: none; }
  .mini-card, .k, .wave i { transition: none; }
}

/* ─── Also on the web ──────────────────────────────────── */
.web-head { margin-top: 104px; margin-bottom: 36px; }
.web-head h2 { font-size: clamp(2.1rem, 5vw, 3.8rem); font-weight: 800; letter-spacing: -0.038em; line-height: 1.02; margin-top: 14px; }
.web-head h2 span { color: var(--text-3); }
.web-head p { color: var(--text-2); font-size: 1.1rem; margin-top: 16px; max-width: 560px; }
.site-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 22px; overflow: hidden; }
@media (max-width: 900px) { .site-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .site-grid { grid-template-columns: minmax(0, 1fr); } }
/* Eight sites plus the wide "more" tile fill the 4- and 2-column grids exactly. */
@media (min-width: 561px) {
  .site-tile--more { grid-column: span 2; }
  .site-tile--more .site-shot--more { aspect-ratio: 21 / 5; }
}
@media (min-width: 901px) {
  .site-tile--more { grid-column: 1 / -1; }
  .site-tile--more .site-shot--more { aspect-ratio: 21 / 2.5; }
}
.site-tile {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 24px; background: var(--surface);
  transition: background 0.2s;
}
.site-tile::before {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: linear-gradient(90deg, var(--accent), transparent);
  transform: scaleX(0); transform-origin: left; transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.site-tile:hover { background: var(--bg-soft); }
.site-tile:hover::before { transform: none; }
.site-kind { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); }
.site-kind[dir="rtl"] { text-transform: none; letter-spacing: 0; font-family: inherit; font-size: 0.8rem; align-self: flex-start; }
.site-domain { font-family: var(--mono); font-size: clamp(1.1rem, 1.8vw, 1.35rem); font-weight: 500; letter-spacing: -0.02em; color: var(--text); }
.site-domain span { display: inline-block; margin-left: 6px; color: var(--text-3); font-size: 0.8em; transition: transform 0.2s, color 0.2s; }
.site-tile:hover .site-domain span { transform: translate(3px, -3px); color: var(--accent); }
.site-desc { color: var(--text-2); font-size: 0.95rem; line-height: 1.5; }
.site-tile--more .site-domain { color: var(--text-3); }
.site-shot {
  display: block; width: 100%; height: auto; aspect-ratio: 40 / 21; object-fit: cover; margin-bottom: 8px;
  border-radius: 12px; box-shadow: 0 0 0 1px var(--border), 0 10px 24px -10px rgba(0, 0, 0, 0.35);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.site-tile:hover .site-shot { transform: translateY(-2px) scale(1.015); }
.site-shot--more {
  display: grid; place-items: center; font-family: var(--mono); font-size: 2rem; color: var(--text-3);
  box-shadow: none; border: 1px dashed var(--border-strong);
}

/* ─── 08 Windowsill ────────────────────────────────────── */
.panel--windowsill {
  --p-bg: linear-gradient(165deg, #2c5aa6 0%, #18336d 55%, #0b1938 100%);
  --p-accent: #ffd36b; --p-glow: rgba(255, 196, 92, 0.42); --p-glow-2: rgba(120, 190, 255, 0.4);
  --p-head: linear-gradient(160deg, #fff6e0 0%, #ffd27a 50%, #9fd0ff 100%);
}
.demo-sky { padding-inline: 16px; }
.mini-sky {
  position: relative; width: 100%; max-width: 420px; height: 250px; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 20px 44px rgba(0, 0, 0, 0.45);
  background: linear-gradient(180deg, #4e91f0, #b9dcff); transition: background 0.6s;
}
.mini-sky.is-stormy { background: linear-gradient(180deg, #55657e, #9ba8bc); }
.mini-sky.is-night { background: linear-gradient(180deg, #161b3a, #3b3f79); }
.mini-sky-bar {
  position: absolute; inset: 0 0 auto; z-index: 1; display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
  background: rgba(255, 255, 255, 0.55); color: #1d1a17; font-size: 0.72rem; font-weight: 600; transition: background 0.6s, color 0.6s;
}
.mini-sky.is-night .mini-sky-bar { background: rgba(20, 24, 43, 0.75); color: #f2f4fa; }
.mini-sky-bar i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.3; }
.mini-sky-item { margin-inline-start: auto; margin-inline-end: 24%; display: inline-flex; align-items: center; gap: 4px; }
.mini-sky-item svg { display: block; width: 15px; height: 15px; }
.mini-sky canvas { position: absolute; left: 0; top: 26px; width: 100%; height: calc(100% - 26px); }

/* ─── 09 Amply ─────────────────────────────────────────── */
.panel--amply {
  --p-bg: linear-gradient(165deg, #123a4f 0%, #0a2430 55%, #06141d 100%);
  --p-accent: #3fe0a6; --p-glow: rgba(46, 230, 166, 0.38); --p-glow-2: rgba(200, 245, 106, 0.28);
  --p-head: linear-gradient(160deg, #eafff6 0%, #8ff0c4 50%, #c8f56a 100%);
}
.demo-amply { padding-inline: 16px; }
.mini-amply {
  position: relative; width: 100%; max-width: 420px; height: 230px; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 20px 44px rgba(0, 0, 0, 0.45);
  background: radial-gradient(70% 90% at 15% 100%, rgba(46, 230, 166, 0.35), transparent 70%), linear-gradient(160deg, #bfe9e0, #d8eef5 55%, #e9f4d8);
}
.mini-amply-bar {
  position: absolute; inset: 0 0 auto; display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
  background: rgba(255, 255, 255, 0.55); color: #1d1a17; font-size: 0.72rem; font-weight: 600;
}
.mini-amply-bar i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.3; }
.amply-item { margin-inline-start: auto; margin-inline-end: 18%; display: inline-flex; align-items: center; gap: 1px; --c: #28a745; }
.amply-batt {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 1px;
  min-width: 27px; height: 14px; padding: 0 3px; border-radius: 3.5px; overflow: hidden;
  background: color-mix(in srgb, var(--c) 55%, transparent); color: #fff; font: 800 9.5px/1 system-ui, -apple-system, sans-serif;
  font-variant-numeric: tabular-nums;
}
.amply-fill { position: absolute; inset: 0 auto 0 0; width: 76%; background: var(--c); transition: background 0.4s; }
.amply-batt b, .amply-bolt { position: relative; }
.amply-bolt { width: 6px; height: 8px; display: none; }
.amply-item.is-charging .amply-bolt { display: block; }
.amply-item.is-dark-text .amply-batt { color: rgba(0, 0, 0, 0.85); }
.amply-nub { width: 2px; height: 5px; border-radius: 1px; background: color-mix(in srgb, var(--c) 55%, transparent); margin-inline-end: 4px; }
.amply-time { font-weight: 500; font-size: 0.7rem; font-variant-numeric: tabular-nums; }
.amply-mark {
  display: none; width: 11px; height: 11px; margin-inline-start: 3px; border: 1.2px solid #d93c24; border-radius: 50%;
  color: #d93c24; font: 900 8px/9px system-ui, sans-serif; text-align: center;
}
.amply-item.is-low .amply-mark { display: inline-block; }
.amply-card {
  position: absolute; top: 34px; right: 10px; width: min(250px, calc(100% - 20px)); display: flex; gap: 10px; align-items: center;
  padding: 10px 12px; border-radius: 12px; background: rgba(40, 40, 42, 0.92); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  opacity: 0; transform: translateX(24px); transition: opacity 0.35s ease-out, transform 0.35s ease-out;
}
.mini-amply.is-alert .amply-card { opacity: 1; transform: none; }
.amply-ring { flex: none; width: 38px; height: 38px; }
.amply-ring circle { fill: none; stroke-width: 3.5; }
.amply-ring .track { stroke: rgba(255, 255, 255, 0.15); }
.amply-ring .arc { stroke: #ff7c66; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 20px 20px; stroke-dasharray: 100.5; }
.amply-ring text { fill: #fff; font: 700 12px system-ui, sans-serif; text-anchor: middle; }
.amply-card-text { display: grid; gap: 2px; font-size: 0.72rem; line-height: 1.3; }
.amply-card-text strong { font-size: 0.8rem; }
.amply-card-text span { color: rgba(255, 255, 255, 0.7); }

/* ─── 10 MagicGlance ──────────────────────────────────── */
.panel--magicglance {
  --p-bg: linear-gradient(165deg, #0e3a5c 0%, #0a2238 55%, #071422 100%);
  --p-accent: #6cc4ff; --p-glow: rgba(108, 196, 255, 0.36); --p-glow-2: rgba(79, 232, 192, 0.26);
  --p-head: linear-gradient(160deg, #eef7ff 0%, #9fd8ff 45%, #4fe8c0 75%, #ffb347 100%);
}
.demo-magicglance { padding-inline: 16px; }
.mini-mg {
  position: relative; width: 100%; max-width: 420px; height: 230px; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 20px 44px rgba(0, 0, 0, 0.45);
  background: radial-gradient(60% 80% at 12% 100%, rgba(79, 232, 192, 0.35), transparent 70%),
              radial-gradient(50% 70% at 95% 90%, rgba(255, 179, 71, 0.28), transparent 70%),
              linear-gradient(160deg, #d3e9f7, #ddf3ec 55%, #f6ebd9);
}
.mini-mg-bar {
  position: absolute; inset: 0 0 auto; display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
  background: rgba(255, 255, 255, 0.55); color: #1d1a17; font-size: 0.72rem; font-weight: 600;
}
.mini-mg-bar > i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.3; }
.mg-items { margin-inline-start: auto; margin-inline-end: 12%; display: inline-flex; align-items: center; gap: 9px; padding: 2px 6px; border-radius: 5px; background: rgba(0, 0, 0, 0.08); }
.mg-item { display: inline-flex; align-items: center; gap: 3px; font: 600 11px/1 system-ui, -apple-system, sans-serif; font-variant-numeric: tabular-nums; color: #1d1a17; }
.mg-item > svg:first-child { height: 11px; width: auto; }
.mg-bolt { width: 6px; height: 9px; display: none; }
.mg-item.is-charging .mg-bolt { display: block; }
.mg-mark {
  display: none; width: 11px; height: 11px; border: 1.2px solid #d93c24; border-radius: 50%;
  color: #d93c24; font: normal 900 8px/9px system-ui, sans-serif; text-align: center;
}
.mg-item.is-low { color: #d93c24; }
.mg-item.is-low .mg-mark { display: inline-block; }
.mg-menu {
  position: absolute; top: 32px; right: 9%; width: 196px; display: grid; gap: 6px; padding: 9px 10px;
  border-radius: 11px; background: rgba(246, 247, 248, 0.94); border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22); transition: opacity 0.3s, transform 0.3s;
}
.mini-mg.is-alert .mg-menu { opacity: 0; transform: translateY(-6px); }
.mg-row { display: flex; align-items: center; gap: 9px; }
.mg-row .mg-ring { width: 32px; height: 32px; }
.mg-row-text { display: grid; gap: 1px; font-size: 0.68rem; line-height: 1.25; color: #1d1a17; }
.mg-row-text strong { font-size: 0.72rem; }
.mg-row-text span { color: rgba(0, 0, 0, 0.55); }
.mg-row.is-low .mg-row-text span { color: #d93c24; }
.mg-ring { flex: none; }
.mg-ring circle { fill: none; stroke-width: 3.5; }
.mg-row .mg-ring .track { stroke: rgba(0, 0, 0, 0.1); }
.mg-ring .arc { stroke: var(--c, #2fcf9f); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 20px 20px; stroke-dasharray: 100.5; transition: stroke 0.3s; }
.mg-row .mg-ring text { fill: #1d1a17; font: 700 11px system-ui, sans-serif; text-anchor: middle; }
.mg-card {
  position: absolute; top: 34px; right: 10px; width: min(250px, calc(100% - 20px)); display: flex; gap: 10px; align-items: center;
  padding: 10px 12px; border-radius: 12px; background: rgba(40, 40, 42, 0.92); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  opacity: 0; transform: translateX(24px); transition: opacity 0.35s ease-out, transform 0.35s ease-out;
}
.mini-mg.is-alert .mg-card { opacity: 1; transform: none; }
.mg-card .mg-ring { width: 38px; height: 38px; --c: #ff6a55; }
.mg-card .mg-ring .track { stroke: rgba(255, 255, 255, 0.15); }
.mg-card .mg-ring text { fill: #fff; font: 700 12px system-ui, sans-serif; text-anchor: middle; }
.mg-card-text { display: grid; gap: 2px; font-size: 0.72rem; line-height: 1.3; }
.mg-card-text strong { font-size: 0.8rem; }
.mg-card-text span { color: rgba(255, 255, 255, 0.7); }

/* ─── 11 Captr ─────────────────────────────────────────── */
.panel--captr {
  --p-bg: linear-gradient(165deg, #263043 0%, #141a24 55%, #0b0f15 100%);
  --p-accent: #f5a524; --p-glow: rgba(245, 165, 36, 0.34); --p-glow-2: rgba(120, 140, 255, 0.2);
  --p-head: linear-gradient(160deg, #ffffff 0%, #ffe3ad 45%, #f5a524 85%);
}
.demo-captr { padding-inline: 16px; }
.mini-captr {
  position: relative; width: 100%; max-width: 420px; height: 230px; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 20px 44px rgba(0, 0, 0, 0.45);
  background: radial-gradient(60% 80% at 90% 100%, rgba(245, 165, 36, 0.28), transparent 70%),
              linear-gradient(160deg, #e7ecf5, #dfe5f0 55%, #efe4d4);
  font: 600 11px/1.2 system-ui, -apple-system, sans-serif; color: #1d2230;
}
.cp-bar {
  position: absolute; inset: 0 0 auto; display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px;
  background: rgba(255, 255, 255, 0.6);
}
.cp-bar > i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.3; }
.cp-glyph { width: 13px; height: 13px; margin-inline-start: auto; margin-inline-end: 12%; }
.cp-lib {
  position: absolute; left: 4%; top: 34px; bottom: 12px; width: 32%; padding: 8px 8px; display: grid; align-content: start; gap: 4px;
  border-radius: 9px; background: rgba(246, 247, 249, 0.96); border: 1px solid rgba(0, 0, 0, 0.07); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}
.cp-lib-title { font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(0, 0, 0, 0.45); margin: 0 0 2px 2px; }
.cp-row { display: flex; align-items: center; gap: 6px; padding: 4px 5px; border-radius: 6px; transition: background 0.3s; }
.cp-row b { margin-inline-start: auto; font-weight: 600; color: rgba(0, 0, 0, 0.5); font-variant-numeric: tabular-nums; }
.cp-row.is-hit { background: #f5a524; }
.cp-row.is-hit b { color: #1b1300; }
.cp-dot { width: 11px; height: 11px; border-radius: 3px; background: var(--c); }
.cp-win {
  position: absolute; right: 4%; top: 40px; width: 56%; height: 150px; border-radius: 9px; overflow: hidden;
  background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}
.cp-win-bar { display: flex; align-items: center; gap: 4px; height: 18px; padding: 0 7px; background: #f1f2f5; font-size: 8.5px; color: rgba(0, 0, 0, 0.55); }
.cp-win-bar i { width: 6px; height: 6px; border-radius: 50%; background: #ff5f57; }
.cp-win-bar i:nth-child(2) { background: #febc2e; } .cp-win-bar i:nth-child(3) { background: #28c840; }
.cp-win-bar span { margin: 0 auto; }
.cp-frames { display: flex; gap: 8px; padding: 14px 12px; }
.cp-frames i { flex: 1; height: 98px; border-radius: 8px; background: #e6dcfb; }
.cp-frames i:nth-child(2) { background: #8b5cf6; }
/* The selection: a light marquee with the amber crop corners of the app icon */
.cp-sel {
  --a: #f5a524; position: absolute; display: none; left: 0; top: 0; width: 0; height: 0;
  background:
    linear-gradient(var(--a), var(--a)) left top / 12px 3px no-repeat, linear-gradient(var(--a), var(--a)) left top / 3px 12px no-repeat,
    linear-gradient(var(--a), var(--a)) right top / 12px 3px no-repeat, linear-gradient(var(--a), var(--a)) right top / 3px 12px no-repeat,
    linear-gradient(var(--a), var(--a)) left bottom / 12px 3px no-repeat, linear-gradient(var(--a), var(--a)) left bottom / 3px 12px no-repeat,
    linear-gradient(var(--a), var(--a)) right bottom / 12px 3px no-repeat, linear-gradient(var(--a), var(--a)) right bottom / 3px 12px no-repeat,
    rgba(255, 255, 255, 0.22);
  outline: 1px dashed rgba(20, 26, 36, 0.55); outline-offset: -1px;
}
.mini-captr.is-selecting .cp-sel { display: block; }
.cp-dim {
  position: absolute; right: 0; bottom: -17px; padding: 1px 5px; border-radius: 4px; white-space: nowrap;
  background: rgba(20, 26, 36, 0.82); color: #fff; font: 500 9px/1.3 ui-monospace, "SF Mono", Menlo, monospace;
}
.cp-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; transition: opacity 0.12s; }
.mini-captr.is-flash .cp-flash { opacity: 0.75; transition: none; }
.cp-shot {
  position: absolute; display: none; border-radius: 5px; overflow: hidden;
  background: linear-gradient(90deg, #e6dcfb 0 30%, #fff 30% 35%, #8b5cf6 35% 65%, #fff 65% 70%, #e6dcfb 70%);
  border: 2px solid #fff; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
  transition: left 0.55s cubic-bezier(0.3, 0.7, 0.2, 1), top 0.55s cubic-bezier(0.3, 0.7, 0.2, 1),
              width 0.55s cubic-bezier(0.3, 0.7, 0.2, 1), height 0.55s cubic-bezier(0.3, 0.7, 0.2, 1), opacity 0.4s;
}
.cp-shot span {
  position: absolute; left: 4px; bottom: 4px; padding: 1px 5px; border-radius: 6px;
  background: rgba(0, 0, 0, 0.62); color: #fff; font-size: 8px; transition: opacity 0.2s;
}
.mini-captr.is-shot .cp-shot { display: block; }

/* ─── 12 Retro Adventures ──────────────────────────────── */
.panel--retro {
  --p-bg: linear-gradient(170deg, #0a2a5c 0%, #001233 50%, #000814 100%);
  --p-accent: #ff9a1f; --p-glow: rgba(56, 120, 230, 0.5); --p-glow-2: rgba(255, 140, 0, 0.22);
  --p-head: linear-gradient(180deg, #ffd23f 0%, #ff9a1f 55%, #ff7a00 100%);
}
/* The game's own window: Amiga blue, a striped title bar, pixel edges */
.mini-retro {
  width: 100%; max-width: 420px; padding: 6px; background: #1d4fb8;
  border: 2px solid #c9d8ff; box-shadow: 0 0 0 2px #0a1f4d, 0 22px 44px rgba(0, 0, 0, 0.5);
  font-family: var(--mono); cursor: pointer;
}
.ra-bar {
  display: flex; align-items: center; gap: 6px; height: 16px; margin-bottom: 6px;
  background: repeating-linear-gradient(#fff 0 2px, #1d4fb8 2px 4px);
}
.ra-bar i { width: 12px; height: 12px; background: #1d4fb8; border: 2px solid #fff; }
.ra-bar span { padding: 0 6px; background: #1d4fb8; color: #fff; font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.ra-bar i:last-child { margin-left: auto; }
.ra-body { padding: 8px; background: #0b2a66; border: 2px solid #8fb0ff; box-shadow: inset 0 0 0 2px #061a44; }
.ra-scene { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000814; }
.ra-scene img {
  position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated;
  opacity: 0; transition: opacity 0.2s steps(3, end);
}
.ra-scene img.is-on { opacity: 1; }
.ra-title {
  display: block; margin-top: 10px; color: #ff9a1f; font-size: clamp(1.05rem, 2.4vw, 1.35rem); font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; text-shadow: 2px 2px 0 #4a2300;
}
.mini-retro .ra-blurb { margin-top: 4px; min-height: 2.9em; color: #e8eeff; font-size: 0.78rem; line-height: 1.45; }

/* ─── 13 Hollowport ───────────────────────────────────── */
.panel--neuro {
  --p-bg: linear-gradient(165deg, #1b3138 0%, #0f1a1e 55%, #090d0f 100%);
  --p-accent: #7fe3d4; --p-glow: rgba(70, 200, 190, 0.32); --p-glow-2: rgba(230, 170, 70, 0.22);
  --p-head: linear-gradient(100deg, #b9fff4 0%, #7fe3d4 45%, #e8b45a 100%);
}
.demo-neuro { padding-inline: 16px; }
.mini-neuro {
  width: 100%; max-width: 440px; background: #0b1214; border: 1px solid #2b4a52; border-radius: 4px; overflow: hidden;
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.5); font-family: var(--mono); color: #d7e6e3;
}
.nm-bar { display: flex; align-items: center; gap: 10px; padding: 6px 10px; font-size: 9px; letter-spacing: 0.1em; }
.nm-bar b { font-weight: 800; letter-spacing: 0.16em; color: #e9f5f2; margin-right: auto; }
.nm-credits { color: #7fe3d4; font-weight: 700; }
.nm-room {
  display: flex; justify-content: space-between; padding: 5px 10px; background: #23414a; border-block: 1px solid #36606b;
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em;
}
.nm-room span:last-child { opacity: 0.6; }
.nm-scene { position: relative; aspect-ratio: 2 / 1; overflow: hidden; }
.nm-scene img { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
/* The message light blinking on the deck */
.nm-led { position: absolute; left: 77.5%; top: 50%; width: 1.3%; aspect-ratio: 1; background: #7fffb0; box-shadow: 0 0 6px #7fffb0; animation: blinkdot 1.2s steps(2) infinite; }
.nm-hot { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 4px; }
.nm-hot i { font-style: normal; color: #fff; font-size: 14px; line-height: 1; text-shadow: 0 0 4px #000; transition: transform 0.2s; }
.nm-hot b {
  padding: 2px 6px; background: rgba(11, 18, 20, 0.85); border: 1px solid #5d8b94; color: #e9f5f2;
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; transition: background 0.2s, color 0.2s;
}
.nm-hot.is-on i { transform: scale(1.4); color: #7fe3d4; }
.nm-hot.is-on b { background: #7fe3d4; color: #0b1214; border-color: #7fe3d4; }
.nm-cursor {
  position: absolute; left: 50%; top: 20%; width: 10px; height: 14px; pointer-events: none;
  background: #fff; clip-path: polygon(0 0, 100% 72%, 55% 68%, 75% 100%, 60% 100%, 42% 72%, 0 100%);
  filter: drop-shadow(1px 1px 0 #000); transition: left 0.9s cubic-bezier(0.4, 0, 0.2, 1), top 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
/* The deck's inbox, opening over the scene */
.nm-deck {
  position: absolute; inset: 12% 8%; padding: 10px 12px; display: grid; align-content: start; gap: 8px;
  background: rgba(8, 20, 22, 0.94); border: 1px solid #7fe3d4; box-shadow: 0 0 24px rgba(127, 227, 212, 0.25);
  font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(215, 230, 227, 0.6);
  opacity: 0; transform: scaleY(0.04); transition: opacity 0.15s, transform 0.3s steps(4, end);
}
.mini-neuro.is-deck .nm-deck { opacity: 1; transform: none; }
.nm-deck-head { color: #7fe3d4; font-weight: 700; }
.nm-msg { padding: 6px 8px; border-left: 2px solid #e8b45a; background: rgba(255, 255, 255, 0.04); }
.nm-msg b { display: block; margin-top: 3px; color: #e9f5f2; font-size: 10.5px; text-transform: none; letter-spacing: 0; }
.nm-text { display: flex; gap: 10px; min-height: 64px; padding: 9px 10px; border-top: 1px solid #2b4a52; font-size: 10.5px; line-height: 1.5; }
.nm-text > span { flex: none; padding-top: 1px; font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(215, 230, 227, 0.6); }
.mini-neuro .nm-text p { margin: 0; color: #e9f5f2; font-size: inherit; line-height: inherit; }

/* 14 Dead Air: the studio, receiver and case journal */
.panel--deadair {
  --p-bg: linear-gradient(155deg, #29313f 0%, #171d29 55%, #10141e 100%);
  --p-accent: #edac62; --p-glow: rgba(237, 172, 98, 0.28); --p-glow-2: rgba(128, 179, 169, 0.2);
  --p-head: linear-gradient(100deg, #f8dfb9, #edac62);
}
.mini-deadair { width: 100%; max-width: 440px; overflow: hidden; border: 1px solid #5d5b50; background: #151a23; color: #e2dac7; font-family: var(--mono); box-shadow: 0 22px 44px #0007; }
.da-bar { display: flex; justify-content: space-between; gap: 8px; padding: 10px 12px; font-size: 10px; letter-spacing: 0.1em; color: #edac62; }
.da-bar span { color: #b5b9b5; }
.mini-deadair > img { display: block; width: 100%; height: auto; aspect-ratio: 1.7; object-fit: cover; image-rendering: pixelated; border-block: 1px solid #5d5b50; }
.da-receiver { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; color: #80b3a9; font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; border-bottom: 1px solid #39404b; }
.da-wave { display: flex; align-items: center; gap: 3px; height: 22px; }
.da-wave i { width: 3px; height: 8px; background: #edac62; }
.da-wave i:nth-child(3n) { height: 20px; }
.da-wave i:nth-child(3n + 1) { height: 14px; }
.da-transcript { padding: 12px; min-height: 106px; }
.da-transcript b { color: #edac62; font-size: 11px; }
.mini-deadair .da-transcript p { margin: 7px 0 0; color: #e2dac7; font-size: 11px; line-height: 1.6; }

/* Hebrew in the mono chips: the mono face has no Hebrew, and its spacing pulled the letters apart */
.readout [lang="he"], .panel-points li:lang(he) { font-family: system-ui, -apple-system, "Arial Hebrew", sans-serif; letter-spacing: 0; }
.mini-month[dir="rtl"] { font-family: system-ui, -apple-system, "Arial Hebrew", sans-serif; }