/* ═══════════════════════════════════════════════════
   BASE64 LAB — Light theme, mobile-first
═══════════════════════════════════════════════════ */

/* No remote font fetching (premium theme requirement) */
:root {
  --bg:    #f1f5f9;
  --surf:  #ffffff;
  --surf2: #f8fafc;
  --surf3: #f1f5f9;
  --brd:   #e2e8f0;
  --brd2:  #cbd5e1;
  --ink:   #0f172a;
  --ink2:  #1e293b;
  --ink3:  #334155;
  --mid:   #64748b;
  --muted: #94a3b8;
  --dim:   #b8c9db;
  --ac:    #111111;
  --ac2:   #333333;
  --acg:   rgba(14,165,233,.12);
  --acg2:  rgba(14,165,233,.06);
  --acb:   rgba(14,165,233,.22);
  --vc:    #8b5cf6;
  --green: #059669;
  --red:   #e11d48;
  --accent: var(--ac);

  --c-byte-0: #3b82f6;
  --c-byte-1: #8b5cf6;
  --c-byte-2: #14b8a6;
  --c-grp-0:  #d97706;
  --c-grp-1:  #e11d48;
  --c-grp-2:  #059669;
  --c-grp-3:  #db2777;

  /* Fallbacks without relying on remote @font-face */
  --ff:   system-ui, sans-serif;
  --ffm:  ui-monospace, monospace;
  --ffd:  var(--ff);

  --fxs:  clamp(10px, 2.8vw, 13px);
  --fsm:  clamp(11px, 3vw,   14px);
  --fb:   clamp(12px, 3.2vw, 15px);
  --flg:  clamp(15px, 4vw,   21px);
  --fxl:  clamp(17px, 4.5vw, 26px);

  --sp1:  clamp(4px,  1.2vw,  5px);
  --sp2:  clamp(7px,  2vw,   10px);
  --sp3:  clamp(10px, 3vw,   14px);
  --sp4:  clamp(14px, 4vw,   20px);

  --rad:  8px;
  --rad2: 5px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: var(--ff);
  font-size: var(--fb);
  color: var(--ink3);
  background: var(--bg);
}

/* ═══ WIDGET ═══ */
.lab {
  width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--surf);
  border: 1px solid var(--brd);
  overflow: hidden;
}

/* Desktop: fixed height that fits inline in a page */
@media (min-width: 700px) {
  .lab {
    /* fits in page without scroll: viewport minus typical site header */
    height: clamp(520px, calc(100vh - 220px), 760px);
    border-radius: 12px;
  }
}

/* Mobile: natural flow, no fixed height */
@media (max-width: 699px) {
  body { display: block; padding: 0; }
  .lab { border-radius: 0; border-left: none; border-right: none; min-height: 100dvh; }
}

/* ═══ TOPBAR ═══ */
.lab-top {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--sp2);
  padding: 0 var(--sp3);
  height: clamp(48px, 8vw, 56px);
  background: var(--surf);
  border-bottom: 1px solid var(--brd);
  position: sticky;
  top: 0;
  z-index: 20;
}

.lab-brand {
  display: flex;
  align-items: center;
  gap: var(--sp2);
  flex-shrink: 0;
}

.brand-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ac);
  box-shadow: 0 0 0 3px var(--acg);
  animation: blink 2.5s ease-in-out infinite;
}

@keyframes blink {
  0%,100%{ box-shadow:0 0 0 4px var(--acg); }
  50%    { box-shadow:0 0 0 1px var(--acg); }
}

.brand-name {
  font-family: var(--ffd);
  font-size: var(--flg);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.03em;
  line-height: 1;
  white-space: nowrap;
}
.brand-name em { font-style: normal; color: var(--ac); }

/* nav */
.lab-nav {
  display: flex;
  gap: 2px;
  margin: 0 auto;
  background: var(--surf3);
  border: 1px solid var(--brd);
  border-radius: 10px;
  padding: 3px;
}

