/* mibunlock.com.

   Loaded after the host's app.css, on this site only: App.razor puts the class
   "mibunlock" on <html> and links this file when the request came to this
   storefront. Two parts:

   1. The site's own frame and front page (.mu-*), which nothing else styles.
   2. The shop's pages as this site shows them. They are sihilisko's markup
      and classes (a product, an order, the terms, the portal), drawn there
      as a green CRT; here the same boxes in this site's type and colours.

   The owner, 2026-10-06: "in mibunlock try to use vector fonts of some kind".
   The faces are Barlow and Barlow Condensed (SIL Open Font License, fonts/OFL.txt),
   served from this site: its content policy allows fonts from itself only. */

@font-face {
    font-family: "Barlow";
    src: url("/mibunlock/fonts/barlow-latin-400-normal.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Barlow";
    src: url("/mibunlock/fonts/barlow-latin-500-normal.woff2") format("woff2");
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Barlow";
    src: url("/mibunlock/fonts/barlow-latin-600-normal.woff2") format("woff2");
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Barlow Condensed";
    src: url("/mibunlock/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2");
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Barlow Condensed";
    src: url("/mibunlock/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2");
    font-weight: 700; font-style: normal; font-display: swap;
}

/* The owner, 2026-10-07: "Website should resemble germany colors instead", and of
   the palettes shown, "Let's try 4": black and gold, the flag's red only in the
   stripe across the top of every page (.mu-page::before). */
html.mibunlock {
    --mu-bg: #0f0f10;
    --mu-panel: #18181a;
    --mu-panel-2: #202023;
    --mu-rule: #2b2b2e;
    --mu-fg: #eeeeee;
    --mu-muted: #9c9c9c;
    --mu-accent: #f2c200;
    --mu-accent-ink: #111111;
    --mu-danger: #ff7a6b;
    --mu-text: "Barlow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    --mu-display: "Barlow Condensed", "Barlow", ui-sans-serif, system-ui, sans-serif;

    /* The shared pages take their face from this variable. */
    --crt-face: var(--mu-text);
    color-scheme: dark;
    scroll-behavior: smooth;
}

/* The shared stylesheet forces a black page under several of its layouts
   (body:has(.bare), body:has(.shop) and the like). This site has one ground. */
html.mibunlock,
html.mibunlock body,
html.mibunlock body:has(*) {
    background: var(--mu-bg);
    color: var(--mu-fg);
    font-family: var(--mu-text);
}

/* There <main> is a grid that centres one small page in the window, and the
   front page's layout another. Here a page is a column that starts at the top. */
html.mibunlock main.mu-main {
    display: block;
    /* The centring must go with the grid: a browser that aligns block-level
       boxes too (Chromium does) would shrink every section to its content
       and centre each on its own, so no two would share a left edge. */
    place-items: normal;
    padding: 0 1.25rem 3rem;
}
html.mibunlock .bare {
    display: block;
    place-items: normal;
    padding: 0;
    min-height: 0;
    background: none;
    color: inherit;
}

/* ---- 1. the frame ------------------------------------------------------ */

.mu-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--mu-text);
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--mu-fg);
    text-align: left;
}
/* The German flag across the top of the page, its three bands stacked as on the
   flag: black, red, gold. Side by side they would be Belgium's. */
.mu-page::before {
    content: "";
    display: block;
    width: 100%;
    height: 15px;
    background: linear-gradient(#000 0 33.4%, #dd0000 33.4% 66.7%, #ffce00 66.7%);
}

.mu-top,
.mu-main,
.mu-foot {
    width: 100%;
    max-width: 68rem;
    margin-inline: auto;
    padding-inline: 1.25rem;
    box-sizing: border-box;
}

.mu-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    flex-wrap: wrap;
    padding-block: 1rem;
    border-bottom: 1px solid var(--mu-rule);
}

.mu-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--mu-fg);
    text-decoration: none;
}
.mu-brand img { width: 2.5rem; height: 2.5rem; display: block; }
.mu-word {
    font-family: var(--mu-display);
    font-weight: 700;
    font-size: 1.9rem;
    line-height: 1;
    letter-spacing: 0.01em;
}
.mu-word span { color: var(--mu-accent); }

.mu-nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.4rem; }
.mu-nav a,
.mu-foot a {
    color: var(--mu-muted);
    text-decoration: none;
    font-weight: 500;
}
.mu-nav a:hover,
.mu-foot a:hover { color: var(--mu-fg); }

