:root{color-scheme:dark;font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;color:#e8f0e7;background:#173c44;--pink:#f4a3be;--mint:#b4e6d4;font-synthesis:none}
*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}button,select{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}button{cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none}button:focus-visible,select:focus-visible{outline:3px solid #fff2bb;outline-offset:3px}button:disabled{cursor:default}svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}#app{height:100svh;height:100dvh;position:relative;background:radial-gradient(ellipse at 50% 44%,#356269,#204951 55%,#14323b);overflow:hidden}
#stage{position:absolute;inset:0 0 calc(116px + env(safe-area-inset-bottom,0px));isolation:isolate}canvas{display:block;width:100%;height:100%;outline:none;touch-action:none;cursor:grab}canvas:active{cursor:grabbing}.toolbar{position:absolute;top:max(12px,env(safe-area-inset-top,0px));right:max(14px,env(safe-area-inset-right,0px));display:flex;gap:8px;z-index:3}.icon-button{width:46px;height:46px;display:grid;place-items:center;border:1px solid #d8ede62b;background:#163c4480;border-radius:50%;backdrop-filter:blur(8px);padding:11px;box-shadow:0 3px 12px #082b3014}.icon-button svg{width:23px;height:23px;stroke-width:1.7}.icon-button:hover{background:#426b70b0}#sound[aria-pressed=true]{color:#e9efb2}#sound[aria-pressed=true] .mute-line{display:none}
.controls{position:absolute;bottom:calc(22px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);width:min(450px,calc(100% - 32px));display:grid;grid-template-columns:1fr 1fr;gap:16px;z-index:3}.axis-button{position:relative;display:flex;align-items:center;justify-content:center;gap:15px;height:88px;border:1px solid #ffe3ed;border-radius:28px;background:linear-gradient(160deg,#ffcede,#ec8eaf);color:#673247;box-shadow:inset 0 2px 1px #ffffff6b,0 6px 0 #a85c76,0 12px 26px #09252b70;transition:transform .08s,box-shadow .08s,filter .16s}.axis-button .number{font-size:45px;font-weight:800;line-height:1;letter-spacing:-2px;font-variant-numeric:tabular-nums}.axis-button svg{width:66px;height:54px;stroke-width:7}.axis-button:nth-child(2){background:linear-gradient(160deg,#dcf6e7,#9dd9c1);border-color:#e4ffe9;color:#295846;box-shadow:inset 0 2px 1px #ffffff6b,0 6px 0 #609b84,0 12px 26px #09252b70}.axis-button:disabled{filter:saturate(.35) brightness(.65);box-shadow:inset 0 2px 1px #ffffff30,0 4px 0 #385b59,0 8px 16px #09252b40}.axis-button.pressed{transform:translateY(5px);box-shadow:inset 0 2px 5px #743b4c35,0 1px 0 #a85c76}.axis-button:nth-child(2).pressed{box-shadow:inset 0 2px 5px #35665135,0 1px 0 #609b84}
#loading{position:absolute;inset:0;display:grid;place-content:center;background:#234d55;z-index:4}.spinner{width:32px;height:32px;border:3px solid #d6e4cf26;border-top-color:#d6e4cf;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}[hidden]{display:none!important}#error{position:absolute;inset:25% 8%;padding:24px;background:#163a44e8;text-align:center;z-index:5;border-radius:20px;display:grid;place-content:center;gap:20px}#error strong{font-size:16px}#error button{min-height:48px;border:0;border-radius:24px;background:var(--mint);color:#20494b;padding:8px 24px}
dialog{color:#e7efe2;background:#214b54;border:1px solid #91b4a86b;border-radius:26px;max-width:390px;width:calc(100% - 32px);max-height:calc(100dvh - 32px);overflow:auto;padding:26px;box-shadow:0 30px 90px #041820aa}dialog::backdrop{background:#092630ae;backdrop-filter:blur(5px)}dialog h1{font-size:21px;font-weight:650;margin:7px 0 28px;line-height:1.5;padding-right:45px}.close-dialog{position:absolute;right:12px;top:12px;background:none;border:0;box-shadow:none}dialog label{display:block;color:#b3ccc5;font-size:13px;margin:0 0 10px}select{width:100%;height:50px;border:1px solid #a1c5b854;border-radius:13px;background:#173d46;padding:0 12px}.settings-actions{display:grid;gap:12px;margin-top:24px}.settings-actions button{border:1px solid #b9dace42;background:#436a6b;border-radius:14px;min-height:50px}.settings-actions #reset{background:var(--mint);color:#244c46}.help-row{display:grid;grid-template-columns:67px 1fr;align-items:center;gap:12px;margin:20px 0}.help-row b{font-size:27px;letter-spacing:2px;color:#f7b6cc}.help-row:nth-of-type(2) b{color:#b4e6d4}.help-row p{font-size:14px;line-height:1.7;margin:0}.help-gestures{border-top:1px solid #b9dace26;padding-top:10px;margin-top:24px;color:#b5ccc5}.help-gestures p{font-size:13px;line-height:1.7;margin:8px 0}.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}
@media(min-width:800px) and (min-height:551px){#stage{inset:0 0 122px}.controls{bottom:26px}.toolbar{top:20px;right:24px}}
@media(max-width:350px){.controls{width:calc(100% - 24px);gap:12px;bottom:calc(18px + env(safe-area-inset-bottom,0px))}.axis-button{height:78px;border-radius:24px;gap:10px}.axis-button .number{font-size:39px}.axis-button svg{width:57px}#stage{bottom:calc(100px + env(safe-area-inset-bottom,0px))}.toolbar{gap:6px;right:12px}}
@media(orientation:landscape) and (max-height:550px){#stage{inset:0 174px 0 0}.toolbar{top:max(12px,env(safe-area-inset-top,0px));right:max(12px,env(safe-area-inset-right,0px));gap:6px}.controls{left:auto;right:max(12px,env(safe-area-inset-right,0px));bottom:max(24px,env(safe-area-inset-bottom,0px));width:150px;transform:none;grid-template-columns:1fr;gap:17px}.axis-button{height:85px;gap:10px;border-radius:25px}.axis-button .number{font-size:40px}.axis-button svg{width:60px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}.spinner{animation-duration:3s}}