.ui-reference { padding-block: var(--ui-space-16) 96px; }
.ui-reference-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--ui-space-8); padding-bottom: var(--ui-space-12); }
.ui-reference-hero h1 { max-width: 760px; margin-bottom: 14px; font-size: clamp(38px, 6vw, var(--ui-space-16)); line-height: 1.02; letter-spacing: -.055em; }
.ui-reference-hero p { max-width: 760px; margin-bottom: 0; color: var(--ui-text-secondary); font-size: var(--ui-font-prose); line-height: 1.65; }
.ui-reference-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--ui-space-2); }
.ui-reference-section { padding: var(--ui-space-8) 0; border-top: 1px solid var(--ui-border); }
.ui-section-heading { display: flex; align-items: baseline; gap: var(--ui-space-3); margin-bottom: 20px; }
.ui-section-heading > span { color: var(--ui-text-tertiary); font-family: var(--ui-mono); font-size: var(--ui-font-meta); }
.ui-section-heading h2 { margin: 0; font-size: var(--ui-font-heading); letter-spacing: -.02em; }
.ui-color-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ui-space-3); }
.ui-color-card { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 2px var(--ui-space-3); min-width: 0; padding: var(--ui-space-3); background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); }
.ui-color-card strong { font-size: var(--ui-font-small); }
.ui-color-card code { color: var(--ui-text-secondary); font-size: var(--ui-font-meta); overflow-wrap: anywhere; }
.ui-color-swatch { width: 42px; height: 42px; grid-row: span 2; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); }
.ui-color-swatch--page { background: var(--ui-page); }.ui-color-swatch--surface { background: var(--ui-surface); }.ui-color-swatch--primary { background: var(--ui-primary); }.ui-color-swatch--accent { background: var(--ui-accent); }
.ui-type-sample { padding: var(--ui-space-8); background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); }
.ui-type-sample h2 { max-width: 700px; margin-bottom: var(--ui-space-3); font-size: clamp(28px, 4vw, 44px); line-height: 1.08; letter-spacing: -.045em; }
.ui-type-sample > p:not(.ui-eyebrow) { max-width: 620px; margin-bottom: 18px; color: var(--ui-text-secondary); font-size: var(--ui-font-prose); }
.ui-type-sample small { color: var(--ui-text-tertiary); font-family: var(--ui-mono); }
.ui-reference-controls { display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--ui-space-4); }
.ui-control-stack, .ui-notice-stack { display: grid; align-content: start; gap: 14px; padding: 20px; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); }
.ui-data-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--ui-space-4); align-items: stretch; }
.ui-data-grid > * { min-width: 0; }
.ui-data-grid .ui-table-wrap { background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); }

