.puffy-maker .puffy-palette-groups { justify-content:center; margin:0 0 8px; }
.puffy-maker .puffy-surface-panel { display:flex; flex-direction:column; gap:16px; }
.puffy-maker .puffy-choice-group { min-width:0; }
.puffy-maker .puffy-choice-group h2 { margin:0 0 8px; }
.puffy-maker .puffy-choice-group .thumb { min-width:0; height:120px; }
.puffy-maker .puffy-choice-group .thumb-canvas { aspect-ratio:4 / 3; }
.puffy-maker .puffy-choice-group .thumb-name { font-size:13px; }
.puffy-maker .puffy-editor-note { font-size:12px; color:#cfc4c9; margin:0; line-height:1.6; }
/* Keep the shared decision-button size even when the settings exceed the panel height. */
.puffy-maker .puffy-surface-panel .hub-finish { flex-shrink:0; min-height:52px; height:52px; margin-top:0; padding:0 20px; white-space:nowrap; }
@media (min-width:900px) and (min-height:520px) {
  .puffy-maker .puffy-surface-panel .hub-finish { min-height:56px; height:56px; }
}

/* Native scrolling, with a quiet rail that belongs to the maker's dark palette. */
.puffy-maker { color-scheme:dark; }
.puffy-maker :is(.workspace, .panel, .lm-help-dialog) {
  scrollbar-width:thin;
  scrollbar-color:#765563 transparent;
}
.puffy-maker :is(.workspace, .panel, .lm-help-dialog)::-webkit-scrollbar { width:8px; }
.puffy-maker :is(.workspace, .panel, .lm-help-dialog)::-webkit-scrollbar-track { background:transparent; }
.puffy-maker :is(.workspace, .panel, .lm-help-dialog)::-webkit-scrollbar-thumb {
  background:#765563; border:2px solid transparent; border-radius:999px; background-clip:padding-box;
}
.puffy-maker :is(.workspace, .panel, .lm-help-dialog)::-webkit-scrollbar-thumb:hover { background-color:var(--accent); }
@media (max-width:700px) {
  .puffy-maker .puffy-surface-panel { gap:14px; }
  .puffy-maker .puffy-choice-group .thumb-canvas { aspect-ratio:16 / 9; }
}
@media (max-width:420px) { .puffy-maker .puffy-choice-group .thumb { height:104px; } }

.puffy-maker .hint, .puffy-maker .tap-hint { color:#604b46; text-shadow:none; }

.puffy-maker .puffy-adjustments { padding:14px; border:1px solid #57454d; border-radius:14px; display:flex; flex-direction:column; gap:14px; }
.puffy-maker .puffy-adjustments h2 { margin:0; }
.puffy-maker .puffy-adjustment h3 { margin:0 0 8px; font-size:13px; }
.puffy-maker .puffy-adjustment-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.puffy-maker .puffy-adjustment-options .chip { width:100%; padding:0 2px; font-size:12px; }
.puffy-maker .puffy-reset { align-self:flex-start; min-height:36px; }