:root{--font-sans: "Inter", system-ui, -apple-system, sans-serif;--font-display: "Iowan Old Style", "Palatino", "Palatino Linotype", "Book Antiqua", Georgia, serif;--bg-base: #1e1145;--bg-surface: rgba(45, 26, 96, .75);--bg-surface-opaque: #2d1a60;--bg-card: rgba(45, 26, 96, .4);--bg-card-hover: rgba(55, 32, 115, .6);--bg-console: #150c30;--border-color: rgba(188, 169, 230, .15);--border-color-glow: rgba(171, 117, 255, .3);--color-primary: #ab75ff;--color-secondary: #ff6f59;--color-teal: #00f5e0;--color-danger: #ef4444;--gradient-brand: linear-gradient(135deg, #ab75ff 0%, #70ffe9 50%, #ff6f59 100%);--gradient-glow: linear-gradient(135deg, rgba(171, 117, 255, .15) 0%, rgba(255, 111, 89, .15) 100%);--gradient-dark: linear-gradient(180deg, #1e1145 0%, #150c30 100%);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .15);--shadow-lg: 0 10px 30px rgba(0, 0, 0, .4);--shadow-glow: 0 0 24px rgba(171, 117, 255, .25);--transition-fast: .2s cubic-bezier(.4, 0, .2, 1);--transition-smooth: .3s cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--bg-base);background-image:var(--gradient-dark);color:#f3f4f6;min-height:100vh;overflow-x:hidden;line-height:1.6;-webkit-font-smoothing:antialiased}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#0003}::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.glass-panel{background:var(--bg-surface);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-color);border-radius:16px}.text-gradient{background:var(--gradient-brand);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.container{max-width:1200px;margin:0 auto;padding:0 24px}header{position:absolute;top:0;left:0;right:0;z-index:100;padding:24px 0;background:transparent;border-bottom:none;backdrop-filter:none;-webkit-backdrop-filter:none}header .header-inner{display:flex;justify-content:space-between;align-items:center;gap:20px}.logo-brand-container{display:flex;align-items:center}.brand{display:inline-flex;align-items:center;gap:.5rem;color:#fefaf0;font-weight:600;letter-spacing:.02em;text-decoration:none}.brand-mark{align-self:center;width:32px;height:32px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px #d4a84766}.brand-word{font-family:var(--font-display);font-size:1.125rem;color:#ffe290}.brand:hover .brand-word{color:#f5c353}.brand-tld{font-family:var(--font-sans);font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:.15rem .45rem;border-radius:6px;margin-left:.25rem;line-height:1;align-self:center;display:inline-block}.brand-tld.tld-app{color:#ab75ff;border:1px solid rgba(171,117,255,.3);background:#ab75ff0d}.brand-sub{font-family:var(--font-display);font-size:1.1rem;font-weight:700;margin-left:.25rem}.brand-separator{color:#ffffff40;font-weight:300;margin:0 .5rem;font-size:.9rem}.site-nav{display:flex;align-items:center}.site-nav a{margin-left:1rem;color:#bca9e6;font-size:.875rem;border-bottom:none;text-decoration:none;transition:color var(--transition-fast) ease}.site-nav a:hover{color:var(--color-teal)}.logo{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-weight:800;font-size:1.25rem;letter-spacing:-.02em}.logo img{height:28px}.nav-links{display:flex;gap:8px}.nav-link{background:transparent;border:none;color:#9ca3af;font-size:.875rem;font-weight:500;padding:8px 16px;cursor:pointer;border-radius:9999px;transition:var(--transition-fast)}.nav-link:hover,.nav-link.active{color:#fff;background:#ffffff0d}.nav-link.active{box-shadow:inset 0 0 0 1px var(--border-color-glow);background:#ab75ff1a;color:var(--color-primary)}.hero{position:relative;padding:96px 0 64px;text-align:center;overflow:hidden}.glow-sphere{position:absolute;border-radius:50%;filter:blur(120px);opacity:.4;pointer-events:none;z-index:0}.glow-sphere.purple{width:400px;height:400px;top:-100px;left:20%;background:var(--color-primary)}.glow-sphere.pink{width:350px;height:350px;bottom:0;right:15%;background:var(--color-secondary)}.hero-content{position:relative;z-index:1;max-width:800px;margin:0 auto}.eyebrow{display:inline-block;font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.15em;color:var(--color-teal);margin-bottom:16px}.hero h1{font-family:var(--font-display);font-weight:800;font-size:3.5rem;line-height:1.15;letter-spacing:-.03em;margin-bottom:24px}@media(max-width:768px){.hero h1{font-size:2.5rem}}.hero p{font-size:1.125rem;color:#9ca3af;margin-bottom:32px;max-width:600px;margin-left:auto;margin-right:auto}.hero-cta{display:flex;justify-content:center;gap:16px}.btn{display:inline-flex;align-items:center;gap:8px;font-size:.875rem;font-weight:600;padding:12px 24px;border-radius:9999px;cursor:pointer;transition:var(--transition-fast);text-decoration:none}.btn-primary{background:var(--gradient-brand);color:#fff;border:none;box-shadow:var(--shadow-sm)}.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-glow)}.btn-secondary{background:#ffffff0d;color:#fff;border:1px solid var(--border-color)}.btn-secondary:hover{background:#ffffff1a;transform:translateY(-2px)}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px;padding:48px 0}.feature-card{padding:32px;transition:var(--transition-smooth)}.feature-card:hover{transform:translateY(-4px);border-color:#6366f166;box-shadow:var(--shadow-sm)}.feature-icon-wrapper{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;background:#ab75ff1a;color:var(--color-primary);margin-bottom:20px}.feature-card.teal .feature-icon-wrapper{background:#00f5e01a;color:var(--color-teal)}.feature-card.pink .feature-icon-wrapper{background:#ff6f591a;color:var(--color-secondary)}.feature-card h3{font-family:var(--font-display);font-size:1.25rem;font-weight:600;margin-bottom:12px}.feature-card p{color:#9ca3af;font-size:.95rem}.screenshots-section{padding:64px 0;text-align:center}.screenshots-section h2{font-family:var(--font-display);font-size:2.25rem;margin-bottom:12px}.screenshots-section p{color:#9ca3af;margin-bottom:40px}.screenshot-carousel-container{max-width:1000px;margin:0 auto}.screenshot-tabs{display:flex;justify-content:center;gap:12px;margin-bottom:24px}.screenshot-tab{background:#ffffff08;border:1px solid var(--border-color);padding:8px 20px;border-radius:9999px;color:#9ca3af;cursor:pointer;font-size:.85rem;font-weight:500;transition:var(--transition-fast)}.screenshot-tab:hover,.screenshot-tab.active{color:#fff;background:#ffffff14}.screenshot-tab.active{border-color:var(--color-primary);box-shadow:0 0 12px #6366f133}.screenshot-display{display:flex;justify-content:center;align-items:center;border-radius:20px;overflow:hidden;border:1px solid var(--border-color);background:#0006;padding:24px;min-height:400px}.screenshot-image{max-height:600px;max-width:100%;border-radius:12px;box-shadow:var(--shadow-lg);object-fit:contain}.walkthrough-section{padding:64px 0}.walkthrough-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:center}@media(max-width:768px){.walkthrough-grid{grid-template-columns:1fr;gap:32px}}.walkthrough-steps{display:flex;flex-direction:column;gap:16px}.step-card{padding:20px;border-radius:12px;cursor:pointer;transition:var(--transition-fast);border:1px solid transparent}.step-card:hover{background:#ffffff05}.step-card.active{background:#6366f10d;border-color:#6366f133}.step-header{display:flex;align-items:center;gap:12px;margin-bottom:8px}.step-number{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#6366f11a;color:#818cf8;font-size:.85rem;font-weight:700}.step-card.active .step-number{background:var(--color-primary);color:#fff}.step-card h3{font-family:var(--font-display);font-size:1.1rem;font-weight:600}.step-card p{color:#9ca3af;font-size:.9rem;padding-left:40px}.walkthrough-visual{height:100%;display:flex;flex-direction:column;justify-content:center}.visual-panel{padding:32px;height:380px;display:flex;flex-direction:column;justify-content:space-between}.visual-title{font-family:var(--font-display);font-size:1.25rem;font-weight:700;margin-bottom:16px}.manager-layout{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:24px 0}@media(max-width:1024px){.manager-layout{grid-template-columns:1fr}}.card-title-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--border-color)}.card-title-row h2{font-family:var(--font-display);font-size:1.25rem;font-weight:700;display:flex;align-items:center;gap:8px}.badge-count{font-size:.75rem;padding:2px 8px;border-radius:9999px;background:#ffffff1a;color:#d1d5db}.frontend-list{display:flex;flex-direction:column;gap:16px}.frontend-card{padding:16px;border-radius:12px;background:var(--bg-card);border:1px solid var(--border-color);transition:var(--transition-fast)}.frontend-card:hover{background:var(--bg-card-hover);border-color:#ffffff26}.fe-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.fe-info h3{font-family:var(--font-display);font-size:1rem;font-weight:600}.fe-info p{font-size:.75rem;color:#9ca3af}.fe-status{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;font-weight:600;padding:4px 8px;border-radius:6px}.fe-status.playing{background:#14b8a61a;color:#2dd4bf}.fe-status.idle{background:#ffffff0d;color:#9ca3af}.fe-nowplaying{background:#0003;border-radius:8px;padding:10px 12px;font-size:.85rem;margin-bottom:12px}.fe-title{font-weight:600;color:#f3f4f6;margin-bottom:4px}.fe-sub{color:#9ca3af;font-size:.75rem;margin-bottom:8px}.fe-progress-bar{height:4px;width:100%;background:#ffffff1a;border-radius:2px;overflow:hidden;margin-bottom:4px}.fe-progress-fill{height:100%;background:var(--color-primary);border-radius:2px;transition:width .5s linear}.fe-progress-time{display:flex;justify-content:space-between;font-size:.7rem;color:#6b7280}.fe-controls{display:flex;gap:8px}.btn-small{display:inline-flex;align-items:center;justify-content:center;gap:4px;font-size:.75rem;font-weight:600;padding:6px 12px;border-radius:6px;cursor:pointer;background:#ffffff0d;border:1px solid var(--border-color);color:#e5e7eb;transition:var(--transition-fast)}.btn-small:hover{background:#ffffff1a;color:#fff}.btn-small.danger:hover{background:#ef444433;border-color:#ef444466;color:#ef4444}.console-panel{display:flex;flex-direction:column;height:450px}.console-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#0000004d;border-top-left-radius:16px;border-top-right-radius:16px;border-bottom:1px solid var(--border-color)}.console-title{font-family:var(--font-display);font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--color-teal);display:flex;align-items:center;gap:8px}.pulse-dot{width:8px;height:8px;border-radius:50%;background-color:var(--color-teal);box-shadow:0 0 8px var(--color-teal);animation:pulse 1.5s infinite}@keyframes pulse{0%{transform:scale(.9);opacity:.6}50%{transform:scale(1.2);opacity:1}to{transform:scale(.9);opacity:.6}}.console-body{flex:1;background:var(--bg-console);padding:16px;font-family:Courier New,Courier,monospace;font-size:.8rem;color:#34d399;overflow-y:auto;border-bottom-left-radius:16px;border-bottom-right-radius:16px}.console-line{margin-bottom:6px;line-height:1.4;word-break:break-all;animation:slideIn .15s ease-out}@keyframes slideIn{0%{transform:translateY(4px);opacity:0}to{transform:translateY(0);opacity:1}}.console-time{color:#6b7280;margin-right:8px}.console-tag{color:var(--color-primary);margin-right:6px}.console-tag.event{color:var(--color-secondary)}.console-tag.api{color:var(--color-teal)}.dvr-panel{display:grid;grid-template-columns:1.4fr 1fr;gap:24px}@media(max-width:1024px){.dvr-panel{grid-template-columns:1fr}}.rec-list{display:flex;flex-direction:column;gap:12px;max-height:600px;overflow-y:auto;padding-right:8px}.rec-card{display:flex;gap:16px;padding:16px;border-radius:12px;background:var(--bg-card);border:1px solid var(--border-color);transition:var(--transition-fast)}.rec-card:hover{background:var(--bg-card-hover);border-color:#6366f133}.rec-thumb{width:120px;height:80px;border-radius:6px;background:linear-gradient(135deg,#6366f133,#ec489933);display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid rgba(255,255,255,.05);font-size:.75rem;color:#9ca3af}.rec-info{flex:1;display:flex;flex-direction:column;justify-content:space-between}.rec-title-row{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}.rec-title{font-family:var(--font-display);font-size:.95rem;font-weight:700;color:#fff}.rec-meta{font-size:.75rem;color:#9ca3af;margin-top:4px}.rec-desc{font-size:.8rem;color:#6b7280;margin-top:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.rec-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}.endpoint-tester-panel{margin-top:32px;padding:24px}.tester-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}.test-endpoint-btn{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-radius:12px;background:#ffffff05;border:1px solid var(--border-color);color:#fff;font-weight:500;cursor:pointer;text-align:left;transition:var(--transition-fast)}.test-endpoint-btn:hover{background:#6366f10f;border-color:#6366f14d;transform:translateY(-1px)}.endpoint-path{font-family:Courier New,Courier,monospace;font-size:.75rem;color:var(--color-teal);margin-top:4px;display:block}.endpoint-method{font-size:.65rem;font-weight:800;padding:2px 6px;border-radius:4px;text-transform:uppercase;margin-right:8px}.endpoint-method.get{background:#14b8a626;color:#2dd4bf}.endpoint-method.post{background:#6366f126;color:#818cf8}footer{border-top:1px solid var(--border-color);padding:40px 0;margin-top:80px;background:#0003}.footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}.footer-inner p{font-size:.85rem;color:#6b7280}.footer-inner a{color:#9ca3af;text-decoration:none;font-size:.85rem;transition:var(--transition-fast)}.footer-inner a:hover{color:#fff}.screenshots-section{padding:60px 0;border-top:1px solid var(--border-color);margin-top:60px}.screenshots-section h2{font-family:var(--font-display);font-size:2rem;font-weight:800;background:linear-gradient(135deg,#fff,#a5b4fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:8px}.screenshot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px;margin-top:32px}.screenshot-card{background:#ffffff05;border:1px solid var(--border-color);border-radius:16px;overflow:hidden;transition:all var(--transition-fast);cursor:pointer}.screenshot-card:hover{transform:translateY(-4px);border-color:#6366f14d;box-shadow:0 12px 30px #00000080,0 0 15px #6366f11a;background:#ffffff0a}.screenshot-image-wrapper{position:relative;width:100%;padding-top:56.25%;overflow:hidden;background:#000}.screenshot-card .screenshot-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:transform var(--transition-fast)}.screenshot-card:hover .screenshot-image{transform:scale(1.05)}.screenshot-info{padding:16px;text-align:left}.screenshot-info h3{font-family:var(--font-display);font-size:1rem;font-weight:700;color:#fff;margin-bottom:4px}.screenshot-info p{font-size:.85rem;color:#9ca3af;margin:0}.articles-grid-section{padding:64px 0;border-top:1px solid var(--border-color);margin-top:60px}.articles-grid-section .section-header{text-align:center;margin-bottom:40px}.articles-grid-section h2{font-family:var(--font-display);font-size:2rem;font-weight:800;background:linear-gradient(135deg,#fff,#a5b4fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:8px}.articles-grid-section p{color:#9ca3af;font-size:.95rem}.articles-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}.article-card{padding:32px 24px;display:flex;flex-direction:column;justify-content:space-between;min-height:280px;cursor:pointer;transition:all var(--transition-smooth)}.article-card:hover{transform:translateY(-4px);border-color:var(--color-primary);box-shadow:var(--shadow-glow);background:#ffffff08}.article-meta{display:flex;justify-content:space-between;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:20px}.article-meta .category{color:var(--color-teal)}.article-meta .read-time{color:#6b7280}.article-body .icon-box{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;background:#ab75ff1a;color:var(--color-primary);margin-bottom:16px}.article-body h3{font-family:var(--font-display);font-size:1.25rem;font-weight:700;color:#fff;margin-bottom:8px;line-height:1.3}.article-body p{font-size:.875rem;color:#9ca3af;line-height:1.5;margin:0}.article-footer{display:flex;align-items:center;gap:4px;font-size:.85rem;font-weight:600;color:var(--color-primary);margin-top:24px;transition:gap var(--transition-fast)}.article-card:hover .article-footer{gap:8px}.article-view-layout{padding-top:120px;max-width:800px;margin:0 auto;text-align:left}.back-btn{display:inline-flex;align-items:center;gap:8px;font-size:.875rem;font-weight:600;color:#9ca3af;background:transparent;border:none;cursor:pointer;margin-bottom:24px;transition:color var(--transition-fast)}.back-btn:hover{color:#fff}.detailed-article{padding:48px}@media(max-width:640px){.detailed-article{padding:24px}}.article-category{font-size:.85rem;font-weight:700;text-transform:uppercase;color:var(--color-teal);letter-spacing:.1em;display:block;margin-bottom:12px}.detailed-article h1{font-family:var(--font-display);font-size:2.5rem;font-weight:800;color:#fff;margin-bottom:16px;line-height:1.2}.article-lead{font-size:1.125rem;color:#d1d5db;line-height:1.6;margin-bottom:32px}.code-section{margin-top:32px}.code-section h3{font-size:1.1rem;font-weight:600;margin-bottom:12px;color:#fff}.code-block{padding:20px;background:#0006;border-radius:12px;border:1px solid var(--border-color);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.8rem;line-height:1.5;overflow-x:auto;white-space:pre-wrap}.section-desc{font-size:.875rem;color:#9ca3af;margin-bottom:12px}.article-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-top:32px;margin-bottom:32px}.article-grid-card{padding:24px;background:#ffffff05;border-radius:12px;border:1px solid var(--border-color)}.article-grid-card h4{font-size:1rem;font-weight:600;color:#fff;margin-bottom:12px}.article-grid-card ul{font-size:.875rem;color:#9ca3af;padding-left:20px;line-height:1.8;margin:0}.article-grid-card p{font-size:.875rem;color:#9ca3af;line-height:1.6;margin:0}.alert-tip{padding:24px;background:#14b8a60d;border-radius:12px;border:1px solid rgba(20,184,166,.15);margin-top:32px;margin-bottom:32px}.alert-tip h4{color:var(--color-teal);font-size:1rem;font-weight:600;margin-bottom:12px}.alert-tip ol{font-size:.875rem;color:#d1d5db;padding-left:20px;line-height:1.8;margin:0}.safety-warnings{display:flex;flex-direction:column;gap:20px;margin-top:32px}.warning-card{padding:24px;background:#ffffff05;border-radius:12px;border:1px solid var(--border-color)}.warning-card h4{font-size:1rem;font-weight:600;color:#fff;margin-bottom:12px}.warning-card p{font-size:.875rem;color:#d1d5db;line-height:1.6;margin:0}.warning-card.danger{border-color:#ef444440;background:#ef444405}.warning-card.danger h4{color:#f87171}.warning-card.info{border-color:#6366f140;background:#6366f105}.warning-card.info h4{color:#818cf8}