.cs{--p-ink: hsl(var(--foreground));--p-muted: hsl(var(--muted-foreground));--p-line: hsl(var(--border));--p-card: hsl(var(--card));--p-bg: hsl(var(--background));--p-accent: hsl(var(--primary));--p-ok: hsl(var(--success));--p-tint: #e8f1fd;--p-stage: #e8eef4;--p-amber: #9a5b00;--p-sans: var(--app-font-sans);--p-mono: var(--app-font-mono);--nav-h: 68px}.cs *,.cs *:before,.cs *:after{box-sizing:border-box}.cs .pbtn{font:inherit;font-size:15px;font-weight:600;line-height:1.2;border-radius:999px;padding:10px 18px;border:1px solid var(--p-line);background:var(--p-card);color:var(--p-ink);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}.cs .pbtn.ghost{background:transparent}.cs .pbtn:focus-visible,.cs .steps button:focus-visible{outline:2px solid var(--p-accent);outline-offset:2px}.cs .dev{position:relative;flex-shrink:0;max-width:100%}.cs .dev .scaler{position:absolute;left:0;top:0;width:464px;height:980px;transform-origin:0 0;padding:12px;border-radius:72px;background:#0c1117;box-shadow:inset 0 0 0 2px #2b3440,var(--shadow-3)}.cs .dev .ph{border-radius:60px}.cs .ph .finger{position:absolute;left:0;top:0;width:46px;height:46px;border-radius:50%;background:#0b162029;box-shadow:0 0 0 2px #ffffffe6,0 4px 14px #0b162040;opacity:0;pointer-events:none;z-index:70;transform:translate(-50%,-50%)}.cs .ph .coach{position:relative}.cs .ph .coach:after{content:"";position:absolute;inset:-5px;border-radius:999px;border:2.5px solid #0a84ff;animation:cs-coach 1.6s ease-out infinite;pointer-events:none;z-index:3}.cs .ph .gb.coach:after,.cs .ph .btn1.coach:after{border-radius:22px}@keyframes cs-coach{0%{opacity:1;transform:scale(1)}70%,to{opacity:0;transform:scale(1.08)}}.cs .ph .spot{position:absolute;left:0;top:0;border-radius:999px;box-shadow:0 0 0 1600px #0b16206b;opacity:0;pointer-events:none;z-index:60}.cs .ph .spot:after{content:"";position:absolute;inset:-3px;border-radius:inherit;border:2.5px solid #0a84ff;animation:cs-spotring 1.3s ease-out infinite}.cs .ph .ripple{position:absolute;left:0;top:0;width:90px;height:90px;margin:-45px 0 0 -45px;border-radius:50%;background:#0a84ff59;opacity:0;pointer-events:none;z-index:61}@keyframes cs-spotring{0%{opacity:1;transform:scale(1)}80%,to{opacity:0;transform:scale(1.12)}}.cs.tryhero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,464px);gap:clamp(24px,5vw,88px);align-items:center;min-height:calc(100svh - var(--nav-h));padding-block:28px}.cs.tryhero .ph .layer{pointer-events:none}.cs.tryhero .ph .layer>*{pointer-events:auto}.cs .hcopy{display:flex;flex-direction:column;gap:14px;max-width:560px}.cs .brief{margin-top:10px;background:var(--p-card);border:1px solid var(--p-line);border-radius:20px;padding:22px 22px 18px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow-1)}.cs .pk{font:600 11px/1.2 var(--p-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--p-muted)}.cs .btxt{font-size:22px;line-height:1.25;font-weight:600;letter-spacing:-.01em;margin:-4px 0 2px;text-wrap:balance}.cs .guide{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:2px}.cs .guide li{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--p-muted);padding:6px 10px;border-radius:10px;transition:background-color .25s,color .25s}.cs .guide li b{font-weight:600}.cs .guide li i{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--p-line);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background-color .2s,border-color .2s}.cs .guide li.now{background:var(--p-tint);color:var(--p-ink)}.cs .guide li.now i{border-color:var(--p-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--p-accent) 22%,transparent)}.cs .guide li.done{color:var(--p-ink)}.cs .guide li.done i{background:var(--p-ok);border-color:var(--p-ok)}.cs .guide li.miss i{background:var(--p-amber);border-color:var(--p-amber)}.cs .guide li.done i:after{content:"";width:9px;height:5px;border:2px solid #fff;border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}.cs .guide li.miss i:after{content:"!";color:#fff;font:700 12px/1 var(--p-sans)}.cs .tapsl{font:600 13px/1 var(--p-mono);color:var(--p-muted)}.cs .tapsl b{font-size:28px;letter-spacing:-.02em;color:var(--p-ink);font-variant-numeric:tabular-nums;margin-right:4px}.cs.tryhero[data-state=done] .tapsl b{color:var(--p-ok)}.cs .status{margin:0;font-size:15px;line-height:1.45;color:var(--p-muted);min-height:2.9em}.cs.tryhero[data-state=done] .status{color:var(--p-ink)}.cs .bfoot{display:flex;gap:8px;flex-wrap:wrap}.cs.tryhero[data-state=idle] [data-again],.cs .mini{display:none}.cs .phcol{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0}@media(max-width:959px){.cs.tryhero{grid-template-columns:minmax(0,1fr);min-height:0;padding-block:32px 40px}.cs .hcopy{max-width:none}.cs .mini{display:flex;align-items:center;gap:12px;font:600 14px/1 var(--p-mono);color:var(--p-muted);background:var(--p-card);border:1px solid var(--p-line);border-radius:999px;padding:9px 14px;position:sticky;top:calc(var(--nav-h) + 8px);z-index:3;max-width:100%}.cs .mini .mtaps{color:var(--p-ink);font-variant-numeric:tabular-nums;white-space:nowrap}.cs .mini .mnext{font-family:var(--p-sans);font-weight:600;color:var(--p-accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@media(prefers-reduced-motion:reduce){.cs .ph .coach:after,.cs .ph .spot:after{animation:none}}
