/* /Components/Dreamfield/Dreamfield.razor.rz.scp.css */
.dreamfield[b-mdj3mc3vax] {
    --dreamspace-ambient-duration: 52s;
    --dreamspace-emphasized-duration: 8s;
    --dreamspace-approaching-duration: 18s;
    --dreamspace-active-sleep-duration: 42s;
    --dreamspace-transition-duration: 2.8s;
    --dreamspace-selection-duration: 720ms;
    --dreamspace-reduced-duration: 1ms;
    --dreamfield-sky-top: #0b1230;
    --dreamfield-sky-mid: #1a2050;
    --dreamfield-horizon: rgba(145, 151, 238, .24);
    --dreamfield-foreground: rgba(3, 6, 17, .94);
    --dreamfield-fog: rgba(142, 151, 228, .12);
    --dreamfield-focal-color: 191, 183, 255;
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    contain: strict;
    pointer-events: none;
    user-select: none;
    isolation: isolate;
    opacity: var(--dreamfield-overall-opacity, 1);
    background: var(--dreamfield-sky-top);
}

.dreamfield[b-mdj3mc3vax]::before,
.dreamfield[b-mdj3mc3vax]::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
}

/*
 * Foreground darkening is deliberately directional. An ellipse centred on the
 * horizon also darkens everything *above* it, and at 46% vertical radius the
 * whole upper sky landed past the last colour stop — a 94% opaque veil over the
 * layers that hold most of the stars. The ground body is a vertical gradient and
 * the vignette only closes the corners, so the open sky stays legible.
 */
.dreamfield[b-mdj3mc3vax]::before {
    z-index: 5;
    background:
        linear-gradient(180deg, transparent 0 58%, rgba(3, 6, 17, .3) 78%, var(--dreamfield-foreground) 100%),
        radial-gradient(ellipse 120% 104% at 50% 46%, transparent 0 58%, rgba(3, 6, 17, .28) 100%);
}

.dreamfield[b-mdj3mc3vax]::after {
    z-index: 6;
    background: linear-gradient(180deg, transparent 0 55%, var(--dreamfield-fog) 67%, rgba(3, 6, 17, .42) 82%, var(--dreamfield-foreground) 100%);
    mix-blend-mode: screen;
    opacity: .58;
}

.dreamfield-background[b-mdj3mc3vax],
[b-mdj3mc3vax] .dreamfield-background,
.dreamfield-star-layer[b-mdj3mc3vax],
[b-mdj3mc3vax] .dreamfield-star-layer,
.dreamfield-shooting-layer[b-mdj3mc3vax] {
    position: absolute;
    inset: 0;
}

