:root{--green:#64766e;--dark:#35453f;--amber:#d99645;--ink:#272b29;--soft:#f4f5f4}
*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--soft);color:var(--ink);line-height:1.55}
header{background:#2c2b2b;color:#fff;padding:18px 4%;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}header a{color:#fff;text-decoration:none;font-weight:700}
main{width:min(1050px,92%);margin:auto;padding:30px 0 60px}.hero,.panel,.q,.result,.topic{background:#fff;border-radius:18px;box-shadow:0 8px 25px #24352e12}
.hero{text-align:center;padding:42px 24px;border-top:5px solid var(--amber);background:linear-gradient(135deg,#dfe4e1,#f5eee5);margin-bottom:25px}.hero h1{font-size:clamp(2rem,5vw,3.6rem);color:var(--dark);line-height:1.08}
.panel{padding:22px}.topics{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:15px;margin:24px 0}.topic{padding:20px}.topic h3{color:var(--dark);margin-top:0}
.codebox{max-width:520px;margin:28px auto;text-align:center}.codebox input{width:100%;padding:13px;border:1px solid #bbc2be;border-radius:10px;font-size:1rem;margin:8px 0 12px}
button,.button{background:var(--green);color:#fff;border:0;border-radius:999px;padding:12px 20px;font-weight:800;text-decoration:none;cursor:pointer;display:inline-block}
.note{background:#f3e8d8;border-left:4px solid var(--amber);padding:12px;border-radius:10px}.step{display:none}.step.active{display:block}.q{padding:18px;margin:14px 0}.q h3{margin-top:0}
label{display:block;padding:7px}textarea{width:100%;min-height:105px;border:1px solid #bbc2be;border-radius:10px;padding:11px;font:inherit}.actions{display:flex;justify-content:space-between;margin-top:20px}.secondary{background:#777}
.progress{height:12px;background:#dfe3df;border-radius:999px;overflow:hidden}.progress span,.bar span{height:100%;display:block;background:var(--green)}.result{padding:18px;margin:15px 0}.line{display:flex;justify-content:space-between;gap:12px}.bar{height:22px;background:#e8ecea;border-radius:999px;overflow:hidden;margin-bottom:10px}
footer{text-align:center;padding:28px;background:#e3e6e4;color:#59605d}@media(max-width:650px){.hero{padding:30px 15px}.panel{padding:15px}}