:root{
--color-deep:#0A0F24;
--color-night:#121C3D;
--color-green:#39FF88;
--color-orange:#FF6B35;
--color-white:#FFFFFF;
--color-fog:#C7D0E4;
--color-cyan:#00E5FF;
--color-violet:#8E7CFF;
--font-heading:'Inter','Noto Sans SC','PingFang SC',sans-serif;
--font-body:'Noto Sans SC','PingFang SC',sans-serif;
--font-data:'Roboto Mono','SFMono-Regular',Consolas,monospace;
--container-max:1200px;
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:130px}
body{
font-family:var(--font-body);
font-size:15px;
line-height:1.7;
color:var(--color-fog);
background-color:var(--color-deep);
background-image:
radial-gradient(ellipse 80% 40% at 50% -20%,rgba(57,255,136,0.08),transparent 70%),
radial-gradient(rgba(57,255,136,0.03) 1px,transparent 1px);
background-size:auto,24px 24px;
-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
font-family:var(--font-heading);
font-weight:800;
color:var(--color-white);
letter-spacing:-0.02em;
line-height:1.2;
margin:0 0 0.4em;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:rgba(57,255,136,0.25);color:var(--color-white)}
:focus-visible{outline:2px solid var(--color-green);outline-offset:3px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--color-deep)}
::-webkit-scrollbar-thumb{background:rgba(57,255,136,0.25);border-radius:5px;border:2px solid var(--color-deep)}
#main-content{
min-height:50vh;
padding-top:120px;
position:relative;
}
.container{
width:min(calc(100% - 48px),var(--container-max));
margin-inline:auto;
position:relative;
}
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
padding:10px 22px;
border:2px solid transparent;
border-radius:999px;
font-family:var(--font-heading);
font-size:14px;
font-weight:700;
line-height:1.2;
text-decoration:none;
cursor:pointer;
transition:background 0.2s,color 0.2s,box-shadow 0.2s,transform 0.2s,border-color 0.2s;
}
.btn-primary{
background:var(--color-green);
color:var(--color-deep);
}
.btn-primary:hover{
box-shadow:0 0 24px rgba(57,255,136,0.35);
transform:translateY(-1px);
}
.btn-outline{
background:transparent;
border-color:rgba(57,255,136,0.45);
color:var(--color-green);
}
.btn-outline:hover{
background:rgba(57,255,136,0.08);
box-shadow:0 0 16px rgba(57,255,136,0.15);
}
.skip-link{
position:fixed;
top:-120px;
left:16px;
z-index:1200;
padding:10px 20px;
background:var(--color-green);
color:#001a0a;
font-family:var(--font-heading);
font-size:14px;
font-weight:700;
border-radius:999px;
text-decoration:none;
transition:top 0.2s ease;
box-shadow:0 8px 24px rgba(0,0,0,0.4);
}
.skip-link:focus{
top:16px;
}
.site-header{
position:fixed;
top:12px;
left:50%;
transform:translateX(-50%);
z-index:1000;
width:min(calc(100% - 24px),720px);
}
.site-header__inner{
position:relative;
display:flex;
align-items:center;
gap:10px;
padding:8px 8px 8px 18px;
background:rgba(10,15,36,0.82);
-webkit-backdrop-filter:blur(18px);
backdrop-filter:blur(18px);
border:1px solid rgba(57,255,136,0.18);
border-radius:999px;
box-shadow:0 12px 32px rgba(0,0,0,0.42);
}
.site-header__brand{
display:inline-flex;
align-items:center;
gap:10px;
text-decoration:none;
white-space:nowrap;
flex-shrink:0;
}
.site-header__brand-mark{
display:inline-flex;
align-items:center;
font-family:var(--font-heading);
font-size:20px;
font-weight:800;
color:var(--color-white);
letter-spacing:-0.02em;
}
.site-header__brand-mark::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:var(--color-green);
margin-right:8px;
box-shadow:0 0 12px rgba(57,255,136,0.9);
flex-shrink:0;
}
.site-header__slogan{
font-size:12px;
color:var(--color-fog);
padding-left:12px;
border-left:1px solid rgba(199,208,228,0.25);
}
.site-header__nav{
position:absolute;
top:calc(100% + 10px);
left:0;
right:0;
display:none;
flex-direction:column;
gap:4px;
padding:16px;
background:rgba(10,15,36,0.95);
-webkit-backdrop-filter:blur(18px);
backdrop-filter:blur(18px);
border:1px solid rgba(57,255,136,0.18);
border-radius:20px;
box-shadow:0 20px 48px rgba(0,0,0,0.6);
}
.site-header__nav[data-open]{
display:flex;
}
.site-header__nav-link{
display:block;
padding:12px 16px;
border-radius:12px;
font-size:15px;
font-weight:500;
color:var(--color-fog);
text-decoration:none;
transition:background 0.2s,color 0.2s;
}
.site-header__nav-link:hover{
color:var(--color-green);
background:rgba(57,255,136,0.08);
}
.site-header__nav-link[aria-current="page"]{
color:var(--color-deep);
background:var(--color-green);
font-weight:700;
}
.site-header__cta{
display:none;
}
.site-header__nav-cta{
display:flex;
margin-top:8px;
width:100%;
}
.site-header__toggle{
display:inline-flex;
flex-direction:column;
justify-content:center;
align-items:center;
gap:5px;
width:40px;
height:40px;
margin-left:auto;
padding:0;
background:transparent;
border:1px solid rgba(199,208,228,0.16);
border-radius:50%;
cursor:pointer;
flex-shrink:0;
}
.site-header__toggle-bar{
display:block;
width:16px;
height:2px;
background:var(--color-fog);
border-radius:2px;
transition:transform 0.2s,opacity 0.2s,background 0.2s;
}
.site-header__toggle:hover .site-header__toggle-bar{
background:var(--color-green);
}
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(1){
transform:translateY(7px) rotate(45deg);
}
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(2){
opacity:0;
}
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(3){
transform:translateY(-7px) rotate(-45deg);
}
.site-footer{
position:relative;
margin-top:80px;
background:linear-gradient(180deg,rgba(18,28,61,0.4) 0%,var(--color-deep) 40%);
border-top:1px solid rgba(57,255,136,0.14);
}
.site-footer::before{
content:"";
position:absolute;
top:-1px;
left:50%;
transform:translateX(-50%);
width:240px;
height:1px;
background:linear-gradient(90deg,transparent,var(--color-green),transparent);
}
.site-footer__grid{
display:grid;
grid-template-columns:1.6fr 1fr 1fr 1.4fr;
gap:48px 32px;
padding:64px 0 40px;
}
.site-footer__brand-name{
font-family:var(--font-heading);
font-size:28px;
font-weight:800;
color:var(--color-white);
display:flex;
align-items:center;
gap:8px;
}
.site-footer__brand-name::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:var(--color-orange);
box-shadow:0 0 14px rgba(255,107,53,0.8);
}
.site-footer__brand-slogan{
margin-top:4px;
font-size:14px;
font-weight:600;
color:var(--color-green);
}
.site-footer__trust{
margin-top:16px;
font-size:13px;
line-height:1.7;
color:var(--color-fog);
max-width:320px;
border-left:2px solid rgba(57,255,136,0.4);
padding-left:12px;
}
.site-footer__col-title{
font-size:13px;
font-weight:700;
color:var(--color-white);
text-transform:uppercase;
letter-spacing:0.08em;
margin-bottom:18px;
padding-left:12px;
position:relative;
}
.site-footer__col-title::before{
content:"";
position:absolute;
left:0;
top:50%;
transform:translateY(-50%);
width:4px;
height:14px;
background:var(--color-green);
border-radius:2px;
}
.site-footer__links{
display:flex;
flex-direction:column;
gap:10px;
}
.site-footer__link{
font-size:14px;
color:var(--color-fog);
width:fit-content;
transition:color 0.2s,transform 0.2s;
}
.site-footer__link:hover{
color:var(--color-green);
transform:translateX(4px);
}
.site-footer__meta{
font-size:13px;
color:var(--color-fog);
line-height:1.6;
}
.site-footer__bottom{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:12px 24px;
justify-content:space-between;
padding:20px 0 24px;
border-top:1px solid rgba(199,208,228,0.1);
}
.site-footer__copyright{
font-size:13px;
color:var(--color-fog);
}
.site-footer__icp{
font-size:13px;
color:rgba(199,208,228,0.8);
}
[data-year]{
font-family:var(--font-data);
font-variant-numeric:tabular-nums;
}
.back-to-top{
position:fixed;
right:20px;
bottom:20px;
z-index:700;
width:46px;
height:46px;
border-radius:50%;
display:inline-flex;
align-items:center;
justify-content:center;
background:var(--color-night);
border:1px solid rgba(57,255,136,0.35);
color:var(--color-green);
box-shadow:0 8px 20px rgba(0,0,0,0.4);
visibility:hidden;
opacity:0;
pointer-events:none;
transform:translateY(12px);
transition:opacity 0.25s,transform 0.25s,visibility 0.25s,background 0.25s,color 0.25s;
}
.back-to-top.is-visible{
visibility:visible;
opacity:1;
pointer-events:auto;
transform:translateY(0);
}
.back-to-top:hover{
background:var(--color-green);
color:var(--color-deep);
box-shadow:0 0 20px rgba(57,255,136,0.4);
}
.back-to-top__arrow{
display:block;
font-size:18px;
line-height:1;
transform:translateY(-1px);
}
.page-header{
padding-top:48px;
padding-bottom:40px;
border-bottom:1px solid rgba(57,255,136,0.12);
margin-bottom:48px;
position:relative;
}
.page-header::after{
content:"";
position:absolute;
left:0;
bottom:-1px;
width:120px;
height:2px;
background:var(--color-green);
border-radius:2px;
box-shadow:0 0 12px rgba(57,255,136,0.6);
}
.page-header__title{
font-size:clamp(28px,5vw,48px);
}
.page-header__desc{
margin-top:12px;
max-width:560px;
}
.breadcrumbs{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:8px;
font-size:13px;
color:var(--color-fog);
margin-bottom:20px;
}
.breadcrumbs__link{
color:var(--color-fog);
text-decoration:none;
}
.breadcrumbs__link:hover{
color:var(--color-green);
}
.breadcrumbs__sep{
font-family:var(--font-data);
color:rgba(199,208,228,0.35);
}
.breadcrumbs__current{
color:var(--color-green);
font-weight:500;
}
.eyebrow{
display:inline-flex;
align-items:center;
gap:8px;
font-family:var(--font-data);
font-size:12px;
color:var(--color-green);
text-transform:uppercase;
letter-spacing:0.12em;
margin-bottom:12px;
}
.eyebrow::before{
content:"";
width:24px;
height:1px;
background:var(--color-green);
}
.section-title{
font-size:clamp(24px,4vw,36px);
margin:0 0 12px;
}
.section-desc{
font-size:15px;
color:var(--color-fog);
max-width:640px;
line-height:1.7;
margin:0 0 28px;
}
.section{
padding:56px 0;
}
.prose{
max-width:680px;
font-size:15px;
color:var(--color-fog);
line-height:1.8;
}
.prose p{
margin-bottom:1em;
}
.grid{
display:grid;
gap:24px;
}
.grid-2{
grid-template-columns:repeat(2,1fr);
}
.grid-3{
grid-template-columns:repeat(3,1fr);
}
.grid-hero{
grid-template-columns:1.15fr 0.85fr;
}
@media (max-width:900px){
.grid-3{
grid-template-columns:repeat(2,1fr);
}
.grid-hero{
grid-template-columns:1fr 1fr;
}
}
@media (max-width:768px){
.grid-2{
grid-template-columns:1fr;
}
.grid-hero{
grid-template-columns:1fr;
}
}
@media (max-width:600px){
.grid-3{
grid-template-columns:1fr;
}
}
.data-card{
background:linear-gradient(155deg,rgba(18,28,61,0.85) 0%,rgba(10,15,36,0.9) 100%);
border:1px solid rgba(199,208,228,0.1);
border-radius:16px;
padding:24px;
box-shadow:0 8px 28px rgba(0,0,0,0.3);
position:relative;
transition:border-color 0.2s,box-shadow 0.2s,transform 0.2s;
}
.data-card--interactive:hover{
border-color:rgba(57,255,136,0.35);
box-shadow:0 10px 32px rgba(0,0,0,0.4),0 0 24px rgba(57,255,136,0.06);
transform:translateY(-2px);
}
.data-card__value{
font-family:var(--font-data);
font-size:34px;
line-height:1.1;
color:var(--color-white);
font-variant-numeric:tabular-nums;
}
.data-card__value--green{
color:var(--color-green);
}
.data-card__value--orange{
color:var(--color-orange);
}
.data-card__label{
margin-top:6px;
font-size:13px;
color:var(--color-fog);
}
.data-card__meta{
margin-top:12px;
font-family:var(--font-data);
font-size:12px;
color:rgba(199,208,228,0.6);
}
.badge{
display:inline-flex;
align-items:center;
gap:6px;
padding:5px 12px;
border-radius:999px;
font-size:12px;
font-weight:600;
line-height:1.4;
}
.badge--violet{
background:rgba(142,124,255,0.12);
border:1px solid rgba(142,124,255,0.3);
color:var(--color-violet);
}
.badge--green{
background:rgba(57,255,136,0.1);
border:1px solid rgba(57,255,136,0.3);
color:var(--color-green);
}
.badge--orange{
background:rgba(255,107,53,0.1);
border:1px solid rgba(255,107,53,0.3);
color:var(--color-orange);
}
.badge--cyan{
background:rgba(0,229,255,0.1);
border:1px solid rgba(0,229,255,0.3);
color:var(--color-cyan);
}
.image-frame{
position:relative;
overflow:hidden;
border-radius:16px;
border:1px solid rgba(199,208,228,0.12);
background:var(--color-night);
aspect-ratio:16/10;
}
.image-frame--portrait{
aspect-ratio:4/5;
}
.image-frame--wide{
aspect-ratio:21/9;
}
.image-frame__img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform 0.4s ease;
}
.image-frame:hover .image-frame__img{
transform:scale(1.02);
}
.image-frame::before{
content:"";
position:absolute;
inset:0;
z-index:1;
background-image:
linear-gradient(rgba(57,255,136,0.04) 1px,transparent 1px),
linear-gradient(90deg,rgba(57,255,136,0.04) 1px,transparent 1px);
background-size:20px 20px;
pointer-events:none;
}
.image-frame::after{
content:"";
position:absolute;
inset:0;
z-index:2;
background:linear-gradient(135deg,transparent 55%,rgba(57,255,136,0.05));
pointer-events:none;
}
.expand-card{
background:var(--color-night);
border:1px solid rgba(199,208,228,0.1);
border-radius:14px;
overflow:hidden;
transition:border-color 0.2s;
}
.expand-card:hover{
border-color:rgba(57,255,136,0.3);
}
.expand-card__summary{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding:18px 20px;
font-family:var(--font-heading);
font-size:15px;
font-weight:700;
color:var(--color-white);
cursor:pointer;
list-style:none;
}
.expand-card__summary::-webkit-details-marker{
display:none;
}
.expand-card__summary::after{
content:"+";
font-family:var(--font-data);
font-size:20px;
color:var(--color-green);
transition:transform 0.2s;
flex-shrink:0;
}
.expand-card[open] .expand-card__summary::after{
transform:rotate(45deg);
}
.expand-card__content{
padding:0 20px 20px;
font-size:14px;
color:var(--color-fog);
line-height:1.7;
}
.coordinate-index{
display:flex;
flex-wrap:wrap;
gap:10px;
padding:20px;
border:1px solid rgba(199,208,228,0.12);
border-radius:16px;
background:rgba(18,28,61,0.5);
}
.coordinate-index__link{
font-family:var(--font-data);
font-size:13px;
color:var(--color-fog);
text-decoration:none;
padding:6px 14px;
border-radius:999px;
border:1px solid rgba(199,208,228,0.18);
transition:border-color 0.2s,color 0.2s,background 0.2s;
}
.coordinate-index__link:hover{
color:var(--color-green);
border-color:rgba(57,255,136,0.4);
background:rgba(57,255,136,0.06);
}
.route-legend{
display:flex;
flex-wrap:wrap;
gap:20px;
padding-top:16px;
margin-top:24px;
border-top:1px solid rgba(199,208,228,0.1);
font-size:12px;
color:var(--color-fog);
}
.route-legend__item{
display:inline-flex;
align-items:center;
gap:8px;
}
.route-legend__dot{
width:6px;
height:6px;
border-radius:50%;
background:var(--color-green);
box-shadow:0 0 8px rgba(57,255,136,0.7);
}
.route-legend__dot--orange{
background:var(--color-orange);
box-shadow:0 0 8px rgba(255,107,53,0.7);
}
.route-legend__dot--cyan{
background:var(--color-cyan);
box-shadow:0 0 8px rgba(0,229,255,0.7);
}
.route-legend__dot--violet{
background:var(--color-violet);
box-shadow:0 0 8px rgba(142,124,255,0.7);
}
html.js-reveal [data-reveal]{
opacity:0;
transform:translateY(22px);
transition:opacity 0.6s ease,transform 0.6s ease;
}
html.js-reveal [data-reveal].is-revealed{
opacity:1;
transform:none;
}
@media (max-width:480px){
.site-header__slogan{
display:none;
}
.site-header__brand-mark{
font-size:18px;
}
.site-header__brand{
gap:6px;
}
}
@media (min-width:900px){
#main-content{
padding-top:140px;
}
.site-header{
top:20px;
width:min(calc(100% - 32px),var(--container-max));
}
.site-header__inner{
gap:16px;
padding:8px 8px 8px 24px;
}
.site-header__brand{
margin-right:8px;
}
.site-header__nav{
position:static;
display:flex;
flex-direction:row;
align-items:center;
flex:1;
justify-content:center;
gap:2px;
padding:0;
background:transparent;
-webkit-backdrop-filter:none;
backdrop-filter:none;
border:none;
border-radius:0;
box-shadow:none;
}
.site-header__nav-link{
padding:8px 14px;
font-size:14px;
border-radius:999px;
}
.site-header__cta{
display:inline-flex;
}
.site-header__nav-cta{
display:none;
}
.site-header__toggle{
display:none;
}
.site-footer__grid{
padding:64px 0 40px;
}
.section{
padding:88px 0;
}
}
@media (max-width:900px){
.site-footer__grid{
grid-template-columns:1fr 1fr;
gap:40px 24px;
}
}
@media (max-width:560px){
.site-footer__grid{
grid-template-columns:1fr;
gap:32px;
}
}
@media (prefers-reduced-motion:reduce){
html{
scroll-behavior:auto;
}
*,*::before,*::after{
animation-duration:0.01ms !important;
animation-iteration-count:1 !important;
transition-duration:0.01ms !important;
}
html.js-reveal [data-reveal]{
opacity:1;
transform:none;
}
.back-to-top{
transition:none;
}
}