.test-layout{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:24px;min-width:0;max-width:none;flex:1;min-height:0}
.test-layout #monitor{min-width:0;overflow-y:auto;padding-right:12px;overscroll-behavior:contain}
.test-content{padding:16px 24px;display:flex;flex-direction:column;overflow-x:auto}
.compatibility-notice{flex:none;max-height:180px;overflow:auto;margin-bottom:16px;padding:10px 14px;border:1px solid #d8bd72;border-radius:8px;background:#fff8e7;color:#624c17}.compatibility-notice summary{cursor:pointer;font-weight:600}.compatibility-notice p,.compatibility-notice ul{font-size:12px;color:inherit;margin:8px 0}
.driver-controls{width:440px;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.controllers{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.controller-panel{width:100%;flex:none;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px}
.controller-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}
.controller-heading h3{margin:0;font-size:15px}.controller-heading code{display:none;font-size:11px;color:var(--muted);font-weight:400}
.controller-source{display:flex;align-items:center;gap:12px;font-size:12px;margin-top:8px}.controller-source select{min-width:0;flex:1;padding:7px;border:1px solid var(--line);border-radius:7px;background:var(--paper);color:var(--ink)}
.controller-connection{height:32px;margin:4px 0;font-size:11px;line-height:16px}.controller-inputs{border:0;margin:0;padding:0;min-width:0}
.shoulders{display:flex;justify-content:space-between;gap:32px;margin:6px 12px 8px}.shoulders>div{width:45%}.shoulders label{display:flex;align-items:center;gap:8px;font-size:11px}.shoulders input{min-width:0}.shoulders output{font-family:var(--mono);min-width:28px}.shoulders button{width:100%;margin-top:8px;border-radius:12px 12px 5px 5px;padding:9px;min-height:44px;font-size:14px}
.controller-body{position:relative;background:url("controller.svg") center/100% 100% no-repeat;width:100%;height:280px;padding:12px 12px 16px}
.controller-top{display:flex;justify-content:space-between;align-items:center;gap:10px}.dpad,.face-buttons{display:grid;grid-template:repeat(3,40px)/repeat(3,40px);gap:2px;flex-shrink:0}
.controller-body button{padding:0;font-size:16px}.controller-body .up{grid-area:1/2}.controller-body .left{grid-area:2/1}.controller-body .right{grid-area:2/3}.controller-body .down{grid-area:3/2}
.face-buttons button{border-radius:50%;font-weight:700}.face-buttons .down{color:#256246}.face-buttons .right{color:#a33c32}.face-buttons .left{color:#356da1}.face-buttons .up{color:#856111}
.center-buttons{position:absolute;top:40px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:6px}.center-buttons button{font-size:13px;min-width:48px;min-height:44px;padding:5px 7px;border-radius:16px}
.sticks{display:flex;justify-content:center;gap:60px;margin-top:4px}.stick-group{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11px}.stick{position:relative;width:64px;height:64px;border-radius:50%;background:radial-gradient(circle,#e1e8df 45%,#c7d4c6 46%,#dce5da 49%);touch-action:none;user-select:none}.stick:before,.stick:after{content:'';position:absolute;background:#c4d0c3}.stick:before{width:1px;height:100%}.stick:after{height:1px;width:100%}.stick-cap{width:36px;height:36px;border-radius:50%;background:#526e59;border:4px solid #78917d;box-shadow:0 2px 5px #263b3240;z-index:1;pointer-events:none}.stick-value{font:10px var(--mono);white-space:nowrap}
.stick-clicks{display:flex;justify-content:center;gap:24px;margin-top:4px}.stick-clicks button{padding:8px 12px;min-height:44px;font-size:12px}
.controller-inputs button[aria-pressed=true]{background:var(--green);color:white;border-color:var(--green)}
.controller-inputs:disabled button{opacity:1;cursor:default}.controller-inputs:disabled input{opacity:.65}.controller-hint{margin-bottom:0;font-size:11px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* One controller stays in reach while hardware scrolls independently. */
.controller-switcher{display:flex;gap:8px;flex:none}
.controller-switcher button{flex:1;min-height:40px;padding:6px 12px}
.controller-switcher button[aria-pressed=true]{background:var(--soft);border-color:var(--green);font-weight:600}
.driver-controls>p{display:none}
.driver-controls>h2{margin-bottom:8px}
.controller-hint{line-height:16px;margin-top:6px}
@media(max-width:900px){
 .test-content{padding:12px;overflow-y:auto}
 .test-layout{display:flex;flex-direction:column;flex:none;gap:20px}
 .driver-controls{order:-1;width:100%;max-width:440px;overflow:visible;align-self:center;scrollbar-gutter:auto}
 .test-layout #monitor{overflow:visible;padding-right:0}
}
@media(max-height:740px) and (min-width:901px){
 .test-content{padding-top:8px;padding-bottom:8px}
 .controller-hint{display:none}
 .controller-body{height:280px}
}

.stick-group>span{display:none}
@media(max-height:900px){.controller-hint{display:none}}
@media(max-width:380px){
 .controller-body{padding-left:6px;padding-right:6px}
 .dpad,.face-buttons{grid-template:repeat(3,36px)/repeat(3,36px)}
 .center-buttons button{min-width:42px;padding:4px}
 .sticks{gap:44px}
}