/* design.html — the design system for developers */
.ds{padding:6px 0 100px}
.ds__in{display:grid;grid-template-columns:210px minmax(0,1fr);gap:24px;align-items:start}
.ds__nav{position:sticky;top:calc(var(--hdr) + 14px);display:grid;gap:2px;max-height:calc(100svh - var(--hdr) - 28px);overflow:auto;scrollbar-width:none}
.ds__nav h3{font:var(--md-sys-typescale-overline);letter-spacing:var(--md-sys-typescale-overline-tracking);margin:16px 12px 6px;text-transform:uppercase;color:var(--dim)}
.ds__nav h3:first-child{margin-top:0}
.ds__nav button{font:var(--md-sys-typescale-label-medium);letter-spacing:var(--md-sys-typescale-label-medium-tracking);position:relative;height:38px;display:flex;align-items:center;padding:0 14px;border:0;border-radius:var(--md-sys-shape-corner-full);background:transparent;color:var(--mu);text-align:left;cursor:pointer;transition:color var(--md-sys-motion-duration-short)}
.ds__nav button::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--tx);opacity:0;transition:opacity var(--md-sys-motion-duration-short)}
.ds__nav button:hover{color:var(--tx)}
.ds__nav button:hover::before{opacity:var(--md-sys-state-hover)}
.ds__nav button[aria-current="true"]{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}
.ds__main{min-width:0}
.ds__sec{padding:24px;min-width:0}
.ds__sec[hidden]{display:none}
.ds__h{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px}
.ds code{font:var(--md-sys-typescale-mono-small);letter-spacing:var(--md-sys-typescale-mono-small-tracking);color:var(--dim)}
.ds .lbl{font:var(--md-sys-typescale-body-small);letter-spacing:var(--md-sys-typescale-body-small-tracking);display:block;color:var(--mu);margin:0 0 8px}

/* tokens */
.tiers{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:12px;align-items:stretch}
.tiers>div{display:grid;gap:8px;align-content:start;padding:16px;border-radius:var(--md-sys-shape-corner-large);background:var(--bg);box-shadow:inset 0 0 0 1px var(--line2)}
.tiers>div i{height:38px;border-radius:var(--md-sys-shape-corner-medium)}
.tiers>div .btn{justify-self:start}
.tiers code{word-break:break-all}
.tiers__a{font:var(--md-sys-typescale-title-large);letter-spacing:var(--md-sys-typescale-title-large-tracking);align-self:center;color:var(--dim)}
.ds__how{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:8px;counter-reset:h}
.ds__how li{font:var(--md-sys-typescale-body-medium);letter-spacing:var(--md-sys-typescale-body-medium-tracking);display:grid;grid-template-columns:28px 260px 1fr;gap:12px;align-items:center;color:var(--mu);counter-increment:h}
.ds__how li::before{font:var(--md-sys-typescale-overline);letter-spacing:var(--md-sys-typescale-overline-tracking);content:counter(h);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--s3);color:var(--tx)}
.ds__how li>code:first-of-type{color:var(--volt)}

