@import url('/assets/css/theme.css');
@font-face{font-family:'Super Beatpop';src:url('/assets/fonts/SuperBeatpop.ttf') format('truetype');font-display:swap}
@font-face{font-family:'XO Chunky Numbers';src:url('/assets/fonts/SuperBeatpop.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0023,U+0025,U+002B,U+002C,U+002D,U+002E,U+002F,U+0030-003A}
@font-face{font-family:'Milkyway Demo';src:url('/assets/fonts/MilkywayDemo.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:radial-gradient(circle at 50% -15%,rgba(198,159,213,.18),transparent 42%),linear-gradient(180deg,#1c1524,#140f18 42%,#0d0912);
  color:var(--text);
  font-family:'XO Chunky Numbers','Milkyway Demo',sans-serif;
  font-weight:300;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  line-height:1.7;
}
body *{font-weight:300!important;font-synthesis-weight:none}
.logo,.logo *{font-weight:400!important}
nav{
  background:linear-gradient(90deg,rgba(20,15,24,.96),rgba(42,32,52,.94),rgba(20,15,24,.96));
  border-bottom:2px solid var(--accent);
  padding:0 16px;
  position:sticky;
  top:0;
  z-index:100;
  box-shadow:0 10px 34px rgba(198,159,213,.28);
}
.nb{max-width:980px;margin:0 auto;display:flex;align-items:center;height:56px;gap:12px}
.logo{
  font-family:'Super Beatpop',sans-serif;
  font-size:clamp(24px,4vw,34px);
  color:var(--lemon);
  text-decoration:none;
  line-height:1;
  letter-spacing:.5px;
  -webkit-text-stroke:1px #2a2034;
  text-shadow:3px 3px 0 #1c1524,5px 5px 0 var(--accent),0 0 16px rgba(253,253,201,.18);
}
.logo span{
  color:var(--lemon);
  text-shadow:3px 3px 0 #1c1524,5px 5px 0 var(--accent2),0 0 16px rgba(253,253,201,.18);
}
.back{
  color:var(--muted);
  text-decoration:none;
  font-size:13px;
  margin-left:auto;
  border:1px solid #4a3558;
  background:linear-gradient(180deg,#2a2034,#1c1524);
  padding:7px 14px;
  border-radius:6px;
  transition:border-color .2s,color .2s;
}
.back:hover{border-color:var(--accent2);color:var(--lemon)}
main{max-width:980px;margin:0 auto;padding:32px 16px 60px;animation:pageIn .42s cubic-bezier(.2,.8,.2,1) both}
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
h1{
  font-size:clamp(26px,5vw,34px);
  color:var(--lemon);
  line-height:1.2;
  margin:0 0 16px;
  text-shadow:2px 2px 0 #1c1524,4px 4px 0 var(--accent);
}
h2{font-size:18px;color:var(--accent2);margin:28px 0 8px}
p,li{color:var(--muted);font-size:14px}
a{color:var(--accent2);text-decoration:none;transition:color .2s}
a:hover{color:var(--lemon);text-decoration:underline}
.note{
  border:1px solid #4a3558;
  background:linear-gradient(180deg,rgba(198,159,213,.08),rgba(253,253,201,.04));
  padding:14px 16px;
  border-radius:var(--r);
  color:var(--muted);
  margin:18px 0;
}
footer{
  border-top:1px solid var(--border);
  background:var(--bg2);
  padding:24px 16px;
  text-align:center;
  color:var(--muted);
  font-size:13px;
  margin-top:40px;
}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--accent2)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}