@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&family=Syne:wght@700;800&display=swap");

:root { --paper: #f0ecdf; --ink: #243031; --cream: #fffdf4; --orange: #ff6420; --olive: #a6ad45; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body { min-width: 320px; margin: 0; color: var(--ink); background: var(--paper); font-family: "Space Grotesk", Arial, sans-serif; }
button, a { font: inherit; }

.experiment-nav { position: fixed; inset: 0 0 auto; z-index: 30; width: calc(100% - 92px); min-height: 92px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.5rem; align-items: center; margin: auto; border-bottom: 1px solid rgb(36 48 49 / 0.17); }
.experiment-brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--ink); font: 800 1.08rem/1 "Space Grotesk", sans-serif; letter-spacing: -.05em; text-decoration: none; text-transform: lowercase; }
.experiment-brand img { width: 36px; height: 36px; border-radius: 50%; box-shadow: none; }
.experiment-nav nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; }
.experiment-nav nav a { padding: .45rem .58rem; border: 1px solid transparent; border-radius: 0; color: var(--ink); font: 500 .68rem/1 "DM Mono", monospace; letter-spacing: .07em; opacity: .68; text-decoration: none; text-transform: uppercase; transition: border-color 180ms ease, opacity 180ms ease; }
.experiment-nav nav a:hover, .experiment-nav nav a[aria-current="page"] { border-color: var(--orange); opacity: 1; }
.experiment-live { justify-self: end; color: rgb(36 48 49 / .64); font: 500 .68rem/1 "DM Mono", monospace; letter-spacing: .07em; text-transform: uppercase; }
.experiment-menu-toggle { display: none; }

