/* ============================================================================
   atomAI — home.css · the start page only. Loaded AFTER site.css, which carries
   the tokens, the bar, the buttons and the footer every page shares.

   Everything here is prefixed: h- for the page, m- for the two built product
   pictures. site.css is 2000 lines of other pages' components (.pill, .row,
   .step, .proof, .atom …) and an unprefixed name would inherit their rules.

   Motion is transform/opacity only and driven by home.js through custom
   properties. Without the script (or with reduced motion) the page is simply
   there: nothing is pinned, every step is listed, the pictures stand still.
   The pinning exists only under html.live, which home.js sets.

   CSP is style-src 'self': no inline style anywhere on this page.
   ========================================================================== */

/* The one colour that travels through the atom when a product is hovered.
   Registered so it really interpolates instead of snapping (see WORKLOG (124)). */
@property --h-tone { syntax: "<color>"; inherits: true; initial-value: #4a7dff; }

.h-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.h-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.h-ic { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.h-ic-fill { fill: currentColor; stroke: none; }

/* the turning pictures may reach past their column; they must never widen the page.
   clip, not hidden: hidden would make a scroll container and break the pin. */
.home { overflow-x: hidden; }
@supports (overflow: clip) { html:has(> .home), .home { overflow-x: clip; } }

/* on the start page the bar is bare until the page has moved */
.home .nav.is-top, .p-page .nav.is-top { background: transparent; border-bottom-color: transparent;
  -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px); }
/* … and it FADES in when the page moves, quickly — it no longer pops in (Adrian, 2026-10-15) */
.home .nav, .p-page .nav { transition: background-color .32s ease, border-color .32s ease,
  -webkit-backdrop-filter .32s ease, backdrop-filter .32s ease; }   /* plain ease: the house curve is done in 60 ms and reads as a pop */
@media (prefers-reduced-motion: reduce) { .home .nav, .p-page .nav { transition: none; } }

/* ------------------------------------------------------- the gliding ground ---
   Three wide pools of light under the page (blue, purple, a paler blue). home.js moves
   them with the VISIBLE scroll — not while a stage is pinned. Transform only, on their
   own layer: nothing is repainted while you scroll (never `background-attachment: fixed`). */
.h-amb { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.h-amb i { position: absolute; left: 0; top: 0; width: 72vmax; height: 72vmax; border-radius: 50%; will-change: transform;
  background: radial-gradient(closest-side, var(--c) 0%, color-mix(in srgb, var(--c) 45%, transparent) 40%, transparent 72%); }
.h-amb i:nth-child(1) { --c: rgb(74 125 255 / .13); transform: translate3d(-20vw, -30vh, 0); }
.h-amb i:nth-child(2) { --c: rgb(139 62 222 / .10); transform: translate3d(50vw, 30vh, 0); }
.h-amb i:nth-child(3) { --c: rgb(126 166 248 / .09); transform: translate3d(10vw, 80vh, 0); }
[data-theme="light"] .h-amb i:nth-child(1) { --c: rgb(74 125 255 / .11); }
[data-theme="light"] .h-amb i:nth-child(2) { --c: rgb(139 62 222 / .07); }
[data-theme="light"] .h-amb i:nth-child(3) { --c: rgb(74 125 255 / .07); }
/* the video page lies in its own colour, cyan (Adrian, 2026-10-15) */
[data-acc="video"] .h-amb i:nth-child(1) { --c: rgb(53 172 210 / .13); }
[data-acc="video"] .h-amb i:nth-child(2) { --c: rgb(74 125 255 / .08); }
[data-acc="video"] .h-amb i:nth-child(3) { --c: rgb(92 196 230 / .09); }
[data-theme="light"][data-acc="video"] .h-amb i:nth-child(1), [data-theme="light"] [data-acc="video"] .h-amb i:nth-child(1) { --c: rgb(53 172 210 / .11); }
[data-theme="light"][data-acc="video"] .h-amb i:nth-child(3), [data-theme="light"] [data-acc="video"] .h-amb i:nth-child(3) { --c: rgb(53 172 210 / .07); }

/* the atom can be turned by hand */
.h-atom { cursor: grab; touch-action: pan-y; }
.h-atom.is-drag { cursor: grabbing; }
.h-atom.is-drag .h-mark { pointer-events: none; }

/* ------------------------------------------------------------------ hero --- */
.h-hero { position: relative; display: flex; flex-direction: column;
  min-height: calc(100vh - 64px); min-height: calc(100svh - 64px); padding-bottom: clamp(20px, 4vh, 48px); }
.h-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 80% at 78% 54%, rgb(from var(--acc) r g b / .07), transparent 68%); }

/* the two wreaths, top centre, above everything (green — Adrian) */
.h-proof { position: relative; display: flex; justify-content: center; align-items: center; gap: clamp(26px, 6vw, 84px);
  list-style: none; margin: 0; padding: clamp(14px, 3vh, 34px) 20px 0; }
.h-laurel { display: inline-flex; align-items: center; gap: 12px; }
.h-lw { width: 27px; height: 39px; flex: none; color: var(--ok); fill: currentColor; stroke: none; }
.h-lw-r { transform: scaleX(-1); }
.h-laurel-t { display: grid; justify-items: center; gap: 5px; text-align: center; }
.h-laurel-t b { font: 420 35px/1 var(--serif); letter-spacing: -.02em; color: var(--ink); }
.h-laurel-t i { font: 400 13.5px/1 var(--font); font-style: normal; color: var(--ink3); white-space: nowrap; }

.h-hero-grid { position: relative; flex: 1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(24px, 4vw, 64px); align-items: center; padding-block: clamp(4px, 1vh, 16px) clamp(56px, 11vh, 128px); }
.h-display { font-size: clamp(46px, 6.7vw, 100px); line-height: .98; letter-spacing: -.032em; }
.h-ln { display: block; overflow: hidden; padding-bottom: .16em; margin-bottom: -.16em; }
.h-ln > span { display: block; }
.h-hero .lede { margin-top: clamp(22px, 2.4vw, 34px); max-width: 31em; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; }
.h-hero .cta-row { margin-top: clamp(28px, 3vw, 42px); gap: 12px; }
.h-hero .cta-row .btn svg { width: 18px; height: 18px; }
.h-link { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0;
  font: 500 15px/1 var(--font); color: var(--ink);
  background: linear-gradient(var(--cardLine), var(--cardLine)) 0 100% / 100% 1px no-repeat; }
.h-link:hover { text-decoration: none; }
.h-link .h-ic { transition: transform .4s var(--ease); }
.h-link:hover .h-ic { transform: translateX(4px); }

/* ------------------------------------------------------------- the atom ---
   Three orbits in the classic atom figure, each a circle tipped back by --rx and
   turned in the picture plane by --rz. Since 2026-10-14 (Adrian) they say what we do:
   the INNER orbit (smaller, --k) carries Video, the outer one the apps, the third stays
   empty and dashed — room for what comes next. The things ride them as small spheres
   (electrons); --k and the turns must match ORBITS in home.js.

   ⚠️ There is NO shared 3D scene (no preserve-3d) — measured twice in Chrome:
     · three planes crossing in one point get depth-sorted wrongly, whole arcs vanish;
     · inside a 3D scene an element is clipped to the left of and above its own box.
   So each RING is projected on its own (a line needs no sorting), and the MARKS are
   plain 2D elements: home.js runs the very same rotations and the same perspective
   in arithmetic and writes the result as translate + scale. They stay sharp, they
   take the pointer like any link, and nothing depends on a browser's 3D sorting. */
.h-atom-wrap { display: grid; place-items: center; }
.h-atom { --s: clamp(270px, 34vw, 470px); --ring: rgb(from var(--ink) r g b / .2);
  position: relative; width: var(--s); height: var(--s); perspective: 1300px;
  transition: --h-tone .6s var(--ease); }
/* (a little heavier than a hairline — Adrian: "die Bahnen etwas dicker") */
/* (the line is divided by --k, so a smaller orbit keeps the same weight of line) */
.h-ring { position: absolute; inset: 0; border-radius: 50%; border: calc(max(2px, calc(var(--s) * .0064)) / var(--k, 1)) solid var(--ring); pointer-events: none;
  transition: border-color .6s var(--ease);
  transform: rotateX(calc(var(--tx, -8) * 1deg)) rotateY(calc(var(--ty, 12) * 1deg)) rotateZ(calc(var(--tz, 0) * 1deg)) scale(var(--ts, 1))
             rotateZ(var(--rz)) rotateX(var(--rx)) scale(var(--k, 1)); }
.h-r1 { --rz: 0deg;   --rx: 66deg; --k: .56; }
.h-r2 { --rz: 60deg;  --rx: 66deg; }
.h-r3 { --rz: 120deg; --rx: 66deg; border-style: dashed; }

/* the core: the sphere is the inner part of the box, the rest of the box is its light */
.h-core { position: absolute; z-index: 2; left: 21%; top: 21%; width: 58%; height: 58%; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle at 46.2% 44.6%, color-mix(in srgb, var(--h-tone) 38%, #fff) 0%, var(--h-tone) 6.4%, color-mix(in srgb, var(--h-tone) 56%, #04050a) 14.4%, transparent 14.9%),
    radial-gradient(closest-side, color-mix(in srgb, var(--h-tone) 17%, transparent) 26%, transparent 86%); }

/* A product on its orbit: an ELECTRON — a small sphere in the tool's colour, about half the
   core (Adrian, 2026-10-03: no logos in the model, "dann bleiben wir in dem Stil"). The link
   is the whole box around it (big enough for a finger); the name appears on hover/focus and
   stands there always where nothing can hover. Position without the script: a fixed place. */
.h-mark { --e: #4a7dff; position: absolute; z-index: 3; left: 50%; top: 50%;
  width: calc(var(--s) * .15); height: calc(var(--s) * .15); margin: calc(var(--s) * -.075) 0 0 calc(var(--s) * -.075);
  display: grid; place-items: center; color: var(--ink);
  transform: translate(var(--mx, 0px), var(--my, 0px)) scale(var(--ms, 1)); }
.h-mark:hover { text-decoration: none; }
.h-mark[data-acc="scribe"] { --e: #8b3ede; }
.h-mark[data-acc="video"]  { --e: #35acd2; }
.h-mark-1 { --mx: calc(var(--s) * .25);  --my: calc(var(--s) * .07); }
.h-mark-2 { --mx: calc(var(--s) * .47);  --my: calc(var(--s) * -.06); }
.h-mark-3 { --mx: calc(var(--s) * -.36); --my: calc(var(--s) * .3); }
.h-mark::before { content: ""; position: absolute; z-index: -1; inset: -22%; border-radius: 50%; pointer-events: none;
  /* five stops, not two: a two-stop gradient ends in a visible rim ("Uebergang ins Nichts zu hart") */
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--e) 30%, transparent) 0%, color-mix(in srgb, var(--e) 22%, transparent) 30%,
    color-mix(in srgb, var(--e) 11%, transparent) 55%, color-mix(in srgb, var(--e) 4%, transparent) 78%, transparent 100%);
  opacity: 0; transition: opacity .6s var(--ease); }
.h-mark:hover::before, .h-mark:focus-visible::before { opacity: 1; }
/* the sphere: lit from the upper left like the core, darker towards its far side */
.h-dot { width: 46%; height: 46%; border-radius: 50%; transition: scale .5s var(--ease);
  background: radial-gradient(circle at 36% 30%, color-mix(in srgb, var(--e) 34%, #fff) 0%, var(--e) 38%, color-mix(in srgb, var(--e) 58%, #04050a) 100%); }
.h-mark:hover .h-dot, .h-mark:focus-visible .h-dot { scale: 1.24; }
/* the name: a quiet label right above the sphere */
.h-mark-name { position: absolute; left: 50%; bottom: 82%; translate: -50% 4px; padding: 6px 11px 5px; border-radius: 99px; pointer-events: none;
  font: 600 12.5px/1 var(--brand); letter-spacing: .03em; white-space: nowrap; color: var(--ink);
  background: var(--surface); border: 1px solid var(--cardLine); box-shadow: var(--hoverLift);
  opacity: 0; transition: opacity .3s var(--ease), translate .45s var(--ease); }
.h-mark:hover .h-mark-name, .h-mark:focus-visible .h-mark-name { opacity: 1; translate: -50% -4px; }
/* no hover (phones, tablets): the name simply stands there, small and plain */
@media (hover: none) {
  .h-mark-name { opacity: 1; translate: -50% 2px; padding: 0; background: none; border: 0; box-shadow: none;
    font-weight: 500; font-size: 11.5px; letter-spacing: .08em; color: var(--ink3); }
}

/* hovering a product: the whole model takes its colour (rings + core), softly */
.h-atom:has(.h-mark[data-acc="atom"]:hover), .h-atom:has(.h-mark[data-acc="atom"]:focus-visible) {
  --ring: color-mix(in srgb, #4a7dff 64%, rgb(from var(--ink) r g b / .2)); }
.h-atom:has(.h-mark[data-acc="scribe"]:hover), .h-atom:has(.h-mark[data-acc="scribe"]:focus-visible) {
  --h-tone: #8b3ede; --ring: color-mix(in srgb, #8b3ede 64%, rgb(from var(--ink) r g b / .2)); }
.h-atom:has(.h-mark[data-acc="video"]:hover), .h-atom:has(.h-mark[data-acc="video"]:focus-visible) {
  --h-tone: #35acd2; --ring: color-mix(in srgb, #35acd2 64%, rgb(from var(--ink) r g b / .2)); }

/* ------------------------------------------------------- body + the list ---
   From here on the page has a quiet list beside it: what is on this page, where
   you are, and a way to jump to the start of each part. Not in the hero. */
.h-body { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 0 clamp(28px, 4vw, 60px);
  width: min(1240px, 100% - 40px); }
.h-rail ol { position: sticky; top: calc(50vh - 76px); list-style: none; margin: 0; padding: clamp(56px, 8vw, 110px) 0 40px; display: grid; gap: 2px; }
.h-rail a { position: relative; display: flex; align-items: baseline; gap: 11px; padding: 7px 0 7px 18px;
  font: 500 13px/1.2 var(--brand); letter-spacing: .02em; color: var(--ink3); transition: color .3s var(--ease); }
.h-rail a:hover { color: var(--ink); text-decoration: none; }
.h-rail a span { font-size: 11px; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.h-rail a::before { content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 1px; background: var(--acc);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ease); }
.h-rail a.is-on { color: var(--ink); }
.h-rail a.is-on::before { transform: scaleX(1); }

.h-sec { padding-block: clamp(84px, 11vw, 150px); border-top: 1px solid var(--line); scroll-margin-top: 64px; }
.h-main > .h-sec:first-child { border-top: 0; }
.h-kicker { margin-bottom: 24px; font: 500 12.5px/1.3 var(--brand); letter-spacing: .15em; text-transform: uppercase; color: var(--ink3); }
.h-statement { font-size: clamp(34px, 4.6vw, 64px); line-height: 1.03; letter-spacing: -.028em; max-width: 14em; }
.h-statement-xl { font-size: clamp(38px, 5.6vw, 82px); line-height: 1; max-width: 11em; }
.h-sec > .lede, .h-ask .lede { margin-top: clamp(20px, 2.2vw, 28px); max-width: 31em; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; }

/* --------------------------------------------------- 01 · the two tools ---
   Side by side, each complete in itself, a hairline between them. They run
   together: one scroll turns both pictures and walks both through three steps. */
.h-tools { padding-block: 0; }
.h-stick { padding-block: clamp(64px, 8vw, 110px); }
.live .h-pin { height: 230vh; }
.live .h-stick { position: sticky; top: 64px; height: calc(100vh - 64px); height: calc(100svh - 64px);
  display: flex; align-items: center; padding-block: 0; }

.h-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
.h-prod { min-width: 0; padding-inline: clamp(18px, 2.6vw, 40px); }
.h-prod:first-child { padding-left: 0; }
.h-prod + .h-prod { padding-right: 0; border-left: 1px solid var(--line); }

.h-prod-head { display: flex; align-items: center; gap: 6px; }
.h-prod-ic { flex: none; width: 66px; height: 66px; margin: -13px -4px -13px -14px; }
.h-prod-ic img { display: block; width: 100%; height: 100%; }
.h-prod-name h3 { display: flex; align-items: center; gap: 9px; font: 600 18px/1.2 var(--brand); letter-spacing: -.01em; }
.h-prod-name p { margin-top: 2px; font-size: 13.5px; line-height: 1.3; color: var(--ink2); }
.h-tag { padding: 4px 7px 3px; border: 1px solid currentColor; border-radius: 99px;
  font: 600 10px/1 var(--brand); letter-spacing: .12em; text-transform: uppercase; color: var(--accInk); }
.h-plat { display: flex; align-items: center; gap: 7px; margin-left: auto; font-size: 12.5px; color: var(--ink3); white-space: nowrap; }
.h-plat .h-ic { width: 11px; height: 11px; }
.h-claim { margin-top: 16px; min-height: 2.16em; font: 370 clamp(24px, 2.5vw, 34px)/1.08 var(--serif); letter-spacing: -.024em;
  color: var(--ink); text-wrap: balance; }

/* the three steps. Plain list by default … */
.h-steps { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--line); }
.h-step { padding: 12px 0; border-bottom: 1px solid var(--line); }
.h-step b { display: block; font: 560 15px/1.3 var(--font); color: var(--ink); }
.h-step span { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.5; color: var(--ink2); }
/* … and when the page runs: three names in a row, the accent hairline filling over
   the one you are in, one description under them. */
/* Adrian: you must SEE which step you are in — so the names are big, the current one
   takes the product colour, and the bar over it fills while you scroll through it. */
.live .h-steps { display: grid; grid-template-columns: repeat(3, auto) minmax(0, 1fr); column-gap: 26px; margin-top: 20px; border-top: 2px solid var(--line); }
.live .h-step { display: contents; }
.live .h-step b { grid-row: 1; position: relative; padding: 14px 0 0; font: 600 17px/1.2 var(--font); letter-spacing: -.01em; white-space: nowrap;
  color: var(--ink3); transition: color .4s var(--ease); }
.live .h-step b::after { content: counter(hs, decimal-leading-zero); counter-increment: hs; margin-left: 7px; vertical-align: 2px;
  font: 500 10.5px/1 var(--brand); letter-spacing: .08em; color: var(--ink3); }
.live .h-steps { counter-reset: hs; }
.live .h-step.is-on b { color: var(--accInk); }
.live .h-step b::before { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px; border-radius: 2px; background: var(--acc);
  transform: scaleX(var(--fill, 0)); transform-origin: 0 50%; }
.live .h-step.is-on b::before { transform: scaleX(max(var(--fill, 0), .06)); }
.live .h-step span { grid-row: 2; grid-column: 1 / -1; min-height: 3em; margin-top: 9px; font-size: 15px; line-height: 1.5; color: var(--ink1);
  opacity: 0; transition: opacity .45s var(--ease); }
.live .h-step.is-on span { opacity: 1; }

.h-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 16px; }
.h-price { margin-right: auto; font: 420 28px/1 var(--serif); letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.h-price span { font: 400 14px/1 var(--font); letter-spacing: 0; color: var(--ink2); }
.h-buy .cta-row { gap: 8px; }
.h-buy .btn .h-ic { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- stages ---
   Both product pictures are built, not photographed: sharp at any size, and
   their parts can sit at different depths. Sizes inside are in em; 1em is a
   fixed share of the stage width (cqw) — and, while pinned, never more than
   the window height allows, so the whole block always fits one screen.

   ⚠️ They FOLLOW the page theme (Adrian, 2026-10-03): light page → light app, dark page →
   dark app. And they must stand off the page: never white on white (the light window is a
   soft GREY on the near-white page), never black on black (the dark window is a lifted
   slate on the near-black page). Every colour below is a --w-/--m- token with a light and
   a dark value — no colour is written into a rule. */
.h-stage { position: relative; margin-top: 18px; container-type: inline-size; perspective: 1300px; perspective-origin: 50% 45%; }
.m-win, .m-scene {
  --fit: calc(100cqw / 59);
  /* The HOUSE glass of the apps themselves (packages/tokens/tokens.css in the micro-apps
     repo — Scribe's own design): every surface a gradient, every edge a second gradient.
     These are the LIGHT values; the dark ones follow below. */
  --w-ink: #0f131b; --w-dim: rgba(15, 19, 27, .64); --w-faint: rgba(15, 19, 27, .5);
  --w-line: rgba(30, 46, 86, .12); --w-line2: rgba(30, 46, 86, .19);
  --w-glass:  linear-gradient(158deg, #edf0f5 0%, #e1e6ee 45%, #ced6e5 100%);                                             /* a whole window */
  --w-glass2: linear-gradient(158deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.58) 48%, rgba(214,223,241,.5) 100%);     /* a card on the wall */
  --w-glass3: linear-gradient(158deg, #ffffff 0%, rgba(255,255,255,.84) 55%, rgba(222,229,244,.84) 100%);                 /* a card that stands out */
  --w-edge:  linear-gradient(150deg, #ffffff 0%, rgba(255,255,255,.6) 38%, rgba(104,124,166,.6) 100%);
  --w-edge2: linear-gradient(150deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.45) 46%, rgba(120,140,180,.38) 100%);
  --w-top: rgba(255, 255, 255, .42);                       /* a title bar on a window */
  --w-shade: rgba(24, 38, 76, .5); --w-lift: rgba(24, 38, 76, .42); --w-kbd: #ffffff;
  --w-1: #ffffff; --w-2: #ffffff; --w-3: rgba(30, 46, 86, .12); --w-bg: transparent;
  --w-ok: #25a35a;
  --w-thumb: linear-gradient(140deg, #2b3350, #161a28);    /* the source video's picture */
  --w-frame: rgba(255, 255, 255, .5); --w-fl: 30%; --w-fd: 11%;   /* a clip: its edge, its light and dark end */
  /* atomAI: the same design, in blue (Adrian) — every highlight is the one accent */
  --m-acc: #4a7dff; --m-soft: #7ea6f8; --m-deep: #3869d8; --m-text: #3c6be0;
  --c-cut: var(--m-acc); --c-niche: var(--m-acc); --c-stats: var(--m-acc);
  --w-wall: radial-gradient(70% 55% at 8% -8%, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 60%),
            radial-gradient(65% 55% at 98% 104%, rgba(140,168,226,.62) 0%, rgba(140,168,226,0) 66%),
            linear-gradient(158deg, #e3e9f5 0%, #d2dcef 46%, #bdcbe9 100%);
  position: relative; width: 59em; height: 37em; margin-inline: auto; font-size: var(--fit);
  color: var(--w-ink); line-height: 1.4;
  transform-style: preserve-3d;
  /* scroll angle (--rx/--ry) + a few degrees towards the pointer (--px/--py, mice only) */
  transform: translateY(calc(var(--up, 0) * 1em))
             rotateX(calc(var(--rx, 0) * 1deg + var(--py, 0) * -5deg))
             rotateY(calc(var(--ry, 0) * 1deg + var(--px, 0) * 6deg));
}
/* Scribe: its own purple. The BAR is the tool, so the bar carries it. */
.m-scene { --m-acc: #8b3ede; --m-soft: #9f6ce4; --m-deep: #7200c6; --m-text: #7a2fd0;
  --w-bar:      linear-gradient(158deg, #ffffff 0%, #f4ecfd 44%, #e2cff8 100%);
  --w-bar-edge: linear-gradient(150deg, #ffffff 0%, rgba(255,255,255,.5) 40%, rgba(139,62,222,.45) 100%);
  --w-bar-shade: rgba(48, 22, 92, .32); }

/* ---- the DARK values: a lifted slate on the near-black page ---- */
[data-theme="dark"] .m-win, [data-theme="dark"] .m-scene {
  --w-ink: #eef0f4; --w-dim: rgba(238, 240, 244, .68); --w-faint: rgba(238, 240, 244, .5);
  --w-line: rgba(255, 255, 255, .085); --w-line2: rgba(255, 255, 255, .16);
  --w-glass:  linear-gradient(158deg, #323745 0%, #282c37 45%, #20242e 100%);
  --w-glass2: linear-gradient(158deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.065) 48%, rgba(255,255,255,.04) 100%);
  --w-glass3: linear-gradient(158deg, #3b4254 0%, #303646 55%, #282d3b 100%);
  --w-edge:  linear-gradient(150deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,.15) 38%, rgba(255,255,255,.07) 100%);
  --w-edge2: linear-gradient(150deg, rgba(255,255,255,.27) 0%, rgba(255,255,255,.1) 46%, rgba(255,255,255,.05) 100%);
  --w-top: rgba(255, 255, 255, .05);
  --w-shade: rgba(0, 0, 0, .78); --w-lift: rgba(0, 0, 0, .62); --w-kbd: #343a4a;
  --w-3: rgba(255, 255, 255, .13);
  --w-ok: #5bd88c;
  --w-thumb: linear-gradient(140deg, #6676a6, #343e62);
  --w-frame: rgba(255, 255, 255, .2); --w-fl: 38%; --w-fd: 17%;
  --m-text: #9dbbff;
  --w-wall: radial-gradient(70% 55% at 8% -8%, rgba(165,188,255,.17) 0%, rgba(165,188,255,0) 60%),
            radial-gradient(65% 55% at 98% 104%, rgba(74,125,255,.28) 0%, rgba(74,125,255,0) 66%),
            linear-gradient(158deg, #2b3142 0%, #21263a 46%, #1b2137 100%);
}
[data-theme="dark"] .m-scene { --m-acc: #a56cf0; --m-text: #cdb0fa;
  --w-bar:      linear-gradient(158deg, #48386a 0%, #3a2b5b 44%, #2d2050 100%);
  --w-bar-edge: linear-gradient(150deg, rgba(255,255,255,.44) 0%, rgba(205,176,250,.3) 40%, rgba(150,84,232,.75) 100%);
  --w-bar-shade: rgba(0, 0, 0, .7); }
.live .m-win, .live .m-scene { --fit: min(calc(100cqw / 59), calc((100vh - 470px) / 37)); }
/* the floor under a model: a soft cool shadow, as the house style draws it */
.h-stage::after { content: ""; position: absolute; z-index: -1; left: 8%; right: 8%; bottom: -7%; height: 14%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(24, 38, 76, .32), transparent); }
[data-theme="dark"] .h-stage::after { background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); }

.m-plate { position: absolute; inset: 0; display: grid; grid-template-columns: 4.6em minmax(0, 1fr); overflow: hidden;
  border-radius: 1.3em; border: 1px solid transparent; background: var(--w-wall) padding-box, var(--w-edge) border-box;
  box-shadow: 0 4.5em 8.5em -3.2em var(--w-shade), 0 1.6em 3.4em -1.4em rgba(24, 38, 76, .24), 0 .2em .5em rgba(24, 38, 76, .1); }

/* the app's sidebar, folded to its icons (the app can do that) */
.m-sb { display: flex; flex-direction: column; align-items: center; gap: .2em; padding: 1.25em 0 1em; background: var(--w-glass2); border-right: 1px solid var(--w-line); }
.m-sb-logo { width: 2.1em; height: 2.1em; margin-bottom: .9em; }
.m-sb-new { display: grid; place-items: center; width: 2.7em; height: 2.7em; margin-bottom: .7em; border-radius: .8em;
  background: linear-gradient(158deg, var(--m-soft), var(--m-deep)); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 .6em 1.2em -.6em var(--m-acc); }
.m-sb-new .h-ic { width: 1.2em; height: 1.2em; stroke-width: 2.2; }
.m-sb-it { display: grid; place-items: center; width: 2.7em; height: 2.35em; border: 1px solid transparent; border-radius: .7em; color: var(--w-dim);
  transition: color .5s, background-color .5s, border-color .5s; }
.m-sb-it .h-ic { width: 1.2em; height: 1.2em; stroke-width: 1.9; }
.m-sb-sep { width: 1.6em; height: 1px; margin: .45em 0; background: var(--w-line2); }
.m-win[data-view="1"] .m-it-1 { color: var(--m-text); border-color: transparent;
  background: var(--w-glass3) padding-box, var(--w-edge2) border-box; box-shadow: 0 .5em 1em -.6em var(--w-shade); }
.m-win[data-view="2"] .m-it-2 { color: var(--m-text); border-color: transparent;
  background: var(--w-glass3) padding-box, var(--w-edge2) border-box; box-shadow: 0 .5em 1em -.6em var(--w-shade); }
.m-win[data-view="3"] .m-it-3 { color: var(--m-text); border-color: transparent;
  background: var(--w-glass3) padding-box, var(--w-edge2) border-box; box-shadow: 0 .5em 1em -.6em var(--w-shade); }

.m-mn { display: grid; grid-template-rows: 3.6em minmax(0, 1fr); min-width: 0; }
.m-top { display: flex; align-items: center; justify-content: space-between; padding: 0 1.6em; border-bottom: 1px solid var(--w-line); background: var(--w-top); }
.m-title { display: grid; font: 600 1.2em/1 var(--font); letter-spacing: -.01em; }
.m-title span { grid-area: 1 / 1; opacity: 0; transition: opacity .5s var(--ease); }
.m-win[data-view="1"] .m-t1, .m-win[data-view="2"] .m-t2, .m-win[data-view="3"] .m-t3 { opacity: 1; }
.m-ctl { display: flex; align-items: center; gap: 1.3em; color: var(--w-faint); }
.m-ctl i { position: relative; display: block; width: .8em; height: .8em; }
.m-min::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: .11em solid currentColor; }
.m-max::before { content: ""; position: absolute; inset: .04em; border: .11em solid currentColor; border-radius: .12em; }
.m-x::before, .m-x::after { content: ""; position: absolute; left: -.08em; right: -.08em; top: 50%; border-top: .11em solid currentColor; }
.m-x::before { transform: rotate(45deg); }
.m-x::after  { transform: rotate(-45deg); }

.m-views { position: relative; }
.m-view { position: absolute; inset: 0; padding: 1.6em 2.3em 1.6em 1.6em; opacity: 0; transform: translateY(.7em);
  transition: opacity .5s var(--ease), transform .7s var(--ease); }
.m-win[data-view="1"] .m-v1, .m-win[data-view="2"] .m-v2, .m-win[data-view="3"] .m-v3 { opacity: 1; transform: none; }

/* the part of each view that floats above the plate */
.m-lift { position: absolute; left: 6.2em; right: 2.3em; opacity: 0; transform: translateZ(0);
  transition: opacity .5s var(--ease), transform .9s var(--ease); }
.m-l1 { top: 15.7em; }
.m-l2 { top: 8.8em; }
.m-l3 { top: 16em; bottom: 1.6em; }
.m-win[data-view="1"] .m-l1 { opacity: 1; transform: translateZ(3.2em); }
.m-win[data-view="2"] .m-l2 { opacity: 1; transform: translateZ(3.8em); }
.m-win[data-view="3"] .m-l3 { opacity: 1; transform: translateZ(2.8em); }

/* view 1 — AutoCut */
.m-kick { display: flex; align-items: center; gap: .5em; margin: 0; font: 600 .95em/1.4 var(--font); color: var(--c-cut); }
.m-kick .h-ic { width: 1.1em; height: 1.1em; }
.m-src { display: grid; grid-template-columns: 7.6em minmax(0, 1fr); gap: 1.2em; align-items: center; height: 5.2em; margin-top: .9em; padding: .65em 1.2em .65em .65em;
  border-radius: 1em; border: 1px solid transparent; background: var(--w-glass3) padding-box, var(--w-edge2) border-box; }
.m-src-thumb { height: 100%; border-radius: .6em; background: var(--w-thumb); }
.m-src-name { display: flex; justify-content: space-between; font-size: .86em; color: var(--w-dim); }
.m-src-name span { color: var(--w-faint); font-variant-numeric: tabular-nums; }
.m-src-wave { position: relative; height: .6em; margin-top: .95em; border-radius: 99em; background: var(--w-3); }
.m-hl { position: absolute; top: 0; bottom: 0; border-radius: 99em; background: var(--c-cut); }
.m-hl-1 { left: 6%;  width: 6%; }
.m-hl-2 { left: 22%; width: 8%; }
.m-hl-3 { left: 41%; width: 6%; }
.m-hl-4 { left: 60%; width: 9%; }
.m-hl-5 { left: 82%; width: 6%; }
.m-ph { position: absolute; left: 34%; top: -.55em; bottom: -.55em; width: .14em; border-radius: 1em; background: var(--w-ink); }
.m-sub { margin: .9em 0 0; font-size: .9em; color: var(--w-faint); }
.m-sub b { font-weight: 600; color: var(--w-ink); }

.m-clips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1em; }
.m-frame { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: .8em; border: 1px solid var(--w-frame);
  background: radial-gradient(120% 80% at 50% 0%, hsl(var(--h) 30% var(--w-fl)), hsl(var(--h) 28% var(--w-fd)) 78%);
  box-shadow: 0 1.5em 2.6em -1.1em var(--w-lift); }
.m-c1 { --h: 224; } .m-c2 { --h: 284; } .m-c3 { --h: 196; } .m-c4 { --h: 24; } .m-c5 { --h: 248; }
.m-frame::before { content: ""; position: absolute; left: 50%; top: 27%; width: 31%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%;
  background: rgba(255, 255, 255, .11); }
.m-frame::after { content: ""; position: absolute; left: 50%; top: 49%; width: 74%; height: 60%; translate: -50% 0; border-radius: 50% 50% 0 0 / 46% 46% 0 0;
  background: rgba(255, 255, 255, .09); }
.m-score { position: absolute; z-index: 1; left: .5em; top: .5em; padding: .32em .5em .28em; border-radius: .5em;
  background: rgba(8, 9, 13, .72); font: 600 .78em/1 var(--brand); color: #fff; }
.m-cap { position: absolute; z-index: 1; left: 12%; right: 12%; bottom: 17%; display: grid; justify-items: center; gap: .32em; }
.m-cap i { display: block; width: 86%; height: .58em; border-radius: .3em; background: #fff; }
.m-cap i + i { width: 54%; opacity: .62; }
.m-clip p { margin: .55em 0 0; font-size: .8em; line-height: 1.25; color: var(--w-ink); }
.m-clip em { display: block; margin-top: .2em; font: 400 .74em/1 var(--font); font-style: normal; color: var(--w-faint); font-variant-numeric: tabular-nums; }

/* view 2 — Niche finder */
.m-tabs { display: flex; align-items: center; gap: 1.7em; height: 2.4em; font-size: .95em; color: var(--w-faint); }
.m-tabs .m-on { color: var(--w-ink); }
.m-sp { flex: 1; }
.m-chip { padding: .42em .95em; border: 1px solid var(--w-line2); border-radius: 99em; font-size: .9em; background: rgba(255, 255, 255, .4); }
.m-chip.m-on { color: var(--m-acc); border-color: transparent; background: var(--w-glass3) padding-box, var(--w-edge2) border-box; }
.m-chip + .m-chip { margin-left: -1em; }
.m-tabs-tight { gap: .7em; }
.m-tabs-tight .m-chip + .m-chip { margin-left: 0; }
.m-rows { display: grid; gap: .8em; margin-top: 1.2em; }
.m-row { display: grid; grid-template-columns: auto minmax(0, 1fr) 5.6em 5.8em auto; align-items: center; gap: 1.3em; height: 6em; padding: 0 1.4em;
  border-radius: 1em; border: 1px solid transparent; background: var(--w-glass2) padding-box, var(--w-edge2) border-box; }
.m-row-ghost { background: none; border: 1px dashed var(--w-line2); }
.m-row-top { background: var(--w-glass3) padding-box, var(--w-edge) border-box; box-shadow: 0 1.8em 3em -1.3em var(--w-lift); }
.m-av { width: 2.8em; height: 2.8em; border-radius: 50%; background: linear-gradient(140deg, hsl(var(--h) 34% 46%), hsl(var(--h) 34% 24%)); }
.m-av-1 { --h: 28; } .m-av-2 { --h: 152; } .m-av-3 { --h: 36; } .m-av-4 { --h: 112; }
.m-row-id b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 1.04em/1.25 var(--font); }
.m-row-id span { font-size: .84em; color: var(--w-faint); }
.m-met span { display: block; font-size: .72em; color: var(--w-faint); white-space: nowrap; }
.m-met b { font: 600 1.04em/1.3 var(--font); font-variant-numeric: tabular-nums; }
.m-out { padding: .46em .8em; border-radius: 99em; white-space: nowrap; font: 600 .82em/1 var(--font);
  color: var(--m-text); background: color-mix(in srgb, var(--m-acc) 13%, transparent); border: 1px solid color-mix(in srgb, var(--m-acc) 32%, transparent); }

/* view 3 — Statistics */
.m-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em; margin-top: 1.2em; }
.m-kpi { position: relative; height: 6em; padding: 1em 1.3em; border-radius: 1em; border: 1px solid transparent; background: var(--w-glass2) padding-box, var(--w-edge2) border-box; }
.m-kpi span { display: block; font-size: .8em; color: var(--w-faint); }
.m-kpi b { display: block; margin-top: .15em; font: 600 1.7em/1.3 var(--font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.m-kpi em { position: absolute; right: 1.3em; top: 1.05em; font: 600 .8em/1 var(--font); font-style: normal; color: var(--w-ok); }
.m-chart { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; overflow: hidden; padding: 1.2em 1.5em 0;
  border-radius: 1em; border: 1px solid transparent; background: var(--w-glass3) padding-box, var(--w-edge) border-box; box-shadow: 0 1.8em 3em -1.3em var(--w-lift); }
.m-chart-top { display: flex; justify-content: space-between; font-size: .95em; }
.m-chart-top b { font-weight: 600; }
.m-chart-top span { color: var(--w-faint); }
.m-chart svg { display: block; width: calc(100% + 3em); max-width: none; height: 100%; margin: .8em -1.5em 0; }

/* ---- Scribe: a message window, the dictation bar floating in front of it ---- */
.m-doc { position: absolute; inset: 0 0 5.6em; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 1.3em; border: 1px solid transparent; background: var(--w-glass) padding-box, var(--w-edge) border-box;
  box-shadow: 0 4.5em 8em -4em var(--w-shade), 0 1.4em 3em -1.6em var(--w-shade); }
.m-doc-bar { display: flex; align-items: center; justify-content: space-between; height: 3.6em; padding: 0 1.6em;
  border-bottom: 1px solid var(--w-line); background: var(--w-top); color: var(--w-dim); }
.m-doc-bar > span { font: 500 1.12em/1 var(--font); }
.m-doc-row { display: flex; gap: 1.2em; padding: .9em 1.55em; border-bottom: 1px solid var(--w-line); font-size: 1.2em; }
.m-doc-row span { width: 4.6em; color: var(--w-faint); }
.m-doc-row b { font-weight: 500; }
.m-doc-body { margin: 0; padding: 1.2em 1.4em; font: 400 1.62em/1.6 var(--font); letter-spacing: -.008em; color: var(--w-ink); }
.m-doc-body .m-w { opacity: 0; transition: opacity .25s ease-out; }
.m-doc-body .m-w.m-on { opacity: 1; }
.m-doc-body .m-w.m-cur::after { content: ""; display: inline-block; width: .09em; height: 1.08em; margin-left: .16em; vertical-align: -.17em;
  border-radius: 1em; background: var(--m-acc, #4a7dff); animation: m-blink 1.05s steps(2, jump-none) infinite; }
@keyframes m-blink { 50% { opacity: 0; } }

/* the dictation bar, modelled on the real one (apps/dictation overlay): a head row with REC,
   level, the mark, the time and Esc, and under it the words as they are heard. In BLUE,
   the cleaner house colour (Adrian), not the product's purple. */
.m-bar { position: absolute; left: 50%; bottom: -.6em; width: 40em; translate: -50% 0; transform: translateZ(6em);
  padding: 1em 1.2em 1.1em; border-radius: 1.3em; border: 1px solid transparent; background: var(--w-glass3) padding-box, var(--w-edge) border-box;
  box-shadow: 0 2.2em 4.2em -1.6em var(--w-lift), 0 .4em 1em -.4em var(--w-shade);
  transition: opacity .5s var(--ease), translate .6s var(--ease); }
.m-bar-head { display: flex; align-items: center; gap: .9em; }
.m-rec { display: inline-flex; align-items: center; gap: .45em; padding: .3em .6em; border-radius: 99em;
  background: color-mix(in srgb, var(--m-acc) 16%, transparent); color: var(--m-text); font: 700 .78em/1 var(--brand); letter-spacing: .1em; }
.m-rec i { width: .62em; height: .62em; border-radius: 50%; background: var(--m-acc); }
.m-bars { display: flex; align-items: center; gap: .3em; height: 1.7em; }
.m-bars i { display: block; width: .26em; height: 100%; border-radius: 1em; background: var(--m-acc); transform: scaleY(.25); opacity: .45; transition: opacity .4s; }
.m-brand { display: inline-flex; align-items: center; gap: .4em; margin-left: auto; font: 500 .9em/1 var(--brand); color: var(--w-dim); white-space: nowrap; }
.m-brand img { width: 1.15em; height: 1.15em; }
.m-brand b { font-weight: 700; color: var(--w-ink); }
.m-time { font: 500 .85em/1 var(--mono); color: var(--w-faint); font-variant-numeric: tabular-nums; }
.m-esc { display: inline-flex; align-items: center; gap: .4em; font-size: .82em; color: var(--w-faint); }
.m-esc kbd, .m-key kbd { padding: .25em .45em; border-radius: .4em; background: var(--w-kbd); border: 1px solid var(--w-line2);
  font: 500 .95em/1 var(--mono); color: var(--w-dim); }
.m-bar-text { min-height: 1.5em; margin: .7em 0 0; font: 400 1.18em/1.5 var(--font); color: var(--w-ink);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; direction: rtl; text-align: left; }
.m-bar-text > span { direction: ltr; unicode-bidi: isolate; }
/* the key that starts it: only while the step is "Press" */
.m-key { position: absolute; left: 50%; top: -3.2em; translate: -50% 0; display: flex; gap: .35em; font-size: 1.1em;
  opacity: 0; transition: opacity .4s var(--ease), translate .4s var(--ease); }
.is-press .m-key { opacity: 1; translate: -50% -.3em; }
.is-press .m-key kbd { color: var(--w-ink); border-color: var(--m-acc); box-shadow: 0 .2em 0 color-mix(in srgb, var(--m-acc) 30%, transparent); }
/* while it listens the level moves and the dot pulses */
.is-live .m-bars i { opacity: 1; animation: m-bar 1s ease-in-out infinite; }
.is-live .m-rec i { animation: m-pulse 1.1s ease-in-out infinite; }
.is-live .m-bars i:nth-child(2) { animation-delay: -.72s; animation-duration: .84s; }
.is-live .m-bars i:nth-child(3) { animation-delay: -.31s; animation-duration: 1.12s; }
.is-live .m-bars i:nth-child(4) { animation-delay: -.9s;  animation-duration: .78s; }
.is-live .m-bars i:nth-child(5) { animation-delay: -.16s; animation-duration: .96s; }
.is-live .m-bars i:nth-child(6) { animation-delay: -.55s; animation-duration: 1.2s; }
.is-live .m-bars i:nth-child(7) { animation-delay: -.83s; animation-duration: .88s; }
.is-live .m-bars i:nth-child(8) { animation-delay: -.24s; animation-duration: 1.04s; }
.is-live .m-bars i:nth-child(9) { animation-delay: -.63s; animation-duration: .92s; }
/* inserted: the words are in the window, the bar steps back */
.is-done .m-bar { opacity: .35; translate: -50% .8em; }
@keyframes m-bar { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
@keyframes m-pulse { 50% { opacity: .35; } }

/* ---- round 4 (Adrian): fewer, BIGGER parts — "da darf nicht so viel kleiner Scheiss sein" ----
   The atomAI window is drawn on a smaller em grid (48 × 30 instead of 59 × 37), so the same
   stage makes every part ~23 % larger; what was only texture (file names, tabs, durations,
   five clips, nine icons) is gone. Rules below override the geometry above. */
.m-win { width: 48em; height: 30em; --fit: calc(100cqw / 48); }
.live .m-win { --fit: min(calc(100cqw / 48), calc((100vh - 470px) / 30)); }
.m-plate { grid-template-columns: 4.4em minmax(0, 1fr); }
/* seven places in the sidebar — enough to see there is a whole workspace behind the three shown */
.m-sb { gap: .4em; padding-top: 1.2em; }
.m-sb-logo { width: 2em; height: 2em; margin-bottom: .5em; }
.m-sb-new { width: 2.6em; height: 2.6em; margin-bottom: .5em; }
.m-sb-it { width: 2.4em; height: 2.4em; margin-bottom: 0; }
.m-sb-new .h-ic, .m-sb-it .h-ic { width: 1.3em; height: 1.3em; }
.m-mn { grid-template-rows: 3.4em minmax(0, 1fr); }
.m-title { font-size: 1.35em; }
.m-view { padding: 1.6em 2em 1.6em 1.6em; }
.m-src { grid-template-columns: 6.4em minmax(0, 1fr); height: 4.6em; margin-top: 0; }
.m-src-wave { margin-top: 0; height: .8em; }
.m-hl-1 { left: 8%;  width: 12%; }
.m-hl-2 { left: 38%; width: 14%; }
.m-hl-3 { left: 70%; width: 12%; }
.m-ph { left: 46%; }
.m-lift { left: 6em; right: 2em; }
.m-l1 { top: 11em; }
.m-clips { display: flex; justify-content: center; gap: 1.6em; }
.m-clip { width: 8.4em; }
.m-score { font-size: 1em; }
.m-cap i { height: .7em; }
.m-l2 { top: 5em; }
.m-rows { margin-top: 0; gap: 1em; }
.m-row { grid-template-columns: auto minmax(0, 1fr) auto; height: 5.6em; gap: 1.2em; padding: 0 1.4em; }
.m-row-ghost { border-color: transparent; }
.m-row > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 1.2em/1.2 var(--font); }
.m-out { padding: .45em .8em; font-size: 1.05em; }
.m-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2em; margin-top: 0; }
.m-kpi { height: 6.4em; padding: 1.1em 1.4em; }
.m-kpi span { font-size: .95em; }
.m-kpi b { font-size: 2.1em; }
.m-kpi em { font-size: .95em; }
.m-l3 { top: 12.6em; bottom: 1.6em; }
.m-chart { display: block; padding: 0; }
.m-chart svg { width: 100%; height: 100%; margin: 0; }

/* Scribe: the scene drawn larger too; and the BAR is Scribe — a soft purple gradient in its
   glass and the Scribe mark, so one sees at once that this is the tool. The message window
   is any program and stays neutral. When the words are in, the bar goes back down. */
.m-scene { width: 50em; height: 31.5em; --fit: calc(100cqw / 50); }
.live .m-scene { --fit: min(calc(100cqw / 50), calc((100vh - 470px) / 31.5)); }
.m-doc { inset: 0 0 4.6em; }
.m-doc-body .m-w.m-cur::after { background: var(--w-ink); }
.m-bar { width: 34em; padding: 1.1em 1.3em 1.2em; border: 1px solid transparent;
  background: var(--w-bar) padding-box, var(--w-bar-edge) border-box;
  box-shadow: 0 .7em 1.5em -.9em var(--w-bar-shade); }
.m-bar-head { gap: 1em; }
.m-rec { font-size: .95em; }
.m-bars { height: 2em; gap: .32em; }
.m-bars i { width: .3em; }
.m-logo { display: block; width: 2.4em; height: 2.4em; margin-left: auto; }
.m-logo img { display: block; width: 100%; height: 100%; }
.m-bar-text { font-size: 1.3em; }
.is-done .m-bar { opacity: 0; translate: -50% 2.4em; }
.h-stage:has(.m-scene)::after { display: none; }

/* ------------------------------------------------------- facts & promises --- */
.h-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 44px); margin-top: clamp(48px, 6vw, 84px); }
.h-fact { padding-top: 22px; border-top: 1px solid var(--cardLine); }
.h-fact h3 { display: flex; align-items: center; gap: 10px; font: 560 17px/1.3 var(--font); letter-spacing: -.01em; }
.h-fact-ic { width: 19px; height: 19px; color: var(--acc); stroke-width: 1.7; }
.h-fact p { margin-top: 8px; max-width: 24em; font-size: 15px; line-height: 1.55; color: var(--ink2); }
.h-trust { display: flex; flex-wrap: wrap; gap: 12px 36px; list-style: none; margin: clamp(40px, 5vw, 68px) 0 0; padding: 0; font-size: 14.5px; color: var(--ink2); }
.h-trust li { display: inline-flex; align-items: center; gap: 9px; }
.h-trust .h-ic { width: 15px; height: 15px; color: var(--ok); stroke-width: 2.2; }

.h-prose { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px clamp(24px, 4vw, 56px); max-width: 780px;
  margin-top: clamp(30px, 4vw, 54px); font-size: 16.5px; line-height: 1.62; color: var(--ink2); }
.h-prose p + p { margin-top: 0; }
.h-prose b { font-weight: 560; color: var(--ink); }

.h-ask { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px clamp(24px, 4vw, 64px); align-items: center; }
.h-ask .cta-row { margin-top: clamp(28px, 3vw, 40px); }
.h-quark img { display: block; width: clamp(170px, 21vw, 270px); height: auto; }

/* ------------------------------------------------------------ product pages ---
   /atomAI and /scribe (body.p-page): a short hero with the app's model playing its three
   steps by itself, then the features as quiet hairline columns instead of a block each.
   The price section below is untouched (Adrian: "den solltest du nicht mehr veraendern"). */
.p-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 76px); align-items: center;
  padding-block: clamp(44px, 7vw, 96px) clamp(56px, 8vw, 112px); }
.p-hero .h-kicker { margin-bottom: 20px; color: var(--accInk); display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.p-title { font-size: clamp(42px, 5.4vw, 78px); line-height: 1; letter-spacing: -.03em; }
.p-hero .lede { margin-top: 22px; max-width: 30em; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; }
.p-hero .cta-row { margin-top: 30px; }
.p-proof { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; margin: 24px 0 0; padding: 0; font-size: 14px; color: var(--ink1); }
.p-proof li { display: inline-flex; align-items: center; gap: 8px; }
.p-proof .h-ic { width: 15px; height: 15px; color: var(--ok); stroke-width: 2.2; }
.p-hero .plat { margin-top: 14px; }
.p-hero .tiny { margin-top: 10px; max-width: 34em; color: var(--ink3); }
.p-hero-pic { min-width: 0; }
.p-hero-pic .h-stage { margin-top: 0; }
.p-hero-pic .h-steps { margin-top: 26px; }

.p-three-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); }
.p-col { padding-top: 22px; border-top: 1px solid var(--cardLine); }
.p-h { margin-top: 12px; font-size: clamp(24px, 2.3vw, 31px); line-height: 1.1; letter-spacing: -.024em; }
.p-lede { margin-top: 12px; font-size: 15.5px; line-height: 1.6; color: var(--ink2); }
.p-list { display: grid; gap: 8px; list-style: none; margin: 16px 0 0; padding: 0; font-size: 14.5px; line-height: 1.45; color: var(--ink1); }
.p-list li { position: relative; padding-left: 18px; }
.p-list li::before { content: ""; position: absolute; left: 0; top: .7em; width: 8px; height: 1.5px; border-radius: 2px; background: var(--acc); }

/* the older feature blocks on these pages, in the same quiet dress: no tiles, no icon squares */
/* (only the plain lists — the cards INSIDE a feature picture keep their glass) */
.p-page .grid-3 > .feat, .p-page .tiles .tile { padding: 20px 0 0; background: none; border: 0; border-top: 1px solid var(--cardLine); border-radius: 0; box-shadow: none; }
.p-page .feat-ic, .p-page .tile-ic { display: none; }
.p-page .feat h3 { font: 600 17px/1.3 var(--font); }
.p-page .feat p, .p-page .tile p { color: var(--ink2); }
.p-page .tile b { font: 600 15.5px/1.3 var(--font); color: var(--ink); }

/* ---- product pages, round three (Adrian): less air, smaller side shows, a few icons ---- */
.p-page .sec { padding: 60px 0; }
.p-page .sec--tight { padding: 44px 0; }
.p-page .mid h2 { font-size: clamp(28px, 3.2vw, 42px); }
.p-page .mid .lede { font-size: 16px; }
/* "It types where you already type": a strip, not half a page */
.p-page .marquee { margin-top: 18px; }
.p-page .marquee span { transform: scale(.82); }
/* "Two years …" above the prices: one quiet line instead of a poster */
.p-page .value { padding-block: 0 6px; }
.p-page .value-n { font-size: clamp(34px, 4.2vw, 54px); }
.p-page .value-l { font-size: 15px; }
/* icons are back, small and in the accent, without a tile behind them */
.p-page .feat-ic, .p-page .tile-ic { display: block; width: auto; height: auto; margin: 0 0 12px; padding: 0; background: none;
  border: 0; box-shadow: none; color: var(--acc); }
.p-page .feat-ic svg, .p-page .tile-ic svg { width: 21px; height: 21px; }
/* The feature pictures of /atomAI wear the apps' glass as well, and — like the models —
   they follow the page theme and stand off the page: a soft GREY glass on the near-white
   page (never white on white), a lifted slate on the near-black one. */
.p-page .split-art {
  --ink: #0f131b; --ink1: rgba(15, 19, 27, .84); --ink2: rgba(15, 19, 27, .64); --ink3: rgba(15, 19, 27, .5);
  --glass:  linear-gradient(158deg, #edf0f5 0%, #e1e6ee 45%, #ced6e5 100%);
  --glass2: linear-gradient(158deg, #f1f3f8 0%, #e5e9f1 48%, #d3dae8 100%);
  --glass3: linear-gradient(158deg, #f5f7fa 0%, #e9edf4 55%, #d9e0ed 100%);
  --glassHov: linear-gradient(158deg, #f8f9fc 0%, #eef1f7 55%, #dfe5f0 100%);
  --edge:  linear-gradient(150deg, #ffffff 0%, rgba(255,255,255,.6) 38%, rgba(104,124,166,.6) 100%);
  --edge2: linear-gradient(150deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.45) 46%, rgba(120,140,180,.38) 100%);
  --line: rgba(30, 46, 86, .14); --cardLine: rgba(30, 46, 86, .19); --cardBase: #e7ebf2;
  --hl: rgba(255, 255, 255, .85); --lift: 0 20px 40px -26px rgba(24, 38, 76, .5); --shadow: 0 30px 60px -30px rgba(24, 38, 76, .45);
  --sa-clip: linear-gradient(158deg, rgb(74 125 255 / .24), rgb(74 125 255 / .08)), linear-gradient(158deg, #f1f3f8, #dbe2ef);
  --sa-clip-line: rgb(74 125 255 / .34);
  color: var(--ink1);
}
[data-theme="dark"] .p-page .split-art {
  --ink: #eef0f4; --ink1: rgba(238, 240, 244, .9); --ink2: rgba(238, 240, 244, .68); --ink3: rgba(238, 240, 244, .5);
  --glass:  linear-gradient(158deg, #323745 0%, #282c37 45%, #20242e 100%);
  --glass2: linear-gradient(158deg, #353b4a 0%, #2b303c 48%, #232731 100%);
  --glass3: linear-gradient(158deg, #3b4254 0%, #303646 55%, #282d3b 100%);
  --glassHov: linear-gradient(158deg, #424a5f 0%, #363d4f 55%, #2d3342 100%);
  --edge:  linear-gradient(150deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,.15) 38%, rgba(255,255,255,.07) 100%);
  --edge2: linear-gradient(150deg, rgba(255,255,255,.27) 0%, rgba(255,255,255,.1) 46%, rgba(255,255,255,.05) 100%);
  --line: rgba(255, 255, 255, .11); --cardLine: rgba(255, 255, 255, .17); --cardBase: #2a2f3b;
  --hl: rgba(255, 255, 255, .09); --lift: 0 20px 40px -26px rgba(0, 0, 0, .8); --shadow: 0 30px 60px -30px rgba(0, 0, 0, .85);
  --sa-clip: linear-gradient(158deg, rgb(74 125 255 / .36), rgb(74 125 255 / .13)), linear-gradient(158deg, #353b4a, #232838);
  --sa-clip-line: rgb(126 166 248 / .42);
}
.p-page .split { gap: clamp(28px, 5vw, 72px); }
/* the recording-to-clips picture had collapsed to its smallest size inside the column */
.p-page .split-art .model { width: 100%; display: grid; place-items: center; }
.p-page .split-art .reel { width: min(420px, 100%); }
/* the clips are glass with a blue breath, like every model */
.p-page .split-art .clip { background: var(--sa-clip); border-color: var(--sa-clip-line); }

@media (max-width: 900px) {
  .p-hero { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .p-three-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* ------------------------------------------------------- the serif, pinned ---
   Stands after every `font:` shorthand above on purpose — the shorthand resets both. */
.h-laurel-t b, .h-claim, .h-price, .p-title, .p-h { font-optical-sizing: none; font-variation-settings: "opsz" 64; }

/* --------------------------------------------------------------- motion ---
   The hero comes in with plain CSS animations: nothing to wait for, nothing that
   could leave it hidden if a script fails. */
/* The text of the hero STANDS — it is there when the page is (Adrian). Only the atom comes in. */
@media (prefers-reduced-motion: no-preference) {
  .h-atom-wrap.h-in { animation: h-in-atom 1.5s var(--ease) .15s both; }
}
@keyframes h-line { from { transform: translateY(112%); } }
@keyframes h-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes h-in-atom { from { opacity: 0; transform: scale(.94); } }
@media (prefers-reduced-motion: reduce) {
  .m-doc-body .m-w { opacity: 1; }
  .m-doc-body .m-w.m-cur::after, .m-bars i, .m-rec i { animation: none !important; }
}

/* ------------------------------------------------------------ responsive --- */
@media (max-width: 1100px) {
  /* no room for the list beside the page: the page takes the full width */
  .h-body { grid-template-columns: minmax(0, 1fr); width: min(1180px, 100% - 40px); }
  .h-rail { display: none; }
}

@media (max-width: 900px) {
  .h-hero { min-height: 0; }
  .h-proof { gap: 14px 22px; flex-wrap: wrap; }
  .h-laurel { gap: 8px; }
  .h-lw { width: 19px; height: 28px; }
  .h-laurel-t b { font-size: 25px; }
  .h-laurel-t i { font-size: 12px; }
  .h-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-block: 34px 8px; }
  .h-atom-wrap { padding-block: 40px 34px; }
  .h-atom { --s: min(74vw, 330px); }

  /* the two tools under each other, each driven by its own place on the screen */
  .live .h-pin { height: auto; }
  .live .h-stick, .h-stick { position: static; height: auto; display: block; padding-block: 64px; }
  .h-duo { grid-template-columns: minmax(0, 1fr); }
  .h-prod, .h-prod:first-child, .h-prod + .h-prod { padding-inline: 0; }
  .h-prod + .h-prod { border-left: 0; border-top: 1px solid var(--line); margin-top: 56px; padding-top: 56px; }
  .h-claim { min-height: 0; }
  .live .m-win { --fit: calc(100cqw / 48); }
  .live .m-scene { --fit: calc(100cqw / 50); }
  .h-stage { perspective: 900px; }
  .h-buy .cta-row { width: 100%; flex-wrap: nowrap; }
  .h-buy .cta-row .btn { flex: 1 1 0; width: auto; min-width: 0; padding-inline: 10px; }

  .h-sec { padding-block: 76px; }
  .h-facts { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .h-prose { grid-template-columns: minmax(0, 1fr); }
  .h-ask { grid-template-columns: minmax(0, 1fr); }
  .h-quark { order: -1; }
  .h-quark img { width: 150px; margin-left: -14px; }
}

@media (max-width: 480px) {
  .h-plat { display: none; }
  .live .h-steps { column-gap: 16px; }
  .live .h-step b { font-size: 15px; }
  .live .h-step b::after { display: none; }
}

/* a low window: not enough height to hold both tools on one screen — no pinning */
@media (max-height: 640px) and (min-width: 901px) {
  .live .h-pin { height: auto; }
  .live .h-stick { position: static; height: auto; display: block; padding-block: 64px; }
  .live .m-win { --fit: calc(100cqw / 48); }
  .live .m-scene { --fit: calc(100cqw / 50); }
}

/* ============================================================================
   2026-10-14 · TWO AREAS (Adrian): Video and Apps. The start page says what we do and
   sends you on; the apps (and everything that was on the start page about them) live
   on /apps; the video work has its own page, /video. Prefixes as above: h- start page,
   a- apps page, v- video page.
   ⚠️ NO STAND-INS FOR VIDEOS (Adrian, 2026-10-14: "keine Platzhalter … die Videos kommen
   wann anders dazu an die Stellen"). Nothing here imitates a video; where real films
   will go (video page head, a "Work" section under it, the Video panel on the start
   page), there is simply nothing yet.
   ========================================================================== */

/* -------------------------------------------- start page · what we do --- */
.h-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(4px, 1vw, 12px); }
.h-cat { position: relative; display: flex; flex-direction: column; min-width: 0;
  padding: clamp(30px, 3.2vw, 46px) clamp(18px, 2.6vw, 40px) 6px; }
.h-cat:first-child { padding-left: 0; }
.h-cat + .h-cat { padding-right: 0; border-left: 1px solid var(--line); }
.h-cat-top { display: flex; align-items: center; gap: 11px; font: 500 12.5px/1.3 var(--brand); letter-spacing: .15em; text-transform: uppercase; color: var(--ink3); }
/* the electron of this thing on the atom above */
.h-cat-top i { width: 10px; height: 10px; flex: none; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, color-mix(in srgb, var(--acc) 34%, #fff) 0%, var(--acc) 40%, color-mix(in srgb, var(--acc) 60%, #04050a) 100%); }
.h-cat-top i + i { margin-left: -6px; }
.h-cat h3 { margin-top: 20px; font: 370 clamp(32px, 3.4vw, 50px)/1.04 var(--serif); letter-spacing: -.027em; color: var(--ink); text-wrap: balance; }
.h-cat-a { color: inherit; }
.h-cat-a:hover { text-decoration: none; }
.h-cat-a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; }
/* the panel's way on: a real button (Adrian: the text links "sollten Buttons sein") */
.h-cat-btn { align-self: start; justify-self: start; margin-top: 30px; }
.h-cat-btn .h-ic { width: 17px; height: 17px; margin-left: 2px; transition: transform .4s var(--ease); }
.h-cat-btn:hover .h-ic { transform: translateX(3px); }
/* same rows in both panels: the lists (atomAI · Scribe / Ads · Product videos · Social clips) and the
   buttons stand at the same height, whatever the texts above them (Adrian, 2026-10-15) */
@media (min-width: 901px) {
  .h-cats { grid-template-rows: repeat(5, auto); }
  .h-cat { display: grid; grid-row: span 5; grid-template-rows: subgrid; align-content: start; }
}
.h-cat > p { margin-top: 16px; max-width: 27em; font-size: 16px; line-height: 1.6; color: var(--ink2); }
/* what is inside: plain words (and the apps' own icons), no pictures */
.h-cat-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 24px 0 0; padding: 0; }
.h-cat-list li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px; border: 1px solid var(--cardLine); border-radius: 99px;
  font: 500 13.5px/1 var(--font); color: var(--ink1); }
.h-cat-list img { width: 18px; height: 18px; margin: -2px 0 -2px -4px; }

/* ---------------------------------------------------- the apps page ---
   The tools that stood on the start page until 2026-10-14, under a quiet head. */
.a-hero { padding-block: clamp(64px, 9vw, 128px) clamp(10px, 2vw, 28px); }
.a-hero .h-display { max-width: 11em; }
/* only one app on the page (the atomAI app is parked, 2026-10-15): it takes the column, not half of it */
.h-solo { grid-template-columns: minmax(0, 1fr); max-width: 780px; }
.h-solo .h-prod, .h-solo .h-prod:first-child { padding-inline: 0; border-left: 0; }
.a-hero .lede { margin-top: clamp(22px, 2.4vw, 34px); max-width: 31em; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; }

/* ---------------------------------------------------- the video page ---
   Built like the apps page (Adrian, 2026-10-15: „so ähnlich wie die Apps-Seite"): a quiet head,
   the list beside the page, sections with a statement. Colour: the house blue; Video's own
   cyan only on its electron and the small dots that point back to the atom. */
.a-hero .h-cat-top { margin-bottom: 24px; }
/* how it works: three steps side by side, the numbers in the serif */
.v-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 44px);
  list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; }
.v-steps li { padding-top: 22px; border-top: 1px solid var(--cardLine); }
.v-n { display: block; font: 370 clamp(38px, 3.6vw, 54px)/1 var(--serif); letter-spacing: -.02em; color: var(--accInk); }
.v-steps b { display: block; margin-top: 18px; font: 600 18px/1.3 var(--font); letter-spacing: -.01em; color: var(--ink); }
.v-steps p { margin-top: 8px; max-width: 24em; font-size: 15px; line-height: 1.6; color: var(--ink2); }
/* what you get */
.v-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 44px); margin-top: clamp(40px, 5vw, 64px); }
.v-kind { padding-top: 22px; border-top: 1px solid var(--cardLine); }
.v-kind .h-ic { width: 22px; height: 22px; color: var(--accInk); stroke-width: 1.7; }
.v-kind h3 { margin-top: 14px; font: 370 clamp(26px, 2.4vw, 34px)/1.08 var(--serif); letter-spacing: -.024em; color: var(--ink); }
.v-kind p { margin-top: 10px; font-size: 15.5px; line-height: 1.6; color: var(--ink2); }
/* questions, then the way to ask */
.vid .faq { max-width: 860px; margin-top: clamp(28px, 3vw, 40px); }
.vid .h-main > .h-sec:first-child { padding-top: clamp(36px, 5vw, 76px); }
.v-ask { margin-top: clamp(64px, 8vw, 110px); padding-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--line); }
.a-hero .lede, .h-hero .lede, .h-cat > p { text-wrap: pretty; }   /* no lone last word, no line that starts with a dash */
.a-hero .cta-row { margin-top: clamp(26px, 3vw, 38px); gap: 12px; }
/* the line under the start page's headline: the question in the serif's real italic, the answer
   upright (Adrian, 2026-10-15: „Better, faster and cheaper with the help of AI? It finally is." — „kursiv") */
.h-dek { margin-top: clamp(22px, 2.4vw, 32px); max-width: 24em; font: 400 clamp(21px, 1.9vw, 27px)/1.35 var(--serif);
  letter-spacing: -.012em; color: var(--ink2); text-wrap: balance; }
.h-dek em { font-style: italic; color: var(--ink); }

/* the apps in their panel: each one leads to its own page (above the panel's own link) */
.h-cat-list a { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; color: inherit; }
.h-cat-list li:has(> a) { padding: 0; }
.h-cat-list li > a { padding: 8px 14px; border-radius: 99px; transition: background-color .3s var(--ease); }
.h-cat-list li > a:hover { text-decoration: none; background: rgb(from var(--ink) r g b / .06); }
.h-cat-list li:has(> a) { transition: border-color .3s var(--ease); }
.h-cat-list li:has(> a:hover) { border-color: rgb(from var(--ink) r g b / .35); }

/* ------------------------------------------------------------ responsive --- */
@media (max-width: 900px) {
  .h-cats { grid-template-columns: minmax(0, 1fr); }
  .h-cat, .h-cat:first-child, .h-cat + .h-cat { padding-inline: 0; }
  .h-cat + .h-cat { border-left: 0; border-top: 1px solid var(--line); margin-top: 36px; }
  .a-hero { padding-block: 56px 4px; }
  .v-steps, .v-kinds { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* the serif, pinned (after the font: shorthands above — see the note further up) */
.h-cat h3, .v-n, .v-kind h3, .h-dek { font-optical-sizing: none; font-variation-settings: "opsz" 64; }