.demo-body { min-height: 100dvh; background: radial-gradient(circle at 86% 16%, rgba(216,166,63,.14), transparent 30%), var(--paper); }
.demo-header { position: relative; }
.demo-badge { margin-left: 4px; padding: 7px 9px; border: 1px solid rgba(212,52,36,.7); color: #ff8d80; border-radius: 4px; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.demo-header-links { margin-left: auto; display: flex; align-items: center; gap: 24px; font-size: 13px; }
.demo-header-links > a { color: #d4d0c9; text-decoration: none; }
.demo-header-links > a:hover { color: #fff; }
.language-switch button { appearance: none; border: 0; background: transparent; color: #aaa59e; padding: 7px 3px; font: inherit; font-weight: 850; cursor: pointer; }
.language-switch button[aria-current="true"] { color: var(--gold-light); }
.demo-shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 76px 0 92px; }
.demo-intro { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(460px, .85fr); column-gap: 80px; align-items: end; }
.demo-intro h1 { max-width: 760px; margin: 28px 0 22px; }
.demo-intro > p:not(.eyebrow) { max-width: 710px; color: var(--muted); font-size: 18px; line-height: 1.65; }
.demo-principles { grid-column: 2; grid-row: 1 / span 3; list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.demo-principles li { padding: 18px 0; border-bottom: 1px solid var(--line); }
.demo-principles strong, .demo-principles span { display: block; }
.demo-principles strong { margin-bottom: 6px; font-size: 15px; }
.demo-principles span { color: var(--muted); font-size: 13px; line-height: 1.55; }
.demo-workspace { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr); margin-top: 70px; border: 1px solid var(--line); background: var(--white); box-shadow: var(--shadow), 14px 14px 0 rgba(212,52,36,.9); }
.demo-form, .demo-result { min-width: 0; padding: 36px; }
.demo-form { border-right: 1px solid var(--line); }
.demo-card-heading { display: flex; justify-content: space-between; gap: 20px; align-items: start; margin-bottom: 30px; }
.demo-card-heading h2, .demo-result h2 { margin: 9px 0 0; font-size: clamp(32px, 4vw, 46px); }
.record-state { padding: 7px 9px; background: var(--paper-2); color: var(--muted); border-radius: 4px; font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.record-state.saved { color: #286e35; background: #e4f1df; }
.demo-form > label, .label-row label { display: block; margin: 18px 0 8px; font-size: 12px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.demo-form input, .demo-form textarea, .demo-form select { width: 100%; border: 1px solid rgba(16,16,20,.23); border-radius: 5px; background: #fff; color: var(--ink); padding: 13px 14px; font: inherit; line-height: 1.5; resize: vertical; transition: border-color .15s ease, box-shadow .15s ease; }
.demo-form input, .demo-form select { min-height: 50px; }
.demo-form input:hover, .demo-form textarea:hover, .demo-form select:hover { border-color: rgba(16,16,20,.42); }
.demo-form input:focus, .demo-form textarea:focus, .demo-form select:focus { outline: 0; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(216,166,63,.22); }
.label-row { display: flex; justify-content: space-between; align-items: end; }
.label-row span { color: var(--muted); font-size: 11px; }
.form-message { display: none; margin-top: 18px; padding: 12px 14px; border: 1px solid var(--line); font-size: 13px; line-height: 1.5; }
.form-message.visible { display: block; }
.form-message.error { background: #fff0ed; border-color: rgba(212,52,36,.35); color: var(--red-dark); }
.form-message.success { background: #edf5ea; border-color: rgba(65,128,70,.35); color: #286e35; }
.demo-submit { width: 100%; margin-top: 20px; border: 0; cursor: pointer; font: inherit; }
.demo-submit[disabled] { opacity: .55; cursor: wait; }
.demo-disclosure { margin: 15px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.demo-result { display: block; background: linear-gradient(145deg, #fffdf8, #eee5d7); }
.result-empty, .result-ready { width: 100%; text-align: center; }
.result-empty, .result-ready { position: sticky; top: 24px; }
.qr-placeholder { width: 176px; aspect-ratio: 1; margin: 0 auto 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 17px; background: #fff; border: 1px solid var(--line); box-shadow: 9px 9px 0 var(--gold); }
.qr-placeholder span { border: 9px solid var(--ink); }
.result-empty > p:last-child { color: var(--muted); line-height: 1.6; }
.qr-preview { display: block; width: min(280px, 80%); aspect-ratio: 1; margin: 18px auto 22px; background: white; border: 14px solid white; box-shadow: 9px 9px 0 var(--gold); }
.public-url { padding: 13px; margin: 26px 0 18px; background: #fff; border: 1px solid var(--line); color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; overflow-wrap: anywhere; }
.element-preview { margin: 0 0 18px; padding: 14px; text-align: left; background: var(--ink); color: var(--white); }
.element-preview span { display: block; margin-bottom: 8px; color: #aaa59e; font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.element-preview code { color: var(--gold-light); font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; }
.result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.result-actions .button { min-width: 0; padding: 0 10px; cursor: pointer; font: inherit; }
.expiry { margin: 21px 0 0; color: var(--muted); font-size: 12px; }
.standard-note { margin: 13px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.delete-demo { margin-top: 18px; border: 0; background: transparent; color: var(--red-dark); text-decoration: underline; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.form-guide { margin: -12px 0 22px; padding: 13px 15px; border-left: 3px solid var(--gold); background: #fbf5e7; color: #5d574e; font-size: 12px; line-height: 1.6; }
.form-section { margin-top: 12px; border: 1px solid rgba(16,16,20,.18); border-radius: 6px; background: #fff; overflow: clip; transition: border-color .15s ease, box-shadow .15s ease; }
.form-section:hover { border-color: rgba(16,16,20,.34); }
.form-section[open] { border-color: rgba(159,31,21,.3); box-shadow: 0 8px 20px rgba(20,16,13,.05); }
.form-section > summary { min-height: 70px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; list-style: none; background: #f7f3eb; user-select: none; }
.form-section > summary::-webkit-details-marker { display: none; }
.section-summary-main { min-width: 0; display: flex; align-items: center; gap: 12px; }
.section-summary-main > span { min-width: 0; display: grid; gap: 3px; }
.form-section > summary b { width: 28px; height: 28px; display: grid; place-items: center; background: var(--ink); color: var(--gold-light); border-radius: 3px; font-size: 10px; }
.form-section > summary strong { font-size: 14px; line-height: 1.25; }
.form-section > summary em { color: var(--muted); font-size: 10px; line-height: 1.35; font-style: normal; font-weight: 550; }
.section-summary-side { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.form-section > summary small { color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.section-summary-side i { width: 10px; height: 10px; border-right: 2px solid var(--red-dark); border-bottom: 2px solid var(--red-dark); transform: rotate(45deg) translate(-2px,-2px); transition: transform .18s ease; }
.form-section[open] .section-summary-side i { transform: rotate(225deg) translate(-2px,-2px); }
.form-section[open] > summary { border-bottom: 1px solid var(--line); }
.form-section-body { padding: 12px 16px 22px; }
.field-grid { display: grid; gap: 0 14px; }
.field-grid.two { grid-template-columns: 1fr 1fr; }
.span-two { grid-column: 1 / -1; }
.field-help { margin: 8px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.advanced-select-label { display: block; margin: 17px 0 8px; font-size: 11px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.advanced-add { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.select-wrap { min-width: 0; position: relative; }
.select-wrap::after { content: ""; pointer-events: none; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translateY(-70%) rotate(45deg); }
.select-wrap select { appearance: none; padding-right: 42px; cursor: pointer; }
.advanced-add button { min-width: 104px; border: 0; padding: 0 17px; border-radius: 4px; background: var(--ink); color: #fff; font-weight: 800; cursor: pointer; }
.advanced-add button:hover { background: var(--red-dark); }
.advanced-rows { display: grid; gap: 8px; margin-top: 12px; }
.advanced-row { display: grid; grid-template-columns: 68px 1fr 34px; gap: 8px; align-items: center; }
.advanced-row code { color: var(--red-dark); font-weight: 900; }
.advanced-row input { min-height: 42px; }
.advanced-row button { width: 34px; height: 34px; border: 1px solid rgba(212,52,36,.3); background: #fff0ed; color: var(--red-dark); cursor: pointer; }
.demo-footer { display: flex; justify-content: space-between; gap: 30px; padding: 25px max(24px, calc((100vw - 1180px) / 2)); background: #08080a; color: #99948e; font-size: 12px; }
.demo-footer p { margin: 0; }
.demo-footer a { color: var(--gold-light); }
@media (max-width: 900px) {
  .demo-intro { grid-template-columns: 1fr; }
  .demo-principles { grid-column: auto; grid-row: auto; margin-top: 30px; }
  .demo-workspace { grid-template-columns: 1fr; }
  .demo-form { border-right: 0; border-bottom: 1px solid var(--line); }
  .result-empty, .result-ready { position: static; }
}
@media (max-width: 620px) {
  .demo-header { flex-wrap: wrap; padding: 12px 14px; }
  .demo-badge { display: none; }
  .demo-header-links { width: 100%; justify-content: space-between; }
  .demo-shell { width: min(100% - 28px, 1180px); padding: 55px 0 72px; }
  .demo-intro h1 { font-size: clamp(44px, 13vw, 62px); }
  .demo-workspace { margin-top: 45px; box-shadow: var(--shadow), 7px 7px 0 rgba(212,52,36,.9); }
  .demo-form, .demo-result { padding: 24px 18px; }
  .field-grid.two { grid-template-columns: 1fr; }
  .span-two { grid-column: auto; }
  .form-section > summary { min-height: 66px; padding: 11px 12px; }
  .form-section > summary em { display: none; }
  .form-section > summary small { display: none; }
  .advanced-add { grid-template-columns: 1fr; }
  .advanced-add button { min-height: 48px; }
  .result-actions { grid-template-columns: 1fr; }
  .demo-footer { flex-direction: column; }
}