*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#f5f7fa;--surface:#fff;--surface-hover:#f0f4f8;--text:#1a1d21;--text-muted:#6e7782;--border:#e2e8f0;--border-hover:#cbd5e1;--primary:#1e90ff;--primary-hover:#0077e6;--teal:#00d4aa;--danger:#ef4444;--danger-bg:#fee2e2;--success:#10b981;--success-bg:#d1fae5;--warning:#f59e0b;--warning-bg:#fef3c7;--shadow-sm:0 1px 2px #0000000d;--shadow-md:0 4px 12px #0000000d;--shadow-lg:0 12px 32px #00000014;--radius-sm:8px;--radius-md:16px;--radius-lg:24px;--font:"Inter", system-ui, -apple-system, sans-serif;--transition:all .25s cubic-bezier(.25, .8, .25, 1)}[data-theme=dark]{--bg:#1a1a20;--surface:#24242c;--surface-hover:#2d2d36;--text:#f0f2f5;--text-muted:#9ca3af;--border:#33333f;--border-hover:#4b4b5c;--primary:#3b82f6;--primary-hover:#60a5fa;--danger-bg:#ef444426;--success-bg:#10b98126;--warning-bg:#f59e0b26;--shadow-sm:0 1px 2px #0003;--shadow-md:0 4px 12px #00000040;--shadow-lg:0 12px 32px #0006}html,body{width:100%;max-width:100vw;overflow-x:hidden}body{background-color:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;transition:background-color .3s,color .3s;overflow-x:hidden}.app-container{flex-direction:column;display:flex}.header{justify-content:space-between;align-items:center;width:100%;max-width:1400px;margin:0 auto;padding:24px 5%;display:flex}.logo-area{align-items:center;gap:12px;display:flex}.logo-img{object-fit:contain;width:40px;height:40px}.logo-text{letter-spacing:-.5px;color:var(--text);font-size:22px;font-weight:800}.theme-toggle{background:var(--surface);border:1px solid var(--border);color:var(--text);cursor:pointer;width:40px;height:40px;transition:var(--transition);border-radius:50%;justify-content:center;align-items:center;display:flex}.theme-toggle:hover{background:var(--surface-hover);transform:translateY(-2px)}.main-content{width:100%}.hero-section-wrapper{align-items:center;max-width:1200px;min-height:calc(100vh - 120px);margin:0 auto;padding:20px 5%;display:flex}.hero-grid{grid-template-columns:1fr;gap:40px;width:100%;display:grid}@media (min-width:900px){.hero-grid{grid-template-columns:1fr 1fr;align-items:center;gap:80px}}.interaction-col{flex-direction:column;width:100%;min-width:0;max-width:480px;margin:0 auto;display:flex}.tabs{background:var(--surface);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);border:1px solid var(--border);margin-bottom:24px;padding:6px;display:flex}.tab-btn{color:var(--text-muted);cursor:pointer;transition:var(--transition);text-align:center;background:0 0;border:none;border-radius:10px;flex:1;padding:12px 8px;font-size:14px;font-weight:600}.tab-btn.active{background:var(--primary);color:#fff;box-shadow:var(--shadow-sm)}.tab-btn:not(.active):hover{background:var(--surface-hover);color:var(--text)}.action-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);transition:var(--transition);box-sizing:border-box;width:100%;min-width:0;padding:32px;position:relative;overflow:hidden}@media (max-width:600px){.action-card{padding:20px 16px}}.drop-zone{border:2px dashed var(--border);border-radius:var(--radius-md);text-align:center;cursor:pointer;transition:var(--transition);background:var(--bg);padding:60px 20px;position:relative}.drop-zone:hover,.drop-zone.drag-over{border-color:var(--primary);background:#1e90ff0d}.drop-zone input[type=file]{opacity:0;cursor:pointer;z-index:2;width:100%;height:100%;position:absolute;inset:0}.plus-icon-wrap{background:var(--primary);color:#fff;width:72px;height:72px;transition:var(--transition);border-radius:50%;justify-content:center;align-items:center;margin:0 auto 20px;display:flex;box-shadow:0 8px 24px #1e90ff66}.drop-zone:hover .plus-icon-wrap{transform:scale(1.08)}.drop-title{margin-bottom:8px;font-size:20px;font-weight:700}.drop-subtitle{color:var(--text-muted);font-size:14px}.recv-input-wrap{text-align:center}.recv-icon-wrap{width:64px;height:64px;color:var(--teal);background:#00d4aa1a;border-radius:50%;justify-content:center;align-items:center;margin:0 auto 24px;display:flex}.code-input{background:var(--bg);border:2px solid var(--border);border-radius:var(--radius-md);letter-spacing:12px;text-align:center;width:100%;color:var(--text);text-transform:uppercase;transition:var(--transition);outline:none;margin-bottom:20px;padding:16px 20px;font-size:28px;font-weight:800}.code-input:focus{border-color:var(--primary);box-shadow:0 0 0 4px #1e90ff1a}.code-input::placeholder{letter-spacing:6px;color:var(--text-muted);opacity:.5;font-size:20px}.info-col{flex-direction:column;justify-content:center;display:flex}.hero-title{letter-spacing:-1px;color:var(--text);margin-bottom:24px;font-size:42px;font-weight:800;line-height:1.15}@media (max-width:899px){.hero-title{text-align:center;font-size:32px}.info-col{margin-top:20px}}.hero-desc{color:var(--text-muted);margin-bottom:32px;font-size:18px;line-height:1.6}@media (max-width:899px){.hero-desc{text-align:center;font-size:16px}}.features-list{flex-direction:column;gap:16px;display:flex}.feature-item{color:var(--text);align-items:center;gap:16px;font-size:16px;font-weight:500;display:flex}.feature-icon{background:var(--surface);border:1px solid var(--border);width:40px;height:40px;color:var(--primary);box-shadow:var(--shadow-sm);border-radius:12px;justify-content:center;align-items:center;display:flex}.btn{border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);border:none;outline:none;justify-content:center;align-items:center;gap:8px;padding:14px 24px;font-size:15px;font-weight:600;display:inline-flex}.btn:active{transform:scale(.97)}.btn-primary{background:var(--primary);color:#fff;box-shadow:0 4px 12px #1e90ff4d}.btn-primary:hover{background:var(--primary-hover);transform:translateY(-1px)}.btn-ghost{background:var(--bg);color:var(--text);border:1px solid var(--border)}.btn-ghost:hover{background:var(--surface-hover);border-color:var(--border-hover)}.btn-danger{background:var(--danger-bg);color:var(--danger)}.btn-danger:hover{background:#ef444433}.btn-full{width:100%}.btn-sm{padding:10px 16px;font-size:13px}.state-card{text-align:center}.state-icon-large{background:var(--bg);border:1px solid var(--border);border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;margin:0 auto 24px;display:flex}.state-icon-large.pulsing{animation:2s infinite pulse-ring}@keyframes pulse-ring{0%{box-shadow:0 0 #1e90ff66}70%{box-shadow:0 0 0 20px #1e90ff00}to{box-shadow:0 0 #1e90ff00}}.state-title{margin-bottom:8px;font-size:24px;font-weight:700}.state-desc{color:var(--text-muted);margin-bottom:24px;font-size:15px}.qr-container{border-radius:var(--radius-md);box-shadow:var(--shadow-md);background:#fff;margin:0 auto 24px;padding:16px;display:inline-block}.code-display{justify-content:center;gap:8px;margin-bottom:24px;display:flex}.code-box{border-radius:var(--radius-sm);background:var(--bg);border:1px solid var(--border);width:50px;height:60px;color:var(--primary);justify-content:center;align-items:center;font-size:26px;font-weight:800;display:flex}.link-row{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);align-items:center;gap:12px;margin-bottom:24px;padding:12px 16px;display:flex}.link-text{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--text-muted);text-align:left;flex:1;font-size:14px;overflow:hidden}.flex-row{gap:12px;width:100%;display:flex}.flex-1{flex:1;min-width:0}@media (max-width:600px){.code-display{gap:6px}.code-box{width:42px;height:50px;font-size:20px}.link-row{gap:8px;padding:10px}.link-text{font-size:12px}}@media (max-width:380px){.code-display{gap:4px}.code-box{width:34px;height:44px;font-size:18px}.link-row{gap:6px;padding:8px}.link-text{font-size:11px}}.file-list{text-align:left;max-height:250px;margin:24px 0;padding-right:8px;overflow-y:auto}.file-item{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);flex-direction:column;gap:8px;margin-bottom:12px;padding:12px;display:flex}.file-item-header{justify-content:space-between;align-items:center;display:flex}.file-name-row{align-items:center;gap:8px;font-size:14px;font-weight:600;display:flex;overflow:hidden}.file-name{white-space:nowrap;text-overflow:ellipsis;max-width:200px;overflow:hidden}.file-pct{color:var(--teal);font-size:13px;font-weight:700}.progress-bar-bg{background:var(--border);border-radius:4px;width:100%;height:6px;overflow:hidden}.progress-bar-fill{background:var(--primary);border-radius:4px;height:100%;transition:width .2s linear}.overall-stats{color:var(--text-muted);border-top:1px solid var(--border);justify-content:space-between;margin-top:8px;padding-top:16px;font-size:13px;display:flex}.peer-anim{justify-content:center;align-items:center;gap:16px;margin:32px 0;display:flex}.device-icon{background:var(--bg);border:1px solid var(--border);width:56px;height:56px;color:var(--text);box-shadow:var(--shadow-sm);border-radius:16px;justify-content:center;align-items:center;display:flex}.connection-line{background:var(--border);flex:1;max-width:100px;height:2px;position:relative}.connection-dot{background:var(--primary);border-radius:50%;width:10px;height:10px;animation:1.5s linear infinite moveDot;position:absolute;top:-4px;left:0}@keyframes moveDot{0%{opacity:0;left:0}10%{opacity:1}90%{opacity:1}to{opacity:0;left:100%}}.toast-container{background:var(--text);color:var(--bg);box-shadow:var(--shadow-lg);z-index:9999;border-radius:30px;align-items:center;gap:8px;padding:12px 24px;font-size:14px;font-weight:500;transition:transform .4s cubic-bezier(.34,1.56,.64,1);display:flex;position:fixed;bottom:32px;left:50%;transform:translate(-50%)translateY(100px)}.toast-container.show{transform:translate(-50%)translateY(0)}.toast-container.err{background:var(--danger);color:#fff}.toast-container.ok{background:var(--success);color:#fff}.landing-section{max-width:1100px;margin:100px auto;padding:0 5%}.section-heading{text-align:center;color:var(--text);letter-spacing:-1px;margin-bottom:24px;font-size:42px;font-weight:800}.section-subheading{text-align:center;color:var(--text-muted);max-width:800px;margin:0 auto 48px;font-size:18px;line-height:1.6}.img-container{text-align:center;margin-bottom:100px}.img-container img{border-radius:var(--radius-lg);max-width:100%;height:auto;box-shadow:var(--shadow-lg);border:1px solid var(--border)}.feature-block{justify-content:space-between;align-items:center;gap:60px;margin-bottom:100px;display:flex}.feature-block:nth-child(2n){flex-direction:row-reverse}@media (max-width:768px){.feature-block,.feature-block:nth-child(2n){text-align:center;flex-direction:column;gap:30px;margin-bottom:80px}}.feature-text-content{flex:1}.feature-title{color:var(--text);letter-spacing:-.5px;margin-bottom:16px;font-size:32px;font-weight:800}.feature-desc{color:var(--text-muted);font-size:18px;line-height:1.6}.feature-desc a{color:var(--primary);text-decoration:underline}.feature-large-icon{background:var(--primary);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:120px;height:120px;transition:transform .3s;display:flex;box-shadow:0 12px 32px #1e90ff4d}.feature-block:hover .feature-large-icon{transform:scale(1.05)}.icon-orange{background:#f97316;box-shadow:0 12px 32px #f973164d}.icon-green{background:#10b981;box-shadow:0 12px 32px #10b9814d}.icon-purple{background:#8b5cf6;box-shadow:0 12px 32px #8b5cf64d}.icon-teal{background:#14b8a6;box-shadow:0 12px 32px #14b8a64d}.icon-blue{background:#3b82f6;box-shadow:0 12px 32px #3b82f64d}.faq-section{max-width:800px;margin:60px auto;padding:0 5%}.faq-title{text-align:center;color:var(--text);letter-spacing:-1.5px;margin-bottom:24px;font-size:56px;font-weight:800}.faq-intro{color:var(--text-muted);text-align:center;margin-bottom:80px;font-size:18px;line-height:1.6}.faq-intro a{color:var(--primary);text-decoration:underline}.faq-item{margin-bottom:56px}.faq-question{color:var(--text);letter-spacing:-.5px;margin-bottom:20px;font-size:28px;font-weight:800}.faq-answer{color:var(--text-muted);font-size:17px;line-height:1.7}.faq-answer p{margin-bottom:16px}.faq-answer ul{margin-bottom:16px;margin-left:24px}.faq-answer li{margin-bottom:10px}.faq-answer a{color:var(--primary);font-weight:500;text-decoration:none}.faq-answer a:hover{text-decoration:underline}.faq-answer strong{color:var(--text);font-weight:700}.browser-list{margin-top:32px}.browser-item{background:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--border);box-shadow:var(--shadow-sm);margin-bottom:24px;padding:24px 32px}.browser-name{color:var(--text);align-items:center;gap:12px;margin-bottom:16px;font-size:20px;font-weight:700;display:flex}.browser-support-list{margin:0!important;padding:0!important;list-style:none!important}.browser-support-list li{align-items:flex-start;gap:12px;font-size:15px;display:flex;margin-bottom:12px!important}.icon-success{color:var(--success);flex-shrink:0}.icon-error{color:var(--danger);flex-shrink:0}.faq-image-container{text-align:center;margin:32px 0}.faq-image-container img{border-radius:var(--radius-md);border:1px solid var(--border);max-width:100%;height:auto}.site-footer{text-align:center;border-top:1px solid var(--border);color:var(--text-muted);margin-top:40px;padding:60px 20px 40px;font-size:15px}.site-footer a{color:var(--primary);transition:var(--transition);font-weight:600;text-decoration:none}.site-footer a:hover{color:var(--primary-hover);text-decoration:underline}.text-center{text-align:center}.mt-4{margin-top:16px}.mt-6{margin-top:24px}.mb-2{margin-bottom:8px}.mb-6{margin-bottom:24px}.flex-row{gap:12px;display:flex}.flex-1{flex:1}.shake{animation:.4s cubic-bezier(.36,.07,.19,.97) both shake}@keyframes shake{10%,90%{transform:translate(-1px)}20%,80%{transform:translate(2px)}30%,50%,70%{transform:translate(-4px)}40%,60%{transform:translate(4px)}}