/* UniiChat: black ink on white paper, as the terminal (Theme.ts): what
   the machine wrote is filled (a block, a summary; a tool call, its
   result hooked right under it), what a person or Unii said is framed,
   unfilled. Every color is the palette's below; each kind's look, put
   in the page at boot (Theme.ts theme_css), on .msg.<kind>: --fg, --it. */

/* The palette. On a device set dark, the same page in light ink on a
   soft black: fills and rules a step lighter than the page (the light
   ones a step darker); a box over the page lighter still, as a shadow
   shows little on the dark; a person's frame gray, as a light line on
   the dark glares; green, red and purple lighter and calmer, to keep
   their contrast */
:root {
  --ink    : #111111; /* text, frames */
  --mid    : #5f5f5f; /* secondary text, levels */
  --soft   : #9a9a9a; /* hints, placeholders */
  --hair   : #e6e6e6; /* rules */
  --paper  : #ffffff; /* the page */
  --lift   : #ffffff; /* a box over the page: a popover, the message box */
  --block  : #f2f2f2; /* a summary's, a tool's, a button's, code's fill */
  --hover  : #e8e8e8; /* under the pointer, around the focus */
  --frame  : #cccccc; /* a call's code's frame, a file's lines', the message box's */
  --edge   : #111111; /* a person's frame: the user's message, a report */
  --add    : #1a7f37; /* a diff's line added */
  --del    : #cf222e; /* a diff's line dropped */
  --accent : #6d3fd8; /* the name UniiChat in a message */
  --red    : #b42318; /* deleting the account */
  --veil   : rgb(0 0 0 / .3); /* the page behind a box over it */
  --shadow : 0 1px 2px rgba(0, 0, 0, .05), 0 6px 20px rgba(0, 0, 0, .05);
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink    : #e3e3e6;
    --mid    : #a6a6ad;
    --soft   : #8a8a92;
    --hair   : #36363c;
    --paper  : #171719;
    --lift   : #222226;
    --block  : #2c2c31;
    --hover  : #37373d;
    --frame  : #4c4c53;
    --edge   : #85858d;
    --add    : #55b874;
    --del    : #f8857c;
    --accent : #ad94ff;
    --red    : var(--del);
    --veil   : rgb(0 0 0 / .5);
    --shadow : 0 1px 2px rgb(0 0 0 / .4), 0 8px 28px rgb(0 0 0 / .45);
  }
}

:root {
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --brand: "Avenir Next", Avenir, Futura, var(--sans);
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --col: 740px;
  --head: 57px; /* the header's height, where an open block's bar sticks */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { color-scheme: light dark; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; overflow-anchor: none; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
::selection { background: var(--ink); color: var(--paper); }
a { color: inherit; text-underline-offset: 3px; }
/* no word left alone on a line: all text balanced (every browser keeps
   it), but the prose of messages (not notes), pretty */
body { text-wrap: balance; }
.msg:not(.note) { text-wrap: pretty; }

/* a guest's chat: only the log and the message box; a note alone (the
   terminal signed in) */
body.guest :is(.net, .credits, .all, .menu, .attach, .mic, #pick, #tabs) { display: none !important; }
/* what only a server that bills shows (main.ts: body.bills) */
body:not(.bills) .bill { display: none !important; }
body.solo main { width: min(420px, 100% - 48px); margin: 18vh auto; text-align: center; }
body.solo h1 { margin: 0; font: 400 46px/1.05 var(--serif); letter-spacing: -.015em; }
.sub { margin: 18px 0 0; color: var(--mid); font-size: 14.5px; }

/* Header: the logo, then buttons: grey chips, no borders. It and the footer keep clear of a phone's notch and
   home bar (safe-area insets: the page is drawn under them) */
header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 6px; height: var(--head); padding: 0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)); background: var(--paper); border-bottom: 1px solid var(--hair); }
header > button { height: 32px; padding: 0 12px; border-radius: 8px; background: var(--block); font-size: 13.5px; font-weight: 500; }
header > button:hover { background: var(--hover); }
header > .brand { margin-right: auto; display: flex; align-items: center; gap: 10px; height: auto; padding: 0; background: none; font: 600 20px/1 var(--brand); letter-spacing: -.01em; }
header > .brand:hover { background: none; }
/* the logo: its shape (mark.svg, the infinity cut out) filled with the
   ink, so it follows the theme */
