:root {
    --cream: #fffaf0;
    --cream-deep: #fff2c8;
    --yellow: #ffc52f;
    --yellow-soft: #fff0a8;
    --ink: #222222;
    --muted: #676767;
    --line: #e8e4da;
    --paper: #ffffff;
    --shadow: 0 22px 70px rgba(54, 45, 24, .08);
    --radius-xl: 34px;
    --radius-lg: 26px;
    --radius-md: 18px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--ink);
    background: #f8f7f3;
    font-family:
        Inter,
        ui-rounded,
        "Arial Rounded MT Bold",
        "Helvetica Neue",
        Arial,
        sans-serif;
    line-height: 1.55;
}

button,
textarea,
a {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

.image-maker-page {
    min-height: 100vh;
}

.history-card__action-buttons {
display: flex;
gap: 8px;
}

.image-maker-hero {
    position: relative;
    overflow: hidden;
    min-height: 730px;
    padding: 30px clamp(24px, 5vw, 82px) 70px;
    background:
        radial-gradient(circle at 52% 47%, rgba(255, 255, 255, .95), transparent 42%),
        linear-gradient(116deg, #fff8e7 0%, #fffdf7 56%, #fff8e8 100%);
}

.image-maker-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 150px;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .5));
}

.hero-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(255, 213, 88, .22);
    filter: blur(.2px);
}

.hero-orb--top {
    width: 310px;
    height: 310px;
    top: -120px;
    right: -65px;
}

.hero-orb--bottom {
    width: 220px;
    height: 220px;
    left: -90px;
    bottom: -62px;
}

.brand-mark {
    position: relative;
    z-index: 5;
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, #ffca35, #ffb812);
    box-shadow: 0 12px 30px rgba(231, 167, 0, .22);
    text-decoration: none;
    font-weight: 950;
    letter-spacing: -.08em;
}

.brand-mark span {
    transform: translateX(-1px);
}

.hero-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(390px, .82fr);
    align-items: center;
    gap: clamp(45px, 7vw, 120px);
    width: min(1500px, 100%);
    min-height: 620px;
    margin: 10px auto 0;
}

.hero-copy {
    max-width: 680px;
}

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 30px;
    padding: 9px 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, #fff3b8, #ffec91);
    box-shadow: inset 0 0 0 1px rgba(255, 197, 47, .15);
    font-size: .85rem;
    font-weight: 900;
    letter-spacing: .07em;
}

.hero-copy h1 {
margin: 20px 0 18px;
font-size: clamp(3.1rem, 7vw, 6.5rem);
line-height: .92;
letter-spacing: -.07em;
}

.hero-copy p {
    max-width: 720px;
    margin: 32px 0 34px;
    color: #5d5d5d;
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    line-height: 1.65;
}

.back-button {
position: absolute;
top: -32px;
left: 36px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 28px;
    border-radius: 999px;
    color: #fff;
    background: #242424;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .13);
    text-decoration: none;
    font-weight: 900;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.back-button:hover {
    transform: translateY(-2px);
    background: #111;
    box-shadow: 0 17px 32px rgba(0, 0, 0, .17);
}

.hero-visual {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 520px;
}

.visual-glow {
    position: absolute;
    width: 78%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 202, 47, .28), transparent 70%);
    filter: blur(14px);
}

.reference-card {
    position: relative;
    z-index: 2;
    width: min(410px, 88%);
    padding: 15px 15px 20px;
    border: 1px solid rgba(47, 47, 47, .15);
    border-radius: 30px;
    background: #2d3032;
    box-shadow:
        0 38px 80px rgba(44, 38, 23, .2),
        inset 0 0 0 3px rgba(255, 255, 255, .05);
    transform: rotate(-4deg);
}

.reference-card__top {
    display: flex;
    gap: 7px;
    padding: 1px 4px 11px;
}

.reference-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #aeb2b4;
}

