/* Sotto's one stylesheet (docs/product/SITE_REDESIGN_2026-10-28.md).
   "Sotto voce": white and graphite, one typeface, lists instead of cards,
   ink buttons. The only colour is the lens's own green, and it appears only
   inside pictures of the glass and the live dot. Served as-is by
   backend/src/product/site.ts; no build step. */

/* ---------- Tokens ---------- */
:root{
  --g1:#fcfcfc;--g2:#f9f9f9;--g3:#f0f0f0;--g4:#e8e8e8;--g5:#e0e0e0;--g6:#d9d9d9;
  --g7:#cecece;--g8:#bbbbbb;--g9:#8d8d8d;--g10:#838383;--g11:#646464;--g12:#202020;
  --bg:#ffffff;--bg-subtle:var(--g2);--bg-hover:var(--g3);--bg-active:var(--g4);
  --line:var(--g5);--line-strong:var(--g7);
  --text:#111111;--text-2:var(--g11);--text-3:var(--g9);
  --ink:#111111;--on-ink:#ffffff;
  --lens-bg:#050805;--lens:#3df07c;--lens-dim:rgba(61,240,124,.55);--live:#14a44d;
  --danger:#c62a1d;--focus:#111111;
  /* System faces: no web-font fetch (the CSP allows none, and the Even app's
     WebView should not wait on one). SF Pro on Apple, Segoe on Windows. */
  --font:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:128px;
  --r-sm:6px;--r-md:10px;--r-lg:16px;--r-xl:24px;--r-full:999px;
  --shadow-float:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.08);
  --shadow-modal:0 2px 4px rgba(0,0,0,.04),0 24px 64px rgba(0,0,0,.16);
  --scrim:rgba(0,0,0,.40);
  --ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1);
  --t-press:100ms;--t-fast:150ms;--t-base:200ms;--t-modal:240ms;
  --w-text:640px;--w-app:720px;--w-site:1120px;--nav-h:56px;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0a0a0a;--bg-subtle:#111111;--bg-hover:#191919;--bg-active:#222222;
  --line:#232323;--line-strong:#333333;--g8:#444444;
  --text:#ededed;--text-2:#a1a1a1;--text-3:#6f6f6f;
  --ink:#ededed;--on-ink:#0a0a0a;--live:#3df07c;--danger:#ff6b5e;--focus:#ededed;
  --shadow-float:0 0 0 1px #232323,0 8px 24px rgba(0,0,0,.5);
  --shadow-modal:0 0 0 1px #2a2a2a,0 24px 64px rgba(0,0,0,.6);--scrim:rgba(0,0,0,.6);
}}
@media (prefers-reduced-motion:reduce){:root{--t-press:0ms;--t-fast:0ms;--t-base:0ms;--t-modal:0ms}}

