/* Kumo — printed on warm paper: ink borders, hard shadows, one amber highlighter.
   The night world (and every crawler portrait) shows through dark windows. */
@font-face { font-family: 'Departure Mono'; src: url('https://cdn.jsdelivr.net/gh/rektdeckard/departure-mono@1.500/public/assets/DepartureMono-Regular.woff2') format('woff2'); font-display: swap; }
:root {
  --bg: #f4f2ec;
  --card: #fbfaf6;
  --shade: #e8e5dc;
  --ink: #161614;
  --line: #dcd8cd;
  --line-2: #c5c0b3;
  --line-3: var(--ink);
  --text: var(--ink);
  --text-2: #5a574f;
  --text-3: #85817a;
  --text-4: #aaa59b;
  --amber: #ffcf73;
  --accent: var(--amber);
  --good: #00a35b;
  --bad: #d93a26;
  --night: #121624;
  --bw: 1.5px;
  --sh: 3px 3px 0 var(--ink);
  --sh-card: 5px 5px 0 var(--ink);
  --sh-world: 5px 5px 0 #000;
  --ui: 'Funnel Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pixel: 'Departure Mono', ui-monospace, Consolas, monospace;
  --dots: 'Doto', var(--pixel);
  --display: var(--pixel);
  --sans: var(--ui);
  --mono: var(--pixel);
  --wrap: 1240px;
  --nav-h: 60px;
  --top: var(--nav-h);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--top) + 16px); }
body { margin: 0; min-height: 100vh; color: var(--text); font: 400 16px/1.55 var(--ui); -webkit-font-smoothing: antialiased; background: var(--bg); }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--amber); color: var(--ink); }
.cf-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; position: relative; }
.cf-mono { font-family: var(--pixel); }
.cf-dim { color: var(--text-3); }

