.sg-demo{border:1px dashed #ffffff24;padding:2rem;position:relative}.sg-demo--tight{padding:1.25rem}.sg-demo__label{font-family:var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:#8a9a9e;background:#0f131a;padding:0 .5rem;font-size:10px;position:absolute;top:0;left:1rem;transform:translateY(-50%)}.sg-swatch{border:1px solid #ffffff1f}.sg-swatch__chip{background-image:linear-gradient(45deg,#ffffff0d 25%,#0000 25%),linear-gradient(-45deg,#ffffff0d 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#ffffff0d 75%),linear-gradient(-45deg,#0000 75%,#ffffff0d 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;height:6.5rem}.sg-swatch__fill{width:100%;height:100%}.sg-table{border-collapse:collapse;width:100%;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:12px}.sg-table th,.sg-table td{text-align:left;vertical-align:top;border-bottom:1px solid #ffffff14;padding:.6rem 1rem .6rem 0}.sg-table th{color:#8a9a9e;text-transform:uppercase;letter-spacing:.14em;white-space:nowrap;font-size:10px;font-weight:400}.sg-table td{color:#d0d5d9}.sg-table code{color:#ffd600}.sg-scroll{max-width:100%;overflow-x:auto}.sg-rule{color:#d0d5d9;border-bottom:1px solid #ffffff0f;gap:.75rem;padding:.6rem 0;font-size:.95rem;line-height:1.55;display:flex}.sg-rule__mark{font-family:var(--font-mono);letter-spacing:.1em;flex:none;padding-top:.25rem;font-size:11px}.sg-rule--do .sg-rule__mark{color:#ffd600}.sg-rule--dont .sg-rule__mark{color:#8a9a9e}.sg-curve{background:#1e242b;border:1px solid #ffffff1a}.sg-cols{grid-template-columns:repeat(12,1fr);gap:1.5rem;display:grid}.sg-cols span{background:#ffd60024;border-top:2px solid #ffd600;height:3.5rem}.sg-bar{background:#ffd600;height:.6rem}.sg-jump{z-index:30;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:sticky;top:6rem}