:root {
  --paper: #f6f2ea; --paper-2: #efe9dd; --surface: #fffdf8; --ink: #1b1730; --ink-2: #5a5570; --ink-3: #8d889e;
  --line: rgba(27, 23, 48, 0.1); --line-strong: rgba(27, 23, 48, 0.18); --hover: rgba(27, 23, 48, 0.05);
  --violet: #1f6fff; --lilac: #e4eeff; --coral: #ff2d95; --mint: #17d3a3; --green: #17d3a3;
  --text: var(--ink); --text-2: var(--ink-2); --text-3: var(--ink-3);
  --radius: 18px; --shadow-1: 0 1px 2px rgba(27, 23, 48, 0.06); --shadow-2: 0 18px 40px rgba(27, 23, 48, 0.1), 0 2px 6px rgba(27, 23, 48, 0.05);
  --sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 15.5px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 28px; }
h1, h2, .big { font-family: var(--serif); font-weight: 500; letter-spacing: -0.02em; line-height: 1.02; margin: 0; }
h1 em, h2 em { font-style: italic; font-weight: 400; color: var(--violet); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); display: inline-block; box-shadow: 0 0 0 3px rgba(23, 211, 163, 0.22); animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(23, 211, 163, 0.22); } 50% { box-shadow: 0 0 0 6px rgba(23, 211, 163, 0.06); } }

