/* START OF MODIFIED FILE style.css */

/* --- Base & Variables --- */
:root {
    --bg-color: #CCFF00;
    --card-bg-color: #CCFF00;
    --text-color: #1C180D;
    --secondary-text-color: #3b321b;
    --accent-color: #1C180D;
    --border-color: #1C180D;
    --input-bg-color: #dfff38;
    --button-hover-bg: #1C180D; /* Slightly darker hover */
    --control-icon-bg: transparent; /* Default icon background */
    --control-icon-hover-bg: rgba(28, 24, 13, 0.1); /* Darker hover for icons */
    --destructive-color: #1C180D;
    --success-color: #1C180D;
    --warning-color: #1C180D;
    --border-radius: 4px;
    --card-shadow: 7px 7px 0 #1C180D;
    --hard-border: 3px solid #1C180D;
    --hard-shadow-small: 4px 4px 0 #1C180D;
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    /* MODIFIED: Increased default icon size */
    --icon-size: 24px; /* Larger icon size variable */
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #CCFF00;
        --card-bg-color: #CCFF00;
        --text-color: #1C180D;
        --secondary-text-color: #3b321b;
        --accent-color: #1C180D;
        --border-color: #1C180D;
        --input-bg-color: #dfff38; /* Match textbox bg */
        --button-hover-bg: #1C180D;
        --control-icon-bg: transparent;
        --control-icon-hover-bg: rgba(28, 24, 13, 0.1); /* Darker hover for icons */
    }
}

body {
    font-family: var(--font-family);
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    padding: 20px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 520;
}

/* --- Layout & Container --- */
.container {
    max-width: 700px;
    margin: 20px auto;
    background-color: var(--card-bg-color);
    padding: 25px 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    border: var(--hard-border);
    box-sizing: border-box;
}

/* --- Header --- */
.app-header {
    display: flex;
    align-items: center; /* Vertically center items (logo and title group) */
    justify-content: center; /* Horizontally center items */
    gap: 15px;
    /* MODIFIED: Reduced bottom margin to move textbox closer */
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: var(--hard-border);
}

.logo {
    width: auto;
    height: 52px;
    max-width: 170px;
    border-radius: 2px;
    display: block;
    object-fit: contain;
    object-position: center;
    flex-shrink: 0;
}

.app-header > .home-logo {
    width: 110px;
    height: 52px;
    max-width: none;
    object-fit: contain;
    transform: none;
    transform-origin: center;
}

.title-group {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center title/subtitle vertically within its own space */
    /* No fixed height needed, rely on align-items in parent */
    flex-grow: 0; /* Prevent title group from taking extra space */
    text-align: left; /* Explicitly set text align if needed, though centering is via flex parent */
}

.app-header h1 {
    margin: 0;
    font-size: 1.8em;
    font-weight: 900;
    line-height: 1.1; /* Fine-tuned line height */
}

.app-header .subtitle {
    font-size: 0.9em;
    color: var(--secondary-text-color);
    margin: 0; /* 移除上边距，减小间距 */
    line-height: 1.1; /* 保持行高 */
}


/* --- General Form Elements (used in modal) --- */
label {
    display: block;
    font-weight: 800;
    margin-bottom: 8px;
    color: var(--secondary-text-color);
    font-size: 0.95em;
}

input[type="text"], input[type="password"], input[type="url"] {
    width: 100%;
    padding: 10px 12px; /* Slightly reduced padding */
    border: 2px solid var(--border-color);
    border-radius: 3px;
    background-color: var(--input-bg-color);
    color: var(--text-color);
    font-size: 1em;
    box-sizing: border-box;
    margin-bottom: 15px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="url"]:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: var(--hard-shadow-small);
    transform: translate(-1px, -1px);
}

.form-group {
    margin-bottom: 20px;
}

.radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px; /* Adjusted gap */
    padding-top: 5px;
}

.radio-group label {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-bottom: 0;
    color: var(--text-color);
    font-weight: 400;
    font-size: 0.95em; /* Slightly smaller radio labels */
}

.radio-group input[type="radio"] {
    margin-right: 6px;
    accent-color: var(--accent-color);
}

.button {
    display: inline-block;
    padding: 10px 20px; /* Slightly smaller button */
    border: 2px solid var(--border-color);
    border-radius: 3px;
    font-size: 0.95em;
    font-weight: 900;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
    margin-top: 10px;
}

.primary-button {
    background-color: var(--accent-color);
    color: var(--bg-color);
    box-shadow: var(--hard-shadow-small);
}

.primary-button:hover {
    background-color: var(--bg-color);
    color: var(--text-color);
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--border-color);
}

.button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* --- Output & Loading --- */
.output-section {
    margin-bottom: 25px;
    position: relative; /* For copy button positioning */
}

.result-divider {
    border: none;
    border-top: 3px solid var(--border-color);
    margin: 15px 0 20px 0; /* Adjust margins as needed */
}

.output-content-wrapper {
    position: relative; /* Container for pre and copy button */
}

pre {
    background-color: var(--input-bg-color);
    padding: 15px;
    padding-right: 40px; /* Increased space for copy button placement */
    border-radius: 3px;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    border: 2px solid var(--border-color);
    margin: 0; /* Remove default margin if any */
    position: relative;
}

code {
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size: 0.95em;
    color: var(--text-color);
}

.copy-button {
    position: absolute;
    top: 6px; /* Adjusted positioning */
    right: 6px; /* Adjusted positioning */
    background: var(--accent-color);
    border: 2px solid var(--border-color);
    border-radius: 2px;
    padding: 3px; /* MODIFIED: Reduced padding */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bg-color);
    transition: background-color 0.2s ease, color 0.2s ease;
}
.copy-button:hover {
    background-color: var(--bg-color);
    color: var(--text-color);
}
.copy-button:focus-visible,
.button:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}
.copy-button .material-symbols-outlined {
    font-size: 16px; /* MODIFIED: Reduced icon size */
}

/* --- Tooltip Styling (Specific for Copy Button) --- */
.copy-button[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) scale(0.8);
    background-color: var(--text-color); /* Darker tooltip */
    color: var(--bg-color);
    padding: 4px 8px;
    border: 2px solid var(--bg-color);
    border-radius: 2px;
    font-size: 0.8em;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    margin-bottom: 5px; /* Space between button and tooltip */
    pointer-events: none;
    z-index: 10;
}
.copy-button[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
}


.loading {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--secondary-text-color);
    padding: 15px 0; /* Adjust padding as needed */
}

.spinner {
    border: 3px solid rgba(28, 24, 13, 0.2); /* Thinner spinner */
    border-left-color: var(--accent-color);
    border-radius: 2px;
    width: 18px;
    height: 18px;
    animation: spin 1s linear infinite;
}

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


/* --- Guide & Misc --- */
.guide-section { margin-top: 30px; } /* Add margin since divider removed */
.guide-section h5 { font-size: 1.3em; margin-bottom: 10px; font-weight: 900; }
.guide-section h6 { font-size: 1.1em; margin-top: 15px; margin-bottom: 5px; font-weight: 900; color: var(--text-color); }
.guide-section p, .guide-section ul { color: var(--secondary-text-color); margin-bottom: 10px; font-size: 0.95em; }
.guide-section ul { padding-left: 20px; }
.guide-section li { margin-bottom: 5px; }

.feature-overview-list {
    display: grid;
    gap: 9px;
    padding: 0 !important;
    list-style: none;
}

.feature-overview-list li {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 10px 12px;
    border: 2px solid var(--border-color);
    background: var(--input-bg-color);
    box-shadow: 3px 3px 0 var(--border-color);
}

.feature-icon-box {
    display: grid;
    width: 40px;
    height: 40px;
    flex: none;
    place-items: center;
    border: 2px solid var(--border-color);
    background: var(--card-bg-color);
}

.feature-icon-box img {
    width: 25px;
    height: 25px;
    object-fit: contain;
}

