:root {
    --jm-ink: #123d4b;
    --jm-muted: #51717a;
    --jm-blue: #177f9b;
    --jm-blue-deep: #075a75;
    --jm-cyan: #7dd8dd;
    --jm-foam: #f4ffff;
    --jm-sand: #e8d3a5;
    --jm-gold: #d9a441;
    --jm-paper: rgba(250, 255, 253, .9);
    --jm-line: rgba(19, 111, 132, .2);
    --jm-shadow: 0 24px 70px rgba(5, 62, 77, .18);
}

html[lang="hi"] .jm-page {
    font-family: "Noto Sans Devanagari", sans-serif;
}

.jm-page {
    min-height: 100vh;
    overflow: hidden;
    color: var(--jm-ink);
    background:
        radial-gradient(circle at 10% 20%, rgba(112, 210, 215, .24), transparent 28rem),
        radial-gradient(circle at 90% 70%, rgba(221, 176, 87, .16), transparent 26rem),
        linear-gradient(145deg, #f8ffff, #e8f5f3 55%, #f8f3e5);
    font-family: "Outfit", sans-serif;
}

.jm-immersive {
    position: relative;
    min-height: calc(100svh - 4.5rem);
    padding: clamp(.75rem, 1.6vw, 1.5rem);
    isolation: isolate;
}

.jm-immersive::before,
.jm-immersive::after {
    position: absolute;
    z-index: -1;
    border: 1px solid rgba(21, 123, 147, .1);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.jm-immersive::before {
    width: min(56rem, 85vw);
    aspect-ratio: 1;
    top: 10%;
    left: -28rem;
}

.jm-immersive::after {
    width: 32rem;
    aspect-ratio: 1;
    right: -15rem;
    bottom: -12rem;
}

.jm-chrome {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) minmax(18rem, 2fr) minmax(12rem, 1fr);
    align-items: start;
    gap: 1rem;
    max-width: 96rem;
    margin: 0 auto;
}

.jm-crumb {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    padding-top: .35rem;
    color: var(--jm-muted);
    font-size: .76rem;
}

.jm-crumb a {
    color: inherit;
    text-underline-offset: .18rem;
}

.jm-title-block {
    text-align: center;
}

.jm-title-block p {
    margin: 0 0 .12rem;
    color: var(--jm-blue);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.jm-title-block h1 {
    margin: 0;
    font-family: "Fraunces", "Noto Serif Devanagari", serif;
    font-size: clamp(1.8rem, 3.7vw, 3.4rem);
    font-weight: 600;
    letter-spacing: -.045em;
}

.jm-title-block > span {
    display: block;
    max-width: 46rem;
    margin: .3rem auto 0;
    color: var(--jm-muted);
    font-size: clamp(.76rem, 1vw, .92rem);
    line-height: 1.5;
}

.jm-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .6rem;
}

.jm-lang {
    display: inline-flex;
    padding: .2rem;
    border: 1px solid var(--jm-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .62);
}

.jm-lang a {
    padding: .35rem .55rem;
    border-radius: 999px;
    color: var(--jm-muted);
    font-size: .69rem;
    font-weight: 700;
    text-decoration: none;
}

.jm-lang a.is-active {
    color: #fff;
    background: var(--jm-blue-deep);
}

.jm-focus {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    padding: .53rem .72rem;
    border: 1px solid var(--jm-line);
    border-radius: 999px;
    color: var(--jm-ink);
    background: rgba(255, 255, 255, .75);
    font: inherit;
    font-size: .72rem;
    font-weight: 700;
}

.jm-group-key {
    display: flex;
    justify-content: center;
    gap: .4rem;
    max-width: 80rem;
    margin: .8rem auto .25rem;
    padding: .3rem;
    overflow-x: auto;
    scrollbar-width: thin;
}

.jm-group-key button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .35rem;
    padding: .35rem .58rem;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--jm-muted);
    background: transparent;
    font: inherit;
    font-size: .67rem;
}

.jm-group-key button span {
    color: var(--jm-blue);
    font-size: .9rem;
}

.jm-group-key button.is-active {
    border-color: var(--jm-line);
    color: var(--jm-ink);
    background: rgba(255, 255, 255, .76);
    box-shadow: 0 5px 18px rgba(5, 62, 77, .08);
}