.nav-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp1);
  background: transparent;
  border: none;
  border-radius: 7px;
  color: var(--mid);
  font-family: var(--ff);
  font-size: var(--fsm);
  font-weight: 500;
  padding: var(--sp1) var(--sp2);
  cursor: pointer;
  transition: all .14s;
  white-space: nowrap;
  user-select: none;
  min-height: 32px;
}
.nav-btn:hover { color: var(--ink); }
.nav-btn.active {
  background: var(--ac);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(14,165,233,.3);
}

.lab-badge {
  font-size: var(--fxs);
  font-family: var(--ffm);
  color: var(--muted);
  border: 1px solid var(--brd);
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--surf3);
  flex-shrink: 0;
  white-space: nowrap;
  display: none;
}
@media (min-width: 700px) { .lab-badge { display: inline; } }

/* ═══ STAGE ═══ */
.lab-stage {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

/* Mobile: panels are natural flow, not absolute */
@media (max-width: 699px) {
  .lab-stage { position: static; overflow: visible; flex: none; }
}

/* ═══ PANELS ═══ */
.lab-panel {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

@media (max-width: 699px) {
  .lab-panel { position: static; overflow: visible; }
  .lab-panel[style*="display: none"] { display: none !important; }
}

/* ═══════════════════════════════════════════
   PANEL: TRY
═══════════════════════════════════════════ */
.try-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr clamp(80px,9vw,110px) 1fr;
  gap: var(--sp3);
  padding: var(--sp3);
}

@media (max-width: 699px) {
  .try-grid {
    grid-template-columns: 1fr;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 16px;
  }
  /* reorder: input → mid → output */
  .col-in  { order: 1; }
  .col-mid { order: 2; }
  .col-out { order: 3; }
}

.col { display: flex; flex-direction: column; gap: var(--sp2); min-height: 0; }

.col-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp2);
}

@media (max-width: 699px) {
  .col-mid { flex-direction: row; justify-content: center; padding: 4px 0; }
}

.col-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp2);
  flex-wrap: wrap;
  flex-shrink: 0;
}

.col-lbl {
  font-family: var(--ffm);
  font-size: var(--fxs);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  font-weight: 600;
}
.col-lbl-acc { color: var(--ac2); }

.fill { flex: 1; min-height: 0; display: flex; flex-direction: column; }
@media (max-width: 699px) { .fill { min-height: 130px; } }

.ta {
  flex: 1;
  width: 100%;
  background: var(--surf2);
  border: 1.5px solid var(--brd);
  border-radius: var(--rad);
  color: var(--ink);
  font-family: var(--ffm);
  font-size: var(--fsm);
  line-height: 1.65;
  padding: var(--sp2) var(--sp3);
  resize: none;
  outline: none;
  transition: border-color .14s, box-shadow .14s;
  min-height: 130px;
}
.ta:focus { border-color: var(--ac); box-shadow: 0 0 0 3px var(--acg); }
.ta::placeholder { color: var(--dim); }
.ta[readonly] { color: var(--ink2); background: var(--surf3); cursor: default; }

/* arrow + stats */
.mid-arrow { display: flex; flex-direction: column; align-items: center; gap: var(--sp1); }
@media (max-width: 699px) { .mid-arrow { flex-direction: row; } }

.arr-line {
  width: 1px;
  height: clamp(18px, 4vh, 36px);
  background: linear-gradient(to bottom, transparent, var(--ac), transparent);
}
@media (max-width: 699px) {
  .arr-line { width: 36px; height: 1px; background: linear-gradient(to right, transparent, var(--ac), transparent); }
}

.arr-head { font-size: var(--fxl); color: var(--ac); line-height: 1; }

.mid-stats {
  width: 100%;
  background: var(--surf2);
  border: 1.5px solid var(--brd);
  border-radius: var(--rad);
  padding: var(--sp2);
  display: flex;
  flex-direction: column;
  gap: var(--sp1);
}
@media (max-width: 699px) {
  .mid-stats { flex-direction: row; justify-content: space-around; width: auto; flex: 1; }
  .sdiv      { width: 1px; height: 100%; background: var(--brd); }
}

.srow { display: flex; flex-direction: column; align-items: center; }
.slbl { font-size: var(--fxs); color: var(--muted); font-family: var(--ffm); text-transform: uppercase; letter-spacing: .08em; }
.sval { font-size: var(--fsm); font-family: var(--ffm); font-weight: 600; color: var(--ink2); }
.sdiv { height: 1px; background: var(--brd); }

/* summary */
.summary {
  display: flex; align-items: center; gap: var(--sp2); flex-wrap: wrap;
  flex-shrink: 0;
  background: var(--acg2); border: 1.5px solid var(--acb);
  border-radius: var(--rad2); padding: var(--sp1) var(--sp3);
}
.sum-txt { font-size: var(--fsm); color: var(--ink2); flex: 1; line-height: 1.5; }

.err-line { font-size: var(--fsm); font-family: var(--ffm); color: var(--red); min-height: 1em; flex-shrink: 0; }
.err-line:not(:empty)::before { content: '⚠ '; }

/* viz btn */
.viz-btn {
  display: inline-flex; align-items: center; gap: var(--sp1);
  background: var(--surf3); border: 1.5px solid var(--brd2);
  border-radius: var(--rad2); color: var(--mid);
  font-family: var(--ff); font-size: var(--fsm); font-weight: 500;
  padding: var(--sp1) var(--sp3); cursor: pointer; transition: all .14s;
  flex-shrink: 0; align-self: flex-start;
}
.viz-btn:hover { border-color: var(--ac); color: var(--ac); background: var(--acg2); }
.viz-ico { font-size: var(--fb); }

/* viz sub */
.viz-sub {
  flex-shrink: 0;
  background: var(--surf2); border-top: 1.5px solid var(--brd);
  padding: var(--sp2) var(--sp3);
  display: flex; flex-direction: column; gap: var(--sp2);
  max-height: 38%; overflow: hidden;
}
.viz-hd { display: flex; align-items: center; gap: var(--sp3); flex-shrink: 0; flex-wrap: wrap; }
.viz-ttl { font-family: var(--ffm); font-size: var(--fxs); text-transform: uppercase; letter-spacing: .1em; color: var(--mid); }
.viz-hint { font-size: var(--fxs); color: var(--muted); font-style: italic; margin-right: auto; }
.viz-body { overflow: hidden; }

/* ═══════════════════════════════════════════
   PANEL: HOW
═══════════════════════════════════════════ */
.how-grid {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: clamp(220px,28vw,340px) 1fr;
  gap: var(--sp3); padding: var(--sp3); overflow: hidden;
}
@media (max-width: 699px) {
  .how-grid { grid-template-columns: 1fr; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 16px; }
}

.how-left { display: flex; flex-direction: column; gap: var(--sp2); overflow-y: auto; padding-right: 2px; }
.how-left::-webkit-scrollbar { width: 3px; }
.how-left::-webkit-scrollbar-thumb { background: var(--brd2); border-radius: 2px; }

.how-block { background: var(--surf); border: 1.5px solid var(--brd); border-radius: var(--rad); padding: var(--sp2) var(--sp3); flex-shrink: 0; }

.blk-ttl { font-family: var(--ffm); font-size: var(--fxs); text-transform: uppercase; letter-spacing: .1em; color: var(--mid); margin-bottom: var(--sp2); font-weight: 600; }
.blk-note { color: var(--muted); font-family: var(--ff); text-transform: none; letter-spacing: 0; font-weight: 400; }

.live-inp {
  width: 100%;
  background: var(--surf2); border: 1.5px solid var(--brd); border-radius: var(--rad2);
  color: var(--ink); font-family: var(--ffm); font-size: var(--fb);
  padding: var(--sp2); outline: none; transition: border-color .14s; min-height: 40px;
}
.live-inp:focus { border-color: var(--ac); box-shadow: 0 0 0 3px var(--acg); }