.feature-icon-pair {
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    padding: 3px;
    box-sizing: border-box;
}

.feature-icon-pair img {
    width: 15px;
    height: 22px;
}

.feature-copy {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 4px;
}

.feature-copy > strong {
    color: var(--text-color);
    font-size: 0.84rem;
    font-weight: 950;
    line-height: 1.2;
}

.feature-copy > span {
    color: var(--secondary-text-color);
    font-size: 0.75rem;
    line-height: 1.75;
}

.feature-copy .tag {
    margin: 1px 2px;
    vertical-align: baseline;
}

@media (max-width: 600px) {
    .feature-overview-list li {
        align-items: flex-start;
        gap: 9px;
        padding: 9px;
    }

    .feature-icon-box {
        width: 36px;
        height: 36px;
    }

    .feature-icon-box > img {
        width: 22px;
        height: 22px;
    }

    .feature-icon-pair > img {
        width: 13px;
        height: 19px;
    }
}

/* --- Logic Animation --- */
.logic-animation-section {
    margin-top: 28px;
    padding-top: 22px;
    border-top: var(--hard-border);
}
.logic-animation-section h5 {
    font-size: 1.3em;
    margin: 0 0 14px;
    font-weight: 900;
}
.logic-motion {
    position: relative;
    display: grid;
    box-sizing: border-box;
    grid-template-columns: 1fr 88px 1.3fr 1fr;
    gap: 16px;
    min-height: 218px;
    align-items: center;
    overflow: hidden;
    padding: 12px 0 10px;
}
.motion-track {
    position: absolute;
    top: 50%;
    left: 7%;
    right: 7%;
    height: 3px;
    background-color: var(--border-color);
    z-index: 0;
}
.motion-track::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--text-color);
    opacity: 1;
    transform-origin: left center;
    animation: motionTrackFill 8s ease-in-out infinite;
}
.motion-packet {
    position: absolute;
    top: 50%;
    left: 7%;
    width: 13px;
    height: 13px;
    border-radius: 0;
    background-color: var(--accent-color);
    border: 2px solid var(--bg-color);
    box-shadow: 3px 3px 0 var(--border-color);
    transform: translate(-50%, -50%);
    z-index: 3;
    animation: motionPacketMove 8s ease-in-out infinite;
}
.motion-packet-two {
    animation-delay: 0.55s;
    opacity: 0.65;
    transform: translate(-50%, -50%) scale(0.72);
}
.motion-card,
.motion-phone,
.motion-ai {
    position: relative;
    z-index: 2;
    min-width: 0;
}
.motion-card {
    min-height: 92px;
    padding: 14px;
    border: 2px solid var(--border-color);
    border-radius: 3px;
    background-color: var(--input-bg-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    opacity: 0.52;
    animation: motionFocus 8s ease-in-out infinite;
}
.motion-secret { animation-delay: 0s; }
.motion-reveal { animation-delay: 5.8s; }
.motion-card span {
    color: var(--text-color);
    font-size: 0.8em;
    line-height: 1.2;
}
.motion-card strong {
    color: var(--text-color);
    font-size: 1.05em;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.motion-reveal strong {
    color: var(--text-color);
}
.motion-ai {
    width: 88px;
    height: 88px;
    justify-self: center;
    border: var(--hard-border);
    border-radius: 3px;
    background-color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--hard-shadow-small);
    animation: motionFocus 8s ease-in-out infinite 1.8s;
}
.motion-ai::before {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 0;
    border: 2px solid var(--bg-color);
    animation: none;
}
.motion-ai img {
    width: 42px;
    height: 42px;
    display: block;
    object-fit: contain;
    object-position: center;
}
.word-chip {
    position: absolute;
    padding: 2px 7px;
    border: 2px solid var(--border-color);
    border-radius: 2px;
    background-color: var(--text-color);
    color: var(--bg-color);
    font-size: 0.75em;
    font-weight: 600;
    animation: wordChipFloat 3s ease-in-out infinite;
}
.chip-one {
    top: -18px;
    left: -12px;
}
.chip-two {
    right: -18px;
    top: 18px;
    animation-delay: 0.6s;
}
.chip-three {
    bottom: -18px;
    left: 12px;
    animation-delay: 1.2s;
}
.motion-phone {
    min-height: 150px;
    padding: 10px;
    border: 2px solid var(--border-color);
    border-radius: 3px;
    background-color: var(--card-bg-color);
    box-shadow: var(--hard-shadow-small);
    opacity: 0.52;
    animation: motionFocus 8s ease-in-out infinite 3.7s;
}
.phone-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}
.phone-tabs span {
    flex: 1;
    min-width: 0;
    padding: 5px 4px;
    border-radius: 2px;
    background-color: var(--text-color);
    color: var(--bg-color);
    font-size: 0.78em;
    font-weight: 600;
    text-align: center;
}
.phone-post {
    border-radius: 2px;
    background-color: var(--input-bg-color);
    padding: 10px;
    min-height: 82px;
    overflow: hidden;
}
.phone-post i {
    display: block;
    width: 34px;
    height: 34px;
    border-radius: 0;
    margin-bottom: 8px;
    background: var(--text-color);
}
.phone-post p {
    margin: 0;
    color: var(--secondary-text-color);
    font-size: 0.78em;
    line-height: 1.45;
}
.phone-post mark {
    color: var(--bg-color);
    background-color: var(--text-color);
    font-weight: 700;
    animation: motionMarkPulse 8s ease-in-out infinite;
}

@keyframes motionTrackFill {
    0%, 8% { transform: scaleX(0); }
    30%, 34% { transform: scaleX(0.32); }
    58%, 62% { transform: scaleX(0.66); }
    82%, 100% { transform: scaleX(1); }
}

@keyframes motionPacketMove {
    0%, 7% { left: 7%; opacity: 0; background-color: var(--text-color); }
    11%, 21% { left: 7%; opacity: 1; }
    34%, 41% { left: 32%; background-color: var(--text-color); }
    61%, 68% { left: 66%; background-color: var(--text-color); }
    84%, 92% { left: 93%; opacity: 1; background-color: var(--text-color); }
    100% { left: 93%; opacity: 0; }
}

@keyframes motionFocus {
    0%, 25%, 100% { opacity: 0.52; transform: translateY(0) scale(1); }
    8%, 17% { opacity: 1; transform: translateY(-3px) scale(1.02); }
}

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

@keyframes wordChipFloat {
    0%, 100% { transform: translateY(0); opacity: 0.65; }
    50% { transform: translateY(-5px); opacity: 1; }
}

@keyframes motionMarkPulse {
    0%, 36%, 100% { box-shadow: inset 0 -2px 0 rgba(28, 24, 13, 0.3); }
    44%, 58% { box-shadow: inset 0 -2px 0 rgba(28, 24, 13, 1); }
}

