/* SVG component styles are scoped; no CSS pixel offsets on moving SVG groups. */
.controller-card:has(.pp-graphic) { padding: 22px; }
.controller-stage:has(.pp-graphic) { height: auto; display: block; }
.pp-graphic { position: relative; margin-top: 20px; }
.pp-graphic-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pp-signal-status { font: 9px var(--mono); color: var(--muted); letter-spacing: .06em; }
.pp-signal-status::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 7px; border-radius: 50%; background: #66768a; }
.is-connected .pp-signal-status { color: var(--accent); }
.is-connected .pp-signal-status::before { background: var(--accent); box-shadow: 0 0 10px #77e8b544; }
.pp-graphic-toolbar label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; }
.pp-graphic-toolbar select { max-width: 145px; border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; color: var(--soft); background: #141d2a; font: 10px var(--sans); color-scheme: dark; }
.pp-stage { display: grid; place-items: center; padding: 22px 0 5px; background: radial-gradient(ellipse at 50% 55%, #548dcc12, transparent 65%); }
.pp-controller { width: 100%; max-width: 880px; height: auto; display: block; overflow: visible; }
.pp-controller text { text-anchor: middle; dominant-baseline: central; user-select: none; pointer-events: none; }
.pp-ground-shadow { fill: #02050c; opacity: .65; }
.pp-shell { fill: url(#pp-shell); stroke: #d3e0ef; stroke-width: 1.5; }
.pp-grip-panel { fill: url(#pp-grip); stroke: #55677c; stroke-width: 1; }
.pp-faceplate { fill: url(#pp-face); stroke: #65768b; stroke-width: 1.5; }
.pp-edge-highlight { fill: none; stroke: #c7d5e6; stroke-width: 1; opacity: .3; }
.pp-control { --key: #77e8b5; cursor: help; outline: none; }
.pp-control .pp-key { fill: url(#pp-cap); stroke: #53667e; stroke-width: 1.5; }
.pp-control:hover .pp-key, .pp-control:focus-visible .pp-key { stroke: #d5e4f5; stroke-dasharray: 2 2; }
.pp-control.is-active .pp-key { fill: var(--key); stroke: var(--key); filter: url(#pp-glow); }
.pp-control.is-active .pp-press { transform: translateY(1.5px); }
.pp-button-base { fill: #0c1420; stroke: #3b495f; stroke-width: 1.5; }
.pp-key-rim { fill: none; stroke: #ffffff0e; stroke-width: 1; }
.pp-symbol { fill: var(--key); font: 700 19px var(--sans); }
.pp-shape-symbol { font: 27px system-ui, sans-serif; }
.pp-control.is-active .pp-symbol, .pp-control.is-active .pp-small-label { fill: #081b19; }
.pp-dpad-well { fill: #15202e; stroke: #3d5067; stroke-width: 1; }
.pp-direction { --key: #bbacff; }
.pp-arrow { fill: none; stroke: #b8c7da; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pp-direction.is-active .pp-arrow { stroke: #201630; }
.pp-dpad-center { fill: #09111c; }
.pp-stick-rim { fill: #0c1523; stroke: #71859e; stroke-width: 1.5; }
.pp-stick-well { fill: url(#pp-well); stroke: #354860; stroke-width: 2; }
.pp-crosshair { stroke: #2e435b; stroke-width: 1; stroke-dasharray: 2 5; }
.pp-deadzone { fill: #77e8b54d; }
.pp-stick-vector { stroke: #77e8b5; stroke-width: 2; }
.pp-stick-shadow { fill: #000; opacity: .65; }
.pp-stick-cap { fill: url(#pp-cap); stroke: #8a9db6; stroke-width: 2; }
.pp-stick-texture { fill: #111e2c; stroke: #6d8299; stroke-width: 3; stroke-dasharray: 1 2; }
.pp-stick-inner { fill: url(#pp-cap); stroke: #374c65; stroke-width: 1; }
.pp-stick-name { fill: #b5c6db; font: 500 11px var(--mono); }
.pp-stick.is-moving .pp-stick-rim { stroke: #77e8b5; }
.pp-stick-click:hover .pp-stick-cap, .pp-stick-click:focus-visible .pp-stick-cap { stroke: #e5f1ff; }
.pp-stick-click.is-active .pp-stick-cap { stroke: #77e8b5; fill: #376d64; filter: url(#pp-glow); }
.pp-stick-click.is-active .pp-stick-inner { fill: #77e8b5; stroke: #bdffe1; }
.pp-stick-click.is-active .pp-stick-name { fill: #07251c; }
.pp-axis-caption { fill: #9aaec7; font: 10px var(--mono); letter-spacing: 1.8px; }
.pp-small-label { fill: #c6d2e4; font: 700 12px var(--sans); }
.pp-system-caption { fill: #8d9db2; font: 8px var(--mono); letter-spacing: .7px; }
.pp-system-icon { fill: none; stroke: #d0dfef; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pp-control.is-active .pp-system-icon { stroke: #0b3024; }
.pp-touch .pp-key { fill: #111c2a; stroke: #566d89; }
.pp-touch-detail { fill: none; stroke: #77a6cf; stroke-width: 1.5; opacity: .35; }
.pp-brand { fill: #8da2bd; font: 10px var(--mono); letter-spacing: 3px; }
.pp-touch.is-active .pp-brand { fill: #0b3024; }
.pp-speaker { fill: #070e18; }
.pp-trigger-slot { fill: #060d17; stroke: #30445d; stroke-width: 1; }
.pp-trigger-cap { fill: url(#pp-cap); stroke: #7288a3; stroke-width: 1.5; }
.pp-trigger-fill { fill: #ffc878; opacity: .7; pointer-events: none; }
.pp-trigger .is-active .pp-trigger-cap { stroke: #ffc878; }
.pp-trigger .pp-control:hover .pp-trigger-cap, .pp-trigger .pp-control:focus-visible .pp-trigger-cap { stroke: #e6f3ff; }
.pp-trigger .pp-small-label { fill: #dce8f7; }
.pp-trigger-readout { fill: #b6a284; font: 12px var(--mono); }
.pp-controller .pp-trigger-readout[text-anchor=end] { text-anchor: end; }
.pp-controller .pp-trigger-readout[text-anchor=start] { text-anchor: start; }
.pp-shoulder { --key: #ffd394; }
.pp-status-led { fill: #546173; }
.pp-controller.is-connected .pp-status-led { fill: #77e8b5; filter: url(#pp-glow); }
.pp-control.is-unavailable { opacity: .42; }
.pp-stick.is-unavailable { opacity: .5; }
.pp-stick-readouts { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin: 5px 0 16px; }
.pp-stick-readouts span { text-align: center; color: #849ab5; font: 9px var(--mono); }
.pp-stick-readouts output { display: block; margin-top: 6px; color: #bed3ec; font: 10px var(--mono); white-space: pre; }
.pp-inspector { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; border: 1px solid var(--line); border-radius: 7px; padding: 11px 12px; background: #0a111b80; }
.pp-inspector span { color: var(--accent); font: 9px var(--mono); }
.pp-inspector output { color: var(--soft); font: 10px var(--mono); }
.pp-mapping-note { margin: 11px 0 0; color: #7c8ba0; font-size: 10px; line-height: 1.6; }
@media (min-width: 1100px) { .overview-grid { grid-template-columns: minmax(0, 1.85fr) minmax(250px, .7fr); } }
@media (max-width: 500px) {
  .controller-card:has(.pp-graphic) { padding: 14px 10px; }
  .pp-graphic-toolbar { flex-wrap: wrap; }
  .pp-stage { padding-top: 18px; }
  .pp-stick-readouts { gap: 5px; }
  .pp-stick-readouts output { font-size: 9px; }
}