/* ──────────────────────────────────────────────────────────────────────────────
   Aaron's Archive · shared theme
   Principle: calm, confident chrome with one accent for interaction; colour in the data only ever means biology.
   A = green · T = red · G = gold · C = blue (the standard sequencing-chromatogram colours).
   Used by the app, the legal pages, the learn pages and the 404 page.
   ────────────────────────────────────────────────────────────────────────────── */

:root{
  color-scheme:dark;
  /* colours that define the palette (--bg, --tint, --text*, --accent*, --glow-*, …) live in the THEMES block at the end of this file */
  --line:rgba(255,255,255,.11); --line2:rgba(255,255,255,.2);
  --fill:rgba(255,255,255,.055); --fill2:rgba(255,255,255,.09); --fill3:rgba(255,255,255,.14);

  /* the four bases — used identically in charts, text, tiles and the logo */
  --a:#5bbf97; --t:#e0707f; --g:#d4a63f; --c:#5b9fe0;
  --v:#968fd8; --pk:#d98bb5;
  /* legacy names still referenced by runtime-generated markup */
  --red:var(--t); --amber:var(--g);
  /* the single interaction accent (buttons, active states, focus, links): never used for data */
  --accent-soft:rgba(var(--accent-rgb),.16); --accent-line:rgba(var(--accent-rgb),.45);

  --font-ui:'IBM Plex Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --font-read:'Source Serif 4',Georgia,'Times New Roman',serif;

  --r-md:10px; --r-lg:16px; --r-xl:20px;
  --ease:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.22,1,.36,1);
  --blur:18px;
  --topbar-h:60px;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
}
@media (max-width:700px){ :root{ --blur:16px; --topbar-h:54px } }

/* THEMES:START: the whole palette lives in this one block. Pure black page; panels, cards and inputs step off it with a 1px border.
   Amber is the only accent. Colour in the data only ever means biology (A green, T red, G gold, C blue). */
:root{
  --bg:#000000; --tint:13,13,15; --deep:0,0,0; --pop:24,24,27; --pop2:34,34,38; --option-bg:#141416;
  --viewer-2:#000000; --ink:#000000;
  --text:#f1f1f3; --text2:#cdced4; --text3:#9d9ea8;
  --accent:#f5a524; --accent-rgb:245,165,36; --accent-text:#ffd18a; --accent-text-rgb:255,209,138;
  --accent-hi:#f8b23a; --accent-lo:#de8a0b; --on-accent:#1a1204;
}
/* THEMES:END */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg)}
body{margin:0;min-height:100vh;min-height:100dvh;background:transparent;color:var(--text2);
  font-family:var(--font-ui);font-size:15px;line-height:1.55;font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2,h3,h4{color:var(--text);margin:0;font-weight:600;letter-spacing:-.012em;line-height:1.2}
p{margin:0}
a{color:var(--text);text-decoration-color:rgba(255,255,255,.35);text-underline-offset:3px;transition:text-decoration-color .2s,color .2s}
a:hover{text-decoration-color:currentColor}
button{font:inherit;color:inherit}
::selection{background:rgba(var(--accent-rgb),.38);color:#fff}
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px;border-radius:8px}
code,kbd,samp{font-family:var(--font-mono);font-size:.88em}
.skip-link{position:fixed;left:12px;top:-60px;z-index:200;background:#fff;color:var(--ink);padding:10px 16px;border-radius:9px;font-weight:600;text-decoration:none;transition:top .2s var(--ease)}
.skip-link:focus{top:12px}

/* thin scrollbars everywhere */
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:5px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.34);background-clip:padding-box;border:2px solid transparent}
::-webkit-scrollbar-track{background:transparent}

/* ── Icons ─────────────────────────────────────────────────────────────────── */
.ic{width:1.15em;height:1.15em;flex:none;display:inline-block;vertical-align:-.2em;fill:none;stroke:currentColor}
.ic.sm{width:1em;height:1em}.ic.lg{width:1.4em;height:1.4em}

