:root {

color-scheme: light;

--ink: #111827;

--muted: #656c79;

--line: #e5e7eb;

--line-strong: #80858e;

--subtle: #f3f4f6;

--surface: #fff;

--page: #fafafa;

/* Amber, the devtools brand. Text-safe on light surfaces. */

--brand: #b45309;

--brand-strong: #92400e;

/* Text on a --brand background. */

--brand-ink: #fff;

--brand-soft: #fef3c7;

/* Filled call-to-action buttons, the same in both themes. */

--accent: #f5a524;

--accent-strong: #e8930c;

--accent-ink: #1c1300;

--ok-soft: #d1fae5;

--ok-ink: #065f46;

--danger-soft: #fee2e2;

--danger-ink: #991b1b;

--shadow: rgba(0, 0, 0, 0.08);

--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);

--radius-sm: 8px;

--radius: 12px;

--radius-lg: 16px;

--control-h: 40px;

--ease: cubic-bezier(0.2, 0, 0, 1);

--brand-gradient: linear-gradient(92deg, #f5a524 0%, #f97316 100%);

}

html {

-webkit-text-size-adjust: 100%;

text-size-adjust: 100%;

}

::selection {

background: var(--brand-soft);

color: var(--ink);

}

body {

margin: 0;

background: var(--page);

color: var(--ink);

font-family:

system-ui,

-apple-system,

'Segoe UI',

Roboto,

'Helvetica Neue',

Arial,

sans-serif;

font-size: 15px;

line-height: 1.55;

-webkit-font-smoothing: antialiased;

text-rendering: optimizeLegibility;

}

pre {

font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

font-size: 0.9em;

}

textarea {

font: inherit;

color: inherit;

}

:focus-visible {

outline: 2px solid var(--brand);

outline-offset: 2px;

}

.sr-only {

position: absolute;

width: 1px;

height: 1px;

margin: -1px;

padding: 0;

overflow: hidden;

clip: rect(0 0 0 0);

white-space: nowrap;

border: 0;

}

@media (prefers-reduced-motion: reduce) {

*,

*::before,

*::after {

animation-duration: 0.01ms !important;

animation-iteration-count: 1 !important;

transition-duration: 0.01ms !important;

scroll-behavior: auto !important;

}

}

.container {

width: 100%;

max-width: 1180px;

margin: 0 auto;

padding: 0 24px;

}

@media (max-width: 600px) {

.container {

padding: 0 16px;

}

}

.btn {

display: inline-flex;

align-items: center;

justify-content: center;

gap: 8px;

min-height: var(--control-h);

padding: 0 18px;

border: 1px solid var(--line-strong);

border-radius: 10px;

background: var(--surface);

color: var(--ink);

font-size: 15px;

font-weight: 600;

line-height: 1.2;

text-decoration: none;

cursor: pointer;

transition:

background-color 0.15s var(--ease),

border-color 0.15s var(--ease),

color 0.15s var(--ease),

transform 0.1s var(--ease);

}

.btn:hover {

border-color: var(--ink);

background: var(--subtle);

}

.btn:active:not(:disabled) {

transform: translateY(1px);

}

.btn-primary {

border-color: var(--accent);

background: var(--accent);

color: var(--accent-ink);

box-shadow: var(--shadow-sm);

}

.btn-primary:hover {

border-color: var(--accent-strong);

background: var(--accent-strong);

}

.btn:disabled {

opacity: 0.55;

cursor: not-allowed;

}

.btn:disabled:hover {

border-color: var(--line-strong);

background: var(--surface);

}

.btn-primary:disabled:hover {

border-color: var(--accent);

background: var(--accent);

}

.eyebrow {

margin: 0 0 8px;

color: var(--brand);

font-size: 12px;

font-weight: 700;

letter-spacing: 0.08em;

text-transform: uppercase;

}

h3 {

text-wrap: balance;

}

textarea {

box-sizing: border-box;

display: block;

width: 100%;

max-width: 100%;

min-height: 5.5em;

max-height: 20em;

resize: vertical;

field-sizing: content;

line-height: 1.5;

}

select:not([multiple]) {

appearance: none;

-webkit-appearance: none;

padding-right: 36px;

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8e99' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

background-repeat: no-repeat;

background-position: right 12px center;

background-size: 14px;

text-overflow: ellipsis;

cursor: pointer;

}