@import url('https://fonts.googleapis.com/css2?family=Didact+Gothic&family=Poiret+One&display=swap');

:root{
  --g:#00ff80;
  --b:#0000ff;
  --k:#000000;
  --ink:#eafff6;
  --dim:rgba(234,255,246,.62);
  --line:rgba(0,255,128,.38);
  --mono:ui-monospace,"Courier New",monospace;
  --bar:4.4rem;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  padding-bottom:calc(var(--bar) + 2.6rem);
  background:var(--k);
  color:var(--ink);
  font-family:"Didact Gothic",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.75;
  overflow-x:hidden;
}
h1,h2,h3,.dock-brand,.base-brand a{
  font-family:"Poiret One","Didact Gothic",serif;
  font-weight:400;
}
a{color:var(--g)}
::selection{background:var(--g);color:var(--k)}
:focus-visible{outline:3px solid var(--g);outline-offset:3px}
.dock-nav a,.dock-nav summary,.base-nav a,.rail-nav a{transition:none}

/* ---------- 顶部落幕式首屏 ---------- */
.hero{
  position:relative;
  overflow:hidden;
  min-height:70vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-end;
  text-align:right;
  padding:4rem clamp(1rem,5vw,4rem) 3.4rem;
  border-bottom:3px solid var(--g);
}
.hero::before{
  content:"07";
  position:absolute;
  left:-.07em;
  top:50%;
  transform:translateY(-52%);
  font-family:"Poiret One",serif;
  font-size:clamp(9rem,38vw,26rem);
  line-height:.74;
  letter-spacing:-.05em;
  color:transparent;
  -webkit-text-stroke:2px rgba(0,255,128,.22);
  pointer-events:none;
  user-select:none;
}
.hero::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:10px;
  background:repeating-linear-gradient(90deg,var(--b) 0 28px,transparent 28px 56px);
}
.hero-copy{position:relative;z-index:2;max-width:56rem}
.hero h1{
  margin:0;
  font-size:clamp(2.4rem,8.4vw,6rem);
  line-height:.98;
  letter-spacing:.02em;
  color:#fff;
  text-shadow:6px 6px 0 var(--b);
  word-break:break-word;
}
.lede{
  margin:1.4rem 0 0 auto;
  max-width:40ch;
  padding-right:1rem;
  border-right:4px solid var(--g);
  font-size:1.02rem;
  line-height:1.7;
  color:var(--dim);
}
.hero-deco{
  position:absolute;
  left:clamp(1rem,5vw,4rem);
  bottom:2.4rem;
  width:130px;
  height:130px;
  margin:0;
  border-left:4px solid var(--g);
  border-bottom:4px solid var(--g);
  z-index:2;
}
.hero-deco::before{
  content:"";
  position:absolute;
  left:16px;
  bottom:16px;
  width:54px;
  height:54px;
  border:4px solid var(--b);
}
.hero-deco::after{
  content:"";
  position:absolute;
  left:0;
  bottom:62px;
  width:92px;
  height:4px;
  background:var(--g);
}
.hero-deco span{position:absolute;left:86px;bottom:86px;width:22px;height:22px;background:var(--g)}

/* ---------- 主体网格 ---------- */
.split{
  display:grid;
  grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:clamp(1.4rem,4vw,3.4rem);
  align-items:start;
  max-width:1220px;
  margin:0 auto;
  padding:clamp(2rem,5vw,4rem) clamp(1rem,5vw,4rem) 3rem;
}

/* 左侧栏 */
.rail{
  position:sticky;
  top:1.5rem;
  padding:1.1rem 1rem 1.3rem;
  border:2px solid var(--g);
  background:rgba(0,255,128,.06);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  box-shadow:8px 8px 0 var(--b);
}
.rail-h{
  margin:0 0 .55rem;
  font-family:"Didact Gothic",sans-serif;
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.36em;
  color:var(--g);
}
.rail hr{border:0;border-top:2px solid var(--g);margin:0 0 .8rem}
.rail-nav{display:flex;flex-direction:column}
.rail-nav a{
  display:flex;
  align-items:center;
  gap:.6rem;
  min-height:44px;
  padding:.25rem .2rem;
  color:var(--ink);
  text-decoration:none;
  font-size:.95rem;
  border-bottom:1px dashed rgba(0,255,128,.24);
}
.rail-nav b{
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:400;
  color:var(--g);
  letter-spacing:.04em;
}
.rail-nav a:hover,.rail-nav a.on{background:var(--g);color:var(--k)}
.rail-nav a:hover b,.rail-nav a.on b{color:var(--k)}

