/* site.css: wasm.land's one stylesheet (the page's: index.html).
   A terminal, dressed up: a mono face for everything a machine says (addresses, commands, code, numbers, labels),
   a sans face for what people read; one dark palette; one scale for type, space and corners. Components below use
   only these tokens: change one here and it changes everywhere. */
@font-face { font-family:'Geist'; src:url(fonts/geist.woff2) format('woff2'); font-weight:100 900; font-display:swap; }
@font-face { font-family:'Geist Mono'; src:url(fonts/geist-mono.woff2) format('woff2'); font-weight:100 900; font-display:swap; }

:root {
  /* faces */
  --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* type: 11 12 13 14 16 20 26 */
  --t-xs: 11px; --t-s: 12px; --t-m: 13px; --t-b: 14px; --t-l: 16px; --t-xl: 20px; --t-2xl: 26px;
  /* space: 4 8 12 16 24 32 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  /* corners */
  --r-s: 0; --r-m: 0; --r-l: 0;
  /* surfaces, darkest to lightest */
  --bg: #000; --bg2: #0a0a0a; --card: #000; --raise: #141414; --hover: #1c1c1c;
  --line: #2a2a2a; --line2: #3d3d3d; --line3: #6b6b6b;
  /* ink */
  --ink: #f2f2f2; --ink2: #c4c4c4; --dim: #8f8f8f; --faint: #5e5e5e;
  /* accents: one green (go, live, ok, the prompt), one amber (attention), one red (wrong), one blue (links) */
  --acc: #f2f2f2; --on: #3ddc84; --on-bg: #3ddc841a; --warn: #f0b429; --bad: #ff5c5c; --bad-bg: #ff5c5c1a; --link: #6ea8ff; --visited: #b48cf2;
  --w: 1180px; --bar: 52px;
  --focus: 0 0 0 1px var(--on);
  color-scheme: dark;
}
* { box-sizing:border-box; }
html, body { margin:0; overflow-x:hidden; background:var(--bg); color:var(--ink); font:var(--t-b)/1.5 var(--sans); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body { font-feature-settings:'ss01'; }
button, input, textarea, select { font:inherit; color:inherit; }
button { cursor:pointer; }
a { color:var(--link); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
a:visited { color:var(--visited); }
a:hover { color:var(--ink); }
a.btn, a.sh-item, .mark, .mark:visited { text-decoration:none; }
code, kbd, pre, .mono { font-family:var(--mono); font-size:.92em; }
::selection { background:#4fd18b44; }
:focus-visible { outline:none; }
button:focus-visible, a:focus-visible, summary:focus-visible { box-shadow:var(--focus); }
[hidden] { display:none !important; }
input[type=text], input[type=email], input[type=password], input[type=search], textarea, select {
  background:var(--bg2); border:1px solid var(--line2); border-radius:var(--r-m); color:var(--ink); padding:9px 11px; font-size:var(--t-l); }
input:focus, textarea:focus, select:focus { outline:none; border-color:var(--line3); }
::placeholder { color:var(--faint); font-size:var(--t-b); }
/* scrollbars: thin, out of the way */
* { scrollbar-width:thin; scrollbar-color:var(--line2) transparent; }

/* ---------- buttons: one family ---------- */
.btn, label.btn, button.primary, .actions button, .ag-btn, .sv-btn, .rs-acts button, .rs-mini, .mm-brief button, .acct-form .primary, button.danger, .trun, .sh-btn, .new-btn, .pill, .tex button, .seg button, .sv-back {
  display:inline-flex; align-items:center; justify-content:center; gap:6px; height:32px; padding:0 12px; border-radius:var(--r-m);
  border:1px solid var(--line2); background:transparent; color:var(--ink2); font:500 var(--t-m)/1 var(--sans); white-space:nowrap; }
.actions button:hover, .ag-btn:hover:not(:disabled), .sv-btn:hover, .rs-acts button:hover, .rs-mini:hover, .sh-btn:hover, .pill:hover, .tex button:hover, .seg button:hover, .sv-back:hover {
  background:var(--hover); border-color:var(--line3); color:var(--ink); }
.primary, .btn.primary, .actions button.primary, .ag-in .primary, .mm-new .primary, .acct-form .primary, .new-btn, .sv-btn.primary, .mm-brief button {
  background:var(--acc); border-color:var(--acc); color:var(--bg); font-weight:600; }
.primary:hover, .actions button.primary:hover, .new-btn:hover, .sv-btn.primary:hover, .mm-brief button:hover { background:#fff; border-color:#fff; color:var(--bg); }
button:disabled, .ag-btn:disabled { opacity:.4; cursor:default; }
#pAgent .s { display:none; }
button.danger { background:var(--bad-bg); border-color:#f0717866; color:var(--bad); }
button.danger:hover:not(:disabled) { background:#f0717833; }
.trun { height:28px; background:var(--on); border-color:var(--on); color:#06140c; font-weight:600; }
.trun:hover { background:#5fe09a; border-color:#5fe09a; }
kbd { font:500 var(--t-xs) var(--mono); color:inherit; opacity:.6; }

/* ---------- top bar: one row, a rule under it. On a phone the tabs go into a menu (no sideways scrolling) ---------- */
.topbar { position:sticky; top:0; z-index:5; height:var(--bar); display:flex; align-items:center; gap:var(--s2);
  padding:0 max(var(--s5), calc((100% - var(--w)) / 2 + var(--s5))); background:var(--bg); border-bottom:1px solid var(--line); }
.topbar .grow { flex:1; }
.mark { position:relative; display:block; flex:none; width:120px; height:30px; margin-right:var(--s3); color:inherit; text-decoration:none; font:700 var(--t-l) var(--mono); }
.mark canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.mark .mark-text { position:absolute; inset:0; display:flex; align-items:center; } .mark.drawn .mark-text { visibility:hidden; }
.mark:hover { text-decoration:none; }
.tabs { display:flex; align-items:center; gap:2px; min-width:0; }
.tabs .sep { width:1px; height:16px; margin:0 var(--s2); background:var(--line2); }
.tabs button { flex:none; height:30px; padding:0 10px; border-radius:var(--r-m); border:0; background:none; color:var(--dim); font:500 var(--t-b) var(--sans); white-space:nowrap; }
.tabs button:hover { color:var(--ink); }
.tabs button.sel { color:var(--ink); background:var(--raise); }
.sh-btn { padding:0 9px; font:600 var(--t-m) var(--mono); color:var(--on); }
.new-btn kbd { margin-left:2px; opacity:.5; }
.acct-slot { flex:none; display:flex; }
.acct-btn { height:32px; padding:0 12px; border-radius:var(--r-m); border:1px solid var(--line2); background:none; color:var(--ink2); font:500 var(--t-m) var(--sans); white-space:nowrap; max-width:34vw; overflow:hidden; text-overflow:ellipsis; }
.acct-btn:hover { border-color:var(--line3); color:var(--ink); }
.acct-btn.signed { font-family:var(--mono); }
.menu-btn { display:none; flex:none; width:36px; height:32px; padding:0; border:1px solid var(--line2); border-radius:var(--r-m); background:none; }
.menu-btn span, .menu-btn span::before, .menu-btn span::after { content:''; display:block; position:relative; width:14px; height:1.5px; margin:0 auto; background:var(--ink2); }
.menu-btn span::before { position:absolute; top:-5px; } .menu-btn span::after { position:absolute; top:5px; }
body.menu-open .menu-btn span { background:transparent; }
body.menu-open .menu-btn span::before { top:0; transform:rotate(45deg); } body.menu-open .menu-btn span::after { top:0; transform:rotate(-45deg); }

/* ---------- page head: every section and tab. A title, a line of what it is, actions on the right ---------- */
.pg-head { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s4); flex-wrap:wrap; margin:0 0 var(--s4); }
.pg-head > div { min-width:0; flex:1 1 320px; }
.pg-head > .btn, .pg-head > label.btn { flex:none; }
.pg-head h2 { margin:0; font:600 var(--t-xl)/1.2 var(--sans); letter-spacing:-.015em; }
.pg-head p { margin:var(--s1) 0 0; color:var(--dim); font-size:var(--t-b); max-width:72ch; }
.empty { padding:var(--s5) 0; color:var(--dim); text-align:center; }
.btn.primary, label.btn { cursor:pointer; }

/* ---------- the feed: one row per module (its live picture, then what it is), dense ---------- */
#feed, #mine { max-width:var(--w); margin:0 auto; padding-left:var(--s5); padding-right:var(--s5); }
#feed { display:flex; flex-direction:column; gap:var(--s2); padding-top:var(--s4); padding-bottom:var(--s6); }
#feed > .pg-head { margin-bottom:var(--s2); }
#mine:not([hidden]) + #feed { padding-top:0; }
.card { position:relative; display:grid; grid-template-columns:280px minmax(0, 1fr); background:var(--card); border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden; }
.card:hover { border-color:var(--line2); }
.stage { position:relative; aspect-ratio:16/10; background:#000; min-width:0; overflow:hidden; border-right:1px solid var(--line); }
/* in a row: the picture fills the row's height */
.card > .stage:not(.term-stage) { aspect-ratio:auto; min-height:175px; height:100%; }
.stage canvas { width:100%; height:100%; display:block; max-width:100%; }
.stage canvas.pix, .stage .host canvas.pix { image-rendering:pixelated; object-fit:contain; background:#000; }
.stage .host { position:absolute; inset:0; } .stage .host > canvas { width:100%; height:100%; display:block; }
.stage .tap { position:absolute; inset:0; background:none; border:0; }
.stage .poster, .poster { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--s2); color:var(--faint); font:var(--t-s) var(--mono); }
img.pi { width:48px; height:48px; border-radius:10px; }
.stage .shown { position:absolute; left:var(--s2); top:var(--s2); padding:1px 6px; border-radius:var(--r-s); background:#000000cc; color:var(--ink2); font:var(--t-xs) var(--mono); pointer-events:none; }
.stage.still { display:flex; align-items:center; justify-content:center; background:var(--bg2); }
.card > .meta { display:flex; flex-direction:column; min-width:0; padding:var(--s3) var(--s4); }
.head { display:flex; gap:var(--s3); align-items:center; min-width:0; } .hd-t { min-width:0; flex:1; }
img.mi { width:32px; height:32px; border-radius:7px; flex:none; background:var(--raise); }
.row { display:flex; align-items:center; gap:var(--s2); min-width:0; }
.title { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:600 var(--t-l)/1.25 var(--sans); letter-spacing:-.01em; }
.addr { font:var(--t-s)/1.4 var(--mono); color:var(--dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.blurb { margin:var(--s2) 0; color:var(--ink2); font-size:var(--t-b); line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.blurb code, .cli-intro code { padding:0 4px; border-radius:var(--r-s); background:var(--raise); font:var(--t-s) var(--mono); color:var(--ink); }
.blurb code.ad { color:var(--link); cursor:pointer; }
/* the facts: one quiet line */
.facts { margin:0 0 var(--s2); min-width:0; color:var(--dim); font:var(--t-s)/1.6 var(--mono); }
.facts i { margin:0 6px; color:var(--faint); font-style:normal; }
.facts b { color:var(--ink2); font-weight:400; cursor:pointer; } .facts b:hover { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.actions { display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:auto; }
.actions button { height:28px; padding:0 10px; }
.actions button[data-act="src"] { margin-left:auto; border-color:transparent; color:var(--dim); }
/* chips: one shape */
.dep, .lic, .kind, .pk, .live, .mm-state, .sv-iface, .sv-exports a, .sv-meta .chip, .chip {
  display:inline-flex; align-items:center; gap:5px; height:18px; padding:0 6px; border-radius:var(--r-s); border:1px solid var(--line2); flex:none;
  background:transparent; color:var(--ink2); font:var(--t-xs) var(--mono); white-space:nowrap; text-transform:none; letter-spacing:0; line-height:1; }
.deps, .packs { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 var(--s2); }
.pk { max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.dep { cursor:pointer; } .dep:hover { border-color:var(--line3); color:var(--ink); } .dep.lib { color:var(--link); }
img.di { width:12px; height:12px; border-radius:3px; }
img.ti { width:20px; height:20px; border-radius:5px; vertical-align:-5px; margin-right:var(--s2); }
.kind { color:var(--warn); border-color:#e6b45055; }
.lic { border:0; padding:0; height:auto; color:var(--dim); } .lic.cl { color:var(--warn); }
.live { color:var(--on); border-color:#4fd18b44; } .live::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--on); }
.pk { border-style:dashed; color:var(--dim); cursor:pointer; } .pk.have { border-style:solid; border-color:#4fd18b55; color:var(--on); }
.exports { margin:0 0 var(--s2); color:var(--dim); font:var(--t-xs)/1.6 var(--mono); word-break:break-word; }
.dgm { display:flex; align-items:center; justify-content:center; gap:var(--s3); width:100%; padding:var(--s3); color:var(--dim); font:var(--t-xs) var(--mono); }
.dgm .col { display:flex; flex-direction:column; gap:3px; max-width:42%; overflow:hidden; }
.dgm .col span { padding:1px 6px; border-radius:var(--r-s); background:var(--raise); color:var(--ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dgm i { color:var(--faint); }
.note { color:var(--dim); }
.lesson { margin:0 0 var(--s2); padding:0 0 0 var(--s3); border-left:2px solid var(--on); color:var(--ink2); font-size:var(--t-m); line-height:1.5; }
.lesson .n { display:inline-grid; place-items:center; min-width:16px; height:16px; margin-right:6px; border-radius:var(--r-s); background:var(--on); color:#06140c; font:600 var(--t-xs) var(--mono); }
.err { padding:var(--s5); color:var(--bad); font:var(--t-s)/1.5 var(--mono); text-align:center; }

/* commands: a terminal where a picture would be */
.term, #paneShell, .cli-page { --term: #07080a; --term2: #0b0d10; }
.stage.term-stage { aspect-ratio:auto; height:auto; min-height:180px; max-height:260px; display:flex; background:var(--term, #07080a); }
.term { flex:1; display:flex; flex-direction:column; min-width:0; background:var(--term); font:var(--t-m)/1.55 var(--mono); }
.tline { display:flex; align-items:center; gap:var(--s2); padding:var(--s2) var(--s2) var(--s2) var(--s3); border-bottom:1px solid var(--line); }
.ps, .tline .ps, .cli-line .ps, .sh-line .ps { color:var(--on); white-space:nowrap; font-family:var(--mono); }
.targs, input.targs { flex:1; min-width:0; padding:4px 0; border:0; border-radius:0; outline:0; background:none; box-shadow:none; color:var(--ink); font:inherit; }
.targs:focus, .sh-in:focus, .tstdin:focus { border-color:transparent; box-shadow:none; }
.tin { border-bottom:1px solid var(--line); } .tin summary { padding:4px var(--s3); color:var(--faint); font:var(--t-s) var(--mono); cursor:pointer; list-style:none; }
.tin summary::-webkit-details-marker { display:none; } .tin summary::before { content:'▸ '; } .tin[open] summary::before { content:'▾ '; }
.tstdin { display:block; width:100%; min-height:64px; resize:vertical; padding:var(--s2) var(--s3); border:0; border-radius:0; outline:0; background:var(--term2); color:var(--ink); font:var(--t-m)/1.5 var(--mono); }
.tex { display:flex; flex-wrap:wrap; gap:6px; padding:var(--s2) var(--s3); }
.tex button { height:24px; padding:0 8px; border-radius:var(--r-s); font:var(--t-s) var(--mono); color:var(--dim); }
.tout { flex:1; min-height:0; margin:0; padding:var(--s2) var(--s3) var(--s3); overflow:auto; color:var(--ink); font:inherit; white-space:pre; }
.tout.err { color:var(--bad); text-align:left; padding:var(--s2) var(--s3) var(--s3); }
.tout .se { display:block; color:var(--bad); white-space:pre-wrap; }
.tout .meta { display:block; margin-top:var(--s2); padding:0; color:var(--faint); font-size:var(--t-xs); white-space:normal; }
.card.cli { grid-template-columns:440px 1fr; }

/* ---------- sheets (small dialogs from the bottom) and the drawer ---------- */
#scrim { position:fixed; inset:0; z-index:15; display:none; background:#000a; } #scrim.open { display:block; }
.sheet { position:fixed; left:0; right:0; bottom:0; z-index:20; max-width:520px; max-height:82vh; margin:0 auto; overflow:auto;
  padding:var(--s5) var(--s5) max(var(--s5), env(safe-area-inset-bottom)); background:var(--card); border:1px solid var(--line2); border-bottom:0;
  border-radius:var(--r-l) var(--r-l) 0 0; transform:translateY(100%); visibility:hidden; }
.sheet.open { transform:none; visibility:visible; }
.sheet h3 { margin:0 0 var(--s3); font:600 var(--t-l) var(--sans); letter-spacing:-.01em; }
.sheet .actions { margin-top:var(--s4); padding-top:0; }
#toast { position:fixed; left:50%; bottom:var(--s5); z-index:30; display:none; transform:translateX(-50%); max-width:calc(100% - 32px);
  padding:var(--s2) var(--s4); border-radius:var(--r-m); border:1px solid var(--line2); background:var(--raise); color:var(--ink); font:var(--t-m) var(--sans); }

/* a sheet's parts: a head (title, one line), a list of destinations, a foot of actions */
.sh-head { margin:0 0 var(--s4); } .sh-head h3 { margin:0; } .sh-sub { display:block; margin-top:2px; color:var(--dim); font-size:var(--t-m); }
.sh-list { display:flex; flex-direction:column; margin:0 calc(-1 * var(--s2)); }
.sh-item { display:flex; align-items:center; justify-content:space-between; height:40px; padding:0 var(--s2); border:0; border-radius:var(--r-m); background:none; color:var(--ink); font:500 var(--t-b) var(--sans); text-align:left; }
.sh-item:hover { background:var(--raise); } .sh-item span { color:var(--faint); font:var(--t-s) var(--mono); }
.sh-foot { display:flex; align-items:center; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s4); } .sh-foot .grow { flex:1; }
button.wide, .btn.wide { width:100%; height:38px; }

/* the account */
.acct-form { display:flex; flex-direction:column; gap:var(--s3); }
.acct-form label { display:flex; flex-direction:column; gap:6px; color:var(--ink2); font-size:var(--t-m); font-weight:500; }
.acct-form input { width:100%; }
.acct-handle { display:flex; align-items:center; border:1px solid var(--line2); border-radius:var(--r-m); background:var(--bg2); padding-left:11px; }
.acct-handle:focus-within { border-color:var(--line3); }
.acct-handle > span { color:var(--dim); font:var(--t-l) var(--mono); }
.acct-handle input { flex:1; border:0; background:none; padding-left:2px; font-family:var(--mono); }
.acct-check { font:var(--t-s) var(--mono); } .acct-check:empty { display:none; } .acct-check.ok { color:var(--on); } .acct-check.no { color:var(--bad); }
.acct-err { margin:0; color:var(--bad); font-size:var(--t-m); } .acct-err:empty { display:none; }
.acct-switch, .acct-sub { margin:0; color:var(--dim); font-size:var(--t-m); } .acct-switch a { color:var(--ink); }
.mm-danger, .acct-danger { margin-top:var(--s4); padding-top:var(--s3); border-top:1px solid var(--line); color:var(--dim); font-size:var(--t-m); }
.mm-danger summary, .acct-danger summary { color:var(--bad); cursor:pointer; list-style:none; } .mm-danger summary::before, .acct-danger summary::before { content:'▸ '; }
.mm-danger[open] summary::before, .acct-danger[open] summary::before { content:'▾ '; }
.mm-danger p, .acct-danger p { margin:var(--s2) 0; }

/* the drawer: the agent and the shell, the window's width, contents in the page's column */
.sheet.ag-sheet { max-width:none; height:min(64vh, 680px); padding:0; overflow:hidden; border-radius:0; border:0; border-top:1px solid var(--line2);
  background:var(--bg); }
.ag-wrap { height:100%; max-width:var(--w); margin:0 auto; padding:var(--s3) var(--s5) max(var(--s3), env(safe-area-inset-bottom)); display:flex; flex-direction:column; }
.dr-tabs { display:flex; align-items:center; gap:2px; margin-bottom:var(--s2); } .dr-tabs .grow { flex:1; }
.dr-tab { height:30px; padding:0 11px; border:0; border-radius:var(--r-m); background:none; color:var(--dim); font:500 var(--t-b) var(--sans); }
.dr-tab:hover { color:var(--ink); } .dr-tab.sel { background:var(--raise); color:var(--ink); }
.ag-sheet.busy #tabAgent::after { content:''; display:inline-block; width:6px; height:6px; margin-left:7px; border-radius:50%; background:var(--on); vertical-align:2px; }
.ag-x { width:32px; padding:0; font-size:var(--t-l); }
.dr-pane { flex:1; min-height:0; display:flex; flex-direction:column; }
.dr-tools { display:flex; align-items:center; gap:6px; margin-right:var(--s2); } .dr-tools .ag-sub { margin-right:var(--s2); max-width:40vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ag-sub { color:var(--dim); font:var(--t-s) var(--mono); }
.ag-btn { height:28px; padding:0 10px; }
.ag-log { flex:1; min-height:0; overflow:auto; margin:var(--s2) 0 var(--s3); display:flex; flex-direction:column; gap:var(--s2); }
.ag-e { line-height:1.55; white-space:pre-wrap; word-break:break-word; }
.ag-e.you { align-self:flex-end; max-width:80%; padding:6px var(--s3); border-radius:var(--r-l); background:var(--raise); }
.ag-e.said { color:var(--ink); font-size:var(--t-b); }
.ag-e.tool { color:var(--dim); font:var(--t-s) var(--mono); }
.ag-e.tool summary { cursor:pointer; list-style:none; } .ag-e.tool summary::-webkit-details-marker { display:none; }
.ag-e.tool summary::before { content:'▸ '; color:var(--faint); } .ag-e.tool details[open] summary::before { content:'▾ '; }
.ag-e.tool summary:hover { color:var(--ink2); }
.ag-e.tool pre { margin:var(--s1) 0 2px 14px; max-height:240px; overflow:auto; padding:var(--s2) var(--s3); border-radius:var(--r-m); background:var(--bg2); border:1px solid var(--line); color:var(--ink2); white-space:pre-wrap; font:var(--t-s)/1.5 var(--mono); }
.ag-e.tool.bad summary { color:var(--bad); }
.ag-e.note { color:var(--faint); font:var(--t-s) var(--mono); } .ag-e.err { color:var(--bad); font:var(--t-s) var(--mono); }
.ag-e.hint { color:var(--dim); font:var(--t-b) var(--sans); padding:var(--s2) 0; } .ag-e.thinking { font-style:italic; }
.ag-sug { display:flex; flex-direction:column; gap:2px; margin-bottom:var(--s2); padding:var(--s1); border-radius:var(--r-m); border:1px solid var(--line2); background:var(--raise); }
.ag-sug button { padding:6px var(--s2); border:0; border-radius:var(--r-s); background:none; color:var(--dim); font-size:var(--t-m); text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ag-sug button:hover, .ag-sug button:first-child { background:var(--hover); } .ag-sug b { color:var(--ink); font:500 var(--t-m) var(--mono); }
.ag-in { display:flex; gap:var(--s2); align-items:stretch; }
.ag-in textarea { flex:1; min-height:46px; max-height:30vh; resize:vertical; font:var(--t-l)/1.45 var(--sans); }
.ag-in .primary { height:auto; padding:0 var(--s4); border-radius:var(--r-m); }
/* the shell: a terminal inside the drawer */
#paneShell { text-align:left; background:var(--term); border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden; font:var(--t-b)/1.55 var(--mono); color:var(--ink); }
.sh-scroll { flex:1; min-height:0; overflow:auto; padding:var(--s3) var(--s4) var(--s1); }
.sh-run { margin-bottom:var(--s3); } .sh-run .cmd { color:var(--on); white-space:pre-wrap; word-break:break-all; }
.sh-run .tout { padding:2px 0 0; overflow-x:auto; }
.sh-run > .meta, .sh-run .tout.meta { display:block; color:var(--faint); font-size:var(--t-s); white-space:pre-wrap; } .sh-run > .meta b { color:var(--ink2); font-weight:500; }
.sh-line { display:flex; align-items:center; gap:var(--s2); padding:var(--s1) var(--s4); border-top:1px solid var(--line); background:var(--term2); }
input.sh-in { flex:1; min-width:0; padding:var(--s2) 0; border:0; border-radius:0; outline:0; background:none; color:var(--ink); font:var(--t-l) var(--mono); }
/* the way back to the drawer */
#agDock { position:fixed; right:var(--s4); bottom:max(var(--s4), env(safe-area-inset-bottom)); z-index:19; display:none; align-items:center; gap:var(--s2);
  height:34px; padding:0 var(--s3); border-radius:var(--r-m); border:1px solid var(--line2); background:var(--raise); color:var(--ink2); font:500 var(--t-m) var(--sans); }
#agDock:hover { border-color:var(--line3); color:var(--ink); }
#agDock.on { display:flex; } #agDock i { width:7px; height:7px; border-radius:50%; background:var(--faint); }
#agDock.busy i { background:var(--on); }
/* in the player: just under its bar, on the right; a dot alone on a phone */
html.playing #agDock { bottom:auto; top:calc(max(6px, env(safe-area-inset-top)) + 46px); right:var(--s2); height:28px; padding:0 10px; }
@media (max-width: 640px) { html.playing #agDock #dockText { display:none; } }
/* the brief to copy (accounts without the hosted agent) */
.mm-brief { position:relative; margin-top:var(--s2); }
.mm-brief pre, .mm-git pre { margin:0; max-height:260px; overflow:auto; padding:var(--s3); border-radius:var(--r-m); border:1px solid var(--line); background:var(--bg2); color:var(--ink2); font:var(--t-s)/1.55 var(--mono); white-space:pre-wrap; word-break:break-all; }
.mm-brief pre { padding-top:44px; } .mm-brief button { position:absolute; top:var(--s2); right:var(--s2); height:28px; }
#agentSheet .mm-brief pre { max-height:46vh; }

/* ---------- Mine ---------- */
#mine { padding-top:var(--s4); }
.mm-new { flex:0 1 380px; display:flex; align-items:center; gap:6px; margin:0; padding:3px 3px 3px var(--s3); border-radius:var(--r-m); border:1px solid var(--line2); background:var(--bg2); }
.mm-new:focus-within { border-color:var(--line3); }
.mm-pre { color:var(--dim); font:var(--t-b) var(--mono); white-space:nowrap; }
.mm-new input { flex:1; min-width:0; padding:5px 0; border:0; border-radius:0; background:none; box-shadow:none; color:var(--ink); font:var(--t-b) var(--mono); }
.mm-new .btn { height:28px; }
#mine .pg-head p#mmSub { font-family:var(--mono); font-size:var(--t-s); }
.mm-hint { margin:0; color:var(--dim); font-size:var(--t-m); }
.mm-list { display:flex; flex-direction:column; gap:6px; margin:var(--s3) 0 var(--s2); }
.mm-repo { border-radius:var(--r-m); border:1px solid var(--line); background:var(--card); overflow:hidden; }
.mm-repo.open { border-color:var(--line2); }
.mm-top { width:100%; display:flex; align-items:center; gap:var(--s3); padding:var(--s2) var(--s4); border:0; background:none; text-align:left; }
.mm-top:hover { background:var(--raise); } .mm-top .grow { flex:1; }
.mm-addr { color:var(--ink); font:var(--t-b) var(--mono); overflow:hidden; text-overflow:ellipsis; }
.mm-when { color:var(--dim); font:var(--t-s) var(--mono); white-space:nowrap; }
.mm-state.ok { color:var(--on); border-color:#4fd18b44; }
.mm-chev { color:var(--faint); font-size:var(--t-s); } .mm-repo.open .mm-chev { transform:rotate(180deg); }
.mm-body { padding:0 var(--s4); } .mm-repo.open .mm-body { padding:var(--s1) var(--s4) var(--s4); border-top:1px solid var(--line); }
.mm-body h4 { margin:var(--s4) 0 var(--s2); color:var(--dim); font:500 var(--t-s) var(--mono); text-transform:uppercase; letter-spacing:.06em; }
.mm-git { margin-top:var(--s2); color:var(--dim); font-size:var(--t-m); } .mm-git summary { margin-bottom:var(--s2); cursor:pointer; }
.mm-row { display:flex; align-items:center; gap:var(--s2); } .mm-row input { flex:1; min-width:0; font-family:var(--mono); }
.mm-danger .mm-row { margin-top:var(--s2); }
.mm-pushes { display:flex; flex-direction:column; gap:var(--s2); }
.mm-push { color:var(--ink2); font:var(--t-m) var(--mono); } .mm-push code { color:var(--dim); } .mm-push a { color:inherit; }
.mm-res { margin:2px 0 0 2px; font:var(--t-s) var(--mono); word-break:break-word; } .mm-res b { font-weight:500; }
.mm-res.ok { color:var(--on); } .mm-res.no { color:var(--bad); }

/* ---------- Files ---------- */
#resources { max-width:var(--w); margin:0 auto; padding:var(--s4) var(--s5) var(--s6); }
.rs-bar { display:flex; gap:var(--s3); align-items:center; margin:0 0 var(--s3); }
.rs-bar input { flex:1; min-width:0; height:34px; font-size:var(--t-b); }
.rs-use { flex:none; color:var(--dim); font:var(--t-s) var(--mono); }
.rs-drop { display:block; margin:0 0 var(--s3); padding:var(--s3); border:1px dashed var(--line2); border-radius:var(--r-l); color:var(--dim); font-size:var(--t-m); text-align:center; cursor:pointer; }
.rs-drop b { color:var(--ink); font-weight:500; } .rs-drop.over { border-color:var(--on); color:var(--ink); }
#resources.rs-none .rs-bar, #resources.rs-none .rs-detail { display:none; }
#resources.rs-none .rs-body { display:block; }
#resources.rs-none .rs-drop { padding:var(--s6) var(--s3); }
#resources:not(.rs-none) .rs-drop { padding:var(--s2); }
.rs-body { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr); gap:var(--s3); align-items:start; }
.rs-list, .rs-pick { display:flex; flex-direction:column; gap:var(--s1); }
.rs-row { width:100%; display:flex; gap:var(--s3); align-items:center; padding:var(--s2) var(--s3); border-radius:var(--r-m); border:1px solid var(--line); background:var(--card); color:var(--ink); text-align:left; }
.rs-row:hover { border-color:var(--line2); } .rs-row.sel { border-color:var(--line3); background:var(--raise); }
.rs-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.rs-name { font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rs-meta { color:var(--dim); font:var(--t-s) var(--mono); overflow:hidden; text-overflow:ellipsis; }
.rs-users, .rs-tag { flex:none; color:var(--on); font:var(--t-s) var(--mono); }
.rs-detail { position:sticky; top:calc(var(--bar) + var(--s3)); padding:var(--s4); border-radius:var(--r-l); border:1px solid var(--line); background:var(--card); }
.rs-dname input { width:100%; padding:4px 6px; border:1px solid transparent; background:transparent; font:600 var(--t-l) var(--sans); }
.rs-dname input:hover, .rs-dname input:focus { border-color:var(--line2); background:var(--bg2); }
.rs-props { display:grid; grid-template-columns:auto 1fr; gap:var(--s1) var(--s3); margin:var(--s2) 0 var(--s3); font-size:var(--t-m); }
.rs-props dt { color:var(--dim); } .rs-props dd { margin:0; } .rs-hash code { font-size:var(--t-xs); word-break:break-all; }
.rs-detail h4 { margin:var(--s3) 0 var(--s2); color:var(--dim); font:500 var(--t-s) var(--mono); text-transform:uppercase; letter-spacing:.06em; }
.rs-slots { display:flex; flex-direction:column; gap:6px; } .rs-slot { display:flex; align-items:center; gap:var(--s2); }
.rs-dot { width:8px; height:8px; flex:none; border-radius:50%; background:var(--line3); } .rs-dot.on { background:var(--on); }
.rs-mini { height:24px; padding:0 8px; font-size:var(--t-s); flex:none; }
.rs-acts { display:flex; flex-wrap:wrap; gap:var(--s2); justify-content:flex-end; margin-top:var(--s3); }
.rs-acts .danger { color:var(--bad); }
.rs-empty { padding:var(--s3) 0; color:var(--dim); font-size:var(--t-m); }
.rs-back { display:none; padding:0 0 var(--s2); border:0; background:none; color:var(--ink2); font-size:var(--t-b); }
#resSheet .rs-pick { max-height:50vh; overflow:auto; margin-top:var(--s2); }
.pick { display:flex; gap:var(--s3); overflow-x:auto; padding-bottom:6px; }
.pick button { min-width:130px; padding:var(--s3); border-radius:var(--r-l); border:1px solid var(--line); background:var(--raise); text-align:left; }
.pick button.sel { border-color:var(--acc); } .pick button small { display:block; color:var(--dim); font-size:var(--t-s); }
.seg { display:flex; gap:6px; } .seg button { flex:1; } .seg button.sel, .seg button.on { border-color:var(--line3); background:var(--raise); color:var(--ink); }

/* ---------- Docs (and every rendered README) ---------- */
#docs { max-width:760px; margin:0 auto; padding:var(--s4) var(--s5) var(--s6); }
.sv-md { padding:var(--s4) var(--s5) var(--s5); color:var(--ink2); font-size:15px; line-height:1.7; }
#docs .sv-md { padding:0 0 var(--s5); } #docs .sv-md h1:first-child { margin-top:0; font-size:var(--t-xl); }
.sv-md h1, .sv-md h2, .sv-md h3 { color:var(--ink); font-family:var(--sans); letter-spacing:-.015em; line-height:1.3; }
.sv-md h1 { margin:var(--s2) 0 var(--s4); font-size:var(--t-2xl); font-weight:650; }
.sv-md h2 { margin:var(--s6) 0 var(--s3); padding-bottom:var(--s2); border-bottom:1px solid var(--line); font-size:var(--t-xl); font-weight:600; }
.sv-md h3 { margin:var(--s5) 0 var(--s2); font-size:var(--t-l); font-weight:600; }
.sv-md strong { color:var(--ink); font-weight:600; }
.sv-md code { padding:1px 5px; border-radius:4px; background:var(--raise); color:var(--ink); font:.86em var(--mono); }
.sv-md pre { padding:var(--s3) var(--s4); border-radius:var(--r-m); border:1px solid var(--line); background:var(--bg2); overflow:auto; line-height:1.55; }
.sv-md pre code { padding:0; background:none; font-size:var(--t-m); color:var(--ink2); }
.sv-md a { color:var(--link); }
.sv-md table { display:block; overflow:auto; margin:var(--s3) 0; border-collapse:collapse; font-size:var(--t-b); }
.sv-md th, .sv-md td { padding:6px var(--s3); border:1px solid var(--line); text-align:left; } .sv-md th { background:var(--raise); color:var(--ink); font-weight:600; }
.sv-md ul, .sv-md ol { padding-left:22px; } .sv-md li { margin:3px 0; }
.sv-md blockquote { margin:var(--s3) 0; padding:0 var(--s4); border-left:2px solid var(--line3); color:var(--dim); }
.sv-md hr { border:0; border-top:1px solid var(--line); margin:var(--s5) 0; }

/* ---------- the player ---------- */
#player { position:fixed; inset:0; z-index:10; display:none; background:#000; touch-action:none; overscroll-behavior:none; }
#player.open { display:block; }
html.playing, html.playing body { overflow:hidden; overscroll-behavior:none; }
#player canvas { width:100%; height:100%; display:block; touch-action:none; }
#player .stagehost { position:absolute; inset:0; }
#player .stagehost > canvas { width:100%; height:100%; display:block; touch-action:none; }
#player .stagehost canvas.pix { object-fit:contain; image-rendering:pixelated; background:#000; }
/* over the picture: dark glass */
#pbar { position:absolute; left:0; right:0; top:0; display:flex; align-items:center; gap:6px; min-height:44px; padding:6px var(--s2); padding-top:max(6px, env(safe-area-inset-top)); background:#0a0b0de6; border-bottom:1px solid #ffffff14; }
#pbar .t { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#fff; font:600 var(--t-b) var(--sans); }
.pill { height:30px; background:transparent; border-color:#ffffff2e; color:#e9ebee; }
.pill:hover { background:#ffffff14; border-color:#ffffff4d; }
.pill.on, #pOnline.on { background:var(--on); border-color:var(--on); color:#06140c; }
#pDeps { position:absolute; left:var(--s2); top:calc(max(6px, env(safe-area-inset-top)) + 46px); display:flex; flex-wrap:wrap; gap:6px; max-width:70%; pointer-events:none; }
#pDeps .dep { pointer-events:auto; background:#000000cc; border-color:#ffffff24; }
#rewind { position:absolute; left:50%; bottom:56px; width:min(560px, calc(100% - 24px)); transform:translateX(-50%); display:none; align-items:center; gap:var(--s2);
  padding:4px var(--s2) 4px var(--s3); border-radius:var(--r-l); border:1px solid #ffffff1f; background:#0a0b0de6; }
#rewind.on { display:flex; }
#rewind button { height:28px; padding:0 8px; border:0; background:none; color:#fff; font:500 var(--t-m) var(--sans); }
#rewind .rt { flex:none; box-sizing:content-box; color:#fffc; font:var(--t-s) var(--mono); text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
/* the bar: played part green, the rest dim (a two-colour fill, not a gradient effect) */
#rwBar { flex:1; -webkit-appearance:none; appearance:none; height:4px; border-radius:2px; background:linear-gradient(90deg, var(--on) var(--pct, 100%), #ffffff2e var(--pct, 100%)); accent-color:var(--on); }
#rwBar::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:#fff; border:3px solid var(--on); }
#rwBar::-moz-range-thumb { width:12px; height:12px; border-radius:50%; background:#fff; border:3px solid var(--on); }
#player.rw #hint, html.view-typing #hint { display:none; }
#hint { position:absolute; right:var(--s2); bottom:var(--s2); max-width:55%; padding:5px 9px; border-radius:var(--r-m); background:#0a0b0dcc; color:#fffc; font:var(--t-s) var(--mono); }
#netbar { position:absolute; left:50%; top:calc(max(6px, env(safe-area-inset-top)) + 46px); transform:translateX(-50%); display:none; align-items:center; gap:var(--s2);
  max-width:calc(100% - 24px); padding:5px var(--s2) 5px var(--s3); border-radius:var(--r-l); border:1px solid #ffffff26; background:#000c; font:var(--t-m) var(--sans); }
#player.net #netbar { display:flex; } #player.net #pDeps, #player.net #pRewind { display:none; }
#netbar .dot { width:7px; height:7px; flex:none; border-radius:50%; background:var(--warn); } #netbar.on .dot { background:var(--on); } #netbar.bad .dot { background:var(--bad); }
#netText { white-space:nowrap; color:#e9ebee; font-variant-numeric:tabular-nums; }
#seats { display:flex; align-items:center; gap:var(--s1); overflow-x:auto; }
#seats span { width:24px; height:24px; flex:none; display:grid; place-items:center; border-radius:50%; color:#000; font:600 var(--t-xs) var(--sans); }
#seats span.me { outline:2px solid #fff; outline-offset:1px; } #seats .pill { flex:none; height:26px; }
.viewerr { position:absolute; left:50%; top:50%; max-width:min(86%, 420px); transform:translate(-50%, -50%); padding:var(--s3) var(--s4); border-radius:var(--r-l);
  border:1px solid var(--line2); background:#0c0d10e6; color:var(--ink); font-size:var(--t-m); line-height:1.5; text-align:center; pointer-events:none; }
.view-type { font-family:var(--mono) !important; border-radius:var(--r-m) !important; }
/* touch */
#touch { display:none; } body.touch #touch { display:block; } body.touch #hint .kb { display:none; } body:not(.touch) #hint .tc { display:none; }
body.touch #rewind { bottom:212px; }
#stick { position:absolute; left:20px; bottom:70px; width:120px; height:120px; border-radius:50%; background:#ffffff12; border:1.5px solid #ffffff30; touch-action:none; }
#knob { position:absolute; left:35px; top:35px; width:50px; height:50px; border-radius:50%; background:#ffffff4d; }
.tb { position:absolute; width:62px; height:62px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#ffffff1a; border:1.5px solid #ffffff38; color:#fff; font:600 var(--t-l) var(--mono); touch-action:none; }
#tA { right:22px; bottom:80px; } #tB { right:96px; bottom:62px; } #tZ { right:40px; bottom:150px; }
/* a command's page: the whole window a terminal */
#player.cli { background:var(--term, #07080a); touch-action:auto; --term:#07080a; --term2:#0b0d10; }
#player.cli #pOnline, #player.cli #pRewind, #player.cli #pSound, #player.cli #touch, #player.cli #hint, #player.cli #rewind, #player.cli #pDeps { display:none !important; }
#player.cli #pbar { background:var(--term); border-bottom:1px solid var(--line); }
.cli-page { position:absolute; inset:0; display:flex; flex-direction:column; color:var(--ink); font:var(--t-b)/1.6 var(--mono); }
.cli-wrap { max-width:var(--w); margin:0 auto; padding:0 var(--s5); }
.cli-scroll { flex:1; overflow:auto; padding-top:calc(max(var(--s3), env(safe-area-inset-top)) + 56px); -webkit-overflow-scrolling:touch; }
.cli-intro { margin:var(--s1) 0 var(--s4); color:var(--dim); font:var(--t-b)/1.55 var(--sans); }
.cli-run { margin-bottom:var(--s4); } .cli-run .cmd { color:var(--on); white-space:pre-wrap; word-break:break-all; }
.cli-run .tout { padding:2px 0 0; overflow-x:auto; }
.cli-bottom { padding:var(--s2) 0 max(var(--s3), env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--term2); }
.cli-bottom .tex { padding:0 0 var(--s2); } .cli-bottom .tin { border:0; margin-bottom:6px; } .cli-bottom .tin summary { padding:2px 0; }
.cli-bottom .tstdin { max-height:30vh; border:1px solid var(--line); border-radius:var(--r-m); }
.cli-line { display:flex; align-items:center; gap:var(--s2); }
.cli-line input.targs { font:var(--t-l) var(--mono); padding:var(--s2) 0; }

/* ---------- the source browser (full screen) ---------- */
#srcView { position:fixed; inset:0; z-index:12; display:flex; flex-direction:column; background:var(--bg); color:var(--ink); font-size:var(--t-b); }
body.src-open { overflow:hidden; }
.sv-top { display:flex; align-items:center; gap:var(--s3); padding:var(--s2) var(--s4); padding-top:max(var(--s2), env(safe-area-inset-top)); border-bottom:1px solid var(--line); background:var(--bg2); }
.sv-back { width:32px; padding:0; font-size:var(--t-xl); }
.sv-crumbs { flex:1; min-width:0; display:flex; align-items:center; gap:var(--s1); overflow-x:auto; white-space:nowrap; font:var(--t-b) var(--mono); scrollbar-width:none; }
.sv-crumbs::-webkit-scrollbar { display:none; }
.sv-crumbs a { color:var(--ink2); } .sv-crumbs a:hover { color:var(--ink); }
.sv-crumbs .sep, .sv-crumbs .scope { color:var(--faint); } .sv-crumbs b { color:var(--ink); font-weight:600; }
.sv-actions { display:flex; gap:6px; flex:none; }
.sv-btn.sm { height:26px; padding:0 8px; font-size:var(--t-s); }
.sv-btn .oi { margin-right:2px; }
.sv-meta { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2) var(--s3); padding:var(--s3) var(--s4); border-bottom:1px solid var(--line); color:var(--dim); font-size:var(--t-m); }
.sv-meta .sv-icon { width:28px; height:28px; border-radius:7px; }
.sv-meta .ttl { color:var(--ink); font:600 var(--t-l) var(--sans); }
.sv-meta .about { flex-basis:100%; margin-top:-2px; color:var(--ink2); }
.sv-meta select { height:24px; padding:0 6px; font:var(--t-s) var(--mono); }
.sv-meta a.chip { text-decoration:none; } .sv-meta a.chip:hover { border-color:var(--link); color:var(--link); }
.sv-meta .chip.cl { color:var(--warn); border-color:#e6b45055; } .sv-meta .chip .oi { width:12px; height:12px; }
.sv-meta .badge-old { color:var(--warn); border-color:#e6b45055; }
.sv-body { flex:1; min-height:0; display:flex; }
.sv-side { width:290px; flex:none; display:flex; flex-direction:column; min-height:0; border-right:1px solid var(--line); background:var(--bg); }
.sv-search { padding:var(--s3); border-bottom:1px solid var(--line); }
.sv-search input { width:100%; height:32px; padding:0 var(--s3); font-size:var(--t-m); }
.sv-tree { flex:1; overflow:auto; padding:6px 0; font:var(--t-m) var(--mono); }
.sv-tree .row { display:flex; align-items:center; gap:6px; padding:3px var(--s3) 3px calc(var(--s3) + var(--d) * 14px); color:var(--ink2); white-space:nowrap; text-decoration:none; cursor:pointer; }
.sv-tree .row:hover { background:var(--raise); color:var(--ink); } .sv-tree .row.sel { background:var(--hover); color:var(--ink); box-shadow:inset 2px 0 var(--on); }
.sv-tree .row .ic, .sv-tree .row .ch { width:16px; height:16px; flex:none; display:inline-flex; color:var(--faint); }
.sv-tree .row .ch { width:12px; } .sv-tree .row .ch svg { width:12px; height:12px; margin-top:2px; }
.sv-tree .row.dir .ic { color:var(--link); }
.sv-tree .row .nm { overflow:hidden; text-overflow:ellipsis; }
.sv-tree .row mark, .sv-hits mark { background:#e6b45040; color:inherit; border-radius:2px; }
.oi { display:inline-block; flex:none; vertical-align:text-bottom; } .oi.dir { color:var(--link); } .oi.code, .oi.book { color:var(--faint); } .oi.cube { color:#c792ea; }
.sv-sidefoot { padding:var(--s2) var(--s3); border-top:1px solid var(--line); color:var(--faint); font:var(--t-s) var(--mono); }
.sv-main { flex:1; min-width:0; overflow:auto; }
.sv-pane { max-width:1100px; margin:0 auto; padding:var(--s4); }
.sv-box { margin-bottom:var(--s4); border-radius:var(--r-l); border:1px solid var(--line); overflow:hidden; background:var(--card); }
.sv-boxhd { display:flex; align-items:center; flex-wrap:wrap; gap:var(--s3); padding:var(--s2) var(--s3); border-bottom:1px solid var(--line); background:var(--bg2); color:var(--dim); font-size:var(--t-m); }
.sv-boxhd .nm { color:var(--ink); font:600 var(--t-m) var(--mono); } .sv-boxhd .grow { flex:1; }
.sv-boxhd .seg { display:inline-flex; gap:0; border:1px solid var(--line2); border-radius:var(--r-s); overflow:hidden; }
.sv-boxhd .seg button { height:24px; padding:0 10px; border:0; border-radius:0; font-size:var(--t-s); }
.sv-list { width:100%; border-collapse:collapse; font-size:var(--t-b); }
.sv-list td { padding:7px var(--s3); border-top:1px solid var(--line); white-space:nowrap; } .sv-list tr:first-child td { border-top:0; }
.sv-list tr:hover td { background:var(--raise); }
.sv-list a { color:var(--ink); font-family:var(--mono); font-size:var(--t-m); } .sv-list a:hover { color:var(--link); }
.sv-list .ic { width:22px; padding-right:0; color:var(--faint); } .sv-list .dir .ic { color:var(--link); }
.sv-list .sz { width:1%; color:var(--faint); font:var(--t-s) var(--mono); text-align:right; }
.sv-list .note { width:60%; max-width:0; overflow:hidden; text-overflow:ellipsis; color:var(--dim); font-size:var(--t-s); }
/* code: a calm palette on the page's colours */
.sv-code { overflow:auto; background:var(--bg2); font:var(--t-m)/21px var(--mono); tab-size:4; }
.sv-code table { min-width:100%; border-collapse:collapse; }
.sv-code td.ln { width:1%; min-width:50px; padding:0 var(--s3) 0 var(--s2); color:var(--faint); text-align:right; vertical-align:top; white-space:nowrap; user-select:none; cursor:pointer; }
.sv-code td.ln:hover { color:var(--ink); }
.sv-code td.lc { padding:0 var(--s4) 0 var(--s2); white-space:pre; vertical-align:top; }
.sv-code tr.hl td { background:#e6b4501f; } .sv-code tr.hl td.ln { color:var(--ink); }
.sv-code .kw, pre.code .kw { color:#c792ea; } .sv-code .st, pre.code .st { color:#c3e88d; } .sv-code .cm, pre.code .cm { color:#5c6370; font-style:italic; }
.sv-code .nu, pre.code .nu { color:#f78c6c; } .sv-code .fn, pre.code .fn { color:#82aaff; } .sv-code .pp, pre.code .pp { color:#89ddff; } .sv-code .ty, pre.code .ty { color:#ffcb6b; }
.sv-code a.sym { color:inherit; text-decoration:underline dotted var(--faint); text-underline-offset:3px; } .sv-code a.sym:hover { color:var(--link); }
pre.code { padding:var(--s3); border-radius:var(--r-m); background:var(--bg2); overflow:auto; font:var(--t-m)/1.55 var(--mono); }
.sv-empty { padding:40px var(--s4); color:var(--dim); text-align:center; }
.sv-bin { padding:var(--s4); color:var(--dim); font-size:var(--t-m); line-height:1.6; } .sv-bin code { color:var(--ink); font-size:var(--t-s); }
.sv-hits .file { padding:var(--s2) var(--s3); border-top:1px solid var(--line); background:var(--bg2); font:600 var(--t-m) var(--mono); } .sv-hits .file a { color:var(--link); }
.sv-hits .hit { display:flex; gap:var(--s3); padding:2px var(--s3); color:var(--ink2); font:var(--t-m)/21px var(--mono); white-space:pre; overflow:hidden; text-decoration:none; }
.sv-hits .hit:hover { background:var(--raise); } .sv-hits .hit .n { min-width:40px; flex:none; color:var(--faint); text-align:right; }
.sv-graph { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:var(--s2); padding:var(--s3); }
.sv-graph a { display:block; padding:var(--s2) var(--s3); border-radius:var(--r-m); border:1px solid var(--line); background:var(--bg2); color:var(--ink); text-decoration:none; }
.sv-graph a:hover { border-color:var(--line3); } .sv-graph a small { display:block; margin-top:2px; color:var(--dim); font:var(--t-xs) var(--mono); }
.sv-exports { display:flex; flex-wrap:wrap; gap:6px; padding:var(--s3); }
.sv-exports a { color:#c792ea; text-decoration:none; } .sv-exports a:hover { border-color:#c792ea; }
.sv-sidetoggle { display:none !important; }

/* ---------- smaller screens ---------- */
@media (max-width: 960px) { .card > .stage:not(.term-stage) { min-height:150px; } .tabs button { padding:0 8px; } .tabs .sep { margin:0 4px; } .new-btn kbd { display:none; } .card { grid-template-columns:240px minmax(0, 1fr); } .card.cli { grid-template-columns:340px minmax(0, 1fr); } }
/* phones and narrow windows: one column; the menu (the logo, >_, New, the account and the menu button stay; the tabs drop down) */
@media (max-width: 760px) {
  .menu-btn { display:block; }
  .topbar { padding:0 var(--s3); gap:6px; }
  .tabs { display:none; position:fixed; left:0; right:0; top:var(--bar); z-index:6; flex-direction:column; align-items:stretch; gap:0;
    padding:var(--s2) var(--s3) var(--s3); background:var(--bg); border-bottom:1px solid var(--line2); }
  body.menu-open .tabs { display:flex; }
  .tabs button { height:44px; padding:0 var(--s3); text-align:left; font-size:var(--t-l); color:var(--ink2); }
  .tabs button.sel { background:var(--raise); color:var(--ink); }
  .tabs .sep { width:auto; height:1px; margin:var(--s2) var(--s3); }
  .mark { width:96px; height:26px; margin-right:0; }
  .card, .card.cli { grid-template-columns:minmax(0, 1fr); }
  .stage { aspect-ratio:16/10; border-right:0; border-bottom:1px solid var(--line); }
  .card > .stage:not(.term-stage) { aspect-ratio:16/10; min-height:0; height:auto; }
  .stage.term-stage { min-height:150px; max-height:220px; }
  .card > .meta { padding:var(--s3); }
  .sv-side { position:absolute; top:0; bottom:0; left:0; z-index:3; width:min(86vw, 320px); transform:translateX(-100%); border-right:1px solid var(--line2); }
  #srcView.side-open .sv-side { transform:none; }
  .sv-body { position:relative; } .sv-sidetoggle { display:inline-flex !important; }
  .sv-pane { padding:var(--s3); } .sv-list .note { display:none; }
  .sv-md { padding:var(--s3) var(--s4); font-size:var(--t-b); }
  .sv-meta { padding:var(--s2) var(--s3); gap:6px var(--s3); }
  .sv-meta .about { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:var(--t-m); }
  .sv-top { padding:var(--s2) var(--s3); gap:var(--s2); }
  .rs-body { grid-template-columns:1fr; }
  #resources.has-sel .rs-list, #resources.has-sel .rs-drop, #resources.has-sel .rs-bar { display:none; }
  #resources:not(.has-sel) .rs-detail { display:none; } .rs-back { display:block; } .rs-detail { position:static; }
}
@media (max-width: 640px) {
  #feed, #mine, #resources, #docs { padding-left:var(--s3); padding-right:var(--s3); }
  #feed { padding-top:var(--s3); }
  .new-btn, .sh-btn, .acct-btn { padding:0 9px; } .acct-btn { max-width:28vw; }
  .card > .stage:not(.term-stage) { aspect-ratio:2/1; }
  #pbar #pSrc { display:none; }
  #pbar { gap:4px; } #pbar .pill { padding:0 9px; } #pbar .t { min-width:48px; }
  #pAgent .l { display:none; } #pAgent .s { display:inline; }
  #pDeps { flex-wrap:nowrap; overflow:hidden; max-width:calc(100% - 24px); } #pDeps .dep:not(:first-child) { display:none; }
  .sheet { padding:var(--s4) var(--s4) max(var(--s4), env(safe-area-inset-bottom)); }
  .sheet.ag-sheet { height:calc(100dvh - var(--bar)); border-radius:0; }
  .ag-wrap { padding:var(--s3) var(--s3) max(var(--s3), env(safe-area-inset-bottom)); }
  .ag-e.you { max-width:90%; }
  .cli-wrap { padding:0 var(--s3); } .cli-page { font-size:var(--t-m); }
  .mm-new { flex:1 1 100%; } .mm-when { display:none; }
  #docs .sv-md { font-size:var(--t-b); }
  /* nothing wider than the screen: long words wrap; tables and code scroll in their own box */
  .sv-md, .blurb, .facts, .ag-e, .mm-res { overflow-wrap:anywhere; }
  .sv-md pre, .sv-md table { max-width:100%; }
}
@media (max-width: 520px) { #netText .x { display:none; } }
@media (pointer: coarse) { kbd, #agDock kbd, .new-btn kbd { display:none; } .rs-drop { display:none !important; } }

/* ================= stark, quiet (2026-10-24): the classic page with care. Square and ruled; one button per place (the
   thing you came for, inverted), everything else is words. Underlines on hover, except links inside prose. One accent:
   blue for links in text. Later rules here win over the above. */
body { font-feature-settings:normal; }
/* buttons: square. The one per place is inverted; the rest are plain words */
.btn, label.btn, button.primary, .actions button, .ag-btn, .sv-btn, .rs-acts button, .rs-mini, .mm-brief button, .acct-form .primary, button.danger, .trun, .sh-btn, .new-btn, .pill, .tex button, .seg button, .sv-back, .acct-btn, .menu-btn, #agDock {
  border-radius:0; border:1px solid var(--line2); background:var(--bg); color:var(--ink); font-weight:500; }
.actions button:hover, .ag-btn:hover:not(:disabled), .sv-btn:hover, .rs-acts button:hover, .rs-mini:hover, .pill:hover, .tex button:hover, .seg button:hover, .sv-back:hover, .menu-btn:hover, #agDock:hover { background:var(--bg); border-color:var(--ink); color:var(--ink); }
.primary, .btn.primary, .actions button.primary, .ag-in .primary, .mm-new .primary, .acct-form .primary, .new-btn, .sv-btn.primary, .mm-brief button {
  background:var(--ink); border-color:var(--ink); color:#000; font-weight:600; }
.primary:hover, .btn.primary:hover, .actions button.primary:hover, .new-btn:hover, .sv-btn.primary:hover, .mm-brief button:hover { background:#fff; border-color:#fff; color:#000; }
/* words that act: a button that reads as text */
.lnk, button.lnk, .actions .lnk { height:auto; padding:0; border:0; background:none; color:var(--dim); font:500 var(--t-m) var(--sans); text-decoration:none; cursor:pointer; }
.lnk:hover, button.lnk:hover, .actions .lnk:hover { background:none; color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.trun { background:var(--on); border-color:var(--on); color:#000; } .trun:hover { background:#5ef59c; border-color:#5ef59c; }
button.danger { background:var(--bg); border-color:var(--bad); color:var(--bad); } button.danger:hover:not(:disabled) { background:var(--bad); color:#000; }
input[type=text], input[type=email], input[type=password], input[type=search], textarea, select { border-radius:0; background:var(--bg); border-color:var(--line2); }
input:focus, textarea:focus, select:focus { border-color:var(--ink2); }
:focus-visible { outline:1px solid var(--ink); outline-offset:2px; }
button:focus-visible, a:focus-visible, summary:focus-visible { box-shadow:none; }
/* links: blue and underlined in prose; elsewhere (navigation, names) plain until hovered */
a { text-decoration:none; } a:hover { text-decoration:underline; text-underline-offset:3px; color:var(--ink); }
.sv-md a, .blurb a, .lesson a, .acct-switch a { text-decoration:underline; text-decoration-color:#6ea8ff66; } .sv-md a:hover { text-decoration-color:currentColor; }

/* the top bar: the name; the sections as words (the one you're on in white); one button (New) */
.topbar { border-bottom-color:var(--line); }
.tabs { gap:var(--s4); }
.tabs a, .tabs a:visited { display:inline-flex; align-items:center; height:30px; padding:0; color:var(--dim); font:500 var(--t-b) var(--sans); white-space:nowrap; flex:none; }
.tabs a:hover { color:var(--ink); text-decoration:none; }
.tabs a.sel { color:var(--ink); }
.tabs .sep { margin:0; background:var(--line2); }
.sh-btn, .acct-btn { border-color:transparent; background:none; color:var(--dim); padding:0 6px; }
.sh-btn:hover, .acct-btn:hover { border-color:transparent; background:none; color:var(--ink); }
.sh-btn { font-family:var(--mono); }
.acct-btn.signed { font-family:var(--mono); color:var(--ink2); }
.new-btn kbd { color:#0009; opacity:1; }

/* the feed: rows split by one rule; the picture has no frame (its own edge, on a near-black ground) */
#feed { gap:0; }
#feed > .pg-head { margin-bottom:var(--s3); }
.card { overflow:visible; border:0; border-top:1px solid var(--line); border-radius:0; background:transparent; padding:var(--s4) 0; gap:var(--s4); }
.card:hover { border-color:var(--line); }
.stage, .card > .stage { border:0; background:var(--bg2); }
.card > .stage:not(.term-stage) { height:auto; aspect-ratio:auto; min-height:175px; align-self:stretch; }
.card > .meta { padding:0; }
img.mi { display:none; }
.head { gap:0; }
.title, a.title, a.title:visited { color:var(--ink); font:600 var(--t-l)/1.3 var(--sans); }
.addr { margin-top:1px; color:var(--faint); }
.blurb { margin:var(--s2) 0; color:var(--ink2); }
.facts { color:var(--faint); } .facts i { color:var(--line3); margin:0 5px; }
.facts a, .facts a:visited { color:var(--dim); } .facts a:hover { color:var(--ink); }
.actions { align-items:center; gap:var(--s4); margin-top:var(--s3); }
/* labels: small caps words, no boxes */
.kind, .live, .mm-state { height:auto; padding:0; border:0; color:var(--faint); font:var(--t-xs) var(--mono); text-transform:uppercase; letter-spacing:.06em; }
.live { color:var(--on); } .live::before { border-radius:0; }
.mm-state.ok { color:var(--on); }
.dep, .pk { border-radius:0; border-color:var(--line2); }
.lesson { border-left:1px solid var(--ink); } .lesson .n { border-radius:0; background:none; color:var(--ink); border:1px solid var(--line3); }
.stage .shown { background:#000; }
img.pi { border-radius:0; }

/* page heads */
.pg-head { align-items:flex-end; }
.pg-head h2 { font:700 var(--t-2xl)/1.1 var(--sans); letter-spacing:-.02em; }
.pg-head p { color:var(--dim); }

/* sheets and the drawer: plain boxes */
.sheet { border:1px solid var(--line2); border-bottom:0; background:var(--bg); }
.sheet.ag-sheet { border:0; border-top:1px solid var(--line2); }
#scrim { background:#000c; }
.sh-list { margin:0; border-top:1px solid var(--line); }
.sh-item, a.sh-item, a.sh-item:visited { height:40px; padding:0; border:0; border-bottom:1px solid var(--line); border-radius:0; background:none; color:var(--ink); font:500 var(--t-b) var(--sans); }
.sh-item:hover { background:none; color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
button.sh-item { color:var(--dim); }
.dr-tab { border-radius:0; padding:0; margin-right:var(--s4); color:var(--dim); }
.dr-tab:hover { color:var(--ink); } .dr-tab.sel { background:none; color:var(--ink); }
.ag-e.you { border-radius:0; background:var(--raise); }
.ag-sug, .ag-sug button { border-radius:0; }
#paneShell { border-radius:0; border-color:var(--line); }
#toast { border-radius:0; background:var(--ink); color:#000; border-color:var(--ink); font-weight:500; }

/* Mine: a list under the head, then the cards */
.mm-new { border-radius:0; background:var(--bg); border-color:var(--line2); }
#mine .pg-head { margin-bottom:var(--s3); }
.mm-list { gap:0; margin:0 0 var(--s4); }
.mm-repo, .mm-repo.open { border:0; border-top:1px solid var(--line); border-radius:0; background:transparent; }
.mm-top { padding:var(--s2) 0; } .mm-top:hover { background:none; } .mm-top:hover .mm-addr { text-decoration:underline; text-underline-offset:3px; }
.mm-addr { color:var(--ink); }
.mm-repo.open .mm-body { padding:var(--s1) 0 var(--s4); border-top:0; }

/* Files */
.rs-row { border-radius:0; border:0; border-top:1px solid var(--line); background:transparent; padding:var(--s2) 0; }
.rs-row:hover { background:none; } .rs-row:hover .rs-name { text-decoration:underline; text-underline-offset:3px; }
.rs-row.sel { background:none; } .rs-row.sel::before { content:'▸'; margin-right:var(--s2); color:var(--ink); }
.rs-detail { border-radius:0; background:transparent; border-color:var(--line); }
.rs-drop { border-radius:0; border-color:var(--line2); }

/* docs and every README */
.sv-md h1, .sv-md h2 { font-weight:700; } .sv-md h2 { border-bottom-color:var(--line); }
.sv-md code { border-radius:0; } .sv-md pre { border-radius:0; border-color:var(--line); }
.sv-md a:visited { color:var(--visited); }

/* the player: a black bar of words over the picture; the state (Online, Rewind) in its colour */
#pbar { min-height:40px; background:#000; border-bottom:1px solid var(--line); gap:var(--s4); padding-left:var(--s3); padding-right:var(--s3); }
.pill, .pill:hover { height:auto; padding:0; border:0; background:none; color:var(--dim); font:500 var(--t-m) var(--sans); }
.pill:hover { color:#fff; }
#pClose { color:#fff; font-size:var(--t-l); padding:0 4px 0 0; }
.pill.on, #pOnline.on { background:none; color:var(--on); }
#player.rw #pRewind { color:var(--warn); }
#pDeps { top:calc(max(6px, env(safe-area-inset-top)) + 44px); }
#pDeps .dep { background:#000; }
#rewind, #netbar, #hint, .viewerr { border-radius:0; background:#000; border-color:var(--line2); }
#netbar, #rewind { top:auto; } #netbar { top:calc(max(6px, env(safe-area-inset-top)) + 44px); }
#rwBar::-webkit-slider-thumb { border-radius:0; } #rwBar::-moz-range-thumb { border-radius:0; }
#rewind button { color:#fff; }
#seats .pill { color:var(--link); }
#stick, #knob, .tb { border-radius:50%; }
html.playing #agDock { top:calc(max(6px, env(safe-area-inset-top)) + 44px); }

/* the source browser */
.sv-box { border-radius:0; border-color:var(--line); background:transparent; }
.sv-boxhd { background:var(--bg); border-bottom-color:var(--line); }
.sv-list a, .sv-list a:visited, .sv-tree .row { color:var(--ink2); } .sv-list a:hover { color:var(--ink); }
.sv-tree .row.sel { box-shadow:none; background:var(--raise); color:var(--ink); }
.sv-graph a { border-radius:0; } .sv-search input { border-radius:0; }

/* terminals stay what they are */
.term, #paneShell, .cli-page, #player.cli { --term:#000; --term2:#0a0a0a; }

@media (max-width: 760px) {
  .tabs { gap:0; }
  .tabs a, .tabs a:visited { height:44px; padding:0 var(--s3); font-size:var(--t-l); border-bottom:1px solid var(--line); }
  .tabs .sep { display:none; } .tabs a:last-child { border-bottom:0; }
  .card { padding:var(--s3) 0; gap:var(--s3); }
  .card > .stage:not(.term-stage) { aspect-ratio:2/1; }
  #pbar { gap:var(--s3); }
}

/* quieter still: no shortcut text inside the button (it's in its tooltip), no icon on a loading picture, the
   optional files as a word, one rule between the account list and its danger */
.new-btn kbd { display:none; }
.pk, .pk.have { height:auto; padding:0; border:0; background:none; color:var(--dim); font:var(--t-s) var(--mono); }
.pk:hover { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.pk.have { color:var(--on); }
.mm-danger, .acct-danger { border-top:0; }
.sh-list + .acct-danger { margin-top:var(--s3); }
/* inline code: the mono face says it; no box */
.sv-md code, .blurb code, .cli-intro code { padding:0; background:none; color:var(--ink); font-size:.9em; }
.sv-md pre code { color:var(--ink2); }
@media (max-width: 760px) {
  .menu-btn { border-color:transparent; } .menu-btn:hover { border-color:transparent; }
  .card > .stage:not(.term-stage) { aspect-ratio:16/9; }
  .actions { margin-top:var(--s2); }
}
/* the player's hint: words on the picture's edge, no box */
#hint { background:#000000b3; border:0; color:var(--dim); }

/* the picture while it loads: its icon and what it's doing, centred, in the space the picture will take */
.stage .poster { gap:var(--s3); color:var(--dim); font:var(--t-s) var(--mono); }
.stage .poster img.pi { width:44px; height:44px; border-radius:0; opacity:.9; }
@media (max-width: 760px) { .card > .stage:not(.term-stage) { aspect-ratio:16/9; min-height:0; align-self:auto; } }
/* the feed starts at once: the first row's rule is the top bar's */
#feed { padding-top:0; }
#feed > .card:first-child { border-top:0; }
#mine:not([hidden]) + #feed > .card:first-child { border-top:1px solid var(--line); }

/* ===== terminals: one size, one face. Every part (prompt, input, output, errors, hints, examples, stdin, exit line)
   is the terminal's own font at its own size; what differs is colour. Each terminal sets --tf once:
   the cards' (small), the shell's and a command's page (the reading size). Inputs are 16px on touch screens
   (below that, iOS zooms the page when one is focused), so there the whole terminal is 16px. */
.term { --tf: var(--t-m); }
#paneShell, .cli-page { --tf: var(--t-b); }
@media (pointer: coarse) { .term, #paneShell, .cli-page { --tf: 16px; } }
.term, #paneShell, .cli-page,
.term *, #paneShell *, .cli-page * { font-family:var(--mono) !important; font-size:var(--tf) !important; line-height:1.55 !important; font-weight:400; letter-spacing:0; }
.term b, #paneShell b, .cli-page b { font-weight:600; }
/* what tells the parts apart: colour */
.tout .meta, .sh-run > .meta, .sh-run .tout.meta, .tin summary, .cli-intro { color:var(--faint); }
.tex button { height:auto; padding:0; border:0; background:none; color:var(--dim); text-decoration:none; }
.tex button:hover { background:none; color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.tex { gap:2px var(--s3); }
.trun { font-weight:600 !important; height:auto; padding:1px 10px; }
/* the input row and everything else share one rhythm */
input.sh-in, .cli-line input.targs, .tline .targs { padding:var(--s1) 0; }
.cli-intro { margin:var(--s1) 0 var(--s3); }
.tex { gap:2px 3ch; }   /* the examples: a clear gap between them, in the terminal's own unit */

/* ===== one picture shape: every module's picture is the same 16:10 box (in every tab, on every screen). What
   doesn't fit is letterboxed (fixed-size screens: black bars); commands are a terminal in the same box. A row's
   height comes from its text; the box sits at the top of the row. */
.card, .card.cli { grid-template-columns:280px minmax(0, 1fr); }
.card > .stage, .card > .stage:not(.term-stage), .card > .stage.term-stage { aspect-ratio:16/10; height:auto; min-height:0; max-height:none; align-self:start; }
.stage .host > canvas, .stage canvas { object-fit:contain; }
/* the terminal in the box: output scrolls, the command line stays at the bottom */
.stage.term-stage .term { position:absolute; inset:0; display:flex; flex-direction:column; }
.stage.term-stage .tout { flex:1; min-height:0; overflow:auto; padding:var(--s2) var(--s3); border:0; }
.stage.term-stage .tline { flex:none; border:0; border-top:1px solid var(--line); padding:4px var(--s2) 4px var(--s3); }
.card .tex { display:flex; flex-wrap:wrap; gap:2px 2ch; margin:0 0 var(--s2); padding:0; font:var(--t-s) var(--mono); }
.card .tex .lnk { font:var(--t-s) var(--mono); color:var(--dim); }
@media (max-width: 960px) { .card, .card.cli { grid-template-columns:240px minmax(0, 1fr); } }
@media (max-width: 760px) {
  .card, .card.cli { grid-template-columns:minmax(0, 1fr); }
  .card > .stage, .card > .stage:not(.term-stage), .card > .stage.term-stage { aspect-ratio:16/10; }
}
/* on a phone the card terminal is the small size too (it's a picture there; its input is the page's on Open) */
@media (pointer: coarse) { .card .term { --tf: var(--t-m); } .card .term input.targs { font-size:16px !important; } }

/* ===== the feed: one big column. Each module is its picture (or its terminal), the column's full width at 16:10,
   with what it is underneath: title and address, a line of description, the facts, the actions. Scroll through. */
#feed { max-width:860px; gap:0; padding-top:var(--s4); }
#mine { max-width:860px; }
.card, .card.cli { display:block; grid-template-columns:none; padding:0 0 var(--s6); border:0; }
#feed > .card:first-child, #mine:not([hidden]) + #feed > .card:first-child { border-top:0; }
.card > .stage, .card > .stage:not(.term-stage), .card > .stage.term-stage { width:100%; aspect-ratio:16/10; margin:0 0 var(--s3); }
.card > .meta { padding:0; }
.card .head { display:flex; align-items:baseline; gap:var(--s3); }
.card .hd-t { display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap; min-width:0; }
.card .row { flex:none; }
.card .title { font:600 var(--t-l)/1.3 var(--sans); }
.card .addr { margin:0; }
.card .blurb { margin:var(--s1) 0 var(--s2); -webkit-line-clamp:2; max-width:70ch; }
.card .facts { margin:0 0 var(--s3); }
.card .actions { margin-top:0; }
/* the terminal at this size reads like one */
.card .term { --tf: var(--t-b); }
.stage.term-stage .tout { padding:var(--s3) var(--s4); }
.stage.term-stage .tline { padding:6px var(--s3) 6px var(--s4); }
/* the picture's loading state, bigger */
.stage .poster img.pi { width:56px; height:56px; }
@media (max-width: 960px) { .card, .card.cli { grid-template-columns:none; } }
@media (max-width: 760px) {
  #feed { padding-top:var(--s3); }
  .card, .card.cli { padding-bottom:var(--s5); }
  /* the picture to the screen's edges; the text in the column */
  .card > .stage, .card > .stage:not(.term-stage), .card > .stage.term-stage { width:auto; margin:0 calc(-1 * var(--s3)) var(--s3); }
  .card .head { display:block; } .card .hd-t { display:block; }
}
@media (pointer: coarse) { .card .term { --tf: var(--t-m); } }
/* a command in the big feed: output fills the box from the top, the command line under it is the box's bottom edge.
   Short output leaves room: the box is a little shorter than a picture's (3:1.4), so it doesn't read as empty */
.card > .stage.term-stage { aspect-ratio:16/7; border:1px solid var(--line); background:var(--term); }
@media (max-width: 760px) { .card > .stage.term-stage { aspect-ratio:4/3; margin-left:0; margin-right:0; } }
/* pictures that are smaller than the box (fixed-size screens) sit centred on the near-black, the box's edge
   visible, so a letterboxed picture reads as framed, not floating */
.card > .stage:not(.term-stage) { background:var(--bg2); }

/* the top bar stays put: fixed to the window (sticky came loose in iOS Safari as its bars moved); the page
   starts under it */
.topbar { position:fixed; left:0; right:0; top:0; }
body { padding-top:var(--bar); }
html { scroll-padding-top:calc(var(--bar) + var(--s3)); }
html.playing body, body.src-open { padding-top:0; }
.tabs { top:var(--bar); }
/* each post: its name, then its picture (with a thin edge, so a letterbox the colour of the page still has a
   border), then the rest */
.card > .head { margin:0 0 var(--s2); }
.card > .stage, .card > .stage:not(.term-stage), .card > .stage.term-stage { border:1px solid var(--line2); }
@media (max-width: 760px) {
  .card > .stage, .card > .stage:not(.term-stage) { margin-left:0; margin-right:0; }
}

/* the credit for the logo's photo (its licence asks for one): the end of Docs, small */
#docs .credit { margin-top:var(--s6); padding-top:var(--s3); border-top:1px solid var(--line); color:var(--faint); font:var(--t-s) var(--mono); }
#docs .credit a { color:var(--dim); }

/* ===== the view switch (Feed | List), in the top bar beside the sections */
.view-tg { display:inline-flex; flex:none; margin-left:var(--s4); border:1px solid var(--line2); }
.view-tg button { height:26px; padding:0 9px; border:0; background:none; color:var(--dim); font:500 var(--t-s) var(--sans); }
.view-tg button + button { border-left:1px solid var(--line2); }
.view-tg button:hover { color:var(--ink); }
.view-tg button[aria-pressed="true"] { background:var(--raise); color:var(--ink); }
#player.open ~ * .view-tg { display:none; }

/* ===== list view: compact rows. A small live picture on the left (16:10, framed), then the name and address on
   one line, one line of description, the facts and actions on one line. Rows split by a rule. */
body.list-view #feed { max-width:var(--w); }
body.list-view .card, body.list-view .card.cli { display:grid; grid-template-columns:176px minmax(0, 1fr); grid-template-rows:auto 1fr;
  column-gap:var(--s4); row-gap:0; padding:var(--s3) 0; border-top:1px solid var(--line); }
body.list-view #feed > .card:first-child { border-top:0; }
body.list-view .card > .stage, body.list-view .card > .stage:not(.term-stage), body.list-view .card > .stage.term-stage {
  grid-column:1; grid-row:1 / span 2; width:100%; aspect-ratio:16/10; margin:0; align-self:start; }
body.list-view .card > .head { grid-column:2; grid-row:1; margin:0; }
body.list-view .card > .meta { grid-column:2; grid-row:2; display:flex; flex-direction:column; min-width:0; }
body.list-view .card .title { font-size:var(--t-b); }
body.list-view .card .blurb { margin:2px 0 var(--s2); -webkit-line-clamp:1; font-size:var(--t-m); color:var(--dim); }
body.list-view .card .lesson { margin:0 0 var(--s2); font-size:var(--t-s); }
body.list-view .card .tex, body.list-view .card .packs, body.list-view .card .exports { display:none; }
/* facts and actions share one line */
body.list-view .card .facts { margin:0; }
body.list-view .card .meta { flex-direction:row; flex-wrap:wrap; align-items:center; column-gap:var(--s4); row-gap:var(--s1); }
body.list-view .card .meta > .blurb, body.list-view .card .meta > .lesson { flex-basis:100%; }
body.list-view .card .actions { margin:0 0 0 auto; gap:var(--s3); }
body.list-view .card .actions button.primary { height:24px; padding:0 10px; font-size:var(--t-s); }
/* the terminal at this size: its output only (the command runs on Open) */
body.list-view .card .term { --tf: var(--t-xs); }
body.list-view .stage.term-stage .tline { display:none; }
body.list-view .stage.term-stage .tout { padding:var(--s1) var(--s2); }
body.list-view .stage .poster img.pi { width:28px; height:28px; }
body.list-view .stage .poster span { display:none; }
@media (max-width: 760px) {
  .view-tg { margin-left:0; }
  body.list-view .card, body.list-view .card.cli { grid-template-columns:112px minmax(0, 1fr); column-gap:var(--s3); padding:var(--s2) 0; }
  body.list-view .card .blurb { display:none; }
  body.list-view .card .facts { display:none; }
  body.list-view .card .head, body.list-view .card .hd-t { display:block; }
}
/* list: the lesson in one line (two on a phone), so rows stay compact */
body.list-view .card .lesson { display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
@media (max-width: 760px) { body.list-view .card .lesson { -webkit-line-clamp:2; font-size:var(--t-s); } body.list-view .card .actions { margin-top:var(--s1); } }
/* the name line: title, tag and address share one baseline (centring them put the small caps high) */
.card .head, .card .hd-t, .card .row { align-items:baseline; }
.card .row { display:inline-flex; gap:var(--s2); }
.kind, .live { line-height:1; align-self:baseline; }
.kind, .mm-state { display:inline; height:auto; line-height:inherit; vertical-align:baseline; }
.live { display:inline-flex; align-items:center; align-self:center; }
/* list rows: the text column is as tall as the picture; the description at its top, the facts and actions line at its
   bottom (short descriptions left that line floating mid-row: Sketch, Life) */
body.list-view .card > .meta { align-self:stretch; align-content:space-between; }
body.list-view .card .meta > .blurb, body.list-view .card .meta > .lesson { align-self:flex-start; }
/* list rows: the description (and lesson) always a whole line, so the facts and actions always start their own,
   at the bottom (a short description capped at 70ch left room for them beside it, at the top) */
body.list-view .card .meta > .blurb, body.list-view .card .meta > .lesson { max-width:none; width:100%; flex:0 0 100%; }
/* list: a command's picture is its output alone (the exit line and long lines don't fit; Open has the rest) */
body.list-view .stage.term-stage .tout .meta { display:none; }
body.list-view .stage.term-stage .tout { overflow:hidden; white-space:pre; }
/* list: the description at a reading measure (about 68 characters); a line break after it keeps the facts and
   actions on their own line at the bottom */
body.list-view .card .meta > .blurb, body.list-view .card .meta > .lesson { flex:0 1 68ch; width:auto; max-width:68ch; }
body.list-view .card .meta::after { content:''; order:1; flex-basis:100%; height:0; }
body.list-view .card .meta > .blurb, body.list-view .card .meta > .lesson { order:0; }
body.list-view .card .meta > .facts, body.list-view .card .meta > .actions, body.list-view .card .meta > .packs { order:2; }

/* the view switch lives at the top of the section it changes, on the right */
.feed-bar { display:flex; justify-content:flex-end; align-items:center; padding:var(--s3) 0; }
#feed { padding-top:0; }
#feed > .feed-bar + .card { border-top:0; }
.view-tg { margin-left:0; }
body.list-view #feed > .feed-bar { border-bottom:1px solid var(--line); }
@media (max-width: 760px) { .feed-bar { padding:var(--s2) 0; } }

/* ===== the rail: on a wide screen the drawer (shell, agent) is a column on the right, under the top bar, the full
   height; the page beside it. Off: the page is as before and >_ brings it back. Narrow screens keep the drawer. */
:root { --rail: 400px; }
body.rail .sheet.ag-sheet { position:fixed; top:var(--bar); right:0; bottom:0; left:auto; width:var(--rail); height:auto; max-width:none;
  margin:0; transform:none; visibility:visible; border:0; border-left:1px solid var(--line2); z-index:4; }
body.rail .ag-wrap { max-width:none; height:100%; padding:var(--s3) var(--s3) var(--s3); }
body.rail #scrim { display:none !important; }
/* the page beside it: the top bar and the content stop short of the rail */
body.rail { padding-right:var(--rail); }
body.rail .topbar { right:var(--rail); padding:0 var(--s5); }
body.rail #feed, body.rail #mine, body.rail #resources, body.rail #docs { margin-left:auto; margin-right:auto; }
/* in the rail the shell is its full height; the agent's tools fit the narrower width */
body.rail #paneShell { border:1px solid var(--line); }
body.rail .dr-tools .ag-sub { max-width:120px; }
body.rail .ag-e.you { max-width:92%; }
body.rail .ag-in { flex-direction:column; } body.rail .ag-in .primary { height:32px; }
/* >_ shows the rail is on */
body.rail .sh-btn { color:var(--ink); }
@media (min-width: 1500px) { :root { --rail: 460px; } }
/* the rail: the full height under the bar (sheets' 82vh cap off); the top bar keeps the window's width, its line across
   both the page and the rail */
body.rail .sheet.ag-sheet { max-height:none; height:auto; }
body.rail .topbar { right:0; padding:0 var(--s5); }
/* the rail: no close button (>_ toggles it); one surface: no box around the shell, no box around the input; the
   rail's own left edge is the only line, the input row has a rule above it */
body.rail .ag-x { display:none; }
body.rail .ag-wrap { padding:0; }
body.rail .dr-tabs { height:40px; margin:0; padding:0 var(--s3); border-bottom:1px solid var(--line); }
body.rail .dr-pane { min-height:0; }
body.rail #paneShell { border:0; background:var(--bg); }
body.rail .sh-scroll { padding:var(--s3); }
body.rail .sh-line { background:var(--bg); padding:var(--s1) var(--s3); }
body.rail #paneAgent { padding:0 var(--s3) var(--s3); }
body.rail .ag-in textarea { border-color:var(--line2); }
body.rail .ag-e.you { background:none; border:0; border-left:2px solid var(--line3); border-radius:0; padding:2px 0 2px var(--s3); align-self:stretch; max-width:none; color:var(--ink); }
body.rail .ag-e.tool pre { border:0; background:var(--bg2); }
body.rail .ag-sug { border-color:var(--line); }
body.rail .sheet.ag-sheet { background:var(--bg); }
.sh-btn[aria-pressed="true"] { color:var(--ink); }
/* the top bar: always the window's width, the name at the left edge, the account at the right (it no longer moves
   when the rail comes and goes) */
.topbar, body.rail .topbar { padding:0 var(--s5); }
@media (max-width: 760px) { .topbar, body.rail .topbar { padding:0 var(--s3); } }

/* the shell's welcome: the name drawn by figlet, a few facts, things to try (each runs on a click). Two columns:
   a label, then its value (which wraps under itself) */
.sh-welcome { margin-bottom:var(--s4); }
.sh-banner { margin:0 0 var(--s3) !important; color:var(--on); overflow:hidden; white-space:pre; line-height:1.15 !important; }
.sh-facts, .sh-try { display:grid; grid-template-columns:8ch minmax(0, 1fr); column-gap:1ch; }
.sh-facts .k, .sh-try .k { color:var(--faint); }
.sh-facts .d { color:var(--dim); }
.sh-try { margin-top:var(--s2); }
.sh-ex { padding:0; border:0; background:none; color:var(--ink2); text-align:left; cursor:pointer; overflow-wrap:anywhere; }
.sh-ex::before { content:'$ '; color:var(--on); }
.sh-ex:hover { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }

/* ===== comments (comments.js), under a module's overview. A comment: who and when, then its text; a /command line in
   it shows the line (green) and its result under it; a module named on its own line shows as a small card */
.sv-comments { padding:0; }
.cm-head { display:flex; align-items:baseline; gap:var(--s2); padding:var(--s2) var(--s3); border-bottom:1px solid var(--line); background:var(--bg); }
.cm-head .nm { color:var(--ink); font:600 var(--t-m) var(--mono); } .cm-n { color:var(--faint); font:var(--t-s) var(--mono); }
.cm-list { padding:0 var(--s4); }
.cm { padding:var(--s3) 0; border-bottom:1px solid var(--line); }
.cm-by { display:flex; align-items:baseline; gap:var(--s2); margin-bottom:var(--s1); font:var(--t-s) var(--mono); }
.cm-by b { color:var(--ink); font-weight:500; } .cm-by span { color:var(--faint); }
.cm-del { margin-left:auto; padding:0; border:0; background:none; color:var(--faint); font:inherit; cursor:pointer; } .cm-del:hover { color:var(--bad); }
.cm-body { color:var(--ink2); font:var(--t-b)/1.6 var(--sans); max-width:72ch; }
.cm-body p { margin:0 0 var(--s2); } .cm-body p:last-child { margin-bottom:0; }
.cm-ad { color:var(--link); font-family:var(--mono); font-size:.92em; }
.cm-cmd { margin:var(--s2) 0; }
.cm-line { color:var(--on); font:var(--t-m) var(--mono); }
.cm-res { margin-top:2px; }
.cm-wait { color:var(--faint); font:var(--t-s) var(--mono); }
.cm-out { margin:0; padding:var(--s2) var(--s3); background:var(--bg2); color:var(--ink); font:var(--t-m)/1.5 var(--mono); white-space:pre; overflow-x:auto; }
.cm-out.err, .cm-out .err { color:var(--bad); }
.cm-cards { display:flex; flex-direction:column; gap:var(--s1); }
.cm-card { display:flex; gap:var(--s3); align-items:center; max-width:520px; margin:var(--s1) 0; padding:var(--s2); border:1px solid var(--line2); color:inherit; text-decoration:none; }
.cm-card:hover { border-color:var(--line3); text-decoration:none; }
.cm-card img { width:36px; height:36px; flex:none; }
.cm-card span { display:flex; flex-direction:column; min-width:0; }
.cm-card b { color:var(--ink); font:600 var(--t-m) var(--sans); } .cm-card i { color:var(--faint); font:var(--t-xs) var(--mono); font-style:normal; }
.cm-card em { color:var(--dim); font:var(--t-s) var(--sans); font-style:normal; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cm-empty { margin:0; padding:var(--s3) 0; color:var(--faint); font:var(--t-m) var(--sans); }
.cm-form { padding:var(--s3) var(--s4) var(--s4); }
.cm-form textarea { width:100%; min-height:60px; resize:vertical; padding:var(--s2) var(--s3); font:var(--t-b)/1.5 var(--sans); }
.cm-row { display:flex; align-items:center; gap:var(--s3); margin-top:var(--s2); } .cm-row .grow { flex:1; }
.cm-err { color:var(--bad); font:var(--t-s) var(--mono); }
.cm-post { height:30px; padding:0 var(--s3); border:1px solid var(--ink); background:var(--ink); color:#000; font:600 var(--t-m) var(--sans); cursor:pointer; }
.cm-post:disabled { opacity:.5; }
.cm-out.err { text-align:left; padding:var(--s2) var(--s3); }

/* the drawer: the agent's alone (the shell is parked). Its title, its tools, and × to close it */
.dr-title { color:var(--ink); font:600 var(--t-b) var(--sans); margin-right:var(--s3); }
.ag-x, body.rail .ag-x { display:inline-flex !important; }
#paneShell { display:none !important; }
/* comments on a card: a word in its actions; open, the thread under the card's text, in the card's column */
.cm-here { margin-top:var(--s3); border-top:1px solid var(--line); }
.cm-here .cm-head { display:none; }
.cm-here .cm-list { padding:0; }
.cm-here .cm-form { padding:var(--s3) 0 0; }
.card .cm-tg[aria-expanded="true"] { color:var(--ink); }
body.list-view .card .cm-here { grid-column:2; }
body.list-view .card.cm-open .meta { flex-wrap:wrap; }
body.list-view .card .meta > .cm-here { order:3; flex-basis:100%; }

/* inline comments on a card: the latest few, then a one-line box (it grows when you're in it) */
.cm-here .cm { padding:var(--s2) 0; }
.cm-here .cm:first-of-type { padding-top:var(--s3); }
.cm-here .cm-by { margin-bottom:0; }
.cm-here .cm-body { font-size:var(--t-m); }
.cm-more { display:block; margin:var(--s3) 0 0; padding:0; border:0; background:none; color:var(--dim); font:var(--t-s) var(--mono); cursor:pointer; }
.cm-more:hover { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.cm-form.cm-compact .cm-row { display:none; }
.cm-form.cm-compact textarea { min-height:0; height:34px; resize:none; overflow:hidden; }
.cm-here .cm-form { padding-top:var(--s2); }

/* ===== comments: a preview on the card (the latest two, read-only), the thread in a panel. On a phone the panel is a
   sheet from the bottom (three quarters of the screen, drag its handle down to close); 900px and wider, a column on
   the right under the top bar, the feed beside it */
.cm-here .cm-form { display:none; }
.cm-here .cm { padding:var(--s1) 0; border:0; }
.cm-here .cm:first-of-type { padding-top:var(--s2); }
.cm-here .cm-body { font-size:var(--t-m); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.cm-here .cm-body .cm-cmd, .cm-here .cm-body .cm-card { display:none; }   /* (a preview: words only; the thread shows the rest) */
.cm-here { margin-top:var(--s2); padding-top:var(--s1); border-top:0; cursor:pointer; }
.cm-here:empty { display:none; }
.card.cp-for .title { text-decoration:underline; text-decoration-color:var(--line3); text-underline-offset:4px; }   /* (the card the thread is for: its name marked, no box) */
#cpScrim { position:fixed; inset:0; z-index:24; display:none; background:#000a; } #cpScrim.open { display:block; }
#cmPanel { position:fixed; z-index:25; display:flex; flex-direction:column; background:var(--bg); border:1px solid var(--line2);
  left:0; right:0; bottom:0; height:76dvh; border-bottom:0; transform:translateY(102%); visibility:hidden; }
#cmPanel.open { transform:none; visibility:visible; }
.cp-grab { flex:none; display:flex; justify-content:center; padding:var(--s2) 0 0; touch-action:none; cursor:grab; }
.cp-grab i { width:36px; height:4px; background:var(--line3); }
.cp-head { flex:none; display:flex; align-items:center; gap:var(--s3); height:48px; padding:0 var(--s2) 0 var(--s4); border-bottom:1px solid var(--line); }
.cp-t { flex:1; min-width:0; display:flex; align-items:baseline; gap:var(--s2); white-space:nowrap; overflow:hidden; }
.cp-t img.ti { width:18px; height:18px; align-self:center; margin:0; } .cp-t b { color:var(--ink); font:600 var(--t-b) var(--sans); }
.cp-t span { color:var(--faint); font:var(--t-s) var(--mono); overflow:hidden; text-overflow:ellipsis; }
.cp-x { width:36px; height:36px; padding:0; border:0; background:none; color:var(--dim); font-size:20px; cursor:pointer; } .cp-x:hover { color:var(--ink); }
/* the thread: its list scrolls; its box stays at the bottom */
.cp-body { flex:1; min-height:0; display:flex; flex-direction:column; }
.cp-body .cm-head { display:none; }
.cp-body .cm-list { flex:1; min-height:0; overflow:auto; padding:var(--s2) var(--s4); overscroll-behavior:contain; }
.cp-body .cm { padding:var(--s3) 0; border-bottom:1px solid var(--line); }
.cp-body .cm:last-child { border-bottom:0; }
.cp-body .cm-empty { padding:var(--s5) 0; }
.cp-body .cm-form { flex:none; padding:var(--s3) var(--s4) max(var(--s3), env(safe-area-inset-bottom)); border-top:1px solid var(--line); }
.cp-body .cm-form textarea { min-height:44px; max-height:30dvh; font-size:16px; }
@media (min-width: 900px) {
  .cp-grab { display:none; }
  #cmPanel { left:auto; right:0; top:var(--bar); bottom:0; width:400px; height:auto; border:0; border-left:1px solid var(--line2); transform:translateX(102%); }
  #cpScrim { display:none !important; }   /* (the feed stays usable beside it) */
  /* the feed doesn't move when the panel opens: the panel sits over its right edge (a rule, no shadow), the card the
     thread is for brought into view to its left if it's under the panel */
  .cp-body .cm-form textarea { font-size:var(--t-b); }
}
/* the panel over the page's right edge (on a wide screen): its own edge a rule; the page under it stays where it is */
@media (min-width: 900px) { #cmPanel { border-left:1px solid var(--line3); } }

/* ===== the side layout (an experiment: wasm.land/sh, app.js SIDE). The top bar's tabs become a rail on the left, the
   full height: the mark, the sections, then Shells (each a tab: shells.js), you at its foot. The page beside it is the
   site as it is. On a phone it's the menu, as before, with the shells in it */
@media (min-width: 761px) {
  body.side { --side:224px; padding-left:var(--side); }
  body.side .topbar { left:0; right:auto; top:0; bottom:0; width:var(--side); height:auto; flex-direction:column; align-items:stretch; gap:0; padding:0;
    border-bottom:0; border-right:1px solid var(--line2); overflow:auto; }
  body.side { padding-top:0; } html:has(body.side) { scroll-padding-top:var(--s3); }
  body.side .topbar .mark { margin:var(--s4) var(--s4) var(--s3); flex:none; }
  body.side .topbar .tabs { flex-direction:column; align-items:stretch; gap:0; padding:var(--s2) 0; }
  body.side .topbar .tabs a, body.side .topbar .tabs a:visited { position:relative; height:34px; padding:0 var(--s4); }
  body.side .topbar .tabs a:hover { background:var(--raise); }
  body.side .topbar .tabs a.sel { background:var(--raise); } body.side .topbar .tabs a.sel::before { content:''; position:absolute; left:0; top:7px; bottom:7px; width:2px; background:var(--on); }
  body.side .topbar .tabs .sep { width:auto; height:1px; margin:var(--s2) var(--s4); }
  body.side .topbar .grow { flex:1; }
  body.side .topbar .acct-slot { padding:var(--s3) var(--s4); border-top:1px solid var(--line); } body.side .topbar .acct-btn { width:100%; max-width:none; }
  body.side .topbar .new-btn { margin:0 var(--s4) var(--s2); }
  body.side .menu-btn { display:none !important; }
  body.side #player, body.side #srcView { left:0; }
}
/* the rail's shells: a heading, a tab each (its name, a dot while its guide works, × to close), + New shell */
.sh-group { display:flex; flex-direction:column; margin-top:var(--s2); padding-top:var(--s2); border-top:1px solid var(--line); }
.sh-rh { padding:var(--s2) var(--s4) var(--s1); color:var(--faint); font:500 var(--t-xs)/1.4 var(--sans); text-transform:uppercase; letter-spacing:.08em; }
.sh-tab, .sh-tab:visited { position:relative; display:flex; align-items:center; gap:var(--s2); height:34px; padding:0 var(--s2) 0 var(--s4); color:var(--dim); font:var(--t-b) var(--sans); text-decoration:none; white-space:nowrap; }
.sh-tab:hover { color:var(--ink); background:var(--raise); text-decoration:none; }
.sh-tab.sel { color:var(--ink); background:var(--raise); } .sh-tab.sel::before { content:''; position:absolute; left:0; top:7px; bottom:7px; width:2px; background:var(--on); }
.sh-tab .ic { flex:none; width:2ch; color:var(--faint); font:var(--t-s) var(--mono); } .sh-tab.sel .ic { color:var(--on); }
.sh-tab .nm { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.sh-tab .busy { flex:none; width:6px; height:6px; background:var(--on); animation:shblink 1s steps(2) infinite; } @keyframes shblink { 50% { opacity:0; } }
.sh-tab .x { flex:none; display:none; width:22px; height:22px; place-items:center; color:var(--faint); font-size:15px; } .sh-tab:hover .x, .sh-tab.sel .x { display:grid; } .sh-tab .x:hover { color:var(--ink); }
.sh-tab.new { color:var(--faint); } .sh-tab.new:hover { color:var(--ink); }
/* a shell: the page's column; what you ask and what came back, appended; its line stuck to the bottom of the window */
#shells { max-width:860px; margin:0 auto; padding:var(--s5) var(--s5) 0; }
body.list-view #shells { max-width:var(--w); }
.sh-view { display:flex; flex-direction:column; min-height:calc(100dvh - var(--s5)); }
.sh-out { flex:1; padding-bottom:var(--s5); }
.sh-hello { max-width:60ch; color:var(--dim); font:var(--t-b)/1.6 var(--sans); }
.sh-say { max-width:68ch; margin:0 0 var(--s3); white-space:pre-wrap; font:var(--t-b)/1.6 var(--sans); overflow-wrap:anywhere; }
.sh-say.you { margin-top:var(--s6); padding-top:var(--s3); border-top:1px solid var(--line); color:var(--ink); font-weight:500; max-width:none; }
.sh-out > .sh-say.you:first-child, .sh-hello + .sh-say.you { margin-top:var(--s5); }
.sh-say.guide, .sh-say.dim { position:relative; padding-left:2ch; color:var(--ink2); }
.sh-say.guide::before, .sh-say.dim::before { content:'›'; position:absolute; left:0; color:var(--on); font-family:var(--mono); }
.sh-say.dim { color:var(--faint); } .sh-say.dim::before { color:var(--faint); } .sh-say.err { color:var(--bad); }
.sh-blk { margin:0 0 var(--s5); }
/* a block's header (its command, the count, how to show it) sticks to the top while you're in that block */
.sh-bh { position:sticky; top:0; z-index:3; display:flex; align-items:center; gap:var(--s3); min-height:40px; margin:0 calc(-1 * var(--s5)); padding:var(--s1) var(--s5); background:var(--bg); border-bottom:1px solid var(--line); font:var(--t-m) var(--mono); }
.sh-bh .sh-cmd { min-width:0; color:var(--on); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sh-bh .who { color:var(--faint); font-size:var(--t-s); }
.sh-bh .n { flex:none; color:var(--faint); font-size:var(--t-s); } .sh-bh .grow { flex:1; }
.sh-blk.by-guide .sh-bh .sh-cmd { color:var(--ink2); }
.sh-pre { margin:var(--s3) 0 0; padding:0; white-space:pre; overflow-x:auto; color:var(--ink); font:var(--t-b)/1.55 var(--mono); }
.sh-pre.err { color:var(--bad); white-space:pre-wrap; }
.sh-pre .sh-ad { color:var(--link); cursor:pointer; }
.sh-meta { margin-top:var(--s2); color:var(--faint); font:var(--t-s) var(--mono); }
.sh-cards { display:flex; flex-direction:column; }
.sh-cards > .card:first-child { border-top:0; }
/* the line: at the bottom of the window, over the page */
.sh-line { position:sticky; bottom:0; z-index:4; margin:0 calc(-1 * var(--s5)); padding:var(--s3) var(--s5) max(var(--s3), env(safe-area-inset-bottom)); background:var(--bg); border-top:1px solid var(--line2); }
.sh-field { display:flex; align-items:center; gap:var(--s3); height:48px; padding:0 6px 0 var(--s3); border:1px solid var(--line3); background:var(--bg); }
.sh-field:focus-within { border-color:var(--ink2); } .sh-ps { color:var(--on); font:16px var(--mono); }
.sh-field input { flex:1; min-width:0; height:100%; border:0; background:none; outline:0; padding:0; color:var(--ink); font:16px var(--sans); } .sh-field input::placeholder { color:var(--faint); }
.sh-send { flex:none; width:36px; height:36px; padding:0; border:0; background:var(--ink); color:#000; font:600 16px var(--mono); cursor:pointer; } .sh-send:hover { background:#fff; }
@media (max-width: 760px) {
  #shells { padding:var(--s3) var(--s3) 0; } .sh-bh, .sh-line { margin:0 calc(-1 * var(--s3)); padding-left:var(--s3); padding-right:var(--s3); }
  .sh-bh { top:var(--bar); flex-wrap:wrap; } .sh-view { min-height:calc(100dvh - var(--bar) - var(--s3)); }
  .sh-group { border-top:1px solid var(--line); margin-top:0; padding-top:0; } .sh-group .sh-tab { height:44px; font-size:var(--t-l); border-bottom:1px solid var(--line); }
  .sh-tab .x { display:grid; width:36px; height:36px; }   /* (no hover on a phone) */
}
/* a section that's a program: says so, in its bar (side layout) */
.feed-bar .made-by { flex:1; min-width:0; color:var(--faint); font:var(--t-m) var(--sans); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.feed-bar .made-by a { color:var(--ink2); font-family:var(--mono); } .feed-bar .made-by .t { font:var(--t-s) var(--mono); } .feed-bar .made-by .err { color:var(--warn); }
/* save this moment: a word at the end of the rewind bar; the saved moment's line (who, when) above the bar; the link */
#rewind #rwSave { flex:none; color:var(--on); }
#rewind #rwSave:disabled { opacity:.5; }
#player.net #rwSave { display:none; }
#savedNote { position:absolute; left:50%; bottom:100px; transform:translateX(-50%); max-width:calc(100% - 24px); padding:6px var(--s3); background:#000; border:1px solid var(--line2); color:var(--ink2); font:var(--t-m) var(--sans); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; z-index:3; }
body.touch #savedNote { bottom:256px; }
.sv-link { display:flex; gap:var(--s2); margin:var(--s3) 0; }
.sv-link input { flex:1; min-width:0; height:40px; padding:0 var(--s3); border:1px solid var(--line3); background:var(--bg); color:var(--ink); font:var(--t-b) var(--mono); }
.sv-link button { flex:none; height:40px; padding:0 var(--s4); }
.sv-small { font-size:var(--t-s); }
/* the save sheet: the moment's picture, the link, posting it */
.sv-pic img { display:block; width:100%; max-width:320px; aspect-ratio:4/3; object-fit:contain; background:#000; border:1px solid var(--line2); image-rendering:pixelated; }
.sv-pic:empty { display:none; }
.sv-post { margin-top:var(--s4); padding-top:var(--s3); border-top:1px solid var(--line); }
.sv-post label { display:block; color:var(--dim); }
/* saved moments: a row each (picture, what and when, actions) */
#savesList { display:flex; flex-direction:column; max-height:min(70vh, 640px); overflow:auto; }
.sv-row { display:grid; grid-template-columns:96px minmax(0, 1fr); gap:var(--s3); padding:var(--s3) 0; border-top:1px solid var(--line); }
.sv-row:first-child { border-top:0; }
.sv-thumb { display:block; aspect-ratio:4/3; background:#000; border:1px solid var(--line2); overflow:hidden; }
.sv-thumb img { width:100%; height:100%; object-fit:contain; display:block; image-rendering:pixelated; } .sv-thumb .pi { width:32px; height:32px; margin:18px auto; }
.sv-what { display:flex; flex-direction:column; gap:2px; min-width:0; font-size:var(--t-b); }
.sv-what a { color:var(--ink); text-decoration:none; } .sv-what a:hover { text-decoration:underline; } .sv-what b { font-weight:600; }
.sv-what > span { color:var(--faint); font:var(--t-s) var(--mono); }
.sv-acts { display:flex; gap:var(--s4); margin-top:var(--s1); } .sv-acts .lnk { font-size:var(--t-m); } .sv-acts .danger-l { color:var(--bad); }
/* a saved moment in a comment: its picture and what it is, a link that opens it */
.cm-moment { display:flex; align-items:stretch; gap:var(--s3); max-width:420px; margin:var(--s2) 0; border:1px solid var(--line2); color:var(--ink); text-decoration:none; }
.cm-moment:hover { border-color:var(--line3); text-decoration:none; }
.cm-moment .mp { flex:none; width:128px; aspect-ratio:4/3; background:#000; } .cm-moment .mp img { width:100%; height:100%; object-fit:contain; display:block; image-rendering:pixelated; }
.cm-moment .mw { display:flex; flex-direction:column; justify-content:center; gap:2px; padding:var(--s2) var(--s3) var(--s2) 0; min-width:0; }
.cm-moment .mw b { font:600 var(--t-b) var(--sans); } .cm-moment .ms { color:var(--faint); font:var(--t-s) var(--mono); }
.cm-moment .mo { color:var(--on); font:500 var(--t-m) var(--sans); margin-top:var(--s1); }
.cm-moment.gone { padding:var(--s2) var(--s3); color:var(--faint); } .cm-moment.gone .mw { padding:0; }
.cm-here .cm-body .cm-moment { display:flex; }   /* (the card's preview shows moments: they're the point) */
/* the agent's transcript: its words as markdown (paragraphs, lists, code, tables), tool calls one line each with what
   they were given (a file, an edit) and their output folded to their first lines */
.ag-e.said { white-space:normal; }
.ag-e.said > :first-child { margin-top:0; } .ag-e.said > :last-child { margin-bottom:0; }
.ag-e.said p { margin:0 0 var(--s2); }
.ag-e.said ul, .ag-e.said ol { margin:0 0 var(--s2); padding-left:1.4em; } .ag-e.said li { margin:2px 0; }
.ag-e.said h1, .ag-e.said h2, .ag-e.said h3, .ag-e.said h4 { margin:var(--s3) 0 var(--s1); font:600 var(--t-b)/1.4 var(--sans); color:var(--ink); }
.ag-e.said h1, .ag-e.said h2 { font-size:var(--t-l); }
.ag-e.said code { padding:0 3px; background:var(--raise); font:.92em var(--mono); }
.ag-e.said pre.code { margin:0 0 var(--s2); padding:var(--s2) var(--s3); max-height:260px; overflow:auto; background:var(--bg2); border:1px solid var(--line); font:var(--t-s)/1.5 var(--mono); white-space:pre; }
.ag-e.said pre.code code { padding:0; background:none; }
.ag-e.said table { border-collapse:collapse; margin:0 0 var(--s2); font-size:var(--t-m); display:block; overflow-x:auto; }
.ag-e.said th, .ag-e.said td { padding:3px var(--s3) 3px 0; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; } .ag-e.said th { color:var(--dim); font-weight:500; }
.ag-e.said a { color:var(--link); }
.ag-e.tool { white-space:normal; }
.ag-e.tool .ag-out:empty { display:none; }
.ag-fold { margin:var(--s1) 0 2px 14px; }
.ag-fold pre { margin:0; padding:var(--s2) var(--s3); max-height:none; overflow-x:auto; background:var(--bg2); border:1px solid var(--line); color:var(--ink2); font:var(--t-s)/1.5 var(--mono); white-space:pre; }
.ag-fold.open pre { max-height:60vh; overflow:auto; }
.ag-more { margin-top:2px; padding:0; border:0; background:none; color:var(--dim); font:var(--t-s) var(--sans); cursor:pointer; } .ag-more:hover { color:var(--ink); }
.ag-fold.diff pre { color:var(--dim); } .ag-fold .add { color:var(--on); } .ag-fold .del { color:var(--bad); }
.ag-e.tool .ag-out .ag-fold { margin-left:14px; }   /* (.ag-e.tool pre, the old rule, sized the output: the fold does now) */
.ag-e.tool .ag-fold pre { margin:0; max-height:none; }
/* the agent's earlier chats: a list over the transcript; an earlier chat shown read-only, with Resume */
.ag-chats { display:flex; flex-direction:column; max-height:50%; overflow:auto; margin:var(--s2) 0 0; border:1px solid var(--line2); }
.ag-chat { display:flex; flex-direction:column; gap:2px; padding:var(--s2) var(--s3); border:0; border-top:1px solid var(--line); background:none; text-align:left; cursor:pointer; }
.ag-chat:first-child { border-top:0; } .ag-chat:hover { background:var(--raise); }
.ag-chat b { color:var(--ink); font:500 var(--t-b)/1.4 var(--sans); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ag-chat span { color:var(--faint); font:var(--t-s) var(--mono); } .ag-chat.cur b::before { content:''; display:inline-block; width:6px; height:6px; margin-right:var(--s2); background:var(--on); vertical-align:2px; }
.ag-old { display:flex; align-items:center; gap:var(--s3); margin:var(--s2) 0 0; padding:var(--s2) var(--s3); border:1px solid var(--line2); color:var(--dim); font:var(--t-m) var(--sans); }
.ag-old span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ag-old button { flex:none; height:30px; }
.old .ag-log { opacity:.85; }

/* ===== chat (chat.js): the channels on the left, the channel on the right. One grid of edges: the left pane's content
   and the right pane's start at the same 24px inset; the channel's header (48px), the log, and the box at the bottom
   share the right pane's width, so the box lines up with the messages above it. */
#chat[hidden] { display:none !important; }
#chat { position:fixed; top:var(--bar); left:0; right:0; bottom:0; }
.ch { --cp:var(--s5); height:100%; max-width:var(--w); margin:0 auto; display:grid; grid-template-columns:248px minmax(0, 1fr); border-left:1px solid var(--line); border-right:1px solid var(--line); }
.ch-side { display:flex; flex-direction:column; min-height:0; border-right:1px solid var(--line); }
.ch-h { display:flex; align-items:center; height:48px; flex:none; padding:0 var(--cp); border-bottom:1px solid var(--line); color:var(--faint); font:500 var(--t-xs)/1 var(--sans); text-transform:uppercase; letter-spacing:.08em; }
.ch-list { display:flex; flex-direction:column; padding:var(--s2) 0; }
.ch-list a { position:relative; display:flex; flex-direction:column; justify-content:center; gap:2px; min-height:52px; padding:var(--s2) var(--cp); color:var(--ink2); text-decoration:none; }
.ch-list a span { font:500 var(--t-b)/1.3 var(--sans); } .ch-list a i { display:block; min-height:1.4em; color:var(--faint); font:var(--t-s)/1.4 var(--sans); font-style:normal; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ch-list a:hover { background:var(--raise); color:var(--ink); text-decoration:none; }
.ch-list a.sel { background:var(--raise); color:var(--ink); } .ch-list a.sel::before { content:''; position:absolute; left:0; top:10px; bottom:10px; width:2px; background:var(--on); }
.ch-note { margin:auto 0 0; padding:var(--s4) var(--cp); border-top:1px solid var(--line); color:var(--faint); font:var(--t-s)/1.55 var(--sans); }
.ch-main { display:flex; flex-direction:column; min-height:0; min-width:0; }
.ch-top { display:flex; align-items:center; gap:var(--s3); height:48px; flex:none; padding:0 var(--cp); border-bottom:1px solid var(--line); min-width:0; box-sizing:border-box; }
.ch-name { color:var(--ink); font:600 var(--t-b) var(--sans); white-space:nowrap; }
.ch-about { min-width:0; color:var(--dim); font-size:var(--t-m); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ch-top .grow { flex:1; } .ch-here { flex:none; color:var(--faint); font:var(--t-s) var(--mono); white-space:nowrap; font-variant-numeric:tabular-nums; }
.ch-back { display:none; color:var(--ink); font-size:var(--t-xl); text-decoration:none; }
.ch-log { flex:1; min-height:0; overflow:auto; padding:var(--s2) calc(var(--cp) - var(--gut, 0px)) var(--s4) var(--cp); overscroll-behavior:contain; scrollbar-gutter:stable; overflow-anchor:auto; }
.ch-empty { margin:var(--s4) 0; color:var(--faint); font-size:var(--t-m); }
.msg { position:relative; padding:2px 0; } .msg:not(.cont) { margin-top:var(--s4); }
.msg-by { display:flex; align-items:baseline; gap:var(--s2); margin-bottom:2px; }
.msg-by b { color:var(--ink); font:600 var(--t-m) var(--sans); } .msg-by span { color:var(--faint); font:var(--t-s) var(--sans); }
.msg .cm-body { font-size:var(--t-b); line-height:1.55; } .msg .cm-body p { margin:0; }
.msg-acts { position:absolute; right:0; top:2px; display:none; gap:var(--s3); }
.msg:hover .msg-acts { display:flex; } .msg-acts button { padding:0; border:0; background:none; color:var(--faint); font:var(--t-s) var(--sans); cursor:pointer; } .msg-acts button:hover { color:var(--bad); }
@media (pointer: coarse) { .msg-acts { display:flex; } }
.msg.pending .cm-body { opacity:.55; } .msg.failed .cm-body { opacity:.75; }
.msg-fail { margin-top:2px; color:var(--bad); font:var(--t-s) var(--sans); } .msg-fail button { padding:0; border:0; background:none; color:var(--ink); font:inherit; text-decoration:underline; cursor:pointer; }
.ch-loading { display:flex; flex-direction:column; gap:var(--s3); padding-top:var(--s4); }
.ch-loading span { display:block; height:12px; width:40%; background:var(--raise); } .ch-loading span:nth-child(2) { width:65%; } .ch-loading span:nth-child(3) { width:30%; }
.ch-older { padding:var(--s2) 0; color:var(--faint); font:var(--t-s) var(--sans); text-align:center; }
/* the box: one field (the text and Send inside one frame), in the same inset as the messages */
.ch-form { position:relative; flex:none; padding:var(--s3) var(--cp) max(var(--s3), env(safe-area-inset-bottom)); border-top:1px solid var(--line); }
.ch-field { position:relative; display:flex; align-items:flex-end; gap:var(--s2); padding:5px 5px 5px var(--s3); border:1px solid var(--line3); background:var(--bg); }
.ch-field:focus-within { border-color:var(--ink2); }
.ch-field textarea { flex:1; min-width:0; height:30px; min-height:30px; max-height:200px; padding:4px 0; border:0; outline:0; background:none; resize:none; color:var(--ink); font:var(--t-b)/22px var(--sans); }
.ch-field textarea::placeholder { color:var(--faint); }
.ch-field button { flex:none; height:30px; padding:0 var(--s3); border:0; background:var(--ink); color:#000; font:600 var(--t-m) var(--sans); cursor:pointer; } .ch-field button:hover { background:#fff; }
.ch-err { padding-top:var(--s1); color:var(--bad); font:var(--t-s) var(--sans); } .ch-err:empty { display:none; }
#chat:not(.ch-in) .ch-main { visibility:hidden; }
@media (max-width: 760px) {
  .ch { --cp:var(--s3); grid-template-columns:minmax(0, 1fr); border:0; }
  .ch-side { border-right:0; }
  #chat.ch-in .ch-side { display:none; } #chat:not(.ch-in) .ch-main { display:none; } #chat:not(.ch-in) .ch-side { visibility:visible; }
  .ch-back { display:block; margin-right:var(--s1); } .ch-about { display:none; }
  .ch-field textarea { font-size:16px; }
}
/* typeahead (typeahead.js): a list just above the box, lined up with it */
.ta { position:absolute; left:-1px; right:-1px; bottom:calc(100% + var(--s2)); z-index:8; max-height:320px; overflow:auto; padding:var(--s1) 0; background:var(--bg); border:1px solid var(--line3); }
.ta[hidden] { display:none; }
.ta-h { padding:var(--s1) var(--s3) var(--s2); color:var(--faint); font:var(--t-xs) var(--sans); text-transform:uppercase; letter-spacing:.06em; }
.ta-i { display:flex; align-items:center; gap:var(--s2); min-width:0; padding:6px var(--s3); cursor:pointer; }
.ta-i img { width:18px; height:18px; flex:none; }
.ta-i b { flex:none; color:var(--ink); font:500 var(--t-m) var(--sans); }
.ta-i .ta-a { min-width:0; color:var(--faint); font:var(--t-s) var(--mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ta-i em { margin-left:auto; flex:none; color:var(--faint); font:var(--t-xs) var(--mono); font-style:normal; text-transform:uppercase; letter-spacing:.06em; }
.ta-i.sel { background:var(--raise); } .ta-i.sel b { color:var(--on); }
/* summoned (summon.js): what a message names, as itself. A head (icon, name, address, what it is), then: a program's
   picture, live while on screen (Play here, Open); a command's output; a part's card */
.sm { max-width:560px; margin:var(--s2) 0; border:1px solid var(--line2); background:var(--bg); }
.sm-h { display:flex; align-items:center; gap:var(--s2); min-width:0; padding:var(--s2) var(--s3); border-bottom:1px solid var(--line); }
.sm-h img { width:20px; height:20px; flex:none; }
.sm-h a { color:var(--ink); text-decoration:none; } .sm-h a:hover { text-decoration:underline; } .sm-h b { font:600 var(--t-b) var(--sans); white-space:nowrap; }
.sm-a { min-width:0; color:var(--faint); font:var(--t-s) var(--mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sm-n { margin-left:auto; flex:none; color:var(--faint); font:var(--t-xs) var(--mono); text-transform:uppercase; letter-spacing:.06em; }
.sm-stage { position:relative; aspect-ratio:16/9; background:#000; overflow:hidden; outline:0; cursor:pointer; }
.sm-stage:focus { box-shadow:inset 0 0 0 1px var(--on); }
.sm-host { position:absolute; inset:0; } .sm-host canvas { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; } .sm-host canvas.pix { image-rendering:pixelated; }
.sm-poster { position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--s2); color:var(--dim); font:var(--t-s) var(--mono); background:var(--bg2); }
.sm-poster img { width:36px; height:36px; } .sm-poster img.sm-shot { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; image-rendering:pixelated; opacity:.6; }
.sm-poster span { position:relative; }
.sm-acts { display:flex; align-items:center; gap:var(--s4); padding:var(--s2) var(--s3); border-top:1px solid var(--line); font:var(--t-m) var(--sans); }
.sm-acts button { height:28px; padding:0 var(--s3); border:1px solid var(--ink); background:var(--ink); color:#000; font:600 var(--t-m) var(--sans); cursor:pointer; } .sm-acts button:hover { background:#fff; }
.sm-acts button[hidden] { display:none; } .sm-acts a { color:var(--ink2); } .sm-st { color:var(--faint); font:var(--t-s) var(--sans); }
.sm-line { padding:var(--s2) var(--s3) 0; color:var(--on); font:var(--t-s) var(--mono); }
.sm-out { margin:0; padding:var(--s1) var(--s3) var(--s3); max-height:260px; overflow:auto; color:var(--ink); font:var(--t-s)/1.45 var(--mono); white-space:pre; } .sm-out.err { color:var(--bad); }
.sm-d { margin:0; padding:var(--s2) var(--s3); color:var(--dim); font:var(--t-m)/1.5 var(--sans); }
@media (max-width: 760px) { .sm { max-width:none; } }
/* (a tagged command: its run, below: .sm-cmd) */
.sm-cmd .sm-out { margin-top:var(--s2); padding-top:var(--s2); border-top:1px solid var(--line); }
/* peek: a tagged thing in a window over the page (a sheet from the bottom on a phone) */
.peek-wrap { position:fixed; inset:0; z-index:40; } .peek-wrap[hidden] { display:none; }
.peek-scrim { position:absolute; inset:0; background:#000c; }
.peek { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); display:flex; flex-direction:column; width:min(760px, calc(100vw - 48px)); max-height:calc(100dvh - 64px); background:var(--bg); border:1px solid var(--line3); }
.peek-h { display:flex; align-items:center; gap:var(--s2); height:48px; flex:none; padding:0 var(--s2) 0 var(--s4); border-bottom:1px solid var(--line); min-width:0; }
.peek-t { display:flex; align-items:center; gap:var(--s2); flex:1; min-width:0; } .peek-t img { width:20px; height:20px; flex:none; } .peek-t b { font:600 var(--t-b) var(--sans); white-space:nowrap; }
.peek-x, .peek-back { flex:none; width:36px; height:36px; padding:0; border:0; background:none; color:var(--dim); font-size:20px; cursor:pointer; } .peek-x:hover, .peek-back:hover { color:var(--ink); }
.peek-back { margin-left:calc(-1 * var(--s2)); } .peek-back[hidden] { display:none; }
.peek-body { flex:1; min-height:0; overflow:auto; padding:var(--s4); }
.peek-body > .sm { max-width:none; margin:0 0 var(--s4); }
.peek-body > .sm.big .sm-stage { aspect-ratio:16/10; }
.peek-about { margin:0 0 var(--s4); color:var(--ink2); font:var(--t-b)/1.6 var(--sans); max-width:68ch; }
.peek-rel { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2); margin:0 0 var(--s3); }
.peek-rel > span { width:7ch; flex:none; color:var(--faint); font:var(--t-s) var(--sans); }
.peek-chip { display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 var(--s2); border:1px solid var(--line2); background:none; color:var(--ink2); font:var(--t-m) var(--sans); cursor:pointer; }
.peek-chip img { width:16px; height:16px; } .peek-chip:hover { border-color:var(--line3); color:var(--ink); }
.peek-acts { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s4); margin-top:var(--s4); padding-top:var(--s3); border-top:1px solid var(--line); }
.peek-play { height:32px; padding:0 var(--s4); border:1px solid var(--ink); background:var(--ink); color:#000; font:600 var(--t-m) var(--sans); cursor:pointer; } .peek-play:hover { background:#fff; }
.peek-go { color:var(--ink2); font:var(--t-m) var(--sans); }
html.peeking { overflow:hidden; }
@media (max-width: 760px) {
  .peek { left:0; right:0; top:auto; bottom:0; transform:none; width:auto; max-height:88dvh; border-bottom:0; }
  .peek-body { padding:var(--s3) var(--s3) max(var(--s4), env(safe-area-inset-bottom)); }
}
/* a permalink in a sentence: named, like a mention */
.cm-ad.cm-pl { white-space:nowrap; }
/* a source file, unfurled: its path, the lines around the one linked */
.sm-path { display:block; padding:var(--s2) var(--s3) 0; color:var(--ink2); font:var(--t-s) var(--mono); }
.sm-code { margin-top:var(--s1); white-space:pre; } .sm-code .ln { display:block; } .sm-code .ln i { display:inline-block; width:4ch; margin-right:var(--s2); color:var(--faint); font-style:normal; text-align:right; user-select:none; }
.sm-code .ln.hit { background:#3ddc8418; } .sm-code .ln.more { color:var(--faint); }
.sm-join { height:28px; display:inline-flex; align-items:center; padding:0 var(--s3); background:var(--on); color:#000; font:600 var(--t-m) var(--sans); text-decoration:none; } .sm-join:hover { text-decoration:none; filter:brightness(1.1); }
/* ===== split: a tagged thing opened from the chat is the real player, the chat beside it on the right (a 400px column;
   wider screens give the program the rest). On a phone the program is above, the chat below. The page doesn't lock */
html.split { --chat-w:clamp(340px, 28vw, 440px); }
html.split #player.open { inset:var(--bar) var(--chat-w) 0 0; border-right:1px solid var(--line2); z-index:9; }
html.split #chat { top:var(--bar); left:calc(100vw - var(--chat-w)); }
html.split .ch { grid-template-columns:minmax(0, 1fr); max-width:none; border:0; } html.split .ch-side { display:none; }
html.split #chat .ch-main { display:flex !important; visibility:visible; } html.split .ch-about { display:none; }
@media (max-width: 760px) {
  html.split #player.open { inset:var(--bar) 0 auto 0; height:calc((100dvh - var(--bar)) * .6); border-right:0; border-bottom:1px solid var(--line2); }
  html.split #chat { top:calc(var(--bar) + (100dvh - var(--bar)) * .6); left:0; }
}
/* a command run in a message: its line, its input as written (if any), its output; Run again */
.sm-cmd .sm-line { padding:var(--s2) var(--s3) 0; } .sm-stdin-n { color:var(--faint); }
.sm-in-shown { margin:var(--s1) var(--s3) 0; padding:var(--s1) var(--s2); max-height:120px; overflow:auto; border-left:2px solid var(--line3); color:var(--dim); font:var(--t-s)/1.45 var(--mono); white-space:pre-wrap; }
.sm-cmd .sm-acts button.sm-again { background:none; color:var(--ink); border-color:var(--line3); font-weight:500; } .sm-cmd .sm-acts button.sm-again:hover { border-color:var(--ink); background:none; }