/* AfexKidz Answer//42 — isolated styles */
.afexkidz-42{ --bg:#03060a; --ink:rgba(0,0,0,.55); --ph:rgba(50,255,122,.92); --ph2:rgba(24,201,106,.85);
  --txt:rgba(215,255,211,.92); --dim:rgba(150,220,175,.82); --line:rgba(50,255,122,.16);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  color: var(--txt);
}
.afexkidz-42 *{ box-sizing:border-box; }
.afexkidz-42 .afx42-shell{ background: radial-gradient(900px 500px at 30% 0%, rgba(50,255,122,.08), transparent 60%), var(--bg);
  border:1px solid rgba(255,255,255,.06); border-radius:18px; padding:12px; box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.afexkidz-42 .afx42-header{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding:10px; border-radius:16px; border:1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.22));
}
.afexkidz-42 .left{ display:flex; gap:8px; flex-wrap:wrap; }
.afexkidz-42 .right{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

.afexkidz-42 .btn{ appearance:none; border:1px solid rgba(255,255,255,.09); background: rgba(0,0,0,.28);
  color: var(--txt); padding:8px 10px; border-radius:12px; cursor:pointer; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; font-size:12px;
}
.afexkidz-42 .btn:hover{ border-color: rgba(50,255,122,.28); box-shadow: 0 0 0 2px rgba(50,255,122,.10); }
.afexkidz-42 .btn:disabled{ opacity:.45; cursor:not-allowed; }
.afexkidz-42 .btn.danger{ border-color: rgba(255,80,120,.30); }
.afexkidz-42 .btn.sm{ padding:6px 8px; font-size:11px; border-radius:10px; }
.afexkidz-42 .btn.wide{ padding:10px 14px; }

.afexkidz-42 .ro{ display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:12px;
  border:1px solid rgba(255,255,255,.06); background: rgba(0,0,0,.22);
}
.afexkidz-42 .ro .k{ font-size:10px; letter-spacing:.14em; color: var(--dim); }
.afexkidz-42 .ro .v{ font-size:12px; letter-spacing:.12em; color: rgba(235,255,240,.92); }
.afexkidz-42 .ro.mini{ padding:4px 8px; }
.afexkidz-42 .dim{ color: var(--dim); }

.afexkidz-42 .afx42-monitor{ position:relative; margin-top:10px; border-radius:16px; overflow:hidden;
  border:1px solid rgba(50,255,122,.18);
  background: radial-gradient(900px 380px at 50% 0%, rgba(50,255,122,.10), transparent 55%), rgba(0,0,0,.45);
  min-height: 220px;
}
.afexkidz-42 canvas.mon{ display:block; width:100%; height:320px; background: rgba(0,0,0,.18); }
.afexkidz-42 .mon-overlay{ position:absolute; left:12px; top:10px; right:12px; pointer-events:none; }
.afexkidz-42 .mon-overlay .line{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.afexkidz-42 .scanlines{ position:absolute; inset:0; pointer-events:none; opacity:.18; mix-blend-mode:screen; display:none;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.08) 0px, rgba(255,255,255,.08) 1px, transparent 2px, transparent 6px);
}
.afexkidz-42 .afx42-actions{ display:grid; grid-template-columns: 1.2fr 1fr .6fr .7fr; gap:10px; margin-top:10px; }
.afexkidz-42 .afx42-actions .bpm, .afexkidz-42 .afx42-actions .fine, .afexkidz-42 .afx42-actions .mode{
  border:1px solid rgba(255,255,255,.06); background: rgba(0,0,0,.22); border-radius:16px; padding:10px;
}
.afexkidz-42 label{ display:block; font-size:10px; letter-spacing:.18em; color: var(--dim); text-transform:uppercase; }
.afexkidz-42 input[type="range"]{ width:100%; }
.afexkidz-42 .ticks{ display:flex; justify-content:space-between; font-size:10px; color: rgba(150,220,175,.78); margin-top:6px; }
.afexkidz-42 select{ width:100%; border:1px solid rgba(50,255,122,.18); background: rgba(0,0,0,.28);
  color: var(--txt); padding:8px 10px; border-radius:12px;
}