.history-snap { position: relative; height: 100svh; touch-action: none; }
.snap-stage { position: relative; z-index: 1; height: 100svh; display: grid; place-items: center; padding: 112px 46px clamp(1rem, 3.1vw, 3rem); pointer-events: none; }
.snap-frame { --accent: #ff6420; --soft: #efcb8c; --timeline-step: 0; position: relative; width: min(1480px, 100%); height: min(780px, calc(100svh - 136px)); min-height: 520px; overflow: hidden; isolation: isolate; border: 1px solid color-mix(in srgb, var(--accent) 62%, #eff0df); border-radius: clamp(18px, 2.1vw, 34px); background: radial-gradient(circle at 66% 64%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 28%), #11140f; box-shadow: 14px 14px 0 rgb(36 48 49 / .15); transition: border-color .38s ease, box-shadow .38s ease; }
.history-snap[data-active="1"] .snap-frame { --accent: #b4ba48; --soft: #e1c96f; --timeline-step: 1; }
.history-snap[data-active="2"] .snap-frame { --accent: #d0805d; --soft: #b2b66a; --timeline-step: 2; }
.history-snap[data-active="3"] .snap-frame { --accent: #92a99c; --soft: #d5ded1; --timeline-step: 3; }
.history-snap[data-active="4"] .snap-frame { --accent: #69c5d5; --soft: #bddcc8; --timeline-step: 4; }
.history-snap[data-active="5"] .snap-frame { --accent: #d87fa2; --soft: #ecb986; --timeline-step: 5; }

.frame-grid { position: absolute; inset: 0; z-index: -4; opacity: .52; background-image: linear-gradient(rgb(255 148 90 / .1) 1px, transparent 1px), linear-gradient(90deg, rgb(255 148 90 / .1) 1px, transparent 1px), radial-gradient(rgb(255 255 255 / .06) .75px, transparent .8px); background-position: center; background-size: 10% 12%, 10% 12%, 5px 5px; transition: opacity .32s ease; }
.history-snap[data-active="1"] .frame-grid { background-size: 7% 8%, 7% 8%, 5px 5px; opacity: .4; }
.history-snap[data-active="2"] .frame-grid { background-size: 14% 9%, 14% 9%, 5px 5px; opacity: .36; }
.history-snap[data-active="3"] .frame-grid { background-size: 8% 8%, 8% 8%, 4px 4px; opacity: .5; }
.history-snap[data-active="4"] .frame-grid { background-size: 16% 9%, 16% 9%, 5px 5px; opacity: .27; }
.history-snap[data-active="5"] .frame-grid { background-size: 9% 13%, 9% 13%, 5px 5px; opacity: .46; }
.frame-noise { position: absolute; inset: 0; z-index: -3; pointer-events: none; opacity: .25; background-image: radial-gradient(rgb(255 255 255 / .35) .55px, transparent .6px); background-size: 5px 5px; mix-blend-mode: soft-light; }
.frame-squares i { position: absolute; z-index: 3; width: 22px; aspect-ratio: 1; background: var(--accent); transition: background .5s ease, transform .5s ease; }.frame-squares i:first-child { top: 24px; right: 24px; }.frame-squares i:last-child { top: 49px; right: 49px; background: rgb(255 255 255 / .2); }.history-snap[data-active="2"] .frame-squares i:first-child { transform: translate(-620%, 450%) rotate(45deg); }.history-snap[data-active="4"] .frame-squares i:first-child { transform: translate(-510%, 1250%); border-radius: 50%; }.history-snap[data-active="5"] .frame-squares i:first-child { transform: translate(-1900%, 40%) rotate(45deg); }

.snap-art, .art-scene { position: absolute; inset: 0; pointer-events: none; }.art-scene { opacity: 0; transform: translate3d(0, 16px, 0) scale(.98); will-change: opacity, transform; transition: opacity .32s ease, transform .52s cubic-bezier(.22, 1, .36, 1); }.history-snap[data-active="0"] .art-rave, .history-snap[data-active="1"] .art-jungle, .history-snap[data-active="2"] .art-branches, .history-snap[data-active="3"] .art-precision, .history-snap[data-active="4"] .art-liquid, .history-snap[data-active="5"] .art-world { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
.art-word { position: absolute; z-index: 0; right: -.08em; bottom: 6%; color: rgb(255 255 255 / .1); font: 800 clamp(7rem, 16vw, 16rem)/.75 "Syne", sans-serif; letter-spacing: -.12em; writing-mode: vertical-rl; transform: rotate(180deg); transition: color .5s ease, transform .6s cubic-bezier(.22,1,.36,1); }.history-snap[data-active="2"] .art-word { right: auto; bottom: 7%; left: .05em; writing-mode: horizontal-tb; transform: rotate(-18deg); }.history-snap[data-active="4"] .art-word { color: rgb(105 197 213 / .12); }.history-snap[data-active="5"] .art-word { transform: rotate(180deg) translateY(-6%); }

.rave-orbit { position: absolute; width: min(40vw, 460px); aspect-ratio: 1; right: 21%; bottom: 18%; border: 2px solid var(--accent); border-radius: 50%; box-shadow: 0 0 0 29px color-mix(in srgb, var(--accent) 13%, transparent), 0 0 0 58px color-mix(in srgb, var(--accent) 6%, transparent); }.rave-traces i { position: absolute; width: 16%; height: 2px; right: 43%; top: 54%; background: color-mix(in srgb, var(--accent) 66%, transparent); transform: rotate(-35deg); }.rave-traces i:last-child { width: 13%; top: 58%; right: 36%; transform: rotate(28deg); }.rave-bars { position: absolute; right: 8%; bottom: 15%; width: 58%; height: 57%; display: flex; align-items: end; gap: 1%; }.rave-bars i { flex: 1; background: var(--accent); }.rave-bars i:nth-child(1) { height: 23%; }.rave-bars i:nth-child(2) { height: 48%; }.rave-bars i:nth-child(3) { height: 34%; }.rave-bars i:nth-child(4) { height: 72%; }.rave-bars i:nth-child(5) { height: 55%; }.rave-bars i:nth-child(6) { height: 91%; }.rave-bars i:nth-child(7) { height: 45%; }.rave-bars i:nth-child(8) { height: 67%; }

.jungle-sun { position: absolute; width: min(38vw, 460px); aspect-ratio: 1; right: 17%; top: 18%; border: 2px solid var(--soft); border-radius: 50%; box-shadow: 0 0 0 24px color-mix(in srgb, var(--accent) 12%, transparent); }.jungle-vines i { position: absolute; width: 61%; height: 32%; right: -7%; bottom: 18%; border-top: 3px solid var(--accent); border-radius: 50%; transform: rotate(-17deg); }.jungle-vines i:nth-child(2) { right: -2%; bottom: 30%; border-color: var(--soft); transform: rotate(-7deg); }.jungle-vines i:nth-child(3) { right: 13%; bottom: 10%; border-color: color-mix(in srgb, var(--accent) 42%, transparent); transform: rotate(8deg); }.jungle-grid { position: absolute; inset: 13% 13% auto auto; width: 43%; height: 55%; border: 2px solid color-mix(in srgb, var(--accent) 43%, transparent); clip-path: polygon(20% 0,100% 0,100% 100%,0 100%,0 22%); }.jungle-blocks { position: absolute; right: 25%; bottom: 17%; display: flex; align-items: end; gap: 12px; height: 33%; }.jungle-blocks i { width: 28px; background: var(--accent); }.jungle-blocks i:nth-child(1) { height: 33%; }.jungle-blocks i:nth-child(2) { height: 77%; }.jungle-blocks i:nth-child(3) { height: 52%; }.jungle-blocks i:nth-child(4) { height: 100%; }

.branch-core { position: absolute; width: min(22vw, 280px); aspect-ratio: 1; right: 36%; top: 39%; border: 2px solid var(--accent); border-radius: 50%; box-shadow: inset 0 0 0 28px color-mix(in srgb, var(--accent) 14%, transparent), 0 0 0 19px color-mix(in srgb, var(--soft) 16%, transparent); }.branch-lines i { position: absolute; height: 2px; width: 44%; right: 2%; top: 30%; background: var(--accent); transform-origin: left; transform: rotate(31deg); }.branch-lines i:nth-child(2) { top: 45%; right: 13%; width: 36%; transform: rotate(-25deg); background: var(--soft); }.branch-lines i:nth-child(3) { top: 66%; right: 1%; width: 50%; transform: rotate(-8deg); }.branch-lines i:nth-child(4) { top: 72%; right: 19%; width: 37%; transform: rotate(48deg); background: var(--soft); }.branch-lines i:nth-child(5) { top: 18%; right: 17%; width: 31%; transform: rotate(74deg); }.branch-nodes i { position: absolute; width: 14px; aspect-ratio: 1; background: var(--accent); border-radius: 50%; }.branch-nodes i:nth-child(1) { right: 9%; top: 22%; }.branch-nodes i:nth-child(2) { right: 31%; top: 37%; background: var(--soft); }.branch-nodes i:nth-child(3) { right: 13%; top: 66%; }.branch-nodes i:nth-child(4) { right: 49%; top: 57%; background: var(--soft); }

.precision-diamond { position: absolute; width: min(35vw, 410px); aspect-ratio: 1; right: 22%; top: 24%; border: 2px solid var(--soft); transform: rotate(45deg); box-shadow: inset 0 0 0 28px color-mix(in srgb, var(--accent) 8%, transparent), 0 0 0 18px color-mix(in srgb, var(--accent) 7%, transparent); }.precision-traces i { position: absolute; width: 48%; height: 18%; right: 15%; top: 45%; border-top: 2px solid var(--accent); border-radius: 50%; transform: rotate(-31deg); }.precision-traces i:nth-child(2) { top: 53%; right: 9%; border-color: var(--soft); transform: rotate(22deg); }.precision-traces i:nth-child(3) { top: 62%; right: 24%; border-color: color-mix(in srgb, var(--accent) 47%, transparent); }.precision-bars { position: absolute; right: 11%; bottom: 14%; width: 53%; height: 38%; display: flex; align-items: end; gap: 2%; }.precision-bars i { flex: 1; background: var(--accent); }.precision-bars i:nth-child(1) { height: 24%; }.precision-bars i:nth-child(2) { height: 69%; }.precision-bars i:nth-child(3) { height: 36%; }.precision-bars i:nth-child(4) { height: 88%; }.precision-bars i:nth-child(5) { height: 53%; }.precision-bars i:nth-child(6) { height: 78%; }

.liquid-loop { position: absolute; border: 2px solid var(--accent); border-radius: 48% 52% 44% 56%; }.liquid-loop--one { width: 64%; height: 38%; right: -10%; top: 21%; transform: rotate(14deg); box-shadow: 0 0 0 28px color-mix(in srgb, var(--accent) 8%, transparent); }.liquid-loop--two { width: 52%; height: 33%; right: 19%; bottom: 15%; border-color: var(--soft); transform: rotate(-16deg); }.liquid-loop--three { width: 31%; height: 21%; right: 31%; top: 43%; border-style: dashed; transform: rotate(34deg); }.liquid-lines i { position: absolute; width: 63%; height: 21%; right: 3%; bottom: 17%; border-top: 3px solid var(--accent); border-radius: 50%; transform: rotate(-8deg); }.liquid-lines i:nth-child(2) { right: 8%; bottom: 27%; border-color: var(--soft); }.liquid-lines i:nth-child(3) { right: 0; bottom: 7%; border-color: color-mix(in srgb, var(--accent) 42%, transparent); }

.world-rings { position: absolute; width: min(43vw, 510px); aspect-ratio: 1; right: 18%; top: 20%; border: 2px solid var(--accent); border-radius: 50%; }.world-rings i { position: absolute; inset: 16%; border: 2px solid color-mix(in srgb, var(--soft) 72%, transparent); border-radius: inherit; }.world-rings i:nth-child(2) { inset: 33%; border-color: var(--accent); }.world-rings i:nth-child(3) { inset: 48%; background: color-mix(in srgb, var(--accent) 80%, transparent); border: 0; }.world-route i { position: absolute; width: 42%; height: 24%; right: 10%; top: 37%; border-top: 2px solid var(--soft); border-radius: 50%; transform: rotate(24deg); }.world-route i:nth-child(2) { right: 27%; top: 52%; border-color: var(--accent); transform: rotate(-38deg); }.world-route i:nth-child(3) { right: 11%; top: 61%; border-color: color-mix(in srgb, var(--accent) 52%, transparent); }.world-points i { position: absolute; width: 13px; aspect-ratio: 1; background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 14%, transparent); }.world-points i:nth-child(1) { right: 30%; top: 30%; }.world-points i:nth-child(2) { right: 14%; top: 44%; background: var(--soft); }.world-points i:nth-child(3) { right: 33%; top: 61%; }.world-points i:nth-child(4) { right: 47%; top: 48%; background: var(--soft); }.world-points i:nth-child(5) { right: 24%; top: 73%; }

.copy-stack { position: absolute; z-index: 6; inset: 0; pointer-events: none; }.snap-copy { position: absolute; top: 13%; bottom: 12%; left: clamp(1.5rem, 5vw, 5.5rem); width: min(44%, 560px); display: flex; flex-direction: column; justify-content: center; padding: clamp(1.4rem, 2.4vw, 2.7rem); border-left: 3px solid var(--accent); background: linear-gradient(90deg, rgb(10 13 10 / .91), rgb(10 13 10 / .76) 78%, transparent); box-shadow: 18px 0 42px rgb(12 15 11 / .31); opacity: 0; transform: translateY(42px); transition: opacity .36s ease, transform .55s cubic-bezier(.22, 1, .36, 1), border-color .5s ease; }.snap-copy.is-current { opacity: 1; transform: none; }.snap-copy.is-leaving { opacity: 0; transform: translateY(-42px); }
.copy-kicker, .copy-year, .copy-index { margin: 0; font: 500 clamp(.62rem, .86vw, .76rem)/1 "DM Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }.copy-kicker { color: rgb(255 253 244 / .55); }.copy-year { margin-top: .65rem; color: var(--accent); font-size: clamp(1.15rem, 2.2vw, 2.25rem); letter-spacing: -.07em; }.copy-index { position: absolute; top: 1.45rem; right: 1.55rem; color: var(--soft); }
.snap-copy h1 { max-width: 8.5ch; margin: clamp(2rem, 4vw, 4rem) 0 1.35rem; color: #fff7e9; font: 800 clamp(2.8rem, 5.4vw, 6.1rem)/.8 "Syne", sans-serif; letter-spacing: -.1em; }.snap-copy > p:not(.copy-kicker):not(.copy-year):not(.copy-index) { max-width: 34ch; margin: 0; color: rgb(255 247 233 / .82); font-size: clamp(.92rem, 1.3vw, 1.18rem); line-height: 1.52; }.snap-copy strong { max-width: 34ch; margin-top: clamp(1.5rem, 3vw, 2.7rem); padding-top: 1.15rem; border-top: 1px solid color-mix(in srgb, var(--accent) 72%, transparent); color: var(--soft); font: 500 clamp(.67rem, .85vw, .8rem)/1.35 "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.frame-readout { position: absolute; z-index: 8; right: clamp(1.5rem, 3vw, 3rem); bottom: 1.5rem; left: clamp(1.5rem, 3vw, 3rem); display: flex; justify-content: space-between; gap: 1rem; color: #fff7e9; font: 500 clamp(.62rem, .8vw, .76rem)/1 "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }.frame-readout span:first-child { color: var(--accent); }.frame-readout span:last-child { color: var(--soft); }
.snap-timeline { position: absolute; z-index: 8; right: clamp(1.5rem, 3vw, 3rem); bottom: 3.55rem; left: max(52%, 430px); display: grid; grid-template-columns: auto minmax(180px, 1fr); gap: .9rem; align-items: end; color: rgb(255 247 233 / .45); font: 500 clamp(.55rem, .68vw, .66rem)/1 "DM Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }.timeline-label { color: var(--soft); }.timeline-track { position: relative; height: 17px; border-top: 1px solid rgb(255 247 233 / .27); }.timeline-track i { position: absolute; top: 5px; color: rgb(255 247 233 / .43); font-style: normal; transform: translateX(-50%); }.timeline-track i::before { position: absolute; top: -7px; left: 50%; width: 1px; height: 5px; content: ""; background: rgb(255 247 233 / .27); }.timeline-track i:nth-child(1) { left: 0; transform: none; }.timeline-track i:nth-child(1)::before { left: 0; }.timeline-track i:nth-child(2) { left: 20%; }.timeline-track i:nth-child(3) { left: 40%; }.timeline-track i:nth-child(4) { left: 60%; }.timeline-track i:nth-child(5) { left: 80%; }.timeline-track i:nth-child(6) { right: 0; left: auto; transform: none; }.timeline-track i:nth-child(6)::before { left: auto; right: 0; }.timeline-track b { position: absolute; top: -5px; left: calc(var(--timeline-step) * 20%); width: 10px; aspect-ratio: 1; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 17%, transparent); transform: translateX(-50%); transition: left .52s cubic-bezier(.22, 1, .36, 1), background .38s ease, box-shadow .38s ease; will-change: left; }.history-snap[data-active="0"] .timeline-track b { transform: none; }.history-snap[data-active="5"] .timeline-track b { transform: translateX(-100%); }
.frame-index { position: absolute; z-index: 9; top: 24%; right: clamp(1.25rem, 2.4vw, 2.6rem); display: grid; gap: .42rem; pointer-events: auto; }.frame-index button { width: 35px; height: 26px; padding: 0; border: 0; border-left: 1px solid rgb(255 255 255 / .24); color: rgb(255 255 255 / .47); background: transparent; cursor: pointer; font: 500 .68rem/1 "DM Mono", monospace; text-align: left; transition: border-color .25s ease, color .25s ease, transform .25s ease; }.frame-index button:hover, .frame-index button[aria-current="step"] { border-left-color: var(--accent); color: #fff7e9; transform: translateX(5px); }
.frame-hint { position: absolute; z-index: 8; right: 50%; bottom: 1.35rem; display: none; align-items: center; gap: .55rem; margin: 0; color: rgb(255 247 233 / .55); font: 500 .6rem/1 "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; transform: translateX(50%); }.frame-hint b { color: var(--accent); font-size: 1rem; animation: hint-drop 1.5s ease-in-out infinite alternate; }

.snap-rail { display: none; }
@keyframes hint-drop { to { transform: translateY(5px); } }
@media (max-width: 1024px) { .snap-frame { height: min(760px, calc(100svh - 122px)); }.snap-copy { width: min(53%, 500px); }.rave-bars { width: 53%; }.art-word { font-size: clamp(6.5rem, 18vw, 13rem); }.experiment-nav { min-height: 76px; }.snap-stage { padding-top: 94px; } }
@media (max-width: 680px) { .experiment-nav { width: calc(100% - 32px); min-height: 72px; grid-template-columns: 1fr auto; }.experiment-nav nav { display: none; }.experiment-nav nav.is-open { position: absolute; top: 72px; right: 0; display: grid; width: min(230px, calc(100vw - 32px)); gap: 0; padding: .45rem; border: 1px solid rgb(36 48 49 / .26); background: var(--paper); box-shadow: 6px 6px 0 rgb(36 48 49 / .15); }.experiment-nav nav.is-open a { display: flex; align-items: center; min-height: 44px; padding-inline: .75rem; border-bottom: 1px solid rgb(36 48 49 / .13); }.experiment-nav nav.is-open a[aria-current="page"], .experiment-nav nav.is-open a:hover, .experiment-nav nav.is-open a:focus-visible { border: 1px solid var(--orange); color: var(--ink); }.experiment-nav nav.is-open a:last-child { border-bottom: 0; }.experiment-live { margin-right: 3.1rem; font-size: .58rem; }.experiment-menu-toggle { position: absolute; top: 14px; right: 0; display: grid; width: 44px; height: 44px; place-content: center; gap: 5px; padding: 0; border: 1px solid rgb(36 48 49 / .32); color: var(--ink); background: transparent; }.experiment-menu-toggle span { width: 18px; height: 1px; background: currentColor; }.snap-stage { padding: 88px 16px 12px; }.snap-frame { width: 100%; height: calc(100svh - 100px); min-height: 0; border-radius: 18px; box-shadow: 8px 8px 0 rgb(36 48 49 / .15); }.copy-stack { inset: auto 0 0; height: 60%; }.snap-copy { top: 0; right: 0; bottom: 0; left: 0; width: auto; padding: 1.35rem 1.4rem 4.6rem; border-left: 0; border-top: 3px solid var(--accent); background: linear-gradient(0deg, rgb(9 12 9 / .95), rgb(9 12 9 / .78)); }.snap-copy h1 { margin: 1.35rem 0 .9rem; font-size: clamp(2.55rem, 12vw, 4.3rem); }.snap-copy > p:not(.copy-kicker):not(.copy-year):not(.copy-index) { font-size: .9rem; }.snap-copy strong { margin-top: 1.1rem; padding-top: .8rem; font-size: .58rem; }.copy-year { margin-top: .45rem; font-size: 1.08rem; }.copy-index { top: 1.35rem; right: 1.4rem; }.frame-readout { bottom: 1.18rem; font-size: .56rem; }.snap-timeline { right: 1.35rem; bottom: 2.8rem; left: 1.35rem; grid-template-columns: 1fr; gap: .35rem; font-size: .5rem; }.timeline-label { display: none; }.frame-index { top: 17%; right: 1.05rem; }.frame-hint { display: flex; }.rave-orbit { width: 79%; right: 7%; bottom: 42%; }.rave-bars { right: 5%; bottom: 36%; width: 80%; height: 40%; }.jungle-sun { width: 74%; right: 0; top: 10%; }.jungle-grid { top: 11%; right: 5%; width: 60%; height: 43%; }.jungle-vines i { width: 100%; right: -28%; bottom: 42%; }.jungle-blocks { right: 16%; bottom: 41%; height: 25%; }.branch-core { width: 45%; right: 28%; top: 20%; }.branch-lines i { width: 70%; right: -10%; }.branch-lines i:nth-child(2) { right: 3%; }.precision-diamond { width: 65%; right: 13%; top: 12%; }.precision-bars { right: 8%; bottom: 40%; width: 77%; height: 25%; }.liquid-loop--one { width: 100%; right: -25%; top: 8%; }.liquid-loop--two { width: 79%; right: 11%; bottom: 41%; }.liquid-lines i { width: 94%; right: -10%; bottom: 43%; }.world-rings { width: 78%; right: 10%; top: 10%; }.world-route i { width: 67%; right: -2%; }.art-word { right: -.16em; bottom: 40%; font-size: 8.2rem; }.history-snap[data-active="2"] .art-word { bottom: 44%; left: -.05em; font-size: 6.5rem; } }
/* History now uses the same light broadcast desk as the live-radio home. */
.history-snap { background: radial-gradient(circle at 88% 78%, color-mix(in srgb, var(--olive) 12%, transparent), transparent 28%), var(--paper); }
.snap-frame { background: radial-gradient(circle at 67% 64%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 28%), var(--cream); box-shadow: 14px 14px 0 color-mix(in srgb, var(--accent) 20%, #243031); }
.frame-grid { opacity: .52; background-image: linear-gradient(color-mix(in srgb, var(--accent) 16%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--accent) 16%, transparent) 1px, transparent 1px), radial-gradient(color-mix(in srgb, var(--accent) 26%, transparent) .7px, transparent .8px); }
.frame-noise { opacity: .44; background-image: radial-gradient(rgb(36 48 49 / .18) .55px, transparent .6px); mix-blend-mode: multiply; }
.snap-art { left: 35%; }
.art-word { color: rgb(36 48 49 / .08); }
.history-snap[data-active="4"] .art-word { color: rgb(105 197 213 / .12); }
.copy-stack { z-index: 7; }
.snap-copy { top: 11%; bottom: 7%; left: clamp(1.6rem, 4.3vw, 4.8rem); width: min(40%, 540px); justify-content: flex-start; padding: 0; border-top: 0; border-left: 0; background: transparent; box-shadow: none; }
.copy-kicker { position: absolute; top: 0; left: 0; display: flex; width: min(72vw, 1000px); align-items: center; gap: clamp(.75rem, 1.7vw, 1.35rem); color: rgb(36 48 49 / .56); }.copy-kicker::after { min-width: 3rem; height: 2px; flex: 1; content: ""; background: var(--accent); opacity: .82; }.copy-year { position: absolute; top: clamp(1.7rem, 2.35vw, 2.45rem); left: 0; margin: 0; color: var(--accent); }.copy-index { display: none; }
.snap-copy h1 { max-width: 9.5ch; margin: clamp(5.85rem, 7.1vw, 7.35rem) 0 .85rem; color: #243031; font-size: clamp(2.45rem, 4vw, 4.65rem); line-height: .84; }.snap-copy > p:not(.copy-kicker):not(.copy-year):not(.copy-index) { max-width: 38ch; color: rgb(36 48 49 / .78); font-size: clamp(.9rem, 1.1vw, 1.08rem); line-height: 1.46; }.snap-copy strong { max-width: 38ch; margin-top: clamp(1rem, 1.8vw, 1.5rem); padding-top: .85rem; border-top-color: color-mix(in srgb, var(--accent) 55%, transparent); color: color-mix(in srgb, var(--olive) 84%, #243031); }

@media (min-width: 681px) and (max-width: 1024px) { .snap-copy { width: min(52%, 500px); }.snap-copy h1 { font-size: clamp(2.2rem, 4.4vw, 2.7rem); } }
.frame-readout { display: none; }
.snap-timeline { color: rgb(36 48 49 / .48); }.timeline-label { color: color-mix(in srgb, var(--olive) 78%, #243031); }.timeline-track { border-top-color: rgb(36 48 49 / .28); }.timeline-track i { color: rgb(36 48 49 / .5); }.timeline-track i::before { background: rgb(36 48 49 / .28); }
.frame-index button { border-left-color: rgb(36 48 49 / .22); color: rgb(36 48 49 / .48); }.frame-index button:hover, .frame-index button[aria-current="step"] { color: #243031; }
.frame-hint { color: rgb(36 48 49 / .62); }

@media (max-width: 680px) {
  .snap-art { left: 0; }
  .copy-stack { height: 59%; }
  .snap-copy { top: 0; right: 0; bottom: 4.1rem; left: 0; width: auto; padding: 1.1rem 1.4rem .7rem; border-top: 0; background: linear-gradient(0deg, rgb(255 253 244 / .98), rgb(255 253 244 / .86) 76%, rgb(255 253 244 / 0)); }
  .copy-kicker { position: relative; top: auto; left: auto; width: 100%; gap: .7rem; }.copy-kicker::after { height: 1px; }.copy-year { position: relative; top: auto; left: auto; margin-top: .45rem; }
  .snap-copy h1 { color: #243031; margin: 1.05rem 0 .8rem; font-size: clamp(2.05rem, 9.6vw, 3rem); }
  .snap-copy > p:not(.copy-kicker):not(.copy-year):not(.copy-index) { color: rgb(36 48 49 / .82); font-size: .82rem; line-height: 1.46; }
  .snap-copy strong { display: none; }
  .snap-timeline { bottom: 1.2rem; color: rgb(36 48 49 / .58); }
  .timeline-label { display: block; color: color-mix(in srgb, var(--olive) 82%, #243031); }
  .timeline-track { border-top-color: rgb(36 48 49 / .35); }
  .timeline-track i { color: rgb(36 48 49 / .58); }
  .frame-hint { display: none; }
}

@media (orientation: landscape) and (max-height: 560px) and (max-width: 680px) {
  .snap-stage { padding: 80px 16px 8px; }
  .snap-frame { height: calc(100svh - 88px); }
  .copy-stack { inset: 0; height: auto; }
  .snap-copy { display: grid; grid-template-columns: minmax(190px, .82fr) minmax(0, 1.18fr); grid-template-rows: auto auto 1fr; column-gap: 1rem; padding: 1rem 3.4rem 3rem 1.35rem; background: linear-gradient(90deg, rgb(255 253 244 / .98), rgb(255 253 244 / .9) 72%, rgb(255 253 244 / .62)); }
  .copy-kicker { grid-column: 1; grid-row: 1; }
  .copy-year { grid-column: 1; grid-row: 2; }
  .snap-copy h1 { grid-column: 1; grid-row: 3; align-self: start; margin: .65rem 0 0; font-size: clamp(1.75rem, 5.2vw, 2.25rem); }
  .snap-copy > p:not(.copy-kicker):not(.copy-year):not(.copy-index) { grid-column: 2; grid-row: 1 / 4; align-self: center; max-width: none; font-size: .67rem; line-height: 1.35; }
  .frame-index { top: 1rem; right: .75rem; gap: .18rem; }
  .frame-index button { height: 22px; }
  .snap-timeline { right: 1.35rem; bottom: .85rem; left: 1.35rem; }
}

@media (orientation: portrait) and (max-height: 700px) and (max-width: 680px) {
  .copy-stack { height: 66%; }
}

@media (prefers-reduced-motion: reduce) { .art-scene, .snap-copy, .snap-frame, .frame-grid, .art-word, .frame-squares i { transition: none !important; }.frame-hint b { animation: none !important; } }

@media (max-width: 680px) {
  .experiment-live {
    position: absolute;
    top: 50%;
    right: 3.1rem;
    width: max-content;
    margin: 0;
    color: rgb(36 48 49 / .64);
    font: 500 .58rem/1 "DM Mono", monospace;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
    transform: translateY(-50%);
  }
}