/* =========================================================
   STILE "PIXEL" — Pop at night (data-skin="pixel", data-skin-base="pop", js/skin.js).
   The shapes are the ones of css/skin-pop.css (stickers, thick outlines, hard shadows, keys that go down):
   this file only changes
   - the colours: towards black, with Pop's toy box still there but used sparingly (tags, pills, accents);
   - the fonts: the important texts in an 8-bit font (Jersey 15: titles, names, headings, Christian's notes),
     the small labels and keys in another one (Silkscreen); the rest stays Pop (Fredoka, Nunito);
   - a few pixel details: square dots on the map and in the trails, square skill levels, segmented bars,
     stair-step badges, a pixel dashed line for Christian;
   - the cursor: a rounded Pop arrow with a thick black rim and a hard shadow.
   Designed dark; the light theme is the same in daylight.
   ========================================================= */

/* ---------- Tokens ---------- */
:root[data-skin="pixel"], :root[data-skin="pixel"][data-theme="dark"] {
  --bg: #17171a; --bg-2: #1f1f23; --ink: #f5f2ea; --ink-dim: #a5a2ab;
  --card: #232327; --card-ink: #f5f2ea; --card-dim: #a5a2ab;
  --hud: #232327; --hud-line: rgba(245, 242, 234, .12);
  --grid-minor: rgba(245, 242, 234, .07); --grid-major: rgba(245, 242, 234, .16); --grid-glow: rgba(255, 216, 74, .75); --grid-kind: pixels;
  --accent: #ffd84a; --accent-ink: #141416; --hot: #ff7eb6;
  --shadow: rgba(0, 0, 0, .6); --dim: rgba(12, 12, 14, .62);
  --f-mono: "Silkscreen", ui-monospace, monospace;                    /* small labels, keys: 8-bit */
  --f-pixel: "Jersey 15", "Silkscreen", system-ui, sans-serif;      /* the important texts: 8-bit (one weight: never bolded) */
  /* the toy box, a little softer at night */
  --pk: #ff7eb6; --yl: #ffd84a; --mt: #62dca8; --sk: #6ec6ff; --pp: #a88dff; --or: #ff9e5e;
  --line: #000; --on-pastel: #141416; --paper-glow: rgba(255, 255, 255, .04);
  --soft-line: color-mix(in srgb, var(--ink) 22%, var(--bg-2)); /* where Pop draws a faint ink line (black would vanish) */
  --px: 2px; /* one pixel of the stair-step badges */
  --pix: polygon(0 calc(var(--px) * 2), var(--px) calc(var(--px) * 2), var(--px) var(--px), calc(var(--px) * 2) var(--px), calc(var(--px) * 2) 0,
    calc(100% - var(--px) * 2) 0, calc(100% - var(--px) * 2) var(--px), calc(100% - var(--px)) var(--px), calc(100% - var(--px)) calc(var(--px) * 2), 100% calc(var(--px) * 2),
    100% calc(100% - var(--px) * 2), calc(100% - var(--px)) calc(100% - var(--px) * 2), calc(100% - var(--px)) calc(100% - var(--px)), calc(100% - var(--px) * 2) calc(100% - var(--px)), calc(100% - var(--px) * 2) 100%,
    calc(var(--px) * 2) 100%, calc(var(--px) * 2) calc(100% - var(--px)), var(--px) calc(100% - var(--px)), var(--px) calc(100% - var(--px) * 2), 0 calc(100% - var(--px) * 2));
  --seg: 6px; --gap: 2px; /* segmented bars: block, gap */
  /* rounded Pop cursors (css/cursors.css has the others) */
  --cur-default: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M6 5 L25.5 14.2 L16.6 16.9 L13.1 26.2 Z' transform='translate(0 2.4)' fill='%23000' stroke='%23000' stroke-width='4.6' stroke-linejoin='round'/%3E%3Cpath d='M6 5 L25.5 14.2 L16.6 16.9 L13.1 26.2 Z' fill='%23000' stroke='%23000' stroke-width='4.6' stroke-linejoin='round'/%3E%3Cpath d='M6 5 L25.5 14.2 L16.6 16.9 L13.1 26.2 Z' fill='%23f5f2ea' stroke='%23f5f2ea' stroke-width='.8' stroke-linejoin='round'/%3E%3C/svg%3E") 5 4, default;
  --cur-pointer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M6 5 L25.5 14.2 L16.6 16.9 L13.1 26.2 Z' transform='translate(0 2.4)' fill='%23000' stroke='%23000' stroke-width='4.6' stroke-linejoin='round'/%3E%3Cpath d='M6 5 L25.5 14.2 L16.6 16.9 L13.1 26.2 Z' fill='%23000' stroke='%23000' stroke-width='4.6' stroke-linejoin='round'/%3E%3Cpath d='M6 5 L25.5 14.2 L16.6 16.9 L13.1 26.2 Z' fill='%23ffd84a' stroke='%23ffd84a' stroke-width='.8' stroke-linejoin='round'/%3E%3C/svg%3E") 5 4, pointer;
  --cur-text: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M11.5 5.5 Q16 5.5 16 9 Q16 5.5 20.5 5.5 M16 9 V23 M11.5 26.5 Q16 26.5 16 23 Q16 26.5 20.5 26.5' transform='translate(0 2)' fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.5 5.5 Q16 5.5 16 9 Q16 5.5 20.5 5.5 M16 9 V23 M11.5 26.5 Q16 26.5 16 23 Q16 26.5 20.5 26.5' fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.5 5.5 Q16 5.5 16 9 Q16 5.5 20.5 5.5 M16 9 V23 M11.5 26.5 Q16 26.5 16 23 Q16 26.5 20.5 26.5' fill='none' stroke='%23f5f2ea' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16, text;
  --cur-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M6 5 L25.5 14.2 L16.6 16.9 L13.1 26.2 Z' transform='translate(0 2.4)' fill='%23000' stroke='%23000' stroke-width='4.6' stroke-linejoin='round'/%3E%3Cpath d='M6 5 L25.5 14.2 L16.6 16.9 L13.1 26.2 Z' fill='%23000' stroke='%23000' stroke-width='4.6' stroke-linejoin='round'/%3E%3Cpath d='M6 5 L25.5 14.2 L16.6 16.9 L13.1 26.2 Z' fill='%23f5f2ea' stroke='%23f5f2ea' stroke-width='.8' stroke-linejoin='round'/%3E%3Crect x='17.5' y='17.5' width='12' height='12' rx='4' fill='%23000' transform='translate(0 2)'/%3E%3Crect x='17.5' y='17.5' width='12' height='12' rx='4' fill='%23ff7eb6' stroke='%23000' stroke-width='2.2'/%3E%3Cpath d='M23.5 20.6v5.8M20.6 23.5h5.8' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 5 4, copy;
  color-scheme: dark;
}
:root[data-skin="pixel"][data-theme="light"] {
  --bg: #ece9e2; --bg-2: #f7f5f0; --ink: #141416; --ink-dim: #6c6973;
  --card: #fbfaf7; --card-ink: #141416; --card-dim: #6c6973;
  --hud: #fbfaf7; --hud-line: rgba(20, 20, 22, .16);
  --grid-minor: rgba(20, 20, 22, .1); --grid-major: rgba(20, 20, 22, .22); --grid-glow: rgba(255, 79, 154, .7);
  --accent: #141416; --accent-ink: #ffd84a; --hot: #ff4f9a;
  --shadow: rgba(20, 20, 22, .2); --dim: rgba(236, 233, 226, .6);
  --line: #141416; --soft-line: color-mix(in srgb, var(--ink) 20%, var(--bg-2));
  color-scheme: light;
}
/* light theme: the toy box as fills again (pastel text on a pale tint would not be readable) */
[data-skin="pixel"][data-theme="light"] .card .chip { background: color-mix(in srgb, var(--mt) 50%, var(--card)); color: var(--on-pastel); }
[data-skin="pixel"][data-theme="light"] .card .chip:nth-child(4n+2) { background: color-mix(in srgb, var(--sk) 50%, var(--card)); color: var(--on-pastel); }
[data-skin="pixel"][data-theme="light"] .card .chip:nth-child(4n+3) { background: color-mix(in srgb, var(--yl) 60%, var(--card)); color: var(--on-pastel); }
[data-skin="pixel"][data-theme="light"] .card .chip:nth-child(4n) { background: color-mix(in srgb, var(--pk) 45%, var(--card)); color: var(--on-pastel); }
[data-skin="pixel"][data-theme="light"] .card-meta span:first-child, [data-skin="pixel"][data-theme="light"] .card-featured .card-meta span:first-child { background: var(--yl); color: var(--on-pastel); }
[data-skin="pixel"][data-theme="light"] .card-info .card-meta span:first-child { background: var(--sk); color: var(--on-pastel); }
[data-skin="pixel"][data-theme="light"] .card-featured .card-title { color: var(--ink); text-shadow: 0 4px 0 var(--yl); }
[data-skin="pixel"][data-theme="light"] .ins-facts div:nth-child(n) { background: color-mix(in srgb, var(--tc) 30%, var(--bg-2)); }
[data-skin="pixel"][data-theme="light"] .ins-facts dt, [data-skin="pixel"][data-theme="light"] .ins-facts div:hover dt { color: color-mix(in srgb, var(--tc) 35%, var(--ink)); }
[data-skin="pixel"] body { font-synthesis: none; } /* the pixel fonts have one weight: no fake bold */
[data-skin="pixel"] body {
  background:
    radial-gradient(48vmax 48vmax at 0% 0%, color-mix(in srgb, var(--pk) 7%, transparent), transparent 70%),
    radial-gradient(44vmax 44vmax at 100% 100%, color-mix(in srgb, var(--mt) 6%, transparent), transparent 70%),
    var(--bg);
}
@keyframes pixel-blink { 50% { opacity: 0; } }

