:root{font-family:Segoe UI,system-ui,sans-serif;color:#eee;background:#20211f;color-scheme:dark}*{box-sizing:border-box}body{margin:0;padding:24px}main{max-width:760px;margin:auto}header{display:flex;align-items:center;gap:12px;margin-bottom:18px}header strong{font-size:18px}#connection{font-size:12px;color:#b9c3b0;margin-left:auto}button,input,select,textarea{font:inherit}button{border:1px solid #666950;border-radius:12px;background:#30322c;color:#f2f3ed;padding:10px 15px;cursor:pointer;min-height:42px}button:hover:not(:disabled){background:#414638}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid #e6c75b;outline-offset:3px}button:disabled{opacity:.45;cursor:default}.controls{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.controls button{min-height:86px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;font-weight:600;font-size:16px}.controls button[aria-pressed=true]{background:#425538;border-color:#96ad7c}#ask{border-color:#c9a33d}kbd{font:12px Segoe UI,system-ui;color:#d4c78b;white-space:nowrap}.status{display:flex;align-items:center;gap:10px;min-height:56px}.status p{flex:1;font-size:13px;color:#bec1b6;margin:10px 0}.status button{padding:6px 12px;font-size:13px;min-height:34px}.error{color:#ffbcaa!important}section{border-top:1px solid #4b4e42;margin-top:10px;padding-top:14px}h2{font-size:15px;margin:20px 0 10px}section p{font-size:13px;color:#b8bbae;line-height:1.5}label{display:block;font-size:13px;margin:12px 0}input,select,textarea{display:block;width:100%;background:#292c26;border:1px solid #626651;border-radius:7px;color:#eee;padding:10px;margin-top:6px}textarea{resize:vertical}#shortcutFields{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.settingsActions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0}.settingsActions button{font-size:13px}.settingsActions span{font-size:12px;color:#b8bbae}img{max-width:100%;max-height:260px;object-fit:contain;margin-top:12px;border:1px solid #626651;border-radius:8px}summary{cursor:pointer;margin:16px 0}pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:350px;overflow:auto;font:14px/1.5 Consolas,monospace;padding:14px;background:#282a25;border-radius:8px}[hidden]{display:none!important}@media(max-width:540px){body{padding:16px}.controls{grid-template-columns:repeat(2,1fr)}#shortcutFields{grid-template-columns:1fr}header{gap:8px}header strong{font-size:16px}#connection{max-width:115px}}

.scroll-control{display:flex;align-items:center;justify-content:center;gap:20px;margin:14px auto 20px}#scrollPad{position:relative;flex-shrink:0;width:156px;height:156px;border:1px solid #6e745c;border-radius:50%;background:radial-gradient(circle,#393e32,#252921);touch-action:none;user-select:none;cursor:grab;outline-offset:5px}#scrollPad:focus-visible{outline:2px solid #e6c75b}#scrollPad.dragging{cursor:grabbing}#scrollBall{position:absolute;left:50%;top:50%;margin:-22px;width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#dce5bb,#87966c);box-shadow:0 3px 10px #0008;pointer-events:none;transition:transform .16s ease-out}#scrollPad.dragging #scrollBall{transition:none}.axis{position:absolute;background:#747b5c55;pointer-events:none}.axis.vertical{left:50%;top:12px;width:1px;height:130px}.axis.horizontal{top:50%;left:12px;height:1px;width:130px}.scroll-control p{font-size:14px;line-height:1.6;margin:0}.scroll-control small{font-size:12px;color:#b8bbae}@media(prefers-reduced-motion:reduce){#scrollBall{transition:none}}@media(max-width:400px){.scroll-control{gap:14px}#scrollPad{width:140px;height:140px}.axis.vertical{height:114px}.axis.horizontal{width:114px}}

@media(max-width:520px){.status{flex-wrap:wrap;justify-content:flex-end;padding-bottom:8px}.status p{flex-basis:100%;margin-bottom:0}}