/* Mark's studio in the game (D238, D240, room A): the studio builder's mock-up styles (design/studio/studio.css and the
   frame's c1-mark / c1-cloud / c1-glass), namespaced mks-*; the game's conversation window skinned for his studio
   (mk-room); his loading screens (design/loading2/loading2.css and design/loading3/loading3.css, as they are).
   Sizes in the game's --u (Windows min(w/1600, h/900), the iPhone frame w/844). */

/* ------------------------------------------------------------------------------------------------- the studio */
.mks { position: absolute; inset: 0; z-index: 11; overflow: hidden; background: #f3e4cf; touch-action: none; -webkit-user-select: none; user-select: none;
  opacity: 0; transition: opacity .6s ease; }
.mks.on { opacity: 1; }
.mks-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .5s ease; }
.mks.living .mks-gl { opacity: 1; }
.mks.rest .mks-gl, .mks.dim .mks-gl { opacity: 0; }
.mks-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mks.living .mks-still { visibility: hidden; transition: visibility 0s .5s; }
.mks-marks, .mks-ui { position: absolute; inset: 0; pointer-events: none; }
.mks-ui > * { pointer-events: auto; }
.mks-hit { position: absolute; inset: 0; cursor: default; }
.mks.hub .mks-hit.on, .mks-hit.pick { cursor: pointer; }
.mks.rest .mks-marks, .mks.rest .mks-ui, .mks.rest .mks-hit { visibility: hidden; }

.mks-label { position: absolute; translate: -50% -100%; padding: calc(var(--u) * 8) calc(var(--u) * 16); border-radius: 999px; white-space: nowrap;
  font: 1000 calc(var(--u) * 20)/1 "Nunito", sans-serif; color: #2a1245; background: rgba(255, 251, 243, .9);
  box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 18) rgba(60, 30, 80, .28), inset 0 0 0 1.5px rgba(255, 255, 255, .9);
  opacity: 0; transform: translateY(calc(var(--u) * 6)) scale(.96); transition: opacity .25s, transform .35s cubic-bezier(.3, 1.4, .4, 1); }
.mks-label.on { opacity: 1; transform: none; }
.mks-label.next { animation: mksNext 2.2s ease-in-out infinite; }
@keyframes mksNext { 0%, 100% { box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 18) rgba(60, 30, 80, .28), inset 0 0 0 1.5px rgba(255, 255, 255, .9); }
  50% { box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 18) rgba(60, 30, 80, .28), inset 0 0 0 1.5px rgba(255, 255, 255, .9), 0 0 calc(var(--u) * 22) rgba(255, 205, 96, .85); } }
.mks-label small { display: block; margin-top: calc(var(--u) * 3); font-size: calc(var(--u) * 13); font-weight: 800; color: #7a6a90; }
.f-ios .mks-label { font-size: calc(var(--u) * 11); padding: calc(var(--u) * 5) calc(var(--u) * 10); }
.f-ios .mks-label small { font-size: calc(var(--u) * 8); }

/* the microphone is awake (D239): a frosted glass ring breathes on the floor round its base, two waves rise out of it;
   a soft light breathes on its head; in the demo of 11.2 the light turns the red of Do */
/* (the owner 2026-10-27: «мікрофон видніє як неактивний, а по факту він працює»: awake reads at a glance now, calm and
   premium: the ring brighter, a warm light inside the capsule and its grille, a halo round the head, a faint rainbow glint
   drifting along the metal like the room's caustics, the place's own glow resting on it (studio.js). One slow breath
   for all of it, 4.6 s, the tempo of the living room; nothing blinks. The b11.01 push-in brightens further, .mks.close) */
/* (the owner again 2026-10-27, «в студії не видніє мікрофон як активний»: the music corner's sleep had been greying the
   microphone standing in front of it. In the wide shot the renderer now spares its silhouette from that sleep, lights its
   capsule from inside its own outline and lays the room's warm light round it, studio-living.js and studio.js cues();
   the capsule overlay below is the close-up's only. The ring, the glow and the halo here stay, a little warmer) */
.mks-ring { position: absolute; translate: -50% -50%; aspect-ratio: 1 / .3; border-radius: 50%; opacity: 0; transition: opacity .8s;
  background: radial-gradient(closest-side, rgba(255, 240, 200, .12) 50%, rgba(255, 226, 160, .58) 80%, rgba(255, 222, 160, 0));
  box-shadow: 0 0 0 2.5px rgba(255, 255, 255, .98), 0 0 0 7px rgba(255, 198, 96, .62), 0 0 34px 12px rgba(255, 186, 84, .62), inset 0 0 20px 6px rgba(255, 220, 150, .85); }
.mks-ring.on { opacity: 1; animation: mksRing 4.6s ease-in-out infinite; }
.mks-ring i { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 250, 230, .9), 0 0 14px 3px rgba(255, 196, 92, .6); opacity: 0; animation: mksWave 4.6s ease-out infinite; }
.mks-ring i + i { animation-delay: 2.3s; }
@keyframes mksRing { 0%, 100% { scale: .98; filter: brightness(.9); } 50% { scale: 1.03; filter: brightness(1.16); } }
@keyframes mksWave { 0% { opacity: .7; scale: .94; } 100% { opacity: 0; scale: 1.45; } }
.mks-micglow { position: absolute; translate: -50% -50%; aspect-ratio: 1; border-radius: 50%; mix-blend-mode: screen; opacity: 0; transition: opacity .8s, background .9s;
  background: radial-gradient(closest-side, rgba(255, 236, 196, .68), rgba(255, 210, 150, .2) 52%, rgba(255, 210, 150, 0) 76%); }
.mks-micglow.on { opacity: 1; animation: mksGlow 4.6s ease-in-out infinite; }
/* its halo: a soft warm air round the head */
.mks-michalo { position: absolute; translate: -50% -50%; aspect-ratio: 1; border-radius: 50%; opacity: 0; transition: opacity .8s; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 196, 102, .36), rgba(255, 188, 94, .18) 42%, rgba(255, 188, 94, .05) 66%, rgba(255, 188, 94, 0) 80%); }
.mks-michalo.on { opacity: 1; animation: mksHalo 4.6s ease-in-out infinite; }
@keyframes mksHalo { 0%, 100% { scale: .96; opacity: .78; } 50% { scale: 1.04; opacity: 1; } }
/* the light inside: warm through the capsule and its grille (its shape: the dome at the top, the body under it) */
.mks-miccap { position: absolute; border-radius: 48% 48% 36% 36% / 26% 26% 14% 14%; overflow: hidden; mix-blend-mode: screen; opacity: 0; transition: opacity .8s; pointer-events: none;
  background: radial-gradient(34% 24% at 50% 42%, rgba(255, 238, 196, .42), rgba(255, 238, 196, 0)),
    radial-gradient(72% 54% at 50% 42%, rgba(255, 196, 112, .5), rgba(255, 166, 74, .28) 58%, rgba(255, 160, 70, .04) 90%),
    repeating-linear-gradient(0deg, rgba(255, 206, 140, 0) 0 2px, rgba(255, 206, 140, .16) 2px 3px); }
.mks-miccap.on { opacity: 1; animation: mksCap 4.6s ease-in-out infinite; }
@keyframes mksCap { 0%, 100% { filter: brightness(.86); } 50% { filter: brightness(1.12); } }
/* its glint: a faint rainbow along the metal, drifting slowly like the room's caustics */
.mks-micshine { position: absolute; inset: -8% -70%; mix-blend-mode: screen; opacity: .6;
  background: linear-gradient(100deg, transparent 38%, rgba(255, 150, 150, .3) 42%, rgba(255, 214, 120, .32) 45%, rgba(150, 236, 170, .28) 48%, rgba(130, 190, 255, .3) 51%, rgba(196, 150, 255, .28) 54%, transparent 58%);
  animation: mksShine 11s ease-in-out infinite alternate; }
@keyframes mksShine { from { translate: -34% 0; } to { translate: 34% 0; } }
/* the push-in (b11.01, "the microphone begins to glow"): brighter than the idle room */
.mks.close .mks-miccap.on { animation-name: mksCapClose; }
@keyframes mksCapClose { 0%, 100% { filter: brightness(1.15); } 50% { filter: brightness(1.45); } }
.mks.close .mks-michalo { background: radial-gradient(closest-side, rgba(255, 196, 102, .36), rgba(255, 188, 94, .2) 42%, rgba(255, 188, 94, .06) 66%, rgba(255, 188, 94, 0) 80%); }
.mks-micglow.do { background: radial-gradient(closest-side, rgba(255, 150, 150, .95), rgba(242, 84, 91, .5) 48%, rgba(242, 84, 91, 0) 78%); }
.mks-ring.do { box-shadow: 0 0 0 2.5px rgba(255, 235, 235, .95), 0 0 0 6px rgba(242, 84, 91, .5), 0 0 26px 8px rgba(242, 84, 91, .55), inset 0 0 16px 4px rgba(255, 160, 160, .7); }
@keyframes mksGlow { 0%, 100% { filter: brightness(.8); scale: .94; } 50% { filter: brightness(1.15); scale: 1.06; } }
/* (the music corner's little lock is gone, owner 2026-10-27: «прибери будь ласка ту колодочку»: the corner is asleep
   by its own grey moonlight alone, studio.js cues()) */

/* Mark at the foot of the screen and his words (the frame's c1-mark and c1-cloud) */
.mks-mark { position: absolute; left: calc(var(--u) * 30); bottom: calc(var(--u) * -40); width: calc(var(--u) * 360); aspect-ratio: 595 / 764; z-index: 6; transform-origin: 50% 100%;
  filter: drop-shadow(0 calc(var(--u) * 14) calc(var(--u) * 24) rgba(40, 10, 60, .4)) drop-shadow(calc(var(--u) * -4) 0 calc(var(--u) * 14) rgba(255, 210, 140, .35));
  pointer-events: none !important; transition: opacity .5s, translate .6s cubic-bezier(.3, 1.2, .4, 1); }
.mks-mark .br { position: absolute; inset: 0; transform-origin: 50% 100%; animation: mksBreath 3.7s ease-in-out infinite; }
.mks-mark img { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; opacity: 0; transition: opacity .18s; }
.mks-mark img.on { opacity: 1; }
@keyframes mksBreath { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(.994, 1.014); } }
.f-ios .mks-mark { left: calc(var(--u) * 52); bottom: calc(var(--u) * -22); width: calc(var(--u) * 170); }
/* Mark stands in the room in the hub; in a close-up he comes in only while he speaks, so he never sits on a box or the
   corner; while the game's own conversation window is open he is the one in it (no second Mark) */
.mks:not(.hub):not(.talk) .mks-mark, .mks.convo .mks-mark { opacity: 0; translate: 0 30%; }
.mks-cloud { position: absolute; left: calc(var(--u) * 330); bottom: calc(var(--u) * 210); max-width: calc(var(--u) * 640); z-index: 8;
  padding: calc(var(--u) * 18) calc(var(--u) * 30) calc(var(--u) * 20); border-radius: calc(var(--u) * 36) calc(var(--u) * 36) calc(var(--u) * 36) calc(var(--u) * 10);
  background: linear-gradient(180deg, rgba(255, 252, 245, .97), rgba(255, 245, 228, .94)); box-shadow: inset 0 calc(var(--u) * 2) 0 #fff, var(--sh-2);
  transform-origin: 0 100%; transition: opacity .3s, transform .4s cubic-bezier(.3, 1.4, .4, 1); cursor: pointer; }
.mks-cloud[hidden] { display: block; opacity: 0; transform: translateY(calc(var(--u) * 10)) scale(.97); pointer-events: none !important; }
.mks-cloud .nm { display: block; font: 1000 calc(var(--u) * 17)/1 "Nunito", sans-serif; letter-spacing: calc(var(--u) * 3); text-transform: uppercase; color: var(--violet); }
.mks-cloud.ft .nm { color: #b0762a; }
.mks-cloud .ln { display: block; margin-top: calc(var(--u) * 8); font: 1000 calc(var(--u) * 34)/1.15 "Nunito", sans-serif; color: var(--ink); }
.f-ios .mks-cloud { left: calc(var(--u) * 200); bottom: calc(var(--u) * 92); max-width: calc(var(--u) * 340);
  padding: calc(var(--u) * 10) calc(var(--u) * 16) calc(var(--u) * 11); border-radius: calc(var(--u) * 20) calc(var(--u) * 20) calc(var(--u) * 20) calc(var(--u) * 6); }
.f-ios .mks-cloud .nm { font-size: calc(var(--u) * 10); letter-spacing: calc(var(--u) * 2); }
.f-ios .mks-cloud .ln { font-size: calc(var(--u) * 17.5); margin-top: calc(var(--u) * 4); }

/* the way out sits in one place, under the tablet: Leave in the room, Back in a close-up */
.mks-glass { display: inline-flex; align-items: center; gap: calc(var(--u) * 12); height: calc(var(--u) * 66); padding: 0 calc(var(--u) * 28) 0 calc(var(--u) * 18);
  border: 0; border-radius: 999px; cursor: pointer; font: 1000 calc(var(--u) * 25)/1 "Nunito", sans-serif; color: var(--cream, #fff8ec); -webkit-tap-highlight-color: transparent;
  background: linear-gradient(180deg, rgba(92, 44, 150, .86), rgba(58, 22, 104, .9)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 calc(var(--u) * 2) 0 rgba(255, 255, 255, .22), inset 0 0 0 1.5px rgba(255, 255, 255, .14), var(--sh-1);
  transition: translate .35s cubic-bezier(.3, 1.6, .4, 1), scale .2s; }
.mks-glass:hover { translate: 0 calc(var(--u) * -3); }
.mks-glass:active { scale: .96; }
.mks-glass kbd { min-width: calc(var(--u) * 30); height: calc(var(--u) * 30); font-size: calc(var(--u) * 14); }
.mks-back, .mks-leave { position: absolute; right: calc(var(--u) * 30); top: calc(var(--u) * 168); z-index: 9; }
.mks-back[hidden], .mks-leave[hidden] { display: none; }
.mks-back .ic, .mks-leave .ic { display: grid; place-items: center; width: calc(var(--u) * 34); height: calc(var(--u) * 34); flex: none; }
.mks-back .ic img, .mks-leave .ic img { width: 100%; height: 100%; object-fit: contain; }
.f-ios .mks-back, .f-ios .mks-leave { right: calc(var(--u) * 12); top: calc(var(--u) * 92); width: calc(var(--u) * 40); height: calc(var(--u) * 40); padding: 0; justify-content: center; }
.f-ios .mks-back .ic, .f-ios .mks-leave .ic { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
.f-ios .mks-back .lb, .f-ios .mks-leave .lb, .f-ios .mks-glass kbd { display: none; }

/* the layers over the studio: the console, the Music Box, the vocal studio, a loading screen */
.mks-layer { position: absolute; inset: 0; pointer-events: none; }
.mks-layer > * { pointer-events: auto; }
.mks-layer[data-layer="console"] { z-index: 10; }
.mks-layer[data-layer="box"] { z-index: 12; }
.mks-layer[data-layer="vocal"] { z-index: 13; }
.mks-layer[data-layer="load"] { z-index: 14; }
.mks-layer:empty { display: none; }
.mks-layer .pix-loading { z-index: 1; }
.mks-layer[data-layer="vocal"] > .vs-host { position: absolute; inset: 0; }

@media (prefers-reduced-motion: reduce) {
  .mks-ring.on, .mks-ring i, .mks-micglow.on, .mks-mark .br, .mks-label.next, .mks-michalo.on, .mks-miccap.on, .mks-micshine { animation: none; }
}

/* --------------------------------------------- the game's conversation window in Mark's studio (story talks, D213) */
/* The talk runs on the game's engine (resume, keys, variants, no Leave); in his studio it wears the studio's own look:
   no picture of its own (the living studio and its camera stay in view), Mark at the foot, his cloud and the answers
   where the studio mock-up has them. */
.premium-dialogue.mk-room { background: transparent; }
.premium-dialogue.mk-room .tk-bg { display: none; }
/* (his context keeps the tablet away, as the HUD does under it: mk-busy) */
.premium-dialogue.mk-room .hud-tab { visibility: hidden; }
.premium-dialogue.mk-room .tk-vig { background: radial-gradient(70% 70% at 18% 100%, rgba(40, 12, 60, .28), transparent 70%); }
.premium-dialogue.mk-room .tk-lila { left: calc(var(--u) * 30); bottom: calc(var(--u) * -40); width: calc(var(--u) * 360); height: calc(var(--u) * 462); }
.premium-dialogue.mk-room .tk-card { left: calc(var(--u) * 330); top: auto; bottom: calc(var(--u) * 210); max-width: calc(var(--u) * 640);
  padding: calc(var(--u) * 18) calc(var(--u) * 30) calc(var(--u) * 20); border-radius: calc(var(--u) * 36) calc(var(--u) * 36) calc(var(--u) * 36) calc(var(--u) * 10); }
.premium-dialogue.mk-room .tk-card::before { display: none; }
.premium-dialogue.mk-room .tk-name b { font-size: calc(var(--u) * 17); }
.premium-dialogue.mk-room .tk-line { font-size: calc(var(--u) * 34); line-height: 1.15; margin-top: calc(var(--u) * 8); }
.premium-dialogue.mk-room .tk-heading { display: none; }
.premium-dialogue.mk-room .tk-answers { left: calc(var(--u) * 330); top: auto; bottom: calc(var(--u) * 96); width: auto; max-width: calc(var(--u) * 1180);
  flex-direction: row; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 14); }
.premium-dialogue.mk-room .tk-answers .button-row { margin: 0; }
.premium-dialogue.mk-room .tk-ans { min-height: calc(var(--u) * 66); padding: calc(var(--u) * 6) calc(var(--u) * 26) calc(var(--u) * 6) calc(var(--u) * 10); }
.premium-dialogue.mk-room .tk-ans .tk-t { font-size: calc(var(--u) * 25); }
.premium-dialogue.mk-room .tk-ans .tk-ic { width: calc(var(--u) * 40); height: calc(var(--u) * 40); }
.premium-dialogue.mk-room .tk-ans kbd { min-width: calc(var(--u) * 32); height: calc(var(--u) * 32); font-size: calc(var(--u) * 15); }
.premium-dialogue.mk-room.long-dialogue .tk-line { font-size: calc(var(--u) * 30); }
.f-ios .premium-dialogue.mk-room .tk-lila, .premium-dialogue.mk-room.f-ios .tk-lila, .f-ios.premium-dialogue.mk-room .tk-lila { left: calc(var(--u) * 52); bottom: calc(var(--u) * -22); width: calc(var(--u) * 170); height: calc(var(--u) * 218); }
.f-ios .premium-dialogue.mk-room .tk-card, .f-ios.premium-dialogue.mk-room .tk-card { left: calc(var(--u) * 200); bottom: calc(var(--u) * 92); max-width: calc(var(--u) * 360);
  padding: calc(var(--u) * 10) calc(var(--u) * 16) calc(var(--u) * 11); border-radius: calc(var(--u) * 20) calc(var(--u) * 20) calc(var(--u) * 20) calc(var(--u) * 6); }
.f-ios .premium-dialogue.mk-room .tk-name b, .f-ios.premium-dialogue.mk-room .tk-name b { font-size: calc(var(--u) * 10); }
.f-ios .premium-dialogue.mk-room .tk-line, .f-ios.premium-dialogue.mk-room .tk-line { font-size: calc(var(--u) * 17.5); margin-top: calc(var(--u) * 4); }
.f-ios .premium-dialogue.mk-room .tk-answers, .f-ios.premium-dialogue.mk-room .tk-answers { left: calc(var(--u) * 200); bottom: calc(var(--u) * 22); max-width: calc(var(--u) * 600); gap: calc(var(--u) * 8); }
.f-ios .premium-dialogue.mk-room .tk-ans, .f-ios.premium-dialogue.mk-room .tk-ans { min-height: calc(var(--u) * 36); padding: calc(var(--u) * 3) calc(var(--u) * 14) calc(var(--u) * 3) calc(var(--u) * 5); }
.f-ios .premium-dialogue.mk-room .tk-ans .tk-t, .f-ios.premium-dialogue.mk-room .tk-ans .tk-t { font-size: calc(var(--u) * 13.5); }
.f-ios .premium-dialogue.mk-room .tk-ans .tk-ic, .f-ios.premium-dialogue.mk-room .tk-ans .tk-ic { width: calc(var(--u) * 22); height: calc(var(--u) * 22); }
/* (in the iPhone frame the listen button sits in the card's top right corner over the words, hud-e-v2 .f-ios .tk-listen;
   the game's own cards keep a 44u column for it, his studio cards are narrower: the first line steps round it, the
   lines under it run full width; the inspector's finding 2026-10-26: it covered the last word of line 1) */
.f-ios .premium-dialogue.mk-room .tk-line::before, .f-ios.premium-dialogue.mk-room .tk-line::before { content: ""; float: right; width: calc(var(--u) * 28); height: calc(var(--u) * 14); }

/* ------------------------------------------------------------- the loading screens (loading2.css + loading3.css) */
.mk-load .pl-art { animation: mkKen 7.5s cubic-bezier(.25, .1, .25, 1) both; transform-origin: 70% 40%; }
@keyframes mkKen { from { scale: 1.14; translate: 1.5% 1%; filter: blur(6px) brightness(.7); } 18% { filter: blur(0) brightness(1); } to { scale: 1.02; translate: 0 0; } }
.mk-load .pl-sweep { position: absolute; inset: -20% -10%; pointer-events: none; mix-blend-mode: soft-light; opacity: .8;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 240, 200, .75) 50%, transparent 62%); background-size: 260% 100%; animation: mkSweep 5.5s 1.2s ease-in-out infinite; }
@keyframes mkSweep { from { background-position: 140% 0; } to { background-position: -40% 0; } }
.mk-load .pl-shade { background: linear-gradient(180deg, rgba(20, 8, 34, 0) 42%, rgba(20, 8, 34, .82)), radial-gradient(70% 90% at 0% 100%, rgba(20, 8, 34, .55), transparent 60%); }
.mk-load .pl-text > * { opacity: 0; animation: mkIn .8s cubic-bezier(.2, .8, .2, 1) both; }
.mk-load .pl-text small { animation-delay: .5s; }
.mk-load .pl-text h1 { animation-delay: .65s; }
.mk-load .pl-text .pl-ft { animation-delay: .95s; }
.mk-load .pl-text .pl-bar { animation-delay: 1.15s; }
@keyframes mkIn { from { opacity: 0; transform: translateY(40%); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.mk-load .pl-bar { position: relative; overflow: visible; }
.mk-load .pl-bar i { position: relative; overflow: visible; }
.mk-load .pl-bar i::after { content: ""; position: absolute; right: calc(var(--u) * -14); top: 50%; width: calc(var(--u) * 34); height: calc(var(--u) * 34); translate: 0 -50%; border-radius: 50%;
  background: radial-gradient(closest-side, #fff, rgba(255, 213, 107, .85) 40%, transparent); mix-blend-mode: screen; }
.mk-load .pl-notes { display: inline-flex; gap: calc(var(--u) * 10); margin-left: calc(var(--u) * 16); vertical-align: middle; }
.mk-load .pl-notes img { width: calc(var(--u) * 30); height: calc(var(--u) * 30); object-fit: contain; opacity: .25; transform: scale(.7); transition: opacity .35s, transform .45s cubic-bezier(.3, 1.6, .4, 1); filter: drop-shadow(0 0 calc(var(--u) * 6) rgba(255, 220, 140, .7)); }
.mk-load .pl-notes img.on { opacity: 1; transform: none; }
.f-ios .mk-load .pl-notes img { width: calc(var(--u) * 16); height: calc(var(--u) * 16); }
.mk-load .pl-row { display: flex; align-items: center; }
.mk-load .pl-cam { position: absolute; inset: 0; overflow: hidden; transform-origin: 62% 45%; }
.mk-load .pl-art { animation: none; }
.mk-load .pl-dof { -webkit-mask: radial-gradient(21% 44% at var(--focus), transparent 38%, #000 100%); mask: radial-gradient(21% 44% at var(--focus), transparent 38%, #000 100%); }
.mk-load .pl-sun { position: absolute; width: 58%; aspect-ratio: 1; right: -12%; top: -30%; pointer-events: none; mix-blend-mode: screen; opacity: .85;
  background: radial-gradient(closest-side, rgba(255, 248, 222, .8), rgba(255, 218, 150, .32) 38%, rgba(255, 200, 120, .08) 62%, transparent 72%); animation: mkSun 5.5s ease-in-out infinite alternate; }
.mk-load.vA .pl-sun { right: auto; left: 18%; top: -34%; }
@keyframes mkSun { from { scale: 1; opacity: .7; } to { scale: 1.08; opacity: .95; } }
.mk-load .pl-text { z-index: 3; }
.mk-load .pl-sweep { z-index: 1; }
.f-ios .mk-load .pl-bar i::after { width: calc(var(--u) * 15); height: calc(var(--u) * 15); right: calc(var(--u) * -6); }
/* Mark's console loading (loading3): the picture keeps Mark's curls in the wide Windows frame */
.mk-load3 .pl-art { object-fit: cover; object-position: 50% 30%; }
.mk-load3 .pl-cam { transform-origin: 63% 30%; }
.mk-load3.vA .pl-dof { -webkit-mask: radial-gradient(27% 64% at 63% 52%, transparent 52%, #000 100%); mask: radial-gradient(27% 64% at 63% 52%, transparent 52%, #000 100%); }
.mk-load3.vA .pl-shade { background: linear-gradient(90deg, rgba(20, 8, 34, .8) 0%, rgba(20, 8, 34, .55) 30%, rgba(20, 8, 34, 0) 52%),
  linear-gradient(180deg, rgba(20, 8, 34, 0) 70%, rgba(20, 8, 34, .45)); }
.mk-load3 .pl-text .pl-ft { max-width: calc(var(--u) * 640); }
.f-ios .mk-load3 .pl-text .pl-ft { max-width: calc(var(--u) * 330); }
@media (prefers-reduced-motion: reduce) { .mk-load .pl-sweep, .mk-load .pl-sun, .mk-load .pl-text > * { animation: none; opacity: 1; } }
/* (the iPhone frame's own talk rules place the card and the answers from the top and the right, per kind of talk:
   lead-final.css, fix9-11.css; in his studio the card sits at the foot, so those are lifted here, one step stronger) */
.f-ios .premium-dialogue.mk-room.mk-room .tk-card { top: auto; right: auto; width: auto; height: auto; max-height: none; overflow: visible; }
.f-ios .premium-dialogue.mk-room.mk-room .tk-answers { top: auto; right: auto; width: auto; }
.premium-dialogue.mk-room.mk-room .tk-card { top: auto; right: auto; height: auto; max-height: none; }
.premium-dialogue.mk-room.mk-room .tk-answers { top: auto; right: auto; }
/* over the console (his intro, the strum, his thanks): his words keep clear of its buttons (lead's finding 2026-10-26:
   the bubble covered pads 6 and 7): Mark and his cloud take the console's own corner (console.css .mk-cv-mark /
   .mk-cv-cloud), the answers sit below the console's front edge */
.premium-dialogue.mk-room.mk-console .tk-lila { left: calc(var(--u) * 18); bottom: calc(var(--u) * -34); width: calc(var(--u) * 270); height: calc(var(--u) * 347); }
.premium-dialogue.mk-room.mk-console .tk-card { left: calc(var(--u) * 34); bottom: calc(var(--u) * 318); max-width: calc(var(--u) * 440); }
.premium-dialogue.mk-room.mk-console .tk-line { font-size: calc(var(--u) * 29); }
.premium-dialogue.mk-room.mk-console .tk-answers { left: calc(var(--u) * 300); bottom: calc(var(--u) * 26); }
/* (iPhone: his words at the size of his other studio talks, 17.5u (the inspector's finding 2026-10-26: 14u here, then
   stepped down to 12 px by the game's fitTalk, which shrinks a line while the answers sit closer to the bottom edge than
   its gap, max(10px, 1.8% of the height): Continue now sits above that gap). The card takes the column left of the
   wheel: right of the frame's side cutout, clear of the HUD avatar above it, of pads 6 and 7 and of the ring's "6";
   Mark a little smaller under it, so four and five line cards fit) */
.f-ios .premium-dialogue.mk-room.mk-console.mk-console .tk-lila { left: calc(var(--u) * 42); bottom: calc(var(--u) * -24); width: calc(var(--u) * 114); height: calc(var(--u) * 146); }
.f-ios .premium-dialogue.mk-room.mk-console.mk-console .tk-card { left: calc(var(--u) * 48); bottom: calc(var(--u) * 122); max-width: calc(var(--u) * 200); }
.f-ios .premium-dialogue.mk-room.mk-console.mk-console .tk-line { font-size: calc(var(--u) * 17.5); }
.f-ios .premium-dialogue.mk-room.mk-console.mk-console .tk-answers { left: calc(var(--u) * 200); bottom: max(12px, calc(var(--u) * 10)); }
/* (one Mark: while his talk is up over the console, the console's own Mark and cloud step aside) */
.game:has(.modal-layer .premium-dialogue.mk-console) .mk-cv-mark, .game:has(.modal-layer .premium-dialogue.mk-console) .mk-cv-cloud { visibility: hidden; }