.pg-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem;margin:0 0 1rem}.seg{display:inline-flex;padding:3px;border:1px solid var(--br-border);border-radius:var(--br-radius-control);background-color:var(--br-bg-sunken)}.seg button{display:inline-flex;align-items:center;gap:.375rem;min-height:2.125rem;padding:0 .875rem;border:0;border-radius:8px;background-color:transparent;color:var(--br-text-muted);font:inherit;font-size:var(--br-text-sm);font-weight:500;cursor:pointer}.seg button:hover{color:var(--br-text)}.seg button[aria-checked=true]{background-color:var(--br-surface);color:var(--br-text);box-shadow:var(--br-shadow-1)}.switch{position:relative;display:inline-flex;align-items:center;gap:.625rem;font-size:var(--br-text-sm);font-weight:500;cursor:pointer}.switch input{position:absolute;opacity:0;width:2.25rem;height:1.375rem;margin:0;cursor:pointer}.switch-track{position:relative;width:2.25rem;height:1.375rem;border-radius:var(--br-radius-pill);background-color:var(--br-border-strong);transition:background-color .16s var(--br-ease-out)}.switch-track:after{content:"";position:absolute;left:3px;top:3px;width:1rem;height:1rem;border-radius:50%;background-color:var(--br-surface);box-shadow:var(--br-shadow-1);transition:transform .2s var(--br-ease-out)}.switch input:checked+.switch-track{background-color:var(--br-accent-strong)}.switch input:checked+.switch-track:after{transform:translate(.875rem)}.switch input:focus-visible+.switch-track{outline:2px solid var(--br-focus);outline-offset:2px}.pg-hint{display:inline-flex;align-items:center;gap:.375rem;margin:0 0 0 auto;color:var(--br-text-muted)}.pg-stage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;overflow:hidden;border:1px solid var(--br-border);border-radius:var(--br-radius-stage);box-shadow:var(--br-shadow-2)}.pg-stage[data-view=light],.pg-stage[data-view=dark]{grid-template-columns:minmax(0,1fr)}.pg-stage[data-view=light] [data-theme=dark],.pg-stage[data-view=dark] [data-theme=light]{display:none}.pg-frame{min-width:0;padding:1.25rem 1.5rem 1.75rem;background-color:var(--color-bg-subtle);color:var(--color-text-default)}.pg-frame-label{display:inline-flex;align-items:center;gap:.375rem;margin:0 0 1rem;color:var(--color-text-muted);font-size:var(--br-text-xs);font-weight:600}.sample{font-family:var(--font-family-sans);font-size:var(--font-size-200)}.pg-t{display:contents}.sample-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-5)}.sample-crumb{margin:0 0 var(--space-1);color:var(--color-text-muted);font-size:var(--font-size-200)}.sample-title{margin:0;color:var(--color-text-default);font-family:var(--font-family-sans);font-size:var(--font-size-500);font-weight:var(--font-weight-semibold);letter-spacing:0}.sample-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));align-items:start;gap:var(--space-4)}.pg-stage[data-view=both] .sample-grid{grid-template-columns:minmax(0,1fr)}@media(min-width:1500px){.pg-stage[data-view=both] .sample-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}}.sample-fields{display:grid;gap:var(--space-4)}.sample-list{margin:0}.sample-list>div{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) 0;border-bottom:var(--border-width-1) solid var(--color-border-default)}.sample-list>div:first-child{padding-top:0}.sample-list>div:last-child{padding-bottom:0;border-bottom:0}.sample-list dt{color:var(--color-text-default)}.sample-list dd{margin:0}.show-outlines [data-inspect]:not(.pg-t,.sample),.show-outlines .pg-t>*{outline:1px dashed var(--br-accent);outline-offset:2px}.is-inspected{outline:2px solid var(--br-accent);outline-offset:3px;border-radius:2px}.pg-tip{position:fixed;left:0;top:0;z-index:60;width:min(27rem,calc(100vw - 1rem));padding:.75rem;border:1px solid var(--br-border);border-radius:var(--br-radius-card);background-color:var(--br-surface);color:var(--br-text);box-shadow:var(--br-shadow-3);pointer-events:none;font-family:var(--br-font-ui)}.tip-head{display:flex;align-items:baseline;gap:.5rem;margin-bottom:.5rem;font-size:var(--br-text-sm)}.tip-detail{color:var(--br-text-muted);font-size:var(--br-text-xs)}.tip-theme{margin-left:auto;color:var(--br-text-muted);font-size:var(--br-text-xs)}.tip-list{display:grid;gap:0;margin:0;padding:0;list-style:none}.tip-list li{display:grid;grid-template-columns:.875rem minmax(0,1fr) auto auto;grid-template-areas:"sw name val kind";align-items:center;column-gap:.5rem;margin:0;padding:.25rem .375rem;border-radius:var(--br-radius-sm)}.tip-list li:nth-child(odd){background-color:var(--br-surface-2)}.tip-sw{grid-area:sw;width:.875rem;height:.875rem;border:1px solid var(--br-border);border-radius:4px}.tip-sw.is-scale{border-style:dashed;background-color:transparent}.tip-name{grid-area:name;padding:0;overflow:hidden;background-color:transparent;font-size:.75rem;text-overflow:ellipsis;white-space:nowrap}.tip-val{grid-area:val;max-width:10rem;overflow:hidden;color:var(--br-text-muted);font-family:var(--br-font-mono);font-size:.6875rem;text-overflow:ellipsis;white-space:nowrap}.tip-kind{grid-area:kind;display:grid;place-items:center;width:1.125rem;height:1.125rem;border-radius:4px;background-color:var(--br-info-soft);color:var(--br-info);font-size:.625rem;font-weight:700}.tip-kind.is-semantic{background-color:var(--br-accent-soft);color:var(--br-accent-text)}.tip-more{margin:.5rem 0 0;color:var(--br-text-muted);font-size:var(--br-text-xs)}.knobs{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);gap:1rem}.knob{position:relative;display:flex;flex-direction:column;min-width:0;margin:0;padding:1.25rem 1.25rem 1rem;border:1px solid var(--br-border);border-radius:var(--br-radius-stage);background-color:var(--br-surface);box-shadow:var(--br-shadow-2)}.knob legend{float:left;width:100%;padding:0;font-family:var(--br-font-display);font-size:var(--br-text-lg);font-weight:600;letter-spacing:-.015em}.knob-value{clear:both;display:flex;align-items:baseline;gap:.5rem;margin:.125rem 0 1rem;color:var(--br-accent-text);font-size:var(--br-text-sm);font-weight:600}.knob-num{color:var(--br-text-muted);font-weight:500}.knob-foot{margin:auto 0 0;padding-top:.75rem;border-top:1px dashed var(--br-border);color:var(--br-text-muted);font-size:.6875rem}.radius-picks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;margin-bottom:1rem}.radius-pick{position:relative;display:grid;justify-items:center;gap:.5rem;padding:.75rem .25rem .625rem;border:1px solid var(--br-border);border-radius:var(--br-radius-card);background-color:var(--br-surface-2);color:var(--br-text-muted);font-size:var(--br-text-xs);font-weight:500;text-align:center;cursor:pointer;box-shadow:var(--br-shadow-1);transition:transform .16s var(--br-ease-out),border-color .16s var(--br-ease-out)}.radius-pick:hover{border-color:var(--br-border-strong)}.radius-pick:has(input:checked){border-color:var(--br-text);background-color:var(--br-surface);color:var(--br-text);box-shadow:var(--br-shadow-press);transform:translateY(1px)}.radius-pick:has(input:focus-visible){outline:2px solid var(--br-focus);outline-offset:2px}.radius-pick input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}.radius-shape{width:2.25rem;height:1.75rem;border:2px solid currentcolor;border-right:0;border-bottom:0}.radius-pick:has(input:checked) .radius-shape{border-color:var(--br-accent)}.r-square .radius-shape{border-radius:0}.r-shipped .radius-shape{border-top-left-radius:6px}.r-soft .radius-shape{border-top-left-radius:12px}.r-pill .radius-shape{border-top-left-radius:1.75rem}.knob input[type=range]{width:100%;height:1.75rem;margin:.25rem 0 0;background-color:transparent;cursor:pointer;appearance:none}.knob input[type=range]::-webkit-slider-runnable-track{height:.5rem;border-radius:var(--br-radius-pill);background-color:var(--br-bg-sunken);box-shadow:var(--br-shadow-press)}.knob input[type=range]::-moz-range-track{height:.5rem;border-radius:var(--br-radius-pill);background-color:var(--br-bg-sunken)}.knob input[type=range]::-webkit-slider-thumb{width:1.5rem;height:1.5rem;margin-top:-.5rem;border:2px solid var(--br-surface);border-radius:50%;background-color:var(--br-accent-strong);box-shadow:var(--br-shadow-2);appearance:none}.knob input[type=range]::-moz-range-thumb{width:1.25rem;height:1.25rem;border:2px solid var(--br-surface);border-radius:50%;background-color:var(--br-accent-strong);box-shadow:var(--br-shadow-2)}.knob input[type=range]:focus-visible{outline:2px solid var(--br-focus);outline-offset:4px}.range-labels{display:flex;justify-content:space-between;margin:.25rem 0 .75rem;color:var(--br-text-muted);font-size:var(--br-text-xs)}.density-scale{display:flex;align-items:flex-end;gap:.375rem;height:3rem;margin-bottom:.5rem}.density-scale span{flex:1;height:100%;border-radius:6px;background-color:var(--br-data-2);opacity:.85;transition:margin .24s var(--br-ease-out)}.knob-density[data-step="0"] .density-scale{gap:.125rem}.knob-density[data-step="2"] .density-scale{gap:.875rem}.type-ladder{display:flex;align-items:baseline;gap:.5rem;height:3rem;margin-bottom:.5rem;overflow:hidden;color:var(--br-text);font-family:var(--br-font-display);font-weight:600;line-height:1}.type-ladder span{transition:font-size .24s var(--br-ease-out)}.tactile-note{display:flex;align-items:center;gap:.5rem;margin:1rem 0 0;color:var(--br-text-muted)}@media(max-width:1100px){.pg-stage,.knobs{grid-template-columns:minmax(0,1fr)}}@media(max-width:640px){.pg-hint{display:none}.pg-frame{padding:1rem}.radius-picks{grid-template-columns:repeat(2,minmax(0,1fr))}}