* {
  box-sizing:border-box
}

body {
  margin:0;
  font:13px/1.5 var(--fw-font);
  background:var(--fw-bg);
  color:var(--fw-text)
}

button,input,select,textarea {
  font-family:inherit
}

button,a,input,select,textarea,summary,[tabindex] {
  -webkit-tap-highlight-color:transparent
}

button {
  touch-action:manipulation
}

a {
  color:var(--fw-accent-text)
}

[hidden] {
  display:none!important
}

.catalog-skip {
  position:fixed;
  top:-100px;
  left:20px;
  z-index:999;
  background:var(--fw-surface);
  padding:12px
}

.catalog-skip:focus {
  top:8px
}

.catalog-header {
  height:65px;
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 27px 0 23px;
  background:var(--fw-surface);
  border-bottom:1px solid var(--fw-border);
  gap:20px
}

.catalog-brand {
  display:flex;
  gap:11px;
  align-items:center;
  text-decoration:none;
  color:var(--fw-text);
  font-size:17px;
  font-weight:650;
  letter-spacing:-.4px;
  min-width:206px
}

.catalog-logo {
  display:grid;
  grid-template-columns:repeat(2,10px);
  gap:3px;
  transform:skewY(-5deg)
}

.catalog-logo i {
  height:10px;
  background:var(--fw-accent);
  border-radius:2px
}

.catalog-logo i:nth-child(2) {
  opacity:.65
}

.catalog-logo i:nth-child(3) {
  opacity:.8
}

.catalog-header nav {
  display:flex;
  align-items:stretch;
  height:100%;
  gap:29px;
  flex:1;
  margin-left:18px
}

.catalog-header-link {
  border:0;
  background:none;
  font:inherit;
  font-size:13px;
  color:var(--fw-muted);
  padding:0;
  position:relative;
  cursor:pointer
}

.catalog-header-link[aria-current="page"] {
  color:var(--fw-accent-text);
  font-weight:600
}

.catalog-header-link[aria-current="page"]:after {
  content:'';
  height:2px;
  background:var(--fw-accent);
  position:absolute;
  left:0;
  right:0;
  bottom:0
}

.catalog-header-actions {
  display:flex;
  align-items:center;
  gap:13px
}

.catalog-version {
  font:11px/1.4 Consolas,monospace;
  color:var(--fw-muted);
  padding:3px 7px;
  border:1px solid var(--fw-border);
  border-radius:4px
}

.catalog-header-divider {
  width:1px;
  height:22px;
  background:var(--fw-border)
}

.catalog-mobile {
  display:none
}

.catalog-shell {
  display:grid;
  grid-template-columns:226px minmax(0,1fr);
  min-height:calc(100dvh - 89px)
}

.catalog-sidebar {
  position:sticky;
  top:65px;
  height:calc(100dvh - 89px);
  background:var(--fw-sidebar);
  border-right:1px solid var(--fw-border);
  padding:24px 14px 16px;
  display:flex;
  flex-direction:column;
  overflow:auto
}

.catalog-search {
  margin:0 3px 22px
}

.catalog-search .fw-input {
  font-size:12px;
  height:33px;
  background:var(--fw-surface);
  padding-right:30px
}

.catalog-search kbd {
  position:absolute;
  right:9px;
  top:7px;
  font-size:10px;
  color:var(--fw-muted);
  border:1px solid var(--fw-border);
  border-radius:3px;
  padding:0 4px
}

.catalog-nav-section {
  font-size:10px;
  letter-spacing:1.15px;
  text-transform:uppercase;
  color:var(--fw-muted);
  padding:22px 13px 8px;
  font-weight:600
}

.catalog-nav {
  display:flex;
  flex-direction:column;
  gap:3px
}

.catalog-nav-item {
  position:relative;
  display:flex;
  align-items:center;
  gap:11px;
  min-height:36px;
  border:0;
  text-decoration:none;
  background:transparent;
  color:var(--fw-text);
  font:inherit;
  font-size:12px;
  text-align:left;
  border-radius:5px;
  padding:8px 12px;
  cursor:pointer;
  flex-shrink:0
}

