/* ============================================================================ mVC Portfolio OS — shared design system (single source of truth) Used by: play.html (all screens), os-mvc.html, pitchgolf, stress-buster. Component classes are `mvc-`prefixed so they never clash with legacy CSS. Fonts: Heming (display headlines) + Roboto (everything). 5 live palettes. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Anton&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap'); /* DISPLAY VOICE (CEO 2026-07-25, option C): Space Grotesk replaces Heming Variable. Heming's shipped TTF is DEFECTIVE — its weight axis grows the advance width of A/C/R/E without growing the outline (A: 99/1000em right sidebearing vs 30 for T/H/O/Y) and the file carries NO kern/GPOS table, so nothing recovers it: "CA TEGORY", "GENERA TION", "ROA STERY". Unfixable in CSS. It also ships no licence string. Retired. Space Grotesk is upright-only and tops out at 700 — so font-synthesis is OFF below: the browser must never fake a lean or a heavier weight (faux italic IS the sloppy-type failure). */ @font-face{font-family:'Space Grotesk';src:url('../fonts/spacegrotesk-700.woff2') format('woff2');font-weight:600 700;font-style:normal;font-display:swap} @font-face{font-family:'Space Grotesk';src:url('../fonts/spacegrotesk-500.woff2') format('woff2');font-weight:300 500;font-style:normal;font-display:swap} /* NO FAKED TYPE, ANYWHERE. If a face has no italic or no 900, the browser must fall back to what the file really draws rather than shearing/smearing it. Real vendored weights (Inter 400/600/700/900+italic, JetBrains 400/500/700) are unaffected. */ html,body{ font-synthesis:none; -webkit-font-synthesis:none; } :root{ /* type + geometry are constant across every theme — the design LANGUAGE never changes, only the palette + surface does (that's what makes theme-switching real, not cosmetic) */ --mvc-disp:'Space Grotesk','Anton',sans-serif; /* UI/body default = Inter (SST §2), self-hosted by pn-system.css. Roboto stays only as a tail fallback — it is CDN-only, so it must never be first in the chain (silent-fallback law). */ --mvc-f:'Inter','Roboto',-apple-system,system-ui,sans-serif; --mvc-green:#5cc98a; --mvc-amber:#e7bd5c; --mvc-red:#f0716f; --mvc-pill:999px; --mvc-r:24px; /* ── SURFACE TOKENS — these are what a theme must own for the switch to reskin the WHOLE shell, not just an accent. Every .mvc-* component reads these, so one [data-palette] block repaints text, glass, borders, page and shadow together. Default = Neon Onyx (dark). */ --mvc-fg:#f6f8fb; --mvc-fg-70:rgba(255,255,255,.72); --mvc-fg-55:rgba(255,255,255,.56); --mvc-fg-40:rgba(255,255,255,.4); --mvc-fg-30:rgba(255,255,255,.26); --mvc-brd:rgba(255,255,255,.10); --mvc-brd-hi:rgba(255,255,255,.2); --mvc-bg:#07080c; --glass-a:rgba(20,22,30,.42); --glass-b:rgba(10,11,16,.5); --glass-shadow:0 30px 70px rgba(0,0,0,.5); --glass-inset:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.02); --glass-hi:rgba(255,255,255,.62); /* specular strip top-highlight (dark themes) */ --track:rgba(0,0,0,.32); /* pill/tab track */ /* ── ACCENT TOKENS ── */ --p:#ff6a2b; --p2:#ff8a4f; --acc:#ff6a2b; --glow:255,106,43; /* default = ONYX (Bond burnt-orange spine) */ } /* ════════ THE 4 FREE BASE THEMES (Vero, 2026-07-12 — CEO cut from the messy 6+ cosmetics) ════════ 2 dark · 2 light. Burnt-orange is the BRAND SPINE on all four — cosmetic variance lives in the surface temperature + one tasteful secondary accent (never a neon free-for-all). Every value is AA-legible on its own surface. This is the LEGIBILITY FLOOR + the token base every paid pack extends (the pack engine below is untouched — packs plug into this same surface-token contract). */ /* — DARK — ONYX (hero): burnt-orange spine, deep cinematic glass. CEO-approved OPERATOR base. — */ [data-palette="neon-onyx"]{ --mvc-fg:#f6f8fb; --mvc-fg-70:rgba(255,255,255,.72); --mvc-fg-55:rgba(255,255,255,.56); --mvc-fg-40:rgba(255,255,255,.4); --mvc-fg-30:rgba(255,255,255,.26); --mvc-brd:rgba(255,255,255,.10); --mvc-brd-hi:rgba(255,255,255,.2); --mvc-bg:#05060a; --glass-a:rgba(24,27,37,.52); --glass-b:rgba(9,11,17,.62); --glass-shadow:0 26px 60px rgba(0,0,0,.55),0 4px 14px rgba(0,0,0,.4); --glass-inset:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.02); --glass-hi:rgba(255,255,255,.62); --track:rgba(0,0,0,.32); --p:#ff6a2b; --p2:#ff8a4f; --acc:#ff8a4f; --glow:255,106,43; --mvc-disp:'Space Grotesk','Anton',sans-serif; --mvc-f:'Inter',system-ui,sans-serif; } /* — DARK — MIDNIGHT: deep navy-black (ties to the brand ink #0b1c30), orange spine, a cool azure secondary accent as the tasteful cosmetic pop. AZ #5aa0ff on #080d17 ≈ 7:1. — */ [data-palette="midnight"]{ --mvc-fg:#eaf1fb; --mvc-fg-70:rgba(234,241,251,.72); --mvc-fg-55:rgba(234,241,251,.56); --mvc-fg-40:rgba(234,241,251,.4); --mvc-fg-30:rgba(234,241,251,.26); --mvc-brd:rgba(150,180,220,.14); --mvc-brd-hi:rgba(150,180,220,.26); --mvc-bg:#080d17; --glass-a:rgba(20,30,48,.52); --glass-b:rgba(9,14,25,.62); --glass-shadow:0 26px 60px rgba(0,0,0,.55),0 4px 14px rgba(0,0,0,.45); --glass-inset:inset 0 1px 0 rgba(180,205,240,.16),inset 0 0 0 1px rgba(255,255,255,.02); --glass-hi:rgba(200,220,250,.6); --track:rgba(0,0,0,.34); --p:#ff7a3d; --p2:#ff9455; --acc:#5aa0ff; --glow:255,122,61; --mvc-disp:'Space Grotesk','Anton',sans-serif; --mvc-f:'Inter',system-ui,sans-serif; } /* — LIGHT — PLATINUM (hero): warm-porcelain premium light, AA burnt-orange. CEO-approved base. — */ [data-palette="platinum"]{ /* fg-55 deepened .58→.66 so muted labels clear AA 4.5:1 on light glass (Vero 2026-07-16 — was ~4.1:1, exposed once the office/management surfaces actually go light) */ --mvc-fg:#221c16; --mvc-fg-70:rgba(34,28,22,.74); --mvc-fg-55:rgba(34,28,22,.66); --mvc-fg-40:rgba(34,28,22,.42); --mvc-fg-30:rgba(34,28,22,.28); --mvc-brd:rgba(48,38,28,.14); --mvc-brd-hi:rgba(48,38,28,.24); --mvc-bg:#e9e5df; --glass-a:rgba(255,255,255,.82); --glass-b:rgba(252,248,242,.64); --glass-shadow:0 30px 60px -18px rgba(74,52,28,.28),0 8px 22px -10px rgba(74,52,28,.18); --glass-inset:inset 0 1px 0 rgba(255,255,255,.9); --glass-hi:rgba(255,255,255,.92); --track:rgba(48,38,28,.08); --p:#b4380d; --p2:#c8641f; --acc:#b4380d; --glow:180,56,13; /* AA burnt-orange on porcelain */ --d-text-2:rgba(34,28,22,.66); /* legacy consumers (.dn-text small etc.) — unset would fall through; AA-deepened */ --mvc-disp:'Space Grotesk','Anton',sans-serif; --mvc-f:'Inter',system-ui,sans-serif; } /* — LIGHT — PORCELAIN: cool bright bone-white, near-black ink, orange spine, a deep muted teal as the tasteful cosmetic accent (NOT the old neon #2dd4bf). Teal #0f766e on #eef0f2 ≈ 4.3:1 (AA). — */ [data-palette="porcelain"]{ /* fg-55 deepened .56→.66 so muted labels clear AA 4.5:1 on light glass (Vero 2026-07-16) */ --mvc-fg:#1a1c1f; --mvc-fg-70:rgba(26,28,31,.74); --mvc-fg-55:rgba(26,28,31,.66); --mvc-fg-40:rgba(26,28,31,.42); --mvc-fg-30:rgba(26,28,31,.28); --mvc-brd:rgba(26,28,31,.12); --mvc-brd-hi:rgba(26,28,31,.22); --mvc-bg:#eef0f2; --glass-a:rgba(255,255,255,.86); --glass-b:rgba(248,250,252,.66); --glass-shadow:0 1px 2px rgba(20,24,30,.05),0 20px 44px rgba(20,24,30,.09); --glass-inset:inset 0 1px 0 rgba(255,255,255,.95); --glass-hi:rgba(255,255,255,.95); --track:rgba(26,28,31,.07); --p:#b4380d; --p2:#c2410c; --acc:#0f766e; --glow:180,56,13; --d-text-2:rgba(26,28,31,.66); --mvc-disp:'Space Grotesk','Anton',sans-serif; --mvc-f:'Inter',system-ui,sans-serif; } /* ════════ THEME PACKS (SYSTEM_V2 P4 — premium $20 store SKUs) ════════ Full surface token sets so a pack reskins the ENTIRE shell like any theme. Built from the existing palette/glass system (no new assets) + an fx overlay (see .mvc-grain overrides below). Registered in mvc-os.js THEMES (pack:true). */ /* ── ARCADE — a lit-up COIN-OP CABINET in a dark room. Identity: COLD. Near-black cabinet base (blue-black, NOT purple), ELECTRIC-CYAN dominant spine, hot-magenta as a rare secondary only, hard CRT scanlines + tight phosphor bloom. Every gradient stays cold (cyan→bright-cyan). This is a machine, not a sunset — high-contrast, hard-edged, 8-bit energy. (CEO 2026-07-12: must read as a DIFFERENT ERA to synthwave, not a swapped accent.) — */ [data-palette="pack-arcade"]{ --mvc-fg:#e8feff; --mvc-fg-70:rgba(232,254,255,.72); --mvc-fg-55:rgba(232,254,255,.55); --mvc-fg-40:rgba(232,254,255,.4); --mvc-fg-30:rgba(232,254,255,.24); --mvc-brd:rgba(0,229,255,.2); --mvc-brd-hi:rgba(0,229,255,.42); --mvc-bg:#03060c; /* COLD blue-black cabinet (deliberately no purple) */ --glass-a:rgba(6,17,28,.56); --glass-b:rgba(2,7,13,.68); /* cold near-black glass */ --glass-shadow:0 22px 54px rgba(0,0,0,.74),0 0 20px rgba(0,229,255,.24); /* TIGHT hard cyan bloom */ --glass-inset:inset 0 1px 0 rgba(0,229,255,.3),inset 0 0 0 1px rgba(0,229,255,.07); --glass-hi:rgba(120,244,255,.62); --track:rgba(0,0,0,.5); --p:#00e5ff; --p2:#63f7ff; --acc:#ff2d6f; --glow:0,229,255; /* CYAN dominant → cold gradients; magenta is the rare 2nd */ --pn-on-p:#03121a; /* dark ink on the bright-cyan spine */ --mvc-disp:'Anton','Space Grotesk',sans-serif; --mvc-f:'Outfit',system-ui,sans-serif; } /* ── '80s SYNTHWAVE — a MIAMI SUNSET, outrun retrowave. Identity: WARM. Deep-purple night base, a MAGENTA→ORANGE sunset gradient running through every meter/CTA/chart, a cyan horizon perspective grid, soft wide bloom, chrome vibe. Cyan appears ONLY as the horizon accent — the shell is warm, gradient, sunset. This must feel like dusk on the strip, never a cabinet. — */ [data-palette="pack-synthwave"]{ --mvc-fg:#ffe9f4; --mvc-fg-70:rgba(255,233,244,.75); --mvc-fg-55:rgba(255,233,244,.56); --mvc-fg-40:rgba(255,233,244,.4); --mvc-fg-30:rgba(255,233,244,.26); --mvc-brd:rgba(255,120,90,.22); --mvc-brd-hi:rgba(255,90,140,.42); /* warm orange→pink border */ --mvc-bg:#1b0b3e; /* deep PURPLE night */ --glass-a:rgba(60,22,96,.5); --glass-b:rgba(32,12,60,.64); /* warm purple glass */ --glass-shadow:0 34px 90px rgba(24,0,44,.6),0 0 68px rgba(255,77,141,.34); /* WIDE soft magenta bloom */ --glass-inset:inset 0 1px 0 rgba(255,170,100,.3),inset 0 0 0 1px rgba(255,90,150,.08); /* orange top-light */ --glass-hi:rgba(255,180,120,.6); --track:rgba(24,0,44,.42); --p:#ff4d8d; --p2:#ff9d3c; --acc:#22d3ee; --glow:255,77,141; /* MAGENTA→ORANGE sunset gradients; cyan = horizon only */ --pn-on-p:#2a0714; /* dark plum ink on the hot-pink spine */ --mvc-disp:'Outfit','Space Grotesk',sans-serif; --mvc-f:'Outfit',system-ui,sans-serif; } /* ── SIGNATURE MOTIFS (fixed .mvc-grain overlay, dark packs only) — the two eras must be told apart by their background treatment alone: ARCADE = hard CRT scanlines + cyan phosphor top-bloom; SYNTHWAVE = warm sunset sky + a cyan horizon floor-grid. Different motif, not a recolour. ── */ [data-palette="pack-arcade"] .mvc-grain{opacity:1; background: repeating-linear-gradient(0deg,rgba(0,0,0,.5) 0,rgba(0,0,0,.5) 1.5px,transparent 1.5px,transparent 3.5px), /* hard CRT scanlines */ radial-gradient(120% 66% at 50% 0%,rgba(0,229,255,.12),transparent 62%)} /* tight cyan phosphor */ [data-palette="pack-synthwave"] .mvc-grain{opacity:1; background: linear-gradient(180deg,rgba(255,157,60,.2) 0%,rgba(255,77,141,.16) 20%,transparent 46%), /* SUNSET SKY (orange→magenta) */ linear-gradient(0deg,rgba(34,211,238,.16) 0%,transparent 32%), /* cyan horizon glow */ repeating-linear-gradient(90deg,rgba(34,211,238,.09) 0,rgba(34,211,238,.09) 1px,transparent 1px,transparent 44px), /* grid verticals */ repeating-linear-gradient(0deg,rgba(34,211,238,.07) 0,rgba(34,211,238,.07) 1px,transparent 1px,transparent 44px)} /* grid horizontals → floor */ /* ── NOIR — a DETECTIVE'S OFFICE at midnight. Identity: TRUE MONOCHROME — a black-and-white film still. Neutral silver-screen black base (NOT warm gold — that read as "another gold world" next to DECO and got a hard CEO reject 2026-07-13), a SILVER key-light as the spine, steel moonlight chrome. Brass appears NOWHERE in the shell except the single primary CTA (the one warm lamp in a b&w room — see the .pn-btn--primary override below). The signature is angled SILVER venetian-blind light + smoke. This is the ONLY near-monochrome world on the shelf; DECO is the saturated-gold opposite of it. — */ [data-palette="pack-noir"]{ --mvc-fg:#edf0f4; --mvc-fg-70:rgba(237,240,244,.72); --mvc-fg-55:rgba(237,240,244,.55); --mvc-fg-40:rgba(237,240,244,.4); --mvc-fg-30:rgba(237,240,244,.24); --mvc-brd:rgba(186,195,206,.18); --mvc-brd-hi:rgba(186,195,206,.44); /* cool steel hairline */ --mvc-bg:#08090c; /* NEUTRAL-COOL silver-screen black (no warmth) */ --glass-a:rgba(22,25,30,.56); --glass-b:rgba(9,10,13,.72); /* cool charcoal glass */ --glass-shadow:0 28px 62px rgba(0,0,0,.85),0 0 22px rgba(186,195,206,.12); /* HARD chiaroscuro + faint silver rim */ --glass-inset:inset 0 1px 0 rgba(216,223,232,.22),inset 0 0 0 1px rgba(186,195,206,.06); --glass-hi:rgba(216,223,232,.5); --track:rgba(0,0,0,.55); --p:#c2ccd7; --p2:#eef2f7; --acc:#8b96a0; --glow:194,204,215; /* SILVER key-light spine; steel moonlight 2nd — no gold */ --pn-on-p:#12151b; /* dark ink on the silver spine */ --noir-brass:#c99a3a; --noir-brass-hi:#e3bd63; /* the ONE warm gleam — primary CTA only */ --mvc-disp:'Montserrat','Space Grotesk',sans-serif; --mvc-f:'Inter',system-ui,sans-serif; } /* NOIR's single brass gleam — the primary CTA (and the specimen's "WORK THE CASE") is the only warm element in the whole black-and-white shell. Nothing else in noir is allowed to be gold. */ [data-palette="pack-noir"] .pn-btn--primary, .pn-spec[data-palette="pack-noir"] .pn-spec-cta{ background:linear-gradient(180deg,var(--noir-brass-hi),var(--noir-brass));color:#151004; box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 8px 22px -8px rgba(201,154,58,.62); } [data-palette="pack-noir"] .pn-btn--primary:hover{box-shadow:0 1px 0 rgba(255,255,255,.34) inset,0 14px 30px -8px rgba(201,154,58,.75); background:linear-gradient(180deg,var(--noir-brass-hi),var(--noir-brass));color:#151004} /* keep the brass on hover (ink-sweep hover re-pin) */ /* ── DECO — a first-class ART DECO lounge, 1929. Identity: GILDED. Deep EMERALD-black lacquer base (cool green-black, distinct from noir's warm black), GOLD dominant spine, JADE as the deco 2nd, radiating sunbursts + geometric symmetry. The richest, most opulent world of the four. — */ [data-palette="pack-deco"]{ --mvc-fg:#f6eccf; --mvc-fg-70:rgba(246,236,207,.74); --mvc-fg-55:rgba(246,236,207,.56); --mvc-fg-40:rgba(246,236,207,.4); --mvc-fg-30:rgba(246,236,207,.24); --mvc-brd:rgba(212,175,55,.22); --mvc-brd-hi:rgba(212,175,55,.46); /* gold hairline */ --mvc-bg:#07110d; /* deep EMERALD-black lacquer (cool, distinct from noir) */ --glass-a:rgba(13,29,23,.54); --glass-b:rgba(5,15,11,.68); /* emerald-black glass */ --glass-shadow:0 32px 72px rgba(0,0,0,.72),0 0 40px rgba(212,175,55,.2); /* opulent GOLD bloom */ --glass-inset:inset 0 1px 0 rgba(240,214,117,.34),inset 0 0 0 1px rgba(212,175,55,.1); --glass-hi:rgba(240,214,117,.62); --track:rgba(0,0,0,.42); --p:#d4af37; --p2:#f0d675; --acc:#1db98c; --glow:212,175,55; /* GOLD spine; JADE emerald is the deco 2nd */ --pn-on-p:#1a1405; /* dark ink on the gold spine */ --mvc-disp:'Poppins','Space Grotesk',sans-serif; --mvc-f:'Poppins',system-ui,sans-serif; } /* NOIR motif — angled venetian-blind slats (COLD SILVER moonlight, not brass) + a single hard key-light + deep smoke shadow. Monochrome by design — the only warm note in noir is the CTA. */ [data-palette="pack-noir"] .mvc-grain{opacity:1; background: repeating-linear-gradient(-18deg,rgba(208,216,226,.10) 0,rgba(208,216,226,.10) 3px,transparent 3px,transparent 26px), /* VENETIAN BLIND slats (silver shaft) */ radial-gradient(120% 74% at 80% -8%,rgba(208,216,226,.11),transparent 60%), /* single hard key-light (chiaroscuro) */ radial-gradient(140% 120% at 20% 120%,rgba(0,0,0,.55),transparent 46%)} /* deep shadow pooling low-left (smoke) */ /* DECO motif — gold sunburst rays fanning from the crown + a faint jade deco colonnade */ [data-palette="pack-deco"] .mvc-grain{opacity:1; background: repeating-conic-gradient(from 90deg at 50% -2%,rgba(212,175,55,.10) 0deg,rgba(212,175,55,.10) 1.3deg,transparent 1.3deg,transparent 8.5deg), /* GOLD SUNBURST rays from the crown */ linear-gradient(180deg,rgba(212,175,55,.09),transparent 32%), /* gilded sky wash */ repeating-linear-gradient(90deg,rgba(29,185,140,.05) 0,rgba(29,185,140,.05) 1px,transparent 1px,transparent 48px)} /* faint JADE deco colonnade */ /* ── animated shader + depth (canvas #mvc-fx injected by mvc-os.js) ── */ #mvc-fx{position:fixed;inset:0;z-index:0;width:100%;height:100%;pointer-events:none} /* the dark liquid-crystal shader is a DARK-theme device — on a light theme it would paint dark blobs over the light page. mvc-os.js toggles .mvc-light on /; hide the shader there. */ .mvc-light #mvc-fx,.mvc-light .mvc-veil{display:none!important} .mvc-veil{position:fixed;inset:0;z-index:0;pointer-events:none; background:radial-gradient(120% 80% at 50% 30%,transparent,rgba(3,4,7,.5) 62%,rgba(3,4,7,.82)), linear-gradient(180deg,rgba(3,4,7,.35),transparent 20%,transparent 82%,rgba(3,4,7,.55))} .mvc-grain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.03; background-image:radial-gradient(#fff 8%,transparent 9%);background-size:6px 6px} /* ── glass surface (all surface values come from the active theme's tokens) ── */ .mvc-glass{position:relative;background:linear-gradient(160deg,var(--glass-a),var(--glass-b)); backdrop-filter:blur(30px) saturate(160%);-webkit-backdrop-filter:blur(30px) saturate(160%); border:1px solid var(--mvc-brd);border-radius:var(--mvc-r);color:var(--mvc-fg); box-shadow:var(--glass-shadow),var(--glass-inset)} /* ── liquid-glass button ── */ .mvc-gbwrap{position:relative;display:inline-flex;border-radius:var(--mvc-pill)} .mvc-gb{position:relative;isolation:isolate;border:0;cursor:pointer;border-radius:var(--mvc-pill);padding:15px 28px; font:500 15px var(--mvc-f);letter-spacing:-.01em;display:inline-flex;align-items:center;gap:10px;color:#fff; transition:transform .2s cubic-bezier(.2,.7,.3,1); background:linear-gradient(180deg,rgba(var(--glow),.30),rgba(var(--glow),.10)); backdrop-filter:blur(14px) saturate(180%);-webkit-backdrop-filter:blur(14px) saturate(180%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 1.5px 1px rgba(255,255,255,.7), inset 0 -9px 16px rgba(0,0,0,.30),inset 0 9px 16px rgba(var(--glow),.24)} .mvc-gb::before{content:"";position:absolute;left:7%;right:7%;top:2px;height:44%;border-radius:var(--mvc-pill); background:linear-gradient(180deg,var(--glass-hi),rgba(255,255,255,0));pointer-events:none} .mvc-gb::after{content:"";position:absolute;inset:0;border-radius:inherit; background:radial-gradient(120% 95% at 50% 135%,rgba(var(--glow),.75),transparent 62%);mix-blend-mode:screen;opacity:.8;pointer-events:none} .mvc-gb svg,.mvc-gb span{position:relative;z-index:1}.mvc-gb svg{width:16px;height:16px;stroke-width:2.4} .mvc-gbwrap:hover .mvc-gb{transform:translateY(-2px)} .mvc-gbshadow{position:absolute;left:10%;right:10%;bottom:-8px;height:72%;border-radius:var(--mvc-pill); background:rgba(var(--glow),.6);filter:blur(20px);opacity:.5;z-index:-1;transition:.22s} .mvc-gbwrap:hover .mvc-gbshadow{opacity:.72;bottom:-12px} .mvc-gb.ghost{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04)); box-shadow:inset 0 0 0 1px var(--mvc-brd-hi),inset 0 1.5px 1px rgba(255,255,255,.35);color:var(--mvc-fg)} .mvc-gb.ghost::after{opacity:0} /* ── header icon chip ── */ .mvc-hc{width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0; background:linear-gradient(160deg,rgba(var(--glow),.24),rgba(var(--glow),.07));border:1px solid rgba(var(--glow),.3);color:var(--p2); box-shadow:inset 0 1px 0 rgba(255,255,255,.22)} .mvc-hc svg{width:17px;height:17px;stroke-width:1.9} /* ── status pill ── */ .mvc-stp{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--edge,var(--p2)); background:rgba(255,255,255,.05);border:1px solid var(--mvc-brd);padding:5px 11px;border-radius:var(--mvc-pill);white-space:nowrap} .mvc-stp::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--edge,var(--p2))} /* ── sparkline ── */ .mvc-spk{width:100%;height:42px;display:block;overflow:visible} .mvc-spk .area{fill:rgba(var(--glow),.15)} .mvc-spk .line{fill:none;stroke:var(--p2);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round} .mvc-spk.edge .area{fill:var(--edge);opacity:.14}.mvc-spk.edge .line{stroke:var(--edge)} /* ── pill tab group ── */ .mvc-pills{display:inline-flex;gap:2px;padding:4px;background:var(--track);border:1px solid var(--mvc-brd);border-radius:var(--mvc-pill)} .mvc-pills button{border:0;background:transparent;color:var(--mvc-fg-55);font:600 12.5px var(--mvc-f);padding:8px 18px;border-radius:var(--mvc-pill);cursor:pointer;transition:.14s} .mvc-pills button.on{background:var(--p);color:#fff} /* dark themes' --p is BRIGHT orange → white-on-it ≈2.8:1; use near-black ink there (mirrors .mvc-themeseg) */ body:not(.mvc-light) .mvc-pills button.on{color:#160a02} /* ink-sweep: pin the glass button's own hover fill so the global button:hover can't repaint it */ .mvc-gb:hover{background:linear-gradient(180deg,rgba(var(--glow),.34),rgba(var(--glow),.12));color:#fff} .mvc-gb.ghost:hover{background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.06));color:var(--mvc-fg)} .mvc-pills button:hover{background:transparent;color:var(--mvc-fg)} .mvc-pills button.on:hover{background:var(--p);color:#fff} body:not(.mvc-light) .mvc-pills button.on:hover{color:#160a02} .mvc-themeseg button:hover{background:transparent} .mvc-themeseg button.on:hover{color:#fff;background:linear-gradient(180deg,var(--p2),var(--p))} body:not(.mvc-light) .mvc-themeseg button.on:hover{color:#160a02} .mvc-palpuck:hover{background:transparent;color:var(--mvc-fg)} /* ── palette picker ── */ .mvc-pal{display:inline-flex;align-items:center;gap:9px} .mvc-sw{width:18px;height:18px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:.14s;box-shadow:0 0 10px rgba(0,0,0,.4)} .mvc-sw:hover{transform:scale(1.18)}.mvc-sw.on{border-color:#fff} /* floating picker (drop into any legacy page) */ /* QA 2026-07-31 (defect #8): z 9400, was 9999. The floating theme chip outranked the full-screen overlay surfaces (bigmodal/CFO at z 9500) and sat ON their content — covering the Stride Collective billings bar in the Pressure Room. A theme control never outranks a modal: below 9500 every overlay covers it, and it's still on top of the ordinary game surface. */ .mvc-palfloat{position:fixed;top:auto;bottom:16px;right:16px;z-index:9400;display:flex;align-items:center;gap:10px;height:auto;flex-wrap:wrap; max-width:min(94vw,460px);justify-content:flex-end; padding:8px 12px;border-radius:var(--mvc-r);background:linear-gradient(160deg,var(--glass-a),var(--glass-b));border:1px solid var(--mvc-brd);backdrop-filter:blur(18px);color:var(--mvc-fg)} .mvc-palfloat .lbl{font:600 11px var(--mvc-f);color:var(--mvc-fg-55);letter-spacing:.02em} /* the 4-free-theme segmented switch (Vero 2026-07-12): named buttons, each with a secondary-accent swatch; a hairline divider splits the 2 dark from the 2 light. Wraps 2×2 on narrow. */ .mvc-themeseg{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;border-radius:var(--mvc-pill);border:1px solid var(--mvc-brd);background:var(--track)} .mvc-themeseg button{border:0;background:transparent;cursor:pointer;color:var(--mvc-fg-70); font:700 10.5px var(--mono,'JetBrains Mono',ui-monospace,monospace);letter-spacing:.12em;text-transform:uppercase; padding:6px 12px;border-radius:var(--mvc-pill);display:inline-flex;align-items:center;gap:7px;transition:.16s;white-space:nowrap} .mvc-themeseg .mvc-tsw{width:9px;height:9px;border-radius:50%;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),0 0 6px rgba(0,0,0,.35)} .mvc-themesep{width:1px;align-self:stretch;margin:3px 4px;background:var(--mvc-brd-hi);flex-shrink:0} .mvc-themeseg button:hover{color:var(--mvc-fg)} .mvc-themeseg button.on{color:#fff;background:linear-gradient(180deg,var(--p2),var(--p)); box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 4px 12px rgba(var(--glow),.32)} /* dark themes' spine gradient is BRIGHT orange (#ff6a2b) → white-on-it is ~2.5:1 (sub-AA at 10.5px); use near-black ink there for a clean AA sweep (≈5.3:1). Light themes keep white on deep #b4380d (AA). */ body:not(.mvc-light) .mvc-themeseg button.on{color:#160a02;text-shadow:0 1px 0 rgba(255,255,255,.18)} .mvc-palmore{display:inline-flex;align-items:center;gap:7px;padding-left:9px;margin-left:2px;border-left:1px solid var(--mvc-brd)} .mvc-palmore .mvc-sw{width:15px;height:15px} /* THEME PACK dots (P4) — a dashed premium ring marks a paid pack in the picker */ .mvc-sw-pack{outline:1.5px dashed rgba(255,255,255,.6);outline-offset:2px} .mvc-light .mvc-sw-pack{outline-color:rgba(0,0,0,.4)} /* ── COLLAPSED-TO-TAB picker (CEO 2026-07-16) — a quiet puck at every width; the segmented control + pack dots reveal only when .open. Default collapsed each load; expands on tap, collapses on select / outside-click / Escape (wired in mvc-os.js floatPicker). ── */ .mvc-palpuck{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 13px 0 11px;cursor:pointer; border:0;background:transparent;color:var(--mvc-fg);font:700 10.5px var(--mono,'JetBrains Mono',ui-monospace,monospace); letter-spacing:.14em;text-transform:uppercase;border-radius:var(--mvc-pill);transition:color .16s,opacity .16s} .mvc-palpuck .mvc-puck-ico{width:16px;height:16px;opacity:.82;flex:none} .mvc-palpuck .mvc-puck-sw{width:11px;height:11px;border-radius:50%;flex:none;background:var(--acc,var(--p)); box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),0 0 8px rgba(var(--glow),.5)} .mvc-palpuck .mvc-puck-lbl{opacity:.9} .mvc-palpuck:hover .mvc-puck-ico{opacity:1} /* collapsed: container hugs the puck, the control is hidden */ .mvc-palfloat:not(.open){padding:3px;gap:0} .mvc-palfloat:not(.open) .mvc-themeseg, .mvc-palfloat:not(.open) .mvc-palmore{display:none} /* open: reveal control; the puck recedes to a quiet close affordance on the right */ .mvc-palfloat.open{gap:8px} .mvc-palfloat.open .mvc-palpuck{opacity:.55;padding:0 8px} .mvc-palfloat.open .mvc-palpuck .mvc-puck-lbl{display:none} /* ── isometric stacked folders ── */ .mvc-stack{position:relative;width:520px;height:250px;display:grid;grid-template-areas:'stack';place-items:center;flex-shrink:0} .mvc-fold{grid-area:stack;width:352px;height:150px;border-radius:16px;padding:18px 20px;overflow:hidden; transform:skewY(-8deg);transition:transform .55s cubic-bezier(.2,.7,.3,1),filter .55s;color:var(--mvc-fg); background:linear-gradient(160deg,var(--glass-a),var(--glass-b));border:1px solid var(--mvc-brd-hi); backdrop-filter:blur(20px) saturate(150%);box-shadow:var(--glass-shadow),inset 0 1px 0 var(--glass-hi)} .mvc-fold::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--edge,var(--p));z-index:3} .mvc-fold::after{content:"";position:absolute;top:-5%;right:-2px;height:110%;width:62%;z-index:2;pointer-events:none; background:linear-gradient(to left,var(--mvc-bg) 12%,transparent)} .mvc-fold.f1{transform:skewY(-8deg) translate(-72px,-46px);filter:grayscale(1) brightness(.72);z-index:1} .mvc-fold.f2{transform:skewY(-8deg) translate(-4px,-2px);filter:grayscale(1) brightness(.86);z-index:2} .mvc-fold.f3{transform:skewY(-8deg) translate(64px,42px);z-index:3} .mvc-stack:hover .mvc-fold.f1{transform:skewY(-8deg) translate(-72px,-96px);filter:none} .mvc-stack:hover .mvc-fold.f2{transform:skewY(-8deg) translate(-4px,-52px);filter:none} /* ── display type helpers ── */ .mvc-h1{font-family:var(--mvc-disp);font-weight:400;font-size:clamp(42px,6.2vw,76px);line-height:.9;letter-spacing:0;color:var(--mvc-fg);text-wrap:balance} .mvc-num{font-family:var(--mvc-disp);font-weight:400;letter-spacing:0;color:var(--mvc-fg)} .mvc-num .cur{font-family:var(--mvc-f);font-weight:600;font-size:.62em;margin-right:1px} .mvc-trend.up{color:var(--mvc-green)}.mvc-trend.dn{color:var(--mvc-red)}.mvc-trend.fl{color:var(--mvc-fg-40)} /* ── responsive helpers ── */ /* .mvc-stack is a fixed 520×250 box; scale alone leaves the 520px layout width in flow and h-scrolls phones (HANDOFF.md gotcha 4). Negative right/bottom margins shrink the layout box to match the scaled visual so nothing overflows. */ @media (max-width:860px){ .mvc-stack{transform:scale(.8);transform-origin:top left;margin-right:-104px;margin-bottom:-50px} } @media (max-width:600px){ .mvc-stack{transform:scale(.6);transform-origin:top left;margin-right:-208px;margin-bottom:-100px} } @media (max-width:520px){ .mvc-hidephone{display:none!important} }