.pg { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--gap); align-items: start; }

.pg-view { position: relative; height: calc(100vh - 320px); min-height: 380px; border: var(--border-weight) solid var(--ink); background: var(--theme); }
.pg-view canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.pg-view canvas:active { cursor: grabbing; }
.pg-readout { position: absolute; left: 12px; bottom: 8px; margin: 0; font-size: var(--t-xs); color: var(--ink); pointer-events: none; }

.pg-panel { font-size: var(--t-xs); color: var(--ink); }
.pg-panel fieldset { border: 0; border-top: var(--border-weight) solid var(--ink); margin: 0 0 20px; padding: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pg-panel legend { float: left; width: 100%; padding: 0; margin-bottom: 8px; color: var(--ink-muted); }
.pg-panel button { font: inherit; color: var(--ink); background: none; border: 1px solid var(--ink); padding: 7px 10px; cursor: pointer; }
.pg-panel button:hover { color: var(--accent); border-color: var(--accent); }
.pg-panel button[aria-pressed="true"] { background: var(--ink); color: var(--theme); border-color: var(--ink); }
.pg-groups button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.pg-panel button:focus-visible, .pg-explode input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pg-explode { display: block; width: 100%; margin-top: 8px; }
.pg-explode input { display: block; width: 100%; margin-top: 6px; accent-color: var(--accent); }
.pg-explode input:disabled { opacity: .35; }
.pg-hint { margin: 0; color: var(--ink-muted); line-height: 1.6; }

@media (max-width: 860px) {
    .pg { grid-template-columns: minmax(0, 1fr); }
    .pg-view { height: 62vh; }
}