:root {
    --stel-ink: #183127;
    --stel-muted: #6f8178;
    --stel-surface: rgba(255,255,255,.84);
    --stel-border: rgba(36, 68, 54, .1);
}

.stel-app {
    --leaf-opacity: .78;
    --root-opacity: .75;
    --trunk-scale: 1;
    --cloud-opacity: .3;
    --river-opacity: .82;
    --flower-opacity: .65;
    --bird-opacity: .7;
    --scene-glow: .6;
    max-width: 1280px;
    margin: 26px auto;
    color: var(--stel-ink);
    font-family: inherit;
}

.stel-shell {
    padding: 22px;
    border: 1px solid rgba(45,76,63,.08);
    border-radius: 30px;
    background:
        radial-gradient(circle at 93% 8%, rgba(226,235,214,.78), transparent 28%),
        linear-gradient(180deg, #fafbf7 0%, #f0f3eb 100%);
    box-shadow: 0 32px 90px rgba(24,49,39,.13);
}

.stel-fullscreen { max-width: none; min-height: 100vh; margin: 0; }
.stel-fullscreen .stel-shell { min-height: 100vh; border-radius: 0; }

.stel-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 14px;
}

.stel-brand {
    display: block;
    margin-bottom: 8px;
    color: #557065;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.stel-topbar h2 {
    margin: 0 0 8px;
    font-size: clamp(30px,4vw,50px);
    line-height: 1.04;
    letter-spacing: -.035em;
}

.stel-topbar p {
    max-width: 650px;
    margin: 0;
    color: var(--stel-muted);
    font-size: 15px;
}

.stel-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.stel-action {
    border: 1px solid var(--stel-border);
    border-radius: 999px;
    padding: 10px 15px;
    color: var(--stel-ink);
    background: rgba(255,255,255,.76);
    box-shadow: 0 6px 18px rgba(26,54,42,.06);
    cursor: pointer;
    transition: transform .2s ease, background .2s ease;
}

