/* Editorial treatment for the public customization page and homepage dialog. */
responsive-bottom-sheet > dialog > .kol-home-customization-dialog {
    display: flex;
    flex-direction: column;
    width: min(720px, 100%);
    max-width: 100%;
    max-height: min(90vh, 840px);
    max-height: min(90svh, 840px);
    max-height: min(90dvh, 840px);
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 10px);
    background: var(--background);
    color: var(--foreground);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

/* Use synopsis dialog treatment for customization sheet. */
responsive-bottom-sheet > dialog > .kol-home-customization-dialog {
    width: min(58rem, 100%);
    border-radius: 0;
}

.kol-home-customization-dialog__header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: clamp(1.15rem, 3vw, 2rem);
    border-block-end: 1px solid var(--border);
}

.kol-home-customization-dialog__header h2 {
    margin: 0;
    color: var(--foreground);
    font-family: var(--kol-font-ui), Georgia, "Times New Roman", serif;
    font-size: clamp(1.55rem, 3vw, 2.35rem);
    font-weight: 500;
}

.kol-home-customization-dialog__close {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    font-size: 1.35rem;
    line-height: 1;
}

.kol-home-customization-dialog__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: clamp(1.15rem, 3vw, 2rem);
}

.kol-home-customization-dialog__body > .kol-account-login {
    max-width: none;
    margin: 0;
    padding: 0;
}

.kol-home-customization-dialog__body .kol-account-login__panel {
    margin: 0;
}

.kol-home-customization-dialog__handle {
    display: none;
}

.kol-home-customization-dialog .kol-account-customization__head h2 {
    font-family: inherit;
}

@media (max-width: 700px) {
    responsive-bottom-sheet > dialog > .kol-home-customization-dialog {
        inset: auto 0 0;
        width: 100%;
        max-width: 100%;
        max-height: min(100vh, 840px);
        max-height: min(100svh, 840px);
        max-height: min(100dvh, 840px);
        margin: 0;
        border-radius: var(--radius-lg, 10px) var(--radius-lg, 10px) 0 0;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .kol-home-customization-dialog__handle {
        display: flex;
        min-height: 36px;
        flex: 0 0 36px;
        align-items: center;
        justify-content: center;
    }

    .kol-home-customization-dialog__handle > span {
        display: block;
        width: 36px;
        height: 4px;
        border-radius: 999px;
        background: var(--muted-foreground);
        opacity: .55;
    }
}

:is(.kol-customization-page, .kol-home-customization-dialog) {
    --customization-number-font: "Montserrat", var(--kol-font-ui), sans-serif;
    --customization-serif: var(--kol-font-ui), Georgia, "Times New Roman", serif;
    --customization-rule: color-mix(in srgb, var(--border) 88%, transparent);
    direction: rtl;
    color: var(--foreground);
    font-family: var(--kol-font-ui), sans-serif;
    line-height: 1.7;
}

:is(.kol-customization-page, .kol-home-customization-dialog),
:is(.kol-customization-page, .kol-home-customization-dialog) * {
    box-sizing: border-box;
}

/* Give the standalone page the same quiet canvas as the account dossier. */
body.kol-public-customization-page #content .wrapper {
    width: min(1180px, calc(100% - 36px));
    max-width: none;
}

body.kol-public-customization-page .postbody {
    float: none;
    width: 100%;
    margin: 0;
}

body.kol-public-customization-page .postbody > .bixbox {
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

body.kol-public-customization-page .postbody > .bixbox > .releases,
body.kol-public-customization-page .comments-area,
body.kol-public-customization-page #sidebar {
    display: none;
}

body.kol-public-customization-page .postbody > .bixbox > .page {
    padding: 0;
}

body.kol-public-customization-page .kol-customization-page {
    width: 100%;
    max-width: 1040px;
    margin-inline: auto;
    padding: 0 0 clamp(42px, 7vw, 80px);
}

