/* Demo-specific layout; the shared site stylesheet owns navigation and branding. */
.demo-page { background:var(--wash); }
.demo-main { padding:36px 0 56px; min-height:60vh; }
.demo-main>.container { max-width:1100px; }
.demo-intro { margin-bottom:28px; }
.demo-intro .breadcrumb { padding:0; background:transparent; }
.demo-intro h1 { font-size:clamp(2rem,4vw,3rem); }
.demo-intro .breadcrumb { margin-bottom:20px; }
.demo-stage { padding:28px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; }
.demo-main #cameraContainer { height:auto; }
.demo-main #canvasOutput { display:block; margin:0 auto; max-width:100%; height:auto; border-radius:8px; background:var(--ink); }
.demo-main #videoInput { max-width:100%; height:auto; }
.demo-main #loadingMessage { display:flex; flex-direction:column; justify-content:center; align-items:center; min-height:180px; padding:28px 16px; color:var(--muted); }
.demo-main #loadingMessage>br { display:none; }
.demo-main .loader { display:flex; align-items:center; gap:14px; font-size:1rem; font-weight:600; }
.demo-main .loader:before { content:""; width:25px; height:25px; border:3px solid var(--line); border-top-color:#a85100; border-radius:50%; animation:demo-loading .85s linear infinite; }
.demo-main .loader:after { content:"Loading demo…"; }
.demo-main .progress { background:#e8edf0; border-radius:6px; overflow:hidden; }
.demo-main .progress-bar { background:var(--ink); color:#fff; }
.demo-main select { max-width:100%; min-height:44px; padding:8px 12px; border:1px solid #a8b9c3; border-radius:6px; background:#fff; color:var(--ink); }
.demo-main .info-bubble { display:block; padding:20px 24px; background:var(--orange-light); border-left:3px solid var(--orange); border-radius:8px; color:var(--ink); font-size:.94rem; line-height:1.7; }
.demo-main .info-bubble p { text-align:left; }
.demo-main .pulse-button,.demo-main .project-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:12px 20px; border:1px solid transparent; border-radius:7px; background:var(--ink)!important; color:#fff!important; font-weight:650; text-decoration:none; animation:none; }
.demo-main .pulse-button:hover,.demo-main .project-btn:hover { background:#294b5b!important; text-decoration:none; }
.demo-main #errorMessage:empty { display:none; }
.demo-main #errorMessage:not(:empty) { margin:16px 0; padding:16px 20px; border:1px solid #dcb7a1; border-radius:8px; background:#fff4ed; color:#7d321a; overflow-wrap:anywhere; }
.demo-page .dms-demo-selector,.demo-page .dms-image-demo { margin-top:0; margin-bottom:0; }
.demo-page .intro-panel,.demo-page .dms-image-toolbar { padding:28px; background:var(--orange-light); border:1px solid #efd6b6; border-radius:var(--radius); }
.demo-page .intro-panel h1,.demo-page .dms-image-toolbar h1 { font-size:clamp(2rem,4vw,3rem); color:var(--ink); }
.demo-page .intro-panel p,.demo-page .dms-image-toolbar p { color:var(--muted); }
.demo-page .demo-choice-card { border-color:var(--line); border-radius:var(--radius); color:var(--ink); transition:border-color .18s,box-shadow .18s; }
.demo-page .demo-choice-card:hover { color:var(--ink); transform:none; border-color:#aebfc8; box-shadow:0 8px 24px #19303b0b; }
.demo-page .demo-choice-card h2 { color:var(--ink); }
.demo-page .demo-choice-card .project-btn { align-self:flex-start; margin-top:24px; }
.demo-page .demo-choice-icon { background:var(--orange-light); border-color:var(--ink); border-radius:10px; }
.demo-page .dms-image-panel { border-color:var(--line); border-radius:var(--radius); }
.demo-page .dms-canvas-frame { border-color:var(--line); border-radius:8px; background:var(--wash); }
.demo-page .dms-file-label { border-radius:7px; background:var(--ink); min-height:48px; }
.demo-page .dms-file-label:focus-within { outline:3px solid #007b62; outline-offset:4px; }
@keyframes demo-loading { to { transform:rotate(360deg); } }
@media(max-width:600px) {
  .demo-main { padding:24px 0 38px; }
  .demo-stage,.demo-page .intro-panel,.demo-page .dms-image-toolbar { padding:20px; }
  .demo-main .info-bubble { padding:16px 18px; }
  .demo-page .demo-choice-card { padding:22px; min-width:0; }
  .demo-page .demo-choice-deck { gap:16px; }
}
@media(prefers-reduced-motion:reduce) { .demo-main .loader:before { animation:none; } }