/* Design System page */
.ds-hero { padding: clamp(140px, 18vw, 220px) 0 0; overflow: hidden; }
.ds-hero-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-top: 40px; flex-wrap: wrap; }
.ds-hero .lead { max-width: 56ch; }

/* infinite component wall */
.ds-wall { margin-top: clamp(64px, 9vw, 120px); padding: 40px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.ds-wall-track { display: flex; gap: 20px; align-items: center; width: max-content; animation: marquee 40s linear infinite; }
.ds-wall:hover .ds-wall-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.w-btn, .v-btn { display: inline-flex; align-items: center; height: 40px; padding: 0 20px; border-radius: 10px; background: var(--char); color: #fff; font: 500 15px/1 var(--body); white-space: nowrap; }
.w-btn.ghost { background: var(--bg-2); color: var(--text); border: 1px solid var(--line-2); }
.w-chip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 99px; background: #e6f4ec; color: #17683f; font-size: 13px; font-weight: 500; white-space: nowrap; }
.w-chip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.w-chip.warn { background: #fbf1d9; color: #8a5a00; }
.w-chip.err { background: #fbe7e4; color: #a8321e; }
.w-input { display: inline-flex; align-items: center; justify-content: space-between; gap: 40px; height: 40px; padding: 0 12px 0 14px; border: 1px solid var(--line-2); border-radius: 10px; color: var(--text-2); font-size: 14px; background: var(--bg-2); white-space: nowrap; }
.w-input b { font: 500 11px/1 var(--body); padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-3); }
.w-input.mini { height: 30px; gap: 20px; font-size: 12px; }
.w-toggle { width: 44px; height: 24px; border-radius: 99px; background: var(--char); position: relative; flex: none; }
.w-toggle i { position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; }
.w-card { width: 180px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2); box-shadow: 0 1px 2px rgba(16,16,16,.04); display: grid; gap: 4px; flex: none; }
.w-card small { color: var(--text-2); font-size: 12px; }
.w-card strong { font: 600 26px/1 var(--display); color: var(--head); }
.w-card em { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--char) 84%, var(--line) 84%); margin-top: 8px; }
.w-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--bg-3); border: 1px solid var(--line); }
.w-tabs span { padding: 7px 14px; font-size: 13px; color: var(--text-2); border-radius: 8px; }
.w-tabs .on { background: var(--bg-2); color: var(--ink); box-shadow: 0 1px 3px rgba(16,16,16,.1); }
.w-avatar { display: flex; }
.w-avatar i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 600 11px/1 var(--body); font-style: normal; background: var(--stone); border: 2px solid var(--bg); margin-left: -8px; color: var(--ink); }
.w-avatar i:first-child { margin-left: 0; background: var(--char); color: #fff; }
.w-progress { width: 160px; height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; flex: none; }
.w-progress i { display: block; height: 100%; width: 40%; background: var(--char); animation: prog 3s var(--ease) infinite alternate; }
@keyframes prog { to { width: 92%; } }
.w-check { display: inline-flex; gap: 10px; align-items: center; font-size: 14px; color: var(--text); white-space: nowrap; }
.w-check i { width: 18px; height: 18px; border-radius: 5px; background: var(--char); color: #fff; display: grid; place-items: center; font-size: 12px; font-style: normal; }

/* story scenes */
.ds-story { margin-top: 72px; }
.ds-frame { display: grid; place-items: center; }
.ds-scene { position: absolute; inset: 0; display: grid; place-items: center; padding: clamp(20px, 3vw, 40px); opacity: 0; transform: translateY(16px) scale(.98); transition: opacity .7s var(--ease), transform .9s var(--ease); pointer-events: none; }
.ds-scene.active { opacity: 1; transform: none; }
.sc-audit { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; max-width: 520px; }
.sc-audit span { width: var(--w); height: var(--h); border-radius: 3px; background: #2a2a2a; border: 1px dashed rgba(47,206,101,.5); animation: wob 3s ease-in-out infinite alternate; }
.sc-audit span:nth-child(3n) { border-radius: 12px; background: #333; }
.sc-audit span:nth-child(4n) { border-radius: 99px; }
.sc-audit span:nth-child(2n) { animation-delay: -1.2s; }
@keyframes wob { to { transform: translateY(-4px) rotate(-1deg); } }
.sc-audit p, .p-empty { width: 100%; text-align: center; margin: 20px 0 0; font-size: 14px; }
.sc-audit p b { color: var(--accent); font-weight: 500; }
.sc-tokens { width: min(100%, 460px); display: grid; gap: 10px; }
.tk-row { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
.tk-row i { width: 28px; height: 28px; border-radius: 4px; border: 1px solid var(--line-2); }
.tk-row i.sq { background: transparent; border: 2px solid var(--accent); border-radius: var(--r); }
.tk-row i.bar { height: 8px; width: var(--w); background: var(--accent); border: 0; }
.tk-row i.aa { display: grid; place-items: center; font: 600 16px/1 var(--display); font-style: normal; border: 0; color: var(--head); }
.tk-row code, .tk-row span { font: 400 13px/1 "JetBrains Mono", ui-monospace, monospace; }
.tk-row span { color: var(--text-2); }
.sc-variants { display: grid; gap: 16px; }
.sc-variants > div { display: grid; grid-template-columns: 80px repeat(4, auto); gap: 12px; align-items: center; }
.sc-variants b { font: 500 12px/1 var(--body); color: var(--text-2); }
.v-btn { height: 36px; padding: 0 16px; font-size: 13px; justify-content: center; }
.v-btn.hov { filter: brightness(1.12); }
.v-btn.foc { box-shadow: 0 0 0 2px var(--bg-2), 0 0 0 4px var(--accent); }
.v-btn.dis { opacity: .35; }
.v-btn.sec { background: transparent; color: var(--text); border: 1px solid var(--line-2); }
.v-btn.sec.hov { background: rgba(245,240,235,.06); }
.v-btn.dan { background: #ef4444; color: #fff; }
.sc-legend { display: grid; grid-template-columns: 80px repeat(4, 1fr); gap: 12px; margin: 0; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.sc-legend span:first-child { grid-column: 2; }
@media (max-width: 1200px) { .sc-variants > div { grid-template-columns: 70px repeat(4, auto); gap: 8px; } .v-btn { padding: 0 10px; } }
.sc-pattern { width: min(100%, 520px); border: 1px solid var(--line); border-radius: 6px; padding: 20px; background: var(--bg); display: grid; gap: 16px; }
.p-head { display: flex; justify-content: space-between; align-items: center; }
.p-head b { font: 600 20px/1 var(--display); color: var(--head); }
.p-filter { display: flex; gap: 8px; flex-wrap: wrap; }
.p-rows { display: grid; gap: 8px; }
.p-rows i { height: 36px; border-radius: 4px; background: linear-gradient(90deg, #1d1d1d 0%, #262626 50%, #1d1d1d 100%); background-size: 200% 100%; animation: shimmer 1.6s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.p-empty { margin: 0; font-size: 12px; color: var(--text-3); }
.sc-docs { width: min(100%, 540px); display: grid; grid-template-columns: 140px 1fr; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--bg); }
.sc-docs aside { border-right: 1px solid var(--line); padding: 16px; display: grid; gap: 10px; align-content: start; font-size: 13px; color: var(--text-2); }
.sc-docs aside b { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); font-weight: 500; }
.sc-docs aside .on { color: var(--accent); }
.sc-docs > div { padding: 20px; }
.sc-docs h4 { font: 600 22px/1 var(--display); margin: 0 0 16px; color: var(--head); }
.sc-docs .do, .sc-docs .dont { font-size: 13px; padding: 10px 12px; border-radius: 4px; margin-bottom: 8px; }
.sc-docs .do { background: rgba(16,185,129,.1); color: #6ee7b7; }
.sc-docs .dont { background: rgba(239,68,68,.1); color: #fca5a5; }
.doc-props { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.doc-props code, .sc-code { font: 400 12px/1.7 "JetBrains Mono", ui-monospace, monospace; }
.doc-props code { padding: 4px 8px; border-radius: 4px; background: var(--bg-3); color: var(--text-2); }
.sc-code { margin: 0; padding: 24px; width: min(100%, 560px); border: 1px solid var(--line); border-radius: 6px; background: #0b0b0b; color: var(--text-2); white-space: pre-wrap; font-size: 13px; }
.sc-code .c { color: var(--text-3); } .sc-code .k { color: #c4b5fd; } .sc-code .p { color: var(--head); } .sc-code .v { color: #86efac; } .sc-code .t { color: var(--accent); }
.sc-gov { display: flex; flex-direction: column; align-items: center; gap: 0; }
.g-node { width: 240px; text-align: center; padding: 16px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--bg); font: 600 18px/1.2 var(--display); color: var(--head); }
.g-node small { display: block; font: 400 13px/1.4 var(--body); color: var(--text-2); margin-top: 4px; }
.g-node.hot { border-color: var(--accent); box-shadow: 0 0 40px rgba(47,206,101,.18); }
.g-arrow { width: 1px; height: 28px; background: linear-gradient(var(--line-2), var(--accent)); position: relative; }
.g-arrow::after { content: ""; position: absolute; bottom: -2px; left: -4px; border: 4px solid transparent; border-top-color: var(--accent); }
.ds-out { font-size: 14px; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 8px; }
.ds-out b { color: var(--ink); font-weight: 500; margin-right: 10px; letter-spacing: .1em; text-transform: uppercase; font-size: 12px; }

/* token tiers */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.2fr); gap: 20px; margin-top: 64px; }
.tier { border-top: 1px solid var(--line); padding-top: 20px; display: grid; gap: 10px; align-content: start; }
.tier-k { font: 500 12px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.tk { display: flex; align-items: center; gap: 10px; text-align: left; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); font: 400 13px/1.2 "JetBrains Mono", ui-monospace, monospace; color: var(--text-2); transition: border-color .25s, color .25s, background .25s, transform .3s var(--ease); }
.tk i { width: 14px; height: 14px; border-radius: 3px; flex: none; border: 1px solid var(--line-2); }
.tk i.sq { border: 2px solid var(--accent); border-radius: 4px; }
.tiers.focus .tk { opacity: .35; }
.tiers.focus .tk.on { opacity: 1; border-color: var(--ink); color: var(--ink); background: var(--stone-2); transform: translateX(4px); }
.tier-demo { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; background: var(--bg-2); min-height: 100%; display: grid; place-items: center; }
.card-mini { width: 100%; max-width: 280px; padding: 20px; border-radius: 14px; background: var(--bg-3); border: 1px solid var(--line); display: grid; gap: 8px; transition: box-shadow .3s; }
.card-mini small { color: var(--text-2); }
.card-mini strong { font: 600 20px/1.2 var(--display); color: var(--head); margin-bottom: 8px; }
.card-mini .v-btn { justify-self: start; transition: box-shadow .3s, color .3s; }
.tiers[data-hl="a"] .card-mini .v-btn { box-shadow: 0 0 0 2px var(--bg-3), 0 0 0 4px var(--accent); }
.tiers[data-hl="b"] .card-mini .v-btn { color: #fff; outline: 2px dashed var(--ink); outline-offset: 3px; text-decoration: underline; text-underline-offset: 4px; }
.tiers[data-hl="c"] .card-mini { box-shadow: 0 0 0 2px var(--ink); }
.tiers[data-hl="d"] .card-mini .v-btn { border-radius: 14px; }
@media (max-width: 960px) { .tiers { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tiers { grid-template-columns: 1fr; } }

/* playground */
.pg { --brand: #2fce65; --on-brand: #0f0f0f; --r: 4px; --dens: 1; --pg-bg: #0f0f0f; --pg-surface: #161616; --pg-raised: #1d1d1d; --pg-line: #2a2a2a; --pg-text: #eeeae4; --pg-text-2: #8c8984;
  margin-top: 64px; display: grid; grid-template-columns: 280px minmax(0, 1fr); grid-template-rows: auto auto; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg-2); box-shadow: var(--shadow); }
.pg[data-theme-mode="light"] { --pg-bg: #f6f4f1; --pg-surface: #ffffff; --pg-raised: #f1eee9; --pg-line: #e2ddd6; --pg-text: #1a1a1a; --pg-text-2: #5e5c59; }
.pg-controls { grid-row: span 2; padding: 28px; border-right: 1px solid var(--line); display: grid; gap: 28px; align-content: start; }
.pg fieldset { border: 0; padding: 0; margin: 0; }
.pg legend { font: 500 12px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 14px; display: flex; justify-content: space-between; width: 100%; }
.pg legend output { color: var(--text); letter-spacing: 0; }
.swatches { display: flex; gap: 10px; }
.sw { width: 32px; height: 32px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); transition: transform .25s var(--ease), box-shadow .25s; }
.sw:hover { transform: scale(1.1); }
.sw.active { box-shadow: 0 0 0 2px var(--bg-2), 0 0 0 4px var(--c); }
.seg { display: flex; padding: 3px; border-radius: 999px; background: var(--bg-3); border: 1px solid var(--line); }
.seg button { flex: 1; padding: 8px 6px; border-radius: 999px; font-size: 13px; color: var(--text-2); transition: background .25s, color .25s; }
.seg button[aria-checked="true"] { background: var(--char); color: #fff; }
.pg input[type="range"] { width: 100%; accent-color: var(--char); }
.contrast { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); align-items: center; }
.c-label { grid-column: 1 / -1; font: 500 12px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.contrast strong { font: 600 28px/1 var(--display); color: var(--head); }
.c-badge { font: 600 12px/1 var(--body); padding: 6px 10px; border-radius: 99px; background: #e6f4ec; color: #17683f; }
.c-badge.fail { background: #fbe7e4; color: #a8321e; }

.pg-preview { padding: clamp(20px, 3vw, 40px); background: var(--pg-bg); transition: background .5s var(--ease); }
.ui { --gap: calc(16px * var(--dens)); background: var(--pg-surface); border: 1px solid var(--pg-line); border-radius: calc(var(--r) * 1.5); padding: calc(24px * var(--dens)); display: grid; gap: calc(20px * var(--dens)); color: var(--pg-text); transition: background .5s var(--ease), border-color .5s, border-radius .3s, padding .3s; font-size: 14px; }
.ui-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.ui-title b { display: block; font: 600 22px/1.2 var(--display); }
.ui-title span { font-size: 13px; color: var(--pg-text-2); }
.ui-actions { display: flex; gap: 8px; }
.ui-btn { height: calc(38px * var(--dens)); padding: 0 calc(18px * var(--dens)); border-radius: var(--r); background: var(--brand); color: var(--on-brand); font: 500 14px/1 var(--body); transition: background .4s, border-radius .3s, height .3s, filter .2s, transform .2s; }
.ui-btn:hover { filter: brightness(1.1); }
.ui-btn:active { transform: scale(.97); }
.ui-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ui-btn.ghost { background: transparent; color: var(--pg-text); border: 1px solid var(--pg-line); }
.ui-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.ui-kpi { padding: calc(16px * var(--dens)); border-radius: var(--r); background: var(--pg-raised); display: grid; gap: 4px; transition: background .5s, border-radius .3s, padding .3s; }
.ui-kpi span { font-size: 12px; color: var(--pg-text-2); }
.ui-kpi b { font: 600 26px/1.1 var(--display); }
.ui-kpi em { font-style: normal; font-size: 12px; }
.ui-kpi .up { color: #10b981; } .ui-kpi .down { color: #ef4444; }
.ui-bar { height: 6px; border-radius: var(--r); background: var(--pg-line); overflow: hidden; margin-top: 6px; }
.ui-bar i { display: block; height: 100%; background: var(--brand); border-radius: inherit; transition: background .4s; }
.ui-table { border: 1px solid var(--pg-line); border-radius: var(--r); overflow: hidden; transition: border-radius .3s; }
.ui-row { display: grid; grid-template-columns: 1.6fr 1fr auto; gap: 12px; padding: calc(12px * var(--dens)) calc(16px * var(--dens)); border-top: 1px solid var(--pg-line); align-items: center; transition: padding .3s; }
.ui-row:first-child { border-top: 0; }
.ui-row.head { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--pg-text-2); background: var(--pg-raised); }
.ui-row span:nth-child(2) { color: var(--pg-text-2); font-family: "JetBrains Mono", monospace; font-size: 12px; }
.ui-tag { font-style: normal; font-size: 12px; padding: 4px 10px; border-radius: calc(var(--r) * 2 + 2px); }
.ui-tag.ok { background: rgba(16,185,129,.14); color: #10b981; }
.ui-tag.warn { background: rgba(234,179,8,.16); color: #ca8a04; }
.ui-tag.err { background: rgba(239,68,68,.14); color: #ef4444; }
.ui-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.ui-link { color: var(--brand); transition: color .4s; }
.ui-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.ui-switch input { position: absolute; opacity: 0; }
.ui-switch i { width: 38px; height: 22px; border-radius: 99px; background: var(--pg-line); position: relative; transition: background .3s; }
.ui-switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .3s var(--ease); }
.ui-switch input:checked + i { background: var(--brand); }
.ui-switch input:checked + i::after { transform: translateX(16px); }
.ui-switch input:focus-visible + i { outline: 2px solid var(--brand); outline-offset: 2px; }

.pg-code { border-top: 1px solid var(--line); background: #141414; min-width: 0; }
.code-tabs { display: flex; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.code-tabs button { padding: 7px 12px; border-radius: 999px; font-size: 13px; color: var(--text-2); }
.code-tabs button[aria-selected="true"] { background: #2a2a2a; color: var(--text); }
.code-tabs .copy { margin-left: auto; border: 1px solid var(--line); }
.code-tabs .copy:hover { color: var(--text); border-color: var(--line-2); }
.pg-code pre { margin: 0; padding: 20px 24px; max-height: 280px; overflow: auto; font: 400 13px/1.7 "JetBrains Mono", ui-monospace, monospace; color: var(--text-2); }
.pg-code .hl { color: var(--accent); background: rgba(47,206,101,.1); border-radius: 3px; }
@media (max-width: 900px) { .pg { grid-template-columns: 1fr; } .pg-controls { grid-row: auto; border-right: 0; border-bottom: 1px solid var(--line); grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pg-controls { grid-template-columns: 1fr; } .ui-kpis { grid-template-columns: 1fr; } .ui-row { grid-template-columns: 1fr auto; } .ui-row span:nth-child(2) { display: none; } }

/* anatomy */
.anat { margin-top: 64px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); overflow: hidden; box-shadow: var(--shadow); }
.anat-stage { position: relative; height: clamp(300px, 34vw, 420px); display: grid; place-items: center; background-color: var(--bg); background-image: radial-gradient(rgba(16,16,16,.09) 1px, transparent 1px); background-size: 20px 20px; }
.anat-btn { --s: 1.6; position: relative; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 20px; border-radius: 4px; background: var(--accent); color: #0f0f0f; font: 500 15px/1 var(--body); transform: scale(var(--s)); transition: background .3s, box-shadow .3s, transform .2s var(--ease), opacity .3s; }
.anat-btn::before { content: ""; position: absolute; inset: -1px; border: 1px dashed rgba(16,16,16,.35); border-radius: inherit; pointer-events: none; }
.a-icon svg { width: 14px; height: 14px; }
.a-spin { display: none; width: 14px; height: 14px; border: 2px solid rgba(15,15,15,.3); border-top-color: #0f0f0f; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.anat-btn[data-state="hover"] { background: #4fdc80; }
.anat-btn[data-state="focus"] { box-shadow: 0 0 0 2px var(--bg-2), 0 0 0 4px var(--accent); }
.anat-btn[data-state="pressed"] { background: #22a650; transform: scale(calc(var(--s) * .97)); }
.anat-btn[data-state="loading"] .a-icon { display: none; }
.anat-btn[data-state="loading"] .a-spin { display: inline-block; }
.anat-btn[data-state="disabled"] { background: #e7e5e2; color: #a8a49f; }
.pin { position: absolute; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); padding: 4px 12px 4px 4px; border-radius: 99px; background: var(--bg-2); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(16,16,16,.05); white-space: nowrap; }
.pin b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--char); color: #fff; font: 600 11px/1 var(--body); }
.pin::before { content: ""; position: absolute; background: rgba(47,206,101,.6); }
.p1 { left: 8%; top: 18%; } .p2 { left: 10%; bottom: 18%; } .p3 { right: 8%; top: 18%; } .p4 { right: 10%; bottom: 18%; }
.anat-states { display: flex; flex-wrap: wrap; gap: 6px; padding: 16px; border-top: 1px solid var(--line); justify-content: center; }
.anat-states button { padding: 9px 16px; border-radius: 99px; font-size: 13px; color: var(--text-2); border: 1px solid var(--line-2); background: var(--bg-2); transition: .25s; }
.anat-states button:hover { color: var(--text); }
.anat-states button[aria-checked="true"] { background: var(--char); color: #fff; border-color: var(--char); }
.anat-spec { display: grid; grid-template-columns: repeat(6, 1fr); margin: 0; border-top: 1px solid var(--line); }
.anat-spec div { padding: 18px 20px; border-right: 1px solid var(--line); }
.anat-spec div:last-child { border-right: 0; }
.anat-spec dt { font: 500 11px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.anat-spec dd { margin: 0; font-size: 14px; color: var(--text); }
@media (max-width: 900px) { .anat-spec { grid-template-columns: repeat(3, 1fr); } .anat-spec div:nth-child(3n) { border-right: 0; } .anat-spec div:nth-child(n+4) { border-top: 1px solid var(--line); } .anat-btn { --s: 1.2; } .pin { font-size: 0; gap: 0; } }

/* scales */
.scales { gap: clamp(32px, 6vw, 96px); }
.type-scale > div { display: grid; grid-template-columns: 100px 1fr auto; align-items: baseline; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.type-scale span, .type-scale code, .space-scale code, .space-scale span { font-size: 13px; color: var(--text-2); }
.type-scale code, .space-scale code { font-family: "JetBrains Mono", monospace; }
.type-scale b { font-family: var(--display); font-weight: 600; color: var(--head); line-height: 1; }
.space-scale > div { display: grid; grid-template-columns: 90px 1fr 40px; align-items: center; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); }
.space-scale i { height: 12px; width: 0; background: var(--char); border-radius: 99px; transition: width 1.2s var(--ease); }
.space-scale span { text-align: right; }
.reveal.in .space-scale i { width: min(var(--s), 100%); }
.space-scale > div:nth-child(n) i { transition-delay: calc(var(--k, 0) * 60ms); }

.ds-cards { margin-top: 64px; }

/* ---------- Elements bento ---------- */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-top: 64px; }
.tile { display: flex; flex-direction: column; min-height: 300px; color: inherit; }
.tile p { font-size: 15px; max-width: 34ch; }
.tile-k { font: 500 13px/1 var(--display); color: var(--text-3); margin-bottom: auto; padding-bottom: 32px; }
.t-color { grid-column: span 4; } .t-type { grid-column: span 2; }
.t-space { grid-column: span 2; } .t-grid { grid-column: span 4; }
.t-motion { grid-column: span 3; } .t-icon { grid-column: span 3; }
.t-viz { margin-top: 20px; height: 64px; display: flex; align-items: center; gap: 8px; }
.t-color .t-viz i { flex: 1; height: 48px; background: var(--c); border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(16,16,16,.06); transition: height .5s var(--ease), flex .5s var(--ease); }
.t-color:hover .t-viz i { height: 64px; } .t-color .t-viz i:hover { flex: 2.4; }
.t-type .t-viz b { font: 700 64px/1 var(--display); color: var(--head); transition: font-style .3s, letter-spacing .5s var(--ease), color .3s; }
.t-type:hover .t-viz b { font-style: italic; letter-spacing: -.04em; color: var(--text-2); }
.t-type .t-viz span { color: var(--text-3); font-size: 13px; align-self: flex-end; padding-bottom: 8px; }
.t-space .t-viz { align-items: flex-end; }
.t-space .t-viz i { width: 14px; background: var(--char); border-radius: 4px; transition: height .6s var(--ease); }
.t-space .t-viz i:nth-child(1) { height: 8px; } .t-space .t-viz i:nth-child(2) { height: 16px; } .t-space .t-viz i:nth-child(3) { height: 24px; } .t-space .t-viz i:nth-child(4) { height: 40px; } .t-space .t-viz i:nth-child(5) { height: 64px; }
.t-space:hover .t-viz i { height: 64px !important; }
.t-grid .t-viz { gap: 4px; } .t-grid .t-viz i { flex: 1; height: 64px; border-radius: 6px; background: var(--stone-2); border: 1px solid var(--line); transition: background .4s; transition-delay: calc(var(--n) * 40ms); }
.t-grid:hover .t-viz i { background: var(--stone); }
.t-motion .t-viz { position: relative; border-bottom: 1px solid var(--line); }
.t-motion .t-viz i { position: absolute; left: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--char); transition: left .7s cubic-bezier(.4,.14,.3,1); }
.t-motion:hover .t-viz i { left: calc(100% - 20px); }
.t-icon .t-viz { gap: 16px; }
.t-icon svg { width: 24px; height: 24px; fill: none; stroke: var(--text-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s, transform .4s var(--ease); }
.t-icon:hover svg { stroke: var(--ink); transform: translateY(-4px); }
.t-icon:hover svg:nth-child(2n) { transition-delay: .06s; }
@media (max-width: 960px) { .bento { grid-template-columns: 1fr 1fr; } .bento .tile { grid-column: span 1; } }
@media (max-width: 560px) { .bento { grid-template-columns: 1fr; } .tile { min-height: 240px; } }

/* ---------- Motion ---------- */
.motion { margin-top: 64px; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); background: var(--bg-2); padding: clamp(20px, 3vw, 36px); display: grid; gap: 28px; }
.m-lane { display: grid; grid-template-columns: 260px 1fr 72px; gap: 24px; align-items: center; }
.m-meta b { display: block; font: 500 20px/1.2 var(--display); color: var(--head); }
.m-meta code { font: 400 12px/1.5 "JetBrains Mono", monospace; color: var(--text-2); }
.m-track { position: relative; height: 56px; border-radius: 14px; background: var(--bg-3); border: 1px solid var(--line); }
.m-track i { position: absolute; top: 7px; left: 8px; width: 40px; height: 40px; border-radius: 10px; background: var(--char); }
.m-lane[data-curve="productive"] .m-track i { transition: left 110ms cubic-bezier(.2,0,.38,.9); }
.m-lane[data-curve="expressive"] .m-track i { transition: left 400ms cubic-bezier(.4,.14,.3,1); background: var(--stone); box-shadow: inset 0 0 0 1px var(--line-2); }
.motion.go .m-track i { left: calc(100% - 48px); }
.m-curve { width: 72px; height: 72px; fill: none; stroke: var(--char); stroke-width: 2.5; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 4px; overflow: visible; }
.m-lane[data-curve="expressive"] .m-curve { stroke: var(--text-3); }
.m-ctrl { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 24px; }
@media (max-width: 760px) { .m-lane { grid-template-columns: 1fr; } .m-curve { display: none; } }

/* ---------- Grid demo ---------- */
.griddemo { margin-top: 64px; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); background: var(--bg-2); overflow: hidden; }
.gd-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--line); flex-wrap: wrap; font-size: 14px; }
.gd-switch { --brand: var(--char); --pg-line: var(--line-2); }
.gd-bp { min-width: 280px; }
.gd-canvas { position: relative; padding: 24px; margin: 0 auto; transition: max-width .6s var(--ease); max-width: 100%; }
.gd-canvas[data-bp="8"] { max-width: 720px; } .gd-canvas[data-bp="4"] { max-width: 380px; }
.gd-overlay { position: absolute; inset: 24px; display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 16px; pointer-events: none; transition: opacity .4s; z-index: 2; }
.gd-overlay i { background: rgba(47,206,101,.07); border-left: 1px solid rgba(47,206,101,.32); border-right: 1px solid rgba(47,206,101,.32); }
.griddemo.off .gd-overlay { opacity: 0; }
.gd-layout { position: relative; display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 16px; grid-auto-rows: minmax(48px, auto); }
.gd-layout > div { background: var(--bg-2); border-radius: 10px; border: 1px solid var(--line); transition: grid-column .4s; }
.gd-nav { grid-column: 1 / -1; height: 48px; }
.gd-hero { grid-column: 1 / -1; padding: 20px; display: grid; gap: 10px; }
.gd-hero b { font: 600 24px/1 var(--display); color: var(--head); }
.gd-hero span { height: 10px; border-radius: 4px; background: var(--line); width: 50%; } .gd-hero span + span { width: 30%; }
.gd-k { height: 88px; grid-column: span 4; background: var(--stone-2) !important; }
.gd-layout > div { z-index: 1; }
.gd-table { grid-column: span 12; height: 200px; }
.gd-side { grid-column: span 4; height: 200px; }
.gd-canvas[data-bp="8"] .gd-k { grid-column: span 2; } .gd-canvas[data-bp="8"] .gd-table { grid-column: span 8; } .gd-canvas[data-bp="8"] .gd-side { grid-column: span 8; height: 100px; }
.gd-canvas[data-bp="4"] .gd-k { grid-column: span 2; } .gd-canvas[data-bp="4"] .gd-table, .gd-canvas[data-bp="4"] .gd-side { grid-column: span 4; }
@media (max-width: 640px) { .gd-overlay, .gd-layout { gap: 6px; } .gd-bp { min-width: 0; width: 100%; } }

/* ---------- Docs explorer ---------- */
.docs { margin-top: 64px; display: grid; grid-template-columns: 220px minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; background: var(--bg-2); min-height: 460px; }
.docs-side { border-right: 1px solid var(--line); padding: 24px 12px; background: var(--bg); display: flex; flex-direction: column; }
.docs-side p { font: 500 11px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); padding: 0 12px; margin-bottom: 12px; }
.docs-side button { text-align: left; padding: 10px 12px; font-size: 14px; color: var(--text-2); border-radius: 10px; transition: .2s; }
.docs-side button:hover { color: var(--ink); background: var(--bg-3); }
.docs-side button.on { color: #fff; background: var(--char); }
.docs-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 28px 32px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.docs-head .h3 { margin-bottom: 20px; }
.docs-status { font-size: 12px; font-weight: 500; color: #17683f; display: block; margin-bottom: 8px; }
.docs-tabs { display: flex; gap: 4px; }
.docs-tabs button { padding: 12px 14px; font-size: 14px; color: var(--text-2); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: .2s; }
.docs-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.docs-body { padding: 28px 32px 32px; animation: docIn .45s var(--ease); }
@keyframes docIn { from { opacity: 0; transform: translateY(8px); } }
.docs-body h4 { font: 500 13px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin: 0 0 14px; }
.docs-body .dd { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.docs-body .dd > div { padding: 16px; border-radius: 12px; font-size: 14px; }
.docs-body .dd .do { background: #eef7f1; border-top: 2px solid #2f9e63; color: var(--text-2); }
.docs-body .dd .dont { background: #fcf0ee; border-top: 2px solid #d4553f; color: var(--text-2); }
.docs-body .dd b { display: block; color: var(--text); margin-bottom: 6px; }
.docs-body pre { margin: 0; padding: 20px; background: var(--char); border: 1px solid var(--char); border-radius: 14px; font: 400 13px/1.7 "JetBrains Mono", monospace; color: #e6e1db; overflow: auto; }
.docs-body .tbl-wrap { margin-top: 4px; }
@media (max-width: 760px) { .docs { grid-template-columns: 1fr; } .docs-side { flex-direction: row; gap: 4px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 10px; } .docs-side p { display: none; } .docs-side button { white-space: nowrap; padding: 10px 14px; flex: none; } .docs-head, .docs-body { padding-left: 20px; padding-right: 20px; } .docs-tabs { overflow-x: auto; width: 100%; } .docs-body .dd { grid-template-columns: 1fr; } }

/* ---------- Catalog ---------- */
.cat-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 64px 0 24px; flex-wrap: wrap; }
.cat-search { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--bg-2); min-width: min(100%, 360px); transition: border-color .2s; }
.cat-search:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px var(--stone-2); }
.cat-search svg { width: 18px; height: 18px; fill: none; stroke: var(--text-2); stroke-width: 1.8; flex: none; }
.cat-search input { flex: 1; background: none; border: 0; color: var(--text); font: 400 15px var(--body); outline: none; }
.cat-filter .chip { cursor: pointer; transition: .2s; background: var(--bg-2); }
.cat-filter .chip:hover { color: var(--text); }
.cat-filter .chip.on { background: var(--char); color: #fff; border-color: var(--char); }
.cat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cat-item { background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; padding: 20px; min-height: 200px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; transition: border-color .3s, box-shadow .3s; animation: docIn .5s var(--ease) both; animation-delay: calc(var(--i) * 30ms); }
.cat-item:hover { border-color: var(--line-2); box-shadow: var(--shadow); }
.cat-prev { border-radius: 10px; background: var(--bg); }
.cat-prev { height: 88px; display: grid; place-items: center; }
.cat-item:hover .cat-prev > * { transform: scale(1.06); }
.cat-prev > * { transition: transform .4s var(--ease); }
.cat-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cat-foot b { font: 500 16px/1.2 var(--display); color: var(--head); }
.st { font-size: 11px; padding: 4px 8px; border-radius: 99px; letter-spacing: .04em; }
.st.stable { background: #e6f4ec; color: #17683f; }
.st.beta { background: #fbf1d9; color: #8a5a00; }
.st.planned { background: var(--bg-3); color: var(--text-2); }
@media (max-width: 960px) { .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .cat-grid { grid-template-columns: 1fr; } }
/* mini previews */
.mp-radio { display: flex; gap: 12px; align-items: center; font-size: 13px; color: var(--text-2); } .mp-radio i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-2); } .mp-radio i.on { border: 5px solid var(--char); }
.mp-notif { width: 180px; padding: 10px 12px; border-left: 3px solid var(--char); background: var(--bg-2); border-top: 1px solid var(--line); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 12px; color: var(--text); border-radius: 6px; }
.mp-modal { width: 150px; height: 84px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--bg-2); box-shadow: var(--shadow); padding: 12px; display: grid; gap: 6px; align-content: start; } .mp-modal i { height: 6px; border-radius: 3px; background: var(--line-2); } .mp-modal i:last-child { width: 50px; height: 16px; border-radius: 6px; background: var(--char); justify-self: end; margin-top: 8px; }
.mp-table { width: 170px; display: grid; gap: 4px; } .mp-table i { height: 14px; border-radius: 3px; background: var(--line); } .mp-table i:first-child { background: var(--stone); }
.mp-tooltip { position: relative; padding: 8px 12px; background: var(--char); color: #fff; font-size: 12px; border-radius: 8px; } .mp-tooltip::after { content: ""; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); border: 6px solid transparent; border-bottom: 0; border-top-color: var(--char); }
.mp-steps { display: flex; align-items: center; gap: 6px; } .mp-steps i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--char); } .mp-steps i.on { background: var(--char); } .mp-steps b { width: 24px; height: 2px; background: var(--line-2); }
.mp-date { display: grid; grid-template-columns: repeat(7, 14px); gap: 4px; } .mp-date i { height: 14px; border-radius: 3px; background: var(--line); } .mp-date i.on { background: var(--char); }
.mp-drop { width: 150px; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; background: var(--bg-2); font-size: 12px; } .mp-drop span { display: flex; justify-content: space-between; padding: 8px 10px; color: var(--text-2); } .mp-drop span + span { border-top: 1px solid var(--line); color: var(--text); background: var(--stone-2); }
.mp-chart { display: flex; align-items: flex-end; gap: 6px; height: 64px; } .mp-chart i { width: 14px; background: var(--stone); border-radius: 4px 4px 0 0; } .mp-chart i:nth-child(even) { background: var(--char); }
.mp-ai { padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: var(--stone-2); font-size: 12px; color: var(--ink); border: 1px solid var(--stone); }

/* ---------- Get started ---------- */
.start-grid { margin-top: 64px; }
.start-steps { margin: 20px 0 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 12px; }
.start-steps li { counter-increment: s; position: relative; padding-left: 36px; color: var(--text-2); font-size: 15px; }
.start-steps li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; color: var(--text-3); font: 500 13px/1.7 var(--display); }
.start-code { margin: 16px 0 0; padding: 18px; background: var(--char); border: 1px solid var(--char); border-radius: 14px; font: 400 13px/1.7 "JetBrains Mono", monospace; color: #e6e1db; overflow-x: auto; }

/* ---------- Dark "product" panels on the light page ---------- */
.ds-frame, .pg-code { --bg: #141414; --bg-2: #1b1b1b; --bg-3: #232323; --line: #2c2c2c; --line-2: #3d3d3d; --text: #eeeae4; --head: #f5f0eb; --ink: #f5f0eb; --text-2: #a8a49f; --text-3: #7d7974; color: var(--text); }
.story-visual .ds-frame { background: #141414; border-color: #141414; box-shadow: var(--shadow-lg); }
.ds-frame .v-btn { background: var(--accent); color: #0f0f0f; border-radius: 4px; }
.ds-frame .v-btn.sec { background: transparent; color: var(--text); }
.ds-frame .v-btn.dan { background: #ef4444; color: #fff; }
.ds-frame .w-chip { background: rgba(16,185,129,.14); color: #6ee7b7; }
.ds-frame .w-input { border-radius: 4px; }
.ds-frame .ds-out b, .ds-frame .p-head b { color: var(--head); }
.v-btn { background: var(--accent); color: #0f0f0f; border-radius: 6px; }
.pg-code .code-tabs { border-bottom-color: #2c2c2c; }
.pg-controls { background: var(--bg-2); }
.pg legend output { color: var(--ink); }
.story-step .ds-out { border-top-color: var(--line); }
.ds-frame .w-chip.warn { background: rgba(234,179,8,.14); color: #fde047; }
.ds-frame .w-chip.err { background: rgba(239,68,68,.14); color: #fca5a5; }
.gd-canvas { background: var(--bg); }
.griddemo { background: var(--bg); }
.gd-bar { background: var(--bg-2); }

.code-bar { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); padding-right: 12px; }
.code-bar .code-tabs { border-bottom: 0; flex: 1; }
.code-bar .copy { margin-left: auto; }
.ui-kpi .down { color: #f87171; } .ui-tag.err { color: #fca5a5; } .pg[data-theme-mode="light"] .ui-kpi .down { color: #b91c1c; } .pg[data-theme-mode="light"] .ui-tag.err { color: #b91c1c; } .pg[data-theme-mode="light"] .ui-tag.ok { color: #047857; } .pg[data-theme-mode="light"] .ui-tag.warn { color: #92400e; } .pg[data-theme-mode="light"] .ui-kpi .up { color: #047857; }