/* Cueflow docs site. Every color, font and shape is a --cf-site-* variable: the kit's theme/theme.css restyles the
   site (and, through the --cf-* player variables set here, the players inside it). Neutral defaults, light, with a
   dark set used when site.json asks for it ("colorScheme": "dark", or "auto" to follow the system).
   The defaults sit in :where() (no specificity), so any :root rule of a theme wins over them, light or dark. */
:where(:root) {
  color-scheme: light;
  --cf-site-bg: #fafaf9; --cf-site-fg: #1c1c1c; --cf-site-muted: #66666a; --cf-site-faint: #8c8c90; --cf-site-line: #e4e4e2;
  --cf-site-panel: #f1f1ef; --cf-site-card: #fff;
  --cf-site-primary: #23314a; --cf-site-primary-hover: #36507a; /* buttons, headings */
  --cf-site-on-primary: #fff;                                   /* text and icons on the primary color */
  /* calls to action (watch the video, play, send): the primary color unless a theme gives the brand's own */
  --cf-site-cta: var(--cf-site-primary); --cf-site-cta-hover: var(--cf-site-primary-hover); --cf-site-on-cta: var(--cf-site-on-primary);
  --cf-site-accent: #c2410c; --cf-site-accent-ink: #9a3412;     /* kickers, active marks */
  --cf-site-hero: #eef0f3; --cf-site-band: #f2f1ec; --cf-site-cover: #eceae5; --cf-site-cover-ink: #23314a;
  --cf-site-row-alt: #f1f0ec;                                   /* every other row (module) of the home */
  /* light themes: the featured card a shade darker than the theme's hero, and the cards lifted by a soft shadow (no borders) */
  --cf-site-billboard: color-mix(in srgb, var(--cf-site-hero), var(--cf-site-fg) 7%);
  --cf-site-card-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 22px rgba(15, 23, 42, .08);
  --cf-site-veil: #fff;                                         /* labels and panels laid over pictures */
  --cf-site-field-bg: #fff; --cf-site-field-line: #ccc;         /* form fields */
  --cf-site-rail-bg: #fff; --cf-site-rail-fg: #66666a; --cf-site-rail-active: #eef0f4;
  --cf-site-side-bg: #2b3140; --cf-site-side-fg: rgba(255, 255, 255, .78); --cf-site-side-strong: #fff; --cf-site-side-accent: #f2b880;
  --cf-site-ok-bg: #eef6f0; --cf-site-ok: #2f7d4f; --cf-site-err-bg: #fbefec; --cf-site-err: #b4472f;
  --cf-site-font: 15px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cf-site-heading-font: inherit;
  --cf-site-radius: 6px; --cf-site-tile-radius: 4px;
  --cf-site-rail-w: 72px;
}
:where(:root[data-cf-scheme="dark"]) {
  color-scheme: dark;
  --cf-site-bg: #15171c; --cf-site-fg: #ececee; --cf-site-muted: #a6a7ad; --cf-site-faint: #8a8b92; --cf-site-line: #2d3038;
  --cf-site-panel: #1f2229; --cf-site-card: #1c1f25;
  --cf-site-primary: #e6e9f0; --cf-site-primary-hover: #fff; --cf-site-on-primary: #15171c;
  --cf-site-accent: #f08a4b; --cf-site-accent-ink: #f5a372;
  --cf-site-hero: #1b1e24; --cf-site-band: #191b21; --cf-site-cover: #262a31; --cf-site-cover-ink: #e6e9f0; --cf-site-row-alt: #1b1e25;
  --cf-site-billboard: var(--cf-site-hero); --cf-site-card-shadow: none;
  --cf-site-cover-shade: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .55)); /* a dark site needs a deeper veil to show it */
  --cf-site-veil: #1c1f25; --cf-site-field-bg: #121418; --cf-site-field-line: #3a3d45;
  --cf-site-rail-bg: #121418; --cf-site-rail-fg: #a6a7ad; --cf-site-rail-active: #23262d;
  --cf-site-side-bg: #101215;
  --cf-site-ok-bg: rgba(74, 222, 128, .14); --cf-site-ok: #6ee7a0; --cf-site-err-bg: rgba(248, 113, 113, .14); --cf-site-err: #fca5a5;
}
@media (prefers-color-scheme: dark) {
  :where(:root[data-cf-scheme="auto"]) {
    color-scheme: dark;
    --cf-site-bg: #15171c; --cf-site-fg: #ececee; --cf-site-muted: #a6a7ad; --cf-site-faint: #8a8b92; --cf-site-line: #2d3038;
    --cf-site-panel: #1f2229; --cf-site-card: #1c1f25;
    --cf-site-primary: #e6e9f0; --cf-site-primary-hover: #fff; --cf-site-on-primary: #15171c;
    --cf-site-accent: #f08a4b; --cf-site-accent-ink: #f5a372;
    --cf-site-hero: #1b1e24; --cf-site-band: #191b21; --cf-site-cover: #262a31; --cf-site-cover-ink: #e6e9f0; --cf-site-row-alt: #1b1e25;
  --cf-site-billboard: var(--cf-site-hero); --cf-site-card-shadow: none;
  --cf-site-cover-shade: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .55)); /* a dark site needs a deeper veil to show it */
    --cf-site-veil: #1c1f25; --cf-site-field-bg: #121418; --cf-site-field-line: #3a3d45;
    --cf-site-rail-bg: #121418; --cf-site-rail-fg: #a6a7ad; --cf-site-rail-active: #23262d;
    --cf-site-side-bg: #101215;
    --cf-site-ok-bg: rgba(74, 222, 128, .14); --cf-site-ok: #6ee7a0; --cf-site-err-bg: rgba(248, 113, 113, .14); --cf-site-err: #fca5a5;
  }
}
/* the players of the site take the site's look */
.cf-site {
  --cf-bg: var(--cf-site-bg); --cf-fg: var(--cf-site-fg); --cf-muted: var(--cf-site-muted); --cf-accent: var(--cf-site-cta); --cf-on-accent: var(--cf-site-on-cta);
  --cf-surface: var(--cf-site-card); --cf-line: var(--cf-site-line); --cf-font: var(--cf-site-font);
  --cf-stage-radius: 0; --cf-stage-shadow: none; --cf-stage-bg: var(--cf-site-panel); --cf-control-radius: var(--cf-site-radius);
}
.cf-site, .cf-site * { box-sizing: border-box; }
.cf-site { margin: 0; background: var(--cf-site-bg); color: var(--cf-site-fg); font: var(--cf-site-font); -webkit-font-smoothing: antialiased; }
.cf-site :focus-visible { outline: 2px solid var(--cf-site-accent); outline-offset: 3px; }
.cf-site a { color: var(--cf-site-primary-hover); }
.cf-site h1, .cf-site h2, .cf-site h3, .cf-site h4 { font-family: var(--cf-site-heading-font); color: var(--cf-site-primary); line-height: 1.25; }
.cf-pad { padding-inline: clamp(20px, 4.5vw, 72px); }
.cf-kicker { font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--cf-site-accent-ink); margin: 0 0 12px; }
.cf-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.cf-btn { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; text-decoration: none; color: var(--cf-site-primary) !important; background: var(--cf-site-panel); padding: 8px 13px; border-radius: var(--cf-site-radius); transition: background .2s, transform .2s; }
.cf-btn:hover { background: var(--cf-site-line); }
.cf-btn.cf-primary { background: var(--cf-site-cta); color: var(--cf-site-on-cta) !important; }
.cf-btn.cf-primary:hover { background: var(--cf-site-cta-hover); }
.cf-btn.cf-ghost { background: color-mix(in srgb, var(--cf-site-veil) 75%, transparent); border: 1px solid var(--cf-site-line); backdrop-filter: blur(6px); }
.cf-big-btn { font-size: 14.5px; padding: 14px 24px; }
.cf-big-btn.cf-primary { box-shadow: 0 10px 24px color-mix(in srgb, var(--cf-site-cta) 22%, transparent); }
.cf-big-btn.cf-primary:hover { transform: translateY(-1px); }

/* ── left bar, drawer, dialog ── */
.cf-shell { padding-left: var(--cf-site-rail-w); }
.cf-bar-left { position: fixed; left: 0; top: 0; bottom: 0; z-index: 60; width: var(--cf-site-rail-w); background: var(--cf-site-rail-bg); border-right: 1px solid var(--cf-site-line);
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 0 18px; }
.cf-bar-left .cf-logo { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--cf-site-accent); margin-bottom: 14px; }
.cf-bar-left .cf-logo svg, .cf-bar-left .cf-logo img { width: 28px; height: 28px; object-fit: contain; }
.cf-rail-btn { position: relative; width: 48px; height: 48px; border: 0; border-radius: 12px; background: transparent; color: var(--cf-site-rail-fg) !important;
  display: flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; transition: background .15s, color .15s; }
.cf-rail-btn:hover { background: var(--cf-site-panel); color: var(--cf-site-primary) !important; }
.cf-rail-btn[aria-current="page"], .cf-rail-btn[aria-expanded="true"] { background: var(--cf-site-rail-active); color: var(--cf-site-primary) !important; }
.cf-rail-btn[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--cf-site-accent); }
.cf-rail-btn svg { width: 21px; height: 21px; }
.cf-spacer { flex: 1; }
/* language of the whole site */
.cf-lang-code { font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.cf-lang-menu { position: absolute; left: 56px; bottom: 0; z-index: 70; min-width: 170px; padding: 6px; background: var(--cf-site-card); border: 1px solid var(--cf-site-line);
  border-radius: 8px; box-shadow: 0 18px 40px rgba(0, 0, 0, .16); display: grid; gap: 2px; }
.cf-lang-menu[hidden] { display: none; }
.cf-lang-menu button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; padding: 8px 10px; border-radius: 6px; font: inherit; font-size: 13.5px;
  color: var(--cf-site-fg); cursor: pointer; text-align: left; }
.cf-lang-menu button b { width: 22px; font-size: 11px; color: var(--cf-site-faint); }
.cf-lang-menu button:hover { background: var(--cf-site-panel); }
.cf-lang-menu button[aria-current="true"] { font-weight: 600; color: var(--cf-site-primary); }
.cf-lang-menu button[aria-current="true"] b { color: var(--cf-site-accent-ink); }
.cf-rail-btn[aria-expanded="true"] .cf-tip { display: none; }
.cf-lang-note { margin: 0 0 14px; padding: 9px 12px; border-left: 3px solid var(--cf-site-accent); background: var(--cf-site-panel); font-size: 13px; color: var(--cf-site-muted); }
.cf-tip { position: absolute; left: 58px; top: 50%; transform: translate(-4px, -50%); white-space: nowrap; pointer-events: none; background: var(--cf-site-primary); color: var(--cf-site-on-primary);
  font-size: 12px; font-weight: 600; padding: 5px 9px; border-radius: 4px; opacity: 0; transition: opacity .15s, transform .15s; }
.cf-rail-btn:hover .cf-tip, .cf-rail-btn:focus-visible .cf-tip { opacity: 1; transform: translate(0, -50%); }

.cf-drawer { position: fixed; left: var(--cf-site-rail-w); top: 0; bottom: 0; z-index: 55; width: min(400px, calc(100vw - var(--cf-site-rail-w))); background: var(--cf-site-card);
  border-right: 1px solid var(--cf-site-line); box-shadow: 24px 0 60px rgba(0, 0, 0, .12); overflow-y: auto; padding: 26px 24px 30px;
  transform: translateX(-102%); visibility: hidden; transition: transform .28s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .28s; }
.cf-drawer.cf-open { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.2, .7, .2, 1); }
.cf-drawer h2 { font-weight: 500; font-size: 24px; margin: 0 0 4px; }
.cf-drawer .cf-sub { font-size: 13px; color: var(--cf-site-faint); margin: 0 0 20px; }
.cf-drawer-title { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cf-site-faint); margin: 22px 0 10px; }
.cf-drawer-list { display: grid; gap: 16px; }
.cf-drawer-soon { list-style: none; margin: 0; padding: 0; }
.cf-drawer-soon li { padding: 9px 0; border-top: 1px solid var(--cf-site-line); font-size: 13.5px; display: flex; justify-content: space-between; gap: 10px; }
.cf-drawer-soon small { color: var(--cf-site-faint); font-size: 11px; white-space: nowrap; }
.cf-drawer-links { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.cf-drawer-links a { font-size: 13.5px; font-weight: 600; text-decoration: none; }
.cf-scrim { position: fixed; inset: 0 0 0 var(--cf-site-rail-w); z-index: 50; background: rgba(0, 0, 0, .18); opacity: 0; pointer-events: none; transition: opacity .25s; }
.cf-scrim.cf-on { opacity: 1; pointer-events: auto; }

.cf-ask-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); border: 0; border-radius: 10px; padding: 30px 32px 28px; box-shadow: 0 30px 80px rgba(0, 0, 0, .3); color: var(--cf-site-fg); font: var(--cf-site-font); }
.cf-ask-dialog::backdrop { background: rgba(0, 0, 0, .35); backdrop-filter: blur(2px); }
.cf-ask-close { position: absolute; right: 14px; top: 12px; margin: 0; }
.cf-ask-close button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--cf-site-panel); color: var(--cf-site-primary); font-size: 20px; line-height: 1; cursor: pointer; }
.cf-ask-dialog h2 { font-weight: 500; font-size: 26px; margin: 0 0 8px; }
.cf-ask-lede { font-size: 14px; color: var(--cf-site-muted); margin: 0 0 20px; }
.cf-ask-form { display: grid; gap: 14px; margin: 0; }
.cf-ask-form label { display: block; font-size: 13px; font-weight: 600; }
.cf-ask-form label span { font-weight: 400; color: var(--cf-site-faint); }
.cf-ask-form input, .cf-ask-form textarea { display: block; width: 100%; margin-top: 6px; font: inherit; font-size: 14.5px; color: var(--cf-site-fg); background: var(--cf-site-field-bg); border: 1px solid var(--cf-site-field-line); border-radius: 4px; padding: 10px 12px; }
.cf-ask-form input:focus, .cf-ask-form textarea:focus { outline: none; border-color: var(--cf-site-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cf-site-primary) 10%, transparent); }
.cf-ask-form textarea { min-height: 90px; resize: vertical; }
.cf-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-ask-note { font-size: 12px; color: var(--cf-site-faint); margin: -4px 0 0; }
.cf-ask-send { font: inherit; font-weight: 600; font-size: 14px; color: var(--cf-site-on-cta); background: var(--cf-site-cta); border: 0; border-radius: 4px; padding: 11px 20px; cursor: pointer; }
.cf-ask-send:hover { background: var(--cf-site-cta-hover); }
.cf-ask-send[disabled] { opacity: .6; cursor: wait; }
.cf-ask-status { margin: 0; font-size: 13.5px; padding: 10px 12px; border-left: 3px solid; }
.cf-ask-status.cf-ok { background: var(--cf-site-ok-bg); border-color: var(--cf-site-ok); }
.cf-ask-status.cf-err { background: var(--cf-site-err-bg); border-color: var(--cf-site-err); }

/* ── tiles and rows ── */
.cf-rail-wrap { position: relative; --tile-w: clamp(260px, 22vw, 340px); }
.cf-rail { display: grid; grid-auto-flow: column; grid-auto-columns: var(--tile-w); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
  /* room around the tiles for their shadow and their lift on hover (a scrolling row clips whatever overflows it), given back
     by the negative margin so the first tile still lines up with the title */
  --rail-bleed: clamp(16px, 4.5vw, 32px); padding: 12px 0 48px var(--rail-bleed); margin: -4px 0 -30px calc(-1 * var(--rail-bleed)); scroll-padding-left: var(--rail-bleed); }
/* on the right the row ends with the content, where the featured card ends: a card cut there says the row goes on */
.cf-rail::-webkit-scrollbar { display: none; }
.cf-rail > * { scroll-snap-align: start; }
.cf-rail-arrow { position: absolute; top: calc(var(--tile-w) * 9 / 32 + 8px); transform: translateY(-50%); z-index: 3; width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer;
  background: color-mix(in srgb, var(--cf-site-veil) 94%, transparent); color: var(--cf-site-primary); box-shadow: 0 4px 16px rgba(0, 0, 0, .18); display: flex; align-items: center; justify-content: center; transition: opacity .2s; }
.cf-rail-arrow.cf-prev { left: -14px; } .cf-rail-arrow.cf-next { right: -14px; }
.cf-rail-arrow[disabled] { opacity: 0; pointer-events: none; }
.cf-tile { display: block; text-decoration: none; color: inherit !important; min-width: 0; }
.cf-tile-media { position: relative; aspect-ratio: 16 / 9; width: 100%; overflow: hidden; border-radius: var(--cf-site-tile-radius); background: var(--cf-site-cover); transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s; }
a.cf-tile:hover .cf-tile-media, a.cf-tile:focus-visible .cf-tile-media { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(0, 0, 0, .16); }
a.cf-tile:focus-visible { outline: none; }
a.cf-tile:focus-visible .cf-tile-media { outline: 2px solid var(--cf-site-accent); outline-offset: 3px; }
.cf-tile-media img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform .5s ease; }
a.cf-tile:hover .cf-tile-media img { transform: scale(1.04); }
.cf-cover { position: absolute; inset: 0; padding: 18px 20px; display: flex; flex-direction: column; justify-content: space-between; background: var(--cf-site-cover); }
.cf-cover small { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cf-site-accent-ink); padding-top: 22px; }
.cf-cover b { font-family: var(--cf-site-heading-font); font-weight: 500; font-size: 21px; line-height: 1.15; color: var(--cf-site-cover-ink); text-wrap: balance; }
/* status badges on the covers: filled, no border, one color per status (--cf-site-tag-{video,guide,soon}-bg/-fg restyle them) */
.cf-tag { position: absolute; left: 10px; top: 10px; z-index: 2; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; padding: 3px 8px; border-radius: 4px; display: inline-flex; align-items: center; gap: 5px;
  background: var(--cf-site-tag-video-bg, var(--cf-site-cta)); color: var(--cf-site-tag-video-fg, var(--cf-site-on-cta)); box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.cf-tag-light { background: var(--cf-site-tag-guide-bg, #2f6fde); color: var(--cf-site-tag-guide-fg, #fff); }
.cf-tag-soon { background: var(--cf-site-tag-soon-bg, #f2a93b); color: var(--cf-site-tag-soon-fg, #2a1a02); }
.cf-tile-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 14px 16px; background: color-mix(in srgb, var(--cf-site-veil) 95%, transparent); backdrop-filter: blur(6px);
  transform: translateY(101%); transition: transform .3s cubic-bezier(.2, .7, .2, 1); font-size: 12.5px; line-height: 1.5; color: var(--cf-site-muted); }
.cf-tile:hover .cf-tile-info, .cf-tile:focus-visible .cf-tile-info, .cf-tile:focus-within .cf-tile-info { transform: none; }
.cf-tile-info em { display: block; font-style: normal; font-weight: 600; font-size: 12px; color: var(--cf-site-primary-hover); margin-top: 6px; }
.cf-tile-play { position: absolute; left: 50%; top: 42%; z-index: 1; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: var(--cf-site-veil); color: var(--cf-site-primary);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25); display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.85); transition: opacity .25s, transform .25s; }
a.cf-tile:hover .cf-tile-play { opacity: 1; transform: scale(1); }
.cf-tile-title { margin: 12px 0 0; font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.cf-tile-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--cf-site-faint); }
.cf-ask .cf-tile-media { background: transparent; border: 1.5px dashed var(--cf-site-line); display: flex; align-items: center; justify-content: center; }
.cf-ask .cf-tile-media span { display: flex; flex-direction: column; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--cf-site-primary); }
.cf-ask .cf-tile-media i { width: 42px; height: 42px; border-radius: 50%; background: var(--cf-site-primary); color: var(--cf-site-on-primary); font-style: normal; font-size: 22px; display: flex; align-items: center; justify-content: center; }
a.cf-ask:hover .cf-tile-media { border-color: var(--cf-site-accent); }
.cf-hover a.cf-tile:not(.cf-ask) .cf-tile-info { display: none; } /* the preview replaces it */

.cf-pv { position: absolute; z-index: 70; background: var(--cf-site-card); border-radius: 8px; overflow: hidden; box-shadow: 0 28px 70px rgba(0, 0, 0, .28), 0 0 0 1px rgba(0, 0, 0, .06);
  opacity: 0; transform: scale(.92); transform-origin: center top; transition: opacity .18s ease, transform .22s cubic-bezier(.2, .7, .2, 1); }
.cf-pv.cf-on { opacity: 1; transform: none; }
.cf-pv-media { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--cf-site-cover); overflow: hidden; }
.cf-pv-media img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.cf-pv-play { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: var(--cf-site-cta); color: var(--cf-site-on-cta); display: flex; align-items: center; justify-content: center; }
.cf-pv-body { padding: 16px 18px 18px; }
.cf-pv-kicker { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cf-site-accent-ink); margin: 0 0 3px; }
.cf-pv-title { font-family: var(--cf-site-heading-font); font-size: 19px; line-height: 1.25; color: var(--cf-site-primary); margin: 0 0 10px; }
.cf-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cf-chip { font-size: 11px; font-weight: 600; color: var(--cf-site-muted); background: var(--cf-site-panel); padding: 3px 8px; border-radius: 3px; }
.cf-chip.cf-strong { background: var(--cf-site-primary); color: var(--cf-site-on-primary); }
.cf-pv-desc { font-size: 13px; line-height: 1.55; color: var(--cf-site-muted); margin: 0 0 12px; }
.cf-pv-steps { list-style: none; counter-reset: s; display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 12px; padding: 0; }
.cf-pv-steps li { counter-increment: s; font-size: 11.5px; color: var(--cf-site-primary-hover); border: 1px solid var(--cf-site-line); border-radius: 3px; padding: 2px 7px; }
.cf-pv-steps li::before { content: counter(s) " · "; color: var(--cf-site-faint); }
.cf-pv-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.cf-pv-list li { display: flex; gap: 8px; font-size: 12.5px; line-height: 1.45; color: var(--cf-site-muted); }
.cf-pv-list svg { flex-shrink: 0; margin-top: 2px; color: var(--cf-site-ok); }

/* ── home ── */
/* the featured item: a rounded card inset from the edges, the picture on its right fading into the card (a mask on the
   picture itself, so no edge of it can show, whatever the colors of the poster) */
.cf-billboard { position: relative; overflow: hidden; min-height: clamp(400px, 54vh, 560px); display: flex; align-items: center; background: var(--cf-site-billboard);
  margin: clamp(16px, 2.4vw, 32px) clamp(20px, 4.5vw, 72px) 30px; border-radius: var(--cf-site-billboard-radius, 28px); }
.cf-billboard img { position: absolute; right: 0; top: 0; height: 100%; width: auto; aspect-ratio: 16 / 9; max-width: 62%; object-fit: cover; object-position: right top; opacity: var(--cf-site-billboard-image-opacity, .6); /* a short card crops the left, which fades out anyway */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%), linear-gradient(0deg, transparent, #000 22%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 45%), linear-gradient(0deg, transparent, #000 22%); mask-composite: intersect; }
.cf-billboard.cf-no-poster { min-height: 0; }
.cf-bb-text { position: relative; z-index: 1; max-width: min(600px, 46%); padding: 48px clamp(28px, 4.5vw, 72px); }
.cf-bb-text .cf-kicker { margin-bottom: 18px; }
.cf-bb-row { margin: 0 0 6px; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--cf-site-muted); }
.cf-bb-text h1 { font-weight: 600; font-size: clamp(38px, 3.4vw + 14px, 68px); line-height: 1.04; letter-spacing: -.01em; margin: 0 0 16px; text-wrap: balance; }
.cf-bb-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 18px; font-size: 14px; font-weight: 600; color: var(--cf-site-fg); }
.cf-bb-badge { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px;
  background: var(--cf-site-tag-video-bg, var(--cf-site-cta)); color: var(--cf-site-tag-video-fg, var(--cf-site-on-cta)); }
.cf-bb-badge-guide { background: var(--cf-site-tag-guide-bg, #2f6fde); color: var(--cf-site-tag-guide-fg, #fff); }
.cf-bb-desc { color: var(--cf-site-muted); font-size: clamp(15px, .4vw + 13px, 18px); line-height: 1.55; margin: 0 0 30px; max-width: 46ch; }
.cf-sec { padding-block: 10px 30px; }
/* the top of the home on the kit's backdrop (site.json "backdrop"): a pattern keeps only the shape of its tile, drawn in
   --cf-site-backdrop-ink and lit around the pointer in --cf-bd-glow; a picture covers the area. Both fade out downwards */
.cf-home-top { position: relative; isolation: isolate; padding-bottom: 8px; }
.cf-home-top > section { position: relative; z-index: 1; }
.cf-bd, .cf-bd-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cf-bd-pattern .cf-bd, .cf-bd-glow {
  -webkit-mask-image: var(--cf-bd-image), linear-gradient(#000 55%, transparent); -webkit-mask-size: var(--cf-bd-size), 100% 100%;
  -webkit-mask-repeat: repeat, no-repeat; -webkit-mask-composite: source-in;
  mask-image: var(--cf-bd-image), linear-gradient(#000 55%, transparent); mask-size: var(--cf-bd-size), 100% 100%; mask-repeat: repeat, no-repeat; mask-composite: intersect; }
.cf-bd-pattern .cf-bd { background: var(--cf-site-backdrop-ink, color-mix(in srgb, var(--cf-site-fg) 14%, transparent)); }
.cf-bd-glow { opacity: .55; background: radial-gradient(circle 180px at var(--cf-mx, -9999px) var(--cf-my, -9999px), var(--cf-bd-glow, var(--cf-site-accent)), transparent); }
.cf-bd-picture .cf-bd { background: var(--cf-bd-image) center top / cover no-repeat;
  -webkit-mask-image: linear-gradient(#000 45%, transparent); mask-image: linear-gradient(#000 45%, transparent); }
/* the rows (modules): edge to edge, told apart by background only */
.cf-row { padding-block: 34px 30px; }
.cf-row.cf-alt { background: var(--cf-site-row-alt); }
/* latest releases: tall cards, picture on top */
.cf-latest .cf-rail-wrap { --tile-w: clamp(200px, 15vw, 240px); }

.cf-latest .cf-rail-arrow { top: calc(var(--tile-w) * 9 / 32 + 8px); }
.cf-lt { display: flex; flex-direction: column; height: 100%; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: var(--cf-site-card); box-shadow: var(--cf-site-card-shadow); color: var(--cf-site-fg) !important;
  text-decoration: none; font: inherit; text-align: left; cursor: pointer; transition: transform .25s, box-shadow .25s; }
.cf-lt:hover, .cf-lt:focus-visible { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(0, 0, 0, .2); }
.cf-lt-media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--cf-site-cover); }
.cf-lt-media img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform .5s ease; }
.cf-lt:hover .cf-lt-media img { transform: scale(1.05); }
.cf-lt-media .cf-cover b { font-size: 17px; }
.cf-lt-play { position: absolute; right: 10px; bottom: 10px; width: 36px; height: 36px; border-radius: 50%; background: var(--cf-site-veil); color: var(--cf-site-primary);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }
.cf-lt-play svg { width: 14px; height: 14px; }
.cf-lt-body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 14px 16px 16px; }
.cf-lt-body small { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cf-site-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-lt-body b { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--cf-site-primary); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cf-lt-body em { margin-top: auto; padding-top: 4px; font-style: normal; font-size: 12.5px; color: var(--cf-site-faint); }
.cf-lt.cf-ask { background: transparent; outline: 1.5px dashed var(--cf-site-line); outline-offset: -1.5px; }
.cf-lt.cf-ask .cf-lt-media { background: transparent; display: flex; align-items: center; justify-content: center; }
.cf-lt.cf-ask i { width: 48px; height: 48px; border-radius: 50%; background: var(--cf-site-primary); color: var(--cf-site-on-primary); font-style: normal; font-size: 24px; display: flex; align-items: center; justify-content: center; }
.cf-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.cf-sec-head h2 { font-weight: 500; font-size: clamp(21px, .6vw + 17px, 26px); margin: 0; }
.cf-sec-head span { font-size: 13px; color: var(--cf-site-faint); }
.cf-sec-lede { color: var(--cf-site-muted); font-size: 14px; margin: 2px 0 6px; }
.cf-band .cf-kicker { margin-bottom: 6px; }
.cf-foot { color: var(--cf-site-faint); font-size: 12px; padding-block: 30px 36px; margin: 0; }

/* ── item page: dark index next to the light bar, video across the whole area ── */
.cf-layout { display: flex; align-items: flex-start; }
.cf-side { width: 260px; flex-shrink: 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 18px 12px 28px; background: var(--cf-site-side-bg); color: var(--cf-site-side-fg);
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.cf-panel-closed .cf-side { display: none; }
.cf-search { margin-bottom: 14px; }
.cf-search input { width: 100%; font: inherit; font-size: 13px; padding: 8px 10px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); color: var(--cf-site-side-strong); border-radius: 6px; }
.cf-search input::placeholder { color: rgba(255, 255, 255, .45); }
.cf-search input:focus { outline: none; border-color: var(--cf-site-side-accent); }
.cf-acc { margin-bottom: 6px; }
.cf-acc > summary, .cf-side-label { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 6px 4px; margin: 0; border-radius: 6px; user-select: none;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: rgba(255, 255, 255, .5); }
.cf-acc > summary::-webkit-details-marker { display: none; }
.cf-acc > summary::after { content: "›"; font-size: 15px; line-height: 1; color: var(--cf-site-side-accent); transition: transform .2s; }
.cf-acc[open] > summary::after { transform: rotate(90deg); }
.cf-acc > summary:hover { background: rgba(255, 255, 255, .06); }
.cf-tree { list-style: none; padding: 0; margin: 6px 0 18px; }
.cf-tree-row { display: flex; align-items: center; gap: 4px; }
.cf-page-link { flex: 1; display: block; padding: 8px 10px; border-radius: 6px; text-decoration: none; color: var(--cf-site-side-fg) !important; font-weight: 500; font-size: 13px; line-height: 1.35; }
.cf-tree-row:hover .cf-page-link { background: rgba(255, 255, 255, .08); color: var(--cf-site-side-strong) !important; }
.cf-tree-item.cf-active > .cf-tree-row .cf-page-link { background: rgba(255, 255, 255, .15); color: var(--cf-site-side-strong) !important; font-weight: 600; }
.cf-tree-row input { accent-color: var(--cf-site-side-accent); opacity: .75; margin: 0 4px; }
.cf-sub-tree { list-style: none; padding: 0 0 4px 14px; margin: 0; }
.cf-sub-tree a { display: block; padding: 4px 10px; font-size: 12.5px; text-decoration: none; color: rgba(255, 255, 255, .55) !important; border-left: 2px solid rgba(255, 255, 255, .12); }
.cf-sub-tree a:hover { color: var(--cf-site-side-strong) !important; background: rgba(255, 255, 255, .06); }
.cf-hidden { display: none !important; }
.cf-link-btn { background: none; border: 0; padding: 4px 10px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; color: var(--cf-site-side-accent); text-decoration: underline; text-align: left; }
/* the actions of the page, above the index: two tiles side by side, each opening its dialog */
.cf-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 18px; padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.cf-action-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px 12px; border: 0; border-radius: 12px; cursor: pointer;
  background: rgba(255, 255, 255, .06); color: var(--cf-site-side-strong); font: inherit; font-size: 12.5px; font-weight: 600; transition: background .2s, transform .2s; }
.cf-action-tile i { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-style: normal;
  background: var(--cf-site-side-accent); color: var(--cf-site-side-bg); box-shadow: 0 6px 16px color-mix(in srgb, var(--cf-site-side-accent) 30%, transparent); transition: transform .2s; }
.cf-action-tile svg { width: 19px; height: 19px; }
.cf-action-tile:hover, .cf-action-tile:focus-visible { background: rgba(255, 255, 255, .11); }
.cf-action-tile:hover i, .cf-action-tile:focus-visible i { transform: scale(1.07); }
.cf-sel-row { display: flex; gap: 4px; margin: 0 -10px 10px; }
.cf-print-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: transparent; color: var(--cf-site-side-strong); border: 1px solid rgba(255, 255, 255, .22); border-radius: 6px; padding: 10px 12px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.cf-print-btn svg, .cf-print-one svg { width: 14px; height: 14px; }
.cf-pdf-help { margin-top: 10px; }
.cf-pdf-help > summary { list-style: none; cursor: pointer; display: inline-block; font-size: 12px; font-weight: 600; color: var(--cf-site-side-fg); text-decoration: underline; text-underline-offset: 2px; }
.cf-pdf-help > summary::-webkit-details-marker { display: none; }
.cf-pdf-help p { font-size: 11.5px; line-height: 1.5; color: rgba(255, 255, 255, .55); margin: 6px 0 0; }

.cf-main { flex: 1; min-width: 0; padding: 28px clamp(20px, 3vw, 48px) 90px; }
.cf-video-zone { margin: 0 0 56px; }
.cf-video-zone:not(:has(#cf-player)) { margin-bottom: 24px; } /* a written guide: the title opens the article */
.cf-video-zone h1 { font-size: clamp(26px, 1.4vw + 14px, 36px); letter-spacing: -.01em; margin: 0 0 18px; }
#cf-player, .cf-section { scroll-margin-top: 18px; }
/* the whole picture fits the window: a short window narrows the player (same ratio), it never crops the bottom of the scene */
#cf-player .cf-app { max-width: calc((100vh - 150px) * var(--cf-aspect, 1.7778)); margin-inline: auto; }
/* on a docs page the veil over a still video is light and blurred, the button and its words in the site's colours */
#cf-player { --cf-veil-bg: color-mix(in srgb, var(--cf-site-bg) 66%, transparent); --cf-veil-blur: 4px; }
#cf-player .cf-big { width: 72px; height: 72px; box-shadow: 0 12px 30px color-mix(in srgb, var(--cf-site-cta) 30%, transparent); }
#cf-player .cf-veil-text { top: calc(50% + 28px); --cf-veil-fg: var(--cf-site-primary); --cf-veil-muted: var(--cf-site-muted); --cf-veil-shadow: none; }
.cf-transcript-section .cf-transcript { margin-top: 16px; }
.cf-tr-sub { font-weight: 400; color: var(--cf-site-muted); }
.cf-deep-head { margin: 0 0 36px; padding-top: 30px; border-top: 1px solid var(--cf-site-line); }
.cf-deep-title { font-family: var(--cf-site-heading-font); font-size: 24px; font-weight: 600; color: var(--cf-site-primary); margin: 0 0 8px; }
.cf-deep-lede { color: var(--cf-site-muted); max-width: 62ch; margin: 0; }
.cf-article { max-width: 860px; overflow-wrap: break-word; }
.cf-article .cf-section + .cf-section { margin-top: 30px; padding-top: 48px; border-top: 1px solid var(--cf-site-line); }
.cf-article h2 { font-size: 20px; margin: 0; }
.cf-article h3 { font-size: 15.5px; margin: 1.7em 0 .5em; color: var(--cf-site-primary-hover); }
.cf-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.cf-print-one { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--cf-site-line); border-radius: 6px; padding: 5px 10px; font: inherit; font-size: 11.5px; color: var(--cf-site-muted); cursor: pointer; white-space: nowrap; }
.cf-print-one:hover { border-color: var(--cf-site-primary-hover); color: var(--cf-site-primary-hover); }
.cf-pager { display: flex; gap: 12px; margin-top: 36px; }
.cf-pager > * { flex: 1; }
.cf-pager-link { border: 1px solid var(--cf-site-line); border-radius: 10px; padding: 12px 14px; text-decoration: none; display: flex; flex-direction: column; gap: 2px; }
.cf-pager-link:hover { border-color: var(--cf-site-primary-hover); }
.cf-pager-link span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--cf-site-faint); font-weight: 700; }
.cf-pager-link b { font-family: var(--cf-site-heading-font); font-weight: 500; font-size: 14.5px; color: var(--cf-site-primary); }
.cf-pager-link.cf-next { text-align: right; align-items: flex-end; }
.cf-main > .cf-foot { padding-inline: 0; }
#cf-print-cover { display: none; }

@media (max-width: 860px) {
  .cf-billboard { min-height: 0; flex-direction: column; align-items: stretch; border-radius: 20px; }
  .cf-billboard img { position: relative; width: 100%; max-width: none; height: auto;
    -webkit-mask-image: linear-gradient(0deg, transparent, #000 30%); mask-image: linear-gradient(0deg, transparent, #000 30%); }
  /* the text starts under the picture: pulled over it, it would vanish on a dark poster (a screenshot of an app) */
  .cf-bb-text { max-width: none; padding-block: 0 28px; margin-top: 12px; }
  .cf-pager { flex-direction: column; }
}
@media (max-width: 720px) {
  .cf-site { --cf-site-rail-w: 56px; }
  .cf-rail-btn { width: 42px; height: 42px; }
  .cf-tip { display: none; }
  .cf-side { position: fixed; left: var(--cf-site-rail-w); top: 0; bottom: 0; z-index: 45; width: min(300px, calc(100vw - 56px)); box-shadow: 18px 0 40px rgba(0, 0, 0, .14); }
  .cf-ask-dialog { padding: 24px 18px; }
  .cf-two { grid-template-columns: 1fr; }
  .cf-tr-sub { display: none; }
}
@media (hover: none) { .cf-tile-info { position: static; transform: none; background: none; padding: 6px 0 0; backdrop-filter: none; } .cf-rail-arrow { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .cf-tile-media, .cf-tile-media img, .cf-tile-info, .cf-tile-play, .cf-drawer, .cf-scrim, .cf-tip { transition: none; }
  .cf-rail { scroll-behavior: auto; }
}
@media print {
  .cf-no-print, .cf-bar-left, .cf-drawer, .cf-scrim, #cf-player, .cf-download, .cf-pager { display: none !important; }
  .cf-shell { padding-left: 0; background: #fff; font-size: 12px; }
  .cf-layout { display: block; }
  .cf-main { padding: 0; }
  .cf-video-zone h1, .cf-deep-head { display: none; }
  .cf-printing .cf-section { display: none; }
  .cf-printing .cf-section.cf-print-in { display: block; break-before: page; border-top: 0; margin-top: 0; padding-top: 0; }
  .cf-printing .cf-section.cf-print-first { break-before: avoid; }
  #cf-print-cover.cf-on { display: block; break-after: page; padding-top: 12vh; }
  #cf-print-cover h1 { font-size: 30px; margin: 0 0 6px; }
  .cf-cover-date { color: var(--cf-site-muted); margin-bottom: 40px; }
  #cf-print-cover h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--cf-site-faint); }
  .cf-cover-toc { padding-left: 1.4em; }
  .cf-cover-toc > li { padding: 8px 0; border-bottom: 1px dotted var(--cf-site-line); font-size: 15px; }
  .cf-cover-toc ol { list-style: "– "; font-size: 12px; margin-top: 6px; }
  .cf-site a { text-decoration: none; }
  h2, h3 { break-after: avoid; }
  @page { size: A4; margin: 18mm 16mm; }
}

/* what follows a written guide in the catalog, at the end of its text (a finished video shows the same over its picture) */
.cf-site a.cf-up-next-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 40px 0 8px; padding: 16px 20px; border-radius: 12px;
  background: var(--cf-site-cta); color: var(--cf-site-on-cta); text-decoration: none; font-size: 16px; line-height: 1.35; }
.cf-up-next-card b { font-weight: 700; }
.cf-up-next-card i { font-style: normal; font-size: 1.3em; transition: transform .2s; }
.cf-up-next-card:hover i, .cf-up-next-card:focus-visible i { transform: translateX(4px); }

/* the covers in lists are veiled a little, a bit more at the bottom: a light picture then marks the end of its card
   by itself, with no border (--cf-site-cover-shade restyles it, "none" removes it) */
.cf-tile-media::after, .cf-lt-media::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--cf-site-cover-shade, linear-gradient(rgba(15, 23, 42, .04), rgba(15, 23, 42, .14))); }
.cf-lt-play { z-index: 1; }

/* latest releases: the title runs up the left side of the row, like the spine of a book, with a hairline to the top */
@media (min-width: 721px) {
  .cf-latest { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(24px, 2.6vw, 40px); align-items: stretch; }
  .cf-latest .cf-sec-head { display: flex; margin: 0; padding: 8px 0 18px; }
  .cf-latest .cf-sec-head h2 { writing-mode: vertical-rl; transform: rotate(180deg); display: flex; align-items: center; gap: 16px; margin: 0;
    font-family: var(--cf-site-heading-font); font-size: clamp(16px, .6vw + 9px, 20px); font-weight: 700; line-height: 1; letter-spacing: .18em; text-transform: uppercase;
    color: var(--cf-site-accent-ink); white-space: nowrap; }
  .cf-latest .cf-sec-head h2::after { content: ""; flex: 1; width: 1px; min-height: 24px; background: linear-gradient(var(--cf-site-accent-ink), transparent); opacity: .5; }
}

/* the share dialog: the apps in a row, the link with its copy button, the chapter to start from */
.cf-share-dialog { width: min(520px, calc(100vw - 32px)); border: 0; border-radius: 16px; padding: 26px 28px 22px; box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  background: var(--cf-site-card); color: var(--cf-site-fg); font: var(--cf-site-font); }
.cf-share-dialog::backdrop { background: rgba(0, 0, 0, .45); backdrop-filter: blur(2px); }
.cf-share-dialog h2 { font-weight: 600; font-size: 20px; margin: 0 0 2px; }
.cf-share-what { margin: 0 0 20px; font-size: 13.5px; color: var(--cf-site-muted); padding-right: 30px; }
.cf-share-apps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(62px, 1fr); gap: 6px; margin: 0 -4px 20px; padding: 4px; overflow-x: auto; scrollbar-width: none; }
.cf-share-app { display: flex; flex-direction: column; align-items: center; gap: 7px; text-decoration: none; color: var(--cf-site-fg) !important; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.cf-share-app i { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-style: normal; color: #fff; transition: transform .15s; }
.cf-share-app i svg { width: 26px; height: 26px; }
.cf-share-app i b { font: 700 21px/1 system-ui, sans-serif; }
.cf-share-app span { font-size: 12px; color: var(--cf-site-muted); }
.cf-share-app:hover i, .cf-share-app:focus-visible i { transform: scale(1.08); }
.cf-share-more { background: var(--cf-site-panel); color: var(--cf-site-fg) !important; font-size: 13px; letter-spacing: .1em; }
.cf-share-link { display: flex; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 10px; background: var(--cf-site-panel); }
.cf-share-link input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 13.5px; color: var(--cf-site-fg); }
.cf-share-link input:focus { outline: none; }
.cf-share-copy { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 8px; padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  background: var(--cf-site-cta); color: var(--cf-site-on-cta); }
.cf-share-copy:hover { background: var(--cf-site-cta-hover); }
.cf-share-copy svg { width: 15px; height: 15px; }
.cf-share-start { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13.5px; color: var(--cf-site-muted); cursor: pointer; }
.cf-share-start[hidden] { display: none; }
.cf-share-start input { accent-color: var(--cf-site-cta); width: 16px; height: 16px; margin: 0; }
.cf-share-status { min-height: 1.2em; margin: 10px 0 0; font-size: 13px; color: var(--cf-site-ok); }

/* the covers in lists rest a little dimmed, like the featured picture, and come to full strength under the pointer
   (--cf-site-cover-opacity restyles it, 1 turns it off) */
.cf-tile-media img, .cf-tile-media .cf-cover, .cf-lt-media img, .cf-lt-media .cf-cover { opacity: var(--cf-site-cover-opacity, .6); transition: opacity .25s ease, transform .5s ease; }
a.cf-tile:hover .cf-tile-media img, a.cf-tile:hover .cf-tile-media .cf-cover, a.cf-tile:focus-visible .cf-tile-media img, a.cf-tile:focus-visible .cf-tile-media .cf-cover,
.cf-lt:hover .cf-lt-media img, .cf-lt:hover .cf-lt-media .cf-cover, .cf-lt:focus-visible .cf-lt-media img, .cf-lt:focus-visible .cf-lt-media .cf-cover { opacity: 1; }

/* an item's facts as icons and numbers: type, length, chapters (the words stay for screen readers) */
.cf-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cf-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
/* positioned, so the hidden words stay inside it: otherwise they escape the scrolling row and widen the page */
.cf-fact { position: relative; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.cf-rail { position: relative; }
.cf-fact svg { width: 14px; height: 14px; flex-shrink: 0; opacity: .85; }
.cf-bb-meta { gap: 6px 16px; }
.cf-bb-meta .cf-fact svg { width: 16px; height: 16px; }
.cf-tag { white-space: nowrap; }
.cf-tag svg { width: 9px; height: 9px; flex-shrink: 0; }
.cf-tag svg:not(:first-child) { width: 11px; height: 11px; margin-left: 3px; }
.cf-chip.cf-facts { display: inline-flex; gap: 10px; }
.cf-chip .cf-fact svg { width: 12px; height: 12px; }

/* the print dialog: the sections to include, then print */
.cf-print-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cf-site-faint); margin-bottom: 6px; }
.cf-text-btn { background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--cf-site-primary-hover); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.cf-print-list { list-style: none; margin: 0 0 18px; padding: 4px; max-height: 42vh; overflow-y: auto; border-radius: 10px; background: var(--cf-site-panel); }
.cf-print-list label { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; font-size: 14px; cursor: pointer; }
.cf-print-list label:hover { background: color-mix(in srgb, var(--cf-site-fg) 6%, transparent); }
.cf-print-list input { accent-color: var(--cf-site-cta); width: 16px; height: 16px; margin: 0; flex-shrink: 0; }
.cf-print-dialog .cf-print-btn { width: 100%; justify-content: center; padding: 12px 16px; font-size: 14px; }
.cf-print-dialog .cf-pdf-help > summary { color: var(--cf-site-muted); }
.cf-print-dialog .cf-pdf-help p { color: var(--cf-site-muted); font-size: 12.5px; }

/* Every color, font and shape the player uses is a variable: a kit restyles the player from theme/theme.css. */
:root {
  --cf-bg: #0f1115; --cf-fg: #eef0f4; --cf-muted: #8b93a4; --cf-accent: #ff7a59; --cf-on-accent: #fff;
  --cf-surface: #1b1f27; --cf-line: #2a2f3a;
  --cf-font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  --cf-page-padding: 16px;
  --cf-stage-bg: #fff; --cf-stage-radius: 10px; --cf-stage-shadow: 0 8px 30px rgba(0, 0, 0, .45);
  --cf-control-radius: 6px;
  --cf-subs-bg: rgba(0, 0, 0, .72); --cf-subs-fg: #fff;
  --cf-ring: var(--cf-accent);
}
.cf-app, .cf-app * { box-sizing: border-box; }
/* the standalone guide page; inside a docs site the player only styles its own box */
html:has(> .cf-page), .cf-page { margin: 0; background: var(--cf-bg); color: var(--cf-fg); font: var(--cf-font); }
.cf-page { min-height: 100vh; display: grid; place-items: center; padding: var(--cf-page-padding); }
/* The page grid must not shrink to its contents when Studio hides the controls
   and the opening scene has no caption. The stage itself has no intrinsic width. */
.cf-page > #cueflow { width: 100%; min-width: 0; }
.cf-page > #cueflow > .cf-app { margin-inline: auto; }
.cf-app { width: 100%; outline: none; color: var(--cf-fg); font: var(--cf-font); }
.cf-stage { position: relative; width: 100%; overflow: hidden; background: var(--cf-stage-bg); border-radius: var(--cf-stage-radius); box-shadow: var(--cf-stage-shadow); }
.cf-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; transition: transform 700ms cubic-bezier(.4, 0, .2, 1); }
.cf-frame { display: block; border: 0; background: var(--cf-stage-bg); pointer-events: none; }
.cf-ring { position: absolute; border: 3px solid var(--cf-ring); border-radius: 8px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--cf-ring) 25%, transparent); opacity: 0; pointer-events: none; transition: opacity 200ms; animation: cf-pulse 1s ease-in-out infinite; }
.cf-cursor { position: absolute; left: 0; top: 0; width: 22px; height: 22px; margin: -3px 0 0 -3px; opacity: 0; pointer-events: none; transition: transform 800ms cubic-bezier(.4, 0, .2, 1), opacity 200ms;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 9-6.5 1.6L9 19z' fill='%23111' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat; }
.cf-cursor::after { content: ""; position: absolute; left: -9px; top: -9px; width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--cf-ring) 55%, transparent); opacity: 0; transform: scale(.3); }
.cf-cursor.cf-click::after { animation: cf-click 350ms ease-out; }
.cf-big { position: absolute; inset: 0; z-index: 2; margin: auto; width: 68px; height: 68px; padding: 0; border-radius: 50%; border: 0; background: var(--cf-accent); color: var(--cf-on-accent); cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, .4); display: flex; align-items: center; justify-content: center; transition: transform .2s; }
.cf-big svg { width: 50%; height: 50%; display: block; }
.cf-big:hover { transform: scale(1.06); }
/* made with Cueflow: a small mark in the corner of every player, linking to the project */
.cf-brand { position: absolute; right: 10px; bottom: 10px; z-index: 3; display: flex; align-items: center; gap: 5px; height: 24px; padding: 0 6px; border-radius: 12px;
  background: rgba(255, 255, 255, .82); color: #ff7a59; text-decoration: none; font: 600 11px/1 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .01em; opacity: .7; transition: opacity .2s; }
.cf-brand svg { width: 15px; height: 15px; display: block; }
.cf-brand span { color: #0f1115; max-width: 0; overflow: hidden; transition: max-width .25s; white-space: nowrap; }
.cf-brand:hover, .cf-brand:focus-visible { opacity: 1; }
.cf-brand:hover span, .cf-brand:focus-visible span { max-width: 60px; }
.cf-brand.cf-brand-bar { position: static; flex: none; }
.cf-captions-overlay .cf-subs { bottom: calc(4% + 22px); } /* clear of the mark */
.cf-play svg { width: 16px; height: 16px; display: block; }
.cf-bar .cf-play { display: flex; align-items: center; justify-content: center; padding: 4px 8px; }
.cf-playing .cf-big, .cf-ready .cf-big { display: none; }
/* what the big button does, under it: shown before the video starts and when it ends, not on a pause */
.cf-veil-text { position: absolute; left: 0; right: 0; top: calc(50% + 24px); z-index: 2; margin: 0 auto; max-width: 86%; display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center; color: var(--cf-veil-fg, #fff); text-shadow: var(--cf-veil-shadow, 0 1px 3px rgba(0, 0, 0, .6)); pointer-events: none; }
.cf-veil-text strong { font-size: clamp(14px, 2.2vw, 20px); font-weight: 600; }
.cf-veil-text span { font-size: clamp(11px, 1.5vw, 13.5px); color: var(--cf-veil-muted, rgba(255, 255, 255, .85)); }
.cf-veil-text span:empty { display: none; }
.cf-playing .cf-veil-text, .cf-ready .cf-veil-text, .cf-started:not(.cf-ended) .cf-veil-text { display: none; }
/* a still video sits behind a veil, so the button and its words read on any scene; it lifts while playing */
.cf-app:not(.cf-started):not(.cf-ready) .cf-stage::after, .cf-ended .cf-stage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--cf-veil-bg, rgba(15, 17, 21, .55)); backdrop-filter: blur(var(--cf-veil-blur, 2px)); }
/* with its words under it, the button and the words are centered together */
.cf-app:not(.cf-started) .cf-big, .cf-ended .cf-big { inset: -40px 0 0; }

/* the next video, proposed over the picture once this one has ended; above the veil, clear of the mark.
   Light on purpose: it always sits on the dark veil, whatever the theme's accent (--cf-up-next-bg/-fg/-arrow restyle it) */
.cf-app a.cf-up-next { position: absolute; left: 50%; bottom: 7%; z-index: 3; transform: translateX(-50%); max-width: min(78%, 640px);
  display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 20px; border-radius: var(--cf-up-next-radius, 12px);
  background: var(--cf-up-next-bg, #fff); color: var(--cf-up-next-fg, #15171c); text-decoration: none;
  font-size: clamp(13px, 2vw, 18px); line-height: 1.3; box-shadow: 0 8px 26px rgba(0, 0, 0, .45); animation: cf-up-next-in 350ms ease-out; }
.cf-app a.cf-up-next[hidden] { display: none; }
.cf-up-next span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-up-next b { font-weight: 700; }
.cf-up-next i { color: var(--cf-up-next-arrow, currentColor); font-style: normal; font-size: 1.25em; transition: transform .2s; }
.cf-up-next:hover i, .cf-up-next:focus-visible i { transform: translateX(4px); }
.cf-up-next:focus-visible { outline: 2px solid var(--cf-fg); outline-offset: 3px; }
/* with the banner low in the picture, the replay button and its words move up a little */
.cf-ended:has(.cf-up-next:not([hidden])) .cf-big { inset: -90px 0 0; }
.cf-ended:has(.cf-up-next:not([hidden])) .cf-veil-text { top: calc(50% - 1px); }
@keyframes cf-up-next-in { from { opacity: 0; transform: translate(-50%, 10px); } }

/* captions: under the stage, or over its bottom edge like subtitles */
.cf-caption { min-height: 3.2em; padding: 10px 4px 0; color: var(--cf-fg); text-align: center; }
.cf-captions-overlay .cf-caption, .cf-captions-off .cf-caption { display: none; }
.cf-app:not(.cf-started):not(.cf-ready) .cf-subs { display: none; } /* subtitles start with the video */
.cf-subs { position: absolute; left: 0; right: 0; bottom: 4%; margin: 0 auto; max-width: 86%; text-align: center; pointer-events: none; }
.cf-subs span { display: inline; padding: .15em .45em; background: var(--cf-subs-bg); color: var(--cf-subs-fg); font-size: clamp(12px, 2.1vw, 17px); line-height: 1.6; border-radius: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* controls */
.cf-bar { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.cf-bar button, .cf-bar select { background: var(--cf-surface); color: var(--cf-fg); border: 1px solid var(--cf-line); border-radius: var(--cf-control-radius); padding: 4px 10px; cursor: pointer; font: inherit; font-size: 13px; }
.cf-bar button[aria-pressed="false"] { color: var(--cf-muted); text-decoration: line-through; }
.cf-bar button:focus-visible, .cf-bar select:focus-visible, .cf-chap:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 2px; }
.cf-track { flex: 1; height: 6px; background: var(--cf-line); border-radius: 3px; overflow: hidden; }
.cf-fill { height: 100%; width: 0; background: var(--cf-accent); }

/* chapters: one segment per step, replacing the single track */
.cf-chapters { flex: 1; display: flex; gap: 3px; min-width: 0; }
.cf-app:not(.cf-no-chapters) .cf-track { display: none; }
.cf-no-chapters .cf-chapters { display: none; }
.cf-bar .cf-chap { flex: 1; min-width: 0; padding: 8px 0; background: none; border: 0; border-radius: 0; text-align: left; }
.cf-chap i { display: block; height: 5px; border-radius: 3px; background: var(--cf-line); overflow: hidden; }
.cf-chap b { display: block; height: 100%; width: 0; background: var(--cf-accent); }
.cf-chap.cf-past b { width: 100% !important; }
.cf-chap small { display: block; margin-top: 4px; color: var(--cf-muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity 150ms; }
.cf-chap:hover small, .cf-chap.cf-now small, .cf-chap:focus-visible small { opacity: 1; }
.cf-chap.cf-now small { color: var(--cf-fg); }

/* transcript */
.cf-transcript { margin-top: 14px; border-top: 1px solid var(--cf-line); }
.cf-transcript summary { display: flex; align-items: center; gap: 12px; padding: 10px 0; cursor: pointer; list-style: none; font-weight: 600; }
.cf-transcript summary::-webkit-details-marker { display: none; }
.cf-transcript summary::before { content: "▸"; color: var(--cf-muted); transition: transform 150ms; }
.cf-transcript[open] summary::before { transform: rotate(90deg); }
.cf-download { margin-left: auto; background: none; border: 0; color: var(--cf-accent); font: inherit; font-size: 13px; font-weight: 400; cursor: pointer; }
.cf-transcript ol { margin: 0; padding: 0 0 8px 1.4em; color: var(--cf-fg); }
.cf-transcript li { margin: 0 0 10px; }
.cf-transcript li b { display: block; }
.cf-transcript a { color: var(--cf-accent); font-size: 13px; white-space: nowrap; }

@keyframes cf-pulse { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--cf-ring) 12%, transparent); } }
@keyframes cf-click { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.4); } }
@media (prefers-reduced-motion: reduce) {
  .cf-world, .cf-cursor, .cf-chap small { transition: none !important; }
  .cf-up-next { animation: none; }
  .cf-ring { animation: none; }
}
@media (max-width: 480px) { .cf-chap small { display: none; } }

/* kit theme */
/* Tema SAUL per Cueflow: token del design system (frontend/src/index.css @theme), Lora + Inter.
   Vale per il sito della guida (--cf-site-*) e, attraverso di lui, per i player che contiene.
   I font arrivano da site.json "stylesheets" (Google Fonts). */
:root {
  --navy: #0f2142; --navy-700: #1b3458; --navy-600: #2d4f7a;
  --gold: #d49a14; --gold-ink: #8a5c0c; --gold-100: #f6e8c0; --gold-200: #e8c872;
  --ink: #1a1a1a; --muted: #6b6b6b; --muted-2: #8a8a8a; --line: #e5e5e3; --bg: #fafaf8; --panel: #f2f1ee; --card: #fff;
  --ok-bg: #e8f5ee; --ok-line: #bde0cb; --ok-ink: #1c6b40;
  --warn-bg: #fdf0e5; --warn-line: #f0c9a3; --warn-ink: #9a4c14;

  --cf-site-bg: var(--bg); --cf-site-fg: var(--ink); --cf-site-muted: var(--muted); --cf-site-faint: var(--muted-2); --cf-site-line: var(--line);
  --cf-site-panel: var(--panel); --cf-site-card: var(--card);
  --cf-site-primary: var(--navy); --cf-site-primary-hover: var(--navy-600);
  --cf-site-accent: var(--gold); --cf-site-accent-ink: var(--gold-ink);
  --cf-site-hero: #eef1f5; --cf-site-band: #f2f0ea; --cf-site-cover: #f1eee6; --cf-site-cover-ink: var(--navy);
  --cf-site-rail-active: #eef1f6;
  --cf-site-side-bg: #29313f; --cf-site-side-accent: var(--gold-200); /* come la sidebar del caso in SAUL (Layout.tsx) */
  --cf-site-ok-bg: #eef6f0; --cf-site-ok: #2f7d4f; --cf-site-err-bg: #fbefec; --cf-site-err: #b4472f;
  --cf-site-font: 15px/1.6 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --cf-site-heading-font: "Lora", Georgia, "Times New Roman", serif;
}
.cf-site { --cf-stage-bg: #e9e8e2; }
.cf-print-btn { background: var(--gold); color: #07111f; }
.cf-print-btn:hover { background: #e2a91e; }
.cf-logo { color: var(--gold); }

/* copertine disegnate: la carta da ufficio di SAUL, tinta per materia */
.cf-cover {
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 23px, rgba(15,33,66,.06) 23px, rgba(15,33,66,.06) 24px),
    linear-gradient(90deg, transparent 30px, rgba(15,33,66,.1) 30px, rgba(15,33,66,.1) 31px, transparent 31px);
  padding: 16px 18px;
}
.cf-cover small { padding: 26px 0 0 22px; }
.cf-cover b { padding-left: 22px; }
.cf-soon .cf-cover b { color: var(--navy-600); }
.cf-cover[data-kicker="Cybersecurity"], .cf-cover[data-kicker="Materia"] { background-color: #e8edf3; }
.cf-cover[data-kicker="Per ogni materia"] { background-color: #eef0e8; }
.cf-qk[data-kicker="Prima di un caso"] i { background: #f1eee6; }
.cf-qk[data-kicker="Per ogni materia"] i { background: #eef0e8; }
.cf-qk[data-kicker="Materia"] i { background: #e8edf3; }

/* articoli: tipografia della guida */
.cf-article { line-height: 1.65; }
.cf-article h3 { color: var(--navy-600); }
.cf-article code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: #eef0f5; border-radius: 4px; padding: .1em .35em; font-size: .92em; }
.cf-article ul, .cf-article ol { padding-left: 1.3em; margin: 0 0 1em; }
.cf-article li { margin-bottom: .4em; }
.cf-article table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 13.5px; }
.cf-article th, .cf-article td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.cf-article th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-2); font-weight: 700; }
.cf-article .saul-intro { margin-bottom: 40px; }
.cf-article .saul-intro .lede { color: var(--muted); max-width: 62ch; margin: 0 0 16px; }
.cf-article .lede-text { margin-bottom: 1em; }
/* il numero dorato davanti ai titoli delle sezioni */
.cf-article h2 .num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-right: 8px; vertical-align: 3px;
  border-radius: 50%; background: var(--gold-100); color: var(--gold-ink); font: 700 12px/1 "Inter", sans-serif; }

/* componenti degli articoli, estratti dalle guide scritte a mano (docs/, ottobre 2026) */
.cf-article .badges { display: flex; gap: 8px; flex-wrap: wrap; }
.cf-article .badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: .03em; padding: 4px 10px; border-radius: 999px; background: #eef0f6; border: 1px solid var(--line); color: var(--navy-600); }
.cf-article .badge.gold { background: var(--gold-100); border-color: var(--gold-200); color: var(--gold-ink); }
.cf-article .lede-text { color: var(--muted); font-size: 14px; }
.cf-article .callout { border-radius: 10px; padding: 14px 16px; margin: 1.1em 0; font-size: 13.5px; border: 1px solid var(--line); background: #fafbfd; break-inside: avoid; }
.cf-article .callout.info { background: #f1f4fb; border-color: #d7e0f2; }
.cf-article .callout.warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); }
.cf-article .callout.ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-ink); }
.cf-article .callout p:last-child { margin-bottom: 0; }
.cf-article .callout b { color: inherit; }
.cf-article .steps { counter-reset: step; list-style: none; padding: 0; margin: 1em 0; }
.cf-article .steps > li { counter-increment: step; position: relative; padding: 2px 0 14px 38px; border-left: 2px solid var(--line); margin-left: 13px; }
.cf-article .steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.cf-article .steps > li::before { content: counter(step); position: absolute; left: -13px; top: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: #fff; font-family: "Lora", Georgia, serif; font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; break-inside: avoid; }
.cf-article .steps > li > b { display: block; color: var(--navy); font-size: 14px; margin-bottom: 2px; }
.cf-article .flow { display: flex; flex-wrap: wrap; gap: 0; align-items: stretch; margin: 1.2em 0; break-inside: avoid; }
.cf-article .flow .step { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; flex: 1 1 220px; font-size: 12.5px; }
.cf-article .flow .step b { display: block; color: var(--navy); font-size: 13px; margin-bottom: 3px; }
.cf-article .flow .arrow { display: flex; align-items: center; justify-content: center; padding: 0 10px; color: var(--muted-2); font-size: 18px; flex: 0 0 auto; }
.cf-article .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 1.2em 0; }
.cf-article .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 1.2em 0; }
.cf-article .mini-card { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--card); break-inside: avoid; }
.cf-article .mini-card .tag { display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--gold-ink); background: var(--gold-100); border-radius: 999px; padding: 2px 8px; margin-bottom: 6px; }
.cf-article .mini-card h4 { font-size: 13px; margin: 0 0 4px; }
.cf-article .mini-card p { font-size: 12.5px; color: var(--muted); margin: 0; }
.cf-article details.gloss { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin-top: 1.4em; background: var(--card); }
.cf-article details.gloss summary { cursor: pointer; font-weight: 700; color: var(--navy); font-size: 13.5px; }
.cf-article details.gloss dl { margin: 12px 0 4px; }
.cf-article details.gloss dt { font-weight: 700; color: var(--navy-600); font-size: 13px; margin-top: 10px; }
.cf-article details.gloss dd { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; }
.cf-article .chat-mock { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin: 1.1em 0; background: var(--card); display: flex; flex-direction: column; gap: 10px; font-size: 13px; break-inside: avoid; }
.cf-article .chat-mock .bubble { max-width: 88%; border-radius: 10px; padding: 8px 12px; line-height: 1.5; }
.cf-article .chat-mock .bubble.user { align-self: flex-end; background: var(--navy); color: #fff; }
.cf-article .chat-mock .bubble.assistant { align-self: flex-start; background: var(--panel); color: var(--ink); border: 1px solid var(--line); }
.cf-article .chat-mock .bubble.assistant b { color: var(--navy); }
@media (max-width: 880px) { .cf-article .grid-2, .cf-article .grid-3 { grid-template-columns: 1fr; } }

.cf-site { --cf-subs-bg: rgba(7,17,31,.86); }

/* il video nella guida: il velo chiaro davanti al video fermo è di Cueflow; qui solo i controlli come nel pilota */
.cf-site .cf-subs span { font-weight: 500; line-height: 1.7; }
.cf-site .cf-play { background: var(--navy); border-color: var(--navy); color: #fff; }
.cf-site .cf-chap b { background: var(--gold); }
.cf-site .cf-chap small { opacity: 1; }
.cf-site .cf-chap.cf-now small { font-weight: 600; }