:root{--primary:#7661d3;--primary-hover:#604ac1;--bg-dark:#f7f8fc;--bg-gray:#fff;--bg-gray-light:#f1effa;--text-primary:#262539;--text-secondary:#858496;--border-color:#e8e7ef;--success:#3c9a82;--error:#cf5667}
html{scroll-behavior:smooth;scroll-padding-top:100px}body{background:radial-gradient(ellipse at 50% 12%,#eeebfc70,transparent 45%),#f7f8fc;font-size:15px;-webkit-font-smoothing:antialiased}button,a,input{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{font-family:inherit}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid #a99ae8;outline-offset:5px}header{background:#f7f8fce8;border-color:#eeedf4;backdrop-filter:blur(18px)}header .container{max-width:1120px;padding:21px 30px}.logo{width:38px;height:38px;object-fit:contain;border-radius:12px}.logo-btn{gap:10px}.logo-btn:hover{transform:none}.brand{text-align:left}.brand strong{font-size:21px;letter-spacing:-1px;color:#302b45}.brand strong span{font-weight:400;margin-left:4px;color:#776a9d}.brand small{display:block;font-size:8px;letter-spacing:1.7px;color:#96909f;margin-top:1px}.nav-desktop{display:flex;gap:30px}.nav-link{font-size:13px;font-weight:500}.nav-desktop .nav-link:first-child{color:var(--primary);background:#ebe7f7;border-radius:9px;padding:7px 15px}.menu-btn{display:none}.main-content{padding:0 0 30px}.main-content>.container{max-width:1040px;padding:0 28px}.upload-container{max-width:680px;padding:62px 0 0;margin:auto;text-align:center}.eyebrow{display:flex;justify-content:center;align-items:center;gap:8px;font-size:10px;letter-spacing:2px;font-weight:650;color:#8e80b9;margin-bottom:19px}.eyebrow span{width:6px;height:6px;background:#9a87de;border-radius:50%}.main-title{font-size:58px;letter-spacing:-2.7px;line-height:1.12;font-weight:650;margin-bottom:20px;color:#2b293c}.main-title em{font-style:normal;color:#8270bd;font-weight:500}.subtitle{font-size:15px;color:#93909f;line-height:1.85;margin-bottom:36px}.workspace-label{display:flex;justify-content:space-between;align-items:center;padding:19px 23px;background:#fff;border:1px solid var(--border-color);border-bottom:0;border-radius:20px 20px 0 0;text-align:left;font-size:13px;font-weight:600}.quality-badge{font-size:9px;letter-spacing:1px;color:#8b79ba;background:#f2eefa;padding:5px 9px;border-radius:5px}.drop-zone{border:1.5px dashed #d4cce9;border-radius:14px;background:#faf9fd;padding:32px 20px 24px;margin:0 16px;position:relative;box-shadow:0 0 0 16px white;transition:background .2s,border-color .2s,transform .2s}.drop-zone:hover,.drop-zone.drag-over{background:#f0ecfb;border-color:#9076d9;transform:translateY(-2px)}.upload-icon{width:46px;height:46px;padding:11px;box-sizing:content-box;color:#8e7ac8;background:#eee8fa;border-radius:20px;margin-bottom:13px;stroke-width:1.3}.drop-zone h3{font-size:18px;letter-spacing:-.4px;color:#393348;margin-bottom:6px}.drop-zone p{font-size:12px;color:#9b95a7}.choose-photo{display:inline-flex;background:#7b65c7;color:white;border-radius:11px;min-height:46px;align-items:center;padding:0 28px;font-size:13px;font-weight:600;margin-top:21px;box-shadow:0 5px 12px #7b65c726}.drop-zone .file-info{font-size:10px;margin-top:17px;color:#aaa4b3}.upload-note{display:flex;justify-content:center;gap:28px;background:white;border:1px solid var(--border-color);border-top:0;border-radius:0 0 20px 20px;padding:29px 14px 17px;font-size:10px;color:#a09aa9}.features-section{margin-top:58px;padding:0}.section-title{font-size:23px;letter-spacing:-.7px;font-weight:600;margin-bottom:26px;color:#383346}.features-grid{gap:14px;grid-template-columns:repeat(4,1fr)}.feature-card{background:#fff;border:1px solid #ebe8f1;border-radius:16px;padding:23px 20px;text-align:left;box-shadow:0 3px 10px #43366a02}.feature-card:hover{transform:translateY(-3px);border-color:#d0c4ea}.feature-icon{font-size:22px;color:#9380be;margin-bottom:14px}.feature-card h3{font-size:13px;margin-bottom:7px;color:#494254}.feature-card p{font-size:11px;line-height:1.8;color:#9c95a5}.how-it-works{margin-top:55px;padding:25px 0}.step-card{background:transparent;padding:10px}.step-number{background:#eee9f8;color:#8c78bb;font-size:15px;width:34px;height:34px}.step-card h3{font-size:14px}.step-card p{font-size:12px;color:#98919f}.stats-grid{display:none}.faq-section{background:#f1f0f6;border-top:1px solid #e8e6ef;padding:45px 0}.faq-section .container{max-width:780px}.faq-item{background:#fff;border-color:#e6e2ee;border-radius:12px;margin-bottom:10px;overflow:hidden}.faq-question{font-size:13px;padding:18px 20px;color:#645b72;min-height:54px}.faq-answer{font-size:12px;color:#8b8198}.studio-footer{display:flex;justify-content:space-between;max-width:1040px;margin:auto;padding:28px;font-size:11px;color:#a59dad}.studio-footer strong{color:#887a9d}.processing-container,.result-container,.error-container{background:white;border:1px solid var(--border-color);border-radius:24px;margin:40px auto;padding:30px;box-shadow:0 14px 50px #53406f06}.processing-title,.result-title,.error-title{color:#3a324a}.stage{background:#faf9fd;border-color:#eeebf5;border-radius:12px}.stage.active{background:#f1edfb;border-color:#cfc1eb}.stage-title{color:#554961}.progress-bar{background:#eeeaf5}.progress-fill{background:linear-gradient(90deg,#a38bdc,#7761c8);transition:width .6s ease}.btn{min-height:48px;border-radius:12px;font-size:13px}.btn-secondary{background:#f0edf6;color:#7f6d9b;border:1px solid #e2dbea}.btn-accent{background:#ede7fa;color:#8066b5}.view-toggle{background:#f0edf6;border-radius:12px}.image-view{border-radius:15px;overflow:hidden}.step.active{animation:enter .35s ease both}.bottom-nav{display:none}#toast{position:fixed;bottom:95px;left:50%;transform:translate(-50%,15px);background:#393047;color:white;border-radius:14px;padding:14px 22px;font-size:13px;max-width:90%;opacity:0;pointer-events:none;transition:.2s;z-index:2000}#toast.visible{opacity:1;transform:translate(-50%,0)}@keyframes enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:769px){.features-section .section-title{text-align:center}.how-it-works .section-title{text-align:center}}
@media(max-width:768px){body{padding-bottom:78px}.main-content>.container{padding:0 20px}header .container{padding:15px 20px}.nav-desktop{display:none}.menu-btn{display:flex;color:#81718f;background:white;border:1px solid #ebe7ef;border-radius:11px;padding:8px}.nav-desktop.open{display:flex;position:absolute;top:74px;right:20px;background:white;padding:20px;border:1px solid #e9e2f1;border-radius:16px;box-shadow:0 10px 30px #35234812;flex-direction:column;gap:18px}.upload-container{padding-top:35px}.eyebrow{font-size:8px;letter-spacing:1.6px}.main-title{font-size:42px;letter-spacing:-1.8px}.subtitle{font-size:13px;margin-bottom:28px}.desktop-break{display:none}.workspace-label{padding:17px;font-size:12px}.quality-badge{font-size:8px}.drop-zone{padding:25px 12px 20px;margin:0 12px;box-shadow:0 0 0 12px white}.drop-zone h3{font-size:16px}.upload-note{gap:14px;font-size:8px;padding:24px 8px 15px}.features-section{margin-top:34px}.section-title{font-size:21px;margin-bottom:20px}.features-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.feature-card{padding:19px 16px}.feature-card p{font-size:11px}.how-it-works{margin-top:20px}.steps-grid{grid-template-columns:1fr}.step-card{display:grid;grid-template-columns:36px 1fr;text-align:left;column-gap:14px;padding:12px 0}.step-number{grid-row:span 2;margin:0}.step-card h3{margin:0}.step-card p{margin:0}.faq-section{padding:30px 8px}.studio-footer{flex-direction:column;gap:7px;padding:25px 20px}.bottom-nav{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-around;padding:9px 20px max(10px,env(safe-area-inset-bottom));background:#ffffffed;backdrop-filter:blur(20px);border-top:1px solid #eae6f1;z-index:1100}.bottom-nav button,.bottom-nav a{border:0;background:none;color:#aaa0b6;text-decoration:none;font-size:10px;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:66px;padding:2px 12px}.bottom-nav span{font-size:21px;line-height:26px}.bottom-nav .active{color:#8066bc}.processing-container,.result-container,.error-container{margin:24px auto;padding:22px 16px}.result-actions{flex-direction:column}.result-actions .btn{width:100%;justify-content:center}.brand small{font-size:7px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.main-title{background:none;-webkit-text-fill-color:currentColor;color:#2b293c}.main-title em{color:#8270bd}
/* Midnight Studio */
:root{color-scheme:dark;--primary:#748cff;--primary-hover:#8b9fff;--bg-dark:#0b0d12;--bg-gray:#14171f;--bg-gray-light:#1d2230;--text-primary:#f0f2f8;--text-secondary:#8a92a7;--border-color:#252b39;--success:#70d7b1;--error:#fb8190}
body{background:radial-gradient(ellipse at 50% 0,#1c285535,transparent 55%),#0b0d12;color:#f0f2f8}header{background:#0b0d12df;border-color:#1d222e}header .container{padding-top:18px;padding-bottom:18px}.brand strong{color:#eef1fc}.brand strong span{color:#9da6bd}.brand small{color:#646d84}.logo{padding:3px}.nav-link{color:#8993aa}.nav-desktop .nav-link:first-child{background:#1b243d;color:#a4b2ff}.menu-btn{background:#161b26;border-color:#2a3040;color:#bec7df}.nav-desktop.open{background:#161b26;border-color:#2a3040}.main-title{color:#f4f5fa;-webkit-text-fill-color:currentColor;font-size:60px;font-weight:600;letter-spacing:-2.6px}.main-title em{color:#889dff}.eyebrow{color:#8291b4}.eyebrow span{background:#8299ff;box-shadow:0 0 12px #7892ff70}.subtitle{color:#7e889e}.upload-container{padding-top:38px}.workspace-label{background:#141821;border-color:#282e3c;color:#d4dbeb}.quality-badge{background:#212c48;color:#9db0ff}.drop-zone{background:#10141d;border-color:#35405b;box-shadow:0 0 0 16px #141821}.drop-zone:hover,.drop-zone.drag-over{background:#192238;border-color:#849aff}.upload-icon{color:#9caeff;background:#1e2945;box-shadow:0 5px 24px #05070d40}.drop-zone h3{color:#e0e5f2;font-weight:500}.drop-zone p{color:#76819b}.choose-photo{background:#7790ff;color:#090e21;box-shadow:0 6px 24px #607dff18}.drop-zone .file-info{color:#59667f}.upload-note{background:#141821;border-color:#282e3c;color:#73809a}.section-title{color:#e0e5f1}.feature-card{background:#11151d;border-color:#222938}.feature-card:hover{border-color:#485779;background:#151b27}.feature-icon{color:#829aff}.feature-card h3{color:#c5cee2}.feature-card p{color:#707c95}.step-number{background:#1c2742;color:#9db0ff}.step-card h3{color:#bac6dd}.step-card p{color:#6f7b92}.faq-section{background:#0e1118;border-color:#1c2331}.faq-item{background:#141923;border-color:#242c3b}.faq-question{color:#bac5db}.faq-answer{color:#8491aa}.studio-footer{color:#535f77}.studio-footer strong{color:#8f9cb7}.bottom-nav{background:#10151fef;border-color:#283042}.bottom-nav button,.bottom-nav a{color:#66738f}.bottom-nav .active{color:#9bafff}.processing-container,.result-container,.error-container{background:#11161f;border-color:#293244;box-shadow:0 20px 70px #0003}.processing-title,.result-title,.error-title{color:#e2e9f8}.stage{background:#151c28;border-color:#2b3447}.stage.active{background:#1b2843;border-color:#637ec5}.stage.completed{background:#142821;border-color:#284e40}.stage-title{color:#d0dbed}.stage-description{color:#7c8ba5}.progress-bar{background:#273045}.progress-fill{background:linear-gradient(90deg,#647ff0,#9aafff)}.btn-primary{background:#7c95ff;color:#0a1024;border:0;font-weight:650}.btn-primary:hover{background:#9aafff}.btn-secondary{background:#1a2232;border-color:#303c53;color:#9dabca}.btn-accent{background:#1d2945;color:#a2b6ff}.view-toggle{background:#0b1019;padding:5px;border:1px solid #29334a}.toggle-btn{color:#8290ab;border-radius:8px}.toggle-btn.active{background:#253452;color:#c4d1ff}.error-tips{background:#191f2d;border-color:#343e54}.tips-title{color:#a7b3cd}.flow-steps{display:flex;align-items:center;justify-content:center;gap:15px;margin:30px auto 0;font-size:11px;color:#515e78}.flow-steps span{display:flex;align-items:center;gap:7px}.flow-steps b{display:grid;place-items:center;border:1px solid #2b3447;border-radius:50%;width:23px;height:23px;font-size:10px;font-weight:500}.flow-steps i{width:40px;height:1px;background:#263047}.flow-steps .current{color:#b7c6ff}.flow-steps .current b{background:#243559;border-color:#657dca}.flow-steps .done{color:#72c7ab}.flow-steps .done b{border-color:#396b5c;background:#19312b}.preview{background:#101620;border:1px solid #303c54;border-radius:18px;padding:18px;margin-top:26px;animation:enter .3s ease}.preview img{width:100%;height:230px;object-fit:contain;border-radius:10px;background:#090d14}.selection-details{display:flex;flex-direction:column;gap:5px;padding:16px 0;text-align:left}.selection-details strong{color:#d0d9ec;font-size:13px;overflow-wrap:anywhere}.selection-details span{font-size:11px;color:#7e8ca8}.selection-actions{display:flex;gap:12px}.selection-actions button{flex:1;justify-content:center}.processing-photo{height:210px;background:#0b1018;border-radius:15px;overflow:hidden;position:relative;margin-bottom:25px}.processing-photo img{width:100%;height:100%;object-fit:contain;opacity:.7}.processing-photo>span{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font-size:8px;letter-spacing:1.5px;white-space:nowrap;background:#0d142bdc;color:#a5b9ff;padding:7px 14px;border-radius:20px}.scan-line{position:absolute;top:0;left:0;right:0;height:2px;background:#98adff;box-shadow:0 0 30px 7px #748cff50;animation:scan 3s ease-in-out infinite alternate}.processing-header .processing-icon{display:none}.processing-title{font-size:25px}.cancel-link{display:block;border:0;background:transparent;color:#7989aa;text-decoration:underline;text-underline-offset:4px;margin:12px auto 20px;font-size:12px;cursor:pointer}.result-container{max-width:900px}.success-icon{display:none}.result-title{font-size:28px}.result-subtitle{font-size:13px;color:#7c8ba6}.result-actions{flex-direction:row;justify-content:center}.compare-container{height:min(58vh,580px);min-height:260px;max-height:none;background:#090d14;isolation:isolate}.compare-img,.compare-overlay .compare-img{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:contain}.compare-overlay{width:100%;height:100%;will-change:clip-path}.compare-slider{margin:0;touch-action:pan-y}.compare-slider:focus-visible{opacity:.08;outline:3px solid #91a8ff}.slider-line{width:2px;background:#d0dcff;box-shadow:0 0 12px #0005;will-change:left}.slider-line::before,.slider-line::after{display:none}.slider-line span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:43px;height:43px;display:grid;place-items:center;background:#e0e8ff;color:#25304d;border-radius:50%;border:3px solid #fff;box-shadow:0 4px 20px #0006;font-size:18px;font-weight:600;white-space:nowrap}.compare-labels{color:#9eafce;font-size:10px;letter-spacing:1px;text-transform:uppercase}.compare-hint{text-align:center;font-size:10px;color:#657592;padding-top:13px}.image-container{background:#090d14}.image-container img{max-height:58vh}.image-view.active{animation:enter .2s ease}.error-message{color:#b9a0aa}body[data-step="processing"] .features-section,body[data-step="processing"] .how-it-works,body[data-step="processing"] .faq-section,body[data-step="result"] .features-section,body[data-step="result"] .how-it-works,body[data-step="result"] .faq-section,body[data-step="error"] .features-section,body[data-step="error"] .how-it-works{display:none}@keyframes scan{to{top:100%}}
@media(max-width:768px){.main-title{font-size:43px}.upload-container{padding-top:28px}.flow-steps{margin-top:22px;gap:9px;font-size:9px}.flow-steps i{width:15px}.flow-steps span{gap:5px}.drop-zone{box-shadow:0 0 0 12px #141821}.result-actions{flex-direction:column}.compare-container{height:390px;min-height:220px}.compare-hint{font-size:9px}.preview img{height:200px}.selection-actions .btn{font-size:11px;padding:12px}.processing-photo{height:180px}.processing-title{font-size:22px}.brand small{color:#66738d}}
/* A single editor surface, with compact status rather than stacked wizard cards. */
.hidden,.drop-zone.hidden{display:none!important}.ui-icon{display:inline-block;vertical-align:middle;flex-shrink:0}.workspace-label>span,.upload-note>span{display:inline-flex;align-items:center;gap:7px}.workspace-label .ui-icon{width:15px;height:15px;color:#9ca9bd}.upload-note .ui-icon{width:13px;height:13px}.choose-photo{gap:8px;background:#e5eaf4;color:#141b29;box-shadow:none;border-radius:8px;font-weight:600}.choose-photo .ui-icon{width:16px;height:16px}.main-title{font-size:46px;line-height:1.16;letter-spacing:-1.7px}.main-title em{color:#96a3bc}.eyebrow{font-size:10px;letter-spacing:1.7px;color:#6b7890}.subtitle{font-size:14px}.upload-container{padding-top:52px;max-width:680px}.workspace-label{border-radius:14px 14px 0 0}.drop-zone{border-radius:8px;transform:none}.drop-zone:hover{transform:none}.upload-note{border-radius:0 0 14px 14px}.upload-icon{background:#1c2432;color:#a1b3d5;border-radius:14px;width:30px;height:30px;padding:13px}.feature-card:hover{box-shadow:none}.btn{border-radius:8px;gap:8px}.btn-primary{background:#dce5f6;color:#152037}.btn-primary:hover{background:#f1f5ff}.btn:disabled{opacity:.55;cursor:wait}.preview{margin:0;padding:16px 16px 0;border-radius:0;border:1px solid #282e3c;border-top:0;border-bottom:0;background:#141821;box-shadow:none}.preview img{height:min(48vh,420px);max-height:none;object-fit:contain;width:100%;border-radius:8px;background:#090d14}.selection-details{padding:16px 0}.selection-details strong{font-size:12px;font-weight:500;color:#bdc9df}.selection-details span{color:#64728b}.selection-actions{border-top:1px solid #282e3c;padding-top:16px}.selection-actions .btn-secondary{flex:0 0 auto}.selection-actions .btn-primary{flex:1}body[data-selected="true"] .upload-container>.main-title,body[data-selected="true"] .upload-container>.subtitle,body[data-selected="true"] .upload-container>.eyebrow,body[data-selected="true"] .features-section,body[data-selected="true"] .how-it-works,body[data-selected="true"] .faq-section{display:none}body[data-selected="true"] .upload-container{padding-top:28px}.processing-container{max-width:680px;display:flex;flex-direction:column;padding:18px;border-radius:14px}.processing-photo{height:330px;margin-bottom:23px;border-radius:9px}.processing-photo img{opacity:1}.processing-shade{position:absolute;inset:0;background:linear-gradient(transparent 40%,#080d1ad9)}.loading-chip{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;background:#151e30e8;border:1px solid #3c4a65;color:#e0e7f6;padding:10px 16px;font-size:12px;border-radius:30px;white-space:nowrap;backdrop-filter:blur(10px)}.loading-ring{width:15px;height:15px;border:2px solid #53627b;border-top-color:#d4e0ff;border-radius:50%;animation:spin .8s linear infinite}.processing-title{display:none}.processing-header{margin:0 0 14px;text-align:left;padding:0 7px}.processing-status{font-size:12px;color:#a5b2c9;line-height:1.6}.progress-section{order:1;margin:0 7px 18px;display:flex;gap:14px;align-items:center}.progress-bar{height:3px;margin:0;flex:1}.progress-fill{box-shadow:none;background:#93a7d6}.progress-text{font-size:10px;color:#7e8daa;font-variant-numeric:tabular-nums}.processing-stages{order:2;display:flex;flex-direction:row;gap:0;justify-content:space-between;margin:0 7px;padding:0;border:0}.processing-stages .stage{display:flex;gap:7px;align-items:center;border:0!important;box-shadow:none!important;background:none!important;padding:0!important;border-radius:0;transform:none!important;opacity:1;font-size:10px;color:#4c5b73;transition:color .2s}.processing-stages .stage::before{content:'';position:static;width:5px;height:5px;border-radius:50%;background:#364158;box-shadow:none}.processing-stages .stage.active{color:#c5d3ef}.processing-stages .stage.active::before{background:#9bb3ea;animation:statusPulse 1.8s ease infinite}.processing-stages .stage.completed{color:#7f9b96}.processing-stages .stage.completed::before{background:#7db6a4}.processing-footnote{order:3;text-align:center;font-size:10px;color:#4e5e79;margin:25px 0 0}.cancel-link{order:4;font-size:11px;text-decoration:none;border:1px solid #2b3549;border-radius:7px;margin:14px auto 0;padding:8px 16px;min-height:36px}.cancel-link:hover{border-color:#647596;color:#b3c2df}.result-container{border-radius:14px}.result-title{font-size:23px;font-weight:550;letter-spacing:-.5px}.view-toggle{border-radius:9px}.toggle-btn.active{background:#28364e}.feature-icon svg{width:23px;height:23px;color:#8a9cbf}.bottom-nav span{display:grid;place-items:center;height:26px}.bottom-nav .ui-icon{width:21px;height:21px}@keyframes statusPulse{50%{opacity:.3}}
@media(max-width:768px){.upload-container{padding-top:32px}.main-title{font-size:35px;letter-spacing:-1.2px}.subtitle{font-size:12px}.processing-photo{height:300px}.processing-container{padding:12px}.processing-stages .stage{font-size:9px}.preview{padding:12px 12px 0}.preview img{height:350px}.workspace-label{padding:16px}.upload-note{font-size:8px}.selection-actions .btn{font-size:12px}.processing-status{font-size:11px}.selection-details strong{font-size:11px}.result-title{font-size:21px}}