:root {
   
  --paper:   #F2F6FC;
  --paper-2: #E9F0F9;    
  --panel:   #FFFFFF;

   
  --ink:     #0D1524;    
  --ink-2:   #46536B;    
  --ink-3:   #5B6880;    
  --deep:    #101A2E;    

   
  --rule:    #D5E0EF;
  --rule-2:  #BDCCE2;
  --rule-3:  #E6EDF7;

   
  --acc:     #1B4FD1;    
  --acc-2:   #12379B;
  --acc-bg:  #E2E9FB;

   
  --ok:  #00714E;  --ok-bg:  #DCF0E6;  --x-ok:  #0E8F63;
  --net: #0A6884;  --net-bg: #DAEDF4;  --x-net: #12839F;
  --est: #8A5307;  --est-bg: #F8EEDD;  --x-est: #C07C10;
  --bad: #A81E14;  --bad-bg: #FBE4E2;  --x-bad: #C6362B;
  --x-acc: #2E63E8;
  --absent: #5B6880;

   
  --gold:      #C9A227;
  --gold-dk:   #8A6410;    
  --gold-bg:   #F8F1DE;
  --gold-grad: linear-gradient(90deg, transparent 0%, #B8901C 14%, #E4C063 42%, #F0D28A 50%, #E4C063 58%, #B8901C 86%, transparent 100%);

  --r-0: 0; --r-1: 3px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 40px; --s7: 60px;
  --rail: 88px;
  --dur: .15s;
}

* { box-sizing: border-box; }
body { margin: 0; }
.dcx {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 14.5px; line-height: 1.58; color: var(--ink);
   
  background:
    radial-gradient(760px 460px at 84% 2%, rgb(27 79 209 / .10), transparent 64%),
    radial-gradient(680px 420px at 6% 18%, rgb(18 131 159 / .08), transparent 66%),
    radial-gradient(620px 380px at 62% 78%, rgb(14 143 99 / .06), transparent 68%),
    linear-gradient(180deg, #FFFFFF 0%, #FCFDFE 42%, var(--paper) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased; text-wrap: pretty;
}

 
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.022em; text-wrap: balance; }
.dcx-d-1 { font-size: 44px; line-height: 1.06; letter-spacing: -.026em; font-weight: 700; }
.dcx-d-2 { font-size: 27px; line-height: 1.14; }
.dcx-t-2 { font-size: 19px; line-height: 1.28; font-weight: 700; }
.dcx-t-3 { font-size: 15px; line-height: 1.38; font-weight: 600; }
.dcx-t-s { font-size: 12.5px; color: var(--ink-2); line-height: 1.55; }
p { margin: 0; max-width: 70ch; }

.dcx-lbl { font-family: "IBM Plex Mono", monospace; font-size: 9.5px; font-weight: 500;
       letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }

.dcx-num, .dcx-num-xl, .dcx-num-l, .dcx-num-s { font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; }
.dcx-num-xl { font-size: 32px; font-weight: 600; letter-spacing: -.03em; }
.dcx-num-l  { font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.dcx-num-s  { font-size: 11.5px; color: var(--ink-2); }

 
.dcx-wrap { max-width: 1300px; margin: 0 auto; padding: 0 var(--s5); }
.dcx-sec { padding: var(--s7) 0; }
.dcx-split, .dcx-fig { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); gap: 0 var(--s5); }
.dcx-fig-n { font-family: "IBM Plex Mono", monospace; font-size: 9.5px; font-weight: 500;
         letter-spacing: .16em; text-transform: uppercase; color: var(--acc); padding-top: 4px; }
 
.dcx-fig-h { border-top: 1px solid var(--ink); padding-top: var(--s3); position: relative; }
.dcx-fig-h::before { content: ""; position: absolute; top: -1px; left: 0; width: 72px; height: 3px;
  background: linear-gradient(90deg, var(--acc), var(--x-acc)); }
.dcx-fig-h--light { border-top-color: var(--rule-2); }
.dcx-fig-cap { font-size: 13px; color: var(--ink-3); max-width: 66ch; }
@media (max-width: 760px) {
  .dcx-split, .dcx-fig { grid-template-columns: 1fr; }
  .dcx-fig-n { padding-bottom: var(--s2); }
}

 
.dcx-card {
  background: rgb(255 255 255 / .74);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  backdrop-filter: blur(18px) saturate(1.35);
  border: 1px solid rgb(255 255 255 / .7);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), 0 0 0 1px var(--rule);
  border-radius: var(--r-1);
}
 
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .dcx-card { background: var(--panel); border-color: var(--rule); box-shadow: none; }
}
.dcx-card-h { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--rule); display: flex; align-items: center; gap: var(--s3); }
.dcx-card-b { padding: var(--s4); }
 
