/* /assets/frootbox/theme-base/assets/reset.css */
@layer reset {
/*
 * A small reset in the layer "reset". A child theme with a framework that
 * brings its own, e.g. Bootstrap's Reboot, replaces this file with an
 * empty one of the same name (decision 0167).
 */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: none; text-size-adjust: none; }
body { margin: 0; min-block-size: 100vh; }
:is(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, blockquote, figure, pre) { margin: 0; }
:is(img, picture, svg, video, canvas) { display: block; max-inline-size: 100%; block-size: auto; }
:is(input, button, textarea, select) { font: inherit; color: inherit; }
:is(p, li, figcaption, blockquote) { overflow-wrap: break-word; }
table { border-collapse: collapse; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

}
/* /assets/frootbox/theme-base/assets/base.css */
@layer base {
/*
 * Typography, links, focus and forms in the layer "base", all from the
 * tokens (decision 0162). Blocks build on it, but do not need it.
 */
html { scroll-padding-block-start: calc(var(--base-sticky-top, 0px) + var(--space-2xl)); }
body {
  color: var(--color-text);
  background: var(--color-bg);
  font-size: var(--size-m);
  -webkit-font-smoothing: antialiased;
}

/* Again at content of another language, so it takes the fonts of its script (decision 0159). */
body, :where([lang]) { font-family: var(--font-body); line-height: var(--leading-body); }

/* The level of a heading follows from where it stands; it looks like its rank or its class (decision 0129). */
:is(h1, h2, h3, h4, h5, h6) { font-family: var(--font-heading); font-size: inherit; line-height: var(--leading-heading); text-wrap: balance; }
:where([data-rank="1"]) { font-size: var(--size-3xl); }
:where([data-rank="2"]) { font-size: var(--size-xl); }
:where([data-rank="3"]) { font-size: var(--size-l); }
:where([data-rank="4"], [data-rank="5"], [data-rank="6"]) { font-size: var(--size-m); }
p, li { text-wrap: pretty; }
small { font-size: var(--size-s); }
:is(code, kbd, samp, pre) { font-family: var(--font-mono); font-size: 0.92em; }
/*
 * Code from rich text and modules: a light box on any background. Long
 * lines wrap instead of scrolling, so nothing runs out of the column and
 * no box needs the keyboard focus to be read.
 */
pre {
  padding: var(--space-xs) var(--space-s);
  border-radius: calc(var(--radius) / 2);
  background: color-mix(in srgb, currentColor 7%, transparent);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 4;
}
pre code { font-size: inherit; }
:not(pre) > code { padding: 0.1em 0.3em; border-radius: calc(var(--radius) / 4); background: color-mix(in srgb, currentColor 8%, transparent); overflow-wrap: anywhere; }

a { color: var(--color-primary); text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; }
a:hover { text-decoration-thickness: 0.14em; }

/* Always visible for the keyboard, never for the mouse (WCAG 2.2 AA). */
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 2px; }

::selection { background: color-mix(in srgb, var(--color-primary) 20%, transparent); }

hr { border: 0; border-block-start: var(--border); margin-block: var(--space-l); }

:is(input, textarea, select) {
  min-block-size: 2.75rem;
  padding: var(--space-2xs) var(--space-xs);
  border: var(--border);
  border-color: var(--color-muted);
  border-radius: calc(var(--radius) / 2);
  background: var(--color-bg);
}
button { cursor: pointer; }

/* The button to load content of another provider and the three equal
   choices of the banner (decision 0264), on every surface. */
.external__button,
.consent-banner__button {
  min-block-size: 2.75rem;
  padding: var(--space-2xs) var(--space-m);
  border: 0;
  border-radius: var(--radius-button);
  box-shadow: inset 0 0 0 2px currentColor;
  background: transparent;
  font-weight: 600;
}
.external__button:hover,
.consent-banner__button:hover { text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
.consent-banner {
  border: var(--border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
}

/* The link to skip to the content, shown when it has the focus. */
.base-skip-link {
  position: absolute;
  inset-block-start: var(--space-2xs);
  inset-inline-start: var(--space-2xs);
  z-index: 10;
  padding: var(--space-2xs) var(--space-s);
  border-radius: var(--radius);
  background: var(--color-dark);
  color: var(--color-bg);
  translate: 0 -200%;
}
.base-skip-link:focus { translate: 0; }

}
/* /assets/frootbox/theme-base/assets/layouts.css */
@layer layouts {
/*
 * Building blocks for layouts and child themes in the layer "layouts"
 * (decision 0167). Everything starts with "base-", so nothing meets the
 * classes of a framework. No block of the library needs them.
 *
 *   base-visually-hidden    there for screen readers only
 *   base-wrap               the width of the content, centred; --narrow, --wide
 *   base-stack              one below the other with a gap; --s, --l
 *   base-cluster            in a row, wrapping; --s, --l
 *   base-page               the page in named widths: children take the
 *                           content width, base-narrow, base-wide and
 *                           base-full the others
 *   base-grid               12 columns that follow the room they get, not the
 *                           screen: base-span-6, base-span-m-4, base-start-l-2
 *                           (s from 30rem, m from 48rem, l from 64rem)
 *   base-auto-grid          as many columns as fit, at least --base-min wide
 *   base-subgrid            takes the rows of the grid around it, e.g. for
 *                           cards with their buttons on one line
 */
.base-visually-hidden {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.base-wrap { inline-size: min(100% - 2 * var(--gutter), var(--width)); margin-inline: auto; }
.base-wrap--narrow { inline-size: min(100% - 2 * var(--gutter), var(--width-narrow)); }
.base-wrap--wide { inline-size: min(100% - 2 * var(--gutter), var(--width-wide)); }

.base-stack { display: flex; flex-direction: column; gap: var(--base-gap, var(--space-m)); }
.base-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--base-gap, var(--space-s)); }
:is(.base-stack, .base-cluster).base--s { --base-gap: var(--space-2xs); }
:is(.base-stack, .base-cluster).base--l { --base-gap: var(--space-xl); }

/* Head and link below of blocks with a list (decision 0192): eyebrow, heading, introduction. */
.base-head { display: flex; flex-direction: column; gap: var(--space-2xs); }
.base-head > :is(h1, h2, h3, h4, h5, h6) { margin: 0; }
.base-head__eyebrow { margin: 0; color: var(--color-primary); font-size: var(--size-s); font-weight: 700; }
.base-head__eyebrow:dir(ltr) { text-transform: uppercase; letter-spacing: 0.12em; }
.base-head__intro { margin: 0; max-inline-size: var(--width-narrow); color: var(--color-muted); font-size: var(--size-l); }
.base-more { margin: 0; }
.base-more a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  padding: var(--space-2xs) var(--space-m);
  border-radius: var(--radius-button);
  box-shadow: inset 0 0 0 2px currentColor;
  font-weight: 600;
  text-decoration: none;
}
.base-more a:hover { text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }

/* Narrow, content, wide and full by named lines; each width as wide as it can be, the gutters shrink last. */
.base-page {
  --base-room: (100% - 2 * var(--gutter));
  --base-narrow: min(var(--width-narrow), var(--base-room));
  --base-content: min(var(--width), var(--base-room));
  --base-wide: min(var(--width-wide), var(--base-room));
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [wide-start] calc((var(--base-wide) - var(--base-content)) / 2)
    [content-start] calc((var(--base-content) - var(--base-narrow)) / 2)
    [narrow-start] var(--base-narrow)
    [narrow-end] calc((var(--base-content) - var(--base-narrow)) / 2)
    [content-end] calc((var(--base-wide) - var(--base-content)) / 2)
    [wide-end] minmax(var(--gutter), 1fr)
    [full-end];
}
.base-page > * { grid-column: content; }
.base-page > .base-narrow { grid-column: narrow; }
.base-page > .base-wide { grid-column: wide; }
.base-page > .base-full { grid-column: full; }
/* Room between blocks of the main area; full-width ones such as the section bring their own. */
.base-page > :where(:not(.base-full)) { padding-block: calc(var(--space) / 2); }

.base-grid {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--base-gap, var(--space-m));
}
.base-grid > * { grid-column: 1 / -1; }
.base-span-1 { grid-column: span 1 / span 1; }
.base-span-2 { grid-column: span 2 / span 2; }
.base-span-3 { grid-column: span 3 / span 3; }
.base-span-4 { grid-column: span 4 / span 4; }
.base-span-5 { grid-column: span 5 / span 5; }
.base-span-6 { grid-column: span 6 / span 6; }
.base-span-7 { grid-column: span 7 / span 7; }
.base-span-8 { grid-column: span 8 / span 8; }
.base-span-9 { grid-column: span 9 / span 9; }
.base-span-10 { grid-column: span 10 / span 10; }
.base-span-11 { grid-column: span 11 / span 11; }
.base-span-12 { grid-column: span 12 / span 12; }
.base-start-1 { grid-column-start: 1; }
.base-start-2 { grid-column-start: 2; }
.base-start-3 { grid-column-start: 3; }
.base-start-4 { grid-column-start: 4; }
.base-start-5 { grid-column-start: 5; }
.base-start-6 { grid-column-start: 6; }
.base-start-7 { grid-column-start: 7; }
.base-start-8 { grid-column-start: 8; }
.base-start-9 { grid-column-start: 9; }
.base-start-10 { grid-column-start: 10; }
.base-start-11 { grid-column-start: 11; }
.base-start-12 { grid-column-start: 12; }
@container (min-width: 30rem) {
  .base-span-s-1 { grid-column: span 1 / span 1; }
  .base-span-s-2 { grid-column: span 2 / span 2; }
  .base-span-s-3 { grid-column: span 3 / span 3; }
  .base-span-s-4 { grid-column: span 4 / span 4; }
  .base-span-s-5 { grid-column: span 5 / span 5; }
  .base-span-s-6 { grid-column: span 6 / span 6; }
  .base-span-s-7 { grid-column: span 7 / span 7; }
  .base-span-s-8 { grid-column: span 8 / span 8; }
  .base-span-s-9 { grid-column: span 9 / span 9; }
  .base-span-s-10 { grid-column: span 10 / span 10; }
  .base-span-s-11 { grid-column: span 11 / span 11; }
  .base-span-s-12 { grid-column: span 12 / span 12; }
  .base-start-s-1 { grid-column-start: 1; }
  .base-start-s-2 { grid-column-start: 2; }
  .base-start-s-3 { grid-column-start: 3; }
  .base-start-s-4 { grid-column-start: 4; }
  .base-start-s-5 { grid-column-start: 5; }
  .base-start-s-6 { grid-column-start: 6; }
  .base-start-s-7 { grid-column-start: 7; }
  .base-start-s-8 { grid-column-start: 8; }
  .base-start-s-9 { grid-column-start: 9; }
  .base-start-s-10 { grid-column-start: 10; }
  .base-start-s-11 { grid-column-start: 11; }
  .base-start-s-12 { grid-column-start: 12; }
}
@container (min-width: 48rem) {
  .base-span-m-1 { grid-column: span 1 / span 1; }
  .base-span-m-2 { grid-column: span 2 / span 2; }
  .base-span-m-3 { grid-column: span 3 / span 3; }
  .base-span-m-4 { grid-column: span 4 / span 4; }
  .base-span-m-5 { grid-column: span 5 / span 5; }
  .base-span-m-6 { grid-column: span 6 / span 6; }
  .base-span-m-7 { grid-column: span 7 / span 7; }
  .base-span-m-8 { grid-column: span 8 / span 8; }
  .base-span-m-9 { grid-column: span 9 / span 9; }
  .base-span-m-10 { grid-column: span 10 / span 10; }
  .base-span-m-11 { grid-column: span 11 / span 11; }
  .base-span-m-12 { grid-column: span 12 / span 12; }
  .base-start-m-1 { grid-column-start: 1; }
  .base-start-m-2 { grid-column-start: 2; }
  .base-start-m-3 { grid-column-start: 3; }
  .base-start-m-4 { grid-column-start: 4; }
  .base-start-m-5 { grid-column-start: 5; }
  .base-start-m-6 { grid-column-start: 6; }
  .base-start-m-7 { grid-column-start: 7; }
  .base-start-m-8 { grid-column-start: 8; }
  .base-start-m-9 { grid-column-start: 9; }
  .base-start-m-10 { grid-column-start: 10; }
  .base-start-m-11 { grid-column-start: 11; }
  .base-start-m-12 { grid-column-start: 12; }
}
@container (min-width: 64rem) {
  .base-span-l-1 { grid-column: span 1 / span 1; }
  .base-span-l-2 { grid-column: span 2 / span 2; }
  .base-span-l-3 { grid-column: span 3 / span 3; }
  .base-span-l-4 { grid-column: span 4 / span 4; }
  .base-span-l-5 { grid-column: span 5 / span 5; }
  .base-span-l-6 { grid-column: span 6 / span 6; }
  .base-span-l-7 { grid-column: span 7 / span 7; }
  .base-span-l-8 { grid-column: span 8 / span 8; }
  .base-span-l-9 { grid-column: span 9 / span 9; }
  .base-span-l-10 { grid-column: span 10 / span 10; }
  .base-span-l-11 { grid-column: span 11 / span 11; }
  .base-span-l-12 { grid-column: span 12 / span 12; }
  .base-start-l-1 { grid-column-start: 1; }
  .base-start-l-2 { grid-column-start: 2; }
  .base-start-l-3 { grid-column-start: 3; }
  .base-start-l-4 { grid-column-start: 4; }
  .base-start-l-5 { grid-column-start: 5; }
  .base-start-l-6 { grid-column-start: 6; }
  .base-start-l-7 { grid-column-start: 7; }
  .base-start-l-8 { grid-column-start: 8; }
  .base-start-l-9 { grid-column-start: 9; }
  .base-start-l-10 { grid-column-start: 10; }
  .base-start-l-11 { grid-column-start: 11; }
  .base-start-l-12 { grid-column-start: 12; }
}