.catalog-nav-item:hover {
  background:var(--fw-border)
}

.catalog-nav-item[aria-current="page"] {
  background:var(--fw-accent-soft);
  color:var(--fw-accent-text);
  font-weight:600
}

.catalog-nav-item[aria-current="page"]:before {
  content:'';
  position:absolute;
  left:0;
  top:11px;
  bottom:11px;
  width:3px;
  background:var(--fw-accent);
  border-radius:3px
}

.catalog-nav-item .fw-icon {
  width:18px;
  height:18px;
  color:var(--fw-muted)
}

.catalog-nav-item[aria-current="page"] .fw-icon {
  color:var(--fw-accent)
}

.catalog-count {
  margin-left:auto;
  font-size:10px;
  color:var(--fw-muted);
  font-weight:400
}

.catalog-sidebar-bottom {
  margin-top:auto;
  padding-top:36px
}

.catalog-release {
  padding:14px 12px;
  border:1px solid var(--fw-border);
  border-radius:6px;
  margin:0 3px 14px;
  background:color-mix(in srgb,var(--fw-surface) 50%,transparent);
  font-size:11px
}

.catalog-release strong {
  display:flex;
  gap:6px;
  align-items:center;
  font-size:12px;
  font-weight:600
}

.catalog-release p {
  color:var(--fw-muted);
  margin:6px 0 10px;
  line-height:1.6
}

.catalog-release a {
  font-size:11px;
  text-decoration:none;
  display:flex;
  gap:5px;
  align-items:center
}

.catalog-main {
  padding:28px 32px 60px;
  min-width:0;
  max-width:1720px;
  width:100%;
  margin:auto
}

.catalog-topline {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:25px
}

.catalog-topline .fw-breadcrumbs {
  font-size:11px
}

.catalog-shortcut {
  color:var(--fw-muted);
  font-size:11px;
  display:flex;
  align-items:center;
  gap:5px
}

.catalog-titleline {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px
}

.catalog-eyebrow {
  font-size:10px;
  letter-spacing:1.8px;
  color:var(--fw-accent-text);
  font-weight:650;
  margin-bottom:9px;
  text-transform:uppercase
}

.catalog-title {
  font-size:31px;
  line-height:1.2;
  font-weight:650;
  letter-spacing:-.85px;
  margin:0 0 11px
}

.catalog-intro {
  font-size:13px;
  line-height:1.8;
  color:var(--fw-muted);
  margin:0;
  max-width:620px
}

.catalog-title-actions {
  align-self:flex-end;
  margin-bottom:3px
}

.catalog-page-tabs {
  margin-top:25px;
  margin-bottom:25px;
  gap:28px
}

.catalog-page-tabs .fw-tab {
  font-size:12px;
  padding:13px 0
}

.catalog-content {
  display:grid;
  grid-template-columns:minmax(0,1fr) 220px;
  gap:25px;
  align-items:start
}

.catalog-primary {
  min-width:0
}

.catalog-banner {
  position:relative;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--fw-accent) 13%,var(--fw-border));
  background:linear-gradient(115deg,var(--fw-accent-soft),var(--fw-surface));
  border-radius:8px;
  min-height:161px;
  padding:24px 27px;
  margin-bottom:26px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px
}

.catalog-banner-text {
  position:relative;
  z-index:1;
  max-width:68%
}

.catalog-banner-tag {
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:1.4px;
  color:var(--fw-accent-text);
  display:flex;
  gap:6px;
  align-items:center;
  margin-bottom:8px
}

.catalog-banner-tag .fw-icon {
  width:13px;
  height:13px
}

.catalog-banner h2 {
  font-size:21px;
  letter-spacing:-.5px;
  margin:0 0 7px;
  font-weight:600;
  line-height:1.3
}

.catalog-banner p {
  font-size:11px;
  color:var(--fw-muted);
  margin:0 0 13px;
  max-width:350px;
  line-height:1.7
}

.catalog-banner-link {
  font-size:11px;
  font-weight:600;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:6px
}

