@font-face {
  font-family: 'Sinau Source Sans';
  src: url('sinau-media/source-sans-pro-regular.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Sinau Source Sans';
  src: url('sinau-media/source-sans-pro-bold.otf') format('opentype');
  font-weight: 600 900;
  font-display: swap;
}
:root {
  color-scheme: light;
  --sinau-font: 'Sinau Source Sans', 'Source Sans Pro', 'Source Sans 3', system-ui, sans-serif;
  --sinau-primary: #304ffe;
  --sinau-accent: #304bdb;
  --sinau-ink: #09101d;
  --sinau-muted: #516073;
  --sinau-canvas: #f4f6f9;
  --sinau-surface: #fff;
  --sinau-raised: #f4f6f9;
  --sinau-line: #d9dfe9;
  --sinau-soft: #edf0ff;
  --cream: var(--sinau-canvas);
  --paper: var(--sinau-surface);
  --ink: var(--sinau-ink);
  --muted: var(--sinau-muted);
  --line: var(--sinau-line);
  --sage: var(--sinau-soft);
  --gold: var(--sinau-accent);
  background: var(--sinau-canvas);
  color: var(--sinau-ink);
  font-family: var(--sinau-font);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --sinau-accent: #a6b1ff;
  --sinau-ink: #f4f6fa;
  --sinau-muted: #adb6c4;
  --sinau-canvas: #0d0d0d;
  --sinau-surface: #141414;
  --sinau-raised: #252525;
  --sinau-line: #383b44;
  --sinau-soft: #242948;
  --red: #ff9c98;
}
button[data-theme-toggle] {
  width: 44px;
  height: 44px;
  flex: none;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--sinau-line);
  background: var(--sinau-surface);
  color: var(--sinau-ink);
  border-radius: 50%;
  padding: 0;
}
button[data-theme-toggle]::before {
  content: '';
  width: 20px;
  height: 20px;
  background: currentColor;
  mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M20.5 13.4a8.7 8.7 0 0 1-9.9-9.9 8.8 8.8 0 1 0 9.9 9.9Z'/%3E%3C/svg%3E");
}
[data-theme="dark"] button[data-theme-toggle]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2m0 16v2M2 12h2m16 0h2M5 5l1.4 1.4m11.2 11.2L19 19M19 5l-1.4 1.4M6.4 17.6 5 19'/%3E%3C/svg%3E");
}
button[data-theme-toggle]:hover { background: var(--sinau-soft); color: var(--sinau-accent); }
:focus-visible { outline: 3px solid var(--sinau-accent); outline-offset: 3px; }
body #toast { background: var(--sinau-ink); color: var(--sinau-surface); border-radius: 12px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
.skip {
  background: var(--sinau-surface);
  color: var(--sinau-accent);
  border-radius: 0 0 10px 10px;
}