[b-mdj3mc3vax] .dreamfield-background {
    overflow: hidden;
    background:
        radial-gradient(ellipse 70% 45% at 50% 64%, var(--dreamfield-horizon), transparent 76%),
        linear-gradient(180deg, var(--dreamfield-sky-top), var(--dreamfield-sky-mid) 54%, #080d1d 100%);
    opacity: .96;
    transition: background 1400ms cubic-bezier(.2, .7, .2, 1), opacity 1400ms cubic-bezier(.2, .7, .2, 1);
}

/*
 * The raster plate earns its place at the horizon: the mountain silhouette and
 * the atmosphere sitting on it are the one part of the scene that reads better
 * painted than generated. Its upper half does not — soft raster sky competing
 * with crisp code-native stars is what made the whole field look out of focus.
 * The mask keeps the mountains and lower atmosphere and lets the galaxy own the
 * upper sky.
 */
[b-mdj3mc3vax] .dreamfield-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    opacity: .44;
    filter: saturate(.94) brightness(.72) contrast(1.1);
    transform: scale(1.035);
    -webkit-mask-image: linear-gradient(180deg, transparent 0 34%, rgba(0, 0, 0, .45) 52%, #000 72%);
    mask-image: linear-gradient(180deg, transparent 0 34%, rgba(0, 0, 0, .45) 52%, #000 72%);
}

[b-mdj3mc3vax] .dreamfield-background-wash {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(8, 12, 30, .06) 0%, rgba(8, 12, 30, .17) 49%, rgba(2, 5, 15, .72) 100%),
        radial-gradient(ellipse at 50% 52%, transparent 0 31%, rgba(3, 6, 17, .34) 82%);
    transition: background 1400ms cubic-bezier(.2, .7, .2, 1);
}

[b-mdj3mc3vax] .dreamfield-atmosphere {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: .96;
    transition: opacity var(--dreamspace-transition-duration) cubic-bezier(.2, .7, .2, 1), filter var(--dreamspace-transition-duration) cubic-bezier(.2, .7, .2, 1);
}

/* Circadian modulation is additive to the sleep scene. The existing phase
 * selectors below remain later and therefore retain precedence while sleeping. */
.dreamfield[data-circadian-phase="night"][b-mdj3mc3vax] {
    --dreamfield-sky-top: color-mix(in srgb, #30294f var(--dreamfield-circadian-source-percent), #070d28 var(--dreamfield-circadian-target-percent));
    --dreamfield-sky-mid: color-mix(in srgb, #755b86 var(--dreamfield-circadian-source-percent), #151b49 var(--dreamfield-circadian-target-percent));
    --dreamfield-horizon: color-mix(in srgb, rgba(239, 188, 190, .42) var(--dreamfield-circadian-source-percent), rgba(151, 145, 242, .22) var(--dreamfield-circadian-target-percent));
    --dreamfield-focal-color: 192, 186, 255;
}

.dreamfield[data-circadian-phase="dawn"][b-mdj3mc3vax] {
    --dreamfield-sky-top: color-mix(in srgb, #070d28 var(--dreamfield-circadian-source-percent), #182957 var(--dreamfield-circadian-target-percent));
    --dreamfield-sky-mid: color-mix(in srgb, #151b49 var(--dreamfield-circadian-source-percent), #51659d var(--dreamfield-circadian-target-percent));
    --dreamfield-horizon: color-mix(in srgb, rgba(151, 145, 242, .22) var(--dreamfield-circadian-source-percent), rgba(198, 211, 255, .42) var(--dreamfield-circadian-target-percent));
    --dreamfield-focal-color: 213, 220, 255;
}

.dreamfield[data-circadian-phase="day"][b-mdj3mc3vax] {
    --dreamfield-sky-top: color-mix(in srgb, #182957 var(--dreamfield-circadian-source-percent), #566e9e var(--dreamfield-circadian-target-percent));
    --dreamfield-sky-mid: color-mix(in srgb, #51659d var(--dreamfield-circadian-source-percent), #95a7d1 var(--dreamfield-circadian-target-percent));
    --dreamfield-horizon: color-mix(in srgb, rgba(198, 211, 255, .42) var(--dreamfield-circadian-source-percent), rgba(239, 231, 213, .56) var(--dreamfield-circadian-target-percent));
    --dreamfield-focal-color: 245, 241, 224;
}

.dreamfield[data-circadian-phase="dusk"][b-mdj3mc3vax] {
    --dreamfield-sky-top: color-mix(in srgb, #566e9e var(--dreamfield-circadian-source-percent), #30294f var(--dreamfield-circadian-target-percent));
    --dreamfield-sky-mid: color-mix(in srgb, #95a7d1 var(--dreamfield-circadian-source-percent), #755b86 var(--dreamfield-circadian-target-percent));
    --dreamfield-horizon: color-mix(in srgb, rgba(239, 231, 213, .56) var(--dreamfield-circadian-source-percent), rgba(239, 188, 190, .42) var(--dreamfield-circadian-target-percent));
    --dreamfield-focal-color: 249, 209, 204;
}

.dreamfield[data-circadian-phase="day"][b-mdj3mc3vax]  .dreamfield-atmosphere {
    filter: saturate(.86) brightness(1.16);
}

.dreamfield[data-circadian-phase="dawn"][b-mdj3mc3vax]  .dreamfield-atmosphere {
    filter: saturate(.92) brightness(calc(1 + var(--dreamfield-circadian-blend, 0) * .12));
}

.dreamfield[data-circadian-phase="dusk"][b-mdj3mc3vax]  .dreamfield-atmosphere {
    filter: saturate(calc(1 + var(--dreamfield-circadian-blend, 0) * .12)) brightness(calc(1.06 - var(--dreamfield-circadian-blend, 0) * .12));
}

.dreamfield[data-circadian-phase="day"][b-mdj3mc3vax]  .dreamfield-star img,
.dreamfield[data-circadian-phase="day"][b-mdj3mc3vax]  .dreamfield-decorative-star {
    filter: saturate(.78) brightness(1.18) drop-shadow(0 0 4px rgba(255, 250, 229, .52));
}

.dreamfield[data-circadian-phase="dusk"][b-mdj3mc3vax]  .dreamfield-constellation {
    filter: sepia(.2) saturate(1.2) hue-rotate(292deg);
}

.dreamfield[data-circadian-phase="day"][b-mdj3mc3vax]  .dreamfield-constellation {
    filter: saturate(.58) brightness(1.25);
}

[b-mdj3mc3vax] .dreamfield-horizon-light,
[b-mdj3mc3vax] .dreamfield-nebula,
[b-mdj3mc3vax] .dreamfield-haze,
[b-mdj3mc3vax] .dreamfield-fog,
[b-mdj3mc3vax] .dreamfield-mountain,
[b-mdj3mc3vax] .dreamfield-foreground {
    position: absolute;
    pointer-events: none;
    will-change: transform, opacity;
}

[b-mdj3mc3vax] .dreamfield-constellation,
[b-mdj3mc3vax] .dreamfield-decorative-star {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    user-select: none;
    opacity: .22;
    mix-blend-mode: screen;
    filter: saturate(.72) brightness(1.2);
    animation: dreamfield-ambient-breathe-b-mdj3mc3vax 22s ease-in-out infinite alternate;
}

[b-mdj3mc3vax] .dreamfield-constellation--one { top: 12%; left: 8%; width: clamp(7rem, 16vw, 14rem); }
[b-mdj3mc3vax] .dreamfield-constellation--two { top: 24%; right: 10%; width: clamp(6rem, 14vw, 12rem); animation-delay: -7s; }
[b-mdj3mc3vax] .dreamfield-constellation--three { top: 43%; left: 32%; width: clamp(5rem, 11vw, 10rem); opacity: .14; animation-delay: -13s; }
[b-mdj3mc3vax] .dreamfield-decorative-star--one { top: 18%; left: 27%; width: 1.5rem; opacity: .66; animation-delay: -3s; }
[b-mdj3mc3vax] .dreamfield-decorative-star--two { top: 34%; right: 24%; width: 1.15rem; opacity: .56; animation-delay: -11s; }
[b-mdj3mc3vax] .dreamfield-decorative-star--three { top: 54%; left: 72%; width: .95rem; opacity: .48; animation-delay: -17s; }

@media (max-width: 600px) {
    /* Keep two distinct constellations in the compact composition. The third
       stays desktop-only so the rail/content lane remains quiet on phones. */
    [b-mdj3mc3vax] .dreamfield-constellation--three {
        display: none;
    }
    [b-mdj3mc3vax] .dreamfield-constellation--one { top: 11%; left: 4%; width: 8.5rem; opacity: .3; }
    [b-mdj3mc3vax] .dreamfield-constellation--two { top: 28%; right: 2%; width: 7.25rem; opacity: .24; }
}

@keyframes dreamfield-ambient-breathe-b-mdj3mc3vax {
    from { opacity: .12; transform: translate3d(calc(-.35% * var(--dreamspace-motion-spatial-multiplier, 1)), calc(.2% * var(--dreamspace-motion-spatial-multiplier, 1)), 0) scale(calc(1 - .015 * var(--dreamspace-motion-spatial-multiplier, 1))); }
    to { opacity: .26; transform: translate3d(calc(.35% * var(--dreamspace-motion-spatial-multiplier, 1)), calc(-.2% * var(--dreamspace-motion-spatial-multiplier, 1)), 0) scale(calc(1 + .015 * var(--dreamspace-motion-spatial-multiplier, 1))); }
}

/*
 * ---- Galaxy ----
 *
 * The scene used to rely on two blurred nebula washes for its sense of depth,
 * and on device that read as haze rather than as anything in particular. This
 * is a specific object instead: one asymmetric band crossing the sky on a
 * diagonal, with an off-centre core, a thinner outer arm, dark dust lanes, and
 * the granular density of stars too small to resolve.
 *
 * Nothing here is blurred. Gradients are already resolution-independent, so the
 * structure stays sharp at any device pixel ratio, and the stipple keeps its
 * individual points. Colour stays disciplined: indigo and silver carry the
 * form, with only a trace of lavender and a small muted gold accent near the
 * core. It must read as a galaxy at a glance and then get out of the way of the
 * orbit, the planets, and the labels.
 */
[b-mdj3mc3vax] .dreamfield-galaxy {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

[b-mdj3mc3vax] .dreamfield-galaxy > div {
    position: absolute;
    /* Oversized and rotated so the band runs corner to corner with no visible
       end. The rotation lives on each child rather than the container so the
       stipple mask can share the same axis exactly. */
    inset: -40% -30%;
    transform: rotate(-27deg);
    transform-origin: 50% 50%;
    pointer-events: none;
}

[b-mdj3mc3vax] .dreamfield-galaxy__body {
    background:
        /* Core: deliberately left of centre, so the band is not symmetrical. */
        radial-gradient(ellipse 22% 13% at 37% 50%, rgba(222, 229, 252, .30), rgba(158, 171, 230, .17) 44%, transparent 78%),
        /* A small muted gold warmth inside the core, nothing more. */
        radial-gradient(ellipse 8% 5% at 35% 49%, rgba(209, 182, 129, .11), transparent 74%),
        /* The band body itself. */
        linear-gradient(180deg,
            transparent 41%,
            rgba(118, 133, 205, .10) 45.5%,
            rgba(163, 176, 227, .19) 48.5%,
            rgba(206, 215, 247, .24) 50%,
            rgba(163, 176, 227, .19) 51.5%,
            rgba(118, 133, 205, .10) 54.5%,
            transparent 59%),
        /* Outer arm: thinner, further along, and slightly off the axis. */
        radial-gradient(ellipse 30% 7% at 72% 53%, rgba(139, 150, 212, .13), transparent 76%),
        /* Trace lavender at the trailing edge only. */
        radial-gradient(ellipse 14% 8% at 19% 46%, rgba(176, 152, 224, .10), transparent 78%);
    opacity: .92;
    animation: dreamfield-galaxy-drift-b-mdj3mc3vax 214s ease-in-out infinite alternate;
}

/* Dark lanes cut slightly across the band axis rather than parallel to it, so
   they read as obscuring dust rather than as banding artefacts. */
[b-mdj3mc3vax] .dreamfield-galaxy__lanes {
    background:
        linear-gradient(178.4deg, transparent 47.2%, rgba(6, 9, 26, .34) 49.4%, transparent 51.4%),
        linear-gradient(176.6deg, transparent 51.4%, rgba(8, 11, 30, .24) 53.2%, transparent 55.4%),
        linear-gradient(181.2deg, transparent 43.6%, rgba(5, 8, 23, .19) 45.2%, transparent 47%);
    opacity: .86;
    animation: dreamfield-galaxy-drift-b-mdj3mc3vax 274s ease-in-out infinite alternate-reverse;
}

/*
 * Unresolved-star density. Two offset stipple tiles give a non-repeating-looking
 * grain, and the mask confines it to the band so star density clusters where a
 * galaxy's would. No blur and no per-star element: the whole field is two
 * background layers.
 */
[b-mdj3mc3vax] .dreamfield-galaxy__grain {
    background-image:
        radial-gradient(circle at 50% 50%, rgba(232, 237, 255, .50) 0 .55px, transparent .85px),
        radial-gradient(circle at 50% 50%, rgba(190, 202, 242, .34) 0 .45px, transparent .75px);
    background-size: 7px 7px, 11px 11px;
    background-position: 0 0, 3px 5px;
    -webkit-mask-image: linear-gradient(180deg, transparent 42%, #000 48%, #000 52%, transparent 58%);
    mask-image: linear-gradient(180deg, transparent 42%, #000 48%, #000 52%, transparent 58%);
    opacity: .58;
    animation: dreamfield-galaxy-grain-b-mdj3mc3vax 186s ease-in-out infinite alternate;
}

/* Depth, not travel: a few percent over three and a half minutes. The spatial
   multiplier keeps calmer tiers proportionally calmer, and Off/Gentle stop it
   entirely through the .dreamfield-atmosphere gating below. */
@keyframes dreamfield-galaxy-drift-b-mdj3mc3vax {
    from {
        transform: rotate(-27deg)
            translate3d(calc(-1.1% * var(--dreamspace-motion-spatial-multiplier, 1)), calc(.5% * var(--dreamspace-motion-spatial-multiplier, 1)), 0)
            scale(calc(1 - .008 * var(--dreamspace-motion-spatial-multiplier, 1)));
    }
    to {
        transform: rotate(-27deg)
            translate3d(calc(1.1% * var(--dreamspace-motion-spatial-multiplier, 1)), calc(-.5% * var(--dreamspace-motion-spatial-multiplier, 1)), 0)
            scale(calc(1 + .008 * var(--dreamspace-motion-spatial-multiplier, 1)));
    }
}

/* The grain drifts on its own slower cycle and breathes in opacity, so the
   field never blinks in unison. */
@keyframes dreamfield-galaxy-grain-b-mdj3mc3vax {
    from {
        opacity: .46;
        transform: rotate(-27deg) translate3d(calc(.6% * var(--dreamspace-motion-spatial-multiplier, 1)), 0, 0);
    }
    to {
        opacity: .66;
        transform: rotate(-27deg) translate3d(calc(-.6% * var(--dreamspace-motion-spatial-multiplier, 1)), 0, 0);
    }
}

/*
 * The two broad nebula bands stay, but only as faint depth behind the galaxy.
 * They are the one place a soft raster-like wash is still allowed, and they are
 * held well down so the crisp band above defines the upper sky.
 */
[b-mdj3mc3vax] .dreamfield-nebula--upper {
    top: -24%;
    right: -30%;
    left: -30%;
    height: 64%;
    background:
        radial-gradient(ellipse 30% 44% at 23% 58%, rgba(96, 123, 195, .14), transparent 74%),
        radial-gradient(ellipse 27% 34% at 72% 34%, rgba(140, 113, 201, .1), transparent 76%),
        radial-gradient(ellipse 18% 24% at 51% 66%, rgba(197, 178, 220, .055), transparent 78%);
    /* No blur filter: these are already gradients, and a 34px full-width blur
       was both the most expensive layer in the scene and the thing that made
       the upper sky read as haze. */
    opacity: .34;
    transform: translate3d(-2%, 0, 0) scale(1.08);
    animation: dreamfield-nebula-upper-b-mdj3mc3vax 118s ease-in-out infinite alternate;
}

[b-mdj3mc3vax] .dreamfield-nebula--lower {
    right: -34%;
    bottom: 0;
    left: -34%;
    height: 46%;
    background:
        radial-gradient(ellipse 42% 48% at 35% 75%, rgba(77, 82, 160, .14), transparent 72%),
        radial-gradient(ellipse 36% 50% at 73% 61%, rgba(145, 112, 181, .10), transparent 74%),
        linear-gradient(180deg, transparent, rgba(19, 24, 63, .1));
    opacity: .46;
    transform: translate3d(2%, 1%, 0) scale(1.06);
    animation: dreamfield-nebula-lower-b-mdj3mc3vax 146s ease-in-out infinite alternate;
}

[b-mdj3mc3vax] .dreamfield-horizon-light {
    right: -18%;
    bottom: 13%;
    left: -18%;
    height: 56%;
    background:
        radial-gradient(ellipse 42% 45% at 50% 70%, rgba(201, 193, 255, .2), transparent 72%),
        linear-gradient(105deg, transparent 16%, rgba(190, 184, 255, .08) 48%, transparent 74%);
    filter: blur(11px);
    opacity: .78;
    transform: translate3d(-3%, 0, 0) scale(1.03);
    animation: dreamfield-horizon-travel-b-mdj3mc3vax 26s ease-in-out infinite alternate;
}

[b-mdj3mc3vax] .dreamfield-haze--far {
    inset: -14% -24% 30% -24%;
    background:
        radial-gradient(ellipse 34% 29% at 27% 43%, rgba(125, 144, 219, .12), transparent 74%),
        radial-gradient(ellipse 30% 24% at 76% 34%, rgba(164, 148, 220, .1), transparent 76%);
    filter: blur(22px);
    opacity: .62;
    transform: translate3d(-2%, 0, 0) scale(1.06);
    animation: dreamfield-haze-far-b-mdj3mc3vax 48s ease-in-out infinite alternate;
}

[b-mdj3mc3vax] .dreamfield-haze--near {
    right: -30%;
    bottom: 12%;
    left: -30%;
    height: 42%;
    background:
        radial-gradient(ellipse 36% 38% at 20% 56%, rgba(163, 177, 232, .14), transparent 70%),
        radial-gradient(ellipse 40% 42% at 83% 62%, rgba(177, 162, 227, .1), transparent 72%);
    filter: blur(30px);
    opacity: .52;
    transform: translate3d(2%, 0, 0) scale(1.04);
    animation: dreamfield-haze-near-b-mdj3mc3vax 34s ease-in-out infinite alternate;
}

[b-mdj3mc3vax] .dreamfield-fog--low {
    right: -20%;
    bottom: 4%;
    left: -20%;
    height: 27%;
    background: linear-gradient(100deg, transparent, rgba(157, 166, 220, .12) 42%, rgba(199, 185, 233, .08) 63%, transparent);
    filter: blur(17px);
    opacity: .64;
    transform: translate3d(-5%, 0, 0);
    animation: dreamfield-fog-low-b-mdj3mc3vax 29s ease-in-out infinite alternate;
}

[b-mdj3mc3vax] .dreamfield-fog--near {
    right: -32%;
    bottom: -2%;
    left: -32%;
    height: 23%;
    background: linear-gradient(86deg, transparent 4%, rgba(111, 129, 194, .12) 36%, rgba(181, 175, 229, .15) 61%, transparent 96%);
    filter: blur(24px);
    opacity: .45;
    transform: translate3d(5%, 0, 0);
    animation: dreamfield-fog-near-b-mdj3mc3vax 22s ease-in-out infinite alternate;
}

[b-mdj3mc3vax] .dreamfield-mountain {
    right: -6%;
    bottom: 3%;
    left: -6%;
    height: 34%;
    transform-origin: 50% 100%;
}

[b-mdj3mc3vax] .dreamfield-mountain--far {
    background: rgba(44, 53, 101, .3);
    clip-path: polygon(0 82%, 9% 65%, 17% 74%, 26% 43%, 35% 66%, 46% 52%, 57% 71%, 67% 39%, 77% 68%, 88% 50%, 100% 77%, 100% 100%, 0 100%);
    opacity: .7;
    transform: translate3d(-1.2%, 0, 0) scale(1.02);
    animation: dreamfield-mountain-far-b-mdj3mc3vax 58s ease-in-out infinite alternate;
}

[b-mdj3mc3vax] .dreamfield-mountain--near {
    right: -10%;
    bottom: -1%;
    left: -10%;
    height: 27%;
    background: linear-gradient(180deg, rgba(12, 19, 47, .42), rgba(4, 7, 20, .8));
    clip-path: polygon(0 68%, 14% 46%, 27% 72%, 40% 34%, 53% 70%, 66% 48%, 79% 76%, 91% 54%, 100% 73%, 100% 100%, 0 100%);
    opacity: .82;
    transform: translate3d(1.5%, 0, 0) scale(1.03);
    animation: dreamfield-mountain-near-b-mdj3mc3vax 41s ease-in-out infinite alternate;
}

[b-mdj3mc3vax] .dreamfield-foreground {
    right: -8%;
    bottom: -1%;
    left: -8%;
    height: 18%;
    background: linear-gradient(180deg, rgba(7, 11, 29, .16), rgba(2, 5, 15, .7));
    clip-path: polygon(0 61%, 16% 54%, 29% 67%, 43% 57%, 56% 72%, 72% 56%, 86% 66%, 100% 51%, 100% 100%, 0 100%);
    opacity: .88;
    transform: translate3d(0, 0, 0);
    animation: dreamfield-foreground-parallax-b-mdj3mc3vax 36s ease-in-out infinite alternate;
}

[b-mdj3mc3vax] .dreamfield-star-layer { z-index: 1; opacity: var(--dreamfield-far-opacity, 1); }
[b-mdj3mc3vax] .dreamfield-star-layer-mid { z-index: 2; opacity: var(--dreamfield-mid-opacity, 1); }
[b-mdj3mc3vax] .dreamfield-star-layer-near { z-index: 3; opacity: var(--dreamfield-near-opacity, 1); }

[b-mdj3mc3vax] .dreamfield-dust-layer {
    position: absolute;
    inset: 0;
    z-index: 3;
    overflow: hidden;
    pointer-events: none;
}

[b-mdj3mc3vax] .dreamfield-dust {
    position: absolute;
    top: var(--dreamfield-dust-y);
    left: var(--dreamfield-dust-x);
    display: block;
    width: var(--dreamfield-dust-size);
    height: var(--dreamfield-dust-size);
    border-radius: 999px;
    opacity: var(--dreamfield-dust-opacity);
    filter: blur(var(--dreamfield-dust-blur));
    transform: translate(-50%, -50%) rotate(var(--dreamfield-dust-rotation));
    animation: dreamfield-dust-drift-b-mdj3mc3vax var(--dreamfield-dust-duration) ease-in-out var(--dreamfield-dust-delay) infinite alternate;
}

[b-mdj3mc3vax] .dreamfield-dust--speck {
    box-shadow: 0 0 5px currentColor;
}

[b-mdj3mc3vax] .dreamfield-dust--fragment {
    width: calc(var(--dreamfield-dust-size) * 1.28);
    height: calc(var(--dreamfield-dust-size) * .52);
    border-radius: 48% 56% 42% 60%;
    box-shadow: inset 1px 1px 1px rgba(255, 255, 255, .16), 0 0 9px currentColor;
}

[b-mdj3mc3vax] .dreamfield-dust-coolblue { color: rgba(136, 190, 228, .8); background: rgba(136, 190, 228, .8); }
[b-mdj3mc3vax] .dreamfield-dust-mutedviolet { color: rgba(164, 137, 208, .78); background: rgba(164, 137, 208, .78); }
[b-mdj3mc3vax] .dreamfield-dust-palelavender { color: rgba(205, 193, 235, .75); background: rgba(205, 193, 235, .75); }
[b-mdj3mc3vax] .dreamfield-dust-rose { color: rgba(205, 150, 181, .7); background: rgba(205, 150, 181, .7); }
[b-mdj3mc3vax] .dreamfield-dust-moonlightgold { color: rgba(227, 205, 152, .68); background: rgba(227, 205, 152, .68); }

/*
 * Longhands, not the `animation` shorthand: every profile class supplies the
 * animation-name. The shorthand previously named a keyframe that does not exist
 * and only worked because the profile rules happen to come later in the file.
 * No `will-change` here — a Rich/Wide scene renders up to 160 stars, and the
 * browser already promotes an active transform/opacity animation on its own.
 */
[b-mdj3mc3vax] .dreamfield-star {
    position: absolute;
    left: var(--dreamfield-x);
    top: var(--dreamfield-y);
    display: block;
    width: var(--dreamfield-size);
    height: var(--dreamfield-size);
    opacity: var(--dreamfield-opacity);
    transform: translate(-50%, -50%) scale(var(--dreamfield-scale));
    animation-duration: calc(var(--dreamfield-twinkle-duration) * var(--dreamfield-twinkle-multiplier, 1));
    animation-timing-function: ease-in-out;
    animation-delay: var(--dreamfield-delay);
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}

/*
 * The drift delay is a second, larger multiple of the per-star twinkle offset.
 * Without it every mid and near star started its drift on the same frame, which
 * read as one synchronised breath across the whole sky on load.
 */
[b-mdj3mc3vax] .dreamfield-star img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: saturate(1.02) brightness(1.12) drop-shadow(0 0 3px rgba(190, 186, 255, .28));
    animation: dreamfield-drift-b-mdj3mc3vax var(--dreamfield-drift-duration) ease-in-out calc(var(--dreamfield-delay) * 2.6) infinite alternate;
}

[b-mdj3mc3vax] .dreamfield-twinkle-nearlystatic { animation-name: dreamfield-nearly-static-b-mdj3mc3vax; }
[b-mdj3mc3vax] .dreamfield-twinkle-distantflicker { animation-name: dreamfield-distant-flicker-b-mdj3mc3vax; }
[b-mdj3mc3vax] .dreamfield-twinkle-softtwinkle { animation-name: dreamfield-soft-twinkle-b-mdj3mc3vax; }
[b-mdj3mc3vax] .dreamfield-twinkle-slowbreath { animation-name: dreamfield-slow-breath-b-mdj3mc3vax; }
[b-mdj3mc3vax] .dreamfield-twinkle-focalglow { animation-name: dreamfield-focal-glow-b-mdj3mc3vax; }

.dreamfield-shooting-layer[b-mdj3mc3vax] { z-index: 4; }

/*
 * The whole journey lives in one keyframe pair so the animated transform can
 * never drop the mirror. Previously `.from-right` set `scaleX(-1)` in a static
 * `transform` that the animation immediately overwrote, and it then travelled
 * +48vw away from a `left: 104%` origin — roughly half of all shooting stars
 * played entirely off the right edge of the screen.
 */
[b-mdj3mc3vax] .dreamfield-shooting-star {
    position: absolute;
    top: var(--dreamfield-shooting-top);
    left: 0;
    width: clamp(96px, 15vw, 240px);
    height: auto;
    opacity: 0;
    transform-origin: center;
    filter: drop-shadow(0 0 6px rgba(214, 226, 255, .45));
    /*
     * Two animations, one element. Travel owns opacity and transform and is the
     * animation whose end retires the runtime's reservation; the trail owns
     * clip-path alone, so neither can overwrite the other's property. The trail
     * window is scheduled from dreamfield.js because keyframe offsets cannot
     * read custom properties — only the phase proportions live here. The static
     * clip keeps the head alone on screen during the trail's start delay.
     */
    clip-path: inset(0 var(--dreamfield-shooting-trail-reveal, 86%) 0 0);
    animation:
        dreamfield-shooting-travel-b-mdj3mc3vax var(--dreamfield-shooting-duration) cubic-bezier(.3, .1, .4, 1) forwards,
        dreamfield-shooting-trail-b-mdj3mc3vax var(--dreamfield-shooting-trail-duration, var(--dreamfield-shooting-duration)) cubic-bezier(.22, .61, .36, 1) var(--dreamfield-shooting-trail-delay, 0ms) forwards;
    will-change: opacity, transform, clip-path;
}

@keyframes dreamfield-nearly-static-b-mdj3mc3vax {
    0%, 100% { opacity: var(--dreamfield-opacity); transform: translate(-50%, -50%) scale(var(--dreamfield-scale)); }
}

/*
 * Twinkle beats are deliberately off-centre and multi-peak rather than
 * sinusoidal. A single midpoint peak reads as one obvious loop once a hundred
 * stars share it; uneven beats let neighbouring stars fall out of step. The
 * troughs bottom out around a third of the star's base opacity, which is a
 * visible twinkle without ever letting a star blink out of the sky.
 */
@keyframes dreamfield-distant-flicker-b-mdj3mc3vax {
    0%, 100% { opacity: calc(var(--dreamfield-opacity) * .92); transform: translate(-50%, -50%) scale(var(--dreamfield-scale)); }
    21% { opacity: calc(var(--dreamfield-opacity) * .34); }
    37% { opacity: calc(var(--dreamfield-opacity) * 1.28); transform: translate(-50%, -50%) scale(calc(var(--dreamfield-scale) * (1 + .14 * var(--dreamspace-motion-spatial-multiplier, 1)))); }
    58% { opacity: calc(var(--dreamfield-opacity) * .45); }
    79% { opacity: calc(var(--dreamfield-opacity) * 1.12); }
}

@keyframes dreamfield-soft-twinkle-b-mdj3mc3vax {
    0%, 100% { opacity: calc(var(--dreamfield-opacity) * .46); transform: translate(-50%, -50%) scale(var(--dreamfield-scale)); }
    31% { opacity: calc(var(--dreamfield-opacity) * 1.22); transform: translate(-50%, -50%) scale(calc(var(--dreamfield-scale) * (1 + .16 * var(--dreamspace-motion-spatial-multiplier, 1)))); }
    54% { opacity: calc(var(--dreamfield-opacity) * .58); }
    77% { opacity: calc(var(--dreamfield-opacity) * 1.04); transform: translate(-50%, -50%) scale(calc(var(--dreamfield-scale) * (1 + .06 * var(--dreamspace-motion-spatial-multiplier, 1)))); }
}

@keyframes dreamfield-slow-breath-b-mdj3mc3vax {
    0%, 100% { opacity: calc(var(--dreamfield-opacity) * .54); transform: translate(-50%, -50%) scale(var(--dreamfield-scale)); }
    38% { opacity: calc(var(--dreamfield-opacity) * 1.18); transform: translate(-50%, -50%) scale(calc(var(--dreamfield-scale) * (1 + .2 * var(--dreamspace-motion-spatial-multiplier, 1)))); }
    69% { opacity: calc(var(--dreamfield-opacity) * .7); transform: translate(-50%, -50%) scale(calc(var(--dreamfield-scale) * (1 + .04 * var(--dreamspace-motion-spatial-multiplier, 1)))); }
}

@keyframes dreamfield-focal-glow-b-mdj3mc3vax {
    0%, 100% { opacity: calc(var(--dreamfield-opacity) * .5); transform: translate(-50%, -50%) scale(var(--dreamfield-scale)); }
    36% { opacity: calc(var(--dreamfield-opacity) * 1.24); transform: translate(-50%, -50%) scale(calc(var(--dreamfield-scale) * (1 + .28 * var(--dreamspace-motion-spatial-multiplier, 1)))); }
    66% { opacity: calc(var(--dreamfield-opacity) * .74); transform: translate(-50%, -50%) scale(calc(var(--dreamfield-scale) * (1 + .08 * var(--dreamspace-motion-spatial-multiplier, 1)))); }
}

/*
 * The phase multiplier scales drift *distance*, not duration. It used to divide
 * the duration, so a "calmer" phase such as sleep-active (.58) actually drifted
 * 1.7x faster. Travel is symmetric so the star still averages its deterministic
 * coordinate; the largest near-layer excursion is ~4px, far inside the content
 * exclusion margins.
 */
@keyframes dreamfield-drift-b-mdj3mc3vax {
    from {
        transform: translate3d(
            calc(var(--dreamfield-drift-x) * -1 * var(--dreamfield-drift-multiplier, 1) * var(--dreamspace-motion-spatial-multiplier, 1)),
            calc(var(--dreamfield-drift-y) * -1 * var(--dreamfield-drift-multiplier, 1) * var(--dreamspace-motion-spatial-multiplier, 1)),
            0);
    }
    to {
        transform: translate3d(
            calc(var(--dreamfield-drift-x) * var(--dreamfield-drift-multiplier, 1) * var(--dreamspace-motion-spatial-multiplier, 1)),
            calc(var(--dreamfield-drift-y) * var(--dreamfield-drift-multiplier, 1) * var(--dreamspace-motion-spatial-multiplier, 1)),
            0);
    }
}

@keyframes dreamfield-dust-drift-b-mdj3mc3vax {
    from {
        transform: translate3d(
            calc(-50% - var(--dreamfield-dust-drift-x) * var(--dreamspace-motion-spatial-multiplier, 1)),
            calc(-50% - var(--dreamfield-dust-drift-y) * var(--dreamspace-motion-spatial-multiplier, 1)),
            0) rotate(var(--dreamfield-dust-rotation));
    }
    to {
        transform: translate3d(
            calc(-50% + var(--dreamfield-dust-drift-x) * var(--dreamspace-motion-spatial-multiplier, 1)),
            calc(-50% + var(--dreamfield-dust-drift-y) * var(--dreamspace-motion-spatial-multiplier, 1)),
            0) rotate(var(--dreamfield-dust-rotation));
    }
}

@keyframes dreamfield-nebula-upper-b-mdj3mc3vax {
    from { opacity: .54; transform: translate3d(calc(-3% * var(--dreamspace-motion-spatial-multiplier, 1)), calc(1% * var(--dreamspace-motion-spatial-multiplier, 1)), 0) scale(calc(1 + .07 * var(--dreamspace-motion-spatial-multiplier, 1))); }
    to { opacity: .76; transform: translate3d(calc(3% * var(--dreamspace-motion-spatial-multiplier, 1)), calc(-1% * var(--dreamspace-motion-spatial-multiplier, 1)), 0) scale(calc(1 + .11 * var(--dreamspace-motion-spatial-multiplier, 1))); }
}

@keyframes dreamfield-nebula-lower-b-mdj3mc3vax {
    from { opacity: .48; transform: translate3d(calc(3% * var(--dreamspace-motion-spatial-multiplier, 1)), calc(1% * var(--dreamspace-motion-spatial-multiplier, 1)), 0) scale(calc(1 + .05 * var(--dreamspace-motion-spatial-multiplier, 1))); }
    to { opacity: .7; transform: translate3d(calc(-3% * var(--dreamspace-motion-spatial-multiplier, 1)), calc(-1% * var(--dreamspace-motion-spatial-multiplier, 1)), 0) scale(calc(1 + .1 * var(--dreamspace-motion-spatial-multiplier, 1))); }
}

@keyframes dreamfield-horizon-travel-b-mdj3mc3vax {
    from { opacity: .62; transform: translate3d(calc(-4% * var(--dreamspace-motion-spatial-multiplier, 1)), calc(1% * var(--dreamspace-motion-spatial-multiplier, 1)), 0) scale(calc(1 + .03 * var(--dreamspace-motion-spatial-multiplier, 1))); }
    to { opacity: .9; transform: translate3d(calc(4% * var(--dreamspace-motion-spatial-multiplier, 1)), calc(-1% * var(--dreamspace-motion-spatial-multiplier, 1)), 0) scale(calc(1 + .08 * var(--dreamspace-motion-spatial-multiplier, 1))); }
}

@keyframes dreamfield-haze-far-b-mdj3mc3vax {
    from { transform: translate3d(calc(-3% * var(--dreamspace-motion-spatial-multiplier, 1)), calc(1% * var(--dreamspace-motion-spatial-multiplier, 1)), 0) scale(calc(1 + .05 * var(--dreamspace-motion-spatial-multiplier, 1))); }
    to { transform: translate3d(calc(3% * var(--dreamspace-motion-spatial-multiplier, 1)), calc(-1% * var(--dreamspace-motion-spatial-multiplier, 1)), 0) scale(calc(1 + .1 * var(--dreamspace-motion-spatial-multiplier, 1))); }
}

@keyframes dreamfield-haze-near-b-mdj3mc3vax {
    from { opacity: .4; transform: translate3d(calc(3% * var(--dreamspace-motion-spatial-multiplier, 1)), calc(1% * var(--dreamspace-motion-spatial-multiplier, 1)), 0) scale(calc(1 + .04 * var(--dreamspace-motion-spatial-multiplier, 1))); }
    to { opacity: .7; transform: translate3d(calc(-4% * var(--dreamspace-motion-spatial-multiplier, 1)), calc(-1% * var(--dreamspace-motion-spatial-multiplier, 1)), 0) scale(calc(1 + .09 * var(--dreamspace-motion-spatial-multiplier, 1))); }
}

@keyframes dreamfield-fog-low-b-mdj3mc3vax {
    from { opacity: .42; transform: translate3d(calc(-8% * var(--dreamspace-motion-spatial-multiplier, 1)), 0, 0); }
    to { opacity: .76; transform: translate3d(calc(8% * var(--dreamspace-motion-spatial-multiplier, 1)), calc(-1% * var(--dreamspace-motion-spatial-multiplier, 1)), 0); }
}

@keyframes dreamfield-fog-near-b-mdj3mc3vax {
    from { opacity: .28; transform: translate3d(calc(8% * var(--dreamspace-motion-spatial-multiplier, 1)), calc(1% * var(--dreamspace-motion-spatial-multiplier, 1)), 0) scale(calc(1 + .03 * var(--dreamspace-motion-spatial-multiplier, 1))); }
    to { opacity: .58; transform: translate3d(calc(-8% * var(--dreamspace-motion-spatial-multiplier, 1)), calc(-1% * var(--dreamspace-motion-spatial-multiplier, 1)), 0) scale(calc(1 + .08 * var(--dreamspace-motion-spatial-multiplier, 1))); }
}

@keyframes dreamfield-mountain-far-b-mdj3mc3vax {
    from { transform: translate3d(calc(-2% * var(--dreamspace-motion-spatial-multiplier, 1)), 0, 0) scale(calc(1 + .02 * var(--dreamspace-motion-spatial-multiplier, 1))); }
    to { transform: translate3d(calc(2% * var(--dreamspace-motion-spatial-multiplier, 1)), calc(-1% * var(--dreamspace-motion-spatial-multiplier, 1)), 0) scale(calc(1 + .04 * var(--dreamspace-motion-spatial-multiplier, 1))); }
}

@keyframes dreamfield-mountain-near-b-mdj3mc3vax {
    from { transform: translate3d(calc(2% * var(--dreamspace-motion-spatial-multiplier, 1)), 0, 0) scale(calc(1 + .03 * var(--dreamspace-motion-spatial-multiplier, 1))); }
    to { transform: translate3d(calc(-2% * var(--dreamspace-motion-spatial-multiplier, 1)), calc(-1% * var(--dreamspace-motion-spatial-multiplier, 1)), 0) scale(calc(1 + .06 * var(--dreamspace-motion-spatial-multiplier, 1))); }
}

@keyframes dreamfield-foreground-parallax-b-mdj3mc3vax {
    from { transform: translate3d(calc(-1% * var(--dreamspace-motion-spatial-multiplier, 1)), 0, 0) scale(calc(1 + .02 * var(--dreamspace-motion-spatial-multiplier, 1))); }
    to { transform: translate3d(calc(1% * var(--dreamspace-motion-spatial-multiplier, 1)), calc(-1% * var(--dreamspace-motion-spatial-multiplier, 1)), 0) scale(calc(1 + .05 * var(--dreamspace-motion-spatial-multiplier, 1))); }
}

@keyframes dreamfield-shooting-travel-b-mdj3mc3vax {
    0% {
        opacity: 0;
        transform: translate3d(var(--dreamfield-shooting-from-x), var(--dreamfield-shooting-from-y), 0)
            scaleX(var(--dreamfield-shooting-flip, 1)) rotate(var(--dreamfield-shooting-angle));
    }
    10% { opacity: 1; }
    68% { opacity: .82; }
    100% {
        opacity: 0;
        transform: translate3d(var(--dreamfield-shooting-to-x), var(--dreamfield-shooting-to-y), 0)
            scaleX(var(--dreamfield-shooting-flip, 1)) rotate(var(--dreamfield-shooting-angle));
    }
}

/*
 * The clip runs in the sprite's untransformed box, where the bright head is
 * always at the left edge — scaleX mirrors the clip along with the artwork, so
 * one keyframe set serves both directions. Reveal the head, lengthen the streak
 * behind it, hold, then retract back toward the head while the travel keyframe's
 * own opacity ramp carries the fade. This animation must never touch opacity:
 * travel owns that property, and a second animation on it would win outright.
 */
@keyframes dreamfield-shooting-trail-b-mdj3mc3vax {
    0% { clip-path: inset(0 var(--dreamfield-shooting-trail-reveal, 86%) 0 0); }
    30% { clip-path: inset(0 var(--dreamfield-shooting-trail-extent, 0%) 0 0); }
    62% { clip-path: inset(0 var(--dreamfield-shooting-trail-extent, 0%) 0 0); }
    90% { clip-path: inset(0 var(--dreamfield-shooting-trail-retract, 62%) 0 0); }
    100% { clip-path: inset(0 var(--dreamfield-shooting-trail-reveal, 86%) 0 0); }
}

.dreamfield[data-phase="napapproaching"][b-mdj3mc3vax] {
    --dreamfield-horizon: rgba(145, 137, 224, .2);
    --dreamfield-focal-color: 185, 177, 255;
}

.dreamfield[data-phase="napapproaching"][b-mdj3mc3vax]  .dreamfield-atmosphere {
    opacity: 1;
    filter: saturate(1.05) brightness(1.03);
}

.dreamfield[data-phase="napapproaching"] .dreamfield-next-atmosphere[b-mdj3mc3vax] {
    opacity: 1;
}

.dreamfield[data-phase="bedtimeapproaching"][b-mdj3mc3vax] {
    --dreamfield-sky-top: #080e22;
    --dreamfield-horizon: rgba(190, 155, 202, .16);
    --dreamfield-focal-color: 235, 198, 187;
}

.dreamfield[data-phase="bedtimeapproaching"][b-mdj3mc3vax]  .dreamfield-atmosphere {
    opacity: .9;
    filter: saturate(.88) brightness(.93);
}

.dreamfield[data-phase="bedtimeapproaching"][b-mdj3mc3vax]  .dreamfield-nebula--lower {
    background:
        radial-gradient(ellipse 46% 54% at 35% 76%, rgba(65, 62, 141, .22), transparent 72%),
        radial-gradient(ellipse 36% 52% at 75% 64%, rgba(156, 112, 171, .15), transparent 74%),
        linear-gradient(180deg, transparent, rgba(13, 15, 49, .22));
    opacity: .82;
}

.dreamfield[data-phase="sleepactive"][b-mdj3mc3vax] {
    --dreamfield-sky-top: #08102b;
    --dreamfield-sky-mid: #151a45;
    --dreamfield-horizon: rgba(137, 128, 224, .22);
    --dreamfield-fog: rgba(109, 107, 202, .11);
}

.dreamfield[data-phase="sleepactive"][b-mdj3mc3vax]  .dreamfield-atmosphere {
    opacity: .96;
    filter: saturate(1) brightness(1);
}

.dreamfield[data-phase="sleepactive"][b-mdj3mc3vax]::after {
    background:
        radial-gradient(circle at 78% 16%, rgba(177, 165, 255, .12), transparent 22%),
        linear-gradient(180deg, transparent 0 55%, var(--dreamfield-fog) 67%, rgba(3, 6, 17, .34) 82%, var(--dreamfield-foreground) 100%);
    opacity: .72;
}

.dreamfield[data-phase="sleepactive"][b-mdj3mc3vax]  .dreamfield-background {
    filter: saturate(.96) brightness(.98);
}

/* Active sleep retains a rich, readable night rather than being double-damped.
 * Spatial travel remains capped by the Balanced policy (.55), while these
 * differentiated cycles let a glance catch independent galaxy movement. */
.dreamfield[data-phase="sleepactive"][b-mdj3mc3vax]  .dreamfield-nebula--upper { animation-duration: 76s; }
.dreamfield[data-phase="sleepactive"][b-mdj3mc3vax]  .dreamfield-nebula--lower { animation-duration: 92s; }
.dreamfield[data-phase="sleepactive"][b-mdj3mc3vax]  .dreamfield-horizon-light { animation-duration: 38s; }
.dreamfield[data-phase="sleepactive"][b-mdj3mc3vax]  .dreamfield-haze--far { animation-duration: 52s; }
.dreamfield[data-phase="sleepactive"][b-mdj3mc3vax]  .dreamfield-haze--near { animation-duration: 44s; }
.dreamfield[data-phase="sleepactive"][b-mdj3mc3vax]  .dreamfield-fog--low { animation-duration: 38s; }
.dreamfield[data-phase="sleepactive"][b-mdj3mc3vax]  .dreamfield-fog--near { animation-duration: 30s; }
.dreamfield[data-phase="sleepactive"][b-mdj3mc3vax]  .dreamfield-mountain--far { animation-duration: 68s; }
.dreamfield[data-phase="sleepactive"][b-mdj3mc3vax]  .dreamfield-mountain--near { animation-duration: 56s; }
.dreamfield[data-phase="sleepactive"][b-mdj3mc3vax]  .dreamfield-foreground { animation-duration: 48s; }
.dreamfield[data-phase="sleepactive"] .dreamfield-current-beacon[b-mdj3mc3vax],
.dreamfield[data-phase="sleepactive"] .dreamfield-next-atmosphere[b-mdj3mc3vax] { animation-duration: 12s; }

/* Sleep-active is spatially capped at Balanced, not visually dormant. This
 * shorter existing beacon breath gives the measured active focal a visible
 * first crest during an ordinary two-to-three-second phone glance. */
.dreamfield[data-phase="sleepactive"][data-effective-motion-level="balanced"] .dreamfield-current-beacon[b-mdj3mc3vax] {
    animation-duration: 4.8s;
}

.dreamfield[data-phase="sleepactive"][data-sleep-kind="night"][b-mdj3mc3vax]  .dreamfield-atmosphere::before {
    position: absolute;
    top: 11%;
    right: 11%;
    width: clamp(3.25rem, 9vw, 7rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 36% 32%, rgba(255, 253, 239, .92) 0 7%, rgba(232, 225, 255, .7) 8% 22%, rgba(200, 187, 255, .2) 43%, transparent 71%),
        radial-gradient(circle, rgba(185, 177, 255, .18), transparent 68%);
    box-shadow: 0 0 1.8rem rgba(185, 177, 255, .24);
    content: "";
    opacity: .72;
    mix-blend-mode: screen;
    animation: dreamfield-sleeping-moon-b-mdj3mc3vax 18s ease-in-out infinite alternate;
}

.dreamfield[data-phase="waketransition"][b-mdj3mc3vax] {
    --dreamfield-horizon: rgba(215, 185, 182, .22);
    --dreamfield-focal-color: 244, 205, 179;
}

.dreamfield[data-phase="waketransition"][b-mdj3mc3vax]  .dreamfield-atmosphere {
    opacity: 1;
    filter: saturate(1.12) brightness(1.06);
}

.dreamfield-focal-overlay[b-mdj3mc3vax],
.dreamfield-transition-overlay[b-mdj3mc3vax] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 7;
}

.dreamfield-focal-overlay[b-mdj3mc3vax] {
    background:
        radial-gradient(ellipse 30% 20% at var(--dreamfield-focal-x) var(--dreamfield-focal-y), rgba(var(--dreamfield-focal-color), calc(var(--dreamfield-focal-opacity) * .56)) 0, rgba(var(--dreamfield-focal-color), calc(var(--dreamfield-focal-opacity) * .14)) 36%, transparent 78%),
        linear-gradient(125deg, transparent 26%, rgba(var(--dreamfield-focal-color), calc(var(--dreamfield-focal-opacity) * .07)) 50%, transparent 73%);
    opacity: .86;
    transform: scale(var(--dreamfield-focal-scale));
    transform-origin: var(--dreamfield-focal-x) var(--dreamfield-focal-y);
    transition: opacity 1400ms cubic-bezier(.2, .7, .2, 1), transform 1400ms cubic-bezier(.2, .7, .2, 1);
    animation: dreamfield-focal-breathe-b-mdj3mc3vax var(--dreamspace-emphasized-duration) ease-in-out infinite alternate;
}

.dreamfield-selection-overlay[b-mdj3mc3vax] {
    position: absolute;
    inset: 0;
    z-index: 8;
    pointer-events: none;
    opacity: .82;
    transition: opacity var(--dreamspace-selection-duration) cubic-bezier(.2, .7, .2, 1);
}

.dreamfield-selection-overlay[b-mdj3mc3vax]::before {
    position: absolute;
    top: var(--dreamfield-selection-y);
    left: var(--dreamfield-selection-x);
    width: clamp(6rem, 18vw, 13rem);
    height: clamp(6rem, 18vw, 13rem);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(207, 198, 255, .2), rgba(185, 177, 255, .08) 38%, transparent 72%);
    content: "";
    transform: translate(-50%, -50%) scale(.82);
    transform-origin: center;
    animation: dreamfield-selection-focus-b-mdj3mc3vax var(--dreamspace-selection-duration) cubic-bezier(.2, .7, .2, 1) both;
    transition: top var(--dreamspace-selection-duration) cubic-bezier(.2, .7, .2, 1), left var(--dreamspace-selection-duration) cubic-bezier(.2, .7, .2, 1);
}

/*
 * These light fields receive measured Dreamline coordinates, not inferred
 * prediction positions. They remain behind content and make the current moment
 * and approved next event feel part of one breathing environment without
 * drawing a shortcut that could contradict the canonical rail.
 */
.dreamfield-current-beacon[b-mdj3mc3vax],
.dreamfield-next-atmosphere[b-mdj3mc3vax] {
    position: absolute;
    inset: 0;
    z-index: 7;
    pointer-events: none;
}

.dreamfield-current-beacon[b-mdj3mc3vax] {
    background: radial-gradient(ellipse 13% 11% at var(--dreamfield-current-x) var(--dreamfield-current-y), rgba(237, 221, 167, .13), rgba(200, 226, 229, .045) 44%, transparent 76%);
    opacity: .7;
    transform-origin: var(--dreamfield-current-x) var(--dreamfield-current-y);
    animation: dreamfield-current-beacon-b-mdj3mc3vax 6.8s ease-in-out infinite alternate;
}

.dreamfield-next-atmosphere[b-mdj3mc3vax] {
    --dreamfield-next-color: 185, 177, 255;
    background:
        radial-gradient(ellipse 19% 15% at var(--dreamfield-next-x) var(--dreamfield-next-y), rgba(var(--dreamfield-next-color), calc(var(--dreamfield-next-strength) * .2)) 0, rgba(var(--dreamfield-next-color), calc(var(--dreamfield-next-strength) * .07)) 43%, transparent 78%),
        radial-gradient(ellipse 34% 24% at var(--dreamfield-next-x) var(--dreamfield-next-y), rgba(var(--dreamfield-next-color), calc(var(--dreamfield-next-strength) * .045)), transparent 72%);
    opacity: .9;
    transform-origin: var(--dreamfield-next-x) var(--dreamfield-next-y);
    transition: background 1400ms cubic-bezier(.2, .7, .2, 1), opacity 1400ms cubic-bezier(.2, .7, .2, 1);
    animation: dreamfield-next-atmosphere-b-mdj3mc3vax 9.4s ease-in-out infinite alternate;
}

.dreamfield[data-next-event="bedtime"] .dreamfield-next-atmosphere[b-mdj3mc3vax] {
    --dreamfield-next-color: 230, 191, 165;
}

.dreamfield[data-next-event="wake"] .dreamfield-next-atmosphere[b-mdj3mc3vax] {
    --dreamfield-next-color: 165, 221, 216;
}

.dreamfield[data-next-confidence="low"] .dreamfield-next-atmosphere[b-mdj3mc3vax] {
    opacity: .58;
}

.dreamfield[data-has-prediction-range="true"] .dreamfield-next-atmosphere[b-mdj3mc3vax] {
    background:
        radial-gradient(ellipse 23% 18% at var(--dreamfield-next-x) var(--dreamfield-next-y), rgba(var(--dreamfield-next-color), calc(var(--dreamfield-next-strength) * .21)) 0, rgba(var(--dreamfield-next-color), calc(var(--dreamfield-next-strength) * .08)) 45%, transparent 78%),
        radial-gradient(ellipse 38% 27% at var(--dreamfield-next-x) var(--dreamfield-next-y), rgba(var(--dreamfield-next-color), calc(var(--dreamfield-next-strength) * .055)), transparent 74%);
}

.dreamfield[data-selected-role="current"] .dreamfield-selection-overlay[b-mdj3mc3vax]::before,
.dreamfield[data-selected-role="wake"] .dreamfield-selection-overlay[b-mdj3mc3vax]::before {
    background: radial-gradient(circle, rgba(247, 199, 111, .22), rgba(207, 198, 255, .07) 42%, transparent 72%);
}

.dreamfield[data-selected-role="nap"] .dreamfield-selection-overlay[b-mdj3mc3vax]::before,
.dreamfield[data-selected-role="active"] .dreamfield-selection-overlay[b-mdj3mc3vax]::before {
    background: radial-gradient(circle, rgba(125, 225, 225, .2), rgba(185, 177, 255, .07) 42%, transparent 72%);
}

.dreamfield[data-selected-role="bedtime"] .dreamfield-selection-overlay[b-mdj3mc3vax]::before,
.dreamfield[data-selected-role="prediction"] .dreamfield-selection-overlay[b-mdj3mc3vax]::before {
    background: radial-gradient(circle, rgba(201, 183, 255, .24), rgba(185, 177, 255, .08) 42%, transparent 72%);
}

.dreamfield-transition-presentation[b-mdj3mc3vax] {
    background: radial-gradient(ellipse 28% 22% at var(--dreamfield-transition-x) var(--dreamfield-transition-y), rgba(218, 209, 255, .22), rgba(172, 183, 246, .06) 42%, transparent 78%);
    opacity: 0;
    transform-origin: var(--dreamfield-transition-x) var(--dreamfield-transition-y);
    animation: dreamfield-sleep-started-b-mdj3mc3vax var(--dreamfield-transition-duration) ease-out both;
    contain: paint;
}

.dreamfield-transition-presentation[b-mdj3mc3vax]::before {
    position: absolute;
    top: var(--dreamfield-transition-y);
    left: var(--dreamfield-transition-x);
    width: clamp(7rem, 22vw, 16rem);
    height: clamp(7rem, 22vw, 16rem);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(218, 209, 255, .13), transparent 68%);
    content: "";
    transform: translate(-50%, -50%);
}

.dreamfield-transition-sparkle[b-mdj3mc3vax] {
    position: absolute;
    top: var(--dreamfield-transition-y);
    left: var(--dreamfield-transition-x);
    width: clamp(1.75rem, 5vw, 4rem);
    height: auto;
    opacity: .68;
    transform: translate(-50%, -50%);
    filter: saturate(.72) brightness(.9);
}

/* A planet tap is a disposable ambient acknowledgement, not a second
 * selection state. The geometry module writes the measured rendered anchor as
 * percentages, so this stays localized even when the planet is displaced from
 * its canonical rail point. Dynamic children come from JS and therefore use
 * ::deep to cross the scoped-style boundary. */
[b-mdj3mc3vax] .dreamfield-tap-reaction {
    --dreamfield-tap-duration: 1.9s;
    position: absolute;
    inset: 0;
    z-index: 9;
    pointer-events: none;
    contain: paint;
}

[b-mdj3mc3vax] .dreamfield-tap-reaction__ripple,
[b-mdj3mc3vax] .dreamfield-tap-reaction__sparkle {
    position: absolute;
    top: var(--dreamfield-tap-y);
    left: var(--dreamfield-tap-x);
    pointer-events: none;
}

[b-mdj3mc3vax] .dreamfield-tap-reaction__ripple {
    width: clamp(3rem, 9vw, 7rem);
    aspect-ratio: 1;
    border: 1px solid rgba(226, 220, 255, .74);
    border-radius: 50%;
    box-shadow: 0 0 1.2rem rgba(181, 213, 255, .32), inset 0 0 .8rem rgba(242, 225, 255, .18);
    opacity: 0;
    transform: translate(-50%, -50%) scale(.18);
    animation: dreamfield-tap-ripple-b-mdj3mc3vax var(--dreamfield-tap-duration) cubic-bezier(.16, .74, .22, 1) both;
}

[b-mdj3mc3vax] .dreamfield-tap-reaction__sparkle {
    color: rgba(255, 250, 235, .94);
    font-size: clamp(1.35rem, 3.8vw, 2.6rem);
    line-height: 1;
    text-shadow: 0 0 .75rem rgba(209, 200, 255, .78), 0 0 1.4rem rgba(165, 224, 232, .34);
    opacity: 0;
    transform: translate(-50%, -50%) scale(.2) rotate(-14deg);
    animation: dreamfield-tap-sparkle-b-mdj3mc3vax var(--dreamfield-tap-duration) cubic-bezier(.18, .72, .2, 1) both;
}

/* Semantic tap acknowledgements: the location is always the measured visible
   planet, while the gesture vocabulary follows the event's existing meaning. */
[b-mdj3mc3vax] .dreamfield-tap-reaction--sleep-start .dreamfield-tap-reaction__ripple {
    border-color: rgba(173, 213, 255, .82);
    box-shadow: 0 0 1.2rem rgba(127, 180, 255, .38), inset 0 0 .8rem rgba(202, 226, 255, .22);
    animation-name: dreamfield-tap-inward-b-mdj3mc3vax;
}

[b-mdj3mc3vax] .dreamfield-tap-reaction--sleep-start .dreamfield-tap-reaction__sparkle {
    color: rgba(214, 233, 255, .96);
    text-shadow: 0 0 .75rem rgba(147, 197, 255, .84), 0 0 1.4rem rgba(155, 185, 255, .42);
    animation-name: dreamfield-tap-inward-sparkle-b-mdj3mc3vax;
}

[b-mdj3mc3vax] .dreamfield-tap-reaction--wake-outward .dreamfield-tap-reaction__ripple {
    border-color: rgba(255, 219, 157, .88);
    box-shadow: 0 0 1.2rem rgba(255, 193, 104, .42), inset 0 0 .8rem rgba(255, 237, 197, .22);
}

[b-mdj3mc3vax] .dreamfield-tap-reaction--wake-outward .dreamfield-tap-reaction__sparkle {
    color: rgba(255, 242, 205, .98);
    text-shadow: 0 0 .75rem rgba(255, 202, 112, .9), 0 0 1.4rem rgba(255, 165, 103, .42);
}

[b-mdj3mc3vax] .dreamfield-tap-reaction--approaching {
    --dreamfield-tap-duration: 1.25s;
}

[b-mdj3mc3vax] .dreamfield-tap-reaction--approaching .dreamfield-tap-reaction__ripple {
    border-color: rgba(232, 213, 255, .94);
    box-shadow: 0 0 1.5rem rgba(208, 166, 255, .46), inset 0 0 .9rem rgba(255, 231, 197, .24);
    animation-name: dreamfield-tap-surge-b-mdj3mc3vax;
}

[b-mdj3mc3vax] .dreamfield-tap-reaction--approaching .dreamfield-tap-reaction__sparkle {
    color: rgba(255, 237, 196, .98);
    text-shadow: 0 0 .8rem rgba(224, 188, 255, .9), 0 0 1.5rem rgba(255, 207, 128, .48);
    animation-name: dreamfield-tap-surge-sparkle-b-mdj3mc3vax;
}

.dreamfield-transition-sleepended[b-mdj3mc3vax] { animation-name: dreamfield-sleep-ended-b-mdj3mc3vax; }

@keyframes dreamfield-sleep-started-b-mdj3mc3vax {
    0% { opacity: 0; transform: scale(.86); }
    18% { opacity: .62; transform: scale(1.01); }
    42% { opacity: .24; transform: scale(.97); }
    100% { opacity: 0; transform: scale(.92); }
}

@keyframes dreamfield-sleep-ended-b-mdj3mc3vax {
    0% { opacity: 0; transform: scale(.9); }
    16% { opacity: .58; transform: scale(1.02); }
    46% { opacity: .2; transform: scale(1.08); }
    100% { opacity: 0; transform: scale(1.14); }
}

@keyframes dreamfield-tap-ripple-b-mdj3mc3vax {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.18); }
    16% { opacity: .76; transform: translate(-50%, -50%) scale(.42); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.08); }
}

@keyframes dreamfield-tap-sparkle-b-mdj3mc3vax {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(-14deg); }
    18% { opacity: .96; transform: translate(-50%, -50%) scale(1.08) rotate(4deg); }
    62% { opacity: .52; transform: translate(-50%, -50%) scale(.84) rotate(10deg); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(.64) rotate(16deg); }
}

@keyframes dreamfield-tap-inward-b-mdj3mc3vax {
    0% { opacity: .08; transform: translate(-50%, -50%) scale(1.1); }
    42% { opacity: .82; transform: translate(-50%, -50%) scale(.34); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(.08); }
}

@keyframes dreamfield-tap-inward-sparkle-b-mdj3mc3vax {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.9) rotate(-20deg); }
    38% { opacity: .96; transform: translate(-50%, -50%) scale(.34) rotate(-4deg); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(.08) rotate(8deg); }
}

@keyframes dreamfield-tap-surge-b-mdj3mc3vax {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.32); }
    28% { opacity: .94; transform: translate(-50%, -50%) scale(.74); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.34); }
}

