/* =============================================================================================
   Home page, draft "Tropfen" (2026-10-20): many worlds, one light.

   One dark room through the whole page (fixed: room tints, dust in three depths, the far one in
   the room's own background, mid and near as layers that follow the scroll), the worlds
   as round drops of light with a living miniature inside, a light being (welcome/js/being.js,
   drawn on its own small canvas in .stage) that leads from world to world, and the map of the
   worlds at the right edge (a bar and a sheet on phones). Tokens, type and buttons come from
   shared/site-theme.css; world colours are --w-<id> there, every world element reads --c.

   Rules of this file:
   - What moves animates transform, opacity and the individual transform properties only. Loops
     run only while their chapter is in view (.is-live) and never under reduced motion.
   - The markup is the end state: no script, reduced motion and a finished picture look the same.
     Earlier steps of a picture come from .drop[data-step="0|1|2"]; hiding exists only under
     html.reveal (inline script in <head>, dropped again unless the guide confirms).
   - Round, never angular: radii everywhere, no boxes around chapters, no frames around content.
   - No mask, filter or overflow on an element with 3D children; clipping uses overflow: clip.
   ============================================================================================= */

/* The file is ordered by chapter, and every selector is scoped to its own component (a tiny page
   inside the web drop, a module of the software drop …): a later rule of lower specificity never
   competes with an earlier one of another component, so the ordering rule does not apply here. */
/* stylelint-disable no-descending-specificity */

/* --- Worlds and tokens of the page ---------------------------------------------------------- */

[data-world="web"] { --c: var(--w-web); }
[data-world="software"] { --c: var(--w-software); }
[data-world="ai"] { --c: var(--w-ai); }
[data-world="trading"] { --c: var(--w-trading); }
[data-world="apps"] { --c: var(--w-apps); }
[data-world="games"] { --c: var(--w-games); }
[data-world="pearl"] { --c: var(--w-pearl); }
[data-world="other"] { --c: #c8cdd6; }

.home {
    /* Content frame of the chapters and the side padding of full-width sections. */
    --frame: 1180px;
    --edge: max(var(--gutter), calc((100% - var(--frame)) / 2));

    /* Room for the light being beside text (wide windows) and above text (phones). */
    --seat: 68px;
    --seat-top: 0px;
    --c: var(--w-pearl);

    overflow-x: clip;
}

.home main {
    position: relative;
    z-index: 1;
}

.home .site-footer {
    position: relative;
    z-index: 1;
}

.anchor-alias {
    position: absolute;
    width: 0;
    height: 0;
}

/* Every chapter clips sideways (clip, not hidden): nothing that floats widens the page. */
.worlds,
.connections,
.team,
.collab,
.voices,
.closing {
    position: relative;
    overflow-x: clip;
}

/* --- The room and the stage of the light being: shared/site-room.css (since 2026-10-23 shared
   with the subpages) ---------------------------------------------------------------------------- */

/* Text and controls stand above the stage (z-index 2): the being passes behind a line, never over it. */
.opening-title,
.opening-text,
.opening-actions,
.world-head,
.world-text,
.world-proof,
.world-handover,
.world-caption,
.connections-head,
.links-label,
.connections-close,
.team-head,
.team-intro,
.team-people,
.team-company,
.collab-head,
.collab-text,
.collab-steps,
.collab-care,
.voices-head,
.voices-intro,
.voices-featured,
.voices-controls,
.voices-proof,
.voices-handover,
.closing-head,
.closing-text,
.closing-actions,
.closing-quiet,
.next-slot,
.again {
    position: relative;
    z-index: 3;
}

/* Hidden until their moment, but their room is kept: showing them never moves the page. */
.next[hidden],
.again[hidden] {
    visibility: hidden;
}

/* --- The told page: what starts hidden until the guide tells it ------------------------------ */

.w {
    display: inline-block;
}

html.reveal [data-beat="title"]:not(.is-in) .w:not(.is-lit) {
    opacity: 0;
    translate: -0.16em 0;
}

html.reveal [data-beat="title"] .w {
    position: relative;
    transition: opacity 0.45s var(--ease-out) var(--wd, 0s), translate 0.6s var(--ease-out) var(--wd, 0s);
}

/* A lit word arrives in the light's colour and settles into the text colour: the same word lies over
   it once more in the light's colour (data-w, empty alt text, so it is never read twice) and only
   fades out, the colour itself never animates. */
html.reveal [data-beat="title"] .w::after {
    content: attr(data-w) / "";
    position: absolute;
    inset: 0;
    color: color-mix(in oklab, var(--c) 70%, white);
    opacity: 0;
    pointer-events: none;
}

html.reveal [data-beat="title"] .w.is-lit::after {
    animation: word-light 1.1s var(--ease-out) var(--wd, 0s) both;
}

@keyframes word-light {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

html.reveal [data-beat="title"]:not(.is-in, .is-reading) :is(.world-kicker, .t-kicker) {
    opacity: 0;
}

html.reveal [data-beat="title"] :is(.world-kicker, .t-kicker) {
    transition: opacity 0.5s var(--ease-out);
}

html.reveal :is([data-beat="text"], [data-beat="proof"], [data-beat="handover"], [data-beat="caption"]):not(.is-in) {
    opacity: 0;
    translate: 0 14px;
}

html.reveal :is([data-beat="text"], [data-beat="proof"], [data-beat="handover"], [data-beat="caption"]) {
    transition: opacity 0.6s var(--ease-out) var(--pd, 0s), translate 0.7s var(--ease-out) var(--pd, 0s);
}

/* Hurried or passed: everything there at once, no slow fades. */
html.reveal .is-hurried :is([data-beat], .w),
html.reveal .is-hurried .w::after {
    transition-duration: 0.35s;
    transition-delay: 0s;
    animation-duration: 0.35s;
    animation-delay: 0s;
}

/* --- Drops: round, weightless drops of light ----------------------------------------------- */

.drop {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    container-type: inline-size;
    transform-origin: 50% 58%;
    transition: transform 1.5s var(--ease-out), opacity 1.5s var(--ease-out);
}

/* Asleep a little back in the depth until the guide brings it forward (.is-near); its first
   picture is clearly there already, a view into the world rather than an empty bubble. */
html.reveal .drop:not(.is-near) {
    opacity: 0.86;
    transform: translateY(2%) scale(0.92);
}

.drop-aura {
    position: absolute;
    inset: -30%;
    border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in oklab, var(--c) 26%, transparent), color-mix(in oklab, var(--c) 8%, transparent) 58%, transparent);
    opacity: 0.35;
    transition: opacity 2.2s var(--ease-in-out);
    pointer-events: none;
}

.drop.is-awake .drop-aura,
html:not(.reveal) .drop-aura {
    opacity: 1;
}

/* Liquid light along the rim: one conic gradient, turning slowly (transform only). */
.drop-skin {
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: conic-gradient(from 200deg, transparent 0%, color-mix(in oklab, var(--c) 85%, white) 7%, transparent 21%, color-mix(in oklab, var(--c) 45%, transparent) 44%, transparent 60%, color-mix(in oklab, var(--c) 70%, white) 79%, transparent 93%);
    opacity: 0.5;
    transition: opacity 2s var(--ease-in-out);
}

.drop.is-awake .drop-skin {
    opacity: 0.85;
}

/* Light in a liquid, not a glass ball: a pool of the world's light at the bottom, a soft glowing
   edge instead of a hard line, slow caustics, and only a breath of gloss. */
.drop-body {
    position: absolute;
    inset: 1px;
    overflow: clip;
    border-radius: 50%;
    background:
        radial-gradient(120% 70% at 50% 110%, color-mix(in oklab, var(--c) 28%, transparent), transparent 62%),
        radial-gradient(circle at 46% 38%, color-mix(in oklab, var(--c) 10%, #0a0d12) 0%, color-mix(in oklab, var(--c) 5%, #06080b) 55%, color-mix(in oklab, var(--c) 13%, #080b10) 82%, color-mix(in oklab, var(--c) 24%, #0c1118) 100%);
    box-shadow:
        inset 0 0 0 1px color-mix(in oklab, var(--c) 28%, transparent),
        inset 0 0 4.5cqw color-mix(in oklab, var(--c) 24%, transparent),
        inset 0 -7cqw 11cqw color-mix(in oklab, var(--c) 12%, transparent),
        0 7cqw 14cqw -7cqw rgba(0, 0, 0, 0.9);
}

.drop-body::before {
    content: "";
    position: absolute;
    inset: 42% -12% -12%;
    background:
        radial-gradient(30% 24% at 30% 58%, color-mix(in oklab, var(--c) 20%, transparent), transparent 72%),
        radial-gradient(24% 18% at 70% 48%, color-mix(in oklab, var(--c) 14%, transparent), transparent 72%),
        radial-gradient(18% 14% at 52% 78%, color-mix(in oklab, var(--c) 12%, transparent), transparent 72%);
    pointer-events: none;
}

.drop-gloss {
    position: absolute;
    top: 6%;
    left: 15%;
    width: 46%;
    height: 26%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.022) 62%, transparent);
    rotate: -24deg;
    pointer-events: none;
}

/* A touch: a wave runs over the skin from where the being touched it. */
.drop-wave {
    position: absolute;
    top: var(--wy, 50%);
    left: var(--wx, 0%);
    width: 40cqw;
    aspect-ratio: 1;
    margin: -20cqw 0 0 -20cqw;
    border-radius: 50%;
    box-shadow: 0 0 0 0.5cqw color-mix(in oklab, var(--c) 55%, transparent), inset 0 0 5cqw 1cqw color-mix(in oklab, var(--c) 24%, transparent);
    opacity: 0;
    transform: scale(0.15);
    pointer-events: none;
}

.drop.is-waving .drop-wave {
    animation: drop-wave 1.6s var(--ease-out);
}

.drop.is-waving :is(.drop-body, .drop-skin) {
    animation: drop-jelly 1.3s var(--ease-out);
}

/* The camera flies through the room: every drop comes out of the depth towards the reader as it
   scrolls in (far, small, leaning back), stands upright once it is fully in view and passes the
   reader above as it leaves. Scroll-driven on the compositor and held at rest (start.js, DepthHold);
   the view timeline follows the untransformed box, so the drop always stands still where the guide
   and the being expect it. The figure lends the perspective (see .world-figure). */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .world-figure .drop {
            animation: drop-flight linear both;
            animation-timeline: view();
        }
    }
}

@keyframes drop-flight {
    entry 0% {
        translate: 0 4% -560px;
        rotate: x 26deg;
    }

    entry 100%,
    exit 0% {
        translate: 0 0 0;
        rotate: x 0deg;
    }

    exit 100% {
        translate: 0 -3% 200px;
        rotate: x -16deg;
    }
}

@keyframes drop-wave {
    0% {
        opacity: 0.9;
        transform: scale(0.15);
    }

    100% {
        opacity: 0;
        transform: scale(5.5);
    }
}

@keyframes drop-jelly {
    0% {
        scale: 1;
    }

    22% {
        scale: 1.022 0.984;
    }

    48% {
        scale: 0.99 1.012;
    }

    74% {
        scale: 1.004 0.998;
    }

    100% {
        scale: 1;
    }
}

/* Inside: the miniature in three depth layers (pattern, main object, floating details). Decorative:
   no layer takes a pointer, only what is meant to be pressed (the figure of the games world). */
.mini,
.mini-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.mini {
    transition: opacity 1.4s var(--ease-out);
}

html.reveal .drop:not(.is-awake) .mini {
    opacity: 0.88;
}

.mini * {
    transition-property: transform, opacity, translate, scale, rotate;
    transition-duration: var(--t, 1.4s);
    transition-timing-function: var(--ease-glide);
}

.drop.is-instant,
.drop.is-instant *,
.drop.is-instant *::before,
.drop.is-instant *::after {
    transition: none !important;
    animation-play-state: paused;
}

.drop.is-rewind .mini * {
    transition-delay: 0s !important;
}

@media (prefers-reduced-motion: no-preference) {
    .is-live .drop.is-awake .drop-skin {
        animation: skin-turn 30s linear infinite;
    }

    .is-live .drop.is-awake .drop-body::before {
        animation: caustic 13s ease-in-out infinite alternate;
    }

    /* Inside the drop the layers lie at different depths: while it flies past, the far pattern and
       the floating details shift against the main object in opposite directions (two layers only:
       every animated layer is blended anew in every frame). */
    @supports (animation-timeline: view()) {
        .mini-back {
            animation: depth-back linear both;
            animation-timeline: view();
        }

        .mini-front {
            animation: depth-front linear both;
            animation-timeline: view();
        }
    }
}

@keyframes skin-turn {
    to {
        rotate: 360deg;
    }
}

@keyframes caustic {
    from {
        transform: translateX(-4%) scale(1);
    }

    to {
        transform: translateX(5%) scale(1.08);
    }
}

@keyframes depth-back {
    from {
        translate: 0 -4cqw;
    }

    to {
        translate: 0 4cqw;
    }
}

@keyframes depth-front {
    from {
        translate: 0 8cqw;
    }

    to {
        translate: 0 -8cqw;
    }
}

/* --- 1 Opening: the constellation ------------------------------------------------------------ */

.opening {
    /* A wider frame than the worlds: the title runs in two lines beside the constellation. */
    --edge: max(var(--gutter), calc((100% - 1320px) / 2));

    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
    gap: clamp(24px, 4vw, 80px);
    align-items: center;

    /* Not a full screen: the first world already rises at the bottom, so it is clear that more comes. */
    min-height: calc(100svh - clamp(80px, 13vh, 150px));
    padding: calc(var(--site-header-h, 76px) + clamp(16px, 4vh, 48px)) var(--edge) clamp(24px, 4vh, 48px);
    scroll-margin-top: 0;
}

.opening-copy {
    max-width: 46rem;
    padding-inline-start: var(--seat);
}

.opening-title {
    margin-bottom: clamp(18px, 2.4vh, 30px);
    font-size: clamp(2.5rem, 1rem + 3.4vw, 5.1rem);
    line-height: 1.02;
}

.opening-text {
    max-width: 36rem;
    margin-bottom: clamp(22px, 3vh, 36px);
}

.opening-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 14px;
}

/* Reserve the repeat label before a visit is remembered, so buttons never reflow above the reader. */
.opening-actions [data-tour] {
    display: inline-grid;
    grid-template-columns: minmax(0, 1fr) auto;
    max-width: 100%;
    text-align: center;
}

.opening-actions [data-tour]::before {
    grid-area: 1 / 1;
    content: attr(data-again);
    visibility: hidden;
}

.opening-actions .tour-text {
    grid-area: 1 / 1;
}

.opening-actions [data-tour] .btn-icon {
    grid-area: 1 / 2;
}

.opening-figure {
    position: relative;
    display: grid;
    place-items: center;
}

/* The constellation is an orbit in the room: the six worlds circle the guiding star on a tilted path,
   the near ones larger and brighter, the far ones small and dim, and every name faces the reader.
   One 3D context: the orbit turns, every star turns back by the same angle (it keeps upright, a
   billboard). The orbit turns very slowly and only while the opening is in view (paused, not
   removed, so it never jumps); it holds still under the pointer, with the focus inside and while the
   being swims its round. Under reduced motion it stands. Sizes in cqi of the constellation. */
.constellation {
    --tilt: 60deg;
    --turn: 160s;

    position: relative;
    width: min(100%, 740px, calc((100svh - var(--site-header-h, 76px) - 110px) * 1.3));
    aspect-ratio: 1.3;
    container-type: inline-size;
    perspective: 1300px;
    perspective-origin: 50% 30%;
}

.orbit {
    position: absolute;
    top: 52%;
    left: 50%;
    width: 84cqi;
    aspect-ratio: 1;
    transform: rotateX(var(--tilt));
    transform-style: preserve-3d;
    translate: -50% -50%;
}

/* The plane of the orbit: a faint disc of light and the path itself, dotted. */
.orbit::before {
    content: "";
    position: absolute;
    inset: 4%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(236, 230, 220, 0.07), rgba(236, 230, 220, 0.02) 62%, transparent);
}

.orbit-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    opacity: 0.45;
    transition: opacity 1.6s var(--ease-out);
}

.orbit-ring circle {
    fill: none;
    stroke: rgba(236, 232, 224, 0.42);
    stroke-width: 1.4px;
    stroke-dasharray: 2 7;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.orbit-ring.is-lit,
.opening.is-told .orbit-ring,
html:not(.reveal) .orbit-ring {
    opacity: 1;
}

.constellation-list {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    transform-style: preserve-3d;
}

.star,
.star-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: rotateX(calc(var(--tilt) * -1));
}

/* Every star floats a little above the plane of its orbit (it hides the path behind it instead of
   being crossed by it). The padding holds its glow: in the room (3D) a layer keeps nothing that
   reaches out of its box to the left or the top. */
.star {
    --s: clamp(46px, 5.6vw, 90px);

    padding: calc(var(--s) * 0.42);
    translate: calc(cos(var(--a) * 1deg) * 42cqi - 50%) calc(sin(var(--a) * 1deg) * 42cqi - 50%) calc(var(--s) * 0.55);
}

/* A star far back on the orbit is drawn smaller (down to about 0.8 by the perspective); its link
   never gets smaller than 44 x 44 px on the screen, the drop centred in it. */
.star-link {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 56px;
    min-height: 56px;
    color: var(--fg);
    text-decoration: none;
    opacity: calc(0.81 + sin(var(--a) * 1deg) * 0.19);
    -webkit-tap-highlight-color: transparent;
}

.star-drop {
    position: relative;
    display: block;
    width: var(--s);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 27% 21%, color-mix(in oklab, var(--c) 40%, white) 0 2.4%, transparent 9%),
        radial-gradient(circle at 50% 56%, color-mix(in oklab, var(--c) 22%, #0b0f15) 0%, color-mix(in oklab, var(--c) 10%, #07090d) 52%, color-mix(in oklab, var(--c) 46%, #0c121a) 92%, color-mix(in oklab, var(--c) 30%, transparent) 100%);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c) 55%, transparent);
    transition: opacity 0.9s var(--ease-out), scale 0.9s var(--ease-out), box-shadow 0.9s var(--ease-out);
}

/* The glow lies in a box of its own, inside the padding of the star: a blurred shadow would be cut
   off at the edges of the star's layer in the room (3D). */
.star-drop::before {
    content: "";
    position: absolute;
    inset: -42%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in oklab, var(--c) 30%, transparent), color-mix(in oklab, var(--c) 8%, transparent) 62%, transparent);
    opacity: 0.6;
    transition: opacity 0.9s var(--ease-out);
}

.star.is-awake .star-drop::before {
    opacity: 1;
}

