*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#c9cbcc;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:#333;-webkit-user-select:none;user-select:none;overscroll-behavior:none}
body{background:radial-gradient(ellipse at 50% 30%,#e3e4e5,#b9bbbd)}
#stage{position:relative;margin:0 auto;padding-top:3vh}
#op1{position:relative;width:1374px;height:516px;transform-origin:0 0;background:linear-gradient(#e4e5e6,#d2d4d5);border-radius:14px;box-shadow:0 1px 0 #fff inset,0 -2px 0 #a9abad inset,0 30px 60px rgba(0,0,0,.35),0 4px 10px rgba(0,0,0,.3);touch-action:none}
.el{position:absolute}
.key{position:absolute;border-radius:9px;background:linear-gradient(#f4f4f4,#e2e3e4);box-shadow:0 0 0 1.5px #b4b6b8,0 3px 0 #a5a7a9,0 4px 5px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;flex-direction:column;cursor:pointer;color:#3a3d40;font-size:19px;font-weight:500;touch-action:none}
.key.on,.key.lit{transform:translateY(2px);box-shadow:0 0 0 1.5px #a9abad,0 1px 0 #a5a7a9,0 1px 2px rgba(0,0,0,.25);background:linear-gradient(#e6e6e6,#d9dadb)}
.key.lit{background:linear-gradient(#fff6d8,#ffe9a8)}
.key small{font-size:9px;letter-spacing:.5px;color:#8a8d90;margin-top:1px;text-transform:uppercase}
.key svg{width:30px;height:30px;stroke:#3a3d40;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.key.round{border-radius:50%}
.key.blk{border-radius:50%;background:linear-gradient(#55585b,#2c2e30);box-shadow:0 0 0 1.5px #1c1d1e,0 3px 0 #111,0 4px 6px rgba(0,0,0,.4)}
.key.blk.on{background:linear-gradient(#444,#222);box-shadow:0 0 0 1.5px #1c1d1e,0 1px 0 #111}
.key.wht{border-radius:9px}
#k_rec svg circle{fill:#f0452c;stroke:#f0452c}
#k_rec.arm{background:linear-gradient(#ffd9d2,#ffb8ad)}
#k_rec.recording{background:linear-gradient(#ff7a66,#f0452c)}
#k_rec.recording svg circle{fill:#fff;stroke:#fff}
#spk{border-radius:10px;background-image:radial-gradient(circle,#55585b 2.6px,transparent 3.1px);background-size:13px 13px;background-position:6px 6px}
#scr{background:#0b0b0c;border-radius:8px;box-shadow:0 0 0 2px #2a2b2c,0 0 0 4px #9a9c9e,0 2px 6px rgba(0,0,0,.5) inset;overflow:hidden}
#scr canvas{width:100%;height:100%;display:block}
.enc{position:absolute;border-radius:50%;background:radial-gradient(circle at 50% 45%,#4a4c4e,#1f2021 70%);box-shadow:0 0 0 2px #8f9193,0 6px 10px rgba(0,0,0,.4);cursor:ns-resize;touch-action:none}
.enc i{position:absolute;inset:18%;border-radius:50%;box-shadow:0 2px 3px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.35) inset}
.enc i:after{content:"";position:absolute;left:50%;top:6%;width:4px;height:22%;margin-left:-2px;border-radius:2px;background:rgba(0,0,0,.35)}
#vol{position:absolute;border-radius:50%;background:linear-gradient(#fafafa,#dcdcdc);box-shadow:0 0 0 1.5px #a9abad,0 3px 5px rgba(0,0,0,.35);cursor:ns-resize;touch-action:none}
#vol:after{content:"";position:absolute;left:50%;top:8%;width:3px;height:26%;margin-left:-1.5px;background:#777;border-radius:2px}
#vu{position:absolute;display:flex;flex-direction:column-reverse;gap:3px}
#vu b{width:6px;height:6px;border-radius:50%;background:#aeb0b2}
#vu b.on{background:#3ddc6c}#vu b.on.hot{background:#f0452c}
#logo{position:absolute;font-size:11px;letter-spacing:1px;color:#8a8d90}
#power{position:fixed;inset:0;background:rgba(20,20,22,.82);display:flex;align-items:center;justify-content:center;color:#fff;z-index:9;cursor:pointer;text-align:center}
#power b{display:block;font-size:64px;font-weight:300;letter-spacing:6px}
#power span{display:block;margin-top:12px;font-size:15px;opacity:.75}
#help{max-width:1374px;margin:28px auto 40px;padding:0 20px;-webkit-user-select:text;user-select:text}
#help h2{font-weight:400;font-size:20px;margin:0 0 8px}
#help h3{font-size:13px;text-transform:uppercase;letter-spacing:1px;margin:10px 0 4px;color:#555}
#help p{font-size:13px;line-height:1.5;margin:0 0 8px}
#help .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
kbd{display:inline-block;min-width:18px;padding:1px 5px;border-radius:4px;background:#f4f4f4;box-shadow:0 0 0 1px #a9abad,0 2px 0 #a5a7a9;font:11px ui-monospace,Menlo,monospace;text-align:center}
#drop{position:fixed;inset:0;border:6px dashed #ff6a2b;pointer-events:none;display:none;z-index:8}
#rot{display:none;text-align:center;padding:14px;font-size:14px;color:#555}
@media (orientation:portrait) and (max-width:700px){#rot{display:block}}