:root {
    color-scheme: light dark;
    --bg: light-dark(#f4f7f8, #0f1a24);
    --surface: light-dark(#ffffff, #16232f);
    --surface-2: light-dark(#eef2f5, #1c2c3a);
    --text: light-dark(#16324f, #e6edf2);
    --text-muted: light-dark(#5b6b79, #9fb0bf);
    --border: light-dark(#d3dce3, #2c3e4e);
    --border-strong: light-dark(#b4c2cd, #3d5366);
    --accent: light-dark(#16324f, #8fb8de);
    --accent-hover: light-dark(#0f2438, #b3d0ea);
    --on-accent: light-dark(#ffffff, #0f1a24);
    --focus: light-dark(#a85f00, #f5b75c);
    --success: light-dark(#1d7250, #7fd1ad);
    --success-bg: light-dark(#e3f3ec, #123126);
    --warning: light-dark(#8a4b00, #f5c27a);
    --warning-bg: light-dark(#fdf0dc, #3a2a12);
    --danger: light-dark(#a4262c, #f4a3a8);
    --danger-bg: light-dark(#fbe9ea, #3a1d20);
    --info: light-dark(#1f4e79, #9cc4ea);
    --info-bg: light-dark(#e3ecf4, #16304a);
    --brand-ink: #16324f;
    --google-bg: light-dark(#ffffff, #131314);
    --google-text: light-dark(#1f1f1f, #e3e3e3);
    --google-border: light-dark(#747775, #8e918f);

    --display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", serif;
    --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --data: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;

    --radius-sm: 4px;
    --radius: 6px;
    --radius-lg: 10px;
    --radius-full: 999px;

    --shadow-sm: 0 1px 2px light-dark(rgb(16 32 48 / 0.1), rgb(0 0 0 / 0.45));
    --shadow-md: 0 6px 16px light-dark(rgb(16 32 48 / 0.1), rgb(0 0 0 / 0.45));

    --header-h: 3.5rem;
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 1rem/1.55 var(--body);
    overflow-wrap: break-word;
}

h1, h2 { font-family: var(--display); font-weight: 600; line-height: 1.15; }
h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); letter-spacing: -0.01em; margin: 0 0 1rem; }
h2 { font-size: 1.5rem; margin: 2.5rem 0 1rem; }
a { color: var(--text); text-underline-offset: 0.2em; }
code, time { font-family: var(--data); font-size: 0.9em; }
time, dd, td { font-variant-numeric: tabular-nums; }

.app-main h1 { font: 600 var(--text-3xl)/1.2 var(--display); letter-spacing: 0; margin: 0 0 var(--space-5); }
.app-main h2 {
    font: 600 var(--text-lg)/1.3 var(--body);
    margin: var(--space-6) 0 var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border);
}
.app-main h3 { font: 600 var(--text-base)/1.4 var(--body); }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none; }

.visually-hidden, .skip-link:not(:focus) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.skip-link:focus {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    z-index: 100;
    padding: var(--space-2) var(--space-4);
    background: var(--surface);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
}

.brand { display: inline-flex; align-items: center; gap: 0.5rem; font: 600 1.25rem var(--display); text-decoration: none; }

button, .button, ::file-selector-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 2.5rem;
    padding: 0 var(--space-4);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: 600 var(--text-sm)/1.2 var(--body);
    text-decoration: none;
    cursor: pointer;
}
button:hover, ::file-selector-button:hover { background: var(--surface-2); }
.button { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.button:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.button.secondary { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.button.secondary:hover { background: var(--surface-2); }
.danger { color: var(--danger); border-color: currentColor; }
.danger:hover { background: var(--danger-bg); }
:disabled { opacity: 0.55; cursor: not-allowed; }

input:not([type="checkbox"], [type="radio"], [type="file"]), select, textarea {
    max-width: 100%;
    min-height: 2.5rem;
    padding: 0 var(--space-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
}
textarea { padding: var(--space-2) var(--space-3); }
input[type="file"] { font: inherit; max-width: 100%; }
::file-selector-button { margin-right: var(--space-3); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: 1.1rem; height: 1.1rem; }

.notice, .beta-note, .legal-pending {
    padding: var(--space-3) var(--space-4);
    border-left: 4px solid var(--warning);
    border-radius: var(--radius-sm);
    background: var(--warning-bg);
}

.badge, .tag {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-2);
    border-radius: var(--radius-full);
    background: var(--surface-2);
    color: var(--text-muted);
    font: 600 var(--text-xs)/1.6 var(--body);
}
.tone-success { background: var(--success-bg); color: var(--success); }
.tone-warning, .tag, .actor.google { background: var(--warning-bg); color: var(--warning); }
.tone-danger { background: var(--danger-bg); color: var(--danger); }
.tone-info, .actor.you { background: var(--info-bg); color: var(--info); }