/* Miha UI preset "sumniki" (transkripcija 45e2f22e, miha-ui/dist/sumniki/tokens.css), copied by scripts/miha_ui.py. Don't edit: change the preset. */
/* Šumniki — generated from tokens.json */

:root, [data-theme="light"] {
  --background: #fbf8f5;
  --foreground: #0d0d0d;
  --surface-secondary: #ffffff;
  --surface-tertiary: #f3f3f3;
  --surface-elevated: #ffffff;
  --card: #ffffff;
  --card-foreground: var(--foreground);
  --popover: var(--surface-elevated);
  --popover-foreground: var(--foreground);
  --primary: #b8341f;
  --primary-hover: #a7210b;
  --primary-foreground: #ffffff;
  --secondary: rgba(13, 13, 13, 0.08);
  --secondary-hover: rgba(13, 13, 13, 0.12);
  --secondary-foreground: var(--foreground);
  --muted: #ededed;
  --muted-foreground: #5d5d5d;
  --well: #ededed;
  --track: #dfdfdf;
  --subtle-foreground: #8f8f8f;
  --accent: rgba(13, 13, 13, 0.08);
  --accent-foreground: var(--foreground);
  --hover: rgba(13, 13, 13, 0.05);
  --selected: rgba(13, 13, 13, 0.08);
  --border: rgba(13, 13, 13, 0.1);
  --border-subtle: rgba(13, 13, 13, 0.05);
  --border-strong: rgba(13, 13, 13, 0.15);
  --input: rgba(13, 13, 13, 0.16);
  --input-hover: rgba(13, 13, 13, 0.25);
  --ring: #c9331f;
  --brand: #d6402c;
  --brand-hover: #b8341f;
  --brand-strong: #b8341f;
  --brand-strong-hover: #9c2b19;
  --brand-foreground: #ffffff;
  --brand-soft: #fdebe6;
  --brand-text: #c9331f;
  --destructive: #e02e2a;
  --destructive-hover: #ba2623;
  --destructive-foreground: #ffffff;
  --destructive-soft: rgba(250, 66, 62, 0.08);
  --destructive-text: #ba2623;
  --success: #008635;
  --success-foreground: #ffffff;
  --success-soft: rgba(4, 184, 76, 0.08);
  --success-text: #00692a;
  --warning: #ffc300;
  --warning-foreground: #0d0d0d;
  --warning-soft: rgba(255, 195, 0, 0.15);
  --warning-text: #6e5400;
  --info: #0169cc;
  --info-foreground: #ffffff;
  --info-soft: rgba(2, 133, 255, 0.08);
  --info-text: #0169cc;
  --link: #c9331f;
  --overlay: rgba(0, 0, 0, 0.3);
  --tooltip: #303030;
  --tooltip-foreground: #ffffff;
  --tile-gray: #85827c;
  --tile-brown: #a8714a;
  --tile-orange: #ea7a2c;
  --tile-yellow: #dba51a;
  --tile-green: #2f9e6b;
  --tile-blue: #3478e0;
  --tile-purple: #8a5ce0;
  --tile-pink: #d9539a;
  --tile-red: #dc4a40;
  --tile-foreground: #ffffff;
  --chart-1: var(--brand);
  --chart-2: #0285ff;
  --chart-3: #00a240;
  --chart-4: #924ff7;
  --chart-5: #e0ac00;
  --sidebar: var(--surface-secondary);
  --sidebar-icon: var(--muted-foreground);
  --sidebar-foreground: var(--foreground);
  --sidebar-primary: var(--primary);
  --sidebar-primary-foreground: var(--primary-foreground);
  --sidebar-accent: var(--selected);
  --sidebar-accent-foreground: var(--foreground);
  --sidebar-border: var(--border);
  --sidebar-ring: var(--ring);
  --mark: #fde7c2;
  --key: #ffffff;
  --key-special: #abb3bd;
  --key-shadow: rgba(0, 0, 0, 0.3);
  --window-close: #ff5f57;
  --window-minimize: #febc2e;
  --window-zoom: #28c840;
  --logo-glyph: #fff6ec;
  --shadow-hairline: 0 0 0 1px rgba(0, 0, 0, 0.08);
  --shadow-100: 0 1px 2px -1px rgba(0, 0, 0, 0.08);
  --shadow-200: 0 2px 4px -1px rgba(0, 0, 0, 0.08);
  --shadow-300: 0 4px 8px -2px rgba(0, 0, 0, 0.1);
  --shadow-400: 0 8px 16px -4px rgba(0, 0, 0, 0.12);
  --shadow-menu: 0 4px 8px -2px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.08);
  --shadow-float: 0 8px 16px -4px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.08);
  --shadow-card: 0 0 #0000;
  --shadow-card-hover: 0 0 #0000;
  --shadow-brand: 0 10px 30px rgba(214, 64, 44, 0.24), 0 2px 6px rgba(0, 0, 0, 0.08);
  --shadow-thumb: 0 1px 2px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"], .dark {
  --background: #212121;
  --foreground: #ffffff;
  --surface-secondary: #181818;
  --surface-tertiary: #131313;
  --surface-elevated: #303030;
  --card: #212121;
  --card-foreground: var(--foreground);
  --popover: var(--surface-elevated);
  --popover-foreground: var(--foreground);
  --primary: #fe6650;
  --primary-hover: #ff8671;
  --primary-foreground: #0d0d0d;
  --secondary: rgba(255, 255, 255, 0.12);
  --secondary-hover: rgba(255, 255, 255, 0.16);
  --secondary-foreground: var(--foreground);
  --muted: #303030;
  --muted-foreground: #afafaf;
  --well: #0d0d0d;
  --track: #414141;
  --accent: rgba(255, 255, 255, 0.1);
  --accent-foreground: var(--foreground);
  --hover: rgba(255, 255, 255, 0.08);
  --selected: rgba(255, 255, 255, 0.12);
  --border: rgba(255, 255, 255, 0.12);
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.2);
  --input: rgba(255, 255, 255, 0.25);
  --input-hover: rgba(255, 255, 255, 0.3);
  --ring: #fe6650;
  --brand: #ec5a44;
  --brand-hover: #f07462;
  --brand-soft: #452723;
  --brand-text: #fe6650;
  --destructive-soft: rgba(250, 66, 62, 0.16);
  --destructive-text: #ff8583;
  --success-soft: rgba(4, 184, 76, 0.15);
  --success-text: #40c977;
  --warning-text: #ffd240;
  --info-soft: rgba(2, 133, 255, 0.13);
  --info-text: #66b5ff;
  --link: #fe6650;
  --overlay: rgba(0, 0, 0, 0.5);
  --tooltip: #afafaf;
  --tooltip-foreground: #0d0d0d;
  --chart-1: var(--brand);
  --chart-2: #339cff;
  --chart-3: #04b84c;
  --chart-4: #ad7bf9;
  --chart-5: #ffc300;
  --sidebar: var(--surface-secondary);
  --sidebar-icon: var(--muted-foreground);
  --sidebar-foreground: var(--foreground);
  --sidebar-primary: var(--primary);
  --sidebar-primary-foreground: var(--primary-foreground);
  --sidebar-accent: var(--selected);
  --sidebar-accent-foreground: var(--foreground);
  --sidebar-border: var(--border);
  --sidebar-ring: var(--ring);
  --mark: #5a4320;
  --key: #6b6b6b;
  --key-special: #454545;
  --key-shadow: rgba(0, 0, 0, 0.6);
  --shadow-hairline: 0 0 0 1px rgba(255, 255, 255, 0.1);
  --shadow-100: 0 1px 2px -1px rgba(0, 0, 0, 0.2);
  --shadow-200: 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  --shadow-300: 0 4px 8px -2px rgba(0, 0, 0, 0.36);
  --shadow-400: 0 8px 16px -4px rgba(0, 0, 0, 0.3);
  --shadow-menu: 0 4px 8px -2px rgba(0, 0, 0, 0.36), 0 0 0 1px rgba(255, 255, 255, 0.1);
  --shadow-float: 0 8px 16px -4px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
  --shadow-brand: 0 10px 30px rgba(214, 64, 44, 0.2), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-thumb: 0 1px 2px rgba(0, 0, 0, 0.4);
  color-scheme: dark;
}

