:root{
  --bg:#0a0a0a;
  --fg:#f2f2f2;
  --dim:#8b8b8b;
  --accent:#e9ff2e;
  --line:rgba(255,255,255,.10);
  --mono:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --sans:"Segoe UI",system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html.splash-lock{overflow:hidden}
body{
  background:var(--bg);color:var(--fg);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  line-height:1.7;
}
a{color:inherit;text-decoration:none}
img{max-width:100%}
::selection{background:var(--accent);color:#000}

/* ---------- shell ---------- */
.site-head{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 32px;
  background:rgba(10,10,10,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{
  font-family:var(--mono);font-weight:700;letter-spacing:.32em;
  font-size:13px;color:var(--accent);
}
.site-head nav{display:flex;gap:22px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--dim)}
.site-head nav a:hover{color:var(--fg)}
main{min-height:60vh}
.site-foot{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:28px 32px;margin-top:80px;
  border-top:1px solid var(--line);
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--dim);
}

/* ---------- hero ---------- */
.hero{padding:96px 32px 56px;border-bottom:1px solid var(--line)}
.hero-tag{font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:var(--dim);margin-bottom:24px}
.hero h1{
  margin:0;
  font-size:clamp(56px,14vw,180px);
  line-height:.86;letter-spacing:-.055em;font-weight:800;
}
.hero-sub{max-width:46ch;color:var(--dim);margin:28px 0 0;font-size:15px}
.hero-status{
  display:inline-flex;align-items:center;gap:8px;margin-top:32px;
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--accent);
}
.hero-status i{width:6px;height:6px;background:var(--accent);border-radius:50%;animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* ---------- list ---------- */
.list{padding:0 32px}
.list-head{
  display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:10px;letter-spacing:.24em;color:var(--dim);
  padding:28px 0 10px;
}
.item{
  display:grid;grid-template-columns:64px 1fr 24px;gap:20px;
  padding:26px 0;border-top:1px solid var(--line);
  align-items:start;
}
.item .num{font-family:var(--mono);font-size:12px;color:var(--dim);padding-top:6px}
.item h2{margin:0 0 8px;font-size:clamp(20px,2.4vw,28px);letter-spacing:-.02em;font-weight:700;transition:color .18s}
.item:hover h2{color:var(--accent)}
.item .excerpt{color:var(--dim);font-size:14px;max-width:62ch}
.item .excerpt p{margin:0}
.item .meta{display:flex;gap:14px;margin-top:12px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--dim)}
.item .arrow{font-size:16px;color:var(--dim);transition:transform .18s,color .18s}
.item:hover .arrow{transform:translate(3px,-3px);color:var(--accent)}

/* ---------- post ---------- */
.post{padding:80px 32px;max-width:820px;margin:0 auto}
.back{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--dim)}
.back:hover{color:var(--accent)}
.post-head{margin:40px 0 56px;padding-bottom:28px;border-bottom:1px solid var(--line)}
.post-head h1{margin:0 0 16px;font-size:clamp(32px,5vw,56px);line-height:1.1;letter-spacing:-.035em}
.post-head .meta{display:flex;gap:16px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--dim)}
.prose{font-size:16px;color:#d8d8d8}
.prose h2{margin:52px 0 16px;font-size:24px;letter-spacing:-.02em;color:var(--fg)}
.prose h3{margin:36px 0 12px;font-size:18px;color:var(--fg)}
.prose p{margin:0 0 20px}
.prose a{color:var(--accent);border-bottom:1px solid rgba(233,255,46,.35)}
.prose code{font-family:var(--mono);font-size:.88em;background:rgba(255,255,255,.07);padding:2px 6px;border-radius:3px}
.prose pre{
  background:#111;border:1px solid var(--line);border-radius:6px;
  padding:18px;overflow:auto;font-size:13px;line-height:1.6;
}
.prose pre code{background:none;padding:0}
.prose blockquote{
  margin:24px 0;padding:4px 0 4px 20px;
  border-left:2px solid var(--accent);color:var(--dim);
}
.prose ul,.prose ol{padding-left:22px;margin:0 0 20px}
.prose li{margin:6px 0}
.prose hr{border:0;border-top:1px solid var(--line);margin:40px 0}
.prose table{border-collapse:collapse;width:100%;font-size:14px;margin:0 0 20px}
.prose th,.prose td{border:1px solid var(--line);padding:8px 12px;text-align:left}

/* ---------- archive ---------- */
.archive{padding:80px 32px;max-width:900px;margin:0 auto}
.page-title{margin:16px 0 48px;font-size:clamp(36px,6vw,64px);letter-spacing:-.04em}
.year{display:grid;grid-template-columns:110px 1fr;gap:24px;padding:18px 0;border-top:1px solid var(--line)}
.year-label{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--accent);padding-top:4px}
.row{display:flex;gap:18px;padding:8px 0;color:#d8d8d8;font-size:15px}
.row time{font-family:var(--mono);font-size:11px;color:var(--dim);padding-top:4px}
.row:hover .row-title{color:var(--accent)}

/* ---------- splash (ported from endfield loading layer) ---------- */
body{font-size:16px}
@font-face{font-family:SansRegular;src:url(../fonts/HarmonyOS_Sans_SC_Regular.woff2) format('woff2');font-display:swap}
@font-face{font-family:SansMedium;src:url(../fonts/HarmonyOS_Sans_SC_Medium.woff2) format('woff2');font-display:swap}

html.splash-lock{overflow:hidden}
.splash{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#141414;color:#fff;overflow:hidden;z-index:100}
.splash-bg{position:absolute;top:0;left:0;width:100%;height:100%;background-image:url(../img/bg.jpg);background-size:cover;background-position:50%;background-repeat:no-repeat;filter:blur(8px);transform:scale(1.06)}
.splash-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;text-align:center}
.splash-word{display:inline-block;font-family:SansMedium,var(--sans);font-size:min(11rem,13vw);line-height:1;letter-spacing:.06em;white-space:nowrap}
.splash-moreDeco{position:absolute;left:50%;top:calc(50% + min(7rem,9vw));transform:translateX(-50%);text-align:center;white-space:nowrap}
.splash-deco{width:8.8125rem;height:4rem;margin:0 auto;background-image:url(../img/deco.svg);background-size:100% 100%;background-repeat:no-repeat;background-position:50%}
.splash-divider{width:min(70rem,86vw);height:2px;margin:1.25rem auto 1rem;background-image:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.1) 50%,rgba(255,255,255,0))}
.splash-slogan{font-family:SansRegular,var(--sans);font-size:min(1.5rem,2.4vw);letter-spacing:.1em}
.splash-triangles{position:absolute;left:-3.375rem;top:1.5rem;width:1.4375rem;height:1.3125rem;background-image:url(../img/triangles.svg);background-size:100% 100%;background-repeat:no-repeat}

