.app-header { height: 76px; justify-content: space-between; position: static; }
.app-header .brand img { width: 48px; height: 48px; }
.app-header .brand strong { color: var(--brand-deep); }
.app-header .brand small { margin-top: 4px; line-height: 1.5; }
.demo-badge { background: var(--accent-soft); color: #654b10; padding: 5px 12px; border-radius: 999px; font-size: 13px; flex: none; }
.home { max-width: 1136px; }
.demo-intro { border-radius: 24px; background: var(--brand-soft); padding: clamp(24px,5vw,58px); border: 1px solid var(--line-2); }
.eyebrow { margin: 0; color: var(--brand-deep); font-weight: 700; font-size: 14px; letter-spacing: .08em; }
.demo-intro h1 { margin: 5px 0 6px; font-size: clamp(30px,6vw,56px); letter-spacing: -.04em; line-height: 1.2; }
.demo-intro p:last-child { margin: 12px 0 0; max-width: 40em; color: #485e50; }
.demo-nav { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin: 18px 0; }
.demo-nav button { text-align: left; padding: 14px 16px; font: inherit; cursor: pointer; background: var(--panel); border: 1px solid var(--line-2); border-radius: 15px; color: var(--brand-deep); }
.demo-nav button strong,.demo-nav button span { display: block; }
.demo-nav button span { font-size: 12px; }
.demo-nav button strong { margin-top: 4px; font-size: 16px; }
.demo-nav button:hover { border-color: var(--brand-deep); }
.demo-nav button[aria-pressed="true"] { background: var(--brand-deep); color: #fff; border-color: var(--brand-deep); }
:focus-visible { outline: 3px solid #986f19; outline-offset: 3px; }
.demo-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: clamp(20px,4vw,42px); box-shadow: var(--shadow); }
.demo-panel h2 { margin: 5px 0; font-size: clamp(24px,4.4vw,38px); letter-spacing: -.03em; line-height: 1.3; }
.demo-summary { color: #43574a; margin: 12px 0 20px; max-width: 62em; }
.demo-detail { padding: 14px 0; border-top: 1px solid var(--line); }
.demo-detail summary { cursor: pointer; font-weight: 680; color: var(--brand-deep); }
.demo-detail p { white-space: pre-line; margin: 10px 0 0; max-width: 68em; }
.demo-figure { margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #f9fbf6; }
.demo-figure img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.demo-figure figcaption { margin-top: 12px; color: #485e50; font-size: 14px; }
.demo-footer { text-align: center; padding: 0 16px 28px; color: #4d6153; font-size: 13px; }
.sr-only { position: absolute; height: 1px; width: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 650px) {
  .app-header { gap: 8px; height: auto; min-height: 68px; padding: 10px 14px; }
  .app-header .brand { gap: 7px; }
  .app-header .brand img { width: 35px; height: 35px; }
  .app-header .brand strong { font-size: 14px; }
  .app-header .brand small { font-size: 10px; }
  .demo-badge { display: none; }
  .home { padding: 20px 14px 36px; }
  .demo-nav { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .demo-nav button { padding: 12px; }
}