/* Extensions: the picture in each extension's panel on extensions.html, built
   by v-extensions.js into the [data-xv] slots (site/README.md, "Glimpses").

   Each picture is drawn at design pixels inside .vx-art and scaled to its slot
   as one piece; under 520px of slot it takes its narrow arrangement (.vx-n).
   The numbers are the app's dark theme (theme.css) and the extensions' own
   sheets (dictation main.css, read-aloud main.css, editor.css's names).
   Everything is scoped under .vx. */

.vx {
  --vx-text: #ececea; --vx-sec: #9b9b98; --vx-faint: #74767b; --vx-rule: rgba(255, 255, 255, .09);
  --vx-accent: #6cb4ff; --vx-surface: #1b1b1e; --vx-good: #46c47c;
  --vx-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  --vx-serif: 'Latin Modern Roman', 'CMU Serif', 'Times New Roman', Times, Georgia, serif;
  --vx-ease: cubic-bezier(.2, .7, .2, 1);
  position: relative; width: 100%; font-family: var(--ui); color: var(--vx-text); text-align: left; line-height: 1.45;
  -webkit-font-smoothing: antialiased; -webkit-user-select: none; user-select: none;
}
.vx-art { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
[data-thumb] > .vx { position: absolute; inset: 0; }
.vx .g svg { display: block; fill: currentColor; width: calc(var(--gw, 1) * 1em); height: calc(var(--gh, 1) * 1em); }
.vx svg.ln { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* A piece of the app, floating in the night. */
.vx-gp {
  position: absolute; overflow: hidden; border-radius: 16px;
  background: linear-gradient(180deg, rgba(34, 35, 40, .97), rgba(20, 21, 24, .98));
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 70px -26px rgba(0, 0, 0, .92), 0 0 60px -24px rgba(47, 123, 255, .45);
}
.vx-cur { display: inline-block; width: 1.5px; height: 1.15em; margin-right: -1.5px; vertical-align: text-bottom; background: var(--vx-text); }
.vx-idle .vx-cur { animation: vx-blink 1.1s steps(1) infinite; }
@keyframes vx-blink { 50% { opacity: 0; } }
.vx-ring {
  display: inline-block; flex: none; box-sizing: border-box; width: 12px; height: 12px; border-radius: 50%;
  border: 1.6px solid color-mix(in srgb, currentColor 22%, transparent); border-top-color: currentColor;
  animation: vx-spin .8s linear infinite;
}
@keyframes vx-spin { to { transform: rotate(360deg); } }
.vx-fade { transition: opacity .5s ease, transform .6s var(--vx-ease), filter .6s ease; }
.vx-fade.off { opacity: 0; transform: translateY(6px); filter: blur(3px); }
/* The pointer somebody presses with: the system's arrow. */
.vx-ptr { position: absolute; left: 0; top: 0; z-index: 9; width: 18px; height: 24px; transition: transform .9s cubic-bezier(.45, 0, .25, 1), opacity .3s ease; }
.vx-ptr svg { display: block; width: 18px; height: 24px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }
.vx-ptr.press svg { transform: scale(.88); transform-origin: 2px 2px; transition: transform .12s ease; }

/* ================================================================ LaTeX and HTML */
.vx-lx-code { left: 0; top: 26px; width: 376px; height: 320px; font: 12px/21px var(--vx-mono); }
.vx-lx-tab { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-bottom: 1px solid var(--vx-rule); font: 500 12.5px/1 var(--ui); color: var(--vx-sec); }
.vx-lx-tab b { color: var(--vx-text); font-weight: 500; }
.vx-lx-lines { padding: 10px 0; }
.vx-lx-lines > div { display: flex; white-space: pre; }
.vx-lx-lines .n { flex: none; width: 34px; padding-right: 12px; text-align: right; color: #5a5c61; }
.vx-lx-lines .on { background: rgba(255, 255, 255, .045); }
.vx .tc { color: #c792ea; } .vx .te { color: #82aaff; } .vx .tm { color: #f78c6c; } .vx .tb { color: #89ddff; }
.vx-lx-pdf { right: 0; top: 0; width: 288px; height: 372px; background: #3a3b40; }
.vx-lx-bar { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-bottom: 1px solid var(--vx-rule); background: var(--vx-surface); font: 500 12.5px/1 var(--ui); color: var(--vx-sec); }
.vx-lx-bar .sp { flex: 1; }
.vx-lx-st { display: inline-flex; align-items: center; gap: 6px; color: var(--vx-sec); font-variant-numeric: tabular-nums; }
.vx-lx-paper { position: absolute; left: 22px; right: 22px; top: 52px; bottom: -40px; padding: 26px 24px; background: #fff; color: #111; font: 10.5px/1.5 var(--vx-serif); box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
.vx-lx-paper h5 { margin: 0; text-align: center; font: 400 17px/1.2 var(--vx-serif); }
.vx-lx-paper .by { margin: 5px 0 16px; text-align: center; font-size: 10px; color: #333; }
.vx-lx-paper h6 { margin: 0 0 5px; font: 700 12px/1.3 var(--vx-serif); }
.vx-lx-paper p { margin: 0; text-align: justify; hyphens: auto; }
.vx-lx-eq { display: flex; justify-content: center; align-items: center; gap: 4px; margin: 10px 0 8px; font: italic 14px/1 var(--vx-serif); border-radius: 4px; transition: opacity .45s ease, filter .45s ease, background-color 1.2s ease; }
.vx-lx-eq.off { opacity: 0; filter: blur(4px); }
.vx-lx-eq.new { background: rgba(108, 180, 255, .22); transition-duration: .2s; }
.vx-lx-eq .r { font-style: normal; }
.vx-lx-eq .fr { display: inline-flex; flex-direction: column; align-items: center; font-style: normal; font-size: 11px; line-height: 1.15; }
.vx-lx-eq .fr span:first-child { border-bottom: .8px solid #111; padding: 0 2px 1px; }
.vx-lx-eq .fr i { font-style: italic; }
.vx-lx-eq .sum { display: inline-flex; flex-direction: column; align-items: center; font-style: normal; line-height: 1; }
.vx-lx-eq .sum b { font-weight: 400; font-size: 21px; line-height: .95; }
.vx-lx-eq .sum small { font-size: 7.5px; font-style: italic; }
.vx-lx-eq sub { font-size: 8px; }
.vx-lx-paper .after { margin-top: 2px; }
.vx-n .vx-lx-code { width: 330px; top: 0; }
.vx-n .vx-lx-pdf { top: 150px; width: 250px; height: 300px; }

/* ================================================================ Sheets */
.vx-sh { left: 0; top: 0; width: 100%; height: 100%; font-size: 13px; }
.vx-sh-fx { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border-bottom: 1px solid var(--vx-rule); }
.vx-sh-fx .ref { width: 42px; color: var(--vx-sec); font-variant-numeric: tabular-nums; }
.vx-sh-fx .fx { color: var(--vx-faint); font-style: italic; font-family: var(--vx-serif); font-size: 14px; }
.vx-sh-fx .f { font-family: var(--vx-mono); font-size: 12.5px; }
.vx-sh-grid { display: grid; grid-template-columns: 40px 1.6fr 1fr 1fr; }
.vx-sh-grid > div { height: 34px; padding: 0 12px; display: flex; align-items: center; border-right: 1px solid var(--vx-rule); border-bottom: 1px solid var(--vx-rule); white-space: nowrap; }
.vx-sh-grid .h { height: 26px; justify-content: center; color: var(--vx-faint); font-size: 11.5px; background: rgba(255, 255, 255, .025); }
.vx-sh-grid .rn { justify-content: center; color: var(--vx-faint); font-size: 11.5px; background: rgba(255, 255, 255, .025); }
.vx-sh-grid .num { justify-content: flex-end; font-variant-numeric: tabular-nums; }
.vx-sh-grid .b { font-weight: 600; }
.vx-sh-grid .sel { box-shadow: inset 0 0 0 2px var(--vx-accent); border-radius: 2px; }
.vx-sh-grid .flash { animation: vx-flash 1.2s ease; }
@keyframes vx-flash { 0% { background: rgba(108, 180, 255, .3); } 100% { background: transparent; } }
.vx-sh-file { position: absolute; left: 14px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--vx-sec); }
.vx-sh-file .g { font-size: 13px; }

/* ================================================================ Dictation */
.vx-dc-page { left: 0; top: 0; width: 100%; height: 250px; padding: 30px 40px; }
.vx-dc-page h4 { margin: 0 0 12px; font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.vx-dc-page p { margin: 0 0 8px; font-size: 15px; line-height: 23px; color: #d6d6d3; }
.vx-dc-page .said { color: var(--vx-text); }
/* The card at the caret: Dictation's .dic-pop in the dark theme. */
.vx-dc-pop {
  position: absolute; left: 0; top: 0; z-index: 3; display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 6px 0 12px;
  background: #222327; border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; font-size: 12px; line-height: 1;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .3);
  opacity: 0; scale: .96; transform-origin: 16px 0; transition: opacity .14s ease-out, scale .14s ease-out;
}
.vx-dc-pop.in { opacity: 1; scale: 1; }
.vx-dc-wave { display: flex; align-items: center; gap: 2px; height: 20px; }
.vx-dc-wave i { display: block; width: 2.5px; height: 20px; border-radius: 2px; background: var(--vx-accent); transform: scaleY(.12); transition: transform 90ms linear; }
.vx-dc-time { min-width: 28px; color: var(--vx-sec); font-variant-numeric: tabular-nums; }
.vx-dc-key { padding: 3px 6px; border-radius: 6px; background: rgba(255, 255, 255, .07); color: var(--vx-sec); }
.vx-dc-x { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; color: var(--vx-sec); }
.vx-dc-x .g { font-size: 10px; }
.vx-dc-keys { position: absolute; left: 50%; bottom: 0; display: flex; gap: 8px; transform: translateX(-50%); }
.vx-dc-keys span {
  display: grid; place-items: center; min-width: 46px; height: 42px; padding: 0 14px; border-radius: 9px; font: 500 15px/1 var(--ui); color: var(--vx-sec);
  background: linear-gradient(180deg, #2a2b30, #202125); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 3px 0 #111215, 0 8px 18px -8px rgba(0, 0, 0, .8);
  transition: transform .1s ease, box-shadow .1s ease, color .1s ease;
}
.vx-dc-keys span.wide { min-width: 150px; }
.vx-dc-keys.down span { transform: translateY(2px); box-shadow: 0 1px 0 #111215, 0 4px 10px -6px rgba(0, 0, 0, .8); color: var(--vx-text); }

/* ================================================================ Read aloud */
.vx-ra-page { left: 0; top: 0; width: 100%; height: 300px; padding: 30px 44px; }
.vx-ra-page h4 { margin: 0 0 4px; font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.vx-ra-page .mt { margin-bottom: 12px; font-size: 12.5px; color: var(--vx-sec); }
.vx-ra-page p { position: relative; margin: 0; font-size: 15.5px; line-height: 25px; color: #d6d6d3; }
.vx-ra-page .s { border-radius: 6px; transition: background-color .3s ease, box-shadow .3s ease; }
.vx-ra-page .s.lit { background: color-mix(in srgb, var(--vx-accent) 15%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--vx-accent) 15%, transparent); color: #fff; }
.vx-ra-page .w { border-radius: 5px; transition: background-color .12s ease-out, box-shadow .12s ease-out; }
.vx-ra-page .w.now { background: color-mix(in srgb, var(--vx-accent) 36%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--vx-accent) 36%, transparent); }
.vx-ra-bar { position: absolute; left: 26px; top: 0; width: 3px; height: 0; border-radius: 3px; background: var(--vx-accent); box-shadow: 0 0 8px rgba(108, 180, 255, .4); transition: transform .45s var(--vx-ease), height .45s var(--vx-ease), opacity .3s; opacity: 0; }
.vx-ra-player {
  left: 50%; bottom: 0; width: 560px; margin-left: -280px; display: flex; align-items: center; gap: 2px; height: 56px; padding: 8px 8px 8px 10px;
  background: var(--vx-surface); border-radius: 16px; border: .5px solid rgba(255, 255, 255, .14); font-size: 13px;
}
.vx-ra-player .ic { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; color: var(--vx-text); }
.vx-ra-player .play { width: 38px; height: 38px; border-radius: 50%; margin: 0 2px; background: #fff; color: var(--vx-surface); }
.vx-ra-player .play svg { fill: currentColor; stroke: none; }
.vx-ra-player .mid { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; padding: 0 12px 0 10px; }
.vx-ra-player .st { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--vx-sec); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vx-ra-player .rail { height: 4px; margin: 5px 0 0; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, .1); }
.vx-ra-player .fill { display: block; height: 100%; width: 0; background: var(--vx-accent); transition: width .3s linear; }
.vx-ra-player .sp { height: 32px; padding: 0 8px; display: grid; place-items: center; color: var(--vx-sec); font-variant-numeric: tabular-nums; }
.vx-ra-player .vc { display: inline-flex; align-items: center; height: 30px; padding: 0 11px; border-radius: 15px; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .16); white-space: nowrap; }
.vx-n .vx-ra-page { padding: 24px 28px; }
.vx-n .vx-ra-player { width: 400px; margin-left: -200px; }
.vx-n .vx-ra-player .sp, .vx-n .vx-ra-player .vc { display: none; }
.vx-n .vx-ra-bar { left: 13px; }

/* ================================================================ Index */
.vx-ix-page { left: 0; top: 0; width: 100%; height: 360px; padding: 30px 40px; }
.vx-ix-page h4 { margin: 0 0 12px; font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.vx-ix-page p { margin: 0 0 8px; font-size: 15.5px; line-height: 25px; color: #d6d6d3; }
.vx-ix-page u { text-decoration: underline dotted rgba(255, 255, 255, .42); text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: text-decoration-color .2s ease; }
.vx-ix-page u.on { text-decoration-style: solid; text-decoration-color: rgba(255, 255, 255, .75); }
.vx-ix-card {
  position: absolute; left: 0; top: 0; z-index: 4; width: 300px; padding: 12px 0 8px; border-radius: 14px;
  background: #222327; border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 22px 50px -14px rgba(0, 0, 0, .85);
  font-size: 13px; opacity: 0; transform: translateY(-4px) scale(.98); transform-origin: 30px 0; transition: opacity .18s ease, transform .22s var(--vx-ease);
}
.vx-ix-card.in { opacity: 1; transform: none; }
.vx-ix-card .hd { display: flex; align-items: center; gap: 10px; padding: 0 14px 10px; }
.vx-ix-card .av { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--vx-sec); font-size: 14px; }
.vx-ix-card .nm { font-size: 14.5px; font-weight: 600; }
.vx-ix-card .kd { font-size: 12px; color: var(--vx-sec); }
.vx-ix-card h6 { margin: 6px 14px 4px; font-size: 11.5px; font-weight: 600; color: var(--vx-faint); }
.vx-ix-card .row { display: flex; align-items: baseline; gap: 8px; padding: 5px 14px; }
.vx-ix-card .row .t { font-weight: 500; white-space: nowrap; }
.vx-ix-card .row .q { color: var(--vx-sec); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vx-ix-card .row .bx { flex: none; width: 13px; height: 13px; border-radius: 4px; border: 1.4px solid var(--vx-faint); transform: translateY(2px); }
.vx-ix-card .with { margin: 6px 14px 0; padding-top: 8px; border-top: 1px solid var(--vx-rule); font-size: 12.5px; color: var(--vx-sec); }
.vx-ix-card .mr { padding: 6px 14px 2px; font-size: 12.5px; color: var(--vx-accent); }

/* ================================================================ Webhooks */
.vx-wb-web { left: 0; top: 0; width: 290px; height: 300px; background: #f4f5f7; color: #1d1d1f; border-color: rgba(255, 255, 255, .18); }
.vx-wb-url { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; background: #e6e8ec; font-size: 11.5px; color: #555; }
.vx-wb-url .g { font-size: 12px; color: #777; }
.vx-wb-site { padding: 18px 20px; }
.vx-wb-site .city { font-size: 13px; color: #555; }
.vx-wb-site .big { position: relative; display: inline-block; margin: 6px 0 10px; padding: 0 6px; font-size: 52px; font-weight: 300; letter-spacing: -.02em; line-height: 1.05; border-radius: 8px; transition: box-shadow .2s ease, background-color .2s ease; }
.vx-wb-site .big.aim { box-shadow: 0 0 0 2px rgba(23, 105, 224, .55); background: rgba(23, 105, 224, .06); }
.vx-wb-site .big.got { box-shadow: 0 0 0 2px #1769e0; background: rgba(23, 105, 224, .12); }
.vx-wb-site .rows div { display: flex; justify-content: space-between; padding: 7px 0; border-top: 1px solid #e2e4e8; font-size: 12.5px; color: #444; }
.vx-wb-name {
  position: absolute; left: 20px; top: 150px; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 12px; border-radius: 10px;
  background: #fff; color: #1d1d1f; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .35), 0 0 0 1px rgba(0, 0, 0, .08); font-size: 12.5px;
}
.vx-wb-name .lb { color: #777; }
.vx-wb-name .add { margin-left: 4px; padding: 4px 9px; border-radius: 7px; background: #1769e0; color: #fff; font-weight: 600; }
.vx-wb-note { right: 0; top: 46px; width: 320px; height: 230px; padding: 24px 26px; }
.vx-wb-note h4 { margin: 0 0 10px; font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.vx-wb-note p { margin: 0 0 8px; font-size: 14.5px; line-height: 23px; color: #d6d6d3; }
/* A live value in a page: a quiet tinted pill, like a link that holds a number. */
.vx-wb-val { display: inline-block; padding: 0 7px; border-radius: 7px; background: color-mix(in srgb, var(--vx-accent) 16%, transparent); color: #cfe6ff; font-weight: 600; font-variant-numeric: tabular-nums; transition: background-color .9s ease; }
.vx-wb-val.blip { background: color-mix(in srgb, var(--vx-accent) 42%, transparent); transition-duration: .15s; }
.vx-wb-val.off { display: none; }
.vx-wb-arrow { position: absolute; left: 302px; top: 150px; width: 50px; height: 20px; color: rgba(190, 225, 255, .4); }
.vx-n .vx-wb-web { width: 260px; }
.vx-n .vx-wb-note { top: 210px; right: 0; width: 280px; height: 190px; }
.vx-n .vx-wb-arrow { display: none; }

/* ================================================================ Memory */
.vx-mm-orb { left: 0; top: 0; width: 230px; height: 364px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.vx-mm-ring { position: relative; width: 140px; height: 140px; }
.vx-mm-ring i { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: #cfe6ff; }
.vx-mm-say { font-size: 13px; color: var(--vx-sec); display: inline-flex; align-items: center; gap: 7px; }
.vx-mm-say::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--vx-accent); box-shadow: 0 0 8px var(--vx-accent); }
.vx-mm-kept { right: 0; top: 0; width: 360px; height: 364px; padding: 18px 18px; }
.vx-mm-kept h5 { margin: 0 0 10px; font-size: 12.5px; font-weight: 600; color: var(--vx-faint); }
.vx-mm-item { display: flex; gap: 11px; padding: 9px 10px; margin: 0 -10px 2px; border-radius: 10px; }
.vx-mm-item .g { flex: none; font-size: 15px; color: var(--vx-accent); transform: translateY(2px); }
.vx-mm-item .t { font-size: 14px; font-weight: 500; }
.vx-mm-item .s { font-size: 12px; color: var(--vx-sec); }
.vx-mm-ask { position: absolute; left: 18px; right: 18px; bottom: 16px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); font-size: 13.5px; }
.vx-mm-ask .q { min-height: 20px; color: var(--vx-text); }
.vx-mm-ask .ph { color: var(--vx-faint); }
.vx-mm-ask .a { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--vx-rule); color: #d6d6d3; line-height: 1.45; }
.vx-mm-ask .src { display: inline-grid; place-items: center; min-width: 17px; height: 17px; margin-left: 4px; border-radius: 5px; background: rgba(108, 180, 255, .18); color: #cfe6ff; font-size: 10.5px; font-weight: 600; vertical-align: 1px; }
.vx-n .vx-mm-orb { width: 100%; height: 150px; flex-direction: row; gap: 18px; }
.vx-n .vx-mm-ring { width: 100px; height: 100px; }
.vx-n .vx-mm-kept { top: 166px; left: 0; right: auto; width: 100%; }

/* ================================================================ Meeting Assist */
.vx-ma { left: 0; top: 0; width: 100%; height: 100%; padding: 16px 18px; font-size: 13.5px; }
.vx-ma-hd { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--vx-rule); }
.vx-ma-hd .nm { font-size: 15px; font-weight: 600; }
.vx-ma-hd .sub { color: var(--vx-sec); font-size: 12.5px; }
.vx-ma-hd .sp { flex: 1; }
.vx-ma-hd .rec { display: inline-flex; align-items: center; gap: 7px; color: var(--vx-sec); font-variant-numeric: tabular-nums; }
.vx-ma-hd .rec::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #e05a52; animation: vx-pulse 1.6s ease-in-out infinite; }
@keyframes vx-pulse { 50% { opacity: .35; } }
.vx-ma-learnt { margin: 10px 0 4px; font-size: 12px; color: var(--vx-faint); }
.vx-ma-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 10px; margin: 0 -10px; border-radius: 10px; transition: opacity .5s ease; }
.vx-ma-row .tg { flex: none; width: 112px; padding-top: 1px; font-size: 12px; font-weight: 600; color: var(--vx-accent); }
.vx-ma-row .tg.dig { color: #e0b46c; }
.vx-ma-row .tg.not { color: #c89cf0; }
.vx-ma-row .tx { flex: 1; min-width: 0; }
.vx-ma-row .tx b { display: block; font-weight: 500; font-size: 14px; }
.vx-ma-row .tx span { color: var(--vx-sec); font-size: 12.5px; }
.vx-ma-row .ck { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--vx-faint); box-shadow: inset 0 0 0 1.4px rgba(255, 255, 255, .18); transition: background-color .25s ease, color .25s ease, box-shadow .25s ease; }
.vx-ma-row .ck .g { font-size: 11px; }
.vx-ma-row.done .ck { background: var(--vx-good); color: #0e1a12; box-shadow: none; }
.vx-ma-row.done .tx { opacity: .5; }
.vx-n .vx-ma-row .tg { width: 86px; }