.mu-main { flex: 1; padding-block: 0 3rem; }

.mu-foot {
    padding-block: 1.5rem 2.5rem;
    border-top: 1px solid var(--mu-rule);
    color: var(--mu-muted);
    font-size: 0.9rem;
}
.mu-foot p { margin: 0 0 0.6rem; }
.mu-foot-seller a { color: var(--mu-fg); }
.mu-foot-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin-bottom: 0.9rem; }
.mu-foot-tm { font-size: 0.8rem; max-width: 46rem; }

/* ---- the front page ---------------------------------------------------- */

.mu-hero { padding: 3.5rem 0 2.5rem; }
.mu-eyebrow {
    margin: 0 0 0.9rem;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mu-accent);
}
.mu-hero h1 {
    margin: 0 0 1rem;
    font-family: var(--mu-display);
    font-weight: 700;
    font-size: clamp(2.4rem, 7.2vw, 4.6rem);
    line-height: 0.98;
    letter-spacing: -0.005em;
    color: var(--mu-fg);
    /* The heading is a phrase of five words, as wide as the frame at its
       full size. Where it has to break, it breaks into two lines of a like
       length and not into four words and one. */
    text-wrap: balance;
}
.mu-lede { margin: 0 0 1.6rem; font-size: 1.2rem; color: var(--mu-muted); max-width: 46rem; }

/* The row of head units under the lede, the last thing in the hero. The four
   photos are cut out of their white backgrounds; each sits on a faint panel so
   the near-black bezels read against the dark page. Static, like the rest of
   this front page. */
.mu-units {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}
/* Two by two on a narrow screen, so the buttons stay near the top. */
@media (max-width: 48rem) {
    .mu-units { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
}
.mu-units li {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 0.7rem 0.6rem;
    background: var(--mu-panel);
    border: 1px solid var(--mu-rule);
    border-radius: 12px;
}
/* One box for every photo, as wide as the widest of them, so the captions
   line up; a narrower unit is centred in it. */
.mu-units img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 961 / 520;
    object-fit: contain;
}
.mu-units span {
    font-size: 0.9rem;
    color: var(--mu-muted);
    text-align: center;
    line-height: 1.25;
}
.mu-units strong { color: var(--mu-fg); font-weight: 600; }

.mu-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0; }

.mu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0 1.15rem;
    border: 1px solid var(--mu-rule);
    border-radius: 0.5rem;
    background: var(--mu-panel);
    color: var(--mu-fg);
    font: 600 1rem/1 var(--mu-text);
    text-decoration: none;
    cursor: pointer;
}
.mu-btn:hover { border-color: var(--mu-muted); }
.mu-btn-primary {
    background: var(--mu-accent);
    border-color: var(--mu-accent);
    color: var(--mu-accent-ink);
}
.mu-btn-primary:hover { filter: brightness(1.08); border-color: var(--mu-accent); }
.mu-btn-small { min-height: 2.25rem; padding: 0 0.9rem; font-size: 0.92rem; }
.mu-btn:focus-visible,
.mu-nav a:focus-visible,
.mu-card a:focus-visible,
.mu-services a:focus-visible {
    outline: 2px solid var(--mu-accent);
    outline-offset: 2px;
}

.mu-section { padding: 2.5rem 0 0.5rem; scroll-margin-top: 1rem; }
.mu-section h2 {
    margin: 0 0 0.4rem;
    font-family: var(--mu-display);
    font-weight: 700;
    font-size: 2.1rem;
    line-height: 1.1;
    color: var(--mu-fg);
}
.mu-section-lede { margin: 0 0 1.4rem; color: var(--mu-muted); max-width: 44rem; }
/* Two paragraphs of one introduction stand closer to each other than to what they introduce. */
.mu-section-lede + .mu-section-lede { margin-top: -0.65rem; }
.mu-section a { color: var(--mu-accent); }

.mu-group { margin-top: 1.6rem; }
.mu-group-head {
    margin: 0 0 0.8rem;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mu-muted);
}

.mu-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
    gap: 1rem;
}
.mu-card {
    display: flex;
    flex-direction: column;
    padding: 1.15rem 1.2rem 1.1rem;
    background: var(--mu-panel);
    border: 1px solid var(--mu-rule);
    border-radius: 0.75rem;
}
.mu-card h4 { margin: 0 0 0.45rem; font-size: 1.15rem; font-weight: 600; line-height: 1.25; }
.mu-card h4 a { color: var(--mu-fg); text-decoration: none; }
.mu-card h4 a:hover { color: var(--mu-accent); }
.mu-card-summary { margin: 0 0 1rem; color: var(--mu-muted); font-size: 0.98rem; }
.mu-card-foot {
    margin: auto 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.mu-price {
    font-family: var(--mu-display);
    font-weight: 700;
    font-size: 1.65rem;
    line-height: 1;
    color: var(--mu-accent);
}
.mu-soon { color: var(--mu-muted); font-weight: 500; }
.mu-card .mu-btn { margin-left: auto; color: var(--mu-fg); }
.mu-empty { color: var(--mu-muted); }

.mu-services {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
    gap: 1rem;
}
.mu-service-group {
    padding: 1.15rem 1.2rem;
    background: var(--mu-panel);
    border: 1px solid var(--mu-rule);
    border-radius: 0.75rem;
}
.mu-service-group h3 {
    margin: 0;
    font-family: var(--mu-display);
    font-weight: 700;
    font-size: 1.45rem;
    line-height: 1.15;
    color: var(--mu-fg);
}
.mu-service-platforms { margin: 0.1rem 0 0; color: var(--mu-muted); font-size: 0.92rem; }
.mu-service-group ul { list-style: none; margin: 0.8rem 0 0; padding: 0; }
.mu-service-group li { padding: 0.5rem 0; border-top: 1px solid var(--mu-rule); }
.mu-services a { color: var(--mu-fg); text-decoration: none; font-weight: 500; }
/* Tied to the last word: an arrow alone on a line points at nothing. */
.mu-services a::after { content: "\00a0→"; color: var(--mu-accent); }
.mu-services a:hover { color: var(--mu-accent); }

.mu-contact { padding-bottom: 1.5rem; }
.mu-mail {
    font-family: var(--mu-display);
    font-weight: 700;
    font-size: clamp(1.7rem, 5vw, 2.4rem);
    text-decoration: none;
}
.mu-mail:hover { text-decoration: underline; }

@media (max-width: 34rem) {
    .mu-top { padding-block: 0.8rem; }
    .mu-word { font-size: 1.6rem; }
    .mu-hero { padding-top: 2.25rem; }
}

/* ---- 2. the shop's pages on this site ---------------------------------- */

/* A product, an order, a request, the terms, the privacy notice, the portal.
   The markup and its classes are the shop's; sihilisko.com draws them as a
   CRT (app.css: green on black, a glow on every glyph, a scanline comb over
   the page, capitals with wide tracking for a pixel face). Its colours come
   from three variables set where those pages begin, so they are given this
   site's here, and what the tube added is taken off. Layout is left alone. */

html.mibunlock :is(.private, .you-page, .shop, .customer-portal, .legal-page) {
    --green: var(--mu-fg);
    --green-dim: var(--mu-muted);
    --amber: var(--mu-accent);

    font-family: var(--mu-text);
    font-size: 1.03rem;
    line-height: 1.55;
    letter-spacing: 0;
    color: var(--mu-fg);
    text-shadow: none;
    margin-top: 2rem;
}

/* The glow and the hum are properties of a tube. */
html.mibunlock :is(.private, .you-page, .shop, .customer-portal, .legal-page) * {
    text-shadow: none !important;
    animation: none !important;
}
/* The comb over the page, and the falloff wash inside each panel. */
html.mibunlock :is(.private, .you-page, .shop)::after,
html.mibunlock :is(.private, .you-page, .shop) .panel::before {
    content: none;
}

html.mibunlock :is(.private, .you-page, .shop, .customer-portal, .legal-page) h1 {
    margin: 0.35rem 0 0.5rem;
    font-family: var(--mu-display);
    font-weight: 700;
    font-size: clamp(2rem, 6vw, 2.7rem);
    line-height: 1.05;
    letter-spacing: 0;
    color: var(--mu-fg);
}
html.mibunlock :is(.private, .you-page, .shop, .customer-portal, .legal-page) :is(h2, h3) {
    margin: 0 0 0.8rem;
    font-family: var(--mu-display);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.15;
    letter-spacing: 0;
    text-transform: none;
    color: var(--mu-fg);
}
html.mibunlock :is(.private, .you-page, .shop, .customer-portal, .legal-page) h3 { font-size: 1.25rem; }

html.mibunlock .private-tag {
    padding: 0;
    border: 0;
    border-radius: 0;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mu-accent);
}
html.mibunlock .private-sub,
html.mibunlock :is(.private, .you-page, .shop, .customer-portal, .legal-page) :is(.hint, .empty, .opt) {
    color: var(--mu-muted);
    font-size: 0.95rem;
    letter-spacing: 0;
}
html.mibunlock .private-sub { font-size: 1.1rem; }

