* {
    --primary-health: #360CAE;
    --primary-sales: #BF0834;
    --primary-financial: #7C570F;
    --primary-productivity: #0B830F;
    
    --accent-health: #C3CAFC;
    --accent-sales: #FBCCD4;
    --accent-financial: #FFF7B3;
    --accent-productivity: #DDF18A;
    
    --accent-assertive: #DDF18A;
    --accent-compassionate: #BCE1FC;
    --accent-curious: #FFF7B3;
    --accent-excited: #FFB799;
    --accent-optimistic: #C3CAFC;
    --accent-playful: #FBCCD4;
    
    --page-bg-health: #F0F1FA;
    --page-bg-financial: #FDFCF5;
    --page-bg-sales: #FFF7F5;
    --page-bg-productivity: #F9FDF7;
}

/*agent dependent color assignments*/

/*wellness coach*/

.health-coach-bg,
.health-coach-bg .error .msgbox-outer,
.health-coach-bg .page.three .parameters-block .trait .icon .progress-bar::before,
.health-coach-bg .page.four .conversation-interface .input-area .message {
    background-color: var(--page-bg-health);
}

.health-coach-bg .page.four .conversation-interface .input-area .message.selected {
    background-color: var(--accent-health);
}

.health-coach-bg .card-ornaments .border-end,
.health-coach-bg .card-ornaments .border-side,
.health-coach-bg .sample-ornaments .border-end,
.health-coach-bg .sample-ornaments .border-end .border-top,
.health-coach-bg .sample-ornaments .border-side,
.health-coach-bg .error .msgbox-outer,
.health-coach-bg .error .msgbox-outer .msgbox-inner,
.health-coach-bg .radial-interface .axes .axis,
.health-coach-bg .radial-interface .axes .axis .trait-icon,
.health-coach-bg .radial-interface .axes .axis .handle,
.health-coach-bg .radial-interface .axes .axis .handle .grab-handle,
.health-coach-bg .page.four .conversation-interface .input-area .message {
    border-color: var(--primary-health);
    stroke: var(--primary-health);
    fill: var(--primary-health);
}

.health-coach-bg .page.four .page-toggle-control {
    border-color: var(--primary-health);
}

.health-coach-bg .card-ornaments .corner,
.health-coach-bg .sample-ornaments .corner,
.health-coach-bg .error .msgbox-outer .msgbox-inner .end-ornament .pip,
.health-coach-bg .radial-interface .divider-axes .axis:after,
.health-coach-bg .divider-axes .axis .pip, 
.health-coach-bg .axes .axis .handle .grab-handle:before,
.health-coach-bg .axes .axis .handle .grab-handle:after,
.health-coach-bg .axes .axis .handle .grab-handle .inner,
.health-coach-bg .page.four .conversation-interface .input-area .message::before,
.health-coach-bg .page.four .conversation-interface .input-area .message::after {
    background-color: var(--primary-health);
}

.health-coach-bg .radial-interface .divider-axes .axis {
    background: linear-gradient(
        #ffffff00 0%, #ffffff00 3%,
        var(--primary-health) 3%, var(--primary-health) 22%,
        #ffffff00 22%, #ffffff00 28%,
        var(--primary-health) 28%, var(--primary-health) 97%,
        #ffffff00 97%
    );
}

.card#Health .traits-block,
.health-coach-bg .card .toolbar .button.done,
.health-coach-bg .conversation-sample .block-title,
.health-coach-bg .error .msgbox-outer .msgbox-inner .msgbox-content,
.health-coach-bg .next-button,
.health-coach-bg .sample-ornaments .trait-icon,
.health-coach-bg .page.three .parameters-block .trait,
.health-coach-bg .shape-avatar-preview .constructed-shape svg,
.health-coach-bg .page.four .conversation-interface .input-area .custom-input-field .send-button {
    color: var(--primary-health);
    stroke: var(--primary-health);
    fill: var(--primary-health);
}

.health-coach-bg .card .card-content .quote .date,
.health-coach-bg .card .card-content .quote .split-border,
.health-coach-bg .page.four .conversation-interface .message-scroll-area .message.user:before {
    color: var(--primary-health);
    border-color: var(--primary-health);
}

.card#Health .card-backgrounds {
    background: radial-gradient(circle at 60% 15%, var(--accent-health) 0%,  var(--accent-health) 35%, #ffffff00 35%);
}

