.mouse-keybind-visualizer{--mx-bg:#081119;--mx-panel:#0d1b25;--mx-panel-2:#102532;--mx-line:#234353;--mx-text:#eaf7fb;--mx-muted:#8da6b1;--mx-cyan:#59d9ff;--mx-green:#8be6b0;--mx-radius:18px;color:var(--mx-text);background:radial-gradient(circle at 10% 0%, #153348, transparent 35%), var(--mx-bg);border:1px solid var(--mx-line);border-radius:24px;padding:clamp(1rem,2vw,2rem);font:500 15px/1.5 system-ui,sans-serif}.mouse-keybind-visualizer *,.mouse-keybind-visualizer :before,.mouse-keybind-visualizer :after{box-sizing:border-box}.mouse-keybind-visualizer button,.mouse-keybind-visualizer select,.mouse-keybind-visualizer input{font:inherit}.mouse-keybind-visualizer button{cursor:pointer}.mouse-explorer-header,.picker-row,.section-heading,.compare-toolbar,.export-actions{justify-content:space-between;align-items:center;gap:1rem;display:flex}.mouse-explorer-header{align-items:flex-start;gap:2rem;margin-bottom:1.5rem}.mouse-keybind-visualizer .eyebrow,.mouse-keybind-visualizer .picker-label{color:var(--mx-cyan);letter-spacing:.1em;text-transform:uppercase;margin:0 0 .35rem;font-size:.72rem;font-weight:800}.mouse-keybind-visualizer h2,.mouse-keybind-visualizer h3,.mouse-keybind-visualizer p{margin-top:0}.mouse-keybind-visualizer h2{letter-spacing:-.035em;margin-bottom:.45rem;font-size:clamp(1.6rem,3vw,2.5rem)}.mouse-keybind-visualizer h3{margin-bottom:.6rem;font-size:1.15rem}.intro,.mouse-status,.share-note,.affiliate-note,.slider-wrap small{color:var(--mx-muted)}.intro{max-width:58rem;margin-bottom:0}.mouse-status{margin:0;font-size:.85rem}.mouse-status:empty{display:none}.copy-fallback{color:var(--mx-text);font-size:.85rem}.copy-fallback textarea{border:1px solid var(--mx-cyan);color:var(--mx-text);resize:vertical;background:#07131b;border-radius:8px;width:100%;margin-top:.4rem;padding:.6rem;display:block}.mouse-picker,.compare-panel,.hardware-stage,.benefit-card,.product-links,.setup-drawer{background:color-mix(in srgb, var(--mx-panel) 94%, transparent);border:1px solid var(--mx-line);border-radius:var(--mx-radius)}.mouse-picker{padding:1rem}.picker-row{flex-wrap:wrap;align-items:flex-end}.picker-row+.picker-row{border-top:1px solid var(--mx-line);margin-top:1rem;padding-top:1rem}.picker-group{flex:28rem}.role-picker{flex:0 30rem}.game-pills,.role-pills,.spotlights,.layer-tabs,.plate-picker,.action-roles{flex-wrap:wrap;gap:.45rem;display:flex}.mouse-game,.mouse-role,.layer-tabs button,.plate-picker button,.secondary-button,.compare-toggle,.action-role{border:1px solid var(--mx-line);color:var(--mx-muted);background:#0a1821;border-radius:999px;padding:.45rem .7rem}.mouse-game:hover,.mouse-role:hover,.layer-tabs button:hover,.plate-picker button:hover,.secondary-button:hover,.compare-toggle:hover,.action-role:hover,.mouse-control-card:hover{border-color:var(--mx-cyan);color:var(--mx-text)}.mouse-game.is-active,.mouse-role.is-active,.layer-tabs button.is-active,.plate-picker button.is-active,.action-role:focus-visible{border-color:var(--mx-cyan);color:var(--mx-text);background:#12384b}.mouse-row{align-items:center}.mouse-row>.picker-label{flex:none;margin-bottom:0}.spotlights{flex:35rem}.mouse-spotlight{border:1px solid var(--mx-line);min-width:8.5rem;color:var(--mx-text);text-align:left;background:#0b1b25;border-radius:12px;flex:8.5rem;padding:.65rem .75rem}.mouse-spotlight[aria-pressed=true]{border-color:var(--mx-cyan);box-shadow:inset 0 0 0 1px #59d9ff44}.mouse-spotlight strong,.mouse-spotlight span{display:block}.mouse-spotlight strong{font-size:.78rem}.mouse-spotlight span{color:var(--mx-muted);margin-top:.2rem;font-size:.72rem}.mouse-select-label{min-width:0}.mouse-select-label select{border:1px solid var(--mx-line);color:var(--mx-text);background:#0a1821;border-radius:10px;max-width:100%;min-height:2.75rem;padding:.5rem .7rem}.explorer-grid{grid-template-columns:minmax(0,7fr) minmax(18rem,5fr);align-items:start;gap:1rem;margin-top:1rem;display:grid}.hardware-stage,.setup-stage{min-width:0}.hardware-stage{padding:1rem}.section-heading{align-items:flex-start}.section-heading h3{margin-bottom:0}.layer-tabs{justify-content:flex-end}.layer-tabs button{font-size:.76rem}.hardware-view{place-items:center;min-height:20rem;padding:.5rem;display:grid}.product-render{isolation:isolate;width:min(100%, calc(25rem * var(--render-ratio,1.6)));aspect-ratio:var(--render-ratio,1.6);background:#081119;border:1px solid #234353;border-radius:14px;place-items:center;display:grid;position:relative;overflow:hidden}.product-render-art{aspect-ratio:var(--render-ratio,1.6);width:100%;position:relative}.product-render-image{object-fit:fill;object-position:center;width:100%;height:100%;display:block}.product-hotspots{pointer-events:none;position:absolute;inset:0}.product-hotspot{color:#f5fcff;height:1.5rem;left:var(--hotspot-x);pointer-events:auto;top:var(--hotspot-y);background:#08212d;border:2px solid #59d9ff;border-radius:50%;place-items:center;width:1.5rem;padding:0;font:800 .6rem/1 system-ui,sans-serif;display:grid;position:absolute;transform:translate(-50%,-50%);box-shadow:0 2px 8px #00131bcc}.product-hotspot:hover,.product-hotspot.is-selected,.product-hotspot:focus-visible{color:#06151b;outline-offset:2px;z-index:1;background:#53d5f2;border-color:#063444;outline:2px solid #fff}.compare-diagram .product-render{width:min(100%, calc(15rem * var(--render-ratio,1.6)));margin-inline:auto}.compare-diagram .product-hotspots{display:none}.map-tools{align-items:center;gap:.75rem;margin-bottom:.75rem;display:flex}.map-help{color:var(--mx-muted);margin:0;font-size:.75rem}.hardware-view.is-zoomed{place-items:normal;max-height:28rem;display:block;overflow:auto}.hardware-view.is-zoomed .product-render{width:48rem}.hardware-view.is-zoomed .product-hotspot{width:2rem;height:2rem;font-size:.66rem}.hardware-view svg,.compare-diagram svg{width:100%;max-width:100%;height:auto}.slider-wrap,.plate-picker,.control-editor{border:1px solid var(--mx-line);background:#0a1821;border-radius:12px;margin-top:.75rem;padding:.75rem}.slider-wrap label{justify-content:space-between;font-weight:700;display:flex}.slider-wrap input{accent-color:var(--mx-cyan);width:100%;margin:.6rem 0 .2rem;display:block}.slider-wrap output{color:var(--mx-cyan)}.plate-picker{align-items:center}.plate-picker span{color:var(--mx-muted);margin-right:auto}.plate-picker button{padding:.3rem .6rem}.control-panel{grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));gap:.5rem;margin-top:.75rem;display:grid}.mouse-control-card{border:1px solid var(--mx-line);color:var(--mx-text);text-align:left;background:#0f2531;border-radius:10px;min-height:4.5rem;padding:.55rem}.mouse-control-card.is-selected{border-color:var(--mx-cyan);box-shadow:0 0 0 2px #59d9ff22}.mouse-control-card.is-hovered{border-color:var(--mx-green)}.mouse-keybind-visualizer [data-control].is-hovered{filter:drop-shadow(0 0 5px #8be6b088)}.mouse-keybind-visualizer [data-control]:focus-visible{outline-offset:3px;filter:drop-shadow(0 0 7px #59d9ff);outline:3px solid #fff}.control-key,.mouse-control-card strong,.mouse-control-card small{display:block}.mouse-control-card kbd{color:var(--mx-cyan);margin-top:.4rem;font:800 .85rem/1.3 ui-monospace,monospace;display:inline-block}.control-key{color:var(--mx-muted);font-size:.7rem}.mouse-control-card strong{overflow-wrap:anywhere;margin-top:.25rem;font-size:.84rem}.mouse-control-card small{color:var(--mx-green);margin-top:.25rem;font-size:.67rem}.control-editor{gap:.7rem;display:grid}.control-editor>div:first-child strong{display:block}.control-editor label{color:var(--mx-muted);font-size:.78rem}.control-editor input{border:1px solid var(--mx-line);color:var(--mx-text);background:#07131b;border-radius:8px;width:100%;margin-top:.3rem;padding:.55rem;display:block}.action-role{border-color:color-mix(in srgb, var(--role-color) 60%, var(--mx-line));color:var(--role-color);font-size:.75rem}.setup-stage{align-content:start;gap:.75rem;display:grid}.relief-banner{color:var(--mx-green);background:#0c2b21;border:1px solid #327d5a;border-radius:12px;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:.12rem .55rem;padding:.7rem .85rem;display:grid}.relief-check{grid-row:1/span 2}.relief-banner>strong,.relief-message{grid-column:2}.relief-message{color:#c9f1d6;overflow-wrap:anywhere;margin:0;font-size:.84rem}.relief-banner a{color:var(--mx-cyan);text-underline-offset:.12em;text-decoration:underline}.relief-banner a:focus-visible{outline-offset:2px;outline:2px solid #fff}.benefit-card,.product-links,.setup-drawer{padding:1rem}.benefit-card ul,.setup-drawer ol,.compare-grid ul{margin:.5rem 0 0;padding-left:1.15rem}.benefit-card li+li,.setup-drawer li+li,.compare-grid li+li{margin-top:.45rem}.tradeoff{border-top:1px solid var(--mx-line);color:var(--mx-muted);margin:1rem 0 0;padding-top:.8rem;font-size:.84rem}.tradeoff strong{color:var(--mx-text)}.product-links{flex-wrap:wrap;gap:.7rem;display:flex}.affiliate-note{flex-basis:100%;margin-bottom:0;font-size:.72rem}.affiliate-note-static{color:var(--mx-muted);margin:0}.mouse-keybind-visualizer .affiliate-note{color:var(--mx-muted);background:0 0;border:0;padding:0}.product-links a{border:1px solid var(--mx-cyan);color:var(--mx-cyan);border-radius:999px;padding:.45rem .7rem;text-decoration:none}.product-links a:hover{background:#12384b}.setup-drawer summary{cursor:pointer;font-weight:800}.setup-drawer ol{color:var(--mx-muted)}.setup-drawer strong{color:var(--mx-text)}.snippet-box{border:1px solid var(--mx-line);background:#07131b;border-radius:10px;margin-top:1rem;padding:.75rem}.snippet-box pre{color:var(--mx-green);white-space:pre-wrap;margin:0 0 .75rem;font:.78rem/1.5 ui-monospace,monospace;overflow-x:auto}.pivot-block{border-top:1px solid var(--mx-line);padding-top:.8rem}.pivot-cards .mouse-spotlight{min-width:7rem}.primary-button{background:var(--mx-cyan);border:1px solid var(--mx-cyan);color:#06202c;border-radius:999px;padding:.55rem .8rem;font-weight:800}.primary-button:hover{background:#a4efff}.secondary-button{white-space:nowrap}.export-actions a{justify-content:center;text-decoration:none;display:inline-flex}.export-actions{flex-wrap:wrap;justify-content:flex-start}.share-note{margin:0;font-size:.75rem}.compare-panel{margin-top:1rem;padding:1rem}.compare-toolbar{flex-wrap:wrap;align-items:center}.compare-toolbar label{color:var(--mx-muted);font-size:.78rem}.compare-toolbar select{border:1px solid var(--mx-line);color:var(--mx-text);background:#0a1821;border-radius:8px;padding:.4rem}.compare-summary{color:var(--mx-cyan);margin-left:auto;font-size:.8rem}.compare-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:1rem;display:grid}.compare-grid>div{background:#0a1821;border-radius:12px;padding:.6rem}.compare-grid h4{color:var(--mx-text);overflow-wrap:anywhere;margin:0 0 .6rem}.compare-grid details{margin-top:.75rem}.compare-grid summary{cursor:pointer;font-weight:700}.compare-grid li{color:var(--mx-muted);font-size:.78rem}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.mouse-keybind-visualizer [hidden]{display:none!important}@media (width<=900px){.explorer-grid{grid-template-columns:1fr}.mouse-status{text-align:left}.mouse-explorer-header{flex-direction:column;gap:.5rem}}@media (width<=640px){.mouse-keybind-visualizer{border-radius:14px;padding:.75rem}.picker-row,.compare-toolbar,.section-heading{flex-direction:column;align-items:stretch}.picker-group,.role-picker{flex:initial}.game-pills,.role-pills{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.mouse-game,.mouse-role{border-radius:10px;padding:.4rem;font-size:.8rem}.role-pills button:last-child{grid-column:1/-1}.mouse-row>.picker-label{align-self:flex-start}.spotlights{display:none}.mouse-select-label,.mouse-select-label select,.compare-toolbar select{width:100%}.mouse-game,.mouse-role,.layer-tabs button,.plate-picker button,.secondary-button,.action-role{min-height:44px}.layer-tabs{justify-content:flex-start}.hardware-stage{padding:.75rem}.hardware-view{min-height:0;margin-block:.75rem;padding:0}.hardware-view:not(.is-zoomed) .product-hotspot:not(.is-selected){display:none}.map-tools{flex-direction:column;align-items:flex-start}.map-tools button{width:100%}.compare-grid{grid-template-columns:1fr}.export-actions>*{width:100%}}@media (prefers-reduced-motion:reduce){.mouse-keybind-visualizer *{scroll-behavior:auto!important;transition:none!important}}.mouse-keybind-visualizer .mouse-chooser{border:1px solid var(--border,#294653);border-radius:14px;margin-bottom:1rem;padding:1rem}.mouse-keybind-visualizer .mouse-chooser summary{cursor:pointer;font-weight:700}.mouse-keybind-visualizer .chooser-fields,.mouse-keybind-visualizer .chooser-results{grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:1rem;margin:1rem 0;display:grid}.mouse-keybind-visualizer .chooser-fields label{gap:.4rem;display:grid}.mouse-keybind-visualizer .chooser-fields select{width:100%}.mouse-keybind-visualizer .chooser-results article{border:1px solid #294653;border-radius:12px;padding:1rem}.mouse-keybind-visualizer .chooser-results h4{margin:0}