.facts-blk { display: flex; flex-direction: column; gap: 0; }
.fact { display: flex; gap: var(--sp2); font-size: var(--fsm); color: var(--ink3); line-height: 1.55; padding: var(--sp1) 0; border-bottom: 1px solid var(--brd); }
.fact:last-child { border: none; }
.fact strong { color: var(--ac2); }
.fi { flex-shrink: 0; font-size: var(--fb); }

.how-right { background: var(--surf); border: 1.5px solid var(--brd); border-radius: var(--rad); padding: var(--sp2) var(--sp3); overflow-y: auto; min-height: 0; }
.how-right::-webkit-scrollbar { width: 3px; }
.how-right::-webkit-scrollbar-thumb { background: var(--brd2); border-radius: 2px; }

/* ═══════════════════════════════════════════
   PANEL: STEP
═══════════════════════════════════════════ */
.step-grid {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: clamp(170px,20vw,250px) 1fr;
  gap: var(--sp3); padding: var(--sp3);
}
@media (max-width: 699px) {
  .step-grid { grid-template-columns: 1fr; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 16px; }
}

.step-ctrl {
  display: flex; flex-direction: column; gap: var(--sp3);
  background: var(--surf2); border: 1.5px solid var(--brd); border-radius: var(--rad);
  padding: var(--sp3); overflow: hidden;
}
@media (max-width: 699px) { .step-ctrl { overflow: visible; } }

.ctrl-lbl { font-family: var(--ffm); font-size: var(--fxs); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: var(--sp1); display: block; font-weight: 600; }

.ctrl-ta {
  width: 100%; height: clamp(64px,10vh,90px);
  background: var(--surf); border: 1.5px solid var(--brd); border-radius: var(--rad2);
  color: var(--ink); font-family: var(--ffm); font-size: var(--fsm);
  padding: var(--sp2); resize: none; outline: none;
  transition: border-color .14s; line-height: 1.6;
}
.ctrl-ta:focus { border-color: var(--ac); box-shadow: 0 0 0 3px var(--acg); }
.ctrl-ta::placeholder { color: var(--dim); }

.dir-row { display: flex; gap: var(--sp2); flex-wrap: wrap; }
.ctrl-btns { display: flex; flex-direction: column; gap: var(--sp2); }
.btn-full { width: 100%; }
.f1 { flex: 1; }

.prog-bar { height: 4px; background: var(--brd); border-radius: 2px; overflow: hidden; }
.prog-fill { height: 100%; background: linear-gradient(90deg, var(--ac), var(--vc)); border-radius: 2px; width: 0; transition: width .3s ease; }
.prog-meta { display: flex; justify-content: space-between; font-size: var(--fxs); font-family: var(--ffm); color: var(--muted); margin-top: 4px; }
.prog-mode { color: var(--mid); }

.step-stage { display: flex; flex-direction: column; gap: var(--sp2); min-height: 0; overflow: hidden; }
@media (max-width: 699px) { .step-stage { overflow: visible; min-height: 320px; } }

.step-card-wrap { flex: 1; min-height: 0; }
@media (max-width: 699px) { .step-card-wrap { min-height: 280px; } }

/* big card */
.step-big-card {
  background: var(--surf); border: 1.5px solid var(--brd2); border-radius: var(--rad);
  padding: var(--sp3) var(--sp4); height: 100%;
  display: flex; flex-direction: column; gap: var(--sp2);
  position: relative; overflow: hidden;
}
.step-big-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--ac), var(--vc));
  border-radius: var(--rad) var(--rad) 0 0;
}

.sbc-top { display: flex; align-items: center; gap: var(--sp2); flex-shrink: 0; }

