* {box-sizing: border-box;}
html {scroll-padding-top: 100px; font-family: var(--sol-font-sans); background: var(--sol-color-canvas); color: var(--sol-color-text); font-synthesis: none;}
body {margin: 0; font-size: var(--sol-text-md); line-height: var(--sol-line-body); overflow-wrap: anywhere;}
button, input, select {font: inherit;}
button, a, summary, input, select {touch-action: manipulation;}
a {color: var(--sol-color-accent); text-underline-offset: 4px;}
a:hover {text-decoration-thickness: 2px;}
button {color: inherit;}
[hidden] {display: none !important;}
h1, h2, h3, h4, p {margin-top: 0;}
h1, h2, h3, h4 {line-height: var(--sol-line-heading); letter-spacing: -.035em; word-break: keep-all; overflow-wrap: anywhere;}
h1 {font-size: clamp(2rem, 3.9vw, 3rem); font-weight: 720; margin-bottom: 20px;}
h2 {font-size: var(--sol-text-xl); font-weight: 700; margin-bottom: 12px;}
h3 {font-size: var(--sol-text-lg); margin-bottom: 10px;}
h4 {font-size: var(--sol-text-md); margin-bottom: 8px;}
code, pre, kbd, samp {font-family: var(--sol-font-mono); font-size: var(--sol-text-xs);}
code {overflow-wrap: anywhere;}
:not(pre) > code {padding: 2px 5px; border-radius: 4px; background: var(--sol-color-surface-alt);}
pre {white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; line-height: 1.8;}
.code-font-sample {max-width:100%;overflow-x:auto;white-space:pre;overflow-wrap:normal;}
/* Documentation shell additions use the existing role tokens and native controls. */
.topbar .header-actions {flex-wrap:nowrap;gap:var(--sol-space-2);}
.appearance-inline {display:flex;align-items:center;gap:var(--sol-space-2);}

.document-search-field input {font:inherit;line-height:normal;min-width:0;height:var(--sol-control-height);min-height:var(--sol-control-height);color:var(--sol-color-text);background:var(--sol-color-surface);border:1px solid var(--sol-color-control-border);border-radius:var(--sol-radius-control);padding:var(--sol-space-2) var(--sol-space-3);}