.jm-stage-shell {
    display: grid;
    grid-template-columns: minmax(34rem, 1.55fr) minmax(20rem, .75fr);
    align-items: start;
    gap: clamp(1rem, 2vw, 2rem);
    max-width: 91rem;
    min-height: min(44rem, calc(100svh - 13rem));
    margin: 0 auto;
}

.jm-visual-column {
    min-width: 0;
}

.jm-mandala {
    position: relative;
    width: min(100%, 47rem);
    aspect-ratio: 1;
    margin-inline: auto;
}

.jm-orbit-lines span {
    position: absolute;
    inset: 50%;
    border: 1px solid var(--jm-line);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.jm-orbit-lines span:nth-child(1) {
    width: 95%;
    height: 95%;
}

.jm-orbit-lines span:nth-child(2) {
    width: 75%;
    height: 75%;
    border-style: dashed;
}

.jm-orbit-lines span:nth-child(3) {
    width: 58%;
    height: 58%;
}

.jm-orbit-node {
    --jm-angle: calc(var(--jm-index) * 360deg / var(--jm-count));
    position: absolute;
    z-index: 4;
    top: calc(50% - 1.15rem);
    left: calc(50% - 1.15rem);
    display: grid;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    border: 1px solid rgba(17, 109, 131, .36);
    border-radius: 50%;
    color: var(--jm-blue-deep);
    background: rgba(249, 255, 253, .96);
    box-shadow: 0 4px 15px rgba(5, 74, 91, .12);
    font-size: .7rem;
    font-weight: 700;
    text-decoration: none;
    transform: rotate(var(--jm-angle)) translateX(clamp(13.5rem, 21vw, 21.7rem)) rotate(calc(var(--jm-angle) * -1));
    transition: opacity .25s ease, transform .35s ease, box-shadow .25s ease, background .25s ease;
}

.jm-orbit-node small {
    position: absolute;
    bottom: calc(100% + .35rem);
    left: 50%;
    z-index: 6;
    width: max-content;
    max-width: 12rem;
    padding: .28rem .48rem;
    border-radius: .35rem;
    color: #fff;
    background: rgba(4, 52, 64, .94);
    font-weight: 500;
    line-height: 1.25;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, .3rem);
    transition: .2s ease;
}

.jm-orbit-node:hover small,
.jm-orbit-node:focus-visible small {
    opacity: 1;
    transform: translate(-50%, 0);
}

.jm-orbit-node:hover,
.jm-orbit-node:focus-visible,
.jm-orbit-node.is-active {
    z-index: 7;
    color: #fff;
    background: var(--jm-blue-deep);
    box-shadow: 0 0 0 .28rem rgba(75, 190, 203, .2), 0 8px 25px rgba(5, 74, 91, .24);
}

.jm-orbit-node.is-locked {
    border-style: dashed;
    color: #765f35;
    background: #fffaf0;
}

.jm-orbit-node i {
    position: absolute;
    right: -.22rem;
    bottom: -.1rem;
    display: grid;
    place-items: center;
    width: .86rem;
    height: .86rem;
    border-radius: 50%;
    color: #fff;
    background: #8c6d33;
    font-size: .46rem;
}

.jm-orbit-node.is-filtered {
    opacity: .12;
    pointer-events: none;
}