:root {
  --spacing: 4px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 20px;
  --radius-4xl: 24px;
  --radius-full: 9999px;
  --radius-button: 9999px;
  --radius-control: 10px;
  --radius-menu: 12px;
  --radius-card: 16px;
  --radius-dialog: 20px;
  --radius-badge: 9999px;
  --control-xs: 24px;
  --control-sm: 32px;
  --control-md: 36px;
  --control-lg: 40px;
  --control-xl: 52px;
  --control-touch: 44px;
  --icon-stroke: 1.75;
  --tile-fill: 100%;
  --tile-glyph: 100%;
  --tile-glyph-size: 78%;
  --sidebar-width: 260px;
  --content-width: 720px;
  --duration-fast: 150ms;
  --duration-enter: 200ms;
  --duration-exit: 150ms;
  --ease-enter: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-exit: cubic-bezier(0.8, 0, 0.4, 1);
  --ease-move: cubic-bezier(0.65, 0, 0.35, 1);
  --font-sans: ui-sans-serif, -apple-system, system-ui, "Segoe UI", "Noto Sans", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --font-display: ui-sans-serif, -apple-system, system-ui, "Segoe UI", "Noto Sans", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  --type-heading-3xl-size: 48px;
  --type-heading-3xl-line-height: 48px;
  --type-heading-3xl-weight: 600;
  --type-heading-3xl-tracking: -0.02em;
  --type-heading-2xl-size: 36px;
  --type-heading-2xl-line-height: 42px;
  --type-heading-2xl-weight: 600;
  --type-heading-2xl-tracking: -0.01em;
  --type-heading-xl-size: 32px;
  --type-heading-xl-line-height: 38px;
  --type-heading-xl-weight: 600;
  --type-heading-xl-tracking: -0.01em;
  --type-heading-lg-size: 24px;
  --type-heading-lg-line-height: 28px;
  --type-heading-lg-weight: 600;
  --type-heading-lg-tracking: -0.01em;
  --type-heading-md-size: 20px;
  --type-heading-md-line-height: 26px;
  --type-heading-md-weight: 600;
  --type-heading-sm-size: 18px;
  --type-heading-sm-line-height: 26px;
  --type-heading-sm-weight: 600;
  --type-heading-xs-size: 16px;
  --type-heading-xs-line-height: 24px;
  --type-heading-xs-weight: 600;
  --type-reading-size: 16px;
  --type-reading-line-height: 28px;
  --type-reading-weight: 400;
  --type-body-lg-size: 18px;
  --type-body-lg-line-height: 29px;
  --type-body-lg-weight: 400;
  --type-body-size: 16px;
  --type-body-line-height: 24px;
  --type-body-weight: 400;
  --type-body-sm-size: 14px;
  --type-body-sm-line-height: 20px;
  --type-body-sm-weight: 400;
  --type-label-size: 14px;
  --type-label-line-height: 20px;
  --type-label-weight: 500;
  --type-caption-size: 12px;
  --type-caption-line-height: 18px;
  --type-caption-weight: 400;
  --type-caption-sm-size: 10px;
  --type-caption-sm-line-height: 14px;
  --type-caption-sm-weight: 400;
  --type-code-size: 13px;
  --type-code-line-height: 20px;
  --type-code-weight: 400;
  --type-wordmark-weight: 700;
  --type-wordmark-tracking: -0.01em;
  --type-wordmark-mark-scale: 1.4;
  --type-wordmark-gap: 0.5;
  --font-heading: var(--font-sans);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background: #212121;
    --foreground: #ffffff;
    --surface-secondary: #181818;
    --surface-tertiary: #131313;
    --surface-elevated: #303030;
    --card: #212121;
    --card-foreground: var(--foreground);
    --popover: var(--surface-elevated);
    --popover-foreground: var(--foreground);
    --primary: #fe6650;
    --primary-hover: #ff8671;
    --primary-foreground: #0d0d0d;
    --secondary: rgba(255, 255, 255, 0.12);
    --secondary-hover: rgba(255, 255, 255, 0.16);
    --secondary-foreground: var(--foreground);
    --muted: #303030;
    --muted-foreground: #afafaf;
    --well: #0d0d0d;
    --track: #414141;
    --accent: rgba(255, 255, 255, 0.1);
    --accent-foreground: var(--foreground);
    --hover: rgba(255, 255, 255, 0.08);
    --selected: rgba(255, 255, 255, 0.12);
    --border: rgba(255, 255, 255, 0.12);
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-strong: rgba(255, 255, 255, 0.2);
    --input: rgba(255, 255, 255, 0.25);
    --input-hover: rgba(255, 255, 255, 0.3);
    --ring: #fe6650;
    --brand: #ec5a44;
    --brand-hover: #f07462;
    --brand-soft: #452723;
    --brand-text: #fe6650;
    --destructive-soft: rgba(250, 66, 62, 0.16);
    --destructive-text: #ff8583;
    --success-soft: rgba(4, 184, 76, 0.15);
    --success-text: #40c977;
    --warning-text: #ffd240;
    --info-soft: rgba(2, 133, 255, 0.13);
    --info-text: #66b5ff;
    --link: #fe6650;
    --overlay: rgba(0, 0, 0, 0.5);
    --tooltip: #afafaf;
    --tooltip-foreground: #0d0d0d;
    --chart-1: var(--brand);
    --chart-2: #339cff;
    --chart-3: #04b84c;
    --chart-4: #ad7bf9;
    --chart-5: #ffc300;
    --sidebar: var(--surface-secondary);
    --sidebar-icon: var(--muted-foreground);
    --sidebar-foreground: var(--foreground);
    --sidebar-primary: var(--primary);
    --sidebar-primary-foreground: var(--primary-foreground);
    --sidebar-accent: var(--selected);
    --sidebar-accent-foreground: var(--foreground);
    --sidebar-border: var(--border);
    --sidebar-ring: var(--ring);
    --mark: #5a4320;
    --key: #6b6b6b;
    --key-special: #454545;
    --key-shadow: rgba(0, 0, 0, 0.6);
    --shadow-hairline: 0 0 0 1px rgba(255, 255, 255, 0.1);
    --shadow-100: 0 1px 2px -1px rgba(0, 0, 0, 0.2);
    --shadow-200: 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    --shadow-300: 0 4px 8px -2px rgba(0, 0, 0, 0.36);
    --shadow-400: 0 8px 16px -4px rgba(0, 0, 0, 0.3);
    --shadow-menu: 0 4px 8px -2px rgba(0, 0, 0, 0.36), 0 0 0 1px rgba(255, 255, 255, 0.1);
    --shadow-float: 0 8px 16px -4px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
    --shadow-brand: 0 10px 30px rgba(214, 64, 44, 0.2), 0 2px 6px rgba(0, 0, 0, 0.3);
    --shadow-thumb: 0 1px 2px rgba(0, 0, 0, 0.4);
    color-scheme: dark;
  }
}

