:root{--ink:#2c303e;--ink-deep:#1b1e29;--ink-soft:#363b4b;--fog:#eaecef;--muted:#a8adb9;--red:#ff0055;--cyan:#00ffcc;--violet:#a68cff;--line:rgba(234,236,239,.14);--max:1240px;--ease:cubic-bezier(.2,.75,.2,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--fog);font-family:"Noto Sans SC",system-ui,sans-serif;line-height:1.75;-webkit-font-smoothing:antialiased}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.04;background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);background-size:44px 44px;z-index:20}.site-shell{overflow:hidden}.skip-link{position:absolute;left:1rem;top:-4rem;background:var(--cyan);color:var(--ink);padding:.5rem 1rem;z-index:100}.skip-link:focus{top:1rem}.site-header{position:fixed;z-index:50;inset:0 0 auto;background:rgba(44,48,62,.8);border-bottom:1px solid var(--line);backdrop-filter:blur(18px)}.header-inner{max-width:var(--max);margin:auto;padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:2rem}.brand{color:var(--fog);display:flex;align-items:center;gap:.75rem;text-decoration:none;line-height:1}.brand img{width:42px;height:42px;border:1px solid rgba(0,255,204,.6);object-fit:cover}.brand strong{display:block;font-size:1.02rem;letter-spacing:.08em}.brand small{display:block;color:var(--cyan);font:500 .56rem/1.5 "JetBrains Mono",monospace;letter-spacing:.12em;margin-top:.35rem}.primary-nav{display:flex;align-items:center;gap:1.35rem}.primary-nav a{color:var(--muted);font-size:.8rem;text-decoration:none;white-space:nowrap;transition:color .2s ease}.primary-nav a:hover,.primary-nav a.is-active{color:var(--fog)}.primary-nav .nav-cta{color:var(--ink);background:var(--red);padding:.65rem 1rem;font-weight:700;box-shadow:4px 4px 0 rgba(0,255,204,.7)}.primary-nav .nav-cta:hover{color:var(--ink);transform:translate(-2px,-2px)}.menu-toggle{display:none;background:none;border:0;color:var(--fog);font:inherit}.menu-toggle span{display:block;width:1.4rem;height:2px;background:var(--fog);margin:4px 0}.menu-toggle b{font-size:.65rem;font-weight:500}.hero{position:relative;padding:10rem 1.5rem 0;min-height:780px;background:linear-gradient(135deg,var(--ink) 20%,#242838 100%)}.hero-backdrop{position:absolute;inset:0;background:radial-gradient(circle at 75% 40%,rgba(0,255,204,.11),transparent 23%),linear-gradient(90deg,rgba(44,48,62,.98) 10%,rgba(44,48,62,.7) 48%,rgba(44,48,62,.2)),url('img/tu6.webp') center/cover;opacity:.6}.hero-grid{position:relative;max-width:var(--max);margin:auto;display:grid;grid-template-columns:1fr minmax(420px,1.06fr);gap:4rem;align-items:center}.hero-copy{padding:2rem 0 5rem}.eyebrow,.section-kicker{font:600 .69rem/1.4 "JetBrains Mono",monospace;letter-spacing:.17em;color:var(--cyan);text-transform:uppercase}.status-dot{display:inline-block;width:7px;height:7px;background:var(--red);border-radius:50%;box-shadow:0 0 12px var(--red);margin-right:.55rem}.hero h1{font-size:clamp(3.8rem,9vw,7.9rem);line-height:.95;margin:1.4rem 0 1.4rem;letter-spacing:-.06em;color:#fff;text-shadow:4px 4px 0 rgba(0,255,204,.14)}.hero-lead{font-size:clamp(1.25rem,2vw,1.65rem);font-weight:600;line-height:1.55;max-width:34rem}.hero-description{color:#c2c6d0;max-width:35rem;font-size:.95rem}.hero-actions{display:flex;flex-wrap:wrap;gap:.85rem;margin:2rem 0 3rem}.button{display:inline-flex;align-items:center;gap:.8rem;text-decoration:none;border:1px solid transparent;padding:.8rem 1.1rem;font-size:.84rem;font-weight:700;transition:all .2s ease}.button-primary{background:var(--red);color:var(--ink);box-shadow:5px 5px 0 rgba(0,255,204,.55)}.button-primary:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 rgba(0,255,204,.55)}.button-quiet{border-color:var(--line);color:var(--fog)}.button-quiet:hover{border-color:var(--cyan);color:var(--cyan)}.hero-meta{display:flex;flex-wrap:wrap;gap:1.3rem;margin:0}.hero-meta div{border-left:1px solid var(--red);padding-left:.75rem}.hero-meta dt{color:var(--muted);font:500 .62rem "JetBrains Mono",monospace;letter-spacing:.12em}.hero-meta dd{margin:.25rem 0 0;font-size:.76rem}.hero-art{position:relative;border:1px solid rgba(0,255,204,.48);padding:.5rem;box-shadow:15px 15px 0 rgba(24,27,38,.75)}.hero-art img{display:block;width:100%;height:auto;aspect-ratio:1.78;object-fit:cover}.scanline{position:absolute;z-index:2;left:0;right:0;top:45%;height:1px;background:var(--cyan);box-shadow:0 0 16px var(--cyan);opacity:.7}.corner{position:absolute;width:1.1rem;height:1.1rem;border-color:var(--cyan);z-index:3}.corner-tl{left:-.2rem;top:-.2rem;border-left:2px solid;border-top:2px solid}.corner-tr{right:-.2rem;top:-.2rem;border-right:2px solid;border-top:2px solid}.corner-bl{left:-.2rem;bottom:-.2rem;border-left:2px solid;border-bottom:2px solid}.corner-br{right:-.2rem;bottom:-.2rem;border-right:2px solid;border-bottom:2px solid}.art-caption{position:absolute;bottom:1.1rem;left:1.1rem;right:1.1rem;display:flex;justify-content:space-between;gap:1rem;align-items:end;font:500 .6rem "JetBrains Mono",monospace}.art-caption span{color:var(--cyan)}.art-caption b{font-size:.62rem;color:#fff}.hero-ticker{position:relative;max-width:var(--max);margin:auto;border-top:1px solid var(--line);padding:1rem 0;display:flex;justify-content:space-between;color:var(--muted);font:500 .62rem "JetBrains Mono",monospace;letter-spacing:.14em}.section{max-width:var(--max);margin:auto;padding:7rem 1.5rem}.section-kicker{display:flex;align-items:center;gap:.65rem}.section-kicker i{display:inline-block;width:3.2rem;height:1px;background:var(--red)}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:2rem;margin:1.1rem 0 3rem}.section-heading h2{font-size:clamp(2rem,4.5vw,3.65rem);line-height:1.12;letter-spacing:-.04em;margin:0;max-width:42rem}.section-heading p{color:var(--muted);max-width:24rem;margin:0;font-size:.9rem}.intro-section{padding-top:7.5rem}.intro-layout{display:grid;grid-template-columns:1fr 1.07fr;gap:4rem;align-items:center}.intro-copy{font-size:.98rem;color:#c8cbd4}.lead-paragraph{font-size:1.15rem;color:var(--fog);line-height:1.9}.fact-line{display:flex;flex-wrap:wrap;gap:1.2rem;border-top:1px solid var(--line);padding-top:1.2rem;margin-top:2rem;font:500 .65rem "JetBrains Mono",monospace;color:var(--muted)}.fact-line b{color:var(--fog);display:block;margin-top:.25rem;font-weight:500}.intro-visual{margin:0;position:relative}.intro-visual img{display:block;width:100%;aspect-ratio:1.78;object-fit:cover;border:1px solid var(--line)}.intro-visual figcaption{position:absolute;bottom:0;left:0;right:0;padding:1rem;background:linear-gradient(transparent,rgba(27,30,41,.95));font-size:.78rem}.intro-visual figcaption span{color:var(--red);font:500 .6rem "JetBrains Mono",monospace;margin-right:1rem}.content-section{background:linear-gradient(180deg,transparent,rgba(27,30,41,.35));max-width:none;padding-left:max(1.5rem,calc((100vw - var(--max))/2 + 1.5rem));padding-right:max(1.5rem,calc((100vw - var(--max))/2 + 1.5rem))}.content-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}.content-card{min-height:200px;padding:1.6rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .3s ease}.content-card:hover{background:rgba(0,255,204,.045)}.card-no{color:var(--red);font:600 .68rem "JetBrains Mono",monospace}.content-card h3{font-size:1.1rem;margin:.8rem 0 .5rem}.content-card p{color:var(--muted);font-size:.84rem;margin:0}.content-image-strip{position:relative;margin-top:2rem;min-height:250px;overflow:hidden}.content-image-strip img{display:block;width:100%;height:250px;object-fit:cover;opacity:.8}.content-image-strip:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(27,30,41,.95),rgba(27,30,41,.25),rgba(27,30,41,.45))}.content-image-strip>div{position:absolute;z-index:1;left:2rem;top:50%;transform:translateY(-50%)}.content-image-strip span{display:block;color:var(--cyan);font:500 .62rem "JetBrains Mono",monospace}.content-image-strip strong{display:block;margin-top:.6rem;font-size:clamp(1.4rem,3vw,2.2rem)}.guide-layout{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}.guide-visual{position:relative}.guide-visual img{width:100%;display:block;aspect-ratio:1.78;object-fit:cover;border:1px solid var(--line)}.guide-stamp{position:absolute;right:1.4rem;bottom:1.4rem;border:1px solid var(--red);padding:.7rem;text-align:center;color:var(--red);font:600 .65rem/1.2 "JetBrains Mono",monospace;transform:rotate(-6deg)}.guide-stamp b{color:var(--cyan);font-size:1rem}.guide-list details{border-top:1px solid var(--line);padding:1.1rem 0}.guide-list details:last-child{border-bottom:1px solid var(--line)}summary{cursor:pointer;list-style:none}summary::-webkit-details-marker{display:none}.guide-list summary{display:grid;grid-template-columns:2.3rem 1fr auto;gap:.8rem;align-items:center}.guide-list summary span{color:var(--red);font:600 .68rem "JetBrains Mono",monospace}.guide-list summary b{font-size:1rem}.guide-list summary i{font:normal 1.4rem/1;color:var(--cyan);transition:transform .2s ease}.guide-list details[open] summary i{transform:rotate(45deg)}.guide-list p{color:var(--muted);font-size:.86rem;padding-left:3.1rem;margin:.8rem 0 .1rem}.feature-section{padding-top:2rem}.feature-banner{display:grid;grid-template-columns:.9fr 1.1fr;align-items:stretch;background:var(--ink-deep);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.feature-banner>div{padding:3.5rem}.feature-banner h2{font-size:clamp(2.5rem,5vw,4.7rem);line-height:1.02;margin:1.5rem 0}.feature-banner h2 em{font-style:normal;color:var(--red)}.feature-banner p{color:var(--muted);max-width:25rem}.feature-banner img{width:100%;height:100%;min-height:300px;object-fit:cover;filter:saturate(.82)}.feature-points{display:grid;grid-template-columns:repeat(3,1fr);border-left:1px solid var(--line);border-bottom:1px solid var(--line)}.feature-points>div{padding:1.7rem;border-right:1px solid var(--line)}.feature-points span{color:var(--cyan);font:600 .68rem "JetBrains Mono",monospace}.feature-points h3{font-size:1.05rem;margin:.8rem 0 .3rem}.feature-points p{color:var(--muted);font-size:.83rem;margin:0}.update-section{background:#262a38;max-width:none;padding-left:max(1.5rem,calc((100vw - var(--max))/2 + 1.5rem));padding-right:max(1.5rem,calc((100vw - var(--max))/2 + 1.5rem))}.timeline{border-top:1px solid var(--line)}.timeline article{display:grid;grid-template-columns:9rem 1fr;gap:2rem;padding:1.5rem 0;border-bottom:1px solid var(--line)}.timeline time{color:var(--cyan);font:500 .7rem "JetBrains Mono",monospace}.timeline h3{font-size:1rem;margin:0}.timeline p{color:var(--muted);font-size:.85rem;margin:.3rem 0 0}.gallery-section{padding-bottom:6rem}.gallery-controls{display:flex;align-items:center;gap:.8rem;font:500 .68rem "JetBrains Mono",monospace;color:var(--cyan)}.gallery-controls button{width:2.3rem;height:2.3rem;background:transparent;border:1px solid var(--line);color:var(--fog);cursor:pointer;font-size:1rem}.gallery-controls button:hover{border-color:var(--cyan);color:var(--cyan)}.gallery{position:relative;min-height:clamp(270px,48vw,600px)}.gallery-slide{display:none;position:relative;margin:0}.gallery-slide.is-active{display:block}.gallery-slide img{display:block;width:100%;height:clamp(270px,48vw,600px);object-fit:cover;border:1px solid var(--line)}.gallery-slide figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.5rem 1.7rem;background:linear-gradient(transparent,rgba(20,22,31,.95));font-size:.95rem}.gallery-slide figcaption span{color:var(--cyan);font:500 .6rem "JetBrains Mono",monospace;margin-right:1rem}.faq-section{padding-top:2rem}.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 3rem;border-top:1px solid var(--line)}.faq-grid details{border-bottom:1px solid var(--line);padding:1.25rem 0}.faq-grid summary{display:flex;justify-content:space-between;gap:1rem;font-weight:600;font-size:.95rem}.faq-grid summary span{color:var(--cyan);font-size:1.2rem;font-weight:400;transition:transform .2s ease}.faq-grid details[open] summary span{transform:rotate(45deg)}.faq-grid p{margin:.8rem 2rem 0 0;color:var(--muted);font-size:.84rem}.final-cta{position:relative;max-width:var(--max);margin:auto;padding:6rem 1.5rem 7rem;display:flex;align-items:center;justify-content:space-between;min-height:430px}.cta-inner{position:relative;z-index:1}.final-cta h2{font-size:clamp(2.8rem,7vw,6.3rem);line-height:.98;letter-spacing:-.06em;margin:1.3rem 0}.final-cta h2 em{font-style:normal;color:var(--red)}.final-cta p:not(.eyebrow){color:var(--muted)}.cta-number{font:800 clamp(13rem,28vw,24rem)/.8 "JetBrains Mono",monospace;color:rgba(0,255,204,.07);letter-spacing:-.16em;position:absolute;right:-1.4rem;bottom:3rem}.site-footer{border-top:1px solid var(--line);padding:2.3rem max(1.5rem,calc((100vw - var(--max))/2 + 1.5rem));display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:end}.brand-footer img{width:36px;height:36px}.site-footer p{color:var(--muted);font-size:.75rem;margin:.8rem 0 0}.footer-links{display:flex;gap:1.1rem}.footer-links a{color:var(--muted);font-size:.74rem;text-decoration:none}.footer-links a:hover{color:var(--cyan)}.copyright{grid-column:1/-1;color:#737887;font:500 .62rem "JetBrains Mono",monospace}
@media(max-width:980px){.primary-nav{gap:.75rem}.primary-nav a{font-size:.72rem}.hero-grid{grid-template-columns:1fr minmax(350px,.9fr);gap:2rem}.content-grid{grid-template-columns:repeat(2,1fr)}.intro-layout,.guide-layout{gap:2rem}.feature-banner>div{padding:2.2rem}.site-footer{grid-template-columns:1fr}.footer-links{order:3}.copyright{grid-column:auto}}
@media(max-width:760px){body:before{background-size:30px 30px}.header-inner{padding:.8rem 1rem}.menu-toggle{display:block}.primary-nav{display:none;position:absolute;top:100%;left:0;right:0;padding:1rem;background:rgba(27,30,41,.98);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0}.primary-nav.is-open{display:flex}.primary-nav a{padding:.8rem 1rem;border-bottom:1px solid var(--line);font-size:.82rem}.primary-nav .nav-cta{text-align:center;margin-top:.8rem}.hero{padding:8.2rem 1rem 0;min-height:auto}.hero-grid{grid-template-columns:1fr;gap:1rem}.hero-copy{padding:1rem 0 2rem}.hero h1{font-size:clamp(4rem,18vw,6.5rem)}.hero-description{font-size:.88rem}.hero-art{order:-1;box-shadow:8px 8px 0 rgba(24,27,38,.75)}.hero-art img{aspect-ratio:1.58}.hero-ticker{padding:1rem;overflow:hidden;gap:1rem}.hero-ticker span{white-space:nowrap}.hero-ticker span:nth-child(n+3){display:none}.section,.content-section,.update-section{padding:4.5rem 1rem}.section-heading{display:block;margin-bottom:2rem}.section-heading p{margin-top:.8rem}.intro-layout,.guide-layout{grid-template-columns:1fr}.intro-visual{order:-1}.lead-paragraph{font-size:1rem}.content-grid{grid-template-columns:1fr}.content-card{min-height:0;padding:1.3rem}.content-image-strip{min-height:220px}.content-image-strip img{height:220px}.content-image-strip>div{left:1.2rem}.feature-banner{grid-template-columns:1fr}.feature-banner>div{padding:2.2rem 1.2rem}.feature-banner img{min-height:220px}.feature-points{grid-template-columns:1fr}.feature-points>div{padding:1.3rem}.timeline article{grid-template-columns:1fr;gap:.4rem}.faq-grid{grid-template-columns:1fr}.gallery-controls{margin-top:1rem}.gallery-slide img{height:clamp(250px,56vw,460px)}.final-cta{padding:4.5rem 1rem 5rem;min-height:410px}.cta-number{right:-2rem;bottom:2rem}.site-footer{padding:2rem 1rem}.footer-links{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Preserve every source image in full: no fixed-ratio cropping. */
.hero-backdrop{
  /* 首屏 H1 背景需要横向铺满；内容图片仍保持完整比例。 */
  background-size:auto,auto,cover;
  background-repeat:no-repeat,no-repeat,no-repeat;
  background-position:center,center,center;
}
.hero-art img,
.intro-visual img,
.content-image-strip img,
.guide-visual img,
.feature-banner img,
.gallery-slide img{
  width:100%;
  height:auto!important;
  min-height:0;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center;
}
.content-image-strip,
.gallery{
  min-height:0;
}
.feature-banner{
  align-items:center;
}

.friend-links{
  position:relative;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(circle at 50% 0,rgba(0,255,204,.08),transparent 46%),
    var(--ink-deep);
  padding:2.2rem 1.5rem 2.5rem;
}
.friend-links-inner{
  width:min(100%,var(--max));
  margin:0 auto;
  text-align:center;
}
.friend-links h2{
  margin:0 0 1.15rem;
  color:var(--fog);
  font-size:1.25rem;
  letter-spacing:.08em;
}
.friend-links h2::after{
  content:"";
  display:block;
  width:2.8rem;
  height:2px;
  margin:.65rem auto 0;
  background:linear-gradient(90deg,var(--red),var(--cyan));
}
.friend-links nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.7rem;
}
.friend-links a{
  display:inline-flex;
  align-items:center;
  min-height:2.45rem;
  padding:.55rem 1.15rem;
  border:1px solid rgba(234,236,239,.2);
  border-radius:999px;
  background:rgba(234,236,239,.07);
  color:var(--fog);
  font-size:.82rem;
  font-weight:600;
  line-height:1.35;
  text-decoration:none;
  transition:border-color .2s ease,color .2s ease,background .2s ease,transform .2s ease,box-shadow .2s ease;
}
.friend-links a:hover,
.friend-links a:focus-visible{
  border-color:var(--cyan);
  background:rgba(0,255,204,.1);
  color:var(--cyan);
  outline:none;
  transform:translateY(-2px);
  box-shadow:0 5px 0 rgba(255,0,85,.22);
}
.svg-sprite{
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
}
.icon{
  width:1em;
  height:1em;
  flex:0 0 auto;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.primary-nav a{
  display:inline-flex;
  align-items:center;
  gap:.38rem;
}
.primary-nav a .icon{
  color:var(--cyan);
  font-size:.95rem;
  transition:color .2s ease,transform .2s ease;
}
.primary-nav a:hover .icon,
.primary-nav a.is-active .icon{
  color:var(--red);
  transform:translateY(-1px);
}
.primary-nav .nav-cta .icon{
  color:var(--ink);
}
.button .icon{
  font-size:1.05rem;
}
.menu-toggle{
  align-items:center;
  gap:.4rem;
}
.menu-toggle .icon{
  font-size:1.4rem;
  color:var(--cyan);
}
.gallery-controls button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.gallery-controls button .icon{
  font-size:1.15rem;
}
.floating-detail{
  position:fixed;
  z-index:60;
  right:max(1rem,env(safe-area-inset-right));
  bottom:max(1rem,env(safe-area-inset-bottom));
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  min-height:3.25rem;
  padding:.8rem 1.15rem;
  border:1px solid rgba(0,255,204,.8);
  background:var(--red);
  color:var(--ink);
  box-shadow:6px 6px 0 rgba(0,255,204,.72),0 12px 30px rgba(0,0,0,.3);
  font-size:.86rem;
  font-weight:800;
  text-decoration:none;
  transition:transform .2s ease,box-shadow .2s ease;
}
.floating-detail:hover,
.floating-detail:focus-visible{
  outline:none;
  transform:translate(-3px,-3px);
  box-shadow:9px 9px 0 rgba(0,255,204,.72),0 16px 35px rgba(0,0,0,.38);
}
.floating-detail .icon{
  width:1.1rem;
  height:1.1rem;
}
@media(max-width:760px){
  .friend-links{padding:2rem 1rem 2.2rem}
  .friend-links nav{align-items:stretch;gap:.65rem}
  .friend-links a{justify-content:center;width:100%;padding:.7rem 1rem}
  .menu-toggle{display:flex}
  .primary-nav a{justify-content:flex-start;gap:.65rem}
  .floating-detail{right:max(.8rem,env(safe-area-inset-right));bottom:max(.8rem,env(safe-area-inset-bottom));min-height:3rem;padding:.72rem .95rem}
}

.screenshot-section{
  padding-top:4.5rem;
}
.screenshot-viewer{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(280px,1fr);
  gap:1rem;
  align-items:start;
}
.screenshot-preview{
  position:relative;
  margin:0;
  aspect-ratio:16/9;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border:1px solid rgba(0,255,204,.42);
  background:#171a23;
  box-shadow:10px 10px 0 rgba(27,30,41,.72);
}
.screenshot-preview::before,
.screenshot-preview::after{
  content:"";
  position:absolute;
  z-index:2;
  pointer-events:none;
}
.screenshot-preview::before{
  inset:.55rem;
  border:1px solid rgba(234,236,239,.12);
}
.screenshot-preview::after{
  left:0;
  right:0;
  top:45%;
  height:1px;
  background:rgba(0,255,204,.46);
  box-shadow:0 0 12px rgba(0,255,204,.45);
}
.screenshot-preview img{
  display:block;
  width:100%;
  height:100%!important;
  object-fit:contain!important;
  object-position:center;
}
.screenshot-preview figcaption{
  position:absolute;
  z-index:3;
  left:1rem;
  right:1rem;
  bottom:.75rem;
  display:flex;
  gap:.75rem;
  align-items:center;
  padding:.55rem .7rem;
  background:rgba(27,30,41,.78);
  color:var(--fog);
  font-size:.75rem;
  backdrop-filter:blur(8px);
}
.screenshot-preview figcaption span{
  color:var(--cyan);
  font:600 .61rem "JetBrains Mono",monospace;
  white-space:nowrap;
}
.screenshot-thumbnails{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
}
.screenshot-thumb{
  position:relative;
  aspect-ratio:16/9;
  width:100%;
  padding:0;
  overflow:hidden;
  border:1px solid var(--line);
  background:#171a23;
  color:var(--fog);
  cursor:pointer;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.screenshot-thumb img{
  display:block;
  width:100%;
  height:100%!important;
  object-fit:contain!important;
  object-position:center;
  opacity:.7;
  transition:opacity .2s ease,filter .2s ease;
}
.screenshot-thumb:hover,
.screenshot-thumb:focus-visible,
.screenshot-thumb.is-active{
  border-color:var(--cyan);
  outline:none;
  transform:translateY(-2px);
  box-shadow:4px 4px 0 rgba(255,0,85,.34);
}
.screenshot-thumb:hover img,
.screenshot-thumb:focus-visible img,
.screenshot-thumb.is-active img{
  opacity:1;
}
.screenshot-thumb.is-active::after{
  content:"";
  position:absolute;
  inset:0;
  border:2px solid var(--cyan);
  pointer-events:none;
}
.thumb-icon{
  position:absolute;
  right:.45rem;
  bottom:.4rem;
  width:1.65rem;
  height:1.65rem;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(27,30,41,.86);
  color:var(--cyan);
  opacity:0;
  transition:opacity .2s ease;
}
.screenshot-thumb:hover .thumb-icon,
.screenshot-thumb:focus-visible .thumb-icon,
.screenshot-thumb.is-active .thumb-icon{
  opacity:1;
}
.thumb-icon .icon{
  font-size:.85rem;
}
@media(max-width:980px){
  .screenshot-viewer{grid-template-columns:minmax(0,1.7fr) minmax(240px,1fr)}
  .screenshot-thumbnails{gap:.7rem}
}
@media(max-width:760px){
  .screenshot-section{padding-top:3.5rem}
  .screenshot-viewer{grid-template-columns:1fr;gap:1rem}
  .screenshot-thumbnails{grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem}
  .screenshot-preview{box-shadow:6px 6px 0 rgba(27,30,41,.72)}
  .screenshot-preview figcaption{left:.6rem;right:.6rem;bottom:.5rem;font-size:.67rem}
  .thumb-icon{width:1.35rem;height:1.35rem;right:.3rem;bottom:.3rem}
}

/* =========================================================
   Hover interactions — pure CSS / unified 0.3s transitions
   ========================================================= */

/* Cards: lift and neon glow. */
.content-card,
.feature-points>div,
.timeline article,
.guide-list details,
.faq-grid details{
  position:relative;
  transition:
    transform .3s ease,
    background-color .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}
.content-card:hover,
.feature-points>div:hover,
.timeline article:hover,
.guide-list details:hover,
.faq-grid details:hover{
  z-index:2;
  transform:translateY(-7px);
  border-color:rgba(0,255,204,.5);
  background-color:rgba(0,255,204,.055);
  box-shadow:
    0 0 0 1px rgba(0,255,204,.2),
    0 12px 30px rgba(0,0,0,.24),
    0 0 24px rgba(0,255,204,.15);
}
.content-card:hover h3,
.feature-points>div:hover h3,
.timeline article:hover h3,
.guide-list details:hover summary,
.faq-grid details:hover summary{
  color:var(--cyan);
}
.content-card h3,
.feature-points h3,
.timeline h3,
.guide-list summary,
.faq-grid summary{
  transition:color .3s ease;
}

/* Buttons: brighten and scale without changing document flow. */
.button,
.primary-nav .nav-cta,
.floating-detail,
.gallery-controls button,
.screenshot-thumb,
.menu-toggle,
.friend-links a{
  transition:
    transform .3s ease,
    filter .3s ease,
    color .3s ease,
    background-color .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
  transform-origin:center;
}
.button:hover,
.button:focus-visible{
  filter:brightness(1.16) saturate(1.08);
  transform:translateY(-2px) scale(1.05);
}
.primary-nav .nav-cta:hover,
.primary-nav .nav-cta:focus-visible{
  filter:brightness(1.15) saturate(1.1);
  transform:translate(-2px,-2px) scale(1.04);
}
.floating-detail:hover,
.floating-detail:focus-visible{
  filter:brightness(1.14) saturate(1.1);
  transform:translate(-3px,-3px) scale(1.06);
}
.gallery-controls button:hover,
.gallery-controls button:focus-visible,
.menu-toggle:hover,
.menu-toggle:focus-visible{
  filter:brightness(1.2);
  transform:scale(1.08);
}
.screenshot-thumb:hover,
.screenshot-thumb:focus-visible{
  filter:brightness(1.12) saturate(1.08);
  transform:translateY(-4px) scale(1.035);
}
.friend-links a:hover,
.friend-links a:focus-visible{
  filter:brightness(1.12);
  transform:translateY(-3px) scale(1.035);
}

/* Images: subtle zoom and brightness lift. */
.hero-art img,
.intro-visual img,
.content-image-strip img,
.guide-visual img,
.feature-banner img,
.screenshot-preview img,
.screenshot-thumb img{
  transition:transform .3s ease,filter .3s ease,opacity .3s ease;
  transform-origin:center;
}
.hero-art:hover img,
.intro-visual:hover img,
.content-image-strip:hover img,
.guide-visual:hover img,
.feature-banner:hover img,
.screenshot-preview:hover img{
  transform:scale(1.035);
  filter:brightness(1.08) saturate(1.05);
}
.screenshot-thumb:hover img,
.screenshot-thumb:focus-visible img{
  transform:scale(1.06);
  filter:brightness(1.1) saturate(1.08);
}
.intro-visual,
.guide-visual,
.feature-banner,
.screenshot-preview,
.screenshot-thumb{
  overflow:hidden;
}

/* Main navigation: underline slides out from left to right. */
.primary-nav a:not(.nav-cta){
  position:relative;
  padding-bottom:.35rem;
  transition:color .3s ease;
}
.primary-nav a .icon{
  transition:color .3s ease,transform .3s ease;
}
.primary-nav a:not(.nav-cta)::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:linear-gradient(90deg,var(--red),var(--cyan));
  box-shadow:0 0 9px rgba(0,255,204,.45);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .3s ease;
}
.primary-nav a:not(.nav-cta):hover::after,
.primary-nav a:not(.nav-cta):focus-visible::after,
.primary-nav a:not(.nav-cta).is-active::after{
  transform:scaleX(1);
}
.primary-nav a:not(.nav-cta):focus-visible{
  outline:none;
  color:var(--fog);
}

/* Keep touch layouts stable; hover-capable devices receive full effects. */
@media(hover:none){
  .content-card:hover,
  .feature-points>div:hover,
  .timeline article:hover,
  .guide-list details:hover,
  .faq-grid details:hover,
  .button:hover,
  .primary-nav .nav-cta:hover,
  .floating-detail:hover,
  .screenshot-thumb:hover,
  .friend-links a:hover{
    transform:none;
    filter:none;
  }
  .hero-art:hover img,
  .intro-visual:hover img,
  .content-image-strip:hover img,
  .guide-visual:hover img,
  .feature-banner:hover img,
  .screenshot-preview:hover img,
  .screenshot-thumb:hover img{
    transform:none;
    filter:none;
  }
}
@media(prefers-reduced-motion:reduce){
  .content-card,
  .feature-points>div,
  .timeline article,
  .guide-list details,
  .faq-grid details,
  .button,
  .primary-nav a,
  .floating-detail,
  .gallery-controls button,
  .screenshot-thumb,
  .menu-toggle,
  .friend-links a,
  .hero-art img,
  .intro-visual img,
  .content-image-strip img,
  .guide-visual img,
  .feature-banner img,
  .screenshot-preview img{
    transition:none!important;
  }
}

/* =========================================================
   Strategy guide grid and category filters
   ========================================================= */
.guide-filters{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  margin-bottom:.8rem;
  padding:1rem;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(27,30,41,.52);
}
.guide-filter{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  min-height:2.55rem;
  padding:.6rem 1.05rem;
  border:1px solid rgba(234,236,239,.16);
  border-radius:999px;
  background:rgba(234,236,239,.055);
  color:var(--muted);
  font:600 .78rem/1 "Noto Sans SC",system-ui,sans-serif;
  cursor:pointer;
  transition:
    transform .3s ease,
    color .3s ease,
    background-color .3s ease,
    border-color .3s ease,
    box-shadow .3s ease,
    filter .3s ease;
}
.guide-filter .icon{
  width:1rem;
  height:1rem;
  color:var(--cyan);
  transition:color .3s ease,transform .3s ease;
}
.guide-filter:hover,
.guide-filter:focus-visible{
  outline:none;
  color:var(--fog);
  border-color:rgba(0,255,204,.72);
  background:rgba(0,255,204,.09);
  transform:translateY(-2px) scale(1.035);
  box-shadow:0 0 18px rgba(0,255,204,.13);
}
.guide-filter:hover .icon,
.guide-filter:focus-visible .icon{
  color:var(--red);
  transform:scale(1.08);
}
.guide-filter.is-active{
  border-color:var(--red);
  background:var(--red);
  color:var(--ink);
  box-shadow:4px 4px 0 rgba(0,255,204,.58);
}
.guide-filter.is-active .icon{
  color:var(--ink);
}
.guide-result{
  margin:0 0 1.25rem;
  color:var(--muted);
  font:500 .68rem/1.5 "JetBrains Mono",monospace;
  letter-spacing:.05em;
}
.guide-card-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.35rem;
}
.guide-card{
  position:relative;
  display:flex;
  min-width:0;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:12px;
  background:linear-gradient(145deg,rgba(54,59,75,.78),rgba(27,30,41,.94));
  box-shadow:0 10px 25px rgba(0,0,0,.13);
  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease,
    background-color .3s ease;
}
.guide-card[hidden]{
  display:none;
}
.guide-card:hover{
  z-index:2;
  transform:translateY(-9px);
  border-color:rgba(0,255,204,.72);
  box-shadow:
    0 16px 34px rgba(0,0,0,.27),
    0 0 0 1px rgba(0,255,204,.2),
    0 0 26px rgba(0,255,204,.19);
}
.guide-card-cover{
  position:relative;
  aspect-ratio:16/9;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  background:#171a23;
}
.guide-card-cover::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,transparent 60%,rgba(27,30,41,.42));
  transition:background-color .3s ease;
}
.guide-card-cover img{
  display:block;
  width:100%;
  height:100%!important;
  object-fit:contain!important;
  object-position:center;
  transition:transform .3s ease,filter .3s ease;
}
.guide-card:hover .guide-card-cover img{
  transform:scale(1.055);
  filter:brightness(1.1) saturate(1.08);
}
.guide-card-body{
  display:flex;
  flex:1;
  flex-direction:column;
  align-items:flex-start;
  padding:1.25rem 1.25rem 1.15rem;
}
.guide-tag{
  display:inline-flex;
  align-items:center;
  min-height:1.65rem;
  padding:.25rem .62rem;
  border:1px solid rgba(0,255,204,.45);
  border-radius:999px;
  background:rgba(0,255,204,.08);
  color:var(--cyan);
  font:600 .62rem/1 "JetBrains Mono",monospace;
  letter-spacing:.08em;
}
.guide-tag.tag-advanced{
  border-color:rgba(166,140,255,.55);
  background:rgba(166,140,255,.1);
  color:#c1b2ff;
}
.guide-tag.tag-pvp{
  border-color:rgba(255,0,85,.6);
  background:rgba(255,0,85,.1);
  color:#ff6b9d;
}
.guide-tag.tag-dungeon{
  border-color:rgba(255,195,85,.55);
  background:rgba(255,195,85,.09);
  color:#ffd27d;
}
.guide-card h3{
  margin:.8rem 0 .55rem;
  color:var(--fog);
  font-size:1.08rem;
  line-height:1.45;
  transition:color .3s ease;
}
.guide-card:hover h3{
  color:var(--cyan);
}
.guide-card p{
  margin:0 0 1.15rem;
  color:var(--muted);
  font-size:.83rem;
  line-height:1.8;
}
.guide-views{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  margin-top:auto;
  color:#858b99;
  font:500 .65rem/1 "JetBrains Mono",monospace;
}
.guide-views .icon{
  width:.9rem;
  height:.9rem;
  color:var(--red);
}
@media(max-width:980px){
  .guide-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .guide-filters{gap:.55rem;padding:.8rem}
  .guide-filter{flex:1 1 calc(33.333% - .55rem);padding:.6rem .65rem}
  .guide-card-grid{grid-template-columns:1fr;gap:1rem}
  .guide-card-body{padding:1.1rem}
}
@media(hover:none){
  .guide-filter:hover,
  .guide-card:hover{
    transform:none;
    filter:none;
  }
  .guide-card:hover .guide-card-cover img{
    transform:none;
    filter:none;
  }
}
@media(prefers-reduced-motion:reduce){
  .guide-filter,
  .guide-filter .icon,
  .guide-card,
  .guide-card-cover img,
  .guide-card h3{
    transition:none!important;
  }
}

