/* ======================================================================
   IGviewr — flat, warm design after the igview.net reference.
   Cream page base, pure white surfaces with thin neutral borders, one
   purple accent and periwinkle buttons. Colour comes from the custom
   properties below so a palette swap stays one edit.
   ====================================================================== */

:root {
  color-scheme: light;
  /* palette: cream base, white cards, neutral ink, purple accent */
  --bg: #FAF8F5;
  --bg-2: #FFFFFF;
  --bg-3: #F1EEE8;
  --surface: #FFFFFF;
  --surface-2: #F6F4EF;

  --fg: #111827;
  --fg-2: #4B5563;
  --fg-3: #6B7280;

  --line: #E5E7EB;
  --line-2: #D1D5DB;

  --brand: #7C3AED;
  --primary: #8B8DF0;
  --primary-2: #7C3AED;
  --primary-dim: #F3E8FF;

  --green: #16A34A;
  --amber: #D97706;
  --red: #DC2626;

  /* pastel chip pairs used by feature/bento icon tiles */
  --chip-1-bg: #F3E8FF; --chip-1-fg: #7C3AED;
  --chip-2-bg: #DCFCE7; --chip-2-fg: #16A34A;
  --chip-3-bg: #FFEDD5; --chip-3-fg: #F97316;
  --chip-4-bg: #FEE2E2; --chip-4-fg: #EF4444;

  --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 22px;
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 32px;
  --s6: 48px; --s7: 72px;
  --maxw: 1200px;
  /* One reading column for the whole site. Every band, figure and section
     measures from these, which is what stops left edges drifting. */
  --content: 760px;
  --content-wide: 1080px;

  /* Diagram palette. The inline SVG figures carry classes rather than
     colours, so one token swap re-themes every illustration. */
  --f-screen: #FFFFFF;
  --f-screen2: #F6F4EF;
  --f-bar: #D6D2C9;
  --f-linef: #E8E5DE;
  --f-stroke: #E1DED7;
  --f-muted: #9A948A;
  --f-acc: #7C3AED;
  --f-accsoft: #F1E8FF;
  --f-green: #16A34A;
  --f-greensoft: #DCFCE7;
  --f-red: #DC2626;
  --f-redsoft: #FEE2E2;
  --f-shadowc: rgba(17, 24, 39, .07);
  --f-ring: rgba(139, 141, 240, .18);
  --f-glass: rgba(17, 14, 30, .45);
  --f-t1: #E6DAFF;
  --f-t2: #D3F0DE;
  --f-t3: #FFE4C7;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --shadow: 0 1px 2px rgba(17, 24, 39, .05);
  --shadow-lg: 0 4px 16px rgba(17, 24, 39, .08);
  --topbar: #FFFFFF;
}

/* Dark theme: same layout, palette swapped. The media lightbox stays dark
   in both themes because photos read best against near-black. */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #14100C;
  --bg-2: #1C1813;
  --bg-3: #2A251E;
  --surface: #1E1A14;
  --surface-2: #2A251E;
  --fg: #F5F3EF;
  --fg-2: #C4C0B8;
  --fg-3: #98938A;
  --line: #2E2A23;
  --line-2: #3D3830;
  /* --brand was left at its light-theme purple, so the accent word in every
     H1, the step numbers and the avatar rings sat at #7C3AED on near-black.
     The dark theme needs its own, lighter value. */
  --brand: #A78BFA;
  --primary: #8B8DF0;
  --primary-2: #A5A7F5;
  --primary-dim: rgba(139, 141, 240, .16);
  --green: #4ADE80;
  --amber: #FBBF24;
  --red: #F87171;
  --topbar: #14100C;
  --shadow: 0 1px 3px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .35);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, .3), 0 18px 44px rgba(0, 0, 0, .5);

  --f-screen: #221D17;
  --f-screen2: #2C2620;
  --f-bar: #4A433A;
  --f-linef: #332D26;
  --f-stroke: #3A342C;
  --f-muted: #8B8579;
  --f-acc: #A5A7F5;
  --f-accsoft: rgba(139, 141, 240, .2);
  --f-green: #4ADE80;
  --f-greensoft: rgba(74, 222, 128, .18);
  --f-red: #F87171;
  --f-redsoft: rgba(248, 113, 113, .18);
  --f-shadowc: rgba(0, 0, 0, .4);
  --f-ring: rgba(139, 141, 240, .22);
  --f-glass: rgba(0, 0, 0, .5);
  --f-t1: #3A3050;
  --f-t2: #26402F;
  --f-t3: #45331F;
}

/* The browser hides [hidden] through its own stylesheet, but any author rule
   that sets display on one of these elements needs the attribute fallback
   below or the element stops responding to `hidden`. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* Flat cream base, the way the reference site reads: one warm neutral
   under everything, no gradients or glows. */
body {
  margin: 0;
  background-color: var(--bg);
  color: var(--fg);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
a { color: inherit; }

/* Stroke SVG icons: inherit colour from CSS and scale with font-size */
.ico { font-size: 20px; line-height: 1; flex-shrink: 0; display: inline-flex; }
.ico svg { width: 1em; height: 1em; display: block; }
/* Brand lockup image: icon + wordmark ship together in one PNG. */
.blogo { height: 34px; width: auto; display: block; flex-shrink: 0; }
.brandcol .blogo { height: 43px; }
/* The lockup carries dark text, so dark theme gives it a white chip. */
html[data-theme="dark"] .blogo {
  background: #fff; border-radius: 9px; padding: 5px 9px 4px; height: 30px;
}
html[data-theme="dark"] .brandcol .blogo { height: 36px; }

/* Accent word in headings: one flat purple, like the reference mark */
.grad { color: var(--brand); }

.skip {
  position: absolute; left: -9999px; z-index: 300;
  background: var(--primary); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; top: 0; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

::selection { background: #E4D9FF; }

/* ============================================================ navigation */

.topbar {
  position: sticky; top: 0; z-index: 60;
  background: var(--topbar);
  border-bottom: 1px solid var(--line);
}
.bar {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; gap: var(--s3);
  padding: 13px var(--s3);
}

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }

.mainnav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.navlink {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: 999px;
  color: var(--fg-2); text-decoration: none; font-size: 14.5px; font-weight: 500;
  background: none; border: 0; cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.navlink:hover { background: var(--surface-2); color: var(--fg); }
.navlink.active { color: var(--primary-2); background: var(--primary-dim); }
.chev { width: 12px; height: 12px; transition: transform .2s var(--ease); }
.hasdd { position: relative; }
.hasdd.open .chev { transform: rotate(180deg); }

.dropdown {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 70;
  width: min(760px, calc(100vw - 32px));
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  padding: var(--s3);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.hasdd.open .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.ddgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.ddgroup h4 {
  margin: 0 0 2px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .8px; color: var(--primary-2); font-weight: 700;
}
.ddblurb { margin: 0 0 10px; font-size: 12px; color: var(--fg-3); line-height: 1.45; }
.ddgroup a {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 10px; border-radius: var(--r-sm); text-decoration: none;
  transition: background .14s var(--ease);
}
.ddgroup a:hover { background: var(--surface-2); }
.ddgroup a .ico { color: var(--primary-2); margin-top: 2px; font-size: 21px; }
.ddgroup a b { display: block; font-size: 13.5px; font-weight: 600; }
.ddgroup a em { display: block; font-style: normal; font-size: 12px; color: var(--fg-3); line-height: 1.45; }

.navtoggle {
  display: none; flex-direction: column; gap: 4px; justify-content: center;
  width: 40px; height: 40px; margin-left: auto;
  background: none; border: 1px solid var(--line-2); border-radius: var(--r-sm); cursor: pointer;
}
.navtoggle span { display: block; height: 1.8px; width: 17px; margin: 0 auto; background: var(--fg-2); transition: .2s var(--ease); }
.navtoggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.8px) rotate(45deg); }
.navtoggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navtoggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.8px) rotate(-45deg); }