.reference-card__canvas {
    display: grid;
    place-items: center;
    overflow: hidden;
    min-height: 390px;
    padding: 25px;
    border-radius: 20px;
    background:
        radial-gradient(circle at 35% 22%, rgba(255, 255, 255, .6), transparent 30%),
        linear-gradient(145deg, #c7fff2, #8fe4cd);
    box-shadow:
        inset 0 0 0 2px rgba(0, 0, 0, .11),
        inset 0 0 45px rgba(13, 101, 81, .15);
}

.hero-character {
    display: block;
    max-width: 110%;
    max-height: 330px;
    object-fit: contain;
    filter: drop-shadow(0 22px 18px rgba(25, 45, 36, .22));
}

.reference-card__caption {
    padding: 16px 10px 0;
    color: #fff;
    text-align: center;
    font-size: .85rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.floating-prompt {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 16px 35px rgba(63, 50, 23, .12);
    backdrop-filter: blur(8px);
    font-weight: 900;
}

.floating-prompt--one {
    top: 11%;
    left: -3%;
    transform: rotate(-5deg);
}

.floating-prompt--two {
    right: -4%;
    bottom: 14%;
    transform: rotate(5deg);
}

.maker-section {
    width: min(1500px, calc(100% - 44px));
    margin: -18px auto 0;
    padding-bottom: 70px;
}

.maker-grid {
    position: relative;
    z-index: 6;
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, .72fr);
    align-items: start;
    gap: 28px;
}

.maker-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .97);
    box-shadow: var(--shadow);
}

.maker-card--form,
.maker-card--info {
    padding: clamp(24px, 3.3vw, 44px);
}

.card-heading {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 30px;
}

.card-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    color: #a67600;
    background: #fff6d7;
    font-size: 1.4rem;
    font-weight: 900;
}

.card-icon--yellow {
    color: #222;
    background: var(--yellow);
    font-family: Georgia, serif;
}

.card-eyebrow {
    display: block;
    margin-bottom: 3px;
    color: #be8900;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .16em;
}

.card-heading h2,
.result-heading h2 {
    margin: 0;
    font-size: clamp(1.55rem, 2.6vw, 2.35rem);
    line-height: 1.05;
    letter-spacing: -.04em;
}

label {
    display: block;
    margin-bottom: 12px;
    font-size: 1.08rem;
    font-weight: 900;
}

textarea {
    width: 100%;
    min-height: 100px;
    padding: 20px 22px;
    resize: vertical;
    border: 2px solid #e5e3dc;
    border-radius: 20px;
    color: #222;
    background: #fff;
    outline: none;
    font-size: 1.04rem;
    line-height: 1.55;
    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

textarea::placeholder {
    color: #9a9a95;
}

textarea:focus {
    border-color: var(--yellow);
    box-shadow: 0 0 0 5px rgba(255, 197, 47, .17);
}

.prompt-tools {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-top: 14px;
}

.presets {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.presets button {
    cursor: pointer;
    padding: 10px 16px;
    border: 1px solid #dfddd5;
    border-radius: 999px;
    color: #222;
    background: #fff;
    font-weight: 850;
    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease;
}

.presets button:hover {
    transform: translateY(-1px);
    border-color: var(--yellow);
    background: #fffaf0;
}

.character-count-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 0px;
}

#character-count {
    padding: 0;
    color: #777;
    font-size: .9rem;
    font-variant-numeric: tabular-nums;
}

.generate-button {
    position: relative;
    width: 100%;
    margin-top: 25px;
    padding: 18px 24px;
    cursor: pointer;
    border: 0;
    border-radius: 18px;
    color: #fff;
    background: #171717;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .12);
    font-size: 1.04rem;
    font-weight: 950;
    transition:
        transform .18s ease,
        opacity .18s ease,
        background .18s ease;
}

.generate-button__content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
}

.generate-button__content .bi {
    flex: 0 0 auto;
    font-size: 1.05em;
    line-height: 1;
}

.generate-button__text {
    display: inline-block;
}

.generate-button:hover {
    transform: translateY(-1px);
    background: #000;
}

.generate-button:disabled {
    cursor: wait;
    transform: none;
    opacity: .58;
}

.generate-button.is-loading .generate-button__content::after {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-left: 12px;
    border: 3px solid rgba(255, 255, 255, .3);
    border-top-color: #fff;
    border-radius: 50%;
    vertical-align: -4px;
    animation: spin .8s linear infinite;
}

.cf-turnstile {
    margin-top: 20px;
}

.steps {
    display: grid;
    gap: 24px;
}

.step {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 15px;
}

.step-number {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    border-radius: 14px;
    color: #8f6800;
    background: #fff5cf;
    font-size: .79rem;
    font-weight: 950;
}

