.field[data-astro-cid-wul7fgjm]{gap:var(--space-2);display:grid}label[data-astro-cid-wul7fgjm]{font-family:var(--font-display);font-weight:700;font-stretch:125%;font-size:var(--fs-small);line-height:20px}input[data-astro-cid-wul7fgjm],textarea[data-astro-cid-wul7fgjm]{width:100%;padding:var(--space-4);border-radius:var(--radius-control);border:var(--hairline-thin) solid var(--border-control);background:var(--surface);color:var(--text);font:inherit;font-size:var(--fs-body);line-height:var(--lh-body)}textarea[data-astro-cid-wul7fgjm]{resize:vertical;min-height:140px}input[data-astro-cid-wul7fgjm]::placeholder,textarea[data-astro-cid-wul7fgjm]::placeholder{color:var(--text-2)}input[data-astro-cid-wul7fgjm]:focus-visible,textarea[data-astro-cid-wul7fgjm]:focus-visible{outline:3px solid var(--focus);outline-offset:2px}input[data-astro-cid-wul7fgjm][aria-invalid=true],textarea[data-astro-cid-wul7fgjm][aria-invalid=true]{border-color:var(--status-error)}.hint[data-astro-cid-wul7fgjm]{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--text-2)}.error[data-astro-cid-wul7fgjm]{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--status-error)}.error[data-astro-cid-wul7fgjm]:empty{display:none}.sg{background:var(--bg);grid-template-columns:272px minmax(0,1fr);height:100vh;display:grid;overflow:hidden}.sg code{background:var(--surface-subtle);border-radius:4px;padding:1px 6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em}.sg-side{overscroll-behavior:contain;border-right:var(--hairline-thin) solid var(--border);background:var(--bg-2);height:100vh;padding:var(--space-6) var(--space-4);gap:var(--space-6);flex-direction:column;display:flex;position:relative;overflow-y:auto}.sg-brand{gap:var(--space-2);padding:0 var(--space-2);flex-direction:column;align-items:flex-start;display:flex}.sg-brand strong{font-family:var(--font-display);font-size:15px;font-stretch:125%;line-height:20px;display:block}.sg-brand span{color:var(--text-2);font-size:12px}.sg-logo{width:auto;max-width:none;height:56px;display:block}.sg-navgroup{margin-bottom:var(--space-4);gap:2px;display:grid}.sg-navlabel{color:var(--text-2);padding:0 var(--space-3) var(--space-1);letter-spacing:.04em;font-size:12px;font-weight:600}.sg-navgroup a{align-items:center;gap:var(--space-3);padding:7px var(--space-3);border-radius:var(--radius-control);color:var(--text);font-size:15px;line-height:20px;text-decoration:none;display:flex}.sg-navgroup a .material-symbols-rounded{color:var(--text-2);font-size:20px}.sg-navgroup a:hover{background:var(--surface-subtle);color:var(--text)}.sg-navgroup a[aria-current=true]{background:var(--surface-subtle);color:var(--action);font-weight:600}.sg-navgroup a[aria-current=true] .material-symbols-rounded{color:var(--action)}.sg-side-foot{color:var(--text-2);padding:0 var(--space-2);margin-top:auto;font-size:12px;line-height:18px}.sg-main{height:100vh;padding:var(--space-14) clamp(24px, 4vw, 64px) 120px;overflow-y:auto}.sg-main>.sg-sec{max-width:1280px}.sg-sec{padding-bottom:var(--space-24);scroll-margin-top:var(--space-8)}.sg-sec+.sg-sec{border-top:var(--hairline-thin) solid var(--border);padding-top:var(--space-14)}.sg-eyebrow{font-size:var(--fs-small);letter-spacing:.08em;text-transform:uppercase;color:var(--action);margin-bottom:var(--space-3);font-weight:600}.sg-title{max-width:18ch;margin-bottom:var(--space-4);font-size:48px;line-height:56px}.sg-lede{font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--text-2);max-width:60ch}.sg-h2{font-size:var(--fs-h2);line-height:var(--lh-h2);margin-bottom:var(--space-3)}.sg-h3{margin:var(--space-8) 0 var(--space-3);font-size:20px;line-height:28px}.sg-p{color:var(--text-2);max-width:64ch;margin-bottom:var(--space-6)}.sg-cards{gap:var(--space-4);margin:var(--space-10) 0 var(--space-6);grid-template-columns:repeat(auto-fill,minmax(180px,1fr));display:grid}.sg-card{border:var(--hairline-thin) solid var(--border);border-radius:var(--radius-card);padding:var(--space-4) var(--space-6)}.sg-card b{font-family:var(--font-display);font-size:32px;font-stretch:125%;line-height:40px;display:block}.sg-card span{font-size:var(--fs-small);color:var(--text-2)}.sg-note,.sg-empty{gap:var(--space-3);padding:var(--space-4) var(--space-6);border-radius:var(--radius-card);background:var(--surface-subtle);max-width:760px;font-size:16px;line-height:24px;display:flex}.sg-note .material-symbols-rounded,.sg-empty .material-symbols-rounded{color:var(--action)}.sg-rules{gap:var(--space-3);max-width:72ch;padding-left:1.2em;display:grid}.sg-list{gap:var(--space-2);max-width:72ch;margin-top:var(--space-6);padding-left:1.2em;display:grid}.sg-ramp{margin-bottom:var(--space-8)}.sg-ramp h3{margin-bottom:var(--space-3);text-transform:capitalize;font-size:16px;line-height:20px}.sg-swatches{gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(132px,1fr));display:grid}.sg-sw{all:unset;cursor:pointer;border:var(--hairline-thin) solid var(--border);border-radius:var(--radius-tile);background:var(--surface);display:grid;overflow:hidden}.sg-sw:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.sg-sw i{border-bottom:var(--hairline-thin) solid var(--border);height:64px;display:block}.sg-sw span{padding:var(--space-2) var(--space-3) 0;word-break:break-all;font-size:12px;font-weight:600;line-height:16px}.sg-sw small{padding:2px var(--space-3) var(--space-2);color:var(--text-2);font-family:ui-monospace,Menlo,monospace;font-size:12px;line-height:16px}.sg-tablewrap{border:var(--hairline-thin) solid var(--border);border-radius:var(--radius-card);overflow-x:auto}.sg-table{border-collapse:collapse;width:100%;font-size:14px;line-height:20px}.sg-table th{text-align:left;color:var(--text-2);background:var(--bg-2);padding:var(--space-3) var(--space-4);border-bottom:var(--hairline-thin) solid var(--border);font-weight:600}.sg-table td{padding:var(--space-3) var(--space-4);border-bottom:var(--hairline-thin) solid var(--border);vertical-align:middle}.sg-table tr:last-child td{border-bottom:0}.sg-tok{all:unset;cursor:pointer;font-family:ui-monospace,Menlo,monospace;font-size:13px;font-weight:600}.sg-tok:hover{color:var(--action)}.sg-val{align-items:center;gap:var(--space-2);color:var(--text-2);font-family:ui-monospace,Menlo,monospace;font-size:12px;display:flex}.sg-val i{border:var(--hairline-thin) solid var(--border);border-radius:6px;flex:none;width:28px;height:28px}.sg-ratio{font-variant-numeric:tabular-nums;font-weight:700}.sg-pass{color:var(--status-success)}.sg-fail{color:var(--status-error)}.sg-pairdemo{margin-right:var(--space-2);border-radius:4px;padding:2px 8px;font-weight:600;display:inline-block}.sg-skies{gap:var(--space-6);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.sg-skies figure,.sg-brandgrid figure{margin:0}.sg-sky{border-radius:var(--radius-card);border:var(--hairline-thin) solid var(--border);height:180px}.sg-stack{aspect-ratio:1672/941;height:auto;position:relative;overflow:hidden}.sg-stack img{object-fit:cover;width:100%;height:100%;transition:transform var(--dur-still) var(--ease-out);position:absolute;inset:0}.sg-stack img.sg-orb{aspect-ratio:1;height:auto;inset:auto}.sg-stack img.sg-orb-morning{width:17.9%;top:35.1%;left:75.3%}.sg-stack img.sg-orb-night{width:10.5%;top:9.6%;left:78.4%}.sg-stack:hover [data-layer^="4-"]{transform:translate(14px,-6px)}.sg-stack:hover [data-layer^="5-"]{transform:translate(28px,-10px)}.sg-stack:hover [data-layer^="6-"]{transform:translate(-14px,6px)}.sg-stack:hover [data-layer^="7-"]{transform:translate(-28px,10px)}.sg-stack:hover [data-layer^="3-"]{transform:translateY(-8px)}@media (prefers-reduced-motion:reduce){.sg-stack img{transition:none}}.sg-brand3 .sg-logo-tile{height:180px}.sg-skies figcaption,.sg-brandgrid figcaption{color:var(--text-2);margin-top:var(--space-2);font-size:14px;line-height:20px}.sg-fidelity{gap:var(--space-2);margin:0 0 var(--space-6);grid-template-columns:repeat(5,1fr);padding:0;font-size:13px;line-height:18px;list-style:none;display:grid}.sg-fidelity li{border:var(--hairline-thin) solid var(--border);border-radius:var(--radius-tile);padding:var(--space-3);color:var(--text-2)}.sg-fidelity b{color:var(--text);display:block}.sg-grain-demo{gap:var(--space-4);grid-template-columns:1fr 1fr;display:grid}.sg-grain-demo>div{border-radius:var(--radius-card);border:var(--hairline-thin) solid var(--border);height:120px;color:var(--text-2);place-items:center;font-size:14px;display:grid;overflow:hidden}.sg-typerow{gap:var(--space-6);padding:var(--space-6) 0;border-bottom:var(--hairline-thin) solid var(--border);grid-template-columns:180px minmax(0,1fr);align-items:baseline;display:grid}.sg-typemeta{color:var(--text-2);font-size:13px;line-height:18px}.sg-typemeta b{color:var(--text);font-size:14px;display:block}.sg-typesample{overflow-wrap:anywhere}.sg-spacerow{gap:var(--space-4);grid-template-columns:140px 64px minmax(0,1fr);align-items:center;padding:6px 0;font-size:13px;display:grid}.sg-spacerow i{background:var(--action);opacity:.85;border-radius:2px;height:16px;display:block}.sg-spacerow code{background:0 0;padding:0}.sg-radii{gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(150px,1fr));display:grid}.sg-radius{all:unset;cursor:pointer;gap:var(--space-2);color:var(--text-2);font-size:13px;line-height:18px;display:grid}.sg-radius i{background:var(--surface-subtle);border:var(--hairline) solid var(--action);height:96px;display:block}.sg-radius b{color:var(--text);font-family:ui-monospace,Menlo,monospace;font-size:13px}.sg-elev{gap:var(--space-10);padding:var(--space-6) 0;grid-template-columns:1fr 1fr;display:grid}.sg-elev-card{border-radius:var(--radius-state);background:var(--surface);padding:var(--space-8);flex-direction:column;justify-content:flex-end;gap:4px;min-height:160px;display:flex}.sg-elev-card b{font-family:ui-monospace,Menlo,monospace;font-size:14px}.sg-elev-card span{color:var(--text-2);font-size:14px}.sg-frost-demo{padding:var(--space-6);background:linear-gradient(135deg, var(--sky-morning-1), var(--sky-morning-3))}.sg-frost-demo>div{border-radius:var(--radius-card);padding:var(--space-6);gap:4px;display:grid}.sg-motion{gap:var(--space-4);margin-bottom:var(--space-6);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.sg-mo{min-height:150px;padding:var(--space-4);border:var(--hairline-thin) solid var(--border);border-radius:var(--radius-card);color:var(--text);flex-direction:column;justify-content:flex-end;gap:2px;font-size:14px;text-decoration:none;display:flex;position:relative;overflow:hidden}.sg-mo span{color:var(--text-2);font-size:12px;line-height:16px}.sg-mo-color{transition:background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out)}.sg-mo-color:hover{background:var(--action);color:var(--text-on-action)}.sg-mo-color:hover span{color:inherit}.sg-mo-link u{transition:background-size var(--dur-link) var(--ease-out);background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;text-decoration:none}.sg-mo-link:hover u{background-size:100% 2px}.sg-mo-still>div{background:linear-gradient(135deg, var(--sky-morning-2), var(--sky-morning-3));transition:transform var(--dur-still) var(--ease-out);position:absolute;inset:0 0 56px}.sg-mo-still:hover>div{transform:scale(1.02)}.sg-mo-drift i{background:var(--sky-morning-3);border-radius:999px;position:absolute}.sg-mo-drift .far{opacity:.6;width:60px;height:22px;animation:sg-drift-far calc(var(--drift-far) / 10) ease-in-out infinite alternate;top:22px;left:20px}.sg-mo-drift .near{width:96px;height:34px;animation:sg-drift-near calc(var(--drift-near) / 10) ease-in-out infinite alternate;top:52px;right:14px}@keyframes sg-drift-far{to{transform:translate(14px)}}@keyframes sg-drift-near{to{transform:translate(-18px)}}@media (prefers-reduced-motion:reduce){.sg-mo-drift i{animation:none}.sg-mo-still>div{transition:none}}.sg-grid-frame{--s:.6;width:calc(1440px * var(--s));aspect-ratio:1440/220;background:color-mix(in srgb, var(--c-pink-dawn) 35%, transparent);border:var(--hairline-thin) solid var(--border);border-radius:var(--radius-tile);max-width:100%;padding:0 8.33333%;display:flex}.sg-grid-content{flex:1;grid-template-columns:repeat(12,1fr);column-gap:2%;display:grid}.sg-grid-content span{background:color-mix(in srgb, var(--action) 22%, transparent);color:var(--action);place-items:end center;padding-bottom:6px;font-size:11px;display:grid}.sg-grid-legend{gap:var(--space-6);color:var(--text-2);margin:var(--space-3) 0 var(--space-6);font-size:13px;display:flex}.sg-grid-legend i{vertical-align:-1px;border-radius:2px;width:12px;height:12px;margin-right:6px;display:inline-block}.sg-grid-legend .g{background:color-mix(in srgb, var(--c-pink-dawn) 35%, transparent);border:1px solid var(--border)}.sg-grid-legend .c{background:color-mix(in srgb, var(--action) 22%, transparent)}.sg-grid-legend .x{background:var(--bg);border:1px solid var(--border)}.sg-btn{align-items:center;gap:var(--space-2);font:600 var(--fs-ui)/var(--lh-ui) var(--font-body);background:var(--action);color:var(--text-on-action);border-radius:var(--radius-control);cursor:pointer;transition:background var(--dur-fast) var(--ease-out);border:0;padding:12px 18px;display:inline-flex}.sg-btn:hover{background:var(--action-hover)}.sg-btn:active{background:var(--action-pressed)}.sg-overlay{pointer-events:none;z-index:50;justify-content:center;display:flex;position:fixed;inset:0}.sg-overlay[hidden]{display:none}.sg-overlay>div{width:min(var(--content), 100% - 2 * var(--gutter));column-gap:var(--col-gap);grid-template-columns:repeat(12,1fr);display:grid}.sg-overlay span{background:color-mix(in srgb, var(--c-pink-vivid) 10%, transparent);border-inline:1px solid color-mix(in srgb, var(--c-pink-vivid) 30%, transparent)}.sg-icons{gap:var(--space-2);grid-template-columns:repeat(auto-fill,minmax(120px,1fr));display:grid}.sg-icon{all:unset;cursor:pointer;justify-items:center;gap:var(--space-2);padding:var(--space-4) var(--space-2);border-radius:var(--radius-tile);border:var(--hairline-thin) solid var(--border);color:var(--text-2);text-align:center;font-size:12px;display:grid}.sg-icon:hover{border-color:var(--action);color:var(--action)}.sg-icon .material-symbols-rounded{color:var(--text);font-size:28px}.sg-brandgrid{gap:var(--space-6);grid-template-columns:1fr 1fr;display:grid}.sg-logo-tile{border-radius:var(--radius-card);border:var(--hairline-thin) solid var(--border);background:var(--bg-2);height:260px;padding:var(--space-8);place-items:center;display:grid}.sg-logo-tile img{width:175px;height:auto}.sg-story{border:var(--hairline-thin) solid var(--border);border-radius:var(--radius-card);padding:var(--space-6);margin-bottom:var(--space-6)}.sg-story header{align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.sg-story header .sg-h3{margin:0}.sg-story header a{margin-left:auto;font-size:14px}.sg-pill{letter-spacing:.06em;text-transform:uppercase;border-radius:var(--radius-pill);background:var(--surface-subtle);color:var(--action);padding:2px 8px;font-size:11px;font-weight:700}.sg-stage{margin-top:var(--space-4);padding:var(--space-8);border-radius:var(--radius-tile);background:var(--bg-2)}.sg-toast{opacity:0;background:var(--surface-inverse);color:var(--c-neutral-white);border-radius:var(--radius-pill);transition:opacity var(--dur-fast), transform var(--dur-fast);z-index:60;padding:10px 16px;font-size:14px;position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px)}.sg-toast.on{opacity:1;transform:translate(-50%)}@media (width<=900px){.sg{grid-template-columns:1fr;height:auto;overflow:visible}.sg-side{height:auto;max-height:46vh}.sg-main{height:auto;overflow:visible}.sg-skies,.sg-brandgrid,.sg-elev,.sg-grain-demo{grid-template-columns:1fr}.sg-motion,.sg-fidelity{grid-template-columns:1fr 1fr}.sg-typerow{grid-template-columns:1fr}}.sg-brand{color:inherit;text-decoration:none}.sg-navgroup a[aria-current=page]{background:var(--surface-subtle);color:var(--action);font-weight:600}.sg-navgroup a[aria-current=page] .material-symbols-rounded{color:var(--action)}.sg-navgroup--components a{padding-left:calc(var(--space-3) + 8px);font-size:14px}.sg-group{margin-top:var(--space-14)}.sg-cardgrid{margin:var(--space-4) 0 0;gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(260px,1fr));padding:0;list-style:none;display:grid}.sg-compcard{gap:var(--space-2);height:100%;padding:var(--space-4) var(--space-6);border:var(--hairline-thin) solid var(--border);border-radius:var(--radius-card);color:var(--text);background:var(--surface);transition:border-color var(--dur-fast) var(--ease-out);align-content:start;text-decoration:none;display:grid}.sg-compcard:hover{border-color:var(--action)}.sg-compcard-top{justify-content:space-between;align-items:center;gap:var(--space-2);display:flex}.sg-compcard-top strong{font-family:var(--font-display);font-size:16px;font-stretch:125%;line-height:22px}.sg-compcard-note{color:var(--text-2);font-size:14px;line-height:20px}.sg-compcard-figma{color:var(--text-2);font-family:ui-monospace,Menlo,monospace;font-size:12px}.sg-crumb{color:var(--text-2);margin-bottom:var(--space-4);gap:var(--space-2);font-size:14px;display:flex}.sg-crumb a{color:var(--text-2)}.sg-comp-head{align-items:center;gap:var(--space-3);margin-bottom:var(--space-3);flex-wrap:wrap;display:flex}.sg-comp-head .sg-title{max-width:none;margin:0}.sg-figma{margin-left:auto;font-size:14px}.sg-tools{align-items:center;gap:var(--space-4);margin:var(--space-8) 0 var(--space-4);flex-wrap:wrap;display:flex}.sg-seg{border:var(--hairline-thin) solid var(--border);border-radius:var(--radius-control);display:inline-flex;overflow:hidden}.sg-seg button{font:600 14px/20px var(--font-body);background:var(--surface);color:var(--text);cursor:pointer;border:0;align-items:baseline;gap:6px;padding:8px 14px;display:inline-flex}.sg-seg button+button{border-left:var(--hairline-thin) solid var(--border)}.sg-seg button small{color:var(--text-2);font-size:12px;font-weight:400}.sg-seg button[aria-pressed=true]{background:var(--surface-subtle);color:var(--action)}.sg-seg button:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}.sg-open{margin-left:auto;font-size:14px}.sg-frame-wrap{background:var(--bg-2);border:var(--hairline-thin) solid var(--border);border-radius:var(--radius-card);padding:var(--space-4);overflow-x:auto}.sg-frame{background:var(--bg);border-radius:var(--radius-tile);min-height:200px;box-shadow:0 0 0 var(--hairline-thin) var(--border);transition:width var(--dur-fast) var(--ease-out);border:0;margin-inline:auto;display:block}.sg-meta{margin-top:var(--space-4);color:var(--text-2);font-size:13px}.sg-pager{justify-content:space-between;gap:var(--space-4);margin-top:var(--space-14);padding-top:var(--space-6);border-top:var(--hairline-thin) solid var(--border);font-weight:600;display:flex}@media (prefers-reduced-motion:reduce){.sg-frame{transition:none}}.sg-navgroup--components{margin-bottom:0}.sg-navgroup--components summary{cursor:pointer;padding:7px var(--space-3);border-radius:var(--radius-control);color:var(--text);justify-content:space-between;align-items:center;font-size:14px;font-weight:600;list-style:none;display:flex}.sg-navgroup--components summary::-webkit-details-marker{display:none}.sg-navgroup--components summary:after{content:"+";color:var(--text-2);margin-left:var(--space-2);font-weight:400}.sg-navgroup--components[open] summary:after{content:"–"}.sg-navgroup--components summary:hover{background:var(--surface-subtle)}.sg-navgroup--components summary>span:first-child{flex:1}.sg-count{color:var(--text-2);font-size:12px;font-weight:400}.sg-fit{background:var(--bg-2);border:var(--hairline-thin) solid var(--border);border-radius:var(--radius-card);padding:16px;position:relative;overflow:hidden}.sg-fit-inner{transform-origin:0 0;margin-inline:auto}.sg-fit-inner .sg-frame{max-width:none;margin:0;display:block}.sg-scale{color:var(--text-2);font-size:13px}.sg-elevgrid{gap:var(--space-6);padding:var(--space-6) 0;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));display:grid}.sg-elevtile{min-height:150px;padding:var(--space-4);border-radius:var(--radius-card);background:var(--surface);flex-direction:column;gap:6px;display:flex}.sg-elevtile b{font-size:15px}.sg-elevtile code{color:var(--text-2);font-size:12px}.sg-elevtile span{color:var(--text-2);font-size:13px;line-height:18px}.sg-elevnight{padding:var(--space-4) var(--space-6);border-radius:var(--radius-card);background:var(--bg)}.sg-elevnight .sg-elevtile b{color:var(--text)}.sg-skyshadows{gap:var(--space-6);padding:var(--space-6) 0;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));display:grid}.sg-sky-demo{min-height:220px;padding:var(--space-6) var(--space-4) var(--space-10);border-radius:var(--radius-card);place-items:center;display:grid;position:relative;overflow:hidden}.sg-sky-demo span{color:var(--text-2);font-size:12px;position:absolute;bottom:10px;left:14px}.sg-cloud{width:190px;aspect-ratio:var(--cloud-1-ar);background:var(--cloud-1) center / contain no-repeat;display:block}.sg-orb{aspect-ratio:1;background:radial-gradient(circle at 50% 55%, var(--c-sunrise-light), var(--c-sunrise-pale));border-radius:50%;width:90px;display:block}.sg-orb--moon{background:radial-gradient(circle at 40% 40%, var(--c-neutral-white), var(--c-ivory-moon))}