/* The paper look (DS2, docs/specs/ds2-paper-look.md; this file is DS2-1, ds2-1-paper-and-motion.md).
   The reading pages' shared stylesheet: the homepage, /docs, /stats, /holders, /explore and /face load it, each
   beside its own. /ai, /os, /live and /trade never do: they keep design/cumlabs.css and their own files.

   Paper ground, ink text, ONE accent (violet). Two type voices: Geist for reading, Geist Mono for anything that
   reads like an instrument. Nothing sits in a box unless you can type in it or press it; sections and rows are
   divided by hairlines and space. No cards, shadows or glow, and no colour for status: a filled dot is live, a
   hollow one is planned, each beside its word.

   Contrast: every text colour here is 4.5:1 or better on --paper, --paper-2 and --white, and every label is on
   its own fill (src/web/test/paper.test.js computes both from this file).
   Fonts are our own copies, by relative URL, so they resolve under a release's /v/<sha>/.
   A page's own layout stays in that page's stylesheet. */
@font-face{font-family:"Geist";font-weight:100 900;font-style:normal;font-display:swap;src:url(../fonts/Geist-Variable.woff2) format("woff2")}
@font-face{font-family:"Geist Mono";font-weight:100 900;font-style:normal;font-display:swap;src:url(../fonts/GeistMono-Variable.woff2) format("woff2")}

/* ---------- tokens ---------- */
:root{
  color-scheme:light;
  --paper:#f6f6f1;            /* every page's ground */
  --paper-2:#eeeee7;          /* pressed, selected, code */
  --white:#ffffff;            /* the inside of a field you type in */
  --ink:#141412;              /* text; the outline of things you can use (17:1 on paper) */
  --ink-2:#4b4b46;            /* reading text (8.1:1) */
  --ink-3:#6b6b64;            /* labels and metadata (4.95:1) */
  --line:#d9d9d0;             /* hairlines between sections and rows */
  --acc:#6c3bff;              /* the accent: the big type, the main button, the picture, the selected mark (5.2:1) */
  --acc-ink:#5a2ee0;          /* small accent text; the main button's hover (6.7:1) */
  --on-acc:#ffffff;           /* the label on an accent fill (5.7:1) */
  --ui:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
  --gut:clamp(16px,2.2vw,32px);
  --max:1380px;
  --r:8px; --r-sm:6px; --r-pill:999px;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.5 var(--ui);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit}
img,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--acc-ink);outline-offset:3px;border-radius:4px}
::selection{background:var(--acc);color:var(--on-acc)}
[hidden]{display:none !important}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- the two voices ---------- */
.mono{font:400 12.5px/1.5 var(--mono);letter-spacing:.01em}
.mono-sm{font:400 11.5px/1.5 var(--mono);letter-spacing:.01em}
.dim{color:var(--ink-3)}
.display{font-weight:380;letter-spacing:-.058em;line-height:.98;text-wrap:balance}   /* a headline: large, light, tight */
.acc{color:var(--acc)}
.num{font-variant-numeric:tabular-nums}
.link{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.link:hover{text-decoration-thickness:2px}

/* ---------- things you can press ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:var(--r);border:1px solid var(--ink);background:transparent;color:var(--ink);font:600 16px/1 var(--ui);letter-spacing:-.01em;text-decoration:none;cursor:pointer;transition:background .12s ease,color .12s ease,border-color .12s ease}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn-main{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}   /* ONE per screen */
.btn-main:hover{background:var(--acc-ink);border-color:var(--acc-ink);color:var(--on-acc)}
.btn-md{min-height:40px;padding:0 18px;font-size:15px}
.btn-sm{min-height:32px;padding:0 12px;border-radius:var(--r-sm);font:500 12px/1 var(--mono);letter-spacing:.01em}
.btn-quiet{border-color:transparent;padding-inline:8px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;font-weight:500}
.btn-quiet:hover{background:transparent;color:var(--ink);text-decoration-thickness:2px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
/* An arrow is a box of its own: a link's underline stops before it, and it can lean when pointed at (motion.css).
   It is one here, not there, so the page looks the same to someone who asked for less motion. */
.arrow{display:inline-block;font-family:var(--mono);font-weight:400}

/* ---------- things you can type in ---------- */
.field,.select{display:block;width:100%;min-height:44px;padding:0 14px;border:1px solid var(--ink);border-radius:var(--r);background:var(--white);font:400 15px/1.4 var(--ui);color:var(--ink)}
textarea.field{padding:12px 14px;resize:vertical}
.field::placeholder{color:var(--ink-3)}
.field:focus,.select:focus{outline:2px solid var(--acc-ink);outline-offset:2px}
.label{display:block;margin-bottom:6px;font:400 12.5px/1.4 var(--mono);color:var(--ink-3)}

/* a choice between two or three values */
.seg{display:inline-flex;padding:3px;border-radius:var(--r-pill);background:var(--paper-2)}
.seg button{appearance:none;border:0;border-radius:var(--r-pill);min-height:32px;padding:0 14px;background:transparent;color:var(--ink-2);font:500 13.5px/1 var(--ui);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--white);color:var(--ink);box-shadow:0 0 0 1px var(--line)}

/* tabs inside a page: mono, the selected one underlined in ink */
.tabrow{display:flex;gap:22px;border-bottom:1px solid var(--line);overflow-x:auto}
.tabrow button,.tabrow a{appearance:none;border:0;background:none;padding:12px 0 11px;margin-bottom:-1px;border-bottom:2px solid transparent;font:400 12.5px/1 var(--mono);color:var(--ink-3);text-decoration:none;white-space:nowrap;cursor:pointer}
.tabrow [aria-pressed="true"],.tabrow [aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}

/* ---------- status ---------- */
/* A filled dot is live and a hollow one is planned. The word always sits beside it. */
.st{display:inline-flex;align-items:center;gap:8px;font:400 12.5px/1 var(--mono);white-space:nowrap}
.st::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink);border:1px solid var(--ink);flex:none}
.st.plan{color:var(--ink-3)}
.st.plan::before{background:transparent;border-color:var(--ink-3)}
/* a tag that does nothing never looks like a button */
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border:1px solid var(--line);border-radius:var(--r-pill);font:400 11.5px/1.4 var(--mono);color:var(--ink-2);white-space:nowrap}