.sbc-badge {
  width: clamp(20px,5vw,26px); height: clamp(20px,5vw,26px);
  background: var(--ac); color: #fff; border-radius: var(--rad2);
  font-family: var(--ffm); font-size: var(--fxs); font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.sbc-title { font-family: var(--ffd); font-size: var(--flg); font-weight: 700; color: var(--ink); letter-spacing: -.02em; line-height: 1.2; }
.sbc-of { font-size: var(--fxs); color: var(--muted); font-family: var(--ffm); margin-left: auto; }

.sbc-code {
  flex: 1; min-height: 60px;
  background: var(--surf2); border: 1.5px solid var(--brd); border-radius: var(--rad2);
  padding: var(--sp2) var(--sp3); font-family: var(--ffm); font-size: var(--fb);
  color: var(--ink2); line-height: 1.6; word-break: break-all; white-space: pre-wrap; overflow: hidden;
}

.sbc-detail { font-size: var(--fsm); color: var(--mid); line-height: 1.55; flex-shrink: 0; }

.sbc-viz {
  flex-shrink: 0; background: var(--surf2); border: 1.5px solid var(--brd); border-radius: var(--rad2);
  padding: var(--sp2); overflow: hidden; max-height: clamp(80px,14vh,140px);
}

/* Crumbs */
.step-crumbs { display: flex; flex-wrap: wrap; gap: var(--sp1); flex-shrink: 0; align-items: center; }

.crumb {
  background: var(--surf2); border: 1.5px solid var(--brd); border-radius: var(--rad2);
  padding: 3px 8px; font-size: var(--fxs); font-family: var(--ffm); color: var(--muted);
  display: flex; align-items: center; gap: var(--sp1); cursor: pointer; transition: all .12s; min-height: 28px;
}
.crumb:hover { border-color: var(--ac); color: var(--ink2); }
.crumb.cur   { border-color: var(--ac); color: var(--ac2); background: var(--acg2); }

.crumb-n {
  width: clamp(14px,4vw,18px); height: clamp(14px,4vw,18px);
  background: var(--surf3); color: var(--mid); border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fxs); font-weight: 600; flex-shrink: 0;
}

/* ═══════════════════════════════════════════
   SHARED COMPONENTS
═══════════════════════════════════════════ */

/* BUTTONS */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp1);
  border: 1.5px solid var(--brd2); background: var(--surf2); color: var(--ink2);
  font-family: var(--ff); font-size: var(--fsm); font-weight: 600;
  padding: clamp(6px,1.5vw,8px) clamp(10px,3vw,14px);
  border-radius: var(--rad2); cursor: pointer; transition: all .12s;
  white-space: nowrap; user-select: none; line-height: 1; min-height: 36px;
}
.btn:hover:not(:disabled) { border-color: var(--ac); color: var(--ac2); background: var(--acg2); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .35; cursor: not-allowed; }

.btn-p {
  background: var(--ac); border-color: var(--ac2); color: #fff; font-weight: 700;
  box-shadow: 0 2px 8px rgba(14,165,233,.25);
}
.btn-p:hover:not(:disabled) { background: var(--ac2); border-color: var(--ac2); color: #fff; box-shadow: 0 3px 14px rgba(14,165,233,.35); }

.btn-o { background: var(--acg2); border-color: var(--ac); color: var(--ac2); }
.btn-o:hover:not(:disabled) { background: var(--acg); color: var(--ac2); }

.btn-g { background: transparent; border-color: transparent; color: var(--mid); }
.btn-g:hover:not(:disabled) { background: var(--surf3); border-color: var(--brd); color: var(--ink2); }

.btn-sm { font-size: var(--fxs); padding: 4px 9px; min-height: 30px; }

/* TOGGLES */
.row-g  { display: flex; align-items: center; gap: var(--sp1); flex-wrap: wrap; }
.mt4    { margin-top: var(--sp1); }
.mt6    { margin-top: var(--sp2); }

.rtoggle { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fsm); color: var(--ink3); cursor: pointer; user-select: none; min-height: 32px; }
.rtoggle input { accent-color: var(--ac); }

.opts-row { display: flex; flex-wrap: wrap; gap: var(--sp2); }

.ochip { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fsm); color: var(--mid); cursor: pointer; transition: color .12s; user-select: none; min-height: 32px; }
.ochip:hover { color: var(--ink); }
.ochip input { accent-color: var(--ac); }

