/* ===== Preview stage ===== */
    .stage{
      padding:14px;
      background:
        radial-gradient(900px 450px at 70% 30%, rgba(113,215,255,0.18), transparent 60%),
        radial-gradient(900px 600px at 35% 70%, rgba(255,92,207,0.14), transparent 60%),
        rgba(255,255,255,.65);
      border:3px solid #000;
      border-radius:14px;
      box-shadow:6px 6px 0 #000;
      position:relative;
      overflow:auto;
      min-height: 420px;
    }

    /* ===== Table styling via variables ===== */
    .table-preview{
      --t-border-color:#000000;
      --t-border-width:2px;
      --t-border-style:solid;
      --t-radius:12px;
      --t-padding:10px;
      --t-text:#111111;

      --t-header-text:#ffffff;
      --t-header-g1:#2b67ff;
      --t-header-g2:#0b2b7a;
      --t-header-mode:gradient; /* gradient | solid */
      --t-header-solid:#2b67ff;

      --t-cell-bg:#ffffff;
      --t-zebra-on:1; /* 1 | 0 */
      --t-zebra-a:#ffffff;
      --t-zebra-b:#fff6ff;

      --t-table-g1:#ffffff;
      --t-table-g2:#ffffff;
      --t-table-mode:solid; /* solid | gradient */
      --t-table-solid:#ffffff;

      --t-shadow: 4px 6px 0 rgba(0,0,0,.25);
    }

    .retro-table{
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      color: var(--t-text);
      border: var(--t-border-width) var(--t-border-style) var(--t-border-color);
      border-radius: var(--t-radius);
      overflow:hidden;
      box-shadow: var(--t-shadow);
      background:
        linear-gradient(180deg, var(--t-table-g1), var(--t-table-g2));
    }
    .table-preview[data-tablemode="solid"] .retro-table{
      background: var(--t-table-solid);
    }

    .retro-table th,
    .retro-table td{
      padding: var(--t-padding);
      border-right: var(--t-border-width) var(--t-border-style) var(--t-border-color);
      border-bottom: var(--t-border-width) var(--t-border-style) var(--t-border-color);
      vertical-align: top;
      font-size: 12px;
      line-height: 1.25;
      background: var(--t-cell-bg);
    }

    /* last col/row borders */
    .retro-table tr > *:last-child{ border-right: 0; }
    .retro-table tr:last-child > *{ border-bottom: 0; }

    /* header */
    .retro-table th{
      font-weight: 1000;
      color: var(--t-header-text);
      text-shadow: 0 1px 0 rgba(0,0,0,.25);
      position: sticky; top: 0; /* feels "app-like" in preview */
      z-index: 1;
    }
    .table-preview[data-headermode="gradient"] .retro-table th{
      background: linear-gradient(90deg, var(--t-header-g1), var(--t-header-g2));
    }
    .table-preview[data-headermode="solid"] .retro-table th{
      background: var(--t-header-solid);
    }

    /* zebra stripes for body rows (skip header row) */
    .table-preview[data-zebra="1"] .retro-table tbody tr:nth-child(odd) td{ background: var(--t-zebra-a); }
    .table-preview[data-zebra="1"] .retro-table tbody tr:nth-child(even) td{ background: var(--t-zebra-b); }

    /* editable cells */
    .cell-edit{
      outline: none;
      min-height: 16px;
      white-space: pre-wrap;
      word-break: break-word;
    }
    .cell-edit:focus{
      outline: 4px solid rgba(255,92,207,.22);
      border-radius: 8px;
      background: rgba(255,255,255,.95);
    }

    .codeOut:focus{ outline: 4px solid rgba(255,92,207,.25); }