#driving-lesson{padding:0;border:1px solid #8a9476;border-radius:18px;background:#18251f;color:#f6eed5;width:min(420px,calc(100% - 24px));max-height:calc(100dvh - 24px);box-shadow:0 20px 80px #000a;overflow:auto}
#driving-lesson::backdrop{background:#07100de6;backdrop-filter:blur(5px)}
.lesson-card{padding:20px 22px 17px}.lesson-card header{display:flex;align-items:center;justify-content:space-between;gap:8px}.lesson-card header span{font:700 11px Arial;letter-spacing:1.8px;color:#d8c68f}.lesson-card header button{background:#2a3a30;border:1px solid #5e6c59;color:#f6eed5;border-radius:50%;width:40px;height:40px;font:28px Arial;flex-shrink:0}
.lesson-steps{display:flex;gap:6px;margin:14px 0 20px}.lesson-steps i{height:4px;flex:1;background:#465444;border-radius:3px}.lesson-steps .done{background:#e5c986}.lesson-copy small{font:700 11px Arial;letter-spacing:1px;color:#aebda3}.lesson-copy h2{font:600 30px/1.12 Oswald,sans-serif;margin:9px 0 12px;color:#fff2cf}.lesson-copy p{font:16px/1.45 Arial,sans-serif;color:#e3e7d8;margin:0;min-height:70px}
.lesson-demo{margin-top:14px;border:1px solid #53634b;border-radius:12px;overflow:hidden;background:#101b16;position:relative}.lesson-road{height:130px;display:grid;place-items:center;position:relative;overflow:hidden;background:linear-gradient(100deg,#344437,#1e2924)}.lesson-road:before,.lesson-road:after{content:'';position:absolute;left:12%;right:12%;height:2px;background:#b5ac82;top:18px;opacity:.5}.lesson-road:after{top:auto;bottom:18px}.lesson-road>i{position:absolute;inset:55% 0 auto;height:3px;background:repeating-linear-gradient(90deg,#a7a283 0 26px,transparent 26px 65px);animation:lesson-road 1s linear infinite}.lesson-road img{width:195px;height:125px;object-fit:contain;position:relative;filter:drop-shadow(0 10px 8px #0008)}
.lesson-tach{padding:18px 16px 12px}.lesson-tach>div:first-child{display:flex;justify-content:space-between;color:#f0dfaa;font:700 12px Arial}.lesson-track{height:22px;background:linear-gradient(90deg,#52614c 0 70%,#b4e084 70% 88%,#b66642 88%);position:relative;margin:18px 0 8px;border-radius:4px}.lesson-track em{position:absolute;top:-7px;bottom:-7px;width:5px;background:#fff7db;border:1px solid #36432e;box-shadow:0 0 0 2px #ffffff20;transform:translateX(-50%);border-radius:2px}.lesson-zone-label{text-align:right;padding-right:9%;font:700 11px Arial;color:#c7efa0}
.lesson-lights{display:none;padding:15px;align-items:center;justify-content:center;gap:12px;background:#0b130f}.lesson-lights i{width:21px;height:21px;border:2px solid #6e7260;border-radius:50%;background:#2a3228}.lesson-lights .lit{background:#db7b53}.lesson-lights[data-go=true] i{background:#b4e084;box-shadow:0 0 12px #b4e06577}.lesson-lights b{font:700 17px Arial;min-width:46px;color:#e6efce}
#driving-lesson[data-step="0"] .lesson-tach,#driving-lesson[data-step="2"] .lesson-tach,#driving-lesson[data-mode="drift"] .lesson-tach{display:none}#driving-lesson[data-mode="drag-manual"][data-step="0"] .lesson-lights{display:flex}#driving-lesson[data-step="1"]:not([data-mode="drift"]) .lesson-road{height:92px}#driving-lesson[data-step="1"]:not([data-mode="drift"]) .lesson-road img{width:160px;height:96px}
.lesson-steering[hidden]{display:none}.lesson-steering{margin:12px 0 0}.lesson-steering label{display:flex;justify-content:space-between;font:700 10px Arial;color:#d3dcca}.lesson-steering input{width:100%;height:48px;margin:5px 0 0;appearance:none;background:linear-gradient(90deg,#976447 0 9%,#b3d384 9% 23%,#465544 23% 77%,#b3d384 77% 91%,#976447 91%);border-radius:9px;touch-action:pan-y}.lesson-steering input::-webkit-slider-thumb{appearance:none;background:#ead197;border:2px solid #fff0c6;border-radius:10px;width:44px;height:48px}.lesson-steering input::-moz-range-thumb{background:#ead197;border:2px solid #fff0c6;border-radius:10px;width:40px;height:44px}
.lesson-response{font:700 14px/1.3 Arial;min-height:36px;margin:13px 0 8px;color:#f3b398}.lesson-response[data-success=true]{color:#ceefa1}.lesson-action{width:100%;min-height:54px;border:1px solid #fff0b3;border-radius:9px;background:#e2c784;color:#17211a;font:600 20px Oswald,sans-serif;letter-spacing:.5px}.lesson-action:disabled{background:#40503d;color:#bec9b3;border-color:#667359}.lesson-card footer{font:11px/1.4 Arial;text-align:center;color:#afbea5;margin-top:13px}.lesson-card button:focus-visible,.lesson-card input:focus-visible{outline:3px solid #f7e7b6;outline-offset:3px}
@keyframes lesson-road{to{transform:translateX(-65px)}}
@media(max-height:700px){.lesson-card{padding:12px 18px}.lesson-steps{margin:8px 0 12px}.lesson-copy h2{font-size:27px}.lesson-copy p{font-size:15px;min-height:62px}.lesson-road{height:106px}.lesson-road img{height:106px}.lesson-response{margin:9px 0 5px;min-height:32px}.lesson-card footer{margin-top:9px}}
@media(prefers-reduced-motion:reduce){.lesson-road>i{animation:none}}

/* The drift exercise uses the same rear-facing model and steering axes as the race. */
#driving-lesson[data-mode="drift"] .lesson-road{height:180px;background:#283328}
#driving-lesson[data-mode="drift"] .lesson-road:before,#driving-lesson[data-mode="drift"] .lesson-road:after,#driving-lesson[data-mode="drift"] .lesson-road>i,#driving-lesson[data-mode="drift"] .lesson-road>img{display:none}
.lesson-road canvas{display:block;width:100%;height:100%;position:absolute;inset:0}
#driving-lesson[data-mode="drift"] .lesson-road[data-preview="loading"]:after,#driving-lesson[data-mode="drift"] .lesson-road[data-preview="unavailable"]:after{display:grid;place-items:center;inset:0;height:auto;background:none;color:#c9d3bc;font:14px Arial;opacity:1;content:'Готовим машину…'}
#driving-lesson[data-mode="drift"] .lesson-road[data-preview="unavailable"]:after{content:'Попробуй движение бегунком ↓'}
@media(max-height:700px){#driving-lesson[data-mode="drift"] .lesson-road{height:155px}.lesson-copy p{min-height:58px}}