/* Theme switch: sun on light, moon on dark. Saved per browser. */
.themebtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: none; border: 1px solid var(--line-2); cursor: pointer;
  color: var(--fg-2);
  transition: background .15s var(--ease), color .15s var(--ease);
}
.themebtn:hover { background: var(--surface-2); color: var(--fg); }
.themebtn .ico { font-size: 18px; }
.themebtn .moon { display: none; }
html[data-theme="dark"] .themebtn .sun { display: none; }
html[data-theme="dark"] .themebtn .moon { display: block; }

/* ================================================================ layout */

main { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s3) var(--s7); }

.sec { padding: var(--s7) 0; }
/* These had a max-width but no auto margin, so they hugged the left edge. */
.sec.narrow { max-width: var(--content); margin-left: auto; margin-right: auto; }

/* A band is a full-width backdrop painted behind an unchanged column.
   It used to be a card with its own 32px padding inside the same 760px
   column, which pushed the copy in and out by 32px on every other section
   all the way down the page. Drawing the slab as a pseudo-element instead
   means a banded section and a plain one share the exact same text column. */
.sec.band { position: relative; }
.sec.band::before {
  content: "";
  position: absolute; z-index: -1;
  top: 0; bottom: 0; left: 50%;
  width: 100vw; transform: translateX(-50%);
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
/* Two bands in a row read as one slab, so the seam between them goes. */
.sec.band + .sec.band::before { border-top: 0; }

/* Section headings sit centred; long body copy below stays left-aligned
   inside a centred column, because centred paragraphs are hard to read. */
.shead { max-width: 720px; margin: 0 auto var(--s5); text-align: center; }
.shead .lead { margin-left: auto; margin-right: auto; }
.kicker {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase;
  background: var(--primary-dim); color: var(--primary-2);
  padding: 5px 12px; border-radius: 999px; margin-bottom: 12px;
}
h1, h2, h3, h4 { letter-spacing: -.5px; line-height: 1.22; margin: 0; }
.shead h2, .sec > h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 800; margin-bottom: 12px; }
.lead { color: var(--fg-2); font-size: 17px; margin: 0; }

.crumbs { padding-top: var(--s3); }
.crumbs ol { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; font-size: 13px; color: var(--fg-3); flex-wrap: wrap; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--line-2); }
.crumbs li[aria-current] { color: var(--fg-2); font-weight: 500; }
.crumbs a { color: var(--fg-3); text-decoration: none; }
.crumbs a:hover { color: var(--primary-2); }

/* ================================================================== hero */

/* Two columns: the words and the search box on the left, a mock of the
   result on the right, so the fold shows what the tool actually produces
   instead of only describing it. Collapses to one centred column below
   960px, where a side-by-side split would squeeze both halves. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  align-items: center;
  gap: var(--s6);
  padding: var(--s6) 0 var(--s7);
  position: relative;
}
.herocopy { max-width: 580px; min-width: 0; }
.hero .searchbox { max-width: 540px; }
/* Four claims in a 540px column wrap to two rows, so the chips are tightened
   here to keep that pile from becoming three rows under the search box. */
.hero .trustrow { justify-content: flex-start; gap: 7px; }
.hero .trustrow li { font-size: 12.5px; padding: 5px 11px; }
.hero .hint { text-align: left; }
.hero .heroout { margin: 0 0 var(--s3); }

/* ------------------------------------------------------------- hero art */

.heroart { position: relative; width: 100%; max-width: 410px; justify-self: center; }
.artwash {
  position: absolute; inset: -14% -18% -10%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(58% 54% at 72% 22%, rgba(124, 58, 237, .18), transparent 70%),
    radial-gradient(54% 50% at 18% 82%, rgba(139, 141, 240, .18), transparent 70%);
}
.heroart .mock { position: relative; z-index: 1; }
.float {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 15px;
  box-shadow: var(--shadow-lg);
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.float em { font-style: normal; }
.float .ico { font-size: 15px; color: var(--primary-2); }
.float.f1 { top: 11%; left: -13%; }
.float.f2 { bottom: 9%; right: -11%; }

/* Small solid dot keeps the badge anchored to the accent without a glow */
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface); color: var(--fg-2);
  border: 1px solid var(--line);
  padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  margin-bottom: var(--s3);
}
.badge::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand); flex-shrink: 0;
}
.hero h1 {
  font-size: clamp(32px, 4.4vw, 52px); font-weight: 800;
  letter-spacing: -1.7px; margin-bottom: 14px; line-height: 1.1;
  text-wrap: balance;
}
.hero .sub { color: var(--fg-2); font-size: 17.5px; max-width: 54ch; margin: 0 0 var(--s4); }

/* ============================================================= searchbox */

/* Rounded rectangle with a hairline border, like the reference search:
   Paste chip on the left of the input, periwinkle View on the right. */
.searchbox {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-lg); padding: 8px 8px 8px 14px;
  box-shadow: var(--shadow);
  max-width: 560px;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.searchbox:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(139, 141, 240, .18), var(--shadow);
}
.searchbox .sicon { color: var(--fg-3); display: flex; }
.searchbox .at { color: var(--fg-3); font-weight: 600; margin-left: -4px; }
.searchbox input { flex: 1; min-width: 0; background: none; border: 0; outline: none; padding: 10px 0; font-size: 15.5px; }
.searchbox input::placeholder { color: var(--fg-3); }
.searchbox.invalid { border-color: var(--red); }

.hint { font-size: 13px; color: var(--fg-3); margin: 12px 0 var(--s3); }
.egbtn {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--primary-2); font-weight: 600; text-decoration: underline;
  text-underline-offset: 2px;
}

/* Recently viewed: profiles this browser looked up, kept locally only. */
.recent { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 var(--s3); }
.recent .rlabel { font-size: 12.5px; color: var(--fg-3); font-weight: 500; }
.rchip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 13px 4px 4px; cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--fg-2);
  transition: border-color .15s var(--ease), color .15s var(--ease);
}
.rchip:hover { border-color: var(--primary); color: var(--fg); }
.rchip img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; background: var(--bg-3); }

/* Trust items as soft chips */
.trustrow { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; justify-content: center; }
.trustrow li {
  display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--fg-2);
  background: var(--surface); border: 1px solid var(--line);
  padding: 6px 13px; border-radius: 999px; font-weight: 500;
}
.trustrow .ico { font-size: 15px; color: var(--green); }

/* =============================================================== buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--line-2); color: var(--fg);
  padding: 11px 18px; border-radius: 999px; cursor: pointer;
  font-size: 14.5px; font-weight: 600; white-space: nowrap;
  transition: background .15s var(--ease), border-color .15s var(--ease), transform .1s var(--ease), box-shadow .15s var(--ease);
}
.btn:hover { background: var(--surface-2); border-color: var(--line-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.primary {
  background: var(--primary);
  border-color: transparent; color: #fff; padding: 12px 26px;
}
.btn.primary:hover { background: #7A7CEA; }
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.small { padding: 8px 15px; font-size: 13.5px; }

.btn .spin { display: none; width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.btn.loading .lbl { display: none; }
.btn.loading .spin { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ========================================================= hero mockup */