.splash-progress{position:absolute;left:0;top:0;width:1.25rem;height:100%}
.splash-bar{position:absolute;top:0;left:0;width:100%;height:0;background-color:#fffa00}
.splash-text{position:absolute;top:0;left:3.125rem;height:0;margin-left:.75rem}
.splash-core{position:absolute;left:0;bottom:1.625rem;color:#fffa00;line-height:1;white-space:nowrap}
.splash-core:before{content:"";display:block;height:1.875rem;width:.5rem;background-color:#fffa00;border-radius:.25rem;margin-bottom:.25rem}
.splash-value{font-family:SansMedium,var(--mono);font-size:4.375rem}
.splash-symbol{font-family:SansRegular,var(--sans);font-size:3.25rem}
.splash-deco2{position:absolute;left:0;top:-.5rem;color:#666;font-size:min(1rem,1.8vw);letter-spacing:.06em}
.splash-deco2:before{content:"";display:block;height:.5rem;width:.25rem;border-left:.5rem solid #666;border-right:.5rem solid #666}

@media (orientation:portrait){
  .splash-triangles{display:none}
  .splash-progress{left:0;top:auto;bottom:17.75rem;width:82.4%;height:2.5rem}
  .splash-bar{width:0;height:100%}
  .splash-text{top:auto;left:0;bottom:-1.75rem}
}

.splash.leaving{transition:opacity 1s 1.4s;opacity:0}
.splash.leaving:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#fffa00;transform-origin:left;transform:scaleX(0);animation:splashWipe .6s cubic-bezier(1,0,.7,1) .5s forwards}
@keyframes splashWipe{0%{transform:scaleX(0)}to{transform:scaleX(1)}}

@media (prefers-reduced-motion:reduce){
  .splash-bar{transition:none}
  .splash.leaving:after{animation-duration:1ms!important}
}
@media (max-width:640px){
  .site-head{padding:14px 20px}
  .site-head nav{gap:14px}
  .hero{padding:64px 20px 40px}
  .list{padding:0 20px}
  .item{grid-template-columns:36px 1fr;gap:14px}
  .item .arrow{display:none}
  .post,.archive{padding:56px 20px}
  .year{grid-template-columns:1fr;gap:6px}
}