.catalog-window-art {
  width:156px;
  height:116px;
  position:relative;
  flex-shrink:0;
  transform:rotate(-6deg);
  margin-right:5px
}

.catalog-mini-window {
  width:132px;
  height:98px;
  position:absolute;
  left:17px;
  top:9px;
  border:1px solid color-mix(in srgb,var(--fw-accent) 18%,var(--fw-border));
  background:var(--fw-surface);
  border-radius:7px;
  box-shadow:0 8px 20px #46358312;
  overflow:hidden
}

.catalog-mini-window:nth-child(1) {
  transform:translate(-17px,9px);
  opacity:.45
}

.catalog-mini-window:nth-child(2) {
  transform:translate(10px,-6px);
  opacity:.65
}

.catalog-mini-top {
  height:20px;
  background:var(--fw-surface-alt);
  border-bottom:1px solid var(--fw-border);
  display:flex;
  align-items:center;
  gap:3px;
  padding:0 8px
}

.catalog-mini-top i {
  width:3px;
  height:3px;
  background:var(--fw-border-strong);
  border-radius:50%
}

.catalog-mini-body {
  display:flex;
  height:78px
}

.catalog-mini-side {
  width:32px;
  background:var(--fw-sidebar);
  padding:10px 6px;
  display:flex;
  flex-direction:column;
  gap:7px
}

.catalog-mini-side i {
  width:20px;
  height:4px;
  background:var(--fw-border);
  border-radius:2px
}

.catalog-mini-side i:first-child {
  background:var(--fw-accent);
  opacity:.7
}

.catalog-mini-content {
  flex:1;
  padding:12px 9px
}

.catalog-mini-line {
  height:5px;
  width:48px;
  background:var(--fw-border);
  border-radius:2px;
  margin-bottom:7px
}

.catalog-mini-boxes {
  display:flex;
  gap:4px;
  margin-top:9px
}

.catalog-mini-boxes i {
  height:23px;
  width:23px;
  border:1px solid var(--fw-border);
  background:var(--fw-accent-soft);
  border-radius:3px
}

.catalog-section-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
  gap:12px
}

.catalog-section-title h2 {
  font-size:15px;
  font-weight:600;
  letter-spacing:-.2px;
  margin:0;
  display:flex;
  align-items:center;
  gap:9px
}

.catalog-section-title .catalog-total {
  font-size:10px;
  font-weight:400;
  color:var(--fw-muted);
  background:var(--fw-sidebar);
  padding:2px 6px;
  border:1px solid var(--fw-border);
  border-radius:4px
}

.catalog-section-title .fw-select {
  font-size:11px;
  width:auto;
  min-height:29px;
  padding:4px 27px 4px 9px
}

.catalog-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:15px
}

.catalog-component-card {
  background:var(--fw-surface);
  border:1px solid var(--fw-border);
  border-radius:7px;
  box-shadow:var(--fw-shadow);
  overflow:hidden;
  min-width:0;
  display:flex;
  flex-direction:column;
  transition:border-color var(--fw-duration)
}

.catalog-component-card:hover {
  border-color:color-mix(in srgb,var(--fw-accent) 35%,var(--fw-border))
}

.catalog-preview {
  min-height:190px;
  padding:22px 19px;
  display:flex;
  justify-content:center;
  flex-direction:column;
  flex:1;
  gap:12px;
  background:var(--fw-surface)
}

.catalog-preview .fw-input,.catalog-preview .fw-select {
  font-size:11px
}

.catalog-preview .fw-btn {
  font-size:11px;
  min-height:31px;
  padding:6px 10px
}

.catalog-preview .fw-label,.catalog-preview .fw-check,.catalog-preview .fw-switch,.catalog-preview .fw-radio {
  font-size:11px
}

.catalog-preview .fw-row {
  gap:7px
}

.catalog-card-foot {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  border-top:1px solid var(--fw-border);
  padding:12px 15px;
  background:var(--fw-surface-alt)
}

.catalog-card-name {
  border:0;
  background:none;
  text-align:left;
  padding:0;
  font:inherit;
  font-size:12px;
  font-weight:600;
  color:var(--fw-text);
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px
}

