:root {
    --bg: #ECEFF4;
    --ink: #1D2342;
    --muted: #4A5170;
    --line-human: #B07A12;
    --line-ai: #1F7A80;
    --rule: #C9CEDC;

    --panel: #E2E7F1;

    --raised: #FBFCFE;
    --shade: rgba(29, 35, 66, 0.10);

    --weave-line: linear-gradient(90deg, var(--line-human), var(--line-ai));

    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", Georgia, serif;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #151A2C;
        --ink: #E4E7F2;
        --muted: #A9AFC6;
        --line-human: #E0B04A;
        --line-ai: #5FB7BC;
        --rule: #2E3550;
        --panel: #1D2339;
        --raised: #232B48;
        --shade: rgba(0, 0, 0, 0.35);
    }
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); }
body {
    margin: 0;
    color: var(--ink);
    background: var(--bg);
    font: 1.0625rem/1.6 var(--sans);
    -webkit-text-size-adjust: 100%;
}
a { color: inherit; text-underline-offset: 0.2em; }
a:focus-visible { outline: 3px solid var(--line-ai); outline-offset: 3px; border-radius: 2px; }
[hidden] { display: none !important; }

h1 {
    font: 400 clamp(2.1rem, 4.6vw, 3.2rem)/1.08 var(--serif);
    letter-spacing: -0.01em;
    margin: 0 0 1.25rem;
}

h1 span { display: block; color: var(--muted); font-size: 0.55em; margin-top: 0.4rem; }
h2 { font: 600 1.2rem/1.3 var(--serif); margin: 2.25rem 0 0.6rem; }
p { margin: 0 0 1rem; }
ul { margin: 0 0 1rem; padding-left: 1.2rem; }
li { margin-bottom: 0.5rem; }
li::marker { color: var(--line-human); }

.page { --gutter: clamp(1.25rem, 4vw, 3rem); max-width: 56rem; margin: 0 auto; padding: 1.5rem var(--gutter) 3rem; }
.columns { display: grid; gap: 3.5rem; }

article, .prose { max-width: 36rem; }

@media (min-width: 48rem) {
    .page { max-width: calc(1200px + 2 * var(--gutter)); }
    article, .prose, .overview { max-width: 56rem; }
}

.langs { display: flex; gap: 1.25rem; justify-content: flex-end; font-size: 0.95rem; color: var(--muted); }
.langs a[aria-current="true"] { color: var(--ink); font-weight: 600; text-decoration: none; }

.skip-link { position: absolute; left: -100rem; top: 0.5rem; padding: 0.5rem 0.75rem; background: var(--bg); }
.skip-link:focus { left: 0.5rem; }

.masthead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1.5rem; }
.site-name { font: 600 1.05rem/1.4 var(--serif); text-decoration: none; }

.site-menu, .section-menu, .footer-menu { font-size: 0.95rem; color: var(--muted); }
.site-menu ul, .section-menu ul, .footer-menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.site-menu li, .section-menu li, .footer-menu li { margin: 0; }

.site-menu a, .section-menu a, .footer-menu a { display: inline-block; padding: 0.55rem 0; }

.site-menu summary, .section-menu summary { display: list-item; padding: 0.55rem 0; cursor: pointer; }
.site-menu summary::marker, .section-menu summary::marker { color: var(--line-human); }
summary:focus-visible { outline: 3px solid var(--line-ai); outline-offset: 3px; border-radius: 2px; }

.site-menu [aria-current], .section-menu [aria-current], .footer-menu [aria-current], .site-name[aria-current] { color: var(--ink); font-weight: 600; text-decoration: none; }

.site-menu { margin-top: 0.5rem; }

.site-menu details > ul { display: block; padding: 0 0 0.5rem 1.1rem; }
@media not all and (min-width: 48rem) {
    .site-menu > ul { flex-direction: column; }
    .site-menu > ul > li > a { display: block; }
}

@media (min-width: 48rem) {
    .site-menu li { position: relative; }
    .site-menu details > ul {
        position: absolute; z-index: 10; top: 100%; left: 0;
        width: max-content; max-width: 18rem; margin-top: 0.75rem; padding: calc(0.5rem + 3px) 0.4rem 0.5rem;
        background: var(--raised); border: 1px solid var(--rule); border-top: 0; border-radius: 6px;
        box-shadow: 0 8px 22px var(--shade);
    }
    .site-menu details > ul::before {
        content: ""; position: absolute; inset: 0 -1px auto -1px; height: 3px; border-radius: 6px 6px 0 0;
        background: var(--weave-line);
    }

    .site-menu details > ul::after {
        content: ""; position: absolute; top: -6px; left: 1rem; width: 12px; height: 7px;
        clip-path: polygon(50% 0, 100% 100%, 0 100%);
        background: color-mix(in srgb, var(--line-human) 88%, var(--line-ai));
    }
    .site-menu details > ul a { display: block; padding: 0.45rem 0.6rem; border-radius: 4px; text-decoration: none; }
    .site-menu details > ul a:hover { background: color-mix(in srgb, var(--line-ai) 12%, transparent); color: var(--ink); }
}