.base-auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--base-min, 16rem), 100%), 1fr));
  gap: var(--base-gap, var(--space-m));
}
.base-subgrid { display: grid; grid-row: span var(--base-rows, 3); grid-template-rows: subgrid; row-gap: var(--space-xs); }

}
/* /assets/frootbox-de/theme/blocks/Intro/assets/intro.css */
@layer blocks {
/* The intro after the draft: text and badges beside a screenshot in a browser window. */
.fde-intro__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 3.5rem; padding-block: 4.5rem 4rem; }
.fde-intro__text { display: flex; flex: 1 1 420px; flex-direction: column; gap: 1.5rem; min-inline-size: 0; }
.fde-intro__badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.fde-intro__badges:empty { display: none; }
.fde-intro__title { margin: 0; font-size: clamp(2.5rem, 5vw, 3.75rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; }
.fde-intro__lead { margin: 0; max-inline-size: 34em; color: var(--color-muted); font-size: 1.1875rem; }
.fde-intro__start { display: flex; flex-direction: column; gap: 0.5rem; max-inline-size: 520px; }
.fde-intro__note :is(p) { margin: 0; color: var(--color-muted); font-size: 0.875rem; }

.fde-intro__visual { flex: 1 1 560px; min-inline-size: 0; margin: 0; }
.fde-window { overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-surface); box-shadow: var(--shadow-lg); }
.fde-window__bar { display: flex; align-items: center; gap: 0.75rem; padding: 10px 14px; border-block-end: 1px solid var(--color-line); background: var(--color-surface-2); }
.fde-window__dots { display: flex; gap: 6px; }
.fde-window__dots span { inline-size: 10px; block-size: 10px; border-radius: 999px; background: var(--color-line-strong); }
.fde-window__address {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: 0.8125rem;
}
.fde-window__screen img { display: block; inline-size: 100%; block-size: auto; }
.fde-intro__caption { margin-block-start: 0.75rem; color: var(--color-muted); font-size: 0.8125rem; text-align: center; }
.fde-intro__caption:empty { display: none; }

}
/* /assets/frootbox-de/theme/overrides/frootbox/theme-base/blocks/Features/assets/fde-features.css */
@layer blocks {
/* frootbox.de: the band with checks and the cards on a white band. */
.fde-checks { border-block: 1px solid var(--color-line); background: var(--color-surface); }
.fde-checks__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin-block: 0; padding-block: 2rem; padding-inline: 0; list-style: none; }
.fde-checks__item { display: flex; align-items: flex-start; gap: 0.75rem; }
.fde-checks__heading { margin: 0; font-size: 1rem; line-height: 1.5; }
.fde-checks__text { margin: 0; color: var(--color-muted); font-size: 0.9375rem; }

