:root{--color-bg: #0a0a0f;--color-surface: #14141f;--color-surface-2: #1e1e2e;--color-border: #2a2a3e;--color-text: #e4e4ef;--color-text-muted: #8888a0;--color-accent: #7c5cfc;--color-accent-light: #9d84fd;--color-accent-glow: rgba(124, 92, 252, .15);--color-green: #4ade80;--color-orange: #fb923c;--radius: 12px;--max-width: 1100px}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;background:var(--color-bg);color:var(--color-text);line-height:1.6;-webkit-font-smoothing:antialiased}#app{min-height:100vh}.nav{position:fixed;top:0;left:0;right:0;z-index:100;background:#0a0a0fd9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--color-border)}.nav-inner{max-width:var(--max-width);margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:56px}.nav-logo{font-size:16px;font-weight:700;color:var(--color-accent-light);text-decoration:none}.nav-links{display:flex;gap:24px;list-style:none}.nav-links a{color:var(--color-text-muted);text-decoration:none;font-size:14px;transition:color .2s}.nav-links a:hover{color:var(--color-text)}section{max-width:var(--max-width);margin:0 auto;padding:80px 24px}section:first-of-type{padding-top:140px}.section-title{font-size:32px;font-weight:700;margin-bottom:12px;background:linear-gradient(135deg,var(--color-text),var(--color-accent-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.section-subtitle{color:var(--color-text-muted);font-size:16px;margin-bottom:40px;max-width:600px}.hero{text-align:center;padding-top:160px!important;padding-bottom:100px!important}.hero .section-title{font-size:56px;line-height:1.1;margin-bottom:20px}.hero .section-subtitle{font-size:20px;margin:0 auto 40px;max-width:640px}.hero-badges{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 16px;border-radius:999px;font-size:13px;font-weight:500;background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text-muted)}.badge.accent{background:var(--color-accent-glow);border-color:var(--color-accent);color:var(--color-accent-light)}.concept-diagram{display:flex;align-items:center;justify-content:center;gap:32px;margin:60px 0;flex-wrap:wrap}.concept-box{width:200px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--color-border);background:var(--color-surface)}.concept-box-label{padding:10px;text-align:center;font-size:13px;font-weight:600;color:var(--color-text-muted);border-bottom:1px solid var(--color-border)}.concept-half{height:80px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600}.concept-half.color{background:linear-gradient(135deg,#e74c3c,#3498db,#2ecc71);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3)}.concept-half.alpha{background:linear-gradient(to right,#000 20%,#666,#fff 80%);color:#999}.concept-arrow{font-size:28px;color:var(--color-accent)}.concept-result{height:80px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#e74c3c88,#3498db88,#2ecc7188),repeating-conic-gradient(#808080 0% 25%,transparent 0% 50%) 50% / 16px 16px;font-size:12px;font-weight:600;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5)}.demo-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}.demo-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden}.demo-card-header{padding:16px 20px;border-bottom:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between}.demo-card-title{font-size:15px;font-weight:600}.demo-card-badge{font-size:11px;padding:2px 8px;border-radius:999px;background:var(--color-accent-glow);color:var(--color-accent-light)}.demo-canvas-wrapper{position:relative;aspect-ratio:1;background:repeating-conic-gradient(#1a1a2a,#1a1a2a 25%,#22223a 0%,#22223a 50%) 50% / 20px 20px;display:flex;align-items:center;justify-content:center}.demo-canvas-wrapper canvas{max-width:100%;max-height:100%}.demo-fps{position:absolute;top:8px;right:8px;font-size:11px;font-family:monospace;background:#000000b3;color:var(--color-green);padding:2px 8px;border-radius:4px}.demo-controls{padding:16px 20px;border-top:1px solid var(--color-border);display:flex;gap:8px;align-items:center}.demo-controls button{padding:6px 16px;border-radius:6px;border:1px solid var(--color-border);background:var(--color-surface-2);color:var(--color-text);font-size:13px;cursor:pointer;transition:all .2s}.demo-controls button:hover{background:var(--color-accent-glow);border-color:var(--color-accent)}.demo-controls button.active{background:var(--color-accent);border-color:var(--color-accent);color:#fff}.source-videos{display:flex;align-items:center;justify-content:center;gap:20px;margin:40px 0;flex-wrap:wrap}.source-video-card{flex:1;min-width:200px;max-width:320px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden}.source-video-label{padding:12px 16px;font-size:13px;font-weight:600;color:var(--color-text-muted);border-bottom:1px solid var(--color-border);text-align:center}.source-video-card video,.source-video-card canvas{display:block;width:100%;aspect-ratio:1;object-fit:contain}.source-video-arrow{font-size:24px;color:var(--color-accent);flex-shrink:0}@media(max-width:768px){.source-videos{flex-direction:column}.source-video-arrow{transform:rotate(90deg)}.source-video-card{max-width:100%}}.bg-selector{display:flex;gap:8px;margin-bottom:24px}.bg-option{width:32px;height:32px;border-radius:8px;border:2px solid var(--color-border);cursor:pointer;transition:border-color .2s}.bg-option:hover,.bg-option.active{border-color:var(--color-accent)}.converter{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:40px}.dropzone{border:2px dashed var(--color-border);border-radius:var(--radius);padding:60px 40px;text-align:center;cursor:pointer;transition:all .2s}.dropzone:hover,.dropzone.dragover{border-color:var(--color-accent);background:var(--color-accent-glow)}.dropzone-icon{font-size:48px;margin-bottom:16px;opacity:.4}.dropzone-text{font-size:16px;color:var(--color-text-muted)}.dropzone-text strong{color:var(--color-accent-light)}.progress-bar{width:100%;height:8px;background:var(--color-surface-2);border-radius:4px;overflow:hidden;margin-top:24px;display:none}.progress-bar.active{display:block}.progress-bar-fill{height:100%;background:var(--color-accent);border-radius:4px;transition:width .3s;width:0%}.progress-status{margin-top:8px;font-size:13px;color:var(--color-text-muted);display:none}.progress-status.active{display:block}.converter-result{margin-top:24px;display:none}.converter-result.active{display:block}.download-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 24px;border-radius:8px;border:none;background:var(--color-accent);color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:opacity .2s}.download-btn:hover{opacity:.85}.comparison-table{width:100%;border-collapse:collapse;border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden}.comparison-table th,.comparison-table td{padding:12px 16px;text-align:left;font-size:14px;border-bottom:1px solid var(--color-border)}.comparison-table th{background:var(--color-surface);font-weight:600;color:var(--color-text-muted);font-size:12px;text-transform:uppercase;letter-spacing:.5px}.comparison-table td{background:var(--color-surface)}.comparison-table tr:hover td{background:var(--color-surface-2)}.check{color:var(--color-green)}.cross{color:var(--color-orange)}.code-block{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:20px 24px;overflow-x:auto;margin-bottom:24px}.code-block{position:relative}.stackblitz-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:8px;border:1px solid #1389fd;background:#1389fd1a;color:#1389fd;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;margin-top:16px}.stackblitz-btn:hover{background:#1389fd33;border-color:#4da6ff}.stackblitz-btn svg{flex-shrink:0}.code-block pre{font-family:SF Mono,Menlo,Monaco,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--color-text)}.code-block .keyword{color:var(--color-accent-light)}.code-block .string{color:var(--color-green)}.code-block .comment{color:var(--color-text-muted)}.code-tabs{display:flex;gap:0;margin-bottom:-1px;position:relative;z-index:1}.code-tab{padding:8px 20px;font-size:13px;font-weight:500;border:1px solid var(--color-border);border-bottom:none;border-radius:var(--radius) var(--radius) 0 0;background:var(--color-surface);color:var(--color-text-muted);cursor:pointer;transition:all .2s}.code-tab.active{background:var(--color-surface-2);color:var(--color-accent-light)}.timeline{position:relative;padding-left:32px}.timeline:before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:2px;background:var(--color-border)}.timeline-item{position:relative;margin-bottom:32px}.timeline-item:before{content:"";position:absolute;left:-32px;top:8px;width:14px;height:14px;border-radius:50%;background:var(--color-accent);border:3px solid var(--color-bg)}.timeline-item h3{font-size:16px;font-weight:600;margin-bottom:6px}.timeline-item p{font-size:14px;color:var(--color-text-muted);line-height:1.6}.footer{text-align:center;padding:40px 24px;border-top:1px solid var(--color-border);color:var(--color-text-muted);font-size:13px}.footer a{color:var(--color-accent-light);text-decoration:none}@media(max-width:768px){.hero .section-title{font-size:36px}.hero .section-subtitle{font-size:16px}.concept-diagram{flex-direction:column}.concept-arrow{transform:rotate(90deg)}.nav-links{display:none}}