.design-page{--page-gutter:clamp(1rem, 3vw, 3rem);max-width:94rem}.design-intro{justify-content:space-between;align-items:center;gap:2rem;padding-block:2.5rem 2rem;display:flex}.design-layout{grid-template-columns:12rem minmax(0,1fr) 16rem;align-items:start;gap:1.5rem;display:grid}.design-sidebar,.design-inspector{align-content:start;gap:1.5rem;min-width:0;display:grid;position:sticky;top:7rem}.design-catalog{gap:1.5rem;min-width:0;display:grid}.design-category-nav,.design-widget{border-radius:var(--radius);padding:1.25rem}.design-category-nav{padding-inline:.75rem}.design-category-nav a{border-radius:var(--radius);min-height:2.75rem;color:var(--muted-foreground);white-space:nowrap;border:1px solid #0000;align-items:center;gap:.75rem;margin-top:.375rem;padding:.625rem .75rem;font-size:.75rem;transition:background-color .16s,border-color .16s,color .16s;display:flex}.design-category-nav a[aria-current],.design-category-nav a:hover{border-color:color-mix(in oklch, var(--primary) 30%, transparent);color:var(--primary);background:var(--glass-selected)}.design-category-nav a:focus-visible{outline:2px solid var(--ring);outline-offset:2px}.design-section{border-radius:var(--radius);min-width:0;scroll-margin-top:7rem;animation:.4s cubic-bezier(.16,1,.3,1) both rsme-enter;overflow:clip}.design-section-heading{border-bottom:1px solid var(--border);align-items:baseline;gap:.75rem;padding:1.25rem 1.5rem;display:flex}.design-section-heading>span{color:var(--primary);font-size:.625rem;font-weight:600}.design-section-heading h2{letter-spacing:-.02em;font-size:.9375rem;font-weight:600}.design-example-body,.design-component-row{padding:1.5rem}.design-component-row>h3{color:var(--muted-foreground);margin-bottom:1rem;font-size:.75rem;font-weight:500}.design-swatch-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;display:grid}.design-swatch{border:1px solid var(--glass-border);border-radius:var(--radius);min-height:5.5rem;box-shadow:inset 0 1px 0 var(--glass-edge);align-items:flex-end;padding:.875rem;display:flex}.design-swatch-glass{background:var(--glass-highlight)}.design-swatch-solid{background:var(--card)}.design-swatch-accent{color:var(--action-foreground);background:linear-gradient(135deg, var(--action-background), var(--action-end))}.design-status{color:var(--primary);background:var(--glass-selected)}.design-resource-table :is(th,td){padding:1rem}.design-resource-table thead{background:var(--glass-field)}.design-resource-table th{color:var(--muted-foreground);font-size:.6875rem;font-weight:500}.design-widget-heading{align-items:center;gap:.5rem;font-size:.75rem;font-weight:600;display:flex}.design-token-list>div{border-bottom:1px solid var(--border);justify-content:space-between;gap:.75rem;padding-block:.625rem;font-size:.6875rem;display:flex}.design-token-list>div:last-child{border:0}.design-token-list dt{color:var(--muted-foreground)}.design-token-list dd{color:var(--primary);font-weight:500}.design-preview-stage{height:10rem;margin-top:1.5rem;position:relative}.design-preview-orb{border-radius:var(--radius);background:linear-gradient(135deg,#6b5cdb,#ab55be);width:7.25rem;height:7.25rem;position:absolute;top:.25rem;left:1rem;transform:rotate(-18deg);box-shadow:0 16px 36px -12px #663dbe8c}.design-live-material{border:1px solid var(--glass-border);border-radius:var(--radius);background:var(--glass-highlight);width:8.25rem;height:8.25rem;box-shadow:var(--glass-shadow);-webkit-backdrop-filter:blur(var(--preview-blur)) saturate(200%);backdrop-filter:blur(var(--preview-blur)) saturate(200%);place-items:center;display:grid;position:absolute;top:1.25rem;right:.5rem;transform:rotate(8deg)}.design-live-material svg{width:3rem;height:3rem;color:var(--foreground)}.design-stepper{border:1px solid var(--border);border-radius:var(--radius);background:var(--glass-field);align-items:center;gap:.25rem;padding:.25rem;display:flex}.design-feedback-preview{border:1px solid var(--border);border-radius:var(--radius);background:var(--glass-field);align-content:center;min-height:7rem;padding:1.25rem;display:grid}@media (min-width:1200px){.design-sidebar,.design-inspector{scrollbar-width:thin;max-height:calc(100svh - 8rem);overflow-y:auto}}@media (max-width:1199px){.design-layout{grid-template-columns:11rem minmax(0,1fr)}.design-inspector{grid-column:2;grid-template-columns:repeat(2,minmax(0,1fr));position:static}}@media (max-width:1023px){.design-layout{grid-template-columns:minmax(0,1fr)}.design-sidebar{position:static}.design-sidebar>.design-widget{display:none}.design-category-nav{scrollbar-width:thin;gap:.5rem;padding:.625rem;display:flex;overflow-x:auto}.design-category-nav>p,.design-category-nav a>span:last-child{display:none}.design-category-nav a{border-radius:var(--radius);flex-shrink:0;margin:0}.design-inspector{grid-column:1}}@media (max-width:639px){.design-intro{flex-direction:column;align-items:stretch;gap:1.5rem;padding-block:2rem 1.5rem}.design-layout,.design-catalog{gap:1rem}.design-inspector{grid-template-columns:minmax(0,1fr)}.design-example-body,.design-component-row,.design-section-heading{padding:1.25rem}.design-resource-table :is(th,td){padding:1rem}.design-swatch{padding:.625rem}}@media (prefers-reduced-transparency:reduce),(forced-colors:active){.design-live-material{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--card)}}