/* =========================================================
   Lower thirds generator (Playground) – extras on top of endcredits.css
   ========================================================= */
.tbl tr.on td{background:#0d0d0d}
.tbl tr.on td.n{color:var(--tally);box-shadow:inset 3px 0 0 var(--tally)}
.tbl tr{cursor:pointer}

/* transparent preview: checkerboard behind the canvas */
.pv-screen.alpha{background-color:#1b1b1b;background-image:
  linear-gradient(45deg,#262626 25%,transparent 25%,transparent 75%,#262626 75%),
  linear-gradient(45deg,#262626 25%,transparent 25%,transparent 75%,#262626 75%);
  background-size:20px 20px;background-position:0 0,10px 10px}
.pv-sub{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.chk.sm{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.chk.sm input{width:14px;height:14px}

/* accent colour */
.swatches{display:inline-flex;align-items:center;gap:8px;justify-self:start}
.swatches input[type=color]{width:38px;height:30px;padding:2px;background:#0e0e0e;border:1px solid #2c2c2c;border-radius:3px;cursor:pointer}
.sw{width:22px;height:22px;border-radius:50%;border:1px solid #2c2c2c;background:var(--c);cursor:pointer;padding:0}
.sw[aria-pressed="true"]{box-shadow:0 0 0 2px #000,0 0 0 3px var(--bone)}
.opt[data-show-bg][hidden]{display:none}
.opts select#alphaFmt{max-width:100%}

/* export */
.exp-out{grid-template-columns:auto auto;justify-content:start}
.exp-btns{display:flex;gap:12px;flex-wrap:wrap}
.make.alt{border-color:#3a3a3a}
.make.alt:hover{border-color:var(--tally)}
.exp-msg a{margin-right:10px}
@media (max-width:520px){.make{font-size:15px;padding:11px 18px 10px}}