.section-menu { margin: 0 0 2rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--rule); }
.section-menu details > ul { display: block; padding-left: 1.1rem; }

.footer-menu { flex-basis: 100%; }

.overview { max-width: 36rem; margin-top: 3rem; }
.overview h3 { font: 600 1rem/1.3 var(--serif); margin: 1.5rem 0 0.4rem; }

footer {
    margin-top: 3.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule);
    font-size: 0.9rem; color: var(--muted);
    display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: space-between;
}

.weave { display: block; width: 100%; height: auto; margin: 1.5rem 0 2.5rem; overflow: visible; }
.weave path, .weave polyline { fill: none; stroke-width: 3; vector-effect: non-scaling-stroke; }
.weave .human { stroke: var(--line-human); stroke-linecap: round; stroke-linejoin: round; }
.weave .ai { stroke: var(--line-ai); stroke-linejoin: miter; }

@media (prefers-reduced-motion: no-preference) {
    .weave path, .weave polyline {
        stroke-dasharray: 1; stroke-dashoffset: 1;
        animation: draw 2.4s cubic-bezier(.4, 0, .2, 1) forwards;
    }
    .weave .ai { animation-delay: 0.25s; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }

.weave-static .weave path, .weave-static .weave polyline { animation: none; stroke-dashoffset: 0; }

.read-on { max-width: 56rem; margin-top: 3rem; padding-top: 0.25rem; border-top: 1px solid var(--rule); }
.read-on h3 { font: 600 1rem/1.3 var(--serif); margin: 1.5rem 0 0.4rem; }
.read-on-next a { font: 1.15rem/1.4 var(--serif); }

.card {
    position: relative; max-width: 36rem; margin: 3rem 0 0; padding: calc(1.3rem + 3px) 1.5rem 1.2rem;
    background: var(--raised); border: 1px solid var(--rule); border-top: 0; border-radius: 8px;
    box-shadow: 0 6px 18px var(--shade);
}
.card::before {
    content: ""; position: absolute; inset: 0 -1px auto -1px; height: 3px; border-radius: 8px 8px 0 0;
    background: var(--weave-line);
}
.card-title { font: 600 1.2rem/1.3 var(--serif); margin: 0 0 0.4rem; }
.card p:last-child { margin-bottom: 0; }
.card > div + div { margin-top: 1.25rem; }

.lead { font: 1.3rem/1.5 var(--serif); }
.status { color: var(--muted); }

.for-ai { border-left: 3px solid var(--line-ai); padding-left: 1.1rem; margin-top: 2.25rem; }
.for-ai h2 { margin-top: 0; }

.credit { font-size: 0.9rem; color: var(--muted); margin-top: 2rem; }

.disclosure { font-size: 1rem; color: var(--ink); margin: -0.5rem 0 0.6rem; }
.dates { font-size: 0.95rem; margin-bottom: 2rem; }
.prose h2 { margin-top: 2rem; }

.page-notes { border-left: 3px solid var(--line-human); padding-left: 1.1rem; margin-top: 3rem; font-size: 0.95rem; }
.page-notes h2 { margin-top: 0; }
.page-notes h3 { font: 600 1rem/1.3 var(--serif); margin: 1.5rem 0 0.4rem; }

.making { border-left: 3px solid var(--line-ai); padding-left: 1.1rem; margin-top: 3rem; font-size: 0.95rem; }
.making h2 { margin-top: 0; }
.making h3 { font: 600 1rem/1.3 var(--serif); margin: 1.5rem 0 0.4rem; }
.metadata { display: grid; grid-template-columns: max-content 1fr; gap: 0.2rem 1rem; margin: 0 0 1rem; }
.metadata dt { color: var(--muted); }
.metadata dd { margin: 0; }
.prompt { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.9rem; background: transparent; border: 1px solid var(--rule); padding: 0.75rem; }

.prompt-hash, .translation-hash, .paste-check-hash { overflow-wrap: anywhere; }

.paste-check { border: 1px solid var(--rule); padding: 0 1rem 0.5rem; margin: 1.5rem 0 0.5rem; }
.paste-check .metadata code { overflow-wrap: anywhere; }

.fold { position: relative; margin: 0 0 1rem; }
.fold-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fold-caret { display: inline-block; cursor: pointer; color: var(--muted); font-size: 0.9rem; margin-bottom: 0.4rem; }
.fold-caret::before { content: "▸"; display: inline-block; width: 1em; transition: transform 0.15s; }
.fold-toggle:checked + .fold-caret::before { transform: rotate(90deg); }
.fold-toggle:focus-visible + .fold-caret { outline: 2px solid currentColor; outline-offset: 2px; }
.fold-open, .fold-toggle:checked + .fold-caret .fold-closed { display: none; }
.fold-toggle:checked + .fold-caret .fold-open { display: inline; }
.fold .prompt { max-height: 100px; overflow: hidden; margin: 0; -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent); mask-image: linear-gradient(to bottom, #000 60%, transparent); }
.fold-toggle:checked ~ .prompt { max-height: none; -webkit-mask-image: none; mask-image: none; }
@media (prefers-reduced-motion: reduce) { .fold-caret::before { transition: none; } }
@media print { .fold .prompt { max-height: none; -webkit-mask-image: none; mask-image: none; } .fold-caret { display: none; } }

.making.translator { margin-top: 1rem; }
.original { margin: 1rem 0; }
.original summary { cursor: pointer; }
.article-list { list-style: none; padding: 0; }
.article-list time { margin-left: 0.5rem; font-size: 0.9rem; }
@media (max-width: 30rem) {
    .metadata { grid-template-columns: 1fr; }
    .metadata dd { margin-bottom: 0.5rem; }
}

.prose table { border-collapse: collapse; width: 100%; margin: 0 0 1.25rem; font-size: 0.95rem; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.prose th { font-weight: 600; }

.admin-form { display: grid; gap: 0.4rem; max-width: 36rem; }
.admin-form label { display: block; font-weight: 600; margin: 0.9rem 0 0.35rem; }

.admin-form input[type="radio"] + label, .admin-form input[type="checkbox"] + label {
    display: inline; font-weight: 400; margin: 0;
}
.admin-form input[type="radio"] + label::after, .admin-form input[type="checkbox"] + label::after {
    content: ""; display: block; margin-bottom: 0.35rem;
}
.admin-form .help-text { margin-top: 0.35rem; }
.admin-form input, .admin-form textarea, .admin-form select {
    font: inherit; color: var(--ink); background: var(--bg);
    border: 1px solid var(--muted); border-radius: 3px; padding: 0.45rem 0.6rem;
}
.admin-form input:focus-visible, .admin-form textarea:focus-visible, .admin-form select:focus-visible, button:focus-visible {
    outline: 3px solid var(--line-ai); outline-offset: 2px;
}
button {
    font: inherit; color: var(--bg); background: var(--ink); border: 0; border-radius: 3px;
    padding: 0.5rem 1rem; margin-top: 1rem; justify-self: start; cursor: pointer;
}
.form-error { border-left: 3px solid var(--ink); padding-left: 0.8rem; }
.preview-banner { border: 1px dashed var(--ink); padding: 0.5rem 0.8rem; margin-bottom: 1.5rem; font-size: 0.95rem; }
.admin-form .help-text, .admin-form small { color: var(--muted); font-size: 0.9rem; }
.admin-form textarea { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.95rem; }

.admin-form textarea {
    box-sizing: border-box;
    width: min(50rem, calc(100vw - 2 * clamp(1.25rem, 4vw, 3rem)));
}
.admin-table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
.admin-table th, .admin-table td { text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.blocking li::marker { color: var(--ink); }
.admin-form input[type="radio"], .admin-form input[type="checkbox"] { margin-right: 0.5rem; }
.admin-form .form-check, .admin-form fieldset > div > div { margin: 0.3rem 0; }
.inline-form { display: inline; }
.link-button { background: none; color: inherit; padding: 0; margin: 0 0 0 0.4rem; text-decoration: underline; font-size: inherit; }
.guidance { border-left: 3px solid var(--rule); padding-left: 1rem; margin-bottom: 1.5rem; }

.menu-table .menu-level-2 td:first-child { padding-left: 2rem; }
.menu-table .menu-level-3 td:first-child { padding-left: 3.5rem; }
.menu-log { font-size: 0.9rem; }