.presets-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pre-lbl { font-size: var(--fxs); color: var(--muted); font-family: var(--ffm); text-transform: uppercase; letter-spacing: .07em; }

.chip {
  border: 1.5px solid var(--brd); background: var(--surf2); color: var(--mid);
  font-family: var(--ffm); font-size: var(--fxs); padding: 4px 9px;
  border-radius: 4px; cursor: pointer; transition: all .12s; white-space: nowrap;
  min-height: 28px; display: inline-flex; align-items: center;
}
.chip:hover { border-color: var(--ac); color: var(--ac2); background: var(--acg2); }

/* DROPZONE */
.dropzone {
  border: 1.5px dashed var(--brd2); border-radius: var(--rad);
  padding: var(--sp4); text-align: center; color: var(--mid);
  cursor: pointer; font-size: var(--fsm); transition: all .14s;
  background: var(--surf2); flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp1); min-height: 100px;
}
.dropzone:hover, .dropzone.over { border-color: var(--ac); background: var(--acg2); color: var(--ac2); }
.dz-ico { font-size: var(--fxl); }
.fname  { font-size: var(--fxs); color: var(--green); margin-top: var(--sp1); font-family: var(--ffm); }

/* ═══════════════════════════════════════════
   BITGRID
═══════════════════════════════════════════ */
.bitgrid-row  { margin-bottom: 3px; }
.bitgrid-label { font-size: var(--fxs); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-family: var(--ffm); margin-bottom: 3px; }
.bitgrid-cells { display: flex; flex-wrap: wrap; gap: clamp(3px,.4vw,6px); align-items: flex-start; }
.bitgrid-byte, .bitgrid-group { display: flex; flex-direction: column; gap: 2px; }
.bitgrid-byte-label { font-size: var(--fxs); font-family: var(--ffm); color: var(--byte-color, var(--muted)); text-align: center; }
.bitgrid-bitcells { display: flex; gap: 1px; }
.bitgrid-bit {
  width: clamp(14px,3.5vw,20px); height: clamp(17px,4vw,24px);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ffm); font-size: var(--fxs); font-weight: 600;
  border-radius: 2px; cursor: default; transition: all .1s;
}
.bitgrid-row-8 .bitgrid-bit {
  background: color-mix(in srgb, var(--byte-color) 10%, var(--surf2));
  color: var(--byte-color);
  border: 1px solid color-mix(in srgb, var(--byte-color) 20%, transparent);
}
.bitgrid-bit-6 {
  background: color-mix(in srgb, var(--src-color) 8%, var(--surf2));
  color: var(--src-color);
  border: 1px solid color-mix(in srgb, var(--grp-color) 20%, transparent);
  border-bottom: 2px solid var(--grp-color);
}
.bitgrid-bit-hl { transform: scale(1.2); z-index: 2; border-color: var(--ac) !important; color: var(--ink) !important; box-shadow: 0 0 6px rgba(14,165,233,.35); }
.bitgrid-grp-info { display: flex; gap: 2px; align-items: center; justify-content: center; margin-top: 1px; }
.bitgrid-index { font-size: var(--fxs); font-family: var(--ffm); color: var(--muted); }
.bitgrid-char  { font-size: var(--fb);  font-family: var(--ffm); font-weight: 700; color: var(--ac2); }
.bitgrid-pad   { opacity: .4; }
.bitgrid-arrow { display: flex; align-items: center; justify-content: center; gap: var(--sp2); padding: clamp(3px,.3vw,5px) 0; color: var(--mid); font-size: var(--fsm); font-family: var(--ffm); }

