@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap";.app{width:100%;min-height:100vh}.app-nav{display:flex;justify-content:center;align-items:center;gap:2rem;padding:1rem;background:#0f172af2;border-bottom:1px solid rgba(255,255,255,.1);position:sticky;top:0;z-index:100}.nav-btn{background:#6464644d;border:1px solid rgba(255,255,255,.2);color:#ddd;padding:.5rem 1rem;border-radius:6px;cursor:pointer;font-size:1rem;transition:all .2s ease;font-family:inherit}.nav-btn:hover:not(:disabled){background:#78787866;transform:translateY(-1px)}.nav-btn:active:not(:disabled){transform:translateY(0)}.nav-btn:disabled{opacity:.3;cursor:not-allowed}.level-indicator{font-size:1rem;color:#94a3b8;font-weight:500;font-family:JetBrains Mono,Fira Code,monospace}@media (max-width: 768px){.app-nav{gap:1rem}.nav-btn{padding:.4rem .8rem;font-size:.9rem}.level-indicator{font-size:.85rem}}.logo-horizontal{display:inline-flex;align-items:center;gap:.75rem}.logo-horizontal-small{gap:.5rem}.logo-horizontal-large{gap:1.25rem}.logo-horizontal-hero{gap:2.5rem;align-items:center}.logo-stacked{display:inline-flex;flex-direction:column;align-items:center;gap:.75rem}.logo-stacked-small{gap:.5rem}.logo-stacked-large{gap:1rem}.logo-stacked-hero{gap:1.5rem}.logo-wordmark{font-family:var(--font-mono, "JetBrains Mono", "Fira Code", "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);letter-spacing:.04em;white-space:nowrap;line-height:1}.logo-wordmark-small{font-size:1rem}.logo-wordmark-medium{font-size:1.25rem}.logo-wordmark-large{font-size:1.5rem}.logo-wordmark-hero{font-size:5rem}.logo-wordmark .code{color:var(--color-code, #F9FAFB);font-weight:400}.logo-wordmark .league{color:var(--color-league, #00E5FF);font-weight:600}.logo-tagline{font-family:var(--font-mono, ui-monospace, monospace);font-size:.875rem;color:var(--color-text-muted, #9CA3AF);letter-spacing:.02em;margin-top:.5rem}.logo-stacked-hero .logo-tagline{font-size:1.25rem;margin-top:0rem}@media (max-width: 640px){.logo-horizontal{gap:.5rem}.logo-wordmark-medium{font-size:1.125rem}.logo-wordmark-large{font-size:1.25rem}}@media (min-width: 641px) and (max-width: 1024px){.logo-wordmark-medium{font-size:1.125rem}}.logo-icon{border-radius:10px;flex-shrink:0}.logo-horizontal,.logo-stacked{padding:.5rem}.access-gate{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--color-bg-dark-gradient, linear-gradient(135deg, #020617, #050B24, #0B1029));padding:2rem}.access-gate-card{max-width:480px;width:100%;background:#1e1e1e8c;border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:2.5rem 2rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.25rem;box-shadow:0 8px 32px #0000004d}.access-gate-user{display:flex;align-items:center;gap:.75rem;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:.5rem 1rem .5rem .5rem}.access-gate-avatar{width:36px;height:36px;border-radius:50%}.access-gate-user-meta{text-align:left;line-height:1.2}.access-gate-name{color:var(--color-text, #E5E7EB);font-weight:500;font-size:.95rem}.access-gate-email{color:var(--color-text-muted, #9CA3AF);font-size:.85rem}.access-gate-title{color:var(--color-league, #00E5FF);font-size:1.6rem;font-weight:700;margin:0}.access-gate-message{color:var(--color-text-muted, #9CA3AF);font-size:1rem;line-height:1.6;margin:0}.access-gate-error{color:#fca5a5;background:#ef44441f;border:1px solid rgba(239,68,68,.4);border-radius:8px;padding:.6rem .9rem;font-size:.9rem;width:100%;box-sizing:border-box}.access-gate-primary{background:var(--color-league, #00E5FF);color:#020617;border:none;border-radius:8px;padding:.75rem 1.5rem;font-size:1rem;font-weight:600;cursor:pointer;transition:transform .15s ease,opacity .15s ease;width:100%;max-width:260px}.access-gate-primary:hover:not(:disabled){transform:translateY(-1px)}.access-gate-primary:disabled{opacity:.6;cursor:not-allowed}.access-gate-secondary{background:transparent;color:var(--color-text, #E5E7EB);border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:.6rem 1.25rem;font-size:.95rem;cursor:pointer;transition:background .15s ease}.access-gate-secondary:hover{background:#ffffff0f}.access-gate-link{background:transparent;border:none;color:var(--color-text-muted, #9CA3AF);font-size:.9rem;cursor:pointer;text-decoration:underline;margin-top:.5rem}.access-gate-link:hover{color:var(--color-text, #E5E7EB)}.toast{position:relative;display:flex;align-items:flex-start;gap:12px;min-width:320px;max-width:480px;padding:16px;background:var(--background-secondary, #1e1e1e);border:1px solid var(--border-color, #333);border-radius:8px;box-shadow:0 4px 12px #0000004d;animation:toast-enter .3s ease-out}.toast-exit{animation:toast-exit .3s ease-out forwards}@keyframes toast-enter{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes toast-exit{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}.toast-icon{font-size:24px;line-height:1;flex-shrink:0}.toast-content{flex:1;min-width:0}.toast-title{font-size:14px;font-weight:600;color:var(--text-primary, #fff);margin-bottom:4px}.toast-message{font-size:13px;color:var(--text-secondary, #aaa);line-height:1.4}.toast-action{padding:6px 12px;background:var(--primary-color, #00d4ff);color:var(--background-primary, #000);border:none;border-radius:4px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .2s}.toast-action:hover{background:var(--primary-color-hover, #00b8e6);transform:scale(1.05)}.toast-dismiss{position:absolute;top:8px;right:8px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--text-secondary, #aaa);font-size:20px;line-height:1;cursor:pointer;border-radius:4px;transition:all .2s}.toast-dismiss:hover{background:#ffffff1a;color:var(--text-primary, #fff)}.toast-info{border-left:4px solid #00d4ff}.toast-success{border-left:4px solid #00ff88}.toast-warning{border-left:4px solid #ffaa00}.toast-error{border-left:4px solid #ff4444}.toast-container{position:fixed;top:20px;right:20px;z-index:10000;display:flex;flex-direction:column;gap:12px;pointer-events:none}.toast-container>*{pointer-events:all}@media (max-width: 768px){.toast-container{top:10px;right:10px;left:10px}.toast{min-width:unset;max-width:unset;width:100%}}:root{--font-mono: "JetBrains Mono", "Fira Code", "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-bg-dark: #020617;--color-bg-dark-alt: #050B24;--color-bg-dark-tertiary: #0B1029;--color-bg-dark-gradient: linear-gradient(135deg, #020617, #050B24, #0B1029);--color-code: #F9FAFB;--color-league: #00E5FF;--color-accent-cyan: #00E5FF;--color-accent-orange: #FF8A24;--color-accent-purple: #D946EF;--color-accent-blue: #2563EB;--color-text-primary: #F9FAFB;--color-text-secondary: #E2E8F0;--color-text-muted: #9CA3AF;--color-text-disabled: #6B7280;--color-border: rgba(255, 255, 255, .1);--color-border-hover: rgba(0, 229, 255, .3);--color-border-active: rgba(0, 229, 255, .5);--color-card-bg: rgba(255, 255, 255, .03);--color-card-bg-hover: rgba(255, 255, 255, .06);--color-card-border: rgba(255, 255, 255, .08);--color-success: #10B981;--color-success-bg: rgba(16, 185, 129, .1);--color-error: #EF4444;--color-error-bg: rgba(239, 68, 68, .1);--color-warning: #F59E0B;--color-warning-bg: rgba(245, 158, 11, .1);--color-gold: #FACC15;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .5);--shadow-glow: 0 0 20px rgba(0, 229, 255, .3);--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-base: .2s cubic-bezier(.4, 0, .2, 1);--transition-slow: .3s cubic-bezier(.4, 0, .2, 1)}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow-x:hidden}body{font-family:JetBrains Mono,Fira Code,Consolas,Monaco,monospace;background:#0f172a;color:#e2e8f0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{width:100%;min-height:100vh}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:#1e1e1e80}::-webkit-scrollbar-thumb{background:#64646480;border-radius:5px}::-webkit-scrollbar-thumb:hover{background:#787878b3}::selection{background:#3b82f64d;color:#fff}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #60a5fa;outline-offset:2px}button,.control-btn,.nav-btn,.character-display,.code-container{user-select:none;-webkit-user-select:none}*{transition-timing-function:cubic-bezier(.4,0,.2,1)}.loading-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#0f172a,#1e293b);color:#e2e8f0}.loading-spinner{width:50px;height:50px;border:4px solid rgba(96,165,250,.2);border-top-color:#60a5fa;border-radius:50%;animation:spin .8s linear infinite;margin-bottom:1rem}@keyframes spin{to{transform:rotate(360deg)}}.page-layout{min-height:100vh;background:var(--color-bg-dark-gradient);color:var(--color-text-primary)}.page-title{font-size:2.5rem;font-weight:700;text-align:center;margin:var(--space-2xl) 0 var(--space-md) 0;background:linear-gradient(135deg,var(--color-accent-cyan) 0%,var(--color-accent-purple) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.content-container{max-width:1200px;margin:0 auto;padding:var(--space-xl)}.card{background:var(--color-card-bg);border:1px solid var(--color-card-border);border-radius:var(--radius-lg);padding:var(--space-xl);transition:all var(--transition-base)}.card:hover{background:var(--color-card-bg-hover);border-color:var(--color-border-hover);transform:translateY(-2px);box-shadow:var(--shadow-md)}.card-interactive{cursor:pointer}.card-interactive:active{transform:translateY(0)}.section-header{text-align:center;margin-bottom:var(--space-2xl)}.section-title{font-size:2rem;font-weight:600;color:var(--color-league);margin-bottom:var(--space-sm)}.section-subtitle{font-size:1.125rem;color:var(--color-text-muted);line-height:1.6}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:.75rem 1.5rem;font-family:var(--font-mono);font-size:.875rem;font-weight:500;border-radius:var(--radius-md);border:none;cursor:pointer;transition:all var(--transition-base);white-space:nowrap}.btn-primary{background:var(--color-accent-cyan);color:var(--color-bg-dark);border:1px solid var(--color-accent-cyan)}.btn-primary:hover{background:transparent;color:var(--color-accent-cyan);box-shadow:var(--shadow-glow)}.btn-secondary{background:transparent;color:var(--color-accent-cyan);border:1px solid var(--color-accent-cyan)}.btn-secondary:hover{background:var(--color-accent-cyan);color:var(--color-bg-dark)}.btn-ghost{background:var(--color-card-bg);color:var(--color-text-secondary);border:1px solid var(--color-border)}.btn-ghost:hover{background:var(--color-card-bg-hover);border-color:var(--color-border-hover)}.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-lg)}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-lg)}.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-lg)}@media (max-width: 1024px){.grid-4{grid-template-columns:repeat(2,1fr)}}@media (max-width: 768px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.content-container{padding:var(--space-md)}}.page-title{font-size:2.5rem;font-weight:700;color:var(--color-text-primary);margin-bottom:var(--space-md)}.page-description{font-size:1.125rem;color:var(--color-text-muted);line-height:1.6;margin-bottom:var(--space-2xl)}