.cfb-tool {
    line-height: 1.5 ;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%
}

.cfb-tool button,
.cfb-tool input,
.cfb-tool textarea,
.cfb-tool select {
    font-family: inherit ;
    line-height: normal 
}

.cfb-tool h1,
.cfb-tool h2,
.cfb-tool h3,
.cfb-tool h4,
.cfb-tool h5,
.cfb-tool h6,
.cfb-tool p,
.cfb-tool span,
.cfb-tool strong,
.cfb-tool small,
.cfb-tool label {
    font-family: inherit
}

.cfb-tool .cfb-demo h4 {
    font-size: clamp(1.125rem, 0.95rem + 0.75vw, 1.25rem) ;
    line-height: 1.2 
}

.cfb-tool .cfb-demo button {
    font-size: clamp(0.9375rem, 0.85rem + 0.5vw, 1rem) 
}

.cfb-tool .cfb-extra summary strong {
    font-size: clamp(0.9375rem, 0.85rem + 0.5vw, 1.0625rem) ;
    font-weight: 800 ;
    letter-spacing: .08em ;
    text-transform: uppercase 
}

.cfb-tool .cfb-quality-toggle,
.cfb-tool .cfb-group-toggle {
    line-height: 1.3 
}

.cfb-tool {
    --cfb-text: #111;
    --cfb-muted: #777;
    --cfb-line: #e8e8e8;
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    gap: 32px;
    width: 100%;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--cfb-text);
    background: #fff
}

.cfb-tool * {
    box-sizing: border-box
}

.cfb-sidebar {
    position: sticky;
    top: 24px;
    align-self: start
}

.cfb-label {
    display: block;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase
}

.cfb-title {
    margin: 0 0 10px;
    font-size: clamp(2rem, 1.25rem + 3vw, 3rem) ;
    line-height: 1;
    letter-spacing: -.055em
}

.cfb-intro {
    margin: 0 0 28px;
    color: var(--cfb-muted);
    line-height: 1.55
}

.cfb-label {
    margin-bottom: 8px;
    color: var(--cfb-muted)
}

.cfb-inputs {
    display: grid;
    gap: 8px
}

.cfb-input-row {
    display: grid;
    grid-template-columns: 34px 1fr 30px;
    gap: 8px;
    align-items: center
}

.cfb-input-row input[type=color] {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer
}

.cfb-input-row input[type=color]::-webkit-color-swatch-wrapper {
    padding: 0
}

.cfb-input-row input[type=color]::-webkit-color-swatch {
    border: 0
}

.cfb-hex {
    height: 36px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid #ccc;
    outline: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: clamp(0.9375rem, 0.85rem + 0.5vw, 1.0625rem) ;
    text-transform: uppercase
}

.cfb-icon,
.cfb-reroll {
    border: 0;
    cursor: pointer
}

.cfb-icon {
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    background: #f2f2f2
}

.cfb-button {
    width: 100%;
    min-height: 42px;
    margin-top: 22px;
    padding: 0 12px;
    border: 0;
    background: #111;
    color: #fff;
    text-align: left;
    font-size: clamp(0.9375rem, 0.85rem + 0.5vw, 1rem) ;
    font-weight: 750;
    cursor: pointer
}

.cfb-content {
    min-width: 0
}

.cfb-content-head {
    margin-bottom: 18px
}

.cfb-content-head h3 {
    margin: 0;
    font-size: clamp(1.25rem, 1rem + 1vw, 1.5rem) 
}

.cfb-content-head p {
    margin: 4px 0 0;
    color: var(--cfb-muted);}

.cfb-quality {
    padding-bottom: 24px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--cfb-line)
}

.cfb-quality-top {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px
}

.cfb-quality-top span {
    display: block;
    margin-bottom: 4px;
    color: var(--cfb-muted);
    font-size: clamp(0.9375rem, 0.85rem + 0.5vw, 1rem) ;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase
}

.cfb-quality-top strong {
    font-size: clamp(1.125rem, 0.95rem + 0.75vw, 1.25rem) 
}