.mock {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: var(--s2); box-shadow: var(--shadow-lg);
  position: relative; overflow: hidden;
}
.mockbar { display: flex; align-items: center; gap: 6px; margin-bottom: var(--s2); }
.mockbar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); flex-shrink: 0; }
.mockbar em {
  flex: 1; margin-left: 6px; text-align: center; font-style: normal;
  font-size: 9.5px; color: var(--fg-3);
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 2px 10px;
}
.mocksearch {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 12px; margin-bottom: var(--s2); font-size: 13px;
}
.mocksearch span { color: var(--fg-3); }
.mocksearch em { flex: 1; font-style: normal; color: var(--fg-3); }
.mocksearch b {
  background: var(--brand); color: #fff; font-size: 11.5px; font-weight: 600;
  padding: 5px 12px; border-radius: 999px;
}
.mockprofile { display: flex; gap: 12px; align-items: center; margin-bottom: var(--s2); }
.mavatar {
  width: 54px; height: 54px; border-radius: 50%; flex-shrink: 0; padding: 2px;
  background: conic-gradient(from 150deg, #7C3AED, #E11D5A, #F97316, #FBBF24, #7C3AED);
}
.mavatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid var(--surface); }
.mmeta { flex: 1; min-width: 0; }
.mname {
  display: flex; align-items: center; gap: 5px;
  font-size: 13.5px; font-weight: 700; letter-spacing: -.2px; line-height: 1.2;
}
/* The verified tick, drawn rather than imported. */
.mtick {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
  background: var(--primary);
  -webkit-mask: linear-gradient(#000 0 0);
  position: relative;
}
.mtick::after {
  content: ""; position: absolute; left: 3px; top: 3.5px;
  width: 5px; height: 2.5px;
  border-left: 1.6px solid #fff; border-bottom: 1.6px solid #fff;
  transform: rotate(-45deg);
}
.mhandle { display: block; font-size: 11px; color: var(--fg-3); margin: 1px 0 7px; }
.mstats { display: flex; gap: 14px; }
.mstats u { text-decoration: none; display: flex; flex-direction: column; gap: 1px; }
.mstats i { font-style: normal; font-size: 11.5px; font-weight: 700; letter-spacing: -.2px; }
.mstats s { text-decoration: none; font-size: 9.5px; color: var(--fg-3); }
.mocktabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.mocktabs span { font-size: 10.5px; color: var(--fg-3); padding: 7px 6px; border-bottom: 2px solid transparent; white-space: nowrap; }
.mocktabs .on { color: var(--fg); border-bottom-color: var(--primary); font-weight: 600; }

/* The body of the mock changes with the active tab, because a reels page
   should not advertise a grid of squares. */
/* Real photographs, cropped by the browser: no processing step needed and
   nothing in the mock is a coloured rectangle standing in for a picture. */
.mockgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.mockgrid span { border-radius: 7px; overflow: hidden; background: var(--bg-3); display: block; }
.mockgrid.square span { aspect-ratio: 1; }
.mockgrid.tall span { aspect-ratio: 3 / 4; }
.mockgrid span { position: relative; }
.mockgrid img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Reel tiles carry a play badge, story tiles a countdown. */
.mockgrid .mplay {
  position: absolute; inset: 0; margin: auto;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(20, 14, 34, .5);
  display: flex; align-items: center; justify-content: center;
}
.mockgrid .mplay::before {
  content: ""; margin-left: 2px;
  border-left: 7px solid #fff;
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
}
.mockgrid em {
  position: absolute; left: 5px; bottom: 5px;
  font-style: normal; font-size: 8.5px; font-weight: 600; color: #fff;
  background: rgba(20, 14, 34, .62); border-radius: 4px; padding: 2px 6px;
}
.mockgrid.reels em::after { content: " views"; opacity: .8; }

.mockhl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 4px 2px 12px; }
.mockhl span { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; }
.mockhl i {
  display: block; width: 48px; height: 48px; border-radius: 50%; padding: 2px;
  background: conic-gradient(from 150deg, #7C3AED, #E11D5A, #F97316, #FBBF24, #7C3AED);
}
.mockhl img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid var(--surface); }
.mockhl b {
  font-size: 9.5px; font-weight: 600; color: var(--fg-2);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.mockrows { display: flex; flex-direction: column; gap: 8px; padding-bottom: 8px; }
.mockrows span {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 11px;
}
.mockrows i { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--bg-3); }
.mockrows i img { width: 100%; height: 100%; object-fit: cover; }
.mockrows u { text-decoration: none; display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.mockrows s {
  text-decoration: none; display: block; font-size: 11px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mockrows s + s { font-size: 9.5px; font-weight: 500; color: var(--fg-3); }

/* Comment viewer: the post, then its thread. */
.mockthread { display: grid; grid-template-columns: 84px 1fr; gap: 10px; padding-bottom: 6px; }
.mtpost { border-radius: 8px; overflow: hidden; aspect-ratio: 1; display: block; }
.mtpost img { width: 100%; height: 100%; object-fit: cover; }
.mtlist { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.mtlist span { display: flex; gap: 7px; align-items: flex-start; min-width: 0; }
.mtlist span.reply { padding-left: 16px; }
.mtlist i { width: 18px; height: 18px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--bg-3); }
.mtlist i img { width: 100%; height: 100%; object-fit: cover; }
.mtlist u { text-decoration: none; display: block; min-width: 0; }
.mtlist s {
  text-decoration: none; display: block; font-size: 9px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mtlist s + s { font-weight: 400; color: var(--fg-3); }

/* Profile picture viewer: the file behind the small circle. */
.mockdp { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 0 10px; }
.mdpshot { width: 132px; height: 132px; border-radius: 14px; overflow: hidden; display: block; }
.mdpshot img { width: 100%; height: 100%; object-fit: cover; }
.mockdp em { font-style: normal; font-size: 9.5px; color: var(--fg-3); }
.mockdp b,
.mockdl b {
  font-size: 10.5px; font-weight: 700; color: #fff;
  background: var(--primary); border-radius: 999px; padding: 6px 16px;
}

/* Downloader: the same grid, everything picked. */
.mockdl { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-bottom: 8px; }
.mockdl .mockgrid { width: 100%; }
.mockdl .mockgrid span { position: relative; }
.mockdl .mockgrid i {
  position: absolute; right: 5px; top: 5px;
  width: 15px; height: 15px; border-radius: 50%; background: var(--primary);
}
.mockdl .mockgrid i::after {
  content: ""; position: absolute; left: 4px; top: 4.5px;
  width: 6px; height: 3px;
  border-left: 1.8px solid #fff; border-bottom: 1.8px solid #fff;
  transform: rotate(-45deg);
}

/* Private accounts: nothing behind the wall to show. */
.mocklock { position: relative; padding-bottom: 8px; }
.mockgrid.faded { opacity: .22; }
.mocklock b {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: 10.5px; font-weight: 700; white-space: nowrap;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: 999px; padding: 7px 15px; box-shadow: var(--shadow-lg);
}

.previewwrap { max-width: 540px; margin: 0 auto; }

/* ============================================================ stat strip */

.statstrip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: var(--s4) var(--s3);
  box-shadow: var(--shadow);
}
.statstrip div { text-align: center; position: relative; min-width: 0; }
.statstrip div + div::before {
  content: ""; position: absolute; left: calc(var(--s3) / -2);
  top: 12%; bottom: 12%; width: 1px; background: var(--line);
}
.statstrip b {
  display: block; font-size: clamp(22px, 2.4vw, 30px); font-weight: 800;
  letter-spacing: -1px; line-height: 1.1; color: var(--brand);
}
.statstrip span { display: block; font-size: 13px; color: var(--fg-3); margin-top: 5px; }

/* ================================================================ cards */

.cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: var(--s3); }
.cardgrid.tight { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.tcard, .fcard, .ucard {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s4);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.tcard { display: block; }
.tcard:hover, .fcard:hover {
  border-color: var(--line-2);
  box-shadow: var(--shadow-lg);
}
/* Tool/feature cards carry the stroke icon in a soft pastel chip; the
   colour cycles so a row of cards reads like the reference's mixed tiles */
.tcard:nth-child(4n+2) .tico { background: var(--chip-1-bg); color: var(--chip-1-fg); }
.tcard:nth-child(4n+3) .tico { background: var(--chip-2-bg); color: var(--chip-2-fg); }
.tcard:nth-child(4n+4) .tico { background: var(--chip-3-bg); color: var(--chip-3-fg); }
.tcard:nth-child(4n+5) .tico { background: var(--chip-4-bg); color: var(--chip-4-fg); }
.fcard:nth-child(4n+2) .tico { background: var(--chip-1-bg); color: var(--chip-1-fg); }
.fcard:nth-child(4n+3) .tico { background: var(--chip-2-bg); color: var(--chip-2-fg); }
.fcard:nth-child(4n+4) .tico { background: var(--chip-3-bg); color: var(--chip-3-fg); }
.fcard:nth-child(4n+5) .tico { background: var(--chip-4-bg); color: var(--chip-4-fg); }
.tico {
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
  width: 46px; height: 46px; border-radius: 14px;
  background: var(--chip-1-bg); color: var(--chip-1-fg);
}
.tico .ico { font-size: 22px; }

.tcard h3, .fcard h3, .ucard h3 { font-size: 16px; font-weight: 650; margin-bottom: 7px; }
.tcard p, .fcard p, .ucard p { margin: 0; font-size: 14px; color: var(--fg-3); line-height: 1.6; }
.tcard .go { display: inline-block; margin-top: 14px; font-size: 13.5px; font-weight: 700; color: var(--primary-2); text-decoration: none; }
.tcard .go:hover { text-decoration: underline; }

/* ================================================================ steps */

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); position: relative; }
.steps li { position: relative; }
.steps li:not(:last-child)::after {
  content: ""; position: absolute; top: 22px; left: 60px; right: calc(-1 * var(--s4) + 8px);
  height: 2px; background: linear-gradient(90deg, var(--line-2), transparent);
  border-radius: 2px;
}
.steps .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; margin-bottom: 14px;
  background: var(--brand); color: #fff; font-weight: 700; font-size: 14.5px;
}
.steps h3 { font-size: 16.5px; margin-bottom: 7px; }
.steps p { margin: 0; color: var(--fg-3); font-size: 14.5px; }