/* ---------- rows, tables, numbers ---------- */
/* a readout: label left, value right, hairlines between */
.rows{display:grid;gap:0}
.row{display:flex;align-items:baseline;gap:10px;padding:9px 0;border-top:1px solid var(--line);font:400 12.5px/1.5 var(--mono)}
.row:last-child{border-bottom:1px solid var(--line)}
.row dt{color:var(--ink-3);flex:none}
.row dd{margin-left:auto;text-align:right}
.rows.bare .row{border:0;padding:3px 0}
.lead{flex:1;min-width:16px;border-bottom:1px dotted var(--ink-3);transform:translateY(-4px);opacity:.6}   /* dots from a label to its value */
/* a table: mono heads, hairline rows, numbers to the right */
.table{width:100%;border-collapse:collapse;font-size:14.5px}
.table th{padding:10px 12px 10px 0;border-bottom:1px solid var(--line);font:400 11.5px/1.4 var(--mono);color:var(--ink-3);text-align:left;white-space:nowrap}
.table td{padding:12px 12px 12px 0;border-bottom:1px solid var(--line);vertical-align:baseline}
.table .r{text-align:right;padding-right:0;padding-left:12px;font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums}
.table tr:hover td{background:var(--paper-2)}
/* a big number with its caption */
.big{display:grid;gap:6px}
.big b{font-size:clamp(30px,3vw,44px);font-weight:380;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.big span{font:400 12.5px/1.4 var(--mono);color:var(--ink-3)}

/* ---------- words set apart, without a box ---------- */
.note{padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--ink-2);font-size:14.5px}
.note b{font:500 12.5px/1.4 var(--mono);color:var(--ink);margin-right:8px}
.code{display:block;padding:14px 16px;border-radius:var(--r);background:var(--paper-2);font:400 12.5px/1.6 var(--mono);overflow-x:auto;white-space:pre}
code{font-family:var(--mono);font-size:.9em}
.kbd{display:inline-block;padding:2px 6px;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;font:400 11px/1.3 var(--mono);color:var(--ink-2)}