/* colour */
.roles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.role{display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto auto;column-gap:12px;row-gap:2px;align-items:center;padding:10px;border-radius:var(--md-sys-shape-corner-medium);background:var(--bg);box-shadow:inset 0 0 0 1px var(--line2)}
.role i{grid-row:1/4;width:40px;height:40px;border-radius:var(--md-sys-shape-corner-small);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.role b{font:var(--md-sys-typescale-label-medium);letter-spacing:var(--md-sys-typescale-label-medium-tracking)}
.role small{font:var(--md-sys-typescale-label-small);letter-spacing:var(--md-sys-typescale-label-small-tracking);color:var(--mu)}
.pals{display:grid;gap:12px}
.pal{display:grid;grid-template-columns:130px 1fr;grid-template-rows:auto auto;column-gap:16px;align-items:center}
.pal b{font:var(--md-sys-typescale-label-medium);letter-spacing:var(--md-sys-typescale-label-medium-tracking)}
.pal code{grid-row:2}
.pal__t{grid-row:1/3;grid-column:2;display:flex;border-radius:var(--md-sys-shape-corner-medium);overflow:hidden}
.pal__t i{font:var(--md-sys-typescale-mono-small);letter-spacing:var(--md-sys-typescale-mono-small-tracking);flex:1;height:46px;display:grid;place-items:end center;padding-bottom:5px;font-style:normal}
.pal__t i.is-used{box-shadow:inset 0 -3px 0 currentColor}

/* type, shape, elevation, motion, states */
.ds__spec{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;margin-bottom:26px}
.ds__spec>div{padding:22px;border-radius:var(--md-sys-shape-corner-large);background:var(--s2)}
.ds__spec-h{font:var(--md-sys-typescale-headline-small);letter-spacing:var(--md-sys-typescale-headline-small-tracking);margin:10px 0 0}
.ds__spec-p{font:var(--md-sys-typescale-body-medium);letter-spacing:var(--md-sys-typescale-body-medium-tracking);margin:12px 0 18px;color:var(--mu);max-width:520px}
.ds__spec-t{font:var(--md-sys-typescale-title-medium);letter-spacing:var(--md-sys-typescale-title-medium-tracking);display:block;margin-top:10px}
.ds__spec-n{font:var(--md-sys-typescale-number);letter-spacing:var(--md-sys-typescale-number-tracking);display:block;margin-top:8px;color:var(--volt)}
.ds__spec-d{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0 0}
.ds__spec-d dt{font:var(--md-sys-typescale-overline);letter-spacing:var(--md-sys-typescale-overline-tracking);text-transform:uppercase;color:var(--dim)}
.ds__spec-d dd{font:var(--md-sys-typescale-body-medium);letter-spacing:var(--md-sys-typescale-body-medium-tracking);margin:4px 0 0}
@media(max-width:640px){.ds__spec{grid-template-columns:1fr}}
.ds__type>div{display:grid;grid-template-columns:180px minmax(0,1fr);gap:16px;align-items:baseline;padding:14px 0;border-top:1px solid var(--line2)}
.ds__type>div:first-child{border-top:0;padding-top:0}
.ds__type code span{font:var(--md-sys-typescale-label-small);letter-spacing:var(--md-sys-typescale-label-small-tracking);color:var(--mu)}
.ds__type p{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds__shape,.ds__states{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.ds__shape div{display:grid;gap:2px;align-content:end;height:110px;padding:12px;background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}
.ds__shape b{font:var(--md-sys-typescale-label-medium);letter-spacing:var(--md-sys-typescale-label-medium-tracking)}
.ds__shape code{color:inherit;opacity:.75}
.ds__elev{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:8px 0 16px}
.ds__elev div{display:grid;gap:4px;align-content:end;height:130px;padding:14px;border-radius:var(--md-sys-shape-corner-large)}
.ds__elev b{font:var(--md-sys-typescale-headline-small);letter-spacing:var(--md-sys-typescale-headline-small-tracking)}
.ds__elev small{font:var(--md-sys-typescale-label-small);letter-spacing:var(--md-sys-typescale-label-small-tracking);color:var(--mu)}
.ds__motion{display:grid;gap:10px}
.mo{display:grid;grid-template-columns:220px 1fr 120px;gap:16px;align-items:center}
.mo small{font:var(--md-sys-typescale-mono-small);letter-spacing:var(--md-sys-typescale-mono-small-tracking);color:var(--mu)}
.mo__bar{position:relative;height:28px;border-radius:var(--md-sys-shape-corner-full);background:var(--bg);box-shadow:inset 0 0 0 1px var(--line2)}
.mo__bar i{position:absolute;left:4px;top:4px;width:20px;height:20px;border-radius:50%;background:var(--volt);transition-property:left;transition-duration:var(--md-sys-motion-duration-long);transition-timing-function:var(--md-sys-motion-easing-standard)}
.ds__motion.is-on .mo__bar i{left:calc(100% - 24px)}
.ds__states div{position:relative;display:grid;gap:2px;align-content:end;height:96px;padding:12px;border-radius:var(--md-sys-shape-corner-medium);background:var(--s2);overflow:hidden}
.ds__states i{position:absolute;inset:0;background:var(--tx);opacity:0}
.ds__states b,.ds__states code{font:var(--md-sys-typescale-body-small);letter-spacing:var(--md-sys-typescale-body-small-tracking);position:relative}

/* components */
.ds__demo{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:28px;margin-bottom:20px;border-radius:var(--md-sys-shape-corner-large);background:var(--bg);box-shadow:inset 0 0 0 1px var(--line2)}
.ds__demo--f{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));align-items:end}
.ds .btn[disabled]{opacity:.38;cursor:default;box-shadow:none}
.tok{font:var(--md-sys-typescale-body-small);letter-spacing:var(--md-sys-typescale-body-small-tracking);width:100%;border-collapse:collapse}
.tok th{font:var(--md-sys-typescale-overline);letter-spacing:var(--md-sys-typescale-overline-tracking);padding:0 10px 10px;text-align:left;text-transform:uppercase;color:var(--dim)}
.tok td{padding:9px 10px;border-top:1px solid var(--line2);vertical-align:middle}
.tok td:first-child code{color:var(--tx)}
.tok td:last-child{display:flex;align-items:center;gap:8px}
.tok td i{flex:none;width:16px;height:16px;border-radius:5px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}

@media(max-width:1020px){.ds__in{grid-template-columns:1fr}.ds__nav{position:static;display:flex;overflow-x:auto;max-height:none}.ds__nav h3{display:none}.ds__nav button{flex:none}
  .tiers{grid-template-columns:1fr}.tiers__a{transform:rotate(90deg);justify-self:center}.ds__how li{grid-template-columns:28px 1fr}.ds__how li span{grid-column:2}}
@media(max-width:640px){.ds__elev{grid-template-columns:repeat(2,minmax(0,1fr))}.ds__type>div,.pal{grid-template-columns:1fr;gap:6px}.pal__t{grid-row:auto;grid-column:auto}.mo{grid-template-columns:1fr}.ds__sec{padding:16px}.tok td:nth-child(2){display:none}}