.cfb-quality-score {
    font-size: clamp(1.375rem, 1rem + 1vw, 1.75rem) 
}

.cfb-quality-score[data-rating=good] {
    color: #176c42
}

.cfb-quality-score[data-rating=medium] {
    color: #986000
}

.cfb-quality-score[data-rating=weak] {
    color: #a02f2f
}

.cfb-quality-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin-top: 16px;
    background: var(--cfb-line)
}

.cfb-metric {
    padding: 14px;
    background: #fff
}

.cfb-metric span,
.cfb-metric small {
    display: block;
    color: var(--cfb-muted);
    font-size: clamp(0.9375rem, 0.85rem + 0.5vw, 1rem) 
}

.cfb-metric strong {
    display: block;
    margin: 4px 0;
    font-size: clamp(1.125rem, 0.9rem + 0.8vw, 1.375rem) 
}

.cfb-quality-toggle {
    width: 100%;
    padding: 10px 0 0;
    display: flex;
    justify-content: space-between;
    border: 0;
    border-top: 1px solid var(--cfb-line);
    background: none;
    font-size: clamp(0.9375rem, 0.85rem + 0.5vw, 1.0625rem) ;
    cursor: pointer
}

.cfb-quality-toggle b {
    font-size: clamp(1.125rem, 0.95rem + 0.75vw, 1.25rem) ;
    font-weight: 400
}

.cfb-quality-toggle[aria-expanded=true] b {
    transform: rotate(45deg)
}

.cfb-quality-details {
    padding-top: 20px
}

.cfb-quality-checks {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(240px, .7fr);
    gap: 24px
}

.cfb-check {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid var(--cfb-line);}

.cfb-check small {
    color: var(--cfb-muted)
}

.cfb-check.pass strong {
    color: #176c42
}

.cfb-check.fail strong {
    color: #a02f2f
}

.cfb-notes {
    padding: 16px;
    background: #f5f5f5;
    line-height: 1.5
}

.cfb-group {
    border-bottom: 1px solid var(--cfb-line)
}

.cfb-group-toggle {
    width: 100%;
    padding: 16px 0;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer
}

.cfb-group-copy {
    display: grid;
    gap: 4px
}

.cfb-group-name {
    letter-spacing: .08em;
    text-transform: uppercase
}

.cfb-group-description {
    color: var(--cfb-muted);}

.cfb-group-meta {
    color: var(--cfb-muted);}

.cfb-group-meta b {
    margin-left: 10px;
    color: #111;
    font-size: clamp(1.25rem, 1rem + 1vw, 1.5rem) ;
    font-weight: 400
}

.cfb-group.open .cfb-group-meta b {
    display: inline-block;
    transform: rotate(45deg)
}

.cfb-swatches {
    display: none;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    padding-bottom: 20px
}

.cfb-group.open .cfb-swatches {
    display: grid
}

.cfb-swatch {
    min-height: 150px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer
}

.cfb-role {
    font-size: clamp(0.9375rem, 0.85rem + 0.5vw, 1rem);
    font-weight: 400;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.cfb-usage {
    margin-bottom: 8px;
    font-size: clamp(0.9375rem, 0.85rem + 0.5vw, 1.0625rem);
}

.cfb-swatch-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.cfb-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: clamp(0.9375rem, 0.85rem + 0.5vw, 1rem) ;
    font-weight: 700
}

.cfb-reroll {
    width: 26px;
    height: 26px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    background: transparent;
    color: inherit
}

.cfb-extra {
    border-bottom: 1px solid var(--cfb-line)
}

.cfb-extra summary {
    padding: 16px 0;
    cursor: pointer;
    list-style: none
}

.cfb-extra summary::-webkit-details-marker {
    display: none
}

.cfb-extra summary strong,
.cfb-extra summary span {
    display: block
}

.cfb-extra summary span {
    margin-top: 4px;
    color: var(--cfb-muted);
    font-size: clamp(0.9375rem, 0.85rem + 0.5vw, 1.0625rem) 
}

