:root {
  --bg: #f7f8fa;
  --fg: #1a1d23;
  --muted: #5c6570;
  --border: #e2e6eb;
  --accent: #2563eb;
  --max: 42rem;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: light; }

body {
  margin: 0;
  font-family: var(--font);
  line-height: 1.55;
  color: var(--fg);
  background: var(--bg);
}

.wrap {
  width: min(100% - 2rem, var(--max));
  margin-inline: auto;
}

.site-header, .site-footer {
  border-bottom: 1px solid var(--border);
  background: #fff;
}

.site-footer {
  border-bottom: 0;
  border-top: 1px solid var(--border);
  margin-top: 3rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.site-header .wrap,
.site-footer .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
}

.brand {
  margin: 0;
  font-weight: 650;
}

nav a {
  color: var(--accent);
  text-decoration: none;
}

nav a:hover { text-decoration: underline; }

main { padding: 2rem 0 1rem; }

h1 { margin: 0 0 0.5rem; line-height: 1.2; font-size: clamp(1.6rem, 4vw, 2.1rem); }

.lede { color: var(--muted); margin-top: 0; }

code {
  font-size: 0.92em;
  background: #eef1f5;
  padding: 0.1em 0.35em;
  border-radius: 0.25rem;
}
.card{background:#fff;border:1px solid var(--border);border-radius:.6rem;padding:1rem 1.2rem;margin:1rem 0}
form.row{display:flex;gap:.5rem;flex-wrap:wrap}
input,select,button,textarea{font:inherit;padding:.55rem .7rem;border:1px solid var(--border);border-radius:.4rem;max-width:100%}
button{background:var(--accent);color:#fff;border-color:var(--accent);cursor:pointer}
button.secondary{background:#fff;color:var(--accent)}
.big{font-size:3rem;font-weight:700;margin:.2rem 0}
table{border-collapse:collapse;width:100%;font-size:.95rem}
td,th{border:1px solid var(--border);padding:.35rem .5rem;text-align:left}
.err{color:#b91c1c}
textarea{width:100%;min-height:7rem;font-family:ui-monospace,monospace}
details{margin:.5rem 0}summary{font-weight:600;cursor:pointer}
.tablewrap{overflow-x:auto}

/* ---- Design system v1 (Design Lead, 2026-10-07) ---- */
:root{--accent-ink:#fff;--accent-soft:#eaf1ff;--ok:#15803d;--warn:#b45309;--radius:.7rem}
a{color:var(--accent)}
.brand a{display:inline-flex;align-items:center;gap:.5rem}
.brand svg{width:1.6rem;height:1.6rem;flex:none}
nav{display:flex;flex-wrap:wrap;gap:.25rem 1.1rem}
nav a{padding:.35rem 0}
@media (max-width:30rem){.site-header .wrap{flex-wrap:wrap;gap:.25rem}}
button,input,select,textarea{min-height:2.75rem}
button{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
button.secondary{background:#fff;color:var(--accent)}
button:hover{filter:brightness(.95)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.card{border-radius:var(--radius);box-shadow:0 1px 2px rgba(16,24,40,.05)}
.tool-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin:.6rem 0}
.out-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-top:.4rem}
.out-head button{min-height:2.25rem;padding:.3rem .7rem;font-size:.9rem}
.field-err{color:#b91c1c;font-size:.92rem;min-height:1.4em;margin:.2rem 0 0}
.result{min-height:9.5rem;margin-top:1rem;padding:1rem;border-radius:var(--radius);background:var(--accent-soft)}
.result[hidden]{display:block;visibility:hidden}
.verdict{display:inline-block;padding:.2rem .65rem;border-radius:999px;font-weight:700;font-size:.95rem;color:#fff}
.v-unlikely{background:#64748b}.v-possible{background:var(--warn)}.v-likely{background:var(--accent)}
.big{line-height:1.05}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:.6rem}
.stat{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:.7rem .9rem}
.stat b{display:block;font-size:2rem;line-height:1.1}
.stat span{color:var(--muted);font-size:.88rem}
.stat.main{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.grid-table table{font-size:.9rem}
@media (min-width:40rem){.grid-cols{columns:2;column-gap:1.2rem}.grid-cols table{break-inside:avoid}}
details{border:1px solid var(--border);border-radius:.5rem;padding:.6rem .8rem;background:#fff}
details[open] summary{margin-bottom:.4rem}
input[aria-invalid=true]{border-color:#b91c1c}
:root{--accent:#0f766e;--accent-soft:#e7f5f3}
textarea{background:#0f1f1d;color:#d1fae5;border-color:#0f1f1d;font-size:1rem}
textarea::placeholder{color:#6b8f88}
#in{background:#fff;color:var(--fg);border-color:var(--border)}
/* ---- v2 modern look (Design Lead) ---- */
.sky{background:linear-gradient(170deg,#0b2e2b 0,#0f766e 15rem,#99d5cb 24rem,#eef7f5 30rem) no-repeat,#eef7f5}
.sky .site-header{background:transparent;border:0;color:#fff}.sky .site-header nav a{color:#fff;opacity:.9}
.sky main>h1{color:#fff;letter-spacing:-.02em}.sky main>.lede{color:#e6f2ee}
.sky .card{background:rgba(255,255,255,.92);border:0;border-radius:1.3rem;box-shadow:0 10px 30px rgba(11,31,51,.13);padding:1.2rem}
.sky section>h2{letter-spacing:-.01em}
.sky button{border-radius:999px;font-weight:650}.sky input,.sky select{border-radius:.7rem}
.stat{border-radius:.9rem}
input[type=range],input[type=checkbox]{accent-color:var(--accent)}
.sky main>.lede{color:#fff;opacity:.92;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.sky td,.sky th{border:0;border-bottom:1px solid var(--border)}.sky select{background:#fff;border:1px solid var(--border)}
.diagram{margin:1rem 0;background:#fff;border-radius:1rem;padding:.8rem;box-shadow:0 2px 10px rgba(11,31,51,.06)}.diagram svg{width:100%;height:auto;display:block}.diagram figcaption{font-size:.85rem;color:var(--muted);margin-top:.4rem}

.key{width:100%;height:4.5rem;font-size:1.2rem;touch-action:none;user-select:none}.key.on{filter:brightness(.8)}.bytes{margin-top:1rem}
/* ---- decimal-to-fraction + pdf-to-epub ---- */
.chip{min-height:2rem;padding:.15rem .6rem;font-size:.88rem}
.drop{display:flex;flex-direction:column;align-items:center;gap:.25rem;text-align:center;padding:1.6rem 1rem;border:2px dashed #8cc9bf;border-radius:1rem;background:#f4fbfa;cursor:pointer;min-height:11.5rem;justify-content:center}
.drop.over,.drop:focus-within{border-color:var(--accent);background:var(--accent-soft)}
.drop span{color:var(--muted);font-size:.92rem}.drop .fname{margin-top:.3rem;color:var(--fg);overflow-wrap:anywhere}
.vh{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.opts{margin-top:.8rem}.optgrid{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr))}.optgrid label{display:flex;flex-direction:column;gap:.2rem;font-size:.9rem}
a.btn{display:inline-flex;align-items:center;min-height:2.75rem;padding:.55rem 1.1rem;border-radius:999px;background:var(--ok);color:#fff;font-weight:650;text-decoration:none}a.btn[hidden]{display:none}
#res[hidden]{display:block;visibility:hidden}
nav a[aria-current]{text-decoration:underline;text-underline-offset:.3em}