:root{
  --bg:#0b1120;
  --bg-soft:#eef4fb;
  --paper:#ffffff;
  --paper-2:#f6f9fd;
  --line:#dbe6f3;
  --text:#142032;
  --muted:#5d6d84;
  --brand:#0f6cbd;
  --brand-2:#dcecff;
  --brand-3:#0b4d84;
  --warn:#f8e6b3;
  --success:#d8f3e0;
  --danger:#ffd7d7;
  --shadow:0 18px 50px rgba(15,33,61,.08);
  --radius:18px;
  --mono:"JetBrains Mono",Consolas,monospace;
  --sans:"Inter",Segoe UI,Arial,sans-serif;
  --sticky-banner-offset: 0px;
  --sticky-workbench-offset: 220px;
  --fixed-header-clearance: 220px;
}
*{box-sizing:border-box}

.skip-link{position:absolute;left:16px;top:8px;z-index:50000;transform:translateY(-140%);background:#fff;color:#0b4d84;border:3px solid #0b4d84;border-radius:8px;padding:10px 14px;font-weight:800;box-shadow:0 8px 18px rgba(0,0,0,.18)}
.skip-link:focus{transform:translateY(0)}
:focus-visible{outline:3px solid #ffbf47;outline-offset:3px}
.tab:focus-visible,.subtab:focus-visible,.output-tab:focus-visible,.ghost-btn:focus-visible,.text-link:focus-visible,.shortcut-chip:focus-visible,.acc-head:focus-visible,.quick-sample-btn:focus-visible,.open-workbench-btn:focus-visible,.buttonrow button:focus-visible,.sample-lang-btn:focus-visible,.modal-close-btn:focus-visible{outline:3px solid #ffbf47;outline-offset:3px;box-shadow:0 0 0 5px rgba(11,77,132,.35)}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
html,body{margin:0;padding:0;font-family:var(--sans);background:linear-gradient(180deg,#0b1120 0,#0b1120 120px,var(--bg-soft) 320px,#f8fbff 100%);color:var(--text)}
button,input,select,textarea{font:inherit}
a{text-decoration:none;color:var(--brand)}
.shell{max-width:1560px;margin:0 auto;padding:28px 24px 48px}
.hero{display:grid;grid-template-columns:1.4fr .95fr;gap:24px;align-items:stretch;color:#fff;margin-bottom:22px}
.hero-copy{padding:18px 4px 10px}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#a5c5e8}
.eyebrow.dark{color:var(--brand)}
.hero h1{font-size:clamp(2rem,5vw,3.6rem);line-height:1.05;margin:.35rem 0 .7rem;font-weight:800;letter-spacing:-.04em}
.hero-subtitle{max-width:840px;font-size:1.05rem;line-height:1.65;color:#d4e4f6;margin:0}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.hero-btn{border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.08);backdrop-filter:blur(10px);color:#fff;padding:12px 16px;border-radius:999px;cursor:pointer;font-weight:600}
.hero-btn.primary{background:#fff;color:var(--brand-3);border-color:#fff}
.hero-card{padding:22px;border-radius:22px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);box-shadow:0 30px 60px rgba(0,0,0,.18)}
.glass{backdrop-filter:blur(14px)}
.status-row{display:flex;gap:10px;align-items:center;color:#d7e7fb;font-size:.95rem;font-weight:600;margin-bottom:10px}.dot{width:10px;height:10px;border-radius:50%;background:#71e388;box-shadow:0 0 0 4px rgba(113,227,136,.18)}
.hero-card h3{margin:.2rem 0 .6rem;font-size:1.35rem}.hero-card p{margin:0;color:#d4e4f6;line-height:1.6}
.mini-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}
.mini-grid > div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);padding:14px;border-radius:14px}
.mini-label{font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;color:#aecdff;font-weight:700}.mini-value{margin-top:6px;color:#fff}.mono{font-family:var(--mono);font-size:.85rem;word-break:break-word}
.tabs{display:flex;gap:10px;flex-wrap:wrap;position:sticky;top:var(--sticky-banner-offset, 0px);z-index:1100;background:rgba(248,251,255,.92);backdrop-filter:blur(12px);padding:16px;border-radius:20px;border:1px solid rgba(219,230,243,.85);box-shadow:var(--shadow);margin-bottom:24px}
.tab,.subtab,.output-tab,.ghost-btn,.text-link{border:1px solid var(--line);background:#fff;color:var(--text);padding:11px 14px;border-radius:999px;cursor:pointer;font-weight:600}
.tab.active,.subtab.active,.output-tab.active{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 12px 24px rgba(15,108,189,.18)}
.main{display:block}
.panel{display:none}.panel.active{display:block}
.grid{display:grid;gap:18px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.card.inset{background:var(--paper-2);box-shadow:none}
.feature-card{display:flex;gap:16px;align-items:flex-start}.icon-badge{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--brand-2);color:var(--brand);font-weight:800;font-size:1.1rem;flex:0 0 auto}
.feature-card h2,.shortcut-card h3,.timeline-card h3,.surface-head h3,.sectionhead h2{margin:.15rem 0 .45rem}
.feature-card p,.shortcut-card p,.timeline-card p,.sectionhead p,.surface-head p{margin:0;color:var(--muted);line-height:1.65}
.stat-row{margin-top:18px}.stat-card{text-align:center;padding:24px}.stat-number{font-size:2.4rem;font-weight:800;color:var(--brand);letter-spacing:-.03em}.stat-label{color:var(--muted);margin-top:6px}
.card-kicker{font-size:.78rem;text-transform:uppercase;letter-spacing:.13em;color:var(--brand);font-weight:800;margin-bottom:10px}
.text-link{border:none;background:none;padding:0;margin-top:12px;color:var(--brand);box-shadow:none}
.sectionhead{display:flex;justify-content:space-between;gap:16px;align-items:flex-end;margin-bottom:18px;background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow)}
.sectionhead h2{color:var(--text)}
.sectionhead p{color:#42526b}
.sectionhead .eyebrow.dark{color:var(--brand-3)}
.section-actions{display:flex;gap:10px}
.ghost-btn{background:#fff}.ghost-btn.danger{color:#b22929;border-color:#f0c7c7}
.methods-toolbar{display:flex;gap:16px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.methods-toolbar input{flex:1 1 320px;min-width:260px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fff}
.method-shortcuts{display:flex;gap:8px;flex-wrap:wrap}
.shortcut-chip{padding:9px 12px;border-radius:999px;background:var(--paper-2);border:1px solid var(--line);cursor:pointer;font-size:.92rem;font-weight:600}
.accordion{display:grid;gap:12px}
.acc-item{background:var(--paper);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.acc-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;width:100%;background:transparent;border:0;padding:18px 20px;cursor:pointer;text-align:left}
.acc-head:hover{background:#f9fbff}.acc-title{display:flex;gap:12px;align-items:flex-start}.pill{display:inline-grid;place-items:center;padding:6px 10px;border-radius:999px;background:var(--brand-2);color:var(--brand);font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;min-width:58px}.endpoint{font-family:var(--mono);font-size:.82rem;color:var(--muted);margin-top:6px;word-break:break-word}.acc-toggle{font-size:1.5rem;color:var(--muted);line-height:1}
.acc-body{display:none;padding:0 20px 20px}.acc-item.open .acc-body{display:block}.acc-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;margin-top:16px}.panel-card{background:var(--paper-2);border:1px solid var(--line);border-radius:16px;padding:16px}
.param-table{width:100%;border-collapse:collapse;font-size:.94rem}.param-table th,.param-table td{padding:11px 10px;border-top:1px solid var(--line);text-align:left;vertical-align:top}.param-table th{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.bullets{margin:10px 0 0;padding-left:18px}.bullets li{margin:0 0 8px;color:var(--text);line-height:1.5}.empty-note{color:var(--muted)}
.timeline{display:grid;gap:16px}.timeline-card{display:grid;grid-template-columns:58px 1fr;gap:16px;align-items:flex-start}.timeline-step{width:58px;height:58px;border-radius:18px;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:800;font-size:1.2rem}.note-row{display:flex;gap:10px;margin-top:14px;background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:12px 14px;align-items:flex-start}.note-label{display:inline-block;padding:6px 10px;border-radius:999px;background:var(--brand-2);color:var(--brand);font-size:.76rem;font-weight:800;white-space:nowrap}.note-label.warn{background:var(--warn);color:#876100}.note-label.success{background:var(--success);color:#0f7a40}
.example-tabs,.output-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}.example-code-toolbar{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:12px}.example-code-toolbar h3{margin:0}.code-surface pre,.output-panel{background:#0b1220;color:#edf4fd;border-radius:18px;padding:18px;min-height:420px;max-height:68vh;overflow:auto;white-space:pre;word-break:normal;font-family:var(--mono);font-size:.88rem;line-height:1.65;margin:0}.code-surface{padding:16px}
.workbench-grid{display:grid;grid-template-columns:minmax(560px,1fr) 560px;gap:18px;align-items:start}.sticky-output{align-self:start}.sticky-output .output-surface{position:sticky;top:var(--sticky-workbench-offset, 220px)}#workbench{scroll-margin-top:var(--fixed-header-clearance, 220px)}
.surface-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:16px}.surface-head.compact{align-items:center}.badge-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.status-badge{display:inline-block;padding:8px 11px;border-radius:999px;background:var(--brand-2);color:var(--brand);font-size:.78rem;font-weight:800}.status-badge.muted{background:#eef2f7;color:var(--muted)}.compact-preset-btn{padding:8px 11px;font-size:.78rem;line-height:1.2}
.preset-summary{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:16px}.preset-summary h3{margin:.1rem 0 .35rem}.preset-summary p{margin:0;color:var(--muted);line-height:1.55}.preset-bar{display:flex;justify-content:space-between;gap:18px;align-items:end;margin-bottom:16px}.preset-left{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;flex:1}.preset-actions{display:flex;gap:10px;flex-wrap:wrap}
.formgrid,.paramfields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
label{display:flex;flex-direction:column;gap:7px;font-weight:700;font-size:.92rem}
input,select,textarea{padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--text)}
.params-card{margin-top:16px}.paramfields{margin-top:4px}.param-meta{font-size:.8rem;color:var(--muted);line-height:1.5}.param-chip{display:inline-block;padding:3px 8px;border-radius:999px;background:#eef2f7;color:var(--muted);font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;margin-right:6px}.param-chip.required{background:var(--brand-2);color:var(--brand)}
.buttonrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.buttonrow button{padding:12px 15px;border-radius:14px;border:1px solid var(--line);background:#fff;cursor:pointer;font-weight:700}.buttonrow .primary{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 16px 26px rgba(15,108,189,.18)}
.tiny{font-size:.83rem;color:var(--muted);line-height:1.5;margin-top:10px}
.site-footer{margin-top:24px}
.footer-disclaimer{background:#fff;border:1px solid var(--line);border-left:5px solid var(--brand);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);color:var(--text);font-size:.94rem;line-height:1.65}
.footer-disclaimer strong{color:var(--brand-3);font-weight:800}
.output-surface{padding:18px}.output-panels{position:relative}.output-panel{display:none;min-height:560px}.output-panel.active{display:block}
.code-inline{font-family:var(--mono);font-size:.85rem}
@media (max-width:1200px){
  .hero,.grid.three,.workbench-grid,.acc-grid,.grid.two{grid-template-columns:1fr}
  .sticky-output .output-surface{position:static}
  .mini-grid,.preset-left,.formgrid,.paramfields{grid-template-columns:1fr}
  .sectionhead,.surface-head,.preset-bar,.preset-summary{flex-direction:column;align-items:stretch}
}
.wqx-header {
  background: #ffffff;
  border-bottom: 1px solid #dfe3e8;
  padding: 28px 32px 20px;
}

.wqx-header-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

.wqx-title-block {
  max-width: 720px;
}

.wqx-eyebrow {
  font-size: 12px;
  color: #6b7280;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.wqx-title {
  font-size: 28px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 8px 0;
}

.wqx-subtitle {
  font-size: 15px;
  color: #4b5563;
  line-height: 1.5;
  margin: 0;
}

.wqx-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.wqx-btn {
  padding: 8px 14px;
  font-size: 13px;
  border-radius: 4px;
  border: 1px solid #cbd5e1;
  background: #f9fafb;
  cursor: pointer;
  text-decoration: none;
  color: #1f2937;
}

.wqx-btn.primary {
  background: #005ea2;
  color: #fff;
  border-color: #005ea2;
}

.wqx-btn:hover {
  background: #e5e7eb;
}

.wqx-btn.primary:hover {
  background: #004b8d;
}

/* Info panel */
.wqx-info-panel {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

.wqx-info-item {
  font-size: 13px;
}

.wqx-info-item .label {
  color: #6b7280;
  font-weight: 500;
  margin-bottom: 2px;
}

.wqx-info-item .value {
  color: #111827;
}

.mono {
  font-family: monospace;
  font-size: 12px;
}


/* Sticky EPA banner and tabs */
.us-banner{
  position:sticky;
  top:0;
  z-index:1200;
  margin:0 0 14px;
}
.us-banner-inner{
  display:flex;
  align-items:center;
  gap:16px;
  background:linear-gradient(180deg,#103b69 0%, #0c2f54 100%);
  color:#fff;
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px;
  padding:14px 18px;
  box-shadow:0 14px 35px rgba(11,33,61,.24);
}
.banner-logo{
  width:56px;
  height:56px;
  flex:0 0 56px;
  background:#fff;
  border-radius:50%;
  padding:6px;
}
.banner-top{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#c8def5}
.banner-bottom{font-size:1.25rem;font-weight:800;letter-spacing:-.02em}
.header-badges{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pill{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:8px 12px;font-size:.82rem;font-weight:700}
.version-pill{background:#e8f1fb;color:#123456}
.env.test{background:#fff3c4;color:#674d00}
.env.prod{background:#daf5e1;color:#0f5132}
.status.unknown{background:#eef2f7;color:#42526b}
.status.online{background:#daf5e1;color:#0f5132}
.status.offline{background:#ffe2e2;color:#8b1e1e}

.wqx-header{margin-bottom:14px}
.tabs{
  position:sticky;
  top:90px;
  z-index:1100;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:24px;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(255,255,255,.96);
  border:1px solid #d4dfed;
  box-shadow:0 12px 26px rgba(15,33,61,.1);
  backdrop-filter:blur(12px);
}
.tab{
  background:#fff;
  border:1px solid #d4dfed;
  border-radius:999px;
  padding:10px 16px;
  font-weight:700;
  color:#24415f;
}
.tab:hover{background:#f2f7fd}
.tab.active{
  background:linear-gradient(180deg,#0f6cbd 0%, #0b5aa2 100%);
  color:#fff;
  border-color:#0b5aa2;
  box-shadow:0 8px 18px rgba(15,108,189,.24);
}

/* Quick sample buttons */
.quick-sample-actions{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 0}
.quick-sample-btn{
  border:1px solid #d4dfed;
  background:#fff7cc;
  color:#5c4a00;
  border-radius:999px;
  padding:8px 12px;
  font-weight:700;
  cursor:pointer;
}
.quick-sample-btn:hover{background:#ffef9c}

/* Modal */
.sample-modal[aria-hidden="true"]{display:none}
.sample-modal{
  position:fixed;
  inset:0;
  z-index:2000;
}
.sample-modal-backdrop{
  position:absolute; inset:0; background:rgba(7,19,34,.62);
}
.sample-modal-dialog{
  position:relative;
  width:min(1100px, calc(100vw - 32px));
  max-height:calc(100vh - 40px);
  overflow:hidden;
  margin:20px auto;
  background:#fff;
  border-radius:18px;
  box-shadow:0 28px 60px rgba(0,0,0,.28);
  display:flex;
  flex-direction:column;
}
.sample-modal-header{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:20px 22px 12px; border-bottom:1px solid #e1e8f0;
}
.modal-eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:#0f6cbd}
.sample-modal-header h3{margin:6px 0 4px;font-size:1.35rem}
.sample-modal-subtitle{color:#5d6d84}
.modal-close-btn{
  border:1px solid #d4dfed; background:#fff; border-radius:999px; width:40px; height:40px; cursor:pointer; font-size:1.4rem;
}
.sample-lang-tabs{
  display:flex; flex-wrap:wrap; gap:10px; padding:14px 22px 10px; border-bottom:1px solid #eef2f7; background:#f8fbff;
}
.sample-lang-btn{
  border:1px solid #d4dfed; background:#fff; border-radius:999px; padding:8px 14px; font-weight:700; cursor:pointer; color:#24415f;
}
.sample-lang-btn.active{background:#0f6cbd; color:#fff; border-color:#0f6cbd}
.sample-modal-toolbar{
  display:flex; justify-content:space-between; gap:16px; align-items:center; padding:12px 22px; background:#fffdf2; border-bottom:1px solid #f1e5a8;
}
.sample-modal-note{font-size:.93rem; color:#6b5800}
.sample-code-wrap{padding:0; overflow:auto; background:#0b1220}
.sample-code-block{
  margin:0; padding:22px; min-height:420px; white-space:pre; word-break:normal;
  font-family:var(--mono); color:#edf4fd; line-height:1.65; font-size:.88rem;
}

.preset-modal-dialog{width:min(760px, calc(100vw - 32px))}
.preset-modal-body{padding:20px 22px 22px;background:#fff}
.preset-modal-body .preset-bar{margin-bottom:0}
.code-comment{color:#7ea8d8}
.code-key{color:#8ec5ff}
.code-string{color:#b8f3c6}
.code-placeholder{background:#ffef85; color:#493900; padding:1px 4px; border-radius:4px; font-weight:800}
.code-url{color:#f2c38b}

/* line-numbered code examples */
.line-numbered-code,.sample-code-block,.howto-code,.code-surface pre{
  white-space:pre !important;
  word-break:normal !important;
  overflow:auto !important;
}
.code-line{
  display:grid;
  grid-template-columns:4.25em max-content;
  min-width:max-content;
  line-height:1.65;
}
.line-no{
  user-select:none;
  color:#92a4ba;
  text-align:right;
  padding-right:12px;
  margin-right:14px;
  border-right:1px solid rgba(226,236,247,.28);
  background:#0b1220;
  position:sticky;
  left:0;
  z-index:1;
}
.line-code{white-space:pre}

@media (max-width: 900px){
  .us-banner-inner{align-items:flex-start; flex-wrap:wrap}
  .header-badges{margin-left:0}
  .tabs{top:124px}
}

/* requested sticky header/tab fixes */
body{padding-top:170px;}
.shell{overflow:visible !important;}
.us-banner{
  position:fixed !important;
  top:0 !important;
  left:0;
  right:0;
  z-index:4000 !important;
  margin:0 !important;
  padding:0 24px;
  background:transparent;
}
.us-banner-inner{
  max-width:1560px;
  margin:0 auto;
}
.tabs{
  position:fixed !important;
  top:70px !important;
  left:50%;
  transform:translateX(-50%);
  width:min(1512px, calc(100% - 48px));
  z-index:3900 !important;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  background:rgba(255,255,255,.98) !important;
  border:1px solid rgba(201,213,226,.95) !important;
  box-shadow:0 10px 24px rgba(16,42,67,.12);
}
.wqx-header{margin-top:10px;}
.quick-sample-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0 12px;
}
.quick-sample-btn,.open-workbench-btn{
  appearance:none;
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  padding:9px 12px;
  border-radius:999px;
  font-weight:600;
  cursor:pointer;
}
.quick-sample-btn:hover,.open-workbench-btn:hover{background:#eef4f9;}
.method-workbench-row{margin-top:10px;}
.method-workbench-row .open-workbench-btn{background:#005ea2;border-color:#005ea2;color:#fff;}
.method-workbench-row .open-workbench-btn:hover{background:#004b84;}
@media (max-width: 960px){
  body{padding-top:205px;}
  .us-banner{padding:0 14px;}
  .tabs{
    width:calc(100% - 28px);
    top:120px !important;
    overflow-x:auto;
    flex-wrap:nowrap;
    justify-content:flex-start;
  }
}
@media (max-width: 640px){
  body{padding-top:230px;}
  .tabs{top:138px !important;}
}


.browser-upload.hidden{display:none}
.browser-upload .formgrid.single{grid-template-columns:1fr}
.browser-upload input[type="file"]{
  margin-top:8px;
  display:block;
  width:100%;
  border:1px dashed #9db4c8;
  border-radius:12px;
  padding:14px;
  background:#f8fbfd;
}


.output-panel.error {
  border: 1px solid #dc2626 !important;
  background: #fff5f5 !important;
  color: #7f1d1d !important;
}
.output-panel.success {
  border: 1px solid #16a34a !important;
  background: #f0fdf4 !important;
  color: #14532d !important;
}
#resultPreview, #tracePreview {
  max-height: 420px;
  overflow: auto;
  white-space: pre;
  word-break: normal;
}

.sample-modal{position:fixed!important;inset:0!important;z-index:20000!important;}
.sample-modal-dialog{position:relative;z-index:20001;}
.sample-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5);}
.us-banner{z-index:1000!important;}
.tabs{z-index:1001!important;}


.howto-stack{display:grid;gap:22px}
.howto-flow{display:grid;gap:18px}
.howto-flow-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;flex-wrap:wrap}
.howto-flow-head h3,.variant-card h4{margin:.15rem 0 .45rem}
.howto-intro{margin:0;color:var(--muted);line-height:1.7;max-width:80ch}
.compact-note{max-width:520px;margin-top:0}
.step-detail{background:var(--paper-2);box-shadow:none}
.step-detail p{color:var(--text)}
.param-list{margin:12px 0 0;padding-left:18px}
.param-list li{margin:0 0 10px;line-height:1.55;color:var(--text)}
.howto-code{margin:14px 0 0;background:#0b1220;color:#edf4fd;border-radius:16px;padding:16px;overflow:auto;white-space:pre;word-break:normal;font-family:var(--mono);font-size:.88rem;line-height:1.65}
.step-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
.variant-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px}
input.highlight-required:placeholder-shown{background:#fff8bf;border-color:#e0c754}
input.highlight-required::placeholder{color:#6c5700}
@media (max-width:1200px){.step-split{grid-template-columns:1fr}}


/* full-width square EPA banner and tabs */
.us-banner{
  left:0 !important;
  right:0 !important;
  width:100% !important;
  padding:0 !important;
  margin:0 !important;
}
.us-banner-inner{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  border-radius:0 !important;
  border-left:0 !important;
  border-right:0 !important;
  box-shadow:none !important;
  padding:14px 24px !important;
}
.banner-logo{
  width:120px;
  height:auto;
  flex:0 0 120px;
  background:none !important;
  border-radius:0 !important;
  padding:0 !important;
  fill:currentColor;
  color:#ffffff;
}
.tabs{
  left:0 !important;
  right:0 !important;
  transform:none !important;
  width:100% !important;
  margin:0 !important;
  border-radius:0 !important;
  border-left:0 !important;
  border-right:0 !important;
  box-shadow:none !important;
  padding:12px 24px !important;
}
@media (max-width: 960px){
  .us-banner-inner{padding:14px !important;}
  .tabs{width:100% !important; padding:10px 14px !important;}
}


html[data-show-local-proxy-ui="false"] [data-local-proxy-ui]{display:none !important}
html[data-show-local-signing-ui="false"] [data-local-signing-ui]{display:none !important}
.proxy-toggle-field{grid-column:span 2}
.proxy-toggle-row{display:flex;align-items:center;gap:12px;margin-top:8px}
.proxy-toggle-row input{position:absolute;opacity:0;pointer-events:none}
.proxy-toggle-slider{position:relative;display:inline-block;width:54px;height:30px;border-radius:999px;background:#bfc9d7;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);transition:background .2s ease;flex:0 0 auto}
.proxy-toggle-slider::after{content:'';position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s ease}
#useProxy:checked + .proxy-toggle-slider{background:#005ea2}
#useProxy:checked + .proxy-toggle-slider::after{transform:translateX(24px)}
.proxy-toggle-copy{font-weight:700;color:#15314b}
.proxy-help{display:block;margin-top:8px;color:#516173;font-size:.86rem;line-height:1.5}
.proxy-help code{font-family:var(--mono)}
@media (max-width: 900px){.proxy-toggle-field{grid-column:span 1}}

.subtab:hover,.subtab:focus-visible,.output-tab:hover,.output-tab:focus-visible,.ghost-btn:hover,.ghost-btn:focus-visible,.shortcut-chip:hover,.shortcut-chip:focus-visible{background:#f2f7fd}
.tab.active:focus-visible,.subtab.active:focus-visible,.output-tab.active:focus-visible{background:var(--brand);color:#fff;border-color:var(--brand)}


/* Private Key tab */
.private-key-stack{display:grid;gap:18px}
.private-key-intro h3,.private-key-step h3{margin:.15rem 0 .55rem;color:var(--text)}
.private-key-intro p,.private-key-step p{margin:.55rem 0 0;color:var(--text);line-height:1.7;max-width:92ch}
.private-key-intro code,.private-key-step code{font-family:var(--mono);background:#edf4fd;border:1px solid var(--line);border-radius:6px;padding:1px 5px;color:#0b4d84}
.private-key-steps{display:grid;gap:16px}
.private-key-step{display:grid;grid-template-columns:58px 1fr;gap:16px;align-items:flex-start;background:var(--paper-2);box-shadow:none}
.private-key-figure{margin:16px 0 0;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;overflow:hidden}
.private-key-figure img{display:block;max-width:100%;height:auto;border-radius:10px;border:1px solid #d7e2ef;background:#fff}
.private-key-figure.wide img{width:100%}
.private-key-figure.compact img{max-width:560px}
.private-key-figure.dialog img{max-width:560px}
.private-key-figure.overview img{max-width:860px}
.private-key-figure figcaption{margin-top:10px;color:var(--muted);font-size:.92rem;line-height:1.5}
.private-key-note{max-width:920px}
@media (max-width: 760px){.private-key-step{grid-template-columns:1fr}.private-key-step .timeline-step{width:48px;height:48px;border-radius:14px}}


.howto-code-actions{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.howto-code-actions .ghost-btn{background:#fff;border-color:#b7c6d8}
.howto-code-actions .ghost-btn:hover,.howto-code-actions .ghost-btn:focus-visible{background:#f2f7fd}

/* Preserve Workbench output panel wrapping while code examples use horizontal scrolling. */
.output-panel{white-space:pre-wrap!important;word-break:break-word!important;}