/* Shared brand layer for the two standalone interactive demos. */
:root {
  --demo-radius: var(--site-radius);
  --demo-ease: 180ms ease;
  --demo-nav-height: 68px;
}
body.demo-page {
  background: var(--site-white);
  color: var(--site-ink);
  font-family: var(--site-font);
  font-size: 14px;
  letter-spacing: 0;
}
.demo-park {
  --ink: var(--site-ink); --ink-2: var(--site-ink-soft);
  --muted: var(--site-muted); --muted-2: var(--site-muted);
  --line: #e4e4e8; --line-2: #ededf0;
  --blue: var(--site-primary); --blue-deep: var(--site-primary-pressed);
  --blue-2: #edf5ff; --blue-3: #deecfd;
  --bg: var(--site-white); --paper: var(--site-white);
  --green: #287858; --green-bg: #edf8f2;
  --amber: #8b5a12; --amber-bg: #fff5e5;
  --red: #b42318; --red-bg: #fff0ef;
  --shadow: none; --radius: var(--demo-radius);
  --ai-cyan: var(--site-primary); --ai-cyan-soft: #edf5ff;
  --ai-violet: var(--site-primary); --ai-violet-soft: #f5f5f7;
}
.demo-matching {
  --brand: var(--site-primary); --brand-dark: var(--site-primary-pressed);
  --brand-light: #edf5ff; --brand-mid: #cddff4;
  --accent: var(--site-primary); --accent-deep: var(--site-primary);
  --accent-dark: var(--site-primary-pressed); --accent-ink: #fff; --accent-light: #edf5ff;
  --page: var(--site-surface-soft); --card: var(--site-white);
  --line: #e4e4e8; --line-strong: #d2d2d7;
  --t1: var(--site-ink); --t2: var(--site-ink-soft); --t3: var(--site-muted);
  --r: var(--demo-radius); --r-lg: var(--demo-radius);
  --fs-num: 36px; --fs-score: 40px; --focus: var(--site-primary);
  --z-modal: 250; --z-toast: 400;
}
.demo-page .site-nav { font-family: var(--site-font); }
.demo-page .site-nav .brand-logo { width: auto; height: 38px; border-radius: 0; }
.demo-page .site-nav .site-nav-links { line-height: 1.4; }
.demo-page .site-nav .site-nav-toggle { padding: 8px; min-height: 44px; }
.demo-context {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 48px; padding: 10px 32px; border-bottom: 1px solid var(--site-line-hair);
  background: var(--site-white); color: var(--site-muted); font-size: 12px;
}
.demo-context a { display: inline-flex; align-items: center; min-height: 28px; color: var(--site-blue); }
.demo-context a:hover { text-decoration: underline; text-underline-offset: 4px; }
.demo-page button, .demo-page input, .demo-page textarea, .demo-page select { font-family: inherit; }
.demo-page button:focus-visible, .demo-page a:focus-visible,
.demo-page input:focus-visible, .demo-page textarea:focus-visible, .demo-page select:focus-visible {
  outline: 2px solid var(--site-focus); outline-offset: 3px;
}
.demo-page button { transition: background-color var(--demo-ease), border-color var(--demo-ease), color var(--demo-ease); }
.demo-park .shell { min-height: calc(100vh - 116px); }
.demo-park .sidebar { top: var(--demo-nav-height); height: calc(100dvh - var(--demo-nav-height)); background: #fafafa; border-color: var(--line); box-shadow: none; }
.demo-park .main { padding-top: 24px; }
.demo-park .hero-title { color: var(--site-ink); font-size: 28px; font-weight: 600; line-height: 1.35; }
.demo-park .topbar { justify-content: flex-end; }
.demo-park .topline, .demo-park .label, .demo-park .ai-system-status, .demo-park .metric-meta { display: none !important; }
.demo-park .global-flow { border: 0; padding: 0; border-radius: 0; box-shadow: none; background: transparent; }
.demo-park .flow-step { border: 0; border-top: 2px solid var(--line); border-radius: 0; background: transparent; }
.demo-park .flow-step.active { border-color: var(--site-primary); background: var(--blue-2); }
.demo-park .flow-step.active span { background: var(--site-primary); box-shadow: none; }
.demo-park .nav button.active { background: var(--blue-2); color: var(--site-blue); box-shadow: none; }
.demo-park .panel { border-radius: var(--demo-radius); border-color: var(--line); box-shadow: none; }
.demo-park .search-hero, .demo-park .quick-card, .demo-park .briefing-cover { background: var(--site-surface-soft); }
.demo-park .search-form { background: var(--site-white); border-color: var(--site-line); box-shadow: none; border-radius: var(--demo-radius); }
.demo-park .search-form:focus-within { border-color: var(--site-primary); box-shadow: 0 0 0 3px rgba(0,113,227,.12); }
.demo-park .btn.primary, .demo-park .search-submit { background: var(--site-primary); border-color: var(--site-primary); color: #fff; box-shadow: none; }
.demo-park .btn.primary:hover, .demo-park .search-submit:hover { background: var(--site-primary-pressed); }
.demo-park .btn.soft { background: var(--blue-2); color: var(--site-blue); border-color: transparent; }
.demo-park .btn, .demo-park .search-submit, .demo-park .quick-action { border-radius: var(--demo-radius); }
.demo-park .btn { border-radius: var(--site-button-radius); }
.demo-park .metric { border: 0; border-radius: 0; padding: 12px 8px; background: transparent; min-height: 76px; }
.demo-park .metric b { font-size: 28px; color: var(--site-ink); }
.demo-park .metric:hover, .demo-park .park-card:hover, .demo-park .watch-card:hover { transform: none; box-shadow: none; }
.demo-park .analysis-status.show { background: var(--blue-2); border-color: transparent; }
.demo-park .analysis-status.done { background: var(--green-bg); }
.demo-park .loading-line i { background: var(--site-primary); box-shadow: none; }
.demo-park .park-card.selected { border-color: var(--site-primary); box-shadow: 0 0 0 2px rgba(0,113,227,.1); }
.demo-park .enterprise-profile-hero { background: var(--site-surface-soft); border-color: transparent; }
.demo-park .enterprise-drawer { z-index: 240; }
.demo-park .modal-backdrop { z-index: 250; }
.demo-park .selection-tray { background: var(--site-ink); box-shadow: var(--site-shadow-float); }
.demo-matching > main { min-height: calc(100vh - 116px); }
.demo-matching .screen { min-height: calc(100vh - 116px); }
.demo-matching .s1wrap { padding-top: 40px; }
.demo-matching h1 { color: var(--site-ink); font-size: 36px; font-weight: 600; }
.demo-matching h1 em { border: 0; color: var(--site-ink); }
.demo-matching .badge { background: transparent; border: 0; border-radius: 0; color: var(--site-muted); padding: 0; }
.demo-matching .kpis { padding: 24px 0; border-block: 1px solid var(--site-line-hair); background: transparent; }
.demo-matching .kpi { min-width: 150px; padding: 0 12px; background: transparent; border: 0; border-radius: 0; }
.demo-matching .kpi b { color: var(--site-ink); font-size: 36px; font-weight: 600; }
.demo-matching .step { background: transparent; border: 0; border-top: 2px solid var(--line); border-radius: 0; }
.demo-matching .step .n { color: var(--site-blue); }
.demo-matching .btn { border-radius: var(--site-button-radius); }
.demo-matching .btn.acc { background: var(--site-primary); color: #fff; }
.demo-matching .btn.acc:hover { background: var(--site-primary-pressed); }
.demo-matching .topbar { top: var(--demo-nav-height); background: var(--site-white); }
.demo-matching .wrap { width: 100%; }
.demo-matching .panel { box-shadow: none; }
.demo-matching .card.best { background: var(--site-white); border-color: var(--site-primary); }
.demo-matching .sumline .box { color: var(--site-ink); }
/* Orange remains only as a semantic maximum marker in the existing score legend. */
.demo-matching .bar.top .bf, .demo-matching .sd.top .sdf { background: #ba7517; }
.demo-matching .bar.top .bv, .demo-matching .sd.top .sdv { color: #8a4f0a; }
.demo-matching .ent-card { border-radius: 0; background: transparent; padding: 0 0 14px; border-bottom: 1px solid var(--line); }
.demo-page .page.active, .demo-page .screen.on { animation: demo-view-enter 180ms ease-out; }
@keyframes demo-view-enter { from { opacity: .65; } to { opacity: 1; } }
@media (max-width: 760px) {
  .demo-context { padding: 8px 20px; flex-wrap: wrap; gap: 4px 16px; }
  .demo-park .sidebar { top: 0; height: auto; position: relative; background: var(--site-white); }
  .demo-park .hero-title { font-size: 24px; }
  .demo-matching h1 { font-size: 28px; }
  .demo-matching .s1wrap { padding: 28px 20px 40px; }
  .demo-matching .topbar { height: auto; min-height: 58px; flex-wrap: wrap; gap: 12px; padding: 12px 16px; }
  .demo-matching .tb-l, .demo-matching .tb-r { flex-wrap: wrap; min-width: 0; }
  .demo-matching .cta { flex-wrap: wrap; }
  .demo-matching .kpi { min-width: 120px; }
  .demo-page .btn, .demo-page .search-submit, .demo-page .example, .demo-page .quick-action { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-page *, .demo-page *::before, .demo-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}