.cbg.tl-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

.cbg__group { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; gap: 16px; }
.cbg__group + .cbg__group { margin-top: 22px; padding-top: 22px; border-top: 1px solid #f0f1f3; }
.cbg__group > legend.tl-head { float: left; width: 100%; margin: 0; padding: 0; }
.cbg__group input.tl-input { width: 100%; }
.cbg .tl-color input.tl-input { height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; text-transform: none; }
.cbg__group .tl-switch { justify-self: start; }
.cbg__group .tl-range { margin: 2px 0 0; }
.cbg__group .tl-label .tl-hint:last-child { font-variant-numeric: tabular-nums; }
.cbg__seg .tl-seg span { padding: 0 6px; }
.cbg .tl-field { align-content: start; }
.cbg__border .tl-field:first-child { grid-template-rows: auto 46px; align-items: center; }

.cbg:not(:has([data-k="gradient"]:checked)) .cbg__g2,
.cbg:not(:has([data-k="border"]:checked)) .cbg__border { display: none; }

.cbg__side { grid-template-rows: auto 1fr; }
.cbg__preview { display: grid; gap: 18px; }
.cbg__stage {
  display: flex; align-items: center; justify-content: center;
  min-height: 200px; padding: 32px 20px;
  border-radius: 10px; background: #0c0d10;
  overflow: hidden;
}
.cbg__demo {
  appearance: none; -webkit-appearance: none; margin: 0;
  max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-family: Inter, sans-serif; line-height: 1.2;
  cursor: pointer;
  transition: transform .18s, box-shadow .18s, filter .18s;
}
.cbg__demo.is-block { width: 100%; }
.cbg__demo.is-hover-lift:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .28) !important; }
.cbg__demo.is-hover-darken:hover { filter: brightness(.9); }
.cbg__demo.is-hover-glow:hover { box-shadow: 0 0 0 4px var(--glow) !important; }
.cbg__demo.is-hover-scale:hover { transform: scale(1.04); }
.cbg__demo:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.cbg__presets { display: grid; gap: 10px; }
.cbg__presetrow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; padding: 3px; border-radius: 10px; background: #f2f3f5; }
.cbg__preset {
  height: 32px; min-width: 0; padding: 0 6px;
  border: 0; border-radius: 8px; background: transparent;
  font: 500 13px/1 var(--font-ui); color: var(--gk-soft); white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.cbg__preset:hover { color: var(--ink-nav); }
.cbg__preset[aria-pressed="true"] { background: #fff; color: var(--ink-nav); outline: 1px solid var(--gk-line); outline-offset: -1px; }
.cbg__preset:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

.cbg__codehead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.cbg__codehead .tl-seg { flex: none; }
.cbg__codehead .tl-seg label { flex: 0 0 auto; }
.cbg__codehead .tl-btn { flex: none; }
.cbg__code { display: flex; flex-direction: column; }
.cbg__code .tl-out { flex: 1; padding-right: 14px; }
.cbg__code .tl-out pre { max-height: 420px; }
.cbg__code .tl-actions { margin-top: 16px; }

@media (max-width: 1100px) {
  .cbg__presetrow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .cbg.tl-grid { grid-template-columns: minmax(0, 1fr); }
  .cbg__side { display: contents; }
  .cbg__preview { order: -1; }
  .cbg__code { order: 1; }
}
@media (max-width: 560px) {
  .cbg__codehead .tl-seg { flex: 1 1 100%; }
  .cbg__codehead .tl-seg label { flex: 1 1 auto; }
  .cbg__seg .tl-seg span { font-size: 12px; padding: 0 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .cbg__preset { transition: none; }
}