.logic-video {
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 280px;
    overflow: hidden;
    border: var(--hard-border);
    border-radius: 3px;
    background-color: var(--card-bg-color);
    box-shadow: var(--card-shadow);
}
.video-chrome {
    display: flex;
    height: 32px;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    border-bottom: var(--hard-border);
    background-color: var(--text-color);
    box-sizing: border-box;
}
.video-chrome span {
    width: 8px;
    height: 8px;
    border-radius: 0;
    background-color: var(--bg-color);
    opacity: 1;
}
.video-chrome strong {
    margin-left: 4px;
    color: var(--bg-color);
    font-size: 0.78em;
    font-weight: 600;
}
.video-screen {
    position: relative;
    height: calc(100% - 32px);
    min-height: 248px;
    overflow: hidden;
    background-color: var(--bg-color);
}
.video-scene {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
}
.scene-input { animation: sceneInput 16s ease-in-out infinite; }
.scene-generate { animation: sceneGenerate 16s ease-in-out infinite; }
.scene-publish { animation: scenePublish 16s ease-in-out infinite; }
.scene-restore { animation: sceneRestore 16s ease-in-out infinite; }
.scene-badge {
    position: absolute;
    top: 16px;
    left: 18px;
    color: var(--text-color);
    font-size: 0.78em;
    font-weight: 600;
}
.scene-card {
    width: min(82%, 320px);
    border: var(--hard-border);
    border-radius: 3px;
    background-color: var(--card-bg-color);
    box-shadow: var(--hard-shadow-small);
    padding: 16px;
    box-sizing: border-box;
}
.scene-card span {
    display: block;
    margin-bottom: 8px;
    color: var(--text-color);
    font-size: 0.8em;
    line-height: 1.2;
}
.scene-card strong {
    display: block;
    color: var(--text-color);
    font-size: clamp(1.05rem, 3vw, 1.55rem);
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.secret-card {
    animation: secretCardMove 16s ease-in-out infinite;
}
.public-card {
    position: absolute;
    bottom: 28px;
    left: 50%;
    width: min(74%, 360px);
    transform: translateX(-50%);
    animation: publicCardArrive 16s ease-in-out infinite;
}
.public-card p,
.phone-feed p {
    margin: 0;
    color: var(--text-color);
    font-size: 0.88em;
    line-height: 1.5;
}
.public-card mark,
.phone-feed mark {
    background-color: var(--text-color);
    color: var(--bg-color);
    font-weight: 700;
}
.ai-orb {
    position: absolute;
    top: 42px;
    left: 50%;
    display: flex;
    width: 82px;
    height: 82px;
    align-items: center;
    justify-content: center;
    border: var(--hard-border);
    border-radius: 3px;
    background-color: var(--text-color);
    transform: translateX(-50%);
    animation: aiCorePulse 16s ease-in-out infinite;
}
.ai-orb::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 2px solid var(--bg-color);
    border-radius: 0;
    animation: none;
}
.ai-orb img {
    width: 38px;
    height: 38px;
    display: block;
    object-fit: contain;
    object-position: center;
}
.floating-words {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.floating-words span {
    position: absolute;
    padding: 3px 8px;
    border: 2px solid var(--border-color);
    border-radius: 2px;
    background-color: var(--text-color);
    color: var(--bg-color);
    font-size: 0.78em;
    font-weight: 700;
    opacity: 0;
    animation: wordIntoText 16s ease-in-out infinite;
}
.floating-words span:nth-child(1) {
    top: 38%;
    left: 20%;
}
.floating-words span:nth-child(2) {
    top: 28%;
    right: 18%;
    animation-delay: 0.3s;
}
.floating-words span:nth-child(3) {
    top: 50%;
    left: 48%;
    animation-delay: 0.6s;
}
.phone-mock {
    width: min(68%, 250px);
    min-height: 210px;
    border: var(--hard-border);
    border-radius: 3px;
    background-color: var(--card-bg-color);
    box-shadow: var(--hard-shadow-small);
    padding: 12px;
    box-sizing: border-box;
    animation: phoneEnter 16s ease-in-out infinite;
}
.phone-head {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.phone-head span {
    flex: 1;
    padding: 6px 4px;
    border-radius: 2px;
    background-color: var(--text-color);
    color: var(--bg-color);
    font-size: 0.78em;
    font-weight: 700;
    text-align: center;
}
.phone-feed {
    min-height: 130px;
    padding: 12px;
    border-radius: 2px;
    background-color: var(--input-bg-color);
    box-sizing: border-box;
    animation: postUpload 16s ease-in-out infinite;
}
.phone-feed i {
    display: block;
    width: 36px;
    height: 36px;
    margin-bottom: 10px;
    border-radius: 0;
    background-color: var(--text-color);
}
.extractor {
    display: flex;
    width: 72px;
    height: 72px;
    align-items: center;
    justify-content: center;
    border: var(--hard-border);
    border-radius: 3px;
    background-color: var(--text-color);
    animation: extractorPulse 16s ease-in-out infinite;
}
.extractor img {
    width: 34px;
    height: 34px;
}
.reveal-card {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    animation: revealResult 16s ease-in-out infinite;
}
.reveal-card strong {
    color: var(--text-color);
}
.video-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background-color: var(--text-color);
    transform-origin: left center;
    animation: videoProgress 16s linear infinite;
}

@keyframes sceneInput {
    0%, 21% { opacity: 1; }
    26%, 100% { opacity: 0; }
}
@keyframes sceneGenerate {
    0%, 21% { opacity: 0; }
    26%, 47% { opacity: 1; }
    53%, 100% { opacity: 0; }
}
@keyframes scenePublish {
    0%, 47% { opacity: 0; }
    53%, 72% { opacity: 1; }
    78%, 100% { opacity: 0; }
}
@keyframes sceneRestore {
    0%, 72% { opacity: 0; }
    78%, 96% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes secretCardMove {
    0% { transform: translateY(14px) scale(0.96); opacity: 0; }
    8%, 18% { transform: translateY(0) scale(1); opacity: 1; }
    22%, 100% { transform: translateY(-12px) scale(0.98); opacity: 0; }
}
@keyframes publicCardArrive {
    0%, 25% { opacity: 0; transform: translate(-50%, 20px) scale(0.96); }
    34%, 45% { opacity: 1; transform: translate(-50%, 0) scale(1); }
    52%, 100% { opacity: 0; transform: translate(-50%, -12px) scale(0.98); }
}
@keyframes aiCorePulse {
    0%, 25%, 50%, 100% { opacity: 0; transform: translateX(-50%) scale(0.82); }
    30%, 44% { opacity: 1; transform: translateX(-50%) scale(1); }
}
@keyframes wordIntoText {
    0%, 27% { opacity: 0; transform: translateY(18px) scale(0.85); }
    34%, 43% { opacity: 1; transform: translateY(0) scale(1); }
    50%, 100% { opacity: 0; transform: translateY(-20px) scale(0.9); }
}
@keyframes phoneEnter {
    0%, 50% { opacity: 0; transform: translateY(20px) scale(0.94); }
    58%, 70% { opacity: 1; transform: translateY(0) scale(1); }
    78%, 100% { opacity: 0; transform: translateY(-14px) scale(0.98); }
}
@keyframes postUpload {
    0%, 57% { transform: translateY(18px); opacity: 0.45; }
    62%, 72% { transform: translateY(0); opacity: 1; }
    78%, 100% { transform: translateY(-8px); opacity: 0.55; }
}
@keyframes extractorPulse {
    0%, 76%, 100% { opacity: 0; transform: translateY(-18px) scale(0.84); }
    82%, 90% { opacity: 1; transform: translateY(-24px) scale(1); }
}
@keyframes revealResult {
    0%, 78% { opacity: 0; transform: translate(-50%, 18px) scale(0.95); }
    84%, 95% { opacity: 1; transform: translate(-50%, 0) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -8px) scale(0.98); }
}
@keyframes videoProgress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

.tag { display: inline-block; padding: 2px 6px; background-color: var(--text-color); color: var(--bg-color); border-radius: 2px; margin: 0 2px; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 0.85em; border: 2px solid var(--border-color); }
.hidden { display: none !important; }

/* --- Toast Notification --- */
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background-color: var(--text-color); color: var(--bg-color); padding: 10px 20px; border: 2px solid var(--bg-color); border-radius: 3px; font-size: 0.9em; z-index: 1000; display: flex; align-items: center; gap: 8px; box-shadow: var(--hard-shadow-small); transition: opacity 0.3s ease, transform 0.3s ease; }
.toast.hidden { opacity: 0; transform: translateX(-50%) translateY(20px); pointer-events: none; }

