@import url('../../kit/tokens/tokens.css');
* { box-sizing: border-box; }
html { color-scheme: light; }
html.dark { color-scheme: dark; }
body { margin: 0; background: rgb(var(--color-bg)); color: rgb(var(--color-ink)); font: 400 1rem/1.5 var(--font-sans); font-synthesis: none; }
main, .page-header { width: min(70rem, 100%); margin-inline: auto; padding: 1rem; min-inline-size: 0; }
h1, h2 { font-family: var(--font-display); font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: 1.5rem; }
h3 { font-weight: 600; }
label, p, legend, summary { overflow-wrap: anywhere; }
a { color: rgb(var(--color-accent-ink)); text-underline-offset: .2em; }
button, input, select, textarea, summary { font: inherit; }
button, select, input:not([type=checkbox]):not([type=radio]), summary { min-block-size: 44px; }
button, summary { min-inline-size: 44px; border-radius: 10px; padding: .5rem 1rem; border: 1px solid rgb(var(--color-brand-boundary)); background: rgb(var(--color-panel)); color: rgb(var(--color-ink)); cursor: pointer; }
button:hover, summary:hover { background: rgb(var(--color-hover)); }
button:active { background: rgb(var(--color-line)); }
button.primary { color: rgb(var(--color-on-accent)); background: rgb(var(--color-accent)); }
button.primary:hover { background: rgb(var(--color-accent-hover)); }
button.primary:active { background: rgb(var(--color-accent-active)); }
.danger-outline { color: rgb(var(--color-danger)); border-color: rgb(var(--color-danger)); }
.danger-filled { color: rgb(var(--color-on-danger)); background: rgb(var(--color-danger)); }
.ghost { color: rgb(var(--color-accent-ink)); background: transparent; }
button:disabled, select:disabled, input:disabled { background: rgb(var(--color-surface)); color: rgb(var(--color-muted)); border-color: rgb(var(--color-line)); cursor: not-allowed; }
input, textarea, select { max-inline-size: 100%; min-inline-size: 0; color: rgb(var(--color-ink)); background: rgb(var(--color-panel)); border: 1px solid rgb(var(--color-brand-boundary)); border-radius: 10px; padding: .5rem; }
input[type=checkbox], input[type=radio] { accent-color: rgb(var(--color-accent-ink)); padding: 0; inline-size: 20px; block-size: 20px; flex: 0 0 auto; }
input[readonly] { background: rgb(var(--color-surface)); }
[aria-invalid=true], .error { color: rgb(var(--color-danger)); }
[aria-invalid=true] { border-color: rgb(var(--color-danger)); }
:focus-visible { outline: 2px solid rgb(var(--color-focus)); outline-offset: 3px; }
.skip { position: absolute; inset-block-start: -10rem; }
.skip:focus { inset-block-start: .5rem; background: rgb(var(--color-panel)); padding: 1rem; z-index: 10; }
.logo { inline-size: 180px; max-inline-size: 100%; block-size: auto; }
.dark .logo-light, .logo-dark { display: none; }
.dark .logo-dark { display: inline; }
.toolbar, .actions, nav { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.toolbar label { display: grid; gap: .25rem; }
.card, .example { padding: 1.25rem; border: 1px solid rgb(var(--color-line)); border-radius: 16px; background: rgb(var(--color-panel)); margin-block: 1rem; min-inline-size: 0; }
.field { display: grid; gap: .5rem; margin-block: 1rem; }
.choice { display: flex; align-items: center; min-block-size: 44px; min-inline-size: 44px; gap: .75rem; }
.muted { color: rgb(var(--color-muted)); }
.preview { min-inline-size: 0; max-inline-size: 100%; inline-size: 100%; padding: .5rem; }
.preview > label:not(.choice) { display: block; margin-block: .5rem; }
.preview > * { max-inline-size: 100%; }
.pill { display: inline-flex; min-block-size: 24px; align-items: center; border-radius: 9999px; background: rgb(var(--color-success)); color: rgb(var(--color-on-success)); padding: .125rem .5rem; font-size: .75rem; font-weight: 600; }
.pill[data-tone=warn] { background: rgb(var(--color-warn)); color: rgb(var(--color-on-warn)); }
.pill[data-tone=info] { background: rgb(var(--color-info)); color: rgb(var(--color-on-info)); }
.pill[data-tone=emphasis] { background: rgb(var(--color-emphasis)); color: rgb(var(--color-on-emphasis)); }
.pill[data-tone=accent] { background: rgb(var(--color-accent-soft)); color: rgb(var(--color-accent-ink)); }
.pill[data-tone=danger] { background: rgb(var(--color-panel)); color: rgb(var(--color-danger)); border: 1px solid rgb(var(--color-danger)); }
.pill[data-tone=neutral] { background: rgb(var(--color-surface)); color: rgb(var(--color-ink)); }
.compact td { padding-block: .25rem; }
.empty { border: 1px dashed rgb(var(--color-line)); border-radius: 16px; text-align: center; padding: 1.5rem; }
.placeholder { min-block-size: 4rem; background: rgb(var(--color-surface)); border-radius: 10px; }
.table-scroll { overflow: auto; min-inline-size: 0; }
table { border-collapse: collapse; inline-size: 100%; }
th, td { padding: .75rem; text-align: start; border-block-end: 1px solid rgb(var(--color-line)); overflow-wrap: anywhere; }
caption { text-align: start; font-weight: 600; }
fieldset { border: 1px solid rgb(var(--color-brand-boundary)); border-radius: 10px; min-inline-size: 0; }
.segments { display: flex; flex-wrap: wrap; gap: .5rem; }
details > a { display: inline-flex; min-block-size: 44px; align-items: center; margin: .5rem; }
dialog { background: rgb(var(--color-panel)); color: rgb(var(--color-ink)); border: 1px solid rgb(var(--color-brand-boundary)); border-radius: 16px; padding: 1.25rem; max-inline-size: calc(100vw - 2rem); max-block-size: calc(100dvh - 2rem); overflow: auto; }
dialog::backdrop { background: rgb(0 0 0 / .45); }
dialog form { display: flex; flex-wrap: wrap; gap: .5rem; }
dialog.drawer { margin-inline-end: 0; min-block-size: 100dvh; max-block-size: 100dvh; inline-size: min(30rem, 100vw); border-radius: 0; }
dialog.sheet { margin-block-end: 0; inline-size: min(40rem, 100vw); border-end-start-radius: 0; border-end-end-radius: 0; padding-block-end: max(1.25rem, env(safe-area-inset-bottom)); }
.toast-row { padding: 1rem; border: 1px solid rgb(var(--color-brand-boundary)); border-radius: 10px; margin-block: .5rem; background: rgb(var(--color-panel)); }
.toast-row button { margin: .25rem; }
.toast-row[data-tone=error] { border-color: rgb(var(--color-danger)); }
progress { inline-size: min(20rem, 100%); accent-color: rgb(var(--color-accent-ink)); }
pre { white-space: pre-wrap; overflow-wrap: anywhere; font: .8rem/1.5 var(--font-sans); background: rgb(var(--color-surface)); padding: .75rem; border-radius: 10px; }
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media (forced-colors: active) { button, input, select, summary, fieldset, .pill, .card, dialog, .toast-row { border: 1px solid ButtonText; } :focus-visible { outline-color: Highlight; } .placeholder { border: 1px solid CanvasText; } }