.afexkidz-42 .afx42-voices{ margin-top:10px; border:1px solid rgba(255,255,255,.06); background: rgba(0,0,0,.18); border-radius:18px; padding:10px; }
.afexkidz-42 .vh, .afexkidz-42 .kh{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color: rgba(235,255,240,.92); margin-bottom:8px; }
.afexkidz-42 .grid{ display:grid; grid-template-columns: repeat(14, 1fr); gap:8px; }
.afexkidz-42 .vmod{ position:relative; border-radius:14px; padding:8px; min-height:64px;
  border:1px solid rgba(50,255,122,.16);
  background: linear-gradient(180deg, rgba(50,255,122,.06), transparent 38%), rgba(0,0,0,.25);
  box-shadow: 0 0 0 1px rgba(0,0,0,.40) inset;
  cursor:pointer;
  overflow:hidden;
}
.afexkidz-42 .vmod:before{ content:""; position:absolute; inset:0; opacity:.16; pointer-events:none;
  background: repeating-linear-gradient(90deg, rgba(50,255,122,.10) 0 1px, transparent 1px 14px);
}
.afexkidz-42 .vmod .top{ display:flex; justify-content:space-between; gap:6px; align-items:center; position:relative; z-index:1; }
.afexkidz-42 .tag{ font-size:10px; letter-spacing:.14em; color: rgba(235,255,240,.92); }
.afexkidz-42 .lamp{ width:10px; height:10px; border-radius:999px; background: rgba(50,255,122,.18); border:1px solid rgba(50,255,122,.22); box-shadow:none; }
.afexkidz-42 .lamp.on{ background: rgba(50,255,122,.75); box-shadow: 0 0 18px rgba(50,255,122,.30); }
.afexkidz-42 .muteb{ font-size:10px; padding:4px 6px; border-radius:10px; border:1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.22); color: var(--dim); }
.afexkidz-42 .muteb.off{ border-color: rgba(255,90,140,.32); color: rgba(255,140,170,.92); }
.afexkidz-42 .bar{ margin-top:10px; height:8px; border-radius:999px; background: rgba(0,0,0,.30); border:1px solid rgba(255,255,255,.05); position:relative; z-index:1; overflow:hidden; }
.afexkidz-42 .bar > i{ display:block; height:100%; width:0%; background: rgba(50,255,122,.70); }

.afexkidz-42 .afx42-seq{ margin-top:10px; border:1px solid rgba(255,255,255,.06); background: rgba(0,0,0,.18); border-radius:18px; padding:10px; }
.afexkidz-42 .afx42-seq .sh{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:8px; }
.afexkidz-42 .afx42-seq .t{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color: rgba(235,255,240,.92); }
.afexkidz-42 .afx42-seq .row{ display:grid; grid-template-columns: repeat(42, 1fr); gap:4px; }
.afexkidz-42 .cell{ height:26px; border-radius:10px; border:1px solid rgba(50,255,122,.14); background: rgba(0,0,0,.22); cursor:pointer; position:relative; overflow:hidden; }
.afexkidz-42 .cell.on{ background: linear-gradient(180deg, rgba(50,255,122,.16), rgba(0,0,0,.18)); border-color: rgba(50,255,122,.26); }
.afexkidz-42 .cell.ch{ box-shadow: 0 0 0 2px rgba(255,230,120,.10) inset; }
.afexkidz-42 .cell > i{ position:absolute; inset:0; opacity:.18; background: repeating-linear-gradient(180deg, rgba(255,255,255,.10) 0 1px, transparent 2px 6px); pointer-events:none; }

.afexkidz-42 .afx42-keys{ margin-top:10px; border:1px solid rgba(255,255,255,.06); background: rgba(0,0,0,.18); border-radius:18px; padding:10px; }
.afexkidz-42 .kgrid{ display:grid; grid-template-columns: repeat(12, 1fr); gap:6px; }
.afexkidz-42 .key{ padding:12px 6px; border-radius:14px; border:1px solid rgba(50,255,122,.14);
  background: linear-gradient(180deg, rgba(50,255,122,.06), rgba(0,0,0,.22)); text-align:center; cursor:pointer;
  user-select:none; touch-action: manipulation;
}
.afexkidz-42 .key:active, .afexkidz-42 .key.down{ border-color: rgba(50,255,122,.34); box-shadow: 0 0 0 2px rgba(50,255,122,.12); }
.afexkidz-42 .khelp{ margin-top:8px; font-size:10px; color: rgba(150,220,175,.78); letter-spacing:.10em; }

.afexkidz-42 .afx42-log{ margin-top:10px; height:130px; overflow:auto; padding:10px; border-radius:16px;
  border:1px dashed rgba(50,255,122,.22); background: rgba(0,0,0,.18); font-size:11px; color: rgba(215,255,211,.88);
}

