/* ==========================================================================
   Markdown Tools — design system

   Base: the open-source aggregator nav theme (reference/webstack/, MIT) — its rail,
   its 4-up card grid, its 86px card with a 1px #e4ecf3 edge and a navy hover shadow.
   Its HTML/CSS is mirrored, not copied wholesale: the original ships 1.9 MB of CSS,
   315 KB of JS (jQuery 1.11 + Bootstrap 3) and someone else's AdSense tag, none of
   which belongs in a site whose promise is "zero third-party requests".

   On top of that base, an award-tier pass across eight dimensions:
     typography   fluid clamp() scale, 3 weights, optical tracking on display sizes
     hierarchy    one display headline, then groups that read in one glance
     whitespace   a jump scale (4·8·12·16·24·32·48·72·104) — no near-duplicate steps
     color        monochrome chrome + ONE electric accent, spent only on interaction
     motion       scroll reveal and hover on transform/opacity only (cannot touch LCP)
     micro        every control has hover, active, focus and a busy/done state
     responsive   4 breakpoints, fluid type, rail becomes a drawer
     originality  the hero runs the real converter inline instead of describing it

   Deliberate anti-"AI design" choices: no gradients, no default indigo, no row of
   three equal feature tiles, no decorative colour bar down the side of a card.
   ========================================================================== */

@font-face{font-family:'Geist';src:url('/fonts/geist-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Geist';src:url('/fonts/geist-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Geist';src:url('/fonts/geist-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('/fonts/geist-mono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('/fonts/geist-mono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  --ink:#0b0b0c; --body:#52525b; --mut:#71717a; --faint:#a1a1aa;
  --line:#e4ecf3; --line-2:#d3e0ea; --surface:#f7f9fb; --bg:#fff;
  --accent:#1b4dff;                    /* spent only on interaction states */
  --navy:0,36,100;                     /* the base theme's hover shadow colour */
  --t-display:clamp(2.5rem,6.2vw,4.6rem);
  --t-h1:clamp(1.9rem,3.6vw,2.7rem);
  --t-h2:clamp(1.2rem,1.8vw,1.45rem);
  --t-lead:clamp(1.02rem,1.5vw,1.18rem);
  --t-body:1rem; --t-sm:.875rem; --t-xs:.75rem;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px; --s9:104px;
  --r-sm:6px; --r:10px; --r-lg:16px;
  --rail:236px; --maxw:1300px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --sans:'Geist',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--body);
  font:400 var(--t-body)/1.55 var(--sans);font-feature-settings:"liga";
  -webkit-font-smoothing:antialiased}
h1,h2,h3{color:var(--ink);margin:0;text-wrap:balance}
p{margin:0}
a{color:var(--ink);text-decoration:none}
img{max-width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s4);top:var(--s2);background:var(--ink);color:#fff;padding:var(--s2) var(--s4);
  border-radius:var(--r-sm);z-index:40}

/* ---------- shell: rail + main (the base theme's sidebar layout) ---------- */
.shell{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:0;
  max-width:var(--maxw);margin:0 auto;min-height:100vh}

.rail{position:sticky;top:0;align-self:start;height:100vh;overflow:auto;
  padding:var(--s6) var(--s5) var(--s6) var(--s6);border-right:1px solid var(--line)}
.rail-brand{display:block;font-weight:600;font-size:.98rem;letter-spacing:-.02em;
  color:var(--ink);margin-bottom:var(--s6)}
.rail-brand:hover{color:var(--accent)}
.rail-title{font:500 var(--t-xs)/1 var(--mono);text-transform:uppercase;letter-spacing:.09em;
  color:var(--faint);margin-bottom:var(--s3)}
.rail-nav ul{list-style:none;margin:0 0 var(--s6);padding:0}
.rail-nav li+li{margin-top:1px}
.rail-nav a{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  padding:7px var(--s3);border-radius:var(--r-sm);font-size:var(--t-sm);font-weight:500;
  color:var(--body);transition:background .16s var(--ease),color .16s var(--ease)}
.rail-nav a:hover{background:var(--surface);color:var(--ink)}
.rail-nav a[aria-current="page"]{color:var(--ink);background:var(--surface);
  box-shadow:inset 2px 0 0 0 var(--accent)}
.rail-nav .n{font:500 var(--t-xs)/1 var(--mono);color:var(--faint);font-variant-numeric:tabular-nums}
.rail-nav a:hover .n,.rail-nav a[aria-current="page"] .n{color:var(--accent)}

.shell-main{display:flex;flex-direction:column;min-width:0}
main{flex:1;padding:var(--s7) var(--s7) var(--s9);min-width:0}

/* ---------- topbar (mobile: holds the drawer toggle) ---------- */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--s4);
  min-height:56px;padding:0 var(--s7);background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(10px);box-shadow:0 1px 0 0 var(--line)}
.topbar-brand{font-weight:600;font-size:.95rem;letter-spacing:-.02em;display:none}
.topbar-nav{display:flex;gap:var(--s5);margin-left:auto}
.topbar-nav a{font-size:var(--t-sm);font-weight:500;color:var(--body);position:relative;
  padding:4px 0;transition:color .16s var(--ease)}
.topbar-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .22s var(--ease)}
.topbar-nav a:hover{color:var(--ink)}
.topbar-nav a:hover::after,.topbar-nav a[aria-current="page"]::after{transform:scaleX(1)}
.topbar-nav a[aria-current="page"]{color:var(--ink);font-weight:600}
.rail-toggle{display:none}

/* ---------- hero ---------- */
.hero{padding-bottom:var(--s8);border-bottom:1px solid var(--line);margin-bottom:var(--s8)}
.kicker{display:flex;align-items:center;gap:var(--s2);font:500 var(--t-xs)/1 var(--mono);
  text-transform:uppercase;letter-spacing:.1em;color:var(--mut);margin-bottom:var(--s4)}
.kicker .dot{width:5px;height:5px;border-radius:50%;background:var(--accent);
  animation:pulse 2.6s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.display{font-size:var(--t-display);line-height:1.03;letter-spacing:-.042em;font-weight:600;
  max-width:22ch;margin-bottom:var(--s5)}
.lead{font-size:var(--t-lead);line-height:1.6;color:var(--mut);max-width:62ch;
  letter-spacing:-.005em}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
.hero-demo{margin-top:var(--s7)}
.hero-demo-label{font:500 var(--t-xs)/1 var(--mono);text-transform:uppercase;
  letter-spacing:.09em;color:var(--faint);margin-bottom:var(--s3)}
.hero-demo .tool{margin:0}

/* ---------- group + cards ---------- */
.group{margin-bottom:var(--s8);scroll-margin-top:80px}
.group-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s3) var(--s5);
  margin-bottom:var(--s5)}
.group-head h2{font-size:var(--t-h2);letter-spacing:-.028em;font-weight:600}
.group-head h2 a:hover{color:var(--accent)}
.group-desc{font-size:var(--t-sm);color:var(--mut);max-width:58ch;flex:1 1 22ch}
.sub{font-size:var(--t-h2);letter-spacing:-.028em;margin:var(--s8) 0 var(--s5)}

.cards{display:grid;gap:var(--s5);grid-template-columns:repeat(4,minmax(0,1fr))}
.card{display:flex;flex-direction:column;gap:6px;min-height:86px;padding:var(--s4);
  background:var(--bg);border:1px solid var(--line);border-radius:8px;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease)}
.card:hover,.card:focus-visible{transform:translateY(-6px);border-color:var(--line-2);
  box-shadow:0 26px 40px -24px rgba(var(--navy),.3)}
