:root{--paper:#f4efe6;--ink:#16130f;--mute:#6d655a;--red:#d7191f;--line:#16130f22;--card:#fffdf8;--serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.55 var(--serif);overflow-x:hidden}
main,.top,.foot{max-width:1080px;margin:0 auto;padding:0 20px}
.top{display:flex;justify-content:space-between;align-items:center;padding-top:18px;padding-bottom:6px}
.mark{display:flex;align-items:center;gap:10px;font:700 15px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-decoration:none}
.card{width:15px;height:21px;background:var(--red);border-radius:2px;transform:rotate(8deg);box-shadow:0 1px 0 #0003}
.toplink{font:13px var(--mono);color:var(--ink)}
.hero{padding:44px 0 28px;border-bottom:3px solid var(--ink)}
.eyebrow{font:12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin:0 0 14px}
h1{font:800 clamp(40px,8.4vw,92px)/.98 var(--serif);letter-spacing:-.03em;margin:0 0 20px;max-width:13ch}
h1 em{font-style:italic;color:var(--red);white-space:nowrap}
.lede{font-size:clamp(17px,2.2vw,21px);max-width:640px;margin:0;color:#2c2721}
.panel{padding:30px 0;border-bottom:1px solid var(--line)}
h2{font:700 22px/1.2 var(--serif);margin:0 0 14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.n{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--paper);font:700 13px var(--mono)}
.hint{margin:-4px 0 16px;color:var(--mute);font-size:15px}
.packs{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.pack{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;background:var(--card);border:1.5px solid var(--line);border-radius:6px;cursor:pointer;transition:border-color .15s,transform .15s}
.pack:hover{border-color:var(--ink)}
.pack input{appearance:none;flex:none;width:20px;height:26px;margin:1px 0 0;border:2px solid var(--ink);border-radius:2px;background:#fff;cursor:pointer;transition:.15s}
.pack input:checked{background:var(--red);border-color:var(--red);transform:rotate(6deg)}
.pack input:focus-visible,.btn:focus-visible,.tab:focus-visible,textarea:focus-visible{outline:3px solid #1c6dff;outline-offset:2px}
.pack b{display:block;font-size:16px}.pack small{color:var(--mute);font-size:13.5px;line-height:1.35;display:block}
.split{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:flex;flex-direction:column;min-width:0}
.lab{font:12px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--mute);margin-bottom:6px}
.lab b{color:var(--red)}
textarea{width:100%;font:14px/1.5 var(--mono);color:var(--ink);background:var(--card);border:1.5px solid var(--ink);border-radius:6px;padding:12px;resize:vertical}
.out{list-style:none;margin:0;padding:0;border:1.5px solid var(--ink);border-radius:6px;background:var(--card);min-height:260px;max-height:340px;overflow:auto}
.out li{padding:9px 12px;border-bottom:1px solid var(--line);font-size:15px;line-height:1.4;overflow-wrap:anywhere}
.out li:last-child{border:0}
.out li.hit{background:repeating-linear-gradient(135deg,#d7191f14 0 8px,transparent 8px 16px);color:var(--red);display:flex;gap:10px;align-items:center;font:13px var(--mono)}
.out li.hit .card{flex:none;width:11px;height:15px}
.out li.hit span{opacity:.85}
.out li.empty{color:var(--mute);font-style:italic}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.tab{font:13px var(--mono);padding:8px 14px;border:1.5px solid var(--ink);border-radius:99px;background:transparent;color:var(--ink);cursor:pointer}
.tab[aria-selected=true]{background:var(--ink);color:var(--paper)}
.tabbody{background:var(--card);border:1.5px solid var(--ink);border-radius:8px;padding:20px;display:grid;grid-template-columns:1.1fr 1fr;gap:24px}
.steps{margin:0;padding-left:20px}.steps li{margin-bottom:6px}
.steps code,.small code{font:13px var(--mono);background:#16130f12;padding:1px 5px;border-radius:3px}
.copybox{display:flex;flex-direction:column;gap:10px;min-width:0}
.copybox textarea{height:150px}
.btn{display:inline-block;font:700 14px var(--mono);letter-spacing:.04em;padding:12px 18px;border-radius:6px;border:2px solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer;text-decoration:none;text-align:center}
.btn:hover{background:var(--red);border-color:var(--red)}
.btn.ghost{background:transparent;color:var(--ink)}.btn.ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn.drag{background:var(--red);border-color:var(--red);cursor:grab}
.small{font-size:13.5px;color:var(--mute)}
.paid{border-bottom:0}
.tag{font:700 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;background:var(--red);color:#fff;padding:3px 8px;border-radius:99px}
.lockwrap{position:relative;max-width:640px}
.lockwrap.locked textarea{filter:blur(2.5px);pointer-events:none;opacity:.6}
.lockbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
.lockwrap:not(.locked) .lockbar{display:none}
.foot{padding-top:20px;padding-bottom:50px;color:var(--mute);font-size:14px}
@media(max-width:760px){.split,.tabbody{grid-template-columns:1fr}.tabbody{padding:16px}.hero{padding-top:30px}.out{min-height:200px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}