.ui-home { padding-block: 80px 96px; }
.ui-home-hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(460px, 1.1fr); align-items: center; gap: clamp(40px, 7vw, 88px); min-height: 560px; }
.ui-home-copy h1 { max-width: 680px; margin-bottom: 20px; font-size: clamp(46px, 6.3vw, 76px); line-height: .99; letter-spacing: -.058em; }
.ui-home-copy > p { max-width: 620px; margin-bottom: 26px; color: var(--ui-text-secondary); font-size: var(--ui-font-prose); line-height: 1.65; }
.ui-home-proof { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 26px; color: var(--ui-text-tertiary); font-family: var(--ui-mono); font-size: var(--ui-font-meta); letter-spacing: .04em; text-transform: uppercase; }
.ui-reader-demo { min-width: 0; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); box-shadow: var(--ui-shadow-md); overflow: hidden; transform: rotate(.5deg); }
.ui-reader-demo__bar { display: flex; height: 38px; align-items: center; gap: 6px; padding: 0 var(--ui-space-3); background: var(--ui-surface-muted); border-bottom: 1px solid var(--ui-border); }
.ui-reader-demo__bar > span { width: 7px; height: 7px; background: var(--ui-border-strong); border-radius: 50%; }
.ui-reader-demo__bar code { margin-left: var(--ui-space-2); color: var(--ui-text-tertiary); font-size: var(--ui-font-meta); }
.ui-reader-demo__body { padding: 28px; }
.ui-reader-input { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px var(--ui-space-3); padding: 14px; background: var(--ui-page); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); }
.ui-reader-input small { grid-column: 1 / -1; color: var(--ui-text-tertiary); font-size: var(--ui-font-meta); text-transform: uppercase; }
.ui-reader-input strong { min-width: 0; font-family: var(--ui-mono); font-size: var(--ui-font-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-reader-flow { display: grid; grid-template-columns: 1fr 20px 1fr; align-items: center; gap: var(--ui-space-2); width: 55%; margin: 14px auto; color: var(--ui-primary); }
.ui-reader-flow span { height: 1px; background: var(--ui-border); }
.ui-reader-result { padding: 18px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); }
.ui-reader-result > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3); }
.ui-reader-result small { color: var(--ui-text-tertiary); font-size: var(--ui-font-meta); text-transform: uppercase; }
.ui-reader-result h3 { margin: 18px 0 9px; font-size: 19px; letter-spacing: -.025em; }
.ui-reader-result p { color: var(--ui-text-secondary); font-size: var(--ui-font-small); }
.ui-reader-lines { display: grid; gap: 7px; margin-top: 18px; }.ui-reader-lines span { width: 100%; height: 5px; background: var(--ui-surface-muted); border-radius: var(--ui-radius-xs); }.ui-reader-lines span:nth-child(2) { width: 87%; }.ui-reader-lines span:nth-child(3) { width: 62%; }
.ui-home-features { padding: 96px 0; border-top: 1px solid var(--ui-border); }
.ui-home-section-heading { max-width: 760px; margin-bottom: 40px; }.ui-home-section-heading h2 { font-size: clamp(30px, 4vw, var(--ui-space-12)); line-height: 1.08; letter-spacing: -.045em; }
.ui-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ui-border); border-bottom: 1px solid var(--ui-border); }
.ui-feature-grid article { padding: 28px 28px var(--ui-space-8); border-right: 1px solid var(--ui-border); }.ui-feature-grid article:first-child { padding-left: 0; }.ui-feature-grid article:last-child { padding-right: 0; border-right: 0; }
.ui-feature-number { color: var(--ui-primary); font-family: var(--ui-mono); font-size: var(--ui-font-meta); }.ui-feature-grid h3 { margin: 42px 0 10px; font-size: var(--ui-font-heading); }.ui-feature-grid p { margin: 0; color: var(--ui-text-secondary); font-size: var(--ui-font-body); line-height: 1.65; }
.ui-home-cta { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-8); padding: 38px; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); box-shadow: var(--ui-shadow-sm); }.ui-home-cta h2 { margin-bottom: var(--ui-space-2); font-size: clamp(var(--ui-space-6), 3vw, 34px); letter-spacing: -.035em; }.ui-home-cta div > p:last-child { max-width: 680px; margin-bottom: 0; color: var(--ui-text-secondary); font-size: var(--ui-font-input); }

.ui-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ui-space-3); max-width: 1200px; margin: 0 auto var(--ui-space-4); }
.ui-stat-grid article { min-width: 0; padding: var(--ui-space-4); background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); box-shadow: var(--ui-shadow-sm); }
.ui-stat-grid article > div:first-child { display: flex; min-height: 22px; align-items: center; justify-content: space-between; gap: var(--ui-space-2); color: var(--ui-text-secondary); font-size: var(--ui-font-meta); }
.ui-stat-grid strong { display: block; margin-top: 13px; font-size: 27px; line-height: 1.1; letter-spacing: -.04em; }.ui-stat-grid small { display: block; margin-top: var(--ui-space-1); color: var(--ui-text-tertiary); font-size: var(--ui-font-meta); }
.ui-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr); gap: var(--ui-space-4); max-width: 1200px; margin: 0 auto; }
.ui-quick-start > a, .ui-quick-start-item { display: grid; width: 100%; grid-template-columns: var(--ui-space-6) minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 14px var(--ui-space-4); color: inherit; background: transparent; border: 0; border-bottom: 1px solid var(--ui-border); text-align: left; text-decoration: none; cursor: pointer; }.ui-quick-start > :last-child { border-bottom: 0; }.ui-quick-start > a:hover, .ui-quick-start > button:hover { background: var(--ui-surface-muted); }.ui-quick-start > * > span { color: var(--ui-text-tertiary); font-family: var(--ui-mono); font-size: var(--ui-font-meta); }.ui-quick-start strong, .ui-quick-start small { display: block; }.ui-quick-start strong { font-size: var(--ui-font-meta); }.ui-quick-start small { margin-top: 2px; color: var(--ui-text-secondary); font-size: var(--ui-font-meta); overflow-wrap: anywhere; }.ui-quick-start b { color: var(--ui-text-tertiary); font-weight: 400; }

.ui-playground-grid { display: grid; grid-template-columns: minmax(380px, .82fr) minmax(0, 1.18fr); gap: var(--ui-space-4); max-width: 1200px; margin: 0 auto; }
.ui-request-panel { display: grid; align-content: start; gap: 18px; padding: 0 var(--ui-space-4) var(--ui-space-4); }.ui-request-panel .ui-panel-heading { margin-inline: -16px; }.ui-request-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.ui-static-note { display: flex; align-items: center; gap: 7px; margin: -6px 0 0; color: var(--ui-text-tertiary); font-size: var(--ui-font-meta); }
.ui-result-panel { min-width: 0; overflow: hidden; }.ui-state-tabs { margin: 14px var(--ui-space-4); }.ui-result-state { min-height: 388px; padding: 0 var(--ui-space-4) var(--ui-space-4); }.ui-result-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: var(--ui-text-secondary); font-size: var(--ui-font-meta); }.ui-code--result { min-height: 330px; border-color: transparent; border-radius: var(--ui-radius-sm); }
.ui-empty-state, .ui-loading-state, .ui-error-state { display: flex; min-height: 330px; align-items: center; justify-content: center; flex-direction: column; gap: var(--ui-space-3); color: var(--ui-text-secondary); background: var(--ui-surface-muted); border-radius: var(--ui-radius-sm); text-align: center; }.ui-empty-state > span { font-size: var(--ui-space-8); }.ui-empty-state p, .ui-loading-state p, .ui-error-state p { max-width: 420px; margin: 0; }.ui-loading-state > span { width: 78%; height: 10px; background: var(--ui-border); border-radius: var(--ui-radius-sm); animation: ui-pulse 1.2s ease-in-out infinite; }.ui-loading-state > span:nth-child(2) { width: 62%; }.ui-loading-state > span:nth-child(3) { width: 45%; }.ui-error-state { color: var(--ui-danger); background: var(--ui-danger-soft); }.ui-error-state p { color: var(--ui-text-secondary); }
@keyframes ui-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

@media (max-width: 1199px) { .ui-playground-grid { grid-template-columns: 1fr; }.ui-result-state { min-height: 300px; }.ui-code--result, .ui-empty-state, .ui-loading-state, .ui-error-state { min-height: 280px; } }
@media (max-width: 1000px) { .ui-home-hero { grid-template-columns: 1fr; min-height: 0; }.ui-reader-demo { width: min(100%, 680px); transform: none; }.ui-dashboard-grid { grid-template-columns: 1fr; } }
@media (max-width: 780px) { .ui-reference { padding-block: var(--ui-space-12) 72px; }.ui-reference-hero { grid-template-columns: 1fr; align-items: start; }.ui-reference-links { justify-content: flex-start; }.ui-color-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.ui-reference-controls, .ui-data-grid { grid-template-columns: 1fr; }.ui-home { padding-block: 56px 72px; }.ui-home-features { padding: 72px 0; }.ui-feature-grid { grid-template-columns: 1fr; }.ui-feature-grid article, .ui-feature-grid article:first-child, .ui-feature-grid article:last-child { padding: var(--ui-space-6) 0; border-right: 0; border-bottom: 1px solid var(--ui-border); }.ui-feature-grid article:last-child { border-bottom: 0; }.ui-feature-grid h3 { margin-top: 20px; }.ui-home-cta { align-items: stretch; flex-direction: column; }.ui-stat-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .ui-reference-hero h1, .ui-home-copy h1 { font-size: 40px; }.ui-reference-links, .ui-reference-links .ui-button, .ui-home-copy .ui-button-row, .ui-home-copy .ui-button { width: 100%; }.ui-color-grid { grid-template-columns: 1fr; }.ui-type-sample { padding: 22px; }.ui-reader-demo__body { padding: var(--ui-space-4); }.ui-home-cta { padding: var(--ui-space-6); }.ui-request-options { grid-template-columns: 1fr; }.ui-state-tabs { overflow-x: auto; }.ui-state-tabs button { flex: 0 0 auto; }.ui-table th, .ui-table td { padding: 10px; } }
.ui-stat-grid h2 { margin: 0; color: var(--ui-text-secondary); font-size: var(--ui-font-small); font-weight: 500; }
.ui-stat-grid strong { margin-bottom: var(--ui-space-2); }
.ui-quick-start-item { cursor: default; }
.ui-quick-start-item .ui-button { margin-top: var(--ui-space-3); }
.ui-request-preview h3 { margin-bottom: var(--ui-space-2); font-size: var(--ui-font-small); }
.ui-request-panel .ui-preview-note { margin: 0; }
.ui-result-announcement { min-height: 1.6em; margin: var(--ui-space-3) var(--ui-space-4); }
.ui-home-copy > .ui-preview-note { margin-top: var(--ui-space-3); font-size: var(--ui-font-meta); }
@media (min-width: 781px) and (max-width: 1199px) { .ui-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }