/* Approved compact workspace, shared by all supported locales. */
.mouse-workspace-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 0}
.mouse-workspace .device-title{padding:0;min-width:0}.mouse-workspace .device-title h1{font-size:30px;line-height:1.2;margin:0}
.mouse-workspace .device-title p{display:block;font-size:15px;margin:7px 0 0;color:#59677e;line-height:1.5}
.mouse-workspace .device-toolbar{padding:0;border:0;min-height:0;gap:10px;flex:none;display:flex}
/* Keep readiness and its action together; the indicator never changes size. */
.mouse-start-control{display:flex;align-items:center;gap:8px;min-width:0}
.mouse-workspace #device-status{position:relative;display:flex;align-items:center;height:40px;flex:0 0 98px;width:98px;padding-left:22px;font-size:14px;max-width:none;color:#626e82;line-height:1.4;font-weight:600;transition:color .4s ease,flex-basis .4s ease,width .4s ease}
.mouse-workspace #device-status:is([data-state=failed],[data-state=unsupported]){flex-basis:126px;width:126px}
.mouse-status-copy{position:relative;display:grid;align-items:center;width:100%;height:100%;text-align:left}
.mouse-status-copy>span{grid-area:1/1;min-width:0}
.mouse-status-outgoing{pointer-events:none;animation:status-copy-out .18s ease-in both}
.mouse-status-incoming{animation:status-copy-in .38s .18s ease-out both}
@keyframes status-copy-out{to{opacity:0}}
@keyframes status-copy-in{from{opacity:0}to{opacity:1}}
.mouse-status-rings{position:absolute;left:6px;top:50%;width:0;height:0;pointer-events:none;opacity:0;transition:opacity .5s ease}
.mouse-status-rings i{position:absolute;left:0;top:0;box-sizing:border-box;width:12px;height:12px;transform:translate(-50%,-50%);border:1px solid #3fae84;border-radius:50%;opacity:0;animation:readiness-ripple 3.6s cubic-bezier(.2,.55,.4,1) infinite paused}
.mouse-status-rings i:nth-child(2){border-color:#79c8b2;animation-delay:1.2s}.mouse-status-rings i:nth-child(3){border-color:#9cbfd5;animation-delay:2.4s}
.mouse-workspace #device-status:is([data-state=ready],[data-state=listening],[data-state=armed]) .mouse-status-rings{opacity:1}
.mouse-workspace #device-status:is([data-state=ready],[data-state=listening],[data-state=armed]) .mouse-status-rings i{animation-play-state:running}
@keyframes readiness-ripple{0%{width:12px;height:12px;opacity:0}14%{opacity:.6}85%,100%{width:30px;height:30px;opacity:0}}
.mouse-workspace #device-status::before,.mouse-workspace #device-status::after{content:'';box-sizing:border-box;position:absolute;left:0;top:50%;width:12px;height:12px;margin-top:-6px;border:1px solid transparent;border-radius:50%;pointer-events:none}
.mouse-workspace #device-status::before{border-color:#d4deef;background:transparent;transition:border-color .5s ease,background-color .5s ease,box-shadow .3s ease}
.mouse-workspace #device-status::after{opacity:0}
.mouse-workspace #device-status[data-state=checking]::after{opacity:1;border-top-color:#4b68d5;border-right-color:#85b5e4;animation:readiness-scan 1.25s linear infinite}
.mouse-workspace #device-status:is([data-state=ready],[data-state=listening],[data-state=armed]){color:#286044;font-weight:600}
.mouse-workspace #device-status:is([data-state=ready],[data-state=listening],[data-state=armed])::before{border-color:#9fcdbb;background:radial-gradient(circle,#24996b 0 2px,transparent 2.8px)}

.mouse-workspace #device-status[data-state=ready]::after{border-top-color:#2ba77a;border-right-color:#82d2b4;animation:readiness-settle .7s ease-out}
.mouse-workspace #device-status[data-state=ready]:hover::before{border-color:#399b74;background-color:#e6f4ee;box-shadow:0 0 5px #32996d26}
.mouse-workspace #device-status[data-state=listening]::before{border-color:#79bba0;background:radial-gradient(circle,#19875c 0 3px,transparent 3.6px)}
.mouse-workspace #device-status[data-state=paused]::before{border-color:#c3cad7;background:#f0f3f8}
.mouse-workspace #device-status[data-state=paused]::after{opacity:1;border:solid #778397;border-width:0 1px;border-radius:0;width:4px;height:5px;left:4px;margin-top:-2.5px}
.mouse-workspace #device-status:is([data-state=failed],[data-state=unsupported]){color:#895017}
.mouse-workspace #device-status:is([data-state=failed],[data-state=unsupported])::before{border-color:#ccab7d;background:#fff5e5}
.mouse-workspace #device-status:is([data-state=failed],[data-state=unsupported])::after{content:'!';opacity:1;left:0;border:0;margin-top:-6px;text-align:center;font-size:10px;line-height:12px;font-weight:700;color:#895017}
.mouse-workspace #device-status:is([data-state=awaiting],[data-state=background]){color:#496a98}.mouse-workspace #device-status:is([data-state=awaiting],[data-state=background])::before{border-color:#8aa7ce;background:radial-gradient(circle,#608aca 0 2px,transparent 2.8px)}
@keyframes readiness-scan{to{transform:rotate(360deg)}}
@keyframes readiness-settle{from{opacity:.6}to{opacity:0}}
@media(prefers-reduced-motion:reduce){.mouse-status-copy>span,.mouse-status-rings,.mouse-status-rings i{animation:none!important;transition:none}.mouse-status-outgoing{display:none}.mouse-status-rings{display:none}.mouse-workspace #device-status,.mouse-workspace #device-status[data-state]::before,.mouse-workspace #device-status[data-state]::after{animation:none;transition:none}}
@media(forced-colors:active){.mouse-status-rings{display:none}.mouse-workspace #device-status[data-state]::before{animation:none;background:Canvas;border-color:CanvasText;box-shadow:none}.mouse-workspace #device-status[data-state]::after{animation:none;border-color:CanvasText;color:CanvasText}.mouse-workspace #device-status:is([data-state=ready],[data-state=listening],[data-state=armed])::after{opacity:1;background:CanvasText;width:4px;height:4px;left:4px;margin-top:-2px}}
.mouse-workspace .device-primary,.mouse-workspace .reset-button{min-height:42px;font-size:14px;padding:9px 15px;line-height:1.4}
.mouse-workspace .device-toolbar .reset-button{margin:0}
/* Draw attention to the required start action, without moving the control. */
@property --start-orbit{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes start-orbit{to{--start-orbit:360deg}}
.mouse-workspace #device-toggle{width:158px;min-width:158px;min-height:44px;gap:8px;border-width:2px;border-radius:9px;transition:filter .18s ease}
.mouse-workspace #device-toggle::before{content:'';display:block;width:10px;height:12px;flex:none;background:currentColor;clip-path:polygon(8% 0,100% 50%,8% 100%)}
.mouse-workspace #device-toggle[aria-pressed=false]:not(:disabled){
 color:#fff;border-color:transparent;
 background:linear-gradient(110deg,#354ccd,#6147be 54%,#275ac8) padding-box,conic-gradient(from var(--start-orbit),#8998ef 0% 56%,#68e3df 68%,#bca8ff 79%,#ffbc83 89%,#8998ef 100%) border-box;
 animation:start-orbit 4s linear infinite;
}
.mouse-workspace #device-toggle[aria-pressed=false]:hover{filter:brightness(1.08);animation-play-state:paused}
.mouse-workspace #device-toggle[aria-pressed=true]::before{clip-path:polygon(0 0,35% 0,35% 100%,0 100%,0 0,65% 0,100% 0,100% 100%,65% 100%,65% 0)}
.mouse-workspace #device-toggle[aria-pressed]:focus-visible{outline:none;border-color:#142b55;animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.mouse-workspace #device-toggle{transition:none}.mouse-workspace #device-toggle[aria-pressed=false]:not(:disabled){animation:none}}
@media(forced-colors:active){.mouse-workspace #device-toggle[aria-pressed=false]:not(:disabled){animation:none;background:ButtonFace;color:ButtonText;border-color:ButtonText}.mouse-workspace #device-toggle::before{background:ButtonText}}
.mouse-workspace .mouse-settings{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:0;padding:10px 18px;border-radius:0;border-bottom:1px solid #e1e6ee;background:#f8faff}
.mouse-workspace .mouse-settings label{font-size:14px;min-height:28px;white-space:nowrap}
.mouse-workspace .mouse-settings p{margin:0;font-size:14px;line-height:1.5;flex:1;max-width:none}
.mouse-workspace .mouse-settings a{font-size:14px;margin-left:auto;white-space:nowrap}
.mouse-live-workspace{display:grid;grid-template-columns:minmax(0,1fr) 244px;gap:18px;padding:14px 18px}
.mouse-workspace .mouse-instrument{display:grid;grid-template-columns:232px minmax(0,1fr);gap:16px;padding:0;min-width:0}
.mouse-workspace .mouse-reference{min-height:0;flex-direction:column;gap:0;justify-content:center}
.mouse-workspace .mouse-reference .mouse-diagram{width:232px;height:290px;flex:none}
.mouse-workspace .mouse-test-pad{min-height:285px;border-color:#b4c8eb;border-radius:11px;background:#eff4ff}
.mouse-workspace .mouse-pad-copy{padding:20px 22px;width:100%;max-width:600px}
.mouse-workspace .mouse-pad-copy>.device-kicker{display:block;font-size:12px;letter-spacing:1px;line-height:1.5}
.mouse-workspace .mouse-pad-copy h2{display:block;font-size:clamp(20px,1.8vw,26px);line-height:1.3;letter-spacing:-.5px;margin:10px 0;color:#284774;text-wrap:balance}
.mouse-workspace .mouse-pad-copy #mouse-pad-help{font-size:15px;min-height:3em;line-height:1.5;margin:0 auto;max-width:470px;text-wrap:balance}
.mouse-workspace .mouse-pad-copy .mouse-escape{font-size:12px;line-height:1.5;margin:7px 0 0;color:#5c7191}
.mouse-escape kbd{font:600 11px var(--font);padding:1px 4px;border:1px solid #c9d6e9;border-radius:3px;background:#f8faff}
.mouse-workspace .mouse-scroll-feedback{margin-top:14px;padding-top:10px}.mouse-workspace .mouse-scroll-feedback>p:first-child{min-height:21px;font-size:14px;line-height:1.5}
.mouse-workspace .scroll-directions{grid-template-columns:repeat(4,minmax(0,1fr));margin:8px 0 0;gap:6px}
.mouse-workspace .scroll-directions>span{min-height:34px;font-size:13px}.mouse-workspace .scroll-direction-note{min-height:0!important;font-size:12px!important;line-height:1.5!important;margin:7px 0 0!important}
.mouse-button-results{min-width:0}.mouse-results-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:9px}
.mouse-results-heading h2,.mouse-metrics-heading h2{font-size:14px;line-height:1.5;margin:0;color:#344a6a;font-weight:650}
.mouse-results-heading>span{font-size:12px;color:#627089}
.mouse-workspace .mouse-button-grid{display:grid;grid-template-columns:1fr;gap:6px;margin:0}
.mouse-workspace .mouse-button-result{display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:center;column-gap:10px;padding:5px 11px;border-radius:8px}
.mouse-workspace .mouse-button-result>span{display:flex;align-items:center;gap:7px;min-height:0;font-size:14px;line-height:1.4;grid-column:1;grid-row:1}
.mouse-workspace .mouse-button-name b{font-size:12px;font-weight:600;color:#5c6c84;min-width:10px}
.mouse-workspace .mouse-button-result .optional-button{display:inline;font-size:12px;margin:0;color:#697587;white-space:nowrap}
.mouse-workspace .mouse-button-result>strong{font-size:23px;line-height:1.2;grid-column:2;grid-row:1/3;align-self:center;text-align:right}
.mouse-workspace .mouse-button-result>small{grid-column:1;grid-row:2;line-height:1.5;font-size:12px;margin-top:1px}
.mouse-workspace .mouse-button-result.is-held{background:#e8efff;border-color:#5978d1}
.mouse-metrics{border-top:1px solid #e1e6ee;background:#f8faff}
.mouse-metrics-heading{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:10px 18px 0}
.mouse-metrics-heading p{font-size:12px;line-height:1.5;margin:0;color:#627089}
.mouse-workspace .device-stat-grid{grid-template-columns:repeat(6,minmax(0,1fr));border:0;background:transparent;gap:0;padding:8px 0 10px}
.mouse-workspace .device-stat-grid>div{padding:0 18px;background:none;border-left:1px solid #dce5f2}.mouse-workspace .device-stat-grid>div:first-child{border-left:0}
.mouse-workspace .device-stat-grid span{font-size:14px;line-height:1.5;min-height:0}
.mouse-workspace .device-stat-grid strong{font-size:25px;line-height:1.3;margin-top:4px}
.mouse-workspace .device-report{padding:7px 18px;background:#fff;gap:12px;flex-direction:row;align-items:center}
.mouse-workspace .device-report p{font-size:13px;line-height:1.5}.mouse-workspace .device-report .reset-button{min-height:36px;padding:6px 12px;font-size:13px}
.mouse-workspace .device-help{padding-top:32px}
@media(min-width:901px) and (max-width:1120px){
 .mouse-workspace-heading{gap:16px}.mouse-workspace .device-title p{max-width:360px;font-size:14px}
 .mouse-workspace #device-status{font-size:13px}
 .mouse-live-workspace{grid-template-columns:minmax(0,1fr) 218px;gap:14px;padding:14px}
 .mouse-workspace .mouse-instrument{grid-template-columns:184px minmax(0,1fr);gap:14px}
 .mouse-workspace .mouse-reference .mouse-diagram{width:184px;height:230px}
 .mouse-workspace .mouse-pad-copy{padding:16px 14px}.mouse-workspace .device-stat-grid>div{padding:0 12px}
 .mouse-workspace .device-stat-grid span{font-size:13px}.mouse-workspace .device-stat-grid strong{font-size:23px}
}
@media(max-width:900px){
 .mouse-workspace-heading{align-items:flex-start;gap:12px;flex-wrap:wrap;padding:16px 0}
 .mouse-workspace .device-toolbar{flex-wrap:wrap;justify-content:flex-end}.mouse-workspace #device-status{max-width:none}
 .mouse-workspace .mouse-settings{gap:6px 14px;padding:12px 14px}.mouse-workspace .mouse-settings p{flex-basis:100%;order:3}
 .mouse-live-workspace{grid-template-columns:1fr;gap:14px;padding:14px}
 .mouse-workspace .mouse-instrument{grid-template-columns:168px minmax(0,1fr)}
 .mouse-workspace .mouse-reference .mouse-diagram{width:168px;height:210px}
 .mouse-workspace .mouse-test-pad{min-height:250px}
 .mouse-workspace .mouse-button-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
 .mouse-workspace .mouse-button-result{display:flex;flex-direction:column;align-items:flex-start;padding:9px}
 .mouse-workspace .mouse-button-result>span{flex-wrap:wrap;gap:3px}.mouse-workspace .mouse-button-result .optional-button{display:none}
 .mouse-workspace .mouse-button-result>strong{align-self:flex-start;margin-top:4px}
 .mouse-workspace .device-stat-grid{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:14px}
 .mouse-workspace .device-stat-grid>div:nth-child(4){border-left:0}
}
@media(max-width:600px){
 .mouse-workspace-heading{display:block;padding:14px 0}.mouse-workspace .device-title h1{font-size:26px}
 .mouse-workspace .device-title p{font-size:14px}.mouse-workspace .device-toolbar{margin-top:12px;gap:8px}
 .mouse-workspace .mouse-start-control{flex:1;min-width:min(100%,292px);justify-content:flex-end}.mouse-workspace #device-status{font-size:13px}
 .mouse-workspace .mouse-settings label{font-size:14px}.mouse-workspace .mouse-settings a{font-size:12px}.mouse-workspace .mouse-settings p{font-size:12px}
 .mouse-workspace .mouse-instrument{grid-template-columns:1fr}.mouse-workspace .mouse-reference{display:none}
 .mouse-workspace .mouse-test-pad{min-height:0}.mouse-workspace .mouse-pad-copy{padding:14px}
 .mouse-workspace .mouse-pad-copy>.device-kicker{display:none}.mouse-workspace .mouse-pad-copy h2{font-size:20px;margin:0 0 7px}
 .mouse-workspace .mouse-pad-copy #mouse-pad-help{font-size:14px;min-height:3em}.mouse-workspace .mouse-scroll-feedback{margin-top:10px;padding-top:8px}
 .mouse-workspace .mouse-button-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .mouse-workspace .mouse-button-result,.mouse-workspace .mouse-button-result:last-child{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-column:auto;padding:8px 10px}
 .mouse-workspace .mouse-button-result:last-child{grid-column:1/-1}
 .mouse-workspace .mouse-button-result>strong{align-self:center;margin:0}.mouse-workspace .mouse-button-result .optional-button{display:inline}
 .mouse-workspace .device-stat-grid>div{padding:0 12px}.mouse-workspace .device-stat-grid span{font-size:12px;min-height:3em}
 .mouse-workspace .device-stat-grid strong{font-size:21px}.mouse-metrics-heading{align-items:flex-start;flex-direction:column;gap:2px;padding:10px 12px 0}
 .mouse-workspace .device-report{padding:10px 12px}.mouse-workspace .device-report p{font-size:12px;max-width:220px}
}

@media(min-width:901px) and (max-height:700px){
 .mouse-workspace-heading{padding:10px 0}.mouse-workspace .mouse-live-workspace{padding-top:10px;padding-bottom:10px}
 .mouse-workspace .mouse-button-result{padding-top:4px;padding-bottom:4px}
 .mouse-workspace .mouse-test-pad{min-height:260px}.mouse-workspace .mouse-pad-copy{padding-top:12px;padding-bottom:12px}
}
@media(max-width:360px){
 .mouse-workspace .scroll-directions{grid-template-columns:repeat(2,minmax(0,1fr))}
 .mouse-workspace .device-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .mouse-workspace .device-stat-grid>div:nth-child(4){border-left:1px solid #dce5f2}
 .mouse-workspace .device-stat-grid>div:nth-child(odd){border-left:0}
}