/* ============================================================
   MIXLAR STUDIO v2 / full rebuild
   Standalone: no app shell, no sidebar. Scoped to .mx-* so it
   cannot touch studio.css, which /studio/plugins and the builder
   still depend on.

   Reference points: Elgato Marketplace (content-first shelves of
   real artwork, dark canvas, dense compact rows) and Loupedeck
   (one line of plain text links as the entire navigation).

   DOCUMENTED RULES, held everywhere on this page:
   1. Radius: banners 18px, tiles 14px, brand marks 10px,
      pills and buttons full-round. Nothing else.
   2. Accent: #FF4D14 only. Per-plugin brand colour appears solely
      inside a plugin tile's mark, because that is the product's
      own identity, not our decoration.
   3. Theme: dark, locked. Off-black, never #000.
   4. No line-art glyph icons anywhere. Real brand marks or a
      typographic monogram.
   ============================================================ */

/* ── Theme tokens ─────────────────────────────────────────────
   Dark is the default and the one the design was drawn for. Light
   reuses the palette the rest of Studio already ships (#f5f5f7 /
   #fff / #1d1d1f / #e4e4e4) so the two modes are the same brand,
   not two different sites. The accent is #FF4D14 in both. */
:root {
    /* Light only. The dark palette and the theme toggle were removed:
       mixlar.net is a light site and two themes meant two sets of bugs.
       Names are unchanged so every rule that reads them still works. */
    --mx-canvas:   #F5F5F7;
    --mx-surface:  #FFFFFF;
    --mx-raised:   #FFFFFF;
    --mx-line:     #E4E4E7;
    --mx-line-2:   #CFCFD4;
    --mx-ink:      #1D1D1F;
    --mx-muted:    rgba(29, 29, 31, 0.62);
    --mx-faint:    rgba(29, 29, 31, 0.52);
    --mx-red:      #FF4D14;
    --mx-red-dim:  rgba(255, 77, 20, 0.10);
    --mx-on-red:   #FFFFFF;
    --mx-navbg:    rgba(245, 245, 247, 0.86);
    /* The banner scrim still darkens a photograph, so it stays dark. */
    --mx-scrim-1:  rgba(9, 8, 8, 0.92);
    --mx-scrim-2:  rgba(9, 8, 8, 0.74);
    --mx-scrim-3:  rgba(9, 8, 8, 0.28);
    --mx-scrim-4:  rgba(9, 8, 8, 0.14);
    --mx-glow-a:   rgba(255, 77, 20, 0.16);
    --mx-glow-b:   rgba(255, 140, 60, 0.10);
    --mx-glow-c:   rgba(80, 120, 190, 0.09);
    --mx-shadow:   0 16px 40px rgba(29, 29, 31, 0.12);
    --mx-markbg:   rgba(29, 29, 31, 0.05);

    --mx-r-banner: 18px;
    --mx-r-tile:   14px;
    --mx-r-mark:   10px;

    --mx-ease:     cubic-bezier(0.16, 1, 0.3, 1);
    --mx-shell:    1280px;
    --mx-pad:      clamp(1.15rem, 3.2vw, 2.75rem);

    --mx-display:  'Cy Grotesk Wide', 'Arial Black', 'Helvetica Neue', sans-serif;
    --mx-body:     'Inter', system-ui, -apple-system, sans-serif;
    --mx-mono:     'JetBrains Mono', ui-monospace, monospace;

    color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.mx {
    margin: 0;
    /* The hero glow is deliberately wider than the viewport. clip,
       not hidden: hidden on the body breaks position:sticky on the
       nav in some engines. */
    overflow-x: clip;
    background: var(--mx-canvas);
    color: var(--mx-ink);
    font-family: var(--mx-body);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.mx a { color: inherit; }

.mx-shell {
    max-width: var(--mx-shell);
    margin: 0 auto;
    padding-inline: var(--mx-pad);
}

/* Screen-reader-only, and the skip link that becomes visible on
   focus. The old shell had neither. */
.mx-sr {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
}
.mx .mx-skip {
    position: absolute; left: 50%; top: 0;
    transform: translate(-50%, -120%);
    z-index: 100;
    background: var(--mx-red); color: var(--mx-on-red);
    font-size: 0.85rem; font-weight: 600;
    padding: 0.6rem 1.1rem; border-radius: 0 0 10px 10px;
    text-decoration: none;
}
.mx-skip:focus { transform: translate(-50%, 0); }

/* ─── Navigation. One line, plain text, no icons and no
   sub-labels. 60px, well inside the 80px cap. ─── */
.mx-nav {
    position: sticky; top: 0; z-index: 50;
    height: 60px;
    display: flex; align-items: center; gap: 1.6rem;
    background: var(--mx-navbg);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--mx-line);
}
@supports not (backdrop-filter: blur(1px)) {
    .mx-nav { background: var(--mx-canvas); }
}

/* Theme switch never animates: a 300ms cross-fade of every colour
   on the page reads as a glitch, not a transition. */
.mx-nav__inner {
    max-width: var(--mx-shell);
    margin: 0 auto;
    padding-inline: var(--mx-pad);
    width: 100%;
    display: flex; align-items: center; gap: 1.6rem;
}
.mx-brand {
    display: flex; align-items: baseline; gap: 0.42rem;
    text-decoration: none; flex-shrink: 0;
}
.mx-brand__word {
    font-family: var(--mx-display);
    font-size: 1.12rem; font-weight: 700; letter-spacing: -0.025em;
    color: var(--mx-ink);
}
.mx-brand__tag {
    font-family: var(--mx-mono);
    font-size: 0.63rem; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--mx-red);
}

.mx-nav__links { display: flex; align-items: center; gap: 1.5rem; }
.mx-nav__link {
    font-size: 0.87rem; font-weight: 500;
    color: var(--mx-muted); text-decoration: none;
    padding: 0.35rem 0;
    transition: color 0.15s ease;
    white-space: nowrap;
}
.mx-nav__link:hover { color: var(--mx-ink); }
.mx-nav__link[aria-current="page"] {
    color: var(--mx-ink);
    box-shadow: inset 0 -2px 0 var(--mx-red);
}
.mx-nav__end { margin-left: auto; display: flex; align-items: center; gap: 0.9rem; }

/* ─── Buttons ─── */
.mx-btn {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--mx-body);
    font-size: 0.855rem; font-weight: 600;
    text-decoration: none; white-space: nowrap;
    border: 1px solid transparent; border-radius: 999px;
    padding: 0.55rem 1.15rem;
    cursor: pointer;
    transition: background-color 0.16s ease, border-color 0.16s ease,
                color 0.16s ease, transform 0.12s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(255, 77, 20, 0.16);
}
.mx-btn:active { transform: scale(0.98); }
.mx .mx-btn--solid { background: var(--mx-red); color: var(--mx-on-red); }
.mx-btn--solid:hover { filter: brightness(1.12); }
.mx-btn--line {
    background: transparent; color: var(--mx-ink);
    border-color: var(--mx-line-2);
}
.mx-btn--line:hover { border-color: rgba(255, 255, 255, 0.34); }
.mx-btn:focus-visible { outline: 2px solid var(--mx-red); outline-offset: 3px; }

/* ─── Page head. Compact on purpose: the catalog is the page,
   not a headline about the catalog. ─── */
.mx-head { padding: 2.9rem 0 1.7rem; }
.mx-head__title {
    font-family: var(--mx-display);
    font-size: clamp(1.85rem, 3.4vw, 2.6rem);
    font-weight: 700; letter-spacing: -0.035em; line-height: 1.06;
    text-wrap: balance;
    margin: 0 0 0.5rem;
}
.mx-head__sub {
    font-size: 0.95rem; color: var(--mx-muted);
    max-width: 56ch; margin: 0;
}

/* ─── Two banners. These carry the page's weight, so they carry
   the real photography rather than a headline over a gradient. ─── */
.mx-banners {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 14px;
    margin-bottom: 3.4rem;
}
.mx-banner {
    position: relative;
    display: flex; flex-direction: column; justify-content: flex-end;
    min-height: 340px;
    padding: 1.7rem;
    border: 1px solid var(--mx-line);
    border-radius: var(--mx-r-banner);
    overflow: hidden;
    text-decoration: none;
    isolation: isolate;
    transition: border-color 0.25s var(--mx-ease), transform 0.25s var(--mx-ease);
}
.mx-banner:hover { border-color: var(--mx-line-2); transform: translateY(-2px); }
.mx-banner:focus-visible { outline: 2px solid var(--mx-red); outline-offset: 3px; }
.mx-banner__img {
    position: absolute; inset: 0; z-index: -2;
    width: 100%; height: 100%;
    object-fit: cover; object-position: var(--mx-crop, center 32%);
    transition: transform 0.6s var(--mx-ease);
}
.mx-banner:hover .mx-banner__img { transform: scale(1.03); }
/* Scrim so the copy keeps AA contrast over any part of the photo. */
.mx-banner::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(to top,
        var(--mx-scrim-1) 0%,
        var(--mx-scrim-2) 34%,
        var(--mx-scrim-3) 66%,
        var(--mx-scrim-4) 100%);
}
.mx-banner__kicker {
    display: inline-flex; align-items: center; gap: 0.4rem;
    align-self: flex-start;
    font-family: var(--mx-mono);
    font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--mx-red);
    /* Solid dark backing, not a red tint: the kicker sits on top of
       a photograph, and over a bright frame red-on-red vanished. */
    background: rgba(11, 10, 9, 0.78);
    border: 1px solid rgba(255, 77, 20, 0.38);
    border-radius: 999px; padding: 4px 10px;
    margin-bottom: 0.85rem;
}
.mx-banner__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--mx-red); }
.mx-banner__title {
    font-family: var(--mx-display);
    font-size: clamp(1.35rem, 2.2vw, 1.85rem);
    font-weight: 700; letter-spacing: -0.03em; line-height: 1.1;
    text-wrap: balance;
    margin: 0 0 0.55rem;
}
.mx-banner__body {
    font-size: 0.885rem; line-height: 1.6;
    color: rgba(242, 239, 237, 0.76);
    max-width: 44ch; margin: 0 0 1.1rem;
}
.mx-banner__cta {
    align-self: flex-start;
    font-size: 0.83rem; font-weight: 600; color: var(--mx-ink);
    border-bottom: 1px solid var(--mx-red);
    padding-bottom: 2px;
}

/* ─── Shelf. Elgato's move: a plain heading, then the catalog
   scrolling sideways. No cards linking to other pages. ─── */
.mx-sec { margin-bottom: 3.4rem; }
.mx-sec__head {
    display: flex; align-items: center; gap: 1rem;
    margin-bottom: 1.05rem;
}
.mx-sec__title {
    font-family: var(--mx-display);
    font-size: 1.16rem; font-weight: 700; letter-spacing: -0.028em;
    margin: 0;
}
.mx-sec__count {
    font-family: var(--mx-mono);
    font-size: 0.68rem; font-weight: 600;
    color: var(--mx-faint);
    font-variant-numeric: tabular-nums;
}
.mx-sec__tools { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.mx-sec__link {
    font-size: 0.8rem; font-weight: 600; color: var(--mx-muted);
    text-decoration: none; white-space: nowrap;
}
.mx-sec__link:hover { color: var(--mx-red); }

.mx-arrow {
    width: 30px; height: 30px; flex-shrink: 0;
    display: grid; place-items: center;
    background: transparent; color: var(--mx-ink);
    border: 1px solid var(--mx-line-2); border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.15s ease, opacity 0.15s ease;
    touch-action: manipulation;
}
.mx-arrow:hover:not(:disabled) { background: var(--mx-raised); }
.mx-arrow:disabled { opacity: 0.28; cursor: default; }
.mx-arrow:focus-visible { outline: 2px solid var(--mx-red); outline-offset: 2px; }

.mx-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 214px;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    padding: 2px 2px 14px;
    margin-inline: -2px;
    scrollbar-width: none;
}
.mx-rail::-webkit-scrollbar { display: none; }
.mx-rail:focus-visible { outline: 2px solid var(--mx-red); outline-offset: 4px; border-radius: var(--mx-r-tile); }
@media (prefers-reduced-motion: reduce) { .mx-rail { scroll-behavior: auto; } }

/* ─── Grid variant for the short list. Ten items fit, so they do
   not need to scroll, and a second identical shelf would just be
   the same layout twice. ─── */
.mx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
    gap: 12px;
}

/* ─── Plugin tile ─── */
.mx-tile {
    scroll-snap-align: start;
    display: flex; flex-direction: column; gap: 0.55rem;
    background: var(--mx-surface);
    border: 1px solid var(--mx-line);
    border-radius: var(--mx-r-tile);
    padding: 1rem 1.05rem 1.05rem;
    text-decoration: none;
    min-width: 0;
    transition: background-color 0.18s ease, border-color 0.18s ease,
                transform 0.18s var(--mx-ease);
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(255, 77, 20, 0.16);
}
.mx-tile:hover {
    background: var(--mx-raised);
    border-color: var(--mx-line-2);
    transform: translateY(-2px);
}
.mx-tile:focus-visible { outline: 2px solid var(--mx-red); outline-offset: 2px; }

/* The mark. Real brand logo where the plugin controls a real
   product; a typographic monogram in the plugin's own registry
   colour otherwise. No generic glyphs either way. */
.mx-mark {
    width: 38px; height: 38px; flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: var(--mx-r-mark);
    background: var(--mx-markbg);
    border: 1px solid var(--mx-line);
    overflow: hidden;
}
.mx-mark img { width: 21px; height: 21px; display: block; }
.mx-mark--type {
    font-family: var(--mx-display);
    font-size: 0.95rem; font-weight: 700; letter-spacing: -0.03em;
    line-height: 1;
}

.mx-tile__name {
    font-size: 0.875rem; font-weight: 600; letter-spacing: -0.012em;
    margin: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mx-tile__desc {
    font-size: 0.755rem; line-height: 1.5; color: var(--mx-muted);
    margin: 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
}
.mx-tile__foot {
    margin-top: auto; padding-top: 0.3rem;
    font-family: var(--mx-mono);
    font-size: 0.575rem; font-weight: 600; letter-spacing: 0.07em;
    text-transform: uppercase; color: var(--mx-faint);
}

.mx-empty {
    border: 1px dashed var(--mx-line-2);
    border-radius: var(--mx-r-tile);
    padding: 2.6rem 1.5rem; text-align: center;
    font-size: 0.88rem; color: var(--mx-muted);
}
.mx-empty a { color: var(--mx-red); }

/* ─── Footer ─── */
.mx-foot {
    border-top: 1px solid var(--mx-line);
    margin-top: 1rem;
    padding: 2.6rem 0 3.2rem;
}
.mx-foot__cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.6rem 2rem;
}
.mx-foot__h {
    font-family: var(--mx-mono);
    font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--mx-faint);
    margin: 0 0 0.75rem;
}
.mx-foot__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.42rem; }
.mx-foot__list a {
    font-size: 0.83rem; color: var(--mx-muted); text-decoration: none;
}
.mx-foot__list a:hover { color: var(--mx-ink); }
.mx-foot__list a:focus-visible { outline: 2px solid var(--mx-red); outline-offset: 2px; border-radius: 3px; }
.mx-foot__base {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    border-top: 1px solid var(--mx-line);
    margin-top: 2.2rem; padding-top: 1.3rem;
    font-size: 0.755rem; color: var(--mx-faint);
}

/* ─── Motion. Low intensity: the only thing worth animating is
   the order in which the page resolves. ─── */
@media (prefers-reduced-motion: no-preference) {
    @keyframes mx-rise {
        from { opacity: 0; transform: translateY(12px); }
        to   { opacity: 1; transform: none; }
    }
    .mx-head, .mx-banner, .mx-sec {
        animation: mx-rise 0.55s var(--mx-ease) both;
        animation-delay: calc(var(--i, 0) * 60ms);
    }
}
@media (prefers-reduced-motion: reduce) {
    .mx-banner, .mx-tile, .mx-btn, .mx-banner__img { transition: none; }
    .mx-banner:hover, .mx-tile:hover { transform: none; }
    .mx-banner:hover .mx-banner__img { transform: none; }
    .mx-btn:active { transform: none; }
}

/* ─── Responsive, declared per breakpoint ─── */

@media (max-width: 860px) {
    .mx-banners { grid-template-columns: 1fr; }
    .mx-banner { min-height: 290px; }
    .mx-foot__cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
    .mx-nav { height: 56px; }
    .mx-nav__links { gap: 1.05rem; }
    .mx-nav__link { font-size: 0.82rem; }
    /* The nav must stay on one line: the button label is the first
       thing to go, not the links. */
    .mx-nav__end .mx-btn { display: none; }
    .mx-head { padding: 2rem 0 1.3rem; }
    .mx-rail { grid-auto-columns: 178px; }
    .mx-banner { min-height: 250px; padding: 1.3rem; }
    .mx-sec { margin-bottom: 2.5rem; }
}
@media (max-width: 460px) {
    .mx-grid { grid-template-columns: 1fr; }
}

/* ─── Toolbar: search plus filter chips. Plugins page. ─── */
.mx-toolbar {
    display: flex; align-items: center; gap: 0.75rem 1.1rem;
    flex-wrap: wrap;
    margin-bottom: 1.4rem;
}
.mx-field { position: relative; flex: 0 1 260px; min-width: 190px; }
.mx-field input {
    width: 100%;
    font-family: var(--mx-body); font-size: 0.85rem;
    color: var(--mx-ink);
    background: var(--mx-surface);
    border: 1px solid var(--mx-line-2);
    border-radius: 999px;
    padding: 0.55rem 1rem;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* Placeholder must clear AA against --mx-surface, so it sits at the
   same weight as body-muted rather than a decorative grey. */
.mx-field input::placeholder { color: var(--mx-muted); }
.mx-field input:focus-visible {
    border-color: var(--mx-red);
    box-shadow: 0 0 0 3px rgba(255, 77, 20, 0.2);
}
.mx-field input::-webkit-search-cancel-button { filter: invert(1) opacity(0.5); }

.mx-chips { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.mx-chip {
    display: inline-flex; align-items: center; gap: 0.42rem;
    font-family: var(--mx-body); font-size: 0.8rem; font-weight: 500;
    color: var(--mx-muted);
    background: transparent;
    border: 1px solid var(--mx-line-2); border-radius: 999px;
    padding: 0.44rem 0.9rem;
    cursor: pointer; white-space: nowrap;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
    touch-action: manipulation;
}
.mx-chip span {
    font-family: var(--mx-mono); font-size: 0.66rem;
    font-variant-numeric: tabular-nums;
    color: var(--mx-faint);
}
.mx-chip:hover { color: var(--mx-ink); border-color: rgba(255, 255, 255, 0.3); }
.mx-chip.is-on {
    color: var(--mx-on-red); background: var(--mx-red); border-color: var(--mx-red);
}
.mx-chip.is-on span { color: rgba(255, 255, 255, 0.72); }
.mx-chip:focus-visible { outline: 2px solid var(--mx-red); outline-offset: 2px; }

.mx-result {
    font-family: var(--mx-mono); font-size: 0.68rem;
    color: var(--mx-faint);
    margin: 0 0 0.9rem; min-height: 1em;
}
.mx-linkbtn {
    font: inherit; color: var(--mx-red);
    background: none; border: 0; padding: 0;
    text-decoration: underline; cursor: pointer;
}
.mx-linkbtn:focus-visible { outline: 2px solid var(--mx-red); outline-offset: 2px; }

/* Static tile: a container, not a link, so the download is a
   deliberate click rather than anywhere on the card. */
.mx-tile--static { cursor: default; }
.mx-tile--static:hover { transform: none; background: var(--mx-surface); border-color: var(--mx-line); }
.mx-tile--static:hover .mx-tile__get { border-color: var(--mx-red); }
.mx-tile__row {
    margin-top: auto; padding-top: 0.45rem;
    display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
}
.mx-tile__row .mx-tile__foot { margin-top: 0; padding-top: 0; }
.mx-tile__get {
    font-size: 0.735rem; font-weight: 600; color: var(--mx-ink);
    text-decoration: none;
    border: 1px solid var(--mx-line-2); border-radius: 999px;
    padding: 0.24rem 0.7rem;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    touch-action: manipulation;
}
.mx .mx-tile__get:hover { background: var(--mx-red); border-color: var(--mx-red); color: var(--mx-on-red); }
.mx-tile__get:focus-visible { outline: 2px solid var(--mx-red); outline-offset: 2px; }
.mx-tile[hidden] { display: none; }

/* ─── Note row. For a thing that does not exist yet: it gets a
   line, not a card the same shape as the working tools. ─── */
.mx-note {
    display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
    border: 1px dashed var(--mx-line-2);
    border-radius: var(--mx-r-tile);
    padding: 1.05rem 1.3rem;
}
.mx-note__title { font-size: 0.92rem; font-weight: 600; margin: 0 0 0.22rem; }
.mx-note__body { font-size: 0.815rem; line-height: 1.55; color: var(--mx-muted); margin: 0; max-width: 62ch; }
.mx-note__tag {
    margin-left: auto; flex-shrink: 0;
    font-family: var(--mx-mono);
    font-size: 0.6rem; font-weight: 700; letter-spacing: 0.09em;
    text-transform: uppercase; color: var(--mx-faint);
    border: 1px solid var(--mx-line); border-radius: 999px;
    padding: 3px 10px;
}

/* ─── Footer rail of plain text links. No cards, no icons. ─── */
.mx-next {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 2.2rem;
    border-top: 1px solid var(--mx-line);
    padding-top: 1.3rem;
}
.mx-next__item {
    display: flex; flex-direction: column; gap: 0.26rem;
    text-decoration: none; padding: 0.35rem 0;
    touch-action: manipulation;
}
.mx-next__label { font-size: 0.865rem; font-weight: 600; color: var(--mx-ink); }
.mx-next__item:hover .mx-next__label { color: var(--mx-red); }
.mx-next__hint { font-size: 0.755rem; line-height: 1.5; color: var(--mx-muted); }
.mx-next__item:focus-visible { outline: 2px solid var(--mx-red); outline-offset: 3px; border-radius: 4px; }

@media (max-width: 860px) {
    .mx-next { grid-template-columns: repeat(2, 1fr); gap: 1rem 1.8rem; }
}
@media (max-width: 620px) {
    .mx-next { grid-template-columns: 1fr; gap: 0.85rem; }
    .mx-toolbar { gap: 0.7rem; }
    .mx-field { flex-basis: 100%; }
    .mx-note__tag { margin-left: 0; }
}

/* ============================================================
   Landing layout (Studio overview v3)
   Shape borrowed from the Elgato Marketplace home page: the copy
   does the work up top, and the catalog sits at the bottom.
   ============================================================ */

/* ─── Hero. One soft wash of colour, which is the only place on
   the page colour appears outside the plugin marks. Kept low and
   warm: a violet mesh here would be the stock AI-landing move. ─── */
.mx-hero {
    position: relative;
    isolation: isolate;
    text-align: center;
    padding: 4.6rem 0 3.9rem;
}
.mx-hero::before {
    content: "";
    position: absolute; z-index: -1;
    left: 50%; top: -170px;
    width: min(1180px, 132vw); height: 620px;
    transform: translateX(-50%);
    pointer-events: none;
    background:
        radial-gradient(46% 52% at 32% 44%, var(--mx-glow-a), transparent 70%),
        radial-gradient(40% 46% at 68% 36%, var(--mx-glow-b), transparent 72%),
        radial-gradient(52% 48% at 52% 62%, var(--mx-glow-c), transparent 74%);
    filter: blur(28px);
}
.mx-hero__title {
    font-family: var(--mx-display);
    font-size: clamp(2.05rem, 4.4vw, 3.15rem);
    font-weight: 700; letter-spacing: -0.037em; line-height: 1.05;
    text-wrap: balance;
    max-width: 17ch;
    margin: 0 auto 0.95rem;
}
.mx-hero__sub {
    font-size: 1.02rem; line-height: 1.62;
    color: var(--mx-muted);
    max-width: 56ch;
    margin: 0 auto 1.7rem;
    text-wrap: pretty;
}
.mx-hero__actions { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }

/* ─── Split editorial. Photo one side, copy the other, mirrored on
   the second one. Capped at two in a row: a third would be the
   zigzag that every template ships. ─── */
.mx-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(1.6rem, 4vw, 3.6rem);
    margin-bottom: 4.2rem;
}
.mx-split__media {
    position: relative;
    border-radius: var(--mx-r-banner);
    overflow: hidden;
    background: var(--mx-surface);
    border: 1px solid var(--mx-line);
    aspect-ratio: 4 / 3;
}
.mx-split__media img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: var(--mx-crop, center 38%);
    display: block;
}
.mx-split--flip .mx-split__media { order: 2; }
.mx-eyebrow {
    display: block;
    font-family: var(--mx-mono);
    font-size: 0.63rem; font-weight: 700; letter-spacing: 0.13em;
    text-transform: uppercase; color: var(--mx-red);
    margin-bottom: 0.72rem;
}
.mx-split__title {
    font-family: var(--mx-display);
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    font-weight: 700; letter-spacing: -0.032em; line-height: 1.1;
    text-wrap: balance;
    margin: 0 0 0.8rem;
}
.mx-split__body {
    font-size: 0.925rem; line-height: 1.65;
    color: var(--mx-muted);
    max-width: 48ch;
    margin: 0 0 1.4rem;
}

/* ─── Accordion. Native details/summary, so keyboard and screen
   reader support come for free and there is no JS to break. ─── */
.mx-who {
    display: grid;
    grid-template-columns: 1fr 0.85fr;
    align-items: start;
    gap: clamp(1.6rem, 4vw, 3.4rem);
}
.mx-acc { display: grid; gap: 0.55rem; }
.mx-acc__item {
    background: var(--mx-surface);
    border: 1px solid var(--mx-line);
    border-radius: var(--mx-r-tile);
    overflow: hidden;
    transition: border-color 0.18s ease;
}
.mx-acc__item[open] { border-color: var(--mx-line-2); }
.mx-acc__item summary {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.95rem 1.15rem;
    font-size: 0.93rem; font-weight: 600;
    cursor: pointer;
    list-style: none;
    touch-action: manipulation;
}
.mx-acc__item summary::-webkit-details-marker { display: none; }
.mx-acc__item summary:focus-visible { outline: 2px solid var(--mx-red); outline-offset: -2px; border-radius: var(--mx-r-tile); }
.mx-acc__chev {
    flex-shrink: 0; color: var(--mx-faint);
    font-size: 0.8rem; line-height: 1;
    transition: transform 0.2s var(--mx-ease);
}
.mx-acc__item[open] .mx-acc__chev { transform: rotate(180deg); }
.mx-acc__body { padding: 0 1.15rem 1.15rem; }
.mx-acc__body p {
    font-size: 0.845rem; line-height: 1.6; color: var(--mx-muted);
    margin: 0 0 0.85rem; max-width: 52ch;
}
.mx-acc__chips { display: flex; flex-wrap: wrap; gap: 0.38rem; }
.mx-pill {
    display: inline-flex; align-items: center;
    font-family: var(--mx-body);
    font-size: 0.735rem; font-weight: 500;
    color: var(--mx-muted);
    border: 1px solid var(--mx-line-2);
    border-radius: 999px;
    padding: 0.24rem 0.68rem;
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
    touch-action: manipulation;
}
.mx-pill:hover { color: var(--mx-ink); border-color: rgba(255, 255, 255, 0.32); }
.mx-pill:focus-visible { outline: 2px solid var(--mx-red); outline-offset: 2px; }

.mx-who__media {
    border-radius: var(--mx-r-banner);
    overflow: hidden;
    border: 1px solid var(--mx-line);
    background: var(--mx-surface);
    aspect-ratio: 3 / 4;
}
.mx-who__media img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: var(--mx-crop, center 40%);
    display: block;
}

/* ─── Closing panel ─── */
.mx-cta {
    position: relative;
    isolation: isolate;
    text-align: center;
    background: var(--mx-surface);
    border: 1px solid var(--mx-line);
    border-radius: var(--mx-r-banner);
    padding: 3.4rem 1.5rem;
    margin-bottom: 1rem;
    overflow: hidden;
}
.mx-cta::before {
    content: "";
    position: absolute; z-index: -1;
    inset: auto -10% -70% -10%;
    height: 300px;
    background: radial-gradient(50% 60% at 50% 50%, var(--mx-glow-a), transparent 72%);
    filter: blur(20px);
    pointer-events: none;
}
.mx-cta__title {
    font-family: var(--mx-display);
    font-size: clamp(1.5rem, 3vw, 2.15rem);
    font-weight: 700; letter-spacing: -0.033em; line-height: 1.1;
    text-wrap: balance;
    margin: 0 0 0.7rem;
}
.mx-cta__body {
    font-size: 0.92rem; color: var(--mx-muted);
    max-width: 46ch; margin: 0 auto 1.5rem;
}

@media (prefers-reduced-motion: no-preference) {
    .mx-hero, .mx-split, .mx-who, .mx-cta {
        animation: mx-rise 0.55s var(--mx-ease) both;
        animation-delay: calc(var(--i, 0) * 60ms);
    }
}

@media (max-width: 860px) {
    .mx-split, .mx-who { grid-template-columns: 1fr; gap: 1.5rem; }
    /* Photo above copy on every split once stacked, including the
       mirrored one, so the reading order stays consistent. */
    .mx-split--flip .mx-split__media { order: 0; }
    .mx-who__media { aspect-ratio: 16 / 10; order: -1; }
    .mx-hero { padding: 3.2rem 0 2.8rem; }
    .mx-split { margin-bottom: 3rem; }
}

/* ─── Scroll reveal ───────────────────────────────────────────
   Replaces the old load-time cascade. Everything below the fold
   used to animate while the reader was still on the hero, which
   meant the motion was over before it could be seen. Each block
   now arrives as it enters the viewport, driven by
   IntersectionObserver rather than a scroll listener. ─── */
@media (prefers-reduced-motion: no-preference) {
    :root.mx-js [data-reveal] {
        opacity: 0;
        transform: translateY(16px);
        transition: opacity 0.62s var(--mx-ease), transform 0.62s var(--mx-ease);
        transition-delay: calc(var(--i, 0) * 55ms);
    }
    :root.mx-js [data-reveal].is-in { opacity: 1; transform: none; }

    /* The old cascade fired on load for everything at once. Keep it
       only for what is actually above the fold. */
    .mx-head, .mx-hero, .mx-banner, .mx-sec, .mx-split, .mx-who, .mx-cta {
        animation: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; }
}

/* Tiles inside a revealed shelf stagger against their own index. */
@media (prefers-reduced-motion: no-preference) {
    :root.mx-js [data-reveal] .mx-tile {
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.5s var(--mx-ease), transform 0.5s var(--mx-ease);
        transition-delay: calc(var(--t, 0) * 34ms);
    }
    :root.mx-js [data-reveal].is-in .mx-tile { opacity: 1; transform: none; }
}

/* ─── Plugin mark: real registry icon ─────────────────────────
   The registry ships a 512px icon.png per plugin. Served through
   studio/icon.php, which downscales and caches, because 29 full
   size PNGs behind 21px tiles is about 1.5MB of waste. ─── */
.mx-mark img { width: 21px; height: 21px; display: block; border-radius: 4px; }
.mx-mark--art { background: transparent; }
.mx-mark--art img { width: 100%; height: 100%; border-radius: 0; }

/* ─── Plugin detail page ─── */
.mx-crumb {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.78rem; color: var(--mx-faint);
    padding: 1.6rem 0 1.2rem;
}
.mx-crumb a { color: var(--mx-muted); text-decoration: none; }
.mx-crumb a:hover { color: var(--mx-ink); }

.mx-ph {
    display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
    padding-bottom: 1.5rem;
}
.mx-ph__mark .mx-mark {
    width: 84px; height: 84px; border-radius: 18px;
}
.mx-ph__mark .mx-mark--type { font-size: 2rem; }
.mx-ph__id { min-width: 0; flex: 1; }
.mx-ph__cat {
    font-size: 0.78rem; color: var(--mx-muted); margin: 0 0 0.15rem;
}
.mx-ph__name {
    font-family: var(--mx-display);
    font-size: clamp(1.6rem, 3.2vw, 2.3rem);
    font-weight: 700; letter-spacing: -0.033em; line-height: 1.08;
    margin: 0 0 0.2rem;
}
.mx-ph__by { font-size: 0.85rem; color: var(--mx-muted); margin: 0; }
.mx-ph__act { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

.mx-iconbtn {
    width: 36px; height: 36px; flex-shrink: 0;
    display: grid; place-items: center;
    background: transparent; color: var(--mx-ink);
    border: 1px solid var(--mx-line-2); border-radius: 999px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
    touch-action: manipulation;
}
.mx-iconbtn:hover { background: var(--mx-surface); }
.mx-iconbtn:focus-visible { outline: 2px solid var(--mx-red); outline-offset: 2px; }
.mx-iconbtn.is-done { color: var(--mx-red); border-color: var(--mx-red); }

.mx-note--tight {
    padding: 0.75rem 1rem;
    margin: 0 0 1.9rem;
    font-size: 0.8rem; line-height: 1.55;
    color: var(--mx-muted);
}
.mx-note--tight strong { color: var(--mx-ink); font-weight: 600; }
.mx-note--tight code {
    font-family: var(--mx-mono); font-size: 0.92em;
    background: var(--mx-markbg); border-radius: 4px; padding: 1px 5px;
}

.mx-pbody {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: clamp(1.6rem, 4vw, 3rem);
    align-items: start;
    margin-bottom: 3.4rem;
}
.mx-prose p {
    font-size: 0.94rem; line-height: 1.68; color: var(--mx-muted);
    max-width: 62ch; margin: 0.9rem 0 0;
}
.mx-steps {
    margin: 0.9rem 0 0; padding-left: 1.2rem;
    display: grid; gap: 0.5rem;
    font-size: 0.9rem; line-height: 1.6; color: var(--mx-muted);
    max-width: 60ch;
}
.mx-steps strong { color: var(--mx-ink); font-weight: 600; }

.mx-pside {
    background: var(--mx-surface);
    border: 1px solid var(--mx-line);
    border-radius: var(--mx-r-tile);
    padding: 1.2rem 1.3rem 1.3rem;
    position: sticky; top: 76px;
}
.mx-spec {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.55rem 1rem;
    margin: 1rem 0 0;
    font-size: 0.83rem;
}
.mx-spec dt { color: var(--mx-muted); }
.mx-spec dd { margin: 0; color: var(--mx-ink); text-align: right; }
.mx-spec dd a { color: var(--mx-red); text-decoration: none; }
.mx-spec dd a:hover { text-decoration: underline; }
.mx-sha { font-family: var(--mx-mono); font-size: 0.76rem; color: var(--mx-muted); }
.mx-spec__note {
    font-size: 0.735rem; line-height: 1.5; color: var(--mx-faint);
    border-top: 1px solid var(--mx-line);
    margin: 1.1rem 0 0; padding-top: 0.85rem;
}

@media (max-width: 860px) {
    .mx-pbody { grid-template-columns: 1fr; }
    .mx-pside { position: static; }
    .mx-spec dd { text-align: left; }
}
@media (max-width: 620px) {
    .mx-ph { gap: 0.9rem; }
    .mx-ph__mark .mx-mark { width: 64px; height: 64px; border-radius: 14px; }
    .mx-ph__act { width: 100%; }
}

/* ─── Screenshot gallery ──────────────────────────────────────
   A scroll-snap strip rather than a JS carousel: it works with a
   trackpad, a touch swipe, the keyboard and the arrow buttons
   without any of them being special-cased. ─── */
.mx-gal { position: relative; margin: 0 0 2rem; }
.mx-gal__demo {
    font-size: 0.74rem; color: var(--mx-faint);
    margin: 0 0 0.5rem;
}
.mx-gal__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 46%);
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    padding-bottom: 2px;
    scrollbar-width: none;
}
.mx-gal__track::-webkit-scrollbar { display: none; }
.mx-gal__track:focus-visible { outline: 2px solid var(--mx-red); outline-offset: 4px; border-radius: var(--mx-r-banner); }
@media (prefers-reduced-motion: reduce) { .mx-gal__track { scroll-behavior: auto; } }

.mx-gal__item {
    scroll-snap-align: start;
    margin: 0;
    border: 1px solid var(--mx-line);
    border-radius: var(--mx-r-banner);
    overflow: hidden;
    background: var(--mx-surface);
    aspect-ratio: 16 / 10;
}
.mx-gal__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mx-gal__nav {
    position: absolute; top: -2.6rem; right: 0;
    display: flex; gap: 0.4rem;
}

@media (max-width: 700px) {
    .mx-gal__track { grid-auto-columns: minmax(0, 82%); }
    .mx-gal__nav { position: static; justify-content: flex-end; margin-top: 0.6rem; }
}

/* OS list in the details panel */
.mx-oslist { display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: flex-end; }
.mx-oslist span {
    font-size: 0.755rem;
    border: 1px solid var(--mx-line-2); border-radius: 999px;
    padding: 1px 8px;
}
@media (max-width: 860px) { .mx-oslist { justify-content: flex-start; } }

/* ─── Nav on small screens ────────────────────────────────────
   At 390px the brand plus four nowrap links plus the toggle come to
   roughly 427px against ~354px of usable width, so the bar overflowed
   and the last link was unreachable.

   The links become their own scrollable lane instead. Brand and
   controls stay pinned, nothing is hidden behind a hamburger, and it
   needs no JS. `min-width: 0` is the part that actually matters: a
   flex child will not shrink below its content without it, which is
   why the row overflowed rather than scrolled. ─── */
.mx-nav__links {
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
.mx-nav__links::-webkit-scrollbar { display: none; }

/* Notch clearance: the bar is full-bleed and sticky. */
.mx-nav__inner {
    padding-left: max(var(--mx-pad), env(safe-area-inset-left));
    padding-right: max(var(--mx-pad), env(safe-area-inset-right));
}

@media (max-width: 760px) {
    .mx-nav__inner { gap: 0.85rem; }
    .mx-nav__links { gap: 1.05rem; flex: 1 1 auto; }
    /* The underline marker is drawn with an inset shadow, which a
       scrolling container would clip at the edges. */
    .mx-nav__link { padding-bottom: 0.3rem; }
}
@media (max-width: 480px) {
    /* "Mixlar Studio" costs ~50px of a 354px bar and the page title
       already says which section you are in. */
    .mx-brand__tag { display: none; }
    .mx-nav__inner { gap: 0.7rem; }
    .mx-nav__links { gap: 0.9rem; }
}

/* ─── Library ─── */
.mx-empty--rich { text-align: left; padding: 2rem 1.6rem; }
.mx-empty__title {
    font-family: var(--mx-display);
    font-size: 1.15rem; font-weight: 700; letter-spacing: -0.025em;
    color: var(--mx-ink); margin: 0 0 0.5rem;
}
.mx-empty--rich p { margin: 0 0 0.7rem; max-width: 56ch; }
.mx-empty__actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.1rem; }

.lib-flags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.1rem; }
.lib-badge {
    font-family: var(--mx-mono);
    font-size: 0.57rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mx-muted);
    border: 1px solid var(--mx-line-2); border-radius: 999px;
    padding: 2px 7px;
}
/* An available update is the one thing on this page worth interrupting
   for, so it is the only badge that gets the accent. */
.lib-badge--up { color: var(--mx-red); border-color: var(--mx-red); }
.lib-badge--off { opacity: 0.65; }

/* Already in your library. Accent, because on a page of 49 tiles the
   only thing you need to pick out is what you already have. */
.mx-have { color: var(--mx-red); }
.mx-ph__form { margin: 0; }

/* The nav lane scrolls when the links do not fit (six of them once you
   are signed in). Fade the edge that has more behind it, so the links
   you cannot see are at least advertised. */
.mx-nav__links { position: relative; }
.mx-nav__links.has-more {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
            mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
}
.mx-nav__links.has-prev.has-more {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 26px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 26px), transparent 100%);
}
.mx-nav__links.has-prev:not(.has-more) {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px);
            mask-image: linear-gradient(to right, transparent 0, #000 22px);
}

/* ─── Account menu ────────────────────────────────────────────
   <details> rather than a JS popover: it opens without script and
   is keyboard reachable by default. The only JS is closing it on
   outside-click and Escape, which <details> does not do alone. ─── */
.mx-acct { position: relative; flex-shrink: 0; }
.mx-acct__btn {
    display: flex; align-items: center; gap: 0.42rem;
    padding: 0.28rem 0.5rem 0.28rem 0.3rem;
    border: 1px solid transparent; border-radius: 999px;
    cursor: pointer; list-style: none;
    font-size: 0.84rem; color: var(--mx-muted);
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
    touch-action: manipulation;
}
.mx-acct__btn::-webkit-details-marker { display: none; }
.mx-acct__btn:hover { color: var(--mx-ink); border-color: var(--mx-line-2); }
.mx-acct__btn:focus-visible { outline: 2px solid var(--mx-red); outline-offset: 2px; }
.mx-acct[open] .mx-acct__btn { color: var(--mx-ink); border-color: var(--mx-line-2); background: var(--mx-surface); }
.mx-acct__av {
    width: 24px; height: 24px; flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--mx-red); color: var(--mx-on-red);
    font-family: var(--mx-display); font-size: 0.72rem; font-weight: 700;
}
.mx-acct__name { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-acct__chev { font-size: 0.6rem; color: var(--mx-faint); transition: transform 0.18s var(--mx-ease); }
.mx-acct[open] .mx-acct__chev { transform: rotate(180deg); }

.mx-acct__menu {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
    min-width: 194px;
    display: grid; gap: 1px;
    background: var(--mx-line);
    border: 1px solid var(--mx-line-2);
    border-radius: var(--mx-r-tile);
    box-shadow: var(--mx-shadow);
    overflow: hidden;
}
.mx-acct__item {
    background: var(--mx-surface);
    padding: 0.58rem 0.9rem;
    font-size: 0.83rem; color: var(--mx-ink); text-decoration: none;
    transition: background-color 0.13s ease;
}
.mx-acct__item:hover { background: var(--mx-raised); color: var(--mx-red); }
.mx-acct__item:focus-visible { outline: 2px solid var(--mx-red); outline-offset: -2px; }
/* Signing out is a different kind of action from navigating, so it
   reads as one. */
.mx-acct__item--out { color: var(--mx-muted); }

@media (prefers-reduced-motion: no-preference) {
    .mx-acct[open] .mx-acct__menu { animation: mx-rise 0.16s var(--mx-ease) both; }
}
@media (max-width: 520px) {
    .mx-acct__name { display: none; }
    .mx-acct__menu { min-width: 176px; }
}

/* ─── Dashboard home ─── */
.dash-sn {
    font-family: var(--mx-mono);
    font-size: 0.68rem; letter-spacing: 0.03em;
    color: var(--mx-faint);
    margin: -0.25rem 0 0.2rem;
}
.dash-spec { font-size: 0.79rem; margin-top: 0.35rem; gap: 0.4rem 0.9rem; }
/* Warranty is the only status worth colour on this page. */
.dash-ok  { color: #3ED67B; }
.dash-off { color: var(--mx-muted); }
.dash-count {
    font-family: var(--mx-mono);
    font-size: 0.62rem; font-weight: 700;
    color: var(--mx-on-red); background: var(--mx-red);
    border-radius: 999px; padding: 1px 7px;
    margin-left: 0.4rem; vertical-align: 1px;
}


/* The site header is position:fixed (it is the floating pill), so it
   takes no layout space. body already reserves 36px for the promo
   banner; the nav's own height has to be cleared on top of that or the
   first thing on the page sits behind it. */
:root { --mx-navh: 68px; }
@media (max-width: 900px) { :root { --mx-navh: 62px; } }
@media (max-width: 620px) { :root { --mx-navh: 58px; } }

/* ─── Studio section tabs ─────────────────────────────────────
   Deliberately NOT a bar. The site header is the only global
   navigation; this is page furniture that says which part of
   Studio you are in. Two stacked full-width bars, each with its
   own account control, read as duplicate chrome. ─── */
.mx-tabs {
    display: flex; gap: 1.4rem; align-items: center;
    padding: 1.15rem 0 0;
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}
.mx-tabs::-webkit-scrollbar { display: none; }
.mx-tabs__link {
    font-size: 0.86rem; font-weight: 500;
    color: var(--mx-muted); text-decoration: none;
    padding-bottom: 0.3rem;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
    touch-action: manipulation;
}
.mx-tabs__link:hover { color: var(--mx-ink); }
.mx-tabs__link[aria-current="page"] { color: var(--mx-ink); border-bottom-color: var(--mx-red); }
.mx-tabs__link:focus-visible { outline: 2px solid var(--mx-red); outline-offset: 3px; border-radius: 3px; }

/* The nav is fixed, so its height still has to be cleared. */

/* Dashboard pages have no tab strip, so the content needs the top space
   the strip would otherwise have provided. */
body.mx .mx-main--plain > .mx-shell > .mx-head:first-child { padding-top: 2rem; }

/* ─── Back control on a detail page ───────────────────────────
   Was a breadcrumb of two small grey links, which people could
   not find. A button-shaped target with an arrow reads as the way
   out and is a real tap target on a phone. ─── */
.mx-back { padding: 1.6rem 0 0.4rem; }
.mx-back__btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.85rem; font-weight: 600;
    color: var(--mx-ink); text-decoration: none;
    background: var(--mx-surface);
    border: 1px solid var(--mx-line-2);
    border-radius: 999px;
    padding: 0.42rem 0.95rem 0.42rem 0.75rem;
    transition: border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
    touch-action: manipulation;
}
.mx-back__btn:hover { border-color: var(--mx-red); color: var(--mx-red); }
.mx-back__btn:active { transform: translateX(-1px); }
.mx-back__btn:focus-visible { outline: 2px solid var(--mx-red); outline-offset: 2px; }
.mx-back__arrow { font-size: 1.05em; line-height: 1; }

/* Every page now opens straight into content, so it supplies its own
   top space. */
body.mx .mx-main--plain > .mx-shell > .mx-head:first-child,
body.mx .mx-main--plain > .mx-shell > .mx-hero:first-child { padding-top: 2rem; }


}

/* The fixed header's height is cleared by whatever comes first. With the
   Studio bar present that is the bar; without it, main. Applying it to
   both double-counts and applying it to neither hides the first element
   behind the header. */

/* ─── Dashboard rail ──────────────────────────────────────────
   Persistent section nav beside a card content area, which is the
   pattern Stripe, Linear and Vercel converge on for exactly this
   job: someone in their account switches between these views
   constantly and should not have to reopen a header menu to do it.
   220px rather than the 240-280 the research quotes, because there
   are five sections and short labels, so the extra width would be
   empty space taken from the content. ─── */
body.mx .mx-main--dash { padding-top: var(--mx-navh); }
.mx-dash {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 2.4rem;
    align-items: start;
    padding-top: 2rem;
    padding-bottom: 3.5rem;
}
.mx-dash__body { min-width: 0; }

.mx-side { position: sticky; top: calc(var(--mx-navh) + 1.25rem); display: grid; gap: 2px; }
.mx-side__link {
    display: flex; align-items: center;
    min-height: 40px;
    padding: 0 0.85rem;
    font-size: 0.885rem; font-weight: 500;
    color: var(--mx-muted); text-decoration: none;
    border-radius: 10px;
    border-left: 2px solid transparent;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
    touch-action: manipulation;
}
.mx-side__link:hover { color: var(--mx-ink); background: var(--mx-surface); }
.mx-side__link[aria-current="page"] {
    color: var(--mx-ink); background: var(--mx-surface);
    border-left-color: var(--mx-red); font-weight: 600;
}
.mx-side__link:focus-visible { outline: 2px solid var(--mx-red); outline-offset: 2px; }

/* Sub-sections of the page you are on, nested rather than forming a
   second nav elsewhere on the page. */
.mx-side__sub { display: grid; gap: 1px; margin: 2px 0 6px 0.85rem; padding-left: 0.7rem; border-left: 1px solid var(--mx-line); }
.mx-side__subl {
    display: flex; align-items: center; min-height: 32px;
    font-size: 0.815rem; color: var(--mx-muted); text-decoration: none;
    padding: 0 0.5rem; border-radius: 8px;
}
.mx-side__subl:hover { color: var(--mx-red); background: var(--mx-surface); }
.mx-side__subl[aria-current="true"] { color: var(--mx-ink); font-weight: 600; }
.mx-side__subl:focus-visible { outline: 2px solid var(--mx-red); outline-offset: 2px; }

/* The page supplies its own heading spacing inside the rail layout. */
body.mx .mx-dash__body > .mx-shell { padding-inline: 0; max-width: none; }
body.mx .mx-dash__body .mx-head:first-child { padding-top: 0; }

@media (max-width: 900px) {
    /* Rail becomes a scrollable row above the content. Sub-sections drop
       out here: on a phone the page is a single scroll anyway, and the
       row has to stay one line. */
    .mx-dash { grid-template-columns: 1fr; gap: 1.2rem; padding-top: 1.25rem; }
    .mx-side {
        position: static;
        display: flex; gap: 0.4rem;
        overflow-x: auto; scrollbar-width: none;
        overscroll-behavior-x: contain;
    }
    .mx-side::-webkit-scrollbar { display: none; }
    .mx-side__link {
        white-space: nowrap; min-height: 44px;
        border-left: 0; border: 1px solid var(--mx-line-2);
        border-radius: 999px; background: var(--mx-surface);
    }
    .mx-side__link[aria-current="page"] { border-color: var(--mx-red); color: var(--mx-red); }
    .mx-side__sub { display: none; }
}

/* The header pill carries Studio's sections as a second row, so on those
   pages it is taller. One variable, measured from the live pill, keeps the
   first block clear of it. */
:root { --mx-navh: 68px; --mx-navh-tier: 106px; }
@media (max-width: 900px) { :root { --mx-navh: 62px; --mx-navh-tier: 100px; } }
@media (max-width: 620px) { :root { --mx-navh: 58px; --mx-navh-tier: 94px; } }

/* #main is an id, so a plain class selector loses to any earlier
   `body.mx #main` rule. Matching the id here keeps the two variants
   winning without resorting to !important. */
body.mx #main.mx-main--plain { padding-top: var(--mx-navh-tier); }
body.mx #main.mx-main--dash  { padding-top: var(--mx-navh); }

/* Breathing room before the footer.
   Neither variant had any, so the last thing on the page sat flush
   against the footer's top edge: on the catalog the bottom row of tiles
   touched it exactly, with the colour change as the only separation.
   The footer's own 80px padding does not help, because that space is
   inside the footer's surface, on the far side of the seam.
   Here rather than on each page: every Studio page ends against this
   same edge, and only this one is shared by all of them. */
body.mx #main.mx-main--plain,
body.mx #main.mx-main--dash { padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }