:root{color-scheme:dark;--cream:#fff0d5;--pink:#efadcb;--blue:#92bdd4}*{box-sizing:border-box}body{margin:0;background:#16182b;color:var(--cream);font-family:ui-monospace,SFMono-Regular,Consolas,'Courier New',monospace;min-height:100svh;display:grid;place-items:center;background-image:radial-gradient(ellipse at 50% 36%,#30334e 0,transparent 65%)}main{width:min(920px,94vw);padding:24px 0}header{display:flex;align-items:center;gap:20px;margin:0 auto 26px;max-width:760px}.brand{font-weight:900;letter-spacing:2px;font-size:20px}.edition{font-size:12px;letter-spacing:2px;color:#a7a8c3}button{font:inherit;color:inherit;cursor:pointer;touch-action:none;border:1px solid #555875;background:#272a42;border-radius:5px;min-height:44px;padding:10px 16px}button:hover{background:#3e415f}button:focus-visible,canvas:focus-visible{outline:3px solid var(--blue);outline-offset:4px}#sound{margin-left:auto;font-size:12px;letter-spacing:1px}.machine{width:fit-content;margin:auto;border:2px solid #ded1ca;border-bottom:9px solid #b4a8ad;background:#e5dad3;border-radius:20px 20px 32px 20px;padding:17px 23px 10px;box-shadow:0 25px 70px #08091a88;color:#4b465a}.topline,.under{display:flex;justify-content:space-between;align-items:center;letter-spacing:2px;font-size:11px;font-weight:bold}.topline{margin-bottom:12px}.screen{background:#32314a;padding:14px;border-radius:9px;box-shadow:inset 0 3px 7px #17152680}canvas{display:block;width:768px;height:672px;image-rendering:pixelated;max-width:100%;outline:none;touch-action:none}.under{margin-top:10px}#pause{font-size:11px;min-height:30px;padding:5px 10px;color:#514b62;border-color:#b6a9b0;background:#d5c7c7}.touch{max-width:660px;display:flex;align-items:center;justify-content:space-between;gap:14px;margin:24px auto 18px}.touch>div{display:flex;gap:7px}.touch button{min-width:52px;border-bottom:4px solid #101221}.touch .round{color:#17182b;background:var(--pink);border-color:#af7f9e;font-weight:bold}#start{font-size:12px;letter-spacing:2px}footer{display:flex;gap:24px;justify-content:center;font-size:13px;color:#b4b6d0;flex-wrap:wrap}kbd{display:inline-block;font:inherit;border:1px solid #51546f;border-radius:3px;padding:2px 5px;margin-right:3px;color:#e9e3ef}.rule{text-align:center;font-family:system-ui,sans-serif;font-size:13px;color:#a7a8be;margin:18px 0 0}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@media(max-width:850px){canvas{width:512px;height:448px}.edition{display:none}}@media(max-width:610px){main{padding:14px 0}.machine{padding:12px;border-radius:15px 15px 25px 15px}.screen{padding:9px}canvas{width:calc(94vw - 50px);height:auto;aspect-ratio:256/224}header{margin-bottom:16px}.brand{font-size:16px}.topline{font-size:9px}.touch{margin-top:18px}.touch button{min-width:43px;padding:9px 12px}footer{gap:10px;font-size:11px}}@media(max-height:620px) and (orientation:landscape){main{width:min(950px,98vw);padding:8px 0;position:relative}header{margin:0 auto 8px;max-width:460px}.brand{font-size:14px}#sound{min-height:30px;padding:5px;font-size:10px}.machine{padding:9px 14px 4px}.screen{padding:6px}canvas{width:calc((100svh - 126px)*256/224);height:calc(100svh - 126px)}.topline,.under{font-size:9px;margin:4px 0}#pause{min-height:22px}.touch{position:absolute;left:0;right:0;top:48%;margin:0;max-width:none;pointer-events:none}.touch>div{flex-direction:column}.touch button{pointer-events:auto;min-width:42px}#start{position:absolute;bottom:-100px;left:10px}footer,.rule{display:none}}
@media(min-width:851px) and (max-height:1000px) and (min-height:621px){canvas{width:512px;height:448px}main{padding:16px 0}header{margin-bottom:18px}.touch{margin-top:18px}}

.risk-control{display:flex;gap:12px;align-items:center;justify-content:center;margin:16px auto;color:#b6bc97;font-size:12px}.risk-control button{border-color:#697453;font-size:12px}button:disabled{opacity:.45;cursor:default}@media(max-width:610px){.risk-control{flex-wrap:wrap;gap:6px}.risk-control span{font-size:11px}}@media(max-height:620px) and (orientation:landscape){.risk-control{position:absolute;right:4px;bottom:8px;margin:0}.risk-control span{display:none}.risk-control button{padding:8px;max-width:98px;font-size:10px}}

.pad-status{text-align:center;font-size:12px;color:#92bdd4;margin:14px 0 0}@media(max-height:620px) and (orientation:landscape){.pad-status{display:none}}