.pad-layout { max-width: 1400px; margin: auto; padding: 24px 32px 28px; }
.pad-layout .preview-caption { margin-bottom: 0; }
.pad-stage { position: relative; width: 100%; height: clamp(280px, calc(100svh - 310px), 850px); margin-bottom: 20px; }
.pad-stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; -webkit-tap-highlight-color: transparent; }
.pad-stage .pad-globe { filter: sepia(0.5); pointer-events: none; }
.pad-stage canvas:active { cursor: grabbing; }
.pad-stage canvas.is-over-intensity { cursor: pointer; }
.pad-stage canvas:focus, .pad-stage canvas:focus-visible { outline: none; }
.pad-intensity-ring { position: absolute; left: 50%; top: 50%; width: var(--pad-ring-size); height: var(--pad-ring-size); overflow: visible; transform: translate(-50%, -50%); pointer-events: none; }
.pad-intensity-ring path { fill: none; stroke: var(--page-border); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.pad-intensity-knob { position: absolute; z-index: 2; box-sizing: border-box; border: 1px solid #000; border-radius: 50%; background: var(--page-background); transform: translate(-50%, -50%); pointer-events: none; }
.pad-message { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 24px; text-align: center; color: var(--page-foreground); }
.pad-message[hidden] { display: none; }
.pad-landmarks { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pad-landmark-point, .pad-landmark-leader, .pad-landmark-label { position: absolute; }
.pad-landmarks [hidden] { display: none; }
.pad-landmarks .pad-landmark-point { z-index: 2; width: 8px; height: 8px; min-height: 0; padding: 0; border-radius: 50%; background: transparent; border: 0; transform: translate(-50%, -50%); pointer-events: auto; cursor: pointer; }
.pad-landmark-point::before, .pad-landmark-point::after { content: ''; position: absolute; border-radius: 50%; background: var(--pad-point-color); pointer-events: none; transition: transform 240ms ease, opacity 240ms ease; }
/* The original bordered dot grows and dissolves over the expanding color fill. */
.pad-landmark-point::before { z-index: 1; inset: 0; box-sizing: border-box; border: 1px solid #fff; box-shadow: 0 0 0 1px #062627; transform: scale(1); opacity: 1; }
.pad-landmark-point::after { left: 50%; top: 50%; width: var(--pad-reticle-fill-size); height: var(--pad-reticle-fill-size); transform: translate(-50%, -50%) scale(var(--pad-reticle-dot-scale)); opacity: 0; }
.pad-landmarks .pad-landmark-point.is-selected { z-index: 4; }
.pad-landmark-point.is-selected::before { box-shadow: 0 0 0 2px #fff, 0 0 0 3px #062627; }
.pad-landmarks .pad-landmark-point.is-centered { pointer-events: none; }
.pad-landmark-point.is-centered::before { transform: scale(var(--pad-reticle-fill-scale)); opacity: 0; }
.pad-landmark-point.is-centered::after { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.pad-landmark-leader { height: 1px; background: var(--page-foreground); box-shadow: 0 1px 0 var(--page-background); transform-origin: left center; opacity: .7; }
.pad-landmark-label { z-index: 3; padding: 2px 6px; border: 1px solid var(--page-border); border-radius: 4px; background: var(--page-background); color: var(--page-foreground); font: 500 11px/16px system-ui, sans-serif; white-space: nowrap; pointer-events: auto; cursor: pointer; user-select: none; }
.pad-landmark-label, .pad-landmark-leader { transition: opacity 180ms ease; }
/* Keep labels measurable during fade-out, but disable their hit targets as soon
   as they start leaving. The native picker provides accessible selection. */
.pad-landmarks .pad-landmark-label[hidden], .pad-landmarks .pad-landmark-leader[hidden] { display: block; opacity: 0; pointer-events: none; }
.pad-landmark-label.is-selected { border-color: var(--page-foreground); font-weight: 700; }
.pad-readout { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 14px 24px; padding-top: 20px; border-top: 1px solid var(--page-border); }
.pad-selection { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; }
.pad-color { display: flex; align-items: center; gap: 9px; font-size: 12px; font-variant-numeric: tabular-nums; }
.pad-color-swatch { display: block; width: 36px; height: 36px; border: 1px solid var(--page-border); border-radius: 6px; }
.pad-color-caption { display: block; margin-bottom: 3px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.pad-picker { position: absolute; z-index: 5; left: 50%; top: var(--pad-picker-top, 91%); width: max-content; max-width: calc(100% - 24px); transform: translateX(-50%); font-size: 11px; }
.pad-picker label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pad-picker select { display: block; width: 114px; max-width: 100%; padding: 4px 6px; border: 1px solid var(--page-border); border-radius: 4px; background: var(--page-background); color: var(--page-foreground); font: inherit; font-weight: 700; }
.pad-picker option { font-weight: 400; }
.pad-sources { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 18px; font-size: 12px; }
.pad-sources a { color: var(--page-muted); text-underline-offset: 3px; }
.pad-emotion { font-size: clamp(28px, 4vw, 46px); font-weight: 500; letter-spacing: -1px; line-height: 1.15; }
.pad-values { color: var(--page-foreground); font-size: 14px; font-variant-numeric: tabular-nums; }
.pad-keyboard { font-size: 12px; margin-top: 5px; }
@media (prefers-reduced-motion: reduce) {
  .pad-landmark-point::before, .pad-landmark-point::after, .pad-landmark-label, .pad-landmark-leader { transition: none; }
}
@media (max-width: 600px) {
  .pad-layout { padding: 20px 18px 24px; }
  .pad-stage { height: clamp(280px, calc(100svh - 370px), 650px); }
  .pad-readout { flex-direction: column; gap: 10px; }
  .pad-values { font-size: 13px; }
}