*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--bg:#080d18;
--bg-soft:#0a101e;
--bg-panel:rgba(10,16,30,0.50);
--bg-panel-strong:rgba(10,16,30,0.70);
--text:#ffffff;
--text-secondary:#9ca3af;
--text-muted:#6b7280;
--accent:#00d7a0;
--accent-strong:#00bf8f;
--accent-soft:#33e0b6;
--accent-dim:rgba(0,215,160,0.12);
--accent-border:rgba(0,215,160,0.18);
--glass-bg:rgba(255,255,255,0.024);
--glass-border:rgba(0,215,160,0.18);
--glass-border-soft:rgba(255,255,255,0.08);
--danger:#ef4444;
--danger-dim:rgba(239,68,68,0.16);
--line:rgba(156,163,175,0.16);
--shadow:0 20px 60px rgba(0,0,0,0.35);
--radius-lg:16px;
--radius-md:12px;
--radius-sm:10px;
}
html{scroll-behavior:smooth}
body{
width:100%;
min-height:100vh;
background:
radial-gradient(circle at 12% 14%, rgba(0,215,160,0.12), transparent 28%),
radial-gradient(circle at 88% 18%, rgba(51,224,182,0.08), transparent 24%),
linear-gradient(180deg, #09101d 0%, #080d18 52%, #070b14 100%);
color:var(--text);
font-family:"Segoe UI","Helvetica Neue",Arial,"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
position:relative;
}
body::before{
content:"";
position:fixed;
inset:0;
pointer-events:none;
z-index:-2;
background-image:
linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
background-size:44px 44px;
-webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0));
mask-image:linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0));
}
body::after{
content:"";
position:fixed;
left:0;
right:0;
height:2px;
z-index:-1;
pointer-events:none;
background:linear-gradient(90deg, transparent, rgba(0,215,160,0.72), transparent);
filter:drop-shadow(0 0 10px rgba(0,215,160,0.35));
animation:scanDown 8s ease-in-out infinite;
}
@keyframes scanDown{
0%{top:-4%;opacity:0}
15%{opacity:0.9}
85%{opacity:0.9}
100%{top:104%;opacity:0}
}
a{color:inherit}
.glass,.site-nav,.status-card,.gate-card,.info-card,.country-panel,.member,.tl-card-content,.belief-card,.todo-item{
background:var(--glass-bg);
border:1px solid var(--glass-border);
border-radius:var(--radius-md);
backdrop-filter:blur(12px) saturate(1.3);
-webkit-backdrop-filter:blur(12px) saturate(1.3);
box-shadow:var(--shadow);
}
.eyebrow,.section-kicker{
display:inline-flex;
align-items:center;
gap:.45rem;
font-size:.72rem;
font-weight:600;
letter-spacing:.18em;
text-transform:uppercase;
color:var(--accent-soft);
}
.eyebrow::before,.section-kicker::before{
content:"";
width:18px;
height:1px;
background:var(--accent);
box-shadow:0 0 10px var(--accent);
}
.section-title{
margin-top:.85rem;
font-size:clamp(1.6rem, 3vw, 2.7rem);
font-weight:600;
line-height:1.1;
letter-spacing:-.03em;
}
.section-copy{
margin-top:.8rem;
max-width:680px;
color:var(--text-secondary);
font-size:.95rem;
line-height:1.75;
}
.site-nav{
position:sticky;
top:1rem;
z-index:200;
width:min(1180px, calc(100% - 2rem));
margin:1rem auto 0;
padding:.75rem .9rem;
display:flex;
align-items:center;
justify-content:space-between;
gap:1rem;
border-radius:14px;
}
.nav-brand{
display:flex;
align-items:center;
gap:.75rem;
min-width:0;
text-decoration:none;
}
.nav-mark{
width:34px;
height:34px;
border-radius:10px;
display:-ms-grid;
display:grid;
-ms-grid-column-align:center;
justify-items:center;
-ms-grid-row-align:center;
align-items:center;
color:#06110f;
font-weight:800;
background:linear-gradient(135deg, var(--accent), var(--accent-soft));
box-shadow:0 0 20px rgba(0,215,160,0.25);
flex-shrink:0;
}
.nav-text{display:flex;flex-direction:column;min-width:0}
.nav-title{font-size:.95rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-sub{font-size:.7rem;color:var(--text-secondary);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;justify-content:flex-end}
.nav-link{
padding:.48rem .72rem;
border-radius:999px;
font-size:.78rem;
color:var(--text-secondary);
text-decoration:none;
border:1px solid transparent;
transition:.2s ease;
}
.nav-link:hover,.nav-link.is-active{
color:var(--text);
background:rgba(0,215,160,0.1);
border-color:var(--accent-border);
}
.back-link{
display:inline-flex;
align-items:center;
gap:.4rem;
padding:.55rem .9rem;
font-size:.78rem;
font-weight:600;
color:var(--text-secondary);
text-decoration:none;
border-radius:999px;
background:var(--glass-bg);
border:1px solid var(--glass-border-soft);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
transition:.2s ease;
}
.back-link:hover{
color:var(--text);
border-color:var(--accent-border);
box-shadow:0 0 0 1px rgba(0,215,160,0.08), 0 10px 30px rgba(0,0,0,0.22);
}
.page-shell{width:100%;max-width:1180px;margin:0 auto;padding:2rem 1rem 3rem}
.page-hero{
display:grid;
grid-template-columns:minmax(0, 1.3fr) minmax(280px, .7fr);
gap:1rem;
align-items:stretch;
margin-bottom:1.5rem;
}
.hero-panel{
position:relative;
overflow:hidden;
padding:clamp(1.4rem, 3vw, 2.2rem);
min-height:280px;
border-radius:var(--radius-lg);
background:
linear-gradient(135deg, rgba(0,215,160,0.12), rgba(10,16,30,0.55) 38%, rgba(10,16,30,0.78) 100%),
var(--bg-panel);
border:1px solid var(--glass-border);
backdrop-filter:blur(14px) saturate(1.35);
-webkit-backdrop-filter:blur(14px) saturate(1.35);
box-shadow:var(--shadow);
}
.hero-panel::after{
content:"";
position:absolute;
right:-80px;
top:-80px;
width:240px;
height:240px;
border-radius:50%;
background:radial-gradient(circle, rgba(0,215,160,0.18), transparent 68%);
pointer-events:none;
}
.hero-kicker{display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-soft);font-weight:700}
.hero-kicker::before{content:"";width:24px;height:1px;background:var(--accent)}
.hero-title{margin-top:1rem;font-size:clamp(2rem, 6vw, 4.2rem);font-weight:700;line-height:1.02;letter-spacing:-.05em}
.hero-title em{font-style:normal;color:var(--accent)}
.hero-subtitle{margin-top:1rem;max-width:640px;color:var(--text-secondary);font-size:1rem;line-height:1.75}
.hero-meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.meta-chip{
padding:.45rem .7rem;
border-radius:999px;
background:rgba(255,255,255,0.04);
border:1px solid rgba(255,255,255,0.08);
font-size:.76rem;
color:#d1d5db;
}
.meta-chip strong{color:var(--text);font-weight:700}
.status-card{padding:1.1rem;display:flex;flex-direction:column;justify-content:space-between;gap:1rem}
.status-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.status-title{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary);font-weight:700}
.status-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(0,215,160,0.1),0 0 18px rgba(0,215,160,0.45)}
.cf-display{display:flex;flex-direction:column;gap:.8rem}
.cf-row{display:flex;align-items:center;justify-content:center;gap:.24rem;flex-wrap:wrap}
.cf-block{display:flex;flex-direction:column;align-items:center;min-width:2.45rem;padding:.46rem .25rem;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.05)}
.cf-num{font-size:1.05rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em;line-height:1;color:var(--text)}
.cf-label{margin-top:.28rem;font-size:.48rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.cf-sep{font-size:.92rem;font-weight:300;color:rgba(156,163,175,0.45);line-height:1;align-self:start;margin-top:.58rem}
.cf-row-total{justify-content:space-between;padding:.65rem .8rem;border-radius:12px;background:rgba(0,215,160,0.08);border:1px solid rgba(0,215,160,0.12)}
.cf-total-label{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary);font-weight:700}
.cf-total-num{font-size:1rem;font-weight:800;font-variant-numeric:tabular-nums;color:var(--accent-soft)}
.cf-life-bar{display:flex;align-items:center;gap:.65rem}
.cf-life-bar-track{flex:1;height:6px;border-radius:999px;background:rgba(255,255,255,0.07);overflow:hidden;border:1px solid rgba(255,255,255,0.04)}
.cf-life-bar-fill{height:100%;width:0%;background:linear-gradient(90deg, var(--accent), var(--accent-soft));box-shadow:0 0 16px rgba(0,215,160,0.35);transition:width 1s ease;border-radius:999px}
.cf-life-pct{font-size:.72rem;font-weight:800;font-variant-numeric:tabular-nums;color:var(--accent-soft);min-width:3em;text-align:right}
.section-block{margin-top:1.5rem}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.section-head p{margin-top:.35rem;color:var(--text-secondary);font-size:.9rem}
.gate-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.75rem}
.gate-card{
position:relative;
min-height:118px;
padding:1rem .8rem;
display:flex;
flex-direction:column;
justify-content:space-between;
text-decoration:none;
transition:.25s ease;
overflow:hidden;
}
.gate-card::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg, rgba(0,215,160,0.08), transparent 55%);
opacity:0;
transition:.25s ease;
}
.gate-card:hover{transform:translateY(-4px);border-color:rgba(0,215,160,0.36);box-shadow:0 18px 40px rgba(0,0,0,0.28),0 0 28px rgba(0,215,160,0.1)}
.gate-card:hover::before{opacity:1}
.gate-card[href="#"]{opacity:.62}
.gate-num{position:relative;font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text)}
.gate-hint{position:relative;font-size:.76rem;color:var(--text-secondary);letter-spacing:.06em}
.gate-status{position:relative;justify-self:end;font-size:.66rem;color:var(--accent-soft);letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.info-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}
.info-card{padding:1rem}
.info-label{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary);font-weight:700}
.info-value{margin-top:.55rem;font-size:1.65rem;font-weight:800;line-height:1;letter-spacing:-.04em}
.info-note{margin-top:.42rem;font-size:.78rem;color:var(--text-muted)}
.map-card{
margin-top:1.5rem;
padding:1.15rem;
background:var(--glass-bg);
border:1px solid var(--glass-border);
border-radius:var(--radius-lg);
backdrop-filter:blur(12px) saturate(1.3);
-webkit-backdrop-filter:blur(12px) saturate(1.3);
box-shadow:var(--shadow);
}
.map-header{display:flex;align-items:start;justify-content:space-between;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.map-title{font-size:1.2rem;font-weight:700;letter-spacing:-.02em}
.map-subtitle{margin-top:.32rem;color:var(--text-secondary);font-size:.88rem}
.map-subtitle strong{color:var(--accent-soft);font-weight:800}
.map-badges{display:flex;flex-wrap:wrap;gap:.45rem}
.map-badge{padding:.4rem .62rem;border-radius:999px;font-size:.72rem;color:#d1d5db;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08)}
.map-container{position:relative;overflow:hidden;border-radius:14px;border:1px solid rgba(255,255,255,0.08);background:linear-gradient(180deg, rgba(0,215,160,0.05), rgba(8,13,24,0.6));}
#world-map{width:100%;height:auto;display:block;filter:drop-shadow(0 0 28px rgba(0,215,160,0.08))}
.country{stroke-linejoin:round;transition:fill .2s ease,stroke-width .2s ease,filter .2s ease}
.country.land{fill:#101a2d;stroke:rgba(148,163,184,0.16);stroke-width:.42}
.country.visited{fill:var(--accent);stroke:rgba(148,255,224,0.58);stroke-width:.55;cursor:pointer}
.country.home{fill:var(--danger);stroke:rgba(254,202,202,0.68);stroke-width:.72;cursor:pointer}
#world-map .sphere{fill:rgba(8,13,24,0.72)}
#world-map .graticule{fill:none;stroke:rgba(148,163,184,0.08);stroke-width:.45}
#world-map .borders{fill:none;stroke:rgba(148,163,184,0.22);stroke-width:.35}
.dot-core{transition:transform .2s ease;transform-origin:center;transform-box:fill-box}
.dot-core:hover{transform:scale(1.45)}
.dot-glow{animation:dot-pulse 2.8s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
@keyframes dot-pulse{0%,100%{transform:scale(1);opacity:.45}50%{transform:scale(2.2);opacity:.08}}
.tooltip{position:fixed;pointer-events:none;background:rgba(10,16,30,0.94);backdrop-filter:blur(12px);border:1px solid var(--accent-border);border-radius:10px;padding:.62rem .85rem;font-size:.82rem;color:var(--text);box-shadow:0 14px 40px rgba(0,0,0,.42);opacity:0;transform:translate(-50%,-130%);transition:opacity .15s ease;z-index:250;white-space:nowrap}
.tooltip.visible{opacity:1}
.tooltip-name{font-weight:700}
.tooltip-tag{display:inline-block;margin-top:.24rem;font-size:.68rem;padding:.12rem .48rem;border-radius:999px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.tooltip-tag.home{background:var(--danger-dim);color:#fca5a5}
.tooltip-tag.visited{background:var(--accent-dim);color:var(--accent-soft)}
.country-panel{margin-top:1rem;padding:1rem 1.1rem}
.country-panel h3{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:.9rem}
.country-list{list-style:none;display:flex;flex-wrap:wrap;gap:.48rem}
.country-list li{padding:.42rem .72rem;border-radius:999px;font-size:.78rem;background:rgba(0,215,160,0.08);border:1px solid rgba(0,215,160,0.14);color:#bef9e9;transition:.2s ease;cursor:pointer}
.country-list li:hover{background:rgba(0,215,160,0.16);transform:translateY(-1px)}
.country-list li.home-tag{background:var(--danger-dim);border-color:rgba(239,68,68,0.28);color:#fca5a5}
.country-list li.home-tag:hover{background:rgba(239,68,68,0.22)}
.site-footer{text-align:center;padding:2rem 1rem 3rem;color:var(--text-muted);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase}
@media(max-width:1024px){
.gate-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.info-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:768px){
.site-nav{position:relative;top:auto;margin-top:.8rem;padding:.7rem}
.nav-links{display:none}
.page-shell{padding-top:1.2rem}
.page-hero{grid-template-columns:1fr}
.hero-panel{min-height:auto}
.gate-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.info-grid{grid-template-columns:1fr 1fr}
.cf-block{min-width:2.05rem}
.cf-num{font-size:.94rem}
.cf-label{font-size:.43rem}
.cf-sep{display:none}
.map-card{padding:.9rem}
}
@media(max-width:480px){
.page-shell{width:min(100% - 1.2rem, 1180px)}
.gate-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.gate-card{min-height:104px}
.info-grid{grid-template-columns:1fr}
.hero-meta{gap:.4rem}
.meta-chip{width:100%;justify-content:center}
.cf-row{gap:.18rem}
.cf-block{min-width:1.85rem;padding:.4rem .2rem}
.country-list li,.map-badge{font-size:.72rem}
}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}