:root {
  --bg-hi: #f5a46b; --bg-lo: #e8845a;
  --dither-a: .06; --dither-b: .10;
  --win: #e8e8e8; --win-dark: #cfcfcf; --ink: #1a1a1a;
  /* permukaan kartu — dipisah dari --win supaya bisa dibalik di mode gelap */
  --surface: #ffffff; --surface-soft: #fffbe8;
  --tl-red: #f0713d; --tl-yellow: #f5d93d; --tl-green: #9dc24c;
  --font-pixel: 'Silkscreen', monospace;
  --font-term: 'VT323', monospace;
  --font-mono: 'JetBrains Mono', monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: var(--font-mono);
  color: var(--ink);
  /* layer 1: dither speckle · layer 2: motif interests (paw, ikan, egg, heart, sparkle) · layer 3: gradasi */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect x='0' y='0' width='1' height='1' fill='%23000' fill-opacity='.06'/%3E%3Crect x='4' y='2' width='1' height='1' fill='%23000' fill-opacity='.06'/%3E%3Crect x='2' y='5' width='1' height='1' fill='%23fff' fill-opacity='.10'/%3E%3Crect x='6' y='6' width='1' height='1' fill='%23000' fill-opacity='.06'/%3E%3C/svg%3E") repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='112'%3E%3Cg fill='%23000' fill-opacity='.05'%3E%3Crect x='12' y='10' width='4' height='4'/%3E%3Crect x='18' y='8' width='4' height='4'/%3E%3Crect x='24' y='10' width='4' height='4'/%3E%3Crect x='14' y='16' width='12' height='8'/%3E%3Crect x='60' y='22' width='14' height='8'/%3E%3Crect x='74' y='18' width='4' height='16'/%3E%3Crect x='78' y='20' width='2' height='4'/%3E%3Crect x='78' y='28' width='2' height='4'/%3E%3Crect x='82' y='66' width='12' height='4'/%3E%3Crect x='80' y='70' width='16' height='12'/%3E%3Crect x='82' y='82' width='12' height='4'/%3E%3Crect x='16' y='62' width='4' height='4'/%3E%3Crect x='24' y='62' width='4' height='4'/%3E%3Crect x='14' y='66' width='16' height='6'/%3E%3Crect x='18' y='72' width='8' height='4'/%3E%3Crect x='20' y='76' width='4' height='2'/%3E%3C/g%3E%3Cg fill='%23fff' fill-opacity='.09'%3E%3Crect x='48' y='84' width='4' height='12'/%3E%3Crect x='44' y='88' width='12' height='4'/%3E%3Crect x='84' y='72' width='8' height='6'/%3E%3Crect x='92' y='8' width='4' height='4'/%3E%3Crect x='36' y='42' width='2' height='2'/%3E%3C/g%3E%3C/svg%3E") repeat,
    linear-gradient(180deg, var(--bg-hi) 0%, var(--bg-lo) 100%);
  image-rendering: pixelated;
  overflow: hidden;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='18' viewBox='0 0 12 18'%3E%3Cpath d='M0 0h2v2H0zM0 2h4v2H0zM0 4h6v2H0zM0 6h8v2H0zM0 8h10v2H0zM0 10h12v2H0zM0 12h5v2H0zM5 12h3v4H5z' fill='%23000'/%3E%3C/svg%3E") 0 0, auto;
}
#scene {
  height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 18px; padding: 24px 16px;
}
@media (max-width: 640px) {
  #scene { padding: 12px 8px; gap: 12px; }
}
/* Kursor tangan pixel untuk apa pun yang bisa diklik, supaya jelas mana yang
   interaktif. Titik tunjuknya di ujung telunjuk (2,0). */