/* ---------- 正文 ---------- */
.reader{
  width:100%;
  max-width:74ch;
  counter-reset:part;
}
div[id]{scroll-margin-top:1.5rem;scroll-margin-bottom:6.5rem}
.reader > div{
  position:relative;
  counter-increment:part;
  padding-top:2.2rem;
  margin-top:3rem;
  border-top:2px dashed var(--line);
}
.reader > div:first-child{border-top:0;margin-top:0;padding-top:.3rem}
.reader > div::before{
  content:"0" counter(part);
  display:block;
  font-family:"Poiret One",serif;
  font-size:2.6rem;
  line-height:1;
  color:var(--g);
  text-shadow:3px 3px 0 var(--b);
  margin-bottom:.4rem;
}
.reader h2{
  margin:1rem 0 .5rem;
  padding-left:.65rem;
  border-left:7px solid var(--g);
  font-size:clamp(1.7rem,3.6vw,2.55rem);
  line-height:1.18;
  letter-spacing:.02em;
  color:#fff;
}
.reader h2 + hr{margin:.35rem 0 1.4rem}
.reader hr{border:0;border-top:3px solid var(--b);height:0;margin:1rem 0 1.6rem}
.reader h3{
  position:relative;
  margin:1.8rem 0 .55rem;
  padding-left:1.15rem;
  font-size:1.22rem;
  letter-spacing:.03em;
  color:var(--g);
}
.reader h3::before{
  content:"";
  position:absolute;
  left:0;
  top:.6em;
  width:.62rem;
  height:.62rem;
  background:var(--b);
}
.reader p{margin:.9em 0}
.reader a{
  color:var(--g);
  text-decoration:underline;
  text-decoration-color:var(--b);
  text-decoration-thickness:3px;
  text-underline-offset:4px;
}
.reader a:hover{background:var(--g);color:var(--k);text-decoration-color:var(--g)}
.reader strong{color:var(--g);font-weight:700}
.reader em{color:#fff}
.reader ul,.reader ol{padding-left:1.35rem;margin:.9em 0}
.reader li{margin:.4em 0}
.reader li::marker{color:var(--g)}
.reader blockquote{
  margin:1.6rem 0;
  padding:1.1rem 1.3rem;
  border:2px solid var(--g);
  border-left:9px solid var(--b);
  background:rgba(0,255,128,.07);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:8px 8px 0 rgba(0,255,128,.16);
  font-size:.99rem;
}
.reader blockquote p:last-child{margin-bottom:0}
.reader figure{
  margin:1.7rem 0;
  padding:.8rem;
  border:2px solid var(--g);
  background:rgba(0,255,128,.04);
  box-shadow:6px 6px 0 var(--b);
}
.reader figure img{width:100%}
.reader figcaption{margin-top:.5rem;font-family:var(--mono);font-size:.8rem;color:var(--dim)}
.reader img{display:block;max-width:100%;height:auto;border:2px solid var(--line)}
.reader table{width:100%;border-collapse:collapse;margin:1.4rem 0;font-size:.95rem}
.reader th,.reader td{border:2px solid var(--line);padding:.55rem .7rem;text-align:left;vertical-align:top}
.reader th{background:rgba(0,255,128,.1);color:var(--g)}
.reader code,.reader pre{font-family:var(--mono);font-size:.9rem}
.reader code{background:#111;border:2px solid var(--b);padding:.05em .35em}
.reader pre{background:#111;border:2px solid var(--b);padding:1rem;overflow:auto}
.reader time{font-family:var(--mono);font-size:.82rem;color:var(--dim);letter-spacing:.04em}
.reader aside{
  margin:1.5rem 0;
  padding:1rem 1.2rem;
  border:2px dashed var(--g);
  background:rgba(0,0,255,.14);
  font-size:.95rem;
}

/* ---------- 页脚 ---------- */
.base{
  display:grid;
  grid-template-columns:1.2fr 2fr auto;
  gap:1.5rem;
  align-items:center;
  border-top:3px solid var(--g);
  padding:2rem clamp(1rem,5vw,4rem) 2.4rem;
  background:#000;
}
.base-brand a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:1.35rem;
  letter-spacing:.15em;
  color:var(--g);
  text-decoration:none;
}
.base-nav menu{
  display:flex;
  flex-wrap:wrap;
  gap:0 1.1rem;
  margin:0;
  padding:0;
  list-style:none;
}
.base-nav a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 .15rem;
  color:var(--ink);
  text-decoration:none;
  font-size:.92rem;
  border-bottom:2px solid transparent;
}
.base-nav a:hover{color:var(--g);border-bottom-color:var(--b)}
.base-copy{font-family:var(--mono);font-size:.76rem;color:var(--dim);text-align:right}

/* ---------- 底部固定条 ---------- */
.dock{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:60;
  border-top:3px solid var(--g);
  background:rgba(0,0,0,.88);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
}
.dock-nav{display:block}
.dock-nav > summary{display:none}
.dock-nav > menu{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,16rem) repeat(4,minmax(0,1fr));
  height:var(--bar);
  margin:0;
  padding:0;
  list-style:none;
}
.dock-nav li{display:flex}
.dock-nav li.s1{grid-column:1}
.dock-nav li.s2{grid-column:2}
.dock-nav li.s3{grid-column:3}
.dock-nav li.s4{grid-column:5}
.dock-nav li.s5{grid-column:6}
.dock-nav li.s6{grid-column:7}
.dock-nav li.s7{grid-column:8}
.dock-nav a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  padding:0 .3rem;
  color:var(--ink);
  text-decoration:none;
  font-size:.95rem;
  letter-spacing:.04em;
  border-right:1px solid rgba(0,255,128,.16);
}
.dock-nav a:hover,.dock-nav a:focus-visible{background:var(--g);color:var(--k)}
.dock-brand{
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  height:var(--bar);
  display:flex;
  align-items:center;
  padding:0 1.1rem;
  border-left:2px solid var(--g);
  border-right:2px solid var(--g);
  background:#000;
  color:var(--g);
  font-size:1.02rem;
  letter-spacing:.16em;
  text-decoration:none;
  white-space:nowrap;
}
.dock-brand:hover{background:var(--b);color:#fff}

@media (max-width:900px){
  body{padding-bottom:5.6rem}
  .dock{--bar:3.4rem}
  .dock-nav > summary{
    display:flex;
    align-items:center;
    gap:.55rem;
    width:max-content;
    height:3.4rem;
    padding:0 1rem;
    font-family:"Didact Gothic",sans-serif;
    font-weight:700;
    font-size:.95rem;
    letter-spacing:.1em;
    cursor:pointer;
    list-style:none;
    position:relative;
    z-index:2;
  }
  .dock-nav > summary::-webkit-details-marker{display:none}
  .bars{
    position:relative;
    width:22px;
    height:14px;
    border-top:3px solid var(--g);
    border-bottom:3px solid var(--g);
  }
  .bars::after{content:"";position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;background:var(--g)}
  .dock-nav[open] > summary{background:var(--g);color:var(--k)}
  .dock-nav[open] > summary .bars{border-color:var(--k)}
  .dock-nav[open] > summary .bars::after{background:var(--k)}
  .dock-nav > menu{
    display:none;
    grid-template-columns:1fr 1fr;
    height:auto;
    position:absolute;
    left:0;
    right:0;
    bottom:100%;
    max-height:62vh;
    overflow:auto;
    background:rgba(0,0,0,.97);
    border-top:3px solid var(--g);
  }
  .dock-nav[open] > menu{display:grid}
  .dock-nav li{grid-column:auto}
  .dock-nav li{border-top:1px solid rgba(0,255,128,.2)}
  .dock-nav a{height:3rem;justify-content:flex-start;padding:0 1rem}
  .dock-brand{height:3.4rem;font-size:.9rem;letter-spacing:.05em;border:0;padding:0 .6rem}
  .hero{padding-top:3rem;padding-bottom:7.4rem}
  .hero-deco{width:84px;height:84px;bottom:1.6rem}
  .hero-deco::before{width:34px;height:34px;left:10px;bottom:10px;border-width:3px}
  .hero-deco::after{width:58px;bottom:40px}
  .hero-deco span{display:none}
  .lede{max-width:100%;padding-right:.7rem}
  .split{grid-template-columns:1fr;gap:1.6rem}
  .rail{position:static;box-shadow:6px 6px 0 var(--b)}
  .rail-nav{display:grid;grid-template-columns:1fr 1fr;gap:0}
  .rail-nav a{border-right:1px dashed rgba(0,255,128,.24)}
  .base{grid-template-columns:1fr;gap:.6rem;text-align:left;padding-bottom:1.8rem}
  .base-copy{text-align:left}
  .base-nav menu{gap:0 .9rem}
}
@media (max-width:380px){
  .dock-brand{font-size:.8rem;letter-spacing:0}
  .readersection,.reader > div::before{font-size:2rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

button[aria-expanded]{min-width:44px;min-height:44px}