/*
Theme Name: Manic Manic OS
Theme URI: https://example.com/manic-manic-os
Author: Manic Manic
Description: A chaotic Windows-95-inspired desktop theme for a band website. Draggable windows, taskbar, editable in-site pop-ups, gigs archive, media windows and a punky interactive background.
Version: 3.8.4
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: manic-manic-os
*/

:root {
  --mm-paper: #efd355;
  --mm-pink: #ee57ba;
  --mm-mint: #bef6e5;
  --mm-teal: #008080;
  --mm-silver: #c0c0c0;
  --mm-white: #ffffff;
  --mm-black: #000000;
  --mm-navy: #000080;
  --mm-blue: #1084d0;
  --mm-dark: #121212;
  --mm-shadow: #808080;
  --mm-highlight: #dfdfdf;
  --mm-danger: #ff1f1f;
  --taskbar-h: 43px;
  --font-system: "MS Sans Serif", Tahoma, Geneva, Verdana, sans-serif;
  --font-mono: "Courier New", Courier, monospace;
  --mouse-x: 50vw;
  --mouse-y: 50vh;
  --parallax-x: 0px;
  --parallax-y: 0px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--mm-paper);
  color: var(--mm-black);
  font-family: var(--font-system);
  overflow: hidden;
}
body.admin-bar .mm-desktop { top: 32px; }
body.admin-bar .mm-taskbar { bottom: 0; }
@media (max-width: 782px) { body.admin-bar .mm-desktop { top: 46px; } }
button, input, textarea, select { font: inherit; }
a { color: #0000ee; }

.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  height: 1px; margin: -1px; overflow: hidden; padding: 0;
  position: absolute !important; width: 1px; word-wrap: normal !important;
}

.mm-boot {
  position: fixed; inset: 0; z-index: 999999; background: #050505; color: #f3f3f3;
  display: grid; place-items: center; font-family: var(--font-mono); transition: opacity .35s ease, visibility .35s ease;
}
.mm-boot.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }
.mm-boot__inner { width: min(700px, 84vw); }
.mm-boot__brand { font-size: clamp(30px, 7vw, 82px); font-weight: 800; letter-spacing: -.06em; line-height: .9; }
.mm-boot__line { margin-top: 22px; font-size: 14px; opacity: .85; }
.mm-boot__bar { height: 12px; border: 2px solid #f3f3f3; margin-top: 14px; padding: 2px; }
.mm-boot__bar span { display: block; height: 100%; width: 0%; background: #f3f3f3; animation: mmBoot 1.25s steps(12,end) forwards; }
@keyframes mmBoot { to { width: 100%; } }

.mm-desktop {
  position: fixed; inset: 0 0 var(--taskbar-h) 0; overflow: hidden;
  background: var(--mm-paper);
}
.mm-bg {
  position: absolute; inset: 0; overflow: hidden; z-index: 1;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 20%), var(--mm-paper);
}
.mm-bg__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none;
  mix-blend-mode: screen; opacity: .95;
}
.mm-bg__noise,
.mm-bg__noise::before,
.mm-bg__noise::after {
  position: absolute; inset: 0; content: "";
}
.mm-bg__noise { z-index: 6; pointer-events: none; opacity: .3; }
.mm-bg__noise::before {
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.08) 0 1px, transparent 1px 3px),
    radial-gradient(rgba(0,0,0,.85) 1px, transparent 1.1px);
  background-size: auto, 7px 7px;
  background-position: 0 0, 0 0;
}
.mm-bg__noise::after {
  background:
    linear-gradient(90deg, transparent 0 96%, rgba(0,0,0,.08) 96% 100%),
    radial-gradient(circle at 21% 30%, rgba(0,0,0,.25), transparent 9%),
    radial-gradient(circle at 78% 24%, rgba(0,0,0,.18), transparent 10%),
    radial-gradient(circle at 58% 84%, rgba(0,0,0,.16), transparent 10%);
  background-size: 100% 3px, auto, auto, auto;
  mix-blend-mode: multiply;
}
.mm-bg [data-parallax] {
  transform: translate(calc(var(--parallax-x) * var(--depth-x, 1)), calc(var(--parallax-y) * var(--depth-y, 1)));
  will-change: transform;
}
.mm-bg [data-parallax="0.03"] { --depth-x: .3; --depth-y: .3; }
.mm-bg [data-parallax="0.04"] { --depth-x: .4; --depth-y: .4; }
.mm-bg [data-parallax="0.05"] { --depth-x: .5; --depth-y: .5; }
.mm-bg [data-parallax="0.06"] { --depth-x: .6; --depth-y: .6; }
.mm-bg [data-parallax="0.07"] { --depth-x: .7; --depth-y: .7; }
.mm-bg [data-parallax="0.08"] { --depth-x: .8; --depth-y: .8; }
.mm-bg [data-parallax="0.1"] { --depth-x: 1; --depth-y: 1; }
.mm-bg [data-parallax="0.12"] { --depth-x: 1.2; --depth-y: 1.2; }
.mm-bg [data-parallax="0.13"] { --depth-x: 1.3; --depth-y: 1.3; }
.mm-bg [data-parallax="0.14"] { --depth-x: 1.4; --depth-y: 1.4; }
.mm-bg [data-parallax="0.15"] { --depth-x: 1.5; --depth-y: 1.5; }
.mm-bg [data-parallax="0.18"] { --depth-x: 1.8; --depth-y: 1.8; }

.mm-bg__halftone--full {
  position: absolute; inset: 0; z-index: 1; opacity: .38; mix-blend-mode: multiply;
  background-image: radial-gradient(#000 0.9px, transparent 1px);
  background-size: 6px 6px;
}
.mm-bg__glow {
  position: absolute; z-index: 2; border-radius: 999px; filter: blur(14px);
  background: radial-gradient(circle at center, rgba(190,246,229,.9) 0, rgba(190,246,229,.85) 18%, rgba(190,246,229,.32) 46%, rgba(190,246,229,0) 78%);
  box-shadow: 0 0 80px rgba(190,246,229,.5), 0 0 160px rgba(190,246,229,.15);
}
.mm-bg__glow--left { width: 30vw; height: 18vw; left: 36%; top: 6%; transform: rotate(18deg); }
.mm-bg__glow--right { width: 38vw; height: 50vw; max-height: 80vh; right: 18%; top: 4%; transform: rotate(8deg); }
.mm-bg__shadow {
  position: absolute; z-index: 1; mix-blend-mode: multiply; opacity: .3;
  background: radial-gradient(circle at center, rgba(0,0,0,.45) 0, rgba(0,0,0,.22) 36%, rgba(0,0,0,0) 72%);
}
.mm-bg__shadow--left { width: 16vw; height: 26vw; left: 23%; top: 22%; }
.mm-bg__shadow--right { width: 34vw; height: 52vw; right: -2vw; top: 6%; }
.mm-bg__panel {
  position: absolute; z-index: 1; background: linear-gradient(155deg, rgba(60,60,60,.25), rgba(255,255,255,.02)); mix-blend-mode: multiply;
}
.mm-bg__panel--top { width: 24vw; height: 18vh; right: 18vw; top: -2vh; transform: rotate(-6deg); }
.mm-bg__checker {
  position: absolute; width: 15vw; min-width: 150px; height: 18vw; min-height: 150px; left: 31%; bottom: 12vh; z-index: 2; opacity: .85;
  background: conic-gradient(from 90deg, #111 0 25%, transparent 0 50%, #111 0 75%, transparent 0 100%) 0 0/28px 28px;
}
.mm-bg__swirl {
  position: absolute; width: 36vw; height: 26vh; right: -2vw; bottom: 0; z-index: 2; opacity: .92;
  background: repeating-radial-gradient(circle at 80% 112%, #fff 0 10px, #111 10px 20px);
  clip-path: ellipse(72% 62% at 77% 100%);
}
.mm-bg__ring,
.mm-bg__ring::before,
.mm-bg__ring::after {
  position: absolute; border-radius: 50%;
}
.mm-bg__ring {
  width: 18vw; height: 18vw; right: 2%; top: 30%; z-index: 2; border: 12px solid rgba(0,0,0,.35);
}
.mm-bg__ring::before,
.mm-bg__ring::after {
  content: ""; background: rgba(0,0,0,.35);
}
.mm-bg__ring::before { width: 18px; height: 18px; top: 6%; left: 6%; }
.mm-bg__ring::after { width: 18px; height: 18px; top: 6%; right: 6%; }
.mm-bg__ring--small {
  width: 4.2vw; height: 4.2vw; min-width: 46px; min-height: 46px; border-width: 5px; right: 11%; top: 48%; opacity: .6;
}
.mm-bg__ring--small::before,
.mm-bg__ring--small::after { display: none; }
.mm-bg__pixel-splats {
  position: absolute; inset: 0; z-index: 3; opacity: .68;
  background:
    radial-gradient(circle, rgba(238,87,186,.95) 0 32%, transparent 34%) 49% 28% / 20px 20px no-repeat,
    radial-gradient(circle, rgba(238,87,186,.95) 0 32%, transparent 34%) 51% 30% / 22px 22px no-repeat,
    linear-gradient(rgba(238,87,186,.82), rgba(238,87,186,.82)) 52% 33% / 14px 14px no-repeat,
    linear-gradient(rgba(20,20,20,.9), rgba(20,20,20,.9)) 39% 86% / 12px 12px no-repeat,
    linear-gradient(rgba(20,20,20,.9), rgba(20,20,20,.9)) 78% 8% / 12px 12px no-repeat,
    linear-gradient(rgba(238,87,186,.82), rgba(238,87,186,.82)) 80% 11% / 11px 11px no-repeat;
}
.mm-bg__logo {
  position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); z-index: 5; user-select: none; pointer-events: none;
  display: grid; justify-items: center; gap: 0; text-transform: uppercase;
}
.mm-bg__logo span,
.mm-bg__logo img { display: block; }
.mm-bg__logo span {
  font-size: clamp(120px, 18vw, 270px); line-height: .86; font-weight: 900; letter-spacing: -.08em; color: var(--mm-pink);
  text-shadow: 4px 4px 0 rgba(0,0,0,.06), 0 0 18px rgba(238,87,186,.12);
  filter: drop-shadow(0 5px 0 rgba(0,0,0,.05));
}
.mm-bg__logo img { max-width: min(70vw, 920px); max-height: 70vh; object-fit: contain; filter: drop-shadow(0 6px 0 rgba(0,0,0,.08)); }

.mm-bg-tip {
  position: absolute; z-index: 7; padding: 10px 12px; background: #d2d2d2; color: #111; font-family: var(--font-mono); font-size: clamp(14px, 1.15vw, 18px);
  border: 2px solid; border-color: #fff #000 #000 #fff; box-shadow: 2px 2px 0 rgba(0,0,0,.5); line-height: 1.1;
}
.mm-bg-tip--left { left: 17%; top: 60%; }
.mm-bg-tip--right { right: 2.6%; top: 57%; }
.mm-bg-pointer {
  position: absolute; z-index: 7; width: 26px; height: 34px; filter: drop-shadow(0 0 8px rgba(190,246,229,.85)) drop-shadow(1px 1px 0 rgba(255,255,255,.8));
}
.mm-bg-pointer::before {
  content: ""; display: block; width: 0; height: 0; border-top: 25px solid #fff; border-right: 14px solid transparent; outline: 2px solid #111; outline-offset: -2px; transform: rotate(-18deg);
}
.mm-bg-pointer::after {
  content: ""; position: absolute; inset: -26px; border-radius: 50%; border: 2px solid rgba(190,246,229,.7); opacity: .7;
}
.mm-bg-pointer--left { left: 13.5%; top: 55%; }
.mm-bg-pointer--right { right: 12.2%; top: 49%; }

.mm-icons {
  position: absolute; top: 18px; left: 12px; display: grid; grid-template-columns: repeat(1, 88px);
  grid-auto-rows: 91px; gap: 12px; z-index: 8;
}
.mm-icon {
  border: 1px solid transparent; background: transparent; color: #111; padding: 3px; width: 88px; min-height: 88px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; cursor: default; text-align: center;
}
.mm-icon:hover, .mm-icon:focus-visible { background: rgba(255,255,255,.25); border-color: rgba(0,0,0,.45); outline: 1px dotted #111; }
.mm-icon__img {
  width: 40px; height: 40px; display: grid; place-items: center; font-size: 20px; line-height: 1; color: #111;
  background: #d7d7d7; border: 2px solid; border-color: #fff #000 #000 #fff; box-shadow: 2px 2px 0 rgba(0,0,0,.35); font-family: var(--font-mono); font-weight: 700;
}
.mm-icon__label {
  font-size: 12px; line-height: 1.15; max-width: 82px; overflow-wrap: anywhere; background: rgba(214,214,214,.92); padding: 3px 6px; border: 1px solid rgba(0,0,0,.2);
}

.mm-window {
  position: absolute; width: min(680px, calc(100vw - 28px)); min-width: 270px; min-height: 150px; background: var(--mm-silver);
  border: 2px solid; border-color: #fff #000 #000 #fff; box-shadow: 2px 2px 0 rgba(0,0,0,.65); display: none; z-index: 20;
}
.mm-window.is-open { display: block; }
.mm-window.is-active { z-index: 50; }
.mm-window.is-maximized { inset: 4px 4px 4px 4px !important; width: auto !important; height: auto !important; }
.mm-window__titlebar {
  height: 27px; margin: 2px; padding: 3px 3px 3px 5px; color: #111; background: var(--mm-pink);
  display:flex; align-items:center; gap:6px; font-weight:700; font-size: 13px; user-select:none; cursor: move;
}
.mm-window:not(.is-active) .mm-window__titlebar { background: #9f9f9f; }
.mm-window__title { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mm-window__controls { display:flex; gap:2px; }
.mm-winbtn {
  width: 20px; height: 19px; padding:0; line-height: 14px; border: 2px solid; border-color:#fff #000 #000 #fff;
  background: var(--mm-silver); color:#000; font-weight:900; cursor:pointer; display:grid; place-items:center;
}
.mm-winbtn:active { border-color:#000 #fff #fff #000; padding-top:2px; padding-left:2px; }
.mm-window__menu { margin: 0 2px; padding: 4px 7px; border-bottom: 1px solid #808080; font-size:12px; word-spacing: 12px; }
.mm-window__body {
  margin: 4px; background:#fff; border: 2px solid; border-color:#808080 #fff #fff #808080; min-height: 170px; max-height: min(70vh, 690px); overflow:auto; padding: 14px;
}
.mm-window__status { margin:4px; padding:3px 5px; min-height:22px; border:2px solid; border-color:#808080 #fff #fff #808080; font-size:11px; }
.mm-window__body h1,.mm-window__body h2,.mm-window__body h3 { font-family:var(--font-mono); }
.mm-window__body img { max-width:100%; height:auto; }
.mm-about-hero { font-family: var(--font-mono); }
.mm-about-hero h1 { margin: 0 0 12px; font-size: clamp(34px, 7vw, 74px); letter-spacing:-.08em; line-height:.85; text-transform:uppercase; }
.mm-about-hero p { max-width: 62ch; }
.mm-empty { font-family:var(--font-mono); border:1px dashed #666; padding:16px; background:#f7f7f7; }
.mm-player { background:#c0c0c0; padding:8px; border:2px solid; border-color:#fff #000 #000 #fff; }
.mm-player__display { background:#050505; color:#39ff14; padding:12px; min-height:70px; font-family:var(--font-mono); border:2px inset #888; }
.mm-player__controls { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.mm-button { background:#c0c0c0; color:#000; border:2px solid; border-color:#fff #000 #000 #fff; padding:6px 10px; text-decoration:none; cursor:pointer; display:inline-block; }
.mm-button:active { border-color:#000 #fff #fff #000; transform:translate(1px,1px); }
.mm-button--danger { color:#900; }
.mm-gigs-table { width:100%; border-collapse:collapse; font-family:var(--font-mono); font-size:13px; }
.mm-gigs-table th,.mm-gigs-table td { border-bottom:1px dotted #777; padding:7px 6px; text-align:left; vertical-align:top; }
.mm-gigs-table th { background:#000080; color:#fff; position:sticky; top:-14px; }
.mm-gigs-table tr:hover td { background:#e7e7ff; }
.mm-gig-past { opacity:.55; }
.mm-gig-badge { display:inline-block; border:1px solid #555; background:#eee; padding:1px 5px; font-size:10px; margin-left:5px; }
.mm-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.mm-gallery img { width:100%; aspect-ratio:1; object-fit:cover; border:3px ridge #d0d0d0; }

.mm-popup { position:fixed; width:min(360px, calc(100vw - 24px)); z-index:60000; background:#c0c0c0; border:2px solid; border-color:#fff #000 #000 #fff; box-shadow:2px 2px #000; }
.mm-popup__title { margin:2px; background:var(--mm-pink); color:#111; height:25px; display:flex; align-items:center; padding:3px 4px 3px 6px; font-weight:700; font-size:12px; cursor:move; }
.mm-popup__title span { flex:1; }
.mm-popup__content { padding: 10px; background:#c0c0c0; }
.mm-popup__content--message { display:grid; grid-template-columns:42px 1fr; gap:12px; align-items:start; font-size:13px; }
.mm-popup__icon { font-size:32px; }
.mm-popup__media { margin-bottom: 10px; }
.mm-popup__media img { display:block; width:100%; height:auto; border:2px solid; border-color:#808080 #fff #fff #808080; background:#fff; }
.mm-popup__editor { font-size:13px; line-height:1.4; background:#fff; border:2px solid; border-color:#808080 #fff #fff #808080; padding:10px; }
.mm-popup__editor > *:first-child { margin-top:0; }
.mm-popup__editor > *:last-child { margin-bottom:0; }
.mm-popup__buttons { display:flex; justify-content:center; gap:7px; margin-top:10px; flex-wrap:wrap; }

.mm-ghost-cursor { position:fixed; z-index:999999; pointer-events:none; width:24px; height:32px; left:-50px; top:-50px; transition:left .42s cubic-bezier(.22,.8,.3,1), top .42s cubic-bezier(.22,.8,.3,1), transform .12s; filter:drop-shadow(1px 1px 0 #fff); }
.mm-ghost-cursor::before { content:""; display:block; width:0; height:0; border-top:23px solid #000; border-right:13px solid transparent; transform:rotate(-18deg); }
.mm-ghost-cursor.is-clicking { transform:scale(.8); }
.mm-crash-overlay { position:fixed; inset:0; display:none; z-index:999998; background:#0000aa; color:#fff; padding:7vh 8vw; font-family:var(--font-mono); }
.mm-crash-overlay.is-open { display:block; }
.mm-crash-overlay h2 { background:#aaa; color:#0000aa; display:inline-block; padding:1px 6px; font-size:16px; }
.mm-crash-overlay p { max-width:850px; line-height:1.7; }
.mm-taskbar {
  position: fixed; left:0; right:0; bottom:0; height:var(--taskbar-h); z-index:99990; background:#c0c0c0; border-top:2px solid #fff; display:flex; align-items:center; padding:3px; gap:4px;
}
.mm-start { flex:0 0 auto; height:34px; padding:3px 8px; border:2px solid; border-color:#fff #000 #000 #fff; background:#c0c0c0; font-weight:900; display:flex; gap:6px; align-items:center; cursor:pointer; }
.mm-start:active,.mm-start.is-open { border-color:#000 #fff #fff #000; }
.mm-start-logo { font-size:18px; transform:rotate(-8deg); display:inline-block; }
.mm-task-buttons { flex:1; display:flex; min-width:0; gap:3px; overflow:auto hidden; }
.mm-task-button { max-width:170px; min-width:95px; height:32px; padding:3px 7px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border:2px solid; border-color:#fff #000 #000 #fff; background:#c0c0c0; text-align:left; cursor:pointer; }
.mm-task-button.is-active { border-color:#000 #fff #fff #000; background:#d6d6d6; font-weight:700; }
.mm-clock { flex:0 0 auto; min-width:74px; text-align:center; border:2px solid; border-color:#808080 #fff #fff #808080; padding:7px 5px; font-size:11px; }
.mm-start-menu { position:fixed; left:3px; bottom:var(--taskbar-h); width:250px; display:none; z-index:99991; background:#c0c0c0; border:2px solid; border-color:#fff #000 #000 #fff; box-shadow:2px 2px #000; }
.mm-start-menu.is-open { display:flex; }
.mm-start-menu__rail { width:30px; background:#808080; color:#c0c0c0; writing-mode:vertical-rl; transform:rotate(180deg); padding:8px 5px; font-weight:900; font-size:16px; letter-spacing:1px; }
.mm-start-menu__items { flex:1; padding:4px; }
.mm-start-menu button,.mm-start-menu a { width:100%; border:0; background:transparent; padding:9px 8px; color:#000; text-decoration:none; display:block; text-align:left; cursor:pointer; }
.mm-start-menu button:hover,.mm-start-menu a:hover { background:#000080; color:#fff; }
.mm-site-content-fallback { padding:40px; font-family:var(--font-system); background:#fff; color:#111; min-height:100vh; overflow:auto; }

@media (max-width: 980px) {
  .mm-bg__ring { width: 26vw; height: 26vw; right: 1%; }
  .mm-bg__glow--right { width: 48vw; right: 10%; }
  .mm-bg__checker { left: 28%; }
}
@media (max-width: 760px) {
  body { overflow:hidden; }
  .mm-desktop { overflow:auto; }
  .mm-bg__ring, .mm-bg-tip, .mm-bg-pointer { opacity: .55; }
  .mm-bg__checker { left: 36%; bottom: 16vh; width: 22vw; height: 22vw; }
  .mm-bg__logo { top: 55%; }
  .mm-bg__logo span { font-size: 29vw; }
  .mm-bg__logo img { max-width: 88vw; }
  .mm-icons { grid-template-columns: repeat(3, 80px); top:12px; left:7px; gap:3px; }
  .mm-window { position:fixed !important; left:6px !important; right:6px !important; top:8px !important; bottom:calc(var(--taskbar-h) + 7px) !important; width:auto !important; height:auto !important; max-width:none; }
  .mm-window__body { max-height:calc(100vh - 160px); }
  .mm-window__titlebar { cursor:default; }
  .mm-gallery { grid-template-columns:repeat(2,1fr); }
  .mm-task-button { min-width:58px; max-width:105px; font-size:10px; }
  .mm-clock { min-width:59px; padding-inline:3px; }
  .mm-start { padding-inline:6px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  .mm-ghost-cursor, .mm-bg__canvas { display:none; }
}


/* -------------------------------------------------------
   v1.4 homepage refinements
   ------------------------------------------------------- */

/* Keep the band mark genuinely centered in the usable desktop. */
.mm-bg__logo {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) !important;
  width: min(70vw, 920px);
  max-height: calc(100% - 110px);
  place-items: center;
}
.mm-bg__logo img {
  width: 100%;
  max-width: 100%;
  max-height: min(66vh, 650px);
  object-fit: contain;
}
.mm-bg__logo span {
  font-size: clamp(110px, 17vw, 260px);
}

/* More authentic desktop-icon proportions: artwork floats above a small label. */
.mm-icons {
  top: 24px;
  left: 22px;
  grid-template-columns: 82px;
  grid-auto-rows: 92px;
  gap: 7px;
}
.mm-icon {
  width: 82px;
  min-height: 90px;
  padding: 1px;
  gap: 2px;
}
.mm-icon__img {
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  display: grid;
  place-items: center;
  filter: drop-shadow(1px 1px 0 rgba(0,0,0,.42));
}
.mm-icon__img img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.mm-icon__label {
  display: inline-block;
  width: auto;
  max-width: 82px;
  padding: 2px 5px;
  background: #d0d0d0;
  border: 1px solid rgba(0,0,0,.28);
  color: #111;
  font-size: 12px;
  line-height: 1.05;
  text-shadow: none;
  white-space: normal;
}
.mm-icon:hover .mm-icon__label,
.mm-icon:focus-visible .mm-icon__label {
  background: #000080;
  color: #fff;
}
.mm-icon:hover,
.mm-icon:focus-visible {
  background: transparent;
  border-color: transparent;
  outline: 1px dotted rgba(0,0,0,.8);
}

/* Full-bleed background video. No controls receive pointer input. */
.mm-video-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--mm-paper);
}
.mm-video-bg video,
.mm-video-bg iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1.12);
  filter: grayscale(1) contrast(1.55) brightness(1.02);
  opacity: var(--mm-video-opacity, .42);
}
.mm-video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mm-video-bg iframe {
  width: 100vw;
  height: 56.25vw;
  min-width: 177.78vh;
  min-height: 100vh;
}

/* Mustard wash + true dot-matrix screen sitting over the moving picture. */
.mm-video-bg::before,
.mm-video-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.mm-video-bg::before {
  z-index: 2;
  background: rgba(239,211,85,.46);
  mix-blend-mode: color;
}
.mm-video-bg::after {
  z-index: 3;
  background-image:
    radial-gradient(circle, rgba(15,15,15,.82) 0 1px, transparent 1.25px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 1px, transparent 1px 3px);
  background-size: 6px 6px, auto;
  mix-blend-mode: multiply;
  opacity: .74;
}

/* When video is active, reduce the old synthetic backdrop rather than making
   it move around with the pointer. The collage stays, but much quieter. */
.mm-has-video .mm-bg__canvas {
  display: none;
}
.mm-has-video .mm-bg__glow,
.mm-has-video .mm-bg__shadow,
.mm-has-video .mm-bg__panel {
  opacity: .10;
}
.mm-has-video .mm-bg__halftone--full {
  opacity: .20;
}
.mm-has-video .mm-bg__pixel-splats {
  opacity: .35;
}
.mm-has-video .mm-bg__checker,
.mm-has-video .mm-bg__swirl,
.mm-has-video .mm-bg__ring {
  opacity: .55;
}

/* Put logo safely above the video/filter collage while leaving real pop-ups
   and application windows above it. */
.mm-bg__logo { z-index: 7; }
.mm-icons { z-index: 9; }
.mm-bg-tip,
.mm-bg-pointer { z-index: 8; }

@media (max-width: 760px) {
  .mm-bg__logo {
    top: 50%;
    width: 86vw;
  }
  .mm-bg__logo img {
    max-height: 54vh;
  }
  .mm-icons {
    left: 8px;
    top: 12px;
    grid-template-columns: repeat(3, 76px);
    grid-auto-rows: 86px;
    gap: 2px 6px;
  }
  .mm-icon {
    width: 76px;
  }
  .mm-icon__img {
    width: 46px;
    height: 46px;
  }
  .mm-icon__img img {
    width: 44px;
    height: 44px;
  }
}

/* -------------------------------------------------------
   v1.5 clean video + mouse swirl
   ------------------------------------------------------- */

:root {
  --swirl-live: 0;
  --logo-rotate: 0deg;
  --logo-skew-x: 0deg;
  --logo-skew-y: 0deg;
  --logo-shift-x: 0px;
  --logo-shift-y: 0px;
  --logo-ghost-a-x: 0px;
  --logo-ghost-a-y: 0px;
  --logo-ghost-a-rotate: 0deg;
  --logo-ghost-a-skew-x: 0deg;
  --logo-ghost-a-skew-y: 0deg;
  --logo-ghost-b-x: 0px;
  --logo-ghost-b-y: 0px;
  --logo-ghost-b-rotate: 0deg;
  --logo-ghost-b-skew-x: 0deg;
  --logo-ghost-b-skew-y: 0deg;
}

/* The background is intentionally stripped back: video, matrix, logo. */
.mm-bg__glow,
.mm-bg__shadow,
.mm-bg__panel,
.mm-bg__checker,
.mm-bg__swirl,
.mm-bg__ring,
.mm-bg__pixel-splats,
.mm-bg-tip,
.mm-bg-pointer,
.mm-bg__noise {
  display: none !important;
}

.mm-bg {
  background: var(--mm-paper);
}

/* Local swirl canvas sits above the matrix/video and below the logo. */
.mm-bg__canvas,
.mm-has-video .mm-bg__canvas {
  display: block;
  z-index: 5;
  opacity: 1;
  mix-blend-mode: normal;
}

/* One matrix layer only. Video gets its matrix from ::after; the fallback
   mustard wallpaper uses this div. */
.mm-has-video .mm-bg__halftone--full {
  display: none;
}
.mm-bg__halftone--full {
  z-index: 2;
  opacity: .55;
  background-image: radial-gradient(circle, rgba(10,10,10,.84) 0 1px, transparent 1.3px);
  background-size: 7px 7px;
}

/* As the pointer enters, make a soft hole in the ordinary dot matrix. The
   canvas redraws those dots in twisted positions, creating the swirl. */
.mm-swirl-active .mm-video-bg::after {
  -webkit-mask-image: radial-gradient(circle 285px at var(--mouse-x) var(--mouse-y), transparent 0 58%, rgba(0,0,0,.18) 72%, #000 100%);
  mask-image: radial-gradient(circle 285px at var(--mouse-x) var(--mouse-y), transparent 0 58%, rgba(0,0,0,.18) 72%, #000 100%);
}

/* The logo remains centered; only the artwork within it flexes and glitches. */
.mm-bg__logo {
  z-index: 7;
  display: grid;
  place-items: center;
  overflow: visible;
  isolation: isolate;
}
.mm-bg__logo > * {
  grid-area: 1 / 1;
}
.mm-bg__logo-main,
.mm-bg__logo-ghost {
  width: 100%;
  max-width: 100%;
  max-height: min(66vh, 650px);
  object-fit: contain;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
.mm-bg__logo-main {
  position: relative;
  z-index: 3;
  transform:
    translate(var(--logo-shift-x), var(--logo-shift-y))
    rotate(var(--logo-rotate))
    skew(var(--logo-skew-x), var(--logo-skew-y));
  transition: filter .18s ease;
}
.mm-swirl-active .mm-bg__logo-main {
  filter: drop-shadow(0 6px 0 rgba(0,0,0,.08)) drop-shadow(0 0 12px rgba(238,87,186,.15));
}
.mm-bg__logo-ghost {
  position: relative;
  z-index: 2;
  pointer-events: none;
  opacity: calc(var(--swirl-live) * .38);
  mix-blend-mode: multiply;
}
.mm-bg__logo-ghost--a {
  transform:
    translate(var(--logo-ghost-a-x), var(--logo-ghost-a-y))
    rotate(var(--logo-ghost-a-rotate))
    skew(var(--logo-ghost-a-skew-x), var(--logo-ghost-a-skew-y));
  -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 13px, transparent 13px 25px);
  mask-image: repeating-linear-gradient(to bottom, #000 0 13px, transparent 13px 25px);
}
.mm-bg__logo-ghost--b {
  z-index: 4;
  opacity: calc(var(--swirl-live) * .22);
  transform:
    translate(var(--logo-ghost-b-x), var(--logo-ghost-b-y))
    rotate(var(--logo-ghost-b-rotate))
    skew(var(--logo-ghost-b-skew-x), var(--logo-ghost-b-skew-y));
  -webkit-mask-image: repeating-linear-gradient(to bottom, transparent 0 10px, #000 10px 19px, transparent 19px 31px);
  mask-image: repeating-linear-gradient(to bottom, transparent 0 10px, #000 10px 19px, transparent 19px 31px);
}

/* Slightly soften the raw video so the dot matrix remains the visual language. */
.mm-video-bg video,
.mm-video-bg iframe {
  filter: grayscale(1) contrast(1.5) brightness(1.06);
}
.mm-video-bg::before {
  background: rgba(239,211,85,.50);
}
.mm-video-bg::after {
  background-image:
    radial-gradient(circle, rgba(12,12,12,.88) 0 1px, transparent 1.28px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.035) 0 1px, transparent 1px 3px);
  background-size: 7px 7px, auto;
  opacity: .76;
}

@media (max-width: 760px) {
  .mm-swirl-active .mm-video-bg::after {
    -webkit-mask-image: radial-gradient(circle 180px at var(--mouse-x) var(--mouse-y), transparent 0 58%, rgba(0,0,0,.18) 72%, #000 100%);
    mask-image: radial-gradient(circle 180px at var(--mouse-x) var(--mouse-y), transparent 0 58%, rgba(0,0,0,.18) 72%, #000 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mm-bg__logo-ghost { display: none; }
  .mm-video-bg::after {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
}


/* -------------------------------------------------------
   v1.6 persistent paint field + dot-matrix logo
   ------------------------------------------------------- */

.mm-fluid-filter-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Once JS has built the full-screen fluid dot field, it replaces every static
   halftone layer so there is only one continuous matrix to distort. */
.mm-fluid-ready .mm-bg__halftone--full,
.mm-fluid-ready .mm-video-bg::after {
  opacity: 0 !important;
}

/* The canvas now carries the whole matrix AND the logo dots. */
.mm-fluid-ready .mm-bg__canvas {
  z-index: 6;
  opacity: 1;
  mix-blend-mode: normal;
}

/* Keep the original image available as a no-JS/reduced-motion fallback.
   When its pixel mask has been successfully sampled, the canvas version takes over. */
.mm-bg__logo {
  transition: opacity .18s linear;
}
.mm-logo-dots-ready .mm-bg__logo {
  opacity: 0;
}

/* Old v1.5 ghost slices are deliberately disabled. The logo deformation now
   happens at individual dot level inside the same fluid field as the wallpaper. */
.mm-bg__logo-ghost {
  display: none !important;
}

/* A subtle SVG displacement makes the video itself feel wet/painted as the
   canvas vortices decay. Native MP4 is the most consistent; Chrome also applies
   this to the embedded player in many cases. */
.mm-fluid-ready .mm-video-bg video,
.mm-fluid-ready .mm-video-bg iframe {
  filter:
    url(#mm-fluid-displace)
    grayscale(1)
    contrast(1.5)
    brightness(1.06);
  will-change: filter;
}

/* Make the raw moving picture slightly cleaner because the live canvas creates
   the visible dot matrix now. */
.mm-fluid-ready .mm-video-bg::before {
  background: rgba(239,211,85,.47);
}

/* The paint effect is meant to be a surface, not another decorative object. */
.mm-fluid-ready .mm-bg {
  isolation: isolate;
}

/* Keep application/UI layers crisp above the liquid background. */
.mm-fluid-ready .mm-icons { z-index: 10; }
.mm-fluid-ready .mm-window { z-index: 20; }

@media (prefers-reduced-motion: reduce) {
  .mm-bg__logo {
    opacity: 1 !important;
  }
  .mm-video-bg video,
  .mm-video-bg iframe {
    filter: grayscale(1) contrast(1.5) brightness(1.06) !important;
  }
}


/* -------------------------------------------------------
   v1.7 dense spring grid interaction
   ------------------------------------------------------- */

:root {
  --pull-radius: 120px;
}

/* Boot logo is now the actual Manic Manic mark rebuilt as dots. */
.mm-boot__logo {
  display: block;
  width: min(520px, 58vw);
  height: 170px;
  max-height: 27vh;
  margin: 0 0 22px;
  image-rendering: pixelated;
}

/* Stop the old liquid/twirl system completely. */
.mm-fluid-filter-defs { display:none !important; }
.mm-video-bg video,
.mm-video-bg iframe,
.mm-fluid-ready .mm-video-bg video,
.mm-fluid-ready .mm-video-bg iframe {
  filter: grayscale(1) contrast(1.5) brightness(1.06) !important;
  transform: translate(-50%, -50%) scale(1.12) !important;
}

/* Much denser matrix. */
.mm-bg__halftone--full {
  display:block !important;
  opacity:.72 !important;
  background-image: radial-gradient(circle, rgba(7,7,7,.92) 0 1px, transparent 1.18px) !important;
  background-size: 5px 5px !important;
}
.mm-video-bg::after {
  opacity:.82 !important;
  background-image:
    radial-gradient(circle, rgba(7,7,7,.92) 0 1px, transparent 1.18px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.025) 0 1px, transparent 1px 3px) !important;
  background-size: 5px 5px, auto !important;
}

/* Hide static dots only under the interactive area; the canvas redraws those
   dots in displaced positions, giving the same spring-grid feel as the reference. */
.mm-grid-active .mm-video-bg::after,
.mm-grid-returning .mm-video-bg::after,
.mm-grid-active .mm-bg__halftone--full,
.mm-grid-returning .mm-bg__halftone--full {
  -webkit-mask-image: radial-gradient(circle var(--pull-radius) at var(--mouse-x) var(--mouse-y), transparent 0 83%, rgba(0,0,0,.22) 91%, #000 100%) !important;
  mask-image: radial-gradient(circle var(--pull-radius) at var(--mouse-x) var(--mouse-y), transparent 0 83%, rgba(0,0,0,.22) 91%, #000 100%) !important;
}

/* Canvas only renders the displaced local black dots plus the pink logo dots. */
.mm-bg__canvas,
.mm-has-video .mm-bg__canvas,
.mm-fluid-ready .mm-bg__canvas {
  display:block !important;
  z-index:6 !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
}

/* Once the dot logo has been built, remove the solid source logo entirely. */
.mm-logo-dots-ready .mm-bg__logo { opacity:0 !important; }
.mm-bg__logo-ghost { display:none !important; }

@media (max-width:760px){
  .mm-boot__logo { width:min(420px,82vw); height:135px; }
  .mm-bg__halftone--full { background-size:6px 6px !important; }
  .mm-video-bg::after { background-size:6px 6px,auto !important; }
}

@media (prefers-reduced-motion:reduce){
  .mm-boot__logo { display:none; }
  .mm-boot__brand { display:block; }
  .mm-bg__logo { opacity:1 !important; }
  .mm-bg__canvas { display:none !important; }
  .mm-video-bg::after,
  .mm-bg__halftone--full {
    -webkit-mask-image:none !important;
    mask-image:none !important;
  }
}


/* -------------------------------------------------------
   v1.8 full palette pass
   ------------------------------------------------------- */

:root {
  --mm-cyan: #29b8dd;
  --mm-pink: #ea5db8;
  --mm-paper: #edd256;
  --mm-white: #ffffff;
  --mm-black: #000000;
  --mm-silver: var(--mm-cyan);
  --mm-highlight: var(--mm-white);
  --mm-shadow: var(--mm-black);
  --mm-dark: var(--mm-black);
  --mm-blue: var(--mm-cyan);
  --mm-navy: var(--mm-black);
}

a {
  color: var(--mm-black);
  text-decoration-color: var(--mm-pink);
}
a:hover, a:focus-visible {
  color: var(--mm-pink);
}

body,
.mm-desktop,
.mm-bg,
.mm-video-bg {
  background: var(--mm-paper);
}

.mm-boot {
  background: var(--mm-black);
  color: var(--mm-white);
}
.mm-boot__line {
  color: var(--mm-white);
}
.mm-boot__bar {
  border-color: var(--mm-white);
  background: transparent;
}
.mm-boot__bar span {
  background: var(--mm-cyan);
}

.mm-window,
.mm-popup,
.mm-start-menu,
.mm-taskbar,
.mm-player,
.mm-button,
.mm-start,
.mm-task-button,
.mm-popup__content {
  background: var(--mm-cyan) !important;
  color: var(--mm-black);
  border-color: var(--mm-white) var(--mm-black) var(--mm-black) var(--mm-white) !important;
}

.mm-window__titlebar,
.mm-popup__title {
  background: var(--mm-pink) !important;
  color: var(--mm-black) !important;
}
.mm-window:not(.is-active) .mm-window__titlebar {
  background: var(--mm-paper) !important;
  color: var(--mm-black) !important;
}

.mm-winbtn,
.mm-button,
.mm-start,
.mm-task-button,
.mm-clock,
.mm-start-menu,
.mm-popup,
.mm-popup__media img,
.mm-popup__editor,
.mm-window__body,
.mm-window__status,
.mm-player__display,
.mm-gigs-table th,
.mm-gig-badge,
.mm-gallery img,
.mm-empty {
  border-color: var(--mm-white) var(--mm-black) var(--mm-black) var(--mm-white) !important;
}

.mm-window__menu,
.mm-window__status,
.mm-popup__editor,
.mm-player__controls,
.mm-start-menu__items {
  color: var(--mm-black);
}

.mm-window__menu,
.mm-window__status,
.mm-popup__editor,
.mm-empty,
.mm-gig-badge {
  background: var(--mm-paper) !important;
}
.mm-window__body,
.mm-popup__editor {
  background: var(--mm-white) !important;
  color: var(--mm-black) !important;
}
.mm-popup__media img,
.mm-gallery img {
  background: var(--mm-white) !important;
}

.mm-player__display {
  background: var(--mm-black) !important;
  color: var(--mm-cyan) !important;
}

.mm-button:hover,
.mm-start-menu button:hover,
.mm-start-menu a:hover,
.mm-task-button.is-active,
.mm-start:active,
.mm-start.is-open,
.mm-task-button:active,
.mm-winbtn:active {
  background: var(--mm-pink) !important;
  color: var(--mm-black) !important;
}

.mm-clock {
  background: var(--mm-black) !important;
  color: var(--mm-white) !important;
}
.mm-start-menu__rail {
  background: var(--mm-pink) !important;
  color: var(--mm-black) !important;
}
.mm-start-logo {
  color: var(--mm-paper);
}

.mm-gigs-table th {
  background: var(--mm-pink) !important;
  color: var(--mm-black) !important;
}
.mm-gigs-table tr:hover td {
  background: rgba(41,184,221,.18) !important;
}
.mm-gigs-table td,
.mm-gigs-table th {
  border-bottom-color: var(--mm-black) !important;
}

.mm-crash-overlay {
  background: var(--mm-black) !important;
  color: var(--mm-white) !important;
}
.mm-crash-overlay h2 {
  background: var(--mm-pink) !important;
  color: var(--mm-black) !important;
}

.mm-icon {
  color: var(--mm-black);
}
.mm-icon:hover,
.mm-icon:focus-visible {
  outline-color: var(--mm-black);
}
.mm-icon__label {
  background: var(--mm-cyan) !important;
  color: var(--mm-black) !important;
  border-color: var(--mm-black) !important;
}
.mm-icon:hover .mm-icon__label,
.mm-icon:focus-visible .mm-icon__label {
  background: var(--mm-pink) !important;
  color: var(--mm-black) !important;
}

.mm-ghost-cursor {
  filter: drop-shadow(1px 1px 0 var(--mm-white));
}
.mm-ghost-cursor::before {
  border-top-color: var(--mm-black);
}

input, textarea, select {
  background: var(--mm-white);
  color: var(--mm-black);
  border: 2px solid;
  border-color: var(--mm-white) var(--mm-black) var(--mm-black) var(--mm-white);
}

::selection {
  background: var(--mm-pink);
  color: var(--mm-black);
}


/* -------------------------------------------------------
   v1.9 black taskbar + themed interaction palettes
   ------------------------------------------------------- */

:root {
  --mm-active-color: #ea5db8;
  --mm-active-rgb: 234,93,184;
}

.mm-desktop {
  --mm-active-color: #ea5db8;
  --mm-active-rgb: 234,93,184;
}

/* Active app colour now tints the moving picture beneath the matrix. */
.mm-video-bg::before {
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 34%),
    rgba(var(--mm-active-rgb), .34) !important;
  mix-blend-mode: multiply;
  transition: background .22s ease;
}
.mm-video-bg video,
.mm-video-bg iframe {
  transition: filter .22s ease, opacity .22s ease;
}

/* Keep the whole taskbar black, with bright app buttons floating above it. */
.mm-taskbar {
  background: var(--mm-black) !important;
  border-top: 2px solid var(--mm-cyan) !important;
  box-shadow: 0 -1px 0 var(--mm-pink) inset;
}
.mm-start {
  background: var(--mm-black) !important;
  color: var(--mm-white) !important;
  border-color: var(--mm-cyan) var(--mm-pink) var(--mm-pink) var(--mm-cyan) !important;
}
.mm-start-logo {
  color: var(--mm-pink) !important;
}
.mm-start:active,
.mm-start.is-open {
  background: var(--mm-cyan) !important;
  color: var(--mm-black) !important;
}
.mm-task-button {
  color: var(--mm-black) !important;
  border-color: var(--mm-white) var(--mm-black) var(--mm-black) var(--mm-white) !important;
}
.mm-task-button[data-theme="cyan"] { background: var(--mm-cyan) !important; }
.mm-task-button[data-theme="pink"] { background: var(--mm-pink) !important; }
.mm-task-button[data-theme="mustard"] { background: var(--mm-paper) !important; }
.mm-task-button.is-active {
  box-shadow: inset 0 0 0 2px var(--mm-white), 0 0 0 1px var(--mm-black);
  font-weight: 700;
}
.mm-clock {
  background: var(--mm-black) !important;
  color: var(--mm-white) !important;
  border-color: var(--mm-white) var(--mm-cyan) var(--mm-cyan) var(--mm-white) !important;
}

/* Let each app carry one palette colour when it's active. */
.mm-window[data-theme="cyan"].is-active .mm-window__titlebar,
.mm-popup[data-theme="cyan"] .mm-popup__title,
.mm-start-menu [data-theme="cyan"]:hover,
.mm-start-menu [data-theme="cyan"]:focus-visible {
  background: var(--mm-cyan) !important;
  color: var(--mm-black) !important;
}
.mm-window[data-theme="pink"].is-active .mm-window__titlebar,
.mm-popup[data-theme="pink"] .mm-popup__title,
.mm-start-menu [data-theme="pink"]:hover,
.mm-start-menu [data-theme="pink"]:focus-visible {
  background: var(--mm-pink) !important;
  color: var(--mm-black) !important;
}
.mm-window[data-theme="mustard"].is-active .mm-window__titlebar,
.mm-popup[data-theme="mustard"] .mm-popup__title,
.mm-start-menu [data-theme="mustard"]:hover,
.mm-start-menu [data-theme="mustard"]:focus-visible {
  background: var(--mm-paper) !important;
  color: var(--mm-black) !important;
}

/* Palette-only icon system. */
.mm-icon__img {
  filter: none !important;
}
.mm-icon__label {
  background: var(--mm-cyan) !important;
  color: var(--mm-black) !important;
  border-color: var(--mm-black) !important;
}
.mm-icon[data-theme="pink"] .mm-icon__label { background: var(--mm-pink) !important; }
.mm-icon[data-theme="mustard"] .mm-icon__label { background: var(--mm-paper) !important; }
.mm-icon:hover .mm-icon__label,
.mm-icon:focus-visible .mm-icon__label {
  box-shadow: 0 0 0 2px var(--mm-black);
}

/* Start menu stays within the same palette too. */
.mm-start-menu {
  background: var(--mm-cyan) !important;
}
.mm-start-menu__rail {
  background: var(--mm-black) !important;
  color: var(--mm-pink) !important;
}


/* -------------------------------------------------------
   v2.0 glitch reveal interaction
   ------------------------------------------------------- */

:root {
  --bg-pan-x: 0px;
  --bg-pan-y: 0px;
  --glitch-energy: 0;
}

/* Bring back the static halftone layer and use canvas for trails + dot logo only. */
.mm-reactive-live .mm-bg__canvas,
.mm-has-video.mm-reactive-live .mm-bg__canvas {
  display: block !important;
  opacity: 1 !important;
  z-index: 6;
  mix-blend-mode: normal;
  pointer-events: none;
}
.mm-reactive-live .mm-bg__halftone--full,
.mm-reactive-live .mm-video-bg::after {
  opacity: 1 !important;
}
.mm-reactive-live .mm-bg__logo {
  opacity: 0 !important;
}

/* The background itself now moves subtly and reveals through a glitch lens. */
.mm-reactive-live .mm-video-bg {
  transform: translate(var(--bg-pan-x), var(--bg-pan-y)) scale(1.05);
  transform-origin: center center;
  transition: transform .14s linear;
}
.mm-reactive-live .mm-video-bg::before {
  background:
    radial-gradient(circle 180px at var(--mouse-x) var(--mouse-y), rgba(255,255,255,.10), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 34%),
    rgba(var(--mm-active-rgb), .30) !important;
  mix-blend-mode: multiply;
  transition: background .2s ease;
}
.mm-reactive-live .mm-video-bg::after,
.mm-reactive-live .mm-bg__halftone--full {
  -webkit-mask-image:
    radial-gradient(circle 140px at var(--mouse-x) var(--mouse-y), transparent 0 44%, rgba(0,0,0,.25) 60%, #000 82%),
    linear-gradient(#000,#000);
  mask-image:
    radial-gradient(circle 140px at var(--mouse-x) var(--mouse-y), transparent 0 44%, rgba(0,0,0,.25) 60%, #000 82%),
    linear-gradient(#000,#000);
  -webkit-mask-composite: source-over;
  mask-composite: add;
}
.mm-reactive-active .mm-video-bg::after,
.mm-reactive-active .mm-bg__halftone--full {
  background-size: 8px 8px, auto;
}

/* Make the logo feel glitchier when the mouse is moving. */
.mm-reactive-live .mm-bg__logo-ghost {
  display: block !important;
  opacity: calc(.12 + var(--glitch-energy) * .18) !important;
}
.mm-reactive-live .mm-bg__logo-main {
  filter: drop-shadow(0 0 calc(16px * var(--glitch-energy)) rgba(255,255,255,.22));
}
.mm-reactive-active .mm-bg__logo-ghost--a {
  mix-blend-mode: screen;
}
.mm-reactive-active .mm-bg__logo-ghost--b {
  mix-blend-mode: multiply;
}

/* Make the focus zone feel more alive over the left icon rail too. */
.mm-icons {
  z-index: 12;
}
.mm-reactive-active .mm-icon:hover .mm-icon__img,
.mm-reactive-active .mm-icon:focus-visible .mm-icon__img {
  transform: translateY(-1px) scale(1.02);
}

@media (max-width: 760px) {
  .mm-reactive-live .mm-video-bg::after,
  .mm-reactive-live .mm-bg__halftone--full {
    -webkit-mask-image:
      radial-gradient(circle 110px at var(--mouse-x) var(--mouse-y), transparent 0 40%, rgba(0,0,0,.22) 58%, #000 80%),
      linear-gradient(#000,#000);
    mask-image:
      radial-gradient(circle 110px at var(--mouse-x) var(--mouse-y), transparent 0 40%, rgba(0,0,0,.22) 58%, #000 80%),
      linear-gradient(#000,#000);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mm-reactive-live .mm-bg__logo { opacity: 1 !important; }
  .mm-reactive-live .mm-bg__canvas { display: none !important; }
  .mm-reactive-live .mm-video-bg,
  .mm-reactive-live .mm-video-bg::after,
  .mm-reactive-live .mm-bg__halftone--full {
    transform: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
}


/* -------------------------------------------------------
   v3.0 programs: paint + manic word
   ------------------------------------------------------- */

.mm-paint-app,
.mm-word-app {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}

.mm-paint-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.mm-paint-tool.is-active,
.mm-paint-size.is-active {
  background: var(--mm-pink) !important;
  color: var(--mm-black) !important;
}

.mm-paint-swatches {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.mm-paint-swatch {
  width: 26px;
  height: 26px;
  border: 2px solid;
  border-color: var(--mm-white) var(--mm-black) var(--mm-black) var(--mm-white);
  background: var(--sw);
  cursor: pointer;
}
.mm-paint-swatch.is-active {
  outline: 2px solid var(--mm-black);
  outline-offset: 1px;
}
.mm-paint-stage {
  background: var(--mm-white);
  border: 2px solid;
  border-color: var(--mm-white) var(--mm-black) var(--mm-black) var(--mm-white);
  min-height: 360px;
  height: min(54vh, 520px);
  overflow: hidden;
}
#mm-paint-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  background: #fff;
  image-rendering: pixelated;
}
.mm-paint-tip {
  font-size: 12px;
  color: var(--mm-black);
}

.mm-word-ribbon,
.mm-word-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 6px 10px;
  background: var(--mm-paper);
  border: 2px solid;
  border-color: var(--mm-white) var(--mm-black) var(--mm-black) var(--mm-white);
}
#mm-wordpad {
  width: 100%;
  min-height: 360px;
  flex: 1;
  resize: vertical;
  padding: 14px;
  font: 700 22px/1.45 W95FA, monospace;
  letter-spacing: .04em;
  border: 2px solid;
  border-color: var(--mm-white) var(--mm-black) var(--mm-black) var(--mm-white);
  background: var(--mm-white);
  color: var(--mm-black);
}

@media (max-width: 760px) {
  .mm-paint-stage,
  #mm-wordpad {
    min-height: 260px;
  }
}


/* -------------------------------------------------------
   v3.1 program corrections
   ------------------------------------------------------- */

.mm-paint-tip {
  font-size: 11px;
  opacity: .75;
  letter-spacing: .06em;
}

.mm-word-app {
  padding: 0 !important;
  gap: 0 !important;
}
#mm-wordpad {
  min-height: min(62vh, 520px);
  margin: 0;
  border: 0 !important;
  outline: 0;
  box-shadow: inset 0 0 0 2px var(--mm-black);
  background: var(--mm-white);
  color: var(--mm-black);
  font: 700 24px/1.5 W95FA, "Courier New", monospace;
  letter-spacing: .055em;
  caret-color: var(--mm-pink);
}


/* -------------------------------------------------------
   v3.2 spinning 90s 3D dot-matrix logo
   ------------------------------------------------------- */

:root {
  --bg-pan-x: 0px;
  --bg-pan-y: 0px;
  --glitch-energy: 0;
}

.mm-3d-logo-live .mm-bg__canvas,
.mm-has-video.mm-3d-logo-live .mm-bg__canvas {
  display: block !important;
  opacity: 1 !important;
  z-index: 6;
  mix-blend-mode: normal;
  pointer-events: none;
  filter: drop-shadow(0 0 18px rgba(255,255,255,.08));
}

.mm-3d-logo-live .mm-bg__logo,
.mm-3d-logo-live .mm-bg__logo-main,
.mm-3d-logo-live .mm-bg__logo-ghost {
  opacity: 0 !important;
  display: none !important;
}

.mm-3d-logo-live .mm-bg__halftone--full,
.mm-3d-logo-live .mm-video-bg::after {
  opacity: 1 !important;
}

.mm-3d-logo-live .mm-video-bg {
  transform: translate(var(--bg-pan-x), var(--bg-pan-y)) scale(1.04);
  transform-origin: center center;
  transition: transform .12s linear, filter .18s ease;
}

.mm-3d-logo-live .mm-video-bg::before {
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 35%),
    radial-gradient(circle 180px at var(--mouse-x) var(--mouse-y), rgba(255,255,255,.12), rgba(255,255,255,0) 58%),
    rgba(var(--mm-active-rgb), .30) !important;
  mix-blend-mode: multiply;
  transition: background .18s ease;
}

.mm-3d-logo-live .mm-video-bg::after,
.mm-3d-logo-live .mm-bg__halftone--full {
  background-size: 7px 7px, auto !important;
}

.mm-3d-logo-live.mm-reactive-active .mm-video-bg::after,
.mm-3d-logo-live.mm-reactive-active .mm-bg__halftone--full {
  background-size: 6px 6px, auto !important;
}

@media (prefers-reduced-motion: reduce) {
  .mm-3d-logo-live .mm-bg__logo {
    opacity: 1 !important;
    display: block !important;
  }
  .mm-3d-logo-live .mm-bg__canvas {
    display: none !important;
  }
  .mm-3d-logo-live .mm-video-bg {
    transform: none !important;
  }
}


/* -------------------------------------------------------
   v3.3 trippy paint upgrade
   ------------------------------------------------------- */

.mm-paint-app {
  gap: 10px;
}

.mm-paint-toolbar {
  padding: 2px 0 4px;
}

.mm-paint-tool.is-active,
.mm-paint-size.is-active,
.mm-paint-fx:active {
  background: var(--mm-pink) !important;
  color: var(--mm-black) !important;
}

.mm-paint-fx {
  background: var(--mm-paper) !important;
}

.mm-paint-stage {
  position: relative;
  background:
    radial-gradient(circle at 20% 20%, rgba(41,184,221,.18), transparent 26%),
    radial-gradient(circle at 80% 30%, rgba(234,93,184,.18), transparent 24%),
    radial-gradient(circle at 60% 82%, rgba(237,210,86,.22), transparent 28%),
    #fff !important;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.2);
}

.mm-paint-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.035) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.03) 0 1px, transparent 1px 12px);
  mix-blend-mode: multiply;
}

#mm-paint-canvas {
  position: relative;
  z-index: 1;
}

.mm-paint-tip {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}


/* -------------------------------------------------------
   v3.4 trippy background colour cycling
   ------------------------------------------------------- */

:root {
  --mm-trip-a-rgb: 234,93,184;
  --mm-trip-b-rgb: 41,184,221;
  --mm-trip-c-rgb: 237,210,86;
  --mm-video-hue: 0deg;
  --mm-video-sat: .35;
}

.mm-3d-logo-live .mm-video-bg {
  filter:
    saturate(calc(1.18 + var(--mm-video-sat)))
    hue-rotate(var(--mm-video-hue))
    contrast(1.08)
    brightness(.94);
}

.mm-3d-logo-live .mm-video-bg::before {
  background:
    radial-gradient(circle 260px at 18% 22%, rgba(var(--mm-trip-a-rgb), .26), rgba(var(--mm-trip-a-rgb), 0) 62%),
    radial-gradient(circle 240px at 78% 32%, rgba(var(--mm-trip-b-rgb), .22), rgba(var(--mm-trip-b-rgb), 0) 62%),
    radial-gradient(circle 300px at 52% 84%, rgba(var(--mm-trip-c-rgb), .24), rgba(var(--mm-trip-c-rgb), 0) 68%),
    radial-gradient(circle 180px at var(--mouse-x) var(--mouse-y), rgba(255,255,255,.11), rgba(255,255,255,0) 58%),
    linear-gradient(125deg, rgba(var(--mm-trip-a-rgb), .08), rgba(var(--mm-trip-b-rgb), .10) 40%, rgba(var(--mm-trip-c-rgb), .08));
  mix-blend-mode: screen;
  opacity: .92;
}

.mm-3d-logo-live .mm-video-bg::after,
.mm-3d-logo-live .mm-bg__halftone--full {
  background-image:
    radial-gradient(circle at center, rgba(0,0,0,.08) 0, rgba(0,0,0,0) 70%),
    radial-gradient(circle, rgba(0,0,0,.92) 52%, rgba(0,0,0,0) 58%) !important;
  background-size: auto, 7px 7px !important;
  opacity: .96 !important;
}

.mm-3d-logo-live.mm-reactive-active .mm-video-bg::after,
.mm-3d-logo-live.mm-reactive-active .mm-bg__halftone--full {
  background-size: auto, 6px 6px !important;
}


/* -------------------------------------------------------
   v3.5 paint fullscreen + spinning paint echoes
   ------------------------------------------------------- */

.mm-window[data-window="paint"].is-maximized .mm-paint-stage {
  height: min(68vh, 860px);
  min-height: 460px;
}

.mm-window[data-window="paint"] .mm-window__body {
  overflow: hidden;
}


/* -------------------------------------------------------
   v3.6 black Paint + homepage logo tunnel
   ------------------------------------------------------- */

.mm-window[data-window="paint"] .mm-paint-stage,
.mm-window[data-window="paint"] .mm-paint-stage::before,
#mm-paint-canvas {
  background: #000 !important;
}
.mm-window[data-window="paint"] .mm-paint-stage::before {
  background-image:
    linear-gradient(rgba(41,184,221,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(234,93,184,.055) 1px, transparent 1px) !important;
  background-size: 24px 24px !important;
  mix-blend-mode: screen !important;
}

/* Homepage: video is clean; the logo tunnel replaces the halftone/dot matrix. */
.mm-logo-tunnel-live .mm-bg__halftone--full,
.mm-logo-tunnel-live .mm-video-bg::after {
  display: none !important;
  opacity: 0 !important;
}
.mm-logo-tunnel-live .mm-bg__logo,
.mm-logo-tunnel-live .mm-bg__logo-main,
.mm-logo-tunnel-live .mm-bg__logo-ghost {
  display: none !important;
  opacity: 0 !important;
}
.mm-logo-tunnel-live .mm-bg__canvas,
.mm-has-video.mm-logo-tunnel-live .mm-bg__canvas {
  display: block !important;
  opacity: 1 !important;
  z-index: 6;
  mix-blend-mode: normal;
  filter: drop-shadow(0 0 12px rgba(0,0,0,.22));
}
.mm-logo-tunnel-live .mm-video-bg {
  transform: scale(1.035);
  filter:
    saturate(1.55)
    hue-rotate(var(--mm-video-hue))
    contrast(1.12)
    brightness(.9) !important;
}
.mm-logo-tunnel-live .mm-video-bg::before {
  background:
    radial-gradient(circle 300px at 20% 20%, rgba(var(--mm-trip-a-rgb),.22), transparent 66%),
    radial-gradient(circle 320px at 78% 30%, rgba(var(--mm-trip-b-rgb),.20), transparent 68%),
    radial-gradient(circle 360px at 52% 80%, rgba(var(--mm-trip-c-rgb),.20), transparent 72%),
    linear-gradient(120deg, rgba(var(--mm-trip-a-rgb),.06), rgba(var(--mm-trip-b-rgb),.08), rgba(var(--mm-trip-c-rgb),.06)) !important;
  mix-blend-mode: screen !important;
  opacity: .9 !important;
}


/* -------------------------------------------------------
   v3.6.1 dirtier CRT logo-tunnel background
   ------------------------------------------------------- */
:root {
  --mm-crt-roll: 0%;
  --mm-crt-jitter: 0px;
  --mm-crt-flicker: .95;
  --mm-crt-noise: .08;
}

.mm-logo-tunnel-live .mm-bg__canvas,
.mm-has-video.mm-logo-tunnel-live .mm-bg__canvas {
  filter:
    drop-shadow(0 0 10px rgba(0,0,0,.18))
    drop-shadow(0 0 14px rgba(255,255,255,.05));
}

.mm-logo-tunnel-live .mm-video-bg {
  transform: scale(1.04) translateX(var(--mm-crt-jitter));
  filter:
    saturate(1.68)
    hue-rotate(var(--mm-video-hue))
    contrast(1.18)
    brightness(.84)
    sepia(.14) !important;
}

.mm-logo-tunnel-live .mm-video-bg::before {
  background:
    radial-gradient(circle 320px at 20% 20%, rgba(var(--mm-trip-a-rgb),.24), transparent 66%),
    radial-gradient(circle 360px at 78% 30%, rgba(var(--mm-trip-b-rgb),.22), transparent 68%),
    radial-gradient(circle 390px at 52% 80%, rgba(var(--mm-trip-c-rgb),.22), transparent 72%),
    linear-gradient(120deg, rgba(var(--mm-trip-a-rgb),.08), rgba(var(--mm-trip-b-rgb),.10), rgba(var(--mm-trip-c-rgb),.08)) !important;
  mix-blend-mode: screen !important;
  opacity: .95 !important;
}

.mm-logo-tunnel-live .mm-video-bg::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: var(--mm-crt-flicker) !important;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.06) 0%,
      rgba(255,255,255,0) 5%,
      rgba(0,0,0,.08) 100%),
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.03) 0px,
      rgba(255,255,255,.03) 1px,
      rgba(0,0,0,.14) 1px,
      rgba(0,0,0,.14) 2px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0) 4px),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.015) 0px,
      rgba(255,255,255,.015) 1px,
      rgba(0,0,0,0) 1px,
      rgba(0,0,0,0) 3px),
    radial-gradient(circle at center,
      rgba(255,255,255,0) 0 55%,
      rgba(0,0,0,.16) 100%);
  background-position:
    0 0,
    0 var(--mm-crt-roll),
    0 0,
    0 0;
  mix-blend-mode: multiply !important;
}

.mm-logo-tunnel-live #mm-desktop::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  opacity: calc(var(--mm-crt-noise) + .06);
  background-image:
    radial-gradient(circle at 14% 22%, rgba(255,255,255,.10) 0 1px, transparent 1.2px),
    radial-gradient(circle at 78% 30%, rgba(0,0,0,.14) 0 1px, transparent 1.3px),
    radial-gradient(circle at 50% 70%, rgba(255,255,255,.08) 0 1.2px, transparent 1.4px),
    radial-gradient(circle at 32% 55%, rgba(0,0,0,.10) 0 1.1px, transparent 1.25px);
  background-size: 17px 17px, 23px 23px, 29px 29px, 31px 31px;
  mix-blend-mode: overlay;
}


/* -------------------------------------------------------
   v3.6.2 camera-on-camera background feedback
   ------------------------------------------------------- */
.mm-feedback-stack {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}
.mm-feedback-layer,
.mm-feedback-scene,
.mm-feedback-media {
  position: absolute;
  inset: 0;
}
.mm-feedback-scene {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.10) inset,
    0 0 22px rgba(0,0,0,.12);
  will-change: transform, opacity, filter;
}
.mm-feedback-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.022) 0px,
      rgba(255,255,255,.022) 1px,
      rgba(0,0,0,.12) 1px,
      rgba(0,0,0,.12) 2px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0) 4px),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.06));
  mix-blend-mode: multiply;
  opacity: .8;
}
.mm-feedback-media,
.mm-feedback-media video,
.mm-feedback-media iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mm-feedback-logo {
  position: absolute;
  inset: 0;
  opacity: .95;
}
.mm-feedback-logo .mm-bg__logo-main,
.mm-feedback-logo .mm-bg__logo-ghost {
  opacity: .34 !important;
  mix-blend-mode: screen;
  filter: blur(.2px);
}

/* New homepage background mode: exact recursive background duplication. */
.mm-camera-feedback-live .mm-bg__canvas,
.mm-camera-feedback-live .mm-bg__halftone--full {
  display: none !important;
  opacity: 0 !important;
}
.mm-camera-feedback-live .mm-video-bg {
  z-index: 2;
  transform: scale(1.04) translateX(var(--mm-crt-jitter));
  filter:
    saturate(1.62)
    hue-rotate(var(--mm-video-hue))
    contrast(1.16)
    brightness(.84)
    sepia(.12) !important;
}
.mm-camera-feedback-live .mm-bg__logo {
  z-index: 5;
}
.mm-camera-feedback-live .mm-bg__logo-main,
.mm-camera-feedback-live .mm-bg__logo-ghost {
  opacity: .42;
  filter: drop-shadow(0 0 10px rgba(255,255,255,.08));
}
.mm-camera-feedback-live .mm-video-bg::before {
  background:
    radial-gradient(circle 320px at 20% 20%, rgba(var(--mm-trip-a-rgb),.24), transparent 66%),
    radial-gradient(circle 360px at 78% 30%, rgba(var(--mm-trip-b-rgb),.22), transparent 68%),
    radial-gradient(circle 390px at 52% 80%, rgba(var(--mm-trip-c-rgb),.22), transparent 72%),
    linear-gradient(120deg, rgba(var(--mm-trip-a-rgb),.08), rgba(var(--mm-trip-b-rgb),.10), rgba(var(--mm-trip-c-rgb),.08)) !important;
  mix-blend-mode: screen !important;
  opacity: .95 !important;
}
.mm-camera-feedback-live .mm-video-bg::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: var(--mm-crt-flicker) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 5%, rgba(0,0,0,.08) 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0px, rgba(255,255,255,.03) 1px, rgba(0,0,0,.14) 1px, rgba(0,0,0,.14) 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 4px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.015) 0px, rgba(255,255,255,.015) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 3px),
    radial-gradient(circle at center, rgba(255,255,255,0) 0 55%, rgba(0,0,0,.16) 100%);
  background-position: 0 0, 0 var(--mm-crt-roll), 0 0, 0 0;
  mix-blend-mode: multiply !important;
}
.mm-camera-feedback-live #mm-desktop::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  opacity: calc(var(--mm-crt-noise) + .06);
  background-image:
    radial-gradient(circle at 14% 22%, rgba(255,255,255,.10) 0 1px, transparent 1.2px),
    radial-gradient(circle at 78% 30%, rgba(0,0,0,.14) 0 1px, transparent 1.3px),
    radial-gradient(circle at 50% 70%, rgba(255,255,255,.08) 0 1.2px, transparent 1.4px),
    radial-gradient(circle at 32% 55%, rgba(0,0,0,.10) 0 1.1px, transparent 1.25px);
  background-size: 17px 17px, 23px 23px, 29px 29px, 31px 31px;
  mix-blend-mode: overlay;
}


/* -------------------------------------------------------
   v3.6.3 interactive 3D dot logo + mobile gyro
   ------------------------------------------------------- */

:root {
  --mm-logo-yaw: 0deg;
  --mm-logo-pitch: 0deg;
}

/* Foreground logo is now generated as a 3D point cloud on the canvas.
   The recursive copies retain the original logo so the camera-feedback tunnel
   still reads as a repeated complete scene. */
.mm-camera-feedback-live.mm-interactive-dot-logo #mm-bg-logo {
  opacity: 0 !important;
}

.mm-camera-feedback-live.mm-interactive-dot-logo .mm-bg__canvas,
.mm-has-video.mm-camera-feedback-live.mm-interactive-dot-logo .mm-bg__canvas {
  display: block !important;
  opacity: 1 !important;
  z-index: 6;
  mix-blend-mode: normal;
  pointer-events: none;
  filter:
    drop-shadow(0 0 8px rgba(255,255,255,.04))
    drop-shadow(0 0 15px rgba(var(--mm-active-rgb),.10));
}

.mm-interactive-dot-logo .mm-feedback-logo {
  transform:
    perspective(760px)
    rotateX(var(--mm-logo-pitch))
    rotateY(var(--mm-logo-yaw));
  transform-origin: 50% 50%;
  transition: transform .08s linear;
}

.mm-interactive-dot-logo .mm-feedback-logo .mm-bg__logo-main {
  opacity: .30 !important;
}
.mm-interactive-dot-logo .mm-feedback-logo .mm-bg__logo-ghost--a {
  opacity: .16 !important;
}
.mm-interactive-dot-logo .mm-feedback-logo .mm-bg__logo-ghost--b {
  opacity: .12 !important;
}

/* Slightly stronger glow on phones, where the control point is invisible and
   driven by the device tilt rather than a visible cursor. */
.mm-gyro-live .mm-bg__canvas {
  filter:
    drop-shadow(0 0 10px rgba(255,255,255,.07))
    drop-shadow(0 0 18px rgba(var(--mm-active-rgb),.14)) !important;
}

@media (prefers-reduced-motion: reduce) {
  .mm-camera-feedback-live.mm-interactive-dot-logo #mm-bg-logo {
    opacity: 1 !important;
  }
  .mm-camera-feedback-live.mm-interactive-dot-logo .mm-bg__canvas {
    display: none !important;
  }
}


/* -------------------------------------------------------
   v3.6.4 smoother mobile gyro + stronger background reaction
   ------------------------------------------------------- */

:root {
  --mm-bg-pan-x: 0px;
  --mm-bg-pan-y: 0px;
  --mm-bg-rotate: 0deg;
  --mm-bg-scale: 1.04;
  --mm-wash-x: 50%;
  --mm-wash-y: 50%;
}

.mm-camera-feedback-live .mm-video-bg {
  transform:
    translate3d(var(--mm-bg-pan-x), var(--mm-bg-pan-y), 0)
    rotate(var(--mm-bg-rotate))
    scale(var(--mm-bg-scale)) !important;
  transform-origin: center center;
  transition: transform .12s linear;
  will-change: transform, filter;
}

.mm-camera-feedback-live .mm-feedback-stack {
  transform: translate3d(calc(var(--mm-bg-pan-x) * .35), calc(var(--mm-bg-pan-y) * .35), 0);
  transition: transform .12s linear;
  will-change: transform;
}

.mm-camera-feedback-live .mm-video-bg::before {
  background:
    radial-gradient(circle 220px at var(--mm-wash-x) var(--mm-wash-y), rgba(255,255,255,.12), rgba(255,255,255,0) 62%),
    radial-gradient(circle 320px at 20% 20%, rgba(var(--mm-trip-a-rgb),.24), transparent 66%),
    radial-gradient(circle 360px at 78% 30%, rgba(var(--mm-trip-b-rgb),.22), transparent 68%),
    radial-gradient(circle 390px at 52% 80%, rgba(var(--mm-trip-c-rgb),.22), transparent 72%),
    linear-gradient(120deg, rgba(var(--mm-trip-a-rgb),.08), rgba(var(--mm-trip-b-rgb),.10), rgba(var(--mm-trip-c-rgb),.08)) !important;
}

.mm-gyro-live .mm-video-bg,
.mm-gyro-live .mm-feedback-stack {
  transition: transform .18s cubic-bezier(.22,.61,.36,1);
}

.mm-gyro-live .mm-video-bg::before {
  opacity: 1 !important;
}

.mm-gyro-live .mm-bg__canvas {
  filter:
    drop-shadow(0 0 10px rgba(255,255,255,.08))
    drop-shadow(0 0 20px rgba(var(--mm-active-rgb),.16)) !important;
}


/* -------------------------------------------------------
   v3.6.5 rogue cursor return + layered colour cycling
   ------------------------------------------------------- */

.mm-ghost-cursor {
  display: block !important;
  width: 28px;
  height: 38px;
  opacity: .96;
  left: 18vw;
  top: 22vh;
  transition:
    left .58s cubic-bezier(.22,.8,.3,1),
    top .58s cubic-bezier(.22,.8,.3,1),
    transform .14s ease,
    filter .22s ease;
  filter:
    drop-shadow(0 0 0 var(--mm-black))
    drop-shadow(2px 2px 0 var(--mm-white))
    drop-shadow(-2px -1px 0 rgba(41,184,221,.22))
    drop-shadow(2px 2px 0 rgba(234,93,184,.22));
}
.mm-ghost-cursor::before,
.mm-ghost-cursor::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(8% 0, 79% 51%, 56% 53%, 72% 100%, 49% 100%, 38% 58%, 8% 79%);
}
.mm-ghost-cursor::before {
  background: var(--mm-black);
}
.mm-ghost-cursor::after {
  inset: 2px 3px 4px 2px;
  background: linear-gradient(160deg, var(--mm-cyan) 0%, var(--mm-pink) 58%, var(--mm-mustard) 100%);
}
.mm-ghost-cursor.is-clicking {
  transform: scale(.86) rotate(-4deg);
  filter:
    drop-shadow(0 0 0 var(--mm-black))
    drop-shadow(1px 1px 0 var(--mm-white))
    drop-shadow(0 0 10px rgba(237,210,86,.25));
}

.mm-feedback-scene {
  position: absolute;
}
.mm-feedback-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 22%, rgba(var(--mm-trip-a-rgb), calc(var(--mm-layer-glow, .1) * .9)), rgba(var(--mm-trip-a-rgb), 0) 48%),
    radial-gradient(circle at 82% 38%, rgba(var(--mm-trip-b-rgb), calc(var(--mm-layer-glow, .1) * .75)), rgba(var(--mm-trip-b-rgb), 0) 52%),
    radial-gradient(circle at 58% 82%, rgba(var(--mm-trip-c-rgb), calc(var(--mm-layer-glow, .1) * .8)), rgba(var(--mm-trip-c-rgb), 0) 56%);
  mix-blend-mode: screen;
  opacity: .72;
}

.mm-feedback-logo,
.mm-feedback-media {
  transition: filter .2s linear;
}

@media (pointer: coarse) {
  .mm-ghost-cursor {
    display: none !important;
  }
}


/* -------------------------------------------------------
   v3.6.6 no background dot matrix + independent video colour cycling
   ------------------------------------------------------- */

:root {
  --mm-master-video-hue: 0deg;
  --mm-master-video-sat: 1.48;
  --mm-master-video-bright: .88;
}

/* Remove the dot-matrix / speckled feel from the background itself, while
   keeping the CRT atmosphere. */
.mm-camera-feedback-live #mm-desktop::after {
  background-image: none !important;
  mix-blend-mode: normal;
  opacity: calc(var(--mm-crt-noise) * .35) !important;
}

.mm-camera-feedback-live .mm-bg__canvas {
  background: transparent !important;
}

/* Main background video gets its own slow colour cycle. */
.mm-camera-feedback-live .mm-video-bg video,
.mm-camera-feedback-live .mm-video-bg iframe {
  filter:
    hue-rotate(var(--mm-master-video-hue))
    saturate(var(--mm-master-video-sat))
    brightness(var(--mm-master-video-bright));
}

/* Each recursive video copy now cycles through colour at a different timing. */
.mm-feedback-scene {
  --mm-layer-media-hue: 0deg;
  --mm-layer-media-sat: 1.35;
  --mm-layer-media-bright: .92;
}
.mm-feedback-scene .mm-feedback-media,
.mm-feedback-scene .mm-feedback-media video,
.mm-feedback-scene .mm-feedback-media iframe {
  filter:
    hue-rotate(var(--mm-layer-media-hue))
    saturate(var(--mm-layer-media-sat))
    brightness(var(--mm-layer-media-bright));
}

/* Tone down the coloured dot-glow overlays too, so it's trippy but cleaner. */
.mm-feedback-scene::before {
  opacity: .46;
}


/* -------------------------------------------------------
   v3.6.7 direct video background + full-screen dot field
   ------------------------------------------------------- */
:root {
  --mm-video-hue-dynamic: 0deg;
  --mm-video-sat-dynamic: 1.36;
  --mm-video-bright-dynamic: .9;
}

.mm-dot-video-live .mm-feedback-stack {
  display: none !important;
}

.mm-dot-video-live #mm-desktop::after {
  background-image: none !important;
  opacity: calc(var(--mm-crt-noise) * .28) !important;
}

.mm-dot-video-live #mm-bg-logo {
  opacity: 0 !important;
}

.mm-dot-video-live .mm-bg__canvas,
.mm-has-video.mm-dot-video-live .mm-bg__canvas {
  display: block !important;
  opacity: 1 !important;
  z-index: 6;
  pointer-events: none;
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 10px rgba(255,255,255,.04))
    drop-shadow(0 0 18px rgba(var(--mm-active-rgb),.10));
}

.mm-dot-video-live .mm-video-bg {
  transform:
    translate3d(var(--mm-bg-pan-x), var(--mm-bg-pan-y), 0)
    rotate(var(--mm-bg-rotate))
    scale(var(--mm-bg-scale)) !important;
  transform-origin: center center;
  transition: transform .12s linear;
  will-change: transform, filter;
  filter: none !important;
}

.mm-dot-video-live .mm-video-bg video,
.mm-dot-video-live .mm-video-bg iframe {
  filter:
    hue-rotate(var(--mm-video-hue-dynamic))
    saturate(var(--mm-video-sat-dynamic))
    brightness(var(--mm-video-bright-dynamic));
}

.mm-dot-video-live .mm-video-bg::before {
  background:
    radial-gradient(circle 260px at var(--mm-wash-x) var(--mm-wash-y), rgba(255,255,255,.10), rgba(255,255,255,0) 62%),
    radial-gradient(circle 380px at var(--mm-wash-x) var(--mm-wash-y), rgba(var(--mm-trip-a-rgb),.18), rgba(var(--mm-trip-a-rgb),0) 62%),
    radial-gradient(circle 320px at calc(100% - var(--mm-wash-x)) calc(100% - var(--mm-wash-y)), rgba(var(--mm-trip-b-rgb),.17), rgba(var(--mm-trip-b-rgb),0) 66%),
    radial-gradient(circle 340px at 52% 80%, rgba(var(--mm-trip-c-rgb),.14), rgba(var(--mm-trip-c-rgb),0) 68%),
    linear-gradient(120deg, rgba(var(--mm-trip-a-rgb),.05), rgba(var(--mm-trip-b-rgb),.05), rgba(var(--mm-trip-c-rgb),.05)) !important;
  mix-blend-mode: screen !important;
  opacity: .88 !important;
}

.mm-dot-video-live .mm-video-bg::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: var(--mm-crt-flicker) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 5%, rgba(0,0,0,.06) 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0px, rgba(255,255,255,.025) 1px, rgba(0,0,0,.11) 1px, rgba(0,0,0,.11) 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 4px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0px, rgba(255,255,255,.012) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 3px),
    radial-gradient(circle at center, rgba(255,255,255,0) 0 55%, rgba(0,0,0,.14) 100%);
  background-position: 0 0, 0 var(--mm-crt-roll), 0 0, 0 0;
  mix-blend-mode: multiply !important;
}

.mm-dot-video-live .mm-ghost-cursor { z-index: 40; }

.mm-gyro-live.mm-dot-video-live .mm-video-bg {
  transition: transform .18s cubic-bezier(.22,.61,.36,1);
}

@media (prefers-reduced-motion: reduce) {
  .mm-dot-video-live .mm-bg__canvas {
    display: none !important;
  }
  .mm-dot-video-live #mm-bg-logo {
    opacity: 1 !important;
  }
}


/* -------------------------------------------------------
   v3.6.8 magic-eye reactive field
   ------------------------------------------------------- */
.mm-dot-video-live .mm-bg__canvas,
.mm-has-video.mm-dot-video-live .mm-bg__canvas {
  mix-blend-mode: normal;
  filter:
    drop-shadow(0 0 8px rgba(255,255,255,.03))
    drop-shadow(0 0 14px rgba(var(--mm-active-rgb),.08));
}

.mm-dot-video-live .mm-video-bg::before {
  opacity: .72 !important;
}


/* -------------------------------------------------------
   v3.6.9 paint live feedback tunnel
   ------------------------------------------------------- */
.mm-paint-tool.is-active,
.mm-paint-size.is-active,
.mm-paint-fx.is-active,
.mm-window[data-window="paint"].is-feedback-live .mm-paint-fx[data-paint-fx="feedback"] {
  background: var(--mm-pink) !important;
  color: var(--mm-black) !important;
}


/* -------------------------------------------------------
   v3.6.13 single distant dot cloud
   ------------------------------------------------------- */

/* Kill every legacy matrix layer from earlier experiments. The current
   background gets its dots exclusively from the canvas point cloud. */
.mm-dot-video-live .mm-bg__halftone--full,
.mm-has-video.mm-dot-video-live .mm-bg__halftone--full {
  display: none !important;
  opacity: 0 !important;
  background: none !important;
}

/* Explicitly remove the old radial-dot matrix from the video pseudo layer.
   Keep just restrained CRT scanlines/vignette. */
.mm-dot-video-live .mm-video-bg::after {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,0) 6%, rgba(0,0,0,.055) 100%),
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.018) 0px,
      rgba(255,255,255,.018) 1px,
      rgba(0,0,0,.075) 1px,
      rgba(0,0,0,.075) 2px,
      transparent 2px,
      transparent 4px),
    radial-gradient(circle at center, transparent 0 58%, rgba(0,0,0,.12) 100%) !important;
  background-size: auto, auto, auto !important;
  background-position: 0 0, 0 var(--mm-crt-roll), 0 0 !important;
  opacity: .68 !important;
}

/* Make the canvas feel spatial rather than printed on top of the footage. */
.mm-dot-video-live .mm-bg__canvas,
.mm-has-video.mm-dot-video-live .mm-bg__canvas {
  mix-blend-mode: screen !important;
  filter: none !important;
}


/* -------------------------------------------------------
   v3.6.14 darker background for stronger logo separation
   ------------------------------------------------------- */

.mm-dot-video-live .mm-video-bg {
  background: #151108 !important;
}

.mm-dot-video-live .mm-video-bg video,
.mm-dot-video-live .mm-video-bg iframe {
  opacity: .78;
  filter:
    hue-rotate(var(--mm-video-hue-dynamic))
    saturate(calc(var(--mm-video-sat-dynamic) * .92))
    brightness(calc(var(--mm-video-bright-dynamic) * .64))
    contrast(1.08);
}

.mm-dot-video-live .mm-video-bg::before {
  background:
    radial-gradient(circle 280px at var(--mm-wash-x) var(--mm-wash-y), rgba(255,255,255,.05), rgba(255,255,255,0) 58%),
    radial-gradient(circle 380px at var(--mm-wash-x) var(--mm-wash-y), rgba(var(--mm-trip-a-rgb),.11), rgba(var(--mm-trip-a-rgb),0) 62%),
    radial-gradient(circle 320px at calc(100% - var(--mm-wash-x)) calc(100% - var(--mm-wash-y)), rgba(var(--mm-trip-b-rgb),.10), rgba(var(--mm-trip-b-rgb),0) 64%),
    radial-gradient(circle 420px at 50% 50%, rgba(0,0,0,.18), rgba(0,0,0,0) 52%),
    linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.14)),
    linear-gradient(120deg, rgba(var(--mm-trip-a-rgb),.025), rgba(var(--mm-trip-b-rgb),.025), rgba(var(--mm-trip-c-rgb),.025)) !important;
  mix-blend-mode: normal !important;
  opacity: .96 !important;
}

.mm-dot-video-live .mm-video-bg::after {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,0) 5%, rgba(0,0,0,.12) 100%),
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.012) 0px,
      rgba(255,255,255,.012) 1px,
      rgba(0,0,0,.09) 1px,
      rgba(0,0,0,.09) 2px,
      transparent 2px,
      transparent 4px),
    radial-gradient(circle at center, rgba(255,255,255,0) 0 54%, rgba(0,0,0,.26) 100%) !important;
  opacity: .82 !important;
}

.mm-dot-video-live .mm-bg__canvas,
.mm-has-video.mm-dot-video-live .mm-bg__canvas {
  filter:
    drop-shadow(0 0 8px rgba(0,0,0,.16))
    drop-shadow(0 0 18px rgba(255,255,255,.035)) !important;
}

/* -------------------------------------------------------
   v3.7 bundled gig media + MANIC BEAT CALC 95
   Preserve the OS palette, beveled chrome and original desktop theme.
   ------------------------------------------------------- */

/* Nine desktop programs, in two compact columns rather than off-screen. */
@media (min-width: 761px) {
  .mm-icons {
    grid-template-columns: repeat(2, 82px);
    grid-template-rows: repeat(5, min(92px, calc((100dvh - 125px) / 5)));
    grid-auto-flow: column;
    grid-auto-rows: auto;
    gap: 4px 7px;
  }
  .mm-icons .mm-icon { min-height: 0; height: 100%; }
}
@media (max-width: 760px) {
  .mm-icons { grid-auto-flow: row; grid-template-columns: repeat(3, 80px); grid-template-rows: none; grid-auto-rows: 87px; gap: 4px; }
}
.mm-media-heading { margin: 16px 0 10px; font-family: var(--font-mono); font-size: 14px; letter-spacing: .03em; }
.mm-media-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-bottom:17px; }
.mm-media-tile {
  min-width:0; padding:5px; border:2px solid; border-color:var(--mm-white) var(--mm-black) var(--mm-black) var(--mm-white);
  cursor:pointer; background:var(--mm-cyan); font:700 11px/1.3 var(--font-mono); color:var(--mm-black);text-align:left;
}
.mm-media-tile:nth-child(3n+2){background:var(--mm-pink)}
.mm-media-tile:nth-child(3n){background:var(--mm-paper)}
.mm-media-tile:focus-visible { outline:3px solid var(--mm-black); outline-offset:2px; }
.mm-media-tile:hover { filter:brightness(1.08); }
.mm-media-tile img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; border:1px solid var(--mm-black); background:var(--mm-black); }
.mm-media-tile span { display:block; padding:5px 1px 1px;overflow-wrap:anywhere; }
.mm-video-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:16px; }
.mm-video-item { margin:0; padding:6px; background:var(--mm-paper); border:2px solid; border-color:var(--mm-white) var(--mm-black) var(--mm-black) var(--mm-white); }
.mm-video-item video { display:block; width:100%; aspect-ratio:848/480; background:#000; }
.mm-video-item figcaption { padding:7px 2px 1px; font:700 12px var(--font-mono); }
.mm-sample-library { border:2px inset var(--mm-black); margin-top:8px; max-height:230px; overflow:auto; }
.mm-sample-library__row { display:flex;gap:11px; align-items:center; width:100%;text-align:left;padding:7px 10px; border:0;border-bottom:1px solid #777; font:700 12px var(--font-mono);cursor:pointer;background:var(--mm-white);color:var(--mm-black); }
.mm-sample-library__row:nth-child(even){background:#eee}
.mm-sample-library__row:hover,.mm-sample-library__row:focus-visible,.mm-sample-library__row.is-playing{background:var(--mm-paper);outline-offset:-2px;}
.mm-sample-library__row > span:first-child{color:var(--mm-black);background:var(--mm-cyan);padding:2px 4px;border:1px solid var(--mm-black)}
.mm-media-launch { font:700 13px var(--font-mono); background:var(--mm-paper) !important; }
.mm-media-lightbox { padding:5px; border:3px solid; border-color:var(--mm-white) var(--mm-black) var(--mm-black) var(--mm-white); background:var(--mm-cyan);color:var(--mm-black);max-width:min(900px,94vw); max-height:92dvh; box-shadow:7px 7px 0 var(--mm-black); }
.mm-media-lightbox::backdrop { background:rgba(0,0,0,.84); }
.mm-media-lightbox__bar { display:flex;align-items:center;justify-content:space-between;padding:4px 5px; background:var(--mm-pink);font:700 13px var(--font-mono); }
.mm-media-lightbox img { display:block; max-width:100%;max-height:calc(90dvh - 100px);height:auto;width:auto; margin:5px auto;object-fit:contain; }
.mm-media-lightbox p { margin:5px 6px; font:700 12px var(--font-mono); }

.mm-window--studio { max-width:calc(100vw - 18px); }
.mm-window--studio .mm-window__body--studio { padding:8px; max-height:min(78dvh,760px); }
.mm-studio { --mm-studio-ink:var(--mm-black); font-family:var(--font-mono);font-size:12px; color:var(--mm-black); }
.mm-studio button,.mm-studio input,.mm-studio select { font-family:var(--font-mono); }
.mm-studio__screen { display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:82px;padding:12px 14px;background:#000;color:var(--mm-paper);border:4px ridge var(--mm-white);text-shadow:0 0 4px rgba(237,210,86,.30); }
.mm-studio__screen-brand { color:var(--mm-cyan);font-weight:900;font-size:16px;letter-spacing:.06em;line-height:1.15; }
.mm-studio__screen-right { min-width:0;text-align:right; }
.mm-studio__screen-right strong { display:block;min-width:0;font-size:clamp(17px,3vw,26px);line-height:1.4;overflow-wrap:anywhere; }
.mm-studio__screen-right small { display:block;color:var(--mm-pink);font-size:11px; }
.mm-studio__toolbar { display:flex;align-items:center;flex-wrap:wrap;gap:7px; padding:10px 2px; border-bottom:2px solid var(--mm-black);font-weight:700; }
.mm-studio__toolbar label { display:flex;align-items:center;gap:5px;padding:3px 5px;background:var(--mm-paper);border:1px solid var(--mm-black); }
.mm-studio__toolbar input[type="number"] { width:64px;border:2px inset var(--mm-black);padding:5px; font-size:14px; }
.mm-studio__toolbar input[type="range"] { width:67px;accent-color:var(--mm-pink);cursor:pointer; }
.mm-studio__toolbar .mm-button { font-weight:900; }
.mm-studio__layout { display:grid;grid-template-columns:minmax(270px,.95fr) minmax(350px,1.05fr);gap:12px;padding:10px 0; }
.mm-studio__pad-panel,.mm-studio__sequence-panel { min-width:0; }
.mm-studio__panel-label { margin-bottom:8px;background:var(--mm-black);color:var(--mm-white); padding:7px; font-size:12px;font-weight:900; }
.mm-studio__panel-label small { display:block;color:var(--mm-paper);font-size:10px;font-weight:400;margin-top:2px; }
.mm-studio__pad-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px; }
.mm-studio__pad { min-width:0;min-height:71px; padding:8px 3px;background:var(--mm-cyan);color:var(--mm-black);border:3px solid;border-color:var(--mm-white) var(--mm-black) var(--mm-black) var(--mm-white);text-align:center;cursor:pointer;touch-action:manipulation; }
.mm-studio__pad:nth-child(4n+2){background:var(--mm-paper)}
.mm-studio__pad:nth-child(4n+3){background:var(--mm-pink)}
.mm-studio__pad strong { display:block; font-size:22px;line-height:1; }
.mm-studio__pad small { display:block;margin-top:7px; font-size:9px;line-height:1.1;overflow-wrap:anywhere;font-weight:800; }
.mm-studio__pad:hover,.mm-studio__pad:focus-visible { outline:2px solid var(--mm-pink);outline-offset:1px; }
.mm-studio__pad.is-selected { border-color:var(--mm-black) var(--mm-white) var(--mm-white) var(--mm-black);box-shadow:inset 0 0 0 2px var(--mm-black);transform:translate(1px,1px); }
.mm-studio__hint { padding:8px 2px; font-size:10px; line-height:1.4; }
.mm-studio__pattern-nav,.mm-studio__mode,.mm-studio__edit-actions { display:flex; flex-wrap:wrap; gap:5px;margin-bottom:10px; }
.mm-studio__pattern-nav .mm-button { flex:1;font-weight:900; }
.mm-studio .mm-button.is-selected { background:var(--mm-pink) !important;box-shadow:inset 1px 1px 0 var(--mm-black); }
.mm-studio__editing { display:flex;justify-content:space-between;gap:6px; margin:0 0 8px;padding:7px;background:var(--mm-paper);font-weight:700; }
.mm-studio__editing strong { overflow-wrap:anywhere; }
.mm-studio__editing span { font-size:10px;align-self:center; }
.mm-studio__steps { display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;margin-bottom:10px; }
.mm-studio__steps button { min-width:0;min-height:39px;cursor:pointer;border:2px solid;border-color:var(--mm-white) var(--mm-black) var(--mm-black) var(--mm-white);background:#dedede;color:#111;font-size:12px;font-weight:900; }
.mm-studio__steps button:nth-child(4n+1) { border-left:4px solid var(--mm-black); }
.mm-studio__steps button.is-on { background:var(--mm-pink); }
.mm-studio__steps button.is-playhead { outline:3px solid var(--mm-black);outline-offset:-4px;box-shadow:inset 0 0 0 2px var(--mm-paper); }
.mm-studio__steps button:focus-visible { outline:3px solid var(--mm-cyan); }
.mm-studio__edit-actions .mm-button {font-size:10px;padding:7px 8px;font-weight:700;}
.mm-studio__mode .mm-button {flex:1;font-size:11px;font-weight:800;}
.mm-studio__chain { display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:3px;margin-bottom:8px; }
.mm-studio__chain label { min-width:0;text-align:center;border:1px solid var(--mm-black);padding:4px 1px;background:var(--mm-paper);font-weight:800; }
.mm-studio__chain label.is-current { background:var(--mm-pink); outline:2px solid var(--mm-black); }
.mm-studio__chain label span { display:block;font-size:10px;margin-bottom:4px; }
.mm-studio__chain select { max-width:100%;min-width:0;width:100%;font-weight:900;font-size:13px;background:var(--mm-white);color:var(--mm-black);border:1px solid var(--mm-black); }
.mm-studio__footer { display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:10px 0 2px;border-top:2px solid var(--mm-black); }
.mm-studio__footer .mm-button {font-size:11px;font-weight:800;}
.mm-studio__footer [data-mm-wav] {background:var(--mm-paper) !important;}
.mm-studio__footer .mm-button:disabled {opacity:.5;cursor:wait;}
#mm-studio-info {flex-basis:100%;min-height:18px;font:700 11px/1.5 var(--font-mono);}
@media (max-width:900px) { .mm-studio__layout {grid-template-columns:1fr; } .mm-studio__pad {min-height:62px} }
@media (max-width:760px) {
  .mm-window--studio .mm-window__body--studio {max-height:calc(100dvh - 152px); padding:6px;}
  .mm-studio__screen {min-height:65px;padding:8px;}.mm-studio__screen-brand{font-size:12px;}
  .mm-studio__toolbar label {flex:1 1 95px;}
  .mm-studio__layout {gap:8px;}.mm-studio__pad{min-height:57px;padding:6px 2px}.mm-studio__pad small{font-size:8px;}
  .mm-media-gallery {grid-template-columns:repeat(2,minmax(0,1fr));}
  .mm-video-gallery {grid-template-columns:1fr;}
}
@media (min-width:761px) {
  .mm-window--studio:not(.is-maximized) { left:max(8px, calc((100vw - min(990px, calc(100vw - 24px))) / 2)) !important; }
}

/* -------------------------------------------------------
   v3.7.1 MANIC PAINT 95 — touch-first psychedelic engine
   The OS chrome and original cyan/pink/mustard palette are preserved.
   ------------------------------------------------------- */
#mm-window-paint.is-open {
  display: flex;
  flex-direction: column;
  height: min(760px, calc(100dvh - 64px));
  max-height: calc(100dvh - 50px);
}
#mm-window-paint.is-open.is-maximized {
  height: calc(100dvh - 8px) !important;
  max-height: none;
}
#mm-window-paint .mm-window__titlebar,
#mm-window-paint .mm-window__menu,
#mm-window-paint .mm-window__status { flex: 0 0 auto; }
#mm-window-paint .mm-paint-app {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: auto;
  max-height: none;
  padding: 7px;
  gap: 6px;
  background: var(--mm-silver);
  overflow: hidden !important;
}
#mm-window-paint .mm-paint-toolbar {
  display: flex;
  flex-wrap: wrap;
  flex: 0 0 auto;
  align-items: center;
  padding: 3px 3px 6px;
  gap: 5px;
  border-bottom: 1px solid #808080;
}
#mm-window-paint .mm-paint-toolbar__group {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
  min-width: 0;
  padding: 2px 5px 2px 0;
  border-right: 1px solid #808080;
}
#mm-window-paint .mm-paint-toolbar__group:last-child { border-right:0; }
#mm-window-paint .mm-paint-toolbar .mm-button {
  white-space: nowrap;
  min-height: 29px;
  font-size: 11px;
  line-height: 1.05;
  padding: 5px 7px;
  touch-action: manipulation;
}
#mm-window-paint .mm-paint-tool.is-active,
#mm-window-paint .mm-paint-size.is-active,
#mm-window-paint .mm-paint-fx.is-active {
  background: var(--mm-pink) !important;
  color: var(--mm-black) !important;
}
#mm-window-paint .mm-paint-swatches {
  flex: 0 0 auto;
  padding: 0 6px 0 2px;
  gap: 5px;
}
#mm-window-paint .mm-paint-swatch {
  width: 26px;
  height: 27px;
  touch-action: manipulation;
}
#mm-window-paint .mm-paint-stage {
  flex: 1 1 auto;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: auto !important;
  min-height: 120px !important;
  overflow: hidden;
  isolation: isolate;
  background: #020107 !important;
  border: 2px solid;
  border-color: #808080 #fff #fff #808080;
}
#mm-window-paint .mm-paint-stage::before {
  z-index: 2;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.055) 3px 4px) !important;
  pointer-events: none;
}
#mm-window-paint #mm-paint-canvas {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  max-height: none;
  background: #020107 !important;
  image-rendering: auto;
  cursor: crosshair;
  /* Required: prevents touch panning / pointercancel after the first stroke. */
  touch-action: none !important;
  overscroll-behavior: contain;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
#mm-window-paint .mm-paint-stage__corner {
  position: absolute;
  z-index: 3;
  right: 9px;
  top: 7px;
  padding: 3px 5px;
  border: 1px solid rgba(41,184,221,.55);
  background: rgba(0,0,0,.72);
  color: var(--mm-cyan);
  font: 700 9px/1.2 var(--font-mono);
  letter-spacing: .07em;
  pointer-events: none;
  opacity: .72;
}
#mm-window-paint .mm-paint-tip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 3px 0;
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  color: #202020;
  letter-spacing: .04em;
  opacity: 1;
}
#mm-paint-coords { font-variant-numeric: tabular-nums; white-space:nowrap; }

@media (max-width: 760px) {
  #mm-window-paint.is-open,
  #mm-window-paint.is-open.is-maximized {
    position: fixed !important;
    inset: 5px 5px calc(var(--taskbar-h) + 6px) 5px !important;
    width: auto !important;
    height: auto !important;
    max-height: none;
  }
  #mm-window-paint .mm-window__menu { padding: 3px 5px; }
  #mm-window-paint .mm-window__status {
    padding: 3px 5px;
    min-height: 17px;
    margin: 2px 4px;
    font-size: 9px;
  }
  #mm-window-paint .mm-paint-app {
    margin: 2px 4px;
    padding: 4px;
    gap: 4px;
  }
  #mm-window-paint .mm-paint-toolbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 1px 0 4px;
  }
  #mm-window-paint .mm-paint-toolbar__group,
  #mm-window-paint .mm-paint-swatches {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    padding: 2px 2px 3px;
    border-right: none;
    scrollbar-width: thin;
  }
  #mm-window-paint .mm-paint-toolbar .mm-button {
    min-height: 32px;
    padding: 5px 8px;
    flex: 0 0 auto;
    font-size: 11px;
  }
  #mm-window-paint .mm-paint-swatch {
    width: 31px;
    height: 31px;
    flex: 0 0 auto;
  }
  #mm-window-paint .mm-paint-stage {
    min-height: 115px !important;
  }
  #mm-window-paint .mm-paint-tip {
    font-size: 9px;
    line-height: 1.2;
  }
  #mm-window-paint .mm-paint-stage__corner { font-size:8px; }
}
@media (max-height: 610px) and (max-width: 760px) {
  #mm-window-paint .mm-paint-toolbar .mm-button { min-height: 26px; padding: 3px 6px; }
  #mm-window-paint .mm-paint-swatch { width:24px; height:24px; }
  #mm-window-paint .mm-window__menu { display:none; }
  #mm-window-paint .mm-paint-stage { min-height:90px !important; }
}
/* Landscape phones: keep the whole canvas visible by collapsing the controls
   into one horizontally scrollable control strip, not five stacked rows. */
@media (max-width: 760px) and (max-height: 500px) {
  #mm-window-paint .mm-paint-toolbar {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    gap: 7px;
    scrollbar-width: thin;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
  }
  #mm-window-paint .mm-paint-toolbar__group,
  #mm-window-paint .mm-paint-swatches {
    width: max-content;
    flex: 0 0 auto;
    overflow: visible;
    border-right: 1px solid #808080;
  }
  #mm-window-paint .mm-paint-toolbar .mm-button { min-height: 30px; }
  #mm-window-paint .mm-paint-stage { min-height: 130px !important; }
  #mm-window-paint .mm-paint-tip { padding:0; }
}

/* ============================================================
   MANIC BEAT CALC 95 v3.8 — FOUR PARTS, ONE CLICK SONGS
   Deliberately reuses the Manic OS 95 palette and bevelled UI.
   ============================================================ */
.mm-studio--simple {font-size:12px;}
.mm-studio--simple [hidden] {display:none !important;}
.mm-studio--simple button {touch-action:manipulation;}
.mm-studio--simple .mm-studio__screen {min-height:76px;}
.mm-studio__screen-brand em {display:block;margin-top:6px;font-size:9px;font-style:normal;color:var(--mm-paper);letter-spacing:.03em;}
.mm-studio__quickstart {display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;background:#bef6e5;border:2px solid #000;padding:10px;margin-top:9px;box-shadow:3px 3px 0 #111;}
.mm-studio__quickstart-text {display:flex;flex-direction:column;gap:5px;line-height:1.35;}
.mm-studio__quickstart-text strong {font-size:17px;letter-spacing:-.035em;}
.mm-studio__quickstart-text span {font-size:11px;}
.mm-studio__vibe-label {font-size:10px;font-weight:900;display:flex;flex-direction:column;gap:4px;}
.mm-studio__vibe-label select {border:2px inset #666;background:#fff;padding:8px 3px;font-size:12px;max-width:160px;color:#111;min-height:40px;}
.mm-studio--simple .mm-studio__make {background:var(--mm-pink) !important;color:#000;min-height:51px;min-width:175px;font-size:14px;font-weight:900;border:3px solid;border-color:#fff #111 #111 #fff;box-shadow:2px 2px 0 #000;cursor:pointer;}
.mm-studio--simple .mm-studio__make:active {transform:translate(2px,2px);box-shadow:none;}
.mm-studio--simple .mm-studio__toolbar {padding:12px 0 10px;gap:7px;}
.mm-studio--simple .mm-studio__toolbar button {min-height:39px;}
.mm-studio--simple .mm-studio__play {background:var(--mm-paper) !important;font-weight:900;border:2px solid #111;min-width:155px;}
.mm-studio--simple .mm-studio__speed {margin-left:auto;display:flex;gap:5px;align-items:center;font-size:11px;min-height:38px;}
.mm-studio--simple .mm-studio__speed input {width:100px;accent-color:var(--mm-pink);}
.mm-studio--simple .mm-studio__speed strong {font-size:14px;min-width:27px;text-align:right;}
.mm-studio--simple .mm-studio__layout {grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:14px;padding:11px 0;}
.mm-studio--simple .mm-studio__panel-label {min-height:47px;margin-bottom:8px;}
.mm-studio--simple .mm-studio__panel-label small {font-size:10px;line-height:1.3;}
.mm-studio__groups {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin:0 0 8px;}
.mm-studio__group {display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;min-height:63px;padding:7px 2px;background:#dedede;border:2px solid;border-color:#fff #000 #000 #fff;cursor:pointer;min-width:0;}
.mm-studio__group strong {font:900 12px var(--font-mono);}
.mm-studio__group small {font:700 8px/1.25 var(--font-mono);text-align:center;}
.mm-studio__group.is-selected {background:var(--mm-paper);border-color:#000 #fff #fff #000;box-shadow:inset 0 0 0 2px #000;}
.mm-studio__group--beats.is-selected {background:var(--mm-pink);}
.mm-studio__group--bass.is-selected {background:var(--mm-cyan, #9ff6f0);}
.mm-studio__group--tunes.is-selected {background:var(--mm-paper);}
.mm-studio__group--voices.is-selected {background:var(--mm-mint);}
.mm-studio__sound-bank {min-width:0;}
.mm-studio--simple .mm-studio__pad-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.mm-studio--simple .mm-studio__pad {min-height:83px;background:var(--mm-cyan,#9ff6f0);transition:filter .08s ease;}
.mm-studio--simple .mm-studio__pad:nth-child(2),.mm-studio--simple .mm-studio__pad:nth-child(3) {background:var(--mm-pink);}
.mm-studio--simple .mm-studio__pad strong {font-size:27px;}
.mm-studio--simple .mm-studio__pad small {font-size:11px;letter-spacing:.03em;}
.mm-studio--simple .mm-studio__pad.is-selected {box-shadow:inset 0 0 0 3px #000;background:var(--mm-paper);}
.mm-studio__extra-sounds {margin-top:10px;background:#e5e5e5;border:1px solid #111;}
.mm-studio__extra-sounds summary {cursor:pointer;padding:9px 7px;font-size:11px;font-weight:900;}
.mm-studio__extra-grid {padding:7px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;}
.mm-studio__extra-pad {min-height:40px;padding:4px;background:#fff;border:2px solid;border-color:#fff #111 #111 #fff;font-size:10px;font-weight:900;cursor:pointer;overflow-wrap:anywhere;}
.mm-studio__extra-pad.is-selected {background:var(--mm-paper);box-shadow:inset 0 0 0 2px #000;}
.mm-studio__selected-sound {display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin-top:9px;background:var(--mm-black);color:#fff;padding:10px 8px;font-size:10px;font-weight:900;line-height:1.35;}
.mm-studio__selected-sound strong {color:var(--mm-paper);font-size:13px;}
.mm-studio__selected-sound span {width:100%;color:#fff;font-size:10px;font-weight:400;}
.mm-studio__part-nav {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:2px 0 12px;}
.mm-studio__part {display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;min-height:95px;min-width:0;padding:6px 3px;background:#eee;border:3px solid;border-color:#fff #000 #000 #fff;cursor:pointer;}
.mm-studio__part span {font-size:10px;font-weight:900;}
.mm-studio__part strong {font-size:clamp(10px,1.15vw,15px);letter-spacing:-.03em;overflow-wrap:anywhere;}
.mm-studio__part small {font-size:12px;opacity:.65;}
.mm-studio__part.is-selected {background:var(--mm-pink);border-color:#111 #fff #fff #111;box-shadow:inset 0 0 0 2px #000;}
.mm-studio__part.is-playing {outline:3px dashed #000;outline-offset:-6px;}
.mm-studio__step-heading {background:#000;color:#fff;padding:8px 7px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:5px;}
.mm-studio__step-heading small {color:var(--mm-paper);font-size:10px;}
.mm-studio__step-bar {display:flex;justify-content:space-between;padding:9px 4px 6px;font-weight:900;}
.mm-studio__step-bar span:last-child {color:#9a005e;}
.mm-studio--simple .mm-studio__steps {gap:5px;margin-bottom:8px;}
.mm-studio--simple .mm-studio__steps button {min-height:59px;font-size:15px;background:#eee;}
.mm-studio--simple .mm-studio__steps button.is-on {background:var(--mm-pink);color:#111;box-shadow:inset 0 0 0 2px #111;}
.mm-studio--simple .mm-studio__steps button.is-playhead {outline:3px dashed #111;outline-offset:-5px;}
.mm-studio--simple .mm-studio__edit-actions {gap:5px;margin-bottom:11px;}
.mm-studio--simple .mm-studio__edit-actions .mm-button {font-size:10px;flex:1;min-height:39px;padding:5px;}
.mm-studio--simple [data-mm-surprise] {background:var(--mm-mint) !important;}
.mm-studio__loop-label {display:flex;align-items:center;gap:7px;padding:9px 5px;background:#e8e8e8;border:1px solid #111;font-size:10px;font-weight:900;cursor:pointer;}
.mm-studio__loop-label input {width:17px;height:17px;accent-color:var(--mm-pink);}
.mm-studio--simple .mm-studio__footer {gap:9px;align-items:flex-start;padding-bottom:6px;}
.mm-studio--simple .mm-studio__export {background:var(--mm-paper) !important;min-height:42px;font-size:12px;border:2px solid #111;}
.mm-studio__advanced {flex:1;min-width:210px;}
.mm-studio__advanced summary {display:inline-block;padding:12px;border:2px solid;border-color:#fff #000 #000 #fff;background:#ddd;font-weight:900;font-size:11px;cursor:pointer;}
.mm-studio__advanced-inner {display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:10px;margin-top:7px;background:#ddd;border:2px inset #999;}
.mm-studio__advanced-inner label {display:flex;align-items:center;gap:5px;font-size:11px;font-weight:800;}
.mm-studio__advanced-inner label input {width:75px;accent-color:var(--mm-pink);}
.mm-studio__advanced-inner button {font-size:10px;min-height:34px;}
.mm-studio--simple #mm-studio-info {flex:1 0 100%;font-size:11px;min-height:19px;margin-top:2px;}
@media(max-width:880px) {
  .mm-studio--simple .mm-studio__layout {grid-template-columns:1fr;}
  .mm-studio__quickstart {grid-template-columns:1fr auto;}
  .mm-studio__quickstart-text {grid-column:1/-1;}
  .mm-studio--simple .mm-studio__pad-grid {grid-template-columns:repeat(4,minmax(0,1fr));}
  .mm-studio--simple .mm-studio__pad {min-height:74px;}
  .mm-studio__part strong {font-size:14px;}
}
@media(max-width:540px) {
  .mm-studio__quickstart {gap:6px;padding:8px;}
  .mm-studio__quickstart-text strong {font-size:16px;}
  .mm-studio__quickstart-text span {font-size:10px;}
  .mm-studio--simple .mm-studio__make {min-width:0;font-size:12px;min-height:49px;padding:4px 8px;}
  .mm-studio__vibe-label select {width:140px;font-size:11px;}
  .mm-studio--simple .mm-studio__toolbar {justify-content:space-between;}
  .mm-studio--simple .mm-studio__speed {margin-left:0;flex:1 1 100%;justify-content:center;}
  .mm-studio__group small {font-size:7px;}
  .mm-studio--simple .mm-studio__pad-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
  .mm-studio--simple .mm-studio__pad {min-height:71px;}
  .mm-studio__part {min-height:74px;padding:4px 1px;}
  .mm-studio__part strong {font-size:11px;}
  .mm-studio--simple .mm-studio__steps {gap:3px;}
  .mm-studio--simple .mm-studio__steps button {min-height:43px;font-size:11px;padding:2px;}
  .mm-studio--simple .mm-studio__edit-actions .mm-button {font-size:9px;}
}

.mm-studio--simple .mm-studio__toolbar .mm-studio__export {background:var(--mm-mint) !important;min-width:110px;font-size:11px;font-weight:900;border:2px solid #111;padding:7px;}
.mm-studio--simple .mm-studio__live-status {margin:0;padding:5px 7px;min-height:25px;background:#f4f4f4;border:1px solid #888;font:700 10px/1.25 var(--font-mono);}
@media(max-width:540px) {.mm-studio--simple .mm-studio__toolbar .mm-studio__export {min-width:90px;}}

/* -------------------------------------------------------
   v3.8.4 IMAGE_VIEWER.EXE — movable multi-window picture viewer.
   Each image is a real OS window/taskbar item, not a modal lightbox.
   ------------------------------------------------------- */
#mm-desktop .mm-image-window {
  display:none;
  position:absolute;
  min-width:245px;
  min-height:215px;
  max-width:calc(100% - 6px);
  max-height:calc(100% - 6px);
  overflow:hidden;
  resize:both;
  flex-direction:column;
  box-sizing:border-box;
}
#mm-desktop .mm-image-window.is-open { display:flex; }
#mm-desktop .mm-image-window.is-maximized {
  width:calc(100% - 8px) !important;
  height:calc(100% - 8px) !important;
  resize:none;
}
.mm-image-window .mm-window__titlebar { flex:0 0 27px; touch-action:none; }
.mm-image-window .mm-window__menu { flex:0 0 auto; }
.mm-image-window__content {
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1 1 auto;
  min-width:0;
  min-height:0;
  overflow:auto;
  margin:3px 4px;
  padding:5px;
  background:#151515;
  border:2px solid;
  border-color:var(--mm-black) var(--mm-white) var(--mm-white) var(--mm-black);
}
.mm-image-window__content img {
  display:block;
  object-fit:contain;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  min-height:0;
  user-select:none;
  -webkit-user-drag:none;
}
.mm-image-window__status {
  display:flex;
  justify-content:space-between;
  gap:8px;
  flex:0 0 auto;
  min-height:19px;
  padding:2px 5px;
  font:700 10px var(--font-mono);
  white-space:nowrap;
  overflow:hidden;
}
.mm-image-window__status span { overflow:hidden; text-overflow:ellipsis; }
.mm-window__body .wp-block-image img,
.mm-window__body .wp-block-gallery img { cursor:zoom-in; }
@media (max-width:760px){
  /* Unlike regular app windows, pictures stay movable and stack on phones. */
  #mm-desktop .mm-window.mm-image-window {
    position:absolute !important;
    left:var(--mm-mobile-image-left, 6px) !important;
    top:var(--mm-mobile-image-top, 8px) !important;
    right:auto !important;
    bottom:auto !important;
    width:var(--mm-mobile-image-width, min(370px, calc(100vw - 16px))) !important;
    height:var(--mm-mobile-image-height, min(425px, calc(100dvh - 96px))) !important;
    max-width:calc(100vw - 12px) !important;
    max-height:calc(100dvh - var(--taskbar-h) - 15px) !important;
    resize:none;
  }
  #mm-desktop .mm-window.mm-image-window.is-maximized {
    left:4px !important; top:4px !important;
    width:calc(100% - 8px) !important;
    height:calc(100% - 8px) !important;
  }
  .mm-image-window__content { padding:3px; }
}