.star-name {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    max-width: 11em;
    color: color-mix(in oklab, var(--c) 45%, var(--fg));
    font-size: clamp(0.8rem, 0.74rem + 0.22vw, 0.95rem);
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
    translate: -50% 0;
    transition: opacity 0.7s var(--ease-out), translate 0.9s var(--ease-out);
}

html.reveal .star:not(.is-awake) .star-drop {
    opacity: 0.3;
    scale: 0.86;
}

html.reveal .star:not(.is-awake) .star-name {
    opacity: 0;
    translate: -50% -4px;
}

.star.is-awake .star-drop {
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c) 70%, transparent);
}

@media (hover: hover) {
    .star-link:hover .star-drop {
        scale: 1.06;
    }
}

.star-link:focus-visible {
    outline: none;
}

.star-link:focus-visible .star-drop {
    outline: 2px solid var(--c);
    outline-offset: 5px;
}

/* The turn of the orbit, the turn back of every star, and the light of a star by its depth (near
   in front, far behind): one length, so all three stay in step. */
@media (prefers-reduced-motion: no-preference) {
    .orbit {
        animation: orbit-turn var(--turn) linear infinite paused;
    }

    .star,
    .star-core {
        animation: orbit-back var(--turn) linear infinite paused;
    }

    .star-link {
        animation: orbit-light var(--turn) linear calc(var(--a) * var(--turn) / -360) infinite paused;
    }

    .is-live :is(.orbit, .star, .star-core, .star-link) {
        animation-play-state: running;
    }

    .constellation:is(:hover, :focus-within, .is-touring) :is(.orbit, .star, .star-core, .star-link) {
        animation-play-state: paused;
    }
}

@keyframes orbit-turn {
    from {
        transform: rotateX(var(--tilt)) rotateZ(0deg);
    }

    to {
        transform: rotateX(var(--tilt)) rotateZ(360deg);
    }
}

@keyframes orbit-back {
    to {
        rotate: z -360deg;
    }
}

/* The angle of a star on its orbit, 0 to 360 degrees: 90 is nearest the reader, 270 farthest. */
@keyframes orbit-light {
    0%,
    50%,
    100% {
        opacity: 0.84;
    }

    25% {
        opacity: 1;
    }

    75% {
        opacity: 0.62;
    }
}

/* The guiding star in the middle: the light being wakes here (.is-home) and sets off from it; while
   it is elsewhere, and without script, a calm star of four rays keeps the middle. */
.star-core {
    width: clamp(64px, 7vw, 112px);
    aspect-ratio: 1;
    pointer-events: none;
    translate: -50% -50%;
}

.star-core-glow,
.star-core-star {
    position: absolute;
    border-radius: 50%;
}

.star-core-glow {
    inset: 0;
    background: radial-gradient(closest-side, rgba(255, 236, 204, 0.2), rgba(255, 222, 176, 0.06) 62%, transparent);
}

.star-core-star {
    inset: 28%;
    background:
        radial-gradient(closest-side, #fffaf0 0 18%, rgba(255, 238, 210, 0.5) 34%, transparent 64%),
        linear-gradient(90deg, transparent 48.5%, rgba(255, 244, 226, 0.9) 50%, transparent 51.5%),
        linear-gradient(0deg, transparent 48.5%, rgba(255, 244, 226, 0.9) 50%, transparent 51.5%);
    mask-image: radial-gradient(closest-side, #000 26%, transparent);
    opacity: 0.7;
    transition: opacity 0.8s var(--ease-out), scale 0.8s var(--ease-out);
}

.star-core.is-home .star-core-star {
    opacity: 0;
    scale: 0.5;
}

/* A small view into every world (the stars of the opening, the choice of the closing). */
.glimpse {
    position: absolute;
    inset: 17%;
    width: 66%;
    height: 66%;
    overflow: visible;
    fill: none;
    stroke: color-mix(in oklab, var(--c) 78%, white);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.glimpse .g-fill,
.glimpse .g-dot {
    fill: color-mix(in oklab, var(--c) 72%, white);
    stroke: none;
}

.glimpse .g-soft {
    stroke: color-mix(in oklab, var(--c) 55%, transparent);
    stroke-dasharray: 2 3;
}

/* --- 2 to 7 The worlds ----------------------------------------------------------------------- */

/* The chapters sit close: the next title is in view while the last world ends, so no empty space
   leaves the visitor wondering whether anything still comes. */
.world {
    position: relative;
    padding: clamp(28px, 5vh, 64px) var(--edge);
    scroll-margin-top: 0;
}

.world-stage {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: clamp(28px, 4.6vw, 88px);
    align-items: center;
    max-width: calc(var(--frame) + 60px);
    margin-inline: auto;
}

.world[data-side="left"] .world-stage {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
}

.world[data-side="left"] .world-picture {
    order: -1;
}

.world-copy {
    max-width: 40rem;
    padding-inline-start: var(--seat);
}

.world-head {
    margin-bottom: clamp(16px, 2.2vh, 26px);
}

.world-kicker {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    align-items: center;
    margin-bottom: 14px;
    color: var(--fg-3);
    font-family: var(--font-data);
    font-size: 0.76rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.world-kicker-drop {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 34%, #fff 0 10%, var(--c) 46%, color-mix(in oklab, var(--c) 30%, transparent));
    box-shadow: 0 0 12px color-mix(in oklab, var(--c) 60%, transparent);
}

.world-kicker-name {
    color: color-mix(in oklab, var(--c) 78%, white);
}

.world-title {
    font-size: clamp(2rem, 1.2rem + 2.1vw, 3.3rem);
    line-height: 1.05;
}

.world-text {
    margin-bottom: clamp(18px, 2.6vh, 28px);
}

.world-proof {
    display: grid;
    gap: 12px;
    margin-bottom: clamp(18px, 2.6vh, 28px);
}

.proof-label {
    color: var(--fg-3);
    font-family: var(--font-data);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.proof-text {
    max-width: 34rem;
    color: var(--fg-2);
    font-size: 0.96rem;
    line-height: 1.55;
}

.proof-note {
    max-width: 34rem;
    color: var(--fg-3);
    font-size: 0.84rem;
    line-height: 1.5;
}

.marks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 196px), 1fr));
    gap: 10px;
    padding: 0;
    list-style: none;
}

.mark {
    display: grid;
}

.mark--plain,
.mark-link {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    min-height: 48px;
    padding: 6px 18px 6px 6px;
    border: 1px solid color-mix(in oklab, var(--c) 28%, transparent);
    border-radius: 999px;
    background: color-mix(in oklab, var(--c) 5%, rgba(10, 13, 18, 0.7));
    color: var(--fg);
    text-decoration: none;
    transition: border-color 0.3s ease, background-color 0.3s ease, translate 0.4s var(--ease-out);
}

@media (hover: hover) {
    .mark-link:hover {
        border-color: color-mix(in oklab, var(--c) 60%, transparent);
        background: color-mix(in oklab, var(--c) 12%, rgba(10, 13, 18, 0.7));
        translate: 0 -2px;
    }
}

.mark-drop {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 36% 30%, color-mix(in oklab, var(--c) 30%, white) 0 7%, transparent 22%),
        radial-gradient(circle at 50% 56%, color-mix(in oklab, var(--c) 28%, #0b0f15) 0%, color-mix(in oklab, var(--c) 12%, #07090d) 56%, color-mix(in oklab, var(--c) 52%, #0c121a) 100%);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c) 55%, transparent);
}

.mark--dev .mark-drop {
    background: radial-gradient(circle at 50% 56%, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01) 70%);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c) 40%, transparent);
}

.mark-body {
    display: grid;
    line-height: 1.25;
}

.mark-name {
    font-size: 0.94rem;
    font-weight: 600;
}

.mark-status {
    color: color-mix(in oklab, var(--c) 70%, white);
    font-family: var(--font-data);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}

.mark--dev .mark-status {
    color: var(--fg-3);
}

.mark-bridge {
    color: var(--w-ai);
    font-family: var(--font-data);
    font-size: 0.7rem;
}

.world-handover {
    max-width: 34rem;
    color: var(--fg);
    font-family: var(--font-voice);

    /* The reading cut looks a little larger than the display cut at the same size. */
    font-size: calc(var(--step-1) * 0.94);
    font-style: italic;
    font-weight: 420;
    letter-spacing: 0.01em;
    line-height: 1.4;
    text-wrap: pretty;
}

/* The quiet "Weiter" button: its slot is always there, so it never moves the page. */
.next-slot {
    display: flex;
    align-items: center;
    min-height: 60px;
    margin-top: 14px;
}

.next {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid color-mix(in oklab, var(--c) 34%, transparent);
    border-radius: 999px;
    background: color-mix(in oklab, var(--c) 7%, rgba(7, 9, 13, 0.72));
    color: var(--fg-2);
    font-size: 0.92rem;
    font-weight: 500;
    cursor: pointer;
    opacity: 0;
    translate: 0 8px;
    transition: opacity 1s var(--ease-out), translate 1.1s var(--ease-out), color 0.25s ease, border-color 0.25s ease;
}

.next.is-shown {
    opacity: 1;
    translate: none;
}

.next-icon {
    width: 18px;
    height: 18px;
}

@media (hover: hover) {
    .next:hover {
        border-color: color-mix(in oklab, var(--c) 70%, transparent);
        color: var(--fg);
    }
}

/* Picture, caption, the steps as text and "Noch einmal". */
.world-picture {
    display: grid;
    gap: 10px;
    justify-items: center;
}

.world-figure {
    display: grid;
    gap: 18px;
    justify-items: center;
    width: min(100%, 580px, calc(100svh - var(--site-header-h, 76px) - 170px));
    perspective: 1400px;
    perspective-origin: 50% 36%;
}

.world-caption {
    max-width: 30rem;
    color: var(--fg-3);
    font-size: 0.92rem;
    line-height: 1.5;
    text-align: center;
    text-wrap: balance;
}

.js .steps {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

.no-js .steps-list {
    display: grid;
    gap: 4px;
    margin-top: 10px;
    padding-left: 1.2em;
    font-size: 0.86rem;
    text-align: left;
}

.again,
.jump {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid rgba(226, 232, 244, 0.14);
    border-radius: 999px;
    background: rgba(7, 9, 13, 0.6);
    color: var(--fg-3);
    font-size: 0.86rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.25s ease, border-color 0.25s ease, opacity 0.8s var(--ease-out);
}

.again-icon,
.jump-icon {
    width: 18px;
    height: 18px;
}

@media (hover: hover) {
    .again:hover,
    .jump:hover {
        border-color: color-mix(in oklab, var(--c) 60%, transparent);
        color: var(--fg);
    }
}

.again.is-fresh {
    animation: again-in 1s var(--ease-out) both;
}

@keyframes again-in {
    from {
        opacity: 0;
    }
}

.jump {
    justify-self: start;
    min-width: 128px;
    min-height: 52px;
    border-color: color-mix(in oklab, var(--c) 40%, transparent);
    color: var(--fg);
    font-size: 0.95rem;
    font-weight: 600;
}

.jump:active {
    scale: 0.96;
}

/* =============================================================================================
   Miniatures (welcome/miniatures.php). Units: cqw of the drop. Base rules are the end state;
   .drop[data-step] rules give the earlier steps (0 = ready, 1, 2). --t is the length of the step
   being played (set by the guide); delays are shares of it, so a hurried step stays in tune.
   ============================================================================================= */

.mini-main > *,
.mini-front > *,
.mini-back > *,
.ai-scan,
.tr-candle,
.tr-count,
.tr-tag,
.tr-osc-svg,
.tr-seg,
.tr-turn {
    position: absolute;
}

.mini svg {
    overflow: visible;
}

/* --- Websites -------------------------------------------------------------------------------- */

.web-sky {
    inset: 0;
    background:
        radial-gradient(70cqw 42cqw at 50% 108%, color-mix(in oklab, var(--c) 28%, transparent), transparent 72%),
        radial-gradient(40cqw 30cqw at 22% 12%, color-mix(in oklab, var(--c) 10%, transparent), transparent 70%);
}

.web-grid {
    inset: -12cqw;
    background-image: radial-gradient(circle, color-mix(in oklab, var(--c) 46%, transparent) 0 0.22cqw, transparent 0.38cqw);
    background-size: 6cqw 6cqw;
    opacity: 0.32;
}

.web-browser,
.web-device {
    border-radius: 2.2cqw;
    background: #0c1118;
    box-shadow: inset 0 0 0 0.3cqw rgba(226, 236, 255, 0.12), 0 2.6cqw 5cqw -2cqw rgba(0, 0, 0, 0.75);
}

.web-browser {
    top: 25cqw;
    left: 18cqw;
    width: 64cqw;
    height: 42cqw;
    overflow: clip;
    opacity: 0;
    transform: translate(-6cqw, 3cqw) scale(0.58);
}

.web-bar {
    display: flex;
    gap: 0.8cqw;
    align-items: center;
    height: 5cqw;
    padding: 0 2cqw;
    background: rgba(255, 255, 255, 0.04);
}

.web-bar > i {
    width: 1.1cqw;
    height: 1.1cqw;
    border-radius: 50%;
    background: rgba(226, 236, 255, 0.22);
}

.web-url {
    margin-left: 2cqw;
    padding: 0.3cqw 2cqw;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(226, 236, 255, 0.6);
    font-family: var(--font-data);
    font-size: 1.7cqw;
    line-height: 1.3;
}

.web-browser .web-screen {
    position: absolute;
    inset: 5cqw 0 0;
}

.web-device .web-screen {
    position: absolute;
    inset: 0.8cqw;
    overflow: clip;
    border-radius: 1.2cqw;
}

.web-desk {
    --fx: 8cqw;
    --fy: 1cqw;

    top: 27cqw;
    left: 13cqw;
    width: 40cqw;
    height: 26cqw;
}

.web-stand {
    position: absolute;
    bottom: -4.4cqw;
    left: 50%;
    width: 11cqw;
    height: 4.6cqw;
    border-radius: 0 0 1.6cqw 1.6cqw;
    background: linear-gradient(rgba(226, 236, 255, 0.08), rgba(226, 236, 255, 0.02));
    translate: -50% 0;
}

.web-tab {
    --fx: -20cqw;
    --fy: -2cqw;

    top: 31cqw;
    left: 56cqw;
    width: 17cqw;
    height: 24cqw;
}

.web-phone {
    --fx: -33cqw;
    --fy: -4cqw;

    top: 34cqw;
    left: 75.5cqw;
    width: 10.5cqw;
    height: 21cqw;
    border-radius: 2cqw;
}

.web-sent {
    top: 59cqw;
    left: 58cqw;
    display: flex;
    gap: 0.8cqw;
    align-items: center;
    padding: 0.7cqw 1.8cqw 0.7cqw 1.2cqw;
    border-radius: 99px;
    background: color-mix(in oklab, var(--c) 16%, rgba(8, 12, 18, 0.9));
    box-shadow: inset 0 0 0 0.25cqw color-mix(in oklab, var(--c) 45%, transparent);
    color: var(--fg);
    font-size: 1.9cqw;
    white-space: nowrap;
}

.web-sent svg {
    width: 2.6cqw;
    height: 2.6cqw;
    fill: none;
    stroke: var(--c);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.web-letter {
    top: 43cqw;
    left: 78cqw;
    width: 5.2cqw;
    height: 3.6cqw;
    border-radius: 0.8cqw;
    background: color-mix(in oklab, var(--c) 40%, white);
    box-shadow: 0 0 3cqw 1cqw color-mix(in oklab, var(--c) 50%, transparent);
    opacity: 0;
}

.web-letter i {
    position: absolute;
    inset: 0.5cqw 0.6cqw auto;
    height: 1.6cqw;
    border-right: 0.3cqw solid rgba(12, 20, 32, 0.4);
    border-bottom: 0.3cqw solid rgba(12, 20, 32, 0.4);
    rotate: 45deg;
    scale: 0.55 0.9;
    translate: 0 -0.8cqw;
}

.web-chip {
    top: calc(var(--y) * 1cqw);
    left: calc(var(--x) * 1cqw);
    width: 5cqw;
    height: 1.6cqw;
    border-radius: 99px;
    background: color-mix(in oklab, var(--c) 22%, transparent);
}

/* The tiny page inside every screen (positions in % of its screen). */
.tp {
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 50% at 75% 40%, rgba(236, 230, 220, 0.06), transparent), #080b10;
}

.tp i,
.tp b,
.tp span {
    position: absolute;
    display: block;
}

.tp-title,
.tp-text {
    inset: 0;
}

.tp-title i {
    left: 8%;
    height: 7%;
    border-radius: 99px;
    background: rgba(236, 240, 248, 0.85);
}

.tp-title i:first-child {
    top: 14%;
    width: 42%;
}

.tp-title i:last-child {
    top: 25%;
    width: 30%;
}

.tp-text i {
    left: 8%;
    height: 3%;
    border-radius: 99px;
    background: rgba(169, 179, 193, 0.5);
}

.tp-text i:nth-child(1) {
    top: 40%;
    width: 40%;
}

.tp-text i:nth-child(2) {
    top: 46%;
    width: 36%;
}

.tp-text i:nth-child(3) {
    top: 52%;
    width: 28%;
}

.tp-btn {
    top: 62%;
    left: 8%;
    width: 17%;
    height: 8%;
    border-radius: 99px;
    background: var(--cyan);
}

.tp-stars {
    top: 18%;
    left: 56%;
    width: 34%;
    aspect-ratio: 1;
}

.tp-stars > b {
    top: 50%;
    left: 50%;
    width: 14%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, #fffaf2, rgba(236, 230, 220, 0.3));
    translate: -50% -50%;
}

.tp-stars > i {
    top: 50%;
    left: 50%;
    width: 11%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--c);
    box-shadow: 0 0 0.8cqw var(--c);
    transform: translate(-50%, -50%) rotate(calc(var(--k) * 60deg - 160deg)) translateX(390%);
}

.tp-orbit {
    inset: 0;
}

.tp-being {
    top: 50%;
    left: 50%;
    width: 9%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0 22%, rgba(236, 230, 220, 0.6) 45%, transparent 72%);
    transform: translate(-50%, -50%) translateX(240%);
}

.tp--tab .tp-title i:first-child {
    width: 50%;
}

.tp--tab .tp-stars {
    top: 22%;
    left: 58%;
    width: 36%;
}

/* The phone: everything stacked, and the little form that sends the enquiry. */
.tp--phone .tp-title i {
    left: 10%;
    height: 4.5%;
}

.tp--phone .tp-title i:first-child {
    top: 8%;
    width: 72%;
}

.tp--phone .tp-title i:last-child {
    top: 15%;
    width: 52%;
}

.tp--phone .tp-text,
.tp--phone .tp-btn {
    display: none;
}

.tp--phone .tp-stars {
    top: 23%;
    left: 20%;
    width: 60%;
}

.tp-form {
    inset: auto 10% 6% !important;
    height: 30%;
}

.tp-form i {
    left: 0;
    width: 100%;
    height: 18%;
    border-radius: 0.6cqw;
    background: rgba(226, 236, 255, 0.12);
}

.tp-form i:first-child {
    top: 0;
}

.tp-form i:nth-child(2) {
    top: 26%;
}

.tp-form .tp-send {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 26%;
    border-radius: 99px;
    background: var(--c);
}

/* Steps: 0 ready (the browser waits in the middle), 1 the page lives, 2 three devices, 3 the enquiry. */
.drop:is([data-step="0"], [data-step="1"]) .web-browser {
    opacity: 1;
    transform: none;
}

.drop[data-step="0"] .web-browser {
    opacity: 0.75;
    transform: scale(0.94);
}

.drop:is([data-step="0"], [data-step="1"]) .web-device {
    opacity: 0;
    transform: translate(var(--fx), var(--fy)) scale(0.4);
}

.drop:is([data-step="0"], [data-step="1"], [data-step="2"]) .web-sent {
    opacity: 0;
    transform: translateY(1.5cqw) scale(0.8);
}

.drop[data-step="2"] .web-device {
    transition-delay: calc(var(--t) * 0.12);
}

.drop[data-step="2"] .web-tab {
    transition-delay: calc(var(--t) * 0.22);
}

.drop[data-step="2"] .web-phone {
    transition-delay: calc(var(--t) * 0.32);
}

.drop[data-step="3"] .tp-send {
    animation: tp-press 0.5s var(--ease-out) calc(var(--t) * 0.1);
}

.drop[data-step="3"] .web-letter {
    animation: web-letter calc(var(--t) * 0.8) var(--ease-in-out) calc(var(--t) * 0.22) both;
}

.drop[data-step="3"] .web-sent {
    transition-delay: calc(var(--t) * 0.5);
}

@keyframes tp-press {
    50% {
        scale: 0.86;
    }
}

@keyframes web-letter {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.5);
    }

    14% {
        opacity: 1;
        transform: translate(0, -2cqw) scale(1);
    }

    55% {
        opacity: 1;
        transform: translate(-10cqw, 14cqw) scale(0.9) rotate(-12deg);
    }

    100% {
        opacity: 0;
        transform: translate(-26cqw, 52cqw) scale(0.6) rotate(-24deg);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .is-live .drop.is-awake .web-grid {
        animation: grid-flow 26s linear infinite;
    }

    .is-live .drop.is-awake:not([data-step="0"]) .tp-orbit {
        animation: skin-turn 7s linear infinite;
    }

    .is-live .drop.is-awake .web-chip {
        animation: float-y calc(6s + var(--k) * 1.4s) ease-in-out calc(var(--k) * -1.7s) infinite alternate;
    }
}

@keyframes grid-flow {
    to {
        transform: translate(-6cqw, -6cqw);
    }
}

@keyframes float-y {
    from {
        transform: translateY(-1.2cqw);
    }

    to {
        transform: translateY(1.2cqw);
    }
}

/* --- Business software ------------------------------------------------------------------------ */

/* A standard block does not fit the shape of a business: it sticks out (hatched, "does not fit")
   and leaves gaps (dashed, "missing"). It breaks apart, light traces the shape, and four modules
   fill it exactly: the shape cuts them, their seams end on its edge (SVG clip paths, no guessing). */
.mini--software {
    --misfit: #ff7a66;
}

.sw-grid {
    inset: -10cqw;
    background-image:
        linear-gradient(color-mix(in oklab, var(--c) 13%, transparent) 0.15cqw, transparent 0.15cqw),
        linear-gradient(90deg, color-mix(in oklab, var(--c) 13%, transparent) 0.15cqw, transparent 0.15cqw);
    background-size: 7cqw 7cqw;
    opacity: 0.4;
}

.sw-svg,
.sw-over,
.sw-gap,
.sw-module,
.sw-seams,
.sw-seg {
    inset: 0;
    width: 100%;
    height: 100%;
}

.sw-shape {
    fill: color-mix(in oklab, var(--c) 9%, transparent);
    stroke: color-mix(in oklab, var(--c) 34%, transparent);
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
}

.sw-svg pattern path {
    stroke: color-mix(in oklab, var(--misfit) 70%, transparent);
    stroke-width: 0.55;
}

.sw-over-fill {
    fill: color-mix(in oklab, var(--misfit) 18%, transparent);
}

.sw-over-edge {
    fill: none;
    stroke: var(--misfit);
    stroke-width: 2px;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.sw-gap-fill {
    fill: color-mix(in oklab, var(--c) 15%, transparent);
}

.sw-gap-edge {
    fill: none;
    stroke: color-mix(in oklab, var(--c) 85%, white);
    stroke-width: 1.6px;
    stroke-dasharray: 5 4;
    vector-effect: non-scaling-stroke;
}

.sw-over,
.sw-gap {
    opacity: 0;
}

.sw-module path {
    fill: color-mix(in oklab, var(--c) calc(16% + var(--k) * 3%), transparent);
}

.sw-module {
    transform-origin: 50% 50%;
    transition-delay: calc(var(--k) * var(--t) * 0.12);
}

.sw-seams path {
    fill: none;
    stroke: #070a0e;
    stroke-width: 2.4px;
    vector-effect: non-scaling-stroke;
}

.sw-seams {
    transition-delay: calc(var(--t) * 0.5);
}

.sw-seg path {
    fill: none;
    stroke: color-mix(in oklab, var(--c) 85%, white);
    stroke-width: 2.2px;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.sw-seg {
    transition-delay: calc(var(--k) * var(--t) * 0.075);
}

.sw-block,
.sw-tile {
    top: calc(var(--y) * 1cqw);
    left: calc(var(--x) * 1cqw);
    width: calc(var(--w) * 1cqw);
    height: calc(var(--h) * 1cqw);
    background: rgba(146, 164, 186, 0.15);
}

.sw-block {
    border-radius: 2.6cqw;
    box-shadow: inset 0 0 0 0.3cqw rgba(186, 202, 220, 0.34), 0 2cqw 5cqw -2cqw rgba(0, 0, 0, 0.6);
    opacity: 0;
    transform: translateY(-30cqw) rotate(-5deg);
}

.sw-block-grid {
    position: absolute;
    inset: 4cqw;
    background-image: linear-gradient(rgba(186, 202, 220, 0.16) 0.3cqw, transparent 0.3cqw);
    background-size: 100% 6cqw;
}

.sw-block-name {
    position: absolute;
    bottom: 2.6cqw;
    left: 3.2cqw;
    color: rgba(206, 216, 228, 0.72);
    font-family: var(--font-data);
    font-size: 2.2cqw;
}

/* The same block in twelve tiles: they take its place when it breaks (step 2). */
.sw-tile {
    border-radius: var(--rad, 0);
    box-shadow: inset 0 0 0 0.2cqw rgba(186, 202, 220, 0.3);
    opacity: 0;
}

.sw-mark {
    top: calc(var(--y) * 1cqw);
    left: calc(var(--x) * 1cqw);
    display: flex;
    gap: 0.8cqw;
    align-items: center;
    padding: 0.6cqw 1.5cqw 0.6cqw 1.1cqw;
    border-radius: 99px;
    background: rgba(7, 10, 14, 0.86);
    font-family: var(--font-data);
    font-size: 2.1cqw;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    translate: -50% -50%;
    scale: 0.8;
}

.sw-mark i {
    width: 1.3cqw;
    height: 1.3cqw;
    border-radius: 50%;
    background: currentcolor;
}

.sw-mark--over {
    color: var(--misfit);
    box-shadow: inset 0 0 0 0.25cqw color-mix(in oklab, var(--misfit) 70%, transparent);
}

.sw-mark--gap {
    color: color-mix(in oklab, var(--c) 85%, white);
    outline: 0.25cqw dashed color-mix(in oklab, var(--c) 75%, transparent);
    outline-offset: -0.25cqw;
}

.sw-label {
    top: calc(var(--y) * 1cqw);
    left: calc(var(--x) * 1cqw);
    display: grid;
    gap: 0.4cqw;
    justify-items: center;
    color: var(--fg);
    font-size: 2.1cqw;
    line-height: 1.15;
    text-align: center;
    translate: -50% -50%;
    transition-delay: calc(var(--k) * var(--t) * 0.12 + var(--t) * 0.3);
}

.sw-label svg {
    width: 4.2cqw;
    height: 4.2cqw;
    fill: none;
    stroke: var(--c);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sw-num {
    color: color-mix(in oklab, var(--c) 70%, white);
    font-family: var(--font-data);
    font-size: 2.7cqw;
    font-weight: 600;
}

.sw-live {
    top: 14cqw;
    left: 50cqw;
    display: flex;
    gap: 0.8cqw;
    align-items: center;
    color: var(--c);
    font-family: var(--font-data);
    font-size: 1.8cqw;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    translate: -50% 0;
}

.sw-live i {
    width: 1.3cqw;
    height: 1.3cqw;
    border-radius: 50%;
    background: var(--c);
    box-shadow: 0 0 1.6cqw var(--c);
}

.sw-tick {
    top: calc(var(--y) * 1cqw);
    left: calc(var(--x) * 1cqw);
    color: color-mix(in oklab, var(--c) 80%, white);
    font-family: var(--font-data);
    font-size: 2cqw;
    opacity: 0;
}

/* Steps: 0 the shape alone; 1 the standard block lands, sticks out and leaves gaps (both marked);
   2 it breaks into its tiles while light traces the shape; 3 the modules settle into the shape. */
.drop:is([data-step="0"], [data-step="1"], [data-step="2"]) .sw-module {
    opacity: 0;
    transform: scale(1.07);
}

.drop:is([data-step="0"], [data-step="1"], [data-step="2"]) .sw-seams {
    opacity: 0;
}

.drop:is([data-step="0"], [data-step="1"], [data-step="2"]) :is(.sw-label, .sw-live) {
    opacity: 0;
    scale: 0.82;
}

.drop:is([data-step="0"], [data-step="1"]) .sw-seg {
    opacity: 0;
}

.drop[data-step="1"] .sw-block {
    opacity: 1;
    transform: none;
    transition-duration: calc(var(--t) * 0.5);
    transition-timing-function: var(--ease-out);
}

.drop[data-step="1"] :is(.sw-over, .sw-gap) {
    opacity: 1;
    transition-duration: calc(var(--t) * 0.3);
    transition-delay: calc(var(--t) * 0.42);
}

.drop[data-step="1"] .sw-mark {
    opacity: 1;
    scale: 1;
    transition-duration: calc(var(--t) * 0.3);
    transition-delay: calc(var(--t) * 0.55 + var(--k) * 90ms);
}

/* The block is gone at once where it lies; its tiles fly apart instead. */
.drop[data-step="2"] .sw-block {
    opacity: 0;
    transform: none;
    transition: none;
}

.drop[data-step="2"] :is(.sw-over, .sw-gap, .sw-mark) {
    transition-duration: 0.3s;
    transition-delay: 0s;
}

.drop[data-step="2"] .sw-tile {
    animation: sw-tile calc(var(--t) * 0.9) cubic-bezier(0.45, 0, 0.6, 1) calc(var(--k) * 22ms) both;
}

/* First the block cracks (its tiles part a little), then the pieces fall away. */
@keyframes sw-tile {
    0% {
        opacity: 1;
        transform: none;
    }

    22% {
        opacity: 1;
        transform: translate(calc(var(--dx) * 0.07cqw), calc(var(--dy) * 0.07cqw)) rotate(calc(var(--r) * 0.06deg));
    }

    60% {
        opacity: 0.85;
    }

    100% {
        opacity: 0;
        transform: translate(calc(var(--dx) * 1cqw), calc(var(--dy) * 1cqw + 8cqw)) rotate(calc(var(--r) * 1deg)) scale(0.6);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .is-live .drop.is-awake:not([data-step]) .sw-live i,
    .is-live .drop.is-awake[data-step="done"] .sw-live i {
        animation: pulse-dot 2.4s ease-in-out infinite;
    }

    .is-live .drop.is-awake:is(:not([data-step]), [data-step="done"]) .sw-tick {
        animation: rise-fade calc(5s + var(--k) * 1.3s) ease-out calc(var(--k) * 1.7s + 1s) infinite;
    }

    .is-live .drop.is-awake .sw-grid {
        animation: grid-flow 30s linear infinite;
    }
}

@keyframes pulse-dot {
    50% {
        opacity: 0.35;
        scale: 0.7;
    }
}

@keyframes rise-fade {
    0% {
        opacity: 0;
        transform: translateY(1cqw);
    }

    18% {
        opacity: 0.9;
    }

    60%,
    100% {
        opacity: 0;
        transform: translateY(-5cqw);
    }
}

/* --- AI and automation ------------------------------------------------------------------------ */

.ai-mist {
    width: 70cqw;
    height: 50cqw;
    border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in oklab, var(--c) 22%, transparent), transparent);
}

.ai-mist--a {
    top: 6cqw;
    left: -12cqw;
}

.ai-mist--b {
    right: -14cqw;
    bottom: 2cqw;
}

.ai-net {
    inset: 0;
    background-image: radial-gradient(circle, color-mix(in oklab, var(--c) 50%, transparent) 0 0.2cqw, transparent 0.35cqw);
    background-size: 5cqw 5cqw;
    opacity: 0.22;
}

.ai-doc {
    top: 21cqw;
    left: 14cqw;
    width: 28cqw;
    height: 37cqw;
    border-radius: 1.6cqw;
    background: linear-gradient(170deg, #e4e7ef, #c9cfdb);
    box-shadow: 0 2.4cqw 5cqw -2cqw rgba(0, 0, 0, 0.7);
    opacity: 0;
    scale: 0.92;
}

.ai-doc::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 5cqw;
    height: 5cqw;
    border-radius: 0 1.6cqw 0 1cqw;
    background: linear-gradient(225deg, #9aa2b4 50%, #b7becc 50%);
}

.ai-doc-tag {
    position: absolute;
    top: 7cqw;
    right: 2cqw;
    padding: 0.3cqw 0.9cqw;
    border-radius: 0.6cqw;
    background: var(--c);
    color: #110c22;
    font-family: var(--font-data);
    font-size: 1.7cqw;
    font-weight: 600;
}

.ai-doc-name {
    position: absolute;
    top: 2.6cqw;
    left: 2.4cqw;
    color: #4a5266;
    font-family: var(--font-data);
    font-size: 1.6cqw;
}

.ai-doc-lines i {
    position: absolute;
    top: calc(13cqw + var(--k) * 3.6cqw);
    left: 2.4cqw;
    width: calc(var(--w) * 1cqw);
    height: 1.1cqw;
    border-radius: 0.6cqw;
    background: #a1a9bb;
}

.ai-card {
    top: 24cqw;
    left: 47cqw;
    width: 38cqw;
    height: 30cqw;
    border-radius: 2.2cqw;
    background: rgba(20, 17, 34, 0.88);
    box-shadow: inset 0 0 0 0.3cqw color-mix(in oklab, var(--c) 40%, transparent), 0 2.4cqw 5cqw -2cqw rgba(0, 0, 0, 0.7);
}

.ai-row {
    position: absolute;
    top: calc(3.6cqw + var(--k) * 8cqw);
    right: 3cqw;
    left: 3cqw;
    display: flex;
    gap: 1.4cqw;
    align-items: center;
    height: 6cqw;
    padding: 0 1.6cqw;
    border-radius: 1.2cqw;
    background: rgba(255, 255, 255, 0.045);
    font-size: 2cqw;
}

.ai-key {
    width: 9cqw;
    color: color-mix(in oklab, var(--c) 70%, white);
    font-family: var(--font-data);
    font-size: 1.6cqw;
}

.ai-val {
    color: var(--fg);
    white-space: nowrap;
}

.ai-stamp {
    position: absolute;
    right: -2cqw;
    bottom: -3cqw;
    display: flex;
    gap: 0.6cqw;
    align-items: center;
    padding: 0.6cqw 1.6cqw 0.6cqw 1cqw;
    border-radius: 99px;
    background: rgba(40, 26, 8, 0.92);
    box-shadow: inset 0 0 0 0.3cqw var(--w-care), 0 0 3cqw rgba(255, 181, 74, 0.3);
    color: var(--w-care);
    font-size: 1.9cqw;
    font-weight: 600;
    rotate: -6deg;
}

.ai-stamp svg {
    width: 2.6cqw;
    height: 2.6cqw;
    fill: none;
    stroke: currentcolor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ai-p {
    top: 0;
    left: 0;
    width: 1.1cqw;
    height: 1.1cqw;
    border-radius: 50%;
    background: color-mix(in oklab, var(--c) 55%, white);
    box-shadow: 0 0 1.4cqw var(--c);
    opacity: 0;
    transform: translate(calc(var(--x1) * 1cqw), calc(var(--y1) * 1cqw));
}

.ai-chart {
    top: 61cqw;
    left: 17cqw;
    width: 42cqw;
    height: 20cqw;
    overflow: clip;
    border-radius: 1.8cqw;
    background: rgba(13, 12, 24, 0.86);
    box-shadow: inset 0 0 0 0.25cqw rgba(255, 255, 255, 0.08);
}

.ai-chart-svg {
    position: absolute;
    inset: 1.4cqw 2cqw;
    width: calc(100% - 4cqw);
    height: calc(100% - 2.8cqw);
}

.ai-chart-grid {
    stroke: rgba(255, 255, 255, 0.06);
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
}

.ai-candle {
    fill: rgba(169, 179, 193, 0.2);
    stroke: rgba(169, 179, 193, 0.55);
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
}

.ai-candle.is-up {
    fill: color-mix(in oklab, var(--c) 35%, transparent);
    stroke: var(--c);
}

.ai-chart-line {
    fill: none;
    stroke: color-mix(in oklab, var(--c) 70%, white);
    stroke-width: 1.6px;
    vector-effect: non-scaling-stroke;
}

.ai-scan {
    top: 0;
    bottom: 0;
    left: 0;
    width: 1.4cqw;
    background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--c) 70%, white), transparent);
    opacity: 0;
}

.ai-verdict {
    top: 63cqw;
    left: 61cqw;
    display: grid;
    gap: 0.4cqw;
    padding: 1.4cqw 2cqw;
    border-radius: 2cqw;
    background: rgba(20, 17, 34, 0.92);
    box-shadow: inset 0 0 0 0.25cqw color-mix(in oklab, var(--c) 45%, transparent);
}

.ai-verdict-name {
    color: color-mix(in oklab, var(--c) 72%, white);
    font-family: var(--font-data);
    font-size: 1.5cqw;
}

.ai-verdict-text {
    color: var(--fg);
    font-size: 1.9cqw;
    white-space: nowrap;
}

.ai-verdict-bars {
    display: flex;
    gap: 0.6cqw;
    align-items: end;
    height: 3cqw;
}

.ai-verdict-bars i {
    width: 1.4cqw;
    border-radius: 0.4cqw;
    background: var(--c);
    transform-origin: 50% 100%;
}

.ai-verdict-bars i:nth-child(1) {
    height: 40%;
}

.ai-verdict-bars i:nth-child(2) {
    height: 70%;
}

.ai-verdict-bars i:nth-child(3) {
    height: 100%;
}

.ai-human {
    top: 38cqw;
    left: 83cqw;
}

.ai-human-orb {
    display: block;
    width: 6cqw;
    height: 6cqw;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #fff4de 0 14%, var(--w-care) 44%, rgba(255, 181, 74, 0) 72%);
    box-shadow: 0 0 4cqw rgba(255, 181, 74, 0.5);
    translate: -50% -50%;
}

.ai-spark {
    top: calc(var(--y) * 1cqw);
    left: calc(var(--x) * 1cqw);
    width: 0.9cqw;
    height: 0.9cqw;
    border-radius: 50%;
    background: color-mix(in oklab, var(--c) 60%, white);
    box-shadow: 0 0 1.4cqw var(--c);
    opacity: 0.6;
}

/* Steps: 0 an order waits as a PDF, 1 it becomes fields, 2 a chart is read, 3 a person approves. */
.drop[data-step="0"] .ai-doc {
    opacity: 1;
    scale: 1;
}

.drop[data-step="1"] .ai-doc {
    transition-duration: calc(var(--t) * 0.45);
}

.drop[data-step="0"] .ai-row {
    opacity: 0;
    translate: 2cqw 0;
}

.drop[data-step="1"] .ai-row {
    transition-duration: calc(var(--t) * 0.35);
    transition-delay: calc(var(--t) * 0.62 + var(--k) * 140ms);
}

.drop[data-step="1"] .ai-p {
    animation: ai-flow var(--t) var(--ease-in-out) calc(var(--k) * 24ms) both;
}

@keyframes ai-flow {
    0% {
        opacity: 0;
        transform: translate(calc(var(--x0) * 1cqw), calc(var(--y0) * 1cqw)) scale(0.4);
    }

    18% {
        opacity: 1;
        transform: translate(calc(var(--x0) * 1cqw), calc(var(--y0) * 1cqw - 1.4cqw)) scale(1);
    }

    74% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate(calc(var(--x1) * 1cqw), calc(var(--y1) * 1cqw)) scale(0.5);
    }
}