a[href], button, summary, [role="button"], label[for], select,
.joker, .desk-item, .file, .apt-door, .wr-opt, .launch-btn, .dock-item {
  cursor: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='16'%20shape-rendering='crispEdges'><rect%20x='2'%20y='0'%20width='2'%20height='1'%20fill='%23ffffff'/><rect%20x='1'%20y='1'%20width='1'%20height='1'%20fill='%23ffffff'/><rect%20x='2'%20y='1'%20width='2'%20height='1'%20fill='%231a1a1a'/><rect%20x='4'%20y='1'%20width='1'%20height='1'%20fill='%23ffffff'/><rect%20x='1'%20y='2'%20width='1'%20height='1'%20fill='%23ffffff'/><rect%20x='2'%20y='2'%20width='2'%20height='1'%20fill='%231a1a1a'/><rect%20x='4'%20y='2'%20width='1'%20height='1'%20fill='%23ffffff'/><rect%20x='1'%20y='3'%20width='1'%20height='1'%20fill='%23ffffff'/><rect%20x='2'%20y='3'%20width='2'%20height='1'%20fill='%231a1a1a'/><rect%20x='4'%20y='3'%20width='1'%20height='1'%20fill='%23ffffff'/><rect%20x='1'%20y='4'%20width='1'%20height='1'%20fill='%23ffffff'/><rect%20x='2'%20y='4'%20width='2'%20height='1'%20fill='%231a1a1a'/><rect%20x='4'%20y='4'%20width='3'%20height='1'%20fill='%23ffffff'/><rect%20x='1'%20y='5'%20width='1'%20height='1'%20fill='%23ffffff'/><rect%20x='2'%20y='5'%20width='2'%20height='1'%20fill='%231a1a1a'/><rect%20x='4'%20y='5'%20width='1'%20height='1'%20fill='%23ffffff'/><rect%20x='5'%20y='5'%20width='2'%20height='1'%20fill='%231a1a1a'/><rect%20x='7'%20y='5'%20width='2'%20height='1'%20fill='%23ffffff'/><rect%20x='1'%20y='6'%20width='1'%20height='1'%20fill='%23ffffff'/><rect%20x='2'%20y='6'%20width='2'%20height='1'%20fill='%231a1a1a'/><rect%20x='4'%20y='6'%20width='1'%20height='1'%20fill='%23ffffff'/><rect%20x='5'%20y='6'%20width='2'%20height='1'%20fill='%231a1a1a'/><rect%20x='7'%20y='6'%20width='1'%20height='1'%20fill='%23ffffff'/><rect%20x='8'%20y='6'%20width='2'%20height='1'%20fill='%231a1a1a'/><rect%20x='10'%20y='6'%20width='1'%20height='1'%20fill='%23ffffff'/><rect%20x='1'%20y='7'%20width='1'%20height='1'%20fill='%23ffffff'/><rect%20x='2'%20y='7'%20width='2'%20height='1'%20fill='%231a1a1a'/><rect%20x='4'%20y='7'%20width='1'%20height='1'%20fill='%23ffffff'/><rect%20x='5'%20y='7'%20width='2'%20height='1'%20fill='%231a1a1a'/><rect%20x='7'%20y='7'%20width='1'%20height='1'%20fill='%23ffffff'/><rect%20x='8'%20y='7'%20width='2'%20height='1'%20fill='%231a1a1a'/><rect%20x='10'%20y='7'%20width='1'%20height='1'%20fill='%23ffffff'/><rect%20x='0'%20y='8'%20width='2'%20height='1'%20fill='%23ffffff'/><rect%20x='2'%20y='8'%20width='8'%20height='1'%20fill='%231a1a1a'/><rect%20x='10'%20y='8'%20width='1'%20height='1'%20fill='%23ffffff'/><rect%20x='0'%20y='9'%20width='1'%20height='1'%20fill='%23ffffff'/><rect%20x='1'%20y='9'%20width='9'%20height='1'%20fill='%231a1a1a'/><rect%20x='10'%20y='9'%20width='1'%20height='1'%20fill='%23ffffff'/><rect%20x='0'%20y='10'%20width='1'%20height='1'%20fill='%23ffffff'/><rect%20x='1'%20y='10'%20width='9'%20height='1'%20fill='%231a1a1a'/><rect%20x='10'%20y='10'%20width='1'%20height='1'%20fill='%23ffffff'/><rect%20x='1'%20y='11'%20width='1'%20height='1'%20fill='%23ffffff'/><rect%20x='2'%20y='11'%20width='8'%20height='1'%20fill='%231a1a1a'/><rect%20x='10'%20y='11'%20width='1'%20height='1'%20fill='%23ffffff'/><rect%20x='1'%20y='12'%20width='1'%20height='1'%20fill='%23ffffff'/><rect%20x='2'%20y='12'%20width='7'%20height='1'%20fill='%231a1a1a'/><rect%20x='9'%20y='12'%20width='1'%20height='1'%20fill='%23ffffff'/><rect%20x='2'%20y='13'%20width='1'%20height='1'%20fill='%23ffffff'/><rect%20x='3'%20y='13'%20width='6'%20height='1'%20fill='%231a1a1a'/><rect%20x='9'%20y='13'%20width='1'%20height='1'%20fill='%23ffffff'/><rect%20x='2'%20y='14'%20width='1'%20height='1'%20fill='%23ffffff'/><rect%20x='3'%20y='14'%20width='6'%20height='1'%20fill='%231a1a1a'/><rect%20x='9'%20y='14'%20width='1'%20height='1'%20fill='%23ffffff'/><rect%20x='3'%20y='15'%20width='7'%20height='1'%20fill='%23ffffff'/></svg>") 2 0, pointer;
}
/* di permukaan gelap dipakai versi bergaris terang */
.skin-spotify .appwin-body a[href], .skin-spotify .appwin-body button,
.terminal-host a[href], .terminal-host button,
.vs-code button, .ij-code button, .xc-main button, .dk-logs button,
.gh-wrap a[href], .gh-wrap button, .y2k a[href], .y2k button, .apt-ground button {
  cursor: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='16'%20shape-rendering='crispEdges'><rect%20x='2'%20y='0'%20width='2'%20height='1'%20fill='%23000000'/><rect%20x='1'%20y='1'%20width='1'%20height='1'%20fill='%23000000'/><rect%20x='2'%20y='1'%20width='2'%20height='1'%20fill='%23ffffff'/><rect%20x='4'%20y='1'%20width='1'%20height='1'%20fill='%23000000'/><rect%20x='1'%20y='2'%20width='1'%20height='1'%20fill='%23000000'/><rect%20x='2'%20y='2'%20width='2'%20height='1'%20fill='%23ffffff'/><rect%20x='4'%20y='2'%20width='1'%20height='1'%20fill='%23000000'/><rect%20x='1'%20y='3'%20width='1'%20height='1'%20fill='%23000000'/><rect%20x='2'%20y='3'%20width='2'%20height='1'%20fill='%23ffffff'/><rect%20x='4'%20y='3'%20width='1'%20height='1'%20fill='%23000000'/><rect%20x='1'%20y='4'%20width='1'%20height='1'%20fill='%23000000'/><rect%20x='2'%20y='4'%20width='2'%20height='1'%20fill='%23ffffff'/><rect%20x='4'%20y='4'%20width='3'%20height='1'%20fill='%23000000'/><rect%20x='1'%20y='5'%20width='1'%20height='1'%20fill='%23000000'/><rect%20x='2'%20y='5'%20width='2'%20height='1'%20fill='%23ffffff'/><rect%20x='4'%20y='5'%20width='1'%20height='1'%20fill='%23000000'/><rect%20x='5'%20y='5'%20width='2'%20height='1'%20fill='%23ffffff'/><rect%20x='7'%20y='5'%20width='2'%20height='1'%20fill='%23000000'/><rect%20x='1'%20y='6'%20width='1'%20height='1'%20fill='%23000000'/><rect%20x='2'%20y='6'%20width='2'%20height='1'%20fill='%23ffffff'/><rect%20x='4'%20y='6'%20width='1'%20height='1'%20fill='%23000000'/><rect%20x='5'%20y='6'%20width='2'%20height='1'%20fill='%23ffffff'/><rect%20x='7'%20y='6'%20width='1'%20height='1'%20fill='%23000000'/><rect%20x='8'%20y='6'%20width='2'%20height='1'%20fill='%23ffffff'/><rect%20x='10'%20y='6'%20width='1'%20height='1'%20fill='%23000000'/><rect%20x='1'%20y='7'%20width='1'%20height='1'%20fill='%23000000'/><rect%20x='2'%20y='7'%20width='2'%20height='1'%20fill='%23ffffff'/><rect%20x='4'%20y='7'%20width='1'%20height='1'%20fill='%23000000'/><rect%20x='5'%20y='7'%20width='2'%20height='1'%20fill='%23ffffff'/><rect%20x='7'%20y='7'%20width='1'%20height='1'%20fill='%23000000'/><rect%20x='8'%20y='7'%20width='2'%20height='1'%20fill='%23ffffff'/><rect%20x='10'%20y='7'%20width='1'%20height='1'%20fill='%23000000'/><rect%20x='0'%20y='8'%20width='2'%20height='1'%20fill='%23000000'/><rect%20x='2'%20y='8'%20width='8'%20height='1'%20fill='%23ffffff'/><rect%20x='10'%20y='8'%20width='1'%20height='1'%20fill='%23000000'/><rect%20x='0'%20y='9'%20width='1'%20height='1'%20fill='%23000000'/><rect%20x='1'%20y='9'%20width='9'%20height='1'%20fill='%23ffffff'/><rect%20x='10'%20y='9'%20width='1'%20height='1'%20fill='%23000000'/><rect%20x='0'%20y='10'%20width='1'%20height='1'%20fill='%23000000'/><rect%20x='1'%20y='10'%20width='9'%20height='1'%20fill='%23ffffff'/><rect%20x='10'%20y='10'%20width='1'%20height='1'%20fill='%23000000'/><rect%20x='1'%20y='11'%20width='1'%20height='1'%20fill='%23000000'/><rect%20x='2'%20y='11'%20width='8'%20height='1'%20fill='%23ffffff'/><rect%20x='10'%20y='11'%20width='1'%20height='1'%20fill='%23000000'/><rect%20x='1'%20y='12'%20width='1'%20height='1'%20fill='%23000000'/><rect%20x='2'%20y='12'%20width='7'%20height='1'%20fill='%23ffffff'/><rect%20x='9'%20y='12'%20width='1'%20height='1'%20fill='%23000000'/><rect%20x='2'%20y='13'%20width='1'%20height='1'%20fill='%23000000'/><rect%20x='3'%20y='13'%20width='6'%20height='1'%20fill='%23ffffff'/><rect%20x='9'%20y='13'%20width='1'%20height='1'%20fill='%23000000'/><rect%20x='2'%20y='14'%20width='1'%20height='1'%20fill='%23000000'/><rect%20x='3'%20y='14'%20width='6'%20height='1'%20fill='%23ffffff'/><rect%20x='9'%20y='14'%20width='1'%20height='1'%20fill='%23000000'/><rect%20x='3'%20y='15'%20width='7'%20height='1'%20fill='%23000000'/></svg>") 2 0, pointer;
}
button:disabled, a:not([href]) { cursor: inherit; }
/* kursor pixel versi terang untuk permukaan gelap (Spotify, terminal,
   editor kode, log) — versi hitam tidak terlihat di sana */