body.kol-public-customization-page .kol-customization-page .kol-account-customization__section:first-child {
    border-top: 0;
}

.kol-customization-page__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, .52fr);
    align-items: end;
    gap: 22px 44px;
    padding-block: clamp(28px, 5vw, 58px) 20px;
    border-bottom: 1px solid var(--border);
}

.kol-customization-page__header::after {
    width: min(210px, 42%);
    height: 2px;
    margin-top: -1px;
    background: var(--primary);
    content: "";
}

.kol-customization-page__title {
    min-width: 0;
}

.kol-customization-page__kicker,
.kol-home-customization-dialog__kicker {
    display: block;
    color: var(--muted-foreground);
    direction: ltr;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .18em;
    line-height: 1.3;
    text-transform: uppercase;
}

.kol-customization-page__title h1 {
    margin: 6px 0 0;
    color: var(--foreground);
    font-family: var(--customization-serif);
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    font-weight: 500;
    letter-spacing: -.04em;
    line-height: 1.15;
}

.kol-customization-page__intro,
.kol-home-customization-dialog__intro {
    max-width: 32ch;
    margin: 0;
    color: var(--muted-foreground);
    font-size: .88rem;
    line-height: 1.9;
}

/* Remove the generic account card before rebuilding the component as a dossier. */
:is(.kol-customization-page, .kol-home-customization-dialog) > .kol-account-login__panel,
:is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-login__panel {
    width: 100%;
    max-width: none;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

:is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-customization {
    display: grid;
    gap: 0;
    counter-reset: customization-section;
}

:is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-customization__section {
    position: relative;
    display: grid;
    grid-template-columns: minmax(112px, .34fr) minmax(0, 1fr);
    column-gap: clamp(24px, 5vw, 72px);
    row-gap: 0;
    align-items: start;
    min-width: 0;
    padding-block: clamp(30px, 5vw, 54px);
    border: 0;
    border-bottom: 1px solid var(--customization-rule);
    border-radius: 0;
    background: transparent;
    counter-increment: customization-section;
}

:is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-customization__section:first-child {
    border-top: 1px solid var(--customization-rule);
}

:is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-customization__head {
    display: grid;
    grid-column: 1;
    grid-row: 1 / span 12;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 3px;
    align-content: start;
    min-width: 0;
}

:is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-customization__head::before {
    grid-column: 1;
    grid-row: 1 / span 3;
    color: var(--foreground);
    content: counter(customization-section, decimal-leading-zero);
    font-family: var(--customization-number-font);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    line-height: 1;
}

:is(.kol-customization-page, .kol-home-customization-dialog) [data-starless-theme-picker] .kol-account-customization__head::after,
:is(.kol-customization-page, .kol-home-customization-dialog) [data-starless-reading-preferences] .kol-account-customization__head::after {
    grid-column: 2;
    grid-row: 1;
    color: var(--muted-foreground);
    direction: ltr;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .16em;
    line-height: 1.3;
    text-transform: uppercase;
}

:is(.kol-customization-page, .kol-home-customization-dialog) [data-starless-theme-picker] .kol-account-customization__head::after {
    content: "APPEARANCE";
}

:is(.kol-customization-page, .kol-home-customization-dialog) [data-starless-reading-preferences] .kol-account-customization__head::after {
    content: "READING";
}

:is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-customization__head h2,
:is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-customization__head p {
    grid-column: 2;
    margin: 0;
}

:is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-customization__head h2 {
    grid-row: 2;
    color: var(--foreground);
    font-family: var(--customization-serif);
    font-size: clamp(1.45rem, 2.5vw, 2rem);
    font-weight: 500;
    line-height: 1.25;
}

:is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-customization__head p {
    grid-row: 3;
    color: var(--muted-foreground);
    font-size: 11px;
    line-height: 1.8;
}

:is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-theme__choices,
:is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-theme__mode,
:is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-theme__status,
:is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-reading__grid,
:is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-reading__range,
:is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-reading__option,
:is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-reading__reset,
:is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-reading__status {
    grid-column: 2;
    min-width: 0;
}

:is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-theme__choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

:is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-theme__choice {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-width: 0;
    min-height: 58px;
    padding: 12px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    text-align: start;
    white-space: normal;
}

:is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-theme__label {
    min-width: 0;
    flex: 1 1 auto;
    overflow-wrap: anywhere;
}

:is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-theme__swatch {
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    border: 1px solid color-mix(in srgb, var(--foreground) 18%, transparent);
    border-radius: 0;
    background: var(--starless-theme-color);
    box-shadow: inset 0 0 0 3px color-mix(in srgb, #fff 28%, transparent);
}

:is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-theme__mode {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
    min-height: 68px;
    padding: 16px 0 0;
    border: 0;
    border-block-start: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    color: var(--foreground);
}

:is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-theme__mode-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

:is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-theme__mode-label {
    color: var(--foreground);
    font-size: 11px;
    font-weight: 700;
}

:is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-theme__mode-description {
    color: var(--muted-foreground);
    font-size: 10px;
    font-weight: 400;
    line-height: 1.7;
}

:is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-theme__status,
:is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-reading__status {
    margin: 10px 0 0;
    color: var(--starless-success);
    font-size: 11px;
}

:is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-theme__status.is-error {
    color: var(--destructive);
}

:is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-reading__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;
    border-top: 1px solid var(--customization-rule);
}

:is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-reading__field,
:is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-reading__range,
:is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-reading__option {
    display: grid;
    min-width: 0;
    min-height: 58px;
    padding: 12px 0;
    border-bottom: 1px solid var(--customization-rule);
    color: var(--foreground);
    font-size: 11px;
    font-weight: 700;
}

:is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-reading__field {
    gap: 6px;
}

:is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-reading__field select {
    width: 100%;
    min-height: 31px;
    padding: 4px 0;
    border: 0;
    border-bottom: 1px solid var(--customization-rule);
    border-radius: 0;
    background: transparent;
    color: var(--foreground);
    font: inherit;
    font-size: 12px;
    font-weight: 400;
}

:is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-reading__field select:focus,
:is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-reading__range input:focus-visible {
    border-color: var(--primary);
    outline: 0;
    box-shadow: none;
}

:is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-reading__range {
    gap: 8px;
}

:is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-reading__range > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

:is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-reading__range output {
    color: var(--muted-foreground);
    font-family: var(--customization-number-font);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

:is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-reading__range input {
    width: 100%;
    accent-color: var(--primary);
    cursor: pointer;
}

:is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-reading__option {
    grid-template-columns: minmax(100px, .45fr) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

:is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-reading__segments {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: 17px;
    min-width: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--customization-rule);
    border-radius: 0;
    background: transparent;
}

:is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-reading__segments button,
:is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-reading__toggle {
    min-height: 32px;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 700;
}

:is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-reading__toggle {
    justify-self: start;
    min-width: 86px;
    text-align: center;
}

:is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-reading__reset {
    min-height: 32px;
    padding: 5px 0;
    font-size: 11px;
    font-weight: 700;
}

:is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-reading__toggle.is-muted {
    opacity: .7;
}

.kol-chapter-autoload-option__copy h3 {
    margin: 0;
    color: var(--foreground);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
}

.kol-chapter-autoload-option__copy p {
    margin: 4px 0 0;
    color: var(--muted-foreground);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.65;
}

:is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-reading__reset {
    justify-self: start;
    margin-top: 18px;
}

/* Keep the homepage dialog controls on the shared compact control scale. */
.kol-home-customization-dialog .kol-customization-page .kol-account-theme__choice {
    min-height: max(var(--kol-ui-size, 2.5rem), 3.375rem);
    padding-block: .75rem;
    padding-inline: var(--kol-ui-btn-p, 1rem);
    font-size: var(--kol-ui-fontsize, .875rem);
    font-weight: 600;
}

.kol-home-customization-dialog .kol-customization-page .kol-account-reading__field select {
    min-height: var(--kol-ui-size, 2rem);
    height: var(--kol-ui-size, 2rem);
    padding-block: 0;
    padding-inline: var(--kol-ui-btn-p, .75rem);
    border: var(--border, 1px) solid var(--s13-control-border, var(--border));
    border-radius: var(--radius-field, 0);
    background-color: var(--s13-control-surface, var(--background));
    color: var(--s13-control-foreground, var(--foreground));
    font-size: var(--kol-ui-fontsize, .75rem);
    font-weight: 400;
}

.kol-home-customization-dialog .kol-customization-page .kol-account-reading__segments {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .375rem;
    padding: .25rem;
    border: var(--border, 1px) solid var(--s13-control-border, var(--border));
    border-radius: var(--radius-field, 0);
    background: var(--s13-control-surface-2, var(--background));
}

.kol-home-customization-dialog .kol-customization-page .kol-account-reading__segments button,
.kol-home-customization-dialog .kol-customization-page .kol-account-reading__toggle,
.kol-home-customization-dialog .kol-customization-page .kol-account-reading__reset {
    min-height: var(--kol-ui-size, 2rem);
    padding-block: 0;
    padding-inline: var(--kol-ui-btn-p, .75rem);
    font-size: var(--kol-ui-fontsize, .75rem);
    font-weight: 600;
}

.kol-home-customization-dialog .kol-customization-page .kol-account-reading__toggle {
    min-width: 86px;
}

/* Homepage dialog shell. The same rules above then style its shared contents. */
.kol-home-customization-dialog {
    width: min(1040px, calc(100% - 32px));
    max-width: calc(100% - 32px);
    max-height: min(90vh, 840px);
    max-height: min(90svh, 840px);
    max-height: min(90dvh, 840px);
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 0;
    background: var(--background);
    box-shadow: 0 24px 80px rgb(0 0 0 / 45%);
}

.kol-home-customization-dialog::backdrop {
    background: rgb(0 0 0 / 68%);
}

.kol-home-customization-dialog__card {
    display: flex;
    max-height: inherit;
    flex-direction: column;
}

.kol-home-customization-dialog__header {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 28px 16px;
    border-bottom: 1px solid var(--border);
}

.kol-home-customization-dialog__heading {
    min-width: 0;
}

.kol-home-customization-dialog__header h2 {
    margin: 6px 0 0;
    color: var(--foreground);
    font-family: var(--customization-serif);
    font-size: clamp(1.55rem, 2.8vw, 2.2rem);
    font-weight: 500;
    line-height: 1.2;
}

.kol-home-customization-dialog__close {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    font-size: 1.5rem;
    line-height: 1;
}

.kol-home-customization-dialog__body {
    min-height: 0;
    overflow: auto;
    padding: 0 28px 26px;
}

.kol-home-customization-dialog__intro {
    max-width: 44ch;
    padding-block: 17px 3px;
    font-size: 11px;
}

.kol-home-customization-dialog .kol-customization-page {
    padding: 0;
}

.kol-home-customization-dialog .kol-customization-page__header {
    display: none;
}

@media (max-width: 700px) {
    body.kol-public-customization-page #content .wrapper {
        width: calc(100% - 24px);
    }

    .kol-customization-page__header {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .kol-customization-page__header::after {
        width: 100%;
        margin-top: 4px;
    }

    :is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-customization__section {
        grid-template-columns: 1fr;
        row-gap: 21px;
    }

    :is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-customization__head,
    :is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-theme__choices,
    :is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-theme__mode,
    :is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-theme__status,
    :is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-reading__grid,
    :is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-reading__range,
    :is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-reading__option,
    :is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-reading__reset,
    :is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-reading__status {
        grid-column: 1;
    }

    :is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-customization__head {
        grid-row: auto;
    }

    :is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-reading__grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    :is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-reading__option {
        grid-template-columns: minmax(100px, .45fr) minmax(0, 1fr);
    }

    .kol-home-customization-dialog {
        width: 100%;
        max-width: 100%;
        max-height: min(100vh, 840px);
        max-height: min(100svh, 840px);
        max-height: min(100dvh, 840px);
        margin: 0;
        border-radius: var(--radius-lg, 10px) var(--radius-lg, 10px) 0 0;
        align-self: end;
    }

    .kol-home-customization-dialog__header {
        padding: 17px 16px 13px;
    }

    .kol-home-customization-dialog__body {
        padding-inline: 16px;
    }
}

@media (max-width: 430px) {
    :is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-reading__option {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    :is(.kol-customization-page, .kol-home-customization-dialog) .kol-account-theme__choices {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(.kol-customization-page, .kol-home-customization-dialog) * {
        scroll-behavior: auto;
        transition-duration: 0.001ms !important;
    }
}

/* Editorial page specimens for the selectable site themes. */
:is(.kol-customization-page, .kol-home-customization-dialog, .kol-account-editorial__section) .kol-account-customization[data-starless-customization] .kol-account-theme__choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 22px clamp(20px, 3vw, 36px);
    min-width: 0;
    max-width: 100%;
    width: 100%;
    padding: 0;
}

:is(.kol-customization-page, .kol-home-customization-dialog, .kol-account-editorial__section) .kol-account-customization[data-starless-customization] .kol-account-theme__choice {
    --starless-theme-current-color: var(--starless-theme-color);
    position: relative;
    appearance: none;
    -webkit-appearance: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--foreground);
    font: inherit;
    text-align: start;
    white-space: normal;
    cursor: pointer;
    outline: none;
    box-shadow: none;
    transition: color 300ms cubic-bezier(.22, .8, .2, 1);
}

:is(.kol-customization-page, .kol-home-customization-dialog, .kol-account-editorial__section) .kol-account-customization[data-starless-customization] .kol-account-theme__choice:hover,
:is(.kol-customization-page, .kol-home-customization-dialog, .kol-account-editorial__section) .kol-account-customization[data-starless-customization] .kol-account-theme__choice[aria-pressed="true"] {
    border: 0;
    background: transparent;
    color: var(--foreground);
    outline: none;
    box-shadow: none;
}

:is(.kol-customization-page, .kol-home-customization-dialog, .kol-account-editorial__section) .kol-account-customization[data-starless-customization] .kol-account-theme__choice:focus-visible {
    outline: none;
    box-shadow: none;
}

.kol-account-theme__preview {
    --preview-background: var(--starless-preview-light-background, var(--background));
    --preview-foreground: var(--starless-preview-light-foreground, var(--foreground));
    --preview-card: var(--starless-preview-light-card, var(--card));
    --preview-muted: var(--starless-preview-light-muted, var(--muted));
    --preview-muted-foreground: var(--starless-preview-light-muted-foreground, var(--muted-foreground));
    --preview-border: var(--starless-preview-light-border, var(--border));
    --preview-accent: var(--starless-theme-color, var(--primary));
    --header-bg: var(--background);
    --header-muted: var(--muted-foreground);
    --header-border: var(--border);
    --header-accent: var(--preview-accent);
    position: relative;
    display: grid;
    grid-template-rows: 29px minmax(0, 1fr);
    aspect-ratio: 2.35 / 1;
    min-height: 96px;
    overflow: hidden;
    border: 0;
    border-block: 1px solid var(--preview-border);
    border-radius: 0;
    background: var(--preview-background);
    color: var(--preview-foreground);
    transition: transform 300ms cubic-bezier(.22, .8, .2, 1), background-color 300ms cubic-bezier(.22, .8, .2, 1);
}

:is(body.darkmode, body.dark, body[data-theme="dark"], html.dark, html[data-theme="dark"]) .kol-account-theme__preview {
    --preview-background: var(--starless-preview-dark-background, var(--background));
    --preview-foreground: var(--starless-preview-dark-foreground, var(--foreground));
    --preview-card: var(--starless-preview-dark-card, var(--card));
    --preview-muted: var(--starless-preview-dark-muted, var(--muted));
    --preview-muted-foreground: var(--starless-preview-dark-muted-foreground, var(--muted-foreground));
    --preview-border: var(--starless-preview-dark-border, var(--border));
    --preview-accent: var(--starless-theme-dark, var(--starless-theme-color, var(--primary)));
}

.kol-account-theme__preview-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    padding-inline: 12px;
    border: 0;
    border-block-end: 1px solid var(--header-border);
    background: var(--header-bg);
    color: var(--header-muted);
}

.kol-account-theme__preview-number {
    color: var(--header-muted);
    font-size: 9px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    direction: ltr;
}

.kol-account-theme__preview-dots {
    display: flex;
    align-items: center;
    gap: 5px;
}

.kol-account-theme__preview-dots i {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--header-accent);
    transition: transform 280ms cubic-bezier(.22, .8, .2, 1);
}