.fde-band--surface { border-block: 1px solid var(--color-line); background: var(--color-surface); }
.fde-band > .base-wrap { padding-block: 6rem; }
.fde-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }

}
/* /assets/frootbox/theme-base/blocks/Features/assets/features.css */
@layer blocks {
.base-features { display: flex; flex-direction: column; gap: var(--space-m); }
.base-features__title { margin: 0; font-size: var(--size-2xl); }
/* Side by side where there is room, else one below the other. */
.base-features__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--space-m) var(--space-l); margin: 0; padding: 0; list-style: none; }
.base-features__item { display: flex; flex-direction: column; gap: var(--space-2xs); }
.base-features__icon { display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; margin-block-end: var(--space-2xs); border-radius: var(--radius); background: var(--color-surface); color: var(--color-primary); }
.base-features__icon svg { inline-size: 1.75rem; block-size: 1.75rem; }
.base-features__heading { margin: 0; font-size: var(--size-l); }
.base-features__text { margin: 0; color: var(--color-muted); }

}
/* /assets/frootbox-de/theme/overrides/frootbox/theme-base/blocks/Steps/assets/fde-steps.css */
@layer blocks {
/* frootbox.de: the steps as cards with small pictures of the editing mode. */
.fde-steps > .base-wrap { padding-block: 6rem 3rem; }
.fde-steps__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.fde-steps__heading { margin: 0; font-size: 1.25rem; line-height: 1.2; }
.fde-steps__picture { margin-block-start: auto; }
.fde-steps__picture--toggle,
.fde-steps__picture--status { display: flex; align-items: center; gap: 0.75rem; padding: 12px 14px; border-radius: var(--radius-s); background: var(--color-surface-2); }
.fde-steps__picture--toggle { justify-content: space-between; font-size: 0.875rem; font-weight: 600; }
.fde-steps__picture--status { flex-wrap: wrap; gap: 0.5rem; color: var(--color-muted); }
.fde-switch { position: relative; inline-size: 40px; block-size: 24px; border-radius: 999px; background: var(--color-primary); }
.fde-switch::after { content: ''; position: absolute; inset-block-start: 3px; inset-inline-end: 3px; inline-size: 18px; block-size: 18px; border-radius: 999px; background: var(--color-primary-contrast); }
.fde-steps__picture--picker { display: flex; flex-direction: column; gap: 2px; padding: 4px; border: 1px solid var(--color-line); border-radius: var(--radius-s); font-size: 0.875rem; list-style: none; }
.fde-steps__picture--picker li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-xs); }
.fde-steps__picture--picker svg { color: var(--color-muted); }
.fde-steps__picture--picker .is-active { background: var(--color-primary-soft); color: var(--color-primary-text); font-weight: 600; }
.fde-steps__picture--picker .is-active svg { color: currentColor; }
.fde-steps__plus { margin-inline-start: auto; }

}
/* /assets/frootbox/theme-base/blocks/Steps/assets/steps.css */
@layer blocks {
.base-steps { display: flex; flex-direction: column; gap: var(--space-m); }
.base-steps__title { margin: 0; font-size: var(--size-2xl); }
/* Side by side where there is room, else one below the other. */
.base-steps__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--space-m); margin: 0; padding: 0; list-style: none; counter-reset: base-step; }
.base-steps__item { display: flex; flex-direction: column; gap: var(--space-2xs); counter-increment: base-step; }
.base-steps__item::before { content: counter(base-step); display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%; background: var(--color-primary); color: var(--color-primary-contrast); font-weight: 700; font-variant-numeric: tabular-nums; }
.base-steps__heading { margin: 0; font-size: var(--size-l); }
.base-steps__text { margin: 0; color: var(--color-muted); }

}
/* /assets/frootbox-de/theme/blocks/Install/assets/install.css */
@layer blocks {
/* Install after the draft: text beside a card with two ways as tabs. */
.fde-install__inner { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 3rem; padding-block: 3rem 6rem; }
.fde-install__text { display: flex; flex: 1 1 360px; flex-direction: column; gap: 1rem; min-inline-size: 0; }
.fde-install__link { margin: 0.5rem 0 0; font-size: 0.9375rem; font-weight: 600; }
.fde-install__link:empty { display: none; }

.fde-tabs { flex: 1.4 1 520px; min-inline-size: 0; overflow: hidden; }
.fde-tabs__list { display: flex; gap: 4px; padding: 0 1rem; border-block-end: 1px solid var(--color-line); }
.fde-tabs__list[hidden] { display: none; }
.fde-tabs__list button {
  block-size: 3rem;
  padding: 0 0.75rem;
  border: 0;
  border-block-end: 3px solid transparent;
  background: transparent;
  color: var(--color-text);
  font: 600 0.9375rem var(--font-body);
}
.fde-tabs__list [aria-selected="true"] { border-block-end-color: var(--color-primary); }
.fde-tabs__label { margin: 0; padding: 1.5rem 1.5rem 0; font-weight: 700; }
.fde-tabs.is-ready .fde-tabs__label { display: none; }
.fde-tabs__panel + .fde-tabs__panel { border-block-start: 1px solid var(--color-line); }
.fde-tabs.is-ready .fde-tabs__panel { border: 0; }

.fde-install__steps { display: flex; flex-direction: column; gap: 1.25rem; margin: 0; padding: 1.5rem; list-style: none; }
.fde-install__steps li { display: flex; gap: 1rem; }
.fde-install__heading { margin: 0; font-size: 1rem; line-height: 1.5; }
.fde-install__step { color: var(--color-muted); font-size: 0.9375rem; }
.fde-install__step p { margin: 0; }
.fde-install__download { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 0; padding: 0 1.5rem 1.5rem; }
.fde-install__meta { color: var(--color-muted); font-size: 0.875rem; }

.fde-terminal {
  margin: 0;
  padding: 1.5rem;
  border-radius: 0;
  background: var(--color-dark);
  color: var(--color-surface);
  font: 0.875rem/1.7 var(--font-mono);
}
.fde-install__note p { margin: 0; padding: 1rem 1.5rem; color: var(--color-muted); font-size: 0.875rem; }

}
/* /assets/frootbox-de/theme/blocks/Showcase/assets/showcase.css */
@layer blocks {
/* Text with code after the draft: the code in a dark window with its file name. */
.fde-showcase__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 3rem; padding-block: 6rem; }
.fde-showcase__text { display: flex; flex: 1 1 380px; flex-direction: column; gap: 1rem; min-inline-size: 0; }
.fde-code {
  flex: 1.2 1 480px;
  min-inline-size: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-dark);
  box-shadow: var(--shadow-lg);
}
.fde-code__file {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-block-end: 1px solid #ffffff1f;
  color: var(--color-inverse-muted);
  font: 0.8125rem var(--font-mono);
}
.fde-code__body { margin: 0; padding: 1.25rem; border-radius: 0; background: none; color: var(--color-surface); font: 0.875rem/1.7 var(--font-mono); }

}
/* /assets/frootbox-de/theme/blocks/OpenBand/assets/open-band.css */
@layer blocks {
/* The dark band after the draft: text and links beside figures in boxes. */
.fde-open { background: var(--color-dark); color: var(--color-surface); }
.fde-open__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 3rem; padding-block: 6rem; }
.fde-open__text { display: flex; flex: 1 1 420px; flex-direction: column; gap: 1rem; min-inline-size: 0; }
.fde-open__figures { display: grid; flex: 1 1 420px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; min-inline-size: 0; margin: 0; }
.fde-open__figure { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding: 1.25rem; border: 1px solid #ffffff26; border-radius: var(--radius); }
.fde-open__figure dd { margin: 0; font-size: 1.875rem; font-weight: 700; line-height: 1.2; }
.fde-open__figure dt { color: var(--color-inverse-muted); font-size: 0.9375rem; }

}
/* /assets/frootbox-de/theme/blocks/Services/assets/services.css */
@layer blocks {
/* The services after the draft: cards beside a panel with an example table. */
.fde-services { padding-block: 6rem; }
.fde-services__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-block-end: 2.5rem; }
.fde-services__body { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.fde-services__cards { display: flex; flex: 1 1 300px; flex-direction: column; gap: 1.25rem; min-inline-size: 0; margin: 0; padding: 0; list-style: none; }
.fde-services__panel { flex: 2 1 520px; min-inline-size: 0; }
.fde-services__panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.fde-services__note { margin: 0; color: var(--color-muted); font-size: 0.875rem; }
.fde-services__note:empty { display: none; }

.fde-table { position: relative; overflow-x: auto; border: 1px solid var(--color-line); border-radius: var(--radius-s); }
.fde-table table { inline-size: 100%; min-inline-size: 480px; border-collapse: collapse; font-size: 0.875rem; }
.fde-table thead tr { background: var(--color-surface-2); text-align: start; }
.fde-table th { padding: 10px 14px; color: var(--color-muted); font-size: 0.75rem; letter-spacing: 0.06em; text-align: start; text-transform: uppercase; }
.fde-table tbody tr { border-block-start: 1px solid var(--color-line); }
.fde-table td { padding: 12px 14px; }
.fde-table__site { font-weight: 600; }
.fde-table__muted { color: var(--color-muted); }
td.fde-table__end { padding-block: 8px; text-align: end; }

}
/* /assets/frootbox-de/theme/blocks/Invitation/assets/invitation.css */
@layer blocks {
/* The invitation after the draft: a light box with two buttons. */
.fde-invitation { padding-block-end: 6rem; }
.fde-invitation__box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 3rem;
  border-radius: var(--radius);
  background: var(--color-primary-soft);
}
.fde-invitation__text { max-inline-size: 40rem; }
.fde-invitation__title { margin: 0 0 0.5rem; font-size: 1.875rem; font-weight: 700; line-height: 1.2; }
@media (max-width: 40rem) { .fde-invitation__box { padding: 1.5rem; } }

}
/* /assets/frootbox/theme-base/assets/partials.css */
@layer theme {
/*
 * The head and foot of the base theme (decision 0162), in the layer of the
 * theme. A child theme replaces this file or overrides single classes.
 */

/* Head: brand at the start, menu and search at the end. Below 48rem the menu opens as a popover. */
.base-header { border-block-end: var(--border); background: var(--color-bg); }
.base-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); min-block-size: 4rem; padding-block: var(--space-2xs); }
.base-header__brand { display: inline-flex; align-items: center; gap: var(--space-2xs); color: var(--color-text); font-family: var(--font-heading); font-size: var(--size-l); font-weight: 700; text-decoration: none; }
.base-header__brand img { max-block-size: 2.75rem; inline-size: auto; }