.catalog-card-foot small {
  display:block;
  font-size:10px;
  color:var(--fw-muted);
  margin-top:2px
}

.catalog-card-foot .fw-icon {
  width:15px;
  height:15px;
  color:var(--fw-muted)
}

.catalog-wide {
  grid-column:span 2
}

.catalog-wide .catalog-preview {
  padding:0;
  justify-content:flex-start;
  gap:0
}

.fw-data-heading {
  padding:15px 15px 11px;
  display:flex;
  justify-content:space-between;
  align-items:center
}

.fw-data-heading strong {
  font-size:12px;
  font-weight:600
}

.fw-data-heading small {
  color:var(--fw-muted);
  font-size:10px;
  margin-left:7px
}

.catalog-preview .fw-table th,.catalog-preview .fw-table td {
  padding:9px 12px;
  font-size:10px
}

.catalog-preview .fw-table .fw-badge {
  font-size:9px;
  padding:2px 6px
}

.catalog-preview .fw-avatar {
  width:23px;
  height:23px;
  font-size:8px
}

.catalog-preview .fw-alert {
  font-size:10px;
  padding:10px;
  line-height:1.6
}

.catalog-preview .fw-alert .fw-icon {
  width:17px;
  height:17px
}

.catalog-preview .fw-alert strong {
  font-size:10px
}

.catalog-preview .fw-help {
  font-size:10px
}

.catalog-card-status {
  margin-left:auto;
  margin-right:7px;
  display:flex;
  align-items:center;
  gap:4px;
  color:var(--fw-success);
  font-size:9px
}

.catalog-card-status:before {
  content:'';
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--fw-success)
}

.catalog-aside {
  border:1px solid var(--fw-border);
  border-radius:7px;
  background:var(--fw-surface);
  padding:18px 17px;
  position:sticky;
  top:87px;
  font-size:11px;
  box-shadow:var(--fw-shadow)
}

.catalog-aside-title {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:600;
  margin:0 0 4px
}

.catalog-aside-title .fw-icon {
  width:15px;
  height:15px
}

.catalog-aside-sub {
  color:var(--fw-muted);
  font-size:10px;
  line-height:1.7;
  margin:0 0 19px
}

.catalog-setting {
  border-top:1px solid var(--fw-border);
  padding-top:17px;
  margin-top:17px
}

.catalog-setting-label {
  font-size:11px;
  font-weight:500;
  margin-bottom:10px;
  display:flex;
  align-items:center;
  justify-content:space-between
}

.catalog-setting-value {
  font-weight:400;
  color:var(--fw-muted);
  font-size:10px
}

.catalog-theme-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px
}

.catalog-theme {
  border:1px solid transparent;
  padding:0;
  aspect-ratio:1;
  border-radius:6px;
  background:transparent;
  cursor:pointer;
  position:relative
}

.catalog-theme>span {
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  border-radius:4px;
  background:var(--swatch);
  border:0
}

.catalog-theme[aria-pressed="true"] {
  border-color:var(--fw-accent)
}

.catalog-theme .fw-icon {
  width:16px;
  height:16px;
  color:#fff
}

.catalog-theme:not([aria-pressed="true"]) .fw-icon {
  display:none
}

.catalog-segment {
  display:flex;
  padding:3px;
  background:var(--fw-sidebar);
  border:1px solid var(--fw-border);
  border-radius:5px;
  gap:3px
}

.catalog-segment button {
  flex:1;
  border:0;
  border-radius:3px;
  background:transparent;
  color:var(--fw-muted);
  padding:6px 4px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  font:inherit;
  font-size:10px;
  cursor:pointer
}

.catalog-segment .fw-icon {
  width:13px;
  height:13px
}

.catalog-segment button[aria-pressed="true"] {
  background:var(--fw-surface);
  color:var(--fw-text);
  box-shadow:var(--fw-shadow)
}

.catalog-aside .fw-switch {
  font-size:11px;
  width:100%;
  justify-content:space-between
}

