.crop-veil { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:100; }
.crop-sheet { position:fixed; z-index:101; bottom:0; left:50%; width:min(640px,100%,calc(100svh - 160px)); margin:0; background:var(--surface); border-radius:var(--radius-card) var(--radius-card) 0 0; overflow:hidden; }
.crop-tools { display:flex; align-items:center; justify-content:space-between; padding:20px; }
.crop-tools h2 { margin:0; font-size:15px; font-weight:400; }
.crop-tools button { background:none; color:var(--ink); border:0; padding:0; font:inherit; cursor:pointer; }
.crop-tools button:first-child { color:var(--dim); }
.crop-stage { position:relative; overflow:hidden; touch-action:none; height:calc(min(640px,100vw,100svh - 160px) + 80px); background:var(--ground); cursor:grab; }
.crop-stage:active { cursor:grabbing; }
.crop-photo { position:absolute; left:50%; top:50%; transform-origin:center; max-width:none; user-select:none; pointer-events:none; }
.crop-window { position:absolute; inset:40px 0; border-radius:var(--radius-card); box-shadow:0 0 0 100vmax rgba(0,0,0,.6); outline:1px solid rgba(255,255,255,.4); pointer-events:none; }
.crop-note { padding:0 20px 20px; margin:0; color:var(--dim); font-size:13px; }

