.xas-page { --xas-accent:#6cd4c8; --xas-warn:#f3b887; --xas-muted:#b1c0bd; }
.xas-page .detail { max-width:none; }
.xas-overview { margin-top:22px; }
.xas-demo { container-type:inline-size; margin:28px 0 0; color:#e8e4dd; font-family:var(--font-ui); }
.xas-demo [hidden] { display:none !important; }
.xas-demo figcaption { font-size:16px; line-height:1.5; margin-bottom:20px; }
.xas-demo figcaption > span { display:block; margin-top:6px; color:var(--xas-muted); font-size:12px; }
.xas-controls { display:flex; flex-wrap:wrap; gap:16px 24px; margin-bottom:20px; }
.xas-controls fieldset { border:0; padding:0; margin:0; min-width:0; }
.xas-controls legend { padding:0; margin-bottom:8px; font-size:12px; color:var(--xas-muted); }
.xas-controls fieldset > div { display:flex; flex-wrap:wrap; gap:7px; }
.xas-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; }
.xas-controls button[aria-pressed="true"] { color:var(--xas-accent); border-color:var(--xas-accent); background:#142e2a; }
.xas-controls button:hover { background:#1a302b; }
.xas-demo button:focus-visible, .xas-demo summary:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.xas-legend { display:flex; flex-wrap:wrap; gap:7px 20px; margin:0 0 15px; color:var(--xas-muted); font-size:12px; line-height:1.5; }
.xas-legend span { display:inline-flex; align-items:center; gap:7px; }
.xas-legend span::before { content:''; display:inline-block; width:20px; border-top:2px solid var(--xas-accent); }
.xas-legend .xas-after::before { border-color:var(--xas-warn); border-top-style:dashed; }
.xas-legend .xas-difference::before { border-color:#d3dfda; }
.xas-panels { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; }
.xas-panel { min-width:0; border:1px solid #283936; border-radius:6px; background:#0a1211; overflow:hidden; }
.xas-panel h3 { margin:0; padding:15px 13px 8px; font:500 13px/1.5 var(--font-ui); }
.xas-panel h3 > span { color:var(--xas-accent); margin-right:7px; }
.xas-panel svg { display:block; width:100%; height:auto; font-family:var(--font-ui); }
.xas-comparison, .xas-transfer { grid-column:1 / -1; }
.xas-transfer { text-align:center; margin:0; font-size:13px; line-height:1.7; color:var(--xas-muted); }
.xas-transfer > span:first-child { color:var(--xas-accent); font-size:19px; margin-right:7px; }
.xas-transfer strong { color:var(--xas-accent); font-weight:500; white-space:nowrap; }
.xas-transfer-note { display:block; font-size:12px; }
.xas-narrow { display:none; }
.xas-panel-note, .xas-metric-note { padding:0 16px 14px; margin:0; color:var(--xas-muted); font:12px/1.65 var(--font-ui); }
.xas-metrics { display:flex; flex-wrap:wrap; gap:12px 30px; margin:0; padding:0 16px 8px; font:12px/1.65 var(--font-ui); }
.xas-metrics > div { display:flex; align-items:baseline; gap:9px; }
.xas-metrics dt { color:var(--xas-muted); }
.xas-metrics dd { margin:0; color:#e8e4dd; font-size:15px; font-variant-numeric:tabular-nums; }
.xas-result { margin-top:22px; padding:17px; border-radius:5px; background:#122421; }
.xas-step { color:var(--xas-accent); font-size:12px; font-weight:500; letter-spacing:.025em; }
.xas-result strong { display:block; margin:8px 0; color:var(--xas-accent); font-size:17px; font-weight:500; line-height:1.45; }
.xas-result p, .xas-next p { font:calc(15px + var(--prose-size-increase))/1.65 var(--font-body); color:var(--prose); margin:0; }
.xas-next { margin-top:16px; padding-top:15px; }
.xas-next b { display:block; font-size:14px; font-weight:500; margin-bottom:9px; }
.xas-method { margin-top:20px; font-size:13px; line-height:1.65; color:var(--xas-muted); }
.xas-method summary { cursor:pointer; padding:8px 0; min-height:44px; color:#e8e4dd; }
.xas-method p, .xas-no-script { font:calc(14px + var(--prose-size-increase))/1.65 var(--font-body); color:var(--prose); margin:12px 0 0; }
@container (max-width:580px) {
  .xas-panels { grid-template-columns:minmax(0,1fr); }
  .xas-wide { display:none; }
  .xas-narrow { display:block; }
}
@media (max-width:600px) {
  .xas-controls button { font-size:12px; padding:8px 10px; }
  .xas-result { padding:14px; }
}
@media print { .xas-controls { display:none !important; } .xas-panel { break-inside:avoid; } }