/* color sequence+ — real color chips */
#stage{min-height:220px}
.row{display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center;margin-top:.7rem}
.big{font-family:var(--font-display);font-size:clamp(1.1rem,4vw,1.6rem);text-align:center;line-height:1.3}
.cseq-edit-lab{margin:.2rem 0 .4rem}
.cseq-flash{
  width:min(220px,70vw);height:min(160px,42vw);margin:.4rem auto;
  border:3px solid #fff;border-radius:6px;
  background:var(--sw,#bbb);
  box-shadow:0 6px 0 rgba(0,0,0,.16);
  display:flex;align-items:flex-end;justify-content:center;
  transition:filter .12s,transform .12s,background .08s;
}
.cseq-flash.on{filter:brightness(1.2);transform:scale(1.04);box-shadow:0 0 0 3px #fff,0 8px 18px rgba(0,0,0,.22)}
.cseq-flash-name{
  font-weight:800;font-size:1.05rem;color:#fff;margin-bottom:.7rem;
  text-shadow:0 1px 3px #000a;
}
.cseq-swatch{
  position:relative;width:72px;height:88px;border:2px solid #fff;border-radius:4px;
  background:var(--sw,#888)!important;cursor:pointer;overflow:hidden;padding:0;
  box-shadow:0 4px 0 rgba(0,0,0,.18);transition:transform .12s,box-shadow .12s,filter .12s;
}
.cseq-swatch:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.18)}
.cseq-swatch.on,.cseq-swatch:focus-visible{
  outline:3px solid var(--play-ink,#101820);outline-offset:2px;
  filter:brightness(1.12);
}
.cseq-name{
  position:absolute;left:0;right:0;bottom:6px;font-size:.68rem;font-weight:800;color:#fff;
  text-shadow:0 1px 2px #000a;pointer-events:none;
}
@media (max-width:420px){
  .cseq-swatch{width:58px;height:74px}
}