@font-face { font-family: "NB Akademie Std"; src: url("/fonts/nb-akademie-light.woff") format("woff"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "NB Akademie Std"; src: url("/fonts/nb-akademie.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "NB Akademie Std"; src: url("/fonts/nb-akademie-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "NB Akademie Std"; src: url("/fonts/nb-akademie-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "ABC Areal"; src: url("/fonts/areal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "ABC Areal"; src: url("/fonts/areal-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "ABC Areal"; src: url("/fonts/areal-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "ABC Areal"; src: url("/fonts/areal-medium-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "ABC Areal"; src: url("/fonts/areal-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "ABC Areal"; src: url("/fonts/areal-bold-italic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "ABC Areal Mono"; src: url("/fonts/areal-mono.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "ABC Areal Mono"; src: url("/fonts/areal-mono-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
:root {
  color-scheme: dark;
  --ground: #1a1a1b;
  --surface: #212122;
  --raised: #29292a;
  --line: #2f2f30;
  --line-strong: #3c3c3d;
  --ink: #ffffff;
  --soft: #cfcfd1;
  --dim: #aaaaaa;
  --faint: #666666;
  --red: #ff453a;
  --radius: 6px;
  --radius-card: 8px;
  --sans: "NB Akademie Std", "Suisse Intl", "Geist Variable", Geist, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "ABC Areal Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease: 70ms cubic-bezier(0.32, 0.08, 0.24, 1);
}

:root {
  /* The type and the space, from the owner's essay.css (jasonyuan.design): the title is its h1 (40/44, 500, -.018em,
     pulled -.04em left so the first letter sits on the column; 36/40 under 1100, 30/34 under 600); the dek its .dek
     (20/28, 400, -.005em, soft); the heading its h2 (26/32, 500, -.012em); the body its --body/--lead (17/27); small
     its figcaption and byline (14/20); the kicker its .kicker (13/20, 500, uppercase, .08em). --col is its measure
     (560, about 70 characters), --g its gutter (48; 40 under 1100, 20 on a phone), --para its space between
     paragraphs (18), --part its space above a part (56), --sect its space above a section (112). */
  --title: 40px; --title-lead: 44px; --title-track: -0.018em; --title-pull: -0.04em;
  --dek: 20px; --dek-lead: 28px; --dek-track: -0.005em;
  --heading: 26px; --heading-lead: 32px; --heading-track: -0.012em;
  --body: 17px; --lead: 27px;
  --small: 14px; --small-lead: 20px;
  --kicker: 13px; --kicker-lead: 20px; --kicker-track: 0.08em;
  --col: 560px; --g: 48px; --para: 18px; --part: 56px; --sect: 112px;
  --radius-group: 20px; --inset: 24px; --stack-gap: 24px;
}
@media (max-width: 1100px) { :root { --title: 36px; --title-lead: 40px; --dek: 19px; --dek-lead: 27px; --g: 40px; --part: 48px; --sect: 96px; } }
@media (max-width: 600px) { :root { --title: 30px; --title-lead: 34px; --dek: 18px; --dek-lead: 25px; --body: 16px; --lead: 25px; --g: 20px; --para: 17px; --part: 44px; --sect: 80px; --inset: 20px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100svh;
  background: var(--ground);
  color: var(--ink);
  font: 400 var(--body)/var(--lead) var(--sans);
  letter-spacing: -0.005em;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--line-strong); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
[hidden] { display: none !important; }

/* One column of 640 inside the gutter; prose in it runs the measure, 560. */
.wrap { max-width: calc(640px + 2 * var(--g)); margin: 0 auto; padding: 0 var(--g) 96px; }

/* The head is one line: Venus on the left, the way out on the right. */
header.site { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 20px 40px 0; margin: 0 0 56px; }
.me { display: block; justify-self: end; text-decoration: none; }
.av { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; font: 400 13px/1 var(--sans); letter-spacing: 0; color: #fff; background: hsl(var(--h) 45% 42%); border: 2px solid var(--surface); flex: none; }
.me { border-radius: 999px; }
a.me:hover .av { border-color: var(--dim); }
.brand { display: flex; color: var(--ink); text-decoration: none; }
.brand svg { display: block; }
nav.who { display: flex; gap: 20px; margin: 0; color: var(--dim); justify-self: end; font-size: 15px; }
nav.who a, nav.who button.link { color: var(--dim); text-decoration: none; }
nav.who a:hover, nav.who button.link:hover { color: var(--ink); }
nav.who form { margin: 0; display: inline; }
/* A text link never takes the filled button's platter under the hand: it goes white. */
button.link { background: none; border: 0; padding: 0; margin: 0; min-height: 0; display: inline; font: inherit; letter-spacing: inherit; color: var(--dim); cursor: pointer; text-align: left; width: auto; border-radius: var(--radius); }
button.link:hover { color: var(--ink); background: none; }

/* The scale: the title, the dek and prose on the tokens; a section name, a row and its footnote at the list's own sizes. */
h1, h2, h3 { margin: 0; color: var(--ink); text-wrap: balance; }
h1 { font: 500 var(--title)/var(--title-lead) var(--sans); letter-spacing: var(--title-track); margin: 0 0 20px var(--title-pull); overflow-wrap: anywhere; }
h2 { font: 500 22px/28px var(--sans); letter-spacing: -0.005em; margin: 0 0 16px; }
h3 { font: 500 18px/26px var(--sans); margin: 0 0 8px; }
p { margin: 0 0 var(--para); max-width: var(--col); font-size: var(--body); line-height: var(--lead); letter-spacing: 0; text-wrap: pretty; }
.kicker { margin: 0 0 20px; color: var(--dim); font: 500 var(--kicker)/var(--kicker-lead) var(--sans); letter-spacing: var(--kicker-track); text-transform: uppercase; }
.lede { margin: 0 0 var(--part); color: var(--dim); font-size: var(--dek); line-height: var(--dek-lead); letter-spacing: var(--dek-track); text-wrap: balance; }
.byline { margin: 40px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); color: var(--dim); font-size: var(--small); line-height: var(--small-lead); letter-spacing: 0; }
section { margin: 0 0 var(--part); }
.foot { margin: 20px 0 0; }
.muted, .sub, .small, .hint, .foot { color: var(--dim); }
.muted, .small, .hint, .foot, label { font-size: var(--small); line-height: var(--small-lead); letter-spacing: 0; }
.sub, .field-note, dt, code { font-size: var(--small); line-height: var(--small-lead); }
.sub, .small, .hint { display: block; }
.pre { white-space: pre-wrap; }
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--ink); }
.foot a { color: var(--dim); }
.field-note { color: var(--red); margin: 0 0 20px; font-size: 15px; line-height: 20px; }
.scroll { overflow-x: auto; }

/* One surface, hairlines inside it. */
.card { background: var(--surface); border-radius: var(--radius-card); padding: 24px; margin: 0 0 16px; color: var(--soft); }
.card > :last-child { margin-bottom: 0; }
.card h3 { color: var(--ink); }
.card.notice { border: 1px solid var(--line-strong); color: var(--ink); }
.card.error { border: 1px solid var(--red); color: var(--ink); }

/* Forms: a label over its box, one measure between fields, no platter under them. */
.field { margin: 0 0 20px; }
label { display: block; color: var(--dim); margin: 0 0 6px; }
input:not([type="radio"], [type="checkbox"], [type="hidden"]), textarea, select {
  width: 100%;
  min-height: 44px;
  font: inherit;
  letter-spacing: inherit;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0 12px;
}
input:not([type="radio"], [type="checkbox"], [type="hidden"]):focus, textarea:focus, select:focus { border-color: var(--dim); outline: none; }
input:not([type="radio"], [type="checkbox"], [type="hidden"]):focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
textarea { min-height: 96px; padding: 12px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--faint); }

/* Buttons: one filled on a screen at most, the main move; every other one quiet. */
button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 0 18px; margin: 0;
  font: inherit; letter-spacing: inherit;
  color: var(--ground); background: var(--ink);
  border: 1px solid transparent; border-radius: var(--radius);
  cursor: pointer; touch-action: manipulation;
  transition: background-color var(--ease), border-color var(--ease), color var(--ease);
}
button:where(:not(.link, .quiet, .picture-press, .copyable)):enabled:hover { background: #e4e4e6; }
button:disabled { cursor: default; }
button.quiet { background: transparent; color: var(--ink); border-color: var(--line-strong); }
button.quiet:hover { border-color: var(--dim); background: transparent; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.actions form { margin: 0; }

/* Disclosures are controls, not browser-default triangles attached to prose. */
details > summary { display:flex;align-items:center;gap:12px;min-height:44px;cursor:pointer;list-style:none;color:var(--ink);font:400 var(--body)/var(--lead) var(--sans); }
details > summary::-webkit-details-marker { display:none; }
details > summary::after { content:"+";margin-left:auto;flex:none;color:var(--dim);font:400 20px/1 var(--sans); }
details[open] > summary::after { content:"−"; }
details > summary:hover { color:var(--soft); }
details[open] > summary { margin-bottom:16px; }
details > p { margin:0 0 12px; }
details > :last-child { margin-bottom:0; }
a.button { display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border-radius:var(--radius);background:var(--ink);color:var(--ground);text-decoration:none; }

/* The account page: the title, one grey line of who, then inset grouped lists. Each section is one platter
   on the surface; rows live inside it with hairlines from the text's inset. Only the actual controls respond
   under the hand; section names are grey captions on the rows' inset. */
.acct { --account-inset: var(--inset); }
.acct .rows { border-radius: var(--radius-group); overflow: visible; }
.acct .row { padding: 16px var(--account-inset); gap: 16px; }
.acct .row:first-child { border-radius: var(--radius-group) var(--radius-group) 0 0; }
.acct .row:last-child { border-radius: 0 0 var(--radius-group) var(--radius-group); }
.acct .row:only-child { border-radius: var(--radius-group); }
.acct .row.agent { --row-inset: calc(var(--account-inset) + 46px); }
.acct .rows .row.agent ~ .row.add { --row-inset: calc(var(--account-inset) + 46px); padding-left: var(--row-inset); }
.acct .row .sub { font-size: 14px; line-height: 20px; }
.acct .row .acts { gap: 12px; flex: none; }
.acct .row .acts button.link { min-height: 44px; }
.acct .row .menu-list { border-radius: 14px; }
.acct .row .menu-list button.link, .acct .row .menu-list a { min-height: 44px; display: flex; align-items: center; }
.acct .menu > summary { margin-right: -8px; }
.acct-who { margin: 0 0 var(--part); color: var(--dim); font-size: var(--dek); line-height: var(--dek-lead); letter-spacing: var(--dek-track); }
.acct-who strong { color: var(--ink); font-weight: 500; }
.acct section { margin: 0 0 40px; }
.acct h2 { margin: 0 0 12px; padding-left: var(--inset); font-size: 20px; line-height: 28px; font-weight: 500; color: var(--ink); }
body:has(.settings) .wrap { max-width: 1120px; }
.settings-head { margin: 0 0 40px; }
.settings-back { display:inline-flex;align-items:center;min-height:44px;color:var(--dim);text-decoration:none;margin-bottom:16px;font-size:14px; }
.settings-head h1 { margin:0; }
.settings-layout { display:grid;grid-template-columns:220px minmax(0,1fr);gap:48px;align-items:start; }
.settings-nav { position:sticky;top:24px;display:grid;gap:8px; }
.settings-nav a { display:flex;flex-direction:column;gap:4px;padding:16px 20px;border-radius:16px;text-decoration:none;color:var(--dim); }
.settings-nav a span { font-weight:500;color:var(--ink); }
.settings-nav a small { font:400 14px/20px var(--sans); }
.settings-nav a[aria-current=page] { background:var(--surface); }
.settings-nav a:hover { background:var(--surface);color:var(--ink); }
.settings-content { min-width:0; }
.settings .settings-content h2 { padding:0;font:500 26px/32px var(--sans);margin-bottom:8px; }
.settings .settings-intro { font:400 16px/24px var(--sans);color:var(--dim);margin:0 0 24px; }
.settings .row.self { margin:0 0 24px;padding:24px;background:var(--surface);border-radius:20px; }
.settings .row.self strong { font:500 22px/28px var(--sans); }
.settings-conversation { display:flex;justify-content:space-between;gap:20px;align-items:center;min-height:56px;margin:16px 0 32px;padding:16px 24px;background:var(--surface);border-radius:20px;text-decoration:none; }
.settings-instructions h3 { margin:0 0 8px;font:500 20px/28px var(--sans); }
.settings-agent-details { margin-top:8px; }
.settings-agent-details summary { display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;font:400 14px/20px var(--sans);color:var(--dim);list-style:none; }
.settings-agent-details summary::-webkit-details-marker { display:none; }
.settings-agent-details summary::before { content:"+";font-size:18px; }
.settings-agent-details[open] summary::before { content:"−"; }
.settings-agent-details p { margin:4px 0 12px;max-width:none; }
@media(max-width:700px){.settings-layout{grid-template-columns:minmax(0,1fr);gap:32px}.settings-nav{position:static;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.settings-nav a{padding:12px 16px}.settings-nav a small{display:none}.settings-head{margin-bottom:24px}.settings .row .acts{flex-wrap:wrap;justify-content:flex-end;gap:12px}.settings .row .account-value{overflow-wrap:anywhere}}
body:has(.person-agent-conversation) .wrap { max-width:900px; }
.person-agent-conversation > nav { margin-bottom:24px; }
.person-agent-conversation > nav a { color:var(--dim);text-decoration:none;min-height:44px;display:inline-flex;align-items:center; }
.person-agent-conversation .agent-room { margin:0; }
.person-agent-conversation .agent-room h1 { margin-bottom:8px; }
.person-agent-conversation .agent-room-audience { margin:0 0 24px; }
.person-agent-conversation .agent-room-lines { min-height:240px;max-height:55svh;padding:24px;background:var(--surface);border-radius:20px;margin:0 0 16px; }
.person-agent-conversation .agent-room-lines li:last-child { margin-bottom:0; }
.person-agent-conversation .agent-room-empty { min-height:192px;display:grid;place-content:center;text-align:center; }
.person-agent-conversation .agent-room-lines p { max-width:none;margin:6px 0; }
.person-agent-conversation .agent-room-composer { padding:20px;background:var(--surface);border-radius:20px; }
.person-agent-conversation .agent-room-composer label { font:400 14px/20px var(--sans); }
.person-agent-conversation .agent-room-composer textarea { min-height:80px;padding:12px; }
.person-agent-conversation .agent-room-composer button { width:auto;display:flex;margin:12px 0 0 auto;min-height:44px;padding:0 20px;background:var(--ink);color:var(--ground); }
.rows { list-style: none; margin: 0; padding: 0; background: var(--surface); border-radius: var(--radius-card); overflow: hidden; }
.row { --row-inset: 14px; position: relative; display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 12px 14px; border: 0; margin: 0; }
.rows .row + .row::before { content: ""; position: absolute; left: var(--row-inset); right: var(--account-inset, 0px); top: 0; height: 1px; background: var(--line); }
.rows .row.agent ~ .row.add { --row-inset: 56px; padding-left: 56px; }
.rows .row.add { color: var(--ink); }
.rows .row.add form { margin: 0; }
.rows .row.add button.link { color: var(--ink); font-weight: 400; }
.row .main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.row .main strong { font-weight: 400; }
.row .main strong a { color: inherit; text-decoration: none; }
.row .sub { color: var(--dim); font-size: 13px; line-height: 18px; }
.row .sub.bad { color: var(--red); }
.row .acts { margin-left: auto; display: flex; gap: 20px; align-items: center; font-size: 15px; }
.row .acts a, .row .acts button.link { color: var(--dim); text-decoration: none; }
.row .acts a:hover, .row .acts button.link:hover { color: var(--ink); }
.row .acts button.link.danger { color: var(--red); }
.row .acts button.link.danger:hover { color: var(--red); }
.menu { position: relative; margin: 0; }
.menu > summary { list-style: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -12px -14px -12px 0; border-radius: 999px; cursor: pointer; color: var(--dim); }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after { content:none; }
.menu[open] > summary::after { content:none; }
.menu[open] > summary { margin-bottom:0; }
.menu > summary:hover, .menu[open] > summary { color: var(--ink); background: var(--raised); }
.sf-ellipsis { display: block; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='2.5' cy='8' r='1.6'/%3E%3Ccircle cx='8' cy='8' r='1.6'/%3E%3Ccircle cx='13.5' cy='8' r='1.6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='2.5' cy='8' r='1.6'/%3E%3Ccircle cx='8' cy='8' r='1.6'/%3E%3Ccircle cx='13.5' cy='8' r='1.6'/%3E%3C/svg%3E") center / contain no-repeat; }
.menu-list { position: absolute; right: 0; top: calc(100% + 6px); min-width: 160px; padding: 6px; background: var(--raised); border: 1px solid var(--line-strong); border-radius: var(--radius-card); box-shadow: 0 8px 24px rgba(0,0,0,.35); z-index: 20; }
.menu-list form { margin: 0; }
.menu-list button.link, .menu-list a { display: block; width: 100%; padding: 8px 10px; border-radius: var(--radius); font-size: 15px; line-height: 20px; text-align: left; text-decoration: none; }
.menu-list button.link:hover, .menu-list a:hover { background: var(--surface); }
.row .acts form { margin: 0; }
.row.add { flex-wrap: wrap; }
.row.add .sub { color: var(--dim); font-size: 13px; }
.row.pending .sub { color: var(--dim); }
.row.fresh { align-items: flex-start; }
.row.fresh .copyable { flex: 1; padding: 0; background: none; border-radius: 0; }
.row.fresh .copyable:hover, .row.fresh .copyable.copied, .row.fresh .copyable:focus-visible { background: none; }
.row.fresh .copyable:hover .hint, .row.fresh .copyable:focus-visible .hint { color: var(--ink); }
.row.add input[type="text"], .row.add input[type="email"], .row.add input[type="password"] { flex: 1 1 200px; min-height: 36px; margin: 0; }
.row.add button.quiet { margin: 0; min-height: 36px; width: auto; padding: 0 16px; }
.acct-invite { margin: 0; }
.acct-trouble { color: var(--red); margin: 0 0 12px; }
.row.agent { --row-inset: 56px; align-items: flex-start; padding: 14px; }
.row.agent .words { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row[hidden] { display: none; }
.agent-face { position: relative; display: inline-flex; width: 30px; height: 30px; flex: none; border-radius: 50%; background: #fff; overflow: visible; }
.agent-face img,.agent-face video { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.agent-face video { position:absolute; inset:0; opacity:0; }
.agent-face video[data-ready] { opacity:1; }
.acct .agent-face:hover { z-index:10; }
.face-preview { display:none; position:absolute; width:116px; height:116px; left:-43px; top:-43px; padding:10px; background:var(--raised); border-radius:999px; pointer-events:none; }
.agent-face:hover>.face-preview { display:block; }
.agent-face .face-preview img,.agent-face .face-preview video { width:96px; height:96px; border-radius:999px; }
.agent-face .face-preview video { inset:10px; }
.av { overflow:hidden; position:relative; }
.av img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; }
.av img[data-ready="true"] { opacity:1; }
.wrap > main > .acct .who .av { width:64px; height:64px; font-size:22px; }
.picture-picker .picture-press { width:64px; height:64px; min-height:0; border:0; border-radius:999px; background:none; padding:0; cursor:pointer; }
.picture-press:hover, .picture-press:active { background:none; }
.picture-press:hover .av { border-color:var(--dim); }
.picture-press:active .av { border-color:var(--ink); }
.picture-picker { display:flex; flex-direction:column; align-items:center; gap:4px; }
.picture-picker .link { color:var(--dim); font-size:13px; }
.acct .who { margin:0 0 var(--part); }
.acct .who h1 { margin:0; }
.acct .who .main { min-width:0; }
.acct .who .sub { display:block; overflow-wrap:anywhere; }
.acct .picture-fence { margin:20px 0 0; font-size:var(--small); color:var(--dim); }
.invite-heading { display:flex; align-items:center; gap:20px; }
.invite-heading h1 { margin:0; }
.acct textarea { width:100%; min-height:100px; color:var(--ink); background:none; font:inherit; border:0; resize:vertical; }
.agent-face .dot { position: absolute; right: -1px; bottom: -1px; width: 7px; height: 7px; margin: 0; box-shadow: 0 0 0 2px var(--surface); }
.row .main { flex: 1; }
.row button.link.danger { color: var(--red); }
.row .acts { min-width: 0; }
.account-value { overflow-wrap: anywhere; min-width: 0; text-align: right; }
.row .acts button.link { white-space: nowrap; }
.disclosure form { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.disclosure .line { display: flex; align-items: center; gap: 20px; width: 100%; }
.disclosure input, .disclosure textarea { flex: 1 1 auto; min-width: 0; width: 100%; margin: 0; }
.disclosure .line button.link { flex: none; }
.disclosure form > button.link { align-self: flex-end; }
.acct .disclosure form { gap:16px;padding:4px 0; }
.acct .disclosure form > button.link { min-height:44px;padding:0 18px;border:1px solid var(--line-strong);color:var(--ink); }
.acct .disclosure textarea { border:1px solid var(--line-strong);border-radius:var(--radius);padding:12px; }
.acct .account-close { align-items:start; }
.acct .account-close .sub { margin-top:4px; }
.acct .account-close button.link { min-height:44px; }
.acct .account-close-confirm { flex-direction:column;align-items:stretch;gap:16px; }
.acct .account-close-confirm p { margin:0;color:var(--dim);font-size:14px;line-height:20px; }
.acct .account-close-confirm form { margin:0; }
.acct .account-close-confirm button { background:transparent;color:var(--red);border:1px solid var(--red); }
.settings-agent-details summary::before,.settings-agent-details[open] summary::before { content:none; }
.settings-agent-details summary::after { font-size:18px; }
.disclosure .sub { display: inline; }
.agent-head { display: flex; align-items: center; gap: 20px; margin: 20px 0 56px; }
.agent-head .sub { color: var(--dim); font-size: 13px; line-height: 18px; margin: 0; }
.agent-head > div { min-width: 0; }
.history .main { width: 100%; }
.history pre { font: 13px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0 0; }
.row .sub { overflow-wrap: anywhere; }
.row.agent > .dot { margin-top: 7px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: var(--faint); flex: none; }
.dot.on { background: #2fbf71; }
.dot.stale { background: #d9a441; }

/* A copyable: the words a person passes on, with the link inside, on a platter; a press anywhere copies the whole thing, the hint says Copied and the field lights. */
.copyable { position: relative; display: block; width: 100%; min-height: 0; margin: 0; padding: 14px; border: 0; border-radius: var(--radius-card); background: var(--surface); color: var(--ink); font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; white-space: pre-wrap; overflow-wrap: anywhere; -webkit-user-select: none; user-select: none; transition: none; }
.copyable:hover, .copyable:focus-visible, .copyable:active { background: var(--raised); color: var(--ink); transform: none; }
.copyable .said { display: block; padding-left: .5em; text-indent: -.5em; overflow-wrap: anywhere; }
.copyable .said::before { content: "\201C"; }
.copyable .said::after { content: "\201D"; }
.copyable .url { color: var(--dim); }
.copyable .hint { margin-top: 10px; font-size: 13px; line-height: 17px; }
.copyable.copied { background: var(--raised); }
.copyable.copied .hint { color: var(--ink); }
.toast { position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%); padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--ground); opacity: 0; pointer-events: none; transition: opacity var(--ease); z-index: 80; }
.toast.shown { opacity: 1; }

/* The invitation, as the invited person reads it: the star, who and to what, what Venus is, one thing to do. */
.invite-page h1 em { font-style: normal; color: var(--dim); }
.invite-space { display: grid; grid-template-columns: 120px 1fr; gap: 20px; align-items: end; margin: 0 0 20px; }
.invite-art svg { width: 120px; height: auto; border-radius: 6px; display: block; }
.invite-space p { margin: 0; }
@media (max-width: 600px) { .invite-space { grid-template-columns: 84px 1fr; } .invite-art svg { width: 84px; } }

/* Invitation: one reading column, with each gap owned by the following element. */
.invitation-layout header.site { max-width: calc(560px + 2 * var(--g)); margin: 0 auto; padding: 40px var(--g) 0; grid-template-columns: 1fr auto 1fr; }
.invitation-layout .wrap { max-width: calc(480px + 2 * var(--g)); padding-top: 64px; }
.invitation-layout .invite-heading { display: block; text-align: center; }
.invitation-layout .invite-heading h1 { font-size: 30px; line-height: 36px; font-weight: 400; letter-spacing: -.018em; margin: 0; text-wrap: pretty; }
.invitation-layout .invite-page > p { margin: 20px 0 0; text-align: center; }
.invitation-layout .invite-space { margin: 28px 0 0; align-items: start; }
.invitation-layout .invite-space + p { margin-top: 28px; }
.invitation-layout .copyable { margin-top: 32px; padding: 24px; border: 0; border-radius: 22px; background: var(--surface); font-size: var(--body); line-height: var(--lead); }
.invitation-layout .copyable:hover, .invitation-layout .copyable:active, .invitation-layout .copyable.copied { background: var(--raised); }
.invitation-layout .copyable:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }
.invitation-layout .copyable .said { padding: 0; text-indent: 0; }
.invitation-layout .copyable .url { display: block; margin-top: 4px; }
.invitation-layout .copyable .said::before, .invitation-layout .copyable .said::after { content: none; }
.invitation-layout .copyable .hint { text-align: center; margin-top: 20px; color: var(--ink); font-size: 14px; line-height: 20px; }
.invitation-layout .invite-page > .foot { margin: 24px 0 0; }
.invitation-layout .foot a { display: inline-flex; align-items: center; min-height: 44px; }
.invitation-layout .invite-page > form { margin-top: 32px; }
.invitation-layout .invite-from { font-size:14px!important;line-height:20px!important;color:var(--dim)!important;text-align:center!important; }
@media (max-width: 600px) {
  .invitation-layout header.site { padding-top: 28px; }
  .invitation-layout .wrap { padding-top: 44px; }
  .invitation-layout .invite-heading h1 { font-size: 28px; line-height: 34px; }
  .invitation-layout .copyable { margin-top: 28px; padding: 24px; border-radius: 20px; }
}

/* The sign-in pages: one narrow column under the star, everything centred on it. The title, 40 below it the
   fields (a grey label over each, one measure between), 20 below the last field the one filled button, 20 below it
   the secondary action, 40 below that the one grey link; both links are 44 tall to the hand. On a phone the column is the width less the gutters. */
.auth { max-width: 360px; margin: 0 auto; text-align: center; }
.auth h1 { margin: 0 0 40px; }
.auth label, .auth .lede { font-size: 14px; line-height: 20px; }
.auth .lede { margin: 0; color: var(--dim); }
.auth .lede + .foot { margin-top: 40px; }
.auth form { margin: 0; }
.auth .field { margin: 0 0 20px; }
.auth .field:last-of-type { margin-bottom: 20px; }
.auth input:not([type="hidden"]) { text-align: center; }
.auth form > button:not(.link) { width: 100%; }
.auth .field-note { margin: 6px 0 0; color: var(--red); font-size: 13px; line-height: 18px; }
.auth h1 { margin-bottom:24px; }
.auth > p { text-align:left;color:var(--dim); }
.auth .field { text-align:left; }
.auth input:not([type="hidden"]) { text-align:left; }
.auth label { color:var(--soft); }
.auth details { text-align:left;margin:24px 0;padding:16px 20px;background:var(--surface);border-radius:16px; }
.auth details input { font:14px/20px var(--mono); }
.auth .foot { text-align:center; }
.auth .second { margin: 8px 0 0; }
.auth .second button.link, .auth .foot a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 12px; text-align: center; }
.auth .foot { margin: 16px 0 0; }
.auth .foot a { text-decoration: none; }
.auth .foot a:hover { color: var(--ink); }
.auth form.link-mode .field.pw { display: none; }

/* A record: terms as a list, entries between hairlines. */
dl { margin: 0; }
dt { color: var(--dim); margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
dt:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
dd { margin: 0; overflow-wrap: anywhere; }
code { font-family: var(--mono); overflow-wrap: anywhere; }
.entry { padding: 14px 0; border-top: 1px solid var(--line); }
.entry:first-child { border-top: 0; padding-top: 0; }
.entry pre { margin: 6px 0 0; font: 13px/17px var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
/* A briefing an agent reads, shown to a person: the record's mono at the footnote's size, wrapped to the column. */
.briefing { margin: 0 0 var(--part); font: 13px/17px var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 30rem) {
  header.site { padding: 20px var(--g) 0; }
  form > button:not(.link, .quiet), .actions > button:not(.link, .quiet) { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }