:root{
  --bg:#0f172a; --surface:#1e293b; --surface2:#243449; --accent:#38bdf8;
  --text:#e2e8f0; --muted:#94a3b8; --line:#334155;
  --green:#22c55e; --green-bg:rgba(34,197,94,.14);
  --amber:#f59e0b; --amber-bg:rgba(245,158,11,.14);
  --red:#ef4444; --red-bg:rgba(239,68,68,.12);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6;padding-bottom:60px}
.wrap{max-width:820px;margin:0 auto;padding:0 20px}
.site-header{background:linear-gradient(160deg,#1e293b,#0f172a);border-bottom:1px solid var(--line);
  padding:40px 0 30px;margin-bottom:26px}
h1{margin:0 0 8px;font-size:28px;letter-spacing:-.5px}
.tagline{color:var(--muted);font-size:15.5px;margin:0;max-width:680px}
h2{font-size:19px;margin:0 0 16px;display:flex;align-items:center;gap:10px}
h3{font-size:15px;margin:22px 0 8px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.step-num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  background:var(--accent);color:#0f172a;border-radius:50%;font-size:14px;font-weight:800;flex:none}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:22px 24px;margin-bottom:22px}
.q{font-size:14.5px;margin-bottom:8px;color:var(--text)}
.seg{display:inline-flex;flex-wrap:wrap;gap:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:16px}
.seg button{background:var(--bg);color:var(--text);border:none;padding:9px 15px;font-size:13.5px;
  cursor:pointer;border-right:1px solid var(--line);font-family:inherit}
.seg button:last-child{border-right:none}
.seg button.active{background:var(--accent);color:#0f172a;font-weight:700}
.palette-label{display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:var(--muted)}
textarea{background:var(--bg);border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;color:var(--text);font-size:14px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  resize:vertical}
textarea:focus{outline:none;border-color:var(--accent)}
.alert-error{margin-top:14px;background:var(--red-bg);border:1px solid rgba(239,68,68,.4);
  border-radius:8px;padding:12px 14px;font-size:13.5px;color:#fca5a5}
.alert-error b{color:var(--text)}
.alert-error ul{margin:6px 0 0;padding-left:20px}
.actions{display:flex;align-items:center;gap:14px;margin:16px 0 0;flex-wrap:wrap}
.btn{background:var(--surface2);color:var(--text);border:1px solid var(--line);border-radius:8px;
  padding:11px 20px;font-size:14.5px;cursor:pointer;font-family:inherit;font-weight:600}
.btn:hover{border-color:var(--accent)}
.btn-primary{background:var(--accent);color:#0f172a;border-color:var(--accent)}
.btn-primary:hover{filter:brightness(1.08)}
.muted{color:var(--muted);font-size:13.5px}
.hidden{display:none}

.sim-table-wrap{overflow-x:auto}
.sim-table{border-collapse:collapse;width:100%;font-size:13.5px}
.sim-table th{text-align:left;color:var(--muted);font-weight:600;font-size:12.5px;
  text-transform:uppercase;letter-spacing:.3px;padding:8px 10px;border-bottom:1px solid var(--line)}
.sim-table td{padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.swatch{display:inline-flex;align-items:center;gap:8px}
.swatch .chip{width:22px;height:22px;border-radius:6px;border:1px solid rgba(255,255,255,.15);flex:none}
.swatch .hexlabel{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;color:var(--muted)}

.verdict{border-radius:10px;padding:16px 18px;margin-bottom:16px;font-size:15px;font-weight:600}
.verdict.pass{background:var(--green-bg);color:#4ade80;border:1px solid rgba(34,197,94,.35)}
.verdict.fail{background:var(--red-bg);color:#fca5a5;border:1px solid rgba(239,68,68,.4)}
.pair-card{background:var(--surface2);border:1px solid var(--line);border-left:4px solid var(--red);
  border-radius:10px;padding:14px 16px;margin-bottom:12px}
.pair-card .pair-title{font-size:14.5px;font-weight:700;margin-bottom:4px;color:var(--text)}
.pair-card .pair-detail{font-size:13.5px;color:var(--muted)}

.swatch-row{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.swatch-row .card{background:var(--surface2);border:1px solid var(--line);border-radius:8px;
  padding:8px 12px;display:flex;align-items:center;gap:8px}
.swatch-row .chip{width:20px;height:20px;border-radius:5px;border:1px solid rgba(255,255,255,.15);flex:none}
.swatch-row .label{font-size:13px}
.swatch-row .name{color:var(--text)}
.swatch-row .hexlabel{color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}

pre.out{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:16px;
  overflow-x:auto;font-size:13px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  white-space:pre-wrap;color:var(--text)}
.hint{font-size:12.5px;color:var(--muted);margin:14px 0 0}
.hint code{background:var(--surface2);padding:1px 6px;border-radius:5px;font-size:12px}
.site-footer{color:var(--muted);font-size:13px;margin-top:30px}
.site-footer a{color:var(--accent)}
@media (max-width:620px){.actions{flex-direction:column;align-items:stretch}}

/* Shared tool footer, identical on every tool in the tree so the set reads as
   one. Two sections on purpose: the first is a promise and has to be true of
   THIS page, the second is boilerplate and has to be the same everywhere.
   Merging them is how a wrong promise gets copied around.
   The colours are the design-token-standard values, scoped to this component
   so that whatever a given tool calls its own colours cannot distort it. */
.tool-footer {
  --tf-border: #475569;
  --tf-border-strong: #64748b;
  --tf-surface-2: #334155;
  --tf-text: #e2e8f0;
  --tf-muted: #94a3b8;
  --tf-accent: #38bdf8;
  border-top: 1px solid var(--tf-border);
  margin-top: 48px;
  padding-top: 24px;
  padding-bottom: 40px;
  color: var(--tf-muted);
  font-size: 14px;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
/* Selectors below are deliberately doubled up. Several tools already carry
   rules like ".site-footer p { color: ... }", which outrank a single class and
   would recolour the promise line on some tools and not others. */
.tool-footer p { margin: 0; max-width: 70ch; }
.tool-footer .tool-footer-privacy { color: var(--tf-text); }
.tool-footer .tool-footer-meta { color: var(--tf-muted); }
.tool-footer .tool-footer-meta a { color: var(--tf-accent); text-decoration: underline; }
.tool-footer .tool-footer-sep { color: var(--tf-border-strong); padding: 0 4px; }
.tool-footer .tool-footer-button {
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  color: var(--tf-text);
  background: transparent;
  border: 1px solid var(--tf-border-strong);
  border-radius: 8px;
  padding: 9px 16px;
}
.tool-footer .tool-footer-button:hover { background: var(--tf-surface-2); border-color: var(--tf-accent); }
.tool-footer-button:focus-visible { outline: 2px solid var(--tf-accent); outline-offset: 2px; }

/* Shared header promise line, identical on every tool in the tree. The selector is
   deliberately SELF-DOUBLED, exactly like the footer block below: several tools carry
   rules such as "header.site p" or ".site-header p" whose specificity (0,1,2) outranks
   a single class (0,1,0), which was rendering this promise at the tagline size on some
   tools and leaving it completely unstyled on the four with separate stylesheets. The
   words only change when the FACTS change, and neither does the styling. */
.tool-promise.tool-promise {
  --tp-border: #475569;
  --tp-accent: #4ade80;
  display: inline-block;
  margin: 10px 0 0;
  padding: 6px 12px;
  border: 1px solid var(--tp-border);
  border-left: 3px solid var(--tp-accent);
  border-radius: 6px;
  color: #94a3b8;
  font-size: 13.5px;
  line-height: 1.5;
  font-weight: 400;
  max-width: 70ch;
}