.dc-facade { margin-bottom:38px; }
.dc-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin:6px 0 22px; }
.dc-eyebrow { color:#667a84; font-size:10px; letter-spacing:2px; font-weight:650; margin-bottom:9px; }
.dc-heading h1 { font-size:28px; letter-spacing:-.7px; margin:0 0 7px; color:#172d3c; }
.dc-intro { color:#73808b; font-size:13px; }
.dc-phase { color:#527180; font-size:11px; white-space:nowrap; border:1px solid #d7e1e7; padding:7px 11px; border-radius:6px; }
.dc-viewer { position:relative; height:clamp(360px,calc(100vh - 270px),650px); overflow:hidden; border:1px solid #d9e2e7; border-radius:14px; background:#d8dfe2; isolation:isolate; }
.dc-poster,.dc-canvas { position:absolute; inset:0; width:100%; height:100%; }
.dc-poster { object-fit:contain; transition:opacity .4s; }
.dc-canvas { opacity:0; transition:opacity .4s; }
.dc-canvas canvas { display:block; width:100%; height:100%; touch-action:pan-y; outline-offset:-4px; }
.dc-viewer[data-state="ready"] .dc-poster { opacity:0; pointer-events:none; }
.dc-viewer[data-state="ready"] .dc-canvas { opacity:1; }
.dc-view-label { position:absolute; left:20px; top:19px; display:flex; align-items:center; gap:7px; font-size:11px; color:#3d5867; pointer-events:none; }
.dc-live-dot { width:5px; height:5px; border-radius:50%; background:#27878c; }
.dc-load { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); max-width:90%; width:max-content; padding:11px 17px; font-size:12px; color:#274b61; background:rgba(255,255,255,.95); box-shadow:0 6px 28px #2f4b601a; border-radius:9px; text-align:center; }
.dc-load[hidden] { display:none; }
.dc-load button { color:#126d95; border:0; background:none; font:inherit; text-decoration:underline; cursor:pointer; margin-left:9px; }
.dc-view-tools { position:absolute; left:50%; bottom:43px; transform:translateX(-50%); display:flex; align-items:center; gap:3px; padding:5px; border:1px solid #ffffffb0; border-radius:10px; background:#fffffff0; box-shadow:0 4px 18px #27455c16; white-space:nowrap; }
.dc-view-tools button { border:0; border-radius:6px; background:transparent; padding:8px 13px; color:#586975; cursor:pointer; font-size:12px; line-height:1.2; }
.dc-view-tools button:hover:enabled { background:#eaf0f4; color:#204d65; }
.dc-view-tools button[aria-pressed="true"] { background:#e7eff4; color:#205e7c; font-weight:600; }
.dc-view-tools button:disabled { opacity:.45; cursor:default; }
.dc-view-tools button:focus-visible { outline:2px solid #1e7498; outline-offset:2px; }
.dc-tools-divider { height:16px; width:1px; background:#dce3e8; margin:0 3px; }
.dc-gesture { position:absolute; bottom:18px; left:0; right:0; text-align:center; color:#617580; font-size:10px; letter-spacing:.5px; pointer-events:none; }
.dc-viewer[data-state="fallback"] .dc-gesture { display:none; }
.dc-noscript { position:absolute; top:52%; width:100%; text-align:center; padding:12px; background:#fff; color:#39596b; font-size:12px; }
.dc-caption { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:13px 2px 19px; font-size:11px; line-height:1.7; color:#84909a; }
.dc-caption a { color:#587b8e; white-space:nowrap; text-decoration:none; }
.dc-caption a:hover { text-decoration:underline; }
.dc-zones { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid #e1e7eb; border-radius:10px; background:#fff; }
.dc-zones article { display:flex; gap:13px; padding:20px 18px; }
.dc-zones article+article { border-left:1px solid #e8edf0; }
.dc-zones article>span { font-size:11px; color:#9cabb4; padding-top:3px; font-variant-numeric:tabular-nums; }
.dc-zones h3 { font-size:13px; color:#354d5b; margin:0 0 7px; font-weight:600; }
.dc-zones p { font-size:11px; color:#84919a; line-height:1.8; }
.dc-flow-title { border-top:1px solid #e1e6eb; padding-top:28px; margin-bottom:9px; font-size:19px; color:#293e4c; }
@media (max-width:760px) {
  .dc-heading { margin-bottom:16px; gap:8px; }
  .dc-heading h1 { font-size:24px; }
  .dc-phase { font-size:10px; padding:6px 8px; }
  .dc-intro { font-size:11px; }
  .dc-viewer { height:390px; border-radius:10px; }
  .dc-view-label { left:13px; top:14px; }
  .dc-view-tools { gap:0; padding:4px; }
  .dc-view-tools button { padding:8px 9px; font-size:11px; }
  .dc-caption { align-items:flex-start; font-size:10px; }
  .dc-zones { grid-template-columns:1fr; }
  .dc-zones article { padding:14px 16px; }
  .dc-zones article+article { border-left:0; border-top:1px solid #e8edf0; }
  .dc-zones h3 { margin-bottom:3px; }
}
@media (prefers-reduced-motion:reduce) { .dc-poster,.dc-canvas { transition:none; } }