#appearance-open {display:none;}
.document-search-panel,.appearance-panel {width:min(42rem,calc(100% - 32px));max-width:calc(100% - 32px);max-height:calc(100dvh - 32px);padding:var(--sol-space-4);border:1px solid var(--sol-color-border);border-radius:var(--sol-radius-panel);background:var(--sol-color-surface);color:var(--sol-color-text);}
.document-search-panel[open] {display:flex;flex-direction:column;gap:var(--sol-space-3);overflow:hidden;max-height:min(42rem,calc(100dvh - 32px));}
.document-search-head {display:flex;align-items:center;justify-content:space-between;gap:var(--sol-space-3);flex:none;}
.document-search-head h2 {font-size:var(--sol-text-lg);margin:0;}
.document-search-head button {flex:none;white-space:nowrap;min-width:var(--sol-touch-target-min);min-height:var(--sol-touch-target-min);}
.document-search-panel form {margin:0;flex:none;}
.document-search-panel form>label {display:block;font-size:var(--sol-text-sm);margin-bottom:var(--sol-space-2);}
.document-search-field {display:flex;align-items:center;gap:var(--sol-space-2);}
.document-search-field input {width:100%;}
.document-search-field input::placeholder {color:var(--sol-color-muted);opacity:1;}
.document-search-field button {flex:none;white-space:nowrap;}
.document-search-panel>p {margin:0;flex:none;}
.document-search-results {overflow-y:auto;min-height:0;padding:8px;margin:-8px;overscroll-behavior:contain;}
.document-search-results ul {list-style:none;padding:0;margin:0;display:grid;gap:var(--sol-space-2);}
.doc-search-result {display:block;min-height:44px;padding:var(--sol-space-3);border:1px solid var(--sol-color-border);border-radius:var(--sol-radius-card);text-decoration:none;color:var(--sol-color-text);font-size:var(--sol-text-sm);}
.doc-search-result:hover {background:var(--sol-color-accent-soft);color:var(--sol-color-text);}
.doc-search-result strong {display:block;margin-block:2px var(--sol-space-1);color:var(--sol-color-accent);}
.doc-search-result>span {display:block;}
.doc-search-result .doc-search-location {font-size:var(--sol-text-xs);color:var(--sol-color-muted);}
.doc-search-empty {margin:var(--sol-space-3) 0;}
.appearance-panel {width:min(26rem,calc(100% - 32px));}
.appearance-grid {display:grid;gap:var(--sol-space-4);margin-top:var(--sol-space-4);}
.appearance-choice {border:0;padding:0;margin:0;min-width:0;}
.appearance-choice legend {font-size:var(--sol-text-sm);margin-bottom:var(--sol-space-2);}
.appearance-inline legend {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.appearance-options {display:inline-flex;flex-wrap:nowrap;gap:0;max-width:100%;vertical-align:top;isolation:isolate;}
.appearance-panel .appearance-options {display:flex;width:100%;}
.appearance-choice-label {position:relative;display:inline-flex;flex:1 1 auto;min-width:0;cursor:pointer;}
.appearance-choice-label+.appearance-choice-label {margin-inline-start:-1px;}
.appearance-panel .appearance-choice-label {flex:1 1 0;}
.appearance-choice-label:first-child .appearance-choice-face {border-start-start-radius:var(--sol-radius-button);border-end-start-radius:var(--sol-radius-button);}
.appearance-choice-label:last-child .appearance-choice-face {border-start-end-radius:var(--sol-radius-button);border-end-end-radius:var(--sol-radius-button);}
.appearance-choice-label:has(>input:checked),.appearance-choice-label:hover {z-index:1;}
.appearance-choice-label:focus-within {z-index:2;}
.appearance-choice-label>input {position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);}
.appearance-choice-face {display:inline-flex;align-items:center;justify-content:center;gap:var(--sol-space-1);width:100%;height:var(--sol-button-height);min-height:var(--sol-button-height);padding:0 var(--sol-space-2);border:1px solid var(--sol-color-control-border);border-radius:0;background:var(--pref-soft,var(--sol-color-surface));color:var(--pref-ink,var(--sol-color-text));font-size:var(--sol-text-xs);line-height:1.3;white-space:nowrap;}
.appearance-choice-name {text-transform:capitalize;}
.appearance-swatch {width:10px;height:10px;flex:none;border-radius:50%;background:var(--pref-accent);}
.appearance-choice-check {visibility:hidden;width:12px;flex:none;color:var(--pref-accent,var(--sol-color-accent));}
.appearance-choice-label>input:checked+.appearance-choice-face {border-color:var(--pref-accent,var(--sol-color-accent));box-shadow:inset 0 0 0 1px var(--pref-accent,var(--sol-color-accent));}
.appearance-choice-label>input:checked+.appearance-choice-face .appearance-choice-check {visibility:visible;}
.appearance-choice-label:hover .appearance-choice-face {border-color:var(--pref-accent,var(--sol-color-accent));text-decoration:underline;text-underline-offset:3px;}
.appearance-choice-label>input:focus-visible+.appearance-choice-face {outline:2px solid var(--sol-color-focus);outline-offset:-3px;}
@media(min-width:1101px) and (max-width:1280px){.topbar .version,.topbar .repo-link {display:none;}}
.appearance-panel>p {margin:var(--sol-space-4) 0 0;}
@media(max-width:1100px){.topbar .appearance-inline,.topbar #mode-toggle,.topbar .version {display:none;}#appearance-open {display:inline-flex;}}
@media(max-width:680px){.topbar .header-actions {gap:4px;}.search-wide {display:none;}.topbar #document-search-open,.topbar #appearance-open {padding-inline:8px;min-width:var(--sol-touch-target-min);min-height:var(--sol-touch-target-min);}.document-search-panel,.appearance-panel {width:calc(100% - 24px);max-width:calc(100% - 24px);max-height:calc(100dvh - 24px);padding:var(--sol-space-3);}}
kbd {border: 1px solid var(--sol-color-control-border); border-radius: 4px; padding: 2px 5px;}
.small {font-size: var(--sol-text-sm);}
.muted {color: var(--sol-color-muted);}
.eyebrow {display: block; color: var(--sol-color-muted); font-size: var(--sol-text-xs); letter-spacing: .12em; font-weight: 650; line-height: 1.5;}
.skip-link {position: fixed; top: -100px; left: 12px; z-index: var(--sol-layer-announcement); background: var(--sol-color-text); color: var(--sol-color-surface); padding: 12px 18px; border-radius:var(--sol-radius-control);}
.skip-link:focus {top: 12px;}
.topbar {min-height: 76px; padding: 12px 32px; border-bottom: 1px solid var(--sol-color-border); display: flex; justify-content: space-between; align-items: center; gap: 16px; background: var(--sol-color-canvas); position: sticky; top: 0; z-index: var(--sol-layer-sticky);}
.brand {min-height: var(--sol-touch-target-min); display: flex; gap: 12px; align-items: center; text-decoration: none; color: var(--sol-color-text); font-weight: 700; font-size: 18px; letter-spacing: -.03em;}
.brand-detail {font-weight: 450; margin-left: 5px; color: var(--sol-color-muted); font-size: 15px;}
.brand-mark {display: block; width: 32px; height: 32px; flex: 0 0 32px; object-fit: contain;}
.header-actions {display: flex; gap: 14px; align-items: center; font-size: var(--sol-text-sm); flex-wrap: wrap;}
.version {font-family: var(--sol-font-mono); color: var(--sol-color-muted); font-size: var(--sol-text-xs);}
.version span {margin-left: 5px; color: var(--sol-color-accent);}
.repo-link {display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--sol-color-muted);}
.app-layout {display: grid; grid-template-columns: 232px minmax(0,1fr); max-width: 1536px; margin: auto;}
.sidebar {border-inline-end: 1px solid var(--sol-color-border); padding: 32px 20px; position: sticky; top: 76px; height: calc(100dvh - 76px); display: flex; flex-direction: column;}
.nav-caption {font-size: 11px; letter-spacing: .13em; color: var(--sol-color-muted); margin: 0 12px 14px;}
.sidebar > nav {display: grid; gap: 5px;}
.sidebar > nav a {display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 12px; border-radius:var(--sol-radius-control); text-decoration: none; font-size: var(--sol-text-sm); color: var(--sol-color-muted); font-weight: 500; line-height: 1.4;}
.sidebar > nav a:hover {background: var(--sol-color-surface-alt); color: var(--sol-color-text);}
.sidebar > nav a[aria-current="page"] {background: var(--sol-color-accent-soft); color: var(--sol-color-accent); font-weight: 650;}
.nav-index {font-family: var(--sol-font-mono); font-size: 11px; flex:0 0 2ch; min-width:2ch; white-space:nowrap; overflow-wrap:normal;}
.nav-note {font-size: 11px; margin-left: auto;}
.sidebar {overflow-y:auto;}
.doc-nav-row {display:flex;align-items:center;gap:0;}
.sidebar > nav .doc-nav-row>a {flex:1;min-width:0;}
.doc-section-toggle {flex:none;display:inline-grid;place-items:center;width:36px;min-height:44px;border:0;border-radius:var(--sol-radius-button);background:transparent;color:var(--sol-color-muted);font:inherit;cursor:pointer;}
.doc-section-toggle[aria-expanded="false"] svg {transform:rotate(-90deg);}
.doc-section-toggle:hover {background:var(--sol-color-surface-alt);}
.sidebar .section-subnav {display:grid;gap:2px;margin:4px 0 12px 20px;padding-left:10px;border-left:1px solid var(--sol-color-border);}
.sidebar .section-subnav:empty {display:none;}
.sidebar .section-subnav>a {display:block;min-height:36px;align-content:center;padding:7px 8px;font-size:13px;line-height:1.45;font-weight:400;color:var(--sol-color-muted);border-radius:var(--sol-radius-small);}
.sidebar .section-subnav>a[aria-current="location"] {background:var(--sol-color-accent-soft);color:var(--sol-color-accent);font-weight:650;}
.document-alias-heading {font-size:var(--sol-text-lg);margin:var(--sol-space-4) 0 var(--sol-space-3);}
.mobile-document-menu {display:block;width:100%;min-height:44px;text-align:start;font:inherit;font-size:var(--sol-text-sm);font-weight:600;color:var(--sol-color-text);background:transparent;border:0;border-radius:var(--sol-radius-button);padding:8px;cursor:pointer;}
@media(max-width:800px){.sidebar > nav#document-primary-nav{display:block;padding-block:8px;}.sidebar > nav>a{display:block;}.sidebar .section-subnav>a{min-height:44px;}.doc-nav-branch{width:100%;}.sidebar{max-height:55dvh;overflow-y:auto;}}
.sidebar-foot {margin-top: auto; padding: 32px 12px 0; font-size: var(--sol-text-xs); color: var(--sol-color-muted);}
.sidebar-foot p {margin: 10px 0; line-height: 1.8;}
.sidebar-foot a {display: inline-flex; min-height: 44px; align-items: center;}
.status-dot {display: inline-block; height: 6px; width: 6px; border-radius: 50%; background: var(--sol-color-accent); margin-right: 4px;}
main {min-width: 0; width: 100%; max-width: 1192px; padding: 38px clamp(24px,4vw,64px) 32px;}
main:focus {outline: none;}
.breadcrumb {display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 28px; font-size: var(--sol-text-xs); color: var(--sol-color-muted);}
.breadcrumb span:last-child {color: var(--sol-color-text);}
.page-intro {max-width: 700px; margin-bottom: 32px;}
.page-intro .eyebrow {color: var(--sol-color-accent); margin-bottom: 14px;}
.page-intro p {color: var(--sol-color-muted); max-width: 660px; margin-bottom: 20px;}
.intro-title {font-size: clamp(2.25rem,4vw,3.4rem); line-height: 1.2;}
.accent {color: var(--sol-color-accent);}
.button-row {display: flex; flex-wrap: wrap; align-items: center; gap: 8px;}
.overview-hero {display: grid; grid-template-columns: minmax(0,1fr) minmax(290px,.95fr); gap: 32px; margin-bottom: 36px; align-items: center;}
.overview-hero .page-intro {margin: 0;}
.specimen {position: relative; padding: 24px; border: 1px solid var(--sol-color-border); border-radius:var(--sol-radius-panel); background: var(--sol-color-surface);}
.specimen-head, .row-between {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;}
.specimen h2 {font-size: 21px; margin: 16px 0 8px;}
.specimen p {font-size: var(--sol-text-sm); color: var(--sol-color-muted); margin-bottom: 18px;}
.specimen-task {border-top: 1px solid var(--sol-color-border); padding: var(--sol-row-padding) 0; font-size: var(--sol-text-sm); display: flex; gap: 12px; align-items: center; justify-content: space-between;}
.specimen-task:last-of-type {margin-bottom: 8px;}
.specimen-task .sol-choice {min-height: 44px;}
.goal-specimen .specimen-task {border-radius:var(--sol-radius-small); transition: background var(--sol-motion-duration-state) var(--sol-motion-easing-standard);}
.goal-specimen [data-complete="true"] {background: var(--sol-color-accent-soft);}
.goal-copy {transition: color var(--sol-motion-duration-state) var(--sol-motion-easing-standard);}
[data-complete="true"] .goal-copy {color: var(--sol-color-muted); text-decoration: line-through; text-decoration-thickness: 1px;}
.goal-marker {flex: 0 0 24px; width: 24px; text-align: center; font-size: var(--sol-text-sm); color: var(--sol-color-muted);}
[data-complete="true"] .goal-marker {color: var(--sol-color-accent);}
.goal-status {flex: 0 0 6em; width: 6em; justify-content: center;}
.goal-specimen .goal-feedback {min-height: 3.3em; margin: var(--sol-space-2) 0 var(--sol-space-4); color: var(--sol-color-muted);}
.goal-specimen .sol-progress::-webkit-progress-value {transition: width var(--sol-motion-duration-state) var(--sol-motion-easing-standard);}
.goal-specimen .sol-progress::-moz-progress-bar {transition: width var(--sol-motion-duration-state) var(--sol-motion-easing-standard);}
.hero-caption {display: flex; gap: 12px; font-size: 11px; color: var(--sol-color-muted); margin-top: 16px; flex-wrap: wrap;}
.hero-caption span::before {content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 6px; background: var(--sol-color-accent);}
.hero-caption span:nth-child(2)::before {background: var(--sol-color-text);}
.section {margin-top: 44px; scroll-margin-top: 100px;}
.section-header {display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 20px;}
.section-header h2 {margin: 0;}
.section-header > p {font-size: var(--sol-text-sm); color: var(--sol-color-muted); margin: 0;}
.grid-2 {display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--sol-content-gap);}
.grid-3 {display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--sol-content-gap);}
.grid-4 {display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--sol-content-gap);}
.entry-card {display: block; padding: 20px; border: 1px solid var(--sol-color-border); border-radius:var(--sol-radius-card); background: var(--sol-color-surface); color: var(--sol-color-text); text-decoration: none;}
.entry-card:hover {border-color: var(--sol-color-accent);}
.entry-card .number {display: block; font-family: var(--sol-font-mono); color: var(--sol-color-accent); font-size: var(--sol-text-xs); margin-bottom: 20px;}
.entry-card h3 {font-size: 17px; letter-spacing: -.02em;}
.entry-card p {font-size: var(--sol-text-sm); color: var(--sol-color-muted); margin: 0;}
.entry-card .arrow {float: right; color: var(--sol-color-accent);}
.principle {padding: 20px 0; border-top: 1px solid var(--sol-color-border);}
.principle .eyebrow {margin-bottom: 10px;}
.principle p {font-size: var(--sol-text-sm); color: var(--sol-color-muted); margin: 0;}
.callout {display: flex; flex-wrap: wrap; align-items: center; gap: 24px; padding: 22px 24px; border: 1px solid var(--sol-color-border); border-radius:var(--sol-radius-card); margin-top: 28px; background: var(--sol-color-surface);}
.callout > div:first-child {flex: 1; min-width: min(100%,240px);}
.callout h3 {font-size: 17px; margin-bottom: 6px;}
.callout p {font-size: var(--sol-text-sm); color: var(--sol-color-muted); margin: 0;}
.site-footer {margin-top: 48px; border-top: 1px solid var(--sol-color-border); padding-top: 20px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: var(--sol-text-xs); color: var(--sol-color-muted);}
.site-footer p {margin: 0;}
.local-nav {display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 20px 0 32px; font-size: var(--sol-text-sm);}
.local-nav a {min-height: 44px; display: flex; align-items: center;}
.rule-list {padding-left: 20px; margin: 0; font-size: var(--sol-text-sm);}
.rule-list li {margin-bottom: 10px; padding-left: 4px;}
.token-toolbar {display: grid; grid-template-columns: minmax(180px,1fr) auto; gap: 8px 12px; align-items: start; margin-bottom: 16px;}
.token-toolbar > .sol-label {grid-area: 1 / 1;}
.token-toolbar > .sol-input {grid-area: 2 / 1;}
.token-actions {grid-area: 2 / 2; display: flex; flex-wrap: wrap; gap: 8px;}
.token-actions .sol-button {min-height: var(--sol-control-height);}
.token-toolbar > .sol-hint {grid-area: 3 / 1 / 4 / -1;}
@media (max-width: 1000px) {.token-toolbar {grid-template-columns: minmax(0,1fr);}.token-actions {grid-area: 4 / 1;}.token-toolbar > .sol-hint {grid-area: 3 / 1;}}
.token-grid {display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px;}
.sol-token-card {text-align: left; border: 1px solid var(--sol-color-border); border-radius:var(--sol-radius-card); padding: 12px; background: var(--sol-color-surface); cursor: pointer; min-width: 0; color: var(--sol-color-text);}
.sol-token-card:hover {border-color: var(--sol-color-accent);}
.token-color {height: 40px; border: 1px solid var(--sol-color-control-border); border-radius:var(--sol-radius-small); display: block; margin-bottom: 10px; background: var(--swatch);}
.sol-token-card strong {font-size: var(--sol-text-sm); display: block; margin-bottom: 3px;}
.sol-token-card code, .sol-token-card small {font-size: 11px; display: block; color: var(--sol-color-muted);}
.sol-token-card .token-value {float: right; font-family: var(--sol-font-mono); font-size: 11px; color: var(--sol-color-muted);}
.code-example {margin-top: 16px; border: 1px solid var(--sol-color-border); border-radius:var(--sol-radius-inset); overflow: visible; background: var(--sol-color-surface-alt);}
.code-example summary {padding: 12px 16px; cursor: pointer; min-height: 44px; font-size: var(--sol-text-sm); color: var(--sol-color-muted);}
.code-example .code-body {padding:0;min-width:0;}
.code-body .button-row {margin-top: 12px;}
.spec-table {width: 100%; border-collapse: collapse; font-size: var(--sol-text-sm);}
.spec-table th, .spec-table td {padding: 14px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--sol-color-border);}
.spec-table th {color: var(--sol-color-muted); font-size: var(--sol-text-xs); font-weight: 600;}
.spec-table td:first-child {font-weight: 600;}
.spec-table caption {text-align: left; font-weight: 650; margin-bottom: 12px;}
.type-sample {padding: 16px 0; border-bottom: 1px solid var(--sol-color-border); display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 16px; align-items: baseline;}
.type-sample dt {color: var(--sol-color-muted); font-size: var(--sol-text-xs);}
.type-sample dd {margin: 0;}
.space-scale {display: flex; flex-wrap: wrap; gap: 16px; align-items: end; padding: 24px 0;}
.space-scale > div {display: grid; gap: 8px; text-align: center; font-size: var(--sol-text-xs); color: var(--sol-color-muted);}
.space-block {width: 40px; background: var(--sol-color-accent-soft); border-top: 2px solid var(--sol-color-accent); height: var(--size);}
.demo {border: 1px solid var(--sol-color-border); border-radius:var(--sol-radius-panel); background: var(--sol-color-surface); overflow: visible;}
.demo-header {padding: 12px 20px; border-bottom: 1px solid var(--sol-color-border); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: var(--sol-text-xs); color: var(--sol-color-muted); background: var(--sol-color-canvas);}
.demo-stage {padding: 24px; min-width: 0;}
.state-grid {display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px;}
.state-grid > div {display: grid; gap: 10px; align-content: start;}
.state-label {font-size: var(--sol-text-xs); color: var(--sol-color-muted);}
.demo-usage {margin-top: 16px; font-size: var(--sol-text-sm); color: var(--sol-color-muted);}
.demo-usage p {margin-bottom: 8px;}
.demo-usage strong {color: var(--sol-color-text);}
.contract {display: grid; grid-template-columns: 96px minmax(0,1fr); font-size: var(--sol-text-sm); margin: 18px 0 0;}
.contract dt, .contract dd {padding: 8px 0; border-top: 1px solid var(--sol-color-border); margin: 0;}
.contract dt {color: var(--sol-color-muted);}
.contract dd {padding-left: 12px;}
.preview-focus {outline: 3px solid var(--sol-color-focus); outline-offset: 3px;}
.preview-hover {background: var(--sol-color-accent-hover) !important; border-color: var(--sol-color-accent-hover) !important;}
.feedback-space {min-height: 26px; font-size: var(--sol-text-sm); margin: 12px 0 0; color: var(--sol-color-success);}
.form-demo {display: grid; gap: 20px; max-width: 480px;}
.form-demo fieldset, .choice-fieldset {border: 0; padding: 0; margin: 0; min-width: 0;}
.form-demo legend, .choice-fieldset legend {font-weight: 650; font-size: var(--sol-text-sm); margin-bottom: 6px;}
.project-list {margin-top:var(--sol-space-4);}
.project-row {border-radius:0;}
.project-row h3, .empty-state .project-row h3 {margin:0 0 2px;font-size:var(--sol-text-sm);line-height:1.4;font-weight:650;}
.project-row p {font-size:var(--sol-text-xs);line-height:1.35;color:var(--sol-color-muted);margin:0;}
.empty-state {padding: 32px 16px; text-align: center; background: var(--sol-color-canvas); border: 1px dashed var(--sol-color-control-border); border-radius:var(--sol-radius-inset); margin-top: 16px;}
.empty-state h3 {font-size: 19px; margin: 12px 0 8px;}
.empty-state p {font-size: var(--sol-text-sm); color: var(--sol-color-muted); margin: 0 0 16px;}
.empty-mark {font-family: var(--sol-font-mono); color: var(--sol-color-accent); font-size: 24px;}
.compare-grid {display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px;}
.compare-card {border: 1px solid var(--sol-color-border); border-radius:var(--sol-radius-card); padding: 20px;}
.compare-card:has(input:checked) {border: 2px solid var(--sol-color-accent); padding: 19px; background: var(--sol-color-accent-soft);}
.compare-card dl {margin: 12px 0; font-size: var(--sol-text-sm);}
.compare-card dl div {display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--sol-color-border);}
.compare-card dt {color: var(--sol-color-muted);}
.compare-card dd {margin: 0;}
.theme-card {border: 1px solid var(--sol-color-border); border-radius:var(--sol-radius-card); overflow: hidden; background: var(--sol-color-surface); color: var(--sol-color-text);}
.theme-card .theme-preview {padding: 20px; background: var(--sol-color-canvas);}
.theme-preview .sol-card {padding: 16px; font-size: var(--sol-text-sm);}
.theme-preview .sol-card p {margin-bottom: 12px; color: var(--sol-color-muted); font-size: var(--sol-text-xs);}
.theme-card-body {padding: 20px;}
.theme-card h3 {font-size: 17px; margin-bottom: 6px;}
.theme-card-body p {font-size: var(--sol-text-xs); color: var(--sol-color-muted); min-height: 64px;}
.theme-card-body .sol-button {width: 100%;}
.density-control {display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px;}
.density-control label {border: 1px solid var(--sol-color-control-border); border-radius:var(--sol-radius-control); padding: 16px;}
.density-control label:has(input:checked) {border-color: var(--sol-color-accent); background: var(--sol-color-accent-soft);}
.adoption-steps {counter-reset: steps; display: grid; gap: 20px; padding: 0; list-style: none;}
.adoption-steps li {counter-increment: steps; display: grid; grid-template-columns: 36px minmax(0,1fr); gap: 16px;}
.adoption-steps li::before {content: counter(steps,decimal-leading-zero); font-family: var(--sol-font-mono); color: var(--sol-color-accent); font-size: var(--sol-text-sm); padding-top: 2px;}
.adoption-steps h3 {font-size: 18px;}
.adoption-steps p {font-size: var(--sol-text-sm); color: var(--sol-color-muted); margin: 0;}
.source-list {padding: 0; list-style: none; font-size: var(--sol-text-sm);}
.source-list li {padding: 12px 0; border-bottom: 1px solid var(--sol-color-border);}
.source-list p {color: var(--sol-color-muted); margin: 6px 0 0; font-size: var(--sol-text-xs);}
.toast {position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); max-width: min(90vw,500px); color: var(--sol-color-surface); background: var(--sol-color-text); padding: 12px 18px; border-radius:var(--sol-radius-floating); font-size: var(--sol-text-sm); box-shadow: var(--sol-elevation-floating); pointer-events: none; z-index: var(--sol-layer-announcement);}
.toast:empty {display: none;}
dialog {border: 1px solid var(--sol-color-border); border-radius:var(--sol-radius-panel); padding: 24px; width: min(520px,calc(100% - 32px)); max-height: calc(100dvh - 48px); overflow: auto; background: var(--sol-color-surface); color: var(--sol-color-text);}
dialog::backdrop {background: var(--sol-backdrop-color);}
.dialog-head {display: flex; align-items: center; gap: 16px; justify-content: space-between; margin-bottom: 16px;}
.dialog-head > .eyebrow {flex: 1; min-width: 0;}
.dialog-head > .sol-button {flex: 0 0 auto; white-space: nowrap;}
dialog h2 {font-size: 25px;}
dialog > p {font-size: var(--sol-text-sm); color: var(--sol-color-muted);}
.detail-list {font-size: var(--sol-text-sm); margin: 20px 0;}
.detail-list div {display: grid; grid-template-columns: 100px minmax(0,1fr); border-top: 1px solid var(--sol-color-border); padding: 12px 0; gap: 12px;}
.detail-list dt {color: var(--sol-color-muted);}
.detail-list dd {margin: 0;}
.noscript {padding: 24px; background: var(--sol-color-surface); border: 1px solid var(--sol-color-control-border); margin: 24px;}
@media (min-width: 1600px) {.topbar {padding-inline: max(32px,calc((100% - 1472px)/2));}}
@media (max-width: 1180px) {.grid-4 {grid-template-columns: repeat(2,minmax(0,1fr));}.overview-hero {grid-template-columns: 1fr; gap: 24px;}.specimen {max-width: 600px;}.token-grid {grid-template-columns: repeat(2,minmax(0,1fr));}.grid-3 {grid-template-columns: 1fr;}.theme-card {display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);}.theme-card-body p {min-height: 0;}}
@media (max-width: 800px) {
  .topbar {position: relative; padding: 12px 20px; flex-wrap: wrap; min-height: 76px;}
  .header-actions {gap: 8px;}.brand-detail {display: block; margin-left: 0; font-size: 12px;}.brand {font-size: 16px; gap: 10px;}.version span {display: none;}
  .app-layout {grid-template-columns: minmax(0,1fr);}.sidebar {position: relative; top: auto; height: auto; padding: 10px 20px; border-inline-end: 0; border-bottom: 1px solid var(--sol-color-border);}
  .sidebar > nav {display: flex; flex-wrap: wrap; gap: 4px;}.sidebar > nav a {padding: 8px 10px; min-height: 44px; font-size: 13px;}.nav-index,.nav-caption,.sidebar-foot,.nav-note {display: none;}
  main {padding: 24px 24px 28px;}.breadcrumb {margin-bottom: 24px;}.section {margin-top: 36px;}.page-intro {margin-bottom: 24px;}.intro-title {font-size: 2.5rem;}
  .state-grid {grid-template-columns: repeat(2,minmax(0,1fr));}.spec-table th,.spec-table td {padding: 12px 6px;}.section-header {align-items: start;}
}
@media (max-width: 520px) {
  .topbar {padding: 12px 16px; gap: 12px;}.header-actions {gap: 4px;}.repo-link {display: none;}.header-actions .sol-button {padding: 8px;}.brand-detail {font-size: 11px;}.version {font-size: 11px;}
  .sidebar {padding: 8px 12px;}.sidebar > nav {gap: 0;}.sidebar > nav a {padding: 8px; font-size: 12px;}
  main {padding: 24px 16px;}.intro-title {font-size: 2.25rem;}.overview-hero {gap: 24px;}.specimen {padding: 20px;}.hero-caption {gap: 8px;}.entry-card {padding: 16px;}.entry-card h3 {font-size: 16px;}.entry-card p {font-size: 13px;}.entry-card .number {margin-bottom: 14px;}
  .grid-2,.grid-4,.compare-grid,.density-control {grid-template-columns: 1fr;}.grid-4 {grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px;}.entry-card .arrow {display: none;}
  .token-grid {grid-template-columns: 1fr;}.sol-token-card {display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 10px;}.token-color {height: 42px; margin: 0;}.sol-token-card strong {font-size: 13px;}.sol-token-card .token-value {float: none; display: block;}
  .type-sample {grid-template-columns: 1fr; gap: 8px;}.demo-stage {padding: 20px 16px;}.demo-header {padding: 12px 16px;}.state-grid {gap: 20px 14px;}.state-grid .sol-button {padding-inline: 10px;}
  .theme-card {grid-template-columns: 1fr;}.theme-card-body {padding: 16px;}.theme-card .theme-preview {padding: 16px;}.contract {grid-template-columns: 70px minmax(0,1fr);}.callout {padding: 20px; gap: 16px;}.detail-list div {grid-template-columns: 72px minmax(0,1fr);}
}
@media (max-width: 359px) {.topbar {gap: 8px;}.version {display: none;}.brand-detail {font-size: 10px;}.brand-mark {width: 28px; height: 28px; flex-basis: 28px;}.state-grid {grid-template-columns: 1fr;}.grid-4 {grid-template-columns: 1fr;}.header-actions .sol-button {font-size: 12px;}.intro-title {font-size: 2rem;}}
@media (horizontal-viewport-segments: 2) {.app-layout {padding-inline: env(safe-area-inset-left,0px) env(safe-area-inset-right,0px);}}

