:root{color-scheme:light;font-family:Tahoma,"Microsoft YaHei",sans-serif;background:#3a6ea5;color:#17243c;font-size:16px}*{box-sizing:border-box}body{margin:0;min-width:300px;background:radial-gradient(ellipse at 48% 30%,#548bc0 0%,#3a6ea5 60%,#2d5c8d 100%);min-height:100svh}button{font:inherit;cursor:pointer;color:inherit;touch-action:manipulation}button:disabled{cursor:wait;opacity:.5}button:focus-visible,a:focus-visible{outline:3px solid #f8cd48;outline-offset:2px}button:not(:disabled):active{transform:translateY(1px)}[hidden]{display:none!important}.desktop{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:24px 18px 18px}.window{width:min(900px,calc((100svh - 225px)*1.36364),100%);min-width:300px;background:#ece9d8;border:3px solid #0755d7;border-top:0;border-radius:9px 9px 2px 2px;box-shadow:0 16px 44px #102b5755,0 2px 5px #17345c88;overflow:hidden}.titlebar{height:36px;display:flex;align-items:center;gap:8px;padding:3px 5px 3px 10px;background:linear-gradient(#4797ff 0,#0761e4 13%,#0055df 60%,#0c63e9 87%,#0045c0 100%);color:#fff;user-select:none}.titlebar h1{font-size:16px;font-weight:700;line-height:1.2;margin:0;flex:1;text-shadow:1px 1px #063b8b}.ball-icon,.loading-ball{border-radius:50%;background:radial-gradient(circle at 32% 27%,#fff 0 10%,#d9ecf6 25%,#94a7bc 54%,#304963 82%);box-shadow:1px 2px 2px #00265d77}.ball-icon{width:20px;height:20px;flex-shrink:0}.window-button{height:25px;width:26px;border:1px solid #fff;border-radius:3px;color:white;background:linear-gradient(135deg,#82b5fa,#1760db 65%,#2d87f2);box-shadow:inset 0 0 2px 1px #c0ddff;font-size:19px;font-weight:700;line-height:20px;padding:0}.toolbar{display:flex;align-items:center;gap:2px;padding:5px 4px;border-bottom:1px solid #a9a695;min-height:39px;flex-wrap:wrap}.toolbar button{border:1px solid transparent;background:none;border-radius:2px;font-size:14px;padding:4px 8px;white-space:nowrap}.toolbar button:hover{border-color:#b9cbe4;background:#f7f6ef}.toolbar kbd{margin-left:3px;border:0;background:none;box-shadow:none;font-size:12px;color:#626b7a;padding:0}.screen{position:relative;background:#000;line-height:0;aspect-ratio:600/440;overflow:hidden}canvas{display:block;width:100%;height:100%;outline:none;touch-action:none}.loading,.pause-cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;line-height:1.5;color:white;background:#101523f2;padding:20px;text-align:center}.loading-ball{width:38px;height:38px}.loading p,.pause-cover p{margin:0;font-size:14px;color:#c5d4ea}.loading strong,.pause-cover strong{font-size:20px}.loading progress{width:min(260px,80%);height:10px;accent-color:#64abff}.loading button,.pause-cover button,.primary{border:1px solid #24549a;background:linear-gradient(#fff,#e0e8f2);border-radius:3px;box-shadow:inset 0 0 0 1px #fff;padding:9px 22px;color:#12315a;min-height:40px}.pause-cover{background:#111a2bcc;backdrop-filter:blur(3px)}.controls{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:10px;padding:12px;background:linear-gradient(#f7f5e8,#e7e3d1);border-top:1px solid white;user-select:none}.controls button{border:1px solid #9b9c91;border-radius:4px;background:linear-gradient(#fffefa,#dedfd6);box-shadow:inset 0 0 0 1px #fff,0 2px 0 #b2b1a8;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.paddle{padding:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}.paddle span{font-size:16px;font-weight:700}.controls button.held{background:linear-gradient(#c4d7ea,#e1ebf6);box-shadow:inset 1px 2px 4px #6b829b55;transform:translateY(2px)}kbd{font:12px Tahoma,sans-serif;display:inline-block;background:#f9f9f4;border:1px solid #b8bbb5;border-bottom-width:2px;border-radius:3px;padding:2px 5px;min-width:20px;text-align:center;color:#536175;line-height:1.2}.launch-group{display:flex;flex-direction:column;gap:7px}.nudge{padding:3px;font-size:13px}.nudge kbd{border:0;background:none}.launch{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:8px;row-gap:4px;padding:8px 5px;overflow:hidden}.launch span{font-size:14px}.launch i{position:absolute;bottom:0;left:0;width:100%;height:3px;background:#bdc6ce}.launch b{height:100%;width:0;display:block;background:#2a78e6}.statusbar{display:flex;justify-content:space-between;gap:8px;padding:4px 8px;font-size:12px;color:#646758;background:#ece9d8;border-top:1px solid #b2b2a8;min-height:24px}.statusbar span:last-child{letter-spacing:1px;color:#777b76}.hint{width:min(900px,100%);display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 22px;margin-top:16px;color:#e6eefb;font-size:13px;text-align:center}.hint p{margin:0;line-height:1.9}.hint p>span{margin:0 8px;opacity:.5}.hint kbd{background:#2d5b8e;color:#edf6ff;border-color:#7799c0}.hint button{font-size:12px;color:#d0def1;background:none;border:0;text-decoration:underline;text-underline-offset:3px;padding:5px}.window:fullscreen{width:100%;height:100%;border:0;border-radius:0;display:flex;flex-direction:column;background:#101523}.window:fullscreen .screen{flex:1;min-height:0;aspect-ratio:auto;display:flex;justify-content:center}.window:fullscreen canvas{width:auto;height:100%;max-width:100%;object-fit:contain}.window:fullscreen .controls{max-height:105px;flex-shrink:0}.window:fullscreen .statusbar{flex-shrink:0}dialog{width:min(530px,calc(100% - 28px));max-height:calc(100svh - 32px);padding:0;border:3px solid #0755d7;border-radius:7px 7px 2px 2px;background:#ece9d8;color:#243148;box-shadow:0 15px 60px #00183788}dialog::backdrop{background:#071a346b}.dialog-title{display:flex;align-items:center;gap:12px;padding:8px 9px;background:linear-gradient(#4893fd,#085adc);color:white}.dialog-title h2{font-size:16px;flex:1;margin:0}.dialog-title button{color:white;background:#dd6243;border:1px solid white;border-radius:3px;font-size:20px;padding:0;line-height:22px;width:24px;height:24px}.dialog-body{padding:18px 22px;font-size:15px;line-height:1.75}.dialog-body>p:first-child{margin-top:0}.dialog-body ol{padding-left:21px}.dialog-body li{padding-left:2px;margin:10px 0}.dialog-body a{color:#0755c4}.dialog-body h3{font-size:19px;margin:0 0 10px}.help-keys{border-top:1px solid #c6c4b6;font-size:14px}.primary{display:block;margin:18px auto 0;font-size:14px}.fine{font-size:12px;color:#596479}
@media(max-width:650px){.desktop{padding:12px 6px;justify-content:flex-start}.window{width:100%;min-width:0}.titlebar h1{font-size:14px}.titlebar{height:34px;padding-left:7px;gap:6px}.toolbar{gap:0;padding:4px 2px;justify-content:space-between;min-height:36px}.toolbar button{font-size:12px;padding:5px}.toolbar kbd{display:none}.controls{gap:7px;padding:9px 7px}.paddle{padding:12px 2px;gap:10px}.paddle span{font-size:15px}.launch span{font-size:12px}.launch{padding:8px 3px}.hint{margin-top:14px;gap:4px}.hint p{font-size:12px}.hint p>span{margin:0 3px}.statusbar{font-size:11px}.statusbar span:last-child{letter-spacing:.3px}.dialog-body{padding:14px 17px}.controls kbd{font-size:11px}}
@media(max-height:560px) and (orientation:landscape){.desktop{padding:5px}.window{width:min(100%,calc((100svh - 95px)*1.36364))}.hint,.statusbar{display:none}.controls{display:flex;position:fixed;inset:75px 8px 8px;justify-content:space-between;align-items:flex-end;pointer-events:none;background:transparent;border:0;padding:0}.controls button{pointer-events:auto;opacity:.9}.controls .paddle{width:94px;height:90px}.controls .launch-group{position:absolute;right:0;top:0;width:94px}.toolbar{min-height:31px;padding:1px}.titlebar{height:29px}.window:fullscreen .controls{display:flex;position:absolute;inset:12px;max-height:none}.window:fullscreen .screen{padding-bottom:0}.window:fullscreen .titlebar,.window:fullscreen .toolbar{display:none}}
