.slider-container{display:flex;flex-direction:column;gap:var(--space-2);width:100%}.slider-header{display:flex;justify-content:space-between;align-items:center}.slider-label{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em}.slider-value{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text);font-variant-numeric:tabular-nums}.slider-track-wrapper{display:flex;flex-direction:column;gap:var(--space-1)}.slider-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:6px;border-radius:var(--radius-full);outline:none;cursor:pointer;background:var(--slider-track);--slider-fill: var(--color-accent);--slider-track: var(--color-surface)}.slider-input::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:var(--radius-full);background:var(--color-accent);cursor:grab;border:2px solid var(--color-surface);box-shadow:var(--shadow-md);transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.slider-input::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:var(--shadow-lg)}.slider-input::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.05)}.slider-input::-moz-range-thumb{width:20px;height:20px;border-radius:var(--radius-full);background:var(--color-accent);cursor:grab;border:2px solid var(--color-surface);box-shadow:var(--shadow-md);transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.slider-input::-moz-range-thumb:hover{transform:scale(1.1)}.slider-ticks{display:flex;justify-content:space-between}.slider-tick{font-size:var(--font-size-xs);color:var(--color-text-subtle);font-variant-numeric:tabular-nums}.slider-input:focus{outline:none}.slider-input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--color-good-tint-strong)}.auth-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:var(--z-modal);animation:fade-in var(--duration-normal) var(--ease-out-expo)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.auth-modal{position:relative;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-8);width:100%;max-width:400px;animation:slide-up var(--duration-slow) var(--ease-out-expo)}@keyframes slide-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.auth-modal__close{position:absolute;top:var(--space-4);right:var(--space-4);width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:24px;background:transparent;border:none;color:var(--color-text-muted);cursor:pointer;border-radius:var(--radius-full);transition:all var(--transition-fast)}.auth-modal__close:hover{color:var(--color-text);background:var(--color-surface-elevated)}.auth-modal__header{text-align:center;margin-bottom:var(--space-6)}.auth-modal__logo{font-size:48px;color:var(--color-accent);margin-bottom:var(--space-4)}.auth-modal__header h2{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);margin-bottom:var(--space-2)}.auth-modal__header p{color:var(--color-text-muted);font-size:var(--font-size-sm)}.auth-modal__error{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3);background:var(--color-off-tint);border:1px solid var(--color-error);border-radius:var(--radius-md);color:var(--color-error);font-size:var(--font-size-sm);margin-bottom:var(--space-4)}.auth-modal__error button{background:none;border:none;color:var(--color-error);cursor:pointer;font-size:18px}.auth-modal__actions{display:flex;flex-direction:column;gap:var(--space-3)}.auth-modal__divider{display:flex;align-items:center;gap:var(--space-4);color:var(--color-text-subtle);font-size:var(--font-size-sm)}.auth-modal__divider:before,.auth-modal__divider:after{content:"";flex:1;height:1px;background:var(--color-border)}.auth-modal__guest-note{font-size:var(--font-size-xs);color:var(--color-text-subtle);text-align:center;margin-top:var(--space-2)}.profile-menu{position:relative}.profile-btn{display:flex;align-items:center;justify-content:center;padding:var(--space-1);background:transparent;border:none;cursor:pointer;border-radius:var(--radius-full);transition:all var(--transition-fast)}.profile-btn:hover{background:var(--color-surface-elevated)}.profile-btn--signin{padding:var(--space-2) var(--space-4);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-accent);background:transparent;border:1px solid var(--color-accent);border-radius:var(--radius-md)}.profile-btn--signin:hover{background:var(--color-accent);color:#fff}.profile-avatar{width:32px;height:32px;border-radius:var(--radius-full);object-fit:cover}.profile-avatar--initial{display:flex;align-items:center;justify-content:center;background:var(--color-accent);color:#fff;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm)}.profile-dropdown{position:absolute;top:calc(100% + var(--space-2));right:0;min-width:200px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;z-index:100;animation:dropdown-appear .15s ease-out}@keyframes dropdown-appear{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.profile-dropdown__header{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);padding-bottom:var(--space-1)}.profile-dropdown__name{font-weight:var(--font-weight-semibold)}.profile-dropdown__badge{font-size:var(--font-size-xs);padding:2px 6px;background:var(--color-surface-elevated);border-radius:var(--radius-full);color:var(--color-text-muted)}.profile-dropdown__badge--pro{background:linear-gradient(135deg,var(--color-accent),#8B5CF6);color:#fff;font-weight:var(--font-weight-bold);letter-spacing:.05em}.profile-dropdown__email{display:block;padding:0 var(--space-4) var(--space-3);font-size:var(--font-size-xs);color:var(--color-text-subtle)}.profile-dropdown__divider{height:1px;background:var(--color-border);margin:var(--space-1) 0}.profile-dropdown__item{display:flex;align-items:center;gap:var(--space-2);width:100%;padding:var(--space-3) var(--space-4);font-size:var(--font-size-sm);color:var(--color-text);background:transparent;border:none;cursor:pointer;text-align:left;transition:all var(--transition-fast)}.profile-dropdown__item:hover{background:var(--color-surface-elevated)}.profile-dropdown__item--accent{color:var(--color-accent)}.profile-dropdown__item--danger{color:var(--color-error)}.offline-indicator{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);animation:indicator-fade-in var(--duration-slow) var(--ease-out-expo) both;background:var(--color-surface-elevated)}.offline-indicator__dot{display:block;width:8px;height:8px;border-radius:var(--radius-full);background:var(--color-text-muted)}.offline-indicator__label{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--color-text-muted);letter-spacing:.02em;white-space:nowrap}.offline-indicator__dot--offline{background:var(--color-warning);animation:indicator-pulse 2s ease-in-out infinite}.offline-indicator__dot--offline~.offline-indicator__label{color:var(--color-warning)}.offline-indicator__dot--syncing{background:var(--color-accent);animation:indicator-spin 1s linear infinite}.offline-indicator__dot--syncing~.offline-indicator__label{color:var(--color-accent)}.offline-indicator__dot--error{background:var(--color-error)}.offline-indicator__dot--error~.offline-indicator__label{color:var(--color-error)}.offline-indicator__dot--pending{background:var(--color-text-subtle)}@keyframes indicator-fade-in{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes indicator-pulse{0%,to{opacity:1}50%{opacity:.4}}@keyframes indicator-spin{0%{box-shadow:0 0 #3b82f666}50%{box-shadow:0 0 0 4px #3b82f600}to{box-shadow:0 0 #3b82f600}}.update-banner{display:flex;align-items:center;justify-content:space-between;padding:var(--space-2) var(--space-4);background:var(--color-accent-muted);border-bottom:1px solid var(--color-accent);animation:banner-slide-in var(--duration-slow) var(--ease-out-expo) both}.update-banner--downloading{flex-direction:column;gap:var(--space-2)}.update-banner--ready{background:var(--color-perfect-tint-strong);border-bottom-color:var(--color-perfect)}.update-banner--error{background:var(--color-off-tint);border-bottom-color:var(--color-error)}.update-banner__content{display:flex;align-items:center;gap:var(--space-2);min-width:0}.update-banner__icon{font-size:var(--font-size-sm);flex-shrink:0}.update-banner__text{font-size:var(--font-size-sm);color:var(--color-text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.update-banner__text strong{font-weight:var(--font-weight-semibold)}.update-banner__notes{color:var(--color-text-muted)}.update-banner__actions{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0}.update-banner__dismiss{display:flex;align-items:center;justify-content:center;width:24px;height:24px;font-size:var(--font-size-xs);color:var(--color-text-muted);background:transparent;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:color var(--transition-fast),background var(--transition-fast)}.update-banner__dismiss:hover{color:var(--color-text);background:var(--color-surface-elevated)}.update-banner__progress{width:100%;height:3px;background:var(--color-border);border-radius:var(--radius-full);overflow:hidden}.update-banner__progress-bar{height:100%;background:var(--color-accent);border-radius:var(--radius-full);transition:width var(--transition-normal)}@keyframes banner-slide-in{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}.app-shell{display:flex;flex-direction:column;min-height:100vh;background:var(--color-bg)}.top-bar{display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 var(--space-4);background:var(--color-surface);border-bottom:1px solid var(--color-border);flex-shrink:0}.top-bar__left{display:flex;align-items:center;gap:var(--space-3)}.top-bar__menu-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:transparent;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:background var(--transition-fast)}.top-bar__menu-btn:hover{background:var(--color-surface-elevated)}.menu-icon{display:block;width:18px;height:2px;background:var(--color-text);position:relative}.menu-icon:before,.menu-icon:after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--color-text)}.menu-icon:before{top:-6px}.menu-icon:after{top:6px}.top-bar__logo{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);color:var(--color-text);letter-spacing:-.02em}.top-bar__center{display:flex;gap:var(--space-1)}.mode-btn{padding:var(--space-2) var(--space-4);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-muted);background:transparent;border:none;border-radius:var(--radius-md);cursor:pointer;transition:color var(--transition-fast),background var(--transition-fast)}.mode-btn:hover{color:var(--color-text);background:var(--color-surface-elevated)}.mode-btn--active{color:var(--color-text);background:var(--color-accent)}.mode-btn--active:hover{background:var(--color-accent-hover)}.top-bar__right{display:flex;align-items:center;gap:var(--space-2)}.icon-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;font-size:var(--font-size-lg);color:var(--color-text-muted);background:transparent;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast)}.icon-btn:hover{color:var(--color-text);background:var(--color-surface-elevated)}.avatar{display:flex;align-items:center;justify-content:center;width:28px;height:28px;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-bg);background:var(--color-accent);border-radius:var(--radius-full)}.app-shell__body{display:flex;flex:1;overflow:hidden}.left-nav{display:flex;flex-direction:column;background:var(--color-surface);border-right:1px solid var(--color-border);transition:width var(--transition-normal);overflow:hidden;flex-shrink:0}.left-nav--expanded{width:200px}.left-nav--collapsed{width:56px}.left-nav__list{list-style:none;padding:var(--space-2);margin:0}.nav-item{display:flex;align-items:center;width:100%;padding:var(--space-3);gap:var(--space-3);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-muted);background:transparent;border:none;border-radius:var(--radius-md);cursor:pointer;transition:color var(--transition-fast),background var(--transition-fast);text-align:left}.nav-item:hover{color:var(--color-text);background:var(--color-surface-elevated)}.nav-item--active{color:var(--color-text);background:var(--color-bg)}.nav-item__icon{font-size:var(--font-size-lg);flex-shrink:0;width:24px;text-align:center}.nav-item__label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.main-content{flex:1;overflow:auto;padding:var(--space-6);background:var(--color-bg)}@media (max-width: 768px){.top-bar__center{display:none}.left-nav--expanded{width:56px}.nav-item__label{display:none}}.loading-skeleton{display:flex;flex-direction:column;gap:var(--space-4);width:100%;height:100%;min-height:200px}.loading-skeleton__header{display:flex;flex-direction:column;gap:var(--space-2)}.loading-skeleton__body{display:flex;gap:var(--space-4);flex:1}.skeleton-bar{height:var(--space-4);background:var(--skeleton-base);border-radius:var(--radius-md);animation:skeleton-shimmer 1.5s ease-in-out infinite}.skeleton-bar--md{width:40%}.skeleton-bar--sm{width:20%}.skeleton-block{background:var(--skeleton-base);border-radius:var(--radius-lg);animation:skeleton-shimmer 1.5s ease-in-out infinite}.skeleton-block--large{flex:1;min-height:300px}.skeleton-block--small{height:120px}.skeleton-sidebar{width:280px;display:flex;flex-direction:column;gap:var(--space-4);flex-shrink:0}@keyframes skeleton-shimmer{0%{opacity:.6}50%{opacity:1}to{opacity:.6}}:root{--color-bg: #0D0D0D;--color-surface: #1A1A1A;--color-surface-elevated: #242424;--color-border: #2A2A2A;--color-border-subtle: #1F1F1F;--color-text: #E5E5E5;--color-text-muted: #808080;--color-text-subtle: #4A4A4A;--color-accent: #3B82F6;--color-accent-hover: #2563EB;--color-accent-muted: #1D4ED8;--color-perfect: #22C55E;--color-good: #3B82F6;--color-off: #EF4444;--color-success: #22C55E;--color-warning: #EAB308;--color-error: #EF4444;--font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "SF Mono", "Fira Code", "Fira Mono", Consolas, monospace;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.25rem;--font-size-xl: 1.5rem;--font-size-2xl: 2rem;--font-size-3xl: 3rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--line-height-tight: 1.25;--line-height-normal: 1.5;--line-height-relaxed: 1.75;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-full: 9999px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);--shadow-md: 0 4px 6px rgba(0, 0, 0, .5);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .5);--transition-fast: .15s ease;--transition-normal: .2s ease;--transition-slow: .3s ease;--z-base: 0;--z-dropdown: 100;--z-modal: 200;--z-overlay: 300;--z-toast: 400;--color-surface-primary: var(--color-surface);--color-surface-secondary: var(--color-surface);--color-text-primary: var(--color-text);--color-text-secondary: var(--color-text-muted);--color-text-tertiary: var(--color-text-subtle);--color-border-hover: var(--color-text-subtle);--color-perfect-tint: rgba(34, 197, 94, .15);--color-perfect-tint-strong: rgba(34, 197, 94, .2);--color-good-tint: rgba(59, 130, 246, .15);--color-good-tint-strong: rgba(59, 130, 246, .2);--color-off-tint: rgba(239, 68, 68, .15);--color-off-tint-strong: rgba(239, 68, 68, .2);--color-warning-tint: rgba(245, 158, 11, .15);--color-warning-tint-strong: rgba(245, 158, 11, .1);--color-elite-tint: rgba(236, 72, 153, .15);--color-tier-beginner: #22C55E;--color-tier-pro: #F59E0B;--color-tier-elite: #EC4899;--radius-xl: 16px;--ease-out-expo: cubic-bezier(.16, 1, .3, 1);--ease-out-back: cubic-bezier(.34, 1.56, .64, 1);--duration-fast: .12s;--duration-normal: .2s;--duration-slow: .35s;--hover-lift: translateY(-2px);--press-scale: scale(.98);--skeleton-base: var(--color-surface);--skeleton-shimmer: var(--color-surface-elevated)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-family);font-size:var(--font-size-base);line-height:var(--line-height-normal);color:var(--color-text);background-color:var(--color-bg);min-height:100vh}#root{min-height:100vh}:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}::selection{background-color:var(--color-accent);color:#fff}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-surface)}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--color-text-muted)}.view-content{max-width:800px}.view-content--full{max-width:none;height:calc(100vh - 56px - var(--space-6) * 2)}.placeholder-card{padding:var(--space-6);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg)}.placeholder-card p{color:var(--color-text-muted)}.view-fallback-title{margin-bottom:var(--space-4);text-transform:capitalize}@media (prefers-reduced-motion: reduce){:root{--transition-fast: 0ms ease;--transition-normal: 0ms ease;--transition-slow: 0ms ease;--duration-fast: 0ms;--duration-normal: 0ms;--duration-slow: 0ms}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.result-score,.result-error{display:flex;flex-direction:column;gap:var(--space-1)}.result-score__label,.result-error__label{font-size:var(--font-size-xs);color:var(--color-text-subtle);text-transform:uppercase}.result-score__value{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);font-family:var(--font-mono);color:var(--color-accent)}.result-error__value{font-size:var(--font-size-lg);font-family:var(--font-mono);color:var(--color-text-muted)}.level-complete{text-align:center;animation:level-complete-appear var(--duration-slow) var(--ease-out-expo);will-change:transform,opacity}@keyframes level-complete-appear{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.level-complete__grade{display:flex;align-items:center;justify-content:center;gap:var(--space-2);font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);margin-bottom:var(--space-4)}.level-complete__grade--perfect{color:var(--color-success)}.level-complete__grade--good{color:var(--color-accent)}.level-complete__grade--off{color:var(--color-error)}.level-complete__score{font-size:var(--font-size-2xl);font-weight:var(--font-weight-semibold);font-family:var(--font-mono);color:var(--color-text);margin-bottom:var(--space-2)}.level-complete__level{font-size:var(--font-size-sm);color:var(--color-text-muted);margin-bottom:var(--space-6)}.level-complete__next{padding:var(--space-3) var(--space-6);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:#fff;background:var(--color-accent);border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast)}.level-complete__next:hover{background:var(--color-accent-hover)}.grade-stat{display:flex;flex-direction:column;align-items:center;gap:var(--space-1)}.grade-stat__count{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);font-family:var(--font-mono)}.grade-stat--perfect .grade-stat__count{color:var(--color-success)}.grade-stat--good .grade-stat__count{color:var(--color-accent)}.grade-stat--off .grade-stat__count{color:var(--color-error)}.grade-stat__label{font-size:var(--font-size-sm);color:var(--color-text-muted)}