.drop:is([data-step="0"], [data-step="1"]) :is(.ai-chart, .ai-verdict) {
    opacity: 0;
    translate: 0 3cqw;
}

.drop[data-step="2"] .ai-verdict {
    transition-delay: calc(var(--t) * 0.72);
}

.drop[data-step="2"] .ai-scan {
    animation: ai-scan calc(var(--t) * 0.68) var(--ease-in-out) calc(var(--t) * 0.12) both;
}

@keyframes ai-scan {
    0% {
        opacity: 0;
        transform: translateX(0);
    }

    12%,
    88% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateX(40cqw);
    }
}

.drop:is([data-step="0"], [data-step="1"], [data-step="2"]) .ai-human {
    opacity: 0;
    translate: 12cqw 2cqw;
}

.drop:is([data-step="0"], [data-step="1"], [data-step="2"]) .ai-stamp {
    opacity: 0;
    scale: 1.5;
}

.drop[data-step="3"] .ai-stamp {
    transition-delay: calc(var(--t) * 0.55);
    transition-timing-function: var(--ease-spring);
}

@media (prefers-reduced-motion: no-preference) {
    .is-live .drop.is-awake .ai-mist--a {
        animation: float-y 9s ease-in-out infinite alternate;
    }

    .is-live .drop.is-awake .ai-mist--b {
        animation: float-y 11s ease-in-out -4s infinite alternate-reverse;
    }

    .is-live .drop.is-awake .ai-spark {
        animation: float-y calc(5s + var(--k) * 0.9s) ease-in-out calc(var(--k) * -1.3s) infinite alternate;
    }

    .is-live .drop.is-awake:is(:not([data-step]), [data-step="done"]) .ai-human-orb {
        animation: pulse-dot 3.2s ease-in-out infinite;
    }
}

/* --- Trading ---------------------------------------------------------------------------------- */

.tr-grid {
    inset: 0;
    background-image: linear-gradient(color-mix(in oklab, var(--c) 11%, transparent) 0.15cqw, transparent 0.15cqw);
    background-size: 100% 8cqw;
    opacity: 0.55;
}

.tr-ghosts {
    inset: 0;
}

.tr-ghosts i {
    position: absolute;
    bottom: 14cqw;
    left: calc(var(--x) * 1cqw);
    width: 2.4cqw;
    height: calc(var(--h) * 26cqw);
    border-radius: 0.6cqw;
    background: color-mix(in oklab, var(--c) 10%, transparent);
}

.tr-chart {
    top: 22cqw;
    left: 13cqw;
    width: 44cqw;
    height: 36cqw;
}

.tr-candle {
    top: 0;
    bottom: 0;
    left: calc(1cqw + var(--k) * 5.6cqw);
    width: 3.4cqw;
}

.tr-wick {
    position: absolute;
    top: calc((1 - var(--hi)) * 100%);
    bottom: calc(var(--lo) * 100%);
    left: 50%;
    width: 0.35cqw;
    background: rgba(160, 172, 188, 0.55);
    translate: -50% 0;
}

.tr-body {
    position: absolute;
    inset: calc((1 - var(--b1)) * 100%) 0 calc(var(--b0) * 100%);
    border-radius: 0.5cqw;
    background: rgba(150, 160, 176, 0.28);
    box-shadow: inset 0 0 0 0.25cqw rgba(170, 180, 196, 0.5);
}

.tr-candle.is-up .tr-body {
    background: color-mix(in oklab, var(--c) 52%, transparent);
    box-shadow: inset 0 0 0 0.25cqw var(--c);
}

.tr-candle.is-up .tr-wick {
    background: color-mix(in oklab, var(--c) 70%, transparent);
}

.tr-live .tr-body {
    transform-origin: 50% 100%;
    box-shadow: inset 0 0 0 0.25cqw var(--c), 0 0 2.4cqw color-mix(in oklab, var(--c) 50%, transparent);
}

.tr-count {
    top: 1cqw;
    left: 36cqw;
    display: flex;
    gap: 0.6cqw;
    align-items: center;
    color: var(--c);
    font-family: var(--font-data);
    font-size: 2.4cqw;
    font-weight: 600;
}

.tr-count svg {
    width: 3cqw;
    height: 3cqw;
    fill: none;
    stroke: currentcolor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.tr-tag {
    padding: 0.5cqw 1.3cqw;
    border-radius: 99px;
    background: color-mix(in oklab, var(--c) 12%, rgba(6, 12, 10, 0.9));
    box-shadow: inset 0 0 0 0.2cqw color-mix(in oklab, var(--c) 40%, transparent);
    color: color-mix(in oklab, var(--c) 80%, white);
    font-family: var(--font-data);
    font-size: 1.6cqw;
    white-space: nowrap;
}

.tr-tag--1 {
    top: -6cqw;
    left: 2cqw;
}

.tr-osc {
    top: 62cqw;
    left: 14cqw;
    width: 58cqw;
    height: 18cqw;
    border-radius: 1.8cqw;
    background: rgba(8, 15, 12, 0.72);
    box-shadow: inset 0 0 0 0.25cqw rgba(255, 255, 255, 0.06);
}

.tr-osc-svg,
.tr-seg {
    inset: 2cqw;
    width: calc(100% - 4cqw);
    height: calc(100% - 4cqw);
}

.tr-zero {
    stroke: rgba(255, 255, 255, 0.1);
    stroke-dasharray: 3 4;
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
}

.tr-seg path {
    fill: none;
    stroke: color-mix(in oklab, var(--c) 80%, white);
    stroke-width: 2px;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.tr-turn {
    top: calc(2cqw + var(--y) / 100 * 14cqw);
    left: calc(2cqw + var(--x) / 100 * 54cqw);
    width: 3.8cqw;
    height: 3.8cqw;
    border-radius: 50%;
    box-shadow: 0 0 0 0.35cqw var(--c), 0 0 2.4cqw var(--c);
    translate: -50% -50%;
}

.tr-tag--2 {
    bottom: -5cqw;
    left: 3cqw;
}

.tr-panel {
    top: 24cqw;
    left: 60cqw;
    display: grid;
    gap: 1cqw;
    align-content: start;
    width: 24cqw;
    padding: 2.4cqw 2.2cqw;
    border-radius: 2.2cqw;
    background: rgba(8, 17, 13, 0.9);
    box-shadow: inset 0 0 0 0.3cqw color-mix(in oklab, var(--c) 34%, transparent), 0 2.4cqw 5cqw -2cqw rgba(0, 0, 0, 0.7);
    font-size: 1.8cqw;
}

.tr-row {
    display: flex;
    justify-content: space-between;
    color: var(--fg-2);
}

.tr-row b {
    color: var(--fg);
    font-family: var(--font-data);
}

.tr-size-label {
    margin-top: 0.6cqw;
    color: var(--fg-3);
    font-size: 1.5cqw;
}

.tr-size {
    display: flex;
    gap: 0.8cqw;
    align-items: baseline;
}

.tr-window {
    display: block;
    height: 4.6cqw;
    overflow: clip;
}

.tr-roll {
    display: grid;
    transform: translateY(-13.8cqw);
    transition-timing-function: var(--ease-in-out);
}

.tr-roll b {
    height: 4.6cqw;
    color: var(--fg);
    font-family: var(--font-data);
    font-size: 3.6cqw;
    line-height: 4.6cqw;
}

.tr-unit {
    color: var(--c);
    font-family: var(--font-data);
    font-size: 1.7cqw;
}

.tr-buttons {
    display: flex;
    gap: 1cqw;
    margin-top: 0.6cqw;
}

.tr-buttons i {
    flex: 1;
    height: 3.6cqw;
    border-radius: 99px;
    background: color-mix(in oklab, var(--c) 40%, transparent);
}

.tr-buttons i:last-child {
    background: rgba(169, 179, 193, 0.18);
}

.tr-tag--3 {
    top: calc(100% + 1.4cqw);
    left: 0;
}

.tr-digit {
    top: calc(var(--y) * 1cqw);
    left: calc(var(--x) * 1cqw);
    color: color-mix(in oklab, var(--c) 60%, transparent);
    font-family: var(--font-data);
    font-size: 1.6cqw;
}

/* Steps: 0 the past candles, 1 the live candle with its countdown, 2 the turning point, 3 the size. */
.drop[data-step="0"] .tr-live .tr-body {
    transform: scaleY(0.12);
}

.drop[data-step="0"] :is(.tr-count, .tr-tag--1) {
    opacity: 0;
}

.drop:is([data-step="0"], [data-step="1"]) .tr-osc {
    opacity: 0;
    translate: 0 3cqw;
}

.drop:is([data-step="0"], [data-step="1"]) :is(.tr-seg, .tr-turn, .tr-tag--2) {
    opacity: 0;
}

.drop[data-step="2"] .tr-seg {
    transition-delay: calc(var(--k) * var(--t) * 0.085);
}

.drop[data-step="2"] :is(.tr-turn, .tr-tag--2) {
    transition-delay: calc(var(--t) * 0.72);
}

.drop:is([data-step="0"], [data-step="1"], [data-step="2"]) .tr-panel {
    opacity: 0;
    translate: 3cqw 0;
}

.drop:is([data-step="0"], [data-step="1"], [data-step="2"]) .tr-roll {
    transform: none;
}

.drop:is([data-step="0"], [data-step="1"], [data-step="2"]) .tr-tag--3 {
    opacity: 0;
}

.drop[data-step="3"] .tr-roll {
    transition-delay: calc(var(--t) * 0.3);
    transition-duration: calc(var(--t) * 0.6);
}

@media (prefers-reduced-motion: no-preference) {
    .is-live .drop.is-awake:not([data-step="0"]) .tr-live .tr-body {
        animation: tr-form 5.6s steps(1, end) infinite;
    }

    .is-live .drop.is-awake .tr-ghosts {
        animation: tr-drift 40s linear infinite;
    }

    .is-live .drop.is-awake .tr-digit {
        animation: rise-fade calc(6s + var(--k) * 1.5s) ease-out calc(var(--k) * 2s) infinite;
    }
}

@keyframes tr-form {
    0% {
        transform: scaleY(0.3);
    }

    12% {
        transform: scaleY(0.46);
    }

    25% {
        transform: scaleY(0.4);
    }

    37% {
        transform: scaleY(0.63);
    }

    50% {
        transform: scaleY(0.56);
    }

    62% {
        transform: scaleY(0.8);
    }

    75% {
        transform: scaleY(0.72);
    }

    87% {
        transform: scaleY(0.96);
    }

    100% {
        transform: scaleY(1);
    }
}

@keyframes tr-drift {
    to {
        transform: translateX(-14cqw);
    }
}

/* --- Apps ------------------------------------------------------------------------------------- */

.ap-bokeh {
    top: calc(var(--y) * 1cqw);
    left: calc(var(--x) * 1cqw);
    width: calc(var(--s) * 1cqw);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in oklab, var(--c) 30%, transparent), transparent 70%);
    translate: -50% -50%;
}

.ap-stage {
    top: 50%;
    left: 50%;
    width: 30cqw;
    height: 56cqw;
    perspective: 120cqw;
    translate: -50% -50%;
}

.ap-prism {
    position: absolute;
    inset: 0;
    transform: translateZ(-8.66cqw) rotateY(-240deg);
    transform-style: preserve-3d;
    transition-timing-function: var(--ease-in-out);
}

.ap-shadow {
    position: absolute;
    bottom: -6cqw;
    left: 10%;
    width: 80%;
    height: 4cqw;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), transparent);
}

.ap-face {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: start;
    justify-items: center;
    padding: 4cqw 2.6cqw;
    overflow: clip;
    border-radius: 4.6cqw;
    background: linear-gradient(170deg, #26151f, #110b11 72%);
    box-shadow: inset 0 0 0 0.45cqw rgba(255, 255, 255, 0.14);
    color: var(--fg);
    text-align: center;
    backface-visibility: hidden;
}

.ap-face--moment {
    transform: rotateY(0deg) translateZ(8.66cqw);
}

.ap-face--koppel {
    transform: rotateY(120deg) translateZ(8.66cqw);
}

.ap-face--drill {
    transform: rotateY(240deg) translateZ(8.66cqw);
}

.ap-head {
    margin-bottom: 2.4cqw;
}

.ap-app {
    color: color-mix(in oklab, var(--c) 72%, white);
    font-size: 1.7cqw;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.ap-heart svg {
    width: 7cqw;
    height: 7cqw;
    fill: var(--c);
}

.ap-pre,
.ap-unit,
.ap-label {
    color: var(--fg-2);
    font-size: 1.7cqw;
}

.ap-count {
    margin: 0.4cqw 0 -0.4cqw;
    font-family: var(--font-display);
    font-size: 11cqw;
    font-weight: 400;
    line-height: 1;
}

.ap-label {
    margin-top: 1.4cqw;
    color: var(--fg-3);
    font-size: 1.5cqw;
}

.ap-units {
    display: flex;
    gap: 0.6cqw;
    margin-top: 3cqw;
}

.ap-units i {
    padding: 0.3cqw 0.8cqw;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--fg-3);
    font-size: 1.15cqw;
    font-style: normal;
}

.ap-units i.is-on {
    background: color-mix(in oklab, var(--c) 30%, transparent);
    color: var(--fg);
}

/* An app's own icon on its screen (Koppel, ByteDrill), in its own colours. */
.ap-logo svg {
    display: block;
    width: 5.5cqw;
    height: 5.5cqw;
}

.ap-face--drill .ap-logo {
    margin-bottom: 0.6cqw;
}

.ap-week {
    margin: 0.6cqw 0 1.6cqw;
    color: var(--fg-2);
    font-size: 1.6cqw;
}

.ap-cal {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5cqw;
    width: 100%;
    height: 22cqw;
}

.ap-day {
    border-radius: 1cqw;
    background: rgba(255, 255, 255, 0.04);
}

.ap-day i {
    display: block;
    padding-top: 0.6cqw;
    color: var(--fg-3);
    font-size: 1.2cqw;
    font-style: normal;
}

.ap-entry {
    position: absolute;
    top: calc(5cqw + var(--k) * 5.6cqw);
    left: calc(var(--d) * 20% - 1cqw);
    padding: 0.5cqw 0.9cqw;
    border-radius: 99px;
    color: #160f12;
    font-size: 1.2cqw;
    font-weight: 600;
    white-space: nowrap;
}

.ap-entry--a {
    background: var(--w-care);
}

.ap-entry--b {
    background: var(--w-software);
}

.ap-people {
    display: flex;
    gap: 1cqw;
    margin-top: 2.4cqw;
}

.ap-people i {
    width: 3cqw;
    height: 3cqw;
    border-radius: 50%;
    background: var(--w-care);
}

.ap-people i:last-child {
    background: var(--w-software);
}

.ap-lesson {
    font-size: 2.2cqw;
    font-weight: 600;
}

.ap-time {
    color: var(--fg-3);
    font-size: 1.4cqw;
}

.ap-code {
    display: grid;
    gap: 0.8cqw;
    width: 90%;
    margin: 1.8cqw 0;
    padding: 1.6cqw;
    border-radius: 1.4cqw;
    background: rgba(255, 255, 255, 0.04);
    justify-items: start;
}

.ap-code i {
    height: 1cqw;
    border-radius: 99px;
    background: color-mix(in oklab, var(--c) 50%, transparent);
}

.ap-code i:nth-child(1) {
    width: 70%;
}

.ap-code i:nth-child(2) {
    width: 46%;
    background: rgba(62, 230, 255, 0.5);
}

.ap-code i:nth-child(3) {
    width: 82%;
}

.ap-code i:nth-child(4) {
    width: 34%;
    background: rgba(198, 238, 94, 0.5);
}

.ap-ring {
    position: relative;
    display: grid;
    place-items: center;
    width: 14cqw;
    height: 14cqw;
}

.ap-ring i {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.8cqw;
    height: 1.8cqw;
    border-radius: 50%;
    background: var(--c);
    box-shadow: 0 0 1.2cqw var(--c);
    transform: translate(-50%, -50%) rotate(calc(var(--k) * 30deg - 90deg)) translateX(5.8cqw);
}

.ap-ring b {
    color: var(--fg);
    font-size: 1.6cqw;
    font-weight: 600;
}

.ap-bubble {
    top: calc(var(--y) * 1cqw);
    left: calc(var(--x) * 1cqw);
    width: 3.4cqw;
    height: 3.4cqw;
    opacity: 0.5;
}

.ap-bubble svg {
    width: 100%;
    height: 100%;
    fill: color-mix(in oklab, var(--c) 50%, transparent);
}

/* Steps: 0 and 1 the first app (it counts), 2 the phone turns on to Koppel, 3 on to ByteDrill. */
.drop:is([data-step="0"], [data-step="1"]) .ap-prism {
    transform: translateZ(-8.66cqw) rotateY(0deg);
}

.drop[data-step="2"] .ap-prism {
    transform: translateZ(-8.66cqw) rotateY(-120deg);
}

.drop:is([data-step="0"], [data-step="1"]) .ap-entry {
    opacity: 0;
    scale: 0.6;
}

.drop[data-step="2"] .ap-entry {
    transition-delay: calc(var(--t) * 0.55 + var(--k) * 180ms);
    transition-timing-function: var(--ease-spring);
}

.drop:is([data-step="0"], [data-step="1"], [data-step="2"]) .ap-ring i {
    opacity: 0.14;
}

.drop[data-step="3"] .ap-ring i {
    transition-delay: calc(var(--t) * 0.45 + var(--k) * var(--t) * 0.035);
}

.drop:is([data-step="0"], [data-step="1"], [data-step="2"]) .ap-ring b {
    opacity: 0;
}

.drop[data-step="3"] .ap-ring b {
    transition-delay: calc(var(--t) * 0.92);
}

/* After its picture the phone turns by hand (welcome/js/turn.js, Maurice 2026-10-29): a sideways swipe
   on the drop, up and down stays the page's. While it turns the prism follows the hand, no transition. */
.drop.is-turnable {
    touch-action: pan-y;
    user-select: none;
}

.ap-prism.is-turned {
    transition: none;
}

@media (hover: hover) and (pointer: fine) {
    .drop.is-turnable {
        cursor: grab;
    }

    .drop.is-turning {
        cursor: grabbing;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .is-live .drop.is-awake .ap-stage {
        animation: float-y 7s ease-in-out infinite alternate;
    }

    .is-live .drop.is-awake .ap-heart {
        animation: heart-beat 1.6s ease-in-out infinite;
    }

    .is-live .drop.is-awake .ap-bokeh {
        animation: float-y calc(8s + var(--k) * 1.6s) ease-in-out calc(var(--k) * -2s) infinite alternate;
    }

    .is-live .drop.is-awake .ap-bubble {
        animation: rise-fade calc(6s + var(--k) * 1.4s) ease-out calc(var(--k) * 1.8s) infinite;
    }
}

@keyframes heart-beat {
    0%,
    100% {
        scale: 1;
    }

    18% {
        scale: 1.16;
    }

    36% {
        scale: 0.98;
    }

    52% {
        scale: 1.08;
    }
}

/* --- Games ------------------------------------------------------------------------------------ */

.gm-paper {
    inset: -10cqw;
    background-image:
        linear-gradient(color-mix(in oklab, var(--c) 11%, transparent) 0.12cqw, transparent 0.12cqw),
        linear-gradient(90deg, color-mix(in oklab, var(--c) 11%, transparent) 0.12cqw, transparent 0.12cqw);
    background-size: 5cqw 5cqw;
    opacity: 0.5;
}

.gm-sketch {
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.gm-stroke {
    fill: none;
    stroke: color-mix(in oklab, var(--c) 82%, white);
    stroke-width: 2.4px;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.gm-stroke--thin {
    stroke-width: 1.4px;
    opacity: 0.5;
}

.gm-level {
    inset: 0;
}

.gm-level > span {
    position: absolute;
}

.gm-plat {
    top: calc(var(--y) * 1cqw);
    left: calc(var(--x) * 1cqw);
    width: calc(var(--w) * 1cqw);
    height: 5cqw;
    border-radius: 1.6cqw;
    background: linear-gradient(180deg, color-mix(in oklab, var(--c) 75%, white) 0 24%, color-mix(in oklab, var(--c) 46%, #1a220e) 24%, color-mix(in oklab, var(--c) 20%, #0d1208));
    box-shadow: 0 1.8cqw 3cqw -1cqw rgba(0, 0, 0, 0.6);
    transform-origin: 50% 0;
    transition-delay: calc(var(--k) * var(--t) * 0.14);
}

.gm-star {
    top: 16cqw;
    left: 67cqw;
    width: 7cqw;
    height: 7cqw;
    translate: calc(var(--sx, 0) * 1cqw) 0;
}

.gm-star::before {
    content: "";
    position: absolute;
    inset: -60%;
    border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in oklab, var(--c) 40%, transparent), transparent);
}

.gm-star svg {
    position: relative;
    width: 100%;
    height: 100%;
    fill: color-mix(in oklab, var(--c) 45%, white);
}

.gm-hero {
    top: 29.5cqw;
    left: 69cqw;
    width: 6cqw;
    height: 7.5cqw;
    cursor: pointer;
    pointer-events: auto;
}

.gm-hero-body {
    position: absolute;
    inset: 0;
    border-radius: 46% 46% 40% 40%;
    background: radial-gradient(circle at 40% 30%, #fbfff0 0 12%, var(--c) 46%, color-mix(in oklab, var(--c) 50%, #1b2410));
    box-shadow: 0 0 3cqw color-mix(in oklab, var(--c) 50%, transparent);
    transform-origin: 50% 100%;
}

.gm-eye {
    position: absolute;
    top: 2.2cqw;
    right: 1.2cqw;
    width: 1.1cqw;
    height: 1.6cqw;
    border-radius: 50%;
    background: #0b0f08;
}

.gm-devices {
    top: 67cqw;
    right: 18cqw;
    left: 18cqw;
    display: flex;
    gap: 3cqw;
    align-items: end;
    justify-content: center;
}

.gm-dev {
    position: relative;
    display: grid;
    gap: 0.8cqw;
    justify-items: center;
    transition-delay: calc(var(--k) * var(--t) * 0.16);
}

.gm-dev-screen {
    position: relative;
    display: block;
    overflow: clip;
    border-radius: 1cqw;
    background: #0d1308;
    box-shadow: inset 0 0 0 0.3cqw color-mix(in oklab, var(--c) 36%, transparent);
}

.gm-dev--phone .gm-dev-screen {
    width: 7cqw;
    height: 12cqw;
}

.gm-dev--browser .gm-dev-screen {
    width: 18cqw;
    height: 11cqw;
}

.gm-dev--pc .gm-dev-screen {
    width: 16cqw;
    height: 10cqw;
}

.gm-dev-screen i {
    position: absolute;
    height: 8%;
    border-radius: 99px;
    background: color-mix(in oklab, var(--c) 60%, transparent);
}

.gm-dev-screen i:nth-child(1) {
    top: 70%;
    left: 10%;
    width: 28%;
}

.gm-dev-screen i:nth-child(2) {
    top: 52%;
    left: 40%;
    width: 24%;
}

.gm-dev-screen i:nth-child(3) {
    top: 34%;
    left: 66%;
    width: 24%;
}

.gm-dev-screen b {
    position: absolute;
    top: 20%;
    left: 72%;
    width: 12%;
    aspect-ratio: 0.8;
    border-radius: 40%;
    background: var(--c);
}

.gm-dev-name {
    color: var(--fg-3);
    font-family: var(--font-data);
    font-size: 1.4cqw;
}

.gm-spark {
    top: calc(var(--y) * 1cqw);
    left: calc(var(--x) * 1cqw);
    width: 1cqw;
    height: 1cqw;
    border-radius: 50%;
    background: color-mix(in oklab, var(--c) 60%, white);
    opacity: 0.6;
}

/* Steps: 0 a sketch of light strokes, 1 it becomes a level, 2 the figure runs and jumps, 3 three devices. */
.drop:is([data-step="0"], [data-step="1"]) .gm-sketch {
    opacity: 1;
}

.drop[data-step="1"] .gm-sketch {
    opacity: 0.18;
}

.drop[data-step="0"] .gm-plat {
    opacity: 0;
    transform: scaleY(0);
}

.drop[data-step="0"] :is(.gm-star, .gm-hero) {
    opacity: 0;
    scale: 0.4;
}

.drop:is([data-step="0"], [data-step="1"]) .gm-hero {
    translate: -46cqw 22cqw;
}

.drop[data-step="1"] :is(.gm-star, .gm-hero) {
    transition-delay: calc(var(--t) * 0.5);
}

.drop[data-step="2"] .gm-hero {
    animation: gm-run var(--t) linear both;
}

.drop[data-step="2"] .gm-hero-body {
    animation: gm-squash var(--t) linear both;
}

.gm-hero.is-jumping .gm-hero-body {
    animation: gm-hop 0.8s var(--ease-out);
}

@keyframes gm-run {
    0% {
        translate: -46cqw 22cqw;
    }

    10% {
        translate: -41cqw 22cqw;
    }

    28% {
        translate: -33cqw 8cqw;
    }

    44% {
        translate: -23cqw 11cqw;
    }

    56% {
        translate: -19cqw 11cqw;
    }

    76% {
        translate: -9cqw -4cqw;
    }

    92%,
    100% {
        translate: 0 0;
    }
}

@keyframes gm-squash {
    0%,
    8% {
        scale: 1;
    }

    12% {
        scale: 1.12 0.86;
    }

    20% {
        scale: 0.9 1.12;
    }

    42% {
        scale: 1;
    }

    46% {
        scale: 1.14 0.84;
    }

    58% {
        scale: 0.9 1.12;
    }

    88% {
        scale: 1;
    }

    94% {
        scale: 1.12 0.88;
    }

    100% {
        scale: 1;
    }
}

@keyframes gm-hop {
    0% {
        transform: none;
    }

    14% {
        transform: scale(1.14, 0.84);
    }

    30% {
        transform: translateY(-9cqw) scale(0.9, 1.12);
    }

    55% {
        transform: translateY(-11cqw);
    }

    82% {
        transform: translateY(0) scale(1.12, 0.88);
    }

    100% {
        transform: none;
    }
}

.drop:is([data-step="0"], [data-step="1"], [data-step="2"]) .gm-dev {
    opacity: 0;
    translate: 0 3cqw;
}

@media (prefers-reduced-motion: no-preference) {
    .is-live .drop.is-awake .gm-star {
        animation: star-spin 9s ease-in-out infinite;
    }

    .is-live .drop.is-awake .gm-spark {
        animation: float-y calc(5s + var(--k) * 0.8s) ease-in-out calc(var(--k) * -1.2s) infinite alternate;
    }
}

@keyframes star-spin {
    0%,
    100% {
        rotate: -8deg;
        scale: 1;
    }

    50% {
        rotate: 8deg;
        scale: 1.08;
    }
}

/* The level after the story: the hero walks to and fro on the top platform, a jump below the star
   collects it (sparks, a salto, a badge), and the star comes back at its next place. The jump
   button sits on the rim of the drop, half inside the bubble. */
.drop .jump {
    position: absolute;
    top: calc(50% + sin(62deg) * 50%);
    left: calc(50% + cos(62deg) * 50%);
    z-index: 4;
    border-color: color-mix(in oklab, var(--c) 55%, transparent);
    background: color-mix(in oklab, var(--c) 12%, rgba(7, 9, 13, 0.9));
    box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.8), 0 0 26px color-mix(in oklab, var(--c) 22%, transparent);
    translate: -50% -50%;
    touch-action: manipulation;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.8s var(--ease-out), scale 0.12s var(--ease-out), border-color 0.25s ease, color 0.25s ease;
}

.drop .jump:is(:active, .is-pressed) {
    scale: 0.92;
}

.drop .jump:focus-visible {
    outline: 2px solid var(--c);
    outline-offset: 3px;
}

html.reveal .drop:not(.is-awake) .jump {
    opacity: 0;
}

.gm-star svg,
.gm-star::before {
    transition: opacity 0.3s var(--ease-out), scale 0.45s var(--ease-out);
}

.gm-star.is-collected svg,
.gm-star.is-collected::before {
    opacity: 0;
    scale: 1.7;
}

.gm-star.is-back svg {
    animation: gm-star-back 0.7s var(--ease-spring) both;
}

@keyframes gm-star-back {
    from {
        opacity: 0;
        scale: 0;
    }
}

.gm-burst i {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.3cqw;
    height: 1.3cqw;
    margin: -0.65cqw;
    border-radius: 50%;
    background: color-mix(in oklab, var(--c) 40%, white);
    box-shadow: 0 0 1.4cqw var(--c);
    opacity: 0;
}

.gm-star.is-collected .gm-burst i {
    animation: gm-burst 0.75s var(--ease-out) calc(var(--k) * 12ms) both;
}

@keyframes gm-burst {
    0% {
        opacity: 1;
        transform: none;
    }

    100% {
        opacity: 0;
        transform: translate(calc(var(--dx) * 1cqw), calc(var(--dy) * 1cqw)) scale(0.3);
    }
}

.gm-badge {
    top: 7.5cqw;
    left: 50cqw;
    z-index: 2;
    display: flex;
    gap: 1cqw;
    align-items: center;
    padding: 1.1cqw 2.4cqw 1.1cqw 1.5cqw;
    border-radius: 99px;
    background: linear-gradient(180deg, color-mix(in oklab, var(--c) 70%, white), var(--c));
    box-shadow: 0 1.6cqw 4cqw -1.4cqw rgba(0, 0, 0, 0.7), 0 0 4cqw color-mix(in oklab, var(--c) 45%, transparent);
    color: #141c06;
    font-size: 2.7cqw;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    translate: -50% 0;
    scale: 0.5;
    transition: opacity 0.35s var(--ease-out), scale 0.55s var(--ease-spring);
}

.gm-badge svg {
    width: 3.4cqw;
    height: 3.4cqw;
    fill: currentcolor;
}

.gm-badge.is-shown {
    opacity: 1;
    scale: 1;
}

.gm-hero.is-flipping .gm-hero-body {
    transform-origin: 50% 55%;
    animation: gm-flip 0.9s var(--ease-out);
}

@keyframes gm-flip {
    0% {
        transform: none;
    }

    14% {
        transform: scale(1.14, 0.84);
    }

    34% {
        transform: translateY(-10cqw) rotate(-150deg);
    }

    56% {
        transform: translateY(-12cqw) rotate(-300deg);
    }

    82% {
        transform: translateY(0) rotate(-360deg) scale(1.12, 0.88);
    }

    100% {
        transform: rotate(-360deg);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .is-live .drop.is-awake:is(:not([data-step]), [data-step="done"]) .gm-hero {
        animation: gm-patrol 5.6s ease-in-out infinite;
    }
}

/* To and fro on the top platform, turning round at either end. */
@keyframes gm-patrol {
    0% {
        translate: -2.5cqw 0;
        scale: 1 1;
    }

    45% {
        translate: 8.5cqw 0;
        scale: 1 1;
    }

    50% {
        translate: 8.5cqw 0;
        scale: -1 1;
    }

    95% {
        translate: -2.5cqw 0;
        scale: -1 1;
    }

    100% {
        translate: -2.5cqw 0;
        scale: 1 1;
    }
}

/* =============================================================================================
   8 Connections: every world makes the others stronger, and everything can be connected
   ============================================================================================= */

.connections {
    padding: clamp(40px, 7vh, 88px) var(--edge) clamp(24px, 4vh, 48px);
}

.connections-head .t-kicker,
.team-head .t-kicker,
.collab-head .t-kicker,
.voices-head .t-kicker,
.closing-head .t-kicker {
    margin-bottom: 14px;
}

.connections-title,
.team-title,
.collab-title,
.voices-title,
.closing-title {
    font-size: clamp(2rem, 1.25rem + 2.5vw, 3.7rem);
    line-height: 1.04;
}

.connections-stage {
    display: grid;
    gap: clamp(20px, 3vh, 36px);
    justify-items: center;
    max-width: var(--frame);
    margin-inline: auto;
    align-content: center;
    text-align: center;
}

.connections-head {
    padding-top: var(--seat-top);
}

.connections-title {
    max-width: 22em;
}

.connections-picture {
    display: grid;
    gap: 10px;
    justify-items: center;
    width: 100%;
}

.links-figure {
    display: grid;
    gap: 18px;
    justify-items: center;
    width: min(100%, 1040px);
}

.links-stage {
    position: relative;
    width: 100%;
}

.links {
    position: relative;
    width: 100%;
    max-height: calc(100svh - var(--site-header-h, 76px) - 260px);
    aspect-ratio: 16 / 8.4;
}

.links-orbit,
.links-net,
.links-thread {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Depth by layers: the far half of the ring, the near half, the net, the threads, then the worlds
   (the near ones above the far ones). */
.links-orbit--far {
    z-index: 1;
}

.links-orbit--near {
    z-index: 2;
}

.links-net {
    z-index: 3;
    transition: opacity 1.8s var(--ease-out);
}

.links-thread {
    z-index: 4;
    transition: opacity 1.4s var(--ease-out);
}

.links-orbit path {
    fill: none;
    stroke: rgba(236, 232, 224, 0.4);
    stroke-width: 1.4px;
    stroke-dasharray: 2 7;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.links-orbit--far path {
    stroke: rgba(236, 232, 224, 0.2);
}

.links-net path {
    fill: none;
    stroke: rgba(236, 232, 224, 0.2);
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
}

.links-thread path {
    fill: none;
    stroke: rgba(236, 232, 224, 0.8);
    stroke-width: 2px;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

/* A world on the ring: near ones larger and brighter. */
.links-drop {
    position: absolute;
    top: calc(var(--y) * 1%);
    left: calc(var(--x) * 1%);
    z-index: calc(5 + round(var(--d) * 2));
    display: grid;
    gap: 6px;
    justify-items: center;
    opacity: calc(0.66 + var(--d) * 0.34);
    translate: -50% -50%;
    scale: calc(0.78 + var(--d) * 0.38);
}

.links-orb {
    position: relative;
    width: clamp(46px, 5.2vw, 72px);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 27% 21%, color-mix(in oklab, var(--c) 40%, white) 0 2.4%, transparent 9%),
        radial-gradient(circle at 50% 56%, color-mix(in oklab, var(--c) 26%, #0b0f15) 0%, color-mix(in oklab, var(--c) 10%, #07090d) 54%, color-mix(in oklab, var(--c) 50%, #0c121a) 100%);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c) 60%, transparent), 0 0 24px color-mix(in oklab, var(--c) 24%, transparent);
}

.links-name {
    color: color-mix(in oklab, var(--c) 50%, var(--fg));
    font-size: 0.85rem;
    font-weight: 600;
}

.links-labels {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.links-label {
    display: grid;
    gap: 6px;
    justify-items: center;
    padding: 12px 16px;
    border-radius: 18px;
    background: rgba(8, 10, 14, 0.7);
    box-shadow: inset 0 0 0 1px rgba(236, 230, 220, 0.12);
    color: var(--fg-2);
    font-size: 0.9rem;
    line-height: 1.45;
    transition: opacity 1s var(--ease-out), translate 1.1s var(--ease-out);
}

.links-pair {
    display: flex;
    gap: 4px;
}

.links-pair i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--c);
}

/* Steps: one thread after another (data-step 1 … 3), then the net in which every world is connected
   with every other (end state). */
.links-figure:is([data-step="0"], [data-step="1"], [data-step="2"], [data-step="3"]) .links-net {
    opacity: 0;
}

.links-figure[data-step="0"] :is(.links-thread, .links-label),
.links-figure[data-step="1"] :is(.links-thread, .links-label):not([data-thread="0"]),
.links-figure[data-step="2"] :is(.links-thread, .links-label)[data-thread="2"] {
    opacity: 0;
}

.links-figure[data-step="0"] .links-label,
.links-figure[data-step="1"] .links-label:not([data-thread="0"]),
.links-figure[data-step="2"] .links-label[data-thread="2"] {
    translate: 0 10px;
}

.links-figure[data-step] .links-thread {
    transition-duration: var(--t, 1.4s);
}

.links-figure[data-step] .links-label {
    transition-delay: calc(var(--t, 1.4s) * 0.7);
}

/* A thread being drawn (Pen in pictures.js): it stands at once, its dash lets it grow. */
.links-figure[data-step] .links-thread.is-pen {
    transition: none;
}

/* A world that a thread reaches answers with one short glow (Guide.meet). */
.links-orb::after {
    position: absolute;
    inset: -28%;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in oklab, var(--c) 55%, transparent) 0 32%, transparent 70%);
    opacity: 0;
    content: '';
    pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
    .links-drop.is-met .links-orb::after {
        animation: links-met 1.2s var(--ease-out);
    }
}

@keyframes links-met {
    0% {
        opacity: 0;
        scale: 0.7;
    }

    25% {
        opacity: 0.95;
    }

    100% {
        opacity: 0;
        scale: 1.45;
    }
}

.connections-close {
    display: grid;
    gap: clamp(22px, 3vh, 36px);
    max-width: var(--frame);
    margin: clamp(32px, 5vh, 64px) auto 0;
    padding-inline-start: var(--seat);
}

.connections-text,
.connections-offer {
    max-width: 40rem;
}

.connections-offer .link-arrow {
    margin-left: 6px;
    vertical-align: middle;
}

.connections-facts {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px clamp(24px, 4vw, 64px);
}

.connections-tools {
    display: grid;
    gap: 10px;
    color: var(--fg-2);
}

.connections-tools .t-data {
    font-size: 0.92rem;
    line-height: 1.7;
}

.connections-principles ul {
    display: grid;
    gap: 8px;
    margin-top: 10px;
    padding: 0;
    list-style: none;
}

.connections-principles li {
    display: flex;
    gap: 12px;
    align-items: baseline;
    color: var(--fg);
    font-family: var(--font-voice);
    font-size: calc(var(--step-1) * 0.94);
    font-style: italic;
    font-weight: 420;
    letter-spacing: 0.01em;
}

.connections-principles li::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--w-pearl);
    box-shadow: 0 0 10px rgba(236, 230, 220, 0.5);
    translate: 0 -0.2em;
}

/* =============================================================================================
   9 Team: two views, one model, two people
   ============================================================================================= */

.team {
    padding: clamp(40px, 7vh, 88px) var(--edge) clamp(24px, 4vh, 48px);
}

.team-part {
    max-width: var(--frame);
    margin-inline: auto;
}

.team-stage {
    display: grid;
    gap: clamp(20px, 3vh, 36px);
    align-content: center;
}

.team-head {
    max-width: 40rem;
    padding-inline-start: var(--seat);
}

.team-figure {
    display: grid;
    gap: 16px;
    justify-items: center;
    width: 100%;
}

.team-stage .again {
    justify-self: center;
}

/* "Two views, one model": two lights stand like two eyes left and right of a floating model. Each
   sees one flat view (amber the process in four steps, cyan the three layers behind it); together
   the views fold into a model in space: its lanes and floors cross, and where they meet it lights
   up. One 3D context (.ey-model); every pane, lane, floor and meeting line is a plane in it. The
   base rules are the end state; .team-figure[data-step] gives the earlier steps (0 nothing, 1 the
   two flat views, 2 each eye reads its view, 3 they fold into the model). Units: cqi of the scene. */
.eyes {
    position: relative;
    width: 100%;
    aspect-ratio: 2.6;
    container-type: inline-size;
    perspective: 1500px;
    perspective-origin: 50% 38%;
}

.ey-sight {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.ey-ray {
    opacity: 0.55;
    transition: opacity calc(var(--t, 1.4s) * 0.6) var(--ease-out);
}

/* The eyes look at their flat views first, at the model once it stands. */
.ey-ray--flat,
.team-figure:is([data-step="1"], [data-step="2"]) .ey-ray--model {
    opacity: 0;
}

.team-figure:is([data-step="1"], [data-step="2"]) .ey-ray--flat {
    opacity: 0.55;
}

/* The two eyes: small lights that stay when the being has merged again (and stand without script). */
.ey-eye,
.ey-point {
    position: absolute;
    width: 1px;
    height: 1px;
}

.ey-eye {
    --e: var(--w-care);

    top: 46%;
    left: 6%;
}

.ey-eye--tech {
    --e: var(--w-software);

    left: 94%;
}

/* Where the being divides and flows together again: above the model, clear of every name. */
.ey-point {
    top: 8%;
    left: 50%;
}

.ey-eye::before {
    content: "";
    position: absolute;
    width: clamp(18px, 2.4cqi, 30px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(closest-side, #fff 0 16%, color-mix(in oklab, var(--e) 80%, white) 30%, color-mix(in oklab, var(--e) 30%, transparent) 62%, transparent);
    translate: -50% -50%;
    transition: opacity 0.8s var(--ease-out), scale 0.8s var(--ease-out);
}

.eyes.has-lights .ey-eye::before,
.team-figure[data-step="0"] .ey-eye::before {
    opacity: 0;
    scale: 0.4;
}

.ey-model {
    --w: 26cqi;
    --h: 19cqi;
    --d: 15cqi;
    --apart: 0.85;
    --face: 32deg;
    --shrink: 1;
    --ops: var(--w-care);
    --tech: var(--w-software);

    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    transform: rotateX(-16deg) rotateY(-34deg);
    transform-style: preserve-3d;
    transition: transform var(--t, 1.4s) var(--ease-glide);
}

.ey-pane,
.ey-floor,
.ey-lane,
.ey-meet {
    position: absolute;
    transition: transform var(--t, 1.4s) var(--ease-glide), opacity calc(var(--t, 1.4s) * 0.6) var(--ease-out);
}

/* The flat views. Folded (end state) the process is the front of the model, the layers its side. */
.ey-pane {
    top: calc(var(--h) / -2);
    height: var(--h);
    border-radius: 0.6cqi;
}

.ey-pane--flow {
    left: calc(var(--w) / -2);
    width: var(--w);
    background: color-mix(in oklab, var(--ops) 6%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ops) 55%, transparent);
    transform: translateZ(calc(var(--d) / 2));
}

.ey-pane--layers {
    left: calc(var(--d) / -2);
    width: var(--d);
    background: color-mix(in oklab, var(--tech) 6%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tech) 55%, transparent);
    transform: translateX(calc(var(--w) / 2)) rotateY(90deg);
}

.ey-title {
    position: absolute;
    bottom: calc(100% + 0.8cqi);
    left: 0;
    color: color-mix(in oklab, var(--ops) 70%, var(--fg));
    font-family: var(--font-data);
    font-size: clamp(0.62rem, 1.05cqi, 0.8rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    transition: opacity calc(var(--t, 1.4s) * 0.5) var(--ease-out);
}

.ey-pane--layers .ey-title {
    color: color-mix(in oklab, var(--tech) 70%, var(--fg));
}

/* The process: four lanes, a step in each, joined from left to right. */
.ey-flow {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ey-flow::before {
    content: "";
    position: absolute;
    right: 12.5%;
    bottom: 0;
    left: 12.5%;
    height: 1px;
    background: color-mix(in oklab, var(--ops) 70%, transparent);
}

/* A lane of the process: it rises from its step at the foot of the front; the name stands below. */
.ey-node {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: end;
    height: 100%;
    transition: opacity calc(var(--t, 1.4s) * 0.25) var(--ease-out) calc(var(--j) * var(--t, 1.4s) * 0.16);
}

.ey-node::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 50%;
    width: 1px;
    background: color-mix(in oklab, var(--ops) 26%, transparent);
}

.ey-node i {
    position: relative;
    width: 1.5cqi;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(closest-side, #fff8ec 0 30%, var(--ops) 60%, transparent);
    translate: 0 50%;
}

.ey-node b {
    position: absolute;
    top: calc(100% + 1.1cqi);
    left: 50%;
    translate: -50% 0;
}

.ey-node b,
.ey-band b {
    position: relative;
    color: var(--fg);
    font-size: clamp(0.62rem, 1.15cqi, 0.86rem);
    font-weight: 600;
    white-space: nowrap;
}

/* The layers: three floors, top to bottom. */
.ey-stack {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: repeat(3, minmax(0, 1fr));
}

.ey-band {
    display: grid;
    place-items: center;
    border-top: 1px solid color-mix(in oklab, var(--tech) 45%, transparent);
    transition: opacity calc(var(--t, 1.4s) * 0.25) var(--ease-out) calc(var(--i) * var(--t, 1.4s) * 0.2 + var(--t, 1.4s) * 0.1);
}

.ey-band:first-child {
    border-top: 0;
}

/* Inside the model: the floors of the layers, the lanes of the process and where they meet. */
.ey-floor {
    top: calc(var(--d) / -2);
    left: calc(var(--w) / -2);
    width: var(--w);
    height: var(--d);
    background: color-mix(in oklab, var(--tech) 3%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tech) 30%, transparent);
    transform: translateY(calc((var(--i) - 1) * var(--h) / 3)) rotateX(90deg);
    transition-delay: calc(var(--t, 1.4s) * 0.4);
}

.ey-lane {
    top: calc(var(--h) / -2);
    left: calc(var(--d) / -2);
    width: var(--d);
    height: var(--h);
    background: color-mix(in oklab, var(--ops) 2%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ops) 26%, transparent);
    transform: translateX(calc((var(--j) - 1.5) * var(--w) / 4)) rotateY(90deg);
    transition-delay: calc(var(--t, 1.4s) * 0.45);
}

.ey-meet {
    top: -0.45cqi;
    left: calc(var(--d) / -2);
    width: var(--d);
    height: 0.9cqi;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.35) 30%, #fff 50%, rgba(255, 255, 255, 0.35) 70%, transparent);
    transform: translateX(calc((var(--j) - 1.5) * var(--w) / 4)) translateY(calc((var(--i) - 1) * var(--h) / 3)) rotateY(90deg);
    transition-delay: calc(var(--t, 1.4s) * 0.7 + (var(--i) * 4 + var(--j)) * 30ms);
}

/* Steps. 0: nothing yet; 1: the two flat views, each turned towards its eye; 2: each eye reads its
   view; 3: they fold into the model and the inside lights up. */
.team-figure[data-step="0"] :is(.ey-pane, .ey-ray--model) {
    opacity: 0;
}

.team-figure:is([data-step="0"], [data-step="1"], [data-step="2"]) .ey-model {
    transform: rotateX(-8deg) rotateY(0deg);
}

.team-figure:is([data-step="0"], [data-step="1"], [data-step="2"]) .ey-pane--flow {
    transform: translateX(calc(var(--w) * var(--apart) * -1)) rotateY(calc(var(--face) * -1)) scale(var(--shrink));
}

.team-figure:is([data-step="0"], [data-step="1"], [data-step="2"]) .ey-pane--layers {
    transform: translateX(calc(var(--w) * var(--apart))) rotateY(var(--face)) scale(var(--shrink));
}

.team-figure:is([data-step="0"], [data-step="1"], [data-step="2"]) :is(.ey-floor, .ey-lane, .ey-meet) {
    opacity: 0;
    transition-delay: 0s;
}

.team-figure:is([data-step="1"], [data-step="2"]) .ey-title {
    opacity: 1;
}

.team-figure:is([data-step="0"], [data-step="1"]) :is(.ey-node, .ey-band) {
    opacity: 0.32;
    transition-delay: 0s;
}

.team-figure[data-step="1"] .ey-ray--flat {
    opacity: 0.2;
}

@media (prefers-reduced-motion: no-preference) {
    .is-live .team-figure:is(:not([data-step]), [data-step="done"]) .ey-model {
        animation: ey-turn 9s ease-in-out -4.5s infinite alternate;
    }
}

/* Around the resting view (-34 degrees): it starts halfway, so it never jumps. */
@keyframes ey-turn {
    from {
        transform: rotateX(-16deg) rotateY(-46deg);
    }

    to {
        transform: rotateX(-16deg) rotateY(-22deg);
    }
}

.team-intro {
    max-width: 40rem;
    margin: clamp(28px, 4vh, 48px) 0 clamp(24px, 3vh, 36px);
    padding-inline-start: var(--seat);
}

.team-people {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 28px);
    padding-inline-start: var(--seat);
}

.person {
    --c: var(--w-care);

    display: grid;
    gap: 16px;
    align-content: start;
    padding: clamp(22px, 2.4vw, 34px);
    border-radius: 32px;
    background: radial-gradient(120% 90% at 0% 0%, color-mix(in oklab, var(--c) 9%, transparent), transparent 60%), rgba(12, 15, 21, 0.72);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c) 18%, transparent);
}

.person--tech {
    --c: var(--w-software);
}

/* Ball, name and below it the title (Maurice, 2026-10-29), all from the top: names and balls of both
   cards stand level, and a title that takes a second line only reaches further down. */
.person-head {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

/* Both cards share their rows (head, introduction, figures), so names, texts and figures stand level
   even when one title takes a second line (titles of 2026-10-29). Without subgrid they stand as before. */
@supports (grid-template-rows: subgrid) {
    .person {
        grid-row: span 3;
        grid-template-rows: subgrid;
    }
}

.person-mark {
    display: grid;
    flex: none;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: radial-gradient(circle at 36% 30%, color-mix(in oklab, var(--c) 30%, white) 0 6%, transparent 22%), radial-gradient(circle, color-mix(in oklab, var(--c) 22%, #0b0f15), color-mix(in oklab, var(--c) 40%, #0c121a));
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c) 55%, transparent);
    color: var(--fg);
    font-family: var(--font-display);
    font-size: 1.4rem;
}

.person-role {
    margin-top: 6px;
    color: color-mix(in oklab, var(--c) 72%, white);
    font-family: var(--font-data);
    font-size: 0.74rem;
    line-height: 1.8;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* The office (COO, CTO) as a small badge in the person's light before the title (Maurice, 2026-10-29): no separator. */
.person-badge {
    display: inline-block;
    margin-inline-end: 0.3em;
    padding: 0 0.62em;
    border-radius: 999px;
    background: color-mix(in oklab, var(--c) 20%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c) 58%, transparent);
    color: var(--fg);
    letter-spacing: 0.14em;
    text-decoration: none;
    white-space: nowrap;
    cursor: default;
}

.person-name {
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 400;
    line-height: 1.1;
}

.person-intro {
    color: var(--fg-2);
    line-height: 1.6;
}

.person-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.person-fact {
    display: grid;
    gap: 2px;
}

.person-fact dt {
    order: 2;
    color: var(--fg-3);
    font-size: 0.84rem;
    line-height: 1.4;
}

.person-fact dd {
    order: 1;
    color: var(--fg);
    font-family: var(--font-display);
    font-size: var(--step-3);
    line-height: 1;
}

.team-company {
    max-width: 44rem;
    margin-top: clamp(24px, 3vh, 36px);
    padding-inline-start: var(--seat);
    color: var(--fg-2);
}

.team-part > .next-slot {
    padding-inline-start: var(--seat);
}

/* =============================================================================================
   10 Working together: one path for every project
   ============================================================================================= */

.collab {
    padding: clamp(40px, 7vh, 88px) var(--edge) clamp(24px, 4vh, 48px);
}

.collab-part {
    max-width: var(--frame);
    margin-inline: auto;
}

.collab-stage {
    display: grid;
    gap: clamp(16px, 2.4vh, 28px);
    align-content: center;
}

.collab-head,
.collab-text {
    padding-inline-start: var(--seat);
}

.collab-title {
    max-width: 18em;
}

.collab-title em {
    color: var(--w-care);
}

.collab-path {
    --line-h: 120px;

    position: relative;
    margin-top: clamp(12px, 2vh, 24px);
}

.collab-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--line-h);
}

.collab-line .collab-dots {
    fill: none;
    stroke: rgba(236, 230, 220, 0.3);
    stroke-dasharray: 1 7;
    stroke-linecap: round;
    stroke-width: 2px;
    vector-effect: non-scaling-stroke;
}

.collab-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(12px, 1.6vw, 24px);
    padding: 0;
    list-style: none;
}

.collab-step {
    display: grid;
    gap: 8px;
    align-content: start;
    justify-items: center;
    text-align: center;
}

/* The way comes out of the depth towards the reader: "Gespräch" far back and small, "Betreuung"
   right in front. Every drop flies in from the depth when its step is shown (it grows out of the
   distance; its middle stays where the being waits). */
.collab-drop {
    --size: calc(30px + var(--i) * 8px);

    position: relative;
    display: grid;
    place-items: center;
    width: var(--size);
    height: var(--size);
    margin: calc(var(--line-h) / 2 - var(--size) / 2) 0 18px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(236, 230, 220, 0.04), rgba(236, 230, 220, 0.01) 70%);
    box-shadow: inset 0 0 0 1px rgba(236, 230, 220, 0.3);
    translate: 0 calc((var(--y) - 50) / 100 * var(--line-h));
    transition: scale 0.9s var(--ease-spring) var(--sd, 0s), opacity 0.5s var(--ease-out) var(--sd, 0s);
}

html.reveal .collab-part:not(.is-told) .collab-step:not(.is-shown) .collab-drop {
    opacity: 0;
    scale: 0.15;
}

.collab-drop::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 34%, #fff 0 10%, rgba(236, 230, 220, 0.8) 34%, rgba(236, 230, 220, 0.1) 72%);
    box-shadow: 0 0 26px rgba(236, 230, 220, 0.4);
    opacity: 1;
    transition: opacity 0.9s var(--ease-out) calc(var(--sd, 0s) + 0.25s), scale 1s var(--ease-spring) calc(var(--sd, 0s) + 0.25s);
}

.collab-step--care .collab-drop::before {
    background: radial-gradient(circle at 40% 34%, #fff6e6 0 10%, var(--w-care) 38%, rgba(255, 181, 74, 0.12) 72%);
    box-shadow: 0 0 30px rgba(255, 181, 74, 0.5);
}

.collab-num {
    position: relative;
    color: #0a0c10;
    font-family: var(--font-data);
    font-size: 0.72rem;
    font-weight: 600;
    transition: opacity 0.6s var(--ease-out) calc(var(--sd, 0s) + 0.25s);
}

html.reveal .collab-part:not(.is-told) .collab-step:not(.is-shown) .collab-drop::before {
    opacity: 0;
    scale: 0.5;
}

html.reveal .collab-part:not(.is-told) .collab-step:not(.is-shown) .collab-num {
    opacity: 0;
}

.collab-name {
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 400;
    line-height: 1.1;
}

.collab-step-text {
    color: var(--fg-2);
    font-size: 0.95rem;
    line-height: 1.55;
}

.collab-decision {
    display: grid;
    gap: 2px;
    margin-top: 4px;
    color: var(--fg-3);
    font-size: 0.82rem;
}

.collab-decision-label {
    font-family: var(--font-data);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.collab-decision b {
    color: var(--fg);
    font-family: var(--font-voice);
    font-size: 1rem;
    font-style: italic;
    font-weight: 420;
    letter-spacing: 0.01em;
}

.collab-step--care .collab-decision b {
    color: var(--w-care);
}

html.reveal .collab-part:not(.is-told) .collab-step:not(.is-shown) :is(.collab-name, .collab-step-text, .collab-decision) {
    opacity: 0;
    translate: 0 10px;
}

.collab-step :is(.collab-name, .collab-step-text, .collab-decision) {
    transition: opacity 0.6s var(--ease-out) calc(var(--sd, 0s) + 0.1s), translate 0.8s var(--ease-out) calc(var(--sd, 0s) + 0.1s);
}

.collab-care {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: center;
    margin-top: clamp(28px, 4vh, 48px);
    color: var(--fg);
    font-family: var(--font-voice);
    font-size: calc(var(--step-2) * 0.94);
    font-style: italic;
    font-weight: 420;
    letter-spacing: 0.01em;
    text-align: center;
}

.collab-care-light {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff6e6 0 20%, var(--w-care) 50%, rgba(255, 181, 74, 0) 80%);
    box-shadow: 0 0 18px rgba(255, 181, 74, 0.6);
}

.collab-part > .next-slot {
    justify-content: center;
}

/* =============================================================================================
   11 Voices: a constellation of customer experiences
   ============================================================================================= */

.voices {
    --c: var(--w-care);

    padding: clamp(40px, 7vh, 88px) var(--edge) clamp(24px, 4vh, 48px);
}

.voices-part {
    max-width: var(--frame);
    margin-inline: auto;
}

.voices-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 1.1fr);
    gap: clamp(20px, 4vw, 64px);
    align-items: center;
    padding-inline-start: var(--seat);
}

.voices-title {
    max-width: 12em;
}

.voices-title em {
    color: var(--w-care);
}

.voices-figure {
    width: 100%;
    max-width: 620px;
    margin-inline: auto;
    text-align: center;
}

.voices-figure .world-caption {
    max-width: 30em;
    margin: 14px auto 0;
}

.score {
    position: relative;
    height: 270px;
    isolation: isolate;
}

.score-arc {
    position: absolute;
    inset: 24px 4% auto;
    height: 132px;
}

.score-star {
    position: absolute;
    top: var(--y);
    left: var(--x);
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    translate: -50% -50%;
}

.score-star svg {
    position: relative;
    width: 42px;
    height: 42px;
    overflow: visible;
}

.score-matte {
    fill: color-mix(in oklab, var(--w-care) 21%, #17202b);
}

.score-lit {
    clip-path: inset(0 calc(100% - var(--f)) 0 0);
    fill: #ffe4ad;
    transform-origin: center;
    transition: opacity 0.55s var(--ease-out), scale 0.65s var(--ease-out);
}

.score-halo {
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 222, 157, 0.4), rgba(249, 192, 108, 0.14) 25%, transparent 66%);
    transition: opacity 0.6s var(--ease-out), scale 0.7s var(--ease-out);
}

.score-value {
    position: absolute;
    inset: 124px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    color: var(--fg-2);
    transition: opacity 0.5s var(--ease-out), translate 0.6s var(--ease-out);
}

.score-value b {
    display: block;
    width: 3.3ch;
    contain: layout paint;
    color: #ffe4ad;
    font-family: var(--font-display);
    font-size: clamp(4rem, 6vw, 6.4rem);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
    text-align: center;
}

.score-value > span {
    font-family: var(--font-data);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

html.reveal .score-star:not(.is-awake) :is(.score-lit, .score-halo) {
    opacity: 0;
    scale: 0.65;
}

html.reveal .score:not(.is-counted) .score-value {
    opacity: 0;
    translate: 0 12px;
}

.voices-intro {
    max-width: 57rem;
    margin-block: clamp(30px, 4vh, 48px) 28px;
    padding-inline-start: var(--seat);
}

.voices-track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 28px);
    align-items: start;
}

.voices-featured:not(.is-carousel) [data-initial] {
    order: -1;
}

.voices-featured,
.voices-proof {
    margin-inline-start: var(--seat);
}

.voices-featured {
    --voice-width: min(34rem, calc(100cqw - 64px));

    container-type: inline-size;
}

.is-carousel .voices-track {
    position: relative;
    display: flex;
    gap: 24px;
    align-items: flex-start;
    overflow: auto hidden;
    padding: 20px calc((100% - var(--voice-width)) / 2);
    scroll-padding-inline: calc((100% - var(--voice-width)) / 2);
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    overflow-anchor: none;
}

.is-carousel .voices-track::-webkit-scrollbar {
    display: none;
}

.is-carousel .voice {
    flex: 0 0 var(--voice-width);
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

.voice {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    padding: clamp(22px, 2.3vw, 32px);
    border-radius: 36px;
    background: radial-gradient(120% 90% at 0% 0%, color-mix(in oklab, var(--c) 13%, transparent), transparent 60%), rgba(12, 15, 21, 0.8);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c) 22%, transparent);
    transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}

.is-carousel .voice:not(.is-current) {
    cursor: pointer;
    opacity: 0.55;
    transform: scale(0.94);
    transform-origin: 50% 0;
}

.is-carousel .voice.is-current::before {
    opacity: 1;
}

.voice::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(100% 100% at 25% 0%, color-mix(in oklab, var(--c) 14%, transparent), transparent 75%);
    content: "";
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--ease-out);
}

@media (hover: hover) {
    .voice:hover {
        transform: translateY(-5px);
    }

    .voice:hover::before {
        opacity: 1;
    }
}

.voice:focus-within::before {
    opacity: 1;
}

.voice-product {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
    color: color-mix(in oklab, var(--c) 64%, white);
    font-family: var(--font-data);
    font-size: 0.75rem;
    line-height: 1.5;
}

.voice-product span + span {
    color: var(--fg-3);
    font-size: 0.7rem;
}

.voice-quote {
    margin: 20px 0 24px;
    color: var(--fg);
    font-family: var(--font-voice);
    font-size: clamp(1.15rem, 1rem + 0.3vw, 1.35rem);
    font-style: italic;
    font-weight: 400;
    line-height: 1.5;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.voice-reading {
    width: 100%;
}

.voice-translation {
    margin-top: 12px;
}

.voice-translation > summary {
    display: flex;
    align-items: center;
    width: fit-content;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid color-mix(in oklab, var(--c) 28%, transparent);
    border-radius: 24px;
    color: var(--fg-2);
    cursor: pointer;
    font-size: 0.78rem;
    list-style: none;
}

.voice-translation > summary::-webkit-details-marker {
    display: none;
}

.voice-original-label,
.voice-translation[open] .voice-translate-label,
.voice-reading:has(.voice-translation[open]) > .voice-original {
    display: none;
}

.voice-translation[open] .voice-original-label {
    display: inline;
}

.voice-translation-label {
    margin-top: 14px;
    color: var(--fg-3);
    font-size: 0.72rem;
}

.voice-translated .voice-quote {
    margin-top: 10px;
}

.voice-person {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: auto;
}

.voice-mark {
    display: grid;
    flex: none;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 27%, color-mix(in oklab, var(--c) 30%, white), transparent 25%), radial-gradient(circle, color-mix(in oklab, var(--c) 22%, #0b0f15), color-mix(in oklab, var(--c) 40%, #0c121a));
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c) 55%, transparent);
    color: var(--fg);
    font-family: var(--font-display);
    font-size: 1.1rem;
}

/* The initials in the middle of their ball (team and reviews): their line is trimmed to the capitals.
   Newsreader keeps room below the baseline, so the letters stood about 0.11 em high (Maurice, 2026-10-29). */
:is(.person-mark, .voice-mark) > span {
    line-height: 1;
    text-box: trim-both cap alphabetic;
}

@supports not (text-box: trim-both cap alphabetic) {
    :is(.person-mark, .voice-mark) > span {
        translate: 0 0.11em;
    }
}

.voice-name {
    color: var(--fg);
    font-family: var(--font-text);
    font-size: 0.95rem;
    font-weight: 500;
}

.voice-person time {
    display: block;
    margin-top: 3px;
    color: var(--fg-3);
    font-size: 0.76rem;
}

.voice-origin {
    margin: 12px 0 0;
    color: var(--fg-3);
    font-size: 0.8rem;
    line-height: 1.5;
}

.voice-source {
    min-height: 44px;
    margin-top: 10px;
    font-size: 0.82rem;
}

html.reveal .voices-featured .voice {
    transition: opacity 0.6s var(--ease-out) var(--vd, 0s), translate 0.7s var(--ease-out) var(--vd, 0s), transform 0.3s var(--ease-out);
}

html.reveal .voices-featured .voice:not(.is-shown) {
    opacity: 0;
    translate: 0 18px;
}

.voices-controls {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    width: var(--voice-width);
    margin-inline: auto;
}

.voices-controls[hidden] {
    display: none;
}

.voices-arrow {
    display: grid;
    flex: none;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1px solid color-mix(in oklab, var(--w-care) 32%, transparent);
    border-radius: 50%;
    background: color-mix(in oklab, var(--w-care) 6%, transparent);
    color: var(--fg);
    cursor: pointer;
    transition: transform 0.2s var(--ease-out), opacity 0.2s var(--ease-out);
}

.voices-arrow:hover {
    transform: scale(1.08);
}

.voices-arrow[aria-disabled="true"] {
    cursor: default;
    opacity: 0.35;
    transform: none;
}

.voices-position {
    color: var(--fg-2);
    font-family: var(--font-data);
    font-size: 0.76rem;
    font-variant-numeric: tabular-nums;
}

.voices-arrow:focus-visible,
.voice-translation > summary:focus-visible,
.voice-source:focus-visible,
.voices-links a:focus-visible {
    outline: 2px solid var(--w-care);
    outline-offset: 5px;
}

.voices-proof {
    margin-top: 28px;
}

.voices-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
}

.voices-links a {
    min-height: 44px;
}

.voices-notice {
    max-width: 85ch;
    margin-top: 12px;
    color: var(--fg-3);
    font-size: 0.82rem;
    line-height: 1.65;
}

.voices-notice strong {
    color: var(--fg-2);
    font-weight: 500;
}

.voices-part > .next-slot {
    justify-content: center;
}

/* =============================================================================================
   12 Closing: which world is yours?
   ============================================================================================= */

.closing {
    padding: clamp(40px, 7vh, 88px) var(--edge) clamp(64px, 10vh, 128px);
}

.closing-part {
    max-width: var(--frame);
    margin-inline: auto;
}

.closing-stage {
    display: grid;
    gap: clamp(16px, 2.6vh, 32px);
    align-content: center;
    justify-items: center;
    text-align: center;
}

.closing-head {
    padding-top: var(--seat-top);
}

.closing-title {
    max-width: 16em;
}

.choice {
    display: grid;
    gap: clamp(18px, 2.6vh, 30px);
    justify-items: center;
    width: 100%;
}

.choice-arc {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(10px, 2.2vw, 30px);
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: clamp(28px, 5vh, 56px) 0 0;
    border: 0;
}

.choice-drop {
    position: relative;
    display: grid;
    gap: 10px;
    justify-items: center;
    width: clamp(84px, 9vw, 132px);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* The long name on wide windows, the short one where the room is tight (see the media rules). */
.choice-short {
    display: none;
}

.choice-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.choice-orb {
    position: relative;
    width: clamp(64px, 7vw, 104px);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 27% 21%, color-mix(in oklab, var(--c) 40%, white) 0 2.4%, transparent 9%),
        radial-gradient(circle at 50% 56%, color-mix(in oklab, var(--c) 24%, #0b0f15) 0%, color-mix(in oklab, var(--c) 10%, #07090d) 54%, color-mix(in oklab, var(--c) 48%, #0c121a) 100%);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c) 55%, transparent), 0 0 30px color-mix(in oklab, var(--c) 18%, transparent);
    transition: scale 0.6s var(--ease-spring), box-shadow 0.6s var(--ease-out);
}

.choice-drop--other .choice-orb {
    background: radial-gradient(circle at 50% 56%, rgba(236, 230, 220, 0.03), transparent 70%);
    box-shadow: inset 0 0 0 1px rgba(236, 230, 220, 0.3), 0 0 24px rgba(236, 230, 220, 0.06);
}

.choice-name {
    color: color-mix(in oklab, var(--c) 40%, var(--fg));
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.25;
}

@media (hover: hover) {
    .choice-drop:hover .choice-orb {
        scale: 1.06;
    }
}

.choice-drop:has(.choice-input:checked) .choice-orb {
    box-shadow: inset 0 0 0 2px var(--c), 0 0 0 4px color-mix(in oklab, var(--c) 30%, transparent), 0 0 46px color-mix(in oklab, var(--c) 46%, transparent);
    scale: 1.08;
}

.choice-drop:has(.choice-input:focus-visible) .choice-orb {
    outline: 2px solid var(--c);
    outline-offset: 6px;
}

.closing-text {
    max-width: 36rem;
}

.closing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    align-items: center;
    justify-content: center;
}

.choice-chosen {
    color: color-mix(in oklab, var(--c, var(--fg)) 70%, white);
    font-family: var(--font-data);
    font-size: 0.86rem;
}

.closing-quiet {
    display: grid;
    gap: 6px;
    justify-items: center;
    margin-top: 8px;
    color: var(--fg-3);
}

/* As tall as the links below it: a whole 44 px target, the address stays on the label's line. */
.closing-mail a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--fg);
    font-family: var(--font-data);
    font-size: 0.92rem;
}

.closing-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0 24px;
    justify-content: center;
    padding: 0;
    list-style: none;
}

/* =============================================================================================
   The map of the worlds
   ============================================================================================= */

.atlas {
    position: fixed;
    z-index: 900;
}

::view-transition-group(atlas) {
    animation: none;
}

.no-js .atlas {
    display: none;
}

/* The ring (Maurice's choice "Weltenring", 2026-10-21): the orbit of the opening in miniature at the
   bottom right. Its plane is tilted into the room and turns the world in view to its front (--turn
   on .atlas, set by atlas.js, the shortest way round); every dot is turned back to the reader, so
   it stays round. Front dots come nearer (perspective) and brighter, the back ones fade. */
.atlas-ring {
    --size: 112px;
    --tilt: 64deg;
    --label: 15rem;

    position: fixed;
    right: max(18px, env(safe-area-inset-right, 0px));
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    display: block;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--fg);
    font: inherit;
    text-align: right;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    translate: 0 18px;
    scale: 0.92;
    view-transition-name: atlas;
    transition: opacity 0.5s var(--ease-out), translate 0.7s var(--ease-out), scale 0.7s var(--ease-spring);
    -webkit-tap-highlight-color: transparent;
}

/* A soft darkness behind ring and name keeps both readable over the page. */
.atlas-ring::before {
    content: "";
    position: absolute;
    inset: -34px -26px -26px calc(-1 * var(--label) - 70px);
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(7, 9, 13, 0.86), rgba(7, 9, 13, 0.6) 55%, transparent);
    pointer-events: none;
}

.atlas[data-mode="hidden"] .atlas-ring {
    visibility: hidden;
    transition: opacity 0.5s var(--ease-out), translate 0.7s var(--ease-out), scale 0.7s var(--ease-spring), visibility 0s linear 0.7s;
}

/* Wide margins: the ring always stands. Narrower: it shows itself while the visitor travels (and
   whenever it has the keyboard focus or its map is open). */
.atlas[data-mode="ring"] .atlas-ring,
.atlas[data-mode="float"].is-shown .atlas-ring,
.atlas[data-mode="float"] .atlas-ring:focus-visible,
.atlas.is-open .atlas-ring {
    opacity: 1;
    pointer-events: auto;
    translate: none;
    scale: 1;
}

/* A floating ring yields immediately when a quotation reaches it; focus still opens the map. */
.atlas[data-mode="float"].is-covered:not(.is-open) .atlas-ring:not(:focus-visible) {
    opacity: 0;
    pointer-events: none;
    transition-duration: 0s !important;
}

/* Beside the ring, out of its box and with a width of its own: a new name never moves the ring
   (no layout shift). The count line keeps its height when a place has none. */
.ring-label {
    position: absolute;
    top: 50%;
    right: calc(100% + 14px);
    display: grid;
    gap: 3px;
    width: var(--label);
    text-align: right;
    white-space: nowrap;
    translate: 0 -50%;
    transition: opacity 0.18s ease;
}

.atlas-ring.is-renaming .ring-label {
    opacity: 0;
}

.ring-count {
    min-height: 1lh;
    color: var(--fg-3);
    font-family: var(--font-data);
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ring-name {
    color: var(--fg);
    font-size: 0.95rem;
    font-weight: 500;
}

.ring {
    position: relative;
    display: block;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    perspective: calc(var(--size) * 2.6);
    transition: scale 0.5s var(--ease-spring);
}

@media (hover: hover) {
    .atlas-ring:hover .ring {
        scale: 1.06;
    }
}

.atlas-ring:focus-visible {
    outline: none;
}

.atlas-ring:focus-visible .ring {
    outline: 2px solid var(--focus);
    outline-offset: 4px;
}

.ring-plane {
    position: absolute;
    inset: 0;
    transform: rotateX(var(--tilt)) rotateZ(var(--turn, 0deg));
    transform-style: preserve-3d;
    transition: transform 0.9s var(--ease-in-out);
}

.ring-path {
    position: absolute;
    inset: 7%;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(236, 230, 220, 0.26);
}

/* A dot: placed round the plane, turned back to the reader. Its box holds dot and halo, so nothing
   reaches out of it to the left or top (Chrome cuts that off inside a 3D context). */
.ring-world {
    --phi: calc(var(--k) * 60deg + 90deg);
    --r: calc(var(--size) * 0.43);

    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    opacity: calc(0.6 + sin(var(--phi) + var(--turn, 0deg)) * 0.4);
    transform: rotateZ(var(--phi)) translateX(var(--r)) rotateZ(calc(var(--phi) * -1 - var(--turn, 0deg))) rotateX(calc(var(--tilt) * -1));
    transform-style: preserve-3d;
    transition: transform 0.9s var(--ease-in-out), opacity 0.9s var(--ease-in-out);
}

.ring-world i {
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.4px var(--c);
    transition: scale 0.6s var(--ease-spring);
}

/* Filled once the world is told (or in view). */
.ring-world i::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, color-mix(in oklab, var(--c) 35%, white) 0 18%, var(--c) 62%);
    opacity: 0;
    transition: opacity 0.6s var(--ease-out);
}

.ring-world::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in oklab, var(--c) 60%, transparent) 35%, transparent);
    opacity: 0;
    transition: opacity 0.6s var(--ease-out);
}

.ring-world.is-visited i::before,
.ring-world.is-here i::before,
.ring-world.is-here::after {
    opacity: 1;
}

.ring-world.is-here i {
    scale: 1.5;
}

/* A world wakes: its dot lights up once (scale and the halo's opacity). */
.ring-world.is-waking i {
    animation: map-flash 1.5s var(--ease-out);
}

.ring-world.is-waking::after {
    animation: map-halo 1.5s var(--ease-out);
}

@keyframes map-flash {
    35% {
        scale: 2;
    }
}

@keyframes map-halo {
    35% {
        opacity: 1;
    }
}

/* The guiding star in the middle: flat, it does not turn with the plane. */
.ring-star {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20%;
    height: 20%;
    fill: #fff;
    filter: drop-shadow(0 0 4px rgba(236, 230, 255, 0.7));
    translate: -50% -58%;
}

/* The map (a modal dialog): the six worlds on their orbit, the one in view in front, the places
   after them and the switch. Wide windows: a round panel rising from the ring; phones: a sheet. */
.atlas-map {
    position: fixed;
    inset: auto max(18px, env(safe-area-inset-right, 0px)) calc(18px + env(safe-area-inset-bottom, 0px)) auto;
    width: min(580px, calc(100vw - 36px));
    max-height: calc(100dvh - 36px);
    margin: 0;
    padding: 22px 24px 20px;
    overflow: auto;
    border: 0;
    border-radius: 40px;
    background: radial-gradient(130% 110% at 100% 100%, #0e131a, #090c11 70%);
    box-shadow: inset 0 0 0 1px rgba(236, 230, 220, 0.09), 0 40px 90px -30px rgba(0, 0, 0, 0.95);
    color: var(--fg);
    overscroll-behavior: contain;
    transform-origin: 100% 100%;
}

.atlas-map[open] {
    animation: map-in 0.45s var(--ease-out);
}

/* Browsers without <dialog> know no closed state of their own (atlas.js toggles the attribute). */
.atlas-map:not([open]) {
    display: none;
}

.atlas-map::backdrop {
    background: rgba(3, 5, 8, 0.5);
}

@keyframes map-in {
    from {
        opacity: 0;
        translate: 0 16px;
        scale: 0.92;
    }
}

.map-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.map-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 400;
}

.map-close {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(236, 230, 220, 0.06);
    color: var(--fg);
    cursor: pointer;
}

.map-close svg {
    width: 20px;
    height: 20px;
}

/* The orbit of the map: the same turn as the ring, so the world in view stands in front. Tall
   enough that the two worlds on each side keep their names apart. */
.map-orbit {
    --ry: 33%;

    position: relative;
    height: 330px;
    margin: 0 0 6px;
}

.map-path {
    position: absolute;
    top: 50%;
    right: 9%;
    left: 9%;
    height: calc(var(--ry) * 2);
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(236, 230, 220, 0.16);
    translate: 0 -50%;
}

.map-worlds {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.map-world {
    --phi: calc(var(--k) * 60deg + 90deg + var(--turn, 0deg));

    position: absolute;
    top: calc(50% + sin(var(--phi)) * var(--ry));
    left: calc(50% + cos(var(--phi)) * 41%);
    scale: calc(0.86 + sin(var(--phi)) * 0.14);
    translate: -50% -50%;
}

.map-item {
    display: grid;
    gap: 8px;
    justify-items: center;
    min-width: 92px;
    min-height: 44px;
    padding: 6px;
    border-radius: 22px;
    color: var(--fg-2);
    font-size: 0.86rem;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    transition: color 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}

.map-item:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.map-item[aria-current],
.map-item:hover {
    color: var(--fg);
}

.map-drop {
    position: relative;
    display: block;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 27% 21%, color-mix(in oklab, var(--c) 40%, white) 0 2.4%, transparent 9%),
        radial-gradient(circle at 50% 56%, color-mix(in oklab, var(--c) 22%, #0b0f15) 0%, color-mix(in oklab, var(--c) 10%, #07090d) 54%, color-mix(in oklab, var(--c) 46%, #0c121a) 100%);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c) 55%, transparent);
    transition: scale 0.4s var(--ease-spring);
}

/* The world in view carries its light (a halo of its own, no animated shadow). */
.map-drop::after {
    content: "";
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    background: radial-gradient(closest-side, transparent 64%, color-mix(in oklab, var(--c) 40%, transparent) 72%, transparent);
    opacity: 0;
}

.map-item[aria-current] .map-drop::after {
    opacity: 1;
}

@media (hover: hover) {
    .map-item:hover .map-drop {
        scale: 1.08;
    }
}

.map-short {
    display: none;
}

.map-places {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.map-item--place {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: flex-start;
    min-height: 48px;
    padding: 0 16px;
    border-radius: 99px;
    font-size: 0.95rem;
    text-align: left;
}

.map-item--place[aria-current] {
    background: rgba(236, 230, 220, 0.06);
}

.map-dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(236, 230, 220, 0.45);
}

.map-foot {
    display: grid;
    gap: 6px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(236, 230, 220, 0.08);
}

.map-guide {
    display: inline-flex;
    gap: 12px;
    align-items: center;
    justify-self: start;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--fg);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.map-guide:focus-visible {
    border-radius: 12px;
    outline: 2px solid var(--focus);
    outline-offset: 4px;
}

.map-hint {
    margin: 0;
    color: var(--fg-3);
    font-size: 0.86rem;
    line-height: 1.5;
}

.guide-track {
    position: relative;
    display: block;
    flex: none;
    width: 30px;
    height: 18px;
    border-radius: 99px;
    background: rgba(236, 230, 220, 0.12);
    box-shadow: inset 0 0 0 1px rgba(236, 230, 220, 0.25);
    transition: background-color 0.3s ease;
}

.guide-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--fg-3);
    transition: translate 0.35s var(--ease-out), background-color 0.3s ease;
}

[aria-checked="true"] .guide-track {
    background: rgba(255, 181, 74, 0.28);
}

[aria-checked="true"] .guide-knob {
    background: var(--w-care);
    box-shadow: 0 0 8px var(--w-care);
    translate: 12px 0;
}

/* =============================================================================================
   Responsive: wide windows keep their space for the map; below 900 px everything stacks and the
   being moves above and between the blocks instead of beside them.
   ============================================================================================= */

/* Tablet across (900 to 1279 px): the proof moves below the drop, so the text has its column to
   itself and a world fits one screen: title, text and handover beside the picture and its proof. */
@media (min-width: 900px) and (max-width: 1279px) {
    .voices-stage {
        gap: 24px;
    }

    .voices-track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .world-stage {
        grid-template:
            "head picture" auto
            "text picture" 1fr
            "handover proof" auto
            "next proof" auto / minmax(0, 1.05fr) minmax(0, 0.95fr);
        row-gap: 0;
        align-items: start;
    }

    .world[data-side="left"] .world-stage {
        grid-template:
            "picture head" auto
            "picture text" 1fr
            "proof handover" auto
            "proof next" auto / minmax(0, 0.95fr) minmax(0, 1.05fr);
    }

    .world-copy {
        display: contents;
    }

    .world-head,
    .world-text,
    .world-handover,
    .world-copy .next-slot {
        max-width: 40rem;
        padding-inline-start: var(--seat);
    }

    .world-head {
        grid-area: head;
    }

    .world-text {
        grid-area: text;
    }

    .world-handover {
        grid-area: handover;
    }

    .world-copy .next-slot {
        grid-area: next;
    }

    .world-picture {
        grid-area: picture;
    }

    .world-proof {
        grid-area: proof;
        margin-top: 18px;
    }
}

/* Below the full header the choice names its worlds short (Software, KI …), as the orbit always does. */
@media (max-width: 75em) {
    .choice-long {
        display: none;
    }

    .choice-short {
        display: inline;
    }
}

@media (max-width: 899px) {
    .voices-stage {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        padding-inline-start: 0;
    }

    .voices-head {
        padding-top: var(--seat-top);
    }

    .voices-title {
        max-width: 15em;
        font-size: clamp(1.9rem, 1.1rem + 4vw, 2.6rem);
    }

    .voices-intro {
        /* The scroll hint needs room for both the body and the two chevrons. */
        margin-top: calc(var(--seat-top) + 24px);
        padding-inline-start: 0;
    }

    .voices-track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .voices-featured,
    .voices-proof {
        margin-inline-start: 0;
    }

    .voices-featured {
        margin-block-start: var(--seat-top);
    }

    .score {
        height: 240px;
    }

    .score-value b {
        font-size: 5rem;
    }

    .home {
        --seat: 0px;

        /* The being (about 40 px with its glow) and 12 px above each line it introduces, clear of the
           line before (2026-10-23: since it is larger, 50 px let its light touch both lines). */
        --seat-top: 60px;
    }

    .opening {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        align-content: start;
        min-height: 0;
        padding-top: calc(var(--site-header-h, 64px) + 12px);
        padding-bottom: 48px;
    }

    .opening-copy {
        display: contents;
    }

    .opening-title {
        order: 1;
        padding-top: var(--seat-top);
        margin-bottom: 0;
        font-size: clamp(2.25rem, 1.2rem + 5.6vw, 3.4rem);
    }

    .opening-figure {
        order: 2;
    }

    .opening-text {
        order: 3;
        margin-top: calc(var(--seat-top) - 12px);
        margin-bottom: 4px;
    }

    .opening-actions {
        order: 4;
    }

    .opening-actions .btn {
        min-height: 48px;
    }

    .constellation {
        width: min(100%, 440px, calc((100svh - 450px) * 1.3));
        min-width: min(100%, 300px);
    }

    .star {
        --s: clamp(40px, 11vw, 58px);
    }

    .star-name {
        font-size: 0.78rem;
    }

    .world {
        padding-block: 28px;
    }

    .world-stage {
        display: flex;
        flex-direction: column;
        gap: 0;
        align-items: stretch;
        min-height: 0;
    }

    .world-copy {
        display: contents;
    }

    .world-head {
        order: 1;
        margin-bottom: 18px;
        padding-top: var(--seat-top);
    }

    /* Stacked, the title always comes first, also where the drop stands left on wide windows. */
    .world-picture,
    .world[data-side="left"] .world-picture {
        order: 2;
    }

    .world-text {
        order: 3;
        margin-top: var(--seat-top);
    }

    .world-proof {
        order: 4;
    }

    .world-handover {
        order: 5;
        margin-top: calc(var(--seat-top) - 18px);
    }

    .world-copy .next-slot {
        order: 6;
        padding-left: 52px;
    }

    /* Title, drop and caption fit one screen: on short screens the drop gives way (never below 240 px). */
    .world-figure {
        width: min(100%, 520px, max(240px, calc(100svh - var(--site-header-h, 64px) - 290px)));
    }

    .world-title,
    .connections-title,
    .team-title,
    .collab-title,
    .closing-title {
        font-size: clamp(1.9rem, 1.1rem + 4vw, 2.6rem);
    }

    .connections-stage {
        min-height: 0;
    }

    /* The ring lies in the room on phones too: wider than tall. */
    .links {
        max-height: none;
        aspect-ratio: 1 / 0.82;
    }

    .links-labels {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        margin-top: 12px;
    }

    .links-label {
        justify-items: start;
        text-align: left;
    }

    .connections-close {
        padding-inline-start: 0;
    }

    .connections-facts {
        grid-template-columns: minmax(0, 1fr);
    }

    .team-stage,
    .collab-stage,
    .closing-stage {
        min-height: 0;
    }

    .team-head,
    .collab-head {
        padding-top: var(--seat-top);
    }

    .eyes {
        aspect-ratio: 1 / 0.86;
    }

    .ey-sight {
        display: none;
    }

    .ey-model {
        --w: 50cqi;
        --h: 38cqi;
        --d: 30cqi;
        --apart: 0.56;
        --face: 38deg;
        --shrink: 0.6;
    }

    .ey-eye {
        top: 9%;
        left: 9%;
    }

    .ey-eye--tech {
        left: 91%;
    }

    .choice-long {
        display: none;
    }

    .choice-short {
        display: inline;
    }

    .team-intro {
        margin-top: var(--seat-top);
    }

    .team-people {
        grid-template-columns: minmax(0, 1fr);
    }

    .team-part > .next-slot {
        padding-left: 52px;
    }

    .collab-text {
        margin-top: 4px;
    }

    .collab-path {
        --line-h: 0px;
    }

    .collab-line {
        display: none;
    }

    .collab-steps {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .collab-step {
        position: relative;
        grid-template-columns: 44px minmax(0, 1fr);
        column-gap: 18px;
        justify-items: start;
        padding-bottom: 26px;
        text-align: left;
    }

    .collab-step::before {
        content: "";
        position: absolute;
        top: 44px;
        bottom: 0;
        left: 21px;
        width: 2px;
        background: repeating-linear-gradient(rgba(236, 230, 220, 0.22) 0 2px, transparent 2px 8px);
    }

    .collab-step:last-child::before {
        display: none;
    }

    .collab-drop {
        --size: calc(30px + var(--i) * 3.5px);

        grid-row: 1 / span 3;
        justify-self: center;
        margin: 0;
        translate: none;
    }

    .collab-step > :not(.collab-drop) {
        grid-column: 2;
    }

    .collab-care {
        flex-wrap: wrap;
    }

    .collab-part > .next-slot {
        justify-content: flex-start;
        padding-left: 52px;
    }

    .choice-arc {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 18px 8px;
        padding-top: 18px;
    }

    .choice-drop {
        width: 100%;
        translate: 0 calc(sin(var(--i) / 3 * 180deg) * -10px);
    }

    .choice-drop:nth-child(n + 6) {
        translate: 0 0;
    }

    .choice-orb {
        width: clamp(52px, 15vw, 72px);
    }

    .choice-name {
        font-size: 0.8rem;
    }
}

@media (max-width: 380px) {
    .voice {
        padding: 22px;
        border-radius: 28px;
    }

    .score-star {
        width: 48px;
        height: 48px;
    }

    .score-star svg {
        width: 32px;
        height: 32px;
    }

    .choice-arc {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .opening-actions .btn {
        width: 100%;
    }
}

@media (max-width: 699px) {
    .voices-track {
        grid-template-columns: minmax(0, 1fr);
    }

    .voices-featured {
        --voice-width: calc(100cqw - 64px);
    }

    .is-carousel .voices-track {
        gap: 12px;
    }

    .voice {
        padding: 22px;
        border-radius: 28px;
    }

    .voices-handover {
        justify-content: flex-start;
        margin-top: var(--seat-top);
        font-size: 1.45rem;
    }

    .voices-links {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .atlas-ring {
        --size: 84px;
        --label: 11rem;

        right: max(12px, env(safe-area-inset-right, 0px));
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }

    .ring-name {
        font-size: 0.88rem;
    }

    .atlas-map {
        inset: auto 0 0;
        width: 100%;
        max-height: min(88svh, 760px);
        padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
        border-radius: 30px 30px 0 0;
        transform-origin: 50% 100%;
    }

    .map-orbit {
        --ry: 32%;

        height: 300px;
    }

    .map-world {
        left: calc(50% + cos(var(--phi)) * 38%);
    }

    .map-item {
        min-width: 64px;
        font-size: 0.82rem;
    }

    .map-drop {
        width: 46px;
        height: 46px;
    }

    /* The short name shows; the long one stays the name of the link (read, not shown). */
    .map-long {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .map-short {
        display: block;
    }

    .map-places {
        gap: 2px 6px;
    }

    .map-item--place {
        padding: 0 12px;
    }
}

@media (max-height: 640px) and (min-width: 900px) {
    .constellation {
        width: min(100%, 520px);
    }
}

/* =============================================================================================
   Preferences
   ============================================================================================= */

@media (prefers-reduced-motion: reduce) {
    .home *,
    .home *::before,
    .home *::after {
        animation: none !important;
        transition-duration: 0.01s !important;
        transition-delay: 0s !important;
    }

    /* Changes of state may cross-fade: the room, the map and the steps of a picture. The ring
       only fades; it neither moves nor turns. */
    .room-tint,
    .next,
    .atlas-ring {
        transition-duration: 0.6s !important;
    }

    .atlas-ring {
        translate: none !important;
        scale: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .voices :is(.voice, .score-lit, .score-halo, .score-value, .voices-arrow),
    .voices .voice::before {
        transition: none !important;
    }

}

@media (forced-colors: active) {
    .voice,
    .voices-arrow,
    .voice-translation > summary {
        border: 1px solid CanvasText;
    }

    .score-lit,
    .score-matte {
        fill: CanvasText;
    }

    .score-halo {
        display: none;
    }

    .score-value b {
        color: CanvasText;
    }

    .drop-body,
    .star-drop,
    .choice-orb {
        border: 1px solid CanvasText;
    }

    .stage,
    .room {
        display: none;
    }
}

@media print {
    .voices {
        --fg: #111;
        --fg-2: #222;
        --fg-3: #333;

        color: #111;
    }

    .voices :is(.voices-title em, .voice-product, .voice-mark, .review-stars, .score-value b) {
        color: #111;
    }

    .voice,
    .voice-mark {
        background: none;
        color: #111;
        box-shadow: none;
    }

    .voice::before,
    .score-halo {
        display: none;
    }

    .score-lit {
        fill: #111;
    }

    .voices-controls {
        display: none;
    }

    .is-carousel .voices-track {
        display: grid;
        grid-template-columns: 1fr;
        height: auto !important;
        padding: 0;
        overflow: visible;
    }

    .is-carousel .voice {
        opacity: 1;
        transform: none;
    }

    .voice {
        break-inside: avoid;
        border: 1px solid currentcolor;
    }

    html.reveal .voices :is(.voice, .score-value, .score-lit, .score-halo) {
        opacity: 1 !important;
        translate: none !important;
        scale: 1 !important;
    }

    .room,
    .stage,
    .atlas,
    .again,
    .next-slot {
        display: none !important;
    }

    html.reveal [data-beat],
    html.reveal .w {
        opacity: 1 !important;
        translate: none !important;
    }
}