.hero { position: relative; padding: 5rem 0 3.5rem; overflow: hidden; }
.hero-orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.5; pointer-events: none; animation: drift 9s ease-in-out infinite; }
.hero-orb.o1 { width: 420px; height: 420px; background: rgba(124, 92, 255, 0.35); top: -140px; right: -100px; }
.hero-orb.o2 { width: 340px; height: 340px; background: rgba(34, 211, 238, 0.22); bottom: -160px; left: -110px; animation-delay: -4s; }
[data-theme="light"] .hero-orb { opacity: 0.35; }
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 2.5rem; align-items: center; }
.hero h1 { font-size: clamp(2.2rem, 5.2vw, 3.6rem); margin: 1rem 0; }
.hero p.lead { color: var(--muted); font-size: 1.08rem; max-width: 540px; }
.hero-cta { display: flex; gap: 0.8rem; margin-top: 1.8rem; flex-wrap: wrap; }
.hero-mini { display: flex; gap: 1.3rem; margin-top: 1.6rem; flex-wrap: wrap; font-size: 0.85rem; color: var(--muted); font-weight: 600; }
.hero-mini span { display: inline-flex; align-items: center; gap: 0.4rem; }
.hero-mini svg { width: 16px; height: 16px; color: var(--ok); }
.hero-card { animation: floaty 6s ease-in-out infinite; }
.hero-card .urlbar { display: flex; align-items: center; gap: 0.5rem; background: var(--inset); border: 2px solid var(--border); border-radius: var(--r-sm); padding: 0.55rem 0.8rem; font-family: var(--font-mono); font-size: 0.85rem; margin-bottom: 1rem; }
.hero-card .urlbar .lock { color: var(--ok); display: inline-flex; }
.hero-card .urlbar svg { width: 15px; height: 15px; }
.checker-row { display: flex; gap: 0.6rem; }
.checker-row .grow { flex: 1; position: relative; }
.checker-row .suffix { position: absolute; right: 0.9rem; top: 50%; transform: translateY(-50%); color: var(--faint); font-family: var(--font-mono); font-size: 0.85rem; pointer-events: none; }
.checker-row .input { padding-right: 7.5rem; font-family: var(--font-mono); }
.check-result { margin-top: 0.8rem; min-height: 2.1rem; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; } .hero { padding-top: 3.2rem; } }

.marquee { border-top: 2px solid var(--border); border-bottom: 2px solid var(--border); background: var(--bg2); overflow: hidden; padding: 0.9rem 0; }
.marquee-track { display: flex; gap: 0.8rem; width: max-content; animation: marquee 26s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }

.feat { display: flex; flex-direction: column; gap: 0.6rem; }
.feat .ic { width: 46px; height: 46px; border-radius: 12px; background: var(--brand-grad); display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--border); box-shadow: var(--hard-sm); }
.feat .ic svg { width: 22px; height: 22px; color: #fff; }
.feat h3 { font-size: 1.05rem; }
.feat p { color: var(--muted); font-size: 0.92rem; }

.step { position: relative; padding-left: 0; }
.step .no { font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }
.step h3 { margin: 0.6rem 0 0.4rem; font-size: 1.08rem; }
.step p { color: var(--muted); font-size: 0.92rem; }
.step code { font-family: var(--font-mono); font-size: 0.8rem; background: var(--inset); border: 1px solid var(--border); border-radius: 6px; padding: 0.1rem 0.45rem; }

.faq { display: flex; flex-direction: column; gap: 0.8rem; max-width: 760px; margin: 0 auto; }
.faq details { background: var(--card); border: 2px solid var(--border); border-radius: var(--r-md); box-shadow: var(--hard-sm); overflow: hidden; }
.faq summary { cursor: pointer; font-weight: 700; padding: 1rem 1.2rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 18px; height: 18px; flex: none; color: var(--brand2); transition: transform 0.2s ease; }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq details p { padding: 0 1.2rem 1.1rem; color: var(--muted); font-size: 0.93rem; }

.cta-final { background: var(--brand-grad); background-size: 200% 200%; animation: gradShift 8s ease infinite; border: 2px solid var(--border); border-radius: 22px; box-shadow: var(--hard); padding: 3rem 2rem; text-align: center; color: #fff; }
.cta-final h2 { font-size: clamp(1.5rem, 3.4vw, 2.3rem); margin-bottom: 0.6rem; }
.cta-final p { opacity: 0.92; margin-bottom: 1.6rem; }
.cta-final .btn { background: #fff; color: #2a1b69; border-color: transparent; }
.cta-final .btn-ghost { background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.5); box-shadow: none; }

.auth-wrap { min-height: calc(100vh - var(--nav-h)); display: flex; align-items: center; justify-content: center; padding: 3rem 0; }
.auth-card { width: min(460px, 100%); }
.auth-card .brand { margin-bottom: 1rem; }
.auth-card h1 { font-size: 1.6rem; margin-bottom: 0.3rem; }
.auth-side { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }
.auth-points { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
.auth-points li { list-style: none; display: flex; gap: 0.7rem; align-items: flex-start; color: var(--muted); font-size: 0.93rem; }
.auth-points svg { width: 20px; height: 20px; color: var(--brand2); flex: none; margin-top: 3px; }
@media (max-width: 900px) { .auth-side { grid-template-columns: 1fr; } .auth-info { display: none; } }

.stat { display: flex; flex-direction: column; gap: 0.25rem; }
.stat .v { font-family: var(--font-display); font-size: 2rem; font-weight: 700; line-height: 1.1; }
.stat .l { color: var(--muted); font-size: 0.86rem; font-weight: 600; display: flex; align-items: center; gap: 0.4rem; }
.stat .l svg { width: 15px; height: 15px; color: var(--brand2); }
.label-card { display: flex; flex-direction: column; gap: 0.7rem; }
.label-card .nm { font-family: var(--font-mono); font-weight: 700; font-size: 1rem; word-break: break-all; }
.label-card .row { justify-content: space-between; }

.post { scroll-margin-top: calc(var(--nav-h) + 20px); }
.post h2 { font-size: 1.5rem; margin-bottom: 0.4rem; }
.post h3 { font-size: 1.05rem; margin: 1.4rem 0 0.5rem; }
.post p, .post li { color: var(--muted); font-size: 0.95rem; }
.post ol, .post ul { padding-left: 1.3rem; display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.5rem; }
.post code { font-family: var(--font-mono); font-size: 0.83rem; background: var(--inset); border: 1px solid var(--border); border-radius: 6px; padding: 0.1rem 0.45rem; color: var(--text); }
.post pre { background: var(--inset); border: 2px solid var(--border); border-radius: var(--r-sm); padding: 1rem; overflow-x: auto; margin-top: 0.7rem; font-family: var(--font-mono); font-size: 0.83rem; line-height: 1.7; }
.post .toc { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 1rem 0 0; }

.nf { text-align: center; padding: 6rem 0; }
.nf .big { font-family: var(--font-display); font-size: clamp(4rem, 14vw, 8rem); font-weight: 700; background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }

.hero-card .urlbar { min-width: 0; }
.hero-card .urlbar #hero-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
@media (max-width: 560px) {
  .cta-final { padding: 2.2rem 1.2rem; }
  .cta-final .row .btn { width: 100%; }
  .hero-cta .btn { width: 100%; }
  .checker-row .suffix { font-size: 0.72rem; right: 0.6rem; }
  .checker-row .input { padding-right: 6.4rem; }
}