/* ---------- Map: trails of square dots, 8-bit signposts ---------- */
[data-skin="pixel"] #routes path { stroke: var(--ink); opacity: .22; stroke-dasharray: 7 11; stroke-linecap: butt; }
[data-skin="pixel"] #routes .sign text { font: 400 22px var(--f-pixel); letter-spacing: .03em; }

/* ---------- Zones ---------- */
[data-skin="pixel"] .zone-frame { background: color-mix(in srgb, var(--zc) 6%, var(--bg)); outline-color: color-mix(in srgb, var(--zc) 45%, var(--bg)); }
[data-skin="pixel"] .zone.current .zone-frame { background: color-mix(in srgb, var(--zc) 10%, var(--bg)); outline-color: var(--zc); }
[data-skin="pixel"] .zone-kicker { font: 400 14px/1 var(--f-mono); letter-spacing: .06em; }
[data-skin="pixel"] .zone-kicker b { padding: 6px 10px 5px; border-radius: 0; clip-path: var(--pix); box-shadow: none; font: 700 14px/1 var(--f-mono); letter-spacing: .06em; }
[data-skin="pixel"] .zone-title { font-family: var(--f-pixel); font-weight: 400; font-size: 104px; line-height: .9; letter-spacing: .005em; }

/* ---------- Cards ---------- */
[data-skin="pixel"] .card-meta span:first-child { background: color-mix(in srgb, var(--yl) 20%, var(--card)); color: var(--yl); box-shadow: 0 0 0 2px var(--line); }
[data-skin="pixel"] .card-info .card-meta span:first-child { background: color-mix(in srgb, var(--sk) 20%, var(--card)); color: var(--sk); }
[data-skin="pixel"] .card-title { font-family: var(--f-pixel); font-weight: 400; font-size: 31px; line-height: 1; letter-spacing: .01em; }
/* tags: the toy box as coloured text on a tint of it */
[data-skin="pixel"] .card .chip { background: color-mix(in srgb, var(--mt) 16%, var(--card)); color: var(--mt); }
[data-skin="pixel"] .card .chip:nth-child(4n+2) { background: color-mix(in srgb, var(--sk) 16%, var(--card)); color: var(--sk); }
[data-skin="pixel"] .card .chip:nth-child(4n+3) { background: color-mix(in srgb, var(--yl) 16%, var(--card)); color: var(--yl); }
[data-skin="pixel"] .card .chip:nth-child(4n) { background: color-mix(in srgb, var(--pk) 16%, var(--card)); color: var(--pk); }
[data-skin="pixel"] .card:hover .chip:hover { background: var(--pk); color: var(--on-pastel); }
[data-skin="pixel"] .card-cta { background: color-mix(in srgb, var(--card-ink) 12%, var(--card)); color: var(--card-ink); } /* a quiet key, yellow when the card is pointed at */
[data-skin="pixel"] .card:hover .card-cta, [data-skin="pixel"] .card.reticle-hit .card-cta { background: var(--yl); color: var(--on-pastel); }
/* the featured project: dark like the others, its title in yellow */
[data-skin="pixel"] .card-featured { background: color-mix(in srgb, var(--yl) 7%, var(--card)); color: var(--card-ink); }
[data-skin="pixel"] .card-featured .card-title { font-family: var(--f-pixel); font-weight: 400; font-size: 66px; line-height: .88; color: var(--yl); }
[data-skin="pixel"] .card-featured .card-desc { color: color-mix(in srgb, var(--card-ink) 78%, var(--card)); }
[data-skin="pixel"] .card-featured .card-meta { color: var(--card-dim); }
[data-skin="pixel"] .card-featured .card-meta span:first-child { background: color-mix(in srgb, var(--yl) 20%, var(--card)); color: var(--yl); }
[data-skin="pixel"] .card-featured .card-cta { background: var(--yl); color: var(--on-pastel); }
[data-skin="pixel"] .card-featured .card-cta span:last-child { color: inherit; }
[data-skin="pixel"] .card-featured:hover .card-cta, [data-skin="pixel"] .card-featured.reticle-hit .card-cta { background: var(--pk); }
[data-skin="pixel"] .feat-badge {
  padding: 8px 12px 7px; border-radius: 0; clip-path: var(--pix); box-shadow: none; color: var(--on-pastel);
  font: 700 12px/1 var(--f-mono); letter-spacing: .12em;
}
/* insides of the info cards */
[data-skin="pixel"] .hub-h { font: 400 12px/1 var(--f-mono); letter-spacing: .08em; }
[data-skin="pixel"] .big-name { font-family: var(--f-pixel); font-weight: 400; font-size: 124px; line-height: .85; letter-spacing: .01em; }
[data-skin="pixel"] .btn:hover, [data-skin="pixel"] .btn:focus-visible { color: var(--on-pastel); }
[data-skin="pixel"] .row strong { font: 400 22px/1.1 var(--f-pixel); letter-spacing: .02em; }
[data-skin="pixel"] .copy-row code { font: 800 13.5px/1.3 var(--f-body); } /* the email stays easy to read */
[data-skin="pixel"] .card-info .row:hover { background: color-mix(in srgb, var(--yl) 12%, var(--card)); }
[data-skin="pixel"] .slot, [data-skin="pixel"] .sg, [data-skin="pixel"] .pet { background: color-mix(in srgb, var(--card-ink) 6%, var(--card)); box-shadow: 0 0 0 2px var(--line); }
[data-skin="pixel"] .slot:hover { background: color-mix(in srgb, var(--mt) 18%, var(--card)); }
[data-skin="pixel"] .sg:hover { background: color-mix(in srgb, var(--sk) 16%, var(--card)); }
/* skill levels: pixels */
[data-skin="pixel"] .lv i { border-radius: 0; border-color: color-mix(in srgb, var(--card-ink) 45%, var(--card)); }
[data-skin="pixel"] .lv i.on { background: var(--pk); border-color: var(--pk); }
[data-skin="pixel"] .lv i.half { background: linear-gradient(90deg, var(--pk) 50%, transparent 50%); border-color: var(--pk); }
/* bars made of blocks */
[data-skin="pixel"] .sg-bar, [data-skin="pixel"] .t-bar i, [data-skin="pixel"] .ap-bar {
  height: 8px; border-radius: 0; box-shadow: none;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--card-ink) 16%, transparent) 0 var(--seg), transparent var(--seg) calc(var(--seg) + var(--gap)));
}
[data-skin="pixel"] .sg-bar i { border-radius: 0; background: repeating-linear-gradient(90deg, var(--pk) 0 var(--seg), transparent var(--seg) calc(var(--seg) + var(--gap))); }
[data-skin="pixel"] .t-bar i::before { border-radius: 0; background: repeating-linear-gradient(90deg, var(--glow) 0 var(--seg), transparent var(--seg) calc(var(--seg) + var(--gap))); }
[data-skin="pixel"] .ap-bar i { border-radius: 0; background: repeating-linear-gradient(90deg, var(--yl) 0 var(--seg), transparent var(--seg) calc(var(--seg) + var(--gap))); }
[data-skin="pixel"] .sg-fav { border-radius: 0; clip-path: var(--pix); box-shadow: none; color: var(--on-pastel); font: 700 9px/1 var(--f-mono); }
[data-skin="pixel"] .sg-txt b { font: 400 19px/1.05 var(--f-pixel); letter-spacing: .02em; }
[data-skin="pixel"] .steam-games.wide .sg-txt b { font-size: 23px; }
[data-skin="pixel"] .sg-rank { font: 400 30px/1 var(--f-pixel); }
/* keys, everywhere: little stair-step blocks */
[data-skin="pixel"] .kc, [data-skin="pixel"] .card .kc, [data-skin="pixel"] .sheet-card .kc, [data-skin="pixel"] .mode-btn .kc, [data-skin="pixel"] .mode-btn.quiet .kc {
  border: 0; border-radius: 0; clip-path: var(--pix); background: color-mix(in srgb, currentColor 16%, transparent); color: inherit;
  font: 400 12px/1 var(--f-mono);
}
[data-skin="pixel"] .kc.pad { background: var(--ink); color: var(--bg); }

