/* Shared zine styling — Y2K / vaporwave, print-ready.
   Variable NAMES kept stable so inline var(--magenta) etc. still work. */
:root{
  --bg:#1d0640;            /* deep purple void */
  --ink:#f5e9ff;
  --green:#05ffa1;
  --cyan:#01cdfe;
  --magenta:#ff71ce;       /* hot pink */
  --yellow:#fffb96;
  --purple:#b967ff;
  --mono:"Trebuchet MS","Segoe UI",Verdana,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:linear-gradient(180deg,#2b0a4a 0%,#7a2a9e 45%,#ff8a5c 100%);
  background-attachment:fixed;color:var(--ink);font-family:var(--mono);padding:24px;
}

/* on-screen help banner (hidden when printing) */
.help{
  max-width:1100px;margin:0 auto 22px;border-radius:12px;
  border:2px solid var(--magenta);background:rgba(29,6,64,.85);
  padding:16px 18px;line-height:1.55;font-size:14px;backdrop-filter:blur(4px);
}
.help h1{
  font-style:italic;font-size:22px;margin-bottom:8px;
  background:linear-gradient(90deg,var(--cyan),var(--magenta));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.help b{color:var(--yellow)}
.help a{color:var(--cyan)}
.printbtn{
  display:inline-block;margin-top:10px;border:none;border-radius:20px;cursor:pointer;
  background:linear-gradient(90deg,var(--purple),var(--magenta));color:#fff;
  padding:10px 18px;font-family:var(--mono);font-weight:bold}

/* a zine panel/page */
.panel,.page{
  background:var(--bg);color:var(--ink);position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  padding:14px;border:1px solid rgba(255,255,255,.18);
}
.panel h2,.page h2{
  font-style:italic;font-size:19px;margin-bottom:8px;
  background:linear-gradient(90deg,var(--cyan),var(--magenta));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.panel h3,.page h3{color:var(--cyan);font-size:14px;margin-bottom:6px}
.panel p,.page p{font-size:12px;line-height:1.55;margin-bottom:8px}
.panel a,.page a{color:var(--cyan)}
.neon-title{
  font-style:italic;font-weight:900;line-height:.95;
  background:linear-gradient(180deg,#fff 0%,var(--cyan) 45%,var(--magenta) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(2px 2px 0 var(--purple));
}
.small{font-size:10px;color:#d3bff0}
.center{text-align:center;align-items:center;justify-content:center}

@media print{
  body{background:#fff;padding:0}
  .help{display:none}
  @page{margin:0}
}