:root {
  --qc-blue: #009ee2;
  --qc-blue-strong: #008fcc;
  --qc-blue-light: #23c8fa;
  --qc-purple: #312782;
  --qc-purple-hover: #3c2f9d;
  --qc-purple-dark: #271f68;
  --qc-example-color: var(--q-bc-secondary, #312782);
  --qc-ink: #0b1736;
  --qc-text: #52617a;
  --qc-border: #dce5f1;
  --qc-surface: #f6f9fd;
  --qc-green: #059669;
  --qc-code: #0b1022;
}

* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; overflow-x: clip; background: #fff; color: var(--qc-ink); font-family: Ubuntu, system-ui, sans-serif; line-height: 1.55; }
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }
code { font-family: "SFMono-Regular", Consolas, monospace; }

.doc-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--qc-border); background: rgba(255,255,255,.92); backdrop-filter: blur(16px); }
.doc-header > div { width: min(100% - 40px, 1440px); margin-inline: auto; }
.doc-header-inner { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.doc-header-brand { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; }
.doc-header-logo-link { flex: 0 0 auto; display: inline-flex; align-items: center; border-radius: 9px; }
.doc-header-logo-link:focus-visible { outline: 3px solid rgba(0,158,226,.22); outline-offset: 4px; }
.logo { display: block; width: 92px; height: auto; }
.doc-title-sub { color: #7b879b; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.doc-title-main { font-size: 15px; font-weight: 700; }
.doc-header-actions { position: relative; align-items: center; gap: 10px; }
.doc-header-nav { display: flex; align-items: center; gap: 4px; }
.doc-header-nav a { padding: 9px 10px; border-radius: 8px; color: #46566f; font-size: 13px; font-weight: 700; line-height: 1.25; white-space: nowrap; }
.doc-header-nav a:hover { background: #eef8fd; color: var(--qc-blue-strong); }
.doc-home-menu { position: relative; display: none; }
.doc-home-menu summary { min-height: 38px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border: 1px solid #d7e0ec; border-radius: 9px; background: #fff; color: #45536a; cursor: pointer; list-style: none; font-size: 13px; font-weight: 700; }
.doc-home-menu summary::-webkit-details-marker { display: none; }
.doc-home-menu summary i { width: 7px; height: 7px; margin-top: -3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.doc-home-menu[open] summary i { margin-top: 3px; transform: rotate(225deg); }
.doc-home-menu__dropdown { position: absolute; top: calc(100% + 9px); right: 0; z-index: 80; width: 220px; display: grid; gap: 2px; padding: 7px; border: 1px solid #d7e0ec; border-radius: 12px; background: rgba(255,255,255,.98); box-shadow: 0 18px 46px rgba(15,35,70,.16); }
.doc-home-menu__dropdown a { padding: 10px 11px; border-radius: 8px; color: #3f4e67; font-size: 13px; font-weight: 700; }
.doc-home-menu__dropdown a:hover { background: #eefafd; color: var(--qc-purple); }
.doc-header-badge { display: inline-flex; gap: 7px; align-items: center; padding: 6px 10px; border: 1px solid #cfe4fb; border-radius: 99px; background: #f2f8ff; color: var(--qc-blue-strong); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.doc-version-menu { position: relative; }
.doc-version-menu summary { min-height: 38px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid #d7e0ec; border-radius: 9px; background: #fff; color: #45536a; cursor: pointer; list-style: none; font-size: 13px; line-height: 1; white-space: nowrap; box-shadow: 0 4px 14px rgba(15,35,70,.04); transition: border-color .18s ease,background .18s ease,color .18s ease; }
.doc-version-menu summary::-webkit-details-marker { display: none; }
.doc-version-menu summary:hover,.doc-version-menu[open] summary { border-color: #8bdcf3; background: #f3fbfe; color: var(--qc-purple); }
.doc-version-menu summary:focus-visible { outline: 3px solid rgba(0,158,226,.2); outline-offset: 2px; }
.doc-version-menu summary strong { color: var(--qc-purple); font-size: 14px; }
.doc-version-short,.doc-version-detail { display: inline; }
.doc-version-menu summary i { width: 7px; height: 7px; margin: -3px 1px 0 3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .18s ease; }
.doc-version-menu[open] summary i { margin-top: 3px; transform: rotate(225deg); }
.doc-version-dropdown { position: absolute; top: calc(100% + 9px); right: 0; z-index: 80; width: 250px; overflow: hidden; padding: 7px; border: 1px solid #d7e0ec; border-radius: 12px; background: rgba(255,255,255,.98); box-shadow: 0 18px 46px rgba(15,35,70,.16); backdrop-filter: blur(16px); }
.doc-version-dropdown > p { margin: 0; padding: 8px 10px 7px; color: #7b879b; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.doc-version-dropdown a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px; border-radius: 8px; color: #3f4e67; }
.doc-version-dropdown a:hover { background: #eefafd; color: var(--qc-purple); }
.doc-version-dropdown a.is-current { background: #f2effa; color: var(--qc-purple); }
.doc-version-dropdown a span,.doc-version-dropdown a strong,.doc-version-dropdown a small { display: block; }
.doc-version-dropdown a strong { font-size: 12px; }
.doc-version-dropdown a small { margin-top: 3px; color: #7b879b; font-size: 9px; }
.doc-version-dropdown a > b { color: var(--qc-blue); font-size: 12px; }

.docs-shell { position: relative; width: min(100% - 40px, 1440px); margin-inline: auto; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 48px; align-items: start; }
.docs-shell::before { content: ""; position: absolute; top: 0; bottom: 0; left: 249px; width: 1px; background: var(--qc-border); pointer-events: none; }
.docs-sidebar { align-self: stretch; width: 100%; height: 100%; min-height: 100%; }
.docs-sidebar-inner { position: sticky; top: 65px; height: var(--docs-sidebar-available-height, calc(100vh - 65px)); min-height: 240px; padding: 32px 22px 36px 0; overflow-y: auto; }
.sidebar-eyebrow { margin: 0 0 12px; color: #8390a5; font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.docs-sidebar nav, .sidebar-group, .sidebar-group-links { display: grid; gap: 4px; }
.sidebar-link { padding: 8px 12px; border-radius: 8px; color: #47556e; font-size: 13px; font-weight: 500; }
.sidebar-link:hover, .sidebar-link.is-active { color: var(--qc-blue-strong); background: #eef6ff; }
.sidebar-link.is-current { color: #fff; background: linear-gradient(135deg, #23c8fa, #009ee2); box-shadow: 0 8px 20px rgba(0,158,226,.2); }
.sidebar-link.is-disabled { opacity: .68; }
.sidebar-group { margin-top: 30px; }
.sidebar-group-title { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 1px 0; padding: 7px 9px; border: 0; border-radius: 8px; background: transparent; color: #60708a; cursor: pointer; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-align: left; text-transform: uppercase; }
.sidebar-group-title:hover { background: #f3f7fc; color: var(--qc-blue-strong); }
.sidebar-group.is-current-group > .sidebar-group-title { border: 1px solid #bde4f7; background: linear-gradient(100deg,#eaf8fd,#f5fbff); color: var(--qc-blue-strong); box-shadow: 0 7px 18px rgba(0,143,204,.08); }
.sidebar-group.is-current-group > .sidebar-group-title .sidebar-group-index { color: var(--qc-purple); }
.sidebar-group-title:focus-visible { outline: 2px solid #8cc8ff; outline-offset: 2px; }
.sidebar-group-label { display: inline-flex; align-items: center; }
.sidebar-group-index { margin-right: 7px; color: #9aa8ba; font-family: monospace; }
.sidebar-group-chevron { flex: 0 0 auto; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .18s ease; }
.sidebar-group-title[aria-expanded="false"] .sidebar-group-chevron { transform: rotate(-45deg); }
.sidebar-group-content { display: grid; grid-template-rows: 1fr; opacity: 1; }
.sidebar-group.is-ready .sidebar-group-content { transition: grid-template-rows .26s ease, opacity .2s ease; }
.sidebar-group-content.is-collapsed { grid-template-rows: 0fr; opacity: 0; }
.sidebar-group-links { min-height: 0; overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .sidebar-group.is-ready .sidebar-group-content, .sidebar-group-chevron { transition: none; }
}

/* States */
.states-demo-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.states-demo-card { display: flex; min-height: 228px; flex-direction: column; align-items: flex-start; gap: 9px; padding: 18px; }
.states-demo-card__eyebrow { padding: 3px 7px; border-radius: 99px; background: #f3efff; color: #312782; font-size: 9px; font-weight: 700; letter-spacing: .06em; line-height: 1.4; }
.states-demo-card > h3 { margin: 5px 0 0; color: #152541; font-size: 15px; line-height: var(--qc-leading-heading); }
.states-demo-card > p { margin: 0; color: #687992; font-size: 12px; line-height: var(--qc-leading-body); }
.states-demo-card > code { width: 100%; margin-top: auto; padding-top: 12px; border-top: 1px solid #e2e9f2; color: #245488; font-size: 10px; }
.states-demo-link { color: #1768d5; font-size: 12px; font-weight: 700; line-height: var(--qc-leading-body); }
.states-demo-card .btn { min-height: 36px; padding: 8px 14px; font-size: 12px; }
.states-group-target { display: inline-flex; padding: 8px 11px; border: 1px solid #dce8f1; border-radius: 8px; font-size: 11px; line-height: var(--qc-leading-body); }
.states-peer-demo { display: flex; align-items: center; gap: 9px; font-size: 11px; line-height: var(--qc-leading-body); }
.states-peer-demo label { padding: 6px 8px; border-radius: 7px; }
.states-control-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.docs-shell--states .alignment-family-card { min-height: 188px; }
.docs-shell--states .alignment-family-card > p { margin-top: auto; }
.docs-shell--states .state-code-card { min-height: 390px; }
.docs-shell--states .states-hover-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.state-code-card > header code { font-size: 12px; }
.state-code-card > header span { font-size: 10px; }
.state-code-card > h4 { font-size: 15px; }
.state-code-card > pre { width: 100%; margin: 0 0 14px; padding: 15px 16px; overflow-x: auto; border: 1px solid #1d2a47; border-radius: 9px; background: #0b1025; color: #e8eefc; font-size: 12px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.state-code-card > pre code { padding: 0; background: transparent; color: inherit; font-size: inherit; }
.state-card-result { min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 14px; padding: 14px 16px; border: 1px solid #d9e5f0; border-radius: 10px; background: linear-gradient(135deg,#f5faff,#eef6ff); }
.state-card-result > span { flex: 0 0 auto; color: #7b879b; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.state-card-result > a,.state-card-result > button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 9px 13px; border-radius: 8px; color: #17335f; font-size: 12px; font-weight: 700; text-decoration: none; }
.state-card-result > button { border-color: #8fa7c1; background: #fff; color: #17335f; cursor: pointer; }
.state-card-result > a.border { border-color: #8fa7c1; background: #fff; }
.state-card-result--image img { width: min(62%,220px); height: 72px; border-radius: 8px; object-fit: cover; transition: opacity .2s ease; }
.state-code-card > p { font-size: 12px; }
.state-code-card > p code { color: #245488; font-size: 12px; }
.preview-container.doc-states-preview { min-height: 390px; padding: 32px; }
.states-preview-control { display: inline-flex; align-items: center; min-height: 48px; padding: 12px 20px; border-radius: 10px; background: #fff; color: #17335f; font-size: 14px; font-weight: 700; }
.states-preview-input { width: min(100%,360px); min-height: 48px; padding: 12px 14px; border-radius: 9px; background: #fff; color: #17335f; font-size: 13px; }
.states-preview-group { width: min(100%,420px); min-height: 180px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 26px; border: 1px solid #cbdbea; border-radius: 14px; background: #fff; box-shadow: 0 14px 34px rgba(19,42,80,.08); text-align: left; }
.states-preview-group strong { color: #152541; font-size: 18px; }
.states-preview-group span { display: inline-flex; padding: 9px 12px; border-radius: 8px; color: #52647f; font-size: 12px; font-weight: 700; }
.states-preview-peer { display: flex; align-items: center; gap: 12px; }
.states-preview-peer input { width: 18px; height: 18px; }
.states-preview-peer label { padding: 12px 15px; border-radius: 9px; background: #fff; color: #52647f; font-size: 12px; font-weight: 700; }
@media (max-width: 1024px) {
  .states-demo-grid,.states-control-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 768px) {
  .docs-shell--states .states-hover-grid { grid-template-columns: 1fr; }
  .state-card-result { align-items: flex-start; flex-direction: column; }
  .state-card-result--image img { width: 100%; max-width: none; }
}
@media (max-width: 768px) {
  .states-demo-grid,.states-control-grid { grid-template-columns: 1fr; }
  .states-demo-card { min-height: 210px; padding: 16px; }
  .preview-container.doc-states-preview { min-height: 300px; padding: 18px; }
  .states-preview-group { min-height: 160px; padding: 20px; }
}
.sidebar-group--muted { border-top: 1px solid var(--qc-border); padding-top: 18px; }

.docs-content { min-width: 0; padding: 36px 0 72px; }
.hero-section, .content-section { scroll-margin-top: 84px; }
.breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 25px; color: #8190a6; font-size: 12px; }
.breadcrumb a:hover { color: var(--qc-blue-strong); }
.breadcrumb strong { color: #435169; }
.title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; margin-bottom: 26px; }
.section-kicker { margin: 0 0 5px; color: var(--qc-blue-strong); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(34px, 4vw, 52px); line-height: 1.08; letter-spacing: -.035em; }
h1 span { color: var(--qc-blue); }
.lead { max-width: 820px; margin: 15px 0 0; color: var(--qc-text); font-size: 17px; }
.title-actions { display: flex; align-items: center; gap: 10px; padding-top: 24px; white-space: nowrap; }
.version-pill { padding: 7px 15px; border-radius: 99px; background: #eaf5ff; color: var(--qc-blue-strong); font-size: 12px; font-weight: 700; }
.link-button { padding: 8px 13px; border: 1px solid var(--qc-border); border-radius: 9px; background: #fff; color: #3f4e67; cursor: pointer; }
.link-button:hover { border-color: #9cccf8; color: var(--qc-blue-strong); }

.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin: 0 0 14px; }
.feature-card { display: flex; gap: 14px; min-height: 132px; padding: 20px; border: 1px solid var(--qc-border); border-radius: 14px; background: #fff; box-shadow: 0 8px 26px rgba(15,35,70,.04); }
.feature-card h2, .info-banner h2 { margin: 2px 0 5px; font-size: 15px; }
.feature-card p, .info-banner p { margin: 0; color: var(--qc-text); font-size: 13px; }
.feature-icon { flex: 0 0 42px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; font-size: 24px; font-weight: 700; }
.feature-icon--blue { color: #009ee2; background: #dff0ff; }
.feature-icon--purple { color: #312782; background: #f0e5ff; }
.feature-icon--green { color: #048a61; background: #daf8ec; }
.info-banner { display: flex; gap: 16px; margin-top: 12px; padding: 18px 20px; border: 1px solid var(--qc-border); border-radius: 13px; background: var(--qc-surface); }
.info-banner--blue { border-color: #badcff; background: linear-gradient(110deg, #eef8ff, #f8fbff); }
.info-banner--blue h2 { color: var(--qc-blue-strong); }
.doc-callout-action { display: inline-flex; align-items: center; gap: 8px; margin-top: 13px; padding: 9px 13px; border: 1px solid #009ee2; border-radius: 9px; background: linear-gradient(135deg,#23c8fa,#008fcc); color: #fff; font-size: 12px; font-weight: 800; line-height: 1; text-decoration: none; box-shadow: 0 7px 16px rgba(0,143,204,.16); transition: transform .2s ease,box-shadow .2s ease,filter .2s ease; }
.doc-callout-action:hover { color: #fff; filter: brightness(1.04); transform: translateY(-1px); box-shadow: 0 10px 20px rgba(0,143,204,.22); }
.doc-callout-action:focus-visible { outline: 3px solid rgba(0,143,204,.24); outline-offset: 3px; }
.info-symbol { flex: 0 0 34px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--qc-blue); color: #fff; font-weight: 700; }
.info-symbol--neutral { background: #e3e9f2; color: #53627a; }

.content-section { padding-top: 60px; }
.doc-section { scroll-margin-top: 84px; }
.doc-grid { display: grid; }
.doc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.doc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.doc-card { border: 1px solid var(--qc-border); border-radius: 12px; background: #fff; }
.doc-callout { border: 1px solid var(--qc-border); border-radius: 13px; }
.doc-callout--info { border-color: #badcff; }
.doc-tabs { display: flex; flex-wrap: wrap; }
.doc-tab { cursor: pointer; }
.doc-table-wrap { overflow-x: auto; }
.doc-table { width: 100%; border-collapse: collapse; }
.section-heading { margin-bottom: 20px; }
.section-heading h2 { margin: 0; font-size: 30px; line-height: 1.2; letter-spacing: -.025em; }
.section-heading > p:last-child { margin: 8px 0 0; color: var(--qc-text); }
.example-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.example-tab { padding: 9px 15px; border: 1px solid var(--qc-border); border-radius: 8px; background: #f3f6fa; color: #4b5a72; cursor: pointer; font-family: monospace; font-size: 12px; }
.example-tab:hover { color: var(--qc-blue-strong); border-color: #acd4fb; }
.example-tab.is-active { border-color: transparent; background: linear-gradient(135deg, #009ee2, #23c8fa); color: #fff; box-shadow: 0 6px 18px rgba(0,158,226,.22); }
.example-workbench { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid #cbdbea; border-radius: 13px; overflow: hidden; box-shadow: 0 12px 35px rgba(19,42,80,.07); }
.code-panel { min-width: 0; background: var(--qc-code); color: #dbe7ff; }
.result-panel { min-width: 0; border-top: 1px solid #cbdbea; background: #fff; }
.panel-toolbar { min-height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; border-bottom: 1px solid rgba(134,158,199,.2); color: #7890b5; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.result-panel .panel-toolbar { color: #47566e; border-color: var(--qc-border); }
.panel-toolbar button { border: 1px solid #2b3857; border-radius: 7px; padding: 5px 9px; background: #111a30; color: #dbe7ff; cursor: pointer; font-size: 11px; }
.code-panel pre { min-height: 245px; max-height: 420px; margin: 0; padding: 25px 22px; overflow: auto; color: #d9e5fb; font-size: 13px; line-height: 1.8; white-space: pre-wrap; }
.code-panel .token-tag { color: #93c5fd; }
.code-panel .token-attr { color: #fff7a8; }
.code-panel .token-value { color: #f0a3f2; }
.code-panel .token-symbol { color: #93c5fd; }
[data-doc-code] .token-tag { color: #93c5fd; }
[data-doc-code] .token-attr { color: #fff7a8; }
[data-doc-code] .token-value { color: #f0a3f2; }
[data-doc-code] .token-symbol { color: #93c5fd; }
.preview-stage { min-height: 245px; padding: 32px 25px; background-image: linear-gradient(#eef3f9 1px, transparent 1px), linear-gradient(90deg, #eef3f9 1px, transparent 1px); background-size: 20px 20px; }
.preview-ruler { display: flex; justify-content: space-between; margin-bottom: 20px; color: #8a98ab; font-size: 10px; text-transform: uppercase; }
.preview-container { width: 100%; min-height: 142px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; margin-inline: auto; padding: 22px; border: 1px solid #bcdfff; border-radius: 10px; background: linear-gradient(135deg, #e7f5ff, #f0f7ff); text-align: center; transition: max-width .3s ease; }
.preview-container.grid { display: grid; }
.preview-container strong { font-size: 15px; }
.preview-container:not(.doc-preview-columns) span:not(.q-alert__icon) { max-width: 330px; color: #52647f; font-size: 12px; }
.preview-container.doc-preview-columns { flex-direction: row; align-items: stretch; justify-content: flex-start; gap: 0; padding: 12px; }
.preview-container.doc-preview-columns > * { min-height: 116px; display: grid; place-items: center; margin: 0; padding: 12px; border: 4px solid #e7f5ff; border-radius: 10px; background: #cfe9ff; color: #163b67; text-align: center; }
.preview-container.doc-preview-columns > *:nth-child(even) { background: #e9defe; color: #513688; }
.preview-container.doc-button-preview { min-height: 210px; }
.preview-container.doc-button-preview > .btn,
.preview-container.doc-button-preview > .btn-ico { margin: 0; }
.preview-container.doc-color-preview { min-height: 210px; }
.preview-container.doc-color-preview > [data-doc-example-subject] { min-width: min(100%, 260px); min-height: 110px; display: grid; place-items: center; padding: 24px; border-radius: 14px; font-size: 18px; font-weight: 700; text-align: center; }
.color-family-showcase-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.color-family-showcase .semantic-color-sample { min-height: 138px; }
.color-family-showcase .semantic-tone-strip { height: 42px; }
.color-family-ranges { width: 100%; display: grid; gap: 6px; }
.color-family-ranges p { display: grid; grid-template-columns: 48px minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 5px; margin: 0; }
.color-family-ranges span { color: #6f8098; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.color-family-ranges code { overflow: hidden; color: #435d7e; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.color-family-ranges b { color: #8190a5; font-size: 11px; font-weight: 700; }
.semantic-color-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.semantic-color-card { min-width: 0; padding: 18px; }
.semantic-color-card > header { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.semantic-color-dot { width: 34px; height: 34px; flex: 0 0 auto; border: 4px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #d9e4f0,0 6px 14px rgba(25,63,104,.12); }
.semantic-color-card h3 { margin: 0 0 3px; color: #132b50; font-size: 15px; text-transform: capitalize; }
.semantic-color-card header p { margin: 0; color: #667792; font-size: 11px; line-height: 1.45; }
.semantic-color-sample { min-height: 86px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 7px; padding: 15px; border-radius: 10px; }
.semantic-color-sample strong { font-size: 14px; text-transform: capitalize; }
.semantic-color-sample code { color: #506581; font-size: 9px; }
.semantic-tone-strip { display: grid; grid-template-columns: repeat(11,minmax(0,1fr)); height: 34px; margin-top: 13px; overflow: hidden; border: 1px solid #d5e0ec; border-radius: 8px; background: #fff; }
.semantic-tone-strip span { min-width: 0; }
.semantic-color-tokens { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin: 11px 0 0; color: #74839a; font-size: 9px; }
.semantic-color-tokens code { padding: 3px 5px; font-size: 9px; }
@media (max-width: 1024px) { .semantic-color-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 1180px) { .color-family-showcase-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 768px) { .color-family-showcase-grid { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .color-family-ranges p { grid-template-columns: 1fr auto 1fr; } .color-family-ranges span { grid-column: 1 / -1; } }
@media (max-width: 640px) { .semantic-color-grid { grid-template-columns: 1fr; } }
.preview-container.doc-type-preview { min-height: 210px; }
.preview-container.doc-type-preview > [data-doc-example-subject] { width: min(100%, 480px); margin: 0; color: #13223c; text-align: center; }
.preview-container.doc-icon-preview { min-height: 210px; }
.preview-container.doc-icon-preview > svg { display: block; }
.icon-size-summary { gap: 12px; margin-bottom: 14px; }
.icon-size-summary article { display: grid; gap: 3px; padding: 16px 18px; background: var(--qc-surface); }
.icon-size-summary strong { color: var(--qc-blue-strong); font-size: 14px; }
.icon-size-summary span { color: var(--qc-text); font-size: 12px; }
.icon-size-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; }
.icon-size-item { min-height: 145px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 7px; padding: 14px 10px; overflow: hidden; border: 1px solid var(--qc-border); border-radius: 11px; background: #fff; }
.icon-size-item svg { max-width: 100%; }
.icon-size-item code { padding: 3px 6px; border-radius: 5px; background: #eef3f9; color: #245488; font-size: 10px; }
.icon-size-item span { color: #7b879b; font-size: 11px; }
.icon-option-table { margin-top: 14px; }
.icon-library-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.icon-library-card { min-width: 0; padding: 20px; }
.icon-library-heading { display: flex; align-items: center; gap: 12px; }
.icon-library-heading > div:last-child > span { color: var(--qc-blue-strong); font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.icon-library-heading h3 { margin: 2px 0 0; font-size: 15px; }
.icon-library-preview { flex: 0 0 58px; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 13px; background: #edf6ff; }
.icon-library-card > p { min-height: 62px; margin: 15px 0; color: var(--qc-text); font-size: 12px; }
.icon-library-card pre { min-height: 150px; margin: 0; padding: 15px; overflow: auto; border-radius: 9px; background: var(--qc-code); color: #dbe7ff; font-size: 11px; line-height: 1.6; white-space: pre-wrap; }
.icon-library-card .token-tag { color: #93c5fd; }
.icon-library-card .token-attr { color: #fff7a8; }
.icon-library-card .token-value { color: #f0a3f2; }
.icon-library-card .token-symbol { color: #93c5fd; }
.icon-library-result { margin-top: 14px; padding: 13px 15px; border: 1px solid #cfe3f7; border-radius: 9px; background: #f6faff; }
.icon-library-result > span { display: block; margin-bottom: 8px; color: #71829a; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.icon-library-result > div { min-height: 42px; display: flex; align-items: center; gap: 11px; color: #263955; }
.icon-library-result strong { font-size: 12px; }
.preview-container.doc-iframe-preview { min-height: 430px; }
.preview-container.doc-iframe-preview > .doc-iframe-subject { width: min(100%, 620px); background: #dfeefe; transition: max-width .25s ease; }
.preview-container.doc-iframe-preview > .doc-iframe-subject.ratio-1-1 { max-width: 330px; }
.preview-container.doc-iframe-preview > .doc-iframe-subject.ratio-9-16 { max-width: 210px; }

/* Presentación estática de templates */
.template-presentation { display: grid; grid-template-columns: minmax(250px,.72fr) minmax(0,1.28fr); gap: clamp(34px,5vw,72px); align-items: center; padding: clamp(28px,4vw,56px); border: 1px solid #d8e4ef; border-radius: 20px; background: linear-gradient(145deg,#f8fbff 0%,#eef7ff 100%); overflow: hidden; }
.template-presentation__content { position: relative; z-index: 2; }
.template-presentation__content h2 { max-width: 18ch; margin: 8px 0 18px; }
.template-presentation__content p:not(.section-kicker) { max-width: 55ch; color: #52647f; }
.template-perspective { min-width: 0; margin: 0; perspective: 1500px; }
.template-perspective__frame { position: relative; overflow: hidden; border: 1px solid rgba(116,148,177,.42); border-radius: 14px; background: #fff; box-shadow: -18px 24px 42px rgba(24,55,87,.2); transform: rotateX(4deg) rotateY(-9deg) rotateZ(1deg); transform-origin: center left; }
.template-perspective__frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg,rgba(255,255,255,.2),transparent 34%); }
.template-perspective__frame img { width: 100%; height: auto; display: block; }
.template-perspective figcaption { margin-top: 22px; color: #64748b; font-size: 12px; text-align: center; }
.template-perspective__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 18px; }

@media (max-width: 900px) {
  .template-presentation { grid-template-columns: 1fr; }
  .template-presentation__content h2 { max-width: 18ch; }
  .template-perspective__frame { transform: rotateX(3deg) rotateY(-4deg) rotateZ(.5deg); transform-origin: center; }
}

@media (max-width: 640px) {
  .template-presentation { padding: 24px 18px; }
  .template-perspective__frame { transform: none; }
}

/* Images documentation */
.preview-container.doc-image-preview { min-height: 430px; padding: 34px; overflow: hidden; }
.preview-container.doc-image-preview--fluid { align-items: center; }
.preview-container.doc-image-preview--fluid > .doc-image-subject { inline-size: min(100%, 620px); block-size: auto; border-radius: 16px; box-shadow: 0 18px 45px rgba(28, 64, 112, .16); }
.preview-container.doc-image-preview--box > .doc-image-subject { inline-size: min(100%, 620px); block-size: 310px; border-radius: 16px; background: #e9f2fc; box-shadow: 0 18px 45px rgba(28, 64, 112, .16); }
.image-position-grid { margin-top: 24px; }
.image-position-card { display: grid; gap: 12px; }
.image-position-card > code { justify-self: start; margin-inline: 14px; padding: 3px 7px; border-radius: 5px; background: #eef3f9; color: #245488; font-size: 11px; line-height: 1.35; }
.image-position-card > p { margin: 0 14px 14px; color: #71809a; font-size: 11px; line-height: 1.4; }
.image-position-card > p code { padding: 0; background: transparent; color: inherit; font-size: 11px; }
.image-position-demo { position: relative; min-height: 112px; overflow: hidden; border: 1px solid #d6e2f1; border-radius: 14px; background: linear-gradient(135deg, #edf6ff, #f2efff); }
.image-position-demo::before { content: ''; position: absolute; inset: 14px; border: 1px dashed #b7cae1; border-radius: 9px; }
.image-position-demo > span { position: absolute; inset: 14px; display: flex; align-items: var(--align, center); justify-content: var(--justify, center); color: #1768d5; font-size: 11px; font-weight: 700; }
.image-position-card:nth-child(2) .image-position-demo > span { align-items: flex-start; padding-top: 10px; }
.image-position-card:nth-child(3) .image-position-demo > span { align-items: flex-end; padding-bottom: 10px; }
.image-position-card:nth-child(4) .image-position-demo > span { justify-content: flex-start; padding-left: 10px; }
.image-position-card:nth-child(5) .image-position-demo > span { justify-content: flex-end; padding-right: 10px; }
.image-position-card:nth-child(6) .image-position-demo > span { align-items: flex-start; justify-content: flex-start; padding: 10px; }
.image-position-card:nth-child(7) .image-position-demo > span { align-items: flex-start; justify-content: flex-end; padding: 10px; }
.image-position-card:nth-child(8) .image-position-demo > span { align-items: flex-end; justify-content: flex-start; padding: 10px; }
.image-position-card:nth-child(9) .image-position-demo > span { align-items: flex-end; justify-content: flex-end; padding: 10px; }

@media (max-width: 768px) {
  .preview-container.doc-image-preview { min-height: 310px; padding: 20px; }
  .preview-container.doc-image-preview--box > .doc-image-subject { block-size: 230px; }
}

/* Text decoration documentation */
.preview-container.doc-line-preview { min-height: 350px; }
.preview-container.doc-line-preview > .doc-line-subject { width: min(100%, 460px); margin: 0; padding: 34px 24px; border-color: #276be7; outline-color: transparent; border-radius: 14px; background: #f4f8ff; color: #17335f; font-size: 16px; font-weight: 700; text-align: center; }
.preview-container.doc-line-preview > .doc-line-subject--text { width: auto; padding: 12px; border: 0; background: transparent; color: #276be7; font-size: 20px; text-decoration-color: #8b43ef; text-decoration-thickness: 3px; text-underline-offset: 7px; }
.decoration-width-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.decoration-width-card { display: grid; gap: 12px; min-width: 0; padding: 16px; }
.decoration-width-sample { justify-self: start; color: #276be7; font-size: 24px; font-weight: 800; line-height: 1.35; text-decoration-color: #8b43ef; text-underline-offset: 7px; }
.decoration-width-card code { justify-self: start; padding: 3px 7px; border-radius: 5px; background: #eef3f9; color: #245488; font-size: 11px; }
.decoration-width-card small { color: #7b879b; font-size: 11px; }

@media (max-width: 900px) {
  .decoration-width-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .decoration-width-grid { grid-template-columns: 1fr; }
}

/* Lists documentation */
.preview-container.doc-list-preview { min-height: 360px; justify-content: center; }
.preview-container.doc-list-preview > .doc-list-subject { width: min(100%, 430px); margin: 0; padding: 24px 30px 24px 48px; border: 1px solid #d3e1f1; border-radius: 14px; background: #f7faff; color: #223b62; font-size: 14px; line-height: 1.55; }
.preview-container.doc-list-preview > .doc-list-subject.list-none { padding-left: 30px; }
.list-marker-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.list-marker-card { display: grid; gap: 14px; min-width: 0; padding: 18px; }
.list-marker-card > ul, .list-marker-card > ol { min-height: 86px; margin: 0; padding-left: 28px; color: #405271; font-size: 12px; line-height: 1.45; }
.list-marker-card > div, .list-gap-card > div { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.list-marker-card code, .list-gap-card code { padding: 3px 7px; border-radius: 5px; background: #eef3f9; color: #245488; font-size: 11px; }
.list-marker-card small, .list-gap-card small { color: #7b879b; font-size: 10px; }
.list-gap-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.list-gap-card { display: grid; gap: 12px; min-width: 0; padding: 16px; }
.list-gap-card > ul { min-height: 150px; margin: 0; padding-left: 24px; color: #405271; font-size: 11px; line-height: 1.35; }

@media (max-width: 900px) {
  .list-marker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .list-gap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .list-marker-grid, .list-gap-grid { grid-template-columns: 1fr; }
}

/* Alignment documentation */
.preview-container.doc-alignment-preview { min-height: 390px; }
.preview-container.doc-alignment-preview > .doc-alignment-subject { width: min(100%, 620px); height: 260px; gap: 16px; padding: 24px; border: 1px solid #d3e1f1; border-radius: 14px; background: linear-gradient(135deg, #f6faff, #f4f1ff); }
.preview-container.doc-alignment-preview > .doc-alignment-subject--grid { grid-template-columns: repeat(3, 56px); grid-template-rows: 56px; }
.preview-container.doc-alignment-preview > .doc-alignment-subject--place { grid-template-columns: repeat(3, 56px); }
.preview-container.doc-alignment-preview > .doc-alignment-subject > span { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 12px; background: #276be7; color: #fff; font-size: 13px; font-weight: 700; box-shadow: 0 7px 18px rgba(39,107,231,.2); }
.alignment-choice-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 26px; }
.alignment-choice-strip > div { padding: 13px 15px; border: 1px solid #badcff; border-radius: 10px; background: #f2f8ff; }
.alignment-choice-strip strong, .alignment-choice-strip span { display: block; }
.alignment-choice-strip strong { margin-bottom: 5px; color: #17335f; font-size: 12px; }
.alignment-choice-strip span { color: #52647f; font-size: 11px; line-height: 1.4; }
.alignment-choice-strip code { color: #1768d5; font-size: 10px; }
.alignment-family-group + .alignment-family-group { margin-top: 22px; }
.alignment-family-group > h3 { margin: 0 0 10px; color: #1768d5; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.alignment-family-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.alignment-family-grid--texto { grid-template-columns: minmax(0, 1fr); }
.alignment-family-card { min-width: 0; padding: 18px; }
.alignment-family-card header { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.alignment-family-card header code { padding: 3px 7px; border-radius: 5px; background: #eef3f9; color: #245488; font-size: 11px; }
.alignment-family-card header span { padding: 3px 7px; border-radius: 99px; background: #f3efff; color: #312782; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.alignment-family-card h4 { margin: 14px 0 12px; color: #152541; font-size: 14px; }
.alignment-family-card dl { display: grid; gap: 8px; margin: 0; }
.alignment-family-card dl > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.alignment-family-card dt { color: #7b879b; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.alignment-family-card dd { min-width: 0; margin: 0; color: #405271; font-size: 11px; }
.alignment-family-card dd code { color: #245488; font-size: 10px; }
.alignment-family-card > p { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid #e2e9f2; color: #6b7890; font-size: 10px; line-height: 1.45; }
.alignment-breakpoint-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.alignment-breakpoint-card { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; min-width: 0; padding: 15px; }
.alignment-breakpoint-card code { grid-row: 1 / span 2; padding: 5px 8px; border-radius: 6px; background: #eaf5ff; color: #1768d5; font-size: 12px; font-weight: 700; }
.alignment-breakpoint-card span { color: #33435d; font-size: 11px; font-weight: 700; }
.alignment-breakpoint-card small { overflow: hidden; color: #7b879b; font-family: monospace; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 900px) {
  .alignment-choice-strip, .alignment-family-grid, .alignment-breakpoint-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alignment-family-grid--texto { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 520px) {
  .alignment-choice-strip, .alignment-family-grid, .alignment-breakpoint-grid { grid-template-columns: 1fr; }
  .preview-container.doc-alignment-preview > .doc-alignment-subject { height: 220px; padding: 16px; }
}

/* Borders documentation */
.preview-container.doc-border-preview { min-height: 360px; }
.preview-container.doc-border-preview > .doc-border-subject { width: min(100%, 470px); display: grid; gap: 8px; padding: 34px; background: #f7faff; color: #17335f; text-align: center; }
.preview-container.doc-border-preview > .doc-border-subject > strong { font-size: 15px; }
.preview-container.doc-border-preview > .doc-border-subject > span { max-width: none; color: #60708a; font-size: 11px; }
.preview-container.doc-border-preview > .doc-border-subject--pill { width: auto; padding: 16px 30px; }
.border-pattern-table { min-width: 1240px; }
.border-pattern-table th, .border-pattern-table td { vertical-align: top; }
.border-pattern-table th:nth-child(1) { width: 15%; }
.border-pattern-table th:nth-child(2) { width: 19%; }
.border-pattern-table th:nth-child(3) { width: 20%; }
.border-pattern-table th:nth-child(4) { width: 24%; }
.border-pattern-table th:nth-child(5) { width: 22%; }
.border-pattern-table td { font-size: 11px; line-height: 1.5; }
.border-pattern-table .pattern-example { display: block; padding: 7px 9px; white-space: normal; overflow-wrap: anywhere; border-radius: 7px; background: #eef3f9; line-height: 1.55; }
.border-width-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.border-width-card, .border-style-card, .border-radius-card { display: grid; gap: 7px; min-width: 0; padding: 13px; }
.border-width-card > span, .border-style-card > span { display: block; height: 14px; border-top-color: var(--qc-example-color); }
.border-width-card > span { border-top-style: solid; }
.border-style-card > span { border-top-width: 4px; }
.border-width-card code, .border-style-card code, .border-radius-card code { justify-self: start; padding: 3px 6px; border-radius: 5px; background: #eef3f9; color: #245488; font-size: 10px; }
.border-width-card small, .border-style-card small, .border-radius-card small { color: #7b879b; font-size: 10px; }
.border-style-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.border-radius-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.border-radius-card { grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; }
.border-radius-card > .border-radius-sample { position: relative; grid-row: 1 / span 2; display: block; width: 104px; height: 104px; overflow: hidden; border: 2px solid var(--qc-example-color); border-radius: 0; background: linear-gradient(135deg, #eee7ff, #f8f5ff); }
.border-radius-card > .border-radius-sample::before, .border-radius-card > .border-radius-sample::after { content: ''; position: absolute; background: rgba(60,47,157,.22); }
.border-radius-card > .border-radius-sample::before { top: 13px; bottom: 0; left: 13px; width: 1px; }
.border-radius-card > .border-radius-sample::after { top: 13px; right: 0; left: 13px; height: 1px; }
.border-radius-card > .border-radius-sample i { position: absolute; top: 9px; left: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--qc-example-color); }

/* Gap documentation */
.doc-gap-preview { min-height: 390px; }
.doc-gap-subject {
  width: min(100%, 680px);
  padding: 24px;
  border: 1px solid #bfdbfe;
  border-radius: 16px;
  background: rgba(239, 246, 255, .84);
}
.doc-gap-subject > span {
  display: grid;
  min-height: 72px;
  place-items: center;
  border: 2px solid var(--qc-example-color);
  border-radius: 10px;
  background: #f5f0ff;
  color: #271f68;
  font-weight: 700;
}

.gap-family-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.gap-family-card { display: flex; flex-direction: column; gap: 12px; min-height: 300px; padding: 20px; }
.gap-family-card header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gap-family-card header code { font-size: 13px; }
.gap-family-card header span {
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.gap-family-card h3 { margin: 0; font-size: 16px; line-height: 1.3; }
.gap-family-card p { margin: 0; color: var(--qc-text); font-size: 13px; line-height: 1.5; }
.gap-family-card small { margin-top: auto; color: #64748b; font-size: 11px; }
.gap-axis-demo {
  display: grid;
  grid-template-columns: repeat(2, 36px);
  grid-template-rows: repeat(2, 36px);
  width: max-content;
  padding: 14px;
  border-radius: 14px;
  background: #f5f0ff;
}
.gap-axis-demo i { border: 2px solid var(--qc-example-color); border-radius: 7px; background: #fff; }
.gap-axis-demo--both { gap: 18px; }
.gap-axis-demo--x { column-gap: 26px; row-gap: 3px; }
.gap-axis-demo--y { column-gap: 3px; row-gap: 26px; }

.gap-scale-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.gap-scale-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px 12px;
  min-height: 116px;
  padding: 16px;
}
.gap-scale-card > code { font-size: 13px; }
.gap-scale-sample {
  position: relative;
  grid-column: 1 / -1;
  align-items: center;
  min-height: 48px;
  overflow: hidden;
}
.gap-scale-sample i { flex: 0 0 34px; width: 34px; height: 34px; border: 2px solid var(--qc-example-color); border-radius: 7px; background: #f5f0ff; }
.gap-scale-sample::after { content: ""; position: absolute; left: 34px; width: var(--gap-size); height: 8px; border-radius: 999px; background: var(--qc-example-color); opacity: .32; }
.gap-scale-card small { color: #64748b; font-size: 11px; text-align: right; }

.gap-breakpoint-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.gap-breakpoint-card { display: grid; gap: 5px; min-height: 108px; padding: 16px; }
.gap-breakpoint-card > code { width: max-content; font-size: 17px; line-height: 1.2; }
.gap-breakpoint-card > span { color: #0f172a; font-size: 12px; font-weight: 700; }
.gap-breakpoint-card > small { color: #64748b; font-size: 11px; }
.gap-responsive-code { margin-top: 16px; padding: 18px; }
.gap-responsive-code > span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.gap-responsive-code pre {
  margin: 14px 0;
  padding: 18px;
  overflow: auto;
  border-radius: 14px;
  background: #070b20;
  color: #dbeafe;
  font-size: 12px;
  line-height: 1.6;
}
.gap-responsive-code p { margin-bottom: 0; color: #64748b; font-size: 13px; }

.docs-shell--gap #familias .section-heading h2,
.docs-shell--gap #escala .section-heading h2,
.docs-shell--gap #responsive .section-heading h2 { font-size: 28px; }
.docs-shell--gap #familias .section-heading > p:last-child,
.docs-shell--gap #escala .section-heading > p:last-child,
.docs-shell--gap #responsive .section-heading > p:last-child { font-size: 14px; }

@media (max-width: 1100px) {
  .gap-family-grid { grid-template-columns: 1fr; }
  .gap-family-card { min-height: auto; }
  .gap-scale-grid, .gap-breakpoint-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .doc-gap-preview { min-height: 300px; }
  .doc-gap-subject { padding: 14px; }
  .doc-gap-subject > span { min-height: 52px; }
  .gap-scale-grid, .gap-breakpoint-grid { grid-template-columns: 1fr; }
  .gap-family-card, .gap-scale-card, .gap-breakpoint-card, .gap-responsive-code { padding: 14px; }
}

/* Filter */
.doc-filter-stage { min-height: 440px; }
.doc-filter-preview { min-height: 310px; overflow: visible; }
.doc-filter-subject { position: relative; width: min(100%,380px); min-height: 238px; display: flex; align-items: flex-end; justify-content: flex-end; gap: 10px; overflow: hidden; padding: 18px; border: 0; border-radius: 24px; background-color: #c9b095; background-image: linear-gradient(180deg,transparent 52%,rgba(18,27,32,.48) 100%),url("../img/filter-showcase.jpg"); background-position: center; background-size: cover; color: #fff; box-shadow: 0 24px 52px rgba(42,55,66,.24); isolation: isolate; }
.doc-filter-subject::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(135deg,rgba(255,255,255,.16),transparent 38%); pointer-events: none; }
.doc-filter-subject::after { content: none; }
.doc-filter-subject i,.doc-filter-subject b { display: none; }
.doc-filter-subject strong { display: none; }
.doc-filter-subject small { z-index: 1; padding: 7px 10px; border: 1px solid rgba(255,255,255,.32); border-radius: 10px; background: rgba(255,255,255,.22); color: #fff; font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; text-shadow: 0 1px 5px rgba(0,0,0,.35); backdrop-filter: blur(8px); }
.filter-choice-strip { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; margin-bottom: 18px; overflow: hidden; border: 1px solid #c9ddf0; border-radius: 12px; background: #c9ddf0; }
.filter-choice-strip > div { display: grid; gap: 6px; min-height: 106px; align-content: center; padding: 16px; background: #f6faff; }
.filter-choice-strip strong { color: #18365f; font-size: 12px; }
.filter-choice-strip span { color: #64748b; font-size: 10px; line-height: 1.45; }
.filter-family-panel { margin-top: 14px; }
.filter-family-header { display: grid; grid-template-columns: minmax(180px,.45fr) minmax(0,1.55fr); gap: 22px; align-items: center; margin-bottom: 14px; padding: 18px 20px; border: 1px solid #d5e4f2; border-radius: 12px; background: linear-gradient(110deg,#eef8ff,#fbfdff); }
.filter-family-header > div:first-child { display: flex; align-items: center; gap: 12px; }
.filter-family-header span { padding: 5px 8px; border-radius: 99px; background: #dff1ff; color: #0872ca; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.filter-family-header h3,.filter-family-header p { margin: 0; }
.filter-family-header h3 code { font-size: 13px; }
.filter-family-header strong { color: #22314d; font-family: monospace; font-size: 11px; }
.filter-family-header p { margin-top: 5px; color: #64748b; font-size: 11px; line-height: 1.5; }
.filter-scale-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.filter-scale-card { min-width: 0; padding: 12px; }
.filter-scale-card > div:last-child { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 11px; }
.filter-scale-card code { font-size: 10px; }
.filter-scale-card small { color: #728197; font-family: monospace; font-size: 9px; }
.filter-scale-swatch { position: relative; min-height: 126px; display: flex; align-items: flex-end; justify-content: flex-start; overflow: hidden; padding: 10px; border: 1px solid rgba(202,222,255,.72); border-radius: 12px; background-color: #c9b095; background-image: linear-gradient(180deg,transparent 58%,rgba(18,27,32,.42) 100%),url("../img/filter-showcase.jpg"); background-position: center; background-size: cover; box-shadow: inset 0 1px rgba(255,255,255,.35); isolation: isolate; }
.filter-scale-swatch::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(135deg,rgba(255,255,255,.14),transparent 42%); }
.filter-scale-swatch i,.filter-scale-swatch b { display: none; }
.filter-scale-swatch > span { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.45); border-radius: 9px; background: rgba(18,27,32,.55); color: #fff; font-size: 11px; font-weight: 800; box-shadow: 0 6px 14px rgba(4,9,20,.2); backdrop-filter: blur(8px); }
.filter-scale-swatch--large { min-height: 230px; }
.filter-scale-swatch--large > span { width: 40px; height: 40px; border-radius: 11px; font-size: 14px; }
.filter-reset-card { display: grid; grid-template-columns: minmax(230px,.65fr) minmax(0,1.35fr); gap: 22px; align-items: center; margin-top: 14px; padding: 18px; }
.filter-reset-card > div:last-child > span,.filter-combined-card > span,.filter-code-card > span { color: var(--qc-blue-strong); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.filter-reset-card h3 { margin: 9px 0; }
.filter-reset-card p { margin: 0; color: #64748b; font-size: 12px; line-height: 1.55; }
.filter-composition { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 12px; align-items: center; padding: 20px; }
.filter-composition > div { min-height: 130px; display: grid; align-content: center; gap: 8px; padding: 15px; border-radius: 10px; background: #f5f9fd; }
.filter-composition span { color: var(--qc-blue-strong); font-size: 10px; font-weight: 800; }
.filter-composition strong { color: #22314d; font-size: 13px; }
.filter-composition code { font-size: 10px; }
.filter-composition > b { color: #9aa9bd; font-size: 20px; }
.filter-composition-result { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(300px,.85fr); gap: 14px; margin-top: 14px; }
.filter-code-card,.filter-combined-card { min-width: 0; padding: 18px; }
.filter-code-card pre { margin: 14px 0; padding: 18px; overflow: auto; border-radius: 12px; background: var(--qc-code); color: #dbeafe; font-size: 12px; line-height: 1.65; }
.filter-code-card p { margin: 0; color: #64748b; font-size: 12px; }
.filter-combined-card { display: grid; gap: 13px; }
.filter-combined-card > code { justify-self: start; font-size: 10px; }
.filter-reference-table { min-width: 820px; }

@media (max-width:1080px) {
  .filter-choice-strip,.filter-scale-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:700px) {
  .filter-choice-strip,.filter-scale-grid,.filter-family-header,.filter-reset-card,.filter-composition,.filter-composition-result { grid-template-columns: 1fr; }
  .filter-composition > b { text-align: center; }
  .doc-filter-stage { min-height: 350px; padding: 18px; }
  .filter-family-header > div:first-child { flex-wrap: wrap; }
}

/* Hatched documentation */
.hatched-feature-icon { font-size: 12px; letter-spacing: -.02em; }
.doc-hatched-preview { min-height: 270px; overflow: hidden; }
.doc-hatched-subject { width: min(100%,430px); min-height: 190px; display: grid; place-items: center; padding: 24px; border: 2px solid rgba(49,39,130,.72); border-radius: 18px; box-shadow: 0 18px 38px rgba(54,43,95,.14); color: #271f68; }
.doc-hatched-subject > span { padding: 9px 13px; border: 1px solid rgba(49,39,130,.28); border-radius: 10px; background: rgba(255,255,255,.82); color: #271f68; font-size: 13px; font-weight: 800; box-shadow: 0 8px 24px rgba(54,43,95,.12); backdrop-filter: blur(5px); }

.hatched-preset-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.hatched-preset-card { min-width: 0; padding: 14px; }
.hatched-preset-card > div:last-child { padding: 14px 2px 4px; }
.hatched-preset-card code { font-size: 11px; }
.hatched-preset-card h3 { margin: 10px 0 6px; color: #13223c; font-size: 15px; }
.hatched-preset-card p { margin: 0; color: var(--qc-text); font-size: 12px; line-height: 1.5; }
.hatched-preset-swatch { min-height: 132px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(49,39,130,.42); border-radius: 10px; background-color: #f5f0ff; color: #271f68; }
.hatched-preset-swatch > span { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(49,39,130,.3); border-radius: 10px; background: rgba(255,255,255,.86); color: #271f68; font-size: 10px; font-weight: 800; box-shadow: 0 8px 20px rgba(54,43,95,.12); backdrop-filter: blur(4px); }
.hatched-reference-groups { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.hatched-reference-groups article { min-height: 170px; display: flex; flex-direction: column; gap: 9px; padding: 18px; }
.hatched-reference-groups span { color: var(--qc-blue-strong); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.hatched-reference-groups h3 { margin: 0; color: #13223c; font-size: 15px; }
.hatched-reference-groups p { margin: 0; color: #64748b; font-size: 11px; line-height: 1.5; }
.hatched-reference-groups code { margin-top: auto; align-self: flex-start; font-size: 10px; }

@media (max-width:1080px) {
  .hatched-preset-grid,.hatched-reference-groups { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:700px) {
  .hatched-preset-grid,.hatched-reference-groups { grid-template-columns: 1fr; }
  .doc-hatched-preview { min-height: 240px; }
  .doc-hatched-subject { min-height: 160px; }
}

/* Overflow documentation */
.doc-overflow-preview { min-height: 390px; align-items: center; padding: 28px; border: 1px solid #bfdbfe; border-radius: 16px; background: rgba(239, 246, 255, .84); }
.doc-overflow-subject { width: min(100%, 430px); height: 190px; border: 2px solid var(--qc-example-color); border-radius: 12px; background: #fff; }
.doc-overflow-content { width: 720px; height: 270px; display: flex; gap: 14px; padding: 14px; background: #f5f0ff; }
.doc-overflow-content > span { flex: 0 0 210px; min-height: 225px; display: grid; place-items: center; border: 1px solid #c4a7ff; border-radius: 9px; background: #fff; color: #271f68; font-size: 12px; font-weight: 700; }
.overflow-axis-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.overflow-axis-card { min-width: 0; padding: 18px; }
.overflow-axis-card header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.overflow-axis-card header code { font-size: 11px; }
.overflow-axis-card header span { color: #64748b; font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.overflow-axis-card h3 { margin: 13px 0 6px; color: #13223c; font-size: 15px; }
.overflow-axis-card p { margin: 0; color: var(--qc-text); font-size: 12px; line-height: 1.5; }
.overflow-axis-stage { height: 155px; display: flex; gap: 10px; margin-top: 14px; padding: 12px; border: 1px dashed #cbd5e1; border-radius: 10px; background: #f8fbff; }
.overflow-axis-stage i { flex: 0 0 120px; min-height: 110px; border: 2px solid var(--qc-example-color); border-radius: 8px; background: #f5f0ff; }
.overflow-axis-stage--y { height: 180px; flex-direction: column; }
.overflow-axis-stage--y i { flex: 0 0 72px; width: 100%; min-height: 72px; }
.overflow-snap-example { padding: 18px; }
.overflow-snap-example > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.overflow-snap-example > div:first-child > span { color: #64748b; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.overflow-snap-example > div:first-child > code { font-size: 11px; }
.overflow-snap-track { display: flex; gap: 14px; padding: 16px; border: 1px dashed #bfd0e4; border-radius: 11px; background: #f8fbff; }
.overflow-snap-track article { flex: 0 0 62%; min-height: 150px; display: grid; place-items: center; border: 2px solid var(--qc-example-color); border-radius: 10px; background: linear-gradient(135deg, #eee7ff, #f8f5ff); color: #271f68; font-size: 20px; font-weight: 800; }
.overflow-snap-example > p { margin: 12px 0 0; color: var(--qc-text); font-size: 12px; }
.overflow-scroll-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.overflow-scroll-grid article { min-height: 155px; display: flex; flex-direction: column; gap: 9px; padding: 16px; }
.overflow-scroll-grid code { align-self: flex-start; font-size: 10px; }
.overflow-scroll-grid strong { color: #13223c; font-size: 14px; }
.overflow-scroll-grid p { margin: 0; color: #64748b; font-size: 12px; line-height: 1.45; }
.overflow-text-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.overflow-text-card { min-width: 0; padding: 18px; }
.overflow-text-card > span { display: block; margin-bottom: 10px; color: #64748b; font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.overflow-text-card > p { width: 100%; min-height: 72px; margin: 0 0 12px; padding: 14px; border: 1px dashed #c4a7ff; border-radius: 9px; background: #f8f5ff; color: #31415d; font-size: 12px; line-height: 1.55; }
.overflow-text-card > p.text-ellipsis, .overflow-text-card > p.text-clip { min-height: auto; }
.overflow-text-card > code { display: block; width: max-content; font-size: 11px; }
.overflow-text-card > small { display: block; margin-top: 8px; color: #64748b; font-size: 11px; line-height: 1.4; }
.overflow-reference-table { min-width: 1040px; }
.overflow-reference-table td { font-size: 11px; line-height: 1.5; }
.docs-shell--overflow #ejes .section-heading h2,
.docs-shell--overflow #desplazamiento .section-heading h2,
.docs-shell--overflow #texto .section-heading h2 { font-size: 28px; }
.docs-shell--overflow #ejes .section-heading > p:last-child,
.docs-shell--overflow #desplazamiento .section-heading > p:last-child,
.docs-shell--overflow #texto .section-heading > p:last-child { font-size: 14px; }

@media (max-width: 1100px) {
  .overflow-axis-grid, .overflow-scroll-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .doc-overflow-preview { min-height: 300px; padding: 18px; }
  .overflow-text-grid { grid-template-columns: 1fr; }
  .overflow-snap-example > div:first-child { align-items: flex-start; flex-direction: column; }
  .overflow-axis-card, .overflow-snap-example, .overflow-scroll-grid article, .overflow-text-card { padding: 14px; }
}

/* Spacing documentation */
.doc-spacing-preview {
  min-height: 390px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  overflow: hidden;
  padding: 32px;
  border: 1px solid #bfdbfe;
  border-radius: 16px;
  background: #f5f0ff;
}
.doc-spacing-subject {
  display: inline-grid;
  place-items: center;
  border: 2px solid var(--qc-example-color);
  border-radius: 10px;
  background: rgba(255, 255, 255, .7);
  color: #271f68;
  font-size: 13px;
  font-weight: 700;
}
.doc-spacing-subject > span {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 82px;
  min-height: 42px;
  place-items: center;
  border-radius: 7px;
  background: #fff;
}
.doc-spacing-subject--p-24 {
  position: relative;
  background:
    linear-gradient(rgba(49, 39, 130, .22), rgba(49, 39, 130, .22)) top / 100% 24px no-repeat,
    linear-gradient(rgba(49, 39, 130, .22), rgba(49, 39, 130, .22)) bottom / 100% 24px no-repeat,
    linear-gradient(rgba(49, 39, 130, .22), rgba(49, 39, 130, .22)) left / 24px 100% no-repeat,
    linear-gradient(rgba(49, 39, 130, .22), rgba(49, 39, 130, .22)) right / 24px 100% no-repeat,
    rgba(255, 255, 255, .72);
}
.doc-spacing-subject--p-24::before,
.doc-spacing-subject--p-24::after {
  content: "24px";
  position: absolute;
  left: 50%;
  color: #6d28d9;
  font-family: monospace;
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
  transform: translateX(-50%);
}
.doc-spacing-subject--p-24::before { top: 8px; }
.doc-spacing-subject--p-24::after { bottom: 8px; }
.doc-spacing-subject--px-32 {
  position: relative;
  background: linear-gradient(90deg, rgba(49, 39, 130, .22) 0 32px, rgba(255, 255, 255, .72) 32px calc(100% - 32px), rgba(49, 39, 130, .22) calc(100% - 32px));
}
.doc-spacing-subject--px-32::before,
.doc-spacing-subject--px-32::after {
  content: "32px";
  position: absolute;
  top: 8px;
  width: 32px;
  color: #6d28d9;
  font-family: monospace;
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}
.doc-spacing-subject--px-32::before { left: 0; }
.doc-spacing-subject--px-32::after { right: 0; }
.doc-spacing-subject--m-24 {
  position: relative;
  box-shadow: none;
}
.doc-spacing-subject--m-24::before {
  content: "";
  position: absolute;
  inset: -24px;
  background:
    linear-gradient(rgba(49, 39, 130, .22), rgba(49, 39, 130, .22)) top / 100% 24px no-repeat,
    linear-gradient(rgba(49, 39, 130, .22), rgba(49, 39, 130, .22)) bottom / 100% 24px no-repeat,
    linear-gradient(rgba(49, 39, 130, .22), rgba(49, 39, 130, .22)) left / 24px 100% no-repeat,
    linear-gradient(rgba(49, 39, 130, .22), rgba(49, 39, 130, .22)) right / 24px 100% no-repeat;
  border-radius: 0;
  pointer-events: none;
}
.doc-spacing-subject--m-24 > span::before,
.doc-spacing-subject--m-24 > span::after {
  content: "24px";
  position: absolute;
  left: 50%;
  z-index: 2;
  color: #6d28d9;
  font-family: monospace;
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
  transform: translateX(-50%);
}
.doc-spacing-subject--m-24 > span::before { top: -19px; }
.doc-spacing-subject--m-24 > span::after { bottom: -19px; }
.doc-spacing-subject--mt-32 {
  position: relative;
}
.doc-spacing-subject--mt-32::before {
  content: "32px";
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: 32px;
  display: grid;
  place-items: center;
  background: rgba(49, 39, 130, .22);
  color: #6d28d9;
  font-family: monospace;
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
}
.spacing-family-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.spacing-family-card { display: flex; min-height: 320px; flex-direction: column; gap: 12px; padding: 20px; }
.spacing-family-card header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.spacing-family-card header code { font-size: 13px; }
.spacing-family-card header span { color: #64748b; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.spacing-family-card h3 { margin: 0; font-size: 16px; line-height: 1.3; }
.spacing-family-card p { margin: 0; color: var(--qc-text); font-size: 13px; line-height: 1.5; }
.spacing-family-card small { margin-top: auto; color: #64748b; font-size: 11px; }
.spacing-context-demo { min-height: 150px; display: grid; place-items: center; overflow: hidden; border: 1px dashed #cbd5e1; border-radius: 12px; background: #f8fbff; }
.spacing-context-demo i { display: grid; place-items: center; border: 2px solid var(--qc-example-color); border-radius: 9px; color: #271f68; font-size: 11px; font-style: normal; }
.spacing-context-demo i b { display: grid; min-width: 78px; min-height: 44px; place-items: center; border-radius: 6px; background: #fff; }
.spacing-context-demo--margin i { padding: 28px; border: 0; background: #eee7ff; }
.spacing-context-demo--margin i b { border: 2px solid var(--qc-example-color); }
.spacing-context-demo--padding i { padding: 28px; background: #eee7ff; }
.spacing-direction-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.spacing-direction-grid article { display: flex; min-height: 145px; flex-direction: column; gap: 10px; padding: 16px; }
.spacing-direction-grid code { align-self: flex-start; font-size: 11px; }
.spacing-direction-grid strong { color: #13223c; font-size: 14px; }
.spacing-direction-grid span { color: #64748b; font-size: 12px; line-height: 1.45; }
.spacing-option-tabs { margin-bottom: 14px; }
.spacing-option-panel { animation: qc-panel-in .18s ease; }
.spacing-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 12px; padding: 16px 18px; border: 1px solid #cfe1f5; border-radius: 12px; background: #f7fbff; }
.spacing-panel-heading strong, .spacing-panel-heading span { display: block; }
.spacing-panel-heading strong { color: #13223c; font-size: 14px; }
.spacing-panel-heading span { margin-top: 4px; color: var(--qc-text); font-size: 12px; }
.spacing-panel-heading > code { flex: 0 0 auto; font-size: 11px; }
.spacing-scale-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.spacing-scale-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; min-width: 0; padding: 14px; }
.spacing-scale-card > code { font-size: 13px; }
.spacing-scale-card > small { color: #64748b; font-size: 11px; }
.spacing-scale-stage { grid-column: 1 / -1; height: 250px; display: flex; align-items: flex-start; justify-content: flex-start; overflow: hidden; border: 1px dashed #cbd5e1; border-radius: 9px; background: #f8fbff; }
.spacing-scale-stage i { display: inline-grid; min-width: 72px; min-height: 44px; place-items: center; border: 2px solid var(--qc-example-color); border-radius: 7px; color: #271f68; font-size: 10px; font-style: normal; }
.spacing-scale-stage--margin { background: #eee7ff; }
.spacing-scale-stage--margin i { background: #fff; }
.spacing-scale-stage--padding { padding: 8px; }
.spacing-scale-stage--padding i { background: #eee7ff; }
.spacing-scale-stage--padding i b { display: grid; min-width: 58px; min-height: 34px; place-items: center; border-radius: 5px; background: #fff; font-weight: 700; }
.spacing-breakpoint-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.spacing-breakpoint-card { display: grid; gap: 5px; min-height: 108px; padding: 16px; }
.spacing-breakpoint-card > code { width: max-content; font-size: 17px; line-height: 1.2; }
.spacing-breakpoint-card > span { color: #0f172a; font-size: 12px; font-weight: 700; }
.spacing-breakpoint-card > small { color: #64748b; font-size: 11px; }
.spacing-responsive-code { margin-top: 16px; padding: 18px; }
.spacing-responsive-code > span { color: #64748b; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.spacing-responsive-code pre { margin: 14px 0; padding: 18px; overflow: auto; border-radius: 14px; background: #070b20; color: #dbeafe; font-size: 12px; line-height: 1.6; }
.spacing-responsive-code p { margin-bottom: 0; color: #64748b; font-size: 13px; }
.docs-shell--spacing #familias .section-heading h2,
.docs-shell--spacing #escala .section-heading h2,
.docs-shell--spacing #responsive .section-heading h2 { font-size: 28px; }
.docs-shell--spacing #familias .section-heading > p:last-child,
.docs-shell--spacing #escala .section-heading > p:last-child,
.docs-shell--spacing #responsive .section-heading > p:last-child { font-size: 14px; }

@media (max-width: 1100px) {
  .spacing-direction-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spacing-scale-grid, .spacing-breakpoint-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .doc-spacing-preview { min-height: 300px; padding: 18px; }
  .spacing-family-grid, .spacing-direction-grid, .spacing-scale-grid, .spacing-breakpoint-grid { grid-template-columns: 1fr; }
  .spacing-panel-heading { align-items: flex-start; flex-direction: column; padding: 14px; }
  .spacing-family-card, .spacing-scale-card, .spacing-breakpoint-card, .spacing-responsive-code { padding: 14px; }
}

/* Sizes documentation */
.doc-size-preview {
  min-height: 390px;
  align-items: center;
  padding: 32px;
  border: 1px solid #bfdbfe;
  border-radius: 16px;
  background: rgba(239, 246, 255, .84);
}
.doc-size-subject {
  display: grid;
  min-width: 90px;
  min-height: 112px;
  place-items: center;
  border: 2px solid var(--qc-example-color);
  border-radius: 12px;
  background: #f5f0ff;
  color: #271f68;
  font-size: 13px;
  font-weight: 700;
  transition: width .2s ease;
}

.size-percentage-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.size-option-tabs { margin-bottom: 14px; }
.size-option-panel { animation: qc-panel-in .18s ease; }
.size-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
  padding: 16px 18px;
  border: 1px solid #cfe1f5;
  border-radius: 12px;
  background: #f7fbff;
}
.size-panel-heading > div { display: grid; gap: 3px; }
.size-panel-heading strong { font-size: 14px; }
.size-panel-heading span { color: var(--qc-text); font-size: 12px; }
.size-panel-heading > code { flex: 0 0 auto; font-size: 11px; }
@keyframes qc-panel-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.size-percentage-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px 14px;
  padding: 16px;
}
.size-percentage-card > code { font-size: 12px; }
.size-percentage-card > small { color: #64748b; font-size: 11px; }
.size-percentage-track { grid-column: 1 / -1; height: 34px; overflow: hidden; border-radius: 8px; background: #eef3f9; }
.size-percentage-track span { display: block; height: 100%; border: 2px solid var(--qc-example-color); border-radius: 8px; background: linear-gradient(90deg, #ede9fe, #f5f0ff); }

.size-height-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.size-height-card { display: grid; grid-template-columns: 1fr auto; gap: 9px; padding: 14px; }
.size-height-card > code { font-size: 11px; }
.size-height-card > small { color: #64748b; font-size: 10px; }
.size-height-track { grid-column: 1 / -1; height: 150px; display: flex; align-items: flex-end; overflow: hidden; border-radius: 8px; background: #eef3f9; }
.size-height-track span { display: block; width: 100%; border: 2px solid var(--qc-example-color); border-radius: 8px; background: linear-gradient(0deg, #ede9fe, #f5f0ff); }

.size-fraction-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.size-fraction-card { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 16px; }
.size-fraction-card > .size-percentage-track { grid-column: 1 / -1; }
.size-fraction-card > div:not(.size-percentage-track) { display: flex; flex-wrap: wrap; gap: 6px; }
.size-fraction-card > div code { font-size: 11px; }
.size-fraction-card > small { color: #64748b; font-size: 11px; }

.size-intrinsic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.size-intrinsic-card { min-width: 0; padding: 16px; }
.size-intrinsic-card code { font-size: 11px; }
.size-intrinsic-card p { margin: 9px 0 0; color: var(--qc-text); font-size: 11px; }
.size-intrinsic-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.size-intrinsic-pair > div { min-width: 0; }
.size-intrinsic-pair > div > span { display: block; margin-bottom: 6px; color: #64748b; font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.size-intrinsic-pair code { display: block; width: max-content; margin-top: 7px; }
.size-intrinsic-pair small { display: block; margin-top: 6px; color: #64748b; font-size: 9px; line-height: 1.35; }
.size-intrinsic-stage { display: flex; height: 100px; align-items: center; overflow: hidden; padding: 12px; border: 1px dashed #cbd5e1; border-radius: 9px; background: #f8fbff; }
.size-intrinsic-stage i { display: inline-grid; min-width: 72px; height: 58px; place-items: center; border: 2px solid var(--qc-example-color); border-radius: 8px; background: #f5f0ff; color: #271f68; font-size: 10px; font-style: normal; }
.size-intrinsic-stage--height { height: 150px; align-items: flex-start; }
.size-intrinsic-stage--height i { width: 100%; min-height: 42px; }
.size-intrinsic-card--screen { grid-column: 1 / -1; }
.size-intrinsic-card--screen .size-intrinsic-stage { position: relative; }
.size-intrinsic-card--screen .size-intrinsic-stage::after { position: absolute; right: 8px; bottom: 7px; padding: 3px 6px; border-radius: 5px; background: #fff; color: #64748b; content: "recorte de una medida ligada al viewport"; font-size: 8px; font-weight: 700; }

.size-viewport-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.size-viewport-card { min-width: 0; padding: 16px; }
.size-viewport-card > code { font-size: 11px; }
.size-viewport-card p { margin: 8px 0 0; color: var(--qc-text); font-size: 11px; }
.size-viewport-stage { height: 108px; display: flex; align-items: center; overflow: hidden; margin-bottom: 11px; padding: 12px; border: 1px dashed #cbd5e1; border-radius: 9px; background: #f8fbff; }
.size-viewport-stage span { display: grid; min-width: 70px; height: 60px; place-items: center; border: 2px solid var(--qc-example-color); border-radius: 8px; background: #f5f0ff; color: #271f68; font-size: 10px; }
.size-viewport-stage--height { height: min(calc(34vh + 24px), 430px); min-height: 280px; align-items: flex-start; }
.size-viewport-stage--height span { width: 100%; min-height: 56px; height: auto; }

.size-limit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.size-limit-card { min-width: 0; padding: 16px; }
.size-limit-card > span { display: block; margin-bottom: 8px; color: #64748b; font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.size-limit-card > code { display: block; width: max-content; margin-top: 10px; font-size: 11px; }
.size-limit-card p { margin: 8px 0 0; color: var(--qc-text); font-size: 11px; line-height: 1.45; }
.size-limit-stage { display: flex; height: 110px; align-items: center; overflow: hidden; padding: 12px; border: 1px dashed #cbd5e1; border-radius: 9px; background: #f8fbff; }
.size-limit-stage i { display: grid; height: 58px; place-items: center; border: 2px solid var(--qc-example-color); border-radius: 8px; background: #f5f0ff; color: #271f68; font-size: 10px; font-style: normal; white-space: nowrap; }
.size-limit-stage--height { height: 190px; align-items: flex-start; }
.size-limit-stage--height i { width: 100%; }

.size-breakpoint-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.size-breakpoint-card { display: grid; gap: 5px; min-height: 108px; padding: 16px; }
.size-breakpoint-card > code { width: max-content; font-size: 17px; line-height: 1.2; }
.size-breakpoint-card > span { color: #0f172a; font-size: 12px; font-weight: 700; }
.size-breakpoint-card > small { color: #64748b; font-size: 11px; }
.size-responsive-code { margin-top: 16px; padding: 18px; }
.size-responsive-code > span { color: #64748b; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.size-responsive-code pre { margin: 14px 0; padding: 18px; overflow: auto; border-radius: 14px; background: #070b20; color: #dbeafe; font-size: 12px; line-height: 1.6; }
.size-responsive-code p { margin-bottom: 0; color: #64748b; font-size: 13px; }

.docs-shell--sizes #familias .section-heading h2,
.docs-shell--sizes #responsive .section-heading h2 { font-size: 28px; }
.docs-shell--sizes #familias .section-heading > p:last-child,
.docs-shell--sizes #responsive .section-heading > p:last-child { font-size: 14px; }

@media (max-width: 1100px) {
  .size-height-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .size-breakpoint-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .doc-size-preview { min-height: 300px; padding: 18px; }
  .doc-size-subject { min-height: 84px; }
  .size-panel-heading { align-items: flex-start; flex-direction: column; padding: 14px; }
  .size-percentage-grid, .size-height-grid, .size-fraction-grid, .size-intrinsic-grid, .size-viewport-grid, .size-limit-grid, .size-breakpoint-grid { grid-template-columns: 1fr; }
  .size-intrinsic-pair { grid-template-columns: 1fr; }
  .size-percentage-card, .size-limit-card, .size-breakpoint-card, .size-responsive-code { padding: 14px; }
}
.border-radius-card > code { align-self: end; }
.border-radius-card > small { align-self: start; }
.radius-applied-example { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.radius-applied-example > article { min-width: 0; padding: 18px; }
.radius-applied-example > article > span { display: block; margin-bottom: 12px; color: #71809a; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.radius-example-code pre { margin: 0; padding: 16px; overflow: auto; border-radius: 10px; background: #0b1023; color: #dbe7ff; font-size: 11px; line-height: 1.65; }
.radius-example-code p { margin: 14px 0 0; color: #60708a; font-size: 11px; line-height: 1.5; }
.radius-result-stage { min-height: 210px; display: flex; align-items: center; justify-content: center; padding: 24px; border: 1px solid #dbe5f1; border-radius: 12px; background-color: #f8fbff; background-image: linear-gradient(#eaf1f9 1px, transparent 1px), linear-gradient(90deg, #eaf1f9 1px, transparent 1px); background-size: 24px 24px; color: #263d62; font-size: 12px; font-weight: 700; }
.radius-result-stage--circle .radius-circle-result { inline-size: 128px; background: linear-gradient(135deg, #eee7ff, #f8f5ff); }
.radius-result-stage--selective { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.radius-result-stage--selective > div { background: #fff; text-align: center; }
.border-color-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.border-color-methods article { min-width: 0; padding: 18px; }
.border-color-methods header { display: flex; gap: 10px; align-items: center; }
.border-color-methods header > span { padding: 4px 7px; border-radius: 99px; background: #eaf5ff; color: #1768d5; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.border-color-methods header > strong { color: #17335f; font-size: 14px; }
.border-color-methods pre { margin: 0; padding: 14px; overflow: auto; border-radius: 9px; background: #0b1023; color: #dbe7ff; font-size: 11px; line-height: 1.6; }
.border-color-methods p { min-height: 34px; margin: 12px 0; color: #52647f; font-size: 11px; line-height: 1.45; }
.border-color-methods small { display: block; margin-top: 10px; color: #71809a; font-size: 10px; line-height: 1.4; }
.border-color-result { margin-top: 12px; padding: 12px; border: 1px solid #dbe5f1; border-radius: 8px; background: #f8fbff; }
.border-color-result > span { display: block; padding: 10px 8px 2px; color: #263d62; font-size: 11px; font-weight: 700; }
.border-color-group-title { margin: 24px 0 10px; color: #17335f; font-size: 13px; }
.border-color-swatch-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.border-color-swatch { min-height: 82px; display: flex; flex-direction: column; justify-content: space-between; padding: 13px; border-radius: 10px; background: #f8fbff; }
.border-color-swatch > span { color: #33435d; font-size: 11px; font-weight: 700; }
.border-color-swatch > code { align-self: flex-start; padding: 3px 6px; border-radius: 5px; background: rgba(234,241,249,.9); color: #405271; font-size: 9px; }
.border-color-swatch--dark { background: #18233a; }
.border-color-swatch--dark > span { color: #fff; }
.border-color-swatch--dark > code { background: rgba(255,255,255,.12); color: #eaf2ff; }
.border-color-swatch--current { color: #1768d5; }
.border-color-swatch--transparent { background-color: #fff; background-image: linear-gradient(45deg, #edf1f6 25%, transparent 25%), linear-gradient(-45deg, #edf1f6 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #edf1f6 75%), linear-gradient(-45deg, transparent 75%, #edf1f6 75%); background-position: 0 0, 0 6px, 6px -6px, -6px 0; background-size: 12px 12px; box-shadow: inset 0 0 0 1px #d6e2f1; }

@media (max-width: 900px) {
  .border-width-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .border-radius-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .border-style-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .border-color-swatch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .radius-result-stage--selective { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .border-width-grid, .border-style-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .border-radius-grid { grid-template-columns: 1fr; }
  .border-color-methods, .border-color-swatch-grid, .radius-applied-example { grid-template-columns: 1fr; }
  .preview-container.doc-border-preview > .doc-border-subject { padding: 24px; }
}
.ratio-doc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.ratio-doc-card { padding: 14px; }
.ratio-doc-card .ratio { display: grid; place-items: center; max-height: 210px; margin-bottom: 12px; overflow: hidden; border-radius: 9px; background: linear-gradient(135deg, #dff1ff, #ede9fe); color: #31577f; }
.ratio-doc-card .ratio span { font-size: 18px; font-weight: 700; }
.ratio-doc-card code { padding: 3px 7px; border-radius: 5px; background: #eef3f9; color: #245488; font-size: 11px; }
.ratio-doc-card p { margin: 8px 0 0; color: var(--qc-text); font-size: 12px; }
.type-scale-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.type-scale-card { min-height: 170px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; overflow: hidden; border: 1px solid var(--qc-border); border-radius: 12px; background: #fff; }
.type-scale-card span { color: #13223c; }
.type-scale-card code { padding: 3px 7px; border-radius: 6px; background: #eef3f9; color: #52647f; font-size: 11px; }
.doc-preview-parent { width: 100%; min-height: 142px; }
.doc-preview-parent .preview-container { min-height: 142px; }
.doc-preview-parent.doc-preview-rows { grid-template-columns: minmax(0, 1fr) minmax(120px, .45fr); grid-auto-rows: 48px; gap: 6px; min-height: 210px; align-content: start; }
.doc-preview-parent.doc-preview-rows .preview-container { grid-column: 1; min-height: 0; height: auto; padding: 14px; }
.doc-preview-parent.doc-preview-rows::after { content: "Filas del grid"; grid-column: 2; grid-row: 1 / span 4; display: grid; place-items: center; border: 1px dashed #b9cae0; border-radius: 10px; color: #7c8da6; background: rgba(255,255,255,.7); font-size: 11px; text-transform: uppercase; }
.example-note { margin: 10px 0 0; padding: 10px 13px; border-radius: 8px; background: #f5f8fc; color: #5e6d83; font-size: 12px; }

/* Z-index */
.doc-z-preview { min-height: 250px; }
.doc-z-scene { position: relative; isolation: isolate; width: min(100%, 420px); height: 190px; }
.doc-z-reference, .doc-z-subject { position: absolute !important; width: 190px; min-height: 105px; display: grid; place-items: center; padding: 18px; border: 2px solid; border-radius: 14px; font-size: 12px; font-weight: 700; text-align: center; }
.doc-z-reference { top: 55px; left: calc(50% - 45px); border-color: #009ee2; background: rgba(219, 234, 254, .96); color: #174f91; }
.doc-z-subject { top: 20px; left: calc(50% - 150px); border-color: var(--qc-example-color); background: rgba(245, 240, 255, .96); color: #312782; }
.doc-z-reference code, .doc-z-subject code { display: block; margin-top: 4px; font-size: 10px; }
.z-index-scale-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.z-index-scale-card { min-width: 0; padding: 14px; }
.z-index-scale-stage { position: relative; isolation: isolate; height: 105px; margin-bottom: 11px; border: 1px dashed #cbd8e8; border-radius: 10px; background: #f8fbff; }
.z-index-scale-stage i, .z-index-scale-stage b { position: absolute !important; width: 74px; height: 58px; display: grid; place-items: center; border: 2px solid; border-radius: 9px; font-size: 11px; font-style: normal; }
.z-index-scale-stage i { top: 28px; left: calc(50% - 10px); border-color: #009ee2; background: #dbeafe; color: #174f91; }
.z-index-scale-stage b { top: 13px; left: calc(50% - 64px); border-color: var(--qc-example-color); background: #f5f0ff; color: #312782; }
.z-index-scale-stage--auto i { z-index: auto; }
.z-index-scale-stage--auto b { z-index: auto; }
.z-index-scale-card > div:last-child { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.z-index-scale-card code { font-size: 11px; }
.z-index-scale-card small { color: #71809a; font-size: 10px; }
.z-context-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.z-context-grid article { min-height: 175px; padding: 18px; }
.z-context-grid article > span { color: var(--qc-blue-strong); font-size: 10px; font-weight: 800; }
.z-context-grid article > code { display: block; width: max-content; margin: 9px 0 12px; }
.z-context-grid h3 { margin: 0 0 6px; font-size: 14px; }
.z-context-grid p { margin: 0; color: var(--qc-text); font-size: 12px; }
.z-context-code { margin-top: 14px; padding: 18px; }
.z-context-code > span { color: #64748b; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.z-context-code pre { margin: 14px 0; padding: 18px; overflow: auto; border-radius: 12px; background: var(--qc-code); color: #dbeafe; font-size: 12px; line-height: 1.65; }
.z-context-code p { margin: 0; color: var(--qc-text); font-size: 12px; }

@media (max-width: 1000px) {
  .z-index-scale-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .z-index-scale-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .z-context-grid { grid-template-columns: 1fr; }
  .doc-z-reference, .doc-z-subject { width: 160px; }
  .doc-z-reference { left: calc(50% - 20px); }
  .doc-z-subject { left: calc(50% - 130px); }
}

/* Position */
.doc-position-preview { min-height: 250px; }
.doc-position-canvas, .doc-position-viewport { position: relative; width: min(100%, 440px); height: 190px; overflow: hidden; border: 1px dashed #b8cbe0; border-radius: 12px; background: #f8fbff; }
.doc-position-canvas > span, .doc-position-viewport > span { position: absolute; left: 14px; bottom: 10px; color: #8190a5; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.doc-position-float { min-width: 128px; display: grid; place-items: center; padding: 18px; border: 2px solid var(--qc-example-color); border-radius: 10px; background: #f5f0ff; color: #312782; font-size: 12px; font-weight: 700; }
.doc-position-viewport { transform: translateZ(0); }
.doc-position-bar { min-height: 48px; display: grid; place-items: center; background: linear-gradient(135deg, #009ee2, #23c8fa); color: #fff; font-size: 12px; font-weight: 700; }
.doc-position-action { margin: 14px; padding: 11px 16px; border: 0; border-radius: 99px; background: var(--qc-example-color); color: #fff; cursor: default; font-size: 11px; font-weight: 700; }
.doc-position-scroll { width: min(100%, 440px); height: 190px; border: 1px dashed #b8cbe0; border-radius: 12px; background: #f8fbff; }
.doc-position-scroll header { padding: 12px 14px; background: #dbeafe; color: #174f91; font-size: 12px; font-weight: 700; }
.doc-position-scroll p { min-height: 54px; margin: 0; padding: 16px 14px; border-bottom: 1px solid #e2e8f0; color: #60708a; font-size: 11px; }
.position-mode-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.position-mode-card { min-height: 178px; display: flex; flex-direction: column; padding: 18px; }
.position-mode-card > code { align-self: flex-start; font-size: 10px; }
.position-mode-card > strong { margin-top: auto; color: #13223c; font-size: 16px; }
.position-mode-card p { margin: 7px 0 0; color: var(--qc-text); font-size: 11px; line-height: 1.45; }
.position-family-title { margin: 22px 0 10px; color: #17335f; font-size: 14px; }
.position-preset-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.position-preset-grid--sticky { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.position-preset-grid article { min-width: 0; padding: 14px; }
.position-preset-grid article > code { display: block; width: max-content; margin: 11px 0 6px; font-size: 10px; }
.position-preset-grid article > span { color: var(--qc-text); font-size: 11px; }
.position-preset-map { position: relative; height: 100px; overflow: hidden; border: 1px dashed #c2d2e4; border-radius: 9px; background: #f8fbff; }
.position-preset-map i { position: absolute; display: block; border: 2px solid var(--qc-example-color); background: #f5f0ff; }
.position-preset-map .is-top { top: 9px; right: 9px; left: 9px; height: 20px; border-radius: 5px; }
.position-preset-map .is-bottom { right: 9px; bottom: 9px; left: 9px; height: 20px; border-radius: 5px; }
.position-preset-map .is-lt, .position-preset-map .is-rt, .position-preset-map .is-lb, .position-preset-map .is-rb { width: 35px; height: 30px; border-radius: 7px; }
.position-preset-map .is-lt { top: 9px; left: 9px; }
.position-preset-map .is-rt { top: 9px; right: 9px; }
.position-preset-map .is-lb { bottom: 9px; left: 9px; }
.position-preset-map .is-rb { right: 9px; bottom: 9px; }
.position-preset-map .is-left { top: 9px; bottom: 9px; left: 9px; width: 20px; border-radius: 5px; }
.position-preset-map .is-right { top: 9px; right: 9px; bottom: 9px; width: 20px; border-radius: 5px; }
.position-breakpoint-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.position-breakpoint-card { min-height: 105px; display: grid; gap: 5px; padding: 16px; }
.position-breakpoint-card > code { width: max-content; font-size: 17px; line-height: 1.2; }
.position-breakpoint-card > span { color: #0f172a; font-size: 12px; font-weight: 700; }
.position-breakpoint-card > small { color: #64748b; font-size: 10px; }
.position-responsive-code { margin-top: 14px; padding: 18px; }
.position-responsive-code > span { color: #64748b; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.position-responsive-code pre { margin: 14px 0; padding: 18px; overflow: auto; border-radius: 12px; background: var(--qc-code); color: #dbeafe; font-size: 12px; line-height: 1.65; }
.position-responsive-code p { margin: 0; color: var(--qc-text); font-size: 12px; }

@media (max-width: 1100px) {
  .position-mode-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .position-preset-grid--sticky, .position-breakpoint-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .position-mode-grid, .position-preset-grid, .position-preset-grid--sticky, .position-breakpoint-grid { grid-template-columns: 1fr; }
}

/* Reverse */
.doc-reverse-preview { min-height: 310px; display: grid; place-items: center; padding: 28px; }
.doc-reverse-track { width: min(100%, 430px); gap: 14px; align-items: center; justify-content: center; }
.doc-reverse-track--column { min-height: 235px; }
.doc-reverse-track > span { min-width: 70px; min-height: 70px; display: grid; place-items: center; border: 2px solid #312782; border-radius: 12px; background: linear-gradient(135deg, #ede9fe, #f8f5ff); color: #312782; font-size: 16px; font-weight: 800; }
.reverse-family-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.reverse-family-card { min-height: 245px; display: flex; flex-direction: column; align-items: flex-start; padding: 22px; }
.reverse-family-card > code { margin: 18px 0 10px; font-size: 16px; }
.reverse-family-card h3 { margin: 0 0 8px; font-size: 16px; }
.reverse-family-card p { margin: 0; color: var(--qc-text); font-size: 12px; line-height: 1.6; }
.reverse-family-card small { margin-top: auto; padding-top: 18px; color: #64748b; font-size: 11px; }
.reverse-family-badge { padding: 5px 8px; border-radius: 6px; background: #eef7ff; color: var(--qc-blue-strong); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.reverse-syntax-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.reverse-syntax-key { margin: 0 0 14px; }
.reverse-syntax-grid article { min-height: 160px; display: grid; align-content: start; gap: 12px; padding: 18px; }
.reverse-syntax-grid strong { color: #0f172a; font-size: 13px; }
.reverse-syntax-grid p { margin: 0; color: var(--qc-text); font-size: 12px; }
.reverse-order-specials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.reverse-order-specials article { min-height: 150px; display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 20px; }
.reverse-order-specials strong { color: #312782; font-family: monospace; font-size: 18px; }
.reverse-order-specials p { grid-column: 1 / -1; margin: 0; color: var(--qc-text); font-size: 12px; }
.reverse-order-scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.reverse-order-scale article { min-height: 92px; display: grid; align-content: center; gap: 9px; padding: 14px; }
.reverse-order-scale span { color: #64748b; font-family: monospace; font-size: 11px; }
.reverse-responsive-patterns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.reverse-responsive-patterns article { padding: 17px; }
.reverse-responsive-patterns p { margin: 10px 0 0; color: var(--qc-text); font-size: 12px; }

@media (max-width: 1100px) {
  .reverse-family-grid, .reverse-syntax-grid, .reverse-responsive-patterns { grid-template-columns: 1fr; }
  .reverse-order-scale { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .reverse-order-specials, .reverse-order-scale { grid-template-columns: 1fr; }
  .doc-reverse-track { width: 100%; }
}

/* Opacity */
.doc-opacity-preview { min-height: 310px; display: grid; place-items: center; padding: 28px; }
.doc-opacity-sample { width: min(100%, 390px); min-height: 180px; display: grid; place-content: center; gap: 8px; padding: 28px; border: 3px solid #312782; border-radius: 16px; background: linear-gradient(135deg, #ddd6fe, #f5f3ff); color: #271f68; text-align: center; }
.doc-opacity-sample strong { font-size: 18px; }
.doc-opacity-sample span { font-size: 12px; }
.doc-opacity-sample--split { grid-template-columns: 110px minmax(0, 1fr); place-content: center; align-items: center; gap: 20px; text-align: left; }
.doc-opacity-surface { width: 110px; height: 110px; display: grid; place-items: center; border: 2px solid #312782; border-radius: 14px; background: #3c2f9d; color: #fff; font-size: 11px; font-weight: 800; }
.doc-opacity-copy { display: grid; gap: 6px; }
.doc-opacity-copy span { color: #5f6f88; }

/* Shadow */
.doc-shadow-preview { min-height: 250px; display: grid; place-items: center; padding: 42px; }
.doc-shadow-preview--box > article { width: min(100%, 280px); padding: 30px; border: 2px solid var(--qc-example-color); border-radius: 14px; background: #f5f0ff; color: #271f68; font-weight: 700; text-align: center; }
.doc-shadow-preview--image > img { width: min(100%, 230px); height: auto; }
.doc-shadow-preview--text > h3 { margin: 0; color: #271f68; font-size: clamp(27px, 4vw, 44px); }
.shadow-family-title { margin: 28px 0 12px; color: #18243d; font-size: 15px; }
.shadow-scale-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.shadow-scale-card { display: grid; gap: 8px; min-width: 0; padding: 14px; }
.shadow-scale-card > code { font-size: 10px; }
.shadow-scale-card > small { color: #6b7a91; font-size: 10px; }
.shadow-scale-stage { min-height: 112px; display: grid; place-items: center; border-radius: 10px; background: #f8fbff; }
.shadow-scale-stage > span { width: 58px; height: 58px; border: 2px solid var(--qc-example-color); border-radius: 10px; background: #f5f0ff; }
.shadow-scale-stage--image > img { width: 82px; height: auto; }
.shadow-scale-stage--text > strong { color: #271f68; font-size: 28px; }
.shadow-scale-stage.is-dark { background: #17223b; }
.shadow-scale-stage.is-dark > strong { color: #eef5ff; }
.shadow-special-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.shadow-special-card { padding: 16px; }
.shadow-special-card > code { font-size: 11px; }
.shadow-special-card > h3 { margin: 12px 0 5px; font-size: 15px; }
.shadow-special-card > p { margin: 0; color: #617089; font-size: 12px; }
.shadow-special-stage { min-height: 150px; display: grid; place-items: center; margin-bottom: 14px; overflow: hidden; border-radius: 10px; background: #f8fbff; }
.shadow-special-stage > img { width: 145px; height: auto; }
.shadow-special-stage > strong { color: #fff; font-size: 24px; }
.shadow-special-stage.is-dark { background: #17223b; }
.shadow-special-stage.is-dark > strong { color: #1a243a; }
.shadow-responsive-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.shadow-responsive-grid > article { display: grid; gap: 7px; padding: 14px; }
.shadow-responsive-grid strong { color: #18243d; font-family: monospace; font-size: 20px; }
.shadow-responsive-grid span, .shadow-responsive-grid code { color: #62728a; font-size: 10px; }
.shadow-color-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.shadow-color-card { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 16px; align-items: center; padding: 18px; }
.shadow-color-card h3 { margin: 8px 0 4px; font-size: 15px; }
.shadow-color-card p { margin: 0; color: #617089; font-size: 12px; }
.shadow-color-card code { font-size: 10px; }
.shadow-color-swatch { width: 74px; height: 74px; display: block; border: 1px solid #d9e2ec; border-radius: 12px; }
.shadow-color-swatch.is-black { background: #000; }
.shadow-color-swatch.is-gray-medium { background: #1f2937; }
.shadow-color-swatch.is-gray-dark { background: #111827; }
.shadow-color-swatch.is-gray-light { background: #9ca3af; }
.opacity-scale-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.opacity-scale-card { min-height: 145px; padding: 14px; }
.opacity-scale-stage { height: 80px; display: grid; place-items: center; margin-bottom: 11px; border-radius: 10px; background: #eef3f9; }
.opacity-scale-stage span { width: 74%; height: 46px; display: block; border: 2px solid #312782; border-radius: 10px; background: #3c2f9d; }
.opacity-scale-card > div:last-child { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.opacity-scale-card small { color: #64748b; font-size: 10px; }
.opacity-family-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.opacity-family-card { min-height: 245px; display: flex; flex-direction: column; align-items: flex-start; padding: 22px; }
.opacity-family-card > span { padding: 5px 8px; border-radius: 6px; background: #eef7ff; color: var(--qc-blue-strong); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.opacity-family-card > code { margin: 18px 0 10px; font-size: 16px; }
.opacity-family-card h3 { margin: 0 0 8px; font-size: 16px; }
.opacity-family-card p { margin: 0; color: var(--qc-text); font-size: 12px; line-height: 1.6; }
.opacity-family-card small { margin-top: auto; padding-top: 18px; color: #64748b; font-size: 11px; }
.opacity-behavior-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.opacity-behavior-grid article { min-height: 205px; padding: 20px; }
.opacity-behavior-icon { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 12px; background: #f1edff; color: #6d28d9; font-size: 18px; font-weight: 800; }
.opacity-behavior-grid h3 { margin: 0 0 8px; font-size: 14px; }
.opacity-behavior-grid p { margin: 0; color: var(--qc-text); font-size: 12px; line-height: 1.6; }

@media (max-width: 1100px) {
  .shadow-scale-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shadow-responsive-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .opacity-scale-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .opacity-family-grid { grid-template-columns: 1fr; }
  .opacity-behavior-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .shadow-scale-grid, .shadow-special-grid, .shadow-responsive-grid, .shadow-color-grid { grid-template-columns: 1fr; }
  .doc-shadow-preview { min-height: 210px; padding: 28px; }
  .opacity-scale-grid, .opacity-behavior-grid { grid-template-columns: 1fr; }
  .doc-opacity-sample--split { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}

/* Visibility */
.doc-visibility-preview { min-height: 280px; display: grid; place-items: center; align-self: stretch; padding: 32px; }
.visibility-layout { width: auto; max-width: 100%; display: grid; grid-template-columns: repeat(3, 88px); justify-content: center; gap: 24px; padding: 28px; border: 1px dashed #b7c8dc; border-radius: 14px; background: #f7faff; }
.preview-container .visibility-layout > span { width: 88px; max-width: none; min-height: 88px; display: grid; place-items: center; border: 2px solid var(--qc-example-color); border-radius: 12px; background: #f3edff; color: #271f68; font-size: 16px; font-weight: 800; }
.visibility-layout--hidden { background-image: linear-gradient(90deg, transparent 0, transparent calc(33.333% + 3px), rgba(49,39,130,.08) calc(33.333% + 3px), rgba(49,39,130,.08) calc(66.666% - 3px), transparent calc(66.666% - 3px)); }
.visibility-family-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.visibility-family-card { min-height: 235px; display: flex; flex-direction: column; align-items: flex-start; padding: 20px; }
.visibility-family-card > span, .visibility-print-grid article > span { padding: 5px 8px; border-radius: 6px; background: #eef7ff; color: var(--qc-blue-strong); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.visibility-family-card > code:first-of-type { margin-top: 18px; }
.visibility-family-card > code { margin-bottom: 5px; font-size: 12px; }
.visibility-family-card h3 { margin: 14px 0 7px; font-size: 15px; }
.visibility-family-card p { margin: 0; color: var(--qc-text); font-size: 12px; line-height: 1.6; }
.visibility-state-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.visibility-state-grid article { display: flex; min-height: 345px; padding: 20px; flex-direction: column; }
.visibility-state-grid h3 { margin: 16px 0 7px; font-size: 15px; }
.visibility-state-grid p { margin: 0; color: var(--qc-text); font-size: 12px; line-height: 1.65; }
.visibility-state-demo { margin-top: auto; padding-top: 18px; }
.visibility-state-demo__action { display: inline-flex; margin-bottom: 8px; padding: 5px 9px; border-radius: 999px; background: #eef7ff; color: var(--qc-blue-strong); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.visibility-state-demo__stage { position: relative; display: grid; min-height: 86px; place-items: center; overflow: hidden; border: 1px dashed #bad7f3; border-radius: 10px; background: linear-gradient(90deg, rgba(213, 229, 245, .42) 1px, transparent 1px), linear-gradient(rgba(213, 229, 245, .42) 1px, transparent 1px), #f8fbff; background-size: 16px 16px; cursor: pointer; transition: border-color .18s ease, background-color .18s ease; }
.visibility-state-demo__stage::before { content: "ESPACIO RESERVADO"; position: absolute; color: #9aaac0; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.visibility-state-demo__stage:hover, .visibility-state-demo__stage:focus-visible { border-color: #2399ff; background-color: #f0f8ff; outline: none; }
.visibility-state-demo__stage:focus-visible { box-shadow: 0 0 0 3px rgba(35, 153, 255, .2); }
.visibility-state-demo__target { position: relative; z-index: 1; display: grid; min-width: 154px; min-height: 46px; padding: 10px 16px; place-items: center; border: 2px solid #312782; border-radius: 9px; background: #fff; color: #271f68; font-size: 11px; font-weight: 800; pointer-events: none; box-shadow: 0 8px 20px rgba(74, 43, 140, .08); transition: opacity .14s ease, visibility .14s ease, transform .14s ease; }
.visibility-state-demo__stage--hover-show .visibility-state-demo__target, .visibility-state-demo__stage--focus-show .visibility-state-demo__target { visibility: hidden; opacity: 0; transform: scale(.96); }
.visibility-state-demo__stage--hover-show:hover .visibility-state-demo__target, .visibility-state-demo__stage--focus-show:focus .visibility-state-demo__target { visibility: visible; opacity: 1; transform: scale(1); }
.visibility-state-demo__stage--hover-hide:hover .visibility-state-demo__target, .visibility-state-demo__stage--focus-hide:focus .visibility-state-demo__target { visibility: hidden; opacity: 0; transform: scale(.96); }
.visibility-state-demo small { display: block; min-height: 33px; margin-top: 8px; color: #687992; font-size: 10px; line-height: 1.55; }
.visibility-state-demo small code { font-size: 10px; }
@media (hover: none) {
  .visibility-state-demo__stage--hover-show .visibility-state-demo__target { visibility: visible; opacity: 1; transform: none; }
  .visibility-state-demo__stage--hover-hide:hover .visibility-state-demo__target { visibility: visible; opacity: 1; transform: none; }
}
.visibility-responsive-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.visibility-responsive-grid article { display: grid; gap: 7px; padding: 15px; }
.visibility-responsive-grid strong { color: #18243d; font-family: monospace; font-size: 20px; }
.visibility-responsive-grid span, .visibility-responsive-grid code { color: #62728a; font-size: 10px; }
.visibility-print-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.visibility-print-grid article { min-height: 185px; padding: 22px; }
.visibility-print-grid article > code { display: inline-block; margin: 18px 0 12px; }
.visibility-print-grid h3 { margin: 0 0 7px; font-size: 15px; }
.visibility-print-grid p { margin: 0; color: var(--qc-text); font-size: 12px; line-height: 1.6; }

@media (max-width: 1100px) {
  .visibility-family-grid, .visibility-responsive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .visibility-family-grid, .visibility-state-grid, .visibility-responsive-grid, .visibility-print-grid { grid-template-columns: 1fr; }
  .doc-visibility-preview { min-height: 220px; padding: 20px; }
  .visibility-layout { grid-template-columns: repeat(3, 64px); gap: 12px; padding: 18px; }
  .preview-container .visibility-layout > span { width: 64px; min-height: 64px; }
}

/* Scroll */
.doc-scroll-preview { min-height: 315px; display: grid; align-items: center; justify-items: stretch; align-self: stretch; min-width: 0; max-width: none !important; padding: 26px; }
.preview-container.doc-scroll-preview { width: 100%; align-items: stretch; justify-content: stretch; }
.doc-scroll-preview > section, .doc-scroll-preview > .doc-scroll-track { width: 100% !important; max-width: none !important; min-width: 0; justify-self: stretch; align-self: stretch; }
.doc-scroll-track { box-sizing: border-box; width: 100% !important; max-width: none !important; min-width: 0; display: flex; gap: 18px; padding: 24px; overflow-y: hidden; border: 1px dashed #b8cbe0; border-radius: 14px; background: #f7faff; }
.doc-scroll-track > article { flex: 0 0 clamp(150px, 28%, 185px); min-height: 132px; display: grid; place-items: center; border: 2px solid var(--qc-example-color); border-radius: 13px; background: linear-gradient(135deg, #ede9fe, #faf8ff); color: #271f68; font-size: 20px; font-weight: 800; }
.doc-mandatory-demo { position: relative; width: 100% !important; max-width: none !important; min-width: 0; justify-self: stretch; }
.doc-mandatory-demo::after { content: ""; position: absolute; top: 31px; bottom: 25px; left: 16px; z-index: 3; width: 2px; background: #009ee2; pointer-events: none; }
.doc-mandatory-demo::before { content: "INICIO"; position: absolute; top: 37px; left: 22px; z-index: 4; color: #009ee2; font-size: 8px; font-weight: 800; letter-spacing: .08em; pointer-events: none; }
.doc-mandatory-demo > p { margin: 0 0 10px; color: #52647e; font-size: 11px; font-weight: 700; text-align: center; }
.doc-mandatory-demo .doc-scroll-track > article { align-content: center; gap: 7px; }
.doc-mandatory-demo .doc-scroll-track strong { font-size: 20px; }
.doc-mandatory-demo .doc-scroll-track small { color: #312782; font-size: 9px; font-weight: 600; }
.doc-mandatory-demo footer { margin-top: 10px; color: #63738a; font-size: 9px; text-align: center; }
.doc-proximity-demo { position: relative; width: 100%; min-width: 0; }
.doc-proximity-demo::after { content: ""; position: absolute; top: 31px; bottom: 27px; left: 50%; z-index: 3; width: 2px; background: #009ee2; pointer-events: none; }
.doc-proximity-demo::before { content: "CENTRO"; position: absolute; top: 37px; left: 50%; z-index: 4; color: #009ee2; font-size: 8px; font-weight: 800; letter-spacing: .08em; pointer-events: none; transform: translateX(-50%); }
.doc-proximity-demo > p { margin: 0 0 10px; color: #52647e; font-size: 11px; font-weight: 700; text-align: center; }
.doc-proximity-demo .doc-scroll-track { position: relative; padding-top: 28px; padding-bottom: 28px; }
.doc-proximity-demo .doc-scroll-track > article { min-height: 126px; align-content: center; gap: 7px; }
.doc-proximity-demo .doc-scroll-track strong { font-size: 20px; }
.doc-proximity-demo .doc-scroll-track small { color: #312782; font-size: 9px; font-weight: 600; }
.doc-proximity-demo footer { display: flex; justify-content: space-between; gap: 14px; margin-top: 10px; color: #63738a; font-size: 9px; }
.doc-proximity-demo footer span:first-child::before, .doc-proximity-demo footer span:last-child::before { content: ""; width: 7px; height: 7px; display: inline-block; margin-right: 6px; border-radius: 50%; }
.doc-proximity-demo footer span:first-child::before { background: #94a3b8; }
.doc-proximity-demo footer span:last-child::before { background: #009ee2; }
.scroll-family-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.scroll-family-card { min-height: 225px; display: flex; flex-direction: column; align-items: flex-start; padding: 20px; }
.scroll-family-card > span, .scroll-snap-grid article > span { padding: 5px 8px; border-radius: 6px; background: #eef7ff; color: var(--qc-blue-strong); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.scroll-family-card > code { margin: 18px 0 12px; font-size: 11px; }
.scroll-family-card h3, .scroll-snap-grid h3 { margin: 0 0 8px; color: #18243d; font-size: 15px; }
.scroll-family-card p, .scroll-snap-grid p { margin: 0; color: var(--qc-text); font-size: 12px; line-height: 1.6; }
.scroll-snap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.scroll-snap-grid article { min-height: 230px; display: flex; flex-direction: column; align-items: flex-start; padding: 20px; }
.scroll-snap-grid article > code:first-of-type { margin-top: 18px; }
.scroll-snap-grid article > code { margin-bottom: 5px; font-size: 11px; }
.scroll-snap-grid h3 { margin-top: 12px; }
.scroll-offset-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.scroll-offset-card { min-width: 0; padding: 14px; }
.scroll-offset-legend { display: flex; flex-wrap: wrap; gap: 18px; margin: 0 0 14px; color: #60708a; font-size: 11px; }
.scroll-offset-legend span { display: inline-flex; align-items: center; gap: 7px; }
.scroll-offset-legend i { width: 17px; height: 12px; display: inline-block; border-radius: 3px; }
.scroll-offset-legend .is-container { border: 2px solid #94a3b8; background: #fff; }
.scroll-offset-legend .is-space { border: 1px dashed #3c2f9d; background: #ddd6fe; }
.scroll-offset-legend .is-target { border: 2px solid var(--qc-example-color); background: #f3edff; }
.scroll-offset-explanation { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; padding: 13px 16px; border: 1px solid #dce5f0; border-radius: 10px; background: #f8fbff; color: #5f6f88; font-size: 12px; }
.scroll-offset-explanation strong { color: #1c3152; white-space: nowrap; }
.scroll-offset-stage { position: relative; height: 112px; display: flex; align-items: center; margin-bottom: 12px; padding: 14px; overflow: hidden; border: 2px solid #aebdd0; border-radius: 10px; background: #f8fbff; }
.scroll-offset-space { width: var(--scroll-offset); height: 58px; flex: 0 0 var(--scroll-offset); display: block; border: 1px dashed #3c2f9d; background: rgba(60, 47, 157, .17); }
.scroll-offset-target { width: 54px; height: 58px; flex: 0 0 54px; display: grid; place-items: center; border: 2px solid var(--qc-example-color); border-radius: 9px; background: #f3edff; color: #312782; font-size: 12px; font-style: normal; font-weight: 800; }
.scroll-offset-line { position: absolute; top: 9px; bottom: 9px; left: calc(14px + var(--scroll-offset)); width: 2px; display: block; background: #009ee2; transform: translateX(-1px); }
.scroll-offset-stage--padding .scroll-offset-space { border-left: 0; }
.scroll-offset-stage--margin .scroll-offset-line { left: 14px; }
.scroll-offset-stage--margin .scroll-offset-space { border-left: 0; }
.scroll-offset-card > div:nth-child(2) { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.scroll-offset-card > div:nth-child(2) span, .scroll-offset-card small { color: #66758c; font-size: 10px; }
.scroll-offset-card small { min-height: 30px; display: block; margin-top: 7px; line-height: 1.45; }
@media (max-width: 1100px) {
  .scroll-family-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .scroll-offset-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .doc-scroll-preview { min-height: 230px; padding: 20px; }
  .doc-scroll-track > article { flex-basis: 126px; min-height: 105px; }
  .scroll-family-grid, .scroll-snap-grid, .scroll-offset-grid { grid-template-columns: 1fr; }
  .scroll-offset-explanation { align-items: flex-start; flex-direction: column; gap: 4px; }
}

.table-wrap { overflow-x: auto; border: 1px solid var(--qc-border); border-radius: 12px; box-shadow: 0 10px 30px rgba(19,42,80,.05); }
table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 12px; }
th, td { padding: 11px 14px; border-bottom: 1px solid #e5ebf3; text-align: left; vertical-align: top; }
th { background: #f5f8fc; color: #33435d; font-size: 11px; letter-spacing: .03em; text-transform: uppercase; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #f8fbff; }
td code, .practice-grid code, .info-banner code, .section-heading code { padding: 2px 5px; border-radius: 5px; background: #eef3f9; color: #245488; font-size: .95em; }
.rule-callout { display: flex; gap: 15px; align-items: center; margin-top: 13px; padding: 14px 17px; border: 1px solid #b9dcff; border-radius: 10px; background: #eef8ff; color: #48607a; font-size: 12px; }
.rule-callout strong { color: var(--qc-blue-strong); white-space: nowrap; }

.practice-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.practice-grid article { padding: 19px; border: 1px solid var(--qc-border); border-radius: 12px; background: #fff; }
.practice-grid article:nth-child(1) { background: #f1f8ff; border-color: #c8e3fb; }
.practice-grid article:nth-child(2) { background: #f8f3ff; border-color: #e5d6fa; }
.practice-grid article:nth-child(3) { background: #effbf7; border-color: #c7eee1; }
.practice-grid article:nth-child(4) { background: #fff8eb; border-color: #f5dfb8; }
.practice-grid article > span { color: var(--qc-blue-strong); font-size: 11px; font-weight: 700; }
.practice-grid h3 { margin: 8px 0 5px; font-size: 14px; }
.practice-grid p { margin: 0; color: var(--qc-text); font-size: 12px; }
.doc-footer { padding: 30px 0; border-top: 1px solid var(--qc-border); background: #f8fbff; color: #65758c; font-size: 11px; }
.doc-footer-inner { width: min(100% - 40px, 1440px); display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.doc-footer-license { display: flex; align-items: center; flex-wrap: nowrap; gap: 7px; white-space: nowrap; }
.doc-footer-license strong { color: #172843; }
.doc-footer-license a { color: var(--qc-blue-strong); font-weight: 700; }
.doc-footer-author { display: flex; align-items: center; gap: 4px; margin: 0; text-align: right; white-space: nowrap; }
.doc-footer-author strong { color: var(--qc-purple); }
.doc-footer-flag { display: inline-block; font-size: 16px; line-height: 1; filter: sepia(1) saturate(.6) contrast(.92); }

/* Animation documentation */
.docs-shell--animation .example-tab { font-family: 'Ubuntu', sans-serif; }
.doc-animation-stage { min-height: 390px; }
.doc-animation-stage .preview-ruler { align-items: center; }
.animation-replay-button { padding: 6px 10px; border: 1px solid #b9dcff; border-radius: 8px; background: #eef8ff; color: var(--qc-blue-strong); cursor: pointer; font-size: 10px; font-weight: 700; }
.doc-animation-preview { min-height: 270px; overflow: hidden; }
.doc-animation-subject { width: min(100%, 250px); min-height: 175px; display: grid; place-items: center; align-content: center; gap: 7px; padding: 24px; border: 3px solid #312782; border-radius: 24px; background: linear-gradient(145deg, #f5f0ff, #e9ddff); color: #271f68; box-shadow: 0 18px 35px rgba(76,29,149,.13); }
.doc-animation-subject > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: #312782; color: #fff !important; font-size: 22px !important; font-weight: 700; }
.doc-animation-subject strong { font-size: 18px; }
.doc-animation-subject small { color: #72618e; font-size: 11px; }
.doc-animation-subject--spin { border-style: dashed; border-radius: 50%; }
.animation-inout-rule { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 18px; align-items: center; padding: 22px; }
.animation-inout-rule > div { min-height: 125px; display: grid; align-content: center; gap: 8px; padding: 18px; border-radius: 12px; background: #f5f9fd; }
.animation-inout-rule > div:last-child { background: #faf7ff; }
.animation-inout-rule span { color: var(--qc-blue-strong); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.animation-inout-rule strong { color: #18243d; font-size: 14px; }
.animation-inout-rule p { margin: 0; color: #64748b; font-size: 11px; line-height: 1.55; }
.animation-inout-rule > b { color: #8fa5bd; font-size: 22px; }
.animation-pair-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin: 14px 0; }
.animation-pair-grid article { min-width: 0; min-height: 215px; display: flex; flex-direction: column; align-items: flex-start; padding: 18px; }
.animation-pair-grid article > span { color: var(--qc-blue-strong); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.animation-pair-grid h3 { margin: 10px 0 14px; font-size: 15px; }
.animation-pair-grid code { margin-bottom: 7px; font-size: 10px; }
.animation-pair-grid p { margin-top: auto; color: #64748b; font-size: 11px; line-height: 1.5; }
.animation-subheading { margin: 24px 0 12px; color: #22314d; font-size: 15px; }
.animation-scale-grid,.animation-delay-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.animation-scale-card,.animation-delay-card { min-width: 0; padding: 15px; }
.animation-speed-track { height: 62px; display: grid; place-items: center; margin-bottom: 12px; border-radius: 9px; background: #f1f7fc; }
.animation-speed-track span { width: 26px; height: 26px; border: 2px solid #312782; border-radius: 8px; background: #efe8ff; }
.animation-scale-card code,.animation-delay-card code { font-size: 10px; }
.animation-scale-card small { float: right; color: #6b7890; font-size: 10px; }
.animation-delay-card > span { color: #18243d; font-family: monospace; font-size: 18px; }
.animation-delay-card > div { height: 8px; margin: 12px 0; overflow: hidden; border-radius: 99px; background: #e9eff6; }
.animation-delay-card i { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg,#009ee2,#312782); }
.animation-control-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-top: 20px; }
.animation-control-grid article { min-width: 0; min-height: 205px; display: flex; flex-direction: column; align-items: flex-start; padding: 18px; }
.animation-control-grid article > span { color: var(--qc-blue-strong); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.animation-control-grid h3 { margin: 12px 0; font-size: 14px; }
.animation-control-grid code { margin-bottom: 6px; font-size: 10px; }
.animation-control-grid p { margin-top: auto; color: #64748b; font-size: 11px; line-height: 1.5; }
.animation-control-demo { width: 100%; min-height: 92px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 0 0 14px; padding: 12px; border-radius: 10px; background: #f2f7fc; }
.animation-control-demo > div { min-width: 0; display: grid; place-items: center; align-content: center; gap: 7px; }
.animation-control-demo small { color: #64748b; font-family: monospace; font-size: 9px; text-transform: uppercase; }
.animation-control-sample { width: 30px; height: 30px; display: block; border: 2px solid #312782; border-radius: 9px; background: #efe8ff; animation-name: none; }
.animation-control-card:hover .animation-control-sample { animation-name: var(--doc-control-animation); }
.animation-control-card .anim-paused,
.animation-control-card .animate-none { opacity: .55; }
.animation-run-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.preview-container.doc-run-preview { min-height: 390px; display: grid; grid-template-columns: minmax(0,1fr); place-items: center; padding: 28px; overflow: hidden; }
.doc-run-scroll-shell { width: 100%; max-width: 610px; display: grid; justify-self: stretch; gap: 9px; margin-inline: auto; }
.doc-run-scroll-tools { display: flex; align-items: center; justify-content: center; gap: 10px; }
.doc-run-scroll-hint { color: #52647f; font-size: 10px; font-weight: 700; text-align: center; }
.doc-run-play { border: 1px solid #9dccf7; border-radius: 999px; background: #eef8ff; color: #0b6fd3; padding: 7px 11px; font: inherit; font-size: 9px; font-weight: 800; cursor: pointer; }
.doc-run-play:hover,.doc-run-play:focus-visible { border-color: #2792f4; background: #2792f4; color: #fff; outline: none; }
.doc-run-scroll { position: relative; height: 310px; display: grid; place-items: center; overflow: hidden; padding: 28px; border: 1px dashed #afc8e3; border-radius: 16px; background: linear-gradient(180deg,#f8fbff,#edf5ff); }
.doc-run-scroll-space { display: none; }
.doc-run-demo-card { position: relative; z-index: 1; width: 100%; max-width: 520px; min-height: 190px; display: grid; place-content: center; justify-items: center; gap: 10px; margin: 0; padding: 24px; border: 2px solid #312782; border-radius: 22px; background: linear-gradient(145deg,#fff,#f2eaff); color: #32136f; box-shadow: 0 18px 38px rgba(72,42,132,.14); text-align: center; animation-duration: 1600ms !important; animation-timeline: auto !important; animation-range: normal !important; animation-play-state: paused !important; }
.doc-run-demo-card.doc-run-is-active { animation-play-state: running !important; }
.doc-run-demo-card > span { padding: 5px 9px; border-radius: 999px; background: #e7f4ff; color: #1768d5; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.doc-run-demo-card > strong { font-size: 18px; }
.doc-run-demo-card > small { color: #6b7890; font-size: 11px; }
.animation-mode-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-bottom: 14px; }
.animation-mode-card { min-width: 0; min-height: 190px; display: flex; flex-direction: column; padding: 20px; }
.animation-mode-card > span,.animation-run-formula span { color: var(--qc-blue-strong); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.animation-mode-card h3 { margin: 10px 0; font-size: 16px; }
.animation-mode-card p { margin: 0; color: #64748b; font-size: 11px; line-height: 1.55; }
.animation-mode-card pre { margin: 16px 0 12px; padding: 14px; overflow: auto; border-radius: 10px; background: var(--qc-code); color: #dbeafe; font-size: 10px; line-height: 1.55; }
.animation-mode-card > small { margin-top: auto; color: #53627a; font-size: 10px; font-weight: 700; }
.animation-run-formula { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1.15fr); gap: 12px; align-items: center; margin-bottom: 14px; padding: 18px; }
.animation-run-formula > div { min-height: 96px; display: grid; align-content: center; gap: 7px; padding: 14px; border-radius: 10px; background: #f5f9fd; }
.animation-run-formula > b { color: #91a4bb; font-size: 20px; }
.animation-run-formula code,.animation-run-formula strong { color: #1d3150; font-size: 13px; }
.animation-run-formula small { color: #64748b; font-size: 10px; line-height: 1.45; }
.animation-run-card { min-width: 0; padding: 20px; }
.animation-run-card > span,.animation-run-attributes span { color: var(--qc-blue-strong); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.animation-run-card h3,.animation-run-attributes h3 { margin: 9px 0; font-size: 16px; }
.animation-run-card p,.animation-run-attributes p { margin: 0; color: #64748b; font-size: 12px; line-height: 1.55; }
.animation-run-track { position: relative; height: 8px; margin-top: 18px; overflow: hidden; border-radius: 999px; background: #e2eaf3; }
.animation-run-track::before { content: ""; position: absolute; inset: 0; width: 80%; border-radius: inherit; background: linear-gradient(90deg,#39adff,#312782); }
.animation-run-track i { position: absolute; z-index: 1; top: 50%; left: 10%; width: 14px; height: 14px; border: 3px solid #fff; border-radius: 50%; background: #236fe8; box-shadow: 0 2px 8px rgba(15,23,42,.2); transform: translate(-50%,-50%); }
.animation-run-track--back::before { width: 100%; background: linear-gradient(90deg,#39adff 0 50%,#312782 50% 100%); }
.animation-run-track--back i { left: 50%; }
.animation-run-card pre,.animation-run-attributes pre { margin: 16px 0 0; padding: 15px; overflow: auto; border-radius: 10px; background: var(--qc-code); color: #dbeafe; font-size: 11px; line-height: 1.6; }
.animation-run-attributes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; align-items: stretch; margin-top: 14px; padding: 20px; }
.animation-run-attributes pre { margin: 0; }
.animation-run-family-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.animation-run-family { min-width: 0; padding: 18px; }
.animation-run-family header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.animation-run-family header span { color: var(--qc-blue-strong); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.animation-run-family header code { font-size: 10px; }
.animation-run-family .animation-run-effect-list { margin-top: 14px; }
.animation-run-effect-list { display: grid; gap: 1px; overflow: hidden; border: 1px solid #dbe6f1; border-radius: 10px; background: #dbe6f1; }
.animation-run-effect-list > div { min-width: 0; display: grid; grid-template-columns: minmax(105px,.72fr) minmax(0,1.28fr); gap: 10px; align-items: center; padding: 10px; background: #f7fafd; }
.animation-run-effect-list code { font-size: 9px; }
.animation-run-effect-list p { margin: 0; color: #64748b; font-size: 9px; line-height: 1.4; }
.animation-effect-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.animation-effect-list strong { display: inline-flex; align-items: center; color: #31577f; font-size: 10px; }
.animation-effect-list code { padding: 7px 9px; border: 1px solid #d5e4f2; border-radius: 8px; background: #f5f9fd; color: #31577f; font-size: 10px; }
.animation-composition { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 12px; align-items: center; padding: 20px; }
.animation-composition > div { min-height: 130px; display: grid; align-content: center; gap: 8px; padding: 15px; border-radius: 10px; background: #f5f9fd; }
.animation-composition span { color: var(--qc-blue-strong); font-size: 10px; font-weight: 800; }
.animation-composition strong { color: #22314d; font-size: 13px; }
.animation-composition code { font-size: 10px; }
.animation-composition > b { color: #9aa9bd; font-size: 20px; }
.animation-composition-workbench { margin-top: 14px; }
.animation-composition-stage { min-height: 390px; }
.animation-composition-stage [data-animation-subject] { width: min(100%,280px); min-height: 180px; display: grid; place-items: center; align-content: center; gap: 9px; padding: 24px; border: 3px solid #312782; border-radius: 24px; background: linear-gradient(145deg,#f5f0ff,#e9ddff); color: #271f68; text-align: center; box-shadow: 0 18px 35px rgba(76,29,149,.13); }
.animation-composition-stage [data-animation-subject] strong { max-width: 190px; font-size: 17px; line-height: 1.35; }
.animation-composition-stage [data-animation-subject] small { color: #72618e; font-size: 11px; }
.animation-reference-table { min-width: 900px; }

/* Transition documentation */
.doc-transition-preview {
  min-height: 390px;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 36px;
  border: 1px solid #bfdbfe;
  border-radius: 16px;
  background: linear-gradient(145deg,#eef7ff,#f6f1ff);
}
.doc-transition-subject {
  width: 150px;
  min-height: 112px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  border: 2px solid #312782;
  border-radius: 20px;
  background: #f2eaff;
  color: #271f68;
  box-shadow: 0 15px 32px rgba(76,29,149,.12);
}
.doc-transition-subject span { font-size: 16px; font-weight: 800; }
.doc-transition-subject small { color: #72618e; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.doc-transition-preview--transform:hover .doc-transition-subject { transform: translateX(130px) rotate(6deg); }
.doc-transition-preview--opacity:hover .doc-transition-subject { opacity: .2; }
.doc-transition-preview--colors:hover .doc-transition-subject { border-color: #168cf0; background-color: #168cf0; color: #fff; }
.doc-transition-preview--colors:hover .doc-transition-subject small { color: #e7f5ff; }
.transition-choice-strip { grid-template-columns: repeat(4,minmax(0,1fr)); }
.transition-property-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.transition-property-grid .alignment-family-card { min-height: 210px; }
.transition-property-grid .alignment-family-card > p { margin-top: 16px; }
.transition-scale-group + .transition-scale-group { margin-top: 30px; }
.transition-scale-group > h3 { margin: 0 0 14px; color: #17335f; font-size: 17px; }
.transition-token-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.transition-easing-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.transition-easing-card { min-height: 220px; }
.transition-easing-card h4 { overflow-wrap: anywhere; }
.transition-easing-track { height: 42px; display: flex; align-items: center; margin: 16px 0; padding: 7px; overflow: hidden; border-radius: 9px; background: #edf4fb; }
.transition-easing-track i { width: 24px; height: 24px; display: block; border-radius: 7px; background: linear-gradient(135deg,#009ee2,#312782); }
.transition-easing-card:hover .transition-easing-track i { transform: translateX(170px); }
@media (max-width:1080px){.animation-pair-grid,.animation-mode-grid,.animation-run-family-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.animation-scale-grid,.animation-delay-grid,.animation-control-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.animation-pair-grid,.animation-scale-grid,.animation-delay-grid,.animation-control-grid,.animation-run-grid,.animation-run-attributes,.animation-inout-rule,.animation-mode-grid,.animation-run-formula,.animation-run-family-grid{grid-template-columns:1fr}.animation-inout-rule>b,.animation-run-formula>b{text-align:center;transform:rotate(90deg)}.animation-composition{grid-template-columns:1fr}.animation-composition>b{text-align:center}.doc-animation-stage{min-height:330px;padding:20px}.preview-container.doc-run-preview{min-height:330px;padding:16px}.doc-run-scroll-tools{align-items:stretch;flex-direction:column}.doc-run-play{align-self:center}.doc-run-scroll{height:260px}.doc-run-scroll-space{height:270px}.doc-run-demo-card{width:calc(100% - 32px);min-height:170px;padding:18px}}

@media (max-width: 1180px) {
  .doc-header-nav a { padding-inline: 7px; font-size: 12px; }
  .doc-title-main { display: none; }
}

@media (max-width: 940px) {
  .doc-header-nav { display: none; }
  .doc-home-menu { display: block; }
}

@media (max-width: 1080px) {
  .components-overview-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .components-overview-stats > div:nth-child(2) { border-right: 0; }
  .components-overview-stats > div:nth-child(-n+2) { border-bottom: 1px solid #dfe8f1; }
  .components-blueprint { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .components-blueprint__operator { display: none; }
  .components-blueprint__result { grid-column: 1 / -1; min-height: 180px; }
  .docs-shell { grid-template-columns: 205px minmax(0,1fr); gap: 28px; }
  .docs-shell::before { left: 204px; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: auto; }
  .practice-grid { grid-template-columns: repeat(2, 1fr); }
  .icon-library-grid { grid-template-columns: 1fr; }
  .icon-library-card > p { min-height: 0; }
  .transition-choice-strip, .transition-property-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .transition-token-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .doc-header-badge, .doc-title-main { display: none !important; }
  .doc-header-inner { gap: 12px; }
  .doc-header-brand { gap: 9px; }
  .logo { width: 82px; }
  .doc-version-label { display: none; }
  .doc-version-menu summary { padding-inline: 9px; }
  .doc-version-dropdown { width: min(250px, calc(100vw - 28px)); }
  .doc-header-actions { gap: 6px; }
  .doc-home-menu__dropdown { width: min(220px, calc(100vw - 28px)); }
  .doc-footer-inner { flex-direction: column; justify-content: center; gap: 10px; padding-inline: 14px; text-align: center; }
  .doc-footer-license { justify-content: center; flex-wrap: wrap; white-space: normal; }
  .doc-footer-author { justify-content: center; text-align: center; white-space: normal; }
  .docs-shell { width: min(100% - 28px, 1440px); display: block; }
  .docs-shell::before { display: none; }
  .docs-sidebar { height: auto; min-height: 0; }
  .docs-sidebar-inner { position: static; height: auto; display: flex; gap: 7px; padding: 14px 0; border: 0; border-bottom: 1px solid var(--qc-border); overflow-x: auto; overflow-y: hidden; }
  .docs-sidebar-inner > *:not(nav) { display: none; }
  .docs-sidebar nav { display: flex; min-width: max-content; }
  .sidebar-link { padding: 7px 10px; }
  .docs-content { padding-top: 25px; }
  .breadcrumb { margin-bottom: 18px; }
  .title-row { display: block; }
  .title-actions { padding-top: 18px; }
  h1 { font-size: 36px; }
  .lead { font-size: 15px; }
  .example-workbench { grid-template-columns: 1fr; }
  .practice-grid { grid-template-columns: 1fr; }
  .doc-grid--3, .doc-grid--4 { grid-template-columns: 1fr; }
  .rule-callout { align-items: flex-start; flex-direction: column; gap: 4px; }
  .transition-choice-strip, .transition-property-grid, .transition-token-grid, .transition-easing-grid { grid-template-columns: 1fr; }
  .doc-transition-preview { min-height: 310px; padding: 24px; }
  .doc-transition-preview--transform:hover .doc-transition-subject { transform: translateX(60px) rotate(6deg); }
}

@media (max-width: 600px) {
  .doc-header > div { width: calc(100% - 28px); }
  .doc-header-inner { min-height: 64px; gap: 8px; }
  .doc-header-brand { min-width: 0; flex: 1 1 auto; gap: 8px; }
  .doc-header-brand > div { min-width: 0; }
  .logo { width: 84px; }
  .doc-title-sub { overflow: hidden; font-size: 10px; letter-spacing: .09em; text-overflow: ellipsis; }
  .doc-header-actions { flex: 0 0 auto; gap: 6px; }
  .doc-home-menu summary,.doc-version-menu summary { min-height: 42px; padding: 8px 10px; border-radius: 10px; }
  .doc-version-detail { display: none; }
  .doc-home-menu__dropdown,.doc-version-dropdown {
    position: fixed;
    top: 72px;
    right: 14px;
    left: 14px;
    width: auto;
    max-height: calc(100dvh - 86px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 14px;
    box-shadow: 0 22px 52px rgba(15,35,70,.2);
  }
  .doc-home-menu__dropdown a,.doc-version-dropdown a { min-height: 44px; display: flex; align-items: center; padding: 11px 13px; font-size: 14px; }
  .doc-version-dropdown a { justify-content: space-between; }
  .doc-version-dropdown a strong { font-size: 13px; }
  .doc-version-dropdown a small { font-size: 10px; }
}

@media (max-width: 460px) {
  .doc-header > div { width: calc(100% - 20px); }
  .doc-title-sub { display: none; }
  .doc-header-brand { flex: 0 1 auto; }
  .logo { width: 88px; }
  .doc-home-menu summary { gap: 7px; font-size: 13px; }
  .doc-version-menu summary { gap: 5px; padding-inline: 9px; }
  .doc-version-menu summary strong { font-size: 13px; }
  .doc-version-menu summary i { margin-left: 1px; }
  .doc-home-menu__dropdown,.doc-version-dropdown { right: 10px; left: 10px; }
}

@media (max-width: 350px) {
  .logo { width: 76px; }
  .doc-home-menu summary span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .doc-home-menu summary { width: 42px; justify-content: center; padding-inline: 0; }
  .doc-home-menu summary i { width: 9px; height: 9px; margin-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .preview-container { transition: none; }
}

/* Shared documentation type scale */
:root {
  --qc-leading-display: 1.08;
  --qc-leading-heading: 1.25;
  --qc-leading-body: 1.55;
  --qc-leading-meta: 1.4;
  --qc-leading-code: 1.65;
}
.docs-content h1 { line-height: var(--qc-leading-display); }
.docs-content .section-heading h2 { font-size: 30px; line-height: var(--qc-leading-heading); }
.docs-content .section-heading > p:last-child,
.docs-content .lead,
.docs-content .feature-card p,
.docs-content .info-banner p,
.docs-content .rule-callout,
.docs-content .example-note { line-height: var(--qc-leading-body); }
.docs-content .section-heading > p:last-child { font-size: 14px; }
.docs-content .doc-card > h2,
.docs-content .doc-card > h3,
.docs-content .doc-card > h4,
.docs-content .practice-grid h3 { line-height: var(--qc-leading-heading); }
.docs-content .doc-card > h3 { font-size: 15px; }
.docs-content .doc-card > h4 { font-size: 14px; }
.docs-content .doc-card > p { font-size: 12px; line-height: var(--qc-leading-body); }
.docs-content .doc-card > small { font-size: 10px; line-height: var(--qc-leading-meta); }
.docs-content .doc-table th,
.docs-content .doc-table td,
.docs-content .table-wrap th,
.docs-content .table-wrap td { line-height: var(--qc-leading-body); }
.docs-content pre { line-height: var(--qc-leading-code); }
.docs-sidebar .sidebar-link,
.docs-sidebar .sidebar-group-title,
.doc-header { line-height: var(--qc-leading-meta); }
.sidebar-home-link { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; border: 1px solid #d8e7f5; background: #f7fbff; color: #245488; font-weight: 700; }
.sidebar-home-link span { color: var(--qc-blue-strong); font-size: 15px; line-height: 1; }
.sidebar-home-link:hover { border-color: #acd4fb; }

/* QuicklyCSS v2 home */
body:has(.home-main) { overflow-x: hidden; }
.home-main { width: min(100% - 48px, 1440px); margin-inline: auto; overflow: visible; }
.home-hero { position: relative; min-height: 710px; display: grid; grid-template-columns: minmax(0,.92fr) minmax(520px,1.08fr); grid-template-areas: "copy visual"; column-gap: clamp(48px,7vw,104px); align-items: center; padding: 76px 0 104px; }
.home-hero::before { content: ""; position: absolute; z-index: -1; top: 55px; right: -170px; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle,rgba(35,200,250,.16),rgba(49,39,130,.07) 45%,transparent 70%); }
.home-hero__copy { grid-area: copy; }
.home-ai-ready { position: absolute; z-index: 6; top: 45px; right: -76px; width: 270px; min-height: 58px; display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 5px; padding: 9px 34px; background: linear-gradient(135deg,#61b5f7,#48a5ef); color: #08182c; box-shadow: 0 8px 20px rgba(5,40,74,.24); text-align: center; transform: rotate(45deg); transform-origin: center; transition: background .2s ease,box-shadow .2s ease; }
.home-ai-ready:hover { background: linear-gradient(135deg,#78c4ff,#55b3fb); box-shadow: 0 10px 26px rgba(5,40,74,.32); }
.home-ai-ready:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.home-ai-ready strong { font-size: 12px; font-weight: 800; letter-spacing: .12em; line-height: 1; white-space: nowrap; }
.home-ai-ready small { font-size: 8px; font-weight: 700; letter-spacing: .025em; line-height: 1.2; white-space: nowrap; }
.home-eyebrow { margin: 0 0 14px; color: var(--qc-blue-strong); font-size: 11px; font-weight: 800; letter-spacing: .11em; line-height: var(--qc-leading-meta); text-transform: uppercase; }
.home-hero .home-eyebrow { display: flex; align-items: center; gap: 9px; }
.home-hero .home-eyebrow span { width: 8px; height: 8px; border-radius: 50%; background: #22c884; box-shadow: 0 0 0 5px rgba(34,200,132,.12); }
.home-hero h1 { max-width: 780px; color: #091633; font-size: clamp(48px,5.5vw,78px); line-height: 1.02; letter-spacing: -.052em; }
.home-title-accent { color: var(--qc-blue); }
.home-hero__lead { max-width: 690px; margin: 24px 0 0; color: #52617a; font-size: clamp(17px,1.5vw,21px); line-height: 1.6; }
.home-rewrite-note { max-width: 690px; display: flex; align-items: flex-start; gap: 13px; margin-top: 20px; padding: 14px 16px; border: 1px solid #a8e7f7; border-radius: 12px; background: linear-gradient(110deg,#eefbfe,#f8fcff); }
.home-rewrite-note strong { flex: 0 0 auto; color: var(--qc-purple); font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.home-rewrite-note span { color: #52617a; font-size: 12px; line-height: var(--qc-leading-body); }
.home-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 34px; }
.home-button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 18px; border: 1px solid transparent; border-radius: 11px; font-size: 13px; font-weight: 800; line-height: 1; transition: transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
.home-button:hover { transform: translateY(-2px); }
.home-button--primary { background: linear-gradient(135deg,#009ee2,#23c8fa); color: #fff; box-shadow: 0 14px 28px rgba(0,158,226,.22); }
.home-button--secondary { border-color: #d5e2ef; background: #fff; color: #263955; }
.home-button--secondary:hover { border-color: #9dccf7; box-shadow: 0 10px 24px rgba(36,84,136,.09); }
.home-metrics { display: flex; flex-wrap: wrap; gap: 0; margin: 44px 0 0; }
.home-metrics > div { min-width: 132px; padding-right: 24px; }
.home-metrics > div + div { padding-left: 24px; border-left: 1px solid #dce5f1; }
.home-metrics dt { color: #11203b; font-size: 25px; font-weight: 800; line-height: 1.1; }
.home-metrics dd { margin: 5px 0 0; color: #728197; font-size: 10px; font-weight: 700; line-height: var(--qc-leading-meta); text-transform: uppercase; }
.home-hero__visual { grid-area: visual; position: relative; overflow: hidden; border: 1px solid #cdddec; border-radius: 22px; background: #fff; box-shadow: 0 34px 80px rgba(24,55,94,.16); transform: rotate(1deg); }
.home-hero__visual::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1px rgba(255,255,255,.8); }
.home-visual__toolbar { min-height: 47px; display: flex; align-items: center; gap: 7px; padding: 0 16px; border-bottom: 1px solid #26314b; background: #0b1022; }
.home-visual__toolbar > span { width: 8px; height: 8px; border-radius: 50%; background: #ff6b7b; }
.home-visual__toolbar > span:nth-child(2) { background: #ffd05c; }
.home-visual__toolbar > span:nth-child(3) { background: #58d89b; }
.home-visual__toolbar strong { margin-left: auto; color: #8396b8; font-family: monospace; font-size: 10px; font-weight: 600; }
.home-visual__canvas { padding: 30px 24px 27px; background: #0b1022; }
.home-code-line { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 12px; min-height: 31px; align-items: center; }
.home-code-line i { color: #465574; font-family: monospace; font-size: 10px; font-style: normal; text-align: right; }
.home-code-line code { overflow: hidden; color: #a8c8f5; font-size: 11px; line-height: 1.55; text-overflow: ellipsis; white-space: nowrap; }
.home-code-line b { color: #f0a3f2; font-weight: 500; }
.home-visual__result { padding: 18px; background-image: linear-gradient(#eef3f9 1px,transparent 1px),linear-gradient(90deg,#eef3f9 1px,transparent 1px); background-size: 18px 18px; }
.home-visual__result > span { color: #8a98ab; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.home-visual__result > div { min-height: 145px; display: grid; place-items: center; align-content: center; gap: 7px; margin-top: 12px; border: 1px solid #bcdfff; border-radius: 14px; background: linear-gradient(145deg,#eaf6ff,#f2edff); color: #233958; }
.home-visual__result img { width: min(180px,52%); height: auto; margin-bottom: 3px; }
.home-visual__result strong { font-size: 15px; line-height: var(--qc-leading-heading); }
.home-visual__result small { color: #6c7c93; font-size: 10px; line-height: var(--qc-leading-meta); }
.home-section { padding: 100px 0; border-top: 1px solid #e6edf5; }
.home-section__heading { max-width: 820px; margin-bottom: 36px; }
.home-section__heading h2,.home-cta h2 { margin: 0; color: #0b1736; font-size: clamp(34px,4vw,52px); line-height: 1.12; letter-spacing: -.04em; }
.home-section__heading > p:last-child { margin: 15px 0 0; color: #60708a; font-size: 16px; line-height: var(--qc-leading-body); }
.home-section__heading--split { max-width: none; display: grid; grid-template-columns: minmax(0,1fr) minmax(300px,.65fr); gap: 60px; align-items: end; }
.home-section__heading--split > p { margin: 0 0 4px; }
.home-card-grid { display: grid; gap: 16px; }
.home-card-grid--3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.home-card { min-height: 315px; display: flex; flex-direction: column; padding: 24px; border: 1px solid #dce5f1; border-radius: 16px; background: #fff; box-shadow: 0 14px 36px rgba(19,42,80,.05); }
.home-card__number { width: fit-content; min-width: 39px; height: 39px; display: grid; place-items: center; padding-inline: 10px; border-radius: 11px; background: #eaf5ff; color: var(--qc-blue-strong); font-size: 10px; font-weight: 800; }
.home-card:nth-child(2) .home-card__number { background: #f1eaff; color: #312782; }
.home-card:nth-child(3) .home-card__number { background: #e5f9f1; color: #07805c; }
.home-card h3 { margin: 23px 0 9px; color: #152541; font-size: 19px; line-height: var(--qc-leading-heading); }
.home-card p { margin: 0; color: #60708a; font-size: 13px; line-height: var(--qc-leading-body); }
.home-card > code { align-self: flex-start; margin-top: auto; padding: 6px 8px; border-radius: 7px; background: #f1f5f9; color: #31577f; font-size: 10px; }
.home-card__example { min-height: 92px; display: grid; align-items: center; gap: 10px; margin-top: auto; padding: 13px; overflow: hidden; border: 1px solid #e0e9f2; border-radius: 12px; background: linear-gradient(145deg,#f8fbff,#f5f2fb); }
.home-card__example code { min-width: 0; margin: 0; padding: 0; background: transparent; color: #31577f; font-size: 8px; overflow-wrap: anywhere; }
.home-card__example--modules > div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; }
.home-card__example--modules span { min-width: 0; padding: 9px 4px; border-radius: 7px; background: #dff2fc; color: #17608e; font-size: 7px; font-weight: 800; text-align: center; }
.home-card__example--modules span:nth-child(2) { background: #eee8fb; color: #4c3c98; }
.home-card__example--modules span:nth-child(3) { background: #e2f5ed; color: #187458; }
.home-card__example--modules code { text-align: center; }
.home-card__example--responsive { grid-template-columns: minmax(0,1fr) auto 34px; grid-template-rows: 42px auto; }
.home-card__example--responsive > b,.home-card__example--result > b { color: #8ba0b8; font-size: 13px; }
.home-card__desktop { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; }
.home-card__mobile { display: grid; gap: 3px; }
.home-card__desktop i,.home-card__mobile i { display: block; border-radius: 4px; background: linear-gradient(145deg,#7bcde9,#58aee0); }
.home-card__desktop i { height: 30px; }
.home-card__mobile i { height: 9px; }
.home-card__example--responsive code { grid-column: 1 / -1; text-align: center; }
.home-card__example--result { grid-template-columns: minmax(0,1fr) auto auto; }
.home-card__example--result code { padding: 10px; border-radius: 7px; background: #101a31; color: #d9e8ff; }
.home-card__example--result > span { padding: 9px 11px; border-radius: 8px; background: #1765df; color: #fff; font-size: 8px; font-weight: 800; box-shadow: 0 7px 15px rgba(23,101,223,.22); }
.home-system { position: relative; isolation: isolate; background: transparent; }
.home-system::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); border-top: 1px solid #dfeaf5; border-bottom: 1px solid #dfeaf5; background: linear-gradient(145deg,#f7fbff,#eef7ff 52%,#f8f5ff); }
.home-system-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.home-system-card { min-width: 0; min-height: 330px; display: flex; flex-direction: column; padding: 25px; border: 1px solid #d8e5f1; border-radius: 18px; background: rgba(255,255,255,.9); box-shadow: 0 18px 42px rgba(19,42,80,.06); }
.home-system-card header { display: flex; align-items: center; gap: 10px; color: #60708a; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.home-system-card header span { width: fit-content; min-width: 32px; height: 32px; display: grid; place-items: center; padding-inline: 9px; border-radius: 9px; background: #eaf5ff; color: var(--qc-blue-strong); }
.home-system-card--purple header span { background: #f1eaff; color: #312782; }
.home-system-card--green header span { background: #e5f9f1; color: #07805c; }
.home-system-card h3 { margin: 21px 0 9px; color: #11203b; font-size: 21px; line-height: var(--qc-leading-heading); }
.home-system-card > p { margin: 0; color: #60708a; font-size: 13px; line-height: var(--qc-leading-body); }
.home-tag-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 19px; }
.home-tag-list a { padding: 7px 9px; border: 1px solid #dbe6f1; border-radius: 8px; background: #f8fbff; color: #31577f; font-family: monospace; font-size: 9px; }
.home-tag-list a:hover { border-color: #9dccf7; color: var(--qc-blue-strong); }
.home-system-card__link { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 22px; border-top: 1px solid #e5ebf3; color: #263955; font-size: 12px; font-weight: 800; }
.home-system-card__link span { color: var(--qc-blue-strong); font-size: 17px; transition: transform .2s ease; }
.home-system-card__link:hover span { transform: translateX(5px); }
.home-capability-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.home-capability-list > a { min-height: 154px; display: grid; grid-template-columns: 54px minmax(0,1fr) auto; gap: 20px; align-items: center; padding: 26px; border: 1px solid #dce5f1; border-radius: 16px; background: #fff; box-shadow: 0 14px 36px rgba(19,42,80,.05); transition: border-color .18s ease,box-shadow .18s ease,transform .18s ease; }
.home-capability-list > a:hover { border-color: #9edff1; background: #f7fbff; box-shadow: 0 18px 42px rgba(19,42,80,.09); transform: translateY(-2px); }
.home-capability-list > a > span { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 15px; background: #eaf6fc; color: #087fb8; font-family: monospace; font-size: 17px; font-weight: 800; box-shadow: inset 0 0 0 1px rgba(0,143,204,.08); }
.home-capability-list > a:nth-child(2) > span { background: #f1edfa; color: #4a3b98; box-shadow: inset 0 0 0 1px rgba(74,59,152,.08); }
.home-capability-list > a:nth-child(3) > span { background: #e8f7f1; color: #08765a; box-shadow: inset 0 0 0 1px rgba(8,118,90,.08); }
.home-capability-list > a:nth-child(4) > span { background: #edf3fb; color: #31577f; box-shadow: inset 0 0 0 1px rgba(49,87,127,.08); }
.home-capability-list strong,.home-capability-list small { display: block; }
.home-capability-list strong { color: #172843; font-size: 16px; line-height: var(--qc-leading-heading); }
.home-capability-list small { margin-top: 5px; color: #64748b; font-size: 11px; line-height: var(--qc-leading-body); }
.home-capability-list b { color: var(--qc-blue-strong); font-size: 11px; white-space: nowrap; }
.home-components { position: relative; isolation: isolate; }
.home-components::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); border-top: 1px solid #dfeaf5; border-bottom: 1px solid #dfeaf5; background: linear-gradient(135deg,#f7fcff,#eef8fc 48%,#f5f2ff); }
.home-components__layout { display: grid; grid-template-columns: minmax(320px,.85fr) minmax(0,1.15fr); gap: 18px; }
.home-components__featured { border-color: #c8e6f4; box-shadow: 0 22px 50px rgba(18,58,91,.1); }
.home-components__featured .q-card__header,.home-components__featured .q-card__body,.home-components__featured .q-card__footer { padding: 22px 24px; }
.home-components__featured .q-card__title { max-width: 520px; color: #10213e; font-size: clamp(24px,2.5vw,34px); letter-spacing: -.025em; }
.home-components__featured .q-card__text { max-width: 600px; font-size: 13px; }
.home-components__status { color: var(--qc-blue-strong); font-family: monospace; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.home-components__tags { flex-wrap: wrap; margin-top: 24px; }
.home-components__catalog { min-width: 0; }
.home-components__catalog > div { min-height: 242px; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px; overflow: hidden; border: 1px solid #d9e6f0; border-radius: 14px; background: rgba(255,255,255,.9); box-shadow: 0 12px 30px rgba(20,55,90,.05); transition: border-color .2s ease,box-shadow .2s ease,transform .2s ease; }
.home-components__catalog > div:hover { border-color: #9edff1; box-shadow: 0 20px 40px rgba(20,55,90,.11); transform: translateY(-3px); }
.home-components__catalog > div > span,.home-components__catalog > div > strong,.home-components__catalog > div > small { display: block; }
.home-components__catalog > div > span { color: var(--qc-blue-strong); font-family: monospace; font-size: 9px; font-weight: 800; }
.home-components__catalog > div > strong { margin-top: 8px; color: #172843; font-size: 15px; line-height: var(--qc-leading-heading); }
.home-components__catalog > div > small { margin-top: 5px; color: #687892; font-size: 11px; }
.home-component-preview { position: relative; height: 112px; margin: -3px -2px 16px; perspective: 700px; }
.home-component-preview::before { content: ""; position: absolute; inset: 10px 8px 0; border-radius: 12px; background: radial-gradient(circle at 78% 12%,rgba(35,200,250,.28),transparent 32%),linear-gradient(145deg,#eaf6ff,#f4f0ff); transform: rotateX(9deg) rotateY(-8deg); transform-origin: bottom center; box-shadow: 0 17px 28px rgba(24,55,94,.16); transition: transform .28s ease,box-shadow .28s ease; }
.home-components__catalog > div:hover .home-component-preview::before { transform: rotateX(3deg) rotateY(-2deg) translateY(-3px); box-shadow: 0 20px 34px rgba(24,55,94,.2); }
.home-component-preview i,.home-component-preview b,.home-component-preview em { position: absolute; z-index: 1; display: block; border-radius: 5px; transform: rotateX(9deg) rotateY(-8deg); transform-origin: bottom center; transition: transform .28s ease; }
.home-components__catalog > div:hover .home-component-preview i,.home-components__catalog > div:hover .home-component-preview b,.home-components__catalog > div:hover .home-component-preview em { transform: rotateX(3deg) rotateY(-2deg) translateY(-3px); }
.home-component-preview--card i { inset: 28px 46% 24px 24px; background: #fff; box-shadow: 0 5px 14px rgba(30,64,105,.14); }
.home-component-preview--card b { width: 48px; height: 12px; top: 35px; right: 25px; background: #b8edda; }
.home-component-preview--card em { height: 25px; right: 25px; bottom: 27px; left: 56%; background: #d7edfa; }
.home-component-preview--nav i { top: 27px; right: 23px; left: 23px; height: 19px; background: #122a50; }
.home-component-preview--nav b { top: 54px; left: 27px; width: 54px; height: 37px; background: #fff; box-shadow: 0 5px 14px rgba(30,64,105,.14); }
.home-component-preview--nav em { right: 28px; bottom: 27px; left: 92px; height: 10px; background: linear-gradient(90deg,#29bfe8 38%,#d8e4ef 38%); }
.home-component-preview--modal i { inset: 27px 36px 22px; background: rgba(16,33,62,.2); }
.home-component-preview--modal b { inset: 38px 57px 31px; background: #fff; box-shadow: 0 7px 18px rgba(30,64,105,.2); }
.home-component-preview--modal em { width: 50px; height: 9px; right: 66px; bottom: 39px; background: #8e7de0; }
.home-component-preview--form i { top: 29px; left: 25px; width: 42%; height: 13px; border: 1px solid #aec8de; background: #fff; }
.home-component-preview--form b { top: 51px; left: 25px; width: 42%; height: 13px; border: 1px solid #aec8de; background: #fff; }
.home-component-preview--form em { top: 29px; right: 25px; width: 37%; height: 48px; background: repeating-linear-gradient(#fff 0 10px,#d8e5f0 10px 11px); }
.home-component-preview--progress i { top: 29px; right: 26px; left: 26px; height: 8px; background: linear-gradient(90deg,#21b9e7 68%,#dbe6ef 68%); }
.home-component-preview--progress b { top: 50px; left: 26px; width: 44px; height: 39px; background: #fff; box-shadow: 0 5px 14px rgba(30,64,105,.14); }
.home-component-preview--progress em { top: 50px; right: 26px; left: 79px; height: 39px; background: linear-gradient(135deg,#c7f0e2,#d8ebfa); }
.home-components-carousel { overflow: hidden; border-color: #c8e3ef; background: #fff; box-shadow: 0 26px 60px rgba(18,58,91,.12); }
.home-components-carousel .q-carousel__slide { min-height: 440px; }
.home-component-slide { min-height: 440px; display: grid; grid-template-columns: minmax(0,1.35fr) minmax(300px,.65fr); align-items: stretch; background: linear-gradient(145deg,#f4fbff,#f5f1fb); }
.home-component-slide > img { width: 100%; height: 100%; min-height: 440px; display: block; object-fit: cover; object-position: center; border-right: 1px solid #dce8f1; }
.home-component-slide > div { display: flex; flex-direction: column; justify-content: center; padding: clamp(34px,5vw,68px); }
.home-component-slide > div > span { color: var(--qc-blue-strong); font-size: .75rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.home-component-slide h3 { margin: 14px 0 10px; color: #10213e; font-size: clamp(1.65rem,3vw,2.5rem); line-height: 1.08; letter-spacing: -.035em; }
.home-component-slide p { margin: 0; color: #5d6e87; font-size: .95rem; line-height: 1.65; }
.home-component-slide a { align-self: flex-start; margin-top: 25px; color: var(--qc-blue-strong); font-size: .875rem; font-weight: 800; }
.home-components-carousel .q-carousel__control { width: 48px; height: 48px; border-color: #b9d4e6; color: #173c69; font-size: 1.5rem; box-shadow: 0 10px 22px rgba(20,55,90,.15); }
.home-components-carousel .q-carousel__indicator,.home-components-carousel .q-carousel__indicator[aria-current="true"] { width: 28px; height: 28px; display: grid; place-items: center; background: transparent; }
.home-components-carousel .q-carousel__indicator::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: #94a7bb; transition: width .2s ease,background .2s ease; }
.home-components-carousel .q-carousel__indicator[aria-current="true"]::before { width: 20px; background: var(--qc-blue-strong); }
.home-templates { position: relative; isolation: isolate; }
.home-templates::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); border-top: 1px solid #e3eaf1; border-bottom: 1px solid #e3eaf1; background: #f7f9fc; }
.home-templates__all { display: inline-flex; align-items: center; gap: 9px; margin-top: 14px; color: var(--qc-blue-strong); font-size: 12px; font-weight: 800; }
.home-templates__all span { font-size: 18px; }
.home-template-deck { position: relative; min-height: 510px; display: grid; place-items: center; align-content: center; gap: 26px; margin-top: 28px; padding: 54px 28px 34px; overflow: hidden; border: 1px solid rgba(134,173,201,.22); border-radius: 20px; background: radial-gradient(circle at 50% 32%,rgba(46,126,173,.3),transparent 38%),linear-gradient(155deg,#091521 0%,#11283b 55%,#0a1927 100%); box-shadow: 0 24px 48px rgba(12,31,52,.18); }
.home-template-deck::before { content: ""; position: absolute; left: 9%; right: 9%; top: 62%; height: 1px; background: linear-gradient(90deg,transparent,rgba(138,190,221,.32),transparent); }
.home-template-deck::after { content: ""; position: absolute; left: 14%; right: 14%; top: 57%; height: 96px; border-radius: 50%; background: rgba(4,10,18,.7); filter: blur(32px); transform: perspective(500px) rotateX(72deg); }
.home-template-deck__screens { position: relative; z-index: 2; width: 100%; min-height: 325px; display: flex; align-items: center; justify-content: center; perspective: 780px; perspective-origin: 50% 50%; transform-style: preserve-3d; }
.home-template-deck__card { position: relative; flex: 0 0 clamp(210px,20vw,310px); height: clamp(145px,13.2vw,205px); margin: 0 0 0 -105px; overflow: hidden; border: 1px solid rgba(194,218,232,.58); border-radius: 9px; background: #101827; box-shadow: 0 20px 40px rgba(0,0,0,.42); cursor: pointer; transform-origin: center center; transform-style: preserve-3d; will-change: translate,scale,filter; transition: border-color .28s ease,box-shadow .42s cubic-bezier(.22,1,.36,1),transform .42s cubic-bezier(.22,1,.36,1),filter .42s ease; }
.home-template-deck__card::after { content: ""; position: absolute; right: 28%; bottom: 0; left: 28%; height: 3px; border-radius: 999px 999px 0 0; background: #36c5ef; opacity: 0; transform: scaleX(.35); transition: opacity .24s ease,transform .32s ease; }
.home-template-deck__card.is-active::after { opacity: 1; transform: scaleX(1); }
.home-template-deck__card:focus-visible { outline: 3px solid #78dcf7; outline-offset: 5px; }
.home-template-deck__screens.is-reordering .home-template-deck__card { transition: none !important; }
.home-template-deck__control { position: absolute; z-index: 20; top: 50%; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(169,211,233,.42); border-radius: 50%; background: rgba(7,20,33,.86); color: #dff7ff; cursor: pointer; box-shadow: 0 12px 26px rgba(0,0,0,.3); transform: translateY(-50%); transition: border-color .2s ease,background .2s ease,color .2s ease,transform .2s ease; }
.home-template-deck__control--prev { left: 12px; }
.home-template-deck__control--next { right: 12px; }
.home-template-deck__control:hover,.home-template-deck__control:focus-visible { border-color: #70d8f7; background: #119fd2; color: #fff; outline: 0; transform: translateY(-50%) scale(1.07); }
.home-template-deck__control span { font-size: 18px; line-height: 1; }
.home-template-deck__card:nth-of-type(1) { margin-left: 0; }
.home-template-deck__card img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top center; transition: filter .3s ease,transform .3s ease; }
.home-template-deck__card:nth-of-type(1) { z-index: 1; filter: saturate(.54) brightness(.58); transform: translate3d(0,32px,-260px); }
.home-template-deck__card:nth-of-type(2) { z-index: 2; filter: saturate(.66) brightness(.7); transform: translate3d(0,22px,-165px); }
.home-template-deck__card:nth-of-type(3) { z-index: 3; filter: saturate(.84) brightness(.84); transform: translate3d(0,9px,-68px); }
.home-template-deck__card:nth-of-type(4) { z-index: 7; border-color: rgba(165,216,238,.96); transform: translate3d(0,-24px,118px) scale(1.06); box-shadow: 0 34px 64px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.1); }
.home-template-deck__card:nth-of-type(5) { z-index: 3; filter: saturate(.84) brightness(.84); transform: translate3d(0,9px,-68px); }
.home-template-deck__card:nth-of-type(6) { z-index: 2; filter: saturate(.66) brightness(.7); transform: translate3d(0,22px,-165px); }
.home-template-deck__card:nth-of-type(7) { z-index: 1; filter: saturate(.54) brightness(.58); transform: translate3d(0,32px,-260px); }
.home-template-deck__card:hover { z-index: 10; filter: none; border-color: #a6def3; transform: translate3d(0,-22px,126px) scale(1.04); box-shadow: 0 36px 68px rgba(0,0,0,.58),0 0 0 1px rgba(255,255,255,.12); }
.home-template-deck__card:hover img { transform: scale(1.03); }
.home-template-deck__actions { position: relative; z-index: 9; width: min(100%,660px); display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 36px; padding-top: 21px; border-top: 1px solid rgba(184,213,230,.2); }
.home-template-deck__meta { min-width: 0; display: grid; gap: 4px; }
.home-template-deck__meta span { color: #70c8eb; font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.home-template-deck__meta strong { color: #fff; font-size: 1.0625rem; line-height: 1.25; }
.home-template-deck__meta small { color: #91a8b8; font-family: monospace; font-size: .625rem; font-weight: 700; letter-spacing: .08em; }
.home-template-deck__buttons { display: flex; gap: 8px; }
.home-template-deck__actions a { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 15px; border-radius: 8px; font-size: .75rem; font-weight: 800; }
.home-template-deck__primary { background: #119fd2; color: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.22); }
.home-template-deck__primary:hover { background: #35b9e6; color: #071522; }
.home-template-deck__secondary { border: 1px solid rgba(190,218,233,.34); background: rgba(255,255,255,.05); color: #dbeaf2; }
.home-template-deck__secondary:hover { border-color: rgba(145,210,238,.72); background: rgba(255,255,255,.09); color: #fff; }
.components-overview-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin-top: 18px; overflow: hidden; border: 1px solid #d7e5ef; border-radius: 15px; background: linear-gradient(100deg,#f7fbff,#f8f6ff); box-shadow: 0 14px 34px rgba(20,55,90,.05); }
.components-overview-stats > div { min-height: 112px; display: flex; flex-direction: column; justify-content: center; padding: 20px 24px; border-right: 1px solid #dfe8f1; }
.components-overview-stats > div:last-child { border-right: 0; }
.components-overview-stats strong { color: var(--qc-blue-strong); font-size: clamp(28px,3vw,42px); line-height: 1; letter-spacing: -.05em; }
.components-overview-stats span { margin-top: 8px; color: #60708a; font-size: 10px; font-weight: 700; line-height: 1.45; }
.components-blueprint-section { position: relative; }
.components-blueprint { display: grid; grid-template-columns: minmax(0,1fr) 28px minmax(0,1fr) 28px minmax(0,1fr) 34px minmax(0,1.08fr); gap: 10px; align-items: stretch; margin-top: 30px; }
.components-blueprint__step,.components-blueprint__result { min-width: 0; min-height: 240px; display: flex; flex-direction: column; padding: 24px; border: 1px solid #d8e5ef; border-radius: 17px; background: #fff; box-shadow: 0 14px 34px rgba(20,55,90,.055); }
.components-blueprint__step > span,.components-blueprint__result > span { color: var(--qc-blue-strong); font-size: 8px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.components-blueprint__step > strong,.components-blueprint__result > strong { margin: 13px 0 17px; color: #10213e; font-size: 18px; line-height: var(--qc-leading-heading); }
.components-blueprint__step code { width: fit-content; max-width: 100%; margin-bottom: 7px; padding: 6px 8px; border-radius: 7px; background: #edf4fa; color: #285d8d; font-size: 9px; overflow-wrap: anywhere; }
.components-blueprint__step p,.components-blueprint__result p { margin: auto 0 0; color: #66758d; font-size: 10px; line-height: var(--qc-leading-body); }
.components-blueprint__step--utilities { background: linear-gradient(150deg,#fff,#f8f5ff); }
.components-blueprint__step--utilities > span { color: var(--qc-purple); }
.components-blueprint__step--behavior { background: linear-gradient(150deg,#fff,#f0fbf7); }
.components-blueprint__step--behavior > span { color: #12815e; }
.components-blueprint__operator { display: grid; place-items: center; color: #95a9bd; font-size: 24px; }
.components-blueprint__operator--result { color: var(--qc-blue-strong); }
.components-blueprint__result { justify-content: center; border-color: #8fd8ee; background: radial-gradient(circle at 90% 10%,rgba(86,213,242,.2),transparent 36%),linear-gradient(145deg,#eaf8fd,#f3f0ff); }
.components-blueprint__result > strong { color: var(--qc-blue-strong); font-size: 21px; }
.components-behavior-levels { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-top: 16px; }
.components-behavior-levels > div { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 12px; align-items: start; padding: 17px; border: 1px solid #dfe9f1; border-radius: 13px; background: #fff; }
.components-behavior-levels p { margin: 0; color: #687892; font-size: 10px; line-height: 1.55; }
.components-behavior-levels p strong { color: #243753; }
.components-map-section { position: relative; isolation: isolate; }
.components-map-section::before { content: none; }
.components-family-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 30px; }
.components-family-card { position: relative; min-height: 230px; display: flex; flex-direction: column; padding: 28px; overflow: hidden; border: 1px solid #d9e6f0; border-radius: 18px; background: #fff; color: #172843; box-shadow: 0 16px 38px rgba(20,55,90,.06); transition: transform .22s ease,border-color .22s ease,box-shadow .22s ease; }
.components-family-card::after { content: ""; position: absolute; right: -45px; bottom: -65px; width: 160px; height: 160px; border-radius: 50%; opacity: .12; background: currentColor; }
.components-family-card:hover { transform: translateY(-4px); border-color: #a9dff1; box-shadow: 0 22px 48px rgba(20,55,90,.1); }
.components-family-card--blue { color: #0878b5; }
.components-family-card--purple { color: var(--qc-purple); }
.components-family-card--green { color: #12815e; }
.components-family-card--cyan { color: #008fcc; }
.components-family-card__number { color: currentColor; font-family: monospace; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.components-family-card strong { max-width: 390px; margin-top: 20px; color: #10213e; font-size: clamp(21px,2.2vw,29px); line-height: 1.12; letter-spacing: -.035em; }
.components-family-card p { max-width: 430px; margin: 12px 0 24px; color: #61718a; font-size: 12px; line-height: var(--qc-leading-body); }
.components-family-card small { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: auto; color: currentColor; font-size: 10px; font-weight: 800; line-height: 1.5; }
.components-family-card small b { font-size: 18px; }
.components-docs .content-section > .section-heading { max-width: 880px; }
.component-showcase-grid { margin-top: 30px; }
.component-showcase-card { min-width: 0; display: flex; flex-direction: column; align-self: stretch; overflow: visible; padding: 0; }
.component-showcase-card > header { display: grid; grid-template-columns: 36px minmax(0,1fr); gap: 12px; align-items: center; padding: 18px 20px; border-bottom: 1px solid #e1e8f0; }
.component-showcase-card > header > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: #eaf8fd; color: var(--qc-blue-strong); font-family: monospace; font-size: 9px; font-weight: 800; }
.component-showcase-card > header h3 { margin: 0; color: #10213e; font-size: 15px; }
.component-showcase-card > header h3 a { display: inline-flex; align-items: center; gap: 7px; color: inherit; }
.component-showcase-card > header h3 a::after { content: "→"; color: var(--qc-blue-strong); font-size: 12px; opacity: 0; transform: translateX(-4px); transition: opacity .18s ease,transform .18s ease; }
.component-showcase-card:hover > header h3 a,.component-showcase-card > header h3 a:hover { color: var(--qc-blue-strong); }
.component-showcase-card:hover > header h3 a::after,.component-showcase-card > header h3 a:focus-visible::after { opacity: 1; transform: translateX(0); }
.component-showcase-card > header code { display: inline-block; margin-top: 3px; color: #52708d; font-size: 9px; }
.component-demo-box { min-height: 210px; flex: 1 1 auto; display: grid; align-items: center; padding: 24px; overflow: visible; background: linear-gradient(145deg,#f8fbff,#f4f1ff); }
.component-demo-box--tall { min-height: 270px; align-items: start; padding-top: 72px; }
.component-showcase-card > pre { min-height: 112px; flex: 0 0 auto; margin: 0; padding: 18px 20px; overflow: auto; border-top: 1px solid #25344f; border-radius: 0 0 14px 14px; background: var(--qc-code); color: #dbeafe; font-size: 9px; line-height: 1.6; white-space: pre-wrap; }
.component-showcase-card--wide { grid-column: 1 / -1; }
.component-demo-box .q-card { width: min(100%,380px); margin-inline: auto; }
.component-demo-box .q-alert,.component-demo-box .q-navbar,.component-demo-box .q-tabs,.component-demo-box .q-accordion,.component-demo-box form,.component-demo-box .q-table-wrap { width: 100%; }
.component-demo-box .q-table-wrap { min-width: 0; max-width: 100%; overflow-x: auto; overflow-y: hidden; contain: inline-size; }
.component-demo-box .q-table { min-width: 100%; table-layout: fixed; }
.component-demo-box .q-table th,.component-demo-box .q-table td { overflow-wrap: anywhere; }
.component-demo-box form .btn { align-self: end; }
.preview-container.doc-component-preview { min-height: 390px; padding: 30px; text-align: left; }
.doc-component-preview__inner { width: min(100%,620px); display: block; }
.doc-preview-toolbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.result-panel .doc-mobile-preview-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid #cbdbea; border-radius: 8px; background: #fff; color: #0878b5; font-size: 9px; font-weight: 800; letter-spacing: .02em; text-transform: none; transition: border-color .2s ease,background .2s ease,color .2s ease; }
.result-panel .doc-mobile-preview-toggle:hover,.result-panel .doc-mobile-preview-toggle:focus-visible { border-color: #7dd8f4; background: #eaf8fd; color: #05638f; outline: 0; }
.result-panel .doc-mobile-preview-toggle[aria-pressed="true"] { border-color: #21b9eb; background: #def6fd; color: #065f86; }
.result-panel .doc-mobile-preview-toggle > span:first-child { font-size: 14px; line-height: 1; transform: rotate(180deg); }
.doc-component-preview,.doc-component-preview__inner { transition: min-height .28s ease,width .28s ease,max-width .28s ease,padding .28s ease,border-color .28s ease,box-shadow .28s ease; }
.doc-component-preview.is-mobile-preview { min-height: 640px; padding: 28px 18px; }
.doc-component-preview.is-mobile-preview .doc-component-preview__inner { position: relative; width: min(100%,390px); min-height: 570px; display: flex; align-items: flex-start; padding: 38px 14px 18px; border: 1px solid #bbd5e8; border-radius: 28px; background: #f8fbff; box-shadow: 0 22px 52px rgba(20,55,90,.16); }
.doc-component-preview.is-mobile-preview .doc-component-preview__inner::before { content: ""; position: absolute; top: 16px; left: 50%; width: 56px; height: 5px; border-radius: 999px; background: #bed0df; transform: translateX(-50%); }
.doc-component-preview__inner > .q-card { width: min(100%,420px); margin-inline: auto; }
.doc-card-preview > .q-card { width: min(100%,620px); }
.doc-component-preview__inner > .q-alert,
.doc-component-preview__inner > .q-navbar,
.doc-component-preview__inner > .q-tabs,
.doc-component-preview__inner > .q-accordion,
.doc-component-preview__inner > form,
.doc-component-preview__inner > .q-table-wrap { width: 100%; }
.doc-component-preview__inner > .q-toast,
.doc-component-preview__inner > nav:not(.q-navbar),
.doc-component-preview__inner > .display-flex,
.doc-component-preview__inner > .q-dropdown { display: block; width: max-content; margin-inline: auto; }
.doc-component-preview__inner > .grid,
.doc-component-preview__inner > .q-progress-group,
.doc-component-preview__inner > .q-carousel { width: 100%; }
.doc-component-preview__inner > .q-carousel { max-width: 620px; margin-inline: auto; }
.component-detail-docs .code-panel pre { min-height: 455px; }
.component-detail-docs .preview-stage { min-height: 455px; display: flex; flex: 1 1 auto; flex-direction: column; }
.component-detail-docs .preview-container.doc-component-preview { flex: 1 1 auto; }
.component-detail-docs .example-workbench { align-items: stretch; }
.component-detail-docs .result-panel { min-height: 100%; display: flex; flex-direction: column; }
.home-run-feature { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0,.72fr) minmax(520px,1.28fr); gap: clamp(42px,6vw,86px); align-items: center; padding-top: 104px; padding-bottom: 104px; border-top: 0; color: #fff; }
.home-run-feature::before { content: ""; position: absolute; z-index: -2; inset: 0 calc(50% - 50vw); background: radial-gradient(circle at 88% 15%,rgba(35,200,250,.23),transparent 30%),radial-gradient(circle at 6% 92%,rgba(49,39,130,.55),transparent 38%),linear-gradient(135deg,#071126,#112957 56%,#271f68); }
.home-run-feature::after { content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); opacity: .12; background-image: linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to right,transparent,#000 22%,#000 78%,transparent); }
.home-run-feature .home-eyebrow { color: var(--qc-blue-light); }
.home-run-feature h2 { margin: 0; color: #fff; font-size: clamp(38px,4.5vw,58px); line-height: 1.06; letter-spacing: -.045em; }
.home-run-feature h2 span { display: block; color: var(--qc-blue-light); }
.home-run-feature__copy > p:not(.home-eyebrow) { max-width: 620px; margin: 22px 0 0; color: #c2d1e5; font-size: 15px; line-height: 1.7; }
.home-run-feature__copy > p code { padding: 2px 5px; border-radius: 5px; background: rgba(255,255,255,.1); color: #d9f7ff; }
.home-run-feature__tokens { display: flex; flex-wrap: wrap; gap: 8px; margin: 25px 0 29px; }
.home-run-feature__tokens code { padding: 7px 10px; border: 1px solid rgba(130,220,247,.25); border-radius: 8px; background: rgba(255,255,255,.08); color: #d9f7ff; font-size: 10px; }
.home-run-feature__visual { position: relative; padding: 20px; border: 1px solid rgba(255,255,255,.22); border-radius: 24px; background: linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.055)); box-shadow: 34px 34px 82px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.12); backdrop-filter: blur(14px); transform: perspective(1400px) rotateY(-6deg) rotateX(2deg); transform-origin: right center; transition: transform .35s ease,box-shadow .35s ease; }
.home-run-feature__visual:hover { box-shadow: 22px 30px 70px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.12); transform: perspective(1400px) rotateY(-3deg) rotateX(1deg) translateY(-3px); }
.home-run-feature__visual::before { content: ""; position: absolute; top: -6px; right: 32px; width: 82px; height: 12px; border-radius: 999px; background: rgba(35,200,250,.34); filter: blur(10px); }
.home-run-feature__visual > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 3px 3px 16px; color: #c8d7ea; font-size: 10px; }
.home-run-feature__visual > header span { color: var(--qc-blue-light); font-weight: 800; letter-spacing: .1em; }
.home-run-feature__visual > header strong { font-weight: 600; }
.home-run-feature__stage { position: relative; min-height: 326px; display: grid; align-items: center; padding: 62px 26px 25px; overflow: hidden; border: 1px solid rgba(176,224,255,.5); border-radius: 18px; background: radial-gradient(circle at 80% 12%,rgba(129,112,230,.13),transparent 31%),linear-gradient(145deg,rgba(238,248,255,.98),rgba(244,240,255,.98)); }
.home-run-feature__stage::before { content: ""; position: absolute; z-index: 0; top: 50%; right: 9%; left: 9%; height: 2px; background: linear-gradient(90deg,rgba(0,158,226,.12),rgba(0,158,226,.55) 40%,rgba(49,39,130,.5) 60%,rgba(49,39,130,.12)); transform: translateY(12px); }
.home-run-feature__stage::after { content: "ENTRA  ·  ÁREA VISIBLE  ·  SALE"; position: absolute; z-index: 0; right: 0; bottom: 13px; left: 0; color: #8ba0b8; font-family: monospace; font-size: 7px; font-weight: 800; letter-spacing: .16em; text-align: center; }
.home-run-feature__area { position: absolute; top: 18px; left: 20px; padding: 5px 8px; border-radius: 999px; background: #dff6fc; color: var(--qc-blue-strong); font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.home-run-feature__modes { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; perspective: 1000px; }
.home-run-feature__modes article { position: relative; min-height: 190px; display: grid; place-items: center; align-content: center; gap: 9px; padding: 22px; border: 1px solid #cbddec; border-radius: 16px; background: rgba(255,255,255,.94); color: #152541; text-align: center; box-shadow: 0 18px 38px rgba(24,55,94,.13); transform: rotateY(3deg); transition: transform .25s ease,box-shadow .25s ease; }
.home-run-feature__modes article::before { content: "01"; position: absolute; top: 13px; left: 15px; color: #94a5b8; font-family: monospace; font-size: 8px; font-weight: 800; }
.home-run-feature__modes article:last-child::before { content: "02"; }
.home-run-feature__modes article:last-child { transform: rotateY(-3deg); }
.home-run-feature__modes article:hover { box-shadow: 0 24px 46px rgba(24,55,94,.18); transform: translateY(-5px) rotateY(0); }
.home-run-feature__modes article:last-child { border-color: #b8afe0; }
.home-run-feature__badge { padding: 5px 9px; border-radius: 999px; background: #def6fc; color: var(--qc-blue-strong); font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.home-run-feature__badge--back { background: #ece9f8; color: var(--qc-purple); }
.home-run-feature__arrow { color: var(--qc-blue); font-size: 30px; font-weight: 700; line-height: 1; animation: home-run-forward 1.8s ease-in-out infinite; }
.home-run-feature__modes article:last-child .home-run-feature__arrow { color: var(--qc-purple); }
.home-run-feature__modes article:last-child .home-run-feature__arrow { animation-name: home-run-back; }
.home-run-feature__modes strong { font-size: 15px; }
.home-run-feature__modes small { color: #64748b; font-size: 10px; }
@keyframes home-run-forward { 0%,100% { transform: translateX(-4px); opacity: .65; } 50% { transform: translateX(5px); opacity: 1; } }
@keyframes home-run-back { 0%,100% { transform: scaleX(.86); opacity: .65; } 50% { transform: scaleX(1.12); opacity: 1; } }
.home-cta { display: flex; align-items: center; justify-content: space-between; gap: 50px; margin: 20px 0 100px; padding: 54px; overflow: hidden; border-radius: 22px; background: radial-gradient(circle at 85% 20%,rgba(35,200,250,.28),transparent 35%),linear-gradient(135deg,#0b1736,#112c59); color: #fff; }
.home-cta .home-title-accent { color: var(--qc-blue-light); }
.home-cta .home-eyebrow { color: #23c8fa; }
.home-cta h2 { max-width: 830px; color: #fff; font-size: clamp(30px,3.7vw,48px); }
.home-button--light { flex: 0 0 auto; background: #fff; color: #12345e; box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.home-install { position: relative; isolation: isolate; padding-top: 118px; padding-bottom: 118px; border-top: 0; color: #fff; }
.home-install::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); background: radial-gradient(circle at 88% 8%,rgba(35,200,250,.23),transparent 29%),radial-gradient(circle at 12% 85%,rgba(49,39,130,.22),transparent 32%),linear-gradient(145deg,#071126,#102a51 58%,#16255a); }
.home-install::after { content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); opacity: .13; background-image: linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px); background-size: 40px 40px; mask-image: linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent); }
.home-install .home-eyebrow { color: #23c8fa; }
.home-install .home-section__heading h2 { color: #fff; }
.home-install .home-title-accent { color: var(--qc-blue-light); }
.home-install .home-section__heading > p:last-child { color: #bdcae0; }
.home-install__notice { display: flex; gap: 14px; align-items: center; margin-bottom: 22px; padding: 15px 18px; border: 1px solid rgba(132,207,255,.38); border-radius: 12px; background: rgba(220,242,255,.1); backdrop-filter: blur(10px); }
.home-install__notice span { flex: 0 0 auto; min-height: 42px; display: inline-flex; align-items: center; gap: 10px; padding: 9px 17px 9px 12px; border: 1px solid rgba(255,255,255,.7); border-radius: 999px; background: linear-gradient(135deg,#22c8fa 0%,#009ee2 55%,#087fd2 100%); color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-shadow: 0 1px 2px rgba(0,38,74,.28); text-transform: uppercase; box-shadow: 0 10px 24px rgba(0,158,226,.35),inset 0 1px rgba(255,255,255,.32); }
.home-install__notice span::before { content: ""; width: 10px; height: 10px; flex: 0 0 auto; border: 3px solid rgba(255,255,255,.42); border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(35,200,250,.18); }
.home-install__notice p { margin: 0; color: #dbe8f8; font-size: 12px; line-height: var(--qc-leading-body); }
.home-install-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.home-install-card { min-width: 0; min-height: 330px; display: flex; flex-direction: column; padding: 23px; overflow: hidden; border: 1px solid rgba(255,255,255,.2); border-radius: 16px; background: rgba(255,255,255,.97); box-shadow: 0 20px 46px rgba(0,0,0,.16); }
.home-install-card--required { border-color: #7ac9ff; box-shadow: 0 22px 54px rgba(0,0,0,.2),0 0 0 2px rgba(65,181,255,.16); }
.home-install-card header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.home-install-card header > div { display: flex; align-items: center; gap: 10px; }
.home-install-card header span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; background: #eaf5ff; color: var(--qc-blue-strong); font-size: 9px; font-weight: 800; }
.home-install-card header strong { color: #172843; font-size: 13px; line-height: var(--qc-leading-heading); }
.home-install-card header small { padding: 4px 7px; border-radius: 999px; background: #f1f5f9; color: #718096; font-size: 8px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.home-install-card--required header small { background: #e5f9f1; color: #07805c; }
.home-install-card > p { margin: 18px 0; color: #60708a; font-size: 12px; line-height: var(--qc-leading-body); }
.home-install-card pre { min-height: 155px; display: flex; align-items: center; margin: auto 0 0; padding: 18px; overflow: auto; border: 1px solid #263553; border-radius: 11px; background: #080e20; color: #dbeafe; font-size: 10px; line-height: var(--qc-leading-code); white-space: pre-wrap; overflow-wrap: anywhere; }
.home-install-card pre code { min-width: 0; }
.home-install__order { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-top: 16px; padding: 14px 17px; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; background: rgba(255,255,255,.07); }
.home-install__order span { margin-right: 5px; color: #aebfd7; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.home-install__order code { padding: 5px 8px; border-radius: 7px; background: rgba(109,199,255,.14); color: #cdeeff; font-size: 10px; }
.home-install__order b { color: #7185a5; font-size: 12px; }
.home-install-alternatives { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 22px; }
.home-install-alternatives article { min-width: 0; display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 16px; padding: 22px; border: 1px solid rgba(255,255,255,.15); border-radius: 15px; background: rgba(255,255,255,.08); backdrop-filter: blur(12px); }
.home-install-alternatives__icon { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(116,204,255,.3); border-radius: 12px; background: rgba(79,184,255,.14); color: #8ed5ff; font-family: monospace; font-size: 17px; font-weight: 800; }
.home-install-alternatives span { color: #62c7ff; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.home-install-alternatives h3 { margin: 5px 0 7px; color: #fff; font-size: 16px; line-height: var(--qc-leading-heading); }
.home-install-alternatives p { margin: 0; color: #b9c8dd; font-size: 11px; line-height: var(--qc-leading-body); }
.home-install-alternatives pre { grid-column: 1 / -1; min-height: 82px; display: flex; align-items: center; margin: 2px 0 0; padding: 15px; overflow: auto; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: rgba(4,9,24,.72); color: #dbeafe; font-size: 10px; line-height: var(--qc-leading-code); white-space: pre-wrap; }
.home-install-start { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 22px; padding: 24px; border: 1px solid rgba(116,204,255,.28); border-radius: 15px; background: linear-gradient(100deg,rgba(0,158,226,.18),rgba(49,39,130,.13)); }
.home-install-start span,.home-install-start strong,.home-install-start p { display: block; }
.home-install-start span { color: #62c7ff; font-size: 9px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.home-install-start strong { margin-top: 5px; color: #fff; font-size: 16px; line-height: var(--qc-leading-heading); }
.home-install-start p { margin: 5px 0 0; color: #b9c8dd; font-size: 11px; line-height: var(--qc-leading-body); }
.home-install-start > a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 12px; padding: 12px 15px; border-radius: 10px; background: #fff; color: #173c69; font-size: 11px; font-weight: 800; }
.home-install-start > a b { color: var(--qc-blue-strong); font-size: 16px; }
.home-install-download { display: grid; grid-template-columns: minmax(280px,.92fr) minmax(360px,1.08fr); gap: 18px 34px; padding: clamp(25px,4vw,44px); border: 1px solid rgba(132,207,255,.38); border-radius: 22px; background: linear-gradient(125deg,rgba(255,255,255,.13),rgba(255,255,255,.065)); box-shadow: 0 26px 62px rgba(0,0,0,.2); backdrop-filter: blur(14px); }
.home-install-download__intro { display: grid; grid-template-columns: 58px minmax(0,1fr); gap: 18px; align-items: start; }
.home-install-download__icon { width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid rgba(121,215,255,.38); border-radius: 17px; background: linear-gradient(145deg,rgba(35,200,250,.23),rgba(49,39,130,.18)); color: #9be8ff; font-size: 27px; font-weight: 800; box-shadow: inset 0 1px rgba(255,255,255,.16); }
.home-install-download__intro small { color: #67d2fb; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.home-install-download__intro h3 { margin: 7px 0 9px; color: #fff; font-size: clamp(24px,2.7vw,36px); line-height: var(--qc-leading-heading); letter-spacing: -.025em; }
.home-install-download__intro p { max-width: 560px; margin: 0; color: #bdcce0; font-size: 12px; line-height: var(--qc-leading-body); }
.home-install-download__files { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.home-install-download__files li { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 13px; align-items: center; padding: 15px 17px; border: 1px solid rgba(255,255,255,.12); border-radius: 13px; background: rgba(4,9,24,.35); }
.home-install-download__files li > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; background: rgba(57,183,236,.14); color: #89ddff; font-family: monospace; font-size: 9px; font-weight: 800; }
.home-install-download__files strong,.home-install-download__files small { display: block; }
.home-install-download__files strong { color: #f4f8ff; font-family: monospace; font-size: 11px; overflow-wrap: anywhere; }
.home-install-download__files small { margin-top: 4px; color: #9eb0c8; font-size: 9px; line-height: 1.45; }
.home-install-download__action { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.13); }
.home-install-download__action > span strong,.home-install-download__action > span small { display: block; }
.home-install-download__action > span strong { color: #fff; font-size: 13px; }
.home-install-download__action > span small { margin-top: 3px; color: #9eb0c8; font-size: 9px; }
.home-install-download__action > a { display: inline-flex; align-items: center; justify-content: center; gap: 13px; padding: 14px 18px; border-radius: 11px; background: #fff; color: #173c69; font-size: 11px; font-weight: 800; box-shadow: 0 13px 30px rgba(0,0,0,.16); }
.home-install-download__action > a b { color: var(--qc-blue-strong); font-size: 16px; transition: transform .2s ease; }
.home-install-download__action > a:hover b { transform: translateY(4px); }
.home-quickstart { position: relative; isolation: isolate; }
.home-quickstart::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); background: linear-gradient(180deg,#fff,#f6faff 48%,#fff); }
.home-quickstart .home-section__heading code { padding: 2px 5px; border-radius: 5px; background: #edf3f8; color: #285d8d; font-size: .84em; }
.home-quickstart__panel { display: grid; grid-template-columns: minmax(330px,.72fr) minmax(0,1.28fr); margin-top: 38px; overflow: hidden; border: 1px solid #283654; border-radius: 20px; background: #111a2e; box-shadow: 0 30px 70px rgba(11,23,54,.16); }
.home-quickstart__copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(34px,5vw,64px); background: radial-gradient(circle at 10% 12%,rgba(35,200,250,.14),transparent 34%),linear-gradient(145deg,#17243b,#202b40); color: #fff; }
.home-quickstart__label { color: var(--qc-blue-light); font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.home-quickstart__copy h3 { max-width: 460px; margin: 16px 0 13px; color: #fff; font-size: clamp(25px,2.6vw,38px); line-height: 1.12; letter-spacing: -.03em; }
.home-quickstart__copy > p { max-width: 520px; margin: 0; color: #bdcbe0; font-size: 12px; line-height: 1.7; }
.home-quickstart__copy ol { display: grid; gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; }
.home-quickstart__copy li { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 12px; align-items: start; }
.home-quickstart__copy li > b { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid rgba(82,204,245,.26); border-radius: 9px; background: rgba(35,200,250,.1); color: var(--qc-blue-light); font-family: monospace; font-size: 9px; }
.home-quickstart__copy li span,.home-quickstart__copy li strong,.home-quickstart__copy li small { display: block; }
.home-quickstart__copy li strong { color: #fff; font-size: 12px; }
.home-quickstart__copy li small { margin-top: 3px; color: #9eafc7; font-size: 10px; line-height: 1.5; }
.home-quickstart__copy li code { color: #dff8ff; }
.home-quickstart__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 29px; }
.home-quickstart__tags span { padding: 6px 8px; border: 1px solid rgba(255,255,255,.14); border-radius: 7px; background: rgba(255,255,255,.06); color: #c8d8ea; font-size: 8px; font-weight: 700; text-transform: uppercase; }
.home-quickstart__code { border-left: 1px solid #283654; background: var(--qc-code); }
.home-quickstart__code .panel-toolbar { min-height: 54px; padding-inline: 20px; }
.home-quickstart__code .panel-toolbar span { color: #91a6c7; }
.home-quickstart__code .panel-toolbar button { border-color: #354563; background: #152038; }
.home-quickstart__code pre { height: auto; min-height: 0; padding: 27px 30px; overflow: visible; font-size: 11px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.home-button span,.home-templates__all span,.home-template-card__body > a { transition: transform .2s ease; }
.home-button:hover span,.home-templates__all:hover span { transform: translateX(5px); }

@media (max-width: 1080px) {
  .home-hero { min-height: auto; grid-template-columns: 1fr; grid-template-areas: "copy" "visual"; row-gap: 45px; padding: 70px 0 90px; }
  .home-hero__copy { max-width: 820px; }
  .home-hero__visual { width: min(100%,760px); transform: none; }
  .home-card-grid--3,.home-system-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .home-install-grid { grid-template-columns: 1fr; }
  .home-install-card { min-height: 0; }
  .home-install-card pre { min-height: 100px; }
  .home-install-alternatives { grid-template-columns: 1fr; }
  .home-install-download { grid-template-columns: 1fr; }
  .home-install-download__action { grid-column: auto; }
  .home-system-card:last-child { grid-column: 1 / -1; }
  .home-components__layout { grid-template-columns: 1fr; }
  .home-component-slide { grid-template-columns: minmax(0,1.15fr) minmax(280px,.85fr); }
  .home-template-deck { min-height: 420px; padding-inline: 12px; }
  .home-template-deck__screens { min-height: 260px; }
  .home-template-deck__card { margin-left: -94px; }
  .home-run-feature { grid-template-columns: 1fr; }
  .home-run-feature__copy { max-width: 760px; }
  .home-quickstart__panel { grid-template-columns: 1fr; }
  .home-quickstart__code { border-top: 1px solid #283654; border-left: 0; }
  .home-section__heading--split { grid-template-columns: 1fr; gap: 15px; }
}
@media (max-width: 700px) {
  .components-overview-stats { grid-template-columns: 1fr; }
  .components-overview-stats > div { min-height: 92px; border-right: 0; border-bottom: 1px solid #dfe8f1; }
  .components-overview-stats > div:last-child { border-bottom: 0; }
  .components-family-grid { grid-template-columns: 1fr; }
  .components-family-card { min-height: 205px; padding: 23px; }
  .components-blueprint { grid-template-columns: 1fr; }
  .components-blueprint__step,.components-blueprint__result { min-height: 190px; }
  .components-blueprint__result { grid-column: auto; }
  .components-behavior-levels { grid-template-columns: 1fr; }
  .home-main { width: min(100% - 28px,1440px); }
  .home-hero { gap: 45px; padding: 55px 0 70px; }
  .home-hero::before { right: -14px; width: min(620px,120vw); height: auto; aspect-ratio: 1; }
  .home-system::before,
  .home-components::before,
  .home-templates::before,
  .home-run-feature::before,
  .home-run-feature::after,
  .home-install::before,
  .home-install::after,
  .home-quickstart::before { right: -14px; left: -14px; }
  .home-hero h1 { font-size: clamp(41px,13vw,60px); }
  .home-ai-ready { top: 39px; right: -79px; width: 250px; min-height: 52px; gap: 4px; }
  .home-ai-ready strong { font-size: 11px; }
  .home-ai-ready small { font-size: 7px; }
  .home-hero__lead { font-size: 16px; }
  .home-actions { align-items: stretch; flex-direction: column; }
  .home-rewrite-note { flex-direction: column; gap: 5px; }
  .home-button { width: 100%; }
  .home-metrics { gap: 18px 0; }
  .home-metrics > div { width: 50%; min-width: 0; padding: 0 14px 0 0; }
  .home-metrics > div + div { padding-left: 14px; }
  .home-metrics > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .home-hero__visual { border-radius: 16px; }
  .home-visual__canvas { padding: 24px 12px; }
  .home-code-line { grid-template-columns: 23px minmax(0,1fr); gap: 7px; }
  .home-code-line code { font-size: 9px; }
  .home-section { padding: 72px 0; }
  .home-card-grid--3,.home-system-grid { grid-template-columns: 1fr; }
  .home-capability-list { grid-template-columns: 1fr; }
  .home-capability-list > a { min-height: 132px; padding: 22px; }
  .home-install__notice { align-items: flex-start; flex-direction: column; }
  .home-install { padding-top: 82px; padding-bottom: 82px; }
  .home-install-start { align-items: flex-start; flex-direction: column; }
  .home-install-start > a { width: 100%; justify-content: space-between; }
  .home-install-download { padding: 24px 19px; }
  .home-install-download__intro { grid-template-columns: 48px minmax(0,1fr); gap: 14px; }
  .home-install-download__icon { width: 48px; height: 48px; border-radius: 14px; }
  .home-install-download__action { align-items: stretch; flex-direction: column; }
  .home-install-download__action > a { width: 100%; }
  .home-system-card:last-child { grid-column: auto; }
  .home-components__catalog { grid-template-columns: 1fr; }
  .home-components-carousel .q-carousel__slide,.home-component-slide { min-height: 0; }
  .home-component-slide { grid-template-columns: 1fr; }
  .home-component-slide > img { min-height: 0; aspect-ratio: 12 / 7; border-right: 0; border-bottom: 1px solid #dce8f1; }
  .home-component-slide > div { padding: 28px 28px 70px; }
  .home-components-carousel .q-carousel__control { top: 33%; }
  .home-template-deck { min-height: 0; gap: 22px; padding: 28px 14px 24px; }
  .home-template-deck::before,.home-template-deck::after { display: none; }
  .home-template-deck__screens { min-height: 235px; display: grid; grid-template-columns: 1fr; place-items: center; padding-inline: 42px; perspective: none; }
  .home-template-deck__card,.home-template-deck__card:first-child,.home-template-deck__card:nth-of-type(n) { display: none; width: min(100%,440px); height: auto; margin: 0; filter: none; transform: none; }
  .home-template-deck__card.is-active { display: block; grid-column: 1; }
  .home-template-deck__card img { aspect-ratio: 12 / 7; }
  .home-template-deck__control { width: 40px; height: 40px; }
  .home-template-deck__control--prev { left: 0; }
  .home-template-deck__control--next { right: 0; }
  .home-template-deck__actions { width: 100%; min-width: 0; grid-template-columns: 1fr; gap: 16px; text-align: center; }
  .home-template-deck__buttons { width: 100%; }
  .home-template-deck__actions a { flex: 1; }
  .component-showcase-card--wide { grid-column: auto; }
  .component-demo-box { min-height: 0; padding: 18px; }
  .preview-container.doc-component-preview { min-height: 300px; padding: 18px; }
  .component-detail-docs .code-panel pre,.component-detail-docs .preview-stage { min-height: 360px; }
  .home-capability-list > a { grid-template-columns: 48px minmax(0,1fr); gap: 14px; padding: 20px 16px; }
  .home-capability-list > a > span { width: 48px; height: 48px; border-radius: 13px; font-size: 15px; }
  .home-capability-list b { grid-column: 2; }
  .home-run-feature { padding-top: 82px; padding-bottom: 82px; }
  .home-run-feature__visual { padding: 13px; border-radius: 17px; transform: none; }
  .home-run-feature__visual:hover { transform: translateY(-2px); }
  .home-run-feature__visual > header { align-items: flex-start; flex-direction: column; gap: 3px; }
  .home-run-feature__stage { min-height: 0; padding: 58px 14px 14px; }
  .home-run-feature__modes { grid-template-columns: 1fr; }
  .home-run-feature__modes article,.home-run-feature__modes article:last-child { min-height: 160px; transform: none; }
  .home-quickstart__panel { margin-top: 28px; border-radius: 16px; }
  .home-quickstart__copy { padding: 30px 22px; }
  .home-quickstart__code pre { height: auto; padding: 22px 18px; overflow: visible; font-size: 9px; }
  .home-cta { align-items: flex-start; flex-direction: column; margin-bottom: 70px; padding: 34px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-run-feature__arrow { animation: none; }
  .home-system-card__link span,.home-button span,.home-templates__all span,.home-install-download__action > a b { transition: none; }
  .home-template-deck__card,.home-template-deck__card img { transition: none; }
}

/* Escala tipográfica del home: texto funcional >= .75rem y cuerpo >= .875rem. */
.home-main .home-eyebrow,.home-main .home-metrics dd,.home-main .home-card__number,.home-main .home-system-card header { font-size: .75rem; }
.home-main .home-button,.home-main .home-card p,.home-main .home-system-card > p,.home-main .home-system-card__link,.home-main .home-tag-list a,.home-main .home-capability-list small,.home-main .home-capability-list b { font-size: .875rem; }
.home-main .home-card__example code,.home-main .home-card__example--modules span,.home-main .home-card__example--result > span { font-size: .75rem; }
.home-main .home-visual__toolbar strong,.home-main .home-code-line i,.home-main .home-code-line code,.home-main .home-visual__result > span,.home-main .home-visual__result small { font-size: .75rem; }
.home-main .home-install__notice span,.home-main .home-install-download__intro small,.home-main .home-install-download__files li > span,.home-main .home-install-download__files strong,.home-main .home-install-download__files small,.home-main .home-install-download__action > span small { font-size: .75rem; }
.home-main .home-install__notice p,.home-main .home-install-download__intro p,.home-main .home-install-download__action > a { font-size: .875rem; }
.home-main .home-quickstart__label,.home-main .home-quickstart__copy li > b,.home-main .home-quickstart__copy li small,.home-main .home-quickstart__tags span { font-size: .75rem; }
.home-main .home-quickstart__copy > p,.home-main .home-quickstart__copy li strong { font-size: .875rem; }
.home-main .home-quickstart__code pre { font-size: .75rem; }
.home-main .home-run-feature__tokens code,.home-main .home-run-feature__visual > header,.home-main .home-run-feature__area,.home-main .home-run-feature__modes article::before,.home-main .home-run-feature__badge,.home-main .home-run-feature__modes small { font-size: .75rem; }
.home-main .home-run-feature__stage::after { font-size: .6875rem; }
.home-main .home-card p,.home-main .home-system-card > p,.home-main .home-capability-list small,.home-main .home-install-download__intro p,.home-main .home-install__notice p,.home-main .home-quickstart__copy > p,.home-main .home-quickstart__copy li small { line-height: 1.6; }

/* Robustez y consistencia de la documentación responsive */
.docs-shell .docs-content :is(section,article,div) { min-width: 0; }
.docs-shell .docs-content pre {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-color: #52678f #111a30;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  font-size: .75rem;
  line-height: var(--qc-leading-code);
  tab-size: 2;
}
.docs-shell .docs-content pre code {
  display: block;
  width: max-content;
  min-width: 100%;
  max-width: none;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  white-space: pre;
}
.docs-shell .docs-content pre::-webkit-scrollbar { width: 10px; height: 10px; }
.docs-shell .docs-content pre::-webkit-scrollbar-track { background: #111a30; }
.docs-shell .docs-content pre::-webkit-scrollbar-thumb { border: 2px solid #111a30; border-radius: 99px; background: #52678f; }
.docs-shell .docs-content pre::-webkit-scrollbar-corner { background: #111a30; }
.docs-shell .docs-content :is(.code-panel,.state-code-card,.icon-library-card,.filter-code-card,.spacing-responsive-code,.size-responsive-code,.radius-example-code,.border-color-methods,.z-context-code,.position-responsive-code,.animation-mode-card,.animation-run-card,.animation-run-attributes) pre {
  max-height: min(70dvh, 34rem);
}
.docs-shell .docs-content .section-heading h2 { font-size: 1.875rem; line-height: var(--qc-leading-heading); }
.docs-shell .docs-content .section-heading > p:last-child { font-size: .875rem; line-height: var(--qc-leading-body); }
.docs-shell .docs-content .doc-card > :is(h3,h4) { line-height: var(--qc-leading-heading); }
.docs-shell .docs-content .doc-card > p { line-height: var(--qc-leading-body); }

@media (max-width: 760px) {
  .docs-sidebar-inner {
    min-height: 0;
    max-height: none;
    align-items: center;
    overscroll-behavior-x: contain;
    scrollbar-color: #b5c6d9 transparent;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
  }
  .docs-sidebar nav {
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
    align-items: center;
    gap: 7px;
  }
  .docs-sidebar .sidebar-link {
    flex: 0 0 auto;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 8px 11px;
    white-space: nowrap;
  }
  .docs-sidebar-inner::-webkit-scrollbar { height: 6px; }
  .docs-sidebar-inner::-webkit-scrollbar-thumb { border-radius: 99px; background: #b5c6d9; }
  .docs-content { padding-top: 22px; padding-bottom: 58px; }
  .content-section { padding-top: 46px; }
  .section-heading { margin-bottom: 17px; }
  .docs-shell .docs-content .section-heading h2 { font-size: 1.625rem; }
  .docs-shell .docs-content .section-heading > p:last-child { font-size: .875rem; }
  .docs-shell .docs-content pre {
    min-height: 0;
    max-height: 62dvh;
    font-size: .6875rem;
    line-height: 1.65;
  }
  .docs-shell .docs-content .code-panel pre,
  .docs-shell .docs-content.component-detail-docs .code-panel pre {
    min-height: 0;
    max-height: 62dvh;
    padding: 18px 16px;
  }
  .panel-toolbar { min-height: 48px; gap: 12px; padding: 7px 12px; }
  .panel-toolbar > span { min-width: 0; overflow-wrap: anywhere; }
  .panel-toolbar button { flex: 0 0 auto; min-height: 34px; }
  .example-workbench,.code-panel,.result-panel { width: 100%; max-width: 100%; }
  .docs-shell--templates .component-showcase-grid { grid-template-columns: minmax(0,1fr) !important; }
  .docs-shell--templates .component-showcase-card > header { grid-template-columns: 34px minmax(0,1fr); padding: 17px; }
  .docs-shell--templates .component-showcase-card > footer { padding: 15px 17px; }
  .docs-shell--templates .component-showcase-card > footer .btn { width: 100%; justify-content: center; }
}