/* ================================================================ prose */

.prose { max-width: var(--content); margin-left: auto; margin-right: auto; }
.prose h2 { font-size: clamp(24px, 3vw, 31px); margin-bottom: var(--s3); text-align: center; }
.prose h3 { font-size: 19px; margin: var(--s4) 0 12px; text-align: center; }
.prose p { color: var(--fg-2); margin: 0 0 var(--s2); }
.prose.legal { padding-top: var(--s5); }
.prose.legal h1 { font-size: 34px; margin-bottom: var(--s3); }

/* Content-doc sections: long-form copy with lists, tables and code lines.
   Scoped to .rich so the original prose pages keep their centred H3s. */
.prose.rich h2 { text-align: left; }
.prose.rich h3 { text-align: left; margin: var(--s4) 0 10px; }
.prose.rich p { line-height: 1.68; }
.prose.rich .lead { color: var(--fg-2); font-size: 17px; margin: 0 0 var(--s3); }
.prose.rich ul, .prose.rich ol { margin: 0 0 var(--s3); padding-left: 24px; color: var(--fg-2); }
.prose.rich li { margin: 0 0 10px; line-height: 1.6; }
.prose.rich li::marker { color: var(--primary-2); font-weight: 700; }
.prose.rich a { color: var(--primary-2); font-weight: 500; text-decoration: none; }
.prose.rich a:hover { text-decoration: underline; }

.twrap { overflow-x: auto; margin: 0 0 var(--s3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.prose.rich table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.prose.rich th {
  text-align: left; padding: 12px 14px;
  background: var(--surface-2);
  color: var(--fg); font-weight: 650; border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
}
.prose.rich td { padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--fg-2); vertical-align: top; line-height: 1.55; }
.prose.rich tr:last-child td { border-bottom: none; }
.prose.rich td:first-child { color: var(--fg); font-weight: 550; }
.prose.rich tbody tr:hover td { background: var(--bg-2); }

.codelines {
  background: #171225; border: 1px solid #2A2340; border-radius: var(--r-sm);
  padding: 13px 17px; margin: 0 0 var(--s3); overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.75; color: #D9D2EA; white-space: pre;
}
.codelines::selection, .codelines *::selection { background: rgba(124, 58, 237, .4); }

.toolon { margin: -6px 0 var(--s3); }
.toolon a {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--primary-2); font-weight: 700; font-size: 14.5px; text-decoration: none;
}
.toolon a:hover { text-decoration: underline; }

/* --------------------------------------------------------- bento section */
/* Uniform grid of tool cards: two equal columns, every box the same size.
   Each card header pairs the 3D icon tile with a centred badge + title. */

/* Wide sections hold a grid or a pair of columns, so they get the wider
   measure. The heading still starts on the same optical line as a prose
   section's heading, because both are centred in the same page gutter. */
.prose.rich.wide { max-width: var(--content-wide); }

.bento { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); margin: 0 0 var(--s3); }
.bcard {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: stretch; text-align: left;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 24px; padding: 28px 26px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.bcard:hover {
  border-color: var(--line-2);
  box-shadow: var(--shadow-lg);
}

/* Flat pastel icon tile, the way the reference shows each tool: soft
   colour background carrying the saturated icon in the same hue. */
.bhead { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
.bheadtxt { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }

.bicon {
  width: 68px; height: 68px; flex-shrink: 0;
  transition: transform .2s var(--ease);
}
.bicon svg { width: 100%; height: 100%; display: block; }
.bcard:hover .bicon { transform: scale(1.06); }

.bmain { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; flex: 1; }
.bcard .bbadge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  background: var(--primary-dim); color: var(--primary-2);
  padding: 4px 12px; border-radius: 999px;
}.bcard h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; letter-spacing: -.4px; text-wrap: balance; }
.bcard p { margin: 0 0 0; font-size: 14px; color: var(--fg-3); line-height: 1.6; text-wrap: pretty; }
.bgo {
  display: inline-block; margin-top: auto; padding-top: 16px;
  color: var(--primary-2); font-weight: 700; font-size: 14px;
  text-decoration: none;
}
.bgo:hover { text-decoration: underline; }

/* ============================================================== figures */
/* Inline SVG diagrams. The shapes carry classes, never colours, so the same
   markup renders correctly in both themes and the figure scales to whatever
   column it is dropped into. */

/* A figure never grows past the reading column, even inside a wide section:
   a diagram 1080px across stops being readable and starts being wallpaper. */
.fig { margin: var(--s4) 0; max-width: var(--content); }
.prose.rich.wide .fig { margin-left: auto; margin-right: auto; }
.figart {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s3); overflow: hidden;
}
.figart svg { width: 100%; height: auto; display: block; }
.figart text { font-family: inherit; }
.fig figcaption {
  margin-top: 11px; font-size: 13px; color: var(--fg-3);
  line-height: 1.55; text-wrap: pretty;
}
.fig.fignarrow .figart { max-width: 460px; margin: 0 auto; }