html.mibunlock :is(.private, .you-page, .shop, .legal-page) .panel,
html.mibunlock :is(.portal-signin, .portal-section) {
    padding: 1.3rem 1.35rem 1.4rem;
    background: var(--mu-panel);
    border: 1px solid var(--mu-rule);
    border-radius: 0.75rem;
    box-shadow: none;
}
html.mibunlock .portal-section > header { border-bottom-color: var(--mu-rule); }
html.mibunlock .portal-section > header h2 { letter-spacing: 0; text-transform: none; }

/* Text set as written: a description, the terms. */
html.mibunlock :is(.private, .you-page, .shop) .message,
html.mibunlock :is(.portal-intro p, .portal-head p, .portal-record p, .portal-section > p, .legal-copy p, .legal-copy li) {
    color: var(--mu-fg);
    font-size: 1.03rem;
    line-height: 1.6;
}
html.mibunlock :is(.private, .you-page, .shop, .customer-portal, .legal-page) a { color: var(--mu-accent); }

/* app.css hyphenates titles and summaries, which a pixel face twice as wide
   needed to fit a phone. This face fits, and "checksum-cor-rect" in the
   middle of a desktop line reads as a fault. A word with no room still
   breaks (overflow-wrap stays). */
html.mibunlock :is(.shop-card h3 .user-name, .shop .private-head h1, .shop .private-sub, .shop-summary) {
    hyphens: manual;
    -webkit-hyphens: manual;
}

/* The terms, the privacy notice, the withdrawal form: the column as wide as
   the text panel in it, so the heading, the panel and the rule under them
   share both edges. */
html.mibunlock .legal-page { max-width: 48rem; }
html.mibunlock .legal-page .panel { max-width: none; }

/* A page with nothing of the shop on it: "Not found". */
html.mibunlock .mu-main > h1 {
    margin: 2.5rem 0 0.75rem;
    font-family: var(--mu-display);
    font-weight: 700;
    font-size: clamp(2rem, 6vw, 2.7rem);
    line-height: 1.05;
    color: var(--mu-fg);
}
html.mibunlock .mu-main > p { color: var(--mu-muted); }

/* Forms. */
html.mibunlock :is(.private, .you-page, .shop, .customer-portal, .legal-page) label {
    color: var(--mu-muted);
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}
html.mibunlock :is(.private, .you-page, .shop, .customer-portal, .legal-page)
    :is(input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], input:not([type]), select, textarea) {
    background-color: var(--mu-bg);
    border: 1px solid var(--mu-rule);
    border-radius: 0.5rem;
    color: var(--mu-fg);
    caret-color: var(--mu-accent);
    font-family: var(--mu-text);
    font-size: 1rem;
    letter-spacing: 0;
}
html.mibunlock :is(.private, .you-page, .shop, .customer-portal, .legal-page) :is(input, select, textarea)::placeholder {
    color: #6c7682;
}
html.mibunlock :is(.private, .you-page, .shop, .customer-portal, .legal-page) :is(input, select, textarea):focus {
    outline: none;
    border-color: var(--mu-accent);
    box-shadow: 0 0 0 3px rgba(242, 194, 0, 0.22);
}
/* A consent line reads as box-then-sentence on one row. */
html.mibunlock .shop-check { flex-direction: row; color: var(--mu-fg) !important; letter-spacing: 0 !important; }
html.mibunlock .shop-check input[type="checkbox"] { accent-color: var(--mu-accent); width: 1.05rem; height: 1.05rem; margin-top: 0.2rem; }
html.mibunlock :is(.private, .you-page, .shop, .customer-portal, .legal-page) input[type="file"] { color: var(--mu-muted); }
html.mibunlock :is(.private, .you-page, .shop, .customer-portal, .legal-page) input[type="file"]::file-selector-button {
    border: 1px solid var(--mu-rule);
    border-radius: 0.4rem;
    background: var(--mu-panel-2);
    color: var(--mu-fg);
    letter-spacing: 0;
    text-transform: none;
}