/* ---------- Base and type ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/24px var(--font);letter-spacing:-0.006em}
h1,h2,h3{font-weight:500;margin:0;text-wrap:balance}
.display{font-size:64px;line-height:66px;letter-spacing:-0.03em;font-weight:500}
h1{font-size:40px;line-height:44px;letter-spacing:-0.025em}
h2{font-size:28px;line-height:34px;letter-spacing:-0.02em}
h3{font-size:20px;line-height:28px;letter-spacing:-0.01em}
.lead{font-size:20px;line-height:30px;color:var(--text-2);letter-spacing:-0.01em}
p{margin:0;text-wrap:pretty}
p+p{margin-top:12px}
ul,ol{margin:0;padding-left:20px}
li+li{margin-top:6px}
.small{font-size:13px;line-height:18px;color:var(--text-2)}
.muted{color:var(--text-2)}
.num,time,.row-trail,.mono{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono);font-size:14px;letter-spacing:.04em}
a{color:var(--text);text-decoration:underline;text-decoration-color:var(--line-strong);text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-color var(--t-fast) var(--ease-out)}
@media (hover:hover){a:hover{text-decoration-color:var(--text)}}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
::selection{background:var(--bg-active)}
@media (max-width:640px){
  .display{font-size:44px;line-height:46px}h1{font-size:32px;line-height:36px}
  h2{font-size:24px;line-height:30px}.lead{font-size:18px;line-height:28px}
}
[hidden]{display:none!important}

/* ---------- Layout ---------- */
.wrap{max-width:var(--w-site);margin:0 auto;padding:0 24px}
.app{max-width:var(--w-app);margin:0 auto;padding:48px 24px 96px}
.text{max-width:var(--w-text)}
.page-head{margin-bottom:32px}
.page-head .lead,.page-head .small{margin-top:12px}
.section{margin-top:128px}
.group{margin-top:48px}
.stack>*+*{margin-top:16px}
.row-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
@media (max-width:640px){.wrap,.app{padding-left:20px;padding-right:20px}.section{margin-top:80px}}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:40;height:var(--nav-h);background:var(--bg);border-bottom:1px solid transparent;transition:border-color var(--t-fast) var(--ease-out)}
.nav.scrolled{border-bottom-color:var(--line)}
.nav-in{max-width:var(--w-site);margin:0 auto;padding:0 24px;height:100%;display:flex;align-items:center;gap:24px}
.wordmark{font:600 17px/1 var(--font);letter-spacing:-0.03em;text-decoration:none;color:var(--text);margin-right:auto}
.nav-links{display:flex;gap:24px}
.nav-links a,.nav-link{font:500 14px/20px var(--font);color:var(--text-2);text-decoration:none;padding:8px 0}
.nav-links a[aria-current="page"]{color:var(--text);box-shadow:0 2px 0 var(--text)}
@media (hover:hover){.nav-links a:hover,.nav-link:hover{color:var(--text)}}
.nav-menu{display:none}
@media (max-width:640px){
  .nav-in{padding:0 20px;gap:12px}
  .nav-links{display:none}
  .nav-links.open{display:flex;position:fixed;inset:var(--nav-h) 0 0 0;background:var(--bg);flex-direction:column;gap:0;padding:8px 20px;z-index:50}
  .nav-links.open a{font-size:20px;line-height:28px;padding:16px 0;border-bottom:1px solid var(--line);color:var(--text)}
  .nav-menu{display:inline-flex}
}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border-radius:var(--r-md);border:1px solid transparent;
  font:500 14px/20px var(--font);letter-spacing:0;background:var(--ink);color:var(--on-ink);text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform var(--t-press) var(--ease-out),background-color var(--t-fast) var(--ease-out),opacity var(--t-fast) var(--ease-out)}
@media (hover:hover){.btn:hover{opacity:.88}}
.btn:active{transform:scale(.98)}
.btn[disabled],.btn[aria-busy="true"]{opacity:.4;pointer-events:none}
.btn-secondary{background:var(--bg);color:var(--text);border-color:var(--line-strong)}
.btn-ghost{background:transparent;color:var(--text)}
@media (hover:hover){.btn-secondary:hover,.btn-ghost:hover{background:var(--bg-hover);opacity:1}}
.btn-danger{background:transparent;color:var(--danger)}
@media (hover:hover){.btn-danger:hover{background:var(--bg-hover);opacity:1}}
.btn-danger-solid{background:var(--danger);color:#fff}
.btn-sm{height:32px;padding:0 12px;font-size:13px;border-radius:8px}
.btn-lg{height:52px;padding:0 24px;font-size:16px}
.btn-block{width:100%}
.linkish{all:unset;cursor:pointer;color:var(--text);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px;font:inherit}

/* ---------- Fields ---------- */
.field{display:grid;gap:8px;margin:0 0 16px}
.label{font:500 14px/20px var(--font)}
.label .opt{color:var(--text-2);font-weight:400;margin-left:6px}
.help{font-size:13px;line-height:18px;color:var(--text-2)}
.input,.select,.textarea{width:100%;height:44px;padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--bg);color:var(--text);
  font:400 16px/24px var(--font);transition:border-color var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out)}
.textarea{height:auto;min-height:96px;padding:10px 12px;resize:vertical}
@media (hover:hover){.input:hover,.select:hover,.textarea:hover{border-color:var(--g8)}}
.input:focus-visible,.select:focus-visible,.textarea:focus-visible{border-color:var(--text);outline:0;box-shadow:0 0 0 3px var(--bg-active)}
.input[aria-invalid="true"]{border-color:var(--danger)}
.error{color:var(--danger);font-size:13px;line-height:18px}
.ok{color:var(--text-2);font-size:13px;line-height:18px}
.code-input{font:500 28px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;height:64px;text-align:center}
.check{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:20px;cursor:pointer}
.check input{width:18px;height:18px;margin:1px 0 0;flex:none;accent-color:var(--ink)}
.toggle{display:flex;justify-content:space-between;gap:16px;align-items:center}
.inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.inline .input{flex:1;min-width:10rem}

/* Segmented control */
.seg{display:inline-flex;padding:3px;border-radius:var(--r-md);background:var(--bg-subtle);border:1px solid var(--line);gap:2px}
.seg button{all:unset;cursor:pointer;padding:7px 12px;border-radius:7px;font:500 13px/18px var(--font);color:var(--text-2)}
.seg button[aria-pressed="true"]{background:var(--bg);color:var(--text);box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(0,0,0,.04)}

/* Onboarding choices */
.choice{display:flex;gap:12px;align-items:flex-start;padding:16px;border:1px solid var(--line-strong);border-radius:var(--r-lg);cursor:pointer;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.choice+.choice{margin-top:8px}
.choice input{margin:4px 0 0;width:18px;height:18px;accent-color:var(--ink);flex:none}
.choice:has(input:checked){border-color:var(--text);box-shadow:inset 0 0 0 1px var(--text)}
.choice .t{font:500 16px/24px var(--font)}
.choice .d{font-size:14px;line-height:20px;color:var(--text-2)}

/* ---------- Lists (the default container) ---------- */
.list{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--bg)}
.row{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 16px;color:inherit;text-decoration:none;transition:background-color var(--t-fast) var(--ease-out)}
.row+.row{border-top:1px solid var(--line)}
a.row,button.row{cursor:pointer}
button.row{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 16px;width:100%;cursor:pointer}
.list>button.row+button.row,.list>.row+button.row,.list>button.row+.row{border-top:1px solid var(--line)}
@media (hover:hover){a.row:hover,button.row:hover{background:var(--bg-hover)}}
.row-main{flex:1;min-width:0}
.row-title{font:500 14px/20px var(--font)}
.row-meta{font-size:13px;line-height:18px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-meta.wrap{white-space:normal}
.row-trail{font-size:13px;line-height:18px;color:var(--text-2);flex:none}
.chev{width:16px;height:16px;color:var(--text-3);flex:none}
.row-empty{padding:16px;color:var(--text-2);font-size:14px;line-height:20px}
.list-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:48px 0 12px}
.list-head h2{font-size:20px;line-height:28px;letter-spacing:-0.01em}
.list-head .count{color:var(--text-2);font-weight:400}
.row .check{flex:none}
.row.done .row-title{color:var(--text-2);text-decoration:line-through;text-decoration-color:var(--text-3)}
.row-expand{padding:0 16px 16px;border-top:0!important}
.skel{height:56px;padding:12px 16px}
.skel i{display:block;height:10px;border-radius:4px;background:var(--bg-subtle);width:40%}
.skel i+i{margin-top:8px;width:25%}

/* Panels (plans, "in short", follow-up) */
.panel{border:1px solid var(--line);border-radius:var(--r-lg);padding:24px}
.band{background:var(--bg-subtle);border-radius:var(--r-lg);padding:16px 20px}
.plans{display:grid;gap:16px;grid-template-columns:1fr 1fr}
@media (max-width:760px){.plans{grid-template-columns:1fr}}
.price{font:500 40px/44px var(--font);letter-spacing:-0.025em;margin:12px 0 4px}
.price small{font-size:16px;color:var(--text-2);letter-spacing:0}
.meter{height:4px;background:var(--bg-active);border-radius:2px;overflow:hidden;margin:12px 0 8px}
.meter>i{display:block;height:100%;background:var(--text)}

/* ---------- Chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:var(--r-sm);background:var(--bg-subtle);border:1px solid var(--line);font:500 13px/18px var(--font);color:var(--text)}
.chip .x{all:unset;cursor:pointer;width:16px;height:16px;display:grid;place-items:center;color:var(--text-2);border-radius:4px;font-size:14px;line-height:1}
@media (hover:hover){.chip .x:hover{background:var(--bg-active);color:var(--text)}}
.tag{display:inline-block;font-size:12px;line-height:16px;padding:2px 6px;border-radius:var(--r-sm);border:1px solid var(--line);color:var(--text-2);vertical-align:2px;margin-left:6px}

/* ---------- Toasts ---------- */
.toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);display:grid;gap:8px;z-index:60;pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:12px;min-height:44px;padding:10px 14px 10px 16px;border-radius:12px;background:var(--ink);color:var(--on-ink);
  font:500 14px/20px var(--font);box-shadow:var(--shadow-float);animation:toast-in var(--t-base) var(--ease-out)}