/* ---------- top bar ---------- */
.cf-nav { position: sticky; top: 0; z-index: 50; height: var(--nav-h); background: var(--bg); border-bottom: var(--bw) solid var(--ink); }
.cf-nav-in { height: 100%; display: flex; align-items: center; gap: 26px; max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.cf-logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; flex: 0 0 auto; }
.cf-logo .cf-mark { display: block; width: 36px; height: 36px; border: var(--bw) solid var(--ink); }
.cf-logo span { font: 400 22px/1 var(--pixel); }
.cf-tabs { display: flex; gap: 2px; }
.cf-tabs a { text-decoration: none; font: 400 13px var(--pixel); color: var(--text-2); padding: 7px 11px; white-space: nowrap; }
.cf-tabs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; }
.cf-tabs a.on { color: var(--ink); background: var(--shade); box-shadow: inset 0 0 0 var(--bw) var(--ink); text-decoration: none; }
.cf-nav-r { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.cf-me { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 13px 0 5px; border: var(--bw) solid var(--ink); background: var(--card); box-shadow: var(--sh); font: 400 13px var(--pixel); text-decoration: none; color: var(--ink); }
.cf-me:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.cf-me-dot { width: 28px; height: 28px; background: var(--amber); border: var(--bw) solid var(--ink); display: grid; place-items: center; font: 400 13px var(--pixel); color: var(--ink); }

/* ---------- buttons ---------- */
.cf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 40px; padding: 0 16px; border: var(--bw) solid var(--ink); background: var(--card); color: var(--ink); box-shadow: var(--sh); font: 400 12px/1 var(--pixel); text-transform: uppercase; letter-spacing: .12em; text-decoration: none; transition: transform .08s, box-shadow .08s, background .15s; white-space: nowrap; }
.cf-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.cf-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.cf-btn svg { width: 14px; height: 14px; flex: 0 0 auto; }
.cf-btn.solid { background: var(--amber); }
.cf-btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--text-2); }
.cf-btn.ghost:hover { color: var(--ink); transform: none; text-decoration: underline; text-underline-offset: 5px; }
.cf-btn.big { height: 48px; padding: 0 22px; font-size: 13px; }
.cf-btn.danger { color: var(--bad); }
.cf-btn.danger:hover { background: #fbe9e5; }
.cf-btn:disabled { opacity: .5; cursor: default; transform: none; box-shadow: var(--sh); }
.cf-btn.wide { width: 100%; }

/* ---------- type ---------- */
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
h1 { font: 400 55px/1.1 var(--pixel); text-wrap: balance; }
h2 { font: 400 33px/1.15 var(--pixel); text-wrap: balance; }
h3 { font: 400 18px/1.3 var(--pixel); }
mark, .cf-hl { background: var(--amber); color: var(--ink); padding: 0 .12em; }
.cf-sub { font: 400 11px var(--pixel); color: var(--text-3); text-transform: uppercase; letter-spacing: .12em; }
.cf-label { display: block; font: 400 11px/1.3 var(--pixel); color: var(--text-3); text-transform: uppercase; letter-spacing: .14em; }

/* ---------- cards ---------- */
.cf-card { position: relative; border: var(--bw) solid var(--ink); background: var(--card); box-shadow: var(--sh-card); overflow: hidden; }
.cf-card.lift { box-shadow: 6px 6px 0 var(--ink); }
.cf-card-h { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px; border-bottom: var(--bw) solid var(--ink); min-height: 56px; }
.cf-card-h .t { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cf-card-h h3 { font: 400 18px var(--pixel); }
.cf-cells { display: grid; grid-template-columns: repeat(4, 1fr); border-top: var(--bw) dotted var(--ink); border-bottom: var(--bw) dotted var(--ink); }
.cf-cells > div { padding: 12px 16px; border-left: var(--bw) dotted var(--ink); min-width: 0; }
.cf-cells > div:first-child { border-left: 0; padding-left: 0; }
.cf-cells b { display: block; margin-top: 6px; font: 900 30px/1 var(--dots); font-variant-numeric: tabular-nums; }

/* a coloured strip across the top of a card: what state it's in */
.cf-strip { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; padding: 0 12px; border-bottom: var(--bw) solid var(--ink); background: var(--shade); font: 400 11px var(--pixel); text-transform: uppercase; letter-spacing: .14em; color: var(--ink); }
.cf-strip b { font-weight: 400; opacity: .8; }
.cf-strip a { color: inherit; }
.cf-strip.on { background: var(--good); color: #fff; }
.cf-strip.bad { background: var(--bad); color: #fff; }
.cf-strip.off { background: var(--card); color: var(--text-3); }

.cf-pill { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 9px; border: var(--bw) solid var(--ink); background: var(--card); font: 400 11px var(--pixel); text-transform: uppercase; letter-spacing: .12em; color: var(--ink); white-space: nowrap; }
.cf-pill i { width: 8px; height: 8px; background: var(--text-4); }
.cf-pill.on i { background: var(--good); }
.cf-pill.rest i { background: var(--text-2); }
.cf-pill.bad { color: var(--bad); }
.cf-pill.bad i { background: var(--bad); }
.cf-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border: 1px solid var(--line-2); background: var(--shade); font: 400 12px var(--pixel); color: var(--ink); white-space: nowrap; }
.cf-chip.gold { background: var(--amber); border-color: var(--ink); }
.cf-chip.note { background: var(--card); border-color: var(--ink); }
.cf-dot { display: inline-block; width: 8px; height: 8px; flex: 0 0 auto; }

/* ---------- section heads: title, one plain sentence, a dotted leader, a note on the right ---------- */
.cf-lead { display: flex; align-items: baseline; gap: 14px; margin-bottom: 26px; }
.cf-lead h2 { font-size: 22px; flex: none; }
.cf-lead > span { color: var(--text-2); font-size: 15px; flex: 0 1 auto; min-width: 0; }
.cf-lead > i { flex: 1 1 40px; min-width: 24px; border-bottom: 2px dotted var(--ink); transform: translateY(-4px); }
.cf-lead > em { flex: none; font: normal 400 11px var(--pixel); text-transform: uppercase; letter-spacing: .14em; color: var(--text-2); }

/* ---------- home: hero (older layout) ---------- */
.cf-hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: 12px; align-items: center; padding-top: 30px; padding-bottom: 40px; min-height: calc(100vh - var(--top)); max-height: 960px; }
.cf-hero-copy h1 { max-width: 560px; }
.cf-hero-copy p { margin: 22px 0 0; max-width: 500px; font-size: 18px; line-height: 1.6; color: var(--text-2); }
.cf-hero-cta { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.cf-hero-note { margin-top: 18px; font-size: 14px; color: var(--text-3); }
.cf-city { position: relative; height: min(78vh, 740px); min-height: 480px; margin-right: -28px; border: var(--bw) solid var(--ink); background: var(--night); }
.cf-city > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
.cf-city-hint { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 3; font: 400 11px var(--pixel); color: rgba(255, 255, 255, .5); pointer-events: none; white-space: nowrap; }
.cf-city-empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: rgba(255, 255, 255, .6); font-size: 15px; pointer-events: none; z-index: 2; }

/* 3D overlay: speech tags + site signs, printed like the rest of the site */
.w3-ui { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.w3-tag { position: absolute; left: 0; top: 0; will-change: transform; pointer-events: auto; cursor: pointer; }
.w3-tag-b { display: flex; align-items: center; gap: 9px; padding: 5px 11px 5px 5px; background: var(--card); color: var(--ink); border: var(--bw) solid var(--ink); box-shadow: 3px 3px 0 #000; white-space: nowrap; max-width: 290px; transition: transform .12s; }
.w3-tag:hover .w3-tag-b { transform: translate(-1px, -2px); }
.w3-tag-b::after { content: ''; position: absolute; left: var(--tail, 50%); bottom: -6px; width: 10px; height: 10px; background: inherit; border-right: var(--bw) solid var(--ink); border-bottom: var(--bw) solid var(--ink); transform: translateX(-50%) rotate(45deg); }
.w3-av { width: 30px; height: 30px; background: var(--night); border: 1px solid var(--ink); flex: none; }
.w3-tag-t { min-width: 0; position: relative; z-index: 1; }
.w3-tag-t b { display: block; font: 400 12px/1.3 var(--pixel); }
.w3-tag-t span { display: block; font: 400 12.5px/1.3 var(--ui); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; max-width: 230px; }
.w3-tag-t span i { font-style: normal; font-weight: 700; color: var(--ink); }
.w3-tag.find .w3-tag-b { background: var(--amber); }
.w3-tag.find .w3-tag-t span { color: #4d3a12; }
.w3-tag.error .w3-tag-t span i { color: var(--bad); }
.w3-tag.mine .w3-tag-b { outline: 3px solid var(--amber); outline-offset: 1.5px; }
.w3-sign { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; padding: 3px 7px; background: rgba(22, 22, 20, .86); color: rgba(244, 242, 236, .82); font: 400 11px var(--pixel); white-space: nowrap; will-change: transform; }
.w3-sign.busy { color: #fff; box-shadow: inset 0 -2px 0 var(--amber); }
.w3-sign.new { background: var(--amber); color: var(--ink); }
.w3-sign.new::before { content: 'new'; margin-right: 6px; padding: 0 4px; background: var(--ink); color: var(--amber); font: 400 10px/15px var(--pixel); text-transform: uppercase; letter-spacing: .1em; }
.w3-town { position: absolute; left: 0; top: 0; display: inline-flex; align-items: baseline; gap: 7px; padding: 4px 10px; background: var(--card); color: var(--ink); border: var(--bw) solid var(--ink); box-shadow: 3px 3px 0 #000; font: 400 13px var(--pixel); white-space: nowrap; will-change: transform; pointer-events: none; }
.w3-town em { font: normal 400 12px var(--ui); color: var(--text-3); }
.w3-town.new { background: var(--amber); }
.w3-town.new em { color: var(--ink); }

/* ---------- home: sections ---------- */
.cf-sec { padding: 70px 0; }
.cf-sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 30px; }
.cf-sec-head p { margin: 12px 0 0; max-width: 580px; color: var(--text-2); font-size: 17px; }

/* finds, as a log: dotted rules between entries, the passage with its word highlighted */
.cf-finds-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.cf-find-card { display: block; padding: 16px 0 18px; border-top: var(--bw) dotted var(--ink); text-decoration: none; min-width: 0; }
.cf-find-card .top { display: flex; align-items: center; gap: 8px; font: 400 11px var(--pixel); text-transform: uppercase; letter-spacing: .12em; color: var(--text-3); min-width: 0; }
.cf-find-card .top canvas { width: 24px; height: 24px; background: var(--night); border: 1px solid var(--ink); flex: none; }
.cf-find-card .top b { color: var(--ink); font-weight: 400; font-size: 13px; text-transform: none; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-find-card .top .cf-chip { height: 20px; padding: 0 6px; text-transform: none; letter-spacing: 0; }
.cf-find-card .top .a { margin-left: auto; white-space: nowrap; }
.cf-find-card h4 { margin: 10px 0 0; font: 600 16.5px/1.35 var(--ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-find-card p { margin: 6px 0 0; font-size: 14.5px; color: var(--text-2); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cf-find-card p mark { background: var(--amber); color: var(--ink); padding: 0 2px; }
.cf-find-card .u { margin-top: 10px; font: 400 11px var(--pixel); letter-spacing: .04em; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* how it works (older cards, still used for the mock fields) */
.cf-how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cf-how .cf-card { display: flex; flex-direction: column; }
.cf-how-n { width: 28px; height: 28px; border: var(--bw) solid var(--ink); display: grid; place-items: center; font: 400 13px var(--pixel); flex: none; }
.cf-how-body { padding: 18px 20px 22px; flex: 1; }
.cf-how-body p { margin: 0 0 16px; color: var(--text-2); font-size: 15px; }
.cf-mock-field { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 12px; border: var(--bw) solid var(--ink); background: var(--card); font: 400 13px var(--pixel); color: var(--text-2); overflow: hidden; white-space: nowrap; }
.cf-mock-field + .cf-mock-field { margin-top: 8px; }
.cf-mock-field small { color: var(--text-3); font: 400 11px var(--pixel); text-transform: uppercase; letter-spacing: .12em; min-width: 50px; }
.cf-mock-list { margin: 0; padding: 0; list-style: none; border: var(--bw) solid var(--ink); overflow: hidden; }
.cf-mock-list li { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--line); font-size: 14px; color: var(--text-2); }
.cf-mock-list li:first-child { border-top: 0; }
.cf-mock-list li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-mock-list li em { margin-left: auto; font: normal 400 11px var(--pixel); text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); }
.cf-find { padding: 13px 14px; border: var(--bw) solid var(--ink); background: var(--card); }
.cf-find p { margin: 9px 0 0; font-size: 14px; color: var(--text-2); line-height: 1.5; }
.cf-find a { display: block; margin-top: 8px; font: 400 11px var(--pixel); color: var(--text-3); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cf-foot { border-top: var(--bw) solid var(--ink); padding: 28px 0 44px; color: var(--text-3); font-size: 14px; margin-top: 20px; }
.cf-foot .cf-wrap { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center; }
.cf-foot a { color: var(--text-2); text-decoration: none; }
.cf-foot .cf-logo span { font-size: 17px; color: var(--ink); }
.cf-foot .cf-logo .cf-mark { width: 28px; height: 28px; }

/* ---------- forms ---------- */
.cf-field { display: block; margin-top: 20px; }
.cf-field:first-child { margin-top: 0; }
.cf-field > .cf-label { margin-bottom: 9px; display: flex; justify-content: space-between; gap: 12px; }
.cf-field > .cf-label em { font: normal 400 13px var(--ui); text-transform: none; letter-spacing: 0; color: var(--text-3); }
.cf-input { width: 100%; height: 44px; padding: 0 13px; border: var(--bw) solid var(--ink); background: var(--card); outline: none; font: 400 15.5px var(--ui); transition: box-shadow .1s, transform .1s; }
.cf-input::placeholder { color: var(--text-4); }
.cf-input:focus { box-shadow: var(--sh); transform: translate(-1px, -1px); }
.cf-input.err { border-color: var(--bad); }
.cf-input-row { display: flex; gap: 10px; }
.cf-input-row .cf-input { flex: 1; min-width: 0; }
.cf-input-row .cf-btn { height: 44px; }
.cf-prefix { position: relative; }
.cf-prefix span { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); font: 400 13px var(--pixel); color: var(--text-3); pointer-events: none; z-index: 1; }
.cf-prefix .cf-input { padding-left: 86px; font: 400 14px var(--pixel); }
.cf-hint { margin-top: 8px; font-size: 13.5px; color: var(--text-3); }
.cf-error { margin-top: 14px; padding: 11px 14px; border: var(--bw) solid var(--bad); background: #fbe9e5; color: #8f2416; font-size: 14.5px; }

.cf-seg { display: flex; flex-wrap: wrap; gap: var(--bw); border: var(--bw) solid var(--ink); background: var(--ink); }
.cf-seg button { flex: 1 1 auto; height: 38px; padding: 0 12px; border: 0; background: var(--card); color: var(--text-2); font: 400 12px var(--pixel); text-transform: uppercase; letter-spacing: .1em; transition: background .12s, color .12s; white-space: nowrap; }
.cf-seg button:hover { color: var(--ink); background: var(--shade); }
.cf-seg button.on { background: var(--ink); color: var(--card); }
.cf-seg button small { display: block; font: 400 12px var(--ui); text-transform: none; letter-spacing: 0; color: var(--text-3); margin-top: 2px; }
.cf-seg button.on small { color: #bdb8ad; }
.cf-seg.tall button { height: 54px; }

.cf-swatches { display: flex; flex-wrap: wrap; gap: 9px; }
.cf-swatch { width: 28px; height: 28px; border: var(--bw) solid var(--ink); padding: 0; position: relative; background: var(--c); transition: transform .1s; }
.cf-swatch:hover { transform: translate(-1px, -1px); box-shadow: 2px 2px 0 var(--ink); }
.cf-swatch.on { box-shadow: var(--sh); transform: translate(-1px, -1px); }
.cf-swatch.on::after { content: ''; position: absolute; inset: 7px; background: var(--card); border: var(--bw) solid var(--ink); }

.cf-range { width: 100%; accent-color: var(--ink); }
.cf-range-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.cf-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 44px; padding: 6px; border: var(--bw) solid var(--ink); background: var(--card); cursor: text; transition: box-shadow .1s, transform .1s; }
.cf-chips:focus-within { box-shadow: var(--sh); transform: translate(-1px, -1px); }
.cf-chips .cf-chip { height: 30px; gap: 6px; padding: 0 5px 0 9px; font-size: 12.5px; }
.cf-chips .cf-chip button { border: 0; background: none; color: var(--text-3); padding: 0 3px; font: 400 15px/1 var(--pixel); }
.cf-chips .cf-chip button:hover { color: var(--ink); }
.cf-chips input { flex: 1; min-width: 150px; border: 0; outline: none; background: transparent; font: 400 15.5px var(--ui); height: 30px; padding: 0 6px; }
.cf-chips input::placeholder { color: var(--text-4); }

/* ---------- build ---------- */
.cf-page-head { padding: 48px 0 30px; }
.cf-page-head h1 { font-size: 44px; }
.cf-page-head p { margin: 14px 0 0; color: var(--text-2); font-size: 17px; max-width: 640px; }
.cf-build { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 30px; align-items: start; padding-bottom: 80px; }
.cf-step { padding: 24px 24px 26px; border-top: var(--bw) solid var(--ink); }
.cf-step:first-of-type { border-top: 0; }
.cf-step-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.cf-step-h h3 { display: flex; gap: 12px; align-items: center; font-size: 20px; }
.cf-step-h h3 i { height: 26px; padding: 0 6px; display: grid; place-items: center; border: var(--bw) solid var(--ink); background: var(--shade); font: normal 400 12px var(--pixel); color: var(--ink); }
.cf-look-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 22px; }
.cf-look-grid > .cf-field, .cf-range-row > .cf-field { margin-top: 0; }
.cf-preview { position: sticky; top: calc(var(--top) + 20px); }
.cf-preview-stage { height: 340px; position: relative; background: radial-gradient(ellipse at 50% 50%, #1d2238, var(--night) 72%); border-bottom: var(--bw) solid var(--ink); }
.cf-preview-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cf-preview-name { padding: 16px 22px 4px; }
.cf-preview-name b { display: block; font: 400 26px var(--pixel); min-height: 34px; margin-top: 6px; }
.cf-summary { margin: 12px 22px 18px; border-top: var(--bw) dotted var(--ink); border-bottom: var(--bw) dotted var(--ink); }
.cf-summary div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.cf-summary div:first-child { border-top: 0; }
.cf-summary span { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-summary .cf-label { padding-top: 3px; }
.cf-preview-go { padding: 0 22px 22px; }
.cf-preview-go p { margin: 14px 0 0; font-size: 13.5px; color: var(--text-3); text-align: center; }

/* ---------- world (full screen, paper cards floating on the night) ---------- */
body.cf-full { overflow: hidden; }
.cf-world { position: fixed; inset: var(--top) 0 0 0; background: radial-gradient(ellipse at 50% 35%, #1b2040, #0d0f17 72%); }
.cf-stage { position: absolute; inset: 0; overflow: hidden; }
.cf-stage > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.cf-float { position: absolute; z-index: 5; background: var(--card); border: var(--bw) solid var(--ink); box-shadow: var(--sh-world); }
.cf-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 10px 16px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; transition: background .12s; }
.cf-row:hover { background: var(--shade); }
.cf-row.on { background: var(--shade); }
.cf-row.boxed { margin-top: 8px; border: var(--bw) solid var(--ink); }
.cf-row canvas { width: 38px; height: 38px; background: var(--night); border: 1px solid var(--ink); }
.cf-row .n { min-width: 0; }
.cf-row .n b { display: flex; align-items: center; gap: 7px; font: 400 14px var(--pixel); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-row .n b em { font: normal 400 10px var(--pixel); text-transform: uppercase; letter-spacing: .1em; color: var(--ink); background: var(--amber); border: 1px solid var(--ink); padding: 1px 5px; }
.cf-row .n span { display: block; font-size: 13px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-row .s { font: 400 11px var(--pixel); text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); text-align: right; }
.cf-row .s i { display: block; width: 8px; height: 8px; margin: 0 0 6px auto; background: var(--text-4); }
.cf-row .s i.on { background: var(--good); }
.cf-row .s i.bad { background: var(--bad); }
.cf-feed-row { padding: 11px 16px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--text-2); }
.cf-feed-row b { color: var(--ink); font-weight: 600; cursor: pointer; }
.cf-feed-row .m { display: flex; justify-content: space-between; gap: 8px; margin-top: 3px; font: 400 11px var(--pixel); color: var(--text-3); }
.cf-feed-row .m span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-feed-row.find .k { background: var(--amber); color: var(--ink); padding: 0 3px; }
.cf-feed-row.err .k { color: var(--bad); }
.cf-side-empty { padding: 36px 22px; text-align: center; color: var(--text-3); font-size: 14.5px; }
.cf-side-empty .cf-btn { margin-top: 16px; }
.cf-stage-tools { position: absolute; right: 16px; top: 16px; display: flex; gap: 10px; z-index: 6; }
.cf-tool { height: 40px; min-width: 40px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: var(--bw) solid var(--ink); background: var(--card); box-shadow: 3px 3px 0 #000; color: var(--ink); font: 400 12px var(--pixel); text-transform: uppercase; letter-spacing: .1em; }
.cf-tool:hover { background: var(--shade); }
.cf-tool:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; }
.cf-tool svg { width: 15px; height: 15px; }
.cf-sel { left: 16px; bottom: 80px; width: 340px; z-index: 6; }
.cf-sel-top { display: flex; gap: 14px; padding: 16px 16px 0; align-items: center; }
.cf-sel-top canvas { width: 66px; height: 66px; border: var(--bw) solid var(--ink); background: var(--night); flex: 0 0 auto; }
.cf-sel-top h3 { font: 400 20px var(--pixel); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-sel-top .o { font-size: 13.5px; color: var(--text-3); margin-top: 3px; }
.cf-sel-x { position: absolute; top: 0; right: 0; z-index: 2; width: 30px; height: 30px; border: 0; border-left: var(--bw) solid var(--ink); background: transparent; color: inherit; font: 400 16px/1 var(--pixel); }
.cf-sel-x:hover { background: var(--ink); color: var(--card); }
.cf-sel-now { margin: 14px 16px 0; padding: 10px 12px; border: var(--bw) solid var(--ink); background: var(--bg); color: var(--text-2); font-size: 14px; line-height: 1.45; }
.cf-sel-now b { color: var(--ink); font: 400 11px var(--pixel); text-transform: uppercase; letter-spacing: .12em; margin-right: 4px; }
.cf-sel-now.find { background: var(--amber); color: #4d3a12; }
.cf-sel .cf-cells { margin: 14px 16px 0; grid-template-columns: repeat(3, 1fr); }
.cf-sel .cf-cells > div { padding: 9px 12px; }
.cf-sel .cf-cells > div:first-child { padding-left: 0; }
.cf-sel .cf-cells b { font-size: 24px; }
.cf-sel-go { display: flex; gap: 12px; padding: 16px 16px 18px; }
.cf-sel-go .cf-btn { flex: 1; }
.cf-place { left: 16px; bottom: 80px; width: 340px; z-index: 6; }
.cf-place-b { padding: 16px 18px 18px; }

/* home: a light HUD around the edges of the world */
body.cf-hud .cf-world { inset: var(--top) 0 0 0; }
.cf-hello { position: absolute; left: 24px; bottom: 24px; z-index: 6; width: min(500px, calc(100vw - 150px)); padding: 26px 28px 22px; background: var(--card); border: var(--bw) solid var(--ink); box-shadow: 7px 7px 0 #000; }
.cf-hello h1 { font-size: 33px; line-height: 1.15; padding-right: 22px; }
.cf-hello h1 span { color: var(--text-3); }
.cf-hello p { margin: 14px 0 0; color: var(--text-2); font-size: 15.5px; line-height: 1.55; }
.cf-hello-cta { display: flex; gap: 14px; margin-top: 22px; flex-wrap: wrap; }
.cf-hello-links { display: flex; align-items: center; gap: 18px; margin-top: 20px; padding-top: 14px; border-top: var(--bw) dotted var(--ink); font-size: 13.5px; color: var(--text-3); flex-wrap: wrap; }
.cf-hello-links a { color: var(--ink); font: 400 11px var(--pixel); text-transform: uppercase; letter-spacing: .12em; text-decoration: underline; text-underline-offset: 4px; }
.cf-hello-links a:hover { background: var(--amber); }
.cf-hello-x { position: absolute; top: 0; right: 0; width: 30px; height: 30px; border: 0; border-left: var(--bw) solid var(--ink); border-bottom: var(--bw) solid var(--ink); background: var(--card); color: var(--ink); font: 400 16px/1 var(--pixel); }
.cf-hello-x:hover { background: var(--ink); color: var(--card); }
.cf-hello-pill { position: absolute; left: 24px; bottom: 24px; z-index: 6; height: 40px; padding: 0 16px; border: var(--bw) solid var(--ink); background: var(--card); box-shadow: 3px 3px 0 #000; color: var(--ink); font: 400 12px var(--pixel); text-transform: uppercase; letter-spacing: .12em; }
.cf-hello-pill:hover { background: var(--amber); }

/* the dock: everyone's crawlers as little windows down the right edge */
.cf-dock { position: absolute; right: 16px; top: 16px; z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 9px; background: var(--card); border: var(--bw) solid var(--ink); box-shadow: var(--sh-world); }
.cf-dock-list { display: flex; flex-direction: column; gap: 10px; }
.cf-av { position: relative; width: 50px; height: 50px; padding: 0; border: var(--bw) solid var(--ink); background: var(--night); transition: transform .1s, box-shadow .1s; }
.cf-av:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.cf-av canvas { width: 100%; height: 100%; display: block; }
.cf-av.mine { box-shadow: 0 0 0 3px var(--amber); }
.cf-av.sel { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
.cf-av.mine.sel { box-shadow: 0 0 0 3px var(--amber), 6px 6px 0 var(--ink); }
.cf-av > i { position: absolute; right: -5px; bottom: -5px; width: 12px; height: 12px; background: var(--text-4); border: var(--bw) solid var(--ink); }
.cf-av > i.on { background: var(--good); }
.cf-av > i.bad { background: var(--bad); }
.cf-av-tip { position: absolute; right: calc(100% + 16px); top: 50%; transform: translateY(-50%) translateX(6px); width: max-content; max-width: 280px; padding: 8px 12px; background: var(--card); border: var(--bw) solid var(--ink); box-shadow: 3px 3px 0 #000; color: var(--ink); text-align: left; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; }
.cf-av-tip b { display: block; font: 400 13px var(--pixel); white-space: nowrap; }
.cf-av-tip small { display: block; margin-top: 2px; font: 400 12.5px var(--ui); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 256px; }
.cf-av:hover .cf-av-tip { opacity: 1; transform: translateY(-50%); }
.cf-dock-all { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 50px; height: 50px; border: var(--bw) solid var(--ink); background: var(--shade); color: var(--ink); }
.cf-dock-all:hover { background: var(--amber); }
.cf-dock-all svg { width: 15px; height: 15px; }
.cf-dock-all b { font: 400 12px var(--pixel); }
.cf-tools-b { top: auto; bottom: 20px; right: 20px; }
body.cf-hud .cf-sel, body.cf-hud .cf-place { left: auto; right: 104px; top: 16px; bottom: auto; }
.cf-style { padding: 0; gap: var(--bw); background: var(--ink); }
.cf-style button { height: 37px; padding: 0 12px; border: 0; background: var(--card); color: var(--text-2); font: 400 12px var(--pixel); text-transform: uppercase; letter-spacing: .1em; }
.cf-style button:hover { color: var(--ink); background: var(--shade); }
.cf-style button.on { background: var(--ink); color: var(--card); }
.cf-sheet { position: absolute; z-index: 8; left: 50%; top: 16px; bottom: 80px; transform: translateX(-50%); width: min(1180px, calc(100% - 32px)); overflow-y: auto; padding: 34px 36px 38px; background: var(--bg); border: var(--bw) solid var(--ink); box-shadow: 8px 8px 0 #000; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.cf-sheet-x { position: sticky; top: 0; float: right; margin: -18px -18px 0 0; width: 32px; height: 32px; border: var(--bw) solid var(--ink); background: var(--card); }
.cf-sheet-foot { margin: 28px 0 0; color: var(--text-3); font-size: 14px; }
body.cf-hud .cf-sheet { top: 16px; bottom: 20px; }
.cf-sheet-narrow { width: min(620px, calc(100% - 32px)); }
.cf-sheet-narrow h2 { font-size: 33px; }
.cf-sheet-sub { margin: 8px 0 20px; color: var(--text-2); font-size: 15px; }
.cf-sheet-bar { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.cf-sheet-bar .cf-input { flex: 1; min-width: 0; }
.cf-sheet-list { max-height: none; box-shadow: none; }
.cf-sheet-list .cf-row:last-child, .cf-sheet-list .cf-feed-row:last-child { border-bottom: 0; }
.cf-sheet-narrow .cf-sheet-foot { margin-top: 20px; }
.cf-place h3 { font: 400 20px var(--pixel); word-break: break-all; }
.cf-place p { margin: 6px 0 12px; color: var(--text-3); font-size: 14px; }

/* ---------- crawler page ---------- */
.cf-c-head { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 36px; padding: 42px 0 30px; align-items: center; }
.cf-c-portrait { height: 320px; position: relative; background: radial-gradient(ellipse at 50% 50%, #1d2238, var(--night) 72%); }
.cf-c-portrait canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cf-c-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; color: var(--text-3); font-size: 15px; }
.cf-c-meta a { color: var(--ink); }
.cf-c-head h1 { font-size: 50px; }
.cf-c-now { margin-top: 18px; display: flex; gap: 10px; align-items: baseline; padding: 12px 14px; border: var(--bw) solid var(--ink); background: var(--card); color: var(--text-2); font-size: 15px; min-width: 0; }
.cf-c-now b { color: var(--ink); flex: 0 0 auto; font: 400 11px var(--pixel); text-transform: uppercase; letter-spacing: .12em; }
.cf-c-now span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-c-head .cf-cells { margin-top: 18px; }
.cf-c-actions { display: flex; gap: 14px; margin-top: 22px; flex-wrap: wrap; }
.cf-c-body { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 26px; padding-bottom: 80px; align-items: start; }
.cf-orders { margin: 0; padding: 0; }
.cf-orders > div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 12px; padding: 13px 18px; border-top: 1px solid var(--line); font-size: 15px; align-items: baseline; }
.cf-orders > div:first-child { border-top: 0; }
.cf-orders dd { margin: 0; color: var(--text-2); min-width: 0; overflow-wrap: anywhere; }
.cf-orders dd a { color: var(--ink); }
.cf-list-tabs { display: flex; gap: var(--bw); border: var(--bw) solid var(--ink); background: var(--ink); }
.cf-list-tabs button { height: 32px; padding: 0 12px; border: 0; background: var(--card); color: var(--text-2); font: 400 12px var(--pixel); text-transform: uppercase; letter-spacing: .1em; }
.cf-list-tabs button:hover { color: var(--ink); background: var(--shade); }
.cf-list-tabs button.on { background: var(--ink); color: var(--card); }
.cf-list-tabs button b { font-weight: 400; opacity: .65; margin-left: 4px; }
.cf-trail-row { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 14px; align-items: baseline; padding: 12px 18px; border-top: 1px solid var(--line); font-size: 14.5px; }
.cf-trail-row:first-child { border-top: 0; }
.cf-trail-row .o { font: 400 11px var(--pixel); color: var(--text-3); text-transform: uppercase; letter-spacing: .12em; }
.cf-trail-row .o.read { color: var(--good); }
.cf-trail-row .o.bad { color: var(--bad); }
.cf-trail-row .t { min-width: 0; }
.cf-trail-row .t a { display: block; color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-trail-row .t a:hover { text-decoration: underline; }
.cf-trail-row .t span { display: block; font: 400 11px var(--pixel); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 3px; }
.cf-trail-row .a { font: 400 11px var(--pixel); color: var(--text-3); white-space: nowrap; }
.cf-finds { padding: 0 20px 4px; display: grid; }
.cf-finds .cf-find-card:first-child { border-top: 0; }
.cf-list-empty { padding: 40px 20px; text-align: center; color: var(--text-3); font-size: 15px; }
.cf-edit { padding: 22px; border-top: var(--bw) solid var(--ink); }

/* ---------- auth ---------- */
.cf-auth { min-height: calc(100vh - var(--top)); display: grid; place-items: center; padding: 40px 20px 80px; }
.cf-auth .cf-card { width: 100%; max-width: 440px; padding: 30px; }
.cf-auth h1 { font-size: 33px; }
.cf-auth > .cf-card > p { margin: 12px 0 24px; color: var(--text-2); font-size: 15.5px; }
.cf-wallet-btn { width: 100%; height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 16px; border: var(--bw) solid var(--ink); background: #ab9ff2; box-shadow: var(--sh); color: #1b1340; font: 600 16px var(--ui); transition: transform .08s, box-shadow .08s; }
.cf-wallet-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.cf-wallet-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.cf-wallet-btn svg { width: 22px; height: 22px; color: #1b1340; }
.cf-wallet-btn span { margin-left: auto; font: 400 11px var(--pixel); text-transform: uppercase; letter-spacing: .1em; color: #3d2f8a; }
.cf-or { display: flex; align-items: center; gap: 12px; margin: 24px 0; font: 400 11px var(--pixel); color: var(--text-3); text-transform: uppercase; letter-spacing: .14em; }
.cf-or::before, .cf-or::after { content: ''; flex: 1; border-top: var(--bw) dotted var(--ink); }
.cf-auth-switch { margin-top: 18px; text-align: center; font-size: 14.5px; color: var(--text-3); }
.cf-auth-switch button { border: 0; background: none; color: var(--ink); padding: 0; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.cf-auth .cf-btn.solid { margin-top: 22px; height: 48px; }

/* ---------- account ---------- */
.cf-acct { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 26px; padding-bottom: 80px; align-items: start; }
.cf-mine-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 18px; border-top: 1px solid var(--line); text-decoration: none; transition: background .12s; }
.cf-mine-row:first-child { border-top: 0; }
.cf-mine-row:hover { background: var(--shade); }
.cf-mine-row canvas { width: 76px; height: 76px; border: var(--bw) solid var(--ink); background: var(--night); }
.cf-mine-row b { font: 400 18px var(--pixel); }
.cf-mine-row .d { font-size: 14px; color: var(--text-3); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-mine-row .r { text-align: right; font: 400 11px var(--pixel); text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); }
.cf-mine-row .r .cf-pill { margin-bottom: 6px; }
.cf-acct-box { padding: 22px; }
.cf-acct-box + .cf-acct-box { border-top: var(--bw) solid var(--ink); }
.cf-acct-box .v { margin-top: 6px; font: 400 13px var(--pixel); color: var(--text-2); overflow-wrap: anywhere; }

/* ---------- nav: more pages, and a menu when they don't fit ---------- */
.cf-nav-in { position: relative; }
.cf-nav-build svg { width: 13px; height: 13px; }
.cf-tabs a.my, .cf-menu nav a.my { display: inline-flex; align-items: center; gap: 8px; }
.cf-tabs a.my { color: var(--ink); }
.cf-tabs a.my i, .cf-menu nav a.my i { width: 9px; height: 9px; background: var(--amber); border: var(--bw) solid var(--ink); flex: none; }
.cf-menu-btn { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; padding: 0; border: var(--bw) solid var(--ink); background: var(--card); box-shadow: var(--sh); color: var(--ink); }
.cf-menu-btn:hover, .cf-menu-btn[aria-expanded="true"] { background: var(--shade); }
.cf-menu-btn svg { width: 18px; height: 18px; }
.cf-menu { position: absolute; top: calc(100% + 8px); right: 20px; width: min(300px, calc(100vw - 24px)); padding: 6px; border: var(--bw) solid var(--ink); background: var(--card); box-shadow: var(--sh-card); z-index: 70; }
.cf-menu nav { display: grid; gap: 0; }
.cf-menu nav a { display: flex; align-items: center; height: 44px; padding: 0 12px; font: 400 14px var(--pixel); color: var(--text-2); text-decoration: none; }
.cf-menu nav a:hover, .cf-menu nav a.on { background: var(--shade); color: var(--ink); }
.cf-menu-foot { margin-top: 6px; padding: 8px 6px 4px; border-top: var(--bw) dotted var(--ink); }
.cf-menu-foot > a:not(.cf-btn) { display: flex; justify-content: space-between; align-items: center; height: 42px; padding: 0 6px; font: 400 14px var(--pixel); color: var(--text-2); text-decoration: none; }
.cf-menu-foot > a:not(.cf-btn):hover { color: var(--ink); }
.cf-menu-foot > a span { color: var(--text-3); }
.cf-foot nav { display: flex; gap: 20px; flex-wrap: wrap; }
.cf-foot nav a { font: 400 11px var(--pixel); text-transform: uppercase; letter-spacing: .12em; }
.cf-foot nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.cf-foot .cf-wrap > span { width: 100%; font-size: 13px; color: var(--text-3); }

/* ---------- content pages ---------- */
.cf-page { min-height: calc(100vh - var(--top) - 160px); }
.cf-page-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.cf-page-head-row > div:first-child { min-width: 0; flex: 1 1 420px; }
.cf-span { grid-column: 1 / -1; }
.cf-filter { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.cf-search { position: relative; flex: 1 1 300px; max-width: 520px; }
.cf-search svg { position: absolute; left: 13px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--text-3); pointer-events: none; z-index: 1; }
.cf-search .cf-input { padding-left: 38px; }
.cf-filter-n { margin-left: auto; font: 400 11px var(--pixel); text-transform: uppercase; letter-spacing: .12em; color: var(--text-2); white-space: nowrap; }
.cf-more { display: flex; justify-content: center; padding: 28px 0 80px; }
.cf-back { display: inline-flex; align-items: center; gap: 6px; margin: 30px 0 14px; font: 400 12px var(--pixel); text-transform: uppercase; letter-spacing: .12em; color: var(--text-2); text-decoration: none; }
.cf-back:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.cf-back svg { width: 15px; height: 15px; }
.cf-card-note { margin: 0; padding: 12px 18px 4px; font-size: 13.5px; color: var(--text-3); }
.cf-st { display: inline-block; width: 8px; height: 8px; background: var(--text-4); margin-right: 6px; vertical-align: 0; }
.cf-st.on { background: var(--good); }
.cf-st.rest { background: var(--text-2); }
.cf-st.bad { background: var(--bad); }
.cf-here { display: inline-flex; align-items: center; gap: 6px; color: var(--good); font: 400 11px var(--pixel); text-transform: uppercase; letter-spacing: .1em; white-space: nowrap; }
.cf-here i { width: 8px; height: 8px; background: var(--good); }

/* a plain caveat above the finds */
.cf-caveat { display: flex; align-items: baseline; gap: 14px; margin: 0 0 6px; padding: 12px 0; font-size: 14px; color: var(--text-2); }
.cf-caveat > span { flex: none; padding: 3px 7px; border: var(--bw) solid var(--ink); background: var(--card); font: 400 11px var(--pixel); text-transform: uppercase; letter-spacing: .12em; color: var(--ink); }
.cf-caveat p { margin: 0; }

/* finds: the title opens the page, the crawler opens its profile */
article.cf-find-card { position: relative; }
.cf-find-card h4 a { color: inherit; text-decoration: none; }
.cf-find-card h4 a::after { content: ''; position: absolute; inset: 0; }
.cf-find-card:hover h4 a { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.cf-find-card .who { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; min-width: 0; text-decoration: none; }
.cf-find-card .who:hover b { text-decoration: underline; text-underline-offset: 3px; }
.cf-find-card.fresh { animation: cf-fresh 2.4s ease-out; }
@keyframes cf-fresh { from { background: rgba(255, 207, 115, .45); } }

/* a site's house, as it stands in the world: roof colour, wall colour, a floor per few visits */
.cf-house { position: relative; display: inline-block; flex: none; width: calc(16px * var(--hs, 1)); height: calc((16px + var(--f, 1) * 4px) * var(--hs, 1)); }
.cf-house::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: calc(7.5px * var(--hs, 1)); background: var(--r); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.cf-house::after { content: ''; position: absolute; left: calc(2px * var(--hs, 1)); right: calc(2px * var(--hs, 1)); top: calc(7px * var(--hs, 1)); bottom: 0; border-radius: 0 0 1px 1px; background: radial-gradient(circle, #ffd27a 0 calc(1.05px * var(--hs, 1)), transparent calc(1.35px * var(--hs, 1))) 0 calc(1.2px * var(--hs, 1)) / 50% calc(4px * var(--hs, 1)), var(--w); }
.cf-tree { position: relative; z-index: 1; flex: none; width: calc(13px * var(--hs, 1)); height: calc(26px * var(--t, 1) * var(--hs, 1)); background: #24503a; clip-path: polygon(50% 0, 78% 38%, 66% 38%, 100% 88%, 56% 88%, 56% 100%, 44% 100%, 44% 88%, 0 88%, 34% 38%, 22% 38%); }
.cf-tree.b { background: #2d6044; }
.cf-sky-gap { flex: none; width: calc(4px * var(--hs, 1)); }
.cf-sky { position: relative; display: flex; align-items: flex-end; justify-content: safe center; gap: 6px; height: 104px; padding: 0 16px 9px; overflow: hidden; border-bottom: var(--bw) solid var(--ink); background: radial-gradient(1.2px 1.2px at 9% 24%, rgba(255, 255, 255, .7), transparent), radial-gradient(1px 1px at 27% 12%, rgba(255, 255, 255, .5), transparent), radial-gradient(1.2px 1.2px at 46% 30%, rgba(255, 236, 200, .6), transparent), radial-gradient(1px 1px at 64% 14%, rgba(255, 255, 255, .55), transparent), radial-gradient(1.3px 1.3px at 83% 26%, rgba(255, 255, 255, .7), transparent), radial-gradient(1px 1px at 93% 9%, rgba(255, 255, 255, .45), transparent), linear-gradient(#0f1328, #1b2244); }
.cf-sky::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: linear-gradient(#335f3c, #24472d); }
.cf-sky { --hs: 1.45; }
.cf-sky .cf-house { z-index: 1; }
.cf-sky.big { --hs: 2; height: 156px; gap: 8px; padding-bottom: 12px; }
.cf-sky.big::after { height: 13px; }
.cf-sky-more { position: absolute; right: 10px; top: 8px; padding: 1px 6px; background: var(--card); border: 1px solid var(--ink); font: 400 11px var(--pixel); color: var(--ink); }

/* the one-crawler stage's Drawn / 3D switch */
.cf-stage-style { position: absolute; top: 12px; right: 12px; z-index: 2; height: auto; box-shadow: none; }
.cf-stage-style button { height: 28px; padding: 0 10px; font-size: 11px; }

/* My Crawler */
.cf-my-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 34px; }
.cf-my-bar h2 { display: flex; align-items: center; gap: 12px; font-size: 22px; }
.cf-my-bar h2::before { content: ''; width: 12px; height: 12px; background: var(--amber); border: var(--bw) solid var(--ink); }
.cf-my-pick { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.cf-my-c { display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 14px 0 4px; border: var(--bw) solid var(--ink); background: var(--card); box-shadow: var(--sh); font: 400 13px var(--pixel); color: var(--text-2); }
.cf-my-c canvas { width: 34px; height: 34px; background: var(--night); border: 1px solid var(--ink); }
.cf-my-c:hover { color: var(--ink); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.cf-my-c.on { color: var(--ink); background: var(--amber); }
.cf-my-bar:not([hidden]) + .cf-c-head { padding-top: 24px; }
.cf-my-empty { padding: 64px 0 90px; }
.cf-my-empty h1 { font-size: 44px; margin-top: 10px; }
.cf-my-empty p { color: var(--text-2); font-size: 17px; max-width: 520px; margin: 14px 0 0; }
.cf-c-side { display: grid; gap: 26px; }
.cf-site-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 18px; border-top: 1px solid var(--line); font-size: 14.5px; }
.cf-site-row:first-child { border-top: 0; }
.cf-card-note + div .cf-site-row:first-child { border-top: 0; }
.cf-site-row > .cf-house { justify-self: center; }
.cf-site-row .t { min-width: 0; }
.cf-site-row .t > a { text-decoration: none; }
.cf-site-row .t > a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.cf-site-row .t b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-site-row .t > span { display: block; font-size: 12.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-site-row .t > span a { color: var(--text-2); }
.cf-site-row .a { font: 400 11px var(--pixel); color: var(--text-3); white-space: nowrap; }
.cf-site-more { padding: 10px 18px 14px; font-size: 13px; color: var(--text-3); border-top: 1px solid var(--line); }

/* towns */
.cf-towns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 22px; }
.cf-towns:empty { display: none; }
.cf-hamlets-sec { margin-top: 52px; padding-bottom: 80px; }
.cf-towns:empty + .cf-list-empty[hidden] + .cf-hamlets-sec { margin-top: 0; }
.cf-hamlets-h { display: flex; align-items: baseline; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.cf-hamlets-h h2 { font-size: 22px; }
.cf-hamlets-h .cf-sub b { color: var(--text-2); font-weight: 400; }
.cf-hamlets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 28px; }
.cf-hamlet { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 58px; padding: 9px 6px; border-top: var(--bw) dotted var(--ink); text-decoration: none; transition: background .12s; }
.cf-hamlet:hover { background: var(--shade); }
.cf-hamlet > .cf-house { justify-self: center; }
.cf-hamlet .t { min-width: 0; }
.cf-hamlet .t b { display: block; font: 400 14px var(--pixel); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-hamlet .t span { display: block; font-size: 12.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-hamlet .a { font: 400 11px var(--pixel); color: var(--text-3); white-space: nowrap; }
#none { padding-bottom: 80px; }
.cf-town { display: block; border: var(--bw) solid var(--ink); background: var(--card); box-shadow: var(--sh-card); overflow: hidden; text-decoration: none; transition: transform .1s, box-shadow .1s; min-width: 0; }
.cf-town:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.cf-town-b { padding: 14px 18px 16px; }
.cf-town-b h3 { font: 400 20px var(--pixel); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-town-b p { margin: 4px 0 0; font-size: 14px; color: var(--text-2); }
.cf-town-f { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-3); }
.cf-town-f > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-town-f b { color: var(--ink); font-weight: 600; }
.cf-town-hero { margin-bottom: 26px; }
.cf-town-title { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding: 20px 24px 22px; flex-wrap: wrap; }
.cf-town-title h1 { font-size: 44px; margin-top: 8px; overflow-wrap: anywhere; }
.cf-town-title p { margin: 8px 0 0; color: var(--text-2); font-size: 15.5px; }
.cf-town-title p a { color: var(--ink); }
.cf-here-sec { margin-bottom: 26px; }
.cf-here-sec h3 { font: 400 18px var(--pixel); margin-bottom: 14px; }
.cf-here-list { display: flex; flex-wrap: wrap; gap: 14px; }
.cf-here-c { display: inline-flex; align-items: center; gap: 10px; max-width: 320px; padding: 5px 14px 5px 5px; border: var(--bw) solid var(--ink); background: var(--card); box-shadow: var(--sh); text-decoration: none; transition: transform .1s, box-shadow .1s; }
.cf-here-c:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.cf-here-c.mine { background: var(--amber); }
.cf-here-c canvas { width: 40px; height: 40px; background: var(--night); border: 1px solid var(--ink); flex: none; }
.cf-here-c > span { min-width: 0; }
.cf-here-c b { display: block; font: 400 14px var(--pixel); }
.cf-here-c small { display: block; font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-town-body { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 26px; align-items: start; padding-bottom: 80px; }
.cf-town-body .cf-trail-row { grid-template-columns: 150px minmax(0, 1fr) auto; align-items: center; }
.cf-trail-row .o.who { display: flex; align-items: center; gap: 8px; min-width: 0; text-transform: none; letter-spacing: 0; font: 400 13px var(--pixel); color: var(--ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-trail-row .o.who:hover { text-decoration: underline; }
.cf-trail-row .o.who canvas { width: 26px; height: 26px; background: var(--night); border: 1px solid var(--ink); flex: none; }

/* someone's page */
.cf-user-head { display: flex; align-items: center; gap: 22px; padding: 48px 0 32px; flex-wrap: wrap; }
.cf-user-tile { width: 84px; height: 84px; display: grid; place-items: center; background: var(--amber); border: var(--bw) solid var(--ink); box-shadow: var(--sh-card); font: 400 44px var(--pixel); color: var(--ink); flex: none; }
.cf-user-head h1 { font-size: 44px; display: flex; align-items: center; gap: 14px; overflow-wrap: anywhere; }
.cf-user-head h1 em { font: normal 400 11px var(--pixel); text-transform: uppercase; letter-spacing: .12em; color: var(--ink); background: var(--amber); border: var(--bw) solid var(--ink); padding: 3px 8px; }
.cf-user-head p { margin: 8px 0 0; color: var(--text-2); font-size: 15.5px; }
.cf-user-act { display: flex; gap: 12px; margin-left: auto; }
.cf-user-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 22px; padding-bottom: 48px; }
.cf-user-finds { padding-bottom: 80px; }
.cf-user-c { display: block; text-decoration: none; transition: transform .1s, box-shadow .1s; }
.cf-user-c:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.cf-user-c-av { height: 190px; position: relative; background: radial-gradient(ellipse at 50% 55%, #1d2238, var(--night) 72%); border-bottom: var(--bw) solid var(--ink); }
.cf-user-c-av canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cf-user-c-b { padding: 16px 18px 18px; }
.cf-user-c-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cf-user-c-h h3 { font: 400 20px var(--pixel); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-user-c .now { margin: 8px 0 0; font-size: 14px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-user-c .now b { color: var(--ink); font-weight: 600; }
.cf-user-c-n { display: flex; gap: 16px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font: 400 11px var(--pixel); text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); flex-wrap: wrap; }
.cf-user-c-n b { color: var(--ink); font-weight: 400; }

/* ---------- how it works ---------- */
.cf-block { margin-top: 30px; padding-bottom: 40px; }
.cf-block + .cf-block { margin-top: 56px; }

/* the three steps, drawn: a page, the crawler reading it, a page with your word in it */
.cf-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: end; border-bottom: var(--bw) solid var(--ink); }
.cf-flow > figure { margin: 0; display: flex; justify-content: center; align-items: flex-end; }
.cf-flow svg.px { width: 132px; height: 145px; display: block; margin-bottom: -1px; }
.cf-flow-c { padding-bottom: 0; }
.cf-flow-c .cf-card { width: 220px; box-shadow: none; border-bottom: 0; }
.cf-flow-c canvas { display: block; width: 100%; height: 136px; background: radial-gradient(ellipse at 50% 55%, #1d2238, var(--night) 72%); }
.cf-flow-arrow { align-self: center; display: grid; justify-items: center; gap: 8px; padding: 0 6px; transform: translateY(-6px); }
.cf-flow-arrow span { font: 400 11px var(--pixel); text-transform: uppercase; letter-spacing: .14em; color: var(--text-2); white-space: nowrap; }
.cf-flow-arrow i { position: relative; display: block; width: 150px; border-top: 2px dotted var(--ink); }
.cf-flow-arrow i::after { content: ''; position: absolute; right: -2px; top: -6px; border: 5px solid transparent; border-left: 7px solid var(--ink); border-right: 0; }
.cf-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; padding-top: 22px; }
.cf-steps > div { max-width: 330px; }
.cf-steps .n { font: 400 11px var(--pixel); text-transform: uppercase; letter-spacing: .14em; color: var(--text-3); }
.cf-steps .n b { font-weight: 400; color: var(--ink); background: var(--amber); padding: 0 3px; }
.cf-steps h3 { margin-top: 10px; font-size: 22px; }
.cf-steps p { margin: 10px 0 0; color: var(--text-2); font-size: 15.5px; }
.cf-steps small { display: block; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2); font: 400 11px/1.6 var(--pixel); text-transform: uppercase; letter-spacing: .12em; color: var(--text-2); }

/* a crawler's states, left to right, with the way back drawn underneath */
.cf-states { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; }
.cf-state { min-width: 0; }
.cf-state-b { padding: 16px 16px 18px; }
.cf-state-b .cf-label { color: var(--ink); }
.cf-state.on .cf-state-b .cf-label { color: var(--good); }
.cf-state.bad .cf-state-b .cf-label { color: var(--bad); }
.cf-state-b p { margin: 10px 0 0; font-size: 14.5px; color: var(--text-2); }
.cf-state-arrow { align-self: center; display: grid; justify-items: center; gap: 8px; padding: 0 14px; }
.cf-state-arrow span { font: 400 11px var(--pixel); text-transform: uppercase; letter-spacing: .12em; color: var(--text-2); text-align: center; max-width: 130px; }
.cf-state-arrow i { position: relative; display: block; width: 104px; border-top: 2px dotted var(--ink); }
.cf-state-arrow i::after { content: ''; position: absolute; right: -2px; top: -6px; border: 5px solid transparent; border-left: 7px solid var(--ink); border-right: 0; }
.cf-state-arrow.back i::after { right: auto; left: -2px; border-left: 0; border-right: 7px solid var(--ink); }
.cf-state-arrow.on span { color: var(--good); }
.cf-state-arrow.on i { border-top-color: var(--good); }
.cf-state-arrow.on i::after { border-left-color: var(--good); }
.cf-state-arrow.bad span { color: var(--bad); }
.cf-state-arrow.bad i { border-top-color: var(--bad); }
.cf-state-arrow.bad i::after { border-right-color: var(--bad); }
/* the way back, on the same columns as the cards: from under stuck and resting into crawling */
.cf-loop { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; height: 56px; margin-top: 8px; }
.cf-loop > * { grid-row: 1; }
.cf-loop b { display: block; border: 0 dotted var(--ink); }
.cf-loop .l { grid-column: 1; margin-left: 50%; border-width: 0 0 2px 2px; }
.cf-loop .m { grid-column: 2 / 5; border-bottom-width: 2px; }
.cf-loop .r { grid-column: 5; margin-right: 50%; border-width: 0 2px 2px 0; }
.cf-loop .up { grid-column: 3; justify-self: center; position: relative; border-left-width: 2px; margin-top: 12px; }
.cf-loop .up::before { content: ''; position: absolute; left: -6px; top: -9px; border: 5px solid transparent; border-bottom: 7px solid var(--ink); border-top: 0; }
.cf-loop span { justify-self: center; align-self: end; transform: translateY(50%); padding: 0 10px; background: var(--bg); font: 400 11px var(--pixel); text-transform: uppercase; letter-spacing: .12em; color: var(--text-2); white-space: nowrap; }
.cf-loop .a { grid-column: 1 / 3; }
.cf-loop .b { grid-column: 4 / 6; }

/* pace: two minutes of one crawler's reading, a square per three seconds */
.cf-pace { margin-top: 48px; }
.cf-pace-h { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cf-pace-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) 140px; gap: 14px; align-items: center; margin-top: 8px; }
.cf-pace-row > span { font: 400 11px var(--pixel); text-transform: uppercase; letter-spacing: .12em; color: var(--ink); }
.cf-pace-row > em { font: normal 400 11px var(--pixel); text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); text-align: right; }
.cf-pace-bar { display: grid; grid-template-columns: repeat(40, 1fr); gap: 3px; }
.cf-pace-bar i { height: 18px; border: 1px solid var(--ink); background: var(--card); }
.cf-pace-bar i.r { background: var(--ink); }
.cf-pace-axis { display: grid; grid-template-columns: 76px minmax(0, 1fr) 140px; gap: 14px; margin-top: 8px; }
.cf-pace-axis > div { display: flex; justify-content: space-between; font: 400 11px var(--pixel); color: var(--text-3); }
.cf-legend { display: flex; gap: 12px 40px; flex-wrap: wrap; margin-top: 26px; font-size: 14px; color: var(--text-2); }
.cf-legend b { font: 400 11px var(--pixel); text-transform: uppercase; letter-spacing: .12em; color: var(--ink); margin-right: 4px; }

/* the world, and the rules every crawler keeps */
.cf-how-sec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.cf-how-points { margin: 0; padding: 0; list-style: none; }
.cf-how-points li { position: relative; padding: 13px 0 13px 24px; border-top: var(--bw) dotted var(--ink); color: var(--text-2); font-size: 15.5px; }
.cf-how-points li:first-child { border-top: 0; padding-top: 0; }
.cf-how-points li::before { content: ''; position: absolute; left: 2px; top: 22px; width: 8px; height: 8px; background: var(--ink); }
.cf-how-points li:first-child::before { top: 9px; }
.cf-how-points li b { color: var(--ink); font-weight: 600; }
.cf-how-world { margin-bottom: 0; }
.cf-how-world-cap { padding: 11px 16px; font: 400 11px var(--pixel); text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); }
.cf-how-world-cap a { color: var(--ink); }
.cf-spec { display: grid; grid-template-columns: 1fr 1fr; }
.cf-spec > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 14px 18px; border-top: 1px solid var(--line); font-size: 15px; color: var(--text-2); align-items: baseline; }
.cf-spec > div:nth-child(-n + 2) { border-top: 0; }
.cf-spec > div:nth-child(2n) { border-left: 1px solid var(--line); }
.cf-spec .cf-label { color: var(--ink); }
.cf-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; }
.cf-faq > div { padding: 16px 0 18px; border-top: var(--bw) dotted var(--ink); }
.cf-faq h3 { font: 400 16px var(--pixel); }
.cf-faq p { margin: 8px 0 0; color: var(--text-2); font-size: 15.5px; }
.cf-how-end { text-align: center; margin-top: 40px; padding: 64px 0 90px; border-top: var(--bw) solid var(--ink); }
.cf-how-end p { color: var(--text-2); margin: 12px 0 26px; font-size: 17px; }

/* ---------- learning: votes, what it's learned, asking it, what it knows ---------- */
.cf-find-card .foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.cf-find-card .foot .u { margin-top: 0; flex: 1; min-width: 0; }
.cf-vote { position: relative; z-index: 1; display: flex; gap: 6px; flex: none; }
.cf-vote button { width: 30px; height: 28px; display: grid; place-items: center; padding: 0; border: var(--bw) solid var(--ink); background: var(--card); color: var(--ink); transition: background .12s, color .12s; }
.cf-vote button svg { width: 15px; height: 15px; }
.cf-vote button.down svg { transform: rotate(180deg); }
.cf-vote button:hover { background: var(--shade); }
.cf-vote button.on { color: var(--ink); background: var(--amber); }
.cf-vote button.down.on { color: var(--card); background: var(--ink); }
.cf-find-card.meh { opacity: .5; }
.cf-find-card.meh:hover { opacity: .85; }

.cf-learn { padding: 6px 18px 18px; }
.cf-learn-rate { margin-top: 12px; padding: 12px 14px; border: var(--bw) solid var(--ink); }
.cf-learn-rate > div { display: grid; grid-template-columns: 62px minmax(0, 1fr) 76px; gap: 10px; align-items: center; font-size: 13.5px; }
.cf-learn-rate > div + div { margin-top: 8px; }
.cf-learn-rate span { font: 400 11px var(--pixel); text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); }
.cf-learn-rate > div > i { height: 10px; border: 1px solid var(--ink); background: var(--card); overflow: hidden; }
.cf-learn-rate > div > i > i { display: block; height: 100%; background: var(--text-3); }
.cf-learn-rate > div:nth-child(2) > i > i { background: var(--amber); }
.cf-learn-rate b { font: 400 13px var(--pixel); text-align: right; font-variant-numeric: tabular-nums; }
.cf-learn-rate p { margin: 8px 0 0; font-size: 12.5px; color: var(--text-3); }
.cf-learn-row { margin-top: 16px; }
.cf-learn-row > div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cf-learn-row small { display: block; margin-top: 8px; font-size: 12.5px; color: var(--text-3); }
.cf-learn .cf-chip { font-size: 12px; height: 28px; padding: 0 9px; }
.cf-learn .cf-chip.site { color: var(--text-2); background: var(--card); }
.cf-learn .cf-chip.site::before { content: ''; width: 6px; height: 6px; margin-right: 6px; background: var(--text-3); }
.cf-chip.add { cursor: pointer; border: var(--bw) dashed var(--ink); background: var(--card); gap: 6px; transition: background .12s; }
.cf-chip.add i { font-style: normal; color: var(--ink); }
.cf-chip.add:hover { background: var(--amber); border-style: solid; }
.cf-learn-note, .cf-learn-tip { margin: 14px 0 0; font-size: 13.5px; color: var(--text-3); line-height: 1.5; }
.cf-learn-tip { padding-top: 12px; border-top: var(--bw) dotted var(--ink); }

.cf-ask { display: flex; flex-direction: column; min-height: 420px; }
.cf-ask-log { flex: 1; max-height: 560px; overflow-y: auto; padding: 18px 18px 6px; display: flex; flex-direction: column; gap: 16px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.cf-msg { display: flex; gap: 10px; align-items: flex-end; max-width: 88%; }
.cf-msg canvas { width: 34px; height: 34px; background: var(--night); border: 1px solid var(--ink); flex: none; }
.cf-msg .b { padding: 11px 14px; font-size: 15px; line-height: 1.55; min-width: 0; border: var(--bw) solid var(--ink); }
.cf-msg .b p { margin: 0; }
.cf-msg .b p + p, .cf-msg .b p + blockquote, .cf-msg .b blockquote + blockquote { margin-top: 10px; }
.cf-msg.them .b { background: var(--card); color: var(--ink); box-shadow: var(--sh); }
.cf-msg.you { align-self: flex-end; }
.cf-msg.you .b { background: var(--shade); color: var(--ink); }
.cf-msg .cite { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; margin: 0 1px; background: var(--ink); color: var(--card); font: 400 11px/1 var(--pixel); text-decoration: none; vertical-align: 2px; }
.cf-msg .cite:hover { background: var(--amber); color: var(--ink); }
.cf-msg blockquote { margin: 0; padding: 2px 0 2px 12px; border-left: 3px solid var(--line-2); }
.cf-msg blockquote p { font-size: 14px; color: var(--text-2); }
.cf-msg blockquote mark { background: var(--amber); color: var(--ink); padding: 0 2px; }
.cf-msg blockquote a { display: inline-block; margin-top: 4px; font: 400 11px var(--pixel); color: var(--ink); }
.cf-src { margin: 10px 0 0; padding: 10px 0 0 18px; border-top: var(--bw) dotted var(--ink); font-size: 13px; }
.cf-src li { margin-top: 3px; color: var(--text-3); }
.cf-src a { color: var(--ink); font-weight: 600; text-decoration: none; }
.cf-src a:hover { text-decoration: underline; }
.cf-src span { margin-left: 6px; color: var(--text-3); font-size: 12px; }
.cf-dots { display: inline-flex; gap: 4px; padding: 4px 2px; }
.cf-dots i { width: 6px; height: 6px; background: var(--ink); animation: cf-dot 1s infinite steps(2, jump-none); }
.cf-dots i:nth-child(2) { animation-delay: .15s; }
.cf-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes cf-dot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.cf-ask-try { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 18px 0; }
.cf-ask-try:empty { display: none; }
.cf-ask-try span { font: 400 11px var(--pixel); color: var(--text-3); text-transform: uppercase; letter-spacing: .12em; margin-right: 2px; }
.cf-ask-try button { height: 30px; padding: 0 10px; border: 1px solid var(--line-2); background: var(--card); color: var(--text-2); font: 400 13px var(--ui); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-ask-try button:hover { color: var(--ink); border-color: var(--ink); background: var(--shade); }
.cf-ask-form { display: flex; gap: 12px; padding: 12px 18px 18px; }
.cf-ask-form .cf-input { flex: 1; min-width: 0; }
.cf-ask-form .cf-btn { height: 44px; }

.cf-knows { padding: 6px 0 4px; }
.cf-kmap { display: block; width: 100%; height: 440px; font: 400 12px var(--pixel); }
.cf-kmap line { stroke: var(--text-3); transition: stroke-opacity .2s, stroke .2s; }
.cf-kmap .km-n { cursor: pointer; outline: none; animation: km-in .5s backwards cubic-bezier(.3, 1.4, .5, 1); animation-delay: var(--d); transform-box: fill-box; transform-origin: center; }
@keyframes km-in { from { opacity: 0; transform: scale(.6); } }
.cf-kmap .km-n circle { fill: var(--card); stroke: var(--ink); stroke-width: 1.5; transition: fill .2s, stroke .2s; }
.cf-kmap .km-n text { fill: var(--text-2); paint-order: stroke; stroke: var(--card); stroke-width: 4px; stroke-linejoin: round; transition: fill .2s, opacity .2s; }
.cf-kmap .km-n.top circle { fill: var(--amber); stroke: var(--ink); }
.cf-kmap .km-n.top text { fill: var(--ink); }
.cf-kmap .km-n:hover circle, .cf-kmap .km-n:focus-visible circle, .cf-kmap .km-n.picked circle { fill: var(--ink); stroke: var(--ink); }
.cf-kmap .km-n:hover text, .cf-kmap .km-n.picked text { fill: var(--ink); }
.cf-kmap.focus .km-n:not(.lit) { opacity: .3; }
.cf-kmap.focus line:not(.lit) { stroke-opacity: .05 !important; }
.cf-kmap line.lit { stroke: var(--ink); stroke-opacity: .8 !important; }
.cf-ktopic { border-top: var(--bw) solid var(--ink); }
.cf-khint { margin: 0; padding: 14px 18px 16px; font-size: 13.5px; color: var(--text-3); }
.cf-khead { display: flex; align-items: baseline; gap: 10px; padding: 14px 18px 10px; }
.cf-khead b { font: 400 17px var(--pixel); }
.cf-khead span { font-size: 13px; color: var(--text-3); }

/* ---------- misc ---------- */
#cf-toasts { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 100; display: grid; gap: 10px; }
.cf-toast { padding: 11px 16px; border: var(--bw) solid var(--ink); background: var(--card); color: var(--ink); box-shadow: var(--sh); font: 400 13px var(--pixel); transition: opacity .3s, transform .3s; }
.cf-toast.bad { background: var(--bad); color: #fff; }
.cf-toast.out { opacity: 0; transform: translateY(6px); }
.cf-404 { min-height: calc(100vh - var(--top)); display: grid; place-items: center; text-align: center; padding: 40px 20px; }
.cf-404 p { color: var(--text-2); margin: 12px 0 26px; }
.cf-skel { font: 400 12px var(--pixel); text-transform: uppercase; letter-spacing: .12em; color: var(--text-3); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .cf-hero { grid-template-columns: 1fr; min-height: 0; max-height: none; padding-top: 44px; }
  .cf-city { margin: 0 -28px; height: 560px; }
  .cf-build, .cf-c-body, .cf-acct { grid-template-columns: 1fr; }
  .cf-preview { position: static; order: -1; }
  .cf-preview-stage { height: 260px; }
  .cf-how { grid-template-columns: 1fr; }
  .cf-flow-arrow i { width: 90px; }
  .cf-state-arrow { padding: 0 8px; }
  .cf-state-arrow i { width: 64px; }
}
@media (max-width: 860px) {
  body.cf-hud .cf-sel, body.cf-hud .cf-place, .cf-sel, .cf-place { left: 10px; right: 10px; top: 10px; bottom: auto; width: auto; z-index: 9; }
  /* phones: the dock becomes a row along the bottom, the pitch sits just above it */
  .cf-dock { top: auto; bottom: 12px; left: 10px; right: 10px; flex-direction: row; padding: 7px; }
  .cf-dock-list { flex-direction: row; overflow-x: auto; scrollbar-width: none; flex: 1; gap: 8px; padding: 4px; }
  .cf-av { width: 42px; height: 42px; flex: none; }
  .cf-av > i { right: -3px; bottom: -3px; width: 10px; height: 10px; }
  .cf-av-tip { display: none; }
  .cf-dock-all { width: 42px; height: 42px; flex: none; }
  .cf-hello { left: 12px; right: 12px; bottom: 84px; width: auto; padding: 18px 18px 16px; box-shadow: 5px 5px 0 #000; }
  .cf-hello h1 { font-size: 24px; }
  .cf-hello p, .cf-hello-links span { display: none; }
  .cf-hello-cta { margin-top: 14px; gap: 10px; }
  .cf-hello-links { margin-top: 14px; padding-top: 10px; }
  .cf-hello .cf-btn.big { height: 42px; font-size: 11px; letter-spacing: .08em; padding: 0 12px; }
  .cf-hello-pill { bottom: 84px; left: 12px; }
  .cf-tools-b { display: none; }
  .cf-sheet, body.cf-hud .cf-sheet { top: 10px; bottom: 10px; width: calc(100% - 20px); padding: 24px 18px 28px; }
  .cf-stage-hint { display: none; }
  .cf-c-head { grid-template-columns: 1fr; }
  .cf-c-portrait { height: 240px; }
  .cf-tabs { display: none; }
  .cf-lead { flex-wrap: wrap; }
  .cf-lead > i { display: none; }
  .cf-lead > span { flex-basis: 100%; order: 3; }
  .cf-lead > em { flex: 1 1 100%; order: 4; margin-top: -6px; line-height: 1.6; }
  .cf-flow { grid-template-columns: 1fr; justify-items: center; border-bottom: 0; }
  .cf-flow > figure { border-bottom: var(--bw) solid var(--ink); width: 100%; }
  .cf-flow-arrow { padding: 14px 0; transform: none; }
  .cf-flow-arrow i { width: 0; height: 44px; border-top: 0; border-left: 2px dotted var(--ink); }
  .cf-flow-arrow i::after { right: auto; left: -6px; top: auto; bottom: -2px; border: 5px solid transparent; border-top: 7px solid var(--ink); border-bottom: 0; }
  .cf-steps { grid-template-columns: 1fr; gap: 24px; }
  .cf-states { grid-template-columns: 1fr; }
  .cf-state-arrow { padding: 12px 0; }
  .cf-state-arrow i { width: 0; height: 36px; border-top: 0; border-left: 2px dotted var(--ink); }
  .cf-state-arrow i::after, .cf-state-arrow.back i::after { left: -6px; right: auto; top: auto; bottom: -2px; border: 5px solid transparent; border-top: 7px solid var(--ink); border-bottom: 0; }
  .cf-state-arrow.on i { border-left-color: var(--good); }
  .cf-state-arrow.on i::after { border-top-color: var(--good); }
  .cf-state-arrow.bad i { border-left-color: var(--bad); }
  .cf-state-arrow.bad i::after { border-top-color: var(--bad); }
  .cf-state-arrow.back { order: 0; }
  .cf-loop { display: none; }
  .cf-how-sec { grid-template-columns: 1fr; gap: 24px; }
  .cf-spec { grid-template-columns: 1fr; }
  .cf-spec > div:nth-child(2) { border-top: 1px solid var(--line); }
  .cf-spec > div:nth-child(2n) { border-left: 0; }
  .cf-pace-row, .cf-pace-axis { grid-template-columns: 60px minmax(0, 1fr); }
  .cf-pace-row > em, .cf-pace-axis > span:last-child { display: none; }
  .cf-pace-bar { gap: 2px; }
}
@media (max-width: 640px) {
  :root { --nav-h: 56px; }
  .cf-wrap { padding: 0 16px; }
  .cf-nav-in { padding: 0 16px; gap: 10px; }
  h1 { font-size: 36px; }
  h2 { font-size: 26px; }
  .cf-page-head h1 { font-size: 33px; }
  .cf-c-head h1 { font-size: 33px; }
  .cf-nav-r .cf-btn.ghost { display: none; }
  .cf-nav-r .cf-btn.solid { height: 36px; padding: 0 12px; font-size: 11px; }
  .cf-me { max-width: 160px; overflow: hidden; }
  .cf-hero { padding-top: 34px; }
  .cf-city { margin: 0 -16px; height: 440px; min-height: 0; }
  .cf-cells { grid-template-columns: repeat(2, 1fr); }
  .cf-cells > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .cf-cells > div:nth-child(n + 3) { border-top: var(--bw) dotted var(--ink); }
  .cf-look-grid, .cf-range-row { grid-template-columns: 1fr; }
  .cf-sec { padding: 46px 0; }
  .cf-sec-head { flex-direction: column; align-items: flex-start; }
  .cf-trail-row { grid-template-columns: 1fr; gap: 2px; }
  .cf-auth .cf-card { padding: 22px; }
  .cf-caveat { flex-direction: column; gap: 8px; }
  .cf-pace-bar i { height: 14px; }
}

/* the newer pages */
@media (max-width: 1080px) {
  /* the other pages fold into the menu; My Crawler stays up top */
  .cf-tabs { display: flex; }
  .cf-tabs a:not(.keep) { display: none; }
  .cf-menu-btn { display: inline-flex; }
  .cf-nav-build { display: none; }
}
@media (max-width: 1100px) {
  .cf-towns, .cf-user-grid, .cf-hamlets { grid-template-columns: repeat(2, 1fr); }
  .cf-town-body { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cf-menu { right: 12px; }
  .cf-nav-r .cf-me, .cf-nav-r .cf-btn.solid { display: none; }
  .cf-tabs a.my { padding: 7px 9px; }
  .cf-finds-grid, .cf-towns, .cf-user-grid, .cf-faq, .cf-hamlets { grid-template-columns: 1fr; }
  .cf-town-title h1, .cf-user-head h1, .cf-my-empty h1 { font-size: 30px; }
  .cf-sky.big { height: 124px; }
  .cf-sky.big { --hs: 1.55; }
  .cf-filter-n { margin-left: 0; }
  .cf-town-body .cf-trail-row { grid-template-columns: 1fr; }
  .cf-user-act { margin-left: 0; }
  .cf-my-bar h2 { font-size: 20px; }
  .cf-kmap { height: 360px; }
  .cf-msg { max-width: 100%; }
  .cf-list-tabs { flex-wrap: wrap; }
}