:root{--bg-app: #050505;--bg-panel: #0a0a0a;--bg-card: #111111;--bg-element: #1a1a1a;--border-subtle: #222;--border-active: #444;--primary: #00f3ff;--primary-dim: rgba(0, 243, 255, .1);--primary-glow: rgba(0, 243, 255, .5);--text-main: #fff;--text-muted: #888;--text-dim: #555;--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;--font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--ease-out: cubic-bezier(.215, .61, .355, 1)}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-app);color:var(--text-main);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-app)}::-webkit-scrollbar-thumb{background:var(--bg-element);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--border-active)}.container{max-width:1200px;margin:0 auto;padding:0 24px}.header{border-bottom:1px solid var(--border-subtle);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:sticky;top:0;z-index:100;background:#050505cc}.header .container{height:80px}.logo{font-weight:800;font-size:1.25rem;letter-spacing:-.05em;display:flex;align-items:center;gap:12px}.logo-mark{width:24px;height:24px;background:var(--primary);border-radius:50%;box-shadow:0 0 15px var(--primary-glow)}.nav-links{display:flex;gap:24px}.nav-link{color:var(--text-muted);text-decoration:none;font-size:.9rem;transition:color .2s}.nav-link:hover{color:var(--text-main)}.hero{padding:80px 0 60px;text-align:center;position:relative}.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:99px;background:var(--bg-element);border:1px solid var(--border-subtle);font-size:.8rem;color:var(--primary);margin-bottom:24px}.hero-title{font-size:4rem;font-weight:800;line-height:1;letter-spacing:-.04em;background:linear-gradient(to bottom right,#fff,#888);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:24px}.hero-subtitle{font-size:1.25rem;color:var(--text-muted);max-width:600px;margin:0 auto 40px;line-height:1.5}.install-cmd{display:inline-flex;align-items:center;gap:12px;padding:12px 20px;background:var(--bg-panel);border:1px solid var(--border-subtle);border-radius:8px;font-family:var(--font-mono);font-size:.9rem;color:var(--text-muted);transition:all .2s;cursor:pointer}.install-cmd:hover{border-color:var(--border-active);color:var(--text-main);box-shadow:0 0 20px #00000080}.install-cmd .copy-icon{width:16px;height:16px;opacity:.6}.playground{margin:60px 0;display:grid;grid-template-columns:1fr 350px;gap:24px;align-items:start}.preview-panel{background:var(--bg-panel);border:1px solid var(--border-subtle);border-radius:16px;padding:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:500px;position:relative;overflow:hidden}.preview-panel:before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--border-subtle) 1px,transparent 1px),linear-gradient(90deg,var(--border-subtle) 1px,transparent 1px);background-size:40px 40px;opacity:.1;pointer-events:none}.preview-panel .live-photo{width:auto!important;height:100%!important;display:flex!important;min-width:auto!important;max-width:100%}.preview-panel .live-photo__img,.preview-panel .live-photo__video{width:auto!important;height:100%!important;object-fit:contain!important;position:relative!important}.preview-panel .live-photo__video{position:absolute!important;top:0;left:0}.preview-panel .live-badge{position:absolute!important;z-index:10!important;transform:none!important;margin:0!important}.preview-panel .live-badge .live-badge__icon svg{width:28px!important;height:28px!important}.preview-panel .live-badge--bottom-left{inset:auto auto 12px 12px!important}.preview-panel .live-photo__mute-btn{position:absolute!important;z-index:10!important;inset:auto 12px 12px auto!important}.preview-panel .live-photo{position:relative!important}.control-panel{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:16px;padding:24px;position:sticky;top:100px}.panel-header{font-size:.9rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:20px;display:flex;justify-content:space-between;align-items:center}.control-group{margin-bottom:24px}.control-label{display:block;font-size:.85rem;color:var(--text-muted);margin-bottom:8px}.control-select{width:100%;padding:10px;background:var(--bg-element);border:1px solid var(--border-subtle);border-radius:6px;color:var(--text-main);font-family:inherit;font-size:.9rem;outline:none;cursor:pointer;transition:border-color .2s}.control-select:focus{border-color:var(--primary)}.upload-area{margin-top:24px;border:1px dashed var(--border-subtle);border-radius:8px;padding:20px;text-align:center;transition:all .2s;cursor:pointer}.upload-area:hover,.upload-area.active{border-color:var(--primary);background:var(--primary-dim)}.upload-text{font-size:.85rem;color:var(--text-muted)}.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin:80px 0}.feature-card{background:var(--bg-card);border:1px solid var(--border-subtle);padding:32px;border-radius:16px;transition:transform .2s}.feature-card:hover{transform:translateY(-4px);border-color:var(--border-active)}.feature-icon{width:48px;height:48px;background:var(--bg-element);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;color:var(--primary)}.feature-title{font-size:1.25rem;font-weight:600;margin-bottom:12px}.feature-desc{color:var(--text-muted);line-height:1.6;font-size:.95rem}.footer{border-top:1px solid var(--border-subtle);padding:40px 0;margin-top:80px;text-align:center;color:var(--text-dim);font-size:.9rem}@media(max-width:768px){.hero-title{font-size:2.5rem}.playground{grid-template-columns:1fr}.preview-panel{min-height:300px;padding:20px}}