/* ---------- HUD ---------- */
[data-skin="pixel"] .logo-name { font-family: var(--f-pixel); font-weight: 400; letter-spacing: .02em; }
[data-skin="pixel"] .logo-sub { font: 400 8px/1 var(--f-mono); letter-spacing: .08em; }
[data-skin="pixel"] .mini-n { border-radius: 0; clip-path: var(--pix); box-shadow: none; color: var(--on-pastel); font: 700 8px/1 var(--f-mono); padding: 5px 6px 4px; }
[data-skin="pixel"] .mini-label b { font: 400 15px/1 var(--f-pixel); letter-spacing: .06em; }
[data-skin="pixel"] .mini-label .sep { background: var(--soft-line); }
[data-skin="pixel"] .tutorial .pulse { border-radius: 0; animation: pixel-blink 1s steps(1) infinite; }
[data-skin="pixel"] .coords { font: 400 8px/1 var(--f-mono); letter-spacing: .08em; }
[data-skin="pixel"] .fab { color: var(--on-pastel); }

/* notifications */
[data-skin="pixel"] .toast small { font: 400 8px/1 var(--f-mono); letter-spacing: .12em; }
[data-skin="pixel"] .toast strong { font-family: var(--f-pixel); font-weight: 400; letter-spacing: .02em; }
[data-skin="pixel"] .t-bar b, [data-skin="pixel"] .ap-head small, [data-skin="pixel"] .ap-group { font: 400 8px/1 var(--f-mono); letter-spacing: .12em; }
[data-skin="pixel"] .ap-head strong, [data-skin="pixel"] .legend-card h2 { font-family: var(--f-pixel); font-weight: 400; font-size: 32px; letter-spacing: .02em; }
[data-skin="pixel"] .ap-pct, [data-skin="pixel"] .ap-reset { font: 400 12px/1 var(--f-mono); }
[data-skin="pixel"] .ap-item { border-color: var(--soft-line); }
[data-skin="pixel"] .ap-item.got { border-color: color-mix(in srgb, var(--pk) 60%, var(--bg-2)); }
[data-skin="pixel"] .ap-item.got .ap-ico { color: var(--on-pastel); }

