:root {
  --orange-top: #ff9a1f;
  --orange-bot: #d94e00;
  --gold: #ffd23f;
  --panel: rgba(120, 45, 0, 0.35);
  --panel-solid: rgba(150, 60, 5, 0.55);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Bricolage Grotesque', sans-serif;
}

.ihtx-root {
  background:
    linear-gradient(180deg, var(--orange-top) 0%, var(--orange-bot) 100%);
  position: relative;
  overflow-x: hidden;
}

/* subtle grid overlay for "digital lab" texture */
.ihtx-root::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}
.ihtx-root > * { position: relative; z-index: 1; }

.ihtx-logo {
  text-shadow: 0 4px 24px rgba(0,0,0,0.3);
  letter-spacing: 0.05em;
  transition: transform 0.15s;
}
.ihtx-logo:active { transform: scale(0.95); }

/* Tutorial */
.tut-bar {
  background: rgba(90, 35, 0, 0.55);
  border: 1px solid rgba(255,210,63,0.25);
  transition: background 0.2s;
}
.tut-bar:hover { background: rgba(110, 45, 0, 0.6); }
.tut-body {
  background: rgba(70, 28, 0, 0.5);
  color: rgba(255,240,220,0.9);
  border: 1px solid rgba(255,210,63,0.15);
  border-top: none;
}

/* Drop zone */
.drop-zone {
  background: var(--panel);
  border: 2px dashed rgba(255,210,63,0.45);
  transition: all 0.2s;
}
.drop-zone:hover { background: rgba(140, 55, 5, 0.45); border-color: var(--gold); }
.drop-zone.drag-over {
  background: rgba(160, 65, 5, 0.6);
  border-color: var(--gold);
  transform: scale(1.02);
}

.preview-card {
  background: var(--panel-solid);
  border: 1px solid rgba(255,210,63,0.25);
}

.import-btn {
  background: var(--gold);
  color: #6a2b00;
  font-weight: 800;
  padding: 8px 22px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 14px rgba(255,210,63,0.35);
}
.import-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255,210,63,0.5); }

.secondary-btn {
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-weight: 700;
  padding: 8px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.3);
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.15s;
}
.secondary-btn:hover { background: rgba(255,255,255,0.22); }

.error-box {
  background: rgba(120, 20, 0, 0.6);
  color: #ffe0d0;
  border: 1px solid rgba(255,120,80,0.5);
}

/* Effect cards */
.effect-card {
  background: rgba(100, 40, 0, 0.5);
  border: 1px solid rgba(255,210,63,0.15);
  width: 130px;
  min-height: 130px;
  position: relative;
  transition: all 0.18s;
}
.effect-card:hover { transform: translateY(-3px); background: rgba(120, 50, 5, 0.6); }
.effect-card.selected {
  border: 2px solid var(--gold);
  box-shadow: 0 0 20px rgba(255,210,63,0.5);
  background: rgba(130, 55, 5, 0.7);
}
.check-badge {
  position: absolute;
  top: 6px; right: 6px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #3b82f6;
  color: #fff;
  font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
}
.meta-tag {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  background: rgba(0,0,0,0.3);
  color: var(--gold);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Power pills */
.power-pill {
  background: rgba(80, 32, 0, 0.6);
  color: rgba(255,240,220,0.85);
  font-weight: 800;
  padding: 8px 24px;
  border-radius: 999px;
  border: 1px solid rgba(255,210,63,0.2);
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.15s;
}
.power-pill:hover { transform: translateY(-2px); }
.power-pill.active {
  background: var(--gold);
  color: #6a2b00;
  box-shadow: 0 4px 16px rgba(255,210,63,0.5);
}

/* Generate button */
.generate-btn {
  padding: 14px 44px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 1.05rem;
  border: none;
  transition: all 0.18s;
  margin-bottom: 8px;
}
.generate-btn.ready {
  background: var(--gold);
  color: #6a2b00;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(255,210,63,0.6);
  animation: pulse-glow 2s ease-in-out infinite;
}
.generate-btn.ready:hover { transform: scale(1.05); }
.generate-btn.disabled {
  background: rgba(60, 25, 0, 0.5);
  color: rgba(255,240,220,0.4);
  cursor: not-allowed;
}
.generate-btn.shaking { animation: shake 0.4s ease-in-out infinite; }

@keyframes pulse-glow {
  0%,100% { box-shadow: 0 0 24px rgba(255,210,63,0.5); }
  50% { box-shadow: 0 0 38px rgba(255,210,63,0.9); }
}
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-3px) rotate(-0.5deg); }
  75% { transform: translateX(3px) rotate(0.5deg); }
}

/* Progress */
.progress-track {
  width: 100%;
  height: 12px;
  background: rgba(0,0,0,0.35);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(255,210,63,0.25);
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffd23f, #ff8c1a);
  transition: width 0.2s;
}
.chaos-msg { animation: flicker 0.9s ease-in-out infinite; font-weight: 700; }
@keyframes flicker {
  0%,100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Strobe easter egg */
.strobe-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  animation: strobe 0.1s steps(1) infinite;
  mix-blend-mode: difference;
  background: #fff;
}
@keyframes strobe {
  0% { background: #fff; }
  50% { background: #000; }
}

/* Page-load fade/stagger */
.fade-in {
  opacity: 0;
  transform: translateY(12px);
  animation: rise 0.6s ease forwards;
}
@keyframes rise {
  to { opacity: 1; transform: translateY(0); }
}

.hidden { display: none; }

@media (max-width: 640px) {
  .effect-card { width: 45%; min-height: 120px; }
  .ihtx-logo { font-size: 3.5rem; }
}
</parameter>