.streams-story {
    --story-ink: #0d1633;
    --story-muted: #69708f;
    --story-blue: #1677ff;
    --story-blue-deep: #3153d8;
    --story-violet: #6947e8;
    --story-lilac: #eee9ff;
    --story-ice: #f3f8ff;
    --story-paper: #ffffff;
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(circle at 76% 12%, rgba(117, 145, 255, 0.12), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #f8faff 52%, #ffffff 100%);
    color: var(--story-ink);
}

.streams-story *,
.streams-story *::before,
.streams-story *::after {
    box-sizing: border-box;
}

.story-progress {
    position: sticky;
    top: 44px;
    z-index: 12;
    width: 100%;
    padding: 24px clamp(20px, 4vw, 72px) 12px;
    pointer-events: none;
}

.story-progress ol {
    width: min(100%, 760px);
    margin: 0 auto;
    padding: 0;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: clamp(17px, 3vw, 42px);
    list-style: none;
}

.story-progress [data-story-progress] {
    display: inline-block;
    color: #848ba5;
    font-size: clamp(11px, 1.2vw, 14px);
    font-weight: 650;
    letter-spacing: 0.13em;
    line-height: 1;
    transform-origin: center bottom;
    transition: color 260ms ease, transform 260ms cubic-bezier(.22, 1, .36, 1);
}

.story-progress [data-story-progress][aria-current="step"] {
    color: var(--story-blue);
    transform: scale(1.13);
}

.story-runway {
    width: min(100%, 1440px);
    margin: 0 auto;
    padding: 0 clamp(24px, 5vw, 84px) 11vh;
    display: grid;
    grid-template-columns: minmax(280px, 0.74fr) minmax(440px, 1.26fr);
    gap: clamp(42px, 7vw, 120px);
    align-items: start;
}

.story-markers {
    min-width: 0;
}

.story-marker {
    min-height: 88vh;
    display: flex;
    align-items: center;
    scroll-margin-top: 128px;
}

.story-marker-copy {
    max-width: 510px;
    padding: 12vh 0;
}

.story-eyebrow {
    margin: 0 0 20px;
    color: var(--story-violet);
    font-size: 12px;
    font-weight: 750;
    letter-spacing: 0.15em;
    line-height: 1.35;
}

.story-marker h3 {
    margin: 0 0 24px;
    max-width: 11ch;
    color: var(--story-ink);
    font-size: clamp(44px, 5.2vw, 76px);
    font-weight: 620;
    letter-spacing: -0.055em;
    line-height: 0.98;
}

.story-marker-copy > p:not(.story-eyebrow) {
    margin: 0;
    max-width: 39ch;
    color: var(--story-muted);
    font-size: clamp(17px, 1.55vw, 21px);
    line-height: 1.55;
}

.story-marker-copy > p:not(.story-eyebrow) + p {
    margin-top: 4px;
}

.story-static-visual {
    display: none;
}

.story-stage-column {
    min-width: 0;
    height: calc(var(--story-marker-count, 6) * 88vh);
}

.story-stage {
    position: sticky;
    top: clamp(118px, 16vh, 172px);
    min-height: min(660px, calc(100vh - 154px));
    display: grid;
    place-items: center;
    overflow: clip;
}

.story-stage-glow {
    position: absolute;
    inset: 13% 5% 8%;
    border-radius: 48%;
    background:
        radial-gradient(circle at 50% 44%, rgba(111, 86, 232, 0.17), transparent 46%),
        radial-gradient(circle at 68% 68%, rgba(67, 130, 255, 0.11), transparent 42%);
    filter: blur(20px);
}

.story-teaching-deck,
.story-stage-visual {
    position: relative;
    width: 100%;
}

.story-teaching-deck {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.story-stage-visual {
    display: grid;
    place-items: center;
    animation: story-card-arrive 520ms cubic-bezier(.22, 1, .36, 1) both;
}

.story-stage-visual[hidden] {
    display: none !important;
}

@keyframes story-card-arrive {
    from { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.975); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

.story-stream-card {
    position: relative;
    width: min(100%, 520px);
    min-height: 474px;
    padding: clamp(24px, 3.2vw, 38px);
    overflow: hidden;
    border: 1px solid rgba(66, 71, 116, 0.12);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 28px 70px rgba(34, 44, 92, 0.13), 0 4px 16px rgba(34, 44, 92, 0.06);
}

.story-stream-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.story-stream-card-header > span:last-child {
    display: grid;
    gap: 4px;
}

.story-stream-card-header small {
    color: var(--story-violet);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.story-stream-card-header strong {
    color: var(--story-ink);
    font-size: clamp(21px, 2.1vw, 28px);
    letter-spacing: -0.03em;
    line-height: 1.12;
}

.story-stream-icon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: var(--story-violet);
    background: var(--story-lilac);
}

.story-stream-icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.story-stream-icon--heart svg {
    fill: currentColor;
    stroke: none;
}

.story-stream-icon--quest {
    color: #3f63d7;
    background: #e8efff;
}

.story-stream-icon--fundloop {
    color: #6649c6;
    background: #f0ebff;
}

.story-stream-card-description {
    margin: 0 0 22px;
    color: var(--story-muted);
    font-size: 15px;
    line-height: 1.5;
}

.compact-tip-jar-action {
    display: grid;
    gap: 16px;
}

.compact-tip-jar-amounts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.compact-tip-jar-amount {
    min-height: 48px;
    border: 1px solid #dcd8f5;
    border-radius: 14px;
    background: #faf9ff;
    color: #3f3377;
    font: inherit;
    font-size: 15px;
    font-weight: 750;
    cursor: pointer;
    transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.compact-tip-jar-amount:hover,
.compact-tip-jar-amount:focus-visible,
.compact-tip-jar-amount.is-emphasized {
    border-color: #8f79e8;
    background: #f0ecff;
}

.compact-tip-jar-amount:hover {
    transform: translateY(-2px);
}

.compact-tip-jar-amount.is-selected {
    border-color: #6747dc;
    background: #e6dfff;
    color: #2f1d80;
    box-shadow: 0 0 0 3px rgba(103, 71, 220, 0.16);
}

.compact-tip-jar-custom {
    display: grid;
    gap: 7px;
}

.compact-tip-jar-label {
    color: #3f4260;
    font-size: 12px;
    font-weight: 700;
}

.compact-tip-jar-input-wrap {
    position: relative;
}

.compact-tip-jar-currency {
    position: absolute;
    top: 50%;
    left: 15px;
    color: #777b96;
    transform: translateY(-50%);
}

.compact-tip-jar-input {
    width: 100%;
    min-height: 48px;
    padding: 10px 14px 10px 32px;
    border: 1px solid #dcdeea;
    border-radius: 14px;
    background: #ffffff;
    color: var(--story-ink);
    font: inherit;
    font-size: 16px;
}

.compact-tip-jar-input:focus {
    border-color: var(--story-violet);
    outline: 3px solid rgba(105, 71, 232, 0.13);
}

.compact-tip-jar-hint,
.compact-tip-jar-error {
    margin: 0;
    color: #7a8098;
    font-size: 11px;
    line-height: 1.35;
}

.compact-tip-jar-error:not(:empty) {
    color: #a2375b;
}

.compact-tip-jar-cta,
.story-stream-action {
    width: 100%;
    min-height: 50px;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 15px;
    background: linear-gradient(135deg, #7554e9, #5633d5);
    color: #ffffff;
    font: inherit;
    font-size: 15px;
    font-weight: 750;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 12px 26px rgba(86, 51, 213, 0.22);
    cursor: pointer;
}

.compact-tip-jar-action.is-static button,
.compact-tip-jar-action.is-static input {
    cursor: default;
}

.compact-tip-jar-reference {
    color: #898da3;
    font-size: 10px;
    text-align: center;
}

.story-quest-card {
    background:
        radial-gradient(circle at 12% 12%, rgba(171, 150, 255, 0.20), transparent 32%),
        linear-gradient(145deg, #ffffff, #f6f3ff);
}

.story-fundloop-card {
    background:
        radial-gradient(circle at 90% 8%, rgba(112, 130, 244, 0.18), transparent 33%),
        linear-gradient(145deg, #ffffff, #f1f4ff);
}

.story-quest-map {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto;
    align-items: center;
    gap: 9px;
    margin: 34px 0 26px;
}

.story-quest-map span {
    width: 34px;
    height: 34px;
    border: 2px solid #cbd7f9;
    border-radius: 50%;
    background: #ffffff;
}

.story-quest-map span.is-complete {
    border-color: #4969db;
    background: #4969db;
    box-shadow: inset 0 0 0 8px #eaf0ff;
}

.story-quest-map span.is-active {
    border-color: #6947e8;
    box-shadow: inset 0 0 0 8px #6947e8;
}

.story-quest-map i {
    height: 4px;
    border-radius: 4px;
    background: #d9def2;
}

.story-progress-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0 0 9px;
    color: #747b98;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.story-progress-label strong {
    color: var(--story-ink);
    font-size: 15px;
}

.story-meter {
    height: 10px;
    margin-bottom: 28px;
    overflow: hidden;
    border-radius: 10px;
    background: #e4e8f5;
}

.story-meter span {
    display: block;
    width: var(--story-meter);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #4969db, #7655eb);
    transform-origin: left center;
    animation: story-meter-fill 900ms cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes story-meter-fill {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

.story-fundloop-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 30px 0 26px;
}

.story-fundloop-stats > span {
    display: grid;
    gap: 5px;
    padding: 18px;
    border: 1px solid rgba(73, 90, 174, 0.12);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.78);
}

.story-fundloop-stats strong {
    color: var(--story-ink);
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1;
}

.story-fundloop-stats small {
    color: #777e9b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.story-transformation-deck {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.story-transformation-deck[hidden] {
    display: none !important;
}

.story-object-field {
    position: absolute;
    inset: 0;
    z-index: 3;
}

.story-object-card {
    --object-accent: #6c4ce6;
    --object-wash: #f0ebff;
    position: absolute;
    top: 0;
    left: 0;
    width: 210px;
    height: 74px;
    margin: 0;
    visibility: hidden;
    opacity: var(--object-opacity, 0);
    transform: translate3d(var(--object-x, 0px), var(--object-y, 0px), 0) scale(var(--object-scale, 1)) rotate(var(--object-rotate, 0deg));
    transform-origin: top left;
    will-change: transform, opacity;
    transition: none;
}

.story-object-card-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    overflow: hidden;
    border: 1px solid rgba(56, 65, 116, 0.12);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 14px 32px rgba(34, 44, 92, 0.12), 0 2px 7px rgba(34, 44, 92, 0.05);
}

.story-object-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: var(--object-wash);
    color: var(--object-accent);
}

.story-object-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.story-object-card[data-story-object="tip-jar"] .story-object-icon svg,
.story-object-card[data-story-object="pledge"] .story-object-icon svg,
.story-object-card[data-story-object="adoptable"] .story-object-icon svg {
    fill: currentColor;
    stroke: none;
}

.story-object-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.story-object-copy strong {
    overflow: hidden;
    color: var(--story-ink);
    font-size: 14px;
    font-weight: 760;
    letter-spacing: -0.015em;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.story-object-copy small {
    overflow: hidden;
    color: #747b98;
    font-size: 10px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.story-object-card--blue {
    --object-accent: #315ed7;
    --object-wash: #e8efff;
}

.story-object-card--indigo {
    --object-accent: #4a56c7;
    --object-wash: #ebedff;
}

.story-object-card--rose {
    --object-accent: #b24173;
    --object-wash: #fff0f6;
}

.story-object-card--ice {
    --object-accent: #2767ba;
    --object-wash: #eaf5ff;
}

.story-object-card--lilac {
    --object-accent: #7951cf;
    --object-wash: #f2ebff;
}

.story-object-card--peach {
    --object-accent: #b45f4e;
    --object-wash: #fff0e9;
}

.streams-story[data-story-active-phase="many-streams"] .story-object-card-inner {
    animation: story-card-current 4.8s ease-in-out infinite alternate;
    animation-delay: calc(var(--object-order, 0) * -180ms);
}

@keyframes story-card-current {
    from { transform: translate3d(-7px, 0, 0); }
    to { transform: translate3d(9px, 0, 0); }
}

.story-flow-frame {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 330px;
    height: var(--flow-frame-height, 610px);
    overflow: hidden;
    border: 1px solid rgba(66, 78, 151, 0.14);
    border-radius: 34px;
    background:
        radial-gradient(circle at 80% 8%, rgba(126, 91, 231, 0.17), transparent 28%),
        linear-gradient(160deg, #ffffff, #f5f7ff);
    box-shadow: 0 28px 68px rgba(34, 44, 92, 0.16);
    opacity: var(--flow-frame-opacity, 0);
    transform: translate3d(var(--flow-frame-x, 0px), var(--flow-frame-y, 0px), 0) scale(var(--flow-frame-scale, 1));
    transform-origin: top left;
    will-change: transform, opacity;
}

.story-flow-frame::before {
    content: '';
    position: absolute;
    top: 14px;
    left: 50%;
    width: 74px;
    height: 5px;
    border-radius: 6px;
    background: rgba(69, 74, 109, 0.16);
    transform: translateX(-50%);
}

.story-flow-frame header {
    position: relative;
    z-index: 1;
    padding: 40px 30px 20px;
    display: grid;
    gap: 7px;
}

.story-flow-frame header span {
    color: var(--story-violet);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.story-flow-frame header strong {
    color: var(--story-ink);
    font-size: 25px;
    letter-spacing: -0.045em;
    line-height: 1;
}

.story-flow-frame header small {
    max-width: 31ch;
    color: #737a97;
    font-size: 10px;
    line-height: 1.4;
}

.story-flow-frame-track {
    position: absolute;
    top: 120px;
    bottom: 30px;
    left: 59px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(88, 96, 201, 0.2), rgba(116, 73, 218, 0.5), rgba(88, 96, 201, 0.15));
}

.story-network-chrome {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: var(--network-opacity, 0);
    pointer-events: none;
    will-change: opacity;
}

.story-network-origin {
    position: absolute;
    top: 88px;
    left: 16px;
    width: 190px;
    padding: 14px 16px;
    display: grid;
    gap: 4px;
    border: 1px solid rgba(78, 83, 145, 0.13);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 13px 32px rgba(35, 44, 92, 0.1);
}

.story-network-origin span {
    color: var(--story-violet);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.story-network-origin strong {
    color: var(--story-ink);
    font-size: 13px;
}

.story-network-connections {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.story-network-connections path {
    fill: none;
    stroke: #7564db;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 5 9;
    opacity: 0.48;
    animation: story-network-signal 2.8s linear infinite;
}

.story-network-connections path:nth-child(2) {
    stroke: #4f77d5;
    animation-delay: -900ms;
}

.story-network-connections path:nth-child(3) {
    stroke: #b15d8c;
    animation-delay: -1.8s;
}

@keyframes story-network-signal {
    to { stroke-dashoffset: -56; }
}

.story-network-pulse {
    position: absolute;
    z-index: 2;
    width: 8px;
    height: 8px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: #6b58d9;
    box-shadow: 0 0 0 6px rgba(107, 88, 217, 0.12);
    animation: story-network-pulse 2.8s ease-in-out infinite;
}

.story-network-pulse--one { top: 164px; left: 60%; }
.story-network-pulse--two { top: 309px; left: 65%; animation-delay: -900ms; }
.story-network-pulse--three { top: 452px; left: 60%; animation-delay: -1.8s; }

@keyframes story-network-pulse {
    0%, 100% { opacity: 0.35; transform: scale(0.75); }
    45% { opacity: 1; transform: scale(1); }
}

.story-publisher-window {
    position: absolute;
    top: 76px;
    right: 0;
    width: min(61%, 438px);
    min-height: 500px;
    overflow: hidden;
    border: 1px solid rgba(50, 56, 98, 0.15);
    border-radius: 23px;
    background: #fffefd;
    box-shadow: 0 28px 66px rgba(33, 41, 88, 0.18);
    transform: translate3d(0, calc((1 - var(--network-opacity, 0)) * 18px), 0);
}

.story-publisher-browser-bar {
    height: 34px;
    padding: 0 13px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid #e2e2e8;
    background: #f4f4f7;
}

.story-publisher-browser-bar i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #c4c5cd;
}

.story-publisher-browser-bar span {
    margin-left: 7px;
    overflow: hidden;
    color: #858793;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.story-publisher-masthead {
    height: 72px;
    padding: 0 clamp(15px, 2.4vw, 24px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid #ece9e8;
}

.story-publisher-masthead strong {
    color: #17182a;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(15px, 1.5vw, 21px);
    letter-spacing: -0.02em;
}

.story-publisher-masthead span {
    color: #85808a;
    font-size: 6px;
    letter-spacing: 0.1em;
}

.story-publisher-feature {
    display: grid;
    grid-template-columns: 1fr;
}

.story-publisher-image {
    position: relative;
    height: 204px;
    overflow: hidden;
    background:
        radial-gradient(circle at 73% 34%, rgba(255, 255, 255, 0.86) 0 7%, transparent 7.5%),
        linear-gradient(135deg, #e6edff, #d8d2fb 58%, #f7dce9);
}

.story-publisher-image::before,
.story-publisher-image::after,
.story-publisher-image span,
.story-publisher-image i {
    content: '';
    position: absolute;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    transform: rotate(-22deg);
}

.story-publisher-image::before { width: 190px; height: 20px; left: 12%; bottom: 28%; }
.story-publisher-image::after { width: 120px; height: 14px; left: 43%; bottom: 42%; }
.story-publisher-image span { width: 88px; height: 88px; right: 13%; top: 22%; background: rgba(96, 80, 195, 0.22); }
.story-publisher-image i { width: 54px; height: 54px; right: 25%; top: 34%; background: rgba(255, 255, 255, 0.84); }

.story-publisher-copy {
    padding: 24px;
}

.story-publisher-copy small,
.story-publisher-byline {
    color: #7355c9;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.story-publisher-copy h4 {
    margin: 9px 0 10px;
    color: #151629;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(24px, 3vw, 37px);
    font-weight: 500;
    letter-spacing: -0.045em;
    line-height: 0.98;
}

.story-publisher-copy p {
    margin: 0 0 18px;
    color: #676777;
    font-size: 11px;
    line-height: 1.45;
}

.story-static-many,
.story-static-flow,
.story-static-network {
    width: min(100%, 720px);
}

.story-static-many {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.story-static-many .story-object-card,
.story-static-flow .story-object-card {
    position: relative;
    width: 100%;
    height: 72px;
    visibility: visible;
    opacity: 1;
    transform: none;
}

.story-static-many .story-object-copy small {
    white-space: normal;
}

.story-static-flow {
    padding: 26px;
    border: 1px solid rgba(66, 78, 151, 0.14);
    border-radius: 28px;
    background: linear-gradient(160deg, #ffffff, #f5f7ff);
    box-shadow: 0 22px 52px rgba(34, 44, 92, 0.12);
}

.story-static-flow > header {
    display: grid;
    gap: 6px;
    margin-bottom: 20px;
}

.story-static-flow > header span {
    color: var(--story-violet);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.story-static-flow > header strong {
    color: var(--story-ink);
    font-size: 28px;
    letter-spacing: -0.04em;
}

.story-static-flow > header p {
    margin: 0;
    color: #747b98;
    font-size: 13px;
    line-height: 1.45;
}

.story-static-flow > div {
    display: grid;
    gap: 9px;
}

.story-static-network {
    display: grid;
    gap: 24px;
}

.story-static-network-flow .story-static-flow {
    width: min(100%, 420px);
    margin: 0 auto;
}

.story-static-network-connection {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
}

.story-static-network-connection::before,
.story-static-network-connection::after {
    content: '';
    width: min(28%, 150px);
    height: 2px;
    background: linear-gradient(90deg, transparent, #725ed9, transparent);
}

.story-static-network-connection i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #725ed9;
}

.story-publisher-window--static {
    position: relative;
    top: auto;
    right: auto;
    width: min(100%, 560px);
    min-height: 0;
    margin: 0 auto;
    transform: none;
}

.story-interfaces {
    position: relative;
    width: min(100%, 1440px);
    margin: 0 auto;
    padding: clamp(108px, 13vw, 168px) clamp(24px, 5vw, 84px) clamp(120px, 13vw, 168px);
    background:
        radial-gradient(circle at 50% 47%, rgba(105, 71, 232, 0.055), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0), #ffffff 16%, #ffffff 100%);
}

.story-interfaces-heading {
    max-width: 900px;
    margin: 0 auto clamp(58px, 6vw, 82px);
    text-align: center;
}

.story-interfaces-heading .story-eyebrow {
    margin-bottom: 22px;
}

.story-interfaces-heading h2 {
    margin: 0;
    color: var(--story-ink);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(50px, 6.2vw, 82px);
    font-weight: 500;
    letter-spacing: -0.055em;
    line-height: 0.98;
}

.story-interface-connectors {
    width: min(78%, 920px);
    height: 24px;
    margin: 0 auto -3px;
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    opacity: 0.72;
}

.story-interface-connectors span {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(70, 104, 215, 0.58), rgba(111, 76, 222, 0.56), transparent);
}

.story-interface-connectors i {
    width: 6px;
    height: 6px;
    border: 1px solid #8067dc;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 0 5px rgba(111, 76, 222, 0.08);
}

.story-interface-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: clamp(20px, 2.4vw, 34px);
}

.story-interface-card {
    min-width: 0;
    min-height: 0;
}

.story-interface-label {
    min-height: 78px;
    padding: 0 8px 20px;
    text-align: center;
}

.story-interface-label p {
    margin: 0 0 7px;
    color: var(--story-violet);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.story-interface-label h3 {
    margin: 0;
    color: #555c79;
    font-size: clamp(13px, 1.15vw, 16px);
    font-weight: 560;
    letter-spacing: -0.01em;
    line-height: 1.35;
}

.story-agent-panel,
.story-miso-web-card,
.story-spatial-stage {
    height: clamp(300px, 25vw, 342px);
    border-radius: 24px;
    box-shadow: 0 24px 54px rgba(30, 39, 85, 0.13), 0 3px 12px rgba(30, 39, 85, 0.06);
}

.story-agent-panel {
    padding: clamp(20px, 2.1vw, 28px);
    overflow: hidden;
    border: 1px solid rgba(159, 172, 238, 0.14);
    background:
        radial-gradient(circle at 85% 8%, rgba(106, 85, 215, 0.23), transparent 36%),
        linear-gradient(150deg, #111936, #182143 72%, #202953);
    color: #f5f6ff;
}

.story-agent-panel-bar {
    margin-bottom: clamp(18px, 2vw, 27px);
    padding-bottom: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(212, 218, 255, 0.14);
}

.story-agent-panel-bar span {
    color: #cbd5ff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.story-agent-panel-bar small {
    padding: 4px 7px;
    border: 1px solid rgba(214, 219, 255, 0.18);
    border-radius: 6px;
    color: #daddf3;
    font-size: 8px;
    letter-spacing: 0.08em;
}

.story-agent-panel pre {
    margin: 0;
    overflow: hidden;
    color: #eef1ff;
    font: 500 clamp(10px, 1vw, 13px)/1.62 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: pre-wrap;
}

.story-code-key { color: #a9c5ff; }
.story-code-value { color: #e5c4ff; }
.story-code-brace { color: #f3d7ec; }

.story-agent-panel > p {
    margin: clamp(15px, 1.7vw, 22px) 0 0;
    color: #aeb6d4;
    font-size: 9px;
    line-height: 1.45;
}

.story-miso-web-card {
    display: grid;
    grid-template-columns: minmax(0, 46%) minmax(0, 54%);
    overflow: hidden;
    border: 1px solid rgba(60, 68, 119, 0.12);
    background: #ffffff;
}

.story-miso-web-media {
    position: relative;
    min-width: 0;
    overflow: hidden;
    background: #e9edf8;
}

.story-miso-poster {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.story-miso-web-media > span {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.91);
    color: #4e397f;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    box-shadow: 0 5px 16px rgba(33, 37, 70, 0.12);
}

.story-miso-web-copy {
    min-width: 0;
    padding: clamp(19px, 2.1vw, 29px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.story-miso-web-copy > small {
    color: var(--story-violet);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.story-miso-web-copy h4 {
    margin: 7px 0 7px;
    color: var(--story-ink);
    font-size: clamp(27px, 2.5vw, 36px);
    letter-spacing: -0.055em;
    line-height: 1;
}

.story-miso-web-copy > p {
    margin: 0;
    color: #747b98;
    font-size: 11px;
    line-height: 1.45;
}

.story-miso-traits {
    margin: 18px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.story-miso-traits span {
    padding: 6px 8px;
    border-radius: 8px;
    background: #f1efff;
    color: #5b478f;
    font-size: 8px;
    font-weight: 750;
}

.story-miso-web-copy > a {
    min-height: 38px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-radius: 11px;
    background: linear-gradient(135deg, #7253e2, #5634c8);
    color: #ffffff;
    font-size: 10px;
    font-weight: 750;
    text-decoration: none;
    box-shadow: 0 10px 22px rgba(86, 52, 200, 0.2);
}

.story-spatial-stage {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(65, 75, 132, 0.13);
    background:
        radial-gradient(circle at 50% 42%, #ffffff 0 18%, rgba(255, 255, 255, 0) 56%),
        linear-gradient(150deg, #f8faff, #e9edfb);
    outline: none;
}

.story-spatial-stage:focus-visible {
    box-shadow: 0 0 0 4px rgba(87, 92, 213, 0.17), 0 24px 54px rgba(30, 39, 85, 0.13);
}

.story-spatial-fallback,
.story-spatial-mount {
    position: absolute;
    inset: 0;
}

.story-spatial-fallback {
    transition: opacity 260ms ease, visibility 260ms ease;
}

.story-miso-poster--spatial {
    object-fit: cover;
    filter: contrast(0.9) brightness(1.1);
    opacity: 0.78;
    mix-blend-mode: multiply;
}

.story-spatial-fallback::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(247, 249, 255, 0.08), rgba(236, 240, 253, 0.78));
}

.story-spatial-fallback > div {
    position: absolute;
    z-index: 1;
    right: 19px;
    bottom: 18px;
    left: 19px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.story-spatial-fallback strong {
    color: var(--story-ink);
    font-size: 19px;
    letter-spacing: -0.03em;
}

.story-spatial-fallback span {
    color: #656d8a;
    font-size: 9px;
}

.story-spatial-mount {
    z-index: 2;
    opacity: 0;
    transition: opacity 260ms ease;
}

.story-spatial-mount[hidden] {
    display: none;
}

.streams-story-model-viewer {
    width: 100%;
    height: 100%;
    background: transparent;
    --poster-color: transparent;
}

.story-spatial-stage.is-streams-story-spatial-ready .story-spatial-mount {
    opacity: 1;
}

.story-spatial-stage.is-streams-story-spatial-ready .story-spatial-fallback {
    visibility: hidden;
    opacity: 0;
}

.story-spatial-orbit {
    position: absolute;
    z-index: 3;
    top: 15px;
    right: 15px;
    padding: 6px 9px;
    border: 1px solid rgba(83, 91, 143, 0.13);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    color: #606887;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.04em;
    box-shadow: 0 5px 16px rgba(31, 38, 75, 0.1);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 180ms ease, visibility 180ms ease;
}

.story-spatial-stage.is-streams-story-spatial-ready .story-spatial-orbit {
    opacity: 1;
    visibility: visible;
}

.story-spatial-orbit i {
    margin-right: 4px;
    color: var(--story-violet);
    font-style: normal;
}

.story-finale {
    position: relative;
    min-height: 760px;
    padding: clamp(132px, 16vw, 210px) clamp(24px, 6vw, 90px) clamp(150px, 17vw, 230px);
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 22%, rgba(255, 192, 206, 0.45), transparent 30%),
        radial-gradient(circle at 82% 28%, rgba(138, 166, 255, 0.42), transparent 33%),
        radial-gradient(circle at 57% 86%, rgba(134, 93, 222, 0.25), transparent 36%),
        linear-gradient(145deg, #fff8f7 0%, #eef4ff 38%, #eee9ff 72%, #f7e8f2 100%);
}

.story-finale-inner {
    position: relative;
    z-index: 1;
    width: min(100%, 980px);
    display: grid;
    justify-items: center;
    text-align: center;
}

.story-finale h2 {
    max-width: 12ch;
    margin: 0 0 42px;
    color: var(--story-ink);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(58px, 8vw, 104px);
    font-weight: 500;
    letter-spacing: -0.065em;
    line-height: 0.94;
}

.story-finale-cta {
    min-height: 52px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(79, 64, 173, 0.17);
    border-radius: 999px;
    background: linear-gradient(135deg, #7254df, #4f38bd);
    color: #ffffff;
    font-size: 14px;
    font-weight: 750;
    text-decoration: none;
    box-shadow: 0 16px 34px rgba(78, 57, 180, 0.23);
}

.story-finale-proofs {
    width: min(100%, 760px);
    margin-top: clamp(58px, 7vw, 82px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.story-finale-proof {
    min-height: 88px;
    padding: 19px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid rgba(73, 76, 145, 0.14);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.67);
    color: #35395f;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    text-align: left;
    text-decoration: none;
    box-shadow: 0 14px 34px rgba(50, 52, 102, 0.08);
    backdrop-filter: blur(10px);
    transition: transform 200ms ease, border-color 200ms ease, background-color 200ms ease;
}

.story-finale-proof strong {
    color: var(--story-violet);
    font-size: 22px;
    font-weight: 500;
}

.story-finale-proof:hover,
.story-finale-proof:focus-visible {
    border-color: rgba(86, 64, 197, 0.34);
    background: rgba(255, 255, 255, 0.88);
    transform: translateY(-3px);
}

@media (min-width: 901px) and (min-height: 681px) and (max-height: 800px) {
    .story-stage {
        top: 100px;
        min-height: min(660px, calc(100vh - 112px));
    }

    .story-flow-frame header {
        padding: 30px 24px 12px;
        gap: 5px;
    }

    .story-flow-frame header strong {
        font-size: 23px;
    }

    .story-flow-frame-track {
        top: 100px;
        bottom: 18px;
    }

    .story-network-origin {
        top: 72px;
    }

    .story-publisher-window {
        top: 52px;
        bottom: 12px;
        min-height: 0;
    }

    .story-publisher-browser-bar {
        height: 28px;
    }

    .story-publisher-masthead {
        height: 56px;
    }

    .story-publisher-image {
        height: 145px;
    }

    .story-publisher-copy {
        padding: 16px;
    }

    .story-publisher-copy h4 {
        margin: 6px 0 8px;
        font-size: clamp(21px, 2.4vw, 31px);
    }

    .story-publisher-copy p {
        margin-bottom: 12px;
        line-height: 1.35;
    }
}

@media (max-width: 900px), (prefers-reduced-motion: reduce), (min-width: 901px) and (max-height: 680px) {
    .story-progress {
        position: relative;
        top: auto;
        padding-top: 52px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .story-progress ol {
        width: max-content;
        min-width: 100%;
        padding-inline: 6px;
    }

    .story-runway {
        display: block;
        padding: 0 clamp(20px, 6vw, 54px) 90px;
    }

    .story-marker {
        min-height: 0;
        display: block;
        padding: 72px 0;
    }

    .story-marker-copy {
        max-width: 680px;
        padding: 0 0 38px;
    }

    .story-marker h3 {
        max-width: 13ch;
        font-size: clamp(40px, 9vw, 64px);
    }

    .story-static-visual {
        display: grid;
        place-items: center;
    }

    .story-stage-column {
        display: none;
        height: auto;
    }

    .story-stage-visual,
    .story-meter span,
    .story-object-card-inner,
    .story-network-connections path,
    .story-network-pulse {
        animation: none;
    }

    .story-interfaces {
        padding-top: 96px;
    }

    .story-interface-connectors {
        display: none;
    }

    .story-interface-grid {
        width: min(100%, 680px);
        margin: 0 auto;
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .story-interface-label {
        min-height: 0;
    }

    .story-agent-panel,
    .story-miso-web-card,
    .story-spatial-stage {
        height: min(360px, 70vw);
        min-height: 310px;
    }

    .story-spatial-orbit {
        display: none;
    }

    .story-finale-proof {
        transition: none;
    }
}

@media (max-width: 560px) {
    .story-progress {
        padding-inline: 16px;
    }

    .story-progress ol {
        justify-content: flex-start;
        gap: 20px;
    }

    .story-stream-card {
        min-height: 0;
        padding: 22px;
        border-radius: 24px;
    }

    .compact-tip-jar-amounts {
        gap: 7px;
    }

    .story-fundloop-stats {
        margin-top: 22px;
    }

    .story-static-many {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .story-static-many .story-object-card {
        height: 78px;
    }

    .story-static-many .story-object-copy small {
        display: none;
    }

    .story-publisher-masthead span {
        display: none;
    }

    .story-interfaces-heading h2 {
        font-size: clamp(44px, 13vw, 66px);
    }

    .story-miso-web-card {
        height: auto;
        min-height: 0;
        grid-template-columns: 1fr;
    }

    .story-miso-web-media {
        height: 230px;
    }

    .story-miso-web-copy {
        padding: 24px;
    }

    .story-agent-panel,
    .story-spatial-stage {
        height: 320px;
        min-height: 0;
    }

    .story-finale {
        min-height: 700px;
        padding-inline: 20px;
    }

    .story-finale h2 {
        font-size: clamp(52px, 16vw, 76px);
    }

    .story-finale-proofs {
        grid-template-columns: 1fr;
    }
}