*{ margin: 0; padding: 0; box-sizing: border-box; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', sans-serif; }
:root{
      --primary: #00b3ff;
      --primary-dark: #0077b3;
      --bg-dark: #0b0f14;
      --bg-card: #151e28;
      --text-light: #f0f4f8;
      --text-gray: #b0c4de;
      --border-glow: rgba(0, 179, 255, 0.3);
      --radius: 20px;
      --shadow: 0 15px 35px -10px rgba(0,0,0,0.6);
    }
body{ background-color: var(--bg-dark); color: var(--text-light); line-height: 1.6; scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; overflow-x: hidden; }
img{ max-width: 100%; height: auto; display: block; }
a{ color: var(--primary); text-decoration: none; transition: 0.2s; }
a:hover{ color: #5dd0ff; text-decoration: underline; }
.container{ max-width: 1300px; margin: 0 auto; padding: 0 20px; }
h1{ font-size: 2.2rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; background: linear-gradient(135deg, #fff, #a0d8ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 0.75rem; }
h2{ font-size: 1.8rem; font-weight: 700; margin-bottom: 1.2rem; position: relative; display: inline-block; }
h2::after{ content: ''; position: absolute; left: 0; bottom: -8px; width: 60%; height: 4px; background: linear-gradient(90deg, var(--primary), transparent); border-radius: 4px; }
h3{ font-size: 1.3rem; font-weight: 600; margin-bottom: 0.8rem; color: #d9ecff; }
.btn{ display: inline-block; background: linear-gradient(135deg, var(--primary), #0066a0); color: #fff; padding: 14px 32px; border-radius: 40px; font-weight: 700; font-size: 1.1rem; border: 1px solid rgba(255,255,255,0.15); box-shadow: 0 8px 20px -6px var(--primary); transition: all 0.25s; text-align: center; cursor: pointer; }
.btn:hover{ transform: translateY(-3px); box-shadow: 0 15px 30px -6px var(--primary); text-decoration: none; color: #fff; }
.btn-outline{ background: transparent; border: 1px solid var(--primary); color: var(--primary); box-shadow: none; }
.btn-outline:hover{ background: rgba(0,179,255,0.1); color: #fff; }
.card{ background: var(--bg-card); border-radius: var(--radius); padding: 25px 30px; border: 1px solid rgba(0, 179, 255, 0.15); box-shadow: var(--shadow); transition: all 0.2s; }
.card:hover{ border-color: rgba(0,179,255,0.35); box-shadow: 0 20px 40px -10px rgba(0,179,255,0.2); }
.navbar{ display: flex; align-items: center; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,0.05); position: sticky; top: 0; z-index: 100; background: rgba(11,15,20,0.85); backdrop-filter: blur(10px); }
.logo-area{ display: flex; align-items: center; gap: 12px; }
.logo-area img{ height: 34px; width: auto; border-radius: 8px; object-fit: contain; border: 1px solid rgba(0,179,255,0.4); padding: 2px; }
.logo-text{ font-size: 1.5rem; font-weight: 800; background: linear-gradient(135deg, #fff, var(--primary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.nav-links{ display: flex; gap: 26px; font-weight: 500; }
.nav-links a{ color: var(--text-gray); text-decoration: none; position: relative; padding: 6px 0; }
.nav-links a::after{ content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--primary); transition: 0.25s; }
.nav-links a:hover{ color: var(--primary); }
.nav-links a:hover::after{ width: 100%; }
@media (max-width: 900px){.nav-links{ gap: 16px; font-size: 0.9rem; }}
@media (max-width: 768px){.nav-links{ display: none; }
h1{ font-size: 1.8rem; }
h2{ font-size: 1.5rem; }}
.hero{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 40px; padding: 40px 0 50px; }
.hero-content{ flex: 1 1 400px; }
.hero-image{ flex: 1 1 300px; text-align: center; }
.hero-image img{ max-height: 300px; margin: 0 auto; border-radius: 30px; box-shadow: 0 25px 40px -15px var(--primary); border: 2px solid rgba(255,255,255,0.1); }
.tagline{ font-size: 1.1rem; color: var(--text-gray); margin-bottom: 30px; }
.cta-group{ display: flex; gap: 20px; flex-wrap: wrap; }
section{ margin: 70px 0; scroll-margin-top: 90px; }
.features-showcase{ display: flex; flex-wrap: wrap; gap: 30px; margin-top: 30px; align-items: stretch; }
.feature-visual{ flex: 1 1 300px; display: flex; flex-direction: column; gap: 20px; }
.feature-visual img{ width: 100%; border-radius: var(--radius); border: 1px solid #253c4e; box-shadow: var(--shadow); object-fit: cover; height: 200px; transition: 0.3s; }
.feature-visual img:hover{ border-color: var(--primary); transform: scale(1.01); }
.features-grid{ flex: 2 1 500px; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 25px; }
.feature-item{ background: var(--bg-card); border-radius: var(--radius); padding: 28px 22px; border: 1px solid rgba(0,179,255,0.1); transition: all 0.2s; display: flex; flex-direction: column; }
.feature-item:hover{ border-color: var(--primary); transform: translateY(-5px); }
.feature-icon{ font-size: 2.4rem; margin-bottom: 15px; }
@media (max-width: 700px){.features-showcase{ flex-direction: column; }
.feature-visual{ flex-direction: row; }
.feature-visual img{ height: 120px; }}
.tutorial-showcase{ display: flex; flex-wrap: wrap; gap: 30px; margin-top: 30px; align-items: stretch; }
.tutorial-visual{ flex: 1 1 320px; display: flex; flex-direction: column; gap: 20px; }
.tutorial-visual img{ width: 100%; border-radius: var(--radius); border: 1px solid #253c4e; box-shadow: var(--shadow); object-fit: cover; height: 210px; transition: 0.3s; }
.tutorial-visual img:hover{ border-color: var(--primary); }
.tutorial-steps{ flex: 2 1 500px; display: flex; flex-wrap: wrap; gap: 25px; justify-content: center; align-content: flex-start; }
.step{ flex: 1 1 180px; background: var(--bg-card); border-radius: var(--radius); padding: 25px 20px; text-align: center; border: 1px solid rgba(255,255,255,0.05); transition: 0.2s; }
.step:hover{ border-color: var(--primary); }
.step-number{ display: inline-block; width: 45px; height: 45px; background: var(--primary); color: #000; font-weight: 800; border-radius: 50%; line-height: 45px; font-size: 1.4rem; margin-bottom: 15px; }
@media (max-width: 700px){.tutorial-showcase{ flex-direction: column; }
.tutorial-visual{ flex-direction: row; }
.tutorial-visual img{ height: 140px; }}
.pairing-intro{ color: var(--text-gray); margin-bottom: 30px; font-size: 1.05rem; max-width: 900px; }
.pairing-flow{ display: flex; flex-direction: column; gap: 40px; margin-top: 20px; }
.pairing-step{
      display: flex;
      flex-wrap: wrap;
      gap: 35px;
      align-items: center;
      background: var(--bg-card);
      border-radius: var(--radius);
      padding: 35px;
      border: 1px solid rgba(0,179,255,0.12);
      box-shadow: var(--shadow);
      transition: 0.25s;
    }
.pairing-step:hover{ border-color: var(--primary); box-shadow: 0 20px 45px -15px rgba(0,179,255,0.25); }
.pairing-step.reverse{ flex-direction: row-reverse; }
.pairing-text{ flex: 1 1 320px; }
.pairing-text .pairing-badge{
      display: inline-block;
      background: var(--primary);
      color: #00141f;
      font-weight: 800;
      font-size: 0.85rem;
      padding: 5px 16px;
      border-radius: 30px;
      margin-bottom: 14px;
      letter-spacing: 1px;
    }
.pairing-text h3{ font-size: 1.4rem; margin-bottom: 12px; }
.pairing-text p{ color: var(--text-gray); margin-bottom: 10px; }
.pairing-text ul{ margin: 10px 0 0 20px; color: var(--text-gray); }
.pairing-text ul li{ margin-bottom: 6px; }
.pairing-text ul li strong{ color: #d9ecff; }
.pairing-image{ flex: 1 1 340px; }
.pairing-image img{
      width: 100%;
      border-radius: 18px;
      border: 1px solid #253c4e;
      box-shadow: 0 15px 35px -12px rgba(0,0,0,0.7);
      transition: 0.3s;
    }
.pairing-image img:hover{ border-color: var(--primary); transform: scale(1.02); }
@media (max-width: 760px){.pairing-step,.pairing-step.reverse{ flex-direction: column; padding: 25px; }}
.pairing-table-wrap{ margin-top: 45px; overflow-x: auto; border-radius: var(--radius); border: 1px solid rgba(0,179,255,0.18); }
.pairing-table{ width: 100%; border-collapse: collapse; min-width: 620px; background: var(--bg-card); }
.pairing-table th,.pairing-table td{ padding: 16px 20px; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 0.95rem; }
.pairing-table th{ background: rgba(0,179,255,0.1); color: #cceaff; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.5px; }
.pairing-table td{ color: var(--text-gray); }
.pairing-table tr:last-child td{ border-bottom: none; }
.pairing-table tr:hover td{ background: rgba(0,179,255,0.05); color: var(--text-light); }
.pairing-table .tag{ display: inline-block; background: rgba(0,179,255,0.15); color: var(--primary); border: 1px solid rgba(0,179,255,0.35); padding: 2px 12px; border-radius: 30px; font-size: 0.82rem; font-weight: 600; }
.pairing-tips{ margin-top: 40px; background: linear-gradient(135deg, #0a1a26, #102a3a); border-radius: var(--radius); padding: 30px 35px; border-left: 5px solid var(--primary); }
.pairing-tips h3{ margin-bottom: 15px; }
.pairing-tips ul{ list-style: none; }
.pairing-tips ul li{ padding: 8px 0; color: var(--text-gray); display: flex; gap: 10px; align-items: flex-start; }
.pairing-tips ul li::before{ content: '✓'; color: var(--primary); font-weight: 800; flex-shrink: 0; }
.compare-wrapper{ margin-top: 30px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--border-glow); }
.compare-slider{ position: relative; width: 100%; overflow: hidden; user-select: none; border-radius: var(--radius); background: #000; }
.compare-slider .after-image{ display: block; width: 100%; height: auto; pointer-events: none; border-radius: var(--radius); }
.compare-slider .before-image{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%); pointer-events: none; border-radius: var(--radius); }
.slider-handle{ position: absolute; top: 0; bottom: 0; left: 50%; width: 4px; background: white; transform: translateX(-50%); pointer-events: none; box-shadow: 0 0 15px rgba(0,0,0,0.5); z-index: 10; border-radius: 4px; }
.slider-handle::after{ content: '⇔'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: #000; box-shadow: 0 4px 15px rgba(0,0,0,0.3); font-weight: 700; pointer-events: none; }
.slider-input{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; z-index: 20; margin: 0; padding: 0; -webkit-appearance: none; appearance: none; background: transparent; }
.slider-input::-webkit-slider-thumb{ -webkit-appearance: none; width: 50px; height: 100%; cursor: ew-resize; }
.slider-input::-moz-range-thumb{ width: 50px; height: 100%; cursor: ew-resize; background: transparent; border: none; }
.compare-slider{ touch-action: pan-y; }
.update-highlights{ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 20px; }
.update-card{ background: linear-gradient(145deg, #0f1a24, #16222e); border-radius: 20px; padding: 22px; border-left: 5px solid var(--primary); }
.log-list{ margin-top: 20px; }
.log-item{ display: flex; flex-wrap: wrap; gap: 15px; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,0.06); align-items: flex-start; }
.log-version{ font-weight: 800; color: var(--primary); min-width: 90px; font-size: 1.1rem; }
.log-date{ color: var(--text-gray); font-size: 0.9rem; min-width: 110px; }
.log-desc{ flex: 1; color: var(--text-gray); }
.danmaku-marquee{ position: relative; width: 100vw; margin-left: calc(-50vw + 50%); background: #0d141c; border-top: 1px solid #1e2f3f; border-bottom: 1px solid #1e2f3f; padding: 18px 0; overflow: hidden; margin-top: 20px; }
.danmaku-track{ display: flex; gap: 18px; width: max-content; animation: scrollDanmaku 32s linear infinite; }
.danmaku-track:hover{ animation-play-state: paused; }
@keyframes scrollDanmaku { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.danmaku-item{ background: rgba(0,179,255,0.12); border-radius: 30px; padding: 8px 24px; font-size: 1rem; color: #bbdef5; border: 1px solid rgba(0,179,255,0.2); white-space: nowrap; flex-shrink: 0; }
.danmaku-input-area{ display: flex; gap: 12px; margin-top: 22px; max-width: 700px; }
.danmaku-input-area input{ flex: 1; background: #1e2e3e; border: 1px solid #2f4558; border-radius: 40px; padding: 12px 20px; color: white; font-size: 1rem; outline: none; }
.danmaku-input-area input:focus{ border-color: var(--primary); }
.danmaku-input-area button{ background: var(--primary); border: none; padding: 0 28px; border-radius: 40px; font-weight: 600; color: #000; cursor: pointer; transition: 0.2s; white-space: nowrap; }
.danmaku-input-area button:hover{ background: #4dc9ff; }
@media (max-width: 600px){.danmaku-input-area{ flex-direction: column; }
.danmaku-input-area button{ padding: 12px; }}
.faq-item{ background: var(--bg-card); border-radius: 16px; margin-bottom: 15px; padding: 5px 25px; border: 1px solid #1e2f3f; }
.faq-question{ font-weight: 700; padding: 20px 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 1.1rem; }
.faq-question::after{ content: '▼'; font-size: 0.9rem; color: var(--primary); transition: 0.3s; }
.faq-item.active .faq-question::after{ transform: rotate(180deg); }
.faq-answer{ max-height: 0; overflow: hidden; transition: max-height 0.4s ease; padding-bottom: 0; color: var(--text-gray); border-top: 1px solid transparent; }
.faq-item.active .faq-answer{ max-height: 300px; padding-bottom: 20px; border-top-color: rgba(255,255,255,0.05); }
.gallery-hero{ display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 220px); gap: 16px; margin-top: 30px; }
.gallery-hero .g-item{ position: relative; overflow: hidden; border-radius: var(--radius); border: 1px solid #253c4e; transition: 0.3s; cursor: pointer; }
.gallery-hero .g-item:hover{ border-color: var(--primary); box-shadow: 0 15px 30px -10px var(--primary); transform: scale(1.01); z-index: 2; }
.gallery-hero .g-item img{ width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.gallery-hero .g-item:hover img{ transform: scale(1.06); }
.gallery-hero .g-item.large{ grid-column: span 2; grid-row: span 2; }
.gallery-hero .g-item.wide{ grid-column: span 2; }
.gallery-hero .g-item .g-overlay{ position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(transparent, rgba(0,0,0,0.7)); padding: 12px 16px; font-size: 0.9rem; color: #e0f0ff; opacity: 0; transition: 0.3s; }
.gallery-hero .g-item:hover .g-overlay{ opacity: 1; }
@media (max-width: 900px){.gallery-hero{ grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 180px); }
.gallery-hero .g-item.large{ grid-column: span 2; grid-row: span 1; }
.gallery-hero .g-item.wide{ grid-column: span 1; }}
@media (max-width: 500px){.gallery-hero{ grid-template-columns: 1fr; grid-template-rows: auto; }
.gallery-hero .g-item{ height: 200px; }
.gallery-hero .g-item.large{ grid-column: span 1; grid-row: span 1; }
.gallery-hero .g-item.wide{ grid-column: span 1; }}
.download-banner{ margin: 80px 0 40px; background: linear-gradient(135deg, #0a1a26, #102a3a); border-radius: 36px; padding: 50px 40px; text-align: center; border: 1px solid rgba(0, 179, 255, 0.35); box-shadow: 0 25px 50px -15px rgba(0, 179, 255, 0.3); position: relative; overflow: hidden; }
.download-banner::before{ content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(0,179,255,0.08) 0%, transparent 60%); pointer-events: none; }
.download-banner h2{ margin-bottom: 10px; border-bottom: none; }
.download-banner h2::after{ display: none; }
.download-banner p{ color: var(--text-gray); margin-bottom: 30px; font-size: 1.05rem; position: relative; z-index: 1; }
.download-banner .btn{ font-size: 1.25rem; padding: 16px 50px; position: relative; z-index: 1; box-shadow: 0 12px 30px -6px var(--primary); }
.footer{ margin-top: 40px; padding: 40px 0 30px; border-top: 1px solid rgba(255,255,255,0.05); color: var(--text-gray); }
.footer-tags{ display: flex; flex-wrap: wrap; gap: 12px 20px; margin-bottom: 25px; font-size: 0.9rem; }
.footer-tags a{ color: #7f9bb3; text-decoration: none; background: #111b24; padding: 5px 14px; border-radius: 30px; transition: 0.2s; border: 1px solid #22303c; }
.footer-tags a:hover{ color: var(--primary); border-color: var(--primary); text-decoration: none; }
.footer-bottom{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; font-size: 0.85rem; color: #5d6f7e; }
.footer-time{ display: block; margin-top: 10px; font-size: 0.8rem; color: #5d6f7e; }
@media (max-width: 600px){.card{ padding: 20px; }
.hero{ padding: 20px 0; }
section{ margin: 50px 0; scroll-margin-top: 80px; }
.download-banner{ padding: 35px 20px; margin: 60px 0 30px; }
.download-banner .btn{ padding: 14px 30px; font-size: 1.1rem; }
.pairing-step{ padding: 22px; gap: 22px; }}