*{margin: 0; padding: 0; box-sizing: border-box;}
:root{--teal:       #0d9488;
  --teal-d:     #0f766e;
  --teal-l:     #ccfbf1;
  --teal-f:     #f0fdfa;
  --blue:       #0ea5e9;
  --blue-d:     #0284c7;
  --purple:     #8b5cf6;
  --purple-d:   #7c3aed;
  --purple-l:   #ede9fe;
  --purple-f:   #f5f3ff;
  --pink:       #ec4899;
  --orange:     #f59e0b;
  --green:      #10b981;
  --red:        #ef4444;
  --tg:         #229ed9;
  --wa:         #25d366;

  --ink:        #0b1220;
  --text:       #1e293b;
  --text-2:     #334155;
  --muted:      #64748b;
  --muted-2:    #94a3b8;
  --line:       #e5e7eb;
  --line-soft:  #eef2f6;
  --arrow:      #4f8b86;
  --bg:         #ffffff;
  --bg-2:       #f8fafc;
  --bg-3:       #f1f5f9;

  --page:       #ffffff;
  --surface:    #ffffff;
  --surface-2:  #f8fafc;
  --surface-3:  #f1f5f9;

  --r-sm:       10px;
  --r:          14px;
  --r-lg:       18px;
  --r-xl:       22px;

  --sh-xs:      0 1px 2px rgba(15,23,42,.04);
  --sh-sm:      0 2px 8px rgba(15,23,42,.06);
  --sh:         0 6px 24px -4px rgba(15,23,42,.08), 0 2px 6px -2px rgba(15,23,42,.04);
  --sh-lg:      0 20px 48px -12px rgba(15,23,42,.18), 0 8px 16px -8px rgba(15,23,42,.08);
  --sh-xl:      0 32px 72px -16px rgba(15,23,42,.22), 0 12px 24px -12px rgba(15,23,42,.1);}
html{scroll-behavior: smooth; -webkit-font-smoothing: antialiased; overflow-x: clip;}
body{font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--text); background: var(--bg);
  line-height: 1.6; overflow-x: hidden;
  font-feature-settings: 'cv11', 'ss01';}
a{text-decoration: none; color: inherit;}
img{max-width: 100%; display: block;}
.container{max-width: 1200px; margin: 0 auto; padding: 0 24px;}
section{padding: 72px 0; position: relative; scroll-margin-top: 84px;}
h1,h2,h3{font-family: 'Manrope', 'Inter', sans-serif; letter-spacing: -0.02em;}
.btn{display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 10px;
  font-size: 14.5px; font-weight: 600; cursor: pointer;
  border: 1px solid transparent; text-decoration: none;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  white-space: nowrap;}
.btn-primary{background: var(--ink); color: #fff;
  box-shadow: var(--sh-sm), inset 0 1px 0 rgba(255,255,255,.08);}
.btn-primary:hover{background: #111a2e; transform: translateY(-1px); box-shadow: var(--sh), inset 0 1px 0 rgba(255,255,255,.08);}
.header-logo{display: flex; align-items: center; gap: 10px; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 17px; color: var(--ink); letter-spacing: -0.02em;}
.header-logo img{height: 34px; width: auto; transition: height .3s cubic-bezier(.4,0,.2,1);}
@keyframes hdrSheen{to { transform: translateX(125%); }}
@media (min-width: 769px) and (max-width: 1329px){section{scroll-margin-top: 66px;}
.header-logo img{height: 32px;}}
@keyframes heroDrift{from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-2.6%, 1.6%, 0) scale(1.06); }}
@keyframes orb-spin{to { transform: rotate(360deg); }}
@keyframes ai-bar{50% { transform: scaleY(.4); }}
@keyframes langFlash{0% { opacity: 0; } 36% { opacity: 1; } 100% { opacity: 0; }}
.iv-mode-b:hover:not(:disabled):not(.on){color: var(--text-2);}
@keyframes ivRun{from { transform: scaleX(0); } to { transform: scaleX(1); }}
@keyframes ivWipe{from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 100% 0 0); }}
@keyframes ivSweep{from { opacity: 1; transform: translateX(-120px); }
  to { opacity: 0; transform: translateX(calc(100% + 100vw)); }}
@keyframes ivIn{from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; }}
footer{background:
    linear-gradient(180deg, #ffffff 0, rgba(255,255,255,.4) 26px, transparent 68px),
    var(--ink);
  background-origin: border-box;
  color: rgba(255,255,255,.6);
  padding: 72px 0 32px;}
@keyframes msgIn{from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }}
@keyframes pfIn{to { opacity: 1; }}
@keyframes pfRunL{0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; }
  70% { opacity: 1; } 100% { transform: translateX(55px); opacity: 0; }}
@keyframes pfRunR{0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; }
  70% { opacity: 1; } 100% { transform: translateX(-55px); opacity: 0; }}
@keyframes pfRunD{0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; }
  70% { opacity: 1; } 100% { transform: translateY(-82px); opacity: 0; }}
@keyframes pfWireA{0% { transform: translate(0,0); opacity: 0; } 15% { opacity: 1; }
  70% { opacity: 1; } 100% { transform: translate(-134px, 46px); opacity: 0; }}
@keyframes pfWireB{0% { transform: translate(0,0); opacity: 0; } 15% { opacity: 1; }
  70% { opacity: 1; } 100% { transform: translate(134px, 46px); opacity: 0; }}
@keyframes pfWireC{0% { transform: translate(0,0); opacity: 0; } 15% { opacity: 1; }
  70% { opacity: 1; } 100% { transform: translate(0, 50px); opacity: 0; }}
@keyframes pulse{0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.6); opacity: .35; }}
@keyframes geoRun{0%   { offset-distance: 0%;   opacity: 0; }
  12%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }}
@keyframes geoIn{to { opacity: 1; }}
@keyframes geoPulse{0%   { r: 5; opacity: .85; stroke-width: 2; }
  100% { r: 30; opacity: 0; stroke-width: .5; }}
@keyframes geoChip{to { opacity: 1; transform: none; }}
@keyframes geoDrift{from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(46%, 34%, 0) scale(1.25); }}
@keyframes geoBar{from { transform: scaleX(0); } to { transform: scaleX(1); }}
@keyframes geoRow{to { opacity: 1; transform: none; }}
@keyframes geoBeat{0%, 62%, 100% { transform: scale(1); filter: none; }
  10% { transform: scale(1.28); filter: drop-shadow(0 0 7px rgba(16,185,129,.85)); }
  22% { transform: scale(1); }
  32% { transform: scale(1.15); filter: drop-shadow(0 0 5px rgba(16,185,129,.55)); }
  44% { transform: scale(1); }}
@media (max-width: 760px){@keyframes geoRoll{from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); }}}
@media (max-width: 768px){section{padding: 64px 0;}
.container{padding: 0 18px;}
.header-logo img{height: 30px;}
section{scroll-margin-top: 72px;}}
@media (max-width: 480px){section{padding: 52px 0;}
.container{padding: 0 18px;}}
@media (max-width: 360px){.container{padding: 0 14px;}}
@keyframes priSkel{from { background-position: 200% 0; } to { background-position: -200% 0; }}
@keyframes seatGlow{0%, 100% { box-shadow: 0 6px 16px -6px rgba(139,92,246,.55); }
  50% { box-shadow: 0 10px 26px -6px rgba(236,72,153,.8); }}
@keyframes seatShine{0% { transform: translateX(-130%); }
  55%, 100% { transform: translateX(130%); }}
@keyframes seatGift{0%, 78%, 100% { transform: rotate(0deg) scale(1); }
  83% { transform: rotate(-10deg) scale(1.1); }
  88% { transform: rotate(9deg) scale(1.1); }
  93% { transform: rotate(-4deg) scale(1.04); }}
@media (min-width: 1330px){:root{--mm-w: 210px; --mm-off: min(450px, max(318px, calc(100vw - 1390px)));}
section{scroll-margin-top: 12px;}
body{padding-left: var(--mm-off);}
section,footer{margin-left: calc(-1 * var(--mm-off));
    border-left: var(--mm-off) solid transparent;
    background-origin: border-box;
    background-clip: border-box;}}
@keyframes mmBreathe{from { opacity: .6; transform: translate3d(0,0,0) scale(1); }
  to { opacity: 1; transform: translate3d(10px,-18px,0) scale(1.09); }}
@keyframes svDrift{from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-16px, 12px, 0) scale(1.06); }}
@keyframes svDot{0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); }}
@keyframes svShake{0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); }}
@keyframes svFloat{from { transform: translateY(0); } to { transform: translateY(-6px); }}
.art-top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line-soft)}
.art-top .container{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:12px;padding-bottom:12px}
.art-top .header-logo img{height:30px;width:auto}
.art-nav{display:flex;align-items:center;gap:20px}
.art-nav a{font-size:14px;color:var(--muted);font-weight:600;text-decoration:none}
.art-nav a:hover{color:var(--text)}
@media(max-width:760px){.art-nav a:not(.btn){display:none}}
.article{max-width:820px;margin:0 auto;padding:40px 20px 8px}
.art-bc{font-size:13px;color:var(--muted);margin-bottom:14px}
.art-bc a{color:var(--teal-d);text-decoration:none}
.article h1{font-family:'Manrope',sans-serif;font-size:34px;line-height:1.15;letter-spacing:-.03em;color:var(--ink);margin:0 0 16px}
.art-lead{font-size:18px;line-height:1.65;color:var(--text);margin:0 0 28px}
.article h2{font-family:'Manrope',sans-serif;font-size:25px;letter-spacing:-.02em;color:var(--ink);margin:36px 0 14px}
.article h3{font-size:19px;font-weight:700;color:var(--ink);margin:24px 0 10px}
.article p{font-size:16px;line-height:1.7;color:var(--text);margin:0 0 14px}
.article ul,.article ol{margin:0 0 16px;padding-left:22px}
.article li{font-size:16px;line-height:1.7;color:var(--text);margin:6px 0}
.article table{width:100%;border-collapse:collapse;margin:18px 0;font-size:14.5px;display:block;overflow-x:auto}
.article th,.article td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.article thead th{background:var(--teal-f);color:var(--teal-d);font-weight:700}
.article a{color:var(--teal-d)}
.art-faq{max-width:820px;margin:8px auto 0;padding:0 20px}
.art-faq h2{font-family:'Manrope',sans-serif;font-size:25px;color:var(--ink);margin:24px 0 14px}
.art-faq details{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:10px;background:var(--surface)}
.art-faq summary{font-weight:700;color:var(--ink);cursor:pointer;font-size:16px}
.art-faq details p{margin:10px 0 0;color:var(--text);line-height:1.65;font-size:15px}
.art-related{max-width:820px;margin:32px auto 0;padding:0 20px}
.art-related .rel-title{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:10px}
.art-related a{display:inline-block;margin:0 8px 8px 0;padding:8px 14px;border:1px solid var(--line);border-radius:100px;font-size:14px;color:var(--teal-d);text-decoration:none}
.art-related a:hover{border-color:var(--teal);background:var(--teal-f)}
.art-cta{max-width:820px;margin:40px auto;padding:28px;border-radius:var(--r-lg);background:linear-gradient(135deg,var(--teal),var(--teal-d));color:#fff;text-align:center}
.art-cta h2{color:#fff;font-family:'Manrope',sans-serif;font-size:24px;margin:0 0 8px}
.art-cta p{color:rgba(255,255,255,.85);margin:0 0 18px}
.art-cta .btn{background:var(--surface);color:var(--teal-d)}
.art-foot{border-top:1px solid var(--line);margin-top:48px;padding:28px 20px;text-align:center;color:var(--muted);font-size:13px;line-height:1.7}
.art-foot a{color:var(--teal-d);margin:0 6px;text-decoration:none}
@media (max-width: 768px){body{padding-bottom: 84px; transition: padding-bottom .28s ease;}
@keyframes mbDrift{from { background-position: -14% 50%, 0 0; }
    to   { background-position: 114% 50%, 0 0; }}}
@keyframes regPop{35% { transform: translateY(-3px) scale(1.08); }}
@keyframes regFloat{0%,100% { transform: translateY(0); opacity: .28; } 50% { transform: translateY(-9px); opacity: 1; }}
@keyframes regOkIn{from { opacity: 0; transform: scale(.45); }}
@keyframes regDraw{to { stroke-dashoffset: 0; }}
@keyframes regRing{0% { opacity: .75; transform: scale(1); } 100% { opacity: 0; transform: scale(1.45); }}
@media (max-width: 380px){.container{padding: 0 12px;}
.header-logo{font-size: 15px; gap: 7px;}
.header-logo img{height: 26px; width: auto;}}
.btn-primary{position: relative; overflow: hidden;}
.btn-primary::after{content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.38) 50%, transparent 62%);
  transform: translateX(-150%);
  transition: transform .75s cubic-bezier(.22,1,.36,1);}
.btn-primary:hover::after{transform: translateX(150%);}
@media (prefers-reduced-motion: reduce){.btn-primary::after{display: none;}}
@keyframes hvSlot{from { opacity: 0; transform: translateY(-9px) scale(.97); max-height: 0; } to { opacity: 1; transform: none; max-height: 60px; }}
@keyframes hvSlot{from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; }}
@keyframes mjSheen{to { transform: translateX(120%); }}
@keyframes mjBeat{0% { box-shadow: 0 0 0 0 rgba(13,148,136,.5); } 70% { box-shadow: 0 0 0 7px rgba(13,148,136,0); } 100% { box-shadow: 0 0 0 0 rgba(13,148,136,0); }}
@keyframes mjStar{to { opacity: 1; transform: none; }}
@keyframes mjDot{0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); }}
@view-transition{navigation: auto;}
::view-transition-old(root){animation-duration: .18s;}
::view-transition-new(root){animation-duration: .24s;}
@media (prefers-reduced-motion: reduce){::view-transition-old(root),::view-transition-new(root){animation: none;}}

@media (max-width: 760px) {
  a, button, [role="button"], input[type="submit"], input[type="button"], summary {
    -webkit-tap-highlight-color: transparent;
  }
}