.kol-account-theme__preview-dots i:first-child { opacity: .56; }
.kol-account-theme__preview-dots i:last-child { background: var(--starless-theme-dark, var(--header-accent)); }

.kol-account-theme__preview-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px;
    align-items: center;
    gap: 16px;
    min-width: 0;
    padding: 12px clamp(12px, 2.2vw, 20px);
    background: var(--preview-card);
}

.kol-account-theme__preview-graphic {
    display: flex;
    height: 29px;
    align-items: end;
    justify-content: flex-start;
    gap: 4px;
}

.kol-account-theme__preview-graphic i {
    display: block;
    width: 4px;
    transform: scaleY(.94);
    transform-origin: center bottom;
    background: var(--preview-accent);
    transition: transform 280ms cubic-bezier(.22, .8, .2, 1);
}

.kol-account-theme__preview-graphic i:nth-child(1) { height: 62%; opacity: .72; }
.kol-account-theme__preview-graphic i:nth-child(2) { height: 100%; }
.kol-account-theme__preview-graphic i:nth-child(3) { height: 76%; opacity: .84; }

.kol-account-theme__preview-copy {
    display: grid;
    align-content: center;
    gap: 6px;
    min-width: 0;
}

.kol-account-theme__preview-accent,
.kol-account-theme__preview-title,
.kol-account-theme__preview-lines i {
    display: block;
}