.catalog-color-token {
  display:flex;
  align-items:center;
  gap:8px;
  margin:10px 0;
  font-size:10px
}

.catalog-color-token i {
  width:19px;
  height:19px;
  display:block;
  border:1px solid var(--fw-border);
  border-radius:4px;
  background:var(--token)
}

.catalog-color-token code {
  color:var(--fw-muted);
  font-size:9px;
  margin-left:auto
}

.catalog-aside-note {
  background:var(--fw-accent-soft);
  color:var(--fw-accent-text);
  padding:11px;
  border-radius:5px;
  font-size:10px;
  line-height:1.75;
  margin-top:17px;
  display:flex;
  gap:8px
}

.catalog-aside-note .fw-icon {
  width:14px;
  height:14px;
  flex-shrink:0;
  margin-top:2px
}

.catalog-reset {
  width:100%;
  margin-top:13px!important;
  font-size:10px!important;
  color:var(--fw-muted)
}

.catalog-bottom-note {
  margin-top:24px;
  font-size:10px;
  color:var(--fw-muted);
  display:flex;
  align-items:center;
  gap:7px
}

.catalog-bottom-note .fw-icon {
  width:13px;
  height:13px
}

.catalog-statusbar {
  position:fixed;
  z-index:40;
  bottom:0;
  left:0;
  right:0;
  height:24px;
  background:var(--fw-surface);
  border-top:1px solid var(--fw-border);
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 17px;
  font-size:9px;
  color:var(--fw-muted)
}

.catalog-statusbar>div {
  display:flex;
  gap:15px;
  align-items:center
}

.catalog-ready {
  display:flex;
  gap:5px;
  align-items:center
}

.catalog-ready:before {
  content:'';
  width:5px;
  height:5px;
  background:var(--fw-success);
  border-radius:50%
}

.catalog-detail {
  width:850px
}

.catalog-detail .fw-dialog-body {
  padding:0
}

.catalog-detail-controls {
  display:flex;
  align-items:center;
  gap:15px;
  padding:15px 24px;
  border-bottom:1px solid var(--fw-border);
  background:var(--fw-surface-alt)
}

.catalog-detail-controls label {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px
}

.catalog-detail-controls select {
  width:auto;
  min-width:100px;
  font-size:11px;
  min-height:29px
}

.catalog-detail-preview {
  padding:35px 45px;
  min-height:220px;
  display:flex;
  justify-content:center;
  flex-direction:column;
  gap:16px;
  max-width:100%;
  overflow:auto;
  background-image:radial-gradient(var(--fw-border) .65px,transparent .65px);
  background-size:12px 12px
}

.catalog-detail-preview>div {
  width:100%;
  max-width:600px;
  align-self:center;
  background:var(--fw-surface);
  padding:22px;
  border-radius:6px;
  border:1px solid var(--fw-border)
}

.catalog-code-tabs {
  padding:0 24px;
  align-items:center;
  gap:22px
}

.catalog-code-tabs .fw-btn {
  margin-left:auto
}

.catalog-code-content {
  padding:17px 24px
}

.catalog-usage {
  padding:0 24px 22px;
  font-size:12px;
  color:var(--fw-muted)
}

.catalog-usage strong {
  display:block;
  color:var(--fw-text);
  font-size:12px;
  margin-bottom:4px
}

.catalog-foundations {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px
}

.catalog-foundation {
  padding:23px;
  background:var(--fw-surface);
  border:1px solid var(--fw-border);
  border-radius:7px
}

.catalog-foundation h3 {
  font-size:14px;
  margin:0 0 15px;
  font-weight:600
}

.catalog-foundation p {
  color:var(--fw-muted);
  font-size:12px;
  line-height:1.9
}

.catalog-palette {
  display:flex;
  height:65px;
  border-radius:5px;
  overflow:hidden
}

.catalog-palette>span {
  flex:1
}

.catalog-doc {
  padding:26px;
  background:var(--fw-surface);
  border:1px solid var(--fw-border);
  border-radius:8px
}

.catalog-doc h2 {
  font-size:20px;
  margin:0 0 13px
}

.catalog-doc h3 {
  font-size:14px;
  margin:25px 0 9px
}

