*{box-sizing:border-box}html{color-scheme:light}body{margin:0;min-height:100vh;min-height:100svh;display:grid;place-items:center;isolation:isolate;background:#f3f6fa;font:16px -apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI","PingFang SC",sans-serif;color:#202632}body:before,body:after{content:"";position:fixed;inset:-15%;pointer-events:none;z-index:-1}body:before{background:radial-gradient(ellipse at 27% 32%,#c4e2ff99,transparent 36%),radial-gradient(ellipse at 75% 65%,#dde8fbb3,transparent 37%);animation:ambient 18s ease-in-out infinite alternate}body:after{background:radial-gradient(ellipse at 60% 15%,#ffffffbb,transparent 40%),radial-gradient(ellipse at 32% 85%,#dceef380,transparent 36%)}.screen{position:relative;width:min(calc(100vw - 48px),960px,calc((100svh - 48px)*4/3));aspect-ratio:4/3;border:1px solid #ffffffdd;border-radius:32px;background:#ffffff62;backdrop-filter:blur(28px) saturate(135%);-webkit-backdrop-filter:blur(28px) saturate(135%);box-shadow:0 24px 70px #344c6614,0 3px 14px #344c6609,inset 0 1px 0 #fff;overflow:hidden;animation:arrive .6s cubic-bezier(.16,1,.3,1) backwards;transition:transform .38s cubic-bezier(.16,1,.3,1),box-shadow .38s,border-color .3s}.topline{position:absolute;top:0;left:30px;right:26px;height:68px;z-index:5;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.wordmark{font-size:16px;letter-spacing:-.4px;font-weight:650;color:#313949}.mode{display:flex;align-items:center;gap:7px;border:1px solid #ffffff99;border-radius:20px;background:#ffffff55;padding:6px 10px;font-size:12px;line-height:1;color:#68717f;transition:background .3s,color .3s}.mode i{height:5px;width:5px;border-radius:50%;background:#a4acb8;transition:background .3s,box-shadow .3s}.glass{position:absolute;inset:68px 16px 16px;border:1px solid #ffffff88;border-radius:22px;background:linear-gradient(150deg,#ffffff8a,#ffffff38);box-shadow:inset 0 1px 0 #fff9;overflow:hidden;transition:background .3s,border-color .3s}.screen.dragging{transform:translateY(-3px) scale(1.012);border-color:#80b9ff;box-shadow:0 26px 80px #468ff72a,0 0 0 4px #007aff0c}.screen.dragging .glass{background:#e6f1ffbb;border-color:#acd3ff}.screen.dragging .load-mark{transform:translateY(-4px) scale(1.08);box-shadow:0 12px 35px #007aff22}#pick{position:absolute;inset:68px 16px 16px;width:calc(100% - 32px);height:calc(100% - 84px);border:0;border-radius:22px;background:transparent;cursor:pointer;z-index:3;touch-action:manipulation;color:inherit;padding:28px;-webkit-tap-highlight-color:transparent}#pick:focus-visible{outline:2px solid #78afff;outline-offset:-5px}.pick-content{display:flex;flex-direction:column;align-items:center;gap:12px;transition:transform .35s cubic-bezier(.16,1,.3,1)}.load-mark{display:grid;place-items:center;width:76px;height:76px;margin-bottom:11px;border:1px solid #fffffff2;border-radius:24px;background:linear-gradient(145deg,#fff,#ffffff9c);color:#007aff;box-shadow:0 9px 26px #57749612,inset 0 1px 0 #fff;transition:transform .38s cubic-bezier(.16,1,.3,1),box-shadow .3s,background .3s}.load-mark svg{width:29px;height:29px}.pick-content strong{font-size:26px;line-height:1.4;font-weight:500;letter-spacing:-.6px;color:#313847}.pick-hint{font-size:14px;line-height:1.6;color:#68717f}#pick:hover .load-mark{transform:translateY(-4px) scale(1.045);box-shadow:0 15px 32px #5774961e}#pick:hover .pick-content{transform:translateY(-2px)}#pick:active .load-mark{transform:translateY(0) scale(.94);transition-duration:.12s}#pick:active .pick-content{transform:translateY(0)}.loading{position:absolute;inset:68px 16px 16px;z-index:2;display:grid;place-items:center;border-radius:22px;background:#ffffffa3;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.spinner{width:25px;height:25px;border:2px solid #ccd7e466;border-top-color:#007affaa;border-radius:50%;animation:spin .8s linear infinite}#message{position:absolute;inset:68px 16px 16px;z-index:4;margin:0;display:grid;place-items:center;text-align:center;border-radius:22px;padding:32px;background:#ffffffce;color:#68717f;font-size:14px;line-height:1.7;pointer-events:none}#player-host{position:absolute;inset:68px 16px 16px;border-radius:22px;overflow:hidden;background:#0c0f13;transform:translateZ(0)}#player-host iframe{border:0;width:100%;height:100%;display:block}.screen[data-state=ready] #player-host,.screen[data-state=playing] #player-host{animation:gameIn .38s cubic-bezier(.16,1,.3,1) both}.screen[data-state=playing] .mode{background:#f4fff4a6;color:#637d64}.screen[data-state=playing] .mode i{background:#34c759}.screen[data-state=loading] .mode i{background:#007aff;animation:pulse 1.2s ease-in-out infinite}.screen[data-state=error] .mode i{background:#ff9f0a}.screen[data-state=error] .pick-content{visibility:hidden}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.35}}@keyframes arrive{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes gameIn{from{opacity:0;transform:scale(.99)}to{opacity:1;transform:scale(1)}}@keyframes ambient{from{transform:translate3d(-1%,1%,0) scale(1)}to{transform:translate3d(2%,-2%,0) scale(1.03)}}@media(max-width:600px){.screen{width:min(calc(100vw - 24px),calc((100svh - 24px)*3/4));aspect-ratio:3/4;border-radius:28px}.topline{left:25px;right:20px;height:60px}.wordmark{font-size:15px}.glass,.loading,#message,#player-host{inset:60px 12px 12px;border-radius:20px}#pick{inset:60px 12px 12px;width:calc(100% - 24px);height:calc(100% - 72px);border-radius:20px}.load-mark{width:68px;height:68px;border-radius:22px}.pick-content strong{font-size:24px}.pick-hint{font-size:14px}}@media(prefers-reduced-motion:reduce){body:before,.screen,.spinner,.mode i,#player-host{animation:none!important}.screen,.glass,.mode,.load-mark,.pick-content{transition:none!important}.screen.dragging,#pick:hover .load-mark,#pick:hover .pick-content,#pick:active .load-mark{transform:none}}@media(prefers-reduced-transparency:reduce){.screen{background:#f8fafc;backdrop-filter:none;-webkit-backdrop-filter:none}.glass{background:#fff}.mode{background:#fff}}@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.screen{background:#f8fafcee}}

body:has(.screen[data-state=playing]):before{animation-play-state:paused}