/* Account and quote surfaces share the studio's paper, ink and type. */
[data-accounts="true"] #operator-auth, [data-accounts="true"] #operator-lock,
[data-accounts="true"] #operator-unlock, [data-accounts="true"] #sign-in-dialog { display: none !important; }
.account-dialog { color: var(--ink); background: var(--paper); border: 1px solid var(--line-2); padding: 30px; width: min(460px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); overflow: auto; box-sizing: border-box; box-shadow: var(--sheet-shadow); font: 14px/1.55 var(--sans); }
.account-dialog::backdrop { background: rgb(23 26 25 / .28); }
.account-dialog header { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 28px; }
.account-dialog h2 { font: 500 30px/1.2 var(--serif); margin: 0; letter-spacing: -.025em; }
.account-dialog h3 { font: 500 22px/1.3 var(--serif); margin: 0 0 16px; }
.account-dialog p { margin: 0 0 14px; }
.account-dialog button, .account-dialog input { font: inherit; }
.account-close { background: none; border: 0; color: var(--ink-3); min-width: 44px; min-height: 44px; cursor: pointer; font-size: 24px !important; }
.account-note { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.account-muted { color: var(--ink-3); }
.account-status { margin-bottom: 24px; padding: 14px 16px; background: var(--paper-2); border: 1px solid var(--line); }
.account-status strong { display: block; font-weight: 500; margin-bottom: 4px; }
.account-error { color: var(--oxide); overflow-wrap: anywhere; }
.account-error:empty { display: none; }
.account-primary { color: var(--paper); background: var(--ink); border: 1px solid var(--ink); padding: 10px 18px; min-height: 40px; border-radius: 8px; cursor: pointer; text-align: center; font-size: 14px; font-weight: 500; }
.account-primary:hover:not(:disabled) { opacity: .92; }
.account-primary.wide { width: 100%; }
.account-primary.is-danger { color: var(--paper); background: var(--error); border-color: var(--error); }
.account-secondary { color: var(--ink); background: transparent; border: 1px solid var(--line-2); padding: 10px 18px; min-height: 40px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500; }
.account-secondary:hover:not(:disabled) { border-color: var(--ink); }
.account-link { background: transparent; color: var(--ink-2); border: none; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.account-link:hover { color: var(--ink); }
.account-dialog button:disabled { opacity: .45; cursor: wait; }
.account-dialog input:not([type="radio"]) { display: block; width: 100%; padding: 12px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--paper-2); color: var(--ink); box-sizing: border-box; margin: 6px 0 16px; }
.account-dialog label { display: block; font-size: 12px; color: var(--ink-2); }
.account-divider { display: flex; align-items: center; gap: 14px; color: var(--ink-3); font-size: 12px; margin: 20px 0; }
.account-divider::before,.account-divider::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.account-section { border-top: 1px solid var(--line); margin-top: 26px; padding-top: 24px; }
.account-balance { font: 500 48px/1.1 var(--serif); letter-spacing: -.035em; margin: 8px 0 !important; font-variant-numeric: tabular-nums; }
.account-balance span { font: 14px/1.4 var(--sans); letter-spacing: 0; color: var(--ink-3); margin-left: 6px; }
.account-eyebrow { font: 600 13.5px/1.4 var(--sans); letter-spacing: -.008em; color: var(--ink-2); }
.account-identity { overflow-wrap: anywhere; }
.account-packs { display: grid; gap: 6px; border: 0; padding: 0; margin: 0 0 12px; }
.account-packs legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.account-pack { display: flex !important; gap: 10px; align-items: center; min-height: 44px; border: 1px solid var(--line); padding: 0 12px; cursor: pointer; border-radius: 8px; }
.account-pack:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: transparent; }
.account-pack input { accent-color: var(--ink); margin: 0; }
.account-pack strong { font-size: 14px; font-weight: 500; color: var(--ink); }
.account-pack .pack-price { margin-left: auto; font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; }
.account-activity { list-style: none; padding: 0; margin: 0; }
.account-activity li { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 16px; border-top: 1px solid var(--line); padding: 9px 0; }
.account-activity li:first-child { border-top: 0; padding-top: 0; }
.account-activity span { font-size: 14px; color: var(--ink); }
.account-activity small { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-3); }
.account-activity b { font: 500 13px/1.5 var(--data); font-variant-numeric: tabular-nums; white-space: nowrap; }
.account-actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 24px; }
.account-actions .account-primary { min-width: 150px; }
.account-qr { display: block; width: 160px; max-width: 100%; margin: 16px auto; background: white; padding: 10px; }
.account-code { overflow-wrap: anywhere; font-family: var(--mono); font-size: 12px; user-select: all; }
.account-banner { max-width: 710px; margin: 0 auto 24px; font: 13px/1.6 var(--sans); color: var(--ink-2); padding: 12px 16px; border: 1px solid var(--line); background: var(--paper-2); }
.account-banner button { float: right; font: inherit; }
.credit-outcome { font: 12px/1.6 var(--sans); color: var(--ink-3); margin-top: 8px; }
.credit-outcome p { margin: 4px 0; }
.account-video-actions { display:flex; gap:20px; }
.account-version { display:flex; justify-content:space-between; align-items:center; gap:16px; border-bottom:1px solid var(--line); padding:14px 0; }
.account-version p { margin:0; }
.account-version strong { font-weight:500; }
.account-version small { display:block; color:var(--ink-3); }
.account-dialog :focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
@media(max-width:600px) { .account-dialog { padding: 22px; } .account-balance { font-size: 44px; } #account-button { font-size: 12px; } .account-actions { gap: 10px; } }

/* ── The account sheet ────────────────────────────────────────────────────
   A panel that settles into place under the Account button rather than a box
   that pops up: one column, rules instead of cards, and only two things
   heavier than the body — the address and the credit figure. */
.account-dialog.wallet-dialog {
  width: min(400px, 100vw - 32px); height: fit-content; max-height: calc(100dvh - 24px);
  margin: 12px 16px auto auto; padding: 0; border: 1px solid var(--line); border-radius: 12px;
  background: var(--paper); color: var(--ink); font: 14px/1.55 var(--sans);
  box-shadow: 0 24px 64px rgb(23 26 25 / .14), 0 1px 3px rgb(23 26 25 / .06);
  overscroll-behavior: contain; transform-origin: top right;
}
/* An ink shadow disappears on a dark page, so there the panel keeps its edge
   with a hairline instead. */
html[data-theme="dark"] .account-dialog.wallet-dialog { box-shadow: 0 24px 64px rgb(0 0 0 / .5), 0 0 0 1px var(--line); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .account-dialog.wallet-dialog { box-shadow: 0 24px 64px rgb(0 0 0 / .5), 0 0 0 1px var(--line); }
}
.wallet-dialog > header { position: sticky; top: 0; z-index: 1; margin: 0; padding: 14px 14px 14px 24px; border-bottom: 1px solid var(--line); background: var(--paper); }
.wallet-dialog h2 { font: 600 15px/1.3 var(--sans); letter-spacing: -.01em; }
.wallet-dialog h3 { font: 500 13px/1.5 var(--sans); letter-spacing: 0; color: var(--ink-2); margin: 0 0 10px; }
.wallet-dialog .account-close { display: grid; place-items: center; width: 32px; min-width: 32px; height: 32px; min-height: 32px; padding: 0; border: 0; border-radius: 8px; color: var(--ink-3); font-size: 20px !important; line-height: 1; }
.wallet-dialog .account-close:hover { color: var(--ink); }
#account-content { padding: 4px 24px 24px; }
#account-content > section, #account-content > footer { border-top: 1px solid var(--line); padding: 20px 0; }
#account-content > section:first-child { border-top: 0; }
.wallet-dialog p { margin: 0 0 10px; }
.wallet-dialog .account-note { font-size: 13px; line-height: 1.5; color: var(--ink-3); margin: 6px 0 0; }
.wallet-dialog .account-email-address { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.account-meta { margin: 4px 0 0; font-size: 13px; color: var(--ink-3); }
.account-credits-line { margin: 0; font-weight: 500; color: var(--ink); }
/* A team member's pool: the team's name, then its minutes, then their own share of the month. */
.wallet-dialog .account-team-name { margin: 0 0 8px; font: 600 13px/1.4 var(--sans); color: var(--ink); }
.account-team-name span { margin-left: 6px; font-weight: 400; color: var(--ink-3); }
.account-team-meter { display: block; width: 100%; height: 4px; margin: 14px 0 0; border-radius: 2px; overflow: hidden; }
.account-team-meter rect:first-child { fill: var(--line); }
.account-team-meter rect + rect { fill: var(--ink); }
.account-team-meter rect.is-high { fill: var(--oxide); }
.wallet-dialog .account-team-me { margin: 10px 0 0; font-size: 13.5px; color: var(--ink); }
.account-team .account-secondary { margin-top: 16px; }
/* Leaving is quiet until asked for, then asks once before it happens. */
.account-team-leave { margin-top: 14px; }
.account-team-leave > .account-link { font-size: 13px; color: var(--ink-3); }
.wallet-dialog .account-team-leave p { margin: 0 0 10px; font-size: 13.5px; color: var(--ink); }
.wallet-dialog .account-team-leave .account-actions, .wallet-dialog .account-team-offer .account-actions { justify-content: flex-start; gap: 10px; margin-top: 12px; }
.wallet-dialog .account-team-leave .account-actions .account-primary, .wallet-dialog .account-team-offer .account-actions .account-primary { min-width: 0; }
.account-team .account-team-leave .account-secondary { margin-top: 0; }
.wallet-dialog .account-team-leave .account-error:empty { display: none; }
.wallet-dialog .account-team-offer h3 { margin: 0 0 4px; color: var(--ink); font-weight: 600; }
/* Administration reads as a state before it reads as a button: a lock that
   is shut until the authenticator opens it for this session. */
.account-admin-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.account-admin-mark { position: relative; flex: none; width: 36px; height: 36px; border-radius: 9px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); }
.account-admin-mark::after {
  content: ""; position: absolute; inset: 9px; background: var(--ink-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='3' y='7' width='10' height='7' rx='1.6'/%3E%3Cpath d='M5.2 7V5a2.8 2.8 0 0 1 5.6 0v2'/%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' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='3' y='7' width='10' height='7' rx='1.6'/%3E%3Cpath d='M5.2 7V5a2.8 2.8 0 0 1 5.6 0v2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.account-administration[data-unlocked="true"] .account-admin-mark::after {
  background: var(--ink);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='3' y='7' width='10' height='7' rx='1.6'/%3E%3Cpath d='M5.2 7V5a2.8 2.8 0 0 1 5.5-.8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='3' y='7' width='10' height='7' rx='1.6'/%3E%3Cpath d='M5.2 7V5a2.8 2.8 0 0 1 5.5-.8'/%3E%3C/svg%3E");
}
.wallet-dialog .account-admin-head h3 { margin: 1px 0 2px; font: 600 14px/1.4 var(--sans); color: var(--ink); }
.wallet-dialog .account-admin-head .account-note { margin: 0; }
.wallet-dialog .account-footer .account-sessions { margin: 0; }
.account-footer-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.account-footer-row .account-link { font-size: 13px; color: var(--ink-3); }
/* One figure: the balance is the sheet's headline, so it takes the text face
   with lining figures. The mono comma opens a gap that reads as two numbers. */
.account-figure { display: flex; align-items: baseline; gap: 6px; margin: 0; }
.account-figure-value { font: 500 28px/1.1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--ink); }
.account-figure-unit { font-size: 13px; color: var(--ink-3); }
.account-free-line { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; font-size: 14px; color: var(--ink); }
.account-credits .account-secondary, .account-identity .account-secondary { margin-top: 12px; }
/* Your logo: the two previews side by side, then the corner it sits in. The
   file picker is opened by its button, never shown. */
.account-logo input[type="file"] { display: none; }
.account-logo .account-secondary.wide { margin-top: 12px; }
.account-logo-previews { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 0; }
.account-logo-previews figure { margin: 0; min-width: 0; }
.account-logo-previews img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: 6px; background: var(--paper-2); }
.account-logo-previews figcaption { margin-top: 4px; font-size: 12px; color: var(--ink-3); }
.account-logo-corners { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; border: 0; padding: 0; margin: 12px 0 0; }
.account-logo-corners legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.account-logo-corners label { display: flex; gap: 8px; align-items: center; min-height: 40px; border: 1px solid var(--line); padding: 0 10px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--ink); }
.account-logo-corners label:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.account-logo-corners label:has(input:focus-visible) { outline: 2px solid var(--signal); outline-offset: 2px; }
.account-logo-corners input { accent-color: var(--ink); margin: 0; }
.account-logo-actions { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
/* API keys: each key a hairline row with its facts in two columns; a new
   key's secret in a box of its own, outlined in ink, until it is saved. */
.account-keys code { font: 12px/1.5 var(--data); color: var(--ink); overflow-wrap: anywhere; }
.account-keys .account-error:empty { margin: 0; }
.account-keys > div > .account-note:first-child, .account-key-secret + .account-note { margin-top: 0; }
.account-keys-list { list-style: none; margin: 14px 0 0; padding: 0; }
.account-key { padding: 12px 0; border-top: 1px solid var(--line); }
.account-key:last-child { border-bottom: 1px solid var(--line); }
.account-key-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.account-key-name { min-width: 0; font-size: 14px; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.account-key-state { flex: none; font-size: 12px; color: var(--ink-3); }
.account-key:not(.is-revoked) .account-key-state::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--ink); vertical-align: 1px; }
.account-key.is-revoked .account-key-name, .account-key.is-revoked code { color: var(--ink-3); }
.account-key-hint { margin: 2px 0 0; }
.account-key-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; }
.account-key-facts > div { min-width: 0; }
.account-key-facts .account-key-scopes-fact { grid-column: 1 / -1; }
.account-key-facts dt { color: var(--ink-3); }
.account-key-facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.account-key-revoke { margin-top: 8px; }
.account-key-revoke > .account-link { font-size: 13px; color: var(--ink-3); }
.account-key-revoke p { margin: 0; font-size: 13.5px; color: var(--ink); }
.wallet-dialog .account-key-revoke .account-actions, .wallet-dialog .account-key-secret .account-actions, .wallet-dialog .account-key-form .account-actions { justify-content: flex-start; gap: 10px; margin-top: 10px; }
.wallet-dialog .account-keys .account-actions .account-primary { min-width: 0; }
.account-keys > div > .account-secondary.wide { margin-top: 14px; }
.account-key-form { margin-top: 16px; }
.account-key-scopes { display: grid; gap: 6px; margin: 0 0 16px; padding: 0; border: 0; }
.account-key-scopes legend { margin-bottom: 6px; padding: 0; font-size: 12px; color: var(--ink-2); }
.account-dialog .account-key-scope { display: flex; gap: 10px; align-items: flex-start; min-height: 40px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--ink); }
.account-dialog .account-key-scope input[type="checkbox"] { flex: none; width: 16px; height: 16px; margin: 1px 0 0; padding: 0; accent-color: var(--ink); }
.account-key-scope:has(input:checked) { border-color: var(--line-2); }
.account-key-scope:has(input:focus-visible) { outline: 2px solid var(--signal); outline-offset: 2px; }
.account-key-scope small { display: block; margin-top: 1px; font-size: 12px; color: var(--ink-3); }
.account-key-secret { margin: 0 0 16px; padding: 14px; border: 1px solid var(--ink); border-radius: 10px; background: var(--paper-2); }
.wallet-dialog .account-key-secret-title { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--ink); }
.account-dialog .account-key-secret input { margin: 6px 0 10px; font: 12.5px/1.4 var(--data); background: var(--paper); }
.wallet-dialog .account-status { margin: 10px 0; padding: 10px 12px; border-radius: 8px; font-size: 13px; }
.wallet-dialog .account-section { border-top: 1px solid var(--line); margin: 0; padding: 20px 0; }
.wallet-dialog .account-primary, .wallet-dialog .account-secondary { min-height: 40px; padding: 10px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; transition: border-color .15s, opacity .15s; }
.wallet-dialog .wide { width: 100%; }
.wallet-dialog .account-purchase-note { margin: 10px 0 0; }
.wallet-dialog .account-footer { display: block; margin: 0; padding: 20px 0 0; }
.wallet-dialog .account-footer .account-actions { justify-content: flex-start; gap: 10px; margin-top: 10px; }
.wallet-dialog .account-footer .account-actions .account-primary { min-width: 0; }
.wallet-dialog .account-code { padding: 10px 12px; background: var(--paper-2); border-radius: 6px; }
.wallet-dialog .account-error { margin: 10px 0; font-size: 13px; }
/* Opening settles the panel into place under the button; closing takes it
   back the same way, a little faster. */
