*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light dark}
body{margin:0;background:var(--theme-background);color:var(--theme-text);font-family:var(--typography-font-family-sans);font-size:var(--typography-font-size-md);line-height:var(--typography-line-height-normal)}
a{color:var(--theme-primary)}
a:focus-visible,button:focus-visible,select:focus-visible{outline:var(--border-width-medium) solid var(--theme-focus);outline-offset:2px}
.skip{position:absolute;left:-999px;top:var(--space-2)}.skip:focus{left:var(--space-2);background:var(--theme-surface-raised);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);z-index:var(--z-index-tooltip)}
header.top{position:sticky;top:0;z-index:var(--z-index-sticky);display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;padding:var(--space-3) var(--space-4);background:var(--theme-surface);border-bottom:var(--border-width-hairline) solid var(--theme-border)}
header.top .brand{display:flex;align-items:center;gap:var(--space-2);font-weight:var(--typography-font-weight-semibold);color:var(--theme-text);text-decoration:none}
header.top .brand .mark{width:var(--size-icon-lg);height:var(--size-icon-lg);border-radius:var(--radius-full);background:var(--theme-accent)}
header.top .spacer{flex:1}
header.top select,header.top button{min-height:var(--size-control-md);min-width:var(--size-touch-target);padding:0 var(--space-3);border:var(--border-width-hairline) solid var(--theme-border-strong);border-radius:var(--radius-md);background:var(--theme-surface-raised);color:var(--theme-text);font:inherit;cursor:pointer}
.layout{display:grid;grid-template-columns:1fr;gap:var(--space-6);max-width:var(--size-container-lg);margin:0 auto;padding:var(--space-6) var(--space-4)}
@media (min-width:1024px){.layout{grid-template-columns:240px 1fr;padding:var(--space-8)}}
nav.side{align-self:start}
@media (min-width:1024px){nav.side{position:sticky;top:calc(var(--size-control-md) + var(--space-8))}}
nav.side h2{font-size:var(--typography-font-size-xs);letter-spacing:var(--typography-letter-spacing-caps);text-transform:uppercase;color:var(--theme-text-muted);margin:var(--space-4) 0 var(--space-2)}
nav.side ul{list-style:none;margin:0;padding:0}
nav.side a{display:block;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);color:var(--theme-text);text-decoration:none;min-height:var(--size-touch-target);display:flex;align-items:center}
nav.side a[aria-current="page"]{background:var(--theme-primary-subtle);color:var(--theme-primary);font-weight:var(--typography-font-weight-semibold)}
main{min-width:0}
main h1{font-size:var(--typography-font-size-3xl);line-height:var(--typography-line-height-tight);letter-spacing:var(--typography-letter-spacing-tight);margin:0 0 var(--space-2)}
main h2{font-size:var(--typography-font-size-2xl);line-height:var(--typography-line-height-snug);margin:var(--space-10) 0 var(--space-3)}
main h3{font-size:var(--typography-font-size-xl);margin:var(--space-6) 0 var(--space-2)}
main p,main li{max-width:72ch}
.lead{color:var(--theme-text-muted);font-size:var(--typography-font-size-lg);margin-bottom:var(--space-8)}
table{border-collapse:collapse;width:100%;margin:var(--space-4) 0;font-size:var(--typography-font-size-sm)}
th,td{text-align:left;padding:var(--space-2) var(--space-3);border-bottom:var(--border-width-hairline) solid var(--theme-border);vertical-align:top}
th{font-weight:var(--typography-font-weight-semibold);color:var(--theme-text-muted);position:sticky;top:0;background:var(--theme-background)}
code,pre{font-family:var(--typography-font-family-mono);font-size:var(--typography-font-size-sm)}
pre{background:var(--theme-surface-sunken);padding:var(--space-4);border-radius:var(--radius-lg);overflow:auto}
code{background:var(--theme-surface-sunken);padding:0 var(--space-1);border-radius:var(--radius-sm)}
pre code{background:none;padding:0}
.card{background:var(--theme-surface-raised);border:var(--border-width-hairline) solid var(--theme-border);border-radius:var(--radius-lg);padding:var(--space-4);box-shadow:var(--shadow-sm)}
.grid{display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.swatch{border-radius:var(--radius-md);overflow:hidden;border:var(--border-width-hairline) solid var(--theme-border)}
.swatch .chip{height:56px}
.swatch .meta{padding:var(--space-2);font-size:var(--typography-font-size-xs);display:flex;justify-content:space-between;gap:var(--space-2)}
.scale{display:grid;grid-template-columns:repeat(11,1fr);border-radius:var(--radius-md);overflow:hidden;margin:var(--space-2) 0 var(--space-4)}
.scale div{height:48px;display:flex;align-items:flex-end;justify-content:center;font-size:10px;padding-bottom:2px}
.role{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) 0;border-bottom:var(--border-width-hairline) solid var(--theme-border)}
.role .chip{width:40px;height:28px;border-radius:var(--radius-sm);border:var(--border-width-hairline) solid var(--theme-border)}
.pass{color:var(--theme-success)}.fail{color:var(--theme-danger)}
.badge{display:inline-block;padding:0 var(--space-2);border-radius:var(--radius-full);font-size:var(--typography-font-size-xs);font-weight:var(--typography-font-weight-medium);line-height:20px}
.badge.ok{background:var(--theme-success-subtle);color:var(--theme-success)}.badge.no{background:var(--theme-danger-subtle);color:var(--theme-danger)}
.specimen{padding:var(--space-3) 0;border-bottom:var(--border-width-hairline) solid var(--theme-border)}
.specimen .name{font-size:var(--typography-font-size-xs);color:var(--theme-text-muted);letter-spacing:var(--typography-letter-spacing-caps);text-transform:uppercase}
.locale-row{display:grid;grid-template-columns:1fr;gap:var(--space-2);padding:var(--space-3) 0;border-bottom:var(--border-width-hairline) solid var(--theme-border)}
@media (min-width:768px){.locale-row{grid-template-columns:140px repeat(4,1fr)}}
.locale-row .key{color:var(--theme-text-muted);font-family:var(--typography-font-family-mono);font-size:var(--typography-font-size-xs)}
.locale-row .len{display:block;color:var(--theme-text-muted);font-size:var(--typography-font-size-xs)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--size-control-md);min-width:var(--size-touch-target);padding:0 var(--space-4);border-radius:var(--radius-md);font-weight:var(--typography-font-weight-semibold);border:var(--border-width-hairline) solid transparent;cursor:pointer;font:inherit;transition:background var(--motion-duration-fast)}
.btn.primary{background:var(--theme-primary);color:var(--theme-text-on-primary)}.btn.primary:hover{background:var(--theme-primary-hover)}
.btn.secondary{border-color:var(--theme-border-strong);color:var(--theme-text);background:transparent}
.btn.danger{background:var(--theme-danger);color:var(--theme-text-on-primary)}
.row{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
.box{background:var(--theme-primary-subtle);border-radius:var(--radius-md)}
footer{margin-top:var(--space-16);padding:var(--space-6) 0;color:var(--theme-text-muted);font-size:var(--typography-font-size-sm);border-top:var(--border-width-hairline) solid var(--theme-border)}
[hidden]{display:none !important}