.dev-navigation{display:flex;align-items:center;justify-content:center;gap:6px 18px;flex-wrap:wrap;padding:9px 16px;background:#293e4b;color:#fff;font:14px/1.5 sans-serif;position:relative;z-index:30;box-sizing:border-box}
.dev-navigation a{color:#e6edf1;text-decoration:none;display:inline-flex;align-items:center;min-height:34px;padding:0 3px}
.dev-navigation a[aria-current=page]{color:white;font-weight:700;border-bottom:2px solid #b7d6c7}
.dev-navigation select{font:inherit;max-width:160px;border:1px solid #8194a0;border-radius:6px;background:#fff;color:#293e4b;padding:7px}
.dev-navigation a:focus-visible,.dev-navigation select:focus-visible{outline:3px solid #e8d7a3;outline-offset:2px}
body.mobile-preview-active>.dev-navigation{display:flex}
.mobile-preview-active .mobile-preview-frame{height:min(780px,calc(100dvh - 165px))}
@media(max-width:540px){.dev-navigation{gap:2px 12px;font-size:12px}.dev-navigation select{width:100%;max-width:210px}.mobile-preview-active .mobile-preview-frame{height:min(780px,calc(100dvh - 210px))}}

/* The viewport toggle shares the navigation row. */
.dev-navigation .dev-preview-toggle{font:inherit;min-height:44px;padding:6px 12px;border:1px solid #a8bbc7;border-radius:6px;background:#fff;color:#293e4b;cursor:pointer;white-space:nowrap}
.mobile-preview-active .mobile-preview-frame{height:min(780px,calc(100dvh - var(--preview-toolbar-height,68px) - 32px));margin:16px auto}
@media(max-width:540px){.dev-navigation{gap:2px 10px;padding:6px 10px}.dev-navigation select{width:auto;max-width:145px}.dev-navigation .dev-preview-toggle{font-size:12px;padding:6px 9px}}

.dev-profile-controls{display:flex;align-items:center;gap:4px;flex:none}
.dev-navigation .dev-profile-step{display:inline-flex;align-items:center;justify-content:center;width:44px;min-width:44px;height:44px;padding:0;border:1px solid #8194a0;border-radius:6px;color:#fff;background:transparent;font:28px/1 sans-serif;cursor:pointer}
.dev-navigation .dev-profile-step:hover{background:#415968}
.dev-navigation .dev-profile-step:focus-visible{outline:3px solid #e8d7a3;outline-offset:2px}
@media(max-width:540px){.dev-navigation{column-gap:8px}.dev-profile-controls{gap:3px}.dev-navigation .dev-profile-step{width:44px;min-width:44px}.dev-profile-controls select{max-width:130px}}