.cfb-extra-content {
    padding: 0 0 20px
}

.cfb-scale-row {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px
}

.cfb-scale {
    display: grid;
    grid-template-columns: repeat(9, 1fr)
}

.cfb-scale-row > b {
    font-size: clamp(0.9375rem, 0.85rem + 0.5vw, 1.0625rem) !important;
    line-height: 1.2 !important
}

.cfb-scale-cell {
    min-height: 48px;
    padding: 5px;
    display: flex;
    align-items: end;
    font-size: clamp(0.875rem, 0.8rem + 0.4vw, 0.9375rem) !important;
    line-height: 1.1 !important;
    font-weight: 700;
    cursor: pointer
}

.cfb-demo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px
}

.cfb-demo {
    min-height: 160px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.cfb-demo h4 {
    margin: 0;
    font-size: clamp(1.125rem, 1rem + 0.5vw, 1.25rem) !important;
    line-height: 1.2 !important
}

.cfb-demo p {
    margin: 0.5rem 0 0;
    line-height: 1.45 !important
}

.cfb-demo button {
    align-self: start;
    padding: 8px 11px;
    border: 0;
    font-size: clamp(0.875rem, 0.8rem + 0.4vw, 1rem) !important;
    line-height: 1.2 !important;
    font-weight: 700
}

.cfb-toast {
    position: fixed;
    left: 50%;
    bottom: 20px;
    padding: 9px 12px;
    background: #111;
    color: #fff;
    font-size: clamp(0.9375rem, 0.85rem + 0.5vw, 1.0625rem) ;
    opacity: 0;
    transform: translate(-50%, 8px);
    pointer-events: none
}

.cfb-toast.show {
    opacity: 1;
    transform: translate(-50%, 0)
}

@media(max-width:1000px) {
    .cfb-tool {
        grid-template-columns: 1fr
    }

    .cfb-sidebar {
        position: static
    }

    .cfb-swatches {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media(max-width:680px) {
    .cfb-swatches {
        grid-template-columns: repeat(2, 1fr)
    }

    .cfb-quality-metrics,
    .cfb-quality-checks,
    .cfb-demo-grid {
        grid-template-columns: 1fr
    }

    .cfb-scale-row {
        grid-template-columns: 1fr
    }
} 
/* Quality status: simple, scannable and color-coded. */
.cfb-quality {
    padding: clamp(1rem, 0.8rem + 1vw, 1.5rem);
    margin-bottom: 1.75rem;
    border: 1px solid var(--cfb-line);
    border-radius: 1rem;
    background: #f7f8f7;
}

.cfb-quality-top {
    align-items: center;
}

.cfb-quality-top strong {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
}

.cfb-quality-top strong::before {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: currentColor;
    content: "";
}

.cfb-quality-label[data-rating=good] {
    color: #176c42;
    background: #e2f3e8;
}

.cfb-quality-label[data-rating=medium] {
    color: #986000;
    background: #fff1d6;
}

.cfb-quality-label[data-rating=weak] {
    color: #a02f2f;
    background: #fae4e4;
}

.cfb-quality-score {
    font-weight: 800;
}

.cfb-quality-metrics {
    gap: 0.5rem;
    margin-top: 1.25rem;
    background: transparent;
}

.cfb-metric {
    padding: 0.85rem;
    border: 1px solid var(--cfb-line);
    border-radius: 0.65rem;
    background: #fff;
}

.cfb-quality-toggle {
    margin-top: 1rem;
    border-top: 0;
    color: var(--cfb-text);
}
/* Keep theme control resets from changing component typography. */
.cfb-tool button,
.cfb-tool input,
.cfb-tool textarea,
.cfb-tool select {
    font-family: inherit !important;
    font-size: 1rem !important;
    line-height: normal !important;
}
.cfb-tool .cfb-reroll {
    font-size: 0.875rem !important;
}
/* Match Farbskalen and Website-Beispiele to the regular group rows. */
.cfb-tool .cfb-extra summary strong {
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
}

.cfb-tool .cfb-extra summary span {
    margin-top: 0.25rem;
    font-size: 1rem !important;
    line-height: 1.5 !important;
}
.cfb-scale-source {
    position: relative;
    z-index: 1;
    box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px #111;
}

.cfb-content-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 1rem;
}

.cfb-token-toggle {
    flex: 0 0 auto;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--cfb-line);
    border-radius: 999px;
    background: #fff;
    color: var(--cfb-text);
    font-size: 0.875rem !important;
    line-height: 1.2 !important;
    cursor: pointer;
}

.cfb-token-toggle[aria-pressed=true] {
    border-color: var(--cfb-text);
    background: var(--cfb-text);
    color: #fff;
}

.cfb-token {
    display: none;
    margin-top: 0.25rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem !important;
    line-height: 1.2 !important;

}

.cfb-show-tokens .cfb-token {
    display: block;
}

.cfb-token-grid {
    display: grid;
    gap: 0.5rem;
    padding: 0 0 1rem;
}

.cfb-token-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--cfb-line);
}

