* { box-sizing: border-box; scrollbar-color: var(--color-scroll-thumb) var(--color-scroll-track); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--color-scroll-track); }
::-webkit-scrollbar-thumb { background: var(--color-scroll-thumb); border-radius: var(--radius-sm); }
::-webkit-scrollbar-thumb:hover { background: var(--color-scroll-hover); }
body { margin: 0; color: var(--color-ink); background: var(--color-background); font: var(--text-sans)/var(--leading-sans) var(--font-sans); }
main { max-width: 800px; margin: 48px auto; padding: 0 24px; }
header { margin-bottom: 32px; }
.eyebrow { color: var(--color-primary); font-weight: 600; }
h1 { font: 600 var(--text-display)/var(--leading-display) var(--font-display); margin: 12px 0; }
h2 { margin: 12px 0; font-size: 22px; overflow-wrap: anywhere; }
p { color: var(--color-muted); }
section { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: 24px; margin-bottom: 24px; }
.tag { display: inline-block; padding: 4px 10px; color: var(--color-primary); background: var(--color-primary-soft); border-radius: var(--radius-sm); }
button { min-height: var(--space-control); min-width: 140px; padding: 8px 16px; border: 1px solid var(--color-primary); border-radius: var(--radius-sm); color: var(--color-surface); background: var(--color-primary); cursor: pointer; font: inherit; transition: background 120ms; }
button:hover { background: var(--color-primary-hover); }
button:active { transform: translateY(1px); }
.secondary { color: var(--color-primary); background: var(--color-surface); }
.secondary:hover { background: var(--color-primary-soft); }
button:disabled { opacity: .55; cursor: not-allowed; transform: none; }
button:focus-visible, .table-scroll:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.feedback { min-height: 24px; color: var(--color-ink); overflow-wrap: anywhere; }
.hint, footer { font-size: 12px; color: var(--color-muted); overflow-wrap: anywhere; }
code { font-family: var(--font-mono); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; min-width: 320px; text-align: left; }
th, td { padding: 12px 8px; border-bottom: 1px solid var(--color-line); overflow-wrap: anywhere; }
th { color: var(--color-muted); font-size: 12px; }
@media (max-width: 600px) { main { margin: 24px auto; padding: 0 16px; } section { padding: 20px; } .actions, .actions form, .actions button { width: 100%; } h1 { font-size: 26px; } }
@media (prefers-reduced-motion: reduce) { button { transition: none; } }
@media (forced-colors: active) { button, section { border: 1px solid ButtonText; } button:disabled { color: GrayText; } }