@font-face{font-family:"Nunito";src:url("fonts/Nunito.woff2") format("woff2");font-weight:200 1000;font-display:swap}
@font-face{font-family:"DM Mono";src:url("fonts/DMMono.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"DM Mono";src:url("fonts/DMMono-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Questrial";src:url("fonts/Questrial-Regular.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Lato";src:url("fonts/Lato.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Lato";src:url("fonts/Lato-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
html,body{margin:0}
body{min-height:100vh}
.skip{position:absolute;left:-999px;top:0;background:var(--cui-ink);color:#fff;padding:.6rem 1rem;z-index:10}
.skip:focus{left:1rem}
.d-top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:.8rem 1.5rem;background:var(--cui-surface);border-bottom:1px solid var(--cui-line)}
.d-brand{font-family:var(--cui-font-display);font-weight:var(--cui-weight-display);font-size:1.15rem;margin:0;margin-right:auto}
.d-brand span{color:var(--cui-accent)}
.d-theme{display:flex;gap:.4rem;align-items:center;font-size:13px;color:var(--cui-ink-muted)}
.d-theme .cui-btn[aria-pressed="true"]{background:var(--cui-primary);color:var(--cui-on-primary);border-color:var(--cui-primary)}
.d-layout{display:grid;grid-template-columns:220px minmax(0,1fr);max-width:1180px;margin:0 auto}
.d-nav{position:sticky;top:64px;align-self:start;padding:2rem 1rem;max-height:calc(100vh - 64px);overflow:auto}
.d-nav ul{list-style:none;margin:0;padding:0}
.d-nav a{display:block;padding:.35rem .6rem;border-radius:var(--cui-radius);color:var(--cui-ink-muted);text-decoration:none;font-size:14px}
.d-nav a:hover{background:var(--cui-surface-2);color:var(--cui-ink)}
.d-main{padding:2rem 1.5rem 5rem;min-width:0}
.d-hero h2{font-family:var(--cui-font-display);font-weight:var(--cui-weight-display);font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.1;margin:0 0 1rem}
.d-hero p{max-width:640px;color:var(--cui-ink-muted);font-size:1.05rem}
.d-sec{padding:2.5rem 0;border-top:1px solid var(--cui-line)}
.d-sec h3{font-family:var(--cui-font-display);font-weight:var(--cui-weight-display);font-size:1.5rem;margin:0 0 .4rem}
.d-sec>p{color:var(--cui-ink-muted);max-width:680px;margin:0 0 1.2rem}
.d-demo{background:var(--cui-surface);border:1px solid var(--cui-line);border-radius:var(--cui-radius) var(--cui-radius) 0 0;padding:1.5rem}
.d-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.d-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.d-code{margin:0;background:#12171d;color:#e6edf3;border-radius:0 0 var(--cui-radius) var(--cui-radius);padding:1rem 1.2rem;overflow:auto;font:13px/1.55 "DM Mono",ui-monospace,monospace;max-height:320px}
.d-code code{white-space:pre}
.d-foot{border-top:1px solid var(--cui-line);padding:2rem 1.5rem;text-align:center;font-size:13px;color:var(--cui-ink-muted)}
.d-foot a{color:var(--cui-ink)}
@media(max-width:820px){.d-layout{grid-template-columns:1fr}.d-nav{display:none}}