/* docs-only chrome; not part of the library */
.dc { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.dc-nav { position: sticky; top: 0; height: 100vh; overflow: auto; border-right: 1px solid var(--ui-border); padding: 16px 12px; }
.dc-nav h1 { font-size: 18px; margin: 0 0 2px; letter-spacing: -.02em; color: var(--ui-text-bright); }
.dc-nav .tag { font-size: 11px; color: var(--ui-text-3); margin-bottom: 14px; }
.dc-nav a { display: block; padding: 4px 8px; border-radius: 4px; color: var(--ui-text-2); font-size: 12px; }
.dc-nav a:hover { background: var(--ui-raised); color: var(--ui-text-bright); }
.dc-nav .grp { font-size: 11px; font-weight: 700; color: var(--ui-text); margin: 14px 8px 4px; }
.dc-main { padding: 28px 32px 80px; max-width: 1180px; }
.dc-main > .dc-hero, .dc-main > .dc-hero-bar { max-width: none; }
.dc-main:has(.dc-hero) { max-width: 1400px; }
.dc-main h2 { font-size: 20px; font-weight: 600; letter-spacing: -.01em; margin: 44px 0 6px; padding-top: 8px; color: var(--ui-text-bright); scroll-margin-top: 20px; }
.dc-main h2:first-child { margin-top: 0; }
.dc-main h2 + p { margin: 0 0 16px; color: var(--ui-text-2); max-width: 70ch; }
.dc-main h3 { font-size: 13px; font-weight: 600; margin: 22px 0 8px; color: var(--ui-text); }
.dc-main p { line-height: 1.5; }
.dc-ex { border: 1px solid var(--ui-border); border-radius: 8px; overflow: hidden; margin: 0 0 14px; }
.dc-ex > .demo { padding: 18px; background: var(--ui-bg); display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.dc-ex > .demo.block { display: block; }
.dc-ex > .demo.col { flex-direction: column; align-items: stretch; }
.dc-ex > .demo.surface { background: var(--ui-surface); }
.dc-ex > .demo.narrow > * { width: 320px; }
.dc-ex > details { border-top: 1px solid var(--ui-border); }
.dc-ex > details > summary { cursor: pointer; padding: 6px 12px; font-size: 11px; color: var(--ui-text-3); user-select: none; list-style: none; display: flex; align-items: center; gap: 8px; }
.dc-ex > details > summary::-webkit-details-marker { display: none; }
.dc-ex > details > summary:hover { color: var(--ui-text); }
.dc-ex > details > summary .cp { margin-left: auto; background: none; border: 0; color: var(--ui-accent); font: inherit; cursor: pointer; }
.dc-ex pre { margin: 0; padding: 12px; background: var(--dc-pre, #0e0f11); color: var(--ui-text); font-size: 11.5px; line-height: 1.5; overflow: auto; font-family: ui-monospace, "SF Mono", Menlo, monospace; white-space: pre; }
.dc-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.dc-sw { border-radius: 6px; border: 1px solid var(--ui-border); overflow: hidden; }
.dc-sw i { display: block; height: 44px; }
.dc-sw div { padding: 6px 8px; font-size: 11px; }
.dc-sw b { display: block; color: var(--ui-text); font-weight: 500; }
.dc-sw span { color: var(--ui-text-3); }
.dc-type { display: grid; grid-template-columns: 150px 1fr; gap: 6px 16px; align-items: baseline; }
.dc-type > span { color: var(--ui-text-3); font-size: 11px; }
.dc-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.dc-icons > div { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border-radius: 6px; border: 1px solid var(--ui-border); font-size: 10px; color: var(--ui-text-2); text-align: center; }
.dc-icons .ui-icon { width: 18px; height: 18px; }
.dc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.dc-cards a { display: block; padding: 14px; border: 1px solid var(--ui-border); border-radius: 8px; color: var(--ui-text); }
.dc-cards a:hover { border-color: var(--ui-accent); }
.dc-cards b { display: block; color: var(--ui-text-bright); margin-bottom: 4px; }
.dc-cards span { color: var(--ui-text-2); font-size: 12px; }
.dc-frame { width: 100%; height: 640px; border: 1px solid var(--ui-border); border-radius: 8px; background: var(--ui-bg); }
.dc-do { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dc-do > div { padding: 12px 14px; border-radius: 8px; border: 1px solid var(--ui-border); font-size: 12px; }
.dc-do > div > b { display: block; margin-bottom: 6px; }
.dc-do ul { margin: 0; padding-left: 16px; color: var(--ui-text-2); line-height: 1.6; }
@media (max-width: 800px) { .dc { grid-template-columns: 1fr; } .dc-nav { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--ui-border); } .dc-main { padding: 20px; } }
.ui[data-theme="light"] { --dc-pre: #f0f1f3; }
.dc-nav .dc-theme { margin: 0 0 14px; padding: 0 0 14px; border-bottom: 1px solid var(--ui-border); }
.dc-hero { container-type: inline-size; border: 1px solid var(--ui-border); border-radius: 10px; overflow: hidden; margin: 0 0 32px; background: var(--ui-surface); box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.dc-hero-head { display: flex; align-items: center; gap: 24px; padding: 18px 22px; border-bottom: 1px solid var(--ui-border); }
.dc-hero-head > div { flex: 1; min-width: 0; }
.dc-hero-head b { font-size: 22px; letter-spacing: -.02em; }
.dc-hero-head p { margin: 2px 0 0; max-width: 60ch; }
.dc-hero-head .ui-seg { flex: none; }
.dc-hero-app { position: relative; background: var(--ui-bg); }
.dc-hero .ui-app { height: 760px; --ui-sidebar-w: 220px; --ui-drawer-w: 320px; }
.dc-hero .ui-main { container-type: inline-size; }
.dc-hero .ui-cards { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.dc-hero-split { display: grid; grid-template-columns: minmax(0,3fr) minmax(300px,2fr); gap: 12px; margin-bottom: 12px; }
@container (max-width: 660px) { .dc-hero-split { grid-template-columns: 1fr; } }
@container (max-width: 1180px) { .dc-hero .ui-sidebar { display: none; } }
@container (max-width: 860px) { .dc-hero .ui-drawer { display: none; } }
.dc-hero .ui-scroll-x { overflow-x: auto; }
.dc-hero .ui-port { width: 32px; height: 32px; }
.dc-gloss { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; max-width: 70ch; }
.dc-gloss dt { font-weight: 600; color: var(--ui-text-bright); }
.dc-gloss dd { margin: 0; color: var(--ui-text-2); }