:root {
    color-scheme: light;
    --ink: #2b1d12;
    --muted: #8c6a4d;
    --paper: #f7efe6;
    --panel: #ffffff;
    --line: #dcc9b8;
    --accent: #d96d1a;
    --accent-dark: #a94c0e;
    --danger: #8f2f1c;
    --focus: #d96d1a;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background: var(--paper);
    line-height: 1.5;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--paper); }
a { color: var(--accent-dark); }
button, input { font: inherit; }
button, .button { min-block-size: 44px; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.skip-link { position: absolute; inset-inline-start: 1rem; inset-block-start: -4rem; padding: .6rem .8rem; background: var(--ink); color: white; z-index: 2; }
.skip-link:focus { inset-block-start: 1rem; }
.site-header { inline-size: 100%; background: var(--ink); color: white; }
.header-inner { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: baseline; justify-content: space-between; padding-block: 1rem; }
.brand { color: white; font-weight: 700; text-decoration: none; letter-spacing: .01em; }
.page-width { width: min(100% - 2rem, 68rem); margin-inline: auto; }
.narrow { width: min(100% - 2rem, 42rem); }
.page-stack { display: grid; gap: 1rem; padding-block: 1.25rem 3rem; }
.hero { padding-block: 2.5rem; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: .7rem; padding: 1rem; box-shadow: 0 .2rem .8rem rgb(43 29 18 / 5%); }
.eyebrow { margin: 0; color: var(--muted); font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.site-header .eyebrow { color: #f7efe6; }
h1, h2, p { margin-block-start: 0; }
h1 { margin-block-end: .6rem; font-size: clamp(1.8rem, 7vw, 3rem); line-height: 1.1; }
h2 { margin-block-end: .6rem; font-size: 1.3rem; }
.lede { max-width: 38rem; color: var(--muted); font-size: 1.1rem; }
.muted { color: var(--muted); }
.table-scroll { overflow-x: auto; }
table { width: 100%; min-width: 48rem; border-collapse: collapse; text-align: start; }
th, td { padding: .65rem; border-block-end: 1px solid var(--line); vertical-align: top; }
thead th { color: var(--muted); font-size: .84rem; }
tbody th { font-weight: 650; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border: 1px solid var(--accent); border-radius: .45rem; padding: .55rem .9rem; background: var(--accent); color: var(--ink); font-weight: 700; text-decoration: none; }
.button:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: white; }
.button.secondary { background: white; color: var(--accent-dark); border-color: var(--line); }
.button.danger { background: white; border-color: #d6a38a; color: var(--danger); }
.form-stack, .form-grid { display: grid; gap: .7rem; }
label { font-weight: 650; }
input { width: 100%; min-block-size: 44px; border: 1px solid #b99c85; border-radius: .35rem; padding: .55rem .65rem; color: var(--ink); background: white; }
.delegation-example:focus::placeholder { color: transparent; }
dialog { border: 0; border-radius: .75rem; box-shadow: 0 1rem 3rem rgb(0 0 0 / .28); max-width: min(42rem, calc(100vw - 2rem)); padding: 0; }
dialog::backdrop { background: rgb(0 0 0 / .45); }
.form-actions { margin-block-start: .25rem; }
.status { min-block-size: 1.5rem; margin-block: .5rem; color: var(--muted); }
.status.error { color: var(--danger); font-weight: 650; }
.page-heading, .section-heading { display: flex; gap: 1rem; align-items: center; justify-content: space-between; }
.page-heading { align-items: flex-start; }
.badge { display: inline-flex; align-items: center; min-block-size: 1.6rem; padding-inline: .55rem; border-radius: 99rem; background: #f1dfcf; color: #8a481d; font-size: .85rem; font-weight: 700; }
.record-list { display: grid; gap: .65rem; }
.record { border: 1px solid var(--line); border-radius: .45rem; padding: .75rem; overflow-wrap: anywhere; }
.record dl, .facts { display: grid; grid-template-columns: minmax(7rem, .4fr) 1fr; gap: .35rem .8rem; margin: 0; }
.record dt, .facts dt { color: var(--muted); font-size: .84rem; }
.record dd, .facts dd { margin: 0; }
.record-header { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; margin-block-end: .5rem; }
.decision-actions { display: grid; grid-template-columns: 1fr; gap: .7rem; margin-block-start: 1.25rem; }
.danger-text { color: var(--danger); }

@media (min-width: 600px) {
    .page-width { width: min(100% - 3rem, 68rem); }
    .narrow { width: min(100% - 3rem, 42rem); }
    .panel { padding: 1.5rem; }
    .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .form-actions { grid-column: 1 / -1; }
    .decision-actions { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 850px) {
    .table-scroll { overflow: visible; }
    table { min-width: 0; }
    thead { display: none; }
    tbody { display: grid; gap: .75rem; }
    tbody tr { display: grid; gap: .55rem; padding-block: .85rem; border-block-end: 1px solid var(--line); }
    tbody tr:first-child { padding-block-start: 0; }
    th, td { padding: 0; border: 0; }
    tbody th code { overflow-wrap: anywhere; }
    tbody td { display: block; }
    tbody td::before { display: block; margin-block-end: .15rem; color: var(--muted); font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
    tbody td:nth-child(2)::before { content: "Default"; }
    tbody td:nth-child(3)::before { content: "Purpose and constraints"; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}