/* ---------- Radial menu ---------- */
[data-skin="pixel"] .seg .lbl { font: 400 21px var(--f-pixel); letter-spacing: .04em; }
[data-skin="pixel"] .seg .num { font: 400 8px var(--f-mono); }
[data-skin="pixel"] .w-center strong { font-family: var(--f-pixel); font-weight: 400; font-size: 28px; letter-spacing: .02em; }
[data-skin="pixel"] .w-center em { font: 400 8px/1 var(--f-mono); letter-spacing: .1em; }

/* ---------- Project panel ---------- */
[data-skin="pixel"] .ins-kicker { border-radius: 0; clip-path: var(--pix); box-shadow: none; color: var(--on-pastel); font: 700 12px/1 var(--f-mono); letter-spacing: .1em; padding: 7px 10px 6px; }
[data-skin="pixel"] .pd-kicker { font: 400 12px/1.5 var(--f-mono); letter-spacing: .04em; }
[data-skin="pixel"] .ins-title { font-family: var(--f-pixel); font-weight: 400; line-height: .95; letter-spacing: .01em; }
[data-skin="pixel"] .ins-facts div { --tc: var(--mt); background: color-mix(in srgb, var(--tc) 14%, var(--bg-2)); color: var(--ink); }
[data-skin="pixel"] .ins-facts div:nth-child(2) { --tc: var(--sk); background: color-mix(in srgb, var(--tc) 14%, var(--bg-2)); }
[data-skin="pixel"] .ins-facts div:nth-child(3) { --tc: var(--yl); background: color-mix(in srgb, var(--tc) 14%, var(--bg-2)); }
[data-skin="pixel"] .ins-facts div:hover { background: color-mix(in srgb, var(--tc) 26%, var(--bg-2)); }
[data-skin="pixel"] .ins-facts dt, [data-skin="pixel"] .ins-facts div:hover dt { color: var(--tc); font: 400 8px/1.3 var(--f-mono); letter-spacing: .1em; }
[data-skin="pixel"] .ins-h { font: 400 12px/1 var(--f-mono); letter-spacing: .08em; }
[data-skin="pixel"] .ins-h::before { border-radius: 0; }
[data-skin="pixel"] .ins-list li::before { border-radius: 0; }
[data-skin="pixel"] .tool[aria-pressed="true"] { color: var(--on-pastel); }
[data-skin="pixel"] .mate i { color: var(--on-pastel); }
[data-skin="pixel"] .ins-share { border-color: var(--soft-line); }
[data-skin="pixel"] .ins-share:hover { border-color: var(--ink); background: color-mix(in srgb, var(--yl) 10%, transparent); }
[data-skin="pixel"] .params { border-color: var(--soft-line); }
[data-skin="pixel"] .hero-count { font: 400 8px/1 var(--f-mono); }
[data-skin="pixel"] .lb-title { font-family: var(--f-pixel); font-weight: 400; font-size: 24px; }

