:root{color-scheme:dark}body,.app{margin:0;padding:0;min-height:100vh;background:#b3b3b3;color:#000;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:14px;line-height:1.35}.app{display:flex;justify-content:center;align-items:center;padding:1rem}.virt-screen{width:min(100ch,960px);background:#d1d1d1;border:1px solid #999;box-shadow:0 0 0 1px #00000040;padding:1rem}.virt-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:.5rem;border-bottom:1px solid #999}.virt-title{font-size:1.2rem;letter-spacing:.18rem;color:#444}.virt-sub{font-size:.85rem;color:#333;display:flex;align-items:center;gap:.5rem}.virt-sub--steps{padding-top:.25rem;padding-bottom:.25rem;border-bottom:1px solid #999;margin-bottom:.5rem}.virt-cpm{font-weight:700;color:#222}.virt-sep{padding:0 .5rem;color:#777}.virt-main{margin-top:.75rem;display:flex;flex-direction:column;gap:.75rem}.virt-instruction{font-size:.78rem;color:#555;text-align:center}.virt-text{background:#fff;border:1px solid #999;padding:1rem;min-height:230px;display:block;position:relative;width:100%}.virt-text pre{margin:0;white-space:pre;font-size:1.05rem;letter-spacing:.08rem}.virt-top,.virt-bottom{width:100%;overflow-x:visible}.virt-top{border-bottom:1px solid #ccc;padding-bottom:.25rem;white-space:pre}.virt-next{color:#0a0;font-weight:700;text-decoration:underline}.virt-bottom pre{color:#000000b3;white-space:pre}.virt-hidden{visibility:hidden}.virt-text.virt-good{border-color:#4caf50;box-shadow:0 0 0 2px #4caf504d}.virt-text.virt-ok{border-color:#ff9800;box-shadow:0 0 0 2px #ff98004d}.virt-text.virt-bad{border-color:#f44336;box-shadow:0 0 0 2px #f443364d}.virt-input{position:relative;height:1px;width:1px;overflow:hidden}.virt-hidden-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.virt-footer{display:grid;grid-template-columns:1fr;gap:.5rem;padding-top:.5rem;border-top:1px solid #999}.footer-row{display:flex;gap:.75rem;justify-content:space-between}.footer-row--muted{opacity:.75}.step-bar{display:inline-flex;align-items:center;gap:.2rem;margin-left:.5rem}.step-dot{width:.65rem;height:.65rem;border-radius:50%;background:#ccc;border:1px solid #999}.step-dot.completed{background:#4caf50;border-color:#2e7d32}.step-dot.current{background:#ff9800;border-color:#e65100}.stat{background:#f2f2f2;border:1px solid #999;padding:.5rem;text-align:center}.stat-label{font-size:.75rem;color:#444}.stat-value{font-size:1.2rem;font-weight:700;color:#000}.stat-value.good{color:#0b6623}.stat-value.ok{color:#ba8b00}.stat-value.bad{color:#b71c1c}.virt-nav{display:flex;justify-content:space-between;gap:.5rem}.virt-nav button{flex:1;padding:.5rem;border:1px solid #999;background:#e0e0e0;cursor:pointer;font-weight:700}.virt-nav button:disabled{opacity:.4;cursor:not-allowed}.virt-hint{color:#444;padding:.4rem;border:1px dashed #999;background:#eee}.virt-error{padding:.4rem;border:1px solid #c00;background:#f8d7da;color:#600}.panel pre{margin:0;white-space:pre}.lesson-list{margin:0;padding:0;list-style:none}.lesson-list li{margin:.25rem 0}.lesson-list button{width:100%;padding:.35rem .5rem;border:1px solid rgba(170,255,170,.5);background:#0000004d;color:inherit;text-align:left;cursor:pointer;font-family:inherit}.lesson-list button:hover,.lesson-list button:focus{outline:1px dashed rgba(170,255,170,.8)}.lesson-list button.active{background:#aaffaa40;border-color:#aaffaae6}.lesson-list button.locked{opacity:.5;cursor:not-allowed}.lesson-list button.passed{background:#00ff0026}.score-box{border:1px solid rgba(170,255,170,.8);padding:.7rem;background:#000000d9;white-space:pre}.score-box .line{margin:.35rem 0}.typing-area textarea{width:100%;height:140px;background:#00000040;border:1px solid rgba(170,255,170,.4);color:inherit;padding:.7rem;resize:vertical;font-family:inherit}.typing-area button{padding:.5rem .9rem;border:1px solid rgba(170,255,170,.55);background:#00000080;color:inherit;cursor:pointer;font-weight:700;margin-top:.5rem}.navigation{margin-top:.75rem;display:flex;gap:.5rem}.nav{padding:.4rem .75rem;border:1px solid rgba(170,255,170,.6);background:#0009;color:inherit;cursor:pointer}.nav:disabled{opacity:.4;cursor:not-allowed}.hint{margin-top:.75rem;padding:.5rem;background:#0000008c;border:1px dashed rgba(170,255,170,.6);color:#afac}.error{margin-top:.4rem;color:#f77;background:#ff00000f;border:1px solid rgba(255,0,0,.3);padding:.5rem;border-radius:.35rem}.footer{margin-top:1rem;width:100%;text-align:right;font-size:.85rem;opacity:.7}.progress-panel{position:fixed;right:2rem;top:50%;transform:translateY(-50%);width:280px;height:80vh;background:#d1d1d1;border:2px solid #999;box-shadow:0 0 0 1px #00000040,-4px 4px 8px #0003;display:flex;flex-direction:column;z-index:100;font-size:.85rem;overflow:hidden}.progress-panel__header{display:flex;justify-content:space-between;align-items:center;padding:.5rem;border-bottom:1px solid #999;background:silver}.progress-panel__header h2{margin:0;font-size:.95rem;color:#444;font-weight:700}.progress-panel__close{background:none;border:none;cursor:pointer;font-size:1.3rem;color:#444;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.progress-panel__close:hover{color:#000}.progress-panel__tabs{display:flex;border-bottom:1px solid #999;background:#e8e8e8;overflow-x:auto}.progress-tab{flex:1;min-width:80px;padding:.4rem .5rem;border:none;background:#d1d1d1;color:#666;cursor:pointer;font-size:.75rem;font-weight:600;border-bottom:2px solid transparent;transition:all .2s}.progress-tab:hover{background:#e0e0e0}.progress-tab.active{background:silver;color:#000;border-bottom-color:#444}.progress-panel__content{flex:1;overflow-y:auto;padding:.5rem;min-height:0}.progress-tab-content{display:flex;flex-direction:column;gap:.5rem}.progress-stat{padding:.5rem;border:1px solid #999;background:#f2f2f2;border-radius:0}.progress-stat label{display:block;font-size:.75rem;color:#666;margin-bottom:.25rem;font-weight:600}.progress-stat-value{font-size:1.1rem;font-weight:700;color:#000}.lessons-grid{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}.lesson-card{padding:.4rem;border:1px solid #999;background:#f2f2f2;text-align:center;font-size:.75rem;cursor:pointer;transition:all .2s}.lesson-card:hover:not(.locked){background:#e0e0e0;border-color:#666}.lesson-card__action{margin-top:.4rem;padding:.3rem .4rem;width:100%;border:1px solid #666;background:#d1f2d1;color:#0b6623;font-size:.7rem;cursor:pointer}.lesson-card__action:hover{background:#c5ebc5}.learning-session-controls{display:flex;flex-direction:column;gap:.4rem;margin-bottom:.5rem}.learning-session-card{border:1px solid #999;background:#f2f2f2;padding:.5rem}.learning-session-card.active{border-color:#0b6623;background:#e8f6e8}.learning-session-card__header,.learning-session-card__meta{display:flex;justify-content:space-between;font-size:.72rem;margin-bottom:.25rem;gap:16px}.learning-session-lesson-list{border-top:1px solid #ccc;padding-top:.4rem;display:grid;gap:.3rem}.learning-session-lesson-row{display:flex;justify-content:space-between;font-size:.7rem;color:#333}.learning-session-end-button{margin-top:.4rem;padding:.35rem .5rem;border:1px solid #999;background:#f8d7da;color:#900;cursor:pointer}.learning-session-end-button:hover{background:#f5c2c7}.lesson-card.locked{opacity:.5;cursor:default;background:#e8e8e8}.lesson-card.complete{background:#d4edda;border-color:#28a745}.lesson-id{font-weight:700;color:#000;margin-bottom:.2rem}.lesson-title{font-size:.65rem;color:#666;margin-bottom:.2rem;word-break:break-word}.lesson-accuracy{font-size:.8rem;font-weight:600;color:#0b6623}.lesson-locked{font-size:1rem}.attempts-timeline{display:flex;flex-direction:column;gap:.5rem;max-height:100%;overflow-y:auto}.attempt-card{padding:.4rem;border:1px solid #999;background:#f2f2f2;font-size:.7rem}.attempt-date{font-weight:600;color:#000;margin-bottom:.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.attempt-lesson{color:#666;margin-bottom:.2rem;font-size:.65rem}.attempt-metrics{display:flex;justify-content:space-between;font-size:.65rem;color:#555}.metric{white-space:nowrap}.progress-panel__content::-webkit-scrollbar,.attempts-timeline::-webkit-scrollbar{width:8px}.progress-panel__content::-webkit-scrollbar-track,.attempts-timeline::-webkit-scrollbar-track{background:#e8e8e8}.progress-panel__content::-webkit-scrollbar-thumb,.attempts-timeline::-webkit-scrollbar-thumb{background:#999;border-radius:0}.progress-panel__content::-webkit-scrollbar-thumb:hover,.attempts-timeline::-webkit-scrollbar-thumb:hover{background:#666}@media (max-width: 768px){.progress-panel{position:static;transform:none;width:100%;max-height:300px;margin-top:1rem;right:auto;top:auto}}*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#0b1220;color:#f7f7ff;line-height:1.5}a{color:inherit}.app{min-height:100vh;display:flex;flex-direction:column}.header{padding:1.5rem;border-bottom:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center}.header h1{margin:0;font-size:1.6rem}.lang label{display:flex;gap:.5rem;align-items:center;font-weight:600}main{flex:1;display:grid;grid-template-columns:280px 1fr;gap:1.5rem;padding:1.5rem}.lessons{border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:1rem}.lessons h2{margin-top:0}.lessons ul{list-style:none;padding:0;margin:0}.lessons li+li{margin-top:.5rem}.lessons button{width:100%;padding:.6rem .75rem;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:#ffffff0f;color:inherit;cursor:pointer;text-align:left}.lessons button.active{border-color:#78c8ff;background:#78c8ff29}.lessons button.locked{opacity:.5;cursor:not-allowed}.lessons button.passed{border-color:#78ff78e6;background:#78ff781f}.practice{border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:1rem}.lesson-preview pre{white-space:pre-wrap;word-break:break-word;padding:1rem;border-radius:10px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1)}.typing-form{margin-top:1rem;display:grid;gap:.75rem}.typing-form textarea{width:100%;min-height:120px;padding:.85rem;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:#ffffff0a;color:inherit;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;resize:vertical}.typing-form button{width:fit-content;align-self:flex-end;padding:.6rem 1rem;border:1px solid rgba(255,255,255,.2);border-radius:10px;background:#ffffff0f;color:inherit;cursor:pointer;font-weight:600}.score{margin-top:1.25rem;padding:1rem;border-radius:10px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1)}.score dl{display:grid;grid-template-columns:160px 1fr;gap:.5rem 1rem;margin:0}.lesson-hint{margin:0 0 .75rem;font-size:.95rem;opacity:.85}.error{padding:.75rem;border-radius:10px;background:#ff32321a;border:1px solid rgba(255,50,50,.3)}.footer{padding:1rem 1.5rem;border-top:1px solid rgba(255,255,255,.12);font-size:.9rem;opacity:.75}