:root{--bg-page:#f8fafc;--bg-surface:#fff;--bg-card:#fff;--bg-card-hover:#f1f5f9;--border-subtle:#e2e8f0;--border-card:#e2e8f0;--border-focus:#0078d4;--win-blue:#0078d4;--win-blue-hover:#0063b1;--mac-black:#18181b;--mac-black-hover:#27272a;--android-green:#10b981;--android-green-hover:#059669;--ios-blue:#0284c7;--ios-blue-hover:#0369a1;--font-display:"Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-body:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono:"JetBrains Mono", monospace;--text-main:#0f172a;--text-secondary:#334155;--text-muted:#64748b;--text-light:#94a3b8;--radius-sm:8px;--radius-md:12px;--radius-lg:18px;--radius-full:9999px;--shadow-sm:0 1px 3px 0 #0000000d;--shadow-card:0 4px 20px -2px #0000000d, 0 2px 6px -1px #00000005;--shadow-hover:0 10px 25px -4px #00000014, 0 4px 10px -2px #00000008}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}body{background-color:var(--bg-page);color:var(--text-main);font-family:var(--font-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.6;position:relative;overflow-x:hidden}.app-container{max-width:1200px;margin:0 auto;padding:0 24px}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);color:var(--text-main);letter-spacing:-.02em;font-weight:700;line-height:1.2}.font-mono{font-family:var(--font-mono)}.clean-card{background:var(--bg-card);border:1px solid var(--border-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);transition:transform .2s,box-shadow .2s}.clean-card:hover{box-shadow:var(--shadow-hover)}.btn{font-family:var(--font-display);border-radius:var(--radius-md);cursor:pointer;-webkit-user-select:none;user-select:none;border:1px solid #0000;justify-content:center;align-items:center;gap:10px;padding:12px 22px;font-size:14.5px;font-weight:600;text-decoration:none;transition:all .2s cubic-bezier(.16,1,.3,1);display:inline-flex}.btn-primary{background:var(--win-blue);color:#fff;box-shadow:0 2px 8px #0078d440}.btn-primary:hover{background:var(--win-blue-hover);transform:translateY(-1px);box-shadow:0 4px 14px #0078d459}.btn-secondary{color:var(--text-secondary);border:1px solid var(--border-card);box-shadow:var(--shadow-sm);background:#fff}.btn-secondary:hover{color:var(--text-main);background:#f8fafc;border-color:#cbd5e1}.douwan-btn{color:#fff;cursor:pointer;min-width:220px;font-family:var(--font-display);border:none;border-radius:10px;align-items:center;gap:12px;padding:12px 20px;text-decoration:none;transition:transform .15s,box-shadow .15s,opacity .15s;display:inline-flex;box-shadow:0 2px 6px #00000014}.douwan-btn:hover:not(.disabled){transform:translateY(-2px);box-shadow:0 6px 16px #0000001f}.douwan-btn.disabled{opacity:.85;cursor:default}.douwan-btn-blue{background:#1877f2}.douwan-btn-blue:hover:not(.disabled){background:#0f68d6}.douwan-btn-green{background:#10b981}.douwan-btn-green:hover:not(.disabled){background:#059669}.douwan-btn-black{background:#1e2022}.douwan-btn-black:hover:not(.disabled){background:#2b2e31}.douwan-btn-purple{background:#8b5cf6}.douwan-btn-purple:hover:not(.disabled){background:#7c3aed}.douwan-btn-sky{background:#0ea5e9}.douwan-btn-sky:hover:not(.disabled){background:#0284c7}.douwan-app-box{background:linear-gradient(135deg,#3b82f6,#1d4ed8);border-radius:24px;justify-content:center;align-items:center;width:110px;height:110px;margin-bottom:12px;display:flex;box-shadow:0 10px 25px -4px #1d4ed84d}.douwan-app-box img{object-fit:contain;width:64px;height:64px}.badge{border-radius:var(--radius-full);align-items:center;gap:6px;padding:4px 10px;font-size:12px;font-weight:600;display:inline-flex}.badge-lime{color:#059669;background:#ecfdf5;border:1px solid #a7f3d0}.badge-blue{color:#1d4ed8;background:#eff6ff;border:1px solid #bfdbfe}.badge-violet{color:#7c3aed;background:#f5f3ff;border:1px solid #ddd6fe}.badge-amber{color:#d97706;background:#fffbeb;border:1px solid #fde68a}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#f1f5f9}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#94a3b8}.mobile-toggle{cursor:pointer;color:#0f172a;background:0 0;border:none;padding:6px;display:none}@media (width<=768px){.desktop-nav,.nav-btn-guide{display:none!important}.mobile-toggle{display:block!important}.douwan-grid{flex-direction:column!important;align-items:center!important}}.hero-section{background:#fff;border-bottom:1px solid #e2e8f0;padding-top:60px;padding-bottom:70px}.hero-pill{border-radius:var(--radius-full);color:#1d4ed8;background:#eff6ff;border:1px solid #bfdbfe;align-items:center;gap:8px;margin-bottom:20px;padding:6px 16px;font-size:13px;font-weight:600;display:inline-flex}.pulse-indicator{background-color:#10b981;border-radius:50%;width:8px;height:8px;display:inline-block;position:relative}.pulse-indicator:after{content:"";opacity:.6;background-color:#10b981;border-radius:50%;animation:2s cubic-bezier(.215,.61,.355,1) infinite pulseRing;position:absolute;inset:-4px}@keyframes pulseRing{0%{opacity:.8;transform:scale(.8)}50%{opacity:0;transform:scale(2)}to{opacity:0;transform:scale(.8)}}.mockup-wrapper{background:#f1f5f9;border:1px solid #cbd5e1;border-radius:18px;max-width:1040px;margin:0 auto;padding:8px;position:relative;box-shadow:0 20px 40px -15px #0000001a}.mockup-frame{background:#0f1118;border:1px solid #334155;border-radius:14px;overflow:hidden}.mockup-titlebar{background:#141722;border-bottom:1px solid #ffffff14;justify-content:space-between;align-items:center;height:40px;padding:0 16px;display:flex}.window-dots{align-items:center;gap:7px;display:flex}.window-dot{border-radius:50%;width:10px;height:10px}.dot-red{background:#ff5f56}.dot-yellow{background:#ffbd2e}.dot-green{background:#27c93f}.mockup-content{grid-template-columns:320px 1fr;min-height:440px;display:grid}@media (width<=860px){.mockup-content{grid-template-columns:1fr}}.mockup-sidebar{background:#0e1017;border-right:1px solid #ffffff14;flex-direction:column;justify-content:space-between;padding:24px;display:flex}.mockup-display{background:radial-gradient(circle,#171b29 0%,#0a0b10 100%);justify-content:center;align-items:center;padding:24px;display:flex;position:relative;overflow:hidden}.phone-skin{background:#000;border:4px solid #2f3444;border-radius:32px;width:230px;height:400px;position:relative;overflow:hidden;box-shadow:0 16px 36px #000c}.phone-notch{z-index:10;background:#111;border-radius:20px;width:60px;height:14px;position:absolute;top:8px;left:50%;transform:translate(-50%)}.phone-screen{background:linear-gradient(145deg,#121526,#1c2237);flex-direction:column;justify-content:space-between;width:100%;height:100%;padding:26px 14px 18px;display:flex;position:relative}.game-sim{text-align:center;margin-top:20px}.game-target{background:radial-gradient(circle,#0078d4 20%,#0000 70%);border:2px dashed #0078d4;border-radius:50%;justify-content:center;align-items:center;width:70px;height:70px;margin:12px auto;animation:2s ease-in-out infinite pulseTarget;display:flex}@keyframes pulseTarget{0%,to{opacity:.8;transform:scale(.95)}50%{opacity:1;transform:scale(1.08)}}@keyframes soundBarPulse{0%,to{height:6px}50%{height:24px}}.sound-bar{background-color:#0078d4;border-radius:2px;width:3px;animation:1.2s ease-in-out infinite soundBarPulse}.sound-bar:first-child{animation-delay:.1s}.sound-bar:nth-child(2){animation-delay:.35s}.sound-bar:nth-child(3){animation-delay:.15s}.sound-bar:nth-child(4){animation-delay:.45s}.sound-bar:nth-child(5){animation-delay:.25s}.sound-bar:nth-child(6){animation-delay:50ms}.mode-switch-container{border-radius:var(--radius-full);background:#ffffff0f;padding:4px;display:inline-flex}.mode-btn{border-radius:var(--radius-full);cursor:pointer;color:#94a3b8;background:0 0;border:none;padding:6px 14px;font-size:12px;font-weight:600;transition:all .2s}.mode-btn.active{color:#fff;background:#0078d4}.stat-pill{border-radius:var(--radius-md);background:#ffffff0a;border:1px solid #ffffff14;padding:12px 16px}.stat-value{font-family:var(--font-mono);font-size:1.5rem;font-weight:700}
