*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif;background:#08111f;color:#eef5ff}a{color:#8fd3ff}.shell{width:min(1120px,92%);margin:auto}.site-header{background:#0d1a2d;border-bottom:1px solid #263a55;padding:.9rem 0}.nav{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}.brand{font-weight:800;text-decoration:none;letter-spacing:.08em}.panel,.card{background:#101d31;border:1px solid #263a55;border-radius:14px;padding:1.25rem;margin:1rem 0}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}.btn,.primary,button{display:inline-block;padding:.65rem .9rem;border-radius:9px;border:1px solid #4d729b;background:#17304e;color:#fff;text-decoration:none;cursor:pointer}.primary{background:#174f7a}input,select,textarea{width:100%;padding:.7rem;margin:.35rem 0 1rem;border-radius:8px;border:1px solid #49617b;background:#0b1727;color:#fff}textarea{min-height:110px}.flash{background:#423d18;border:1px solid #887d28;padding:.5rem 1rem;margin-top:1rem}.eyebrow{letter-spacing:.12em;font-size:.8rem;color:#9fc9e8}

/* ================================
   SPACE.CRAFT.ED — 8x8 Avatar Designer
   ================================ */

.avatar-popup-page {
  min-height: 100%;
}

.avatar-popup-shell {
  max-width: 980px;
  margin: 1rem auto;
}

.avatar-designer-panel {
  border-color: rgba(111,227,255,.24);
}

.avatar-workbench {
  display: grid;
  grid-template-columns: minmax(300px, 420px) 1fr;
  gap: 1.5rem;
  align-items: start;
}

.pixel-editor-large {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: min(80vw, 420px);
  aspect-ratio: 1 / 1;
  border: 2px solid rgba(111,227,255,.45);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 0 1.4rem rgba(111,227,255,.16);
}

.pixel-cell-large {
  border: 1px solid rgba(255,255,255,.08);
  min-width: 0;
  min-height: 0;
  cursor: crosshair;
}
.pixel-cell-large:hover {
  outline: 2px solid #8fd3ff;
  outline-offset: -2px;
}

.colour-palette-large {
  display: grid;
  grid-template-columns: repeat(8, 34px);
  gap: .45rem;
  margin: .6rem 0 1rem;
}

.colour-swatch-large {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 2px solid rgba(255,255,255,.18);
  cursor: pointer;
}
.colour-swatch-large.selected {
  outline: 3px solid #8fd3ff;
  outline-offset: 2px;
}
.eraser-swatch {
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.06), rgba(255,255,255,.06) 4px, rgba(255,255,255,.18) 4px, rgba(255,255,255,.18) 8px);
  color: #eef5ff;
  font-size: 1.2rem;
  font-weight: 900;
}

.avatar-preview-large {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: 128px;
  height: 128px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #26364c;
  background: rgba(255,255,255,.04);
  image-rendering: pixelated;
}
.preview-pixel { display: block; }
.avatar-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.avatar-side-panel h2 { margin: .2rem 0 .4rem; }

.astro-pi-card {
  margin-top: 1.2rem;
  border: 1px solid rgba(255,209,102,.35);
  border-radius: 16px;
  background: rgba(255,209,102,.08);
  padding: 1rem;
}
.astro-pi-card h3 { margin-top: 0; }
.center-panel { text-align: center; }

@media (max-width: 760px) {
  .avatar-workbench { grid-template-columns: 1fr; }
  .colour-palette-large { grid-template-columns: repeat(8, 1fr); }
}
.avatar-inline-card {
  border: 1px solid rgba(111,227,255,.24);
  border-radius: 14px;
  padding: 1rem;
  background: rgba(111,227,255,.06);
}
.avatar-inline-card p { margin: 0 0 .5rem; }


/* Current integrated-build compatibility */
.button-primary,.button-secondary{display:inline-block;padding:.65rem .9rem;border-radius:9px;border:1px solid #4d729b;background:#17304e;color:#fff;text-decoration:none;cursor:pointer}
.button-primary{background:#174f7a}
.section-heading-row{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;flex-wrap:wrap}
.lede{color:#b8c8dc}
.avatar-why{margin:1rem 0 1.25rem;padding:.9rem 1rem;border-left:4px solid #8fd3ff;background:#0b1727;color:#d9e8f8}