.wv-ga { padding-top: 22px; padding-bottom: 48px; max-width: 1200px; }
.wv-ga .wv-ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.18em; }
.wv-ga .wv-ic.in { width: 1em; height: 1em; }
.wv-ga-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; align-items: center; margin-bottom: 26px; }
.wv-ga-title { font-size: clamp(1.7rem, 4.2vw, 2.7rem); line-height: 1.15; margin: 0 0 12px; background: var(--wv-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wv-ga-lead { color: var(--wv-fg2); font-size: 1.02rem; max-width: 56ch; margin: 0 0 16px; }
.wv-ga-jump { display: flex; flex-wrap: wrap; gap: 8px; }
.wv-ga-jump a { display: inline-flex; gap: 7px; align-items: center; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--wv-edge); background: var(--wv-gate); color: var(--wv-fg); text-decoration: none; font-size: .92rem; transition: border-color .2s, transform .2s; }
.wv-ga-jump a:hover { border-color: var(--wv-cyan); transform: translateY(-1px); color: var(--wv-fg); }
.wv-ga-art-wrap { display: flex; gap: 18px; align-items: center; justify-content: flex-end; min-width: 0; }
.wv-ga-art { width: 100%; max-width: 360px; height: auto; }
.wv-ga-art .ln { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.wv-ga-art .fl { stroke: none; opacity: .14; }
.wv-ga-art .pl, .wv-ga-art .pill, .wv-ga-art .sp circle { stroke: none; }
.wv-ga-art .bd { fill: var(--wv-booth); }
.wv-ga-art .ring { fill: none; stroke-width: 3; stroke-dasharray: 26 9; }
.wv-ga-art .c-blue { stroke: var(--wv-blue); fill: var(--wv-blue); } .wv-ga-art .c-amber { stroke: var(--wv-amber); fill: var(--wv-amber); }
.wv-ga-art .c-lime { stroke: var(--wv-lime); fill: var(--wv-lime); } .wv-ga-art .c-cyan { stroke: var(--wv-cyan); fill: var(--wv-cyan); }
.wv-ga-art .c-teal { stroke: var(--wv-teal); fill: var(--wv-teal); } .wv-ga-art .c-gold { fill: var(--wv-gold); }
.wv-ga-art .ln.c-blue, .wv-ga-art .ln.c-amber, .wv-ga-art .ln.c-lime, .wv-ga-art .ln.c-teal, .wv-ga-art .ring { fill: none; }
.wv-ga-art .ring { transform-origin: 272px 153px; animation: ga-spin 8s linear infinite; }
.wv-ga-art .ph { animation: ga-float 4s ease-in-out infinite; }
.wv-ga-art .tv .fl { animation: ga-glow 3s ease-in-out infinite; }
.wv-ga-art .dl { animation: ga-drop 1.8s ease-in-out infinite; }
.wv-ga-art .sp circle { animation: ga-tw 2.6s ease-in-out infinite; } .wv-ga-art .sp circle:nth-child(2) { animation-delay: .7s; } .wv-ga-art .sp circle:nth-child(3) { animation-delay: 1.3s; } .wv-ga-art .sp circle:nth-child(4) { animation-delay: 1.9s; }
.wv-ga-qr { flex: none; width: 150px; text-align: center; }
.wv-ga-qr .q { background: #fff; padding: 9px; border-radius: 14px; line-height: 0; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.wv-ga-qr svg { width: 132px; height: 132px; }
.wv-ga-qr p { font-size: .8rem; color: var(--wv-fg2); margin: 8px 0 0; line-height: 1.35; }
.wv-ga-group { margin-top: 30px; scroll-margin-top: 90px; }
.wv-ga-group > h2 { display: flex; gap: 10px; align-items: baseline; font-size: 1.35rem; margin: 0 0 14px; color: var(--wv-fg); }
.wv-ga-group > h2 small { font-size: .9rem; color: var(--wv-fg2); font-weight: 400; }
.wv-ga-mine > h2 .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--wv-lime); align-self: center; box-shadow: 0 0 0 0 var(--wv-lime); animation: ga-ping 2s infinite; }
.wv-ga-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.wv-ga-card { position: relative; display: flex; flex-direction: column; gap: 12px; border-radius: 20px; padding: 18px; min-width: 0; scroll-margin-top: 90px;
  border: 1px solid color-mix(in srgb, var(--h) 32%, var(--wv-edge)); background: linear-gradient(160deg, color-mix(in srgb, var(--h) 9%, var(--wv-booth)), var(--wv-booth)); animation: ga-in .45s ease-out both; }
.wv-ga-card.me { box-shadow: 0 0 0 2px var(--h), 0 18px 40px color-mix(in srgb, var(--h) 20%, transparent); }
.wv-ga-card.flash { animation: ga-flash 1.4s ease-out; }
.wv-ga-head { display: flex; gap: 12px; align-items: center; }
.wv-ga-ic { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 14px; color: var(--h); background: color-mix(in srgb, var(--h) 16%, transparent); font-size: 26px; }
.wv-ga-ic .wv-ic { width: 26px; height: 26px; }
.wv-ga-head .t { flex: 1; min-width: 0; }
.wv-ga-head h3 { font-size: 1.05rem; margin: 0; color: var(--wv-fg); overflow-wrap: anywhere; }
.wv-ga-head small { color: var(--wv-fg2); }
.wv-ga-tag { flex: none; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--h) 20%, transparent); color: var(--wv-fg); border: 1px solid color-mix(in srgb, var(--h) 45%, transparent); }
.wv-ga-btn { align-self: flex-start; display: inline-flex; gap: 8px; align-items: center; border: 0; border-radius: 999px; padding: 11px 20px; font-weight: 700; background: var(--h); color: var(--wv-booth) !important; text-decoration: none; transition: transform .15s, filter .15s; cursor: pointer; }
.wv-ga-btn * { color: inherit; }
.wv-ga-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.wv-ga-btn:disabled { opacity: .5; transform: none; cursor: default; }
.wv-ga-btn.ghost { background: transparent; color: var(--wv-fg) !important; box-shadow: inset 0 0 0 2px var(--h); }
.wv-ga-btn small { font-weight: 500; opacity: .8; }
.wv-ga-steps { margin: 0; padding-left: 20px; line-height: 1.65; color: var(--wv-fg); }
.wv-ga-steps code, .wv-ga-meta code { font-size: .82em; background: var(--wv-gate); padding: 1px 5px; border-radius: 5px; color: var(--wv-fg); }
.wv-ga-hint, .wv-ga-note { margin: 0; font-size: .88rem; color: var(--wv-fg2); }
.wv-ga-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; font-size: .85rem; }
.wv-ga-meta div { display: flex; gap: 6px; align-items: center; }
.wv-ga-meta dt { font-weight: 400; color: var(--wv-fg2); }
.wv-ga-meta dd { margin: 0; color: var(--wv-fg); display: flex; gap: 4px; align-items: center; }
.wv-ga-copy { border: 0; background: none; color: var(--wv-fg2); padding: 2px 4px; border-radius: 6px; line-height: 1; }
.wv-ga-copy:hover { color: var(--h); }
.wv-ga-ios svg { width: 100%; max-width: 220px; height: auto; display: block; margin: 0 auto; }
.wv-ga-ios .frame { fill: none; stroke: var(--wv-edge); stroke-width: 2; }
.wv-ga-ios .ln { fill: none; stroke: var(--wv-cyan); stroke-width: 3; stroke-linecap: round; }
.wv-ga-ios .ln.soft { stroke-width: 2; fill: color-mix(in srgb, var(--wv-cyan) 14%, transparent); }
.wv-ga-ios .ln.c-lime { stroke: var(--wv-lime); }
.wv-ga-ios .bar { fill: var(--wv-cyan); opacity: .6; }
.wv-ga-ios .appic { fill: var(--wv-cyan); } .wv-ga-ios .play { fill: var(--wv-booth); }
.wv-ga-ios .tap { fill: var(--wv-lime); transform-origin: 60px 56px; animation: ga-tap 2s infinite; }
.wv-ga-ios .s1, .wv-ga-ios .s2, .wv-ga-ios .s3 { opacity: 0; animation: ga-step 6s infinite; }
.wv-ga-ios .s2 { animation-delay: 2s; } .wv-ga-ios .s3 { animation-delay: 4s; }
.wv-ga-prof li::marker { color: var(--h); font-weight: 700; }
.wv-ga-why { margin-top: 34px; padding: 18px 20px; border-radius: 18px; background: var(--wv-gate); border: 1px solid var(--wv-edge); }
.wv-ga-why h2 { font-size: 1.1rem; display: flex; gap: 8px; align-items: center; margin: 0 0 6px; color: var(--wv-green); }
.wv-ga-why p { margin: 0; color: var(--wv-fg2); }
@media (max-width: 860px) {
  .wv-ga-hero { grid-template-columns: 1fr; gap: 10px; }
  .wv-ga-art-wrap { order: -1; justify-content: center; }
  .wv-ga-art { max-width: 280px; }
  .wv-ga-qr { display: none; }
}
@media (max-width: 480px) { .wv-ga-grid { grid-template-columns: 1fr; } .wv-ga-art { max-width: 230px; } }
@keyframes ga-spin { to { transform: rotate(360deg); } }
@keyframes ga-float { 50% { transform: translateY(-5px); } }
@keyframes ga-glow { 50% { opacity: .26; } }
@keyframes ga-drop { 50% { transform: translateY(7px); } }
@keyframes ga-tw { 50% { opacity: .2; } }
@keyframes ga-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes ga-step { 0%, 30% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes ga-tap { 0%, 100% { transform: scale(.6); opacity: .3; } 40% { transform: scale(1.2); opacity: 1; } }
@keyframes ga-ping { 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes ga-flash { 0% { box-shadow: 0 0 0 6px var(--h); } }
@media (prefers-reduced-motion: reduce) { .wv-ga *, .wv-ga *::before { animation: none !important; transition: none !important; } .wv-ga-ios .s3 { opacity: 1; } }