/* ------------------------------------------------------------------
   ZIPtoAPK (ziptoapk.net) — shared site styles.
   Midnight ground, electric-lime signal colour, violet secondary.
   Headings Space Grotesk, body IBM Plex Sans, code IBM Plex Mono.

   The class names are the contract the build scripts and the tool markup
   rely on; the look lives entirely here. One file, no framework.
------------------------------------------------------------------- */
:root{
  color-scheme:dark;
  --bg:#0a0b10;
  --bg-soft:#0e1017;
  --surface:#13151e;
  --surface-2:#171a25;
  --surface-3:#1d2130;
  --line:#232838;
  --line-2:#2f3549;
  --ink:#f2f4f8;
  --body:#aab1c3;
  --muted:#727a90;
  --accent:#c6f135;
  --accent-strong:#b3e021;
  --accent-deep:#d8ff6a;
  --accent-ink:#0b0d06;
  --accent-wash:rgba(198,241,53,.08);
  --accent-ring:rgba(198,241,53,.3);
  --violet:#9d8cff;
  --violet-wash:rgba(157,140,255,.12);
  --sage:#4fd1a1;
  --sage-wash:rgba(79,209,161,.12);
  --amber:#ffb547;
  --amber-deep:#ffc56e;
  --amber-wash:rgba(255,181,71,.12);
  --blue:#6fb7ff;
  --blue-wash:rgba(111,183,255,.12);
  --danger:#ff6b6b;
  --warn:#ffb547;
  --ok:#4fd1a1;
  --radius:14px;
  --shadow:0 18px 40px -22px rgba(0,0,0,.8);
  --shadow-lg:0 40px 80px -30px rgba(0,0,0,.85);
  --glow:0 0 0 1px rgba(198,241,53,.35),0 10px 30px -10px rgba(198,241,53,.45);
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --head:"Space Grotesk","IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
  /* aliases for markup written against older palettes */
  --teal:var(--accent);--teal-dark:var(--accent-strong);--teal-deep:var(--accent-deep);
  --teal-wash:var(--accent-wash);--navy:var(--ink);--cyan:var(--accent);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
section[id],[id^="step-"],.prose h2[id],.prose h3[id],.section[id]{scroll-margin-top:90px}
body{
  margin:0;font-family:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--body);line-height:1.65;-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1000px 500px at 85% -120px,rgba(157,140,255,.10),transparent 60%),
    radial-gradient(800px 420px at 0% -80px,rgba(198,241,53,.06),transparent 60%),
    var(--bg);
}
h1,h2,h3,h4{font-family:var(--head);color:var(--ink)}
::selection{background:rgba(198,241,53,.3);color:#fff}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(198,241,53,.5)}
img,svg,canvas{max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.narrow{max-width:820px}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--accent);color:var(--accent-ink);padding:8px 14px;border-radius:8px;font-weight:600}
.skip:focus{left:12px}
kbd{font-family:var(--mono);font-size:11px;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:5px;padding:1px 6px;color:var(--ink);background:var(--surface-2)}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;background:rgba(10,11,16,.78);border-bottom:1px solid var(--line);
  backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
}
.nav{position:relative;display:flex;align-items:center;gap:22px;height:64px}
.brand{display:flex;align-items:center;gap:10px}
.brand:hover{text-decoration:none}
.brand-text{display:flex;align-items:baseline;gap:1px}
.brand-text b{font-family:var(--mono);font-size:17px;color:var(--ink);font-weight:600;letter-spacing:-.3px;white-space:nowrap}
.brand-text b i{font-style:normal;color:var(--accent);margin:0 1px}
.brand-text span{font-family:var(--mono);font-size:13px;color:var(--muted)}
.menu{display:flex;gap:2px;margin-left:10px}
.menu a{font-size:14.5px;font-weight:500;color:var(--body);padding:7px 12px;border-radius:8px;transition:background .15s,color .15s}
.menu a:hover{color:var(--ink);background:var(--surface-2);text-decoration:none}
.menu a.active{color:var(--accent);background:var(--accent-wash)}
.menu .menu-cta{display:none}
.nav-right{display:flex;align-items:center;gap:10px;margin-left:auto}
.kbd-hint{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:5px 10px 5px 6px;font-family:var(--mono)}
.kbd-hint:hover{color:var(--ink);border-color:var(--line-2);text-decoration:none}
.nav-toggle{display:none;background:var(--surface);border:1px solid var(--line-2);border-radius:9px;padding:7px;cursor:pointer;color:var(--ink)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid transparent;cursor:pointer;
  font-size:14.5px;font-weight:600;font-family:inherit;padding:11px 20px;border-radius:10px;transition:.16s;line-height:1.2;color:var(--ink);
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:var(--glow)}
.btn-primary:hover{background:var(--accent-deep);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-wash)}
.btn-soft{background:var(--surface-3);color:var(--ink);border-color:var(--line-2)}
.btn-soft:hover{border-color:var(--accent);color:var(--accent)}
.btn-white{background:var(--ink);color:var(--bg)}
.btn-white:hover{background:#fff}
.btn-sm{padding:7px 13px;font-size:13.5px;border-radius:9px}
.btn-lg{padding:14px 24px;font-size:15.5px}
.btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;transform:none}