.stel-action:hover { transform: translateY(-1px); background: #fff; }
.stel-share { color: #fff; background: #2f5d45; }
.stel-compare[aria-pressed="true"] { color: #fff; background: #7c6848; }

.stel-insight-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.stel-insight {
    padding: 12px 14px;
    border: 1px solid var(--stel-border);
    border-radius: 16px;
    background: rgba(255,255,255,.72);
}

.stel-insight span {
    display: block;
    color: var(--stel-muted);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.stel-insight strong {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 4px;
    font-size: 15px;
}

.stel-insight em {
    color: #3d8159;
    font-size: 12px;
    font-style: normal;
}

.stel-stage {
    position: relative;
    overflow: hidden;
    border-radius: 25px;
    background: #dce4d9;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.24);
}

.stel-scene {
    display: block;
    width: 100%;
    height: auto;
    min-height: 540px;
}

.stel-sky { opacity: 0; transition: opacity 1.2s ease; }
.stel-theme-day .stel-sky-day,
.stel-theme-sunrise .stel-sky-sunrise,
.stel-theme-sunset .stel-sky-sunset,
.stel-theme-night .stel-sky-night { opacity: 1; }

.stel-sun,.stel-sun-glow,.stel-moon,.stel-stars {
    transition: opacity 1s ease, transform 1.2s ease;
}

.stel-moon,.stel-stars { opacity: 0; }
.stel-theme-night .stel-moon,.stel-theme-night .stel-stars { opacity: 1; }
.stel-theme-night .stel-sun,.stel-theme-night .stel-sun-glow { opacity: 0; }
.stel-stars { fill: #edf4f7; }
.stel-sun-glow { opacity: var(--scene-glow); }

.stel-cloud {
    fill: rgba(245,246,243,.9);
    opacity: var(--cloud-opacity);
    transition: opacity 1.1s ease;
}

.stel-cloud-a { animation: stelFloatA 22s ease-in-out infinite alternate; }
.stel-cloud-b { animation: stelFloatB 28s ease-in-out infinite alternate; }

.stel-mountain-back { fill: rgba(61,80,79,.3); }
.stel-mountain-front { fill: rgba(42,66,58,.55); }
.stel-snow-back,.stel-snow-front { fill: rgba(232,235,228,.68); }
.stel-mist { opacity: .23; }
.stel-ground-back { fill: #597c55; }
.stel-ground-front { fill: #416a49; }
.stel-meadow path { fill: #355f3e; opacity: .88; }

.stel-river-shadow { fill: rgba(39,74,75,.28); }
.stel-river { opacity: var(--river-opacity); transition: opacity 1s ease; }
.stel-river-highlight { stroke: rgba(230,246,243,.55); stroke-width: 6; stroke-linecap: round; opacity: var(--river-opacity); }

.stel-flowers circle { fill: #e2b9c0; opacity: var(--flower-opacity); }
.stel-flowers path { stroke: #315f3c; stroke-width: 3; opacity: var(--flower-opacity); }

.stel-roots {
    stroke-width: calc(8px * var(--trunk-scale));
    opacity: var(--root-opacity);
    transition: opacity 1s ease, stroke-width 1s ease;
}

.stel-trunk {
    transform-box: fill-box;
    transform-origin: center bottom;
    transform: scaleX(var(--trunk-scale));
    transition: transform 1s ease;
}

.stel-branches { stroke-width: 22px; }

.stel-crown {
    opacity: calc(var(--leaf-opacity) * .72);
    transform-box: fill-box;
    transform-origin: center;
    transition: opacity 1s ease;
    animation: stelBreathe 7s ease-in-out infinite;
}

.stel-leaf-clusters {
    fill: #527f49;
    opacity: calc(var(--leaf-opacity) * .68);
    transition: opacity 1s ease;
}

.stel-leaf-highlights {
    fill: #b2ca80;
    opacity: calc(var(--leaf-opacity) * .62);
}

.stel-season-autumn .stel-crown,
.stel-season-autumn .stel-leaf-clusters { filter: sepia(.25) saturate(.88) hue-rotate(330deg); }

.stel-season-winter .stel-crown,
.stel-season-winter .stel-leaf-clusters { filter: saturate(.48) brightness(.83); }

.stel-birds { opacity: var(--bird-opacity); transition: opacity 1s ease; }

.stel-fireflies { fill: #fff0a8; opacity: 0; }
.stel-theme-night .stel-fireflies { opacity: .8; animation: stelTwinkle 2.6s ease-in-out infinite alternate; }

.stel-overlay-cards {
    position: absolute;
    top: 18px;
    left: 18px;
    display: flex;
    gap: 9px;
}

.stel-index-card,.stel-season-card,.stel-focus-card {
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,.36);
    border-radius: 17px;
    color: #193128;
    background: var(--stel-surface);
    box-shadow: 0 12px 30px rgba(22,47,37,.1);
    backdrop-filter: blur(15px);
}

.stel-index-card span,.stel-season-card span,.stel-focus-card span,.stel-detail span {
    display: block;
    color: var(--stel-muted);
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.stel-index-card div { display: flex; align-items: baseline; gap: 4px; }
.stel-index-card strong,.stel-season-card strong { font-size: 28px; letter-spacing: -.04em; }
.stel-index-card small { color: #71837a; }
.stel-focus-card { position: absolute; left: 18px; bottom: 18px; }
.stel-focus-card strong { font-size: 20px; }

.stel-bottom-panel {
    display: grid;
    grid-template-columns: 1fr 270px;
    gap: 12px;
    margin-top: 12px;
}

.stel-metrics {
    display: grid;
    grid-template-columns: repeat(4,minmax(115px,1fr));
    gap: 9px;
}

.stel-metric {
    position: relative;
    min-height: 76px;
    border: 1px solid var(--stel-border);
    border-radius: 16px;
    padding: 12px 13px;
    text-align: left;
    color: var(--stel-ink);
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,247,241,.96));
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}

.stel-metric::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12px;
    right: 12px;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, #6f8e72, #a5b99a);
    opacity: .6;
}

.stel-metric:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(24,54,41,.08); }
.stel-metric span { display: block; color: var(--stel-muted); font-size: 12px; }
.stel-metric strong { display: block; margin-top: 5px; font-size: 24px; letter-spacing: -.03em; }
.stel-metric em { position: absolute; top: 12px; right: 12px; font-size: 11px; font-style: normal; }
.stel-metric em.is-up { color: #3c8159; }
.stel-metric em.is-down { color: #a85a4a; }
.stel-metric em.is-flat { color: #85958d; }

.stel-detail {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 18px;
    border: 1px solid rgba(171,142,91,.16);
    border-radius: 17px;
    background: linear-gradient(180deg,#fbf6ea,#f2ead8);
}

.stel-detail strong { display: block; margin-top: 5px; font-size: 18px; }
.stel-detail p { margin: 10px 0 0; color: #746e5f; font-size: 13px; }

.stel-ui-hidden .stel-topbar,
.stel-ui-hidden .stel-insight-strip,
.stel-ui-hidden .stel-bottom-panel,
.stel-ui-hidden .stel-overlay-cards,
.stel-ui-hidden .stel-focus-card { display: none; }

.stel-ui-hidden .stel-shell { padding: 0; background: transparent; box-shadow: none; }

@keyframes stelFloatA { from { transform: translateX(0); } to { transform: translateX(72px); } }
@keyframes stelFloatB { from { transform: translate(740px,205px) scale(.72); } to { transform: translate(655px,205px) scale(.72); } }
@keyframes stelBreathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.008); } }
@keyframes stelTwinkle { from { opacity: .26; } to { opacity: .92; } }

@media (max-width: 900px) {
    .stel-bottom-panel { grid-template-columns: 1fr; }
    .stel-metrics { grid-template-columns: repeat(4,minmax(90px,1fr)); }
}

@media (max-width: 680px) {
    .stel-app { margin: 8px; }
    .stel-shell { padding: 12px; border-radius: 21px; }
    .stel-topbar { flex-direction: column; }
    .stel-actions { justify-content: flex-start; }
    .stel-topbar h2 { font-size: 30px; }
    .stel-topbar p { font-size: 13px; }
    .stel-insight-strip { grid-template-columns: 1fr; }
    .stel-stage { border-radius: 19px; }
    .stel-scene { min-height: 455px; }
    .stel-overlay-cards { top: 10px; left: 10px; }
    .stel-index-card,.stel-season-card { padding: 9px 11px; }
    .stel-index-card strong,.stel-season-card strong { font-size: 21px; }
    .stel-focus-card { left: 10px; bottom: 10px; }
    .stel-metrics { grid-template-columns: repeat(2,minmax(110px,1fr)); }
}


.stel-share-modal[hidden] {
    display: none;
}

.stel-share-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: grid;
    place-items: center;
    padding: 20px;
}

.stel-share-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 24, 18, .72);
    backdrop-filter: blur(8px);
}

.stel-share-dialog {
    position: relative;
    z-index: 1;
    width: min(940px, 96vw);
    max-height: 94vh;
    overflow: auto;
    padding: 24px;
    border-radius: 26px;
    background: #f7f8f3;
    box-shadow: 0 40px 120px rgba(0,0,0,.32);
}

.stel-share-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    color: #244034;
    background: #fff;
    font-size: 24px;
    cursor: pointer;
}

.stel-share-copy h3 {
    margin: 4px 0 8px;
    font-size: clamp(26px, 4vw, 38px);
    letter-spacing: -.03em;
}

.stel-share-copy p {
    margin: 0 0 18px;
    color: var(--stel-muted);
}

.stel-share-formats {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.stel-share-formats button {
    flex: 1;
    border: 1px solid var(--stel-border);
    border-radius: 15px;
    padding: 12px;
    color: var(--stel-ink);
    background: #fff;
    cursor: pointer;
}

.stel-share-formats button.is-active {
    color: #fff;
    background: #2f5d45;
}

.stel-share-formats small {
    display: block;
    margin-top: 3px;
    opacity: .72;
}

.stel-share-preview-wrap {
    display: grid;
    place-items: center;
    min-height: 420px;
    padding: 18px;
    border-radius: 20px;
    background:
        linear-gradient(45deg, #e9ede6 25%, transparent 25%),
        linear-gradient(-45deg, #e9ede6 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #e9ede6 75%),
        linear-gradient(-45deg, transparent 75%, #e9ede6 75%);
    background-size: 24px 24px;
    background-position: 0 0, 0 12px, 12px -12px, -12px 0;
}

.stel-share-canvas {
    display: block;
    max-width: 100%;
    max-height: 58vh;
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(20, 42, 33, .2);
    background: #dfe6da;
}

.stel-share-options {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 18px 0;
    color: #52675d;
}

.stel-share-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.stel-share-buttons button {
    border: 0;
    border-radius: 999px;
    padding: 12px 18px;
    cursor: pointer;
}

.stel-share-native {
    color: #fff;
    background: #2f5d45;
}

.stel-share-save {
    color: #274135;
    background: #e4eadf;
}

body.stel-modal-open {
    overflow: hidden;
}

@media (max-width: 680px) {
    .stel-share-dialog {
        padding: 18px;
        border-radius: 20px;
    }

    .stel-share-preview-wrap {
        min-height: 300px;
        padding: 10px;
    }

    .stel-share-buttons {
        flex-direction: column;
    }

    .stel-share-buttons button {
        width: 100%;
    }
}

/* Guest preview */
.stel-guest-preview .stel-shell {
    overflow: hidden;
}

.stel-guest-header {
    padding: clamp(12px, 2vw, 24px) 0 22px;
}

.stel-guest-copy {
    max-width: 820px;
}

.stel-guest-copy h2 {
    max-width: 780px;
    margin: 0 0 14px;
    font-size: clamp(38px, 6vw, 70px);
    line-height: .98;
    letter-spacing: -.055em;
}

.stel-guest-copy > p {
    max-width: 720px;
    margin: 0;
    color: var(--stel-muted);
    font-size: clamp(16px, 2vw, 20px);
    line-height: 1.55;
}

.stel-guest-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.stel-app .stel-guest-primary,
.stel-app .stel-guest-secondary {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border-radius: 999px !important;
    padding: 12px 20px !important;
    font-weight: 700;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: transform .2s ease, box-shadow .2s ease !important;
}

.stel-app .stel-guest-primary {
    border: 1px solid #2f5d45 !important;
    color: #fff !important;
    background: #2f5d45 !important;
}

.stel-app .stel-guest-secondary {
    border: 1px solid rgba(47,93,69,.18) !important;
    color: #274438 !important;
    background: rgba(255,255,255,.78) !important;
}

.stel-app .stel-guest-primary:hover,
.stel-app .stel-guest-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(27,57,43,.12) !important;
}

.stel-guest-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.stel-guest-trust span {
    border: 1px solid var(--stel-border);
    border-radius: 999px;
    padding: 7px 11px;
    color: #61756b;
    background: rgba(255,255,255,.62);
    font-size: 12px;
}

.stel-guest-stage {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    background: #dbe4d6;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}

.stel-guest-stage .stel-scene {
    min-height: 520px;
}

.stel-guest-scene-label {
    position: absolute;
    left: 20px;
    bottom: 20px;
    max-width: 390px;
    padding: 14px 16px;
    border: 1px solid rgba(255,255,255,.38);
    border-radius: 18px;
    background: rgba(255,255,255,.84);
    box-shadow: 0 14px 36px rgba(21,46,36,.12);
    backdrop-filter: blur(14px);
}

.stel-guest-scene-label span {
    display: block;
    color: var(--stel-muted);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.stel-guest-scene-label strong {
    display: block;
    margin-top: 4px;
    font-size: 18px;
}

.stel-guest-benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.stel-guest-benefits article {
    min-height: 170px;
    padding: 18px;
    border: 1px solid var(--stel-border);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,247,241,.96));
}

.stel-guest-benefits article > span {
    color: #769078;
    font-size: 12px;
    font-weight: 700;
}

.stel-guest-benefits strong {
    display: block;
    margin-top: 18px;
    font-size: 19px;
    line-height: 1.2;
}

.stel-guest-benefits p {
    margin: 10px 0 0;
    color: var(--stel-muted);
    font-size: 14px;
    line-height: 1.5;
}

.stel-guest-final-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 12px;
    padding: 22px;
    border-radius: 20px;
    color: #edf5ef;
    background: linear-gradient(135deg, #213e31, #365f49);
}

.stel-guest-final-cta strong {
    display: block;
    max-width: 680px;
    font-size: clamp(22px, 3vw, 34px);
    line-height: 1.12;
}

.stel-guest-final-cta .stel-brand {
    color: #bed0c4;
}

.stel-guest-final-cta .stel-guest-primary {
    border-color: #f0e2b2 !important;
    color: #223c31 !important;
    background: #f0e2b2 !important;
    white-space: nowrap;
}

/* Prevent theme button colors from overriding ecosystem controls */
.stel-app button.stel-action,
.stel-app button.stel-share-native,
.stel-app button.stel-share-save,
.stel-app .stel-share-formats button {
    font-family: inherit !important;
}

.stel-app button.stel-share,
.stel-app button.stel-share-native {
    border-color: #2f5d45 !important;
    color: #fff !important;
    background: #2f5d45 !important;
}

.stel-app button.stel-action:not(.stel-share):not([aria-pressed="true"]) {
    color: #274438 !important;
    background: rgba(255,255,255,.82) !important;
}

.stel-app button.stel-compare[aria-pressed="true"] {
    color: #fff !important;
    background: #687b62 !important;
}

@media (max-width: 760px) {
    .stel-guest-copy h2 {
        font-size: 42px;
    }

    .stel-guest-stage .stel-scene {
        min-height: 440px;
    }

    .stel-guest-benefits {
        grid-template-columns: 1fr;
    }

    .stel-guest-benefits article {
        min-height: auto;
    }

    .stel-guest-final-cta {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* v1.0 Guest Journey */
.stel-guest-hero {
    display: grid;
    grid-template-columns: minmax(320px, .82fr) minmax(520px, 1.18fr);
    align-items: stretch;
    gap: 20px;
}

.stel-guest-hero .stel-guest-header {
    display: flex;
    align-items: center;
    padding: clamp(24px, 4vw, 56px);
    border: 1px solid var(--stel-border);
    border-radius: 24px;
    background:
        radial-gradient(circle at 85% 15%, rgba(225,235,213,.8), transparent 34%),
        rgba(255,255,255,.65);
}

.stel-guest-hero .stel-guest-stage {
    min-height: 560px;
    margin: 0;
}

.stel-guest-hero .stel-scene {
    height: 100%;
    min-height: 560px;
    object-fit: cover;
}

.stel-guest-benefits {
    margin-top: 16px;
}

.stel-claim-banner {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    margin-top: 14px;
    padding: 18px;
    border: 1px solid rgba(62, 101, 78, .16);
    border-radius: 19px;
    background:
        radial-gradient(circle at 92% 15%, rgba(232,218,167,.5), transparent 28%),
        linear-gradient(135deg, #edf4e9, #f9f6e8);
}

.stel-claim-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #2f5d45;
}

.stel-claim-icon span {
    position: relative;
    width: 22px;
    height: 28px;
    border: 3px solid #f7e7ad;
    border-top: 0;
    border-radius: 4px 4px 9px 9px;
}

.stel-claim-icon span::before {
    content: "";
    position: absolute;
    left: 3px;
    top: -12px;
    width: 10px;
    height: 12px;
    border: 3px solid #f7e7ad;
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
}

.stel-claim-copy strong {
    display: block;
    margin: 4px 0 5px;
    font-size: 20px;
}

.stel-claim-copy p {
    margin: 0;
    color: var(--stel-muted);
    font-size: 13px;
}

.stel-claim-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.stel-claim-primary,
.stel-claim-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border-radius: 999px;
    padding: 0 16px;
    font-weight: 700;
    text-decoration: none;
}

.stel-claim-primary {
    color: #fff !important;
    background: #2f5d45;
}

.stel-claim-secondary {
    color: #274136 !important;
    border: 1px solid rgba(47,93,69,.2);
    background: rgba(255,255,255,.76);
}

@media (max-width: 980px) {
    .stel-guest-hero {
        grid-template-columns: 1fr;
    }

    .stel-guest-hero .stel-guest-stage,
    .stel-guest-hero .stel-scene {
        min-height: 480px;
    }
}

@media (max-width: 720px) {
    .stel-claim-banner {
        grid-template-columns: 48px 1fr;
    }

    .stel-claim-icon {
        width: 46px;
        height: 46px;
    }

    .stel-claim-actions {
        grid-column: 1 / -1;
        justify-content: stretch;
    }

    .stel-claim-actions a {
        flex: 1;
    }
}


/* v1.1 Visual meaning and guest layout refinement */
.stel-meaning {
    margin-top: 12px;
    border: 1px solid var(--stel-border);
    border-radius: 18px;
    background: rgba(255,255,255,.72);
    overflow: hidden;
}

.stel-meaning summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 18px;
    cursor: pointer;
    list-style: none;
}

.stel-meaning summary::-webkit-details-marker {
    display: none;
}

.stel-meaning summary small {
    display: block;
    margin-bottom: 3px;
    color: var(--stel-muted);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.stel-meaning summary strong {
    font-size: 18px;
}

.stel-meaning summary em {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 7px 11px;
    color: #315543;
    background: #e9efe5;
    font-size: 11px;
    font-style: normal;
}

.stel-meaning[open] summary em {
    color: #fff;
    background: #315a45;
}

.stel-meaning-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 9px;
    padding: 0 14px 14px;
}

.stel-meaning-grid button {
    position: relative;
    min-height: 132px;
    border: 1px solid rgba(42,76,61,.09);
    border-radius: 15px;
    padding: 14px;
    text-align: left;
    color: var(--stel-ink);
    background: linear-gradient(180deg, #fff, #f3f6f0);
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.stel-meaning-grid button:hover,
.stel-meaning-grid button.is-active {
    transform: translateY(-2px);
    border-color: rgba(47,93,69,.34);
    box-shadow: 0 10px 25px rgba(25,54,41,.08);
}

.stel-meaning-grid strong {
    display: block;
    margin-top: 10px;
    font-size: 15px;
}

.stel-meaning-grid p {
    margin: 5px 0 0;
    color: var(--stel-muted);
    font-size: 12px;
    line-height: 1.45;
}

.stel-meaning-icon {
    display: block;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #dfe9da;
}

.stel-icon-sky {
    background: linear-gradient(180deg, #a8d0dd 0 52%, #e8d1a8 53%);
}

.stel-icon-crown {
    background:
        radial-gradient(circle at 35% 45%, #6e9a61 0 28%, transparent 29%),
        radial-gradient(circle at 65% 40%, #5d8a55 0 32%, transparent 33%),
        #e4ebdf;
}

.stel-icon-trunk {
    background: linear-gradient(90deg, #e5ebe1 0 35%, #76513a 36% 64%, #e5ebe1 65%);
}

.stel-icon-roots {
    background:
        linear-gradient(35deg, transparent 42%, #76513a 43% 48%, transparent 49%),
        linear-gradient(-35deg, transparent 42%, #76513a 43% 48%, transparent 49%),
        #e7ede3;
}

.stel-icon-river {
    background: linear-gradient(145deg, #dfe9dc 0 38%, #77afb2 39% 62%, #dfe9dc 63%);
}

.stel-icon-life {
    background:
        radial-gradient(circle at 30% 65%, #e2b9c0 0 8%, transparent 9%),
        radial-gradient(circle at 67% 35%, #597e56 0 10%, transparent 11%),
        #e5ede1;
}

.stel-meaning-note {
    margin: 0;
    padding: 0 18px 16px;
    color: var(--stel-muted);
    font-size: 12px;
}

.stel-scene-focus .stel-scene > * {
    opacity: .18 !important;
    transition: opacity .35s ease;
}

.stel-scene-focus[data-highlight="sky"] .stel-sky,
.stel-scene-focus[data-highlight="sky"] .stel-clouds,
.stel-scene-focus[data-highlight="sky"] .stel-sun,
.stel-scene-focus[data-highlight="sky"] .stel-sun-glow,
.stel-scene-focus[data-highlight="sky"] .stel-moon,
.stel-scene-focus[data-highlight="sky"] .stel-stars,

.stel-scene-focus[data-highlight="crown"] .stel-crown,
.stel-scene-focus[data-highlight="crown"] .stel-leaf-clusters,
.stel-scene-focus[data-highlight="crown"] .stel-leaf-highlights,

.stel-scene-focus[data-highlight="trunk"] .stel-trunk,
.stel-scene-focus[data-highlight="trunk"] .stel-branches,

.stel-scene-focus[data-highlight="roots"] .stel-roots,

.stel-scene-focus[data-highlight="river"] .stel-river,
.stel-scene-focus[data-highlight="river"] .stel-river-shadow,
.stel-scene-focus[data-highlight="river"] .stel-river-highlight,

.stel-scene-focus[data-highlight="life"] .stel-flowers,
.stel-scene-focus[data-highlight="life"] .stel-birds,
.stel-scene-focus[data-highlight="life"] .stel-fireflies,
.stel-scene-focus[data-highlight="life"] .stel-meadow {
    opacity: 1 !important;
}

.stel-guest-copy {
    min-width: 0;
}

.stel-guest-copy h2 {
    max-width: 100%;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    font-size: clamp(42px, 4.4vw, 62px);
    line-height: .98;
}

.stel-guest-copy > p {
    max-width: 600px;
}

@media (max-width: 1240px) {
    .stel-guest-hero {
        grid-template-columns: 1fr;
    }

    .stel-guest-hero .stel-guest-header {
        padding: clamp(26px, 5vw, 52px);
    }

    .stel-guest-copy h2 {
        max-width: 820px;
        font-size: clamp(42px, 7vw, 66px);
    }

    .stel-guest-hero .stel-guest-stage,
    .stel-guest-hero .stel-scene {
        min-height: 500px;
    }
}

@media (max-width: 760px) {
    .stel-meaning-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .stel-guest-copy h2 {
        font-size: clamp(36px, 12vw, 52px);
        line-height: 1;
    }
}

@media (max-width: 480px) {
    .stel-meaning-grid {
        grid-template-columns: 1fr;
    }

    .stel-meaning-grid button {
        min-height: 112px;
    }
}


/* v1.2 Visual polish and history */
.stel-shell {
    padding: clamp(16px, 2vw, 28px);
}

.stel-heading {
    max-width: 760px;
}

.stel-topbar {
    margin-bottom: 18px;
}

.stel-topbar h2 {
    max-width: 760px;
}

.stel-trend-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
}

.stel-trend-pill.is-up {
    color: #2e6846;
    background: #e3efe4;
}

.stel-trend-pill.is-down {
    color: #8a4a3f;
    background: #f4e4df;
}

.stel-trend-pill.is-steady,
.stel-trend-pill.is-neutral {
    color: #5c6f66;
    background: #e9eee8;
}

.stel-trend-pill strong {
    font-size: 13px;
}

.stel-insight-strip {
    margin-bottom: 14px;
}

.stel-insight {
    min-height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stel-stage {
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.25),
        0 20px 45px rgba(23,48,38,.08);
}

.stel-bottom-panel {
    margin-top: 14px;
}

.stel-metric {
    min-height: 82px;
    padding: 15px;
}

.stel-detail {
    padding: 20px;
}

.stel-history-section {
    margin-top: 16px;
    padding: 18px;
    border: 1px solid var(--stel-border);
    border-radius: 20px;
    background:
        radial-gradient(circle at 100% 0%, rgba(225,235,214,.7), transparent 28%),
        rgba(255,255,255,.7);
}

.stel-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 14px;
}

.stel-section-heading h3 {
    margin: 4px 0 0;
    font-size: clamp(22px, 3vw, 32px);
    letter-spacing: -.03em;
}

.stel-section-heading p {
    max-width: 420px;
    margin: 0;
    color: var(--stel-muted);
    font-size: 13px;
    text-align: right;
}

.stel-history-track {
    display: grid;
    grid-template-columns: repeat(6, minmax(145px, 1fr));
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
}

.stel-history-card {
    min-width: 145px;
    overflow: hidden;
    border: 1px solid rgba(42,76,61,.11);
    border-radius: 17px;
    padding: 0;
    color: var(--stel-ink);
    background: #fff;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.stel-history-card:hover,
.stel-history-card.is-active,
.stel-history-card.is-current {
    transform: translateY(-2px);
    border-color: rgba(47,93,69,.34);
    box-shadow: 0 10px 24px rgba(25,54,41,.09);
}

.stel-history-visual {
    position: relative;
    height: 116px;
    overflow: hidden;
    background: linear-gradient(180deg, #9fcbd8 0 58%, #718d68 59%);
}

.stel-history-night {
    background: linear-gradient(180deg, #13263a 0 58%, #4a6151 59%);
}

.stel-history-sunset {
    background: linear-gradient(180deg, #726d7d 0 48%, #cb8a69 58%, #687866 59%);
}

.stel-history-sunrise {
    background: linear-gradient(180deg, #b8d4df 0 48%, #e8c39c 58%, #748a68 59%);
}

.stel-history-orb {
    position: absolute;
    top: 13px;
    right: 15px;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background: #f4df9c;
}

.stel-history-night .stel-history-orb {
    background: #e3ebf2;
}

.stel-history-mountain {
    position: absolute;
    inset: auto 0 26px;
    height: 55px;
    background: rgba(48,68,63,.5);
    clip-path: polygon(0 100%, 0 80%, 22% 20%, 46% 80%, 68% 16%, 100% 76%, 100% 100%);
}

.stel-history-tree {
    position: absolute;
    left: 50%;
    bottom: 16px;
    width: 10px;
    height: 46px;
    background: #69462f;
    transform: translateX(-50%);
}

.stel-history-tree::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -28px;
    width: 54px;
    height: 46px;
    border-radius: 48%;
    background: #4e7d48;
    transform: translateX(-50%);
}

.stel-history-season-winter .stel-history-tree::before {
    filter: saturate(.45) brightness(.82);
}

.stel-history-season-autumn .stel-history-tree::before {
    filter: sepia(.3) hue-rotate(330deg);
}

.stel-history-river {
    position: absolute;
    right: -10px;
    bottom: -4px;
    width: 78px;
    height: 34px;
    border-radius: 60% 0 0;
    background: #79afb4;
    transform: rotate(-12deg);
}

.stel-history-meta {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 8px;
    padding: 11px 12px 12px;
    text-align: left;
}

.stel-history-meta span {
    color: var(--stel-muted);
    font-size: 10px;
}

.stel-history-meta strong {
    grid-row: 1 / 3;
    grid-column: 2;
    align-self: center;
    font-size: 18px;
}

.stel-history-meta em {
    color: #567064;
    font-size: 11px;
    font-style: normal;
}

.stel-guest-shell {
    max-width: 1180px;
}

.stel-guest-hero {
    grid-template-columns: minmax(360px, .9fr) minmax(480px, 1.1fr);
    gap: 16px;
}

.stel-guest-hero .stel-guest-header {
    padding: clamp(28px, 4vw, 48px);
}

.stel-guest-copy h2 {
    max-width: 650px;
    font-size: clamp(42px, 4.2vw, 60px);
    line-height: 1;
    letter-spacing: -.04em;
}

.stel-guest-actions {
    margin-top: 22px;
}

.stel-guest-benefits {
    gap: 10px;
}

.stel-guest-benefit {
    padding: 18px;
}

@media (max-width: 1120px) {
    .stel-history-track {
        grid-template-columns: repeat(6, minmax(160px, 160px));
    }

    .stel-guest-hero {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .stel-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .stel-section-heading p {
        text-align: left;
    }

    .stel-history-section {
        padding: 14px;
    }

    .stel-history-track {
        grid-template-columns: repeat(6, minmax(150px, 150px));
    }

    .stel-guest-copy h2 {
        font-size: clamp(38px, 11vw, 50px);
    }
}


/* v1.3 Personal motivation */
.stel-personal-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    margin-bottom: 9px;
    border-radius: 999px;
    padding: 0 11px;
    color: #2e5b43;
    background: #e6efe3;
    font-size: 12px;
    font-weight: 700;
}

.stel-profile-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 12px;
    border: 1px solid rgba(48,91,68,.15);
    border-radius: 14px;
    padding: 9px 12px;
    background: rgba(255,255,255,.68);
}

.stel-profile-badge span {
    color: var(--stel-muted);
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.stel-profile-badge strong {
    font-size: 13px;
}

.stel-motivation-card {
    display: grid;
    grid-template-columns: minmax(0,1.35fr) minmax(280px,.65fr);
    gap: 12px;
    margin-top: 14px;
}

.stel-motivation-copy,
.stel-next-step {
    border-radius: 20px;
    padding: clamp(20px,3vw,30px);
}

.stel-motivation-copy {
    color: #f6f4e9;
    background:
        radial-gradient(circle at 90% 15%, rgba(239,220,151,.25), transparent 28%),
        linear-gradient(135deg, #244f3a, #183a2c);
    box-shadow: 0 18px 42px rgba(20,54,39,.14);
}

.stel-motivation-copy .stel-brand {
    color: #dfe9d8;
}

.stel-motivation-copy h3 {
    max-width: 760px;
    margin: 8px 0 10px;
    color: #fff8df;
    font-size: clamp(24px,3.4vw,40px);
    line-height: 1.08;
    letter-spacing: -.035em;
}

.stel-motivation-copy > p {
    max-width: 720px;
    margin: 0;
    color: rgba(255,255,255,.78);
    font-size: 15px;
    line-height: 1.6;
}

.stel-motivation-copy blockquote {
    margin: 18px 0 0;
    border-left: 3px solid rgba(241,222,161,.7);
    padding: 3px 0 3px 15px;
    color: #f1e8c9;
    font-size: 13px;
    line-height: 1.55;
}

.stel-next-step {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid rgba(175,145,84,.18);
    background:
        radial-gradient(circle at 100% 0%, rgba(234,215,156,.45), transparent 34%),
        linear-gradient(180deg, #faf5e7, #f1ead7);
}

.stel-next-step > span {
    color: #766b54;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.stel-next-step strong {
    display: block;
    margin-top: 7px;
    color: #223b31;
    font-size: 20px;
    line-height: 1.25;
}

.stel-next-step p {
    margin: 8px 0 16px;
    color: #716b5d;
    font-size: 13px;
    line-height: 1.5;
}

.stel-mark-step {
    align-self: flex-start;
    border: 0;
    border-radius: 999px;
    padding: 11px 16px;
    color: #fff;
    background: #315c45;
    font-weight: 700;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease;
}

.stel-mark-step:hover {
    transform: translateY(-1px);
    background: #244b37;
}

.stel-mark-step.is-done {
    color: #315c45;
    background: #dce9d9;
}

.stel-app[data-step-committed="1"] .stel-stage {
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.25),
        0 20px 45px rgba(23,48,38,.08),
        0 0 0 4px rgba(115,156,112,.12);
}

@media (max-width: 900px) {
    .stel-motivation-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .stel-profile-badge {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .stel-motivation-copy,
    .stel-next-step {
        padding: 20px;
    }
}


/* v1.4 Growth rhythm */
.stel-growth-badge {
    position: absolute;
    right: 18px;
    bottom: 18px;
    min-width: 150px;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,.36);
    border-radius: 17px;
    color: #193128;
    background: rgba(255,255,255,.84);
    box-shadow: 0 12px 30px rgba(22,47,37,.1);
    backdrop-filter: blur(15px);
}

.stel-growth-badge span {
    display: block;
    color: var(--stel-muted);
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.stel-growth-badge strong {
    display: block;
    margin-top: 3px;
    font-size: 17px;
}

.stel-rhythm-card {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto minmax(260px,.7fr);
    align-items: center;
    gap: 22px;
    margin-top: 14px;
    padding: 20px;
    border: 1px solid rgba(47,93,69,.14);
    border-radius: 20px;
    background:
        radial-gradient(circle at 92% 8%, rgba(223,235,213,.8), transparent 30%),
        linear-gradient(135deg, #f7faf4, #edf4e9);
}

.stel-rhythm-main h3 {
    margin: 6px 0 6px;
    font-size: clamp(22px,3vw,31px);
    letter-spacing: -.03em;
}

.stel-rhythm-main p {
    max-width: 660px;
    margin: 0;
    color: var(--stel-muted);
    font-size: 13px;
    line-height: 1.55;
}

.stel-rhythm-stats {
    display: flex;
    gap: 10px;
}

.stel-rhythm-stats > div {
    min-width: 112px;
    border-radius: 16px;
    padding: 14px;
    text-align: center;
    background: rgba(255,255,255,.82);
}

.stel-rhythm-stats span {
    display: block;
    color: var(--stel-muted);
    font-size: 10px;
    text-transform: uppercase;
}

.stel-rhythm-stats strong {
    display: inline-block;
    margin-top: 5px;
    font-size: 28px;
}

.stel-rhythm-stats small {
    margin-left: 3px;
    color: var(--stel-muted);
}

.stel-growth-copy {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 9px;
    color: #567064;
    font-size: 11px;
}

.stel-next-stage-copy {
    text-align: right;
}

.stel-progress-track {
    position: relative;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #dfe8db;
}

.stel-progress-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #5f8d67, #a4bd83);
    transition: width .5s ease;
}

.stel-step-status {
    display: block;
    min-height: 18px;
    margin-top: 7px;
    color: #5e7469;
    font-size: 11px;
}

.stel-app[data-step-committed="1"] .stel-leaf-highlights {
    filter: brightness(1.08);
}

.stel-app[data-step-committed="1"] .stel-flowers {
    opacity: min(1, calc(var(--flower-opacity) + .15));
}

@media (max-width: 1040px) {
    .stel-rhythm-card {
        grid-template-columns: 1fr;
    }

    .stel-rhythm-stats {
        justify-content: flex-start;
    }
}

@media (max-width: 680px) {
    .stel-growth-badge {
        right: 10px;
        bottom: 10px;
        min-width: 130px;
        padding: 9px 11px;
    }

    .stel-growth-badge strong {
        font-size: 14px;
    }

    .stel-rhythm-card {
        padding: 16px;
    }

    .stel-rhythm-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .stel-rhythm-stats > div {
        min-width: 0;
    }

    .stel-growth-copy {
        flex-direction: column;
    }

    .stel-next-stage-copy {
        text-align: left;
    }
}

.stel-rain-layer,.stel-sun-rays,.stel-rainbow,.stel-wildlife,.stel-memory{opacity:0;transition:opacity .8s ease}.is-active{opacity:1!important}.stel-rain-layer{stroke:rgba(218,232,236,.72);stroke-width:3;stroke-linecap:round}.stel-rain-layer.is-active line{animation:stelRain 1.2s linear infinite}.stel-sun-rays{fill:rgba(255,240,178,.22)}.stel-rainbow{stroke:rgba(234,174,127,.78);stroke-width:18}.stel-butterflies{fill:#e5c5c7}.stel-bees{fill:#d9b44a}.stel-owl{fill:#6d6257}.stel-deer{fill:#8c725a;stroke:#715b48;stroke-width:3}.stel-hedgehog{fill:#79695b}.stel-squirrel{fill:#9a6b48;stroke:#8a5b3d;stroke-width:4}.stel-fox{fill:#a46b45;stroke:#895638;stroke-width:3}.stel-eagle{stroke:#354943;stroke-width:5;stroke-linecap:round}.stel-memory{fill:#7d6245;stroke:#654d37;stroke-width:4;stroke-linecap:round}.stel-discovery-card{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:18px;margin-top:14px;padding:18px;border:1px solid rgba(167,132,77,.18);border-radius:20px;background:linear-gradient(135deg,#faf6e9,#f0ead8)}.stel-discovery-symbol{width:58px;height:58px;border-radius:50%;background:radial-gradient(circle,#fff1a9 0 16%,rgba(255,241,169,.38) 17% 38%,#e9eee4 39%)}.stel-discovery-copy h3{margin:5px 0;font-size:clamp(21px,3vw,30px)}.stel-discovery-copy p{margin:0;color:#726a58;font-size:13px}.stel-save-discovery{border:0;border-radius:999px;padding:11px 16px;color:#fff;background:#315c45;font-weight:700;cursor:pointer}.stel-save-discovery.is-saved{color:#315c45;background:#dce9d9}.stel-biodiversity-card{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:10px;padding:14px 18px;border:1px solid var(--stel-border);border-radius:17px;background:rgba(255,255,255,.72)}.stel-biodiversity-card p{max-width:650px;margin:0;color:var(--stel-muted);font-size:12px;text-align:right}@keyframes stelRain{from{transform:translate(0,-20px)}to{transform:translate(-12px,42px)}}@media(max-width:760px){.stel-discovery-card{grid-template-columns:52px 1fr}.stel-save-discovery{grid-column:1/-1;width:100%}.stel-biodiversity-card{align-items:flex-start;flex-direction:column}.stel-biodiversity-card p{text-align:left}}


/* Somainterra Valley 3.0 Core */
.stel-valley-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 12px;
    padding: 13px 15px;
    border: 1px solid var(--stel-border);
    border-radius: 17px;
    background: rgba(255,255,255,.72);
}

.stel-valley-toolbar-copy strong {
    display: block;
    margin-top: 3px;
    font-size: 15px;
}

.stel-valley-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.stel-valley-controls button {
    border: 1px solid rgba(45,80,62,.12);
    border-radius: 999px;
    padding: 8px 12px;
    color: #29483a;
    background: #f8faf6;
    cursor: pointer;
}

.stel-valley-controls button:hover,
.stel-valley-controls button.is-active {
    color: #fff;
    background: #315c45;
}

.stel-valley-stage {
    perspective: 1200px;
    cursor: grab;
}

.stel-valley-stage:active {
    cursor: grabbing;
}

.stel-valley-stage .stel-scene {
    transform-origin: 50% 50%;
    transition: transform .8s cubic-bezier(.22,.75,.2,1);
    will-change: transform;
}

.stel-parallax-layer {
    transition: transform .45s ease-out, opacity .8s ease;
    will-change: transform;
}

.stel-zone-hotspots {
    pointer-events: all;
}

.stel-zone-hit {
    cursor: pointer;
    pointer-events: all;
}

.stel-zone-hit:hover > * {
    fill: rgba(255,255,255,.07);
    stroke: rgba(255,255,255,.25);
    stroke-width: 2;
}

.stel-zone-panel {
    position: absolute;
    z-index: 20;
    top: 50%;
    right: 24px;
    width: min(350px, calc(100% - 48px));
    transform: translateY(-50%);
    padding: 22px;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 22px;
    color: #183127;
    background: rgba(248,250,245,.92);
    box-shadow: 0 24px 70px rgba(18,38,30,.24);
    backdrop-filter: blur(18px);
}

.stel-zone-panel[hidden] {
    display: none;
}

.stel-zone-close,
.stel-book-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    color: #274336;
    background: #fff;
    font-size: 24px;
    cursor: pointer;
}

.stel-zone-panel h3 {
    margin: 8px 0 8px;
    font-size: 28px;
    letter-spacing: -.03em;
}

.stel-zone-panel p {
    color: #61766c;
    line-height: 1.55;
}

.stel-zone-metric {
    margin: 14px 0;
    padding: 13px;
    border-radius: 14px;
    background: #edf3e9;
}

.stel-zone-action {
    border: 0;
    border-radius: 999px;
    padding: 10px 14px;
    color: #fff;
    background: #315c45;
    cursor: pointer;
}

.stel-book-modal[hidden] {
    display: none;
}

.stel-book-modal {
    position: fixed;
    inset: 0;
    z-index: 999998;
    display: grid;
    place-items: center;
    padding: 20px;
}

.stel-book-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10,24,18,.72);
    backdrop-filter: blur(9px);
}

.stel-book-dialog {
    position: relative;
    z-index: 1;
    width: min(920px, 96vw);
    max-height: 92vh;
    overflow: auto;
    padding: 28px;
    border-radius: 26px;
    background:
        radial-gradient(circle at 100% 0%, rgba(234,220,169,.55), transparent 28%),
        #f7f5ec;
    box-shadow: 0 40px 120px rgba(0,0,0,.34);
}

.stel-book-dialog h3 {
    margin: 6px 0 8px;
    font-size: clamp(28px,4vw,44px);
    letter-spacing: -.04em;
}

.stel-book-dialog > p {
    max-width: 720px;
    color: #6c756d;
}

.stel-book-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
    margin-top: 20px;
}

.stel-book-grid article {
    padding: 18px;
    border: 1px solid rgba(55,82,68,.1);
    border-radius: 18px;
    background: rgba(255,255,255,.76);
}

.stel-book-grid span {
    color: #74837b;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.stel-book-grid strong {
    display: block;
    margin-top: 6px;
    font-size: 20px;
}

.stel-book-grid p {
    margin: 7px 0 0;
    color: #68766e;
    font-size: 12px;
    line-height: 1.5;
}

.stel-book-memories {
    margin-top: 20px;
}

.stel-book-memories h4 {
    margin: 0 0 10px;
    font-size: 18px;
}

.stel-book-memory-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.stel-book-memory-list span {
    border: 1px dashed rgba(75,91,82,.22);
    border-radius: 999px;
    padding: 8px 11px;
    color: #89938d;
    background: rgba(255,255,255,.45);
    font-size: 11px;
}

.stel-book-memory-list span.is-unlocked {
    border-style: solid;
    color: #2d5a42;
    background: #e0ebdc;
}

.stel-valley-app.is-camera-tree .stel-scene {
    transform: scale(1.42) translate(-1%, 7%);
}

.stel-valley-app.is-camera-lake .stel-scene {
    transform: scale(1.55) translate(23%, -6%);
}

.stel-valley-app.is-camera-mountain .stel-scene {
    transform: scale(1.48) translate(11%, 18%);
}

.stel-valley-app.is-camera-forest .stel-scene {
    transform: scale(1.5) translate(30%, 0%);
}

@media (max-width: 820px) {
    .stel-valley-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .stel-valley-controls {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .stel-valley-controls button {
        flex: 0 0 auto;
    }

    .stel-zone-panel {
        top: auto;
        right: 12px;
        bottom: 12px;
        left: 12px;
        width: auto;
        transform: none;
    }

    .stel-book-grid {
        grid-template-columns: 1fr;
    }

    .stel-valley-app.is-camera-tree .stel-scene,
    .stel-valley-app.is-camera-lake .stel-scene,
    .stel-valley-app.is-camera-mountain .stel-scene,
    .stel-valley-app.is-camera-forest .stel-scene {
        transform: scale(1.2);
    }
}


/* v3.1 Visual refinement */
.stel-app {
    max-width: 1180px;
}

.stel-shell {
    padding: 18px;
    border-radius: 26px;
    background:
        radial-gradient(circle at 92% 5%, rgba(226,236,215,.74), transparent 30%),
        linear-gradient(180deg, #fbfcf8 0%, #f3f6ef 100%);
}

.stel-topbar {
    align-items: center;
    margin-bottom: 12px;
}

.stel-heading h2 {
    font-size: clamp(34px, 4.2vw, 52px);
}

.stel-profile-badge,
.stel-trend-pill {
    margin-top: 8px;
}

.stel-insight-strip {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.stel-insight {
    min-height: 62px;
    padding: 10px 12px;
    border-radius: 14px;
}

.stel-valley-toolbar {
    margin-bottom: 10px;
    padding: 10px 12px;
    border-radius: 14px;
}

.stel-valley-controls button {
    padding: 7px 11px;
    font-size: 12px;
}

.stel-stage {
    border-radius: 22px;
    background: #d9e5d7;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.3),
        0 18px 46px rgba(24,52,40,.12);
}

.stel-scene {
    min-height: 520px;
}

.stel-crown {
    opacity: calc(var(--leaf-opacity) * .86);
}

.stel-leaf-clusters {
    opacity: calc(var(--leaf-opacity) * .78);
    fill: #557f4a;
}

.stel-leaf-highlights {
    opacity: calc(var(--leaf-opacity) * .78);
    fill: #b7d48a;
}

.stel-trunk {
    filter: saturate(.92) contrast(1.05);
}

.stel-roots {
    opacity: calc(var(--root-opacity) * .48);
    stroke-width: 6px;
}

.stel-valley-lake {
    opacity: .86;
}

.stel-valley-waterfall {
    opacity: .72;
}

.stel-valley-cave {
    opacity: .76;
}

.stel-live-summary-row {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr);
    gap: 10px;
    margin-top: 10px;
}

.stel-live-summary-row .stel-discovery-card,
.stel-live-summary-row .stel-biodiversity-card {
    margin-top: 0;
    min-height: 100%;
}

.stel-discovery-card {
    grid-template-columns: 52px minmax(0,1fr) auto;
    padding: 14px;
    border-radius: 16px;
}

.stel-discovery-symbol {
    width: 46px;
    height: 46px;
}

.stel-discovery-copy h3 {
    font-size: 21px;
}

.stel-biodiversity-card {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 14px;
    border-radius: 16px;
}

.stel-biodiversity-card p {
    text-align: left;
}

.stel-bottom-panel {
    grid-template-columns: minmax(0,1fr) 235px;
    gap: 10px;
    margin-top: 10px;
}

.stel-metrics {
    gap: 7px;
}

.stel-metric {
    min-height: 68px;
    padding: 11px 12px;
    border-radius: 14px;
}

.stel-metric strong {
    font-size: 21px;
}

.stel-detail {
    padding: 15px;
    border-radius: 15px;
}

.stel-dashboard-tabs {
    margin-top: 12px;
    border: 1px solid var(--stel-border);
    border-radius: 20px;
    background: rgba(255,255,255,.66);
    overflow: hidden;
}

.stel-tab-nav {
    display: flex;
    gap: 6px;
    padding: 8px;
    border-bottom: 1px solid rgba(45,77,63,.08);
    background: rgba(242,247,239,.88);
}

.stel-tab-nav button {
    border: 0;
    border-radius: 999px;
    padding: 9px 14px;
    color: #5f7268;
    background: transparent;
    font-weight: 700;
    cursor: pointer;
}

.stel-tab-nav button[aria-selected="true"] {
    color: #fff;
    background: #315c45;
    box-shadow: 0 8px 18px rgba(49,92,69,.18);
}

.stel-tab-panels {
    padding: 12px;
}

.stel-tab-panel {
    display: none;
}

.stel-tab-panel.is-active {
    display: block;
    animation: stelPanelIn .28s ease;
}

.stel-rhythm-card,
.stel-motivation-card,
.stel-history-section,
.stel-meaning {
    margin-top: 0;
}

.stel-rhythm-card {
    grid-template-columns: minmax(0,1fr) auto minmax(230px,.65fr);
    padding: 16px;
    border-radius: 16px;
}

.stel-rhythm-main h3 {
    font-size: 24px;
}

.stel-rhythm-main p {
    font-size: 12px;
}

.stel-motivation-card {
    margin-top: 10px;
    grid-template-columns: minmax(0,1.4fr) minmax(260px,.6fr);
}

.stel-motivation-copy,
.stel-next-step {
    padding: 20px;
    border-radius: 16px;
}

.stel-motivation-copy h3 {
    font-size: clamp(25px, 3vw, 36px);
}

.stel-history-section {
    padding: 4px;
    border: 0;
    background: transparent;
}

.stel-history-track {
    grid-template-columns: repeat(6, minmax(150px, 1fr));
}

.stel-meaning {
    border: 0;
    background: transparent;
}

.stel-meaning > summary {
    display: none;
}

.stel-meaning-grid {
    padding: 0;
}

.stel-meaning-note {
    padding: 12px 4px 2px;
}

@keyframes stelPanelIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 940px) {
    .stel-live-summary-row {
        grid-template-columns: 1fr;
    }

    .stel-bottom-panel {
        grid-template-columns: 1fr;
    }

    .stel-rhythm-card,
    .stel-motivation-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .stel-shell {
        padding: 10px;
        border-radius: 18px;
    }

    .stel-insight-strip {
        grid-template-columns: 1fr;
    }

    .stel-topbar {
        align-items: flex-start;
    }

    .stel-scene {
        min-height: 430px;
    }

    .stel-discovery-card {
        grid-template-columns: 42px minmax(0,1fr);
    }

    .stel-save-discovery {
        grid-column: 1 / -1;
        width: 100%;
    }

    .stel-tab-nav {
        overflow-x: auto;
    }

    .stel-tab-nav button {
        flex: 0 0 auto;
    }

    .stel-tab-panels {
        padding: 9px;
    }

    .stel-meaning-grid {
        grid-template-columns: 1fr;
    }
}


/* ================================================================
   Somainterra Valley 3.2 — Art Direction System
   ================================================================ */

.stel-art-direction-v32 {
    --art-ink: #163128;
    --art-moss: #315d45;
    --art-sage: #78946f;
    --art-water: #72aeb0;
    --art-gold: #e6cf88;
    --art-cream: #f7f2df;
    --art-shadow: rgba(19, 46, 35, .18);
}

/* Seasonal palette system */
.stel-art-direction-v32.stel-season-spring {
    --season-leaf-main: #5f8d55;
    --season-leaf-deep: #315f42;
    --season-leaf-light: #b1d389;
    --season-ground-main: #557c53;
    --season-ground-deep: #355f43;
    --season-accent: #e5c1c7;
}

.stel-art-direction-v32.stel-season-summer {
    --season-leaf-main: #3f7949;
    --season-leaf-deep: #224d36;
    --season-leaf-light: #9bcf71;
    --season-ground-main: #456f49;
    --season-ground-deep: #294f38;
    --season-accent: #e4ca79;
}

.stel-art-direction-v32.stel-season-autumn {
    --season-leaf-main: #7d7448;
    --season-leaf-deep: #4e5138;
    --season-leaf-light: #bda66c;
    --season-ground-main: #65704b;
    --season-ground-deep: #46533d;
    --season-accent: #c67f5e;
}

.stel-art-direction-v32.stel-season-winter {
    --season-leaf-main: #647668;
    --season-leaf-deep: #394d43;
    --season-leaf-light: #a5b6a8;
    --season-ground-main: #5d7266;
    --season-ground-deep: #40564c;
    --season-accent: #c8d8dd;
}

.stel-art-direction-v32 .stel-ground-back {
    fill: var(--season-ground-main);
}

.stel-art-direction-v32 .stel-ground-front,
.stel-art-direction-v32 .stel-meadow path {
    fill: var(--season-ground-deep);
}

.stel-art-direction-v32 .stel-canopy-back {
    fill: var(--season-leaf-deep);
    opacity: calc(var(--leaf-opacity) * .72);
}

.stel-art-direction-v32 .stel-canopy-mid {
    fill: var(--season-leaf-main);
    opacity: calc(var(--leaf-opacity) * .86);
}

.stel-art-direction-v32 .stel-canopy-front {
    fill: url(#stelCanopyWarm);
    opacity: var(--leaf-opacity);
}

.stel-art-direction-v32 .stel-leaf-highlights {
    fill: var(--season-leaf-light);
    opacity: calc(var(--leaf-opacity) * .72);
}

.stel-art-direction-v32 .stel-flowers circle {
    fill: var(--season-accent);
}

/* Scene depth */
.stel-distant-hill {
    opacity: .72;
}

.stel-mountain-back {
    fill: rgba(74, 91, 87, .40);
}

.stel-mountain-front {
    fill: rgba(48, 70, 62, .62);
}

.stel-snow-back,
.stel-snow-front {
    opacity: .74;
}

.stel-scene-vignette {
    fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='760'%3E%3Cdefs%3E%3CradialGradient id='v'%3E%3Cstop offset='58%25' stop-color='%23ffffff' stop-opacity='0'/%3E%3Cstop offset='100%25' stop-color='%23182d25' stop-opacity='.18'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='1200' height='760' fill='url(%23v)'/%3E%3C/svg%3E");
}

.stel-scene-texture {
    opacity: .65;
    mix-blend-mode: multiply;
}

.stel-water-reflections path {
    stroke: rgba(228, 246, 243, .52);
    stroke-width: 5;
    stroke-linecap: round;
}

.stel-reeds {
    stroke: #315b3d;
    stroke-width: 5;
    opacity: .82;
}

.stel-stones {
    fill: rgba(94, 100, 88, .78);
}

.stel-river {
    filter: saturate(.9) brightness(1.03);
}

.stel-river-highlight {
    stroke-width: 4;
    opacity: .74;
}

.stel-valley-lake {
    filter: saturate(.88);
}

/* Organic tree */
.stel-canopy-depth,
.stel-leaf-highlights {
    transform-box: fill-box;
    transform-origin: 50% 70%;
}

.stel-canopy-depth {
    animation: stelCanopyBreathe 8s ease-in-out infinite;
}

.stel-leaf-highlights {
    animation: stelLeafLightDrift 9s ease-in-out infinite alternate;
}

.stel-tree .stel-branches {
    stroke-width: 19px;
    opacity: .9;
}

.stel-tree .stel-trunk {
    filter:
        drop-shadow(0 12px 10px rgba(31, 44, 34, .20))
        saturate(.9)
        contrast(1.05);
}

.stel-tree .stel-roots {
    opacity: calc(var(--root-opacity) * .44);
    stroke-width: 5.5px;
}

/* Harmonized wildlife */
.stel-wildlife {
    filter: saturate(.72) drop-shadow(0 4px 4px rgba(30, 50, 39, .18));
}

.stel-owl,
.stel-deer,
.stel-hedgehog,
.stel-squirrel,
.stel-fox {
    opacity: .9;
}

/* UI art direction */
.stel-art-direction-v32 .stel-shell {
    border: 1px solid rgba(48, 80, 63, .09);
    background:
        radial-gradient(circle at 91% 4%, rgba(223, 235, 213, .76), transparent 29%),
        linear-gradient(180deg, #fbfcf8 0%, #f1f5ed 100%);
    box-shadow:
        0 30px 90px rgba(24, 54, 41, .12),
        inset 0 1px 0 rgba(255,255,255,.72);
}

.stel-art-direction-v32 .stel-stage {
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.28),
        0 24px 55px rgba(22, 50, 38, .14);
}

.stel-art-direction-v32 .stel-action,
.stel-art-direction-v32 .stel-valley-controls button {
    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.stel-art-direction-v32 .stel-action:hover,
.stel-art-direction-v32 .stel-valley-controls button:hover {
    box-shadow: 0 8px 20px rgba(31, 70, 50, .12);
}

.stel-art-direction-v32 .stel-insight,
.stel-art-direction-v32 .stel-metric,
.stel-art-direction-v32 .stel-detail,
.stel-art-direction-v32 .stel-dashboard-tabs {
    backdrop-filter: blur(12px);
}

/* Softer motion */
@keyframes stelCanopyBreathe {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-1.5px) scale(1.004); }
}

@keyframes stelLeafLightDrift {
    from { transform: translate(-2px, 0); opacity: .54; }
    to { transform: translate(3px, -2px); opacity: .78; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .stel-canopy-depth,
    .stel-leaf-highlights,
    .stel-cloud-a,
    .stel-cloud-b,
    .stel-fireflies,
    .stel-butterflies.is-active g,
    .stel-bees.is-active ellipse {
        animation: none !important;
    }

    .stel-parallax-layer {
        transform: none !important;
    }
}

@media (max-width: 700px) {
    .stel-art-direction-v32 .stel-scene {
        min-height: 420px;
    }

    .stel-scene-texture {
        opacity: .35;
    }

    .stel-foreground-details {
        opacity: .72;
    }
}


/* ================================================================
   Somainterra Valley 3.3 — Zone Journeys
   ================================================================ */

.stel-zone-journeys {
    margin-top: 12px;
    padding: 16px;
    border: 1px solid var(--stel-border);
    border-radius: 19px;
    background:
        radial-gradient(circle at 100% 0%, rgba(229,237,219,.68), transparent 30%),
        rgba(255,255,255,.7);
}

.stel-zone-journeys .stel-section-heading {
    margin-bottom: 12px;
}

.stel-zone-journey-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
}

.stel-zone-journey-card {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 88px;
    border: 1px solid rgba(44,77,61,.1);
    border-radius: 16px;
    padding: 12px;
    color: var(--stel-ink);
    text-align: left;
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,248,241,.94));
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.stel-zone-journey-card:hover,
.stel-zone-journey-card.is-active {
    transform: translateY(-2px);
    border-color: rgba(47,93,69,.34);
    box-shadow: 0 10px 24px rgba(24,54,41,.09);
}

.stel-zone-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(40,70,55,.08);
}

.stel-zone-card-tree {
    background:
        radial-gradient(circle at 50% 36%, #6e9b60 0 34%, transparent 35%),
        linear-gradient(90deg, transparent 43%, #76513a 44% 56%, transparent 57%),
        #e5ede1;
}

.stel-zone-card-lake {
    background: linear-gradient(180deg, #dfeadf 0 46%, #74adb0 47% 69%, #dfeadf 70%);
}

.stel-zone-card-mountain {
    background:
        linear-gradient(145deg, transparent 0 39%, #74847a 40% 62%, transparent 63%),
        linear-gradient(215deg, transparent 0 42%, #50665b 43% 66%, transparent 67%),
        #e8eee4;
}

.stel-zone-card-forest {
    background:
        linear-gradient(70deg, transparent 0 36%, #426d49 37% 55%, transparent 56%),
        linear-gradient(110deg, transparent 0 40%, #315d42 41% 60%, transparent 61%),
        #e3ebe0;
}

.stel-zone-card-copy {
    min-width: 0;
}

.stel-zone-card-copy small {
    display: block;
    color: #6e8177;
    font-size: 9px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.stel-zone-card-copy strong {
    display: block;
    margin-top: 3px;
    font-size: 15px;
}

.stel-zone-card-copy em {
    display: block;
    margin-top: 2px;
    color: #6b7b73;
    font-size: 10px;
    font-style: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stel-zone-card-score {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #315c45;
    background: #e2ecde;
    font-size: 13px;
    font-weight: 800;
}

.stel-zone-panel {
    width: min(390px, calc(100% - 48px));
}

.stel-zone-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.stel-zone-state {
    border-radius: 999px;
    padding: 6px 9px;
    color: #5d6f66;
    background: #e8eee5;
    font-size: 10px;
    font-weight: 700;
}

.stel-zone-subtitle {
    display: block;
    margin-top: -3px;
    color: #4e675b;
    font-size: 13px;
}

.stel-zone-score-card {
    margin: 15px 0;
    padding: 14px;
    border-radius: 15px;
    background: #edf3e9;
}

.stel-zone-score-card > div:first-child {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stel-zone-metric-label {
    margin-right: auto;
    color: #687a71;
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.stel-zone-score {
    font-size: 28px;
}

.stel-zone-score-card small {
    color: #72837a;
}

.stel-zone-score-track,
.stel-zone-timer-track {
    height: 8px;
    margin-top: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: #d8e3d5;
}

.stel-zone-score-fill,
.stel-zone-timer-track span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #5d8b65, #a4bd83);
    transition: width .55s ease;
}

.stel-zone-practice {
    padding: 15px;
    border: 1px solid rgba(174,142,84,.16);
    border-radius: 15px;
    background:
        radial-gradient(circle at 100% 0%, rgba(235,216,157,.45), transparent 34%),
        linear-gradient(180deg, #faf6e9, #f2ead8);
}

.stel-zone-practice > span {
    color: #766b55;
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.stel-zone-practice strong {
    display: block;
    margin-top: 6px;
    font-size: 18px;
}

.stel-zone-practice p {
    margin: 7px 0 12px;
    color: #6e685b;
    font-size: 12px;
}

.stel-zone-practice-start {
    border: 0;
    border-radius: 999px;
    padding: 10px 14px;
    color: #fff;
    background: #315c45;
    font-weight: 700;
    cursor: pointer;
}

.stel-zone-practice-start.is-active {
    color: #315c45;
    background: #dce9d9;
}

.stel-zone-timer {
    margin-top: 12px;
    padding: 12px;
    border-radius: 14px;
    text-align: center;
    background: rgba(255,255,255,.76);
}

.stel-zone-timer[hidden] {
    display: none;
}

.stel-zone-timer span {
    display: block;
    color: #6f8178;
    font-size: 9px;
    text-transform: uppercase;
}

.stel-zone-timer strong {
    display: block;
    margin-top: 4px;
    font-size: 26px;
}

.stel-zone-action {
    margin-top: 12px;
}

.stel-valley-app.is-practice-running .stel-stage {
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.25),
        0 20px 55px rgba(23,48,38,.12),
        0 0 0 5px rgba(117,155,112,.12);
}

.stel-valley-app.is-practice-running .stel-clouds {
    animation-play-state: paused;
}

@media (max-width: 980px) {
    .stel-zone-journey-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 620px) {
    .stel-zone-journeys {
        padding: 12px;
    }

    .stel-zone-journey-grid {
        grid-template-columns: 1fr;
    }

    .stel-zone-panel {
        max-height: 78vh;
        overflow-y: auto;
    }
}


/* ================================================================
   Somainterra Valley 3.4 — Practice Journal
   ================================================================ */

.stel-zone-journey-card.is-recommended {
    border-color: rgba(177, 143, 77, .38);
    background:
        radial-gradient(circle at 100% 0%, rgba(238,216,151,.45), transparent 38%),
        linear-gradient(180deg, #fffdf6, #f6f6ea);
}

.stel-zone-journey-card.is-recommended::after {
    content: "";
    position: absolute;
    top: 7px;
    right: 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d5a94f;
    box-shadow: 0 0 0 4px rgba(213,169,79,.13);
}

.stel-zone-journey-card {
    position: relative;
}

.stel-practice-journal {
    margin-bottom: 10px;
    padding: 17px;
    border: 1px solid rgba(47,93,69,.13);
    border-radius: 18px;
    background:
        radial-gradient(circle at 96% 8%, rgba(226,236,216,.74), transparent 30%),
        linear-gradient(135deg, #f8faf5, #edf4e9);
}

.stel-journal-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.stel-journal-heading h3 {
    margin: 5px 0 4px;
    font-size: clamp(22px,3vw,30px);
    letter-spacing: -.03em;
}

.stel-journal-heading p {
    margin: 0;
    color: var(--stel-muted);
    font-size: 12px;
}

.stel-journal-totals {
    display: flex;
    gap: 8px;
}

.stel-journal-totals > div {
    min-width: 110px;
    border-radius: 14px;
    padding: 11px 13px;
    text-align: center;
    background: rgba(255,255,255,.82);
}

.stel-journal-totals span {
    display: block;
    color: var(--stel-muted);
    font-size: 9px;
    text-transform: uppercase;
}

.stel-journal-totals strong {
    display: block;
    margin-top: 3px;
    font-size: 24px;
}

.stel-week-rhythm {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 7px;
    margin-top: 14px;
}

.stel-week-rhythm span {
    display: grid;
    place-items: center;
    aspect-ratio: 1.8 / 1;
    border: 1px solid rgba(46,76,61,.09);
    border-radius: 12px;
    color: #7c8b83;
    background: rgba(255,255,255,.7);
}

.stel-week-rhythm span.is-done {
    color: #fff;
    background: #4f7e5b;
    box-shadow: 0 6px 16px rgba(48,92,65,.16);
}

.stel-week-rhythm em {
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
}

.stel-zone-balance {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
    margin-top: 8px;
}

.stel-zone-balance > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 11px;
    padding: 8px 10px;
    background: rgba(255,255,255,.62);
}

.stel-zone-balance span {
    color: #687a71;
    font-size: 10px;
}

.stel-zone-balance strong {
    font-size: 14px;
}

.stel-zone-balance > div.is-updated {
    animation: stelJournalPulse .7s ease;
}

@keyframes stelJournalPulse {
    0% { transform: scale(1); background: rgba(255,255,255,.62); }
    45% { transform: scale(1.025); background: #deebd9; }
    100% { transform: scale(1); background: rgba(255,255,255,.62); }
}

@media (max-width: 760px) {
    .stel-journal-heading {
        flex-direction: column;
    }

    .stel-journal-totals {
        width: 100%;
    }

    .stel-journal-totals > div {
        flex: 1;
        min-width: 0;
    }

    .stel-zone-balance {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* v3.4.1 Stability */
.stel-zone-save-status {
    display: block;
    min-height: 18px;
    margin-top: 8px;
    color: #5f7268;
    font-size: 11px;
    line-height: 1.4;
}

.stel-zone-practice-start:disabled {
    cursor: wait;
    opacity: .62;
}

.stel-page-hidden * {
    animation-play-state: paused !important;
}

@media (max-width: 700px) {
    .stel-art-direction-v32 .stel-scene-texture,
    .stel-art-direction-v32 .stel-sun-rays {
        display: none;
    }

    .stel-art-direction-v32 .stel-parallax-layer {
        transform: none !important;
    }
}


/* v3.5 Admin settings */
.stel-parallax-disabled .stel-parallax-layer {
    transform: none !important;
}

.stel-parallax-disabled .stel-valley-stage {
    cursor: default;
}


/* ================================================================
   Somainterra Living World 4.0 — World Seed Generator
   ================================================================ */

.stel-valley-app {
    --world-tree-width: 1;
    --world-tree-lean: 0deg;
    --world-crown-height: 1;
    --world-forest-density: .8;
    --world-mountain-height: 1;
    --world-lake-width: 1;
    --world-river-shift: 0px;
    --world-sun-shift: 0px;
    --world-flower-bias: 1;
}

.stel-world-welcome {
    margin-top: 7px !important;
    color: #355c48 !important;
    font-weight: 700;
}

.stel-world-signature {
    display: block;
    margin-top: 3px;
    color: #788981;
    font-size: 9px;
    letter-spacing: .14em;
}

/* Persistent world DNA */
.stel-valley-app .stel-tree {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    transform:
        scaleX(var(--world-tree-width))
        rotate(var(--world-tree-lean));
}

.stel-valley-app .stel-canopy-depth {
    transform:
        scaleY(var(--world-crown-height));
    transform-origin: 50% 85%;
}

.stel-valley-app .stel-valley-forest {
    opacity: var(--world-forest-density);
}

.stel-valley-app .stel-mountain-back,
.stel-valley-app .stel-mountain-front {
    transform:
        scaleY(var(--world-mountain-height));
    transform-origin: 50% 100%;
}

.stel-valley-app .stel-valley-lake {
    transform:
        scaleX(var(--world-lake-width));
    transform-origin: 255px 565px;
}

.stel-valley-app .stel-river,
.stel-valley-app .stel-river-shadow,
.stel-valley-app .stel-river-highlight {
    transform: translateX(var(--world-river-shift));
}

.stel-valley-app .stel-sun,
.stel-valley-app .stel-sun-glow,
.stel-valley-app .stel-moon {
    transform: translateX(var(--world-sun-shift));
}

.stel-valley-app .stel-flowers {
    opacity: calc(var(--flower-opacity) * var(--world-flower-bias));
}

/* Tree archetypes */
.stel-world-tree-willow .stel-canopy-depth {
    transform: scaleX(1.08) scaleY(calc(var(--world-crown-height) * .93));
}

.stel-world-tree-willow .stel-branches {
    transform: translateY(9px);
}

.stel-world-tree-oak .stel-trunk {
    transform: scaleX(calc(var(--trunk-scale) * 1.12));
}

.stel-world-tree-oak .stel-canopy-depth {
    transform: scaleX(1.12) scaleY(var(--world-crown-height));
}

.stel-world-tree-linden .stel-canopy-depth {
    transform: scaleX(.94) scaleY(calc(var(--world-crown-height) * 1.08));
}

.stel-world-tree-guardian .stel-canopy-depth {
    filter: drop-shadow(0 14px 14px rgba(24, 56, 39, .15));
}

/* World palettes */
.stel-world-palette-moss {
    --world-accent: #7fa06f;
    --world-deep: #274f38;
    --world-light: #dfead8;
}

.stel-world-palette-dawn {
    --world-accent: #c89a71;
    --world-deep: #4f5f53;
    --world-light: #f0dfc9;
}

.stel-world-palette-amber {
    --world-accent: #b38b4f;
    --world-deep: #4d573c;
    --world-light: #efe3bf;
}

.stel-world-palette-moon {
    --world-accent: #839ba3;
    --world-deep: #304b4b;
    --world-light: #d9e5e5;
}

.stel-world-dna-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.stel-world-dna-strip > div {
    border: 1px solid rgba(45, 78, 61, .09);
    border-radius: 13px;
    padding: 10px 12px;
    background: rgba(255,255,255,.68);
}

.stel-world-dna-strip span {
    display: block;
    color: #73847b;
    font-size: 9px;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.stel-world-dna-strip strong {
    display: block;
    margin-top: 3px;
    color: var(--world-deep);
    font-size: 13px;
}

/* Daily story */
.stel-world-story-card {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: center;
    gap: 15px;
    margin-top: 12px;
    border: 1px solid color-mix(in srgb, var(--world-accent) 30%, transparent);
    border-radius: 19px;
    padding: 16px;
    background:
        radial-gradient(circle at 94% 8%, var(--world-light), transparent 30%),
        rgba(255,255,255,.78);
    box-shadow: 0 12px 30px rgba(24, 54, 41, .07);
}

.stel-world-story-card h3 {
    margin: 4px 0 4px;
    font-size: clamp(21px, 3vw, 29px);
    letter-spacing: -.03em;
}

.stel-world-story-card p {
    margin: 0;
    color: #68786f;
    font-size: 12px;
}

.stel-world-story-save {
    border: 0;
    border-radius: 999px;
    padding: 10px 14px;
    color: #fff;
    background: var(--world-deep);
    font-weight: 700;
    cursor: pointer;
}

.stel-world-story-save.is-saved {
    color: var(--world-deep);
    background: var(--world-light);
}

.stel-world-story-symbol {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background:
        radial-gradient(circle, var(--world-accent) 0 14%, transparent 15%),
        var(--world-light);
}

/* Daily SVG events */
.stel-world-event {
    opacity: 0;
    transition: opacity .8s ease;
}

.stel-world-event.is-active {
    opacity: 1;
}

.stel-event-bird_landed {
    stroke: #334b43;
    stroke-width: 4;
    stroke-linecap: round;
    fill: #5d6b61;
    animation: stelWorldBird 5s ease-in-out infinite;
}

.stel-event-falling_leaf {
    fill: #b99a5d;
}

.stel-event-falling_leaf.is-active path {
    animation: stelWorldLeafFall 7s linear infinite;
    transform-box: fill-box;
    transform-origin: center;
}

.stel-event-water_glint {
    stroke: rgba(244, 255, 249, .76);
    stroke-width: 7;
    stroke-linecap: round;
    filter: drop-shadow(0 0 8px rgba(228,248,241,.8));
    animation: stelWorldGlint 4s ease-in-out infinite;
}

.stel-event-new_bloom {
    stroke: #476b4d;
    stroke-width: 3;
    fill: #e8c2c9;
    animation: stelWorldBloom 2.4s ease-out both;
}

.stel-event-morning_mist {
    fill: rgba(231, 239, 234, .48);
    filter: url(#stelBlur);
    animation: stelWorldMist 9s ease-in-out infinite alternate;
}

.stel-event-deer_crossing {
    fill: #89715b;
    stroke: #685442;
    stroke-width: 3;
    animation: stelWorldDeer 18s linear infinite;
}

.stel-event-firefly_evening {
    fill: #fff0a1;
    filter: drop-shadow(0 0 8px rgba(255,238,135,.9));
}

.stel-event-firefly_evening.is-active circle {
    animation: stelWorldFirefly 2.8s ease-in-out infinite alternate;
}

.stel-event-owl_call {
    fill: #6f6258;
    animation: stelWorldOwl 4s ease-in-out infinite;
}

.stel-event-rain_softened {
    stroke: rgba(218,233,236,.7);
    stroke-width: 3;
    stroke-linecap: round;
    animation: stelWorldRain 1.6s linear infinite;
}

.stel-event-rare_rainbow {
    stroke: rgba(224, 169, 126, .7);
    stroke-width: 16;
    filter: drop-shadow(0 0 8px rgba(236,202,163,.5));
}

@keyframes stelWorldBird {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes stelWorldLeafFall {
    0% { transform: translate(0,-10px) rotate(0deg); opacity: 0; }
    15% { opacity: 1; }
    100% { transform: translate(45px,230px) rotate(270deg); opacity: 0; }
}

@keyframes stelWorldGlint {
    0%, 100% { opacity: .22; }
    50% { opacity: 1; }
}

@keyframes stelWorldBloom {
    from { transform: scale(.35); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes stelWorldMist {
    from { transform: translateX(-18px); opacity: .3; }
    to { transform: translateX(24px); opacity: .62; }
}

@keyframes stelWorldDeer {
    from { transform: translate(-120px,610px); }
    to { transform: translate(1150px,610px); }
}

@keyframes stelWorldFirefly {
    from { opacity: .2; transform: translateY(0); }
    to { opacity: 1; transform: translateY(-9px); }
}

@keyframes stelWorldOwl {
    0%, 100% { transform: translate(475px,330px) rotate(-2deg); }
    50% { transform: translate(475px,328px) rotate(2deg); }
}

@keyframes stelWorldRain {
    from { transform: translateY(-15px); }
    to { transform: translateY(35px); }
}

/* Book DNA and Chronicle */
.stel-book-world-dna,
.stel-book-chronicle {
    margin-top: 20px;
}

.stel-book-world-dna h4,
.stel-book-chronicle h4 {
    margin: 0 0 10px;
    font-size: 18px;
}

.stel-book-dna-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.stel-book-dna-grid span {
    border-radius: 12px;
    padding: 10px;
    background: rgba(255,255,255,.72);
}

.stel-book-dna-grid em {
    display: block;
    color: #788880;
    font-size: 9px;
    font-style: normal;
    text-transform: uppercase;
}

.stel-book-dna-grid strong {
    display: block;
    margin-top: 3px;
    font-size: 13px;
}

.stel-chronicle-list {
    display: grid;
    gap: 8px;
    max-height: 340px;
    overflow-y: auto;
}

.stel-chronicle-list article {
    border-left: 3px solid var(--world-accent);
    border-radius: 0 12px 12px 0;
    padding: 10px 12px;
    background: rgba(255,255,255,.7);
}

.stel-chronicle-list span {
    color: #7b8982;
    font-size: 9px;
}

.stel-chronicle-list strong {
    display: block;
    margin-top: 3px;
    font-size: 14px;
}

.stel-chronicle-list p {
    margin: 3px 0 0;
    color: #69766f;
    font-size: 11px;
}

@media (max-width: 760px) {
    .stel-world-story-card {
        grid-template-columns: 46px 1fr;
    }

    .stel-world-story-save {
        grid-column: 1 / -1;
        width: 100%;
    }

    .stel-world-dna-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stel-book-dna-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .stel-world-event {
        animation: none !important;
    }

    .stel-world-event * {
        animation: none !important;
    }
}


/* ================================================================
   Somainterra Living World 4.1 — Scene Journeys
   ================================================================ */

.stel-scene-navigator {
    margin-bottom: 12px;
    padding: 14px;
    border: 1px solid var(--stel-border);
    border-radius: 18px;
    background: rgba(255,255,255,.72);
}

.stel-scene-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 10px;
}

.stel-scene-nav-header h3 {
    margin: 4px 0 0;
    font-size: clamp(20px, 2.8vw, 29px);
    letter-spacing: -.03em;
}

.stel-scene-overview {
    border: 0;
    border-radius: 999px;
    padding: 9px 13px;
    color: #315c45;
    background: #e4ede0;
    font-weight: 700;
    cursor: pointer;
}

.stel-scene-overview.is-active {
    color: #fff;
    background: #315c45;
}

.stel-scene-nav-track {
    display: grid;
    grid-template-columns: repeat(7, minmax(115px, 1fr));
    gap: 7px;
    overflow-x: auto;
}

.stel-scene-nav-card {
    display: grid;
    grid-template-columns: 34px minmax(0,1fr) auto;
    align-items: center;
    gap: 8px;
    min-width: 115px;
    border: 1px solid rgba(45,78,61,.09);
    border-radius: 13px;
    padding: 9px;
    color: #244236;
    text-align: left;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,248,241,.95));
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.stel-scene-nav-card:hover,
.stel-scene-nav-card.is-active {
    transform: translateY(-2px);
    border-color: rgba(47,93,69,.32);
    box-shadow: 0 8px 18px rgba(24,54,41,.08);
}

.stel-scene-nav-card small {
    display: block;
    color: #78887f;
    font-size: 8px;
    text-transform: uppercase;
}

.stel-scene-nav-card strong {
    display: block;
    margin-top: 2px;
    font-size: 12px;
}

.stel-scene-nav-card em {
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    border-radius: 50%;
    color: #315c45;
    background: #e2ecde;
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
}

.stel-scene-nav-icon {
    display: block;
    width: 34px;
    height: 34px;
    border-radius: 50%;
}

.stel-scene-icon-tree {
    background:
        radial-gradient(circle at 50% 36%, #6f9661 0 34%, transparent 35%),
        linear-gradient(90deg, transparent 43%, #76513a 44% 56%, transparent 57%),
        #e5ede1;
}

.stel-scene-icon-lake {
    background: linear-gradient(180deg, #dfeadf 0 46%, #74adb0 47% 69%, #dfeadf 70%);
}

.stel-scene-icon-river {
    background: linear-gradient(145deg, #e5ece1 0 38%, #70aeb0 39% 62%, #e5ece1 63%);
}

.stel-scene-icon-mountain {
    background:
        linear-gradient(145deg, transparent 0 39%, #75867b 40% 62%, transparent 63%),
        #e8eee4;
}

.stel-scene-icon-forest {
    background:
        linear-gradient(70deg, transparent 0 36%, #426d49 37% 55%, transparent 56%),
        linear-gradient(110deg, transparent 0 40%, #315d42 41% 60%, transparent 61%),
        #e3ebe0;
}

.stel-scene-icon-sky {
    background: linear-gradient(180deg, #b7d7e0 0 63%, #f2e1b4 64%);
}

.stel-scene-icon-weather {
    background:
        radial-gradient(circle at 68% 30%, #f3d985 0 16%, transparent 17%),
        linear-gradient(150deg, #bed9df 0 45%, #7d8b94 46% 68%, #e7edf0 69%);
}

.stel-scene-hud {
    position: absolute;
    z-index: 24;
    top: 22px;
    left: 22px;
    width: min(290px, calc(100% - 44px));
    max-height: calc(100% - 44px);
    overflow-y: auto;
    padding: 17px;
    border: 1px solid rgba(255,255,255,.36);
    border-radius: 20px;
    color: #183127;
    background: rgba(248,250,245,.90);
    box-shadow: 0 20px 60px rgba(18,38,30,.22);
    backdrop-filter: blur(18px);
    opacity: 0;
    transform: translateX(-12px);
    pointer-events: none;
    transition: opacity .3s ease, transform .3s ease;
}

.stel-scene-hud.is-visible {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.stel-scene-hud-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 31px;
    height: 31px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #315243;
    font-size: 20px;
    cursor: pointer;
}

.stel-scene-hud h3 {
    margin: 6px 0 2px;
    font-size: 25px;
    letter-spacing: -.03em;
}

.stel-scene-hud-subtitle {
    color: #4d675a;
    font-size: 12px;
}

.stel-scene-hud-description {
    margin: 8px 0 12px;
    color: #697b71;
    font-size: 11px;
    line-height: 1.5;
}

.stel-scene-hud-score {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 10px;
    padding: 12px;
    border-radius: 14px;
    background: #edf3e9;
}

.stel-scene-hud-score span {
    margin-right: auto;
    color: #6a7b72;
    font-size: 9px;
    text-transform: uppercase;
}

.stel-scene-hud-score strong {
    font-size: 27px;
}

.stel-scene-hud-score small {
    color: #75857d;
}

.stel-scene-hud-metrics {
    display: grid;
    gap: 6px;
}

.stel-scene-hud-metrics > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;
    padding: 8px 10px;
    background: rgba(255,255,255,.75);
}

.stel-scene-hud-metrics span {
    color: #66786e;
    font-size: 10px;
}

.stel-scene-hud-metrics strong {
    font-size: 13px;
}

.stel-scene-hud-metrics small {
    margin-left: 2px;
    color: #7a8a82;
    font-size: 8px;
}

.stel-scene-hud-practice {
    margin-top: 10px;
    padding: 12px;
    border-radius: 14px;
    background:
        radial-gradient(circle at 100% 0%, rgba(235,216,157,.45), transparent 34%),
        #f8f2df;
}

.stel-scene-hud-practice > span {
    color: #756a54;
    font-size: 9px;
    text-transform: uppercase;
}

.stel-scene-hud-practice p {
    margin: 6px 0 10px;
    color: #6c665a;
    font-size: 11px;
    line-height: 1.45;
}

.stel-scene-practice-start {
    width: 100%;
    border: 0;
    border-radius: 999px;
    padding: 9px 12px;
    color: #fff;
    background: #315c45;
    font-weight: 700;
    cursor: pointer;
}

.stel-scene-practice-timer {
    margin-top: 9px;
    text-align: center;
}

.stel-scene-practice-timer[hidden] {
    display: none;
}

.stel-scene-practice-timer strong {
    display: block;
    font-size: 22px;
}

.stel-scene-practice-timer span {
    display: block;
    height: 7px;
    margin-top: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #d9e4d5;
}

.stel-scene-practice-timer i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #5d8b65, #a4bd83);
}

.stel-scene-practice-status {
    display: block;
    min-height: 16px;
    margin-top: 7px;
    color: #5e7267;
    font-size: 9px;
}

/* Scene camera directions */
.stel-valley-app.is-scene-tree .stel-scene {
    transform: scale(1.34) translate(-1%, 7%);
}

.stel-valley-app.is-scene-lake .stel-scene {
    transform: scale(1.48) translate(22%, -5%);
}

.stel-valley-app.is-scene-river .stel-scene {
    transform: scale(1.38) translate(-15%, -10%);
}

.stel-valley-app.is-scene-mountain .stel-scene {
    transform: scale(1.42) translate(10%, 16%);
}

.stel-valley-app.is-scene-forest .stel-scene {
    transform: scale(1.44) translate(29%, 0%);
}

.stel-valley-app.is-scene-sky .stel-scene {
    transform: scale(1.26) translate(0, 20%);
}

.stel-valley-app.is-scene-weather .stel-scene {
    transform: scale(1.2);
    filter: saturate(.88) contrast(1.03);
}

@media (max-width: 980px) {
    .stel-scene-nav-track {
        grid-template-columns: repeat(7, minmax(135px, 135px));
    }
}

@media (max-width: 700px) {
    .stel-scene-nav-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .stel-scene-hud {
        top: auto;
        right: 10px;
        bottom: 10px;
        left: 10px;
        width: auto;
        max-height: 68%;
    }

    .stel-valley-app.is-scene-tree .stel-scene,
    .stel-valley-app.is-scene-lake .stel-scene,
    .stel-valley-app.is-scene-river .stel-scene,
    .stel-valley-app.is-scene-mountain .stel-scene,
    .stel-valley-app.is-scene-forest .stel-scene,
    .stel-valley-app.is-scene-sky .stel-scene,
    .stel-valley-app.is-scene-weather .stel-scene {
        transform: scale(1.12);
    }
}


/* ================================================================
   Somainterra Living World 4.2 — Ecosystem Memory
   ================================================================ */

.stel-world-event.is-session-ambient {
    opacity: .5;
}

.stel-session-variation-1 .stel-clouds {
    transform: translateX(7px);
}

.stel-session-variation-2 .stel-leaf-highlights {
    filter: brightness(1.08);
}

.stel-session-variation-3 .stel-river-highlight {
    opacity: .9;
}

.stel-memory-modal[hidden] {
    display: none;
}

.stel-memory-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: grid;
    place-items: center;
    padding: 18px;
}

.stel-memory-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(9, 24, 17, .74);
    backdrop-filter: blur(10px);
}

.stel-memory-dialog {
    position: relative;
    z-index: 1;
    width: min(980px, 96vw);
    max-height: 94vh;
    overflow-y: auto;
    padding: 25px;
    border-radius: 27px;
    background:
        radial-gradient(circle at 100% 0%, rgba(230,220,173,.58), transparent 28%),
        #f6f5ec;
    box-shadow: 0 38px 120px rgba(0,0,0,.34);
}

.stel-memory-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    color: #2b4d3d;
    background: #fff;
    font-size: 23px;
    cursor: pointer;
}

.stel-memory-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 16px;
}

.stel-memory-heading h3 {
    margin: 5px 0 5px;
    font-size: clamp(27px,4vw,43px);
    letter-spacing: -.04em;
}

.stel-memory-heading p {
    max-width: 650px;
    margin: 0;
    color: #697870;
}

.stel-memory-summary {
    min-width: 115px;
    border-radius: 15px;
    padding: 12px;
    text-align: center;
    background: rgba(255,255,255,.75);
}

.stel-memory-summary span {
    display: block;
    color: #77867e;
    font-size: 9px;
    text-transform: uppercase;
}

.stel-memory-summary strong {
    display: block;
    margin-top: 3px;
    font-size: 25px;
}

.stel-memory-preview {
    --memory-leaves: .6;
    --memory-clouds: .3;
    --memory-water: .5;
    --memory-glow: .5;
    position: relative;
    height: 350px;
    overflow: hidden;
    border-radius: 22px;
    background: linear-gradient(180deg, #b9d7de 0 55%, #6d8965 56%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}

.stel-memory-preview[data-memory-time="night"] {
    background: linear-gradient(180deg, #14283b 0 55%, #496150 56%);
}

.stel-memory-preview[data-memory-time="sunset"] {
    background: linear-gradient(180deg, #777182 0 38%, #cf8d6c 55%, #687866 56%);
}

.stel-memory-preview-sky,
.stel-memory-preview-mountains,
.stel-memory-preview-ground,
.stel-memory-preview-tree,
.stel-memory-preview-water {
    position: absolute;
}

.stel-memory-preview-sky {
    inset: 0 0 45%;
}

.stel-memory-preview-sun {
    position: absolute;
    top: 34px;
    right: 70px;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: rgba(251,225,138,var(--memory-glow));
    box-shadow: 0 0 35px rgba(251,225,138,.32);
}

.stel-memory-preview-cloud {
    position: absolute;
    top: 70px;
    left: 90px;
    width: 150px;
    height: 45px;
    border-radius: 50px;
    background: rgba(239,243,239,var(--memory-clouds));
}

.stel-memory-preview-mountains {
    inset: 34% 0 28%;
    background: #596c64;
    clip-path: polygon(0 100%,0 72%,15% 24%,30% 77%,49% 8%,66% 76%,83% 27%,100% 72%,100% 100%);
    opacity: .7;
}

.stel-memory-preview-ground {
    inset: 55% 0 0;
    background: linear-gradient(160deg, #66845f, #385f45);
}

.stel-memory-preview-tree {
    left: 50%;
    bottom: 45px;
    width: 28px;
    height: 145px;
    background: #76513a;
    transform: translateX(-50%);
}

.stel-memory-preview-tree span {
    position: absolute;
    left: 50%;
    top: -80px;
    width: 205px;
    height: 145px;
    border-radius: 48% 52% 45% 55%;
    background: rgba(68,119,70,var(--memory-leaves));
    transform: translateX(-50%);
    box-shadow:
        -55px 25px 0 rgba(57,102,61,var(--memory-leaves)),
        55px 25px 0 rgba(75,126,70,var(--memory-leaves));
}

.stel-memory-preview-water {
    right: -35px;
    bottom: -20px;
    width: 430px;
    height: 145px;
    border-radius: 70% 0 0;
    background: rgba(103,170,176,var(--memory-water));
    transform: rotate(-8deg);
}

.stel-memory-preview-copy {
    position: absolute;
    left: 18px;
    bottom: 18px;
    max-width: 310px;
    border-radius: 15px;
    padding: 12px 14px;
    background: rgba(255,255,255,.84);
    backdrop-filter: blur(12px);
}

.stel-memory-preview-copy span {
    color: #75857d;
    font-size: 10px;
}

.stel-memory-preview-copy strong {
    display: block;
    margin-top: 2px;
    font-size: 25px;
}

.stel-memory-preview-copy p {
    margin: 3px 0 0;
    color: #63756b;
    font-size: 11px;
}

.stel-memory-range-wrap {
    margin: 17px 0 12px;
}

.stel-memory-range {
    width: 100%;
    accent-color: #426f53;
}

.stel-memory-range-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    color: #78867f;
    font-size: 9px;
}

.stel-memory-details {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px;
}

.stel-memory-details > div {
    border-radius: 13px;
    padding: 10px 12px;
    background: rgba(255,255,255,.7);
}

.stel-memory-details span {
    display: block;
    color: #77867e;
    font-size: 9px;
    text-transform: uppercase;
}

.stel-memory-details strong {
    display: block;
    margin-top: 3px;
    font-size: 14px;
}

.stel-memory-note-box {
    margin-top: 12px;
    border-radius: 15px;
    padding: 13px;
    background: rgba(255,255,255,.66);
}

.stel-memory-note-box label {
    display: block;
    margin-bottom: 6px;
    color: #536a5e;
    font-size: 11px;
    font-weight: 700;
}

.stel-memory-note {
    width: 100%;
    resize: vertical;
    border: 1px solid rgba(48,80,63,.13);
    border-radius: 11px;
    padding: 10px;
    color: #243d32;
    background: rgba(255,255,255,.78);
    box-sizing: border-box;
}

.stel-memory-note-box > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
}

.stel-memory-note-status {
    color: #60736a;
}

.stel-memory-note-save {
    border: 0;
    border-radius: 999px;
    padding: 9px 13px;
    color: #fff;
    background: #315c45;
    font-weight: 700;
    cursor: pointer;
}

@media (max-width: 700px) {
    .stel-memory-dialog {
        padding: 18px 13px;
    }

    .stel-memory-heading {
        flex-direction: column;
    }

    .stel-memory-preview {
        height: 285px;
    }

    .stel-memory-details {
        grid-template-columns: 1fr;
    }
}


/* ================================================================
   Somainterra Living World 4.3 — Premium Dashboard
   ================================================================ */

.stel-premium-dashboard {
    max-width: 1440px;
}

.stel-premium-dashboard .stel-shell {
    padding: 0;
    border: 0;
    border-radius: 32px;
    background: #f5f1e8;
    box-shadow: 0 34px 110px rgba(38, 55, 46, .13);
    overflow: hidden;
}

.stel-app-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    min-height: 1000px;
}

.stel-app-sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    min-height: 100vh;
    padding: 25px 18px;
    border-right: 1px solid rgba(42, 70, 55, .08);
    background:
        radial-gradient(circle at 50% 0%, rgba(225,234,216,.8), transparent 28%),
        #f7f4ec;
}

.stel-sidebar-brand {
    display: grid;
    grid-template-columns: 42px 1fr;
    column-gap: 10px;
    align-items: center;
    margin-bottom: 28px;
}

.stel-sidebar-mark {
    grid-row: 1 / 3;
    width: 42px;
    height: 42px;
    border: 1.5px solid #315c45;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 32%, #315c45 0 4px, transparent 5px),
        linear-gradient(145deg, transparent 45%, #315c45 46% 49%, transparent 50%);
}

.stel-sidebar-brand strong {
    font-size: 17px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.stel-sidebar-brand small {
    color: #718078;
    font-size: 9px;
    line-height: 1.35;
}

.stel-sidebar-nav {
    display: grid;
    gap: 7px;
}

.stel-sidebar-nav button {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    border: 0;
    border-radius: 14px;
    padding: 11px 12px;
    color: #355246;
    text-align: left;
    background: transparent;
    cursor: pointer;
}

.stel-sidebar-nav button:hover,
.stel-sidebar-nav button.is-active {
    color: #214534;
    background: rgba(225,235,218,.86);
    box-shadow: inset 0 0 0 1px rgba(49,92,69,.09);
}

.stel-sidebar-nav span {
    font-size: 13px;
    font-weight: 800;
}

.stel-sidebar-nav small {
    color: #7b8882;
    font-size: 9px;
}

.stel-app-main {
    min-width: 0;
    padding: 22px;
}

.stel-premium-dashboard .stel-premium-hero {
    margin-bottom: 12px;
}

.stel-premium-dashboard .stel-topbar {
    padding: 0 2px;
}

.stel-premium-dashboard .stel-heading h2 {
    font-size: clamp(34px, 4vw, 52px);
}

.stel-premium-dashboard .stel-insight-strip {
    margin: 12px 0;
}

.stel-premium-scene-card {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    background: #173628;
    box-shadow: 0 24px 70px rgba(28, 51, 40, .18);
}

.stel-premium-scene-card > .stel-scene-navigator {
    display: none;
}

.stel-premium-scene-card .stel-valley-toolbar {
    display: none;
}

.stel-premium-scene-card .stel-stage {
    min-height: 610px;
    border-radius: 0;
    box-shadow: none;
}

.stel-premium-scene-card .stel-scene {
    min-height: 610px;
    filter: saturate(1.08) contrast(1.03);
}

.stel-premium-scene-card .stel-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(14, 40, 27, .75) 0%, rgba(14,40,27,.18) 42%, transparent 65%),
        linear-gradient(180deg, transparent 55%, rgba(18,39,29,.18));
}

.stel-premium-hero-copy {
    position: absolute;
    z-index: 18;
    top: 70px;
    left: 52px;
    width: min(430px, 52%);
    color: #fff;
}

.stel-premium-hero-copy .stel-brand {
    color: rgba(255,255,255,.74);
}

.stel-premium-hero-copy h2 {
    margin: 9px 0 9px;
    color: #fff;
    font-size: clamp(42px, 5vw, 72px);
    line-height: .98;
    letter-spacing: -.055em;
}

.stel-premium-hero-copy p {
    max-width: 390px;
    margin: 0;
    color: rgba(255,255,255,.86);
    font-size: 15px;
    line-height: 1.5;
}

.stel-premium-hero-events {
    display: grid;
    gap: 7px;
    margin: 22px 0;
}

.stel-premium-hero-events span {
    position: relative;
    padding-left: 22px;
    color: rgba(255,255,255,.9);
    font-size: 12px;
}

.stel-premium-hero-events span::before {
    content: "✦";
    position: absolute;
    left: 0;
    color: #e8d27e;
}

.stel-premium-enter {
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 999px;
    padding: 12px 18px;
    color: #fff;
    background: rgba(18,48,31,.38);
    backdrop-filter: blur(12px);
    font-weight: 800;
    cursor: pointer;
}

.stel-premium-dna {
    position: absolute;
    z-index: 18;
    top: 22px;
    right: 22px;
    min-width: 140px;
    border-radius: 17px;
    padding: 12px 14px;
    color: #254435;
    background: rgba(255,255,255,.80);
    backdrop-filter: blur(14px);
}

.stel-premium-dna span {
    display: block;
    color: #718078;
    font-size: 9px;
    text-transform: uppercase;
}

.stel-premium-dna strong {
    display: block;
    margin-top: 4px;
    font-size: 18px;
    letter-spacing: .08em;
}

.stel-premium-scene-circles {
    position: relative;
    z-index: 22;
    display: grid;
    grid-template-columns: repeat(7, minmax(90px,1fr));
    gap: 12px;
    margin: -58px 24px 24px;
    padding: 18px;
    border-radius: 22px;
    background: rgba(250,248,242,.94);
    box-shadow: 0 20px 55px rgba(30,48,39,.14);
    backdrop-filter: blur(16px);
}

.stel-premium-scene-circles button {
    display: grid;
    justify-items: center;
    gap: 4px;
    border: 0;
    color: #2a493b;
    background: transparent;
    cursor: pointer;
}

.stel-premium-scene-thumb {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.45),
        0 8px 18px rgba(32,54,42,.12);
}

.stel-premium-scene-circles strong {
    font-size: 11px;
}

.stel-premium-scene-circles small {
    color: #75857d;
    font-size: 8px;
}

.stel-premium-scene-circles em {
    display: grid;
    place-items: center;
    min-width: 27px;
    height: 27px;
    margin-top: 1px;
    border-radius: 50%;
    color: #315c45;
    background: #e4ede0;
    font-size: 9px;
    font-style: normal;
    font-weight: 800;
}

.stel-thumb-tree { background: radial-gradient(circle at 50% 38%,#739964 0 40%,#4f7350 41% 62%,#e3eadf 63%); }
.stel-thumb-lake { background: linear-gradient(180deg,#cfe0df 0 48%,#6da3a7 49% 72%,#dfe9df 73%); }
.stel-thumb-river { background: linear-gradient(145deg,#dfe7dc 0 37%,#78aeb0 38% 61%,#e4ebe1 62%); }
.stel-thumb-mountain { background: linear-gradient(145deg,#e7ece6 0 36%,#687e73 37% 63%,#dce4dd 64%); }
.stel-thumb-forest { background: radial-gradient(circle at 50% 70%,#d9c98d 0 12%,transparent 13%),linear-gradient(90deg,#315d42,#537957); }
.stel-thumb-sky { background: linear-gradient(180deg,#b9d8df,#f0deb0); }
.stel-thumb-weather { background: linear-gradient(140deg,#d5dfe0 0 30%,#6d7a84 31% 58%,#d6b36d 59% 100%); }

.stel-premium-dashboard .stel-world-story-card,
.stel-premium-dashboard .stel-zone-journeys,
.stel-premium-dashboard .stel-live-summary-row,
.stel-premium-dashboard .stel-bottom-panel,
.stel-premium-dashboard .stel-dashboard-tabs {
    border: 0;
    border-radius: 22px;
    box-shadow: 0 12px 34px rgba(36,54,45,.07);
}

.stel-premium-dashboard .stel-metric,
.stel-premium-dashboard .stel-detail,
.stel-premium-dashboard .stel-insight,
.stel-premium-dashboard .stel-zone-journey-card {
    border: 0;
    box-shadow: inset 0 0 0 1px rgba(47,79,62,.07);
}

@media (max-width: 1100px) {
    .stel-app-layout {
        grid-template-columns: 175px minmax(0,1fr);
    }

    .stel-premium-scene-circles {
        grid-template-columns: repeat(7, minmax(105px,105px));
        overflow-x: auto;
    }
}

@media (max-width: 820px) {
    .stel-app-layout {
        grid-template-columns: 1fr;
    }

    .stel-app-sidebar {
        position: relative;
        min-height: auto;
        padding: 14px;
        border-right: 0;
        border-bottom: 1px solid rgba(42,70,55,.08);
    }

    .stel-sidebar-brand {
        margin-bottom: 12px;
    }

    .stel-sidebar-nav {
        display: flex;
        overflow-x: auto;
    }

    .stel-sidebar-nav button {
        flex: 0 0 125px;
    }

    .stel-app-main {
        padding: 12px;
    }

    .stel-premium-hero-copy {
        top: 58px;
        left: 26px;
        width: 58%;
    }

    .stel-premium-hero-copy h2 {
        font-size: clamp(34px,7vw,52px);
    }
}

@media (max-width: 620px) {
    .stel-premium-scene-card .stel-stage,
    .stel-premium-scene-card .stel-scene {
        min-height: 520px;
    }

    .stel-premium-hero-copy {
        top: 34px;
        right: 20px;
        left: 20px;
        width: auto;
    }

    .stel-premium-hero-copy h2 {
        font-size: 38px;
    }

    .stel-premium-dna {
        top: auto;
        right: 14px;
        bottom: 14px;
    }

    .stel-premium-scene-circles {
        margin: -20px 10px 14px;
        grid-template-columns: repeat(7, 95px);
    }
}


/* ================================================================
   v4.3.1 Premium layout correction
   ================================================================ */

.stel-premium-dashboard .stel-app-main {
    overflow: visible;
}

.stel-premium-dashboard .stel-premium-scene-card {
    margin-top: 10px;
}

.stel-premium-dashboard .stel-premium-scene-circles {
    position: relative;
    z-index: 12;
    margin: 14px 0 18px;
    padding: 16px 18px;
    border: 1px solid rgba(46, 76, 61, .08);
    background: rgba(252, 250, 244, .98);
    box-shadow: 0 14px 38px rgba(30, 48, 39, .09);
}

.stel-premium-dashboard .stel-premium-hero-copy {
    top: 62px;
    left: 42px;
    width: min(390px, 48%);
}

.stel-premium-dashboard .stel-premium-hero-copy h2 {
    max-width: 390px;
    margin: 8px 0 10px;
    font-size: clamp(38px, 4.2vw, 60px);
    line-height: 1.02;
    letter-spacing: -.05em;
}

.stel-premium-dashboard .stel-premium-hero-copy p {
    max-width: 340px;
    font-size: 14px;
}

.stel-premium-dashboard .stel-premium-hero-events {
    max-width: 330px;
    margin: 18px 0;
}

.stel-premium-dashboard .stel-premium-scene-card .stel-scene-hud {
    display: none;
}

.stel-premium-dashboard .stel-premium-scene-card .stel-scene-hud.is-visible {
    display: block;
}

.stel-premium-dashboard .stel-overlay-cards {
    top: 18px;
    right: 18px;
    left: auto;
}

.stel-premium-dashboard .stel-focus-card {
    right: auto;
    bottom: 18px;
    left: 18px;
}

.stel-premium-dashboard .stel-growth-badge {
    right: 18px;
    bottom: 18px;
}

.stel-premium-dashboard .stel-premium-scene-card .stel-stage {
    isolation: isolate;
}

.stel-premium-dashboard .stel-premium-scene-card .stel-scene {
    position: relative;
    z-index: 1;
}

.stel-premium-dashboard .stel-premium-scene-card .stel-premium-hero-copy,
.stel-premium-dashboard .stel-premium-scene-card .stel-premium-dna {
    pointer-events: auto;
}

.stel-premium-dashboard .stel-topbar {
    align-items: flex-start;
}

.stel-premium-dashboard .stel-heading {
    max-width: 660px;
}

.stel-premium-dashboard .stel-heading > p:not(.stel-world-welcome) {
    max-width: 640px;
}

@media (max-width: 820px) {
    .stel-premium-dashboard .stel-premium-hero-copy {
        top: 44px;
        left: 24px;
        width: min(390px, 62%);
    }

    .stel-premium-dashboard .stel-premium-scene-circles {
        margin: 12px 0 16px;
    }
}

@media (max-width: 620px) {
    .stel-premium-dashboard .stel-premium-hero-copy {
        top: 25px;
        right: 18px;
        left: 18px;
        width: auto;
    }

    .stel-premium-dashboard .stel-premium-hero-copy h2 {
        max-width: 320px;
        font-size: 34px;
    }

    .stel-premium-dashboard .stel-premium-hero-events {
        display: none;
    }

    .stel-premium-dashboard .stel-premium-enter {
        padding: 10px 14px;
    }

    .stel-premium-dashboard .stel-premium-scene-circles {
        grid-template-columns: repeat(7, 92px);
        margin: 10px 0 14px;
        padding: 13px;
    }

    .stel-premium-dashboard .stel-premium-dna {
        right: 12px;
        bottom: 12px;
    }
}


/* ================================================================
   Somainterra Living World 4.4 — Responsive Living Canvas
   ================================================================ */

.stel-mobile-appbar,
.stel-mobile-bottom-nav,
.stel-mobile-sidebar-close,
.stel-mobile-sidebar-backdrop {
    display: none;
}

/* More painterly SVG scene */
.stel-premium-dashboard .stel-mountain-back {
    fill: url(#stelMountainRealBack);
    opacity: .74;
}

.stel-premium-dashboard .stel-mountain-front {
    fill: url(#stelMountainRealFront);
    opacity: .88;
}

.stel-premium-dashboard .stel-river {
    fill: url(#stelRiverReal);
    filter: url(#stelWaterShimmer);
}

.stel-premium-dashboard .stel-trunk {
    fill: url(#stelTrunkReal);
    filter: url(#stelSoftDepth);
}

.stel-premium-dashboard .stel-canopy-front {
    fill: url(#stelLeafReal);
}

.stel-premium-dashboard .stel-canopy-back {
    filter: url(#stelSoftDepth);
}

.stel-realistic-sun-rays {
    stroke: rgba(255, 232, 169, .13);
    stroke-width: 90;
    stroke-linecap: round;
    mix-blend-mode: screen;
}

.stel-realistic-water-lines {
    fill: none;
    stroke: rgba(237, 250, 244, .58);
    stroke-width: 4;
    stroke-linecap: round;
}

.stel-realistic-tree-bark {
    fill: none;
    stroke: rgba(242, 196, 135, .22);
    stroke-width: 7;
    stroke-linecap: round;
}

.stel-realistic-rocks {
    fill: #46554d;
    stroke: rgba(231, 237, 226, .18);
    stroke-width: 2;
}

.stel-realistic-grass {
    fill: none;
    stroke: #294f35;
    stroke-width: 5;
    stroke-linecap: round;
}

.stel-premium-dashboard .stel-scene-texture {
    opacity: .82;
}

.stel-premium-dashboard .stel-premium-scene-card .stel-scene {
    filter: saturate(1.12) contrast(1.07) brightness(.98);
}

.stel-premium-dashboard .stel-premium-scene-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 7;
    pointer-events: none;
    border-radius: inherit;
    box-shadow:
        inset 0 0 80px rgba(18, 42, 29, .22),
        inset 0 -90px 120px rgba(21, 46, 32, .12);
}

/* Mobile app shell */
@media (max-width: 820px) {
    body.stel-mobile-menu-lock {
        overflow: hidden;
    }

    .stel-premium-dashboard {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    .stel-premium-dashboard .stel-shell {
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
    }

    .stel-mobile-appbar {
        position: sticky;
        top: 0;
        z-index: 900;
        display: grid;
        grid-template-columns: 42px 1fr 42px;
        align-items: center;
        height: 62px;
        padding: 0 12px;
        border-bottom: 1px solid rgba(42, 70, 55, .08);
        background: rgba(250, 248, 242, .94);
        backdrop-filter: blur(18px);
    }

    .stel-mobile-menu-toggle,
    .stel-mobile-share-button {
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        border: 0;
        border-radius: 12px;
        color: #315c45;
        background: rgba(228, 237, 224, .72);
        cursor: pointer;
    }

    .stel-mobile-menu-toggle {
        gap: 4px;
        align-content: center;
    }

    .stel-mobile-menu-toggle span {
        display: block;
        width: 18px;
        height: 2px;
        border-radius: 999px;
        background: #315c45;
    }

    .stel-mobile-brand {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        color: #2b4e3d;
        text-transform: uppercase;
        letter-spacing: .05em;
    }

    .stel-mobile-brand-mark {
        width: 30px;
        height: 30px;
        border: 1px solid #426d55;
        border-radius: 50%;
        background:
            radial-gradient(circle at 50% 30%, #426d55 0 3px, transparent 4px),
            linear-gradient(145deg, transparent 46%, #426d55 47% 50%, transparent 51%);
    }

    .stel-app-layout {
        display: block;
        min-height: 0;
    }

    .stel-app-sidebar {
        position: fixed;
        z-index: 1002;
        top: 0;
        bottom: 0;
        left: 0;
        display: block;
        width: min(310px, 86vw);
        min-height: 100vh;
        padding: 24px 18px;
        border: 0;
        background: #f8f5ed;
        box-shadow: 24px 0 70px rgba(17, 40, 28, .22);
        transform: translateX(-105%);
        transition: transform .28s ease;
    }

    .is-mobile-menu-open .stel-app-sidebar {
        transform: translateX(0);
    }

    .stel-mobile-sidebar-close {
        position: absolute;
        top: 12px;
        right: 12px;
        display: grid;
        place-items: center;
        width: 38px;
        height: 38px;
        border: 0;
        border-radius: 50%;
        color: #315c45;
        background: #fff;
        font-size: 24px;
        cursor: pointer;
    }

    .stel-mobile-sidebar-backdrop {
        position: fixed;
        z-index: 1001;
        inset: 0;
        display: block;
        background: rgba(10, 27, 18, .48);
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s ease;
    }

    .is-mobile-menu-open .stel-mobile-sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .stel-sidebar-nav {
        display: grid;
        overflow: visible;
    }

    .stel-sidebar-nav button {
        flex: none;
    }

    .stel-app-main {
        padding: 10px 10px 88px;
    }

    .stel-premium-dashboard .stel-topbar {
        display: block;
        padding: 4px 2px 8px;
    }

    .stel-premium-dashboard .stel-heading h2 {
        margin-top: 6px;
        font-size: 29px;
        line-height: 1.05;
    }

    .stel-premium-dashboard .stel-heading > p {
        font-size: 12px;
    }

    .stel-premium-dashboard .stel-actions {
        display: flex;
        gap: 6px;
        margin-top: 10px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .stel-premium-dashboard .stel-actions::-webkit-scrollbar {
        display: none;
    }

    .stel-premium-dashboard .stel-action {
        flex: 0 0 auto;
        padding: 9px 12px;
        font-size: 11px;
    }

    .stel-premium-dashboard .stel-insight-strip {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .stel-premium-dashboard .stel-insight {
        min-height: auto;
        padding: 10px 12px;
    }

    .stel-premium-scene-card {
        border-radius: 22px;
    }

    .stel-premium-scene-card .stel-stage,
    .stel-premium-scene-card .stel-scene {
        min-height: 560px;
        height: 560px;
    }

    .stel-premium-scene-card .stel-scene {
        width: 100%;
        object-fit: cover;
    }

    .stel-premium-dashboard .stel-premium-hero-copy {
        top: auto;
        right: 16px;
        bottom: 24px;
        left: 16px;
        width: auto;
        padding: 16px;
        border-radius: 18px;
        background: linear-gradient(180deg, rgba(17,45,29,.16), rgba(17,45,29,.68));
        backdrop-filter: blur(4px);
    }

    .stel-premium-dashboard .stel-premium-hero-copy h2 {
        max-width: none;
        margin: 5px 0 7px;
        font-size: 32px;
        line-height: 1.02;
    }

    .stel-premium-dashboard .stel-premium-hero-copy p {
        max-width: none;
        font-size: 12px;
    }

    .stel-premium-dashboard .stel-premium-hero-events {
        display: none;
    }

    .stel-premium-dashboard .stel-premium-enter {
        margin-top: 12px;
        padding: 10px 14px;
        font-size: 11px;
    }

    .stel-premium-dashboard .stel-premium-dna {
        top: 14px;
        right: 14px;
        bottom: auto;
        min-width: 112px;
        padding: 9px 10px;
    }

    .stel-premium-dashboard .stel-premium-dna strong {
        font-size: 14px;
    }

    .stel-premium-dashboard .stel-overlay-cards {
        top: 14px;
        right: auto;
        left: 14px;
        gap: 5px;
    }

    .stel-premium-dashboard .stel-overlay-cards > div {
        padding: 8px 10px;
    }

    .stel-premium-dashboard .stel-focus-card,
    .stel-premium-dashboard .stel-growth-badge {
        display: none;
    }

    .stel-premium-scene-circles {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px 8px;
        margin: 12px 0 14px;
        padding: 15px 9px;
        overflow: visible;
    }

    .stel-premium-scene-circles button {
        min-width: 0;
    }

    .stel-premium-scene-thumb {
        width: 58px;
        height: 58px;
    }

    .stel-premium-scene-circles em {
        width: 25px;
        height: 25px;
    }

    .stel-premium-dashboard .stel-world-story-card {
        grid-template-columns: 42px 1fr;
        gap: 10px;
        padding: 14px;
    }

    .stel-premium-dashboard .stel-world-story-card h3 {
        font-size: 19px;
    }

    .stel-premium-dashboard .stel-world-story-save {
        grid-column: 1 / -1;
        width: 100%;
    }

    .stel-premium-dashboard .stel-world-dna-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    .stel-premium-dashboard .stel-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .stel-premium-dashboard .stel-zone-journey-grid {
        grid-template-columns: 1fr 1fr;
    }

    .stel-premium-dashboard .stel-zone-journey-card {
        grid-template-columns: 36px 1fr;
        min-height: 92px;
    }

    .stel-premium-dashboard .stel-zone-card-score {
        position: absolute;
        top: 8px;
        right: 8px;
    }

    .stel-premium-dashboard .stel-zone-journey-card {
        position: relative;
    }

    .stel-premium-dashboard .stel-live-summary-row,
    .stel-premium-dashboard .stel-bottom-panel,
    .stel-premium-dashboard .stel-motivation-card {
        grid-template-columns: 1fr;
    }

    .stel-premium-dashboard .stel-metrics {
        grid-template-columns: 1fr;
    }

    .stel-premium-dashboard .stel-metric {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        min-height: 52px;
    }

    .stel-premium-dashboard .stel-metric strong {
        font-size: 18px;
    }

    .stel-premium-dashboard .stel-rhythm-card {
        grid-template-columns: 1fr;
    }

    .stel-premium-dashboard .stel-week-rhythm {
        grid-template-columns: repeat(7, 1fr);
    }

    .stel-mobile-bottom-nav {
        position: fixed;
        z-index: 850;
        right: 10px;
        bottom: 10px;
        left: 10px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 4px;
        padding: 7px;
        border: 1px solid rgba(255,255,255,.62);
        border-radius: 20px;
        background: rgba(248, 246, 239, .94);
        box-shadow: 0 16px 45px rgba(22, 45, 32, .2);
        backdrop-filter: blur(18px);
    }

    .stel-mobile-bottom-nav button {
        display: grid;
        justify-items: center;
        gap: 2px;
        border: 0;
        border-radius: 14px;
        padding: 7px 4px;
        color: #718078;
        background: transparent;
        cursor: pointer;
    }

    .stel-mobile-bottom-nav button.is-active {
        color: #244b37;
        background: #e2ecde;
    }

    .stel-mobile-nav-icon {
        font-size: 17px;
        line-height: 1;
    }

    .stel-mobile-bottom-nav small {
        font-size: 8px;
        font-weight: 700;
    }

    .stel-scene-hud {
        right: 8px;
        bottom: 8px;
        left: 8px;
        max-height: 74%;
        border-radius: 18px;
    }
}

@media (max-width: 420px) {
    .stel-app-main {
        padding-right: 8px;
        padding-left: 8px;
    }

    .stel-premium-scene-card .stel-stage,
    .stel-premium-scene-card .stel-scene {
        min-height: 520px;
        height: 520px;
    }

    .stel-premium-scene-circles {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px 4px;
    }

    .stel-premium-scene-thumb {
        width: 52px;
        height: 52px;
    }

    .stel-premium-dashboard .stel-zone-journey-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px), (prefers-reduced-motion: reduce) {
    .stel-premium-dashboard .stel-river {
        filter: none;
    }

    .stel-realistic-sun-rays {
        opacity: .55;
    }
}


/* ================================================================
   Somainterra Living World 5.0
   ================================================================ */

.stel-living-world-v5 {
    max-width: 1540px;
}

.stel-living-world-v5 .stel-shell {
    background: #f4f0e6;
}

.stel-living-world-v5 .stel-app-layout {
    grid-template-columns: 235px minmax(0, 1fr);
}

.stel-living-world-v5 .stel-app-sidebar {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    color: #f7f0d6;
    background:
        radial-gradient(circle at 10% 10%, rgba(89,128,83,.28), transparent 28%),
        linear-gradient(180deg, #082f29 0%, #0b3b2d 56%, #0a2f27 100%);
}

.stel-living-world-v5 .stel-sidebar-brand strong,
.stel-living-world-v5 .stel-sidebar-nav span {
    color: #fff5d9;
}

.stel-living-world-v5 .stel-sidebar-brand small,
.stel-living-world-v5 .stel-sidebar-nav small {
    color: rgba(244,239,214,.64);
}

.stel-living-world-v5 .stel-sidebar-mark {
    border-color: #e1bf68;
}

.stel-living-world-v5 .stel-sidebar-nav button {
    color: rgba(255,248,218,.88);
}

.stel-living-world-v5 .stel-sidebar-nav button:hover,
.stel-living-world-v5 .stel-sidebar-nav button.is-active {
    color: #fff8de;
    background: rgba(114,151,88,.25);
    box-shadow: inset 0 0 0 1px rgba(225,191,104,.2);
}

.stel-v5-sidebar-dna {
    margin-top: auto;
    border: 1px solid rgba(225,191,104,.28);
    border-radius: 17px;
    padding: 14px;
    background: rgba(0,0,0,.12);
}

.stel-v5-sidebar-dna span,
.stel-v5-sidebar-dna small {
    display: block;
    color: rgba(255,244,208,.65);
    font-size: 9px;
    text-transform: uppercase;
}

.stel-v5-sidebar-dna strong {
    display: block;
    margin: 6px 0;
    color: #f2d47f;
    font-size: 20px;
    letter-spacing: .08em;
}

.stel-living-world-v5 .stel-app-main {
    padding: 24px;
}

.stel-living-world-v5 .stel-premium-scene-card {
    min-height: 690px;
    border-radius: 30px;
    background: #183e2d;
}

.stel-living-world-v5 .stel-premium-scene-card .stel-stage,
.stel-living-world-v5 .stel-premium-scene-card .stel-scene {
    min-height: 690px;
    height: 690px;
}

.stel-living-world-v5 .stel-premium-scene-card .stel-scene {
    filter: saturate(1.16) contrast(1.09) brightness(.99);
}

.stel-living-world-v5 .stel-premium-scene-card .stel-stage::after {
    background:
        linear-gradient(90deg, rgba(7,41,29,.76) 0%, rgba(7,41,29,.35) 26%, transparent 52%),
        linear-gradient(270deg, rgba(9,40,28,.42) 0%, transparent 25%),
        linear-gradient(180deg, transparent 58%, rgba(9,34,25,.28));
}

.stel-living-world-v5 .stel-premium-hero-copy {
    top: 42px;
    left: 38px;
    width: min(480px, 42%);
}

.stel-living-world-v5 .stel-premium-hero-copy h2 {
    max-width: 440px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(46px, 5.2vw, 78px);
    font-weight: 600;
    line-height: .98;
}

.stel-living-world-v5 .stel-premium-hero-copy p {
    font-size: 15px;
}

.stel-living-world-v5 .stel-premium-dna {
    display: none;
}

.stel-v5-scene-events {
    position: absolute;
    z-index: 18;
    top: 285px;
    left: 38px;
    width: 250px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    padding: 15px;
    color: #fff;
    background: rgba(5,37,25,.58);
    backdrop-filter: blur(15px);
}

.stel-v5-scene-events .stel-brand {
    color: rgba(255,245,218,.75);
}

.stel-v5-scene-events > div {
    display: grid;
    grid-template-columns: 10px 1fr;
    gap: 9px;
    align-items: center;
    margin-top: 11px;
}

.stel-v5-scene-events i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #e6c66d;
    box-shadow: 0 0 12px rgba(230,198,109,.8);
}

.stel-v5-scene-events strong {
    font-size: 11px;
    font-weight: 600;
}

.stel-v5-status-rail {
    position: absolute;
    z-index: 18;
    top: 40px;
    right: 28px;
    display: grid;
    gap: 10px;
    width: 175px;
}

.stel-v5-status-rail > div {
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 17px;
    padding: 13px 14px;
    color: #fff;
    background: rgba(28,54,39,.52);
    backdrop-filter: blur(15px);
}

.stel-v5-status-rail span {
    display: block;
    color: rgba(255,245,218,.65);
    font-size: 8px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.stel-v5-status-rail strong {
    display: block;
    margin-top: 5px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 21px;
}

.stel-v5-status-rail strong small {
    margin-left: 3px;
    font-family: inherit;
    font-size: 10px;
    font-weight: 400;
}

.stel-v5-status-rail em {
    display: block;
    margin-top: 4px;
    color: rgba(255,255,255,.64);
    font-size: 9px;
    font-style: normal;
}

.stel-living-world-v5 .stel-overlay-cards,
.stel-living-world-v5 .stel-focus-card,
.stel-living-world-v5 .stel-growth-badge {
    display: none;
}

.stel-living-world-v5 .stel-premium-scene-circles {
    margin: -68px 26px 18px;
    padding: 20px 22px;
    border-radius: 24px;
    background: rgba(249,246,238,.97);
}

.stel-living-world-v5 .stel-premium-scene-thumb {
    width: 72px;
    height: 72px;
    border: 3px solid rgba(255,255,255,.8);
}

.stel-living-world-v5 .stel-premium-scene-circles strong {
    font-size: 12px;
}

.stel-v5-quick-grid {
    display: grid;
    grid-template-columns: .9fr 1.25fr .9fr;
    gap: 12px;
    margin-bottom: 14px;
}

.stel-v5-quick-grid > article {
    min-height: 190px;
    border-radius: 22px;
    padding: 18px;
    background:
        radial-gradient(circle at 100% 100%, rgba(214,224,198,.55), transparent 35%),
        rgba(255,253,247,.92);
    box-shadow: 0 13px 36px rgba(34,52,43,.07);
}

.stel-v5-quick-grid h3 {
    margin: 7px 0 6px;
    font-size: 22px;
    letter-spacing: -.03em;
}

.stel-v5-quick-grid p {
    color: #69786f;
    font-size: 11px;
    line-height: 1.5;
}

.stel-v5-quick-grid button {
    border: 0;
    border-radius: 999px;
    padding: 9px 13px;
    color: #fff;
    background: #285a40;
    font-weight: 700;
    cursor: pointer;
}

.stel-v5-mini-paths {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
    margin-top: 14px;
}

.stel-v5-mini-paths button {
    display: grid;
    justify-items: center;
    gap: 5px;
    padding: 0;
    color: #29483a;
    background: transparent;
}

.stel-v5-mini-paths .stel-zone-card-icon {
    width: 44px;
    height: 44px;
}

.stel-v5-mini-paths strong {
    font-size: 9px;
}

.stel-v5-mini-paths em {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    color: #315c45;
    background: #e3ecdE;
    font-size: 9px;
    font-style: normal;
}

.stel-living-world-v5 .stel-world-story-card {
    display: none;
}

.stel-v5-evening-card {
    min-height: 230px;
    margin: 12px 0;
    overflow: hidden;
    border-radius: 24px;
    padding: 25px;
    color: #fff;
    background:
        radial-gradient(circle at 80% 12%, rgba(255,238,171,.78) 0 3%, transparent 4%),
        radial-gradient(circle at 82% 13%, rgba(255,238,171,.16) 0 12%, transparent 13%),
        linear-gradient(180deg, #102b3f, #152d33 48%, #17392f);
    box-shadow: 0 16px 42px rgba(20,40,31,.11);
}

.stel-v5-evening-card > div {
    max-width: 430px;
}

.stel-v5-evening-card h3 {
    margin: 8px 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 31px;
}

.stel-v5-evening-card p {
    color: rgba(255,255,255,.72);
}

.stel-v5-evening-card button {
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 999px;
    padding: 11px 15px;
    color: #fff;
    background: rgba(49,101,72,.72);
    cursor: pointer;
}

.stel-living-world-v5 .stel-metric {
    min-height: 82px;
    border-radius: 18px;
}

.stel-living-world-v5 .stel-metric::after {
    content: "";
    grid-column: 1 / -1;
    height: 18px;
    margin-top: 6px;
    border-bottom: 2px solid rgba(60,112,74,.45);
    border-radius: 50%;
    transform: skewX(-20deg);
}

.is-v5-scene-visible .stel-canopy-depth {
    animation-duration: 6.5s;
}

/* Mobile composition */
@media (max-width: 820px) {
    .stel-living-world-v5 .stel-app-sidebar {
        color: #f7f0d6;
        background:
            radial-gradient(circle at 10% 10%, rgba(89,128,83,.28), transparent 28%),
            linear-gradient(180deg, #082f29 0%, #0b3b2d 56%, #0a2f27 100%);
    }

    .stel-living-world-v5 .stel-app-main {
        padding: 8px 8px 92px;
    }

    .stel-living-world-v5 .stel-premium-hero {
        margin: 0;
    }

    .stel-living-world-v5 .stel-topbar {
        padding: 8px 4px;
    }

    .stel-living-world-v5 .stel-heading h2 {
        font-size: 28px;
    }

    .stel-living-world-v5 .stel-insight-strip {
        display: none;
    }

    .stel-living-world-v5 .stel-premium-scene-card {
        min-height: 585px;
        margin-top: 4px;
        border-radius: 23px;
    }

    .stel-living-world-v5 .stel-premium-scene-card .stel-stage,
    .stel-living-world-v5 .stel-premium-scene-card .stel-scene {
        min-height: 585px;
        height: 585px;
    }

    .stel-living-world-v5 .stel-premium-scene-card .stel-scene {
        transform: scale(1.08) translateX(4%);
        transform-origin: center;
    }

    .stel-living-world-v5 .stel-premium-hero-copy {
        top: auto;
        right: 14px;
        bottom: 18px;
        left: 14px;
        width: auto;
        padding: 15px;
        border-radius: 18px;
        background: linear-gradient(180deg, rgba(7,39,26,.08), rgba(7,39,26,.76));
    }

    .stel-living-world-v5 .stel-premium-hero-copy h2 {
        font-family: Georgia, "Times New Roman", serif;
        font-size: 33px;
        line-height: 1;
    }

    .stel-living-world-v5 .stel-premium-hero-copy p {
        font-size: 11px;
    }

    .stel-v5-scene-events {
        top: 16px;
        left: 14px;
        width: 188px;
        padding: 11px;
    }

    .stel-v5-scene-events > div {
        margin-top: 7px;
    }

    .stel-v5-scene-events strong {
        font-size: 9px;
    }

    .stel-v5-status-rail {
        display: none;
    }

    .stel-living-world-v5 .stel-premium-scene-circles {
        grid-template-columns: repeat(3, 1fr);
        margin: 10px 0 12px;
        padding: 14px 8px;
    }

    .stel-living-world-v5 .stel-premium-scene-thumb {
        width: 58px;
        height: 58px;
    }

    .stel-v5-quick-grid {
        grid-template-columns: 1fr;
    }

    .stel-v5-quick-grid > article {
        min-height: auto;
        padding: 15px;
    }

    .stel-v5-mini-paths {
        grid-template-columns: repeat(4, 1fr);
    }

    .stel-living-world-v5 .stel-zone-journeys,
    .stel-living-world-v5 .stel-live-summary-row {
        display: none;
    }

    .stel-living-world-v5 .stel-bottom-panel {
        margin-top: 10px;
    }

    .stel-living-world-v5 .stel-metrics {
        grid-template-columns: 1fr;
    }

    .stel-living-world-v5 .stel-metric {
        min-height: 62px;
    }

    .stel-v5-evening-card {
        min-height: 190px;
        padding: 18px;
    }

    .stel-v5-evening-card h3 {
        font-size: 25px;
    }
}

@media (max-width: 420px) {
    .stel-living-world-v5 .stel-premium-scene-card,
    .stel-living-world-v5 .stel-premium-scene-card .stel-stage,
    .stel-living-world-v5 .stel-premium-scene-card .stel-scene {
        min-height: 550px;
        height: 550px;
    }

    .stel-v5-scene-events {
        width: 165px;
    }

    .stel-v5-mini-paths {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ================================================================
   Somainterra Living World 5.1 — Profile Sync & Mobile Polish
   ================================================================ */

.stel-v51-sync-state {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    color: rgba(255,244,208,.72);
    font-size: 9px;
}

.stel-v51-sync-state i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #86bd79;
    box-shadow: 0 0 10px rgba(134,189,121,.7);
}

.stel-v51-sync-state.is-offline i {
    background: #d8a35d;
    box-shadow: 0 0 10px rgba(216,163,93,.6);
}

.stel-v51-sync-state.is-syncing i {
    background: #8cb8c3;
    animation: stelSyncPulse 1s ease-in-out infinite alternate;
}

.stel-v51-sync-state.is-error i {
    background: #d97967;
}

@keyframes stelSyncPulse {
    from { opacity: .35; transform: scale(.8); }
    to { opacity: 1; transform: scale(1.2); }
}

.stel-profile-archive-modal[hidden] {
    display: none;
}

.stel-profile-archive-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: grid;
    place-items: center;
    padding: 18px;
}

.stel-profile-archive-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6,24,16,.76);
    backdrop-filter: blur(12px);
}

.stel-profile-archive-dialog {
    position: relative;
    z-index: 1;
    width: min(680px, 95vw);
    max-height: 92vh;
    overflow-y: auto;
    border: 1px solid rgba(61,94,74,.11);
    border-radius: 27px;
    padding: 25px;
    color: #234234;
    background:
        radial-gradient(circle at 100% 0%, rgba(232,216,160,.42), transparent 28%),
        #f7f4eb;
    box-shadow: 0 40px 120px rgba(0,0,0,.34);
}

.stel-profile-archive-close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    color: #315c45;
    background: #fff;
    font-size: 24px;
    cursor: pointer;
}

.stel-profile-archive-dialog h3 {
    margin: 7px 0 7px;
    font-size: clamp(27px, 4vw, 39px);
    letter-spacing: -.04em;
}

.stel-profile-archive-dialog > p {
    max-width: 550px;
    margin: 0;
    color: #68786f;
    line-height: 1.55;
}

.stel-profile-archive-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
    margin-top: 20px;
}

.stel-profile-archive-actions button {
    min-height: 120px;
    border: 1px solid rgba(53,88,68,.1);
    border-radius: 18px;
    padding: 17px;
    color: #294a3b;
    text-align: left;
    background: rgba(255,255,255,.75);
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}

.stel-profile-archive-actions button:hover {
    transform: translateY(-2px);
    box-shadow: 0 13px 30px rgba(35,62,47,.09);
}

.stel-profile-archive-actions strong,
.stel-profile-archive-actions span {
    display: block;
}

.stel-profile-archive-actions strong {
    font-size: 17px;
}

.stel-profile-archive-actions span {
    margin-top: 5px;
    color: #73827a;
    font-size: 11px;
    line-height: 1.4;
}

.stel-profile-archive-note {
    display: grid;
    gap: 3px;
    margin-top: 11px;
    border-radius: 15px;
    padding: 12px 14px;
    background: #e9f0e4;
}

.stel-profile-archive-note strong {
    font-size: 12px;
}

.stel-profile-archive-note span {
    color: #64766c;
    font-size: 10px;
}

.stel-profile-archive-status {
    display: block;
    min-height: 18px;
    margin-top: 10px;
    color: #536d5f;
    font-size: 11px;
}

/* Cleaner mobile information hierarchy */
@media (max-width: 820px) {
    .stel-living-world-v5 .stel-topbar .stel-actions {
        scroll-snap-type: x proximity;
    }

    .stel-living-world-v5 .stel-topbar .stel-action {
        scroll-snap-align: start;
    }

    .stel-living-world-v5 .stel-profile-badge,
    .stel-living-world-v5 .stel-trend-pill {
        max-width: 100%;
    }

    .stel-living-world-v5 .stel-v5-quick-grid {
        gap: 9px;
    }

    .stel-living-world-v5 .stel-v5-quick-grid > article {
        border-radius: 19px;
        box-shadow: 0 9px 25px rgba(34,52,43,.06);
    }

    .stel-living-world-v5 .stel-bottom-panel {
        border-radius: 20px;
    }

    .stel-living-world-v5 .stel-metric {
        grid-template-columns: 1fr auto;
        padding: 12px 13px;
    }

    .stel-living-world-v5 .stel-metric::after {
        height: 10px;
        margin-top: 2px;
    }

    .stel-profile-archive-actions {
        grid-template-columns: 1fr;
    }

    .stel-profile-archive-actions button {
        min-height: 92px;
    }

    .stel-profile-archive-dialog {
        padding: 22px 15px 16px;
        border-radius: 22px;
    }

    .stel-mobile-bottom-nav {
        padding-bottom: max(7px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 420px) {
    .stel-living-world-v5 .stel-premium-hero-copy h2 {
        font-size: 30px;
    }

    .stel-living-world-v5 .stel-premium-scene-card,
    .stel-living-world-v5 .stel-premium-scene-card .stel-stage,
    .stel-living-world-v5 .stel-premium-scene-card .stel-scene {
        min-height: 530px;
        height: 530px;
    }
}


/* ================================================================
   Somainterra Living World 5.2 — Realistic Experience
   ================================================================ */

.stel-living-world-v52 {
    --v52-cream: #f7f2e8;
    --v52-green: #0b4a39;
    --v52-green-deep: #07352a;
    --v52-gold: #d8bc67;
    --v52-card: rgba(255,255,255,.92);
}

.stel-living-world-v52 .stel-shell {
    background:
        radial-gradient(circle at 72% 0%, rgba(255,255,255,.86), transparent 34%),
        var(--v52-cream);
}

.stel-living-world-v52 .stel-app-sidebar {
    background:
        radial-gradient(circle at 5% 5%, rgba(101,145,95,.28), transparent 26%),
        linear-gradient(180deg, #063d31 0%, #0a4d39 58%, #07372e 100%);
}

.stel-living-world-v52 .stel-sidebar-brand {
    margin-bottom: 22px;
}

.stel-living-world-v52 .stel-sidebar-nav button {
    border-radius: 16px;
    padding: 13px 12px;
}

.stel-living-world-v52 .stel-sidebar-nav button.is-active {
    background: rgba(119,156,90,.32);
}

.stel-living-world-v52 .stel-app-main {
    padding: 26px;
}

.stel-v52-user-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.stel-v52-icon-button,
.stel-v52-avatar {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    color: #285040;
    background: rgba(255,255,255,.88);
    box-shadow: 0 7px 20px rgba(26,47,36,.08);
}

.stel-v52-avatar {
    color: #fff;
    background: linear-gradient(145deg, #65866c, #315c45);
    font-weight: 800;
}

.stel-living-world-v52 .stel-premium-scene-card {
    min-height: 680px;
    overflow: hidden;
    background-image:
        linear-gradient(90deg, rgba(4,38,26,.72) 0%, rgba(4,38,26,.25) 34%, transparent 58%),
        var(--stel-realistic-hero);
    background-size: cover;
    background-position: center;
}

.stel-living-world-v52 .stel-premium-scene-card .stel-stage,
.stel-living-world-v52 .stel-premium-scene-card .stel-scene {
    min-height: 680px;
    height: 680px;
}

.stel-living-world-v52 .stel-premium-scene-card .stel-stage {
    background: transparent;
}

.stel-living-world-v52 .stel-premium-scene-card .stel-scene {
    opacity: 0;
    pointer-events: none;
}

.stel-living-world-v52 .stel-premium-scene-card .stel-stage::after {
    background:
        linear-gradient(90deg, rgba(4,38,26,.72) 0%, rgba(4,38,26,.28) 34%, transparent 58%),
        linear-gradient(180deg, transparent 60%, rgba(6,35,24,.24));
}

.stel-living-world-v52 .stel-premium-hero-copy {
    top: 92px;
    left: 40px;
    width: min(470px, 42%);
}

.stel-living-world-v52 .stel-premium-hero-copy h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(52px, 5.7vw, 82px);
    font-weight: 600;
    line-height: .96;
}

.stel-living-world-v52 .stel-premium-hero-copy p {
    max-width: 380px;
    color: rgba(255,255,255,.88);
}

.stel-living-world-v52 .stel-v5-scene-events {
    top: 385px;
    left: 40px;
    background: rgba(7,51,35,.58);
}

.stel-living-world-v52 .stel-v5-status-rail {
    top: 38px;
    right: 24px;
}

.stel-living-world-v52 .stel-v5-status-rail > div {
    background: rgba(5,43,31,.68);
}

.stel-living-world-v52[data-v52-time="night"] .stel-premium-scene-card {
    filter: brightness(.72) saturate(.85) hue-rotate(8deg);
}

.stel-living-world-v52[data-v52-season="autumn"] .stel-premium-scene-card {
    filter: sepia(.1) saturate(1.08);
}

.stel-living-world-v52[data-v52-season="winter"] .stel-premium-scene-card {
    filter: saturate(.72) brightness(1.05);
}

.stel-living-world-v52 .stel-premium-scene-circles {
    margin-top: -74px;
    border: 1px solid rgba(47,76,59,.08);
    background: rgba(255,253,247,.97);
}

.stel-living-world-v52 .stel-premium-scene-thumb {
    border: 4px solid rgba(255,255,255,.92);
    background-size: cover;
}

.stel-living-world-v52 .stel-v5-quick-grid > article,
.stel-living-world-v52 .stel-bottom-panel,
.stel-living-world-v52 .stel-dashboard-tabs,
.stel-living-world-v52 .stel-v5-evening-card,
.stel-living-world-v52 .stel-motivation-card {
    border: 1px solid rgba(53,82,65,.07);
    box-shadow: 0 14px 38px rgba(28,49,38,.07);
}

.stel-v52-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin: 18px 0 10px;
}

.stel-v52-section-heading h3 {
    margin: 5px 0 0;
    font-size: 28px;
    letter-spacing: -.035em;
}

.stel-v52-section-heading button {
    border: 0;
    border-radius: 999px;
    padding: 9px 13px;
    color: #315c45;
    background: #e7eee2;
    font-weight: 700;
    cursor: pointer;
}

.stel-living-world-v52 .stel-metrics {
    grid-template-columns: repeat(8, minmax(0,1fr));
    gap: 1px;
    overflow: hidden;
    border-radius: 20px;
    background: rgba(53,85,65,.08);
}

.stel-living-world-v52 .stel-metric {
    min-width: 0;
    min-height: 122px;
    border-radius: 0;
    padding: 15px 12px;
    background: rgba(255,255,255,.93);
}

.stel-living-world-v52 .stel-metric::after {
    height: 28px;
    border-bottom-width: 2px;
}

.stel-living-world-v52 .stel-v5-evening-card {
    background:
        radial-gradient(circle at 80% 13%, rgba(255,233,159,.88) 0 3%, transparent 4%),
        radial-gradient(circle at 81% 14%, rgba(255,233,159,.16) 0 12%, transparent 13%),
        linear-gradient(180deg, #0e2940, #153845 50%, #103d31);
}

.stel-v52-action-ribbon {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    margin-top: 14px;
    overflow: hidden;
    border: 1px solid rgba(53,82,65,.08);
    border-radius: 22px;
    background: rgba(53,82,65,.08);
    box-shadow: 0 12px 34px rgba(27,49,37,.07);
}

.stel-v52-action-ribbon button {
    display: grid;
    grid-template-columns: 42px 1fr;
    column-gap: 11px;
    align-items: center;
    min-height: 92px;
    border: 0;
    padding: 14px 16px;
    color: #28483a;
    text-align: left;
    background: rgba(255,255,255,.94);
    cursor: pointer;
}

.stel-v52-action-ribbon button > span {
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    color: #315c45;
    background: #edf1df;
    font-size: 20px;
}

.stel-v52-action-ribbon strong {
    font-size: 13px;
}

.stel-v52-action-ribbon small {
    color: #74827a;
    font-size: 9px;
}

@media (max-width: 1100px) {
    .stel-living-world-v52 .stel-metrics {
        grid-template-columns: repeat(4, 1fr);
    }

    .stel-v52-action-ribbon {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 820px) {
    .stel-living-world-v52 .stel-app-main {
        padding: 8px 8px 92px;
    }

    .stel-v52-user-tools {
        display: none;
    }

    .stel-living-world-v52 .stel-premium-scene-card,
    .stel-living-world-v52 .stel-premium-scene-card .stel-stage {
        min-height: 590px;
        height: 590px;
    }

    .stel-living-world-v52 .stel-premium-scene-card {
        background-position: 58% center;
    }

    .stel-living-world-v52 .stel-premium-hero-copy {
        top: auto;
        right: 14px;
        bottom: 18px;
        left: 14px;
        width: auto;
        padding: 16px;
        background: linear-gradient(180deg, rgba(5,38,25,.08), rgba(5,38,25,.76));
    }

    .stel-living-world-v52 .stel-premium-hero-copy h2 {
        font-size: 35px;
    }

    .stel-living-world-v52 .stel-v5-scene-events {
        top: 15px;
        left: 13px;
        width: 190px;
    }

    .stel-living-world-v52 .stel-premium-scene-circles {
        margin-top: 10px;
    }

    .stel-v52-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .stel-living-world-v52 .stel-metrics {
        grid-template-columns: 1fr 1fr;
        gap: 7px;
        background: transparent;
    }

    .stel-living-world-v52 .stel-metric {
        min-height: 86px;
        border-radius: 16px;
    }

    .stel-v52-action-ribbon {
        grid-template-columns: 1fr 1fr;
        gap: 7px;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .stel-v52-action-ribbon button {
        min-height: 92px;
        border-radius: 17px;
        box-shadow: 0 8px 22px rgba(28,49,38,.06);
    }
}

@media (max-width: 420px) {
    .stel-living-world-v52 .stel-premium-scene-card,
    .stel-living-world-v52 .stel-premium-scene-card .stel-stage {
        min-height: 545px;
        height: 545px;
    }

    .stel-living-world-v52 .stel-premium-scene-card {
        background-position: 61% center;
    }

    .stel-living-world-v52 .stel-premium-hero-copy h2 {
        font-size: 31px;
    }

    .stel-v52-action-ribbon {
        grid-template-columns: 1fr;
    }
}


/* ================================================================
   Somainterra Living World 5.3 — Balanced Experience
   ================================================================ */

.stel-living-world-v53 .stel-premium-scene-card {
    min-height: 620px;
    height: 620px;
    background-position: center 44%;
}

.stel-living-world-v53 .stel-premium-scene-card .stel-stage {
    min-height: 620px;
    height: 620px;
}

.stel-living-world-v53 .stel-premium-scene-card .stel-scene {
    opacity: 0 !important;
    pointer-events: none;
}

.stel-living-world-v53 .stel-premium-hero-copy {
    top: 82px;
    left: 36px;
    width: min(430px, 44%);
}

.stel-living-world-v53 .stel-premium-hero-copy h2 {
    max-width: 420px;
    font-family: inherit;
    font-size: clamp(42px, 4.7vw, 68px);
    line-height: .98;
    text-wrap: balance;
}

.stel-living-world-v53 .stel-premium-hero-copy p {
    max-width: 360px;
}

.stel-living-world-v53 .stel-v5-scene-events {
    top: 350px;
    left: 36px;
}

.stel-living-world-v53 .stel-v5-status-rail {
    top: 28px;
    right: 20px;
    width: 160px;
}

.stel-living-world-v53 .stel-v5-status-rail > div {
    padding: 11px 12px;
}

.stel-living-world-v53 .stel-premium-scene-circles {
    grid-template-columns: repeat(7, minmax(82px, 1fr));
    gap: 8px;
    margin: -52px 18px 16px;
    padding: 15px 12px;
}

.stel-living-world-v53 .stel-premium-scene-thumb {
    width: 58px;
    height: 58px;
}

.stel-living-world-v53 .stel-premium-scene-circles strong {
    font-size: 10px;
}

.stel-living-world-v53 .stel-v5-quick-grid {
    gap: 10px;
}

.stel-living-world-v53 .stel-v5-quick-grid > article {
    min-height: 165px;
    padding: 15px;
}

.stel-living-world-v53 .stel-world-dna-strip {
    gap: 7px;
}

.stel-living-world-v53 .stel-zone-journey-grid {
    gap: 8px;
}

.stel-living-world-v53 .stel-zone-journey-card {
    min-height: 96px;
}

.stel-living-world-v53 .stel-v52-section-heading {
    margin-top: 14px;
}

.stel-living-world-v53 .stel-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    background: transparent;
    overflow: visible;
}

.stel-living-world-v53 .stel-metric {
    min-height: 92px;
    border-radius: 16px;
    box-shadow: inset 0 0 0 1px rgba(47,79,62,.07);
}

.stel-living-world-v53 .stel-metric::after {
    height: 14px;
    margin-top: 2px;
}

.stel-living-world-v53 .stel-v52-action-ribbon {
    grid-template-columns: repeat(4, 1fr);
}

.stel-living-world-v53 .stel-v5-evening-card {
    min-height: 210px;
}

@media (max-width: 1100px) {
    .stel-living-world-v53 .stel-premium-scene-circles {
        grid-template-columns: repeat(7, 92px);
        overflow-x: auto;
        justify-content: start;
    }

    .stel-living-world-v53 .stel-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .stel-living-world-v53,
    .stel-living-world-v53 .stel-shell,
    .stel-living-world-v53 .stel-app-layout,
    .stel-living-world-v53 .stel-app-main,
    .stel-living-world-v53 .stel-premium-hero,
    .stel-living-world-v53 .stel-topbar {
        min-height: 0 !important;
        height: auto !important;
        margin-top: 0 !important;
    }

    .stel-living-world-v53 .stel-app-main {
        display: block;
        padding: 8px 8px 92px;
    }

    .stel-living-world-v53 .stel-topbar {
        padding: 8px 2px 6px;
    }

    .stel-living-world-v53 .stel-heading h2 {
        font-size: 28px;
    }

    .stel-living-world-v53 .stel-heading > p {
        font-size: 11px;
        line-height: 1.4;
    }

    .stel-living-world-v53 .stel-actions {
        gap: 5px;
        margin-top: 8px;
    }

    .stel-living-world-v53 .stel-action {
        padding: 8px 10px;
        font-size: 10px;
    }

    .stel-living-world-v53 .stel-premium-scene-card,
    .stel-living-world-v53 .stel-premium-scene-card .stel-stage {
        min-height: 520px !important;
        height: 520px !important;
    }

    .stel-living-world-v53 .stel-premium-scene-card {
        background-position: 61% center;
        border-radius: 20px;
    }

    .stel-living-world-v53 .stel-premium-hero-copy {
        top: auto;
        right: 12px;
        bottom: 14px;
        left: 12px;
        width: auto;
        padding: 14px;
        border-radius: 16px;
        background: linear-gradient(180deg, rgba(5,38,25,.08), rgba(5,38,25,.76));
    }

    .stel-living-world-v53 .stel-premium-hero-copy h2 {
        max-width: none;
        font-size: 30px;
        line-height: 1;
    }

    .stel-living-world-v53 .stel-premium-hero-copy p {
        font-size: 11px;
    }

    .stel-living-world-v53 .stel-v5-scene-events {
        top: 12px;
        left: 12px;
        width: 180px;
        padding: 10px;
    }

    .stel-living-world-v53 .stel-v5-scene-events > div {
        margin-top: 6px;
    }

    .stel-living-world-v53 .stel-v5-scene-events strong {
        font-size: 8px;
    }

    .stel-living-world-v53 .stel-v5-status-rail {
        display: none;
    }

    .stel-living-world-v53 .stel-premium-scene-circles {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px 5px;
        margin: 10px 0 12px;
        padding: 12px 6px;
        overflow: visible;
    }

    .stel-living-world-v53 .stel-premium-scene-thumb {
        width: 52px;
        height: 52px;
    }

    .stel-living-world-v53 .stel-v5-quick-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .stel-living-world-v53 .stel-v5-quick-grid > article {
        min-height: auto;
        padding: 14px;
    }

    .stel-living-world-v53 .stel-world-dna-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    .stel-living-world-v53 .stel-zone-journey-grid {
        grid-template-columns: 1fr;
    }

    .stel-living-world-v53 .stel-metrics {
        grid-template-columns: 1fr 1fr;
        gap: 7px;
    }

    .stel-living-world-v53 .stel-metric {
        min-height: 82px;
    }

    .stel-living-world-v53 .stel-v52-action-ribbon {
        grid-template-columns: 1fr 1fr;
        gap: 7px;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .stel-living-world-v53 .stel-v52-action-ribbon button {
        min-height: 90px;
        border-radius: 16px;
        box-shadow: 0 7px 20px rgba(28,49,38,.06);
    }

    .stel-living-world-v53 .stel-v5-evening-card {
        min-height: 180px;
    }
}

@media (max-width: 420px) {
    .stel-living-world-v53 .stel-premium-scene-card,
    .stel-living-world-v53 .stel-premium-scene-card .stel-stage {
        min-height: 485px !important;
        height: 485px !important;
    }

    .stel-living-world-v53 .stel-premium-scene-card {
        background-position: 64% center;
    }

    .stel-living-world-v53 .stel-premium-hero-copy h2 {
        font-size: 28px;
    }

    .stel-living-world-v53 .stel-v5-scene-events {
        width: 165px;
    }

    .stel-living-world-v53 .stel-premium-scene-circles {
        grid-template-columns: repeat(3, 1fr);
    }

    .stel-living-world-v53 .stel-v52-action-ribbon {
        grid-template-columns: 1fr;
    }
}


/* ================================================================
   Somainterra Living World 5.4 — Focused Experience
   ================================================================ */

.stel-living-world-v54 .stel-premium-scene-card {
    min-height: 660px;
    height: 660px;
    border-radius: 28px;
}

.stel-living-world-v54 .stel-premium-scene-card .stel-stage {
    min-height: 660px;
    height: 660px;
}

.stel-living-world-v54 .stel-premium-hero-copy {
    top: 76px;
    left: 38px;
    width: min(400px, 39%);
}

.stel-living-world-v54 .stel-premium-hero-copy h2 {
    max-width: 370px;
    font-size: clamp(40px, 4.4vw, 62px);
    line-height: 1;
}

.stel-living-world-v54 .stel-premium-hero-copy p {
    max-width: 330px;
}

.stel-living-world-v54 .stel-v5-scene-events {
    top: auto;
    bottom: 32px;
    left: 38px;
    width: 250px;
}

.stel-living-world-v54 .stel-v5-scene-events > div:nth-of-type(n+3) {
    display: none;
}

.stel-living-world-v54 .stel-v5-status-rail {
    top: 24px;
    right: 24px;
    width: 155px;
}

.stel-living-world-v54 .stel-v5-status-rail > div:nth-child(n+3) {
    display: none;
}

.stel-living-world-v54 .stel-premium-scene-circles {
    margin-top: -46px;
}

.stel-v54-summary-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 0 0 14px;
}

.stel-v54-summary-strip > div {
    border: 1px solid rgba(48,78,61,.08);
    border-radius: 15px;
    padding: 11px 13px;
    background: rgba(255,255,255,.9);
}

.stel-v54-summary-strip span {
    display: block;
    color: #75847c;
    font-size: 9px;
    text-transform: uppercase;
}

.stel-v54-summary-strip strong {
    display: block;
    margin-top: 4px;
    color: #29493a;
    font-size: 14px;
}

.stel-v54-summary-strip small {
    margin-left: 2px;
    color: #7d8a83;
    font-size: 9px;
}

.stel-living-world-v54 .stel-v5-quick-grid {
    grid-template-columns: 1fr 1fr 1fr;
}

.stel-living-world-v54 .stel-v5-quick-grid h3 {
    font-size: 19px;
}

.stel-v54-details-toggle-wrap {
    display: flex;
    justify-content: center;
    margin: 14px 0 8px;
}

.stel-v54-details-toggle {
    border: 1px solid rgba(49,91,69,.12);
    border-radius: 999px;
    padding: 10px 15px;
    color: #315c45;
    background: rgba(235,241,229,.88);
    font-weight: 700;
    cursor: pointer;
}

.stel-v54-collapsible {
    display: none;
}

.is-v54-details-open .stel-v54-collapsible {
    display: block;
}

.stel-living-world-v54 .stel-v52-section-heading {
    margin-top: 10px;
}

.stel-living-world-v54 .stel-v52-action-ribbon {
    margin-top: 12px;
}

@media (max-width: 1100px) {
    .stel-v54-summary-strip {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 820px) {
    .stel-living-world-v54 .stel-premium-scene-card,
    .stel-living-world-v54 .stel-premium-scene-card .stel-stage {
        min-height: 510px !important;
        height: 510px !important;
    }

    .stel-living-world-v54 .stel-premium-hero-copy {
        right: 12px;
        bottom: 12px;
        left: 12px;
        width: auto;
        padding: 13px;
    }

    .stel-living-world-v54 .stel-premium-hero-copy h2 {
        font-size: 28px;
    }

    .stel-living-world-v54 .stel-v5-scene-events {
        top: 12px;
        bottom: auto;
        left: 12px;
        width: 165px;
    }

    .stel-living-world-v54 .stel-v5-status-rail {
        display: none;
    }

    .stel-v54-summary-strip {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    .stel-v54-summary-strip > div {
        padding: 10px;
    }

    .stel-living-world-v54 .stel-v5-quick-grid {
        grid-template-columns: 1fr;
    }

    .stel-living-world-v54 .stel-v5-quick-grid > article:nth-child(2) {
        order: -1;
    }

    .stel-living-world-v54 .stel-premium-scene-circles {
        grid-template-columns: repeat(3, 1fr);
    }

    .stel-living-world-v54 .stel-v54-details-toggle-wrap {
        display: flex;
    }
}

@media (min-width: 821px) {
    .stel-v54-details-toggle-wrap {
        display: none;
    }

    .stel-v54-collapsible {
        display: block;
    }
}

@media (max-width: 420px) {
    .stel-living-world-v54 .stel-premium-scene-card,
    .stel-living-world-v54 .stel-premium-scene-card .stel-stage {
        min-height: 470px !important;
        height: 470px !important;
    }

    .stel-v54-summary-strip {
        grid-template-columns: 1fr 1fr;
    }
}


/* ================================================================
   Somainterra Living World 6.0 — Living Valley
   ================================================================ */

.stel-living-valley-v6 .stel-shell {
    position: relative;
}

.stel-v6-intro {
    position: fixed;
    z-index: 1000000;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    background:
        radial-gradient(circle at 72% 22%, rgba(239,210,121,.28), transparent 23%),
        linear-gradient(180deg, #102f2a, #173d31 52%, #0a251f);
    opacity: 1;
    transition: opacity 1s ease, visibility 1s ease;
}

.stel-v6-intro.is-leaving {
    opacity: 0;
    visibility: hidden;
}

.stel-v6-intro-scene {
    position: relative;
    width: min(920px, 92vw);
    height: min(580px, 72vh);
    overflow: hidden;
    border-radius: 34px;
    background:
        linear-gradient(180deg, transparent 55%, rgba(9,35,25,.72)),
        var(--stel-realistic-hero);
    background-size: cover;
    background-position: center;
    box-shadow: 0 55px 150px rgba(0,0,0,.42);
}

.stel-v6-intro-orb {
    position: absolute;
    top: 12%;
    right: 16%;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(244,217,126,.45);
    filter: blur(3px);
    box-shadow: 0 0 80px rgba(244,217,126,.48);
    animation: stelV6Orb 4s ease-in-out infinite alternate;
}

.stel-v6-intro-mist {
    position: absolute;
    right: -10%;
    bottom: 4%;
    left: -10%;
    height: 34%;
    background: radial-gradient(ellipse at center, rgba(235,241,229,.38), transparent 70%);
    filter: blur(18px);
    animation: stelV6Mist 8s ease-in-out infinite alternate;
}

.stel-v6-intro-copy {
    position: absolute;
    right: 8%;
    bottom: 10%;
    left: 8%;
}

.stel-v6-intro-copy h2 {
    margin: 0 0 8px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(42px, 7vw, 82px);
    font-weight: 500;
    letter-spacing: -.05em;
}

.stel-v6-intro-copy p {
    margin: 0;
    color: rgba(255,255,255,.78);
    font-size: 15px;
}

.stel-v6-spirit {
    position: absolute;
    z-index: 22;
    right: 28px;
    bottom: 26px;
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 10px;
    align-items: center;
    width: min(320px, 38%);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 18px;
    padding: 12px 14px;
    color: #fff;
    background: rgba(7,39,27,.56);
    backdrop-filter: blur(15px);
}

.stel-v6-spirit-symbol {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background:
        radial-gradient(circle, #f0d47a 0 10%, transparent 11%),
        radial-gradient(circle, rgba(240,212,122,.26), transparent 62%);
    box-shadow: 0 0 25px rgba(240,212,122,.28);
}

.stel-v6-spirit small,
.stel-v6-spirit strong {
    display: block;
}

.stel-v6-spirit small {
    color: rgba(255,245,216,.62);
    font-size: 8px;
    text-transform: uppercase;
}

.stel-v6-spirit strong {
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.4;
}

.stel-v6-practice-portal {
    position: absolute;
    z-index: 23;
    top: 53%;
    left: 57%;
    display: grid;
    justify-items: center;
    gap: 3px;
    border: 0;
    color: #fff;
    background: transparent;
    cursor: pointer;
    transform: translate(-50%, -50%);
}

.stel-v6-practice-portal > span {
    width: 68px;
    height: 68px;
    border: 2px solid rgba(255,235,157,.74);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,232,142,.42), rgba(255,232,142,.08) 55%, transparent 57%);
    box-shadow: 0 0 42px rgba(255,225,120,.62);
    animation: stelV6Portal 2.7s ease-in-out infinite;
}

.stel-v6-practice-portal strong {
    font-size: 10px;
}

.stel-v6-practice-portal small {
    max-width: 150px;
    color: rgba(255,255,255,.72);
    font-size: 8px;
}

.stel-v6-hud {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 10px 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.stel-v6-hud::-webkit-scrollbar {
    display: none;
}

.stel-v6-hud > div,
.stel-v6-hud > button {
    flex: 0 0 auto;
    border: 1px solid rgba(48,78,61,.08);
    border-radius: 999px;
    padding: 8px 12px;
    color: #315c45;
    background: rgba(255,255,255,.9);
}

.stel-v6-hud span {
    color: #78867f;
    font-size: 8px;
    text-transform: uppercase;
}

.stel-v6-hud strong {
    margin-left: 5px;
    font-size: 11px;
}

.stel-v6-hud button {
    cursor: pointer;
    font-weight: 700;
}

.stel-v6-hud .stel-v6-audio-toggle[aria-pressed="true"] {
    color: #fff;
    background: #315c45;
}

.stel-v6-wildlife {
    pointer-events: none;
}

.stel-v6-bird {
    position: absolute;
    z-index: 12;
    width: 24px;
    height: 8px;
    border-top: 2px solid rgba(35,50,43,.8);
    border-radius: 50%;
    opacity: .75;
}

.stel-v6-bird-a {
    top: 24%;
    left: 58%;
    animation: stelV6BirdA 14s linear infinite;
}

.stel-v6-bird-b {
    top: 31%;
    left: 68%;
    animation: stelV6BirdB 18s linear infinite 3s;
}

.stel-v6-deer {
    position: absolute;
    z-index: 12;
    right: 18%;
    bottom: 18%;
    width: 44px;
    height: 28px;
    border-radius: 50% 45% 48% 52%;
    background: rgba(107,78,55,.78);
    opacity: 0;
    animation: stelV6Deer 20s ease-in-out infinite 5s;
}

.stel-v6-fireflies {
    position: absolute;
    z-index: 12;
    inset: 45% 18% 12% 48%;
    opacity: 0;
    background:
        radial-gradient(circle at 20% 40%, #ffe987 0 2px, transparent 3px),
        radial-gradient(circle at 52% 22%, #ffe987 0 2px, transparent 3px),
        radial-gradient(circle at 78% 62%, #ffe987 0 2px, transparent 3px),
        radial-gradient(circle at 42% 74%, #ffe987 0 2px, transparent 3px);
    filter: drop-shadow(0 0 6px #ffe987);
}

.stel-living-valley-v6[data-v6-daypart="night"] .stel-v6-fireflies,
.stel-living-valley-v6[data-v6-daypart="evening"] .stel-v6-fireflies {
    opacity: 1;
    animation: stelV6Fireflies 3s ease-in-out infinite alternate;
}

.stel-living-valley-v6[data-v6-daypart="night"] .stel-premium-scene-card {
    filter: brightness(.68) saturate(.82);
}

.stel-living-valley-v6[data-v6-daypart="evening"] .stel-premium-scene-card {
    filter: sepia(.12) saturate(1.08) brightness(.88);
}

.is-v6-camera-active .stel-premium-scene-card {
    transform: scale(1.015);
    transition: transform 1s ease;
}

@keyframes stelV6Orb {
    from { transform: scale(.94); opacity: .72; }
    to { transform: scale(1.06); opacity: 1; }
}

@keyframes stelV6Mist {
    from { transform: translateX(-2%); opacity: .42; }
    to { transform: translateX(3%); opacity: .68; }
}

@keyframes stelV6Portal {
    0%,100% { transform: scale(.94); opacity: .66; }
    50% { transform: scale(1.08); opacity: 1; }
}

@keyframes stelV6BirdA {
    from { transform: translateX(-120px) translateY(0); opacity: 0; }
    10%,80% { opacity: .8; }
    to { transform: translateX(460px) translateY(-70px); opacity: 0; }
}

@keyframes stelV6BirdB {
    from { transform: translateX(-90px); opacity: 0; }
    10%,75% { opacity: .7; }
    to { transform: translateX(360px) translateY(40px); opacity: 0; }
}

@keyframes stelV6Deer {
    0%,25%,100% { opacity: 0; transform: translateX(30px); }
    35%,70% { opacity: .75; transform: translateX(0); }
    80% { opacity: 0; transform: translateX(-40px); }
}

@keyframes stelV6Fireflies {
    from { opacity: .35; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(-5px); }
}

@media (max-width: 820px) {
    .stel-v6-intro-scene {
        width: 94vw;
        height: 70vh;
        border-radius: 24px;
    }

    .stel-v6-intro-copy h2 {
        font-size: 44px;
    }

    .stel-v6-spirit {
        right: 12px;
        bottom: 12px;
        width: calc(100% - 24px);
    }

    .stel-v6-practice-portal {
        top: 47%;
        left: 62%;
    }

    .stel-v6-hud {
        padding-bottom: 2px;
    }

    .stel-v6-deer {
        right: 11%;
        bottom: 26%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .stel-v6-intro-orb,
    .stel-v6-intro-mist,
    .stel-v6-practice-portal > span,
    .stel-v6-bird,
    .stel-v6-deer,
    .stel-v6-fireflies {
        animation: none !important;
    }
}


/* ================================================================
   Somainterra Living World 6.1 — Valley Engine
   ================================================================ */

.stel-living-valley-v61 .stel-premium-scene-card {
    --v61-x: 0px;
    --v61-y: 0px;
    min-height: 720px;
    height: 720px;
    background-position: calc(50% + var(--v61-x)) calc(45% + var(--v61-y));
    transition: background-position .25s ease;
}

.stel-living-valley-v61 .stel-premium-scene-card .stel-stage {
    min-height: 720px;
    height: 720px;
}

.stel-living-valley-v61 .stel-premium-hero-copy {
    top: 70px;
    left: 42px;
    width: min(390px, 35%);
}

.stel-living-valley-v61 .stel-premium-hero-copy h2 {
    max-width: 360px;
    font-size: clamp(42px, 4.2vw, 64px);
}

.stel-living-valley-v61 .stel-v6-practice-portal {
    top: auto;
    right: 42px;
    bottom: 120px;
    left: auto;
    transform: none;
}

.stel-living-valley-v61 .stel-v6-practice-portal > span {
    width: 78px;
    height: 78px;
}

.stel-living-valley-v61 .stel-v6-spirit {
    right: 30px;
    bottom: 24px;
    width: 300px;
}

.stel-living-valley-v61 .stel-v5-scene-events {
    top: auto;
    bottom: 24px;
    left: 42px;
    width: 240px;
}

.stel-living-valley-v61 .stel-v5-status-rail {
    top: 26px;
    right: 26px;
    width: 150px;
}

.stel-v61-atmosphere {
    position: absolute;
    z-index: 11;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.stel-v61-light-ray {
    position: absolute;
    top: -10%;
    width: 130px;
    height: 95%;
    background: linear-gradient(180deg, rgba(255,233,158,.28), transparent);
    filter: blur(12px);
    transform: rotate(18deg);
    transform-origin: top;
    mix-blend-mode: screen;
}

.stel-v61-ray-a {
    right: 21%;
    animation: stelV61Ray 9s ease-in-out infinite alternate;
}

.stel-v61-ray-b {
    right: 34%;
    opacity: .45;
    animation: stelV61Ray 12s ease-in-out infinite alternate-reverse;
}

.stel-v61-cloud {
    position: absolute;
    width: 190px;
    height: 54px;
    border-radius: 999px;
    background: radial-gradient(ellipse, rgba(245,246,239,.42), transparent 72%);
    filter: blur(8px);
}

.stel-v61-cloud-a {
    top: 14%;
    left: 8%;
    animation: stelV61Cloud 28s linear infinite;
}

.stel-v61-cloud-b {
    top: 22%;
    left: -15%;
    opacity: .45;
    animation: stelV61Cloud 36s linear infinite 8s;
}

.stel-v61-leaf {
    position: absolute;
    width: 12px;
    height: 7px;
    border-radius: 70% 20% 70% 20%;
    background: #c49b4f;
    opacity: 0;
}

.stel-v61-leaf-a {
    top: 25%;
    left: 53%;
    animation: stelV61Leaf 8s ease-in infinite 2s;
}

.stel-v61-leaf-b {
    top: 31%;
    left: 61%;
    animation: stelV61Leaf 10s ease-in infinite 5s;
}

.stel-v61-leaf-c {
    top: 19%;
    left: 46%;
    animation: stelV61Leaf 12s ease-in infinite 7s;
}

.stel-v61-water-shimmer {
    position: absolute;
    right: 12%;
    bottom: 19%;
    width: 240px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent);
    filter: blur(1px);
    opacity: .45;
}

.stel-v61-water-a {
    animation: stelV61Water 4s ease-in-out infinite;
}

.stel-v61-water-b {
    bottom: 16%;
    right: 21%;
    width: 170px;
    animation: stelV61Water 5.5s ease-in-out infinite reverse;
}

.stel-v61-pollen {
    position: absolute;
    inset: 18% 8% 8% 35%;
    background:
        radial-gradient(circle at 10% 20%, rgba(255,229,143,.75) 0 2px, transparent 3px),
        radial-gradient(circle at 35% 46%, rgba(255,229,143,.7) 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 65% 18%, rgba(255,229,143,.75) 0 2px, transparent 3px),
        radial-gradient(circle at 78% 62%, rgba(255,229,143,.7) 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 48% 80%, rgba(255,229,143,.65) 0 1.5px, transparent 2.5px);
    animation: stelV61Pollen 7s ease-in-out infinite alternate;
}

.stel-v61-primary-action {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: center;
    margin: 0 0 14px;
    border: 1px solid rgba(49,81,63,.08);
    border-radius: 22px;
    padding: 18px 20px;
    background:
        radial-gradient(circle at 100% 0%, rgba(224,233,211,.64), transparent 32%),
        rgba(255,253,247,.95);
    box-shadow: 0 13px 35px rgba(27,49,37,.06);
}

.stel-v61-primary-action h3 {
    margin: 5px 0 5px;
    font-size: 24px;
    letter-spacing: -.035em;
}

.stel-v61-primary-action p {
    margin: 0;
    color: #6b7a72;
    font-size: 11px;
}

.stel-v61-primary-start {
    border: 0;
    border-radius: 999px;
    padding: 12px 17px;
    color: #fff;
    background: #285a40;
    font-weight: 800;
    cursor: pointer;
}

@keyframes stelV61Ray {
    from { transform: rotate(16deg) translateX(-8px); opacity: .35; }
    to { transform: rotate(21deg) translateX(12px); opacity: .8; }
}

@keyframes stelV61Cloud {
    from { transform: translateX(-160px); }
    to { transform: translateX(980px); }
}

@keyframes stelV61Leaf {
    0% { opacity: 0; transform: translate(0,0) rotate(0); }
    12% { opacity: .85; }
    100% { opacity: 0; transform: translate(120px,260px) rotate(420deg); }
}

@keyframes stelV61Water {
    0%,100% { transform: scaleX(.72); opacity: .25; }
    50% { transform: scaleX(1.08); opacity: .75; }
}

@keyframes stelV61Pollen {
    from { transform: translateY(5px); opacity: .35; }
    to { transform: translateY(-8px); opacity: .75; }
}

@media (max-width: 820px) {
    .stel-living-valley-v61 .stel-premium-scene-card,
    .stel-living-valley-v61 .stel-premium-scene-card .stel-stage {
        min-height: 540px !important;
        height: 540px !important;
    }

    .stel-living-valley-v61 .stel-premium-hero-copy {
        right: 12px;
        bottom: 14px;
        left: 12px;
        width: auto;
    }

    .stel-living-valley-v61 .stel-v6-practice-portal {
        right: 14px;
        bottom: 142px;
    }

    .stel-living-valley-v61 .stel-v6-practice-portal > span {
        width: 62px;
        height: 62px;
    }

    .stel-living-valley-v61 .stel-v6-spirit {
        right: 12px;
        bottom: 12px;
        left: 12px;
        width: auto;
    }

    .stel-living-valley-v61 .stel-v5-scene-events {
        top: 12px;
        bottom: auto;
        left: 12px;
        width: 170px;
    }

    .stel-living-valley-v61 .stel-v5-status-rail {
        display: none;
    }

    .stel-v61-primary-action {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 15px;
    }

    .stel-v61-primary-start {
        width: 100%;
    }

    .stel-v61-ray-b,
    .stel-v61-cloud-b,
    .stel-v61-leaf-c {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .stel-v61-light-ray,
    .stel-v61-cloud,
    .stel-v61-leaf,
    .stel-v61-water-shimmer,
    .stel-v61-pollen {
        animation: none !important;
    }
}


/* ================================================================
   Somainterra Living World 6.2 — World First Interface
   ================================================================ */

@media (min-width: 1101px) {
    .stel-living-valley-v62 .stel-app-layout {
        grid-template-columns: 78px minmax(0, 1fr);
        transition: grid-template-columns .3s ease;
    }

    .stel-living-valley-v62.is-v62-sidebar-expanded .stel-app-layout {
        grid-template-columns: 220px minmax(0, 1fr);
    }

    .stel-living-valley-v62 .stel-app-sidebar {
        overflow: hidden;
        padding: 20px 12px;
    }

    .stel-living-valley-v62 .stel-sidebar-brand {
        grid-template-columns: 44px 150px;
        width: 190px;
    }

    .stel-living-valley-v62 .stel-sidebar-brand strong,
    .stel-living-valley-v62 .stel-sidebar-brand small,
    .stel-living-valley-v62 .stel-sidebar-nav span,
    .stel-living-valley-v62 .stel-sidebar-nav small,
    .stel-living-valley-v62 .stel-v5-sidebar-dna {
        opacity: 0;
        transition: opacity .2s ease;
    }

    .stel-living-valley-v62.is-v62-sidebar-expanded .stel-sidebar-brand strong,
    .stel-living-valley-v62.is-v62-sidebar-expanded .stel-sidebar-brand small,
    .stel-living-valley-v62.is-v62-sidebar-expanded .stel-sidebar-nav span,
    .stel-living-valley-v62.is-v62-sidebar-expanded .stel-sidebar-nav small,
    .stel-living-valley-v62.is-v62-sidebar-expanded .stel-v5-sidebar-dna {
        opacity: 1;
    }

    .stel-living-valley-v62 .stel-sidebar-nav button {
        position: relative;
        width: 190px;
        min-height: 48px;
        padding-left: 50px;
    }

    .stel-living-valley-v62 .stel-sidebar-nav button::before {
        content: "";
        position: absolute;
        left: 14px;
        top: 50%;
        width: 18px;
        height: 18px;
        border: 1.5px solid rgba(255,245,218,.8);
        border-radius: 50%;
        transform: translateY(-50%);
    }
}

.stel-living-valley-v62 .stel-premium-scene-card {
    min-height: 760px;
    height: 760px;
}

.stel-living-valley-v62 .stel-premium-scene-card .stel-stage {
    min-height: 760px;
    height: 760px;
}

.stel-living-valley-v62 .stel-premium-hero-copy {
    top: 82px;
    left: 44px;
    width: min(360px, 32%);
    padding: 20px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(5,34,24,.58), rgba(5,34,24,.18));
    backdrop-filter: blur(8px);
}

.stel-living-valley-v62 .stel-premium-hero-copy h2 {
    font-size: clamp(40px, 4vw, 60px);
}

.stel-living-valley-v62 .stel-v5-status-rail,
.stel-living-valley-v62 .stel-v6-hud,
.stel-living-valley-v62 .stel-v54-summary-strip {
    display: none;
}

.stel-v62-world-status {
    position: absolute;
    z-index: 24;
    top: 26px;
    right: 26px;
    width: 190px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 20px;
    color: #fff;
    background: rgba(5,39,27,.62);
    backdrop-filter: blur(16px);
}

.stel-v62-world-status > div {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255,255,255,.1);
}

.stel-v62-world-status > div:last-child {
    border-bottom: 0;
}

.stel-v62-world-status span {
    color: rgba(255,245,218,.66);
    font-size: 8px;
    text-transform: uppercase;
}

.stel-v62-world-status strong {
    font-size: 13px;
}

.stel-v62-world-status small {
    margin-left: 2px;
    color: rgba(255,255,255,.64);
    font-size: 8px;
}

.stel-v62-world-hotspots {
    position: absolute;
    z-index: 23;
    inset: 0;
    pointer-events: none;
}

.stel-v62-hotspot {
    position: absolute;
    display: grid;
    justify-items: center;
    gap: 4px;
    border: 0;
    color: #fff;
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
}

.stel-v62-hotspot > span {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255,255,255,.62);
    border-radius: 50%;
    background: rgba(8,50,34,.44);
    box-shadow: 0 0 0 8px rgba(255,255,255,.06);
    backdrop-filter: blur(8px);
    transition: transform .2s ease, background .2s ease;
}

.stel-v62-hotspot:hover > span {
    transform: scale(1.12);
    background: rgba(224,196,106,.56);
}

.stel-v62-hotspot strong {
    border-radius: 999px;
    padding: 4px 8px;
    background: rgba(5,39,27,.62);
    font-size: 9px;
    backdrop-filter: blur(8px);
}

.stel-v62-hotspot-tree { top: 30%; left: 52%; }
.stel-v62-hotspot-lake { bottom: 24%; left: 19%; }
.stel-v62-hotspot-river { right: 18%; bottom: 23%; }
.stel-v62-hotspot-mountain { top: 28%; right: 24%; }
.stel-v62-hotspot-forest { right: 8%; bottom: 39%; }

.stel-living-valley-v62 .stel-v62-scene-fallback {
    display: none;
}

.stel-living-valley-v62 .stel-v6-practice-portal {
    right: 28px;
    bottom: 150px;
}

.stel-living-valley-v62 .stel-v6-spirit {
    right: 26px;
    bottom: 26px;
}

.is-v62-world-focus .stel-premium-scene-card {
    transform: scale(1.012);
    transition: transform 1s ease;
}

.stel-living-valley-v62 .stel-v61-primary-action {
    margin-top: 14px;
}

@media (max-width: 1100px) {
    .stel-living-valley-v62 .stel-v62-scene-fallback {
        display: grid;
    }

    .stel-v62-world-hotspots {
        display: none;
    }
}

@media (max-width: 820px) {
    .stel-living-valley-v62 .stel-premium-scene-card,
    .stel-living-valley-v62 .stel-premium-scene-card .stel-stage {
        min-height: 560px !important;
        height: 560px !important;
    }

    .stel-living-valley-v62 .stel-premium-hero-copy {
        top: auto;
        right: 12px;
        bottom: 14px;
        left: 12px;
        width: auto;
        padding: 14px;
        background: linear-gradient(180deg, rgba(5,34,24,.08), rgba(5,34,24,.76));
    }

    .stel-v62-world-status {
        top: 12px;
        right: 12px;
        width: 142px;
    }

    .stel-v62-world-status > div {
        padding: 8px 10px;
    }

    .stel-v62-world-status > div:nth-child(3) {
        display: none;
    }

    .stel-living-valley-v62 .stel-v6-practice-portal {
        right: 14px;
        bottom: 148px;
    }

    .stel-living-valley-v62 .stel-v6-spirit {
        right: 12px;
        bottom: 12px;
        left: 12px;
        width: auto;
    }
}

@media (max-width: 420px) {
    .stel-living-valley-v62 .stel-premium-scene-card,
    .stel-living-valley-v62 .stel-premium-scene-card .stel-stage {
        min-height: 510px !important;
        height: 510px !important;
    }

    .stel-v62-world-status {
        width: 125px;
    }
}


/* ================================================================
   Somainterra Living World 7.0 — Immersive World
   ================================================================ */

.stel-immersive-world-v7 {
    --v7-sky-x: 0px;
    --v7-mid-x: 0px;
    --v7-front-x: 0px;
    --v7-y: 0px;
}

.stel-v7-top-controls {
    position: fixed;
    z-index: 900;
    top: 14px;
    right: 18px;
    display: flex;
    gap: 6px;
}

.stel-v7-top-controls button {
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 999px;
    padding: 9px 12px;
    color: #fff;
    background: rgba(7,43,30,.68);
    backdrop-filter: blur(14px);
    cursor: pointer;
}

.is-v7-immersive:not(.is-v7-dashboard-open) .stel-topbar,
.is-v7-immersive:not(.is-v7-dashboard-open) .stel-insight-strip,
.is-v7-immersive:not(.is-v7-dashboard-open) .stel-v54-summary-strip,
.is-v7-immersive:not(.is-v7-dashboard-open) .stel-v5-quick-grid,
.is-v7-immersive:not(.is-v7-dashboard-open) .stel-v61-primary-action,
.is-v7-immersive:not(.is-v7-dashboard-open) .stel-v54-details-toggle-wrap,
.is-v7-immersive:not(.is-v7-dashboard-open) .stel-v54-collapsible,
.is-v7-immersive:not(.is-v7-dashboard-open) .stel-v5-evening-card,
.is-v7-immersive:not(.is-v7-dashboard-open) .stel-motivation-card,
.is-v7-immersive:not(.is-v7-dashboard-open) .stel-v52-action-ribbon {
    display: none !important;
}

.is-v7-immersive:not(.is-v7-dashboard-open) .stel-premium-hero {
    margin: 0;
}

.is-v7-immersive:not(.is-v7-dashboard-open) .stel-premium-scene-card {
    min-height: calc(100vh - 32px);
    height: calc(100vh - 32px);
    border-radius: 28px;
}

.is-v7-immersive:not(.is-v7-dashboard-open) .stel-premium-scene-card .stel-stage {
    min-height: calc(100vh - 32px);
    height: calc(100vh - 32px);
}

.is-v7-immersive:not(.is-v7-dashboard-open) .stel-app-main {
    padding: 16px;
}

.is-v7-immersive .stel-premium-scene-card {
    background-position:
        calc(50% + var(--v7-mid-x))
        calc(45% + var(--v7-y));
    transition: background-position .16s ease, transform 1s ease;
}

.is-v7-journey .stel-premium-scene-card {
    transform: scale(1.018);
}

.stel-v7-world-dock {
    position: absolute;
    z-index: 40;
    right: 50%;
    bottom: 30px;
    display: flex;
    gap: 7px;
    transform: translateX(50%);
}

.stel-v7-world-dock button {
    display: grid;
    justify-items: center;
    gap: 4px;
    border: 0;
    color: #fff;
    background: transparent;
    cursor: pointer;
}

.stel-v7-world-dock span {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,255,255,.68);
    border-radius: 50%;
    background: rgba(5,40,27,.34);
    box-shadow: 0 0 0 6px rgba(255,255,255,.05);
    backdrop-filter: blur(8px);
    transition: transform .2s ease, background .2s ease;
}

.stel-v7-world-dock button:hover span {
    transform: scale(1.14);
    background: rgba(222,190,92,.56);
}

.stel-v7-world-dock strong {
    border-radius: 999px;
    padding: 3px 7px;
    background: rgba(5,40,27,.58);
    font-size: 8px;
    opacity: 0;
    transform: translateY(-3px);
    transition: opacity .2s ease, transform .2s ease;
}

.stel-v7-world-dock button:hover strong,
.stel-v7-world-dock button:focus-visible strong {
    opacity: 1;
    transform: translateY(0);
}

.stel-v7-companion {
    position: absolute;
    z-index: 43;
    top: 27%;
    right: 12%;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 0;
    color: #fff;
    background: transparent;
    cursor: pointer;
}

.stel-v7-owl {
    position: relative;
    width: 40px;
    height: 48px;
    border-radius: 48% 48% 42% 42%;
    background: linear-gradient(145deg, #6f665c, #403a35);
    box-shadow: 0 9px 18px rgba(0,0,0,.22);
}

.stel-v7-owl::before,
.stel-v7-owl::after {
    content: "";
    position: absolute;
    top: 12px;
    width: 8px;
    height: 8px;
    border: 3px solid #d7c58a;
    border-radius: 50%;
    background: #111;
}

.stel-v7-owl::before { left: 6px; }
.stel-v7-owl::after { right: 6px; }

.stel-v7-companion-message {
    display: none;
    width: 220px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 15px;
    padding: 10px 12px;
    text-align: left;
    background: rgba(5,39,27,.68);
    backdrop-filter: blur(14px);
}

.stel-v7-companion[aria-expanded="true"] .stel-v7-companion-message {
    display: block;
}

.stel-v7-companion small,
.stel-v7-companion strong {
    display: block;
}

.stel-v7-companion small {
    color: rgba(255,244,210,.64);
    font-size: 8px;
    text-transform: uppercase;
}

.stel-v7-companion strong {
    margin-top: 3px;
    font-size: 10px;
    line-height: 1.4;
}

.stel-v7-weather-layer {
    position: absolute;
    z-index: 10;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.stel-v7-rain,
.stel-v7-fog,
.stel-v7-starfall,
.stel-v7-ripple,
.stel-v7-butterfly {
    position: absolute;
    opacity: 0;
}

[data-v7-weather="rain"] .stel-v7-rain {
    inset: 0;
    opacity: .45;
    background: repeating-linear-gradient(105deg, transparent 0 14px, rgba(221,236,237,.55) 15px 17px, transparent 18px 28px);
    animation: stelV7Rain 1s linear infinite;
}

[data-v7-weather="mist"] .stel-v7-fog,
[data-v7-weather="cloudy"] .stel-v7-fog {
    right: -10%;
    bottom: 15%;
    left: -10%;
    height: 28%;
    opacity: .55;
    background: radial-gradient(ellipse at center, rgba(233,239,231,.52), transparent 70%);
    filter: blur(18px);
    animation: stelV7Fog 11s ease-in-out infinite alternate;
}

[data-v7-weather="night"] .stel-v7-starfall {
    top: 14%;
    right: 28%;
    width: 2px;
    height: 100px;
    opacity: .75;
    background: linear-gradient(180deg, #fff, transparent);
    transform: rotate(46deg);
    animation: stelV7Star 8s ease-in infinite 2s;
}

[data-v7-event="ripple"] .stel-v7-ripple {
    right: 18%;
    bottom: 24%;
    width: 80px;
    height: 24px;
    border: 2px solid rgba(255,255,255,.66);
    border-radius: 50%;
    opacity: .55;
    animation: stelV7Ripple 4s ease-out infinite;
}

[data-v7-event="ripple"] .stel-v7-ripple-b {
    right: 25%;
    bottom: 19%;
    animation-delay: 1.5s;
}

[data-v7-event="butterfly"] .stel-v7-butterfly {
    top: 42%;
    left: 58%;
    width: 13px;
    height: 9px;
    opacity: .9;
    border-radius: 70% 20% 70% 20%;
    background: #e5c663;
    animation: stelV7Butterfly 9s ease-in-out infinite;
}

@keyframes stelV7Rain {
    from { transform: translateY(-30px); }
    to { transform: translateY(30px); }
}

@keyframes stelV7Fog {
    from { transform: translateX(-2%); }
    to { transform: translateX(3%); }
}

@keyframes stelV7Star {
    0%,72% { opacity: 0; transform: translate(0,0) rotate(46deg); }
    78% { opacity: 1; }
    100% { opacity: 0; transform: translate(-180px,180px) rotate(46deg); }
}

@keyframes stelV7Ripple {
    from { transform: scale(.35); opacity: .7; }
    to { transform: scale(1.5); opacity: 0; }
}

@keyframes stelV7Butterfly {
    0%,100% { transform: translate(0,0) rotate(-10deg); }
    25% { transform: translate(50px,-28px) rotate(15deg); }
    50% { transform: translate(100px,12px) rotate(-8deg); }
    75% { transform: translate(45px,42px) rotate(12deg); }
}

@media (max-width: 820px) {
    .stel-v7-top-controls {
        top: 70px;
        right: 10px;
        max-width: calc(100% - 20px);
        overflow-x: auto;
    }

    .stel-v7-top-controls button {
        flex: 0 0 auto;
        padding: 8px 10px;
        font-size: 9px;
    }

    .is-v7-immersive:not(.is-v7-dashboard-open) .stel-premium-scene-card,
    .is-v7-immersive:not(.is-v7-dashboard-open) .stel-premium-scene-card .stel-stage {
        min-height: calc(100vh - 90px) !important;
        height: calc(100vh - 90px) !important;
    }

    .stel-v7-world-dock {
        right: 12px;
        bottom: 90px;
        left: 12px;
        justify-content: center;
        transform: none;
    }

    .stel-v7-companion {
        top: 25%;
        right: 8%;
    }

    .stel-v7-companion-message {
        position: absolute;
        top: 52px;
        right: 0;
        width: 190px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .stel-v7-rain,
    .stel-v7-fog,
    .stel-v7-starfall,
    .stel-v7-ripple,
    .stel-v7-butterfly {
        animation: none !important;
    }
}


/* ================================================================
   Somainterra Living World 7.1 — Stable Immersive
   Removes duplicate navigation and overlapping UI layers.
   ================================================================ */

.stel-immersive-world-v71.is-v7-immersive:not(.is-v7-dashboard-open) .stel-app-layout {
    display: block;
    min-height: 0;
}

.stel-immersive-world-v71.is-v7-immersive:not(.is-v7-dashboard-open) .stel-app-sidebar,
.stel-immersive-world-v71.is-v7-immersive:not(.is-v7-dashboard-open) .stel-v62-world-hotspots,
.stel-immersive-world-v71.is-v7-immersive:not(.is-v7-dashboard-open) .stel-v62-scene-fallback,
.stel-immersive-world-v71.is-v7-immersive:not(.is-v7-dashboard-open) .stel-focus-card,
.stel-immersive-world-v71.is-v7-immersive:not(.is-v7-dashboard-open) .stel-v5-scene-events,
.stel-immersive-world-v71.is-v7-immersive:not(.is-v7-dashboard-open) .stel-v6-spirit,
.stel-immersive-world-v71.is-v7-immersive:not(.is-v7-dashboard-open) .stel-v5-status-rail,
.stel-immersive-world-v71.is-v7-immersive:not(.is-v7-dashboard-open) .stel-v6-hud {
    display: none !important;
}

.stel-immersive-world-v71.is-v7-immersive:not(.is-v7-dashboard-open) .stel-app-main {
    display: block;
    width: 100%;
    padding: 14px;
}

.stel-immersive-world-v71.is-v7-immersive:not(.is-v7-dashboard-open) .stel-premium-hero-copy {
    top: 34px;
    left: 34px;
    width: min(330px, 33%);
    padding: 16px 18px;
    border-radius: 19px;
    background: linear-gradient(180deg, rgba(5,36,25,.64), rgba(5,36,25,.28));
    backdrop-filter: blur(10px);
}

.stel-immersive-world-v71.is-v7-immersive:not(.is-v7-dashboard-open) .stel-premium-hero-copy h2 {
    max-width: 300px;
    margin: 4px 0 8px;
    font-size: clamp(36px, 4vw, 58px);
    line-height: .98;
}

.stel-immersive-world-v71.is-v7-immersive:not(.is-v7-dashboard-open) .stel-premium-hero-copy p {
    max-width: 290px;
    font-size: 11px;
}

.stel-immersive-world-v71.is-v7-immersive:not(.is-v7-dashboard-open) .stel-premium-hero-events {
    display: none;
}

.stel-immersive-world-v71.is-v7-immersive:not(.is-v7-dashboard-open) .stel-v62-world-status {
    top: 20px;
    right: 20px;
    width: 160px;
}

.stel-immersive-world-v71.is-v7-immersive:not(.is-v7-dashboard-open) .stel-v62-world-status > div {
    padding: 9px 11px;
}

.stel-immersive-world-v71.is-v7-immersive:not(.is-v7-dashboard-open) .stel-v6-practice-portal {
    right: 32px;
    bottom: 92px;
}

.stel-immersive-world-v71 .stel-v7-world-dock {
    right: 50%;
    bottom: 26px;
    gap: 10px;
    transform: translateX(50%);
}

.stel-immersive-world-v71 .stel-v7-world-dock button {
    min-width: 48px;
}

.stel-immersive-world-v71 .stel-v7-world-dock span {
    width: 38px;
    height: 38px;
    border-color: rgba(255,255,255,.72);
    background: rgba(5,40,27,.38);
}

.stel-immersive-world-v71 .stel-v7-world-dock button.is-active span {
    background: rgba(221,188,91,.7);
    box-shadow:
        0 0 0 7px rgba(255,255,255,.07),
        0 0 25px rgba(229,198,105,.44);
}

.stel-immersive-world-v71 .stel-v7-world-dock strong {
    opacity: .82;
    transform: translateY(0);
}

.stel-immersive-world-v71 .stel-v7-companion {
    top: 30%;
    right: 8%;
}

.stel-immersive-world-v71 .stel-v7-top-controls {
    top: 18px;
    right: 18px;
}

.stel-immersive-world-v71 .stel-v7-top-controls button {
    min-height: 38px;
}

.stel-immersive-world-v71.is-v7-dashboard-open .stel-app-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
}

.stel-immersive-world-v71.is-v7-dashboard-open .stel-app-sidebar {
    display: flex;
}

.stel-immersive-world-v71.is-v7-dashboard-open .stel-v7-world-dock,
.stel-immersive-world-v71.is-v7-dashboard-open .stel-v7-companion,
.stel-immersive-world-v71.is-v7-dashboard-open .stel-v7-weather-layer {
    display: none;
}

.stel-immersive-world-v71 .stel-scene-hud {
    z-index: 80;
    right: 24px;
    bottom: 86px;
    left: auto;
    width: min(390px, calc(100% - 48px));
    max-height: calc(100% - 150px);
    overflow-y: auto;
    border-radius: 22px;
    box-shadow: 0 25px 70px rgba(0,0,0,.3);
}

.stel-immersive-world-v71:not(.is-v71-scene-open) .stel-scene-hud {
    pointer-events: none;
}

@media (max-width: 820px) {
    .stel-immersive-world-v71 .stel-v7-top-controls {
        position: absolute;
        top: 10px;
        right: 10px;
        left: 10px;
        justify-content: flex-end;
        max-width: none;
    }

    .stel-immersive-world-v71 .stel-v7-top-controls button:not(.stel-v7-dashboard-toggle) {
        display: none;
    }

    .stel-immersive-world-v71.is-v7-immersive:not(.is-v7-dashboard-open) .stel-app-main {
        padding: 6px;
    }

    .stel-immersive-world-v71.is-v7-immersive:not(.is-v7-dashboard-open) .stel-premium-scene-card,
    .stel-immersive-world-v71.is-v7-immersive:not(.is-v7-dashboard-open) .stel-premium-scene-card .stel-stage {
        min-height: calc(100svh - 78px) !important;
        height: calc(100svh - 78px) !important;
        border-radius: 18px;
    }

    .stel-immersive-world-v71.is-v7-immersive:not(.is-v7-dashboard-open) .stel-premium-hero-copy {
        top: auto;
        right: 10px;
        bottom: 94px;
        left: 10px;
        width: auto;
        padding: 13px;
    }

    .stel-immersive-world-v71.is-v7-immersive:not(.is-v7-dashboard-open) .stel-premium-hero-copy h2 {
        font-size: 28px;
    }

    .stel-immersive-world-v71.is-v7-immersive:not(.is-v7-dashboard-open) .stel-v62-world-status {
        top: 58px;
        right: 10px;
        width: 126px;
    }

    .stel-immersive-world-v71.is-v7-immersive:not(.is-v7-dashboard-open) .stel-v62-world-status > div:nth-child(3) {
        display: none;
    }

    .stel-immersive-world-v71 .stel-v7-world-dock {
        right: 8px;
        bottom: 18px;
        left: 8px;
        gap: 6px;
        justify-content: center;
        transform: none;
    }

    .stel-immersive-world-v71 .stel-v7-world-dock span {
        width: 34px;
        height: 34px;
    }

    .stel-immersive-world-v71 .stel-v7-world-dock strong {
        font-size: 7px;
    }

    .stel-immersive-world-v71 .stel-v6-practice-portal {
        right: 12px;
        bottom: 150px;
    }

    .stel-immersive-world-v71 .stel-v7-companion {
        top: 25%;
        right: 6%;
    }

    .stel-immersive-world-v71 .stel-scene-hud {
        right: 8px;
        bottom: 74px;
        left: 8px;
        width: auto;
        max-height: 60%;
    }

    .stel-immersive-world-v71.is-v7-dashboard-open .stel-app-layout {
        display: block;
    }

    .stel-immersive-world-v71.is-v7-dashboard-open .stel-app-sidebar {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .stel-immersive-world-v71 .stel-premium-scene-card {
        transition: none !important;
    }
}


/* ================================================================
   Somainterra Living World 7.2 — True Living Scene
   The SVG world is the scene. No raster hero background.
   ================================================================ */

.stel-true-scene-v72 .stel-premium-scene-card {
    background: #dbe6d3 !important;
    background-image: none !important;
    filter: none !important;
}

.stel-true-scene-v72 .stel-premium-scene-card .stel-stage {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    background: transparent;
}

.stel-true-scene-v72 .stel-premium-scene-card .stel-scene {
    display: block !important;
    width: 100%;
    height: 100%;
    min-height: 100%;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    filter: saturate(1.05) contrast(1.02);
    transform-origin: center;
    transition: transform .9s ease, filter .7s ease;
}

.stel-true-scene-v72 .stel-premium-scene-card .stel-stage::after {
    z-index: 3;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(7,44,31,.52) 0%, rgba(7,44,31,.12) 36%, transparent 58%),
        linear-gradient(180deg, transparent 68%, rgba(7,36,25,.14));
}

.stel-true-scene-v72 .stel-premium-hero-copy,
.stel-true-scene-v72 .stel-v62-world-status,
.stel-true-scene-v72 .stel-v6-practice-portal,
.stel-true-scene-v72 .stel-v7-world-dock,
.stel-true-scene-v72 .stel-v7-weather-layer,
.stel-true-scene-v72 .stel-v61-atmosphere,
.stel-true-scene-v72 .stel-v6-wildlife {
    z-index: 10;
}

.stel-true-scene-v72 .stel-v7-weather-layer {
    display: none !important;
}

.stel-true-scene-v72 .stel-v61-atmosphere {
    opacity: .55;
}

.stel-true-scene-v72 .stel-v6-wildlife {
    opacity: .65;
}

.stel-true-scene-v72 .stel-v7-companion {
    display: none !important;
}

.stel-true-scene-v72 .stel-premium-hero-copy {
    width: min(315px, 31%);
    background: rgba(8,48,34,.72);
    box-shadow: 0 18px 48px rgba(0,0,0,.18);
}

.stel-true-scene-v72 .stel-premium-hero-copy h2 {
    font-size: clamp(34px, 3.7vw, 54px);
}

.stel-true-scene-v72 .stel-v62-world-status {
    background: rgba(8,48,34,.74);
}

.stel-true-scene-v72 .stel-v6-practice-portal {
    background: rgba(8,48,34,.45);
    border-radius: 18px;
    padding: 10px;
    backdrop-filter: blur(10px);
}

.stel-true-scene-v72 .stel-v7-world-dock {
    z-index: 30;
}

.stel-true-scene-v72 .stel-v7-world-dock button.is-active span {
    background: rgba(222,190,92,.8);
}

.stel-true-scene-v72.is-v72-zone-active .stel-premium-scene-card .stel-scene {
    filter: saturate(1.12) contrast(1.04);
}

.stel-true-scene-v72[data-v72-zone="tree"] .stel-premium-scene-card .stel-scene {
    transform: scale(1.14) translateX(-3%) translateY(1%);
}

.stel-true-scene-v72[data-v72-zone="lake"] .stel-premium-scene-card .stel-scene {
    transform: scale(1.18) translateX(14%) translateY(-7%);
}

.stel-true-scene-v72[data-v72-zone="river"] .stel-premium-scene-card .stel-scene {
    transform: scale(1.18) translateX(-14%) translateY(-6%);
}

.stel-true-scene-v72[data-v72-zone="mountain"] .stel-premium-scene-card .stel-scene {
    transform: scale(1.16) translateX(-10%) translateY(9%);
}

.stel-true-scene-v72[data-v72-zone="forest"] .stel-premium-scene-card .stel-scene {
    transform: scale(1.17) translateX(-15%) translateY(-1%);
}

.stel-true-scene-v72 .stel-scene-hud {
    z-index: 50;
    background: rgba(248,246,238,.97);
    color: #29483a;
    backdrop-filter: blur(18px);
}

@media (max-width: 820px) {
    .stel-true-scene-v72 .stel-premium-scene-card .stel-scene {
        transform: none;
    }

    .stel-true-scene-v72[data-v72-zone] .stel-premium-scene-card .stel-scene {
        transform: scale(1.08);
    }

    .stel-true-scene-v72 .stel-premium-hero-copy {
        width: auto;
    }

    .stel-true-scene-v72 .stel-v61-atmosphere {
        display: none;
    }
}