/* Keep tinted headers inside the curve without clipping child focus outlines. */
.demo-header {border-radius:calc(var(--sol-radius-panel) - 1px) calc(var(--sol-radius-panel) - 1px) 0 0;}
.code-example>summary {border-radius:inherit;}
.shape-panel {padding:var(--sol-space-6);border:1px solid var(--sol-color-border);border-radius:var(--sol-radius-panel);background:var(--sol-color-surface-alt);}
.shape-panel>.sol-card {margin-top:var(--sol-space-4);}
.shape-samples {margin-block:var(--sol-space-6);}
.shape-rules {margin-top:var(--sol-space-4);}

.progress-package-frame{display:block;width:100%;max-width:100%;border:0;background:var(--sol-color-surface);border-radius:var(--sol-radius-card);}

/* Comparison activation retains native radio keyboard behavior and a full-card focus cue. */
.compare-card {cursor:pointer;}
.compare-card:has(input:focus-visible) {outline:var(--sol-focus-width) solid var(--sol-color-focus);outline-offset:var(--sol-focus-offset);}
.dialog-head {margin-bottom:var(--sol-space-2);}
.sol-search-loading {padding:var(--sol-space-4);}
.sol-search-loading>p {margin:0;}

/* Measured sticky-header offsets follow wrapping, density, font loading and viewport changes. */
html {scroll-padding-top:var(--sol-document-offset,100px);}
.section,.document-alias-heading {scroll-margin-top:var(--sol-document-offset,100px);}
.sidebar {top:var(--sol-shell-header-height,76px);height:calc(100dvh - var(--sol-shell-header-height,76px));}
.mobile-document-menu {width:44px;min-width:44px;min-height:44px;padding:0;display:inline-flex;align-items:center;justify-content:center;}
@media(max-width:800px){.topbar{position:sticky;top:0;}.sidebar{position:sticky;top:var(--sol-shell-header-height,76px);height:auto;max-height:calc(100dvh - var(--sol-shell-header-height,76px) - 16px);z-index:var(--sol-layer-sticky);background:var(--sol-color-canvas);}.sidebar:has(>nav[hidden]){display:none;}}
@media(max-width:680px){.appearance-wide{display:none;}}
.theme-card {display:flex;flex-direction:column;}
.theme-card-body {display:flex;flex-direction:column;align-items:flex-start;flex:1;}
.theme-card-body>button {align-self:flex-end;margin-top:auto;}
@media(min-width:521px) and (max-width:1180px){.theme-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);}}

