*{box-sizing:border-box}body{margin:0;background:#f4f6f8;color:#17212b;font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}.wrap{max-width:1200px;margin:auto;padding:0 22px}.hero{background:#101820;color:#fff;padding:48px 0 55px}.brand{font-size:13px;font-weight:800;letter-spacing:.12em;color:#7ed8ff}.brand span{color:#8d9ba7}.hero h1{font-size:clamp(36px,5vw,62px);line-height:1.03;max-width:900px;margin:24px 0 15px}.hero h1 span{color:#65d4a5}.hero p{max-width:800px;color:#cbd5dd;font-size:19px}.tabs{display:flex;gap:8px;margin:26px 0;flex-wrap:wrap}.tab{border:0;border-radius:9px;padding:12px 17px;background:#dfe5ea;font-weight:800;cursor:pointer}.tab.active{background:#17212b;color:#fff}.tab-content{display:none}.tab-content.active{display:block}.panel{background:#fff;border:1px solid #e0e5e9;border-radius:16px;padding:25px;margin-bottom:18px;box-shadow:0 8px 30px #17212b0b}.intro{margin-bottom:18px}.flow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:20px}.flow b{background:#edf2f5;padding:11px 14px;border-radius:8px}.flow i{font-size:21px}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:16px}.card{background:#fff;border:1px solid #e0e5e9;border-radius:14px;padding:19px;display:flex;flex-direction:column}.card>span{font-size:11px;font-weight:800;text-transform:uppercase;color:#657985}.card h3{margin:7px 0}.card p{color:#5b6973;flex:1}.card button{margin-top:15px;border:0;background:#e8f6f0;color:#115b45;padding:10px;border-radius:8px;font-weight:800;cursor:pointer}.lab-grid,.analysis-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.panel h2{margin-top:0}.panel label{display:block;font-weight:750;margin:15px 0}.panel input,.panel select,.panel textarea{width:100%;display:block;margin-top:7px;border:1px solid #cbd5dc;border-radius:9px;padding:11px 12px;font:inherit;background:#fff}.panel textarea{resize:vertical}.primary,.secondary,.ghost{border:0;border-radius:9px;padding:12px 18px;font-weight:850;cursor:pointer}.primary{background:#17212b;color:#fff}.secondary{background:#65d4a5;color:#10261e}.ghost{background:#e8edf0}.result{margin-top:18px;background:#101820;color:#eef7fa;border-radius:10px;padding:15px}.result pre{white-space:pre-wrap;word-break:break-word;font:600 17px ui-monospace,Consolas,monospace}.steps-panel{min-height:170px}.step-summary{display:flex;justify-content:space-between;background:#eef3f5;border-radius:9px;padding:12px;margin-bottom:10px}.step-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:7px}.step-grid div{background:#f4f6f8;border-radius:8px;padding:9px;text-align:center}.step-grid span{padding:0 5px}.step-grid small{display:block;color:#697782;font-size:10px;margin-top:4px}.brute{display:grid;grid-template-columns:80px 1fr;gap:10px;padding:8px 0;border-bottom:1px solid #e7ebed}.brute code{background:#f0f3f5;padding:4px 7px;border-radius:5px}.bars{margin-top:15px}.barrow{display:grid;grid-template-columns:28px 1fr 90px;gap:9px;align-items:center;margin:5px 0}.barrow>div{height:15px;background:#e9eef1;border-radius:8px;overflow:hidden}.barrow i{display:block;height:100%;background:#65bfa0}.barrow span{font-size:12px;color:#63727d}.lengths{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px}.lengths div{min-width:70px;background:#eef3f5;padding:10px;text-align:center;border-radius:8px}.lengths span{display:block;font-family:monospace}.challenge-box{background:#101820;color:#fff;border-radius:12px;padding:25px;margin:20px 0}.tag{color:#65d4a5;font-size:12px;font-weight:800}.challenge-box code{display:block;font-size:22px;margin-top:10px;word-break:break-all}.challenge-controls{display:flex;gap:8px;flex-wrap:wrap}.challenge-controls input{flex:1;min-width:220px;padding:12px;border:1px solid #ccd5dc;border-radius:9px}.success,.error{margin-top:15px;padding:12px;border-radius:8px}.success{background:#e7f7ef}.error{background:#fff0ee}.glossary{margin-top:25px}.gloss-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.gloss-grid div{background:#f4f6f8;padding:14px;border-radius:9px}.gloss-grid span{display:block;color:#62717b;font-size:14px;margin-top:4px}.muted{color:#687782}footer{background:#101820;color:#aab8c1;padding:25px 0;margin-top:35px}@media(max-width:800px){.lab-grid,.analysis-grid{grid-template-columns:1fr}.hero{padding-top:32px}.step-summary{display:block}.step-summary span{display:block;margin-top:5px}}