.sb{display:grid;grid-template-columns:300px 1fr;grid-template-rows:56px 1fr;height:100vh;overflow:hidden}.sb__top{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid var(--border-divider-color);background:var(--container-global-color);gap:12px}.sb__brand{display:flex;align-items:center;gap:10px;font-weight:700}.sb__brand small{font-weight:500;color:var(--element-neutral-color)}.sb__tools{display:flex;align-items:center;gap:8px}.sb__side{border-right:1px solid var(--border-divider-color);background:var(--container-global-color);overflow:auto;padding:12px 8px 40px;display:flex;flex-direction:column;gap:2px}.sb__search{margin:4px 4px 10px;padding:8px 10px;border-radius:6px;border:1px solid var(--border-outline-color);background:var(--container-background-color);color:inherit;font:inherit;font-size:13px}.sb__group{padding:12px 10px 4px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--element-neutral-color)}.sb__item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:6px;font-size:13px;color:inherit;text-decoration:none;border:0;background:transparent;text-align:left;font-family:inherit;cursor:pointer;width:100%}.sb__item:hover{background:var(--flat-hover-background-color)}.sb__item.is-active{background:var(--selected-enabled-background-color);color:var(--on-selected-active-color)}.sb__item .sb__pill{margin-left:auto;font-size:10px;padding:1px 6px;border-radius:999px;border:1px solid currentColor;opacity:.7}.sb__main{overflow:auto;padding:32px 40px 80px}.sb__doc{max-width:1120px;display:flex;flex-direction:column;gap:24px}.sb__doc h1{font-size:32px;line-height:40px;margin:0;letter-spacing:-.01em}.sb__doc h2{font-size:22px;line-height:30px;margin:24px 0 0}.sb__doc h3{font-size:16px;margin:12px 0 0}.sb__doc p{margin:0;line-height:24px;max-width:80ch}.sb__doc ul,.sb__doc ol{margin:0;padding-left:20px;line-height:24px}.sb__lead{font-size:18px;line-height:28px;color:var(--element-neutral-color)}.sb__badges{display:flex;gap:6px;flex-wrap:wrap}.sb__canvas-wrap{display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:start}.sb__canvas{border:1px solid var(--border-outline-color);border-radius:12px;background:var(--container-background-color);min-height:240px;padding:32px;display:flex;align-items:center;justify-content:center;position:relative;overflow:auto;background-image:radial-gradient(var(--border-outline-color) 1px,transparent 1px);background-size:16px 16px}.sb__canvas--left{justify-content:flex-start;align-items:flex-start}.sb__canvas-inner{background:var(--container-background-color);padding:8px;border-radius:8px}.sb__controls{border:1px solid var(--border-outline-color);border-radius:12px;background:var(--container-global-color);padding:12px;display:flex;flex-direction:column;gap:10px;position:sticky;top:0}.sb__control{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;font-size:13px}.sb__control input[type=text],.sb__control input[type=number],.sb__control select{font:inherit;font-size:13px;padding:4px 8px;border-radius:6px;border:1px solid var(--border-outline-color);background:var(--container-background-color);color:inherit;width:150px}.sb__control input[type=range]{width:150px}.sb__code{background:var(--container-section-color);border:1px solid var(--border-outline-color);border-radius:8px;padding:12px 14px;font-family:var(--helm-typography-family-mono);font-size:12px;line-height:18px;white-space:pre-wrap;word-break:break-all;margin:0}.sb__gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}.sb__gallery-item{border:1px solid var(--border-outline-color);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:10px;align-items:center;background:var(--container-background-color)}.sb__gallery-item>span{font-size:12px;color:var(--element-neutral-color)}.sb__dodont{display:grid;grid-template-columns:1fr 1fr;gap:12px}.sb__dodont>div{border-radius:10px;padding:12px 14px;border:1px solid var(--border-outline-color)}.sb__dodont>div:first-child{border-left:4px solid var(--helm-running-primary)}.sb__dodont>div:last-child{border-left:4px solid var(--alert-alarm-color)}.sb__dodont h4{margin:0 0 6px;font-size:13px}.sb__swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}.sb__swatch{border-radius:10px;border:1px solid var(--border-outline-color);overflow:hidden;background:var(--container-global-color)}.sb__swatch>div:first-child{height:56px}.sb__swatch>div:last-child{padding:8px 10px;font-size:11px;line-height:16px;display:flex;flex-direction:column;gap:2px}.sb__swatch code{font-family:var(--helm-typography-family-mono);font-size:10px;color:var(--element-neutral-color)}.sb__palette-row{display:grid;grid-template-columns:240px repeat(4,1fr);gap:6px;align-items:center;font-size:12px}.sb__palette-row>div{min-height:36px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:var(--helm-typography-family-mono);font-size:10px;border:1px solid var(--border-outline-color)}.sb__palette-row>code{font-size:11px;word-break:break-all}.sb__table{width:100%;border-collapse:collapse;font-size:13px}.sb__table th,.sb__table td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--border-divider-color);vertical-align:top}.sb__table th{color:var(--element-neutral-color);font-weight:600;font-size:12px}.sb__type-row{display:grid;grid-template-columns:220px 1fr;align-items:baseline;gap:16px;padding:10px 0;border-bottom:1px solid var(--border-divider-color)}.sb__type-row code{font-size:11px;color:var(--element-neutral-color)}.sb__icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}.sb__icon-cell{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;border:1px solid var(--border-outline-color);border-radius:8px;font-size:10px;color:var(--element-neutral-color);text-align:center;word-break:break-all}.sb__space-row{display:flex;align-items:center;gap:12px;font-size:12px}.sb__space-row>i{display:block;height:16px;background:var(--helm-accent-primary);border-radius:2px}.sb__callout{border-left:4px solid var(--helm-accent-primary);background:var(--helm-accent-subtle);border-radius:8px;padding:12px 16px;line-height:22px}.sb__callout--ai{border-color:var(--helm-ai-primary);background:var(--helm-ai-subtle)}.sb__callout--warn{border-color:var(--alert-warning-color);background:var(--alert-warning-container-background-color)}.sb__meta{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;font-size:13px}.sb__meta dt{color:var(--element-neutral-color)}.sb__meta dd{margin:0}.sb__frame-demo{border:1px solid var(--border-outline-color);border-radius:10px;overflow:hidden;background:var(--container-background-color)}.sb__kbd{font-family:var(--helm-typography-family-mono);font-size:11px;padding:0 5px;border:1px solid var(--border-outline-color);border-radius:4px;background:var(--container-section-color)}.sb__cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}.sb__card{border:1px solid var(--border-outline-color);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:6px;background:var(--container-global-color);text-decoration:none;color:inherit}.sb__card:hover{border-color:var(--helm-accent-primary)}.sb__card strong{font-size:14px}.sb__card span{font-size:12px;color:var(--element-neutral-color);line-height:18px}@media(max-width:1000px){.sb{grid-template-columns:1fr}.sb__side{display:none}.sb__canvas-wrap{grid-template-columns:1fr}}