.S2-IWq_viewport{width:100%;height:100%;position:relative;overflow:hidden}.S2-IWq_stage{position:absolute;inset:0}.S2-IWq_frame{transform-origin:0 0;background:0 0;border:0;max-width:none;display:block}
.q_bhLq_app{color:#0f172a;background:#f8fafc;flex-direction:column;height:100svh;min-height:42rem;display:flex}.q_bhLq_header{flex-shrink:0;padding:1rem;display:flex}.q_bhLq_headerNav{background:#fff;border:1px solid #e2e8f0;border-radius:1rem;justify-content:space-between;align-items:center;width:100%;height:4rem;padding:0 1rem;display:flex;box-shadow:0 1px 2px #0000000d}.q_bhLq_brand,.q_bhLq_home{align-items:center;display:flex}.q_bhLq_brand{gap:1.25rem;min-width:0}.q_bhLq_home{border-radius:.5rem;flex-shrink:0}.q_bhLq_logo{object-fit:contain;width:auto;max-width:150px;height:2.5rem;padding-block:.25rem}.q_bhLq_brand h1{letter-spacing:-.025em;font-size:1.125rem;font-weight:700}.q_bhLq_divider{background:#e2e8f0;width:1px;height:1.25rem}.q_bhLq_headerActions{flex-shrink:0;align-items:center;gap:.25rem;display:flex}.q_bhLq_workspace{border-top:1px solid #e2e8f0;flex:1;grid-template-columns:18rem minmax(0,1fr);min-height:0;display:grid}.q_bhLq_inspector{background:#fff;border-right:1px solid #e2e8f0;flex-direction:column;gap:1.25rem;padding:1.5rem;display:flex;overflow-y:auto}.q_bhLq_introduction h2{letter-spacing:-.025em;font-size:1.125rem;font-weight:700;line-height:1.5}.q_bhLq_swatches{gap:.5rem;display:grid}.q_bhLq_swatch{text-align:left;border:1px solid #0000000a;border-radius:0;flex-direction:column;justify-content:space-between;align-items:flex-start;min-height:6rem;padding:1rem 1.1rem;display:flex}.q_bhLq_swatchLabel{opacity:.65;font-size:.65rem}.q_bhLq_swatchValue{justify-content:space-between;align-items:center;width:100%;font-family:ui-monospace,monospace;font-size:.85rem;display:flex}.q_bhLq_swatchValue svg{opacity:.55}.q_bhLq_copyActions{gap:.65rem;display:grid}.q_bhLq_copyAll{color:#fff;background:#262626;border-radius:.2rem;justify-content:center;align-items:center;gap:.6rem;width:100%;min-height:2.5rem;font-size:.72rem;font-weight:400;transition:background-color .1s;display:flex}.q_bhLq_copyAll:hover{background:#404040}.q_bhLq_copyAll:focus-visible{outline-offset:3px;outline:2px solid #525252}.q_bhLq_applyHelp{font-size:.75rem;line-height:1.7}.q_bhLq_applyHelp summary{color:var(--button-brand);cursor:pointer;border-radius:.25rem;align-items:center;gap:.35rem;list-style:none;display:inline-flex}.q_bhLq_applyHelp summary::-webkit-details-marker{display:none}.q_bhLq_applyHelp summary svg{width:.875rem;height:.875rem;transition:transform .1s}.q_bhLq_applyHelp[open] summary svg{transform:rotate(180deg)}.q_bhLq_applyHelp p{color:#64748b;margin-top:.5rem}.q_bhLq_copyStatus{color:#475569;min-height:1rem;font-size:.75rem;line-height:1.5}.q_bhLq_reference{gap:.9rem;margin-top:auto;display:grid}.q_bhLq_sampleDetails{color:#475569;font-size:.75rem;line-height:1.65}.q_bhLq_sampleDetails>div{grid-template-columns:4.5rem minmax(0,1fr);gap:.6rem;padding:.1rem 0;display:grid}.q_bhLq_sampleDetails dt{color:#64748b}.q_bhLq_sampleDetails dd{overflow-wrap:anywhere;margin:0}.q_bhLq_canvas{flex-direction:column;min-width:0;min-height:0;display:flex}.q_bhLq_previewScroll{cursor:pointer;flex:1;min-height:0;overflow:hidden}.q_bhLq_previewScroll:focus-visible{outline:2px solid var(--button-brand);outline-offset:-3px}.q_bhLq_swatch:focus-visible,.q_bhLq_home:focus-visible,.q_bhLq_applyHelp summary:focus-visible{outline:2px solid var(--button-brand);outline-offset:3px}@media (max-width:800px){.q_bhLq_app{height:auto;min-height:100svh}.q_bhLq_header{padding:.75rem}.q_bhLq_headerNav{padding-inline:.75rem}.q_bhLq_brand{gap:.75rem}.q_bhLq_brand h1{font-size:1rem}.q_bhLq_workspace{flex-direction:column;display:flex}.q_bhLq_canvas{height:64svh;min-height:24rem}.q_bhLq_inspector{border-top:1px solid #e2e8f0;border-right:0;order:2;gap:1rem;padding:1.5rem 1rem;overflow:visible}.q_bhLq_swatches{grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem}.q_bhLq_swatch{min-height:6rem;padding:.75rem}.q_bhLq_swatchValue{font-size:.7rem}.q_bhLq_swatchValue svg{width:12px}.q_bhLq_copyStatus:empty{display:none}}@media (max-width:480px){.q_bhLq_brand{gap:.5rem}.q_bhLq_logo{max-width:104px;height:2rem;padding-block:0}.q_bhLq_brand h1{font-size:.875rem}}@media (prefers-reduced-motion:reduce){.q_bhLq_app *,.q_bhLq_app :before,.q_bhLq_app :after{transition:none!important;animation:none!important}}