.site-page.page--widgets {
    --widget-ink: var(--text-color);
    --widget-muted: var(--text-color-secondary);
    --widget-line: color-mix(in srgb, var(--text-color) 30%, transparent);
    --widget-surface: var(--card-bg);
}

.widgets-page {
    overflow: clip;
}

.site-page .widgets-page > section {
    padding-block: clamp(72px, 9vw, 144px);
    background: transparent;
}

.site-page .widgets-hero {
    min-height: calc(100svh - 84px);
    padding-top: clamp(42px, 7vh, 90px);
    padding-bottom: 0;
    border-top: 0;
}

.widgets-hero__meta,
.widgets-kicker,
.widgets-section-heading > span,
.widget-preview__bar,
.widget-control > span,
.widget-format legend,
.widget-code__bar,
.widget-card__meta {
    font: 800 .7rem/1.2 ui-monospace, "SFMono-Regular", Consolas, monospace;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.widgets-hero__meta {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 18px;
    border-bottom: 5px solid var(--primary-red);
    color: var(--widget-muted);
}

.widgets-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr);
    gap: clamp(48px, 8vw, 130px);
    align-items: end;
    padding-block: clamp(64px, 10vh, 130px);
}

.widgets-hero__grid > * {
    min-width: 0;
}

.widgets-kicker {
    margin: 0 0 clamp(28px, 4vw, 52px);
    color: var(--primary-red);
}

.site-page .widgets-hero h1 {
    max-width: 1050px;
    margin: 0;
    font-size: clamp(4rem, 8.3vw, 10rem);
    line-height: .82;
    letter-spacing: -.075em;
    hyphens: none;
    overflow-wrap: normal;
    word-break: normal;
}

.widgets-hero__copy {
    padding-top: 24px;
    border-top: 1px solid var(--widget-line);
}

.widgets-hero__copy p {
    margin: 0 0 36px;
    color: var(--widget-muted);
    font-size: clamp(1rem, 1.35vw, 1.25rem);
    line-height: 1.58;
}

.widgets-hero__copy a {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    padding: 18px 20px;
    border: 2px solid var(--widget-ink);
    background: var(--primary-blue);
    color: #fff;
    font-weight: 850;
    text-decoration: none;
    text-transform: uppercase;
}

.widgets-hero__copy a:hover,
.widgets-hero__copy a:focus-visible {
    background: var(--primary-red);
}

html.dark-mode .site-page .widgets-hero__copy a,
html.dark-mode .site-page .widgets-hero__copy a:hover,
html.dark-mode .site-page .widgets-hero__copy a:focus-visible {
    color: #fff;
    text-decoration: none;
}

.widgets-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--widget-line);
    border-left: 1px solid var(--widget-line);
}

.widgets-facts > div {
    display: grid;
    min-height: 124px;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 24px;
    border-right: 1px solid var(--widget-line);
    border-bottom: 1px solid var(--widget-line);
}

.widgets-facts strong {
    color: var(--primary-red);
    font: 800 .72rem/1 ui-monospace, monospace;
}

.widgets-facts span {
    color: var(--widget-muted);
    font-size: .86rem;
    font-weight: 800;
    line-height: 1.35;
}

.widgets-section-heading {
    display: grid;
    grid-template-columns: minmax(96px, .18fr) minmax(0, 1fr);
    gap: clamp(30px, 5vw, 90px);
    align-items: start;
    margin-bottom: clamp(48px, 7vw, 94px);
}

.widgets-section-heading > span {
    padding-top: 9px;
    color: var(--primary-red);
}

.site-page .widgets-section-heading h2 {
    max-width: 1100px;
    margin: 0;
    font-size: clamp(3rem, 6.7vw, 7.7rem);
    line-height: .86;
    letter-spacing: -.065em;
    hyphens: none;
    overflow-wrap: normal;
    word-break: normal;
}

.widgets-section-heading p {
    max-width: 880px;
    margin: 28px 0 0;
    color: var(--widget-muted);
    font-size: clamp(1rem, 1.3vw, 1.2rem);
    line-height: 1.55;
}

.widget-builder__grid {
    display: grid;
    grid-template-columns: minmax(360px, .72fr) minmax(520px, 1.28fr);
    border: 1px solid var(--widget-line);
}

.widget-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    border-right: 1px solid var(--widget-line);
    background: var(--widget-surface);
}

.widget-control {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 13px;
    padding: 20px;
    border-right: 1px solid var(--widget-line);
    border-bottom: 1px solid var(--widget-line);
}

.widget-control:nth-child(2n) {
    border-right: 0;
}

.widget-control--wide {
    grid-column: 1 / -1;
    border-right: 0;
}

.widget-control > span,
.widget-format legend,
.widget-code__bar {
    color: var(--widget-muted);
}

