/* =========================================================
   Modal: landing page
   Builds on styles.css. The launcher's screens are its own
   (rendered by tools/sync-launcher.mjs --screens); mock-ups use
   its dark theme (src/Modal.UI/Themes/Resources.axaml), icons
   and loader colours. Scroll-driven values (--p, --hp, the
   story's frame, spotlight and camera) are set by home.js.
   ========================================================= */

:root {
  --nav-h: 68px;

  /* The launcher's palette */
  --app-window: #0b0e13;
  --app-side: #0f1319;
  --app-surface: #141920;
  --app-hover: #1a2029;
  --app-raised: #161c24;
  --app-input: #0f141a;
  --app-border: #212934;
  --app-border-strong: #2e3846;
  --app-text: #e7edf3;
  --app-text-2: #98a4b3;
  --app-muted: #7e8b9c;
  --app-accent: #5cc8ff;
  --app-accent-press: #4fbcf5;
  --app-accent-text: #7dd3ff;
  --app-accent-soft: rgba(92, 200, 255, .12);
  --app-danger: #f87171;
  --app-success: #4ade80;

  /* Fallbacks; the real values are written into <head> from the launcher's theme */
  --loader-vanilla: #4ade80; --loader-fabric: #e2be7c; --loader-forge: #f59e6b; --loader-neoforge: #fb923c; --loader-quilt: #c4a1ff;

  --body-text: #c4ced8;
}

/* ---------- Shared type ---------- */
/* Long words ("Recommendations") may break on narrow screens or with wider letter spacing (WCAG 1.4.10, 1.4.12) */
.home h1, .home h2, .home h3 { text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
.home p { text-wrap: pretty; }

.sec-head { max-width: 760px; }
.sec-head h2, .feature-copy h2, .faq-grid h2, .final h2 {
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.05;
  letter-spacing: -.035em;
  font-weight: 700;
}
.sec-head p { margin-top: 18px; max-width: 640px; font-size: 18px; color: var(--muted); }

.note { margin-top: 18px; font-size: 14.5px; line-height: 1.6; color: var(--faint); }

.home main a:not(.text-link):not(.brand) {
  color: var(--accent-2);
  text-decoration: underline;
  text-decoration-color: rgba(92, 200, 255, .4);
  text-underline-offset: 3px;
}
.home main a:not(.text-link):not(.brand):hover { text-decoration-color: currentColor; }

/* Shared bits of the launcher's UI */
.tile {
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 9px;
}
.tile .ic { width: 17px; height: 17px; }
.tile-loader { background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); }
.r-thumb { flex: none; border-radius: 8px; object-fit: cover; background: var(--app-raised); }
.r-text { flex: 1; min-width: 0; display: grid; }
.r-text b { font-weight: 600; line-height: 1.35; }

/* ---------- Nav ---------- */
@media (max-width: 600px) { .nav-status { display: none !important; } } /* room for the page links; the closing section says it too */
.nav-status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 10px; border-radius: 999px;
  border: 1px solid rgba(92, 200, 255, .25);
  background: rgba(92, 200, 255, .06);
  color: var(--app-accent-text);
  font-size: 13px; font-weight: 600;
}

/* ---------- Hero ---------- */
.hero { padding-top: calc(var(--nav-h) + clamp(48px, 10vh, 104px)); }
/* Just the headline over the launcher itself: whole words only (no hyphenation), in balanced lines, the second half
   a step quieter so the line reads as one thought. Sized so "everything" always fits a narrow phone. */
.home .hero-title {
  max-width: 17ch;
  margin-inline: auto;
  text-align: center;
  font-size: clamp(38px, 6.6vw, 96px);
  line-height: 1.01;
  letter-spacing: -.041em;
  font-weight: 800;
  hyphens: manual;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: balance;
}
.hero-title-main { color: var(--text); }
.hero-title-rest { color: #a9b6c3; }

/* The screenshot rises and settles as the page starts to scroll (--hp: 0 at the top, 1 once scrolled in) */
.hero-shot {
  --hp: 1;
  position: relative;
  margin-top: clamp(48px, 8vh, 80px);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--app-border-strong);
  box-shadow: 0 70px 120px -70px #000, 0 0 0 1px rgba(255, 255, 255, .02);
  transform: translateY(calc((1 - var(--hp)) * 56px)) scale(calc(.955 + .045 * var(--hp)));
  transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(#000 78%, transparent);
  mask-image: linear-gradient(#000 78%, transparent);
}
.hero-shot img { width: 100%; }

/* ---------- Story: the launcher's own screens, pinned while the steps play out ----------
   .story is as tall as the scroll it takes (--len screens, from the frames' holds); .story-pin stays in view
   meanwhile. home.js shows one frame at a time: every .shot up to the current one is .past, so the newest sits on
   top and fades in over the last (and going back, it fades out to show the one before). The spotlight, and on small
   screens the camera, move to what the frame is about. */
.story-section { padding: clamp(96px, 14vh, 150px) 0 0; }
.story { position: relative; margin-top: 40px; }
.js .story { --len: 18; height: calc(100svh + var(--len) * 26svh); margin-top: 8px; }
.js .story-pin {
  position: sticky; top: var(--nav-h);
  height: calc(100svh - var(--nav-h));
  display: flex; align-items: center;
}
.story-inner { width: 100%; display: grid; gap: 20px; justify-items: center; }

.story-steps { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.story-step { display: grid; align-content: start; gap: 10px; }
.step-bar { display: block; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.step-bar i { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--f, 0)); }
.story-step h3 { font-size: clamp(17px, 1.45vw, 20px); line-height: 1.25; letter-spacing: -.015em; font-weight: 700; }
.step-jump { color: var(--faint); text-align: left; border-radius: 6px; transition: color .3s; }
.step-jump:hover { color: var(--text); }
.story-step p { font-size: 15px; line-height: 1.55; color: var(--faint); transition: color .3s; }
.story-step.on .step-jump { color: var(--text); }
.story-step.on p { color: var(--muted); }
html:not(.js) .step-bar { display: none; }

/* The window: as wide as the page allows, and no taller than what the steps leave of the screen (--reserve) */
.story-stage {
  position: relative;
  width: min(100%, calc((100svh - var(--nav-h) - var(--reserve, 250px)) * 1.6));
  aspect-ratio: 1920 / 1200;
  border-radius: 14px;
  overflow: hidden;
  background: var(--app-window);
  border: 1px solid var(--app-border-strong);
  box-shadow: 0 60px 120px -70px #000, 0 0 0 1px rgba(255, 255, 255, .02);
}
/* The frames at the window's own shape; on phones the stage is taller and the camera fills it, zoomed in */
.story-cam {
  position: absolute; left: 0; top: 0; width: 100%;
  aspect-ratio: 1920 / 1200;
  transform-origin: 0 0;
  transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--cs, 1));
  transition: transform .75s var(--ease);
}
.shot { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .3s var(--ease); }
.shot.past, html:not(.js) .shot:nth-child(2) { opacity: 1; }
/* What the frame is about stays bright, ringed in the accent; the rest of the window dims a little */
.story-spot {
  position: absolute;
  left: var(--sx, 0%); top: var(--sy, 0%); width: var(--sw, 100%); height: var(--sh, 100%);
  border-radius: 12px;
  box-shadow: 0 0 0 1.5px rgba(92, 200, 255, .6), 0 0 0 200vmax rgba(4, 7, 10, .36);
  opacity: 0;
  pointer-events: none;
  transition: left .6s var(--ease), top .6s var(--ease), width .6s var(--ease), height .6s var(--ease), opacity .4s;
}
.story-spot.on { opacity: 1; }
.story-note { max-width: 720px; text-align: center; font-size: 13.5px; line-height: 1.5; color: var(--faint); }