/* ═══════════════════════════════════════════
   ALPHABET TABLE
═══════════════════════════════════════════ */
.alpha-table { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; width: 100%; }
.alpha-cell { display: flex; flex-direction: column; align-items: center; padding: 2px 0; border-radius: 2px; background: var(--surf3); border: 1px solid var(--brd); transition: all .12s; }
.alpha-cell.alpha-active { background: var(--acg2); border-color: var(--ac); box-shadow: 0 0 4px rgba(14,165,233,.15); }
.alpha-idx  { font-size: var(--fxs); font-family: var(--ffm); color: var(--muted); line-height: 1.2; }
.alpha-char { font-size: var(--fsm); font-family: var(--ffm); font-weight: 700; color: var(--ink2); line-height: 1.2; }
.alpha-active .alpha-char { color: var(--ac2); }
.alpha-pad  { opacity: .4; }

/* ═══════════════════════════════════════════
   LIVE DEMO
═══════════════════════════════════════════ */
.live-demo { display: flex; flex-direction: column; gap: 4px; }
.live-sec { padding: clamp(5px,.5vw,8px) clamp(6px,.6vw,10px); background: var(--surf2); border-radius: var(--rad2); border: 1px solid var(--brd); }
.live-label { font-size: var(--fxs); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-family: var(--ffm); margin-bottom: 1px; }
.live-val { font-family: var(--ffm); font-size: var(--fb); color: var(--ink2); word-break: break-all; }
.live-val-text   { color: var(--ac2); font-weight: 600; }
.live-val-result { color: var(--green); font-weight: 600; }
.live-arrow { text-align: center; color: var(--muted); font-size: var(--fb); }
.live-bitgrid { padding: clamp(4px,.4vw,6px); background: var(--surf3); border-radius: var(--rad2); border: 1px solid var(--brd); }

/* ═══════════════════════════════════════════
   TOAST
═══════════════════════════════════════════ */
.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff;
  font-size: var(--fsm); font-weight: 700; font-family: var(--ffm);
  padding: 8px 18px; border-radius: var(--rad2); z-index: 9999;
  pointer-events: none; opacity: 0; letter-spacing: .03em;
  box-shadow: 0 4px 16px rgba(0,0,0,.2); white-space: nowrap;
}
.toast.on { pointer-events: auto; }

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
.lab-foot {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp3); padding: 0 var(--sp3);
  height: clamp(32px,5vh,42px);
  background: var(--surf2); border-top: 1px solid var(--brd);
  font-size: var(--fxs); color: var(--muted); flex-wrap: wrap;
  position: sticky; bottom: 0; z-index: 10;
}
.foot-r { display: flex; gap: var(--sp1); }
.foot-r code { font-family: var(--ffm); font-size: var(--fxs); background: var(--surf3); border: 1px solid var(--brd); padding: 1px 5px; border-radius: 3px; color: var(--mid); }

/* ═══════════════════════════════════════════
   SCROLLBAR
═══════════════════════════════════════════ */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--brd2); border-radius: 2px; }
::selection { background: var(--acg); color: var(--ac2); }

/* ═══════════════════════════════════════════
   MOBILE — panels scroll, cols stack
═══════════════════════════════════════════ */
@media (max-width: 699px) {
  .lab-stage {
    flex: 1;
    height: calc(100dvh - clamp(48px,8vw,56px) - clamp(32px,5vh,42px));
    min-height: 480px;
    position: relative;
    overflow: hidden;
  }

  .lab-panel {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
  }

  .try-grid {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 100%;
    padding-bottom: 24px;
  }
  .col-in  { order: 1; }
  .col-mid { order: 2; flex-direction: row; justify-content: center; padding: 6px 0; }
  .col-out { order: 3; }

  .arr-line { width: 36px; height: 1px; background: linear-gradient(to right, transparent, var(--ac), transparent); }

  .mid-stats {
    flex-direction: row;
    justify-content: space-around;
    width: auto;
    flex: 1;
  }
  .sdiv { width: 1px; height: auto; background: var(--brd); }

  .how-grid {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 100%;
    overflow-y: visible;
    padding-bottom: 24px;
  }

  .step-grid {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 100%;
    overflow-y: visible;
    padding-bottom: 24px;
  }
  .step-stage { min-height: 320px; overflow: visible; }
  .step-card-wrap { min-height: 280px; }
  .step-ctrl { overflow: visible; }
}