*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-color:#7B2FFF #0A0A10}
body{
  min-height:100vh;
  padding:var(--topline-h) var(--rail-w) 0 var(--nav-w);
  background:
    radial-gradient(circle at 88% 12%,rgba(123,47,255,.18),transparent 32rem),
    radial-gradient(circle at 8% 68%,rgba(0,229,255,.08),transparent 28rem),
    linear-gradient(180deg,#0B0B14 0%,#0A0A10 100%);
  color:var(--text-body);
  font-family:var(--font-body);
  line-height:1.8;
  overflow-x:hidden;
}
body.nav-lock{overflow:hidden}
main{display:block;min-height:60vh}
#main-content{scroll-margin-top:80px}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:rgba(123,47,255,.6);color:#fff}
:focus-visible{outline:2px solid var(--accent-cyan);outline-offset:3px;border-radius:4px}

:root{
  --bg-deep:#0A0A10;
  --bg-elevated:#12121D;
  --surface-glass:rgba(18,18,35,.8);
  --primary-violet:#7B2FFF;
  --primary-bright:#A855F7;
  --accent-cyan:#00E5FF;
  --text-title:#FFFFFF;
  --text-body:#E0E0FF;
  --text-muted:#8E8EB8;
  --gradient-neon:linear-gradient(135deg,#7B2FFF 0%,#00E5FF 100%);
  --font-headline:'Noto Sans SC','Microsoft YaHei',system-ui,sans-serif;
  --font-body:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --nav-w:280px;
  --rail-w:88px;
  --topline-h:44px;
  --topline-h-mobile:52px;
  --radius-xl:40px;
  --radius-lg:28px;
  --radius-md:20px;
  --shadow-glow:0 20px 60px rgba(0,0,0,.45),0 0 40px rgba(123,47,255,.16);
  --ease-out:cubic-bezier(.22,1,.36,1);
}

.skip-link{
  position:fixed;
  top:0;left:var(--nav-w);
  z-index:2000;
  padding:10px 20px;
  background:var(--primary-violet);
  color:#fff;
  font-size:14px;
  border-radius:0 0 20px 0;
  text-decoration:none;
  transform:translateY(-130%);
  transition:transform .3s var(--ease-out);
}
.skip-link:focus{transform:translateY(0)}

.site-header{
  position:fixed;
  inset:0;
  z-index:1000;
  pointer-events:none;
}

.header-topline{
  position:fixed;
  top:0;left:var(--nav-w);right:var(--rail-w);
  height:var(--topline-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:0 24px;
  background:rgba(10,10,16,.72);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.05);
  color:var(--text-muted);
  font-size:12px;
  letter-spacing:.04em;
  pointer-events:auto;
  z-index:1001;
}
.topline-icp{font-weight:600;color:var(--text-muted)}
.topline-icp::before{content:"◈ ";color:var(--primary-bright)}
.topline-service{color:var(--text-muted)}
.topline-service::before{content:"●";color:var(--accent-cyan);margin-right:6px;font-size:10px;vertical-align:middle}

.header-rail-left{
  position:fixed;
  top:0;left:0;bottom:0;
  width:var(--nav-w);
  z-index:1002;
  display:flex;
  flex-direction:column;
  padding:28px 16px 24px;
  pointer-events:auto;
  background:
    linear-gradient(180deg,rgba(10,10,16,.96),rgba(18,18,29,.94)),
    radial-gradient(circle at 20% 0%,rgba(123,47,255,.22),transparent 40%);
  border-right:1px solid rgba(123,47,255,.16);
  box-shadow:12px 0 40px rgba(0,0,0,.2);
  transition:transform .45s var(--ease-out);
}

.header-rail-right{
  position:fixed;
  top:0;right:0;bottom:0;
  width:var(--rail-w);
  z-index:1000;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:20px;
  pointer-events:auto;
  background:linear-gradient(180deg,rgba(10,10,16,.88),rgba(18,18,29,.82));
  border-left:1px solid rgba(0,229,255,.14);
}
.rail-pixel{
  position:absolute;
  bottom:26px;
  font-size:24px;
  color:rgba(0,229,255,.25);
  letter-spacing:-.2em;
  pointer-events:none;
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
  padding:4px 6px 28px;
  text-decoration:none;
}
.brand-mark{
  position:relative;
  width:48px;height:48px;
  flex:none;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:16px;
  background:var(--gradient-neon);
  box-shadow:0 0 28px rgba(123,47,255,.4);
}
.brand-mark::before{
  content:"◆";
  position:relative;
  z-index:2;
  font-size:18px;
  color:#0A0A10;
  line-height:1;
}
.brand-mark::after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.35);
}
.brand-mark--sm{
  width:42px;height:42px;
  border-radius:14px;
}
.brand-mark--sm::after{
  inset:3px;
  border-radius:11px;
}
.brand-copy{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.brand-name{
  color:var(--text-title);
  font-family:var(--font-headline);
  font-size:20px;
  font-weight:900;
  letter-spacing:.02em;
  line-height:1.1;
  white-space:nowrap;
}
.brand-sub{
  margin-top:4px;
  color:var(--text-muted);
  font-size:10px;
  letter-spacing:.08em;
  line-height:1.3;
  white-space:nowrap;
}

.site-nav{
  margin-top:8px;
  flex:1;
}
.nav-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.nav-link{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  padding:13px 16px;
  border-radius:999px;
  color:var(--text-body);
  font-size:15px;
  line-height:1;
  text-decoration:none;
  transition:color .3s,background .3s,transform .3s,box-shadow .3s;
}
.nav-link::before{
  content:"";
  width:8px;height:8px;
  border-radius:50%;
  flex:none;
  background:var(--text-muted);
  transition:background .3s,box-shadow .3s;
}
.nav-link:hover{
  color:#fff;
  background:rgba(123,47,255,.14);
  transform:translateX(6px);
}
.nav-link:hover::before{
  background:var(--accent-cyan);
  box-shadow:0 0 12px var(--accent-cyan);
}
.nav-link[aria-current="page"]{
  color:#fff;
  background:linear-gradient(90deg,rgba(123,47,255,.28),rgba(0,229,255,.06));
  box-shadow:inset 0 0 0 1px rgba(123,47,255,.18);
}
.nav-link[aria-current="page"]::before{
  background:var(--accent-cyan);
  box-shadow:0 0 14px var(--accent-cyan);
}

.rail-meta{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:18px 6px 6px;
  border-top:1px solid rgba(255,255,255,.06);
}
.rail-status{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--text-muted);
  font-size:12px;
}
.status-dot{
  width:8px;height:8px;
  border-radius:50%;
  background:var(--accent-cyan);
  box-shadow:0 0 10px var(--accent-cyan);
  animation:statusPulse 2.4s infinite;
}
@keyframes statusPulse{
  0%,100%{opacity:1;box-shadow:0 0 8px rgba(0,229,255,.6)}
  50%{opacity:.5;box-shadow:0 0 18px rgba(0,229,255,.9)}
}