@media (prefers-reduced-motion: no-preference) {
  .account-dialog[open] { animation: account-rise 280ms cubic-bezier(.2, 0, 0, 1) both; }
  .account-dialog[open]::backdrop { animation: account-veil 280ms ease-out both; }
  .account-dialog.is-closing { animation: account-settle 160ms cubic-bezier(.4, 0, 1, 1) both; }
  .account-dialog.is-closing::backdrop { animation: account-veil 160ms ease-in reverse both; }
  #quote-dialog[open], #account-action[open] { animation-name: account-rise-center; }
}
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  .account-dialog.wallet-dialog[open] { animation-name: account-rise-sheet; }
}
@keyframes account-rise { from { opacity: 0; transform: translateY(-8px) scale(.97); } }
@keyframes account-rise-center { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes account-rise-sheet { from { opacity: 0; transform: translateY(24px); } }
@keyframes account-settle { to { opacity: 0; transform: translateY(-4px) scale(.985); } }
@keyframes account-veil { from { opacity: 0; } to { opacity: 1; } }
/* On a phone the same panel is a bottom sheet: full width, and it rises from
   the edge it is anchored to. */
@media (max-width: 640px) {
  .account-dialog.wallet-dialog { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 14px 14px 0 0; max-height: calc(100dvh - 24px); transform-origin: bottom center; }
  .wallet-dialog > header { padding: max(14px, env(safe-area-inset-top)) 14px 14px 20px; }
  #account-content { padding: 4px 20px max(24px, env(safe-area-inset-bottom)); }
}

#quote-dialog, #account-action { transform-origin: center; }
#quote-dialog { padding: 24px; border: 1px solid var(--line); border-radius: 12px; font-size: 13px; }
#quote-dialog header { margin-bottom: 20px; }
#quote-dialog h2 { font: 600 22px/1.3 var(--sans); letter-spacing: -.025em; }
#quote-dialog .account-close { display: grid; place-items: center; padding: 0; border-radius: 7px; }
#quote-dialog .account-balance { font: 500 34px/1.2 var(--sans); margin: 10px 0 16px !important; }
#quote-dialog .account-eyebrow { font-size: 12px; }
#quote-dialog .account-note { color: var(--ink-2); line-height: 1.6; }
#quote-dialog .account-actions { margin-top: 20px; }
/* What the video reads from links, and the links it explains without reading. */
#quote-dialog .quote-links { margin: 12px 0 0; }
#quote-dialog .quote-links ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
#quote-dialog .quote-links li { line-height: 1.45; overflow-wrap: anywhere; }
#quote-dialog .quote-link-title { font-weight: 500; color: var(--ink); }
#quote-dialog .quote-not-read { margin-top: 10px; overflow-wrap: anywhere; }
#quote-dialog .account-primary, #quote-dialog .account-secondary { border-radius: 7px; font-size: 12px; }
.wallet-dialog form + .account-error + .account-note { margin-top: 12px; }

/* ── Sign-in and authenticator ────────────────────────────────────────────
   These two surfaces carry the only unfamiliar steps in the product, so they
   get the reading face for explanation and the data face for anything the
   viewer must copy or type. Everything else stays on the UI sans. */
.account-lede {
  font: 400 15px/1.5 var(--reading);
  color: var(--ink-2);
  letter-spacing: .002em;
  text-wrap: pretty;
}
.wallet-dialog .account-lede { margin: 0 0 18px; }

/* A real sequence, so it is numbered: scan, then type, then continue. The
   counter sits in the margin and stays out of the text column. */
.account-steps { list-style: none; counter-reset: step; margin: 0 0 4px; padding: 0; }
.account-step { counter-increment: step; position: relative; padding: 0 0 18px 34px; }
.account-step::before {
  content: counter(step);
  position: absolute; left: 0; top: -1px;
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border: 1px solid var(--line-2); border-radius: 50%;
  background: var(--paper-2); color: var(--ink-2);
  font: 500 11px/1 var(--data); font-variant-numeric: tabular-nums;
}
/* The rail joins the steps without running past the last marker. */
.account-step:not(:last-child)::after {
  content: ""; position: absolute; left: 11px; top: 26px; bottom: 4px;
  border-left: 1px solid var(--line);
}
.account-step > :last-child { margin-bottom: 0; }
.wallet-dialog .account-step h4 {
  font: 600 13px/1.5 var(--sans); letter-spacing: -.005em;
  color: var(--ink); margin: 0 0 5px;
}

/* The QR sits on white whatever the page theme is: scanners need the real
   contrast, so this frame is deliberately not themed. */
.account-qr-frame {
  display: grid; place-items: center;
  padding: 14px; margin: 0 0 12px;
  background: #fff;
  border: 1px solid var(--line-2); border-radius: 10px;
}
.account-qr, .wallet-dialog .account-qr {
  display: block; width: 148px; height: 148px; max-width: 100%;
  margin: 0; padding: 0; background: #fff;
}

/* The shared secret is transcribed by hand when a camera is unavailable, so
   it is set in the data face, spaced, and selectable in one gesture. */
.account-secret { display: flex; align-items: center; gap: 10px; }
.account-code, .wallet-dialog .account-code {
  flex: 1; min-width: 0;
  padding: 9px 11px;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 6px;
  font: 500 12px/1.5 var(--data); letter-spacing: .06em;
  color: var(--ink); overflow-wrap: anywhere; user-select: all;
}
.account-copy {
  flex: 0 0 auto; min-height: 36px; padding: 8px 12px;
  background: transparent; color: var(--ink-2);
  border: 1px solid var(--line-2); border-radius: 6px;
  font: 500 11px/1 var(--sans); cursor: pointer;
  transition: color .15s, border-color .15s;
}
.account-copy:hover { color: var(--ink); border-color: var(--ink-3); }

/* Six digits, read back as digits: tabular, tracked, and wide enough that a
   transposed character is obvious before it is submitted. */
.wallet-dialog .account-code-input {
  width: 100%; margin: 0 0 14px; padding: 13px 12px;
  border: 1px solid var(--line-2); border-radius: 8px;
  background: var(--paper-2); color: var(--ink);
  font: 500 21px/1.2 var(--data);
  font-variant-numeric: tabular-nums;
  letter-spacing: .34em; text-indent: .34em; text-align: center;
  transition: border-color .15s, box-shadow .15s;
}
.wallet-dialog .account-code-input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--selection);
}
.wallet-dialog .account-code-input::placeholder { color: var(--ink-4); letter-spacing: .34em; }

