/* Layout: a box of toys. Wordmark, one line of purpose, a legend made of the card's own parts,
   then a gallery of file cards. Tools sit on keycaps: agents light, model dark, standout yellow.
   The third card is you. Method and sources close the page. */
:root {
  color-scheme: light;
  --bg: #F4F0E7;
  --sheet: #FCFAF6;
  --base: #F6F2EA;
  --fg: #0E0D0A;
  --muted: #6E685C;
  --faint: #A8A194;
  --line: rgba(14, 13, 10, .1);
  --line-strong: rgba(14, 13, 10, .17);
  --hazard: #FFD400;
  --hazard-deep: #D9B300;
  --hazard-ink: #0E0D0A;
  --key: #FFFFFF;
  --key-skirt: #E4DED2;
  --mod: #24221D;
  --mod-skirt: #0E0D0A;
  --mod-fg: #F2EDE2;
  --skel: rgba(14, 13, 10, .06);
  --mark: rgba(255, 212, 0, .5);
  --scrim: rgba(14, 13, 10, .38);
  --a-orch: #C9DCF8; --a-pure: #D3EBBF; --a-swarm: #E0CFFA; --a-rules: #F9D3B4; --a-skep: #E2DFD8; --a-vibe: #F9C9DD; --a-tool: #BFE9DE; --a-ink: #22201B;
  --lift: 0 1px 0 rgba(14,13,10,.03), 0 12px 30px -14px rgba(14,13,10,.24);
  --brand: "Archivo Black", "Arial Black", sans-serif;
  --display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E0D0A; --sheet: #151410; --base: #110F0B; --fg: #F2EDE2; --muted: #9A9488; --faint: #5F5A50;
    --line: rgba(242, 237, 226, .09); --line-strong: rgba(242, 237, 226, .17);
    --key: #2A2822; --key-skirt: #0B0A08; --mod: #EDE7DA; --mod-skirt: #A9A293; --mod-fg: #0E0D0A;
    --skel: rgba(242, 237, 226, .06); --mark: rgba(255, 212, 0, .28); --scrim: rgba(0, 0, 0, .6);
    --a-orch: #1F3554; --a-pure: #263D1E; --a-swarm: #37265A; --a-rules: #4E2C15; --a-skep: #2E2C28; --a-vibe: #522237; --a-tool: #163F38; --a-ink: #EDE7DA;
    --lift: 0 1px 0 rgba(0,0,0,.4), 0 14px 34px -14px rgba(0,0,0,.8);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0E0D0A; --sheet: #151410; --base: #110F0B; --fg: #F2EDE2; --muted: #9A9488; --faint: #5F5A50;
  --line: rgba(242, 237, 226, .09); --line-strong: rgba(242, 237, 226, .17);
  --key: #2A2822; --key-skirt: #0B0A08; --mod: #EDE7DA; --mod-skirt: #A9A293; --mod-fg: #0E0D0A;
  --skel: rgba(242, 237, 226, .06); --mark: rgba(255, 212, 0, .28); --scrim: rgba(0, 0, 0, .6);
    --a-orch: #1F3554; --a-pure: #263D1E; --a-swarm: #37265A; --a-rules: #4E2C15; --a-skep: #2E2C28; --a-vibe: #522237; --a-tool: #163F38; --a-ink: #EDE7DA;
  --lift: 0 1px 0 rgba(0,0,0,.4), 0 14px 34px -14px rgba(0,0,0,.8);
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* the page owns these resets (the artifact preview adds them too, the real site doesn't) */
html, body { margin: 0; }
[hidden] { display: none !important; }
img { max-width: 100%; }
body { background: var(--bg); color: var(--fg); font: 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; padding-inline: 16px; }
body.locked { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--hazard); outline-offset: 2px; border-radius: 4px; }
.wrap { max-width: 1200px; margin: 0 auto; }

/* ---------- masthead ---------- */
.masthead { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 22px; }
.wordmark { display: inline-flex; align-items: center; gap: .55em; font: 400 19px/1 var(--brand); letter-spacing: -.065em; }
.wordmark svg { width: 1.7em; height: 1.7em; fill: currentColor; }
.mast { display: inline-flex; align-items: center; gap: 10px; line-height: 1; }
.mast svg { width: 22px; height: 27px; fill: var(--muted); }
.mast .org { font: 400 12px/1 var(--brand); letter-spacing: -.04em; color: var(--muted); }
.mast .sl { font: 400 22px/1 var(--mono); color: var(--faint); margin: 0 -2px; }
.mast .sect { font: 400 27px/1 var(--brand); letter-spacing: -.055em; color: var(--fg); }
.mast .by { font: 400 12px/1 var(--mono); color: var(--faint); align-self: flex-end; padding-bottom: 3px; }
.theme { display: inline-flex; gap: 6px; align-items: center; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; font: 500 11px/1 var(--mono); color: var(--muted); }
.theme:hover { color: var(--fg); border-color: var(--line-strong); }

/* ---------- intro: one line + legend ---------- */
.intro { padding-block: 30px 24px; display: grid; gap: 18px; }
.lede { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px 48px; align-items: end; }
.hww { display: grid; gap: 9px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.hww > div { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; }
.hww .k { font: 500 10.5px/21px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.hww a { color: var(--fg); font-weight: 500; text-decoration: none; }
.hww a:hover { text-decoration: underline; text-underline-offset: 3px; }
.lede .sub { margin: 12px 0 0; color: var(--muted); font-size: 15px; }
.note { margin: 0; padding: 0 0 2px 16px; border-left: 2px solid var(--hazard); font-size: 13px; line-height: 1.55; color: var(--muted); }
.note span { display: block; margin-top: 6px; font: 400 11.5px/1 var(--mono); color: var(--faint); }
.note a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
@media (max-width: 900px) { .lede { grid-template-columns: 1fr; } }
.end { display: grid; gap: 40px; padding-block: 40px 64px; border-top: 1px solid var(--line); }
.eb h3 { margin: 0 0 14px; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.note2 { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rbar { margin-top: 18px; }
.rbar .bars { display: flex; height: 34px; border-radius: 8px; overflow: hidden; }
.rbar .bars span { display: flex; align-items: center; padding: 0 8px; font: 500 11px/1 var(--mono); white-space: nowrap; overflow: hidden; }
.rbar .lab { display: block; margin-bottom: 8px; font-size: 13.5px; color: var(--fg); font-weight: 500; }
.rbar .rkey { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.rbar .rkey i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.styles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sty { display: grid; gap: 5px; padding: 12px 14px; border-radius: 12px; background: var(--a); color: var(--a-ink); text-align: left; transition: transform .15s; }
.sty:hover { transform: translateY(-2px); }
.sty[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--a-ink); }
.sty b { font: 600 15px/1.1 var(--sans); }
.sty b i { font-style: normal; opacity: .7; margin-right: 6px; }
.sty span { font-size: 13px; opacity: .85; }
.sty small { font: 500 11px/1 var(--mono); opacity: .7; }
@media (max-width: 900px) { .styles { grid-template-columns: 1fr 1fr; } }
.fact { display: grid; gap: 6px; padding: 14px 16px; text-align: left; border-radius: 12px; background: var(--sheet); transition: box-shadow .15s; }
.fact .tg { font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.fact.rv .tg { color: var(--hazard-deep); }
.fact:hover { box-shadow: inset 0 0 0 1px var(--line-strong); background: var(--sheet); }
.fact[aria-pressed="true"] { background: var(--sheet); box-shadow: inset 0 0 0 1.5px var(--fg); }
.fact b { font: 900 44px/.9 var(--display); }
.fact b small { font: 500 13px/1 var(--mono); color: var(--faint); margin-left: 4px; }
.fact span:last-child { font-size: 14.5px; line-height: 1.4; color: var(--fg); }
@media (max-width: 900px) { .facts { grid-template-columns: 1fr; } }
.intro h1 { margin: 0; max-width: 30ch; font: 900 40px/1.04 var(--display); text-transform: uppercase; letter-spacing: .003em; text-wrap: balance; }
.intro h1 em { font-style: normal; background: var(--hazard); color: var(--hazard-ink); padding: .02em .14em 0; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.legend { justify-self: start; max-width: 100%; }
.legend .tab { background: var(--bg); border-style: dashed; }
.legend .lsheet { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; padding: 14px 18px; border: 1px dashed var(--line-strong); border-radius: 12px; font-size: 13px; color: var(--muted); }
.legend .le { display: inline-flex; align-items: center; gap: 9px; }
.legend .le.star { color: var(--fg); font-weight: 500; }
.legend .ico { display: inline-flex; align-items: center; gap: 5px; font: 400 11.5px/1 var(--mono); color: var(--muted); }
.legend .mtabs { display: inline-flex; gap: 2px; }
.legend .mtabs .tab { height: 18px; padding: 0 6px; border: 0; border-radius: 5px 5px 0 0; font-size: 10px; }
.legend .mtabs .tab b { font-size: 10px; }
.legend .fresh { font-size: 11.5px; }

.filters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-bottom: 22px; }
.fchip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 13px; transition: background .15s, border-color .15s; }
.fchip:hover { background: color-mix(in srgb, var(--fg) 4%, transparent); }
.fchip[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.fchip svg { width: 14px; height: 14px; flex: none; }
.fchip .n { font: 400 11px/1 var(--mono); color: var(--faint); }
.fchip[aria-pressed="true"] .n { color: color-mix(in srgb, var(--bg) 60%, transparent); }
.filters .sep { width: 1px; height: 18px; background: var(--line-strong); margin-inline: 4px; }
.spill { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 5px 0 11px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--muted); font-size: 12.5px; }
.spill:hover { color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.spill svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.spill kbd { font: 500 10.5px/1 var(--mono); padding: 3px 6px 4px; border-radius: 5px; background: var(--key); box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 -2px 0 var(--key-skirt); color: var(--fg); }
.pal { width: min(600px, 100%); margin-top: 6vh; border-radius: 14px; background: var(--sheet); box-shadow: 0 30px 80px -20px rgba(0,0,0,.45), 0 0 0 1px var(--line-strong); overflow: hidden; }
.pal .in { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.pal .in svg { width: 17px; height: 17px; fill: none; stroke: var(--muted); stroke-width: 1.6; flex: none; }
.pal input { flex: 1; min-width: 0; height: 54px; border: 0; background: transparent; color: var(--fg); font: 400 16px/1 var(--sans); outline: none; }
.pal .in kbd { font: 500 10.5px/1 var(--mono); color: var(--faint); }
.pal .res { max-height: 60vh; overflow-y: auto; padding: 6px; display: grid; gap: 1px; }
.pal .hit { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 8px; text-align: left; font-size: 14px; }
.pal .hit .av { width: 28px; height: 28px; font-size: 11px; }
.pal .hit > svg { width: 16px; height: 16px; margin: 0 6px; fill: none; stroke: var(--muted); stroke-width: 1.6; flex: none; }
.pal .hit small { margin-left: auto; padding-left: 12px; font: 400 11.5px/1.3 var(--mono); color: var(--faint); text-align: right; max-width: 58%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal .hit.on, .pal .hit:hover { background: color-mix(in srgb, var(--hazard) 20%, transparent); }
.pal .grp { padding: 10px 10px 4px; font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.pal .empty { padding: 18px 12px; color: var(--muted); font-size: 13.5px; }
.filters { flex-wrap: nowrap; }
.filters .views { flex: none; }
.fscroll { flex: 1; min-width: 0; display: flex; gap: 6px; align-items: center; overflow-x: auto; scrollbar-width: none; padding: 2px 24px 2px 2px;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
.fscroll::-webkit-scrollbar { display: none; }
.fscroll .fchip { flex: none; }
.filters .spill { flex: none; }
.views .vn { margin-left: 6px; font: 400 11px/1 var(--mono); color: var(--faint); }

.grid[hidden], .steal[hidden] { display: none; }
/* masonry: each card keeps its own height and spans as many 2px rows as it needs (set from JS by measuring it);
   grid auto-placement then drops every next card into the column that frees up first, so reading order stays roughly row by row */
.grid { --gy: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gy) 22px; align-items: start; padding-bottom: 56px; }
.grid.masonry { grid-auto-rows: 2px; row-gap: 0; }
/* first paint from the build's prerender (taken 1440px wide): its spans hold wherever the grid is its full 1200px;
   narrower screens show a plain grid until the app measures (a scrollbar can take up to 18px, hence 1250) */
@media (min-width: 1250px) {
  .grid.pre:not(.masonry) { grid-auto-rows: 2px; row-gap: 0; }
  .grid.pre:not(.masonry) > * { grid-row-end: span var(--span, 1); }
  .grid.pre:not(.masonry) > .you { min-height: var(--you-h, 0); }
}
@media (max-width: 1020px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 660px) { .grid { grid-template-columns: minmax(0, 1fr); } .filters { flex-wrap: wrap; } .filters .views { order: 1; } .filters .spill { order: 2; margin-left: auto; } .fscroll { order: 3; flex-basis: 100%; } .intro h1 { font-size: 36px; } }
.empty { grid-column: 1 / -1; padding: 40px 0; color: var(--muted); text-align: center; }
.fade {
  position: fixed; left: 0; right: 0; bottom: 0; height: 110px; pointer-events: none; z-index: 5;
  background: linear-gradient(to bottom, transparent, var(--bg) 92%);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 70%); mask-image: linear-gradient(to bottom, transparent, #000 70%);
}

/* view toggle */
.views { display: inline-flex; padding: 3px; gap: 2px; border-radius: 9px; background: var(--base); box-shadow: inset 0 0 0 1px var(--line); margin-right: 6px; }
.views button { height: 24px; padding: 0 10px; border-radius: 6px; font-size: 12.5px; color: var(--muted); }
.views button[aria-pressed="true"] { background: var(--key); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 -2px 0 var(--key-skirt); }
.views button .y { display: inline-block; width: 7px; height: 7px; border-radius: 2px; background: var(--hazard); margin-right: 6px; vertical-align: 0; }

/* steal list: every yellow key in one place */
.steal { display: grid; padding-bottom: 56px; }
.st { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px 4px; border-top: 1px solid var(--line); }
.st:last-child { border-bottom: 1px solid var(--line); }
.st .what { display: flex; align-items: center; gap: 10px; min-width: 0; }
.st .what .key { flex: none; max-width: 100%; overflow: hidden; }
.st .cap { font-size: 13.5px; color: var(--fg); min-width: 0; }
.st .cap small { display: block; font-size: 12.5px; color: var(--muted); }
.st .by { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--muted); cursor: pointer; }
.st .by .av { width: 24px; height: 24px; font-size: 10px; }
.st .by span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st .by:hover span:last-child { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.st .act { display: flex; align-items: center; gap: 12px; }
@media (max-width: 760px) { .st { grid-template-columns: minmax(0, 1fr) auto; } .st .cap { grid-column: 1 / -1; grid-row: 2; } .st .by { grid-row: 3; } }

/* method: how it is made, plainly */
.method { display: grid; grid-template-columns: 140px minmax(0, 62ch); gap: 8px 24px; font-size: 13.5px; color: var(--muted); }
.method p { margin: 0; }
.method b { color: var(--fg); font-weight: 500; }
@media (max-width: 660px) { .method { grid-template-columns: 1fr; } }

/* ---------- folder tabs ---------- */
.tabs { display: flex; align-items: flex-end; gap: 2px; }
.tab {
  position: relative; z-index: 2; margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px;
  background: var(--sheet); border: 1px solid var(--line-strong); border-bottom: 0; border-radius: 7px 7px 0 0;
  font: 500 10px/1 var(--mono); letter-spacing: .07em; color: var(--muted);
}
.tab i { width: 5px; height: 5px; border-radius: 1px; background: var(--hazard); }
.tab.arch {
  --a: var(--a-skep);
  padding: 0 10px 0 9px; gap: 5px; border-color: var(--line-strong);
  background: var(--a); color: var(--a-ink); letter-spacing: .01em; font-weight: 400;
  box-shadow: inset 0 -5px 6px -5px rgba(14, 13, 10, .18);
  transition: transform .2s ease;
}
.tab.arch b { font: 500 11px/1 var(--sans); opacity: .7; }
.tab.me { background: var(--fg); color: var(--bg); border-color: var(--fg); z-index: 3; }
.tab.arch.orch { --a: var(--a-orch); } .tab.arch.pure { --a: var(--a-pure); } .tab.arch.swarm { --a: var(--a-swarm); }
.tab.arch.rules { --a: var(--a-rules); } .tab.arch.skep { --a: var(--a-skep); } .tab.arch.vibe { --a: var(--a-vibe); } .tab.arch.tool { --a: var(--a-tool); }

/* ---------- keycaps ---------- */
.keys { display: flex; align-items: flex-end; gap: 6px; flex-wrap: wrap; min-width: 0; }
.keys .gap { width: 6px; }
.key {
  --k: var(--key); --ks: var(--key-skirt); --kf: var(--fg);
  position: relative; display: inline-flex; flex-direction: column; justify-content: space-between;
  height: 48px; min-width: 50px; padding: 7px 9px 9px; border-radius: 8px;
  background: var(--k); color: var(--kf);
  box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 -4px 0 var(--ks), 0 1px 0 var(--line);
  transition: transform .18s cubic-bezier(.3, 1.6, .5, 1), box-shadow .18s;
}
.key svg { width: 17px; height: 17px; display: block; }
.key .lgd { font: 500 10.5px/1 var(--mono); letter-spacing: -.01em; white-space: nowrap; }
.key svg.own { opacity: .7; }
.key .sub { position: absolute; top: 6px; right: 7px; font: 500 8.5px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; opacity: .55; }
.key .sub .chg { color: var(--hazard-deep); margin-left: 2px; font-size: 10px; }
.key.mod .sub .chg { color: var(--hazard); }
.key:has(.sub) { min-width: 64px; }
.inf { font: 400 9.5px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--faint); border: 1px dashed var(--line-strong); border-radius: 4px; padding: 2px 4px; margin-right: 6px; vertical-align: 1px; }
.key.mod { --k: var(--mod); --ks: var(--mod-skirt); --kf: var(--mod-fg); }
.key.acc { --k: var(--hazard); --ks: var(--hazard-deep); --kf: var(--hazard-ink); box-shadow: inset 0 -4px 0 var(--ks), 0 1px 0 var(--line); }
.key.mini { height: 26px; min-width: 0; padding: 0 9px 3px; flex-direction: row; align-items: center; gap: 6px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 -3px 0 var(--ks), 0 1px 0 var(--line); }
.key.mini.acc { box-shadow: inset 0 -3px 0 var(--ks), 0 1px 0 var(--line); }
.key.mini svg { width: 13px; height: 13px; }
.key.mini .lgd { font-size: 11px; }
.key.tiny { height: 20px; min-width: 20px; padding: 0 6px 2px; flex-direction: row; align-items: center; justify-content: center; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 -2px 0 var(--ks); }
.key.tiny.acc { box-shadow: inset 0 -2px 0 var(--ks); }
@media (hover: hover) {
  .card:hover .key { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 -5px 0 var(--ks), 0 3px 6px -3px rgba(14,13,10,.25); }
  .card:hover .key.acc { box-shadow: inset 0 -4px 0 var(--ks), 0 3px 6px -3px rgba(14,13,10,.25); }
  .card:hover .key:nth-child(2) { transition-delay: .03s; }
  .card:hover .key:nth-child(3) { transition-delay: .06s; }
  .card:hover .key:nth-child(4) { transition-delay: .09s; }
  .card:hover .key:nth-child(5) { transition-delay: .12s; }
}
.card:active .key { transform: translateY(1px); transition-duration: .06s; }

/* ---------- card ---------- */
.card { position: relative; min-width: 0; display: flex; flex-direction: column; width: 100%; text-align: left; cursor: pointer; }
.card > .sheet { flex: 1; display: flex; flex-direction: column; }
.card .deck { flex: 1; }
.card:hover .arch { transform: translateY(-2px); }
.sheet {
  position: relative; z-index: 1; background: var(--sheet);
  border: 1px solid var(--line-strong); border-radius: 0 12px 12px 12px;
  transition: box-shadow .2s, border-color .2s, background .2s;
}
.card:hover .sheet, .card:focus-visible .sheet { box-shadow: var(--lift); }
/* borderless cards: the fill and the index tab carry the shape */
.card:not(.you):not(.skel) > .sheet, .card:not(.you):not(.skel) .tab, .file > .sheet, .file .tab { border-color: transparent; }
.card:focus-visible { outline: none; }

.who { display: flex; align-items: center; gap: 12px; padding: 16px 14px 0 16px; }
.av { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; overflow: hidden; background: var(--skel); box-shadow: 0 0 0 1px var(--line); font: 600 15px/1 var(--sans); color: var(--muted); }
.av img { width: 100%; height: 100%; display: block; }
.who .id { flex: 1; min-width: 0; }
.who .name { font: 600 16px/1.2 var(--sans); letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who .known { margin-top: 2px; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.socials { display: flex; align-self: flex-start; margin: -4px -4px 0 0; }
.socials a { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; color: var(--faint); transition: color .15s, background .15s; }
.socials a:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 6%, transparent); }
.socials svg { width: 14px; height: 14px; fill: currentColor; }

.deck { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 16px; }
.nums { display: grid; gap: 5px; justify-items: end; font: 400 11.5px/1 var(--mono); color: var(--muted); white-space: nowrap; padding-bottom: 3px; }
.nums b { font-weight: 500; color: var(--fg); }
.nums[hidden] { display: none; }
.nums span { display: inline-flex; align-items: center; gap: 6px; max-width: 112px; white-space: normal; text-align: right; line-height: 1.25; }
.nums svg { flex: none; }
.nums svg, .ico svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }

.strip {
  display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 46px; padding: 9px 14px 10px 12px;
  border-top: 1px solid var(--line); background: var(--base); border-radius: 0 0 11px 11px;
  font-size: 13px; color: var(--muted);
}
.strip .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fresh { display: inline-flex; align-items: center; gap: 6px; font: 400 11px/1 var(--mono); color: var(--faint); white-space: nowrap; }
.fresh::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--hazard); box-sizing: border-box; }
.fresh.aging::before { background: transparent; border: 1.5px solid var(--faint); }
.fresh.stale { color: var(--muted); }
.fresh.stale::before { background: transparent; border: 1.5px dashed var(--faint); }

/* ---------- the "You?" card: bright yellow, few words ---------- */
.you .tab { background: var(--hazard); border-color: var(--hazard-deep); color: var(--hazard-ink); }
.you .tab i { background: var(--hazard-ink); }
.you .sheet { background: var(--hazard); border-color: var(--hazard-deep); color: var(--hazard-ink); }
.card.you:hover .sheet, .card.you:focus-visible .sheet { border-color: var(--hazard-deep); box-shadow: 0 14px 30px -14px rgba(120, 95, 0, .6); }
.youbody { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding: 18px 18px 16px; }
.you h3 { margin: 0; font: 900 50px/.85 var(--display); text-transform: uppercase; letter-spacing: .005em; }
.you h3.sm { font-size: 31px; line-height: .92; text-wrap: balance; }
.you p { margin: 8px 0 0; font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
.you .go { display: flex; align-items: center; gap: 14px; }
.btn.ink { height: 40px; padding: 0 16px 3px; font-size: 14px; background: var(--hazard-ink); color: var(--hazard); box-shadow: inset 0 -3px 0 #000; }
.btn.ink svg { width: 14px; height: 14px; }
.btn.ink.sq { width: 40px; padding: 0 0 3px; justify-content: center; }
.you .fine { margin: 10px 0 0; font-size: 12px; opacity: .72; }
.you .how { font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(14, 13, 10, .35); cursor: pointer; }
.pastein { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border-radius: 8px; border: 1px solid rgba(14, 13, 10, .28); background: rgba(255, 255, 255, .5); color: var(--hazard-ink); font: 400 12px/1 var(--mono); }
.pastein::placeholder { color: rgba(14, 13, 10, .55); }
.pastein:focus { outline: 2px solid var(--hazard-ink); outline-offset: 1px; }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--hazard-ink); animation: dot 1.2s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--hazard); flex: none; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(.6); opacity: .5; } }
.linkish { color: var(--fg); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; cursor: pointer; white-space: nowrap; }

/* ---------- modal shell ---------- */
.scrim { position: fixed; inset: 0; z-index: 50; background: var(--scrim); display: grid; place-items: start center; overflow-y: auto; padding: 48px 16px 40px; opacity: 0; transition: opacity .18s ease; }
.scrim.on { opacity: 1; }
.file { width: min(560px, 100%); transform: translateY(8px); transition: transform .22s ease; }
.scrim.on .file { transform: none; }
.file .sheet { box-shadow: 0 30px 80px -20px rgba(0,0,0,.45); cursor: auto; }
.file .who { padding: 18px 18px 0 18px; }
.file .av { width: 48px; height: 48px; }
.file .who .name { font-size: 19px; letter-spacing: -.02em; }
.file .socials { margin: 0 32px 0 0; }
.close { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: var(--muted); z-index: 3; }
.close:hover { background: color-mix(in srgb, var(--fg) 6%, transparent); color: var(--fg); }
.file .deck { padding: 14px 18px 4px; align-items: center; }
.file .deck .why { font-size: 12.5px; color: var(--muted); max-width: 30ch; text-align: right; }

.file.wide { width: min(960px, 100%); }
.dv { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.dl { padding-bottom: 20px; border-right: 1px solid var(--line); min-width: 0; }
.dr { display: flex; flex-direction: column; min-width: 0; }
.dr .rows { flex: 1; padding: 44px 18px 8px; }
.dr .foot { border-radius: 0 0 11px 0; }
.file .why { margin: 4px 18px 0; font-size: 13px; color: var(--muted); }
.take { margin: 18px 18px 0; padding: 16px 16px 14px; border-radius: 12px; background: color-mix(in srgb, var(--hazard) 13%, var(--sheet)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hazard-deep) 40%, transparent); }
.take h3 { margin: 0 0 10px; font: 600 15px/1.25 var(--sans); letter-spacing: -.01em; }
.take-k { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.take p { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.take-p { margin: 12px 0 0; padding: 12px 14px; max-height: 190px; overflow: auto; border-radius: 9px; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--line); font: 400 11.5px/1.6 var(--mono); white-space: pre-wrap; word-break: break-word; color: var(--fg); }
.take-a { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.take-a .hint { font-size: 12px; color: var(--muted); }
.file .sig { margin: 18px 18px 0; padding: 0; border: 0; display: grid; gap: 6px; }
@media (max-width: 760px) { .dv { grid-template-columns: 1fr; } .dl { border-right: 0; border-bottom: 1px solid var(--line); } .dr .foot { border-radius: 0 0 11px 11px; } }
/* full file */
.rows { padding: 6px 18px 0; }
.row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; column-gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.row:first-child { border-top: 0; }
.k { font: 400 10.5px/20px var(--mono); color: var(--faint); }
.row .v { font-size: 14px; line-height: 20px; min-width: 0; }
.row .v strong { font-weight: 600; letter-spacing: -.01em; }
.row .v .sub { color: var(--muted); font-size: 12.5px; margin-left: 6px; }
.src { font: 400 10.5px/20px var(--mono); color: var(--faint); white-space: nowrap; }
.src:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.rc { grid-column: 2 / -1; margin-top: 3px; cursor: pointer; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.rc .q { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.rc mark { background: var(--mark); color: var(--fg); padding: 0 2px; border-radius: 2px; }
.rc .was { display: flex; gap: 6px; align-items: baseline; margin-top: 3px; font: 400 11px/1.5 var(--mono); color: var(--faint); }
.rc .was .bf { padding: 1px 5px; border-radius: 4px; background: color-mix(in srgb, var(--fg) 5%, transparent); font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; }
.rc .was .wq { display: none; font: 400 12px/1.5 var(--sans); color: var(--muted); }
.rc .was a:hover { color: var(--fg); }
.rc.open .q { -webkit-line-clamp: unset; }
.rc.open .was { flex-wrap: wrap; }
.rc.open .was .wq { display: block; flex-basis: 100%; }
.rc:hover .q { color: var(--fg); }
.specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 18px; border-top: 1px solid var(--line); }
.spec { padding: 9px 12px 10px 12px; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; border-left: 1px solid var(--line); }
.spec:nth-child(3n+1) { padding-left: 0; border-left: 0; }
.spec:nth-child(n+4) { border-top: 1px solid var(--line); }
.spec .v { grid-column: 1 / -1; font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spec .rc { grid-column: 1 / -1; }
.spec .rc:not(.open) .was { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skills { margin: 0 18px; padding: 9px 0 10px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 12px; }
.cloud { position: relative; display: flex; flex-wrap: wrap; gap: 4px; max-height: 44px; overflow: hidden; }
.cloud.open { max-height: none; }
.cloud span, .cloud button { font: 400 10.5px/1 var(--mono); padding: 4px 6px; border-radius: 4px; background: color-mix(in srgb, var(--fg) 6%, transparent); color: var(--muted); }
.cloud span.f { background: var(--hazard); color: var(--hazard-ink); }
.cloud button { background: none; color: var(--fg); text-decoration: underline dotted; text-underline-offset: 3px; }
.sig { margin: 0 18px; padding: 12px 0 14px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sig blockquote { margin: 0; font: 500 16px/1.35 var(--sans); letter-spacing: -.01em; text-wrap: balance; }
.foot { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 18px; border-top: 1px solid var(--line); background: var(--base); border-radius: 0 0 11px 11px; font: 400 11px/1.4 var(--mono); color: var(--muted); }
.foot b { font-weight: 500; color: var(--fg); }
.foot .note { color: var(--faint); }
.foot .note a, .method a.mail { color: var(--fg); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }

/* connect + result panels */
.panel { padding: 22px 22px 20px; display: grid; gap: 16px; }
.panel h2 { margin: 0; font: 600 19px/1.2 var(--sans); letter-spacing: -.02em; }
.panel p { margin: 0; color: var(--muted); font-size: 13.5px; }
.steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: s; }
.steps li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 13.5px; }
.steps li::before { counter-increment: s; content: counter(s); width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font: 500 11px/1 var(--mono); background: var(--key); box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 -2px 0 var(--key-skirt); }
.steps li span { padding-top: 1px; }
.steps li small { display: block; color: var(--muted); font-size: 12.5px; }
.prompt.big { margin: 0; padding: 10px 8px 10px 14px; }
.instr { border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line-strong); overflow: hidden; }
.instr-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 14px; background: var(--base); border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.prompt-full { margin: 0; max-height: 240px; overflow: auto; padding: 12px 14px; font: 400 11.5px/1.6 var(--mono); white-space: pre-wrap; color: var(--fg); background: var(--sheet); }
.prompt.big code { white-space: normal; font-size: 12.5px; }
.trust { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; font-size: 12.5px; }
.trust > div { padding: 10px 12px; display: grid; gap: 4px; align-content: start; }
.trust > div + div { border-left: 1px solid var(--line); }
.trust .k { line-height: 1.2; }
.trust ul { margin: 0; padding-left: 16px; color: var(--muted); }
details.read { border-top: 1px solid var(--line); padding-top: 12px; font-size: 12.5px; color: var(--muted); }
details.read summary { cursor: pointer; color: var(--fg); }
details.read pre { margin: 10px 0 0; max-height: 260px; overflow: auto; padding: 12px; border-radius: 8px; background: var(--base); font: 400 11px/1.55 var(--mono); white-space: pre-wrap; color: var(--fg); }
.wait { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--hazard); color: var(--hazard-ink); font-size: 13px; flex-wrap: wrap; }
.wait code { font: 500 12px/1 var(--mono); }
.wait .sim { margin-left: auto; font: 400 11px/1 var(--mono); color: var(--hazard-ink); text-decoration: underline dotted; text-underline-offset: 3px; }
.btn { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 3px; border-radius: 7px; font: 500 12.5px/1 var(--sans); background: var(--key); box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 -3px 0 var(--key-skirt); transition: transform .1s; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn.acc { background: var(--hazard); color: var(--hazard-ink); box-shadow: inset 0 -3px 0 var(--hazard-deep); }
.btn svg { width: 13px; height: 13px; fill: currentColor; }
.row-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ex { font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 4px 6px; border-radius: 4px; background: var(--base); box-shadow: inset 0 0 0 1px var(--line); }
.tips { display: grid; gap: 9px; margin: 6px 0 0; padding: 0; list-style: none; }
.tips li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 13.5px; padding: 8px 0; border-top: 1px solid var(--line); }
.tips li .linkish { font-size: inherit; }
.picks .pk-h { margin: 0; font: 600 16px/1.3 var(--sans); color: var(--fg); }
.picks .pk-p { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); }
.tips li b { font-weight: 600; }
.tips li small { display: block; color: var(--muted); font-size: 12.5px; }
.result-card { width: min(386px, 100%); }
.linkline { display: block; font: 400 11px/1.5 var(--mono); color: var(--faint); word-break: break-all; }

/* share image preview, 1200 x 630 scaled to fit */
.og-box { position: relative; width: 100%; aspect-ratio: 1200 / 630; margin-top: 6px; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.og-box > .og { position: absolute; left: 0; top: 0; width: 1200px; height: 630px; transform-origin: 0 0; }   /* holds the 1200x630 share scene (share.addon), scaled to the box */

@media (max-width: 520px) {
  .row { grid-template-columns: minmax(0, 1fr) auto; }
  .row .k { grid-column: 1 / -1; line-height: 1.4; }
  .rc { grid-column: 1 / -1; }
  .specs { grid-template-columns: 1fr; }
  .spec { padding-left: 0; border-left: 0; }
  .spec + .spec { border-top: 1px solid var(--line); }
  .skills { grid-template-columns: 1fr; }
  .file .deck .why { display: none; }
  .trust { grid-template-columns: 1fr; }
  .trust > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .scrim { padding-top: 20px; }
}
@media (prefers-reduced-motion: reduce) { .sheet, .tab.arch, .scrim, .file, .key { transition: none; } .pulse, .dots i { animation: none; } }


/* Seven card variants built from the round-2 feedback: tab or chip for style, big face, why-listen line,
   chips for agents / model / harness, 1-3 person-specific facts, V1-style yellow ending. */
.xv { --r: 14px; position: relative; display: flex; flex-direction: column; min-width: 0; font-family: var(--sans); color: var(--fg); }
.xv .sh { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; background: var(--sheet); border-radius: 0 var(--r) var(--r) var(--r); overflow: hidden; }
.xv.chipin .sh { border-radius: var(--r); }
.xv .tabs .tab { border-color: transparent; }
.xv .fc { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; flex: none; background: var(--skel); box-shadow: 0 0 0 1px var(--line); }
.xv .fc img { width: 100%; height: 100%; display: block; }
.xv .nm { font: 600 18px/1.15 var(--sans); letter-spacing: -.02em; }
.xv .kf { margin-top: 3px; font-size: 13px; line-height: 1.35; color: var(--muted); }
.xv .so { display: flex; gap: 2px; margin-left: auto; align-self: flex-start; color: var(--faint); }
.xv .so i { width: 24px; height: 24px; display: grid; place-items: center; }
.xv .so svg { width: 13px; height: 13px; fill: currentColor; }
.xv .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.xv .cp { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px 2px 7px; border-radius: 7px; background: var(--key); box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 -2px 0 var(--key-skirt); font: 500 12.5px/1 var(--mono); white-space: nowrap; }
.xv .cp svg { width: 15px; height: 15px; flex: none; }
.xv .cp small { font: 500 9px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; opacity: .55; }
.xv .cp.m { background: var(--mod); color: var(--mod-fg); box-shadow: inset 0 -2px 0 var(--mod-skirt); }
.xv .cp.h { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--muted); }
.xv .cp .chg { color: var(--hazard-deep); font-size: 11px; }
.xv .fx { display: flex; flex-wrap: wrap; gap: 6px 14px; font: 400 12px/1.2 var(--mono); color: var(--muted); }
.xv .fx span { display: inline-flex; align-items: center; gap: 6px; }
.xv .fx svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.xv .fx b { color: var(--fg); font-weight: 500; }
.xv .yf { margin-top: auto; padding: 14px 16px 16px; background: var(--hazard); color: var(--hazard-ink); display: grid; gap: 5px; }
.xv .yf small { font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.xv .yf p { margin: 0; font: 400 15px/1.4 var(--sans); }
.xv .yf b { font: 600 15.5px/1.3 var(--mono); }
.xv .sc { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--a); color: var(--a-ink); font: 500 11px/1 var(--mono); white-space: nowrap; }

/* X1 folder classic+ */
.x1 .hd { display: flex; gap: 14px; align-items: center; padding: 16px 16px 0; }
.x1 .bd { display: grid; gap: 12px; padding: 14px 16px 16px; }
.x1b .bd { flex: 1; align-content: space-between; }
.x1b .fx.three { display: grid; grid-template-columns: minmax(0, auto) minmax(0, auto) minmax(max-content, 1fr); gap: 0; padding-top: 10px; border-top: 1px dashed var(--line-strong); }
.x1b .fx.three span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x1b .fx.three span + span { padding-left: 10px; border-left: 1px solid var(--line); }
.x1b .fx.three > span:not(:last-child) { padding-right: 10px; }
.x1b .fx.three > span:last-child { justify-content: flex-end; }
.xv .agecell { display: inline-flex; align-items: center; gap: 6px; color: var(--faint); }
.xv .agecell::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--hazard); }
.xv .agecell.aging::before { background: transparent; border: 1.5px solid var(--faint); }
/* X2 portrait */
.x2 .sh { text-align: center; }
.x2 .sc { position: absolute; top: 12px; left: 12px; }
.x2 .so { position: absolute; top: 10px; right: 10px; }
.x2 .fc { width: 84px; height: 84px; margin: 22px auto 0; box-shadow: 0 0 0 4px var(--sheet), 0 0 0 5px var(--a); }
.x2 .who { padding: 12px 18px 0; }
.x2 .bd { display: grid; gap: 12px; justify-items: center; padding: 14px 16px 18px; }
.x2 .chips, .x2 .fx { justify-content: center; }
.x2 .yf { text-align: center; }
/* X3 stack line */
.x3 .hd { display: flex; gap: 14px; align-items: center; padding: 16px 16px 0; }
.x3 .bd { display: grid; gap: 10px; padding: 14px 16px 16px; }
.x3 .line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.x3 .line .ar { color: var(--faint); font: 400 13px/1 var(--mono); }
.x3 .rv { font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.x3 .rv b { color: var(--fg); font-weight: 500; }
/* X4 split: tall face column */
.x4 .sh { display: grid; grid-template-columns: 104px minmax(0, 1fr); grid-template-rows: 1fr auto; }
.x4 .col { grid-row: 1; background: var(--a); display: grid; justify-items: center; align-content: start; gap: 10px; padding: 16px 10px; }
.x4 .col .fc { width: 76px; height: 76px; border-radius: 14px; box-shadow: 0 0 0 3px var(--sheet); }
.x4 .col .gl { font: 500 10.5px/1.2 var(--mono); color: var(--a-ink); text-align: center; }
.x4 .main { padding: 14px 14px 14px; display: grid; gap: 10px; align-content: start; }
.x4 .yf { grid-column: 1 / -1; }
/* X5 dense deck */
.x5 .hd { display: flex; gap: 12px; align-items: center; padding: 14px 14px 0; }
.x5 .fc { width: 48px; height: 48px; }
.x5 .nm { font-size: 16px; }
.x5 .kf { font-size: 12.5px; }
.x5 .bd { display: grid; gap: 10px; padding: 12px 14px 14px; }
.x5 .yf { padding: 10px 14px; grid-template-columns: auto 1fr; align-items: baseline; gap: 10px; }
.x5 .yf p { font-size: 13.5px; }
.x5 .yf b { font-size: 13.5px; }
/* X6 chip sentence, no "codes with" */
.x6 .hd { display: flex; gap: 14px; align-items: center; padding: 16px 16px 0; }
.x6 .bd { padding: 14px 16px 16px; }
.x6 .sn { margin: 0; font: 400 15.5px/2 var(--sans); }
.x6 .sn .cp { height: 24px; vertical-align: 1px; }
.x6 .sn .dot { color: var(--faint); margin: 0 4px; }

/* T1 trading card: specimen foil */
.t1 { --r: 18px; padding: 8px; border-radius: 22px; background: linear-gradient(145deg, var(--a), color-mix(in srgb, var(--a) 55%, var(--hazard)) 45%, var(--a) 70%, color-mix(in srgb, var(--a) 70%, var(--sheet))); box-shadow: 0 1px 0 rgba(14,13,10,.05), 0 18px 40px -22px rgba(14,13,10,.45); }
.t1 .sh { border-radius: 15px; }
.t1 .bar { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 14px 8px; }
.t1 .bar .nm { font: 900 24px/1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.t1 .bar .st { font: 900 20px/1 var(--display); color: var(--fg); white-space: nowrap; }
.t1 .bar .st small { font: 500 10px/1 var(--mono); letter-spacing: .06em; color: var(--muted); margin-right: 4px; }
.t1 .win { position: relative; margin: 0 12px; height: 168px; border-radius: 10px; overflow: hidden; background:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--a-ink) 22%, transparent) 1px, transparent 1.5px) 0 0 / 7px 7px,
    linear-gradient(160deg, var(--a), color-mix(in srgb, var(--a) 60%, var(--sheet))); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--a-ink) 18%, transparent); display: grid; place-items: center; }
.t1 .win::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 45%, transparent 60%); mix-blend-mode: soft-light; }
.t1 .win .fc { width: 120px; height: 120px; box-shadow: 0 0 0 4px var(--sheet), 0 10px 24px -10px rgba(0,0,0,.45); }
.t1 .type { display: flex; justify-content: space-between; align-items: center; margin: 8px 12px 0; padding: 5px 10px; border-radius: 6px; background: color-mix(in srgb, var(--a) 55%, var(--sheet)); font: 500 11px/1.2 var(--mono); color: var(--a-ink); }
.t1 .moves { display: grid; gap: 10px; padding: 12px 14px 12px; }
.t1 .mv { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; }
.t1 .mv .ic { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--a); color: var(--a-ink); font: 600 11px/1 var(--sans); }
.t1 .mv b { display: block; font: 600 13.5px/1.25 var(--sans); }
.t1 .mv span { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.t1 .yf { margin: 0 12px 10px; border-radius: 10px; }
.t1 .ft { display: flex; justify-content: space-between; padding: 0 14px 12px; font: 400 10.5px/1 var(--mono); color: var(--faint); }


/* ---------- Fable: TCG. Two trading-card takes on X1's content, nothing more than X1 shows.
   Shared: generated art as the hero of the window, the X1 chips / facts / yellow "take" block.
   .tc-tcg1 = framed window (classic layout, coloured frame, dark keyline round the art)
   .tc-tcg2 = full art with a stuck-on name label (the lower half tinted by style) ---------- */
.tc-tcg1, .tc-tcg2 {
  --a: var(--a-skep); --ink: color-mix(in srgb, var(--fg) 78%, transparent);
  position: relative; width: 100%; max-width: 380px; margin: 0 auto;
  color: var(--fg); font: 400 12.5px/1.4 var(--sans);
  transition: transform .4s cubic-bezier(.2, .8, .2, 1);
}
.tc-tcg1:hover, .tc-tcg2:hover { transform: perspective(1200px) rotateX(1.5deg) rotateY(-2.5deg) translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .tc-tcg1, .tc-tcg2 { transition: none; } .tc-tcg1:hover, .tc-tcg2:hover { transform: none; } }
.tc-tcg1.orch, .tc-tcg2.orch { --a: var(--a-orch); } .tc-tcg1.pure, .tc-tcg2.pure { --a: var(--a-pure); }
.tc-tcg1.swarm, .tc-tcg2.swarm { --a: var(--a-swarm); } .tc-tcg1.rules, .tc-tcg2.rules { --a: var(--a-rules); }
.tc-tcg1.skep, .tc-tcg2.skep { --a: var(--a-skep); } .tc-tcg1.vibe, .tc-tcg2.vibe { --a: var(--a-vibe); }
.tc-tcg1.tool, .tc-tcg2.tool { --a: var(--a-tool); }

/* shared: art window contents (the window is clipped by .tg-win so a label can hang out of the figure) */
.tc-tcg1 .tg-win, .tc-tcg2 .tg-win { position: absolute; inset: 0; overflow: hidden; }
.tc-tcg1 .tg-hero, .tc-tcg2 .tg-hero { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* no art yet: a dotted window in the style colour, the style glyph, the avatar as a medal */
.tc-tcg1 .tg-art.fb, .tc-tcg2 .tg-art.fb { aspect-ratio: 3 / 2; }
.tc-tcg1 .tg-win.fb, .tc-tcg2 .tg-win.fb { background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--a-ink) 22%, transparent) 1px, transparent 1.6px) 0 0 / 8px 8px, color-mix(in srgb, var(--a) 72%, var(--sheet)); }
.tc-tcg1 .tg-glyph, .tc-tcg2 .tg-glyph { position: absolute; right: -4px; bottom: -34px; font: 600 170px/1 var(--sans); color: var(--a-ink); opacity: .12; user-select: none; pointer-events: none; }
.tc-tcg1 .tg-medal, .tc-tcg2 .tg-medal {
  position: absolute; left: 50%; top: 50%; width: 124px; height: 124px; transform: translate(-50%, -50%);
  border-radius: 50%; overflow: hidden; background: var(--sheet); display: grid; place-items: center;
  box-shadow: 0 0 0 3px var(--sheet), 0 0 0 5px var(--ink), 0 12px 24px -10px rgba(0,0,0,.5);
  font: 900 40px/1 var(--display); color: var(--fg);
}
.tc-tcg1 .tg-medal img, .tc-tcg2 .tg-medal img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tc-tcg1 .tg-hdl, .tc-tcg2 .tg-hdl {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 5px; height: 21px; padding: 0 8px 0 7px; border-radius: 999px;
  background: rgba(14,13,10,.66); color: #F2EDE2; font: 500 10.5px/1 var(--mono); text-decoration: none; backdrop-filter: blur(4px);
}
.tc-tcg1 .tg-hdl:hover, .tc-tcg2 .tg-hdl:hover { background: var(--hazard); color: var(--hazard-ink); }
.tc-tcg1 .tg-hdl svg, .tc-tcg2 .tg-hdl svg { width: 10px; height: 10px; fill: currentColor; }

