@font-face{font-family:ZCoolHappy;src:url(/assets/zcool-happy.ttf) format("truetype");font-display:swap}:root{--screen-ratio: .4617;--bgm-frame-width: min(100vw, 520px, calc(100svh * var(--screen-ratio)))}*{box-sizing:border-box}html,body,#app{width:100%;min-height:100%;margin:0;overflow-x:hidden}body{background:#fdfaf1;color:#17212b;font-family:ZCoolHappy,Microsoft YaHei,sans-serif}button{font:inherit}@keyframes start-sheen{0%{opacity:0;transform:translate(-130%) skew(-18deg)}18%{opacity:.85}to{opacity:0;transform:translate(130%) skew(-18deg)}}@keyframes actions-in{0%{opacity:0;transform:translateY(34px) scale(.94)}70%{opacity:1;transform:translateY(-5px) scale(1.015)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes start-pulse{0%,to{transform:scale(1);background:#0f65a814;box-shadow:0 0 #0f65a800}50%{transform:scale(1.025);background:#0f65a82e;box-shadow:0 16px 34px #0f65a838}}@keyframes hotspot-pop{0%{opacity:0;transform:scale(.92)}45%{opacity:1;transform:scale(1.035)}to{opacity:.18;transform:scale(1)}}@keyframes card-loading-pop{0%{opacity:0;transform:translateY(18px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes dot-pulse{0%,80%,to{opacity:.35;transform:translateY(0)}40%{opacity:1;transform:translateY(-5px)}}@keyframes sparkle-drift{0%{opacity:0;transform:translate3d(-24vw,28vh,0) rotate(0) scale(.65)}12%{opacity:.95}55%{opacity:.9;transform:translate3d(8vw,-54vh,0) rotate(135deg) scale(1.14)}to{opacity:0;transform:translate3d(38vw,-132vh,0) rotate(260deg) scale(.72)}}@keyframes sparkle-twinkle{0%,to{filter:drop-shadow(0 0 4px rgba(255,231,166,.55))}50%{filter:drop-shadow(0 0 12px rgba(255,203,113,.92))}}@keyframes bgm-mark-spin{to{transform:rotate(360deg)}}@keyframes bgm-orbit-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes bgm-playing-pulse{0%,to{box-shadow:0 8px 22px #0f172a24,0 0 #fff9e800}50%{box-shadow:0 8px 22px #0f172a24,0 0 0 8px #fff9e82e}}@keyframes bgm-note-float{0%{opacity:0;transform:translate(-50%,-50%) translateZ(0) rotate(-8deg) scale(.72)}18%{opacity:1}70%{opacity:.9}to{opacity:0;transform:translate(-50%,-50%) translate3d(var(--note-x),-52px,0) rotate(16deg) scale(1.18)}}.sparkle-field{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;overflow:hidden;pointer-events:none}.sparkle{--size: 18px;--left: 50vw;--delay: 0s;--duration: 8.2s;--tint: #ffe9a8;position:absolute;left:var(--left);bottom:-4vh;width:var(--size);height:var(--size);opacity:0;animation:sparkle-drift var(--duration) linear var(--delay) infinite}.sparkle:before,.sparkle:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;background:var(--tint);border-radius:999px;animation:sparkle-twinkle 1.6s ease-in-out var(--delay) infinite}.route-page{width:100%}.route-scroll-enter-active,.route-scroll-leave-active{position:fixed!important;top:0;right:0;bottom:0;left:0;width:100%;min-height:100vh;overflow-x:hidden;overflow-y:auto;background:var(--stage-bg, #fdfaf1);-webkit-overflow-scrolling:touch;will-change:transform,opacity;transition:transform .96s cubic-bezier(.2,.68,.18,1),opacity .96s ease}.route-scroll-enter-active{z-index:20}.route-scroll-leave-active{z-index:19;pointer-events:none}.route-scroll-enter-from{opacity:.96;transform:translate3d(0,92%,0) scale(1.012)}.route-scroll-enter-to,.route-scroll-leave-from{opacity:1;transform:translateZ(0) scale(1)}.route-scroll-leave-to{opacity:.92;transform:translate3d(0,-86%,0) scale(.985)}.sparkle:before{width:100%;height:24%}.sparkle:after{width:24%;height:100%}.sparkle-1{--left: 6vw;--size: 18px;--delay: -.2s;--duration: 8.4s;--tint: #fff2bd}.sparkle-2{--left: 16vw;--size: 12px;--delay: -1.8s;--duration: 9.2s;--tint: #ffd4dc}.sparkle-3{--left: 27vw;--size: 22px;--delay: -3.1s;--duration: 7.8s;--tint: #ffe29a}.sparkle-4{--left: 38vw;--size: 14px;--delay: -4.4s;--duration: 9.6s;--tint: #fff7df}.sparkle-5{--left: 48vw;--size: 20px;--delay: -2.4s;--duration: 8.8s;--tint: #ffd1aa}.sparkle-6{--left: 57vw;--size: 11px;--delay: -5.2s;--duration: 9.8s;--tint: #fff0b8}.sparkle-7{--left: 68vw;--size: 24px;--delay: -.9s;--duration: 8.1s;--tint: #ffd8e6}.sparkle-8{--left: 77vw;--size: 15px;--delay: -3.8s;--duration: 9.4s;--tint: #fff5cc}.sparkle-9{--left: 88vw;--size: 19px;--delay: -1.2s;--duration: 8.5s;--tint: #ffd9b8}.sparkle-10{--left: 96vw;--size: 13px;--delay: -4.9s;--duration: 9s;--tint: #fff0a6}.sparkle-11{--left: 3vw;--size: 10px;--delay: -6.4s;--duration: 10.4s;--tint: #fff8e8}.sparkle-12{--left: 23vw;--size: 16px;--delay: -5.8s;--duration: 10.1s;--tint: #ffd5c7}.sparkle-13{--left: 35vw;--size: 9px;--delay: -.6s;--duration: 7.6s;--tint: #ffe6ad}.sparkle-14{--left: 61vw;--size: 17px;--delay: -2.9s;--duration: 9.3s;--tint: #fff4ca}.sparkle-15{--left: 72vw;--size: 10px;--delay: -4.1s;--duration: 8s;--tint: #ffdce8}.sparkle-16{--left: 84vw;--size: 21px;--delay: -6.1s;--duration: 10.2s;--tint: #ffe6a3}.sparkle-17{--left: 12vw;--size: 23px;--delay: -3.4s;--duration: 10.6s;--tint: #fff1cf}.sparkle-18{--left: 53vw;--size: 13px;--delay: -6.8s;--duration: 9.9s;--tint: #ffd2bf}.bgm-toggle{position:fixed;top:max(12px,env(safe-area-inset-top));right:max(12px,calc((100vw - var(--bgm-frame-width)) / 2 + 8px));z-index:10001;width:36px;height:36px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;color:#1c4f77;background:#fff9e8e0;box-shadow:0 8px 22px #0f172a24;cursor:pointer;-webkit-tap-highlight-color:transparent;overflow:visible;transition:transform .16s ease,background-color .16s ease,box-shadow .16s ease}.bgm-toggle.is-playing{color:#fff;background:#0f65a8db;animation:bgm-playing-pulse 1.8s ease-in-out infinite}.bgm-toggle.is-blocked{background:#ffd84ef0}.bgm-toggle:active{transform:scale(.96);box-shadow:0 5px 14px #0f172a1f}.bgm-orbit{position:absolute;left:50%;top:50%;width:28px;height:28px;border:2px solid rgba(255,249,232,.7);border-left-color:#ffd84ef2;border-bottom-color:transparent;border-radius:999px;opacity:0;pointer-events:none;transform:translate(-50%,-50%)}.bgm-toggle.is-playing .bgm-orbit{opacity:1;animation:bgm-orbit-spin 1.55s linear infinite}.bgm-toggle-mark{position:relative;z-index:2;display:inline-block;font-size:19px;line-height:1;transform-origin:50% 50%}.bgm-toggle.is-playing .bgm-toggle-mark{animation:bgm-mark-spin 1.9s linear infinite}.bgm-note{--note-x: -12px;position:absolute;left:50%;top:45%;z-index:3;color:#fff9e8;font-size:14px;line-height:1;opacity:0;pointer-events:none;text-shadow:0 2px 8px rgba(15,101,168,.3),0 0 10px rgba(255,216,78,.42);transform:translate(-50%,-50%)}.bgm-toggle.is-playing .bgm-note{animation:bgm-note-float 2.1s ease-out infinite}.bgm-note-1{--note-x: -18px;animation-delay:0s}.bgm-note-2{--note-x: 4px;font-size:16px;animation-delay:.7s}.bgm-note-3{--note-x: 18px;animation-delay:1.4s}.mobile-stage{--stage-bg: #fdfaf1;--result-actions-space: 92px;width:100%;overflow-x:hidden;min-height:100vh;min-height:100svh;display:flex;justify-content:center;background:var(--stage-bg)}.home-stage{--stage-bg: #fdfaf1}.question-stage-1{--stage-bg: #b0def3}.question-stage-2{--stage-bg: #f2abce}.question-stage-3{--stage-bg: #56d0bb}.question-stage-4{--stage-bg: #dbc2e2}.question-stage-5{--stage-bg: #bad17a}.question-stage-6{--stage-bg: #c1eeff}.question-stage-7{--stage-bg: #fead78}.question-stage-8{--stage-bg: #709ad4}.question-stage-9{--stage-bg: #ffef91}.question-stage-10{--stage-bg: #5ad2bc}.result-stage-A{--stage-bg: #8bdda9}.result-stage-B{--stage-bg: #fead79}.result-stage-C{--stage-bg: #c6edfc}.result-stage-D{--stage-bg: #fddfee}.phone-frame{width:min(100vw,520px);flex:0 0 min(100vw,520px);min-height:100vh;position:relative;overflow:hidden;background:var(--stage-bg);box-shadow:none}.home-frame,.fit-frame{width:min(100vw,520px,calc(100svh * var(--screen-ratio)));flex-basis:min(100vw,520px,calc(100svh * var(--screen-ratio)));min-height:auto;overflow:visible}.question-frame{height:auto;min-height:auto;overflow:visible}.question-frame .screen-image{height:auto;object-fit:contain;object-position:top center}.screen-image{display:block;width:100%;height:auto;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.result-frame{width:min(100vw,520px,calc((100svh - var(--result-actions-space)) * var(--screen-ratio)));flex-basis:min(100vw,520px,calc((100svh - var(--result-actions-space)) * var(--screen-ratio)));min-height:auto;overflow:visible}.result-art-frame{width:100%;position:relative;overflow:visible;background:var(--stage-bg)}.start-hotspot{position:absolute;left:11%;right:11%;bottom:5%;height:9%;border:0;border-radius:999px;background:#0f65a814;color:transparent;cursor:pointer;outline:none;box-shadow:none;-webkit-tap-highlight-color:transparent;overflow:hidden;animation:start-pulse 1.55s ease-in-out infinite;transition:transform .14s ease,background-color .14s ease}.start-hotspot:before{content:"";position:absolute;top:-18%;bottom:-18%;left:0;width:40%;border-radius:999px;background:linear-gradient(90deg,#fff0,#fff9e894,#fff0);opacity:0;pointer-events:none}.start-hotspot:after{content:"";position:absolute;top:5%;right:5%;bottom:5%;left:5%;border-radius:999px;background:radial-gradient(circle,#fff9e866,#0f65a82e 56%,#fff0);opacity:0;pointer-events:none;transition:opacity .12s ease}.start-hotspot.is-pressed{transform:scale(.965);background:#0f65a838;animation:none}.start-hotspot.is-pressed:before{animation:start-sheen .42s ease-out both}.start-hotspot.is-pressed:after{opacity:1}.option-hotspot{position:absolute;border:0;border-radius:18px;background:#ffffff03;cursor:pointer;outline:none;box-shadow:none;-webkit-tap-highlight-color:transparent;transition:transform .12s ease,background-color .12s ease}.option-hotspot:after{content:"";position:absolute;top:6%;right:6%;bottom:6%;left:6%;border-radius:inherit;background:radial-gradient(circle,#ffd84e6b,#0f65a82e 54%,#fff0);opacity:0;pointer-events:none}.option-hotspot.is-debug{display:grid;place-items:center;border:2px solid rgba(255,59,48,.9);color:#fff;background:#ff3b3040;font-size:18px;font-weight:700}.option-hotspot:focus,.option-hotspot:active,.start-hotspot:focus,.start-hotspot:active{outline:none;box-shadow:none}.option-hotspot:active,.start-hotspot:active{transform:scale(.965);background:#ffd84e33}.option-hotspot.is-selected:after{animation:hotspot-pop .24s ease-out both}.loading-mask{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;color:#fff;background:#00000059;font-size:20px}.loading-card{min-width:210px;padding:18px 22px;display:grid;grid-template-columns:repeat(3,10px) 1fr;align-items:center;justify-content:center;gap:8px;color:#17212b;background:#ffffffeb;border-radius:16px;box-shadow:0 16px 40px #0f172a38;animation:card-loading-pop .26s ease-out both}.loading-card strong{margin-left:6px;font-size:15px;white-space:nowrap}.loading-dot{width:9px;height:9px;border-radius:999px;background:#0f65a8;animation:dot-pulse .9s ease-in-out infinite}.loading-dot:nth-child(2){animation-delay:.12s}.loading-dot:nth-child(3){animation-delay:.24s}.result-actions{width:100%;margin-top:-2px;padding:14px 18px max(18px,env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr 1fr;gap:12px;background:var(--stage-bg);border:0;position:relative;z-index:1;animation:actions-in .62s cubic-bezier(.16,.9,.22,1.18) .12s both}.result-frame.result-A .result-actions{background:#8bdda9}.result-frame.result-B .result-actions{background:#fead79}.result-frame.result-C .result-actions{background:#c6edfc}.result-frame.result-D .result-actions{background:#fddfee}.result-actions button{height:46px;border:0;border-radius:999px;color:#fff;background:#0f65a8;box-shadow:0 8px 18px #0f65a847;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,filter .16s ease}.result-actions button:last-child{color:#1a2633;background:#ffd84e}.result-actions button:active{transform:translateY(1px) scale(.985);box-shadow:0 5px 12px #0f65a833;filter:saturate(1.06)}.desktop-warning{display:none}@media (min-width: 720px){.mobile-stage{align-items:center;gap:28px;padding:32px}.phone-frame{width:390px;min-height:auto;max-height:calc(100vh - 64px);overflow:auto;border-radius:28px;box-shadow:0 12px 40px #0f172a1f}.question-frame{height:auto;min-height:auto}.question-frame .screen-image{height:auto;object-fit:contain}.desktop-warning{display:block;max-width:260px;padding:20px;border-radius:12px;background:#fff;box-shadow:0 10px 30px #0f172a1a;line-height:1.7}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:1ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:1ms!important}.sparkle-field .sparkle{animation-duration:var(--duration)!important;animation-iteration-count:infinite!important}.sparkle-field .sparkle:before,.sparkle-field .sparkle:after{animation-duration:1.6s!important;animation-iteration-count:infinite!important}.route-scroll-enter-active,.route-scroll-leave-active{transition-duration:.72s!important}.bgm-toggle.is-playing{animation:bgm-playing-pulse 1.8s ease-in-out infinite!important}.bgm-toggle.is-playing .bgm-orbit{animation:bgm-orbit-spin 1.55s linear infinite!important}.bgm-toggle.is-playing .bgm-toggle-mark{animation:bgm-mark-spin 1.9s linear infinite!important}.bgm-toggle.is-playing .bgm-note{display:block!important;animation:bgm-note-float 2.1s ease-out infinite!important}}