/* Cast a scene (/cast): the beta's one screen. Its own styles: nothing here touches the studio's styles.css.
   Design language, "casting call": a dark screening room lit by one warm spotlight. One accent (spotlight amber) for
   the one thing to do next; a viewfinder's corners frame what you picked and where the scene goes; numbered steps;
   pill buttons; plain system type with tight, bold headings. Every colour is a token below, redefined for light mode. */
:root {
  color-scheme: dark;
  --mk-bg: #0f0e12; --mk-card: #18171c; --mk-card-2: #211f26; --mk-ink: #f4efe6; --mk-muted: #a29ca8; --mk-line: #2e2b34;
  --mk-accent: #ffb547; --mk-accent-text: #ffc46b; --mk-accent-ink: #1a1205; --mk-glow: rgb(255 181 71 / .18);
  --mk-bad: #ff7a6b; --mk-ok: #7bd389;
  --mk-r-s: 10px; --mk-r-m: 14px; --mk-r-l: 20px;
}
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --mk-bg: #f7f4ee; --mk-card: #ffffff; --mk-card-2: #f1ede5; --mk-ink: #1b1a1f; --mk-muted: #69646f; --mk-line: #e3ddd2;
    --mk-accent: #f2a33a; --mk-accent-text: #9a5700; --mk-accent-ink: #1a1205; --mk-glow: rgb(242 163 58 / .22);
    --mk-bad: #c62828; --mk-ok: #2e7d32;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--mk-bg); color: var(--mk-ink); font: 16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
body { overflow-x: hidden; background: radial-gradient(900px 420px at 50% -120px, var(--mk-glow), transparent 70%) no-repeat, var(--mk-bg); min-height: 100vh; }
/* Scrollbars follow the theme (a white bar in dark mode clashed, Ben 2026-09-29). */
* { scrollbar-color: var(--mk-line) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { height: 8px; width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--mk-line); border-radius: 4px; }
:focus-visible { outline: 2px solid var(--mk-accent); outline-offset: 2px; }

.mk-top { max-width: 720px; margin: 0 auto; padding: 28px 16px 8px; }
/* One centred word; the plan, version and account sit to its right. */
.mk-brand { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.mk-meta { justify-self: end; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px 10px; min-width: 0; }
/* The word is the logo: "Cast" framed by a viewfinder's four amber corners, the page's one mark (Ben, 2026-09-30). */
.mk-wordmark {
  --c: var(--mk-accent); --l: 12px; --w: 3px;
  margin: 0; padding: 4px 16px 6px; font-size: 32px; font-weight: 800; letter-spacing: -.035em; line-height: 1.1; background:
    linear-gradient(var(--c) 0 0) top left / var(--l) var(--w), linear-gradient(var(--c) 0 0) top left / var(--w) var(--l),
    linear-gradient(var(--c) 0 0) top right / var(--l) var(--w), linear-gradient(var(--c) 0 0) top right / var(--w) var(--l),
    linear-gradient(var(--c) 0 0) bottom left / var(--l) var(--w), linear-gradient(var(--c) 0 0) bottom left / var(--w) var(--l),
    linear-gradient(var(--c) 0 0) bottom right / var(--l) var(--w), linear-gradient(var(--c) 0 0) bottom right / var(--w) var(--l);
  background-repeat: no-repeat; text-shadow: 0 0 24px var(--mk-glow);
}
.mk-plan { padding: 3px 10px; border: 1px solid var(--mk-line); border-radius: 999px; font-size: 12px; color: var(--mk-muted); }
.mk-plan.premium { border-color: var(--mk-accent); color: var(--mk-accent-text); }
.mk-muted, .mk-why, .mk-note { color: var(--mk-muted); }
.mk { max-width: 720px; margin: 0 auto; padding: 12px 16px 48px; display: grid; gap: 16px; }
.mk-slot, .mk-result { background: var(--mk-card); border: 1px solid var(--mk-line); border-radius: var(--mk-r-l); padding: 18px; min-width: 0; }
.mk-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.mk-slot h2 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.005em; display: flex; align-items: center; gap: 8px; }
#mkNewH { margin-bottom: 12px; }
.mk-step { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--mk-card-2); border: 1px solid var(--mk-line); font-size: 12px; color: var(--mk-muted); }
.mk-note { margin: 10px 0 0; font-size: 14px; white-space: pre-line; }
.mk-note.bad, .mk-result.failed .mk-note { color: var(--mk-bad); }

.mk-who { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; }
.mk-face { position: relative; flex: 0 0 auto; width: 88px; display: grid; justify-items: center; gap: 6px; padding: 8px 6px; border: 1px solid transparent; border-radius: var(--mk-r-m); background: none; color: inherit; font: inherit; cursor: pointer; }
.mk-face:hover:not(:disabled) { background: var(--mk-card-2); }
.mk-face img, .mk-initial { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--mk-card-2); display: grid; place-items: center; font-size: 26px; }
.mk-face[aria-checked="true"] { background: var(--mk-card-2); border-color: var(--mk-line); }
.mk-face[aria-checked="true"] img, .mk-face[aria-checked="true"] .mk-initial { box-shadow: 0 0 0 2px var(--mk-card-2), 0 0 0 4px var(--mk-accent), 0 0 18px var(--mk-glow); }
.mk-face:disabled { opacity: .5; cursor: default; }
.mk-name { font-size: 13px; max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-face .mk-muted, .mk-tag { font-size: 11px; }
.mk-tag { color: var(--mk-muted); }
.mk-new .mk-initial { font-size: 30px; color: var(--mk-accent-text); border: 1px dashed var(--mk-line); background: none; }
.mk-new.locked .mk-initial { font-size: 20px; }
/* Chosen (New Video / New Photo, Ben 2026-10-01): who, a dotted line to what they wear, everyone else slid right and dimmed. */
.mk-chain { flex: 0 0 auto; display: flex; align-items: flex-start; }
.mk-dots { flex: 0 0 auto; width: 22px; margin: 41px -4px 0; border-top: 2px dotted var(--mk-accent); opacity: .85; }
.mk-wear img, .mk-wear .mk-initial { border-radius: var(--mk-r-s); object-fit: cover; object-position: top; }
.mk-wear.none .mk-initial { font-size: 24px; color: var(--mk-accent-text); border: 1px dashed var(--mk-accent); background: none; }
.mk-wear:hover img { box-shadow: 0 0 0 2px var(--mk-accent); }
.mk-face.mk-dim { opacity: .32; filter: saturate(.4); animation: mk-slide .45s cubic-bezier(.2, .8, .2, 1); transition: opacity .2s, filter .2s; }
.mk-face.mk-dim:hover, .mk-face.mk-dim:focus-visible { opacity: .75; filter: none; }
@keyframes mk-slide { from { transform: translateX(-28px); opacity: 1; filter: none; } }
.mk-chain .mk-face:first-child { animation: mk-pop .35s ease-out; }
@keyframes mk-pop { from { transform: scale(.94); } }
@media (prefers-reduced-motion: reduce) { .mk-face.mk-dim, .mk-chain .mk-face:first-child { animation: none; } }

/* The scene: a viewfinder's four corners mark where it goes. */
.mk-drop {
  --c: var(--mk-muted); --l: 22px; --w: 2px; --in: 10px; /* the corner marks sit --in inside the edge: at 0 the rounded corner crops them */
  display: grid; place-items: center; min-height: 150px; border-radius: var(--mk-r-m); padding: 16px; cursor: pointer; text-align: center; background:
    linear-gradient(var(--c) 0 0) left var(--in) top var(--in) / var(--l) var(--w), linear-gradient(var(--c) 0 0) left var(--in) top var(--in) / var(--w) var(--l),
    linear-gradient(var(--c) 0 0) right var(--in) top var(--in) / var(--l) var(--w), linear-gradient(var(--c) 0 0) right var(--in) top var(--in) / var(--w) var(--l),
    linear-gradient(var(--c) 0 0) left var(--in) bottom var(--in) / var(--l) var(--w), linear-gradient(var(--c) 0 0) left var(--in) bottom var(--in) / var(--w) var(--l),
    linear-gradient(var(--c) 0 0) right var(--in) bottom var(--in) / var(--l) var(--w), linear-gradient(var(--c) 0 0) right var(--in) bottom var(--in) / var(--w) var(--l),
    var(--mk-card-2);
  background-repeat: no-repeat;
}
.mk-drop.over, .mk-drop:hover { --c: var(--mk-accent); }
.mk-drop-empty { display: grid; gap: 4px; color: var(--mk-muted); font-size: 14px; }
.mk-drop-empty b { color: var(--mk-ink); font-size: 16px; }
.mk-drop video { max-width: 100%; max-height: 320px; border-radius: var(--mk-r-s); }
.mk-samples { margin-top: 12px; }
.mk-samples > .mk-muted { margin: 0 0 6px; font-size: 14px; }
.mk-sample-row { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; }
.mk-sample { flex: 0 0 auto; width: 132px; display: grid; gap: 4px; padding: 6px; border: 1px solid transparent; border-radius: var(--mk-r-m); background: none; color: inherit; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.mk-sample:hover { background: var(--mk-card-2); }
.mk-sample video { width: 100%; aspect-ratio: 9 / 16; max-height: 180px; object-fit: cover; border-radius: var(--mk-r-s); background: var(--mk-card-2); pointer-events: none; }
.mk-sample .mk-muted { font-size: 11px; }
.mk-sample[aria-checked="true"] { background: var(--mk-card-2); border-color: var(--mk-accent); }
.mk-link { padding: 0; border: 0; background: none; color: var(--mk-accent-text); font: inherit; font-size: 14px; cursor: pointer; }
#mkClipClear { margin-top: 10px; }

/* Hover tips (focus or tap on a phone). */
.mk-tip { position: relative; font-size: 13px; color: var(--mk-muted); cursor: help; border-bottom: 1px dotted var(--mk-muted); }
.mk-tip-body { position: absolute; right: 0; top: calc(100% + 8px); z-index: 5; width: min(300px, calc(100vw - 48px)); padding: 12px 14px; border: 1px solid var(--mk-line); border-radius: var(--mk-r-m);
  background: var(--mk-card-2); color: var(--mk-ink); box-shadow: 0 12px 30px rgb(0 0 0 / .3); opacity: 0; visibility: hidden; transition: opacity .12s; cursor: auto; }
.mk-tip:hover .mk-tip-body, .mk-tip:focus .mk-tip-body, .mk-tip:focus-within .mk-tip-body { opacity: 1; visibility: visible; }
.mk-tip-body ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }

.mk-badge { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 650; background: var(--mk-glow); color: var(--mk-accent-text); }

/* Premium: which part of the clip to use. The bar shows the part picked against the whole clip. */
.mk-seg { margin-top: 8px; display: grid; gap: 6px; font-size: 13px; }
.mk-seg-head { display: flex; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.mk-seg-head .mk-muted { font-weight: 400; }
/* One track, two handles: both range inputs sit on the track and only their thumbs take the pointer. */
.mk-trim { position: relative; height: 28px; }
.mk-trim::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 8px; border-radius: 4px; background: var(--mk-line); }
.mk-trim #mkSegFill { position: absolute; top: 10px; height: 8px; border-radius: 4px; background: var(--mk-accent); }
.mk-trim input { position: absolute; inset: 0; width: 100%; height: 28px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.mk-trim input::-webkit-slider-runnable-track { background: none; height: 28px; }
.mk-trim input::-moz-range-track { background: none; }
.mk-trim input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 16px; height: 24px; margin-top: 2px; border-radius: 6px; border: 2px solid var(--mk-bg, #111); background: var(--mk-accent); cursor: ew-resize; }
.mk-trim input::-moz-range-thumb { pointer-events: auto; width: 12px; height: 20px; border-radius: 6px; border: 2px solid var(--mk-bg, #111); background: var(--mk-accent); cursor: ew-resize; }
#mkSegLocked { margin-top: 10px; display: inline-flex; align-items: center; gap: 2px; }

/* What's next: a panel lights up for a moment (the character page's Cast them points here instead of opening files). */
.mk-slot.mk-flash { animation: mk-flash 1.6s ease-out; }
@keyframes mk-flash {
  0%, 35% { border-color: var(--mk-accent); box-shadow: 0 0 0 3px var(--mk-glow), 0 0 32px var(--mk-glow); }
  100% { border-color: var(--mk-line); box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .mk-slot.mk-flash { animation: none; border-color: var(--mk-accent); } }

.mk-go-row { display: grid; gap: 10px; }
.mk-go-row h2 { margin-bottom: 2px; }
.mk-go { width: 100%; padding: 15px 18px; border: 0; border-radius: 999px; background: var(--mk-accent); color: var(--mk-accent-ink); font-family: inherit; font-size: 18px; font-weight: 700; line-height: 1.2; cursor: pointer; box-shadow: 0 8px 28px var(--mk-glow); }
.mk-go:hover:not(:disabled) { filter: brightness(1.05); }
.mk-go:disabled, .mk-go.locked { opacity: .4; cursor: default; box-shadow: none; }
.mk-go.locked { cursor: pointer; }
/* What a photo or a description makes: Video (the default) or Photo. */
.mk-kind { display: inline-flex; justify-self: start; padding: 3px; gap: 2px; border: 1px solid var(--mk-line); border-radius: 999px; background: var(--mk-card-2); }
.mk-kind[hidden] { display: none; }
.mk-kind button { padding: 6px 16px; border: 0; border-radius: 999px; background: none; color: var(--mk-muted); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.mk-kind button[aria-checked="true"] { background: var(--mk-accent); color: var(--mk-accent-ink); }
.mk-why { margin: 0; font-size: 14px; min-height: 1.4em; text-align: center; }

.mk-stage-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.mk-stage { margin: 0; font-weight: 650; }
.mk-stage-row .mk-stage { margin: 0; }
#mkOut { display: block; width: 100%; max-height: 70vh; border-radius: var(--mk-r-m); background: #000; }
/* Side by side: edge to edge, no border or gap; the pair shares one rounded frame. */
.mk-pair.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: var(--mk-r-m); overflow: hidden; background: #000; }
.mk-pair.two video { display: block; width: 100%; height: 100%; max-height: 70vh; object-fit: contain; border-radius: 0; background: #000; }
#mkSideBtn { margin-top: 8px; font-size: 13px; }
.mk-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.mk-btn { display: inline-flex; align-items: center; padding: 9px 16px; border: 1px solid var(--mk-line); border-radius: 999px; background: var(--mk-card-2); color: var(--mk-ink); font: inherit; font-size: 15px; text-decoration: none; cursor: pointer; }
.mk-btn:hover:not(:disabled) { border-color: var(--mk-muted); }
.mk-btn.sm { padding: 4px 12px; font-size: 13px; }
.mk-btn.primary { background: var(--mk-accent); border-color: var(--mk-accent); color: var(--mk-accent-ink); font-weight: 650; }
.mk-btn:disabled { opacity: .5; cursor: default; }

.mk-field { display: grid; gap: 4px; margin-bottom: 12px; font-size: 14px; color: var(--mk-muted); }
.mk-field input { font: inherit; color: var(--mk-ink); background: var(--mk-card-2); border: 1px solid var(--mk-line); border-radius: var(--mk-r-s); padding: 10px 12px; width: 100%; }
.mk-faces { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 12px; }
.mk-faces button { padding: 0; border: 2px solid transparent; border-radius: var(--mk-r-m); overflow: hidden; background: var(--mk-card-2); cursor: pointer; aspect-ratio: 3 / 4; }
.mk-faces button:disabled { cursor: default; }
.mk-faces button.picked { border-color: var(--mk-accent); }
.mk-btn.danger { border-color: var(--mk-bad, #e5584f); color: var(--mk-bad, #e5584f); }
.mk-faces img { display: block; width: 100%; height: 100%; object-fit: cover; }

.mk-char { width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px); border: 1px solid var(--mk-line); border-radius: var(--mk-r-l); padding: 20px; background: var(--mk-card); color: var(--mk-ink); }
.mk-player { width: min(640px, calc(100vw - 32px)); }
.mk-player img { display: block; width: 100%; max-height: 65vh; object-fit: contain; margin-bottom: 12px; border-radius: var(--mk-r-s); background: #000; }
.mk-player video { display: block; width: 100%; max-height: 65vh; margin-bottom: 12px; border-radius: var(--mk-r-s); background: #000; }
.mk-char::backdrop { background: rgb(0 0 0 / .55); }
.mk-char h2 { margin: 0 0 12px; font-size: 22px; letter-spacing: -.01em; }
/* An Instagram-style page: a circle headshot beside the name and bio, then the featured photos (no outfits, Ben 2026-10-01). */
.mk-profile { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.mk-profile h2 { margin: 0 0 4px; }
.mk-profile-t { min-width: 0; }
.mk-headshot { flex: 0 0 auto; width: 84px; height: 84px; border-radius: 50%; object-fit: contain; padding: 4px; box-sizing: border-box; background: var(--mk-card-2); border: 2px solid var(--mk-line); }
.mk-headshot:not([src]), .mk-headshot[src=""] { visibility: hidden; }
.mk-bio { margin: 0; font-size: 14px; color: var(--mk-muted); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.mk-char p { margin: 0 0 8px; font-size: 14px; }
.mk-stills { margin-top: 4px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mk-stills img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--mk-r-s); background: var(--mk-card-2); }
.mk-stills .mk-muted { grid-column: 1 / -1; font-size: 14px; margin: 0; }
/* The feed's header, its + (the wardrobe), and the wardrobe opening above the photos. */
.mk-feed-head { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 6px; font-size: 13px; }
.mk-plus { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: conic-gradient(from 210deg, var(--mk-accent), #ff7ab6, #8a7bff, var(--mk-accent)); color: var(--mk-accent-ink);
  box-shadow: 0 4px 16px var(--mk-glow); transition: transform .25s; }
.mk-plus span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--mk-card); color: var(--mk-accent-text); font-size: 22px; font-weight: 600; line-height: 1; }
.mk-plus:hover { transform: scale(1.06); }
.mk-plus[aria-expanded="true"] { transform: rotate(45deg); }
.mk-wardrobe { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .35s ease, opacity .25s ease; }
.mk-wardrobe.open { grid-template-rows: 1fr; opacity: 1; margin-bottom: 10px; }
.mk-wardrobe-in { min-height: 0; overflow: hidden; }
.mk-wardrobe h3 { margin: 2px 0 8px; font-size: 15px; }
.mk-wardrobe .mk-muted { font-size: 13px; margin: 6px 0 0; }
.mk-outfit-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.mk-outfit { position: relative; padding: 0; border: 2px solid transparent; border-radius: var(--mk-r-s); background: var(--mk-card-2); color: inherit; font: inherit; cursor: pointer; overflow: hidden; }
.mk-outfit img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; }
.mk-outfit span { display: block; padding: 4px 6px; font-size: 12px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-outfit[aria-checked="true"] { border-color: var(--mk-accent); box-shadow: 0 0 14px var(--mk-glow); }
@media (prefers-reduced-motion: reduce) { .mk-wardrobe, .mk-plus { transition: none; } }
/* Premium: a considered card, not a form. Eyebrow and title, why it came up, the price, what you get, the credits, one big button. */
.mk-pay { width: min(440px, calc(100vw - 32px)); padding: 26px 24px 20px; border-radius: 22px; box-shadow: 0 24px 80px rgb(0 0 0 / .45), 0 0 0 1px var(--mk-line);
  background: radial-gradient(420px 180px at 50% -60px, var(--mk-glow), transparent 70%) no-repeat, var(--mk-card); }
.mk-pay::backdrop { background: rgb(8 7 10 / .62); backdrop-filter: blur(6px); }
.mk-pay[open] { animation: mk-rise .22s ease-out; }
@keyframes mk-rise { from { opacity: 0; transform: translateY(10px) scale(.985); } }
@media (prefers-reduced-motion: reduce) { .mk-pay[open] { animation: none; } }
.mk-pay-eyebrow { margin: 0 0 2px !important; font-size: 12px !important; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--mk-muted); }
.mk-pay h2 { margin: 0 0 12px; font-size: 30px; line-height: 1.1; letter-spacing: -.02em; color: var(--mk-accent-text); }
.mk-pay-why { margin: 0 0 16px !important; padding: 10px 12px; border-left: 3px solid var(--mk-accent); border-radius: 4px var(--mk-r-s) var(--mk-r-s) 4px; background: var(--mk-card-2); font-size: 14px !important; line-height: 1.45; }
.mk-pay-why:empty { display: none; }
.mk-pay-price { display: flex !important; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 16px !important; }
.mk-pay-price[hidden] { display: none !important; }
.mk-price-now { font-size: 40px; font-weight: 720; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.mk-price-now small { margin-left: 2px; font-size: 16px; font-weight: 500; letter-spacing: 0; color: var(--mk-muted); }
.mk-pay-price .mk-was { font-size: 16px; color: var(--mk-muted); opacity: 1; }
.mk-pill { padding: 3px 10px; border-radius: 999px; background: var(--mk-glow); color: var(--mk-accent-text); font-size: 12px; font-weight: 650; letter-spacing: .01em; }
.mk-perks { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 9px; }
.mk-perks li { position: relative; padding-left: 28px; font-size: 15px; line-height: 1.4; }
.mk-perks li::before { content: ""; position: absolute; left: 2px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--mk-glow); }
.mk-perks li::after { content: ""; position: absolute; left: 7px; top: 6px; width: 4px; height: 8px; border: solid var(--mk-accent-text); border-width: 0 2px 2px 0; transform: rotate(40deg); }
.mk-pay-credits { display: grid; gap: 2px; margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--mk-line); border-radius: var(--mk-r-m); background: var(--mk-card-2); }
.mk-pay-credits[hidden] { display: none; }
.mk-pay-credits b { font-size: 15px; }
.mk-pay-credits span { font-size: 13px; line-height: 1.4; color: var(--mk-muted); }
.mk-pay-actions { display: grid; gap: 4px; }
.mk-pay .mk-btn.primary { justify-content: center; padding: 14px 18px; font-size: 17px; box-shadow: 0 8px 28px var(--mk-glow); }
.mk-btn.ghost { justify-content: center; border-color: transparent; background: transparent; color: var(--mk-muted); }
.mk-btn.ghost:hover:not(:disabled) { color: var(--mk-ink); border-color: transparent; }
.mk-pay-fine { margin: 8px 0 0 !important; text-align: center; font-size: 12px !important; color: var(--mk-muted); }

/* Beta sign-in (accounts): one card, and Sign out beside the version. */
.mk-auth { max-width: 460px; }
.mk-account { display: flex; gap: 12px; }
.mk-account .mk-link { font-size: 13px; }

/* Your casts: a strip under the player, newest first. */
.mk-runs h2 { margin-bottom: 12px !important; }
.mk-run-row { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; }
.mk-run { position: relative; flex: 0 0 auto; width: 140px; display: grid; gap: 6px; }
.mk-run-play { padding: 0; border: 1px solid var(--mk-line); border-radius: var(--mk-r-m); overflow: hidden; background: var(--mk-card-2); aspect-ratio: 9 / 16; cursor: pointer; color: var(--mk-muted); font: inherit; font-size: 13px; }
.mk-run-play:hover:not(:disabled) { border-color: var(--mk-accent); }
.mk-run-play:disabled { cursor: default; }
.mk-run-play img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.mk-run-play video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.mk-run-ph { display: grid; place-items: center; align-content: center; gap: 8px; height: 100%; padding: 8px; text-align: center; }
/* A live cast: what it is doing, a small bar, and a guess at what's left, all on its own thumbnail. */
.mk-run-ph b { color: var(--mk-ink); font-size: 14px; line-height: 1.25; }
.mk-run-bar { display: block; width: 78%; height: 4px; border-radius: 2px; background: var(--mk-line); overflow: hidden; }
.mk-run-bar i { display: block; height: 100%; background: var(--mk-accent); border-radius: 2px; transition: width 1s linear; }
.mk-run-eta { font-size: 12px; color: var(--mk-muted); font-variant-numeric: tabular-nums; line-height: 1.25; }
.mk-run.failed .mk-run-ph, .mk-run.failed .mk-run-line { color: var(--mk-bad); }
.mk-run-cap { display: grid; font-size: 13px; line-height: 1.3; min-width: 0; padding-right: 26px; }
.mk-run-cap b, .mk-run-cap span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-run-line { color: var(--mk-muted); white-space: normal !important; }
.mk-run-menu { position: absolute; right: 0; bottom: 0; }
.mk-run-menu summary { list-style: none; cursor: pointer; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: var(--mk-muted); }
.mk-run-menu summary::-webkit-details-marker { display: none; }
.mk-run-menu summary:hover { background: var(--mk-card-2); color: var(--mk-ink); }
.mk-run-pop { position: absolute; right: 0; bottom: 28px; z-index: 2; display: grid; gap: 6px; min-width: 150px; padding: 10px 12px; border: 1px solid var(--mk-line); border-radius: var(--mk-r-s); background: var(--mk-card); box-shadow: 0 8px 24px rgb(0 0 0 / .3); }
.mk-run-pop .mk-link { text-align: left; font-size: 14px; text-decoration: none; }
.mk-link.bad { color: var(--mk-bad); }
.mk-was { opacity: .6; font-weight: 400; }
.mk-price { margin: 4px 0 8px; font-size: 18px; font-weight: 600; }

/* A photo of your character: a dropped photo, the words under it, and the result card's photo. */
.mk-drop img { display: block; max-width: 100%; max-height: 320px; border-radius: var(--mk-r-s); }
.mk-photo { margin-top: 10px; }
.mk-photo .mk-field { margin: 0; }
.mk-photo-out { display: block; width: 100%; max-height: 70vh; object-fit: contain; border-radius: var(--mk-r-m); background: #000; }