.afexkidz-42 .afx42-modal{ position:fixed; inset:0; z-index:99999; display:none; align-items:center; justify-content:center;
  background: rgba(0,0,0,.62); padding:16px;
}
.afexkidz-42 .afx42-modal.on{ display:flex; }
.afexkidz-42 .mwin{ width:min(920px, 100%); max-height:88vh; overflow:auto;
  border:1px solid rgba(50,255,122,.18); border-radius:18px; background: linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.40));
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
}
.afexkidz-42 .mh{ position:sticky; top:0; display:flex; justify-content:space-between; gap:10px; align-items:center;
  padding:10px; border-bottom:1px solid rgba(255,255,255,.06); background: rgba(0,0,0,.40);
}
.afexkidz-42 .mt{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color: rgba(235,255,240,.92); }
.afexkidz-42 .mb{ padding:12px; font-size:12px; line-height:1.45; color: rgba(215,255,211,.92); }
.afexkidz-42 .mb code{ background: rgba(0,0,0,.30); border:1px solid rgba(255,255,255,.06); padding:2px 6px; border-radius:10px; }

.afexkidz-42 .afx42-pop{ position:fixed; z-index:99998; right:14px; bottom:14px; width:min(520px, calc(100vw - 28px));
  border:1px solid rgba(50,255,122,.18); border-radius:18px; overflow:hidden; display:none;
  background: linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.40));
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
}
.afexkidz-42 .afx42-pop.on{ display:block; }
.afexkidz-42 .ph{ display:flex; justify-content:space-between; gap:10px; align-items:center; flex-wrap:wrap;
  padding:10px; border-bottom:1px solid rgba(255,255,255,.06); background: rgba(0,0,0,.40);
}
.afexkidz-42 .pt{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; }
.afexkidz-42 .pb{ padding:10px; display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.afexkidz-42 .blk{ border:1px solid rgba(255,255,255,.06); background: rgba(0,0,0,.22); border-radius:16px; padding:10px; }
.afexkidz-42 .blk .bh{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color: rgba(235,255,240,.92); margin-bottom:8px; }
.afexkidz-42 .r{ display:grid; grid-template-columns: 1fr; gap:6px; margin-top:8px; }
.afexkidz-42 .r:first-child{ margin-top:0; }
.afexkidz-42 .r label{ font-size:10px; }
.afexkidz-42 .r input[type="range"]{ width:100%; }

@media (max-width: 980px){
  .afexkidz-42 .afx42-actions{ grid-template-columns: 1fr; }
  .afexkidz-42 canvas.mon{ height:260px; }
  .afexkidz-42 .grid{ grid-template-columns: repeat(7, 1fr); gap:8px; }
  .afexkidz-42 .afx42-seq .row{ grid-template-columns: repeat(21, 1fr); }
  .afexkidz-42 .cell{ height:30px; }
  .afexkidz-42 .afx42-pop{ left:14px; right:14px; bottom:14px; width:auto; }
  .afexkidz-42 .pb{ grid-template-columns: 1fr; }
}

/* Popover backdrop (tap outside to close) */
.afexkidz-42 .afx42-popback{
  position:fixed; inset:0; z-index:99997; display:none;
  background: rgba(0,0,0,.45);
}
.afexkidz-42 .afx42-popback.on{ display:block; }

/* Bigger close for touch */
.afexkidz-42 .afx42-pop .btn.sm.danger,
.afexkidz-42 .afx42-modal .btn.sm.danger{
  padding:10px 12px;
  border-radius:12px;
  font-size:12px;
}

/* MUTE ALL (minimal, safe) */
.afexkidz-42 .afx42-answerRow{ display:grid; grid-template-columns: 1fr; gap:10px; }
@media (min-width: 981px){
  .afexkidz-42 .afx42-answerRow{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 980px){ .afexkidz-42 .kgrid{ grid-template-columns: repeat(6, 1fr); } }

.afexkidz-42 .btn.on{ border-color: rgba(255,230,120,.40); box-shadow: 0 0 0 2px rgba(255,230,120,.10); }

/* Chance labels inside sequencer cells */
.afexkidz-42 .cell{ position:relative; }
.afexkidz-42 .cell .lab{
  position:absolute; right:6px; bottom:4px;
  font-size:10px; letter-spacing:.08em;
  color: rgba(255,230,120,.92);
  user-select:none; pointer-events:none;
}
.afexkidz-42 .cell.chance{ border-color: rgba(255,230,120,.40); }
.afexkidz-42 .cell.chance33{ border-color: rgba(255,180,80,.45); }