:root {
  /* token reka bentuk Tepi Bendang */
  --surface: #f3efe2;
  --surface-2: #ebe6d6;
  --surface-3: #e2dcc7;
  --ink: #222b22;
  --ink-2: #3d4638;
  --muted: #55604f;
  --line: #c9c6b4;
  --line-strong: #b0ab93;
  --accent: #9c4a12;
  --accent-ink: #8a3f0c;
  --accent-fill: #9c4a12;
  --accent-on: #fbf6ea;
  --accent-soft: #efdfc9;

  /* radius bervariasi: ketat dalam, lembut luar */
  --r-1: 3px;
  --r-2: 5px;
  --r-3: 8px;
  --r-4: 13px;

  /* skala spacing sistematik */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 36px;

  /* shadow bertinta ikut hue latar, bukan hitam tulen */
  --sh-1: 0 1px 2px #222b2222;
  --sh-2: 0 3px 10px #222b2226;
  --sh-3: 0 10px 30px #222b2233;

  --surface-overlay: #f3efe2f2;
  --scene-bg: #d6e0d6;

  --sh-1: 0 1px 2px #222b2222;
  --sh-2: 0 3px 10px #222b2226;
  --sh-3: 0 10px 30px #222b2233;
  --sh-4: 0 18px 50px #222b2240;

  /* tipografi */
  --font-body: "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;

  /* gerakan */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --ease: cubic-bezier(.2, .7, .3, 1);

  /* z-index bersih */
  --z-scene: 0;
  --z-chrome: 1;
  --z-panel: 3;
  --z-overlay: 5;
  --z-skip: 6;
}

/* font paparan dengan sandaran penuh.
   URL gstatic ialah versi berversi (v38): Google MEMBUANG versi lama, dan
   URL yang mati menyebabkan ralat konsol serta tajuk jatuh ke font sandaran.
   Kalau ralat 404 gstatic muncul lagi, jana semula dari
   https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,100..900 */
@font-face {
  font-family: "Fraunces";
  src: local("Fraunces"),
       url("https://fonts.gstatic.com/s/fraunces/v38/6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxC9TeA.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

h1, h2 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  letter-spacing: -.012em;
  line-height: 1.12;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
  line-height: 1.62;
}

output {
  font-variant-numeric: tabular-nums;
}

.title h1 {
  font-variation-settings: "SOFT" 20, "WONK" 1;
}

.note, .help {
  max-width: 46ch;
}

/* grain halus supaya permukaan tak rata seperti plastik */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}