:root { color:#202124; background:#fff; font-family:"IBM Plex Sans Variable",ui-sans-serif,system-ui,sans-serif; font-synthesis:none; }
* { box-sizing:border-box; }
body { margin:0; background:#fff; }
button,input { font:inherit; }
button { color:inherit; }
.docs-shell { min-height:100vh; }
.docs-sidebar { position:fixed; inset:0 auto 0 0; z-index:30; width:280px; overflow-y:auto; border-right:1px solid #e5e7eb; background:#fafafa; padding:0 16px 32px; }
.docs-sidebar-header { position:sticky; top:0; z-index:2; margin:0 -16px; border-bottom:1px solid #e5e7eb; background:#fafafa; padding:0 16px 14px; }
.docs-sidebar-brand { display:flex; align-items:center; justify-content:space-between; height:58px; background:#fafafa; }
.docs-sidebar-brand a { color:#171717; font-size:17px; font-weight:700; text-decoration:none; }
.docs-sidebar-brand button { display:none; }
.docs-layer-tabs { display:grid; grid-template-columns:1fr 1fr auto; gap:3px; margin-bottom:9px; border:1px solid #dfe1e4; border-radius:8px; background:#f0f1f2; padding:3px; }
.docs-layer-tabs button { min-width:0; border:0; border-radius:5px; background:transparent; padding:7px 6px; color:#6d7076; cursor:pointer; font-size:12px; }
.docs-layer-tabs button[aria-selected="true"] { background:#fff; box-shadow:0 1px 2px rgb(0 0 0/.08); color:#171717; font-weight:650; }
.docs-layer-tabs span { color:#94979d; font-size:10px; }
.docs-layer-tabs .docs-admin-tab { display:flex; align-items:center; gap:3px; padding-inline:8px; }
.docs-admin-tab svg { width:13px; height:13px; }
.docs-admin-tab[aria-selected="true"] { color:#c62e07; }
.docs-search { display:flex; align-items:center; gap:8px; height:40px; border:1px solid #d7d9dc; border-radius:7px; background:#fff; padding:0 10px; color:#6b7280; }
.docs-search:focus-within { border-color:#a6a8ad; box-shadow:0 0 0 2px #e8e9eb; }
.docs-search>svg { flex:none; width:16px; }
.docs-search input { width:100%; border:0; outline:0; background:transparent; font-size:13px; }
.docs-search button { display:grid; flex:none; place-items:center; width:24px; height:24px; border:0; border-radius:4px; background:transparent; padding:0; color:#7b7e84; cursor:pointer; }
.docs-search button:hover { background:#f0f1f2; }
.docs-search button svg { width:14px; }
.docs-sidebar nav { display:grid; gap:2px; margin-top:16px; }
.docs-sidebar nav>h2 { display:flex; justify-content:space-between; margin:0 8px 7px; color:#6b7280; font-size:11px; font-weight:650; letter-spacing:.08em; text-transform:uppercase; }
.docs-sidebar nav details { display:grid; gap:2px; margin:5px 0; }
.docs-sidebar nav summary { display:flex; align-items:center; justify-content:space-between; min-height:34px; border-radius:6px; padding:7px 9px; color:#6f737a; cursor:pointer; font-size:11px; font-weight:650; list-style:none; }
.docs-sidebar nav summary::-webkit-details-marker { display:none; }
.docs-sidebar nav summary:hover { background:#f0f1f2; color:#252525; }
.docs-sidebar nav summary::before { content:'›'; width:12px; margin-right:5px; font-size:16px; line-height:1; transition:transform 120ms ease; }
.docs-sidebar nav details[open] summary::before { transform:rotate(90deg); }
.docs-sidebar nav summary span { flex:1; }
.docs-sidebar nav summary small { color:#989ba1; font-size:10px; }
.docs-sidebar nav button { display:flex; align-items:center; gap:9px; width:100%; min-height:34px; border:0; border-radius:6px; background:transparent; padding:7px 9px; text-align:left; cursor:pointer; font-size:13px; }
.docs-sidebar nav button svg { flex:none; width:15px; height:15px; color:#7b7e84; }
.docs-sidebar nav button:hover { background:#f0f1f2; }
.docs-sidebar nav button[aria-current="page"] { background:#e8e9eb; color:#111; font-weight:600; }
.docs-search-empty { margin:8px; color:#777b82; font-size:13px; line-height:1.5; }
.docs-group-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
.docs-group-grid button { display:grid; min-height:138px; align-content:start; gap:8px; border:1px solid #dedfe2; border-radius:10px; background:#fff; padding:20px; text-align:left; cursor:pointer; }
.docs-group-grid button:hover { border-color:#a6a8ad; background:#fafafa; }
.docs-group-grid strong { font-size:17px; }
.docs-group-grid span { color:#c62e07; font-size:12px; font-weight:650; }
.docs-group-grid small { color:#74787f; font-size:12px; line-height:1.5; }
.docs-main { min-height:100vh; margin-left:280px; }
.docs-main>main { width:min(1120px,calc(100% - 64px)); min-height:calc(100vh - 70px); margin:0 auto; padding:66px 0 96px; }
.docs-mobile-header { display:none; }
.docs-page-heading { max-width:760px; margin-bottom:38px; }
.docs-page-heading>span { color:#c62e07; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.docs-page-heading h1 { margin:8px 0 10px; color:#171717; font-size:clamp(32px,5vw,46px); line-height:1.05; letter-spacing:-.035em; }
.docs-page-heading p { margin:0; color:#666a70; font-size:16px; line-height:1.6; }
.docs-source { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:18px; }
.docs-source code { color:#555960; font-size:12px; }
.docs-source small { color:#93969d; }
.docs-token-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; }
.docs-color { overflow:hidden; border:1px solid #e1e2e4; border-radius:9px; background:#fff; }
.docs-color>i { display:block; height:104px; border-bottom:1px solid #e1e2e4; }
.docs-color>div { display:grid; grid-template-columns:1fr auto; padding:13px; }
.docs-color strong { font-size:14px; }
.docs-color small { grid-row:2; color:#777b82; }
.docs-color code { grid-column:2; grid-row:1/3; align-self:center; color:#777b82; font-size:11px; }
.docs-type-list { display:grid; gap:12px; }
.docs-type-list article { display:grid; grid-template-columns:220px 1fr; align-items:center; min-height:120px; border-bottom:1px solid #e5e7eb; }
.docs-type-list article div { display:grid; gap:4px; }
.docs-type-list small { color:#73767c; }
.docs-type-list p { margin:0; font-size:30px; }
.docs-scale-list { display:grid; border:1px solid #e1e2e4; border-radius:10px; }
.docs-scale-list article { display:grid; grid-template-columns:100px 1fr 180px; align-items:center; min-height:76px; padding:16px 20px; border-bottom:1px solid #e8e9eb; }
.docs-scale-list article:last-child { border:0; }
.docs-scale-list code { color:#686c72; }
.docs-space-swatch { display:block; height:18px; min-width:4px; background:#c62e07; }
.docs-radius-swatch,.docs-shadow-swatch { display:block; width:48px; height:48px; border:1px solid #252525; background:#fef2d9; }
.docs-motion-list { display:grid; gap:10px; }
.docs-motion-list article { display:grid; grid-template-columns:44px 160px 100px 1fr; align-items:center; min-height:64px; padding:0 16px; border:1px solid #e1e2e4; border-radius:8px; }
.docs-motion-list i { width:22px; height:22px; border-radius:50%; background:#c62e07; animation-name:docs-pulse; animation-iteration-count:infinite; animation-direction:alternate; }
@keyframes docs-pulse { to { transform:translateX(12px) scale(.75); opacity:.35; } }
.docs-icon-previews { display:grid; gap:24px; }
.docs-icon-previews article { overflow:hidden; border:1px solid #e1e2e4; border-radius:10px; }
.docs-icon-previews h2 { margin:0; border-bottom:1px solid #e1e2e4; padding:14px 18px; font-size:14px; }
.docs-preview-tabs { display:flex; gap:4px; border-bottom:1px solid #dedfe2; }
.docs-preview-tabs button { border:0; border-bottom:2px solid transparent; background:none; padding:10px 14px; cursor:pointer; color:#6d7076; font-size:13px; }
.docs-preview-tabs button[aria-selected="true"] { border-color:#171717; color:#171717; font-weight:600; }
.docs-preview { overflow:hidden; min-height:280px; margin-top:20px; border:1px solid #dedfe2; border-radius:10px; background:#f4f4f5; }
.docs-code { display:grid; margin-top:20px; border:1px solid #dedfe2; border-radius:10px; overflow:hidden; }
.docs-code>div { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; background:#f7f7f8; color:#60646b; font-size:12px; }
.docs-code button { border:1px solid #d7d9dc; border-radius:5px; background:#fff; padding:4px 8px; cursor:pointer; }
.docs-code pre { margin:0; overflow-x:auto; border-top:1px solid #e2e3e5; background:#171717; padding:18px; color:#f4f4f5; font-size:12px; }
.docs-reference { margin-top:52px; }
.docs-reference h2 { margin:0 0 14px; font-size:20px; }
.docs-reference>p { color:#6c7076; }
.docs-reference-row { display:grid; grid-template-columns:180px 1fr; gap:20px; border-top:1px solid #e2e3e5; padding:14px 0; font-size:13px; }
.docs-reference-row>:not(:first-child) { color:#6c7076; }
.docs-chip-row { display:flex; flex-wrap:wrap; gap:8px; }
.docs-chip-row button { border:1px solid #d5d7da; border-radius:6px; background:#fff; padding:7px 10px; cursor:pointer; font-size:12px; }
.docs-chip-row button:hover { border-color:#9ca0a6; }
.docs-footer { display:flex; justify-content:space-between; width:min(1120px,calc(100% - 64px)); margin:0 auto; border-top:1px solid #e5e7eb; padding:24px 0 36px; color:#777b82; font-size:12px; }
.docs-footer a { display:inline-flex; align-items:center; gap:3px; color:inherit; }
.docs-footer svg { width:13px; }
.docs-backdrop { display:none; }
@media (max-width:820px) {
  .docs-sidebar { transform:translateX(-100%); transition:transform 160ms ease; box-shadow:12px 0 35px rgb(0 0 0/.12); }
  .docs-sidebar.is-open { transform:translateX(0); }
  .docs-sidebar-brand button { display:grid; place-items:center; border:0; background:none; padding:7px; }
  .docs-sidebar-brand button svg { width:18px; }
  .docs-backdrop { position:fixed; inset:0; z-index:20; border:0; background:rgb(0 0 0/.28); opacity:0; pointer-events:none; transition:opacity 160ms ease; }
  .docs-backdrop.is-open { display:block; opacity:1; pointer-events:auto; }
  .docs-main { margin-left:0; }
  .docs-mobile-header { position:sticky; top:0; z-index:10; display:grid; grid-template-columns:40px 1fr 40px; align-items:center; height:58px; border-bottom:1px solid #e5e7eb; background:rgb(255 255 255/.94); padding:0 14px; backdrop-filter:blur(12px); text-align:center; }
  .docs-mobile-header button { display:grid; place-items:center; border:0; background:none; }
  .docs-mobile-header svg { width:19px; }
  .docs-main>main { width:min(100% - 32px,720px); padding:44px 0 72px; }
  .docs-footer { width:calc(100% - 32px); }
  .docs-type-list article { grid-template-columns:1fr; gap:16px; padding:20px 0; }
  .docs-reference-row { grid-template-columns:120px 1fr; }
}
@media (max-width:520px) {
  .docs-sidebar { width:min(88vw,320px); }
  .docs-page-heading { margin-bottom:28px; }
  .docs-page-heading h1 { font-size:34px; }
  .docs-scale-list article { grid-template-columns:72px 1fr auto; padding:12px; }
  .docs-motion-list article { grid-template-columns:34px 1fr; padding:12px; }
  .docs-motion-list code { grid-column:2; }
  .docs-reference-row { grid-template-columns:1fr; gap:6px; }
  .docs-footer { display:grid; gap:12px; }
}