#four-flow{display:grid;gap:22px}
#four-navigation{display:flex;gap:28px;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid #d7dcd9}
#four-navigation .field{gap:18px;margin:0}
.four-step{padding:20px;border:1px solid #d6dedd;border-radius:6px;background:#edf0ed}
.four-step h2{margin-bottom:16px}
#four-counts{max-width:520px}
#four-unit-options,#four-rules{display:grid;gap:12px;grid-template-columns:repeat(4,minmax(0,1fr))}
#four-unit-options{grid-template-columns:repeat(2,minmax(0,1fr));max-width:680px}
#four-unit-options button,#four-rules button{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #c9d4d8;border-radius:5px;padding:10px;text-align:left;color:#304e64;font:inherit;font-size:14px;cursor:pointer}
#four-unit-options button[aria-pressed=true],#four-rules button[aria-pressed=true]{border-color:#365b72;box-shadow:inset 0 0 0 1px #365b72;background:#e6eeef}
#four-unit-options svg{width:56px;height:56px;flex-shrink:0}
#four-rules svg{width:74px;height:74px;flex-shrink:0}
.four-unit-row{display:flex;align-items:flex-start;gap:24px;margin-top:20px}
#four-editor{width:220px;flex-shrink:0}
#four-editor-tools{max-width:360px}
#four-roles{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:18px}
#four-roles label{display:flex;gap:12px;align-items:center;font-size:14px}
#four-palette #palette{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
#four-palette .paint-hint{max-width:700px}
body.four-mode .preview-heading .eyebrow{font-size:13px}
body.four-mode .preset-panel{margin-top:28px}
@media(max-width:900px){#four-rules{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.four-step{padding:14px}#four-unit-options{grid-template-columns:1fr}.four-unit-row{flex-direction:column}#four-editor{max-width:100%}#four-palette #palette{grid-template-columns:1fr}#four-rules button{flex-direction:column;text-align:center}#four-navigation{gap:14px}#four-roles label{width:100%;justify-content:space-between}}


@media(min-width:701px){
  #four-navigation{gap:12px 20px}
  #four-navigation .field{gap:10px}
  #four-rules{grid-template-columns:repeat(2,minmax(0,1fr))}
  #four-unit-options button{gap:8px;padding:8px}
  #four-unit-options svg{width:48px;height:48px}
  .four-unit-row{gap:16px}
  #four-editor{width:160px}
  #four-editor-tools{flex:1;min-width:0}
  #four-editor-tools .rotation-row{flex-wrap:wrap}
  #four-palette #palette{grid-template-columns:1fr}
}

@media(min-width:701px) and (max-width:1100px){
  .four-step{padding:14px}
  #four-unit-options button,#four-rules button{flex-direction:column;text-align:center;gap:8px}
  .four-unit-row{flex-wrap:wrap}
  #four-editor-tools{flex-basis:180px}
  #four-navigation .field{flex-wrap:wrap}
}