.skin-spotify .appwin-body,
.terminal-host,
.vs-code, .ij-code, .xc-main, .dk-logs, .gh-wrap,
.vs-tree, .vs-results, .vs-scm, .vs-search, .vs-activity,
#boot {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='18' viewBox='0 0 12 18'%3E%3Cpath d='M0 0h2v2H0zM0 2h4v2H0zM0 4h6v2H0zM0 6h8v2H0zM0 8h10v2H0zM0 10h12v2H0zM0 12h5v2H0zM5 12h3v4H5z' fill='%23ffffff'/%3E%3C/svg%3E") 0 0, auto;
}
:focus-visible { outline: 3px solid var(--ink); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@keyframes catbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.boot-cat svg, .hero-art svg { animation: catbob 1.2s steps(2) infinite; }
#boot { position: fixed; inset: 0; z-index: 50; background: #141414; display: grid; place-items: center; }
#boot[hidden] { display: none; }
.boot-inner { text-align: center; }
.boot-cat svg { image-rendering: pixelated; }
.boot-title { font-family: var(--font-pixel); color: var(--win); margin: 14px 0 4px; }
.boot-sub { font-family: var(--font-mono); font-size: 10px; color: #7a7a7a; margin-bottom: 10px; }
.boot-post {
  font-family: var(--font-mono); font-size: 11px; line-height: 1.6;
  color: #33ff66; text-align: left; min-height: 66px; margin-bottom: 12px;
  white-space: pre;
}
.boot-bar { display: inline-flex; gap: 4px; border: 3px solid var(--win); padding: 4px; }
.boot-bar i { display: inline-block; width: 16px; height: 12px; background: transparent; }
.boot-bar i.on { background: var(--tl-green); }

/* ── Tema malam: dipasang app.js antara pukul 20.00 dan 04.59 ─────── */
:root.night {
  --bg-hi: #2f2f52; --bg-lo: #14142a;
  --dither-a: .18; --dither-b: .05;
}
:root.night body, :root.dark body {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect x='0' y='0' width='1' height='1' fill='%23000' fill-opacity='.18'/%3E%3Crect x='4' y='2' width='1' height='1' fill='%23000' fill-opacity='.18'/%3E%3Crect x='2' y='5' width='1' height='1' fill='%23fff' fill-opacity='.05'/%3E%3Crect x='6' y='6' width='1' height='1' fill='%23000' fill-opacity='.18'/%3E%3C/svg%3E") repeat,
    url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='128'%20height='112'><g%20fill='%23fff'%20fill-opacity='.13'><rect%20x='20'%20y='14'%20width='4'%20height='4'/><rect%20x='16'%20y='18'%20width='12'%20height='4'/><rect%20x='20'%20y='22'%20width='4'%20height='4'/><rect%20x='70'%20y='8'%20width='3'%20height='3'/><rect%20x='96'%20y='30'%20width='2'%20height='2'/><rect%20x='44'%20y='52'%20width='2'%20height='2'/><rect%20x='108'%20y='72'%20width='3'%20height='3'/><rect%20x='12'%20y='88'%20width='2'%20height='2'/></g><g%20fill='%23fff'%20fill-opacity='.07'><rect%20x='78'%20y='54'%20width='16'%20height='16'/><rect%20x='84'%20y='50'%20width='10'%20height='4'/><rect%20x='84'%20y='70'%20width='10'%20height='4'/><rect%20x='60'%20y='86'%20width='4'%20height='4'/><rect%20x='66'%20y='82'%20width='4'%20height='4'/><rect%20x='72'%20y='78'%20width='4'%20height='4'/><rect%20x='28'%20y='60'%20width='4'%20height='4'/><rect%20x='34'%20y='60'%20width='4'%20height='4'/><rect%20x='26'%20y='66'%20width='14'%20height='6'/><rect%20x='30'%20y='72'%20width='6'%20height='3'/></g><g%20fill='%230b0b1a'%20fill-opacity='.55'><rect%20x='88'%20y='54'%20width='10'%20height='16'/></g></svg>") repeat,
    linear-gradient(180deg, var(--bg-hi) 0%, var(--bg-lo) 100%);
}
/* jendela tetap terang — layar menyala di ruangan gelap */
:root.night #window { box-shadow: 10px 10px 0 rgba(0, 0, 0, .45); }

/* ── Mode gelap ──────────────────────────────────────────────────────
   Cukup membalik tiga token warna: --ink jadi terang, --win dan --surface
   jadi gelap. Karena --ink dipakai untuk teks DAN garis tepi, seluruh
   chrome situs ikut terbalik tanpa aturan tambahan per komponen.
   Jendela aplikasi (Excel, VS Code, Spotify, dll) sengaja TIDAK ikut —
   mereka meniru tampilan aplikasi aslinya. */
:root.dark {
  --win: #23232b; --win-dark: #16161c; --ink: #e9e9ee;
  --surface: #2d2d38; --surface-soft: #3a3626;
  --bg-hi: #2f2f52; --bg-lo: #14142a;
  --dither-a: .18; --dither-b: .05;
}
#dock, :root.dark #dock { }
:root.dark #dock { background: rgba(35, 35, 43, .88); }
/* Ikon pixel digambar dengan garis tepi hitam, jadi di latar gelap dia hilang.
   Tombol titlebar dan ikon judul bagian dikasih alas terang supaya tetap kebaca. */
:root.dark .ext-btn { background: #d5d5dc; }
:root.dark .ext-btn:hover { background: #eaeaf0; }
:root.dark .h2i svg { background: #d5d5dc; padding: 1px; }
/* Beberapa elemen sengaja memakai warna tinta sebagai LATAR (papan nama
   apartemen, papan keterangan, roti panggang). Karena --ink dibalik jadi
   terang, mereka ikut terbalik dan jadi terlalu mencolok. Dikunci gelap. */
:root.dark .apt-roof, :root.dark .apt-ground, :root.dark .flat-read,
:root.dark .toast, :root.dark .apt-bubble::before {
  background: #14141a; color: #e9e9ee;
}
:root.dark .apt-door:hover { background: #33333f; }
:root.dark .tama { background: #3a3a45; }
:root.dark .ext-btn:hover { background: #3a3a46; }
:root.dark .tab:not([aria-selected="true"]) { color: #b9b9c4; }
:root.dark .flat-stage { background: #2d2d38; }
:root.dark .file:hover, :root.dark .launch-btn:hover, :root.dark .wr-opt:hover { background: #33333f; }
/* kursor tangan versi terang di permukaan gelap */
:root.dark a[href], :root.dark button, :root.dark summary, :root.dark [role="button"] {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='16' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='2' height='1' fill='%23000000'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23000000'/%3E%3Crect x='2' y='1' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='4' y='1' width='1' height='1' fill='%23000000'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%23000000'/%3E%3Crect x='2' y='2' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='4' y='2' width='1' height='1' fill='%23000000'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%23000000'/%3E%3Crect x='2' y='3' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='4' y='3' width='1' height='1' fill='%23000000'/%3E%3Crect x='1' y='4' width='1' height='1' fill='%23000000'/%3E%3Crect x='2' y='4' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='4' y='4' width='3' height='1' fill='%23000000'/%3E%3Crect x='1' y='5' width='1' height='1' fill='%23000000'/%3E%3Crect x='2' y='5' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='4' y='5' width='1' height='1' fill='%23000000'/%3E%3Crect x='5' y='5' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='7' y='5' width='2' height='1' fill='%23000000'/%3E%3Crect x='0' y='6' width='2' height='1' fill='%23000000'/%3E%3Crect x='2' y='6' width='8' height='1' fill='%23ffffff'/%3E%3Crect x='10' y='6' width='1' height='1' fill='%23000000'/%3E%3Crect x='0' y='7' width='1' height='1' fill='%23000000'/%3E%3Crect x='1' y='7' width='9' height='1' fill='%23ffffff'/%3E%3Crect x='10' y='7' width='1' height='1' fill='%23000000'/%3E%3Crect x='0' y='8' width='1' height='1' fill='%23000000'/%3E%3Crect x='1' y='8' width='9' height='1' fill='%23ffffff'/%3E%3Crect x='10' y='8' width='1' height='1' fill='%23000000'/%3E%3Crect x='1' y='9' width='1' height='1' fill='%23000000'/%3E%3Crect x='2' y='9' width='8' height='1' fill='%23ffffff'/%3E%3Crect x='10' y='9' width='1' height='1' fill='%23000000'/%3E%3Crect x='1' y='10' width='1' height='1' fill='%23000000'/%3E%3Crect x='2' y='10' width='7' height='1' fill='%23ffffff'/%3E%3Crect x='9' y='10' width='1' height='1' fill='%23000000'/%3E%3Crect x='2' y='11' width='1' height='1' fill='%23000000'/%3E%3Crect x='3' y='11' width='6' height='1' fill='%23ffffff'/%3E%3Crect x='9' y='11' width='1' height='1' fill='%23000000'/%3E%3Crect x='2' y='12' width='1' height='1' fill='%23000000'/%3E%3Crect x='3' y='12' width='6' height='1' fill='%23ffffff'/%3E%3Crect x='9' y='12' width='1' height='1' fill='%23000000'/%3E%3Crect x='3' y='13' width='7' height='1' fill='%23000000'/%3E%3C/svg%3E") 2 0, pointer;
}

/* ── Scrollbar pixel ─────────────────────────────────────────────────
   Track dan thumb digambar kotak dengan garis tepi tebal, sama seperti
   komponen lain. Panah atas/bawah memakai SVG piksel, bukan bentuk bulat
   bawaan peramban. Warnanya lewat token jadi ikut mode gelap. */
* { scrollbar-width: auto; scrollbar-color: var(--ink) var(--win-dark); }
::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track {
  background: var(--win-dark);
  border-left: 3px solid var(--ink);
  background-image: repeating-linear-gradient(45deg,
    rgba(0, 0, 0, .07) 0 2px, transparent 2px 4px);
}
::-webkit-scrollbar-corner { background: var(--win-dark); }
::-webkit-scrollbar-thumb {
  background: var(--ink);
  border: 3px solid var(--win-dark);
  box-shadow: inset 0 0 0 2px var(--win);
}
::-webkit-scrollbar-thumb:hover { box-shadow: inset 0 0 0 2px var(--tl-yellow); }
/* tombol panah di ujung track */
::-webkit-scrollbar-button:single-button {
  background: var(--win); border: 3px solid var(--ink);
  height: 16px; width: 16px; background-repeat: no-repeat; background-position: center;
}
::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20shape-rendering='crispEdges'><rect%20x='5'%20y='3'%20width='2'%20height='1'%20fill='%231a1a1a'/><rect%20x='4'%20y='4'%20width='4'%20height='1'%20fill='%231a1a1a'/><rect%20x='3'%20y='5'%20width='6'%20height='1'%20fill='%231a1a1a'/><rect%20x='2'%20y='6'%20width='8'%20height='1'%20fill='%231a1a1a'/></svg>");
}
::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20shape-rendering='crispEdges'><rect%20x='2'%20y='4'%20width='8'%20height='1'%20fill='%231a1a1a'/><rect%20x='3'%20y='5'%20width='6'%20height='1'%20fill='%231a1a1a'/><rect%20x='4'%20y='6'%20width='4'%20height='1'%20fill='%231a1a1a'/><rect%20x='5'%20y='7'%20width='2'%20height='1'%20fill='%231a1a1a'/></svg>");
}
::-webkit-scrollbar-button:horizontal { display: none; }
/* di mode gelap panahnya perlu tinta terang */
:root.dark ::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20shape-rendering='crispEdges'><rect%20x='5'%20y='3'%20width='2'%20height='1'%20fill='%23e9e9ee'/><rect%20x='4'%20y='4'%20width='4'%20height='1'%20fill='%23e9e9ee'/><rect%20x='3'%20y='5'%20width='6'%20height='1'%20fill='%23e9e9ee'/><rect%20x='2'%20y='6'%20width='8'%20height='1'%20fill='%23e9e9ee'/></svg>");
}
:root.dark ::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20shape-rendering='crispEdges'><rect%20x='2'%20y='4'%20width='8'%20height='1'%20fill='%23e9e9ee'/><rect%20x='3'%20y='5'%20width='6'%20height='1'%20fill='%23e9e9ee'/><rect%20x='4'%20y='6'%20width='4'%20height='1'%20fill='%23e9e9ee'/><rect%20x='5'%20y='7'%20width='2'%20height='1'%20fill='%23e9e9ee'/></svg>");
}