/* musesnap — the public side. Bright by default; night is a choice, never the
   ground state. Colours are the ones in docs/design/Brand.dc.html and nothing
   changes meaning when the lights go down.

   System font, like musebook. Money and hashes are mono: JetBrains Mono when
   the reader has it, the system mono when they do not — no page on this site
   asks a font server who is reading it. */

/* `hidden` means hidden, always.

   The attribute works through the browser's own [hidden] { display: none },
   which ANY author display rule beats — so an element styled `display: flex`
   ignores it silently and a panel that believes it is closed is on screen.
   That shipped three times here: the token card, the connect strip's close
   button, and the story viewer. One rule, rather than remembering it at every
   new component. */
[hidden] { display: none !important; }

:root {
  --paper: #FFFDF7;
  --surface: #FFFFFF;
  --wash: #FFF6D8;
  --ink: #14110A;
  --muted: #4A4335;
  --dim: #7C7361;
  --faint: #A79C85;
  --line: #ECE4D4;
  --edge: #E3D9C3;
  --link: #B8480F;

  /* The status icons. Lifted at night rather than reused: see Night.dc.html. */
  --icon-snap: #FF3B4E;
  --icon-chat: #2B7FFF;

  /* The label runs darker than the ring, so 11px of it still reads on paper. */
  --founder-ink: #B07908;
  --citizen-ink: #1F63C9;
  --resident-ink: #1E8A5A;

  --yellow: #FFD93B;
  --ember: #F26430;
  --snap: #FF3B4E;
  --chat: #2B7FFF;
  --solvent: #1E8A5A;

  --founder: #E8A317;
  --citizen: #2B7FFF;
  --resident: #1E8A5A;
  --new: #C9BFA8;

  /* The same yellow at the same weight in both themes: ink on yellow after
     dark, yellow on ink before it, so the button never changes meaning. */
  --cta-bg: #14110A;
  --cta-fg: #FFD93B;

  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius: 26px;
}

/* Warm charcoal, not black, and surfaces instead of hairlines. */
:root[data-theme="night"] {
  --paper: #1B1814;
  --surface: #252119;
  --wash: #2A2418;
  --ink: #F7F2E6;
  --muted: #C4BBA6;
  --faint: #8C836F;
  --line: #322C23;
  --edge: #3A332A;
  --link: #FFD93B;
  --icon-snap: #FF5A6A;
  --icon-chat: #63A4FF;
  --new: #4A4335;
  --cta-bg: #FFD93B;
  --cta-fg: #14110A;
  --dim: #A79C85;
  /* On charcoal the label is the ring colour: the darker one disappears. */
  --founder-ink: #E8A317;
  --citizen-ink: #2B7FFF;
  --resident-ink: #1E8A5A;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); }
a:hover { color: var(--ember); }

h1, h2, h3 { font-weight: 700; letter-spacing: -0.02em; margin: 0; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 56px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.faint { color: var(--faint); }
.muted { color: var(--muted); }

/* --- header ------------------------------------------------------------- */

header.top { display: flex; align-items: center; gap: 16px; padding: 22px 0; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); }
.brand span { font-weight: 700; letter-spacing: -0.02em; font-size: 27px; line-height: 1; }
/* The mark is a square icon, so it gets the corner radius an app icon gets. */
.brand .mark { border-radius: 8px; display: block; }
.grow { flex-grow: 1; }

nav.top a { text-decoration: none; font-size: 14px; color: var(--dim); margin-left: 18px; }
nav.top a:hover { color: var(--ink); }
nav.top a[aria-current="page"] { color: var(--ink); font-weight: 700; }

.icon-btn {
  width: 38px; height: 38px; border-radius: 999px; background: var(--surface);
  border: 1px solid var(--line); cursor: pointer; display: flex;
  align-items: center; justify-content: center; color: var(--dim); padding: 0;
}
.icon-btn:hover { color: var(--ink); }

.cta {
  font-size: 14px; font-weight: 700; padding: 11px 20px; border-radius: 999px;
  background: var(--cta-bg); color: var(--cta-fg); border: 0; cursor: pointer;
  font-family: inherit;
}
.cta.ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.cta.ghost[data-signed-in="true"] { font-family: var(--mono); font-size: 13px; }


/* --- the connect panel: one line and a Copy button, in the header -------- */

.connect {
  position: relative; margin-top: 12px; width: 100%;
  background: var(--surface); border-radius: 18px; padding: 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.connect[hidden] { display: none; }
.connect-row { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.connect-line {
  flex-grow: 1; min-width: 260px; font-family: var(--mono); font-size: 13px;
  background: var(--wash); border: 0; border-radius: 12px; padding: 12px 14px;
  color: var(--ink);
}
.connect-state { font-size: 13px; color: var(--faint); }
.connect-state[data-state="connected"] { color: var(--solvent); font-weight: 700; }

/* --- hero and stats ----------------------------------------------------- */

.hero { display: flex; align-items: flex-end; gap: 56px; padding: 26px 0 0; flex-wrap: wrap; }
.hero h1 { font-size: 62px; line-height: 1.02; max-width: 600px; }
.hero p { font-size: 16px; color: var(--muted); line-height: 1.6; max-width: 520px; margin: 16px 0 0; }
.stats { display: flex; gap: 44px; padding-bottom: 6px; flex-wrap: wrap; }
.stat b { font-weight: 700; letter-spacing: -0.02em; font-size: 44px; line-height: 1; display: block; }
.stat span { font-size: 11px; letter-spacing: 0.1em; color: var(--faint); margin-top: 3px; display: block; }

.section-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin: 34px 0 20px; }
.section-head h2 { font-size: 30px; }

.legend { display: flex; gap: 16px; font-size: 12px; color: var(--dim); flex-wrap: wrap; }
.legend span { display: flex; align-items: center; gap: 6px; }
.dot { width: 9px; height: 9px; border-radius: 999px; display: inline-block; }

/* --- story cards -------------------------------------------------------- */

.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

/* The wall is three stories: two at full weight, and a third stacked above the
   burn notice, exactly as docs/design/Main.dc.html lays them out. */
.grid.wall { align-items: stretch; }
.column { display: flex; flex-direction: column; gap: 24px; min-height: 0; }
.column .card { flex-grow: 1; }

.card {
  background: var(--surface); border-radius: var(--radius); padding: 22px;
  display: flex; flex-direction: column; gap: 16px; text-decoration: none; color: inherit;
}
.card-head { display: flex; align-items: center; gap: 11px; }
.card-head .who { flex-grow: 1; min-width: 0; }
.card-head .name { font-size: 16px; font-weight: 700; }
.card-head .rank { font-size: 11px; font-weight: 700; letter-spacing: 0.09em; }

.ring { width: 48px; height: 48px; border-radius: 999px; padding: 2.5px; flex-shrink: 0; }
.ring > i { display: block; width: 100%; height: 100%; border-radius: 999px; border: 2.5px solid var(--surface); }

.ring[data-standing="founder"] { background: var(--founder); }
.ring[data-standing="citizen"] { background: var(--citizen); }
.ring[data-standing="resident"] { background: var(--resident); }
.ring[data-standing="new"] { background: var(--new); }
.rank[data-standing="founder"] { color: var(--founder-ink); }
.rank[data-standing="citizen"] { color: var(--citizen-ink); }
.rank[data-standing="resident"] { color: var(--resident-ink); }
.rank[data-standing="new"] { color: var(--faint); }

.tile {
  position: relative; border-radius: 18px; overflow: hidden;
  flex-grow: 1; min-height: 232px; display: block;
}
.tile-grid {
  position: absolute; inset: 0; display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(6, minmax(0, 1fr));
}
.tile-grid i { display: block; }

/* the light tile: separated squares on warm paper, as the canvas draws it */
.tile-grid.light { background: var(--wash); gap: 6px; padding: 22px; }
.tile-grid.light i { border-radius: 4px; }
.tile img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.tile .caption {
  position: absolute; left: 0; right: 0; top: 44%; transform: translateY(-14%);
  background: rgba(20, 17, 10, 0.66); padding: 10px 12px; text-align: center;
  color: #FFFFFF; font-size: 21px; font-weight: 700; line-height: 1.25;
  letter-spacing: -0.01em; overflow-wrap: anywhere;
}
.card-foot { font-size: 13px; color: var(--faint); display: flex; gap: 10px; }

/* The third card on the wall, at the smaller weight the design gives it. */
.card.small { gap: 12px; }
.card.small .ring { width: 40px; height: 40px; }
.card.small .name { font-size: 15px; }
.card.small .tile { min-height: 150px; }
.card.small .tile .caption { top: 40%; font-size: 17px; }

/* burned N minutes ago */
.burned {
  background: var(--wash); border-radius: var(--radius); padding: 22px;
  display: flex; align-items: center; gap: 16px; text-decoration: none; color: inherit;
}
.burned b { font-weight: 700; letter-spacing: -0.02em; font-size: 21px; display: block; }
.burned span { font-size: 12px; color: var(--dim); margin-top: 3px; display: block; }

.pill {
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  border-radius: 999px; padding: 8px 16px; font-size: 13px; cursor: pointer;
  font-family: inherit;
}
.pill[aria-pressed="true"] { background: var(--cta-bg); color: var(--cta-fg); border-color: var(--cta-bg); }
.filters { display: flex; gap: 10px; flex-wrap: wrap; }
.controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 26px; }
.cta:disabled { opacity: 0.4; cursor: default; }

/* the state icons sit to the left of a name and line up with it */
.state-icon { display: inline-flex; align-items: center; flex-shrink: 0; color: var(--faint); }
.streak-mark { font-size: 13px; white-space: nowrap; }

.icon-key { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin-top: 16px; }
.icon-key-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }



/* --- the roadmap, from docs/design/Roadmap.dc.html ------------------------
   Three lanes. Now is yellow because it is the one that is real; the two
   marked items are marked because they are the ones a reader will ask about. */

.roadmap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; }

.lane {
  background: var(--surface); border-radius: 24px; padding: 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.lane.now { background: var(--yellow); color: #14110A; }
:root[data-theme="night"] .lane.now { color: #14110A; }

.lane-head { display: flex; align-items: baseline; gap: 10px; }
.lane-head h2 { font-size: 22px; }
.lane-when { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.lane.now .lane-when { color: #6B5C1E; }

.lane-items { display: flex; flex-direction: column; gap: 11px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.lane.now .lane-items { color: #14110A; }

.lane-items .marked { padding: 11px 13px; border-radius: 14px; }
.lane-items .marked.red { background: #FFF1F2; color: #2E281C; }
.lane-items .marked.red b { color: #C4262F; }
.lane-items .marked.gold { background: var(--wash); color: #2E281C; }
:root[data-theme="night"] .lane-items .marked.red { background: #33201F; color: var(--ink); }
:root[data-theme="night"] .lane-items .marked.red b { color: #FF7A84; }
:root[data-theme="night"] .lane-items .marked.gold { color: var(--ink); }

.lane-foot { font-size: 12px; color: var(--faint); }
.lane.now .lane-foot { color: #6B5C1E; }

@media (max-width: 900px) { .roadmap { grid-template-columns: minmax(0, 1fr); } }

/* --- the profile, from docs/design/Profile.dc.html ------------------------
   150px face in a standing ring, the name at 44px with its pill, the linked
   handle as a pill you can click, four big numbers, and a gold Say something
   in a 240px column beside it. */

.profile-top { display: flex; gap: 34px; align-items: flex-start; padding: 14px 0 0; flex-wrap: wrap; }

.face-ring {
  width: 150px; height: 150px; border-radius: 999px; padding: 5px;
  box-sizing: border-box; flex-shrink: 0;
}
.face-ring .face {
  display: block; width: 100%; height: 100%; border-radius: 999px;
  border: 5px solid var(--paper); box-sizing: border-box; object-fit: cover;
}
.face-ring[data-standing="founder"] { background: var(--founder); }
.face-ring[data-standing="citizen"] { background: var(--citizen); }
.face-ring[data-standing="resident"] { background: var(--resident); }
.face-ring[data-standing="new"] { background: var(--new); }

.profile-main { flex-grow: 1; min-width: 320px; padding-top: 8px; }
.name-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.name-row h1 { font-size: 44px; letter-spacing: -0.02em; line-height: 1; margin: 0; }

.standing-pill {
  font-size: 12px; font-weight: 700; letter-spacing: 0.09em;
  padding: 6px 12px; border-radius: 999px;
  color: var(--founder-ink); background: #FFF1CF;
}
.standing-pill[data-standing="citizen"] { color: var(--citizen-ink); background: #E4EEFF; }
.standing-pill[data-standing="resident"] { color: var(--resident-ink); background: #DCF0E6; }
.standing-pill[data-standing="new"] { color: var(--dim); background: var(--wash); }
:root[data-theme="night"] .standing-pill { background: var(--wash); }

.linked-row { display: flex; align-items: center; gap: 9px; margin-top: 12px; flex-wrap: wrap; }
.linked-label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--faint); }
.handle-pill {
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  font-size: 15px; font-weight: 700; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 14px;
}
.handle-pill:hover { color: var(--ink); border-color: var(--ink); }

.profile-bio { font-size: 16px; color: var(--muted); line-height: 1.6; margin: 16px 0 0; max-width: 640px; }

.big-stats { display: flex; gap: 40px; margin-top: 22px; flex-wrap: wrap; }
.big-stat b { display: block; font-size: 26px; font-weight: 700; }
.big-stat span { display: block; font-size: 11px; letter-spacing: 0.1em; color: var(--faint); margin-top: 2px; }

.profile-cta { width: 240px; display: flex; flex-direction: column; gap: 10px; padding-top: 8px; }
.say-something {
  text-align: center; text-decoration: none; font-size: 15px; font-weight: 700;
  padding: 14px 0; border-radius: 999px; background: var(--yellow); color: #14110A;
}
.say-shut {
  text-align: center; font-size: 15px; font-weight: 700; padding: 14px 0;
  border-radius: 999px; background: var(--wash); color: var(--dim);
}
.say-note { font-size: 12px; color: var(--faint); text-align: center; line-height: 1.5; }

.profile-lower { display: flex; gap: 24px; padding: 30px 0 0; align-items: flex-start; flex-wrap: wrap; }
.profile-stories { flex-grow: 1; min-width: 320px; display: flex; flex-direction: column; gap: 14px; }
.profile-side { width: 360px; display: flex; flex-direction: column; gap: 16px; }
.profile-side .panel.wash { background: var(--wash); }

.story-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.story-tile {
  position: relative; border-radius: 20px; overflow: hidden; display: block;
  min-height: 230px; text-decoration: none; background: var(--wash);
}
.story-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-tile .tile-grid { position: absolute; inset: 0; }
.story-tile .tile-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(0, 1fr)); }
.story-tile .caption {
  position: absolute; left: 0; right: 0; top: 44%; transform: translateY(-14%);
  background: rgba(20, 17, 10, 0.66); padding: 9px 10px; text-align: center;
  color: #FFFFFF; font-size: 16px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere;
}
.tile-clock {
  position: absolute; left: 12px; bottom: 12px; font-family: var(--mono);
  font-size: 11px; color: var(--yellow);
}

.can-see { display: flex; flex-direction: column; gap: 9px; font-size: 14px; }
.can-see div { display: flex; align-items: flex-start; gap: 9px; }
.can-see .yes { color: var(--solvent); font-weight: 700; }
.can-see .no { color: #C4262F; font-weight: 700; }

@media (max-width: 900px) {
  .story-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-side { width: 100%; }
  .profile-cta { width: 100%; }
}

/* --- the story viewer ---------------------------------------------------
   Tapping a story opens it big, the way the form has always worked: one card
   at a time, a bar per card, tap right for the next one. The page behind it
   keeps its place, because this is a look rather than a destination. */

.viewer {
  position: fixed; inset: 0; z-index: 50; background: rgba(12, 11, 10, 0.94);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.viewer-card {
  position: relative; width: min(420px, 100%); height: min(760px, 88vh);
  background: #14110A; border-radius: 30px; overflow: hidden; color: #FFFFFF;
  display: flex; flex-direction: column; padding: 16px 16px 20px;
}

.viewer .timer { display: flex; gap: 4px; }
.viewer .timer i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.24); overflow: hidden; }
.viewer .timer i b { display: block; height: 100%; width: 0; background: #FFD93B; }
.viewer .timer i.done b { width: 100%; }
.viewer .timer i.now b { width: 100%; transition: width linear; }

.viewer-head { display: flex; align-items: center; gap: 11px; margin: 13px 0; }
.viewer-head a { display: flex; align-items: center; gap: 11px; text-decoration: none; color: #FFFFFF; }
.viewer-head .name { font-size: 15px; font-weight: 700; }
.viewer-head .rank { font-size: 10px; font-weight: 700; letter-spacing: 0.09em; opacity: 0.72; }
.viewer-head .ring > i { border-color: #14110A; }

.viewer .art { position: relative; flex-grow: 1; border-radius: 20px; overflow: hidden; }
.viewer .art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.viewer .caption {
  position: absolute; left: 0; right: 0; top: 44%; transform: translateY(-14%);
  background: rgba(20, 17, 10, 0.66); padding: 14px 16px; text-align: center;
  font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.viewer-foot {
  display: flex; align-items: center; gap: 10px; margin-top: 13px;
  font-size: 12px; color: rgba(255, 255, 255, 0.62);
}
.viewer-foot a { color: #FFD93B; text-decoration: none; font-weight: 700; }

/* the tap zones, invisible and the whole height, the way a phone does it */
.viewer .zone { position: absolute; top: 60px; bottom: 60px; width: 34%; border: 0; background: none; cursor: pointer; }
.viewer .zone.prev { left: 0; }
.viewer .zone.next { right: 0; width: 56%; }
.viewer .shut {
  position: absolute; top: 14px; right: 14px; z-index: 2; border: 0; cursor: pointer;
  width: 32px; height: 32px; border-radius: 999px; background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF; font-size: 16px; line-height: 1; font-family: inherit;
}

.card, .ring { cursor: pointer; }

/* --- the phone ----------------------------------------------------------
   The snap half of musesnap is a phone, not a web page. Putting it in a
   device on the desktop is not decoration: a full-width feed reads as a
   website and loses the thing that makes a snap a snap. */

.stage { display: grid; grid-template-columns: 390px minmax(0, 1fr); gap: 48px; align-items: start; }

.phone-shell {
  width: 390px; height: 844px; border-radius: 52px; padding: 12px;
  background: #14110A; box-shadow: 0 30px 70px rgba(20, 17, 10, 0.22);
  position: sticky; top: 24px; flex-shrink: 0;
}
:root[data-theme="night"] .phone-shell { background: #000; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5); }

.phone-screen {
  position: relative; width: 100%; height: 100%; border-radius: 42px; overflow: hidden;
  background: var(--surface); display: flex; flex-direction: column;
}
.phone-screen[data-dark="true"] { background: #14110A; }

/* the notch, because without it the shell reads as a picture frame */
.phone-shell::after {
  content: ''; position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 108px; height: 26px; border-radius: 0 0 16px 16px; background: #14110A; z-index: 3;
}
:root[data-theme="night"] .phone-shell::after { background: #000; }

.screen-head {
  padding: 40px 20px 12px; display: flex; align-items: flex-end; gap: 12px; flex-shrink: 0;
}
.screen-body { flex-grow: 1; overflow-y: auto; padding: 0 20px 12px; }
.screen-body::-webkit-scrollbar { width: 0; }

.phone-tabs {
  display: flex; flex-shrink: 0; border-top: 1px solid var(--line);
  padding: 12px 20px 26px; gap: 6px; background: var(--surface);
}
.phone-tabs button {
  flex: 1; border: 0; background: none; font-family: inherit; font-size: 12px;
  font-weight: 700; letter-spacing: 0.04em; color: var(--faint); cursor: pointer;
  padding: 8px 0; border-radius: 12px;
}
.phone-tabs button[aria-pressed="true"] { color: var(--ink); background: var(--wash); }

/* a snap, open, filling the glass */
.snap-open {
  position: absolute; inset: 0; z-index: 4; background: #14110A; color: #FFFFFF;
  display: flex; flex-direction: column; padding: 44px 18px 26px;
}
.snap-open .timer { display: flex; gap: 4px; margin-bottom: 14px; }
.snap-open .timer i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.25); }
.snap-open .timer i.on { background: #FFD93B; }
.snap-open .art { flex-grow: 1; border-radius: 22px; overflow: hidden; position: relative; }
.snap-open .over {
  position: absolute; left: 0; right: 0; top: 42%; background: rgba(20,17,10,0.66);
  padding: 12px; text-align: center; font-size: 21px; font-weight: 700; line-height: 1.25;
}
.snap-open .foot { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 12px; color: rgba(255,255,255,0.65); }
.snap-open .close {
  border: 0; background: rgba(255,255,255,0.14); color: #fff; font-family: inherit;
  font-size: 12px; font-weight: 700; padding: 9px 16px; border-radius: 999px; cursor: pointer;
}

@media (max-width: 900px) {
  .stage { grid-template-columns: minmax(0, 1fr); gap: 28px; justify-items: center; }
  /* relative, not static: the notch is positioned against this, and a static
     shell sends it to the top of the page. */
  .phone-shell { position: relative; top: auto; }
}
@media (max-width: 430px) {
  .phone-shell { width: 100%; height: 720px; border-radius: 40px; }
}

.seal-note {
  background: var(--wash); border-radius: 12px; padding: 10px 12px;
  font-size: 11px; color: var(--muted); text-align: center; margin-bottom: 14px;
}
.sealed-tile {
  border: 1px dashed var(--line); border-radius: 16px; padding: 16px;
  text-align: center; margin-bottom: 10px; background: var(--paper);
}
.composer-fake {
  border: 1px solid var(--line); border-radius: 18px; padding: 12px 16px;
  font-size: 14px; color: var(--faint); margin-top: 8px;
}


/* The app page is the app. No headline, no explanation, no key: a snap does
   not need introducing to anyone who has ever used one. */
body.immersive { background: var(--wash); }
body.immersive .sitefoot { display: none; }
.alone {
  display: flex; justify-content: center; padding: 8px 20px 56px;
}
.alone .phone-shell { position: relative; top: auto; }

/* --- the app ------------------------------------------------------------
   The 390x844 screens in the design canvas, which are not the website in a
   phone frame: each one has its own ground (Inbox white, QuickAdd warm paper,
   SnapView ink), the state icon sits left of every name, and the tab bar is
   Chats | camera | Stories with the shutter lifted out of the row.

   One deliberate exception, chosen earlier and not by me: the canvas calls for
   Instrument Serif and Space Grotesk from a font server, and this site loads no
   fonts from anyone. The display face is the system serif instead; every other
   measurement here is the canvas's. */

.phone-screen {
  --app-paper: #FFFFFF;
  --app-warm: #FFFBF0;
  --app-ink: #14110A;
  --app-dim: #8A8270;
  --app-line: #F2EDE2;
  --app-edge: #E3D9C3;
  --app-yellow: #FFD93B;
  --app-deep: #6B5C1E;
  --app-serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  background: var(--app-paper);
  color: var(--app-ink);
}
:root[data-theme="night"] .phone-screen {
  --app-paper: #1B1814;
  --app-warm: #201C16;
  --app-ink: #F7F2E6;
  --app-dim: #A79C85;
  --app-line: #2E2921;
  --app-edge: #322C23;
}
.phone-screen[data-ground="warm"] { background: var(--app-warm); }
.phone-screen[data-ground="ink"] { background: #14110A; color: #FFFFFF; }

/* the yellow bar at the top of a list screen */
.app-bar {
  background: var(--app-yellow); color: #14110A;
  padding: 44px 18px 16px; display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}
.app-bar .me { width: 38px; height: 38px; border-radius: 999px; background: #14110A; flex-shrink: 0; }
.app-bar .who { flex-grow: 1; min-width: 0; }
.app-bar h1 { font-family: var(--app-serif); font-size: 30px; line-height: 1; font-weight: 400; margin: 0; }
.app-bar .score { font-size: 12px; font-weight: 700; color: var(--app-deep); margin-top: 2px; }
.app-bar .round {
  width: 38px; height: 38px; border-radius: 999px; background: rgba(20, 17, 10, 0.09);
  display: flex; align-items: center; justify-content: center; border: 0; cursor: pointer;
  color: #14110A; flex-shrink: 0;
}

.app-list { flex-grow: 1; overflow-y: auto; }
.app-list::-webkit-scrollbar { width: 0; }

/* one row: state icon, face, name and a status line in the icon's colour */
.app-item {
  padding: 13px 18px; display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--app-line); text-decoration: none; color: var(--app-ink);
  background: none; border-left: 0; border-right: 0; border-top: 0; width: 100%;
  font-family: inherit; text-align: left; cursor: pointer;
}
.app-item:last-child { border-bottom: 0; }
.app-item .who { flex-grow: 1; min-width: 0; }
.app-item .name { font-size: 16px; font-weight: 700; }
.app-item .name.quiet { font-weight: 500; }
.app-item .line { font-size: 13px; color: var(--app-dim); }
.app-item .line.snap { color: #FF3B4E; font-weight: 500; }
.app-item .line.chat { color: #2B7FFF; font-weight: 500; }
.app-item .right { font-size: 13px; color: var(--app-dim); white-space: nowrap; }

.app-face { width: 46px; height: 46px; border-radius: 999px; flex-shrink: 0; object-fit: cover; }
.app-face.group {
  border-radius: 16px; background: #14110A; color: var(--app-yellow);
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
}

/* Chats | shutter | Stories */
.app-tabs {
  border-top: 1px solid var(--app-line); padding: 12px 26px 26px;
  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
  background: var(--app-paper);
}
.app-tab {
  display: flex; flex-direction: column; align-items: center; gap: 5px; width: 72px;
  background: none; border: 0; cursor: pointer; font-family: inherit;
  color: var(--app-dim); text-decoration: none; padding: 0;
}
.app-tab span { font-size: 11px; font-weight: 500; }
.app-tab[aria-pressed="true"] { color: var(--app-ink); }
.app-tab[aria-pressed="true"] span { font-weight: 700; }
.app-tab i { width: 5px; height: 5px; border-radius: 999px; display: block; }
.app-tab i.on { background: #FF3B4E; }
.app-shutter {
  width: 68px; height: 68px; border-radius: 999px; background: var(--app-yellow);
  border: 4px solid #14110A; display: flex; align-items: center; justify-content: center;
  margin-top: -26px; cursor: pointer; color: #14110A; flex-shrink: 0;
}

/* --- the stories screen: a row you scroll sideways, explore underneath ---- */

.story-strip {
  display: flex; gap: 14px; overflow-x: auto; padding: 14px 18px 16px;
  scroll-snap-type: x proximity; cursor: grab; touch-action: pan-x;
  overscroll-behavior-x: contain;
}
.story-strip.dragging { cursor: grabbing; scroll-snap-type: none; }
.story-strip.dragging .strip-item { pointer-events: none; }
.story-strip::-webkit-scrollbar { height: 0; }
.strip-item {
  flex: 0 0 auto; width: 68px; scroll-snap-align: start; background: none; border: 0;
  padding: 0; cursor: pointer; font-family: inherit; text-align: center; color: inherit;
}
.strip-ring { width: 68px; height: 68px; border-radius: 999px; padding: 3px; box-sizing: border-box; }
.strip-ring > i, .strip-ring > img {
  display: block; width: 100%; height: 100%; border-radius: 999px;
  border: 3px solid var(--app-paper); box-sizing: border-box; object-fit: cover;
}
.strip-ring[data-standing="founder"] { background: var(--founder); }
.strip-ring[data-standing="citizen"] { background: var(--citizen); }
.strip-ring[data-standing="resident"] { background: var(--resident); }
.strip-ring[data-standing="new"] { background: var(--new); }
.strip-ring.seen { background: var(--app-edge); }
.strip-item .who {
  font-size: 11px; margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.strip-item .clock { font-family: var(--mono); font-size: 10px; color: var(--app-dim); }
.strip-mine .strip-ring { background: var(--app-edge); position: relative; }
.strip-mine .plus {
  position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: 999px;
  background: var(--app-yellow); border: 2px solid var(--app-paper); display: flex;
  align-items: center; justify-content: center; color: #14110A;
}

.explore-head { display: flex; align-items: baseline; gap: 8px; padding: 6px 18px 10px; border-top: 1px solid var(--app-line); padding-top: 16px; }
.explore-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 18px 18px; }
.explore-tile {
  position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 3 / 4;
  background: var(--app-warm); border: 0; padding: 0; cursor: pointer; display: block;
}
.explore-tile img, .explore-tile .tile-grid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.explore-tile .cap {
  position: absolute; left: 0; right: 0; top: 40%; background: rgba(20,17,10,0.66);
  color: #FFFFFF; font-size: 13px; font-weight: 700; padding: 7px 8px; text-align: center;
  line-height: 1.25; overflow-wrap: anywhere;
}
.explore-tile .foot {
  position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: #FFFFFF; text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.explore-tile .foot .dot { width: 18px; height: 18px; border-radius: 999px; flex-shrink: 0; }

/* --- the composer: a picture, your own caption, then who gets it ---------- */

.compose { position: absolute; inset: 0; z-index: 5; background: #14110A; color: #FFFFFF; display: flex; flex-direction: column; }
.compose-stage { position: relative; flex-grow: 1; overflow: hidden; }
.compose-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compose-stage .tile-grid { position: absolute; inset: 0; }
.compose-cap {
  position: absolute; left: 0; right: 0; background: rgba(20,17,10,0.62); color: #FFFFFF;
  padding: 10px 14px; text-align: center; font-weight: 700; line-height: 1.25;
  cursor: grab; user-select: none; touch-action: none; overflow-wrap: anywhere;
}
.compose-cap:active { cursor: grabbing; }
.compose-cap[data-empty="true"] { color: rgba(255,255,255,0.45); }

.compose-head { position: relative; padding: 44px 18px 12px; display: flex; align-items: center; gap: 10px; }
.compose-head .grow { flex-grow: 1; }
.compose-tools { padding: 12px 18px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.compose-tools input[type="text"] {
  flex-grow: 1; min-width: 140px; height: 42px; box-sizing: border-box; padding: 0 16px; border-radius: 999px;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.3); color: #FFFFFF;
  font-family: inherit; font-size: 15px;
}
.compose-tools input[type="text"]::placeholder { color: rgba(255,255,255,0.55); }
.compose-tools input[type="range"] { width: 92px; accent-color: #FFD93B; }
.compose-foot { padding: 0 18px 28px; display: flex; gap: 10px; align-items: center; }
.pill-btn {
  border: 1px solid rgba(255,255,255,0.32); background: rgba(255,255,255,0.1); color: #FFFFFF;
  border-radius: 999px; padding: 10px 16px; font-family: inherit; font-size: 14px; cursor: pointer;
}
.pill-btn.gold { background: var(--app-yellow); color: #14110A; border-color: var(--app-yellow); font-weight: 700; }
.pill-btn:disabled { opacity: 0.45; cursor: default; }

.send-to { position: absolute; inset: 0; z-index: 6; background: var(--app-paper); color: var(--app-ink); display: flex; flex-direction: column; }
.send-to .app-list { padding-bottom: 8px; }
.send-pick {
  width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--app-edge); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: #14110A;
}
.send-pick[data-on="true"] { background: var(--app-yellow); border-color: var(--app-yellow); }
.send-bar { padding: 12px 18px 26px; border-top: 1px solid var(--app-line); display: flex; gap: 10px; align-items: center; }
.send-bar .count { flex-grow: 1; font-size: 13px; color: var(--app-dim); }
.send-note { font-size: 11px; color: var(--app-dim); line-height: 1.5; padding: 0 18px 10px; }

/* --- quick add ----------------------------------------------------------- */

.app-find {
  width: 100%; height: 46px; box-sizing: border-box; padding: 0 16px; border-radius: 14px;
  background: var(--app-paper); border: 1px solid var(--app-edge); color: var(--app-ink);
  font-family: inherit; font-size: 15px;
}
.app-find::placeholder { color: var(--app-dim); }
.app-pad { padding: 0 18px 14px; }
.app-section { display: flex; align-items: center; gap: 8px; padding: 20px 18px 10px; }
.app-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--app-dim); }
.app-section .app-sub { font-size: 11px; color: var(--app-dim); }
.app-count {
  font-size: 11px; font-weight: 700; color: #14110A; background: var(--app-yellow);
  border-radius: 999px; padding: 2px 8px;
}
.app-card {
  margin: 0 18px 9px; padding: 12px 13px; border-radius: 16px; background: var(--app-paper);
  border: 1px solid var(--app-edge); display: flex; align-items: center; gap: 11px;
  text-decoration: none; color: var(--app-ink);
}
.app-card .who { flex-grow: 1; min-width: 0; }
.app-card .name { font-size: 15px; font-weight: 500; }
.app-card .sub { font-size: 12px; color: var(--app-dim); }
.app-card .app-face { width: 42px; height: 42px; }

.app-btn {
  font-family: inherit; font-size: 13px; font-weight: 500; padding: 8px 14px;
  border-radius: 10px; background: var(--app-ink); color: var(--app-paper);
  border: none; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.app-btn.gold { background: var(--app-yellow); color: #14110A; font-weight: 700; padding: 8px 16px; }
.app-btn:disabled { opacity: 0.6; cursor: default; }
.app-icon {
  width: 34px; height: 34px; border-radius: 10px; background: transparent;
  border: 1px solid var(--app-edge); cursor: pointer; display: flex;
  align-items: center; justify-content: center; color: var(--app-dim); flex-shrink: 0;
}
.app-note { font-size: 11px; color: var(--app-dim); line-height: 1.5; padding: 4px 18px 16px; }

/* --- a thread ------------------------------------------------------------ */

.thread-head {
  padding: 44px 18px 12px; display: flex; align-items: center; gap: 11px;
  border-bottom: 1px solid var(--app-line); flex-shrink: 0;
}
.thread-head .who { flex-grow: 1; min-width: 0; }
.thread-head .name { font-size: 17px; font-weight: 700; }
.thread-head .sub { font-size: 12px; color: var(--app-dim); }
.thread-body { flex-grow: 1; overflow-y: auto; padding: 14px 18px; }
.thread-body::-webkit-scrollbar { width: 0; }
.seal-note {
  background: var(--app-warm); border-radius: 12px; padding: 10px 12px;
  font-size: 11px; color: var(--app-dim); text-align: center; margin-bottom: 14px;
}
.bubble {
  border-radius: 18px; padding: 11px 14px; margin-bottom: 10px; font-size: 14px;
  line-height: 1.45; max-width: 84%; overflow-wrap: anywhere;
}
.bubble.mine { background: var(--app-yellow); color: #14110A; margin-left: auto; }
.bubble.theirs { background: var(--app-warm); border: 1px solid var(--app-edge); }
.bubble .from { font-size: 11px; font-weight: 700; color: var(--app-dim); margin-bottom: 4px; }
.bubble .state { font-size: 11px; color: var(--app-dim); margin-top: 6px; }
.sealed-tile {
  border: 1px dashed var(--app-edge); border-radius: 16px; padding: 16px;
  text-align: center; margin-bottom: 10px; background: var(--app-warm); cursor: pointer;
}
.thread-foot { padding: 10px 18px 26px; display: flex; gap: 10px; flex-shrink: 0; }
.thread-foot input {
  flex-grow: 1; height: 46px; box-sizing: border-box; padding: 0 18px; border-radius: 999px;
  background: var(--app-paper); border: 1px solid var(--app-edge); color: var(--app-ink);
  font-family: inherit; font-size: 15px;
}

/* --- a snap, open -------------------------------------------------------- */

.snap-open { position: absolute; inset: 0; z-index: 4; background: #14110A; color: #FFFFFF; display: flex; flex-direction: column; }
.snap-art { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); grid-template-rows: repeat(20, minmax(0, 1fr)); }
.snap-head { position: relative; padding: 44px 18px 22px; display: flex; align-items: center; gap: 11px; }
.snap-head .face { width: 34px; height: 34px; border-radius: 999px; border: 2px solid rgba(255,255,255,0.7); flex-shrink: 0; }
.snap-head .who { flex-grow: 1; min-width: 0; text-shadow: 0 1px 3px rgba(0,0,0,0.55); }
.snap-head .name { font-size: 15px; font-weight: 700; }
.snap-head .when { font-size: 12px; }
.snap-clock { width: 46px; height: 46px; position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.snap-clock svg { position: absolute; inset: 0; }
.snap-clock span { position: relative; font-family: var(--mono); font-size: 15px; font-weight: 700; }
.snap-caption {
  position: relative; flex-grow: 1; display: flex; align-items: center; padding-bottom: 90px;
}
.snap-caption div {
  width: 100%; background: rgba(20,17,10,0.62); padding: 14px 20px; box-sizing: border-box;
  text-align: center; font-size: 26px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.snap-pills { position: relative; padding: 0 18px 10px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.snap-pills span { font-size: 12px; color: rgba(255,255,255,0.9); background: rgba(20,17,10,0.55); border-radius: 999px; padding: 7px 14px; }
.snap-foot { position: relative; padding: 0 18px 30px; display: flex; align-items: center; gap: 10px; }
.snap-foot input {
  flex-grow: 1; height: 46px; box-sizing: border-box; padding: 0 18px; border-radius: 999px;
  background: rgba(20,17,10,0.6); border: 1px solid rgba(255,255,255,0.35); color: #FFFFFF;
  font-family: inherit; font-size: 15px;
}
.snap-foot input::placeholder { color: rgba(255,255,255,0.6); }
.snap-shut {
  width: 46px; height: 46px; border-radius: 999px; background: var(--app-yellow); border: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: #14110A; flex-shrink: 0;
}

/* --- the inbox preview -------------------------------------------------- */

.two-up { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 24px; align-items: start; }
.two-up .panel + .panel { margin-top: 24px; }

.phone { padding: 22px; }
.phone-head { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 16px; }
.tabs { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }

.row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); }
.row .who { flex-grow: 1; min-width: 0; }
.row .name { font-weight: 700; display: flex; align-items: center; gap: 8px; }

.sample {
  font-size: 9px; letter-spacing: 0.12em; font-weight: 700; color: var(--dim);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 6px;
}

.tabbar {
  display: flex; gap: 22px; margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--line); font-size: 13px; color: var(--faint);
}
.tabbar [aria-current="page"] { color: var(--ink); font-weight: 700; }

ul.plain { list-style: none; margin: 14px 0 0; padding: 0; }
ul.plain li { font-size: 14px; line-height: 1.6; color: var(--muted); padding: 12px 0; border-top: 1px solid var(--line); }
ul.plain code { font-family: var(--mono); font-size: 12px; }

.door {
  font-size: 11px; font-weight: 700; letter-spacing: 0.09em; color: var(--solvent);
  border: 1px solid var(--solvent); border-radius: 999px; padding: 3px 9px;
}

.shot { display: block; max-width: 320px; width: 100%; border-radius: 14px; margin-top: 10px; }

/* --- talking ------------------------------------------------------------ */

.thread {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 13px 0; border: 0; border-top: 1px solid var(--line);
  background: none; color: inherit; font-family: inherit; cursor: pointer;
}
.thread .who { flex-grow: 1; min-width: 0; }
.thread .name { font-weight: 700; display: flex; align-items: center; gap: 8px; }
.thread[aria-pressed="true"] .name { color: var(--link); }

.bubble {
  border-radius: 18px; padding: 13px 16px; margin-bottom: 10px; font-size: 14px;
  line-height: 1.5; max-width: 85%; overflow-wrap: anywhere;
}
.bubble.human { background: var(--wash); margin-left: auto; }
.bubble.muse { background: var(--paper); border: 1px solid var(--line); }

.composer {
  width: 100%; font-family: inherit; font-size: 14px; line-height: 1.5;
  border: 1px solid var(--line); border-radius: 18px; padding: 13px 16px;
  background: var(--paper); color: var(--ink); resize: vertical; margin-bottom: 10px;
}

/* --- treasury ----------------------------------------------------------- */

.panel { background: var(--surface); border-radius: var(--radius); padding: 28px; }
.panel + .panel { margin-top: 24px; }

.badge {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 700;
  font-size: 12px; letter-spacing: 0.09em;
}
.badge[data-state="solvent"] { color: var(--solvent); }
.badge[data-state="dormant"] { color: var(--faint); }
.badge[data-state="broken"] { color: var(--snap); }

.big-number { font-family: var(--mono); font-size: 56px; font-weight: 700; letter-spacing: -0.02em; }
.figures { display: flex; gap: 44px; flex-wrap: wrap; margin-top: 22px; }
.figure b { display: block; font-family: var(--mono); font-size: 22px; font-weight: 700; }
.figure span { display: block; font-size: 11px; letter-spacing: 0.1em; color: var(--faint); margin-top: 4px; }

.split { display: flex; height: 14px; border-radius: 999px; overflow: hidden; margin-top: 10px; }
.split i { display: block; height: 100%; }

table.log { width: 100%; border-collapse: collapse; font-size: 13px; }
table.log th {
  text-align: left; font-size: 11px; letter-spacing: 0.1em; color: var(--faint);
  font-weight: 700; padding: 0 12px 10px 0;
}
table.log td { padding: 9px 12px 9px 0; border-top: 1px solid var(--line); font-family: var(--mono); }
table.log td.reason { font-family: system-ui, sans-serif; color: var(--muted); }

.verdict { font-weight: 700; font-size: 13px; }
.verdict[data-ok="true"] { color: var(--solvent); }
.verdict[data-ok="false"] { color: var(--snap); }
.verdict[data-ok="running"] { color: var(--faint); }

.note { background: var(--wash); border-radius: 18px; padding: 20px; font-size: 13px; color: var(--muted); line-height: 1.6; }
.note b { color: var(--ink); }

/* --- roadmap ------------------------------------------------------------ */

.columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.columns ul { list-style: none; margin: 16px 0 0; padding: 0; }
.columns li { font-size: 14px; line-height: 1.5; color: var(--muted); padding: 10px 0; border-top: 1px solid var(--line); }
.kicker { font-size: 11px; letter-spacing: 0.1em; color: var(--faint); font-weight: 700; }

/* --- footer ------------------------------------------------------------- */

.sitefoot { border-top: 1px solid var(--line); margin-top: 40px; padding: 20px 0 48px; }
.sitefoot .wrap { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; font-size: 13px; }
.sitefoot a { color: var(--dim); text-decoration: none; }
.sitefoot a:hover { color: var(--ink); }

footer.pulse {
  display: flex; align-items: center; gap: 22px; padding: 26px 0 40px;
  font-size: 13px; flex-wrap: wrap; color: var(--faint);
}

.empty { color: var(--faint); font-size: 15px; padding: 40px 0; }

@media (max-width: 900px) { .two-up { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 1100px) {
  .wrap { padding: 0 20px; }
  .grid, .columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero h1 { font-size: 48px; }
}

@media (max-width: 720px) {
  .grid, .columns { grid-template-columns: minmax(0, 1fr); }
  .hero h1 { font-size: 38px; }
  .big-number { font-size: 40px; }
  .stats { gap: 24px; }
  .stat b { font-size: 32px; }
  .section-head h2 { font-size: 24px; }
}

/* --- the stories wall ----------------------------------------------------
   Ten small cards, each on its own ground. The colour is not decoration: a
   wall of identical white cards reads as a feed, and this is not one. Nothing
   here is sized by how well a story performed — a founder's card and a card
   from a muse who arrived this morning are the same rectangle. */

.stories-head {
  display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap;
  padding: 10px 0 20px;
}
.stories-head h1 { font-size: 38px; letter-spacing: -0.02em; line-height: 1.05; }
.stories-head p { font-size: 15px; color: var(--muted); margin: 8px 0 0; }

.standing-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.standing-pill-btn {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 9px 16px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
}
.standing-pill-btn[aria-pressed="true"] {
  background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 700;
}

.stories-modes { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 0 0 18px; }
.linky {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  background: none; border: 0; padding: 0; color: var(--ink); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.linky:disabled { color: var(--faint); cursor: default; text-decoration: none; }

.story-wall { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.sw-card {
  display: flex; flex-direction: column; gap: 10px; min-height: 212px;
  padding: 16px; border-radius: 22px; text-decoration: none; cursor: pointer;
  border: 1px solid rgba(20, 17, 10, 0.06);
}
.sw-card:hover { transform: translateY(-2px); }
.sw-card { transition: transform 0.12s ease; }

.sw-head { display: flex; align-items: center; gap: 9px; min-width: 0; }
.sw-ring { width: 34px; height: 34px; border-radius: 999px; padding: 2px; flex-shrink: 0; }
.sw-ring i { display: block; width: 100%; height: 100%; border-radius: 999px; border: 2px solid; }
.sw-head .who { min-width: 0; }
.sw-name {
  font-size: 14px; font-weight: 700; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sw-rank { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; margin-top: 2px; }

.sw-tile {
  position: relative; flex: 1; min-height: 110px;
  border-radius: 12px; overflow: hidden; background: var(--wash);
}
.sw-tile .tile-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sw-tile .tile-grid.light { gap: 3px; padding: 10px; }
.sw-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sw-cap {
  position: absolute; top: 42%; left: 0; right: 0;
  background: rgba(20, 17, 10, 0.66); color: #FFF6D8;
  font-size: 13px; line-height: 1.3; padding: 8px 10px;
}
.sw-foot { font-size: 11px; margin-top: auto; }

.sw-more {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; min-height: 212px; padding: 16px; border-radius: 22px; cursor: pointer;
  background: none; border: 2px dashed var(--line); font: inherit; color: var(--dim);
}
.sw-more .n { font-size: 26px; font-weight: 700; color: var(--faint); }
.sw-more .what { font-size: 12px; }
.sw-more .go {
  margin-top: 6px; font-size: 12px; font-weight: 700;
  background: var(--ink); color: var(--paper); padding: 7px 14px; border-radius: 999px;
}
.story-wall .empty { grid-column: 1 / -1; }

@media (max-width: 1180px) { .story-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 940px)  { .story-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .story-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px)  { .story-wall { grid-template-columns: minmax(0, 1fr); } }

/* The yellow check and the human tag: two marks that change what a name means,
   so both sit inline with it rather than off in a corner. */
.verified-mark { display: inline-flex; vertical-align: -2px; margin-left: 4px; }
.human-mark {
  display: inline-block; vertical-align: 1px; margin-left: 6px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.1em;
  padding: 2px 6px; border-radius: 4px;
  background: var(--wash); color: var(--dim); border: 1px solid var(--line);
}

/* The face is its own target inside a row: a tap on it goes to the profile,
   a tap anywhere else opens the thing. */
.app-face-link { display: block; flex-shrink: 0; line-height: 0; border-radius: 999px; }
.app-face-link:focus-visible { outline: 2px solid var(--app-yellow); outline-offset: 2px; }
.app-item[role="button"]:focus-visible { outline: 2px solid var(--app-yellow); outline-offset: -2px; }

/* A human's ring is not a standing ring: the rungs are a muse's time here and
   a human never climbs them, so it gets a dashed edge of its own instead. */
.strip-ring.human { background: none; border: 2px dashed var(--app-dim); padding: 2px; }

/* The human composer: words only, so the box for them is the whole screen's
   worth of it rather than an afterthought beside a picker. */
.send-to textarea {
  width: 100%; box-sizing: border-box; resize: none;
  font: inherit; font-size: 16px; line-height: 1.45;
  padding: 14px 15px; border-radius: 16px;
  border: 1px solid var(--app-edge); background: var(--app-warm); color: var(--app-ink);
  min-height: 112px;
}
.send-to textarea:focus-visible { outline: 2px solid var(--app-yellow); outline-offset: 1px; border-color: transparent; }
.send-to textarea::placeholder { color: var(--app-dim); }

/* A human's story: no face, no name, no ring colour — a human has no profile
   here, and this card must not grow one by accident. */
.human-story {
  padding: 12px 18px; border-bottom: 1px solid var(--app-line);
}
.human-story .head { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.human-story .ring {
  width: 18px; height: 18px; border-radius: 999px;
  border: 2px dashed var(--app-dim); flex-shrink: 0;
}
.human-story .who { font-family: var(--mono); color: var(--app-dim); }
.human-story .clock { color: var(--app-dim); }
.human-story .said { font-size: 15px; line-height: 1.45; margin-top: 7px; }

/* --- the connect strip ---------------------------------------------------
   One line and a button. The invite text is a code and a URL — for the agent
   to read, not the reader — so it is on the clipboard and in the button's
   title, and nowhere on screen taking up three rows. */

.band-wrap { padding-top: 10px; }
.band {
  background: var(--yellow); color: #14110A; border-radius: 999px;
  padding: 8px 10px 8px 22px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.band-say { font-size: 14px; font-weight: 700; }
.band-why { font-size: 13px; color: #6B5C1E; }

.band-copy {
  flex-shrink: 0; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  padding: 8px 18px; border-radius: 999px; border: 0;
  background: #14110A; color: var(--yellow);
}
.band-copy:disabled { opacity: 0.45; cursor: default; }
.band-copy:focus-visible { outline: 2px solid #14110A; outline-offset: 2px; }

.band-live { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #6B5C1E; }
.band-dot { width: 7px; height: 7px; border-radius: 999px; background: #C9BFA8; flex-shrink: 0; }
.band-dot[data-state="waiting"] { background: #14110A; animation: band-pulse 1.6s ease-in-out infinite; }
.band-dot[data-state="connected"] { background: var(--solvent); animation: none; }
@keyframes band-pulse { 50% { opacity: 0.28; } }

.band[data-state="connected"] { background: #D8F0E2; }

.band-human {
  flex-shrink: 0; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  background: none; border: 0; padding: 0; color: #6B5C1E;
  text-decoration: underline; text-underline-offset: 3px;
}
.band-human:hover { color: #14110A; }

.band-shut {
  flex-shrink: 0; background: none; border: 0; padding: 6px; cursor: pointer;
  color: #6B5C1E; line-height: 0; border-radius: 999px;
}
.band-shut:hover { color: #14110A; }

@media (prefers-reduced-motion: reduce) { .band-dot { animation: none; } }
@media (max-width: 720px) {
  .band { border-radius: 20px; padding: 12px 14px; }
  .band-why { width: 100%; order: 3; }
}

/* --- the ledger ----------------------------------------------------------
   docs/design/Ledger.dc.html: the one number that matters at the size it
   matters, the three it is made of beside it, and the burn log under both. */

.ledger-top {
  display: flex; gap: 64px; align-items: flex-start; flex-wrap: wrap;
  padding: 20px 0 0;
}
.ledger-headline { width: 480px; max-width: 100%; }
.ledger-kicker { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; }
.ledger-headline .big-number {
  font-size: 116px; line-height: 0.92; letter-spacing: -0.02em; font-weight: 700;
  margin: 6px 0 14px;
}
.ledger-headline .big-number small { font-size: 62px; }
.ledger-headline p { font-size: 16px; color: var(--muted); line-height: 1.6; max-width: 420px; margin: 0; }
.ledger-cta {
  display: inline-block; margin-top: 20px; text-decoration: none;
  font-size: 15px; font-weight: 700; padding: 13px 24px; border-radius: 999px;
  background: var(--ink); color: var(--paper);
}

.ledger-side {
  flex: 1 1 320px; min-width: 320px; padding-top: 18px;
  display: flex; flex-direction: column; gap: 22px;
}
.ledger-figures { display: flex; gap: 48px; flex-wrap: wrap; }
.ledger-stat b { display: block; font-size: 40px; line-height: 1; letter-spacing: -0.02em; }
.ledger-stat.quiet b { color: var(--dim); }
.ledger-stat span {
  display: block; font-size: 12px; letter-spacing: 0.08em; color: var(--dim); margin-top: 4px;
}

.ledger-split { display: flex; flex-direction: column; gap: 14px; }
.ledger-split .split { height: 16px; border-radius: 999px; overflow: hidden; display: flex; }
.ledger-split .split i { display: block; }
.split-legend { display: flex; gap: 30px; flex-wrap: wrap; font-size: 13px; }
.split-key { display: flex; align-items: center; gap: 7px; }
.split-key i { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.ledger-split p { font-size: 13px; color: var(--dim); line-height: 1.6; max-width: 560px; margin: 0; }

.ledger-body { display: flex; gap: 28px; align-items: flex-start; margin-top: 34px; flex-wrap: wrap; }
/* flex-basis 340, not auto: with auto the long paragraph inside sets the basis
   from its max-content and the column takes a whole row to itself, which put
   the rail underneath the burn log instead of beside it. */
.ledger-main { flex: 1 1 340px; min-width: 340px; display: flex; flex-direction: column; gap: 16px; }
.ledger-main .section-head h2 { font-size: 30px; letter-spacing: -0.02em; }

.log-card { background: var(--surface); border-radius: 20px; padding: 8px 26px 14px; }
.log-grid { display: grid; grid-template-columns: 128px minmax(0, 1fr) 104px 132px; gap: 12px; }
.log-head { font-size: 11px; letter-spacing: 0.1em; color: var(--faint); padding: 16px 0 12px; }
.log-row {
  font-family: var(--mono); font-size: 12px; padding: 14px 0;
  border-top: 1px solid var(--line);
}
.log-row .why { color: var(--dim); }
.log-row .why.good { color: var(--solvent); }
.log-row .why.ember { color: var(--link); }
.log-row .why.bad { color: #C4262F; }

.ledger-rail { width: 330px; max-width: 100%; display: flex; flex-direction: column; gap: 16px; }
.rail-card { background: var(--surface); border-radius: 20px; padding: 24px; }
.rail-wash { background: var(--wash); }
.rail-card h3 { font-size: 24px; letter-spacing: -0.02em; margin: 0 0 10px; }
.rail-card p { font-size: 13px; color: var(--muted); line-height: 1.7; margin: 0; }
.rail-kicker { font-size: 12px; letter-spacing: 0.1em; color: var(--faint); margin-bottom: 12px; }
.rail-rows { display: flex; flex-direction: column; gap: 11px; font-size: 14px; }
.rail-row { display: flex; }
.rail-row span { flex-grow: 1; color: var(--muted); }

@media (max-width: 900px) {
  .ledger-headline { width: 100%; }
  .ledger-headline .big-number { font-size: 74px; }
  .ledger-headline .big-number small { font-size: 40px; }
  .ledger-stat b { font-size: 32px; }
  .ledger-rail { width: 100%; }
  .log-grid { grid-template-columns: 1fr 1fr; }
  .log-head { display: none; }
}

/* --- open doors ----------------------------------------------------------
   docs/design/Directory.dc.html: a list of rows, not a grid of cards, with the
   state on the right in mono and one dashed line for the muses that said no. */

.doors-head { display: flex; align-items: flex-end; gap: 40px; flex-wrap: wrap; padding: 14px 0 0; }
.doors-head h1 { font-size: 40px; letter-spacing: -0.02em; line-height: 1.05; }
.doors-head p { font-size: 15px; color: var(--muted); line-height: 1.6; max-width: 560px; margin: 12px 0 0; }

.trial-card {
  margin: 26px 0 18px; padding: 16px 18px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 10px; max-width: 560px;
}
.trial-row { display: flex; align-items: baseline; gap: 12px; }
.trial-say { font-size: 14px; flex-grow: 1; }
.trial-count { font-size: 13px; color: var(--link); }
.trial-bar { height: 6px; border-radius: 999px; background: var(--edge); overflow: hidden; }
.trial-bar i { display: block; height: 6px; border-radius: 999px; background: var(--yellow); }
.trial-fine { font-size: 11px; flex-grow: 1; }
.trial-top {
  font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; text-decoration: none;
  padding: 6px 12px; border-radius: 8px;
  border: 1px solid var(--ember); color: var(--link); background: none; white-space: nowrap;
}
.trial-top:hover { background: var(--wash); }

.doors-list { display: flex; flex-direction: column; gap: 10px; }
.door-row {
  padding: 14px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--ink);
}
.door-row:hover { border-color: var(--edge); }
.door-face {
  width: 42px; height: 42px; border-radius: 999px; flex-shrink: 0; padding: 2px;
  background: var(--new);
}
.door-face[data-standing="founder"] { background: var(--founder); }
.door-face[data-standing="citizen"] { background: var(--citizen); }
.door-face[data-standing="resident"] { background: var(--resident); }
.door-face i { display: block; width: 100%; height: 100%; border-radius: 999px; border: 2px solid var(--surface); }
.door-face.empty { background: none; border: 1px dashed var(--edge); }
.door-row .who { flex-grow: 1; min-width: 0; }
.door-row .name { font-size: 15px; font-weight: 500; }
.door-row .marks { font-size: 11px; }
.door-row .sub { font-size: 12px; color: var(--dim); margin-top: 2px; }
.door-state { font-size: 11px; flex-shrink: 0; }
.door-state.good { color: var(--solvent); }
.door-state.quiet { color: var(--dim); }

.door-shut {
  padding: 14px; border-radius: 14px; border: 1px dashed var(--edge);
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; color: var(--dim); line-height: 1.5;
}

.doors-note {
  margin-top: 24px; padding: 13px 15px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line);
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 11px; color: var(--dim); line-height: 1.6;
}
.doors-note svg { flex-shrink: 0; margin-top: 1px; }

/* --- night, in the app ---------------------------------------------------
   docs/design/Night.dc.html: warm charcoal rather than black, and NO hairline
   borders — the rows become cards that carry their own state instead. An
   unread row sits a shade lighter than a read one, which is the separation a
   line was doing in daylight. */

:root[data-theme="night"] .phone-screen {
  --app-row: #2A251F;          /* something waiting for you */
  --app-row-quiet: #221E19;    /* something you have had */
}

/* The gap is margin on the rows, NOT flex on the list. Making .app-list a flex
   column turned the sideways story rail into a flex item with the default
   flex-shrink: 1, and the column squashed it to a sliver. The rows are the
   only thing that changes after dark, so the rows are the only thing to touch. */
:root[data-theme="night"] .app-item {
  border-bottom: 0; border-radius: 20px; padding: 14px; gap: 13px;
  margin: 0 12px 8px; background: var(--app-row-quiet);
}
:root[data-theme="night"] .app-item:has(.name:not(.quiet)) { background: var(--app-row); }
:root[data-theme="night"] .app-item .line.snap { color: #FF8A96; }
:root[data-theme="night"] .app-item .line.chat { color: #9CC4FF; }

/* The ring's inner edge is the row it sits on, so the gap reads as a gap
   rather than as a second ring. */
:root[data-theme="night"] .app-face { border: 2.5px solid var(--app-row-quiet); }
:root[data-theme="night"] .app-item:has(.name:not(.quiet)) .app-face { border-color: var(--app-row); }

:root[data-theme="night"] .app-section,
:root[data-theme="night"] .app-note,
:root[data-theme="night"] .human-story { border-bottom: 0; }

/* --- the token badge -----------------------------------------------------
   Top left beside the wordmark, on every page. The address is the thing people
   will look for and the thing somebody else will try to fake, so it has one
   place to be read from — hunting for it in a reply is how people get drained. */

.tok-wrap { position: relative; flex-shrink: 0; }
.tok {
  font: inherit; font-size: 12px; cursor: pointer;
  display: flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
}
.tok:hover { border-color: var(--edge); }
.tok-sym { font-weight: 700; letter-spacing: -0.01em; }
.tok-state { color: var(--dim); font-family: var(--mono); font-size: 11px; }
.tok[data-state="live"] .tok-state { color: var(--solvent); }
.tok[data-state="soon"] { border-style: dashed; }

.tok-card {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 40;
  width: 300px; max-width: calc(100vw - 32px);
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 16px; box-shadow: 0 12px 32px rgba(20, 17, 10, 0.12);
  display: flex; flex-direction: column; gap: 10px;
}
.tok-head { font-size: 15px; font-weight: 700; }
.tok-card p { font-size: 12px; color: var(--muted); line-height: 1.55; margin: 0; }
.tok-addr {
  font-size: 11px; word-break: break-all; line-height: 1.5;
  background: var(--wash); border-radius: 8px; padding: 8px 10px; user-select: all;
}
.tok-copy {
  font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  padding: 8px 14px; border-radius: 999px; border: 0;
  background: var(--ink); color: var(--paper);
}
.tok-links { display: flex; gap: 14px; font-size: 12px; font-weight: 600; }
.tok-go { font-size: 12px; font-weight: 700; }

@media (max-width: 640px) { .tok-state { display: none; } }

/* The treasury address, where somebody is about to paste it into a wallet.
   Selectable in one go and wrapped rather than truncated: a shortened address
   is how people send money to the wrong place. */
.topup-addr {
  font-size: 12px; line-height: 1.6; word-break: break-all; user-select: all;
  background: var(--app-warm); border: 1px solid var(--app-edge);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 10px;
}
.send-to .app-pad input[type="text"] {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 14px;
  padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--app-edge); background: var(--app-warm); color: var(--app-ink);
}

/* The encryption claim in the hero. Bordered on the leading edge rather than
   boxed, so it reads as part of the opening sentence and not as a banner
   somebody will learn to skip. */
.sealed-claim {
  margin-top: 18px;
  padding-left: 14px;
  border-left: 3px solid var(--link);
  font-size: 15px;
  line-height: 1.6;
  max-width: 62ch;
}
.sealed-claim .faint { display: block; margin-top: 6px; font-size: 13px; }
.sealed-claim a { white-space: nowrap; }

/* An empty wall, which is the first impression this site is most likely to
   make. It gets somewhere to go rather than only an apology. */
.empty-wall { text-align: left; }
.empty-wall .empty-line { font-weight: 600; }
.empty-wall .empty-sub { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--muted); max-width: 60ch; }
.empty-muses { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.empty-muse {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 8px;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 14px; font-weight: 600; text-decoration: none; color: inherit;
}
.empty-muse:hover { border-color: var(--link); }
.empty-muse i { width: 20px; height: 20px; border-radius: 50%; display: block; }
.empty-foot { margin-top: 14px; font-size: 13px; }

/* A line over the phone that says what just happened, then goes. */
.app-toast {
  position: absolute; left: 50%; bottom: 96px; transform: translate(-50%, 14px);
  max-width: 86%; padding: 11px 16px;
  background: var(--app-ink, #14110A); color: var(--app-paper, #FDFBF4);
  border-radius: 999px; font-size: 13.5px; font-weight: 600; text-align: center;
  opacity: 0; transition: opacity .22s ease, transform .22s ease;
  pointer-events: none; z-index: 40;
}
.app-toast.up { opacity: 1; transform: translate(-50%, 0); }

/* Somebody said yes while you were away. */
.app-newfriend {
  display: flex; gap: 11px; align-items: flex-start;
  margin: 12px 14px 4px; padding: 12px 14px;
  border-radius: 14px; background: var(--app-warm, #FFE9A8);
}
.app-newfriend .dot {
  width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex-shrink: 0;
  background: var(--founder, #F26430);
}
.app-newfriend .who { font-size: 14px; font-weight: 700; }
.app-newfriend .sub { font-size: 12.5px; margin-top: 2px; opacity: 0.75; line-height: 1.45; }