body[data-page="peripheral"] #nav-report{display:none}
body[data-page="peripheral"] .editorial{max-width:none;margin:0;padding:10px 0;border:0}
.input-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:4px 0 20px}.input-category{font-size:12px;color:var(--muted);margin-bottom:6px}.input-heading h1{font-size:28px}
.input-tabs{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:22px}.input-tabs a{border:1px solid var(--line);padding:10px 24px;border-radius:8px;background:var(--surface);text-decoration:none;color:var(--ink)}.input-tabs a[aria-current]{background:var(--accent);color:white;border-color:var(--accent)}
.input-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:24px;min-width:0}.input-card p,.input-help p{font-size:14px;line-height:1.8}.input-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}.input-controls label{display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:13px}.input-controls select{width:auto}.input-status{color:var(--accent);margin:18px 0 12px}
.keyboard-scroll{overflow-x:auto;padding:4px 2px 12px}#keyboard-test{display:grid;grid-template-columns:minmax(0,15fr) 3fr 4fr;gap:14px;min-width:850px;padding:18px;border-radius:10px;background:var(--soft);outline-offset:-3px;cursor:pointer}#keyboard-test.compact{grid-template-columns:minmax(0,15fr) 3fr;min-width:680px}.compact .keyboard-number{display:none}.keyboard-main{display:grid;gap:7px}.input-key-row{display:flex;gap:5px}.input-key{display:flex;align-items:center;justify-content:center;flex:var(--units) 1 0;min-width:0;min-height:43px;font-size:11px;line-height:1.2;border:1px solid #c3cedb;border-bottom-width:3px;border-radius:6px;background:var(--surface);color:var(--ink);user-select:none;padding:3px}.keyboard-navigation{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(6,1fr);gap:5px}.keyboard-navigation [data-key="ArrowUp"]{grid-column:2;grid-row:5}.keyboard-navigation [data-key="ArrowLeft"]{grid-column:1;grid-row:6}.keyboard-navigation [data-key="ArrowDown"]{grid-column:2;grid-row:6}.keyboard-navigation [data-key="ArrowRight"]{grid-column:3;grid-row:6}.keyboard-number{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(5,1fr);gap:5px;padding-top:50px}.keyboard-number [data-key="NumpadAdd"]{grid-column:4;grid-row:2/4}.keyboard-number [data-key="NumpadEnter"]{grid-column:4;grid-row:4/6}.keyboard-number [data-key="Numpad0"]{grid-column:1/3}
.input-key.seen{background:#e4f1e9;border-color:#81ac94;color:#225b39}.input-key.held,.mouse-illustration .held,#drag-handle.held{background:var(--accent);color:white;border-color:var(--accent)}.key-legend{display:flex;flex-wrap:wrap;gap:18px;font-size:12px;margin:14px 0}.key-legend span:before{content:'';display:inline-block;width:12px;height:12px;border:1px solid #c3cedb;border-radius:3px;margin-right:6px;background:var(--surface)}.key-legend .legend-held:before{background:var(--accent)}.key-legend .legend-seen:before{background:#e4f1e9;border-color:#81ac94}
.input-metrics{display:grid;grid-template-columns:minmax(0,2fr) 1fr 1fr;gap:12px;border-top:1px solid var(--line);padding-top:18px;margin-top:18px}.input-metrics dt{font-size:12px;color:var(--muted)}.input-metrics dd{font-size:19px;margin:7px 0 0;overflow-wrap:anywhere}.input-details{margin-top:20px}.input-details summary{cursor:pointer}.input-help{margin:24px 0}.input-help h2,.input-card h2{font-size:18px;margin:0 0 12px}.input-help a,.mouse-aside a{color:var(--accent)}
.mouse-workspace{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:20px}.mouse-aside{display:flex;flex-direction:column;gap:20px}.mouse-aside ol{padding-left:20px;font-size:14px;line-height:2}.mouse-aside p{margin:14px 0}.mouse-metrics{grid-template-columns:repeat(3,1fr)}#mouse-test{margin-top:20px;padding:30px 20px 18px;background:var(--soft);border-radius:10px;text-align:center;user-select:none;touch-action:none}.mouse-illustration{width:185px;height:235px;border:2px solid #a7b7c9;border-radius:80px 80px 65px 65px;margin:0 auto 20px;position:relative;display:flex;overflow:visible;background:var(--surface)}.mouse-illustration>div{width:50%;height:95px;padding-top:35px;border-bottom:1px solid var(--line);font-size:14px}.mouse-illustration>div:first-child{border-right:1px solid var(--line);border-radius:78px 0 0 0}.mouse-illustration>div:nth-child(2){border-radius:0 78px 0 0}.mouse-illustration .mouse-wheel{position:absolute;width:33px;height:60px;left:74px;top:20px;padding-top:21px;font-size:10px;border:1px solid #a7b7c9;border-radius:13px;background:var(--soft)}.mouse-illustration .mouse-side{position:absolute;left:-18px;width:35px;height:38px;padding:12px 0;font-size:10px;border:1px solid #a7b7c9;border-radius:8px;background:var(--surface)}.mouse-side.back{top:145px}.mouse-side.forward{top:100px}.mouse-illustration .mouse-side.held,.mouse-illustration .mouse-wheel.held{background:var(--accent)}.input-drag{margin-top:25px}#drag-track{position:relative;height:76px;border-radius:10px;background:var(--soft);margin:14px 0;padding:0}#drag-target{position:absolute;right:0;width:92px;height:76px;border:2px dashed #91a8c0;border-radius:10px}#drag-handle{position:absolute;left:0;top:14px;width:48px;height:48px;border-radius:50%;background:var(--accent);border:3px solid var(--surface);cursor:grab;touch-action:none}#drag-handle.held{cursor:grabbing}.input-recommendations:empty{display:none}
@media(max-width:1100px){.mouse-workspace{grid-template-columns:minmax(0,1fr) 245px}.input-card{padding:18px}}
@media(max-width:780px){.mouse-workspace{grid-template-columns:1fr}.input-heading h1{font-size:25px}.input-card{padding:16px}.input-metrics{grid-template-columns:1fr 1fr}.input-metrics>div:first-child{grid-column:1/-1}.mouse-metrics{grid-template-columns:repeat(3,1fr)}.mouse-metrics>div:first-child{grid-column:auto}.input-tabs a{padding:10px 18px}.input-heading .btn{white-space:nowrap}.input-controls label{flex-wrap:wrap}}
