.puzzle-choice { margin:18px 0 20px; }
.puzzle-choice label { display:block; margin-bottom:8px; font:10px var(--mono); color:#aebdc4; text-transform:uppercase; letter-spacing:1px; }
.puzzle-choice select { width:100%; min-width:0; padding:13px 10px; border:1px solid #526570; border-radius:2px; background:#111a22; color:#e2eae5; font:600 18px var(--display); }
.puzzle-choice select:focus-visible,.puzzle-zoom select:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.puzzle-choice small { display:block; margin-top:8px; color:#91a3ad; font:10px/1.5 var(--sans); }
.hero-art .color-preview-frame { height:clamp(280px,34vw,440px); }
.puzzle-zoom { display:flex; align-items:center; justify-content:flex-end; gap:10px; margin:0 14px 12px; color:#a5bdc5; font:10px var(--mono); }
.puzzle-zoom select { padding:5px 7px; background:#17232c; color:#d8e5df; border:1px solid #526570; font:inherit; }
.puzzle-zoom small { margin-right:auto; color:#849ca7; font:10px var(--sans); }
.board-wrap { aspect-ratio:auto; max-height:78vh; overflow:auto; overscroll-behavior:contain; touch-action:pan-x pan-y; }
.board-wrap > svg { height:auto; max-width:none; }
@media(max-width:760px){
  .hero-art .color-preview-frame { height:min(85vw,380px); }
  .puzzle-zoom { margin:0 8px 12px; gap:8px; }
  .puzzle-zoom small { font-size:9px; }
}