.dialog-heading-copy {display:grid;gap:var(--sol-space-1);min-width:0;}
.dialog-heading-copy>h2 {margin:0;}
.dialog-head {align-items:flex-start;margin-bottom:var(--sol-space-4);}

/* The sidebar owns scrolling; its content and hit areas never shrink to fit the viewport. */
.sidebar {scrollbar-gutter:stable;}
.sidebar>* {flex-shrink:0;}
.sidebar>nav {flex:0 0 auto;min-width:0;width:100%;grid-auto-rows:minmax(44px,auto);}
.doc-nav-branch,.doc-nav-row {min-width:0;max-width:100%;}
.sidebar .section-subnav {min-width:0;max-width:calc(100% - 20px);}
.sidebar .section-subnav>a {min-width:0;max-width:100%;min-height:44px;overflow-wrap:anywhere;}
.doc-nav-group {margin:14px 8px 4px;font-size:var(--sol-text-xs);font-weight:650;color:var(--sol-color-text);}
.component-reference {margin-block:var(--sol-space-4);min-width:0;}
.component-reference-heading {display:flex;align-items:baseline;justify-content:space-between;gap:var(--sol-space-3);flex-wrap:wrap;}
.component-reference-heading h3 {margin:0;}
.component-reference-heading>a {font-size:var(--sol-text-xs);}
.component-reference>p {margin-block:var(--sol-space-3);}
.component-reference-links {display:flex;gap:var(--sol-space-4);padding-block:var(--sol-space-2);border-bottom:1px solid var(--sol-color-border);}
.component-reference-links a {display:inline-flex;align-items:center;min-height:var(--sol-button-height);}
.component-example-link {margin-block:var(--sol-space-4);}
.component-example-link>p {font-size:var(--sol-text-sm);color:var(--sol-color-muted);}
.component-api {margin-top:var(--sol-space-5);}
.component-api h5 {font-size:var(--sol-text-sm);margin:var(--sol-space-4) 0 var(--sol-space-2);}
.api-table-scroll {max-width:100%;overflow:auto;border:1px solid var(--sol-color-border);border-radius:var(--sol-radius-small);}
.api-table {border-collapse:collapse;width:100%;min-width:760px;font-size:var(--sol-text-sm);table-layout:fixed;}
.api-table thead th:first-child {width:176px;}
.api-table--3 thead th:nth-child(2),.api-table--4 thead th:nth-child(2) {width:208px;}
.api-table--4 thead th:nth-child(3) {width:112px;}
.api-table tbody th code {white-space:nowrap;overflow-wrap:normal;word-break:normal;}
.api-table caption {text-align:start;padding:var(--sol-space-3);font-size:var(--sol-text-xs);color:var(--sol-color-muted);}
.api-table th,.api-table td {text-align:start;vertical-align:top;padding:var(--sol-space-2) var(--sol-space-3);border-top:1px solid var(--sol-color-border);line-height:var(--sol-line-body);}
.api-table th {font-weight:600;}
.ai-guide-card {display:grid;gap:var(--sol-space-4);min-width:0;}
.ai-guide-card>p,.ai-guide-card>h3 {margin:0;}
.ai-guide-card>.sol-button {justify-self:start;}
.ai-guide-prompt {margin:0;padding:var(--sol-space-4);border:1px solid var(--sol-color-border);border-radius:var(--sol-radius-inset);background:var(--sol-color-surface-alt);white-space:pre-wrap;overflow-wrap:anywhere;min-width:0;font-size:var(--sol-text-sm);}
.ai-guide-reading {border-top:1px solid var(--sol-color-border);padding-top:var(--sol-space-4);min-width:0;}
.ai-guide-reading>summary {cursor:pointer;min-height:var(--sol-touch-target-min);display:list-item;padding-block:var(--sol-space-2);}
.ai-guide-reading>article {display:grid;gap:var(--sol-space-4);padding-top:var(--sol-space-4);min-width:0;overflow-wrap:anywhere;}
.ai-guide-reading article :is(p,h3,h4,h5,ul) {margin:0;}
.ai-guide-reading article ul {padding-inline-start:1.5em;}
.ai-guide-reading article li+li {margin-top:var(--sol-space-2);}
.ai-guide-reading article pre {white-space:pre-wrap;overflow-wrap:anywhere;padding:var(--sol-space-4);background:var(--sol-color-surface-alt);border-radius:var(--sol-radius-inset);font-size:var(--sol-text-sm);}
.api-table td>code {display:block;max-width:32ch;white-space:normal;}
.api-table td:last-child {min-width:18ch;}
.api-required {display:block;font-size:var(--sol-text-xs);color:var(--sol-color-danger);}
.api-type-definitions {margin-block:var(--sol-space-4);}
.api-type-definitions summary {cursor:pointer;min-height:var(--sol-touch-target-min);align-content:center;font-size:var(--sol-text-sm);}
.api-type-definitions pre {padding:var(--sol-space-3);background:var(--sol-color-surface-alt);border-radius:var(--sol-radius-small);overflow:auto;white-space:pre;overflow-wrap:normal;}
.component-reference :is(h3,h4),[id$="-examples"],[id$="-api"] {scroll-margin-top:var(--sol-document-offset,100px);}
@media(max-width:680px){.component-reference {padding:var(--sol-space-4);}.component-reference-links a{min-height:var(--sol-touch-target-min);}.api-table{font-size:var(--sol-text-xs);}}

