@import url('https://fonts.googleapis.com/css2?family=Martian+Mono:wght@400;600;800&family=JetBrains+Mono:wght@400;500;700;800&display=swap');

:root{
  --bg:#e8e2d4;--paper:#faf7f0;--ink:#15130f;--accent:#ff3a22;--blue:#1b34e0;
  --muted:rgba(21,19,15,.55);--sh:3px 4px 0 var(--ink);
  --disp:'Martian Mono',ui-monospace,monospace;--mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{margin:0;padding:0;}
body{
  background-color:var(--bg);
  background-image:linear-gradient(rgba(21,19,15,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(21,19,15,.045) 1px,transparent 1px);
  background-size:26px 26px;color:var(--ink);font-family:var(--mono);line-height:1.55;
}
.grain{position:fixed;inset:0;pointer-events:none;z-index:9;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px;position:relative;z-index:1;}
a{color:inherit;}

/* nav */
nav.bar{border-bottom:2.5px solid var(--ink);background:var(--paper);position:sticky;top:0;z-index:20;}
.bar-in{max-width:1080px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.logo{display:flex;align-items:baseline;gap:1px;font-family:var(--disp);font-weight:800;font-size:22px;letter-spacing:-1px;text-decoration:none;}
.logo .dot{color:var(--accent);}.logo .tld{color:var(--muted);font-weight:600;font-size:.62em;}
.navlinks{display:flex;gap:6px;flex-wrap:wrap;}
.navlinks a{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;text-decoration:none;padding:7px 10px;border:2px solid transparent;}
.navlinks a:hover{border-color:var(--ink);background:var(--bg);}
.navlinks a.on{background:var(--ink);color:var(--paper);}

/* hero / headings */
.section{padding:34px 0 8px;}
.eyebrow{font-family:var(--disp);font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--accent);margin-bottom:8px;display:flex;align-items:center;gap:8px;}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--accent);}
h1{font-family:var(--disp);font-size:clamp(24px,5vw,40px);font-weight:800;letter-spacing:-1.4px;line-height:1.02;margin-bottom:8px;}
h2{font-family:var(--disp);font-size:clamp(19px,3.4vw,26px);font-weight:800;letter-spacing:-.8px;margin:34px 0 12px;}
h3{font-family:var(--disp);font-size:15px;font-weight:700;letter-spacing:-.3px;margin:18px 0 6px;}
.sub{color:var(--muted);font-size:14px;max-width:62ch;margin-bottom:22px;}
.prose p{font-size:14.5px;margin:10px 0;max-width:70ch;}
.prose a{color:var(--blue);text-decoration:underline;text-underline-offset:2px;font-weight:600;}
.prose ul{margin:10px 0 10px 18px;font-size:14.5px;max-width:70ch;}
.prose li{margin:5px 0;}

/* tool panel */
.panel{background:var(--paper);border:2.5px solid var(--ink);box-shadow:6px 7px 0 var(--ink);}
.ta-head{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--ink);padding:10px 14px;flex-wrap:wrap;gap:8px;}
.ta-head .lbl{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;}
.stats{display:flex;gap:14px;flex-wrap:wrap;}
.stat{font-size:11px;color:var(--muted);}.stat b{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums;}
textarea.ta{width:100%;min-height:180px;resize:vertical;border:none;outline:none;background:transparent;color:var(--ink);font-family:var(--mono);font-size:16px;line-height:1.55;padding:16px;}
textarea.ta::placeholder{color:rgba(21,19,15,.32);}
.ta-foot{display:flex;gap:10px;border-top:2px solid var(--ink);padding:12px 14px;flex-wrap:wrap;}

/* find & replace */
.fr{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;margin-top:18px;align-items:stretch;}
.fr input[type=text]{border:2px solid var(--ink);background:var(--paper);font-family:var(--mono);font-size:13px;padding:10px 12px;outline:none;box-shadow:var(--sh);}
.fr .opts{grid-column:1/-1;display:flex;gap:16px;flex-wrap:wrap;font-size:12px;align-items:center;}
.fr label.ck{display:flex;gap:6px;align-items:center;cursor:pointer;color:var(--muted);font-weight:600;}
.fr label.ck input{width:15px;height:15px;accent-color:var(--accent);}
@media(max-width:640px){.fr{grid-template-columns:1fr;}}

