.landing-v2 {
    --landing-bg: #d9d8e8;
    --landing-card: #fbfbff;
    --landing-ink: #1f1f28;
    --landing-muted: #5f6272;
    --landing-purple: #6b5ed9;
    --landing-orange: #ff9a3c;
    --landing-border: rgba(35, 36, 54, 0.15);
    font-family: "Manrope", sans-serif;
    color: var(--landing-ink);
    min-height: 100vh;
    width: 100%;
    padding: 10px;
    background: radial-gradient(circle at 14% 0%, #e4e1f5 0, transparent 42%), var(--landing-bg);
    position: relative;
    overflow-x: hidden;
}

.landing-background {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.bg-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.34) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.34) 1px, transparent 1px);
    background-size: 38px 38px;
    opacity: 0.3;
}

.bg-orb {
    position: absolute;
    width: 340px;
    aspect-ratio: 1;
    border-radius: 999px;
    filter: blur(18px);
    opacity: 0.5;
}

.bg-orb-a {
    left: -80px;
    top: 150px;
    background: #b9c5f9;
}

.bg-orb-b {
    right: -100px;
    top: 80px;
    background: #b3dcc9;
}

.landing-header,
.landing-main {
    width: 100%;
    max-width: none;
    margin: 0;
    position: relative;
    z-index: 1;
}

.landing-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    /* border-radius: 18px; */
    /* border: 1px solid var(--landing-border); */
    /* background: rgba(242, 241, 232, 0.9); */
}

.landing-header .logo a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.landing-header .logo span {
    font-family: "Fraunces", serif;
    font-size: 1.55rem;
    color: #272838;
}

.landing-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #f6f5e8;
    border: 1px solid var(--landing-border);
    border-radius: 999px;
    padding: 6px;
    width: min-content;
    margin: 0 auto;
}

.landing-nav a {
    text-decoration: none;
    color: #333648;
    font-size: 0.86rem;
    font-weight: 700;
    padding: 9px 14px;
    border-radius: 999px;
}

.landing-nav a:hover {
    background: #e2e0f6;
}

.landing-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-soft,
.btn-strong {
    border-radius: 999px;
    text-decoration: none;
    padding: 10px 16px;
    font-weight: 800;
    font-size: 0.86rem;
}

.btn-soft {
    border: 1px solid var(--landing-border);
    color: #323449;
    background: #fff;
}

.btn-strong {
    color: #f5f6ff;
    background: #262a43;
    border: 1px solid transparent;
}

.landing-main {
    margin-top: 10px;
    padding: 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-grid {
    display: grid;
    gap: 20px;
}

.article-left {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hero-utility {
    display: flex;
    gap: 8px;
}

.language-chip {
    border: 1px solid var(--landing-border);
    border-radius: 999px;
    background: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 11px;
    color: #2f3350;
}

.hero-title {
    margin: 0;
    font-family: "Fraunces", serif;
    font-size: 3em;
    line-height: 0.84;
    letter-spacing: -0.03em;
}

.hero-copy {
    margin: 0;
    max-width: 100ch;
    color: var(--landing-muted);
    font-size: 1.03rem;
}

.prompt-bar {
    border: 1px solid var(--landing-border);
    border-radius: 16px;
    background: #fff;
    padding: 14px;
    display: grid;
    gap: 12px;
    position: relative;
    overflow: visible;
}

.prompt-main {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 32px;
    max-width: 100ch;
}

.prompt-prefix {
    font-weight: 800;
    color: #2e3148;
}

.prompt-typed {
    color: #3f4159;
    font-weight: 600;
}

.cursor-blink {
    width: 8px;
    height: 20px;
    background: #1f2133;
    border-radius: 2px;
    animation: prompt-blink 0.8s steps(1) infinite;
}

@keyframes prompt-blink {
    50% {
        opacity: 0;
    }
}

.prompt-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.prompt-action-btn,
.prompt-send,
.picker-btn,
.ratio-toggle {
    border-radius: 11px;
    border: 1px solid var(--landing-border);
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    font-weight: 700;
    background: #fff;
}

.prompt-action-btn {
    background: #f8f7ff;
    color: #2f3150;
}

.file-count {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--landing-muted);
}

.social-picker,
.ratio-picker {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.ratio-dropdown {
    position: relative;
}

.demo-modules-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-height: 26px;
}

.demo-slider {
    margin-top: 0;
    padding: 6px 2px;
    display: grid;
    grid-template-columns: 34px 1fr 34px;
    align-items: center;
    gap: 10px;
    width: min(400px, calc(100% - 28px));
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20px;
    z-index: 9;
}

.demo-slider-nav {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(86, 108, 160, 0.28);
    background: rgba(238, 244, 255, 0.7);
    color: #4a6498;
    position: relative;
    padding: 0;
    display: grid;
    place-items: center;
}

.demo-slider-nav i {
    font-size: 0.76rem;
    line-height: 1;
    position: relative;
    z-index: 1;
}

.demo-slider-copy strong {
    display: block;
    font-size: 0.74rem;
    color: #314c84;
    text-align: center;
}

.demo-slider-copy p {
    margin: 2px 0 4px;
    font-size: 0.67rem;
    color: #60739d;
    text-align: center;
}

.demo-slider-doc {
    display: block;
    text-align: center;
    font-size: 0.64rem;
    font-weight: 800;
    color: #3566b0;
    text-decoration: none;
}

.demo-slider-doc:hover {
    text-decoration: underline;
}

.demo-slider-progress {
    position: absolute;
    inset: -2px;
    border-radius: 999px;
    pointer-events: none;
}

.demo-slider-next::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 999px;
    background: conic-gradient(#4d79c8 calc(var(--slider-progress, 0) * 1turn), rgba(115, 136, 181, 0.22) 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
    opacity: 0.9;
}

.demo-slider-next.paused::before {
    opacity: 0.2;
}

.demo-slider-play {
    position: absolute;
    right: -42px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 1px solid rgba(72, 121, 88, 0.42);
    background: #e0f3e7;
    color: #2e7d57;
    display: grid;
    place-items: center;
    padding: 0;
}

.demo-slider-play[hidden] {
    display: none;
}

.demo-active-tool-chip {
    height: 26px;
    border-radius: 999px;
    border: 1px solid rgba(93, 109, 147, 0.26);
    background: #f4f7ff;
    color: #63749d;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    opacity: 0;
    transform: translateY(4px) scale(0.95);
    transition: opacity 0.24s ease, transform 0.24s ease, box-shadow 0.2s ease;
    gap: 6px;
}

.demo-active-tool-chip-icon {
    opacity: 0;
    transform: translateY(1px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.demo-active-tool-chip.visible .demo-active-tool-chip-icon {
    opacity: 1;
    transform: translateY(0);
}

.demo-active-tool-chip-label {
    white-space: nowrap;
}

.demo-active-tool-chip.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    background: #dce9ff;
    color: #2f558f;
    border-color: rgba(67, 107, 184, 0.45);
    box-shadow: 0 0 0 3px rgba(91, 126, 198, 0.14);
}

.demo-active-tool-chip.is-loading {
    position: relative;
    padding-right: 24px;
    animation: tool-running-pulse 1.02s ease-in-out infinite;
}

.demo-active-tool-chip.is-loading .demo-active-tool-chip-icon {
    opacity: 0;
}

.demo-active-tool-chip.is-loading::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    border-radius: 999px;
    border: 2px solid rgba(73, 108, 174, 0.32);
    border-top-color: #4b77c4;
    animation: spin 0.8s linear infinite;
}

.demo-active-tool-chip.is-done {
    background: #dff5e8;
    color: #2c6b4a;
    border-color: rgba(79, 143, 102, 0.45);
    box-shadow: 0 0 0 3px rgba(83, 154, 113, 0.16);
}

.demo-active-tool-chip.is-running {
    background: #dff5e8;
    color: #2c6b4a;
    border-color: rgba(79, 143, 102, 0.45);
    box-shadow: 0 0 0 3px rgba(83, 154, 113, 0.16);
    animation: tool-running-pulse 1.02s ease-in-out infinite;
}

@keyframes tool-running-pulse {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.56;
    }
}

.context-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 0;
    order: 1;
}

.context-doc-item {
    width: 122px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--landing-border);
    padding: 6px;
    box-shadow: 0 8px 14px rgba(26, 28, 44, 0.11);
    color: #4d6090;
}

.context-doc-thumb {
    width: 100%;
    height: 84px;
    border-radius: 10px;
    border: 1px solid rgba(86, 104, 152, 0.2);
    background: linear-gradient(145deg, #f0f5ff 0%, #e3ecff 100%);
    display: grid;
    place-items: center;
    gap: 3px;
    padding-top: 6px;
}

.context-doc-item.is-pdf .context-doc-thumb {
    background: linear-gradient(145deg, #ffe9ea 0%, #ffe0e3 100%);
}

.context-doc-item.is-txt .context-doc-thumb {
    background: linear-gradient(145deg, #eef7ff 0%, #e3efff 100%);
}

.context-doc-thumb i {
    font-size: 1.44rem;
    color: #4f6dac;
}

.context-doc-item.is-pdf .context-doc-thumb i {
    color: #cf4d5f;
}

.context-doc-type {
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #5672ab;
}

.context-doc-item.is-pdf .context-doc-type {
    color: #bc4354;
}

.context-doc-item.is-pasted-text .context-doc-thumb {
    background: linear-gradient(145deg, #fff1df 0%, #ffe7c8 100%);
}

.context-doc-item.is-pasted-text .context-doc-thumb i,
.context-doc-item.is-pasted-text .context-doc-type,
.context-doc-item.is-pasted-text small {
    color: #bc6b1d;
}

.context-doc-name {
    display: block;
    margin-top: 6px;
    font-size: 0.62rem;
    font-weight: 700;
    color: #48597f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.context-doc-item small {
    display: block;
    margin-top: 2px;
    font-size: 0.6rem;
    font-weight: 800;
    color: #2f4f8f;
}

.ratio-toggle {
    min-width: 92px;
    gap: 8px;
    color: #2f3150;
    background: #f8f7ff;
}

.ratio-toggle.is-glow {
    animation: ratio-glow-pop 0.52s ease;
}

@keyframes ratio-glow-pop {
    0% {
        box-shadow: 0 0 0 rgba(106, 107, 198, 0);
    }

    45% {
        box-shadow: 0 0 0 4px rgba(106, 107, 198, 0.18), 0 0 18px rgba(106, 107, 198, 0.38);
        border-color: rgba(102, 108, 184, 0.44);
    }

    100% {
        box-shadow: 0 0 0 rgba(106, 107, 198, 0);
    }
}

.ratio-current-icon,
.ratio-option-icon {
    box-sizing: border-box;
    border-radius: 4px;
    flex: 0 0 auto;
}

.ratio-current-icon {
    border: 2px solid #4a4f6d;
    transform: translateX(-1px);
}

.ratio-toggle .fa-chevron-down {
    margin-left: auto;
    font-size: 0.68rem;
    transition: transform 0.2s ease;
}

.ratio-dropdown.open .ratio-toggle .fa-chevron-down {
    transform: rotate(180deg);
}

.ratio-menu {
    position: absolute;
    top: calc(100% + 9px);
    left: 0;
    width: 238px;
    border-radius: 20px;
    border: 1px solid rgba(173, 202, 238, 0.38);
    background: white;
    box-shadow: 0 14px 28px rgba(7, 10, 20, 0.38);
    /* backdrop-filter: blur(7px); */
    padding: 11px;
    display: none;
    z-index: 26;
}

.ratio-dropdown.open .ratio-menu {
    display: block;
}

.ratio-menu-title {
    margin: 2px 6px 10px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #313131;
}

.ratio-option {
    width: 100%;
    border-radius: 13px;
    border: 1px solid transparent;
    background: transparent;
    color: #313131;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 41px;
    padding: 0 11px;
    font-size: 1rem;
    text-align: left;
}

.ratio-option:hover {
    background: rgba(255, 255, 255, 0.08);
}

.ratio-option.active {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.12);
}

.ratio-option-icon {
    border: 2px solid #313131;
}

.ratio-check {
    margin-left: auto;
    font-size: 0.88rem;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.ratio-option.active .ratio-check {
    opacity: 1;
    transform: scale(1);
}

.picker-btn.active {
    background: #d7d0ff;
}

.prompt-send {
    margin-left: auto;
    width: 38px;
    padding: 0;
    background: #1c1e2d;
    border-color: transparent;
    color: #fff;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.prompt-send.is-dim {
    opacity: 0.36;
}

.prompt-send:disabled {
    cursor: default;
}

.prompt-send.is-loading i {
    animation: spin 0.8s linear infinite;
}

.prompt-send.is-done {
    background: #2e7d57;
}

.prompt-send.is-tool-ready {
    background: #2e7d57;
}

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

.landing-dropzone {
    position: relative;
    border: 1px solid transparent;
    border-radius: 14px;
    background: transparent;
    padding: 0 12px;
    margin-top: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
    transition: max-height 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.52s ease, padding 0.62s ease, margin-top 0.62s ease, background-color 0.32s ease;
}

.landing-dropzone.has-images {
    max-height: 320px;
    opacity: 1;
    padding: 12px;
    margin-top: 8px;
    pointer-events: auto;
}

.landing-dropzone p {
    margin: 0 0 8px;
    color: var(--landing-muted);
    font-size: 0.86rem;
}

.landing-dropzone.drag-over {
    background: transparent;
}

.landing-dropzone-border-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    pointer-events: none;
}

.demo-result-float {
    position: absolute;
    right: -40px;
    top: 86px;
    width: 216px;
    border-radius: 16px;
    border: 1px solid rgba(37, 38, 56, 0.16);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 16px 34px rgba(22, 24, 36, 0.2);
    padding: 10px;
    transform: translate3d(var(--drag-x, 0px), var(--drag-y, 0px), 0) rotate(var(--result-rotate, 6deg)) rotate(var(--drag-rotate, 0deg)) translateY(14px) scale(calc(0.96 * var(--drag-scale, 1)));
    opacity: 0;
    pointer-events: auto;
    touch-action: none;
    cursor: grab;
    user-select: none;
    transition: opacity 0.36s ease, transform 0.46s cubic-bezier(0.19, 1, 0.22, 1);
    backdrop-filter: blur(2px);
    z-index: 15;
}

.demo-result-float.visible {
    opacity: 1;
    transform: translate3d(var(--drag-x, 0px), var(--drag-y, 0px), 0) rotate(var(--result-rotate, 6deg)) rotate(var(--drag-rotate, 0deg)) translateY(0) scale(calc(1 * var(--drag-scale, 1)));
}

.demo-result-float.is-hiding {
    opacity: 0;
    transform: translate3d(var(--drag-x, 0px), var(--drag-y, 0px), 0) rotate(var(--result-rotate, 6deg)) rotate(var(--drag-rotate, 0deg)) translateY(20px) scale(calc(0.93 * var(--drag-scale, 1)));
}

.demo-result-float.is-grabbing {
    cursor: grabbing;
}

.demo-result-float.ratio-glow {
    box-shadow: 0 0 0 4px rgba(101, 124, 218, 0.16), 0 18px 34px rgba(22, 24, 36, 0.25);
    transition: box-shadow 0.24s ease;
}

.demo-result-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
    z-index: 14;
}

.demo-result-kicker {
    margin: 0 0 8px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #59607a;
    font-weight: 800;
}

.demo-result-float img {
    width: 100%;
    border-radius: 11px;
    object-fit: cover;
    display: block;
    border: 1px solid rgba(43, 47, 72, 0.12);
}

.demo-result-media {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
}

.demo-result-media img {
    width: 100%;
    height: 100%;
}

.demo-result-loading {
    position: absolute;
    inset: 0;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: rgba(248, 250, 255, 0.78);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}

.demo-result-loading::before {
    content: "";
    width: 20px;
    height: 20px;
    border-radius: 999px;
    border: 2px solid rgba(72, 81, 116, 0.24);
    border-top-color: #5f6ec5;
    animation: spin 0.7s linear infinite;
}

.demo-result-float.is-loading .demo-result-loading {
    opacity: 1;
}

.demo-result-meta {
    margin-top: 8px;
    display: grid;
    gap: 2px;
}

.demo-result-meta strong {
    font-size: 0.78rem;
    color: #2c3046;
}

.demo-result-meta span {
    font-size: 0.7rem;
    color: #616780;
}

.svg-editor-mini {
    margin-top: 7px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.svg-editor-mini span {
    height: 22px;
    border-radius: 999px;
    border: 1px solid rgba(88, 114, 170, 0.25);
    background: #eef4ff;
    color: #48639a;
    font-size: 0.6rem;
    font-weight: 800;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.demo-calendar-float {
    position: absolute;
    right: 328px;
    top: 386px;
    width: 372px;
    border-radius: 18px;
    border: 1px solid rgba(47, 65, 118, 0.2);
    background: rgba(244, 250, 255, 0.95);
    box-shadow: 0 12px 28px rgba(24, 31, 52, 0.19);
    padding: 10px;
    opacity: 0;
    transform: rotate(-2deg) translateY(26px) scale(0.96);
    transition: opacity 0.3s ease, transform 0.34s cubic-bezier(0.19, 1, 0.22, 1);
    pointer-events: none;
    z-index: 12;
}

.demo-archive-float {
    position: absolute;
    right: 328px;
    top: 446px;
    width: 186px;
    opacity: 0;
    transform: rotate(2deg) translateY(22px) scale(0.96);
    transition: opacity 0.3s ease, transform 0.34s cubic-bezier(0.19, 1, 0.22, 1);
    pointer-events: none;
    z-index: 12;
}

.demo-calendar-float.visible + .demo-archive-float,
.demo-archive-float.visible {
    opacity: 1;
    transform: rotate(2deg) translateY(0) scale(1);
}

.demo-archive-float.is-hiding {
    opacity: 0;
    transform: rotate(2deg) translateY(20px) scale(0.97);
}

.demo-calendar-float.visible {
    opacity: 1;
    transform: rotate(-2deg) translateY(0) scale(1);
}

.demo-calendar-float.is-hiding {
    opacity: 0;
    transform: rotate(-2deg) translateY(24px) scale(0.97);
}

.demo-archive-count {
    margin: 4px 0 6px;
    font-size: 0.62rem;
    color: #51658f;
    font-weight: 700;
}

.demo-archive-count span {
    font-weight: 800;
    color: #2f4f8e;
}

.demo-search-float {
    position: absolute;
    left: 86px;
    top: calc(100% - 136px);
    width: min(228px, calc(50% - 94px));
    border-radius: 16px;
    border: 1px solid rgba(43, 63, 118, 0.2);
    background: rgba(247, 251, 255, 0.96);
    box-shadow: 0 10px 24px rgba(18, 25, 43, 0.17);
    padding: 10px;
    opacity: 0;
    transform: rotate(1.5deg) translateY(22px) scale(0.97);
    transition: opacity 0.28s ease, transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    pointer-events: none;
    z-index: 11;
}

.demo-search-float.visible {
    opacity: 1;
    transform: rotate(1.5deg) translateY(0) scale(1);
}

.demo-search-float.is-hiding {
    opacity: 0;
    transform: rotate(1.5deg) translateY(18px) scale(0.97);
}

.demo-search-kicker {
    margin: 0 0 8px;
    font-size: 0.71rem;
    font-weight: 800;
    color: #425886;
}

.demo-search-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 8px;
}

.demo-search-query {
    min-height: 30px;
    border: 1px solid rgba(76, 100, 156, 0.3);
    border-radius: 8px;
    background: #f1f6ff;
    padding: 6px 8px;
    font-size: 0.66rem;
    font-weight: 700;
    color: #446295;
    margin-bottom: 8px;
}

.demo-search-tab {
    border: 1px solid rgba(81, 104, 163, 0.24);
    border-radius: 999px;
    background: #f0f5ff;
    color: #4c5f8d;
    height: 28px;
    font-size: 0.62rem;
    font-weight: 800;
}

.demo-search-tab.active {
    background: #dce8ff;
    color: #2f4f90;
}

.demo-search-tab.is-clicked {
    animation: search-tab-click 0.22s ease;
}

@keyframes search-tab-click {
    0% { transform: scale(1); }
    45% { transform: scale(0.94); }
    100% { transform: scale(1); }
}

.demo-search-list {
    max-height: 136px;
    overflow-y: auto;
    display: grid;
    gap: 7px;
    padding-right: 2px;
}

.demo-search-list.hidden {
    display: none;
}

.demo-search-list.is-scrolling {
    box-shadow: inset 0 -24px 22px -22px rgba(91, 120, 184, 0.22);
}

.article-item {
    border: 1px solid rgba(88, 112, 168, 0.22);
    border-radius: 10px;
    background: #f8fbff;
    padding: 6px;
    display: grid;
    grid-template-columns: 42px 1fr;
    align-items: center;
    gap: 7px;
}

.article-thumb {
    height: 32px;
    border-radius: 8px;
    display: block;
}

.thumb-a { background: linear-gradient(140deg, #f7b57a, #f0e5ba); }
.thumb-b { background: linear-gradient(140deg, #c6d8ff, #e2efff); }
.thumb-c { background: linear-gradient(140deg, #d2f3d5, #b6d3ff); }
.thumb-d { background: linear-gradient(140deg, #ffd7e3, #f2c5ff); }
.thumb-e { background: linear-gradient(140deg, #ffd9b3, #ffc19e); }
.thumb-f { background: linear-gradient(140deg, #d4e7ff, #b7cef8); }
.thumb-g { background: linear-gradient(140deg, #e1f1e5, #d3dcff); }

.article-item small {
    font-size: 0.66rem;
    font-weight: 700;
    color: #4a6092;
}

.article-item em {
    display: block;
    font-size: 0.58rem;
    font-style: normal;
    color: #6e7f9f;
    margin-top: 2px;
}

.demo-search-flyer {
    position: fixed;
    border-radius: 9px;
    background: linear-gradient(140deg, #ffd9b3, #ffc19e);
    border: 1px solid rgba(110, 127, 176, 0.26);
    box-shadow: 0 10px 22px rgba(23, 29, 43, 0.24);
    z-index: 130;
    pointer-events: none;
    transition: transform 0.62s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.62s ease;
}

.demo-search-flyer.is-inspiration {
    background: linear-gradient(140deg, #d9e4ff, #b8cffd);
    border-color: rgba(84, 112, 182, 0.34);
}

.demo-inspirations-float {
    position: absolute;
    right: 216px;
    top: calc(100% - 176px);
    width: min(228px, calc(50% - 94px));
    border-radius: 15px;
    border: 1px solid rgba(41, 80, 128, 0.2);
    background: rgba(247, 252, 255, 0.97);
    box-shadow: 0 10px 24px rgba(20, 28, 45, 0.16);
    padding: 10px;
    opacity: 0;
    transform: rotate(-1.3deg) translateY(18px) scale(0.97);
    transition: opacity 0.26s ease, transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    pointer-events: none;
    z-index: 11;
}

.demo-inspirations-float.visible {
    opacity: 1;
    transform: rotate(-1.3deg) translateY(0) scale(1);
}

.demo-inspirations-float.is-hiding {
    opacity: 0;
    transform: rotate(-1.3deg) translateY(14px) scale(0.97);
}

.demo-mockup-float {
    position: absolute;
    right: 328px;
    top: 316px;
    width: 364px;
    border-radius: 15px;
    border: 1px solid rgba(41, 80, 128, 0.2);
    background: rgba(247, 252, 255, 0.97);
    box-shadow: 0 10px 24px rgba(20, 28, 45, 0.16);
    padding: 10px;
    max-height: 372px;
    overflow-y: auto;
    opacity: 0;
    transform: rotate(1.1deg) translateY(18px) scale(0.97);
    transition: opacity 0.26s ease, transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    pointer-events: none;
    z-index: 11;
}

.demo-mockup-float.visible {
    opacity: 1;
    transform: rotate(1.1deg) translateY(0) scale(1);
}

.demo-mockup-float.is-hiding {
    opacity: 0;
    transform: rotate(1.1deg) translateY(14px) scale(0.97);
}

.demo-mockup-float.is-running {
    box-shadow: 0 10px 24px rgba(20, 28, 45, 0.16);
}

.demo-mockup-subtitle {
    margin: 0 0 8px;
    font-size: 0.62rem;
    color: #5d7096;
    font-weight: 700;
}

.demo-mockup-grid {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-height: 252px;
    overflow-y: auto;
    padding-right: 2px;
}

.demo-mockup-item {
    position: relative;
    border: 1px solid rgba(88, 112, 168, 0.22);
    border-radius: 10px;
    background: #f8fbff;
    padding: 6px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}

.demo-mockup-label,
.demo-mockup-preview {
    grid-column: auto;
}

.demo-mockup-item input {
    display: none;
}

.demo-mockup-check {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 1px solid rgba(80, 103, 159, 0.45);
    background: #fff;
    margin-top: 0;
}

.demo-mockup-item.is-selected .demo-mockup-check {
    background: #d9e8ff;
    box-shadow: inset 0 0 0 3px #5a80c6;
}

.demo-mockup-label {
    font-size: 0.62rem;
    font-weight: 800;
    color: #445b89;
    padding-left: 18px;
}

.demo-mockup-preview {
    margin-top: 4px;
    position: relative;
    width: min(82px, 100%);
    margin-left: auto;
    margin-right: auto;
    border-radius: 8px;
    border: 1px solid rgba(88, 112, 168, 0.22);
    min-height: 0;
    aspect-ratio: 1 / 1;
    background: #f2f7ff;
    overflow: hidden;
    padding: 4px;
}

.demo-mockup-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

.demo-mockup-arrow {
    position: absolute;
    top: 50%;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1px solid rgba(80, 103, 159, 0.28);
    background: rgba(232, 240, 255, 0.92);
    color: #4a6295;
    padding: 0;
    display: grid;
    place-items: center;
    transform: translateY(-50%);
    z-index: 2;
}

.demo-mockup-arrow[data-direction="prev"] {
    left: 8px;
}

.demo-mockup-arrow[data-direction="next"] {
    right: 8px;
}


.demo-mockup-confirm {
    margin-top: 8px;
    width: 100%;
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(56, 79, 134, 0.3);
    background: #dce8ff;
    color: #2f4f90;
    font-size: 0.68rem;
    font-weight: 800;
    grid-column: 1 / -1;
}

.demo-mockup-confirm.is-clicked {
    transform: scale(0.98);
    filter: brightness(0.97);
}

.demo-inspirations-source {
    margin: 0 0 8px;
    font-size: 0.62rem;
    font-weight: 700;
    color: #5d7096;
}

.demo-inspirations-query {
    min-height: 30px;
    border: 1px solid rgba(76, 100, 156, 0.3);
    border-radius: 8px;
    background: #f1f6ff;
    padding: 6px 8px;
    font-size: 0.66rem;
    font-weight: 700;
    color: #446295;
    margin-bottom: 8px;
}

.thumb-h { background: linear-gradient(140deg, #e0ecff, #cde2ff); }

.demo-calendar-kicker {
    margin: 0 0 10px;
    font-size: 0.76rem;
    font-weight: 800;
    color: #40527a;
}

.demo-calendar-board {
    display: grid;
    gap: 8px;
}

.demo-calendar-weekdays {
    display: none;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.demo-calendar-weekdays span {
    font-size: 0.6rem;
    text-align: center;
    font-weight: 700;
    color: #6d7d9e;
}

.demo-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.demo-planner-slot {
    border-radius: 9px;
    border: 1px solid rgba(83, 103, 158, 0.18);
    background: #f8fbff;
    min-height: 52px;
    padding: 4px;
    position: relative;
}

.demo-planner-slot-day {
    font-size: 0.56rem;
    font-weight: 800;
    color: #60729b;
    display: block;
    margin-bottom: 4px;
}

.demo-planner-slot-media {
    border-radius: 7px;
    border: 1px dashed rgba(86, 115, 177, 0.3);
    background: linear-gradient(150deg, #f8fbff, #eef4ff);
    min-height: 30px;
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.demo-planner-slot-media span {
    display: none;
}

.demo-planner-slot-media img {
    position: absolute;
    inset: 2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    border-radius: 6px;
    object-fit: cover;
    opacity: 0;
    transform: scale(0.93);
    transition: opacity 0.26s ease, transform 0.26s ease;
}

.demo-planner-slot.filled .demo-planner-slot-media span {
    opacity: 0;
}

.demo-planner-slot.filled .demo-planner-slot-media img {
    opacity: 1;
    transform: scale(1);
}

.demo-planner-slot-title {
    display: none;
}

.demo-calendar-archive {
    border: 1px dashed rgba(85, 118, 174, 0.42);
    border-radius: 10px;
    background: linear-gradient(152deg, #f9fcff, #edf4ff);
    padding: 6px;
}

.demo-calendar-archive strong {
    font-size: 0.62rem;
    color: #4a6090;
    display: block;
    margin-bottom: 5px;
}

.demo-calendar-archive .demo-planner-slot-media {
    min-height: 48px;
}

.demo-calendar-archive.filled .demo-planner-slot-media span {
    opacity: 1;
    color: #4a6193;
}

.demo-result-float.placed {
    opacity: 1;
    transform: translate3d(var(--drag-x, 0px), var(--drag-y, 0px), 0) rotate(var(--result-rotate, 6deg)) rotate(var(--drag-rotate, 0deg)) translateY(0) scale(calc(0.94 * var(--drag-scale, 1)));
    pointer-events: none;
}

.demo-result-float.is-auto-placing {
    z-index: 80 !important;
    transition: opacity 0.22s ease;
    pointer-events: none;
}

.demo-result-float.is-dragging-foreground {
    z-index: 85 !important;
}

.demo-result-float.is-refreshing img {
    animation: demo-result-fade 0.38s ease;
}

@keyframes demo-result-fade {
    0% {
        opacity: 0;
        transform: scale(0.97);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.image-stack {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    order: 2;
}

.image-token {
    width: 122px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--landing-border);
    padding: 6px;
    box-shadow: 0 8px 14px rgba(26, 28, 44, 0.11);
}

.image-token.demo-enter {
    animation: token-fade-in 0.55s cubic-bezier(0.21, 1, 0.31, 1);
}

@keyframes token-fade-in {
    0% {
        opacity: 0;
        filter: blur(6px);
    }

    100% {
        opacity: 1;
        filter: blur(0);
    }
}

.image-token img {
    width: 100%;
    height: 84px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

.image-token-footer {
    margin-top: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}

.image-token small {
    font-size: 0.62rem;
    font-weight: 700;
    color: #4e5168;
}

.image-token.is-analyzed small {
    color: #3d4567;
}

.image-token-info {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    border: 1px solid var(--landing-border);
    background: #f5f4ff;
    color: #2f3150;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 0;
    display: grid;
    place-items: center;
    line-height: 1;
}

.image-token-particles {
    display: flex;
    gap: 3px;
}

.image-token.is-analyzed .image-token-particles {
    visibility: hidden;
}

.image-token-particles span {
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: #6b5ed9;
    animation: dot-up 0.8s ease infinite;
}

.image-token-particles span:nth-child(2) {
    animation-delay: 0.1s;
}

.image-token-particles span:nth-child(3) {
    animation-delay: 0.2s;
}

@keyframes dot-up {
    0%,
    100% {
        opacity: 0.2;
    }

    50% {
        opacity: 1;
    }
}

.aside-right,
.sales-grid {
    display: grid;
    gap: 12px;
}

.card {
    border-radius: 20px;
    border: 1px solid var(--landing-border);
    background: var(--landing-card);
    padding: 16px;
}

.card h3 {
    margin: 0 0 10px;
    font-size: 1.1rem;
    font-family: "Fraunces", serif;
}

.visual-hint img {
    width: 100%;
    border-radius: 14px;
    display: block;
}

.visual-hint p {
    margin: 10px 0 0;
    color: var(--landing-muted);
    font-size: 0.86rem;
}

.metrics-grid{
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    max-width: 90ch;
}

.stack-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tab-tab {
    border-radius: 12px;
    font-weight: 700;
    padding: 10px 12px;
}

.tab-tab.top {
    color: #f4f6ff;
    background: #1f2132;
}

.tab-tab.mid {
    background: var(--landing-orange);
}

.tab-tab.base {
    background: #fff;
    border: 1px solid var(--landing-border);
}

.preview-card {
    overflow: hidden;
    padding: 15px;
}

.preview-art {
    min-height: 190px;
    background: radial-gradient(circle at 70% 40%, #28b48d 0, #28b48d 17%, transparent 18%), radial-gradient(circle at 30% 50%, #f593df 0, #f593df 40%, transparent 41%), linear-gradient(150deg, #ff94e2, #91e4be);
}

.preview-meta {
    padding: 14px;
}

.preview-meta h2 {
    margin: 0;
    font-family: "Fraunces", serif;
    font-size: 2rem;
}

.preview-meta p {
    margin: 8px 0 0;
    color: var(--landing-muted);
}

.preview-meta ul,
.faq-card ul,
.mosaic-card ul {
    margin-top: 8px;
    list-style: none;
    display: grid;
    gap: 8px;
}

.faq-card li,
.quick-template-panel .template-item,
.mosaic-card li {
    border: 1px solid var(--landing-border);
    background: #fff;
    border-radius: 10px;
    padding: 10px;
    font-size: 0.84rem;
    color: #4a4d63;
}

.quick-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.quick-category {
    border: 1px solid var(--landing-border);
    border-radius: 10px;
    background: #fff;
    font-weight: 700;
    font-size: 0.82rem;
    padding: 8px 10px;
}

.quick-category.active {
    background: #d7d0ff;
}

.quick-template-panel {
    margin-top: 10px;
    display: grid;
    gap: 8px;
}

.template-item h4 {
    margin: 0;
}

.template-item p {
    margin: 5px 0 0;
}

.template-slots {
    margin-top: 8px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.template-slot {
    border-radius: 7px;
    border: 1px dashed #b9bbd7;
    background: #f8f8ff;
    height: 24px;
}

.template-slot.wide {
    grid-column: span 2;
}

.mosaic-card a {
    color: #30324a;
    text-decoration: none;
    font-weight: 700;
}

.social-row {
    margin-top: 10px;
    display: flex;
    gap: 8px;
}

.social-row a {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--landing-border);
    display: grid;
    place-items: center;
    color: #3c3f58;
    background: #fff;
}

.info-modal {
    position: fixed;
    inset: 0;
    background: rgba(24, 25, 36, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    z-index: 60;
}

.info-modal.hidden {
    display: none;
}

.info-modal-card {
    width: min(520px, 100%);
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--landing-border);
    padding: 18px;
    position: relative;
}

.modal-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid var(--landing-border);
    background: #f6f6ff;
}

.info-modal-card h3 {
    margin: 0;
    font-family: "Fraunces", serif;
}

.info-modal-card p {
    margin: 8px 0 0;
    color: var(--landing-muted);
}

.info-modal-card a {
    margin-top: 12px;
    display: inline-flex;
    border-radius: 999px;
    padding: 9px 12px;
    text-decoration: none;
    background: #1d2034;
    color: #fff;
    font-weight: 700;
}

@media (max-width: 1120px) {
    .hero-grid,
    .metrics-grid,
    .sales-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    .landing-v2 {
        padding: 8px;
    }

    .landing-header {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .landing-nav {
        width: 100%;
        flex-wrap: wrap;
    }

    .landing-actions {
        width: 100%;
    }

    .landing-actions a {
        flex: 1;
        text-align: center;
    }

    .prompt-send {
        margin-left: 0;
    }

    .demo-result-layer {
        position: static;
        display: grid;
        gap: 8px;
        margin-top: 6px;
    }

    .demo-result-float,
    .demo-result-float.visible,
    .demo-result-float.is-hiding {
        position: static;
        width: 100%;
        margin-top: 0;
        right: auto;
        top: auto;
        transform: none;
    }

    .demo-calendar-float,
    .demo-calendar-float.visible,
    .demo-calendar-float.is-hiding {
        position: static;
        width: 100%;
        margin-top: 8px;
        right: auto;
        top: auto;
        transform: none;
    }

    .demo-archive-float,
    .demo-archive-float.visible,
    .demo-archive-float.is-hiding {
        position: static;
        width: 100%;
        margin-top: 8px;
        right: auto;
        top: auto;
        transform: none;
    }

    .demo-search-float,
    .demo-search-float.visible,
    .demo-search-float.is-hiding {
        position: static;
        width: 100%;
        margin-top: 8px;
        right: auto;
        top: auto;
        transform: none;
    }

    .demo-inspirations-float,
    .demo-inspirations-float.visible,
    .demo-inspirations-float.is-hiding {
        position: static;
        width: 100%;
        margin-top: 8px;
        right: auto;
        top: auto;
        transform: none;
    }

    .demo-mockup-float,
    .demo-mockup-float.visible,
    .demo-mockup-float.is-hiding {
        position: static;
        width: 100%;
        margin-top: 8px;
        right: auto;
        top: auto;
        transform: none;
    }

    .demo-slider {
        position: static;
        width: 100%;
        padding: 4px 0;
        transform: none;
    }

    .demo-slider-play {
        right: 0;
    }
}