:root{--black:#eeeae2;--white:#20201d;--muted:rgba(32,32,29,.56);--line:rgba(32,32,29,.2);--accent:#65c7c0;--accent-soft:#f0a07d;--blob1-x:-8vw;--blob1-y:20vh;--blob2-x:52vw;--blob2-y:62vh;font-family:Arial,Helvetica,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--black);color:var(--white);transition:background .9s ease}body:before,body:after{content:"";position:fixed;z-index:-3;width:48vw;height:48vw;border-radius:50%;pointer-events:none;filter:blur(90px);opacity:.42;transition:background 1.1s ease,left 1.4s ease,top 1.4s ease;animation:blobDriftA 25s ease-in-out infinite alternate}body:before{background:var(--accent);left:var(--blob1-x);top:var(--blob1-y)}body:after{background:var(--accent-soft);left:var(--blob2-x);top:var(--blob2-y);animation-name:blobDriftB;animation-duration:31s}.machine{position:relative;isolation:isolate;min-height:100vh;display:flex;flex-direction:column;padding:29px 5vw 27px;overflow:hidden}.machine:before{content:"";position:absolute;z-index:-2;inset:0;background:radial-gradient(ellipse at 18% 30%,color-mix(in srgb,var(--accent) 42%,transparent),transparent 47%),radial-gradient(ellipse at 82% 68%,color-mix(in srgb,var(--accent-soft) 38%,transparent),transparent 48%);opacity:.9;transition:opacity .9s}.machine:after{content:"";position:absolute;z-index:-2;inset:0;background:linear-gradient(120deg,transparent 0 42%,rgba(255,255,255,.25) 50%,transparent 58%);animation:ambientSweep 18s ease-in-out infinite}.machine-top{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:10px;letter-spacing:.14em}.eyebrow{margin:0;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.16em}.status{display:flex;align-items:center;gap:8px}.status i{display:block;width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px color-mix(in srgb,var(--accent) 70%,transparent);animation:pulse 2.5s ease-in-out infinite}.display{position:relative;margin:auto 0;max-width:1080px;transform-origin:left center;transition:opacity .18s ease}.display.land{animation:land .9s cubic-bezier(.2,.9,.25,1)}.display.rolling{animation:rollHorizontal .1s linear infinite}.display h1{margin:21px 0 28px;color:var(--white);font-size:clamp(58px,11vw,170px);line-height:.83;letter-spacing:-.085em;max-width:1050px;text-wrap:balance}.display>p:not(.eyebrow):not(.note){max-width:820px;margin:0 0 17px;font-size:clamp(21px,2.8vw,34px);line-height:1.12;letter-spacing:-.035em}.display.rolling h1,.display.rolling>p:not(.eyebrow):not(.note),.display.rolling .note{filter:blur(10px);opacity:.34;transform:translateX(15px) scaleX(1.03);text-shadow:0 0 16px var(--accent)}.display.land h1,.display.land>p:not(.eyebrow):not(.note),.display.land .note{animation:focusIn .9s cubic-bezier(.2,.8,.25,1) both}.note{max-width:670px;margin:0;color:var(--muted);font-size:15px;line-height:1.45}.controls{display:flex;align-items:stretch;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:44px;background:rgba(255,255,255,.28);padding:8px;backdrop-filter:blur(12px);transition:border-color .35s,box-shadow .35s}.controls:focus-within{border-color:var(--accent);box-shadow:0 10px 32px color-mix(in srgb,var(--accent) 18%,transparent)}.mode-panel{display:flex;flex:1;flex-direction:column;justify-content:center;gap:8px;min-width:min(420px,48vw);padding:10px 17px 11px;cursor:pointer}.mode-panel select{appearance:none;width:100%;border:0;border-bottom:2px solid var(--accent);border-radius:0;background:transparent;color:var(--white);font:700 clamp(20px,2.2vw,30px)/1.1 Arial,Helvetica,sans-serif;letter-spacing:-.04em;padding:0 32px 7px 0;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--white) 50%),linear-gradient(135deg,var(--white) 50%,transparent 50%);background-position:calc(100% - 14px) 50%,calc(100% - 7px) 50%;background-size:7px 7px,7px 7px;background-repeat:no-repeat}.mode-panel select:disabled{opacity:.45;cursor:wait}.spin-button{position:relative;display:flex;align-items:center;justify-content:space-between;gap:18px;min-width:190px;min-height:72px;border:1px solid var(--accent);border-radius:38px;background:var(--accent);color:#20201d;padding:12px 17px 12px 22px;text-align:left;transition:background .35s,color .35s,transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .35s}.spin-button:before{content:"";position:absolute;inset:5px;border:1px solid rgba(32,32,29,.3);border-radius:32px;transition:inset .28s,transform .4s}.spin-button:after{content:"";position:absolute;inset:-7px;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);border-radius:50px;opacity:0;transform:scale(.92);transition:opacity .3s,transform .3s}.spin-button:hover{background:var(--accent-soft);transform:translateY(-5px) scale(1.025);box-shadow:0 14px 40px color-mix(in srgb,var(--accent) 40%,transparent)}.spin-button:hover:before{inset:8px;transform:rotate(3deg)}.spin-button:hover:after{opacity:1;transform:scale(1)}.spin-button:active{transform:translateY(-1px) scale(.97);box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 24%,transparent)}.spin-button:active:before{inset:11px}.spin-button:disabled{opacity:.65;cursor:wait}.spin-core{display:flex;flex-direction:column;gap:3px;position:relative}.spin-core b{font-size:17px;font-weight:700}.spin-core em{font-size:10px;font-style:normal;opacity:.58;letter-spacing:.02em}.spin-arrow{position:relative;display:grid;place-items:center;width:39px;height:39px;border:1px solid rgba(32,32,29,.38);border-radius:50%;font-size:20px;transition:transform .35s}.spin-button:hover .spin-arrow{transform:rotate(45deg) scale(1.08)}.status-panel{display:flex;align-items:center;min-width:205px;padding:0 16px;border-left:1px solid var(--line);color:var(--muted);font-size:10px;letter-spacing:.1em}.help{max-width:440px;margin:18px 0 0;color:var(--muted);font-size:11px;line-height:1.4}@keyframes land{0%{opacity:.2;transform:translateY(18px)}55%{opacity:.76;transform:translateY(-5px)}100%{opacity:1;transform:translateY(0)}}@keyframes focusIn{0%{filter:blur(12px);opacity:.15;transform:translateX(32px) scaleX(1.06)}65%{filter:blur(2px);opacity:.82}100%{filter:blur(0);opacity:1;transform:translateX(0) scaleX(1)}}@keyframes rollHorizontal{0%{transform:translateX(-12px);opacity:.52}50%{transform:translateX(12px);opacity:.82}100%{transform:translateX(-12px);opacity:.52}}@keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}}@keyframes ambientSweep{0%,100%{transform:translateX(-8%);opacity:.35}50%{transform:translateX(8%);opacity:.75}}@keyframes blobDriftA{to{transform:translate(4vw,-3vh) scale(1.12)}}@keyframes blobDriftB{to{transform:translate(-5vw,3vh) scale(1.08)}}body.spinning .machine:before{opacity:1}body.spinning .machine:after,body.spinning:before,body.spinning:after{animation-play-state:paused}body.spinning .status i{animation-duration:.35s;transform:scale(1.5)}body.spinning .spin-button{animation:buttonThrob .8s ease-in-out infinite}@keyframes buttonThrob{50%{transform:scale(1.035)}}@media(max-width:980px){.status-panel{min-width:180px;padding:0 10px}.mode-panel{min-width:300px}}@media(max-width:780px){.controls{align-items:stretch;flex-direction:column;border-radius:30px}.mode-panel{min-width:0}.status-panel{min-width:0;min-height:46px;border-left:0;border-top:1px solid var(--line);padding:0 17px}.spin-button{width:100%}}@media(max-width:650px){.machine{padding:22px 20px 20px}.display h1{font-size:clamp(54px,17vw,100px)}.help{max-width:320px}}
body.intro-active .machine{opacity:0;filter:blur(9px);transform:scale(1.025)}.machine{transition:opacity 1.1s ease,filter 1.1s ease,transform 1.1s cubic-bezier(.2,.8,.2,1)}.intro-screen{position:fixed;z-index:20;inset:0;display:grid;place-items:center;overflow:hidden;background:var(--black);opacity:0;pointer-events:auto;transition:opacity .9s ease}.intro-screen.show{opacity:1}.intro-screen.launch .intro-copy{animation:introCopyOut 1.1s cubic-bezier(.6,0,.8,.2) forwards}.intro-screen.exit{opacity:0;pointer-events:none}.intro-field{position:absolute;inset:0}.intro-copy{position:relative;z-index:2;color:var(--white);text-align:center;opacity:0;transform:translateY(18px);animation:introCopyIn 1.2s cubic-bezier(.2,.8,.25,1) .25s forwards}.intro-copy h1{margin:18px 0 20px;font-size:clamp(42px,8vw,104px);line-height:.9;letter-spacing:-.075em}.intro-copy h1 em{color:var(--accent);font-style:normal}.intro-copy>p:last-child{margin:0;color:var(--muted);font-size:clamp(15px,2vw,21px);line-height:1.25}.intro-blob{position:absolute;left:var(--x);top:var(--y);display:block;width:var(--s);height:var(--s);border-radius:50%;background:var(--accent);opacity:0;filter:blur(15px);animation:blobPop var(--d) ease-in-out var(--delay) infinite alternate}.intro-blob:nth-child(3n){background:var(--accent-soft)}.intro-blob:nth-child(4n){mix-blend-mode:multiply}.intro-screen.launch .intro-blob{animation:blobLaunch 1.4s cubic-bezier(.2,.8,.15,1) forwards}.intro-screen.launch .intro-blob:nth-child(odd){animation-delay:calc(var(--delay) / 3)}@keyframes introCopyIn{to{opacity:1;transform:translateY(0)}}@keyframes introCopyOut{to{opacity:0;transform:scale(1.08);filter:blur(5px)}}@keyframes blobPop{0%{opacity:0;transform:scale(.25) translate(0,0)}45%{opacity:.52}100%{opacity:.22;transform:scale(1.25) translate(4vw,-3vh)}}@keyframes blobLaunch{0%{opacity:.3;transform:scale(1)}100%{opacity:0;transform:scale(8) translate(0,0)}}
body.intro-pending .machine{opacity:0;filter:blur(9px);transform:scale(1.025)}body.intro-pending .intro-screen{opacity:1}.intro-blob{animation:blobFloat var(--d) ease-in-out var(--delay) infinite alternate}.intro-screen.launch .intro-blob{animation:blobLaunch 1.9s cubic-bezier(.15,.75,.1,1) forwards}.intro-screen.launch .intro-blob:nth-child(odd){animation-delay:calc(var(--delay) / 4)}@keyframes blobFloat{0%{opacity:.22;transform:translate(0,0) scale(.75) rotate(0deg)}50%{opacity:.62}100%{opacity:.32;transform:translate(2vw,-2vh) scale(1.45) rotate(var(--spin))}}@keyframes blobLaunch{0%{opacity:.42;transform:translate(0,0) scale(1) rotate(0);border-radius:50%}42%{opacity:.72;transform:translate(4vw,-2vh) scale(9,3) rotate(25deg);border-radius:50% 18% 62% 28%}100%{opacity:0;transform:translate(12vw,-3vh) scale(48,10) rotate(45deg);border-radius:20% 80% 35% 65%}}
.intro-blob{animation:none;opacity:0;filter:blur(1px)}.intro-screen.show-blobs .intro-blob{animation:blobFloat var(--d) ease-in-out var(--delay) infinite alternate}.intro-screen.launch .intro-blob{animation:blobLaunch 2.1s cubic-bezier(.15,.75,.1,1) forwards;filter:blur(2px)}.intro-screen.launch .intro-blob:nth-child(odd){animation-delay:calc(var(--delay) / 5)}
.intro-screen.text-out .intro-copy{animation:introCopyOut .8s cubic-bezier(.6,0,.8,.2) forwards}.intro-glyph{position:absolute;left:var(--x);top:var(--y);display:grid;place-items:center;width:var(--size);height:var(--size);font-family:Arial,sans-serif;font-size:var(--size);line-height:1;color:var(--accent);opacity:0;filter:blur(.2px);transform-origin:center;user-select:none}.intro-glyph:nth-child(3n){color:var(--accent-soft)}.intro-glyph:nth-child(4n){color:var(--white);opacity:.18}.intro-screen.show-glyphs .intro-glyph{animation:glyphFloat var(--speed) ease-in-out var(--delay) infinite alternate}.intro-screen.accelerate .intro-glyph{animation-name:glyphRush;animation-duration:calc(var(--speed) * .34);animation-delay:0ms}.intro-screen.accelerate .intro-glyph:nth-child(3n){filter:blur(2px)}@keyframes glyphFloat{0%{opacity:0;transform:translate(0,0) rotate(0deg) scale(.72)}25%{opacity:.42}100%{opacity:.7;transform:translate(2vw,-2vh) rotate(var(--rot)) scale(1.08)}}@keyframes glyphRush{0%{opacity:.48;transform:translate(0,0) rotate(0deg) scale(1)}50%{opacity:.72}100%{opacity:.12;transform:translate(10vw,-6vh) rotate(calc(var(--rot) * 3)) scale(2.7)}}.intro-screen.accelerate .intro-glyph:nth-child(2n){animation-direction:reverse}
.intro-glyph{transform-origin:center;text-shadow:0 0 0 transparent;will-change:opacity,transform,text-shadow}.intro-screen.accelerate .intro-glyph:nth-child(3n){filter:blur(1px)}@keyframes glyphFloat{0%{opacity:.12;transform:scale(.72);text-shadow:0 0 0 transparent}22%{opacity:.7;transform:scale(1.03);text-shadow:0 0 8px color-mix(in srgb,var(--accent) 70%,transparent)}48%{opacity:.28;transform:scale(.86);text-shadow:0 0 2px transparent}72%{opacity:.82;transform:scale(1.16);text-shadow:0 0 16px color-mix(in srgb,var(--accent-soft) 80%,transparent)}100%{opacity:.42;transform:scale(.94);text-shadow:0 0 5px color-mix(in srgb,var(--accent) 45%,transparent)}}@keyframes glyphRush{0%{opacity:.3;transform:scale(.9);text-shadow:0 0 4px color-mix(in srgb,var(--accent) 45%,transparent)}24%{opacity:.92;transform:scale(1.32);text-shadow:0 0 22px color-mix(in srgb,var(--accent) 90%,transparent)}52%{opacity:.2;transform:scale(.76);text-shadow:0 0 0 transparent}78%{opacity:.78;transform:scale(1.48);text-shadow:0 0 28px color-mix(in srgb,var(--accent-soft) 90%,transparent)}100%{opacity:.08;transform:scale(.7);text-shadow:0 0 0 transparent}}
.intro-glyph{font-style:normal}.intro-screen.text-out .intro-copy{animation:introCopyOut .9s cubic-bezier(.6,0,.8,.2) both}@keyframes introCopyOut{0%{opacity:1;transform:translateY(0);filter:blur(0)}100%{opacity:0;transform:translateY(-22px);filter:blur(3px)}}
.spin-button{min-height:86px;min-width:230px}.spin-core{align-items:flex-start}.spin-status{display:flex;align-items:center;gap:6px;margin-top:5px;font-size:9px;font-weight:400;letter-spacing:.01em;line-height:1;opacity:.68;white-space:nowrap}.spin-status i{display:block;width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 7px currentColor;transition:transform .3s,background .3s}.spin-status span{position:relative}.spin-status span:after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;opacity:.2;transform:scaleX(0);transform-origin:left;transition:transform .35s}.spin-button:hover .spin-status span:after{transform:scaleX(1)}body.spinning .spin-status{opacity:1}.spin-status i{animation:statusBreathe 2.5s ease-in-out infinite}body.spinning .spin-status i{animation-duration:.45s;transform:scale(1.45)}@keyframes statusBreathe{0%,100%{opacity:.45}50%{opacity:1}}@media(max-width:780px){.spin-button{min-height:86px}}