:root {
    color-scheme: dark;
    --bg: #010008;
    --panel: #0a0826;
    --screen: #000010;
    --elevated: #161244;
    --text: #33ffcc;
    --white: #eef2ff;
    --accent: #ffb000;
    --border: #2a2566;
    --error: #ff3366;
    --muted: #5e6b99;
    font: 12px/1.5 'JetBrains Mono', 'Courier New', monospace;
    background: var(--bg);
    color: var(--text);
}
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; background: var(--bg); }
body::before {
    position: fixed;
    z-index: 10;
    inset: 0;
    background: linear-gradient(transparent 50%, #0005 50%);
    background-size: 100% 4px;
    content: "";
    pointer-events: none;
}
header, main { width: min(1100px, calc(100% - 2rem)); margin: auto; }
header { display: grid; gap: .4rem; padding: 1.5rem 0 1rem; border-bottom: 1px solid var(--border); }
h1, h2, h3, p { margin: 0; }
h1 { color: var(--white); font-size: 1.35rem; }
h2 { margin-bottom: .65rem; color: var(--accent); font-size: .9rem; text-transform: uppercase; }
h2::before, h3::before { content: "// "; }
h3 { color: var(--accent); font-size: .75rem; }
.eyebrow { color: var(--accent); font-size: .7rem; }
.intro { max-width: 70ch; color: var(--muted); }
.back-link, a { color: var(--text); text-underline-offset: .2em; }
.back-link { justify-self: start; margin-top: .4rem; }
main { display: grid; gap: .8rem; padding: 1rem 0 2rem; }
section, .panel, .card { min-width: 0; padding: .8rem; border: 1px solid var(--border); background: var(--panel); }
section > p { margin-bottom: .65rem; }
.swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .4rem; }
.swatch { display: grid; gap: .3rem; min-height: 72px; padding: .45rem; border: 1px solid var(--border); background: var(--screen); }
.swatch::before { width: 100%; height: 24px; background: var(--sample); border: 1px solid #ffffff44; content: ""; }
.swatch code { color: var(--accent); font-size: .68rem; }
.swatch span { color: var(--white); font-size: .7rem; }
.sample-stack { display: grid; gap: .55rem; }
.sample-stack h1 { color: var(--white); font-size: 1.05rem; }
.sample-stack h3 { color: var(--accent); font-size: .8rem; }
.inline-code, code { overflow-wrap: anywhere; color: var(--accent); }
.component-row, .sample-tabs, .status-row, .form-samples { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
button, input, select {
    min-width: 0;
    padding: .45rem .6rem;
    border: 1px solid var(--border);
    border-radius: 0;
    color: var(--text);
    background: var(--screen);
    font: inherit;
}
button { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
button:hover:not(:disabled), button[aria-selected="true"], .primary { border-color: var(--text); background: var(--elevated); }
button:disabled { opacity: .45; cursor: default; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sample-tabs { margin: .7rem 0; padding-bottom: .25rem; border-bottom: 1px solid var(--border); }
.panel { display: grid; gap: .5rem; }
pre { margin: 0; padding: .6rem; overflow: auto; border: 1px solid var(--border); background: var(--screen); color: var(--white); white-space: pre-wrap; }
.form-samples label { display: grid; gap: .25rem; min-width: min(220px, 100%); color: var(--accent); }
.status-row { margin-top: .7rem; }
.status-row p { padding: .35rem .5rem; border-left: 2px solid currentColor; background: var(--screen); }
.ok { color: var(--text); }
.warning { color: var(--accent); }
.error { color: var(--error); }
details, .card { margin-top: .6rem; padding: .6rem; border: 1px solid var(--border); background: var(--screen); }
summary { color: var(--accent); cursor: pointer; }
details ul { margin-bottom: 0; }
dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .35rem .7rem; }
dt { color: var(--accent); }
dd { margin: 0; overflow-wrap: anywhere; }
.player-swatches { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.note { margin-top: .7rem; color: var(--muted); }
@media (max-width: 600px) {
    header, main { width: min(100% - 1rem, 1100px); }
    section { padding: .6rem; }
}