#try .try-grid{align-items:center;gap:40px}#try .flat{max-width:560px;height:auto;display:block}#try .new-device{position:relative;width:100%;aspect-ratio:1319/1192}#try .new-device img{width:100%;display:block}#try .hot{position:absolute;border:1px solid transparent;background:transparent;color:transparent;cursor:pointer;border-radius:12px;transition:background .15s,box-shadow .15s;transform:rotate(17deg)}#try .hot:hover,#try .hot:focus-visible,#try .hot.active{color:#b3480b;background:#ef8a3020;border-color:#ed8b36;box-shadow:0 0 0 4px #ef8a3015;outline:none}#try .key-one{left:29%;top:37%;width:14%;height:10%}#try .key-two{left:44%;top:41%;width:14%;height:10%}#try .key-three{left:59%;top:46%;width:14%;height:10%}#try .knob{left:16%;top:46%;width:11%;height:11%;border-radius:50%}#try .wheel-actions{display:flex;justify-content:center;align-items:center;gap:10px;color:#777;font-size:12px}#try .wheel-actions button{border:1px solid #ddd;border-radius:20px;background:#fff;padding:8px 12px;cursor:pointer}#try .guide{display:none!important}#try #cltxt{min-width:10px;outline:none;white-space:pre-wrap}#try .comp{min-height:55px}#try .demo-disclaimer{font-size:11px;color:#888;margin-top:12px}#try .mac{box-shadow:0 20px 50px #00000015}#try #dock{position:relative;bottom:auto;left:auto;transform:none;margin:10px auto}#try .step{min-height:36px}#try .send{cursor:pointer}@media(max-width:1100px){#try .try-grid{max-width:680px;margin:auto}#try .flat{max-width:420px;margin:auto}}@media(prefers-reduced-motion:reduce){#try *{animation:none!important;transition:none!important}}

/* Upright front view; hotspots follow the actual image coordinates. */
#try .flat{max-width:400px;margin:auto}#try .new-device{aspect-ratio:2/3;width:100%}#try .hot{transform:none}#try .key-one{left:38.7%;top:22.5%;width:22.8%;height:14.5%}#try .key-two{left:38.7%;top:38.8%;width:22.8%;height:14.5%}#try .key-three{left:38.7%;top:55%;width:22.8%;height:14.5%}#try .knob{left:25.5%;top:17.2%;width:6.5%;height:11.3%;border-radius:8px}#try .wheel-actions{flex-wrap:wrap}@media(max-width:600px){#try .flat{max-width:320px}}

/* Independent arrows above and below the wheel; preserve the hardware image. */
#try .wheel-control{display:contents}
#try .wheel-control button{position:absolute;left:23.8%;width:10%;height:6%;padding:0;border:0;background:transparent;color:#535954;cursor:pointer;font-family:inherit;font-size:22px;line-height:1;touch-action:manipulation;border-radius:5px}
#try .wheel-control .wheel-up{top:10%}
#try .wheel-control .wheel-down{top:29.5%}
#try .wheel-control .knob{left:25.5%;top:17.2%;width:6.5%;height:11.3%;color:transparent;background:transparent;border:0}
#try .wheel-control button:hover{color:#111}
#try .wheel-control .knob:hover{color:transparent}
#try .wheel-control button:focus-visible{outline:2px solid #4382ed;outline-offset:2px}
#try .hot{touch-action:manipulation}
#try #cltxt{display:block;flex:1;min-width:0;max-height:150px;overflow-y:auto;padding-right:28px;overflow-wrap:anywhere;white-space:pre-wrap}
#try .comp .wave{flex-shrink:0}
#try .m{white-space:pre-wrap}