.loop-sequence{color:#fff;background:#101010;height:min(680px,53.125vw);min-height:540px;position:relative;overflow:hidden}.loop-sequence__scene{isolation:isolate;width:100%;max-width:1920px;height:100%;margin:0 auto;position:relative}.loop-sequence__image,.loop-sequence__image picture,.loop-sequence__image img,.loop-sequence__image canvas{width:100%;height:100%;position:absolute;inset:0}.loop-sequence__image img{object-fit:cover;object-position:center;-webkit-user-select:none;user-select:none}.loop-sequence__image canvas{opacity:0;pointer-events:none}.loop-sequence__glow{z-index:1;mix-blend-mode:screen;pointer-events:none;background:radial-gradient(at 50% 48%,#b586d652 0%,#8a59ad30 31%,#0000 69%);width:min(82%,1050px);height:66%;position:absolute;top:42%;left:50%;transform:translate(-50%)}.loop-sequence__shade{z-index:2;pointer-events:none;background:linear-gradient(#101010 0%,#101010f5 7%,#101010c4 23%,#0000 42% 60%,#101010b8 77%,#101010 94%);position:absolute;inset:0}.loop-sequence__selection{z-index:4;pointer-events:none;justify-content:space-between;align-items:flex-start;gap:56px;width:min(100% - 80px,1160px);display:flex;position:absolute;top:14px;left:50%;transform:translate(-50%)}.loop-sequence__details{max-width:680px}.loop-sequence__details h2{letter-spacing:-.035em;text-wrap:balance;margin:0 0 12px;font-size:clamp(48px,4.5vw,68px);font-style:italic;font-weight:900;line-height:.96}.loop-sequence__details p{color:#f6f3f8;text-wrap:pretty;max-width:670px;margin:0;font-size:clamp(16px,1.35vw,20px);font-weight:400;line-height:1.3}.loop-sequence__stats{flex:0 0 285px;gap:16px;padding-top:3px;display:grid}.loop-sequence__stat{gap:6px;display:grid}.loop-sequence__stat-label{font-size:13px;font-weight:850;line-height:1.15}.loop-sequence__stat-track{border-radius:100px;width:100%;height:24px;display:block;position:relative}.loop-sequence__stat-track--acidity{background:linear-gradient(90deg,#fff 0%,#ffc834 42%,#b1f300 100%)}.loop-sequence__stat-track--sweetness{background:linear-gradient(90deg,#fff 0%,#ff5b6b 27%,#cc42c9 72%,#9825f0 100%)}.loop-sequence__stat-track--coolness{background:linear-gradient(90deg,#fff 0%,#85d9fa 30%,#3d7cf7 66%,#471de5 100%)}.loop-sequence__stat-marker{background:#ffffff30;border:4px solid #fff;border-radius:50%;width:22px;height:22px;transition:left .72s cubic-bezier(.22,.72,.28,1),box-shadow .3s,background-color .3s;position:absolute;top:50%;transform:translate(-50%,-50%);box-shadow:0 1px 5px #0008}.loop-sequence__details,.loop-sequence__stats{animation:.3s cubic-bezier(.16,1,.3,1) both loop-selection-in}@keyframes loop-selection-in{0%{opacity:.6;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.loop-sequence__drag-area{z-index:3;cursor:grab;touch-action:pan-y;position:absolute;inset:31% 0 16%}.loop-sequence__drag-area.is-dragging{cursor:grabbing}.loop-sequence__drag-area:focus-visible{outline-offset:-3px;outline:2px solid #b686f0}.loop-sequence__controls{z-index:5;width:min(100% - 32px,480px);margin:0;position:absolute;bottom:35px;left:50%;transform:translate(-50%)}.loop-sequence__navigator{justify-content:center;align-items:center;gap:11px;width:100%;display:flex}.loop-sequence__direction{color:#fff;-webkit-backdrop-filter:blur(14px)saturate(135%);cursor:pointer;background:linear-gradient(135deg,#fff3,#955ec21f);border:1px solid #ffffff4d;border-radius:50%;flex:0 0 38px;place-items:center;width:38px;height:38px;padding:0;transition:background .25s,border-color .25s,transform .25s;display:grid;box-shadow:inset 0 1px #ffffff3d,0 7px 20px #00000038}.loop-sequence__direction:hover{background:#b979f44d;border-color:#ffffffa6;transform:scale(1.05)}.loop-sequence__direction:focus-visible{outline-offset:3px;outline:2px solid #fff}.loop-sequence__stops{flex:0 auto;justify-content:center;gap:5px;min-width:0;transition:opacity .2s;display:flex}.loop-sequence__stops[data-loading=true]{opacity:.6}.loop-sequence__stops button{cursor:pointer;background:0 0;border:0;border-radius:50%;flex:0 0 25px;place-items:center;width:25px;height:36px;padding:0;display:grid}.loop-sequence__stops button span{background:#ffffffb0;border-radius:50%;width:8px;height:8px;transition:background .2s,transform .2s,box-shadow .2s}.loop-sequence__stops button:hover span,.loop-sequence__stops button.is-active span{background:#c590ff;transform:scale(1.4);box-shadow:0 0 9px #b678f4b0}.loop-sequence__stops button:focus-visible{outline-offset:2px;outline:2px solid #fff}@media (max-width:900px){.loop-sequence{min-height:520px}.loop-sequence__selection{gap:24px;width:calc(100% - 52px);top:18px}.loop-sequence__details{max-width:52%}.loop-sequence__stats{flex-basis:230px}}@media (max-width:640px){.loop-sequence{height:min(650px,92svh);min-height:500px}.loop-sequence__image img{object-position:center 52%}.loop-sequence__glow{width:120%;height:50%;top:48%}.loop-sequence__shade{background:linear-gradient(#101010 0%,#101010ef 13%,#1010107a 30%,#0000 44% 57%,#101010d1 78%,#101010 94%)}.loop-sequence__selection{width:calc(100% - 42px);display:block;top:10px}.loop-sequence__details{max-width:100%}.loop-sequence__details h2{margin-bottom:7px;font-size:clamp(36px,10vw,50px)}.loop-sequence__details p{max-width:345px;font-size:13px;line-height:1.3}.loop-sequence__stats{gap:10px;margin-top:15px;padding:0;display:flex}.loop-sequence__stat{flex:1 1 0;gap:5px;min-width:0}.loop-sequence__stat-label{font-size:10px}.loop-sequence__stat-track{height:11px}.loop-sequence__stat-marker{border-width:2px;width:13px;height:13px}.loop-sequence__drag-area{inset:30% 0 16%}.loop-sequence__controls{width:calc(100% - 24px);bottom:27px}.loop-sequence__navigator{gap:6px}.loop-sequence__direction{flex-basis:32px;width:32px;height:32px}.loop-sequence__stops{flex:1 1 0;gap:0}.loop-sequence__stops button{flex:1 1 0;width:auto;min-width:0;height:36px}}@media (prefers-reduced-motion:reduce){.loop-sequence__stat-marker,.loop-sequence__stops button span{transition:none}.loop-sequence__details,.loop-sequence__stats{animation:none}}