.frame-action{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:10px 6px;
  width:72px;
  border-radius:24px;
  color:var(--text-muted);
  text-decoration:none;
  transition:color .3s,transform .3s;
}
.frame-action-icon{
  width:42px;height:42px;
  display:grid;
  place-items:center;
  font-size:18px;
  border-radius:16px;
  color:#fff;
  background:linear-gradient(135deg,rgba(123,47,255,.35),rgba(0,229,255,.12));
  border:1px solid rgba(255,255,255,.08);
  transition:box-shadow .3s,border-color .3s,background .3s;
}
.frame-action:hover{
  color:#fff;
  transform:translateY(-3px);
}
.frame-action:hover .frame-action-icon{
  border-color:rgba(0,229,255,.5);
  box-shadow:0 0 24px rgba(123,47,255,.4);
}
.frame-action span:last-child{font-size:12px;line-height:1}

.nav-toggle{
  position:fixed;
  top:10px;right:16px;
  z-index:1100;
  display:none;
  align-items:center;
  gap:8px;
  padding:9px 16px;
  border-radius:999px;
  background:rgba(18,18,29,.92);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  font-size:14px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.nav-toggle-box{
  position:relative;
  width:22px;height:14px;
}
.nav-toggle-box::before,
.nav-toggle-box::after,
.nav-toggle-box span{
  content:"";
  position:absolute;
  left:0;
  width:100%;
  height:2px;
  border-radius:2px;
  background:currentColor;
  transition:transform .3s var(--ease-out),top .3s var(--ease-out),opacity .2s;
}
.nav-toggle-box::before{top:0}
.nav-toggle-box span{top:6px}
.nav-toggle-box::after{top:12px}
.nav-toggle[aria-expanded="true"] .nav-toggle-box::before{top:6px;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-box span{opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-box::after{top:6px;transform:rotate(-45deg)}

.scroll-progress{
  position:fixed;
  top:0;left:var(--nav-w);right:var(--rail-w);
  height:2px;
  z-index:1200;
  pointer-events:none;
}
.scroll-progress::after{
  content:"";
  display:block;
  height:100%;
  width:var(--progress,0%);
  background:linear-gradient(90deg,var(--primary-violet),var(--accent-cyan));
  box-shadow:0 0 12px rgba(0,229,255,.55);
}

.container{
  width:min(1180px,100% - 48px);
  margin-inline:auto;
}
.page-section{
  padding:clamp(48px,8vw,104px) 0;
}
.section-head{
  display:grid;
  gap:10px;
  margin-bottom:32px;
}
.section-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:max-content;
  padding:6px 14px;
  border-radius:999px;
  background:rgba(123,47,255,.14);
  border:1px solid rgba(123,47,255,.25);
  color:var(--primary-bright);
  font-size:12px;
  letter-spacing:.16em;
}
.section-title{
  color:var(--text-title);
  font-family:var(--font-headline);
  font-size:clamp(1.9rem,4.5vw,3.2rem);
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1.12;
}
.section-desc{
  max-width:72ch;
  color:var(--text-muted);
  font-size:16px;
}

.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px;
}
.surface-card{
  padding:26px;
  border-radius:var(--radius-lg);
  background:var(--surface-glass);
  border:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 18px 40px rgba(0,0,0,.18);
  transition:transform .35s var(--ease-out),border-color .35s,box-shadow .35s;
}
.surface-card:hover{
  transform:translateY(-5px);
  border-color:rgba(123,47,255,.35);
  box-shadow:var(--shadow-glow);
}
.surface-card h3,
.surface-card h4{
  margin-bottom:10px;
  color:var(--text-title);
  font-family:var(--font-headline);
  font-weight:900;
  letter-spacing:-.01em;
}
.surface-card p{color:var(--text-body);font-size:15px}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 24px;
  border-radius:999px;
  border:0;
  text-decoration:none;
  font-family:var(--font-body);
  font-size:15px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),background .3s,border-color .3s;
}
.btn-primary{
  background:var(--gradient-neon);
  color:#fff;
  box-shadow:0 12px 32px rgba(123,47,255,.28),0 0 0 0 rgba(123,47,255,.3);
}
.btn-primary:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 40px rgba(123,47,255,.4),0 0 20px rgba(0,229,255,.25);
}
.btn-primary:active{
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(123,47,255,.35),0 0 30px rgba(123,47,255,.5);
}
.btn-ghost{
  background:rgba(255,255,255,.04);
  color:var(--text-title);
  border:1px solid rgba(255,255,255,.14);
}
.btn-ghost:hover{
  background:rgba(123,47,255,.1);
  border-color:var(--primary-bright);
  color:#fff;
}
.btn-sm{padding:10px 18px;font-size:13px}

.tag{
  display:inline-flex;
  align-items:center;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(123,47,255,.12);
  border:1px solid rgba(123,47,255,.22);
  color:var(--primary-bright);
  font-size:12px;
  line-height:1;
  white-space:nowrap;
}
.pixel-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:12px;
  background:rgba(0,229,255,.08);
  border:1px solid rgba(0,229,255,.18);
  color:var(--accent-cyan);
  font-size:12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}

.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding:18px 0 12px;
  color:var(--text-muted);
  font-size:14px;
}
.breadcrumb a{
  color:var(--text-muted);
  text-decoration:none;
  transition:color .2s;
}
.breadcrumb a:hover{color:#fff}
.breadcrumb li{list-style:none;display:flex;align-items:center;gap:8px}
.breadcrumb li+li::before{content:"/";color:rgba(255,255,255,.18)}
.breadcrumb [aria-current="page"]{color:var(--primary-bright)}

.prose{
  max-width:72ch;
  color:var(--text-body);
  font-size:16px;
}
.prose h2,.prose h3{
  margin:1.8em 0 .6em;
  color:var(--text-title);
  font-family:var(--font-headline);
  font-weight:900;
  line-height:1.2;
}
.prose p{margin-bottom:1.25em}
.prose a{
  color:var(--primary-bright);
  text-decoration:none;
  border-bottom:1px solid rgba(123,47,255,.4);
}
.prose ul,.prose ol{padding-left:1.3em;margin-bottom:1.25em}
.prose li{margin-bottom:.4em}

.image-frame{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg,rgba(123,47,255,.18),rgba(0,229,255,.08)),var(--bg-elevated);
  border:1px solid rgba(255,255,255,.08);
}
.image-frame::before{
  content:"GAME VIEW";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:var(--text-muted);
  font-size:12px;
  letter-spacing:.2em;
  z-index:0;
}
.image-frame img{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:cover;
}
.image-frame--wide{aspect-ratio:16/9}
.image-frame--portrait{aspect-ratio:3/4}
.image-frame--square{aspect-ratio:1/1}

