:root{
      --bg:#0e0f12; --bg-2:#131418; --ink:#e9e9ee; --mut:#a5a8b3;
      --accent:#e04646; --border:#2a2d34;
      --btn:#171a21; --btn-hov:#262a33; --ring:#e04646aa;
      --maxw: 1100px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; background:var(--bg); color:var(--ink);
      font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Inter, Inter var, sans-serif;
      -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    }
    a{color:inherit; text-decoration:none}
    a:focus-visible{outline:3px solid var(--ring); outline-offset:3px}
    img{max-width:100%; height:auto; display:block}

    /* HERO */
    .hero{
      position:relative; isolation:isolate;
      display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
      padding:0 0 32px;
      background: radial-gradient(1200px 600px at 50% -10%, #b33a3a18, transparent 60%), var(--bg);
    }
    .hero__banner{
      width:100%;
      min-height:600px;
      display:flex; align-items:center; justify-content:center;
      overflow:hidden;
      border-bottom:1px solid var(--border);
      background:#0e0f12;
    }
    .hero__banner img{
      max-width:100%;
      max-height:600px;
      width:auto; height:auto; object-fit:contain;
      filter:saturate(.95) contrast(1.05) brightness(.95);
      opacity:0.75;
    }
    @media (max-width: 640px){
      .hero__banner{ min-height: 480px; }
      .hero__banner img{ max-height: 480px; }
    }
    .hero__inner{
      width:100%; max-width:var(--maxw); text-align:center;
      margin-top:-90px; padding: 0 20px;
    }
    .logo{
      width:min(220px, 35vw); margin:0 auto 12px; border-radius:50%;
      box-shadow: 0 6px 40px #000a;
      backdrop-filter: blur(0.5px);
	  opacity: 0.75;
    }
    .title{
      margin: 6px 0 6px; font-size: clamp(28px, 5.6vw, 54px);
      font-weight:800; letter-spacing:.5px;
    }
    .tag{
      color:var(--mut); margin:0 0 22px; font-size: clamp(14px, 1.9vw, 18px);
    }
    .cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
    .btn{
      background:var(--btn); color:var(--ink);
      padding:12px 18px; border-radius:12px; border:1px solid var(--border);
      font-weight:600; letter-spacing:.2px; transition:transform .05s ease, border-color .2s ease, box-shadow .2s ease;
      outline:none;
    }
    .btn:hover{ border-color:var(--btn-hov); transform:translateY(-1px) }
    .btn--primary{ background: linear-gradient(180deg, var(--accent), #c33636); border-color:#ff6a6a33; opacity: 0.75; }
    .btn--primary:hover{ box-shadow:0 0 0 4px var(--ring) }
    .btn--ghost{ background:transparent }
	
	/* Hide default arrow */
	details summary::-webkit-details-marker {
	  display: none;
	}
	details summary::marker {
	  display: none;
	}

	/* Summary container as flex */
	details summary.step-title {
	  display: flex;
	  align-items: center;     /* vertical centering */
	  gap: 0.5rem;             /* spacing between icon and text */
	  font-size: 1.4rem;
	  font-weight: 700;
	  cursor: pointer;
	  list-style: none;
	  padding: 0.25rem 0;
	  position: relative;
	}

	/* The + / – icon */
	details summary.step-title::before {
	  content: "+";
	  font-size: 1.3rem;
	  font-weight: 900;
	  line-height: 1;
	  display: inline-block;
	  width: 1rem;             /* keeps alignment consistent */
	  text-align: center;
	  position: relative;
	  top: 1px;                /* micro-adjust for pixel-perfect alignment */
	}

	/* Open state (show –) */
	details[open] summary.step-title::before {
	  content: "–";
	}
	
	/* Accent link styling for announcement blocks */
	.announcements a {
	  text-decoration: none;
	  font-weight: 600;
	  transition: color 0.2s ease, text-shadow 0.2s ease;
	}

	/* Patreon – soft warm red (same tone as main button) */
	.link-patreon {
	  color: var(--accent-red, #ff5c5c);
	}
	.link-patreon:hover {
	  color: #ff7a7a;
	  text-shadow: 0 0 6px #ff7a7a55;
	}

	/* Facebook – soft blue variant to complement red theme */
	.link-facebook {
	  color: #5ea0ff;
	}
	.link-facebook:hover {
	  color: #82baff;
	  text-shadow: 0 0 6px #82baff55;
	}

	/* DeviantArt – muted green, slightly desaturated for readability */
	.link-deviantart {
	  color: #4ed37f;
	}
	.link-deviantart:hover {
	  color: #6ff0a0;
	  text-shadow: 0 0 6px #6ff0a055;
	}

    /* SECTIONS */
    .section{
      padding: clamp(28px, 5vw, 64px) 20px; border-top:1px solid var(--border);
      background: var(--bg);
    }
    .wrap{ max-width: var(--maxw); margin:0 auto }
    .section h2{ margin:0 0 10px; font-size: clamp(22px, 3.6vw, 32px) }
    .section p{ color:var(--mut); margin: 6px 0 18px }
	.announcements h2{ margin:0 0 10px; font-size: clamp(22px, 3.6vw, 32px) }
	.announcements p{ color:var(--mut); margin: 6px 0 18px }
	
		/* announcements */
	.announcements{
      background: var(--bg-2);
      border:1px solid var(--border); border-radius:14px; overflow:hidden;
      box-shadow: 0 10px 40px #0008;
	  padding: clamp(20px, 3vw, 40px);
    }
	
	.note {
	  font-size: 0.9em;
	  color: var(--mut);
	  margin-top: -8px;
	  margin-bottom: 18px;
	  font-style: bold;
	}

	.note strong {
	  color: #ffcc33; /* optional subtle tint */
	}

    /* DEMO CARD */
    .demo{
      background: var(--bg-2);
      border:1px solid var(--border); border-radius:14px; overflow:hidden;
      box-shadow: 0 10px 40px #0008;
    }
    .demo__media{
      aspect-ratio: 16/9; background:#111; display:grid; place-items:center;
    }
    .demo__caption{
      padding:14px 16px; display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap;
      border-top:1px solid var(--border);
    }
	
    /* Triple media row */
    .demo__media.triple{
      display:flex; flex-wrap:wrap; gap:12px; justify-content:center; align-items:stretch;
      background:#111; padding:16px; aspect-ratio:auto; place-items:unset;
    }
    .demo__media.triple figure{
      flex:1 1 320px; max-width:680px; margin:0; display:flex; flex-direction:column; gap:6px; text-align:center;
    }
    .demo__media.triple img{
      width:100%; height:auto; border-radius:8px; border:1px solid var(--border);
      box-shadow:0 3px 12px #0006; object-fit:contain; background:#000;
    }
    .demo__media.triple figcaption{ color:var(--mut); font-size:14px; }
    @media (max-width: 680px){
      .demo__media.triple figure{ flex-basis:100%; max-width:none; }
    }

    /* PROJECT CARDS */
    .cards{
      display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }
    .card{
      background:var(--bg-2); border:1px solid var(--border); border-radius:12px; padding:18px;
      display:flex; flex-direction:column; gap:10px; min-height: 220px;
    }
    .card h3{ margin:0 }
    .card p{ color:var(--mut); margin:0 0 10px }
    .card .grow{ flex:1 }
    .card .btn{ width:max-content }

    /* FOOTER */
    footer{
      border-top:1px solid var(--border);
      background:linear-gradient(180deg, #0c0d10, #0a0b0e);
      color:#c6c8d0; padding:24px; text-align:center; font-size:14px;
    }
    .links{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:8px }
    .links a{ color:#c6c8d0bb }
    .links a:hover{ color:#fff }

    /* MOBILE TWEAKS */
    @media (max-width: 680px){
      .hero__inner{ margin-top:-60px }
      .hero__banner img{ height: 300px }
    }

    /* motion-respect */
    @media (prefers-reduced-motion: reduce){
      .btn:hover{ transform:none; box-shadow:none }
    }
	
.composer-workflow-diagram {
  margin: 1.5rem 0;
  text-align: center;
}

.composer-workflow-diagram img {
  max-width: 900px;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.node-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 1rem;
}

/* Card shell */
.node-card {
  background: var(--panel, #111);
  border-radius: 8px;
  padding: 8px;
  text-align: center;
  position: relative;
  overflow: visible;
}

.node-card img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  cursor: zoom-in;
  position: relative;
  z-index: 1;
}

.node-card figcaption {
  margin-top: 0.5rem;
  font-size: 0.9rem;
}

.image-zoom-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.96); /* almost solid black */
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 30px;
  box-sizing: border-box;
}

.image-zoom-content {
  display: flex;
  flex-direction: row;
  gap: 30px;
  align-items: flex-start;   /* <- top-aligns image and text */
  max-width: 95vw;
  max-height: 90vh;
}

.image-zoom-text {
  flex-shrink: 0;
  width: auto;
  max-width: 420px;            /* hard stop: max readable width */
  color: #e5e5e5;
  font-size: 1rem;
  line-height: 1.55;
  padding: 14px 16px;
  background: rgba(0,0,0,0.90);
  border-radius: 6px;
  box-shadow: 0 0 20px rgba(0,0,0,0.8);
  overflow-wrap: break-word;
}
/* kill the default top margin so text sits tight to the top */
.image-zoom-text p {
  margin: 0 0 0.75em;
}

/* optional: tidy the bullets */
.image-zoom-text ul {
  margin: 0 0 0 1.25em;
  padding: 0;
}

/* stack vertically on screens under 900px */
@media (max-width: 900px) {
  .image-zoom-content {
    flex-direction: column;
    align-items: center;
  }

  .image-zoom-content img {
    max-width: 80vw;
  }

  .image-zoom-text {
    max-width: 80vw;
  }
}