.kol-account-theme__preview-accent {
    width: 26%;
    max-width: 54px;
    height: 2px;
    transform: scaleX(1);
    transform-origin: right center;
    background: var(--preview-accent);
    transition: transform 300ms cubic-bezier(.22, .8, .2, 1);
}

.kol-account-theme__preview-title {
    width: 61%;
    height: 5px;
    background: var(--preview-foreground);
}

.kol-account-theme__preview-lines {
    display: grid;
    gap: 4px;
}

.kol-account-theme__preview-lines i {
    width: 100%;
    height: 2px;
    background: color-mix(in srgb, var(--preview-muted-foreground) 48%, var(--preview-muted));
}

.kol-account-theme__preview-lines i:nth-child(2) { width: 83%; }
.kol-account-theme__preview-lines i:nth-child(3) { width: 66%; }

.kol-account-theme__meta {
    position: relative;
    display: flex;
    grid-column: 1;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    min-width: 0;
    padding: 12px 0 11px;
    border: 0;
    border-block-end: 1px solid var(--border);
}

.kol-account-theme__meta::before,
.kol-account-theme__meta::after {
    position: absolute;
    inset-inline-start: 0;
    content: "";
    pointer-events: none;
}

.kol-account-theme__meta::before {
    inset-block-start: 0;
    width: 30px;
    height: 2px;
    background: var(--starless-theme-current-color, var(--starless-theme-color));
    opacity: 0;
}

.kol-account-theme__meta::after {
    inset-block-end: 0;
    width: 100%;
    height: 2px;
    transform: scaleX(0);
    transform-origin: right center;
    background: var(--starless-theme-current-color, var(--starless-theme-color));
    transition: transform 320ms cubic-bezier(.22, .8, .2, 1);
}

.kol-account-theme__label {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--foreground);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    transition: color 280ms cubic-bezier(.22, .8, .2, 1), transform 280ms cubic-bezier(.22, .8, .2, 1);
}

.kol-account-theme__badge,
.kol-account-theme__active {
    color: var(--muted-foreground);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.45;
}

.kol-account-theme__badge { white-space: nowrap; }
.kol-account-theme__active { display: none; margin-inline-start: auto; color: var(--starless-theme-current-color, var(--starless-theme-color)); }

.kol-account-theme__choice[aria-pressed="true"] .kol-account-theme__label { color: var(--starless-theme-current-color, var(--starless-theme-color)); }
.kol-account-theme__choice[aria-pressed="true"] .kol-account-theme__active { display: inline-flex; }
.kol-account-theme__choice[aria-pressed="true"] .kol-account-theme__meta::after { transform: scaleX(1); }
.kol-account-theme__choice:focus-visible .kol-account-theme__meta::before { opacity: 1; }

:is(body.darkmode, body.dark, body[data-theme="dark"], html.dark, html[data-theme="dark"]) .kol-account-theme__choice {
    --starless-theme-current-color: var(--starless-theme-dark, var(--starless-theme-color));
}

.kol-account-theme__choice:hover .kol-account-theme__preview { transform: translateY(-2px); }
.kol-account-theme__choice:hover .kol-account-theme__preview-accent { transform: scaleX(1.46); }
.kol-account-theme__choice:hover .kol-account-theme__preview-graphic i { transform: scaleY(1.08); }
.kol-account-theme__choice:hover .kol-account-theme__preview-graphic i:first-child { transition-delay: 30ms; }
.kol-account-theme__choice:hover .kol-account-theme__preview-graphic i:last-child { transition-delay: 60ms; }
.kol-account-theme__choice:hover .kol-account-theme__preview-dots i:last-child { transform: scale(1.18); }
.kol-account-theme__choice:hover .kol-account-theme__label { transform: translateX(-2px); }
.kol-account-theme__choice[aria-pressed="false"]:hover .kol-account-theme__meta::after { transform: scaleX(.18); }

@media (max-width: 640px) {
    :is(.kol-customization-page, .kol-home-customization-dialog, .kol-account-editorial__section) .kol-account-customization[data-starless-customization] .kol-account-theme__choices {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .kol-account-theme__preview { aspect-ratio: 2.8 / 1; }
}

@media (prefers-reduced-motion: reduce) {
    .kol-account-theme__choice,
    .kol-account-theme__preview,
    .kol-account-theme__preview-dots i,
    .kol-account-theme__preview-graphic i,
    .kol-account-theme__preview-accent,
    .kol-account-theme__label,
    .kol-account-theme__meta::after {
        transition: none !important;
    }

    .kol-account-theme__choice:hover .kol-account-theme__preview,
    .kol-account-theme__choice:hover .kol-account-theme__preview-accent,
    .kol-account-theme__choice:hover .kol-account-theme__preview-dots i:last-child,
    .kol-account-theme__choice:hover .kol-account-theme__preview-graphic i,
    .kol-account-theme__choice:hover .kol-account-theme__label {
        transform: none;
    }
}

:is(.kol-customization-page, .kol-home-customization-dialog, .kol-account-editorial__section) .kol-account-customization[data-starless-customization] .kol-account-theme__mode {
    margin-block-start: 8px;
}