.step h3 {
    margin: 0 0 6px;
    font-size: 1rem;
}

.step p {
    margin: 0;
    color: var(--muted);
    font-size: .94rem;
    line-height: 1.55;
}

.info-note {
    display: grid;
    gap: 4px;
    margin-top: 30px;
    padding: 18px;
    border-radius: 18px;
    background: #fff8de;
}

.info-note strong {
    font-size: .86rem;
}

.info-note span {
    color: #70633e;
    font-size: .9rem;
}

.generation-progress {
    margin-top: 24px;
    padding: 22px;
    border: 1px solid #ede6cf;
    border-radius: 20px;
    background: linear-gradient(145deg, #fffdf5, #fff8df);
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
}

.progress-message {
    margin: 0;
    font-weight: 950;
}

.elapsed-time {
    flex: 0 0 auto;
    color: #777;
    font-size: .88rem;
    font-variant-numeric: tabular-nums;
}

.progress-track {
    overflow: hidden;
    height: 12px;
    margin-top: 14px;
    border-radius: 999px;
    background: #e9e4d5;
}

.progress-bar {
    position: relative;
    width: 0;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
    background: linear-gradient(90deg, #ffc52f, #ffdc6a);
    transition: width .55s ease;
}

.progress-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        transparent 0%,
        rgba(255, 255, 255, .12) 35%,
        rgba(255, 255, 255, .75) 50%,
        rgba(255, 255, 255, .12) 65%,
        transparent 100%
    );
    transform: translateX(-100%);
    animation: shimmer 1.5s linear infinite;
}

.progress-detail {
    margin: 11px 0 0;
    color: #716a59;
    font-size: .91rem;
}

.status {
    min-height: 26px;
    margin-top: 18px;
    text-align: center;
    font-weight: 900;
}

.result {
    margin-top: 28px;
    padding: clamp(24px, 3.5vw, 46px);
}

.result-heading {
    margin-bottom: 24px;
}

.result-image-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    padding: 0;
    border-radius: 24px;
    background: transparent;
}

.result img {
    display: block;
    width: min(100%, 1024px);
    height: auto;
    margin: 0 auto;
    border-radius: 20px;
    background: transparent;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .1);
}

.result-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.action-button {
    min-width: 160px;
    padding: 13px 20px;
    cursor: pointer;
    border-radius: 999px;
    text-align: center;
    text-decoration: none;
    font-weight: 900;
}

.action-button--dark {
    border: 1px solid #191919;
    color: #fff;
    background: #191919;
}

.action-button--light {
    border: 1px solid #d9d6cd;
    color: #222;
    background: #fff;
}

.small-print {
    margin: 22px 0 0;
    color: #777;
    text-align: center;
    font-size: .86rem;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes shimmer {
    to {
        transform: translateX(100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
    }

    .generate-button.is-loading .generate-button__content::after,
    .progress-bar::after {
        animation: none;
    }

    .progress-bar {
        transition: none;
    }
}

@media (max-width: 1050px) {
    .hero-inner {
        grid-template-columns: 1fr .75fr;
        gap: 35px;
    }

    .hero-copy h1 {
        font-size: clamp(4rem, 9vw, 6.5rem);
    }

    .maker-grid {
        grid-template-columns: 1fr;
    }

    .maker-card--info {
        display: none;
    }
}

@media (max-width: 760px) {
    .image-maker-hero {
        min-height: auto;
        padding: 22px 18px 68px;
    }

    .brand-mark {
        width: 56px;
        height: 56px;
    }

    .hero-inner {
        grid-template-columns: 1fr;
        min-height: 0;
        margin-top: 48px;
        text-align: center;
    }

    .hero-copy {
        max-width: none;
    }

    .hero-kicker {
        margin-bottom: 22px;
    }

    .hero-copy h1 {
        font-size: clamp(3.65rem, 17vw, 5.8rem);
    }

    .hero-copy p {
        margin: 25px auto 28px;
        font-size: 1rem;
    }

    .back-button {
        padding: 14px 22px;
    }

    .hero-visual {
        min-height: 430px;
        margin-top: 14px;
    }

    .reference-card {
        width: min(340px, 84%);
    }

    .reference-card__canvas {
        min-height: 310px;
    }

    .floating-prompt {
        font-size: .85rem;
    }

    .floating-prompt--one {
        left: 0;
    }

    .floating-prompt--two {
        right: 0;
    }

    .maker-section {
        width: min(100% - 20px, 1500px);
        margin-top: -25px;
    }

    .maker-card--form,
    .maker-card--info,
    .result {
        padding: 22px 17px;
        border-radius: 22px;
    }

    .card-heading {
        align-items: flex-start;
        margin-bottom: 24px;
    }

    textarea {
        min-height: 180px;
    }

    .prompt-tools {
        display: block;
    }

    .progress-header {
        display: block;
    }

    .elapsed-time {
        display: block;
        margin-top: 3px;
    }
}

@media (max-width: 430px) {
    .hero-copy h1 {
        font-size: 3.55rem;
    }

    .reference-card {
        width: 88%;
    }

    .floating-prompt--one {
        top: 6%;
    }

    .floating-prompt--two {
        bottom: 8%;
    }

    .presets button {
        padding: 9px 13px;
        font-size: .88rem;
    }
}


/* Generation allowance */

/* Generation limits */
.generation-limits {
    margin: -4px 0 24px;
    padding: 14px 18px;
    border: 1px solid #eed99f;
    border-radius: 20px;
    background:
        radial-gradient(
            circle at 94% 5%,
            rgba(255, 211, 83, .18),
            transparent 28%
        ),
        linear-gradient(135deg, #fffdf8, #fff8df);
}

.generation-limits__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin-bottom: 4px;
}

.generation-limits__title,
.generation-limits__help,
.generation-reset {
    display: inline-flex;
    align-items: center;
}

.generation-limits__title {
    gap: 10px;
    color: #bd8200;
    font-size: .78rem;
    font-weight: 950;
    letter-spacing: .15em;
}

.generation-limits__title .bi {
    color: #efa900;
    font-size: 1.35rem;
    letter-spacing: 0;
}

.generation-limits__help {
    gap: 7px;
    color: #706d67;
    font-size: .76rem;
}

.generation-limits__help .bi {
    font-size: .9rem;
}

.generation-limit-row {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;
    padding: 7px 0 9px;
}

.generation-limit-row--daily {
    padding-top: 10px;
    border-top: 1px solid #eadfbe;
}

.generation-limit-row__icon {
    align-self: center;
    color: #efa900;
    font-size: 1.35rem;
}

.generation-limit-row--daily .generation-limit-row__icon {
    color: #585858;
    font-size: 1.25rem;
}

.generation-limit-row__content {
    min-width: 0;
}

.generation-limit-row__topline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-bottom: 3px;
}

.generation-limit-row__topline > strong {
    color: #242424;
    font-size: .9rem;
}

.generation-reset {
    flex: 0 0 auto;
    gap: 6px;
    color: #77736a;
    font-size: .75rem;
    white-space: nowrap;
}

.generation-reset strong {
    color: #bd8200;
    font-weight: 900;
}

.generation-limit-row__status {
    display: grid;
    grid-template-columns: 98px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.generation-limit-row__count {
    display: flex;
    align-items: baseline;
    gap: 5px;
    white-space: nowrap;
}

.generation-limit-row__count strong {
    color: #171717;
    font-size: 1.45rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.generation-limit-row__count span {
    color: #77736a;
    font-size: .78rem;
}

.generation-limit-row__track {
    overflow: hidden;
    height: 7px;
    border-radius: 999px;
    background: rgba(0,0,0,0.1);
}

.generation-limit-row__track span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #f2a900, #ffd75e);
    box-shadow:
        inset 0 0 0 1px rgba(222, 151, 0, .08);
    transition:
        width .8s cubic-bezier(.22, 1, .36, 1);
}

@media (max-width: 720px) {
    .generation-limits {
        padding: 13px 15px;
    }

    .generation-limits__header {
        align-items: flex-start;
    }

    .generation-limits__help span {
        display: none;
    }

    .generation-limit-row__status {
        grid-template-columns: 86px minmax(0, 1fr);
    }
}

@media (max-width: 520px) {
    .generation-limits__header {
        margin-bottom: 3px;
    }

    .generation-limit-row {
        grid-template-columns: 24px minmax(0, 1fr);
        gap: 8px;
        padding: 6px 0 8px;
    }

    .generation-limit-row--daily {
        padding-top: 9px;
    }

    .generation-limit-row__icon {
        font-size: 1.15rem;
    }

    .generation-limit-row__topline {
        gap: 8px;
    }

    .generation-limit-row__topline > strong {
        font-size: .84rem;
    }

    .generation-reset {
        font-size: .7rem;
    }

    .generation-limit-row__status {
        grid-template-columns: 78px minmax(0, 1fr);
        gap: 8px;
    }

    .generation-limit-row__count strong {
        font-size: 1.25rem;
    }

    .generation-limit-row__count span {
        font-size: .72rem;
    }

    .generation-limit-row__track {
        height: 6px;
    }
}


/* Shoes choice */
.appearance-choice {
    margin: 20px 0 0;
    padding: 0;
    border: 0;
}

.appearance-choice legend {
    margin-bottom: 10px;
    font-size: 1rem;
    font-weight: 900;
}

.appearance-choice__options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.appearance-option {
    position: relative;
    display: block;
    margin: 0;
    cursor: pointer;
}

.appearance-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.appearance-option__body {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    min-height: 76px;
    padding: 13px 15px;
    border: 2px solid #e5e3dc;
    border-radius: 16px;
    background: #fff;
    transition:
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

.appearance-option__radio {
    position: relative;
    display: block;
    width: 24px;
    height: 24px;
    border: 2px solid #d5d1c7;
    border-radius: 50%;
    background: #fff;
    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}

.appearance-option__radio::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--yellow);
    transform: scale(0);
    transition: transform .18s ease;
}

.appearance-option__content {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.appearance-option__body strong {
    font-size: .96rem;
}

.appearance-option__body small {
    color: #77736b;
    font-size: .79rem;
    font-weight: 500;
    line-height: 1.35;
}

.appearance-option input:checked + .appearance-option__body {
    border-color: var(--yellow);
    background: #fffdf5;
    box-shadow: 0 0 0 4px rgba(255, 197, 47, .13);
}

.appearance-option input:checked + .appearance-option__body .appearance-option__radio {
    border-color: var(--yellow);
    box-shadow: 0 0 0 3px rgba(255, 197, 47, .12);
}

.appearance-option input:checked + .appearance-option__body .appearance-option__radio::after {
    transform: scale(1);
}

.appearance-option input:focus-visible + .appearance-option__body {
    outline: 3px solid rgba(17, 17, 17, .25);
    outline-offset: 2px;
}

@media (max-width: 560px) {
    .usage-summary {
        grid-template-columns: 40px minmax(0, 1fr);
        padding: 13px 14px;
    }

    .usage-summary__icon {
        width: 40px;
        height: 40px;
    }

    .appearance-choice__options {
        grid-template-columns: 1fr;
    }

    .appearance-option__body {
        grid-template-columns: 26px minmax(0, 1fr);
        min-height: 0;
    }
}


/* Recent generation history */
.history-section {
    margin-top: 28px;
    padding: clamp(24px, 3.5vw, 46px);
}

.history-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 24px;
}

.history-heading h2 {
    margin: 0;
    font-size: clamp(1.55rem, 2.6vw, 2.35rem);
    line-height: 1.05;
    letter-spacing: -.04em;
}

.history-heading p {
    max-width: 690px;
    margin: 9px 0 0;
    color: var(--muted);
    font-size: .94rem;
}

.history-count {
    flex: 0 0 auto;
    padding: 9px 13px;
    border-radius: 999px;
    color: #756020;
    background: #fff4c8;
    font-size: .78rem;
    font-weight: 850;
}

.history-count strong {
    color: #1f1f1f;
}

.history-message,
.history-empty {
    margin: 0;
    padding: 22px;
    border-radius: 18px;
    color: #746f64;
    background: #faf9f5;
    text-align: center;
}

.history-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.history-card {
    overflow: hidden;
    border: 1px solid #e5e2d9;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 9px 24px rgba(35, 31, 22, .055);
}

.history-card__image {
    display: block;
    overflow: hidden;
    aspect-ratio: 1;
    background: #f2f0e9;
}

.history-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
}

.history-card__image:hover img {
    transform: scale(1.025);
}

.history-card__body {
    padding: 12px;
}

.history-card__prompt {
    display: -webkit-box;
    overflow: hidden;
    min-height: 2.7em;
    margin: 0;
    font-size: .82rem;
    font-weight: 850;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.history-card__meta {
    display: flex;
    align-items: center;
    margin-top: 9px;
}

.history-card__shoes {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    padding: 4px 8px;
    border: 1px solid #ead896;
    border-radius: 999px;
    color: #80600b;
    background: #fff5ca;
    font-size: .66rem;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.history-card__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 12px;
}

.history-card__expires {
    flex: 1;
    min-width: 0;
    color: #7a756b;
    font-size: .76rem;
    line-height: 1.35;
    text-align: left;
}

.history-card__download {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 40px;
    height: 40px;
    margin: 0;
    border: 1px solid #d8d8d8;
    border-radius: 50%;
    color: #252525;
    background: #e9e9e9;
    text-decoration: none;
    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;
}

.history-card__download:hover {
    border-color: #c8c8c8;
    background: #dedede;
    transform: translateY(-1px);
}

.history-card__download:focus-visible {
    outline: 3px solid rgba(255, 197, 47, .4);
    outline-offset: 2px;
}

.history-card__download .bi {
    font-size: 1.05rem;
    line-height: 1;
}

@media (max-width: 1120px) {
    .history-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .history-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .history-heading {
        display: block;
    }

    .history-count {
        display: inline-block;
        margin-top: 13px;
    }
}

@media (max-width: 430px) {
    .history-grid {
        grid-template-columns: 1fr;
    }
}

/* The hero is supplied by emotiguy-page-template.css. */
.image-maker-hero,
.hero-orb,
.hero-inner,
.hero-copy,
.hero-kicker,
.hero-visual,
.visual-glow,
.reference-card,
.floating-prompt,
.back-button,
.brand-mark {
    /* Legacy selectors retained for older cached markup only. */
}

.prompt-examples {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px 12px;
    margin: 0 0 7px;
}

.prompt-examples__label {
    flex: 0 0 auto;
    color: #5e5b54;
    font-size: .82rem;
    font-weight: 900;
}

.prompt-examples .presets {
    gap: 7px;
}

.prompt-examples .presets button {
    min-height: 30px;
    padding: 5px 12px;
    font-size: .78rem;
    line-height: 1.15;
}

@media (max-width: 520px) {
    .prompt-examples {
        align-items: flex-start;
    }

    .prompt-examples__label {
        width: 100%;
    }
}


/* Prompt composer with optional reference image */
.prompt-composer {
    position: relative;
    overflow: hidden;
    border: 2px solid #e5e3dc;
    border-radius: 20px;
    background: #fff;
    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.prompt-composer:focus-within {
    border-color: var(--yellow);
    box-shadow: 0 0 0 5px rgba(255, 197, 47, .17);
}

.prompt-composer textarea {
    display: block;
    width: 100%;
    min-height: 100px;
    padding: 18px 20px 8px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    resize: vertical;
}

.prompt-composer textarea:focus {
    border-color: transparent;
    box-shadow: none;
}

.prompt-composer__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 12px 10px;
}

.prompt-composer__add {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    cursor: pointer;
    border: 1px solid #d9d6cd;
    border-radius: 50%;
    color: #222;
    background: #f3f2ee;
    font-size: 1.1rem;
    line-height: 1;
    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease;
}

.prompt-composer__add:hover {
    transform: translateY(-1px);
    border-color: #c8c5bd;
    background: #e9e7e1;
}

.prompt-composer__add:focus-visible,
.prompt-composer__remove:focus-visible {
    outline: 3px solid rgba(255, 197, 47, .4);
    outline-offset: 2px;
}

.prompt-composer__attachment {
    position: relative;
    width: 58px;
    height: 58px;
    margin: 12px 0 0 14px;
}

.prompt-composer__attachment img {
    display: block;
    width: 58px;
    height: 58px;
    object-fit: cover;
    border: 1px solid #d8d5cc;
    border-radius: 12px;
    background: #f3f2ee;
}

.prompt-composer__remove {
    position: absolute;
    top: -7px;
    right: -7px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    cursor: pointer;
    border: 2px solid #fff;
    border-radius: 50%;
    color: #fff;
    background: #222;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .18);
    font-size: .88rem;
    line-height: 1;
}

.prompt-composer__remove:hover {
    background: #000;
}

.prompt-composer #character-count {
    color: #777;
    font-size: .9rem;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
    .prompt-composer textarea {
        min-height: 180px;
    }
}