@media screen {
  #ba-studio {
    --ba-ink: #382c3d;
    --ba-muted: #706676;
    --ba-plum: #75465f;
    --ba-plum-dark: #583249;
    --ba-apricot: #e9a16d;
    --ba-sage: #536b59;
    --ba-cream: #fffaf2;
    --ba-line: #e8dcd2;
    --ba-card: #fffdf9;
    --ba-soft: #f8f0e8;
    --ba-focus: #a6567b;
    max-width: 1400px;
    margin: 0 auto;
    padding: clamp(1rem, 3vw, 2.5rem) clamp(0.75rem, 2.5vw, 2rem) 4rem;
    color: var(--ba-ink);
  }

  #ba-studio :where(button, input, select, textarea) { font: inherit; }
  #ba-studio :where(button, a, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--ba-focus);
    outline-offset: 3px;
  }
  #ba-studio :where(h1, h2, h3, p) { overflow-wrap: anywhere; }
  #ba-studio :where(#ba-lib-h, #ba-ed-h, #ba-print-h, #ba-saved-h, #ba-preview-column) { scroll-margin-top: 160px; }

  #ba-studio .ba-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(1rem, 4vw, 3.5rem);
    overflow: hidden;
    padding: clamp(1.4rem, 4vw, 3.5rem);
    margin: 0 0 1rem;
    border: 1px solid #ead8ca;
    border-radius: 28px;
    background: linear-gradient(115deg, #fff8ef 0%, #fffdf9 58%, #f3e7dc 100%);
    box-shadow: 0 18px 44px rgb(65 42 49 / 8%);
    text-align: left;
  }
  #ba-studio .ba-hero-copy { min-width: 0; max-width: 880px; }
  #ba-studio .ba-eyebrow {
    margin: 0 0 0.55rem;
    color: var(--ba-sage);
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.14em;
    line-height: 1.4;
    text-transform: uppercase;
  }
  #ba-studio .ba-hero h1 {
    max-width: 800px;
    margin: 0 0 0.75rem;
    color: var(--ba-plum-dark);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(2rem, 4.4vw, 3.7rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.06;
  }
  #ba-studio .ba-hero-copy > p:not(.ba-eyebrow):not(.ba-reference) {
    max-width: 760px;
    margin: 0;
    color: #5f5260;
    font-size: clamp(1rem, 1.4vw, 1.12rem);
    line-height: 1.7;
  }
  #ba-studio .ba-hero-meta { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.1rem; }
  #ba-studio .ba-hero-meta > * {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border: 1px solid #e7d5c7;
    border-radius: 999px;
    background: rgb(255 255 255 / 75%);
    color: var(--ba-plum-dark);
    font-size: 0.82rem;
    font-weight: 750;
    line-height: 1.25;
  }
  #ba-studio .ba-reference { margin: 0.85rem 0 0 !important; color: var(--ba-muted) !important; font-size: 0.84rem; line-height: 1.55; }
  #ba-studio .ba-reference a { color: var(--ba-plum-dark); font-weight: 800; text-underline-offset: 3px; }

  #ba-studio .ba-hero-art {
    position: relative;
    display: grid;
    width: clamp(116px, 17vw, 202px);
    aspect-ratio: 1;
    place-items: center;
    isolation: isolate;
  }
  #ba-studio .ba-hero-art::before {
    position: absolute;
    z-index: -1;
    width: 92%;
    aspect-ratio: 1;
    border: 1px solid rgb(117 70 95 / 18%);
    border-radius: 50%;
    background: radial-gradient(circle, #fffefa 0 48%, #f3e4d7 49% 67%, transparent 68%);
    box-shadow: 0 14px 34px rgb(76 47 62 / 12%);
    content: '';
  }
  #ba-studio .ba-medal-star {
    display: grid;
    width: 61%;
    aspect-ratio: 1;
    place-items: center;
    clip-path: polygon(50% 0%, 61% 13%, 79% 8%, 85% 26%, 100% 38%, 91% 55%, 96% 74%, 77% 81%, 67% 99%, 50% 88%, 33% 99%, 23% 81%, 4% 74%, 9% 55%, 0 38%, 15% 26%, 21% 8%, 39% 13%);
    background: linear-gradient(145deg, #f5c38c, #d98d58 55%, #bf704e);
    color: #fffaf0;
    font-size: clamp(2.5rem, 6vw, 4.8rem);
    filter: drop-shadow(0 5px 5px rgb(89 54 48 / 20%));
    text-shadow: 0 2px 5px rgb(75 40 43 / 30%);
  }
  #ba-studio .ba-medal-ribbon {
    position: absolute;
    bottom: 2%;
    width: 23%;
    height: 37%;
    background: linear-gradient(90deg, #71415b, #95617a 48%, #71415b);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
    filter: drop-shadow(0 3px 3px rgb(60 39 50 / 14%));
  }
  #ba-studio .ba-medal-ribbon:nth-of-type(1) { transform: translateX(-46%) rotate(8deg); }
  #ba-studio .ba-medal-ribbon:nth-of-type(2) { transform: translateX(46%) rotate(-8deg); background: linear-gradient(90deg, #789078, #91a58b 48%, #70866f); }

  #ba-studio .ba-workflow {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0.45rem;
    margin: 0 0 1.35rem;
    border: 1px solid var(--ba-line);
    border-radius: 16px;
    background: var(--ba-card);
  }
  #ba-studio .ba-workflow a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 0.9rem;
    border-radius: 11px;
    color: var(--ba-plum-dark);
    font-size: 0.9rem;
    font-weight: 800;
    text-decoration: none;
    transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
  }
  #ba-studio .ba-workflow a:hover { background: var(--ba-soft); transform: translateY(-1px); }
  #ba-studio .ba-workflow a:focus-visible { background: var(--ba-soft); }

  #ba-studio .ba-workspace {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: start;
    gap: clamp(1rem, 2vw, 1.5rem);
    margin-bottom: 2rem;
  }
  #ba-studio .ba-controls { display: grid; gap: 1rem; min-width: 0; }
  #ba-studio .ba-preview-column { align-self: stretch; min-width: 0; }
  #ba-studio .ba-block,
  #ba-studio .ba-editor,
  #ba-studio .ba-print-settings,
  #ba-studio .ba-preview-panel,
  #ba-studio .ba-library,
  #ba-studio .ba-saved-section {
    min-width: 0;
    padding: clamp(1rem, 2.1vw, 1.65rem);
    border: 1px solid var(--ba-line);
    border-radius: 20px;
    background: var(--ba-card);
    box-shadow: 0 8px 24px rgb(65 42 49 / 5%);
  }
  #ba-studio .ba-editor,
  #ba-studio .ba-print-settings { margin: 0; }
  #ba-studio .ba-editor > h2,
  #ba-studio .ba-print-settings > h2,
  #ba-studio .ba-preview-panel > h2,
  #ba-studio .ba-library > h2,
  #ba-studio .ba-saved-section > h2,
  #ba-studio .ba-block > h2 {
    margin: 0 0 0.45rem;
    color: var(--ba-plum-dark);
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-weight: 850;
    line-height: 1.25;
  }
  #ba-studio .ba-editor > p,
  #ba-studio .ba-print-settings > p,
  #ba-studio .ba-preview-help,
  #ba-studio .ba-library > p,
  #ba-studio .ba-saved-section > p,
  #ba-studio .ba-block > h2 + p {
    margin: 0 0 1.2rem;
    color: var(--ba-muted);
    font-size: 0.92rem;
    line-height: 1.6;
  }
  #ba-studio .ba-preview-panel { position: sticky; top: calc(var(--header-height, 100px) + 16px); min-height: 22rem; }
  #ba-studio .ba-preview-panel > .ba-eyebrow { margin-bottom: 0.35rem; }
  #ba-studio .ba-preview-help { margin-bottom: 1rem; }
  #ba-studio .ba-editor-preview { margin: 0; padding: 0.8rem; border: 1px solid #eadfd6; border-radius: 16px; background: #f7f2ed; }

  #ba-studio .ba-field { min-width: 0; margin: 0 0 1.15rem; }
  #ba-studio .ba-field > label,
  #ba-studio .ba-fieldset > legend,
  #ba-studio .ba-editor > .ba-field > div[id$='-lbl'] {
    display: block;
    margin: 0 0 0.45rem;
    padding: 0;
    color: var(--ba-ink) !important;
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.4;
  }
  #ba-studio .ba-fieldset { min-width: 0; border: 0; padding: 0; }
  #ba-studio .ba-fieldset > legend { float: left; width: 100%; }
  #ba-studio .ba-fieldset > legend + * { clear: both; }
  #ba-studio .ba-input,
  #ba-studio .ba-select {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 0.7rem 0.8rem;
    border: 1px solid #d9c9be;
    border-radius: 11px;
    background: #fffefa;
    color: var(--ba-ink);
    font-size: 0.97rem;
    line-height: 1.45;
  }
  #ba-studio textarea.ba-input { min-height: 7rem; resize: vertical; }
  #ba-studio .ba-input::placeholder { color: #817782; opacity: 1; }
  #ba-studio .ba-input:focus, #ba-studio .ba-select:focus { border-color: var(--ba-plum); outline: 3px solid rgb(117 70 95 / 16%); }

  #ba-studio .ba-picto-palette { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0 0 0.65rem; }
  #ba-studio .ba-picto-opt {
    display: grid;
    width: 48px;
    min-width: 48px;
    height: 48px;
    place-items: center;
    padding: 0.25rem;
    border: 1px solid #d9c9be;
    border-radius: 13px;
    background: #fffefa;
    color: var(--ba-ink);
    cursor: pointer;
    font-size: 1.55rem;
    line-height: 1;
    transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
  }
  #ba-studio .ba-picto-opt:hover { transform: translateY(-2px); }
  #ba-studio .ba-picto-opt[aria-checked="true"] { border: 2px solid var(--ba-plum); background: #f7eaf0; box-shadow: 0 0 0 3px rgb(117 70 95 / 10%); }
  #ba-studio .ba-sections { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  #ba-studio .ba-check { display: inline-flex; min-height: 44px; align-items: center; gap: 0.5rem; padding: 0.45rem 0.8rem; border: 1px solid #d8dfd2; border-radius: 999px; background: #f4f8f1; color: #34493a; cursor: pointer; font-weight: 750; }
  #ba-studio .ba-check input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--ba-sage); }

  #ba-studio .ba-niveaux-list { display: flex; flex-direction: column; gap: 0.7rem; }
  #ba-studio .ba-niveau-row {
    display: grid;
    grid-template-columns: 2.35rem minmax(0, 1fr) minmax(4.5rem, auto) 44px;
    gap: 0.55rem;
    align-items: center;
    padding: 0.65rem;
    border: 1px solid #eadfd6;
    border-radius: 14px;
    background: #fcf8f3;
  }
  #ba-studio .ba-niveau-num { display: grid; width: 2.15rem; height: 2.15rem; place-items: center; border-radius: 50%; background: #e8d8df; color: var(--ba-plum-dark); font-size: 1rem; font-weight: 900; }
  #ba-studio .ba-niveau-row .ba-input,
  #ba-studio .ba-niveau-row .ba-select { min-height: 48px; padding: 0.55rem; }
  #ba-studio .ba-niveau-row .ba-select { width: 100%; }
  #ba-studio .ba-niveau-del { width: 44px; height: 44px; border: 1px solid #e2b9b2; border-radius: 12px; background: #fff3f0; color: #8a3e38; cursor: pointer; font-weight: 850; }
  #ba-studio .ba-niveau-del:disabled { opacity: 0.48; cursor: not-allowed; }
  #ba-studio .ba-toolbar { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 0.8rem; }
  #ba-studio .ba-btn {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.65rem 1rem;
    border: 1px solid var(--ba-plum);
    border-radius: 12px;
    background: var(--ba-plum);
    color: #fff;
    cursor: pointer;
    font-size: 0.91rem;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    transition: background-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
  }
  #ba-studio .ba-btn:hover { background: var(--ba-plum-dark); box-shadow: 0 5px 12px rgb(88 50 73 / 16%); transform: translateY(-1px); }
  #ba-studio .ba-btn.secondary { border-color: #d7c7bc; background: #fffefa; color: var(--ba-plum-dark); }
  #ba-studio .ba-btn.secondary:hover { background: #f8f0e8; }
  #ba-studio .ba-btn.small { min-height: 44px; padding: 0.55rem 0.8rem; font-size: 0.84rem; }
  #ba-studio :where([aria-pressed="true"], [aria-checked="true"]).ba-btn,
  #ba-studio .ba-format-option[aria-pressed="true"] { border-color: var(--ba-sage); background: var(--ba-sage); color: #fff; }
  #ba-studio .ba-format-options,
  #ba-studio .ba-print-formats { display: flex; flex-wrap: wrap; gap: 0.55rem; }
  #ba-studio .ba-format-option { min-height: 46px; padding: 0.65rem 0.9rem; border: 1px solid #d7c7bc; border-radius: 12px; background: #fffefa; color: var(--ba-plum-dark); cursor: pointer; font-weight: 800; }

  #ba-studio .ba-library { margin: 0 0 1.5rem; background: linear-gradient(180deg, #fffdf9, #fbf7f1); }
  #ba-studio .ba-lib { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  #ba-studio .ba-model {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 1rem;
    border: 1px solid #e4d8cf;
    border-radius: 17px;
    background: #fffefa;
    box-shadow: 0 4px 14px rgb(65 42 49 / 4%);
    scroll-margin-top: 160px;
  }
  #ba-studio .ba-model:target { outline: 3px solid var(--ba-apricot); outline-offset: 3px; }
  #ba-studio .ba-model-head { display: flex; min-width: 0; align-items: center; gap: 0.65rem; margin-bottom: 0.5rem; }
  #ba-studio .ba-model-picto { display: grid; width: 2.7rem; height: 2.7rem; flex: 0 0 auto; place-items: center; border-radius: 13px; background: #f7e9dd; font-size: 1.55rem; }
  #ba-studio .ba-model-title { color: var(--ba-plum-dark); font-size: 1rem; font-weight: 850; line-height: 1.3; }
  #ba-studio .ba-model-domaine { margin-bottom: 0.55rem; color: var(--ba-muted); font-size: 0.8rem; line-height: 1.45; }
  #ba-studio .ba-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.75rem; }
  #ba-studio .ba-badge { padding: 0.22rem 0.55rem; border-radius: 999px; background: #e6eee2; color: #344d38; font-size: 0.7rem; font-weight: 850; letter-spacing: 0.02em; }
  #ba-studio .ba-model-niveaux { display: flex; flex-direction: column; gap: 0.55rem; margin: 0 0 1rem; padding: 0; list-style: none; }
  #ba-studio .ba-model-niveaux li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.5rem; align-items: start; color: #514851; font-size: 0.82rem; line-height: 1.48; }
  #ba-studio .ba-model-niveaux .et { min-width: 1.25rem; color: #996333; }
  #ba-studio .ba-model > .ba-btn { width: 100%; margin-top: auto; }

  #ba-studio .ba-saved-section { margin-top: 0; border-color: #e4ddd3; background: #f9f7f2; }
  #ba-studio .ba-saved-section > p:first-of-type { max-width: 760px; }
  #ba-studio .ba-saved-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; }
  #ba-studio .ba-saved { min-width: 0; padding: 0.85rem; border: 1px solid #ded8cf; border-radius: 13px; background: #fffefa; }
  #ba-studio .ba-saved-head { display: flex; min-width: 0; align-items: center; gap: 0.5rem; margin-bottom: 0.55rem; }
  #ba-studio .ba-saved-head .p { flex: 0 0 auto; font-size: 1.35rem; }
  #ba-studio .ba-saved-head .t { min-width: 0; color: var(--ba-ink); font-size: 0.91rem; font-weight: 850; overflow-wrap: anywhere; }
  #ba-studio .ba-saved-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  #ba-studio .ba-saved-actions > * { min-height: 44px; }
  #ba-studio .ba-empty { color: var(--ba-muted); font-size: 0.9rem; font-style: italic; }
  #ba-studio .ba-library-status { margin: 0 0 0.85rem; padding: 0.75rem 0.9rem; border-left: 4px solid var(--ba-sage); border-radius: 9px; background: #eef5eb; color: #344d38; font-size: 0.9rem; line-height: 1.5; }
  #ba-studio .ba-library-status[data-state="error"] { border-color: #a34039; background: #fff0ee; color: #762d28; }
  #ba-studio .ba-names-help { margin: 0.45rem 0 0; color: var(--ba-muted); font-size: 0.83rem; line-height: 1.5; }

  html[data-theme="dark"] #ba-studio {
    --ba-ink: #f2e9ef;
    --ba-muted: #c2b7c3;
    --ba-plum: #bd8aa7;
    --ba-plum-dark: #f1d7e5;
    --ba-sage: #a6c2a8;
    --ba-cream: #27232a;
    --ba-line: #514651;
    --ba-card: #302b33;
    --ba-soft: #403541;
    --ba-focus: #f2b8d3;
    color: var(--ba-ink);
  }
  html[data-theme="dark"] #ba-studio .ba-hero { border-color: #5a4754; background: linear-gradient(115deg, #342b34, #302b33 60%, #41313d); }
  html[data-theme="dark"] #ba-studio .ba-hero-copy > p:not(.ba-eyebrow):not(.ba-reference) { color: #e0d4df; }
  html[data-theme="dark"] #ba-studio .ba-reference { color: var(--ba-muted) !important; }
  html[data-theme="dark"] #ba-studio .ba-hero-meta > * { border-color: #66535f; background: #3a303a; color: #f1d7e5; }
  html[data-theme="dark"] #ba-studio .ba-hero-art::before { border-color: #765b6c; background: radial-gradient(circle, #51414e 0 48%, #4d3b48 49% 67%, transparent 68%); }
  html[data-theme="dark"] #ba-studio .ba-workflow { border-color: var(--ba-line); background: var(--ba-card); }
  html[data-theme="dark"] #ba-studio .ba-workflow a { color: #f1d7e5; }
  html[data-theme="dark"] #ba-studio .ba-workflow a:hover,
  html[data-theme="dark"] #ba-studio .ba-workflow a:focus-visible { background: #493a48; }
  html[data-theme="dark"] #ba-studio .ba-block,
  html[data-theme="dark"] #ba-studio .ba-editor,
  html[data-theme="dark"] #ba-studio .ba-print-settings,
  html[data-theme="dark"] #ba-studio .ba-preview-panel,
  html[data-theme="dark"] #ba-studio .ba-library,
  html[data-theme="dark"] #ba-studio .ba-saved-section { border-color: var(--ba-line); background: var(--ba-card); box-shadow: 0 8px 24px rgb(0 0 0 / 15%); }
  html[data-theme="dark"] #ba-studio .ba-input,
  html[data-theme="dark"] #ba-studio .ba-select,
  html[data-theme="dark"] #ba-studio .ba-picto-opt,
  html[data-theme="dark"] #ba-studio .ba-format-option { border-color: #685965; background: #26232a; color: #f2e9ef; }
  html[data-theme="dark"] #ba-studio .ba-input::placeholder { color: #b7aab8; }
  html[data-theme="dark"] #ba-studio .ba-picto-opt[aria-checked="true"] { border-color: #d8a4c0; background: #493746; }
  html[data-theme="dark"] #ba-studio .ba-check { border-color: #627363; background: #344036; color: #e4eee3; }
  html[data-theme="dark"] #ba-studio .ba-niveau-row { border-color: #574a56; background: #37313a; }
  html[data-theme="dark"] #ba-studio .ba-niveau-num { background: #594453; color: #f4dce9; }
  html[data-theme="dark"] #ba-studio .ba-niveau-del { border-color: #805752; background: #4c3232; color: #ffd9d2; }
  html[data-theme="dark"] #ba-studio .ba-btn { border-color: #a66e8d; background: #895a76; color: #fff; }
  html[data-theme="dark"] #ba-studio .ba-btn:hover { background: #9b6b88; }
  html[data-theme="dark"] #ba-studio .ba-btn.secondary { border-color: #6d5d68; background: #39323b; color: #f1d7e5; }
  html[data-theme="dark"] #ba-studio .ba-btn.secondary:hover { background: #493d49; }
  html[data-theme="dark"] #ba-studio .ba-format-option[aria-pressed="true"] { border-color: #7f9c82; background: #536e58; color: white; }
  html[data-theme="dark"] #ba-studio .ba-model { border-color: #514651; background: #38323b; }
  html[data-theme="dark"] #ba-studio .ba-model-picto { background: #4a3945; }
  html[data-theme="dark"] #ba-studio .ba-model-domaine,
  html[data-theme="dark"] #ba-studio .ba-model-niveaux li { color: #d2c7d3; }
  html[data-theme="dark"] #ba-studio .ba-badge { background: #3f5544; color: #e3efe2; }
  html[data-theme="dark"] #ba-studio .ba-editor-preview { border-color: #514651; background: #26232a; }
  html[data-theme="dark"] #ba-studio .ba-saved { border-color: #514651; background: #38323b; }
  html[data-theme="dark"] #ba-studio .ba-library-status { border-left-color: #8eae91; background: #304137; color: #e1efe0; }
  html[data-theme="dark"] #ba-studio .ba-library-status[data-state="error"] { border-left-color: #e29288; background: #4a3032; color: #ffe0dc; }

  @media (max-width: 1100px) {
    #ba-studio .ba-lib { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #ba-studio .ba-saved-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 900px) {
    #ba-studio .ba-workspace { grid-template-columns: minmax(0, 1fr); }
    #ba-studio .ba-preview-panel { position: static; top: auto; min-height: 0; max-height: none; overflow: visible; }
  }
  @media (max-width: 620px) {
    #ba-studio { padding-inline: 0.7rem; }
    #ba-studio .ba-hero { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; padding: 1.2rem 1rem; border-radius: 21px; }
    #ba-studio .ba-hero-art { position: absolute; top: 3rem; right: 0.8rem; width: 62px; }
    #ba-studio .ba-hero-copy > .ba-eyebrow { padding-right: 55px; }
    #ba-studio .ba-medal-star { font-size: 2.35rem; }
    #ba-studio .ba-medal-ribbon { height: 35%; }
    #ba-studio .ba-hero h1 { padding-right: 55px; font-size: clamp(1.75rem, 8vw, 2.45rem); }
    #ba-studio .ba-hero-meta { gap: 0.35rem; }
    #ba-studio .ba-hero-meta > * { padding: 0.32rem 0.58rem; font-size: 0.75rem; }
    #ba-studio .ba-workflow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #ba-studio .ba-workflow a { padding-inline: 0.35rem; font-size: 0.82rem; }
    #ba-studio .ba-workflow a:last-child { grid-column: 1 / -1; }
    #ba-studio .ba-lib,
    #ba-studio .ba-saved-list { grid-template-columns: minmax(0, 1fr); }
    #ba-studio .ba-niveau-row { grid-template-columns: 2.2rem minmax(0, 1fr) 44px; grid-template-areas: "num star del" "cons cons cons"; }
    #ba-studio .ba-niveau-row .ba-niveau-num { grid-area: num; }
    #ba-studio .ba-niveau-row .ba-niv-etoile { grid-area: star; width: 100%; }
    #ba-studio .ba-niveau-row .ba-niv-consigne { grid-area: cons; width: 100%; }
    #ba-studio .ba-niveau-row .ba-niveau-del { grid-area: del; justify-self: end; }
    #ba-studio .ba-toolbar > .ba-btn { flex: 1 1 100%; }
    #ba-studio .ba-editor-preview { padding: 0.35rem; }
  }
  @media (max-width: 360px) {
    #ba-studio .ba-hero { padding-inline: 0.8rem; }
    #ba-studio .ba-hero-art { width: 62px; }
    #ba-studio .ba-medal-star { font-size: 1.8rem; }
    #ba-studio .ba-hero-meta > * { font-size: 0.69rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    #ba-studio :where(.ba-workflow a, .ba-picto-opt, .ba-btn) { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  }
}