:root{
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC",
          "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
  --txt: #f6f1ea;
  --txt-dim: rgba(246,241,234,.82);
  --txt-faint: rgba(246,241,234,.55);
  --glass: rgba(18,13,10,.22);          
  --glass-mid: rgba(18,13,10,.55);
  --glass-strong: rgba(16,12,10,.78);   
  --glass-brd: rgba(255,255,255,.12);
  --radius: 22px;
}

[data-theme="fire"]{
  --accent:#ff7e3f; --accent-2:#ffcf6e; --accent-3:#ff4e2e;
  --glow: rgba(255,130,60,.50);
  --title-a:#ffe4b0; --title-b:#ffa14d; --title-c:#ff5e3a;
  --veil-a: rgba(36,11,4,.68);
  --veil-b: rgba(36,11,4,.30);
  --tint: rgba(255,120,45,.05);
}

[data-theme="leaf"]{
  --accent:#57cf86; --accent-2:#d8f3b6; --accent-3:#2fb98a;
  --glow: rgba(105,225,150,.40);
  --title-a:#effadb; --title-b:#9ce8a8; --title-c:#3fc98f;
  --veil-a: rgba(7,29,17,.68);
  --veil-b: rgba(7,29,17,.30);
  --tint: rgba(90,220,140,.05);
}

[data-theme="mech"]{
  --accent:#f5b045; --accent-2:#bcdcec; --accent-3:#7fa8c4;
  --glow: rgba(255,190,95,.42);
  --title-a:#ffe6bb; --title-b:#f5b045; --title-c:#93bcd6;
  --veil-a: rgba(13,17,23,.72);
  --veil-b: rgba(13,17,23,.32);
  --tint: rgba(170,205,235,.05);
}

*, *::before, *::after{ box-sizing:border-box; }
html{ height:100%; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  min-height:100vh;
  min-height:100dvh;
  display:flex; flex-direction:column;
  font-family:var(--font);
  font-size:16px;
  color:var(--txt);
  background:#0c0a09;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
img{ max-width:100%; }
a{ -webkit-tap-highlight-color:transparent; }
::selection{ background:var(--accent); color:#180b04; }
a:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:8px; }

#loading{
  position:fixed; inset:0; z-index:60;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px;
  background:#0c0a09;
  transition:opacity .5s var(--ease), visibility 0s .5s;
}
#loading.done{ opacity:0; visibility:hidden; pointer-events:none; }
#loading .spin{
  width:46px; height:46px; color:var(--accent);
}
#loading .spin svg{
  display:block; width:100%; height:100%;
  animation:spin 1.6s linear infinite;
}
#loading p{
  margin:0; color:var(--txt-faint);
  font-size:13px; letter-spacing:.25em; text-indent:.25em;
}

#bg{
  position:fixed; inset:-4vmax; z-index:0;
  background-color:#0c0a09;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  transform:scale(1.06);
  transition:opacity 1s var(--ease);
  will-change:transform, opacity;
}

body:not(.js) #bg{
  background-image:linear-gradient(160deg, var(--veil-a), #0c0a09 70%);
}

.veil{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, var(--veil-a) 0%, var(--veil-b) 32%, var(--veil-b) 62%, var(--veil-a) 100%),
    radial-gradient(130% 100% at 50% 42%, transparent 50%, var(--veil-a) 100%),
    linear-gradient(0deg, var(--tint), var(--tint));
}

.glow{
  display:none;
  position:fixed; left:0; top:0; z-index:2;
  width:460px; height:460px; margin:-230px 0 0 -230px;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle, var(--glow) 0%, transparent 62%);
  opacity:.55;
  mix-blend-mode:screen;
  will-change:transform;
}
body.js .glow{ display:block; }
@media (pointer: coarse){ body.js .glow{ display:none; } }
@media (prefers-reduced-motion: reduce){ body.js .glow{ display:none; } }

#fx{ position:fixed; inset:0; z-index:40; pointer-events:none; }