.figart .f-screen { fill: var(--f-screen); }
.figart .f-screen2 { fill: var(--f-screen2); }
.figart .f-bar { fill: var(--f-bar); }
.figart .f-line { fill: var(--f-linef); }
.figart .f-acc { fill: var(--f-acc); }
.figart .f-accsoft { fill: var(--f-accsoft); }
.figart .f-green { fill: var(--f-green); }
.figart .f-greensoft { fill: var(--f-greensoft); }
.figart .f-red { fill: var(--f-red); }
.figart .f-redsoft { fill: var(--f-redsoft); }
.figart .f-white { fill: #fff; }
.figart .f-ink { fill: var(--fg); }
.figart .f-shadow { fill: var(--f-shadowc); }
.figart .f-ring { fill: var(--f-ring); }
.figart .f-glass { fill: var(--f-glass); }
.figart .f-dark { fill: rgba(17, 14, 30, .72); }
.figart .f-tile1 { fill: var(--f-t1); }
.figart .f-tile2 { fill: var(--f-t2); }
.figart .f-tile3 { fill: var(--f-t3); }

.figart .s-line { fill: none; stroke: var(--f-stroke); stroke-width: 1.4; }
.figart .s-acc,
.figart .s-mute,
.figart .s-green,
.figart .s-red,
.figart .s-white { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.figart .s-acc { stroke: var(--f-acc); }
.figart .s-mute { stroke: var(--f-muted); }
.figart .s-green { stroke: var(--f-green); stroke-width: 2; }
.figart .s-red { stroke: var(--f-red); stroke-width: 2; }
.figart .s-white { stroke: #fff; stroke-width: 2; }
.figart .dash { stroke-dasharray: 5 5; }

.figart .t-xs { font-size: 10.5px; font-weight: 500; }
.figart .t-sm { font-size: 12.5px; font-weight: 500; }
.figart .t-md { font-size: 14px; font-weight: 700; }
.figart .t-lg { font-size: 17px; font-weight: 800; }
.figart .t-ink { fill: var(--fg); }
.figart .t-mute { fill: var(--fg-3); }
.figart .t-acc { fill: var(--primary-2); }
.figart .t-white { fill: #fff; }

/* ================================================================ guide */
/* Illustrated walkthrough. Rows alternate which side carries the picture;
   the markup order stays the reading order, so only the visual order flips
   and a screen reader still hears step one before step two. */

.guide { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s6); }
.gstep {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: var(--s5); align-items: center;
}
.gstep:nth-child(even) .gtext { order: 2; }
.gnum {
  display: inline-block; font-size: 11.5px; font-weight: 700;
  letter-spacing: .9px; text-transform: uppercase;
  color: var(--primary-2); background: var(--primary-dim);
  padding: 4px 12px; border-radius: 999px; margin-bottom: 13px;
}
.prose.rich .gtext h3 { font-size: 20px; font-weight: 700; margin: 0 0 10px; text-align: left; }
.prose.rich .gtext p { margin: 0; font-size: 15px; }
.gfig, .gfig .fig { margin: 0; }

/* ============================================================= callouts */

.callout {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--primary);
  border-radius: var(--r-md); padding: 16px 19px; margin: var(--s4) 0;
}
.callout .ico { font-size: 20px; color: var(--primary-2); margin-top: 2px; }
.callout b { display: block; font-size: 15px; margin-bottom: 5px; }
.prose.rich .callout p { margin: 0; font-size: 14.5px; }
.callout.warn { border-left-color: var(--amber); }
.callout.warn .ico { color: var(--amber); }
.callout.no { border-left-color: var(--red); }
.callout.no .ico { color: var(--red); }

/* ======================================================== split columns */
/* What holds up on the left, what does not on the right. */

.splitcols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); margin: var(--s4) 0; }
.scol {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s4);
}
.scol h4 {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 700; margin: 0 0 15px;
  padding-bottom: 13px; border-bottom: 1px solid var(--line);
}
.scol h4 .ico {
  width: 28px; height: 28px; border-radius: 9px; font-size: 17px;
  display: inline-flex; align-items: center; justify-content: center;
}
.scol.yes h4 .ico { background: rgba(22, 163, 74, .12); color: var(--green); }
.scol.no h4 .ico { background: rgba(220, 38, 38, .1); color: var(--red); }
.prose.rich .scol ul { list-style: none; margin: 0; padding: 0; }
.prose.rich .scol li {
  position: relative; padding-left: 22px; margin: 0 0 12px;
  font-size: 14.5px; line-height: 1.55;
}
.prose.rich .scol li:last-child { margin-bottom: 0; }
.prose.rich .scol li::before {
  content: ""; position: absolute; left: 3px; top: 8px;
  width: 7px; height: 7px; border-radius: 50%;
}
.prose.rich .scol.yes li::before { background: var(--green); }
.prose.rich .scol.no li::before { background: var(--red); }

/* ================================================================= blog */

.bloglist { display: grid; gap: var(--s3); margin-top: var(--s5); }
.bpost {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s4);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.bpost:hover { border-color: var(--line-2); box-shadow: var(--shadow-lg); }
.bpost h2 { font-size: 20px; margin: 0 0 8px; letter-spacing: -.4px; text-align: left; }
.bpost h2 a { color: inherit; text-decoration: none; }
.bpost h2 a:hover { color: var(--primary-2); }
.prose.rich .bpost p { margin: 0; color: var(--fg-3); font-size: 14.5px; }

.bmeta {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  margin-top: 12px; font-size: 13px; color: var(--fg-3);
}
.bmeta span, .bmeta time { display: inline-flex; align-items: center; gap: 6px; }
.bmeta span + span::before,
.bmeta time + span::before {
  content: ""; width: 3px; height: 3px; border-radius: 50%;
  background: var(--line-2); margin-right: 8px;
}
/* The byline sits under the H1, so it needs room before the copy starts. */
.prose.rich > .bmeta { margin: 0 0 var(--s4); }

.prose.rich blockquote {
  margin: var(--s3) 0; padding: 2px 0 2px var(--s3);
  border-left: 3px solid var(--primary);
}
.prose.rich blockquote p { margin: 0; color: var(--fg-2); font-style: italic; }

.notfound { list-style: none; padding: 0; display: grid; gap: 10px; }
.notfound a { color: var(--primary-2); font-weight: 600; text-decoration: none; }
.notfound a:hover { text-decoration: underline; }

/* ================================================================== faq */