.card:active{transform:translateY(-3px)}
.card .mark{align-self:flex-start;font:500 10px/1 var(--mono);letter-spacing:.07em;
  color:var(--mut);background:var(--surface);border:1px solid var(--line);
  border-radius:4px;padding:4px 7px;transition:color .22s var(--ease),border-color .22s var(--ease)}
.card:hover .mark{color:var(--accent);border-color:var(--accent)}
.card .nm{font-weight:500;font-size:.95rem;letter-spacing:-.012em;color:var(--ink)}
.card .ds{font-size:var(--t-sm);line-height:1.5;color:var(--mut);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- buttons + micro-interactions ---------- */
button,.fbtn{font:500 var(--t-sm)/1.45 var(--sans);padding:9px 16px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--bg);color:var(--ink);cursor:pointer;
  transition:background .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease),transform .08s var(--ease)}
button:hover,.fbtn:hover{background:var(--surface);border-color:var(--line-2)}
button:active,.fbtn:active{transform:translateY(1px)}
button.primary,.fbtn.primary{background:var(--ink);border-color:var(--ink);color:#fff;padding:11px 20px}
button.primary:hover,.fbtn.primary:hover{background:#000;border-color:#000}
button.mini{padding:5px 11px;font-size:var(--t-xs)}
button.swapbtn{padding:7px 12px;font-size:var(--t-sm)}
.fbtn{display:inline-block;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
button[disabled]{opacity:.5;cursor:not-allowed}
/* a control that just completed something says so in place, without a toast */
.is-done{border-color:var(--accent) !important;color:var(--accent) !important}

/* ---------- the tool widget ---------- */
.tool{margin:0 0 var(--s7);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--bg)}
.tool-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch}
.pane{display:flex;flex-direction:column;min-width:0}
.pane+.pane{border-left:1px solid var(--line)}
.pane-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  padding:var(--s2) var(--s3);background:var(--surface);border-bottom:1px solid var(--line)}
.pane-head .t{font:500 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--mut)}
.pane-body{display:flex;flex:1;min-width:0}
textarea{width:100%;min-height:280px;padding:var(--s4);border:0;background:transparent;color:var(--ink);
  font:400 13px/1.6 var(--mono);resize:none;tab-size:2}
textarea::placeholder{color:var(--faint)}
textarea:focus{outline:2px solid var(--accent);outline-offset:-2px}
textarea[readonly]{color:var(--body)}
.preview{min-height:280px;padding:var(--s4);overflow:auto;width:100%;color:var(--ink);font-size:.95rem;line-height:1.65}
.preview>:first-child{margin-top:0}
.tool-actions{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s3);
  padding:var(--s5);background:var(--surface);border-left:1px solid var(--line);border-right:1px solid var(--line)}
.tool-actions .hint{font:400 11px/1.45 var(--mono);color:var(--mut);text-align:center;max-width:16ch}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:var(--s2);
  padding:var(--s6);align-content:center;width:100%}
.stats div{text-align:center}
.stats b{display:block;font:600 2rem/1.1 var(--sans);color:var(--ink);letter-spacing:-.04em;
  font-variant-numeric:tabular-nums}
.stats span{display:block;margin-top:var(--s2);font:500 10px/1 var(--mono);text-transform:uppercase;
  letter-spacing:.08em;color:var(--faint)}

/* ---------- page heads, prose ---------- */
.page-head{max-width:66ch;margin-bottom:var(--s6)}
.page-head h1{font-size:var(--t-h1);letter-spacing:-.032em;font-weight:600;margin-bottom:var(--s3)}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);font-size:var(--t-xs);
  color:var(--faint);margin-bottom:var(--s5)}