/* --- Modern Textbox --- */
.modern-textbox {
    position: relative;
    border: var(--hard-border);
    border-radius: var(--border-radius);
    background-color: var(--input-bg-color);
    padding: 12px; /* Increased padding */
    padding-bottom: 45px; /* Space for controls */
    box-shadow: var(--card-shadow);
    /* MODIFIED: Keep margin-bottom for spacing below the textbox */
    margin-bottom: 25px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.modern-textbox:focus-within {
    border-color: var(--accent-color);
    box-shadow: 9px 9px 0 var(--border-color);
}

.modern-textbox textarea {
    width: 100%;
    border: none;
    background-color: transparent;
    color: var(--text-color);
    /* MODIFIED: Increased font size */
    font-size: 1.5em; /* Slightly larger font size */
    line-height: 1.5; /* Adjust line height */
    box-sizing: border-box;
    resize: none; /* Disable textarea resize */
    min-height: 100px; /* Set a minimum height */
    /* max-height: 250px; */ /* Optional: Set a max height */
    height: 120px; /* Default fixed height */
    overflow-y: auto; /* Enable vertical scroll */
    outline: none;
    padding: 0;
    margin: 0;
}

.modern-textbox textarea::placeholder {
    color: rgba(28, 24, 13, 0.58);
    font-weight: 800;
}

.textbox-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px; /* Adjusted padding */
    /* Match modern-textbox background */
    background-color: var(--input-bg-color);
    border-top: var(--hard-border);
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    height: 38px; /* Fixed height for control bar */
}

.input-type-indicator, /* Renamed */
.action-settings-icons {
    display: flex;
    align-items: center;
    gap: 6px; /* Reduced gap */
}

.control-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.control-icon {
    /* MODIFIED: Use updated variable */
    width: var(--icon-size);
    height: var(--icon-size);
    cursor: pointer;
    opacity: 0.88; /* Default opacity */
    transition: opacity 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    /* MODIFIED: Adjusted padding slightly for larger icons */
    padding: 5px;
    border-radius: 2px; /* Slightly rounder */
    position: relative; /* Needed for tooltip positioning */
    background-color: var(--control-icon-bg);
    display: flex; /* Needed for centering icon if using SVG */
    align-items: center;
    justify-content: center;
    /* Prevent icon within link from having default styles */
    vertical-align: middle;
    border: 2px solid transparent; /* Remove potential borders */
    box-sizing: content-box;
    color: inherit;
    font: inherit;
    line-height: 0;
    text-decoration: none;
    appearance: none;
    -webkit-appearance: none;
}

.control-icon-img {
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

/* Styling for the new token icon (optional, if needed) */
.token-icon {
     /* Add specific styles here if needed, e.g., different opacity */
     opacity: 0.8; /* Example: Make it slightly more visible */
}
.token-icon:hover {
    opacity: 1; /* Ensure full opacity on hover */
}


.current-type-icon.active { /* Style for the main type icon when active */
    opacity: 1;
    /* Example: Add a subtle border */
    /* box-shadow: 0 0 0 1px var(--accent-color); */
}

.status-icon {
    cursor: default;
}

.control-icon.action-icon {
    opacity: 1; /* Keep action icons fully visible */
}


.control-icon:hover {
    background-color: var(--control-icon-hover-bg); /* Use variable */
    opacity: 1; /* Full opacity on hover */
    border-color: var(--border-color);
    box-shadow: 2px 2px 0 var(--border-color);
    transform: translate(-1px, -1px);
}

.status-icon:hover {
    background-color: var(--control-icon-bg);
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

.control-icon:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* --- Tooltip Styling (Specific for Control Icons) --- */
/* Base (Hidden) */
.control-icon[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 110%; /* Position above the icon */
    left: 50%;
    transform: translateX(-50%) scale(0.8); /* Start scaled down */
    background-color: var(--text-color); /* Darker tooltip */
    color: var(--bg-color);
    padding: 4px 8px;
    border: 2px solid var(--bg-color);
    border-radius: 2px;
    font-size: 0.8em;
    white-space: nowrap;
    opacity: 0; /* Start hidden */
    visibility: hidden; /* Start hidden */
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    pointer-events: none; /* Don't interfere with mouse events */
    z-index: 10; /* Ensure it's above other elements */
}

/* Hover (Visible) */
.control-icon[data-tooltip]:hover::after {
    opacity: 1; /* Fade in */
    visibility: visible; /* Make it visible */
    transform: translateX(-50%) scale(1); /* Scale to full size */
}


/* GO Icon */
.go-icon { opacity: 1; }
/* Disable GO icon */
.go-icon:disabled,
.go-icon[disabled],
.go-icon[aria-disabled="true"] {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

/* --- Selectors (Topic, AI Model) --- */
.topic-selector,
.ai-model-selector {
    position: relative;
    display: flex;
    align-items: center;
}

/* Shared option container style */
.topic-option,
.model-options {
    position: absolute;
    bottom: calc(100% + 4px); /* Position above the control bar */
    right: 0;
    background-color: var(--card-bg-color);
    border: var(--hard-border);
    border-radius: 3px;
    padding: 8px;
    display: none; /* Hidden by default */
    gap: 6px;
    box-shadow: var(--hard-shadow-small);
    z-index: 5; /* Lower than tooltip (z-index: 10) */
    opacity: 0; /* Start hidden */
    transition: opacity 0.2s ease, transform 0.2s ease;
    transform: translateY(5px);
    pointer-events: none; /* Start non-interactive */
}
/* Make visible when parent selector has 'open' class */
.topic-selector.open .topic-option,
.ai-model-selector.open .model-options {
    display: flex; /* Show flex container */
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto; /* Allow interaction when open */
}

/* Specifics for Topic Input */
.topic-option {
    padding: 6px; /* Smaller padding */
    display: none; /* Overridden by .open */
}
.topic-selector.open .topic-option {
     display: block; /* Make topic input block when open */
}
.topic-option input {
    width: 130px;
    padding: 6px 10px;
    border: 2px solid var(--border-color);
    border-radius: 2px;
    font-size: 0.9em;
    background-color: var(--input-bg-color);
    outline: none;
    color: var(--text-color);
    margin: 0; /* Remove margin */
}
.topic-option input:focus {
     border-color: var(--accent-color);
}

/* Specifics for Model Options */
.model-options .model-option-icon {
    /* Inherits .control-icon styles */
    width: calc(var(--icon-size) + 4px); /* Slightly larger */
    height: calc(var(--icon-size) + 4px);
    opacity: 0.8;
}
.model-options .model-option-icon:hover {
     opacity: 1;
	     background-color: var(--control-icon-hover-bg);
}

/* --- Modal Styling --- */
.modal-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(28, 24, 13, 0.72); z-index: 100; transition: opacity 0.3s ease; }
.modal-backdrop.hidden { opacity: 0; pointer-events: none; }
.modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: var(--card-bg-color); padding: 25px 30px; border: var(--hard-border); border-radius: var(--border-radius); box-shadow: 9px 9px 0 var(--border-color); z-index: 101; min-width: 300px; max-width: 90%; width: 500px; transition: opacity 0.3s ease, transform 0.3s ease; }
.modal.hidden { opacity: 0; transform: translate(-50%, -45%); pointer-events: none; }
.modal-content { position: relative; }
.modal h3 { margin-top: 0; margin-bottom: 20px; text-align: center; font-weight: 600; color: var(--text-color); }
.close-button { position: absolute; top: -10px; right: 0px; border: none; padding: 0; background: transparent; font-size: 1.8em; font-weight: bold; color: var(--secondary-text-color); cursor: pointer; line-height: 1; }
.close-button:hover { color: var(--text-color); }
.close-button:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; border-radius: 2px; }
.modal .form-group { margin-bottom: 15px; }
.modal .button { width: 100%; margin-top: 15px; }
/* Ensure radio groups in modal have adequate spacing */
.modal .radio-group { padding-top: 5px; margin-bottom: 15px; }

/* --- Responsive --- */
@media (max-width: 768px) {
    body { padding: 10px; }
    .container { padding: 20px; margin: 10px auto; width: calc(100% - 8px); }
    .app-header { gap: 10px; } /* Reduce gap */
    .app-header h1 { font-size: 1.5em; } /* Smaller title on mobile */
    .app-header .subtitle { font-size: 0.8em; }
    .button { padding: 10px 20px; width: 100%; box-sizing: border-box; }
    .modal .radio-group { flex-direction: column; align-items: flex-start; }
    .modal .radio-group label { width: 100%; margin-bottom: 5px; }

    .modern-textbox { padding-bottom: 45px; /* Keep height consistent */ }
    .modern-textbox textarea { height: 100px; font-size: 1em; } /* Adjust height/font */
    .textbox-controls { flex-wrap: nowrap; /* Prevent wrapping on small screens */ height: 40px; padding: 5px 8px;}
    .input-type-indicator { order: 1; /* Keep order */ }
    .action-settings-icons { order: 2; }
    /* Adjust gaps if needed */
    .input-type-indicator, .action-settings-icons { gap: 4px; }
    /* MODIFIED: Increased icon size for mobile */
    :root { --icon-size: 22px; } /* Larger icons on mobile */
     /* Make topic input smaller */
     .topic-option input { width: 100px; }
     /* Ensure options don't overflow */
    .topic-option, .model-options { max-width: calc(100vw - 40px); /* Prevent overflow */ }

    .modal { width: 90%; }
    .logic-motion {
        grid-template-columns: 1fr;
        gap: 18px;
        min-height: auto;
        padding: 8px 0 8px 34px;
    }
    .motion-track {
        top: 20px;
        bottom: 20px;
        left: 13px;
        right: auto;
        width: 3px;
        height: auto;
    }
    .motion-track::after {
        background: var(--text-color);
        transform-origin: center top;
        animation-name: motionTrackFillVertical;
    }
    .motion-packet {
        top: 20px;
        left: 13px;
        animation-name: motionPacketMoveVertical;
    }
    .motion-card,
    .motion-phone {
        min-height: auto;
    }
    .motion-ai {
        justify-self: start;
        width: 76px;
        height: 76px;
    }
    .motion-ai img {
        width: 36px;
        height: 36px;
    }
    .motion-phone {
        min-height: 132px;
    }
    .phone-tabs span {
        font-size: 0.82em;
    }
    .logic-video {
        aspect-ratio: 4 / 3;
        min-height: 250px;
    }
    .video-chrome {
        height: 30px;
        padding: 0 10px;
    }
    .video-screen {
        height: calc(100% - 30px);
        min-height: 220px;
    }
    .video-scene {
        padding: 14px;
    }
    .scene-badge {
        top: 12px;
        left: 14px;
    }
    .scene-card {
        width: min(88%, 270px);
        padding: 13px;
    }
    .scene-card strong {
        font-size: 1.05rem;
    }
    .public-card,
    .reveal-card {
        bottom: 18px;
        width: min(88%, 276px);
    }
    .public-card p,
    .phone-feed p {
        font-size: 0.78em;
    }
    .ai-orb {
        top: 32px;
        width: 66px;
        height: 66px;
    }
    .ai-orb img {
        width: 32px;
        height: 32px;
    }
    .floating-words span {
        font-size: 0.72em;
    }
    .phone-mock {
        width: min(76%, 220px);
        min-height: 176px;
        border-radius: 3px;
    }
    .phone-feed {
        min-height: 98px;
        padding: 10px;
    }
    .phone-feed i {
        width: 28px;
        height: 28px;
        margin-bottom: 7px;
    }
    .extractor {
        width: 58px;
        height: 58px;
    }
    .extractor img {
        width: 28px;
        height: 28px;
    }
    /* MODIFIED: Removed specific copy button styles for mobile as they are now default */
    /* .copy-button { padding: 3px; } */
    /* .copy-button .material-symbols-outlined { font-size: 16px; } */
}

@keyframes motionTrackFillVertical {
    0%, 8% { transform: scaleY(0); }
    30%, 34% { transform: scaleY(0.32); }
    58%, 62% { transform: scaleY(0.66); }
    82%, 100% { transform: scaleY(1); }
}

@keyframes motionPacketMoveVertical {
    0%, 7% { top: 20px; opacity: 0; background-color: var(--text-color); }
    11%, 21% { top: 20px; opacity: 1; }
    34%, 41% { top: 35%; background-color: var(--text-color); }
    61%, 68% { top: 65%; background-color: var(--text-color); }
    84%, 92% { top: calc(100% - 20px); opacity: 1; background-color: var(--text-color); }
    100% { top: calc(100% - 20px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .motion-track::after,
    .motion-packet,
    .motion-card,
    .motion-ai,
    .motion-ai::before,
    .motion-phone,
    .word-chip,
    .phone-post mark {
        animation: none;
    }
    .motion-track::after {
        transform: none;
    }
    .motion-card,
    .motion-ai,
    .motion-phone {
        opacity: 1;
        transform: none;
    }
    .motion-packet {
        display: none;
    }
    .video-scene,
    .secret-card,
    .public-card,
    .ai-orb,
    .ai-orb::before,
    .floating-words span,
    .phone-mock,
    .phone-feed,
    .extractor,
    .reveal-card,
    .video-progress {
        animation: none;
    }
    .video-scene {
        opacity: 0;
    }
    .scene-restore {
        opacity: 1;
    }
    .extractor {
        opacity: 1;
        transform: translateY(-24px) scale(1);
    }
    .reveal-card {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
    .video-progress {
        transform: scaleX(1);
    }
}
/* END OF MODIFIED FILE style.css */

/* --- 2026-07 model, tooltip, and logo refinements --- */
.logo {
    background: var(--bg-color);
}

.option-label {
    display: block;
    margin: 0 0 5px;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}

.topic-option input {
    width: 210px;
}

.model-options {
    flex-wrap: wrap;
    max-width: min(220px, calc(100vw - 40px));
}

.control-icon[data-tooltip]::after {
    width: max-content;
    max-width: min(260px, calc(100vw - 32px));
    white-space: normal;
    line-height: 1.35;
    text-align: center;
}

.control-icon[data-tooltip]:hover::after,
.control-icon[data-tooltip]:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
}

.control-icon.tooltip-align-right[data-tooltip]::after,
.action-settings-icons .control-icon[data-tooltip]::after {
    right: 0;
    left: auto;
    transform: scale(0.8);
    transform-origin: bottom right;
}

.control-icon.tooltip-align-right[data-tooltip]:hover::after,
.control-icon.tooltip-align-right[data-tooltip]:focus-visible::after,
.action-settings-icons .control-icon[data-tooltip]:hover::after,
.action-settings-icons .control-icon[data-tooltip]:focus-visible::after {
    transform: scale(1);
}

.form-hint {
    margin: -4px 0 16px;
    color: var(--secondary-text-color);
    font-size: 0.88rem;
}

@media (max-width: 600px) {
    .topic-option input {
        width: min(180px, calc(100vw - 80px));
    }
}

/* --- Token tooltip and streaming typewriter --- */
.control-icon.tooltip-align-left[data-tooltip]::after {
    right: auto;
    left: 0;
    transform: scale(0.8);
    transform-origin: bottom left;
}

.control-icon.tooltip-align-left[data-tooltip]:hover::after,
.control-icon.tooltip-align-left[data-tooltip]:focus-visible::after {
    transform: scale(1);
}

#outputText.is-typing::after {
    content: "";
    display: inline-block;
    width: 0.55em;
    height: 1.05em;
    margin-left: 0.12em;
    border-right: 3px solid currentColor;
    vertical-align: -0.12em;
    animation: typingCaret 0.72s steps(1, end) infinite;
}

@keyframes typingCaret {
    0%, 46% { opacity: 1; }
    47%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    #outputText.is-typing::after {
        animation: none;
        opacity: 1;
    }
}

/* --- Staged AI waiting and result reveal --- */
.output-section.is-active {
    animation: outputSectionIn 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.loading {
    position: relative;
    min-height: 58px;
    box-sizing: border-box;
    overflow: hidden;
    padding: 14px 16px;
    border: 2px solid var(--border-color);
    border-radius: 3px;
    background: var(--input-bg-color);
    box-shadow: 3px 3px 0 var(--border-color);
}

.loading::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 25%, rgba(255, 255, 255, 0.5) 45%, transparent 65%);
    transform: translateX(-120%);
    animation: thinkingSweep 1.8s ease-in-out infinite;
    pointer-events: none;
}

.thinking-mark {
    display: inline-flex;
    width: 28px;
    height: 28px;
    flex: none;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    padding: 5px;
    border: 2px solid var(--border-color);
    background: var(--text-color);
    box-sizing: border-box;
}

.thinking-mark span {
    width: 3px;
    height: 5px;
    background: var(--bg-color);
    animation: thinkingBars 0.9s ease-in-out infinite;
}

.thinking-mark span:nth-child(2) { animation-delay: 0.14s; }
.thinking-mark span:nth-child(3) { animation-delay: 0.28s; }

#loadingMessage {
    min-width: 8em;
    font-weight: 750;
}

#loadingMessage.message-swap {
    animation: loadingMessageIn 0.32s ease-out both;
}

.loading-dots {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.loading-dots i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    animation: loadingDot 1s ease-in-out infinite;
}

.loading-dots i:nth-child(2) { animation-delay: 0.15s; }
.loading-dots i:nth-child(3) { animation-delay: 0.3s; }

.output-content-wrapper {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
    transform-origin: top center;
    transition: opacity 0.38s ease, transform 0.46s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.output-content-wrapper.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.output-content-wrapper pre {
    transition: box-shadow 0.35s ease, background-color 0.35s ease;
}

.output-content-wrapper.is-streaming pre {
    box-shadow: 3px 3px 0 var(--border-color);
}

.output-content-wrapper .copy-button {
    opacity: 0;
    transform: translateY(-7px) scale(0.75);
    pointer-events: none;
    transition: opacity 0.24s ease, transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.2s ease, color 0.2s ease;
}

.output-content-wrapper.is-complete .copy-button {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    transition-delay: 0.18s, 0.18s, 0s, 0s;
}

@keyframes outputSectionIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes thinkingSweep {
    0% { transform: translateX(-120%); }
    55%, 100% { transform: translateX(120%); }
}

@keyframes thinkingBars {
    0%, 100% { height: 5px; opacity: 0.55; }
    50% { height: 15px; opacity: 1; }
}

@keyframes loadingDot {
    0%, 100% { opacity: 0.3; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-3px); }
}

@keyframes loadingMessageIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .output-section.is-active,
    .loading::after,
    .thinking-mark span,
    .loading-dots i,
    #loadingMessage.message-swap {
        animation: none;
    }

    .output-content-wrapper,
    .output-content-wrapper .copy-button {
        transition-duration: 0.01ms;
        transition-delay: 0s;
    }
}

/* --- Six-stage AI Anyu story demo --- */
.demo-story .video-scene {
    opacity: 0;
    animation: demoSceneCycle 30s ease-in-out infinite both;
}

.demo-story .scene-source { --scene-delay: 0s; animation-delay: var(--scene-delay); }
.demo-story .scene-rejected { --scene-delay: 5s; animation-delay: var(--scene-delay); }
.demo-story .scene-transform { --scene-delay: 10s; animation-delay: var(--scene-delay); }
.demo-story .scene-approved { --scene-delay: 15s; animation-delay: var(--scene-delay); }
.demo-story .scene-recover { --scene-delay: 20s; animation-delay: var(--scene-delay); }
.demo-story .scene-brand { --scene-delay: 25s; animation-delay: var(--scene-delay); }

.demo-story .video-progress {
    animation: videoProgress 30s linear infinite;
}

.demo-source-card {
    text-align: center;
    animation: demoCardFloat 2.8s ease-in-out infinite;
}

.platform-card {
    width: min(82%, 330px);
    padding: 14px;
    border: var(--hard-border);
    border-radius: 3px;
    background: var(--card-bg-color);
    box-shadow: var(--hard-shadow-small);
    box-sizing: border-box;
}

.platform-head {
    display: flex;
    gap: 8px;
    margin-bottom: 11px;
}

.platform-head span {
    flex: 1;
    padding: 5px 8px;
    background: var(--text-color);
    color: var(--bg-color);
    font-size: 0.76rem;
    font-weight: 800;
    text-align: center;
}

.platform-card > p {
    margin: 0 0 12px;
    padding: 10px;
    border: 2px solid var(--border-color);
    background: var(--input-bg-color);
    color: var(--text-color);
    font-size: 0.86rem;
    line-height: 1.45;
}

.platform-card mark,
.mini-message mark {
    background: var(--text-color);
    color: var(--bg-color);
    font-weight: 800;
}

.publish-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 2px solid var(--border-color);
    color: var(--text-color);
}

.publish-status b {
    display: grid;
    width: 26px;
    height: 26px;
    flex: none;
    place-items: center;
    border: 2px solid var(--border-color);
    background: var(--text-color);
    color: var(--bg-color);
    font-size: 1.1rem;
    line-height: 1;
}

.publish-status span {
    font-size: 0.82rem;
    font-weight: 900;
    line-height: 1.15;
}

.publish-status small {
    display: block;
    margin-top: 3px;
    font-size: 0.68rem;
    font-weight: 600;
    opacity: 0.72;
}

.status-rejected {
    background: repeating-linear-gradient(-45deg, rgba(28, 24, 13, 0.07) 0 6px, transparent 6px 12px);
}

.status-rejected b {
    animation: demoRejectPulse 0.9s ease-in-out infinite;
}

.status-approved {
    background: var(--input-bg-color);
}

.status-approved b {
    animation: demoApprovePulse 1.2s ease-in-out infinite;
}

.transform-flow,
.recovery-flow {
    display: grid;
    width: min(94%, 570px);
    grid-template-columns: minmax(0, 1fr) 68px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
}

.mini-message {
    min-width: 0;
    padding: 12px;
    border: 2px solid var(--border-color);
    background: var(--card-bg-color);
    box-shadow: 3px 3px 0 var(--border-color);
    box-sizing: border-box;
}

.mini-message span {
    display: block;
    margin-bottom: 6px;
    color: var(--secondary-text-color);
    font-size: 0.68rem;
    font-weight: 800;
}

.mini-message strong,
.mini-message p {
    display: block;
    margin: 0;
    color: var(--text-color);
    font-size: clamp(0.72rem, 1.8vw, 0.92rem);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.demo-ai-core,
.recover-action {
    position: relative;
    display: flex;
    width: 62px;
    height: 62px;
    align-items: center;
    justify-content: center;
    justify-self: center;
    border: var(--hard-border);
    background: var(--bg-color);
    box-shadow: 3px 3px 0 var(--border-color);
}

.demo-ai-core::before,
.recover-action::before,
.recover-action::after {
    content: "";
    position: absolute;
}

.demo-ai-core::before {
    inset: 7px;
    border: 2px solid var(--text-color);
    opacity: 0.28;
    animation: demoCoreFrame 1.4s ease-in-out infinite;
}

.demo-ai-core img,
.recover-action img {
    position: relative;
    z-index: 1;
    object-fit: contain;
}

.demo-ai-core img {
    width: 38px;
    height: 38px;
}

.recover-action img {
    width: 44px;
    height: 26px;
}

.recover-action {
    flex-direction: column;
    gap: 2px;
    color: var(--text-color);
}

.recover-action span {
    position: relative;
    z-index: 1;
    font-size: 0.62rem;
    font-weight: 800;
}

.recover-action::before,
.recover-action::after {
    top: 50%;
    width: 18px;
    height: 2px;
    background: var(--text-color);
}

.recover-action::before { right: calc(100% + 4px); }
.recover-action::after { left: calc(100% + 4px); }

.converted-message,
.recovered-message {
    animation: demoMessageReady 1.6s ease-in-out infinite;
}

.brand-outro {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    animation: demoBrandPulse 2.4s ease-in-out infinite;
}

.brand-outro img {
    width: 128px;
    height: 52px;
    object-fit: contain;
    transform: none;
}

.brand-outro h3 {
    margin: 4px 0 5px;
    color: var(--text-color);
    font-size: clamp(1.45rem, 4vw, 2.15rem);
    font-weight: 950;
    letter-spacing: 0.04em;
}

.brand-outro p {
    margin: 0;
    padding: 5px 10px;
    border: 2px solid var(--border-color);
    background: var(--text-color);
    color: var(--bg-color);
    font-size: clamp(0.72rem, 2vw, 0.92rem);
    font-weight: 750;
}

@keyframes demoSceneCycle {
    0% { opacity: 0; transform: translateY(10px) scale(0.985); }
    2%, 14% { opacity: 1; transform: translateY(0) scale(1); }
    16%, 100% { opacity: 0; transform: translateY(-8px) scale(0.99); }
}

@keyframes demoCardFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes demoRejectPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(0.86); }
}

@keyframes demoApprovePulse {
    0%, 100% { transform: scale(1); box-shadow: none; }
    50% { transform: scale(1.08); box-shadow: 2px 2px 0 var(--border-color); }
}

@keyframes demoCoreFrame {
    0%, 100% { transform: scale(0.9); opacity: 0.65; }
    50% { transform: scale(1); opacity: 1; }
}

@keyframes demoMessageReady {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@keyframes demoBrandPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.025); }
}

@media (max-width: 600px) {
    .transform-flow,
    .recovery-flow {
        width: 100%;
        grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
        gap: 7px;
    }

    .mini-message {
        padding: 8px;
        box-shadow: 2px 2px 0 var(--border-color);
    }

    .mini-message strong,
    .mini-message p {
        font-size: 0.66rem;
        line-height: 1.3;
    }

    .demo-ai-core,
    .recover-action {
        width: 44px;
        height: 44px;
        box-shadow: 2px 2px 0 var(--border-color);
    }

    .demo-ai-core img {
        width: 28px;
        height: 28px;
    }

    .recover-action img {
        width: 30px;
        height: 18px;
    }

    .recover-action span { display: none; }
    .platform-card { width: min(92%, 310px); }
    .brand-outro img { width: 100px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
    .demo-story .video-scene,
    .demo-story .video-progress,
    .demo-source-card,
    .status-rejected b,
    .status-approved b,
    .demo-ai-core::before,
    .converted-message,
    .recovered-message,
    .brand-outro {
        animation: none;
    }

    .demo-story .video-scene { opacity: 0; }
    .demo-story .scene-brand {
        opacity: 1;
        transform: none;
    }
}

/* --- Demo character-by-character typewriter text --- */
.demo-story .demo-type {
    position: relative;
    display: block;
    min-height: 1.35em;
}

.demo-story .demo-type.is-demo-typing::after {
    content: "";
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 3px;
    background: currentColor;
    vertical-align: -0.12em;
    animation: demoCharacterCaret 0.68s steps(1, end) infinite;
}

@keyframes demoCharacterCaret {
    0%, 48% { opacity: 1; }
    49%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .demo-story .demo-type.is-demo-typing::after {
        display: none;
        animation: none;
    }
}

/* --- AIAY demo token market card --- */
.token-market-card {
    margin-top: 18px;
    padding: 18px;
    border: var(--hard-border);
    background: var(--card-bg-color);
    box-shadow: var(--hard-shadow-small);
}

.token-market-head,
.token-identity,
.token-contract-title,
.token-contract-row,
.token-market-actions {
    display: flex;
    align-items: center;
}

.token-market-head {
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--border-color);
}

.token-identity { gap: 11px; }

.token-symbol-mark {
    display: grid;
    width: 46px;
    height: 46px;
    flex: none;
    place-items: center;
    overflow: hidden;
    border: var(--hard-border);
    background: var(--bg-color);
    box-shadow: 3px 3px 0 rgba(28, 24, 13, 0.28);
}

.token-symbol-mark img {
    width: 40px;
    height: 28px;
    object-fit: contain;
}

.token-kicker {
    margin: 0 0 2px;
    color: var(--secondary-text-color);
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.14em;
}

.token-identity h2 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 950;
    line-height: 1.1;
}

.token-identity h2 span {
    font-size: 0.72rem;
    font-weight: 750;
    opacity: 0.68;
}

.token-demo-badge {
    padding: 5px 8px;
    border: 2px solid var(--border-color);
    background: repeating-linear-gradient(-45deg, rgba(28, 24, 13, 0.08) 0 5px, transparent 5px 10px);
    font-size: 0.68rem;
    font-weight: 900;
    white-space: nowrap;
}

.token-market-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 12px;
    margin-top: 14px;
}

.token-price-panel {
    padding: 15px;
    border: var(--hard-border);
    background: var(--text-color);
    color: var(--bg-color);
}

.token-data-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 800;
    opacity: 0.78;
}

.token-price-panel > strong {
    display: block;
    margin: 3px 0;
    font-family: SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: clamp(1.55rem, 6vw, 2.35rem);
    font-weight: 950;
    line-height: 1.15;
    letter-spacing: -0.05em;
}

.token-price-change {
    font-size: 0.68rem;
    font-weight: 800;
}

.token-price-change span {
    display: inline-block;
    margin-right: 5px;
    padding: 1px 5px;
    background: var(--bg-color);
    color: var(--text-color);
}

.token-stats {
    display: grid;
    margin: 0;
    border: 2px solid var(--border-color);
}

.token-stats div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 9px;
    background: var(--input-bg-color);
}

.token-stats div + div { border-top: 2px solid var(--border-color); }
.token-stats dt { font-size: 0.68rem; font-weight: 750; }
.token-stats dd { margin: 0; font-family: SFMono-Regular, Consolas, monospace; font-size: 0.76rem; font-weight: 900; }

.token-contract-block {
    margin-top: 12px;
    padding: 10px;
    border: 2px solid var(--border-color);
}

.token-contract-title {
    justify-content: space-between;
    margin-bottom: 7px;
    font-size: 0.72rem;
    font-weight: 900;
}

.token-contract-title small {
    padding: 1px 5px;
    background: var(--text-color);
    color: var(--bg-color);
    font-size: 0.58rem;
    letter-spacing: 0.08em;
}

.token-contract-row { gap: 8px; }

.token-contract-row code {
    min-width: 0;
    flex: 1;
    padding: 9px 10px;
    border: 2px solid var(--border-color);
    background: var(--input-bg-color);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.contract-copy-button,
.token-trade-link {
    border: 2px solid var(--border-color);
    color: var(--text-color);
    font: inherit;
    font-weight: 900;
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

.contract-copy-button {
    display: inline-flex;
    height: 38px;
    flex: none;
    align-items: center;
    gap: 4px;
    padding: 0 9px;
    background: var(--card-bg-color);
    font-size: 0.7rem;
}

.contract-copy-button .material-symbols-outlined { font-size: 16px; }

.token-market-actions {
    gap: 9px;
    margin-top: 12px;
}

.token-trade-link {
    display: flex;
    min-height: 40px;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 12px;
    background: var(--card-bg-color);
    font-size: 0.76rem;
    text-decoration: none;
    box-sizing: border-box;
}

.token-trade-link.primary {
    background: var(--text-color);
    color: var(--bg-color);
}

.contract-copy-button:hover,
.contract-copy-button:focus-visible,
.token-trade-link:hover,
.token-trade-link:focus-visible {
    transform: translate(-2px, -2px);
    box-shadow: 3px 3px 0 var(--border-color);
    outline: none;
}

.token-trade-link.primary:hover,
.token-trade-link.primary:focus-visible {
    background: var(--bg-color);
    color: var(--text-color);
}

.token-demo-notice {
    margin: 11px 0 0;
    color: var(--secondary-text-color);
    font-size: 0.68rem;
    line-height: 1.45;
}

@media (max-width: 600px) {
    .token-market-card { padding: 13px; }
    .token-market-head { align-items: flex-start; }
    .token-demo-badge { white-space: normal; text-align: right; }
    .token-market-grid { grid-template-columns: 1fr; }
    .token-contract-row { align-items: stretch; }
    .contract-copy-button { height: auto; }
    .contract-copy-button .copy-label { display: none; }
    .token-market-actions { flex-direction: column; }
    .token-trade-link { width: 100%; flex: none; }
}

/* --- Token Plan attraction and navigation --- */
.token-icon {
    opacity: 1;
    border-color: rgba(28, 24, 13, 0.65);
    background-image: linear-gradient(115deg, transparent 28%, rgba(255, 255, 255, 0.82) 48%, transparent 68%);
    background-size: 230% 100%;
    box-shadow: 0 0 0 2px rgba(204, 255, 0, 0.8), 0 0 12px rgba(28, 24, 13, 0.45);
    animation: tokenPlanGlow 2.5s ease-in-out infinite, tokenPlanShine 3.8s ease-in-out infinite;
}

.token-icon .control-icon-img {
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.72));
}

.token-icon:hover,
.token-icon:focus-visible {
    opacity: 1;
    border-color: var(--border-color);
    box-shadow: 0 0 0 3px rgba(204, 255, 0, 0.95), 0 0 18px rgba(28, 24, 13, 0.68);
}

@keyframes tokenPlanGlow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.2); }
}

@keyframes tokenPlanShine {
    0%, 30% { background-position: 135% 0; }
    60%, 100% { background-position: -35% 0; }
}

.token-plan-header {
    position: relative;
}

.back-home-button {
    position: absolute;
    right: 0;
    display: inline-flex;
    align-items: center;
    min-height: 31px;
    padding: 4px 9px;
    border: 2px solid var(--border-color);
    border-radius: 2px;
    background: var(--text-color);
    color: var(--bg-color);
    font-size: 0.78rem;
    font-weight: 850;
    line-height: 1;
    text-decoration: none;
    box-shadow: 3px 3px 0 var(--border-color);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.back-home-button:hover,
.back-home-button:focus-visible {
    background: var(--bg-color);
    color: var(--text-color);
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--border-color);
}

.back-home-button:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 3px;
}

@media (max-width: 600px) {
    .token-plan-header {
        flex-wrap: wrap;
        justify-content: center;
        padding-bottom: 52px;
    }

    .back-home-button {
        right: auto;
        bottom: 12px;
        left: 50%;
        transform: translateX(-50%);
    }

    .back-home-button:hover,
    .back-home-button:focus-visible {
        transform: translateX(-50%) translateY(2px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .token-icon {
        animation: none;
    }
}

/* --- Shared project footer --- */
.site-footer {
    margin-top: 32px;
    padding-top: 22px;
    border-top: var(--hard-border);
}

.project-footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.project-footer-brand {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
}

.footer-logo {
    display: grid;
    width: 50px;
    height: 50px;
    flex: none;
    place-items: center;
    border: var(--hard-border);
    background: var(--text-color);
    box-shadow: 3px 3px 0 rgba(28, 24, 13, 0.28);
}

.footer-logo img {
    width: 40px;
    height: 28px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.project-footer-brand h2 {
    margin: 0 0 2px;
    color: var(--text-color);
    font-size: 1.16rem;
    font-weight: 950;
    line-height: 1.1;
}

.project-footer-brand p {
    margin: 0;
    color: var(--secondary-text-color);
    font-size: 0.72rem;
    font-weight: 650;
    line-height: 1.4;
}

.footer-project-status {
    display: flex;
    flex: none;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border: 2px solid var(--border-color);
    background: var(--input-bg-color);
}

.footer-project-status > span {
    width: 8px;
    height: 8px;
    flex: none;
    background: var(--text-color);
    animation: footerStatusPulse 1.8s ease-in-out infinite;
}

.footer-project-status small,
.footer-project-status strong {
    display: block;
    line-height: 1.2;
}

.footer-project-status small {
    margin-bottom: 2px;
    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    opacity: 0.68;
}

.footer-project-status strong {
    font-size: 0.68rem;
    font-weight: 900;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 15px;
}

.footer-links a {
    display: flex;
    min-width: 0;
    min-height: 48px;
    flex-direction: column;
    justify-content: center;
    padding: 8px 10px;
    border: 2px solid var(--border-color);
    background: var(--card-bg-color);
    color: var(--text-color);
    text-decoration: none;
    box-sizing: border-box;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

.footer-links a:hover,
.footer-links a:focus-visible {
    background: var(--text-color);
    color: var(--bg-color);
    transform: translate(-2px, -2px);
    box-shadow: 3px 3px 0 var(--border-color);
    outline: none;
}

.footer-links span {
    font-size: 0.58rem;
    font-weight: 800;
    opacity: 0.72;
}

.footer-links strong {
    max-width: 100%;
    font-size: 0.72rem;
    font-weight: 900;
    overflow-wrap: anywhere;
}

@keyframes footerStatusPulse {
    0%, 100% { opacity: 0.35; transform: scale(0.78); }
    50% { opacity: 1; transform: scale(1); }
}

@media (max-width: 600px) {
    .project-footer-top { align-items: flex-start; }
    .footer-project-status { padding: 6px 7px; }
    .footer-project-status small { display: none; }
    .footer-links { grid-template-columns: 1fr; }
    .footer-links a { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .footer-project-status > span { animation: none; opacity: 1; }
}

/* --- Language switcher and output-language notice --- */
html.i18n-pending body {
    visibility: hidden;
}

.app-header {
    position: relative;
}

.language-switcher {
    position: absolute;
    top: 50%;
    right: 0;
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border: 2px solid var(--border-color);
    background: var(--card-bg-color);
    color: var(--text-color);
    font: inherit;
    font-size: 0.68rem;
    font-weight: 950;
    line-height: 1;
    cursor: pointer;
    box-shadow: 3px 3px 0 var(--border-color);
    transform: translateY(-50%);
    transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

.language-switcher:hover,
.language-switcher:focus-visible {
    background: var(--text-color);
    color: var(--bg-color);
    transform: translate(2px, calc(-50% + 2px));
    box-shadow: 1px 1px 0 var(--border-color);
    outline: none;
}

.token-plan-header .language-switcher {
    right: auto;
    left: 0;
}

.language-support-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 18px;
    padding: 10px 12px;
    border: 2px solid var(--border-color);
    background: repeating-linear-gradient(-45deg, rgba(28, 24, 13, 0.07) 0 6px, transparent 6px 12px);
}

.language-support-notice strong {
    flex: none;
    padding: 2px 6px;
    background: var(--text-color);
    color: var(--bg-color);
    font-size: 0.64rem;
    font-weight: 950;
    white-space: nowrap;
}

.language-support-notice p {
    margin: 0;
    color: var(--secondary-text-color);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.5;
}

.control-icon[data-tooltip]::after,
.copy-button[data-tooltip]::after {
    width: max-content;
    max-width: min(260px, 72vw);
    white-space: normal;
    line-height: 1.35;
    text-align: center;
}

@media (max-width: 600px) {
    .app-header:not(.token-plan-header) {
        padding-right: 58px;
    }

    .language-support-notice {
        flex-direction: column;
        gap: 7px;
    }

    .token-plan-header .language-switcher {
        top: auto;
        right: auto;
        bottom: 12px;
        left: 12px;
        transform: none;
    }

    .token-plan-header .language-switcher:hover,
    .token-plan-header .language-switcher:focus-visible {
        transform: translate(2px, 2px);
    }

    .token-plan-header .back-home-button {
        right: 12px;
        bottom: 12px;
        left: auto;
        transform: none;
    }

    .token-plan-header .back-home-button:hover,
    .token-plan-header .back-home-button:focus-visible {
        transform: translate(2px, 2px);
    }
}