:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;background:#f5f5ef;color:#071523}*{box-sizing:border-box}body{margin:0}main{max-width:980px;margin:auto;min-height:100vh;padding:30px 28px;display:flex;flex-direction:column}header,footer{display:flex;justify-content:space-between;align-items:center}header p,footer,.hero>p,.uploader p,.result p{color:#60706d}.brand{font-weight:900;font-size:23px;letter-spacing:-1.5px;text-decoration:none;color:#071523}.brand span{color:#0b9b76}.hero{margin:88px 0 34px;max-width:650px}.tag{font-size:11px;letter-spacing:1.6px;font-weight:800;color:#0b9b76}.hero h1{font-size:clamp(44px,8vw,80px);line-height:.93;letter-spacing:-5px;margin:15px 0 22px}.hero>p{font-size:18px;max-width:500px;line-height:1.55}.uploader,.result{background:#fff;border:1px solid #dce2dc;border-radius:22px;box-shadow:0 20px 50px #0b33200b;padding:42px;text-align:center}.uploader{border:2px dashed #a8c8bd}.uploader h2{margin:12px 0 4px}.drop-icon{margin:auto;border-radius:50%;display:grid;place-items:center;width:52px;height:52px;background:#e4f5ed;color:#0b9b76;font-size:27px}button{border:0;border-radius:10px;background:#087e61;color:#fff;padding:12px 19px;font-weight:750;font-size:15px;cursor:pointer;margin:10px 4px 0}button:disabled{opacity:.55}.secondary{background:#dcece5;color:#087e61}.text{color:#087e61;background:transparent}.result{display:flex;align-items:center;justify-content:center;gap:42px;text-align:left}.result h2{font-size:28px;margin:10px 0}.result img{width:210px;height:210px;border-radius:10px}.result a{display:block;color:#087e61;font-weight:700;margin-top:18px}.notice{min-height:24px;text-align:center;color:#087e61;font-weight:600}.error{color:#bd3c3c}footer{margin-top:auto;padding-top:60px;font-size:12px}@media(max-width:600px){main{padding:22px 16px}.hero{margin-top:60px}.hero h1{letter-spacing:-3px}.uploader,.result{padding:28px 20px}.result{gap:22px;flex-direction:column;text-align:center}.result img{width:190px;height:190px}footer{padding-top:40px;gap:10px;align-items:flex-start;flex-direction:column}}.review{margin:58px 0}.review h1{font-size:42px;letter-spacing:-2px;margin:8px 0}.review-head{display:flex;justify-content:space-between;gap:20px;align-items:end}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:13px;margin:28px 0 80px}.card{position:relative;display:flex;flex-direction:column;gap:5px;background:#fff;border:2px solid transparent;border-radius:12px;padding:8px;overflow:hidden;cursor:pointer}.card.chosen{border-color:#0b9b76}.card.invalid{opacity:.55}.card input{position:absolute;z-index:1;top:9px;left:9px;width:18px;height:18px;accent-color:#087e61}.card img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:7px;background:#e7ece8}.card strong{font-size:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.card small{color:#6d7d79;font-size:11px}.card em{font-size:10px;color:#a05c15;font-style:normal;font-weight:700}.card .bad{color:#b22e2e}.sticky{position:fixed;bottom:0;left:0;right:0;padding:15px max(28px,calc((100vw - 920px)/2));background:#071523;color:#fff;z-index:3}.uploads{display:grid;gap:10px;margin-top:28px}.uploads>div{display:grid;grid-template-columns:minmax(130px,1fr) 2fr 48px;gap:12px;align-items:center;background:#fff;padding:12px;border-radius:9px}.uploads span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.uploads b{font-size:12px;text-align:right}.uploads progress{width:100%;accent-color:#087e61}.pairing{display:grid;gap:4px;padding:12px;margin-top:22px;background:#e7f4ed;border-radius:9px;text-align:center}.pairing small{color:#527267;font-weight:700;letter-spacing:1px}.pairing strong{font-size:24px;letter-spacing:4px}@media(max-width:600px){.review{margin-top:36px}.review-head{display:block}.review h1{font-size:32px}.grid{grid-template-columns:repeat(2,1fr);gap:8px}.uploads>div{grid-template-columns:1fr 42px}.uploads progress{grid-column:1/3}.sticky{padding:10px 15px}.sticky button{margin:0}.result h1{font-size:30px}}.blocking{min-height:440px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.blocking h1{font-size:42px;letter-spacing:-2px;margin:12px 0}.blocking p{color:#60706d}.blocking progress{width:min(460px,100%);height:10px;accent-color:#087e61}.spinner{width:42px;height:42px;border:4px solid #d9ebe4;border-top-color:#087e61;border-radius:50%;animation:spin .8s linear infinite}.placeholder{width:100%;aspect-ratio:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;border-radius:7px;background:#fee9e8;color:#be3932;font-size:24px}.placeholder span{font-size:11px;font-weight:800}.card .duplicate{color:#756b36}.card .warning{position:relative;color:#bd3b35}.tooltip{display:none;position:absolute;z-index:4;left:0;bottom:18px;width:170px;padding:7px;border-radius:6px;background:#071523;color:#fff;font-size:11px;font-weight:500}.warning:hover .tooltip{display:block}.danger{background:#b93631}.blocking~.notice{display:none}@keyframes spin{to{transform:rotate(360deg)}}.card:has(.warning):after,.card:has(.bad):after{content:"⚠";position:absolute;z-index:2;top:9px;right:9px;width:25px;height:25px;display:grid;place-items:center;border-radius:50%;background:#c92f2a;color:#fff;font-size:16px;line-height:1;border:2px solid #fff;box-shadow:0 2px 7px #53110a99;pointer-events:none}.card:has(.warning) img{filter:brightness(.9)}.card.invalid .placeholder{font-size:38px}.card.invalid .placeholder span{font-size:12px}.lightbox{position:fixed;z-index:50;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#06121ae8;padding:28px;cursor:zoom-out}.lightbox img{max-width:min(1100px,94vw);max-height:82vh;object-fit:contain;box-shadow:0 18px 70px #000}.lightbox button{position:fixed;top:16px;right:18px;margin:0;padding:5px 13px;background:#fff;color:#071523;font-size:28px}.lightbox p{position:fixed;bottom:12px;color:#fff}body:has(.uploads) .notice{position:fixed;z-index:20;top:18px;left:50%;transform:translate(-50%);width:min(680px,calc(100% - 32px));min-height:0;margin:0;padding:13px 18px;border-radius:12px;background:#071523;color:#fff;text-align:center;box-shadow:0 12px 35px #07152355}.optimization-options{display:none}.upload-choice-modal{position:fixed;z-index:60;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:20px;background:#06121ab8}.upload-choice-modal section{position:relative;width:min(760px,100%);padding:28px;border-radius:20px;background:#f7faf7;color:#071523;box-shadow:0 28px 90px #0008}.upload-choice-modal section>span{font-size:11px;font-weight:800;letter-spacing:1.5px;color:#087e61}.upload-choice-modal h2{margin:8px 0;font-size:31px;letter-spacing:-1px}.upload-choice-modal p{margin:0;color:#60706d}.upload-choice-modal section>div{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;margin-top:23px}.upload-choice-modal [data-mode]{display:grid;gap:10px;min-height:170px;margin:0;padding:20px;text-align:left;color:#17332a;background:#fff;border:2px solid #cfddd6}.upload-choice-modal [data-mode]:hover{border-color:#087e61;background:#eaf8f1}.upload-choice-modal b{font-size:18px}.upload-choice-modal small{margin-left:5px;color:#087e61}.upload-choice-modal em{font-size:13px;font-style:normal;color:#60706d;line-height:1.4}.upload-choice-modal strong{font-size:20px}.upload-choice-modal i{display:block;margin-top:4px;color:#087e61;font-size:13px;font-style:normal}.upload-choice-modal .close{position:absolute;top:12px;right:14px;margin:0;padding:0 9px;background:transparent;color:#526863;font-size:27px}@media(max-width:600px){.upload-choice-modal section{padding:22px}.upload-choice-modal section>div{grid-template-columns:1fr}.upload-choice-modal [data-mode]{min-height:auto}.upload-choice-modal h2{font-size:26px}}.optimization-screen,.upload-overview{position:fixed;z-index:55;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#f5f8f5;color:#071523;padding:28px}.optimization-screen>span,.upload-overview>span{font-size:11px;font-weight:800;letter-spacing:1.6px;color:#087e61}.optimization-screen h1,.upload-overview h1{margin:13px 0 8px;font-size:clamp(30px,5vw,52px);letter-spacing:-2px}.optimization-screen p,.upload-overview p{color:#60706d;font-size:16px}.upload-overview progress{width:min(520px,90vw);height:12px;accent-color:#087e61}.review:has(.uploads)>.tag,.review:has(.uploads)>h1,.review:has(.uploads)>p,.review:has(.uploads)>.danger,.review:has(.uploads)>.uploads{display:none}
