/* B1 Pro-inspired geometry. All hit targets remain native buttons. */
.b1-stage{--b1-accent:#baf1cf;position:relative;isolation:isolate;padding:44px 26px 34px;border-radius:24px;background:radial-gradient(ellipse at 50% 0%,#2c3838 0%,#171f22 52%,#10171a 100%);overflow:hidden;color:#eef2f1}
.b1-stage:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,#ffffff04,transparent 35%,#ffffff03);z-index:-1}
.b1-device{position:relative;margin:0 auto;padding:24px 20px 17px;border-radius:26px;background:linear-gradient(140deg,#777b83,#4c5059 55%,#656973);box-shadow:0 1px 0 #afb4bc inset,0 -2px 0 #363942 inset,0 6px 0 #2f333a,0 8px 0 #15191e,0 24px 35px #0009;border:1px solid #858992;box-sizing:content-box}
.b1-device:before{content:"";position:absolute;top:-7px;left:8%;right:8%;height:7px;border-radius:4px 4px 0 0;background:linear-gradient(#252a32,#646a76);border-top:1px solid #858b95}
.b1-keybed{position:relative;width:100%;aspect-ratio:15/6.25}
.b1-key{position:absolute;box-sizing:border-box;border:1px solid #16191d;border-radius:8px;padding:0;background:radial-gradient(ellipse at 50% 37%,#282b2f 25%,#303338 70%,#202327 100%);box-shadow:0 1px 0 #5b5e64 inset,0 0 0 1px #20242a,0 3px 0 #14171c,0 4px 3px #15191d99;color:#e0e3e5;font-family:Inter,system-ui,sans-serif;font-weight:450;cursor:pointer;transition:background .15s,box-shadow .15s,translate .15s;display:flex;align-items:center;justify-content:center;min-width:0;line-height:1.1;text-shadow:0 1px 1px #0006}
.b1-key:before{content:"";position:absolute;inset:3px;border-radius:6px;background:radial-gradient(ellipse at center,#0000 15%,#ffffff05 62%,#00000010);pointer-events:none}
.b1-key:hover:not(:disabled){background:radial-gradient(ellipse at center,#3d4947,#303c39);box-shadow:0 1px 0 #9db3a7 inset,0 0 0 1px #6a927d,0 3px 0 #151a18,0 5px 8px #0006;translate:0 -1px;z-index:2}
.b1-key:active:not(:disabled){translate:0 2px;box-shadow:0 0 0 1px #659e7a}
.b1-key:focus-visible{outline:3px solid #d7f5a2;outline-offset:3px;z-index:3}
.b1-key.is-selected{background:radial-gradient(ellipse at center,#d3f4df,#a7d8bc);color:#173328;text-shadow:none;box-shadow:0 1px 0 #e9fff2 inset,0 0 0 1px #dcffea,0 3px 0 #5a8970,0 0 20px #91d9b423}
.b1-key.is-enabled:after{content:"";position:absolute;bottom:12%;width:5px;height:3px;border-radius:4px;background:#b5ebcb;box-shadow:0 0 5px #9ae4b366}
.b1-key.is-selected:after{background:#25583f;box-shadow:none}
.b1-key.is-dirty{outline:1px solid #e5b76d;outline-offset:1px}
.b1-key.is-iso{clip-path:polygon(0 0,100% 0,100% 100%,17% 100%,17% 50%,0 50%);border-radius:8px;align-items:center;padding-top:0}
.b1-key.is-small{font-size:10px!important;letter-spacing:-.15px}
.b1-key.is-muted{color:#a5aab2;cursor:default}
.b1-key:disabled{opacity:1}
.b1-key-legend{position:relative;max-width:88%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.b1-key-sub{position:absolute;top:12%;font-size:8px;opacity:.6;max-width:90%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.b1-key.is-bound .b1-key-legend{padding-top:8px;font-size:12px}
.b1-key.is-half .b1-key-legend{padding:0}
.b1-key.is-half .b1-key-sub{display:none}
.b1-detail{position:absolute;top:6px;right:28px;display:flex;gap:15px;font:7px Inter,system-ui;color:#d2d5d9;letter-spacing:1px;pointer-events:none}
.b1-detail span:before{content:"";display:inline-block;width:3px;height:3px;background:#333c39;border-radius:50%;margin-right:4px}
.b1-caption{display:flex;justify-content:space-between;gap:12px;margin:30px auto 0;font:11px Inter,system-ui;letter-spacing:.06em;color:#9ba9a8}
.b1-caption strong{color:#c9d2d1;font-weight:500}.b1-caption .dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#b5ebcb;margin-right:6px}
.b1-device.ivory{background:linear-gradient(145deg,#f0eee4,#b8b8b1);border-color:#e4e5df}
.b1-device.ivory .b1-key:not(.is-selected){color:#464842;background:radial-gradient(ellipse at center,#f0eee5,#d8d7ce);border-color:#a2a59d;box-shadow:0 1px 0 #fff inset,0 3px 0 #a3a59e,0 4px 3px #3333;text-shadow:none}
@media(prefers-reduced-motion:reduce){.b1-key{transition:none}}
@media(max-width:700px){.b1-stage{padding:26px 12px}.b1-device{padding:20px 10px 13px;border-radius:18px}.b1-key{border-radius:5px}.b1-caption{font-size:10px}.b1-key.is-small{font-size:7px!important}.b1-detail{font-size:6px}}
.b1-light{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1;border-radius:inherit}
.b1-key.is-iso{padding-top:0;align-items:center}.b1-key.is-iso .b1-key-legend{position:absolute;top:23%;right:25%}
.b1-key.is-iso .b1-key-sub{top:8%;right:4%;width:80%}

.b1-device.ivory .b1-detail{color:#555c55}.b1-device.ivory .b1-key.is-enabled:not(.is-selected):after{background:#377c57;box-shadow:none}
.b1-keybed{container-type:inline-size}.b1-key{font-size:1.5cqw!important}.b1-key.is-small{font-size:1cqw!important}