:root{--bg-primary:#07080f;--bg-secondary:#0e1019;--bg-card:#11131ed9;--bg-card-hover:#191c2df2;--bg-glass:#0f111ca6;--bg-input:#141623e6;--border-subtle:#ffffff0f;--border-medium:#ffffff1a;--border-accent:#6366f14d;--text-primary:#f1f5f9;--text-secondary:#94a3b8;--text-muted:#64748b;--text-dim:#475569;--accent-blue:#3b82f6;--accent-indigo:#6366f1;--accent-purple:#8b5cf6;--accent-emerald:#10b981;--accent-amber:#f59e0b;--accent-rose:#f43f5e;--accent-cyan:#06b6d4;--gradient-primary:linear-gradient(135deg, #3b82f6, #8b5cf6);--gradient-success:linear-gradient(135deg, #10b981, #06b6d4);--gradient-warm:linear-gradient(135deg, #f59e0b, #f43f5e);--gradient-cool:linear-gradient(135deg, #06b6d4, #6366f1);--shadow-sm:0 2px 8px #0000004d;--shadow-md:0 4px 16px #0006;--shadow-lg:0 8px 32px #00000080;--shadow-glow-blue:0 0 20px #3b82f626;--shadow-glow-purple:0 0 20px #8b5cf626;--shadow-glow-emerald:0 0 20px #10b98126;--sidebar-width:280px;--header-height:60px;--ease-out-expo:cubic-bezier(.16, 1, .3, 1);--ease-out-back:cubic-bezier(.34, 1.56, .64, 1);--transition-fast:.15s ease;--transition-medium:.3s var(--ease-out-expo);--transition-slow:.5s var(--ease-out-expo);--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-full:50%}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:border-box;touch-action:pan-y pinch-zoom;width:100%;max-width:100%;overflow-x:hidden}body{background:var(--bg-primary);color:var(--text-primary);box-sizing:border-box;touch-action:pan-y pinch-zoom;width:100%;max-width:100%;min-height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.7;position:relative;overflow-x:hidden}img,video,canvas,svg,table,pre{max-width:100%}code{font-family:JetBrains Mono,monospace}code:not(pre code){color:#f1f5f9;word-break:break-word;overflow-wrap:break-word;background:#ffffff14;border:1px solid #ffffff1a;border-radius:4px;padding:2px 6px;font-size:.85em}::selection{color:#fff;background:#6366f14d}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#fff3}a{color:var(--accent-blue);transition:color var(--transition-fast);text-decoration:none}a:hover{color:var(--accent-indigo)}.top-progress-bar{z-index:1000;background:#ffffff0d;height:3px;position:fixed;top:0;left:0;right:0}.top-progress-fill{background:var(--gradient-primary);width:0%;height:100%;transition:width .5s var(--ease-out-expo);border-radius:0 2px 2px 0;box-shadow:0 0 10px #6366f180}.mobile-header{box-sizing:border-box;width:100%;max-width:100%;height:var(--header-height);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border-subtle);z-index:960;background:#07080ff2;align-items:center;gap:8px;padding:0 12px;display:none;position:fixed;top:3px;left:0;right:0;overflow:hidden}.hamburger{cursor:pointer;border-radius:var(--radius-sm);width:44px;height:44px;transition:background var(--transition-fast);-webkit-tap-highlight-color:transparent;touch-action:manipulation;z-index:965;background:0 0;border:none;flex-direction:column;flex-shrink:0;justify-content:center;align-items:center;gap:5px;margin-left:-4px;padding:8px;display:flex}.hamburger:hover,.hamburger:active{background:#ffffff14}.hamburger span{background:var(--text-primary);width:22px;height:2px;transition:var(--transition-medium);pointer-events:none;border-radius:2px;display:block}.hamburger.active span:first-child{transform:rotate(45deg)translate(5px,5px)}.hamburger.active span:nth-child(2){opacity:0}.hamburger.active span:nth-child(3){transform:rotate(-45deg)translate(5px,-5px)}.mobile-logo{white-space:nowrap;text-overflow:ellipsis;flex:1;align-items:center;gap:8px;min-width:0;font-size:.95rem;font-weight:700;display:flex;overflow:hidden}.mobile-header-right{flex-shrink:0;align-items:center;gap:6px;max-width:58%;display:flex}.mobile-xp{color:var(--accent-amber);border-radius:var(--radius-sm);white-space:nowrap;background:#f59e0b1a;flex-shrink:0;padding:4px 8px;font-size:.78rem;font-weight:700}.mobile-callsign-btn{white-space:nowrap;text-overflow:ellipsis;cursor:pointer;max-width:110px;font-family:JetBrains Mono,monospace;font-size:.74rem;overflow:hidden}.sidebar-overlay{-webkit-backdrop-filter:blur(4px);z-index:970;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s var(--ease-out-expo), visibility .3s var(--ease-out-expo);background:#000000b3;position:fixed;inset:0}.sidebar-overlay.active{opacity:1;visibility:visible;pointer-events:auto}.sidebar{width:var(--sidebar-width);background:var(--bg-secondary);border-right:1px solid var(--border-subtle);z-index:950;transition:transform var(--transition-medium);flex-direction:column;display:flex;position:fixed;top:3px;bottom:0;left:0;overflow:hidden auto}body.sidebar-locked{touch-action:none;overflow:hidden}.sidebar-header{border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;padding:20px 18px;display:flex}.sidebar-close-btn{border:1px solid var(--border-subtle);color:var(--text-muted);border-radius:var(--radius-sm);cursor:pointer;width:32px;height:32px;transition:all var(--transition-fast);background:#ffffff0d;justify-content:center;align-items:center;font-size:.9rem;display:none}.sidebar-close-btn:hover{color:var(--text-primary);background:#ffffff1a}.logo{align-items:center;gap:12px;display:flex}.logo-icon-wrap{background:var(--gradient-primary);border-radius:var(--radius-md);width:40px;height:40px;box-shadow:var(--shadow-glow-blue);justify-content:center;align-items:center;font-size:1.2rem;display:flex}.logo-icon{font-size:1.2rem}.logo-text{flex-direction:column;display:flex}.logo-title{letter-spacing:-.02em;background:var(--gradient-primary);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1rem;font-weight:800}.logo-subtitle{color:var(--text-muted);letter-spacing:.05em;text-transform:uppercase;font-size:.65rem;font-weight:500}.player-card{border-bottom:1px solid var(--border-subtle);align-items:center;gap:14px;padding:16px 18px;display:flex}.level-badge{flex-shrink:0;width:52px;height:52px;position:relative}.level-ring{width:100%;height:100%;transform:rotate(-90deg)}.level-ring-bg{fill:none;stroke:#ffffff0f;stroke-width:4px}.level-ring-fill{fill:none;stroke:url(#levelGradient);stroke-width:4px;stroke-linecap:round;stroke-dasharray:163.36;stroke-dashoffset:163.36px;transition:stroke-dashoffset .8s var(--ease-out-expo)}.level-number{color:var(--accent-indigo);justify-content:center;align-items:center;font-size:1.1rem;font-weight:800;display:flex;position:absolute;inset:0}.player-info{flex:1;min-width:0}.player-rank{color:var(--text-primary);letter-spacing:.02em;margin-bottom:6px;font-size:.8rem;font-weight:700;display:block}.xp-bar-container{width:100%}.xp-bar{background:#ffffff0f;border-radius:3px;width:100%;height:6px;margin-bottom:4px;overflow:hidden}.xp-fill{background:var(--gradient-primary);width:0%;height:100%;transition:width .6s var(--ease-out-expo);border-radius:3px}.xp-text{color:var(--text-muted);font-size:.65rem;font-weight:500}.sidebar-nav{flex-direction:column;flex:1;gap:4px;padding:12px 10px;display:flex}.nav-item{border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);border:1px solid #0000;align-items:center;gap:12px;padding:10px 12px;display:flex;position:relative}.nav-item:hover{border-color:var(--border-subtle);background:#ffffff0a}.nav-item.active{background:#6366f114;border-color:#6366f133}.nav-item.active:before{content:"";background:var(--gradient-primary);border-radius:0 2px 2px 0;width:3px;height:60%;position:absolute;top:50%;left:0;transform:translateY(-50%)}.nav-icon{border-radius:var(--radius-sm);width:36px;height:36px;transition:all var(--transition-fast);flex-shrink:0;justify-content:center;align-items:center;font-size:1.1rem;display:flex}.nav-item-info{flex:1;min-width:0}.nav-item-title{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:.82rem;font-weight:600;display:block;overflow:hidden}.nav-item-subtitle{color:var(--text-muted);font-size:.65rem;font-weight:400;display:block}.nav-progress{flex-shrink:0;width:28px;height:28px;position:relative}.nav-progress svg{width:100%;height:100%;transform:rotate(-90deg)}.nav-progress-bg{fill:none;stroke:#ffffff0f;stroke-width:3px}.nav-progress-fill{fill:none;stroke-width:3px;stroke-linecap:round;stroke-dasharray:69.12;stroke-dashoffset:69.12px;transition:stroke-dashoffset .8s var(--ease-out-expo)}.nav-check{justify-content:center;align-items:center;font-size:.7rem;display:flex;position:absolute;inset:0}.sidebar-footer{border-top:1px solid var(--border-subtle);padding:14px 14px 18px}.streak-card{border-radius:var(--radius-md);background:#f59e0b0f;border:1px solid #f59e0b1f;align-items:center;gap:10px;margin-bottom:12px;padding:10px 14px;display:flex}.streak-flame{font-size:1.3rem}.streak-info{flex-direction:column;display:flex}.streak-count{color:var(--accent-amber);font-size:1rem;font-weight:800}.streak-label{color:var(--text-muted);font-size:.65rem;font-weight:500}.stats-mini{gap:8px;display:flex}.stat-mini{text-align:center;border-radius:var(--radius-sm);border:1px solid var(--border-subtle);background:#ffffff08;flex:1;padding:8px}.stat-mini-value{color:var(--text-primary);font-size:1rem;font-weight:800;display:block}.stat-mini-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:.6rem;font-weight:500;display:block}.main-content{margin-left:var(--sidebar-width);min-height:100vh;width:calc(100% - var(--sidebar-width));max-width:calc(100% - var(--sidebar-width));box-sizing:border-box;min-width:0;padding:40px 48px 80px;overflow-x:hidden}.dashboard{animation:fadeInUp .6s var(--ease-out-expo)}.hero-section{border-radius:var(--radius-xl);align-items:flex-end;min-height:300px;margin-bottom:40px;padding:40px;display:flex;position:relative;overflow:hidden}.hero-bg{z-index:0;background-position:50%;background-size:cover;position:absolute;inset:0}.hero-bg:after{content:"";background:linear-gradient(#07080f33 0%,#07080f66 50%,#07080ff2 100%);position:absolute;inset:0}.hero-content{z-index:1;max-width:600px;position:relative}.hero-badge{border-radius:var(--radius-sm);color:var(--accent-indigo);text-transform:uppercase;letter-spacing:.05em;background:#6366f126;border:1px solid #6366f140;align-items:center;gap:6px;margin-bottom:16px;padding:5px 12px;font-size:.72rem;font-weight:600;display:inline-flex}.hero-title{letter-spacing:-.03em;background:linear-gradient(135deg,#fff 0%,#94a3b8 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:12px;font-size:2.4rem;font-weight:900;line-height:1.15}.hero-desc{color:var(--text-secondary);max-width:500px;font-size:1rem;line-height:1.7}.stats-row{grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:40px;display:grid}.stat-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all var(--transition-medium);padding:20px}.stat-card:hover{border-color:var(--border-medium);box-shadow:var(--shadow-md);transform:translateY(-2px)}.stat-icon{margin-bottom:12px;font-size:1.5rem;display:block}.stat-value{letter-spacing:-.02em;margin-bottom:2px;font-size:1.8rem;font-weight:800;display:block}.stat-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:.75rem;font-weight:500}.modules-section{margin-bottom:40px}.section-title{letter-spacing:-.02em;align-items:center;gap:10px;margin-bottom:20px;font-size:1.3rem;font-weight:800;display:flex}.section-title-line{background:var(--border-subtle);flex:1;height:1px}.modules-grid{box-sizing:border-box;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:20px;width:100%;display:grid}.module-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-medium);padding:24px;position:relative;overflow:hidden}.module-card:before{content:"";background:var(--card-accent,var(--gradient-primary));opacity:0;height:3px;transition:opacity var(--transition-fast);position:absolute;top:0;left:0;right:0}.module-card:hover{border-color:var(--border-medium);box-shadow:var(--shadow-lg);transform:translateY(-4px)}.module-card:hover:before{opacity:1}.module-card-header{align-items:flex-start;gap:14px;margin-bottom:14px;display:flex}.module-card-icon{border-radius:var(--radius-md);flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;font-size:1.4rem;display:flex}.module-card-meta{flex:1}.module-card-number{color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px;font-size:.65rem;font-weight:600;display:block}.module-card-title{letter-spacing:-.01em;color:var(--text-primary);font-size:1.1rem;font-weight:700}.module-card-desc{color:var(--text-secondary);margin-bottom:16px;font-size:.85rem;line-height:1.6}.module-card-footer{justify-content:space-between;align-items:center;display:flex}.module-progress-bar{background:#ffffff0f;border-radius:2px;flex:1;height:4px;margin-right:12px;overflow:hidden}.module-progress-fill{height:100%;transition:width .5s var(--ease-out-expo);border-radius:2px}.module-progress-text{color:var(--text-muted);white-space:nowrap;font-size:.72rem;font-weight:600}.module-page{animation:fadeInUp .5s var(--ease-out-expo)}.module-header{margin-bottom:36px;position:relative}.module-breadcrumb{color:var(--text-muted);align-items:center;gap:8px;margin-bottom:16px;font-size:.78rem;display:flex}.module-breadcrumb span{cursor:pointer}.module-breadcrumb span:hover{color:var(--accent-blue)}.module-breadcrumb-sep{color:var(--text-dim)}.module-hero{align-items:center;gap:20px;margin-bottom:12px;display:flex}.module-hero-icon{border-radius:var(--radius-lg);flex-shrink:0;justify-content:center;align-items:center;width:64px;height:64px;font-size:2rem;display:flex}.module-hero-title{letter-spacing:-.03em;font-size:2rem;font-weight:900;line-height:1.2}.module-hero-subtitle{color:var(--text-secondary);margin-bottom:8px;font-size:1rem}.module-section-count{color:var(--text-muted);align-items:center;gap:16px;font-size:.78rem;display:flex}.module-section-count span{align-items:center;gap:4px;display:flex}.sections-container{box-sizing:border-box;flex-direction:column;gap:24px;width:100%;min-width:0;max-width:100%;margin-bottom:40px;display:flex}.section-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);transition:all var(--transition-medium);animation:fadeInUp .5s var(--ease-out-expo);box-sizing:border-box;width:100%;min-width:0;max-width:100%;animation-fill-mode:backwards;overflow:hidden}.section-card:first-child{animation-delay:50ms}.section-card:nth-child(2){animation-delay:.1s}.section-card:nth-child(3){animation-delay:.15s}.section-card:nth-child(4){animation-delay:.2s}.section-card:nth-child(5){animation-delay:.25s}.section-card:nth-child(6){animation-delay:.3s}.section-card:nth-child(7){animation-delay:.35s}.section-card:nth-child(8){animation-delay:.4s}.section-card:nth-child(9){animation-delay:.45s}.section-card:nth-child(10){animation-delay:.5s}.section-card:hover{border-color:var(--border-medium);box-shadow:var(--shadow-md)}.section-card.completed{border-color:#10b98126}.section-header{cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;align-items:center;gap:14px;width:100%;min-width:0;max-width:100%;padding:20px 24px;display:flex}.section-header:focus-visible,.module-card:focus-visible,.user-pill:focus-visible{outline:2px solid var(--accent-cyan);outline-offset:3px}.section-number{border-radius:var(--radius-full);width:36px;height:36px;color:var(--text-secondary);transition:all var(--transition-fast);background:#ffffff0d;border:2px solid #ffffff14;flex-shrink:0;justify-content:center;align-items:center;font-size:.8rem;font-weight:700;display:flex}.section-card.completed .section-number{color:var(--accent-emerald);background:#10b9811a;border-color:#10b9814d}.section-header-text{flex:1;min-width:0}.section-title-text{letter-spacing:-.01em;word-break:break-word;overflow-wrap:break-word;font-size:1rem;font-weight:700;display:block}.section-type-badge{text-transform:uppercase;letter-spacing:.05em;border-radius:4px;margin-top:4px;padding:2px 8px;font-size:.6rem;font-weight:600;display:inline-block}.badge-concept{color:var(--accent-blue);background:#3b82f61a}.badge-visual{color:var(--accent-purple);background:#8b5cf61a}.badge-interactive{color:var(--accent-emerald);background:#10b9811a}.badge-code{color:var(--accent-amber);background:#f59e0b1a}.badge-table{color:var(--accent-cyan);background:#06b6d41a}.badge-comparison{color:var(--accent-rose);background:#f43f5e1a}.section-toggle{border-radius:var(--radius-full);width:28px;height:28px;color:var(--text-muted);transition:all var(--transition-fast);background:#ffffff0a;flex-shrink:0;justify-content:center;align-items:center;font-size:.8rem;display:flex}.section-card.expanded .section-toggle{color:var(--accent-indigo);background:#6366f11a;transform:rotate(180deg)}.section-body{max-height:0;transition:max-height .5s var(--ease-out-expo);box-sizing:border-box;width:100%;min-width:0;max-width:100%;overflow:hidden}.section-card.expanded .section-body{max-height:8000px}.section-content{color:var(--text-secondary);box-sizing:border-box;word-break:break-word;overflow-wrap:break-word;width:100%;min-width:0;max-width:100%;padding:0 24px 24px;font-size:.92rem;line-height:1.8}.section-content h3{color:var(--text-primary);letter-spacing:-.01em;margin:24px 0 12px;font-size:1.1rem;font-weight:700}.section-content h4{color:var(--text-primary);margin:20px 0 10px;font-size:.95rem;font-weight:600}.section-content p{color:var(--text-secondary);margin-bottom:14px}.section-content ul,.section-content ol{margin:12px 0;padding-left:20px}.section-content li{color:var(--text-secondary);margin-bottom:8px}.section-content li::marker{color:var(--accent-indigo)}.section-content strong{color:var(--text-primary);font-weight:600}.visual-diagram{border:1px solid var(--border-subtle);border-radius:var(--radius-md);text-align:center;background:#ffffff05;margin:20px 0;padding:24px}.info-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:20px 0;display:grid}.info-card{border:1px solid var(--border-subtle);border-radius:var(--radius-md);transition:all var(--transition-fast);background:#ffffff05;padding:18px}.info-card:hover{border-color:var(--border-medium);background:#ffffff0a;transform:translateY(-2px)}.info-card-icon{margin-bottom:10px;font-size:1.5rem;display:block}.info-card-title{color:var(--text-primary);margin-bottom:6px;font-size:.9rem;font-weight:700;display:block}.info-card-desc{color:var(--text-secondary);font-size:.82rem;line-height:1.6}.rule-box{border:1px solid #6366f126;border-left:3px solid var(--accent-indigo);border-radius:var(--radius-md);background:#6366f10d;align-items:flex-start;gap:12px;margin:20px 0;padding:16px 20px;display:flex}.rule-icon{flex-shrink:0;margin-top:2px;font-size:1.2rem}.rule-text{color:var(--text-primary);font-size:.88rem;font-weight:500;line-height:1.7}.warning-box{border:1px solid #f59e0b26;border-left:3px solid var(--accent-amber);border-radius:var(--radius-md);background:#f59e0b0d;margin:20px 0;padding:16px 20px}.tip-box{border:1px solid #10b98126;border-left:3px solid var(--accent-emerald);border-radius:var(--radius-md);background:#10b9810d;margin:20px 0;padding:16px 20px}.code-block{border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-sizing:border-box;background:#0d0f1a;min-width:0;max-width:100%;margin:16px 0;overflow:hidden}.code-header{border-bottom:1px solid var(--border-subtle);box-sizing:border-box;background:#ffffff08;justify-content:space-between;align-items:center;max-width:100%;padding:10px 16px;display:flex}.code-lang{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:.7rem;font-weight:600}.code-copy{border:1px solid var(--border-subtle);color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast);background:0 0;border-radius:4px;padding:3px 10px;font-family:inherit;font-size:.7rem}.code-copy:hover{color:var(--text-primary);border-color:var(--border-medium);background:#ffffff0d}.code-copy.copied{color:var(--accent-emerald);border-color:#10b9814d}pre{color:#e2e8f0;box-sizing:border-box;-webkit-overflow-scrolling:touch;min-width:0;max-width:100%;padding:16px;font-family:JetBrains Mono,monospace;font-size:.82rem;line-height:1.7;overflow-x:auto}pre code{min-width:100%;max-width:none;font-family:inherit;display:inline-block}.kw{color:#c792ea}.fn{color:#82aaff}.str{color:#c3e88d}.num{color:#f78c6c}.cmt{color:#546e7a}.op{color:#89ddff}.var{color:#eff}.type{color:#ffcb6b}.param{color:#f07178}.inline-check{border:1px solid var(--border-subtle);border-radius:var(--radius-md);transition:all var(--transition-fast);background:#ffffff05;margin:20px 0;padding:4px 20px}.inline-check[open]{background:#6366f10a;border-color:#6366f14d}.inline-check summary{cursor:pointer;color:var(--text-primary);align-items:center;gap:10px;padding:16px 0;font-size:.9rem;font-weight:700;list-style:none;display:flex}.inline-check summary::-webkit-details-marker{display:none}.inline-check summary:before{content:"🧪";flex-shrink:0;font-size:1rem}.inline-check summary:after{content:"Reveal Answer ▾";color:var(--accent-indigo);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;margin-left:auto;font-size:.65rem;font-weight:700}.inline-check[open] summary:after{content:"Hide Answer ▴"}.inline-check-options{flex-direction:column;gap:6px;margin:0 0 14px;padding:0;list-style:none;display:flex}.inline-check-options li{border-radius:var(--radius-sm);border:1px solid var(--border-subtle);color:var(--text-secondary);background:#ffffff05;padding:8px 12px;font-size:.82rem}.inline-check-options li.correct{color:var(--text-primary);background:#10b98114;border-color:#10b98159;font-weight:600}.inline-check-explain{border-left:3px solid var(--accent-emerald);border-radius:var(--radius-sm);color:var(--text-secondary);background:#10b9810d;margin-bottom:16px;padding:14px 16px;font-size:.82rem;line-height:1.6}.comparison-container{grid-template-columns:1fr 1fr;gap:16px;margin:20px 0;display:grid}.comparison-side{border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:#ffffff05;padding:20px;position:relative}.comparison-side:before{content:attr(data-label);text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);background:#ffffff0d;border-radius:4px;margin-bottom:14px;padding:3px 10px;font-size:.65rem;font-weight:700;display:inline-block}.comparison-side.side-a:before{color:var(--accent-blue);background:#3b82f61a}.comparison-side.side-b:before{color:var(--accent-purple);background:#8b5cf61a}.data-table-wrap{box-sizing:border-box;-webkit-overflow-scrolling:touch;border-radius:var(--radius-md);border:1px solid var(--border-subtle);width:100%;min-width:0;max-width:100%;margin:20px 0;overflow-x:auto}.data-table{border-collapse:collapse;width:100%;min-width:480px;font-size:.82rem}.data-table thead{background:#ffffff0a}.data-table th{text-align:left;text-transform:uppercase;letter-spacing:.04em;color:var(--text-secondary);border-bottom:1px solid var(--border-subtle);white-space:nowrap;padding:12px 16px;font-size:.75rem;font-weight:700}.data-table td{border-bottom:1px solid var(--border-subtle);color:var(--text-secondary);vertical-align:top;padding:12px 16px}.data-table tbody tr{transition:background var(--transition-fast)}.data-table tbody tr:hover{background:#ffffff05}.data-table tbody tr:last-child td{border-bottom:none}.flow-diagram{border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:#ffffff05;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin:24px 0;padding:24px;display:flex}.flow-step{border-radius:var(--radius-md);min-width:100px;transition:all var(--transition-fast);background:#6366f10f;border:1px solid #6366f126;flex-direction:column;align-items:center;gap:8px;padding:14px 18px;display:flex}.flow-step:hover{box-shadow:var(--shadow-glow-blue);background:#6366f11f;transform:translateY(-2px)}.flow-step-icon{font-size:1.3rem}.flow-step-label{color:var(--text-primary);text-align:center;font-size:.72rem;font-weight:600}.flow-arrow{color:var(--text-dim);flex-shrink:0;font-size:1.2rem}.tokenizer-demo{border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:#ffffff05;margin:20px 0;padding:24px}.tokenizer-input{background:var(--bg-input);border:1px solid var(--border-medium);border-radius:var(--radius-md);width:100%;color:var(--text-primary);transition:border-color var(--transition-fast);outline:none;margin-bottom:16px;padding:14px 18px;font-family:JetBrains Mono,monospace;font-size:.9rem}.tokenizer-input:focus{border-color:var(--accent-indigo);box-shadow:0 0 0 3px #6366f11a}.tokenizer-input::placeholder{color:var(--text-dim)}.tokenizer-output{border-radius:var(--radius-sm);background:#0003;flex-wrap:wrap;gap:6px;min-height:48px;margin-bottom:12px;padding:16px;display:flex}.token-chip{animation:tokenPop .3s var(--ease-out-back);cursor:default;transition:all var(--transition-fast);border:1px solid #0000;border-radius:6px;align-items:center;padding:4px 10px;font-family:JetBrains Mono,monospace;font-size:.82rem;font-weight:500;display:inline-flex}.token-chip:hover{border-color:#ffffff26;transform:translateY(-2px)}.tokenizer-stats{color:var(--text-muted);gap:20px;font-size:.78rem;display:flex}.tokenizer-stats strong{color:var(--text-primary)}.prompt-compare{margin:20px 0}.prompt-compare-header{flex-wrap:wrap;gap:8px;margin-bottom:16px;display:flex}.prompt-tab{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast);background:#ffffff0a;padding:8px 16px;font-family:inherit;font-size:.78rem;font-weight:600}.prompt-tab.active{color:var(--accent-indigo);background:#6366f11a;border-color:#6366f14d}.prompt-content{display:none}.prompt-content.active{animation:.3s fadeIn;display:block}.pipeline-viz{border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:#ffffff05;margin:20px 0;padding:24px}.pipeline-stages{align-items:stretch;gap:0;display:flex;position:relative}.pipeline-stage{text-align:center;cursor:pointer;transition:all var(--transition-fast);border-radius:var(--radius-sm);flex:1;padding:20px 16px;position:relative}.pipeline-stage:hover{background:#ffffff08}.pipeline-stage.active-stage{background:#6366f114}.pipeline-stage-icon{margin-bottom:10px;font-size:1.8rem;display:block}.pipeline-stage-name{color:var(--text-primary);margin-bottom:4px;font-size:.78rem;font-weight:700;display:block}.pipeline-stage-desc{color:var(--text-muted);font-size:.7rem;line-height:1.4}.pipeline-connector{color:var(--text-dim);z-index:1;font-size:.9rem;position:absolute;top:50%;right:-4px;transform:translateY(-50%)}.pipeline-detail{border-radius:var(--radius-sm);color:var(--text-secondary);min-height:60px;transition:all var(--transition-medium);background:#0003;margin-top:16px;padding:16px;font-size:.85rem}.arch-toggle-container{margin:20px 0}.arch-toggle-btns{border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:#ffffff08;flex-wrap:wrap;gap:4px;margin-bottom:20px;padding:4px;display:flex}.arch-toggle-btn{border-radius:var(--radius-sm);min-width:0;color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;flex:1;padding:10px 16px;font-family:inherit;font-size:.82rem;font-weight:600}.arch-toggle-btn.active{background:var(--gradient-primary);color:#fff;box-shadow:var(--shadow-sm)}.arch-panel{animation:.3s fadeIn;display:none}.arch-panel.active{display:block}.mark-complete-btn{border-radius:var(--radius-md);color:var(--accent-emerald);cursor:pointer;transition:all var(--transition-fast);background:#10b98114;border:1px solid #10b98133;align-items:center;gap:8px;margin-top:20px;padding:10px 20px;font-family:inherit;font-size:.82rem;font-weight:600;display:flex}.mark-complete-btn:hover{background:#10b98126;border-color:#10b9814d;transform:translateY(-1px)}.mark-complete-btn.completed{color:var(--accent-emerald);pointer-events:none;background:#10b9811a}.quiz-start-card{background:var(--bg-card);border-radius:var(--radius-xl);text-align:center;transition:all var(--transition-medium);border:2px solid #6366f133;margin:20px 0;padding:40px}.quiz-start-card:hover{box-shadow:var(--shadow-glow-purple);border-color:#6366f159}.quiz-start-icon{margin-bottom:16px;font-size:3rem;display:block}.quiz-start-title{margin-bottom:8px;font-size:1.3rem;font-weight:800}.quiz-start-desc{color:var(--text-secondary);max-width:400px;margin-bottom:24px;margin-left:auto;margin-right:auto;font-size:.9rem}.quiz-start-btn{background:var(--gradient-primary);border-radius:var(--radius-md);color:#fff;cursor:pointer;transition:all var(--transition-fast);border:none;padding:12px 32px;font-family:inherit;font-size:.9rem;font-weight:700;box-shadow:0 4px 15px #6366f14d}.quiz-start-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #6366f166}.quiz-start-stats{color:var(--text-muted);justify-content:center;gap:24px;margin-top:20px;font-size:.78rem;display:flex}.quiz-start-stats span{align-items:center;gap:6px;display:flex}.quiz-overlay{z-index:2000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#000c;justify-content:center;align-items:center;animation:.3s fadeIn;display:none;position:fixed;inset:0}.quiz-overlay.active{display:flex}.quiz-modal{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);width:95%;max-width:640px;max-height:90vh;box-shadow:var(--shadow-lg);animation:scaleIn .4s var(--ease-out-back);overflow-y:auto}.quiz-header{border-bottom:1px solid var(--border-subtle);padding:20px 24px 16px}.quiz-progress-bar{background:#ffffff0f;border-radius:2px;height:4px;margin-bottom:14px;overflow:hidden}.quiz-progress-fill{background:var(--gradient-primary);height:100%;transition:width .4s var(--ease-out-expo);border-radius:2px}.quiz-header-info{justify-content:space-between;align-items:center;display:flex}.quiz-title{font-size:.9rem;font-weight:700}.quiz-counter{color:var(--text-muted);font-size:.78rem;font-weight:500}.quiz-close{color:var(--text-muted);border-radius:var(--radius-full);cursor:pointer;width:32px;height:32px;transition:all var(--transition-fast);background:#ffffff0d;border:none;justify-content:center;align-items:center;font-size:.9rem;display:flex;position:absolute;top:16px;right:20px}.quiz-close:hover{color:var(--text-primary);background:#ffffff1a}.quiz-body{padding:28px 24px}.quiz-question{color:var(--text-primary);margin-bottom:24px;font-size:1.05rem;font-weight:600;line-height:1.6}.quiz-options{flex-direction:column;gap:10px;display:flex}.quiz-option{border:1px solid var(--border-subtle);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);color:var(--text-secondary);background:#ffffff08;align-items:center;gap:14px;padding:14px 18px;font-size:.88rem;display:flex}.quiz-option:hover:not(.disabled){border-color:var(--border-medium);background:#ffffff0f}.quiz-option .option-marker{border-radius:var(--radius-full);border:2px solid var(--border-medium);width:28px;height:28px;transition:all var(--transition-fast);flex-shrink:0;justify-content:center;align-items:center;font-size:.72rem;font-weight:700;display:flex}.quiz-option.selected{background:#6366f114;border-color:#6366f166}.quiz-option.selected .option-marker{background:var(--accent-indigo);border-color:var(--accent-indigo);color:#fff}.quiz-option.correct{background:#10b98114;border-color:#10b98166}.quiz-option.correct .option-marker{background:var(--accent-emerald);border-color:var(--accent-emerald);color:#fff}.quiz-option.incorrect{background:#f43f5e14;border-color:#f43f5e66}.quiz-option.incorrect .option-marker{background:var(--accent-rose);border-color:var(--accent-rose);color:#fff}.quiz-option.disabled{pointer-events:none}.quiz-explanation{border-radius:var(--radius-md);animation:fadeInUp .3s var(--ease-out-expo);margin-top:20px;padding:16px 18px;font-size:.85rem;line-height:1.6}.quiz-explanation.correct{color:var(--text-secondary);background:#10b9810f;border:1px solid #10b98126}.quiz-explanation.incorrect{color:var(--text-secondary);background:#f43f5e0f;border:1px solid #f43f5e26}.quiz-explanation-icon{margin-bottom:6px;font-weight:700;display:block}.quiz-footer{border-top:1px solid var(--border-subtle);justify-content:flex-end;padding:16px 24px 20px;display:flex}.results-overlay{z-index:2100;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#000000d9;justify-content:center;align-items:center;display:none;position:fixed;inset:0}.results-overlay.active{display:flex}.results-modal{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);text-align:center;width:95%;max-width:480px;box-shadow:var(--shadow-lg);animation:scaleIn .5s var(--ease-out-back);padding:48px 40px}.results-icon{margin-bottom:20px;font-size:3.5rem;display:block}.results-title{letter-spacing:-.02em;margin-bottom:8px;font-size:1.6rem;font-weight:900}.results-subtitle{color:var(--text-secondary);margin-bottom:28px;font-size:.9rem}.results-score-ring{width:120px;height:120px;margin:0 auto 28px;position:relative}.results-score-ring svg{width:100%;height:100%;transform:rotate(-90deg)}.results-ring-bg{fill:none;stroke:#ffffff0f;stroke-width:6px}.results-ring-fill{fill:none;stroke-width:6px;stroke-linecap:round;transition:stroke-dashoffset 1.5s var(--ease-out-expo)}.results-score-value{justify-content:center;align-items:center;font-size:2rem;font-weight:900;display:flex;position:absolute;inset:0}.results-stats{justify-content:center;gap:32px;margin-bottom:28px;display:flex}.results-stat{text-align:center}.results-stat-value{font-size:1.3rem;font-weight:800;display:block}.results-stat-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;font-size:.7rem;display:block}.results-xp{border-radius:var(--radius-md);color:var(--accent-amber);background:#f59e0b14;border:1px solid #f59e0b26;justify-content:center;align-items:center;gap:8px;margin-bottom:24px;padding:12px;font-size:.9rem;font-weight:700;display:flex}.results-btn{background:var(--gradient-primary);border-radius:var(--radius-md);color:#fff;cursor:pointer;transition:all var(--transition-fast);border:none;padding:12px 32px;font-family:inherit;font-size:.9rem;font-weight:700;box-shadow:0 4px 15px #6366f14d}.results-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #6366f166}.btn{border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);border:none;align-items:center;gap:8px;padding:10px 20px;font-family:inherit;font-size:.85rem;font-weight:600;display:inline-flex}.btn-primary{background:var(--gradient-primary);color:#fff;box-shadow:0 4px 12px #6366f140}.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 16px #6366f159}.btn-primary:disabled{opacity:.4;cursor:not-allowed}.btn-secondary{color:var(--text-primary);border:1px solid var(--border-subtle);background:#ffffff0f}.btn-secondary:hover{background:#ffffff1a}.toast-container{z-index:3000;flex-direction:column;gap:10px;display:flex;position:fixed;top:20px;right:20px}.toast{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);animation:slideInRight .4s var(--ease-out-expo);align-items:center;gap:12px;min-width:280px;max-width:380px;padding:14px 20px;display:flex}.toast.toast-exit{animation:.3s forwards slideOutRight}.toast-icon{flex-shrink:0;font-size:1.3rem}.toast-content{flex:1}.toast-title{margin-bottom:2px;font-size:.85rem;font-weight:700;display:block}.toast-desc{color:var(--text-muted);font-size:.75rem;display:block}.toast-xp{color:var(--accent-amber);flex-shrink:0;font-size:.78rem;font-weight:700}.confetti-canvas{pointer-events:none;z-index:4000;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes slideInRight{0%{opacity:0;transform:translate(100px)}to{opacity:1;transform:translate(0)}}@keyframes slideOutRight{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100px)}}@keyframes tokenPop{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes glow{0%,to{box-shadow:0 0 5px #6366f133}50%{box-shadow:0 0 20px #6366f166}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.persona-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:20px 0;display:grid}.persona-card{border:1px solid var(--border-subtle);border-radius:var(--radius-md);text-align:center;transition:all var(--transition-fast);background:#ffffff05;padding:20px}.persona-card:hover{border-color:var(--border-medium);box-shadow:var(--shadow-md);transform:translateY(-3px)}.persona-icon{margin-bottom:10px;font-size:2rem;display:block}.persona-title{color:var(--text-primary);margin-bottom:6px;font-size:.88rem;font-weight:700}.persona-desc{color:var(--text-muted);font-size:.78rem;line-height:1.5}.takeaway-list{flex-direction:column;gap:12px;margin:20px 0;display:flex}.takeaway-item{border:1px solid var(--border-subtle);border-radius:var(--radius-md);transition:all var(--transition-fast);background:#ffffff05;align-items:flex-start;gap:14px;padding:16px 18px;display:flex}.takeaway-item:hover{border-color:var(--border-medium);background:#ffffff0a}.takeaway-icon{flex-shrink:0;font-size:1.3rem}.takeaway-content{flex:1}.takeaway-title{color:var(--text-primary);margin-bottom:4px;font-size:.88rem;font-weight:700;display:block}.takeaway-desc{color:var(--text-secondary);font-size:.82rem;line-height:1.6}.checklist{flex-direction:column;gap:8px;margin:20px 0;display:flex}.checklist-item{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-secondary);background:#ffffff05;align-items:flex-start;gap:12px;padding:12px 16px;font-size:.85rem;display:flex}.checklist-bullet{border-radius:var(--radius-full);width:22px;height:22px;color:var(--accent-indigo);background:#6366f11a;border:1px solid #6366f133;flex-shrink:0;justify-content:center;align-items:center;font-size:.65rem;font-weight:700;display:flex}.framework-steps{flex-direction:column;gap:0;margin:20px 0;display:flex;position:relative}.framework-steps:before{content:"";background:#6366f126;width:2px;position:absolute;top:24px;bottom:24px;left:23px}.framework-step{align-items:flex-start;gap:16px;padding:16px 0;display:flex;position:relative}.framework-step-num{border-radius:var(--radius-full);z-index:1;width:48px;height:48px;transition:all var(--transition-fast);flex-shrink:0;justify-content:center;align-items:center;font-size:1rem;font-weight:800;display:flex}.framework-step:hover .framework-step-num{transform:scale(1.1)}.framework-step-content{flex:1;padding-top:10px}.framework-step-title{color:var(--text-primary);margin-bottom:4px;font-size:.95rem;font-weight:700;display:block}.framework-step-desc{color:var(--text-secondary);font-size:.82rem;line-height:1.6}.attention-viz{border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:#ffffff05;margin:20px 0;padding:24px}.attention-tokens{flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:20px;display:flex}.attention-token{border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);background:#6366f114;border:1px solid #6366f133;padding:8px 14px;font-family:JetBrains Mono,monospace;font-size:.82rem;font-weight:500;position:relative}.attention-token:hover,.attention-token.active{box-shadow:var(--shadow-glow-blue);background:#6366f133;border-color:#6366f166;transform:translateY(-2px)}.attention-weights{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.attention-weight-bar{flex-direction:column;align-items:center;gap:6px;display:flex}.attention-bar{background:#ffffff0a;border-radius:4px;width:32px;height:80px;position:relative;overflow:hidden}.attention-bar-fill{background:var(--gradient-primary);transition:height .5s var(--ease-out-expo);border-radius:4px;position:absolute;bottom:0;left:0;right:0}.attention-bar-label{color:var(--text-muted);font-family:JetBrains Mono,monospace;font-size:.65rem}.gradient-text{background:var(--gradient-primary);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.gradient-text-emerald{background:var(--gradient-success);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.svg-defs{width:0;height:0;position:absolute}.cost-explorer{border-radius:var(--radius-lg);background:#0e1019f2;border:1px solid #f59e0b40;margin:24px 0;padding:24px;box-shadow:0 8px 32px #0006,0 0 24px #f59e0b14}.cost-explorer-header{border-bottom:1px solid var(--border-subtle);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px;padding-bottom:14px;display:flex}.cost-explorer-title{color:var(--text-primary);align-items:center;gap:10px;font-size:1.05rem;font-weight:700;display:flex}.cost-explorer-badge{color:var(--accent-amber);border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.05em;background:#f59e0b26;border:1px solid #f59e0b4d;padding:3px 10px;font-size:.72rem;font-weight:700}.explorer-controls-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-bottom:24px;display:grid}.control-card{border:1px solid var(--border-subtle);border-radius:var(--radius-md);transition:all var(--transition-fast);background:#ffffff05;padding:16px}.control-card:hover{background:#ffffff0a;border-color:#f59e0b4d}.control-header{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.control-label{color:var(--text-secondary);font-size:.8rem;font-weight:600}.control-value{color:var(--accent-amber);background:#f59e0b1f;border:1px solid #f59e0b33;border-radius:6px;padding:2px 8px;font-family:JetBrains Mono,monospace;font-size:.9rem;font-weight:700}.slider-input{appearance:none;width:100%;height:6px;transition:background var(--transition-fast);background:#ffffff1a;border-radius:3px;outline:none}.slider-input::-webkit-slider-thumb{appearance:none;background:var(--accent-amber);cursor:pointer;width:18px;height:18px;transition:transform var(--transition-fast);border-radius:50%;box-shadow:0 0 10px #f59e0b80}.slider-input::-webkit-slider-thumb:hover{transform:scale(1.2)}.slider-input::-moz-range-thumb{background:var(--accent-amber);cursor:pointer;border:none;border-radius:50%;width:18px;height:18px;box-shadow:0 0 10px #f59e0b80}.control-hint{color:var(--text-muted);margin-top:8px;font-size:.72rem;line-height:1.4}.explorer-metrics-row{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:24px;display:grid}.metric-box{border:1px solid var(--border-subtle);border-radius:var(--radius-md);transition:all var(--transition-fast);background:#0000004d;flex-direction:column;justify-content:space-between;padding:16px;display:flex;position:relative;overflow:hidden}.metric-box:before{content:"";background:var(--border-subtle);height:2px;position:absolute;top:0;left:0;right:0}.metric-box.primary:before{background:var(--accent-amber)}.metric-box.cost:before{background:var(--accent-rose)}.metric-box.speed:before{background:var(--accent-cyan)}.metric-box.sla:before{background:var(--accent-emerald)}.metric-box.sla.warn:before{background:var(--accent-amber)}.metric-box.sla.danger:before{background:var(--accent-rose)}.metric-title{text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:6px;font-size:.74rem;font-weight:600}.metric-num{color:var(--text-primary);font-family:JetBrains Mono,monospace;font-size:1.45rem;font-weight:800;line-height:1.2}.metric-sub{color:var(--text-secondary);margin-top:6px;font-size:.73rem}.explorer-visual-bars{border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:#0003;margin-bottom:16px;padding:18px 20px}.visual-bar-item{margin-bottom:14px}.visual-bar-item:last-child{margin-bottom:0}.visual-bar-header{color:var(--text-secondary);justify-content:space-between;margin-bottom:6px;font-size:.78rem;display:flex}.visual-bar-track{background:#ffffff0f;border-radius:5px;height:10px;position:relative;overflow:hidden}.visual-bar-fill{height:100%;transition:width .35s var(--ease-out-expo);border-radius:5px}.formula-callout{border-radius:var(--radius-sm);color:#fde68a;background:#f59e0b0f;border:1px solid #f59e0b33;align-items:center;gap:12px;padding:12px 16px;font-family:JetBrains Mono,monospace;font-size:.85rem;display:flex}.truncation-sim{border:1px solid var(--border-medium);border-radius:var(--radius-lg);background:#0e1019f2;margin:24px 0;padding:24px}.trunc-controls{flex-wrap:wrap;gap:8px;margin-bottom:20px;display:flex}.trunc-btn{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);background:#ffffff0a;padding:8px 16px;font-family:inherit;font-size:.8rem;font-weight:600}.trunc-btn:hover{color:var(--text-primary);background:#ffffff14}.trunc-btn.active{border-color:var(--accent-indigo);color:#c7d2fe;background:#6366f126}.trunc-meter-wrap{margin-bottom:20px}.trunc-meter-header{color:var(--text-secondary);justify-content:space-between;margin-bottom:6px;font-size:.78rem;display:flex}.trunc-meter-track{border:1px solid var(--border-subtle);background:#ffffff0f;border-radius:7px;height:14px;position:relative;overflow:hidden}.trunc-meter-fill{height:100%;transition:width .4s var(--ease-out-expo), background-color .4s ease;border-radius:7px}.trunc-meter-limit{z-index:2;background:#f43f5ecc;width:2px;position:absolute;top:0;bottom:0;right:20%}.trunc-items-grid{flex-direction:column;gap:8px;margin-bottom:16px;display:flex}.trunc-block{border-radius:var(--radius-sm);transition:all var(--transition-fast);border:1px solid #0000;justify-content:space-between;align-items:center;padding:10px 14px;font-size:.8rem;display:flex}.trunc-block.kept{color:#a7f3d0;background:#10b98114;border-color:#10b98140}.trunc-block.dropped{color:#fda4af;opacity:.5;background:#f43f5e14;border-color:#f43f5e40;text-decoration:line-through}.trunc-block.compressed{color:#ddd6fe;background:#8b5cf614;border-color:#8b5cf640}.trunc-block.critical-instruction{border-left-width:4px;font-weight:700}.trunc-block.critical-instruction.safe{border-left-color:var(--accent-emerald)}.trunc-block.critical-instruction.lost{border-left-color:var(--accent-rose)}.decision-tree-viz{border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:#0e1019f2;margin:24px 0;padding:24px}.tree-scenario-tabs{gap:8px;margin-bottom:20px;display:flex}.tree-scenario-tab{border:1px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;text-align:center;transition:all var(--transition-fast);background:#ffffff08;flex:1;padding:12px 18px;font-size:.85rem;font-weight:700}.tree-scenario-tab:hover{color:var(--text-primary);background:#ffffff0f}.tree-scenario-tab.active{border-color:var(--accent-blue);color:#93c5fd;background:#3b82f61f}.tree-flow-steps{flex-direction:column;gap:12px;display:flex}.tree-node{border:1px solid var(--border-subtle);border-radius:var(--radius-md);transition:all var(--transition-fast);background:#ffffff05;align-items:flex-start;gap:14px;padding:14px 18px;display:flex}.tree-node-icon{flex-shrink:0;font-size:1.3rem}.tree-node-content{flex:1}.tree-node-title{color:var(--text-primary);margin-bottom:4px;font-size:.88rem;font-weight:700}.tree-node-desc{color:var(--text-secondary);font-size:.8rem;line-height:1.5}.tree-node-action{color:#6ee7b7;background:#10b9811f;border:1px solid #10b9814d;border-radius:4px;margin-top:6px;padding:3px 10px;font-size:.72rem;font-weight:700;display:inline-block}.env-sandbox{border-radius:var(--radius-lg);background:#090b12;border:1px solid #8b5cf64d;margin:24px 0;overflow:hidden;box-shadow:0 10px 40px #00000080,0 0 20px #8b5cf61a}.sandbox-topbar{border-bottom:1px solid var(--border-subtle);background:#11131f;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:12px 18px;display:flex}.sandbox-tabs{gap:6px;display:flex}.sandbox-tab{cursor:pointer;color:var(--text-muted);transition:all var(--transition-fast);background:0 0;border:1px solid #0000;border-radius:6px;padding:6px 14px;font-family:JetBrains Mono,monospace;font-size:.76rem;font-weight:600}.sandbox-tab:hover{color:var(--text-primary);background:#ffffff0a}.sandbox-tab.active{color:#ddd6fe;background:#8b5cf62e;border-color:#8b5cf666}.sandbox-actions{align-items:center;gap:10px;display:flex}.scenario-select{background:var(--bg-input);border:1px solid var(--border-medium);color:var(--text-primary);cursor:pointer;border-radius:6px;outline:none;padding:6px 12px;font-family:inherit;font-size:.78rem}.scenario-select:focus{border-color:var(--accent-purple)}.run-sim-btn{background:var(--gradient-primary);color:#fff;cursor:pointer;transition:all var(--transition-fast);border:none;border-radius:6px;align-items:center;gap:6px;padding:6px 14px;font-size:.78rem;font-weight:700;display:inline-flex}.run-sim-btn:hover{box-shadow:var(--shadow-glow-purple);transform:translateY(-1px)}.sandbox-content{padding:0}.sandbox-file-panel{color:#e2e8f0;background:#090b12;max-height:380px;padding:16px;font-family:JetBrains Mono,monospace;font-size:.82rem;line-height:1.6;display:none;overflow-y:auto}.sandbox-file-panel.active{display:block}.terminal-console{background:#05060a;border-top:1px solid #ffffff14;min-height:120px;max-height:240px;padding:16px;font-family:JetBrains Mono,monospace;font-size:.82rem;overflow-y:auto}.terminal-line-prompt{color:var(--accent-emerald);margin-bottom:6px}.terminal-line-output{color:var(--text-secondary);white-space:pre-wrap;line-height:1.5}.practice-lab{border-radius:var(--radius-lg);background:linear-gradient(#10b9810d 0%,#0e1019f2 100%);border:2px solid #10b9814d;margin:28px 0;padding:24px;box-shadow:0 8px 32px #0000004d,0 0 20px #10b98114}.practice-lab-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;display:flex}.practice-lab-title{color:#a7f3d0;align-items:center;gap:10px;font-size:1.05rem;font-weight:800;display:flex}.practice-lab-badge{color:#34d399;border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.05em;background:#10b98126;border:1px solid #10b9814d;padding:4px 12px;font-size:.72rem;font-weight:700}.practice-lab-desc{color:var(--text-secondary);margin-bottom:20px;font-size:.85rem;line-height:1.6}.checklist-container{border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:#00000040;margin:18px 0;padding:16px 20px}.checklist-header{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.checklist-title{color:var(--text-primary);text-transform:uppercase;letter-spacing:.04em;font-size:.8rem;font-weight:700}.checklist-counter{color:var(--accent-emerald);background:#10b9811f;border-radius:12px;padding:2px 8px;font-size:.76rem;font-weight:700}.checklist-items{flex-direction:column;gap:10px;display:flex}.checklist-item{cursor:pointer;color:var(--text-secondary);transition:color var(--transition-fast);align-items:flex-start;gap:12px;font-size:.84rem;display:flex}.checklist-item:hover{color:var(--text-primary)}.checklist-checkbox{border:1.5px solid var(--border-medium);width:18px;height:18px;transition:all var(--transition-fast);background:#ffffff05;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;margin-top:2px;display:flex}.checklist-item.checked .checklist-checkbox{background:var(--accent-emerald);border-color:var(--accent-emerald);color:#fff}.checklist-item.checked span.checklist-text{color:var(--text-muted);text-decoration:line-through}@media (max-width:1024px){.mobile-header{z-index:960;display:flex}.sidebar{visibility:hidden;pointer-events:none;z-index:980;width:300px;max-width:85vw;box-shadow:none;transition:transform var(--transition-medium), left .3s, visibility .3s;left:-320px;transform:translate(-100%)}.sidebar.open{visibility:visible;pointer-events:auto;left:0;transform:translate(0);box-shadow:10px 0 40px #000000bf}.sidebar-close-btn{display:flex}.main-content{width:100%;max-width:100%;padding:calc(var(--header-height) + 20px) 24px 60px;box-sizing:border-box;min-width:0;margin-left:0;overflow-x:hidden}.stats-row{grid-template-columns:repeat(2,1fr)}.comparison-container{grid-template-columns:1fr}.hero-title{font-size:1.8rem}.modules-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}}@media (max-width:768px){.main-content{width:100%;max-width:100%;padding:calc(var(--header-height) + 16px) 14px 60px;box-sizing:border-box;min-width:0;margin-left:0;overflow-x:hidden}.section-content>*{min-width:0;max-width:100%}.section-content>div[style]{width:100%!important;min-width:0!important;max-width:100%!important}.section-content table{max-width:100%}.section-content [style*=grid-template-columns]{min-width:0!important}.stats-row{box-sizing:border-box;grid-template-columns:repeat(2,1fr);gap:12px;width:100%;max-width:100%;margin-bottom:24px;display:grid}.stat-card{aspect-ratio:1;text-align:center;box-sizing:border-box;border-radius:var(--radius-lg);flex-direction:column;justify-content:center;align-items:center;min-width:0;padding:14px 10px;display:flex;overflow:hidden}.stat-icon{margin-bottom:6px;font-size:1.6rem;line-height:1}.stat-value{white-space:nowrap;text-overflow:ellipsis;max-width:100%;margin-bottom:4px;padding:0 4px;font-size:clamp(1.05rem,4.2vw,1.45rem);font-weight:800;line-height:1.15;overflow:hidden}.stat-label{text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);text-align:center;font-size:clamp(.65rem,2.5vw,.72rem);font-weight:600;line-height:1.2}.hero-section{min-height:200px;margin-bottom:24px;padding:20px}.hero-title{font-size:1.45rem;line-height:1.2}.hero-desc{font-size:.88rem}.modules-grid{grid-template-columns:1fr;gap:16px}.module-card{padding:20px 16px}.module-header{margin-bottom:24px}.module-hero{gap:14px;margin-bottom:12px}.module-hero-icon{width:52px;height:52px;font-size:1.6rem}.module-hero-title{word-break:break-word;font-size:1.5rem;line-height:1.25}.module-hero-subtitle{word-break:break-word;font-size:.88rem;line-height:1.5}.module-section-count{flex-wrap:wrap;gap:10px;font-size:.74rem}.sections-container{gap:14px;margin-bottom:28px}.section-card{border-radius:var(--radius-md)}.section-header{gap:12px;padding:14px 16px}.section-number{flex-shrink:0;width:32px;height:32px;font-size:.75rem}.section-title-text{word-break:break-word;font-size:.92rem;line-height:1.35}.section-content{word-break:break-word;padding:0 14px 18px;font-size:.88rem}.mark-complete-btn{justify-content:center;width:100%;margin-top:18px;padding:12px 14px;font-size:.82rem}.pipeline-stages{flex-direction:column;gap:8px}.pipeline-stage{padding:14px 12px}.pipeline-connector{display:none}.flow-diagram{flex-direction:column;gap:8px;padding:16px}.flow-step{width:100%;min-width:0;padding:12px}.flow-arrow{margin:2px 0;transform:rotate(90deg)}.info-grid{grid-template-columns:1fr;gap:12px}.persona-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.comparison-container{grid-template-columns:1fr;gap:12px}.cost-explorer{box-sizing:border-box;max-width:100%;margin:18px 0;padding:16px}.cost-explorer-header{flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:14px}.explorer-controls-grid{grid-template-columns:1fr;gap:12px;margin-bottom:16px}.control-card{padding:14px}.slider-input{height:8px}.slider-input::-webkit-slider-thumb{width:24px;height:24px}.slider-input::-moz-range-thumb{width:24px;height:24px}.explorer-metrics-row{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}.metric-box{padding:12px}.metric-num{font-size:1.15rem}.visual-bar-header{flex-wrap:wrap;gap:4px;font-size:.72rem}.formula-callout{text-align:center;word-break:break-word;flex-wrap:wrap;justify-content:center;padding:10px 12px;font-size:.8rem}.truncation-sim{box-sizing:border-box;max-width:100%;margin:18px 0;padding:16px}.trunc-controls{grid-template-columns:1fr 1fr;gap:6px;display:grid}.trunc-btn{text-align:center;padding:10px 8px;font-size:.75rem}.trunc-block{word-break:break-word;flex-direction:column;align-items:flex-start;gap:6px;padding:10px 12px;font-size:.76rem}.decision-tree-viz{box-sizing:border-box;max-width:100%;margin:18px 0;padding:16px}.tree-scenario-tabs{flex-direction:column;gap:6px}.tree-scenario-tab{width:100%;padding:12px 14px;font-size:.8rem}.tree-node{gap:10px;padding:12px}.tree-node-icon{font-size:1.1rem}.tree-node-title{font-size:.82rem}.tree-node-desc{font-size:.78rem}.env-sandbox{box-sizing:border-box;max-width:100%;margin:18px 0}.sandbox-topbar{flex-direction:column;align-items:stretch;gap:10px;padding:12px}.sandbox-tabs{flex-wrap:wrap;gap:4px;width:100%;display:flex}.sandbox-tab{text-align:center;flex:1;min-width:0;padding:8px 6px;font-size:.72rem}.sandbox-actions{flex-direction:column;align-items:stretch;gap:8px;width:100%}.scenario-select{width:100%;max-width:100%;padding:8px 10px;font-size:.78rem}.run-sim-btn{justify-content:center;width:100%;padding:10px;font-size:.82rem}.sandbox-file-panel{max-height:260px;padding:12px;font-size:.75rem;overflow-x:auto}.terminal-console{min-height:100px;max-height:200px;padding:12px;font-size:.75rem;overflow-x:auto}.practice-lab{box-sizing:border-box;max-width:100%;margin:20px 0;padding:16px}.practice-lab-header{flex-direction:column;align-items:flex-start;gap:8px}.checklist-container{box-sizing:border-box;max-width:100%;margin:14px 0;padding:14px}.checklist-item{gap:10px;min-height:40px;padding:8px 0;font-size:.8rem}.checklist-checkbox{width:22px;height:22px;margin-top:0}.data-table-wrap{border-radius:var(--radius-sm);-webkit-overflow-scrolling:touch;margin:14px 0;overflow-x:auto;box-sizing:border-box!important;width:100%!important;min-width:0!important;max-width:100%!important}.data-table{table-layout:fixed!important;word-break:break-word!important;overflow-wrap:break-word!important;width:100%!important;min-width:0!important}.data-table th,.data-table td{word-break:break-word;overflow-wrap:break-word;padding:8px 10px;font-size:.74rem}.code-block{margin:14px 0;overflow:hidden;box-sizing:border-box!important;min-width:0!important;max-width:100%!important}.code-header{box-sizing:border-box;max-width:100%;padding:8px 12px}.code-copy{min-height:30px;padding:5px 12px;font-size:.72rem}pre{padding:12px;font-size:.76rem;line-height:1.6;box-sizing:border-box!important;white-space:pre-wrap!important;word-break:break-all!important;overflow-wrap:anywhere!important;min-width:0!important;max-width:100%!important}pre code{white-space:pre-wrap!important;word-break:break-all!important;overflow-wrap:anywhere!important;max-width:100%!important;display:block!important}.rule-box,.warning-box,.tip-box{box-sizing:border-box;gap:10px;max-width:100%;margin:16px 0;padding:14px;font-size:.82rem}.rule-icon{font-size:1.1rem}.rule-text{font-size:.82rem}.quiz-modal{border-radius:var(--radius-lg);width:95%;max-width:95%;max-height:92vh}.quiz-header{padding:16px 18px 12px}.quiz-body{padding:20px 16px}.quiz-question{margin-bottom:18px;font-size:.95rem}.quiz-option{gap:10px;padding:12px 14px;font-size:.82rem}.quiz-footer{padding:14px 16px}.quiz-next-btn{width:100%}.results-modal{width:95%;padding:24px 16px}.results-title{font-size:1.3rem}.results-btn{width:100%}.quiz-start-card{border-radius:var(--radius-lg);box-sizing:border-box;max-width:100%;margin-top:30px;padding:24px 16px}.quiz-start-title{font-size:1.3rem}.quiz-start-btn{width:100%;padding:14px}.quiz-start-stats{flex-direction:column;align-items:center;gap:8px}.prompt-compare-header,.arch-toggle-btns{width:100%}.prompt-tab,.arch-toggle-btn{white-space:normal;flex:auto;min-width:0}}@media (max-width:480px){.stats-row{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:20px}.stat-card{aspect-ratio:1;padding:12px 8px}.stat-icon{margin-bottom:4px;font-size:1.45rem}.stat-value{margin-bottom:3px;font-size:clamp(.92rem,3.8vw,1.25rem)}.stat-label{letter-spacing:.03em;font-size:.62rem}.persona-grid{grid-template-columns:1fr}.results-stats{gap:14px}.explorer-metrics-row,.trunc-controls{grid-template-columns:1fr}.module-hero{flex-direction:column;align-items:flex-start}.hero-title,.module-hero-title{font-size:1.35rem}.practice-lab-title,.cost-explorer-title{font-size:.95rem}}.callsign-overlay{-webkit-backdrop-filter:blur(16px);z-index:5000;animation:fadeIn .3s var(--ease-out-expo);background:#04050ae0;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.callsign-modal{border-radius:var(--radius-xl);width:100%;max-width:480px;animation:scaleIn .35s var(--ease-out-back);text-align:center;background:linear-gradient(145deg,#141828f2,#0a0c16fa);border:1px solid #6366f166;padding:36px 32px;position:relative;box-shadow:0 20px 60px #000c,0 0 40px #6366f133}.callsign-badge{color:var(--accent-emerald);border-radius:var(--radius-full);letter-spacing:.04em;text-transform:uppercase;background:#10b9811f;border:1px solid #10b98159;align-items:center;gap:8px;margin-bottom:20px;padding:6px 14px;font-size:.76rem;font-weight:700;display:inline-flex}.cloud-dot{background:var(--accent-emerald);width:8px;height:8px;box-shadow:0 0 10px var(--accent-emerald);border-radius:50%;animation:2s ease-in-out infinite pulseGlow}@keyframes pulseGlow{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}.callsign-title{background:linear-gradient(135deg,#fff 30%,#c7d2fe 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:10px;font-size:1.6rem;font-weight:800}.callsign-desc{color:var(--text-secondary);margin-bottom:28px;font-size:.88rem;line-height:1.6}.callsign-form{text-align:left;flex-direction:column;gap:16px;display:flex}.callsign-input-wrap{align-items:center;display:flex;position:relative}.callsign-input-prefix{color:var(--accent-indigo);pointer-events:none;font-family:JetBrains Mono,monospace;font-size:1rem;font-weight:700;position:absolute;left:16px}.callsign-input{border-radius:var(--radius-md);color:#fff;width:100%;transition:all var(--transition-fast);background:#0a0c16e6;border:1.5px solid #ffffff1f;outline:none;padding:14px 16px 14px 38px;font-family:JetBrains Mono,monospace;font-size:1rem}.callsign-input:focus{border-color:var(--accent-indigo);box-shadow:0 0 0 3px #6366f140}.callsign-submit-btn{background:var(--gradient-primary);color:#fff;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);border:none;justify-content:center;align-items:center;gap:10px;padding:14px 24px;font-size:.95rem;font-weight:700;display:flex;box-shadow:0 4px 20px #6366f166}.callsign-submit-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 24px #6366f199}.callsign-submit-btn:disabled{opacity:.6;cursor:not-allowed}.callsign-error{color:var(--accent-rose);margin-top:-6px;margin-bottom:4px;font-size:.8rem}.callsign-features{border-top:1px solid var(--border-subtle);color:var(--text-muted);flex-wrap:wrap;justify-content:center;gap:16px;margin-top:24px;padding-top:20px;font-size:.74rem;display:flex}.user-pill{border:1px solid var(--border-subtle);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);background:#ffffff08;align-items:center;gap:8px;margin:12px 16px;padding:8px 12px;display:flex}.user-pill:hover{background:#ffffff0f;border-color:#6366f14d}.user-pill-avatar{background:var(--gradient-primary);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;font-size:.8rem;font-weight:800;display:flex}.user-pill-info{flex-direction:column;flex:1;min-width:0;display:flex}.user-pill-name{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-family:JetBrains Mono,monospace;font-size:.8rem;font-weight:700;overflow:hidden}.user-pill-cloud{color:var(--accent-emerald);align-items:center;gap:4px;font-size:.66rem;display:flex}.user-pill-action{color:var(--text-muted);font-size:.72rem}.cloud-status-banner{border-radius:var(--radius-md);box-sizing:border-box;word-break:break-word;overflow-wrap:break-word;background:#10b9810f;border:1px solid #10b98133;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;width:100%;max-width:100%;margin-bottom:24px;padding:12px 18px;font-size:.82rem;display:flex}.cloud-status-left{color:#a7f3d0;word-break:break-word;overflow-wrap:break-word;flex:1;align-items:center;gap:10px;min-width:0;display:flex}.cloud-status-right{flex-shrink:0;align-items:center;gap:12px;display:flex}.cloud-switch-link{color:var(--accent-cyan);cursor:pointer;background:0 0;border:none;font-family:inherit;font-size:.78rem;font-weight:600;text-decoration:underline}.cloud-switch-link:hover{color:#fff}html,body,#__next,.main-content{box-sizing:border-box!important;max-width:100%!important;overflow-x:hidden!important}