/* A failure is an event in the panel, not a stray red line: the rule gives it
   an edge so it reads as a block the eye can skip once it is resolved. */
.wallet-dialog .account-error:not(:empty) {
  margin: 12px 0; padding: 9px 0 9px 12px;
  border-left: 2px solid var(--oxide);
  font-size: 12px; line-height: 1.55;
}
.wallet-dialog .account-mfa-status {
  display: flex; align-items: center; gap: 8px;
  color: var(--ink-2); font-size: 12px; padding: 4px 0 10px;
}
.account-spinner {
  display: inline-block;
  flex: 0 0 13px; width: 13px; height: 13px; border-radius: 50%;
  border: 1.5px solid var(--line-2); border-top-color: var(--ink-3);
  animation: account-spin .7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .account-spinner { animation: none; }
}
@keyframes account-spin { to { transform: rotate(1turn); } }
.wallet-dialog .account-step-actions { display: grid; gap: 8px; margin-top: 4px; }

/* A 32-character base32 secret does not fit beside the copy button on a phone,
   and a key broken mid-run is easy to mistranscribe. Give it the whole row. */
@media (max-width: 600px) {
  .account-secret { flex-wrap: wrap; }
  .account-code, .wallet-dialog .account-code { flex: 1 1 100%; letter-spacing: .04em; }
  .account-copy { margin-left: auto; }
}

