:root{--paper:#f4efe6;--card:#fbf8f2;--ink:#1b1a17;--mute:#6d675b;--line:#ddd5c5;--accent:#d8431c;--accent-ink:#fff;--ok:#2f6b4f;
--serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;--sans:ui-sans-serif,-apple-system,"Segoe UI",Roboto,sans-serif;--mono:ui-monospace,"SF Mono",Menlo,monospace}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 var(--sans);overflow-x:hidden}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.top{display:flex;justify-content:space-between;align-items:center;max-width:1120px;margin:0 auto;padding:18px 20px}
.brand{font:600 18px var(--serif);color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:8px}
.dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px #d8431c22}
nav a{color:var(--mute);text-decoration:none;font-size:14px;margin-left:18px}
nav a:hover{color:var(--ink)}
main{max-width:1120px;margin:0 auto;padding:0 20px}
.hero{padding:56px 0 40px;max-width:760px}
.eyebrow{font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin:0 0 18px}
h1{font:500 clamp(36px,7vw,68px)/1.04 var(--serif);letter-spacing:-.025em;margin:0 0 20px}
h1 em{font-style:italic;color:var(--accent);text-decoration:underline wavy #d8431c66;text-underline-offset:.12em;text-decoration-thickness:2px}
.lede{font-size:clamp(17px,2.4vw,20px);color:#3d3a33;max-width:58ch;margin:0 0 28px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.fine{font-size:13px;color:var(--mute);margin:16px 0 0}
.btn{font:600 15px var(--sans);padding:12px 20px;border-radius:10px;border:1px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;transition:transform .12s,background .12s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:0 2px 0 #8f2a0f}
.btn.ghost:hover{background:#0000000a}
.link{background:none;border:0;color:var(--accent);font:600 13px var(--sans);cursor:pointer;padding:4px 0;text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.steps ol{list-style:none;margin:0 0 56px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.steps li{display:flex;gap:14px;padding:22px 20px 0 0}
.steps li b{font:500 28px var(--serif);color:var(--accent);line-height:1}
.steps h3{margin:0 0 4px;font:600 16px var(--sans)}
.steps p{margin:0;color:var(--mute);font-size:14px}
.tool{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start;scroll-margin-top:12px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;min-width:0}
.results[hidden]{display:none}
.tool:has(.results[hidden]){grid-template-columns:minmax(0,760px)}
.ph{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:14px;flex-wrap:wrap}
h2{font:500 24px var(--serif);margin:0;letter-spacing:-.01em}
.status{font:12px var(--mono);color:var(--mute)}
.field{margin-bottom:18px}
.fh{display:flex;justify-content:space-between;align-items:center}
label{font-weight:600;font-size:14px}
.hint{font-size:13px;color:var(--mute);margin:2px 0 8px}
code{font:12px var(--mono);background:#0000000d;padding:1px 5px;border-radius:4px;overflow-wrap:anywhere}
textarea,input[type=search]{width:100%;font:13px var(--mono);padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);resize:vertical}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.file{margin:0}
.err{color:var(--accent);font-size:14px;min-height:1em;margin:10px 0 0}
.snip{margin-top:10px;font-size:13px}
.snip summary{cursor:pointer;color:var(--mute)}
pre{background:#1b1a17;color:#eae3d3;padding:14px;border-radius:10px;overflow:auto;max-height:240px;font:12px/1.5 var(--mono);white-space:pre}
.big{display:flex;align-items:baseline;gap:14px}
.big span{font:500 64px/1 var(--serif);color:var(--accent);letter-spacing:-.03em}
.big small{font-size:14px;color:#3d3a33;max-width:30ch;line-height:1.35}
.meter{height:6px;background:var(--line);border-radius:3px;margin:14px 0}
.meter i{display:block;height:100%;background:var(--accent);border-radius:3px;transition:width .4s}
.note{font-size:13px;color:var(--mute)}
.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:14px 0}
.controls input[type=search]{flex:1;min-width:130px;font-family:var(--sans);padding:8px 12px}
.seg{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.seg button{border:0;background:none;padding:8px 11px;font:600 13px var(--sans);cursor:pointer;color:var(--mute)}
.seg button.on{background:var(--ink);color:#fff}
.chk{font-weight:500;font-size:13px;color:var(--mute);display:flex;gap:6px;align-items:center}
.list{list-style:none;margin:0;padding:0;max-height:460px;overflow:auto;border-top:1px solid var(--line)}
.list li{display:grid;grid-template-columns:32px minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.list li.done{opacity:.45}
.list li.done .h{text-decoration:line-through}
.list li.empty{display:block;color:var(--mute);padding:20px 0}
.av{width:32px;height:32px;border-radius:50%;background:#e8dfcd;display:grid;place-items:center;font:600 13px var(--sans);color:var(--mute)}
.h{font:14px var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.open{font-size:13px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.tick{display:flex;gap:6px;align-items:center;font-size:12px;font-weight:500;color:var(--mute);white-space:nowrap}
.exports{margin-top:20px;padding:18px;border:1px dashed #b9ae98;border-radius:12px;display:flex;flex-direction:column;gap:12px}
.exports h3{margin:0 0 2px;font:500 18px var(--serif)}
.exports p{margin:0;font-size:13px;color:var(--mute)}
.exbtns{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.unlocked{display:flex;gap:10px;flex-wrap:wrap}
[hidden]{display:none!important}
.notes{margin:64px 0;max-width:760px}
.notes dt{font:600 16px var(--sans);margin-top:18px}
.notes dd{margin:4px 0 0;color:#3d3a33}
footer{border-top:1px solid var(--line);padding:22px 20px;text-align:center;font-size:13px;color:var(--mute)}
@media(max-width:860px){.tool,.tool:has(.results[hidden]){grid-template-columns:minmax(0,1fr)}.steps ol{grid-template-columns:1fr}.steps li{padding-bottom:6px}}
@media(max-width:480px){.hero{padding-top:32px}.list li{grid-template-columns:32px minmax(0,1fr) auto;row-gap:2px}.tick{grid-column:2/4}.panel{padding:16px}.big span{font-size:52px}nav a:first-child{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.paidnote{margin:0;padding:12px 20px;background:#e8f1e4;color:#25401f;text-align:center;font-size:14px}