/* ---------- Panoramica, case study, loading ---------- */
[data-skin="pixel"] .ov-kicker { border-radius: 0; clip-path: var(--pix); box-shadow: none; color: var(--on-pastel); font: 700 12px/1 var(--f-mono); letter-spacing: .14em; }
[data-skin="pixel"] .ov-name { font-family: var(--f-pixel); font-weight: 400; font-size: clamp(60px, 11vw, 148px); line-height: .88; letter-spacing: .01em; text-shadow: 0 6px 0 color-mix(in srgb, var(--yl) 55%, transparent); }
[data-skin="pixel"] .ov-role { font: 400 12px/1.4 var(--f-mono); letter-spacing: .06em; }
[data-skin="pixel"] .ov-h { font: 400 16px/1 var(--f-mono); letter-spacing: .1em; }
[data-skin="pixel"] .ov-txt b { font: 400 27px/1 var(--f-pixel); letter-spacing: .01em; }
[data-skin="pixel"] .cs-title, [data-skin="pixel"] .cs-h { font-family: var(--f-pixel); font-weight: 400; letter-spacing: .01em; }
[data-skin="pixel"] .cs-kicker, [data-skin="pixel"] .cs-sub, [data-skin="pixel"] .cs-steps dt { font-family: var(--f-mono); font-weight: 400; }
[data-skin="pixel"] .ld-logo { font-family: var(--f-pixel); font-weight: 400; font-size: clamp(84px, 20vw, 160px); letter-spacing: .01em; }
[data-skin="pixel"] .ld-sub, [data-skin="pixel"] .ld-row { font: 400 12px/1 var(--f-mono); letter-spacing: .1em; }
[data-skin="pixel"] .ld-bar { height: 14px; border-radius: 0; }
[data-skin="pixel"] .ld-bar i { border-radius: 0; background: repeating-linear-gradient(90deg, var(--pk) 0 8px, transparent 8px 11px); }
[data-skin="pixel"] .ld-grid { background: conic-gradient(from 270deg at 3px 3px, var(--grid-major) 25%, transparent 0) center / 40px 40px; }

