/* Deckist's marketing pages: the ledger. Graph paper, ruled sections with line numbers, an
   editorial serif over an instrument's mono. Scoped to body.mk so the web client keeps its
   own look. The brief and the critique passes are in docs/DESIGN.md. */
.mk {
  --paper: #f7f7f4; --paper-2: #efefeb; --card: #ffffff;
  --ink: #14151b; --ink-2: #4b4e5c; --muted: #686b78;
  --rule: rgba(20, 21, 27, 0.14); --rule-soft: rgba(20, 21, 27, 0.07); --grid: rgba(20, 21, 27, 0.055);
  --violet: #5b45e0; --violet-deep: #3f2fb3; --violet-soft: #ebe7fb; --violet-ghost: rgba(91, 69, 224, 0.1);
  --again: #b4241c; --hard: #a56b0a; --good: #0f6d4f; --easy: #5b45e0;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --edge: clamp(1.1rem, 4vw, 3.4rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-stamp: cubic-bezier(0.34, 1.56, 0.64, 1);
  background-color: var(--paper);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color-scheme: light;
  min-height: 100vh; display: flex; flex-direction: column;
}
.mk > * { flex: none; } .mk > main, .mk > section:last-of-type { flex: 1; }
.mk ::selection { background: var(--violet); color: #fff; }
.mk :focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
.mk a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 0.18em; text-decoration-thickness: 1px; transition: text-decoration-color 0.3s var(--ease); }
.mk a:hover { text-decoration-color: var(--violet); }
.mk p { margin: 0 0 1em; color: var(--ink-2); text-wrap: pretty; }
.mk h1, .mk h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.015em; line-height: 1.02; margin: 0 0 0.5em; text-wrap: balance; }
.mk h1 { font-size: clamp(2.8rem, 6.8vw, 5.6rem); }
.mk h2 { font-size: clamp(2rem, 3.8vw, 3.1rem); }
.mk h1 em, .mk h2 em { font-style: italic; color: var(--violet); }
.mk h3 { font-family: var(--sans); font-weight: 600; font-size: 1.12rem; letter-spacing: -0.01em; margin: 0 0 0.35rem; line-height: 1.3; }
.mk .num, .mk .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.mk-wrap { width: min(1160px, 100% - 2 * var(--edge)); margin-inline: auto; }

/* Labels: the ledger's line numbers. */
.mk-ln { display: block; margin: 0 0 1rem; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); }
.mk-ln::before { content: ""; display: inline-block; width: 2rem; height: 1px; background: var(--violet); vertical-align: middle; margin-right: 0.8rem; }
.mk-ln b { color: var(--violet); font-weight: 500; }