.shell{
  position:relative; z-index:10;
  flex:1 0 auto;
  min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:clamp(18px,4vw,44px);
  padding-top:max(clamp(18px,4vw,44px), env(safe-area-inset-top));
  padding-bottom:calc(clamp(18px,4vw,44px) + 58px);
  pointer-events:none;            
}
.shell > *{ pointer-events:auto; }   

.hero{
  position:relative;
  width:min(640px,100%);
  padding:clamp(28px,5vw,46px) clamp(22px,5vw,52px);
  border-radius:var(--radius);
  text-align:center;
  background:var(--glass);
  border:1px solid var(--glass-brd);
  -webkit-backdrop-filter:blur(4px) saturate(1.15);
  backdrop-filter:blur(4px) saturate(1.15);
  box-shadow:0 14px 36px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06);
  animation:heroIn .9s var(--ease) .05s backwards;
  transition:transform .5s var(--ease), opacity .5s var(--ease), filter .5s var(--ease);
}
body[data-view="article"] .hero{
  transform:scale(.96) translateY(-10px);
  opacity:.38;
  filter:saturate(.75);
}
@keyframes heroIn{ from{ opacity:0; transform:translateY(20px) scale(.985); } to{ opacity:1; transform:none; } }
@keyframes rise{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }
@keyframes fadein{ from{ opacity:0; } to{ opacity:1; } }

.avatar{ width:106px; height:106px; margin:0 auto 18px; position:relative; animation:rise .7s var(--ease) .12s backwards; }
.avatar img{
  display:block; width:100%; height:100%;
  object-fit:cover; border-radius:50%;
  border:3px solid rgba(255,255,255,.85);
  box-shadow:0 0 0 4px rgba(255,255,255,.08), 0 10px 30px rgba(0,0,0,.45);
}
.avatar::before{
  content:""; position:absolute; inset:-7px; border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0 40%, var(--accent) 62%, var(--accent-2) 76%, transparent 92%);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  animation:spin 6s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
[data-theme="fire"] .avatar{ filter:drop-shadow(0 0 18px rgba(255,120,50,.35)); }
[data-theme="leaf"] .avatar{ filter:drop-shadow(0 0 16px rgba(90,220,140,.30)); }
[data-theme="mech"] .avatar{ filter:drop-shadow(0 0 16px rgba(255,190,95,.28)); }

.hero h1{
  margin:0 0 10px;
  font-size:clamp(26px,5.4vw,42px);
  font-weight:800; letter-spacing:.04em; line-height:1.25;
  background:linear-gradient(100deg, var(--title-a), var(--title-b) 45%, var(--title-c));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--accent-2);
  filter:drop-shadow(0 0 22px var(--glow)) drop-shadow(0 1px 10px rgba(0,0,0,.45));
  animation:rise .7s var(--ease) .2s backwards;
}
.hero .tagline{
  margin:0 0 22px;
  color:var(--txt-dim);
  font-size:clamp(15px,2.6vw,17px);
  letter-spacing:.1em;
  text-shadow:0 1px 12px rgba(0,0,0,.6);
  animation:rise .7s var(--ease) .28s backwards;
}
.hero .hero-note{
  margin:3px 0; color:var(--txt-dim);
  font-size:14.5px; letter-spacing:.04em;
  text-shadow:0 1px 10px rgba(0,0,0,.55);
  animation:rise .7s var(--ease) .34s backwards;
}
.hero .hero-note + .hero-note{ animation-delay:.42s; }
.hero .link-label{
  margin:26px 0 0;
  text-align:center;
  font-size:12px; font-weight:600;
  letter-spacing:.24em; text-indent:.24em;
  color:var(--txt-faint);
  animation:rise .7s var(--ease) .38s backwards;
}
.hero .chips + .link-label{ animation-delay:.5s; }
.hero .chips + .link-label + .chips{ animation-delay:.58s; }

.nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; animation:rise .7s var(--ease) .36s backwards; }
.nav a{
  position:relative;
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 22px; border-radius:999px;
  font-size:15px; font-weight:600; letter-spacing:.06em;
  color:var(--txt); text-decoration:none;
  text-shadow:0 1px 8px rgba(0,0,0,.4);
  background:rgba(20,14,10,.20);
  border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  transition:transform .25s var(--spring), box-shadow .25s, border-color .25s, background .25s, color .25s;
}
[data-theme="mech"] .nav a{ border-radius:12px; }
.nav a:hover, .nav a:focus-visible{
  transform:translateY(-3px);
  border-color:var(--accent);
  color:#fff;
  background:rgba(20,14,10,.38);
  box-shadow:0 10px 26px rgba(0,0,0,.35), 0 0 18px var(--glow);
}

.hero .chips{ width:min(430px,100%); margin:20px auto 0; text-align:left; animation:rise .7s var(--ease) .4s backwards; }

.info-list{ width:min(560px,100%); margin:18px auto 0; display:grid; gap:14px; animation:rise .7s var(--ease) .5s backwards; }
.info-card{ padding:18px 22px 20px; border-radius:var(--radius); background:var(--glass-mid); border:1px solid var(--glass-brd); box-shadow:0 14px 36px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06); text-align:left; }
.info-card h2{ margin:0 0 10px; font-size:17px; font-weight:700; letter-spacing:.08em; color:var(--accent-2); }
.info-card p{ margin:6px 0; font-size:14.5px; line-height:1.75; color:var(--txt-dim); text-shadow:0 1px 10px rgba(0,0,0,.5); }
.info-card a{ color:var(--accent-2); text-decoration:none; border-bottom:1px dashed rgba(255,255,255,.28); transition:color .2s, border-color .2s; }
.info-card a:hover, .info-card a:focus-visible{ color:#fff; border-bottom-color:var(--accent); }
.info-card .warn{ color:#ff8282; font-weight:700; text-shadow:0 1px 12px rgba(255,60,60,.3); }

.panel.leaving{
  opacity:0 !important; visibility:hidden !important; pointer-events:none !important;
  transition:none !important;
}
.panel.leaving .card{ transition:none !important; }
.panel{
  position:fixed; inset:0; z-index:30;
  
  background:rgba(8,10,14,.62);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  display:grid; place-items:center;
  padding:clamp(14px,4vw,40px);
  padding-top:max(clamp(14px,4vw,40px), env(safe-area-inset-top));
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .4s var(--ease), visibility 0s .4s;
}
.panel.active{
  opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity .4s var(--ease);
}
.panel .card{
  position:relative;
  width:min(680px,100%);
  max-height:min(78vh,780px);
  max-height:min(78dvh,780px);
  overflow-y:auto; overscroll-behavior:contain;
  padding:clamp(26px,5vw,46px) clamp(22px,5vw,48px);
  border-radius:var(--radius);
  background:var(--glass-strong);
  border:1px solid var(--glass-brd);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 30px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
  transform:translateY(30px) scale(.96);
  transition:transform .45s var(--spring);
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.22) transparent;
}
.panel.active .card{ transform:none; }
.panel .card::-webkit-scrollbar{ width:8px; }
.panel .card::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); border-radius:8px; }

[data-theme="mech"] .panel .card::before{
  content:""; position:absolute; inset:10px; pointer-events:none; border-radius:14px; opacity:.55;
  background:
    linear-gradient(var(--accent),var(--accent)) left 0 top 0/16px 2px,
    linear-gradient(var(--accent),var(--accent)) left 0 top 0/2px 16px,
    linear-gradient(var(--accent),var(--accent)) right 0 top 0/16px 2px,
    linear-gradient(var(--accent),var(--accent)) right 0 top 0/2px 16px,
    linear-gradient(var(--accent),var(--accent)) left 0 bottom 0/16px 2px,
    linear-gradient(var(--accent),var(--accent)) left 0 bottom 0/2px 16px,
    linear-gradient(var(--accent),var(--accent)) right 0 bottom 0/16px 2px,
    linear-gradient(var(--accent),var(--accent)) right 0 bottom 0/2px 16px;
  background-repeat:no-repeat;
}

