:root{--bg-main: #09090b;--bg-sidebar: #121215;--accent-yellow: #EAB308;--accent-rose: #F43F5E;--accent-emerald: #10B981;--accent-blue: #3b82f6;--text-main: #cbd5e1;--text-muted: #64748b;--text-highlight: #f8fafc;--border-subtle: #27272a;--surface-panel: #18181b;--sidebar-width: 300px;--header-height: 60px;--footer-height: 240px;--font-mono: "Fira Code", "Roboto Mono", monospace;--font-ui: "Inter", system-ui, -apple-system, sans-serif}*{box-sizing:border-box}body{background-color:var(--bg-main);color:var(--text-main);font-family:var(--font-ui);margin:0;padding:0;overflow:hidden;height:100vh;width:100vw}#app-container{display:flex;height:100vh;width:100vw;overflow:hidden}#sidebar{width:var(--sidebar-width);background-color:var(--bg-sidebar);border-right:1px solid var(--border-subtle);display:flex;flex-direction:column;transition:width .5s ease-in-out,transform .5s ease-in-out;overflow-y:auto;flex-shrink:0;z-index:20}#sidebar.collapsed{width:0;overflow:hidden;border-right:none}#main-stage{flex:1;display:flex;flex-direction:column;position:relative;background-color:var(--bg-main);height:100vh}#cockpit-header{height:var(--header-height);border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:center;padding:0 1rem;background-color:#070708cc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10}#hero-stage{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;padding:2rem}#adaptive-footer{height:var(--footer-height);border-top:1px solid var(--border-subtle);background-color:var(--surface-panel);display:flex;flex-direction:column;transition:height .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:visible;z-index:10}#adaptive-footer.collapsed{height:12px}#footer-content{display:flex;flex:1;width:100%;height:100%;transition:opacity .2s ease}#adaptive-footer.collapsed #footer-content{opacity:0;pointer-events:none}.footer-panel{flex:1;border-right:1px solid var(--border-subtle);padding:1rem;overflow:hidden;display:flex;flex-direction:column}.footer-panel:last-child{border-right:none}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-main)}::-webkit-scrollbar-thumb{background:var(--border-subtle);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}*{scrollbar-width:thin;scrollbar-color:var(--border-subtle) var(--bg-main)}.mode-item.locked{position:relative}.mode-item.locked .mode-label,.mode-item.locked .mode-ring{opacity:.3}.mode-item.locked:after{content:"";position:absolute;top:6px;right:8px;width:14px;height:14px;background-color:var(--text-highlight);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;z-index:10}.mode-item.locked:hover:before{content:attr(data-tooltip);position:absolute;top:100%;left:50%;transform:translate(-50%);margin-top:8px;background-color:var(--surface-card);color:var(--text-main);border:1px solid var(--border-subtle);padding:.5rem .75rem;border-radius:4px;font-size:.75rem;white-space:nowrap;z-index:100;box-shadow:0 4px 12px #00000080;pointer-events:none}.sidebar-brand{padding:1.5rem 1.5rem .5rem;font-family:var(--font-mono);font-size:1.25rem;font-weight:800;color:var(--text-highlight);letter-spacing:-.03em;display:flex;align-items:center}.sidebar-brand span{color:var(--accent-yellow)}.sidebar-section{padding:1.5rem;border-bottom:1px solid var(--border-subtle)}.sidebar-title{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:1rem;font-weight:600}.segmented-control{display:flex;background:var(--bg-main);padding:4px;border-radius:6px;border:1px solid var(--border-subtle)}.segmented-option{flex:1;text-align:center;padding:8px 12px;font-size:.85rem;cursor:pointer;border-radius:4px;color:var(--text-muted);transition:all .2s;-webkit-user-select:none;user-select:none}.segmented-option.active{background:var(--surface-panel);color:var(--text-highlight);box-shadow:0 1px 3px #0000004d;font-weight:500}.slider-container{display:flex;align-items:center;gap:1rem}input[type=range]{-webkit-appearance:none;width:100%;background:transparent}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:16px;width:16px;border-radius:50%;background:var(--accent-yellow);cursor:pointer;margin-top:-6px;box-shadow:0 0 10px #eab30880}input[type=range]::-webkit-slider-runnable-track{width:100%;height:4px;cursor:pointer;background:var(--border-subtle);border-radius:2px}.slider-value{font-family:var(--font-mono);color:var(--text-highlight);font-weight:700;font-size:1.1rem;min-width:3ch}.mode-selector{display:flex;gap:2rem}.mode-item{display:flex;flex-direction:column;align-items:center;cursor:pointer;opacity:.5;transition:opacity .3s}.mode-item.active{opacity:1}.mode-item.active .mode-label{color:var(--text-highlight)}.mode-ring{width:8px;height:8px;border-radius:50%;background:var(--border-subtle);margin-top:4px;transition:all .3s}.mode-item.active .mode-ring{background:var(--accent-yellow);box-shadow:0 0 8px var(--accent-yellow)}.sidebar-footer{margin-top:auto;padding:1.5rem;border-top:1px solid var(--border-subtle)}.github-link{display:flex;align-items:center;gap:.75rem;color:var(--text-muted);text-decoration:none;font-size:.85rem;transition:all .2s;padding:.5rem;border-radius:6px;background:#ffffff05;border:1px solid transparent}.github-link:hover{color:var(--text-highlight);background:#ffffff0d;border-color:var(--border-subtle)}.github-link svg{color:var(--accent-yellow)}@keyframes pulse{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}#word-stream{font-family:var(--font-mono);font-size:2.5rem;line-height:1.6;width:80%;max-width:900px;text-align:center;position:relative}.word{display:inline-block;margin-right:1.5rem;margin-bottom:1rem;color:var(--text-muted);position:relative;padding-bottom:4px}.char{position:relative;transition:color .1s}.char.correct{color:var(--text-highlight)}.char.incorrect{color:var(--accent-rose)}.char.cursor{background-color:#eab30833;box-shadow:0 2px 0 var(--accent-yellow)}.char.cursor.error{background-color:#f43f5e33;box-shadow:0 2px 0 var(--accent-rose)}#stats-pill{position:absolute;bottom:2rem;background:var(--surface-panel);border:1px solid var(--border-subtle);padding:.75rem 1.5rem;border-radius:999px;display:flex;align-items:center;gap:2rem;box-shadow:0 10px 25px #00000080;transform:translateY(0);transition:transform .3s}#stats-pill:hover{transform:translateY(-2px)}.stat-group{display:flex;flex-direction:column;align-items:center}.stat-label{font-size:.65rem;text-transform:uppercase;color:var(--text-muted);letter-spacing:.05em;text-align:center}.stat-value{font-family:var(--font-mono);font-size:1.25rem;font-weight:700;color:var(--text-highlight);text-align:center}.priority-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem;overflow-y:auto}.priority-item{display:flex;align-items:center;background:#ffffff05;padding:.5rem .75rem;border-radius:4px;border-left:2px solid transparent}.priority-item.bottleneck{border-left-color:var(--accent-rose)}.priority-item.drilling{border-left-color:var(--accent-yellow)}.priority-item.mastered{border-left-color:var(--accent-emerald)}.p-pattern{font-family:var(--font-mono);font-weight:700;font-size:1.1rem;width:3rem;color:var(--text-muted)}.p-stats{flex:1;display:flex;align-items:center;gap:1rem}.p-bar-bg{flex:1;height:4px;background:var(--border-subtle);border-radius:2px;overflow:hidden}.p-bar-fill{height:100%;background:var(--accent-yellow)}.priority-item.bottleneck .p-bar-fill{background:var(--accent-rose)}.grid-visualizer{display:grid;grid-template-columns:repeat(9,1fr);gap:4px;height:100%;align-content:center}.grid-node{aspect-ratio:1;background:var(--border-subtle);border-radius:4px;opacity:.3}.heatmap-container{position:relative;width:100%;height:100%;overflow:auto;padding:.5rem;display:block}.heatmap-grid{display:grid;grid-template-columns:repeat(var(--grid-cols, 26),1fr);gap:1px;aspect-ratio:1 / 1;width:100%;max-width:240px}.heatmap-grid.empty{filter:blur(2px);opacity:.3}.heatmap-node{font-family:var(--font-mono);font-size:6px;display:flex;align-items:center;justify-content:center;color:transparent;background:var(--border-subtle);border-radius:1px}.heatmap-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#000c;padding:4px 8px;border-radius:4px;font-size:.75rem;color:var(--text-muted);pointer-events:none;white-space:nowrap}.footer-panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.satellite-grid{display:grid;grid-template-columns:14px repeat(26,minmax(12px,1fr));gap:1px;width:100%;min-width:340px}.satellite-header{display:flex;align-items:center;justify-content:center;font-size:.5rem;color:var(--text-muted);font-family:var(--font-mono);background:var(--surface-panel);position:sticky}.satellite-header:nth-child(-n+27){top:0;z-index:20;border-bottom:1px solid var(--border-subtle)}.satellite-header:nth-child(27n+1){left:0;z-index:20;border-right:1px solid var(--border-subtle)}.satellite-header:nth-child(1){z-index:30;top:0;left:0}.satellite-node{aspect-ratio:1/1;width:85%;height:85%;justify-self:center;align-self:center;background:var(--border-subtle);border-radius:25%;transition:transform .1s}.satellite-node:hover{transform:scale(1.5);z-index:10;border-radius:4px}.mastery-chart{display:flex;align-items:flex-end;justify-content:space-around;width:100%;height:100%;padding:1rem 0}.chart-bar-group{display:flex;flex-direction:column;align-items:center;gap:.5rem;height:100%;justify-content:flex-end}.chart-bar{width:24px;background:var(--border-subtle);border-radius:4px 4px 0 0;transition:height .3s;min-height:4px}.chart-label{font-size:.7rem;color:var(--text-muted)}.status-badge{font-size:.65rem;padding:2px 6px;border-radius:4px;font-weight:600;text-transform:uppercase}.status-badge.bottleneck{background:#f43f5e33;color:var(--accent-rose)}.status-badge.drilling{background:#eab30833;color:var(--accent-yellow)}.status-badge.mastered{background:#10b98133;color:var(--accent-emerald)}.strategy-info{margin-top:1rem}.strategy-desc{font-size:.75rem;line-height:1.4;color:var(--text-muted);margin:0;animation:fadeIn .3s ease}.strategy-desc b{color:var(--text-highlight);display:block;margin-bottom:2px}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.mastery-widget{position:absolute;right:2rem;width:180px;display:flex;flex-direction:column;gap:6px}.mastery-info{display:flex;justify-content:space-between;align-items:center;font-size:.75rem}.mastery-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600}.mastery-value{color:var(--text-muted);font-family:var(--font-mono);font-weight:700}.mastery-track{width:100%;height:4px;background:var(--surface-panel);border-radius:2px;overflow:hidden}.mastery-fill{height:100%;background:var(--accent-emerald);border-radius:2px;transition:width .5s ease-out;box-shadow:0 0 8px #10b98166}.unigram-grid{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;width:100%;max-width:100%}.unigram-node{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--border-subtle);border-radius:4px;font-family:var(--font-mono);font-size:.9rem;color:var(--text-muted);font-weight:700}#footer-toggle{position:absolute;top:-14px;right:2rem;width:28px;height:28px;background:var(--surface-panel);border:1px solid var(--border-subtle);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted);z-index:100;transition:all .2s ease;box-shadow:0 -2px 10px #0000004d}#footer-toggle:hover{color:var(--text-highlight);border-color:var(--text-muted);transform:translateY(-2px)}#footer-toggle svg{transition:transform .3s ease}#adaptive-footer.collapsed #footer-toggle svg{transform:rotate(180deg)}