.catalog-doc p,.catalog-doc li {
  font-size:12px;
  line-height:1.9;
  color:var(--fw-muted)
}

.catalog-doc ol {
  padding-left:20px
}

.catalog-doc code {
  font-size:11px
}

.catalog-search-empty {
  padding:50px;
  text-align:center;
  color:var(--fw-muted);
  grid-column:1/-1
}

.catalog-search-empty h3 {
  color:var(--fw-text)
}

.catalog-home-card {
  padding:12px;
  background:var(--fw-surface-alt);
  border:1px solid var(--fw-border);
  border-radius:5px
}

.catalog-home-card strong {
  font-size:12px
}

.catalog-home-card p {
  font-size:11px;
  color:var(--fw-muted);
  margin:5px 0 12px
}

@media(min-width:1600px) {
  .catalog-shell {
    grid-template-columns:240px 1fr
  }

  .catalog-main {
    padding-left:42px;
    padding-right:42px
  }

  .catalog-content {
    grid-template-columns:minmax(0,1fr) 246px;
    gap:30px
  }

  .catalog-preview {
    min-height:215px
  }

  .catalog-banner {
    min-height:180px
  }

  .catalog-title {
    font-size:35px
  }

  .catalog-banner h2 {
    font-size:24px
  }

  .catalog-sidebar {
    padding-left:17px;
    padding-right:17px
  }

}

@media(max-width:1240px) {
  .catalog-content {
    grid-template-columns:minmax(0,1fr) 196px;
    gap:18px
  }

  .catalog-shell {
    grid-template-columns:205px minmax(0,1fr)
  }

  .catalog-main {
    padding:24px 23px 50px
  }

  .catalog-preview {
    padding:18px 13px
  }

  .catalog-grid {
    gap:12px
  }

  .catalog-header nav {
    margin-left:0;
    gap:22px
  }

  .catalog-brand {
    min-width:182px
  }

  .catalog-banner {
    padding:21px
  }

  .catalog-title {
    font-size:28px
  }

  .catalog-window-art {
    transform:rotate(-6deg) scale(.9);
    margin-right:-15px
  }

  .catalog-theme-grid {
    gap:5px
  }

  .catalog-aside {
    padding:16px 13px
  }

}

@media(max-width:1080px) {
  .catalog-aside {
    position:static;
    grid-column:1/-1;
    display:none
  }

  .catalog-content {
    grid-template-columns:1fr
  }

  .catalog-grid {
    gap:15px
  }

  .catalog-header-link:nth-child(3) {
    display:none
  }

  .catalog-title-actions .fw-btn {
    font-size:11px
  }

  .catalog-settings-open .catalog-aside {
    display:block;
    grid-row:1;
    max-width:100%
  }

  .catalog-settings-open .catalog-theme-grid {
    display:flex
  }

  .catalog-settings-open .catalog-theme {
    width:35px
  }

  .catalog-setting {
    max-width:400px
  }

  .catalog-preview {
    min-height:185px
  }

}

