/* Dasar: variabel warna (tema terang/gelap), reset, dan kelas umum. Ubah warna/font di sini. */
:root {
  --accent: #F26B21;
  --accent-rgb: 242, 107, 33;
  --accent2: #1F7A74;
  --accent2-rgb: 31, 122, 116;

  --paper: #EDF1EF;
  --surface: #F9FBFA;
  --surface-2: #E1E8E5;
  --ink: #0E1B1F;
  --ink-2: #4A5D63;
  --line: #C9D4D0;
  --block-bg: #0E1B1F;
  --block-fg: #EEF3F1;
  --accent-text: color-mix(in srgb, var(--accent) 70%, #000);
  --accent2-text: var(--accent2);
  --ok: color-mix(in srgb, var(--accent2) 55%, #fff);

  --display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --body: 'Instrument Sans', 'Segoe UI', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --radius: 20px;
  --shadow: 0 1px 0 rgba(14, 27, 31, .04), 0 24px 48px -28px rgba(14, 27, 31, .38);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --paper: #0B1417;
  --surface: #111D21;
  --surface-2: #182A2E;
  --ink: #EAF0EE;
  --ink-2: #92A5AB;
  --line: #233539;
  --block-bg: #16282C;
  --block-fg: #EAF0EE;
  --accent-text: var(--accent);
  --accent2-text: color-mix(in srgb, var(--accent2) 55%, #fff);
  --shadow: 0 1px 0 rgba(255, 255, 255, .03), 0 24px 48px -28px rgba(0, 0, 0, .8);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.wrap { width: min(1120px, 100% - 48px); margin-inline: auto; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 8px; z-index: 100; }
.skip:focus { top: 12px; }