:root{--ink:#0d1114;--muted:#5a6775;--line:#c9d4e0;--paper:#eef3fa;--card:#fff;--blue:#5f8fc7;--serif:Georgia,'Times New Roman',serif;--sans:Arial,Helvetica,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:15px var(--sans)}.page-shell{max-width:1050px;margin:auto;padding:25px 28px 36px}.topbar{align-items:center;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;padding-bottom:21px}.wordmark{color:var(--ink);font-size:20px;font-weight:700;letter-spacing:-1px;text-decoration:none}.wordmark span{color:#5f8fc7}.topbar p,footer{color:var(--muted);font-size:11px;letter-spacing:.08em;margin:0;text-transform:uppercase}.intro{padding:72px 0 49px}.eyebrow{color:#5f8fc7;font-size:11px;font-weight:bold;letter-spacing:.14em;margin:0 0 17px;text-transform:uppercase}.intro h1{font-size:clamp(43px,7vw,76px);letter-spacing:-.07em;line-height:.91;margin:0;max-width:720px}.intro em{color:#81857c;font-family:var(--serif);font-weight:400;letter-spacing:-.06em}.lede{color:var(--muted);font-size:15px;line-height:1.6;margin:26px 0 0;max-width:390px}.steps{border-top:1px solid var(--ink);display:grid;grid-template-columns:repeat(2,1fr)}.step-card{background:var(--card);border-bottom:1px solid var(--line);min-height:340px;padding:27px 28px 28px}.step-card:nth-child(odd){border-right:1px solid var(--line)}.step-heading{align-items:center;display:flex;gap:13px}.step-number{color:#5f8fc7;font-size:11px;font-weight:bold;letter-spacing:.1em}.step-card h2{font-size:18px;letter-spacing:-.03em;margin:0}.step-copy{color:var(--muted);font-size:13px;line-height:1.5;margin:17px 0 23px;max-width:390px}.dropzone{align-items:center;border:1px dashed #a8b8c8;cursor:pointer;display:flex;flex-direction:column;justify-content:center;min-height:216px;padding:20px;position:relative;text-align:center;transition:.2s}.dropzone:hover,.dropzone.dragging{background:#eaf1fb;border-color:#5f8fc7}.dropzone input{display:none}.upload-icon{align-items:center;background:var(--blue);border-radius:50%;display:flex;font-size:22px;height:42px;justify-content:center;margin-bottom:13px;width:42px}.dropzone strong{font-size:14px}.dropzone>span:not(.upload-icon){color:var(--muted);font-size:11px;margin-top:7px}.dropzone img{display:none;max-height:170px;max-width:100%;object-fit:contain}.dropzone.has-image .upload-icon,.dropzone.has-image strong,.dropzone.has-image>span:not(.upload-icon){display:none}.dropzone.has-image img{display:block}label{color:var(--muted);display:block;font-size:11px;font-weight:bold;letter-spacing:.05em;text-transform:uppercase}select,textarea{background:#fafbf8;border:1px solid var(--line);border-radius:0;color:var(--ink);font:inherit;margin-top:8px;padding:11px;width:100%}textarea{resize:vertical}.prompt-field{margin-top:18px}.field-grid{display:grid;gap:12px;grid-template-columns:1fr 1fr}.button{border:0;cursor:pointer;font:700 12px var(--sans);letter-spacing:.02em;margin-top:19px;padding:13px 15px;text-align:left;width:100%}.button span{float:right;font-size:16px;line-height:10px}.button-dark{background:var(--ink);color:#fff}.button-accent{background:var(--blue);color:var(--ink)}.button:disabled{cursor:not-allowed;opacity:.4}.status{color:#5f8fc7;font-size:11px;min-height:14px;margin:11px 0 0}.recommend-row{align-items:center;background:#eaf1fb;border:1px solid #b8cfe6;display:flex;gap:10px;margin-top:18px;padding:12px}.recommend-row input{accent-color:#5f8fc7}.recommend-row span{flex:1}.recommend-row strong,.recommend-row small{display:block}.recommend-row small{font-size:10px;font-weight:normal;letter-spacing:0;margin-top:4px;text-transform:none}.recommend-row b{color:#5f8fc7;font-size:9px;text-transform:uppercase}.advanced-settings{border-top:1px solid var(--line);margin-top:18px;padding-top:18px}.advanced-heading{align-items:baseline;display:flex;justify-content:space-between;margin-bottom:16px}.advanced-heading strong{font-size:12px}.advanced-heading span{color:var(--muted);font-size:10px}.text-field{margin-top:14px}.detected-color{align-items:center;display:grid;font-size:11px;gap:10px;grid-template-columns:22px 1fr;margin-top:18px}.detected-color span:nth-child(2){color:var(--muted)}.detected-color strong{color:var(--ink);margin-left:5px}.detected-color small{color:var(--muted);font-size:10px;grid-column:2}#detected-swatch{border:1px solid var(--line);display:block;height:22px;width:22px}.color-controls{display:grid;gap:18px;grid-template-columns:1fr 1fr;margin:16px 0 20px}.color-picker{align-items:center;border:1px solid var(--line);display:flex;gap:10px;padding:7px 9px}.color-picker input{border:0;height:28px;padding:0;width:28px}.color-picker strong{color:var(--ink);font-size:10px;margin-left:auto}.range-field output{color:var(--ink);float:right;font-size:11px}input[type=range]{accent-color:#5f8fc7;margin-top:18px;width:100%}.reel-preview{background:repeating-conic-gradient(#f0f2ec 0 25%,#fff 0 50%) 50%/16px 16px;display:flex;gap:4px;min-height:155px;overflow:hidden;padding:12px}.reel-preview img{height:100%;min-width:0;object-fit:contain;width:calc((100% - 20px)/6)}.reel-empty{align-self:center;color:var(--muted);font-size:11px;margin:auto}.reel-controls{align-items:center;display:flex;justify-content:space-between;margin-top:14px}.reel-controls span{color:var(--muted);font-size:11px}footer{display:flex;justify-content:space-between;padding-top:25px}@media(max-width:700px){.page-shell{padding:18px 16px 28px}.topbar p{font-size:9px}.intro{padding:55px 0 38px}.steps{display:block}.step-card{border-right:0!important;min-height:0;padding:24px 20px}.color-controls{grid-template-columns:1fr}.reel-preview{min-height:120px}}
.workspace{background:var(--card);margin:12vh auto 0;max-width:560px;padding:28px}.advanced-toggle{background:transparent;border:0;border-top:1px solid var(--line);color:var(--muted);cursor:pointer;font:700 11px var(--sans);letter-spacing:.05em;margin-top:18px;padding:15px 0 0;text-align:left;text-transform:uppercase;width:100%}.advanced-toggle span{color:var(--ink);float:right;font-size:16px;line-height:10px}.result-card{margin:28px auto 0;max-width:560px}.workspace+.result-card[hidden]{display:none}@media(max-width:700px){.workspace{margin-top:8vh;padding:20px}}
.logo-scene{position:relative;margin:28px auto 0;max-width:300px;overflow:hidden}.logo{display:block;height:140px;margin:0 auto;position:relative;top:5px;width:140px;z-index:1}.scrolling-ground{bottom:4px;left:0;overflow:hidden;position:absolute;width:100%}.ground-svg{animation:scroll-ground 8s linear infinite;display:block;height:12px;width:200%}@keyframes scroll-ground{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}
.emo-quote{color:var(--muted);font:italic 14px var(--serif);margin:16px 0 0;text-align:center}.badges{display:flex;justify-content:center;gap:10px;margin-top:14px}.badge{align-items:center;border-radius:4px;color:#fff;display:inline-flex;font:600 11px var(--sans);gap:6px;letter-spacing:.04em;padding:5px 10px;text-transform:uppercase}.badge-discord{background:#8da0e8}.badge-telegram{background:#7ec8e8}
.main-layout{display:flex;justify-content:center;margin-top:12vh;position:relative}
.gallery-column{position:absolute;left:0;top:59px;width:190px;flex-shrink:0}
.gallery-title{color:var(--muted);font:600 11px var(--sans);letter-spacing:.1em;margin:0 0 12px;text-transform:uppercase}
.gallery-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.gallery-empty{color:var(--muted);font-size:12px;margin:0;text-align:center}
.gallery-thumb{background:var(--card);border:2px solid transparent;border-radius:6px;cursor:pointer;overflow:hidden;transition:.2s}
.gallery-thumb:hover,.gallery-thumb.active{border-color:#5f8fc7}
.gallery-thumb img,.gallery-thumb video{display:block;aspect-ratio:1;object-fit:cover;width:100%}
.gallery-thumb-label{font-size:10px;padding:4px 6px;text-align:center;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.workspace-column{flex:0 0 560px;min-width:0}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:1000;cursor:pointer}
.modal-overlay[hidden]{display:none}
 .modal-layout{align-items:center;display:flex;gap:24px;max-width:94vw;max-height:86vh}
 .modal-content{max-width:calc(94vw - 250px);max-height:86vh;border-radius:8px;overflow:hidden}
 .modal-content video,.modal-content img{display:block;max-width:100%;max-height:86vh;object-fit:contain}
.modal-content .gif-wrap{background-image:linear-gradient(45deg,#ccc 25%,transparent 25%,transparent 75%,#ccc 75%),linear-gradient(45deg,#ccc 25%,transparent 25%,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,8px 8px;background-color:#fff;display:inline-block;line-height:0}
.modal-content .gif-wrap img{max-width:90vw;max-height:85vh}
 .modal-close{position:fixed;top:20px;right:24px;background:none;border:none;color:#fff;font-size:28px;cursor:pointer;z-index:1001}
 .modal-side{background:rgba(255,255,255,.96);border-radius:8px;color:var(--ink);min-width:220px;padding:18px}
 .modal-info h3{font-size:14px;margin:0 0 14px}
 .modal-info-row{border-top:1px solid var(--line);display:flex;flex-direction:column;gap:3px;padding:8px 0}
 .modal-info-row span{color:var(--muted);font-size:10px;letter-spacing:.06em;text-transform:uppercase}
 .modal-info-row strong{font-size:12px;overflow-wrap:anywhere}
 .modal-actions{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin-top:14px}
 .modal-actions .status{color:var(--muted);font-size:12px}
.modal-tabs{position:fixed;top:20px;left:50%;transform:translateX(-50%);display:flex;gap:0;z-index:1001;border-radius:6px;overflow:hidden;border:1px solid rgba(255,255,255,.3)}
.modal-tab{background:rgba(255,255,255,.15);border:none;color:#fff;padding:6px 16px;font:600 12px var(--sans);cursor:pointer;letter-spacing:.04em;transition:.2s}
.modal-tab.active{background:rgba(255,255,255,.35)}
.modal-tab:hover:not(.active){background:rgba(255,255,255,.25)}
.pp-overlay{position:fixed;inset:0;background:rgba(13,17,20,.95);z-index:1002;display:flex;flex-direction:column;align-items:center;padding:24px;overflow-y:auto}
.pp-overlay[hidden]{display:none}
.pp-header{text-align:center;margin-bottom:20px}
.pp-header h3{color:#fff;font-size:18px;margin:0 0 12px}
.pp-color-row{display:flex;gap:20px;justify-content:center;align-items:center;margin-bottom:12px}
.pp-color-pick input[type="color"]{width:32px;height:32px;border:2px solid rgba(255,255,255,.3);border-radius:4px;cursor:pointer;background:none;padding:0}
.pp-color-pick span{color:rgba(255,255,255,.7);font-size:12px;margin-left:6px}
.pp-color-pick strong{color:#fff;font-size:12px;margin-left:4px}
.pp-tol-pick{color:rgba(255,255,255,.7);font-size:12px;display:flex;align-items:center;gap:6px}
.pp-tol-pick output{color:#fff;min-width:30px}
.pp-tol-pick input[type="range"]{width:80px}
.pp-sub{color:rgba(255,255,255,.6);font-size:13px;margin:0 0 12px}
.pp-progress{width:300px;height:4px;background:rgba(255,255,255,.15);border-radius:2px;overflow:hidden;margin:0 auto}
.pp-progress-fill{height:100%;background:#5f8fc7;border-radius:2px;transition:width .15s;width:0}
.pp-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;max-width:700px;width:100%}
.pp-cell{position:relative;aspect-ratio:1;border-radius:6px;overflow:hidden;background:#1a2028;border:2px solid transparent;transition:border-color .3s}
.pp-cell.done{border-color:#4caf50}
.pp-cell canvas{display:block;width:100%;height:100%;object-fit:cover}
.pp-check{position:absolute;bottom:4px;right:4px;width:20px;height:20px;background:#4caf50;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700;opacity:0;transition:opacity .3s}
.pp-cell.done .pp-check{opacity:1}
 .pp-footer{margin-top:20px}
 .frame-overlay{align-items:center;background:rgba(13,17,20,.95);display:flex;inset:0;justify-content:center;position:fixed;z-index:1004}
 .frame-overlay[hidden]{display:none}
 .frame-overlay img{background-image:linear-gradient(45deg,#ccc 25%,transparent 25%,transparent 75%,#ccc 75%),linear-gradient(45deg,#ccc 25%,transparent 25%,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,8px 8px;background-color:#fff;max-height:85vh;max-width:90vw;object-fit:contain}
.loading-bar{margin-top:16px;padding:14px 16px;border:1px solid var(--line);border-radius:6px;background:var(--paper)}
.loading-phases{display:flex;gap:20px;margin-bottom:10px}
.loading-phase{align-items:center;color:var(--muted);display:flex;font-size:12px;gap:6px}
.loading-phase.active{color:var(--ink);font-weight:600}
.loading-phase.done{color:#5f8fc7}
.phase-dot{background:var(--line);border-radius:50%;display:inline-block;height:8px;width:8px}
.loading-phase.active .phase-dot{background:#5f8fc7;box-shadow:0 0 0 3px rgba(95,143,199,.2)}
.loading-phase.done .phase-dot{background:#5f8fc7}
.phase-time{color:var(--muted);font-weight:400}
 .loading-track{background:var(--line);border-radius:3px;height:4px;position:relative}
 .loading-fill{background:#5f8fc7;border-radius:3px;height:100%;transition:width .3s;width:0}
 .loading-average-marker{background:var(--ink);height:10px;left:90%;position:absolute;top:-3px;width:1px}
 .loading-average-label{color:var(--muted);font-size:9px;position:absolute;right:0;top:8px}
 .loading-estimate{color:var(--muted);font-size:11px;margin:8px 0 0}
 .export-options{display:flex;flex-wrap:wrap;gap:8px}
 .reel-preview .gif-wrap{background-image:linear-gradient(45deg,#d9d9d9 25%,transparent 25%,transparent 75%,#d9d9d9 75%),linear-gradient(45deg,#d9d9d9 25%,transparent 25%,transparent 75%,#d9d9d9 75%);background-size:16px 16px;background-position:0 0,8px 8px;background-color:#fff;display:inline-block;line-height:0;max-width:100%}
 .reel-preview .gif-wrap img{display:block;max-height:300px;max-width:100%;object-fit:contain}
 @media(max-width:700px){.modal-layout{flex-direction:column;max-height:90vh;overflow-y:auto}.modal-content{max-width:90vw}.modal-side{min-width:0;width:min(90vw,360px)} }
@media(max-width:860px){.gallery-column{position:static;width:100%;margin-top:16px}.gallery-grid{grid-template-columns:1fr}.main-layout{flex-direction:column;align-items:center}.workspace-column{width:100%}}