.sol-install-card>.code-example{margin-block:var(--sol-space-3);}
.sol-install-card>.sol-hint{margin-top:var(--sol-space-3);}

.vue-code-examples {margin-top:var(--sol-space-4);min-width:0;}
.vue-code-examples[open]>summary {border-bottom:1px solid var(--sol-color-border);border-radius:var(--sol-radius-inset) var(--sol-radius-inset) 0 0;}
.vue-code-frame {min-width:0;}
.code-toolbar {display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sol-space-2);padding:var(--sol-space-2) var(--sol-space-4);border-bottom:1px solid var(--sol-color-border);background:var(--sol-color-surface);min-width:0;}
.code-toolbar>[role=tablist] {display:flex;flex-wrap:wrap;gap:0;min-width:0;flex:1;}
.code-language {font-size:var(--sol-text-sm);color:var(--sol-color-muted);padding-block:var(--sol-space-2);overflow-wrap:anywhere;}
.code-toolbar>.code-copy-button {display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--sol-button-height);height:var(--sol-button-height);min-height:var(--sol-button-height);padding:0;margin:2px 0 0 auto;}
.code-copy-button .sol-icon {display:block;}
.code-check-glyph,.code-copy-button[data-copied=true] .code-copy-glyph {display:none;}
.code-copy-button[data-copied=true] .code-check-glyph {display:block;color:var(--sol-color-success);}
.code-example pre {margin:0;padding:var(--sol-space-4);min-width:0;max-width:100%;overflow-x:auto;white-space:pre;overflow-wrap:normal;word-break:normal;border:0;border-radius:0;}
.code-example pre:focus-visible {outline:var(--sol-focus-width) solid var(--sol-color-focus);outline-offset:calc(-1 * var(--sol-space-1));}
.code-example-footer {display:flex;align-items:center;flex-wrap:wrap;gap:var(--sol-space-3);padding:var(--sol-space-3) var(--sol-space-4);border-top:1px solid var(--sol-color-border);font-size:var(--sol-text-sm);}
.code-example-footer a {display:inline-flex;align-items:center;min-height:var(--sol-control-height);}
.vue-code-tab {display:inline-flex;align-items:center;min-height:var(--sol-control-height);padding:var(--sol-space-2) var(--sol-space-3);border:0;border-bottom:2px solid transparent;background:transparent;color:var(--sol-color-muted);font:inherit;font-size:var(--sol-text-sm);cursor:pointer;}
.vue-code-tab[aria-selected=true] {border-bottom-color:var(--sol-color-accent);color:var(--sol-color-text);font-weight:650;}
.vue-code-tab:focus-visible {outline:var(--sol-focus-width) solid var(--sol-color-focus);outline-offset:calc(-1 * var(--sol-space-1));}
.vue-code-frame>[role=tabpanel] {min-width:0;}
.vue-code-examples pre {max-width:100%;overflow-x:auto;white-space:pre;overflow-wrap:normal;word-break:normal;}
.code-panel-note,.code-part-label {margin:0;padding:var(--sol-space-4) var(--sol-space-4) 0;font-size:var(--sol-text-sm);}
.code-panel-note {color:var(--sol-color-muted);}
.code-reference-part+.code-reference-part {margin-top:var(--sol-space-4);}
@media(max-width:680px){.vue-code-tab{min-height:var(--sol-touch-target-min);}}
.vue-live-stage {display:grid;gap:var(--sol-space-6);min-width:0;}
.vue-live-part {min-width:0;}
.vue-live-part>.document-alias-heading {margin:0 0 var(--sol-space-3);}
.vue-recipe-frame {display:block;width:100%;border:0;background:var(--sol-color-surface);color-scheme:inherit;}