*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--hb-ink);background:var(--hb-porcelain);font-family:Vazirmatn,Tahoma,sans-serif;font-size:12px}
button,input,select{font:inherit}
.hb-ds-hero{min-height:104px;padding:18px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px;color:#fff;background:var(--hb-navy)}
.hb-ds-hero h1{margin:0;font-size:36px;line-height:1.2;letter-spacing:-1.2px}.hb-ds-hero h1 span{margin-inline-start:8px;padding:4px 10px;border-radius:var(--hb-radius-round);color:#fff;background:var(--hb-cobalt);font-size:11px;vertical-align:middle}.hb-ds-hero p{margin:7px 0 0;color:var(--hb-powder);font-size:12px}.hb-ds-hero ul{margin:0;padding:0;display:grid;gap:4px;list-style:none;color:var(--hb-powder);font-size:10px}.hb-ds-hero li{display:flex;align-items:center;gap:6px}.hb-ds-hero i{color:var(--hb-butter)}
.hb-ds-board{width:min(1440px,100%);margin:auto;padding:16px 20px 32px;display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:14px}
.hb-ds-board>section{min-width:0;padding:13px 0;border-bottom:1px solid var(--hb-line)}
.hb-ds-board h1,.hb-ds-board h2,.hb-ds-board h3,.hb-ds-board p{margin:0}.hb-ds-board h2{margin-bottom:12px;color:var(--hb-navy);font-size:13px}.hb-ds-board h3{margin:12px 0 8px;color:var(--hb-muted);font-size:10px}
.hb-ds-palette{grid-column:1/span 2}.hb-color-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.hb-color-grid article{display:grid;gap:4px;text-align:center}.hb-color-grid article>i{height:46px;border:1px solid var(--hb-line);border-radius:var(--hb-radius-xs);background:var(--swatch)}.hb-color-grid b{font-size:9px}.hb-color-grid code{color:var(--hb-muted);font-size:8px;direction:ltr}.hb-neutral-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:9px}.hb-neutral-grid i{height:36px;padding:6px;display:flex;align-items:flex-end;justify-content:center;border:1px solid var(--hb-line);border-radius:var(--hb-radius-xs);color:var(--hb-muted);background:var(--swatch);font-size:7px;font-style:normal}
.hb-ds-type{grid-column:3}.hb-type-row{min-height:24px;display:grid;grid-template-columns:110px 1fr;gap:12px;align-items:center}.hb-type-row code{color:var(--hb-muted);font-size:8px;direction:ltr;text-align:left}.hb-type-row strong{font-size:28px}.hb-type-row h1{font-size:22px}.hb-type-row h2{margin:0;font-size:18px}.hb-type-row h3{margin:0;color:var(--hb-ink);font-size:15px}.hb-type-row p{font-size:12px}.hb-type-row small{color:var(--hb-muted);font-size:9px}
.hb-token-strip{min-height:104px}.hb-token-strip>div{height:52px;display:flex;align-items:center;gap:10px}.hb-token-strip i{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--hb-line);color:var(--hb-navy);background:var(--hb-surface-container);font-size:8px;font-style:normal}.hb-spacing i:nth-child(2n){height:44px}.hb-radius i{background:var(--hb-powder)}.hb-radius .r-xs{border-radius:4px}.hb-radius .r-sm{border-radius:10px}.hb-radius .r-md{border-radius:14px}.hb-radius .r-lg{border-radius:18px}.hb-radius .r-xl{border-radius:28px}.hb-radius .r-round{border-radius:var(--hb-radius-round)}.hb-heights>div{height:auto;display:grid;gap:5px}.hb-heights label{display:grid;grid-template-columns:56px 44px 1fr;align-items:center;gap:8px}.hb-heights button{min-height:var(--control-h,44px);border:1px solid var(--hb-line);border-radius:var(--hb-radius-xs);background:var(--hb-surface)}.hb-heights label:nth-child(2) button{min-height:48px}.hb-heights label:nth-child(3) button{min-height:54px}
.hb-ds-controls{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.hb-ds-controls>h2{grid-column:1/-1;margin-bottom:-4px}.hb-button-family{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.hb-button-family h3{grid-column:1/-1;margin:0;color:var(--hb-navy)}.hb-button{min-height:40px;border-radius:var(--hb-radius-xs);font-weight:800}.hb-button.primary{border:1px solid var(--hb-cobalt);color:#fff;background:var(--hb-cobalt)}.hb-button.primary.hover{filter:brightness(.91)}.hb-button.primary.pressed{box-shadow:inset 0 0 0 2px rgba(16,27,43,.28)}.hb-button.secondary{border:1px solid var(--hb-cobalt);color:var(--hb-cobalt);background:var(--hb-surface)}.hb-button.secondary.hover{background:var(--hb-info-soft)}.hb-button.secondary.pressed{box-shadow:inset 0 0 0 2px var(--hb-powder)}.hb-button.destructive{border:1px solid var(--hb-danger);color:#fff;background:var(--hb-danger)}.hb-button.destructive.hover{filter:brightness(.92)}.hb-button.destructive.pressed{box-shadow:inset 0 0 0 2px rgba(16,27,43,.25)}.hb-button:disabled{opacity:.36}
.hb-ds-inputs{grid-column:1/span 2}.hb-input-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.hb-input-row label{display:grid;gap:4px;color:var(--hb-muted);font-size:8px}.hb-input-row input,.hb-choice-row input,.hb-choice-row select{min-height:38px;padding:0 10px;border:1px solid var(--hb-line);border-radius:var(--hb-radius-xs);background:var(--hb-surface)}.hb-input-row .focus input{border-color:var(--hb-cobalt);outline:2px solid var(--hb-powder)}.hb-input-row .error input{border-color:var(--hb-danger)}.hb-input-row .error small{color:var(--hb-danger)}.hb-choice-row{margin-top:10px;display:flex;align-items:center;gap:16px}.hb-choice-row label{display:flex;align-items:center;gap:6px}.hb-choice-row input[type=checkbox],.hb-choice-row input[type=radio]{min-height:auto;accent-color:var(--hb-cobalt)}.hb-choice-row select{min-width:120px}.hb-search{margin-inline-start:auto;position:relative}.hb-search i{position:absolute;inset-inline-end:10px;top:13px;color:var(--hb-muted)}.hb-search input{padding-inline-end:30px}
.hb-ds-segmented{grid-column:3}.hb-segmented{margin-bottom:8px;display:flex}.hb-segmented button{min-height:38px;flex:1;border:1px solid var(--hb-line);color:var(--hb-navy);background:var(--hb-surface)}.hb-segmented button:first-child{border-radius:0 var(--hb-radius-xs) var(--hb-radius-xs) 0}.hb-segmented button:last-child{border-radius:var(--hb-radius-xs) 0 0 var(--hb-radius-xs)}.hb-segmented .active{color:#fff;background:var(--hb-cobalt)}
.hb-ds-patterns{grid-column:1/span 2}.hb-demo-event{min-height:68px;padding:10px;display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;border:1px solid var(--hb-line);border-radius:var(--hb-radius-md);background:var(--hb-surface)}.hb-demo-event button{width:38px;height:38px;border:0;border-radius:50%;color:#fff;background:var(--hb-cobalt)}.hb-demo-event>div{display:grid;gap:3px}.hb-demo-event span{color:var(--hb-muted);font-size:9px}.hb-avatars{display:flex!important}.hb-avatars i{width:25px;height:25px;margin-inline-start:-7px;display:grid;place-items:center;border:2px solid var(--hb-surface);border-radius:50%;background:var(--hb-powder);font-style:normal}.hb-avatars em{align-self:center;color:var(--hb-muted);font-size:9px}.hb-state-grid{margin-top:10px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.hb-state-grid article{min-height:76px;padding:8px;display:grid;place-items:center;align-content:center;gap:4px;text-align:center;border:1px solid var(--hb-line);border-radius:var(--hb-radius-sm);background:var(--hb-surface)}.hb-state-grid span{color:var(--hb-muted);font-size:8px}.hb-state-grid .loading i{color:var(--hb-cobalt)}.hb-state-grid .error{border-color:#efb8bd;background:var(--hb-danger-soft)}.hb-state-grid .error i{color:var(--hb-danger)}.hb-state-grid .success{border-color:#b5ddc8;background:var(--hb-success-soft)}.hb-state-grid .success i{color:var(--hb-success)}
.hb-ds-player{grid-column:1/-1;min-height:72px!important;padding:10px 16px!important;display:grid;grid-template-columns:auto auto 1fr minmax(180px,auto) minmax(180px,280px);gap:14px;align-items:center;border:0!important;border-radius:var(--hb-radius-md);color:#fff;background:var(--hb-navy)}.hb-ds-player button{width:42px;height:42px;border:0;border-radius:50%;color:#fff;background:transparent}.hb-ds-player .play{background:var(--hb-cobalt)}.hb-ds-player .hb-wave{height:4px;border-radius:var(--hb-radius-round);background:var(--hb-cobalt)}.hb-ds-player>div:not(.hb-wave){display:grid}.hb-ds-player span{color:var(--hb-powder);font-size:9px}.hb-ds-player label{display:flex;align-items:center;gap:10px}.hb-ds-player input{width:100%;accent-color:var(--hb-cobalt)}
.hb-ds-navs{grid-column:1/-1;display:grid;grid-template-columns:110px 240px minmax(360px,520px);gap:16px;align-items:start}.hb-ds-navs nav{display:flex;border:1px solid var(--hb-line);border-radius:var(--hb-radius-md);overflow:hidden}.hb-ds-navs a{min-height:48px;flex:1;display:flex;align-items:center;justify-content:center;gap:6px;font-size:9px}.hb-ds-navs .desktop{padding:6px;display:grid;grid-template-columns:1fr 1fr;gap:4px;color:#fff;background:var(--hb-navy)}.hb-ds-navs .desktop a{min-height:38px;border-radius:var(--hb-radius-xs)}.hb-ds-navs .desktop .active{background:var(--hb-cobalt)}.hb-ds-navs .mobile a{flex-direction:column}.hb-ds-navs .mobile .active{color:var(--hb-cobalt);background:var(--hb-info-soft)}
.hb-ds-imagery{grid-column:1/-1}.hb-ds-imagery__head{margin-bottom:12px;display:flex;align-items:end;justify-content:space-between;gap:16px}.hb-ds-imagery__head h2{margin-bottom:4px}.hb-ds-imagery__head p{color:var(--hb-muted);font-size:10px}.hb-ds-imagery__head>span{padding:6px 9px;border:1px solid var(--hb-line);border-radius:var(--hb-radius-round);color:var(--hb-muted);background:var(--hb-surface);font-size:8px}.hb-ds-cover-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.hb-ds-cover-grid figure{margin:0;overflow:hidden;border:1px solid var(--hb-line);border-radius:var(--hb-radius-sm);background:var(--hb-surface)}.hb-ds-cover-grid img{width:100%;aspect-ratio:3/2;display:block;object-fit:cover}.hb-ds-cover-grid figcaption{padding:7px 9px;color:var(--hb-navy);font-size:9px;font-weight:800}
.hb-ds-accessibility{grid-column:1/-1;padding:14px!important;display:grid;grid-template-columns:repeat(5,1fr);gap:14px;border:0!important;border-radius:var(--hb-radius-md);background:var(--hb-sand)}.hb-ds-accessibility span{display:grid;grid-template-columns:auto 1fr;gap:3px 7px;align-items:center;font-size:9px}.hb-ds-accessibility i{grid-row:1/span 2;color:var(--hb-cobalt);font-size:18px}.hb-ds-accessibility b{font-size:10px}
@media(max-width:760px){body{font-size:11px}.hb-ds-hero{min-height:130px;padding:22px 18px;text-align:center}.hb-ds-hero h1{font-size:28px}.hb-ds-hero h1 span{display:none}.hb-ds-hero p{margin-top:10px}.hb-ds-hero ul{display:none}.hb-ds-board{padding:12px;display:block}.hb-ds-board>section{padding:18px 0}.hb-ds-palette,.hb-ds-type,.hb-ds-controls,.hb-ds-inputs,.hb-ds-segmented,.hb-ds-patterns,.hb-ds-player,.hb-ds-navs,.hb-ds-imagery{grid-column:auto}.hb-color-grid{grid-template-columns:repeat(6,1fr);gap:8px}.hb-color-grid article>i{height:32px}.hb-color-grid b,.hb-color-grid code{display:none}.hb-neutral-grid{display:none}.hb-ds-palette h3{display:none}.hb-ds-type{display:grid;gap:6px}.hb-type-row{grid-template-columns:1fr}.hb-type-row code{display:none}.hb-type-row strong{font-size:26px}.hb-type-row h1{font-size:22px}.hb-token-strip>div{overflow:auto}.hb-heights{display:none}.hb-ds-controls{display:none}.hb-ds-inputs{display:none}.hb-ds-segmented{display:none}.hb-demo-event{display:none}.hb-state-grid{grid-template-columns:1fr;gap:10px}.hb-state-grid article{min-height:82px}.hb-ds-player{display:none}.hb-ds-navs{display:block}.hb-ds-navs>h2,.hb-ds-navs .desktop{display:none}.hb-ds-navs .mobile{position:static;width:100%;display:flex}.hb-ds-imagery__head{display:grid;align-items:start}.hb-ds-imagery__head>span{width:max-content}.hb-ds-cover-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.hb-ds-accessibility{display:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}