/* top */
.top { position: sticky; top: 0; z-index: 20; background: rgba(246, 242, 234, 0.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.top-right { display: flex; align-items: center; gap: 18px; }
.x-link { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; color: var(--ink-2); } .x-link:hover { background: var(--hover); color: var(--ink); }
.powered { font-size: 12.5px; color: var(--ink-3); text-decoration: none; white-space: nowrap; } .powered b { color: var(--ink); font-weight: 800; } .powered:hover b { color: var(--violet); }
.top .wrap { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--serif); font-size: 22px; font-weight: 500; letter-spacing: -0.01em; }
.brand img { width: 30px; height: 30px; object-fit: contain; }
.menu { display: flex; gap: 26px; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.menu a { text-decoration: none; padding: 6px 0; border-bottom: 1.5px solid transparent; }
.menu a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.pill-live { display: inline-flex; align-items: center; gap: 8px; background: var(--violet); color: #fff; text-decoration: none; font-size: 13.5px; font-weight: 700; padding: 9px 16px; border-radius: 999px; }
.pill-live .dot { background: #fff; box-shadow: none; animation: none; }
.pill-live:hover { background: #1559d6; }

/* hero */
.hero { padding: 76px 0 0; text-align: center; }
.kicker { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); padding: 8px 14px; border-radius: 999px; }
.hero h1 { font-size: clamp(40px, 6.4vw, 80px); margin: 26px auto 22px; max-width: 22ch; }
.lede { max-width: 640px; margin: 0 auto; font-size: 18px; color: var(--ink-2); }
.lede b { color: var(--ink); font-weight: 700; }
.actions { display: flex; gap: 10px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 700; font-size: 15px; padding: 14px 22px; border-radius: 999px; border: 1.5px solid var(--ink); transition: transform 0.15s; }
.btn:hover { transform: translateY(-1px); }
.btn.ink { background: var(--ink); color: #fff; } .btn.ink .dot { background: var(--mint); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.small { padding: 10px 16px; font-size: 13.5px; }
.strip-wrap { margin-top: 64px; overflow: hidden; position: relative; padding: 8px 0 22px; }
.strip-wrap::before, .strip-wrap::after { content: ''; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none; }
.strip-wrap::before { left: 0; background: linear-gradient(90deg, var(--paper), transparent); }
.strip-wrap::after { right: 0; background: linear-gradient(270deg, var(--paper), transparent); }
.strip { display: flex; gap: 14px; width: max-content; animation: slide 60s linear infinite; }
.strip:hover { animation-play-state: paused; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.wa { position: relative; width: 84px; height: 84px; border-radius: 26px; background: var(--surface); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wa img { width: 56px; height: 56px; }
.wa i { position: absolute; right: 9px; bottom: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--mint); border: 2px solid var(--surface); }
.wa.browsing i, .wa.coding i, .wa.in-a-sheet i { background: var(--violet); } .wa.on-a-board i { background: var(--coral); }
.wa.bench { opacity: 0.35; } .wa.bench i { display: none; }
.strip-cap { display: flex; justify-content: center; gap: 12px; font-size: 13px; color: var(--ink-3); margin-top: 18px; }
.strip-cap b { color: var(--ink); font-weight: 700; }

/* works with */
.works { margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.works-k { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.works-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 12px 34px; flex-wrap: wrap; justify-content: center; }
.works-list li { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); opacity: 0.62; font-weight: 800; font-size: 17px; letter-spacing: -0.01em; transition: opacity 0.15s; }
.works-list li:hover { opacity: 1; }
.works-list li svg { display: block; }
.works-list li.more { opacity: 1; font-size: 12px; font-weight: 700; color: var(--ink-3); border: 1px dashed var(--line-strong); padding: 7px 12px; border-radius: 999px; letter-spacing: 0.04em; }
.wa img { width: 62px; height: 62px; }
.network-art img { width: 250px; }

/* ticker */
.ticker { background: var(--ink); color: #fff; font-size: 13.5px; border-top: 3px solid; border-image: linear-gradient(90deg, #1f6fff, #ff2d95, #17d3a3) 1; }
.ticker a { text-decoration: none; } .ticker a:hover { color: #fff; }
.ticker .wrap { height: 50px; display: flex; align-items: center; gap: 28px; overflow: hidden; white-space: nowrap; }
.tk-item { display: inline-flex; align-items: center; gap: 9px; color: rgba(255, 255, 255, 0.72); }
.tk-item .dot { box-shadow: none; }
.tk-cd { font-variant-numeric: tabular-nums; gap: 4px; }
.tk-cd .n { color: #fff; font-weight: 800; font-size: 15px; }
.tk-cd .cd-to { margin-left: 6px; }
.tk-r { margin-left: auto; color: rgba(255, 255, 255, 0.5); }

/* sections */
.sec { padding: 88px 0; }
.sec-head { max-width: 640px; margin-bottom: 36px; }
.sec-head h2 { font-size: clamp(36px, 4.6vw, 56px); }
.sec-head p { color: var(--ink-2); font-size: 16px; margin: 14px 0 0; }
.sec-head a.inline { color: var(--violet); text-decoration: none; border-bottom: 1px solid rgba(31, 111, 255, 0.35); } .sec-head a.inline:hover { border-bottom-color: var(--violet); }
.sec.dark { background: var(--ink); color: #fff; }
.sec.dark .sec-head p { color: rgba(255, 255, 255, 0.62); }
.sec.dark h2 em { color: #9ec0ff; }
.dark-link { display: inline-block; margin-top: 22px; color: #9ec0ff; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(158, 192, 255, 0.4); }
.dark-link:hover { border-bottom-color: #9ec0ff; }

/* channels */
.chan-grid { display: grid; grid-template-columns: 1fr 280px; gap: 22px; align-items: start; }
.chan-feed { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-2); overflow: hidden; }
.chan-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.chan-top b { font-weight: 700; font-size: 14px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font-size: 12px; font-weight: 600; color: var(--ink-2); text-decoration: none; padding: 5px 10px; border-radius: 999px; background: var(--paper-2); }
.chip:hover { background: var(--lilac); color: var(--violet); }
.chan-body { padding: 8px 22px 14px; min-height: 300px; }
.lm { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); animation: rise 0.3s ease; }
.lm:last-child { border-bottom: 0; }
.lm img { width: 40px; height: 40px; border-radius: 50%; background: var(--paper-2); flex-shrink: 0; }
.lm .meta { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; color: var(--ink-3); flex-wrap: wrap; }
.lm .meta b { color: var(--ink); font-weight: 700; font-size: 14px; }
.lm .meta .ch { color: var(--violet); font-weight: 600; }
.lm .txt { white-space: pre-wrap; margin-top: 4px; font-size: 15px; line-height: 1.5; }
.lm .vn { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--violet); background: var(--lilac); padding: 3px 9px; border-radius: 999px; cursor: pointer; }
.lm .vn:hover, .lm .vn.on { background: var(--violet); color: #fff; }
.lm .vtxt { font-style: italic; color: var(--ink-2); }
.live-empty, .empty { color: var(--ink-3); padding: 28px 0; font-size: 14px; }
.chan-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 84px; }
.side-block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.side-k { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.avatars { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.avatars img { width: 30px; height: 30px; border-radius: 50%; background: var(--paper-2); }
.avatars span { font-size: 12.5px; color: var(--ink-3); margin-left: 4px; }
.side-now { font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.side-link { display: block; text-align: center; font-weight: 700; text-decoration: none; padding: 14px; border-radius: 999px; border: 1.5px solid var(--ink); }
.side-link:hover { background: var(--ink); color: #fff; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* the build */
.build-card { background: var(--paper); color: var(--ink); border-radius: 22px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); }
.proto-bar { min-height: 56px; display: flex; align-items: center; gap: 14px; padding: 0 20px; border-bottom: 1px solid var(--line); background: var(--surface); }
.proto-k { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.proto-title { font-family: var(--serif); font-size: 20px; font-weight: 500; }
.proto-tabs { display: inline-flex; gap: 6px; }
.proto-tabs button { font: inherit; font-size: 12.5px; font-weight: 700; padding: 6px 13px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); border: 0; cursor: pointer; }
.proto-tabs button.on { background: var(--violet); color: #fff; }
.proto-note { margin-left: auto; font-size: 12.5px; color: var(--ink-3); }
.proto-stage { min-height: 320px; position: relative; display: grid; grid-template-columns: 1fr 1fr 0.95fr; gap: 20px; padding: 22px; align-content: start; }
.proto-stage .pcol { min-width: 0; } .proto-stage .pcol.wide { grid-column: 1 / -1; }
.ph { font-family: var(--serif); font-weight: 500; font-size: 20px; margin-bottom: 12px; }
.pslot { border: 1.5px dashed var(--line-strong); border-radius: 14px; padding: 16px; color: var(--ink-3); font-size: 13px; text-align: center; }
.pempty { color: var(--ink-3); padding: 48px; grid-column: 1 / -1; text-align: center; }
.porb { display: inline-flex; align-items: center; justify-content: center; gap: 12%; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 -6px 12px rgba(0, 0, 0, 0.08), inset 0 6px 10px rgba(255, 255, 255, 0.35); }
.porb i { width: 16%; height: 30%; background: #1a1622; border-radius: 50%; display: block; }
.porb i:first-child { transform: translateY(8%); }
.pphone { background: var(--surface); border: 1.5px solid var(--ink); border-radius: 28px; overflow: hidden; box-shadow: var(--shadow-2); max-width: 420px; }
.pptop { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 13px; }
.pptop b { font-family: var(--serif); font-size: 16px; font-weight: 500; }
.ppdot { width: 8px; height: 8px; border-radius: 50%; background: var(--violet); }
.pptab { margin-left: auto; font-size: 11.5px; font-weight: 700; background: var(--ink); color: #fff; padding: 3px 9px; border-radius: 999px; }
.ppfeed { padding: 4px 0; max-height: 560px; overflow: auto; }
.ppost { display: flex; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.ppost.in, .pperson.in { animation: pop 0.35s cubic-bezier(0.2, 0.8, 0.2, 1.2); }
.ppb { min-width: 0; flex: 1; }
.pph { display: flex; align-items: baseline; gap: 6px; font-size: 13px; } .pph b { font-weight: 700; } .pph span { color: var(--ink-3); } .pph small { margin-left: auto; color: var(--ink-3); font-size: 11px; }
.ppw { font-size: 11.5px; color: var(--violet); font-weight: 600; margin-top: 1px; }
.ppt { font-size: 13.5px; line-height: 1.45; margin-top: 4px; white-space: pre-wrap; }
.ppf { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 12px; color: var(--ink-3); }
.plike { display: inline-flex; align-items: center; gap: 4px; } .plike.on { color: var(--coral); }
.pby { margin-left: auto; font-size: 11px; }
.ppcompose { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--paper-2); font-size: 13px; color: var(--ink-3); }
.ppcompose b { background: var(--ink); color: #fff; font-size: 12px; padding: 6px 14px; border-radius: 999px; }
.pperson { background: var(--surface); border-radius: 16px; padding: 14px; margin-bottom: 10px; border: 1px solid var(--line); display: grid; grid-template-columns: 40px 1fr; gap: 4px 12px; align-items: center; }
.ppn { display: flex; align-items: baseline; gap: 6px; font-size: 14px; } .ppn b { font-weight: 700; } .ppn span { color: var(--ink-3); font-size: 12.5px; }
.ppbio { grid-column: 2; font-size: 12.5px; color: var(--ink-2); } .ppbio i { color: var(--ink-3); }
.ppc { grid-column: 2; font-size: 11px; color: var(--ink-3); }
.ppeople.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; align-content: start; } .ppeople.grid .ph { grid-column: 1 / -1; } .ppeople.grid .pperson { margin: 0; }
.proster { background: var(--surface); border-radius: 16px; padding: 16px; border: 1px solid var(--line); align-self: start; }
.prow { padding: 10px 0; border-bottom: 1px solid var(--line); } .prow:last-child { border-bottom: 0; }
.prn { font-weight: 700; font-size: 14px; } .prm { font-size: 11.5px; color: var(--ink-3); margin-bottom: 6px; }
.prs { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 12.5px; color: var(--ink-2); }
.prs input { width: 150px; max-width: 60%; text-align: left; padding: 5px 9px; border: 1px solid var(--line-strong); border-radius: 8px; font: inherit; font-size: 12.5px; background: var(--surface); color: var(--ink); }
.prs input.hot { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(31, 111, 255, 0.16); animation: pop 0.35s ease; }
.plog { display: flex; align-items: center; gap: 8px; padding: 7px 0; font-size: 13px; border-bottom: 1px solid var(--line); }
.plog img { width: 20px; height: 20px; border-radius: 50%; } .plog .pl { color: var(--ink-2); } .plog small { margin-left: auto; color: var(--ink-3); }
.proto-stage .cursor { position: absolute; left: 0; top: 0; transition: transform 1.1s cubic-bezier(0.25, 0.8, 0.25, 1); pointer-events: none; z-index: 5; opacity: 0; }
.proto-stage .cursor.on { opacity: 1; }
.proto-stage .cursor svg { display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)); }
.proto-stage .cursor .tag { position: absolute; left: 14px; top: 16px; font-size: 11.5px; font-weight: 700; color: #fff; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
@keyframes pop { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }

/* the week */
.week-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 60px; align-items: start; }
.timeline { list-style: none; margin: 0; padding: 0; border-left: 1.5px solid var(--line-strong); }
.phase { display: flex; gap: 22px; padding: 4px 0 30px 28px; position: relative; color: var(--ink-3); }
.phase::before { content: ''; position: absolute; left: -7px; top: 10px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--line-strong); }
.phase .num { font-family: var(--serif); font-size: 14px; color: var(--ink-3); width: 28px; flex-shrink: 0; padding-top: 3px; }
.phase .name { font-family: var(--serif); font-size: 24px; font-weight: 500; color: var(--ink-3); }
.phase p { margin: 6px 0 0; font-size: 14.5px; max-width: 420px; }
.phase.done .name, .phase.done { color: var(--ink-2); } .phase.done::before { background: var(--ink); border-color: var(--ink); }
.phase.now, .phase.now .name { color: var(--ink); } .phase.now::before { background: var(--violet); border-color: var(--violet); box-shadow: 0 0 0 5px rgba(31, 111, 255, 0.18); }
.phase.now .name::after { content: 'now'; font-family: var(--sans); font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; background: var(--violet); color: #fff; padding: 3px 8px; border-radius: 999px; margin-left: 10px; vertical-align: middle; }
.counts { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1.5px solid var(--ink); }
.count { padding: 22px 0; border-bottom: 1px solid var(--line); }
.count:nth-child(odd) { padding-right: 24px; } .count:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--line); }
.count b { display: block; font-family: var(--serif); font-size: 52px; font-weight: 500; line-height: 1; letter-spacing: -0.03em; }
.count span { font-size: 13px; color: var(--ink-3); }

/* ledger */
.ledger-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.ledger-k { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); padding-bottom: 12px; border-bottom: 1.5px solid var(--ink); }
.factrow { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.factrow .k { color: var(--violet); font-weight: 700; font-size: 13px; padding-top: 1px; }
.factrow .v { color: var(--ink); }
.taskrow { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.taskrow .box { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--line-strong); flex-shrink: 0; }
.taskrow.doing .box { background: var(--lilac); border-color: var(--violet); }
.taskrow .tt { flex: 1; }
.taskrow img { width: 26px; height: 26px; border-radius: 50%; }

/* the network */
.network { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 28px; padding: 56px; }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.big { font-size: clamp(40px, 5.5vw, 68px); }
.network-copy p { color: var(--ink-2); margin: 18px 0 0; }
.fact { margin-top: 18px; padding: 14px 16px; background: var(--paper); border-radius: 12px; }
.fact small { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.network-copy .actions { justify-content: flex-start; margin-top: 22px; }
.network-art { position: relative; display: flex; align-items: center; justify-content: center; min-height: 320px; }
.network-art img { width: 240px; position: relative; z-index: 1; animation: float 6s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.orbit { position: absolute; border-radius: 50%; border: 1.5px dashed var(--line-strong); }
.orbit.o1 { width: 300px; height: 300px; animation: spin 40s linear infinite; }
.orbit.o2 { width: 400px; height: 400px; border-color: var(--line); animation: spin 70s linear infinite reverse; }
.orbit::after { content: ''; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--violet); }
.orbit.o2::after { background: var(--coral); }
@keyframes spin { to { transform: rotate(360deg); } }

/* the muses */
.roster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 48px; }
.team-block { }
.team-name { font-family: var(--serif); font-size: 22px; font-weight: 500; padding-bottom: 10px; border-bottom: 1.5px solid var(--ink); margin-bottom: 6px; }
.team-members { display: flex; flex-direction: column; }
.member { display: flex; align-items: center; gap: 12px; text-decoration: none; padding: 9px 0; border-bottom: 1px solid var(--line); }
.member:hover b { color: var(--violet); }
.member img { width: 38px; height: 38px; border-radius: 50%; background: var(--paper-2); }
.member b { display: block; font-weight: 700; font-size: 14.5px; }
.member span { font-size: 12.5px; color: var(--ink-3); }

/* how */
.how-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 60px; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li { position: relative; padding: 22px 0 22px 60px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 15.5px; counter-increment: step; }
.steps li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 24px; font-family: var(--serif); font-size: 22px; color: var(--violet); }
.steps li b { color: var(--ink); font-weight: 700; }

/* faq */
.faq-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 60px; }
.faq details { border-top: 1px solid var(--line); padding: 4px 0; }
.faq summary { cursor: pointer; font-family: var(--serif); font-size: 21px; font-weight: 500; padding: 16px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq summary::after { content: '+'; font-family: var(--sans); color: var(--ink-3); font-size: 22px; }
.faq details[open] summary::after { content: '\2013'; }
.faq p { margin: 0 0 18px; color: var(--ink-2); max-width: 60ch; }
.faq a { color: var(--violet); }

/* footer */
footer { border-top: 1px solid var(--line); padding: 36px 0 48px; }
footer .wrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
footer .brand { font-size: 18px; }
.foot-line { color: var(--ink-3); font-size: 13.5px; }
footer nav { margin-left: auto; display: flex; gap: 20px; flex-wrap: wrap; font-size: 13.5px; font-weight: 600; } footer nav a { text-decoration: none; color: var(--ink-2); } footer nav a:hover { color: var(--ink); }

/* toasts */
.toasts { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 10px; z-index: 50; width: 340px; max-width: calc(100vw - 36px); }
.toast { display: flex; gap: 12px; align-items: flex-start; background: var(--ink); color: #fff; padding: 14px 36px 14px 14px; border-radius: 16px; text-decoration: none; box-shadow: var(--shadow-2); position: relative; animation: toastin 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.toast.out { animation: toastout 0.25s ease forwards; }
.toast img { width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); flex-shrink: 0; }
.toast .tm { display: flex; gap: 8px; font-size: 12.5px; color: rgba(255, 255, 255, 0.6); } .toast .tm b { color: #fff; }
.toast .tt { font-size: 13.5px; margin-top: 2px; line-height: 1.4; }
.toast .ta { font-size: 12px; color: #9ec0ff; margin-top: 6px; font-weight: 600; }
.toast .tx { position: absolute; top: 8px; right: 10px; color: rgba(255, 255, 255, 0.5); font-size: 18px; }
@keyframes toastin { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes toastout { to { opacity: 0; transform: translateY(8px); } }


/* the x402 rail */
.rail-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center; }
.rail-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1.5px solid var(--ink); }
.rs { padding: 18px 0; border-bottom: 1px solid var(--line); }
.rs:nth-child(even) { padding-left: 22px; border-left: 1px solid var(--line); } .rs:nth-child(odd) { padding-right: 22px; }
.rs b { display: block; font-family: var(--serif); font-size: 40px; font-weight: 500; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.rs span { font-size: 12.5px; color: var(--ink-3); }
.status-strip { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; font-size: 13px; color: var(--ink-2); }
.status-strip span { display: inline-flex; align-items: center; gap: 7px; }
.status-strip i { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px rgba(23, 211, 163, 0.18); }
.status-strip small { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.term { background: var(--ink); color: #e9e6f5; border-radius: 20px; box-shadow: var(--shadow-2); overflow: hidden; }
.term-top { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-size: 12.5px; color: rgba(255, 255, 255, 0.55); }
.tdot { width: 10px; height: 10px; border-radius: 50%; } .tdot.r { background: #ff5f57; } .tdot.y { background: #febc2e; } .tdot.g { background: #28c840; }
.term-title { margin-left: 8px; font-family: var(--mono); }
.term-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--mint); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 10.5px; }
.term-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); animation: pulse 2s infinite; }
.term-body { margin: 0; padding: 18px 20px 22px; font-family: var(--mono); font-size: 13px; line-height: 1.75; min-height: 290px; white-space: pre-wrap; word-break: break-word; }
.term-body .ln { display: block; opacity: 0; animation: rise 0.25s ease forwards; }
.term-body .ln.done { opacity: 1; animation: none; }
.term-body .p { color: rgba(255, 255, 255, 0.45); }
.term-body .arr { color: #9ec0ff; }
.term-body .c402 { color: #ff6fb1; font-weight: 700; }
.term-body .c200 { color: #3de0b5; font-weight: 700; }
.term-body .amt { color: #ffd166; }
.term-body .dim { color: rgba(255, 255, 255, 0.45); }
.term-body .cur::after { content: ''; display: inline-block; width: 8px; height: 15px; background: #e9e6f5; vertical-align: -2px; margin-left: 2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* integrations */
.int-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.int { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 20px 18px 16px; display: grid; gap: 4px; position: relative; opacity: 0.55; }
.int.on { opacity: 1; }
.int-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--paper-2); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; color: var(--ink); }
.int b { font-weight: 800; font-size: 15px; }
.int span { font-size: 13px; color: var(--ink-2); }
.int i { font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; }
.int.on i { color: var(--mint); } .int.on i::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); }
.int:not(.on) i::before { content: ''; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid var(--ink-3); }

/* developers */
.dev-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 56px; align-items: center; }
.dev-points { list-style: none; margin: 0 0 26px; padding: 0; }
.dev-points li { padding: 12px 0; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 15px; }
.dev-points li b { color: var(--ink); font-weight: 800; }
.dev-grid .actions { justify-content: flex-start; margin-top: 0; }
.btn.disabled { opacity: 0.5; cursor: default; border-style: dashed; } .btn.disabled:hover { transform: none; }
.code-card { background: var(--ink); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-2); }
.code-tabs { display: flex; gap: 4px; padding: 10px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.code-tabs button { font-size: 12.5px; font-weight: 700; color: rgba(255, 255, 255, 0.55); padding: 6px 12px; border-radius: 999px; }
.code-tabs button.on { background: rgba(255, 255, 255, 0.1); color: #fff; }
.code-tabs .code-copy { margin-left: auto; }
.code { margin: 0; padding: 18px 20px 22px; font-family: var(--mono); font-size: 12.5px; line-height: 1.7; color: #e9e6f5; white-space: pre-wrap; word-break: break-word; min-height: 250px; }
.code .k { color: #9ec0ff; } .code .s { color: #ffd166; } .code .c { color: rgba(255, 255, 255, 0.4); } .code .n { color: #ff6fb1; } .code .f { color: #3de0b5; }

@media (max-width: 960px) {
  .rail-grid, .dev-grid { grid-template-columns: 1fr; }
  .int-grid { grid-template-columns: repeat(2, 1fr); }
}

/* small screens */
@media (max-width: 960px) {
  .menu { display: none; }
  .chan-grid, .week-grid, .ledger-grid, .network, .how-grid, .faq-grid, .roster { grid-template-columns: 1fr; }
  .chan-side { position: static; }
  .proto-stage { grid-template-columns: 1fr; } .proto-note { display: none; } .proto-bar { flex-wrap: wrap; padding: 12px 16px; gap: 10px; }
  .network { padding: 32px; } .network-art { min-height: 260px; } .orbit.o2 { display: none; }
  .tk-r { display: none; } .powered { display: none; }
  .sec { padding: 64px 0; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 18px; }
  .hero { padding-top: 48px; } .hero h1 { font-size: 44px; }
  .ticker .wrap { gap: 16px; font-size: 12.5px; } .tk-item:nth-child(3) { display: none; }
  .factrow { grid-template-columns: 1fr; gap: 2px; }
  .counts { grid-template-columns: 1fr; } .count:nth-child(even) { padding-left: 0; border-left: 0; }
  .count b { font-size: 40px; }
}

/* market tab */
.proto-stage .pcol.wide2 { grid-column: span 2; }
.plist { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; }
.plist.in, .ptrade.in { animation: pop 0.35s cubic-bezier(0.2, 0.8, 0.2, 1.2); }
.plb { flex: 1; min-width: 0; } .plb b { display: block; font-weight: 700; font-size: 14px; } .plb span { font-size: 12px; color: var(--ink-3); }
.plp { text-align: right; } .plp b { display: block; font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; } .plp span { font-size: 11px; color: var(--ink-3); }
.phs { font-family: inherit; font-size: 12px; font-weight: 500; color: var(--ink-3); margin-left: 10px; }
.ptrades { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.ptrade { display: grid; grid-template-columns: 1.1fr 1.4fr auto; gap: 2px 14px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 13px; align-items: baseline; }
.ptrade:last-child { border-bottom: 0; }
.ptw { font-weight: 700; } .ptw i { font-style: normal; color: var(--ink-3); margin: 0 4px; }
.ptq { color: var(--ink-2); } .ptv { font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.ptm { grid-column: 1 / -1; font-size: 11.5px; color: var(--ink-3); }
@media (max-width: 900px) { .proto-stage .pcol.wide2 { grid-column: auto; } .ptrade { grid-template-columns: 1fr auto; } }

/* prototype layouts per tab */
.proto-stage { gap: 26px; padding: 26px; }
.proto-stage[data-tab="feed"] { grid-template-columns: minmax(340px, 440px) 1fr; }
.proto-stage[data-tab="people"] { grid-template-columns: 1fr minmax(300px, 380px); }
.proto-stage[data-tab="market"] { grid-template-columns: minmax(280px, 1fr) 1.7fr; }
.proto-stage[data-tab="market"] .pcol.wide2 { grid-column: auto; }
.proto-stage[data-tab="log"], .proto-stage[data-tab="empty"] { grid-template-columns: 1fr; }
.pphone { max-width: none; }
.ppost { padding: 15px 18px; gap: 12px; }
.ppt { font-size: 14px; line-height: 1.5; margin-top: 5px; }
.ppfeed { max-height: 640px; }
.pperson { padding: 16px; gap: 6px 14px; }
.ppeople.grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.ppeople.grid .pperson { align-self: start; }
@media (max-width: 900px) { .proto-stage[data-tab="feed"], .proto-stage[data-tab="people"], .proto-stage[data-tab="market"] { grid-template-columns: 1fr; } }