/* Instances: the launcher's own page, its rows cut from the same screenshot. They slide in as the section scrolls
   into view (--p), and every one has arrived by the time it's centred (--p .5). */
.win-crop {
  border-radius: 16px;
  overflow: hidden;
  background: var(--app-window);
  border: 1px solid var(--app-border-strong);
  box-shadow: 0 50px 100px -60px #000;
}
.crop { position: relative; width: 100%; }
.slice { position: absolute; left: 0; width: 100%; overflow: hidden; }
.slice img { position: absolute; max-width: none; height: auto; }
.inst-row {
  --off: clamp(0, (.4 + var(--i) * .03 - var(--p)) * 7, 1);
  transform: translateX(calc(var(--off) * 56px));
  opacity: calc(1 - var(--off) * .9);
}

/* ---------- Privacy: how recommendations are made, drawn as the section scrolls in ----------
   One value, --q (0 to 1, set by home.js from where the section is), drives everything: each part works out its own
   --t from it (0 before its turn, 1 once it's in), so the diagram fills in left to right and the launcher's cards
   follow. Without JavaScript, or with Reduce motion, --q is 1 and it's all there at once. */
.privacy { --q: 1; padding: clamp(80px, 12vh, 130px) 0 40px; }
.rx { margin-top: 48px; }
.rx-top {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr) minmax(0, 1fr);
  align-items: center;
}
/* a faint dotted canvas behind the diagram */
.rx-top::before {
  content: ""; position: absolute; inset: -28px -12px; z-index: -1; pointer-events: none;
  background: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.5px) 0 0 / 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}

.rx-card {
  position: relative;
  padding: 20px 20px 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, #121821, #0d1117);
  border: 1px solid var(--app-border);
  box-shadow: 0 30px 70px -45px #000, inset 0 1px 0 rgba(255, 255, 255, .04);
  color: var(--app-text);
}
.rx-local { border-color: rgba(92, 200, 255, .28); box-shadow: 0 30px 70px -45px #000, inset 0 1px 0 rgba(92, 200, 255, .12), 0 0 0 4px rgba(92, 200, 255, .04); }
.rx-head { display: flex; align-items: center; gap: 12px; }
.rx-head b { display: block; font-size: 16.5px; letter-spacing: -.01em; }
.rx-head small { display: block; margin-top: 1px; font-size: 13px; color: var(--app-text-2); }
.rx-badge {
  display: grid; place-items: center; flex: none;
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--app-accent-soft); color: var(--app-accent);
  box-shadow: inset 0 0 0 1px rgba(92, 200, 255, .18);
}
.rx-badge .ic { width: 19px; height: 19px; }
.rx-label { margin: 18px 0 9px; font-size: 13px; font-weight: 600; color: var(--app-text-2); }

/* Modrinth's four lists, coming in one after another */
.rx-lists { margin-top: 14px; }
.rx-lists li {
  --t: clamp(0, (var(--q) * 1.0 - var(--k) * .045) * 9, 1);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--app-border);
  opacity: calc(.25 + .75 * var(--t));
  transform: translateX(calc((1 - var(--t)) * -14px));
}
.rx-list-name { display: grid; gap: 3px; min-width: 0; }
.rx-list-name b { font-size: 14px; font-weight: 600; }
.rx-list-name code {
  justify-self: start;
  padding: 1px 6px; border-radius: 5px;
  background: rgba(92, 200, 255, .08);
  font: 500 11.5px/1.5 var(--mono); color: var(--app-accent-text);
}
.rx-icons { display: flex; gap: 5px; flex: none; }
.rx-icons img {
  width: 30px; height: 30px; border-radius: 8px; object-fit: cover;
  background: var(--app-raised);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06);
  opacity: clamp(0, (var(--q) - var(--k) * .045 - var(--j) * .012) * 10, 1);
}

/* Between them: the lists coming back (packets), the request going out (dashed), and the request itself */
.rx-link { display: grid; gap: 16px; padding: 0 18px; }
.rx-wire { --t: clamp(0, (var(--q) - .16) * 6, 1); display: grid; gap: 7px; justify-items: center; }
.rx-wire-back { --t: clamp(0, (var(--q) - .3) * 6, 1); }
.rx-line { position: relative; display: block; width: 100%; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .08); }
.rx-line::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, rgba(92, 200, 255, .3), var(--app-accent));
  transform-origin: 0 50%; transform: scaleX(var(--t));
}
.rx-line::after {
  content: ""; position: absolute; right: -3px; top: 50%;
  border: 6px solid transparent; border-left: 9px solid var(--app-accent); border-right: 0;
  transform: translateY(-50%); opacity: var(--t);
}
.rx-line i {
  position: absolute; top: 50%; left: 0;
  width: 14px; height: 6px; margin-top: -3px; border-radius: 3px;
  background: var(--accent-2);
  box-shadow: 0 0 12px rgba(92, 200, 255, .9);
  opacity: calc(var(--t) * var(--t));
  animation: rx-packet 2.4s linear infinite;
}
.rx-line i:nth-child(2) { animation-delay: -.8s; }
.rx-line i:nth-child(3) { animation-delay: -1.6s; }
@keyframes rx-packet { from { left: 0; } to { left: calc(100% - 14px); } }
.rx-wire-back .rx-line { background: none; }
.rx-wire-back .rx-line::before {
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .32) 0 6px, transparent 6px 12px);
  transform-origin: 100% 50%;
}
.rx-wire-back .rx-line::after { right: auto; left: -3px; border-left: 0; border-right: 9px solid rgba(255, 255, 255, .45); }
.rx-wire-tag { font-size: 12.5px; color: var(--app-text-2); opacity: calc(.3 + .7 * var(--t)); }

.rx-req {
  --t: clamp(0, (var(--q) - .2) * 6, 1);
  padding: 4px 16px 14px;
  border-radius: 14px;
  background: #0a0d12;
  border: 1px solid var(--app-border-strong);
  opacity: calc(.3 + .7 * var(--t));
  transform: scale(calc(.97 + .03 * var(--t)));
}
.rx-req .rx-label { margin-top: 12px; }
.rx-code {
  margin: 0; padding: 10px 12px;
  border-radius: 9px; background: rgba(255, 255, 255, .03); border: 1px solid var(--app-border);
  font: 12.5px/1.65 var(--mono); color: var(--app-text);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.t-verb { color: var(--app-accent-text); font-weight: 600; }
.t-key { color: var(--app-text-2); }
.t-dim { color: var(--app-text-2); font-style: italic; }
.rx-never { display: grid; gap: 7px; }
.rx-never li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--app-text-2); }
.rx-never .ic {
  flex: none; width: 18px; height: 18px; padding: 3px; border-radius: 50%;
  background: rgba(248, 113, 113, .12); color: var(--app-danger); stroke-width: 3;
}

/* This PC: the signals light up, then each step of the pick is ticked */
.rx-signals { display: flex; flex-wrap: wrap; gap: 7px; }
.rx-signals li {
  --t: clamp(0, (var(--q) - .34 - var(--k) * .035) * 12, 1);
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px 6px 9px; border-radius: 9px;
  border: 1px solid color-mix(in srgb, rgba(92, 200, 255, .45) calc(var(--t) * 100%), var(--app-border-strong));
  background: color-mix(in srgb, var(--app-accent-soft) calc(var(--t) * 100%), transparent);
  font-size: 13px;
  color: color-mix(in srgb, var(--app-accent-text) calc(var(--t) * 100%), var(--app-text-2));
}
.rx-signals .ic { width: 14px; height: 14px; }
.rx-steps { display: grid; gap: 9px; }
.rx-steps li {
  --t: clamp(0, (var(--q) - .5 - var(--k) * .04) * 12, 1);
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: color-mix(in srgb, var(--app-text) calc(var(--t) * 100%), var(--app-text-2));
}
.rx-step-n {
  display: grid; place-items: center; flex: none;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--app-accent) calc(var(--t) * 100%), var(--app-border-strong));
  background: color-mix(in srgb, var(--app-accent) calc(var(--t) * 100%), transparent);
  color: #04202f;
}
.rx-step-n .ic { width: 13px; height: 13px; stroke-width: 3; opacity: var(--t); }

/* Down to the result: Home's own cards, one after another */
.rx-down {
  --t: clamp(0, (var(--q) - .66) * 9, 1);
  position: relative; display: block;
  width: 2px; height: 64px; margin: 18px auto;
  border-radius: 2px; background: rgba(255, 255, 255, .08);
}
.rx-down::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(rgba(92, 200, 255, .3), var(--app-accent));
  transform-origin: 50% 0; transform: scaleY(var(--t));
}
.rx-down::after {
  content: ""; position: absolute; left: 50%; bottom: -4px;
  border: 6px solid transparent; border-top: 9px solid var(--app-accent); border-bottom: 0;
  transform: translateX(-50%); opacity: var(--t);
}
.rx-down i {
  position: absolute; left: 50%; top: 0;
  width: 6px; height: 14px; margin-left: -3px; border-radius: 3px;
  background: var(--accent-2); box-shadow: 0 0 12px rgba(92, 200, 255, .9);
  opacity: calc(var(--t) * var(--t));
  animation: rx-drop 1.8s linear infinite;
}
@keyframes rx-drop { from { top: 0; } to { top: calc(100% - 14px); } }
.rx-result { margin: 0; }
.rec-card {
  --t: clamp(0, (var(--q) - .74 - var(--i) * .06) * 8, 1);
  opacity: var(--t);
  transform: translateY(calc((1 - var(--t)) * 30px)) scale(calc(.97 + .03 * var(--t)));
}
.privacy-foot { margin-top: 40px; max-width: 760px; font-size: 15.5px; line-height: 1.65; color: var(--muted); }
.privacy-foot em { font-style: normal; color: var(--text); }
.privacy-foot a { margin-left: 4px; }

/* ---------- Questions ---------- */
.faq-section { padding: clamp(80px, 12vh, 120px) 0; border-top: 1px solid var(--border); }
.faq-grid { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 32px 80px; align-items: start; }
.faq details { border-top: 1px solid var(--border); }
.faq details:last-child { border-bottom: 1px solid var(--border); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 0;
  font-size: 18px; font-weight: 600; letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { width: 20px; height: 20px; color: var(--muted); transition: transform .3s var(--ease), color .3s; }
.faq summary:hover .ic { color: var(--text); }
.faq details[open] summary .ic { transform: rotate(180deg); color: var(--accent); }
.faq details p { padding: 0 48px 24px 0; font-size: 16.5px; line-height: 1.65; color: var(--muted); }

/* ---------- Closing ---------- */
.final { padding: clamp(100px, 16vh, 160px) 0 20px; }
.final-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.final h2 { max-width: 16ch; font-size: clamp(36px, 5vw, 66px); line-height: 1.02; letter-spacing: -.04em; }
.final-inner > p { max-width: 560px; margin: 20px 0 36px; font-size: 18px; color: var(--muted); }
.status-lg { max-width: 520px; width: 100%; padding: 18px 22px 18px 18px; text-align: left; }
.status-lg .status-logo { width: 52px; height: 52px; border-radius: 13px; }
.status-lg .status-line { font-size: 17px; }
.status-lg .status-sub { font-size: 15px; }

.footer { margin-top: 110px; }

/* ---------- Instances: a working copy of the launcher's page (instances.js) ----------
   Drawn like the launcher's Lines layout: plain areas divided by thin lines, its sizes and spacing, its own icons. */
.lab { padding: clamp(80px, 12vh, 130px) 0; }
.lab-note { margin: 18px 0 26px; max-width: 760px; font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.lab-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 32px; margin-top: 28px; }
.lab-facts li { padding-top: 14px; border-top: 1px solid var(--border); font-size: 15.5px; line-height: 1.55; color: var(--body-text); }

.ma {
  --ma-line: #1b2129;
  --ma-hover: rgba(255, 255, 255, .035);
  --ma-fill: #141a21;
  --ma-fill-2: #1a2029;
  --ma-input: #0f141a;
  position: relative;
  color: var(--app-text);
  font-size: 14px;
  line-height: 1.4;
}
.ma .ic { width: 18px; height: 18px; flex: none; }
.ma.ready .ma-fallback { display: none; }
.ma-win {
  position: relative;
  display: grid; grid-template-columns: 236px minmax(0, 1fr);
  height: min(740px, calc(100svh - 120px)); min-height: 600px;
  border-radius: 16px; overflow: hidden;
  background: var(--app-window);
  border: 1px solid var(--app-border-strong);
  box-shadow: 0 60px 120px -70px #000, 0 0 0 1px rgba(255, 255, 255, .02);
  text-align: left;
}
:where(.ma) button { font: inherit; color: inherit; }
:where(.ma) input, :where(.ma) select, :where(.ma) textarea { font: inherit; color: var(--app-text); }
.ma [hidden] { display: none !important; }

/* Sidebar */
.ma-side { display: flex; flex-direction: column; padding: 18px 12px 14px; border-right: 1px solid var(--ma-line); min-width: 0; }
.ma-brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 22px; font-size: 18px; letter-spacing: -.02em; }
.ma-brand img { border-radius: 8px; }
.ma-nav { display: grid; gap: 4px; }
.ma-navitem {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  height: 40px; padding: 0 12px; border-radius: 10px;
  font-size: 14.5px; font-weight: 500; color: #c9d2dc;
  transition: background .15s;
}
.ma-navitem .ic { width: 20px; height: 20px; color: #aab5c2; }
.ma-navitem:hover { background: var(--ma-hover); }
.ma-navitem.on { background: var(--app-accent-soft); color: var(--app-accent-text); }
.ma-navitem.on .ic { color: var(--app-accent-text); }
.ma-navitem.on::before { content: ""; position: absolute; left: -6px; top: 11px; bottom: 11px; width: 3px; border-radius: 3px; background: var(--app-accent); }
.ma-side-foot { margin-top: auto; display: grid; gap: 8px; }
.ma-divider { border: 0; border-top: 1px solid var(--ma-line); margin: 4px; }
.ma-account { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; text-align: left; }
.ma-account:hover { background: var(--ma-hover); }
.ma-face {
  flex: none; width: 32px; height: 32px; border-radius: 8px;
  background: url('assets/launcher/skins/modal-wayfarer.png') 14.2857% 14.2857% / 800% auto;
  image-rendering: pixelated;
}
.ma-account-text { flex: 1; min-width: 0; display: grid; }
.ma-account-text b { font-size: 13px; }
.ma-account-text small { font-size: 12px; color: var(--app-text-2); }
.ma-account .ic { width: 16px; height: 16px; color: var(--app-muted); }
.ma-activity {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0 10px;
  padding: 10px 8px 10px 12px; border-radius: 12px;
  background: var(--ma-fill); border: 1px solid var(--ma-line);
}
.ma-act-dot { display: grid; place-items: center; width: 18px; height: 18px; color: var(--app-accent); }
.ma-run-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--app-success); }
.ma-act-text { display: grid; min-width: 0; }
.ma-act-text b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ma-act-text small { font-size: 12px; color: var(--app-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ma-activity .ma-bar { grid-column: 1 / -1; margin-top: 8px; }

/* Main */
.ma-main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ma-caption { position: absolute; top: 0; right: 0; display: flex; z-index: 2; }
.ma-caption i { display: grid; place-items: center; width: 46px; height: 34px; color: #aab5c2; }
.ma-caption .ic { width: 15px; height: 15px; }
.ma-page { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 34px 32px 28px; scrollbar-width: thin; scrollbar-color: #2a323d transparent; }
.ma-h1 { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.ma-h2 { font-size: 19px; font-weight: 700; letter-spacing: -.015em; }
.ma-h3 { font-size: 15px; font-weight: 700; }
.ma-hline { border: 0; border-top: 1px solid var(--ma-line); margin: 0 -32px; }
.ma-muted { color: var(--app-muted); font-size: 12.5px; }

/* Buttons and fields, as the launcher draws them */
.ma-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none;
  height: 38px; padding: 0 14px; border-radius: 10px;
  background: var(--ma-fill); border: 1px solid #232b36;
  font-size: 14px; font-weight: 600; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.ma-btn:hover:not(:disabled) { background: var(--ma-fill-2); }
.ma-btn:disabled { opacity: .45; cursor: default; }
.ma-btn .ic { width: 17px; height: 17px; }
.ma-icon { width: 38px; padding: 0; }
.ma-accent { background: var(--app-accent); border-color: var(--app-accent); color: #04202f; }
.ma-accent:hover:not(:disabled) { background: var(--app-accent-press); }
.ma-ghost { background: transparent; border-color: transparent; color: var(--app-text-2); }
.ma-ghost:hover:not(:disabled) { background: var(--ma-hover); color: var(--app-text); }
.ma-soft { background: var(--app-accent-soft); border-color: transparent; color: var(--app-accent-text); cursor: pointer; }
.ma-soft:hover { background: rgba(92, 200, 255, .18); }
.ma-quiet { background: var(--ma-fill-2); border-color: transparent; }
.ma-danger { background: rgba(248, 113, 113, .12); border-color: transparent; color: var(--app-danger); }
.ma-danger:hover:not(:disabled) { background: rgba(248, 113, 113, .2); }
.ma-danger-solid { background: #dc4b4b; border-color: #dc4b4b; color: #fff; }
.ma-danger-solid:hover { background: #c94141; }
.ma-large { height: 44px; min-width: 140px; padding: 0 20px; border-radius: 12px; font-size: 15px; }
.ma-big { width: 44px; height: 44px; border-radius: 12px; }
.ma-sm { width: 28px; height: 28px; border-radius: 8px; }
.ma-sm .ic { width: 15px; height: 15px; }
.ma-spinbtn .ic, .ma-spin { color: var(--app-accent); animation: spin 1s linear infinite; }
.ma-accent-ic { color: var(--app-accent); }
.ma-link { margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--app-accent-text); justify-self: start; }
.ma-link:hover { text-decoration: underline; }
.ma-search {
  display: flex; align-items: center; gap: 9px;
  width: 260px; height: 38px; padding: 0 12px;
  border-radius: 10px; background: var(--ma-input); border: 1px solid #232b36;
  cursor: text; transition: border-color .15s, box-shadow .15s;
}
.ma-search:focus-within { border-color: var(--app-accent); box-shadow: 0 0 0 3px rgba(92, 200, 255, .15); }
.ma-search .ic { width: 16px; height: 16px; color: var(--app-muted); }
.ma-search input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: 0; font-size: 14px; }
.ma-search input::placeholder, .ma-field input::placeholder { color: var(--app-muted); opacity: 1; }
.ma-field { display: grid; gap: 7px; }
.ma-field > small { font-size: 12.5px; color: var(--app-text-2); font-weight: 500; }
.ma-field input[type="text"], .ma-field select, .ma-res input {
  width: 100%; min-width: 0;
  height: 40px; padding: 0 12px; border-radius: 10px;
  background: var(--ma-input); border: 1px solid #232b36; outline: 0;
  transition: border-color .15s, box-shadow .15s;
}
.ma-field input:focus, .ma-field select:focus, .ma-res input:focus { border-color: var(--app-accent); box-shadow: 0 0 0 3px rgba(92, 200, 255, .15); }
.ma-field select { appearance: auto; color-scheme: dark; }
.ma-mono { font-family: var(--mono) !important; font-size: 12.5px !important; }
.ma-inline { display: flex; gap: 8px; }
.ma-inline input { flex: 1; min-width: 0; }
.ma-error { font-style: normal; font-size: 12.5px; color: var(--app-danger); }
.ma-warn { font-style: normal; font-size: 12.5px; color: #fbbf24; }
.ma-tile { display: grid; place-items: center; flex: none; overflow: hidden; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); }
.ma-tile img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.ma-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: rgba(255, 255, 255, .07); font-size: 12px; font-weight: 600; color: var(--app-text-2); }
.ma-badge-accent { background: rgba(92, 200, 255, .14); color: var(--app-accent-text); }
.ma-bar { position: relative; display: block; height: 5px; border-radius: 5px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.ma-bar i { display: block; height: 100%; border-radius: inherit; background: var(--app-accent); transition: width .25s; }
.ma-thin { height: 3px; }
.ma-indet i { width: 35% !important; animation: ma-indet 1.3s ease-in-out infinite; }
@keyframes ma-indet { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
.ma-switch { position: relative; display: inline-block; flex: none; width: 42px; height: 24px; cursor: pointer; }
.ma-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ma-switch i { position: absolute; inset: 0; border-radius: 12px; background: #2a323d; transition: background .2s; pointer-events: none; }
.ma-switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #c9d2dc; transition: transform .2s, background .2s; }
.ma-switch input:checked + i { background: var(--app-accent); }
.ma-switch input:checked + i::after { transform: translateX(18px); background: #fff; }
.ma-switch input:focus-visible + i { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* The Instances page */
.ma-head { display: flex; align-items: center; gap: 12px; padding-bottom: 24px; padding-right: 96px; }
.ma-head .ma-h1 { margin-right: auto; }
.ma-rows, .ma-crows, .ma-frows { list-style: none; margin: 0; padding: 0; }
.ma-row { position: relative; display: flex; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--ma-line); }
.ma-row:last-child { border-bottom: 0; }
.ma-row-open { position: absolute; inset: 4px -14px; border-radius: 12px; transition: background .15s; }
.ma-row-open:hover { background: var(--ma-hover); }
.ma-row > :not(.ma-row-open) { position: relative; pointer-events: none; }
.ma-row .ma-row-action { pointer-events: auto; }
.ma-row-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ma-row-text b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ma-row-text small { font-size: 12.5px; color: var(--app-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ma-row-status { width: 180px; display: grid; gap: 6px; justify-items: end; }
.ma-row-status small { font-size: 12.5px; color: var(--app-muted); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ma-row-status .ma-bar { width: 100%; }
.ma-row-action .ma-btn { width: 34px; height: 34px; border-radius: 10px; }
.ma-row-action .ic { width: 16px; height: 16px; }
.ma-empty { display: grid; justify-items: center; gap: 12px; max-width: 400px; margin: 48px auto; text-align: center; color: var(--app-text-2); font-size: 14px; }
.ma-empty-tile { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 16px; background: var(--app-accent-soft); color: var(--app-accent); }
.ma-empty-tile .ic { width: 28px; height: 28px; }
.ma-empty-ic { width: 30px !important; height: 30px !important; color: var(--app-muted); }
.ma-empty b { color: var(--app-text); }
.ma-empty-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* An instance */
.ma-dhead { display: flex; align-items: center; gap: 0; padding-right: 96px; }
.ma-dhead > .ma-ghost { margin: 0 8px 0 -8px; }
.ma-dtitle { flex: 1; min-width: 0; display: grid; gap: 7px; margin: 0 16px 0 18px; }
.ma-dtitle .ma-h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ma-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ma-badges small { margin-left: 4px; font-size: 12.5px; color: var(--app-muted); }
.ma-dactions { display: flex; align-items: center; gap: 10px; }
.ma-dprog { margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: var(--ma-fill); border: 1px solid var(--ma-line); display: grid; gap: 9px; }
.ma-prog-line { display: flex; justify-content: space-between; gap: 12px; }
.ma-prog-line b { font-size: 13px; font-weight: 500; }
.ma-prog-line small { font-size: 12.5px; color: var(--app-muted); }
.ma-tabs { display: flex; gap: 24px; margin-top: 22px; }
.ma-tab, .ma-kind {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  height: 40px; font-size: 14.5px; font-weight: 500; color: var(--app-text-2);
}
.ma-tab:hover, .ma-kind:hover { color: var(--app-text); }
.ma-tab.on, .ma-kind.on { color: var(--app-text); font-weight: 600; }
.ma-tab.on::after, .ma-kind.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--app-accent); }
.ma-tabbody { padding-top: 18px; }
.ma-kinds { display: flex; flex-wrap: wrap; gap: 0 22px; }
.ma-kind { height: 34px; font-size: 13.5px; white-space: nowrap; flex: none; }
.ma-kind .ic { width: 15px; height: 15px; }
.ma-kind.on::after { bottom: 0; }
.ma-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 0 16px; }
.ma-summary { flex: 1; min-width: 0; font-size: 12.5px; color: var(--app-muted); }
.ma-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ma-crow { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ma-line); }
.ma-crow:last-child { border-bottom: 0; }
.ma-ctile { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--ma-fill-2); color: var(--app-muted); }
.ma-cname { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ma-cname b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ma-crow .ma-row-text { gap: 4px; }
.ma-skel i, .ma-skel span i { display: block; border-radius: 6px; background: linear-gradient(90deg, #151b22, #1c232c, #151b22); background-size: 200% 100%; animation: ma-shimmer 1.2s linear infinite; }
.ma-skel > i { width: 44px; height: 44px; border-radius: 12px; }
.ma-skel span { display: grid; gap: 8px; }
.ma-skel span i:first-child { width: 180px; height: 13px; }
.ma-skel span i:last-child { width: 260px; height: 10px; }
@keyframes ma-shimmer { from { background-position: 200% 0; } to { background-position: 0 0; } }

/* Logs */
.ma-levels { gap: 0 18px; }
.ma-follow.on { background: var(--app-accent-soft); border-color: transparent; color: var(--app-accent-text); }
.ma-follow:not(.on) { background: transparent; border-color: transparent; color: var(--app-text-2); }
.ma-logsum { display: block; min-height: 18px; margin: -6px 0 10px 2px; font-size: 12.5px; color: var(--app-muted); }
.ma-console {
  height: 330px; margin: 0 -32px; padding: 10px 32px; overflow: auto;
  background: #0f1319; border-top: 1px solid var(--ma-line);
  font: 12.5px/1.6 var(--mono); color: #c9d2dc;
}
.ma-line { white-space: pre-wrap; word-break: break-word; }
.ma-warn.ma-line, .ma-line.ma-warn { color: #fbbf24; }
.ma-line.ma-error { color: #f87171; }
.ma-console-empty { display: grid; justify-items: center; gap: 10px; padding-top: 110px; font-family: var(--font, inherit); font-size: 14px; color: #8c98a6; }
.ma-console-empty .ic { width: 30px; height: 30px; color: #5b6878; }

/* Files */
.ma-files-bar { padding-top: 0; }
.ma-crumbs { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; color: var(--app-text-2); }
.ma-crumbs .ic { width: 13px; height: 13px; color: var(--app-muted); }
.ma-crumbs .on { color: var(--app-text); font-weight: 600; }
.ma-frow { display: flex; align-items: center; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--ma-line); }
.ma-frow:last-child { border-bottom: 0; }
.ma-frow-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 12px 10px; margin-left: -10px; border-radius: 10px; text-align: left; }
.ma-frow-open:hover { background: var(--ma-hover); }
.ma-frow-open .ic { color: #aab5c2; }
.ma-frow-open span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.ma-frow small { font-size: 12.5px; color: var(--app-muted); white-space: nowrap; }
.ma-editor { display: grid; gap: 10px; padding-top: 14px; }
.ma-editor-bar { display: flex; align-items: center; gap: 12px; min-height: 38px; }
.ma-code {
  width: 100%; height: 330px; padding: 12px 14px; resize: vertical;
  border-radius: 12px; background: #0f1319; border: 1px solid var(--ma-line); outline: 0;
  font: 12.5px/1.6 var(--mono); color: #d6dee6; tab-size: 4;
}
.ma-code:focus { border-color: var(--app-accent); }

/* Settings */
.ma-settings { display: grid; gap: 18px; max-width: 760px; }
.ma-saved-line { display: flex; align-items: center; gap: 8px; color: var(--app-muted); }
.ma-saved-line .ic { width: 14px; height: 14px; }
.ma-saved-line small { font-size: 12.5px; }
.ma-saved { font-size: 12.5px; color: var(--app-accent-text); opacity: 0; transition: opacity .2s; }
.ma-saved.on { opacity: 1; }
.ma-sec { display: grid; gap: 16px; }
.ma-sec #maName { max-width: 420px; }
.ma-rule { border: 0; border-top: 1px solid var(--ma-line); margin: 0; }
.ma-icon-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.ma-icon-row label.ma-btn { position: relative; }
.ma-icon-row label.ma-btn:focus-within { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.ma-icon-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.ma-choice { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: #c9d2dc; }
.ma-choice:hover { background: var(--ma-hover); }
.ma-choice.on { background: var(--app-accent-soft); color: var(--app-accent-text); box-shadow: inset 0 0 0 1px rgba(92, 200, 255, .35); }
.ma-setting { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ma-setting > span { display: grid; gap: 2px; }
.ma-setting small { font-size: 12.5px; color: var(--app-text-2); }
.ma-danger-text { color: var(--app-danger); }
.ma-slider { display: flex; align-items: center; gap: 16px; }
.ma-slider input { flex: 1; accent-color: var(--app-accent); }
.ma-slider b { width: 64px; text-align: right; }
.ma-res { display: flex; align-items: center; gap: 10px; }
.ma-res input { width: 140px; }
.ma-res .ic { width: 14px; height: 14px; color: var(--app-muted); }
.ma-foot { font-size: 12.5px; color: var(--app-muted); overflow-wrap: anywhere; }

/* Toasts (bottom right), dialogs and the right-click menu */
.ma-toasts { position: absolute; right: 18px; bottom: 18px; z-index: 5; display: grid; gap: 10px; width: min(360px, calc(100% - 36px)); pointer-events: none; }
.ma-toast {
  pointer-events: auto;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start;
  padding: 14px 10px 14px 14px; border-radius: 14px;
  background: #151b23; border: 1px solid #263040;
  box-shadow: 0 20px 50px -20px #000;
  animation: ma-in .3s var(--ease);
}
.ma-toast.leaving { animation: ma-out .3s var(--ease) forwards; }
@keyframes ma-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes ma-out { to { opacity: 0; transform: translateX(30px); } }
.ma-toast > .ic { width: 20px; height: 20px; margin-top: 1px; }
.ma-toast-success > .ic { color: var(--app-success); }
.ma-toast-info > .ic { color: var(--app-accent); }
.ma-toast-warning > .ic { color: #fbbf24; }
.ma-toast-error > .ic { color: var(--app-danger); }
.ma-toast-text { display: grid; gap: 3px; min-width: 0; }
.ma-toast-text b { font-size: 14px; }
.ma-toast-text small { font-size: 13px; line-height: 1.45; color: var(--app-text-2); }
.ma-overlay { position: absolute; inset: 0; z-index: 6; }
.ma-overlay-dialog { display: grid; place-items: center; padding: 20px; background: rgba(0, 0, 0, .58); animation: ma-fade .2s; overflow-y: auto; }
@keyframes ma-fade { from { opacity: 0; } }
.ma-dialog {
  width: min(640px, 100%); padding: 26px 28px 24px; display: grid; gap: 22px;
  border-radius: 18px; background: #11161d; border: 1px solid #263040;
  box-shadow: 0 40px 90px -30px #000;
  animation: ma-pop .22s var(--ease);
}
@keyframes ma-pop { from { opacity: 0; transform: scale(.97); } }
.ma-dlg-wrap { width: min(640px, 100%); display: grid; }
.ma-dlg-wrap .ma-dialog { width: 100%; }
.ma-confirm { width: min(440px, 100%); gap: 12px; }
.ma-confirm p { color: var(--app-text-2); font-size: 14px; line-height: 1.55; }
.ma-dialog-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.ma-dlg-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.ma-dlg-head > span:nth-child(2) { display: grid; gap: 2px; }
.ma-dlg-head small { font-size: 12.5px; color: var(--app-text-2); }
.ma-dlg-head .ma-ghost { align-self: start; }
.ma-dlg-tile { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--app-accent-soft); color: var(--app-accent); }
.ma-loaders { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.ma-loader { display: grid; justify-items: center; gap: 8px; padding: 12px 4px; border-radius: 12px; border: 1px solid #232b36; background: var(--ma-fill); }
.ma-loader:hover { background: var(--ma-fill-2); }
.ma-loader b { font-size: 13px; }
.ma-loader.on { border-color: var(--app-accent); background: rgba(92, 200, 255, .08); box-shadow: inset 0 0 0 1px var(--app-accent); }
.ma-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.ma-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--app-text-2); }
.ma-check input { width: 16px; height: 16px; accent-color: var(--app-accent); }
.ma-picker { gap: 16px; }
.ma-path { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--app-text-2); }
.ma-path .ic { width: 15px; height: 15px; }
.ma-overlay-menu { background: transparent; }
.ma-menu {
  position: absolute; width: 222px; padding: 6px; display: grid; gap: 2px;
  border-radius: 14px; background: #151b23; border: 1px solid #263040; box-shadow: 0 20px 50px -18px #000;
  animation: ma-pop .15s var(--ease);
}
.ma-menurow { display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 10px; border-radius: 9px; font-size: 14px; text-align: left; }
.ma-menurow:hover:not(:disabled), .ma-menurow:focus-visible { background: var(--ma-hover); }
.ma-menurow:disabled { opacity: .45; }
.ma-menurow .ic { width: 16px; height: 16px; }
.ma-menu-play { color: var(--app-accent-text); font-weight: 600; }
.ma-menu .ma-divider { margin: 4px 6px; }
.ma :focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.ma .ma-row-open:focus-visible { outline-offset: -2px; }

/* Narrower: the sidebar goes compact (icons only), as the launcher's does when dragged narrow */
@media (max-width: 1000px) {
  .ma-win { grid-template-columns: 64px minmax(0, 1fr); }
  .ma-side { padding: 16px 10px; align-items: center; }
  .ma-brand b, .ma-navitem span, .ma-account-text, .ma-account > .ic, .ma-act-text { display: none; }
  .ma-brand { padding: 4px 0 18px; }
  .ma-navitem { width: 44px; padding: 0; justify-content: center; }
  .ma-navitem.on::before { left: -10px; }
  .ma-activity { grid-template-columns: auto; padding: 10px; justify-items: center; }
  .ma-activity .ma-btn, .ma-activity .ma-bar { display: none; }
  .ma-account { padding: 4px; }
  .lab-facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (max-width: 760px) {
  .ma-win { height: 640px; min-height: 0; border-radius: 12px; }
  .ma-page { padding: 44px 16px 20px; }
  .ma-hline, .ma-console { margin-inline: -16px; }
  .ma-console { padding-inline: 16px; height: 300px; }
  .ma-head, .ma-dhead { padding-right: 0; flex-wrap: wrap; }
  .ma-head .ma-h1 { width: 100%; }
  .ma-head .ma-search { width: auto; flex: 1 1 100%; order: 3; }
  .ma-head .ma-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* still read out */
  .ma-head .ma-btn { width: 38px; padding: 0; }
  .ma-dtitle { margin: 0 0 0 12px; flex: 1 1 calc(100% - 120px); }
  .ma-dhead .ma-tile { width: 48px !important; height: 48px !important; }
  .ma-dactions { width: 100%; margin-top: 14px; }
  .ma-dactions .ma-large { flex: 1; }
  .ma-h1 { font-size: 22px; }
  .ma-row-status { width: auto; max-width: 110px; }
  .ma-search { width: 100%; }
  .ma-toolbar .ma-tools { margin-left: 0; }
  .ma-summary { flex: 1 1 100%; order: 3; }
  .ma-tabs { gap: 18px; }
  .ma-kinds { gap: 0 16px; overflow-x: auto; flex-wrap: nowrap; }
  .ma-loaders { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ma-two { grid-template-columns: 1fr; }
  .ma-dialog { padding: 20px; }
  .ma-setting { align-items: flex-start; }
  .ma-res input { width: 110px; }
}
@media (max-width: 480px) {
  .ma-win { grid-template-columns: 52px minmax(0, 1fr); }
  .ma-side { padding: 14px 6px; }
  .ma-navitem { width: 40px; }
  .ma-row-status small { display: none; }
  .ma-row-status .ma-bar { width: 60px; }
  .ma-caption { display: none; }
  .ma-page { padding-top: 22px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  /* The diagram stacks: Modrinth, the request, this PC, with the wires running down */
  .rx-top { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin-inline: auto; }
  .rx-link { padding: 16px 0; justify-items: center; }
  .rx-req { width: 100%; }
  .rx-wire { grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 14px; }
  .rx-line { width: 2px; height: 46px; }
  .rx-line::before { transform-origin: 50% 0; transform: scaleY(var(--t)); background: linear-gradient(rgba(92, 200, 255, .3), var(--app-accent)); }
  .rx-line::after { right: auto; left: 50%; top: auto; bottom: -3px; border: 6px solid transparent; border-top: 9px solid var(--app-accent); border-bottom: 0; transform: translateX(-50%); }
  .rx-line i { left: 50%; top: 0; width: 6px; height: 14px; margin: 0 0 0 -3px; animation-name: rx-drop; }
  .rx-wire-back .rx-line::before { background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .32) 0 6px, transparent 6px 12px); transform-origin: 50% 100%; }
  .rx-wire-back .rx-line::after { left: 50%; top: -3px; bottom: auto; border: 6px solid transparent; border-bottom: 9px solid rgba(255, 255, 255, .45); border-top: 0; transform: translateX(-50%); }
  .faq-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .story-steps { gap: 20px; }
  .story-step p { font-size: 14px; }
}

/* Small screens: the steps become three short tabs with the current one's text under them (the others stay there for
   screen readers, just unseen), and the camera zooms in on what each frame is about (home.js) */
@media (max-width: 760px) {
  .js .story-steps { position: relative; gap: 12px; padding-bottom: calc(4 * 1.5em + 6px); font-size: 14px; }
  .js .story-step h3 { font-size: 14.5px; }
  .js .story-step p {
    position: absolute; left: 0; right: 0; bottom: 0;
    min-height: calc(4 * 1.5em); font-size: 14px; line-height: 1.5;
    opacity: 0; transition: opacity .3s;
  }
  .js .story-step.on p { opacity: 1; }
  .story-inner { gap: 14px; }
  .story-stage { width: 100%; aspect-ratio: 1; max-height: calc(100svh - var(--nav-h) - var(--reserve, 250px)); border-radius: 12px; }
  .story-spot { display: none; } /* the camera already frames what matters */
  .story-note { font-size: 12.5px; }
  /* The launcher's cards stay big enough to read, and the row scrolls sideways */
  .rx-result .win-crop { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--app-border-strong) transparent; }
  .rx-result .crop { min-width: 880px; }
}

@media (max-width: 560px) {
  .hero { padding-top: calc(var(--nav-h) + 40px); }
  .status { padding: 12px 14px 12px 12px; gap: 12px; }
  .status-logo { width: 38px; height: 38px; }
  .faq details p { padding-right: 0; }
}

@media (max-width: 420px) {
  .nav-status { font-size: 12px; padding: 4px 10px 4px 8px; }
  .nav-links a { padding: 0 10px; font-size: 14.5px; }
}

/* Reduced motion: no scroll-linked movement and no transitions; the story still changes frames, instantly */
@media (prefers-reduced-motion: reduce) {
  .hero-shot { transform: none !important; }
  .inst-row { transform: none !important; opacity: 1 !important; }
}