/* ── Background: calm and static (no motion, nothing competing with the data) ── */
.scene{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:var(--bg)}
.scene-grid{position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(75% 65% at 50% 28%,#000,transparent 88%);mask-image:radial-gradient(75% 65% at 50% 28%,#000,transparent 88%)}

/* ── Glass ─────────────────────────────────────────────────────────────────── */

.glass{position:relative;border-radius:var(--r-lg);background:rgb(var(--tint));border:1px solid var(--line)}
.glass::after{content:"";position:absolute;top:0;left:14%;right:14%;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(var(--accent-text-rgb),.55),transparent)}

/* ── Entrance motion ── */
@keyframes rise{from{opacity:0;transform:translate3d(0,6px,0)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.rise{animation:rise .4s var(--ease) both}.rise.d3{animation-delay:.18s}

/* ── Top bar & brand ───────────────────────────────────────────────────────── */
.topbar{position:sticky;top:calc(10px + var(--safe-t));z-index:60;margin:calc(10px + var(--safe-t)) 12px 0;height:var(--topbar-h);
  display:flex;align-items:center;gap:14px;padding:0 10px 0 12px;border-radius:14px}
.brand{display:flex;align-items:center;gap:11px;color:var(--text);text-decoration:none;flex:none;border-radius:10px}
.brand-mark{width:38px;height:38px;flex:none;display:block;}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-name{font-weight:650;font-size:1.08rem;letter-spacing:-.02em;color:var(--text);white-space:nowrap}
.brand-name span{font-weight:400;color:var(--text2)}
.brand-sub{font-size:.74rem;color:var(--text3);margin-top:3px;white-space:nowrap}
@media (max-width:700px){ .topbar{margin:calc(8px + var(--safe-t)) 10px 0;top:calc(8px + var(--safe-t));border-radius:12px} .brand-mark{width:34px;height:34px} .brand-sub{display:none} }

/* ── Buttons & chips ───────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 14px;border-radius:9px;
  background:var(--fill2);border:1px solid var(--line);color:var(--text);font-weight:520;font-size:.9rem;letter-spacing:-.005em;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s;-webkit-tap-highlight-color:transparent}
.btn:hover{background:var(--fill3);border-color:var(--line2)}
.btn:active{background:var(--fill2)}
.btn.sm{height:32px;padding:0 11px;font-size:.82rem;border-radius:8px;gap:6px}
.btn.icon{width:38px;padding:0}.btn.icon.sm{width:32px}
.btn.primary{background:linear-gradient(180deg,var(--accent-hi),var(--accent-lo));color:var(--on-accent);border-color:rgba(255,255,255,.14);font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 16px -8px rgba(var(--accent-rgb),.75)}
.btn.primary:hover{filter:brightness(1.1);border-color:rgba(255,255,255,.22)}
.btn.primary:active{filter:brightness(.93)}
.btn.block{width:100%}
.btn.lg{height:50px;font-size:1rem;border-radius:10px;padding:0 20px}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}
.chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:8px;font-size:.78rem;font-weight:520;
  background:var(--fill2);border:1px solid var(--line);color:var(--text2);white-space:nowrap}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none;display:inline-block}

/* ── Sequencer loader (colour-coded bars, like a live chromatogram) ─────────── */
.seq-loader{display:inline-flex;align-items:flex-end;gap:3px;height:22px}
.seq-loader i{width:4px;border-radius:5px;height:100%;transform-origin:bottom;animation:peak 1.15s var(--ease) infinite}
.seq-loader i:nth-child(4n+1){background:var(--a)}.seq-loader i:nth-child(4n+2){background:var(--c)}
.seq-loader i:nth-child(4n+3){background:var(--g)}.seq-loader i:nth-child(4n){background:var(--t)}
.seq-loader i:nth-child(1){animation-delay:0s}.seq-loader i:nth-child(2){animation-delay:.1s}.seq-loader i:nth-child(3){animation-delay:.2s}
.seq-loader i:nth-child(4){animation-delay:.3s}.seq-loader i:nth-child(5){animation-delay:.4s}.seq-loader i:nth-child(6){animation-delay:.5s}
.seq-loader i:nth-child(7){animation-delay:.6s}.seq-loader i:nth-child(8){animation-delay:.7s}
@keyframes peak{0%,100%{transform:scaleY(.18)}45%{transform:scaleY(1)}}

/* ── Long-form reading (legal pages, learn pages) ───────────────────────────── */
.prose{font-family:var(--font-read);font-size:1.0625rem;line-height:1.72;color:var(--text2);font-optical-sizing:auto}
.prose>*+*{margin-top:1.05em}
.prose h1{font-family:var(--font-ui);font-size:clamp(2rem,4.6vw,2.9rem);letter-spacing:-.03em;line-height:1.05}
.prose h2{font-family:var(--font-ui);font-size:1.4rem;margin-top:2.2em;padding-top:1.1em;border-top:1px solid var(--line);scroll-margin-top:calc(var(--topbar-h) + 28px)}
.prose h2::before{content:"";display:inline-block;width:3px;height:.95em;margin-right:10px;border-radius:5px;background:var(--accent);vertical-align:-.1em}
.prose h2:first-of-type{margin-top:1.6em}
.prose h3{font-family:var(--font-ui);font-size:1.08rem;margin-top:1.6em;color:var(--text)}
.prose strong,.prose b{color:var(--text);font-weight:620}
.prose ul,.prose ol{padding-left:1.25em}
.prose li{margin:.35em 0}.prose li::marker{color:var(--text3)}
.prose a{color:var(--accent-text);text-decoration:underline;text-decoration-color:rgba(var(--accent-text-rgb),.4)}
.prose a:hover{text-decoration-color:currentColor}
.prose code{background:var(--fill2);border:1px solid var(--line);padding:.08em .4em;border-radius:5px;color:var(--text);font-size:.84em}
.prose .lede{font-size:1.18rem;color:var(--text);line-height:1.6}
.prose .meta{font-family:var(--font-ui);font-size:.86rem;color:var(--text3)}
.prose table{width:100%;border-collapse:separate;border-spacing:0;font-family:var(--font-ui);font-size:.92rem;border:1px solid var(--line);border-radius:10px;overflow:hidden;display:block;overflow-x:auto}
.prose th,.prose td{padding:11px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.prose th{background:var(--fill2);color:var(--text);font-weight:600;font-size:.85rem}
.prose tr:last-child td{border-bottom:0}
.prose .box{padding:18px 22px;border-radius:12px;background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid var(--line2)}
.prose .box>b:first-child{display:block;font-family:var(--font-ui);color:var(--text);font-size:1rem;letter-spacing:-.01em}
.prose .box ul{margin:.7em 0 0}

/* ── Document pages (privacy · terms · learn · 404) ─────────────────────────── */
.doc-body{min-height:100dvh;display:flex;flex-direction:column}
.doc-nav{display:flex;gap:4px;margin-left:auto;margin-right:6px}
.doc-nav a{padding:8px 13px;border-radius:8px;color:var(--text2);text-decoration:none;font-weight:520;font-size:.9rem;transition:background .2s,color .2s}
.doc-nav a:hover{background:var(--fill2);color:var(--text)}
.doc-nav a[aria-current="page"]{background:var(--accent-soft);color:#fff}
.doc-shell{flex:1;width:100%;max-width:1120px;margin:0 auto;padding:26px 16px 36px;display:grid;grid-template-columns:230px minmax(0,1fr);gap:24px;align-items:start}
.doc-shell.single{grid-template-columns:minmax(0,760px);justify-content:center}
.doc-card{padding:clamp(22px,4.5vw,52px)}
.toc{position:sticky;top:calc(var(--topbar-h) + 34px);padding:16px 10px 12px;border-radius:14px;max-height:calc(100dvh - var(--topbar-h) - 60px);overflow:auto}
.toc>summary{list-style:none;cursor:default;padding:0 10px 8px;font-weight:620;font-size:.84rem;color:var(--text3)}
.toc>summary::-webkit-details-marker{display:none}
.toc a{display:block;padding:7px 10px;border-radius:8px;color:var(--text2);text-decoration:none;font-size:.86rem;line-height:1.3;transition:background .2s,color .2s}
.toc a:hover{background:var(--fill)}
.toc a.on{background:var(--accent-soft);color:#fff;box-shadow:inset 2px 0 0 var(--accent)}
.doc-foot{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;padding:18px 16px calc(24px + var(--safe-b));font-size:.8rem;color:var(--text3);text-align:center}
.doc-foot a{color:var(--text2)}
.tool-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;font-family:var(--font-ui)}
.tool-links a{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:11px;background:var(--fill);border:1px solid var(--line);text-decoration:none;color:var(--text);font-weight:560;
  transition:background .15s,border-color .15s}
.tool-links a:hover{background:var(--fill2);border-color:var(--line2)}
.tool-links a small{display:block;color:var(--text3);font-weight:400;font-size:.8rem;margin-top:2px}
.tool-links .ic{width:1.5em;height:1.5em;color:var(--text)}
@media (max-width:900px){
  .doc-shell{grid-template-columns:minmax(0,1fr);padding-top:14px;gap:12px}
  .toc{position:static;max-height:none;padding:12px 8px 8px}
  .toc>summary{cursor:pointer;padding:2px 10px 6px;display:flex;justify-content:space-between;align-items:center}
  .toc>summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--text3);border-bottom:2px solid var(--text3);transform:rotate(45deg);transition:transform .25s var(--ease);margin-right:4px}
  .toc[open]>summary::after{transform:rotate(-135deg)}
}
@media (max-width:700px){ .doc-nav a{padding:7px 10px;font-size:.84rem} .doc-nav{margin-right:2px} .prose{font-size:1.02rem} }
@media (max-width:700px){ .doc-shell{padding-left:10px;padding-right:10px} .doc-card{padding:22px 16px} .prose .box{padding:14px 14px} .prose ul,.prose ol{padding-left:1.15em} }
@media (max-width:560px){ .doc-nav{display:none} .topbar .btn.primary{margin-left:auto} }
/* The short label is only for very narrow phones: the logo and "Open the tools" together are wider than a 320-340 px screen (the whole page scrolled sideways) */
.topbar .btn .l-short{display:none}
@media (max-width:380px){ .topbar{gap:8px} .topbar .btn .l-full{display:none} .topbar .btn .l-short{display:inline} }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
@media print{ .scene,.topbar,.toc,.doc-foot{display:none!important} body{background:#fff;color:#111} .glass{background:none;box-shadow:none} .prose,.prose h1,.prose h2,.prose strong{color:#111} }

/* ══════════════ Premium layer (shared): net pattern, refined controls, feedback ══════════════ */
/* The "net": a lab-graph grid with nodes at the intersections. Used on the page background and in blank areas. */
.scene-grid{background-image:radial-gradient(circle at 0 0,rgba(255,255,255,.17) 1.2px,transparent 1.9px),linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(130% 100% at 50% 16%,#000 0%,rgba(0,0,0,.62) 55%,rgba(0,0,0,.3) 100%);mask-image:radial-gradient(130% 100% at 50% 16%,#000 0%,rgba(0,0,0,.62) 55%,rgba(0,0,0,.3) 100%)}
.net{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background-image:radial-gradient(circle at 0 0,rgba(255,255,255,.2) 1.2px,transparent 1.9px),linear-gradient(rgba(255,255,255,.065) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.065) 1px,transparent 1px);
  background-size:40px 40px;background-position:center;
  -webkit-mask-image:radial-gradient(62% 72% at 50% 46%,#000,transparent 86%);mask-image:radial-gradient(62% 72% at 50% 46%,#000,transparent 86%)}

/* Buttons: confident, tactile states (no bounce) */
.btn{transition:background .18s var(--ease),border-color .18s var(--ease),color .18s,transform .2s var(--ease),box-shadow .25s var(--ease),filter .18s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98);transition-duration:.06s}
.btn.primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 12px 24px -10px rgba(var(--accent-rgb),.9)}
.btn.primary:active{box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 3px 8px -4px rgba(var(--accent-rgb),.6)}
.btn:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}
.btn[disabled]{transform:none;filter:saturate(.6)}

/* Toasts */
.toasts{position:fixed;z-index:400;left:50%;bottom:calc(24px + var(--safe-b));transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
@media (max-width:1023px){ .toasts{bottom:calc(98px + var(--safe-b))} }
.toast{display:flex;align-items:center;gap:10px;padding:11px 16px 11px 14px;border-radius:12px;font-size:.88rem;font-weight:500;color:var(--text);
  background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02)),rgba(var(--pop),.96);border:1px solid var(--line2);box-shadow:0 14px 34px -12px rgba(0,0,0,.75);
  animation:toastIn .35s var(--ease) both}
.toast .ic{color:var(--a)} .toast.warn .ic{color:var(--g)}
.toast.out{animation:toastOut .3s var(--ease) forwards}
@keyframes toastIn{from{opacity:0;transform:translate3d(0,14px,0) scale(.97)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translate3d(0,8px,0) scale(.98)}}

/* Document pages: staggered entrance of the chrome */
.tool-links a{transition:background .18s,border-color .18s,transform .22s var(--ease),box-shadow .25s}
.tool-links a:hover{transform:translateY(-2px);box-shadow:0 14px 28px -16px rgba(0,0,0,.7)}
.doc-nav a{transition:background .18s,color .18s}
.prose a{transition:color .15s,text-decoration-color .15s}

.linkish{background:none;border:0;padding:0;margin:0;color:inherit;font:inherit;text-decoration:underline;cursor:pointer}
.mail-actions{white-space:nowrap}

/* ── Touch: finger-sized targets on the guide / privacy / terms pages (no effect with a mouse) ── */
a,button,summary,label{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
@media (pointer:coarse){
  .doc-nav a{padding:12px 12px}
  .doc-foot{gap:0 14px}
  .doc-foot a{display:inline-block;padding:11px 6px}
  .linkish{padding:8px 2px;margin:-8px 0}
}
@media (pointer:coarse) and (max-width:900px){
  .toc>summary{min-height:44px;padding-top:0;padding-bottom:0}
  .toc a{padding:12px 10px}
}

/* Footer links on the guide / privacy / terms / contact pages: the same 2-up button grid the app footer uses on a phone */
@media (max-width:700px){
  .doc-foot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding-top:22px;font-size:.8rem}
  .doc-foot>span{grid-column:1/-1}
  .doc-foot>a:last-of-type:nth-of-type(odd){grid-column:1/-1}
  html:root .doc-foot a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--fill);color:var(--text);text-decoration:none}
}
/* Contact line: the address, then a copy button on its own row, so nothing is left dangling at the end of a line */
.contact-direct .mail-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:8px}
.contact-direct .mail-row a{overflow-wrap:anywhere}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   Documentation pages: side column, guides index, guide pager, contact cards, page transitions
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.side { position:sticky; top:calc(var(--topbar-h) + 34px); display:flex; flex-direction:column; gap:12px; max-height:calc(100dvh - var(--topbar-h) - 56px);
        overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; align-self:start }
.side .toc { position:static; max-height:none; overflow:visible }
.toc .gn-group { margin:12px 10px 4px; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text3); font-weight:600 }
.toc a.gn-all { font-weight:600 }
.toc a[aria-current="page"] { background:var(--accent-soft); color:#fff; box-shadow:inset 2px 0 0 var(--accent) }
@media (max-width:900px) { .side { position:static; max-height:none; overflow:visible } }

.prose a.btn { text-decoration:none }
.prose .read-meta { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin:.2em 0 1.4em; color:var(--text3); font-family:var(--font-ui); font-size:.88rem }
.prose .read-meta span { white-space:nowrap }
@media (max-width:520px){ .prose .read-meta .dot-upd { display:none } }
.prose .read-meta .ic { width:16px; height:16px; color:var(--accent-text) }
.prose .feedback { margin-top:2.4em }

.guide-filter { display:flex; align-items:center; gap:12px; margin:22px 0 2px; flex-wrap:wrap }
.guide-filter input { flex:1 1 260px; min-width:0; height:46px; padding:0 15px; border-radius:11px; border:1px solid var(--line2); background:var(--fill);
                      color:var(--text); font-family:var(--font-ui); font-size:.95rem }
.guide-filter input:focus-visible { outline:2px solid var(--accent); outline-offset:2px }
.guide-filter output { color:var(--text3); font-family:var(--font-ui); font-size:.85rem }
.guide-group[hidden], .guide-card[hidden] { display:none }
.guide-group .gg-sub { margin:.2em 0 0; color:var(--text3); font-family:var(--font-ui); font-size:.9rem }
.guide-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; margin-top:14px; font-family:var(--font-ui) }
.prose a.guide-card { display:flex; flex-direction:column; gap:6px; padding:16px 18px; border-radius:12px; background:var(--fill); border:1px solid var(--line);
                      color:var(--text); text-decoration:none; transition:transform .22s var(--ease,ease), background .2s, border-color .2s, box-shadow .2s }