/* keycap buttons */
.keygroup{margin-top:22px;}
.keygroup .gl{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:8px;}
.keygroup .gl::after{content:"";flex:1;height:1.5px;background:rgba(21,19,15,.18);}
.keygrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:11px;}
.key{background:var(--paper);border:2px solid var(--ink);box-shadow:var(--sh);padding:11px 12px;text-align:left;cursor:pointer;font-family:var(--mono);transition:transform .06s,box-shadow .06s,background .12s;display:flex;flex-direction:column;gap:3px;}
.key:hover{transform:translate(-1px,-1px);box-shadow:4px 5px 0 var(--ink);background:#fffdf8;}
.key:active{transform:translate(3px,4px);box-shadow:0 0 0 var(--ink);}
.key .kn{font-weight:800;font-size:13.5px;letter-spacing:-.2px;}.key .kx{font-size:10.5px;color:var(--muted);}
.key:focus-visible{outline:3px solid var(--blue);outline-offset:2px;}

.btn{font-family:var(--mono);font-weight:800;font-size:12px;letter-spacing:1px;text-transform:uppercase;border:2px solid var(--ink);padding:11px 16px;cursor:pointer;box-shadow:var(--sh);transition:transform .06s,box-shadow .06s,background .12s;display:inline-flex;align-items:center;gap:8px;text-decoration:none;}
.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 5px 0 var(--ink);}
.btn:active{transform:translate(3px,4px);box-shadow:0 0 0 var(--ink);}
.btn.primary{background:var(--accent);color:#fff;}.btn.dark{background:var(--ink);color:var(--paper);}
.btn.ghost{background:var(--paper);color:var(--ink);}.btn.ok{background:var(--blue);color:#fff;}
.btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:var(--sh);transform:none;}

/* tool directory */
.dirgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:6px;}
.card{display:block;background:var(--paper);border:2px solid var(--ink);box-shadow:var(--sh);padding:16px;text-decoration:none;transition:transform .06s,box-shadow .06s,background .12s;}
.card:hover{transform:translate(-1px,-1px);box-shadow:4px 5px 0 var(--ink);background:#fffdf8;}
.card .ct{font-family:var(--disp);font-weight:800;font-size:14px;letter-spacing:-.3px;margin-bottom:5px;}
.card .cd{font-size:12px;color:var(--muted);}
.card .arr{color:var(--accent);font-weight:800;}

/* shortcuts cheatsheet */
.sc-controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:6px 0 22px;}
.os-toggle{display:inline-flex;border:2px solid var(--ink);box-shadow:var(--sh);background:var(--paper);}
.os-toggle button{font-family:var(--mono);font-weight:800;font-size:12px;letter-spacing:1px;text-transform:uppercase;padding:10px 16px;border:none;background:transparent;cursor:pointer;color:var(--muted);}
.os-toggle button.on{background:var(--ink);color:var(--paper);}
.os-toggle button:first-child{border-right:2px solid var(--ink);}
.search{flex:1;min-width:200px;display:flex;align-items:center;border:2px solid var(--ink);box-shadow:var(--sh);background:var(--paper);}
.search span{padding:0 12px;font-weight:800;color:var(--accent);}
.search input{flex:1;border:none;outline:none;background:transparent;font-family:var(--mono);font-size:14px;padding:11px 12px 11px 0;color:var(--ink);}
.cat{margin-bottom:26px;}
.cat-title{font-family:var(--disp);font-size:13px;font-weight:800;letter-spacing:1px;text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:10px;}
.cat-title .ct-bar{width:14px;height:14px;background:var(--accent);border:2px solid var(--ink);}
.rows{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:9px;}
.row{display:flex;justify-content:space-between;align-items:center;gap:14px;background:var(--paper);border:2px solid var(--ink);padding:11px 13px;cursor:pointer;box-shadow:var(--sh);transition:transform .06s,box-shadow .06s,background .12s;}
.row:hover{transform:translate(-1px,-1px);box-shadow:4px 5px 0 var(--ink);background:#fffdf8;}
.row .desc{font-size:13px;}
.combo{display:flex;gap:5px;flex-shrink:0;align-items:center;}
.combo.hide{display:none;}
kbd.cap{font-family:var(--mono);font-weight:800;font-size:12px;min-width:26px;text-align:center;border:2px solid var(--ink);background:var(--bg);padding:5px 8px;box-shadow:0 2px 0 var(--ink);line-height:1;}
.combo .plus{color:var(--muted);font-size:11px;font-weight:700;}
.no-res{padding:30px;text-align:center;color:var(--muted);border:2px dashed var(--ink);background:var(--paper);}

/* FAQ */
.faq details{border:2px solid var(--ink);box-shadow:var(--sh);background:var(--paper);margin-bottom:10px;}
.faq summary{cursor:pointer;font-weight:800;font-size:14px;padding:13px 15px;list-style:none;display:flex;justify-content:space-between;gap:12px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";color:var(--accent);font-weight:800;}
.faq details[open] summary::after{content:"–";}
.faq .ans{padding:0 15px 14px;font-size:13.5px;color:var(--muted);max-width:72ch;}

/* gear */
.disclosure{font-size:12px;color:var(--muted);background:var(--paper);border:2px dashed var(--ink);padding:12px 14px;margin:6px 0 22px;}
.geargrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;}
.gear{display:flex;flex-direction:column;background:var(--paper);border:2px solid var(--ink);box-shadow:var(--sh);padding:16px;}
.gear .gtag{font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--accent);margin-bottom:6px;}
.gear .gname{font-family:var(--disp);font-weight:800;font-size:15px;letter-spacing:-.3px;margin-bottom:6px;}
.gear .gwhy{font-size:13px;color:var(--muted);flex:1;margin-bottom:14px;}
.gear .glink{align-self:flex-start;}