.close{
  position:absolute; top:14px; right:14px; z-index:2;
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  font-size:17px; line-height:1; text-decoration:none;
  color:var(--txt-dim);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  transition:.25s var(--spring);
}
.close:hover, .close:focus-visible{
  color:#fff; border-color:var(--accent);
  box-shadow:0 0 16px var(--glow);
  transform:rotate(90deg);
}

.panel h2{
  margin:0 0 6px;
  font-size:clamp(22px,4.4vw,30px);
  font-weight:800; letter-spacing:.03em;
  background:linear-gradient(100deg, var(--title-a), var(--title-b) 55%, var(--title-c));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--accent-2);
  padding-right:44px;
}
.panel h2::after{
  content:""; display:block;
  width:64px; height:3px; margin-top:12px; border-radius:3px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2), transparent);
}
.panel h2.sub{ font-size:18px; margin-top:28px; }
.panel p{
  margin:14px 0;
  line-height:1.95;
  font-size:15.5px;
  color:var(--txt-dim);
  word-break:break-word;
}
.panel p a, .hero p a{
  color:var(--accent-2); text-decoration:none;
  border-bottom:1px dashed rgba(255,255,255,.3);
  padding-bottom:1px;
  transition:.2s;
}
.panel p a:hover, .hero p a:hover{
  color:#fff; border-bottom-color:var(--accent);
  text-shadow:0 0 12px var(--glow);
}

.c-hi{ color:#ff9a62; }        
.c-alert{ color:#ff8282; }     
.c-gold{ color:#ffd069; }      
.c-soft{ color:#ffc9b0; }      
.c-sky{ color:#7fd7ff; }       
.c-mint{ color:#8cf7a6; }      
.c-rose{ color:#ffa080; }      

.chips{ display:flex; flex-direction:column; gap:10px; margin:18px 0 6px; }
a.chip{
  --c:var(--accent);
  position:relative;
  display:flex; align-items:center; gap:12px;
  padding:13px 16px; border-radius:14px;
  font-size:15px; font-weight:600;
  color:var(--c); text-decoration:none;
  background:rgba(20,14,10,.30);
  border:1px solid rgba(255,255,255,.12);
  transition:transform .25s var(--spring), border-color .25s, box-shadow .25s, background .25s;
}
a.chip .dot{
  flex:none; width:10px; height:10px; border-radius:50%;
  background:var(--c);
  box-shadow:0 0 12px var(--c);
}
a.chip .ic{
  flex:none; width:20px; text-align:center;
  font-size:17px; line-height:1; color:var(--c);
}
a.chip .arr{ margin-left:auto; color:var(--c); opacity:.75; font-weight:400; transition:transform .25s; }
a.chip:hover, a.chip:focus-visible{
  transform:translateX(6px);
  border-color:var(--c);
  background:rgba(20,14,10,.48);
  box-shadow:0 6px 20px rgba(0,0,0,.3), 0 0 16px -4px var(--c);
}
a.chip:hover .arr{ transform:translate(3px,-3px); }

.footer{
  position:fixed; left:0; right:0; bottom:0; z-index:20;   
  text-align:center;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  color:var(--txt-faint);
  font-size:12.5px; letter-spacing:.05em;
  -webkit-user-select:text; user-select:text;
  pointer-events:none;
  animation:fadein 1.2s var(--ease) .9s backwards;
}
.footer p{ margin:0; text-shadow:0 1px 8px rgba(0,0,0,.5); }
.footer a{
  pointer-events:auto;
  color:var(--txt-dim); text-decoration:none;
  border-bottom:1px dotted rgba(255,255,255,.25);
  transition:color .2s;
}
.footer a:hover{ color:var(--accent-2); }

@media (max-width:640px){
  .hero{ padding:26px 20px; }
  .avatar{ width:92px; height:92px; }
  .nav a{ padding:10px 16px; font-size:14px; }
  .panel .card{ max-height:84vh; max-height:84dvh; padding:24px 20px 28px; }
  a.chip{ font-size:14.5px; padding:12px 14px; }
  .footer{ font-size:11.5px; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001s !important;
    animation-iteration-count:1 !important;
    transition-duration:.001s !important;
  }
}