:root{
  --paper:#f2f3ea; --card:#fff; --ink:#152f28; --ink-soft:#5b6d64; --line:#dce2d6;
  --line-strong:#c2cec1; --accent:#1d5240; --accent-ink:#fff; --focus:#2f6b53;
  --b0:#2f7d5f; --b1:#6ba36c; --b2:#c9a23c; --b3:#d3783d; --b4:#b7452f;
  --ai:#b7452f; --human:#2f7d5f;
  --field:#fbfcf8; --rule:#c2cec1; --muted:#5b6d64; --shadow:0 1px 2px rgba(21,47,40,.05),0 8px 24px rgba(21,47,40,.05);
  font:16px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink); background:var(--paper);
}
*{box-sizing:border-box}
body{margin:0}
main{max-width:1220px;margin:auto;padding:0 24px 64px}
a{color:var(--accent)}
h1,h2,h3{margin:0}
p{margin:0}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:20;background:rgba(242,243,234,.9);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);margin:0 -24px 0;padding:12px 24px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.brand{display:flex;flex-direction:row;align-items:center;gap:10px;text-decoration:none;color:inherit;line-height:1.15}
.brand img{width:40px;height:40px;border-radius:50%;display:block;background:#fff;flex:none}
.brand .brand-copy{display:flex;flex-direction:column}
.brand b{font:700 1.05rem/1.2 Georgia,serif;letter-spacing:-.01em}
.footbrand{display:inline-flex;align-items:center;gap:8px}
.footbrand img{width:24px;height:24px;border-radius:50%;background:#fff}
.top .spacer{flex:1}
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-strong);
  border-radius:999px;padding:6px 13px;font-size:.82rem;background:var(--card);white-space:nowrap}
.pill b{font-weight:700}
.pill.low{border-color:var(--b3);color:var(--b3)}
.langtoggle{display:inline-flex;border:1px solid var(--line-strong);border-radius:999px;overflow:hidden;background:var(--card)}
.langtoggle button,.langtoggle a{border:0;background:none;padding:6px 12px;font-size:.78rem;font-weight:700;color:var(--ink-soft);cursor:pointer;text-decoration:none}
.langtoggle button[aria-pressed=true],.langtoggle a[aria-pressed=true]{background:var(--accent);color:var(--accent-ink)}

/* ---------- buttons ---------- */
button{font:inherit;cursor:pointer;border:1px solid var(--line-strong);border-radius:9px;
  padding:10px 16px;color:var(--ink);background:var(--card);transition:.15s border-color,.15s background}
button:hover:not(:disabled){border-color:var(--focus)}
button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
button.primary:hover:not(:disabled){background:#17422f}
button.ghost{border-color:transparent;background:none;padding:8px 10px}
button.ghost:hover:not(:disabled){background:#e7eae0;border-color:transparent}
button:disabled{opacity:.4;cursor:not-allowed}
button:focus-visible,a:focus-visible,textarea:focus-visible,select:focus-visible,input:focus-visible{
  outline:2px solid var(--focus);outline-offset:2px}

/* ---------- hero ---------- */
.hero{padding:44px 0 26px;max-width:760px}
.eyebrow{font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-soft);font-weight:800}
h1{font:600 clamp(2.1rem,4.6vw,3.5rem)/1.08 Georgia,serif;letter-spacing:-.025em;margin:14px 0 18px}
.lead{color:var(--ink-soft);font-size:1.06rem;max-width:640px}
.steplist{display:grid;gap:11px;margin:15px 0 0;padding:0;list-style:none}
.steplist li{display:grid;grid-template-columns:23px 1fr;gap:11px;align-items:start;
  font-size:.87rem;color:var(--ink-soft)}
.steplist b{width:23px;height:23px;border-radius:50%;background:var(--accent);color:var(--accent-ink);
  display:grid;place-items:center;font-size:.73rem;font-weight:700;margin-top:1px}

/* ---------- layout ---------- */
.grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:22px;align-items:start}
.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;
  min-width:0;box-shadow:var(--shadow);margin-bottom:22px}
.panel h2{font-size:1.02rem;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.panel h2 .tag{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
  border:1px solid var(--line);border-radius:999px;padding:3px 9px;font-weight:700}
.small{font-size:.83rem;color:var(--ink-soft)}
.row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.row.between{justify-content:space-between}

/* ---------- editor ---------- */
label.field{display:grid;gap:5px;font-size:.78rem;font-weight:700;letter-spacing:.02em;flex:1 1 150px}
select,input[type=email],input[type=text]{font:inherit;padding:9px 10px;border:1px solid var(--line-strong);
  background:#fbfcf8;border-radius:8px;width:100%;color:inherit}
.segmented{display:inline-flex;border:1px solid var(--line-strong);border-radius:9px;overflow:hidden;
  background:var(--card);margin:14px 0 10px;flex-wrap:wrap}
.segmented button{border:0;border-radius:0;background:none;padding:8px 14px;font-size:.84rem;
  font-weight:600;color:var(--ink-soft);border-right:1px solid var(--line)}
.segmented button:last-child{border-right:0}
.segmented button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink)}
.segmented button:hover:not([aria-pressed=true]){background:#eef1e9}
.langline{margin-top:6px}
.langline b{color:var(--ink)}
textarea.compact{min-height:210px}
textarea{width:100%;min-height:300px;resize:vertical;padding:16px;border:1px solid var(--line-strong);
  border-radius:11px;font:1.02rem/1.65 Georgia,serif;background:#fbfcf8;color:inherit}
.meter{height:4px;border-radius:999px;background:#e6eae1;overflow:hidden;margin:12px 0 6px}
.meter i{display:block;height:100%;background:var(--accent);transition:width .25s}
.cost{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:.83rem;color:var(--ink-soft)}
.cost b{color:var(--ink)}
.error{color:#94271f;background:#fbeeeb;border:1px solid #f0d3cd;border-radius:9px;padding:10px 12px;font-size:.88rem;margin-top:12px}
.ok{color:#1d5240;background:#eaf2ec;border:1px solid #cfe0d4;border-radius:9px;padding:10px 12px;font-size:.88rem;margin-top:12px}

/* ---------- gauge ---------- */
.gauge{margin:18px 0 6px}
.zones{display:flex;height:12px;border-radius:999px;overflow:hidden}
.zones i{flex:1}
.zones i:nth-child(1){background:var(--b0)}
.zones i:nth-child(2){background:var(--b1)}
.zones i:nth-child(3){background:var(--b2)}
.zones i:nth-child(4){background:var(--b3)}
.zones i:nth-child(5){background:var(--b4)}
.gauge.flat .zones i{opacity:.28}
.track{position:relative;height:14px}
.needle{position:absolute;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center}
.needle u{display:block;width:0;height:0;border:7px solid transparent;border-bottom-color:var(--ink);
  text-decoration:none;margin-top:-1px}
.scaleends{display:flex;justify-content:space-between;font-size:.7rem;color:var(--ink-soft);margin-top:8px}
.verdictpanel{margin-bottom:22px}
.verdictgrid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:32px;align-items:start}
.vside{display:grid;gap:5px;align-content:start;padding-top:6px}
.verdict{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:8px}
.verdict .band{font:700 clamp(1.45rem,3vw,2.3rem)/1.15 Georgia,serif;letter-spacing:-.02em}
.verdict .pct{font-size:1.05rem;font-weight:700;color:var(--ink-soft)}
.dot{display:inline-block;width:11px;height:11px;border-radius:50%;vertical-align:-1px;margin-right:7px}
.band0{color:var(--b0)} .band1{color:var(--b1)} .band2{color:var(--b2)} .band3{color:var(--b3)} .band4{color:var(--b4)}
.bg0{background:var(--b0)} .bg1{background:var(--b1)} .bg2{background:var(--b2)} .bg3{background:var(--b3)} .bg4{background:var(--b4)}

.notice{background:#f5f2df;border-left:3px solid #bfae5b;padding:12px 14px;font-size:.85rem;border-radius:0 8px 8px 0;margin-top:16px}
.notice.hard{background:#f6efe9;border-left-color:var(--b3)}
.scalekey{display:grid;gap:6px;margin-top:14px}
.scalekey div{display:flex;gap:9px;align-items:center;font-size:.83rem;color:var(--ink-soft)}
.scalekey b{color:var(--ink);font-weight:700;min-width:208px}

/* ---------- windows ---------- */
.wins{display:grid;gap:7px;margin-top:18px}
.win{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;
  border:1px solid var(--line);border-radius:10px;padding:9px 12px;background:#fbfcf8}
.win.prefix{border-color:#a9c4b3;background:#f4f8f3}
.win .wbar{grid-column:1/-1;height:5px;border-radius:999px;background:#e6eae1;overflow:hidden}
.win .wbar i{display:block;height:100%}

/* ---------- word view ---------- */
.legend{display:flex;flex-wrap:wrap;gap:8px;font-size:.78rem;margin:12px 0 4px}
.legend span{padding:3px 9px;border-radius:999px;border:1px solid var(--line)}
.legend .k-ai{background:rgba(183,69,47,.22)}
.legend .k-hu{background:rgba(47,125,95,.22)}
.legend .k-un{background:#edefea;color:var(--ink-soft)}
.reader{white-space:pre-wrap;overflow-wrap:anywhere;font:1.08rem/1.95 Georgia,serif;margin-top:12px}
.token{border:0;padding:.08em .1em;margin:0 -.1em;border-radius:4px;font:inherit;color:inherit;
  background:none;line-height:inherit;vertical-align:baseline}
.token.on{cursor:pointer}
.token.sel{box-shadow:0 0 0 2px var(--ink)}
.token.oov{border-bottom:2px dotted var(--line-strong)}
.wordcard{display:grid;gap:6px;background:#f4f7ef;border:1px solid var(--line);border-radius:11px;padding:14px 16px;margin-top:14px}
.wordcard h3{font:700 1.1rem/1.3 Georgia,serif}
.bars{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;font-size:.82rem}
.bars i{height:8px;border-radius:999px;display:block}

/* ---------- account ---------- */
/* ---------- account ---------- */
.acctgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:center}
.accmail{font:600 1.3rem/1.25 Georgia,serif;letter-spacing:-.01em;margin:7px 0 5px;overflow-wrap:anywhere}
.usage{display:grid;gap:7px}
.usagetop{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.usagetop b{font-size:1.12rem}
.usage .meter{margin:0;height:7px}
.accounthead .eyebrow{letter-spacing:.16em}
.plangrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:16px 0 0}
.plancard{border:1px solid var(--line);border-radius:13px;padding:15px;display:grid;gap:10px;
  background:#fbfcf8;align-content:start}
.plancard.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);background:var(--card)}
.plancard.now{border-color:#a9c4b3;background:#f4f8f3}
.planhead{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:27px}
.planhead b{font-size:1rem}
.tag.now{border-color:#a9c4b3;color:var(--accent);background:var(--card)}
.price{display:flex;align-items:baseline;gap:6px}
.price b{font:700 1.5rem/1 Georgia,serif}
.price span{font-size:.76rem;color:var(--ink-soft)}
.planfeat{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:.83rem;color:var(--ink-soft)}
.planstate{font-size:.8rem;color:var(--ink-soft);padding-top:9px;min-height:2.35em}
.hint{font-size:.76rem;font-weight:400;color:var(--ink-soft);margin-top:2px}
.plancard button{width:100%}
.checkout{margin-top:20px;border-top:1px solid var(--line);padding-top:16px}
.rowlist{display:grid;gap:8px;margin-top:12px}
.listrow{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border:1px solid var(--line);border-radius:9px;padding:9px 13px;background:#fbfcf8}
.listrow.pending{border-style:dashed;color:var(--ink-soft)}
.keyreveal{background:#f4f7ef;border:1px solid var(--line);border-radius:11px;padding:13px 15px;margin-top:12px}
.linkbtn{display:inline-flex;align-items:center;border:1px solid var(--line-strong);border-radius:9px;
  padding:9px 14px;font-size:.85rem;text-decoration:none;color:var(--ink);background:var(--card)}
.linkbtn:hover{border-color:var(--focus)}
code{font:.82rem/1.5 ui-monospace,Menlo,Consolas,monospace;background:#eef1ea;padding:2px 6px;border-radius:5px;
  overflow-wrap:anywhere}

footer{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:20px;margin-top:10px;font-size:.8rem;color:var(--ink-soft)}
.footmeta{display:grid;gap:5px}
.svenjs-credit{display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  color:var(--ink,#312725);background:var(--field,#fffdf8);border:1px solid var(--rule,#d9d0c0);
  border-radius:10px;padding:6px 14px 6px 6px}
.svenjs-credit:hover{border-color:var(--accent,#e07a3d)}
.svenjs-mark{display:block;width:36px;height:36px;border-radius:8px}
.svenjs-credit-copy{display:flex;flex-direction:column;gap:1px;line-height:1.15}
.svenjs-credit-kicker{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted,#6a5e50)}
.svenjs-credit-name{font-size:.95rem;font-weight:600}

/* ---------- long-form pages ---------- */
main.doc{max-width:760px}
main.doc .hero{padding:40px 0 24px}
main.doc h1{font-size:clamp(1.9rem,4vw,2.7rem)}
.prose{max-width:66ch;margin-top:4px}
main.doc .prose{max-width:none}
.prose p{margin:0 0 15px}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--ink);font-weight:700}
.backlink{margin-left:auto;font-size:.85rem}

@media(max-width:520px){
  .plangrid{grid-template-columns:1fr}
}
@media(max-width:440px){
  .segmented button{padding:8px 10px;font-size:.8rem}
}
@media(max-width:1040px){
  .plangrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:880px){
  .grid{grid-template-columns:1fr}
  .acctgrid{grid-template-columns:1fr;gap:18px}
  .verdictgrid{grid-template-columns:1fr;gap:14px}
  .vside{padding-top:0}
  main{padding:0 15px 48px}
  .top{margin:0 -15px;padding:10px 15px}
  .panel{padding:18px}
  .hero{padding:30px 0 20px}
  .scalekey b{min-width:0}
}

/* ---------- one master per text length ---------- */
/* Not .track: that class is the gauge's rail, a few rules up. */
.mpicker{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.mchip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;
  font-size:.82rem;font-weight:700;border:1px solid var(--line-strong);background:var(--card)}
.mchip .small{font-weight:600;opacity:.7;font-size:.75rem}
.mchip.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.mchip.on .small{color:var(--accent-ink);opacity:.85}
.mchip.lead::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--b0);flex:none}
.mchip.on.lead::before{background:var(--accent-ink)}
.wins>.small:first-child{margin-bottom:4px}

/* ---------- the E3 candidate, in shadow mode ---------- */
.e3line{margin-top:16px;border-top:1px solid var(--line);padding-top:12px;display:grid;gap:5px}
.e3line p{margin:0}
.e3line b{font-weight:700}

/* ---------- disputing a result ---------- */
.dispute{margin-top:22px;border-top:1px solid var(--line);padding-top:14px}
.disclosure{border:0;background:none;padding:0;font:inherit;font-weight:700;color:var(--accent);
  text-decoration:underline;text-underline-offset:3px}
.disclosure:hover:not(:disabled){color:var(--focus);border-color:transparent}
.disclosure::after{content:'\203a';display:inline-block;margin-left:7px;transition:transform .15s}
.disclosure[aria-expanded=true]::after{transform:rotate(90deg)}
.disputeform{display:grid;gap:11px;margin-top:13px}
.disputeform label.field{flex:none}
.disputeform .row{margin-top:2px}

/* ---------- result column: same height as the editor, scrolls inside ---------- */
.splitpanel .scroller{border-top:1px solid var(--line);margin-top:16px}
.splitpanel .scroller>.wins{margin-top:14px}
.splitpanel .scroller:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

@media(min-width:881px){
  /* The inner box is taken out of flow, so the grid row is sized by the editor
     alone; the panel then stretches to that height. inset matches .panel padding. */
  .grid .splitpanel{position:relative;align-self:stretch}
  .splitpanel>.panelinner{position:absolute;inset:24px;display:flex;flex-direction:column}
  .splitpanel .scroller{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
    scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#94a89b transparent}
  .splitpanel .scroller::-webkit-scrollbar{width:9px}
  .splitpanel .scroller::-webkit-scrollbar-track{background:transparent}
  .splitpanel .scroller::-webkit-scrollbar-thumb{background:#94a89b;border-radius:999px;
    border:2px solid var(--card);background-clip:padding-box}
  .splitpanel .scroller::-webkit-scrollbar-thumb:hover{background:var(--ink-soft);background-clip:padding-box}
}