.divider-glow{
  display:block;
  height:1px;
  border:0;
  margin:clamp(48px,8vw,96px) 0;
  background:linear-gradient(90deg,transparent,var(--primary-violet),var(--accent-cyan),transparent);
}

.site-footer{
  position:relative;
  margin-top:96px;
  padding:64px 0 0;
  background:
    linear-gradient(180deg,rgba(13,13,22,.95),#06060B 40%),
    radial-gradient(circle at 30% 0%,rgba(123,47,255,.12),transparent 30rem);
}
.site-footer::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(123,47,255,.7),rgba(0,229,255,.6),transparent);
}
.footer-glow{
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  pointer-events:none;
}
.footer-inner{
  width:min(1180px,100% - 48px);
  margin:0 auto;
  display:grid;
  grid-template-columns:1.5fr .8fr .9fr 1.1fr;
  gap:clamp(28px,5vw,56px);
}
.footer-panel{
  min-width:0;
}
.footer-logo{
  display:inline-flex;
  align-items:center;
  gap:12px;
  color:var(--text-title);
  font-family:var(--font-headline);
  font-size:20px;
  font-weight:900;
  text-decoration:none;
}
.footer-trust{
  margin-top:16px;
  color:var(--text-muted);
  font-size:14px;
  max-width:34em;
  line-height:1.9;
}
.footer-status{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:18px;
  color:var(--text-muted);
  font-size:13px;
}
.footer-title{
  margin-bottom:18px;
  color:var(--text-title);
  font-family:var(--font-headline);
  font-size:13px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.footer-panel ul{
  list-style:none;
}
.footer-panel li+li{
  margin-top:6px;
}
.footer-panel a{
  color:var(--text-muted);
  font-size:14px;
  text-decoration:none;
  transition:color .3s,padding-left .3s,text-shadow .3s;
}
.footer-panel a:hover{
  color:#fff;
  padding-left:6px;
  text-shadow:0 0 12px rgba(123,47,255,.45);
}
.footer-contact p{
  display:grid;
  gap:2px;
  margin-bottom:14px;
}
.meta-label{
  color:var(--text-muted);
  font-size:11px;
  letter-spacing:.12em;
  opacity:.8;
}
.meta-value{
  color:var(--text-body);
  font-size:14px;
  line-height:1.6;
}
.footer-contact-note{
  margin-top:8px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.06);
  color:var(--text-muted);
  font-size:12px;
}
.footer-bottom{
  width:min(1180px,100% - 48px);
  margin:56px auto 0;
  padding:24px 0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-top:1px solid rgba(255,255,255,.07);
  color:var(--text-muted);
  font-size:13px;
}
.footer-bottom p{margin:0}

@media (max-width:1023px){
  :root{
    --rail-w:0px;
  }
  body{
    padding:var(--topline-h-mobile) 0 0;
  }
  .skip-link{
    left:0;
  }
  .header-topline{
    left:0;right:0;
    height:var(--topline-h-mobile);
    padding:0 78px 0 16px;
    font-size:11px;
  }
  .header-rail-left{
    top:var(--topline-h-mobile);
    left:0;bottom:0;
    width:min(320px,86vw);
    padding:24px 18px;
    background:rgba(10,10,16,.96);
    box-shadow:20px 0 60px rgba(0,0,0,.35);
    transform:translateX(-105%);
  }
  .header-rail-left[data-open="true"]{
    transform:translateX(0);
    box-shadow:20px 0 60px rgba(0,0,0,.4),0 0 40px rgba(123,47,255,.12);
  }
  .site-nav[data-open="true"]{
    border-color:rgba(123,47,255,.3);
  }
  .header-rail-right{
    display:none;
  }
  .nav-toggle{
    display:flex;
  }
  .brand{
    padding:4px 4px 18px;
  }
  .nav-list{
    gap:4px;
  }
  .nav-link:hover{
    transform:translateX(3px);
  }
  .scroll-progress{
    left:0;right:0;
  }
  .footer-inner{
    grid-template-columns:1fr 1fr;
    gap:40px;
  }
  .footer-brand{
    grid-column:1 / -1;
  }
  .footer-bottom{
    margin-top:40px;
  }
}

@media (max-width:640px){
  .topline-service{
    display:none;
  }
  .header-topline{
    padding-right:70px;
  }
  .footer-inner{
    grid-template-columns:1fr;
    padding:0 20px;
    gap:32px;
  }
  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
    width:min(1180px,100% - 40px);
    padding:20px 0;
  }
  .container{
    width:min(1180px,100% - 32px);
  }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .status-dot{
    animation:none;
  }
  .surface-card:hover,
  .nav-link:hover,
  .frame-action:hover,
  .btn:hover{
    transform:none;
  }
}