@media(max-width:760px) {
  .catalog-header {
    height:56px;
    padding:0 15px;
    gap:10px
  }

  .catalog-brand {
    min-width:0;
    font-size:15px
  }

  .catalog-header nav {
    display:none
  }

  .catalog-header-actions {
    margin-left:auto;
    gap:8px
  }

  .catalog-version {
    display:none
  }

  .catalog-mobile {
    display:inline-flex
  }

  .catalog-shell {
    display:block
  }

  .catalog-sidebar {
    position:fixed;
    top:56px;
    left:-250px;
    width:230px;
    height:calc(100dvh - 80px);
    z-index:49;
    transition:left var(--fw-duration);
    box-shadow:var(--fw-shadow-overlay)
  }

  .catalog-sidebar-open .catalog-sidebar {
    left:0
  }

  .catalog-main {
    padding:20px 18px 50px
  }

  .catalog-title {
    font-size:28px
  }

  .catalog-topline {
    margin-bottom:22px
  }

  .catalog-shortcut {
    display:none
  }

  .catalog-title-actions {
    display:none
  }

  .catalog-page-tabs {
    gap:23px;
    overflow:auto;
    margin-top:20px;
    margin-bottom:20px
  }

  .catalog-page-tabs .fw-tab {
    font-size:11px
  }

  .catalog-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px
  }

  .catalog-wide {
    grid-column:span 2
  }

  .catalog-preview {
    min-height:185px;
    padding:17px 14px
  }

  .catalog-banner {
    min-height:155px;
    padding:20px
  }

  .catalog-banner-text {
    max-width:70%
  }

  .catalog-banner h2 {
    font-size:19px
  }

  .catalog-window-art {
    transform:rotate(-6deg) scale(.8);
    width:100px;
    margin-right:-10px
  }

  .catalog-banner p {
    font-size:10px
  }

  .catalog-section-title h2 {
    font-size:14px
  }

  .catalog-section-title select {
    max-width:130px
  }

  .catalog-statusbar>div:last-child span:first-child {
    display:none
  }

  .catalog-detail-controls {
    flex-wrap:wrap;
    padding:12px 17px;
    gap:10px
  }

  .catalog-detail-preview {
    padding:22px 17px
  }

  .catalog-code-tabs {
    gap:16px;
    padding:0 17px;
    overflow:auto
  }

  .catalog-code-content {
    padding:15px
  }

  .catalog-usage {
    padding:0 17px 20px
  }

  .catalog-foundations {
    grid-template-columns:1fr
  }

  .catalog-intro {
    font-size:12px
  }

  .catalog-titleline {
    display:block
  }

}

@media(max-width:420px) {
  .catalog-grid {
    grid-template-columns:1fr
  }

  .catalog-wide {
    grid-column:span 1
  }

  .catalog-banner {
    padding:18px
  }

  .catalog-window-art {
    display:none
  }

  .catalog-banner-text {
    max-width:100%
  }

  .catalog-preview {
    min-height:175px;
    padding:25px
  }

  .catalog-component-card .fw-btn {
    font-size:12px
  }

  .catalog-section-title {
    align-items:flex-start
  }

  .catalog-section-title h2 {
    font-size:13px;
    gap:5px
  }

  .catalog-logo {
    grid-template-columns:repeat(2,8px);
    gap:2px
  }

  .catalog-logo i {
    height:8px
  }

  .catalog-header-divider {
    display:none
  }

}

@media(max-width:760px) {
  .catalog-title-actions {
    display:flex;
    margin-top:14px
  }

  .catalog-title-actions .fw-btn {
    min-height:30px
  }

  .catalog-titleline {
    display:block
  }

}

.dibos-palette-dialog {
  width:610px
}

.dibos-palette-fields {
  display:grid;
  gap:15px;
  margin:22px 0
}

.dibos-palette-field {
  display:grid;
  grid-template-columns:minmax(0,1fr) 38px 105px;
  align-items:center;
  gap:10px
}

.dibos-palette-field label>strong {
  display:block;
  font-size:13px;
  font-weight:600
}

.dibos-palette-field label>small {
  display:block;
  font-size:11px;
  color:var(--fw-muted);
  margin-top:2px
}

.dibos-palette-field input[type="color"] {
  width:38px;
  height:34px;
  padding:3px;
  border:1px solid var(--fw-border-strong);
  background:var(--fw-surface);
  border-radius:5px;
  cursor:pointer
}

.dibos-palette-hex input {
  font-family:Consolas,monospace;
  font-size:12px
}

.dibos-palette-preview {
  padding:22px;
  background:var(--fw-bg);
  border:1px solid var(--fw-border);
  border-radius:7px;
  color:var(--fw-text)
}

.dibos-palette-sample {
  padding:20px;
  background:var(--fw-surface);
  border:1px solid var(--fw-border);
  border-radius:7px
}

.dibos-palette-sample p {
  font-size:12px;
  color:var(--fw-muted)
}

.dibos-palette-contrast {
  font-size:11px;
  line-height:1.8;
  margin-bottom:0
}