.faq { max-width: 800px; margin: 0 auto; }
.faqitem {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 2px 18px; margin-bottom: 10px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.faqitem[open] { border-color: var(--line-2); box-shadow: var(--shadow); }
.faqitem summary {
  cursor: pointer; list-style: none; padding: 15px 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  font-weight: 600; font-size: 15.5px;
}
.faqitem summary::-webkit-details-marker { display: none; }
.faqitem summary i {
  position: relative; width: 14px; height: 14px; flex-shrink: 0;
}
.faqitem summary i::before, .faqitem summary i::after {
  content: ""; position: absolute; border-radius: 2px;
  background: var(--primary); transition: transform .2s var(--ease);
}
.faqitem summary i::before { top: 6px; left: 0; width: 14px; height: 2px; }
.faqitem summary i::after { left: 6px; top: 0; width: 2px; height: 14px; }
.faqitem[open] summary i::after { transform: scaleY(0); }
.faqitem[open] summary { color: var(--primary-2); }
.fa { padding-bottom: 16px; animation: fade .2s var(--ease); }
.fa p { margin: 0; color: var(--fg-2); max-width: 70ch; }
/* Answer links match the site-wide pattern: coloured, underline only on hover */
.fa a { color: var(--primary-2); font-weight: 500; text-decoration: none; }
.fa a:hover { text-decoration: underline; }
@keyframes fade { from { opacity: 0; transform: translateY(-4px); } }

/* ============================================================== results */

.results { padding-top: var(--s4); scroll-margin-top: 84px; }

/* The header, the tab row and the panel toolbar are three separate bands
   rather than one card, so the tab row can stick to the top of the viewport
   while a long grid scrolls underneath it. */
.profilehead {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: var(--s4); margin-bottom: var(--s3);
  box-shadow: var(--shadow);
}
.phmain { display: flex; gap: var(--s4); align-items: flex-start; }
.pavatar {
  width: 104px; height: 104px; border-radius: 50%; flex-shrink: 0; padding: 3px;
  background: conic-gradient(from 150deg, #7C3AED, #E11D5A, #F97316, #FBBF24, #7C3AED);
}
/* The inner ring takes the surface colour, not white, so the avatar does not
   sit in a white halo on the dark theme. */
.pavatar img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--surface); background: var(--bg-3);
}
.pmeta { flex: 1; min-width: 0; }
.prow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.prow .pname { font-size: 21px; font-weight: 750; line-height: 1.25; letter-spacing: -.5px; overflow-wrap: anywhere; }
.pill { font-size: 11.5px; padding: 3px 10px; border-radius: 999px; font-weight: 600; }
.pill.ok { background: rgba(22, 163, 74, .12); color: var(--green); }
.pill.warn { background: rgba(217, 119, 6, .12); color: var(--amber); }
.phandle { color: var(--fg-3); font-size: 14.5px; margin-top: 2px; }
.pbio { margin: 11px 0 0; white-space: pre-wrap; color: var(--fg-2); font-size: 14.5px; overflow-wrap: break-word; max-width: 60ch; }
.plink {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 9px;
  color: var(--primary-2); text-decoration: none; font-size: 14px;
  font-weight: 600; overflow-wrap: anywhere;
}
.plink:hover { text-decoration: underline; }

.pactions { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
.pactions .btn { justify-content: flex-start; width: 100%; }
.pactions .ico { font-size: 16px; color: var(--fg-3); }

/* Counts as three tiles: a number on its own needs a frame to read as data. */
.pstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); margin-top: var(--s4); }
.pstats div {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 12px 14px; text-align: center;
}
.pstats b { display: block; font-size: 19px; font-weight: 750; letter-spacing: -.5px; }
.pstats span {
  display: block; font-size: 11.5px; color: var(--fg-3);
  text-transform: uppercase; letter-spacing: .7px; margin-top: 3px;
}

.tabwrap {
  position: sticky; top: 60px; z-index: 40;
  background: var(--bg); border-bottom: 1px solid var(--line);
  padding: var(--s2) 0; margin-bottom: var(--s3);
}
.tabs { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; padding: 1px; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 15px; cursor: pointer; color: var(--fg-2);
  font-weight: 600; font-size: 14px; white-space: nowrap;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.tab .ico { font-size: 16px; color: var(--fg-3); }
.tab:hover { border-color: var(--line-2); color: var(--fg); }
.tab.active { background: var(--primary); border-color: transparent; color: #fff; }
.tab.active .ico { color: #fff; }
.tab .c {
  font-size: 11.5px; font-weight: 700; color: var(--fg-3);
  background: var(--surface-2); padding: 1px 8px; border-radius: 999px;
}
.tab .c:empty { display: none; }
.tab.active .c { background: rgba(255, 255, 255, .24); color: #fff; }

.paneltop { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s3); }
.pcount { font-size: 13.5px; color: var(--fg-3); font-weight: 500; }
.pbtns { display: flex; gap: 8px; margin-left: auto; }
.pbtns .ico { font-size: 15px; }

/* ================================================================ media */

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: var(--s2); }
.grid.stories, .grid.reels { grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); }

.card {
  position: relative; border-radius: var(--r-md); overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  cursor: pointer; aspect-ratio: 9 / 16;
  transition: transform .16s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.grid.posts .card { aspect-ratio: 1; }
.card:hover { transform: translateY(-2px); border-color: var(--line-2); box-shadow: var(--shadow-lg); }
.card img { width: 100%; height: 100%; object-fit: cover; }
.card .tag {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  background: rgba(20, 14, 34, .72); color: #fff; backdrop-filter: blur(6px);
  padding: 3px 9px; border-radius: 6px; font-size: 11px; font-weight: 500;
}
.card .dl {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  background: rgba(20, 14, 34, .72); color: #fff; backdrop-filter: blur(6px);
  border: 0; border-radius: 6px; padding: 5px 10px; font-size: 11.5px; font-weight: 600;
  cursor: pointer; opacity: 0; transition: opacity .15s var(--ease), background .15s var(--ease);
}
.card:hover .dl, .card:focus-within .dl { opacity: 1; }
.card .dl:hover { background: var(--primary); }
/* On a touch screen there is no hover, and tapping the card opens the
   viewer instead, so the save button would never be reachable. */
@media (hover: none) {
  .card .dl { opacity: 1; }
}

/* Centred play badge on video tiles. */
.card .pb {
  position: absolute; inset: 0; margin: auto; z-index: 1;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(20, 14, 34, .46); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  transition: transform .16s var(--ease), background .16s var(--ease);
}
.card .pb::before {
  content: ""; margin-left: 4px;
  border-left: 13px solid #fff;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}
.card:hover .pb { transform: scale(1.08); background: rgba(20, 14, 34, .6); }
.card .meta {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 26px 10px 9px; font-size: 11.5px; color: #fff;
  background: linear-gradient(transparent, rgba(15, 10, 26, .85));
  display: flex; justify-content: space-between; gap: 8px;
}

.grid.highlights { grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); }
.hl { display: flex; flex-direction: column; align-items: center; gap: 9px; background: none; border: 0; cursor: pointer; padding: 8px; }
.hl .cover { width: 84px; height: 84px; border-radius: 50%; padding: 2.5px; background: var(--brand); display: block; }
.hl .cover img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid #fff; }
.hl .title { font-size: 13px; font-weight: 600; max-width: 104px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl .n { font-size: 11.5px; color: var(--fg-3); }

/* account lists (followers / following) */
.grid.followers, .grid.following { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }
.acard {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 12px 14px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.acard:hover { border-color: var(--line-2); box-shadow: var(--shadow); }
.acard img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: var(--bg-3); flex-shrink: 0; }
.acard .who { min-width: 0; flex: 1; }
.acard b { display: block; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acard span { display: block; font-size: 12.5px; color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acard .mini { font-size: 10.5px; padding: 1px 7px; border-radius: 999px; flex-shrink: 0; }

/* ==================================================== states & feedback */

.state { text-align: center; padding: var(--s7) var(--s3); }
.state .sico {
  width: 56px; height: 56px; margin: 0 auto var(--s2); border-radius: var(--r-lg);
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--fg-3);
}
.state .sico .ico { font-size: 26px; }
.state .big { font-size: 18px; font-weight: 650; margin-bottom: 8px; }
.state p { color: var(--fg-3); margin: 0 auto; max-width: 440px; font-size: 14.5px; }
.state.error .sico { border-color: rgba(220,38,38,.3); color: var(--red); }
.state .btn { margin-top: var(--s3); }

.spinner {
  width: 32px; height: 32px; margin: 0 auto var(--s2);
  border: 2.5px solid var(--line-2); border-top-color: var(--primary);
  border-radius: 50%; animation: spin .8s linear infinite;
}
/* Loading note above the placeholder grid. */
.loadnote {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 var(--s3); font-size: 13.5px; color: var(--fg-3); font-weight: 500;
}
.dots { display: inline-flex; gap: 4px; }
.dots i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--primary);
  animation: bounce 1.1s infinite ease-in-out both;
}
.dots i:nth-child(2) { animation-delay: .14s; }
.dots i:nth-child(3) { animation-delay: .28s; }
@keyframes bounce {
  0%, 70%, 100% { transform: scale(.7); opacity: .45; }
  35% { transform: scale(1); opacity: 1; }
}

.skelgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: var(--s2); }
.skelgrid.tall { grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); }
/* Square by default to match the post grid; .tall for anything story-shaped,
   so the placeholder occupies the space the real item will. */