/* shared: chips (X1's), facts (X1's), the yellow take (X1's) */
.tc-tcg1 .tg-chips, .tc-tcg2 .tg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tc-tcg1 .tg-cp, .tc-tcg2 .tg-cp {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px 2px 7px; border-radius: 7px;
  background: var(--key); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 -2px 0 var(--key-skirt);
  font: 500 12.5px/1 var(--mono); white-space: nowrap;
}
.tc-tcg1 .tg-cp svg, .tc-tcg2 .tg-cp svg { width: 15px; height: 15px; flex: none; }
.tc-tcg1 .tg-cp svg.own, .tc-tcg2 .tg-cp svg.own { opacity: .7; }
.tc-tcg1 .tg-cp small, .tc-tcg2 .tg-cp small { font: 500 9px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; opacity: .55; }
.tc-tcg1 .tg-cp.m, .tc-tcg2 .tg-cp.m { background: var(--mod); color: var(--mod-fg); box-shadow: inset 0 -2px 0 var(--mod-skirt); }
.tc-tcg1 .tg-cp.h, .tc-tcg2 .tg-cp.h { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--muted); }
.tc-tcg1 .tg-cp .tg-chg, .tc-tcg2 .tg-cp .tg-chg { color: var(--hazard-deep); font-size: 11px; margin-left: -2px; }
.tc-tcg1 .tg-cp .tg-q, .tc-tcg2 .tg-cp .tg-q { opacity: .55; margin-left: -3px; }
.tc-tcg1 .tg-fx, .tc-tcg2 .tg-fx { display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; font: 400 12px/1.2 var(--mono); color: var(--muted); }
.tc-tcg1 .tg-fx span, .tc-tcg2 .tg-fx span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tc-tcg1 .tg-fx span + span::before, .tc-tcg2 .tg-fx span + span::before { content: ""; width: 1px; height: 12px; background: var(--line-strong); margin: 0 5px 0 11px; }
.tc-tcg1 .tg-fx svg, .tc-tcg2 .tg-fx svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.tc-tcg1 .tg-fx b, .tc-tcg2 .tg-fx b { color: var(--fg); font-weight: 500; }
.tc-tcg1 .tg-take, .tc-tcg2 .tg-take { display: grid; gap: 4px; padding: 11px 12px 12px; background: var(--hazard); color: var(--hazard-ink); }
.tc-tcg1 .tg-take small, .tc-tcg2 .tg-take small { font: 500 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.tc-tcg1 .tg-take p, .tc-tcg2 .tg-take p { margin: 0; color: var(--hazard-ink); font: 400 14.5px/1.4 var(--sans); }  /* own colour: the card looks the same wherever it sits */
.tc-tcg1 .tg-take b, .tc-tcg2 .tg-take b { font: 600 15px/1.3 var(--mono); }

/* ---------- version 1: framed window ---------- */
.tc-tcg1 { padding: 6px; border-radius: 16px; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--line-strong), var(--lift); }
.tc-tcg1 .tg-f {
  position: relative; border-radius: 11px; padding: 7px 8px 8px; color: var(--a-ink);
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--a-ink) 5%, transparent) 0 1px, transparent 1px 5px), var(--a);
}
.tc-tcg1 .tg-f::before { content: ""; position: absolute; inset: 3px; border-radius: 9px; border: 1px solid color-mix(in srgb, var(--a-ink) 24%, transparent); pointer-events: none; }
.tc-tcg1 .tg-bar { display: flex; align-items: center; gap: 8px; padding: 3px 3px 8px 5px; }
.tc-tcg1 .tg-bar h3 { flex: 1; margin: 0; min-width: 0; font: 900 26px/1 var(--display); text-transform: uppercase; letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-tcg1 .tg-sty { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px 0 7px; border-radius: 999px; flex: none;
  background: var(--sheet); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-strong); font: 500 11px/1 var(--mono); white-space: nowrap; }
