body { font-family: 'Poppins', Arial, sans-serif; background:#fdf6ed; margin:0; color:#24232b; }
header { text-align:center; background:#f8f8f8; padding:1.2rem 0 0.7rem 0; }
h1 { font-size:2.6rem; font-weight:700; letter-spacing:1px; }
.quickstart { margin:1rem 0 0.2rem 0; }
.quickstart button { margin:0 5px; padding:10px 24px; border:none; border-radius:8px; background:#7e22ce; color:#fff; font-size:1.15rem; cursor:pointer; transition:.1s;}
.quickstart button:hover { background:#a179da; }
.grid {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:1.15rem;
  padding:1.3rem;
  max-width: 1280px;
  margin: 0 auto;
}
.card {
  background:#fff;
  border: 4px solid var(--border-color,#b8e4c9);
  border-radius: 17px;
  padding:1.1rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.09);
  min-height:180px;
  display:flex;
  flex-direction:column;
  justify-content: flex-start;
  align-items: flex-start;
  position:relative;
  transition: box-shadow .18s, transform .13s;
  overflow:hidden;
}
.card:hover { box-shadow:0 10px 34px #e4c1f9a0; transform:translateY(-2px);}
.card .tool-list { padding: 0 0 0 0.8rem; margin:0; }
.card .tool-list li { margin-bottom:7px; font-size:1.1rem;}
.card .tool-list li a { color: #542c95; text-decoration:none; font-weight:500;}
.card .tool-list li a:hover { text-decoration:underline; }
.zineCover.fill { width:100%; height:165px; object-fit:cover; border-radius:12px; cursor:pointer; margin-bottom:.8rem;}
.zineTitle { font-size:1.17rem; font-weight:600; padding:0.25rem 0; text-align:center; width:100%;}
.dopamine { background:linear-gradient(90deg,#ffd1b8,#b8e4c9,#fce1a3); color:#24232b; font-weight:bold; border-radius:9px; border:none; font-size:1.15rem; padding:16px 8px; width:100%; margin-top:.6rem;}
.signup { margin:2rem auto 1.5rem auto; max-width:600px; width:96%;}
#musicFrame .fill, iframe.fill { min-height:160px; height:100%; width:100%; border-radius:10px; border:none; }
.modal { position:fixed; top:0;left:0;width:100vw;height:100vh;background:none;z-index:99;}
.modal-bg {position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(45,0,54,.29);}
.modal-content {
  background:#fff; padding:1.5rem 1.2rem; border-radius:18px; max-width:660px; margin:60px auto 0 auto; position:relative;
  z-index:100; box-shadow:0 0 44px #e4c1f9;
}
.close { position:absolute;top:11px;right:21px;font-size:2rem;cursor:pointer;color:#b7b7c6;font-weight:bold;}
@media (max-width: 950px) {
  .grid { grid-template-columns: repeat(2, 1fr);}
  .zineCover.fill {height:110px;}
}
@media (max-width: 670px) {
  .grid { grid-template-columns: 1fr;}
  .card {min-height:130px;}
  .zineCover.fill {height:90px;}
}
.nostalgia body, body.nostalgia { background:#1b1838; color:#ffdeeb; }
.nostalgia header, body.nostalgia header, .nostalgia .card, body.nostalgia .card { background:#2d234a; color:#ffdeeb; }
.nostalgia .card { box-shadow:0 0 22px #ffbbcc90; }
.nostalgia h1,h2 { font-family: 'VT323',monospace,serif !important; letter-spacing:1px; }