/* ============================================================
   INFINITE PARALLEL — the ten skins
   Each block re-declares the token contract from base.css and
   adds that site's signature flourishes. Colors, fonts, radii,
   and effects are lifted verbatim from the source repos.
   ============================================================ */

/* ============================================================
   01 · FRYTECH — "Machined Brass"  (fryscustom.tech)
   Near-black void, bone text, aged brass, Fraunces/Archivo/mono,
   film grain, 3px radii, hairline-gap grids.
   ============================================================ */
[data-theme="frytech"] body::after {
  opacity: 0.035;
  z-index: 61;
  mix-blend-mode: overlay;
  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'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="frytech"] .hero-h .fancy {
  background: linear-gradient(100deg, #e2733a, #c24a1c 55%, #7e3214);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
  /* italic glyph ink overhangs the layout box; pad the paint area so
     background-clip:text has gradient behind the whole final glyph —
     cloned per line fragment so mid-em line breaks don't clip either */
  padding-right: 0.14em;
  margin-right: -0.14em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ============================================================
   02 · PAMAX — "Night Ops"  (pamaxtactical.com)
   #060409 gunmetal, neon red/green/gold, Barlow SemiCond 800,
   drifting tactical grid + CRT scanlines, reticle cursor,
   Bebas glitch marquee, department accent bars. Matrix rain fx.
   ============================================================ */
[data-theme="pamax"] {
  --bg: #060409;
  --bg-layer: radial-gradient(ellipse 90% 70% at 50% 42%, #0d0d0d 0%, #060409 65%);
  --surface: #100b16;
  --surface-2: #151020;
  --line: #241d2e;
  --line-2: #1a1522;
  --text: #f2f2f2;
  --text-dim: #9a94a8;
  --text-faint: #6a6478;
  --accent: #ff3040;
  --accent-2: #35e065;
  --accent-ink: #ffffff;
  --font-display: "Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --h-weight: 800;
  --h-transform: uppercase;
  --h-spacing: 0.02em;
  --h-line: 0.98;
  --eyebrow-color: #35e065;
  --eyebrow-spacing: 0.28em;
  --r-s: 5px; --r-m: 10px; --r-l: 12px;
  --card-bg: linear-gradient(180deg, #100b16, #0a0710);
  --card-border: 1px solid #241d2e;
  --card-shadow-hover: 0 0 22px rgba(255,48,64,.30), 0 18px 44px rgba(0,0,0,.5);
  --btn-shadow-h: 0 0 18px rgba(255,48,64,.45);
  --ghost-border: #3a2f4a;
  --nav-bg: rgba(6,4,9,.88);
  --nav-blur: blur(8px);
  --panel-bg: #0a0810;
}
[data-theme="pamax"],
[data-theme="pamax"] a,
[data-theme="pamax"] button {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg fill='none' stroke='%23f2f2f2' stroke-width='1.4'%3E%3Ccircle cx='14' cy='14' r='9' opacity='.9'/%3E%3Cpath d='M14 0v8M14 20v8M0 14h8M20 14h28'/%3E%3C/g%3E%3Ccircle cx='14' cy='14' r='2.2' fill='%23ff3040'/%3E%3C/svg%3E") 14 14, crosshair;
}
[data-theme="pamax"] body::before {
  opacity: 0.5;
  z-index: 1;
  inset: -50%;
  background-image: linear-gradient(rgba(53,224,101,.08) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,48,64,.06) 1px, transparent 1px);
  background-size: 48px 48px;
  animation: pmxdrift 44s linear infinite;
}
@keyframes pmxdrift { to { transform: translate(48px, 48px); } }
[data-theme="pamax"] body::after {
  opacity: 0.4;
  z-index: 61;
  background: repeating-linear-gradient(180deg, transparent 0 2px, rgba(0,0,0,.25) 2px 3px);
}
[data-theme="pamax"] h2, [data-theme="pamax"] .hero-h {
  background: linear-gradient(100deg, #35e065, #ff3040);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 26px rgba(53,224,101,.14));
}
[data-theme="pamax"] .fancy { color: transparent; }
[data-theme="pamax"] .card { border-top: none; position: relative; overflow: hidden; }
[data-theme="pamax"] .card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--dep, #ff3040);
}
[data-theme="pamax"] .card:nth-child(1) { --dep: #ff3040; }
[data-theme="pamax"] .card:nth-child(2) { --dep: #35e065; }
[data-theme="pamax"] .card:nth-child(3) { --dep: #3f8cff; }
[data-theme="pamax"] .card:nth-child(4) { --dep: #b44dff; }
[data-theme="pamax"] .card:nth-child(5) { --dep: #fcee0a; }
[data-theme="pamax"] .card:nth-child(6) { --dep: #00f0ff; }
[data-theme="pamax"] .card:nth-child(7) { --dep: #ffae3b; }
[data-theme="pamax"] .card:nth-child(8) { --dep: #ff2bd0; }
[data-theme="pamax"] .card:nth-child(9) { --dep: #35e065; }
[data-theme="pamax"] .card:nth-child(10) { --dep: #fcee0a; }
[data-theme="pamax"] .card:hover { border-color: var(--dep); box-shadow: 0 0 22px color-mix(in srgb, var(--dep) 35%, transparent), 0 18px 44px rgba(0,0,0,.5); }
[data-theme="pamax"] .card-num { color: var(--dep); }
/* Borderlands marquee — neon gold w/ cyan-magenta aberration + glitch */
[data-theme="pamax"] .ticker { background: linear-gradient(180deg, #0d0b04, var(--bg)); }
[data-theme="pamax"] .ticker-track {
  font-family: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  font-size: clamp(22px, 3.4vw, 38px);
  letter-spacing: 3px;
  color: #fcee0a;
  text-shadow: 2px 0 #00f0ff, -2px 0 #ff2bd0;
  animation: tickmove 42s linear infinite, pmxglitch 5s steps(1) infinite;
}
[data-theme="pamax"] .ticker-track .sep { color: #00f0ff; text-shadow: 0 0 12px #00f0ff; }
@keyframes pmxglitch {
  0%, 90%, 100% { text-shadow: 2px 0 #00f0ff, -2px 0 #ff2bd0; }
  92% { text-shadow: -4px 0 #00f0ff, 4px 0 #ff2bd0; }
  95% { text-shadow: 4px 0 #ff2bd0, -4px 0 #00f0ff; }
}
[data-theme="pamax"] .nav-links a:hover { color: #fff; text-shadow: 0 0 10px #35e065, 0 0 22px #35e065; }

/* ============================================================
   03 · MYRLS — "Blueprint Steel"  (Myrl's Country)
   LIGHT gunmetal, ink text, signal red, clipped corners,
   Barlow SemiCond 800 uppercase, frosted nav, red ticker.
   ============================================================ */
[data-theme="myrls"] {
  --bg: #e7e9ec;
  --bg-layer: radial-gradient(1200px 500px at 50% -10%, rgba(209,43,43,.06), transparent 60%),
              linear-gradient(180deg, #e9ebee 0%, #d6dade 38%, #bcc1c8 72%, #a6abb4 100%);
  --surface: #ffffff;
  --surface-2: #f2f3f5;
  --line: #cdd1d7;
  --line-2: #dcdfe3;
  --text: #16181b;
  --text-dim: #5d646d;
  --text-faint: #8a909a;
  --accent: #d12b2b;
  --accent-2: #b21f1f;
  --accent-ink: #ffffff;
  --font-display: "Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --h-weight: 800;
  --h-transform: uppercase;
  --h-spacing: -0.01em;
  --h-line: 0.98;
  --eyebrow-color: #d12b2b;
  --eyebrow-spacing: 0.22em;
  --r-s: 2px; --r-m: 14px; --r-l: 16px;
  --card-bg: #ffffff;
  --card-border: 1px solid #cdd1d7;
  --card-shadow: 0 8px 24px rgba(20,22,26,.08);
  --card-shadow-hover: 0 14px 34px rgba(20,22,26,.16);
  --btn-shadow-h: 0 10px 24px rgba(209,43,43,.35);
  --ghost-border: #b9bec6;
  --nav-bg: rgba(231,233,236,.82);
  --nav-blur: saturate(140%) blur(10px);
  --panel-bg: #ffffff;
}
[data-theme="myrls"] .fancy { color: #d12b2b; font-style: normal; }
[data-theme="myrls"] .btn,
[data-theme="myrls"] .card-tags li {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
  border-radius: 2px;
}
[data-theme="myrls"] .card {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
}
[data-theme="myrls"] .ticker {
  background: #16181b;
  color: #ece7de;
  border-top: 2px solid #d12b2b;
  border-bottom: 2px solid #d12b2b;
}
[data-theme="myrls"] .ticker::before { background: linear-gradient(90deg, #16181b, transparent); }
[data-theme="myrls"] .ticker::after { background: linear-gradient(270deg, #16181b, transparent); }
[data-theme="myrls"] .ticker-track { color: #ece7de; font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; }
[data-theme="myrls"] .ticker-track .sep { color: #d12b2b; }
[data-theme="myrls"] ::selection { background: #d12b2b; color: #fff; }

/* ============================================================
   04 · MNEMONIC — "TACTICAL-OS 96"  (mnemonictactical.computer)
   Win9x: silver chrome, teal desktop w/ venetian sunset,
   navy titlebars from data-win, bevel borders, zero radius.
   ============================================================ */
[data-theme="mnemonic"] {
  --bg: #0a8a8a;
  --bg-layer: none;
  --surface: #c0c0c0;
  --surface-2: #cccccc;
  --line: #9a9a9a;
  --line-2: #adadad;
  --text: #000000;
  --text-dim: #2a2a2a;
  --text-faint: #555555;
  --accent: #000080;
  --accent-2: #000080;
  --accent-ink: #ffffff;
  --font-display: Tahoma, "Segoe UI", system-ui, sans-serif;
  --font-body: Tahoma, "Segoe UI", system-ui, sans-serif;
  --font-mono: "Courier New", monospace;
  --h-weight: 700;
  --h-transform: none;
  --h-spacing: 0;
  --h-line: 1.1;
  --h-scale: 0.9;
  --body-size: 14px;
  --eyebrow-color: #000080;
  --eyebrow-spacing: 0.12em;
  --r-s: 0px; --r-m: 0px; --r-l: 0px;
  --btn-radius: 0px;
  --card-bg: #c0c0c0;
  --card-border: 2px solid;
  --card-shadow: 2px 2px 0 rgba(0,0,0,.25);
  --card-shadow-hover: 4px 4px 0 rgba(0,0,0,.35);
  --lift: 0px;
  --btn-shadow-h: none;
  --ghost-border: #808080;
  --nav-bg: #c0c0c0;
  --nav-blur: none;
  --nav-border: #808080;
  --panel-bg: #c0c0c0;
  --ease: steps(2, end);
}
/* venetian sunset stripes over the teal desktop */
[data-theme="mnemonic"] body::before {
  opacity: 1;
  z-index: 1;
  background:
    repeating-linear-gradient(180deg, transparent 0 7px, rgba(0,0,0,.85) 7px 22px),
    linear-gradient(180deg, rgba(31,138,153,.42) 0 28%, rgba(255,59,59,.42) 42% 60%, rgba(244,162,97,.42) 76%, rgba(255,209,102,.42) 100%);
}
[data-theme="mnemonic"] body::after {
  opacity: 0.22;
  z-index: 61;
  background: repeating-linear-gradient(180deg, transparent 0 2px, rgba(0,0,0,.22) 2px 3px);
}
[data-theme="mnemonic"] .card,
[data-theme="mnemonic"] .cap,
[data-theme="mnemonic"] .theme-panel {
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  border-radius: 0;
}
[data-theme="mnemonic"] .card { padding-top: 12px; position: relative; }
[data-theme="mnemonic"] .card::before,
[data-theme="mnemonic"] .cap::before {
  content: attr(data-win);
  display: block;
  margin: -12px -22px 14px;
  padding: 4px 8px;
  background: linear-gradient(90deg, #000080, #1084d0);
  color: #fff;
  font-family: Tahoma, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
[data-theme="mnemonic"] .cap { padding: 12px 24px 26px; }
[data-theme="mnemonic"] .cap::before { margin: 0 -24px 14px; }
[data-theme="mnemonic"] .card::after {
  content: "▁ ▢ ✕";
  position: absolute; top: 4px; right: 8px;
  color: #fff; font-size: 9px; letter-spacing: 2px;
}
[data-theme="mnemonic"] .btn {
  background: #c0c0c0;
  color: #000;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  font-family: Tahoma, sans-serif;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  padding: 7px 18px;
}
[data-theme="mnemonic"] .btn:hover { transform: none; box-shadow: none; color: #000080; }
[data-theme="mnemonic"] .btn:active { border-color: #808080 #ffffff #ffffff #808080; }
[data-theme="mnemonic"] .btn-solid { font-weight: 700; }
[data-theme="mnemonic"] .card-link { color: #0000ee; text-decoration: underline; text-transform: none; font-family: Tahoma, sans-serif; }
[data-theme="mnemonic"] .card-link:hover { color: #ff00ff; }
[data-theme="mnemonic"] .cap-grid { gap: 10px; background: transparent; border: none; overflow: visible; }
[data-theme="mnemonic"] .ticker {
  background: #000080;
  border-top: 2px solid #ffffff;
  border-bottom: 2px solid #808080;
}
[data-theme="mnemonic"] .ticker::before, [data-theme="mnemonic"] .ticker::after { display: none; }
[data-theme="mnemonic"] .ticker-track { color: #ffff00; font-family: "Courier New", monospace; font-weight: 700; animation-duration: 28s; }
[data-theme="mnemonic"] .ticker-track .sep { color: #00e5ff; animation: mnblink 1s steps(1) infinite; }
@keyframes mnblink { 50% { opacity: 0; } }
[data-theme="mnemonic"] .hero-stats dt { font-family: "Courier New", monospace; font-weight: 700; }
/* the hero is a program window on the desktop */
[data-theme="mnemonic"] .hero { padding-top: 60px; }
[data-theme="mnemonic"] .hero .wrap {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  box-shadow: 4px 4px 0 rgba(0,0,0,.35);
  padding: 0 38px 38px;
  position: relative;
}
[data-theme="mnemonic"] .hero .wrap::before {
  content: "INFINITE_PARALLEL.EXE";
  display: block;
  margin: 2px -36px 26px;
  padding: 5px 9px;
  background: linear-gradient(90deg, #000080, #1084d0);
  color: #fff;
  font: 700 12px Tahoma, sans-serif;
  letter-spacing: 0.5px;
}
[data-theme="mnemonic"] .hero .wrap::after {
  content: "▁ ▢ ✕";
  position: absolute;
  top: 8px;
  right: 12px;
  color: #fff;
  font-size: 10px;
  letter-spacing: 2px;
}
/* section headings + footer get raised chrome so they read on the desktop */
[data-theme="mnemonic"] .work h2,
[data-theme="mnemonic"] .studio h2,
[data-theme="mnemonic"] .contact h2,
[data-theme="mnemonic"] .work .eyebrow,
[data-theme="mnemonic"] .studio .eyebrow,
[data-theme="mnemonic"] .contact .eyebrow,
[data-theme="mnemonic"] .studio-lead {
  display: inline-block;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  box-shadow: 2px 2px 0 rgba(0,0,0,.25);
  padding: 8px 14px;
}
[data-theme="mnemonic"] .work h2, [data-theme="mnemonic"] .studio h2, [data-theme="mnemonic"] .contact h2 { margin-bottom: 18px; }
[data-theme="mnemonic"] .contact-cta .btn-solid { background: #c0c0c0; }
[data-theme="mnemonic"] .foot {
  background: #c0c0c0;
  border-top: 2px solid #ffffff;
  box-shadow: 0 -2px 0 rgba(0,0,0,.25);
  color: #222;
}
[data-theme="mnemonic"] .foot .foot-mark { color: #000080; }
/* the monogram gets its own floating window on the desktop */
[data-theme="mnemonic"] .rig-shell {
  top: 110px; right: 40px;
  width: 400px; height: 470px;
  background: #000;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  box-shadow: 6px 6px 0 rgba(0,0,0,.35);
  z-index: 3;
}
[data-theme="mnemonic"] .rig-shell::before {
  content: "RIG_VIEWER.EXE";
  position: absolute; top: 2px; left: 2px; right: 2px;
  padding: 4px 8px;
  background: linear-gradient(90deg, #000080, #1084d0);
  color: #fff;
  font: 700 11px Tahoma, sans-serif;
  letter-spacing: 0.5px;
}
[data-theme="mnemonic"] .rig-shell::after {
  content: "▁ ▢ ✕";
  position: absolute; top: 6px; right: 10px;
  color: #fff; font-size: 9px; letter-spacing: 2px;
}
[data-theme="mnemonic"] .rig-canvas {
  top: 28px; left: 2px; right: auto; bottom: auto;
  width: calc(100% - 4px);
  height: calc(100% - 30px);
}
[data-theme="mnemonic"] .rig-hint { display: none; }
@media (max-width: 960px) {
  [data-theme="mnemonic"] .rig-shell {
    position: relative;
    top: auto; right: auto;
    width: auto; height: 320px;
    margin: 14px 4px 0;
  }
}

/* ============================================================
   DEPTH LAYER — optional per-skin world features (▦ toggle,
   off by default). Nodes are built/removed by js/depth.js.
   ============================================================ */
.dp-taskbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 56;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  background: #c0c0c0;
  border-top: 2px solid #ffffff;
  box-shadow: 0 -2px 0 rgba(0,0,0,.25);
  font-family: Tahoma, sans-serif;
  font-size: 12px;
  color: #000;
}
.dp-taskbar button {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  padding: 4px 10px;
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.dp-taskbar button:active { border-color: #808080 #ffffff #ffffff #808080; }
.dp-start { font-weight: 700; }
.dp-progs { display: flex; gap: 4px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.dp-clock {
  border: 2px solid;
  border-color: #808080 #ffffff #ffffff #808080;
  padding: 4px 10px;
  background: #d4d0c8;
  font-family: "Courier New", monospace;
  font-weight: 700;
}
html.dp-pad body { padding-bottom: 44px; }

.dp-hp {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-family: "VT323", monospace;
  font-size: 16px;
  color: #FCFCEC;
}
.dp-lv { color: #F8D030; }
.dp-bar { flex: 1; height: 10px; background: #05081F; border: 2px solid #182860; position: relative; }
.dp-bar i { position: absolute; top: 0; bottom: 0; left: 0; background: linear-gradient(90deg, #78C850, #35e065); }
.dp-hpn { color: #78C8F8; }

.dp-pips {
  margin-top: 12px;
  font-family: monospace;
  font-size: 12px;
  letter-spacing: 2px;
  color: #54e0c7;
}
[data-theme="mnemonic"] .now-wearing { border-radius: 0; border: 2px solid; border-color: #808080 #ffffff #ffffff #808080; background: #d4d0c8; }
[data-theme="mnemonic"] .fancy { color: #000080; font-style: italic; }
[data-theme="mnemonic"] .hero .wrap > * { position: relative; }
[data-theme="mnemonic"] ::selection { background: #000080; color: #fff; }
[data-theme="mnemonic"] .eyebrow::before { display: none; }

/* ============================================================
   05 · HYPERION — "Command Deck"  (Overlord Station ♛)
   #060912 + nebula radials, gold/cyan neon, glass panels,
   uppercase gold panel titles, glow dots. Warp starfield fx.
   ============================================================ */
[data-theme="hyperion"] {
  --bg: #060912;
  --bg-layer: radial-gradient(1200px 700px at 30% -10%, #12203c 0%, transparent 60%),
              radial-gradient(900px 600px at 110% 120%, #1a1030 0%, transparent 55%);
  --surface: #0e1526;
  --surface-2: #121b30;
  --line: #1e2b45;
  --line-2: #16213a;
  --text: #e6edf8;
  --text-dim: #8ca0c2;
  --text-faint: #5d6f92;
  --accent: #ffcf5c;
  --accent-2: #4ad9e0;
  --accent-ink: #241704;
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Menlo", "Consolas", ui-monospace, monospace;
  --h-weight: 800;
  --h-transform: none;
  --h-spacing: -0.02em;
  --h-line: 1.05;
  --eyebrow-color: #ffcf5c;
  --eyebrow-spacing: 0.18em;
  --r-s: 8px; --r-m: 14px; --r-l: 16px;
  --card-bg: rgba(14,21,38,.94);
  --card-border: 1px solid #1e2b45;
  --card-shadow: 0 18px 50px rgba(0,0,0,.5);
  --card-shadow-hover: 0 18px 50px rgba(0,0,0,.6), 0 0 16px rgba(74,217,224,.25);
  --btn-shadow-h: 0 0 16px rgba(255,207,92,.4);
  --ghost-border: #1e2b45;
  --nav-bg: rgba(6,9,18,.8);
  --nav-blur: blur(8px);
  --panel-bg: rgba(14,21,38,.94);
}
[data-theme="hyperion"] .btn-solid {
  background: linear-gradient(180deg, #ffdd7a, #f0a53a);
  border-color: transparent;
  color: #241704;
  font-weight: 700;
}
[data-theme="hyperion"] .card { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
[data-theme="hyperion"] .wordmark::before {
  content: "♛ ";
  color: #ffcf5c;
  filter: drop-shadow(0 0 10px rgba(255,207,92,.6));
}
[data-theme="hyperion"] .card-num,
[data-theme="hyperion"] .eyebrow { text-shadow: 0 0 8px rgba(255,207,92,.35); }
[data-theme="hyperion"] .nw-dot { box-shadow: 0 0 8px currentColor; }
[data-theme="hyperion"] .card-tags li {
  background: rgba(74,217,224,.12);
  border-color: rgba(74,217,224,.4);
  color: #4ad9e0;
  border-radius: 8px;
}
[data-theme="hyperion"] .fancy { color: #ffcf5c; font-style: normal; }
[data-theme="hyperion"] .ticker-track { color: #8ca0c2; }
[data-theme="hyperion"] .ticker-track .sep { color: #ffcf5c; text-shadow: 0 0 8px rgba(255,207,92,.5); }

/* ============================================================
   06 · PUPILMON — "Handheld Hero"  (pupilmon.monster)
   Navy CRT radial, cream text, arcade yellow/red, Press Start 2P
   + VT323, hard offset shadows, press-down buttons, scanlines.
   ============================================================ */
[data-theme="pupilmon"] {
  --bg: #0A1038;
  --bg-layer: radial-gradient(circle at 30% 20%, #283078 0%, #0A1038 60%, #05081F 100%);
  --surface: #0e1230;
  --surface-2: #182860;
  --line: #182860;
  --line-2: #101a48;
  --text: #FCFCEC;
  --text-dim: #a8b0dc;
  --text-faint: #6f77a8;
  --accent: #E13628;
  --accent-2: #F8D030;
  --accent-ink: #FCFCEC;
  --font-display: "Press Start 2P", monospace;
  --font-body: "VT323", monospace;
  --font-mono: "VT323", monospace;
  --h-weight: 400;
  --h-transform: uppercase;
  --h-spacing: 0.02em;
  --h-line: 1.25;
  --h-scale: 0.62;
  --body-size: 20px;
  --eyebrow-color: #F8D030;
  --eyebrow-spacing: 0.14em;
  --r-s: 4px; --r-m: 8px; --r-l: 8px;
  --card-bg: #0e1230;
  --card-border: 4px solid #182860;
  --card-shadow: 4px 4px 0 #05081F;
  --card-shadow-hover: 6px 6px 0 #05081F;
  --lift: -2px;
  --btn-radius: 4px;
  --btn-font: "Press Start 2P", monospace;
  --btn-size: 10px;
  --btn-spacing: 0.06em;
  --btn-weight: 400;
  --btn-shadow-h: none;
  --ghost-border: #182860;
  --nav-bg: rgba(10,16,56,.92);
  --nav-blur: none;
  --nav-border: #182860;
  --panel-bg: #0e1230;
  --ease: steps(2, end);
}
[data-theme="pupilmon"] body::after {
  opacity: 1;
  z-index: 61;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 3px),
    radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.45) 100%);
}
[data-theme="pupilmon"] h1, [data-theme="pupilmon"] h2 {
  color: #F8D030;
  text-shadow: 3px 3px 0 #05081F, 6px 6px 0 #E13628;
}
[data-theme="pupilmon"] .fancy { color: #78C8F8; font-style: normal; }
[data-theme="pupilmon"] .btn {
  border: 3px solid #182860;
  box-shadow: 4px 4px 0 #05081F;
}
[data-theme="pupilmon"] .btn:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 #05081F; }
[data-theme="pupilmon"] .btn:active { transform: translate(3px, 3px); box-shadow: none; }
[data-theme="pupilmon"] .btn-solid { background: #E13628; }
[data-theme="pupilmon"] .btn-ghost, [data-theme="pupilmon"] .btn-wear { background: #182860; color: #FCFCEC; }
[data-theme="pupilmon"] .card { box-shadow: 4px 4px 0 #05081F, inset 0 0 0 2px rgba(252,252,236,.18); }
[data-theme="pupilmon"] .card-title { color: #F8D030; text-shadow: 2px 2px 0 #05081F; }
[data-theme="pupilmon"] .card-tags li { border: 2px solid #182860; background: #05081F; color: #78C8F8; font-size: 14px; }
[data-theme="pupilmon"] .hero-stats dt { color: #F8D030; text-shadow: 2px 2px 0 #05081F; }
[data-theme="pupilmon"] .ticker { background: #05081F; border-color: #182860; }
[data-theme="pupilmon"] .ticker::before { background: linear-gradient(90deg, #05081F, transparent); }
[data-theme="pupilmon"] .ticker::after { background: linear-gradient(270deg, #05081F, transparent); }
[data-theme="pupilmon"] .ticker-track { color: #F8D030; font-size: 20px; letter-spacing: 0.1em; animation-duration: 26s; }
[data-theme="pupilmon"] .ticker-track .sep { color: #E13628; }
[data-theme="pupilmon"] .card-desc, [data-theme="pupilmon"] .hero-sub, [data-theme="pupilmon"] .cap p { font-size: 19px; line-height: 1.35; }
[data-theme="pupilmon"] .eyebrow::before { display: none; }
[data-theme="pupilmon"] ::selection { background: #F8D030; color: #0A1038; }

/* ============================================================
   07 · MECHMATRIX — "Holo Grid"  (Mech Matrix)
   #05070a void, mint #54e0c7, team cyan/orange, all-monospace,
   zero radius, hairline strokes. Wireframe monogram fx.
   ============================================================ */
[data-theme="mechmatrix"] {
  --bg: #05070a;
  --bg-layer:
    linear-gradient(rgba(84,224,199,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(84,224,199,.05) 1px, transparent 1px);
  --surface: #131a20;
  --surface-2: #182129;
  --line: #263238;
  --line-2: #1b242b;
  --text: #eceff1;
  --text-dim: #90a4ae;
  --text-faint: #546e7a;
  --accent: #54e0c7;
  --accent-2: #35d6ff;
  --accent-ink: #05070a;
  --font-display: monospace;
  --font-body: monospace;
  --font-mono: monospace;
  --h-weight: 700;
  --h-transform: uppercase;
  --h-spacing: 0.02em;
  --h-line: 1.1;
  --h-scale: 0.86;
  --body-size: 15px;
  --eyebrow-color: #54e0c7;
  --eyebrow-spacing: 0.2em;
  --r-s: 0px; --r-m: 0px; --r-l: 0px;
  --btn-radius: 0px;
  --card-bg: #131a20;
  --card-border: 1px solid #263238;
  --card-shadow: none;
  --card-shadow-hover: 0 0 0 1px #54e0c7;
  --lift: 0px;
  --btn-shadow-h: 0 0 18px rgba(84,224,199,.35);
  --ghost-border: #455a64;
  --nav-bg: rgba(5,7,10,.9);
  --nav-blur: none;
  --nav-border: #263238;
  --panel-bg: #0b0f12;
}
body[data-mm] { background-size: 48px 48px; }
[data-theme="mechmatrix"] body { background-size: 48px 48px, 48px 48px; }
[data-theme="mechmatrix"] .card:hover { border-color: #54e0c7; }
[data-theme="mechmatrix"] .card-title::before { content: "◄ "; color: #54e0c7; }
[data-theme="mechmatrix"] .card-title::after { content: " ►"; color: #54e0c7; }
[data-theme="mechmatrix"] .card-num { color: #35d6ff; }
[data-theme="mechmatrix"] .card:nth-child(even) .card-num { color: #ff7a45; }
[data-theme="mechmatrix"] .fancy { color: #54e0c7; font-style: normal; }
[data-theme="mechmatrix"] .hero-h::after {
  content: "█";
  color: #54e0c7;
  animation: mmblink 1.2s steps(1) infinite;
  font-size: 0.55em;
  vertical-align: 0.18em;
  margin-left: 8px;
}
@keyframes mmblink { 50% { opacity: 0; } }
[data-theme="mechmatrix"] .ticker-track { color: #54e0c7; }
[data-theme="mechmatrix"] .ticker-track .sep { color: #ff7a45; }
[data-theme="mechmatrix"] ::selection { background: #54e0c7; color: #05070a; }
[data-theme="mechmatrix"] .eyebrow::before { content: "// "; width: auto; height: auto; background: none; }

/* ============================================================
   08 · DRAGONFRUIT — "Dragonfruit Rack"  (Dragonfruit Drive 🐉)
   Plum #0e0b14, dragonfruit pink + mint, system sans, 12px
   cards, numbered pink badges, pink hover borders.
   ============================================================ */
[data-theme="dragonfruit"] {
  --bg: #0e0b14;
  --bg-layer: radial-gradient(1200px 600px at 70% -10%, #2a1730 0%, #0e0b14 60%);
  --surface: #181222;
  --surface-2: #211934;
  --line: #2e2442;
  --line-2: #241c35;
  --text: #ece7f5;
  --text-dim: #9c8fb8;
  --text-faint: #6f6390;
  --accent: #e0466e;
  --accent-2: #46e0b8;
  --accent-ink: #ffffff;
  --font-display: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --h-weight: 800;
  --h-transform: none;
  --h-spacing: 0.003em;
  --h-line: 1.1;
  --eyebrow-color: #46e0b8;
  --eyebrow-spacing: 0.16em;
  --r-s: 8px; --r-m: 12px; --r-l: 14px;
  --card-bg: #181222;
  --card-border: 1px solid #2e2442;
  --card-shadow: 0 6px 20px rgba(0,0,0,.25);
  --card-shadow-hover: 0 6px 20px rgba(0,0,0,.35);
  --btn-radius: 8px;
  --btn-font: var(--font-body);
  --btn-size: 0.85rem;
  --btn-spacing: 0.02em;
  --btn-transform: none;
  --btn-weight: 600;
  --btn-shadow-h: 0 8px 24px rgba(224,70,110,.35);
  --ghost-border: #3a3050;
  --nav-bg: linear-gradient(180deg, #211934, #181222);
  --nav-blur: none;
  --nav-border: #2e2442;
  --panel-bg: #14101e;
}
[data-theme="dragonfruit"] .card:hover { border-color: #e0466e; background: #1a1426; }
[data-theme="dragonfruit"] .card-num {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  background: #e0466e;
  color: #fff;
  border-radius: 6px;
  font-size: 0.62rem;
}
[data-theme="dragonfruit"] .btn-ghost:hover, [data-theme="dragonfruit"] .btn-wear:hover { border-color: #e0466e; color: #ece7f5; background: rgba(224,70,110,.06); }
[data-theme="dragonfruit"] .fancy {
  background: linear-gradient(90deg, #e0466e, #46e0b8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: normal;
  padding-right: 0.08em;
  margin-right: -0.08em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
[data-theme="dragonfruit"] .now-wearing b { color: #46e0b8; }
[data-theme="dragonfruit"] .ticker-track .sep { color: #e0466e; }
[data-theme="dragonfruit"] ::selection { background: #46e0b8; color: #06231c; }

/* ============================================================
   09 · SALON — "Peony Parlor"  (Main Street Salon)
   Warm cream, peony rose + gold, Cormorant/Jost/Parisienne,
   pill buttons, blush stripes, whisper shadows.
   ============================================================ */
[data-theme="salon"] {
  --bg: #FAF5F1;
  --bg-layer: radial-gradient(ellipse 60% 55% at 50% 45%, rgba(251,246,242,0.92), rgba(251,246,242,0.55) 55%, transparent);
  --surface: #FFFFFF;
  --surface-2: #FBF6F2;
  --line: #EEE2DD;
  --line-2: #F5EBE6;
  --text: #1C1918;
  --text-dim: #8C807A;
  --text-faint: #b0a49e;
  --accent: #C95678;
  --accent-2: #9E3A58;
  --accent-ink: #ffffff;
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Jost", "Helvetica Neue", sans-serif;
  --font-mono: "Jost", sans-serif;
  --h-weight: 500;
  --h-transform: none;
  --h-spacing: 0;
  --h-line: 1.06;
  --body-size: 16.5px;
  --eyebrow-color: #C95678;
  --eyebrow-spacing: 0.28em;
  --r-s: 999px; --r-m: 1.25rem; --r-l: 1.25rem;
  --btn-radius: 999px;
  --btn-font: var(--font-body);
  --btn-size: 0.85rem;
  --btn-spacing: 0.04em;
  --btn-transform: none;
  --btn-weight: 500;
  --card-bg: #FFFFFF;
  --card-border: 1px solid #EEE2DD;
  --card-shadow: 0 1px 2px rgba(28,25,24,0.04);
  --card-shadow-hover: 0 14px 34px rgba(158,58,88,0.12);
  --lift: -3px;
  --btn-shadow-h: 0 10px 24px rgba(201,86,120,.3);
  --ghost-border: #EEE2DD;
  --nav-bg: rgba(250,245,241,.85);
  --nav-blur: blur(12px);
  --panel-bg: #FFFFFF;
}
/* blush striped wallpaper down the right edge */
[data-theme="salon"] body::before {
  opacity: 1;
  z-index: 0;
  left: auto;
  width: 22vw;
  background: repeating-linear-gradient(90deg, rgba(241,197,204,.35) 0, rgba(241,197,204,.35) 5.4vw, transparent 5.4vw, transparent 10.8vw);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%);
  mask-image: linear-gradient(90deg, transparent, #000 40%);
}
[data-theme="salon"] .fancy {
  font-family: "Parisienne", cursive;
  font-style: normal;
  color: #C95678;
  font-size: 1.08em;
  letter-spacing: 0;
  text-transform: none;
}
[data-theme="salon"] .card-num { color: #C2A05E; }
[data-theme="salon"] .card-tags li { border-radius: 999px; background: #FBF6F2; border-color: #EEE2DD; color: #8C807A; }
[data-theme="salon"] .ticker { background: #1C1918; border: none; }
[data-theme="salon"] .ticker::before { background: linear-gradient(90deg, #1C1918, transparent); }
[data-theme="salon"] .ticker::after { background: linear-gradient(270deg, #1C1918, transparent); }
[data-theme="salon"] .ticker-track { color: #FBF6F2; font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 1.05rem; text-transform: none; letter-spacing: 0.08em; animation-duration: 56s; }
[data-theme="salon"] .ticker-track .sep { color: #C95678; font-style: normal; }
[data-theme="salon"] .wordmark { letter-spacing: 0.28em; font-family: var(--font-body); font-weight: 500; }
[data-theme="salon"] .hero-stats dt { color: #C95678; }
[data-theme="salon"] ::selection { background: #F1C5CC; color: #1C1918; }

/* ============================================================
   10 · WEARINGTIME — "Blue & Gold Atelier"  (knox-lux)
   Warm paper, ink-blue #1a3a8f as dark surface, yellow-gold,
   Cormorant 500 + Geist, 2px radii, hairlines over boxes.
   ============================================================ */
[data-theme="wearingtime"] {
  --bg: #f6f4ef;
  --bg-layer: none;
  --surface: #ffffff;
  --surface-2: #ecebe4;
  --line: #dcdee4;
  --line-2: #e8e9ed;
  --text: #0e1b30;
  --text-dim: #5d6573;
  --text-faint: #9aa1af;
  --accent: #1a3a8f;
  --accent-2: #b3851a;
  --accent-ink: #f6f4ef;
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Geist", "Jost", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --h-weight: 500;
  --h-transform: none;
  --h-spacing: -0.01em;
  --h-line: 1.05;
  --eyebrow-color: #b3851a;
  --eyebrow-spacing: 0.22em;
  --r-s: 2px; --r-m: 2px; --r-l: 2px;
  --btn-radius: 2px;
  --btn-font: var(--font-body);
  --btn-size: 0.8rem;
  --btn-spacing: 0.1em;
  --btn-transform: uppercase;
  --btn-weight: 500;
  --card-bg: #ffffff;
  --card-border: 1px solid #dcdee4;
  --card-shadow: none;
  --card-shadow-hover: 0 24px 60px rgba(14,27,48,.12);
  --lift: -3px;
  --btn-shadow-h: 0 12px 30px rgba(26,58,143,.28);
  --ghost-border: #c6cad4;
  --nav-bg: rgba(246,244,239,.85);
  --nav-blur: blur(12px);
  --panel-bg: #ffffff;
}
/* the hero goes full ink-and-gold, like the WearingTime hero */
[data-theme="wearingtime"] .hero {
  background:
    radial-gradient(110% 100% at 78% 38%, rgba(244,206,98,0.55) 0%, rgba(244,206,98,0.35) 22%, transparent 55%),
    linear-gradient(135deg, #2151b8 0%, #1a3a8f 28%, #13296e 58%, #0b1d49 100%);
  color: #f6f4ef;
}
[data-theme="wearingtime"] .hero .eyebrow { color: #f4ce62; }
[data-theme="wearingtime"] .hero-sub { color: rgba(246,244,239,.72); }
[data-theme="wearingtime"] .hero-sub strong { color: #fff; }
[data-theme="wearingtime"] .hero .fancy { color: #f4ce62; font-style: italic; }
[data-theme="wearingtime"] .hero .btn-solid { background: #e2b22f; border-color: #e2b22f; color: #0e1b30; }
[data-theme="wearingtime"] .hero .btn-ghost { color: #f6f4ef; border-color: rgba(246,244,239,.4); }
[data-theme="wearingtime"] .hero .now-wearing { border-color: rgba(246,244,239,.25); color: rgba(246,244,239,.6); }
[data-theme="wearingtime"] .hero .now-wearing b { color: #f4ce62; }
[data-theme="wearingtime"] .hero-stats dt { color: #f4ce62; }
[data-theme="wearingtime"] .hero-stats dd { color: rgba(246,244,239,.5); }
[data-theme="wearingtime"] .fancy { color: #b3851a; font-style: italic; }
[data-theme="wearingtime"] .ticker { background: #0e1b30; border: none; }
[data-theme="wearingtime"] .ticker::before { background: linear-gradient(90deg, #0e1b30, transparent); }
[data-theme="wearingtime"] .ticker::after { background: linear-gradient(270deg, #0e1b30, transparent); }
[data-theme="wearingtime"] .ticker-track { color: #cdb07c; font-family: "Cormorant Garamond", serif; text-transform: uppercase; font-size: 0.92rem; letter-spacing: 0.24em; animation-duration: 58s; }
[data-theme="wearingtime"] .ticker-track .sep { color: #e2b22f; }
[data-theme="wearingtime"] .card-title { font-style: normal; }
[data-theme="wearingtime"] .card:hover { border-color: #b3851a; }
[data-theme="wearingtime"] ::selection { background: #e2b22f; color: #1a3a8f; }