/* toast + footer */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--paper);border:2px solid var(--ink);padding:12px 20px;font-weight:800;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;box-shadow:5px 6px 0 var(--accent);opacity:0;pointer-events:none;transition:all .22s;z-index:50;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
footer.foot{border-top:2.5px solid var(--ink);background:var(--paper);margin-top:46px;}
.foot-in{max-width:1080px;margin:0 auto;padding:26px 20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:22px;}
.foot-col h4{font-family:var(--disp);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:10px;}
.foot-col a{display:block;font-size:12px;color:var(--muted);text-decoration:none;margin:6px 0;}
.foot-col a:hover{color:var(--ink);}
.foot-bot{border-top:2px solid var(--ink);max-width:1080px;margin:0 auto;padding:16px 20px;font-size:11px;color:var(--muted);letter-spacing:.4px;}
@media(max-width:560px){.rows{grid-template-columns:1fr;}}

/* ===== new tool widgets ===== */
.statcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:11px;margin-top:18px;}
.statcard{background:var(--paper);border:2px solid var(--ink);box-shadow:var(--sh);padding:14px;}
.statcard .num{font-family:var(--disp);font-weight:800;font-size:26px;line-height:1;font-variant-numeric:tabular-nums;}
.statcard .lab{font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-top:6px;font-weight:700;}
.ctrls{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:18px;}
.ctrl{display:flex;gap:7px;align-items:center;font-size:12px;font-weight:600;color:var(--muted);}
.ctrl input[type=number]{width:66px;border:2px solid var(--ink);background:var(--paper);font-family:var(--mono);font-size:13px;padding:7px 8px;outline:none;}
.ctrl select{border:2px solid var(--ink);background:var(--paper);font-family:var(--mono);font-size:13px;padding:7px 8px;outline:none;font-weight:700;}
.ctrl input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);}
.ctrl input[type=range]{accent-color:var(--accent);width:160px;}
.out{width:100%;min-height:150px;resize:vertical;border:2.5px solid var(--ink);box-shadow:var(--sh);background:var(--paper);color:var(--ink);font-family:var(--mono);font-size:14px;line-height:1.55;padding:14px;margin-top:16px;white-space:pre-wrap;overflow:auto;display:block;}
.msg{font-size:12.5px;font-weight:700;margin-top:10px;padding:8px 12px;border:2px solid var(--ink);display:none;}
.msg.show{display:block;}
.msg.err{background:#ffe6e2;color:#a01500;}
.msg.ok{background:#e6f7e9;color:#0a6b1e;}
.pw-out{font-family:var(--mono);font-size:20px;font-weight:700;word-break:break-all;background:var(--paper);border:2.5px solid var(--ink);box-shadow:var(--sh);padding:16px;margin-top:16px;min-height:30px;}
.pw-bar{height:10px;border:2px solid var(--ink);background:var(--bg);margin-top:12px;overflow:hidden;}
.pw-bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s,background .2s;}
.pw-slab{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-top:6px;}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px;}
@media(max-width:640px){.twocol{grid-template-columns:1fr;}}
.diffbox{font-size:13px;line-height:1.55;}
.diffbox div{padding:1px 4px;}
.diff-add{background:#e6f7e9;}
.diff-add::before{content:"+ ";color:#0a6b1e;font-weight:800;}
.diff-del{background:#ffe6e2;}
.diff-del::before{content:"- ";color:#a01500;font-weight:800;}
.diff-same::before{content:"\00a0\00a0";}
.csvwrap{margin-top:16px;overflow:auto;border:2.5px solid var(--ink);box-shadow:var(--sh);max-height:480px;}
.csvwrap table{border-collapse:collapse;width:100%;font-size:13px;background:var(--paper);}
.csvwrap th,.csvwrap td{border:1px solid rgba(21,19,15,.25);padding:8px 10px;text-align:left;}
.csvwrap th{background:var(--ink);color:var(--paper);font-weight:700;}
.csvwrap tr:nth-child(even) td{background:#f3efe6;}

/* ===== speed reader (RSVP) ===== */
.sr-stage{background:var(--paper);border:2.5px solid var(--ink);box-shadow:6px 7px 0 var(--ink);padding:0;margin-top:16px;position:relative;}
.sr-window{height:200px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
/* center guide marks */
.sr-window::before,.sr-window::after{content:"";position:absolute;left:50%;transform:translateX(-50%);width:2px;height:18px;background:var(--accent);}
.sr-window::before{top:0;}
.sr-window::after{bottom:0;}
.sr-word{font-family:var(--mono);font-weight:700;font-size:clamp(28px,6vw,46px);letter-spacing:-.5px;white-space:nowrap;}
.sr-pre{color:var(--ink);} .sr-post{color:var(--ink);}
.sr-piv{color:var(--accent);} /* the optimal-recognition pivot letter */
.sr-pivot-wrap{color:var(--muted);}
.sr-prog-track{height:8px;background:var(--bg);border-top:2px solid var(--ink);}
.sr-prog-track i{display:block;height:100%;width:0;background:var(--accent);transition:width .08s linear;}
.sr-meta{display:flex;justify-content:space-between;align-items:center;border-top:2px solid var(--ink);padding:8px 14px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);font-weight:700;}