.pxrd-page { --pxrd-accent:#6cd4c8; --pxrd-warn:#f3b887; --pxrd-muted:#b1c0bd; }
.pxrd-page .detail { max-width:none; }
.pxrd-overview { margin-top:22px; }
.pxrd-page .body-copy a { color:var(--pxrd-accent); text-underline-offset:3px; }
.pxrd-example-notice { padding:15px 17px; margin:24px 0 0; border-left:2px solid var(--pxrd-accent); background:#111f1d; font:calc(15px + var(--prose-size-increase))/1.65 var(--font-body); color:var(--prose); max-width:var(--prose-width); }
.pxrd-example-notice strong { color:var(--pxrd-accent); }
.pxrd-demo { margin:28px 0 0; color:#e8e4dd; font-family:var(--font-ui); }
.pxrd-demo * { box-sizing:border-box; }
.pxrd-demo [hidden] { display:none !important; }
.pxrd-demo figcaption { font-size:15px; line-height:1.5; margin-bottom:18px; }
.pxrd-step { color:var(--pxrd-accent); font-size:12px; font-weight:500; letter-spacing:.035em; }
figcaption .pxrd-step { margin-right:8px; }
.pxrd-controls { display:flex; flex-wrap:wrap; gap:15px 24px; margin-bottom:20px; }
.pxrd-controls fieldset { border:0; padding:0; margin:0; min-width:0; }
.pxrd-controls legend { padding:0; margin-bottom:8px; font-size:12px; color:var(--pxrd-muted); }
.pxrd-controls fieldset > div { display:flex; flex-wrap:wrap; gap:7px; }
.pxrd-controls button { min-height:44px; border:1px solid #344642; border-radius:5px; padding:9px 12px; background:#111919; color:#c8d2cf; font:13px/1.4 var(--font-ui); cursor:pointer; }
.pxrd-controls button[aria-pressed="true"] { color:var(--pxrd-accent); border-color:var(--pxrd-accent); background:#142e2a; }
.pxrd-controls button:hover { background:#1a302b; }
.pxrd-demo button:focus-visible, .pxrd-demo summary:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.pxrd-chart { border:1px solid #283936; background:#0a1211; border-radius:6px; overflow:hidden; }
.pxrd-chart svg { display:block; width:100%; height:auto; font-family:var(--font-ui); }
.pxrd-legend { display:flex; flex-wrap:wrap; gap:7px 18px; margin:12px 0 0; font-size:12px; line-height:1.5; color:var(--pxrd-muted); }
.pxrd-legend span { display:inline-flex; align-items:center; gap:7px; }
.pxrd-legend span::before { content:''; display:inline-block; width:18px; border-top:2px solid var(--pxrd-accent); }
.pxrd-legend .pxrd-model::before { border-color:var(--pxrd-warn); border-top-style:dashed; }
.pxrd-legend .pxrd-difference::before { border-color:#c9d5d1; }
.pxrd-result { margin-top:22px; padding:17px; border-radius:5px; background:#122421; }
.pxrd-result strong { display:block; margin:8px 0; color:var(--pxrd-accent); font-size:17px; font-weight:500; line-height:1.45; }
.pxrd-result p, .pxrd-next p { font:calc(15px + var(--prose-size-increase))/1.65 var(--font-body); color:var(--prose); margin:0; }
.pxrd-next { margin-top:18px; padding:17px; background:#111b1b; border-radius:5px; }
.pxrd-next b { display:block; font-size:14px; font-weight:500; margin-bottom:9px; }
.pxrd-method { margin-top:20px; font-size:13px; line-height:1.65; color:var(--pxrd-muted); }
.pxrd-method summary { cursor:pointer; padding:5px 0; color:#e8e4dd; }
.pxrd-method p, .pxrd-no-script { font:calc(14px + var(--prose-size-increase))/1.65 var(--font-body); color:var(--prose); margin:12px 0 0; }
@media (max-width:600px) {
  .pxrd-controls { gap:15px; }
  .pxrd-controls button { font-size:12px; padding:8px 10px; }
  .pxrd-chart { overflow-x:auto; }
  .pxrd-chart svg { min-width:490px; }
  .pxrd-demo[data-ready="true"] .pxrd-chart svg { min-width:0; }
  .pxrd-result, .pxrd-next { padding:14px; }
}
@media print { .pxrd-controls { display:none !important; } .pxrd-chart svg { min-width:0; } }