.sb-swatches{grid-template-columns:repeat(3,1fr);gap:1rem;list-style:none;display:grid}@media (width<=46rem){.sb-swatches{grid-template-columns:repeat(2,1fr)}}@media (width<=30rem){.sb-swatches{grid-template-columns:1fr}}.sb-swatch{background:var(--surface);border:1px solid var(--line);border-radius:.7rem;overflow:hidden}.sb-swatch .chip-fill{height:5.5rem;display:block}.sb-swatch .meta{border-top:1px solid var(--line);flex-direction:column;gap:.25rem;padding:.8rem 1rem;display:flex}.sb-swatch .meta .tok{font:700 .82rem var(--mono);color:var(--ink)}.sb-swatch .meta .hex{font:500 .78rem var(--mono);color:var(--muted)}.sb-swatch .meta .role{color:var(--muted);font-size:.82rem;line-height:1.4}.sb-type{background:var(--surface);border:1px solid var(--line);border-radius:.8rem;flex-direction:column;padding:1.2rem 1.6rem;display:flex}.sb-type .row{border-bottom:1px dashed var(--line);flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:1rem;padding:.6rem 0;display:flex}.sb-type .row:last-child{border-bottom:0}.sb-type .lbl{font:600 .74rem var(--mono);color:var(--muted);white-space:nowrap}.sb-numrow{grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem;display:grid}@media (width<=34rem){.sb-numrow{grid-template-columns:1fr}}.sb-numrow .cell{background:var(--paper);border:1px solid var(--line);border-radius:.5rem;padding:.8rem 1rem}.sb-numrow .cell.bad{border-color:var(--accent)}.sb-numrow .cell .tag{font:600 .72rem var(--mono);color:var(--accent);text-transform:uppercase;letter-spacing:.1em}.sb-numrow .cell.good .tag{color:var(--good)}.sb-numrow .cell .ex{margin-top:.3rem;font-size:1.5rem}.sb-rhythm{grid-template-columns:repeat(2,1fr);gap:1rem;display:grid}@media (width<=40rem){.sb-rhythm{grid-template-columns:1fr}}.sb-tok{background:var(--surface);border:1px solid var(--line);border-radius:.6rem;flex-direction:column;gap:.7rem;padding:1rem 1.2rem;display:flex}.sb-tok .name{font:600 .78rem var(--mono);color:var(--ink)}.sb-tok .val{font:500 .74rem var(--mono);color:var(--muted)}.sb-bar{background:var(--accent);border-radius:4px;height:1rem}.sb-box{background:color-mix(in oklab,var(--accent) 14%,var(--surface));border:1px solid var(--line);width:4rem;height:4rem}.sb-border{border-top:1px solid var(--line);width:100%;height:0}.sb-shad{background:var(--surface);border:1px solid var(--line);width:4rem;height:4rem;box-shadow:var(--shadow)}.sb-mark{grid-template-columns:1fr 1fr;gap:1.2rem;display:grid}@media (width<=46rem){.sb-mark{grid-template-columns:1fr}}.sb-lockup{background:var(--surface);border:1px solid var(--line);border-radius:.8rem;flex-direction:column;justify-content:center;align-items:center;gap:1rem;min-height:12rem;margin:0;padding:2.4rem 1.6rem;display:flex}.sb-lockup .big{font:700 2.4rem var(--mono);letter-spacing:-.01em;align-items:center;gap:.7rem;display:inline-flex}.sb-lockup .big .spark{background:var(--accent);border-radius:3px;width:1.4rem;height:1.4rem;transform:rotate(45deg)}.sb-rules{flex-direction:column;gap:.7rem;margin:0;list-style:none;display:flex}.sb-rule{background:var(--paper);border:1px solid var(--line);border-radius:.6rem;grid-template-columns:4.5rem 1fr;align-items:center;gap:1rem;padding:.7rem .9rem;display:grid}.sb-rule.dont{border-color:var(--accent)}.sb-rule .demo{justify-content:center;align-items:center;height:3rem;display:flex;position:relative}.sb-rule .demo .mini{font:700 1rem var(--mono);align-items:center;gap:.35rem;display:inline-flex}.sb-rule .demo .mini .spark{background:var(--accent);border-radius:2px;width:.6rem;height:.6rem;transform:rotate(45deg)}.sb-rule .demo .mini .bars{align-items:center;gap:.16rem;display:inline-flex}.sb-rule .demo .mini .bar{background:var(--ink);border-radius:1px;width:.7rem;height:.5rem;display:block}.sb-rule .demo .mini .bar:nth-child(2){width:.5rem}.sb-rule .demo .mini .bar:nth-child(3){width:.85rem}.sb-rule .demo .mini .bar:nth-child(4){width:.6rem}.sb-rule.dont .demo .mini{opacity:.6;transform:scaleX(1.6)}.sb-rule.dont.recolor .demo .mini{opacity:1;transform:none}.sb-rule.dont.recolor .demo .mini .spark{background:var(--good)}.sb-rule.dont.recolor .demo .mini .bar{background:var(--accent)}.sb-rule.dont .demo:after{content:"";background:var(--accent);height:2px;position:absolute;top:50%;left:8%;right:8%;transform:rotate(-10deg)}.sb-rule .txt{color:var(--muted);font-size:.86rem;line-height:1.45}.sb-rule .txt b{color:var(--ink);font-weight:650}.sb-spec{grid-template-columns:repeat(2,1fr);gap:1rem;display:grid}@media (width<=40rem){.sb-spec{grid-template-columns:1fr}}.sb-spec .item{background:var(--surface);border:1px solid var(--line);border-radius:.7rem;flex-direction:column;align-items:flex-start;gap:.9rem;padding:1.3rem;display:flex}.sb-spec .cap{font:600 .74rem var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.12em}.sb-quote{width:100%;font:500 .9rem var(--mono);color:var(--muted);border-top:1px solid var(--line);justify-content:space-between;gap:1rem;padding-top:.6rem;display:flex}.sb-quote b{color:var(--ink)}.sb-quote .v{color:var(--accent)}.sb-voice{flex-direction:column;gap:.8rem;max-width:54rem;list-style:none;display:flex}.sb-rule-copy{background:var(--surface);border:1px solid var(--line);border-radius:.6rem;padding:1.1rem 1.3rem}.sb-rule-copy h3{font-size:1.05rem}.sb-dd{grid-template-columns:1fr 1fr;gap:.8rem;margin-top:.7rem;display:grid}@media (width<=36rem){.sb-dd{grid-template-columns:1fr}}.sb-dd .ex{border-radius:.45rem;padding:.7rem .9rem;font-size:.92rem;line-height:1.4}.sb-dd .ex.good{background:color-mix(in oklab,var(--good) 12%,var(--surface));border-left:3px solid var(--good)}.sb-dd .ex.bad{background:color-mix(in oklab,var(--accent) 10%,var(--surface));border-left:3px solid var(--accent);text-decoration:line-through;text-decoration-color:var(--accent)}.sb-dd .ex .t{font:600 .66rem var(--mono);text-transform:uppercase;letter-spacing:.12em;margin-bottom:.25rem;display:block}.sb-dd .ex.good .t{color:var(--good)}.sb-dd .ex.bad .t{color:var(--accent)}