:root{font-family:Inter,system-ui,sans-serif;color:#162033;background:#f5f7fb}*{box-sizing:border-box}body{margin:0}.shell{max-width:1100px;margin:auto;padding:28px 20px}.card{background:#fff;border:1px solid #e3e8f0;border-radius:18px;padding:24px;box-shadow:0 8px 30px #14213d0b}button{border:0;border-radius:10px;padding:12px 18px;background:#2563eb;color:#fff;font-weight:700;cursor:pointer}button:disabled{opacity:.5}.input{display:block;width:100%;padding:12px;border:1px solid #cbd5e1;border-radius:8px;margin:8px 0 14px}.login{max-width:430px;margin:12vh auto}.muted{color:#64748b}.lesson-shell{max-width:none;height:100vh;padding:16px;overflow:hidden}.practice-layout{display:grid;grid-template-columns:300px minmax(0,1fr);grid-gap:16px;gap:16px;height:100%}.lesson-sidebar{display:flex;flex-direction:column;overflow-y:auto}.lesson-sidebar h2{margin:6px 0 10px}.sidebar-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.top-actions{display:flex;gap:5px}.history-button,.logout-button{padding:7px 10px;font-size:12px}.logout-button{background:#64748b}.history-button{background:#2563eb}.student-name{font-size:12px;color:#64748b;overflow-wrap:anywhere;margin:0}.requirements{font-size:14px;line-height:1.45}.stats{display:grid;grid-template-columns:1fr 1fr;grid-gap:8px;gap:8px;margin:14px 0}.stat{display:flex;flex-direction:column;padding:10px 12px;background:#eef4ff;border-radius:10px}.stat span{font-size:11px;color:#64748b;text-transform:uppercase}.stat strong{font-size:16px}.history-panel{border:1px solid #dbe2ea;border-radius:10px;padding:10px;margin-bottom:12px;background:#f8fafc}.history-panel h3{margin:0 0 8px;font-size:15px}.history-item{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid #e2e8f0;font-size:12px}.history-panel>strong{display:block;margin-top:8px;font-size:13px}.lesson-stage{display:flex;flex-direction:column;min-width:0;overflow:hidden}.stage-hint{margin:0 0 12px;color:#64748b}.exercise{position:relative;flex:1 1;min-height:0;overflow:auto;font-family:ui-monospace,monospace;font-weight:700;letter-spacing:.02em;white-space:pre-wrap;cursor:text;padding:8px 12px}.guide{color:#cbd5e1}.typed{position:absolute;inset:0;white-space:pre-wrap}.correct{color:#16a34a}.wrong{color:#dc2626;background:#fee2e2}.success{color:#166534}.caret{border-right:3px solid #2563eb}.stage-keyboard{flex:none;border:1px solid #cbd5e1;border-radius:12px;background:#dbe2ea;margin-top:12px;padding:12px 8px;box-shadow:inset 0 2px 4px #64748b33,0 4px 10px #14213d14}.keyboard{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0}.keyboard-row{display:flex;justify-content:center;gap:7px;width:100%}.keyboard-row:nth-child(2){transform:translateX(10px)}.keyboard-row:nth-child(3){transform:translateX(16px)}.keyboard-row:nth-child(4){transform:translateX(24px)}.keyboard-row:nth-child(5) .key:first-child{min-width:54px}.keyboard-row:nth-child(5) .key:nth-child(2){min-width:72px}.keyboard-row:nth-child(5) .key:nth-child(3){min-width:66px}.keyboard-row:nth-child(5) .key:nth-child(6){min-width:110px}.keyboard-row:nth-child(5) .key:nth-child(7){min-width:84px}.key{min-width:32px;text-align:center;background:linear-gradient(#fff,#e7ebef);color:#334155;padding:8px 10px;border-radius:6px;border:1px solid #b8c2cd;box-shadow:0 2px 0 #9aa7b5;font:600 13px monospace}.key.active{background:#2563eb;border-color:#1d4ed8;color:#fff;box-shadow:0 2px 0 #1e40af}.sidebar-actions{margin-top:auto;padding-top:14px}.lesson-actions{display:flex;gap:8px;width:100%}.lesson-actions button{width:auto;flex:1 1;padding:9px 8px;font-size:13px}.start-button{min-width:0}.pause-button{background:#2563eb;min-width:0}.sidebar-actions button:disabled{background:#cbd5e1;color:#64748b;opacity:1;cursor:not-allowed}.notice{padding:14px;border-radius:10px;background:#ecfdf5;color:#166534;margin-top:16px}@media(max-width:800px){.lesson-shell{height:auto;min-height:100vh;overflow:visible}.practice-layout{display:flex;flex-direction:column;height:auto}.lesson-sidebar{overflow:visible}.lesson-stage{min-height:70vh}.exercise{min-height:48vh;overflow:auto}.stage-keyboard{margin-top:10px}.keyboard-row{gap:3px}.key{min-width:24px;padding:6px 5px;font-size:11px}}.presentation-overlay{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:24px;background:#0f172acc}.presentation-modal{position:relative;width:min(980px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:18px;padding:22px 28px;box-shadow:0 20px 60px #0006}.presentation-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;border-bottom:1px solid #e2e8f0;padding:0 270px 8px 0}.presentation-heading h2{margin:2px 0 0}.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#2563eb;font-weight:800}.presentation-counter{color:#64748b;font-size:13px;white-space:nowrap}.presentation-modal h3{margin:12px 0 6px}.presentation-content{white-space:pre-wrap;line-height:1.5;color:#334155;margin:0}.presentation-image{display:block;max-width:100%;max-height:360px;object-fit:contain;margin:12px auto;border-radius:10px}.presentation-actions{position:absolute;top:18px;right:28px;display:flex;justify-content:flex-end;gap:8px;margin:0}.presentation-actions button{padding:9px 12px}@media(max-width:600px){.presentation-overlay{padding:12px}.presentation-modal{padding:18px}.presentation-heading{display:block;padding-right:0}.presentation-counter{display:block;margin-top:6px}.presentation-actions{top:14px;right:18px}.presentation-actions button{padding:8px 9px;font-size:12px}}.stage-keyboard{position:relative}.stage-keyboard .keyboard{padding-top:32px}.show-presentation-button{position:absolute;top:8px;right:8px;padding:7px 10px;font-size:12px;z-index:2}