.toast .undo{all:unset;cursor:pointer;color:inherit;opacity:.7;text-decoration:underline;text-underline-offset:3px}
@keyframes toast-in{from{opacity:0;transform:translateY(8px) scale(.98)}}

/* ---------- Modals ---------- */
dialog.modal{width:min(440px,calc(100vw - 32px));padding:24px;border:0;border-radius:var(--r-xl);background:var(--bg);color:var(--text);box-shadow:var(--shadow-modal)}
dialog.modal::backdrop{background:var(--scrim)}
dialog.modal[open]{animation:modal-in var(--t-modal) var(--ease-out)}
@keyframes modal-in{from{opacity:0;transform:translateY(8px) scale(.98)}}
.modal h2{font-size:20px;line-height:28px;letter-spacing:-0.015em}
.modal p{color:var(--text-2);margin-top:8px}
.modal .field{margin-top:16px}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:24px}

/* ---------- The "Tell Sotto what to change" box ---------- */
.tell-label{display:block;font:500 14px/20px var(--font);margin-bottom:8px}
.tell-box{display:flex;align-items:flex-end;gap:8px;padding:8px 8px 8px 16px;border:1px solid var(--line-strong);border-radius:var(--r-lg);background:var(--bg);transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.tell-box:focus-within{border-color:var(--text);box-shadow:0 0 0 3px var(--bg-active)}
.tell-box textarea{flex:1;border:0;outline:0;resize:none;background:transparent;font:400 16px/24px var(--font);padding:6px 0;max-height:200px;color:var(--text);min-height:36px}
.tell-hints{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.hint{all:unset;cursor:pointer;font-size:13px;line-height:18px;color:var(--text-2);padding:4px 8px;border-radius:var(--r-sm);background:var(--bg-subtle)}
@media (hover:hover){.hint:hover{color:var(--text);background:var(--bg-hover)}}
.tell-under{margin-top:8px}
.tell-result{margin-top:16px}
.diff{list-style:none;padding:0;margin:0;border:1px solid var(--line);border-radius:var(--r-lg)}
.diff li{display:flex;gap:10px;padding:10px 16px;font-size:14px;line-height:20px;margin:0}
.diff li+li{border-top:1px solid var(--line)}
.diff .g{font-family:var(--mono);color:var(--text-2);width:12px;flex:none}
.mic{all:unset;cursor:pointer;width:32px;height:32px;display:grid;place-items:center;border-radius:8px;color:var(--text-2)}
.mic[aria-pressed="true"]{color:var(--live)}
@media (hover:hover){.mic:hover{background:var(--bg-hover);color:var(--text)}}

/* ---------- Live dot ---------- */
.dot{display:inline-block;width:8px;height:8px;border-radius:var(--r-full);background:var(--live);vertical-align:1px;margin-right:6px}
.dot.pulse{animation:pulse 2.4s var(--ease-in-out) infinite}
@keyframes pulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.dot.pulse{animation:none}}

/* ---------- The lens mock (the only dark, green thing) ---------- */
.lens{margin:0}
.lens-glass{aspect-ratio:2/1;width:min(576px,100%);background:var(--lens-bg);border-radius:var(--r-xl);padding:4.5% 5%;color:var(--lens);
  font:400 clamp(11px,2.4vw,15px)/1.6 var(--font);letter-spacing:0;display:grid;grid-template-rows:auto 1fr auto;
  box-shadow:inset 0 0 0 1px rgba(61,240,124,.12),0 40px 80px -40px rgba(0,0,0,.6)}
.lens-glass ::selection{background:rgba(61,240,124,.25)}
.lens-status{display:flex;justify-content:space-between;font-size:.85em;letter-spacing:.04em}
.lens .dim{color:var(--lens-dim)}
.lens-body{white-space:pre-line;margin-top:5%}
.lens-body .ln{opacity:1;transition:opacity var(--t-base) var(--ease-out)}
.lens-body .ln.off{opacity:0}
.lens-hint{font-size:.85em}
.lens figcaption{margin-top:12px}
.lens-sm .lens-glass{font-size:clamp(10px,1.6vw,12px)}

/* ---------- Marketing ---------- */
.hero{display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:center;padding-top:96px}
.hero .lead{margin-top:20px;max-width:30em}
.hero .row-actions{margin-top:32px}
.hero .small{margin-top:12px}
@media (max-width:960px){.hero{grid-template-columns:1fr;padding-top:48px}}
.full-band{background:var(--bg-subtle);padding:128px 0;margin-top:128px}
@media (max-width:640px){.full-band{padding:80px 0;margin-top:80px}}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:32px}
.three h3{font-size:17px;line-height:24px;margin-top:20px}
.three p{color:var(--text-2);margin-top:6px}
@media (max-width:860px){.three{grid-template-columns:1fr}}
.uses .row{min-height:72px;align-items:baseline;padding:20px 0;border-top:1px solid var(--line)}
.uses .row h3{width:200px;flex:none}
.uses .row p{color:var(--text-2)}
@media (max-width:640px){.uses .row{flex-direction:column;gap:4px}}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:24px 48px;margin-top:32px}
.facts h3{font-size:17px;line-height:24px}
.facts p{color:var(--text-2);margin-top:4px}
@media (max-width:640px){.facts{grid-template-columns:1fr}}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin:32px 0;padding:0;list-style:none;counter-reset:s}
.steps li{counter-increment:s;margin:0}
.steps li::before{content:counter(s);display:block;font:500 14px/20px var(--mono);color:var(--text-2);margin-bottom:12px}
.steps h3{font-size:17px;line-height:24px}
.steps p{color:var(--text-2);margin-top:4px}
@media (max-width:760px){.steps{grid-template-columns:1fr}}
.footer{border-top:1px solid var(--line);margin-top:128px}
.footer-in{max-width:var(--w-site);margin:0 auto;padding:48px 24px 64px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;font-size:14px;line-height:20px}
.footer h4{font:500 13px/18px var(--font);color:var(--text-2);margin:0 0 12px}
.footer ul{list-style:none;padding:0;margin:0}
.footer li+li{margin-top:8px}
.footer a{text-decoration:none;color:var(--text)}
@media (hover:hover){.footer a:hover{text-decoration:underline}}
@media (max-width:760px){.footer-in{grid-template-columns:1fr 1fr}}

