/* Blocks grid — component styles (no page chrome, no html/body reset). */
  @property --note-rows {
    syntax: "<integer>";
    inherits: true;
    initial-value: 0;
  }
  @property --cell-rows {
    syntax: "<integer>";
    inherits: true;
    initial-value: 1;
  }
  #viewport { flex: 1; min-height: 0; overflow: hidden; cursor: grab; background: var(--app-bg); }
  #viewport.is-panning { cursor: grabbing; }
  #world {
    --block-thickness: 220px;
    --block-gap: 32px;
    --fit-type: 1;
    --note-rows: 0;
    --cell-rows: 1;
    display: grid;
    width: max-content;
    height: max-content;
    align-items: stretch;
    gap: 0;
    transform-origin: 0 0;
    padding: var(--world-pad, 48px);
    font-size: calc(13px * var(--fit-type));
  }
  /* Track list is written by writeAlignVars() — never repeat(0, …), which
     invalidates the whole template and stacks every cell in one row. */
  #world.canvas-flow[data-flow="cells-y"] {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
  }
  #world.canvas-flow[data-flow="cells-x"] {
    grid-auto-flow: row;
    grid-auto-rows: max-content;
  }

  .parent {
    padding: 0;
    display: grid;
    background: transparent;
  }
  .canvas-flow[data-flow="cells-y"] .parent {
    width: var(--block-thickness);
    min-width: var(--block-thickness);
    max-width: var(--block-thickness);
    grid-template-rows: subgrid;
    grid-row: 1 / -1;
  }
  .canvas-flow[data-flow="cells-x"] .parent {
    min-height: var(--block-thickness);
    width: max-content;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
  }
  .parent.is-src { opacity: 0.45; }

  .block-body {
    display: grid;
    background: var(--col-block-default);
    border-radius: 14px;
    padding: 7px;
    min-width: 0;
    min-height: 0;
  }
  .canvas-flow[data-flow="cells-y"] .block-body {
    grid-template-rows: subgrid;
    grid-row: calc(var(--note-rows) + 3) / -1;
  }
  .canvas-flow[data-flow="cells-x"] .block-body {
    grid-template-columns: subgrid;
    grid-column: calc(var(--note-rows) + 3) / -1;
  }

  .block-head {
    padding: calc(6px * var(--fit-type));
    border-radius: 10px;
    background: var(--col-heading-default);
  }
  .canvas-flow[data-flow="cells-y"] .block-head {
    grid-row: 1;
    margin-bottom: 30px;
  }
  .canvas-flow[data-flow="cells-x"] .block-head {
    grid-column: 1;
    margin-right: 30px;
    width: var(--block-thickness);
  }

  .card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto auto;
    align-items: center;
    column-gap: calc(4px * var(--fit-type));
    cursor: grab;
  }
  .card-handle {
    grid-column: 1;
    grid-row: 1;
    padding: calc(4px * var(--fit-type)) calc(2px * var(--fit-type));
    cursor: grab;
    user-select: none;
  }
  .card-title {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    cursor: text;
  }
  .card > .icon-x {
    grid-column: 3;
    grid-row: 1;
  }
  .card-mid {
    grid-column: 2;
    grid-row: 2;
    min-height: calc(4px * var(--fit-type));
  }
  .card > .swatch,
  .card > .swatches {
    grid-column: 3;
    grid-row: 2;
  }
  .swatches {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(4px * var(--fit-type));
  }
  .card > .card-text {
    grid-column: 2;
    grid-row: 3;
    cursor: text;
  }
  .card--stacked {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto;
    align-items: stretch;
  }
  .card--stacked > .card-handle {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }
  .card-main {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .card-actions {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(4px * var(--fit-type));
  }

  .block-before {
    display: grid;
    align-items: stretch;
    pointer-events: none;
  }
  .block-before .add-before,
  .block-before .note-slot.has-note {
    pointer-events: auto;
  }
  .canvas-flow[data-flow="cells-y"] .block-before {
    grid-template-rows: subgrid;
    grid-row: 1 / span calc(var(--note-rows) + 2);
    margin-bottom: calc(4px * var(--fit-type));
  }
  .canvas-flow[data-flow="cells-x"] .block-before {
    grid-template-columns: subgrid;
    grid-column: 1 / span calc(var(--note-rows) + 2);
    margin-right: calc(4px * var(--fit-type));
  }
  .note-track { display: grid; }
  .canvas-flow[data-flow="cells-y"] .note-track {
    width: 100%;
    grid-template-rows: subgrid;
    grid-row: 1 / span var(--note-rows);
  }
  .canvas-flow[data-flow="cells-x"] .note-track {
    height: 100%;
    grid-template-columns: subgrid;
    grid-column: 1 / span var(--note-rows);
  }
  .note-slot {
    min-height: calc(48px * var(--fit-type));
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center; }
  .canvas-flow[data-flow="cells-x"] .note-slot { min-width: calc(80px * var(--fit-type)); }
  .note-slot.is-empty { cursor: default; }
  .note-slot .row { justify-content: flex-end; }
  .note-slot textarea {
    text-align: center;
    min-height: calc(20px * var(--fit-type));
    margin-right: 17px;
  }
  .before-stem {
    background: transparent;
    align-self: center;
  }
  .canvas-flow[data-flow="cells-y"] .before-stem {
    grid-row: -3;
    width: 1px;
    height: calc(30px * var(--fit-type));

    display: flex;
     justify-content: space-around; 
    align-items: center; 
    flex-direction: row;
    left: 50%;
    position: relative;
  }
  .canvas-flow[data-flow="cells-x"] .before-stem {
    grid-column: -3;
    height: 1px;
    width: calc(30px * var(--fit-type));
    display: flex;
     justify-content: space-around; 
    align-items: center; 
    flex-direction: row;
    left: 50%;
    position: relative;
  }
  .canvas-flow[data-flow="cells-y"] .block-before .add-before { grid-row: -2; }
  .canvas-flow[data-flow="cells-x"] .block-before .add-before { grid-column: -2; }
  .before-stem.is-on { background: #ababab; }
  .add-before {
    appearance: none;
    border: 0;
    background: transparent;
    /* color: var(--text-faint); */
    font: 500 0.9em/1 inherit;
    padding: calc(2px * var(--fit-type)) calc(4px * var(--fit-type));
    cursor: pointer;
    opacity: 0.5;
    align-self: center;
    border: 1px dashed var(--text);
    height: calc(29px * var(--fit-type));
    /* width: calc(16px * var(--fit-type)); */
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    color: var(--text);
    margin: auto;
  }
  .add-before:hover, .plus-side:hover { color: var(--text); opacity: 1; }

  .swatch,
  .icon-x {
    flex: 0 0 auto;
    width: calc(16px * var(--fit-type));
    height: calc(16px * var(--fit-type));
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--text-faint) 65%, transparent);
    padding: 0;
    box-sizing: border-box;
  }
  .swatch {
    position: relative;
    overflow: visible;
    display: block;
    cursor: pointer;
  }
  .swatch .blocks-colour-mixer {
    --colour-mixer-trigger: 100%;
    --colour-mixer-swatch: 100%;
    --colour-mixer-arm-cross: 100%;
    width: 100%;
    height: 100%;
    display: block;
  }
  .swatch .blocks-colour-mixer .colour-mixer__trigger {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: none;
    max-height: none;
    border: 0;
    border-radius: 50%;
  }
  .swatch input[type="color"] {
    position: absolute;
    inset: -6px;
    width: calc(100% + 12px);
    height: calc(100% + 12px);
    border: 0;
    padding: 0;
    cursor: pointer;
    background: none;
  }
  .icon-x {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--text-faint);
    font: 600 0.72em/1 inherit;
    cursor: pointer;
    opacity: 0.45;
  }
  .icon-x:hover { color: var(--text); opacity: 1; }
  .plus-side {
    display: flex;
    align-self: start;
    width: calc(50px * var(--fit-type));
    height: calc(50px * var(--fit-type));
    flex-shrink: 0;
    border: 1px dashed var(--text-faint);
    background: transparent;
    color: var(--text);
    font: 500 1.2em/1 inherit;
    opacity: 0.5;
    cursor: pointer;
    font-size: 18px;
    border-radius: 50%;
    margin: 50px 50px 50px;
    align-content: center;
    align-items: center;
    justify-content: center;
    padding-bottom: 6.5px;
    padding-left: 7px;
  }
  .canvas-flow[data-flow="cells-y"] .plus-side { grid-row: calc(var(--note-rows) + 3); }
  .canvas-flow[data-flow="cells-x"] .plus-side { grid-column: calc(var(--note-rows) + 3); }
  .row { display: flex; gap: 4px; align-items: center; }
  .row input[type="text"] { flex: 1; min-width: 0; }
  .grip {
    color: var(--text-faint);
    padding: 2px 1px;
    user-select: none;
    cursor: grab;
    font-size: 0.77em;
  }
  input[type="text"], textarea, .tiptap-field {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 3px 4px;
    font: inherit;
    color: inherit;
    outline: none;
    box-shadow: none;
  }
  input[type="text"]::placeholder, textarea::placeholder { color: var(--text-faint); }
  .tiptap-field {
    box-sizing: border-box;
    position: relative;
    min-height: 0;
  }
  .tiptap-field > .tiptap-editor {
    min-height: inherit;
  }
  .tiptap-field .ProseMirror {
    display: block;
    outline: none;
    min-height: inherit;
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    line-height: inherit;
    color: inherit;
    white-space: pre-wrap;
  }
  .tiptap-field .ProseMirror p { margin: 0; }
  .tiptap-field[data-tiptap-singleline] .ProseMirror {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tiptap-field.is-empty::before {
    content: attr(data-placeholder);
    color: var(--text);
    position: absolute;
    top: 3px;
    left: 4px;
    pointer-events: none;
  }
  [data-pfield="name"] { font-weight: 650; color: var(--heading); }
  [data-pfield="description"] { color: var(--text); font-size: 0.85em; }
  [data-cfield="name"] { font-weight: 650; }
  input[type="color"] {
    width: calc(16px * var(--fit-type));
    height: calc(16px * var(--fit-type));
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }
  input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
  input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }

  .cell-track { display: grid; gap: 0; }
  .canvas-flow[data-flow="cells-y"] .cell-track {
    grid-template-rows: subgrid;
    grid-row: 2 / span var(--cell-rows);
  }
  .canvas-flow[data-flow="cells-x"] .cell-track {
    grid-template-columns: subgrid;
    grid-column: 2 / span var(--cell-rows);
  }

  .cell {
    min-height: calc(48px * var(--fit-type));
    padding: calc(6px * var(--fit-type));
    border: 0;
    background: transparent;
    border-radius: var(--radius);
  }
  .canvas-flow[data-flow="cells-y"] .cell:not(:last-child) { margin-bottom: 20px; }
  .canvas-flow[data-flow="cells-x"] .cell {
    min-width: calc(180px * var(--fit-type));
  }
  .canvas-flow[data-flow="cells-x"] .cell:not(:last-child) { margin-right: 20px; }

  .cell.has-item { align-self: start; height: auto; overflow: visible; background: var(--col-cell-default); }
  .cell.is-text { background: transparent; border: 0; }
  .cell.is-media { padding: calc(6px * var(--fit-type)); }
  .card-media {
    grid-column: 1 / -1;
    grid-row: 3;
    min-width: 0;
    margin-top: calc(4px * var(--fit-type));
  }
  .card-media img,
  .card-media video,
  .card-media audio {
    display: block;
    width: 100%;
    max-height: calc(140px * var(--fit-type));
    border-radius: 8px;
  }
  .card-media audio { max-height: none; }
  .card-media-fallback {
    margin: 0;
    color: var(--text-dim, #6c6f78);
    font: 500 11px/1.35 inherit;
  }
  .card-media-doc {
    display: flex;
    gap: 8px;
    align-items: center;
    min-width: 0;
  }
  .card-media-doc__icon {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
  }
  .card-media-doc__title {
    font-weight: 650;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .card-media-doc__desc {
    color: var(--text-dim, #6c6f78);
    font-size: 11px;
  }
  .cell.is-src { opacity: 0.4; }
  .cell.is-drop { outline: 1px solid var(--accent); outline-offset: -1px; }
  .cell.is-extend { min-height: calc(24px * var(--fit-type)); background: var(--accent-soft); }
  .canvas-flow[data-flow="cells-x"] .cell.is-extend { min-width: calc(24px * var(--fit-type)); }

  .gap { align-self: stretch; }
  .canvas-flow[data-flow="cells-y"] .gap {
    width: 0;
    grid-row: calc(var(--note-rows) + 3) / -1;
  }
  .canvas-flow[data-flow="cells-x"] .gap {
    height: 0;
    grid-column: calc(var(--note-rows) + 3) / -1;
  }
  .canvas-flow[data-flow="cells-y"] .gap.is-line,
  .canvas-flow[data-flow="cells-y"] .gap.is-drop,
  .canvas-flow[data-flow="cells-y"] .gap.is-space { margin: 0 calc(var(--block-gap) / 2 - 0.5px); }
  .canvas-flow[data-flow="cells-x"] .gap.is-line,
  .canvas-flow[data-flow="cells-x"] .gap.is-drop,
  .canvas-flow[data-flow="cells-x"] .gap.is-space { margin: calc(var(--block-gap) / 2 - 0.5px) 0; }
  .canvas-flow[data-flow="cells-y"] .gap.is-space { width: 1px; }
  .canvas-flow[data-flow="cells-x"] .gap.is-space { height: 1px; }
  .canvas-flow[data-flow="cells-y"] .gap.is-line { width: 1px; background: var(--hairline); }
  .canvas-flow[data-flow="cells-x"] .gap.is-line { height: 1px; background: var(--hairline); }
  .gap.is-line { position: relative; --line-extend: 0px; }
  .canvas-flow[data-flow="cells-y"] .gap.is-line::before {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 100%;
    height: var(--line-extend);
    background: inherit;
    pointer-events: none;
  }
  .canvas-flow[data-flow="cells-x"] .gap.is-line::before {
    content: "";
    position: absolute;
    top: 0;
    height: 100%;
    right: 100%;
    width: var(--line-extend);
    background: inherit;
    pointer-events: none;
  }
  .canvas-flow[data-flow="cells-y"] .gap.is-drop { width: 2px; background: var(--accent); }
  .canvas-flow[data-flow="cells-x"] .gap.is-drop { height: 2px; background: var(--accent); }

  .add-cells { display: flex; gap: 4px; align-items: center; }
  .canvas-flow[data-flow="cells-y"] .add-cells { grid-row: -2; }
  .canvas-flow[data-flow="cells-x"] .add-cells {
    grid-column: -2;
    flex-direction: column;
    justify-content: center;
  }
  .add-inner {
    appearance: none;
    border: 0;
    padding: calc(5px * var(--fit-type)) calc(6px * var(--fit-type));
    background: transparent;
    color: var(--text-faint);
    font: 600 0.85em/1 inherit;
    cursor: pointer;
  }
  .ghost {
    position: fixed;
    pointer-events: none;
    z-index: 3;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
  }
  .ghost.is-float { opacity: 0.88; }
  .canvas-flow[data-flow="cells-y"] .cell.is-seam-after { border-bottom: 1px solid var(--accent); }
  .canvas-flow[data-flow="cells-y"] .cell.is-seam-before { border-top: 1px solid var(--accent); }
  .canvas-flow[data-flow="cells-x"] .cell.is-seam-after { border-right: 1px solid var(--accent); }
  .canvas-flow[data-flow="cells-x"] .cell.is-seam-before { border-left: 1px solid var(--accent); }
  textarea {
    min-height: calc(32px * var(--fit-type));
    height: auto;
    overflow: visible;
    resize: none;
    field-sizing: content;
  }
  .tiptap-field.card-text {
    min-height: calc(32px * var(--fit-type));
    field-sizing: content;
  }

  /* Frame is paint (box-shadow). Between-group spacing is the .gap.is-space
     seam (same --block-gap math as block|block, no hairline) — not end padding. */
  .group {
    display: grid;
    position: relative;
    overflow: visible;
    --group-stem: 0px;
    border-radius: 14px;
    background: var(--col-group-default);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--heading) 45%, transparent);
    padding: 15px 10px;
    transform: translateY(-16px);
  }
  .canvas-flow[data-flow="cells-y"] .group {
    width: max-content;
    min-width: var(--block-thickness);
    grid-template-rows: subgrid;
    grid-row: 1 / -1;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
  }
  .canvas-flow[data-flow="cells-x"] .group {
    height: max-content;
    min-height: var(--block-thickness);
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    grid-auto-flow: row;
    grid-auto-rows: max-content;
  }
  .canvas-flow[data-flow="cells-y"] .group.is-collapsed {
    width: 0;
    min-width: 0;
    align-self: start;
    background: transparent;
    box-shadow: none;
  }
  .canvas-flow[data-flow="cells-x"] .group.is-collapsed {
    height: 0;
    min-height: 0;
    align-self: start;
    background: transparent;
    box-shadow: none;
  }
  .group.is-collapsed .group-members {
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
  }
  .canvas-flow[data-flow="cells-y"] .group.is-collapsed .group-members {
    width: 0;
    min-width: 0;
  }
  .canvas-flow[data-flow="cells-x"] .group.is-collapsed .group-members {
    height: 0;
    min-height: 0;
  }
  .group.is-src { opacity: 0.45; }
  .group.is-drop {
    outline: 1px solid var(--accent);
    outline-offset: 2px;
  }
  .group-rail {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    position: absolute;
    z-index: 1;
    color: var(--text-dim);
    cursor: grab;
    background: var(--col-group-default);
    border: 1px solid var(--hairline);
    padding: 5px;
    border-radius: 25px;
    transform: translate(-22px, 10px);
  }

  /* Label sits on the preceding .gap.is-line (extended through the stem). */
  .canvas-flow[data-flow="cells-y"] .group-rail {
    flex-direction: row;
    left: calc(var(--block-gap) / -2);
    bottom: calc(100% + var(--group-stem, 0px));
    width: max-content;
  }
  .canvas-flow[data-flow="cells-x"] .group-rail {
    flex-direction: column;
    top: calc(var(--block-gap) / -2);
    right: calc(100% + var(--group-stem, 0px));
    height: max-content;
  }
  .group-main { display: contents; }
  .group-label {
    display: flex;
    align-items: center;
    gap: calc(4px * var(--fit-type));
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    padding: calc(2px * var(--fit-type)) calc(4px * var(--fit-type));
  }
  .group-grip { cursor: grab; }
  .group-label input[data-gfield="name"],
  .group-label .tiptap-field[data-gfield="name"] {
    width: 20ch;
    min-width: 4.5em;
    font-weight: 650;
    color: var(--heading);
  }
  .group-count {
    color: var(--text-faint);
    font: 600 0.85em/1 inherit;
    display: none;
  }
  .group.is-collapsed .group-count { display: inline; }
  .group-chevron {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--heading);
    font: 600 1em/1 inherit;
    padding: calc(2px * var(--fit-type));
    cursor: pointer;
  }
  .group-members {
    display: grid;
    align-items: stretch;
    position: relative;
    min-width: 0;
    min-height: 0;
  }
  .canvas-flow[data-flow="cells-y"] .group-members {
    grid-template-rows: subgrid;
    grid-row: 1 / -1;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
  }
  .canvas-flow[data-flow="cells-x"] .group-members {
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    grid-auto-flow: row;
    grid-auto-rows: max-content;
  }
  .canvas-flow[data-flow="cells-y"] .gap.is-open {
    width: var(--open-size, var(--block-thickness));
    margin: 0 calc(var(--block-gap) / 2);
    border-radius: 8px;
    background: var(--accent-soft);
  }
  .canvas-flow[data-flow="cells-x"] .gap.is-open {
    height: var(--open-size, var(--block-thickness));
    margin: calc(var(--block-gap) / 2) 0;
    border-radius: 8px;
    background: var(--accent-soft);
  }

  .block-head.card .card-title {
    font-size: 12px !important;
  }

  .card-actions {
    height: -webkit-fill-available;
    padding: 2px 1px;
    align-content: flex-start;
  }

  /* Single-block carousel (host mounts this; no shared #world tracks).
     Same cells-y column rhythm as the grid: type scale, heading/cell
     gaps, stem. Flex, not subgrid — one parent, no cross-block align. */
  .blocks-carousel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    --fit-type: 1;
    --block-thickness: 100%;
    font-size: calc(13px * var(--fit-type));
    color: var(--text);
  }
  .carousel-nav {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 0 8px;
  }
  .carousel-prev,
  .carousel-next {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--heading);
    font: 600 1.4em/1 inherit;
    padding: 4px 8px;
    cursor: pointer;
  }
  .carousel-meter {
    color: var(--text-faint);
    font: 600 0.85em/1 inherit;
  }
  .carousel-stage {
    flex: 1;
    min-height: 0;
    overflow: auto;
  }
  .blocks-carousel .parent {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: none;
    grid-template-rows: none;
    grid-row: auto;
    box-sizing: border-box;
    padding: 15px 10px;
    --carousel-group-line: var(--col-group-default);
    --group-fade: 14px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: transparent;
  }
  /* Chrome lives on ::before so open sides can fade without
     fading the block. Spacing stays reserved on .parent. */
  .blocks-carousel .parent::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: inherit;
    background: transparent;
  }
  .blocks-carousel .parent > * { position: relative; z-index: 1; }
  .blocks-carousel .parent.is-grouped::before {
    border-color: color-mix(in srgb, var(--carousel-group-line) 55%, var(--heading));
    background: var(--carousel-group-line);
  }
  .blocks-carousel .parent.is-group-start {
    border-radius: 14px 0 0 14px;
  }
  .blocks-carousel .parent.is-group-start::before {
    border-right-color: transparent;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--group-fade)), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - var(--group-fade)), transparent);
  }
  .blocks-carousel .parent.is-group-mid {
    border-radius: 0;
  }
  .blocks-carousel .parent.is-group-mid::before {
    border-left-color: transparent;
    border-right-color: transparent;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--group-fade), #000 calc(100% - var(--group-fade)), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--group-fade), #000 calc(100% - var(--group-fade)), transparent);
  }
  .blocks-carousel .parent.is-group-end {
    border-radius: 0 14px 14px 0;
  }
  .blocks-carousel .parent.is-group-end::before {
    border-left-color: transparent;
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - var(--group-fade)), transparent);
    mask-image: linear-gradient(to left, #000 calc(100% - var(--group-fade)), transparent);
  }
  .blocks-carousel .parent.is-group-only {
    border-radius: 14px;
  }
  .blocks-carousel .block-before,
  .blocks-carousel .block-body,
  .blocks-carousel .note-track,
  .blocks-carousel .cell-track {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    grid-template-rows: none;
    grid-row: auto;
  }
  .blocks-carousel .block-before {
    margin-bottom: calc(4px * var(--fit-type));
  }
  .blocks-carousel .note-slot:not(:last-child) {
    margin-bottom: calc(8px * var(--fit-type));
  }
  .blocks-carousel .before-stem {
    width: 1px;
    height: calc(60px * var(--fit-type));
    align-self: center;
    grid-row: auto;
  }
  .blocks-carousel .add-before {
    align-self: center;
    grid-row: auto;
  }
  .blocks-carousel .block-head {
    margin-bottom: 30px;
    grid-row: auto;
  }
  .blocks-carousel .add-cells {
    margin-top: calc(4px * var(--fit-type));
    grid-row: auto;
  }
  .blocks-carousel .cell,
  .blocks-carousel .cell.has-item {
    align-self: stretch;
    width: 100%;
  }
  .blocks-carousel .cell:not(:last-child) { margin-bottom: 20px; }