.app-shell{min-height:100%;display:flex;flex-direction:column}.app-header{display:flex;align-items:center;gap:var(--s-5);height:var(--header-h);padding:0 var(--s-5);background:var(--bg-header);border-bottom:1px solid var(--border-subtle)}.app-header__brand{display:flex;align-items:center;gap:var(--s-3)}.app-header__icon{color:var(--text-secondary);flex:0 0 auto}.app-header__title{font-size:var(--fs-lg);font-weight:600;white-space:nowrap}.app-header__nav{display:flex;gap:var(--s-2)}.app-header__nav a{color:var(--text-secondary);padding:var(--s-1) var(--s-3);border-radius:var(--r-sm);font-size:var(--fs-sm);transition:color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}.app-header__nav a:hover{color:var(--text-primary)}.app-header__nav a.active{color:var(--text-primary);background:var(--bg-sunken)}.app-header__controls{margin-left:auto;display:flex;align-items:center;gap:var(--s-5);font-size:var(--fs-sm);color:var(--text-secondary)}.app-header__type-value{color:var(--accent-teal);font-weight:500;margin-left:var(--s-1)}.app-header__n{display:flex;align-items:center;gap:var(--s-2)}.app-header__n select{padding:4px var(--s-2);font-size:var(--fs-sm);min-width:56px}.app-header__account{padding:var(--s-1) var(--s-2);border:1px solid var(--border-muted);border-radius:var(--r-sm);color:var(--text-secondary);background:var(--bg-sunken);font-size:var(--fs-sm)}.app-header__account:hover{color:var(--text-primary);border-color:var(--border-strong)}@media(max-width:640px){.app-header{gap:var(--s-3);padding:0 var(--s-3)}.app-header__nav{gap:0}.app-header__title{display:none}.app-header__controls{gap:var(--s-3)}}.app-main{flex:1;width:100%;max-width:var(--layout-max);margin:0 auto;padding:var(--s-5)}.login-page{max-width:560px}.login-page__panel{display:flex;flex-direction:column;gap:var(--s-4);padding:var(--s-5);background:var(--bg-raised);border:1px solid var(--border-subtle);border-radius:var(--r-md)}.login-page__panel h2{margin:0;font-size:var(--fs-xl);font-weight:600}.login-page__form,.login-page__signed-in,.login-page__field{display:flex;flex-direction:column;gap:var(--s-3)}.login-page__field span,.login-page__label{color:var(--text-secondary);font-size:var(--fs-xs);font-weight:700;letter-spacing:0;text-transform:uppercase}.login-page__field input{width:100%}.login-page__button{align-self:flex-start;padding:var(--s-2) var(--s-4);border:1px solid var(--border-muted);border-radius:var(--r-sm);background:var(--accent-teal);color:var(--text-primary);font-size:var(--fs-sm);font-weight:600}.login-page__button:hover:not(:disabled){background:var(--accent-teal-strong)}.login-page__notice,.login-page__muted,.login-page__message,.login-page__error{margin:0}.login-page__notice,.login-page__muted{color:var(--text-secondary)}.login-page__message{color:var(--accent-teal-strong)}.login-page__error{color:var(--accent-red-strong)}.grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);width:clamp(320px,60vmin,600px);aspect-ratio:1 / 1;background:var(--bg-raised);border:1px solid var(--border-muted);box-shadow:inset 0 0 0 1px #5cc4ff0a,var(--shadow-sm)}.grid__cell{border:1px solid var(--border-subtle);position:relative}.grid__cell:after{content:"";position:absolute;inset:12px;border:1px solid transparent;background-image:none;background-color:transparent;color:var(--color-stim-active);opacity:0;pointer-events:none}.grid__cell--active:after{opacity:1;background-color:transparent;background-image:radial-gradient(circle,currentColor .7px,transparent 1.1px);background-size:4px 4px;background-position:2px 2px}.hotkeys{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2);margin-top:var(--s-5);width:clamp(320px,60vmin,600px);max-width:100%}.hotkey{padding:var(--s-2) var(--s-4);border:1px solid var(--color-hotkey);border-radius:var(--r-sm);color:var(--color-hotkey);background:transparent;font-size:var(--fs-md);font-family:var(--font-mono);letter-spacing:.04em}.hotkey:hover{background:#5cc4ff14}.hotkey:active{transform:translateY(1px)}.hotkey--pressed{background:#5cc4ff38;border-color:var(--accent-teal-strong);color:var(--accent-teal-strong)}.hotkey--correct{background:var(--feedback-correct-bg);border-color:var(--feedback-correct);color:var(--feedback-correct)}.hotkey--incorrect{background:var(--feedback-incorrect-bg);border-color:var(--feedback-incorrect);color:var(--feedback-incorrect)}.side-panel{width:var(--side-panel-w);padding:var(--s-4);background:var(--bg-raised);border-left:1px solid var(--border-subtle);display:flex;flex-direction:column;gap:var(--s-5)}.side-panel h3{margin:0 0 var(--s-3) 0;font-size:var(--fs-md);font-weight:600;color:var(--text-primary)}.side-panel dl{display:grid;grid-template-columns:1fr auto;gap:var(--s-2) var(--s-4);margin:0}.side-panel dt{color:var(--text-secondary)}.side-panel dd{margin:0;font-weight:600}.side-panel__sets{list-style:none;padding:0;margin:0;display:grid;gap:var(--s-2)}.side-panel__sets li{display:grid;grid-template-columns:18px 48px 1fr 24px 1fr;gap:var(--s-2);color:var(--accent-red-strong);font-size:var(--fs-sm)}.side-panel__muted{color:var(--text-muted);font-size:var(--fs-sm)}.toast{position:fixed;left:50%;bottom:var(--s-7);transform:translate(-50%);background:var(--bg-overlay);color:var(--text-primary);padding:var(--s-3) var(--s-4);border-radius:var(--r-sm);display:flex;align-items:center;gap:var(--s-3);box-shadow:var(--shadow-md);animation:toast-enter var(--dur-base) var(--ease-out) both;transition:opacity .18s var(--ease-out),transform .18s var(--ease-out);will-change:transform,opacity}.toast--leaving{opacity:0;transform:translate(-50%,6px);animation:none}.toast__close{color:var(--text-secondary);font-size:var(--fs-lg);line-height:1;transition:color var(--dur-fast) var(--ease-out)}.toast__close:hover{color:var(--text-primary)}@keyframes toast-enter{0%{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%)}}.train-page{display:grid;grid-template-columns:1fr var(--side-panel-w);gap:var(--s-5);align-items:start}.train-page__main{display:flex;flex-direction:column;align-items:center;gap:var(--s-4)}.train-page__bar{display:flex;align-items:center;justify-content:space-between;width:clamp(320px,60vmin,600px);max-width:100%}.train-page__counter{color:var(--text-secondary);font-size:var(--fs-lg)}.train-page__start{background:var(--accent-teal);color:var(--text-primary);padding:var(--s-2) var(--s-4);border-radius:var(--r-sm);font-weight:600;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}.train-page__start:hover{background:var(--accent-teal-strong)}.train-page__start:active{transform:translateY(1px)}.train-page__start--cancel{background:var(--accent-amber);color:var(--text-inverse)}.train-page__start--cancel:hover{background:var(--bg-button-amber)}.stats-page{display:flex;flex-direction:column;gap:var(--s-5)}.stats-page__header{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-5)}.stats-page__header h2,.stats-section__header h3{margin:0;font-weight:600}.stats-page__header h2{font-size:var(--fs-2xl)}.stats-page__header p{margin:var(--s-1) 0 0;color:var(--text-secondary)}.stats-filters{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}.stats-filters__chip{min-width:58px;padding:var(--s-2) var(--s-3);border:1px solid var(--border-muted);border-radius:var(--r-sm);color:var(--text-secondary);background:var(--bg-sunken);font-size:var(--fs-sm);font-weight:600}.stats-filters__chip:hover,.stats-filters__chip--active{color:var(--text-primary);border-color:var(--accent-teal);background:#3da1932e}.stats-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3)}.stats-summary__item,.stats-sparkline,.stats-section{background:var(--bg-raised);border:1px solid var(--border-subtle);border-radius:var(--r-md);box-shadow:var(--shadow-sm)}.stats-summary__item{min-height:88px;display:flex;flex-direction:column;justify-content:center;gap:var(--s-1);padding:var(--s-4)}.stats-summary__label,.stats-sparkline__label{color:var(--text-secondary);font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:0}.stats-summary__item strong{font-size:var(--fs-xl);font-weight:600}.stats-trends{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}.stats-sparkline{display:grid;grid-template-columns:112px minmax(120px,1fr) 64px;align-items:center;gap:var(--s-4);min-height:82px;padding:var(--s-4)}.stats-sparkline__svg{width:100%;height:44px;color:var(--accent-teal-strong);overflow:visible}.stats-sparkline__value{justify-self:end;font-size:var(--fs-lg);font-weight:600}.stats-sparkline__empty{grid-column:2 / -1;color:var(--text-muted)}.stats-section{overflow:hidden}.stats-section__header{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:0 var(--s-4);border-bottom:1px solid var(--border-subtle)}.stats-section__header h3{font-size:var(--fs-lg)}.stats-table-wrap{overflow-x:auto}.stats-table{width:100%;border-collapse:collapse;min-width:680px}.stats-table th,.stats-table td{padding:var(--s-3) var(--s-4);text-align:left;white-space:nowrap;border-bottom:1px solid var(--border-subtle)}.stats-table th{color:var(--text-secondary);font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:0;background:var(--bg-sunken)}.stats-table tr:last-child td{border-bottom:0}.stats-table td{color:var(--text-primary)}.stats-empty{margin:0;padding:var(--s-5);color:var(--text-secondary)}@media(max-width:760px){.stats-page__header{align-items:stretch;flex-direction:column}.stats-summary,.stats-trends{grid-template-columns:1fr}.stats-sparkline{grid-template-columns:1fr;gap:var(--s-2)}.stats-sparkline__value{justify-self:start}}.settings-page{max-width:640px;display:flex;flex-direction:column;gap:var(--s-6)}.settings-page__heading{margin:0;font-size:var(--fs-xl);font-weight:600}.settings-page__section{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-4) var(--s-5);background:var(--bg-raised);border:1px solid var(--border-subtle);border-radius:var(--r-md)}.settings-page__section h3{margin:0 0 var(--s-2) 0;font-size:var(--fs-md);font-weight:600;color:var(--text-primary);letter-spacing:.02em}.settings-page__section--danger{border-color:#a73d3559}.settings-page__section--danger h3{color:var(--accent-red-strong)}.settings-page__grid{display:flex;flex-direction:column;gap:var(--s-2)}.settings-page__row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--s-4);padding:var(--s-2) 0;border-bottom:1px solid var(--border-subtle)}.settings-page__row:last-child{border-bottom:0}.settings-page__row--toggle .settings-page__control{gap:var(--s-3)}.settings-page__label{display:flex;flex-direction:column;gap:2px;color:var(--text-primary);font-size:var(--fs-md)}.settings-page__hint{color:var(--text-muted);font-size:var(--fs-xs)}.settings-page__control{display:flex;align-items:center;gap:var(--s-2)}.settings-page__control input[type=number]{width:96px;text-align:right;font-variant-numeric:tabular-nums}.settings-page__control input[type=range]{width:180px;accent-color:var(--accent-teal)}.settings-page__control input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent-teal);cursor:pointer}.settings-page__value{width:44px;text-align:right;color:var(--text-secondary);font-variant-numeric:tabular-nums}.settings-page__saved{color:var(--accent-teal);font-size:var(--fs-xs);animation:settings-saved-fade var(--dur-base) var(--ease-out)}@keyframes settings-saved-fade{0%{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}.settings-page__actions{display:flex;flex-wrap:wrap;gap:var(--s-3)}.settings-page__btn{padding:var(--s-2) var(--s-4);border:1px solid var(--border-muted);border-radius:var(--r-sm);background:var(--bg-sunken);color:var(--text-primary);font-size:var(--fs-sm);transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}.settings-page__btn:hover{background:var(--bg-base)}.settings-page__btn--danger{border-color:#a73d3580;color:var(--accent-red-strong)}.settings-page__btn--danger:hover{background:#a73d351f;border-color:var(--accent-red-strong)}.settings-page__muted{margin:0;color:var(--text-muted);font-size:var(--fs-xs)}:root{--bg-base: #0c0f17;--bg-raised: #131826;--bg-sunken: #080b13;--bg-header: #0f1424;--bg-overlay: #0a1020;--border-subtle: rgba(126, 162, 222, .06);--border-muted: rgba(126, 162, 222, .14);--border-strong: rgba(126, 162, 222, .26);--text-primary: #dde4f0;--text-secondary: #92a0bd;--text-muted: #5b687f;--text-inverse: #0a0d15;--accent-white: #d7d7d7;--accent-teal: #5cc4ff;--accent-teal-strong: #82d6ff;--accent-amber: #c79a55;--accent-amber-strong: #dcb069;--accent-red: #c45757;--accent-red-strong: #db6e6e;--color-stim-active: var(--accent-white);--color-correct: #5ce0a3;--color-incorrect: #e85a5a;--color-hotkey: var(--accent-teal);--feedback-correct: #5ce0a3;--feedback-correct-bg: rgba(92, 224, 163, .22);--feedback-incorrect: #e85a5a;--feedback-incorrect-bg: rgba(232, 90, 90, .22);--s-1: 4px;--s-2: 8px;--s-3: 12px;--s-4: 16px;--s-5: 24px;--s-6: 32px;--s-7: 48px;--s-8: 64px;--r-sm: 4px;--r-md: 6px;--r-lg: 10px;--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--fs-xs: 12px;--fs-sm: 13px;--fs-md: 15px;--fs-lg: 18px;--fs-xl: 22px;--fs-2xl: 28px;--dur-instant: 80ms;--dur-fast: .14s;--dur-base: .22s;--ease-out: cubic-bezier(.2, .7, .2, 1);--layout-max: 1280px;--header-h: 64px;--side-panel-w: 300px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);--shadow-md: 0 4px 14px rgba(0, 0, 0, .55);--shadow-stim: 0 0 0 1px rgba(92, 196, 255, .36), 0 6px 22px rgba(92, 196, 255, .18);--bg-button-amber: var(--accent-amber-strong)}*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%}html{background:var(--bg-base);color-scheme:dark;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;font-family:var(--font-sans);font-size:var(--fs-md);color:var(--text-primary);background:var(--bg-base);overflow-x:hidden}button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}a{color:var(--accent-teal);text-decoration:none}a:hover{color:var(--accent-teal-strong)}select,input{font:inherit;color:var(--text-primary);background:var(--bg-sunken);border:1px solid var(--border-muted);border-radius:var(--r-sm);padding:var(--s-1) var(--s-2)}select:focus-visible,input:focus-visible,button:focus-visible,a:focus-visible,[role=button]:focus-visible{outline:2px solid var(--accent-teal);outline-offset:2px;border-radius:var(--r-sm)}::selection{background:var(--accent-teal);color:var(--text-inverse)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