@keyframes dreamfield-tap-surge-sparkle-b-mdj3mc3vax {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(-20deg); }
    22% { opacity: 1; transform: translate(-50%, -50%) scale(1.18) rotate(2deg); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(.68) rotate(14deg); }
}

@keyframes dreamfield-focal-breathe-b-mdj3mc3vax {
    from { opacity: .68; }
    to { opacity: .94; }
}

@keyframes dreamfield-sleeping-moon-b-mdj3mc3vax {
    from { opacity: .56; transform: translate3d(0, calc(1% * var(--dreamspace-motion-spatial-multiplier, 1)), 0) scale(calc(1 - .04 * var(--dreamspace-motion-spatial-multiplier, 1))); }
    to { opacity: .82; transform: translate3d(calc(-2% * var(--dreamspace-motion-spatial-multiplier, 1)), calc(-2% * var(--dreamspace-motion-spatial-multiplier, 1)), 0) scale(calc(1 + .04 * var(--dreamspace-motion-spatial-multiplier, 1))); }
}

@keyframes dreamfield-selection-focus-b-mdj3mc3vax {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(calc(1 - .26 * var(--dreamspace-motion-spatial-multiplier, 1))); }
    55% { opacity: .92; transform: translate(-50%, -50%) scale(calc(1 + .02 * var(--dreamspace-motion-spatial-multiplier, 1))); }
    100% { opacity: .72; transform: translate(-50%, -50%) scale(calc(1 - .1 * var(--dreamspace-motion-spatial-multiplier, 1))); }
}

@keyframes dreamfield-current-beacon-b-mdj3mc3vax {
    from { opacity: .54; transform: scale(calc(1 - .04 * var(--dreamspace-motion-spatial-multiplier, 1))); }
    to { opacity: .82; transform: scale(calc(1 + .05 * var(--dreamspace-motion-spatial-multiplier, 1))); }
}

@keyframes dreamfield-next-atmosphere-b-mdj3mc3vax {
    from { opacity: .68; transform: scale(calc(1 - .04 * var(--dreamspace-motion-spatial-multiplier, 1))); }
    to { opacity: .96; transform: scale(calc(1 + .045 * var(--dreamspace-motion-spatial-multiplier, 1))); }
}

.dreamfield[data-motion="off"][b-mdj3mc3vax]  .dreamfield-star,
.dreamfield[data-motion="reduced"][b-mdj3mc3vax]  .dreamfield-star,
.dreamfield[data-reduced-motion="true"][b-mdj3mc3vax]  .dreamfield-star,
.dreamfield[data-motion="off"][b-mdj3mc3vax]  .dreamfield-dust,
.dreamfield[data-motion="reduced"][b-mdj3mc3vax]  .dreamfield-dust,
.dreamfield[data-reduced-motion="true"][b-mdj3mc3vax]  .dreamfield-dust,
.dreamfield[data-motion="off"][b-mdj3mc3vax]  .dreamfield-star img,
.dreamfield[data-motion="reduced"][b-mdj3mc3vax]  .dreamfield-star img,
.dreamfield[data-reduced-motion="true"][b-mdj3mc3vax]  .dreamfield-star img,
.dreamfield[data-motion="off"][b-mdj3mc3vax]  .dreamfield-constellation,
.dreamfield[data-motion="reduced"][b-mdj3mc3vax]  .dreamfield-constellation,
.dreamfield[data-reduced-motion="true"][b-mdj3mc3vax]  .dreamfield-constellation,
.dreamfield[data-motion="off"][b-mdj3mc3vax]  .dreamfield-decorative-star,
.dreamfield[data-motion="reduced"][b-mdj3mc3vax]  .dreamfield-decorative-star,
.dreamfield[data-reduced-motion="true"][b-mdj3mc3vax]  .dreamfield-decorative-star {
    animation: none;
}

.dreamfield[data-motion="off"][b-mdj3mc3vax]  .dreamfield-atmosphere *,
.dreamfield[data-motion="reduced"][b-mdj3mc3vax]  .dreamfield-atmosphere *,
.dreamfield[data-reduced-motion="true"][b-mdj3mc3vax]  .dreamfield-atmosphere *,
.dreamfield[data-motion="off"][b-mdj3mc3vax]  .dreamfield-atmosphere::before,
.dreamfield[data-motion="reduced"][b-mdj3mc3vax]  .dreamfield-atmosphere::before,
.dreamfield[data-reduced-motion="true"][b-mdj3mc3vax]  .dreamfield-atmosphere::before,
.dreamfield[data-motion="off"] .dreamfield-focal-overlay[b-mdj3mc3vax],
.dreamfield[data-motion="reduced"] .dreamfield-focal-overlay[b-mdj3mc3vax],
.dreamfield[data-reduced-motion="true"] .dreamfield-focal-overlay[b-mdj3mc3vax],
.dreamfield[data-motion="off"] .dreamfield-selection-overlay[b-mdj3mc3vax]::before,
.dreamfield[data-motion="reduced"] .dreamfield-selection-overlay[b-mdj3mc3vax]::before,
.dreamfield[data-reduced-motion="true"] .dreamfield-selection-overlay[b-mdj3mc3vax]::before,
.dreamfield[data-motion="off"] .dreamfield-current-beacon[b-mdj3mc3vax],
.dreamfield[data-motion="reduced"] .dreamfield-current-beacon[b-mdj3mc3vax],
.dreamfield[data-reduced-motion="true"] .dreamfield-current-beacon[b-mdj3mc3vax],
.dreamfield[data-motion="off"] .dreamfield-next-atmosphere[b-mdj3mc3vax],
.dreamfield[data-motion="reduced"] .dreamfield-next-atmosphere[b-mdj3mc3vax],
.dreamfield[data-reduced-motion="true"] .dreamfield-next-atmosphere[b-mdj3mc3vax] {
    animation: none;
}

.dreamfield[data-visible="false"][b-mdj3mc3vax]  .dreamfield-atmosphere *,
.dreamfield[data-visible="false"][b-mdj3mc3vax]  .dreamfield-atmosphere::before,
.dreamfield[data-visible="false"][b-mdj3mc3vax]  .dreamfield-star,
.dreamfield[data-visible="false"][b-mdj3mc3vax]  .dreamfield-star img,
.dreamfield[data-visible="false"][b-mdj3mc3vax]  .dreamfield-dust,
.dreamfield[data-visible="false"] .dreamfield-focal-overlay[b-mdj3mc3vax],
.dreamfield[data-visible="false"] .dreamfield-selection-overlay[b-mdj3mc3vax]::before,
.dreamfield[data-visible="false"] .dreamfield-current-beacon[b-mdj3mc3vax],
.dreamfield[data-visible="false"] .dreamfield-next-atmosphere[b-mdj3mc3vax] {
    animation-play-state: paused !important;
}

.dreamfield[data-motion="off"] .dreamfield-shooting-layer[b-mdj3mc3vax],
.dreamfield[data-motion="reduced"] .dreamfield-shooting-layer[b-mdj3mc3vax],
.dreamfield[data-reduced-motion="true"] .dreamfield-shooting-layer[b-mdj3mc3vax],
.dreamfield[data-motion="off"] .dreamfield-transition-presentation[b-mdj3mc3vax],
.dreamfield[data-motion="reduced"] .dreamfield-transition-presentation[b-mdj3mc3vax],
.dreamfield[data-reduced-motion="true"] .dreamfield-transition-presentation[b-mdj3mc3vax] { display: none; }

@media (max-width: 600px) {
    .dreamfield[b-mdj3mc3vax] { width: 100vw; height: 100dvh; min-height: 100svh; }
    [b-mdj3mc3vax] .dreamfield-background img { object-position: 58% bottom; opacity: .66; filter: saturate(1.04) brightness(.88) contrast(1.1); }
    [b-mdj3mc3vax] .dreamfield-background-wash {
        background:
            linear-gradient(180deg, rgba(8, 12, 30, .04) 0%, rgba(8, 12, 30, .12) 49%, rgba(2, 5, 15, .58) 100%),
            radial-gradient(ellipse at 50% 52%, transparent 0 31%, rgba(3, 6, 17, .24) 82%);
    }
    [b-mdj3mc3vax] .dreamfield-mountain--far { opacity: .9; }
    [b-mdj3mc3vax] .dreamfield-mountain--near { opacity: .96; }
    [b-mdj3mc3vax] .dreamfield-fog--low { opacity: .8; animation-duration: 26s; }
    [b-mdj3mc3vax] .dreamfield-fog--near { opacity: .66; animation-duration: 22s; }
    [b-mdj3mc3vax] .dreamfield-haze--far { opacity: .78; animation-duration: 34s; }
    [b-mdj3mc3vax] .dreamfield-haze--near { opacity: .7; animation-duration: 28s; }
    [b-mdj3mc3vax] .dreamfield-constellation { animation-name: dreamfield-mobile-ambient-breathe-b-mdj3mc3vax; animation-duration: 14s; filter: saturate(.9) brightness(1.34); }
    [b-mdj3mc3vax] .dreamfield-dust { opacity: min(1, calc(var(--dreamfield-dust-opacity) * 1.55)); animation-duration: 18s; }
    .dreamfield[b-mdj3mc3vax]::after { opacity: .62; }

    .dreamfield[data-phase="sleepactive"][b-mdj3mc3vax]  .dreamfield-nebula--upper { animation-duration: 58s; }
    .dreamfield[data-phase="sleepactive"][b-mdj3mc3vax]  .dreamfield-nebula--lower { animation-duration: 72s; }
    .dreamfield[data-phase="sleepactive"][b-mdj3mc3vax]  .dreamfield-haze--far { animation-duration: 30s; }
    .dreamfield[data-phase="sleepactive"][b-mdj3mc3vax]  .dreamfield-haze--near { animation-duration: 26s; }
    .dreamfield[data-phase="sleepactive"][b-mdj3mc3vax]  .dreamfield-fog--low { animation-duration: 24s; }
    .dreamfield[data-phase="sleepactive"][b-mdj3mc3vax]  .dreamfield-fog--near { animation-duration: 20s; }
}

@keyframes dreamfield-mobile-ambient-breathe-b-mdj3mc3vax {
    from { opacity: .34; transform: translate3d(calc(-.35% * var(--dreamspace-motion-spatial-multiplier, 1)), calc(.2% * var(--dreamspace-motion-spatial-multiplier, 1)), 0) scale(calc(1 - .012 * var(--dreamspace-motion-spatial-multiplier, 1))); }
    to { opacity: .62; transform: translate3d(calc(.35% * var(--dreamspace-motion-spatial-multiplier, 1)), calc(-.2% * var(--dreamspace-motion-spatial-multiplier, 1)), 0) scale(calc(1 + .012 * var(--dreamspace-motion-spatial-multiplier, 1))); }
}

@media (prefers-reduced-motion: reduce) {
    .dreamfield[data-motion="auto"][b-mdj3mc3vax]  .dreamfield-star,
    .dreamfield[data-motion="auto"][b-mdj3mc3vax]  .dreamfield-star img,
    .dreamfield[data-motion="auto"][b-mdj3mc3vax]  .dreamfield-dust,
    .dreamfield[data-motion="auto"][b-mdj3mc3vax]  .dreamfield-constellation,
    .dreamfield[data-motion="auto"][b-mdj3mc3vax]  .dreamfield-decorative-star,
    .dreamfield-focal-overlay[b-mdj3mc3vax],
    .dreamfield-selection-overlay[b-mdj3mc3vax]::before,
    .dreamfield-current-beacon[b-mdj3mc3vax],
    .dreamfield-next-atmosphere[b-mdj3mc3vax],
    .dreamfield[data-phase="sleepactive"][b-mdj3mc3vax]  .dreamfield-atmosphere::before { animation: none; transition-duration: 220ms; }
    .dreamfield[data-motion="auto"][b-mdj3mc3vax]  .dreamfield-atmosphere * { animation: none; }
    .dreamfield[data-motion="auto"] .dreamfield-shooting-layer[b-mdj3mc3vax],
    .dreamfield[data-motion="auto"] .dreamfield-transition-presentation[b-mdj3mc3vax] { display: none; }
}

/* Dreamspace motion tiers are resolved by the component from the selected
 * level, the existing accessibility preset, OS preference, and scene phase.
 * The effective level is presentation policy, not a replacement for the
 * persisted selection. Gentle (including OS reduced motion) retains a living
 * sky through opacity-only beats; Off leaves the complete scene mounted but
 * fully static. */
.dreamfield[data-effective-motion-level="off"][b-mdj3mc3vax]  .dreamfield-star,
.dreamfield[data-effective-motion-level="off"][b-mdj3mc3vax]  .dreamfield-star img,
.dreamfield[data-effective-motion-level="off"][b-mdj3mc3vax]  .dreamfield-dust,
.dreamfield[data-effective-motion-level="off"][b-mdj3mc3vax]  .dreamfield-atmosphere *,
.dreamfield[data-effective-motion-level="off"][b-mdj3mc3vax]  .dreamfield-atmosphere::before,
.dreamfield[data-effective-motion-level="off"] .dreamfield-focal-overlay[b-mdj3mc3vax],
.dreamfield[data-effective-motion-level="off"] .dreamfield-selection-overlay[b-mdj3mc3vax]::before,
.dreamfield[data-effective-motion-level="off"] .dreamfield-current-beacon[b-mdj3mc3vax],
.dreamfield[data-effective-motion-level="off"] .dreamfield-next-atmosphere[b-mdj3mc3vax],
.dreamfield[data-effective-motion-level="off"] .dreamfield-transition-presentation[b-mdj3mc3vax] {
    animation: none !important;
    transition: none !important;
}

.dreamfield[data-effective-motion-level="off"] .dreamfield-shooting-layer[b-mdj3mc3vax],
.dreamfield[data-effective-motion-level="gentle"] .dreamfield-shooting-layer[b-mdj3mc3vax],
.dreamfield[data-effective-motion-level="gentle"] .dreamfield-transition-presentation[b-mdj3mc3vax] {
    display: none;
}

.dreamfield[data-effective-motion-level="gentle"][b-mdj3mc3vax]  .dreamfield-star {
    animation: dreamfield-gentle-opacity-b-mdj3mc3vax var(--dreamfield-twinkle-duration, 4.2s) ease-in-out var(--dreamfield-delay, 0s) infinite alternate !important;
}

.dreamfield[data-effective-motion-level="gentle"][b-mdj3mc3vax]  .dreamfield-star img,
.dreamfield[data-effective-motion-level="gentle"][b-mdj3mc3vax]  .dreamfield-dust {
    animation: none !important;
}

.dreamfield[data-effective-motion-level="gentle"][b-mdj3mc3vax]  .dreamfield-atmosphere *,
.dreamfield[data-effective-motion-level="gentle"][b-mdj3mc3vax]  .dreamfield-atmosphere::before,
.dreamfield[data-effective-motion-level="gentle"] .dreamfield-focal-overlay[b-mdj3mc3vax],
.dreamfield[data-effective-motion-level="gentle"] .dreamfield-selection-overlay[b-mdj3mc3vax]::before,
.dreamfield[data-effective-motion-level="gentle"] .dreamfield-current-beacon[b-mdj3mc3vax],
.dreamfield[data-effective-motion-level="gentle"] .dreamfield-next-atmosphere[b-mdj3mc3vax] {
    animation: dreamfield-gentle-opacity-b-mdj3mc3vax 6s ease-in-out var(--dreamfield-delay, 0s) infinite alternate !important;
}

/* Spatial acknowledgement is intentionally absent at calm tiers. The static
 * selected/readout treatment still carries the tap's accessible meaning. */
.dreamfield[data-motion="off"][b-mdj3mc3vax]  .dreamfield-tap-reaction,
.dreamfield[data-motion="reduced"][b-mdj3mc3vax]  .dreamfield-tap-reaction,
.dreamfield[data-reduced-motion="true"][b-mdj3mc3vax]  .dreamfield-tap-reaction,
.dreamfield[data-effective-motion-level="off"][b-mdj3mc3vax]  .dreamfield-tap-reaction,
.dreamfield[data-effective-motion-level="gentle"][b-mdj3mc3vax]  .dreamfield-tap-reaction,
.dreamfield[data-visible="false"][b-mdj3mc3vax]  .dreamfield-tap-reaction {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .dreamfield[data-motion="auto"][b-mdj3mc3vax]  .dreamfield-tap-reaction {
        display: none !important;
    }
}

/* Gentle is deliberately opacity-only. This keyframe is shared by atmosphere
 * ribbons, constellations, focal light, and star wrappers without introducing
 * a per-element JavaScript loop or any translation/parallax side effect. */
@keyframes dreamfield-gentle-opacity-b-mdj3mc3vax {
    from { opacity: .68; }
    to { opacity: 1; }
}
/* /Components/Dreamfield/DreamspaceMotionPreview.razor.rz.scp.css */
.dreamspace-motion-preview[b-yplut5ol0t] {
    display: grid;
    gap: .45rem;
    align-content: center;
    min-width: 10rem;
    padding: .75rem;
    border: 1px solid rgba(var(--dr-primary-rgb), .22);
    border-radius: var(--dr-radius-small);
    background: linear-gradient(145deg, rgba(var(--dr-primary-rgb), .12), rgba(var(--dr-bg-rgb), .62));
}

.dreamspace-motion-preview__sky[b-yplut5ol0t] {
    position: relative;
    min-height: 5.6rem;
    overflow: hidden;
    border-radius: .55rem;
    background: radial-gradient(circle at 50% 35%, rgba(var(--dr-primary-rgb), .28), transparent 48%), linear-gradient(180deg, #171b3c, #101326);
}

.dreamspace-motion-preview__sky[b-yplut5ol0t]::after {
    position: absolute;
    right: -12%;
    bottom: -48%;
    left: -12%;
    height: 72%;
    border-radius: 50% 50% 0 0;
    background: linear-gradient(180deg, rgba(var(--dr-success-rgb), .16), rgba(var(--dr-success-rgb), .03));
    content: "";
}

.dreamspace-motion-preview__star[b-yplut5ol0t] {
    position: absolute;
    width: .24rem;
    height: .24rem;
    border-radius: 50%;
    background: #eeeaff;
    box-shadow: 0 0 .45rem rgba(228, 223, 255, .8);
    animation: dreamspace-preview-twinkle-b-yplut5ol0t 3.8s ease-in-out infinite;
}

.dreamspace-motion-preview__star--one[b-yplut5ol0t] { top: 22%; left: 20%; }
.dreamspace-motion-preview__star--two[b-yplut5ol0t] { top: 34%; left: 68%; width: .16rem; height: .16rem; animation-delay: -1.2s; }
.dreamspace-motion-preview__star--three[b-yplut5ol0t] { top: 18%; left: 48%; width: .12rem; height: .12rem; animation-delay: -2.2s; }

.dreamspace-motion-preview__orbit[b-yplut5ol0t] {
    position: absolute;
    top: 40%;
    left: 50%;
    width: 6.4rem;
    height: 2.25rem;
    border: 1px solid rgba(218, 210, 255, .64);
    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(-16deg);
    animation: dreamspace-preview-orbit-b-yplut5ol0t 8s linear infinite;
}

.dreamspace-motion-preview__planet[b-yplut5ol0t] {
    position: absolute;
    top: 40%;
    left: 50%;
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, #fff, #cfc5ff 48%, #766db8);
    box-shadow: 0 0 .8rem rgba(204, 195, 255, .72);
    transform: translate(-50%, -50%);
}

.dreamspace-motion-preview__caption[b-yplut5ol0t] {
    color: var(--dr-text-muted);
    font-size: .78rem;
    font-weight: 750;
    text-align: center;
}

[data-motion-level="off"] .dreamspace-motion-preview__star[b-yplut5ol0t],
[data-motion-level="off"] .dreamspace-motion-preview__orbit[b-yplut5ol0t],
[data-motion-level="gentle"] .dreamspace-motion-preview__orbit[b-yplut5ol0t] {
    animation: none;
}

[data-motion-level="gentle"] .dreamspace-motion-preview__star[b-yplut5ol0t] {
    animation-name: dreamspace-preview-gentle-twinkle-b-yplut5ol0t;
}

[data-motion-level="balanced"] .dreamspace-motion-preview__orbit[b-yplut5ol0t] { animation-duration: 12s; }
[data-motion-level="lively"] .dreamspace-motion-preview__orbit[b-yplut5ol0t] { animation-duration: 8s; }
[data-motion-level="immersive"] .dreamspace-motion-preview__orbit[b-yplut5ol0t] { animation-duration: 5s; }

@keyframes dreamspace-preview-twinkle-b-yplut5ol0t {
    0%, 100% { opacity: .42; transform: scale(.82); }
    50% { opacity: 1; transform: scale(1.18); }
}

@keyframes dreamspace-preview-gentle-twinkle-b-yplut5ol0t {
    0%, 100% { opacity: .56; }
    50% { opacity: .92; }
}

@keyframes dreamspace-preview-orbit-b-yplut5ol0t {
    from { transform: translate(-50%, -50%) rotate(-16deg); }
    to { transform: translate(-50%, -50%) rotate(344deg); }
}

@media (prefers-reduced-motion: reduce) {
    .dreamspace-motion-preview__orbit[b-yplut5ol0t] {
        animation: none;
    }

    .dreamspace-motion-preview__star[b-yplut5ol0t] {
        animation-name: dreamspace-preview-gentle-twinkle-b-yplut5ol0t;
        animation-duration: 4.8s;
    }
}
/* /Components/Dreamline/TodayDreamline.razor.rz.scp.css */
.dreamline-panel[b-c7ajha8bux] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(24px, 3.4vw, 48px) clamp(20px, 3.8vw, 56px) clamp(18px, 2.2vw, 30px);
    border: 1px solid rgba(178, 186, 245, .2);
    border-radius: 34px;
    /* Only this surface is glass. The fixed Dreamfield remains behind the
       application controls and is allowed to read through this local layer. */
    background:
        radial-gradient(ellipse 62% 54% at 48% 46%, rgba(64, 53, 137, .18), transparent 68%),
        radial-gradient(circle at 86% 48%, rgba(200, 126, 223, .10), transparent 30%),
        radial-gradient(circle at 7% 52%, rgba(87, 155, 221, .09), transparent 28%),
        rgba(7, 13, 35, .22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .07),
        0 34px 90px rgba(1, 5, 18, .38),
        0 0 80px rgba(75, 65, 169, .08);
    backdrop-filter: saturate(112%);
}

.dreamline-heading[b-c7ajha8bux] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: clamp(14px, 2vw, 24px);
}

.dreamline-heading .eyebrow[b-c7ajha8bux] {
    margin-bottom: 8px;
    color: rgba(199, 190, 255, .86);
    font-size: clamp(.72rem, 1.15vw, 1rem);
    letter-spacing: .28em;
}

.dreamline-heading h2[b-c7ajha8bux] {
    margin: 0;
    color: #f8f7ff;
    font-family: var(--dr-font-display, "Avenir Next", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif);
    font-size: clamp(2.35rem, 5.2vw, 4.35rem);
    font-weight: 720;
    letter-spacing: -.045em;
    line-height: .96;
    text-shadow: 0 4px 26px rgba(204, 194, 255, .14);
}

.dreamline-day-label[b-c7ajha8bux] {
    display: inline-flex;
    align-items: center;
    min-height: 58px;
    padding: 12px 24px 12px 18px;
    border: 1px solid rgba(204, 201, 255, .28);
    border-radius: 999px;
    color: rgba(224, 221, 255, .78);
    background: rgba(20, 25, 59, .62);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 24px rgba(145, 131, 225, .08);
    font-size: clamp(.72rem, 1.1vw, 1rem);
    font-weight: 700;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.dreamline-day-label[b-c7ajha8bux]::before {
    content: "☾";
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-right: 12px;
    border: 1px solid rgba(207, 200, 255, .25);
    border-radius: 50%;
    color: rgba(205, 199, 255, .92);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1;
}

.dreamline-stage[b-c7ajha8bux] {
    position: relative;
    width: 100%;
    /* The concept is a hero canvas: let the orbit breathe on desktop while the
       SVG viewBox keeps every timestamp and connector data-driven. */
    aspect-ratio: 1000 / 640;
    max-width: 1280px;
    min-height: 300px;
    margin: 0 auto 8px;
    overflow: visible;
    border-radius: 26px;
    outline: none;
    touch-action: auto;
    transition: box-shadow 220ms ease;
    /* Procedural depth belongs to the stage itself; it stays soft and
       unblurred so the orbit remains crisp against the fixed Dreamfield. */
    background:
        radial-gradient(ellipse 34% 44% at 30% 42%, rgba(155, 128, 255, .12), transparent 72%),
        radial-gradient(ellipse 31% 42% at 71% 54%, rgba(244, 194, 117, .10), transparent 74%),
        radial-gradient(ellipse 72% 24% at 50% 51%, rgba(113, 144, 203, .08), transparent 76%),
        rgba(18, 20, 55, .10);
}

.dreamline-stage:focus-visible[b-c7ajha8bux] {
    box-shadow: 0 0 0 2px rgba(190, 180, 255, .5), 0 0 0 7px rgba(190, 180, 255, .09);
}

.dreamline-svg[b-c7ajha8bux],
.dreamline-node-layer[b-c7ajha8bux] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.dreamline-svg[b-c7ajha8bux] {
    z-index: 1;
    overflow: visible;
}

.dreamline-node-layer[b-c7ajha8bux] {
    z-index: 4;
}

.dreamline-cosmos[b-c7ajha8bux] {
    opacity: .76;
    pointer-events: none;
}

/* The panel's share of the one galaxy. Held deliberately faint: it exists so
   the band does not stop at the panel edge, and it must never compete with the
   orbit drawn on top of it. Same axis and same off-centre core as the fixed
   layer; no blur, so its structure stays as sharp as the stars beside it. */
.dreamline-cosmos__galaxy[b-c7ajha8bux] {
    opacity: .62;
    transform: rotate(-27deg);
    transform-box: view-box;
    transform-origin: center;
    animation: dreamline-galaxy-drift-b-c7ajha8bux 238s ease-in-out infinite alternate;
}

/* The lanes composite with plain alpha and carry their own per-lane opacity in
   the markup. Deliberately not `mix-blend-mode: multiply`: the band beneath is
   already faint, and multiplying a near-black lane over it crushes both. */

@keyframes dreamline-galaxy-drift-b-c7ajha8bux {
    from {
        transform: rotate(-27deg)
            translate(calc(-9px * var(--dreamline-motion-spatial-multiplier, 1)), calc(4px * var(--dreamline-motion-spatial-multiplier, 1)));
    }
    to {
        transform: rotate(-27deg)
            translate(calc(9px * var(--dreamline-motion-spatial-multiplier, 1)), calc(-4px * var(--dreamline-motion-spatial-multiplier, 1)));
    }
}

.dreamline-cosmos__star[b-c7ajha8bux] {
    fill: #c8dfff;
    opacity: .46;
    /* Restrained, deliberately out of step: the nth-child offsets below keep
       neighbouring stars from breathing together, which is the difference
       between a sky and a string of fairy lights. */
    animation: dreamline-cosmos-twinkle-b-c7ajha8bux 19s ease-in-out infinite;
}

.dreamline-cosmos__star:nth-of-type(3n)[b-c7ajha8bux] { animation-duration: 24.5s; animation-delay: -7.3s; }
.dreamline-cosmos__star:nth-of-type(3n + 1)[b-c7ajha8bux] { animation-duration: 17.5s; animation-delay: -13.1s; }
.dreamline-cosmos__star:nth-of-type(5n)[b-c7ajha8bux] { animation-duration: 29s; animation-delay: -4.7s; }

@keyframes dreamline-cosmos-twinkle-b-c7ajha8bux {
    0%, 100% { opacity: .34; }
    43% { opacity: .58; }
    71% { opacity: .4; }
}

.dreamline-cosmos__star--bright[b-c7ajha8bux] {
    fill: #f8e8d4;
    opacity: .8;
    filter: drop-shadow(0 0 8px rgba(219, 208, 255, .72));
}

.dreamline-cosmos__star--soft[b-c7ajha8bux] {
    fill: #c9b9ff;
    opacity: .62;
}

.dreamline-cosmos__debris[b-c7ajha8bux] {
    fill: rgba(178, 164, 221, .42);
    stroke: rgba(229, 210, 242, .35);
    stroke-width: 1;
}

.dreamline-layer[b-c7ajha8bux] {
    pointer-events: none;
}

.dreamline-rail[b-c7ajha8bux] {
    pointer-events: none;
}

.dreamline-rail--rear .dreamline-rail__path[b-c7ajha8bux] {
    fill: none;
    stroke: rgba(164, 170, 225, .42);
    stroke-width: 1.2px;
    opacity: .45;
    filter: drop-shadow(0 0 4px rgba(118, 105, 181, .12));
}

.dreamline-rail--front .dreamline-rail__path[b-c7ajha8bux] {
    fill: none;
    stroke: url(#dreamline-rail-gradient);
    stroke-width: 2.4px;
    opacity: .95;
    filter: drop-shadow(0 0 7px rgba(159, 216, 207, .3));
}

.dreamline-rail path[b-c7ajha8bux],
.dreamline-orbit path[b-c7ajha8bux],
.dreamline-event line[b-c7ajha8bux],
.dreamline-event path[b-c7ajha8bux],
.dreamline-comparison-branch line[b-c7ajha8bux] {
    vector-effect: non-scaling-stroke;
}

.dreamline-path[b-c7ajha8bux],
.dreamline-prediction-range[b-c7ajha8bux],
.dreamline-accuracy-ribbon[b-c7ajha8bux],
.dreamline-sleep-segment[b-c7ajha8bux],
.dreamline-active-continuation[b-c7ajha8bux],
.dreamline-orbit__glow[b-c7ajha8bux],
.dreamline-orbit__line[b-c7ajha8bux] {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Historical forecast windows are neutral context. They sit underneath the
   live planning ribbon and never score the recorded event with green/red. */
.dreamline-accuracy-ribbon[b-c7ajha8bux] {
    stroke: rgba(190, 195, 213, .30);
    stroke-width: 5.5;
    opacity: .68;
    filter: none;
}

/* Rear rail: the quiet canonical track behind the event treatment. */
.dreamline-path--inactive[b-c7ajha8bux] {
    stroke: rgba(164, 170, 225, .3);
    stroke-width: 1.2px;
    opacity: .45;
    filter: drop-shadow(0 0 5px rgba(118, 105, 181, .1));
}

/* Memory rail: recorded past. Static — the past does not move. */
.dreamline-path--memory[b-c7ajha8bux] {
    stroke: url(#dreamline-rail-gradient);
    stroke-width: 2.2;
    stroke-dashoffset: 0;
    filter: drop-shadow(0 0 6px rgba(159, 216, 207, .22));
}

/* Active sleep still uses the canonical rail geometry, but its completed span
   and its measured forward estimate need their own paint. These paths were
   retained in the SVG during the VFX refactor while their paint rules were
   accidentally lost, leaving the live sleep story visually silent. */
.dreamline-path--active[b-c7ajha8bux] {
    stroke: url(#dreamline-rail-gradient);
    stroke-width: 2.4px;
    stroke-dashoffset: 0;
    opacity: .95;
    filter: drop-shadow(0 0 7px rgba(159, 216, 207, .3));
}

.dreamline-sleep-segment[b-c7ajha8bux] {
    stroke-width: 7;
    opacity: .76;
}

.dreamline-sleep-segment.completed[b-c7ajha8bux] {
    stroke: rgba(112, 103, 165, .34);
}

.dreamline-sleep-segment.completed.continuity[b-c7ajha8bux] {
    stroke: rgba(154, 139, 203, .48);
    filter: drop-shadow(0 0 6px rgba(176, 160, 240, .18));
}

.dreamline-sleep-segment.active[b-c7ajha8bux] {
    stroke: rgba(165, 148, 236, .68);
    filter: drop-shadow(0 0 8px rgba(186, 169, 250, .3));
}

/* A calm static continuation keeps the estimate legible at every motion tier.
   Guidance, motes, and fragments are the only continuously travelling rails. */
.dreamline-active-continuation[b-c7ajha8bux] {
    stroke: rgba(203, 194, 255, .52);
    stroke-width: 5;
    stroke-dasharray: 2 13;
    opacity: .9;
    pointer-events: none;
}

.dreamline-prediction-range--outer[b-c7ajha8bux] {
    stroke: url(#dreamline-range-gradient);
    stroke-width: 8;
    opacity: .16;
    filter: blur(2px);
}

.dreamline-prediction-range--inner[b-c7ajha8bux] {
    stroke: url(#dreamline-range-gradient);
    stroke-width: 3.6;
    opacity: .82;
    filter: drop-shadow(0 0 5px rgba(198, 189, 255, .32));
}

/* Horizon rail: the future from Now to domain end. Static, dotted. */
.dreamline-path--horizon[b-c7ajha8bux] {
    stroke: rgba(174, 160, 230, .44);
    stroke-width: 1.8;
    stroke-linecap: round;
    filter: drop-shadow(0 0 4px rgba(135, 118, 198, .1));
}

/* The one moving guidance signal is clipped to the current-to-primary span
   by its SVG mask. It never changes the rail or timestamps beneath it. */
.dreamline-path--guidance[b-c7ajha8bux] {
    stroke: rgba(240, 229, 255, .72);
    stroke-width: 2.2;
    stroke-dasharray: 1.4 18;
    animation: dreamline-guidance-flow-b-c7ajha8bux 6.5s linear infinite;
    filter: drop-shadow(0 0 7px rgba(206, 179, 255, .38));
}

/* Three chevrons ahead of Now, tangent-aligned on the same sector path.
   Static — they mark position, not motion. */
.dreamline-chevron[b-c7ajha8bux] {
    fill: none;
    stroke: rgba(210, 199, 244, .64);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

/* ---- Orbit: static bloom, band, and rail, plus animated motes and fragments ---- */

.dreamline-orbit__phase[b-c7ajha8bux] {
    fill: none;
    stroke-width: 13;
    stroke-linecap: round;
    opacity: .72;
    filter: blur(3px);
}

.dreamline-orbit__phase--day[b-c7ajha8bux] {
    stroke: url(#dreamline-day-arc-gradient);
}

.dreamline-orbit__phase--night[b-c7ajha8bux] {
    stroke: url(#dreamline-night-arc-gradient);
}

.dreamline-orbit__glow[b-c7ajha8bux] {
    stroke: rgba(174, 205, 240, .16);
    stroke-width: 10;
    filter: blur(8px);
    animation: none; /* static bloom */
}

.dreamline-orbit__line[b-c7ajha8bux] {
    stroke: url(#dreamline-orbit-gradient);
    stroke-width: 1.6;
    stroke-dasharray: .8 18;
    opacity: .82;
    animation: none; /* static band */
}

.dreamline-orbit[b-c7ajha8bux] {
    filter: drop-shadow(0 0 18px rgba(135, 118, 214, .08));
}

/* Motes: sparse, drifting points along the orbit. Animated. */
.dreamline-orbit__dust[b-c7ajha8bux] {
    fill: none;
    stroke: url(#dreamline-dust-gradient);
    stroke-width: 2.2;
    stroke-linecap: round;
    opacity: .76;
    stroke-dasharray: .9 26 1.8 41 .7 33 1.3 52;
    animation: dreamline-motes-b-c7ajha8bux 26s linear infinite;
}

.dreamline-day-clock[b-c7ajha8bux] { pointer-events: none; opacity: .90; }
.dreamline-day-clock__label[b-c7ajha8bux] { overflow: visible; }
.dreamline-day-clock__tick[b-c7ajha8bux] {
    stroke: rgba(202, 207, 239, .38);
    stroke-width: 1;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}
/* Ticks are the clock's structure now that the face carries all 24 bare
   numerals. Lengths come from the layout's outer/inner pair; weight and
   contrast establish the same hierarchy as the labels. */
.dreamline-day-clock__tick--boundary[b-c7ajha8bux] { stroke: rgba(190, 198, 236, .42); stroke-width: 1; }
.dreamline-day-clock__tick--half-hour[b-c7ajha8bux] { stroke: rgba(192, 201, 235, .48); stroke-width: .9; }
.dreamline-day-clock__tick--minor-hour[b-c7ajha8bux] { stroke: rgba(204, 210, 243, .62); stroke-width: 1.05; }
.dreamline-day-clock__tick--three-am[b-c7ajha8bux],
.dreamline-day-clock__tick--nine-am[b-c7ajha8bux],
.dreamline-day-clock__tick--three-pm[b-c7ajha8bux],
.dreamline-day-clock__tick--nine-pm[b-c7ajha8bux] { stroke: rgba(226, 229, 250, .76); stroke-width: 1.35; }
.dreamline-day-clock__tick--midnight[b-c7ajha8bux] { stroke: rgba(196, 210, 248, .86); stroke-width: 1.75; }
.dreamline-day-clock__tick--noon[b-c7ajha8bux] { stroke: rgba(248, 231, 197, .82); stroke-width: 1.6; }
.dreamline-day-clock__time[b-c7ajha8bux] {
    fill: rgba(235, 236, 252, .80);
    font-family: var(--dr-font-numeric, "Avenir Next Condensed", "Bahnschrift", "Segoe UI Variable Display", "Segoe UI", sans-serif);
    /* Sized from the measured SVG content width so the rendered size stays put
       across viewports; see ClockLabelUserUnits. The literal is the pre-measure
       fallback for a ~390 px stage. */
    font-size: var(--dreamline-clock-label-size, 79px);
    font-weight: 700;
    letter-spacing: -.025em;
    font-variant-numeric: tabular-nums lining-nums;
    paint-order: stroke fill;
    stroke: rgba(7, 9, 25, .68);
    stroke-width: 2.6px;
    stroke-linejoin: round;
    text-anchor: middle;
}
.dreamline-day-clock__label--primary .dreamline-day-clock__time[b-c7ajha8bux] {
    fill: rgba(248, 246, 255, .96);
    font-size: calc(var(--dreamline-clock-label-size, 79px) * var(--dreamline-clock-primary-em, 1.45));
    font-weight: 790;
}
.dreamline-day-clock__label--secondary .dreamline-day-clock__time[b-c7ajha8bux] {
    fill: rgba(241, 241, 253, .90);
    font-size: calc(var(--dreamline-clock-label-size, 79px) * var(--dreamline-clock-secondary-em, 1.2));
    font-weight: 740;
}
.dreamline-day-clock__label--compact[b-c7ajha8bux] { display: none; }

/*
    Centre readout: the live clock, or the selected event. Purely decorative and
    pointer-transparent — it never competes for a tap, and it is declared before
    the planets so an overlapping planet covers it rather than displacing it.
*/
.dreamline-readout[b-c7ajha8bux] {
    pointer-events: none;
}

.dreamline-readout__time[b-c7ajha8bux] {
    fill: rgba(239, 238, 252, .72);
    font-family: var(--dr-font-numeric, "Avenir Next Condensed", "Bahnschrift", "Segoe UI Variable Display", "Segoe UI", sans-serif);
    font-size: var(--dreamline-readout-time-size, 78px);
    font-weight: 620;
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: .025em;
}

/* Selection deliberately has no typographic treatment of its own. The centre
   time renders identically in both modes; the spoke is what identifies which
   node the time belongs to. */

.dreamline-readout__spoke[b-c7ajha8bux] {
    stroke: rgba(214, 205, 255, .5);
    stroke-width: 1.4;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

/* A selected event draws one direct link to its exact clock anchor, then holds. */
.dreamline-readout[data-dreamline-readout-mode="selected"] .dreamline-readout__spoke[b-c7ajha8bux] {
    stroke: rgba(232, 224, 255, .72);
    stroke-dasharray: 1;
    animation: dreamline-readout-retarget-b-c7ajha8bux .34s ease-out 1 both;
}

@keyframes dreamline-readout-retarget-b-c7ajha8bux {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
}

/* Fragments: denser secondary animated layer on the same path. */
.dreamline-orbit__fragments[b-c7ajha8bux] {
    fill: none;
    stroke: rgba(143, 161, 219, .34);
    stroke-width: 1.4;
    stroke-linecap: round;
    opacity: .54;
    stroke-dasharray: .6 62 1.1 38 .8 71 1.4 44 .5 55;
    animation: dreamline-fragments-b-c7ajha8bux 38s linear infinite;
}

/* Exactly three continuously animated elements: guidance, motes, fragments.
   All use negative dashoffset so they travel forward along the path. */

@keyframes dreamline-motes-b-c7ajha8bux {
    to { stroke-dashoffset: -1000; }
}

@keyframes dreamline-fragments-b-c7ajha8bux {
    to { stroke-dashoffset: -1000; }
}

/* Responsive motes/fragments: fewer particles on narrow screens. */
@media (max-width: 600px) {
    .dreamline-orbit__dust[b-c7ajha8bux] {
        stroke-width: 2.8;
        opacity: .9;
        stroke-dasharray: 1.8 25 2.4 34 1.6 29;
        animation-duration: 26s;
    }
    .dreamline-orbit__fragments[b-c7ajha8bux] {
        stroke: rgba(174, 190, 238, .52);
        stroke-width: 1.9;
        opacity: .72;
        stroke-dasharray: 1.6 54 2.2 42 1.4 61;
        animation-duration: 34s;
    }
    .dreamline-path--guidance[b-c7ajha8bux] {
        stroke-width: 2.8;
        stroke-dasharray: 2.8 12;
        opacity: .9;
        filter: drop-shadow(0 0 8px rgba(206, 179, 255, .5));
    }
    .dreamline-prediction-range--outer[b-c7ajha8bux] { stroke-width: 9.5; opacity: .2; }
    .dreamline-prediction-range--inner[b-c7ajha8bux] { stroke-width: 4.2; opacity: .9; }
    .dreamline-sleep-segment[b-c7ajha8bux] { stroke-width: 8.2; }
    .dreamline-active-continuation[b-c7ajha8bux] { stroke-width: 5.8; opacity: .96; }
}

.dreamline-event[b-c7ajha8bux] {
    --dreamline-event-final-opacity: 1;
    --dreamline-artwork-depth-opacity: 1;
    --planet-fill: rgba(111, 103, 160, .94);
    --planet-ring: rgba(210, 204, 244, .48);
    --planet-halo: rgba(157, 144, 219, .12);
    opacity: 0;
    animation: dreamline-node-reveal-b-c7ajha8bux 620ms cubic-bezier(.22, .82, .22, 1) forwards;
    animation-delay: var(--dreamline-reveal-delay, 0ms);
}

/* Fallback and rerouted guidance stays usable and authoritative — the engine
   selected it — but it is desaturated slightly so a native prediction still
   reads as the more confident of the two. */
[data-dreamline-guidance-tone="fallback"] .dreamline-event__icon[b-c7ajha8bux],
[data-dreamline-guidance-tone="rerouted"] .dreamline-event__icon[b-c7ajha8bux] {
    filter: saturate(.86);
}

[data-dreamline-guidance-tone="fallback"] .dreamline-event__dot[b-c7ajha8bux],
[data-dreamline-guidance-tone="rerouted"] .dreamline-event__dot[b-c7ajha8bux] {
    stroke-dasharray: 9 5;
}

[data-dreamline-active-endpoint] .dreamline-event__halo[b-c7ajha8bux] {
    opacity: .9;
}

/* A missed window still belongs on the orbit — the caregiver should be able to
   see that it came and went — but it must never read as something to act on.
   It sits back: dimmer, cooler, and ringed with a broken outline that says
   "this passed" rather than "this is next". */
[data-dreamline-missed] .dreamline-event__icon[b-c7ajha8bux] {
    opacity: .42;
    filter: grayscale(.72) brightness(.86);
}

[data-dreamline-missed] .dreamline-event__halo[b-c7ajha8bux] {
    opacity: .18;
}

[data-dreamline-missed] .dreamline-event__ring[b-c7ajha8bux] {
    stroke: rgba(196, 190, 226, .34);
    stroke-dasharray: 3 7;
}

.dreamline-event__planet[b-c7ajha8bux] {
    transform-box: fill-box;
    transform-origin: center;
    opacity: clamp(.92, var(--dreamline-artwork-depth-opacity, 1), 1);
}

.dreamline-event__pin[b-c7ajha8bux] {
    fill: rgba(240, 243, 255, .82);
    stroke: rgba(116, 132, 197, .92);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 5px rgba(191, 205, 255, .58));
}

.dreamline-event__pin.selected[b-c7ajha8bux] {
    fill: #fff;
    stroke: rgba(226, 190, 255, .96);
}

/* The pin is the exact civil-time bearing. Bodies may sit off the rail only
   along this short normal connector, never along the tangent. */
.dreamline-event__connector[b-c7ajha8bux] {
    pointer-events: none;
    stroke: rgba(187, 201, 244, .52);
    stroke-width: 2.25;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 3px rgba(163, 180, 244, .28));
}

.dreamline-event--bedtime .dreamline-event__connector[b-c7ajha8bux],
.dreamline-event--napstart .dreamline-event__connector[b-c7ajha8bux] {
    stroke: rgba(174, 161, 222, .54);
}

.dreamline-event--wake .dreamline-event__connector[b-c7ajha8bux],
.dreamline-event--napend .dreamline-event__connector[b-c7ajha8bux],
.dreamline-event--current .dreamline-event__connector[b-c7ajha8bux] {
    stroke: rgba(183, 225, 232, .58);
}

.dreamline-event__stack-badge[b-c7ajha8bux] {
    pointer-events: none;
    filter: drop-shadow(0 2px 5px rgba(2, 6, 22, .58));
}

.dreamline-event__stack-badge circle[b-c7ajha8bux] {
    fill: rgba(18, 24, 57, .95);
    stroke: rgba(225, 218, 255, .84);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.dreamline-event__stack-badge text[b-c7ajha8bux] {
    fill: rgba(250, 248, 255, .98);
    font-size: 18px;
    font-weight: 850;
}

.dreamline-event__halo[b-c7ajha8bux],
.dreamline-event__dot[b-c7ajha8bux] {
    transform-box: fill-box;
    transform-origin: center;
}

.dreamline-event__halo[b-c7ajha8bux] {
    fill: var(--planet-halo);
    opacity: .5;
}

.dreamline-event__ring-overlay[b-c7ajha8bux] {
    pointer-events: none;
}

/* The companion-pack overlays share the planet's local transform but keep a
   separate calm luminance pulse. Opacity only means the exact timestamp
   anchor, planet, and connector never move for decoration. */
.dreamline-event--current[b-c7ajha8bux]  [data-dreamline-ring="active"] {
    animation: dreamline-ring-breathe-b-c7ajha8bux 4.8s ease-in-out infinite;
}

.dreamline-event.primary-next[b-c7ajha8bux]  [data-dreamline-ring="predicted"] {
    animation: dreamline-ring-breathe-b-c7ajha8bux 7.4s ease-in-out infinite;
    animation-delay: -2.2s;
}

.dreamline-event.selected[b-c7ajha8bux]  [data-dreamline-ring="selected"] {
    opacity: .96;
}

.dreamline-event__dot[b-c7ajha8bux] {
    fill: var(--planet-fill);
    stroke: var(--planet-ring);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 8px 10px rgba(2, 5, 18, .34));
}

/*
    The dot is the artwork's fallback plate — it only shows through if the body
    fails to draw. Behind a prediction glyph there is no body to fall back to,
    just an open silhouette, so the plate became a solid disc that filled the
    glyph in. It is unpainted rather than removed: the geometry verifier
    measures this element to prove the planet sits on its projected display
    point, and deleting it would fail `planet-missing`.
*/
.dreamline-event--predicted .dreamline-event__dot[b-c7ajha8bux] {
    fill: none;
    stroke: none;
    filter: none;
}

/*
    Prediction artwork is a supplied painterly planet/orbit trace, not a flat
    icon. Keep a diffuse depth shadow so the clouds and ring separate from the
    rail without adding a cartoon outline.
*/
.dreamline-event--predicted .dreamline-event__icon[b-c7ajha8bux] {
    filter: drop-shadow(0 4px 8px rgba(2, 5, 18, .42));
}

/* A forecast is not inert — it is the thing the caregiver is waiting on. One
   slow opacity breath, no movement: the pin's exact bearing is the point of it.
   `approaching` already runs its own faster pulse on the halo, so this stays
   deliberately below that in both rate and depth. */
.dreamline-event--predicted[b-c7ajha8bux]  [data-dreamline-prediction-glyph] {
    transform-box: fill-box;
    transform-origin: center;
    animation: dreamline-glyph-breathe-b-c7ajha8bux 9s ease-in-out infinite;
}

.dreamline-event--predicted.primary-next[b-c7ajha8bux]  [data-dreamline-prediction-glyph] {
    animation-duration: 6.4s;
}

@keyframes dreamline-glyph-breathe-b-c7ajha8bux {
    0%, 100% { opacity: .82; }
    50% { opacity: 1; }
}

/* The artwork is the planet body, so it must not be flattened to a silhouette.
   State is carried by the ring, the halo, and how brightly the body is lit. */
.dreamline-event__icon[b-c7ajha8bux] {
    pointer-events: none;
    filter: drop-shadow(0 6px 9px rgba(2, 5, 18, .38));
}

.dreamline-event--completed .dreamline-event__icon[b-c7ajha8bux] {
    filter: drop-shadow(0 6px 9px rgba(2, 5, 18, .38));
}

/* Completed icon opacity is now driven by temporal tier, not a blanket fade.
   --temporal-icon-opacity is consumed by the tier rules below. */
.dreamline-event--temporal-recentpast .dreamline-event__icon[b-c7ajha8bux] {
    opacity: .92;
}

.dreamline-event--temporal-midpast .dreamline-event__icon[b-c7ajha8bux] {
    opacity: .82;
}

.dreamline-event--temporal-oldpast .dreamline-event__icon[b-c7ajha8bux] {
    opacity: .68;
}

.dreamline-event--temporal-oldpast.selected .dreamline-event__icon[b-c7ajha8bux],
.dreamline-event--temporal-midpast.selected .dreamline-event__icon[b-c7ajha8bux] {
    opacity: .92;
}

.dreamline-event--completed[b-c7ajha8bux] {
    --planet-fill: rgba(74, 70, 112, .55);
    --planet-ring: rgba(180, 173, 220, .38);
    --planet-halo: rgba(132, 120, 188, .08);
}

.dreamline-event--predicted[b-c7ajha8bux],
.dreamline-event--future[b-c7ajha8bux] {
    --planet-fill: rgba(59, 51, 104, .5);
    --planet-ring: rgba(233, 226, 255, .84);
    --planet-halo: rgba(190, 177, 250, .2);
}

.dreamline-event--future[b-c7ajha8bux] {
    --dreamline-event-final-opacity: .76;
}

/* Inner planet-body scale group preserves the hit target (outer dot)
   while the artwork scales down for past tiers.

   The pivot must be the group's own origin. An SVG transform attribute maps
   to the CSS transform property, so it obeys transform-origin, and a 128px
   origin scaled the artwork about the master's centre rather than the point
   the artwork is actually drawn around — PlanetInlineSvg has already
   translated the body onto (0,0) by then. That pushed every aged planet
   128 * (1 - scale) down and right, 12.8 units for an old-past node, while
   its procedural body, rings and leader stayed on the node's display point. */
.dreamline-event__body-scale[b-c7ajha8bux] {
    transform-origin: 0 0;
}

.dreamline-event.confidence-high[b-c7ajha8bux],
.dreamline-node.confidence-high[b-c7ajha8bux] {
    --confidence-opacity: 1;
}

.dreamline-event.confidence-medium[b-c7ajha8bux],
.dreamline-node.confidence-medium[b-c7ajha8bux] {
    --confidence-opacity: .86;
}

.dreamline-event.confidence-low[b-c7ajha8bux],
.dreamline-node.confidence-low[b-c7ajha8bux] {
    --confidence-opacity: .62;
}

/* ---- Temporal depth: layer-specific treatments replace whole-node opacity ----
   Past nodes fade their atmosphere and terminator rather than the whole planet.
   Selected old nodes retain inspectable treatment without moving or resizing. */

/* MidPast: slightly muted atmosphere, reduced halo */
.dreamline-event--temporal-midpast .dreamline-event__halo[b-c7ajha8bux] {
    opacity: .62;
}

.dreamline-event--temporal-midpast[b-c7ajha8bux]  [data-dreamline-planet-layer="atmosphere-back"] {
    opacity: .68;
}

.dreamline-event--temporal-midpast[b-c7ajha8bux]  [data-dreamline-planet-layer="terminator-shadow"] {
    opacity: .72;
}

/* OldPast: deeper fade, but still selectable and tappable */
.dreamline-event--temporal-oldpast .dreamline-event__halo[b-c7ajha8bux] {
    opacity: .38;
}

.dreamline-event--temporal-oldpast .dreamline-event__dot[b-c7ajha8bux] {
    opacity: .64;
}

.dreamline-event--temporal-oldpast[b-c7ajha8bux]  [data-dreamline-planet-layer="atmosphere-back"] {
    opacity: .46;
}

.dreamline-event--temporal-oldpast[b-c7ajha8bux]  [data-dreamline-planet-layer="terminator-shadow"] {
    opacity: .52;
}

.dreamline-event--temporal-oldpast[b-c7ajha8bux]  [data-dreamline-planet-layer="surface-texture"] {
    opacity: .6;
}

.dreamline-event--temporal-oldpast[b-c7ajha8bux]  [data-dreamline-planet-layer="sparkles"] {
    opacity: .34;
}

.dreamline-event--temporal-oldpast[b-c7ajha8bux]  [data-dreamline-planet-layer="clouds-back"],
.dreamline-event--temporal-oldpast[b-c7ajha8bux]  [data-dreamline-planet-layer="clouds-front"] {
    opacity: .52;
}

/* Selected / Primary nodes regain full inspectable treatment regardless of age */
.dreamline-event--temporal-oldpast.selected .dreamline-event__dot[b-c7ajha8bux],
.dreamline-event--temporal-midpast.selected .dreamline-event__dot[b-c7ajha8bux] {
    opacity: 1;
}

.dreamline-event--temporal-oldpast.selected .dreamline-event__halo[b-c7ajha8bux],
.dreamline-event--temporal-midpast.selected .dreamline-event__halo[b-c7ajha8bux] {
    opacity: .82;
}

.dreamline-event--temporal-oldpast.selected[b-c7ajha8bux]  [data-dreamline-planet-layer="atmosphere-back"],
.dreamline-event--temporal-midpast.selected[b-c7ajha8bux]  [data-dreamline-planet-layer="atmosphere-back"] {
    opacity: .88;
}

.dreamline-event--temporal-oldpast.selected[b-c7ajha8bux]  [data-dreamline-planet-layer="terminator-shadow"],
.dreamline-event--temporal-midpast.selected[b-c7ajha8bux]  [data-dreamline-planet-layer="terminator-shadow"] {
    opacity: .86;
}

.dreamline-event--temporal-oldpast.selected[b-c7ajha8bux]  [data-dreamline-planet-layer="surface-texture"] {
    opacity: .84;
}

.dreamline-event--completed[b-c7ajha8bux] {
    --dreamline-event-final-opacity: .68;
}

.dreamline-event.primary-next[b-c7ajha8bux],
.dreamline-event--current[b-c7ajha8bux] {
    --dreamline-event-final-opacity: 1;
}

.dreamline-event--current[b-c7ajha8bux] {
    --planet-fill: rgba(52, 62, 96, .42);
    --planet-ring: rgba(241, 255, 252, .98);
    --planet-halo: rgba(169, 241, 229, .3);
}

.dreamline-event--current .dreamline-event__dot[b-c7ajha8bux] {
    animation: dreamline-current-breathe-b-c7ajha8bux 4.8s ease-in-out infinite;
}

.dreamline-event--current .dreamline-event__icon[b-c7ajha8bux] {
    filter: saturate(1.08) brightness(1.03) drop-shadow(0 6px 9px rgba(2, 5, 18, .38));
}

.dreamline-event.primary-next .dreamline-event__icon[b-c7ajha8bux] {
    filter: saturate(1.04) brightness(1.02) drop-shadow(0 6px 9px rgba(2, 5, 18, .38));
}

.dreamline-event--current .dreamline-event__halo[b-c7ajha8bux] {
    animation: dreamline-halo-breathe-b-c7ajha8bux 4.8s ease-in-out infinite;
}

.dreamline-event.primary-next .dreamline-event__dot[b-c7ajha8bux],
.dreamline-event.selected .dreamline-event__dot[b-c7ajha8bux] {
    filter: drop-shadow(0 0 12px rgba(213, 205, 255, .48)) drop-shadow(0 8px 12px rgba(2, 5, 18, .34));
}

.dreamline-event.primary-next:not(.selected) .dreamline-event__dot[b-c7ajha8bux] {
    stroke-width: 3;
}

/*
    One selected state, one outline. The selected ring overlay is already a
    crisp circle just outside the planet body, so the generic halo and the dot's
    own stroke sitting at almost the same radius only added contours - three
    concentric circles read as planets stacked on planets rather than as one
    chosen planet. The glow stays; the extra edges go.
*/
.dreamline-event.selected .dreamline-event__halo[b-c7ajha8bux] {
    opacity: .12;
}

.dreamline-event.selected .dreamline-event__dot[b-c7ajha8bux] {
    stroke: transparent;
}

/* The artwork's own edge strokes stand down while a planet is selected. The
   rule lives at the end of the stylesheet, after the rim-shimmer animation,
   because a keyframe that drives opacity beats a static declaration no matter
   how the two rules are ordered — see the selected-edge block below. */

.dreamline-event.primary-next .dreamline-event__halo[b-c7ajha8bux] {
    animation: dreamline-primary-halo-b-c7ajha8bux 8.6s ease-in-out infinite alternate;
}

.dreamline-event.approaching .dreamline-event__halo[b-c7ajha8bux] {
    animation: dreamline-approaching-b-c7ajha8bux 2.4s ease-in-out infinite;
}

/* Prediction art is intentionally planetary: restore a restrained celestial
   halo while keeping it subordinate to recorded/current bodies. */
.dreamline-event--predicted .dreamline-event__halo[b-c7ajha8bux] {
    fill: var(--planet-halo);
    opacity: .28;
    filter: blur(2.4px);
}

.dreamline-event--predicted.primary-next .dreamline-event__halo[b-c7ajha8bux] {
    opacity: .36;
}

.dreamline-event--predicted.approaching .dreamline-event__halo[b-c7ajha8bux] {
    opacity: .42;
}

/* The nap asset carries a literal Z motif for source fidelity. At phone size
   it can dominate the orbit/cloud silhouette, so soften only that semantic
   layer; bedtime and wake retain their full supplied traces. */
.dreamline-event--predicted .dreamline-event__icon[b-c7ajha8bux]  [data-dreamline-prediction-glyph="nap"] [data-dreamline-layered-layer="glyph-core-semantic-motif"] {
    opacity: .42;
}

.dreamline-event--bedtime.continuity[b-c7ajha8bux] {
    --planet-fill: rgba(75, 67, 111, .55);
    --planet-ring: rgba(238, 211, 151, .76);
    --planet-halo: rgba(226, 196, 136, .13);
}

.dreamline-event--wake.continuity[b-c7ajha8bux] {
    --planet-ring: rgba(205, 235, 224, .7);
}

.dreamline-annotations[b-c7ajha8bux] {
    pointer-events: none;
}

.dreamline-comparison-branch line[b-c7ajha8bux] {
    stroke: rgba(183, 174, 224, .35);
    stroke-width: 1;
    stroke-dasharray: 3 5;
}

.dreamline-comparison-branch circle[b-c7ajha8bux] {
    fill: rgba(207, 199, 245, .72);
}

.dreamline-node-layer[b-c7ajha8bux] {
    pointer-events: none;
}

.dreamline-node[b-c7ajha8bux] {
    position: absolute;
    z-index: 4;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: transparent;
    pointer-events: auto;
    transform: translate(-50%, -50%);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.dreamline-node--current[b-c7ajha8bux] {
    z-index: 8;
}

.dreamline-node--predicted[b-c7ajha8bux],
.dreamline-node--future[b-c7ajha8bux] {
    z-index: 7;
}

.dreamline-node.stack-member-hidden[b-c7ajha8bux] {
    z-index: 5;
    pointer-events: none;
}

.dreamline-node.stacked:not(.stack-member-hidden)[b-c7ajha8bux] {
    z-index: 9;
}

.dreamline-node.stacked .dreamline-node__hit[b-c7ajha8bux] {
    inset: 0;
}

.dreamline-node__hit[b-c7ajha8bux] {
    position: absolute;
    inset: 3px;
    border: 1px solid transparent;
    border-radius: inherit;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

/*
    Hover and keyboard focus only. Selection used to light this ring too, which
    stacked a fourth circle outside the selected planet's own ring; selection is
    now shown by the ring and named in the detail panel, so this stays a pointer
    and focus affordance.
*/
.dreamline-node:hover .dreamline-node__hit[b-c7ajha8bux],
.dreamline-node:focus-visible .dreamline-node__hit[b-c7ajha8bux] {
    border-color: rgba(225, 219, 255, .52);
    box-shadow: 0 0 0 5px rgba(192, 181, 249, .11);
    transform: scale(1.08);
}

.dreamline-node:focus-visible[b-c7ajha8bux] {
    outline: none;
}

/*
    The selected event, explained in words, below the stage. It sits outside the
    SVG on purpose: nothing here competes with the orbit for space, so a tapped
    planet's meaning cannot be reduced to a floating timestamp. Body text stays
    at 1rem so it is legible at 320px.
*/
.dreamline-detail[b-c7ajha8bux] {
    width: min(430px, 100%);
    margin: 0 auto 14px;
    padding: 14px 16px 16px;
    border: 1px solid rgba(214, 207, 255, .14);
    border-radius: 18px;
    background: rgba(9, 17, 38, .5);
}

.dreamline-detail__eyebrow[b-c7ajha8bux] {
    margin: 0 0 2px;
    color: rgba(196, 188, 240, .82);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.dreamline-detail__title[b-c7ajha8bux] {
    margin: 0;
    color: #f6f3ff;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
}

.dreamline-detail__time[b-c7ajha8bux] {
    margin: 2px 0 0;
    color: #ffffff;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
}

.dreamline-detail__source[b-c7ajha8bux] {
    margin: 6px 0 0;
    color: rgba(206, 199, 244, .92);
    font-size: 1rem;
    font-weight: 600;
}

.dreamline-detail__meaning[b-c7ajha8bux] {
    margin: 2px 0 0;
    color: rgba(226, 221, 250, .88);
    font-size: 1rem;
    line-height: 1.4;
}

.dreamline-detail__fact[b-c7ajha8bux] {
    margin: 6px 0 0;
    color: rgba(198, 191, 236, .8);
    font-size: .92rem;
    line-height: 1.4;
}

/*
    One press between "what did I tap" and everything else. Sized as a real
    touch target rather than a text link, because on a phone this is the only
    control inside the readout.
*/
.dreamline-detail__toggle[b-c7ajha8bux] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    margin-top: 10px;
    padding: 8px 14px;
    border: 1px solid rgba(205, 197, 250, .24);
    border-radius: 14px;
    color: #f1eeff;
    background: rgba(151, 137, 219, .12);
    font: inherit;
    font-size: .86rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.dreamline-detail__toggle:hover[b-c7ajha8bux] {
    border-color: rgba(222, 215, 255, .34);
    background: rgba(151, 137, 219, .2);
}

.dreamline-detail__toggle:focus-visible[b-c7ajha8bux] {
    outline: 3px solid var(--dr-focus, #f2c46d);
    outline-offset: 2px;
}

.dreamline-detail__body[b-c7ajha8bux] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(214, 207, 255, .12);
}

.dreamline-detail__body > :first-child[b-c7ajha8bux] {
    margin-top: 0;
}

.dreamline-detail__disclaimer[b-c7ajha8bux] {
    margin: 10px 0 0;
    color: rgba(198, 191, 236, .82);
    font-size: .88rem;
    line-height: 1.4;
}

/*
    The forecast record, after guidance, as a link rather than a card. It is
    deliberately quiet: reaching it should never feel more urgent than reading
    the orbit.
*/
.dreamline-forecast-link[b-c7ajha8bux] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: 14px;
    padding: 6px 2px;
    color: rgba(206, 199, 244, .92);
    font-size: .9rem;
    font-weight: 640;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.dreamline-forecast-link:hover[b-c7ajha8bux] {
    color: #f4f1ff;
}

.dreamline-forecast-link:focus-visible[b-c7ajha8bux] {
    outline: 3px solid var(--dr-focus, #f2c46d);
    outline-offset: 3px;
    border-radius: 8px;
}

.dreamline-return-now[b-c7ajha8bux] {
    min-height: 44px;
    padding: 8px 15px;
    border: 1px solid rgba(205, 197, 250, .28);
    border-radius: 999px;
    color: #f4f1ff;
    background: rgba(151, 137, 219, .15);
    font: inherit;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
}

.dreamline-return-now:hover[b-c7ajha8bux] {
    border-color: rgba(222, 215, 255, .34);
    background: rgba(151, 137, 219, .24);
}

.dreamline-return-now:focus-visible[b-c7ajha8bux] {
    outline: 3px solid var(--dr-focus, #f2c46d);
    outline-offset: 2px;
}

.dreamline-detail .dreamline-return-now[b-c7ajha8bux] {
    margin-top: 14px;
}

.dreamline-guidance[b-c7ajha8bux] {
    padding: clamp(16px, 2.6vw, 24px);
    border: 1px solid rgba(214, 207, 255, .11);
    border-radius: 22px;
    background: rgba(5, 12, 29, .34);
}

.dreamline-guidance-heading[b-c7ajha8bux] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.dreamline-guidance-heading h3[b-c7ajha8bux] {
    margin: 2px 0 0;
    font-size: clamp(1rem, 2vw, 1.18rem);
}

.prediction-label[b-c7ajha8bux] {
    margin: 18px 0 2px;
    color: rgba(217, 212, 239, .72);
    font-size: .82rem;
    font-weight: 680;
}

.prediction-time[b-c7ajha8bux] {
    margin: 0;
}

.prediction-value[b-c7ajha8bux] {
    color: #faf9ff;
    font-size: clamp(1.55rem, 4vw, 2.2rem);
    font-weight: 780;
    letter-spacing: -.045em;
}

/* Names the range in words directly under the estimate, so the window's
   opening is never mistaken for the estimated time. It carries the meaning in
   text rather than in the track's colour. */
.prediction-window-label[b-c7ajha8bux] {
    margin: 14px 0 0;
    color: rgba(211, 206, 232, .78);
    font-size: .78rem;
    font-weight: 650;
}

/* Tonight's bedtime when the headline is something else, e.g. a nap now. */
.prediction-secondary[b-c7ajha8bux] {
    margin: 12px 0 0;
    color: rgba(211, 206, 232, .82);
    font-size: .82rem;
    font-weight: 650;
}

.prediction-window[b-c7ajha8bux] {
    display: grid;
    grid-template-columns: auto minmax(70px, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    color: rgba(211, 206, 232, .72);
    font-size: .76rem;
    font-weight: 650;
}

.window-track[b-c7ajha8bux] {
    position: relative;
    height: 5px;
    overflow: visible;
    border-radius: 999px;
    background: rgba(197, 188, 240, .14);
}

.window-track[b-c7ajha8bux]::before {
    content: "";
    position: absolute;
    inset: 0;
    width: var(--window-progress, 50%);
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(159, 216, 207, .65), rgba(198, 189, 255, .72));
}

.window-track i[b-c7ajha8bux] {
    position: absolute;
    top: 50%;
    left: var(--window-progress, 50%);
    width: 10px;
    height: 10px;
    border: 2px solid rgba(244, 241, 255, .9);
    border-radius: 50%;
    background: #8d82ca;
    box-shadow: 0 0 10px rgba(198, 189, 255, .5);
    transform: translate(-50%, -50%);
}

.dream-engine[b-c7ajha8bux] {
    margin-top: 20px;
    border-top: 1px solid rgba(214, 207, 255, .1);
    padding-top: 14px;
}

.dream-engine__toggle[b-c7ajha8bux] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    padding: 10px 0;
    border: 0;
    color: rgba(241, 238, 255, .92);
    background: transparent;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.dream-engine__toggle span:first-child[b-c7ajha8bux] {
    display: grid;
    gap: 3px;
}

.dream-engine__toggle small[b-c7ajha8bux] {
    color: rgba(194, 188, 218, .68);
    font-size: .75rem;
    font-weight: 560;
}

.dream-engine__body[b-c7ajha8bux] {
    display: grid;
    gap: 12px;
    padding-top: 8px;
}

.prediction-model-list[b-c7ajha8bux] {
    display: grid;
    gap: 10px;
}

.prediction-model[b-c7ajha8bux] {
    padding: 13px 14px;
    border: 1px solid rgba(214, 207, 255, .1);
    border-radius: 16px;
    background: rgba(255, 255, 255, .025);
}

.prediction-model.is-selected[b-c7ajha8bux] {
    border-color: rgba(187, 176, 244, .26);
    background: rgba(149, 135, 219, .08);
}

.prediction-model-heading[b-c7ajha8bux] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.prediction-model-heading span[b-c7ajha8bux] {
    color: rgba(191, 184, 217, .7);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
}

.prediction-model p[b-c7ajha8bux] {
    margin: 7px 0 0;
    color: rgba(211, 206, 231, .74);
    font-size: .82rem;
    line-height: 1.5;
}

.prediction-model-time[b-c7ajha8bux] {
    color: rgba(244, 241, 255, .94) !important;
    font-weight: 720;
}

.prediction-model-reason[b-c7ajha8bux],
.prediction-model-intro[b-c7ajha8bux] {
    color: rgba(190, 184, 214, .7) !important;
}

.dreamline-geometry-debug[b-c7ajha8bux] {
    display: grid;
    gap: 4px;
    margin: 12px 0;
    padding: 12px;
    border: 1px solid rgba(255, 202, 128, .25);
    border-radius: 14px;
    color: rgba(255, 235, 205, .86);
    background: rgba(38, 25, 14, .62);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .68rem;
}

.dreamline-loading-track[b-c7ajha8bux] {
    height: 220px;
    margin-top: 14px;
    border-radius: 24px;
    background: linear-gradient(100deg, rgba(255,255,255,.025), rgba(255,255,255,.075), rgba(255,255,255,.025));
    background-size: 220% 100%;
    animation: dreamline-loading-b-c7ajha8bux 1.8s ease-in-out infinite;
}

@keyframes dreamline-guidance-flow-b-c7ajha8bux {
    to { stroke-dashoffset: -54; }
}

@keyframes dreamline-node-reveal-b-c7ajha8bux {
    from { opacity: 0; }
    to { opacity: var(--dreamline-event-final-opacity, 1); }
}

@keyframes dreamline-current-breathe-b-c7ajha8bux {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(calc(1 + .055 * var(--dreamline-motion-spatial-multiplier, 1))); }
}

@keyframes dreamline-halo-breathe-b-c7ajha8bux {
    0%, 100% { opacity: .34; transform: scale(calc(1 - .08 * var(--dreamline-motion-spatial-multiplier, 1))); }
    50% { opacity: .7; transform: scale(calc(1 + .08 * var(--dreamline-motion-spatial-multiplier, 1))); }
}

@keyframes dreamline-ring-breathe-b-c7ajha8bux {
    0%, 100% { opacity: .68; }
    50% { opacity: 1; }
}

@keyframes dreamline-primary-halo-b-c7ajha8bux {
    from { opacity: .26; transform: scale(calc(1 - .06 * var(--dreamline-motion-spatial-multiplier, 1))); }
    to { opacity: .58; transform: scale(calc(1 + .08 * var(--dreamline-motion-spatial-multiplier, 1))); }
}

@keyframes dreamline-approaching-b-c7ajha8bux {
    0%, 100% { opacity: .25; }
    50% { opacity: .78; }
}

@keyframes dreamline-loading-b-c7ajha8bux {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

/* ---- Planet motion tiers ----
   Mutually exclusive animation treatment inside the body wrapper only.
   Desynchronized with deterministic negative phase offsets.
   Past tiers (MidPast, OldPast) run no cloud/sparkle motion. */

/* Motion here is driven by a node's role in the day — live, authoritative,
   approaching — never by the caregiver having tapped it. Selection must not
   *start* motion: tapping a quiet past planet still leaves it quiet, because a
   tap is a request to read something, not to animate it.

   Selection must not stop motion either. Suppressing every internal layer on
   the selected node froze the live planet the moment it was tapped, which on
   device read as the orbit having died. The two edge strokes that fight the
   selection ring still stand down (see the selection-ring note below); the
   body's own clouds, surface, and sparkle keep whatever their temporal tier
   already earned. */

.dreamline-event__icon[b-c7ajha8bux]  [data-dreamline-planet-layer] {
    transform-box: fill-box;
    transform-origin: center;
}

/* Primary: the authoritative next event — slow pulse */
.dreamline-event.primary-next[b-c7ajha8bux]  [data-dreamline-planet-layer="halo"] {
    animation: dreamline-halo-breathing-b-c7ajha8bux 5.6s ease-in-out infinite;
    animation-delay: -3.2s;
}

/* Approaching: prediction near its window — quick alert pulse */
.dreamline-event.approaching[b-c7ajha8bux]  [data-dreamline-planet-layer="halo"] {
    animation: dreamline-approaching-pulse-b-c7ajha8bux 3.4s ease-in-out infinite;
    animation-delay: -1.8s;
}

@keyframes dreamline-approaching-pulse-b-c7ajha8bux {
    0%, 100% { opacity: .32; }
    50% { opacity: .84; }
}

/* Future: predicted or routine ahead — slow drift */
.dreamline-event--future[b-c7ajha8bux]  [data-dreamline-planet-layer="clouds-back"] {
    animation: dreamline-cloud-drift-back-b-c7ajha8bux 14s ease-in-out infinite;
    animation-delay: -7s;
}
.dreamline-event--future[b-c7ajha8bux]  [data-dreamline-planet-layer="clouds-front"] {
    animation: dreamline-cloud-drift-front-b-c7ajha8bux 18s ease-in-out infinite;
    animation-delay: -11s;
}

/* Quiet: completed, non-selected — minimal cloud motion */
.dreamline-event--completed[b-c7ajha8bux]  [data-dreamline-planet-layer="clouds-back"] {
    animation: dreamline-cloud-drift-back-b-c7ajha8bux 28s ease-in-out infinite;
    animation-delay: -16s;
}
.dreamline-event--completed[b-c7ajha8bux]  [data-dreamline-planet-layer="clouds-front"] {
    animation: dreamline-cloud-drift-front-b-c7ajha8bux 34s ease-in-out infinite;
    animation-delay: -19s;
}

/* Still: OldPast nodes — no cloud or sparkle motion */
.dreamline-event--temporal-oldpast[b-c7ajha8bux]  [data-dreamline-planet-layer="clouds-back"],
.dreamline-event--temporal-oldpast[b-c7ajha8bux]  [data-dreamline-planet-layer="clouds-front"],
.dreamline-event--temporal-oldpast[b-c7ajha8bux]  [data-dreamline-planet-layer="sparkles"] {
    animation: none;
}

/* MidPast: reduced sparkle */
.dreamline-event--temporal-midpast[b-c7ajha8bux]  [data-dreamline-planet-layer="sparkles"] {
    animation: dreamline-sparkle-twinkle-b-c7ajha8bux 14s ease-in-out infinite;
    animation-delay: -6s;
}

/* Current breathes */
.dreamline-event--current[b-c7ajha8bux]  [data-dreamline-planet-layer="halo"] {
    animation: dreamline-halo-breathing-b-c7ajha8bux 4.2s ease-in-out infinite;
    animation-delay: -2.1s;
}

/* The live planet is the most active body: the two cloud sheets move at
   different rates while the timestamp bearing itself remains fixed. */
.dreamline-event--current[b-c7ajha8bux]  [data-dreamline-planet-layer="clouds-back"] {
    animation: dreamline-cloud-drift-back-b-c7ajha8bux 8s ease-in-out infinite;
    animation-delay: -3s;
}

.dreamline-event--current[b-c7ajha8bux]  [data-dreamline-planet-layer="clouds-front"] {
    animation: dreamline-cloud-drift-front-b-c7ajha8bux 11s ease-in-out infinite;
    animation-delay: -6s;
}

.dreamline-event.primary-next[b-c7ajha8bux]  [data-dreamline-planet-layer="clouds-back"] {
    animation: dreamline-cloud-drift-back-b-c7ajha8bux 20s ease-in-out infinite;
    animation-delay: -9s;
}

.dreamline-event.primary-next[b-c7ajha8bux]  [data-dreamline-planet-layer="clouds-front"] {
    animation: dreamline-cloud-drift-front-b-c7ajha8bux 25s ease-in-out infinite;
    animation-delay: -14s;
}

@keyframes dreamline-halo-breathing-b-c7ajha8bux {
    0%, 100% { opacity: .52; }
    50% { opacity: .82; }
}

@keyframes dreamline-cloud-drift-back-b-c7ajha8bux {
    0% { transform: translateX(0); }
    50% { transform: translateX(calc(4px * var(--dreamline-motion-spatial-multiplier, 1))); }
    100% { transform: translateX(0); }
}

@keyframes dreamline-cloud-drift-front-b-c7ajha8bux {
    0% { transform: translateX(0); }
    50% { transform: translateX(calc(-6px * var(--dreamline-motion-spatial-multiplier, 1))); }
    100% { transform: translateX(0); }
}

/* Sparkle twinkle: applied only to future/recent nodes */
.dreamline-event--current[b-c7ajha8bux]  [data-dreamline-planet-layer="sparkles"],
.dreamline-event--future[b-c7ajha8bux]  [data-dreamline-planet-layer="sparkles"],
.dreamline-event--predicted[b-c7ajha8bux]  [data-dreamline-planet-layer="sparkles"] {
    animation: dreamline-sparkle-twinkle-b-c7ajha8bux 7.5s ease-in-out infinite;
    animation-delay: -4s;
}
.dreamline-event:nth-child(odd)[b-c7ajha8bux]  [data-dreamline-planet-layer="sparkles"] {
    animation-delay: -8s;
}

.dreamline-event.approaching[b-c7ajha8bux]  [data-dreamline-planet-layer="sparkles"] {
    animation: dreamline-sparkle-twinkle-b-c7ajha8bux 3.8s ease-in-out infinite;
    filter: brightness(1.24);
}

@keyframes dreamline-sparkle-twinkle-b-c7ajha8bux {
    0%, 100% { opacity: .42; }
    25% { opacity: .82; }
    50% { opacity: .34; }
    75% { opacity: .7; }
}

/* ---- Responsive: soften panel boundary, recover mobile width ---- */
@media (max-width: 600px) {
    .dreamline-panel[b-c7ajha8bux] {
        padding: clamp(18px, 2.8vw, 28px) clamp(12px, 2.2vw, 20px) clamp(14px, 1.8vw, 22px);
        border-radius: 26px;
        border-color: rgba(178, 186, 245, .14);
    }

    .dreamline-stage[b-c7ajha8bux] {
        border-radius: 18px;
        min-height: 240px;
    }
}

.dreamline-event--current[b-c7ajha8bux]  [data-dreamline-planet-layer="surface-texture"] {
    animation: dreamline-surface-drift-b-c7ajha8bux 14s ease-in-out infinite;
}
.dreamline-event.primary-next[b-c7ajha8bux]  [data-dreamline-planet-layer="surface-texture"] {
    animation: dreamline-surface-drift-b-c7ajha8bux 18s ease-in-out infinite;
}

@keyframes dreamline-surface-drift-b-c7ajha8bux {
    0% { transform: translateY(0); }
    50% { transform: translateY(calc(1.2px * var(--dreamline-motion-spatial-multiplier, 1))); }
    100% { transform: translateY(0); }
}

.dreamline-event--current[b-c7ajha8bux]  [data-dreamline-planet-layer="rim-light"] {
    animation: dreamline-rim-shimmer-b-c7ajha8bux 6s ease-in-out infinite;
}
.dreamline-event.primary-next[b-c7ajha8bux]  [data-dreamline-planet-layer="rim-light"] {
    animation: dreamline-rim-shimmer-b-c7ajha8bux 8.5s ease-in-out infinite;
}

.dreamline-event--current[b-c7ajha8bux]  [data-dreamline-planet-layer="state-overlay"],
.dreamline-event.primary-next[b-c7ajha8bux]  [data-dreamline-planet-layer="state-overlay"] {
    animation: dreamline-state-glow-b-c7ajha8bux 5.2s ease-in-out infinite;
}

@keyframes dreamline-state-glow-b-c7ajha8bux {
    0%, 100% { opacity: .04; }
    50% { opacity: .18; }
}

/*
    The planet artwork draws its own edge twice — an atmosphere stroke just
    outside the body and a rim light on it. Unselected that reads as one soft
    edge, but the selection ring sits further out again, so a chosen planet
    showed a contour at the body and a detached ring around it: a bullseye on
    device even where it looked clean at desktop scale. The selection ring is
    the outline while a planet is selected, so both artwork edge strokes stand
    down and come straight back when it is deselected.

    The rim shimmer has to be cancelled alongside the opacity: it animates the
    same property, and a running keyframe wins over a static declaration
    regardless of specificity or source order. Hiding the layer without also
    stopping the animation leaves the edge pulsing between .4 and .64, which is
    how a selected primary-next planet kept its second contour.
*/
.dreamline-event.selected[b-c7ajha8bux]  [data-dreamline-planet-layer="atmosphere-back"],
.dreamline-event.selected[b-c7ajha8bux]  [data-dreamline-planet-layer="rim-light"] {
    animation: none;
    opacity: 0;
}

.dreamline-event.selected .dreamline-event__planet[b-c7ajha8bux] {
    animation: dreamline-focus-settle-b-c7ajha8bux 440ms cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes dreamline-focus-settle-b-c7ajha8bux {
    0% { filter: brightness(1); }
    45% { filter: brightness(1.18) drop-shadow(0 0 10px rgba(224, 213, 255, .42)); }
    100% { filter: brightness(1.04); }
}

/*
    Past events carry no ring of their own. The generic halo is a filled disc
    sitting a planet-radius-plus-16 out from the body, and at the .38–.5 the
    temporal tiers gave it, its edge resolved as a circle — so every recorded
    event looked ringed even though no ring overlay was ever emitted for one.
    Only the live, predicted and selected states earn a contour.
*/
.dreamline-event--completed .dreamline-event__halo[b-c7ajha8bux] {
    opacity: 0;
}

/*
    The artwork's own glow goes with it on past events. It adds about 14% to a
    planet's visual footprint — 3.7px on a recorded event at phone width — and
    that overhang is what made two crowded past planets bleed into each other
    even once their bodies were clear of one another. Dropping it here buys the
    separation without moving any planet off its rail anchor, which is the
    trade the alternative (raising MinimumPlanetSeparation from 108 to ~141)
    would have forced.

    The live and predicted states keep their glow: that is where it carries
    meaning, and those two are never the crowded ones. Restoring it everywhere
    is a one-line revert if the flatter past planets read worse in practice.
*/
.dreamline-event--completed[b-c7ajha8bux]  [data-dreamline-planet-layer="halo"] {
    opacity: 0;
}

@keyframes dreamline-rim-shimmer-b-c7ajha8bux {
    0%, 100% { opacity: .4; }
    50% { opacity: .64; }
}

/* History and low-confidence nodes stay calm. */
.dreamline-event.confidence-low[b-c7ajha8bux]  [data-dreamline-planet-layer="sparkles"],
.dreamline-event.confidence-low[b-c7ajha8bux]  [data-dreamline-planet-layer="clouds-back"],
.dreamline-event.confidence-low[b-c7ajha8bux]  [data-dreamline-planet-layer="clouds-front"],
.dreamline-event.confidence-medium[b-c7ajha8bux]  [data-dreamline-planet-layer="sparkles"] {
    animation-duration: 30s !important;
}

/* ── Phased introduction ─────────────────────────────────────────── */

@media (max-width: 640px) {
    .dreamline-day-clock__label--wide[b-c7ajha8bux] { display: none; }
    .dreamline-day-clock__label--compact[b-c7ajha8bux] { display: initial; }
    /* No compact font-size override: the label size is measured from the actual
       stage width, so the compact branch is a density switch only. */
    .dreamline-panel[b-c7ajha8bux] {
        padding: 16px 8px 14px;
        border-radius: 24px;
    }

    .dreamline-stage[b-c7ajha8bux] {
        min-height: 236px;
        margin-inline: -4px;
        width: calc(100% + 8px);
        border-radius: 22px;
    }

    .dreamline-heading[b-c7ajha8bux] {
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 10px;
    }

    .dreamline-heading .eyebrow[b-c7ajha8bux] {
        margin-bottom: 2px;
        font-size: .58rem;
        letter-spacing: .18em;
    }

    .dreamline-heading h2[b-c7ajha8bux] {
        font-size: clamp(1.7rem, 9vw, 2.6rem);
    }

    .dreamline-day-label[b-c7ajha8bux] {
        min-height: 32px;
        padding: 4px 8px 4px 6px;
        font-size: .54rem;
        letter-spacing: .01em;
    }

    .dreamline-day-label[b-c7ajha8bux]::before {
        width: 20px;
        height: 20px;
        margin-right: 4px;
        font-size: .9rem;
    }

    .dreamline-detail[b-c7ajha8bux] {
        margin-bottom: 11px;
        padding: 12px 13px 14px;
    }

    .dreamline-detail__time[b-c7ajha8bux] {
        font-size: 1.45rem;
    }

    .dreamline-guidance[b-c7ajha8bux] {
        padding: 15px;
        border-radius: 18px;
    }

    .prediction-window[b-c7ajha8bux] {
        gap: 7px;
        font-size: .69rem;
    }

    .prediction-model-heading[b-c7ajha8bux] {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }
}

@media (max-width: 380px) {
    .dreamline-stage[b-c7ajha8bux] {
        min-height: 218px;
    }

    .dreamline-return-now[b-c7ajha8bux] {
        padding-inline: 11px;
        font-size: .72rem;
    }

    .dreamline-guidance-heading[b-c7ajha8bux] {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }
}

.dreamline-v3[data-dreamline-visible="false"] .dreamline-path--guidance[b-c7ajha8bux],
.dreamline-v3[data-dreamline-visible="false"] .dreamline-orbit__dust[b-c7ajha8bux],
.dreamline-v3[data-dreamline-visible="false"] .dreamline-orbit__fragments[b-c7ajha8bux],
.dreamline-v3[data-dreamline-visible="false"] .dreamline-event[b-c7ajha8bux],
.dreamline-v3[data-dreamline-visible="false"] .dreamline-event__ring-overlay[b-c7ajha8bux]  [data-dreamline-ring],
.dreamline-v3[data-dreamline-visible="false"] .dreamline-event__icon[b-c7ajha8bux]  [data-dreamline-prediction-glyph],
.dreamline-v3[data-dreamline-visible="false"] .dreamline-cosmos__galaxy[b-c7ajha8bux],
.dreamline-v3[data-dreamline-visible="false"] .dreamline-cosmos__star[b-c7ajha8bux],
.dreamline-v3[data-dreamline-visible="false"] .dreamline-event__icon[b-c7ajha8bux]  [data-dreamline-planet-layer] {
    animation-play-state: paused !important;
}

.dreamline-v3[data-motion="off"] .dreamline-path--guidance[b-c7ajha8bux],
.dreamline-v3[data-motion="reduced"] .dreamline-path--guidance[b-c7ajha8bux],
.dreamline-v3[data-motion="off"] .dreamline-orbit__dust[b-c7ajha8bux],
.dreamline-v3[data-motion="reduced"] .dreamline-orbit__dust[b-c7ajha8bux],
.dreamline-v3[data-motion="off"] .dreamline-orbit__fragments[b-c7ajha8bux],
.dreamline-v3[data-motion="reduced"] .dreamline-orbit__fragments[b-c7ajha8bux],
.dreamline-v3[data-motion="off"] .dreamline-event[b-c7ajha8bux],
.dreamline-v3[data-motion="reduced"] .dreamline-event[b-c7ajha8bux],
.dreamline-v3[data-motion="off"] .dreamline-event__ring-overlay[b-c7ajha8bux]  [data-dreamline-ring],
.dreamline-v3[data-motion="reduced"] .dreamline-event__ring-overlay[b-c7ajha8bux]  [data-dreamline-ring],
.dreamline-v3[data-motion="off"] .dreamline-event__icon[b-c7ajha8bux]  [data-dreamline-planet-layer],
.dreamline-v3[data-motion="reduced"] .dreamline-event__icon[b-c7ajha8bux]  [data-dreamline-planet-layer],
.dreamline-v3[data-motion="off"] .dreamline-readout__spoke[b-c7ajha8bux],
.dreamline-v3[data-motion="reduced"] .dreamline-readout__spoke[b-c7ajha8bux] {
    animation: none !important;
    transition: none !important;
}

/* No pulse and no retarget draw, but the spoke must still be fully drawn:
   stroke-dashoffset is the animation's own start value, so it has to be
   restored explicitly once the animation is removed. */
.dreamline-v3[data-motion="off"] .dreamline-readout__spoke[b-c7ajha8bux],
.dreamline-v3[data-motion="reduced"] .dreamline-readout__spoke[b-c7ajha8bux] {
    opacity: 1;
    stroke-dashoffset: 0 !important;
}

.dreamline-v3[data-motion="off"] .dreamline-event[b-c7ajha8bux],
.dreamline-v3[data-motion="reduced"] .dreamline-event[b-c7ajha8bux] {
    opacity: var(--dreamline-event-final-opacity, 1);
}

/* Shared Dreamspace motion tiers. The orbit and canonical event anchors remain
 * mounted at every tier; only decorative travel is gated. Gentle (including
 * the OS reduced-motion path) keeps opacity breathing while removing rail,
 * parallax, cloud, and event translation. */
.dreamline-v3[data-effective-motion-level="off"] .dreamline-path--guidance[b-c7ajha8bux],
.dreamline-v3[data-effective-motion-level="off"] .dreamline-orbit__dust[b-c7ajha8bux],
.dreamline-v3[data-effective-motion-level="off"] .dreamline-orbit__fragments[b-c7ajha8bux],
.dreamline-v3[data-effective-motion-level="off"] .dreamline-event[b-c7ajha8bux],
.dreamline-v3[data-effective-motion-level="off"] .dreamline-event__planet[b-c7ajha8bux],
.dreamline-v3[data-effective-motion-level="off"] .dreamline-event__halo[b-c7ajha8bux],
.dreamline-v3[data-effective-motion-level="off"] .dreamline-event__icon[b-c7ajha8bux]  [data-dreamline-planet-layer],
.dreamline-v3[data-effective-motion-level="off"] .dreamline-event__icon[b-c7ajha8bux]  [data-dreamline-prediction-glyph],
.dreamline-v3[data-effective-motion-level="off"] .dreamline-cosmos__galaxy[b-c7ajha8bux],
.dreamline-v3[data-effective-motion-level="off"] .dreamline-cosmos__star[b-c7ajha8bux],
.dreamline-v3[data-effective-motion-level="off"] .dreamline-readout__spoke[b-c7ajha8bux] {
    animation: none !important;
    transition: none !important;
}

.dreamline-v3[data-effective-motion-level="off"] .dreamline-event[b-c7ajha8bux] {
    opacity: var(--dreamline-event-final-opacity, 1);
}

.dreamline-v3[data-effective-motion-level="gentle"] .dreamline-path--guidance[b-c7ajha8bux],
.dreamline-v3[data-effective-motion-level="gentle"] .dreamline-orbit__dust[b-c7ajha8bux],
.dreamline-v3[data-effective-motion-level="gentle"] .dreamline-orbit__fragments[b-c7ajha8bux],
.dreamline-v3[data-effective-motion-level="gentle"] .dreamline-event__planet[b-c7ajha8bux],
.dreamline-v3[data-effective-motion-level="gentle"] .dreamline-event__icon[b-c7ajha8bux]  [data-dreamline-planet-layer="clouds-back"],
.dreamline-v3[data-effective-motion-level="gentle"] .dreamline-event__icon[b-c7ajha8bux]  [data-dreamline-planet-layer="clouds-front"],
.dreamline-v3[data-effective-motion-level="gentle"] .dreamline-event__icon[b-c7ajha8bux]  [data-dreamline-planet-layer="surface-texture"],
.dreamline-v3[data-effective-motion-level="gentle"] .dreamline-readout__spoke[b-c7ajha8bux] {
    animation: none !important;
    transition: none !important;
}

.dreamline-v3[data-effective-motion-level="gentle"] .dreamline-event--current .dreamline-event__dot[b-c7ajha8bux],
.dreamline-v3[data-effective-motion-level="gentle"] .dreamline-event--current .dreamline-event__halo[b-c7ajha8bux],
.dreamline-v3[data-effective-motion-level="gentle"] .dreamline-event.primary-next:not(.dreamline-event--predicted) .dreamline-event__halo[b-c7ajha8bux],
.dreamline-v3[data-effective-motion-level="gentle"] .dreamline-event--current[b-c7ajha8bux]  [data-dreamline-ring="active"],
.dreamline-v3[data-effective-motion-level="gentle"] .dreamline-event.primary-next[b-c7ajha8bux]  [data-dreamline-ring="predicted"],
.dreamline-v3[data-effective-motion-level="gentle"] .dreamline-event--current[b-c7ajha8bux]  [data-dreamline-planet-layer="halo"],
.dreamline-v3[data-effective-motion-level="gentle"] .dreamline-event.primary-next[b-c7ajha8bux]  [data-dreamline-planet-layer="halo"],
.dreamline-v3[data-effective-motion-level="gentle"] .dreamline-event--current[b-c7ajha8bux]  [data-dreamline-planet-layer="state-overlay"],
.dreamline-v3[data-effective-motion-level="gentle"] .dreamline-event.primary-next[b-c7ajha8bux]  [data-dreamline-planet-layer="state-overlay"] {
    animation: dreamline-gentle-opacity-b-c7ajha8bux 6s ease-in-out infinite alternate !important;
}

/* The rail path itself remains canonical; lower tiers slow only its decorative
   dash travel. This is the equivalent of an amplitude cap for SVG dashoffset
   movement, which has no positional transform to scale. */
.dreamline-v3[data-effective-motion-level="balanced"] .dreamline-path--guidance[b-c7ajha8bux] { animation-duration: 11.8s; }
.dreamline-v3[data-effective-motion-level="balanced"] .dreamline-orbit__dust[b-c7ajha8bux] { animation-duration: 47.3s; }
.dreamline-v3[data-effective-motion-level="balanced"] .dreamline-orbit__fragments[b-c7ajha8bux] { animation-duration: 69.1s; }
.dreamline-v3[data-effective-motion-level="lively"] .dreamline-path--guidance[b-c7ajha8bux] { animation-duration: 8.1s; }
.dreamline-v3[data-effective-motion-level="lively"] .dreamline-orbit__dust[b-c7ajha8bux] { animation-duration: 32.5s; }
.dreamline-v3[data-effective-motion-level="lively"] .dreamline-orbit__fragments[b-c7ajha8bux] { animation-duration: 47.5s; }

/* Cadence alone did not make the travelling layers legible: at the tuned
   opacities the motes read as rail texture rather than as movement, so the two
   most expressive tiers looked as still as Balanced. Lift only the decorative
   layers' own presence — stroke weight, opacity, and glow. The dash pattern,
   the path data, and the forward dashoffset direction are untouched, so rail
   geometry is unchanged and nothing implies reversed chronology. */
.dreamline-v3[data-effective-motion-level="lively"] .dreamline-orbit__dust[b-c7ajha8bux],
.dreamline-v3[data-effective-motion-level="immersive"] .dreamline-orbit__dust[b-c7ajha8bux] {
    opacity: .92;
    stroke-width: 2.8;
}

.dreamline-v3[data-effective-motion-level="lively"] .dreamline-orbit__fragments[b-c7ajha8bux],
.dreamline-v3[data-effective-motion-level="immersive"] .dreamline-orbit__fragments[b-c7ajha8bux] {
    opacity: .74;
    stroke: rgba(174, 190, 238, .5);
    stroke-width: 1.9;
}

.dreamline-v3[data-effective-motion-level="lively"] .dreamline-path--guidance[b-c7ajha8bux],
.dreamline-v3[data-effective-motion-level="immersive"] .dreamline-path--guidance[b-c7ajha8bux] {
    stroke: rgba(245, 236, 255, .88);
    stroke-width: 2.8;
    filter: drop-shadow(0 0 9px rgba(206, 179, 255, .55));
}

/* Event focus remains visible at calm tiers, but it must not create spatial
   movement. Keep the ordinary border/shadow affordance and remove only the
   transform branch of the hit target transition. */
.dreamline-v3[data-effective-motion-level="off"] .dreamline-node__hit[b-c7ajha8bux],
.dreamline-v3[data-effective-motion-level="gentle"] .dreamline-node__hit[b-c7ajha8bux] {
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.dreamline-v3[data-effective-motion-level="off"] .dreamline-node:hover .dreamline-node__hit[b-c7ajha8bux],
.dreamline-v3[data-effective-motion-level="off"] .dreamline-node:focus-visible .dreamline-node__hit[b-c7ajha8bux],
.dreamline-v3[data-effective-motion-level="gentle"] .dreamline-node:hover .dreamline-node__hit[b-c7ajha8bux],
.dreamline-v3[data-effective-motion-level="gentle"] .dreamline-node:focus-visible .dreamline-node__hit[b-c7ajha8bux] {
    transform: none;
}

@keyframes dreamline-gentle-opacity-b-c7ajha8bux {
    from { opacity: .62; }
    to { opacity: .92; }
}

/* ---- Supplied layered SVG pack ------------------------------------------ */

.dreamline-clock-atmosphere[b-c7ajha8bux],
.dreamline-supplied-vfx[b-c7ajha8bux],
.dreamline-event__transition-art[b-c7ajha8bux],
.dreamline-event__prediction-state-art[b-c7ajha8bux],
.dreamline-event__current-art[b-c7ajha8bux] {
    pointer-events: none;
}

.dreamline-clock-atmosphere[b-c7ajha8bux] {
    opacity: .46;
    mix-blend-mode: screen;
}

.dreamline-clock-atmosphere__treatment--sunrise[b-c7ajha8bux] { opacity: .32; }
.dreamline-clock-atmosphere__treatment--sunset[b-c7ajha8bux] { opacity: .27; }
.dreamline-clock-atmosphere__treatment--midnight[b-c7ajha8bux] { opacity: .38; }

.dreamline-supplied-vfx[b-c7ajha8bux] {
    opacity: .42;
    mix-blend-mode: screen;
}

.dreamline-supplied-vfx__asset--dust[b-c7ajha8bux] { opacity: .24; }
.dreamline-supplied-vfx__asset--stars[b-c7ajha8bux] { opacity: .44; }
.dreamline-supplied-vfx__asset--comets[b-c7ajha8bux] { opacity: .24; }
.dreamline-supplied-vfx__asset--trail[b-c7ajha8bux] { opacity: .18; }
.dreamline-supplied-vfx__asset--arc[b-c7ajha8bux] { opacity: .17; }
.dreamline-supplied-vfx__asset--sparkles[b-c7ajha8bux] { opacity: .34; }
.dreamline-supplied-vfx__asset--debris[b-c7ajha8bux] { opacity: .24; }

.dreamline-clock-atmosphere[b-c7ajha8bux]  [data-dreamline-layered-layer],
.dreamline-supplied-vfx[b-c7ajha8bux]  [data-dreamline-layered-layer],
.dreamline-event__transition-art[b-c7ajha8bux]  [data-dreamline-layered-layer],
.dreamline-event__prediction-state-art[b-c7ajha8bux]  [data-dreamline-layered-layer],
.dreamline-event__current-art[b-c7ajha8bux]  [data-dreamline-layered-layer] {
    transform-box: fill-box;
    transform-origin: center;
}

.dreamline-clock-atmosphere[b-c7ajha8bux]  [data-dreamline-layered-layer="atmosphere-clouds"] {
    animation: dreamline-v5-cloud-float-b-c7ajha8bux 19s ease-in-out infinite alternate;
}

.dreamline-clock-atmosphere[b-c7ajha8bux]  [data-dreamline-layered-layer="atmosphere-particles"] {
    animation: dreamline-v5-twinkle-b-c7ajha8bux 8.6s ease-in-out infinite;
}

.dreamline-supplied-vfx[b-c7ajha8bux]  [data-dreamline-layered-layer="vfx-base"],
.dreamline-supplied-vfx[b-c7ajha8bux]  [data-dreamline-layered-layer="vfx-particles"] {
    animation: dreamline-v5-drift-b-c7ajha8bux 28s ease-in-out infinite alternate;
}

.dreamline-supplied-vfx[b-c7ajha8bux]  [data-dreamline-layered-layer="vfx-sparkles"] {
    animation: dreamline-v5-twinkle-b-c7ajha8bux 7.4s ease-in-out infinite;
}

.dreamline-supplied-vfx__asset:nth-child(even)[b-c7ajha8bux]  [data-dreamline-layered-layer] {
    animation-delay: -4.1s;
}

.dreamline-event__current-art[b-c7ajha8bux]  [data-dreamline-layered-layer="halo-ring"],
.dreamline-event__current-art[b-c7ajha8bux]  [data-dreamline-layered-layer="crown-glow"],
.dreamline-event__current-art[b-c7ajha8bux]  [data-dreamline-layered-layer="awake-arc"] {
    animation: dreamline-v5-breathe-b-c7ajha8bux 5.8s ease-in-out infinite;
}

.dreamline-event__current-art[b-c7ajha8bux]  [data-dreamline-layered-layer="particle-ring"] {
    animation: dreamline-v5-orbit-b-c7ajha8bux 34s linear infinite;
}

.dreamline-event__current-art[b-c7ajha8bux]  [data-dreamline-layered-layer="crown-arc"],
.dreamline-event__current-art[b-c7ajha8bux]  [data-dreamline-layered-layer="awake-flares"],
.dreamline-event__current-art[b-c7ajha8bux]  [data-dreamline-layered-layer="sleep-sparkles"],
.dreamline-event__prediction-state-art[b-c7ajha8bux]  [data-dreamline-layered-layer="state-overlay"],
.dreamline-event__transition-art[b-c7ajha8bux]  [data-dreamline-layered-layer="transition-sparkles"] {
    animation: dreamline-v5-twinkle-b-c7ajha8bux 6.4s ease-in-out infinite;
}

.dreamline-event__current-art[b-c7ajha8bux]  [data-dreamline-layered-layer="sleep-clouds"] {
    animation: dreamline-v5-cloud-float-b-c7ajha8bux 11s ease-in-out infinite alternate;
}

.dreamline-event__transition-art[b-c7ajha8bux] {
    opacity: .44;
}

.dreamline-event__prediction-state-art[b-c7ajha8bux] {
    opacity: .78;
}

.dreamline-event__current-art[b-c7ajha8bux] {
    opacity: .88;
}

@keyframes dreamline-v5-cloud-float-b-c7ajha8bux {
    from { transform: translate3d(-1.2px, .4px, 0); }
    to { transform: translate3d(1.4px, -.6px, 0); }
}

@keyframes dreamline-v5-drift-b-c7ajha8bux {
    from { transform: translate3d(-1.4px, .5px, 0); }
    to { transform: translate3d(1.8px, -.8px, 0); }
}

@keyframes dreamline-v5-orbit-b-c7ajha8bux {
    to { transform: rotate(360deg); }
}

@keyframes dreamline-v5-breathe-b-c7ajha8bux {
    0%, 100% { opacity: .64; transform: scale(.985); }
    50% { opacity: 1; transform: scale(1.018); }
}

@keyframes dreamline-v5-twinkle-b-c7ajha8bux {
    0%, 100% { opacity: .56; transform: scale(.985); }
    37% { opacity: .92; transform: scale(1.025); }
    72% { opacity: .68; transform: scale(.996); }
}

.dreamline-v3[data-dreamline-visible="false"] .dreamline-clock-atmosphere[b-c7ajha8bux]  [data-dreamline-layered-layer],
.dreamline-v3[data-dreamline-visible="false"] .dreamline-supplied-vfx[b-c7ajha8bux]  [data-dreamline-layered-layer],
.dreamline-v3[data-dreamline-visible="false"] .dreamline-event__transition-art[b-c7ajha8bux]  [data-dreamline-layered-layer],
.dreamline-v3[data-dreamline-visible="false"] .dreamline-event__prediction-state-art[b-c7ajha8bux]  [data-dreamline-layered-layer],
.dreamline-v3[data-dreamline-visible="false"] .dreamline-event__current-art[b-c7ajha8bux]  [data-dreamline-layered-layer] {
    animation-play-state: paused !important;
}

.dreamline-v3[data-effective-motion-level="off"] .dreamline-clock-atmosphere[b-c7ajha8bux]  [data-dreamline-layered-layer],
.dreamline-v3[data-effective-motion-level="off"] .dreamline-supplied-vfx[b-c7ajha8bux]  [data-dreamline-layered-layer],
.dreamline-v3[data-effective-motion-level="off"] .dreamline-event__transition-art[b-c7ajha8bux]  [data-dreamline-layered-layer],
.dreamline-v3[data-effective-motion-level="off"] .dreamline-event__prediction-state-art[b-c7ajha8bux]  [data-dreamline-layered-layer],
.dreamline-v3[data-effective-motion-level="off"] .dreamline-event__current-art[b-c7ajha8bux]  [data-dreamline-layered-layer],
.dreamline-v3[data-effective-motion-level="gentle"] .dreamline-clock-atmosphere[b-c7ajha8bux]  [data-dreamline-layered-layer],
.dreamline-v3[data-effective-motion-level="gentle"] .dreamline-supplied-vfx[b-c7ajha8bux]  [data-dreamline-layered-layer],
.dreamline-v3[data-effective-motion-level="gentle"] .dreamline-event__transition-art[b-c7ajha8bux]  [data-dreamline-layered-layer],
.dreamline-v3[data-effective-motion-level="gentle"] .dreamline-event__prediction-state-art[b-c7ajha8bux]  [data-dreamline-layered-layer],
.dreamline-v3[data-effective-motion-level="gentle"] .dreamline-event__current-art[b-c7ajha8bux]  [data-dreamline-layered-layer] {
    animation: none !important;
    transition: none !important;
}

.dreamline-v3[data-effective-motion-level="gentle"] .dreamline-event__current-art[b-c7ajha8bux]  [data-dreamline-layered-layer="halo-ring"],
.dreamline-v3[data-effective-motion-level="gentle"] .dreamline-event__prediction-state-art[b-c7ajha8bux]  [data-dreamline-layered-layer="state-overlay"] {
    animation: dreamline-gentle-opacity-b-c7ajha8bux 6s ease-in-out infinite alternate !important;
}

/* ---- Reduced motion: freeze continuous movement, preserve static depth ---- */
@media (prefers-reduced-motion: reduce) {
    /* Freeze the three continuously animated rail/orbit elements and the
       component's one-shot/luminance treatments. The static rail, planets,
       labels, and depth remain fully visible. */
    .dreamline-path--guidance[b-c7ajha8bux],
    .dreamline-orbit__dust[b-c7ajha8bux],
    .dreamline-orbit__fragments[b-c7ajha8bux],
    .dreamline-event[b-c7ajha8bux],
    .dreamline-event__dot[b-c7ajha8bux],
    .dreamline-event__halo[b-c7ajha8bux],
    .dreamline-event__ring-overlay[b-c7ajha8bux]  [data-dreamline-ring],
    /* Freeze planet-layer motion inside the body wrapper */
    .dreamline-event__icon[b-c7ajha8bux]  [data-dreamline-planet-layer],
    .dreamline-event__icon[b-c7ajha8bux]  [data-dreamline-prediction-glyph],
    .dreamline-clock-atmosphere[b-c7ajha8bux]  [data-dreamline-layered-layer],
    .dreamline-supplied-vfx[b-c7ajha8bux]  [data-dreamline-layered-layer],
    .dreamline-event__transition-art[b-c7ajha8bux]  [data-dreamline-layered-layer],
    .dreamline-event__prediction-state-art[b-c7ajha8bux]  [data-dreamline-layered-layer],
    .dreamline-event__current-art[b-c7ajha8bux]  [data-dreamline-layered-layer],
    /* The panel's galaxy drift and its star twinkle stop with everything else;
       the band itself stays fully drawn. */
    .dreamline-cosmos__galaxy[b-c7ajha8bux],
    .dreamline-cosmos__star[b-c7ajha8bux],
    /* Centre readout: no idle pulse, no retarget draw */
    .dreamline-readout__spoke[b-c7ajha8bux] {
        animation: none !important;
        transition: none !important;
    }

    /* The retarget draw owns stroke-dashoffset, so removing the animation has
       to leave the spoke complete rather than at its hidden start value. */
    .dreamline-readout__spoke[b-c7ajha8bux] {
        opacity: 1;
        stroke-dashoffset: 0 !important;
    }

    /* Preserve static depth: chevrons, rail split, dotted material stay visible */
    .dreamline-chevron[b-c7ajha8bux],
    .dreamline-path--memory[b-c7ajha8bux],
    .dreamline-path--horizon[b-c7ajha8bux],
    .dreamline-path--inactive[b-c7ajha8bux] {
        opacity: 1;
    }

    /* Preserve the authoritative event state under reduced motion. */
    .dreamline-event[b-c7ajha8bux] {
        opacity: var(--dreamline-event-final-opacity, 1);
    }

    .dreamline-loading-track[b-c7ajha8bux] {
        animation: none !important;
    }

    /* OS reduced motion maps to Gentle: movement stays frozen, while the
       current/next luminance cues retain a short opacity-only breath. This
       block intentionally follows the legacy static block above. */
    .dreamline-v3[data-motion="auto"][data-motion-level]:not([data-motion-level="off"]) .dreamline-event--current .dreamline-event__dot[b-c7ajha8bux],
    .dreamline-v3[data-motion="auto"][data-motion-level]:not([data-motion-level="off"]) .dreamline-event--current .dreamline-event__halo[b-c7ajha8bux],
    .dreamline-v3[data-motion="auto"][data-motion-level]:not([data-motion-level="off"]) .dreamline-event.primary-next:not(.dreamline-event--predicted) .dreamline-event__halo[b-c7ajha8bux],
    .dreamline-v3[data-motion="auto"][data-motion-level]:not([data-motion-level="off"]) .dreamline-event--current[b-c7ajha8bux]  [data-dreamline-ring="active"],
    .dreamline-v3[data-motion="auto"][data-motion-level]:not([data-motion-level="off"]) .dreamline-event.primary-next[b-c7ajha8bux]  [data-dreamline-ring="predicted"],
    .dreamline-v3[data-motion="auto"][data-motion-level]:not([data-motion-level="off"]) .dreamline-event--current[b-c7ajha8bux]  [data-dreamline-planet-layer="halo"],
    .dreamline-v3[data-motion="auto"][data-motion-level]:not([data-motion-level="off"]) .dreamline-event.primary-next[b-c7ajha8bux]  [data-dreamline-planet-layer="halo"],
    .dreamline-v3[data-motion="auto"][data-motion-level]:not([data-motion-level="off"]) .dreamline-event--current[b-c7ajha8bux]  [data-dreamline-planet-layer="state-overlay"],
    .dreamline-v3[data-motion="auto"][data-motion-level]:not([data-motion-level="off"]) .dreamline-event.primary-next[b-c7ajha8bux]  [data-dreamline-planet-layer="state-overlay"] {
        animation: dreamline-gentle-opacity-b-c7ajha8bux 6s ease-in-out infinite alternate !important;
    }

    .dreamline-v3 .dreamline-node__hit[b-c7ajha8bux] {
        transition: border-color 160ms ease, box-shadow 160ms ease;
    }

    .dreamline-v3 .dreamline-node:hover .dreamline-node__hit[b-c7ajha8bux],
    .dreamline-v3 .dreamline-node:focus-visible .dreamline-node__hit[b-c7ajha8bux] {
        transform: none;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-aw6bz9suxu] {
    display: none;
    position: fixed;
    z-index: 1000;
    right: 0;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    border-top: 1px solid var(--dr-border);
    padding: .7rem 1.25rem .8rem;
    color: var(--dr-text);
    background: var(--dr-surface-elevated);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .28);
}

#blazor-error-ui .dismiss[b-aw6bz9suxu] {
    position: absolute;
    top: .5rem;
    right: .75rem;
    min-width: 44px;
    min-height: 44px;
    border: 0;
    color: var(--dr-text-muted);
    background: transparent;
    cursor: pointer;
}
/* /Components/Layout/NorthStarNavigation.razor.rz.scp.css */
.north-star-navigation[b-ugzcnq21h0] {
    position: fixed;
    z-index: 230;
    inset: 0;
    pointer-events: none;
}

.north-star-navigation > summary[b-ugzcnq21h0] {
    list-style: none;
}

.north-star-navigation > summary[b-ugzcnq21h0]::-webkit-details-marker {
    display: none;
}

.north-star-trigger[b-ugzcnq21h0] {
    position: fixed;
    z-index: 3;
    right: var(--north-star-right);
    bottom: calc(var(--north-star-bottom) + var(--north-star-viewport-bottom, 0px));
    display: grid;
    place-items: center;
    width: var(--north-star-size);
    height: var(--north-star-size);
    border: 1px solid rgba(185, 182, 255, .42);
    border-radius: 50%;
    color: var(--dr-text);
    background: linear-gradient(145deg, rgba(36, 42, 61, .98), rgba(27, 32, 48, .98));
    box-shadow: 0 12px 30px rgba(0, 0, 0, .34), 0 0 0 1px rgba(7, 9, 18, .2), 0 0 24px rgba(185, 182, 255, .16);
    cursor: pointer;
    isolation: isolate;
    overflow: visible;
    pointer-events: auto;
    transition: transform var(--motion-fast) var(--ease-spring), border-color var(--motion-fast) var(--ease-gentle), box-shadow var(--motion-fast) var(--ease-gentle);
}

.north-star-trigger:hover[b-ugzcnq21h0] {
    border-color: rgba(242, 196, 109, .7);
    box-shadow: 0 14px 32px rgba(0, 0, 0, .38), 0 0 0 1px rgba(242, 196, 109, .12), 0 0 28px rgba(185, 182, 255, .25);
}

.north-star-trigger:focus-visible[b-ugzcnq21h0] {
    outline: 3px solid var(--dr-focus);
    outline-offset: 6px;
}

.north-star-trigger:active[b-ugzcnq21h0] {
    transform: scale(.96);
}

.north-star-trigger__halo[b-ugzcnq21h0],
.north-star-trigger__glow[b-ugzcnq21h0],
.north-star-trigger__shadow[b-ugzcnq21h0],
.north-star-trigger__mark[b-ugzcnq21h0] {
    position: absolute;
    inset: 0;
    display: block;
    pointer-events: none;
}

.north-star-trigger__halo[b-ugzcnq21h0] {
    inset: 7px;
    border: 1px solid rgba(185, 182, 255, .22);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(242, 196, 109, .1), transparent 66%);
    opacity: .8;
    transition: opacity var(--motion-fast) var(--ease-gentle), transform var(--motion-fast) var(--ease-spring);
}

.north-star-trigger__glow[b-ugzcnq21h0],
.north-star-trigger__shadow[b-ugzcnq21h0] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.north-star-trigger__glow[b-ugzcnq21h0] {
    opacity: .72;
    transform: scale(1.04);
    transition: opacity var(--motion-fast) var(--ease-gentle), transform var(--motion-fast) var(--ease-spring);
}

.north-star-trigger__shadow[b-ugzcnq21h0] {
    opacity: .8;
    transform: translateY(3px) scale(.82);
}

.north-star-trigger__mark[b-ugzcnq21h0] {
    inset: 50% auto auto 50%;
    width: 34px;
    height: 34px;
    transform: translate(-50%, -50%);
    transition: transform var(--motion-fast) var(--ease-spring);
}

.north-star-trigger__mark img[b-ugzcnq21h0] {
    display: block;
    width: 100%;
    height: 100%;
}

.north-star-trigger__satellite[b-ugzcnq21h0] {
    position: absolute;
    z-index: 1;
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--dr-text);
    box-shadow: 0 0 7px rgba(245, 243, 250, .8);
    pointer-events: none;
    transition: transform var(--motion-fast) var(--ease-spring), opacity var(--motion-fast) var(--ease-gentle);
}

.north-star-trigger__satellite--one[b-ugzcnq21h0] { top: 11px; right: 12px; width: 3px; height: 3px; opacity: .8; }
.north-star-trigger__satellite--two[b-ugzcnq21h0] { top: 18px; left: 10px; opacity: .58; }
.north-star-trigger__satellite--three[b-ugzcnq21h0] { right: 17px; bottom: 11px; width: 3px; height: 3px; opacity: .64; }

.north-star-navigation:not([open]) .north-star-trigger__halo[b-ugzcnq21h0] { animation: north-star-halo-breathe-b-ugzcnq21h0 5.2s var(--ease-gentle) infinite; }
.north-star-navigation:not([open]) .north-star-trigger__satellite--one[b-ugzcnq21h0] { animation: north-star-twinkle-b-ugzcnq21h0 2.8s var(--ease-gentle) infinite .2s; }
.north-star-navigation:not([open]) .north-star-trigger__satellite--two[b-ugzcnq21h0] { animation: north-star-twinkle-b-ugzcnq21h0 3.6s var(--ease-gentle) infinite .9s; }
.north-star-navigation:not([open]) .north-star-trigger__satellite--three[b-ugzcnq21h0] { animation: north-star-twinkle-b-ugzcnq21h0 3.1s var(--ease-gentle) infinite 1.4s; }

@keyframes north-star-halo-breathe-b-ugzcnq21h0 { 0%, 100% { opacity: .68; } 50% { opacity: .92; } }
@keyframes north-star-twinkle-b-ugzcnq21h0 { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

.north-star-backdrop[b-ugzcnq21h0] {
    position: fixed;
    z-index: 1;
    inset: 0;
    background: rgba(7, 9, 18, .12);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--motion-standard) var(--ease-gentle);
}

.north-star-navigation[open] .north-star-backdrop[b-ugzcnq21h0] {
    opacity: 1;
    pointer-events: auto;
}

.north-star-tray[b-ugzcnq21h0] {
    position: fixed;
    z-index: 2;
    right: var(--north-star-right);
    bottom: calc(var(--north-star-bottom) + var(--north-star-viewport-bottom, 0px) + var(--north-star-size) + .75rem);
    width: min(18rem, calc(100vw - 2rem));
    margin: 0;
    border: 1px solid rgba(185, 182, 255, .36);
    border-radius: 24px;
    padding: .65rem;
    color: var(--dr-text);
    background: var(--dr-surface-elevated);
    box-shadow: 0 22px 60px rgba(0, 0, 0, .42), 0 0 24px rgba(185, 182, 255, .1);
    opacity: 0;
    pointer-events: none;
    transform: translate3d(.65rem, .65rem, 0) scale(.97);
    transform-origin: bottom right;
    transition: opacity var(--motion-standard) var(--ease-gentle), transform var(--motion-standard) var(--ease-spring);
}

@supports (background: color-mix(in srgb, white 50%, transparent)) {
    .north-star-tray[b-ugzcnq21h0] { background: color-mix(in srgb, var(--dr-surface-elevated) 92%, transparent); }
}

@supports (backdrop-filter: blur(1px)) {
    .north-star-tray[b-ugzcnq21h0] { backdrop-filter: blur(14px); }
}

.north-star-navigation[open] .north-star-tray[b-ugzcnq21h0] {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

.north-star-navigation.is-closing .north-star-backdrop[b-ugzcnq21h0],
.north-star-navigation.is-closing .north-star-tray[b-ugzcnq21h0] {
    opacity: 0;
    pointer-events: none;
    transform: translate3d(.65rem, .65rem, 0) scale(.97);
}

.north-star-navigation[open] .north-star-trigger[b-ugzcnq21h0] {
    border-color: rgba(242, 196, 109, .62);
    box-shadow: 0 14px 32px rgba(0, 0, 0, .38), 0 0 0 1px rgba(242, 196, 109, .12), 0 0 30px rgba(185, 182, 255, .24);
}

.north-star-navigation[open] .north-star-trigger__halo[b-ugzcnq21h0],
.north-star-navigation[open] .north-star-trigger__glow[b-ugzcnq21h0] {
    opacity: 1;
    transform: scale(1.08);
}

.north-star-navigation[open] .north-star-trigger__satellite--one[b-ugzcnq21h0] { transform: translate(1px, -1px); }
.north-star-navigation[open] .north-star-trigger__satellite--two[b-ugzcnq21h0] { transform: translate(-1px, 1px); }
.north-star-navigation[open] .north-star-trigger__satellite--three[b-ugzcnq21h0] { transform: translate(1px, 1px); }

.north-star-constellation-line[b-ugzcnq21h0] {
    position: absolute;
    top: 2.1rem;
    right: 1.2rem;
    width: 8rem;
    height: 2.4rem;
    border-top: 1px solid rgba(185, 182, 255, .2);
    border-right: 1px solid rgba(185, 182, 255, .14);
    border-radius: 0 16px 0 0;
    opacity: .7;
    pointer-events: none;
    transform: skewX(-20deg) rotate(-8deg);
}

.north-star-route-list[b-ugzcnq21h0] {
    position: relative;
    display: grid;
    gap: .3rem;
}

.north-star-link[b-ugzcnq21h0],
.north-star-signout-button[b-ugzcnq21h0] {
    position: relative;
    display: flex;
    align-items: center;
    gap: .7rem;
    min-height: 48px;
    border: 1px solid transparent;
    border-radius: 15px;
    padding: .55rem .7rem;
    color: var(--dr-text-muted);
    font-size: .92rem;
    font-weight: 750;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--motion-fast) var(--ease-gentle), background-color var(--motion-fast) var(--ease-gentle), border-color var(--motion-fast) var(--ease-gentle), transform var(--motion-fast) var(--ease-spring);
}

.north-star-link:hover[b-ugzcnq21h0],
.north-star-link:focus-visible[b-ugzcnq21h0] {
    border-color: rgba(185, 182, 255, .3);
    color: var(--dr-text);
    background: rgba(185, 182, 255, .1);
    text-decoration: none;
}

.north-star-link:focus-visible[b-ugzcnq21h0],
.north-star-signout-button:focus-visible[b-ugzcnq21h0] {
    outline: 2px solid var(--dr-focus);
    outline-offset: 2px;
}

.north-star-link:active[b-ugzcnq21h0],
.north-star-signout-button:active[b-ugzcnq21h0] {
    transform: scale(.98);
}

.north-star-link.active[b-ugzcnq21h0] {
    border-color: rgba(185, 182, 255, .26);
    color: var(--dr-text);
    background: rgba(185, 182, 255, .16);
}

.north-star-link img[b-ugzcnq21h0] {
    flex: none;
    width: 24px;
    height: 24px;
}

.north-star-link span:not(.north-star-active-marker)[b-ugzcnq21h0] {
    position: relative;
    z-index: 1;
}

.north-star-active-marker[b-ugzcnq21h0] {
    width: 6px;
    height: 6px;
    margin-left: auto;
    border-radius: 50%;
    background: var(--dr-accent);
    box-shadow: 0 0 10px rgba(242, 196, 109, .56);
}

.north-star-divider[b-ugzcnq21h0] {
    height: 1px;
    margin: .55rem .45rem .4rem;
    background: linear-gradient(90deg, transparent, rgba(185, 182, 255, .3), transparent);
}

.north-star-signout[b-ugzcnq21h0] {
    margin: 0;
}

.north-star-signout-button[b-ugzcnq21h0] {
    width: 100%;
    border-color: rgba(240, 138, 153, .18);
    color: #f0b1bb;
    background: transparent;
    text-align: left;
}

.north-star-signout-button:hover[b-ugzcnq21h0],
.north-star-signout-button:focus-visible[b-ugzcnq21h0] {
    border-color: rgba(240, 138, 153, .35);
    color: #ffd6dc;
    background: rgba(240, 138, 153, .08);
}

.north-star-signout-icon[b-ugzcnq21h0] {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 1rem;
    line-height: 1;
}

body.sheet-open .north-star-navigation[b-ugzcnq21h0] {
    visibility: hidden;
    pointer-events: none;
}

@media (min-width: 701px) {
    .north-star-route-list[b-ugzcnq21h0] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .north-star-trigger[b-ugzcnq21h0],
    .north-star-trigger__halo[b-ugzcnq21h0],
    .north-star-trigger__glow[b-ugzcnq21h0],
    .north-star-trigger__mark[b-ugzcnq21h0],
    .north-star-trigger__satellite[b-ugzcnq21h0],
    .north-star-backdrop[b-ugzcnq21h0],
    .north-star-tray[b-ugzcnq21h0],
    .north-star-link[b-ugzcnq21h0],
    .north-star-signout-button[b-ugzcnq21h0] {
        transition-duration: 1ms !important;
    }

    .north-star-tray[b-ugzcnq21h0],
    .north-star-constellation-line[b-ugzcnq21h0],
    .north-star-trigger__glow[b-ugzcnq21h0],
    .north-star-trigger__halo[b-ugzcnq21h0],
    .north-star-trigger__satellite[b-ugzcnq21h0] {
        animation: none !important;
    }
}
/* /Components/Layout/PageAtmosphere.razor.rz.scp.css */
.page-atmosphere[b-g4cbjbanjr] {
    position: fixed;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    isolation: isolate;
    pointer-events: none;
}

.page-atmosphere__constellation[b-g4cbjbanjr],
.page-atmosphere__star[b-g4cbjbanjr] {
    position: absolute;
    display: block;
    max-width: none;
    pointer-events: none;
    user-select: none;
}

.page-atmosphere__constellation[b-g4cbjbanjr] {
    top: 7.25rem;
    right: clamp(-10rem, -7vw, -3.5rem);
    width: min(34vw, 28rem);
    opacity: .075;
    transform: rotate(-8deg);
}

.page-atmosphere__star--primary[b-g4cbjbanjr] {
    top: clamp(10rem, 19vh, 16rem);
    right: clamp(1.8rem, 8vw, 8rem);
    width: clamp(2.5rem, 4vw, 4.25rem);
    opacity: .22;
    animation: page-atmosphere-drift-b-g4cbjbanjr 32s ease-in-out infinite alternate;
}

.page-atmosphere__star--secondary[b-g4cbjbanjr] {
    right: clamp(12%, 24vw, 28%);
    bottom: clamp(10%, 16vh, 18%);
    width: clamp(1.1rem, 1.7vw, 1.65rem);
    opacity: .14;
}

.page-atmosphere--public .page-atmosphere__constellation[b-g4cbjbanjr] {
    top: 5.5rem;
    right: clamp(-11rem, -6vw, -3rem);
    opacity: .09;
}

.page-atmosphere--public .page-atmosphere__star--primary[b-g4cbjbanjr] {
    top: clamp(8rem, 15vh, 12rem);
    right: clamp(1.25rem, 7vw, 6rem);
    opacity: .26;
}

.page-atmosphere--public .page-atmosphere__star--secondary[b-g4cbjbanjr] {
    right: clamp(8%, 19vw, 22%);
    bottom: clamp(13%, 22vh, 24%);
}

@keyframes page-atmosphere-drift-b-g4cbjbanjr {
    from { opacity: .18; transform: translate3d(-1px, 0, 0) scale(.96) rotate(-4deg); }
    to { opacity: .29; transform: translate3d(4px, -5px, 0) scale(1.04) rotate(4deg); }
}

.page-atmosphere[data-motion="off"] .page-atmosphere__star--primary[b-g4cbjbanjr],
.page-atmosphere[data-motion="reduced"] .page-atmosphere__star--primary[b-g4cbjbanjr] {
    animation: none;
}

html.page-hidden .page-atmosphere__star--primary[b-g4cbjbanjr] {
    animation-play-state: paused;
}

@media (max-width: 600px) {
    .page-atmosphere__constellation[b-g4cbjbanjr] {
        top: 4rem;
        right: -8rem;
        width: 16rem;
        opacity: .055;
    }

    .page-atmosphere__star--primary[b-g4cbjbanjr] {
        top: 8.5rem;
        right: 1.25rem;
        width: 2rem;
        animation: none;
    }

    .page-atmosphere__star--secondary[b-g4cbjbanjr] {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-atmosphere__star--primary[b-g4cbjbanjr] {
        animation: none;
        transform: none;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-oaumvrxhee],
.components-reconnect-repeated-attempt-visible[b-oaumvrxhee],
.components-reconnect-failed-visible[b-oaumvrxhee],
.components-pause-visible[b-oaumvrxhee],
.components-resume-failed-visible[b-oaumvrxhee],
.components-rejoining-animation[b-oaumvrxhee] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-oaumvrxhee],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-oaumvrxhee],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-oaumvrxhee],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-oaumvrxhee],
#components-reconnect-modal.components-reconnect-retrying[b-oaumvrxhee],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-oaumvrxhee],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-oaumvrxhee],
#components-reconnect-modal.components-reconnect-failed[b-oaumvrxhee],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-oaumvrxhee] {
    display: block;
}


#components-reconnect-modal[b-oaumvrxhee] {
    color: var(--dr-text);
    background-color: var(--dr-surface);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: var(--dr-radius-sheet);
    border: 1px solid var(--dr-border);
    box-shadow: 0 26px 80px rgba(0, 0, 0, .48);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-oaumvrxhee 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-oaumvrxhee 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-oaumvrxhee 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-oaumvrxhee]::backdrop {
    background-color: var(--dr-overlay);
    animation: components-reconnect-modal-fadeInOpacity-b-oaumvrxhee 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-oaumvrxhee {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-oaumvrxhee {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-oaumvrxhee {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-oaumvrxhee] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-oaumvrxhee] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-oaumvrxhee] {
    border: 0;
    background-color: var(--dr-primary);
    color: var(--dr-on-primary);
    min-height: 44px;
    padding: 8px 24px;
    border-radius: var(--dr-radius-control);
}

    #components-reconnect-modal button:hover[b-oaumvrxhee] {
        background-color: var(--dr-primary-strong);
    }

    #components-reconnect-modal button:active[b-oaumvrxhee] {
        background-color: var(--dr-primary);
    }

.components-rejoining-animation[b-oaumvrxhee] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-oaumvrxhee] {
        position: absolute;
        border: 3px solid var(--dr-primary);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-oaumvrxhee 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-oaumvrxhee] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-oaumvrxhee {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Children.razor.rz.scp.css */
.children-page[b-rxc8oxu90z] {
    position: relative;
}

.children-page-heading[b-rxc8oxu90z] {
    align-items: center;
}

.children-page-heading__copy[b-rxc8oxu90z] {
    display: flex;
    align-items: center;
    gap: .85rem;
    min-width: 0;
}

.children-page-heading__mark[b-rxc8oxu90z] {
    position: relative;
    display: grid;
    flex: none;
    place-items: center;
    width: 3rem;
    height: 3rem;
    overflow: hidden;
    border: 1px solid rgba(var(--dr-primary-rgb), .26);
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, rgba(var(--dr-primary-rgb), .24), rgba(var(--dr-primary-rgb), .06) 58%, transparent 72%);
    box-shadow: inset 0 0 1.25rem rgba(var(--dr-primary-rgb), .09), 0 .65rem 1.75rem rgba(0, 0, 0, .18);
    animation: children-mark-in-b-rxc8oxu90z var(--motion-slow) var(--ease-spring) both;
}

.children-page-heading__mark[b-rxc8oxu90z]::after {
    position: absolute;
    top: .55rem;
    right: .5rem;
    width: .23rem;
    height: .23rem;
    border-radius: 50%;
    background: var(--dr-accent);
    box-shadow: -.85rem 1.35rem 0 -.05rem rgba(var(--dr-primary-rgb), .88), .3rem .85rem 0 -.07rem rgba(var(--dr-success-rgb), .85);
    content: "";
    opacity: .8;
}

.children-page-heading__mark img[b-rxc8oxu90z] {
    position: relative;
    z-index: 1;
    width: 1.45rem;
    height: 1.45rem;
}

.children-page-heading__summary[b-rxc8oxu90z] {
    max-width: 38rem;
    margin: .35rem 0 0;
    color: var(--dr-text-muted);
}

.children-page-heading__action[b-rxc8oxu90z] {
    flex: none;
}

.children-profiles-panel[b-rxc8oxu90z],
.children-add-panel[b-rxc8oxu90z],
.children-connect-panel[b-rxc8oxu90z],
.children-archived-panel[b-rxc8oxu90z] {
    position: relative;
    overflow: hidden;
}

.children-profiles-panel[b-rxc8oxu90z]::before,
.children-connect-panel[b-rxc8oxu90z]::before {
    position: absolute;
    top: 0;
    left: 1.35rem;
    width: 4.2rem;
    height: 1px;
    background: linear-gradient(90deg, var(--dr-primary), transparent);
    content: "";
    opacity: .58;
}

.children-empty[b-rxc8oxu90z] {
    margin-top: .85rem;
}

.children-profile-list[b-rxc8oxu90z] {
    margin-top: .85rem;
}

.children-profile-row[b-rxc8oxu90z] {
    position: relative;
    min-height: 64px;
    border: 1px solid transparent;
}

a.children-profile-row:hover[b-rxc8oxu90z],
a.children-profile-row:focus-visible[b-rxc8oxu90z] {
    border-color: rgba(var(--dr-primary-rgb), .28);
    background: linear-gradient(90deg, rgba(var(--dr-primary-rgb), .1), var(--dr-surface-elevated));
}

.children-profile-row__chevron[b-rxc8oxu90z] {
    color: var(--dr-primary);
    font-size: 1.55rem;
    line-height: 1;
    transition: transform var(--motion-fast) var(--ease-spring);
}

a.children-profile-row:hover .children-profile-row__chevron[b-rxc8oxu90z],
a.children-profile-row:focus-visible .children-profile-row__chevron[b-rxc8oxu90z] {
    transform: translateX(2px);
}

.children-panel-heading__star[b-rxc8oxu90z] {
    display: grid;
    flex: none;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid rgba(var(--dr-accent-rgb), .28);
    border-radius: 50%;
    color: var(--dr-accent);
    background: rgba(var(--dr-accent-rgb), .08);
    font-size: 1.1rem;
}

.children-panel-intro[b-rxc8oxu90z] {
    max-width: 42rem;
    margin: .1rem 0 .25rem;
}

.children-form-group[b-rxc8oxu90z] {
    min-width: 0;
    margin: 1.25rem 0;
    border: 0;
    padding: 0;
}

.children-form-group legend[b-rxc8oxu90z] {
    margin-bottom: .25rem;
    color: var(--dr-text);
    font-weight: 800;
}

.children-form-group--planning[b-rxc8oxu90z] {
    border: 1px solid rgba(var(--dr-primary-rgb), .19);
    border-radius: var(--dr-radius-control);
    padding: .85rem 1rem 1rem;
    background: linear-gradient(135deg, rgba(var(--dr-primary-rgb), .08), transparent 58%);
}

.children-form-group--planning legend[b-rxc8oxu90z] {
    padding: 0 .25rem;
}

.children-fallback-copy[b-rxc8oxu90z] {
    max-width: 42rem;
    margin: .15rem 0 0;
    color: var(--dr-text-muted);
    font-size: .86rem;
}

.children-form-grid[b-rxc8oxu90z] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 .85rem;
}

.children-field--wide[b-rxc8oxu90z] {
    grid-column: 1 / -1;
}

.children-form-grid .field[b-rxc8oxu90z] {
    min-width: 0;
}

.children-form-grid small[b-rxc8oxu90z] {
    color: var(--dr-text-muted);
    font-size: .78rem;
}

.children-connect-panel__orbit[b-rxc8oxu90z] {
    position: relative;
    display: block;
    flex: none;
    width: 2rem;
    height: 2rem;
    border: 1px solid rgba(var(--dr-success-rgb), .42);
    border-radius: 50%;
    box-shadow: inset 0 0 0 .35rem rgba(var(--dr-success-rgb), .05);
}

.children-connect-panel__orbit[b-rxc8oxu90z]::after {
    position: absolute;
    top: .32rem;
    right: .22rem;
    width: .38rem;
    height: .38rem;
    border-radius: 50%;
    background: var(--dr-success);
    box-shadow: 0 0 .65rem rgba(var(--dr-success-rgb), .7);
    content: "";
}

.children-archived-panel[b-rxc8oxu90z] {
    border-color: color-mix(in srgb, var(--dr-border) 84%, var(--dr-primary));
}

@keyframes children-mark-in-b-rxc8oxu90z {
    from { opacity: 0; transform: translate3d(-.45rem, .2rem, 0) scale(.82); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 700px) {
    .children-page-heading[b-rxc8oxu90z] {
        gap: .85rem;
    }

    .children-page-heading__copy[b-rxc8oxu90z] {
        align-items: flex-start;
    }

    .children-page-heading__mark[b-rxc8oxu90z] {
        width: 2.7rem;
        height: 2.7rem;
    }

    .children-page-heading__action[b-rxc8oxu90z] {
        display: none;
    }
}

@media (max-width: 520px) {
    .children-form-grid[b-rxc8oxu90z] {
        grid-template-columns: 1fr;
    }

    .children-field--wide[b-rxc8oxu90z] {
        grid-column: auto;
    }

    .children-form-group--planning[b-rxc8oxu90z] {
        padding-inline: .85rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .children-page-heading__mark[b-rxc8oxu90z] {
        animation: none;
    }

    .children-profile-row__chevron[b-rxc8oxu90z] {
        transition: none;
    }
}
/* /Components/Pages/Insights.razor.rz.scp.css */
/*
    Forecast Insights is a record, not a dashboard: three plain numbers and a
    chronological list. Nothing here scores a child or a caregiver, so no colour
    is used to praise or scold an outcome — inside and outside differ only by a
    quiet edge marker.
*/
.insights-stats[b-9jyy2l12l7] {
    margin-top: 6px;
}

.insights-empty[b-9jyy2l12l7] {
    margin: 10px 0 0;
    color: rgba(220, 225, 246, .86);
    font-size: .96rem;
    line-height: 1.45;
}

.insights-basis[b-9jyy2l12l7] {
    margin: 12px 0 0;
    font-size: .82rem;
}

.insights-rows[b-9jyy2l12l7] {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.insights-row[b-9jyy2l12l7] {
    padding: 12px 0 13px;
    border-top: 1px solid rgba(214, 207, 255, .1);
}

.insights-row:first-child[b-9jyy2l12l7] {
    border-top: none;
}

.insights-row__head[b-9jyy2l12l7] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    color: #f4f2ff;
    font-size: 1rem;
}

.insights-row__date[b-9jyy2l12l7] {
    color: rgba(198, 191, 236, .82);
    font-size: .86rem;
    white-space: nowrap;
}

.insights-row__times[b-9jyy2l12l7] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin-top: 7px;
    color: rgba(226, 221, 250, .9);
    font-size: .93rem;
}

.insights-row__times span[b-9jyy2l12l7] {
    display: flex;
    flex-direction: column;
}

.insights-row__times small[b-9jyy2l12l7] {
    color: rgba(186, 197, 229, .74);
    font-size: .68rem;
    font-weight: 760;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.insights-row__result[b-9jyy2l12l7] {
    display: inline-block;
    margin-top: 8px;
    color: rgba(198, 191, 236, .84);
    font-size: .85rem;
}

.insights-row.outside .insights-row__result[b-9jyy2l12l7] {
    color: rgba(224, 205, 236, .86);
}

@media (max-width: 640px) {
    .insights-row__head[b-9jyy2l12l7] {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .insights-row__times[b-9jyy2l12l7] {
        gap: 6px 16px;
    }
}
/* /Components/Pages/Settings.razor.rz.scp.css */
.settings-page[b-3uc741f4vl] {
    position: relative;
}

.settings-page-heading[b-3uc741f4vl] {
    align-items: center;
}

.settings-page-heading__copy[b-3uc741f4vl] {
    display: flex;
    align-items: center;
    gap: .85rem;
    min-width: 0;
}

.settings-page-heading__mark[b-3uc741f4vl] {
    position: relative;
    display: grid;
    flex: none;
    place-items: center;
    width: 3rem;
    height: 3rem;
    overflow: hidden;
    border: 1px solid rgba(var(--dr-primary-rgb), .28);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(var(--dr-primary-rgb), .24), rgba(var(--dr-primary-rgb), .06) 57%, transparent 72%);
    box-shadow: inset 0 0 1.2rem rgba(var(--dr-primary-rgb), .1), 0 .65rem 1.75rem rgba(0, 0, 0, .18);
    animation: settings-mark-in-b-3uc741f4vl var(--motion-slow) var(--ease-spring) both;
}

.settings-page-heading__mark[b-3uc741f4vl]::before,
.settings-page-heading__mark[b-3uc741f4vl]::after {
    position: absolute;
    border-radius: 50%;
    content: "";
}

.settings-page-heading__mark[b-3uc741f4vl]::before {
    top: .52rem;
    right: .52rem;
    width: .23rem;
    height: .23rem;
    background: var(--dr-accent);
    box-shadow: -.9rem 1.35rem 0 -.05rem rgba(var(--dr-primary-rgb), .88);
}

.settings-page-heading__mark[b-3uc741f4vl]::after {
    right: -.8rem;
    bottom: -.95rem;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid rgba(var(--dr-success-rgb), .22);
}

.settings-page-heading__mark img[b-3uc741f4vl] {
    position: relative;
    z-index: 1;
    width: 1.38rem;
    height: 1.38rem;
}

.settings-page-heading__summary[b-3uc741f4vl] {
    max-width: 40rem;
    margin: .35rem 0 0;
    color: var(--dr-text-muted);
}

.settings-group[b-3uc741f4vl] {
    position: relative;
    margin: 2.1rem 0 2.45rem;
}

.settings-group-heading[b-3uc741f4vl] {
    position: relative;
    max-width: 46rem;
    margin: 0 0 .6rem .2rem;
}

.settings-group-heading[b-3uc741f4vl]::before {
    position: absolute;
    top: .72rem;
    left: -1.15rem;
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--dr-primary);
    box-shadow: 0 0 .75rem rgba(var(--dr-primary-rgb), .58);
    content: "";
    opacity: .72;
}

.settings-group-heading h2[b-3uc741f4vl] {
    margin: .05rem 0 .2rem;
    color: var(--dr-text);
    font-size: 1.35rem;
    letter-spacing: -.03em;
}

.settings-group-heading > p:last-child[b-3uc741f4vl] {
    margin: 0;
    color: var(--dr-text-muted);
}

.settings-page .panel h3[b-3uc741f4vl] {
    margin: .05rem 0 .6rem;
    color: var(--dr-text);
    font-size: 1.12rem;
    letter-spacing: -.02em;
}

.settings-install-panel[b-3uc741f4vl] {
    border-color: rgba(var(--dr-primary-rgb), .25);
    background: linear-gradient(135deg, rgba(var(--dr-primary-rgb), .09), var(--dr-surface) 56%);
}

.settings-motion-panel[b-3uc741f4vl] {
    border-color: rgba(var(--dr-primary-rgb), .3);
    background: linear-gradient(135deg, rgba(var(--dr-primary-rgb), .08), var(--dr-surface) 62%);
}

.settings-motion-layout[b-3uc741f4vl] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(10rem, 14rem);
    gap: 1rem;
    align-items: stretch;
}

.settings-motion-options[b-3uc741f4vl] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.settings-motion-option[b-3uc741f4vl] {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    min-height: 4.35rem;
    border: 1px solid var(--dr-border);
    border-radius: var(--dr-radius-small);
    padding: .68rem .7rem;
    color: var(--dr-text-muted);
    background: rgba(var(--dr-bg-rgb), .22);
    cursor: pointer;
    transition: border-color var(--motion-fast) var(--ease-gentle), background-color var(--motion-fast) var(--ease-gentle), color var(--motion-fast) var(--ease-gentle), transform var(--motion-fast) var(--ease-spring);
}

.settings-motion-option:hover[b-3uc741f4vl] {
    border-color: rgba(var(--dr-primary-rgb), .5);
    transform: translateY(-1px);
}

.settings-motion-option.is-selected[b-3uc741f4vl] {
    border-color: rgba(var(--dr-primary-rgb), .78);
    color: var(--dr-text);
    background: rgba(var(--dr-primary-rgb), .13);
    box-shadow: 0 0 0 1px rgba(var(--dr-primary-rgb), .12), 0 .45rem 1rem rgba(0, 0, 0, .12);
}

.settings-motion-option input[b-3uc741f4vl] {
    flex: none;
    width: 1.05rem;
    height: 1.05rem;
    margin: .08rem 0 0;
    accent-color: var(--dr-primary);
}

.settings-motion-option span[b-3uc741f4vl] {
    display: grid;
    gap: .18rem;
}

.settings-motion-option strong[b-3uc741f4vl] {
    color: inherit;
    font-size: .88rem;
}

.settings-motion-option small[b-3uc741f4vl] {
    color: var(--dr-text-muted);
    font-size: .74rem;
    line-height: 1.35;
}

.settings-notification-panel[b-3uc741f4vl],
.settings-child-reminders[b-3uc741f4vl] {
    isolation: isolate;
}

.settings-notification-panel[b-3uc741f4vl]::before,
.settings-child-reminders[b-3uc741f4vl]::before {
    position: absolute;
    z-index: -1;
    top: -4rem;
    right: -4rem;
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--dr-primary-rgb), .1), transparent 66%);
    content: "";
    pointer-events: none;
}

.settings-profiles-panel[b-3uc741f4vl] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    border-color: rgba(var(--dr-success-rgb), .28);
    background: linear-gradient(135deg, rgba(var(--dr-success-rgb), .08), var(--dr-surface) 62%);
}

.settings-profiles-panel__mark[b-3uc741f4vl] {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgba(var(--dr-success-rgb), .3);
    border-radius: 50%;
    background: rgba(var(--dr-success-rgb), .08);
}

.settings-profiles-panel__mark img[b-3uc741f4vl] {
    width: 1.25rem;
    height: 1.25rem;
}

.settings-profiles-panel p[b-3uc741f4vl] {
    margin: 0;
}

.settings-field-grid[b-3uc741f4vl] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 .85rem;
}

.settings-prediction-panel[b-3uc741f4vl] {
    border-color: color-mix(in srgb, var(--dr-border) 80%, var(--dr-primary));
}

.settings-danger-panel[b-3uc741f4vl] {
    background: linear-gradient(135deg, rgba(var(--dr-danger-rgb), .07), var(--dr-surface) 60%);
}

@keyframes settings-mark-in-b-3uc741f4vl {
    from { opacity: 0; transform: translate3d(-.4rem, .18rem, 0) scale(.82); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 700px) {
    .settings-page-heading__copy[b-3uc741f4vl] {
        align-items: flex-start;
    }

    .settings-page-heading__mark[b-3uc741f4vl] {
        width: 2.7rem;
        height: 2.7rem;
    }

    .settings-group[b-3uc741f4vl] {
        margin-block: 1.7rem 2rem;
    }

    .settings-group-heading[b-3uc741f4vl]::before {
        left: -.85rem;
    }

    .settings-profiles-panel[b-3uc741f4vl] {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .settings-profiles-panel .button[b-3uc741f4vl] {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .settings-motion-layout[b-3uc741f4vl] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .settings-field-grid[b-3uc741f4vl] {
        grid-template-columns: 1fr;
    }

    .settings-profiles-panel[b-3uc741f4vl] {
        gap: .8rem;
        padding: 1.1rem;
    }

    .settings-motion-options[b-3uc741f4vl] {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .settings-page-heading__mark[b-3uc741f4vl] {
        animation: none;
    }

    .settings-motion-option[b-3uc741f4vl] {
        transition: none;
    }
}