:root{--ink: #060913;--ink-2: #0b1020;--panel: rgba(17, 24, 48, .55);--text: #e8ecf8;--muted: rgba(232, 236, 248, .55);--line: rgba(98, 124, 255, .18);--line-strong: rgba(98, 124, 255, .38);--blue: #2e5bff;--blue-hot: #2447ff;--blue-glow: rgba(46, 91, 255, .45);--cyan: #38e1ff;--font-display: "Jura", sans-serif;--font-body: "IBM Plex Sans", system-ui, sans-serif}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--ink);color:var(--text);font-family:var(--font-body);font-weight:400;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}.bg-grid{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;background-image:linear-gradient(rgba(98,124,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(98,124,255,.05) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,black 30%,transparent 100%);mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,black 30%,transparent 100%)}.bg-glow{position:fixed;top:-240px;left:50%;transform:translate(-50%);width:900px;height:520px;pointer-events:none;z-index:0;background:radial-gradient(ellipse at center,rgba(46,91,255,.22) 0%,transparent 65%)}.shell{position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:0 32px}.top{display:flex;justify-content:space-between;align-items:baseline;padding:28px 0 20px;border-bottom:1px solid var(--line);animation:fadeDown .7s ease both}.brand{font-family:var(--font-display);font-weight:700;letter-spacing:.3em;font-size:.95rem}.brand em{font-style:normal;color:var(--blue);text-shadow:0 0 18px var(--blue-glow)}.top-note{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}.logout-btn{background:none;border:none;font-family:var(--font-body);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);cursor:pointer;margin-left:14px;text-decoration:underline;text-underline-offset:3px}.logout-btn:hover{color:var(--text)}.hero{padding:76px 0 56px;max-width:800px}.kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:.74rem;letter-spacing:.3em;text-transform:uppercase;color:var(--cyan);font-weight:600;animation:fadeUp .7s .1s ease both}.kicker:before{content:"//";color:var(--blue)}.hero h1{font-family:var(--font-display);font-weight:700;font-size:clamp(2.2rem,5.6vw,4rem);line-height:1.1;margin:20px 0 22px;letter-spacing:.01em;animation:fadeUp .7s .2s ease both}.hero h1 .accent{color:var(--blue);text-shadow:0 0 30px var(--blue-glow)}.hero .sub{font-size:1.02rem;font-weight:300;color:var(--muted);max-width:56ch;animation:fadeUp .7s .3s ease both}.stage{display:grid;grid-template-columns:1fr 1fr;gap:24px;animation:fadeUp .7s .4s ease both}.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:border-color .3s ease,box-shadow .3s ease}.panel:hover{border-color:var(--line-strong);box-shadow:0 0 40px -18px var(--blue-glow)}.panel-head{display:flex;align-items:baseline;gap:12px;margin-bottom:16px}.step-no{font-family:var(--font-display);font-weight:700;font-size:1.5rem;color:var(--blue);text-shadow:0 0 16px var(--blue-glow)}.step-label{font-family:var(--font-display);font-size:.8rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase}.drop{position:relative;border:1.5px dashed var(--line-strong);border-radius:10px;background:#06091380;aspect-ratio:4 / 3;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;transition:border-color .25s ease,box-shadow .25s ease}.drop:hover,.drop:focus-visible{border-color:var(--blue);box-shadow:inset 0 0 30px -12px var(--blue-glow);outline:none}.drop.dragover{border-color:var(--cyan);box-shadow:inset 0 0 40px -10px #38e1ff66}.drop.filled{border-style:solid}.drop-empty{text-align:center;padding:24px;color:var(--muted)}.drop-empty .glyph{display:block;font-size:2rem;margin-bottom:10px;color:var(--blue);text-shadow:0 0 18px var(--blue-glow)}.drop-empty strong{display:block;font-weight:500;color:var(--text);font-size:.94rem;margin-bottom:4px}.drop-empty span{font-size:.78rem;font-weight:300}.drop img.preview{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.clear-btn{background:none;border:none;font-family:var(--font-body);font-size:.72rem;letter-spacing:.08em;color:var(--muted);cursor:pointer;margin-top:10px;text-decoration:underline;text-underline-offset:3px}.clear-btn:hover{color:var(--cyan)}.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}.chip{font-family:var(--font-body);font-size:.82rem;font-weight:500;padding:8px 14px;border-radius:999px;border:1px solid var(--line-strong);background:transparent;color:var(--muted);cursor:pointer;transition:all .18s ease}.chip:hover{border-color:var(--blue);color:var(--text)}.chip.active{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 0 22px -4px var(--blue-glow)}.field{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}.field>span{font-family:var(--font-display);font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase}.field>span small{font-family:var(--font-body);font-weight:300;letter-spacing:.04em;text-transform:none;color:var(--muted)}.field input{background:#06091399;border:1px solid var(--line-strong);border-radius:8px;font-family:var(--font-body);font-size:.95rem;font-weight:300;color:var(--text);padding:11px 14px;transition:border-color .25s ease,box-shadow .25s ease}.field input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px #2e5bff2e}.field input::placeholder{color:#e8ecf84d}.ratio-row{display:flex;flex-direction:column;gap:8px}.ratio-label{font-family:var(--font-display);font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase}.ratios{display:flex;gap:8px;flex-wrap:wrap}.ratio{font-family:var(--font-display);font-weight:600;font-size:.88rem;padding:9px 14px;border-radius:8px;border:1px solid var(--line-strong);background:transparent;color:var(--muted);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:1px;transition:all .18s ease}.ratio small{font-family:var(--font-body);font-weight:300;font-size:.62rem;letter-spacing:.06em}.ratio:hover{border-color:var(--blue);color:var(--text)}.ratio.active{background:#2e5bff2e;border-color:var(--blue);color:var(--text);box-shadow:0 0 18px -6px var(--blue-glow)}.cta-row{display:flex;justify-content:center;padding:40px 0 70px;animation:fadeUp .7s .5s ease both}.cta{font-family:var(--font-display);font-weight:700;font-size:.95rem;letter-spacing:.12em;text-transform:uppercase;background:linear-gradient(135deg,var(--blue) 0%,var(--blue-hot) 100%);color:#fff;border:none;border-radius:10px;padding:16px 34px;cursor:pointer;box-shadow:0 0 30px -6px var(--blue-glow),inset 0 1px #ffffff2e;transition:transform .18s ease,box-shadow .18s ease}.cta.big{padding:19px 48px;font-size:1.02rem}.cta:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 0 46px -4px var(--blue-glow),inset 0 1px #ffffff2e}.cta:active:not(:disabled){transform:translateY(0)}.cta:disabled{background:#627cff1f;color:var(--muted);box-shadow:none;cursor:not-allowed}.result{padding:0 0 90px;scroll-margin-top:30px}.frame{border:1px solid var(--line-strong);border-radius:16px;padding:clamp(18px,4vw,44px);position:relative;background:var(--panel);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 0 60px -24px var(--blue-glow);animation:fadeUp .6s ease both}.result-title{font-family:var(--font-display);font-weight:700;font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:.04em;margin-bottom:6px}.result-sub{color:var(--muted);font-weight:300;font-size:.88rem;margin-bottom:24px}.viewer{border:1px solid var(--line-strong);border-radius:10px;overflow:hidden;background:var(--ink-2)}.viewer img{display:block;width:100%;height:auto}.loading{text-align:center;padding:70px 20px}.spinner{width:54px;height:54px;margin:0 auto 26px;border-radius:50%;border:2px solid transparent;border-top-color:var(--blue);border-right-color:var(--cyan);animation:spin 1.1s linear infinite;box-shadow:0 0 24px -6px var(--blue-glow)}.phrase{font-family:var(--font-display);font-weight:600;font-size:1.2rem;letter-spacing:.06em;min-height:1.6em;animation:pulseSoft 2.6s ease-in-out infinite}.loading-sub{margin-top:10px;font-size:.8rem;font-weight:300;color:var(--muted)}.error-box{border:1px solid rgba(255,90,90,.5);border-radius:10px;background:#ff5a5a14;color:#ffb3b3;padding:20px 24px;font-size:.92rem}.error-box strong{display:block;margin-bottom:4px;letter-spacing:.1em;text-transform:uppercase;font-size:.72rem}.actions{display:flex;gap:14px;margin-top:24px;flex-wrap:wrap}.btn{font-family:var(--font-body);font-weight:500;font-size:.84rem;letter-spacing:.04em;padding:12px 22px;border-radius:8px;background:transparent;color:var(--text);border:1px solid var(--line-strong);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:all .18s ease}.btn:hover{border-color:var(--blue);box-shadow:0 0 18px -6px var(--blue-glow)}.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}.btn.primary:hover{background:var(--blue-hot)}.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;position:relative}.login-card{position:relative;z-index:1;width:100%;max-width:420px;background:var(--panel);border:1px solid var(--line-strong);border-radius:16px;padding:clamp(28px,5vw,44px);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 70px -22px var(--blue-glow);animation:fadeUp .6s ease both}.login-title{font-family:var(--font-display);font-weight:700;font-size:1.6rem;letter-spacing:.04em;margin:22px 0 6px}.login-sub{color:var(--muted);font-weight:300;font-size:.92rem;margin-bottom:28px}.login-card form{display:flex;flex-direction:column}.login-card .cta{margin-top:6px}.login-err{color:#ffb3b3;font-size:.85rem;margin:-8px 0 14px}footer{border-top:1px solid var(--line);padding:26px 0 40px;display:flex;justify-content:space-between;gap:24px;font-size:.74rem;font-weight:300;color:var(--muted)}footer .priv{max-width:62ch}footer .sig{white-space:nowrap}footer .sig b{color:var(--blue);font-weight:600}@keyframes fadeUp{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeDown{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulseSoft{0%,to{opacity:1}50%{opacity:.45}}@media(max-width:820px){.shell{padding:0 20px}.hero{padding:48px 0 40px;text-align:center;margin:0 auto}.hero h1{font-size:clamp(1.8rem,7.5vw,2.5rem)}.hero .sub{margin:0 auto}.stage{grid-template-columns:1fr}.panel-head,.chips,.ratios{justify-content:center}.field,.ratio-row,.field input{text-align:center}.cta-row{padding:32px 0 56px}.result-title,.result-sub{text-align:center}.actions{justify-content:center}footer{flex-direction:column;text-align:center}footer .sig{white-space:normal}}