:root{--blue:#007AFF;--blue-dark:#0062cc;--ink:#16181d;--muted:#5c6470;--bg:#fafbfc;--line:#e4e7eb;--court:#a9cfa4;--court-line:rgba(70,90,70,0.45)}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.55}.wrap{max-width:900px;margin:0 auto;padding:0 24px}h2{font-size:1.45rem;letter-spacing:-.015em;margin-bottom:8px}.hero{background:radial-gradient(1100px 420px at 50% -160px,rgba(0,122,255,.1),transparent 70%),var(--bg);border-bottom:1px solid var(--line);padding:64px 0 44px;text-align:center}.appicon{width:84px;height:84px;border-radius:20px;box-shadow:0 10px 28px rgba(0,122,255,.22)}h1{font-size:clamp(2.1rem,5.4vw,3rem);letter-spacing:-.02em;margin-top:18px}.tagline{max-width:560px;margin:12px auto 0;font-size:1.12rem;color:var(--muted)}.demo{display:grid;grid-template-columns:minmax(240px,340px) 1fr;grid-gap:36px;gap:36px;align-items:center;padding:56px 0 8px}.demo-device{background:#191a1e;border-radius:26px;padding:14px;box-shadow:0 24px 60px rgba(20,30,45,.22)}.demo-court{position:relative;aspect-ratio:3/4;background:linear-gradient(180deg,#b3d5ae,#a3cb9e);border-radius:14px;overflow:hidden}.demo-line{position:absolute;background:var(--court-line)}.demo-ball{position:absolute;width:34px;height:34px;border-radius:50%;margin:-17px 0 0 -17px;box-shadow:0 3px 8px rgba(0,0,0,.25)}.demo-shuttle{background:#ff4d3e}.demo-racket{background:#2456ff}.demo-msg{position:absolute;left:0;right:0;top:10%;text-align:center;font-weight:800;font-size:1.5rem;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.35);animation:splitflash .9s ease-out forwards}@keyframes splitflash{0%{opacity:1;transform:scale(1.14)}45%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1)}}.demo-rail{min-height:240px}.demo-steps{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}.demo-stepchip{font-size:.85rem;font-weight:600;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:5px 14px;transition:all .25s ease;background:#fff}.demo-stepchip.active{color:#fff;background:var(--blue);border-color:var(--blue)}.demo-title{font-size:1.35rem;letter-spacing:-.015em;margin-bottom:8px}.demo-text{color:var(--muted);max-width:44ch;min-height:72px}.demo-btn{margin-top:20px;background:var(--blue);border:none;color:#fff;font-size:1rem;font-weight:650;padding:12px 28px;border-radius:10px;cursor:pointer}.demo-btn:hover{background:var(--blue-dark)}.demo-controls{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:20px}.demo-controls .demo-btn{margin-top:0}.demo-modes{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}.demo-mode{border:none;background:transparent;padding:10px 16px;cursor:pointer;font-size:.9rem;font-weight:600;color:var(--muted)}.demo-mode.active{background:var(--ink);color:#fff}.demo-ring{position:absolute;left:50%;top:54%;width:90px;height:90px;margin:-45px 0 0 -45px;border:4px solid rgba(255,255,255,.9);border-radius:50%;animation:ringpulse 1.4s ease-out infinite}@keyframes ringpulse{0%{transform:scale(.55);opacity:1}to{transform:scale(1.25);opacity:0}}.cta{text-align:center;padding:40px 0 12px}.cta-note{color:var(--muted);font-size:.95rem;margin-top:10px}.media{padding:72px 0 0;text-align:center}.media-note{color:var(--muted);margin-bottom:20px}.media-frame{position:relative;max-width:780px;margin:0 auto;aspect-ratio:16/9;border-radius:14px;overflow:hidden;box-shadow:0 18px 50px rgba(20,30,45,.16)}.media-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.features{padding:72px 0 24px}.features ul{list-style:disc;max-width:620px;margin:14px auto 0;padding-left:1.3em;color:var(--muted)}.features li{margin:9px 0}.features li::marker{color:var(--blue)}.features li b{color:var(--ink)}.features h2,footer{text-align:center}footer{font-size:.9rem;padding:64px 0 48px}footer,footer a{color:var(--muted)}@media (max-width:720px){.demo{grid-template-columns:1fr;gap:24px;padding-top:40px}.demo-device{max-width:320px;margin:0 auto}.demo-rail{text-align:center;min-height:0}.demo-steps{justify-content:center}.demo-text{margin:0 auto}}.demo-replay{position:absolute;top:12px;left:12px;background:rgba(20,22,26,.82);color:#fff;font-size:.78rem;font-weight:700;letter-spacing:.04em;padding:5px 10px;border-radius:7px;animation:replayblink 1s steps(2,jump-none) infinite}@keyframes replayblink{0%{opacity:1}to{opacity:.45}}