.tc-tcg1 .tg-sty b { font: 500 12px/1 var(--sans); opacity: .7; }
.tc-tcg1 .tg-art { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: 5px; overflow: hidden; isolation: isolate; background: var(--base); box-shadow: 0 0 0 2px var(--ink); }
.tc-tcg1 .tg-hdl { left: 8px; bottom: 8px; }
.tc-tcg1 .tg-kf { padding: 9px 6px 8px; text-align: center; font: 500 11.5px/1.25 var(--mono); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-tcg1 .tg-body { display: grid; gap: 11px; padding: 12px 11px 12px; background: var(--sheet); color: var(--fg); border-radius: 7px 7px 0 0; box-shadow: inset 0 0 0 1px var(--line-strong); }
.tc-tcg1 .tg-take { border-radius: 0 0 7px 7px; box-shadow: inset 0 0 0 1px rgba(14,13,10,.18), inset 0 -3px 0 var(--hazard-deep); }

/* ---------- version 2: full art, stuck-on name label ---------- */
.tc-tcg2 { border-radius: 16px; overflow: hidden; background: color-mix(in srgb, var(--a) 46%, var(--sheet)); box-shadow: inset 0 0 0 1px var(--line-strong), var(--lift); }
.tc-tcg2 .tg-art { position: relative; margin: 0; aspect-ratio: 4 / 3; background: var(--base); isolation: isolate; }
.tc-tcg2 .tg-art::after { content: ""; position: absolute; inset: 0; z-index: 1; box-shadow: inset 0 0 0 1px rgba(14,13,10,.2), inset 0 -1px 0 var(--ink); pointer-events: none; }
.tc-tcg2 .tg-sty { position: absolute; z-index: 3; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px 0 7px; border-radius: 999px;
  background: var(--a); color: var(--a-ink); box-shadow: 0 0 0 1px color-mix(in srgb, var(--a-ink) 35%, transparent), 0 2px 0 rgba(14,13,10,.25); font: 500 11px/1 var(--mono); white-space: nowrap; }
.tc-tcg2 .tg-sty b { font: 500 12px/1 var(--sans); opacity: .75; }
.tc-tcg2 .tg-hdl { top: 10px; right: 10px; }
.tc-tcg2 .tg-label {
  position: absolute; z-index: 4; left: 12px; bottom: -16px; max-width: calc(100% - 24px); padding: 6px 12px 7px 11px;
  background: var(--sheet); color: var(--fg); transform: rotate(-1.4deg); transform-origin: left bottom;
  box-shadow: inset 0 0 0 1px var(--ink), 3px 3px 0 var(--ink);
}
.tc-tcg2 .tg-label h3 { margin: 0; font: 900 27px/.95 var(--display); text-transform: uppercase; letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-tcg2 .tg-label .tg-kf { margin-top: 4px; font: 500 11px/1.2 var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-tcg2 .tg-body { display: grid; gap: 11px; padding: 28px 12px 14px; }
.tc-tcg2 .tg-cp.h { color: var(--fg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 30%, transparent); }
.tc-tcg2 .tg-fx { color: color-mix(in srgb, var(--fg) 72%, transparent); }
.tc-tcg2 .tg-fx span + span::before { background: color-mix(in srgb, var(--fg) 25%, transparent); }
.tc-tcg2 .tg-take { margin: 0 14px 14px 12px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--ink), 3px 3px 0 var(--ink); }

/* ---------- F5 = F4 top (full art, stuck-on label) + F3 bottom (sheet with chips and facts, fused yellow foot) ---------- */
.tc-tcg2.tc-tcg5 { padding: 7px; border-radius: 18px; overflow: visible; background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--a-ink) 7%, transparent) 0 1px, transparent 1px 7px), var(--a);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a-ink) 18%, transparent), var(--lift); }
.tc-tcg5 .tg-art { border-radius: 12px 12px 0 0; }
.tc-tcg5 .tg-win { border-radius: 12px 12px 0 0; }
.tc-tcg5 .tg-art::after { border-radius: 12px 12px 0 0; }
.tc-tcg2.tc-tcg5 .tg-body { padding: 30px 12px 13px; background: var(--sheet); }
.tc-tcg2.tc-tcg5 .tg-cp.h { color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-strong); }
.tc-tcg2.tc-tcg5 .tg-fx { color: var(--muted); }
.tc-tcg2.tc-tcg5 .tg-fx span + span::before { background: var(--line-strong); }
.tc-tcg2.tc-tcg5 .tg-take { margin: 0; border-radius: 0 0 12px 12px; box-shadow: inset 0 -3px 0 var(--hazard-deep); }
/* F5 has a fixed card shape (a real trading card, 63 x 88): art takes whatever height the content leaves, never less than 4:3 */
.tc-tcg2.tc-tcg5 { width: 380px; max-width: none; aspect-ratio: 63 / 88; display: flex; flex-direction: column; container-type: inline-size; }
/* narrower than 380px, the whole card scales down as one object (zoom, set from JS below), so its layout never reflows */
.tc-tcg5 .tg-art, .tc-tcg5 .tg-art.fb { flex: 1 1 auto; aspect-ratio: auto; min-height: calc((100cqw - 14px) * .75); }
.tc-tcg5 .tg-body, .tc-tcg5 .tg-take { flex: none; }
.tc-tcg5 .tg-label { max-width: calc(100% - 92px); }
/* handles: two small icons on the seam, opposite the name sticker, off the art */
.tc-tcg5 .tg-ids { position: absolute; z-index: 4; right: 12px; bottom: -12px; display: inline-flex; gap: 4px; }
.tc-tcg5 .tg-ids a { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #0E0D0A; color: #F2EDE2; box-shadow: 0 0 0 2px var(--sheet); text-decoration: none; }
.tc-tcg5 .tg-ids a:hover { background: var(--hazard); color: var(--hazard-ink); }
.tc-tcg5 .tg-ids svg { width: 11px; height: 11px; fill: currentColor; }
/* your own photo, printed like the riso art: charcoal on paper, your style colour as the spot ink, a fine halftone */
.tc-tcg2 { --spot: #8A857A; }
.tc-tcg2.orch { --spot: #3E6FB0; } .tc-tcg2.pure { --spot: #4E8A3A; } .tc-tcg2.swarm { --spot: #7A55C4; } .tc-tcg2.rules { --spot: #C46A2A; }
.tc-tcg2.skep { --spot: #8A857A; } .tc-tcg2.vibe { --spot: #C44A7E; } .tc-tcg2.tool { --spot: #2F8F7E; }
.tg-win.own { background: #EFE9DC; }
.tg-win.own .tg-hero { filter: grayscale(1) contrast(1.35) brightness(1.06); mix-blend-mode: multiply; object-position: 50% 28%; }   /* faces sit high in most photos */
.tg-win.own::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--spot); mix-blend-mode: screen; opacity: .55; }
.tg-win.own::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background: radial-gradient(circle at 1px 1px, rgba(14,13,10,.35) .7px, transparent 1.2px) 0 0 / 4px 4px; }
.tc-tcg1 .tg-hset, .tc-tcg2 .tg-hset { padding: 0; gap: 0; background: none; box-shadow: none; backdrop-filter: none; }
.tg-hset > a { display: inline-flex; align-items: center; gap: 5px; height: 100%; padding: 0 8px; border-radius: 999px; background: rgba(14,13,10,.78); color: #F2EDE2; text-decoration: none; }
.tg-hset > a.tg-gh { margin-left: 4px; width: 22px; padding: 0; justify-content: center; }
.tg-hset > a:hover { background: var(--hazard); color: var(--hazard-ink); }
.tg-hset svg { width: 10px; height: 10px; fill: currentColor; }


/* ---------- The share image (1200 x 630): one trading card, the object to look at. Used for every person's link preview,
   for your own card's image, and for "Copy image". Two blank card backs fan out behind it; only their corners show. ---------- */
.shs { position: relative; width: 1200px; height: 630px; overflow: hidden; color: #F2EDE2;
  background: radial-gradient(ellipse 34% 62% at 50% 56%, rgba(255,212,0,.17), transparent 72%), radial-gradient(circle at 50% 130%, rgba(255,212,0,.10), transparent 60%), #0E0D0A;
  /* always the dark theme, whatever the page is in */
  --bg: #0E0D0A; --sheet: #151410; --base: #110F0B; --fg: #F2EDE2; --muted: #9A9488; --faint: #5F5A50; --line: rgba(242,237,226,.09); --line-strong: rgba(242,237,226,.17);
  --key: #2A2822; --key-skirt: #0B0A08; --mod: #EDE7DA; --mod-skirt: #A9A293; --mod-fg: #0E0D0A;
  --a-orch: #1F3554; --a-pure: #263D1E; --a-swarm: #37265A; --a-rules: #4E2C15; --a-skep: #2E2C28; --a-vibe: #522237; --a-tool: #163F38; --a-ink: #EDE7DA;
  --lift: 0 1px 0 rgba(0,0,0,.4), 0 14px 34px -14px rgba(0,0,0,.8); color-scheme: dark; }
.shs .pile { position: absolute; left: 50%; top: 50%; width: 380px; height: 532px; translate: -50% -50%; zoom: 1.02; }
.shs .pile > * { position: absolute; inset: 0; }
.shs .back { border-radius: 18px; box-shadow: 0 24px 40px -18px rgba(0,0,0,.7), inset 0 0 0 1px rgba(242,237,226,.10);
  background: repeating-linear-gradient(135deg, rgba(242,237,226,.035) 0 1px, transparent 1px 8px), linear-gradient(160deg, #24221D, #161511); }
.shs .back::after { content: ""; position: absolute; inset: 10px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(255,212,0,.14); }
.shs .b1 { rotate: 8deg; translate: 26px -4px; }
.shs .b2 { rotate: -10deg; translate: -24px 10px; }
.shs .top { rotate: -3deg; filter: drop-shadow(0 30px 34px rgba(0,0,0,.6)); }
.shs .top .tc-tcg5 { transition: none; }
.shs .top .tc-tcg5:hover { transform: none; }
/* a faint holo sheen on the art only, so the text stays crisp */
.shs .top .tg-win::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(115deg, transparent 22%, rgba(255,110,190,.42) 36%, rgba(110,215,255,.42) 48%, rgba(150,255,185,.36) 58%, rgba(255,226,110,.42) 70%, transparent 84%),
              linear-gradient(115deg, transparent 44%, rgba(255,255,255,.22) 50%, transparent 56%); }
.shs .top .tg-win.fb::after { opacity: .5; }   /* on a flat colour window (no art yet) the same sheen reads twice as strong */
.shs .mk { position: absolute; left: 44px; top: 38px; display: inline-flex; align-items: center; gap: 10px; }
.shs .mk b { font: 400 28px/1 var(--brand); letter-spacing: -.055em; color: #F2EDE2; }
.shs .mk span { display: inline-flex; align-items: center; gap: 6px; padding-top: 7px; font: 400 14px/1 var(--mono); color: #9A9488; }
.shs .mk svg { width: 14px; height: 17px; fill: #9A9488; }
.shs .url { position: absolute; right: 44px; bottom: 36px; font: 500 15px/1 var(--mono); color: #9A9488; letter-spacing: .02em; }
.shs .url b { color: #FFD400; font-weight: 500; }


/* Two-in-one demo: data cards in the grid (F2c), the trading card (F5) wherever a card is opened or shared. */
.dcard { cursor: pointer; }
.dcard:focus-visible { outline: 2px solid var(--hazard); outline-offset: 4px; border-radius: 16px; }
.tfile .dl.tl { padding: 18px 18px 22px; display: grid; gap: 12px; align-content: start; justify-items: center; }
.tfile .dl.tl > article { width: min(380px, 100%); }
.tfile .shr { width: min(380px, 100%); }
.tfile .shr .btn { width: 100%; height: 40px; justify-content: center; font-size: 14px; background: var(--fg); color: var(--bg); box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--fg) 60%, #000); }
.tfile .shr .btn:hover { background: color-mix(in srgb, var(--fg) 88%, var(--hazard)); }
.tfile .shr .btn svg { fill: currentColor; }
.tfile .mk { display: block; margin: 12px auto 0; padding: 2px 0; border: 0; background: none; color: var(--fg); font: 500 13.5px/1.3 var(--sans); cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--hazard); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.tfile .mk:hover { color: var(--hazard-deep); }
.tfile .itsyou { flex-basis: 100%; margin: 10px 0 0; text-align: center; font: 400 11.5px/1.5 var(--mono); color: var(--faint); }
.tfile .itsyou a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.tfile .dr { padding-top: 40px; }
/* one column on phones: the card comes first, so it gets the room under the close button, not the facts below it */
@media (max-width: 760px) { .tfile .dl.tl { padding-top: 54px; } .tfile .dr { padding-top: 18px; } }
.take2 { margin: 0 18px 4px; padding: 14px 16px 14px; border-radius: 10px; background: var(--hazard); color: var(--hazard-ink); box-shadow: inset 0 -3px 0 var(--hazard-deep); display: grid; gap: 6px; }
.take2 small { font: 500 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.take2 p { margin: 0; font: 400 16px/1.4 var(--sans); }
.take2 p b { font: 600 16.5px/1.3 var(--mono); }
.take2 .why2 { font-size: 13px; opacity: .78; }
.take2 .take-a { margin-top: 6px; }
.take2 .btn.acc { background: var(--hazard-ink); color: var(--hazard); box-shadow: inset 0 -3px 0 #000; }
.take2 .pp { position: relative; margin-top: 6px; }
.take2 .take-p { margin: 0; max-height: 64px; overflow: hidden; padding: 10px 12px; border-radius: 8px; background: color-mix(in srgb, #fff 55%, var(--hazard)); color: var(--hazard-ink); box-shadow: none; font-size: 11.5px; transition: max-height .25s ease; }
.take2 .pp::after { content: ""; position: absolute; left: 0; right: 0; bottom: 30px; height: 34px; border-radius: 0 0 8px 8px; background: linear-gradient(transparent, color-mix(in srgb, #fff 55%, var(--hazard))); pointer-events: none; }
.take2 .pp.open .take-p { max-height: 400px; overflow: auto; }
.take2 .pp.open::after { display: none; }
.take2 .pp-x { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; height: 22px; padding: 0 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(14,13,10,.35); font: 500 11.5px/1 var(--sans); color: var(--hazard-ink); }
.take2 .pp-x:hover { background: rgba(14,13,10,.08); }
.take2 .pp-x svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.take2 .pp.open .pp-x svg { transform: rotate(180deg); }
.tfile .dr .rows { padding-top: 6px; }
.ux-rows { padding: 4px 18px 10px; display: grid; }
.ux-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); cursor: pointer; }
.ux-row:first-child { border-top: 0; }
.ux-row .lb { font: 500 10px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.ux-row .vl { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; font-size: 13.5px; }
.ux-row .dt { font: 400 10.5px/1 var(--mono); color: var(--faint); white-space: nowrap; }
.ux-row .dt:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.ux-row .rx { grid-column: 2 / -1; display: none; gap: 6px; padding-top: 6px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.ux-row.open .rx { display: grid; }
.ux-row .q1 { grid-column: 2 / -1; quotes: none; font-size: 12.5px; line-height: 1.5; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.ux-row.open .q1 { -webkit-line-clamp: unset; color: var(--fg); }
.ux-row .rx q { quotes: none; font-style: italic; }
.ux-row .rx .bf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 400 11px/1 var(--mono); color: var(--faint); }
.ux-row:hover .lb { color: var(--fg); }
.ux-cp { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px 2px 7px; border-radius: 7px; background: var(--key); box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 -2px 0 var(--key-skirt); font: 500 12.5px/1 var(--mono); white-space: nowrap; color: var(--fg); }
.ux-cp svg { width: 15px; height: 15px; flex: none; }
.ux-cp small { font: 500 9px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; opacity: .55; }
.ux-cp.m { background: var(--mod); color: var(--mod-fg); box-shadow: inset 0 -2px 0 var(--mod-skirt); }
.ux-cp.h { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--muted); }
.ux-cp.was { opacity: .5; height: auto; min-height: 22px; padding-block: 3px; white-space: normal; max-width: 100%; font-size: 11px; line-height: 1.3; box-shadow: inset 0 0 0 1px var(--line-strong); background: transparent; }
.ux-row .rx .bf { min-width: 0; }
.ux-row .rx q { overflow-wrap: anywhere; }
.ux-cp.was svg { width: 12px; height: 12px; }
.ux-cp.sk { height: 22px; font-size: 11px; padding: 0 7px; background: color-mix(in srgb, var(--fg) 5%, transparent); box-shadow: none; }
.ux-cp.sk.f { background: var(--hazard); color: var(--hazard-ink); }
.ux-ic { display: inline-flex; align-items: center; gap: 7px; font: 400 13px/1.3 var(--mono); }
.ux-ic svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; flex: none; color: var(--muted); }
.ux-ic b { font-weight: 500; }
.ux-txt { font-size: 13.5px; line-height: 1.4; }
.tfile .dr .row { cursor: pointer; padding: 8px 0; }
.tfile .dr .row .rc { display: none; }
.tfile .dr .row.open .rc { display: block; }
.tfile .dr .row .rc .q { -webkit-line-clamp: unset; }
.tfile .dr .row .rc .was .wq { display: block; flex-basis: 100%; }
.tfile .dr .row:hover .v strong { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.tfile .dr .rows-h { margin: 14px 18px 0; font: 500 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.tfile .shr { display: flex; gap: 8px; flex-wrap: wrap; }
.demo-note { position: fixed; z-index: 40; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 8px 8px 8px 14px; border-radius: 999px; background: var(--fg); color: var(--bg); font-size: 12.5px; box-shadow: 0 10px 30px -10px rgba(0,0,0,.5); }
.demo-note button { height: 26px; padding: 0 10px; border-radius: 999px; background: var(--hazard); color: var(--hazard-ink); font: 500 12px/1 var(--sans); }
/* your own card: the same two columns as an engineer's. Left: the card, make it yours, publish/share. Right: the agent's picks. */
.tfile.mine .mf { width: min(380px, 100%); display: grid; gap: 8px; }
.tfile.mine .mf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tfile.mine .mf-h { margin-top: 4px; font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.tfile.mine .mf { padding-bottom: 4px; }
.tfile.mine .live { flex-basis: 100%; margin: 0 0 10px; text-align: center; font: 500 12px/1.3 var(--mono); color: var(--fg); }
.tfile.mine .live a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--hazard); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.tfile.mine .mf input:not([type=file]) { height: 36px; padding: 0 11px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--sheet); color: var(--fg); font: 400 13px/1 var(--sans); min-width: 0; }
.tfile.mine .mf .ph-btn { justify-content: center; height: 36px; background: var(--sheet); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-strong); cursor: pointer; }
.tfile.mine .mf .ph-btn:hover { box-shadow: inset 0 0 0 1px var(--hazard); }
.tfile.mine .mf .ph-btn svg, .ph-drop svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
/* the card's picture is a drop zone too: hover it to add (or change) your photo */
.ph-drop { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; cursor: pointer; opacity: 0; background: rgba(14,13,10,.42); transition: opacity .15s; }
.ph-drop span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: #F2EDE2; color: #0E0D0A; font: 600 13.5px/1 var(--sans); box-shadow: 0 6px 18px -6px rgba(0,0,0,.6); }
.tg-win:hover .ph-drop, .ph-drop:focus-visible { opacity: 1; }
@media (hover: none) { .ph-drop { opacity: 1; background: none; place-items: end center; padding-bottom: 54px; } }
.tfile.mine .shr .btn[disabled] { opacity: .7; cursor: default; }
.tfile.mine .shr .sh-btns { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; width: 100%; }
.tfile.mine .shr .sh-btns .btn { width: auto; padding: 0 12px; }
.tfile.mine .shr .sh-btns .btn.light { background: var(--sheet); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-strong); }
.tfile.mine .linkline { flex-basis: 100%; display: block; margin-top: 10px; text-align: center; font: 400 11.5px/1.4 var(--mono); color: var(--muted); word-break: break-all; }
.tfile.mine .join { flex-basis: 100%; display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 14px; }
.tfile.mine .shr .join .btn.light { width: auto; height: 34px; padding: 0 12px; background: var(--sheet); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-strong); }   /* quiet: it is not the main action */
.tfile.mine .join input { height: 34px; padding: 0 11px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--sheet); color: var(--fg); font: 400 13px/1 var(--sans); min-width: 0; }
.tfile.mine .ex { align-self: start; font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.og-off { position: fixed; left: -100000px; top: 0; pointer-events: none; }   /* the 1200x630 image, drawn off screen for saving and copying */
.take2.picks2 { gap: 10px; }
.take2.picks2 .pk-lead { font-size: 15px; }
.take2.picks2 ul { list-style: none; margin: 2px 0 0; padding: 0; display: grid; }
.take2.picks2 li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; padding: 11px 0; border-top: 1px solid rgba(14,13,10,.16); }
.take2.picks2 li p { font-size: 14.5px; }
.take2.picks2 li .why3 { display: block; margin-top: 3px; font: 400 13px/1.4 var(--sans); opacity: .8; }
.take2.picks2 li .why3 .linkish { color: inherit; font-size: inherit; text-decoration: underline; text-decoration-color: rgba(14,13,10,.4); cursor: pointer; }
.tfile.mine .near { margin: 14px 18px 0; font-size: 13.5px; color: var(--muted); }


/* Card feel, after poke-holo's common/uncommon + a whisper of rainbow rare: spring tilt, a glare across the whole card,
   a very faint rainbow sheen. Our own implementation. */
.tc-tcg5 { --rx: 0deg; --ry: 0deg; --px: 50%; --py: 50%; --ho: 0;
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)); will-change: transform;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a-ink) 18%, transparent), calc(var(--ry) * -1.2) calc(12px + var(--rx) * 1.2) 30px -14px rgba(14,13,10,.4); }
.tc-tcg5 .hcard { position: absolute; inset: 0; z-index: 6; border-radius: inherit; pointer-events: none; opacity: var(--ho); transition: opacity .35s ease; }
.tc-tcg5 .hcard.glare { mix-blend-mode: overlay;
  background: radial-gradient(farthest-corner circle at var(--px) var(--py), rgba(255,255,255,.55) 0%, rgba(255,255,255,.12) 30%, rgba(0,0,0,.22) 100%); }
.tc-tcg5 .hcard.sheen { mix-blend-mode: soft-light; opacity: calc(var(--ho) * .55);
  background: linear-gradient(115deg, transparent 0%, hsl(350 85% 70% / .55) calc(var(--px) - 30%), hsl(48 95% 65% / .55) calc(var(--px) - 15%), hsl(150 70% 62% / .55) var(--px), hsl(205 85% 66% / .55) calc(var(--px) + 15%), hsl(280 70% 70% / .55) calc(var(--px) + 30%), transparent 100%); }
@media (prefers-reduced-motion: reduce) { .tc-tcg5 { transform: none !important; } .tc-tcg5 .hcard { display: none; } }


/* Leaner above-the-fold and open card. Everything removed here still exists elsewhere (footer, open card). */
.filters .views { display: none !important; }
#grid .xv .so { display: none; }
.theme #theme-l { display: none; }
.theme { padding: 6px 8px; }
.mast { gap: 8px; }
.mast .by2 { display: inline-flex; align-items: center; gap: 6px; font: 400 12px/1 var(--mono); color: var(--faint); align-self: flex-end; padding-bottom: 3px; }
.mast .by2 svg { width: 13px; height: 16px; fill: var(--muted); }
.tfile .rows-h { display: none; }
.allthings { margin-top: 6px; }


/* The story: a directory of agent stacks (what it is), three findings (why you stay), one plain sentence (who and why),
   then the cards, each ending in that person's trick. The HN claim is finding #1, clickable. */
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 26px 56px; align-items: end; padding-block: 26px 24px; }
@media (max-width: 1000px) { .story { grid-template-columns: 1fr; } }
.story h1 { margin: 0; font: 900 50px/1.02 var(--display); text-transform: uppercase; letter-spacing: .003em; text-wrap: balance; max-width: 30ch; }
/* the yellow hugs the capitals, not the font's tall line box, so it never touches the line above */
.story h1 em { font-style: normal; color: var(--hazard-ink); padding: 0 .12em; background: linear-gradient(transparent 13%, var(--hazard) 13%, var(--hazard) 91%, transparent 91%); }
.lede2 { margin: 14px 0 0; max-width: 60ch; font: 400 16.5px/1.5 var(--sans); color: var(--muted); }
.lede2 .prq { color: inherit; text-decoration: underline; text-decoration-color: var(--hazard); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.lede2 .prq:hover { color: var(--fg); }
/* end of the page: who made this, plainly, and where to find us */
.end .join p { margin: 0; max-width: 60ch; font: 400 15px/1.5 var(--sans); color: var(--muted); }
.end .join p b { color: var(--fg); font-weight: 500; }
.end .join a.go { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 9px 14px 10px; border-radius: 9px; background: var(--hazard); color: var(--hazard-ink); font: 600 14px/1 var(--sans); text-decoration: none; box-shadow: inset 0 -3px 0 var(--hazard-deep); }
.end .join a.go:hover { filter: brightness(1.04); }
.flist { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; max-width: 900px; }
.flist { gap: 2px; padding-bottom: 4px; }
.flist li { position: relative; padding: 7px 34px 7px 0; border-top: 1px solid var(--line); }
.flist li:first-child { border-top: 0; }
.flist li p { margin: 0; display: flex; align-items: baseline; gap: 10px; font: 400 17px/1.4 var(--sans); letter-spacing: -.01em; color: var(--fg); user-select: text; }
.flist li p::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--hazard); transform: translateY(-3px); }
.flist li p b { font-weight: 600; white-space: nowrap; }
.flist li:first-child p b { background: var(--hazard); color: var(--hazard-ink); padding: 0 6px; border-radius: 4px; }
/* filter: a small funnel at the row's right edge, out of the text's way; shows on hover, stays when active */
.flist .see { position: absolute; right: 0; top: 7px; width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; opacity: 0; transition: opacity .15s, background .15s, color .15s; }
.flist .see svg { width: 14px; height: 14px; }
.flist li:hover .see, .flist .see:focus-visible, .flist .see[aria-pressed="true"] { opacity: 1; }
.flist .see:hover { background: var(--line); color: var(--fg); }
.flist .see[aria-pressed="true"] { background: var(--hazard); color: var(--hazard-ink); }
@media (hover: none) { .flist .see { opacity: .7; } }
@media (max-width: 700px) { .flist li p { font-size: 16px; } }
.finds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.find { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: baseline; padding: 14px 16px; border-radius: 12px; background: var(--sheet); text-align: left; transition: box-shadow .15s, transform .15s; }
.find:hover { box-shadow: var(--lift); transform: translateY(-1px); }
.find[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--fg); }
.find b { font: 900 42px/.9 var(--display); grid-row: span 2; }
.find b small { font: 500 13px/1 var(--mono); color: var(--faint); margin-left: 3px; }
.find span { font-size: 15px; line-height: 1.35; color: var(--fg); }
.find i { font: 400 11px/1.3 var(--mono); font-style: normal; color: var(--faint); }
.find.lead { background: var(--fg); color: var(--bg); }
.find.lead span { color: var(--bg); }
.find.lead b small, .find.lead i { color: color-mix(in srgb, var(--bg) 55%, transparent); }
.why { margin: 0; max-width: 92ch; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.why b { color: var(--fg); font-weight: 500; }
.why .tk { display: inline-block; padding: 0 6px; border-radius: 4px; background: var(--hazard); color: var(--hazard-ink); font: 500 12.5px/1.5 var(--mono); }
.why a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.xfollow { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-strong); font: 500 12px/1 var(--mono); color: var(--fg); margin-left: auto; margin-right: -8px; }   /* 8px from the theme switch: the masthead spaces its items 16px */
.masthead .theme { height: 30px; }
.xfollow svg { width: 12px; height: 12px; fill: currentColor; }
.xfollow:hover { background: var(--fg); color: var(--bg); }
@media (max-width: 900px) { .finds { grid-template-columns: 1fr; } .story h1 { font-size: 38px; } }
@media (max-width: 560px) { .xfollow .xt { display: none; } .xfollow { padding: 0 9px; } }


/* Share button: solid black in light, solid white in dark. Prehistoriq link in the masthead. */
.tfile .shr .btn { background: #0E0D0A; color: #FFFFFF; box-shadow: inset 0 -3px 0 #000; }
.tfile .shr .btn:hover { background: #24221D; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tfile .shr .btn { background: #FFFFFF; color: #0E0D0A; box-shadow: inset 0 -3px 0 #D9D3C7; } }
:root[data-theme="dark"] .tfile .shr .btn { background: #FFFFFF; color: #0E0D0A; box-shadow: inset 0 -3px 0 #D9D3C7; }
:root[data-theme="dark"] .tfile .shr .btn:hover { background: #F2EDE2; }
.mast .by2 a { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.mast .by2 a:hover { color: var(--fg); }
.mast .by2 a:hover svg { fill: var(--fg); }
.tc-tcg2 .tg-hero { transition: opacity .25s ease; }
/* theme switch says where it is */
.theme { padding: 6px 11px 6px 9px !important; }
.theme #theme-l { display: inline !important; text-transform: capitalize; }

/* server-rendered content, visible before (and without) the app; the app replaces it with the same content */
.seo-card { padding: 16px 18px; border-radius: 14px; background: var(--sheet); display: grid; gap: 6px; font-size: 13.5px; color: var(--muted); }
.seo-card h2, .seo-card h3 { margin: 0; font: 600 16px/1.2 var(--sans); color: var(--fg); }
.seo-card h2 a, .seo-card h3 a { color: inherit; }
.seo-card p { margin: 0; }
.seo-card .one { color: var(--hazard-ink); background: var(--hazard); padding: 6px 10px; border-radius: 8px; }
.seo-person { grid-column: 1 / -1; padding: 22px 24px; border-radius: 16px; background: var(--sheet); display: grid; gap: 10px; }
.seo-person h1 { margin: 0; font: 900 40px/1 var(--display); text-transform: uppercase; }
.seo-person dl { display: grid; grid-template-columns: 110px 1fr; gap: 6px 14px; margin: 0; font-size: 14px; }
.seo-person dt { font: 500 11px/1.8 var(--mono); text-transform: uppercase; color: var(--faint); }
.seo-person dd { margin: 0; }
.seo-person ol { margin: 0; padding-left: 18px; font-size: 12.5px; }
/* questions sit right after the people, before the footer: the bottom of the page is for the footer */
.faq { padding: 8px 0 48px; display: grid; gap: 10px; }
.faq h2 { margin: 0; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.faq details { padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.faq summary { cursor: pointer; color: var(--fg); font-weight: 500; }
.faq details p { margin: 8px 0 0; max-width: 72ch; }