.crumbs a{color:var(--faint)}
.crumbs a:hover{color:var(--accent)}
.crumbs span[aria-hidden]{color:var(--line-2)}
.crumbs span[aria-current]{color:var(--ink);font-weight:500}
article>*{max-width:72ch}
article>.tool,article>.cards,article>.preview{max-width:none}
article h2{font-size:var(--t-h2);letter-spacing:-.028em;margin:var(--s8) 0 var(--s3)}
article h3{font-size:var(--t-h3);font-weight:600;margin:var(--s5) 0 var(--s2)}
article p{margin-bottom:var(--s4);line-height:1.7}
article ul,article ol{padding-left:1.25em;margin:0 0 var(--s4)}
article li{margin:6px 0;line-height:1.65}
article strong{color:var(--ink);font-weight:600}
article a{color:var(--accent)}
article a:hover{text-decoration:underline;text-underline-offset:2px}
article table{border-collapse:collapse;width:100%;font-size:var(--t-sm);margin:var(--s5) 0;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
article th,article td{padding:10px var(--s3);text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line)}
article th{background:var(--surface);color:var(--ink);font-weight:600}
article tr:last-child td{border-bottom:0}
article code{font:400 13px var(--mono);background:var(--surface);padding:2px 6px;border-radius:4px}
article pre{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s4);overflow:auto}
article pre code{background:none;padding:0}

/* ---------- footer ---------- */
.site-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s4);
  padding:var(--s6) var(--s7);border-top:1px solid var(--line);font-size:var(--t-xs);color:var(--faint)}
.site-foot nav{display:flex;gap:var(--s5);flex-wrap:wrap}
.site-foot a{color:var(--faint)}
.site-foot a:hover{color:var(--accent)}

/* ---------- motion: transform/opacity only, and opt-out respected ---------- */
[data-reveal]{opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,[data-reveal]{transition:none !important;animation:none !important}
  [data-reveal]{opacity:1;transform:none}
}

/* ---------- responsive: four breakpoints ---------- */
@media (max-width:1180px){ .cards{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:960px){
  :root{--rail:0px}
  .shell{grid-template-columns:minmax(0,1fr)}
  .rail{position:fixed;inset:0 auto 0 0;z-index:30;width:276px;height:100%;
    background:var(--bg);border-right:1px solid var(--line);transform:translateX(-102%);
    transition:transform .26s var(--ease);box-shadow:0 24px 60px -30px rgba(var(--navy),.4)}
  body.rail-open .rail{transform:none}
  body.rail-open::after{content:"";position:fixed;inset:0;background:rgba(11,11,12,.34);z-index:25}
  .rail-toggle{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
    padding:0;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg)}
  .rail-toggle-bars,.rail-toggle-bars::before,.rail-toggle-bars::after{
    display:block;width:15px;height:1.5px;background:var(--ink);border-radius:2px;position:relative}
  .rail-toggle-bars::before,.rail-toggle-bars::after{content:"";position:absolute;left:0}
  .rail-toggle-bars::before{top:-5px}.rail-toggle-bars::after{top:5px}
  .topbar-brand{display:block}
  .topbar{padding:0 var(--s5)}
  main{padding:var(--s6) var(--s5) var(--s8)}
  .site-foot{padding:var(--s5)}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  :root{--s7:32px;--s8:48px;--s9:64px}
  /* The topbar menu duplicates the rail, and at 390px it was the one thing pushing
     the document 8px wider than the viewport. The drawer already carries every link
     it had, so it is dropped rather than shrunk. */
  .topbar-nav{display:none}
  .cards{grid-template-columns:minmax(0,1fr)}
  .hero{padding-bottom:var(--s7);margin-bottom:var(--s7)}
  .tool-row{grid-template-columns:1fr}
  .pane+.pane{border-left:0;border-top:1px solid var(--line)}
  .tool-actions{flex-direction:row;flex-wrap:wrap;justify-content:center;padding:var(--s4);
    border:0;border-top:1px solid var(--line)}
  textarea,.preview{min-height:180px}
  .stats b{font-size:1.6rem}
  .site-foot{flex-direction:column;gap:var(--s3)}
}