/* ---------- breadcrumbs ---------- */
.crumbs{font-size:12.5px;color:var(--muted);padding:22px 0 0;font-family:var(--mono)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.crumbs li::after{content:"/";margin-left:8px;color:var(--line-2)}
.crumbs li:last-child::after{content:""}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--accent)}
.crumbs span{color:var(--body)}

/* ---------- page head ---------- */
.page-head{padding:20px 0 34px;position:relative}
.page-head h1{font-size:46px;line-height:1.05;margin:0 0 14px;font-weight:700;letter-spacing:-1.6px}
.page-head .lede{font-size:17.5px;margin:0;max-width:740px;color:var(--body)}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:500;letter-spacing:.3px;
  color:var(--accent);font-family:var(--mono);margin-bottom:14px;
}
.eyebrow::before{content:"//";color:var(--muted)}

/* ---------- tool card ---------- */
.tool{
  background:linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow);padding:0 28px 28px;margin:8px 0 44px;position:relative;overflow:hidden;
}
.tool::before{
  content:"● ● ●";display:block;margin:0 -28px 22px;padding:10px 16px;font-size:9px;letter-spacing:3px;color:var(--line-2);
  border-bottom:1px solid var(--line);background:rgba(0,0,0,.2);
}
.tool h2{font-size:20px;margin:0 0 4px;font-weight:600}
.tool-note{font-size:13.5px;color:var(--muted);margin:0 0 20px}
.field{margin-bottom:18px}
.field > label,.field-label{display:block;font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:7px;letter-spacing:.2px}
.hint{font-size:12.5px;color:var(--muted);margin-top:6px}
input[type=text],input[type=number],input[type=url],input[type=email],input[type=search],select,textarea{
  width:100%;font-family:inherit;font-size:14.5px;color:var(--ink);background:var(--bg);
  border:1px solid var(--line-2);border-radius:10px;padding:10px 12px;transition:.15s;
}
input::placeholder,textarea::placeholder{color:var(--muted)}
select{
  appearance:none;-webkit-appearance:none;padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23727a90' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;
}
select option{background:var(--surface);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
textarea{resize:vertical;min-height:120px;font-family:var(--mono);font-size:13px;line-height:1.55}
input[type=color]{width:46px;height:38px;padding:2px;border:1px solid var(--line-2);border-radius:9px;background:var(--bg);cursor:pointer}
input[type=range]{width:100%;accent-color:var(--accent)}
.row{display:flex;gap:14px;flex-wrap:wrap}
.row > *{flex:1 1 200px;min-width:0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.inline{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.check{display:flex;align-items:flex-start;gap:9px;font-size:14px;color:var(--ink);cursor:pointer;padding:6px 0}
.check input{margin-top:3px;accent-color:var(--accent);width:16px;height:16px;flex:none}
.check span small{display:block;color:var(--muted);font-size:12.5px;font-weight:400}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:9px;cursor:pointer;
  border:1px solid var(--line-2);background:var(--bg);color:var(--body);font-size:13.5px;font-weight:500;transition:.15s;user-select:none;
}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip:hover{border-color:var(--accent);color:var(--ink)}
.chip.on{background:var(--accent-wash);border-color:var(--accent);color:var(--accent)}

.drop{
  border:1.5px dashed var(--line-2);border-radius:14px;background:
    repeating-linear-gradient(135deg,transparent 0 12px,rgba(255,255,255,.012) 12px 24px),var(--bg);
  padding:34px 20px;text-align:center;cursor:pointer;transition:.16s;
}
.drop:hover,.drop.over{border-color:var(--accent);background:var(--accent-wash)}
.drop svg{color:var(--accent);margin-bottom:8px}
.drop b{display:block;color:var(--ink);font-size:15px}
.drop small{color:var(--muted);font-family:var(--mono);font-size:12px}

.out{margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.out:empty{display:none}
.code{
  position:relative;background:#07080c;color:#dfe4ee;border:1px solid var(--line);border-radius:12px;padding:16px;
  font-family:var(--mono);font-size:12.8px;line-height:1.6;overflow-x:auto;white-space:pre;margin:0 0 14px;
}
.code .tok-key{color:#c6f135}.code .tok-str{color:#ffc56e}.code .tok-num{color:#9d8cff}.code .tok-com{color:#5f6780}
.copy{
  position:absolute;top:9px;right:9px;background:var(--surface-2);color:var(--body);
  border:1px solid var(--line-2);border-radius:7px;padding:4px 10px;font-size:12px;cursor:pointer;font-family:var(--mono);
}
.copy:hover{border-color:var(--accent);color:var(--accent)}
.result-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:14px}
.result{border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center;background:var(--bg)}
.result .thumb{
  background:#1a1d28 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M0 0h8v8H0zM8 8h8v8H8z' fill='%23232838'/%3E%3C/svg%3E");
  border-radius:9px;display:flex;align-items:center;justify-content:center;padding:10px;margin-bottom:9px;min-height:96px;
}
.result b{display:block;font-size:13px;color:var(--ink)}
.result small{color:var(--muted);font-size:11.5px}
.badge{display:inline-block;font-size:11px;font-weight:600;padding:2px 9px;border-radius:6px;letter-spacing:.2px;font-family:var(--mono)}
.badge-ok{background:var(--sage-wash);color:var(--ok)}
.badge-warn{background:var(--amber-wash);color:var(--warn)}
.badge-err{background:rgba(255,107,107,.12);color:var(--danger)}
.badge-info{background:var(--violet-wash);color:var(--violet)}
.note{border-radius:12px;padding:12px 15px;font-size:14px;margin:0 0 14px;border:1px solid}
.note-ok{background:var(--sage-wash);border-color:rgba(79,209,161,.35);color:#a6f0d4}
.note-warn{background:var(--amber-wash);border-color:rgba(255,181,71,.35);color:#ffd9a0}
.note-err{background:rgba(255,107,107,.08);border-color:rgba(255,107,107,.35);color:#ffb3b3}
.note-info{background:var(--violet-wash);border-color:rgba(157,140,255,.35);color:#cfc7ff}
.note a{color:inherit;text-decoration:underline}
.swatch{width:26px;height:26px;border-radius:7px;border:1px solid var(--line-2);flex:none}
.tabs{display:flex;gap:4px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:4px;margin-bottom:16px;flex-wrap:wrap}
.tabs button{background:none;border:none;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--muted);padding:7px 14px;cursor:pointer;border-radius:7px;transition:.15s}
.tabs button:hover{color:var(--ink)}
.tabs button.on{color:var(--accent-ink);background:var(--accent)}
.panel[hidden]{display:none}
.meter{height:8px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.meter i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--danger),var(--amber),var(--accent));transition:width .4s ease}
.score{font-family:var(--head);font-size:52px;font-weight:700;color:var(--ink);letter-spacing:-2px;line-height:1}
.score small{font-size:18px;color:var(--muted);letter-spacing:0;font-weight:500}

/* data table used by tools (file lists, reports) */
.dtable{width:100%;border-collapse:collapse;font-size:13.5px}
.dtable th,.dtable td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.dtable th{font-family:var(--mono);font-size:11.5px;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.dtable td code,.dtable td.mono{font-family:var(--mono);font-size:12.5px;color:var(--ink);word-break:break-all}
.dtable td.num{text-align:right;font-family:var(--mono);white-space:nowrap}
.dtable tr:hover td{background:rgba(255,255,255,.015)}
.scroll-box{max-height:420px;overflow:auto;border:1px solid var(--line);border-radius:12px}
.kv{display:grid;grid-template-columns:minmax(140px,max-content) 1fr;gap:8px 18px;font-size:14px;margin:0 0 16px}
.kv dt{color:var(--muted);font-family:var(--mono);font-size:12.5px;padding-top:2px}
.kv dd{margin:0;color:var(--ink);word-break:break-all}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:0 0 16px}
.stat{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--bg)}
.stat b{display:block;font-family:var(--head);font-size:24px;color:var(--ink);letter-spacing:-.5px}
.stat span{font-size:12px;color:var(--muted);font-family:var(--mono)}

/* ---------- prose ---------- */
.prose{font-size:16.5px;color:var(--body);max-width:780px}
.prose h2{font-size:28px;margin:48px 0 14px;font-weight:600;letter-spacing:-.7px}
.prose h3{font-size:19px;margin:30px 0 10px;font-weight:600}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 16px;padding-left:22px}
.prose li{margin-bottom:8px}
.prose li::marker{color:var(--accent)}
.prose code{background:var(--surface-3);border:1px solid var(--line);border-radius:5px;padding:1px 6px;font-family:var(--mono);font-size:13.5px;color:var(--accent-deep)}
.prose strong{color:var(--ink);font-weight:600}
.prose table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:14.5px}
.prose th,.prose td{text-align:left;padding:10px 13px;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{color:var(--muted);font-weight:500;background:var(--surface-2);font-size:11.5px;letter-spacing:.6px;text-transform:uppercase;font-family:var(--mono)}
.prose tr:last-child td{border-bottom:0}
.prose td code{font-size:12.5px}
.table-scroll{overflow-x:auto;margin-bottom:20px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.table-scroll table{margin:0}
.prose blockquote{margin:0 0 20px;padding:14px 18px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:0 12px 12px 0}
.prose blockquote p:last-child{margin:0}
.prose .callout{border:1px solid rgba(157,140,255,.3);background:var(--violet-wash);border-radius:12px;padding:14px 18px;margin:0 0 20px}
.prose .callout p:last-child{margin:0}
.prose .callout b{color:#cfc7ff}
.prose .warn{border:1px solid rgba(255,181,71,.3);background:var(--amber-wash);border-radius:12px;padding:14px 18px;margin:0 0 20px}
.prose .warn p:last-child{margin:0}
.prose pre{background:#07080c;color:#dfe4ee;border:1px solid var(--line);border-radius:12px;padding:16px;font-family:var(--mono);font-size:13px;line-height:1.6;overflow-x:auto;margin:0 0 18px}
.prose pre code{background:none;border:0;padding:0;color:inherit;font-size:inherit}
.prose pre[data-file]{padding-top:40px;position:relative}
.prose pre[data-file]::before{content:attr(data-file);position:absolute;top:0;left:0;right:0;padding:7px 14px;font-size:11.5px;color:var(--muted);border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.prose .tree{font-family:var(--mono);font-size:13px;line-height:1.7;white-space:pre;background:#07080c;border:1px solid var(--line);border-radius:12px;padding:14px 16px;overflow-x:auto;margin:0 0 18px;color:var(--body)}
.prose .tree b{color:var(--accent);font-weight:500}
.prose .tree em{color:var(--muted);font-style:normal}

/* FAQ */
.faq{max-width:800px}
.faq details{border:1px solid var(--line);border-radius:12px;margin-bottom:8px;background:var(--surface);transition:border-color .16s}
.faq details[open]{border-color:var(--line-2)}
.faq summary{
  cursor:pointer;padding:15px 18px;font-weight:600;color:var(--ink);font-size:15.5px;list-style:none;
  display:flex;justify-content:space-between;gap:14px;align-items:center;font-family:var(--head);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-family:var(--mono);color:var(--accent);font-size:18px;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .answer,.faq .answer-body{padding:0 18px 16px;font-size:15px}
.faq .answer p,.faq .answer-body p{margin:0 0 12px}
.faq .answer p:last-child,.faq .answer-body p:last-child{margin:0}

/* sections / cards */
.section{padding:64px 0}
.section-alt{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-title{font-size:24px;margin:0 0 20px;font-weight:600;letter-spacing:-.4px}
h2.center{font-size:38px;text-align:center;margin:0 0 12px;font-weight:700;letter-spacing:-1.3px}
.rule{width:40px;height:3px;background:var(--accent);border-radius:3px;margin:0 auto 36px}
.sub-center{text-align:center;max-width:660px;margin:-2px auto 36px;color:var(--body);font-size:17px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px;display:block;color:inherit;
  transition:.18s;position:relative;overflow:hidden;
}
a.card:hover{border-color:rgba(198,241,53,.45);text-decoration:none;background:var(--surface-2)}
a.card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent);transform:scaleY(0);transition:transform .2s;transform-origin:top;
}
a.card:hover::before{transform:scaleY(1)}
.card .ico{width:40px;height:40px;border-radius:10px;background:var(--accent-wash);color:var(--accent);border:1px solid rgba(198,241,53,.2);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.card h3{font-size:16.5px;margin:0 0 6px;font-weight:600;letter-spacing:-.2px}
.card p{font-size:14px;margin:0;color:var(--body)}
.card .go{display:inline-block;margin-top:12px;font-family:var(--mono);font-size:12px;color:var(--muted)}
a.card:hover .go{color:var(--accent)}
.tool-group{margin-bottom:46px}
.tool-group h2{font-size:22px;margin:0 0 4px;font-weight:600;letter-spacing:-.4px}
.tool-group h2 small{font-family:var(--mono);font-size:12px;color:var(--muted);font-weight:400;margin-left:8px}
.tool-group .group-note{margin:0 0 18px;font-size:15px}

/* CTA */
.cta{
  position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
  background:
    linear-gradient(rgba(198,241,53,.05) 1px,transparent 1px) 0 0/28px 28px,
    linear-gradient(90deg,rgba(198,241,53,.05) 1px,transparent 1px) 0 0/28px 28px,
    linear-gradient(135deg,#141a0c,#0f1118 60%,#15122a);
  border:1px solid rgba(198,241,53,.25);border-radius:20px;padding:40px 44px;margin:52px 0 0;
}
.cta h2{font-size:30px;margin:0 0 8px;font-weight:700;letter-spacing:-.9px}
.cta p{color:var(--body);margin:0;max-width:560px;font-size:16px}
.cta-side{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.cta-side code{font-family:var(--mono);font-size:12px;color:var(--muted)}

.ad-slot{display:none}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);color:var(--body);padding:52px 0 24px;font-size:14px;margin-top:72px;background:#08090d}
.site-footer a{color:var(--body)}
.site-footer a:hover{color:var(--accent);text-decoration:none}
.ftop{display:flex;align-items:flex-start;justify-content:space-between;gap:28px;flex-wrap:wrap;padding-bottom:34px;border-bottom:1px solid var(--line)}
.fbrand p{margin:14px 0 16px;max-width:440px;line-height:1.7}
.fterm{font-family:var(--mono);font-size:12.5px;border:1px solid var(--line);border-radius:12px;padding:14px 18px;background:var(--bg);display:flex;flex-direction:column;gap:4px;color:var(--body)}
.fterm i{font-style:normal;color:var(--violet)}
.fterm .ok{color:var(--accent)}
.fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding:34px 0 0}
.social{display:flex;gap:10px}
.social a{width:32px;height:32px;border-radius:8px;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;color:var(--body)}
.social a:hover{border-color:var(--accent);color:var(--accent)}
.site-footer h4{color:var(--muted);font-size:11.5px;letter-spacing:1px;text-transform:uppercase;margin:4px 0 14px;font-weight:500;font-family:var(--mono)}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:9px}
.copy-bar{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0 10px;border-top:1px solid var(--line);margin-top:38px;padding-top:20px;font-size:12.5px;color:var(--muted);font-family:var(--mono)}
.copy-bar .dot{color:var(--line-2)}

#toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:200;background:var(--accent);color:var(--accent-ink);
  padding:10px 18px;border-radius:10px;font-size:14px;font-weight:600;opacity:0;pointer-events:none;transition:.22s;box-shadow:0 10px 26px rgba(0,0,0,.5);
}
#toast.show{opacity:1;transform:translate(-50%,0)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media(max-width:900px){
  .nav{height:60px;gap:10px}
  .menu{
    display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--surface);flex-direction:column;gap:4px;
    padding:10px;border:1px solid var(--line-2);border-radius:14px;box-shadow:var(--shadow-lg);margin:0;
  }
  .menu.open{display:flex}
  .menu a{padding:12px 14px;font-size:15px}
  .menu .menu-cta{display:inline-flex;margin-top:6px;justify-content:center;color:var(--accent-ink)}
  .nav-toggle{display:inline-flex}
  .nav-cta,.kbd-hint{display:none}
  .page-head h1{font-size:34px}
  .grid-2,.grid-3,.cards{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr}
  .cta{padding:30px 24px}
  h2.center{font-size:30px}
}
@media(max-width:560px){
  .wrap{padding:0 16px}
  .page-head h1{font-size:29px}
  .tool{padding:0 18px 20px}
  .tool::before{margin:0 -18px 18px}
  .fgrid{grid-template-columns:1fr 1fr}
  .kv{grid-template-columns:1fr;gap:2px}
  .kv dd{margin-bottom:8px}
}

/* ---------- docs: three-column documentation layout ---------- */
.docs-shell{display:grid;grid-template-columns:250px minmax(0,1fr) 210px;gap:40px;align-items:start;padding-top:8px}
.docs-side{position:sticky;top:84px;max-height:calc(100vh - 100px);overflow:auto;padding:4px 6px 30px 0;font-size:14px;scrollbar-width:thin}
.docs-search{position:relative;margin-bottom:18px}
.docs-search input{padding-left:34px;font-size:13.5px;background:var(--surface)}
.docs-search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted)}
.docs-search kbd{position:absolute;right:9px;top:50%;transform:translateY(-50%)}
.docs-nav h5{font-family:var(--mono);font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);margin:18px 0 6px;font-weight:500}
.docs-nav ul{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.docs-nav li a{display:block;padding:5px 0 5px 14px;margin-left:-1px;color:var(--body);border-left:1px solid transparent;line-height:1.4}
.docs-nav li a:hover{color:var(--ink);text-decoration:none;border-left-color:var(--line-2)}
.docs-nav li a.on{color:var(--accent);border-left-color:var(--accent)}
.docs-nav li[hidden]{display:none}
.docs-main{min-width:0}
.docs-main .page-head{padding-top:6px}
.docs-main .prose{max-width:none}
.docs-toc{position:sticky;top:84px;font-size:13px;max-height:calc(100vh - 100px);overflow:auto}
.docs-toc h5{font-family:var(--mono);font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);margin:6px 0 10px;font-weight:500}
.docs-toc ol{list-style:none;margin:0;padding:0}
.docs-toc li a{display:block;padding:4px 0;color:var(--muted);line-height:1.4}
.docs-toc li a:hover,.docs-toc li a.on{color:var(--accent);text-decoration:none}
.docs-toc .toc-edit{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-family:var(--mono);font-size:12px}
.doc-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-top:14px;font-family:var(--mono)}
.doc-meta span{display:inline-flex;align-items:center;gap:6px}
.tldr{border:1px solid rgba(198,241,53,.28);background:var(--accent-wash);border-radius:12px;padding:14px 18px;margin:0 0 26px}
.tldr b{font-family:var(--mono);font-size:11.5px;color:var(--accent);letter-spacing:.6px;text-transform:uppercase;display:block;margin-bottom:4px;font-weight:500}
.tldr p{margin:0;color:var(--ink)}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:44px 0 0}
.pager a{border:1px solid var(--line);border-radius:12px;padding:14px 18px;background:var(--surface);display:block}
.pager a:hover{border-color:var(--accent);text-decoration:none}
.pager small{display:block;font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.pager b{color:var(--ink);font-weight:600}
.pager .next{text-align:right;grid-column:2}
.docs-side-toggle{display:none}
.tool-cta{display:flex;align-items:center;gap:16px;border:1px solid var(--line-2);border-radius:14px;padding:14px 18px;margin:0 0 24px;background:var(--surface)}
.tool-cta .ico{width:38px;height:38px;border-radius:10px;background:var(--accent-wash);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:none}
.tool-cta b{display:block;color:var(--ink);font-size:15px}
.tool-cta small{color:var(--body);font-size:13.5px}
.tool-cta a{margin-left:auto;flex:none}
.doc-card{display:flex;flex-direction:column;height:100%}
.doc-card .kicker{font-family:var(--mono);font-size:11.5px;color:var(--violet);margin-bottom:8px}
.doc-card .read{margin-top:auto;padding-top:12px;font-size:12px;color:var(--muted);font-family:var(--mono)}
@media(max-width:1180px){
  .docs-shell{grid-template-columns:230px minmax(0,1fr)}
  .docs-toc{display:none}
}
@media(max-width:900px){
  .docs-shell{grid-template-columns:1fr;gap:0}
  .docs-side{position:static;max-height:none;overflow:visible;padding:0;display:none}
  .docs-side.open{display:block;border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:18px;background:var(--surface)}
  .docs-side-toggle{display:inline-flex;margin:14px 0 4px}
  .pager{grid-template-columns:1fr}
  .pager .next{grid-column:1}
  .tool-cta{flex-wrap:wrap}
  .tool-cta a{margin-left:0;width:100%}
}

/* ---------- static pages ---------- */
mark.todo{background:var(--amber-wash);color:var(--amber);border:1px dashed var(--amber);border-radius:6px;padding:1px 7px;font-weight:600;font-size:.94em}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:0 0 40px;align-items:start}
.plan{border:1px solid var(--line);border-radius:18px;padding:28px;background:var(--surface);position:relative}
.plan.featured{border-color:rgba(198,241,53,.45);background:linear-gradient(180deg,rgba(198,241,53,.07),transparent 50%),var(--surface);box-shadow:var(--shadow-lg)}
.plan.featured::after{
  content:"for google play";position:absolute;top:-12px;right:20px;background:var(--accent);color:var(--accent-ink);
  font-family:var(--mono);font-size:11px;font-weight:600;padding:4px 10px;border-radius:7px;
}
.plan h3{margin:0 0 4px;font-size:21px;font-weight:600}
.plan .tagline{font-size:14px;color:var(--muted);margin:0 0 16px}
.plan .price{font-family:var(--head);font-size:42px;color:var(--ink);font-weight:700;letter-spacing:-1.5px;line-height:1.1}
.plan .price small{font-size:15px;color:var(--muted);font-weight:500;letter-spacing:0}
.plan ul{list-style:none;margin:22px 0 0;padding:0}
.plan li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;margin-bottom:11px;color:var(--body)}
.plan li svg{flex:none;margin-top:3px}
.plan li.no{color:var(--muted)}
.contact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:0 0 34px}
.contact-card{border:1px solid var(--line);border-radius:14px;padding:22px;background:var(--surface)}
.contact-card h3{margin:0 0 6px;font-size:16.5px;font-weight:600}
.contact-card p{margin:0 0 12px;font-size:14px}
.legal-meta{font-size:12.5px;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:26px;font-family:var(--mono)}
@media(max-width:820px){.plans,.contact-grid{grid-template-columns:1fr}}

/* ---------- cookie consent (only when analytics is on) ---------- */
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:120;opacity:0;transform:translateY(14px);transition:opacity .22s,transform .22s}
.consent.is-open{opacity:1;transform:none}
.consent-in{max-width:520px;margin:0 auto;background:var(--surface);border:1px solid var(--line-2);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.6);padding:16px 18px}
.consent-in>p{margin:0 0 12px;font-size:13.5px;line-height:1.55;color:var(--body)}
.consent-in>p b{display:block;color:var(--ink);font-size:15px;margin-bottom:3px}
.consent-in a{color:var(--accent);text-decoration:underline}
.consent-detail{max-height:0;overflow:hidden;transition:max-height .28s ease}
.consent.is-custom .consent-detail{max-height:340px;overflow:visible}
.consent-row{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-top:1px solid var(--line);cursor:pointer}
.consent-row span{flex:1;font-size:12.5px;line-height:1.5;color:var(--body)}
.consent-row span b{display:block;color:var(--ink);font-size:13.5px;margin-bottom:2px}
.consent-row.is-locked{cursor:default;align-items:center}
.consent-row .consent-always{flex:0 0 auto;align-self:center;font-size:11px;color:var(--accent);background:var(--accent-wash);border-radius:6px;padding:4px 10px;white-space:nowrap;font-weight:600}
.consent-row input{position:absolute;opacity:0;pointer-events:none}
.consent-toggle{flex:0 0 auto;width:38px;height:22px;border-radius:11px;background:var(--line-2);position:relative;margin-top:2px;transition:background .18s}
.consent-toggle::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .18s}
.consent-row input:checked + .consent-toggle,.consent-toggle.is-on{background:var(--accent)}
.consent-row input:checked + .consent-toggle::after,.consent-toggle.is-on::after{transform:translateX(16px);background:var(--accent-ink)}
.consent-btns{display:flex;gap:9px;justify-content:flex-end;padding-top:13px}
.consent-btns .btn{min-width:104px}
.consent .consent-save{display:none}
.consent.is-custom .consent-save{display:inline-flex}
.consent.is-custom .consent-custom{display:none}
.cookie-link{background:none;border:0;padding:0;margin-left:10px;cursor:pointer;color:inherit;font:inherit;text-decoration:underline}
.cookie-link:hover{color:var(--ink)}
@media(max-width:520px){.consent{left:10px;right:10px;bottom:10px}.consent-btns .btn{flex:1;min-width:0}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition:none!important}
}

/* Long URLs and paths in inline code must wrap rather than widen the page. */
.prose code,.lede code,.tldr code,.kv dd,.note code,.faq code{overflow-wrap:anywhere}
.docs-main,.docs-shell > *{min-width:0}