:root{--chassis: #25272b;--cyan: #00bfff;--yellow: #ffcc00;--text: #e6e8ea;--btn-top: #525860;--btn-bottom: #3a3f46;--led-off: #3b2414;--led-on: #ff6a1a}*{box-sizing:border-box}html,body{margin:0;height:100%;background:#141518;color:var(--text);font-family:Arial,Helvetica,sans-serif;overflow:hidden}.topbar{display:flex;align-items:center;gap:16px;padding:10px 16px;font-size:13px}.topbar .back{color:var(--cyan);text-decoration:none;font-weight:700}.topbar .hint{opacity:.6}#stage{position:relative;height:calc(100% - 40px);display:flex;align-items:center;justify-content:center}#synth{position:absolute;left:50%;top:50%;width:1360px;height:510px;transform-origin:center center;border-radius:10px;box-shadow:0 20px 60px #0009;user-select:none;-webkit-user-select:none;touch-action:none}#bg{position:absolute;inset:0;width:1360px;height:510px;border-radius:10px}#lcd{position:absolute;left:664px;top:80px;width:252px;height:72px}#wheel{position:absolute;left:32px;top:84px;width:38px;height:150px;cursor:ns-resize;touch-action:none}.cz-btn{position:absolute;padding:0;border:1px solid #0d0e10;border-radius:3px;background:linear-gradient(var(--btn-top),var(--btn-bottom));color:var(--text);font:700 11px Arial,sans-serif;text-shadow:0 1px 0 rgba(0,0,0,.6);box-shadow:inset 0 1px #ffffff29,0 3px #1c1f23,0 4px 4px #0000008c;cursor:pointer;transition:transform .03s}.cz-btn:hover{filter:brightness(1.08)}.cz-btn:active,.cz-btn.pressed{transform:translateY(1px);box-shadow:inset 0 1px 2px #0006,0 2px #1c1f23,0 2px 2px #00000080}.cz-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}.cz-btn.led{padding-top:6px}.cz-btn.led:before{content:"";position:absolute;left:50%;top:3px;width:12px;height:3px;margin-left:-6px;border-radius:2px;background:var(--led-off)}.cz-btn.led.on:before{background:#ff8a4a;box-shadow:0 0 4px 2px #ff6a1a8c}.led-dot{position:absolute;width:12px;height:3px;border-radius:2px;background:var(--led-off)}.led-dot.on{background:#ff8a4a;box-shadow:0 0 4px 2px #ff6a1a8c}#about{width:min(780px,calc(100vw - 24px));max-height:calc(100vh - 24px);padding:0;border:1.5px solid var(--cyan);border-radius:8px;background:#1e2024;color:var(--text);overflow:auto}#about::backdrop{background:#000000bd}.about-card{position:relative;display:grid;grid-template-columns:1fr 232px;gap:22px;padding:24px 26px 64px;font:14px/1.5 Arial,sans-serif}.about-main h2{margin:0;font-size:30px;line-height:1.2}.about-main .casio{color:#fff;font-weight:700;letter-spacing:-.03em}.about-main .cz{color:#00aeef;font-style:italic;font-weight:700}.about-main p{margin:10px 0 0;color:#e6e8eae6}.about-main .muted{margin-top:2px;color:#e6e8eabf;font-size:13px}.about-main .by{color:var(--yellow);font-size:16px;font-weight:700}.update-row{display:flex;align-items:center;gap:12px;margin-top:18px}#updateStatus{color:#00d4ff;font-size:13px}.links{display:flex;gap:20px}#about a{color:#00d4ff}.about-donate{padding-left:22px;border-left:1px solid rgba(0,191,255,.45);text-align:center}.about-donate h3{margin:0 0 6px;color:var(--yellow);font-size:12px;letter-spacing:.06em}.about-donate p{margin:0 0 10px;font-size:12.5px;color:#e6e8eae0}.about-donate img{display:block;margin:0 auto 8px;padding:6px;border-radius:6px;background:#fff;max-width:100%;height:auto}.about-donate a{font-weight:700;font-size:13px}.about-btn{padding:8px 16px;border:1px solid #0d0e10;border-radius:3px;background:linear-gradient(var(--btn-top),var(--btn-bottom));color:var(--text);font:700 13px Arial,sans-serif;cursor:pointer;box-shadow:0 2px #1c1f23}.about-btn:hover{filter:brightness(1.1)}.about-btn:focus-visible,#about a:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}.about-btn:disabled{opacity:.6;cursor:default}.about-btn.close{position:absolute;right:26px;bottom:20px;min-width:90px}@media (max-width: 640px){.about-card{grid-template-columns:1fr}.about-donate{padding:16px 0 0;border-left:0;border-top:1px solid rgba(0,191,255,.45)}}#cartMenu{position:absolute;left:382px;top:128px;z-index:5;width:360px;padding:6px;border:1px solid #000;border-radius:6px;background:#1e2024;box-shadow:0 12px 30px #0009}#cartMenu[hidden]{display:none}#cartMenu .menu-header{padding:6px 10px 8px;color:var(--yellow);font:700 12px Arial,sans-serif}#cartMenu hr{border:0;border-top:1px solid #34373d;margin:6px 4px}#cartMenu .menu-item{display:flex;width:100%;gap:12px;align-items:baseline;padding:7px 10px;border:0;border-radius:4px;background:none;color:var(--text);text-align:left;cursor:pointer;font:12px Arial,sans-serif}#cartMenu .menu-item b{flex:none;min-width:104px}#cartMenu .menu-item span{opacity:.7}#cartMenu .menu-item:hover,#cartMenu .menu-item:focus-visible{background:#00bfff4d;outline:none}#cartMenu .menu-item.active b:before{content:"\2713  ";color:var(--cyan)}#volume{position:absolute;left:26px;top:318px;width:44px;height:160px;cursor:ns-resize;touch-action:none}#volume .slot{position:absolute;left:18px;top:-6px;width:7px;height:172px;border-radius:3px;background:#000;box-shadow:inset 0 2px 3px #000000e6}#volume .cap{position:absolute;left:7px;width:28px;height:22px;margin-top:-11px;border:1px solid #0d0e10;border-radius:3px;background:linear-gradient(#5f656d,#2f3338);box-shadow:0 3px 3px #0000008c,inset 0 1px #ffffff2e}#volume .cap:after{content:"";position:absolute;left:3px;right:3px;top:9px;height:3px;background:#1a1c1f;box-shadow:0 1px #ffffff26}#keyboard{position:absolute;left:100px;top:306px;width:1250px;height:194px;background:#0b0c0d;touch-action:none}.key{position:absolute;top:0}.key.white{height:194px;border-left:1px solid #0b0c0d;background:linear-gradient(#f5f2e9,#ebe7dc 96%,#b8b3a7 97%);box-shadow:inset 0 10px 8px -6px #00000073}.key.white.down{background:linear-gradient(#ebe7dc,#e0dccf 98%,#b8b3a7 99%)}.key.black{height:118px;z-index:2;background:#121314;box-shadow:2px 2px 3px #0006}.key.black:after{content:"";position:absolute;inset:0 14% 12%;background:linear-gradient(#3a3d40,#1e2022)}.key.black.down:after{bottom:10%;background:linear-gradient(#2b2d30,#17181a)}#power{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#0a0b0dd1;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:10;text-align:center}#power.hidden{display:none}#power p{margin:0;opacity:.7;font-size:14px}#powerButton{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border:0;border-radius:999px;background:var(--cyan);color:#00131c;font:700 18px Arial,sans-serif;cursor:pointer;box-shadow:0 0 30px #00bfff73}#powerButton:focus-visible{outline:3px solid #fff;outline-offset:3px}.power-icon{flex:none}#rotate{display:none}@media (orientation: portrait) and (max-width: 700px){#rotate{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#141518;color:var(--text);text-align:center;padding:24px}}@media (max-width: 700px){.topbar .hint{display:none}}