/* =========================================================
   Unified corner radius system
   Modules/cards: 16px | Buttons: pill | Images: 12px | Tags: 4px
   ========================================================= */

/* Cards and content modules — 16px. */
.hero-art,
.intro-visual,
.content-card,
.content-image-strip,
.guide-filters,
.guide-card,
.feature-banner,
.feature-points,
.feature-points>div,
.timeline,
.timeline article,
.screenshot-viewer,
.screenshot-preview,
.screenshot-thumbnails,
.faq-grid,
.faq-grid details,
.friend-links,
.friend-links-inner{
  border-radius:16px;
}

/* Text/action buttons — full pill shape. */
.button,
.primary-nav .nav-cta,
.floating-detail,
.guide-filter,
.friend-links a,
.menu-toggle{
  border-radius:999px;
}

/* Icon-only controls — circular. */
.gallery-controls button{
  border-radius:50%;
}

/* Image-selection buttons follow the image radius, not the pill radius. */
.screenshot-thumb{
  border-radius:12px;
}

/* All visible content images — 12px. */
.brand img,
.hero-art img,
.intro-visual img,
.content-image-strip img,
.guide-visual img,
.guide-card-cover,
.guide-card-cover img,
.feature-banner img,
.gallery-slide img,
.screenshot-preview img,
.screenshot-thumb img{
  border-radius:12px;
}