/* ---------- Christian: sticky notes in 8-bit, a pixel dashed line ---------- */
[data-skin="pixel"] .live-note { font: 400 22px/1 var(--f-pixel); letter-spacing: .02em; }
[data-skin="pixel"] .live-name b { font: 400 8px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
[data-skin="pixel"] .live-link { height: 3px; margin-top: -1px; border-top: 0; background: repeating-linear-gradient(90deg, var(--live) 0 6px, transparent 6px 11px); }
[data-skin="pixel"] .live-link::after { right: -5px; top: -4px; width: 11px; height: 11px; border-radius: 0; box-shadow: 0 0 0 2px var(--line); }
[data-skin="pixel"] .live-edge b { font: 400 16px/1 var(--f-mono); }

/* ---------- The style panel ---------- */
[data-skin="pixel"] .sl-h { font: 400 8px/1 var(--f-mono); letter-spacing: .1em; }
[data-skin="pixel"] .sl-btn[aria-pressed="true"] { color: var(--on-pastel); }

@media (min-width: 681px) {
  [data-skin="pixel"] .logo-name { font-size: 28px; }
  [data-skin="pixel"] .ins-title { font-size: 50px; }
  [data-skin="pixel"] .toast strong { font-size: 22px; }
  [data-skin="pixel"] .toast.achievement strong { font-size: 27px; }
}
@media (max-width: 680px) {
  [data-skin="pixel"] .zone-title { font-size: 80px; }
  [data-skin="pixel"] .logo-name { font-size: 21px; }
  [data-skin="pixel"] .ins-title { font-size: 36px; }
  [data-skin="pixel"] .mini-label { font-size: 9.5px; }
}