@font-face { font-family: 'Source Serif 4'; src: url('../../fonts/source-serif-4-latin.woff2') format('woff2'); font-style: normal; font-weight: 300 900; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('../../fonts/ibm-plex-sans-latin.woff2') format('woff2'); font-style: normal; font-weight: 100 700; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('../../fonts/ibm-plex-mono-400-latin.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('../../fonts/ibm-plex-mono-700-latin.woff2') format('woff2'); font-style: normal; font-weight: 700; font-display: swap; }

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: var(--color-canvas); }
body { min-height: 100vh; margin: 0; color: var(--color-ink); background: var(--color-canvas); font-family: var(--font-interface); font-synthesis: none; }
button, input, select { font: inherit; }
button, select, label, input[type='range'], input[type='checkbox'] { cursor: pointer; }
button:disabled, fieldset:disabled * { cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
h1:focus-visible { outline: none; }

select, input[type='text'], input[type='number'], .mono-input {
    min-width: 0; width: 100%; height: 40px; padding: 0 var(--space-3);
    border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-control);
    color: var(--color-ink); background: var(--color-surface); font-size: 0.75rem;
}
select:hover, input:hover { border-color: var(--color-accent); }
input[type='range'] { width: 100%; height: 3px; margin: 2px 0 7px; accent-color: var(--color-accent); }
input[type='checkbox'] { appearance: none; position: relative; flex: 0 0 38px; width: 38px; height: 22px; border: var(--border-width) solid var(--color-border-strong); border-radius: 999px; background: var(--color-surface-subtle); transition: background var(--duration-fast) var(--ease-standard); }
input[type='checkbox']::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--color-ink-muted); transition: transform var(--duration-fast) var(--ease-standard); }
input[type='checkbox']:checked { border-color: var(--color-accent); background: var(--color-accent); }
input[type='checkbox']:checked::after { background: var(--color-ink-on-accent); transform: translateX(16px); }
fieldset { display: grid; gap: 10px; min-width: 0; margin: var(--space-5) 0 0; padding: 0; border: 0; }
fieldset:disabled { opacity: 0.48; }