.full-page-gradients.health {
    background: radial-gradient(circle at 60% 35%, var(--accent-health) 0%,  var(--accent-health) 35%, #ffffff00 35%);
}

/*financial adviser*/

.financial-adviser-bg,
.financial-adviser-bg .error .msgbox-outer,
.financial-adviser-bg .page.three .parameters-block .trait .icon .progress-bar::before,
.financial-adviser-bg .page.four .conversation-interface .input-area .message {
    background-color: var(--page-bg-financial);
}

.financial-adviser-bg .page.four .conversation-interface .input-area .message.selected {
    background-color: var(--accent-financial);
}

.financial-adviser-bg .card-ornaments .border-end,
.financial-adviser-bg .card-ornaments .border-side,
.financial-adviser-bg .sample-ornaments .border-end,
.financial-adviser-bg .sample-ornaments .border-end .border-top,
.financial-adviser-bg .sample-ornaments .border-side,
.financial-adviser-bg .error .msgbox-outer,
.financial-adviser-bg .error .msgbox-outer .msgbox-inner,
.financial-adviser-bg .radial-interface .axes .axis,
.financial-adviser-bg .radial-interface .axes .axis .trait-icon,
.financial-adviser-bg .radial-interface .axes .axis .handle,
.financial-adviser-bg .radial-interface .axes .axis .handle .grab-handle,
.financial-adviser-bg .page.four .conversation-interface .input-area .message {
    border-color: var(--primary-financial);
    stroke: var(--primary-financial);
    fill: var(--primary-financial);
}

.financial-adviser-bg .page.four .page-toggle-control {
    border-color: var(--primary-financial);
}

.financial-adviser-bg .card-ornaments .corner,
.financial-adviser-bg .sample-ornaments .corner,
.financial-adviser-bg .error .msgbox-outer .msgbox-inner .end-ornament .pip,
.financial-adviser-bg .radial-interface .divider-axes .axis:after,
.financial-adviser-bg .divider-axes .axis .pip,
.financial-adviser-bg .axes .axis .handle .grab-handle:before,
.financial-adviser-bg .axes .axis .handle .grab-handle:after,
.financial-adviser-bg .axes .axis .handle .grab-handle .inner,
.financial-adviser-bg .page.four .conversation-interface .input-area .message::before,
.financial-adviser-bg .page.four .conversation-interface .input-area .message::after {
    background-color: var(--primary-financial);
}

.financial-adviser-bg .radial-interface .divider-axes .axis {
    background: linear-gradient(
        #ffffff00 0%, #ffffff00 3%,
        var(--primary-financial) 3%, var(--primary-financial) 22%,
        #ffffff00 22%, #ffffff00 28%,
        var(--primary-financial) 28%, var(--primary-financial) 97%,
        #ffffff00 97%
    );
}

.card#Financial .traits-block,
.financial-adviser-bg .card .toolbar .button.done,
.financial-adviser-bg .conversation-sample .block-title,
.financial-adviser-bg .error .msgbox-outer .msgbox-inner .msgbox-content,
.financial-adviser-bg .next-button,
.financial-adviser-bg .sample-ornaments .trait-icon,
.financial-adviser-bg .page.three .parameters-block .trait,
.financial-adviser-bg .shape-avatar-preview .constructed-shape svg,
.financial-adviser-bg .page.four .conversation-interface .input-area .custom-input-field .send-button {
    color: var(--primary-financial);
    stroke: var(--primary-financial);
    fill: var(--primary-financial);
}

.financial-adviser-bg .card .card-content .quote .date,
.financial-adviser-bg .card .card-content .quote .split-border,
.financial-adviser-bg .page.four .conversation-interface .message-scroll-area .message.user:before {
    color: var(--primary-financial);
    border-color: var(--primary-financial);
}

.card#Financial .card-backgrounds {
    background: radial-gradient(circle at 60% 15%, var(--accent-financial) 0%,  var(--accent-financial) 35%, #ffffff00 35%);
}

.full-page-gradients.financial {
    background: radial-gradient(circle at 60% 35%, var(--accent-financial) 0%,  var(--accent-financial) 35%, #ffffff00 35%);
}

/*sales rep*/

.sales-representative-bg,
.sales-representative-bg .error .msgbox-outer,
.sales-representative-bg .page.three .parameters-block .trait .icon .progress-bar::before,
.sales-representative-bg .page.four .conversation-interface .input-area .message {
    background-color: var(--page-bg-sales);
}

.sales-representative-bg .page.four .conversation-interface .input-area .message.selected {
    background-color: var(--accent-sales);
}

.sales-representative-bg .card-ornaments .border-end,
.sales-representative-bg .card-ornaments .border-side,
.sales-representative-bg .sample-ornaments .border-end,
.sales-representative-bg .sample-ornaments .border-end .border-top,
.sales-representative-bg .sample-ornaments .border-side,
.sales-representative-bg .error .msgbox-outer,
.sales-representative-bg .error .msgbox-outer .msgbox-inner,
.sales-representative-bg .radial-interface .axes .axis,
.sales-representative-bg .radial-interface .axes .axis .trait-icon,
.sales-representative-bg .radial-interface .axes .axis .handle,
.sales-representative-bg .radial-interface .axes .axis .handle .grab-handle,
.sales-representative-bg .page.four .conversation-interface .input-area .message {
    border-color: var(--primary-sales);
    stroke: var(--primary-sales);
    fill: var(--primary-sales);
}

.sales-representative-bg .page.four .page-toggle-control {
    border-color: var(--primary-sales);
}

.sales-representative-bg .card-ornaments .corner,
.sales-representative-bg .sample-ornaments .corner,
.sales-representative-bg .error .msgbox-outer .msgbox-inner .end-ornament .pip,
.sales-representative-bg .radial-interface .divider-axes .axis:after,
.sales-representative-bg .divider-axes .axis .pip,
.sales-representative-bg .axes .axis .handle .grab-handle:before,
.sales-representative-bg .axes .axis .handle .grab-handle:after,
.sales-representative-bg .axes .axis .handle .grab-handle .inner,
.sales-representative-bg .page.four .conversation-interface .input-area .message::before,
.sales-representative-bg .page.four .conversation-interface .input-area .message::after {
    background-color: var(--primary-sales);
}

.sales-representative-bg .radial-interface .divider-axes .axis {
    background: linear-gradient(
        #ffffff00 0%, #ffffff00 3%,
        var(--primary-sales) 3%, var(--primary-sales) 22%,
        #ffffff00 22%, #ffffff00 28%,
        var(--primary-sales) 28%, var(--primary-sales) 97%,
        #ffffff00 97%
    );
}

.card#Sales .traits-block,
.sales-representative-bg .card .toolbar .button.done,
.sales-representative-bg .conversation-sample .block-title,
.sales-representative-bg .error .msgbox-outer .msgbox-inner .msgbox-content,
.sales-representative-bg .next-button,
.sales-representative-bg .sample-ornaments .trait-icon,
.sales-representative-bg .page.three .parameters-block .trait,
.sales-representative-bg .shape-avatar-preview .constructed-shape svg,
.sales-representative-bg .page.four .conversation-interface .input-area .custom-input-field .send-button {
    color: var(--primary-sales);
    stroke: var(--primary-sales);
    fill: var(--primary-sales);
}

.sales-representative-bg .card .card-content .quote .date,
.sales-representative-bg .card .card-content .quote .split-border,
.sales-representative-bg .page.four .conversation-interface .message-scroll-area .message.user:before {
    color: var(--primary-sales);
    border-color: var(--primary-sales);
}

.card#Sales .card-backgrounds {
    background: radial-gradient(circle at 60% 15%, var(--accent-sales) 0%,  var(--accent-sales) 35%, #ffffff00 35%);
}

.full-page-gradients.sales {
    background: radial-gradient(circle at 60% 35%, var(--accent-sales) 0%,  var(--accent-sales) 35%, #ffffff00 35%);
}

/*productivity pardner*/

.productivity-partner-bg,
.productivity-partner-bg .error .msgbox-outer,
.productivity-partner-bg .page.three .parameters-block .trait .icon .progress-bar::before,
.productivity-partner-bg .page.four .conversation-interface .input-area .message {
    background-color: var(--page-bg-productivity);
}

.productivity-partner-bg .page.four .conversation-interface .input-area .message.selected {
    background-color: var(--accent-productivity);
}

.productivity-partner-bg .card-ornaments .border-end,
.productivity-partner-bg .card-ornaments .border-side,
.productivity-partner-bg .sample-ornaments .border-end,
.productivity-partner-bg .sample-ornaments .border-end .border-top,
.productivity-partner-bg .sample-ornaments .border-side,
.productivity-partner-bg .error .msgbox-outer,
.productivity-partner-bg .error .msgbox-outer .msgbox-inner,
.productivity-partner-bg .radial-interface .axes .axis,
.productivity-partner-bg .radial-interface .axes .axis .trait-icon,
.productivity-partner-bg .radial-interface .axes .axis .handle,
.productivity-partner-bg .radial-interface .axes .axis .handle .grab-handle,
.productivity-partner-bg .page.four .conversation-interface .input-area .message {
    border-color: var(--primary-productivity);
    stroke: var(--primary-productivity);
    fill: var(--primary-productivity);
}

.productivity-partner-bg .page.four .page-toggle-control {
    border-color: var(--primary-productivity);
}

.productivity-partner-bg .card-ornaments .corner,
.productivity-partner-bg .sample-ornaments .corner,
.productivity-partner-bg .error .msgbox-outer .msgbox-inner .end-ornament .pip,
.productivity-partner-bg .radial-interface .divider-axes .axis:after,
.productivity-partner-bg .divider-axes .axis .pip,
.productivity-partner-bg .axes .axis .handle .grab-handle:before,
.productivity-partner-bg .axes .axis .handle .grab-handle:after,
.productivity-partner-bg .axes .axis .handle .grab-handle .inner,
.productivity-partner-bg .page.four .conversation-interface .input-area .message::before,
.productivity-partner-bg .page.four .conversation-interface .input-area .message::after {
    background-color: var(--primary-productivity);
}

.productivity-partner-bg .radial-interface .divider-axes .axis {
    background: linear-gradient(
        #ffffff00 0%, #ffffff00 3%,
        var(--primary-productivity) 3%, var(--primary-productivity) 22%,
        #ffffff00 22%, #ffffff00 28%,
        var(--primary-productivity) 28%, var(--primary-productivity) 97%,
        #ffffff00 97%
    );
}

.card#Productivity .traits-block,
.productivity-partner-bg .card .toolbar .button.done,
.productivity-partner-bg .conversation-sample .block-title,
.productivity-partner-bg .error .msgbox-outer .msgbox-inner .msgbox-content,
.productivity-partner-bg .next-button,
.productivity-partner-bg .sample-ornaments .trait-icon,
.productivity-partner-bg .page.three .parameters-block .trait,
.productivity-partner-bg .shape-avatar-preview .constructed-shape svg,
.productivity-partner-bg .page.four .conversation-interface .input-area .custom-input-field .send-button {
    color: var(--primary-productivity);
    stroke: var(--primary-productivity);
    fill: var(--primary-productivity);
}

.productivity-partner-bg .card .card-content .quote .date,
.productivity-partner-bg .card .card-content .quote .split-border,
.productivity-partner-bg .page.four .conversation-interface .message-scroll-area .message.user:before {
    color: var(--primary-productivity);
    border-color: var(--primary-productivity);
}

.card#Productivity .card-backgrounds {
    background: radial-gradient(circle at 60% 15%, var(--accent-productivity) 0%,  var(--accent-productivity) 35%, #ffffff00 35%);
}

.full-page-gradients.productivity {
    background: radial-gradient(circle at 60% 35%, var(--accent-productivity) 0%,  var(--accent-productivity) 35%, #ffffff00 35%);
}

/*keyword dependent color assignments*/

/*--accent-assertive*/
/*--accent-compassionate*/
/*--accent-curious*/
/*--accent-excited*/
/*--accent-optimistic*/
/*--accent-playful*/

.card-backgrounds .assertive {
    background: radial-gradient(circle at 50% 50%, var(--accent-assertive) 0%, var(--accent-assertive) 25%, #ffffff00 25%);
}

.card-backgrounds .compassionate {
    background: radial-gradient(circle at 50% 50%, var(--accent-compassionate) 0%, var(--accent-compassionate) 25%, #ffffff00 25%);
}

.card-backgrounds .curious {
    background: radial-gradient(circle at 50% 50%, var(--accent-curious) 0%, var(--accent-curious) 25%, #ffffff00 25%);
}

.card-backgrounds .excited {
    background: radial-gradient(circle at 50% 50%, var(--accent-excited) 0%, var(--accent-excited) 25%, #ffffff00 25%);
}

.card-backgrounds .optimistic {
    background: radial-gradient(circle at 50% 50%, var(--accent-optimistic) 0%, var(--accent-optimistic) 25%, #ffffff00 25%);
}

.card-backgrounds .playful {
    background: radial-gradient(circle at 50% 50%, var(--accent-playful) 0%, var(--accent-playful) 25%, #ffffff00 25%);
}

/*shape previews*/

.shape-avatar-preview .assertive {
    background: radial-gradient(circle at 50% 50%, var(--accent-assertive) 0%, var(--accent-assertive) 65%, #ffffff00 65%);
}

.shape-avatar-preview .compassionate {
    background: radial-gradient(circle at 50% 50%, var(--accent-compassionate) 0%, var(--accent-compassionate) 65%, #ffffff00 65%);
}

.shape-avatar-preview .curious {
    background: radial-gradient(circle at 50% 50%, var(--accent-curious) 0%, var(--accent-curious) 65%, #ffffff00 65%);
}

.shape-avatar-preview .excited {
    background: radial-gradient(circle at 50% 50%, var(--accent-excited) 0%, var(--accent-excited) 65%, #ffffff00 65%);
}

.shape-avatar-preview .optimistic {
    background: radial-gradient(circle at 50% 50%, var(--accent-optimistic) 0%, var(--accent-optimistic) 65%, #ffffff00 65%);
}

.shape-avatar-preview .playful {
    background: radial-gradient(circle at 50% 50%, var(--accent-playful) 0%, var(--accent-playful) 65%, #ffffff00 65%);
}@media screen and (min-width: 600px) and (min-aspect-ratio: 4/5)  {
    * {
        --diameter: 450px;
    }
}

@media screen and (max-height: 750px) and (min-aspect-ratio: 4/5)  {
    * {
        --diameter: 400px;
    }

    .page.two .conversation-sample {
        max-height: calc(100dvh - var(--diameter) - 12em);
        overflow-y: hidden;
    }

    .page.two .conversation-sample .sample-ornaments .border-bottom,
    .page.two .conversation-sample .sample-ornaments .border-side,
    .page.two .conversation-sample .sample-ornaments .corner {
        display: none;
    }
}

/*@media screen and (min-width: 600px)  {*/
@media screen and (min-aspect-ratio: 4/5) {

        .screen {
            align-items: stretch;
            justify-content: start;
        }

        .page.one, .page.two, .page.three, .page.four {
            height: 100%;
            width: 100dvw;
            flex-direction: unset;
        }

        .page.three {
            flex-direction: column;
        }

        .page.hidden {
            translate: 0 100dvh;
        }

        .page .header {
            order: 1;
            max-width: 400px;
            width: 50%;
            height: 100%;
            align-items: start;
            justify-content: center;
            z-index: 100;
            padding: 5em;
            pointer-events: none;
        }

        .page:not(.share) .footer {
            position: absolute;
            width: unset;
            order: 2;
            align-items: start;
            justify-content: start;
            left: 5em;
/*            bottom: 18em;*/
            z-index: 110;
        }

        .page .card-interface {
            position: absolute;
            left: 0;
            order: 3;
            height: calc(100dvh - 4em);
            margin: 0;
            width: 100dvw;
        }

        .page .conversation-interface {
            max-width: 50%;
            order: 2;
        }

        .page .card-interface .card {
            min-width: 400px;
            max-width: calc(50dvw - 18em);
            scroll-snap-type: x proximity;
            opacity: 0.5;
        }

        .page .card-interface .card.active {
            opacity: 1;
        }

        .card:first-of-type {
            margin-left: 50dvw;
        }

        .page-title {
            font-size: 2.25em;
            width: 100%;
        }

        .share .page-title {
            font-size: 3em;
        }

        .page.landing {
            position: relative;
            max-width: 600px;
            height: 100%;
            max-height: 100dvh;
            margin: 0;
            padding: 0;
            flex-direction: column;
            justify-content: space-around;
        }

        .page.landing .landing-page-graphic {
            position: relative;
            max-width: var(--diameter);
            max-height: var(--diameter);
        }

        .page.landing .trait-icon:nth-child(1) {
            transform: translate(-50%, -50%) rotate(30deg) translate(calc((var(--diameter)) * 0.5)) rotate(-30deg) scale(1.25);
            background: radial-gradient(50% 50% at 50% 50%, #FFF7B3 0%, #FFF7B300 100%);
        }
        .page.landing .trait-icon:nth-child(2) {
            transform: translate(-50%, -50%) rotate(90deg) translate(calc((var(--diameter)) * 0.5)) rotate(-90deg) scale(1.25);
            background: radial-gradient(50% 50% at 50% 50%, #FFB799 0%, #FFB79900 100%);
        }
        .page.landing .trait-icon:nth-child(3) {
            transform: translate(-50%, -50%) rotate(150deg) translate(calc((var(--diameter)) * 0.5)) rotate(-150deg) scale(1.25);
            background: radial-gradient(50% 50% at 50% 50%, #C3CAFC 0%, #C3CAFC00 100%);
        }
        .page.landing .trait-icon:nth-child(4) {
            transform: translate(-50%, -50%) rotate(210deg) translate(calc((var(--diameter)) * 0.5)) rotate(-210deg) scale(1.25);
            background: radial-gradient(50% 50% at 50% 50%, #FBCCD4 0%, #FBCCD400 100%);
        }
        .page.landing .trait-icon:nth-child(5) {
            transform: translate(-50%, -50%) rotate(270deg) translate(calc((var(--diameter)) * 0.5)) rotate(-270deg) scale(1.25);
            background: radial-gradient(50% 50% at 50% 50%, #DDF18A 0%, #DDF18A00 100%);
        }
        .page.landing .trait-icon:nth-child(6) {
            transform: translate(-50%, -50%) rotate(330deg) translate(calc((var(--diameter)) * 0.5)) rotate(-330deg) scale(1.25);
            background: radial-gradient(50% 50% at 50% 50%, #BCE1FC 0%, #BCE1FC00 100%);
        }

        .ring-dot:nth-child(7) {
            transform: translate(-50%, -50%) rotate(0deg) translate(calc((var(--diameter)) * 0.5)) rotate(0deg);
        }
        .ring-dot:nth-child(8) {
            transform: translate(-50%, -50%) rotate(60deg) translate(calc((var(--diameter)) * 0.5)) rotate(-60deg);
        }
        .ring-dot:nth-child(9) {
            transform: translate(-50%, -50%) rotate(120deg) translate(calc((var(--diameter)) * 0.5)) rotate(-120deg);
        }
        .ring-dot:nth-child(10) {
            transform: translate(-50%, -50%) rotate(180deg) translate(calc((var(--diameter)) * 0.5)) rotate(-180deg);
        }
        .ring-dot:nth-child(11) {
            transform: translate(-50%, -50%) rotate(240deg) translate(calc((var(--diameter)) * 0.5)) rotate(-240deg);
        }
        .ring-dot:nth-child(12) {
            transform: translate(-50%, -50%) rotate(300deg) translate(calc((var(--diameter)) * 0.5)) rotate(-300deg);
        }

        .page.share {
            flex-direction: row;
            align-items: center;
            justify-content: space-around;
            max-width: calc(100% - 8em);
            gap: unset;
        }

        .page.share.reverse {
            flex-direction: row-reverse;
        }

        .page.share .page-title {
            width: unset;
            flex-shrink: 1;
            text-align: start;
        }

        .page.share .card {
            max-width: 500px;
        }

        .page.share .footer {
            width: unset;
        }

        .next-button {
            flex-direction: row;
            font-size: 1.25em;
            cursor: pointer;
        }

        .share .card-content .options .next-button {
            font-size: 0.85em;
        }

        .next-button .button-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 35px;
            width: 35px;
            padding: 0 0.75em 0 0;
            margin: 0;
        }

        .card .card-title {
            font-size: 2.5em;
        }

        .card .job-description {
            font-size: 1em;
        }

        .card .traits-block .keywords {
            font-size: 1.75em;
        }

        .page.one .header {
            background: linear-gradient(to right, #ffffff 50%, #ffffff00);
        }

        .health-coach-bg .page.one .header {
            background: linear-gradient(to right, var(--page-bg-health) 50%, #ffffff00);
        }

        .financial-adviser-bg .page.one .header {
            background: linear-gradient(to right, var(--page-bg-financial) 50%, #ffffff00);
        }

        .sales-representative-bg .page.one .header {
            background: linear-gradient(to right, var(--page-bg-sales) 50%, #ffffff00);
        }

        .productivity-partner-bg .page.one .header {
            background: linear-gradient(to right, var(--page-bg-productivity) 50%, #ffffff00);
        }

        .card-backgrounds:not(.full-page-gradients) {
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .card-backgrounds {
            filter: blur(150px);
        }

        .full-page-gradients {
            top: 0;
            right: 0;
            width: 50%;
            max-width: 600px;
            height: 100%;
            scale: 0.5;
            overflow: visible;
        }

        .error {
            width: 100dvw;
            height: 100dvh;
            align-items: start;
            justify-content: center;
            cursor: pointer;
            background: linear-gradient(to bottom right, #ffffff00 35%, #ffffffee 75%);
        }

        .error .msgbox-outer {
            width: 30dvh;
            height: 50dvh;
            margin-top: 25%;
            margin-left: 50%
        }

        .error .msgbox-outer .msgbox-inner .msgbox-content {
            font-size: 1em;
            width: calc(100% - 2em);
        }

        .page.two {
            justify-content: space-between;
        }

        .page.two .header {
            width: 50%;
            max-width: calc(50% - 10em);
            padding-right: 0;
        }

        .page .polygon-preview {
            order: 3;
            flex-grow: 1;
            justify-content: space-evenly;
            height: calc(100dvh - 8em);
        }

        .radial-interface {
            width: var(--diameter);
            height: var(--diameter);
        }

        .radial-interface .concentric-circle {
            margin: calc(var(--diameter) / 15);
        }

        .page.two .conversation-sample {
            padding: 2.5em;
            max-width: calc(var(--diameter));
            font-size: 1.25em;
        }

        .full-page-gradients.active {
            transform: scale(2);
            opacity: 0.75;
        }

        .shape-avatar-preview {
            width: 100%;
            max-width: 600px;
        }

        .page.three {
            flex-direction: row;
            width: 100%;
        }

        .page.three .header {
            flex-direction: row;
            align-items: center;
            justify-content: start;
            flex-wrap: wrap;
            width: 50%;
            height: unset;
        }

        .page.three .header .page-title {
            order: 1;
            text-align: start;
            width: 100%;
        }

        .page.three .header .agent-icon {
            order: 2;
        }

        .page.three .header .subtitle {
            order: 3;
        }

        .page.three .shape-content {
            order: 2;
            width: 50%;
            height: 75%;
            gap: 1em;
        }

        .page.three .shape-content .shape-avatar-preview {
            order: 1;
        }

        .page.three .shape-content .parameters-block {
            order: 2;
            flex-direction: column;
            justify-content: space-between;
            align-items: start;
            gap: 1em;
            max-width: 600px;
            border-top: 0.5px solid;
        }

        .page.three .parameters-block .trait {
            width: 100%;
            justify-content: space-between;
            align-items: center;
            text-transform: capitalize;
            position: relative;
        }

        .page.three .parameters-block .trait .keyword {
            position: absolute;
            font-size: 1.25em;
            margin-left: 2em;
        }

        .page.three .parameters-block .trait .icon {
            height: 2em;
            width: 100%;
            justify-content: space-between;
            display: flex;
            flex-direction: row;
        }

        .page.three .parameters-block .trait .icon .progress-bar {
            order: 2;
            position: relative;
            height: 2em;
            width: 2em;
        }

        .page.three .parameters-block .trait .icon svg {
            width: 1.5em;
            height: 1.5em;
        }

        .page.four .header {
            width: 50%;
            max-width: calc(50dvw - 14em);
        }

        .page.four .conversation-interface {
            height: 100%;
            max-height: calc(100% - 4em);
        }

        .page.four .page-toggle-control .button {
            display: flex;
            font-size: 1em;
            gap: 1em;
        }

        .page.four .page-toggle-control .agent-icon .shape-avatar-preview .constructed-shape svg {
            transform-origin: top left;
            position: absolute;
            top: 5%;
            left: 5%;
            scale: 6%;
        }

        .page.four .conversation-interface .input-area .message {
            left: calc(50% - calc(7.5dvh - 1em));
            width: calc(15dvh - 2em);
            height: 25dvh;
        }

        .page.four .conversation-interface .input-area .message:not(.selected):nth-child(1) {
            transform: rotate(-35deg) translate(-20dvh, -10dvh);
        }

        .page.four .conversation-interface .input-area .message:not(.selected):nth-child(2) {
            transform: rotate(-15deg) translate(-7dvh, -5dvh);
        }

        .page.four .conversation-interface .input-area .message:not(.selected):nth-child(3) {
            transform: rotate(15deg) translate(7dvh, -5dvh);
        }

        .page.four .conversation-interface .input-area .message:not(.selected):nth-child(4) {
            transform: rotate(35deg) translate(20dvh, -10dvh);
        }

        .page.four .conversation-interface .input-area .message.unselected:nth-child(1) {
            transform: rotate(-20deg);
        }

        .page.four .conversation-interface .input-area .message.unselected:nth-child(2) {
            transform: rotate(-10deg);
        }

        .page.four .conversation-interface .input-area .message.unselected:nth-child(3) {
            transform: rotate(-10deg);
        }

        .page.four .conversation-interface .input-area .message.unselected:nth-child(4) {
            transform: rotate(10deg);
        }

        .page.four .conversation-interface .input-area .preselected-input-messages {
            height: 32dvh;
        }

        .page.four .conversation-interface .input-area .custom-input-field input {
            font-size: 1em;
        }
    }

@media screen and (min-height: 750px) {
    .page:not(.share) .footer {
        bottom: 18em;
    }
}

@media screen and (max-height: 750px) {
    .page:not(.share) .footer {
        bottom: 8em;
    }
}/*@media screen and (max-width: 440px) {*/
@media screen and (max-aspect-ratio: 4/5) {
    .page:not(.share) {
        padding: 0 2em;
        height: calc(100dvh - 1em);
    }

    .page .page-title {
        font-size: 1.75em;
    }

    .page .subtitle {
        width: 100%;
        font-size: 0.85em;
    }
    
    .card .card-title {
        font-size: 1.5em;
    }
    
    .card .job-description {
        font-size: .75em;
    }
    
    .card .traits-block .keywords {
        font-size: 1.5em;
    }
    
    .card .toolbar {
        font-size: 0.75em;
    }
    
    .page.two .conversation-sample {
        margin-left: -2em;
        margin-right: -2em;
        padding: 2em;
    }
}

@media screen and (min-width: 440px) and (max-aspect-ratio: 4/5) {

    .page:not(.share) {
        padding: 2em;
        height: calc(100dvh - 4em);
    }
    
    .page .page-title {
        margin-bottom: 0.5em;
    }
    
    .card .card-title {
        font-size: 2.25em;
    }
    
    .card .job-description {
        font-size: 1em;
    }
    
    .card .traits-block .keywords {
        font-size: 1.75em;
    }
    
    .card .toolbar {
        font-size: 0.85em;
        padding: 0.25em;
    }
    
    .page.two .conversation-sample {
        padding: 3em;
    }
    
}

/*@media screen and (max-width: 600px) {*/
@media screen and (max-aspect-ratio: 4/5) {
    .page {
        flex-direction: column;
        justify-content: space-around;
    }

    .page .header {
        align-items: center;
    }

    .page.hidden {
        translate: 0 50dvh;
    }
    
    .page .page-title {
        font-size: 1.75em;
    }
    
    .page .subtitle {
        text-align: center;
    }

    .next-button {
        flex-direction: column;
        font-size: 0.75em;
    }
    
    .page .footer {
        width: 100%;
        align-items: center;
        justify-content: center;
    }
    
    .page.landing .trait-icon:nth-child(1) {
        transform: translate(-50%, -50%) rotate(30deg) translate(calc((100dvw - 4em) * 0.5)) rotate(-30deg) scale(1.25);
        background: radial-gradient(50% 50% at 50% 50%, #FFF7B3 0%, #FFF7B300 100%);
    }
    .page.landing .trait-icon:nth-child(2) {
        transform: translate(-50%, -50%) rotate(90deg) translate(calc((100dvw - 4em) * 0.5)) rotate(-90deg) scale(1.25);
        background: radial-gradient(50% 50% at 50% 50%, #FFB799 0%, #FFB79900 100%);
    }
    .page.landing .trait-icon:nth-child(3) {
        transform: translate(-50%, -50%) rotate(150deg) translate(calc((100dvw - 4em) * 0.5)) rotate(-150deg) scale(1.25);
        background: radial-gradient(50% 50% at 50% 50%, #C3CAFC 0%, #C3CAFC00 100%);
    }
    .page.landing .trait-icon:nth-child(4) {
        transform: translate(-50%, -50%) rotate(210deg) translate(calc((100dvw - 4em) * 0.5)) rotate(-210deg) scale(1.25);
        background: radial-gradient(50% 50% at 50% 50%, #FBCCD4 0%, #FBCCD400 100%);
    }
    .page.landing .trait-icon:nth-child(5) {
        transform: translate(-50%, -50%) rotate(270deg) translate(calc((100dvw - 4em) * 0.5)) rotate(-270deg) scale(1.25);
        background: radial-gradient(50% 50% at 50% 50%, #DDF18A 0%, #DDF18A00 100%);
    }
    .page.landing .trait-icon:nth-child(6) {
        transform: translate(-50%, -50%) rotate(330deg) translate(calc((100dvw - 4em) * 0.5)) rotate(-330deg) scale(1.25);
        background: radial-gradient(50% 50% at 50% 50%, #BCE1FC 0%, #BCE1FC00 100%);
    }
    
    .ring-dot:nth-child(7) {
        transform: translate(-50%, -50%) rotate(0deg) translate(calc((100dvw - 4em) * 0.5)) rotate(0deg);
    }
    .ring-dot:nth-child(8) {
        transform: translate(-50%, -50%) rotate(60deg) translate(calc((100dvw - 4em) * 0.5)) rotate(-60deg);
    }
    .ring-dot:nth-child(9) {
        transform: translate(-50%, -50%) rotate(120deg) translate(calc((100dvw - 4em) * 0.5)) rotate(-120deg);
    }
    .ring-dot:nth-child(10) {
        transform: translate(-50%, -50%) rotate(180deg) translate(calc((100dvw - 4em) * 0.5)) rotate(-180deg);
    }
    .ring-dot:nth-child(11) {
        transform: translate(-50%, -50%) rotate(240deg) translate(calc((100dvw - 4em) * 0.5)) rotate(-240deg);
    }
    .ring-dot:nth-child(12) {
        transform: translate(-50%, -50%) rotate(300deg) translate(calc((100dvw - 4em) * 0.5)) rotate(-300deg);
    }
    
    .card:first-of-type {
        margin-left: 3em;
    }
    
    .card-interface {
        scroll-snap-type: x mandatory;
    }
    
    .card-backgrounds {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        filter: blur(50px);
    }
    
    .error {
        width: 100dvw;
        height: 100dvh;
        align-items: end;
        justify-content: center;
        background: linear-gradient(#ffffff00 0%, #ffffffee 75%);
    }
    
    .error .msgbox-outer {
        width: 40dvw;
        height: 60dvw;
        margin-bottom: 25%;
    }
    
    .error .msgbox-outer .msgbox-inner .msgbox-content {
        font-size: 0.75em;
    }

    .radial-interface {
        padding: 1em;
    }
    
    .radial-interface .concentric-circle {
        margin: 6dvw;
    }

    .full-page-gradients.active {
        transform: scaleY(-1);
    }
    
    .shape-avatar-preview {
        width: calc(100dvw - 1em);
    }
    
    .page.three {
        justify-content: start;
        align-items: center;
    }

    .page.three .agent-icon {
        margin-top: 3em;
    }

    .page.three .shape-content .parameters-block {
    }

    .page.three .shape-content .shape-avatar-preview {
/*        flex-shrink: 1;*/
    }

    .page.three .parameters-block {
        flex-direction: row;
    }

    .page.three .parameters-block .trait {
        flex-direction: column;
        gap: 0.5em;
        align-items: center;
        justify-content: space-between;
        font-size: 0.75em;
        line-height: 2em;
        text-transform: capitalize;
        font-family: "DM Serif Display", serif;
        font-weight: 200;
    }

    .page.three .parameters-block .trait .icon {
        height: 15dvw;
        width: 15dvw;
        justify-content: center;
    }

    .page.three .parameters-block .trait .icon .progress-bar {
        position: absolute;
        width: 100%;
    }

    .page.four .conversation-interface {
        max-height: calc(100% - 8em);
    }

    .page.four .page-toggle-control .button {
        display: flex;
        font-size: 0.75em;
        gap: 0.5em;
    }

    .page.four .conversation-interface .input-area .message {
        left: calc(50% - 10dvw);
        width: calc(20dvw - 2em);
        height: 30dvw;
        font-size: 0.5em;
    }
    
    .page.four .conversation-interface .input-area .message:not(.selected):nth-child(1) {
        transform: rotate(-35deg) translate(-25dvw, -15dvw);
    }
    
    .page.four .conversation-interface .input-area .message:not(.selected):nth-child(2) {
        transform: rotate(-15deg) translate(-8dvw, -10dvw);
    }
    
    .page.four .conversation-interface .input-area .message:not(.selected):nth-child(3) {
        transform: rotate(15deg) translate(8dvw, -10dvw);
    }
    
    .page.four .conversation-interface .input-area .message:not(.selected):nth-child(4) {
        transform: rotate(35deg) translate(25dvw, -15dvw);
    }
    
    .page.four .conversation-interface .input-area .message.unselected:nth-child(1) {
        transform: rotate(-20deg);
    }
    
    .page.four .conversation-interface .input-area .message.unselected:nth-child(2) {
        transform: rotate(-10deg);
    }
    
    .page.four .conversation-interface .input-area .message.unselected:nth-child(3) {
        transform: rotate(-10deg);
    }
    
    .page.four .conversation-interface .input-area .message.unselected:nth-child(4) {
        transform: rotate(10deg);
    }
    
    .page.four .conversation-interface .input-area .preselected-input-messages {
        height: 32dvw;
    }
    
    .page.four .conversation-interface .message-scroll-area .message {
        font-size: 0.75em;
    }

    .page.four .page-toggle-control .agent-icon .shape-avatar-preview .constructed-shape svg {
        transform-origin: top left;
        position: absolute;
        top: 0;
        left: 0;
        scale: 8%;
    }

    .page.share .card {
        height: 100%;
        max-width: unset;
        min-width: unset;
    }

}body {
    color: #222222;
    font-family: "Montserrat", sans-serif;
    font-size: medium;
    overflow: hidden;
}

.screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    transition: opacity 1s;
}

.page {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1em;
    opacity: 1;
    translate: 0 0;
    visibility: unset;
    transition: translate 0.5s 0.5s ease-out,
                opacity 0.25s 0.5s ease-out,
                visibility 0s 0.5s,
                position 0s 0.5s;
}

.page.landing .landing-page-graphic {
    position: relative;
    width: calc(100dvw - 4em);
    height: calc(100dvw - 4em);
    background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.05) 70%, rgba(0, 0, 0, 0) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1em;
}

.page.landing .landing-page-graphic .ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid #eeeeee;
    border-radius: 50%;
    z-index: 0;
}

.page.landing .landing-page-graphic .trait-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    stroke: #000000;
    fill: #000000;
    top: 50%;
    left: 50%;
    transform-origin: center;
    z-index: 10;
}

.page.landing .subtitle {
    padding: 0 3em;
    text-align: center;
}

.page.landing .landing-page-graphic .ring-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 3px;
    background-color: #000000;
    border-radius: 50%;
    transform-origin: center;
    z-index: 10;
    border: 5px solid #ffffff;
}

.page.landing .footer img {
    padding-top: 1em;
}

.page.hidden {
    position: fixed;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: translate 0.5s ease-out,
                opacity 0.25s ease-out,
                visibility 0s 0.5s,
                position 0s 0.5s;
}

.page .header {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    max-height: 100dvh;
    margin-top: 0;
    flex-shrink: 1;
    transition: max-height 0.25s, margin-top 0.5s, opacity 0.5s;
}

.page .header.minimized {
    margin-top: -1em;
    max-height: 0;
    opacity: 0;
}

.page .page-title {
    color: #333333;
    font-family: "DM Serif Display", serif;
    font-weight: 400;
    flex-shrink: 1;
}

.page.landing .page-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.65em;
    width: 75%;
    font-size: 2rem;
}

.page .subtitle {
    font-size: 1em;
    font-weight: 400;
}

.page-two-content {
    width: 100%;
    height: 100%;
/*    flex-grow: 2;*/
    gap: 1em;
    display: flex;
    flex-direction: column;
}

.page .footer {
    max-height: 100dvh;
    display: flex;
    flex-shrink: 1;
    margin-bottom: 0;
    transition: max-height 0.25s, margin-bottom 0.5s, opacity 0.5s;
}

.page .footer.minimized {
    max-height: 0;
    margin-bottom: -1.5em;
    opacity: 0;
}

.page .footer input {
    max-height: 100dvh;
    transition: max-height 0.25s, margin-bottom 0.5s, opacity 0.25s, transform 0.5s;

}

.page .footer.minimized input {
    max-height: 0;
    transform: scaleY(0);
}

.page .footer .conversation-sample .block-title {
    font-family: "DM Serif Display", serif;
}

.next-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    text-transform: uppercase;
    text-align: center;
    font-weight: 500;
    transition: color 0.5s, fill 0.5s, stroke 0.5s;
}

.page.landing .next-button {
    color: #000000;
}

.button-icon.landing {
    fill: #000000;
/*    stroke: #000000;*/
}

input.next-button:active {
    background-color: rgba(255, 255, 255, 0.1);
}

.page.three .page-title {
    text-align: center;
}

.page.three .page-title .trait-code {
    text-transform: uppercase;
}

.page.three .shape-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: relative;
    flex-grow: 1;
}

.shape-avatar-preview {
    position: relative;
    height: 100%;
    max-height: 100%;
    flex-grow: 1;
    overflow: visible;
}

.shape-avatar-preview .card-backgrounds {
    display: flex;
    opacity: 1;
    overflow: visible;
}

.shape-avatar-preview .card-backgrounds div {
    width: 40%;
    height: 40%;
    top: 30%;
    left: 30%;
}

.shape-avatar-preview .card-backgrounds .visible {
    opacity: 1;
    transition: opacity 1s;
}

.shape-avatar-preview .constructed-shape {
    position: absolute;
    height: 100%;
    max-height: 100%;
    width: 100%;
}

.shape-avatar-preview .constructed-shape svg {
    z-index: 1000;
}

.shape-avatar-preview .constructed-shape svg:not(.visible) {
    opacity: 0;
}


.shape-avatar-preview .constructed-shape svg.visible {
    opacity: 1;
    transition: opacity 2s ease-in;
}

.shape-avatar-preview .constructed-shape .axis {
    position: absolute;
    width: 0;
    height: 40%;
    top: 10%;
    left: 50%;
    transform-origin: bottom;
}

.shape-avatar-preview .constructed-shape .axis .end {
    position: absolute;
    top: 0;
    left: 0;
}

.constructed-shape .axis:nth-child(1) { rotate: -30deg; }
.constructed-shape .axis:nth-child(2) { rotate:  30deg; }
.constructed-shape .axis:nth-child(3) { rotate:  90deg; }
.constructed-shape .axis:nth-child(4) { rotate: 150deg; }
.constructed-shape .axis:nth-child(5) { rotate: 210deg; }
.constructed-shape .axis:nth-child(6) { rotate: 270deg; }

.shape-avatar-preview .card-backgrounds div:not(.visible) {
    opacity: 0;
}

.shape-avatar-preview .card-backgrounds div:nth-child(1) {
    translate: 0 -50%;
}

.shape-avatar-preview .card-backgrounds div:nth-child(2) {
    translate: 40% -30%;
/*    rotate: 60deg;*/
}

.shape-avatar-preview .card-backgrounds div:nth-child(3) {
    translate: 40% 30%;
/*    rotate: 120deg;*/
}

.shape-avatar-preview .card-backgrounds div:nth-child(4) {
    translate: 0% 50%;
/*    rotate: 180deg;*/
}

.shape-avatar-preview .card-backgrounds div:nth-child(5) {
    translate: -40% 30%;
/*    rotate: 240deg;*/
}

.shape-avatar-preview .card-backgrounds div:nth-child(6) {
    translate: -40% -30%;
/*    rotate: 300deg;*/
}

.page.three .parameters-block {
    display: flex;
/*    flex-direction: row;*/
/*    align-items: center;*/
    justify-content: center;
    gap: 1em;
    width: 100%;
    padding-top: 2em;
}

.page.three .parameters-block .trait {
    display: flex;
/*    flex-direction: column;*/
/*    gap: 0.5em;*/
/*    align-items: center;*/
/*    justify-content: space-between;*/
/*    font-size: 0.75em;*/
/*    line-height: 2em;*/
/*    text-transform: capitalize;*/
/*    font-family: "DM Serif Display", serif;*/
/*    font-weight: 200;*/
}

.page.three .parameters-block .trait svg {
    z-index: 10;
}

.page.three .parameters-block .trait .icon {
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 50%;
}

.page.three .parameters-block .trait:not(.selected) {
    display: none;
}

.page.three .parameters-block .trait.selected {
    opacity: 1;
    transition: opacity 0.5s;
}

.page.three .parameters-block .trait .icon .progress-bar {
/*    position: absolute;*/
/*    width: 100%;*/
    height: 100%;
    border-radius: 50%;
    z-index: 0;
}

.page.three .parameters-block .trait .icon .progress-bar::before {
    position: absolute;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    top: 1px;
    left: 1px;
    border-radius: 50%;
    content: "";
}

.page.three .parameters-block span {
    display: inline-block;
    text-transform: uppercase;
}

.full-page-gradients:not(.active) {
    transition: opacity 1s ease-in-out;
}

.full-page-gradients:not(.active) {
    opacity: 0;
}

.page.landing .conversation-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1em;
}

.page.landing .conversation-spinner svg {
    scale: 200%;
    translate: 0 -1em;
}.card-interface {
    max-width: 100dvw;
    display: flex;
    flex-direction: row;
    flex-grow: 2;
    margin: 0 -2em;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    touch-action: manipulation;
/*    scroll-snap-type: x mandatory;*/
    scrollbar-width: none;
}

.card-interface:has(.card.edit) {
    overflow: hidden;
    height: 100%;
}

.card-interface::-webkit-scrollbar {
    display: none;
}

.card-interface .spacer {
    width: 5.25em;
    flex-shrink: 0;
}

.preview-block .edit-button {
    display: flex;
    flex-direction: row;
    gap: 0.5em;
    position: absolute;
    right: 0;
    bottom: 1em;
    text-transform: uppercase;
}

.preview-block .edit-button .icon {
    stroke: #000000;
    translate: 0 10%;
}

.card {
    position: relative;
    z-index: 2;
    width: calc(100% - 6em);
    height: calc(100% - 6em);
    max-width: calc(100dvw - 10em);
    margin: 0.75em;
    padding: 2em;
    border-radius: 0.75em;
    box-shadow: 2px 2px 0.5em rgba(0, 0, 0, 0.25);
    flex-grow: 0;
    flex-shrink: 0;
    scroll-snap-align: center;
    scale: 98%;
    transition: scale 0.25s, box-shadow 0.25s;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card-ornaments {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

.card-ornaments .border-side {
    position: absolute;
    top: 2em;
    left: 1em;
    border-left: 0.5px solid;
    border-right: 0.5px solid;
    width: calc(100% - 2em);
    height: calc(100% - 4em);
    content: "";
}

.card-ornaments .border-end {
    position: absolute;
    top: 1em;
    left: 2em;
    border-top: 0.5px solid;
    border-bottom: 0.5px solid;
    height: calc(100% - 2em);
    width: calc(100% - 4em);
    content: "";
}

.card-ornaments .corner {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
}

.card-ornaments .corner:nth-child(3) {
    top: 1em;
    left: 1em;
}

.card-ornaments .corner:nth-child(4) {
    top: 1em;
    right: 1em;
}

.card-ornaments .corner:nth-child(5) {
    bottom: 1em;
    left: 1em;
}

.card-ornaments .corner:nth-child(6) {
    bottom: 1em;
    right: 1em;
}

.card:not(.edit) {
    overflow: hidden;
}

.card.edit.active {
    box-shadow: none;
    width: calc(100dvw - 6em);
    max-width: unset;
    margin: 0 1em;
    height: calc(100dvh - 5em);
}

.card .card-title-block {
    display: flex;
    flex-direction: column;
    gap: .5em;
    flex-grow: 1;
    align-items: center;
    justify-content: space-around;
    text-align: center;
    z-index: 10;
}

.card .card-title {
    white-space: break-spaces;
    line-break: normal;
    display: inline-block;
    font-family: "DM Serif Display", serif;
}

.card .traits-block .keywords {
    display: flex;
    flex-direction: column;
}

.card .traits-block .an {
    font-size: 0.35em;
    text-transform: uppercase;
    text-align: center;
}

.card .divider {
    display: flex;
    flex-direction: row;
    gap: 0.5em;
    line-height: 0;
    overflow: visible;
    width: 50%;
}

.card .divider div {
    border-top: 0.5px solid #000000;
    flex-grow: 1;
}

.card .traits-block {
    width: 100%;
    text-align: left;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    align-items: center;
/*    justify-content: space-between;*/
    gap: 1em;
    z-index: 10;
}

.card .traits-block .trait-keyword {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5em;
    font-weight: 400;
    font-size: 0.85em;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    cursor: pointer;
    line-height: 2em;
}

.card .traits-block .trait-keyword .trait-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25em;
    height: 1.25em;
    border-radius: 50%;
}

.card.edit .traits-block .trait-keyword .trait-icon {
    border: 0.5px solid #000000BD;
}

.card.edit .traits-block .trait-keyword .trait-icon svg {
    scale: 65%;
    transition: scale 0.5s
}

.card.edit .traits-block .trait-keyword.unselected {
    color: #aaaaaaff;
    max-height: 100dvh;
/*    transition: all 0.5s 0.5s;*/
}

.card.edit .traits-block .trait-keyword {
    pointer-events: all;
}

.card:not(.edit) .traits-block .trait-keyword {
    pointer-events: none;
}

.card:not(.edit) .traits-block .trait-keyword.unselected {
    color: #aaaaaa00;
    max-height: 0;
    translate: 1em;
    /*    transition: all 0.25s 0.0s;*/
}

.card:not(.edit) .traits-block .trait-keyword.unselected .trait-icon {
    opacity: 0;
}

.card.edit .traits-block .trait-keyword.unselected .trait-icon {
    opacity: 0;
}

.card.edit .traits-block .trait-keyword:nth-child(1) .trait-icon {
    background: radial-gradient(50% 50% at 50% 50%, #DDF18A 0%, #DDF18A00 100%);
}
.card.edit .traits-block .trait-keyword:nth-child(2) .trait-icon {
    background: radial-gradient(50% 50% at 50% 50%, #BCE1FC 0%, #BCE1FC00 100%);
}
.card.edit .traits-block .trait-keyword:nth-child(3) .trait-icon {
    background: radial-gradient(50% 50% at 50% 50%, #FFF7B3 0%, #FFF7B300 100%);
}
.card.edit .traits-block .trait-keyword:nth-child(4) .trait-icon {
    background: radial-gradient(50% 50% at 50% 50%, #FFB799 0%, #FFB79900 100%);
}
.card.edit .traits-block .trait-keyword:nth-child(5) .trait-icon {
    background: radial-gradient(50% 50% at 50% 50%, #C3CAFC 0%, #C3CAFC00 100%);
}
.card.edit .traits-block .trait-keyword:nth-child(6) .trait-icon {
    background: radial-gradient(50% 50% at 50% 50%, #FBCCD4 0%, #FBCCD400 100%);
}

.card .toolbar {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-transform: uppercase;
    font-weight: 500;
    color: #000000BD;
    stroke: #000000BD;
    z-index: 10;
}

.card .toolbar .icon {
    width: 2em;
    height: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 0.5px solid #000000;
}

.card .toolbar .button.edit .icon svg {
    scale: 75%;
}

.card .toolbar .button.shuffle .icon svg {
    scale: 65%;
    translate: 2.5% -5%;
}

.card:not(.edit) .toolbar .button.edit, .card:not(.edit) .toolbar .button.shuffle {
    opacity: 1;
    max-width: 100dvw;
    margin-right: 1.5em;
    transition: all 0.5s 0.5s;
}

.card.edit .toolbar .button.edit, .card.edit .toolbar .button.shuffle {
    opacity: 0;
    max-width: 0;
    margin-right: 0;
    pointer-events: none;
    transition: all 0.25s;
}

.card:not(.edit) .toolbar .button.done {
    opacity: 0;
    max-width: 0;
    pointer-events: none;
    transition: all 0.25s;
}

.card .divider.done {
    opacity: 1;
    translate: 0 -1.25em;
    transition: opacity 0.75s 0.75s;
}

.card:not(.edit) .divider.done {
    opacity: 0;
    transition: opacity 0.25s;
}

.card.edit .toolbar .button.done {
    flex-direction: column;
    opacity: 1;
    width: 100%;
    max-width: 100dvw;
    transition: all 0.5s 1s;
}

.card .toolbar .button.done .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    width: unset;
    height: unset;
    translate: -1px;
}

.card .toolbar .button {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5em;
    cursor: pointer;
}

.card .job-description {
    white-space: break-spaces;
    display: flex;
    font-weight: 500;
}

.card.active {
    scale: unset;
    opacity: 1;
    box-shadow: 2px 2px 1em rgba(0, 0, 0, 0.25);
}

.error.disabled {
    pointer-events: none;
    opacity: 0;
    translate: 0 25dvh;
    transition: opacity 0.25s ease-in, translate 0.5s ease-in;
}

.error {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    z-index: 500;
/*    background: linear-gradient(#ffffff00 0%, #ffffffee 75%);*/
    transition: opacity 0.25s ease-in-out, translate 0.5s ease-in-out;
}

.error .msgbox-outer {
    position: absolute;
    border: 1px solid;
    border-radius: 6px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.error .msgbox-outer .msgbox-inner {
    width: calc(100% - 1em);
    height: calc(100% - 1em);
    border: 1px solid;
    border-radius: calc(6px - 0.25em);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.error .msgbox-outer .msgbox-inner .end-ornament {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    z-index: 1000;
}

.error .msgbox-outer .msgbox-inner .end-ornament .pip {
    margin: 0.5em;
    width: 2px;
    height: 2px;
    border-radius: 50%;
}
.error .msgbox-outer .msgbox-inner .msgbox-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-weight: 500;
    padding: 0.25em;
    z-index: 100;
}

.error .msgbox-outer:before {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    padding: 3px;
    border-radius: 6px;
    translate: -3px 3px;
    background: linear-gradient(#ffffff00 25%, #ffffffff 95%);
    content: "";
}

.card.edit .card-backgrounds {
    overflow: visible;
    opacity: 0.25;
    scale: 1 -1;
    transition: opacity 1s ease-out;
}

.card-backgrounds {
    position: absolute;
    z-index: 0;
    border-radius: 0.75em;
}

.card-interface .card .card-backgrounds {
    filter: blur(50px);
    overflow: hidden;
}

.card-backgrounds div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0.75em;
    mix-blend-mode: hue;
}

.card-backgrounds .primary {
    z-index: 1;
    translate: -40% -15%;
}

.card-backgrounds .secondary {
    z-index: 2;
    translate: -10% -25%;
}

.card-backgrounds .tertiary {
    z-index: 3;
    translate: -10% 0%;
}

.card-backgrounds.full-page-gradients .primary {
    translate: -40% 15%;
}

.card-backgrounds.full-page-gradients .secondary {
    translate: -10% 25%;
}

.card-backgrounds.full-page-gradients .tertiary {
    translate: -10% 0%;
}