.skel {
  aspect-ratio: 1; border-radius: var(--r-md);
  background: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-3) 50%, var(--bg-2) 75%);
  background-size: 200% 100%; animation: shimmer 1.4s infinite;
}
.skel.tall { aspect-ratio: 9 / 16; }
@keyframes shimmer { to { background-position: -200% 0; } }

.note {
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--primary);
  padding: 12px 16px; border-radius: var(--r-sm); margin-bottom: var(--s2);
  color: var(--fg-3); font-size: 13.5px;
}

/* =============================================================== footer */

.sitefoot { border-top: 1px solid var(--line); background: var(--bg-2); margin-top: var(--s7); }
.fgrid {
  max-width: var(--maxw); margin: 0 auto; padding: var(--s6) var(--s3) var(--s5);
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--s4);
}
.fcol h4 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .8px; color: var(--fg-3); margin-bottom: 14px; font-weight: 700; }
.fcol ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.fcol a { color: var(--fg-2); text-decoration: none; font-size: 14px; transition: color .14s var(--ease); }
.fcol a:hover { color: var(--primary-2); }
.brandcol .brand { margin-bottom: 14px; }
.brandcol p { color: var(--fg-3); font-size: 14px; max-width: 300px; margin: 0; }
.fbottom {
  max-width: var(--maxw); margin: 0 auto; padding: var(--s3) var(--s3) var(--s5);
  border-top: 1px solid var(--line);
}
.fbottom p { margin: 0 0 6px; font-size: 13px; color: var(--fg-3); }
.fbottom .fine { font-size: 12.5px; color: #9CA3AF; }

/* =============================================================== viewer */
/* Media lightbox stays dark regardless of theme: photos and video read
   best against a near-black surround. */

.viewer { position: fixed; inset: 0; z-index: 120; background: rgba(12, 9, 22, .96); display: flex; align-items: center; justify-content: center; }
.vprogress { position: absolute; top: 14px; left: 18px; right: 18px; display: flex; gap: 4px; z-index: 3; }
.vprogress i { flex: 1; height: 2.5px; border-radius: 2px; background: rgba(255,255,255,.22); overflow: hidden; }
.vprogress i b { display: block; height: 100%; width: 0; background: #fff; }
.vprogress i.done b { width: 100%; }
.vstage { max-width: min(94vw, 440px); max-height: 80vh; display: flex; align-items: center; }
.vstage img, .vstage video { max-width: 100%; max-height: 80vh; border-radius: var(--r-md); }
.vclose { position: absolute; top: 18px; right: 22px; z-index: 4; background: rgba(255,255,255,.08); border: 0; color: #fff; width: 40px; height: 40px; border-radius: 50%; font-size: 24px; cursor: pointer; line-height: 1; }
.vnav { background: rgba(255,255,255,.1); border: 0; color: #fff; width: 44px; height: 44px; border-radius: 50%; font-size: 24px; cursor: pointer; margin: 0 var(--s2); flex-shrink: 0; line-height: 1; transition: background .15s var(--ease); }
.vnav:hover { background: rgba(255,255,255,.2); }
.vbar { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s2) var(--s3); display: flex; align-items: center; gap: var(--s2); background: linear-gradient(transparent, rgba(0,0,0,.8)); }
.vinfo { flex: 1; min-width: 0; font-size: 13px; color: rgba(255,255,255,.65); }
.vinfo .cap { color: #fff; margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.vtools { display: flex; gap: 8px; }
.vtools .btn { background: rgba(255,255,255,.12); border-color: transparent; color: #fff; }
.vtools .btn.primary { background: var(--brand); }

/* ====================================================== viewer comments */
/* A panel beside the media, not over it: the point of the comment viewer is
   reading the thread while looking at the post. The viewer gets padding on
   the side the panel occupies, so the media re-centres in what is left
   rather than disappearing underneath. */

.viewer.hascomments { padding-right: 380px; }

.vcomments {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 5;
  width: 380px; display: flex; flex-direction: column;
  background: rgba(18, 14, 30, .97);
  border-left: 1px solid rgba(255, 255, 255, .1);
  animation: cslide .22s var(--ease);
}
@keyframes cslide { from { transform: translateX(28px); opacity: 0; } }

.vcomments header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid rgba(255, 255, 255, .1);
  color: #fff; font-size: 15px; flex-shrink: 0;
}
.vcomments header span { color: rgba(255, 255, 255, .5); font-weight: 500; margin-left: 4px; }
.ccl {
  background: rgba(255, 255, 255, .08); border: 0; color: #fff;
  width: 30px; height: 30px; border-radius: 50%; font-size: 20px;
  line-height: 1; cursor: pointer; flex-shrink: 0;
}
.ccl:hover { background: rgba(255, 255, 255, .18); }

.clist { flex: 1; overflow-y: auto; padding: 8px 18px 20px; }
.cload { padding: var(--s6) 0; }
.cempty { color: rgba(255, 255, 255, .55); font-size: 13.5px; padding: var(--s4) 0; line-height: 1.6; }

.crow { display: flex; gap: 11px; padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.crow:last-child { border-bottom: 0; }
.cav {
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
  flex-shrink: 0; background: rgba(255, 255, 255, .1);
}
.cbody { min-width: 0; flex: 1; }
.chead { display: flex; align-items: center; gap: 6px; }
.chead b { color: #fff; font-size: 13px; font-weight: 650; overflow-wrap: anywhere; }
.ctick {
  width: 11px; height: 11px; border-radius: 50%; background: var(--primary);
  position: relative; flex-shrink: 0;
}
.ctick::after {
  content: ""; position: absolute; left: 2.8px; top: 3.2px;
  width: 4px; height: 2px;
  border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff;
  transform: rotate(-45deg);
}
.cpin {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--primary-2); background: rgba(139, 141, 240, .18);
  padding: 2px 7px; border-radius: 999px;
}
.cbody p {
  margin: 4px 0 0; color: rgba(255, 255, 255, .88);
  font-size: 13.5px; line-height: 1.55; overflow-wrap: anywhere;
}
.cmeta { display: block; margin-top: 6px; font-size: 11.5px; color: rgba(255, 255, 255, .45); }

@media (max-width: 900px) {
  /* No room beside the media, so the panel becomes a sheet underneath it. */
  .viewer.hascomments { padding-right: 0; padding-bottom: 58vh; }
  .vcomments {
    top: auto; left: 0; height: 58vh; width: auto;
    border-left: 0; border-top: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    animation: csheet .22s var(--ease);
  }
  @keyframes csheet { from { transform: translateY(34px); opacity: 0; } }
}

/* ================================================================ admin */

.adminfab { position: fixed; right: 18px; bottom: 18px; z-index: 80; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; background: #fff; border: 1px solid var(--line-2); color: var(--fg-3); font-size: 18px; box-shadow: var(--shadow); }
.modal { position: fixed; inset: 0; z-index: 130; background: rgba(17, 24, 39, .5); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: var(--s3); }
.modalbox { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--s3); width: 100%; max-width: 520px; max-height: 88vh; overflow: auto; box-shadow: var(--shadow-lg); }
.modalbox h3 { font-size: 18px; margin-bottom: 10px; }
.muted { color: var(--fg-3); font-size: 13.5px; }
.infobox { background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--green); border-radius: var(--r-sm); padding: 12px 14px; margin: var(--s2) 0; }
.infobox b { display: block; font-size: 14px; word-break: break-all; }
.infobox span { font-size: 12.5px; color: var(--fg-3); }
.field { display: block; margin: var(--s2) 0; }
.field span { display: block; font-size: 13px; color: var(--fg-3); margin-bottom: 6px; }
.field input, .field select, .testrow input, .testrow select {
  width: 100%; background: var(--bg-2); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); padding: 10px 13px; outline: none;
}
.field input:focus, .field select:focus { border-color: var(--primary); }
.field input:disabled, .field select:disabled { opacity: .55; }
.testrow { display: flex; gap: 8px; margin-top: var(--s2); }
.testrow input { flex: 1; }
.testrow select { width: auto; }
.diag { margin-top: 12px; padding: 12px; background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--primary); border-radius: var(--r-sm); font-size: 11.5px; max-height: 210px; overflow: auto; white-space: pre-wrap; word-break: break-word; color: var(--fg-3); font-family: Consolas, monospace; }
.diag.ok { border-left-color: var(--green); }
.diag.err { border-left-color: var(--red); }
.modalactions { display: flex; gap: 8px; align-items: center; margin-top: var(--s3); }
.spacer { flex: 1; }

/* =============================================================== toasts */

.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 140; display: flex; flex-direction: column; gap: 9px; align-items: flex-end; }
.toast {
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--primary);
  padding: 12px 16px; border-radius: var(--r-sm); box-shadow: var(--shadow-lg);
  max-width: 320px; font-size: 13.5px; transition: opacity .3s var(--ease);
  animation: slidein .22s var(--ease);
}
.toast.ok { border-left-color: var(--green); }
.toast.err { border-left-color: var(--red); }
@keyframes slidein { from { opacity: 0; transform: translateX(16px); } }

