.doc{display:grid;gap:48px;min-width:0}.doc__head{display:grid;gap:12px}.doc__title{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}.doc__subtitle{font:500 17px/1.3 var(--ok-font);color:var(--ok-text-3);letter-spacing:0}.doc__lead{max-width:68ch;margin:0}.doc__section{display:grid;gap:20px;min-width:0}.doc__desc{margin:-8px 0 0;max-width:72ch}.demo{display:grid;gap:12px;margin:0;min-width:0}.demo__cap{display:grid;gap:4px}.demo__cap p{margin:0;max-width:72ch}.demo__stage{position:relative;display:flex;flex-wrap:wrap;gap:16px 20px;align-items:center;justify-content:center;min-width:0;padding:var(--_stage-p, 32px 24px);border-radius:var(--_stage-r, var(--ok-r-5));corner-shape:var(--ok-corner);background:var(--ok-surface);box-shadow:inset 0 0 0 1px var(--ok-line),inset 0 1.5px 0 var(--ok-hi)}.demo__stage[data-layout=col]{flex-direction:column;flex-wrap:nowrap;align-items:stretch}.demo__stage[data-layout=block]{display:block}.demo__stage[data-layout=col][data-align=center]{align-items:center}.demo__stage[data-align=start]{align-items:flex-start;justify-content:flex-start}.demo__stage[data-align=stretch]{align-items:stretch;justify-content:stretch}.demo__stage[data-align=stretch]>*{flex:1 1 auto;min-width:0}.demo__stage{--_stage-sp: 20px;--_stage-p: calc(var(--_stage-nr) * 0 + var(--_stage-sp));--_stage-r: calc((var(--_stage-nr) + var(--_stage-sp)) * var(--ok-rk))}.demo__stage:not(.demo__stage--flush):has(>:where(.ok-box[data-radius="1"]),>*>:where(.ok-box[data-radius="1"]),>*>*>:where(.ok-box[data-radius="1"])){--_stage-nr: 8px}.demo__stage:not(.demo__stage--flush):has(>:where(.ok-box[data-radius="2"],.g-swatch__chip),>*>:where(.ok-box[data-radius="2"],.g-swatch__chip),>*>*>:where(.ok-box[data-radius="2"],.g-swatch__chip)){--_stage-nr: 12px}.demo__stage:not(.demo__stage--flush):has(>:where(.ok-image,.ok-box[data-radius="3"],.g-layer__chip),>*>:where(.ok-image,.ok-box[data-radius="3"],.g-layer__chip),>*>*>:where(.ok-image,.ok-box[data-radius="3"],.g-layer__chip)){--_stage-nr: 16px}.demo__stage:not(.demo__stage--flush):has(>:where(.ok-alert),>*>:where(.ok-alert),>*>*>:where(.ok-alert)){--_stage-nr: 18px}.demo__stage:not(.demo__stage--flush):has(>:where(.ok-card--sm,.ok-codeblock,.ok-option),>*>:where(.ok-card--sm,.ok-codeblock,.ok-option),>*>*>:where(.ok-card--sm,.ok-codeblock,.ok-option)){--_stage-nr: 20px}.demo__stage:not(.demo__stage--flush):has(>:where(.ok-card:not(.ok-card--sm,.ok-card--lg),.ok-group,.ok-table,.ok-filedrop,.ok-box[data-radius="4"]),>*>:where(.ok-card:not(.ok-card--sm,.ok-card--lg),.ok-group,.ok-table,.ok-filedrop,.ok-box[data-radius="4"]),>*>*>:where(.ok-card:not(.ok-card--sm,.ok-card--lg),.ok-group,.ok-table,.ok-filedrop,.ok-box[data-radius="4"])){--_stage-nr: 24px}.demo__stage:not(.demo__stage--flush):has(>:where(.ok-card--lg,.ok-box[data-radius="5"]),>*>:where(.ok-card--lg,.ok-box[data-radius="5"]),>*>*>:where(.ok-card--lg,.ok-box[data-radius="5"])){--_stage-nr: 32px}.demo__stage:not(.demo__stage--flush):has(>:where(.ok-panel,.ok-box[data-radius="6"],.g-frame,.overlay-panel-box--framed),>*>:where(.ok-panel,.ok-box[data-radius="6"],.g-frame,.overlay-panel-box--framed),>*>*>:where(.ok-panel,.ok-box[data-radius="6"],.g-frame,.overlay-panel-box--framed)){--_stage-nr: 44px}.demo__stage--flush{padding:0;overflow:hidden;border-radius:var(--ok-r-6)}.demo__code{display:grid;gap:8px;justify-items:start;min-width:0}.demo__code>div{width:100%;min-width:0}@media (max-width: 519px){.demo__stage{--_stage-sp: 16px;padding:var(--_stage-p, 24px 16px);border-radius:var(--_stage-r, var(--ok-r-4))}.demo__stage--flush{padding:0;border-radius:calc(40px * var(--ok-rk))}}.props{display:grid;gap:12px;min-width:0}.props__table{border-radius:var(--ok-r-4);corner-shape:var(--ok-corner);background:var(--ok-card);box-shadow:inset 0 0 0 1px var(--ok-line),inset 0 1.5px 0 var(--ok-hi)}.props table{width:100%;border-collapse:collapse;font:450 14px/1.55 var(--ok-font)}.props th,.props td{padding:12px 20px;text-align:left;vertical-align:top}.props thead th{font:600 12px/1.3 var(--ok-font);color:var(--ok-text-3);white-space:nowrap;padding-top:20px}.props tbody tr{box-shadow:inset 0 1px 0 var(--ok-line)}.props tbody th{font-weight:500;white-space:nowrap}.props code{font:500 12.5px/1.5 var(--ok-font-mono);color:var(--ok-text)}.props td:nth-child(2) code{color:var(--ok-text-2);white-space:pre-wrap}.props__req{margin-left:2px;color:var(--ok-danger-text)}@media (max-width: 767px){.props thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.props table,.props tbody,.props tr,.props th,.props td{display:block}.props tbody tr{padding:14px 20px}.props tbody th,.props tbody td{padding:2px 0}}.a11y{display:grid;gap:8px}.a11y ul{margin:0;padding-left:20px;display:grid;gap:6px;color:var(--ok-text-2);font:450 15px/1.6 var(--ok-font);max-width:72ch}.a11y kbd,.doc kbd{font:500 12px/1 var(--ok-font-mono)}.doc__h2{padding-top:8px}.demo__title{font-size:17px}