/* editor.css: the Vice Cuts editor layer. Sits on v2.css (the round-2 landing system) and the
   in-video overlay styles in hud.css. Shared by directions A, B and C.
   Brief (Jesse, 2026-11-04): "like Apple and Rockstar collabed on it."
   Apple owns the frame: SF, light glass on a pastel mesh, spring motion, air, few controls.
   Rockstar owns the moments: Pricedown set straight, minimap, wheels, wanted stars, cash, Mission Passed.
   Pricedown never sets UI text. */

:root {
  /* v3 landing (2026-11-04): Outfit for words */
  --sf: "Hanken Grotesk", "Outfit", -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  --ui: var(--sf);
  --ui-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --text: var(--sf);
  --spring: cubic-bezier(.2, 1.25, .3, 1);
  --soft: cubic-bezier(.32, .72, 0, 1);
  --route: #f05fa6;
  --fg: #15142a; --fg2: rgba(21, 20, 42, .6); --track: rgba(21, 20, 42, .08); --line: rgba(21, 20, 42, .1);
}
.glass--dark, .on-dark { --fg: #fff; --fg2: rgba(255, 255, 255, .7); --track: rgba(0, 0, 0, .2); --line: rgba(255, 255, 255, .14); color: #fff; }
html, body { height: 100%; }
body { overflow: hidden; color: var(--fg); }
button { background: none; border: 0; padding: 0; cursor: pointer; }
[tabindex]:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.ww-slot:focus-visible, .switch__wedge:focus-visible, .mm-blip:focus-visible { outline: none; }

/* ---------- the world: Jesse's Dreamina plates, slow Ken Burns (as the v3 landing) ---------- */
.world { position: fixed; inset: -4%; z-index: -1; background: var(--world) center / cover no-repeat; animation: kenburns 46s ease-in-out infinite alternate; transition: filter .7s var(--ease); }
.world-tint { position: fixed; inset: 0; z-index: -1; pointer-events: none; }

/* ---------- small type + controls ---------- */
.lbl { font: 600 12px/1 var(--sf); letter-spacing: .01em; color: var(--fg2); }
.ttl { font: 650 24px/1.12 var(--sf); letter-spacing: -.03em; color: var(--fg); }
.sub { font: 450 14px/1.45 var(--sf); color: var(--fg2); letter-spacing: -.01em; }
.btn small { font-weight: 500; opacity: .55; font-size: .82em; }
.btn--light { background: #fff; color: #15142a; } .btn--light:hover { background: #f1efff; }
.btn--light .key { background: #15142a; color: #fff; box-shadow: none; }
.btn--ghost { background: var(--track); color: var(--fg); box-shadow: inset 0 0 0 .5px var(--line); }
.btn--ghost:hover { background: var(--line); }
.btn--sm { height: 40px; font-size: 14px; padding: 0 16px; }
.btn:active { transform: scale(.97); }
.btn[disabled] { opacity: .35; pointer-events: none; }
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--track); box-shadow: inset 0 0 0 .5px var(--line); }
.seg button { height: 32px; padding: 0 13px; border-radius: 999px; font: 550 13px/1 var(--sf); color: var(--fg2); transition: background .3s var(--ease), color .2s; }
.seg button:hover { color: var(--fg); }
.seg button.on { background: #fff; color: #15142a; box-shadow: 0 4px 14px -4px rgba(21, 20, 42, .3); }
.toggle { width: 51px; height: 31px; border-radius: 999px; background: var(--track); box-shadow: inset 0 0 0 .5px var(--line); position: relative; transition: background .25s; flex: none; }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: transform .4s var(--spring); }
.toggle.on { background: #34c759; }
.toggle.on::after { transform: translateX(20px); }
.prompts { display: flex; gap: 18px; align-items: center; font: 500 13px/1 var(--sf); color: var(--fg); }
.prompts > span { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.prompts .key { min-width: 22px; height: 22px; font-size: 12px; }
.glass--dark .key, .on-dark .key { background: rgba(255, 255, 255, .18); color: #fff; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .45); }

/* ---------- the short preview: gradient "footage" until a real clip is dropped ---------- */
.shortbox { position: absolute; inset: 0; overflow: hidden; background: #2a2650; container-type: inline-size; --g1: #7fa3e6; --g2: #b7a2f2; --g3: #f6a8cb; --g4: #f8e6a2; }
.sb-mesh, .sb-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: filter 1s var(--ease); }
.sb-mesh { background: linear-gradient(165deg, var(--g1) 0%, var(--g2) 40%, var(--g3) 75%, var(--g4) 100%); overflow: hidden; }
.sb-mesh i { position: absolute; border-radius: 50%; filter: blur(18cqw); animation: drift 14s var(--ease) infinite alternate; }
.sb-mesh i:nth-child(1) { width: 90cqw; height: 90cqw; left: -30cqw; top: -20cqw; background: var(--g1); }
.sb-mesh i:nth-child(2) { width: 80cqw; height: 80cqw; right: -30cqw; top: 40cqw; background: var(--g3); animation-duration: 17s; animation-delay: -5s; }
.sb-mesh i:nth-child(3) { width: 90cqw; height: 70cqw; left: -10cqw; bottom: -20cqw; background: var(--g4); animation-duration: 12s; animation-delay: -9s; }
.sb-mesh i:nth-child(4) { width: 50cqw; height: 50cqw; left: 30cqw; top: 70cqw; background: var(--g2); animation-duration: 19s; animation-delay: -3s; }
.sb-mesh::before { content: ""; position: absolute; z-index: 1; inset: -6%; background: var(--art, none) center / cover no-repeat; animation: kenburns 30s ease-in-out infinite alternate; }
.sb-mesh::after { content: ""; position: absolute; z-index: 2; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(16, 14, 40, .3)); }
.shortbox.is-raw .sb-mesh, .shortbox.is-raw .sb-video { filter: grayscale(1) contrast(.7) brightness(.72); }
.shortbox.is-raw .short > :not(.s-tc) { visibility: hidden; }
.shortbox:not(.is-raw) .s-tc { display: none; }
.shortbox .s-tc { font: 500 3.6cqw/1 var(--ui-mono); color: rgba(255, 255, 255, .85); left: 6%; top: 8%; }
.shortbox .s-tc i { display: inline-block; width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: #ff453a; margin-right: 1.6cqw; vertical-align: .1em; animation: blink 1s steps(2) infinite; }
.shortbox .sb-sample { position: absolute; right: 6%; bottom: 3%; z-index: 4; font: 500 2.8cqw/1 var(--sf); color: rgba(255, 255, 255, .6); }

.shortbox .s-bars, .shortbox .sb-stars { display: none; }
.shortbox[data-preset="wanted"] .sb-stars { display: flex; }
.shortbox[data-preset="trailer"] .s-bars { display: block; }
.short .s-hook { font-size: 13cqw; outline: none; caret-color: #fff; cursor: text; }
.short .s-hook.pd--out { -webkit-text-stroke: .1em #15142a; text-shadow: .04em .05em 0 rgba(21, 20, 42, .9); }
.shortbox[data-preset="trailer"] .s-hook { top: 38%; font-size: 17cqw; transform: rotate(-6deg); text-transform: lowercase; }
.shortbox[data-outro="none"] .s-out { display: none; }
.short .s-cap { font-family: var(--sf); }
.short .s-cap[hidden] { display: none; }
.short .s-out { background: rgba(21, 20, 42, .22); }
.short .s-out .pd { -webkit-text-stroke-color: #15142a; }

.sb-stars { right: 6%; top: 8%; gap: 1cqw; }
.sb-stars svg { width: 5.6cqw; height: 5.6cqw; fill: rgba(255, 255, 255, .28); transform-box: fill-box; transform-origin: center; }
.short.is-play .sb-stars svg { animation: starClimb 6s infinite; }
.short.is-play .sb-stars svg:nth-child(2) { animation-delay: .14s; }
.short.is-play .sb-stars svg:nth-child(3) { animation-delay: .28s; }
.short.is-play .sb-stars svg:nth-child(4) { animation-delay: .42s; }
.short.is-play .sb-stars svg:nth-child(5) { animation-delay: .56s; }
.short.is-play .sb-stars svg:nth-child(6) { animation-delay: .7s; }
@keyframes starClimb { 0%, 3% { fill: rgba(255, 255, 255, .28); transform: scale(1); } 4% { fill: #fff; transform: scale(1.6); } 7%, 72% { fill: #fff; transform: scale(1); } 78%, 100% { fill: rgba(255, 255, 255, .28); } }

.short.is-edit *, .short.is-edit *::before, .short.is-edit *::after { animation: none !important; }
.short.is-edit .s-hook, .short.is-edit .s-cap { opacity: 1 !important; }
.short.is-edit .s-out { opacity: 0 !important; }
.short.is-edit .s-hook { transform: rotate(-4deg); }
.shortbox[data-preset="trailer"] .short.is-edit .s-hook { transform: rotate(-6deg); }
.short.is-edit .s-hook::after { content: ""; position: absolute; inset: -3cqw; border-radius: 3cqw; border: 1.5px dashed rgba(255, 255, 255, .85); pointer-events: none; }

.shortbox::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; background: #fff; opacity: 0; }
.shortbox.snap::after { animation: snapFlash .6s ease-out; }
.shortbox.snap .sb-mesh, .shortbox.snap .sb-video { animation: snapZoom .8s var(--spring); }
@keyframes snapFlash { 0% { opacity: .9; } 100% { opacity: 0; } }
@keyframes snapZoom { 0% { transform: scale(1.14); } 100% { transform: none; } }

.sb-scan { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; transition: opacity .4s; }
.shortbox.is-scan .sb-scan { opacity: 1; }
.sb-scan i { position: absolute; left: 0; right: 0; height: 26%; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .18), rgba(255, 255, 255, .7) 52%, transparent 54%); animation: scan 1.4s var(--ease) infinite; }
.sb-scan span { position: absolute; left: 0; right: 0; bottom: 9%; text-align: center; font: 600 4.2cqw/1 var(--sf); color: #fff; text-shadow: 0 1px 6px rgba(21, 20, 42, .5); }
@keyframes scan { from { top: -26%; } to { top: 100%; } }
.shortbox.is-scan .sb-mesh, .shortbox.is-scan .sb-video { filter: saturate(.5) blur(2px) brightness(.9); }

.sb-empty { position: absolute; inset: 0; z-index: 7; display: grid; place-content: center; gap: 12px; text-align: center; padding: 10%; color: #fff;
  background: rgba(30, 26, 60, .35); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); transition: opacity .6s var(--ease); cursor: pointer; }
.shortbox:not(.is-empty) .sb-empty { opacity: 0; pointer-events: none; }
.sb-empty .ring { width: 22cqw; height: 22cqw; margin: 0 auto 6px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 0 0 .5px rgba(255, 255, 255, .4); animation: breathe 2.6s ease-in-out infinite; }
.sb-empty .ring svg { width: 9cqw; height: 9cqw; }
.sb-empty b { font: 650 6cqw/1.1 var(--sf); letter-spacing: -.03em; }
.sb-empty span { font: 450 3.8cqw/1.4 var(--sf); opacity: .8; }
.sb-empty.is-over .ring { transform: scale(1.15); background: rgba(240, 95, 166, .5); }
@keyframes breathe { 50% { transform: scale(1.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 0 10px rgba(255, 255, 255, .08); } }

/* ---------- loading screen (boot + the run) ---------- */
.boot { position: fixed; inset: 0; z-index: 100; overflow: hidden; cursor: pointer; display: grid; place-content: center; justify-items: center; text-align: center; color: #fff; }
.boot .mesh { position: absolute; z-index: 0; }
.boot .light { position: absolute; z-index: 1; }
.boot > :not(.mesh):not(.light) { position: relative; z-index: 2; }
.boot__name { font-size: clamp(110px, 15vw, 250px); animation: slamin 1s .15s var(--spring) both; }
.boot__line { margin-top: 26px; font: 650 clamp(22px, 2.2vw, 32px)/1.2 var(--sf); letter-spacing: -.035em; color: #15142a; animation: fadeUp .8s .7s var(--ease) both; }
.boot__tip { position: fixed !important; left: 50%; bottom: 7vh; width: min(560px, 86vw); font: 500 15px/1.5 var(--sf); color: #15142a; animation: tipUp .7s 1s var(--ease) both; transform: translateX(-50%); }
.boot__tip b { font-weight: 700; }
.boot__load { position: fixed !important; right: 4vw; bottom: 7vh; display: flex; align-items: center; gap: 12px; font: 600 15px/1 var(--sf); color: #15142a; }
.boot__load .spin { width: 18px; height: 18px; }
.boot__stars { position: fixed !important; right: 4vw; top: 6vh; }
.boot__stars svg { width: 30px; height: 30px; }
.boot__skip { position: fixed !important; right: 4vw; top: 6vh; font: 500 13px/1 var(--sf); color: rgba(21, 20, 42, .55); }
.boot--make .boot__skip { display: none; }
.boot.is-out { animation: bootOut 1s var(--soft) forwards; pointer-events: none; }
@keyframes bootOut { 0% { opacity: 1; filter: none; transform: none; } 100% { opacity: 0; filter: blur(16px); transform: scale(1.06); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } }
@keyframes tipUp { from { opacity: 0; transform: translate(-50%, 14px); } }

/* ---------- runs (the cash counter) ---------- */
.runs { position: relative; display: inline-flex; flex-direction: column; align-items: flex-end; }
.runs__total { font-size: 50px; display: flex; align-items: baseline; gap: .14em; color: var(--cash); -webkit-text-stroke: .06em #15142a; paint-order: stroke fill; font-family: var(--pd); line-height: .9; }
.runs__total .u { font: 600 13px/1 var(--sf); -webkit-text-stroke: 0; color: var(--fg); letter-spacing: 0; }
.pops { position: absolute; top: 100%; right: 0; display: flex; flex-direction: column; align-items: flex-end; pointer-events: none; }
.pops .pop { font-family: var(--pd); font-size: 32px; line-height: .95; white-space: nowrap; -webkit-text-stroke: .07em #15142a; paint-order: stroke fill; animation: popLine 2.4s var(--ease) forwards; }
.pops .pop--plus { color: var(--cash); } .pops .pop--minus { color: #ff6b6b; } .pops .pop--white { color: #fff; }
@keyframes popLine { 0% { opacity: 0; transform: translateY(-10px) scale(1.25); } 10% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(6px); } }

/* ---------- objective (mission text) ---------- */
.objective { width: max-content !important; max-width: min(720px, 86vw); padding: 11px 20px; border-radius: 999px; font: 550 17px/1.35 var(--sf); color: #fff; text-align: center; letter-spacing: -.01em;
  background: rgba(21, 20, 42, .52); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .2), 0 14px 34px -16px rgba(21, 20, 42, .5); }
.objective:empty { display: none; }
.objective b { color: #ffe066; font-weight: 650; }
.objective em { color: #9fd0ff; font-style: normal; font-weight: 650; }
.objective.swap { animation: objIn .5s var(--ease); }
@keyframes objIn { from { opacity: 0; transform: translateY(6px); filter: blur(4px); } }

/* ---------- take bar: hop between the three directions ---------- */
.takebar { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 70; display: flex; gap: 2px; padding: 4px; border-radius: 999px;
  background: rgba(255, 255, 255, .3); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 0 0 .5px rgba(255, 255, 255, .5), 0 10px 30px -14px rgba(40, 36, 110, .35); }
.takebar a { font: 550 12px/1 var(--sf); color: rgba(21, 20, 42, .65); padding: 7px 12px; border-radius: 999px; white-space: nowrap; }
.takebar a.on { background: #15142a; color: #fff; }

/* ---------- switching cuts: the character-switch pull-out ---------- */
.swfx { position: fixed; inset: 0; z-index: 85; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, .85) 100%); }
body.is-switching .swfx { animation: swFlash 1s var(--soft); }
body.is-switching .zoomable { animation: pullOut 1s var(--soft); }
@keyframes swFlash { 0% { opacity: 0; } 40%, 55% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pullOut { 0% { transform: none; filter: none; } 42%, 52% { transform: scale(.8) translateY(-5%); filter: blur(10px) saturate(.6) brightness(1.2); } 100% { transform: none; filter: none; } }

/* ---------- weapon wheel = jobs (glass, as on the landing) ---------- */
.wheel { --wsz: 520px; position: relative; width: var(--wsz); aspect-ratio: 1; user-select: none; }
.wheel > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wheel__seg { fill: rgba(255, 255, 255, .12); stroke: rgba(255, 255, 255, .45); stroke-width: 1.2; transition: fill .25s var(--ease); }
.ww-slot { cursor: pointer; transform-box: view-box; transform-origin: 50% 50%; transition: transform .4s var(--spring); outline: none; }
.ww-slot.is-aim .wheel__seg { fill: rgba(255, 255, 255, .26); }
.ww-slot.is-aim { transform: scale(1.03); }
.ww-slot.is-on .wheel__seg { fill: rgba(255, 255, 255, .9); }
.ww-ic { color: #fff; stroke: #fff; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .25s; }
.ww-slot.is-on .ww-ic { stroke: #15142a; }
.wheel__ammo { font: 600 12.5px/1 var(--sf); letter-spacing: .1em; fill: rgba(255, 255, 255, .85); text-anchor: middle; transition: fill .25s; }
.ww-slot.is-on .wheel__ammo { fill: rgba(21, 20, 42, .62); }
.ww-slot.is-locked { opacity: .45; }
.ww-slot.is-locked.is-aim { opacity: .7; }
.wheel__arc { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; opacity: 0; transition: opacity .25s; }
.ww-slot.is-on .wheel__arc { opacity: 1; }
.ww-slot.shake { animation: shake .45s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.wheel.is-open .ww-slot { animation: slotIn .7s var(--spring) both; animation-delay: calc(var(--i) * 35ms); }
@keyframes slotIn { from { opacity: 0; transform: scale(.55) rotate(-25deg); } }
.wheel__hub { position: absolute; inset: 26%; border-radius: 50%; display: grid; place-items: center; text-align: center; color: #fff; padding: 7%; pointer-events: none;
  background: linear-gradient(160deg, rgba(64, 60, 96, .55), rgba(40, 38, 70, .42)); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 0 0 .5px rgba(255, 255, 255, .25), 0 20px 50px -20px rgba(30, 24, 70, .5); }
.wheel__name { font: 650 clamp(17px, 2vw, 25px)/1.08 var(--sf); letter-spacing: -.03em; }
.wheel__desc { font: 450 13px/1.4 var(--sf); opacity: .78; max-width: 15em; margin: .45em auto 0; }
.ww-count { margin-top: 10px; font: 600 12px/1 var(--sf); opacity: .6; }
.ww-tag { display: inline-block; margin-bottom: 8px; padding: 4px 9px; border-radius: 999px; background: rgba(255, 255, 255, .18); font: 600 11px/1 var(--sf); }
.ww-tag.soon { background: rgba(0, 0, 0, .25); color: rgba(255, 255, 255, .75); }

/* ---------- switch wheel = the cuts of one run ---------- */
.switch { position: relative; aspect-ratio: 1; user-select: none; }
.switch > svg { width: 100%; height: 100%; overflow: visible; }
.switch__wedge { cursor: pointer; transform-box: view-box; transform-origin: 50% 50%; transition: transform .45s var(--spring); outline: none; }
.switch__wedge:hover, .switch__wedge:focus-visible { transform: scale(1.03); }
.switch__shade { fill: rgba(21, 20, 42, .28); transition: fill .3s; }
.switch__wedge:hover .switch__shade { fill: rgba(21, 20, 42, .1); }
.switch__wedge.is-on .switch__shade { fill: rgba(21, 20, 42, 0); }
.switch__rim { fill: none; stroke-width: 9; opacity: .5; transition: opacity .3s, stroke-width .35s var(--spring); }
.switch__wedge.is-on .switch__rim { opacity: 1; stroke-width: 14; }
.sw-letter { font-family: var(--pd); font-size: 64px; fill: #fff; stroke: #15142a; stroke-width: 7px; paint-order: stroke; text-anchor: middle; }
.sw-open { font: 600 13px/1 var(--sf); fill: #fff; text-anchor: middle; paint-order: stroke; stroke: rgba(21, 20, 42, .45); stroke-width: 4px; }
.switch.is-open .switch__wedge { animation: wedgeIn .8s var(--spring) both; animation-delay: calc(var(--i) * 90ms); }
@keyframes wedgeIn { from { opacity: 0; transform: scale(.4) rotate(40deg); } }
.sw-hub { fill: rgba(255, 255, 255, .88); stroke: rgba(255, 255, 255, .9); }
.sw-hubt { font: 650 13px/1 var(--sf); fill: #15142a; text-anchor: middle; }

/* ---------- minimap (the landing's: mint ground, white roads, pink route) ---------- */
.mm { position: relative; width: 280px; }
.mm__frame { position: relative; height: 170px; border-radius: 28px; overflow: hidden; background: #cfeee2;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .7), 0 24px 50px -22px rgba(40, 36, 110, .45); }
.mm__frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .45); background: linear-gradient(160deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 40%); }
.mm--round .mm__frame { width: 210px; height: 210px; border-radius: 50%; }
.mm__map { position: absolute; inset: 0; width: 100%; height: 100%; }
.mm__dist { position: absolute; left: 16px; top: 13px; z-index: 2; font: 600 13px/1 var(--sf); color: rgba(21, 20, 42, .75); }
.mm__next { position: absolute; right: 16px; top: 13px; z-index: 2; font: 600 12px/1 var(--sf); color: rgba(21, 20, 42, .55); }
.mm--round .mm__dist { left: 50%; top: 24px; transform: translateX(-50%); }
.mm--round .mm__next { display: none; }
.mm__n { display: none; }
.mm__bars { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 5px; margin-top: 8px; }
.mm--round .mm__bars { width: 210px; }
.mm__bars span { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .45); overflow: hidden; }
.mm__bars span::before { content: ""; display: block; height: 100%; width: var(--f, 100%); background: var(--c); transition: width .8s var(--ease); }
.mm__steps { display: flex; gap: 3px; margin-top: 9px; }
.mm__steps button { font: 550 12px/1 var(--sf); padding: 8px 10px; border-radius: 999px; color: rgba(21, 20, 42, .7); background: rgba(255, 255, 255, .35);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .6); }
.mm__steps button.on { background: #15142a; color: #fff; }
.mm__steps button[disabled] { opacity: .45; cursor: default; }
.mm-route { fill: none; stroke: var(--route); stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.mm-route-under { fill: none; stroke: #fff; stroke-width: 17; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
.mm-blip circle { fill: #fff; stroke: rgba(21, 20, 42, .12); stroke-width: 2; }
.mm-blip .ic { stroke: #15142a; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mm-blip { cursor: pointer; }
.mm-blip.is-done { opacity: .5; }
.mm-blip.is-next circle { fill: var(--route); stroke: #fff; stroke-width: 4; }
.mm-blip.is-next .ic { stroke: #fff; }
.mm-blip.is-cur { opacity: 0; }
.mm-pulse { fill: none; stroke: var(--route); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: pulse 1.6s ease-out infinite; }
@keyframes pulse { from { transform: scale(.6); opacity: .9; } to { transform: scale(2.2); opacity: 0; } }
.mm-player circle { fill: #15142a; stroke: #fff; stroke-width: 4; }
.mm-player path { fill: #fff; }

/* ---------- mission passed ---------- */
.passed { position: fixed; inset: 0; z-index: 95; display: grid; place-content: center; justify-items: center; text-align: center; pointer-events: none; opacity: 0; transition: opacity .35s; }
.passed::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21, 20, 42, 0), rgba(21, 20, 42, .5) 38%, rgba(21, 20, 42, .5) 62%, rgba(21, 20, 42, 0)); }
.passed.is-on { opacity: 1; pointer-events: auto; }
.passed > * { position: relative; }
.passed .pd--gold { font-size: clamp(60px, 10vw, 156px); -webkit-text-stroke-color: #15142a; }
.passed .pd--out { font-size: clamp(36px, 5vw, 80px); margin-top: .15em; -webkit-text-stroke-color: #15142a; }
.passed__sub { margin-top: 26px; max-width: 30em; font: 550 17px/1.5 var(--sf); color: #fff; }
.passed.is-on .pd--gold { animation: passIn .8s var(--spring) both; }
.passed.is-on .pd--out { animation: passIn .8s .3s var(--spring) both; }
.passed.is-on .passed__sub { animation: fadeUp .6s .7s var(--ease) both; }
@keyframes passIn { from { opacity: 0; transform: scale(1.7); filter: blur(8px); } }

/* ---------- splash word ---------- */
.splash { position: fixed; inset: 0; z-index: 88; display: grid; place-content: center; pointer-events: none; }
.splash .wordmark { font-size: clamp(80px, 11vw, 170px); animation: splash 1.6s var(--spring) forwards; }
@keyframes splash { 0% { opacity: 0; transform: scale(1.6); filter: blur(12px); } 18% { opacity: 1; transform: scale(1); filter: none; } 80% { opacity: 1; transform: scale(1.02); } 100% { opacity: 0; transform: scale(.96); filter: blur(4px); } }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 96; transform: translateX(-50%); padding: 12px 18px; border-radius: 999px; font: 550 14px/1 var(--sf); color: #fff;
  background: rgba(21, 20, 42, .82); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 14px 40px -14px rgba(21, 20, 42, .6); animation: toast 2.4s var(--ease) forwards; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, 16px) scale(.96); } 12%, 82% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 8px); } }

/* ---------- stars (6, the landing's) ---------- */
.stars svg { width: 22px; height: 22px; }
.stars .off { fill: rgba(255, 255, 255, .4); }
.stars.ink .on { fill: #15142a; filter: none; } .stars.ink .off { fill: rgba(21, 20, 42, .14); }
.stars.is-hot .on { animation: hot .6s steps(2) infinite; }
@keyframes hot { 50% { fill: var(--route); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* =====================================================================
   BENTO GLASS (2026-11-04, Jesse: "make it more glassmorphism", visionOS dashboard references)
   One big frosted grey window, the world blurred through it, nested frosted tiles, white text,
   a floating pill dock. Used by the A+B mixes (d, e, f).
   ===================================================================== */
.win { position: relative; border-radius: 42px; color: #fff; --fg: #fff; --fg2: rgba(255, 255, 255, .64); --track: rgba(0, 0, 0, .16); --line: rgba(255, 255, 255, .16);
  background: linear-gradient(155deg, rgba(128, 124, 150, .52), rgba(84, 80, 108, .44) 55%, rgba(104, 100, 128, .48));
  -webkit-backdrop-filter: blur(48px) saturate(1.5) brightness(.92); backdrop-filter: blur(48px) saturate(1.5) brightness(.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .46), inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(255, 255, 255, .08),
              0 50px 100px -40px rgba(20, 16, 50, .55), 0 4px 14px rgba(20, 16, 50, .12); }
.win::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 50%); }
.tile { position: relative; border-radius: 28px; padding: 18px 20px; color: #fff; min-width: 0;
  background: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05) 60%, rgba(255, 255, 255, .09));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), inset 0 0 0 .5px rgba(255, 255, 255, .16), 0 14px 30px -20px rgba(10, 8, 30, .45);
  transition: background .4s var(--ease), box-shadow .4s, transform .45s var(--spring), color .3s; }
.tile.is-lit { background: linear-gradient(160deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .74)); color: #15142a;
  --fg: #15142a; --fg2: rgba(21, 20, 42, .55); --track: rgba(21, 20, 42, .08); --line: rgba(21, 20, 42, .1); }
.tile.is-focus { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 0 0 1.5px rgba(255, 255, 255, .55), 0 18px 40px -18px rgba(10, 8, 30, .55); }
.tile--btn { cursor: pointer; text-align: left; }
.tile--btn:hover { transform: translateY(-2px); }
.tile--btn:active { transform: scale(.98); }
.tile.flash { animation: tileFlash .5s var(--ease); }
@keyframes tileFlash { 30% { background: rgba(255, 255, 255, .55); } }
.t-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.t-lbl { font: 450 13px/1.25 var(--sf); color: var(--fg2); }
.t-ttl { font: 500 17px/1.2 var(--sf); letter-spacing: -.015em; }
.t-val { font: 400 30px/1 var(--sf); letter-spacing: -.025em; margin-top: 10px; white-space: nowrap; }
.t-val small { font-size: 14px; color: var(--fg2); letter-spacing: 0; }
.t-ic { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .28); }
.tile.is-lit .t-ic { background: rgba(21, 20, 42, .07); box-shadow: inset 0 0 0 .5px rgba(21, 20, 42, .1); }
.t-big { font: 500 clamp(30px, 2.6vw, 42px)/1.04 var(--sf); letter-spacing: -.035em; }
.win .toggle.on, .tile .toggle.on { background: #4f8ff7; }
.dock { display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 999px; color: #fff;
  background: linear-gradient(160deg, rgba(160, 158, 178, .52), rgba(112, 110, 132, .42)); -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), inset 0 0 0 1px rgba(255, 255, 255, .12), 0 20px 50px -20px rgba(20, 16, 50, .5); }
.dock button { height: 40px; padding: 0 18px; border-radius: 999px; font: 500 14px/1 var(--sf); color: rgba(255, 255, 255, .74); transition: background .35s var(--ease), color .2s; white-space: nowrap; }
.dock button:hover { color: #fff; }
.dock button.on { background: rgba(255, 255, 255, .24); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38); }
.dock button[aria-disabled="true"] { opacity: .38; cursor: default; }
.dock .sep { width: 1px; height: 22px; background: rgba(255, 255, 255, .22); margin: 0 4px; }
.dock .go { width: 44px; height: 44px; padding: 0; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #15142a; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .45); }
.dock .go:hover { color: #15142a; transform: scale(1.06); }
.dock .key { background: rgba(255, 255, 255, .18); color: #fff; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .4); }
.switch.is-locked .switch__wedge { pointer-events: none; }
.switch.is-locked .switch__shade { fill: rgba(30, 28, 50, .55); }
.switch.is-locked .switch__rim { opacity: .25; }
.wave { display: flex; align-items: center; gap: 3px; height: 54px; }
.wave i { flex: 1; border-radius: 2px; background: rgba(255, 255, 255, .5); }
.tile.is-lit .wave i { background: rgba(21, 20, 42, .25); }
.wave.play { position: relative; }
.wave.play::after { content: ""; position: absolute; top: -4px; bottom: -4px; width: 2px; border-radius: 2px; background: #4f8ff7; left: 0; animation: playhead 6s linear infinite; }
@keyframes playhead { to { left: calc(100% - 2px); } }

/* perf: the painting covers the mesh completely, so don't paint (or blur) the mesh under it; and big frosted
   windows re-blur every frame the world moves, so the world holds still behind them */
body:has(.world) .mesh { display: none; }
body:has(.win.main, .tri, .pause) .world { animation: none; }

/* live engine: a finished cut plays with its layers burned in */
.shortbox.is-baked .short, .shortbox.is-baked .sb-sample, .shortbox.is-baked .sb-mesh { display: none; }
.shortbox.is-baked .sb-video { filter: none; object-fit: contain; background: #000; } /* show the cut exactly as exported */

/* hover a job: its real example plays in the phone, badged so nobody mistakes it for their own clip */
.sb-badge { position: absolute; left: 50%; top: 7%; transform: translateX(-50%); z-index: 8; padding: 6px 12px; border-radius: 999px; white-space: nowrap;
  font: 600 3.4cqw/1 var(--sf); letter-spacing: .02em; color: #15142a; background: rgba(255, 255, 255, .9); box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .5); animation: fadeUp .35s var(--ease); }
.sb-badge[hidden] { display: none; }

/* P2 hover card: follows the cursor around the wheel, like a weapon tooltip */
.excard { position: fixed; left: 0; top: 0; z-index: 60; width: 230px; padding: 10px 10px 14px; border-radius: 28px; pointer-events: none;
  opacity: 0; transition: opacity .25s var(--ease), transform .18s var(--ease); }
.excard.on { opacity: 1; }
.excard__v { position: relative; aspect-ratio: 9 / 16; border-radius: 20px; overflow: hidden; background: #000; }
.excard__v video { width: 100%; height: 100%; object-fit: cover; display: block; }
.excard__tag { display: inline-block; padding: 5px 9px; border-radius: 999px; font: 600 11px/1 var(--sf); letter-spacing: .02em; color: #15142a; background: rgba(255,255,255,.92); }
.excard__v .excard__tag { position: absolute; left: 10px; top: 10px; }
.excard__t { margin: 10px 4px 0; font: 600 14px/1.2 var(--sf); }
.excard__h { margin: 4px 4px 0; font: 500 12px/1.3 var(--sf); opacity: .7; text-transform: uppercase; letter-spacing: .02em; }
/* P3 trio: the cut window plays everything one run of this job makes */
.extrio { position: absolute; inset: 0; z-index: 3; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto 1fr; gap: 10px; align-items: center; padding: 4px;
  opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); }
.extrio.on { opacity: 1; }
.extrio__head { grid-column: 1 / -1; font: 600 13px/1 var(--sf); color: #fff; }
.extrio__c { position: relative; display: grid; gap: 6px; }
.extrio__c video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 16px; background: #000; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 16px 30px -14px rgba(0,0,0,.6); }
.extrio__c b { position: absolute; left: 8px; top: 6px; font-family: var(--pd); font-size: 28px; color: #fff; -webkit-text-stroke: .1em #15142a; paint-order: stroke fill; }
.extrio__c small { font: 500 12px/1.2 var(--sf); color: rgba(255,255,255,.8); text-align: center; }
body.is-trio #switch, body.is-trio .hubmake { opacity: .06; transition: opacity .3s; }
/* the switch between the three previews (live engine only) */
.pvswitch { position: fixed; left: 26px; bottom: 24px; z-index: 6; display: none; align-items: center; gap: 10px; padding: 6px 6px 6px 16px; color: #fff; font: 500 13px/1 var(--sf); }
body.is-live .pvswitch { display: flex; }
.pvswitch .seg button { height: 30px; }