/* Small labels and status tags — 4px. */
.guide-tag,
.guide-stamp,
.card-no,
.art-caption span,
.screenshot-preview figcaption span{
  border-radius:4px;
}

/* Compact heading scale. */
.hero h1{
  font-size:clamp(3rem,7vw,6.2rem);
}
.section-heading h2{
  font-size:clamp(1.7rem,3.6vw,3rem);
}
@media(max-width:760px){
  .hero h1{
    font-size:clamp(3rem,14vw,5rem);
  }
}

/* Capsule CTA buttons: remove the rectangular offset-shadow appearance. */
.button-primary,
.button-quiet,
.primary-nav .nav-cta,
.floating-detail{
  border-radius:9999px!important;
  background-clip:padding-box;
}
.button-primary{
  box-shadow:
    0 0 0 2px rgba(0,255,204,.5),
    0 8px 24px rgba(0,255,204,.14);
}
.primary-nav .nav-cta{
  box-shadow:
    0 0 0 2px rgba(0,255,204,.56),
    0 7px 22px rgba(0,255,204,.14);
}
.floating-detail{
  box-shadow:
    0 0 0 2px rgba(0,255,204,.62),
    0 12px 30px rgba(0,0,0,.3),
    0 0 24px rgba(0,255,204,.16);
}
.button-primary:hover,
.button-primary:focus-visible{
  box-shadow:
    0 0 0 2px rgba(0,255,204,.72),
    0 10px 28px rgba(0,255,204,.2);
}
.primary-nav .nav-cta:hover,
.primary-nav .nav-cta:focus-visible{
  box-shadow:
    0 0 0 2px rgba(0,255,204,.76),
    0 9px 26px rgba(0,255,204,.2);
}
.floating-detail:hover,
.floating-detail:focus-visible{
  box-shadow:
    0 0 0 2px rgba(0,255,204,.82),
    0 15px 35px rgba(0,0,0,.35),
    0 0 30px rgba(0,255,204,.23);
}