/* sumniki.si. Every colour, radius and font is a Miha UI token (preset "sumniki", miha-ui-tokens.css, which the
   build puts first in this file). DESIGN.md says which token is for what; scripts/check_colors.py fails the build on
   a colour written out here. */
:root { color-scheme: light dark; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--background); color: var(--foreground); font: 17px/1.55 var(--font-sans); -webkit-font-smoothing: antialiased; }
a { color: var(--link); }
a:focus-visible, button:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }

.top, main, .foot { max-width: 960px; margin: 0 auto; padding: 0 20px; }
.top { display: flex; align-items: center; justify-content: space-between; padding-top: 18px; padding-bottom: 18px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 20px; color: var(--foreground); text-decoration: none; letter-spacing: -0.01em; }
.toplink { font-size: 15px; color: var(--muted-foreground); text-decoration: none; }
.toplink:hover { color: var(--foreground); }

.hero { padding: 28px 0 8px; max-width: 680px; }
h1 { font-size: clamp(34px, 6vw, 52px); line-height: 1.08; letter-spacing: -0.025em; margin: 0 0 14px; }
h2 { font-size: 26px; line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 12px; }
.lead { font-size: 19px; color: var(--muted-foreground); margin: 0; }

.tool { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 28px 0 56px; }
@media (max-width: 760px) { .tool { grid-template-columns: 1fr; } }
.pane { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 14px; display: flex; flex-direction: column; min-width: 0; }
.pane-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; margin-bottom: 8px; }
.pane-label { font-size: 14px; font-weight: 600; color: var(--muted-foreground); }
.pane > .pane-label { display: block; min-height: 36px; line-height: 36px; margin-bottom: 8px; }
textarea, .out { font: 18px/1.6 var(--font-sans); color: var(--foreground); min-height: 220px; width: 100%; }
textarea { flex: 1; resize: vertical; border: 0; background: transparent; padding: 4px; }
textarea::placeholder { color: var(--muted-foreground); opacity: 0.8; }
.out { flex: 1; white-space: pre-wrap; overflow-wrap: anywhere; padding: 4px; }
.out mark { background: var(--mark); color: inherit; border-radius: 4px; padding: 0 1px; }
.out .unsure { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline wavy var(--brand-text); text-underline-offset: 4px; }
.out .unsure.picked { text-decoration-style: solid; }
.status { font-size: 14px; color: var(--muted-foreground); margin: 10px 4px 0; }

