/* Draft UI Language · Signature mode · Useless but Precise */
:root {
  --draft-bg:#101010; --draft-surface:#181818; --draft-surface-raised:#202020; --draft-surface-soft:#151515;
  --draft-text:#F6F3EB; --draft-muted:#D0CCC3; --draft-border:rgba(255,255,255,.20); --draft-border-strong:rgba(255,255,255,.34);
  --draft-primary:#6977FF; --draft-focus:#5FE6FF; --draft-code:#111522;
}
body.light { --draft-bg:#F2EFE7; --draft-surface:#FFFDF6; --draft-surface-raised:#FFFFFF; --draft-surface-soft:#ECE8DE; --draft-text:#171717; --draft-muted:#625D56; --draft-border:rgba(16,16,16,.20); --draft-border-strong:rgba(16,16,16,.34); --draft-focus:#245DE8; --draft-code:#171A24; }
html,body { background:var(--draft-bg)!important; color:var(--draft-text)!important; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
a { color:var(--draft-text)!important; text-underline-offset:3px; }
.container { width:min(calc(100% - 48px),1180px); }
header { min-height:68px; background:color-mix(in srgb,var(--draft-bg) 90%,transparent)!important; border-bottom:1px solid var(--draft-border)!important; backdrop-filter:blur(16px); }
.nav { padding-block:12px; }.brand { gap:10px; }.dot { width:10px;height:10px;border:0!important;background:var(--draft-primary)!important;border-radius:50%; }
.title { color:var(--draft-text);font-size:.9rem;letter-spacing:-.015em;text-transform:none; }
.title::before { content:"DRAFT / COUNTERS";display:block;margin-bottom:3px;color:var(--draft-muted);font:800 10px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.09em; }
.navlinks { gap:8px; }
.icon-btn,.btn,.tab,.copy-btn { min-height:44px;border:1px solid var(--draft-border)!important;border-radius:0!important;background:transparent!important;color:var(--draft-text)!important; }
.icon-btn { width:44px;height:44px; }.btn { padding:10px 14px;font-weight:750;letter-spacing:.02em; }
.icon-btn:hover,.btn:hover,.tab:hover { border-color:var(--draft-border-strong)!important;background:var(--draft-surface-soft)!important; }
.icon-btn:focus-visible,.btn:focus-visible,.tab:focus-visible,.copy-btn:focus-visible { outline:3px solid var(--draft-focus);outline-offset:3px; }
main { padding-block:42px 64px; }.hero { max-width:760px;margin-bottom:30px; }
.hero::before { content:"SYSTEM / LIVE VALUES";color:var(--draft-muted);font:800 11px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.09em; }
.hero h1 { margin-top:8px;color:var(--draft-text);font-size:clamp(2.5rem,5vw,4.4rem);font-weight:900;letter-spacing:-.042em;line-height:.94; }
.desc { color:var(--draft-muted)!important;font-size:1rem;line-height:1.6; }
.card { position:relative;border:1px solid var(--draft-border)!important;background:var(--draft-surface)!important;padding:22px!important; }
.card::before { content:"";position:absolute;top:22px;left:-1px;width:3px;height:34px;background:var(--draft-primary); }
.section h3,#overview h3 { color:var(--draft-text);font-size:1rem;letter-spacing:-.015em;text-transform:none; }
.overview { gap:10px; }.ovr-row { min-height:52px;border:1px solid var(--draft-border)!important;background:var(--draft-surface-soft); }
.ovr-row .label { color:var(--draft-muted);font:750 .68rem/1.25 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.055em;text-transform:uppercase; }.ovr-row .val { color:var(--draft-text); }
.grid { gap:16px;margin-top:16px; }.live,.odo { border:1px solid var(--draft-border-strong)!important;background:var(--draft-surface-soft)!important;color:var(--draft-text); }.live { font-size:clamp(1.65rem,4vw,2.5rem);letter-spacing:-.035em; }
.tabs { gap:8px; }.tab { padding:8px 11px;font:750 .72rem/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.045em;text-transform:uppercase; }
.tab:focus,.tab:active { background:var(--draft-primary)!important;border-color:var(--draft-primary)!important;color:#101010!important;outline:none; }
pre.code { border:1px solid var(--draft-border)!important;background:var(--draft-code)!important;color:#F6F3EB!important;line-height:1.5; }
.copy-btn { background:var(--draft-primary)!important;border-color:var(--draft-primary)!important;color:#101010!important; }
.bar,.odo-col,.ring,.wave { border:1px solid var(--draft-border-strong)!important; }.bar > .fill { background-color:var(--draft-primary)!important; }.ring::after { background:var(--draft-surface)!important; }
footer { border-top:1px solid var(--draft-border)!important;color:var(--draft-muted)!important; }
@media (max-width:720px) { .container{width:min(calc(100% - 32px),1180px)}header{position:static}.nav{align-items:flex-start}.navlinks{flex-shrink:0}main{padding-block:28px 48px}.card{padding:18px!important}.ovr-row{align-items:flex-start;flex-direction:column}.icon-btn,.btn{min-height:44px} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important} }