.guide-card:hover { transform:translateY(-2px); background:var(--fill2); border-color:var(--line2); box-shadow:0 12px 28px -16px rgba(0,0,0,.8) }
.guide-card:focus-visible { outline:2px solid var(--accent); outline-offset:2px }
.guide-card .gc-top { display:flex; align-items:center; gap:10px; font-weight:600; font-size:1rem }
.guide-card .gc-top .ic { width:20px; height:20px; flex:none; color:var(--accent-text) }
.guide-card .gc-sum { color:var(--text2); font-size:.88rem; line-height:1.45; font-weight:400 }
.guide-card .gc-meta { margin-top:auto; padding-top:4px; color:var(--text3); font-size:.78rem; font-weight:400 }

.guide-pager { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:2.2em; font-family:var(--font-ui) }
.prose .guide-pager a { display:flex; flex-direction:column; gap:3px; padding:14px 18px; border-radius:12px; background:var(--fill); border:1px solid var(--line);
                        text-decoration:none; color:var(--text); font-weight:560; transition:transform .2s, background .2s, border-color .2s }
.guide-pager a:hover { background:var(--fill2); border-color:var(--line2); transform:translateY(-1px) }
.guide-pager a small { color:var(--text3); font-weight:500; font-size:.72rem; text-transform:uppercase; letter-spacing:.09em }
.guide-pager .prev { grid-column:1 } .guide-pager .next { grid-column:2; text-align:right }
@media (max-width:600px) { .guide-pager { grid-template-columns:1fr } .guide-pager .next { grid-column:1; text-align:left } }

.contact-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; margin-top:1.4em; font-family:var(--font-ui) }
.contact-card { display:flex; flex-direction:column; gap:10px; padding:20px; border-radius:14px; background:var(--fill); border:1px solid var(--line) }
.contact-card h3 { margin:0; font-size:1.05rem; display:flex; gap:10px; align-items:center; letter-spacing:-.01em }
.contact-card h3 .ic { width:20px; height:20px; flex:none; color:var(--accent-text) }
.contact-card p { margin:0; color:var(--text2); font-size:.9rem; line-height:1.5 }
.contact-card .actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:8px }
.contact-direct { margin-top:1.4em; font-family:var(--font-ui); color:var(--text2) }

/* Moving between privacy, terms, guides and contact: the card and the side list slide in while the rest cross-fades. The page-to-page opt-in
   (@view-transition) is declared by the document pages themselves (see pages.py), NOT here: this file is also loaded by the tools page, and a
   transition into or out of it froze the old page for ~0.5 s and swallowed clicks, so buttons such as "Open the tools" needed a second press. Browsers that cannot do
   cross-document view transitions get a plain entrance animation instead. Nothing moves for people who ask for reduced motion. */
@keyframes vt-out { to { opacity:0; transform:translateY(-8px) } }
@keyframes vt-in { from { opacity:0; transform:translateY(14px) } }
@keyframes vt-in-side { from { opacity:0; transform:translateX(-12px) } }
@media (prefers-reduced-motion:no-preference) {
  html { scroll-behavior:smooth }
  .doc-body .doc-card { view-transition-name:doc-card }
  .doc-body .side { view-transition-name:doc-side }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration:.22s }
  ::view-transition-old(doc-card) { animation:vt-out .16s cubic-bezier(.4,0,1,1) both }
  ::view-transition-new(doc-card) { animation:vt-in .34s cubic-bezier(.16,.84,.3,1) .04s both }
  ::view-transition-old(doc-side) { animation:vt-out .12s ease both }
  ::view-transition-new(doc-side) { animation:vt-in-side .3s cubic-bezier(.16,.84,.3,1) .08s both }
}
@supports not (view-transition-name:none) {
  @media (prefers-reduced-motion:no-preference) {
    .doc-body .doc-card { animation:vt-in .4s cubic-bezier(.16,.84,.3,1) both }
    .doc-body .side { animation:vt-in-side .4s cubic-bezier(.16,.84,.3,1) .06s both }
  }
}

/* worked examples on the tool pages */
.prose pre{overflow-x:auto;margin:.8em 0;padding:12px 14px;background:var(--fill2);border:1px solid var(--line);border-radius:10px;font-size:.82rem;line-height:1.55}
.prose pre code{background:none;border:0;padding:0;font-size:inherit;white-space:pre-wrap;word-break:break-all}
.prose details{margin:.6em 0}
.prose details>summary{cursor:pointer;color:var(--accent-text);font-family:var(--font-ui);font-size:.9rem}
.prose h3{margin:1.3em 0 .3em;font-size:1.02rem}