/* Reserve the account control before the deferred bootstrap resolves. */
html[data-accounts="true"] #account-button[hidden] { display: inline-flex !important; }
/* The reserved width keeps the bar still while the label loads; once shown, the control fits its label. */
#account-button { visibility: hidden; justify-content: flex-end; gap: 8px; }
#account-button:not(.is-ready) { min-width: 10em; }
#bar .profile { order: 2; }
.account-button-balance { color: var(--ink-3); font: inherit; }
.account-banner .account-link { margin-left: 16px; }
#account-google { display: flex; align-items: center; justify-content: center; gap: 12px; }
#invitation-code { font-family: var(--data); letter-spacing: .06em; }
.account-dialog .account-eyebrow { text-transform: none; }
#account-logout-confirm:empty { display: none; }

.account-primary .account-spinner, .account-secondary .account-spinner { margin-right: 8px; vertical-align: middle; }

/* Invite-only: the idea someone came with is quoted back in the reading face,
   so the waitlist feels like keeping a place rather than filling a form. */
.account-idea {
  margin: 0 0 18px; padding: 10px 14px;
  border-left: 2px solid var(--line-2);
  font: italic 400 15px/1.5 var(--reading); color: var(--ink);
  overflow-wrap: anywhere; text-wrap: pretty;
}
.wallet-dialog .account-note + .account-idea { margin-top: 6px; }
.wallet-dialog .account-switch { margin-top: 16px; }
.wallet-dialog .account-primary + .account-secondary { margin-top: 10px; }
a.account-primary { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box; }
/* The fallback for a pasted link stays folded away: a link opens itself. */
.account-invite-paste { margin: 10px 0 14px; }
.account-invite-paste > summary { cursor: pointer; color: var(--ink-2); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.account-invite-paste > summary::-webkit-details-marker { display: none; }
.account-invite-paste > summary:hover { color: var(--ink); }
.account-invite-paste[open] > summary { margin-bottom: 10px; }
#account-invite-link { font-family: var(--data); }

/* ── Asking for an invite ─────────────────────────────────────────────────
   A stranger's Create opens this card in the middle of the page they were
   writing on, not under the Account button: it is the next step of what they
   were doing. Their idea is laid on it as a sheet of its own, the button is
   the Create button carried over, and "on the list" is one pen tick. The
   member sign-in reached from here stays on the same card. */
.account-dialog.wallet-dialog[data-stage="place"] {
  width: min(456px, 100vw - 32px); margin: auto; border-color: var(--frame-edge, var(--line)); border-radius: 22px;
  box-shadow: 0 1px 2px var(--landing-shadow-soft, #171a190a), 0 14px 34px -22px var(--landing-shadow-deep, #171a1924), 0 44px 96px -36px var(--landing-shadow-deep, #171a1924);
  transform-origin: 50% 60%;
}
/* The page stays lit behind the card, as paper under glass, rather than going grey. */
.account-dialog[data-stage="place"]::backdrop { background: rgb(255 255 255 / .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html[data-theme="dark"] .account-dialog[data-stage="place"]::backdrop { background: rgb(23 26 25 / .66); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .account-dialog[data-stage="place"]::backdrop { background: rgb(23 26 25 / .66); }
}
.wallet-dialog[data-stage="place"] > header { position: static; align-items: flex-start; gap: 16px; padding: 30px 20px 0 32px; border-bottom: 0; background: none; }
.wallet-dialog[data-stage="place"] h2 { padding-top: 3px; font: 700 27px/1.14 var(--sans); letter-spacing: -.035em; text-wrap: balance; }
.wallet-dialog[data-stage="place"] .account-close { flex: none; width: 36px; min-width: 36px; height: 36px; min-height: 36px; margin-top: -4px; border-radius: 50%; transition: background-color 160ms ease, color 160ms ease; }
.wallet-dialog[data-stage="place"] .account-close:hover { background: var(--paper-2); }
[data-stage="place"] #account-content { padding: 12px 32px 28px; }
.wallet-dialog .place-lede { margin: 0 0 22px; color: var(--ink-2); font: 400 15.5px/1.5 var(--sans); letter-spacing: -.004em; text-wrap: pretty; }
.place-address { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }

/* The idea, as the sheet it was written on: one sheet on top of the next in the pile. */
.place-idea { position: relative; isolation: isolate; margin: 4px 3px 26px; padding: 16px 18px 12px; rotate: -.7deg; }
.place-idea::before, .place-idea::after { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid var(--frame-edge, var(--line)); border-radius: 14px; }
.place-idea::before { background: var(--paper-2); rotate: 2.2deg; translate: 2px 3px; }
.place-idea::after { background: var(--paper); box-shadow: 0 1px 1px var(--landing-shadow-soft, #171a190a), 0 14px 30px -16px var(--landing-shadow-deep, #171a1924); }
.place-idea blockquote { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; margin: 0; color: var(--ink); font: 500 16.5px/1.45 var(--sans); letter-spacing: -.012em; overflow-wrap: anywhere; }
.place-idea figcaption { display: flex; align-items: center; gap: 7px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line-2); color: var(--ink-3); font: 500 12.5px/1.4 var(--sans); transition: color 400ms ease; }
.place-idea.is-kept figcaption { color: var(--signal-text); }

/* One question, so one field: the label is spoken, not shown. */
.place-form > label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wallet-dialog .place-form input {
  height: 54px; margin: 0; padding: 0 18px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--paper);
  font: 400 16.5px/1 var(--sans); letter-spacing: -.01em;
  box-shadow: 0 1px 2px var(--landing-shadow-soft, #171a190a);
  transition: border-color 160ms ease, box-shadow 320ms cubic-bezier(.16, 1, .3, 1);
}
.wallet-dialog .place-form input::placeholder { color: var(--ink-4); }
.wallet-dialog .place-form input:hover { border-color: var(--ink-4); }
.wallet-dialog .place-form input:focus { outline: none; border-color: #f04420a6; box-shadow: 0 0 0 4px #f044200f, 0 1px 2px var(--landing-shadow-soft, #171a190a); }
.wallet-dialog .place-form input[aria-invalid="true"] { border-color: var(--error); }
/* A slip in the one field is a line under it, not a block. */
.wallet-dialog .place-form .account-error:not(:empty) { margin: 8px 4px 0; padding: 0; border: 0; color: var(--error-ink, var(--oxide)); font-size: 13px; line-height: 1.45; }
/* The button they pressed on the page, carried onto the card. */
.wallet-dialog .place-go {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: 54px; margin-top: 12px; padding: 0 9px 0 22px;
  border: 0; border-radius: 999px; background: var(--ink); color: var(--paper); cursor: pointer;
  font: 600 15.5px/1 var(--sans); letter-spacing: -.006em;
  box-shadow: 0 1px 2px #171a1933, 0 12px 24px -14px #171a198c, inset 0 1px 0 #ffffff1f;
  transition: background-color 220ms ease, transform 200ms cubic-bezier(.16, 1, .3, 1), box-shadow 220ms ease;
}
.place-nib { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--signal); color: #171a19; font: 500 17px/1 var(--sans); box-shadow: inset 0 1px 0 #ffffff47; transition: background-color 220ms ease, translate 220ms cubic-bezier(.16, 1, .3, 1); }
.wallet-dialog .place-go:hover:not(:disabled) { background: #242a28; transform: translateY(-1px); }
html[data-theme="dark"] .wallet-dialog .place-go:hover:not(:disabled) { background: var(--ink-2); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .wallet-dialog .place-go:hover:not(:disabled) { background: var(--ink-2); }
}
.wallet-dialog .place-go:hover:not(:disabled) .place-nib { background: #f76342; translate: 2px -1px; }
.wallet-dialog .place-go:active:not(:disabled) { transform: scale(.985); }
/* Saving keeps the button whole: only the nib turns. */
.wallet-dialog .place-go:disabled { opacity: 1; cursor: progress; }
.place-nib .account-spinner { flex: none; width: 16px; height: 16px; border-width: 2px; border-color: #171a1933; border-top-color: #171a19; }
.wallet-dialog .place-perk { margin: 14px 0 0; color: var(--ink-3); font: 400 13px/1.5 var(--sans); text-align: center; }
.place-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.wallet-dialog .place-foot .account-switch, .place-foot .account-invite-paste { margin: 0; }
.place-foot .account-invite-paste[open] { flex-basis: 100%; margin-top: 8px; }

/* On the list: the tick is drawn by a pen, once, where the title starts. */
.place-tick { width: 26px; height: 26px; margin: 0 9px -4px -2px; overflow: visible; stroke: var(--signal); stroke-width: 2.8; }
.place-tick path { stroke-dasharray: 1; }
/* Something to watch while they wait, one press away. */
.wallet-dialog .place-film {
  display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; margin: 0 0 12px; padding: 8px 14px 8px 8px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--paper); color: var(--ink); text-align: left; cursor: pointer;
  transition: border-color 160ms ease, box-shadow 320ms cubic-bezier(.16, 1, .3, 1), transform 320ms cubic-bezier(.16, 1, .3, 1);
}
.wallet-dialog .place-film:hover { border-color: var(--line-2); box-shadow: 0 14px 30px -18px var(--landing-shadow-deep, #171a1924); transform: translateY(-1px); }
.place-film-poster { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--frame-edge, var(--line)); border-radius: 10px; background: #fff; }
.place-film-poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.place-film-play { position: absolute; left: 6px; bottom: 6px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--signal); color: #171a19; box-shadow: 0 2px 6px #171a1933, inset 0 1px 0 #ffffff47; transition: scale 220ms cubic-bezier(.16, 1, .3, 1); }
.place-film-play svg { translate: .5px 0; }
.place-film:hover .place-film-play { scale: 1.1; }
.place-film-words { display: grid; gap: 3px; min-width: 0; }
.place-film-words small { color: var(--ink-3); font: 500 12.5px/1.35 var(--sans); }
.place-film-words b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font: 600 14.5px/1.3 var(--sans); letter-spacing: -.012em; }
.place-film-time { align-self: start; margin-top: 3px; color: var(--ink-3); font: 500 12px/1.35 var(--sans); font-variant-numeric: tabular-nums; }
/* The sign-in a member reaches from this card wears the card's shapes. */
.wallet-dialog[data-stage="place"] .account-lede { font: 400 15.5px/1.5 var(--sans); letter-spacing: -.004em; }
.wallet-dialog[data-stage="place"] :is(.account-primary, .account-secondary).wide { min-height: 50px; border-radius: 999px; font-size: 15px; font-weight: 600; text-align: center; }
.wallet-dialog[data-stage="place"] #account-email-form input { height: 50px; padding: 0 16px; border-radius: 14px; background: var(--paper); font-size: 16px; transition: border-color 160ms ease, box-shadow 320ms cubic-bezier(.16, 1, .3, 1); }
.wallet-dialog[data-stage="place"] #account-email-form input:focus { outline: none; border-color: #f04420a6; box-shadow: 0 0 0 4px #f044200f; }
@media (prefers-reduced-motion: no-preference) {
  .account-dialog.wallet-dialog[data-stage="place"][open] { animation: place-rise 460ms cubic-bezier(.16, 1, .3, 1) both; }
  .account-dialog[data-stage="place"][open]::backdrop { animation: account-veil 360ms ease-out both; }
  .account-dialog.wallet-dialog[data-stage="place"].is-closing { animation: account-settle 160ms cubic-bezier(.4, 0, 1, 1) both; }
  .account-dialog[data-stage="place"].is-closing::backdrop { animation: account-veil 160ms ease-in reverse both; }
  .place-idea { animation: place-lay 720ms 90ms cubic-bezier(.16, 1, .3, 1) backwards; }
  .place-idea.is-kept { animation: place-keep 640ms cubic-bezier(.16, 1, .3, 1) backwards; }
  .place-tick path { animation: place-draw 520ms 180ms cubic-bezier(.65, 0, .25, 1) backwards; }
  .place-film { animation: place-follow 560ms 260ms cubic-bezier(.16, 1, .3, 1) backwards; }
}
@keyframes place-rise { from { opacity: 0; transform: translateY(18px) scale(.972); } }
@keyframes place-lay { from { opacity: 0; translate: 0 22px; rotate: -3.4deg; scale: .985; } }
@keyframes place-keep { from { translate: 0 -7px; rotate: -2.4deg; } }
@keyframes place-draw { from { stroke-dashoffset: 1; } }
@keyframes place-follow { from { opacity: 0; translate: 0 10px; } }
@media (max-width: 640px) {
  .account-dialog.wallet-dialog[data-stage="place"] { width: 100%; margin: auto 0 0; border-radius: 24px 24px 0 0; }
  .wallet-dialog[data-stage="place"] > header { padding: 26px 14px 0 22px; }
  .wallet-dialog[data-stage="place"] h2 { font-size: 24px; }
  [data-stage="place"] #account-content { padding: 10px 22px max(24px, env(safe-area-inset-bottom)); }
  .wallet-dialog .place-film { grid-template-columns: 88px minmax(0, 1fr) auto; gap: 12px; }
}
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  .account-dialog.wallet-dialog[data-stage="place"][open] { animation-name: account-rise-sheet; }
}

/* ---------- The invitation ----------
   A link someone was sent opens as a room of its own: warm paper, the
   wordmark written in, and a letter laid down with their name lettered by the
   brush. The film print beside it is what Ivan makes. One way in. */
.invite-stage {
  --room: #f3f1ec; --card: #fff; --card-edge: #171a1917; --shade: #3a2a1414;
  --invite-ease: cubic-bezier(.16, 1, .3, 1); --invite-hand: cubic-bezier(.5, .05, .35, 1);
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; box-sizing: border-box;
  background: var(--room); color: var(--ink);
  overflow: hidden auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
html[data-theme="dark"] .invite-stage { --room: #101312; --card: #191d1c; --card-edge: #ffffff14; --shade: #0000008c; }
@media (prefers-color-scheme: dark) { html:not([data-theme]) .invite-stage { --room: #101312; --card: #191d1c; --card-edge: #ffffff14; --shade: #0000008c; } }
.invite-stage[open] { display: block; animation: invite-room-in 420ms ease both; }
.invite-stage.is-leaving { animation: invite-room-out 380ms ease forwards; }
.invite-stage::backdrop { background: var(--room, #f3f1ec); }
/* The same 3.5% grain as the landing, so the room reads as paper. */
.invite-stage::after { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .035; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
html[data-theme="dark"] .invite-stage::after { mix-blend-mode: screen; opacity: .05; }
@media (prefers-color-scheme: dark) { html:not([data-theme]) .invite-stage::after { mix-blend-mode: screen; opacity: .05; } }
html:has(.invite-stage[open]) { overflow: hidden; }
/* Before the room opens, /invite shows paper rather than a flash of the landing.
   If the script never arrives, the landing appears after a few seconds. */
html[data-invite]:not([data-invite="explore"]) body { background: #f3f1ec; }
html[data-theme="dark"][data-invite]:not([data-invite="explore"]) body { background: #101312; }
@media (prefers-color-scheme: dark) { html:not([data-theme])[data-invite]:not([data-invite="explore"]) body { background: #101312; } }
html[data-invite]:not([data-invite="explore"]) #page { visibility: hidden; animation: invite-hold 0s 6s forwards; }

.invite-room {
  position: relative; z-index: 1; box-sizing: border-box; min-height: 100%;
  display: grid; grid-template-rows: auto 1fr;
  padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.invite-top { position: relative; display: flex; align-items: center; justify-content: center; height: 58px; }
.invite-mark.wordmark-logo { width: 78px; color: var(--signal); animation: ink-write 900ms var(--invite-hand) 140ms both; }
.invite-close {
  position: absolute; right: -4px; top: 50%; translate: 0 -50%;
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}
.invite-close svg, .invite-film-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.invite-close:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }
.invite-desk { display: grid; justify-items: center; align-content: start; gap: 22px; padding-top: 10px; }

/* The letter. */
.invite-card {
  position: relative; box-sizing: border-box; width: min(100%, 468px);
  padding: 24px 22px 22px; border-radius: 22px; background: var(--card);
  box-shadow: 0 0 0 1px var(--card-edge), 0 1px 2px var(--shade), 0 14px 30px -14px color-mix(in srgb, var(--shade) 180%, transparent), 0 44px 90px -44px color-mix(in srgb, var(--shade) 220%, transparent);
  animation: invite-lay 900ms var(--invite-ease) 80ms both;
}
.invite-card-compact { width: min(100%, 440px); padding: 28px 24px 26px; }
.invite-kicker {
  display: flex; align-items: center; margin: 0 0 10px;
  font: 500 14px/1.3 var(--sans); color: var(--ink-3);
  animation: invite-fade 700ms ease 380ms both;
}
.invite-kicker > span { display: inline-flex; align-items: baseline; gap: 9px; }
.invite-kicker > span::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); translate: 0 -1px; }
.invite-title { display: grid; gap: 12px; margin: 0; outline: none; }
.invite-name {
  --write: 900ms;
  position: relative; justify-self: start; padding: 0 .06em .14em 0;
  font: 800 60px/1 var(--sans);
  letter-spacing: -.045em; color: var(--ink); overflow-wrap: anywhere;
}
.invite-name[data-size="m"] { font-size: 46px; }
.invite-name[data-size="s"] { font-size: 36px; }
.invite-ink { display: inline-block; animation: ink-write var(--write) var(--invite-hand) 520ms both, ink-dry 2s ease 520ms both; }
.invite-brush {
  position: absolute; left: 0; top: 50%; z-index: 2; width: 88px; aspect-ratio: 150 / 24; pointer-events: none;
  transform-origin: 0 50%; transform: translateY(-50%) rotate(-38deg); opacity: 0;
  filter: drop-shadow(0 3px 3px var(--landing-shadow-deep));
  animation: invite-brush-move var(--write) var(--invite-hand) 520ms both, invite-brush-life var(--write) linear 520ms both;
}
.invite-brush svg { display: block; width: 100%; height: 100%; overflow: visible; }
.invite-brush .brush-handle { fill: var(--ink); }
.invite-brush .brush-shine { fill: none; stroke: var(--paper); stroke-opacity: .4; stroke-width: 1.1; }
.invite-brush .brush-ferrule { fill: var(--ink-4); stroke: var(--ink); stroke-width: 1; }
.invite-brush .brush-rule { fill: none; stroke: var(--ink); stroke-width: .8; }
.invite-brush .brush-head { fill: color-mix(in srgb, var(--ink-4) 40%, var(--paper-2)); stroke: var(--ink); stroke-width: .8; }
.invite-brush .brush-paint { fill: var(--signal); }
.invite-underline {
  position: absolute; left: -1%; bottom: .02em; width: 98%; height: .16em; overflow: visible;
  fill: none; stroke: var(--signal); stroke-width: 3.2; stroke-linecap: round;
  clip-path: inset(-50% 100% -50% 0); animation: invite-wipe 520ms cubic-bezier(.6, 0, .2, 1) calc(580ms + var(--write)) forwards;
}

/* The film print: a still of what Ivan drew, moving. It keeps the film's own
   paper in both themes, the way a photograph would. */
.invite-print {
  margin: 24px -4px 26px; padding: 7px 7px 12px; border-radius: 7px;
  background: var(--film-paper); color: var(--film-ink);
  box-shadow: 0 0 0 1px #171a1914, 0 2px 3px #171a1912, 0 18px 34px -18px #171a1947;
  transform: rotate(-1.3deg); animation: invite-print 1000ms var(--invite-ease) 1180ms both;
}
.invite-frame { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 3px; background: var(--film-paper); }
.invite-loop { display: block; width: 100%; height: 100%; object-fit: cover; }
.invite-watch {
  position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 7px;
  min-height: 34px; padding: 0 13px 0 10px; border: 0; border-radius: 999px; cursor: pointer;
  background: #171a19e0; color: #fff; font: 700 13px/1 var(--sans); letter-spacing: -.005em;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform 180ms var(--invite-ease), background-color 160ms ease;
}
.invite-watch svg { width: 14px; height: 14px; fill: currentColor; }
.invite-watch:hover { background: #171a19; transform: translateY(-1px); }
.invite-asked { padding: 11px 5px 0; font: 500 14px/1.4 var(--sans); color: var(--film-ink-2); text-wrap: pretty; }

.invite-lede { margin: 0 0 16px; font: 400 16px/1.5 var(--sans); color: var(--ink-2); text-wrap: pretty; overflow-wrap: anywhere; }
.invite-lede strong { font-weight: 600; color: var(--ink); }
.invite-letter .invite-lede { margin: 14px 0 0; font-size: 18px; line-height: 1.45; text-wrap: balance; animation: invite-fade 700ms ease 980ms both; }
.invite-note { margin: 0 0 14px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--signal) 9%, transparent); color: var(--ink); font: 500 14px/1.4 var(--sans); }
.invite-accept { animation: invite-fade 700ms ease 1480ms both; }
.invite-google {
  position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 56px; padding: 0 56px;
  border: 0; border-radius: 999px; background: var(--ink); color: var(--paper); cursor: pointer;
  font: 700 17px/1 var(--sans); letter-spacing: -.01em;
  box-shadow: 0 1px 0 #ffffff1f inset, 0 10px 22px -12px color-mix(in srgb, var(--ink) 70%, transparent);
  transition: transform 180ms var(--invite-ease), box-shadow 180ms ease, opacity 160ms ease;
}
.invite-google:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 1px 0 #ffffff1f inset, 0 16px 28px -14px color-mix(in srgb, var(--ink) 80%, transparent); }
.invite-google:active:not(:disabled) { transform: scale(.985); }
.invite-g { position: absolute; left: 9px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; }
.invite-g svg { width: 19px; height: 19px; }
.invite-google.is-busy .invite-google-label::after, .invite-email button.is-busy::after {
  content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 10px; vertical-align: -2px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: account-spin 700ms linear infinite;
}
.invite-email {
  display: flex; align-items: center; gap: 8px; height: 56px; margin: 10px 0 0; padding: 0 6px 0 22px; box-sizing: border-box;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--card);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.invite-email:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 16%, transparent); }
.invite-email input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent; color: var(--ink); font: 500 16px/1 var(--sans); }
.invite-email input::placeholder { color: var(--ink-3); opacity: 1; }
.invite-email button {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--signal); color: #fff; transition: background-color 160ms ease, transform 180ms var(--invite-ease), opacity 160ms ease;
}
.invite-email button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.invite-email input:placeholder-shown + button { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink-3); }
.invite-email button:hover:not(:disabled) { transform: translateX(2px); }
.invite-email button.is-busy svg { display: none; }
.invite-email button.is-busy::after { margin: 0; }
.invite-google:disabled, .invite-email input:disabled, .invite-email button:disabled { cursor: default; }
.invite-accept:has(.is-busy) .invite-google:not(.is-busy), .invite-accept:has(.is-busy) .invite-email:not(:has(.is-busy)) { opacity: .5; }
.invite-error { margin: 10px 4px 0; color: var(--error-ink); font: 500 14px/1.4 var(--sans); }
.invite-error:empty { display: none; }
.invite-fine { margin: 14px 0 0; text-align: center; text-wrap: balance; color: var(--ink-3); font: 400 14px/1.4 var(--sans); animation: invite-fade 700ms ease 1580ms both; }
.invite-jump {
  position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 3;
  display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px 0 22px;
  border: 0; border-radius: 999px; background: var(--ink); color: var(--paper); cursor: pointer;
  font: 700 15px/1 var(--sans); letter-spacing: -.01em;
  box-shadow: 0 1px 0 #ffffff1f inset, 0 16px 32px -12px #171a1980;
  opacity: 0; transform: translate(-50%, 18px); pointer-events: none;
  transition: opacity 240ms ease, transform 420ms var(--invite-ease);
}
.invite-jump svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.invite-jump.is-shown { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

.invite-foot {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 22px; padding: 4px 0 8px;
  color: var(--ink-3); font: 500 14px/1.3 var(--sans); animation: invite-fade 700ms ease 1680ms both;
}
.invite-foot a, .invite-explore { color: var(--ink-3); text-decoration: none; }
.invite-explore { padding: 8px 0; border: 0; background: none; font: inherit; cursor: pointer; }
.invite-explore span { color: var(--ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--signal) 70%, transparent); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.invite-explore span::after { content: " →"; }
.invite-foot a:hover, .invite-explore:hover span { color: var(--signal-text); }

/* The steps after the letter share its paper and its type. */
.invite-step { margin: 0 0 12px; font: 800 30px/1.1 var(--sans); letter-spacing: -.03em; color: var(--ink); outline: none; text-wrap: balance; }
.invite-card-compact .invite-kicker, .invite-card-compact .invite-lede { animation: invite-fade 600ms ease 260ms both; }
.invite-card-compact .invite-step { animation: invite-fade 600ms ease 180ms both; }
.invite-actions { display: grid; gap: 10px; margin-top: 22px; }
.invite-primary, .invite-secondary {
  display: flex; align-items: center; justify-content: center; height: 52px; padding: 0 22px; box-sizing: border-box;
  border-radius: 999px; font: 700 16px/1 var(--sans); text-decoration: none; cursor: pointer;
  transition: transform 180ms var(--invite-ease), background-color 160ms ease;
}
.invite-primary { border: 0; background: var(--ink); color: var(--paper); }
.invite-secondary { border: 1px solid var(--line-2); background: transparent; color: var(--ink); }
.invite-primary:hover { transform: translateY(-1px); }
.invite-secondary:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.invite-card-compact > .invite-primary { width: 100%; margin-top: 22px; }

/* Six cells for the emailed code, drawn over one real input. */
.invite-code { position: relative; margin: 20px 0 4px; }
.invite-code-input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; font-size: 16px; caret-color: transparent; cursor: text; }
.invite-cells { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.invite-cells > span {
  position: relative; display: grid; place-items: center; height: 62px; border-radius: 14px;
  border: 1px solid var(--line-2); background: var(--card); color: var(--ink);
  font: 600 28px/1 var(--sans); font-variant-numeric: tabular-nums; transition: border-color 140ms ease, box-shadow 140ms ease;
}
.invite-cells > span.is-next { border-color: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 16%, transparent); }
.invite-cells > span.is-next:empty::after { content: ""; width: 2px; height: 26px; background: var(--signal); animation: blink 1.1s steps(1) infinite; }
.invite-code.is-checking .invite-cells > span { animation: invite-check 900ms ease-in-out infinite; }
.invite-code.is-checking .invite-cells > span:nth-child(2) { animation-delay: 80ms; }
.invite-code.is-checking .invite-cells > span:nth-child(3) { animation-delay: 160ms; }
.invite-code.is-checking .invite-cells > span:nth-child(4) { animation-delay: 240ms; }
.invite-code.is-checking .invite-cells > span:nth-child(5) { animation-delay: 320ms; }
.invite-code.is-checking .invite-cells > span:nth-child(6) { animation-delay: 400ms; }
.invite-code.is-wrong .invite-cells { animation: invite-shake 360ms ease; }
.invite-code-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: 18px; }
.invite-quiet { padding: 8px 0; border: 0; background: none; color: var(--ink-2); font: 500 14px/1.2 var(--sans); cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
.invite-quiet:disabled { color: var(--ink-4); text-decoration: none; cursor: default; }
.invite-quiet:hover:not(:disabled) { color: var(--ink); }

/* Opening, accepting, and in. */
.invite-opening, .invite-onward { margin: 0; font: 500 15px/1.3 var(--sans); color: var(--ink-3); }
.invite-opening { margin-top: 28vh; animation: invite-fade 600ms ease 700ms both; }
.invite-opening span::after, .invite-onward span::after { content: "…"; display: inline-block; width: 1.2em; text-align: left; animation: invite-dots 1.2s steps(4) infinite; clip-path: inset(0 100% 0 0); }
.invite-in .invite-title { margin-bottom: 16px; }
.invite-in .invite-lede { animation: invite-fade 600ms ease 1300ms both; }
.invite-onward { position: relative; padding-top: 14px; border-top: 1px solid var(--line); animation: invite-fade 600ms ease 1300ms both; }
.invite-onward::before { content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 1px; background: var(--signal); transform-origin: 0 50%; animation: draw-x 1500ms cubic-bezier(.4, 0, .2, 1) 500ms both; }

/* A letter already read comes back still. */
.invite-letter.is-settled, .invite-letter.is-settled * { animation: none !important; }
.invite-letter.is-settled .invite-underline { clip-path: none; }
.invite-letter.is-settled .invite-brush { display: none; }

/* The film, whole and with sound. */
.invite-film {
  width: min(calc(100vw - 24px), 1120px); max-width: none; max-height: calc(100dvh - 24px); margin: auto; padding: 0;
  border: 0; border-radius: 16px; background: #000; overflow: hidden; box-shadow: 0 30px 80px -20px #000c;
}
.invite-film[open] { animation: invite-room-in 280ms ease both; }
.invite-film::backdrop { background: #0b0d0cdb; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.invite-film video { display: block; width: 100%; max-height: calc(100dvh - 58px); aspect-ratio: 16 / 9; background: #000; }
/* The film's music credit, which its licence asks for wherever the film plays. */
.invite-film-credit { margin: 0; padding: 9px 16px; font: 12px/16px var(--sans); color: #b8bfba; }
.invite-film-credit a { color: inherit; text-decoration: underline; text-decoration-color: #ffffff4d; text-underline-offset: 2px; }
.invite-film video::cue { font-family: var(--sans); font-size: 14px; color: #fff; background: #0b0d0cc2; }
@media (min-width: 720px) { .invite-film video::cue { font-size: 19px; } }
.invite-film-close {
  position: absolute; top: 10px; right: 10px; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: 50%; background: #171a19b3; color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

/* Welcome on Create, once, above the question box. */
.create-welcome { margin: 0 0 14px; color: var(--ink-2); font: 400 17px/1.4 var(--sans); animation: invite-fade 800ms ease 200ms both; }
.create-welcome-hello { color: var(--ink); font: 700 1em/1 var(--sans); letter-spacing: -.01em; }

.invite-stage :focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.invite-email :focus-visible, .invite-code-input:focus-visible, .invite-title:focus-visible, .invite-step:focus-visible { outline: none; }

@media (min-width: 720px) {
  .invite-room { padding-top: max(22px, env(safe-area-inset-top)); }
  .invite-top { height: 72px; }
  .invite-mark.wordmark-logo { width: 92px; }
  .invite-desk { padding-top: 22px; }
  .invite-card { width: 520px; padding: 34px 36px 30px; border-radius: 26px; }
  .invite-card-compact { width: 480px; }
  .invite-name { font-size: 84px; }
  .invite-name[data-size="m"] { font-size: 66px; }
  .invite-name[data-size="s"] { font-size: 50px; }
  .invite-brush { width: 116px; }
  .invite-letter .invite-lede { font-size: 19px; }
}
/* On a laptop the print lies beside the letter, over its edge. */
@media (min-width: 1120px) and (min-height: 600px) {
  .invite-desk { align-content: safe center; padding: 12px 0 clamp(12px, 6vh, 56px); }
  .invite-letter { width: 470px; translate: 256px 0; margin-bottom: 24px; }
  .invite-letter .invite-print { position: absolute; top: 50%; right: calc(100% - 24px); width: 540px; margin: 0; padding: 9px 9px 15px; translate: 0 -50%; transform: rotate(-2.4deg); z-index: 1; }
  .invite-letter .invite-asked { padding: 13px 7px 0; font-size: 15px; }
  .invite-letter .invite-name { font-size: 88px; }
  .invite-letter .invite-name[data-size="m"] { font-size: 66px; }
  .invite-letter .invite-name[data-size="s"] { font-size: 46px; }
  .invite-letter .invite-lede { margin-bottom: 28px; }
  .invite-letter ~ .invite-foot { translate: 256px 0; width: 470px; }
}
@media (max-width: 380px) {
  .invite-card { padding: 22px 18px 20px; }
  .invite-name { font-size: 52px; }
  .invite-name[data-size="m"] { font-size: 40px; }
  .invite-name[data-size="s"] { font-size: 31px; }
  .invite-kicker { font-size: 13px; }
  .invite-letter .invite-lede { font-size: 17px; }
  .invite-cells { gap: 6px; }
  .invite-cells > span { height: 54px; font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .invite-stage, .invite-stage *, .invite-film, .create-welcome { animation: none !important; transition: none !important; }
  .invite-brush { display: none; }
  .invite-underline { clip-path: none; }
}

@keyframes invite-room-in { from { opacity: 0; } }
@keyframes invite-room-out { to { opacity: 0; } }
@keyframes invite-hold { to { visibility: visible; } }
@keyframes invite-lay { from { opacity: 0; transform: translate3d(0, 34px, 0) rotate(-1.6deg) scale(.985); } }
@keyframes invite-print { from { opacity: 0; transform: translate3d(-14px, 26px, 0) rotate(-7deg) scale(1.03); } }
@keyframes invite-fade { from { opacity: 0; transform: translate3d(0, 10px, 0); } }
@keyframes invite-wipe { to { clip-path: inset(-50% 0 -50% 0); } }
@keyframes invite-brush-move { from { left: 0; } to { left: 100%; } }
@keyframes invite-brush-life { 0% { opacity: 0; } 6%, 86% { opacity: 1; } 100% { opacity: 0; } }
@keyframes invite-check { 50% { border-color: var(--signal); background: color-mix(in srgb, var(--signal) 7%, var(--card)); } }
@keyframes invite-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@keyframes invite-dots { to { clip-path: inset(0 -10% 0 0); } }
/* While the code form is open it carries its own instruction, so the lock's line steps aside. */
.account-administration:has(#account-mfa-form) .account-admin-head .account-note { display: none; }