@layer site.reset{*,:before,:after{box-sizing:border-box}}html{background-color:var(--gok-color-bg)}body{background-color:var(--gok-color-bg);color:var(--gok-color-text);font-family:var(--gok-font-family-text);font-size:var(--gok-type-body-regular-size);line-height:var(--gok-type-body-regular-line);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;transition:background-color var(--gok-motion-duration-moderate) var(--gok-motion-ease-standard), color var(--gok-motion-duration-moderate) var(--gok-motion-ease-standard);margin:0}.wrap{box-sizing:border-box;inline-size:100%;max-inline-size:var(--gok-container-content);padding-inline:var(--gok-container-inline-pad);margin-inline:auto}code{font-family:var(--gok-font-family-mono)}.topbar{z-index:var(--gok-z-sticky);justify-content:space-between;align-items:center;gap:var(--gok-space-400);padding-block:var(--gok-space-400);background-color:color-mix(in srgb, var(--gok-color-bg) 86%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-block-end:1px solid var(--gok-color-border);display:flex;position:sticky;inset-block-start:0}.brand{align-items:baseline;gap:var(--gok-space-300);display:flex}.brand__mark{font-family:var(--gok-font-family-display);font-weight:var(--gok-font-weight-semibold);font-size:var(--gok-type-headline-6-size);line-height:var(--gok-type-headline-6-line);letter-spacing:-.01em}a.brand__mark{color:inherit;text-decoration:none}a.brand__mark:hover{color:var(--gok-color-text-muted)}.brand__dot{color:var(--gok-color-primary)}.brand__sub{font-family:var(--gok-font-family-mono);font-size:var(--gok-type-footnote-size);line-height:var(--gok-type-footnote-line);letter-spacing:.08em;text-transform:uppercase;color:var(--gok-color-text-muted)}.topbar .wrap{justify-content:space-between;align-items:center;gap:var(--gok-space-400);display:flex}.topbar__actions{align-items:center;gap:var(--gok-space-300);display:flex}.topbar__theme--compact{display:none}.topbar__menu{padding:var(--gok-space-100);color:var(--gok-color-text);border:var(--gok-border-width-hairline) solid var(--gok-color-border);border-radius:var(--gok-radius-m);cursor:pointer;background-color:#0000;justify-content:center;align-items:center;display:none}.topbar__menu:focus-visible{outline:var(--gok-focus-ring-width) solid var(--gok-color-focus-ring);outline-offset:var(--gok-focus-ring-offset)}.nav{gap:var(--gok-space-400);display:inline-flex}.nav a{font-family:var(--gok-font-family-mono);font-size:var(--gok-type-footnote-size);line-height:var(--gok-type-footnote-line);letter-spacing:.06em;text-transform:uppercase;color:var(--gok-color-text-muted);padding-block:var(--gok-space-100) calc(var(--gok-space-100) - var(--gok-border-width-hairline));border-block-end:var(--gok-border-width-hairline) solid transparent;transition:color var(--gok-motion-duration-fast) var(--gok-motion-ease-standard), border-color var(--gok-motion-duration-fast) var(--gok-motion-ease-standard);text-decoration:none}.nav a:hover{color:var(--gok-color-text)}.nav a[aria-current=page]{color:var(--gok-color-text);border-block-end-color:var(--gok-color-primary)}.nav a:focus-visible{outline:var(--gok-focus-ring-width) solid var(--gok-color-focus-ring);outline-offset:var(--gok-focus-ring-offset)}.hero{padding-block:var(--gok-space-700) var(--gok-space-1000);border-block-end:1px solid var(--gok-color-border)}.eyebrow{font-family:var(--gok-type-eyebrow-family);font-weight:var(--gok-type-eyebrow-weight);font-size:var(--gok-type-eyebrow-size);line-height:var(--gok-type-eyebrow-line);letter-spacing:var(--gok-type-eyebrow-tracking);text-transform:uppercase;color:var(--gok-color-text-muted);align-items:center;gap:var(--gok-space-200);display:inline-flex}.eyebrow:before{content:"";background-color:var(--gok-color-primary);block-size:2px;inline-size:18px}.eyebrow--section:before{display:none}.eyebrow__num{color:var(--gok-color-text-muted);font-variant-numeric:tabular-nums}.hero h1{margin:var(--gok-space-400) 0 0;font-family:var(--gok-type-expressive-family);font-weight:var(--gok-type-expressive-weight);font-size:var(--gok-type-expressive-size);line-height:var(--gok-type-expressive-line);letter-spacing:var(--gok-type-expressive-tracking);max-inline-size:14ch}.hero p{margin:var(--gok-space-500) 0 0;max-inline-size:54ch;font-size:var(--gok-type-body-large-size);line-height:var(--gok-type-body-large-line);color:var(--gok-color-text-muted);text-wrap:balance}.section{padding-block:var(--gok-space-900);border-block-end:1px solid var(--gok-color-border)}.section__head{gap:var(--gok-space-300);max-inline-size:var(--gok-container-prose);margin-block-end:var(--gok-space-800);display:grid}.section__head h2{font-family:var(--gok-type-headline-2-family);font-weight:var(--gok-type-headline-2-weight);font-size:var(--gok-type-headline-2-size);line-height:var(--gok-type-headline-2-line);letter-spacing:var(--gok-type-headline-2-tracking);margin:0}.section__head p{max-inline-size:60ch;color:var(--gok-color-text-muted);text-wrap:balance;margin:0}.section__sub{margin-block:var(--gok-space-800) var(--gok-space-600);display:block}.section__sub::part(label){order:-1;padding-inline-end:var(--gok-space-300)}.section__sub::part(base){gap:0}.section__sub code{text-transform:none;letter-spacing:normal}@media (width<=40rem){.section__sub::part(label){white-space:normal}}.hero__sub{line-height:var(--gok-type-body-regular-line);color:var(--gok-color-text-muted);max-inline-size:54ch;font-size:var(--gok-type-body-regular-size)!important}.principles__list{border-block-start:1px solid var(--gok-color-border);counter-reset:principle;gap:0;margin:0;padding:0;list-style:none;display:grid}.principle{gap:var(--gok-space-400);padding-block:var(--gok-space-500);border-block-end:1px solid var(--gok-color-border);grid-template-columns:2.5rem 1fr;display:grid}.principle:before{counter-increment:principle;content:counter(principle, decimal-leading-zero);font-family:var(--gok-font-family-mono);font-size:var(--gok-type-caption-size);color:var(--gok-color-text-muted);grid-area:1/1/span 2;padding-block-start:.35em}.principle h3{font-family:var(--gok-type-headline-5-family);font-weight:var(--gok-type-headline-5-weight);font-size:var(--gok-type-headline-5-size);line-height:var(--gok-type-headline-5-line);grid-column:2;margin:0}.principle p{margin:var(--gok-space-100) 0 0;max-inline-size:60ch;color:var(--gok-color-text-muted);text-wrap:balance;grid-column:2}.density-demo{gap:var(--gok-space-700);flex-wrap:wrap;align-items:end;display:flex}.density-cell{gap:var(--gok-space-300);display:grid}.density-cell__label{font-family:var(--gok-font-family-mono);font-size:var(--gok-type-caption-size);color:var(--gok-color-text-muted)}.scale-metric{font-family:var(--gok-type-headline-2-family);font-weight:var(--gok-type-headline-2-weight);font-size:var(--gok-type-headline-2-size);line-height:var(--gok-type-headline-2-line);letter-spacing:var(--gok-type-headline-2-tracking);color:var(--gok-color-text)}.section__head--sub{margin-block-start:var(--gok-space-700)}.focus-demo{align-items:center;gap:var(--gok-space-500);flex-wrap:wrap;display:flex}.focus-ring-sample{padding-block:calc(var(--gok-space-300) - var(--gok-border-width-hairline));padding-inline:var(--gok-space-400);background-color:var(--gok-color-surface);border:var(--gok-border-width-hairline) solid var(--gok-color-border);border-radius:var(--gok-radius-m);font-family:var(--gok-font-family-mono);font-size:var(--gok-type-caption-size);color:var(--gok-color-text-muted);outline:var(--gok-focus-ring-width) solid var(--gok-color-focus-ring);outline-offset:var(--gok-focus-ring-offset);align-items:center;display:inline-flex}.focus-demo__hint{color:var(--gok-color-text-muted);font-size:var(--gok-type-body-small-size)}.contrast{gap:var(--gok-space-400);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.contrast-tile{padding:var(--gok-space-500);background-color:var(--gok-color-surface);border:1px solid var(--gok-color-border);border-radius:var(--gok-radius-l);gap:var(--gok-space-300);margin:0;display:grid}.contrast-tile__sample{font-size:var(--gok-type-body-large-size);line-height:var(--gok-type-body-large-line);margin:0}.contrast-tile figcaption{font-family:var(--gok-font-family-mono);font-size:var(--gok-type-caption-size);color:var(--gok-color-text-muted)}@media (width<=40rem){.contrast{grid-template-columns:1fr}}.close__links{gap:var(--gok-space-400);max-inline-size:var(--gok-container-prose);display:grid}.close__links a{align-items:baseline;gap:var(--gok-space-300);inline-size:min(28rem,100%);color:var(--gok-color-text);font:var(--gok-type-headline-6-weight) var(--gok-type-headline-6-size) / var(--gok-type-headline-6-line) var(--gok-type-headline-6-family);border-block-end:1px solid var(--gok-color-border);padding-block-end:var(--gok-space-300);text-decoration:none;display:inline-flex}.close__links a:hover{border-block-end-color:var(--gok-color-border-emphasis)}.close__links .meta{font-family:var(--gok-font-family-mono);font-size:var(--gok-type-caption-size);color:var(--gok-color-text-muted)}.close__links .arrow{color:var(--gok-color-text-muted);margin-inline-start:auto}.fshell{column-gap:var(--gok-space-800);inline-size:100%;max-inline-size:var(--gok-container-content);padding-inline:var(--gok-container-inline-pad);grid-template-columns:12rem minmax(0,1fr);grid-template-areas:"rail hero""rail body";margin-inline:auto;display:grid}.fshell>.hero{grid-area:hero}.fshell>.frail{grid-area:rail}.fshell>.fbody{grid-area:body}.fshell .hero .wrap{max-inline-size:none;margin-inline:0;padding-inline:0}.frail{max-block-size:calc(100dvh - 120px);padding-block:var(--gok-space-700);scrollbar-width:none;align-self:start;position:sticky;inset-block-start:96px;overflow-y:auto}.frail::-webkit-scrollbar{display:none}.frail__label{margin:0 0 var(--gok-space-400);font-family:var(--gok-font-family-mono);font-size:var(--gok-type-footnote-size);line-height:var(--gok-type-footnote-line);letter-spacing:.08em;text-transform:uppercase;color:var(--gok-color-text-muted)}.frail>summary.frail__label{cursor:default;pointer-events:none;list-style:none}.frail>summary.frail__label::-webkit-details-marker{display:none}.fbody .wrap{max-inline-size:none;margin-inline:0;padding-inline:0}.fbody .section{padding-block:var(--gok-space-1000);scroll-margin-block-start:88px}.swatches{gap:var(--gok-space-400);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}@media (width<=40rem){.swatches{grid-template-columns:repeat(2,minmax(0,1fr))}}.swatch-card{--gok-card-padding:var(--gok-space-300)}.swatch__chip{block-size:76px}.swatch__meta{gap:2px;display:grid}.swatch__name{font-size:var(--gok-type-caption-size);line-height:var(--gok-type-caption-line);font-weight:var(--gok-font-weight-medium)}.swatch__token,.swatch__hex{font-family:var(--gok-font-family-mono);font-size:var(--gok-type-footnote-size);line-height:var(--gok-type-footnote-line);color:var(--gok-color-text-muted)}.status-list{gap:var(--gok-space-400);max-inline-size:var(--gok-container-prose);display:grid}.status-row{align-items:center;gap:var(--gok-space-400);display:flex}.status-chip{border:1px solid var(--gok-color-border);border-radius:var(--gok-radius-m);flex:none;block-size:2.5rem;inline-size:2.5rem}.status-meta{gap:var(--gok-space-400);text-align:end;margin-inline-start:auto;display:flex}.ramp{border:1px solid var(--gok-color-border);border-radius:var(--gok-radius-l);grid-template-columns:repeat(9,1fr);margin-block-start:var(--gok-space-500);display:grid;overflow:hidden}.ramp__step{block-size:88px;padding:var(--gok-space-200);font-family:var(--gok-font-family-mono);font-size:var(--gok-type-footnote-size);line-height:var(--gok-type-footnote-line);align-items:flex-end;display:flex}.specimen{gap:var(--gok-space-600);display:grid}.specimen__row{gap:var(--gok-space-500);border-block-end:1px solid var(--gok-color-border);grid-template-columns:130px 1fr;align-items:baseline;padding-block-end:var(--gok-space-500);display:grid}.specimen__row:last-child{border-block-end:0;padding-block-end:0}.specimen__label{font-family:var(--gok-font-family-mono);font-size:var(--gok-type-footnote-size);line-height:var(--gok-type-footnote-line);letter-spacing:.04em;text-transform:uppercase;color:var(--gok-color-text-muted);padding-block-start:var(--gok-space-100)}.scale{gap:var(--gok-space-400);display:grid}.scale__row{gap:var(--gok-space-500);grid-template-columns:130px 1fr;align-items:center;display:grid}.scale__key{font-family:var(--gok-font-family-mono);font-size:var(--gok-type-footnote-size);line-height:var(--gok-type-footnote-line);color:var(--gok-color-text-muted)}.scale__name{color:var(--gok-color-text);display:block}.scale__val{color:var(--gok-color-text-muted);display:block}.bar{background-color:var(--gok-color-border-strong);border-radius:var(--gok-radius-s);block-size:16px}@media (width<=40rem){.specimen__row,.scale__row{gap:var(--gok-space-200);grid-template-columns:minmax(0,1fr)}}.sspace-row{gap:var(--gok-space-500);flex-wrap:wrap;margin-block-start:var(--gok-space-400);display:flex}.sspace{gap:var(--gok-space-200);justify-items:start;margin:0;display:grid}.sspace figcaption{font-family:var(--gok-font-family-mono);font-size:var(--gok-type-footnote-size);line-height:var(--gok-type-footnote-line);color:var(--gok-color-text-muted)}.sspace__inset{background-color:var(--gok-color-surface-strong);border:1px solid var(--gok-color-border);border-radius:var(--gok-radius-m);block-size:88px;inline-size:120px}.sspace__inset span{background-color:var(--gok-color-accent-subtle);border-radius:var(--gok-radius-s);block-size:100%;display:block}.sspace__stack{flex-direction:column;inline-size:120px;display:flex}.sspace__stack span{background-color:var(--gok-color-surface-strong);border-radius:var(--gok-radius-s);block-size:16px}.sspace__inline{align-items:center;block-size:88px;display:flex}.sspace__inline span{background-color:var(--gok-color-surface-strong);border-radius:var(--gok-radius-s);block-size:24px;inline-size:24px}.sspace-note{max-inline-size:60ch;color:var(--gok-color-text-muted);margin-block-start:var(--gok-space-600)}.radii{gap:var(--gok-space-500);flex-wrap:wrap;display:flex}.radii figure{gap:var(--gok-space-200);justify-items:center;margin:0;display:grid}.radii .box{background-color:var(--gok-color-surface-strong);border:1px solid var(--gok-color-border);block-size:88px;inline-size:88px}.radii figcaption{font-family:var(--gok-font-family-mono);font-size:var(--gok-type-footnote-size);line-height:var(--gok-type-footnote-line);color:var(--gok-color-text-muted)}.borders{gap:var(--gok-space-500);flex-wrap:wrap;display:flex}.borders figure{gap:var(--gok-space-200);justify-items:center;margin:0;display:grid}.borders .bbox{background-color:var(--gok-color-surface);border-style:solid;border-color:var(--gok-color-border-emphasis);border-radius:var(--gok-radius-m);block-size:88px;inline-size:88px}.borders figcaption{font-family:var(--gok-font-family-mono);font-size:var(--gok-type-footnote-size);line-height:var(--gok-type-footnote-line);color:var(--gok-color-text-muted)}.elevation{gap:var(--gok-space-600);grid-template-columns:repeat(auto-fill,minmax(180px,1fr));display:grid}.elevation .card{border-radius:var(--gok-radius-l);background-color:var(--gok-color-surface);border:1px solid var(--gok-color-border);block-size:120px;padding:var(--gok-space-300);font-family:var(--gok-font-family-mono);font-size:var(--gok-type-footnote-size);line-height:var(--gok-type-footnote-line);color:var(--gok-color-text-muted);align-items:flex-end;display:flex}.motion-list{gap:var(--gok-space-300);display:grid}.motion-row{gap:var(--gok-space-300);text-align:start;inline-size:100%;padding:var(--gok-space-inset-m);border:1px solid var(--gok-color-border);border-radius:var(--gok-radius-m);cursor:pointer;color:inherit;font:inherit;transition:border-color var(--gok-motion-duration-fast) var(--gok-motion-ease-standard);background-color:#0000;display:grid}.motion-row:hover{border-color:var(--gok-color-border-emphasis)}.motion-row__head{align-items:baseline;gap:var(--gok-space-300);display:flex}.motion-row__name{font-family:var(--gok-font-family-mono);font-size:var(--gok-type-caption-size);line-height:var(--gok-type-caption-line);color:var(--gok-color-text)}.motion-row__use{font-size:var(--gok-type-caption-size);line-height:var(--gok-type-caption-line);color:var(--gok-color-text-muted)}.motion-row__play{font-size:var(--gok-type-footnote-size);line-height:var(--gok-type-footnote-line);color:var(--gok-color-text-muted);transition:color var(--gok-motion-duration-fast) var(--gok-motion-ease-standard);margin-inline-start:auto}.motion-row:hover .motion-row__play,.motion-row:active .motion-row__play{color:var(--gok-color-primary)}.motion-row__track{background-color:var(--gok-color-border);border-radius:var(--gok-radius-pill);block-size:3px;inline-size:100%;display:block;position:relative}.motion-row__dot{border-radius:var(--gok-radius-pill);background-color:var(--gok-color-primary);will-change:transform;block-size:12px;inline-size:12px;margin-block-start:-6px;position:absolute;inset-block-start:50%;inset-inline-start:0}.ambient-list{gap:var(--gok-space-400);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.ambient{gap:var(--gok-space-300);padding:var(--gok-space-inset-l) var(--gok-space-inset-m);border:1px solid var(--gok-color-border);border-radius:var(--gok-radius-l);place-items:start center;margin:0;display:grid}.ambient figcaption{font-family:var(--gok-font-family-mono);font-size:var(--gok-type-footnote-size);line-height:var(--gok-type-footnote-line);color:var(--gok-color-text-muted)}.ambient__spin{border-radius:var(--gok-radius-pill);border:2px solid var(--gok-color-border);border-block-start-color:var(--gok-color-primary);block-size:24px;inline-size:24px;animation:gok-ambient-spin var(--gok-motion-duration-loop) linear infinite}.ambient__shimmer{border-radius:var(--gok-radius-pill);background:linear-gradient(90deg, var(--gok-color-border) 0%, var(--gok-color-border) 35%, color-mix(in srgb, var(--gok-color-primary) 55%, var(--gok-color-border)) 50%, var(--gok-color-border) 65%, var(--gok-color-border) 100%);block-size:12px;inline-size:100%;animation:gok-ambient-shimmer var(--gok-motion-duration-shimmer) var(--gok-motion-ease-standard) infinite;background-size:250% 100%}.ambient__pulse{border-radius:var(--gok-radius-pill);background-color:var(--gok-color-primary);block-size:18px;inline-size:18px;animation:gok-ambient-pulse var(--gok-motion-duration-pulse) var(--gok-motion-ease-standard) infinite}@keyframes gok-ambient-spin{to{transform:rotate(360deg)}}@keyframes gok-ambient-shimmer{0%{background-position:150% 0}to{background-position:-150% 0}}@keyframes gok-ambient-pulse{0%,to{opacity:.4;transform:scale(.7)}50%{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion:reduce){.ambient__spin,.ambient__shimmer,.ambient__pulse{animation:none}}.bp-readout{align-items:center;gap:var(--gok-space-200);padding-inline:var(--gok-space-400);padding-block:calc(var(--gok-space-200) - var(--gok-border-width-hairline));border:var(--gok-border-width-hairline) solid var(--gok-color-border);border-radius:var(--gok-radius-pill);background-color:var(--gok-color-surface);font-family:var(--gok-font-family-mono);font-size:var(--gok-type-footnote-size);line-height:var(--gok-type-footnote-line);color:var(--gok-color-text-muted);margin-block-start:var(--gok-space-400);display:inline-flex}.bp-readout strong{color:var(--gok-color-text);font-weight:var(--gok-font-weight-medium)}.container-demo{gap:var(--gok-space-300);margin-block:0 var(--gok-space-700);display:grid}.cbar{box-sizing:border-box;inline-size:100%;padding-block:var(--gok-space-400);padding-inline:var(--gok-space-400);background-color:var(--gok-color-surface-strong);border-radius:var(--gok-radius-m);font-family:var(--gok-font-family-mono);font-size:var(--gok-type-footnote-size);line-height:var(--gok-type-footnote-line);color:var(--gok-color-text-muted);text-align:center;margin-inline:0}.cbar--prose{max-inline-size:var(--gok-container-prose)}.cbar--content{max-inline-size:var(--gok-container-content)}.cbar--wide{max-inline-size:var(--gok-container-wide)}.cbar--bleed{background-color:var(--gok-color-surface-strong);max-inline-size:none}.demo-grid{margin-block-start:var(--gok-space-400)}.demo-cell{padding-block:var(--gok-space-500);background-color:var(--gok-color-surface-strong);border-radius:var(--gok-radius-m);font-family:var(--gok-font-family-mono);font-size:var(--gok-type-footnote-size);line-height:var(--gok-type-footnote-line);color:var(--gok-color-text-muted);text-align:center}.states{gap:var(--gok-space-500);flex-wrap:wrap;display:flex}.states figure{gap:var(--gok-space-200);justify-items:center;margin:0;display:grid}.states figcaption{font-family:var(--gok-font-family-mono);font-size:var(--gok-type-footnote-size);line-height:var(--gok-type-footnote-line);color:var(--gok-color-text-muted)}.state-tile{background-color:color-mix(in srgb, var(--gok-color-text) calc(var(--wash,0) * 100%), var(--gok-color-surface-strong));border:1px solid var(--gok-color-border);border-radius:var(--gok-radius-m);block-size:88px;inline-size:132px;font-family:var(--gok-font-family-mono);font-size:var(--gok-type-footnote-size);line-height:var(--gok-type-footnote-line);color:var(--gok-color-text-muted);justify-content:center;align-items:center;display:flex}.scrim-demo{block-size:88px;inline-size:200px;padding-inline:var(--gok-space-400);background-color:var(--gok-color-surface-strong);border:1px solid var(--gok-color-border);border-radius:var(--gok-radius-m);align-items:center;display:flex;position:relative;overflow:hidden}.scrim-demo__content{font-family:var(--gok-font-family-mono);font-size:var(--gok-type-footnote-size);line-height:var(--gok-type-footnote-line);color:var(--gok-color-text)}.scrim-demo__fill{background-color:var(--gok-color-scrim);inline-size:55%;position:absolute;inset-block:0;inset-inline-end:0}.zstack{block-size:200px;margin-block-start:var(--gok-space-400);position:relative}.zstack__card{inline-size:240px;padding:calc(var(--gok-space-400) - var(--gok-border-width-hairline));border-radius:var(--gok-radius-l);border:var(--gok-border-width-hairline) solid var(--gok-color-border);background-color:var(--gok-color-surface);box-shadow:var(--gok-shadow-2);font-family:var(--gok-font-family-mono);font-size:var(--gok-type-footnote-size);line-height:var(--gok-type-footnote-line);color:var(--gok-color-text-muted);position:absolute}@media (width<=40rem){.zstack__card{inline-size:150px}}.foot{padding-block:var(--gok-space-700) var(--gok-space-1000);color:var(--gok-color-text-muted);font-size:var(--gok-type-body-small-size)}.foot a,a{color:var(--gok-color-link)}.shell{gap:var(--gok-space-800);inline-size:100%;max-inline-size:var(--gok-container-wide);padding-inline:var(--gok-container-inline-pad);grid-template-columns:232px minmax(0,1fr);margin-inline:auto;display:grid}.sidenav{max-block-size:calc(100vh - 88px);padding-block:var(--gok-space-700);--_ring-room:calc(var(--gok-focus-ring-offset) + var(--gok-focus-ring-width));padding-inline:var(--_ring-room);margin-inline:calc(-1 * var(--_ring-room));align-self:start;position:sticky;inset-block-start:72px;overflow-y:auto}.sidenav__search{box-sizing:border-box;inline-size:100%;padding-block:var(--gok-space-200);padding-inline:var(--gok-space-300);font-family:var(--gok-font-family-text);font-size:var(--gok-type-body-small-size);color:var(--gok-color-text);background-color:var(--gok-color-surface);border:1px solid var(--gok-color-border);border-radius:var(--gok-radius-m);margin-block-end:var(--gok-space-500)}.sidenav__search:focus-visible{outline:var(--gok-focus-ring-width) solid var(--gok-color-focus-ring);outline-offset:var(--gok-focus-ring-offset)}.sidenav__heading{margin:var(--gok-space-500) 0 var(--gok-space-200);font-family:var(--gok-font-family-mono);font-size:var(--gok-type-footnote-size);line-height:var(--gok-type-footnote-line);letter-spacing:.08em;text-transform:uppercase;color:var(--gok-color-text-muted)}.sidenav__group:first-of-type .sidenav__heading{margin-block-start:0}.sidenav__link{padding-block:var(--gok-space-100);font-size:var(--gok-type-body-small-size);color:var(--gok-color-text-muted);transition:color var(--gok-motion-duration-fast) var(--gok-motion-ease-standard), border-color var(--gok-motion-duration-fast) var(--gok-motion-ease-standard);border-inline-start:2px solid #0000;margin-inline-start:-2px;padding-inline-start:var(--gok-space-300);text-decoration:none;display:block}.sidenav__link:hover{color:var(--gok-color-text)}.sidenav__link.is-active{color:var(--gok-color-text);border-inline-start-color:var(--gok-color-primary)}.sidenav__link:focus-visible{outline:var(--gok-focus-ring-width) solid var(--gok-color-focus-ring);outline-offset:var(--gok-focus-ring-offset)}.sidenav__empty{font-size:var(--gok-type-body-small-size);color:var(--gok-color-text-muted);margin-block-start:var(--gok-space-400)}.gallery{min-inline-size:0;padding-block:var(--gok-space-800) var(--gok-space-1000)}.gallery__intro{margin-block-end:var(--gok-space-800)}.gallery__intro h1{margin:var(--gok-space-400) 0 0;font-family:var(--gok-type-headline-2-family);font-weight:var(--gok-type-headline-2-weight);font-size:var(--gok-type-headline-2-size);line-height:var(--gok-type-headline-2-line);letter-spacing:var(--gok-type-headline-2-tracking)}.gallery__intro p{margin:var(--gok-space-400) 0 0;max-inline-size:60ch;font-size:var(--gok-type-body-large-size);line-height:var(--gok-type-body-large-line);color:var(--gok-color-text-muted)}.install{margin-block-end:var(--gok-space-900)}.install-grid{gap:var(--gok-space-500);min-inline-size:0;margin-block-start:var(--gok-space-500);display:grid}.install-step{gap:var(--gok-space-300);min-inline-size:0;display:grid}.install-step__label{font-size:var(--gok-type-body-small-size);color:var(--gok-color-text-muted)}.install-step__label b{color:var(--gok-color-text);font-weight:var(--gok-font-weight-medium)}.cat{margin-block-end:var(--gok-space-800)}.cat__title{margin:0 0 var(--gok-space-500);border-block-end:var(--gok-border-width-hairline) solid var(--gok-color-border);font-family:var(--gok-type-headline-2-family);font-weight:var(--gok-type-headline-2-weight);font-size:var(--gok-type-headline-4-size);line-height:var(--gok-type-headline-4-line);letter-spacing:var(--gok-type-headline-4-tracking);padding-block-end:calc(var(--gok-space-300) - var(--gok-border-width-hairline))}.entry{padding-block:var(--gok-space-700);border-block-end:1px solid var(--gok-color-border);scroll-margin-block-start:88px}.cat .entry:last-child{border-block-end:none;padding-block-end:0}.entry__head{align-items:baseline;gap:var(--gok-space-300);flex-wrap:wrap;margin-block-end:var(--gok-space-200);display:flex}.entry__head h3{font-family:var(--gok-type-headline-5-family);font-weight:var(--gok-type-headline-5-weight);font-size:var(--gok-type-headline-5-size);line-height:var(--gok-type-headline-5-line);letter-spacing:var(--gok-type-headline-5-tracking);margin:0}.entry__tag{font-family:var(--gok-font-family-mono);font-size:var(--gok-type-footnote-size);line-height:var(--gok-type-footnote-line);color:var(--gok-color-primary);background-color:color-mix(in srgb, var(--gok-color-primary) 10%, transparent);padding-block:2px;padding-inline:var(--gok-space-200);border-radius:var(--gok-radius-s)}.entry__desc{margin:0 0 var(--gok-space-500);max-inline-size:70ch;color:var(--gok-color-text-muted)}.demo{border:1px solid var(--gok-color-border);border-radius:var(--gok-radius-m);overflow:hidden}.demo__stage{align-items:center;gap:var(--gok-space-500);padding:var(--gok-space-600);background-color:var(--gok-color-surface);flex-wrap:wrap;display:flex}.demo__stage--block{display:block}.code{background-color:var(--gok-color-neutral-9);border:1px solid var(--gok-color-border);border-radius:var(--gok-radius-m);min-inline-size:0;position:relative}.demo .code{border:none;border-block-start:1px solid var(--gok-color-border);border-radius:0}.code pre{padding:var(--gok-space-500);font-family:var(--gok-font-family-mono);font-size:var(--gok-type-caption-size);color:var(--gok-color-neutral-1);margin:0;padding-inline-end:var(--gok-space-1000);line-height:1.6;overflow-x:auto}.code code{font-family:inherit;font-size:inherit;color:inherit}.copy-btn{appearance:none;cursor:pointer;padding-block:calc(var(--gok-space-100) - var(--gok-border-width-hairline));padding-inline:var(--gok-space-300);font-family:var(--gok-font-family-mono);font-size:var(--gok-type-footnote-size);line-height:var(--gok-type-footnote-line);letter-spacing:.04em;text-transform:uppercase;color:var(--gok-color-neutral-1);background-color:color-mix(in srgb, var(--gok-color-neutral-1) 12%, transparent);border:var(--gok-border-width-hairline) solid color-mix(in srgb, var(--gok-color-neutral-1) 20%, transparent);border-radius:var(--gok-radius-s);transition:background-color var(--gok-motion-duration-fast) var(--gok-motion-ease-standard);position:absolute;inset-block-start:var(--gok-space-300);inset-inline-end:var(--gok-space-300)}.copy-btn:hover{background-color:color-mix(in srgb, var(--gok-color-neutral-1) 22%, transparent)}.copy-btn.is-copied{color:var(--gok-color-text-on-primary);background-color:var(--gok-color-primary);border-color:var(--gok-color-primary)}.copy-btn:focus-visible{outline:var(--gok-focus-ring-width) solid var(--gok-color-neutral-1);outline-offset:2px}@media (width<=48rem){.topbar .wrap{row-gap:var(--gok-space-300);flex-wrap:wrap}.nav{gap:var(--gok-space-100);border-block-start:1px solid var(--gok-color-border);flex-direction:column;flex-basis:100%;order:3;padding-block-start:var(--gok-space-300);display:none}.topbar.is-open .nav{display:flex}.nav a{padding-block:var(--gok-space-200)}.topbar__theme--text{display:none}.topbar__theme--compact,.topbar__menu{display:inline-flex}.shell{gap:var(--gok-space-600);grid-template-columns:1fr}.sidenav{max-block-size:none;border-block-end:1px solid var(--gok-color-border);padding-block-end:var(--gok-space-500);position:static;overflow-y:visible}.gallery{padding-block-start:var(--gok-space-600)}}@media (width<=64rem){.fshell{grid-template-columns:minmax(0,1fr);grid-template-areas:none;gap:0}.fshell>.hero,.fshell>.frail,.fshell>.fbody{grid-area:auto}.frail{max-block-size:none;padding-block:var(--gok-space-500) 0;border-block-end:var(--gok-border-width-hairline) solid var(--gok-color-border);margin-block-end:var(--gok-space-600);position:static;overflow:visible}.frail>summary.frail__label{cursor:pointer;pointer-events:auto;align-items:center;gap:var(--gok-space-200);padding-block:var(--gok-space-300);display:flex}.frail>summary.frail__label:before{content:"▸";transition:transform var(--gok-motion-duration-fast) var(--gok-motion-ease-standard);font-size:.75em}.frail[open]>summary.frail__label:before{transform:rotate(90deg)}.frail[open] gok-toc{max-block-size:50dvh;padding-block-start:var(--gok-space-300);display:block;overflow-y:auto}}@media (forced-colors:active){.cbar,.demo-cell,.bar{border:1px solid canvastext}.ramp__step,.swatch__chip,.state-tile,.scrim-demo__fill{forced-color-adjust:none}}