/* ---------- Documents (legal and the conversation write-up) ---------- */
.doc{max-width:var(--w-text)}
.doc h2{font-size:20px;line-height:28px;letter-spacing:-0.01em;margin-top:48px}
.doc h3{font-size:16px;line-height:24px;margin-top:24px}
.doc p,.doc ul,.doc ol,.doc table{margin-top:12px}
.doc p,.doc li{line-height:26px}
.in-short{background:var(--bg-subtle);border-radius:var(--r-lg);padding:20px 24px;margin-top:24px}
.in-short h2{font-size:14px;line-height:20px;margin:0;color:var(--text-2);letter-spacing:0}
.in-short ul{margin-top:8px}
.table{width:100%;border-collapse:collapse;font-size:14px;line-height:20px}
.table th{text-align:left;font-weight:500;color:var(--text-2);padding:8px 12px 8px 0;border-bottom:1px solid var(--line-strong);vertical-align:bottom}
.table td{padding:12px 12px 12px 0;border-bottom:1px solid var(--line);vertical-align:top}
.table-wrap{overflow-x:auto}
.script{border-left:2px solid var(--line-strong);padding-left:16px;margin-top:12px}
.writeup h3{font-size:16px;line-height:24px;margin-top:32px}
.writeup h3:first-child{margin-top:0}
.writeup p,.writeup ul,.writeup ol{margin-top:8px}
.writeup .first{font-size:18px;line-height:28px;color:var(--text);letter-spacing:-0.01em}

/* ---------- Auth and onboarding ---------- */
.narrow{max-width:480px;margin:0 auto;padding:48px 24px 96px}
.narrow-sm{max-width:400px}
.progress{height:2px;background:var(--line);margin-top:-1px}
.progress>i{display:block;height:100%;background:var(--text);transition:width var(--t-modal) var(--ease-out)}
.step-meta{display:flex;justify-content:space-between;align-items:center}

/* ---------- Controls ---------- */
.gesture{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding:32px 0;border-top:1px solid var(--line);align-items:center}
.gesture h3{font-size:20px}
.gesture p{color:var(--text-2);margin-top:6px}
.gesture svg{width:64px;height:64px;color:var(--text);margin-bottom:12px}
@media (max-width:760px){.gesture{grid-template-columns:1fr;gap:16px}}
.kbd{font:500 12px/16px var(--mono);padding:2px 6px;border:1px solid var(--line-strong);border-radius:var(--r-sm)}