[hidden]{display:none!important}
body.device-mode{background:#191c20;color:#e9ebef;background-image:radial-gradient(ellipse at 50% 45%,#32383f 0,#202429 52%,#14171a 100%);min-height:100vh}
#deviceApp{padding:22px 24px 18px;font:14px/1.5 system-ui,sans-serif;max-width:1600px;margin:auto}
#deviceApp button{font:inherit}#deviceApp .sim-nav{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:0 8px 15px}#deviceApp .sim-nav strong{font:600 14px ui-monospace,monospace;letter-spacing:.2em}#deviceApp .sim-nav span{display:block;font:10px ui-monospace,monospace;letter-spacing:.12em;color:#969faa;margin-top:7px}
#deviceApp .sim-nav button,#deviceApp .sim-bottom button{border:1px solid #535b65;border-radius:20px;background:#20252a;font-size:12px;padding:7px 14px;color:#d9dfe6}
#deviceApp .power-row{display:flex;justify-content:center;align-items:center;gap:14px;height:42px;margin-bottom:14px}#deviceApp #power{display:flex;gap:10px;align-items:center;background:transparent;border:0;padding:6px 10px;font-size:12px}#deviceApp .power-toggle{display:block;width:43px;height:23px;border:1px solid #abb2bb;border-radius:14px;padding:3px;background:#202429;box-shadow:inset 0 1px 5px #0008}#deviceApp .power-toggle:before{content:'';display:block;width:15px;height:15px;border-radius:50%;background:#c4c9ce;transition:transform .15s}#deviceApp #power[aria-checked=true] .power-toggle:before{transform:translateX(19px);background:#fff;box-shadow:0 0 8px #fff5}#deviceStatus{font-size:11px;color:#b7bec7;min-width:105px}
#deviceApp .device-stage{width:100%;display:flex;justify-content:center}#deviceFit{position:relative}#device{position:absolute;top:0;left:0;width:1000px;height:620px;transform-origin:top left;border-radius:44px;background:linear-gradient(145deg,#656970,#565b62 60%,#4c5158);border:1px solid #858a92;box-shadow:inset 0 1px 1px #bcc0c633,inset 0 -3px 0 #30343a,0 3px 0 #121416,0 20px 65px #0006;user-select:none;-webkit-user-select:none;touch-action:manipulation}
#device:after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:44px;opacity:.035;background:repeating-linear-gradient(20deg,#fff 0px,#fff 1px,transparent 1px,transparent 3px)}
#device .screen-bezel{position:absolute;left:268px;top:34px;width:274px;height:274px;padding:16px;border-radius:24px;background:#0e1114;border:1px solid #888d95;box-shadow:0 0 0 2px #32363b,inset 0 0 0 3px #272b30,inset 0 1px 5px #000}
#lcd{width:240px;height:240px;display:block;background:#000;image-rendering:pixelated;image-rendering:crisp-edges;border-radius:2px}
#device .oct-tray,#device .button-tray,#device .keyboard-tray{position:absolute;border:1px solid #171a1d;box-shadow:inset 0 1px 3px #0008,0 1px 1px #a4aab333;background:linear-gradient(#2b2f34,#30353a)}
#device .oct-tray{left:51px;top:261px;width:196px;height:65px;border-radius:19px}#device .button-tray{left:573px;top:158px;width:395px;height:155px;border-radius:19px}#device .keyboard-tray{left:39px;top:335px;width:920px;height:263px;border-radius:26px}
#device .rotary{position:absolute;width:62px;height:66px;touch-action:none;outline-offset:4px;cursor:ns-resize}
#device .rotary-label{position:absolute;top:-18px;left:50%;transform:translateX(-50%);font:600 10px ui-monospace,monospace;letter-spacing:1.6px;color:#f2f3f5;text-shadow:0 1px #34383e;white-space:nowrap;pointer-events:none}
#device .rotary-cap{position:absolute;left:9px;top:4px;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 38% 28%,#3c4148,#20252a 65%,#15191e);border:1px solid #15191d;box-shadow:0 5px 6px #0007,inset 0 1px 2px #b2bcc24d}
#device .rotary-cap:before{content:'';position:absolute;inset:5px;border-radius:50%;background:repeating-conic-gradient(#ffffff09 0deg 3deg,#00000015 3deg 7deg)}
#device .rotary-indicator{position:absolute;inset:0;transform:rotate(var(--angle,0deg));border-radius:50%}#device .rotary-indicator:after{content:'';position:absolute;left:21px;top:7px;width:3px;height:11px;border-radius:2px;background:#f7f6ef;box-shadow:0 0 2px #fff5}#device .rotary:focus-visible{outline:2px solid #c9f7ff;border-radius:10px}
#device .hw-button{position:absolute;width:53px;height:54px;border-radius:10px;padding:0;background:linear-gradient(155deg,#4f555d,#393e45);border:1px solid #25292f;color:#e3e5e9;font:600 10px/1.4 ui-monospace,monospace;letter-spacing:1.3px;text-shadow:0 1px #24282c;box-shadow:0 4px 4px #0005,inset 0 1px 0 #ffffff18;touch-action:none}
#device .hw-button:hover{background:linear-gradient(#5a616a,#414750)}#device .hw-button.pressed{transform:translateY(2px);box-shadow:0 1px 2px #0005,inset 0 1px 4px #0005}#device .hw-button.page-active{color:#fff;text-shadow:0 0 9px #fff,0 0 4px #fff9}#device .hw-button.latched{outline:1px dashed #e7edf4;outline-offset:4px}#device .hw-button.playing{color:#bcffc3;text-shadow:0 0 7px #6bff84}#device .hw-button.recording{color:#ffb9c3;text-shadow:0 0 6px #ff5c79}#device .hw-button.oct{width:78px;height:40px;border-radius:11px}
#device .hw-key{position:absolute;width:46px;height:122px;border-radius:25px;background:linear-gradient(135deg,#4a4f57,#373c42);border:1px solid #25292e;box-shadow:0 4px 4px #0007,inset 0 1px #ffffff20;padding:0;touch-action:none}
#device .hw-key.black{height:101px;border-radius:24px}#device .key-led{position:absolute;left:20px;top:20px;bottom:22px;width:5px;background:#7b828b;border:1px solid #999fa65e;border-radius:4px;box-shadow:0 0 1px #000;pointer-events:none}
#device .hw-key.black .key-led{top:18px;bottom:18px}#device .hw-key.on .key-led{background:#bfcbd6;box-shadow:0 0 4px #e5f4ff5c}#device .hw-key.selected .key-led{background:#d5e0ea;box-shadow:0 0 6px #e5f4ff7c}#device .hw-key.firing .key-led,#device .hw-key.down .key-led{background:#fff;box-shadow:0 0 5px #fff,0 0 12px #d5eaff}#device .hw-key.down{transform:translateY(2px);box-shadow:0 1px 1px #0008,inset 0 1px 3px #0006}
#deviceApp .sim-bottom{max-width:1000px;display:flex;align-items:center;gap:10px;margin:23px auto 0}#interactionHint{font-size:12px;color:#c0c7d0;margin-right:auto;max-width:660px}#deviceApp #panelHelp{max-width:1000px;margin:20px auto 0;padding:20px 24px;background:#13171ccc;border:1px solid #3c444e;border-radius:12px;display:grid;grid-template-columns:1fr 1fr;gap:14px 30px;color:#b9c2ce}#deviceApp #panelHelp h2{font:500 14px system-ui;margin:0;color:#f1f4f7}#deviceApp #panelHelp p{font-size:12px;line-height:1.8;margin:9px 0}#deviceApp #panelHelp a{color:#bdefff}#deviceApp .sim-footnote{text-align:center;color:#89939f;font:10px ui-monospace,monospace;letter-spacing:.1em;margin-top:25px}#deviceApp .sim-footnote span{margin:0 12px;color:#535b65}
#zoomPanel{display:flex;flex-direction:column;align-items:center;gap:12px;padding:25px 0;color:#a5b0be;font:11px ui-monospace,monospace}#lcdZoom{width:min(480px,100%);height:auto;image-rendering:pixelated;image-rendering:crisp-edges;background:#000;box-shadow:0 0 0 8px #0c0e10;border-radius:2px}#backPanel{margin:15px 36px}
@media(max-width:700px){#deviceApp{padding:16px 10px}.sim-nav{margin-inline:2px!important}#deviceApp .sim-nav span{font-size:9px}#deviceApp .sim-bottom{flex-wrap:wrap;justify-content:center;margin-top:18px}#interactionHint{flex:1 0 100%;text-align:center;font-size:11px}#deviceApp #panelHelp{grid-template-columns:1fr;padding:16px}.sim-footnote{font-size:8px!important}.sim-footnote span{margin:0 4px!important}#deviceApp .power-row{margin:15px 0}#deviceStatus{min-width:0}}