.jm-scene {
    position: absolute;
    inset: 18%;
    z-index: 2;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 50%;
    background: linear-gradient(#bfe8eb 0 48%, #69bdcb 49%, #0c718e 100%);
    box-shadow:
        inset 0 0 0 .6rem rgba(255, 255, 255, .2),
        inset 0 -5rem 8rem rgba(1, 70, 91, .26),
        var(--jm-shadow);
    transition: background 1s ease, box-shadow 1s ease;
}

.jm-scene::before {
    position: absolute;
    inset: .8rem;
    z-index: 7;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: inherit;
    content: "";
    pointer-events: none;
}

.jm-scene__sky,
.jm-scene__field {
    position: absolute;
    inset: 0;
}

.jm-sun,
.jm-moon,
.jm-cloud,
.jm-mountain,
.jm-water,
.jm-ice,
.jm-wave,
.jm-vortex,
.jm-lotus,
.jm-salt,
.jm-sediment,
.jm-mirage,
.jm-frost,
.jm-waterfall,
.jm-ground,
.jm-drop {
    position: absolute;
    display: none;
}

.jm-water {
    inset: 52% -10% -5%;
    display: block;
    border-radius: 48% 52% 0 0;
    background:
        repeating-radial-gradient(ellipse at 50% 0, transparent 0 1rem, rgba(255, 255, 255, .18) 1.05rem 1.14rem),
        linear-gradient(#4cb5c8, #075c7e);
    animation: jm-water-breathe 6s ease-in-out infinite;
}

.jm-scene__label {
    position: absolute;
    z-index: 12;
    top: 50%;
    left: 50%;
    display: grid;
    width: 70%;
    text-align: center;
    transform: translate(-50%, -50%);
}

.jm-scene__label > span {
    color: rgba(255, 255, 255, .8);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .2em;
}

.jm-scene__label strong {
    color: #fff;
    font-family: "Fraunces", "Noto Serif Devanagari", serif;
    font-size: clamp(1.05rem, 2.3vw, 1.8rem);
    line-height: 1.12;
    text-shadow: 0 2px 13px rgba(0, 48, 64, .55);
}

.jm-scene__label small {
    margin-top: .3rem;
    color: rgba(255, 255, 255, .88);
    font-size: clamp(.58rem, 1vw, .73rem);
    line-height: 1.25;
    text-shadow: 0 1px 8px rgba(0, 48, 64, .6);
}

.jm-formless-legend {
    position: absolute;
    z-index: 15;
    right: 10%;
    bottom: 12%;
    left: 10%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .28rem;
}

.jm-formless-legend[hidden] {
    display: none;
}

.jm-formless-legend span {
    padding: .23rem .46rem;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 999px;
    color: #fff;
    background: rgba(1, 74, 97, .28);
    font-size: .56rem;
    backdrop-filter: blur(5px);
}

/* Form and state family */
.jm-scene[data-variant="glacier"] .jm-mountain,
.jm-scene[data-variant="melting"] .jm-mountain,
.jm-scene[data-variant="iceberg"] .jm-mountain {
    display: block;
    right: 12%;
    bottom: 28%;
    left: 12%;
    height: 44%;
    background: linear-gradient(145deg, #f9ffff 0 46%, #93d2dc 47% 64%, #488fa8 65%);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    filter: drop-shadow(0 10px 12px rgba(0, 73, 93, .22));
}

.jm-scene[data-variant="glacier"] .jm-ice,
.jm-scene[data-variant="melting"] .jm-ice,
.jm-scene[data-variant="frost"] .jm-ice {
    display: block;
    inset: 16% 18% 27%;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 45% 55% 48% 52%;
    background: linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(123, 215, 226, .72));
    box-shadow: inset -1.5rem -1rem 2rem rgba(33, 137, 164, .18);
    transform: rotate(-6deg);
}

.jm-scene[data-variant="melting"] .jm-ice {
    animation: jm-melt 7s ease-in-out infinite;
}

.jm-scene[data-variant="frost"] .jm-frost {
    inset: 9%;
    display: block;
    background:
        repeating-conic-gradient(from 0deg at 50% 50%, transparent 0 28deg, rgba(255, 255, 255, .9) 29deg 31deg),
        radial-gradient(circle, transparent 0 30%, rgba(255, 255, 255, .28) 31% 33%, transparent 34%);
    clip-path: polygon(50% 0, 57% 38%, 92% 18%, 65% 46%, 100% 50%, 64% 56%, 84% 90%, 56% 64%, 50% 100%, 44% 64%, 16% 90%, 36% 56%, 0 50%, 35% 46%, 8% 18%, 43% 38%);
    opacity: .8;
    animation: jm-turn 24s linear infinite;
}

.jm-scene[data-variant="vapor"] {
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .8), transparent 24%),
        radial-gradient(circle at 65% 58%, rgba(255, 255, 255, .4), transparent 30%),
        linear-gradient(145deg, #cfe9ed, #72b9c8);
}

.jm-scene[data-variant="vapor"] .jm-water {
    opacity: .08;
}

.jm-scene[data-variant="vapor"] .jm-cloud {
    display: block;
    width: 45%;
    height: 14%;
    border-radius: 50%;
    background: rgba(255, 255, 255, .35);
    filter: blur(11px);
    animation: jm-vapor 8s ease-in-out infinite;
}

.jm-scene[data-variant="vapor"] .jm-cloud--one {
    top: 20%;
    left: 5%;
}

.jm-scene[data-variant="vapor"] .jm-cloud--two {
    right: 2%;
    bottom: 20%;
    animation-delay: -4s;
}

/* Source and depth family */
.jm-scene[data-family="source-depth"] {
    background: linear-gradient(#86ccd5 0 43%, #167c98 44%, #01384f 100%);
}

.jm-scene[data-variant="groundwater"] .jm-ground {
    inset: 30% 0 0;
    display: block;
    background:
        radial-gradient(ellipse at 35% 65%, #70d2dc 0 8%, transparent 9%),
        repeating-linear-gradient(175deg, #a88455 0 1.2rem, #6f563c 1.25rem 1.7rem);
    opacity: .82;
}

.jm-scene[data-variant="ocean-depth"] .jm-water {
    top: 30%;
    background: linear-gradient(#43b9cc, #002c48 88%);
}

.jm-scene[data-variant="iceberg"] .jm-mountain {
    bottom: 45%;
}

.jm-scene[data-variant="iceberg"]::after {
    position: absolute;
    top: 52%;
    right: 22%;
    bottom: 5%;
    left: 22%;
    border-radius: 0 0 45% 45%;
    background: rgba(173, 231, 238, .55);
    content: "";
    clip-path: polygon(13% 0, 87% 0, 100% 85%, 50% 100%, 0 85%);
}

/* Reflection and perception family */
.jm-scene[data-family="reflection-perception"] .jm-moon {
    top: 14%;
    right: 22%;
    display: block;
    width: 2.6rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #fff7cb;
    box-shadow: 0 0 2rem rgba(255, 246, 191, .8);
}

.jm-scene[data-variant="lotus-dew"] .jm-lotus,
.jm-scene[data-variant="dew-reflection"] .jm-lotus {
    right: 25%;
    bottom: 24%;
    display: block;
    width: 5rem;
    height: 2.3rem;
    border-radius: 90% 8% 90% 8%;
    background: linear-gradient(145deg, #78af65, #2f784c);
    transform: rotate(-10deg);
}

.jm-scene[data-variant="lotus-dew"] .jm-drop,
.jm-scene[data-variant="dew-reflection"] .jm-drop {
    display: block;
    width: 1.15rem;
    aspect-ratio: 1;
    border: 1px solid #fff;
    border-radius: 50% 50% 50% 5%;
    background: rgba(216, 252, 255, .72);
    box-shadow: inset -.25rem -.2rem .3rem rgba(31, 143, 168, .28), 0 .2rem .6rem rgba(0, 64, 83, .2);
    transform: rotate(-45deg);
}

.jm-scene[data-variant="lotus-dew"] .jm-drop--one,
.jm-scene[data-variant="dew-reflection"] .jm-drop--one {
    right: 38%;
    bottom: 37%;
}

.jm-scene[data-variant="mirage"] {
    background: linear-gradient(#a8dbe0 0 48%, #e7cf9b 49% 78%, #65b9cc 79% 83%, #e7cf9b 84%);
}

.jm-scene[data-variant="mirage"] .jm-mirage {
    right: 15%;
    bottom: 18%;
    left: 15%;
    display: block;
    height: 20%;
    background: linear-gradient(transparent, rgba(255, 255, 255, .58), transparent);
    filter: blur(5px);
    animation: jm-shimmer 4s ease-in-out infinite;
}

.jm-scene[data-variant="still-pond"] .jm-water {
    top: 49%;
    animation: none;
    background:
        linear-gradient(90deg, transparent 0 35%, rgba(255, 244, 191, .38) 50%, transparent 65%),
        linear-gradient(#56b7c4, #075d78);
}

/* Turbulence and purification family */
.jm-scene[data-variant="boiling"] .jm-water {
    background:
        radial-gradient(circle at 20% 75%, transparent 0 .3rem, rgba(255, 255, 255, .6) .35rem .42rem, transparent .48rem),
        radial-gradient(circle at 65% 55%, transparent 0 .55rem, rgba(255, 255, 255, .55) .6rem .68rem, transparent .72rem),
        linear-gradient(#4fc2cf, #09667f);
    animation: jm-boil 1.1s ease-in-out infinite;
}

.jm-scene[data-variant="whirlpool"] .jm-vortex {
    inset: 32% 16% 9%;
    display: block;
    border-radius: 50%;
    background: repeating-radial-gradient(ellipse, #0c6786 0 8%, #64c9d2 9% 15%, #06465f 16% 20%);
    transform: perspective(10rem) rotateX(55deg);
    animation: jm-turn 7s linear infinite;
}

.jm-scene[data-variant="settling"] .jm-sediment {
    right: 15%;
    bottom: 6%;
    left: 15%;
    display: block;
    height: 23%;
    border-radius: 50% 50% 0 0;
    background:
        radial-gradient(circle, #d1a760 0 .12rem, transparent .14rem) 0 0 / .8rem .7rem,
        linear-gradient(transparent, rgba(130, 88, 42, .78));
    animation: jm-settle 6s ease-in-out infinite;
}

/* Flow, grace, and union family */
.jm-scene[data-variant="river"] .jm-water {
    inset: 25% 26% -10%;
    border-radius: 65% 35% 0 0;
    transform: perspective(15rem) rotateX(48deg) rotate(7deg);
}

.jm-scene[data-variant="wave"] .jm-wave,
.jm-scene[data-variant="confluence"] .jm-wave {
    bottom: 22%;
    display: block;
    width: 62%;
    height: 25%;
    border: .65rem solid rgba(184, 244, 245, .68);
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-radius: 50%;
    animation: jm-wave 4.5s ease-in-out infinite;
}

.jm-wave--one {
    left: -5%;
}

.jm-wave--two {
    right: -5%;
    animation-delay: -2s !important;
}

.jm-scene[data-variant="rain"] .jm-cloud,
.jm-scene[data-variant="rain-cloud"] .jm-cloud {
    top: 15%;
    display: block;
    width: 42%;
    height: 16%;
    border-radius: 50%;
    background: rgba(241, 251, 251, .75);
    box-shadow: 1rem -.35rem 0 rgba(241, 251, 251, .62), -1rem .15rem 0 rgba(241, 251, 251, .65);
}

.jm-scene[data-variant="rain"] .jm-cloud--one,
.jm-scene[data-variant="rain-cloud"] .jm-cloud--one {
    left: 30%;
}

.jm-scene[data-variant="rain"] .jm-drop,
.jm-scene[data-variant="rain-cloud"] .jm-drop {
    top: 34%;
    display: block;
    width: .28rem;
    height: 1.5rem;
    border-radius: 99px;
    background: rgba(225, 253, 255, .85);
    animation: jm-rain 1.7s linear infinite;
}

.jm-scene[data-variant="rain"] .jm-drop--one,
.jm-scene[data-variant="rain-cloud"] .jm-drop--one { left: 36%; }
.jm-scene[data-variant="rain"] .jm-drop--two,
.jm-scene[data-variant="rain-cloud"] .jm-drop--two { left: 51%; animation-delay: -.6s; }
.jm-scene[data-variant="rain"] .jm-drop--three,
.jm-scene[data-variant="rain-cloud"] .jm-drop--three { left: 64%; animation-delay: -1.1s; }

.jm-scene[data-variant="waterfall"] .jm-waterfall {
    top: 7%;
    bottom: 9%;
    left: 40%;
    display: block;
    width: 22%;
    border-radius: 50% 50% 42% 42%;
    background:
        repeating-linear-gradient(92deg, rgba(255, 255, 255, .22) 0 .25rem, transparent .3rem .65rem),
        linear-gradient(#e4ffff, #43b9cd 75%, #a7eef0);
    box-shadow: 0 0 1.4rem rgba(209, 255, 255, .55);
    animation: jm-fall 2.4s linear infinite;
}

.jm-scene[data-variant="salt-dissolution"] .jm-salt {
    top: 25%;
    left: 43%;
    display: block;
    width: 16%;
    aspect-ratio: 1;
    border-radius: .35rem;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 0 1.4rem #fff;
    animation: jm-dissolve 6s ease-in-out infinite;
}

.jm-teaching {
    position: relative;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 1.4rem;
    background: var(--jm-paper);
    box-shadow: 0 18px 55px rgba(5, 62, 77, .13);
    backdrop-filter: blur(14px);
}

.jm-detail {
    padding: clamp(1.15rem, 2.2vw, 2rem);
}

.jm-detail + .jm-detail {
    border-top: 1px solid var(--jm-line);
}

.jm-enhanced .jm-detail:not(.is-active) {
    display: none;
}

.jm-detail__meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--jm-blue);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.jm-detail__meta span:first-child {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    color: #fff;
    background: var(--jm-blue-deep);
}

.jm-detail h2 {
    margin: .65rem 0 1rem;
    font-family: "Fraunces", "Noto Serif Devanagari", serif;
    font-size: clamp(1.55rem, 3vw, 2.45rem);
    line-height: 1.1;
}

.jm-detail h3 {
    margin: .9rem 0 .25rem;
    color: var(--jm-blue-deep);
    font-size: .73rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.jm-detail p,
.jm-reference blockquote {
    margin: 0;
    color: #315b65;
    font-size: .9rem;
    line-height: 1.68;
}

.jm-detail__visual {
    padding: .75rem .9rem;
    border-left: 3px solid var(--jm-cyan);
    border-radius: 0 .8rem .8rem 0;
    background: rgba(204, 244, 242, .36);
}

.jm-detail__visual h3 {
    margin-top: 0;
}

.jm-formless-note {
    margin-top: .9rem;
    padding: .8rem .9rem;
    border: 1px solid rgba(211, 158, 60, .32);
    border-radius: .8rem;
    background: rgba(255, 247, 220, .7);
}

.jm-formless-note strong {
    color: #775719;
    font-size: .72rem;
    text-transform: uppercase;
}

.jm-formless-note p {
    margin-top: .3rem;
    color: #685c41;
    font-size: .8rem;
}

.jm-reference {
    margin: 1rem 0 0;
    padding: .9rem;
    border: 1px solid var(--jm-line);
    border-radius: .85rem;
    background: rgba(255, 255, 255, .68);
}

.jm-reference blockquote::before {
    color: var(--jm-gold);
    content: "“";
    font-family: Georgia, serif;
    font-size: 2rem;
    line-height: 0;
    vertical-align: -.45rem;
}

.jm-reference figcaption {
    display: grid;
    gap: .35rem;
    margin-top: .7rem;
    color: var(--jm-muted);
    font-size: .69rem;
}

.jm-locked {
    display: grid;
    justify-items: center;
    padding: 1.2rem;
    border: 1px solid rgba(213, 169, 83, .35);
    border-radius: 1rem;
    text-align: center;
    background: linear-gradient(145deg, #fffaf0, #f8eed8);
}

.jm-locked > span {
    display: grid;
    place-items: center;
    width: 3.5rem;
    aspect-ratio: 1;
    border-radius: 50%;
    color: #fff;
    background: #9a7435;
    font-size: 1.4rem;
}

.jm-locked h3 {
    margin: .65rem 0 .2rem;
    color: #76571d;
}

.jm-locked a {
    margin-top: .75rem;
    padding: .55rem .8rem;
    border-radius: 999px;
    color: #fff;
    background: #76571d;
    font-size: .75rem;
    font-weight: 700;
    text-decoration: none;
}

.jm-status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.jm-evaluation {
    position: absolute;
    right: 1rem;
    bottom: .4rem;
    margin: 0;
    color: var(--jm-muted);
    font-size: .61rem;
}

.jm-below {
    max-width: 78rem;
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 4rem) 1rem;
}

.jm-disclaimer {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .4rem 1rem;
    max-width: 44rem;
    margin: .25rem auto 1rem;
    padding: 1rem 1.2rem;
    border: 1px solid var(--jm-line);
    border-radius: 1rem;
    background: rgba(255, 255, 255, .65);
}

.jm-disclaimer strong {
    color: var(--jm-blue-deep);
}

.jm-disclaimer p {
    margin: 0;
    color: var(--jm-muted);
}

body.jm-focus-active {
    overflow: hidden;
}

.jm-page.is-focus {
    position: fixed;
    inset: 0;
    z-index: 1060;
    overflow-y: auto;
}

.jm-page.is-focus .jm-immersive {
    min-height: 100svh;
}

.jm-page.is-focus .jm-crumb,
.jm-page.is-focus .jm-below {
    display: none;
}

.jm-page.is-focus .jm-stage-shell {
    min-height: calc(100svh - 10rem);
}

.jm-page.is-focus .jm-focus {
    color: #fff;
    background: var(--jm-blue-deep);
}

@keyframes jm-water-breathe {
    50% { transform: translateY(.5rem) scaleX(1.03); }
}

@keyframes jm-melt {
    50% { border-radius: 55% 45% 64% 36%; transform: translateY(1rem) scale(.88, .94) rotate(4deg); opacity: .76; }
}

@keyframes jm-vapor {
    50% { transform: translate(1.7rem, -1.1rem) scale(1.2); opacity: .45; }
}

@keyframes jm-turn {
    to { transform: rotate(360deg); }
}

@keyframes jm-shimmer {
    50% { transform: skewX(8deg) scaleY(.65); opacity: .55; }
}

@keyframes jm-boil {
    50% { transform: translateY(-.4rem) scale(1.03); }
}

@keyframes jm-wave {
    50% { transform: translateX(1.8rem) rotate(7deg); }
}

@keyframes jm-rain {
    from { transform: translateY(-1rem); opacity: 0; }
    20% { opacity: 1; }
    to { transform: translateY(9rem); opacity: 0; }
}

@keyframes jm-fall {
    to { background-position: 0 3rem, 0 0; }
}

@keyframes jm-dissolve {
    0%, 10% { transform: translateY(-1rem) rotate(0); opacity: 1; }
    75%, 100% { transform: translateY(7rem) rotate(45deg) scale(.2); opacity: 0; filter: blur(.5rem); }
}

@keyframes jm-settle {
    0% { transform: translateY(-4rem); opacity: .3; }
    65%, 100% { transform: translateY(0); opacity: .9; }
}

@media (max-width: 1050px) {
    .jm-chrome {
        grid-template-columns: 1fr auto;
    }

    .jm-title-block {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .jm-crumb {
        grid-column: 1;
        grid-row: 2;
    }

    .jm-actions {
        grid-column: 2;
        grid-row: 2;
    }

    .jm-stage-shell {
        grid-template-columns: minmax(29rem, 1.35fr) minmax(18rem, .8fr);
    }

    .jm-orbit-node {
        transform: rotate(var(--jm-angle)) translateX(clamp(11.8rem, 24vw, 18rem)) rotate(calc(var(--jm-angle) * -1));
    }
}

@media (max-width: 820px) {
    .jm-immersive {
        min-height: 100svh;
    }

    .jm-actions {
        align-items: flex-end;
        flex-direction: column;
    }

    .jm-focus span {
        display: none;
    }

    .jm-group-key {
        justify-content: flex-start;
    }

    .jm-stage-shell {
        display: block;
        min-height: 0;
    }

    .jm-mandala {
        display: grid;
        align-items: center;
        width: 100%;
        aspect-ratio: auto;
        padding-top: .5rem;
    }

    .jm-orbit-lines {
        display: none;
    }

    .jm-orbit {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: .35rem;
        order: 2;
        margin: 1rem 0;
    }

    .jm-orbit-node {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        max-width: 2.55rem;
        height: auto;
        aspect-ratio: 1;
        justify-self: center;
        transform: none;
    }

    .jm-orbit-node small {
        display: none;
    }

    .jm-scene {
        position: relative;
        inset: auto;
        order: 1;
        width: min(72vw, 23rem);
        aspect-ratio: 1;
        margin: 0 auto;
    }

    .jm-teaching {
        max-height: none;
        margin-bottom: 1rem;
    }

    .jm-evaluation {
        position: static;
        text-align: center;
    }

    .jm-page.is-focus .jm-stage-shell {
        min-height: 0;
    }
}

@media (max-width: 540px) {
    .jm-chrome {
        grid-template-columns: 1fr;
    }

    .jm-title-block {
        text-align: center;
    }

    .jm-title-block > span {
        margin-inline: auto;
    }

    .jm-crumb {
        display: none;
    }

    .jm-actions {
        grid-column: 1;
        grid-row: 2;
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
    }

    .jm-group-key strong {
        display: none;
    }

    .jm-group-key button {
        padding: .3rem .5rem;
    }

    .jm-disclaimer {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jm-page *,
    .jm-page *::before,
    .jm-page *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}