.widget-control select {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 0 34px 0 0;
    border: 0;
    border-bottom: 3px solid var(--widget-ink);
    border-radius: 0;
    outline: 0;
    background-color: var(--widget-surface);
    color: var(--widget-ink);
    color-scheme: light;
    font: 800 .92rem/1 var(--body-font, Arial, sans-serif);
}

.widget-control select option {
    background-color: #fff;
    color: #212529;
}

html.dark-mode .site-page .widget-control select {
    background-color: #172b3a;
    color: #e6f1ff;
    color-scheme: dark;
}

html.dark-mode .site-page .widget-control select option {
    background-color: #172b3a;
    color: #e6f1ff;
}

html.dark-mode .site-page .widget-control select option:checked {
    background-color: #2367d1;
    color: #fff;
}

.widget-control select:focus-visible {
    outline: 3px solid var(--primary-blue);
    outline-offset: 4px;
}

.widget-format {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    padding: 20px;
    border: 0;
    border-bottom: 1px solid var(--widget-line);
    gap: 12px;
}

.widget-format legend {
    grid-column: 1 / -1;
    width: 100%;
    margin-bottom: 13px;
}

.widget-format label {
    position: relative;
    display: grid;
    gap: 4px;
    min-height: 74px;
    padding: 15px;
    border: 1px solid var(--widget-line);
    cursor: pointer;
}

.widget-format input {
    position: absolute;
    opacity: 0;
}

.widget-format label:has(input:checked) {
    border-color: var(--primary-blue);
    box-shadow: inset 5px 0 0 var(--primary-blue);
}

.widget-format label span {
    font-size: .9rem;
    font-weight: 850;
}

.widget-format label small {
    color: var(--widget-muted);
    font-size: .72rem;
}

.widget-code {
    grid-column: 1 / -1;
    padding: 0;
}

.widget-code__bar {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    min-height: 58px;
    padding: 0 20px;
}

.widget-code__bar button,
.widget-card__actions button {
    min-height: 38px;
    padding: 0 15px;
    border: 1px solid var(--widget-ink);
    border-radius: 0;
    background: var(--primary-blue);
    color: #fff;
    font: 800 .72rem/1 var(--body-font, Arial, sans-serif);
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
}

.widget-code__bar button:hover,
.widget-code__bar button:focus-visible,
.widget-card__actions button:hover,
.widget-card__actions button:focus-visible {
    background: var(--primary-red);
}

.widget-code textarea {
    display: block;
    width: 100%;
    min-height: 264px;
    padding: 20px;
    resize: vertical;
    border: 0;
    border-block: 1px solid var(--widget-line);
    border-radius: 0;
    outline: 0;
    background: #08111f;
    color: #dce9f7;
    font: 500 .76rem/1.6 ui-monospace, "SFMono-Regular", Consolas, monospace;
    tab-size: 2;
}

.widget-code textarea:focus-visible {
    box-shadow: inset 0 0 0 3px var(--primary-blue);
}

.widget-code > p {
    margin: 0;
    padding: 15px 20px;
    color: var(--widget-muted);
    font-size: .78rem;
    line-height: 1.45;
}

.widget-preview {
    min-width: 0;
    background:
        linear-gradient(var(--widget-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--widget-line) 1px, transparent 1px);
    background-size: 32px 32px;
}

.widget-preview__bar {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    min-height: 58px;
    align-items: center;
    padding: 0 24px;
    border-bottom: 1px solid var(--widget-line);
    background: var(--bg-color);
    color: var(--widget-muted);
}

.widget-preview__canvas {
    display: grid;
    min-height: 720px;
    place-items: start center;
    padding: clamp(26px, 4vw, 64px);
}

#widget-preview-shell {
    width: 100%;
    max-width: 100%;
    transition: max-width 180ms ease;
}

.widget-preview__note {
    margin: 0;
    padding: 18px 24px;
    border-top: 1px solid var(--widget-line);
    background: var(--bg-color);
    color: var(--widget-muted);
    font-size: .78rem;
    line-height: 1.45;
}

.widget-search {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    margin-bottom: 34px;
    padding: 0 20px;
    border: 1px solid var(--widget-line);
}

.widget-search > span {
    color: var(--primary-red);
    font-size: 1.5rem;
}

.widget-search input {
    min-width: 0;
    min-height: 68px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--widget-ink);
    font: 800 clamp(1rem, 1.5vw, 1.3rem)/1 var(--body-font, Arial, sans-serif);
}

.widget-search strong {
    color: var(--primary-blue);
    font: 850 1.2rem/1 ui-monospace, monospace;
}

.widget-catalog__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--widget-line);
    border-left: 1px solid var(--widget-line);
}

.widget-card {
    display: flex;
    min-width: 0;
    min-height: 390px;
    flex-direction: column;
    padding: clamp(24px, 3vw, 42px);
    border-right: 1px solid var(--widget-line);
    border-bottom: 1px solid var(--widget-line);
    background: var(--widget-surface);
}

.widget-card[hidden] {
    display: none;
}

.widget-card.is-selected {
    box-shadow: inset 0 6px 0 var(--primary-blue);
}

.widget-card__meta {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    color: var(--primary-red);
}

.widget-card__meta span:last-child {
    padding: 5px 7px;
    border: 1px solid var(--widget-line);
    color: var(--primary-blue);
}

.site-page .widget-card h3 {
    margin: clamp(48px, 6vw, 82px) 0 18px;
    font-size: clamp(1.45rem, 2.1vw, 2.15rem);
    line-height: .98;
}

.widget-card > p {
    margin: 0;
    color: var(--widget-muted);
    font-size: .9rem;
    line-height: 1.55;
}

.widget-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    align-items: center;
    margin-top: auto;
    padding-top: 32px;
}

.widget-card__actions a {
    color: var(--widget-ink);
    font-size: .76rem;
    font-weight: 800;
    text-underline-offset: 4px;
}

.widget-empty {
    margin: 0;
    padding: 48px 20px;
    border: 1px solid var(--widget-line);
    color: var(--widget-muted);
    text-align: center;
}

.widgets-install__steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--widget-line);
    border-left: 1px solid var(--widget-line);
    list-style: none;
}

.widgets-install__steps li {
    min-height: 300px;
    padding: clamp(24px, 3vw, 42px);
    border-right: 1px solid var(--widget-line);
    border-bottom: 1px solid var(--widget-line);
}

.widgets-install__steps span {
    color: var(--primary-red);
    font: 800 .72rem/1 ui-monospace, monospace;
}

.site-page .widgets-install__steps h3 {
    margin: clamp(64px, 8vw, 108px) 0 18px;
    font-size: clamp(1.5rem, 2.4vw, 2.6rem);
    line-height: .96;
}

.widgets-install__steps p {
    margin: 0;
    color: var(--widget-muted);
    line-height: 1.55;
}

.widgets-install__technical {
    display: grid;
    grid-template-columns: minmax(120px, .2fr) minmax(0, 1fr);
    gap: 28px;
    margin-top: 34px;
    padding: clamp(26px, 4vw, 48px);
    background: var(--primary-blue);
    color: #fff;
}

.widgets-install__technical strong {
    font-size: .76rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.widgets-install__technical p {
    max-width: 960px;
    margin: 0;
    line-height: 1.55;
}

.widgets-install__technical code {
    padding: 2px 5px;
    background: rgba(255, 255, 255, .15);
    color: #fff;
}

@media (max-width: 1120px) {
    .widgets-hero__grid {
        grid-template-columns: minmax(0, 1.1fr) minmax(310px, .9fr);
        gap: 48px;
    }

    .widget-builder__grid {
        grid-template-columns: 1fr;
    }

    .widget-controls {
        border-right: 0;
        border-bottom: 1px solid var(--widget-line);
    }

    .widget-preview__canvas {
        min-height: 620px;
    }
}

@media (max-width: 820px) {
    .widgets-hero__grid {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .widgets-facts,
    .widget-catalog__grid,
    .widgets-install__steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .widgets-section-heading {
        grid-template-columns: 70px minmax(0, 1fr);
    }
}

@media (max-width: 560px) {
    .site-page .widgets-page > section {
        padding-block: 68px;
    }

    .site-page .widgets-hero {
        min-height: 0;
        padding-top: 36px;
        padding-bottom: 0;
    }

    .widgets-hero__meta {
        font-size: .6rem;
    }

    .site-page .widgets-hero h1 {
        font-size: clamp(2.1rem, 12.2vw, 3.8rem);
        line-height: .88;
        letter-spacing: -.065em;
    }

    .widgets-hero__copy a {
        margin-right: 70px;
    }

    .widgets-facts,
    .widget-catalog__grid,
    .widgets-install__steps {
        grid-template-columns: 1fr;
    }

    .widgets-facts > div {
        min-height: 90px;
    }

    .widgets-section-heading {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .site-page .widgets-section-heading h2 {
        font-size: clamp(2.65rem, 13vw, 4.5rem);
    }

    .widget-controls {
        grid-template-columns: 1fr;
    }

    .widget-control,
    .widget-control:nth-child(2n),
    .widget-control--wide {
        grid-column: 1;
        border-right: 0;
    }

    .widget-format {
        grid-template-columns: 1fr;
    }

    .widget-preview__canvas {
        min-height: 560px;
        padding: 18px 12px;
    }

    .widget-card {
        min-height: 330px;
    }

    .widgets-install__technical {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 1800px) {
    .widget-catalog__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}