/* Buttons. */
html.mibunlock :is(.private, .you-page, .shop, .customer-portal, .legal-page) .btn {
    min-height: 2.75rem;
    padding: 0 1.15rem;
    border: 1px solid var(--mu-rule);
    border-radius: 0.5rem;
    background: var(--mu-panel-2);
    color: var(--mu-fg);
    font: 600 1rem/1 var(--mu-text);
    letter-spacing: 0;
    text-transform: none;
    /* A link styled as a button beside a real one ("Purchase", "Demo"): the
       same box, with its label in the middle of it either way. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
html.mibunlock :is(.private, .you-page, .shop, .customer-portal, .legal-page) .btn:is(:hover, :focus-visible) {
    background: var(--mu-panel-2);
    border-color: var(--mu-muted);
    color: var(--mu-fg);
    outline: none;
}
html.mibunlock :is(.private, .you-page, .shop, .customer-portal, .legal-page) .btn:focus-visible {
    outline: 2px solid var(--mu-accent);
    outline-offset: 2px;
}
html.mibunlock :is(.private, .you-page, .shop, .customer-portal, .legal-page) .btn.primary,
html.mibunlock :is(.private, .you-page, .shop, .customer-portal, .legal-page) .btn.primary:is(:hover, :focus-visible) {
    background: var(--mu-accent);
    border-color: var(--mu-accent);
    color: var(--mu-accent-ink);
}
html.mibunlock :is(.private, .you-page, .shop, .customer-portal, .legal-page) .btn.primary:hover { filter: brightness(1.08); }
html.mibunlock :is(.private, .you-page, .shop, .customer-portal, .legal-page) .btn.danger {
    color: var(--mu-danger);
    border-color: #6b2f28;
    background: transparent;
}
html.mibunlock :is(.private, .you-page, .shop, .customer-portal, .legal-page) .btn.danger:is(:hover, :focus-visible) {
    background: var(--mu-danger);
    border-color: var(--mu-danger);
    color: #1c0906;
}

/* Prices, facts, notices. */
html.mibunlock .shop-price {
    font-family: var(--mu-display);
    font-weight: 700;
    letter-spacing: 0;
    color: var(--mu-accent);
}
html.mibunlock .shop-price--large { font-size: 2.3rem; line-height: 1.1; }
html.mibunlock .shop-facts dt { color: var(--mu-muted); letter-spacing: 0; text-transform: none; font-weight: 500; }
html.mibunlock .shop-facts dd { color: var(--mu-fg); }
html.mibunlock .shop-facts dd.shop-mono,
html.mibunlock .shop-mono {
    color: var(--mu-fg);
    font-family: ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;
    font-size: 0.95em;
    letter-spacing: 0;
}
html.mibunlock .shop-meta { color: var(--mu-muted); letter-spacing: 0; }
html.mibunlock .shop-soon { border-color: var(--mu-rule); color: var(--mu-muted); letter-spacing: 0.08em; }
html.mibunlock .shop-pay { color: var(--mu-fg); }
html.mibunlock :is(.private, .you-page, .shop) .flash,
html.mibunlock .flash {
    border: 1px solid var(--mu-rule);
    border-left: 3px solid var(--mu-accent);
    border-radius: 0.5rem;
    background: var(--mu-panel);
    color: var(--mu-fg);
}
html.mibunlock :is(.private, .you-page, .shop) .flash.error,
html.mibunlock .flash.error {
    border-left-color: var(--mu-danger);
    background: var(--mu-panel);
    color: var(--mu-danger);
}
html.mibunlock .shop-alert { box-shadow: none; background: rgba(242, 194, 0, 0.08); border-radius: 0.6rem; }
html.mibunlock .shop-alert-head { letter-spacing: 0.04em; }
html.mibunlock .shop-alert-who { color: var(--mu-muted); letter-spacing: 0; }

/* The way back, under every such page. */
html.mibunlock .private-foot {
    border-top-color: var(--mu-rule);
    letter-spacing: 0;
}
html.mibunlock .private-foot a { color: var(--mu-muted); text-decoration: none; }
html.mibunlock .private-foot a:hover { color: var(--mu-fg); }
html.mibunlock .shop-customer-nav { letter-spacing: 0; text-transform: none; }
html.mibunlock .shop-customer-nav a { color: var(--mu-muted); }

/* The portal's records. */
html.mibunlock .portal-record { border-color: var(--mu-rule); border-left-color: var(--mu-accent); border-radius: 0.5rem; }
html.mibunlock :is(.portal-record h3, .portal-contract-list h3, .portal-timeline h3, .portal-record-top strong) { color: var(--mu-fg); }
html.mibunlock .portal-status { color: var(--mu-muted); letter-spacing: 0.08em; }
html.mibunlock .portal-timeline li { border-left-color: var(--mu-rule); }
html.mibunlock .portal-timeline li::before { background: var(--mu-accent); box-shadow: none; }
html.mibunlock .portal-contract-list article { border-bottom-color: var(--mu-rule); }
html.mibunlock .portal-intro .portal-login-prompt { color: var(--mu-fg); }

/* ---- 3. the dataset editor --------------------------------------------- */

/* The tool the product "C0 dataset" sells two days of. It is laid out as the
   instrument it replaces (app.css, "C0 dataset editor": "Python editor
   geometry, CRT palette") and takes its colours from the same three
   variables as the shop's pages, so here it is the same instrument in this
   site's colours. Only the palette is touched: no size, no position. */
html.mibunlock .dataset-editor {
    --green: var(--mu-fg);
    --green-dim: var(--mu-muted);
    --amber: var(--mu-accent);

    margin-top: 1.75rem;
    border-color: var(--mu-rule);
    border-radius: 0.5rem;
    overflow: hidden;
    background: var(--mu-panel);
    color: var(--mu-fg);
    font-family: var(--mu-text);
    text-shadow: none;
}
html.mibunlock .dataset-editor * { text-shadow: none !important; }
html.mibunlock .dataset-titlebar { background: var(--mu-panel-2); border-bottom-color: var(--mu-rule); }
html.mibunlock .dataset-titlebar h1 { font-family: var(--mu-text); font-weight: 600; color: var(--mu-fg); }
html.mibunlock .dataset-screen {
    background: var(--mu-bg);
    border-color: var(--mu-rule);
    box-shadow: none;
}
html.mibunlock .dataset-screen::after { content: none; }
html.mibunlock .dataset-screen hr { border-top-color: var(--mu-rule); }
html.mibunlock .dataset-tabs button { background: var(--mu-panel); border-color: var(--mu-rule); }
html.mibunlock .dataset-tabs button[aria-selected="true"] { background: var(--mu-accent); color: var(--mu-accent-ink); }
html.mibunlock .dataset-tabs button:disabled { color: #4a535d; }
html.mibunlock .dataset-table th { border-bottom-color: var(--mu-rule); }
html.mibunlock .dataset-table td { border-bottom-color: var(--mu-rule); }
html.mibunlock .dataset-reference span { color: #6c7682; }
html.mibunlock .dataset-editor input[type="number"] {
    background: var(--mu-panel);
    border-color: var(--mu-rule);
    border-radius: 0.3rem;
}
html.mibunlock .dataset-editor input[type="number"]:focus {
    border-color: var(--mu-accent);
    box-shadow: 0 0 0 3px rgba(242, 194, 0, 0.22);
}
html.mibunlock .dataset-editor input:disabled { border-color: var(--mu-rule); color: #4a535d; }
html.mibunlock .dataset-editor input:is([type="radio"], [type="checkbox"], [type="range"]) { accent-color: var(--mu-accent); }
html.mibunlock .dataset-curve { border-color: var(--mu-rule); }
html.mibunlock .dataset-curve line { stroke: var(--mu-rule); }
html.mibunlock .dataset-curve [data-curve-ref="eu"] { stroke: #6c7682; }
html.mibunlock .dataset-curve [data-curve-current] { stroke: var(--mu-accent); }
html.mibunlock .dataset-curve [data-curve-ref="nar"] { stroke: var(--mu-fg); }
html.mibunlock .dataset-export { border-color: var(--mu-rule); border-radius: 0.4rem; }
html.mibunlock .dataset-editor .btn {
    background: var(--mu-panel-2);
    border-color: var(--mu-rule);
    border-radius: 0.35rem;
    color: var(--mu-fg);
    font-family: var(--mu-text);
    font-weight: 600;
}
html.mibunlock .dataset-editor .btn:is(:hover, :focus-visible) {
    background: var(--mu-panel-2);
    border-color: var(--mu-muted);
    color: var(--mu-fg);
}
html.mibunlock .dataset-editor .btn.primary,
html.mibunlock .dataset-editor .btn.primary:is(:hover, :focus-visible) {
    background: var(--mu-accent);
    border-color: var(--mu-accent);
    color: var(--mu-accent-ink);
}
html.mibunlock .dataset-demo-note { border-radius: 0.4rem; background: rgba(242, 194, 0, 0.08); }
html.mibunlock .dataset-actions output.error { color: var(--mu-danger); }