.base-header__end { display: flex; align-items: center; gap: var(--space-2xs); }
.base-header__search { display: inline-grid; place-items: center; min-inline-size: 2.75rem; min-block-size: 2.75rem; border-radius: var(--radius); color: var(--color-text); }
.base-header__search:hover { background: var(--color-surface); }

.base-header :is(.base-header__toggle, .base-header__close) {
  display: inline-grid;
  place-items: center;
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
}

/* Closed, the browser hides the popover; the rules below only apply when it is open. */
.base-header__menu:popover-open {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  position: fixed;
  inset-block: 0;
  inset-inline: auto 0;
  inline-size: min(22rem, 100%);
  block-size: 100%;
  margin: 0;
  padding: var(--space-m);
  border: 0;
  border-inline-start: var(--border);
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: var(--shadow);
  overflow-y: auto;
}
.base-header__menu::backdrop { background: rgb(0 0 0 / 0.3); }
.base-header__close { align-self: flex-end; }

@media (min-width: 48rem) {
  .base-header__end { display: flex; align-items: center; gap: var(--space-2xs); }
.base-header__search { display: inline-grid; place-items: center; min-inline-size: 2.75rem; min-block-size: 2.75rem; border-radius: var(--radius); color: var(--color-text); }
.base-header__search:hover { background: var(--color-surface); }

.base-header :is(.base-header__toggle, .base-header__close) { display: none; }
  .base-header__menu,
  .base-header__menu:popover-open {
    position: static;
    display: flex;
    flex-direction: row;
    gap: var(--space-s);
    margin: 0;
    color: inherit;
    align-items: center;
    inline-size: auto;
    block-size: auto;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
    inset: auto;
  }
  .base-header__menu::backdrop { display: none; }
}

/* Navigation: a column in the popover, a row in the head from 48rem. */
.base-nav__list, .base-nav ul { margin: 0; padding: 0; list-style: none; }
.base-nav__list { display: flex; flex-direction: column; gap: var(--space-3xs); }
.base-nav :is(a, summary, .base-nav__heading) {
  display: flex;
  align-items: center;
  min-block-size: 2.75rem;
  padding-inline: var(--space-2xs);
  border-radius: calc(var(--radius) / 2);
  color: var(--color-text);
  text-decoration: none;
}
.base-nav a:hover, .base-nav summary:hover { background: var(--color-surface); }
.base-nav :is([aria-current="page"], .is-active) { color: var(--color-primary); font-weight: 600; }
.base-nav__heading { color: var(--color-muted); font-size: var(--size-s); }
.base-nav a.base-nav__button {
  justify-content: center;
  padding-inline: var(--space-s);
  border-radius: var(--radius-button);
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  font-weight: 600;
}
.base-nav a.base-nav__button:hover { background: var(--color-primary); text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
.base-nav summary { gap: var(--space-3xs); cursor: pointer; list-style: none; }
.base-nav summary::-webkit-details-marker { display: none; }
.base-nav summary::after { content: ""; inline-size: 0.45em; block-size: 0.45em; border-inline-end: 2px solid; border-block-end: 2px solid; rotate: 45deg; translate: 0 -0.15em; margin-inline-start: auto; }
.base-nav details[open] > summary::after { rotate: 225deg; translate: 0 0.15em; }
.base-nav details ul { padding-inline-start: var(--space-s); }

@media (min-width: 48rem) {
  .base-nav--main .base-nav__list { flex-direction: row; flex-wrap: wrap; }
  .base-nav--main summary::after { margin-inline-start: var(--space-3xs); }
  .base-nav--main details { position: relative; }
  .base-nav--main details ul {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 0;
    z-index: 5;
    min-inline-size: 14rem;
    padding: var(--space-3xs);
    border: var(--border);
    border-radius: var(--radius);
    background: var(--color-bg);
    box-shadow: var(--shadow);
  }
}

/* Languages, each named in its own. */
.base-languages { display: flex; flex-wrap: wrap; gap: var(--space-3xs); margin: 0; padding: 0; list-style: none; font-size: var(--size-s); }
.base-languages :is(a, span) { display: inline-flex; align-items: center; min-block-size: 2.75rem; padding-inline: var(--space-2xs); border-radius: calc(var(--radius) / 2); color: var(--color-text); text-decoration: none; }
.base-languages a:hover { background: var(--color-surface); }
.base-languages [aria-current] { font-weight: 600; }

/* Breadcrumbs with a separator that turns with the direction of the text. */
.base-breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-3xs) var(--space-2xs); margin: 0; padding: 0; list-style: none; font-size: var(--size-s); color: var(--color-muted); }
.base-breadcrumb li + li::before { content: "/"; margin-inline-end: var(--space-2xs); opacity: 0.6; }
.base-breadcrumb a { color: inherit; }

/* Foot: name and address, then the links, profiles, the note and the languages. */
.base-footer { margin-block-start: var(--space); border-block-start: var(--border); background: var(--color-surface); color: var(--color-muted); font-size: var(--size-s); }
.base-footer__inner { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: var(--space-m) var(--space-xl); padding-block: var(--space-xl); }
.base-footer__site { display: flex; flex-direction: column; gap: var(--space-3xs); }
.base-footer__brand { color: var(--color-text); font-family: var(--font-heading); font-weight: 700; }
.base-footer .base-nav__list { flex-direction: row; flex-wrap: wrap; }
.base-footer .base-nav a { color: inherit; }
.base-footer__profiles { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; }
.base-footer__profiles a { display: inline-flex; align-items: center; min-block-size: 2.75rem; color: inherit; }
/* Columns of the footer navigation (decision 0195): as many next to each other as fit. */
.base-footer__nav { display: flex; flex: 1 1 30rem; flex-direction: column; gap: var(--space-m); }
.base-footer__columns { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr)); gap: var(--space-m) var(--space-xl); }
.base-footer__heading { margin: 0 0 var(--space-3xs); color: var(--color-text); font-weight: 700; }
.base-footer .base-footer__column a { display: inline-flex; min-block-size: 2rem; padding-inline: 0; color: inherit; }
.base-footer .base-footer__column a:hover { background: none; text-decoration: underline; text-underline-offset: 0.18em; }
/* Note and languages at the bottom, the languages at the end of the line. */
.base-footer__bottom { display: flex; flex-basis: 100%; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2xs) var(--space-m); }
.base-footer__note { margin: 0; }
/* Links with room for hover stand on the edge with their text, as the columns do. */
.base-footer :is(.base-footer__nav > .base-nav__list, .base-languages) { margin-inline: calc(-1 * var(--space-2xs)); }
.base-footer .base-languages :is(a, span) { color: inherit; }
.base-footer .base-languages [aria-current] { color: var(--color-text); }
.base-footer .base-languages a:hover { background: var(--color-bg); }
/* The privacy settings (decision 0224) look like the links next to them. */
.base-footer .privacy-settings__button { padding: 0; border: 0; background: none; color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
.base-footer .privacy-settings__button:hover { color: var(--color-text); }

/* The error page (decision 0189): like the head of a subpage, with a way back. */
.base-error__head { display: flex; flex-direction: column; align-items: start; gap: var(--space-s); padding-block: var(--space-2xl) var(--space-xl); }
.base-error__status { margin: 0; font-size: var(--size-s); font-weight: 600; color: var(--color-muted); }
.base-error__title { margin: 0; font-size: var(--size-4xl); max-inline-size: 24ch; }
.base-error__text { margin: 0; max-inline-size: var(--width-narrow); font-size: var(--size-l); color: var(--color-muted); }
.base-error__actions { margin: 0; }
.base-error__actions a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  padding: var(--space-2xs) var(--space-m);
  border-radius: var(--radius-button);
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  font-weight: 600;
  text-decoration: none;
}
.base-error__actions a:hover { text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }

/* Technical details, in development only. */
.fb-error-details { padding-block: var(--space-m); border-block-start: var(--border); font-size: var(--size-s); }
.fb-error-details summary { cursor: pointer; color: var(--color-muted); }
.fb-error-details__exception { display: flex; flex-direction: column; gap: var(--space-3xs); margin-block-start: var(--space-m); }
.fb-error-details__exception p { margin: 0; overflow-wrap: anywhere; }
.fb-error-details__class, .fb-error-details__file { color: var(--color-muted); }
.fb-error-details pre { margin: 0; padding: var(--space-s); overflow-x: auto; border-radius: var(--radius); background: var(--color-surface); font-size: var(--size-xs); }

}
/* /assets/frootbox-de/theme/assets/site.css */
@layer theme {
/*
 * frootbox.de after the draft of the agency (decisions 0190, 0201 of the
 * CMS). The head, the foot and the pieces every block of this theme
 * shares: buttons, badges, cards, checks and the head of a section. The
 * values come from the draft, the colours from the tokens in frootbox.yaml.
 */

/* The head stays at the top: 36px of buttons, 12px above and below, the line. */
:root { --base-sticky-top: 61px; }

body { font-size: 1rem; }
/* The draft wraps lines plainly, without balancing them. */
:is(h1, h2, h3, h4, h5, h6, p, li) { text-wrap: wrap; }
a { color: var(--color-primary-text); }
a:hover { color: var(--color-primary); }
:focus-visible { outline-width: 2px; }

.fde-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------------ the head */

.fde-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 10;
  border-block-end: 1px solid var(--color-line);
  background: var(--color-surface);
}
.fde-header__inner { display: flex; align-items: center; gap: 0.75rem 1.5rem; padding-block: 0.75rem; }
/* The word of the logo takes the colour of the text, also on hover. */
.fde-header__brand, .fde-header__brand:hover { display: flex; align-items: center; color: var(--color-text); }
.fde-logo { display: block; block-size: 26px; inline-size: auto; }

.fde-header :is(.fde-header__toggle, .fde-header__close) {
  display: inline-grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  margin-inline-start: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--color-text);
}
.fde-header :is(.fde-header__toggle, .fde-header__close):hover { background: var(--color-surface-2); }

.fde-header__menu:popover-open {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: fixed;
  inset-block: 0;
  inset-inline: auto 0;
  inline-size: min(20rem, 100%);
  block-size: 100%;
  margin: 0;
  padding: 0.75rem 1.5rem 1.5rem;
  border: 0;
  border-inline-start: 1px solid var(--color-line);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
}
.fde-header__menu::backdrop { background: rgb(0 35 55 / 0.3); }

.fde-nav ul, .fde-header__actions { margin: 0; padding: 0; list-style: none; }
.fde-nav ul { display: flex; flex-direction: column; gap: 0.25rem; }
.fde-nav a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius-s);
  color: var(--color-muted);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}
.fde-nav a:hover, .fde-nav a[aria-current] { background: var(--color-surface-2); color: var(--color-text); }
.fde-header__actions { display: flex; flex-direction: column; gap: 0.5rem; }

@media (min-width: 64rem) {
  .fde-header :is(.fde-header__toggle, .fde-header__close) { display: none; }
  .fde-header__menu,
  .fde-header__menu:popover-open {
    position: static;
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem 1.5rem;
    inline-size: auto;
    block-size: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: inherit;
    overflow: visible;
    inset: auto;
  }
  .fde-header__menu::backdrop { display: none; }
  .fde-nav { flex: 1 1 auto; }
  .fde-nav ul { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .fde-header__actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
}

/* ------------------------------------------------------------- the foot */

.fde-footer { border-block-start: 1px solid var(--color-line); background: var(--color-surface); }
.fde-footer__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2rem;
  padding-block: 3.5rem 2rem;
}
.fde-footer__site { display: flex; flex-direction: column; align-items: start; gap: 0.75rem; }
.fde-footer__site .fde-logo { block-size: 36px; }
.fde-footer__site p { margin: 0; color: var(--color-muted); font-size: 0.875rem; }
.fde-footer__column { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.9375rem; }
.fde-footer__heading {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.fde-footer__column ul { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.fde-footer a { color: var(--color-muted); text-decoration: none; }
.fde-footer a:hover { color: var(--color-text); }
.fde-footer__bottom {
  /* The line runs 24px beyond the content, as in the draft. */
  inline-size: min(100%, var(--width) + 2 * var(--gutter));
  padding-inline: var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 1rem 2rem;
  border-block-start: 1px solid var(--color-line);
  color: var(--color-muted);
  font-size: 0.875rem;
}
.fde-footer__bottom p { margin: 0; }
.fde-languages { display: inline-flex; gap: 4px; margin: 0; padding: 2px; border-radius: var(--radius-s); background: var(--color-surface-2); list-style: none; }
.fde-languages :is(a, span) { display: block; padding: 4px 10px; border-radius: var(--radius-xs); }
.fde-languages [aria-current] { background: var(--color-surface); color: var(--color-text); font-weight: 600; box-shadow: var(--shadow); }

/* -------------------------------------------------------------- buttons */

/*
 * A button is a link with the class, or a wrapper around a link field:
 * <span class="fde-button fde-button--primary">{{ field('link') }}</span>.
 * The size comes from the modifier: 48px, --m 44px, --s 36px.
 */
.fde-button { --fde-height: 3rem; --fde-pad: 1.25rem; --fde-size: 1rem; }
.fde-button--m { --fde-height: 2.75rem; --fde-pad: 1rem; --fde-size: 0.9375rem; }
.fde-button--s { --fde-height: 2.25rem; --fde-pad: 0.75rem; --fde-size: 0.875rem; }
span.fde-button:not(.fde-button--static) { display: contents; }
:is(a.fde-button, .fde-button > a, .fde-button--static) {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  block-size: var(--fde-height);
  padding: 0 var(--fde-pad);
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  color: var(--color-text);
  font-size: var(--fde-size);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
:is(a.fde-button, .fde-button > a):hover { background: var(--color-surface-2); color: var(--color-text); }
.fde-button--primary:is(a), .fde-button--primary > a { background: var(--color-primary); color: var(--color-primary-contrast); }
.fde-button--primary:is(a):hover, .fde-button--primary > a:hover { background: var(--color-primary-hover); color: var(--color-primary-contrast); }
:is(.fde-button--outline:is(a, .fde-button--static), .fde-button--outline > a) { border-color: var(--color-line-strong); background: var(--color-surface); }
.fde-button--outline > a:hover, a.fde-button--outline:hover { background: var(--color-surface-2); }
.fde-button--tonal > a { background: var(--color-primary-soft); color: var(--color-primary-text); }
.fde-button--tonal > a:hover { background: var(--color-primary-soft-hover); color: var(--color-primary-text); }
.fde-button--inverse > a { background: var(--color-surface); color: var(--color-dark); }
.fde-button--inverse > a:hover { background: var(--color-surface-2); color: var(--color-dark); }
.fde-button--quiet > a { padding-inline: 0.75rem; color: var(--color-inverse-muted); text-decoration: underline; text-underline-offset: 0.18em; }
.fde-button--quiet > a:hover { background: none; color: var(--color-surface); }

/* Symbols of the draft in front of or behind a link field. */
:is(.fde-button--arrow, .fde-button--download, .fde-button--github) > a::before,
.fde-button--arrow > a::after {
  inline-size: 20px;
  block-size: 20px;
  flex: none;
  background: currentColor;
  mask: var(--fde-symbol) center / contain no-repeat;
}
.fde-button--arrow > a::after { content: ''; --fde-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E"); }
.fde-button--download > a::before { content: ''; --fde-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E"); }
.fde-button--github > a::before { content: ''; --fde-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='5' r='2'/%3E%3Ccircle cx='6' cy='19' r='2'/%3E%3Ccircle cx='18' cy='8' r='2'/%3E%3Cpath d='M6 7v10'/%3E%3Cpath d='M18 10c0 4-6 3-11.5 7.5'/%3E%3C/svg%3E"); }
.fde-button--arrow > a:dir(rtl)::after { scale: -1 1; }

.fde-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 0; }
.fde-actions--more { margin-block-start: 2rem; }
.fde-actions:not(:has(a, [contenteditable], [data-fb-field])) { display: none; }

/* -------------------------------------------------- badges and numbers */

.fde-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--color-surface-2);
  color: var(--color-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}
.fde-badge:empty { display: none; }
.fde-badge:is(.fde-badge--success, .fde-badge--warning, .fde-badge--info, .fde-badge--error)::before {
  content: '';
  inline-size: 8px;
  block-size: 8px;
  border-radius: 999px;
  background: currentColor;
}
.fde-badge--success { background: var(--color-success-bg); color: var(--color-success); }
.fde-badge--warning { background: var(--color-warning-bg); color: var(--color-warning); }
.fde-badge--info { background: var(--color-info-bg); color: var(--color-info); }
.fde-badge--error { background: var(--color-error-bg); color: var(--color-error); }

.fde-number {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 999px;
  background: var(--color-primary-soft);
  color: var(--color-primary-text);
  font-weight: 700;
}

/* ---------------------------------------------------------------- cards */

.fde-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 1.25rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-bg);
}
.fde-card--raised { background: var(--color-surface); box-shadow: var(--shadow); }
.fde-card--roomy { padding: 1.5rem; }
.fde-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: var(--radius-s);
  background: var(--color-primary-soft);
  color: var(--color-primary-text);
}
.fde-card__icon svg { inline-size: 20px; block-size: 20px; }
.fde-card__icon:empty { display: none; }
.fde-card__heading { margin: 0; font-size: 1.125rem; line-height: 1.2; }
.fde-card__text { margin: 0; color: var(--color-muted); font-size: 0.9375rem; }
.fde-card__text:empty { display: none; }

/* ---------------------------------------------------------- the checks */

.fde-checklist { display: flex; flex-direction: column; gap: 10px; margin: 0.5rem 0 0; padding: 0; font-size: 0.9375rem; list-style: none; }
.fde-checklist--roomy { gap: 0.75rem; }
.fde-checklist li { display: flex; gap: 10px; }
.fde-checklist:empty { display: none; }
.fde-check { flex: none; color: var(--color-primary); }
.fde-check--success { color: var(--color-success); }

/* ----------------------------------------------- the head of a section */

.fde-head { max-inline-size: 45rem; margin-block-end: 2.5rem; }
.fde-head__eyebrow {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.fde-head__title { margin: 0; font-size: clamp(1.875rem, 3.4vw, 2.5rem); font-weight: 700; line-height: 1.15; }
.fde-head .fde-head__title { margin-block: 0.5rem 0.75rem; }
.fde-head__intro { margin: 0; color: var(--color-muted); font-size: 1.125rem; }
:is(.fde-head__eyebrow, .fde-head__intro):empty { display: none; }

/* ------------------------------------------- a command to copy */

/*
 * <fde-copy class="fde-command"> with a prompt, the command in <code> and
 * a button that assets/copy.js shows. In the intro and the directory.
 */
.fde-command {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-block-size: 50px;
  padding: 6px 6px 6px 16px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-s);
  background: var(--color-surface);
  font-family: var(--font-mono);
  font-size: 0.875rem;
}
.fde-command__prompt { color: var(--color-muted); }
.fde-command__code { flex: 1 1 auto; min-inline-size: 0; padding: 0; background: none; font-size: inherit; overflow-wrap: anywhere; }
.fde-command__copy {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  block-size: 2.25rem;
  padding: 0 0.75rem;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--color-text);
  font: 600 0.875rem var(--font-body);
}
.fde-command__copy:hover { background: var(--color-surface-2); }

/* ------------------------------------------- shared pieces in blocks */

/*
 * The styles of the blocks lie in the layer "blocks", below this file
 * (decision 0103). Where a block changes a shared piece, the rule stands
 * here, so it wins.
 */
.fde-tabs.fde-card { display: block; padding: 0; }
.fde-steps__item.fde-card { gap: 1rem; padding: 1.5rem; }
.fde-services__panel.fde-card { gap: 1rem; }
.fde-services__head .fde-head { max-inline-size: 42.5rem; margin: 0; }
.fde-services__panel-head .fde-card__text { margin-block-start: 4px; }
:is(.fde-showcase__text, .fde-open__text) .fde-actions { margin-block-start: 0.5rem; }
.fde-open :is(.fde-head__eyebrow, .fde-head__intro) { color: var(--color-inverse-muted); }
:is(.fde-install__step, .fde-install__note, .fde-intro__note) :not(pre) > code { padding: 0; background: none; }

}