@import url("/tools/logos.css");
/* Guides: the homepage's chrome and materials, plus the parts every guide's figures are built from.
   Loaded after each guide's own <style>, so these rules win where they overlap.
   Pink means something: live, money, or the one thing a figure is pointing at. Everything else is ink and grey. */

/* ===================== tokens (from the homepage) ===================== */
:root {
  --rose-bar: #e05584;
  --well-bg: rgba(255,255,255,.6);
  --well-box: inset 0 1px 3px rgba(60,20,40,.12), 0 0 0 1px rgba(60,40,50,.13), 0 1px 0 #fff;
  --well-line: #e6e3e7;
  --poly: linear-gradient(#ffffff, #faf9f7 50%, #f1f0ed);
  --poly-box: inset 0 1px 0 #fff, 0 0 0 1px rgba(110,100,95,.1), 0 34px 64px -36px rgba(110,70,55,.45), 0 10px 20px -14px rgba(110,70,55,.18);
  --pane-line: rgba(70,55,60,.09);
  --chip: rgba(120,105,110,.08);
  --thread: #ddd3d8;
  --anodised: repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, rgba(0,0,0,.025) 1px 2px), linear-gradient(165deg, #f4f5f7 0%, #c9ccd2 48%, #a9adb5 100%);
  --bead: radial-gradient(circle at 50% 30%, #ffd2e1 0 18%, #ff6fa0 45%, #c42f66 100%);
  --bd-blue: #4c8ce6; --bd-green: #33b277; --bd-pink: #ff4f8f; --bd-gold: #e9a92a; --bd-purple: #8f6fd8;
  --bd-clear: linear-gradient(#ffffff, #e9edf2);
  --bd-clear-box: inset 0 0 0 1px rgba(140,150,165,.45), inset 0 1px 1px rgba(255,255,255,.9), 0 2px 3px -1px rgba(60,30,40,.18);
  --bar: #ecdbe2; --spark: #d9bfca; --spark-fill: #e7c9d5;
  --meter: linear-gradient(#e6e3e7, #cfcbd1);
  --robo-ink: #5b6069; --well-solid: #f8f8fa; --pane-solid: #fbfaf9;
  --glass-fill: rgba(255,255,255,.62); --glass-blur: blur(20px) saturate(1.7);
  --glass-edge: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.55), 0 0 0 1px rgba(25,26,33,.07);
  --nav-shadow: 0 10px 30px -18px rgba(25,26,33,.35);
  --nav-btn: var(--ink); --nav-btn-ink: var(--sky);
  --foot: linear-gradient(#f8f7f5, #efeeeb); --foot-edge: inset 0 1px 0 #fff, 0 -1px 0 rgba(110,100,95,.14);
  /* the input you type into: the hero's pearl well, with a faint pink halo so it reads as the thing to use */
  --field-bg: linear-gradient(#fdfdfe, #ffffff);
  --field-box: inset 0 1px 2px rgba(60,20,40,.22), inset 0 0 0 1px rgba(120,100,110,.32), 0 0 0 5px rgba(224,85,132,.11), 0 1px 0 rgba(255,255,255,.9);
  --field-focus: inset 0 1px 2px rgba(60,20,40,.22), 0 0 0 2px #d13a6d, 0 0 0 7px rgba(224,85,132,.2);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --rose-bar: #ea6390;
    --field-bg: linear-gradient(#0d0e11, #15161a);
    --field-box: inset 0 1px 2px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,255,255,.16), 0 0 0 5px rgba(239,106,150,.15);
    --field-focus: inset 0 1px 2px rgba(0,0,0,.65), 0 0 0 2px #ef6a96, 0 0 0 7px rgba(239,106,150,.24);
    --well-bg: rgba(255,255,255,.035);
    --well-box: inset 0 1px 3px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.07);
    --well-line: rgba(255,255,255,.07);
    --poly: linear-gradient(#2d2e34, #24252a 50%, #1d1e22);
    --poly-box: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(0,0,0,.5), 0 34px 64px -36px rgba(0,0,0,.85);
    --pane-line: rgba(255,255,255,.07);
    --chip: rgba(255,255,255,.07);
    --thread: #3a353a;
    --anodised: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, rgba(0,0,0,.04) 1px 2px), linear-gradient(165deg, #6b6e76 0%, #4a4d55 48%, #34363c 100%);
    --bd-clear: linear-gradient(#4a4c55, #33353c);
    --bd-clear-box: inset 0 0 0 1px rgba(255,255,255,.25), inset 0 1px 1px rgba(255,255,255,.3);
    --bar: #3b2f36; --spark: #6a5560; --spark-fill: #6a5560;
    --meter: linear-gradient(#4a464c, #3a373d);
    --robo-ink: #dfe1e5; --well-solid: #1a1b1f; --pane-solid: #26272c;
    --glass-fill: rgba(28,29,35,.62);
    --glass-edge: inset 0 1px 0 rgba(255,255,255,.09), inset 0 0 0 1px rgba(255,255,255,.06), 0 0 0 1px rgba(0,0,0,.4);
    --nav-shadow: 0 10px 30px -18px rgba(0,0,0,.7);
    --nav-btn: #f1f1f4; --nav-btn-ink: #111216;
    --foot: linear-gradient(#1c1d22, #16171b); --foot-edge: inset 0 1px 0 rgba(255,255,255,.05), 0 -1px 0 rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] {
  --rose-bar: #ea6390;
  --field-bg: linear-gradient(#0d0e11, #15161a);
  --field-box: inset 0 1px 2px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,255,255,.16), 0 0 0 5px rgba(239,106,150,.15);
  --field-focus: inset 0 1px 2px rgba(0,0,0,.65), 0 0 0 2px #ef6a96, 0 0 0 7px rgba(239,106,150,.24);
  --well-bg: rgba(255,255,255,.035);
  --well-box: inset 0 1px 3px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.07);
  --well-line: rgba(255,255,255,.07);
  --poly: linear-gradient(#2d2e34, #24252a 50%, #1d1e22);
  --poly-box: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(0,0,0,.5), 0 34px 64px -36px rgba(0,0,0,.85);
  --pane-line: rgba(255,255,255,.07);
  --chip: rgba(255,255,255,.07);
  --thread: #3a353a;
  --anodised: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, rgba(0,0,0,.04) 1px 2px), linear-gradient(165deg, #6b6e76 0%, #4a4d55 48%, #34363c 100%);
  --bd-clear: linear-gradient(#4a4c55, #33353c);
  --bd-clear-box: inset 0 0 0 1px rgba(255,255,255,.25), inset 0 1px 1px rgba(255,255,255,.3);
  --bar: #3b2f36; --spark: #6a5560; --spark-fill: #6a5560;
  --meter: linear-gradient(#4a464c, #3a373d);
  --robo-ink: #dfe1e5; --well-solid: #1a1b1f; --pane-solid: #26272c;
  --glass-fill: rgba(28,29,35,.62);
  --glass-edge: inset 0 1px 0 rgba(255,255,255,.09), inset 0 0 0 1px rgba(255,255,255,.06), 0 0 0 1px rgba(0,0,0,.4);
  --nav-shadow: 0 10px 30px -18px rgba(0,0,0,.7);
  --nav-btn: #f1f1f4; --nav-btn-ink: #111216;
  --foot: linear-gradient(#1c1d22, #16171b); --foot-edge: inset 0 1px 0 rgba(255,255,255,.05), 0 -1px 0 rgba(0,0,0,.5);
}

/* ===================== chrome: the homepage's nav capsule, logo, links, FAQ, footer ===================== */
body { font-variant-numeric: tabular-nums; }
.nav { position: sticky; top: 10px; z-index: 30; padding: 0 16px; }
.nav .wrap { display: flex; align-items: center; gap: 32px; max-width: 1060px; height: 56px; padding: 0 9px 0 18px; border-radius: 999px;
  background: var(--glass-fill); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), var(--nav-shadow); }
.brand { display: flex; align-items: center; gap: 10px; font: 600 19px var(--display); letter-spacing: -0.02em; text-decoration: none; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand svg { width: 28px; height: 28px; overflow: visible; filter: drop-shadow(0 1.5px 1.5px rgba(30,20,25,.28)); }
.nav-links { display: flex; gap: 26px; font-size: 15px; color: var(--ink-2); }
.nav-links a { text-decoration: none; color: inherit; }
.nav-links a:hover { color: var(--ink); }
.theme { width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--ink-2); display: grid; place-items: center; cursor: pointer; }
.theme:hover { background: var(--sky-2); color: var(--ink); }
.theme svg { width: 17px; height: 17px; }
.nav .btn { height: 38px; padding: 0 16px; font-size: 14.5px; background: var(--nav-btn); color: var(--nav-btn-ink); box-shadow: none; }
.nav .btn:hover { color: var(--nav-btn-ink); }
.nav .btn .short { display: none; }
.crumbs { padding-top: 30px; }
@media (max-width: 720px) {
  .nav { top: 8px; padding: 0 10px; }
  .nav .wrap { height: 52px; gap: 12px; padding: 0 7px 0 14px; }
  .nav-links, .nav .theme { display: none; }
  .nav .btn { display: inline-flex; height: 36px; padding: 0 15px; }
  .nav .btn .long { display: none; }
  .nav .btn .short { display: inline; }
  .crumbs { padding-top: 22px; }
}

/* links in the copy are ink; pink is kept for what matters */
.section p a, .section li a, .section td a, .hero a { color: var(--ink); text-decoration-color: color-mix(in srgb, var(--ink) 30%, transparent); text-decoration-thickness: 1px; }
.section p a:hover, .section li a:hover, .section td a:hover { color: var(--rose); text-decoration-color: currentColor; }

/* the one pink button: solid rose with a whisper of light along the top */
.btn.rose { background: linear-gradient(color-mix(in srgb, var(--rose) 88%, #fff), var(--rose) 55%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 1px rgba(25,26,33,.12), 0 8px 18px -8px color-mix(in srgb, var(--rose) 70%, transparent); }
.btn.rose:hover { background: linear-gradient(color-mix(in srgb, var(--rose-hi) 88%, #fff), var(--rose-hi) 55%); }

/* tables sit in the same inset well as the homepage's lists */
.tbl { background: var(--well-bg); box-shadow: var(--well-box); }
.tbl tr + tr td { box-shadow: 0 -1px 0 var(--well-line); }

/* index pages: the list of guides or tools as one inset well, hairline rows */
.section .link-list { gap: 0; padding: 4px 20px; border-radius: 16px; background: var(--well-bg); box-shadow: var(--well-box); }
.section .link-list li { padding: 18px 0; border-radius: 0; background: none; box-shadow: none; }
.section .link-list li + li { box-shadow: 0 -1px 0 var(--well-line); }
@media (max-width: 640px) { .section .link-list { padding: 4px 16px; } }

/* FAQ: disclosure triangles in one inset group */
.faq .faq-list { margin-top: 22px; padding: 6px 18px; border-radius: 14px; background: var(--well-bg); box-shadow: var(--well-box); }
.faq .faq-list details, .faq .faq-list details:first-child, .faq .faq-list details:first-of-type { box-shadow: 0 1px 0 var(--well-line); }
.faq .faq-list details:last-child { box-shadow: none; }
.faq .faq-list summary { justify-content: flex-start; gap: 12px; padding: 16px 0; font-size: 17.5px; }
.faq .faq-list summary::after { display: none; }
.faq .faq-list summary::before { content: ""; flex: none; width: 0; height: 0; border-left: 8px solid var(--dove); border-top: 5px solid transparent; border-bottom: 5px solid transparent; transition: transform .18s ease; }
.faq .faq-list details[open] summary::before { transform: rotate(90deg); }
.faq .faq-list details p { margin: -4px 0 18px 20px; }

/* footer: the base the page stands on */
footer { background: var(--foot); box-shadow: var(--foot-edge); }
footer .brand svg { width: 22px; height: 22px; }

/* ===================== figures ===================== */
.fig { margin: 34px 0 40px; min-width: 0; }
.fig > figcaption { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--dove); text-wrap: pretty; }
.fig :where(code) { background: none; padding: 0; border-radius: 0; font-size: 1em; }
/* the guides' copy styles (list indent, paragraph spacing) don't belong inside a figure */
.fig ul, .fig ol { list-style: none; margin: 0; padding: 0; color: inherit; }
.fig ul.well, .fig ol.well { padding: 4px 18px; }
@media (max-width: 640px) { .fig ul.well, .fig ol.well { padding: 4px 14px; } }
.fig li { margin: 0; }
.fig p { margin: 0; }

/* white polycarbonate: one soft warm lift, nothing round it */
.pane { position: relative; border-radius: 20px; background: var(--poly); box-shadow: var(--poly-box); padding: 22px 24px; min-width: 0; --hair: var(--pane-line); --robo-cut: var(--pane-solid); }
/* the inset well, for lists */
.well { border-radius: 14px; background: var(--well-bg); box-shadow: var(--well-box); padding: 4px 18px; min-width: 0; --hair: var(--well-line); --robo-cut: var(--well-solid); }
.rows > * + * { box-shadow: 0 -1px 0 var(--hair); }

.f-title, .fig .f-title { font: 600 16px/1.3 var(--display); letter-spacing: -0.01em; color: var(--ink); margin: 0; }
.f-k { font-size: 12.5px; line-height: 1.4; color: var(--dove); }
.f-mono { font: 500 13px/1.6 var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.f-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); background: var(--chip); white-space: nowrap; }
.f-big { font: 600 30px/1 var(--display); letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.f-pink { color: var(--rose); }
.f-gone { color: var(--dove); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--bad) 60%, transparent); text-decoration-thickness: 1.5px; }
/* a small chevron, pointing right (or down with .down) */
.f-to { flex: none; width: 7px; height: 7px; border-top: 1.5px solid var(--dove); border-right: 1.5px solid var(--dove); transform: rotate(45deg); opacity: .8; }
.f-to.down { transform: rotate(135deg); }

/* candy beads: data marks. A pony bead seen side on, the thread through its middle */
.bd { position: relative; display: inline-block; width: 19px; height: 16px; border-radius: 6px / 7px; flex: none; vertical-align: middle;
  background:
    linear-gradient(90deg, rgba(0,0,0,.22), rgba(0,0,0,0) 28%, rgba(255,255,255,.42) 47%, rgba(255,255,255,0) 64%, rgba(0,0,0,.24)),
    linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,0) 45%, rgba(0,0,0,.1)),
    var(--b, var(--bd-pink));
  box-shadow: inset 0 1px 1px rgba(255,255,255,.75), 0 2px 3px -1px rgba(60,30,40,.3); }
.bd.blue { --b: var(--bd-blue); } .bd.green { --b: var(--bd-green); } .bd.gold { --b: var(--bd-gold); }
.bd.purple { --b: var(--bd-purple); } .bd.pink { --b: var(--bd-pink); }
.bd.clear { --b: var(--bd-clear); box-shadow: var(--bd-clear-box); }
/* a bead that should be there and isn't: an empty dashed outline */
.bd.ghost { background: none; box-shadow: none; border: 1.5px dashed color-mix(in srgb, var(--dove) 70%, transparent); }
.bd.sm { width: 13px; height: 11px; border-radius: 4px / 5px; }
/* a strand: beads on a thread */
.strand { position: relative; display: flex; align-items: center; gap: 3px; }
.strand::before { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 2px; margin-top: -1px; border-radius: 1px; background: var(--thread); }
.strand > * { position: relative; }

/* the live dot: a pink gel bead that pulses */
.live-dot { position: relative; display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--bead); box-shadow: 0 1px 2px rgba(150,20,70,.35); }
.live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(255,111,160,.55); animation: live-pulse 2s ease-out infinite; }
@keyframes live-pulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(2.8); opacity: 0; } }

/* robots: a little anodised face, the maker's mark on its corner */
.robo { position: relative; width: 40px; height: 40px; border-radius: 11px; flex: none; display: grid; place-items: center; color: var(--robo-ink); background: var(--anodised);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(0,0,0,.14), 0 1px 2px rgba(50,40,40,.2); }
.robo svg { width: 24px; height: 24px; filter: drop-shadow(0 1px 0 rgba(255,255,255,.7)); }
.robo .maker { position: absolute; right: -6px; bottom: -6px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #fff;
  box-shadow: 0 0 0 1.5px var(--robo-cut, var(--sky)), 0 1px 3px rgba(40,30,35,.3); }
.robo .maker img { width: 12px; height: 12px; display: block; }
.robo.ghost { background: none; box-shadow: none !important; border: 1.5px dashed color-mix(in srgb, var(--dove) 60%, transparent); color: var(--dove); }
.robo.ghost svg { filter: none; opacity: .7; }
.robo.sm { width: 32px; height: 32px; border-radius: 9px; }
.robo.sm svg { width: 20px; height: 20px; }
.robo.sm .maker { width: 17px; height: 17px; right: -5px; bottom: -5px; }
.robo.sm .maker img { width: 10px; height: 10px; }

/* a guide's glyph: the little picture from its main figure, used on the hub card and in the guide's own TL;DR.
   Built by glyph() in src/lib/glyph.mjs; one definition for both. */
.gl { height: 26px; margin-top: 1px; padding-left: 3px; display: flex; align-items: center; justify-content: flex-start; }
.gl .bd { width: 13px; height: 11px; border-radius: 4px / 5px; }
.gl .strand { gap: 2px; }
.gl .strand::before { left: -3px; right: -3px; }
.gl-bars { align-items: flex-end; gap: 3px; height: 22px; margin-top: 3px; }
.gl-bars i { width: 5px; border-radius: 1.5px; background: var(--bar); }
.gl-bars i:last-child { background: var(--rose-bar); }
.gl-link { flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; }
.gl-link i { display: block; height: 5px; border-radius: 3px; }
.gl-ref { gap: 5px; }
.gl-ref .f-to { width: 5px; height: 5px; }
.gl-dots { display: grid; grid-template-columns: repeat(4, 6px); gap: 4px; height: auto; margin-top: 4px; justify-content: start; }
.gl-dots i { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--dove) 25%, transparent); }
.gl-dots i.one { background: var(--bead); }
.gl .robo.sm { --robo-cut: var(--well-solid); }

/* A guide's picture: a small drawing of what the guide is about, in the site's own materials. One SVG per guide,
   the `picture` line in its front matter, inlined by the build on the hub card and in the guide's TL;DR, so it
   follows the theme. Pink still means something: live, money, or the one thing the picture points at. */
.gl.gl-pic { height: auto; margin-top: 0; padding-left: 0; }
.gl-art { display: block; width: 48px; height: 48px; overflow: visible;
  --a-pane: var(--paper); --a-edge: color-mix(in srgb, var(--ink) 16%, transparent); --a-well: var(--sky-2);
  --a-line: color-mix(in srgb, var(--dove) 45%, transparent); --a-metal: color-mix(in srgb, var(--dove) 55%, var(--paper)); }
.gl-art .p { fill: var(--a-pane); stroke: var(--a-edge); stroke-width: 1; }
.gl-art .w { fill: var(--a-well); }
.gl-art .edge { stroke: var(--a-edge); stroke-width: 1; }
.gl-art .ln { fill: var(--a-line); }
.gl-art .ink { fill: var(--ink); }
.gl-art .ink2 { fill: var(--ink-2); }
.gl-art .dv, .gl-art .dvf { fill: var(--dove); }
.gl-art .av { fill: color-mix(in srgb, var(--dove) 55%, transparent); }
.gl-art .metal { fill: var(--a-metal); }
.gl-art .th { fill: var(--thread); }
.gl-art .bar { fill: var(--bar); }
.gl-art .rb, .gl-art .rbf { fill: var(--rose-bar); }
.gl-art .blue { fill: var(--bd-blue); } .gl-art .green { fill: var(--bd-green); } .gl-art .gold { fill: var(--bd-gold); }
.gl-art .pink { fill: var(--bd-pink); } .gl-art .purple { fill: var(--bd-purple); }
.gl-art .clear { fill: var(--a-pane); stroke: var(--a-edge); stroke-width: 1; }
.gl-art .hi { fill: #fff; opacity: .5; }
.gl-art .wh { fill: #fff; }
.gl-art :is(.st, .sp, .sk, .pulse, .stem, .handle, .dash, .lensdv) { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.gl-art .st { stroke: var(--dove); stroke-width: 1.8; }
.gl-art .st.thin { stroke-width: 1.2; }
.gl-art .st.wide { stroke-width: 2.6; }
.gl-art .sp { stroke: var(--rose-bar); stroke-width: 2; }
.gl-art .sp.wide { stroke-width: 3; }
.gl-art .sk { stroke: var(--ink); stroke-width: 2; }
.gl-art .pulse { stroke: var(--dove); stroke-width: 1.8; }
.gl-art .stem { stroke: var(--bd-green); stroke-width: 2; }
.gl-art .handle { stroke: var(--ink); stroke-width: 4; }
.gl-art .dash { stroke: var(--dove); stroke-width: 1.5; stroke-dasharray: 3 3; }
.gl-art .lens { fill: color-mix(in srgb, var(--paper) 45%, transparent); stroke: var(--ink); stroke-width: 2.5; }
.gl-art .lensdv { stroke: var(--dove); stroke-width: 1.5; }
.gl-art .ring { stroke: var(--paper); stroke-width: 2; }
.gl-art .cursor { fill: var(--ink); stroke: var(--paper); stroke-width: 1.2; stroke-linejoin: round; }
.gl-art .money { font: 700 14px/1 var(--display); letter-spacing: -0.02em; fill: var(--rose); }
.gl-art .code { font: 600 12px var(--mono); fill: var(--ink-2); }
.gl-art .halo { fill: var(--rose-bar); transform-box: fill-box; transform-origin: center; animation: gl-halo 2s ease-out infinite; }
@keyframes gl-halo { from { transform: scale(.55); opacity: .4; } to { transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gl-art .halo { animation: none; opacity: .2; } }
.gt-icon .gl-pic { transform: none; }
.gt-icon .gl-art { width: 46px; height: 46px; }

/* ===================== the top of every guide: tool, TL;DR, sign-up ===================== */
/* Written by the build (src/components/GuideTop.astro) between the guide's opening answer and its first section. */
.guide-top { padding-top: 28px; }
.guide-top .wrap { display: grid; gap: 16px; }
.guide-top :where(h2) { margin: 0; }
.guide-top :where(p, ul) { margin: 0; }
.gt-tool { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 18px 20px; }
.gt-icon { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; background: var(--well-bg); box-shadow: var(--well-box); overflow: hidden; }
.gt-icon .gl { transform: scale(1.35); transform-origin: center; padding-left: 0; margin-top: 0; justify-content: center; }
.gt-icon .gl-link { align-items: center; }
.gt-name { font: 600 19px/1.25 var(--display); letter-spacing: -0.015em; color: var(--ink); }
.gt-line { margin-top: 3px; font-size: 15.5px; line-height: 1.45; color: var(--ink-2); }
.gt-tldr { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 18px; align-items: start; }
.gt-tldr .gt-head { grid-column: 2; font: 600 15px/1.4 var(--display); color: var(--dove); }
.gt-tldr .gt-icon { grid-row: 1 / span 2; }
.gt-tldr ul { list-style: none; padding: 0; display: grid; gap: 8px; margin-top: 6px; }
.gt-tldr li { position: relative; margin: 0; padding-left: 20px; font-size: 16.5px; line-height: 1.5; color: var(--ink); }
.gt-tldr li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 8px; border-radius: 3px / 3.5px; background: var(--bd-blue); box-shadow: inset 0 1px 1px rgba(255,255,255,.6); }
.gt-tldr li:first-child::before { background: var(--bd-pink); }
.gt-flow { grid-column: 1 / -1; margin-top: 14px; padding-top: 14px; box-shadow: 0 -1px 0 var(--hair); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.gt-node { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: 14.5px; line-height: 1.3; color: var(--ink-2); background: var(--chip); }
.gt-node .bd { width: 13px; height: 11px; border-radius: 4px / 5px; }
.gt-node.last { color: var(--ink); font-weight: 600; background: color-mix(in srgb, var(--rose) 13%, transparent); }
.gt-join { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 18px 20px; }
.gt-join p { flex: 1 1 320px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.gt-join p strong { color: var(--ink); }
.guide-top .btn.gel { height: 44px; padding: 0 22px; font-size: 15px; }
.guide-top .btn.pearl { height: 40px; padding: 0 18px; font-size: 14.5px; }
@media (max-width: 640px) {
  .gt-tool { grid-template-columns: 56px minmax(0, 1fr); gap: 12px 14px; padding: 16px; }
  .gt-tool .btn { grid-column: 1 / -1; }
  .gt-icon { width: 56px; height: 56px; border-radius: 14px; }
  .gt-tldr { grid-template-columns: 56px minmax(0, 1fr); gap: 4px 14px; }
  .gt-flow { flex-direction: column; align-items: flex-start; }
  .gt-flow .f-to { transform: rotate(135deg); margin: 0 0 0 14px; }
  .gt-join { padding: 16px; }
  .gt-join .btn { width: 100%; }
}

/* two side by side, stacked on a phone */
.f-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }

@media (max-width: 640px) {
  .pane { padding: 18px 16px; border-radius: 18px; }
  .well { padding: 4px 14px; }
  .f-duo { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .live-dot::after { animation: none; } }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .robo { box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.4); }
  :root:not([data-theme="light"]) .robo svg { filter: none; }
  :root:not([data-theme="light"]) .robo .maker { box-shadow: 0 0 0 1.5px var(--robo-cut, var(--sky)), 0 1px 3px rgba(0,0,0,.5); }
  :root:not([data-theme="light"]) .faq .faq-list summary::before { border-left-color: #a2a4ad; }
}
:root[data-theme="dark"] .robo { box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.4); }
:root[data-theme="dark"] .robo svg { filter: none; }
:root[data-theme="dark"] .robo .maker { box-shadow: 0 0 0 1.5px var(--robo-cut, var(--sky)), 0 1px 3px rgba(0,0,0,.5); }
:root[data-theme="dark"] .faq .faq-list summary::before { border-left-color: #a2a4ad; }

/* header: a white Log in, and the pink gel for early access (the same gel as the hero, without the throb) */
:root .nav a.login { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; margin-right: 2px; border-radius: 999px; font: 600 14.5px var(--text); color: #1c1d22; text-decoration: none; white-space: nowrap;
  background: linear-gradient(#ffffff, #f7f6f4); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(25,26,33,.12), 0 1px 2px rgba(25,26,33,.1); }
:root .nav a.login:hover { color: #1c1d22; background: #fff; box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(25,26,33,.2), 0 2px 4px rgba(25,26,33,.12); }
:root .nav a.btn.gel { position: relative; overflow: hidden; isolation: isolate; height: 38px; padding: 0 17px; border: 1px solid #a8285a; border-radius: 999px;
  font-weight: 700; letter-spacing: .01em; color: #3a0a1e; text-shadow: 0 1px 0 rgba(255,255,255,.55); filter: none; transform: none;
  background: linear-gradient(#ffb3cd 0%, #ff6fa0 46%, #e23c75 52%, #f06c9c 100%);
  box-shadow: inset 0 -2px 5px rgba(255,205,225,.95), inset 0 1px 0 rgba(255,255,255,.7), 0 1px 1px rgba(150,20,70,.45), 0 6px 12px -6px rgba(200,40,100,.55); }
:root .nav a.btn.gel::before { content: ""; position: absolute; z-index: -1; left: 9%; right: 9%; top: 2px; height: 46%; border-radius: 999px; background: linear-gradient(rgba(255,255,255,.88), rgba(255,255,255,.08)); }
:root .nav a.btn.gel:hover { color: #3a0a1e; background: linear-gradient(#ffb3cd 0%, #ff86b0 46%, #e8508a 52%, #f477a4 100%); }
:root .nav a.btn.gel:active { background: linear-gradient(#e2467e 0%, #c93a6c 50%, #d84a7e 100%); box-shadow: inset 0 2px 6px rgba(90,10,40,.5); }
@media (max-width: 720px) {
  :root .nav a.login { height: 36px; padding: 0 13px; font-size: 14px; }
  :root .nav a.btn.gel { display: inline-flex; height: 36px; padding: 0 15px; }
}

/* the three controls on the right sit together: 8px apart instead of the nav's 32px */
:root .nav .wrap > .theme { margin-right: -24px; }
:root .nav .wrap > a.login { margin-right: -24px; }
@media (max-width: 720px) { :root .nav .wrap > a.login { margin-right: -4px; } }

/* ===================== buttons: the homepage's own ===================== */
/* The gel: the hero's glossy pink pill (Aqua's default button), for the one main action in an area. */
:root .btn.gel { position: relative; overflow: hidden; isolation: isolate; border: 1px solid #a8285a; border-radius: 999px;
  font-weight: 700; letter-spacing: .01em; color: #3a0a1e; text-shadow: 0 1px 0 rgba(255,255,255,.55);
  background: linear-gradient(#ffb3cd 0%, #ff6fa0 46%, #e23c75 52%, #f06c9c 100%);
  box-shadow: inset 0 -3px 7px rgba(255,205,225,.95), inset 0 1px 0 rgba(255,255,255,.7), 0 1px 1px rgba(150,20,70,.45), 0 8px 16px -6px rgba(200,40,100,.55); }
:root .btn.gel::before { content: ""; position: absolute; z-index: -1; left: 9%; right: 9%; top: 2px; height: 46%; border-radius: 999px; background: linear-gradient(rgba(255,255,255,.88), rgba(255,255,255,.08)); }
:root .btn.gel:hover { color: #3a0a1e; background: linear-gradient(#ffb3cd 0%, #ff86b0 46%, #e8508a 52%, #f477a4 100%); }
:root .btn.gel:active { background: linear-gradient(#e2467e 0%, #c93a6c 50%, #d84a7e 100%); box-shadow: inset 0 2px 6px rgba(90,10,40,.5); }
:root .btn.gel[disabled] { filter: saturate(.7); }
/* The pearl: the header's white Log in pill, for everything beside the gel. */
:root .btn.pearl { color: #1c1d22; font-weight: 600; background: linear-gradient(#ffffff, #f7f6f4);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(25,26,33,.12), 0 1px 2px rgba(25,26,33,.1); }
:root .btn.pearl:hover { color: #1c1d22; background: #fff; box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(25,26,33,.2), 0 2px 4px rgba(25,26,33,.12); }