/* =========================================================== responsive */

@media (max-width: 1040px) {
  .hero { gap: var(--s5); }
  .heroart { max-width: 360px; }
  .float.f1 { left: -6%; }
  .float.f2 { right: -4%; }
  .ddgrid { grid-template-columns: repeat(2, 1fr); }
  .fgrid { grid-template-columns: 1fr 1fr; gap: var(--s4); }
}

/* Below this a split hero squeezes both halves, so it stacks: the copy
   centres above the mock and the guide rows stop alternating sides. */
@media (max-width: 920px) {
  .hero {
    grid-template-columns: 1fr; gap: var(--s5);
    text-align: center; padding: var(--s5) 0 var(--s6);
  }
  .herocopy { max-width: 620px; margin: 0 auto; }
  .hero .sub,
  .hero .searchbox { max-width: 580px; margin-left: auto; margin-right: auto; }
  .hero .sub { margin-bottom: var(--s4); }
  .hero .hint { text-align: center; }
  .hero .trustrow, .hero .recent { justify-content: center; }
  .heroart { max-width: 390px; }
  .float.f1 { left: -2%; }
  .float.f2 { right: 0; }

  .gstep { grid-template-columns: 1fr; gap: var(--s4); }
  .gstep:nth-child(even) .gtext { order: 0; }
  .guide { gap: var(--s5); }
  .splitcols { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .statstrip { grid-template-columns: repeat(2, 1fr); gap: var(--s4) var(--s3); }
  .statstrip div + div::before { display: none; }
  .navtoggle { display: flex; }
  .themebtn { margin-left: auto; }
  .navtoggle { margin-left: 0; }
  .mainnav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--surface); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: var(--s2); max-height: calc(100vh - 68px); overflow-y: auto;
  }
  .mainnav.open { display: flex; }
  .navlink { justify-content: space-between; padding: 12px 14px; border-radius: var(--r-sm); }
  .hasdd { position: static; }
  .dropdown {
    position: static; width: auto; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; background: none; padding: 0 0 var(--s2);
    display: none;
  }
  .hasdd.open .dropdown { display: block; }
  .ddgrid { grid-template-columns: 1fr; gap: var(--s2); }
  .steps { grid-template-columns: 1fr; gap: var(--s3); }
  .steps li:not(:last-child)::after { display: none; }
  .sec { padding: var(--s6) 0; }
  .phmain { flex-direction: column; align-items: center; text-align: center; }
  .prow { justify-content: center; }
  .pbio { max-width: none; }
  .pactions { flex-direction: row; flex-wrap: wrap; justify-content: center; width: 100%; }
  .pactions .btn { width: auto; }
  .cardgrid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

  /* Bento stacks to one card per row, slightly smaller icons */
  .bento { grid-template-columns: 1fr; }
  .bicon { width: 62px; height: 62px; }
}

@media (max-width: 560px) {
  main { padding: 0 var(--s2) var(--s6); }
  .bar { padding: 12px var(--s2); }
  .sec { padding: var(--s6) 0; }
  .hero { padding-top: var(--s4); }
  .hero h1 { letter-spacing: -1px; }
  .hero .sub { font-size: 16.5px; }
  .heroart { max-width: 320px; }
  /* The floating chips have nowhere to float at this width. */
  .float { display: none; }
  .tabwrap { top: 58px; }
  .profilehead { padding: var(--s3); }
  .pavatar { width: 88px; height: 88px; }
  .pstats div { padding: 10px 8px; }
  .pstats b { font-size: 17px; }
  .pstats span { font-size: 10.5px; letter-spacing: .4px; }
  .figart { padding: 10px; border-radius: var(--r-md); }
  .prose.rich .gtext h3 { font-size: 18px; }
  .scol { padding: var(--s3); }

  /* Search becomes a stacked pill: input on top, then "@" and the CTA. */
  .searchbox { flex-wrap: wrap; padding: 8px 8px 8px 16px; border-radius: var(--r-lg); }
  .searchbox input { flex: 1 1 100%; order: 1; padding: 12px 0 4px; }
  .searchbox .sicon { display: none; }
  .searchbox .at { order: 2; margin-left: 0; }
  .searchbox .btn { order: 3; flex: 0 0 auto; margin-left: auto; }
  .searchbox .btn.primary { padding: 10px 18px; font-size: 14px; }

  .trustrow li { font-size: 12px; padding: 5px 10px; }

  /* 16px stops iOS Safari from auto-zooming the page when the field is focused */
  .searchbox input { font-size: 16px; }

  /* Lightbox: keep the arrows beside the media instead of pushing it wide,
     and let the bottom bar stack caption over the buttons when tight */
  .vstage { max-width: calc(100vw - 104px); }
  .vbar { flex-wrap: wrap; }
  .vtools { margin-left: auto; }
  .bcard { padding: 20px; border-radius: 20px; gap: 14px; }
  .bicon { width: 56px; height: 56px; margin-bottom: 14px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); }
  .grid.followers, .grid.following { grid-template-columns: 1fr; }
  .fgrid { grid-template-columns: 1fr; gap: var(--s3); }
  .cardgrid, .cardgrid.tight { grid-template-columns: 1fr; }
  .twrap { border-radius: var(--r-sm); }
  .prose.rich th, .prose.rich td { padding: 10px 11px; font-size: 13.5px; }
  .vnav { margin: 0 6px; width: 38px; height: 38px; }
  .toasts { left: 14px; right: 14px; align-items: stretch; }
  .toast { max-width: none; }
}

@media (max-width: 390px) {
  .hero h1 { font-size: 28px; }
  .pavatar { width: 80px; height: 80px; }
  .pstats { gap: 6px; }
  .statstrip b { font-size: 21px; }
  .prose.rich table { font-size: 13px; }
  .prose.rich th, .prose.rich td { padding: 9px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Uploaded photographs sit in the same frame as the diagrams, but fill it:
   a photo cropped to a consistent box reads as part of the page rather
   than something dropped into it. */
.figart.figphoto { padding: 0; }
.figart.figphoto img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }