:root { color-scheme: light; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #1d2533; background: #f4f7fb; line-height: 1.6; }
* { box-sizing: border-box; }
body { margin: 0; }
button, input, textarea, select { font: inherit; }
button, .file-button { cursor: pointer; }
a { color: #1559a6; }
.skip-link { position: absolute; left: 1rem; top: -4rem; background: #fff; padding: .6rem 1rem; z-index: 10; }
.skip-link:focus { top: 1rem; }
.hero { display: flex; justify-content: space-between; gap: 2rem; padding: 2.5rem max(1.25rem, calc((100% - 1120px) / 2)); background: #173d6c; color: #fff; }
.hero h1 { margin: .2rem 0; font-size: clamp(2rem, 5vw, 3.5rem); }
.eyebrow, .step { margin: 0; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; font-size: .78rem; }
.hero-note { max-width: 30rem; display: grid; gap: .35rem; padding: 1rem; background: rgb(255 255 255 / 12%); border-radius: .8rem; }
main { width: min(1120px, calc(100% - 2rem)); margin: 1.5rem auto 3rem; }
.status { min-height: 2.7rem; padding: .65rem 1rem; border-left: .35rem solid #1e7b58; background: #eaf8f1; }
.status[data-kind="error"] { border-color: #b52c38; background: #fff0f1; }
.panel { margin-top: 1.25rem; padding: clamp(1rem, 3vw, 1.6rem); background: #fff; border: 1px solid #d9e1ec; border-radius: 1rem; box-shadow: 0 .5rem 1.5rem rgb(31 55 85 / 6%); }
.section-heading { display: flex; justify-content: space-between; align-items: start; gap: 1.5rem; }
.section-heading h2 { margin: .15rem 0; }
.step { color: #2d649f; }
label, .field-label { display: grid; gap: .35rem; font-weight: 650; }
input, textarea, select, .editable { width: 100%; border: 1px solid #9baabc; border-radius: .45rem; padding: .62rem .7rem; background: #fff; color: inherit; }
.editable { min-height: 10rem; white-space: pre-wrap; font-weight: 400; }
.editable:empty::before { content: attr(data-placeholder); color: #6b7583; }
input:focus-visible, textarea:focus-visible, select:focus-visible, .editable:focus-visible, button:focus-visible, .file-button:focus-visible { outline: .2rem solid #ffba3a; outline-offset: .15rem; }
.try-grid, .snippet-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1rem; }
.wide { grid-column: 1 / -1; }
.variable-help { margin: 0; }
.form-error { color: #a8202e; min-height: 1.5rem; }
.form-actions, .data-actions, .card-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
button, .file-button { border: 1px solid #708096; border-radius: .45rem; padding: .55rem .9rem; background: #fff; color: inherit; text-decoration: none; }
.primary { background: #1d5f9f; color: #fff; border-color: #1d5f9f; }
.danger-button { border-color: #b52c38; color: #a8202e; }
.list-heading label { min-width: min(22rem, 100%); }
.snippet-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.snippet-card { border: 1px solid #d9e1ec; border-radius: .7rem; padding: 1rem; min-width: 0; }
.card-heading { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.card-heading h3 { margin: 0; }
.category { padding: .15rem .5rem; border-radius: 99px; background: #eaf1fa; font-size: .82rem; }
.snippet-preview { white-space: pre-wrap; overflow-wrap: anywhere; background: #f6f8fb; padding: .7rem; border-radius: .4rem; }
.description { color: #536174; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
footer { padding: 2rem max(1rem, calc((100% - 1120px) / 2)); background: #e7edf5; }
@media (max-width: 760px) { .hero, .section-heading { display: grid; } .try-grid, .snippet-form, .snippet-list { grid-template-columns: 1fr; } .wide { grid-column: auto; } }