.dcx-deep { background: var(--deep); color: #EEF3FB; }
.dcx-deep .dcx-lbl, .dcx-deep .dcx-num-s { color: rgb(238 243 251 / .58); }
.dcx-deep .dcx-t-s { color: rgb(238 243 251 / .74); }

 
.dcx-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font-family: inherit; font-size: 13.5px; font-weight: 600; padding: 9px var(--s4);
  border: 1px solid var(--rule-2); border-radius: var(--r-1); background: var(--panel);
  color: var(--ink); cursor: pointer; white-space: nowrap; transition: all var(--dur); }
.dcx-btn:hover { border-color: var(--acc); color: var(--acc); }
.dcx-btn-p { background: var(--acc); border-color: var(--acc); color: #fff; }
.dcx-btn-p:hover { background: var(--acc-2); border-color: var(--acc-2); color: #fff; }
.dcx-btn-s { padding: 6px var(--s3); font-size: 12.5px; }
.dcx-deep .dcx-btn { background: transparent; border-color: rgb(238 243 251 / .24); color: #EEF3FB; }
.dcx-deep .dcx-btn:hover { border-color: #fff; color: #fff; }
a { color: var(--acc); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
    text-decoration-color: rgb(27 90 200 / .35); }
a:hover { color: var(--acc-2); text-decoration-color: var(--acc-2); }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

.dcx-field { font-family: inherit; font-size: 14px; width: 100%; padding: 9px var(--s3);
  border: 1px solid var(--rule-2); border-radius: var(--r-1); background: var(--panel); color: var(--ink); }
.dcx-field:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px rgb(27 90 200 / .15); }
.dcx-field-num { font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; }

.dcx-pill { font-family: inherit; font-size: 12.5px; font-weight: 500; padding: 5px var(--s3);
  border: 1px solid var(--rule-2); border-radius: var(--r-1); background: var(--panel);
  color: var(--ink-2); cursor: pointer; white-space: nowrap; transition: all var(--dur); }
.dcx-pill:hover { border-color: var(--acc); color: var(--acc); }
.dcx-pill[aria-pressed="true"] { background: var(--deep); border-color: var(--deep); color: #fff; }

 
.dcx-tag { display: inline-flex; align-items: center; gap: 5px; font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px; font-weight: 500; letter-spacing: .04em; padding: 2px 7px; border-radius: var(--r-0); }
 
.dcx-tag-hot { background: var(--acc); color: #fff; font-weight: 600; }
.dcx-tag-acc { background: var(--acc-bg); color: var(--acc); }
.dcx-tag-ok  { background: var(--ok-bg);  color: var(--ok); }
.dcx-tag-net { background: var(--net-bg); color: var(--net); }
.dcx-tag-est { background: var(--est-bg); color: var(--est); }
.dcx-tag-bad { background: var(--bad-bg); color: var(--bad); }
.dcx-tag-gold{ background: var(--gold-bg); color: var(--gold-dk); }
.dcx-nd { color: var(--absent); border-bottom: 1px dotted var(--rule-2); }

 
table.dcx-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.dcx-tbl th { font-family: "IBM Plex Mono", monospace; font-size: 9.5px; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); text-align: left;
  padding: var(--s2) var(--s3) var(--s2) 0; border-bottom: 1px solid var(--ink); }
table.dcx-tbl td { padding: 11px var(--s3) 11px 0; border-bottom: 1px solid var(--rule-3); }
table.dcx-tbl tr:last-child td { border-bottom: 0; }
table.dcx-tbl td.n, table.dcx-tbl th.n { text-align: right; padding-right: 0;
  font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; }
.dcx-deep table.dcx-tbl th { color: rgb(238 243 251 / .55); border-bottom-color: rgb(238 243 251 / .34); }
.dcx-deep table.dcx-tbl td { color: rgb(238 243 251 / .88); border-bottom-color: rgb(238 243 251 / .12); }

 
 
.dcx-res-list { container-type: inline-size; container-name: res; display: flex; flex-direction: column; gap: 6px; }
.dcx-res-cols, .dcx-res { --res-grid: 46px minmax(180px,1.6fr) minmax(132px,1fr) 92px minmax(132px,1fr) 150px; }
.dcx-res-cols { display: grid; gap: 0 var(--s4); padding: 0 var(--s4) var(--s2);
  grid-template-columns: var(--res-grid); border-bottom: 1px solid var(--ink); }
.dcx-res-cols span { font-family: "IBM Plex Mono", monospace; font-size: 9.5px; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); }
.dcx-res-list { --res-grid: 46px minmax(180px,1.6fr) minmax(132px,1fr) 92px minmax(132px,1fr) 150px; }.dcx-res { --head: 44px; display: grid; align-items: start; gap: 0 var(--s4);
  grid-template-columns: var(--res-grid);
  background: rgb(255 255 255 / .74);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  backdrop-filter: blur(18px) saturate(1.35);
  border: 1px solid rgb(255 255 255 / .7);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), 0 0 0 1px var(--rule);
  border-radius: var(--r-1);
  padding: var(--s3) var(--s4); transition: border-color var(--dur), background var(--dur); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .dcx-res { background: var(--panel); border-color: var(--rule); box-shadow: none; }
}
.dcx-res:hover { border-color: var(--acc); background: rgb(255 255 255 / .9); }
.dcx-res > * { min-width: 0; display: flex; flex-direction: column; }
.dcx-res > * > :first-child { min-height: var(--head); display: flex; align-items: center; }
.dcx-res-gauge { align-items: center; }
 
.dcx-res-mono { width: 38px; height: 38px; border: 1px solid var(--rule-2); border-radius: var(--r-1);
  display: flex; align-items: center; justify-content: center;
  font-family: "IBM Plex Mono", monospace; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.dcx-res-act { border-left: 1px solid var(--rule-3); padding-left: var(--s4); }
@container res (max-width: 1040px) {
  .dcx-res-cols { display: none; }
   
  .dcx-res { --res-grid: 46px minmax(0,1fr) 150px; --head: 0px; gap: var(--s3) var(--s4); }
  .dcx-res > * > :first-child { min-height: 0; }
  .dcx-res-id { grid-column: 2; }
  .dcx-res-price, .dcx-res-gauge, .dcx-res-tags { grid-column: 2; }
  .dcx-res-gauge { align-items: flex-start; }
  .dcx-res-act { grid-column: 3; grid-row: 1 / span 5; align-self: start; }
}

 
.dcx-hr { height: 1px; background: var(--rule); border: 0; margin: 0; }
.dcx-sw { border-radius: var(--r-0); }
.dcx-grid2 { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.dcx-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.dcx-stack { display: flex; flex-direction: column; gap: var(--s3); }
.dcx-gauge text { font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

 

 
.dcx-ticked { position: relative; }
.dcx-ticked > .dcx-tk { position: absolute; inset: 0; pointer-events: none; }
.dcx-ticked::before, .dcx-ticked::after,
.dcx-ticked > .dcx-tk::before, .dcx-ticked > .dcx-tk::after {
  content: ""; position: absolute; width: 7px; height: 7px; pointer-events: none;
  border-color: var(--rule-2); border-style: solid; border-width: 0;
}
.dcx-ticked::before { top: -1px; left: -1px; border-top-width: 1.5px; border-left-width: 1.5px; }
.dcx-ticked::after  { top: -1px; right: -1px; border-top-width: 1.5px; border-right-width: 1.5px; }
.dcx-ticked > .dcx-tk::before { bottom: -1px; left: -1px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.dcx-ticked > .dcx-tk::after  { bottom: -1px; right: -1px; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.dcx-ticked.dcx-on-acc::before, .dcx-ticked.dcx-on-acc::after,
.dcx-ticked.dcx-on-acc > .dcx-tk::before, .dcx-ticked.dcx-on-acc > .dcx-tk::after { border-color: var(--acc); }

 
.dcx-ico { width: 20px; height: 20px; flex: 0 0 auto; }
.dcx-ico-box { width: 34px; height: 34px; border-radius: var(--r-1); display: inline-flex;
  align-items: center; justify-content: center; background: var(--acc-bg); color: var(--acc); }

 
@keyframes skel { to { background-position: -160% 0; } }
.dcx-skel { height: 62px; border-radius: var(--r-1); border: 1px solid var(--rule);
  background: linear-gradient(90deg, var(--paper-2) 0%, var(--panel) 42%, var(--paper-2) 78%) 0 0 / 320% 100%;
  animation: skel 1.5s ease-in-out infinite; }
.dcx-empty { background: var(--panel); border: 1px dashed var(--rule-2); border-radius: var(--r-1);
  padding: var(--s6) var(--s4); text-align: center; }
.dcx-fail { background: var(--bad-bg); border: 1px solid rgb(168 30 20 / .25); border-radius: var(--r-1);
  padding: var(--s3) var(--s4); font-size: 12.5px; color: var(--bad); }

 
@media print {
  nav, footer, .dcx-btn, .dcx-pill { display: none !important; }
  body { background: #fff !important; }
  .dcx-deep { background: #fff !important; color: #000 !important; }
  .dcx-card, .dcx-res { break-inside: avoid; }
  details { display: block !important; }
  details > *:not(summary) { display: block !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; color: #555; }
}

 
.dcx-nav-glass { background: rgb(16 26 46 / .82);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .dcx-nav-glass { background: var(--deep); }
}

 
.dcx-ink-2 { color: var(--ink-2); }
.dcx-ink-3 { color: var(--ink-3); }

 
.dcx-gold-cap {
   
  background-image: var(--gold-grad);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 0;
}
.dcx-gold-cap-2 { background-size: 100% 2px; }
.dcx-gold-rule { height: 1px; background: var(--gold-grad); }

 
:root {
  --dcx-paper: var(--paper);       --dcx-panel: var(--panel);
  --dcx-ink: var(--ink);           --dcx-ink-2: var(--ink-2);
  --dcx-ink-3: var(--ink-3);       --dcx-deep: var(--deep);
  --dcx-rule: var(--rule);         --dcx-rule-2: var(--rule-2);
  --dcx-rule-3: var(--rule-3);
  --dcx-acc: var(--acc);           --dcx-acc-2: var(--acc-2);
  --dcx-acc-bg: var(--acc-bg);
  --dcx-ok: var(--ok);             --dcx-ok-bg: var(--ok-bg);      --dcx-x-ok: var(--x-ok);
  --dcx-net: var(--net);           --dcx-net-bg: var(--net-bg);    --dcx-x-net: var(--x-net);
  --dcx-est: var(--est);           --dcx-est-bg: var(--est-bg);    --dcx-x-est: var(--x-est);
  --dcx-bad: var(--bad);           --dcx-bad-bg: var(--bad-bg);    --dcx-x-bad: var(--x-bad);
  --dcx-gold-bg: var(--gold-bg);   --dcx-gold-dk: var(--gold-dk);
  --dcx-r-1: var(--r-1);           --dcx-s3: var(--s3);            --dcx-s4: var(--s4);
   
  --dcx-alert-line: rgb(168 30 20 / .25);
}

 
.dcx-page { min-height: 100%; }
.dcx-h1 { font-size: 26px; font-weight: 700; letter-spacing: -.022em; line-height: 1.14; margin: 0; }
.dcx-h2 { font-size: 21px; font-weight: 700; letter-spacing: -.022em; line-height: 1.2; margin: 0; }
.dcx-h3 { font-size: 17px; font-weight: 700; letter-spacing: -.022em; line-height: 1.25; margin: 0; }
.dcx-h4 { font-size: 15px; font-weight: 600; line-height: 1.38; margin: 0; }
.dcx-h5 { font-size: 13.5px; font-weight: 600; line-height: 1.35; margin: 0; }
.dcx-body { font-size: 13.5px; line-height: 1.6; }
.dcx-body2 { font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.dcx-note { font-size: 11.5px; line-height: 1.55; color: var(--ink-3); }
.dcx-lb { font-size: 12px; font-weight: 600; color: var(--ink); }
.dcx-lb-help { border-bottom: 1px dotted var(--rule-2); cursor: help; }
.dcx-card-m, .dcx-card-l { border-radius: var(--r-1); }
.dcx-card-pad { padding: var(--s4); }
.dcx-card-pad-s { padding: var(--s3) var(--s4); }
.dcx-tile { display: block; background: var(--panel); border: 1px solid var(--rule);
  border-radius: var(--r-1); padding: var(--s3) var(--s4); text-decoration: none; color: var(--ink);
  transition: border-color var(--dur); }
.dcx-tile:hover { border-color: var(--acc); }
.dcx-badge { display: inline-flex; align-items: center; gap: 5px; font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px; font-weight: 500; padding: 2px 7px; border-radius: var(--r-0);
  background: var(--paper-2); color: var(--ink-2); white-space: nowrap; }
.dcx-badge-ok { background: var(--ok-bg); color: var(--ok); }
.dcx-badge-warn { background: var(--est-bg); color: var(--est); }
.dcx-badge-alert { background: var(--bad-bg); color: var(--bad); }
.dcx-badge-spec { background: var(--acc-bg); color: var(--acc); }
.dcx-badge-more { background: var(--paper-2); color: var(--ink-3); }
.dcx-chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--rule-2);
  border-radius: var(--r-1); padding: 5px var(--s3); background: var(--panel); font-size: 12.5px;
  font-weight: 500; color: var(--ink-2); cursor: pointer; transition: all var(--dur); }
.dcx-chip:hover { border-color: var(--acc); color: var(--acc); }
.dcx-chip[aria-pressed="true"] { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); }
.dcx-field-s { font-size: 12.5px; padding: 6px var(--s3); }
.dcx-btn-x { color: var(--bad); border-color: var(--dcx-alert-line); }
.dcx-btn-x:hover { border-color: var(--bad); color: var(--bad); background: var(--bad-bg); }
.dcx-btn-l { padding: 12px var(--s5); font-size: 14.5px; }
.dcx-btn-dark { background: var(--deep); border-color: var(--deep); color: #fff; }
.dcx-info { background: var(--acc-bg); border: 1px solid rgb(27 79 209 / .2); border-radius: var(--r-1);
  padding: var(--s3) var(--s4); font-size: 12.5px; line-height: 1.55; color: var(--acc); }
.dcx-gap { background: var(--est-bg); border: 1px solid rgb(138 83 7 / .25); border-radius: var(--r-1);
  padding: var(--s3) var(--s4); font-size: 12.5px; line-height: 1.55; color: var(--est); }
.dcx-good { background: var(--ok-bg); border: 1px solid rgb(0 113 78 / .25); border-radius: var(--r-1);
  padding: var(--s3) var(--s4); font-size: 12.5px; line-height: 1.55; color: var(--ok); }
.dcx-locked { color: var(--acc); font-weight: 600; font-size: 12px; cursor: pointer; }
.dcx-locked:hover { text-decoration: underline; }
.dcx-empty-t { font-size: 14.5px; font-weight: 700; margin: 0; }
.dcx-empty-s { font-size: 12.5px; color: var(--ink-2); margin: var(--s2) auto 0; max-width: 58ch; }
.dcx-tbl-wrap { overflow-x: auto; }
.dcx-sec-box { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-1); }
.dcx-sec-box > summary { display: flex; align-items: baseline; gap: var(--s3); padding: var(--s3) var(--s4);
  cursor: pointer; list-style: none; font-size: 13.5px; font-weight: 600; }
.dcx-sec-box > summary::-webkit-details-marker { display: none; }
.dcx-sec-body { padding: 0 var(--s4) var(--s3); }
.dcx-sum { font-size: 11.5px; font-weight: 400; color: var(--ink-3); }
.dcx-chev { margin-left: auto; color: var(--ink-3); font-size: 12px; transition: transform .2s; }
.dcx-sec-box[open] > .dcx-chev, .dcx-sec-box[open] > summary .dcx-chev { transform: rotate(180deg); }
.dcx-shell { max-width: 1300px; margin: 0 auto; padding: 0 var(--s5); }
.dcx-reslist { container-type: inline-size; container-name: res; }