/* Masthead */
.mk-bar { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--ink); }
.mk-bar .mk-wrap { display: flex; align-items: center; gap: 1.5rem; height: 64px; }
.mk-brand { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--serif); font-size: 1.55rem; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
.mk-brand .glyph { width: 26px; height: 26px; color: var(--ink); }
.mk-nav { margin-left: auto; display: flex; align-items: center; gap: 1.4rem; }
.mk-nav a { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; position: relative; padding: 0.3rem 0; }
.mk-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--violet); transform: scaleX(0); transform-origin: right; transition: transform 0.4s var(--ease); }
.mk-nav a:hover, .mk-nav a.on { color: var(--ink); }
.mk-nav a:hover::after, .mk-nav a.on::after { transform: scaleX(1); transform-origin: left; }
.mk-btn, .mk .mk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 44px; padding: 0 1.2rem; border: 1px solid var(--ink); border-radius: 3px; background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease); }
.mk-btn:hover, .mk .mk-btn:hover { background: var(--violet); border-color: var(--violet); color: #fff; transform: translateY(-1px); }
.mk-btn.quiet, .mk .mk-btn.quiet { background: transparent; color: var(--ink); border-color: var(--rule); }
.mk-btn.quiet:hover, .mk .mk-btn.quiet:hover { background: transparent; color: var(--violet); border-color: var(--violet); }
.mk-nav .mk-btn { padding: 0 0.9rem; min-height: 36px; }
.mk-nav .mk-btn::after { display: none; }
/* The signed-in chip: the nav has to answer "who am I" without being clicked.
   It is the settings link as well, which is where a name normally goes. */
.mk-who { display: inline-flex; align-items: center; gap: 0.45rem; }
.mk-who::after { display: none; }
.mk-ini { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0; line-height: 1; }
.mk-who:hover .mk-ini, .mk-who.on .mk-ini { background: var(--violet); }
.mk-name { text-transform: none; letter-spacing: 0.04em; font-size: 0.75rem; }

/* The marketing bar drops its links on a phone, which is fine for four
   marketing links and wrong for the app: hiding them left the signed-in nav as
   a lone Sign Out button with no way to reach a deck. Inside the app the row
   stays and scrolls in its own box instead, so the page never scrolls sideways. */
@media (max-width: 760px) {
  .mk-nav a:not(.mk-btn) { display: none; }

  body.app .mk-bar .mk-wrap { height: auto; flex-wrap: wrap; gap: 0.6rem 1rem; padding-top: 0.6rem; padding-bottom: 0.6rem; }
  body.app .mk-nav { margin-left: 0; width: 100%; gap: 1.1rem; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: 0.15rem; }
  body.app .mk-nav::-webkit-scrollbar { display: none; }
  body.app .mk-nav a:not(.mk-btn) { display: inline-flex; flex: 0 0 auto; }
  body.app .mk-nav .mk-btn { flex: 0 0 auto; }
  body.app .mk-name { display: none; }
}

/* Sections, ruled */
.mk-sec { padding: clamp(3.2rem, 7vw, 6.4rem) 0; }
.mk-sec + .mk-sec { border-top: 1px solid var(--rule); }
.mk-grid { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(1.6rem, 5vw, 5rem); align-items: start; }
.mk-grid > * { min-width: 0; }
.mk-head { position: sticky; top: 92px; }
.mk-head p { margin: 0.8rem 0 0; font-size: 1rem; max-width: 26rem; }
@media (max-width: 900px) { .mk-grid { grid-template-columns: 1fr; gap: 1.6rem; } .mk-head { position: static; } }

/* Hero */
.mk-hero { padding: clamp(2.8rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem); }
.mk-hero .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 16rem; gap: clamp(1.5rem, 5vw, 5rem); align-items: start; }
.mk-hero .hero-grid > * { min-width: 0; }
.mk-hero h1 { max-width: 13ch; }
.mk-hero h1 .l2 { display: block; padding-left: clamp(0px, 4vw, 3.4rem); }
.mk-hero h1 .l3 { display: block; padding-left: clamp(0px, 8vw, 6.8rem); }
.mk-lede { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.5; color: var(--ink); max-width: 34rem; }
.mk-cta { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1.6rem; }
.mk-note { margin-top: 1rem; color: var(--muted); font-size: 0.92rem; }
.mk-tally { margin-top: 2.6rem; border-top: 1px solid var(--ink); padding-top: 0.9rem; font-family: var(--mono); font-size: 0.72rem; line-height: 1.65; }
.mk-tally dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 0.9rem; }
.mk-tally dt { color: var(--muted); text-transform: uppercase; font-size: 0.62rem; letter-spacing: 0.16em; padding-top: 0.15em; }
.mk-tally dd { margin: 0; color: var(--ink); }
.mk-tally dd em { font-style: normal; color: var(--violet); }
@media (max-width: 960px) { .mk-hero .hero-grid { grid-template-columns: 1fr; } .mk-tally { display: none; } }

/* The merge: two devices, one ledger. */
.merge-wrap { margin-top: clamp(2.2rem, 5vw, 3.6rem); }
.merge-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.merge-head .mk-ln { margin: 0; }
.merge-head .hint { margin-left: auto; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.merge { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 0; border: 1px solid var(--ink); border-radius: 4px; background: var(--card); overflow: hidden; }
.merge > * { min-width: 0; }
.device { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; }
.device + .device { border-left: 1px solid var(--rule); }
.device-label { display: flex; align-items: center; gap: 0.6rem; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 0.8rem; }
.device-label i { width: 7px; height: 7px; border-radius: 50%; background: var(--violet); }
.device-label .clock { margin-left: auto; color: var(--muted); letter-spacing: 0.08em; }
.face { border: 1px solid var(--rule); border-radius: 4px; padding: 1.1rem 1rem; min-height: 6.4rem; display: flex; flex-direction: column; justify-content: center; gap: 0.35rem; text-align: center; }
.face .q { font-family: var(--serif); font-size: 1.4rem; line-height: 1.2; color: var(--ink); }
.face .a { font-size: 0.95rem; color: var(--ink-2); }
.face .a.hid { visibility: hidden; }
.face hr { width: 40px; border: 0; border-top: 1px solid var(--rule); margin: 0.2rem auto; }
.rate { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.35rem; margin-top: 0.7rem; }
.rate button { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.55rem 0.2rem; border: 1px solid var(--rule); border-radius: 3px; background: var(--card); color: var(--ink); cursor: pointer; transition: border-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.2s var(--ease-stamp); }
.rate button:hover { border-color: var(--ink); }
.rate button:active { transform: scale(0.96); }
.rate button[data-r="again"]:hover { color: var(--again); border-color: var(--again); }
.rate button[data-r="hard"]:hover { color: var(--hard); border-color: var(--hard); }
.rate button[data-r="good"]:hover { color: var(--good); border-color: var(--good); }
.rate button[data-r="easy"]:hover { color: var(--easy); border-color: var(--easy); }
.rate button:disabled { opacity: 0.45; cursor: default; }
.device .log { margin: 0.9rem 0 0; padding: 0; list-style: none; font-family: var(--mono); font-size: 0.68rem; line-height: 1.6; color: var(--ink-2); min-height: 4.2rem; }
/* The reveal button and the rating row share one slot, so swapping them moves nothing below. */
.device .slot { min-height: 3rem; margin-top: 0.7rem; }
.device .slot .reveal-btn, .device .slot .rate { margin-top: 0; }
.device { min-height: 0; }
.merge { align-items: stretch; }
.ledger ol { min-height: 7rem; }
.device .log li { display: grid; grid-template-columns: auto 1fr auto; gap: 0.6rem; white-space: nowrap; overflow: hidden; }
.device .log li .t { color: var(--muted); }
.device .log li .r { color: var(--ink); }
.device .log li.in { animation: stamp 0.45s var(--ease-stamp); }
.reveal-btn { margin-top: 0.7rem; width: 100%; }
.ledger { background: var(--paper-2); padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; }
.ledger .device-label i { background: var(--ink); }
.ledger ol { margin: 0; padding: 0; list-style: none; font-family: var(--mono); font-size: 0.7rem; line-height: 1.75; flex: 1; }
.ledger li { display: grid; grid-template-columns: 2.2rem auto 1fr auto; gap: 0.6rem; align-items: baseline; border-bottom: 1px solid var(--rule-soft); padding: 0.15rem 0; white-space: nowrap; overflow: hidden; }
.ledger li .n { color: var(--muted); }
.ledger li .t { color: var(--ink-2); }
.ledger li .d { color: var(--ink-2); }
.ledger li .d.phone::before { content: "phone"; } .ledger li .d.mac::before { content: "mac"; }
.ledger li .r { color: var(--ink); font-weight: 500; }
.ledger li.in { animation: stamp 0.45s var(--ease-stamp); background: var(--violet-ghost); }
.ledger .derived { margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px solid var(--ink); font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.04em; color: var(--ink-2); display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 1rem; }
.ledger .derived b { color: var(--ink); font-weight: 500; }
.ledger .derived .no { color: var(--good); }
.ledger .empty { color: var(--muted); padding: 1rem 0; text-align: center; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; }
@keyframes stamp { from { transform: translateY(-4px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 860px) {
  .merge { grid-template-columns: 1fr; }
  .device + .device { border-left: 0; border-top: 1px solid var(--rule); }
  .ledger { order: 3; border-top: 1px solid var(--rule); }
  .merge-head .hint { margin-left: 0; }
}
.merge-note { margin: 0.8rem 0 0; color: var(--muted); font-size: 0.9rem; }

/* Entries: the ruled list a section's body is made of. */
.entries { border-top: 1px solid var(--ink); }
.entry { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: 1rem; padding: 1.3rem 0; border-bottom: 1px solid var(--rule); }
.entry .n { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--violet); padding-top: 0.35rem; }
.entry p { margin: 0; font-size: 1rem; max-width: 58ch; }
.entry p + p { margin-top: 0.6em; }

/* Two facts, one hairline between; equal width, equal height. */
.facts { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; border-top: 1px solid var(--ink); }
.facts > div { padding: 1.4rem 0; min-width: 0; }
.facts > div + div { border-left: 1px solid var(--rule); padding-left: 2rem; }
.facts > div:first-child { padding-right: 2rem; }
.facts p { margin: 0; font-size: 1rem; }
@media (max-width: 760px) { .facts { grid-template-columns: 1fr; } .facts > div + div { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; } .facts > div:first-child { padding-right: 0; } }

/* The interval table: what FSRS makes of one card over time. */
.intervals { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 0.8rem; font-variant-numeric: tabular-nums; margin-top: 1.2rem; }
.intervals th, .intervals td { text-align: left; padding: 0.55rem 0.5rem; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.intervals th:first-child, .intervals td:first-child { padding-left: 0; }
.intervals thead th { font-weight: 500; font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); border-bottom-color: var(--ink); }
.intervals td.r-good { color: var(--good); } .intervals td.r-again { color: var(--again); } .intervals td.r-easy { color: var(--easy); } .intervals td.r-hard { color: var(--hard); }
.intervals .bar { display: inline-block; height: 6px; background: var(--violet); border-radius: 1px; vertical-align: middle; margin-right: 0.5rem; }

/* Price */
.price-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; border-top: 1px solid var(--ink); }
.price-grid > div { padding: 1.6rem 0; min-width: 0; }
.price-grid > div + div { border-left: 1px solid var(--rule); padding-left: 2.2rem; }
.price-grid > div:first-child { padding-right: 2.2rem; }
.amount { font-family: var(--serif); font-size: clamp(3.2rem, 6vw, 5rem); line-height: 1; letter-spacing: -0.02em; color: var(--ink); }
.amount em { display: block; font-style: normal; font-family: var(--mono); color: var(--violet); font-size: 0.22em; letter-spacing: 0.04em; margin-top: 0.7em; line-height: 1.5; }
.price-grid ul { list-style: none; padding: 0; margin: 1.3rem 0; }
.price-grid li { padding-left: 1.5rem; position: relative; margin-bottom: 0.45rem; color: var(--ink-2); font-size: 1rem; }
.price-grid li::before { content: "—"; position: absolute; left: 0; color: var(--violet); font-family: var(--mono); }
.price-grid .foot { color: var(--muted); font-size: 0.9rem; margin: 0; }
.price-grid .mk-btn { margin-top: 0.5rem; }
.price-grid .row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.price-grid form { display: inline; }
@media (max-width: 760px) { .price-grid { grid-template-columns: 1fr; } .price-grid > div + div { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; } .price-grid > div:first-child { padding-right: 0; } }

/* Prose pages */
.mk-prose { max-width: 42rem; }
.mk-prose h1 { font-size: clamp(2.4rem, 4.8vw, 3.6rem); }
.mk-prose h2 { font-family: var(--sans); font-weight: 600; font-size: 1.25rem; margin: 2.2rem 0 0.5rem; letter-spacing: -0.01em; }
.mk-prose p, .mk-prose li { color: var(--ink-2); }
.mk-prose strong { color: var(--ink); font-weight: 600; }
.mk-prose ul { padding-left: 1.2rem; }

/* Colophon */
.mk-foot { border-top: 1px solid var(--ink); padding: 2.4rem 0 3.4rem; color: var(--ink-2); font-size: 0.92rem; }
.mk-foot-row { display: flex; flex-wrap: wrap; gap: 0.8rem 1.8rem; align-items: baseline; }
.mk-foot-row nav { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.mk-copy { margin-left: auto; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

/* Reveal */
.mk-reveal { opacity: 0; transform: translateY(16px); filter: blur(3px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease), filter 0.8s var(--ease); }
.mk-reveal.in { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
  .mk-reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .device .log li.in, .ledger li.in { animation: none; }
  .mk-btn, .mk-nav a::after, .rate button { transition: none; }
}

/* Device icons, at the size of the text beside them. */
.dev-ico { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.2em; margin-right: 0.25em; color: var(--ink); }
.mk-ln .devs { white-space: nowrap; }
.mk-ln .dev-ico { width: 1.5em; height: 1.5em; vertical-align: -0.45em; margin: 0 0.15em 0 0.35em; color: var(--ink); }
.mk-ln .devs .dev-ico:first-child { margin-left: 0; }
.device-label .dev-ico { width: 1.6em; height: 1.6em; margin-right: 0; color: var(--violet); }
.devs-row { display: flex; gap: 0.6rem; margin: 0 0 0.6rem; }
.devs-row .dev-ico { width: 1.6rem; height: 1.6rem; margin: 0; color: var(--violet); }

/* ---- The web client, on the same paper ---------------------------------------
   deckist.css still lays the client out (decks, the reviewer, forms, the dev cast);
   these rules retoken it so it reads as the same product as the marketing pages. */
.mk.app { --ground: var(--paper); --card: #ffffff; --card-2: var(--paper-2); --ink-soft: var(--ink-2); --ink-faint: var(--muted); --line: var(--rule); --line-soft: var(--rule-soft); --accent: var(--violet); --accent-ink: #ffffff; --accent-soft: var(--violet-soft); --radius: 4px; --shadow: none; }
.mk.app .app-main { padding: 2rem 0 5rem; flex: 1; }
.mk.app h1, .mk.app h2 { font-family: var(--serif); font-weight: 400; }
.mk.app h1 { font-size: clamp(2rem, 3.6vw, 2.8rem); letter-spacing: -0.015em; }
.mk.app h2 { font-size: 1.6rem; }
.mk.app h3 { font-family: var(--sans); font-weight: 600; }
.mk.app .kicker { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--violet); font-weight: 500; }
.mk.app .panel { background: var(--card); border: 1px solid var(--rule); border-radius: 4px; box-shadow: none; }
.mk.app .btn { border-radius: 3px; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; border: 1px solid var(--rule); background: var(--card); color: var(--ink); }
.mk.app .btn:hover { border-color: var(--violet); color: var(--violet); background: var(--card); }
.mk.app .btn.primary { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.mk.app .btn.primary:hover { background: var(--violet); border-color: var(--violet); color: #fff; filter: none; }
.mk.app .btn.ghost { border-color: transparent; }
.mk.app input[type=text], .mk.app input[type=email], .mk.app input[type=password], .mk.app textarea, .mk.app select { border-radius: 3px; border-color: var(--rule); background: var(--card); font-family: var(--sans); }
.mk.app label { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); font-weight: 500; }
.mk.app .deck { border-radius: 4px; border-color: var(--rule); }
.mk.app .deck:hover { border-color: var(--violet); }
.mk.app .deck .nm { font-family: var(--serif); font-size: 1.25rem; font-weight: 400; letter-spacing: -0.01em; }
.mk.app .deck .ct, .mk.app .pill, .mk.app .progress, .mk.app .answers .btn .iv { font-family: var(--mono); }
.mk.app .pill { border-radius: 2px; }
.mk.app .pill.due { background: var(--violet-soft); color: var(--violet-deep); border-color: var(--violet); }
.mk.app .face { border-radius: 6px; border: 1px solid var(--ink); box-shadow: none; }
.mk.app .face .q { font-family: var(--serif); font-weight: 400; font-size: 2rem; letter-spacing: -0.01em; }
.mk.app .face .a { font-size: 1.15rem; }
.mk.app .answers .btn { border-radius: 3px; }
.mk.app .answers .again:hover { color: var(--again); border-color: var(--again); }
.mk.app .answers .easy:hover { color: var(--easy); border-color: var(--easy); }
.mk.app th { font-family: var(--mono); color: var(--muted); border-bottom: 1px solid var(--ink); }
.mk.app td { border-bottom-color: var(--rule-soft); }
.mk.app .flash { border-radius: 3px; border-color: var(--rule); background: var(--card); font-family: var(--mono); font-size: 0.78rem; }
.mk.app .empty .big { font-family: var(--serif); font-weight: 400; font-size: 1.8rem; }
.mk.app .auth-wrap { max-width: 26rem; margin: 3rem auto 0; }
.mk.app .auth-card { padding: 1.6rem 1.7rem 1.8rem; border-color: var(--ink); }
.mk.app .auth-title { font-size: 2.4rem; margin: 0.2rem 0 1.2rem; }
.mk.app .dev-cast { border-radius: 4px; border-color: var(--violet); --dev-stripe: var(--violet-ghost); }
.mk.app .dev-cast-tape-label { color: var(--violet); }
.mk.app .deck, .mk.app .deck .nm { text-decoration: none; }
.mk.app .mk-brand, .mk-brand { text-decoration: none; }
.mk.app .spread .row .btn + .btn { margin-left: 0.4rem; }
.mk.app .face { min-height: 200px; }