.cfb-token-row code {
    color: var(--cfb-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.875rem;
}

.cfb-token-row span {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.875rem !important;
    font-weight: 700;
}
.cfb-token-code-wrap {
    display: grid;
    gap: 0.75rem;
}

.cfb-token-code {
    max-height: none;
    margin: 0;
    padding: 0.85rem 1rem;
    overflow: auto;
    border: 1px solid #d9d9d9;
    border-radius: 0.25rem;
    background: #f7f7f7;
    color: #222;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8125rem;
    line-height: 1.55;
    white-space: pre
}

.cfb-token-copy {
    justify-self: start;
    padding: 0.55rem 0.8rem;
    border: 1px solid #d9d9d9;
    border-radius: 0.25rem;
    background: #fff;
    color: #222;
    font-size: 0.875rem !important;
    line-height: 1.2 !important;
    cursor: pointer
}
/* Light code-box variant without scrolling. */
.cfb-token-code {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    margin: 0;
    padding: 1rem;
    overflow-x: visible !important;
    overflow-y: visible !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--cfb-line);
    border-radius: 0.75rem;
    background: #171719 !important;
    color: #f4f4f4 !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.875rem;
    line-height: 1.6;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere;
}
.cfb-export-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem;
    padding: 0.6rem 0;
    border: 0;
    border-bottom: 1px solid var(--cfb-line);
    background: transparent;
    color: var(--cfb-text);
    font-size: 0.875rem !important;
    line-height: 1.3 !important;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.cfb-export-toggle span {
    font-size: 1rem !important;
    font-weight: 400;
}

.cfb-export-panel {
    display: grid;
    gap: 0.5rem;
    padding-top: 0.75rem;
}

.cfb-export-json {
    width: 100%;
    padding: 0.7rem 0.75rem;
    border: 1px solid var(--cfb-text);
    border-radius: 0.5rem;
    background: #fff;
    color: var(--cfb-text);
    font-size: 0.875rem !important;
    line-height: 1.2 !important;
    font-weight: 700;
    cursor: pointer;
}

.cfb-export-panel small {
    color: var(--cfb-muted);
    font-size: 0.8125rem !important;
    line-height: 1.4 !important;
}
/* Bricks Builder typography scale. */
.cfb-tool {
    --cfb-text-xs: var(--brxw-text-fluid-xs, 0.875rem);
    --cfb-text-s: var(--brxw-text-fluid-s, 1rem);
    --cfb-text-m: var(--brxw-text-fluid-m, 1.125rem);
    --cfb-text-l: var(--brxw-text-fluid-l, 1.5rem);
    --cfb-text-xl: var(--brxw-text-fluid-xl, 2rem);
    --cfb-text-2xl: var(--brxw-text-fluid-2xl, 2.5rem);
    --cfb-text-3xl: var(--brxw-text-fluid-3xl, 3rem);
    --cfb-text-4xl: var(--brxw-text-fluid-4xl, 4rem);
    --cfb-text-5xl: var(--brxw-text-fluid-5xl, 5rem);
}

.cfb-tool .cfb-label,
.cfb-tool .cfb-quality-top span,
.cfb-tool .cfb-metric span,
.cfb-tool .cfb-metric small,
.cfb-tool .cfb-role,
.cfb-tool .cfb-usage,
.cfb-tool .cfb-scale-cell,
.cfb-tool .cfb-token {
    font-size: var(--cfb-text-xs) !important;
}

.cfb-tool .cfb-hex,
.cfb-tool .cfb-button,
.cfb-tool .cfb-quality-toggle,
.cfb-tool .cfb-group-meta,
.cfb-tool .cfb-value,
.cfb-tool .cfb-extra summary span,
.cfb-tool .cfb-extra summary strong,
.cfb-tool .cfb-demo button,
.cfb-tool .cfb-toast,
.cfb-tool .cfb-token-toggle,
.cfb-tool .cfb-export-toggle,
.cfb-tool .cfb-export-json {
    font-size: var(--cfb-text-s) !important;
}

.cfb-tool .cfb-quality-label,
.cfb-tool .cfb-metric strong,
.cfb-tool .cfb-quality-toggle b,
.cfb-tool .cfb-group-meta b,
.cfb-tool .cfb-demo h4 {
    font-size: var(--cfb-text-m) !important;
}

.cfb-tool .cfb-content-head h3 {
    font-size: var(--cfb-text-l) !important;
}

.cfb-tool .cfb-title {
    font-size: var(--cfb-text-3xl) !important;
}

.cfb-tool .cfb-quality-score {
    font-size: var(--cfb-text-l) !important;
}

.cfb-token-code,
.cfb-token-row code,
.cfb-token-row span {
    font-size: var(--cfb-text-s) !important;
}
.cfb-tool .cfb-group-name,
.cfb-tool .cfb-scale-row > b {
    font-size: var(--cfb-text-s) !important;
}

.cfb-tool .cfb-export-panel small {
    font-size: var(--cfb-text-xs) !important;
}

.cfb-tool .cfb-token-copy {
    font-size: var(--cfb-text-s) !important;
}
.cfb-swatch-top {
    display: grid;
    gap: 0.4rem;
}

.cfb-swatch-top .cfb-usage {
    margin-bottom: 0;
}

.cfb-swatch-bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.5rem;
    align-items: center;
}

.cfb-swatch-bottom .cfb-token {
    margin: 0;
}
.cfb-color-name {
    font-size: var(--cfb-text-xs) !important;
    line-height: 1.25 !important;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.cfb-color-name:empty {
    display: none;
}
.cfb-swatch-values {
    display: grid;
    gap: 0.15rem;
    justify-items: end;
    text-align: right;
}
.cfb-swatch-values {
    justify-items: start;
    text-align: left;
}

.cfb-swatch .cfb-color-name {
    font-weight: 400;
}
.cfb-export-panel[hidden] {
    display: none !important;
}

/* Swatch metadata is stacked and left-aligned. */
.cfb-swatch-top, .cfb-swatch-top .cfb-role, .cfb-swatch-top .cfb-usage, .cfb-swatch-bottom, .cfb-swatch-values, .cfb-swatch-values > * { text-align: left; justify-self: start; }
.cfb-swatch-bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .5rem; }
.cfb-swatch-values { grid-column: 1; display: grid; gap: .15rem; justify-items: start; }
.cfb-swatch-bottom .cfb-token, .cfb-swatch-bottom .cfb-value, .cfb-swatch-bottom .cfb-color-name { grid-column: 1; }
.cfb-swatch-bottom .cfb-reroll { grid-column: 2; grid-row: 1 / span 3; align-self: center; }


/* Larger, consistently centered reroll controls. */
.cfb-tool .cfb-icon, .cfb-tool .cfb-reroll { width: clamp(2.25rem, 3vw, 2.75rem); height: clamp(2.25rem, 3vw, 2.75rem); min-width: clamp(2.25rem, 3vw, 2.75rem); min-height: clamp(2.25rem, 3vw, 2.75rem); padding: 0; display: inline-flex; align-items: center; justify-content: center; line-height: 1; font-size: clamp(1.25rem, 1.7vw, 1.5rem) !important; }


.cfb-tool .cfb-export-toggle { font-weight: 400 !important; justify-content: center !important; text-align: center; }


/* Fixed view switcher for the two ColorFlow modes. */
.cfb-tool { padding-bottom: 5rem; }
.cfb-floating-nav { position: fixed; left: 50%; bottom: 1rem; z-index: 50; display: inline-flex; gap: .25rem; transform: translateX(-50%); padding: .3rem; border: 1px solid var(--cfb-line, #d9d9d9); border-radius: 999px; background: rgb(255 255 255 / .92); box-shadow: 0 .5rem 1.5rem rgb(0 0 0 / .14); backdrop-filter: blur(14px); }
.cfb-view-button { border: 0; border-radius: 999px; padding: .65rem 1rem; background: transparent; color: var(--cfb-text, #111); font: inherit; font-weight: 400; cursor: pointer; }
.cfb-view-button.is-active, .cfb-view-button[aria-pressed=true] { background: var(--cfb-text, #111); color: #fff; }
.cfb-html-examples[hidden] { display: none !important; }
@media (max-width: 640px) { .cfb-floating-nav { width: calc(100% - 2rem); justify-content: stretch; } .cfb-view-button { flex: 1; padding-inline: .65rem; } }


.cfb-html-examples{display:block}
.cfb-html-intro{margin-bottom:1.5rem}
.cfb-html-intro h3{margin:0;font-size:var(--cfb-text-l)}
.cfb-html-intro p{margin:.35rem 0 0;color:var(--cfb-muted)}
.cfb-html-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.cfb-html-card{padding:clamp(1rem,2vw,1.5rem);border:1px solid var(--cfb-line);background:var(--cfb-surface, #fff);color:var(--cfb-text);border-radius:.75rem}
.cfb-html-card h1,.cfb-html-card h2,.cfb-html-card h3{margin-top:0}
.cfb-html-card p{line-height:1.55}
.cfb-html-card blockquote{margin:1rem 0;padding:.75rem 1rem;border-left:.25rem solid var(--cfb-primary, var(--cfb-text));background:var(--cfb-surface-muted);font-style:italic}
.cfb-html-card code{padding:.15rem .35rem;background:var(--cfb-surface-muted);font-family:ui-monospace,monospace}
.cfb-html-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.cfb-html-actions button,.cfb-html-card button{padding:.65rem .9rem;border:0;border-radius:.35rem;font:inherit;cursor:pointer}
.cfb-html-alert{padding:.75rem 1rem;border-radius:.4rem}
.cfb-html-card label{display:grid;gap:.3rem;margin-bottom:.8rem;font-weight:600}
.cfb-html-card input[type=text],.cfb-html-card select,.cfb-html-card textarea{width:100%;padding:.65rem;border:1px solid var(--cfb-border, var(--cfb-line));border-radius:.35rem;background:var(--cfb-surface, #fff);color:var(--cfb-text);font:inherit}
.cfb-html-check{display:flex!important;grid-template-columns:auto 1fr;align-items:center;gap:.5rem}
.cfb-html-check input{width:auto}
.cfb-html-card table{width:100%;border-collapse:collapse;text-align:left}
.cfb-html-card th,.cfb-html-card td{padding:.6rem;border-bottom:1px solid var(--cfb-border, var(--cfb-line));text-align:left}
.cfb-html-badge{display:inline-block;padding:.25rem .5rem;border-radius:999px;font-size:var(--cfb-text-xs)}
.cfb-html-dark{border-color:transparent}
@media (max-width:760px){.cfb-html-grid{grid-template-columns:1fr}}