.tutorial-body{background:radial-gradient(circle at 20% 4%,#302216,#0c0d0f 42%);min-height:100vh}.tutorial-shell{max-width:1160px;margin:auto;padding:120px 24px 90px}.tutorial-hero{display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:center;padding:45px;background:linear-gradient(110deg,#211b16,#17191c);border:1px solid #4e3b29;box-shadow:12px 12px #050505}.tutorial-hero h1{font-size:clamp(48px,8vw,80px);margin:8px 0;color:#ee9441;text-shadow:5px 5px #5b2c13}.tutorial-hero p:last-child{color:#999;font:14px/1.7 Arial,sans-serif}.tutorial-progress{padding:25px;background:#111214;border:1px solid #59432d}.tutorial-progress small,.tutorial-progress b,.tutorial-progress span{display:block}.tutorial-progress small{font:9px Arial,sans-serif;color:#888;letter-spacing:2px}.tutorial-progress b{font-size:48px;color:#ed9949;margin:10px 0}.tutorial-progress>div{height:12px;padding:3px;background:#292b2f}.tutorial-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#a95a24,#f19b48);transition:width .5s}.tutorial-progress span{margin-top:10px;color:#8d755e;font-size:10px}.next-objective{margin-top:25px;padding:25px 30px;background:linear-gradient(90deg,#392315,#1a1a1b);border-left:5px solid #ef9340}.next-objective small{color:#cf7c37;letter-spacing:2px;font:9px Arial,sans-serif}.next-objective h2{margin:8px 0;font-size:26px}.next-objective p{margin:0;color:#aaa;font:12px Arial,sans-serif}.chapter-nav{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;margin-top:28px}.chapter-nav button{padding:12px 5px;background:#1d1f22;border:1px solid #383a3e;color:#6f7276;font:10px 'Pixelify Sans',sans-serif}.chapter-nav button.complete{border-color:#4d9657;color:#70c97b}.chapter-nav button.active{background:#e98e3b;color:#17100a;border-color:#e98e3b}.tutorial-chapters{margin-top:15px}.chapter{display:none;grid-template-columns:250px 1fr;background:#17191c;border:1px solid #34363a;min-height:480px}.chapter.active{display:grid}.chapter-side{padding:30px;background:#131517;border-right:1px solid #34363a}.chapter-number{font-size:65px;color:#3c3e42}.chapter-side .status{display:block;margin-top:30px;padding:10px;text-align:center;background:#2b2020;color:#d2776c;font-size:9px}.chapter.complete .chapter-side .status{background:#172a1a;color:#71ca7c}.chapter-main{padding:38px}.chapter-main>small{color:#d97e34;font:10px Arial,sans-serif;letter-spacing:2px}.chapter-main h2{font-size:34px;margin:8px 0 15px}.chapter-main>.intro{color:#aaa;font:14px/1.7 Arial,sans-serif}.lesson-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:25px 0}.lesson-grid article{padding:17px;background:#222428}.lesson-grid b{display:block;color:#eaa05e;margin-bottom:7px}.lesson-grid p{margin:0;color:#929599;font:11px/1.6 Arial,sans-serif}.chapter-action{display:inline-block;padding:14px 20px;background:#e78b38;color:#17100a;text-decoration:none;font-size:11px}.chapter-tip{margin-top:20px;padding:14px;border-left:3px solid #555;color:#8e9195;font:11px/1.6 Arial,sans-serif}.chapter-controls{display:flex;justify-content:space-between;margin-top:15px}.chapter-controls button{padding:12px 18px;background:#202226;border:1px solid #3f4246;color:#bbb;font:10px 'Pixelify Sans',sans-serif}.quick-rules{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:35px}.quick-rules article{padding:19px;background:#17191c;border-top:3px solid #b8662b}.quick-rules b{color:#e79449}.quick-rules p{color:#8f9296;font:11px/1.6 Arial,sans-serif}@media(max-width:820px){.tutorial-hero{grid-template-columns:1fr}.chapter-nav{grid-template-columns:repeat(5,1fr)}.chapter{grid-template-columns:1fr}.chapter-side{border-right:0;border-bottom:1px solid #34363a}.chapter-number{font-size:38px}.chapter-side .status{display:inline-block;margin:0 0 0 20px}.quick-rules{grid-template-columns:1fr 1fr}}@media(max-width:550px){.tutorial-shell{padding:95px 12px 60px}.tutorial-hero{padding:28px 20px}.chapter-nav{grid-template-columns:repeat(2,1fr)}.chapter-main{padding:25px 18px}.lesson-grid,.quick-rules{grid-template-columns:1fr}}
