:root{
  --blue:rgb(44 153 206);       /* main blue */
  --blue-hover:#1e3a8a; /* hover */
  --yellow:#f59e0b;
  --yellow-hover:#d97706;
  --red:#ef4444;
  --red-hover:#dc2626;
  --muted:#9ca3af;
  --card-bg:#ffffff;
}

/* Reset-ish */
*{box-sizing:border-box}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial; margin:0; background:#f3f4f6; color:#0f172a;}
a{color:inherit;text-decoration:none}

.min-h-screen{min-height:100vh}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem}
.px-4{padding-left:1rem;padding-right:1rem}

/* Title link */
.title-link{text-align:center;margin-bottom:1rem}
.title-text{font-weight:700; font-size:1.25rem; color:var(--blue); text-decoration:underline; display:inline-block; padding:0.25rem 0}

/* Card */
.card{background:var(--card-bg); padding:2.5rem; border-radius:1rem; box-shadow: 0 20px 50px rgba(2,6,23,0.08); border:1px solid #e6e6e6; position:relative; margin:0 auto 20px auto; max-width: 1000px;}

/* layout helpers */
.flex{display:flex}
.wrap{flex-wrap:wrap}
.center{justify-content:center}
.right{justify-content:flex-end}
.space-between{justify-content:space-between}
.gap-4{gap:1rem}
.gap-6{gap:1.5rem}
.gap-8{gap:2rem}
.mb-4{margin-bottom:1rem}
.mb-6{margin-bottom:1.5rem}
.mb-8{margin-bottom:2rem}
.mt-8{margin-top:2rem}

/* Inputs */
.label{font-weight:600;margin-right:.5rem;display:block;margin-bottom:.25rem}
.input, .select, .textarea{border:1px solid #e6e6e6; padding:.5rem; border-radius:.5rem; font-size:0.95rem}
.input{width:8rem}
.select{width:10rem}
.textarea{width:100%; min-height:200px; font-family:monospace; font-size:13px; resize:vertical; background:white}

/* buttons: base + variants */
.btn{
  padding: .5rem .9rem;
  border-radius: 999px;
  border: none;
  color:white;
  cursor:pointer;
  box-shadow: 0 6px 18px rgba(2,6,23,0.08);
  transition: transform .12s ease, background-color .12s ease, box-shadow .12s;
  font-weight:600;
}
/* .btn:hover{ transform:translateY(-2px); } */

.btn-blue{ background:var(--blue); }
.btn-blue:hover{ background:var(--blue-hover); }

.btn-red{ background:var(--red); }
.btn-red:hover{ background:var(--red-hover); }

.btn-yellow{ background:var(--yellow);  }
.btn-yellow:hover{ background:var(--yellow-hover);  }

.btn-disabled, .btn[disabled], .disabled{
  background:#94a3b8; cursor:not-allowed; box-shadow:none; opacity:0.9;
}

/* modal */
.modal{ display:none; position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:999; align-items:center; justify-content:center; padding:1rem; }
.modal-panel{ background:white; border-radius:1rem; padding:1.25rem; width:100%; max-width:680px; position:relative; box-shadow:0 30px 80px rgba(2,6,23,0.2); }
.modal-panel.large{ max-width:500px; height:80vh; overflow:auto; }
.modal-title{ font-size:1.125rem; font-weight:700; margin-bottom:.75rem; color:#0f172a; text-align:left }
.modal-title.small{ font-size:0.95rem; margin-top:0; color:#0f172a }
.modal-actions{ display:flex; justify-content:flex-end; gap:.75rem; margin-top:1rem }
.modal-actions.spaced{ display:flex; justify-content:space-between; gap:.75rem }

/* diagrams */
.diagram-wrap{text-align:center}
.diagram{ max-width:100%; max-height:60vh; border-radius:.5rem; border:1px solid #e6e6e6; display:block; margin:0 auto 0.5rem auto }
.diagram-caption{}

/* code box */
.code-box{ background:#f3f4f6; padding:1rem; border-radius:.5rem; border:1px solid #e6e6e6; white-space:pre-wrap; overflow:auto; max-height:40vh; font-family:monospace; font-size:13px; text-align:left }

/* instructions list */
.instructions-list{ padding-left:1rem; color:#334155; font-size:0.95rem }

/* validation message */
.validation{ text-align:center; margin-top:0.5rem; font-weight:700; color: #16a34a; }

/* panel for leds */
.panel{ background:#ecfdf5; padding:2rem; border-radius:1rem; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6); border:1px solid #d1fae5 }
.led-grid{ display:grid; grid-template-columns: repeat(8, 1fr); gap:1rem; align-items:end; text-align:center }
.led-column{ display:flex; flex-direction:column; align-items:center }
.led-stand{ width:4px; height:2.5rem; background:#0f172a; margin-bottom:.5rem }
.led-bus{ width:40px; height:8px; background:#fbbf24; border-radius:4px; margin-bottom:.5rem }
.led{ width:48px; height:48px; border-radius:999px; border:2px solid #cbd5e1; background:#e6e6e6; transition: all .25s ease; box-shadow:none; }
.led.on{ background:var(--blue); box-shadow:0 6px 18px rgba(30,64,175,0.35); border-color: rgba(0,0,0,0.12) }
.pin-label{ font-family:monospace; font-size:12px; color:#374151; margin-top:.35rem }

/* count text */
.count-text{ color:#4f46e5; font-weight:800; font-size:1.125rem }

/* footer */
.footer{ position:fixed; left:0; bottom:0; width:100%; text-align:center; padding:.75rem 0; background:#111827; color:white; font-weight:700; font-size:0.85rem }

/* tip text */
.tip{ color:#475569; font-size:12px; margin-top:.5rem }

/* small responsive adjustments */
@media (max-width:720px){
  .modal-panel{ padding:.75rem }
  .card{ padding:1.25rem }
  .led{ width:36px; height:36px }
  .led-bus{ width:32px; height:6px }
  .input{ width:6.5rem }
  .select{ width:9rem }
}