.demo-wrap { max-width: 1240px; }
.demo-intro { padding: 40px 0 32px; max-width: 760px; }
.demo-intro h1 { font-size: clamp(36px, 4.8vw, 60px); line-height: 1.07; letter-spacing: -.035em; margin: 0 0 18px; }
.demo-intro p { color: var(--muted); font-size: 18px; margin: 0; max-width: 60ch; }
.workbench { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #303644; border-radius: 18px; overflow: hidden; }
.preview { background: #EDF1F4; color: #172D39; padding: 24px; min-width: 0; }
.preview-heading h2, .output-heading h2 { font-size: 19px; letter-spacing: -.02em; margin: 0; }
.preview-heading > span { display: block; color: #526372; font-size: 13px; margin-top: 4px; }
.sample-choices, .output-formats { display: flex; gap: 8px; margin: 20px 0; }
.sample-choices button, .output-formats button { font: inherit; font-size: 13px; border: 1px solid #A9B7C1; border-radius: 7px; padding: 7px 13px; background: transparent; color: #314854; cursor: pointer; }
.sample-choices button[aria-pressed=true] { background: #172D39; color: #fff; border-color: #172D39; }
.sample-stage { display: grid; gap: 14px; }
.sample-cell { border: 2px solid transparent; border-radius: 12px; padding: 18px; cursor: pointer; }
.sample-cell.is-selected { border-color: #6A59CF; }
.sample-cell > p { margin: 12px 0 0; font-size: 12px; color: #526372; }
.sample-button { display: inline-flex; align-items: center; justify-content: center; padding: 16px 24px; color: #fff; background: #A74430; border: 2px solid #803525; border-radius: 3px 14px 27px 40px; font: 600 16px/1.4 ui-sans-serif, system-ui, sans-serif; cursor: pointer; }
.sample-card { display: block; max-width: 360px; background: #fff; padding: 24px; border: 1px solid #CAD5DE; border-radius: 16px; color: #172D39; box-shadow: 0 8px 22px rgba(23,45,57,.07); }
.sample-card .card-caption { font-size: 12px; color: #536979; }
.sample-card h3 { font-size: 23px; line-height: 1.15; font-weight: 650; letter-spacing: -.025em; margin: 14px 0 10px; }
.sample-card p { font-size: 14px; line-height: 1.6; color: #526372; margin: 0; }
.card-line { display: block; width: 44px; height: 3px; background: #A74430; margin-top: 20px; }
.sample-badge { display: inline-flex; align-items: center; gap: 8px; color: #165A48; background: #DDEFE7; padding: 8px 14px; border: 1px solid #9FC7B5; border-radius: 999px; font: 600 13px/1.4 ui-sans-serif, system-ui, sans-serif; cursor: pointer; }
.sample-badge > span { font-size: 10px; }
.sample-note { font-size: 12px; line-height: 1.6; color: #526372; margin: 22px 0 0; max-width: 60ch; }
.output { padding: 24px; background: #11151D; min-width: 0; }
.output-heading { display: flex; gap: 12px; justify-content: space-between; align-items: start; }
.output-heading p { font-size: 12px; color: #A9B5C8; margin: 4px 0 0; }
.sample-mark { color: #BFC7D5; border: 1px solid #465267; border-radius: 4px; padding: 2px 7px; font-size: 11px; }
.output-formats button { color: #BFC7D5; border-color: #465267; }
.output-formats button[aria-pressed=true] { background: #D4CBFF; color: #242038; border-color: #D4CBFF; }
#demo-output { width: 100%; min-height: 420px; padding: 18px; background: #080B11; border: 1px solid #364155; border-radius: 8px; color: #DAE4F3; font: 12px/1.7 Consolas, ui-monospace, monospace; resize: vertical; tab-size: 2; white-space: pre-wrap; overflow-wrap: anywhere; }
.copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; }
#copy-output { font: inherit; font-size: 14px; font-weight: 600; color: #17202C; background: #D4CBFF; border: 0; padding: 11px 18px; border-radius: 7px; cursor: pointer; }
#copy-status { color: #BBC8DB; font-size: 12px; max-width: 33ch; }
.output-note { color: #A9B5C8; font-size: 12px; line-height: 1.7; margin: 22px 0 0; }
.demo-next { max-width: 76ch; padding: 44px 0 20px; }
.demo-next h2 { font-size: 27px; margin: 0 0 12px; }
.demo-next p { color: #B9C1CF; }
.demo-next-links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 24px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.demo-wrap button:focus-visible, .demo-wrap [tabindex]:focus-visible, .demo-wrap a:focus-visible, #demo-output:focus-visible { outline: 3px solid #8C7BED; outline-offset: 4px; }
.demo-wrap button:disabled { cursor: default; opacity: .6; }
.fallback { padding: 18px; border: 1px solid var(--line); }
@media (max-width: 800px) { .workbench { grid-template-columns: 1fr; } .demo-wrap { padding-inline: 16px; } .demo-wrap nav { gap: 16px; } .demo-wrap nav > a:last-child { font-size: 12px; text-align: right; } .demo-intro { padding-top: 28px; } .preview, .output { padding: 18px; } .sample-cell { padding: 14px; } .sample-cell:not(.is-selected) { display: none; } #demo-output { min-height: 300px; } .sample-card { padding: 20px; } }