.button { font: 600 15px/1 var(--font-sans); background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: var(--radius-button); padding: 10px 18px; cursor: pointer; }
.button:hover { background: var(--primary-hover); }
.button:disabled { opacity: 0.45; cursor: default; filter: none; }

.mac { display: flex; gap: 24px; align-items: flex-start; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 28px; margin-bottom: 56px; }
.mac p { margin: 0 0 12px; max-width: 640px; }
.mac-icon { flex: none; }
@media (max-width: 560px) { .mac { flex-direction: column; padding: 22px; } }
.soon { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--muted-foreground); }
.badge { display: inline-block; background: var(--brand-soft); color: var(--foreground); font-weight: 600; font-size: 15px; border-radius: var(--radius-badge); padding: 6px 14px; }

.faq { max-width: 720px; margin-bottom: 56px; }
details { border-bottom: 1px solid var(--border); padding: 14px 0; }
summary { font-weight: 600; cursor: pointer; }
details p { margin: 10px 0 0; color: var(--muted-foreground); }

.foot { border-top: 1px solid var(--border); padding-top: 20px; padding-bottom: 40px; font-size: 14px; color: var(--muted-foreground); }
.foot p { margin: 0 0 6px; }

.page { max-width: 720px; padding-top: 12px; padding-bottom: 56px; }
.page h2 { margin-top: 32px; }
.page p { margin: 0 0 12px; }
.page .lead { margin-bottom: 20px; }