:root { color-scheme: dark; font-family: Arial, sans-serif; background: #101010; color: #f5f2ec; }
* { box-sizing: border-box; }
body { margin: 0; }
.shell { max-width: 720px; margin: 12vh auto; padding: 32px; }
.eyebrow { color: #b8a177; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }
h1 { font-size: clamp(2rem, 6vw, 4rem); margin: .25rem 0 1rem; }
p { line-height: 1.6; }
nav { display: flex; align-items: center; gap: 16px; margin-bottom: 48px; } nav span { margin-left: auto; color: #b8a177; } form { display: grid; gap: 14px; } nav form, .actions form { display: inline-flex; margin: 0; } label { display: grid; gap: 6px; } input { width: 100%; border: 1px solid #5b554b; border-radius: 4px; padding: 10px; background: #1c1c1c; color: inherit; } button { border: 0; border-radius: 4px; padding: 10px 14px; background: #b8a177; color: #17130e; cursor: pointer; font-weight: 700; } .danger { background: #d98780; } .card { margin-top: 24px; padding: 20px; border: 1px solid #38342d; border-radius: 8px; } .error { color: #ffaaa2; } .success { color: #a9d8a6; } table { width: 100%; border-collapse: collapse; } th, td { padding: 10px; border-bottom: 1px solid #38342d; text-align: left; vertical-align: top; } .actions { display: flex; flex-wrap: wrap; gap: 6px; }
.thumbnails { display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0; } .asset { display: grid; gap: 6px; width: 150px; } .asset form { display: block; } .asset-image-wrap { position: relative; width: 150px; height: 150px; } .thumbnails img { width: 150px; height: 150px; object-fit: cover; border-radius: 6px; border: 1px solid #5b554b; } .asset-delete { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; padding: 0; border-radius: 50%; background: rgba(20, 18, 15, .82); color: #f5f2ec; font-size: 1.25rem; line-height: 1; opacity: 0; pointer-events: none; } .asset-image-wrap:hover .asset-delete, .asset-image-wrap:focus-within .asset-delete { opacity: 1; pointer-events: auto; } .project-list { padding-left: 20px; } .project-list li { padding: 7px 0; } a { color: #e4c992; } small { color: #b8a177; }
select { width: 100%; border: 1px solid #5b554b; border-radius: 4px; padding: 10px; background: #1c1c1c; color: inherit; } .button-link { display: block; padding: 10px; border-radius: 4px; background: #b8a177; color: #17130e; text-align: center; font-weight: 700; text-decoration: none; }
textarea { width: 100%; min-height: 120px; border: 1px solid #5b554b; border-radius: 4px; padding: 10px; background: #1c1c1c; color: inherit; resize: vertical; } .hint { color: #b8a177; font-size: .9rem; } .previewable { cursor: pointer; } .generating { min-height: 150px; place-items: center; text-align: center; border: 1px solid #5b554b; border-radius: 6px; padding: 18px; color: #d9d1c2; } .spinner { width: 28px; height: 28px; border: 3px solid #514b42; border-top-color: #e4c992; border-radius: 50%; animation: spin .8s linear infinite; margin: 0 auto 12px; } @keyframes spin { to { transform: rotate(360deg); } } .lightbox { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 32px; background: rgba(0,0,0,.82); } .lightbox[hidden] { display: none; } .lightbox-content { display: grid; gap: 14px; max-width: min(92vw, 1600px); max-height: 88vh; } .lightbox img { max-width: 100%; max-height: 68vh; width: auto; height: auto; margin: auto; object-fit: contain; } .lightbox-prompt { width: min(720px, 100%); justify-self: center; padding: 14px; border: 1px solid #5b554b; border-radius: 6px; background: #191919; } .lightbox-prompt h3 { margin: 0 0 8px; } .lightbox-prompt p { max-height: 120px; margin: 0 0 12px; overflow: auto; white-space: pre-wrap; user-select: text; } .lightbox-close { position: fixed; top: 18px; right: 22px; padding: 4px 12px; font-size: 2rem; background: transparent; color: #fff; } .delete-project { margin-top: 28px; } .delete-project-panel { margin-top: 12px; padding: 20px; border: 1px solid #7e504d; border-radius: 8px; background: #211817; } .subtle-action { background: transparent; color: #b8a177; border: 1px solid #5b554b; } .inline-actions { display: flex; gap: 10px; flex-wrap: wrap; }
 .home-projects { margin-top: 24px; } .home-create { margin-top: 16px; } .home-create-panel { margin-top: 12px; padding: 16px; border: 1px solid #38342d; border-radius: 8px; } .project-list { margin-top: 14px; } .project-list-header, .project-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; } .project-list-header { padding: 0 0 8px; color: #b8a177; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid #38342d; } .project-list-header span:last-child, .project-row time { text-align: right; } .project-row { padding: 12px 0; border-bottom: 1px solid #38342d; } .project-name { display: grid; gap: 3px; min-width: 0; color: #e4c992; text-decoration: none; } .project-name small, .project-row time { color: #b8a177; font-size: .84rem; } .project-row time { white-space: nowrap; }
.casts { margin: 24px 0; } .add-cast { width: max-content; } .cast-card { margin-top: 10px; border: 1px solid #38342d; border-radius: 8px; } .cast-card summary { cursor: pointer; padding: 13px 16px; color: #e4c992; } .cast-content { padding: 0 16px 16px; } .cast-content > form { margin-top: 14px; }
.style-reference { margin: 18px 0 24px; } .style-reference h2 { margin-bottom: 10px; } .style-reference-add { width: max-content; } .style-reference-add summary { cursor: pointer; padding: 10px 14px; border-radius: 4px; background: #b8a177; color: #17130e; font-weight: 700; list-style: none; } .style-reference-add summary::-webkit-details-marker { display: none; } .style-reference-add form { margin-top: 12px; }
.creative-tabs { display: flex; gap: 8px; margin-top: 24px; border-bottom: 1px solid #38342d; } .creative-tab { background: transparent; color: #b8a177; border-radius: 4px 4px 0 0; } .creative-tab.is-active { background: #b8a177; color: #17130e; } .creative-panel[hidden] { display: none; } .motion { margin-top: 0; } .source-info { margin: 0; color: #b8a177; font-size: .88rem; } .source-info summary { cursor: pointer; width: max-content; } .source-info p { margin: 8px 0 0; } .video-results { display: grid; gap: 14px; } .video-asset { display: grid; gap: 8px; max-width: 420px; padding: 12px; border: 1px solid #5b554b; border-radius: 6px; } .video-asset video { width: 100%; max-height: 420px; background: #000; border-radius: 4px; } .video-processing { color: #d9d1c2; border-color: #b8a177; }
#video-detail-modal { display: block; overflow-y: auto; overscroll-behavior: contain; padding: 24px 24px calc(56px + env(safe-area-inset-bottom)); } #video-detail-modal[hidden] { display: none; } .video-detail-content { width: min(92vw, 960px); max-height: none; margin: 0 auto; } .video-detail-content video { display: block; width: 100%; height: min(48vh, 52vw); max-height: 48vh; margin: 0 auto; background: #000; border-radius: 6px; object-fit: contain; } .video-detail-meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 7px 16px; margin: 0 0 14px; } .video-detail-meta dt { color: #b8a177; } .video-detail-meta dd { margin: 0; overflow-wrap: anywhere; } #video-detail-prompt { max-height: none; overflow: visible; user-select: text; } .video-detail-actions { display: grid; gap: 14px; margin-top: 14px; } .video-detail-actions #copy-video-prompt { justify-self: start; } .lightbox.is-video-detail-source { z-index: 20; }
.ratio-selector { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; } .ratio-selector legend { padding: 0; margin-bottom: 4px; } .ratio-current { display: inline-flex; width: max-content; align-items: center; gap: 10px; background: #1c1c1c; color: #f5f2ec; border: 1px solid #5b554b; } .ratio-current:hover { border-color: #e4c992; background: #29261f; } .ratio-current .ratio-shape { max-width: 38px; max-height: 38px; } .ratio-options-panel { display: grid; gap: 16px; padding-top: 6px; } .ratio-options-panel[hidden] { display: none; } .ratio-group { display: grid; gap: 8px; } .ratio-group-title { color: #b8a177; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; } .ratio-options { display: flex; flex-wrap: wrap; gap: 8px; } .ratio-option { display: grid; grid-template-columns: 42px auto; align-items: center; gap: 8px; min-width: 92px; padding: 8px; border: 1px solid #5b554b; border-radius: 6px; background: #1c1c1c; cursor: pointer; } .ratio-option:hover { border-color: #e4c992; background: #29261f; } .ratio-option input { position: absolute; opacity: 0; pointer-events: none; } .ratio-option:has(input:checked) { border-color: #e4c992; background: #3a3326; box-shadow: inset 0 0 0 1px #e4c992; } .ratio-shape { justify-self: center; width: var(--shape-width); height: var(--shape-height); border: 2px solid #d9d1c2; border-radius: 2px; } .ratio-option:has(input:checked) .ratio-shape { border-color: #e4c992; }
@media (hover: none) { .asset-delete { opacity: 1; pointer-events: auto; } }
@media (max-width: 520px) { .project-list-header { display: none; } .project-row { grid-template-columns: 1fr; gap: 5px; } .project-row time { text-align: left; } }