:root{--bg:#0b0d17;--p:#151a2e;--b:#2a3355;--a:#7c5cff;--a2:#00e5c3;--t:#e8ecff}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(1000px 500px at 80% -10%,#2a1f6b55,transparent),var(--bg);color:var(--t);font:14px/1.5 Inter,system-ui,sans-serif}
a{color:var(--a2);text-decoration:none}.top{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;border-bottom:1px solid var(--b);flex-wrap:wrap;gap:8px}
.logo{font-weight:800;font-size:18px;color:#fff}.logo span{color:var(--a2);font-weight:400;margin-left:4px}nav a{margin-left:16px;color:var(--t)}
.page{max-width:760px;margin:30px auto;padding:0 18px}.err{color:#ff7a90}footer{text-align:center;padding:24px;color:#8a93b8;border-top:1px solid var(--b);margin-top:30px}
.form{display:grid;gap:8px;margin:10px 0}input,select,textarea,button{font:inherit;color:var(--t);background:#0f1426;border:1px solid var(--b);border-radius:8px;padding:8px}
button{cursor:pointer;background:var(--p)}button:hover{border-color:var(--a2)}.ad{max-width:970px;margin:10px auto;text-align:center;min-height:0}
.hero{text-align:center;padding:18px 16px 6px}.hero h1{margin:0;font-size:clamp(22px,4vw,34px);background:linear-gradient(90deg,#fff,var(--a2));-webkit-background-clip:text;color:transparent}.hero p{margin:4px 0;color:#9aa4cf}
.app{display:grid;grid-template-columns:300px minmax(0,1fr) 320px;gap:14px;padding:14px;max-width:1500px;margin:auto}
.card{background:var(--p);border:1px solid var(--b);border-radius:14px;padding:14px}.card h3{margin:0 0 10px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--a2)}
.card label{display:block;margin:8px 0 2px;color:#9aa4cf;font-size:12px}.card input,.card select,.card textarea{width:100%}input[type=color]{padding:2px;height:34px}
textarea#text{height:260px;resize:vertical}.row{display:flex;gap:8px}.row>*{flex:1}
.stage{display:flex;flex-direction:column;align-items:center;gap:10px}.cv{background:#000;border-radius:12px;box-shadow:0 0 60px #7c5cff44;max-width:100%;max-height:68vh;cursor:pointer}
.ctl{display:flex;gap:8px;align-items:center;width:100%;max-width:560px}.ctl input[type=range]{flex:1;padding:0}
.export{background:linear-gradient(90deg,var(--a),var(--a2));color:#000;font-weight:800;border:0;padding:12px;font-size:15px;width:100%}
.bar{height:8px;background:#0f1426;border-radius:8px;overflow:hidden;margin-top:8px}.bar i{display:block;height:100%;width:0;background:var(--a2)}
.chips{display:flex;flex-wrap:wrap;gap:6px}.chips button{padding:5px 10px;border-radius:99px;font-size:12px}.chips .on{background:var(--a);border-color:var(--a)}
.help{max-width:900px;margin:10px auto;padding:0 16px;color:#9aa4cf}.help h2{color:#fff}
@media(max-width:1000px){.app{grid-template-columns:1fr}.stage{order:-1}}

nav{display:flex;flex-wrap:wrap}.ad{margin:12px auto;text-align:center;max-width:970px}.ad small{display:block;color:#6d759b;font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.fcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;text-align:left;max-width:1000px;margin:0 auto 16px;line-height:2}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:10px 0 20px}.tc{display:block;background:var(--p);border:1px solid var(--b);border-radius:12px;padding:14px;color:var(--t)}.tc:hover{border-color:var(--a2)}.tc small{color:#9aa4cf}
.art{line-height:1.8;font-size:16px}.art h2,.art h3{color:#fff}.art a{text-decoration:underline}.res{display:grid;gap:8px;margin-top:12px}.res div{display:flex;justify-content:space-between;background:#0f1426;border:1px solid var(--b);border-radius:10px;padding:12px;font-size:16px}.res b{color:var(--a2)}.note{font-size:12px;color:#8a93b8}