.controller-demo{min-height:100vh;background:#14211e;color:#dcece3;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overflow-x:hidden;display:flex;flex-direction:column}.demo-header{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:20px 30px;border-bottom:1px solid #ffffff16;font-size:12px;color:#a0b8a9}.demo-header .icon-button{color:#b6d7c3;border-color:#ffffff30}.demo-header .icon-button:hover{background:#ffffff16}.demo-brand{display:flex;align-items:center;gap:9px;font-size:18px;font-weight:600;color:#d8f59a}.demo-brand .lucide{width:17px}.demo-options{display:flex;gap:18px;justify-content:center;align-items:center;padding:23px 20px}.demo-options label{margin:0;display:flex;align-items:center;gap:10px;color:#abc7b7;font-size:12px}.demo-options select{background:#1f342c;border-color:#42604c;color:#d6eccf;width:80px;padding:7px 10px}.demo-segment{display:flex;border:1px solid #42604c;border-radius:4px;overflow:hidden}.demo-segment button{border:0;background:transparent;color:#9fbca9;padding:8px 17px;font-size:12px}.demo-segment .active{background:#41644c;color:#effcd8}.demo-playfield{width:min(1200px,calc(100% - 80px));margin:auto;min-height:400px;display:grid;grid-template-columns:300px minmax(180px,1fr) 300px;gap:25px;align-items:center;padding:20px 0 60px}.demo-stick{width:280px;height:280px;background:#26382f;border:3px solid #4d6a55;border-radius:50%;position:relative;touch-action:none;cursor:grab;box-shadow:inset 0 0 0 12px #1c2c25,inset 0 0 0 14px #34513d}.demo-stick.active{border-color:#a9cf73}.demo-stick-knob{position:absolute;width:132px;height:132px;left:calc(50% - 66px);top:calc(50% - 66px);border-radius:50%;background:#b4c99a;border:5px solid #d4dfb9;box-shadow:0 5px 18px #0004;pointer-events:none}.demo-stick.active .demo-stick-knob{background:#883e3a;border-color:#ad6459}.stick-cross:before,.stick-cross:after{content:"";position:absolute;background:#0f211766;left:24%;right:24%;top:calc(50% - 1px);height:2px}.stick-cross:after{transform:rotate(90deg)}.demo-middle{align-self:center;min-width:0;text-align:center}.demo-functional{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:200px;margin:auto}.demo-functional button{background:#2b3b32;color:#b6cbaa;border:1px solid #50634c;border-radius:4px;min-height:36px;font-size:12px;touch-action:none}.demo-functional button.pressed{color:#14211e;background:#d3ed98}.demo-middle>p{color:#789580;font-size:11px;line-height:1.8;margin:23px auto 0;min-height:40px}.demo-buttons{width:300px;height:280px;position:relative;touch-action:none}.demo-key{position:absolute;border:0;background:none;padding:0;line-height:0;width:100px;height:100px;touch-action:none;-webkit-touch-callout:none;border-radius:50%}.demo-key img{width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none}.demo-key.pressed{filter:brightness(1.3);transform:scale(.94)}.four .key-y{left:24px;top:12px}.four .key-x{left:154px;top:12px}.four .key-b{left:24px;top:150px}.four .key-a{left:154px;top:150px}.four .key-z,.four .key-c{display:none}.six .demo-key{width:82px;height:82px}.six .key-x{left:0;top:35px}.six .key-y{left:103px;top:35px}.six .key-z{left:206px;top:35px}.six .key-a{left:0;top:159px}.six .key-b{left:103px;top:159px}.six .key-c{left:206px;top:159px}.demo-footer{padding:18px 30px;border-top:1px solid #ffffff16;display:flex;gap:25px;justify-content:space-between;font-size:11px;color:#789580}.demo-footer a{color:#d2ed9c;white-space:nowrap;display:flex;gap:8px;align-items:center}.demo-footer .lucide{width:14px}.demo-key:focus-visible{outline-color:#daec9c}
@media(max-width:1100px){.demo-playfield{grid-template-columns:240px minmax(120px,1fr) 240px;gap:10px;min-height:300px}.demo-stick{width:220px;height:220px}.demo-stick-knob{width:108px;height:108px;left:calc(50% - 54px);top:calc(50% - 54px)}.demo-buttons{transform:scale(.8);transform-origin:left center;width:240px}.demo-middle>p{font-size:10px}.demo-functional{gap:8px}.demo-functional button{font-size:10px}}
@media(max-width:760px){.demo-header{padding:12px 18px}.demo-header>span{font-size:10px}.demo-brand{font-size:15px}.demo-header .icon-button{width:32px;height:32px}.demo-header .lucide{width:16px}.demo-options{padding:15px}.demo-playfield{width:calc(100% - 36px);grid-template-columns:190px minmax(70px,1fr) 190px;min-height:260px;padding-bottom:30px}.demo-stick{width:180px;height:180px}.demo-stick-knob{width:88px;height:88px;left:calc(50% - 44px);top:calc(50% - 44px)}.demo-buttons{transform:scale(.63);width:190px;transform-origin:left center}.demo-functional{grid-template-columns:1fr;gap:7px}.demo-functional button{min-height:30px}.demo-middle>p{display:none}.demo-footer{padding:14px 18px;font-size:10px;gap:20px}.demo-footer span{max-width:75%}}
@media(max-width:540px){.demo-header>span{display:none}.demo-playfield{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5px;min-height:370px;align-content:center;padding-bottom:25px}.demo-stick{width:150px;height:150px;justify-self:start;grid-row:2}.demo-stick-knob{width:74px;height:74px;left:calc(50% - 37px);top:calc(50% - 37px)}.demo-buttons{width:160px;height:280px;transform:scale(.55);grid-column:2;grid-row:2;justify-self:end}.demo-middle{grid-row:1;grid-column:1/-1;align-self:end;padding:15px 0}.demo-functional{grid-template-columns:repeat(4,1fr);max-width:320px;gap:8px}.demo-functional button{font-size:11px}.demo-footer{flex-direction:column;gap:8px}.demo-footer span{max-width:none}}
@media(max-width:360px){.demo-stick{width:128px;height:128px}.demo-stick-knob{width:64px;height:64px;left:calc(50% - 32px);top:calc(50% - 32px)}.demo-buttons{width:140px;transform:scale(.46)}}