.dibos-sr {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

.dibos-palette-open {
  width:100%;
  font-size:10px;
  margin-top:10px;
  justify-content:flex-start
}

.dibos-palette-open .fw-icon {
  width:14px;
  height:14px
}

@media(max-width:460px) {
  .dibos-palette-field {
    grid-template-columns:minmax(0,1fr) 35px 90px;
    gap:7px
  }

  .dibos-palette-field label>small {
    font-size:10px
  }

  .dibos-palette-dialog .fw-dialog-body {
    padding:18px
  }

  .dibos-palette-dialog .fw-dialog-foot {
    flex-wrap:wrap;
    justify-content:flex-end!important;
    gap:10px
  }

  .dibos-palette-preview {
    padding:12px
  }

  .dibos-palette-sample {
    padding:15px
  }

}

.catalog-field-toolbar { padding: 11px 15px; border-bottom: 1px solid var(--fw-border); background: var(--fw-surface-alt); }
.catalog-field-toolbar label { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11px; font-weight: 500; }
.catalog-field-toolbar .fw-select { width: 124px; min-height: 28px; padding: 4px 8px; font-size: 11px; }
.catalog-spinner-intro { margin: 0 0 18px; color: var(--fw-muted); font-size: 12px; line-height: 1.8; }
.catalog-spinner-toolbar { display: flex; flex-wrap: wrap; gap: 16px; padding: 15px 18px; margin-bottom: 20px; background: var(--fw-surface); border: 1px solid var(--fw-border); border-radius: 7px; }
.catalog-spinner-toolbar label { display: flex; align-items: center; gap: 9px; font-size: 11px; }
.catalog-spinner-toolbar .fw-select { width: auto; min-width: 110px; font-size: 11px; }
.catalog-spinner-stage { align-items: center; min-height: 155px; background-image: radial-gradient(var(--fw-border) .65px,transparent .65px); background-size: 14px 14px; }
.catalog-spinner-stage > div { display: grid; place-items: center; width: 100%; min-height: 80px; }
.catalog-spinner-card .catalog-card-foot { align-items: flex-start; min-height: 90px; }
.catalog-spinner-card .catalog-card-foot small { line-height: 1.7; max-width: 220px; }
.catalog-detail-controls { flex-wrap: wrap; }
.catalog-spinner-controls { display: contents; }
.catalog-spinner-controls #spinner-variant { max-width: 180px; }
.catalog-spinner-controls .catalog-spinner-color { width: 38px; padding: 3px; }
.catalog-detail-preview--spinner { min-height: 200px; }
.catalog-detail-preview--spinner > div { align-items: center; justify-content: center; min-height: 140px; }
@media(max-width:600px) { .catalog-spinner-toolbar { gap: 12px; padding: 12px; } .catalog-spinner-toolbar label { justify-content: space-between; flex: 1 1 100%; } .catalog-spinner-toolbar .fw-select { width: 160px; } }

.catalog-spinner-color::-webkit-color-swatch { border: 0; border-radius: 2px; }
.catalog-spinner-color::-moz-color-swatch { border: 0; border-radius: 2px; }

/* Library shell behavior overrides the catalog's original mobile-only sidebar. */
.catalog-shell.fw-shell { grid-template-columns:var(--fw-sidebar-width,226px) minmax(0,1fr); }
.catalog-shell.fw-shell[data-fw-sidebar-state="hidden"] { grid-template-columns:minmax(0,1fr); }
:root[data-sidebar-collapsed="true"] .catalog-shell.fw-shell[data-fw-sidebar-key="dibos-main"] { grid-template-columns:minmax(0,1fr); }
@media(max-width:760px) { .catalog-shell.fw-shell { display:block; } .catalog-shell.fw-shell>[data-fw-sidebar] { left:0; } }
.catalog-header .dibos-header-link { display:flex; align-items:center; text-decoration:none; }
.catalog-section-title:has([data-editor-gallery-mode]) { flex-wrap:wrap; gap:12px; }
.catalog-section-title:has([data-editor-gallery-mode])>label { display:flex; align-items:center; gap:8px; }
[data-editor-gallery-mode] { width:190px; }