*,*:before,*:after{box-sizing:border-box}html,body,#root{margin:0;height:100%}body{font-family:Helvetica Neue,Helvetica,Arial,sans-serif;background:#cbc1b6;color:#2c2a27;overflow:hidden}button{font:inherit}.stage{position:fixed;inset:0;overflow:hidden;background:#cbc1b6}.bg-loop{position:absolute;background:#cbc1b6 url(/fuzzy-loop-poster.jpg) center / cover no-repeat;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}.bg-veil{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 60% at 50% 45%,rgba(240,232,222,.08) 0%,transparent 70%),linear-gradient(180deg,#ebe4dc00 55%,#e1d6ca6b)}.console{--orb: min(640px, 92vw, calc(100svh - 270px) );position:relative;z-index:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,2.4svh,26px);padding:max(16px,env(safe-area-inset-top,0px)) 16px max(14px,env(safe-area-inset-bottom,0px))}.orb-wrap{position:relative;flex:none;width:var(--orb);display:flex;flex-direction:column;align-items:center}.orb{position:relative;width:var(--orb);aspect-ratio:1;border-radius:50%;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 40% 30%,#2b2b33,#17171d 30%,#0a0a0e 58%,#030304 82%,#000);box-shadow:inset 0 -10px 30px #ffffff0d,inset 0 0 0 1px #ffffff0a;animation:float 9s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-7px)}}.orb-face{position:absolute;left:12%;top:21.5%;width:76%;height:57%;border-radius:17%/22%;overflow:hidden;background:#050506;box-shadow:0 0 0 1px #ffffff06,0 0 26px 8px #000000b3;z-index:1}.screen-media.yt-frame{inset:50% auto auto 0;height:auto;aspect-ratio:16 / 9;translate:0 -50%;border-radius:9%/14%}.orb-face .screen-media{transform:scale(1.02);filter:contrast(1.22) saturate(.7) sepia(.22) brightness(.92) hue-rotate(-12deg) blur(.25px)}.crt-scanlines,.crt-vignette{position:absolute;inset:0;pointer-events:none}.crt-scanlines{z-index:2;background:repeating-linear-gradient(to bottom,#fff8dc0d 0px 1px,#0000004d 1px 3px);opacity:.55;mix-blend-mode:multiply;animation:crt-flicker 4.8s steps(2,end) infinite}.crt-vignette{z-index:3;background:radial-gradient(ellipse 60% 55% at 50% 42%,rgba(170,210,130,.12) 0%,transparent 70%),radial-gradient(ellipse 72% 74% at 50% 50%,transparent 52%,rgba(6,5,2,.5) 80%,rgba(0,0,0,.9) 100%);box-shadow:inset 0 0 28px 6px #000000bf,inset 0 0 4px 1px #000000e6}.orb-face:after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;background:radial-gradient(ellipse 85% 55% at 42% 2%,rgba(255,255,255,.11) 0%,rgba(255,255,255,.03) 55%,transparent 75%),radial-gradient(ellipse 30% 70% at 2% 50%,rgba(255,255,255,.05) 0%,transparent 70%)}@keyframes crt-flicker{0%,87%,to{opacity:.55}90%{opacity:.42}93%{opacity:.58}}.orb-glass{position:absolute;inset:0;z-index:2;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 60% 19.5%,rgba(255,255,255,.95) 0,rgba(255,255,255,.75) .9%,rgba(255,255,255,.18) 2.2%,transparent 3.6%),radial-gradient(ellipse 14% 8% at 59% 20%,rgba(255,255,255,.16) 0%,transparent 100%),radial-gradient(ellipse 42% 18% at 46% 16%,rgba(255,255,255,.1) 0%,transparent 100%),radial-gradient(ellipse 6% 28% at 12.5% 44%,rgba(255,255,255,.2) 0%,transparent 100%),radial-gradient(ellipse 4% 16% at 19% 30%,rgba(255,255,255,.08) 0%,transparent 100%),radial-gradient(ellipse 34% 6% at 50% 24.5%,rgba(255,255,255,.07) 0%,transparent 100%),radial-gradient(ellipse 46% 14% at 50% 97%,rgba(255,245,230,.12) 0%,transparent 100%),radial-gradient(circle at 50% 50%,transparent 60%,rgba(0,0,0,.28) 78%,rgba(0,0,0,.6) 100%);box-shadow:inset 6px 8px 18px #ffffff0d,inset -14px -18px 40px #0000008c}.orb-shadow{width:58%;height:calc(var(--orb) * .06);margin-top:calc(var(--orb) * .03);border-radius:50%;background:radial-gradient(ellipse at center,rgba(40,26,14,.42) 0%,rgba(40,26,14,.18) 45%,transparent 72%);filter:blur(3px);animation:float-shadow 9s ease-in-out infinite}@keyframes float-shadow{0%,to{transform:scaleX(1);opacity:1}50%{transform:scaleX(.9);opacity:.75}}.screen-media{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}.orb-flow{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;border-radius:50%;background:#0a0a2a;animation:flow-in .7s ease both}@keyframes flow-in{0%{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}.screen-image{object-fit:contain;background:#0d0c0b;animation:caption-fade-in .4s ease both}.glyph-row{display:flex;align-items:center;justify-content:center;gap:clamp(4px,1.6vw,18px);flex:none}.glyph-btn{--size: clamp(40px, 9vw, 60px);position:relative;width:var(--size);height:var(--size);padding:0;border:0;border-radius:50%;background:transparent;color:#171513;cursor:pointer;display:grid;place-items:center;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .18s ease,filter .25s ease,color .25s ease;filter:drop-shadow(0 1px 0 rgba(255,250,240,.45))}.glyph-ink{width:100%;height:100%;background-color:currentColor;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;pointer-events:none}.glyph-btn:hover:not(:disabled){transform:translateY(-2px)}.glyph-btn:active:not(:disabled){transform:translateY(0) scale(.95)}.glyph-btn:disabled{cursor:default;opacity:.32}.glyph-btn:focus{outline:none}.glyph-btn:focus-visible{outline:2px solid rgba(23,21,19,.55);outline-offset:4px}.glyph-ink{position:relative;z-index:1}.glyph-btn.is-on{filter:drop-shadow(0 0 1px rgba(255,240,170,1)) drop-shadow(0 0 3px rgba(255,222,110,1)) drop-shadow(0 2px 6px rgba(246,200,70,.95)) drop-shadow(0 4px 12px rgba(224,168,28,.7))}.shuffle-btn.is-on{color:#171513;filter:drop-shadow(0 1px 0 rgba(255,250,240,.45))}.shuffle-btn.is-flashing,.shuffle-btn.is-flashing.is-on{color:#c4281c;filter:drop-shadow(0 0 3px rgba(200,45,35,.6)) drop-shadow(0 0 10px rgba(200,45,35,.35))}.gold-tooth{width:64%;height:64%;object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none;filter:saturate(.85) brightness(.92) drop-shadow(0 1px 1.5px rgba(40,30,10,.35));transition:filter .25s ease,transform .25s ease}.gold-btn,.gold-btn.is-on{filter:none}.gold-btn.is-on .gold-tooth{transform:scale(1.06);filter:saturate(1.1) brightness(1.08) drop-shadow(0 0 3px rgba(255,220,90,.9)) drop-shadow(0 0 10px rgba(232,176,28,.6))}.nudge-wrap,.slide,.slide-inner{position:absolute;inset:0}.slide-inner{transition:transform .28s cubic-bezier(.2,.8,.2,1)}.slide.enter-right{animation:slide-from-right .42s cubic-bezier(.2,.8,.2,1) both}.slide.enter-left{animation:slide-from-left .42s cubic-bezier(.2,.8,.2,1) both}.slide.enter-down{animation:slide-from-below .42s cubic-bezier(.2,.8,.2,1) both}.slide.enter-up{animation:slide-from-above .42s cubic-bezier(.2,.8,.2,1) both}.slide.enter-fade{animation:caption-fade-in .35s ease both}@keyframes slide-from-right{0%{transform:translate(28%);opacity:0}to{transform:none;opacity:1}}@keyframes slide-from-left{0%{transform:translate(-28%);opacity:0}to{transform:none;opacity:1}}@keyframes slide-from-below{0%{transform:translateY(28%);opacity:0}to{transform:none;opacity:1}}@keyframes slide-from-above{0%{transform:translateY(-28%);opacity:0}to{transform:none;opacity:1}}.screen.nudge-left .nudge-wrap{animation:nudge-x-neg .36s ease}.screen.nudge-right .nudge-wrap{animation:nudge-x-pos .36s ease}.screen.nudge-up .nudge-wrap{animation:nudge-y-neg .36s ease}.screen.nudge-down .nudge-wrap{animation:nudge-y-pos .36s ease}@keyframes nudge-x-neg{40%{transform:translate(-14px)}}@keyframes nudge-x-pos{40%{transform:translate(14px)}}@keyframes nudge-y-neg{40%{transform:translateY(-12px)}}@keyframes nudge-y-pos{40%{transform:translateY(12px)}}.gesture-layer{position:absolute;top:0;left:0;right:0;z-index:2;touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none}.gesture-layer:active{cursor:grabbing}.gesture-layer.is-pass-through{pointer-events:none}.edge-hint{position:absolute;z-index:3;width:26px;height:26px;color:#ffffffeb;filter:drop-shadow(0 1px 2px rgba(0,0,0,.55));opacity:0;pointer-events:none;transition:opacity .3s ease}.edge-left{left:3.5%;top:50%;translate:0 -50%}.edge-right{right:3.5%;top:50%;translate:0 -50%}.edge-up{top:9%;left:50%;translate:-50% 0}.edge-down{bottom:9%;left:50%;translate:-50% 0}.screen:hover .edge-hint,.screen.hud-on .edge-hint{opacity:.85}.variant-dots{position:absolute;z-index:3;right:7.5%;top:50%;translate:0 -50%;display:flex;flex-direction:column;gap:6px;pointer-events:none}.variant-dots span{width:6px;height:6px;border-radius:50%;background:#ffffff73;box-shadow:0 0 2px #0009}.variant-dots span.is-on{background:#ffd75e}.screen:has(.variant-dots) .edge-left{left:3.5%}@media(hover:none){.edge-hint{opacity:.55}}.caption{width:min(880px,100%);min-height:2.9em;display:flex;align-items:center;justify-content:center;color:#26241f;font-size:clamp(14px,1.35vw,18px);line-height:1.42;letter-spacing:.01em;text-align:center;text-shadow:0 0 10px rgba(246,240,232,.9),0 0 2px rgba(246,240,232,.8);flex:none}.caption-track{position:relative;width:100%;overflow:hidden}.caption-line{margin:0;width:100%;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4}a.caption-line{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;text-decoration-color:#26241f73}.caption-line-out{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.caption-line-in.swipe-ff{animation:swipe-in-left .55s ease both}.caption-line-out.swipe-ff{animation:swipe-out-left .55s ease both}.caption-line-in.swipe-rew{animation:swipe-in-right .55s ease both}.caption-line-out.swipe-rew{animation:swipe-out-right .55s ease both}.caption-line-in.swipe-none{animation:caption-fade-in .4s ease both}.caption-line-out.swipe-none{animation:caption-fade-out .4s ease both}@keyframes swipe-in-left{0%{opacity:.15;transform:translate(100%)}to{opacity:1;transform:none}}@keyframes swipe-out-left{0%{opacity:1;transform:none}to{opacity:0;transform:translate(-100%)}}@keyframes swipe-in-right{0%{opacity:.15;transform:translate(-100%)}to{opacity:1;transform:none}}@keyframes swipe-out-right{0%{opacity:1;transform:none}to{opacity:0;transform:translate(100%)}}@keyframes caption-fade-in{0%{opacity:0}to{opacity:1}}@keyframes caption-fade-out{0%{opacity:1}to{opacity:0}}@media(max-aspect-ratio:1/1){.console{--orb: min(640px, calc(100vw - 24px) , calc(100svh - 300px) )}}@media(prefers-reduced-motion:reduce){.screen,.orb-shadow,.crt-scanlines{animation:none}.glyph-btn{transition:none}.slide{animation:none!important}}
