
  /* Die Bühne trägt ihren Ton als Farbe, damit er zwischen den Zuständen überblendet (gesetzt vom Skript). Anfangswert
     von @property: ein fester Wert ist hier Pflicht, er entspricht dem Papier des Einstiegs (TONES.intro im Skript). */
  @property --kx-tone {syntax:'<color>';inherits:true;initial-value:#f2efea;
  }

  @property --kx-vignette {syntax:'<number>';inherits:true;initial-value:1;
  }

  @property --kx-glow {syntax:'<color>';inherits:true;initial-value:rgb(255 255 255 / 0.42);
  }

  /* —— Seite: Kopfzeile, Hauptbereich und Fußbereich der Startseite —— */html:has(.kx) {transition:--kx-tone 1.2s var(--p-ease);}

  @media (prefers-reduced-motion: no-preference) {html:has(.kx) {scroll-behavior:smooth;}
  }

  /* Die Bühne beginnt oben unter der schwebenden Kopfzeile. */main.main:has(.kx) {padding-top:0;}html:has(.kx) .header::before {background:linear-gradient(to bottom, var(--kx-tone) 0 4.6rem, transparent);}html.kx-footer .header::before {opacity:0;}html:has(.kx) .header .bar {transition:background-color 1.2s var(--p-ease), box-shadow 1.2s var(--p-ease);}

  /* Über dem Grundriss nimmt die Kopfzeile das dunkle Theme der Plattform an, im Takt des Hintergrunds. Das offene
     Menü auf dem Telefon bleibt hell. */html[data-kx-night] .header:not(:has(.nav:popover-open)) {--surface: var(--p-dark-surface-1);--line: var(--kx-night-line);--line-strong: var(--kx-night-line-strong);--ink: var(--p-dark-heading);--ink-2: var(--kx-night-ink-2);--accent-strong: var(--p-accent-warm);--btn-bg: var(--p-dark-heading);--btn-fg: var(--p-heading);--btn-hover-bg: var(--surface-2);--p-wash: var(--kx-night-line);--focus: 0.125rem solid var(--kx-night-focus);}html[data-kx-night] .header:not(:has(.nav:popover-open)) .bar {background-image:none;box-shadow:none;}

  /* Das Finale schließt die Seite schon mit einem Aufruf; das Band im Fußbereich würde ihn wiederholen. */html:has(.kx) .footer .promo {display:none;}

  /* Aufrufe der Seite (data-plan-call, das Skript setzt show-header-call, wenn keiner zu sehen ist): neben einem
     sichtbaren wird der Knopf der Kopfzeile leise (Kontur), ohne ihn wieder voll. Auf dem Telefon zeigt die Kopfzeile
     ihre kompakte Pille (SiteHeader, compact) nur, solange kein Aufruf der Seite zu sehen ist. */
  @media (min-width: 64rem) {html.has-plan-calls:not(.show-header-call) .header:not(:has(.nav:popover-open)) .bar-cta {background:transparent;color:var(--ink);box-shadow:inset 0 0 0 0.0625rem var(--p-ring);}html.has-plan-calls:not(.show-header-call) .header:not(:has(.nav:popover-open)) .bar-cta:hover {background:var(--p-wash);box-shadow:inset 0 0 0 0.0625rem var(--ink);}
  }

  @media (max-width: 63.99rem) {html.has-plan-calls:not(.show-header-call) .header .bar-cta {display:none;}html.has-plan-calls:not(.show-header-call) .header .bar-cta + .burger {margin-left:auto;}
  }

  /* —— Bühne —— */.kx.svelte-1r14u4e {
    /* Grundwerte der Bühne (wie die .kx-Primitive von APP.md): die Nachtfarben über dem Grundriss und die Fronten. */--kx-night-ink-2: color-mix(in srgb, var(--p-dark-heading) 80%, var(--p-dark-secondary));--kx-night-line: color-mix(in srgb, var(--p-dark-heading), transparent 90%);--kx-night-line-strong: color-mix(in srgb, var(--p-dark-heading), transparent 72%);--kx-night-focus: color-mix(in srgb, var(--p-dark-heading), transparent 45%);--kx-dim-ink: color-mix(in srgb, var(--p-dark-heading) 70%, var(--p-accent-warm));--kx-shade: color-mix(in srgb, var(--p-heading), transparent 90%);--kx-shade-soft: color-mix(in srgb, var(--p-heading), transparent 96%);
    /* Frontfarben der Farbkreise, etwas dunkler als die beleuchtete Küche (wie im Planer): nobilia Seidengrau 070 (die
       Front der Beispielküche) und die drei Farben, die das Skript an ihre Stelle setzt (FRONT_COLORS). */--kx-front-seidengrau: oklch(0.76 0.016 85);--kx-front-weiss: oklch(0.935 0.005 95);--kx-front-salbei: oklch(0.68 0.035 135);--kx-front-nachtblau: oklch(0.44 0.04 262);--kx-edge: max(var(--gutter), calc((100vw - var(--wide)) / 2 + var(--gutter)));--kx-intro: min(36rem, 36vw);--kx-copy: var(--kx-intro);--kx-h-section: clamp(1.6rem, 2.4vw, 2.3rem);display:grid;
    /* Der Text macht die Bühne nie breiter als den Bildschirm. Eine Zeile pro Kapitel: Bühne und Leiste überspannen
       alle und bleiben über den ganzen Rundgang angeheftet. */grid-template-columns:minmax(0, 1fr);grid-template-rows:repeat(4, auto);}.kx.svelte-1r14u4e [id]:where(.svelte-1r14u4e) {scroll-margin-top:7rem;}.kx.svelte-1r14u4e :where(.svelte-1r14u4e):is(a:where(.svelte-1r14u4e), button:where(.svelte-1r14u4e)):focus-visible {outline:var(--focus);outline-offset:0.125rem;}.kx__stage.svelte-1r14u4e,
  .kx__rail-hold.svelte-1r14u4e {grid-column:1;grid-row:1 / 5;}

  /* Die Hülle der Kapitel tritt zur Seite, damit die Leiste im DOM zwischen Einstieg und erstem Kapitel steht
     (Fokusreihenfolge) und trotzdem über der Bühne angeheftet bleibt. */.kx__chapters.svelte-1r14u4e {display:contents;}.kx__chapter.svelte-1r14u4e {grid-column:1;position:relative;z-index:1;display:flow-root;height:120vh;height:120svh;pointer-events:none;}.kx__chapter--intro.svelte-1r14u4e {grid-row:1;height:150vh;height:150svh;}[data-kx-chapter='plan'].svelte-1r14u4e {grid-row:2;}[data-kx-chapter='build'].svelte-1r14u4e {grid-row:3;}[data-kx-chapter='render'].svelte-1r14u4e {grid-row:4;}.kx__rail-hold.svelte-1r14u4e {position:sticky;top:0;z-index:2;align-self:start;height:100vh;height:100svh;pointer-events:none;}.kx__stage.svelte-1r14u4e {position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
    /* --kx-exit (0→1, vom Skript) blendet Ton und Licht in die Seite, während die Bühne geht. */--kx-glow-now: color-mix(in srgb, var(--kx-glow), transparent calc(var(--kx-exit, 0) * 100%));background-color:color-mix(in srgb, var(--kx-tone), var(--canvas) calc(var(--kx-exit, 0) * 100%));background-image:radial-gradient(ellipse 62% 70% at 68% 56%, var(--kx-glow-now), color-mix(in srgb, var(--kx-glow-now) 40%, transparent) 45%, transparent 80%);transition:--kx-vignette 1.2s var(--p-ease), --kx-glow 1.2s var(--p-ease);}

  /* Ein weicher Randabfall für die fertigen Zustände; das Blatt des Grundrisses bleibt flach. */.kx__stage.svelte-1r14u4e::after {content:'';position:absolute;inset:0;z-index:1;pointer-events:none;opacity:calc(var(--kx-vignette) * (1 - var(--kx-exit, 0)));background:radial-gradient(ellipse 110% 100% at 60% 50%, transparent 45%, var(--kx-shade-soft) 70%, var(--kx-shade));}.kx.svelte-1r14u4e[data-kx-state='plan'],
  .kx.svelte-1r14u4e[data-kx-state='build'] {--kx-vignette: 0;}.kx.svelte-1r14u4e[data-kx-state='plan'] {--kx-glow: color-mix(in srgb, var(--p-dark-heading), transparent 94%);}.kx__stage.svelte-1r14u4e canvas:where(.svelte-1r14u4e) {position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0;transition:opacity 0.6s ease;}

  /* Papier hinter der Skizze: nur seine Körnung, eine feine Rauschkachel. Nur der Einstieg zeigt es. */.kx__paper.svelte-1r14u4e {position:absolute;inset:0;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .1 0 0 0 0 .09 0 0 0 -0.25 0.14'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)'/%3E%3C/svg%3E") 0 0 / 220px 220px;transition:opacity 1.2s var(--p-ease);}.kx.svelte-1r14u4e[data-kx-state]:not([data-kx-state='intro']):not(.is-static) .kx__paper:where(.svelte-1r14u4e) {opacity:0;}

  /* Die Box der Küche: rechts der Textspalte; der rechte Rand spiegelt den linken der Textspalte, höchstens 4rem
     darüber hinaus. */.kx__frame.svelte-1r14u4e {position:absolute;top:14%;bottom:12%;left:calc(var(--kx-edge) + var(--kx-intro) + clamp(1rem, 3vw, 3.5rem));right:max(clamp(1rem, 3vw, 4rem), calc(var(--kx-edge) - 4rem));pointer-events:none;}.kx__frame.svelte-1r14u4e picture:where(.svelte-1r14u4e) {display:contents;}.kx__poster.svelte-1r14u4e {width:100%;height:100%;object-fit:contain;transition:opacity 0.6s ease;}.kx.svelte-1r14u4e.is-ready .kx__stage:where(.svelte-1r14u4e) canvas:where(.svelte-1r14u4e) {opacity:1;}.kx.svelte-1r14u4e.is-ready .kx__poster:where(.svelte-1r14u4e) {opacity:0;}

  /* Die Bühne zeichnet den Einstieg Strich für Strich; das fertige Standbild würde die Zeichnung vorwegnehmen. Ein
     langsamer Start (kx-slow) oder kein WebGL (is-static) zeigt das Standbild. */.kx-pending .kx.svelte-1r14u4e:not(.kx-slow):not(.is-static) .kx__poster:where(.svelte-1r14u4e),
  .kx.svelte-1r14u4e.kx-draws:not(.kx-slow):not(.is-static) .kx__poster:where(.svelte-1r14u4e) {opacity:0;}

  /* Maßzahlen laufen auf den Maßlinien des Grundrisses; der Ton der Bühne unterbricht die Linie dahinter. */.kx__dim.svelte-1r14u4e {position:absolute;top:0;left:0;z-index:2;padding:0.15rem 0.5rem;background:var(--kx-tone);color:var(--kx-dim-ink);font-size:0.82rem;font-weight:500;line-height:1.2;font-variant-numeric:tabular-nums;white-space:nowrap;opacity:0;pointer-events:none;will-change:transform;}

  /* —— Leiste der Zustände: drei Abschnitte, die sich bis zum aktuellen füllen —— */
  /* Bei großer Grundschrift im Browser bricht „Rundgang überspringen“ in die nächste Zeile, statt seitlich
     hinauszulaufen. */.kx__rail.svelte-1r14u4e {position:absolute;left:var(--kx-edge);bottom:clamp(1.5rem, 5vh, 2.75rem);display:flex;flex-wrap:wrap;align-items:flex-end;gap:1.5rem;max-width:calc(100% - 2 * var(--kx-edge));isolation:isolate;pointer-events:auto;}

  /* Wo die Küche unter der Leiste läuft, hält ein weicher Fleck im Ton des Blatts die Beschriftung frei. */.kx__rail.svelte-1r14u4e::before {content:'';position:absolute;inset:-0.75rem -1.5rem -0.5rem;z-index:-1;border-radius:2rem;background:var(--kx-tone);opacity:0.94;filter:blur(14px);pointer-events:none;}.kx__rail.svelte-1r14u4e ol:where(.svelte-1r14u4e) {display:flex;gap:0.5rem;margin:0;padding:0;list-style:none;}.kx__rail.svelte-1r14u4e a:where(.svelte-1r14u4e) {position:relative;display:block;min-width:min(8rem, 18vw);padding:1rem 0 0.35rem;color:var(--ink-2);font-size:0.95rem;font-weight:500;text-decoration:none;transition:color var(--t);}.kx__rail.svelte-1r14u4e ol:where(.svelte-1r14u4e) a:where(.svelte-1r14u4e)::before,
  .kx__rail.svelte-1r14u4e ol:where(.svelte-1r14u4e) a:where(.svelte-1r14u4e)::after {content:'';position:absolute;top:0;right:0;left:0;height:2px;border-radius:2px;background:var(--line-strong);}.kx__rail.svelte-1r14u4e ol:where(.svelte-1r14u4e) a:where(.svelte-1r14u4e)::after {background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--p-ease);}.kx__rail.svelte-1r14u4e a:where(.svelte-1r14u4e):hover,
  .kx__rail.svelte-1r14u4e a:where(.svelte-1r14u4e).is-active {color:var(--ink);}.kx__rail.svelte-1r14u4e a:where(.svelte-1r14u4e).is-active::after,
  .kx__rail.svelte-1r14u4e li:where(.svelte-1r14u4e):has(~ li:where(.svelte-1r14u4e) > .is-active) a:where(.svelte-1r14u4e)::after {transform:scaleX(1);}

  /* Ein schlichter Textlink, kein vierter Schritt: ohne Balken, unterstrichen. */.kx__rail.svelte-1r14u4e .kx__past:where(.svelte-1r14u4e) {min-width:0;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:0.3em;}.kx__rail.svelte-1r14u4e .kx__past:where(.svelte-1r14u4e):hover {color:var(--ink);text-decoration-color:currentColor;}.kx__past-short.svelte-1r14u4e {display:none;}

  /* Nachtfarben: der Text des Grundrisses und die Leiste über dem dunklen Blatt, nur solange das Skript die Zustände
     führt; die Seite ohne Skript zeigt nie hellen Text auf dem hellen Standbild. */.kx.svelte-1r14u4e[data-kx-state]:not(.is-static) [data-kx-chapter='plan']:where(.svelte-1r14u4e) .kx__copy:where(.svelte-1r14u4e),
  .kx.svelte-1r14u4e[data-kx-state='plan']:not(.is-static) .kx__rail:where(.svelte-1r14u4e) {--ink: var(--p-dark-heading);--ink-2: var(--kx-night-ink-2);--muted: var(--p-dark-secondary);--line-strong: var(--kx-night-line-strong);--btn-bg: var(--p-dark-heading);--btn-fg: var(--p-heading);}

  /* —— Kapitel: jedes ein Abschnitt des Scrollens, sein Text die ganze Zeit angeheftet —— */.kx__chapter.svelte-1r14u4e:not(.kx__chapter--intro) > .kx__hold:where(.svelte-1r14u4e) {margin-top:-100vh;margin-top:-100svh;}

  /* Links der Leiste landen im Abschnitt eines Kapitels (seine Oberkante bei 60 % des Bildschirms). */.kx.svelte-1r14u4e .kx__chapter[id]:where(.svelte-1r14u4e) {scroll-margin-top:60vh;scroll-margin-top:60svh;}.kx__hold.svelte-1r14u4e {position:sticky;top:0;display:flex;align-items:center;height:100vh;height:100svh;padding:6.5rem var(--kx-edge) 6rem;}.kx__copy.svelte-1r14u4e {width:var(--kx-copy);pointer-events:auto;}.kx.svelte-1r14u4e[data-kx-state] .kx__copy:where(.svelte-1r14u4e) > :where(.svelte-1r14u4e) {transition:opacity 0.35s var(--p-ease), translate 0.35s var(--p-ease);}

  /* Die Überschrift kommt mit dem Zustand, der Rest, sobald die Küche sich gedreht hat (sofort nach einem Sprung). */.kx.svelte-1r14u4e[data-kx-state] .kx__chapter:where(.svelte-1r14u4e).is-active .kx__copy:where(.svelte-1r14u4e) > :where(.svelte-1r14u4e) {transition:opacity 0.6s var(--p-ease) 0.9s, translate 0.9s var(--p-ease) 0.9s;}.kx.svelte-1r14u4e[data-kx-state] .kx__chapter:where(.svelte-1r14u4e).is-active .kx__copy:where(.svelte-1r14u4e) > .kx__title:where(.svelte-1r14u4e),
  .kx.svelte-1r14u4e.is-jumping[data-kx-state] .kx__chapter:where(.svelte-1r14u4e).is-active .kx__copy:where(.svelte-1r14u4e) > :where(.svelte-1r14u4e) {transition-delay:0s;}.kx.svelte-1r14u4e[data-kx-state] .kx__chapter:where(.svelte-1r14u4e):not(.is-active) .kx__copy:where(.svelte-1r14u4e):not(:focus-within) {pointer-events:none;}.kx.svelte-1r14u4e[data-kx-state] .kx__chapter:where(.svelte-1r14u4e):not(.is-active) .kx__copy:where(.svelte-1r14u4e):not(:focus-within) > :where(.svelte-1r14u4e) {opacity:0;translate:0 1rem;}

  /* Bevor das Skript den ersten Zustand setzt, stehen die angehefteten Texte der späteren Kapitel schon im ersten
     Bildschirm: verborgen, damit der Einstieg zuerst gelesen wird. Ohne Skript bleiben die Texte in ihren Abschnitten. */.kx-pending .kx.svelte-1r14u4e:not([data-kx-state]) .kx__chapter:where(.svelte-1r14u4e):not(.kx__chapter--intro) .kx__copy:where(.svelte-1r14u4e) > :where(.svelte-1r14u4e) {opacity:0;translate:0 1rem;}html:not(.kx-pending) .kx.svelte-1r14u4e:not([data-kx-state]) .kx__chapter:where(.svelte-1r14u4e):not(.kx__chapter--intro) > .kx__hold:where(.svelte-1r14u4e) {margin-top:0;}.kx__title.svelte-1r14u4e {margin:0;font-size:var(--kx-h-section);line-height:1.1;letter-spacing:-0.025em;text-wrap:balance;}.kx__chapter--intro.svelte-1r14u4e .kx__title:where(.svelte-1r14u4e) {font-size:clamp(2.3rem, 3.6vw, 3.9rem);}.kx__copy.svelte-1r14u4e > p:where(.svelte-1r14u4e) {max-width:40ch;margin:1.4rem 0 0;color:var(--ink-2);font-size:1.09rem;line-height:1.65;}.kx__actions.svelte-1r14u4e {display:flex;flex-wrap:wrap;align-items:center;gap:0.75rem 1.25rem;margin-top:2rem;}.kx.svelte-1r14u4e .btn:where(.svelte-1r14u4e) {gap:var(--sp-4);box-shadow:none;}.kx.svelte-1r14u4e :is(.btn:where(.svelte-1r14u4e), .kx__tour:where(.svelte-1r14u4e)) > svg:where(.svelte-1r14u4e),
  .kx__studio-text.svelte-1r14u4e > svg:where(.svelte-1r14u4e) {flex:none;width:1.125rem;height:1.125rem;transition:transform var(--t);}.kx.svelte-1r14u4e :where(.svelte-1r14u4e):is(.btn:where(.svelte-1r14u4e), .kx__tour:where(.svelte-1r14u4e)):hover > svg:where(.svelte-1r14u4e),
  .kx__studio.svelte-1r14u4e:hover .kx__studio-text:where(.svelte-1r14u4e) > svg:where(.svelte-1r14u4e) {transform:translateX(3px);}.kx__copy.svelte-1r14u4e > .btn:where(.svelte-1r14u4e) {margin-top:2rem;}.kx__tour.svelte-1r14u4e {display:inline-flex;align-items:center;gap:var(--sp-2);min-height:var(--control-h);color:var(--ink);font-size:1rem;font-weight:500;text-decoration:none;text-underline-offset:0.3em;white-space:nowrap;}.kx__tour.svelte-1r14u4e:hover {text-decoration:underline;}

  /* Die Zusage gehört zum Aufruf: sie steht neben der Pille, auf schmalen Spalten darunter. */.kx__note.svelte-1r14u4e {max-width:15rem;color:var(--ink-2);font-size:var(--fs-caption);font-weight:400;line-height:1.4;text-wrap:balance;}

  /* Der zweite Weg: Küchenstudios. Ein Satz mit Link hinter einer feinen Linie, kein zweiter Knopf: er konkurriert
     nicht mit der Tintenpille und ist trotzdem in Sekunden zu finden. */.kx__studio.svelte-1r14u4e {display:grid;grid-template-columns:auto minmax(0, 1fr);align-items:center;column-gap:0.85rem;width:fit-content;max-width:100%;margin-top:1.5rem;padding-top:1.1rem;border-top:0.0625rem solid var(--line-strong);color:var(--ink);text-decoration:none;}.kx__studio-fab.svelte-1r14u4e {display:grid;grid-row:1 / 3;place-items:center;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--ink);color:var(--surface);transition:transform var(--t);}.kx__studio-fab.svelte-1r14u4e svg:where(.svelte-1r14u4e) {width:1.05rem;height:1.05rem;}.kx__studio.svelte-1r14u4e:hover .kx__studio-fab:where(.svelte-1r14u4e) {transform:scale(1.06);}.kx__studio-kicker.svelte-1r14u4e {grid-column:2;color:var(--ink-2);font-size:var(--fs-caption);line-height:1.35;}.kx__studio-text.svelte-1r14u4e {display:inline-flex;grid-column:2;align-items:center;gap:0.35rem;font-size:var(--fs-ui);font-weight:600;line-height:1.35;text-decoration:underline;text-decoration-color:var(--line-strong);text-decoration-thickness:0.0625rem;text-underline-offset:0.3em;transition:text-decoration-color var(--t-fast);}.kx__studio.svelte-1r14u4e:hover .kx__studio-text:where(.svelte-1r14u4e) {text-decoration-color:currentColor;}

  /* Tastaturweg am Rundgang vorbei; sichtbar nur mit Fokus. */.kx__skip.svelte-1r14u4e {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}.kx__skip.svelte-1r14u4e:focus-visible {position:static;display:inline-block;width:auto;height:auto;margin-top:0.85rem;overflow:visible;clip-path:none;font-size:0.9rem;font-weight:500;}

  /* Schriftfeld wie auf einer Zeichnung: Grundriss, Montage, Farbe und Kosten teilen diese Form. */.kx__spec.svelte-1r14u4e {display:grid;grid-template-columns:minmax(0, 1.6fr) auto auto;max-width:26rem;margin:1.75rem 0 0;border:1px solid var(--line-strong);}.kx__spec.svelte-1r14u4e > div:where(.svelte-1r14u4e) {padding:0.55rem 0.8rem 0.65rem;}.kx__spec.svelte-1r14u4e > div:where(.svelte-1r14u4e) + div:where(.svelte-1r14u4e) {border-left:1px solid var(--line-strong);}.kx__spec.svelte-1r14u4e dt:where(.svelte-1r14u4e) {color:var(--muted);font-size:0.75rem;}.kx__spec.svelte-1r14u4e dd:where(.svelte-1r14u4e) {margin:0.2rem 0 0;color:var(--ink);font-size:1rem;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap;}.kx__spec.svelte-1r14u4e > div:where(.svelte-1r14u4e):first-child dd:where(.svelte-1r14u4e) {white-space:normal;}

  /* Montage: vier Zellen in der Reihenfolge der Montage. Ist eine Gruppe gelandet, füllt sich ihr Ballon und eine
     Tintenlinie läuft unter der Zelle; so füllt sich das Feld mit der Küche. */.kx__parts.svelte-1r14u4e {display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));max-width:33rem;margin:1.5rem 0 0;padding:0;border:1px solid var(--line-strong);list-style:none;counter-reset:kx-part;}.kx__parts.svelte-1r14u4e li:where(.svelte-1r14u4e) {position:relative;display:flex;align-items:center;gap:0.65rem;min-height:3.1rem;padding:0.55rem 0.8rem;color:var(--muted);font-size:0.95rem;line-height:1.3;counter-increment:kx-part;transition:color 0.4s var(--p-ease);}.kx__parts.svelte-1r14u4e li:where(.svelte-1r14u4e):nth-child(even) {border-left:1px solid var(--line-strong);}.kx__parts.svelte-1r14u4e li:where(.svelte-1r14u4e):nth-child(n + 3) {border-top:1px solid var(--line-strong);}.kx__parts.svelte-1r14u4e li:where(.svelte-1r14u4e)::before {content:counter(kx-part);display:grid;flex:none;place-items:center;width:1.4rem;height:1.4rem;padding-top:0.06em;border:1px solid currentColor;border-radius:50%;font-size:0.72rem;font-weight:600;font-variant-numeric:tabular-nums;line-height:1;transition:background-color 0.3s var(--p-ease), border-color 0.3s var(--p-ease), color 0.3s var(--p-ease);}.kx__parts.svelte-1r14u4e li:where(.svelte-1r14u4e)::after {content:'';position:absolute;right:-1px;bottom:-1px;left:-1px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform 0.7s var(--p-ease);}.kx__parts.svelte-1r14u4e li:where(.svelte-1r14u4e).is-placed {color:var(--ink);}.kx__parts.svelte-1r14u4e li:where(.svelte-1r14u4e).is-placed::before {border-color:var(--ink);background-color:var(--ink);color:var(--surface);}.kx__parts.svelte-1r14u4e li:where(.svelte-1r14u4e).is-placed::after {transform:none;}

  /* Farben: Frontfarben der Beispielküche; erst sichtbar, wenn die 3D-Szene sie anwenden kann. */.kx__fronts.svelte-1r14u4e {display:flex;flex-wrap:wrap;align-items:center;gap:0.9rem 1.2rem;margin-top:1.75rem;}.kx__fronts.svelte-1r14u4e > div:where(.svelte-1r14u4e) {display:flex;gap:0.6rem;}.kx.svelte-1r14u4e:not(.is-ready) .kx__fronts:where(.svelte-1r14u4e),
  .kx.svelte-1r14u4e:not(.is-ready) .kx__try:where(.svelte-1r14u4e) {display:none;}

  /* Farbe und Beispielschätzung als Schriftfeld; die Zelle der Farbe ist breit genug für den längsten Namen, damit
     eine Wahl den Text nie neu umbricht (und die Küche neu einpasst). */.kx__spec--cost.svelte-1r14u4e {grid-template-columns:minmax(7.5rem, auto) auto;max-width:22rem;margin-top:1.25rem;}

  /* Der Hinweis ist die untere Zeile des Felds, wie die Notiz einer Zeichnung: er bleibt bei der Summe. */.kx__spec--cost.svelte-1r14u4e > .kx__spec-note:where(.svelte-1r14u4e) {grid-column:1 / -1;display:flex;align-items:baseline;gap:0.5rem;padding-block:0.4rem 0.45rem;border-top:1px solid var(--line-strong);border-left:0;}.kx__spec--cost.svelte-1r14u4e > .kx__spec-note:where(.svelte-1r14u4e) dd:where(.svelte-1r14u4e) {margin:0;color:var(--ink-2);font-size:0.8rem;font-weight:400;white-space:normal;}.kx__swatch.svelte-1r14u4e {position:relative;width:2.75rem;height:2.75rem;padding:0;border:3px solid var(--kx-tone);border-radius:50%;box-shadow:0 0 0 1px var(--line-strong);cursor:pointer;transition:box-shadow var(--t), transform var(--t-fast);}.kx__swatch.svelte-1r14u4e:hover {transform:scale(1.06);}.kx__swatch.svelte-1r14u4e:active {transform:scale(0.94);}.kx__swatch[aria-pressed='true'].svelte-1r14u4e {box-shadow:0 0 0 2px var(--ink);}

  /* Die gewählte Farbe trägt ein Häkchen, damit sie nie wie der Fokusring aussieht. */.kx__swatch[aria-pressed='true'].svelte-1r14u4e::after {--check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5 9.2 16.7 19 7' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");content:'';position:absolute;inset:0;width:1.15rem;height:1.15rem;margin:auto;background:var(--ink);-webkit-mask:var(--check) center / contain no-repeat;mask:var(--check) center / contain no-repeat;}.kx__swatch--nachtblau[aria-pressed='true'].svelte-1r14u4e::after {background:var(--surface);}.kx__swatch.svelte-1r14u4e:focus-visible {outline-offset:4px;}.kx__swatch--seidengrau.svelte-1r14u4e {background:var(--kx-front-seidengrau);}.kx__swatch--weiss.svelte-1r14u4e {background:var(--kx-front-weiss);}

  /* Weiß auf Papier: ein dunklerer Ring, damit die Farbe nicht in der Seite verschwindet. */.kx__swatch--weiss.svelte-1r14u4e:not([aria-pressed='true']) {box-shadow:0 0 0 1px color-mix(in srgb, var(--ink) 38%, transparent);}.kx__swatch--salbei.svelte-1r14u4e {background:var(--kx-front-salbei);}.kx__swatch--nachtblau.svelte-1r14u4e {background:var(--kx-front-nachtblau);}

  /* Die schmalsten Telefone: engere Zellen, lange Namen trennen an Silben. */
  @media (max-width: 359px) {.kx.svelte-1r14u4e .kx__parts:where(.svelte-1r14u4e) li:where(.svelte-1r14u4e) {gap:0.4rem;padding:0.4rem 0.5rem;font-size:0.8rem;hyphens:auto;overflow-wrap:anywhere;}.kx.svelte-1r14u4e .kx__parts:where(.svelte-1r14u4e) li:where(.svelte-1r14u4e)::before {width:1.1rem;height:1.1rem;font-size:0.62rem;}.kx__spec--cost.svelte-1r14u4e {grid-template-columns:minmax(5.5rem, auto) auto;}.kx__spec--cost.svelte-1r14u4e dd:where(.svelte-1r14u4e) {font-size:0.9rem;}
  }

  @media (max-width: 760px) {.kx__past-full.svelte-1r14u4e {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}.kx__past-short.svelte-1r14u4e {display:inline;}
  }

  /* —— Hohe Bildschirme (Telefone, Tablets hochkant): die Küche oben, der Text darunter, die Leiste unter der
     Kopfzeile. Ein quer gehaltenes Telefon behält die Anordnung nebeneinander (siehe unten). —— */
  @media (max-aspect-ratio: 9/10), (max-width: 760px) and (min-height: 521px) {.kx.svelte-1r14u4e {--kx-copy: 100%;--kx-intro: 100%;}

    /* Die Küche füllt den Raum zwischen Leiste und dem höchsten angehefteten Text (--kx-copy-reach, vom Skript). */.kx__frame.svelte-1r14u4e {top:max(8.75rem, 17%);right:3%;bottom:calc(var(--kx-copy-reach, 46%) + 0.75rem);left:3%;}.kx__stage.svelte-1r14u4e {background-image:radial-gradient(ellipse 90% 40% at 50% 37%, var(--kx-glow-now), color-mix(in srgb, var(--kx-glow-now) 40%, transparent) 45%, transparent 80%);}.kx__stage.svelte-1r14u4e::after {background:radial-gradient(ellipse 130% 90% at 50% 40%, transparent 45%, var(--kx-shade-soft) 70%, var(--kx-shade));}.kx__rail.svelte-1r14u4e {top:5.75rem;right:var(--gutter);bottom:auto;left:var(--gutter);flex-wrap:nowrap;gap:0.75rem;max-width:none;}

    /* Unter der Kopfzeile steht die Leiste über der Küche, nicht auf ihr: kein Fleck nötig. */.kx__rail.svelte-1r14u4e::before {content:none;}.kx__rail.svelte-1r14u4e ol:where(.svelte-1r14u4e) {flex:1;gap:0.4rem;}

    /* Abschnitte nach ihrer Beschriftung bemessen, damit „Ihre Farben“ bis 320px einzeilig bleibt. */.kx__rail.svelte-1r14u4e li:where(.svelte-1r14u4e) {flex:auto;}.kx__rail.svelte-1r14u4e a:where(.svelte-1r14u4e) {min-width:0;padding-top:0.8rem;font-size:clamp(0.75rem, 3.5vw, 0.88rem);white-space:nowrap;}.kx__hold.svelte-1r14u4e {align-items:flex-end;padding:6rem var(--gutter) clamp(1.5rem, 5svh, 4rem);}.kx__chapter--intro.svelte-1r14u4e .kx__title:where(.svelte-1r14u4e) {font-size:clamp(2.1rem, 9vw, 3.2rem);}.kx__title.svelte-1r14u4e {font-size:clamp(1.6rem, 6.4vw, 2.3rem);}.kx__copy.svelte-1r14u4e > p:where(.svelte-1r14u4e) {margin-top:0.9rem;font-size:1rem;line-height:1.55;}.kx__actions.svelte-1r14u4e {gap:0.5rem 1.25rem;margin-top:1.25rem;}.kx__parts.svelte-1r14u4e {max-width:none;margin-top:1rem;}.kx__parts.svelte-1r14u4e li:where(.svelte-1r14u4e) {gap:0.5rem;min-height:2.75rem;padding:0.45rem 0.65rem;font-size:0.88rem;}.kx__parts.svelte-1r14u4e li:where(.svelte-1r14u4e)::before {width:1.25rem;height:1.25rem;font-size:0.68rem;}.kx__fronts.svelte-1r14u4e {margin-top:1rem;}.kx__swatch.svelte-1r14u4e {width:2.6rem;height:2.6rem;}
  }

  @media (max-aspect-ratio: 9/10) and (min-width: 761px) {.kx__hold.svelte-1r14u4e {padding-bottom:7rem;}.kx__copy.svelte-1r14u4e {max-width:36rem;}
  }

  /* Kurze Telefone (360×640): der Text rückt zusammen, damit die Küche darüber eine brauchbare Größe behält. Der
     Rundgang-Link wiederholt die Leiste darüber, die Farbkreise zeigen die Farbe selbst. */
  @media (max-width: 760px) and (max-height: 760px) {.kx__actions.svelte-1r14u4e .kx__tour:where(.svelte-1r14u4e),
    [data-kx-chapter='render'].svelte-1r14u4e .kx__copy:where(.svelte-1r14u4e) > p:where(.svelte-1r14u4e) {display:none;}.kx__copy.svelte-1r14u4e > p:where(.svelte-1r14u4e) {margin-top:0.7rem;}.kx__spec.svelte-1r14u4e {margin-top:1rem;}.kx__fronts.svelte-1r14u4e {margin-top:0.9rem;}.kx__copy.svelte-1r14u4e > .btn:where(.svelte-1r14u4e) {margin-top:1.1rem;}

    /* Der Weg der Studios rückt zusammen, damit die Küche darüber Platz behält. */.kx__studio.svelte-1r14u4e {margin-top:1rem;padding-top:0.8rem;}.kx__studio-fab.svelte-1r14u4e {width:2rem;height:2rem;}

    /* Auf sehr schmalen Telefonen trägt der Link allein. */
    @media (max-width: 23.5rem) {.kx__studio-kicker.svelte-1r14u4e {display:none;}.kx__studio-fab.svelte-1r14u4e {grid-row:auto;}
    }
  }

  /* Die kleinsten Telefone (320×568): ohne Satz unter dem Aufruf, kleinere Überschriften. */
  @media (max-width: 760px) and (max-height: 600px) {.kx__note.svelte-1r14u4e {display:none;}.kx__title.svelte-1r14u4e {font-size:1.5rem;}.kx__chapter--intro.svelte-1r14u4e .kx__title:where(.svelte-1r14u4e) {font-size:1.75rem;}

    /* Hier tragen Überschrift und Schriftfeld die Kapitel allein: der höchste Text bestimmt den Rahmen der Küche, und
       mit den Absätzen bliebe für sie kaum Platz. */.kx__copy.svelte-1r14u4e > p:where(.svelte-1r14u4e) {display:none;}
  }

  /* Quer gehaltene Telefone: Küche und Text nebeneinander auf einem kurzen Bildschirm. */
  @media (min-aspect-ratio: 9/10) and (max-height: 520px) {.kx.svelte-1r14u4e {--kx-intro: min(36rem, 56vw);}.kx__hold.svelte-1r14u4e {padding-block:5.25rem 3.4rem;}.kx__chapter--intro.svelte-1r14u4e .kx__title:where(.svelte-1r14u4e) {font-size:2rem;}.kx__title.svelte-1r14u4e {font-size:1.7rem;}.kx__copy.svelte-1r14u4e > p:where(.svelte-1r14u4e) {margin-top:0.6rem;font-size:0.9rem;line-height:1.45;}.kx__actions.svelte-1r14u4e {margin-top:0.9rem;}.kx__actions.svelte-1r14u4e .kx__tour:where(.svelte-1r14u4e),
    .kx__note.svelte-1r14u4e {display:none;}.kx__actions.svelte-1r14u4e {flex-wrap:nowrap;gap:0.75rem;}.kx__actions.svelte-1r14u4e .btn:where(.svelte-1r14u4e) {padding-inline:1.1rem;}.kx__studio.svelte-1r14u4e {column-gap:0.6rem;margin-top:0.75rem;padding-top:0.6rem;}.kx__studio-kicker.svelte-1r14u4e {display:none;}.kx__studio-fab.svelte-1r14u4e {grid-row:auto;width:1.75rem;height:1.75rem;}.kx__studio-text.svelte-1r14u4e {font-size:0.8rem;white-space:nowrap;}.kx__spec.svelte-1r14u4e {margin-top:0.8rem;}.kx__parts.svelte-1r14u4e {max-width:none;margin-top:0.75rem;}.kx__parts.svelte-1r14u4e li:where(.svelte-1r14u4e) {gap:0.45rem;min-height:2.25rem;padding:0.3rem 0.6rem;font-size:0.82rem;}.kx__parts.svelte-1r14u4e li:where(.svelte-1r14u4e)::before {width:1.15rem;height:1.15rem;font-size:0.64rem;}.kx__copy.svelte-1r14u4e:has(.kx__fronts:where(.svelte-1r14u4e)) {display:flex;flex-wrap:wrap;align-items:center;column-gap:1rem;}.kx__copy.svelte-1r14u4e:has(.kx__fronts:where(.svelte-1r14u4e)) > :is(.kx__title:where(.svelte-1r14u4e), p:where(.svelte-1r14u4e)) {flex-basis:100%;}[data-kx-chapter='render'].svelte-1r14u4e .kx__copy:where(.svelte-1r14u4e) > p:where(.svelte-1r14u4e) {display:none;}.kx__copy.svelte-1r14u4e:has(.kx__fronts:where(.svelte-1r14u4e)) > .kx__title:where(.svelte-1r14u4e) {order:-2;}.kx__spec--cost.svelte-1r14u4e {flex-basis:100%;grid-template-columns:minmax(0, 1fr);order:-1;margin-top:0.7rem;}.kx__spec--cost.svelte-1r14u4e > div:where(.svelte-1r14u4e):first-child {display:none;}.kx__spec--cost.svelte-1r14u4e > div:where(.svelte-1r14u4e):nth-child(2) {display:flex;align-items:baseline;gap:0.6rem;padding-block:0.4rem;border-left:0;}.kx__spec--cost.svelte-1r14u4e > div:where(.svelte-1r14u4e):nth-child(2) dd:where(.svelte-1r14u4e) {margin:0;font-size:0.92rem;}.kx__spec--cost.svelte-1r14u4e > .kx__spec-note:where(.svelte-1r14u4e) {padding-block:0.3rem 0.35rem;}.kx__fronts.svelte-1r14u4e {margin-top:0.8rem;}.kx__fronts.svelte-1r14u4e > div:where(.svelte-1r14u4e) {gap:0.5rem;}.kx__swatch.svelte-1r14u4e {width:2.2rem;height:2.2rem;}.kx__copy.svelte-1r14u4e > .btn:where(.svelte-1r14u4e) {margin-top:0.8rem;padding-inline:1.2rem;}.kx__rail.svelte-1r14u4e {bottom:0.6rem;}.kx__rail.svelte-1r14u4e a:where(.svelte-1r14u4e) {min-width:5.5rem;padding-top:0.6rem;font-size:0.8rem;}.kx__rail.svelte-1r14u4e .kx__past:where(.svelte-1r14u4e) {min-width:0;}
  }

  @media (min-aspect-ratio: 9/10) and (max-height: 380px) {.kx__title.svelte-1r14u4e {font-size:1.45rem;}.kx__chapter--intro.svelte-1r14u4e .kx__title:where(.svelte-1r14u4e) {font-size:1.65rem;}.kx__copy.svelte-1r14u4e > p:where(.svelte-1r14u4e) {font-size:0.85rem;}.kx__fronts.svelte-1r14u4e,
    .kx__copy.svelte-1r14u4e > .btn:where(.svelte-1r14u4e) {margin-top:0.6rem;}.kx__swatch.svelte-1r14u4e {width:2rem;height:2rem;}.kx__fronts.svelte-1r14u4e > div:where(.svelte-1r14u4e) {gap:0.4rem;}.kx__copy.svelte-1r14u4e:has(.kx__fronts:where(.svelte-1r14u4e)) {column-gap:0.75rem;}.kx__copy.svelte-1r14u4e:has(.kx__fronts:where(.svelte-1r14u4e)) > .btn:where(.svelte-1r14u4e) {gap:0.5rem;padding-inline:0.9rem;font-size:0.9rem;}
  }

  /* —— Desktop: der Text jedes Kapitels ist eine Kopfzeile (Titel links, Text und Aufrufe rechts), die Küche liegt
     darunter in einem Rahmen so breit wie die Seite. Das Skript misst die Zeilen (--kx-intro-reach, --kx-top-reach)
     und blendet die Kamera zwischen den Rahmen. —— */
  @media (min-aspect-ratio: 9/10) and (min-width: 761px) and (min-height: 521px) {.kx.svelte-1r14u4e {--kx-copy: 100%;--kx-intro: 100%;}.kx__hold.svelte-1r14u4e {align-items:flex-start;padding-top:clamp(6.25rem, 14vh, 9.5rem);}

    /* Der Titel überspannt die Zeilen der rechten Spalte; die letzte Zeile (1fr) nimmt die übrige Höhe. */.kx__copy.svelte-1r14u4e {display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);grid-template-rows:repeat(5, auto) 1fr;align-items:start;column-gap:clamp(2rem, 5vw, 6rem);}.kx__copy.svelte-1r14u4e > .kx__title:where(.svelte-1r14u4e) {grid-column:1;grid-row:1 / -1;}.kx__copy.svelte-1r14u4e > :where(.svelte-1r14u4e):not(.kx__title) {grid-column:2;}.kx__copy.svelte-1r14u4e > p:where(.svelte-1r14u4e) {max-width:46ch;margin-top:0.6rem;}.kx__chapter--intro.svelte-1r14u4e .kx__title:where(.svelte-1r14u4e) {font-size:clamp(2.4rem, 3.6vw, 3.5rem);}.kx__actions.svelte-1r14u4e {gap:1rem;margin-top:1.5rem;}.kx__spec.svelte-1r14u4e,
    .kx__parts.svelte-1r14u4e,
    .kx__fronts.svelte-1r14u4e {margin-top:1.25rem;}.kx__copy.svelte-1r14u4e > .btn:where(.svelte-1r14u4e) {justify-self:start;margin-top:1.25rem;}

    /* Farben: die Schätzung steht unter dem Titel, wo die linke Spalte Platz hat; so ist diese Zeile nicht höher als
       die anderen, und der Rahmen der Küche behält seine Größe. */[data-kx-chapter='render'].svelte-1r14u4e .kx__copy:where(.svelte-1r14u4e) > .kx__title:where(.svelte-1r14u4e) {grid-row:1;}[data-kx-chapter='render'].svelte-1r14u4e .kx__spec--cost:where(.svelte-1r14u4e) {grid-column:1;grid-row:2 / -1;margin-top:1.1rem;}

    /* Auf breiten Bildschirmen bleibt die Küche bei der Spalte der Seite, höchstens 4rem darüber hinaus: der
       Grundriss einer geraden Küche würde sonst über die ganze Breite laufen. */.kx__frame.svelte-1r14u4e {top:calc(var(--kx-top-reach, 40%) + clamp(0.5rem, 3vh, 2.5rem));right:max(3%, calc(var(--kx-edge) - 4rem));bottom:3%;left:max(3%, calc(var(--kx-edge) - 4rem));}.kx__frame--plan.svelte-1r14u4e {bottom:calc(clamp(1.5rem, 5vh, 2.75rem) + 4rem);}

    /* Die Küche an einer Wand ist hoch: ihr Rahmen endet an der Bildschirmkante, damit die Unterschränke zu sehen
       sind (die L-Küche des alten Rundgangs lief 10 % darüber hinaus). */.kx__frame--hero.svelte-1r14u4e {top:calc(var(--kx-intro-reach, 40%) + clamp(0.5rem, 3vh, 2.5rem));bottom:0;}

    /* Die Küche läuft an der Bildschirmkante ins Papier aus, die Leiste steht auf Papier; das Blatt des Grundrisses
       braucht keinen Verlauf. */.kx__stage.svelte-1r14u4e::before {content:'';position:absolute;inset:auto 0 0;z-index:1;height:14%;background:linear-gradient(to top, var(--kx-tone) 30%, transparent);opacity:calc(1 - var(--kx-exit, 0));pointer-events:none;transition:opacity 0.6s var(--p-ease);}.kx.svelte-1r14u4e:not([data-kx-state]) .kx__stage:where(.svelte-1r14u4e)::before,
    .kx.svelte-1r14u4e[data-kx-state='intro'] .kx__stage:where(.svelte-1r14u4e)::before {height:18%;}.kx.svelte-1r14u4e[data-kx-state='plan'] .kx__stage:where(.svelte-1r14u4e)::before {opacity:0;}.kx__stage.svelte-1r14u4e {background-image:radial-gradient(ellipse 55% 50% at 50% 58%, var(--kx-glow-now), color-mix(in srgb, var(--kx-glow-now) 40%, transparent) 45%, transparent 80%);}.kx__stage.svelte-1r14u4e::after {background:radial-gradient(ellipse 110% 100% at 50% 55%, transparent 45%, var(--kx-shade-soft) 70%, var(--kx-shade));}
  }

  /* —— Bewegung —— */
  @media (prefers-reduced-motion: no-preference) {
    /* Einmaliger Auftritt des ersten Bildschirms. Die h1 ist die größte Fläche: sie bewegt sich nur, sie ist nie
       unsichtbar. */.kx__chapter--intro.svelte-1r14u4e .kx__copy:where(.svelte-1r14u4e) > :where(.svelte-1r14u4e) {
      animation: svelte-1r14u4e-kx-rise 0.65s var(--p-ease) backwards;}.kx__chapter--intro.svelte-1r14u4e .kx__copy:where(.svelte-1r14u4e) > .kx__title:where(.svelte-1r14u4e) {
      animation-name: svelte-1r14u4e-kx-settle;}.kx__chapter--intro.svelte-1r14u4e .kx__copy:where(.svelte-1r14u4e) > :where(.svelte-1r14u4e):nth-child(1) {animation-delay:0.05s;}.kx__chapter--intro.svelte-1r14u4e .kx__copy:where(.svelte-1r14u4e) > :where(.svelte-1r14u4e):nth-child(2) {animation-delay:0.16s;}.kx__chapter--intro.svelte-1r14u4e .kx__copy:where(.svelte-1r14u4e) > :where(.svelte-1r14u4e):nth-child(3) {animation-delay:0.27s;}.kx__chapter--intro.svelte-1r14u4e .kx__copy:where(.svelte-1r14u4e) > :where(.svelte-1r14u4e):nth-child(n + 4) {animation-delay:0.38s;}.kx__rail.svelte-1r14u4e {
      animation: svelte-1r14u4e-kx-rise 0.65s 0.5s var(--p-ease) backwards;}
  }

  @keyframes svelte-1r14u4e-kx-rise {
    from {
      opacity: 0;
      transform: translateY(18px);
    }
  }

  @keyframes svelte-1r14u4e-kx-settle {
    from {
      transform: translateY(12px);
    }
  }

  @media (prefers-reduced-motion: reduce) {html:has(.kx),
    html:has(.kx) .header .bar,
    .kx__stage.svelte-1r14u4e,
    .kx.svelte-1r14u4e[data-kx-state] .kx__copy:where(.svelte-1r14u4e) > :where(.svelte-1r14u4e),
    .kx.svelte-1r14u4e[data-kx-state] .kx__chapter:where(.svelte-1r14u4e).is-active .kx__copy:where(.svelte-1r14u4e) > :where(.svelte-1r14u4e),
    .kx__rail.svelte-1r14u4e ol:where(.svelte-1r14u4e) a:where(.svelte-1r14u4e)::after,
    .kx__parts.svelte-1r14u4e li:where(.svelte-1r14u4e),
    .kx__parts.svelte-1r14u4e li:where(.svelte-1r14u4e)::before,
    .kx__parts.svelte-1r14u4e li:where(.svelte-1r14u4e)::after,
    .kx.svelte-1r14u4e :is(.btn:where(.svelte-1r14u4e), .kx__tour:where(.svelte-1r14u4e)) > svg:where(.svelte-1r14u4e) {transition:none;}.kx.svelte-1r14u4e[data-kx-state] .kx__chapter:where(.svelte-1r14u4e):not(.is-active) .kx__copy:where(.svelte-1r14u4e) > :where(.svelte-1r14u4e) {translate:none;}
  }