:root{font-family:Arial,Helvetica,sans-serif;color:#171717;background:#fff;color-scheme:light;--unit:min(100vw,100svh);--muted:#999}
*{box-sizing:border-box}body{margin:0;transition:background 1s ease,color 1s ease;overflow-x:hidden}body.dark{background:#090909;color:#f4f4f4;color-scheme:dark}
.experience{position:relative;min-height:560px;height:100svh;max-width:1440px;margin:auto}
.artwork{position:absolute;left:50%;top:calc(50% - var(--unit)*.3333);width:calc(var(--unit)*.4815);height:calc(var(--unit)*.426);transform:translateX(-50%)}
#images,.ring{position:absolute;width:100%;height:100%;inset:0}.ring{object-fit:contain;opacity:0;transition:opacity .32s ease,transform .55s ease;transform:translateY(3px)}.ring.active{opacity:1;transform:translateY(0)}
.halo{position:absolute;left:50%;top:57%;width:48%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) scale(.92);opacity:0;transition:opacity 1s,transform 1.4s;filter:blur(3px)}
.halo-core{width:100%;height:100%;border:7px solid #fff;border-radius:50%;box-shadow:0 0 9px 3px #fff,0 0 25px 9px #ffffff90,0 0 50px 16px #ffffff40,inset 0 0 18px 5px #ffffff75}
.dark .halo{opacity:1;transform:translate(-50%,-50%) scale(1)}
.caption{position:absolute;top:calc(50% + var(--unit)*.123);width:100%;text-align:center;padding:0 20px}.caption h1{font-size:clamp(21px,calc(var(--unit)*.0222),28px);line-height:1.25;margin:0 0 8px;font-weight:500;letter-spacing:-.6px}.caption p{margin:0;line-height:1.5;font-size:clamp(13px,calc(var(--unit)*.0157),18px)}#description{color:var(--muted);margin-left:9px}.dark #description{color:inherit}.caption.changed{animation:caption-in .3s ease}@keyframes caption-in{from{opacity:.35;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.control{position:absolute;width:calc(var(--unit)*.465);left:50%;transform:translateX(-50%);top:calc(50% + var(--unit)*.27);height:70px;touch-action:pan-y}.ruler{height:29px;display:flex;align-items:flex-end;justify-content:space-between;pointer-events:none}.tick{width:1px;background:#c6c6c6;height:5px;will-change:height;transition:background .6s}.tick.current{background:currentColor}.dark .tick{background:#555}.dark .tick.current{background:#fff}
input[type=range]{position:absolute;left:-12px;top:-14px;width:calc(100% + 24px);height:57px;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}.control:has(input:focus-visible){outline:1px solid #aaa;outline-offset:12px;border-radius:2px}.endpoints{display:flex;justify-content:space-between;margin-top:9px;font-size:clamp(11px,calc(var(--unit)*.013),14px);color:var(--muted)}.endpoints .selected{color:inherit}#rightLabel.selected{color:#171717}.dark #rightLabel.selected{color:#fff}.hint{display:block;text-align:center;color:#aaa;font-size:11px;margin-top:22px;letter-spacing:1px;transition:opacity .4s}.interacted .hint{opacity:0}
.promise{position:absolute;top:calc(50% + var(--unit)*.347);width:100%;text-align:center;color:#999;font-size:clamp(16px,calc(var(--unit)*.02),22px);letter-spacing:3px;opacity:0;transition:opacity 1.2s 1s}.dark .promise{opacity:1}
footer{position:absolute;bottom:5.2%;width:100%;text-align:center;color:#aaa;letter-spacing:1.2px;font-size:clamp(16px,calc(var(--unit)*.0185),21px);font-weight:300}.dark footer{color:#777}
@media(max-aspect-ratio:3/4){.artwork{width:88vw;height:78vw;top:calc(43% - 50vw)}.caption{top:calc(43% + 31vw)}.control{width:78vw;top:calc(43% + 64vw)}.promise{top:calc(43% + 83vw)}.halo-core{border-width:5px}footer{bottom:4%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}