*{box-sizing:border-box}html,body{margin:0;width:100%;min-height:100%;font-family:system-ui,"Microsoft YaHei",sans-serif}body.home{background:radial-gradient(ellipse at 8% 5%,#f7fcff 0,transparent 52%),radial-gradient(ellipse at 100% 90%,#aed7e9 0,transparent 60%),#d9eef7;color:#254657;min-height:100svh;display:grid;place-items:center;padding:40px 20px}.home-panel{width:min(940px,100%)}.eyebrow{font-size:11px;letter-spacing:.24em;color:#658b9e;font-weight:700}h1{margin:12px 0 8px;font-size:clamp(32px,5vw,48px);letter-spacing:.03em}h1 span{font-size:.56em;font-weight:500;margin-left:20px;color:#587e91}.intro{color:#6e8d9d;font-size:15px;margin-bottom:28px}.modes{display:grid;grid-template-columns:1fr 1fr;gap:26px}.mode-card{display:block;touch-action:manipulation;cursor:pointer;user-select:none;-webkit-user-drag:none;background:#fffefb;border:2px solid #8ebdce;box-shadow:0 5px 0 #b3d5e3,0 12px 28px #50768b14;padding:11px;border-radius:19px;text-decoration:none;color:inherit;overflow:hidden;transition:box-shadow .2s,border-color .2s}.mode-card:hover{box-shadow:0 7px 0 #a8cfdf,0 18px 32px #50768b26}.mode-card:focus-visible{outline:3px solid #356c88;outline-offset:5px}.thumb{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:9px;background:#b0cbd6}.thumb img{display:block;pointer-events:none;user-select:none;-webkit-user-drag:none;width:100%;height:100%;object-fit:cover}.badge{position:absolute;top:12px;left:12px;background:#416f84df;color:white;padding:5px 8px;font-size:10px;letter-spacing:.12em;border-radius:5px}.badge.warm{background:#916b50df}.card-copy{padding:8px 8px 4px}h2{font-size:24px;margin:12px 0 7px}h2 span{float:right;color:#719eb1;font-weight:400}.card-copy p{color:#8399a3;font-size:13px;margin:0 0 22px}.card-bottom{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #edf1f2;padding-top:15px;font-size:12px;color:#8a9fa9}.card-bottom strong{color:#467e98;font-weight:600}.hint{display:flex;align-items:center;gap:14px;background:#f7fcff96;border:1px solid #fff9;border-radius:13px;margin-top:26px;padding:12px 20px;color:#6c8a99;font-size:13px;line-height:1.9}.hint p{margin:0}.hint b{color:#496f83;font-weight:600}.hint-icon{font-size:25px;color:#8db6c9}footer{text-align:center;font-size:11px;color:#7d9baa;margin-top:24px}.player{height:100svh;min-height:100svh;overflow:hidden;background:#07111b;color:#edf6fa;touch-action:none;overscroll-behavior:none}.player canvas{position:absolute;inset:0;width:100%;height:100%;display:block;outline:none}.loader{position:fixed;z-index:10;inset:0;background:radial-gradient(ellipse at 50% 40%,#243f53,#0a1826 75%);display:grid;place-items:center;text-align:center;padding:28px;transition:opacity .35s}.loader.hidden{opacity:0;pointer-events:none}.load-inner{max-width:440px}.load-inner h1{font-size:34px}.load-inner p{font-size:14px;line-height:1.8;color:#a4bfce}.load-inner .eyebrow{color:#91b9cc}.load-inner button,.failure a{display:inline-block;border:1px solid #8fbdce;border-radius:24px;background:#426e83;color:#fff;padding:13px 32px;font:inherit;text-decoration:none;cursor:pointer;margin-top:12px}.load-inner button:disabled{opacity:.55;cursor:default}progress{width:100%;height:7px;accent-color:#9bcfe1;border:0;display:block;margin:22px 0 12px}.load-note{font-size:12px!important}.utility{position:fixed;z-index:5;left:50%;transform:translateX(-50%);top:max(7px,env(safe-area-inset-top));display:flex;gap:7px;opacity:.55;transition:opacity .2s}.utility:hover{opacity:1}.utility a,.utility button{border:1px solid #ffffff40;background:#10273770;color:#f0f9fc;text-decoration:none;font:12px system-ui;line-height:28px;padding:0 13px;border-radius:20px;cursor:pointer;backdrop-filter:blur(6px)}.rotate{display:none;position:fixed;inset:0;z-index:20;background:#102737f5;place-items:center;text-align:center;padding:40px;line-height:2}.rotate strong{display:block;font-size:24px}.failure{white-space:pre-wrap}.hidden{display:none}.download-total{font-variant-numeric:tabular-nums}@media(max-width:650px){body.home{padding:28px 18px}.modes{grid-template-columns:1fr;gap:22px}h1 span{display:block;margin:5px 0 0}.hint{padding:12px 14px}.utility{opacity:.65}.utility a,.utility button{font-size:11px;padding:0 10px}}@media(orientation:portrait) and (pointer:coarse){.player .rotate{display:grid}}
.gear{position:fixed;z-index:40;right:max(12px,env(safe-area-inset-right));top:max(10px,env(safe-area-inset-top));width:42px;height:42px;border:1px solid #ffffff70;border-radius:50%;background:#10273766;color:#fff;font:27px system-ui;line-height:38px;padding:0;cursor:pointer;backdrop-filter:blur(5px)}.touch-mode .utility{display:none}.mobile-menu{position:fixed;z-index:45;right:max(12px,env(safe-area-inset-right));top:60px;width:192px;padding:8px;border:1px solid #ffffff45;border-radius:16px;background:#102737eb;box-shadow:0 10px 30px #0004;backdrop-filter:blur(10px)}.mobile-menu button{display:block;width:100%;min-height:40px;background:transparent;border:0;border-radius:9px;color:#eef8fd;font:14px system-ui;text-align:left;padding:9px 14px;cursor:pointer}.mobile-menu button:hover{background:#ffffff16}.mobile-menu button:disabled{opacity:.4;cursor:default}.mobile-menu p{font-size:11px;color:#a4bfce;padding:0 14px;margin:5px 0}.gear.hidden,.mobile-menu.hidden{display:none}
.player.playing .utility{display:none}

.mode-card .badge{pointer-events:none}.mode-card.is-opening{border-color:#467e98;box-shadow:0 5px 0 #8ebdce,0 0 0 3px #9bcfe140}