/* Copyright (c) 2026 Patrick Hamid. All rights reserved.
   Design tokens, shell and components mirror the insta.host landing template so
   these pages read as part of the same site rather than a bolted-on microsite. */

:root{
  --bg:#04060f; --bg2:#0a1030; --ink:#eaf0ff; --muted:#93a0cf;
  --cyan:#22d3ee; --violet:#a855f7; --blue:#4f74ff;
  --line:rgba(140,165,255,.14); --card:rgba(20,28,64,.42);
  --danger:#ff9d9d;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--ink);background:var(--bg);
  min-height:100vh;overflow-x:hidden;position:relative;line-height:1.6;-webkit-font-smoothing:antialiased;
}

/* animated aurora background */
.aura{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;animation:float 18s ease-in-out infinite}
.orb.c{width:520px;height:520px;background:radial-gradient(circle,#22d3ee,transparent 70%);top:-120px;left:-80px}
.orb.v{width:560px;height:560px;background:radial-gradient(circle,#a855f7,transparent 70%);top:120px;right:-140px;animation-delay:-6s}
.orb.b{width:480px;height:480px;background:radial-gradient(circle,#4f74ff,transparent 70%);bottom:-160px;left:30%;animation-delay:-11s}
@keyframes float{0%,100%{transform:translate(0,0)}33%{transform:translate(40px,-30px)}66%{transform:translate(-30px,25px)}}

/* grid overlay */
.grid{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000 40%,transparent 100%);
          mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000 40%,transparent 100%);
  opacity:.5}

.wrap{position:relative;z-index:1;max-width:1140px;margin:0 auto;padding:0 24px}
.narrow{max-width:760px}

/* nav */
nav{display:flex;align-items:center;justify-content:space-between;padding:26px 0;gap:16px}
.brand{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:22px;letter-spacing:.5px;text-decoration:none;
  background:linear-gradient(90deg,var(--cyan),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}
.brand span{opacity:.6}
.nav-actions{display:flex;align-items:center;gap:12px}
.navlink{color:var(--muted);font-size:13px;font-weight:500;text-decoration:none;transition:.2s}
.navlink:hover{color:var(--cyan)}
.pill{display:inline-flex;align-items:center;gap:8px;font:500 12px/1 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:2px;color:#c9d4ff;padding:9px 14px;border:1px solid var(--line);border-radius:999px;
  background:rgba(120,140,255,.06);text-transform:uppercase}
.dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan);animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}

/* page head */
.page-head{text-align:center;padding:56px 0 34px;max-width:720px;margin:0 auto}
.section-kicker{display:inline-block;margin-bottom:12px;font:500 11px/1 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:2px;text-transform:uppercase;color:var(--cyan)}
h1{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(34px,6vw,64px);line-height:1.05;letter-spacing:-1.2px;
  background:linear-gradient(100deg,#eaf0ff 10%,#7cc9ff 40%,#c39bff 70%,#eaf0ff 95%);background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 8s linear infinite}
@keyframes shine{to{background-position:200% center}}
.sub{margin:20px auto 0;color:var(--muted);font-size:clamp(15px,2vw,18px);font-weight:300;max-width:600px}

/* notice */
.notice{position:relative;z-index:1;max-width:760px;margin:0 auto 26px;padding:14px 18px;border-radius:14px;
  border:1px solid var(--line);border-left:2px solid var(--cyan);background:rgba(34,211,238,.07);
  color:#c9d4ff;font-size:14px;font-weight:300}

/* generic card */
.panel{padding:30px;border:1px solid var(--line);border-radius:20px;background:var(--card);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);position:relative;overflow:hidden}
.panel:before{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,var(--cyan),var(--violet));opacity:.8}

/* filter bar. Hidden in the markup and revealed by the first-party script, so a
   visitor without scripting never meets a control that cannot work. */
.toolbar{display:grid;gap:18px;margin:0 0 26px;padding:20px 22px;border:1px solid var(--line);
  border-radius:18px;background:var(--card);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.toolbar[hidden]{display:none}
.toolbar-search{position:relative;display:flex;align-items:center}
.toolbar-search-icon{position:absolute;left:16px;font-size:14px;opacity:.7;pointer-events:none}
.toolbar-search input{width:100%;min-width:0;font-family:inherit;font-size:15px;color:var(--ink);
  background:rgba(0,0,0,.24);border:1px solid var(--line);border-radius:12px;padding:13px 16px 13px 44px}
.toolbar-search input::placeholder{color:#5f6b96}
.toolbar-search input:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-color:var(--cyan)}
.toolbar-search input::-webkit-search-cancel-button{filter:invert(1) opacity(.5)}
.toolbar-filters{display:flex;flex-wrap:wrap;gap:18px 34px}
.chipset{border:0;padding:0;margin:0;display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.chipset legend{float:left;width:auto;margin:0 12px 0 0;padding:0;display:block;
  font:500 10px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--muted)}
.chip{cursor:pointer}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-block;padding:8px 14px;border:1px solid var(--line);border-radius:999px;
  background:rgba(120,140,255,.06);color:#c9d4ff;font-size:13px;font-weight:500;transition:.2s}
.chip:hover span{border-color:rgba(120,180,255,.38);color:#fff}
.chip input:checked+span{border-color:var(--cyan);background:rgba(34,211,238,.14);color:#fff}
.chip input:focus-visible+span{outline:2px solid var(--cyan);outline-offset:3px}
.toolbar-status{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:16px}
.filter-count{margin:0;color:var(--muted);font-size:13px;font-weight:300}
.btn-small{padding:9px 16px;font-size:13px}
/* Nothing is loading when this control is disabled; it simply has nothing to clear. */
#tool-reset:disabled{cursor:default;opacity:.45}
.tool-empty{margin:0 0 26px;padding:22px;border:1px dashed var(--line);border-radius:16px;
  background:rgba(0,0,0,.18);color:var(--muted);font-size:15px;font-weight:300;text-align:center}
.tool-empty[hidden]{display:none}

/* catalogue: two cards across on a wide screen, one on a narrow one */
.tool-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;align-items:start}

/* tool entry */
.tool{margin-bottom:0}
.tool-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.tool-top-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tool-category{padding:6px 11px;border:1px solid var(--line);border-radius:999px;
  background:rgba(168,85,247,.12);color:#dcc7ff;
  font:500 10px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:1.5px;text-transform:uppercase}
.product-icon{width:50px;height:50px;display:grid;place-items:center;border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(135deg,rgba(34,211,238,.18),rgba(168,85,247,.18));font-size:23px}
.status-badge{display:inline-flex;align-items:center;gap:7px;font:500 10px/1 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:1.5px;text-transform:uppercase;color:#b9f6ff}
.status-badge:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.tool h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(24px,3.4vw,32px);line-height:1.15;margin-bottom:10px;letter-spacing:-.4px}
.tool h3{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:600;margin:26px 0 8px;color:var(--ink)}
.tool p{color:var(--muted);font-size:15px;font-weight:300;margin:8px 0}
.product-tags{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 0}
.product-tags span{padding:6px 9px;border:1px solid var(--line);border-radius:999px;background:rgba(120,140,255,.06);
  color:#c9d4ff;font:500 10px/1 'JetBrains Mono',ui-monospace,monospace}

.safety{list-style:none;margin:10px 0 0;display:grid;gap:10px}
.safety li{position:relative;padding-left:26px;color:var(--muted);font-size:14px;font-weight:300}
.safety li:before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;border-radius:50%;
  background:linear-gradient(135deg,var(--cyan),var(--violet));box-shadow:0 0 10px rgba(34,211,238,.5)}
.safety strong{color:var(--ink);font-weight:600}

/* download */
.download{margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px;color:var(--muted);font-size:12px;font-weight:300}
/* Flex items default to min-width:auto, which lets the 64-character checksum
   force the page wider than a 390px screen. */
.meta span{min-width:0;max-width:100%}
/* A link in a meta line inherited the browser default, which reads as raw blue
   against the dark panel. It follows the same accent as every other inline link. */
.meta a{color:var(--cyan);text-decoration:none;border-bottom:1px solid rgba(34,211,238,.35)}
.meta a:hover{border-bottom-color:var(--cyan)}

/* Body copy outside a tool card. The tool cards get their rhythm from `.tool h3`
   and friends; a panel of prose had no rules at all, so paragraphs ran together
   and links fell back to the browser's default blue, which is unreadable on this
   background. Scoped rather than global so no existing page shifts underneath. */
.prose h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(20px,2.6vw,26px);line-height:1.2;
  letter-spacing:-.3px;margin-bottom:14px}
.prose h3{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:600;margin:24px 0 8px;color:var(--ink)}
.prose p{margin:0 0 14px;color:var(--muted);font-weight:300}
.prose p:last-child{margin-bottom:0}
.prose ol,.prose ul{margin:0 0 14px;padding-left:20px;color:var(--muted);font-weight:300}
.prose li{margin:0 0 8px}
.prose li strong,.prose p strong{color:var(--ink);font-weight:600}
.prose a{color:var(--cyan);text-decoration:none;border-bottom:1px solid rgba(34,211,238,.35)}
.prose a:hover{border-bottom-color:var(--cyan)}
.prose code{font:500 12px/1.5 'JetBrains Mono',ui-monospace,monospace;color:#aeb9e6;
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:6px;padding:1px 6px}
.prose .hint{margin-top:18px}
.meta code{font:500 11px/1.5 'JetBrains Mono',ui-monospace,monospace;color:#aeb9e6;
  word-break:break-all;overflow-wrap:anywhere}
.warn{margin-top:14px;padding:12px 16px;border:1px dashed var(--line);border-radius:12px;
  background:rgba(0,0,0,.2);color:#e7c9a0;font-size:13px;font-weight:300}
/* A command the reader has to type. Wraps rather than scrolls, because a horizontal
   scrollbar inside a card is invisible on a phone and the command looks truncated. */
.cmd{margin:12px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;
  background:var(--bg);overflow-x:auto}
.cmd code{display:block;font:500 11px/1.6 'JetBrains Mono',ui-monospace,monospace;
  color:#aeb9e6;white-space:pre-wrap;word-break:break-all;overflow-wrap:anywhere}
.hint a{color:var(--cyan)}
.hint code{font:500 10px/1.5 'JetBrains Mono',ui-monospace,monospace;word-break:break-all}
/* Two cards sit side by side, so a card is about half the page wide: platform
   choices stack inside it rather than competing with the column beside it. */
.download-grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:28px}
.download-option{margin-top:0;padding:22px;border:1px solid var(--line);border-radius:16px;background:rgba(0,0,0,.16)}
.download-option h3{margin:0 0 8px}
.tool code{font:500 12px/1.5 'JetBrains Mono',ui-monospace,monospace;color:#aeb9e6}

/* per-tool collapsible description and changelog */
.tool-lede{margin-top:0}
.tool-folds{margin-top:28px;border-top:1px solid var(--line)}
.fold{border-bottom:1px solid var(--line)}
.fold summary{display:flex;align-items:center;justify-content:space-between;gap:18px;cursor:pointer;
  list-style:none;padding:18px 2px;font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:600;color:var(--ink)}
.fold summary::-webkit-details-marker{display:none}
.fold summary:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:8px}
.fold summary:hover{color:var(--cyan)}
.fold-toggle{display:grid;place-items:center;width:30px;height:30px;flex:0 0 auto;border:1px solid var(--line);
  border-radius:50%;color:var(--cyan);font-family:'Space Grotesk',sans-serif;font-size:19px;line-height:1;transition:.2s}
.fold[open] .fold-toggle{transform:rotate(45deg)}
.fold-body{padding:2px 0 24px}
.fold-body>h3:first-child{margin-top:0}
.fold-body .history-list{margin-top:0;border-top:0}
.fold-body .history-list article:first-child{padding-top:0}

/* collapsible release history */
.release-history{margin:26px 0}
.release-history summary{display:flex;align-items:center;justify-content:space-between;gap:18px;cursor:pointer;list-style:none}
.release-history summary::-webkit-details-marker{display:none}
.release-history summary strong{display:block;font-family:'Space Grotesk',sans-serif;font-size:22px;line-height:1.2}
.release-history summary .section-kicker{margin-bottom:8px}
.history-toggle{display:grid;place-items:center;width:38px;height:38px;flex:0 0 auto;border:1px solid var(--line);
  border-radius:50%;color:var(--cyan);font-family:'Space Grotesk',sans-serif;font-size:24px;transition:.2s}
.release-history[open] .history-toggle{transform:rotate(45deg)}
.history-list{display:grid;gap:0;margin-top:24px;border-top:1px solid var(--line)}
.history-list article{padding:20px 0;border-bottom:1px solid var(--line)}
.history-list article:last-child{border-bottom:0;padding-bottom:0}
.history-list p{margin:8px 0 0;color:var(--muted);font-size:14px;font-weight:300}
.history-meta{display:flex;align-items:center;justify-content:space-between;gap:16px}
.history-meta strong{font:600 13px/1 'JetBrains Mono',ui-monospace,monospace;color:var(--ink)}
.history-meta time{font:500 11px/1 'JetBrains Mono',ui-monospace,monospace;color:var(--muted)}
.copyright{margin:12px 0 0;color:var(--muted);font-size:12px;font-weight:300}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:600;font-size:15px;
  padding:15px 28px;border-radius:12px;text-decoration:none;transition:.25s;cursor:pointer;border:1px solid transparent;
  font-family:inherit}
.btn-primary{background:linear-gradient(90deg,var(--cyan),var(--violet));color:#060814;
  box-shadow:0 8px 30px rgba(120,90,255,.35)}
.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 12px 40px rgba(120,90,255,.5)}
.btn-ghost{background:rgba(140,160,255,.05);border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--cyan);color:#fff;background:rgba(34,211,238,.08)}
.btn:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.btn:disabled{opacity:.6;cursor:progress;transform:none}
.btn-block{display:flex;width:100%}

/* donation form */
form fieldset{border:0;padding:0;margin:0 0 26px}
legend{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:16px;padding:0;margin-bottom:14px;
  display:flex;align-items:baseline;gap:10px;width:100%}
.cur,.optional{font:500 10px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}

.amount-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.radio-row{display:block;cursor:pointer}
.radio-row input{position:absolute;opacity:0;width:1px;height:1px}
.radio-face{display:flex;flex-direction:column;gap:4px;border:1px solid var(--line);border-radius:14px;
  padding:16px 18px;background:rgba(120,140,255,.06);transition:.25s}
.radio-row:hover .radio-face{border-color:rgba(120,180,255,.38);transform:translateY(-2px)}
.radio-row input:checked+.radio-face{border-color:var(--cyan);background:rgba(34,211,238,.1);
  box-shadow:0 10px 30px rgba(10,15,50,.45)}
.radio-row input:focus-visible+.radio-face{outline:2px solid var(--cyan);outline-offset:3px}
.tier-amount{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;letter-spacing:-.4px}
.tier-label{font-size:12px;color:var(--muted);font-weight:300}

.other{margin-top:12px}
.other-input{display:none;align-items:center;gap:4px;margin-top:12px;border:1px solid var(--cyan);border-radius:14px;
  padding:2px 18px;background:rgba(34,211,238,.08)}
.other-input.visible{display:flex}
.other-input .prefix{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;color:var(--muted)}
.other-input input{border:0;background:transparent;color:var(--ink);font-family:'Space Grotesk',sans-serif;
  font-size:22px;font-weight:700;padding:14px 6px;width:100%;min-width:0}
.other-input input:focus{outline:none}
.other-input:focus-within{outline:2px solid var(--cyan);outline-offset:3px}
.hint{font-size:12px;color:var(--muted);margin-top:12px;font-weight:300}

.details label{display:block;font:500 10px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--muted);margin:16px 0 8px}
.details input,.details textarea{width:100%;font-family:inherit;font-size:15px;color:var(--ink);
  background:rgba(0,0,0,.2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;resize:vertical}
.details input::placeholder,.details textarea::placeholder{color:#5f6b96}
.details input:focus-visible,.details textarea:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-color:var(--cyan)}

.error{color:var(--danger);font-size:14px;font-weight:500;margin-bottom:14px}
.secure{font-size:12px;color:var(--muted);text-align:center;margin-top:16px;font-weight:300}
.secure strong{color:#c9d4ff;font-weight:600}

/* support band */
.band{position:relative;z-index:1;margin:26px 0 0;text-align:center;padding:44px 28px;border-radius:24px;
  border:1px solid var(--line);background:linear-gradient(180deg,rgba(30,40,90,.35),rgba(10,14,40,.25));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.band h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(22px,3.4vw,32px);font-weight:700;letter-spacing:-.5px;margin-bottom:12px}
.band h2 em{font-style:normal;background:linear-gradient(90deg,var(--cyan),var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.band p{max-width:520px;margin:0 auto 24px;color:var(--muted);font-weight:300;font-size:15px}
.band-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}

/* thanks */
.thanks-mark{width:74px;height:74px;margin:0 auto 8px;display:grid;place-items:center;font-size:34px;border-radius:22px;
  border:1px solid var(--line);background:linear-gradient(135deg,rgba(34,211,238,.18),rgba(168,85,247,.18))}

/* footer */
footer{position:relative;z-index:1;border-top:1px solid var(--line);margin-top:70px;padding:34px 0 60px;
  text-align:center;color:var(--muted);font-size:13px;font-weight:300}
footer .brand{font-size:15px;display:inline-block;margin-bottom:6px}
.footer-links{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin:12px 0}
.footer-links a{color:var(--muted);text-decoration:none}
.footer-links a:hover{color:var(--cyan)}
.disclosure-note{max-width:640px;margin:10px auto 0;font-size:12px;opacity:.85}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0}

@media(max-width:980px){
  .tool-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
  .panel{padding:24px 20px}
  .page-head{padding:40px 0 26px}
  .toolbar{padding:18px 16px;gap:14px}
  .toolbar-filters{gap:14px}
  .chipset{width:100%}
  .toolbar-status{flex-direction:column;align-items:flex-start}
}
@media(max-width:560px){
  .amount-grid{grid-template-columns:1fr}
  .nav-actions .pill{display:none}
  .wrap{padding:0 16px}
  .band{padding:34px 20px}
}
@media(prefers-reduced-motion:reduce){
  .orb,h1,.dot{animation:none}
  .radio-row:hover .radio-face,.btn-primary:hover:not(:disabled),.history-toggle{transform:none}
  .fold-toggle{transition:none}
}