.system{padding-top:48px;padding-bottom:80px}.system h1{margin-top:36px;font-size:clamp(36px,5vw,64px)}.system h2{margin-top:56px}.system p{max-width:850px;font-size:16px}.samples,.map-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.sample{margin:0;padding:32px;border:1px solid var(--line);min-height:170px;display:flex;flex-direction:column;justify-content:center;gap:24px}.sample img{width:100%;max-width:480px;height:auto}.sample figcaption{font-size:12px}.light{background:var(--paper);color:var(--ink)}.dark{background:var(--ink);color:var(--paper)}.accent{background:var(--accent);color:var(--ink)}.swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.swatch{padding:32px 20px;display:flex;flex-direction:column;border:1px solid var(--line)}.swatch.ink{background:var(--ink);color:var(--paper)}.swatch.paper{background:var(--paper)}.swatch.accent{background:var(--accent)}.swatch.muted{background:var(--muted);color:white}.swatch.line{background:var(--line)}.swatch.surface{background:var(--surface)}.component-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:24px 0}.map-grid{margin-top:32px}.map-grid article{padding:24px;border:1px solid var(--line)}.map-grid h2{margin:20px 0 10px}.system .candidate{margin:24px 0;max-width:600px}.system a{min-height:44px;display:inline-flex;align-items:center}button{min-height:44px}@media(max-width:650px){.samples,.map-grid{grid-template-columns:1fr}.swatches{grid-template-columns:1fr 1fr}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}