/* ---------- pictures ---------- */
/* A picture keeps its own colours inside a plain frame. */
.frame{position:relative;border-radius:var(--r);overflow:hidden;background:#050507}
.frame.light{background:var(--paper-2)}

/* ---------- pieces a reading page is made of (DS2-4: /docs is the first to use them) ---------- */
/* Under a page's headline: its opening sentence, a mono line of small facts, a row of buttons. */
.lede{color:var(--ink-2);font-size:clamp(17px,1.35vw,20px);line-height:1.45;max-width:32em}
.lede b{color:var(--ink);font-weight:500}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:16px;color:var(--ink-3)}
.nb{white-space:nowrap}
.ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(22px,2.4vw,32px)}
/* An address: mono, with small buttons. On a phone its short form shows. */
.addr{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px}
.addr code{font:400 12.5px/1.4 var(--mono);overflow-wrap:anywhere;margin-right:4px;color:var(--ink)}
.addr .short{display:none}
/* A term and what it means: a mono label on the left, the reading text on the right, hairlines between. */
.facts{border-bottom:1px solid var(--line)}
.facts > div{display:grid;grid-template-columns:168px minmax(0,1fr);gap:20px;padding:13px 0 14px;border-top:1px solid var(--line)}
.facts dt{padding-top:3px;font:400 12.5px/1.6 var(--mono);color:var(--ink-3)}
.facts dd{min-width:0;max-width:35em;font-size:16px;line-height:1.6;color:var(--ink-2)}
.facts dd .addr{margin:-3px 0 6px}
/* Words set apart: a hairline above and below. A warning's are ink, and it has no colour of its own. */
.aside{padding:14px 0 15px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.aside p{font-size:15.5px;line-height:1.55;color:var(--ink-2);max-width:44em}
.aside p + p{margin-top:8px}
.aside b{font-weight:500;color:var(--ink)}
.aside.warn{border-color:var(--ink)}
.aside.warn p{color:var(--ink)}
/* Lines of text divided by hairlines. */
.lines{border-bottom:1px solid var(--line)}
.lines li{padding:12px max(0px,calc(100% - 40em)) 13px 0;border-top:1px solid var(--line);font-size:16px;line-height:1.6;color:var(--ink-2)}
/* Questions: plain rows that open. They are the browser's own details, so they work with no script. */
.faq{border-bottom:1px solid var(--line)}
.faq details{border-top:1px solid var(--line)}
.faq summary{list-style:none;display:flex;align-items:baseline;justify-content:space-between;gap:20px;min-height:44px;padding:14px 0;cursor:pointer;font-size:18px;font-weight:450;letter-spacing:-.015em;line-height:1.35;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font:400 16px/1 var(--mono);color:var(--ink-3)}
.faq details[open] summary::after{content:"\2212"}
.faq summary:hover::after{color:var(--ink)}
.faq details > p{padding:0 40px 20px 0;max-width:38em;font-size:16.5px;line-height:1.6;color:var(--ink-2)}

/* ---------- a small page's head (DS2-5): the label and the big light headline, the opening sentence beside them ---------- */
.phead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,72px);align-items:end;padding-block:clamp(36px,5.4vw,80px) clamp(36px,4.8vw,72px)}
.phead h1{margin-top:14px;font-size:clamp(40px,5.2vw,78px)}

/* ---------- a section of a reading page (DS2-5): a hairline, its title on the left, a few words on the right, then its body ---------- */
/* Its hairline stops at the gutters, so it is drawn as a background, as the footer's is. */
.sec{padding-block:clamp(40px,5.4vw,84px);scroll-margin-top:0;background:linear-gradient(var(--line),var(--line)) no-repeat var(--gut) 0 / calc(100% - 2 * var(--gut)) 1px}
.sec-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,72px);align-items:end}
.sec-top h2{font-size:clamp(32px,3.7vw,54px);font-weight:400;letter-spacing:-.045em;line-height:1.02;text-wrap:balance}
.sec-top .num{display:flex;align-items:center;gap:14px;margin-bottom:14px;font:400 12.5px/1 var(--mono);color:var(--ink-3)}
.sec-top p:not(.num){color:var(--ink-2);font-size:17px;line-height:1.5;max-width:32em}
.sec-top.notes{align-items:start}
.sec-body{margin-top:clamp(28px,3.4vw,48px)}
/* A section that ends in a ruled grid: the next section's hairline closes the grid, so two hairlines never follow
   each other with nothing between them. */
.sec:has(> :is(.kpis,.charts,.tiles,.moves,.rules):last-child){padding-bottom:0}
.sec > :is(.kpis,.charts,.tiles,.moves,.rules):last-child{margin-bottom:-1px}
.sec h3{font-size:22px;font-weight:450;letter-spacing:-.03em;line-height:1.2}
.sec a:not(.btn):not([class]),.fine a,.lede a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.sec a:not(.btn):not([class]):hover,.fine a:hover{text-decoration-thickness:2px}
.fine{color:var(--ink-3);font-size:14px;line-height:1.5;max-width:44em}
/* Two things side by side, a hairline between: two definitions, or two lists. */
.defs{display:grid;grid-template-columns:1fr 1fr}
.def{padding-right:clamp(0px,3.2vw,56px)}
.def + .def{padding-left:clamp(0px,3.2vw,56px);padding-right:0;border-left:1px solid var(--line)}
.def-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.def h3{font-size:30px;font-weight:400;letter-spacing:-.04em}
.two{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.two > div{min-width:0;padding-right:clamp(0px,3.2vw,56px)}
.two > div + div{padding-left:clamp(0px,3.2vw,56px);padding-right:0;border-left:1px solid var(--line)}
.two.even{grid-template-columns:1fr 1fr}
/* A big number's label above it, and its unit after it. */
.k{font:400 12.5px/1.3 var(--mono);color:var(--ink)}
.big .unit{margin-left:8px;font:400 12.5px/1 var(--mono);letter-spacing:0;color:var(--ink-3)}
/* Nothing yet: said plainly under a hairline. */
.none{margin-top:12px;padding-top:14px;border-top:1px solid var(--line);color:var(--ink-2);font-size:15.5px}
.none small{display:block;margin-top:4px;max-width:36em;color:var(--ink-3);font-size:14px}
/* A table of figures: every column after the first is a number. A wide one scrolls inside itself. */
.nums td:not(:first-child),.nums th:not(:first-child){text-align:right;padding-right:0;padding-left:12px}
.nums td:not(:first-child){font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums}
.tbl-x{overflow-x:auto}

/* ---------- a dialog: the one thing that floats. An ink outline, no shadow. ---------- */
.scrim{position:fixed;inset:0;display:grid;place-items:center;padding:16px;background:rgba(20,20,18,.38)}
.dialog{width:min(480px,100%);padding:24px;border:1px solid var(--ink);border-radius:12px;background:var(--paper)}

/* ---------- Yuna in characters (DS2-2) ---------- */
/* Her box, in the shape of her grid: 120 columns of 6 by 76 rows of 10. Its two layers, ink and accent, are made
   and fitted to the box by landing/yuna-chars.js, so no browser's smallest font size can break her. */
.chars{position:relative;width:100%;aspect-ratio:720/760;overflow:hidden;user-select:none}
.chars pre{position:absolute;left:0;top:0;margin:0;font:700 10px/10px var(--mono);letter-spacing:0;white-space:pre;transform-origin:0 0;color:var(--ink)}
.chars pre.a{color:var(--acc)}

/* ---------- the top line, which every reading page shares ---------- */
.top{display:flex;align-items:center;gap:28px;padding-block:18px}
/* The wordmark is the brand kit's own lockup: the uwu face in one colour, "clank uwu" heavy and tight with "uwu" in
   the accent, MODEL beneath. It is a picture (design/clankuwu-logo.png, three times this size, made from the real
   fonts), so no font is loaded for nine letters and the name can't flash in another one. It is as tall as the top
   line's button. "beta" is a state, not part of the name: a tag, set apart. The footer's wordmark has none. */
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;white-space:nowrap}
.brand img{width:128px;height:32px}
.brand .beta{padding:3px 7px;border:1px solid var(--line);border-radius:var(--r-pill);font:500 10px/1 var(--mono);letter-spacing:.04em;color:var(--ink-3)}
.top nav{display:flex;gap:22px;margin-left:auto}
.top nav a{font:400 12.5px/1 var(--mono);text-decoration:none;color:var(--ink-2)}
.top nav a:hover,.top nav a[aria-current]{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.top .tag{font:400 12.5px/1 var(--mono);color:var(--ink-3)}

/* ---------- the footer, which every reading page shares ---------- */
/* Its hairline stops at the gutters, so it is drawn as a background. It starts at the border box, which is where a
   border would sit. */
.foot{padding-block:36px 26px;background:linear-gradient(var(--line),var(--line)) no-repeat border-box var(--gut) 0 / calc(100% - 2 * var(--gut)) 1px}
.cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:28px}
.cols h4{margin:0 0 12px;font:500 12.5px/1 var(--mono)}
.cols li{margin-top:7px}
.cols a{font:400 12.5px/1.5 var(--mono);color:var(--ink-2);text-decoration:none}
.cols a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.cols p{margin-top:12px;max-width:30em;color:var(--ink-3)}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:38px;color:var(--ink-3)}

/* On a phone the top line keeps the wordmark and its one button, and the footer folds to two columns. */
@media (max-width:900px){
  .top nav,.top .tag{display:none}
  .top > .btn{margin-left:auto}
  .cols{grid-template-columns:1fr 1fr}
  .ctas .btn{flex:1 1 180px}
  .addr .full{display:none}
  .addr .short{display:inline}
  .facts > div{grid-template-columns:1fr;gap:3px}
  .facts dt{padding-top:0}
  .faq details > p{padding-right:0}
  .phead,.sec-top,.defs,.two,.two.even{grid-template-columns:1fr}
  .phead{align-items:start;padding-top:18px}
  .phead h1{font-size:clamp(40px,11.5vw,78px)}
  .sec-top{align-items:start;gap:14px}
  .def{padding-right:0}
  .def + .def{padding-left:0;border-left:0;border-top:1px solid var(--line);margin-top:28px;padding-top:28px}
  .two > div{padding-right:0}
  .two > div + div{padding-left:0;border-left:0;margin-top:36px}
  .big .unit{display:block;margin:8px 0 0}
}
/* On the narrowest phones the wordmark and the button are all the top line holds. */
@media (max-width:360px){
  .brand .beta{display:none}
}
/* ---------- AN2: the analytics card, "Help us improve clankuwu?" (design/analytics.js) ----------
   The same card is in app.css and live/live.css, with these tokens written out, so every page shows one card. Flat,
   as the paper is: an ink outline on white. Its two answers are equal: neither is the accent. In the middle at the
   bottom of every page (the owner, 15 October). */
.an-card{position:fixed;z-index:39;left:0;right:0;bottom:24px;box-sizing:border-box;width:min(420px,calc(100vw - 48px));max-height:calc(100dvh - 48px);
  overflow:auto;margin:0 auto;padding:20px 22px 18px;border:1px solid var(--ink);border-radius:8px;background:var(--white);color:var(--ink);
  font:400 14.5px/1.5 var(--ui);text-align:left;letter-spacing:0}
.an-card *{box-sizing:border-box}
.an-title{margin:0 0 8px;font:600 17px/1.3 var(--ui);letter-spacing:-.01em;color:var(--ink);text-transform:none}
.an-title:focus{outline:none}
.an-card[data-an-mode="prefs"] .an-title{padding-right:60px}
.an-now{margin:0 0 6px;font:500 12.5px/1.4 var(--mono);color:var(--ink-3)}
.an-lead{margin:0 0 10px;color:var(--ink-2)}
.an-more{margin:0 0 14px}
.an-more summary{width:max-content;cursor:pointer;font:500 12.5px/1.6 var(--mono);color:var(--ink);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.an-list{display:grid;gap:8px;margin:10px 0 0}
.an-list dt{margin:0;font-weight:600;font-size:13.5px;color:var(--ink)}
.an-list dd{margin:2px 0 0;font-size:13.5px;color:var(--ink-2)}
.an-privacy{margin:10px 0 0;font-size:13.5px;color:var(--ink-2)}
.an-privacy a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.an-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.an-btn{appearance:none;min-height:44px;margin:0;padding:0 14px;border:1px solid var(--ink);border-radius:8px;background:transparent;color:var(--ink);
  font:500 15px/1.2 var(--ui);cursor:pointer}
.an-btn:hover{background:var(--ink);color:var(--white)}
.an-close{position:absolute;top:12px;right:12px;appearance:none;margin:0;padding:6px 8px;border:0;background:none;color:var(--ink-3);
  font:500 12px/1 var(--mono);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.an-close:hover{color:var(--ink)}
.an-btn:focus-visible,.an-close:focus-visible,.an-more summary:focus-visible,.an-privacy a:focus-visible,.an-title:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
@media (max-width:640px){
  .an-card{left:12px;right:12px;bottom:12px;width:auto;max-height:calc(100dvh - 24px);padding:16px 16px 14px;font-size:14px}
  .an-title{font-size:16px}
}
/* Its level: under cumAI's drawers and menus (40 and up) and over the reading pages. A dialog of the page's own is never under it. */
/* A face for OBS (/face#…&obs=1) is the face alone. */
html.obs .an-card{display:none}
@media print{.an-card{display:none}}