.dq-page { --dq-accent:#6cd4c8; --dq-warn:#f3b887; --dq-muted:#b1c0bd; }
.dq-page .detail { max-width:none; }
.dq-overview { margin-top:22px; }
.dq-page .body-copy a { color:var(--dq-accent); text-underline-offset:3px; }
.dq-demo { margin:30px 0 0; color:#e8e4dd; font-family:var(--font-ui); }
.dq-demo [hidden] { display:none !important; }
.dq-demo figcaption { margin:0 0 9px; font-size:18px; line-height:1.45; font-weight:500; }
.dq-kicker { display:block; color:var(--dq-accent); margin-bottom:8px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.dq-demo-scope { font:calc(14px + var(--prose-size-increase))/1.6 var(--font-body); color:var(--prose); margin:0 0 20px; }
.dq-controls { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 24px; }
.dq-control-label { flex-basis:100%; font-size:12px; color:var(--dq-muted); margin-bottom:2px; }
.dq-controls button { min-height:44px; border:1px solid #344642; border-radius:5px; padding:9px 13px; background:#111919; color:#d1dad7; font:13px/1.4 var(--font-ui); cursor:pointer; }
.dq-controls button[aria-pressed="true"] { color:var(--dq-accent); border-color:var(--dq-accent); background:#142e2a; }
.dq-controls button:hover { background:#1b302b; }
.dq-demo :is(button,summary,.dq-table-wrap):focus-visible { outline:2px solid #fff; outline-offset:3px; }
.dq-panels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.dq-panels section { min-width:0; position:relative; }
.dq-panels section:first-child::after { content:''; position:absolute; top:145px; right:-18px; width:13px; height:9px; background:var(--dq-accent); clip-path:polygon(0 40%,65% 40%,65% 0,100% 50%,65% 100%,65% 60%,0 60%); }
.dq-panels h3 { display:flex; gap:8px; margin:0 0 13px; font:500 14px/1.5 var(--font-ui); }
.dq-panels h3 span,.dq-step { color:var(--dq-accent); }
.dq-chart { border:1px solid #283936; background:#0a1211; border-radius:5px; overflow:hidden; }
.dq-chart svg { display:block; width:100%; height:auto; font-family:var(--font-ui); }
.dq-chart-label { fill:#e8e4dd; font-size:12px; }
.dq-chart-value { fill:var(--dq-accent); font-size:19px; font-variant-numeric:tabular-nums; }
.dq-chart-note { fill:var(--dq-muted); font-size:10px; }
.dq-chart-tick { fill:#bdc7c4; font-size:11px; }
.dq-fill-0 { fill:var(--dq-accent); }
.dq-fill-1 { fill:var(--dq-warn); }
.dq-fill-2 { fill:#5f7486; }
.dq-unknown-bar { fill:#111919; stroke:#53635f; stroke-dasharray:4 4; }
.dq-grid { stroke:#293936; stroke-width:1; }
.dq-mean-line { stroke:var(--dq-accent); stroke-width:1.5; stroke-dasharray:4 4; }
.dq-portion-dot { fill:#f1f3ee; stroke:#0a1211; stroke-width:1.5; }
.dq-range-line { fill:none; stroke:var(--dq-warn); stroke-width:1.5; }
.dq-legend { display:flex; flex-wrap:wrap; gap:7px 13px; margin:11px 0 0; font:11px/1.5 var(--font-ui); color:var(--dq-muted); }
.dq-legend span { display:inline-flex; align-items:center; gap:6px; }
.dq-legend span::before { content:''; width:9px; height:9px; background:var(--dq-accent); flex-shrink:0; }
.dq-legend .dq-key-other::before { background:var(--dq-warn); }
.dq-legend .dq-key-noncrystalline::before { background:#5f7486; }
.dq-legend .dq-key-mean::before { width:16px; height:0; border-top:2px dashed var(--dq-accent); background:none; }
.dq-legend .dq-key-point::before { border-radius:50%; background:#f1f3ee; }
.dq-decision { margin-top:24px; padding:20px; background:#111f1d; border:1px solid #283e37; border-radius:5px; }
.dq-step { font-size:12px; }
.dq-verdict { display:block; margin:11px 0 17px; font:500 20px/1.4 var(--font-ui); }
.dq-pass { color:var(--dq-accent); }
.dq-hold { color:var(--dq-warn); }
.dq-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; margin:0 0 17px; }
.dq-metrics dt { font-size:12px; line-height:1.5; color:var(--dq-muted); }
.dq-metrics dd { margin:5px 0 0; font-size:26px; font-weight:400; font-variant-numeric:tabular-nums; }
.dq-metrics dd span { display:block; margin-top:4px; font-size:12px; line-height:1.5; color:var(--dq-muted); }
.dq-decision p { margin:0; font:calc(15px + var(--prose-size-increase))/1.65 var(--font-body); color:var(--prose); }
.dq-standard { margin-top:20px; padding:16px; background:#111919; border:1px solid #283936; border-radius:5px; }
.dq-standard b { font:500 13px/1.5 var(--font-ui); }
.dq-standard p { margin:8px 0 0; color:var(--prose); font:calc(14px + var(--prose-size-increase))/1.65 var(--font-body); }
.dq-standard strong { color:#d3dfda; font-weight:400; }
.dq-method { margin-top:20px; color:var(--dq-muted); font-size:13px; line-height:1.65; }
.dq-method summary { cursor:pointer; padding:6px 0; color:#e8e4dd; }
.dq-method p,.dq-no-script { color:var(--prose); font:calc(14px + var(--prose-size-increase))/1.7 var(--font-body); margin:13px 0 0; }
.dq-table-wrap { overflow-x:auto; margin-top:15px; }
.dq-table-wrap table { border-collapse:collapse; width:100%; min-width:490px; font:12px/1.6 var(--font-ui); font-variant-numeric:tabular-nums; }
.dq-table-wrap caption { color:var(--prose); text-align:left; margin-bottom:10px; font:calc(14px + var(--prose-size-increase))/1.65 var(--font-body); }
.dq-table-wrap :is(th,td) { padding:9px 10px; border-bottom:1px solid #283936; text-align:right; white-space:nowrap; }
.dq-table-wrap th:first-child { text-align:left; }
.dq-table-wrap th { color:#d3dfda; font-weight:500; }
.dq-table-wrap tbody tr:last-child { background:#111f1d; }
.dq-closing { margin-top:27px; }
.dq-example-notice { margin-top:25px; padding:15px 17px; border-left:2px solid var(--dq-accent); background:#111f1d; color:#d3dfda; }
@media (max-width:1100px) and (min-width:761px), (max-width:600px) {
  .dq-panels { grid-template-columns:1fr; gap:23px; }
  .dq-panels section:first-child::after { display:none; }
  .dq-chart svg { max-width:460px; margin:auto; }
}
@media (max-width:400px) {
  .dq-controls { gap:6px; }
  .dq-controls button { font-size:12px; padding:8px 10px; }
  .dq-decision { padding:16px; }
  .dq-metrics { gap:12px; }
  .dq-metrics dd { font-size:23px; }
}
@media print { .dq-controls { display:none !important; } .dq-panels { grid-template-columns:repeat(2,minmax(0,1fr)); } .dq-decision { break-inside:avoid; } }