body{background:var(--page-bg);background-size:cover}.typeflow-container{color:#fff;max-width:1600px;margin:0 auto;padding:20px}.hero-section h1{background:linear-gradient(90deg, var(--accent) 100%, var(--accent) 100%);color:#0000;-webkit-background-clip:text;background-clip:text;margin-bottom:10px;font-size:3.5rem;font-weight:700}.subtitle{opacity:.8;margin-bottom:20px;font-size:1.2rem}.content-wrapper{grid-template-columns:300px 1fr 350px;gap:25px;margin-bottom:50px;display:grid}@media (width<=1200px){.content-wrapper{grid-template-columns:1fr}}.glass-card{border-radius:var(--radius-md);box-shadow:none;color:#fff;background:#ffffff14;border:1px solid #ffffff26;margin-bottom:20px;padding:24px;transition:all .3s}.control-panel h2{align-items:center;gap:10px;margin-bottom:25px;font-size:1.5rem;display:flex}.form-group{margin-bottom:20px}.form-group label{align-items:center;gap:8px;margin-bottom:8px;font-weight:500;display:flex}.glass-select{border-radius:var(--radius-md);color:#fff;background:#ffffff1a;border:1px solid #fff3;width:100%;padding:12px 16px;font-size:1rem;transition:all .3s}.glass-select:focus{border-color:#64c8ff80;outline:none;box-shadow:0 0 0 2px #64c8ff33}.glass-select option{color:#fff;background-color:#1e1e28e6}.button-group{flex-direction:column;gap:12px;margin:25px 0;display:flex}.primary-btn,.secondary-btn{border-radius:var(--radius-md);cursor:pointer;border:none;justify-content:center;align-items:center;gap:10px;padding:14px 20px;font-size:1rem;font-weight:600;transition:all .3s;display:flex}.primary-btn{background:linear-gradient(135deg, var(--accent) 0%, var(--accent) 100%);color:#fff}.primary-btn:hover{box-shadow:none;transform:translateY(-2px)}.secondary-btn{color:#fff;background:#ffffff1a;border:1px solid #fff3}.secondary-btn:hover{background:#ffffff26;transform:translateY(-2px)}.primary-btn:disabled,.secondary-btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.stats-preview h3{align-items:center;gap:10px;margin-bottom:15px;font-size:1.2rem;display:flex}.stats-grid{grid-template-columns:repeat(3,1fr);gap:15px;display:grid}.stat-item{text-align:center;border-radius:var(--radius-md);background:#ffffff0d;padding:12px}.stat-value{margin-bottom:5px;font-size:1.8rem;font-weight:700}.stat-label{opacity:.8;font-size:.85rem}.typing-header{justify-content:space-between;align-items:center;margin-bottom:20px;padding:18px 24px;display:flex}.timer-display{align-items:center;gap:12px;font-size:1.8rem;font-weight:700;display:flex}.live-stats{gap:25px;display:flex}.live-stat{text-align:center}.live-stat-label{opacity:.8;margin-bottom:5px;font-size:.9rem;display:block}.live-stat-value{font-size:1.8rem;font-weight:700;display:block}.text-display{min-height:200px;margin-bottom:25px}.text-content{text-shadow:none;border-radius:var(--radius-md);white-space:pre-wrap;background:#ffffff0d;min-height:150px;margin-bottom:25px;padding:10px;font-family:Courier New,monospace;font-size:1.2rem;line-height:1.6}.typing-input{border-radius:var(--radius-md);color:#fff;resize:vertical;background:#ffffff0d;border:2px solid #ffffff1a;width:100%;padding:18px;font-family:Courier New,monospace;font-size:1.2rem;line-height:1.6;transition:all .3s}.typing-input:focus{border-color:#64c8ff80;outline:none;box-shadow:0 0 0 3px #64c8ff1a}.typing-input:disabled{opacity:.5;cursor:not-allowed}.char-correct{color:#4ade80}.char-wrong{color:#f87171;text-decoration:underline}.char-current{border-radius:var(--radius-sm);background-color:#64c8ff33}.char-pending{opacity:.7}.visualization-section{grid-template-columns:1fr 1fr;gap:25px;margin-top:25px;display:grid}@media (width<=768px){.visualization-section{grid-template-columns:1fr}}.visualization-card h3{align-items:center;gap:10px;margin-bottom:15px;font-size:1.2rem;display:flex}.chart-container{height:180px;margin-bottom:15px}.chart-legend{justify-content:center;gap:20px;margin-top:10px;display:flex}.legend-item{align-items:center;gap:5px;font-size:.9rem;display:flex}.legend-item.slow:before{content:"";border-radius:var(--radius-sm);background-color:var(--danger);width:12px;height:12px;display:inline-block}.legend-item.medium:before{content:"";border-radius:var(--radius-sm);background-color:var(--warn);width:12px;height:12px;display:inline-block}.legend-item.fast:before{content:"";border-radius:var(--radius-sm);background-color:#10b981;width:12px;height:12px;display:inline-block}.keyboard-error-map{flex-direction:column;gap:8px;margin-bottom:15px;display:flex}.keyboard-row{justify-content:center;gap:4px;display:flex}.key{border-radius:var(--radius-md);background:#ffffff1a;justify-content:center;align-items:center;width:36px;height:36px;font-size:.8rem;font-weight:500;transition:all .3s;display:flex}.key-wide{width:60px}.key-space{width:180px}.key-error-none{background:#ffffff0d}.key-error-low{background:#f59e0b33}.key-error-medium{background:#f59e0b66}.key-error-high{background:#ef444466}.key-error-very-high{background:#ef4444b3}.error-stats{justify-content:space-around;margin-top:15px;display:flex}.error-stat{text-align:center}.error-stat-label{opacity:.8;margin-bottom:5px;font-size:.9rem;display:block}.error-stat-value{font-size:1.5rem;font-weight:700;display:block}.analysis-panel h2{align-items:center;gap:10px;margin-bottom:25px;font-size:1.5rem;display:flex}.analysis-section{margin-bottom:30px}.analysis-section h3{align-items:center;gap:10px;margin-bottom:15px;font-size:1.2rem;display:flex}.patterns-list,.tips-list{border-radius:var(--radius-md);background:#ffffff0d;min-height:100px;padding:15px}.empty-state{text-align:center;opacity:.6;padding:20px 0}.pattern-item,.tip-item{border-radius:var(--radius-lg);border-left:4px solid var(--accent);background:#ffffff0d;margin-bottom:10px;padding:10px}.pattern-item:last-child,.tip-item:last-child{margin-bottom:0}.pattern-key{color:var(--accent);font-weight:700}.pattern-count{float:right;font-weight:700}.chart-container-small{height:150px}.summary-stats{grid-template-columns:1fr 1fr;gap:15px;display:grid}.summary-stat{border-radius:var(--radius-md);text-align:center;background:#ffffff0d;padding:12px}.summary-label{opacity:.8;margin-bottom:5px;font-size:.9rem;display:block}.summary-value{font-size:1.5rem;font-weight:700;display:block}.modal-overlay{z-index:1000;opacity:0;visibility:hidden;background:#000000b3;justify-content:center;align-items:center;transition:all .3s;display:flex;position:fixed;inset:0}.modal-overlay.active{opacity:1;visibility:visible}.modal-content{width:90%;max-width:700px;max-height:90vh;overflow-y:auto}.modal-header{border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;margin-bottom:25px;padding-bottom:15px;display:flex}.modal-header h2{align-items:center;gap:10px;margin:0;font-size:1.8rem;display:flex}.modal-close{color:#fff;cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;padding:0;font-size:2rem;line-height:1;transition:all .3s;display:flex}.modal-close:hover{background:#ffffff1a}.result-highlights{justify-content:space-around;margin-bottom:30px;display:flex}.result-highlight{text-align:center;border-radius:var(--radius-md);min-width:120px;padding:20px}.result-highlight.primary{background:linear-gradient(135deg, var(--accent) 0%, var(--accent) 100%)}.result-highlight.secondary{background:#ffffff1a}.result-highlight.tertiary{background:#ffffff0d}.result-value{margin-bottom:5px;font-size:2.5rem;font-weight:800}.result-label{opacity:.9;font-size:1rem}.result-details{margin-bottom:30px}.result-details h3{align-items:center;gap:10px;margin-bottom:15px;font-size:1.3rem;display:flex}.details-grid{grid-template-columns:repeat(2,1fr);gap:15px;display:grid}.detail-item{border-radius:var(--radius-md);background:#ffffff0d;justify-content:space-between;padding:15px;display:flex}.detail-label{opacity:.8}.detail-value{font-weight:700}.modal-actions{justify-content:center;gap:15px;display:flex}.page-footer{text-align:center;border-top:1px solid #ffffff1a;margin-top:40px;padding:25px 0}.footer-content p{opacity:.7;font-size:.9rem}.footer-content a{color:var(--accent);text-decoration:none;transition:all .3s}.footer-content a:hover{opacity:.9;text-decoration:underline}@media (width<=768px){.content-wrapper{grid-template-columns:1fr}.hero-section h1{font-size:2.5rem}.live-stats,.result-highlights{flex-direction:column;gap:15px}.result-highlight{min-width:auto}.modal-actions{flex-direction:column}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.pulse{animation:.5s ease-in-out pulse}body{background:#121419}.typeflow-container{color:#e7e9ee;padding:104px 24px 48px}.hero-section{text-align:left;text-shadow:none;margin-bottom:28px;padding:0}.hero-section h1{-webkit-text-fill-color:currentColor;color:#e7e9ee;letter-spacing:-.025em;background:0 0;font-size:clamp(32px,5vw,48px);font-weight:650}.subtitle{color:#a3adbb;opacity:1;font-size:14px}.glass-card{border-radius:var(--radius-md);box-shadow:none;color:#e7e9ee;background:#191c22;border:1px solid #2a2f37}.glass-card:hover{box-shadow:none;border-color:#3a404a}.glass-select{border-radius:var(--radius-sm);color:#e7e9ee;background:#14171c;border:1px solid #2a2f37}.glass-select option{color:#e7e9ee;background:#191c22}.primary-btn{color:var(--surface-strong);background:var(--text-main);border:1px solid var(--text-main);border-radius:var(--radius-sm);box-shadow:none}.primary-btn:hover{background:var(--text-main);opacity:.85;box-shadow:none;transform:none}.primary-btn:disabled{color:var(--text-soft);background:var(--surface-soft);border-color:var(--line);opacity:1}.secondary-btn{color:var(--text-subtle);border:1px solid var(--line);border-radius:var(--radius-sm);background:0 0}.secondary-btn:hover{color:var(--text-main);background:var(--surface-soft)}.glass-card{background:var(--surface);border:1px solid var(--line);box-shadow:none}