:root{--bg:#0d0f1c;--surface:#151833;--line:#2a2f5c;--text:#eceefb;--muted:#a3a9d1;--a:#6ee7d8;--b:#8b93ff;--c:#f472b6;--err:#ff8a8a;--ok:#6ee7b7;--r:14px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.65 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;min-height:100vh;
background-image:radial-gradient(900px 480px at 15% -10%,rgba(139,147,255,.22),transparent 60%),radial-gradient(700px 420px at 95% 0,rgba(244,114,182,.14),transparent 60%)}
a{color:var(--b)}a:hover{color:var(--a)}
:focus-visible{outline:2px solid var(--a);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.site-header,.site-footer{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;max-width:1000px;margin:0 auto;padding:1.25rem 1.25rem}
.site-header nav a,.site-footer nav a{margin-left:1.25rem;color:var(--muted);text-decoration:none}
.site-header nav a:hover,.site-footer nav a:hover{color:var(--text)}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:1.15rem;color:var(--text);text-decoration:none;letter-spacing:-.01em}
.logo{width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--a),var(--b) 55%,var(--c));position:relative}
.logo::after{content:"";position:absolute;left:10px;top:7px;border-left:9px solid var(--bg);border-top:6px solid transparent;border-bottom:6px solid transparent}
main{max-width:1000px;margin:0 auto;padding:0 1.25rem 3rem}
.hero{padding:3.5rem 0 2.5rem;text-align:left;max-width:820px}
h1{font-size:clamp(2.1rem,6vw,3.75rem);line-height:1.08;letter-spacing:-.03em;margin:0 0 1rem;font-weight:800;
background:linear-gradient(100deg,#fff 20%,var(--a) 60%,var(--b));-webkit-background-clip:text;background-clip:text;color:transparent;animation:rise .7s ease both}
.lead{color:var(--muted);font-size:1.15rem;max-width:60ch;margin:0 0 2rem;animation:rise .7s .1s ease both}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.analyze{display:flex;gap:.6rem;padding:.5rem;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 60px -25px rgba(139,147,255,.45);animation:rise .7s .2s ease both}
.analyze:focus-within{border-color:var(--b)}
.analyze input{flex:1;min-width:0;background:transparent;border:0;color:var(--text);font:inherit;padding:.85rem 1rem}
.analyze input:focus{outline:none}
.analyze input::placeholder{color:#6f76a8}
button{font:inherit;font-weight:600;cursor:pointer;border:0;border-radius:12px;padding:.85rem 1.6rem;color:#0d0f1c;background:linear-gradient(120deg,var(--a),var(--b));transition:transform .15s,opacity .15s}
button:hover{transform:translateY(-1px)}button:disabled{opacity:.6;cursor:progress;transform:none}
.form-error{color:var(--err);margin:.75rem .25rem 0}
.platforms{color:var(--muted);font-size:.9rem;margin-top:1.5rem;max-width:70ch}
.result{margin-top:1.5rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;animation:rise .4s ease both}
.result .body{display:grid;grid-template-columns:200px 1fr;gap:1.25rem;padding:1.25rem}
.result img.thumb{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;background:#0d0f1c}
.result .nothumb{aspect-ratio:16/9;border-radius:10px;background:linear-gradient(135deg,#1c2050,#0d0f1c);display:grid;place-items:center;color:var(--muted);font-size:.85rem}
.result h2{margin:0 0 .5rem;font-size:1.15rem;word-break:break-word}
.badges{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.75rem}
.badge{font-size:.8rem;padding:.15rem .7rem;border-radius:99px;border:1px solid var(--line);color:var(--muted)}
.badge.ok{color:var(--ok);border-color:rgba(110,231,183,.4)}.badge.warn{color:#fcd34d;border-color:rgba(252,211,77,.4)}
.result p{margin:.25rem 0;color:var(--muted);font-size:.95rem}
.result .preview{padding:0 1.25rem 1.25rem}
.result video,.result audio{width:100%;border-radius:10px;background:#000;max-height:420px}
.actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.9rem}
.btn{display:inline-block;text-decoration:none;font-weight:600;border-radius:12px;padding:.65rem 1.2rem;color:#0d0f1c;background:linear-gradient(120deg,var(--a),var(--b))}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
.result.error{border-color:rgba(255,138,138,.5);padding:1.1rem 1.25rem;color:var(--err)}
.loading{display:flex;align-items:center;gap:.75rem;padding:1.25rem;color:var(--muted)}
.spin{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--a);animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.section{padding:2.5rem 0;border-top:1px solid rgba(42,47,92,.6)}
.section h2{font-size:1.6rem;letter-spacing:-.02em;margin:0 0 1rem}
.steps{padding-left:1.2rem;max-width:70ch;color:var(--muted)}.steps li{margin-bottom:.6rem}.steps strong{color:var(--text)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}.cols h3{margin:0 0 .5rem}.cols ul{margin:0;padding-left:1.1rem;color:var(--muted)}
details{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:.9rem 1.1rem;margin-bottom:.6rem;max-width:760px}
summary{cursor:pointer;font-weight:600}details p{color:var(--muted);margin:.6rem 0 0}
.ad-slot{margin:1rem 0;min-height:90px}
.site-footer{border-top:1px solid rgba(42,47,92,.6);color:var(--muted);font-size:.9rem;padding-top:1.5rem;padding-bottom:2rem}
.doc{max-width:760px;margin:0 auto;padding:2rem 1.25rem 3rem}.doc h1{font-size:2.2rem;animation:none}.doc h2{margin-top:2rem}.doc p,.doc li{color:var(--muted)}
@media(max-width:700px){.analyze{flex-direction:column}.result .body{grid-template-columns:1fr}.cols{grid-template-columns:1fr}.hero{padding-top:2rem}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}