.mark { display: block; width: 26px; height: 26px; background: var(--ink); -webkit-mask: url(/mark.svg) center / contain no-repeat; }
header .credits { font: 500 12.5px var(--mono); }
header .net { font-size: 13px; color: var(--mid); }

/* Footer: the rule with the pick (a click on a part moves it), the
   images waiting, the message box, the tabs (while agents work), and a
   guest's consent; over the log, as the header, and as low as it goes,
   so a phone with its keyboard up still shows the chat; the account
   page keeps only its toasts, at the screen's foot */
footer { position: sticky; bottom: 0; z-index: 2; padding: 18px max(20px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); background: linear-gradient(transparent, var(--paper) 14px); }
body.account footer { position: fixed; inset: auto 0 0; background: none; pointer-events: none; }
body.account footer > :not(#toast) { display: none; }
#pick { width: min(var(--col), 100%); margin: 0 auto 6px; display: flex; align-items: center; gap: 6px; font: 12.5px/20px var(--sans); color: var(--mid); }
#pick .rule { flex: 1; height: 1px; background: var(--hair); margin-right: 4px; }
#pick button { padding: 0 6px; border-radius: 6px; }
#pick button:hover { background: var(--block); color: var(--ink); }
#pick .dot { color: var(--soft); }

.composer { width: min(var(--col), 100%); margin: 0 auto; display: flex; align-items: flex-end; gap: 10px; border: 1px solid var(--frame); border-radius: 24px; padding: 7px 7px 7px 20px; background: var(--lift); box-shadow: var(--shadow); }
.composer:focus-within { border-color: var(--soft); }
.composer textarea { flex: 1; resize: none; border: 0; outline: 0; background: none; color: var(--ink); font: 16px/1.5 var(--sans); padding: 7px 0; max-height: 40vh; }
.composer textarea::placeholder { color: var(--soft); }
.send, .attach, .mic { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; }
.send svg, .attach svg, .mic svg { width: 20px; height: 20px; stroke-width: 2; }
.send { background: var(--ink); color: var(--paper); }
.send.stop { background: var(--block); color: var(--ink); }
/* the send button's icons: an arrow, a square (stop) */
.send:not(.stop) svg + svg, .send.stop svg:first-child { display: none; }
.send.stop svg { fill: currentColor; stroke-width: 0; width: 16px; height: 16px; }
.attach { margin-left: -13px; color: var(--mid); }
.attach:hover { color: var(--ink); background: var(--hover); }
/* the mic: ink while it records; faint while its words are on their way */
.mic { margin-right: -6px; color: var(--mid); }
.mic:hover { color: var(--ink); background: var(--hover); }
.mic.rec { background: var(--ink); color: var(--paper); }
.mic:disabled { opacity: .4; cursor: default; }
/* the voice: while the mic records, the box shows how loud it hears you,
   newest at the right, and the time so far */
.composer .voice { display: none; flex: 1; align-items: center; gap: 12px; height: 38px; color: var(--ink); }
.composer.rec .voice { display: flex; }
.composer.rec textarea { display: none; }
.voice canvas { flex: 1; height: 28px; min-width: 0; }
.voice span { font: 14px var(--mono); color: var(--mid); font-variant-numeric: tabular-nums; }
.composer.off { border-color: var(--hair); }
.composer.off textarea { color: var(--soft); }
.composer.off .send { background: var(--hair); cursor: default; }
.composer.off :is(.attach, .mic) { visibility: hidden; }
#toast { width: fit-content; max-width: min(560px, 100%); margin: 0 auto 10px; padding: 8px 16px; border-radius: 12px; background: var(--ink); color: var(--paper); font-size: 13.5px; }

#tabs { width: min(var(--col), 100%); margin: 6px auto 0; display: flex; gap: 16px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; font: 13px/20px var(--sans); color: var(--mid); }
#tabs button { flex: none; }
#tabs button:hover, #tabs .here { color: var(--ink); }
#tabs .here { font-weight: 600; }

/* Popovers (the browser's): the menu, the wallet, Import History */
[popover] { inset: 60px 20px auto auto; margin: 0; width: 280px; padding: 10px 14px; border: 1px solid var(--hair); border-radius: 14px; color: var(--ink); background: var(--lift); box-shadow: var(--shadow); }
[popover] p { margin: 8px 0 6px; font-size: 14px; }
[popover] > button { display: block; width: 100%; padding: 8px 4px; text-align: left; font-size: 14.5px; border-radius: 10px; }
[popover] > button:hover { background: var(--hover); }
#menu { width: 180px; padding: 6px; box-shadow: 0 8px 24px rgb(0 0 0 / .12); }
.ai { margin: 6px 0 0; text-align: center; font: 12px var(--sans); color: var(--mid); }
body:not(.guest) .ai { display: none; }
/* the wallet (out of credit), Import History (also a new account's
   first step) and the risk warning: centered over the page. A running
   import's progress shows in Import History and, small, in the header */
:is(#wallet, #import, #risk) { inset: 0; margin: auto; width: min(440px, 100vw - 40px); height: fit-content; max-height: 85vh; overflow: auto; padding: 14px 20px; }
:is(#wallet, #import, #risk)::backdrop { background: var(--veil); }
:is(#wallet, #import, #risk) .title { font-weight: 600; font-size: 16px; }
#wallet { width: min(400px, 100vw - 40px); padding: 20px 22px; }
#wallet .title { margin-top: 0; }
#wallet .title { margin-bottom: 16px; }
#import { width: min(480px, 100vw - 40px); padding: 20px 22px; }
#import .title { margin-top: 0; font-size: 17px; }
#import .sub { margin-top: 4px; }
#import :is(code, kbd) { font: .9em var(--mono); background: var(--block); border-radius: 5px; padding: .1em .35em; }
#import kbd { margin-right: 2px; }
#import :is(.found, .guess):empty { display: none; }
#import .found { font-weight: 500; }
#import .want { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 12px 0 0; padding: 0; border: 0; font-size: 13.5px; color: var(--mid); }
/* the range taken: its first day (left, moved by the ball) and today
   (right); the bar is ink from the ball to today, what is taken */
#import .since { flex-basis: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; font: 12.5px var(--mono); color: var(--ink); }
/* a fieldset is as wide as its widest line unless told min-width 0: a
   long one would widen the box and scroll it sideways */
#import .src { min-width: 0; margin: 12px 0 0; padding: 4px 12px 10px; border: 1.25px solid var(--hair); border-radius: 12px; font-size: 13.5px; color: var(--mid); }
#import .src legend { padding: 0 4px; font-weight: 600; color: var(--ink); }
#import .src .pickzip { margin: 8px 0 0; padding: 4px 10px; border-radius: 7px; background: var(--block); font-size: 12.5px; font-weight: 500; }
#import .src .pickzip:hover { background: var(--hover); }
#import .pick { margin: 8px 0 0; }
#import .pick summary { cursor: pointer; color: var(--ink); font-weight: 500; }
/* the session list is a table: day and count in mono, so each column
   keeps one width, the folder last; a long row scrolls the list
   sideways, never the box */
#import .sessions { margin: 6px 0 0; max-height: 150px; overflow: auto; font-size: 12.5px; }
#import .sessions label { display: flex; align-items: center; gap: 10px; width: max-content; min-width: 100%; white-space: nowrap; }
#import .sessions input { margin: 0; }
#import .sessions span:not(:last-child) { font: 11.5px var(--mono); }
#import .sessions span:nth-child(3) { width: 3ch; text-align: right; }
#import .since input { appearance: none; flex-basis: 100%; height: 3px; margin: 10px 0 6px; border-radius: 2px; background: linear-gradient(to right, var(--hair) var(--at), var(--ink) var(--at)); }
#import .since input::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper); cursor: grab; }
#import .since input::-moz-range-thumb { width: 10px; height: 10px; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper); cursor: grab; }
#import .since input::-moz-range-track { background: transparent; }
/* each line one row, on a phone too: there the box takes nearly the
   screen's width, its sides and text shrinking with it */
#risk { width: min(400px, 100vw - 24px); padding: 20px min(22px, 4vw); }
#risk .title { margin-top: 0; font-size: 16px; }
#risk a { color: inherit; text-decoration: underline; }
#risk ul { margin: 12px 0 0; padding-left: 18px; }
#risk li { margin: 6px 0; font-weight: 500; font-size: min(16px, 4.1vw); }
:is(#import, #risk) .acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; margin: 16px 0 0; }
:is(#import, #risk) .acts button { padding: 7px 16px; border-radius: 8px; background: var(--block); font-size: 14px; font-weight: 500; }
:is(#import, #risk) .acts button:hover { background: var(--hover); }
:is(#import, #risk) .acts :is(.go, .pickdir, .ok) { background: var(--ink); color: var(--paper); }
:is(#import, #risk) .acts :is(.go, .pickdir, .ok):hover { background: var(--ink); opacity: .85; }
#import .acts .pickdir.alt { background: var(--block); color: var(--ink); }
#import .two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#import .two button { min-height: 64px; padding: 10px 16px; font-size: 15px; white-space: normal; }
:is(#import .acts, .usd) button { white-space: nowrap; }
#import button:disabled { opacity: 0.4; cursor: default; }
/* a progress bar: the box's on the paper, track the block's gray; the
   header's on a gray button, named with its percent, track darker
   (paused: its bar mid gray) */
progress { --track: var(--block); --bar: var(--ink); display: block; width: 100%; height: 6px; margin: 14px 0 6px; appearance: none; border: 0; border-radius: 3px; background: var(--track); overflow: hidden; }
progress::-webkit-progress-bar { background: var(--track); }
progress::-webkit-progress-value { background: var(--bar); transition: width .4s; }
progress::-moz-progress-bar { background: var(--bar); }
header > .imping { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 112px; font: 500 12.5px var(--sans); }
.imping progress { --track: rgb(0 0 0 / .14); height: 3px; margin: 0; }
.imping.why progress { --bar: var(--mid); }
@media (pointer: fine) { #import .phone { display: none; } }
@media not (pointer: fine) { #import .desk { display: none; } }
@media (max-width: 420px) { #import .two { grid-template-columns: 1fr; } }

/* The chat */
#log { width: min(var(--col), 100% - 40px); margin: 0 auto; padding: 24px 0 40px; min-height: calc(100vh - 180px); }
#log > * > * { margin-block: 14px; }
.cap { font: italic 14.5px var(--serif); color: var(--mid); }

/* a block: one summary, its size on the left */
.block { display: flex; gap: 12px; padding: 10px 14px; background: var(--block); border-radius: 10px; font: 15px/1.55 var(--serif); cursor: pointer; overflow-wrap: anywhere; }
.block:hover { background: var(--hover); }
.block .lv { flex: none; min-width: 38px; font: 600 11.5px/24px var(--sans); color: var(--mid); }

/* an open block: its halves inside a frame; a message open (1x) as it
   looks whole, its pill beside Copy, shown as Copy is */
.open { border: 1.25px solid var(--frame); border-radius: 12px; padding: 0 10px 10px; }
.open > * { margin: 10px 0 0; }
.open > .fold { position: sticky; top: var(--head); z-index: 1; display: block; width: 100%; padding: 6px 0; text-align: left; font: 600 12px var(--sans); color: var(--mid); background: var(--paper); border-bottom: 1px solid var(--hair); }
.open > .fold:hover { color: var(--ink); }
.open.one { position: relative; border: 0; border-radius: 0; padding: 0; }
.open.one > * { margin: 0; }
.open.one > .fold { position: absolute; inset: auto 36px calc(100% + 4px) auto; z-index: 1; width: auto; height: 26px; padding: 0 8px; border: 0; border-radius: 6px; font: 600 11.5px/26px var(--sans); opacity: 0; }
.open.one > .fold:hover { background: var(--hover); }
.open.one:hover > .fold { opacity: 1; }
/* a tall message (Html.ts TALL) folded to its head */
.msg:has(> .more:not([open])) > .clip { max-height: 20em; overflow: hidden; }
.more > summary { display: block; margin-top: 6px; font: 13px var(--sans); color: var(--mid); cursor: pointer; }
.more > summary::after { content: "Show all"; }
.more[open] > summary::after { content: "Fold"; }
.more > summary:hover { color: var(--ink); }

/* a message, by kind */
.msg { position: relative; overflow-wrap: anywhere; font: 17.5px/1.68 var(--serif); color: var(--fg); font-style: var(--it); }
.msg > :first-child, .msg > .copy + * { margin-top: 0; }
.msg > :last-child { margin-bottom: 0; }
.msg p, .msg ul, .msg ol, .msg pre, .msg blockquote { margin: 0 0 .85em; }
.msg ul, .msg ol { padding-left: 1.3em; }
.msg code { font: .82em var(--mono); background: var(--block); border-radius: 5px; padding: .1em .35em; }
/* code in a message: filled, as the terminal; a call's code (on the
   call's fill) and a file's lines: framed. Code never wraps on the
   site: a long line overflows right, its pre scrolls */
.msg pre { position: relative; font: 13.5px/1.6 var(--mono); white-space: pre; overflow-wrap: normal; background: var(--block); border-radius: 10px; padding: 13px 16px; overflow-x: auto; }
.msg:is(.tool, .echo) pre, .msg pre.diff { background: none; border: 1.25px solid var(--frame); }
.msg pre code { font: inherit; background: none; padding: 0; }
.msg blockquote { padding-left: 1.2em; font: italic 16.5px/1.6 var(--serif); }
.msg table { border-collapse: collapse; font: 15px/1.45 var(--sans); }
.msg td, .msg th { text-align: left; padding: 6px 14px 6px 0; border-bottom: 1px solid var(--hair); }
/* the user's message: a bubble at the right, as wide as its text (the
   terminal, whose column can't fit one, frames it at the left) */
.msg.user { margin-left: auto; width: fit-content; max-width: min(82%, 560px); padding: 10px 17px; border: 1.25px solid var(--edge); border-radius: 20px 20px 6px 20px; font: 16px/1.55 var(--sans); }
.msg.work { padding: 14px 20px; border: 1.25px solid var(--edge); border-radius: 14px; font: 16px/1.55 var(--sans); }
/* who said it, on the frame's top (View row.who) */
.msg.work::before { content: attr(data-who); position: absolute; left: 14px; top: -.75em; padding: 0 6px; background: var(--paper); font: 600 12px/1.5 var(--sans); color: var(--mid); }
.msg.note { color: var(--mid); }
.msg.unii { font: 16px/1.55 var(--sans); }
.msg.user p, .msg.work p, .msg.echo p { white-space: pre-wrap; }
.msg.tool, .msg.echo { font: 12.5px/1.5 var(--mono); }
/* a call: its own fill; a result: its lines bare, framed by their pre
   (Md.md_output). Thinking bare and unnamed */
.msg.tool { padding: 9px 14px; background: var(--block); border-radius: 10px; }
.msg.note[data-who]::before { content: attr(data-who); display: block; font: 700 12px/1.5 var(--sans); font-style: normal; color: var(--soft); }
.msg.mind { color: var(--mid); }
.msg.tool p, .msg.echo p { margin: 0; }
/* a tool call's head: its tool's icon, then the call (a command's
   lines), its device faint at the right */
.call { margin: 0; font: 12.5px/1.6 var(--mono); color: var(--ink); white-space: pre-wrap; }
.call .ic { margin-right: 8px; font-size: 15px; }
.call b { font-weight: 700; }
.call .on { float: right; margin-left: 1em; color: var(--soft); }
.msg.echo p + p { margin-top: .85em; }
.msg:is(.tool, .echo) pre { margin: 6px 0; font: inherit; padding: 6px 10px; border-radius: 6px; }
/* a file's lines (a read, a diff): framed, its file over them; each
   line's ink by its mark, kept ones faint, a read's in ink; its number
   unselectable */
.msg pre.diff code > span.file { color: var(--ink); }
.msg pre.diff code > span { display: block; }
.msg pre.diff i { display: inline-block; width: calc(var(--nw) + 1ch); font-style: normal; color: var(--soft); user-select: none; }
.msg pre.diff .add { color: var(--add); }
.msg pre.diff .del { color: var(--del); }
.msg pre.diff .gap { color: var(--soft); }
.msg pre .lang { display: block; margin-bottom: 4px; font: 600 11px var(--sans); color: var(--mid); }
.msg.note, .msg.mind { font-size: 14.5px; line-height: 1.6; }
.msg .brand { font: 600 .92em var(--brand); font-style: normal; letter-spacing: -.01em; color: var(--accent); }
.msg .name { font: inherit; text-decoration: underline; text-underline-offset: 3px; }
.msg .name:hover { background: var(--ink); color: var(--paper); }

/* Copy: under a message, and in a code block's corner, on hover */
.copy { position: absolute; right: 0; bottom: calc(100% + 4px); z-index: 1; display: grid; place-items: center; width: 26px; height: 26px; color: var(--mid); background: var(--paper); border-radius: 6px; opacity: 0; user-select: none; }
.copy:hover { color: var(--ink); background: var(--hover); }
.msg pre > .copy { top: 7px; right: 7px; bottom: auto; }
.msg:hover > .copy, .msg pre:hover > .copy { opacity: 1; }
/* a touch screen has no hover: Copy always shows, in room of its own (it
   had covered the next row's first line and a code block's line end) */
@media (hover: none) {
  .copy, .open.one > .fold { opacity: .6; }
  #log .msg:has(> .copy) { margin-top: 34px; }
  .msg pre:has(> .copy) { padding-right: 40px; }
  .msg pre > .copy { top: 9px; right: 9px; }
}
/* a touch browser zooms the page into a field whose font is under 16px */
@media (hover: none) { input, select { font-size: 16px; } }
/* a finger needs 44px: small buttons take taps around them (a box
   centered on each, not drawn), links in small print above and below */
@media (pointer: coarse) {
  :is(header > button, #pick button, #tabs button) { position: relative; }
  :is(header > button, #pick button, #tabs button, .copy, .open.one > .fold)::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
  :is(.ai, .fine, .foot) a { padding: 14px 0; }
  :is(.chip, .usd button) { height: 44px; }
  [popover] > button { min-height: 44px; }
}

/* images: under a message, each a link; over the box, those waiting to
   be sent (a click drops one) */
.pics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pics img { display: block; height: 120px; max-width: 100%; object-fit: cover; border-radius: 8px; border: 1px solid var(--hair); }
#pics { width: min(var(--col), 100%); margin: 0 auto 8px; }
#pics:empty { display: none; }
#pics img { height: 64px; cursor: pointer; }

@media (max-width: 600px) {
  :root { --head: 51px; }
  header { padding: 0 14px; }
  .brand span { display: none; }
  header > button { height: 30px; padding: 0 10px; font-size: 13px; }
  #log { width: calc(100% - 28px); }
  footer { padding: 12px 14px max(8px, env(safe-area-inset-bottom)); }
  .composer { padding: 5px 5px 5px 16px; }
  #account { width: calc(100% - 28px); }
  [popover] { left: 12px; right: 12px; width: auto; }
  #menu { left: auto; width: 180px; }
}

/* The account page (/account): one column of sections, each a small
   title over its content; buttons are grey chips (Delete red) */
#account { width: min(var(--col), 100% - 40px); margin: 0 auto; padding: 18px 0 64px; font-size: 15px; }
#account .back { display: inline-block; padding: 8px 0; font-size: 14px; color: var(--mid); text-decoration: none; }
#account .back:hover { color: var(--ink); }
#account h1 { margin: 6px 0 22px; font: 600 30px/1.2 var(--brand); letter-spacing: -.015em; }
#account section { padding: 22px 0; border-top: 1px solid var(--hair); }
#account h2 { margin: 0 0 14px; font: 600 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--mid); }
#account section > p { margin: 0 0 10px; }
#account section > p:last-child { margin-bottom: 0; }
#account .big { margin: 0 0 16px; font: 500 36px/1 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.usd { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; max-width: 420px; }
.usd button { height: 40px; padding: 0 8px; border-radius: 10px; background: var(--block); font-weight: 600; }
.usd button:hover { background: var(--hover); }
.fine { margin: 12px 0 0; font-size: 12.5px; color: var(--mid); }
.chip { flex: none; display: inline-grid; place-items: center; height: 36px; padding: 0 14px; border-radius: 9px; background: var(--block); font: 500 14px var(--sans); color: var(--ink); text-decoration: none; }
.chip:hover { background: var(--hover); }
.chip svg { width: 15px; height: 15px; }
.chip.red { color: var(--red); }
.wide { overflow-x: auto; }
#account table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
#account :is(th, td) { padding: 9px 14px 9px 0; border-bottom: 1px solid var(--hair); text-align: left; white-space: nowrap; }
#account th { font-size: 12.5px; font-weight: 500; color: var(--mid); }
#account :is(th, td):not(:first-child) { text-align: right; }
#account :is(th, td):last-child { padding-right: 0; }
#account :is(.days, .buys) :is(th, td):nth-child(2) { text-align: left; }
#account td:nth-child(2) { white-space: normal; }
#account tr:last-child td { border-bottom: 0; }
.item { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 12px 0; }
.item + .item { border-top: 1px solid var(--hair); }
#account .item p { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
#account .chip { min-width: 96px; }
.item small { display: block; font-size: 13.5px; font-weight: 400; color: var(--mid); overflow-wrap: anywhere; }
.kill { margin-top: 10px; padding: 16px; border-radius: 12px; background: var(--block); }
.kill input { width: 100%; height: 44px; margin: 8px 0 16px; padding: 0 12px; border: 1px solid var(--frame); border-radius: 9px; background: var(--paper); color: var(--ink); font: 16px var(--sans); }
.kill div { display: flex; gap: 8px; justify-content: flex-end; }
.kill .chip { background: var(--paper); }
.kill .chip.red { background: var(--red); color: var(--paper); }
.kill p { margin: 0 0 8px; font-size: 14.5px; }
.kill .why { color: var(--red); }
.kill .why:empty { display: none; }
.kill .chip:disabled { opacity: .4; cursor: default; }
#account .foot { margin: 24px 0 0; font-size: 13px; color: var(--mid); }
#account .foot a { text-decoration: none; }
#account .foot a:hover { text-decoration: underline; }

/* The intro (main.ts): its two scenes share one grid cell; the first's
   lines rise .38 s apart, and it fades as the second's logo and name
   rise; `hold` ends the intro after the last, and `.out` fades it. */
#intro { position: fixed; inset: 0; z-index: 9; display: grid; place-items: center; background: var(--paper); color: var(--ink); cursor: pointer; transition: opacity .6s ease; animation: hold 3.05s; }
#intro.out { opacity: 0; pointer-events: none; }
#intro .scene { grid-area: 1 / 1; display: grid; justify-items: center; gap: 4px; padding: 24px; text-align: center; }
#intro .scene:first-child { animation: gone .45s ease 1.5s forwards; }
#intro .scene > * { margin: 0; animation: rise .6s cubic-bezier(.2, .7, .2, 1) backwards; }
#intro .scene > :nth-child(2) { animation-delay: .38s; }
#intro .scene + .scene > :first-child { animation-delay: 1.5s; }
#intro .scene + .scene > :nth-child(2) { animation-delay: 1.88s; }
#intro p { font: 400 clamp(19px, 2.3vw, 25px)/1.35 var(--serif); letter-spacing: -.01em; }
#intro .mark { width: 56px; height: 56px; }
#intro h1 { margin-top: 14px; font: 600 28px/1.1 var(--brand); letter-spacing: -.015em; }
@keyframes rise { from { opacity: 0; transform: translateY(4px); } }
@keyframes gone { to { opacity: 0; } }
@keyframes hold { to { visibility: visible; } }