.architecture-diagram{filter:drop-shadow(0 0 40px rgba(0,0,0,.3))}.input-label{font-family:var(--font-display);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.sample-text-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:0 4px;overflow:hidden}.sample-text{font-family:Georgia,Times New Roman,serif;font-size:11px;font-style:italic;line-height:1.3;text-align:center;opacity:.8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.token-text{font-family:var(--font-mono);font-size:10px;font-weight:500}.layer-label{font-family:var(--font-mono);font-size:9px;fill:var(--text-muted)}.component-title{font-family:var(--font-display);font-size:16px;font-weight:600;fill:var(--text-primary)}.component-title-small{font-family:var(--font-display);font-size:14px;font-weight:600}.talker-text{font-family:var(--font-mono);font-size:11px;font-weight:500}.component-subtitle{font-family:var(--font-display);font-size:11px;fill:var(--text-muted)}.section-header{font-family:var(--font-display);font-size:11px;font-weight:600;fill:var(--text-muted);text-transform:uppercase;letter-spacing:.15em}.section-header-vertical{font-family:var(--font-display);font-size:11px;font-weight:600;fill:var(--text-primary);text-transform:uppercase;letter-spacing:.15em}.active-text{font-family:var(--font-mono);font-size:10px;fill:var(--thinker-color);font-weight:500}.output-label{font-family:var(--font-display);font-size:12px;font-weight:500;fill:var(--text-secondary)}.output-sample-text{font-family:Georgia,Times New Roman,serif;font-size:14px;font-weight:600;font-style:italic}.encoder-label{font-family:var(--font-display);font-size:13px;font-weight:600;fill:var(--text-primary)}.encoder-group .encoder-box{transition:filter .2s ease,stroke-width .2s ease}.encoder-group:hover .encoder-box{filter:brightness(1.3);stroke-width:3}.moe-label{font-family:var(--font-mono);font-size:9px;fill:var(--text-muted)}.connection-paths path,.connection-paths line{pointer-events:none}.canvas-container{flex:1;position:relative;overflow:hidden;cursor:grab;background:var(--bg-primary)}.canvas-container:active{cursor:grabbing}.canvas-grid{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);background-size:40px 40px;pointer-events:none}.canvas-content{position:absolute;top:50%;left:50%;margin-left:-400px;margin-top:-300px;transform-origin:center center;will-change:transform}.zoom-controls{position:absolute;bottom:24px;right:24px;display:flex;flex-direction:column;gap:4px;z-index:10}.zoom-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:#12121ae6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.08);border-radius:8px;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast)}.zoom-btn:hover{background:var(--bg-tertiary);color:var(--text-primary);border-color:#ffffff26}.zoom-btn svg{width:18px;height:18px}.canvas-instructions{position:absolute;bottom:24px;left:50%;transform:translate(-50%);padding:8px 16px;background:#12121acc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.05);border-radius:20px;font-size:12px;color:var(--text-muted);pointer-events:none;z-index:10;white-space:nowrap}@media (max-width: 700px){.zoom-controls{bottom:16px;right:16px}.zoom-btn{width:36px;height:36px}.canvas-instructions{font-size:11px;padding:6px 12px}}@media (max-width: 450px){.canvas-instructions{display:none}.zoom-controls{bottom:12px;right:12px}}.sidebar{width:240px;background:#12121a99;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-right:1px solid rgba(255,255,255,.05);display:flex;flex-direction:column;padding:20px 0;z-index:50;overflow-y:auto}.sidebar-section{padding:0 16px;margin-bottom:24px}.sidebar-title{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.15em;color:var(--text-muted);margin-bottom:12px;padding-left:4px}.component-nav{display:flex;flex-direction:column;gap:4px}.component-btn{display:flex;align-items:center;gap:10px;padding:10px 12px;background:transparent;border:none;border-radius:8px;cursor:pointer;transition:all var(--transition-fast);text-align:left;width:100%}.component-btn:hover{background:#ffffff0d}.component-indicator{width:3px;height:18px;border-radius:2px;flex-shrink:0}.component-icon{width:24px;height:16px;display:flex;align-items:center;justify-content:center}.component-name{font-size:13px;color:var(--text-secondary);transition:color var(--transition-fast)}.component-btn:hover .component-name{color:var(--text-primary)}.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.info-item{padding:10px;background:#ffffff05;border-radius:8px;display:flex;flex-direction:column;gap:4px}.info-label{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.info-value{font-size:16px;font-weight:600;color:var(--text-primary)}.modality-tags{display:flex;flex-wrap:wrap;gap:6px}.modality-tag{padding:4px 10px;font-size:11px;border:1px solid;border-radius:12px;color:var(--text-secondary);background:#ffffff05}.sidebar-footer{margin-top:auto;padding:16px;border-top:1px solid rgba(255,255,255,.05)}.footer-text{font-size:11px;color:var(--text-muted);line-height:1.5}.footer-text a{color:var(--accent-secondary);text-decoration:none}.footer-text a:hover{text-decoration:underline}@media (max-width: 850px){.sidebar{width:200px}.info-grid{grid-template-columns:1fr}}@media (max-width: 700px){.sidebar{width:60px;padding:12px 0}.sidebar-title,.component-name{display:none}.component-btn{justify-content:center;padding:10px}.component-indicator{display:none}.sidebar-section:not(:first-child){display:none}.sidebar-footer{display:none}}@media (max-width: 450px){.sidebar{display:none}}.header{height:64px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;background:#0d0d0de6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(0,210,106,.1);position:relative;z-index:100}.header-left,.header-right{display:flex;align-items:center;gap:16px}.header-center{position:absolute;left:50%;transform:translate(-50%)}.logo-link{text-decoration:none}.logo{display:flex;align-items:center;gap:12px}.logo-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center}.logo-icon img{width:100%;height:100%;object-fit:contain}.logo-icon svg{width:100%;height:100%}.logo-text{display:flex;flex-direction:column}.logo-title{font-size:18px;font-weight:600;letter-spacing:-.02em;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.logo-subtitle{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em}.architecture-badge{display:flex;align-items:center;gap:8px;padding:8px 16px;background:#00d26a1a;border:1px solid rgba(0,210,106,.25);border-radius:20px;font-size:13px;color:var(--hathora-green)}.badge-icon{width:14px;height:14px;flex-shrink:0}.controls{display:flex;align-items:center;gap:12px}.zoom-display{padding:6px 12px;background:var(--bg-tertiary);border-radius:6px;font-size:12px;color:var(--text-secondary);min-width:60px;text-align:center}.control-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--bg-tertiary);border:1px solid rgba(255,255,255,.05);border-radius:8px;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);text-decoration:none}.control-btn:hover{background:var(--bg-card);color:var(--text-primary);border-color:#ffffff1a}.control-btn.active{background:#00d26a26;color:var(--hathora-green);border-color:#00d26a4d}.hathora-models-link{display:flex;align-items:center;gap:8px;height:36px;padding:0 12px 0 6px;background:#00d26a1a;border:1px solid rgba(0,210,106,.3);border-radius:8px;text-decoration:none;transition:all var(--transition-fast)}.hathora-models-link:hover{background:#00d26a33;border-color:#00d26a80;transform:translateY(-1px);box-shadow:0 4px 12px #00d26a33}.hathora-models-preview{width:22px;height:22px;border-radius:4px;object-fit:contain}.hathora-models-text{font-size:12px;font-weight:600;color:var(--hathora-green);white-space:nowrap}@media (max-width: 950px){.header-center{display:none}}@media (max-width: 700px){.logo-text,.hathora-models-text{display:none}.hathora-models-link{padding:0 6px}.zoom-display{display:none}}@media (max-width: 500px){.header{padding:0 12px}.header-left,.header-right,.controls{gap:8px}}.detail-panel{width:360px;background:#12121af2;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-left:1px solid rgba(255,255,255,.05);padding:24px;display:flex;flex-direction:column;gap:20px;overflow-y:auto;z-index:100}.detail-header{display:flex;align-items:center;justify-content:space-between}.detail-title-row{display:flex;align-items:center;gap:10px}.detail-indicator{width:4px;height:24px;border-radius:2px}.detail-icon{display:flex;align-items:center;justify-content:center}.detail-title{font-size:18px;font-weight:600;color:var(--text-primary);margin:0}.close-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:6px;color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast)}.close-btn:hover{background:#ffffff0d;color:var(--text-primary)}.close-btn svg{width:18px;height:18px}.detail-description{font-size:14px;line-height:1.6;color:var(--text-secondary);margin:0}.specs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.spec-item{padding:12px;background:#ffffff05;border:1px solid rgba(255,255,255,.04);border-radius:10px;display:flex;flex-direction:column;gap:4px}.spec-label{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em}.spec-value{font-size:18px;font-weight:600;color:var(--text-primary)}.features-section{display:flex;flex-direction:column;gap:12px}.features-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin:0}.features-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}.features-list li{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--text-secondary);line-height:1.5}.feature-bullet{width:6px;height:6px;border-radius:50%;margin-top:6px;flex-shrink:0}.architecture-note{padding:16px;background:#4ecdc40d;border:1px solid rgba(78,205,196,.1);border-radius:10px}.note-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--accent-secondary);margin:0 0 8px}.note-text{font-size:13px;line-height:1.6;color:var(--text-secondary);margin:0}.docs-link{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;background:linear-gradient(135deg,#ff6b4a1a,#4ecdc41a);border:1px solid rgba(255,107,74,.2);border-radius:10px;color:var(--accent-primary);text-decoration:none;font-size:13px;font-weight:500;transition:all var(--transition-fast);margin-top:auto}.docs-link:hover{background:linear-gradient(135deg,#ff6b4a26,#4ecdc426);border-color:#ff6b4a4d}@media (max-width: 950px){.detail-panel{width:300px;padding:16px}.specs-grid{grid-template-columns:1fr}}@media (max-width: 700px){.detail-panel{position:absolute;right:0;top:0;bottom:0;width:280px;box-shadow:-4px 0 20px #00000080}}@media (max-width: 450px){.detail-panel{width:100%;left:0}}.app{width:100%;height:100%;display:flex;flex-direction:column;background:var(--bg-primary);position:relative;overflow:hidden}.main-content{flex:1;display:flex;position:relative;overflow:hidden}.app:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(ellipse at 30% 20%,rgba(255,107,74,.05) 0%,transparent 50%),radial-gradient(ellipse at 70% 80%,rgba(78,205,196,.05) 0%,transparent 50%);pointer-events:none;z-index:0}:root{--bg-primary: #0d0d0d;--bg-secondary: #141414;--bg-tertiary: #1a1a1a;--bg-card: #171717;--accent-primary: #00D26A;--accent-secondary: #00D26A;--accent-tertiary: #ffe66d;--accent-purple: #a78bfa;--accent-pink: #ff6b9d;--hathora-green: #00D26A;--text-primary: #f0f0f5;--text-secondary: #9999a8;--text-muted: #666678;--encoder-audio: #ff6b4a;--encoder-image: #00D26A;--encoder-video: #a78bfa;--encoder-text: #ffe66d;--thinker-color: #00D26A;--talker-color: #ff6b9d;--moe-color: #ff9f43;--glow-primary: 0 0 30px rgba(0, 210, 106, .3);--glow-secondary: 0 0 30px rgba(0, 210, 106, .3);--font-display: "Outfit", sans-serif;--font-mono: "JetBrains Mono", monospace;--transition-fast: .15s ease;--transition-normal: .3s ease;--transition-slow: .5s ease}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow:hidden}body{font-family:var(--font-display);background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--bg-tertiary);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}::selection{background:var(--accent-primary);color:var(--bg-primary)}.mono{font-family:var(--font-mono)}.grid-bg{background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:50px 50px}@keyframes gradientShift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.gradient-animated{background:linear-gradient(-45deg,var(--bg-primary),var(--bg-secondary),var(--bg-tertiary));background-size:400% 400%;animation:gradientShift 15s ease infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.pulse{animation:pulse 2s ease-in-out infinite}@keyframes flow{0%{stroke-dashoffset:20}to{stroke-dashoffset:0}}.flow-animation{stroke-dasharray:10 10;animation:flow 1s linear infinite}.glow-hover:hover{filter:drop-shadow(var(--glow-primary))}