:root {
      --bg-0: #040914;
      --bg-1: #071326;
      --bg-2: #0b1f3f;
      --panel: rgba(9, 23, 43, 0.72);
      --panel-strong: rgba(11, 25, 47, 0.9);
      --panel-soft: rgba(255, 255, 255, 0.045);
      --line: rgba(255, 255, 255, 0.13);
      --line-soft: rgba(255, 255, 255, 0.08);
      --text: #f4f7fb;
      --muted: #b8c3d4;
      --muted-2: #8390a5;
      --red: #ff5a55;
      --red-deep: #b8332f;
      --red-soft: rgba(255, 90, 85, 0.13);
      --blue: #5ab7ff;
      --cyan: #46e0f2;
      --violet: #a777ff;
      --green: #6ad98d;
      --amber: #ffbd58;
      --radius: 18px;
      --shadow: 0 32px 90px rgba(0, 0, 0, 0.38);
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 12% 18%, rgba(255, 90, 85, 0.18), transparent 25%),
        radial-gradient(circle at 78% 8%, rgba(64, 133, 255, 0.22), transparent 32%),
        radial-gradient(circle at 70% 58%, rgba(76, 232, 255, 0.08), transparent 30%),
        linear-gradient(140deg, var(--bg-0) 0%, var(--bg-1) 42%, var(--bg-2) 100%);
      line-height: 1.5;
      min-height: 100vh;
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
      background-size: 64px 64px;
      mask-image: radial-gradient(circle at 55% 18%, black, transparent 65%);
      opacity: 0.48;
      z-index: -2;
    }

    body::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background-image: radial-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1px);
      background-size: 22px 22px;
      mask-image: linear-gradient(90deg, transparent 0%, transparent 44%, black 66%, transparent 100%);
      opacity: 0.16;
      z-index: -1;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    .tblogo
{
	background: url('twinBASIClogo_darkSmall.png');
    width: 150px;
    height: 100%;
    min-height: 45px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

body.light-mode .tblogo
{
	background: url('twinBASIClogo_lightSmall.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
 }

    .container {
      width: min(1180px, calc(100% - 48px));
      margin: 0 auto;
    }

    .glass {
      background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.035));
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
      backdrop-filter: blur(22px);
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 20;
      background: rgba(4, 9, 20, 0.76);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--line-soft);
    }

    .nav {
      height: 88px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
    }

    .logo {
      font-size: 31px;
      font-weight: 870;
      letter-spacing: -0.06em;
      white-space: nowrap;
    }

    .logo span {
      color: var(--red);
    }

    .nav-links {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 32px;
      color: rgba(255,255,255,0.86);
      font-size: 15px;
      font-weight: 650;
    }

    .nav-links a {
      transition: color 0.18s ease, opacity 0.18s ease;
    }

    .nav-links a:hover {
      opacity: 0.5;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 54px;
      border-radius: 11px;
      padding: 14px 22px;
      font-weight: 760;
      font-size: 15px;
      border: 1px solid transparent;
      transition: 0.18s ease;
      cursor: pointer;
    }

    .btn-primary {
      color: white;
      background: linear-gradient(135deg, #ff716b 0%, #c8423e 55%, #8d2d2b 100%);
      box-shadow: 0 18px 40px rgba(255, 90, 85, 0.22);
    }

    .btn-primary:hover {
      transform: translateY(-1px);
      box-shadow: 0 22px 50px rgba(255, 90, 85, 0.28);
    }

    .btn-secondary {
      color: #f1f6ff;
      border-color: rgba(255,255,255,0.22);
      background: rgba(255,255,255,0.035);
    }

    .btn-secondary:hover {
      border-color: rgba(255,255,255,0.36);
      background: rgba(255,255,255,0.07);
    }

    .theme-toggle {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      height: 44px;
      padding: 0 14px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(255,255,255,0.05);
      color: var(--muted);
      cursor: pointer;
      transition: 0.18s ease;
      backdrop-filter: blur(16px);
    }

    .theme-toggle:hover {
      border-color: rgba(255,255,255,0.24);
    }

    .theme-toggle-track {
      position: relative;
      width: 46px;
      height: 24px;
      border-radius: 999px;
      background: linear-gradient(135deg, rgba(255,90,85,0.4), rgba(90,183,255,0.4));
    }

    .theme-toggle-thumb {
      position: absolute;
      top: 3px;
      left: 24px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: white;
      box-shadow: 0 4px 12px rgba(0,0,0,0.35);
      transition: 0.2s ease;
    }

    .theme-toggle-label {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.01em;
    }

    body.light-mode {
      --bg-0: #f7f9fd;
      --bg-1: #f3f6fb;
      --bg-2: #e9eef8;
      --panel: rgba(255,255,255,0.82);
      --panel-strong: rgba(255,255,255,0.96);
      --panel-soft: rgba(255,255,255,0.7);
      --line: rgba(20,30,50,0.1);
      --line-soft: rgba(20,30,50,0.06);
      --text: #111827;
      --muted: #5b6578;
      --muted-2: #6e7a90;
      color: var(--text);
      background:
        radial-gradient(circle at 12% 18%, rgba(255, 90, 85, 0.12), transparent 25%),
        radial-gradient(circle at 78% 8%, rgba(64, 133, 255, 0.12), transparent 32%),
        linear-gradient(140deg, var(--bg-0) 0%, var(--bg-1) 42%, var(--bg-2) 100%);
    }

    body.light-mode .site-header {
      background: rgba(255,255,255,0.78);
    }

    body.light-mode .nav-links,
    body.light-mode .announcement .container,
    body.light-mode .footer-links,
    body.light-mode .social-links,
    body.light-mode .hero h2,
    body.light-mode .card h3,
    body.light-mode .update-title,
    body.light-mode .subscribe h3,
    body.light-mode .project-pane,
    body.light-mode .code-tab,
    body.light-mode .immediate,
    body.light-mode pre {
      color: #172033;
    }

    body.light-mode .hero p,
    body.light-mode .card p,
    body.light-mode .subscribe p,
    body.light-mode .update-date,
    body.light-mode .copyright {
      color: #5f6b7d;
    }

    body.light-mode .card,
    body.light-mode .subscribe,
    body.light-mode .theme-toggle,
    body.light-mode .eyebrow {
      background: rgba(255,255,255,0.7);
      border-color: rgba(20,30,50,0.08);
      box-shadow: 0 24px 60px rgba(30,50,90,0.08);
    }

    body.light-mode .btn-secondary {
      color: #1c2433;
      border-color: rgba(20,30,50,0.14);
      background: rgba(255,255,255,0.65);
    }

    .ide-stage {
      position: relative;
      perspective: 1200px;
      transform-style: preserve-3d;
    }

    .ide-card {
      position: relative;
      min-height: 430px;
      border-radius: 18px;
      overflow: hidden;
      background: linear-gradient(150deg, rgba(13,22,36,0.98), rgba(5,13,25,0.95));
      border: 1px solid rgba(255,255,255,0.17);
      box-shadow: 0 32px 90px rgba(0,0,0,0.48), 0 0 0 1px rgba(80,160,255,0.04) inset;
      transform: rotateY(-13deg) rotateX(2deg) rotateZ(-1.2deg) translateX(0px);
      transform-origin: right center;
      isolation: isolate;
    }

    45% { opacity: 0.42; transform: translateY(8px) scale(0.985); filter: blur(2px); }
      100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
    }

    .ide-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 10% 0%, rgba(255, 90, 85, 0.12), transparent 28%),
        radial-gradient(circle at 100% 0%, rgba(90, 183, 255, 0.14), transparent 36%);
      pointer-events: none;
    }

    .ide-titlebar,
    .ide-menubar,
    .ide-toolbar,
    .ide-body {
      position: relative;
      z-index: 1;
    }

    .ide-titlebar {
      height: 43px;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 14px;
      color: #cdd6e4;
      font-size: 13px;
      border-bottom: 1px solid rgba(255,255,255,0.09);
      background: rgba(255,255,255,0.035);
    }

    .ide-dot {
      width: 11px;
      height: 11px;
      border-radius: 50%;
    }

    .ide-dot.red { background: #ff6a5f; }
    .ide-dot.amber { background: #ffbd58; }
    .ide-dot.green { background: #66d483; }

    .ide-title {
      margin-left: 8px;
    }

    .ide-menubar {
      height: 36px;
      display: flex;
      align-items: center;
      gap: 20px;
      padding: 0 16px;
      color: #ccd7e8;
      font-size: 12px;
      border-bottom: 1px solid rgba(255,255,255,0.07);
    }

    .ide-toolbar {
      height: 40px;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 16px;
      background: rgba(255,255,255,0.028);
      border-bottom: 1px solid rgba(255,255,255,0.07);
    }

    .tool-icon {
      width: 16px;
      height: 16px;
      border: 1px solid rgba(255,255,255,0.22);
      border-radius: 4px;
      background: rgba(255,255,255,0.06);
    }

    .tool-icon:nth-child(3n) { border-color: rgba(90,183,255,0.38); }
    .tool-icon:nth-child(4n) { border-color: rgba(255,90,85,0.36); }

    .ide-body {
      display: grid;
      grid-template-columns: 220px 1fr;
      min-height: 311px;
    }

    .project-pane {
      padding: 16px;
      border-right: 1px solid rgba(255,255,255,0.08);
      background: rgba(0,0,0,0.12);
      color: #d4deed;
      font-size: 13px;
    }

    .pane-title {
      display: flex;
      justify-content: space-between;
      margin-bottom: 14px;
      color: #f4f7fb;
      font-weight: 760;
    }

    .tree div {
      margin: 8px 0;
    }

    .tree .indent {
      padding-left: 18px;
      color: #aeb9ca;
    }

    .code-pane {
      display: grid;
      grid-template-rows: 39px 1fr 110px;
      background: rgba(2,8,17,0.72);
    }

    .code-tab {
      display: flex;
      align-items: center;
      padding: 0 16px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.025);
      color: #e8eff8;
      font-size: 13px;
      font-weight: 660;
    }

    pre {
      margin: 0;
      padding: 18px 22px;
      color: #dae5f5;
      font: 15px/1.7 Consolas, Monaco, "Courier New", monospace;
    }

    .keyword { color: #7eb6ff; }
    .string { color: #b8f783; }

    .immediate {
      border-top: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.025);
      padding: 12px 18px;
      color: #e7eef9;
      font: 14px/1.6 Consolas, Monaco, "Courier New", monospace;
    }

    .demo-caption {
      position: absolute;
      left: 28px;
      right: 28px;
      bottom: 24px;
      z-index: 5;
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 15px 17px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,0.2);
      background: linear-gradient(135deg, rgba(4,9,20,0.86), rgba(13,31,58,0.8));
      box-shadow: 0 22px 55px rgba(0,0,0,0.42);
      backdrop-filter: blur(20px);
      transform: none;
    }

    .demo-caption::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: radial-gradient(circle at 12% 0%, rgba(255,90,85,0.18), transparent 34%), radial-gradient(circle at 86% 20%, rgba(90,183,255,0.16), transparent 36%);
      pointer-events: none;
    }

    .demo-kicker,
    .demo-text,
    .demo-progress {
      position: relative;
      z-index: 1;
    }

    .demo-kicker {
      flex: 0 0 auto;
      padding: 7px 10px;
      border-radius: 999px;
      background: rgba(255,90,85,0.16);
      color: #ffaaa6;
      font-size: 11px;
      font-weight: 880;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .demo-text {
      flex: 1;
      color: #f5f8ff;
      font-size: 17px;
      font-weight: 760;
      letter-spacing: -0.015em;
      opacity: 1;
      transform: translateY(0);
      transition: opacity 180ms ease;
    }

    .demo-text.changing {
      opacity: 0;
    }

    .demo-progress {
      width: 76px;
      height: 4px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(255,255,255,0.16);
    }

    .demo-progress-bar {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--red), var(--blue));
      transform-origin: left center;
      animation: demoProgress 4.2s linear infinite;
    }

    @keyframes demoProgress {
      from { transform: scaleX(0); }
      to { transform: scaleX(1); }
    }

    .section {
      position: relative;
      z-index: 1;
      padding: 34px 0 72px;
    }

    .feature-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 22px;
    }

    .card {
      background: linear-gradient(145deg, rgba(255,255,255,0.075), rgba(255,255,255,0.035));
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: 0 24px 60px rgba(0,0,0,0.24);
      backdrop-filter: blur(18px);
    }

    .feature-card {
      min-height: 284px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 30px 28px;
    }

    .feature-card:nth-child(1) .icon-box { color: #dba7ff; background: rgba(167,119,255,0.13); }
    .feature-card:nth-child(2) .icon-box { color: #80c7ff; background: rgba(90,183,255,0.13); }
    .feature-card:nth-child(3) .icon-box { color: #5be4f4; background: rgba(70,224,242,0.12); }
    .feature-card:nth-child(4) .icon-box { color: #ff8bda; background: rgba(255,90,180,0.12); }

    .icon-box {
      width: 62px;
      height: 62px;
      display: grid;
      place-items: center;
      border-radius: 15px;
      margin-bottom: 28px;
      border: 1px solid rgba(255,255,255,0.1);
display: none;
    }

    .card h3 {
      margin: 0 0 14px;
      color: #f7f9fd;
      font-size: 21px;
      letter-spacing: -0.02em;
    }

    .card p {
      margin: 0;
      color: var(--muted);
      font-size: 16px;
    }

    .learn {
      margin-top: auto;
      color: #ff837f;
      font-weight: 820;
    }

    .split-grid {
      display: grid;
      grid-template-columns: 1.2fr 0.88fr;
      gap: 24px;
      margin-top: 26px;
    }

    .why-card {
      min-height: 360px;
      display: grid;
      grid-template-columns: 1fr 250px;
      align-items: center;
      gap: 28px;
      padding: 30px;
    }

    .check-list {
      margin: 24px 0 30px;
      padding: 0;
      list-style: none;
    }

    .check-list li {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      margin: 16px 0;
      color: #d7dfeb;
    }

    .light-mode .check-list li {
color: #3f3f3f;
    }

.check-list li::before {
  content: "\2713";
  color: #ff7d78;
  font-weight: 900;
}

    .orbit-graphic {
      position: relative;
      height: 230px;
      display: grid;
      place-items: center;
    }

    .orbit-graphic::before,
    .orbit-graphic::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      border: 1px dashed rgba(126, 182, 255, 0.35);
    }

    .orbit-graphic::before {
      width: 210px;
      height: 210px;
    }

    .orbit-graphic::after {
      width: 146px;
      height: 146px;
      border-color: rgba(255, 90, 85, 0.38);
    }

    .monitor {
      position: relative;
      z-index: 1;
      width: 100px;
      height: 80px;
      display: grid;
      place-items: center;
      border-radius: 13px;
      color: white;
      font-size: 48px;
      font-weight: 900;
      letter-spacing: -0.08em;
background: url(tbIcon1.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    }

    .monitor span {
      color: var(--red);
    }

    .updates-card {
      padding: 30px;
    }

    .updates {
      padding: 8px 0 0;
    }

    .update-row {
      display: grid;
      grid-template-columns: 110px 1fr;
      gap: 0px;
      padding: 20px 0;
      border-bottom: 1px solid rgba(255,255,255,0.09);
    }

    .update-row:last-child {
      border-bottom: 0;
    }

    .pill {
      justify-self: start;
      padding: 7px 12px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 850;
      align-content: center;
    }

    .pill.feature { 
color: #947483;
    background: rgb(255 119 119 / 63%);
    color: white;
    font-size: 15px;
 }
    .pill.improvement { color: #8ed0ff; background: rgba(90,183,255,0.16); }
    .pill.fix { color: #aef0bf; background: rgba(106,217,141,0.14); }

    .update-title {
      margin: 0 0 4px;
      color: #edf3fb;
      font-weight: 650;
    }

    .update-date {
      color: var(--muted-2);
      font-size: 13px;
    }

    .subscribe {
      margin-top: 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: var(--radius);
      padding: 24px 30px;
      background:
        radial-gradient(circle at 6% 50%, rgba(255,90,85,0.18), transparent 18%),
        linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.035));
      backdrop-filter: blur(18px);
    }

    .subscribe-left {
      display: flex;
      align-items: center;
      gap: 20px;
    }

    .mail-icon {
      width: 62px;
      height: 62px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: linear-gradient(135deg, rgba(255,90,85,0.82), rgba(137,72,255,0.5));
      color: white;
      flex: 0 0 auto;
      box-shadow: 0 16px 34px rgba(255,90,85,0.18);
    }

    .subscribe h3 {
      margin: 0 0 3px;
      color: #f7f9fd;
      font-size: 21px;
    }

    .subscribe p {
      margin: 0;
      color: var(--muted);
    }

    .site-footer {
      position: relative;
      z-index: 1;
      padding: 38px 0 46px;
      border-top: 1px solid rgba(255,255,255,0.09);
      background: rgba(0,0,0,0.1);
	  margin-top: 30px;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 30px;
    }

    .footer-links,
    .social-links {
      display: flex;
      align-items: center;
      gap: 26px;
      color: var(--muted);
      font-size: 14px;
    }

    .footer-links a:hover,
    .social-links a:hover {
      color: white;
    }

    .social-links {
      justify-content: flex-end;
    }

    .copyright {
      margin-top: 28px;
      color: var(--muted-2);
      font-size: 13px;
    text-align: center;
    }

    svg {
      display: block;
    }

    @media (max-width: 980px) {
      .nav-links {
        display: none;
      }

      .hero-grid,
      .split-grid,
      .why-card {
        grid-template-columns: 1fr;
      }

      .hero-grid {
        min-height: auto;
      }

      .ide-card {
        transform: none;
      }

      .feature-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .footer-grid {
        grid-template-columns: 1fr;
      }

      .social-links {
        justify-content: flex-start;
      }
    }

    @media (max-width: 640px) {
      .container {
        width: min(100% - 28px, 1180px);
      }

      .nav {
        height: 72px;
      }

      .nav .btn {
        display: none;
      }

      .announcement .container {
        text-align: center;
        flex-wrap: wrap;
        padding: 12px 0;
      }

      .hero-grid {
        padding: 52px 0;
      }

      .hero h1 {
        font-size: 58px;
      }

      .hero h2 {
        font-size: 34px;
      }

      .hero p {
        font-size: 17px;
      }

      .hero-actions,
      .subscribe {
        align-items: stretch;
        flex-direction: column;
      }

      .btn {
        width: 100%;
      }

      .ide-body {
        grid-template-columns: 1fr;
      }

      .project-pane {
        display: none;
      }

      .feature-grid {
        grid-template-columns: 1fr;
      }

      .section {
        padding-bottom: 48px;
      }
    }

#release-popup-overlay {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.55);
    z-index: 9999;
}

#release-popup-box {
    background: #3b3b3b;
    color: #222;
    max-width: 700px;
    max-height: 70vh;
    overflow: auto;
    margin: 8vh auto;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.35);
}

.light-mode #release-popup-box
{
	background: white;
}

#release-popup-box pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: inherit;
    line-height: 1.5;
    margin-top: 16px;
}

#release-popup-box pre .note-line {
    display: block;
    padding-left: 22px;
    text-indent: -22px;
    margin-bottom: 8px;
	font-family: monospace;
}

.release-close-button {
    display: inline-block;
    background: #c63b3b;
    color: #fff !important;
    text-decoration: none;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 600;
    margin-top: 20px;
}

.release-close-button:hover {
    background: #a92f2f;
}

.release-close-container {
    text-align: center;
}

    :root {
      color-scheme: light;
      --page-bg: #f7f8fb;
      --text: #1f2937;
      --track-bg: #ffffff;
      --track-border: #c9ced8;
      --thumb-bg: #f9fafb;
      --thumb-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
      --sun: #f59e0b;
      --moon: #64748b;
    }

    [data-theme="dark"] {
      color-scheme: dark;
      --page-bg: #10131a;
      --text: #f3f4f6;
      --track-bg: #1f2633;
      --track-border: #3a4558;
      --thumb-bg: #111827;
      --thumb-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
      --sun: #6b7280;
      --moon: #f8fafc;
    }

    .theme-toggle {
      --toggle-width: 76px;
      --toggle-height: 38px;
      --toggle-padding: 3px;
      --thumb-size: 30px;
      --thumb-travel: calc(var(--toggle-width) - var(--thumb-size) - (var(--toggle-padding) * 2) - 2px);

      position: relative;
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      justify-items: center;
      box-sizing: border-box;
      width: var(--toggle-width);
      height: var(--toggle-height);
      padding: var(--toggle-padding);
      border: 1px solid var(--track-border);
      border-radius: 999px;
      background: var(--track-bg);
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
      cursor: pointer;
      transition: background-color 260ms ease, border-color 260ms ease;
      -webkit-tap-highlight-color: transparent;
    }

    .theme-toggle input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .theme-toggle::before {
      content: "";
      position: absolute;
      top: 50%;
      left: var(--toggle-padding);
      width: var(--thumb-size);
      height: var(--thumb-size);
      border-radius: 999px;
      background: var(--thumb-bg);
      box-shadow: var(--thumb-shadow);
      transform: translateY(-50%) translateX(0);
      transition:
        transform 300ms cubic-bezier(.2, .8, .2, 1),
        background-color 260ms ease,
        box-shadow 260ms ease;
      z-index: 1;
      transform: translateY(-50%) translateX(0);
      background: transparent;
    border: 1px solid #ffffff;
    outline: 1px solid #969696;
    }

    .theme-toggle:has(input:checked)::before {
      transform: translateY(-50%) translateX(var(--thumb-travel));
    }

    .theme-toggle:focus-within {
      outline: 2px solid #60a5fa;
      outline-offset: 3px;
    }


.featureSection {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 470px;
    gap: 20px;
    align-items: start;
    padding: 30px 0;
}

.featureSection.reverse {
    grid-template-columns: 470px minmax(0, 1fr);
}

.featureText {
    min-width: 0;
}

.featureVisual {
    width: 450px;
    height: 300px;
    border: 1px solid black;
    border-radius: 10px;
    justify-self: center;
}

.featureVisualContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 25px;
}

.featureCaption {
    font-size: 14px;
    font-style: italic;
    color: var(--muted);
    text-align: center;
}

.featureVisual1
{
    background: url(tbPhotoDemon.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.featureVisual2
{
    background: url(tbBitness.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.featureVisual3
{
    background: url(tbLemsDebugging.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.featureVisual4
{
    background: url(tbQRCode.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.featureSection.reverse .featureVisual {
    grid-column: 1;
    grid-row: 1;
}

.featureSection.reverse .featureText {
    grid-column: 2;
    grid-row: 1;
}

@media (max-width: 800px) {
    .featureSection,
    .featureSection.reverse {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 56px 0;
    }

    .featureVisual,
    .featureSection.reverse .featureVisual,
    .featureSection.reverse .featureText {
        grid-column: auto;
        grid-row: auto;
    }

    .featureVisual {
        width: 100%;
        max-width: 360px;
        height: 240px;
    }
}

@media (max-width: 800px) {
    .featureSection,
    .featureSection.reverse {
        grid-template-columns: 1fr;
    }

    .featureText,
    .featureSection.reverse .featureText {
        grid-column: 1;
        grid-row: 1;
    }

    .featureVisual,
    .featureSection.reverse .featureVisual {
        grid-column: 1;
        grid-row: 2;
    }
}

.featureVisual {
    cursor: zoom-in;
}

.licenceModal, .licenceModalPart2, .communityEditionModal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    padding: 48px;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(6px);
}

#communityEditionModalInner
{
    background: #292929;
    padding: 20px;
    border-radius: 10px;
}

.light-mode #communityEditionModalInner
{
    background: white;
}

.licenceModal.is-open, .licenceModalPart2.is-open, .communityEditionModal.is-open {
    display: flex;
    align-items: center;
    justify-content: center;
}

.licenceModalBox {
    position: relative;
    max-width: min(1200px, 94vw);
    max-height: 90vh;
    padding: 18px;
    border-radius: 16px;
    background: #10131a;
    box-shadow: 0 24px 80px rgba(0,0,0,0.45);
}

.licenceModalBox img {
    display: block;
    max-width: 100%;
    max-height: 76vh;
    border-radius: 10px;
}

.licenceModalCaption {
    margin-top: 12px;
    color: #dbe4f0;
    font-size: 14px;
    font-style: italic;
    text-align: center;
}

.licenceModalClose {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: #c63b3b;
    color: white;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.bodyFooterImportant
{
    font-weight: bold;
}

.bodyFooterImportant a
{
   color: #b3b3f9;
   text-decoration-line: underline;
}

.light-mode .bodyFooterImportant a
{
   color: blue;
}

h2 {
    scroll-margin-top: 120px;
}

.supportButton
{
margin-left: 10px;
    margin-bottom: 30px;
}







.licensingPage {
  max-width: 1180px;
  margin: 0 auto;
  padding: 48px 24px;
}

.licensingHero {
  margin-bottom: 40px;
}

.licensingHero .eyebrow {
  color: var(--red, #d40000);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.licensingHero h1 {
  font-size: 3vw;
  line-height: 1;
  margin: 0 0 18px;
}

.licensingHero p {
  font-size: 18px;
  color: var(--muted, #667085);
}

.pricingCards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-bottom: 56px;
}

.pricingCard {
  position: relative;
  padding: 26px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  box-shadow: 0 20px 50px rgba(0,0,0,.18);
padding-bottom: 65px;
}

.pricingCard.featured {
  border-color: #ff5a55;
}

.pricingCard.vip {
  border-color: rgba(190,190,190,.4);
}

.pricingCard.gold {
  border-color: rgba(245,190,60,.5);
}

.pricingCard h2 {
  margin: 0 0 8px;
}

.price {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 12px;
}

.pricingCard p {
  color: var(--muted, #667085);
}

.pricingCard ul {
  padding-left: 18px;
  margin: 18px 0 28px;
}

.pricingCard li {
  margin-bottom: 7px;
}


.pricingCard button,
.licenceForm button {
  border: 0;
  border-radius: 999px;
  padding: 11px 18px;
  font-weight: 700;
  background: linear-gradient(135deg, #ff716b, #b8332f);
  color: white;
  cursor: pointer;
}


.pricingCard button {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.licenceForm button {
  position: static;
  transform: none;
}

.badge {
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,90,85,.14);
  color: #ff5a55;
  font-size: 12px;
  font-weight: 800;
}

.comparisonTableWrap {
  overflow-x: auto;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
}

.comparisonTable {
  width: 100%;
  min-width: 880px;
  border-collapse: collapse;
}

.comparisonTable th,
.comparisonTable td {
  padding: 13px 14px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  text-align: center;
}

.comparisonTable th:first-child,
.comparisonTable td:first-child {
  text-align: left;
  font-weight: 700;
}

.licenceModalOverlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.licenceModalOverlay.is-open {
  display: flex;
}

.modalClose {
  position: absolute;
  top: 12px;
  right: 14px;
  border: 0;
  background: transparent;
  color: white;
  font-size: 28px;
  cursor: pointer;
}

.licenceForm {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}

.licenceForm label {
  display: grid;
  gap: 6px;
  font-size: 14px;
}

.licenceForm input,
.licenceForm textarea {
  width: 100%;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,.06);
  color: white;
  font: inherit;
}

@media (max-width: 900px) {
  .pricingCards {
    grid-template-columns: 1fr;
  }
}


.comparisonTableWrap {
    overflow-x: auto;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.14);
    background: transparent;
    box-shadow: 0 20px 50px rgba(0,0,0,0.28);
}

.light-mode .comparisonTableWrap {
    background: white;
}


.comparisonTable {
    width: 100%;
    min-width: 920px;
    border-collapse: collapse;
    font-size: 14px;
}

.comparisonTable thead th {
    background: rgb(116 116 116 / 39%) !important;
    color: #ffffff;
    font-weight: 700;
    font-size: 14px;
}

.comparisonTable th,
.comparisonTable td {
    padding: 14px 16px;
    border-right: 1px solid rgb(149 149 149 / 80%);
    border-bottom: 1px solid rgba(200, 200, 200, 0.50);
    text-align: center;
    vertical-align: middle;
}

.comparisonTable th:last-child,
.comparisonTable td:last-child {
    border-right: none;
}

.comparisonTable tbody tr:last-child td {
    border-bottom: none;
}

.comparisonTable td:first-child,
.comparisonTable th:first-child {
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
    background: rgb(51 51 51 / 3%);
    text-align-last: right;
}

.comparisonTable tbody tr:nth-child(even) {
    background: rgba(255,255,255,0.018);
}

.comparisonTable tbody tr:hover {
    background: rgba(255,255,255,0.035);
}

/* Status colours */

.statusYes {
    color: #42d392;
    font-weight: 700;
}

.statusNo {
    color: #ff6b6b;
    font-weight: 700;
}

.statusPartial {
    color: #ffb454;
    font-weight: 700;
}

/* Optional small muted subtext */

.comparisonTable small {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    color: rgba(255,255,255,0.55);
    font-weight: 400;
}

sup
{
    color: #808080;
    margin-left: 2px;
}

#licenceFormOuter, #licenceFormOuterPart2
{
    background: #292929;
    margin: auto;
    padding: 15px 30px;
    border-radius: 20px;
}

.light-mode #licenceFormOuter, .light-mode #licenceFormOuterPart2
{
    background: white;
}

#nextBtn, #nextBtnConfirm, #backBtnConfirm, #cancelBtn
{
    background: #db3030;
    color: white;
    border-radius: 7px;
    border-left: 2px solid #ffffff;
    border-top: 2px solid white;
    border-right: 2px solid #b1afaf;
    border-bottom: 2px solid #b1afaf;
    font-weight: bold;
    padding: 10px;
    margin: 15px;
    display: inline-block;
    float: right;
    padding: 10px 50px;
    outline: 1px solid black;
    cursor: pointer;
}

#backBtnConfirm
{
    float: left;
}

#monthlyCost, #monthlyCostConfirm
{
    display: inline-block;
    font-weight: 700;
    font-size: 25px;
    padding-top: 20px;
    text-align: center;
    width: 100%;
}

#salesTaxNotice, #salesTaxNoticeConfirm
{
    font-size: 90%;
    text-align: center;
    width: 100%;
}

#orderForm1 td, #orderForm1Confirm td
{
    padding-top: 5px;
    padding-bottom: 5px;
}

#orderForm1 select
{
    padding: 2px;
}

#orderForm1 input, #orderForm1 textarea
{
    width: 250px;
}

#orderForm1 textarea {
    height: 55px;
}

#optionLicenceCount
{
    width: 50px !important;
}

#orderForm1 .header, #orderForm1Confirm .header
{
    text-align: right;
    padding-right: 20px;
    font-weight: 500;
}

#billingPeriodGroup, #currencyGroup
{
	display: flex;
    gap: 10px;
}

#currencyGroup
{
    font-weight: bold;
    align-items: anchor-center;
}

#billingMonthlyPayPal, #billingYearlyPayPal, #billingYearlyInvoice, #billingPerpetual, #currencyGBP, #currencyEUR, #currencyUSD, #currencyCAD, #currencyAUD
{
    border: 1px solid #808080;
    padding: 10px;
font-size: 90%;
    text-align: center;
    cursor: pointer;
    display: none;
}

#currencyGBP, #currencyEUR, #currencyUSD, #currencyCAD, #currencyAUD
{
    font-weight: normal;
}

.isVisible
{
    display: block !important;
}

#billingMonthlyPayPal:hover, #billingYearlyPayPal:hover, #billingYearlyInvoice:hover, #billingPerpetual:hover, #currencyGBP:hover, #currencyEUR:hover, #currencyUSD:hover, #currencyCAD:hover, #currencyAUD:hover
{
    background: #ff000008;
}

#yearlyDiscountNotice
{
    font-style: italic;
    color: #606060;
    display: none;
    margin-top: 10px;
    font-size: 85%;
}

.groupSelectedItem
{
    outline: 1px solid red;
    background: #ff00003b;
    outline-offset: 3px;
}

.light-mode .groupSelectedItem
{
    background: #ff000024;
}

#licenceModal h2, #licenceModalPart2 h2, #communityEditionModal h2
{
    text-align: center;
    background: #80808029;
    width: 100%;
    padding: 0 10px;
}


.flashingRed {
    animation: flashOutline 0.5s infinite;
}

@keyframes flashOutline {
    0%, 50% {
        outline: 3px solid red;
    }
    51%, 100% {
        outline: 3px solid transparent;
    }
}

.everythingInHeader
{
    font-weight: bold;
}

#javascriptNotice
{
   background: yellow;
   padding: 20px;
   margin: 20px;
}

.limitedEditionNotice
{
    background: #f1f18e;
    padding: 5px 15px;
    border-radius: 4px;
    color: black !important;
    border: px solid #eda600;
    font-size: 85%;
text-align: center;
}

.announcement
{
background: #ff000026;
    padding: 6px;
}

.announcement .container
{
display: flex;
    justify-content: center;
    gap: 10px;
}

.speakerIcon
{
align-self: anchor-center;
}

.italic
{
font-style: italic;
}

.bold
{
font-weight: bold;
}

.tbLogo
{
width: 150px;
}

#orderForm1Confirm, #orderForm1
{
margin: auto;
}

#orderForm1Confirm header, #orderForm1 header
{
width: 200px;
}

.screenshotModal, .subscribeModal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    padding: 48px;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(6px);
}

.screenshotModal.is-open, .subscribeModal.is-open {
    display: flex;
    align-items: center;
    justify-content: center;
}

.screenshotModalBox {
    position: relative;
    max-width: min(1200px, 94vw);
    max-height: 90vh;
    padding: 18px;
    border-radius: 16px;
    background: #10131a;
    box-shadow: 0 24px 80px rgba(0,0,0,0.45);
}

.screenshotModalBox img, .subscribeModalBox img {
    display: block;
    max-width: 100%;
    max-height: 76vh;
    border-radius: 10px;
}

.subscribeModalBox {
position: relative;
    max-width: 600px;
    max-height: 90vh;
    padding: 18px;
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
    background: white;
    left: 50%;
    transform: translateX(-50%);
    font-size: 90%;
}

.screenshotModalCaption {
    margin-top: 12px;
    color: #dbe4f0;
    font-size: 14px;
    font-style: italic;
    text-align: center;
}

.screenshotModalClose {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: #c63b3b;
    color: white;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.subscribeModalBox input[type=text],
.subscribeModalBox input[type=email] {

    width:100%;
    box-sizing:border-box;
    padding:10px;
}

.subscribeConsent {

    display:flex !important;
    gap:8px;
    align-items:flex-start;
}

.subscribePrivacy {

    margin-top:12px;
    font-size:0.9em;
    opacity:0.8;
}

.subscribeModalBox button.button {
    margin-top: 18px;
    background: #e14b4b;
    padding: 10px 20px;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    border: 0;
}

#marketingConsent
{
	transform: scale(1.5);
}

#subscribeForm
{
	display: flex;
	flex-direction: column;
}
#subscribeForm label
{
	margin-top: 20px;
}

#vipBannerBelow
{
      background: #cc5d5d45;
	  margin-bottom: 10px;
}

.light-mode #vipBannerBelow
{
	background: #ff000057;
}

#vipGoldHeader
{
	color: white !important;
	font-size: 15px;
	font-weight: bold;
	text-align: center;
	padding-top: 5px;
	text-underline-offset: 3px;
	text-shadow: 0 0 3px BLACK;
}

#vipGoldHeader a, #vipGoldHeader a:visited
{
	color: #ffe149 !important;
	text-shadow: 0 0 5px BLACK;
	padding: 5px;
}

#vipGoldBanner
{
	display: flex;
	justify-content: center;
	gap: 10px;
	padding-top: 5px;
	padding-bottom: 7px;
}

#vipGold_AutoWeighingSystems
{
	background-color: white;
	background-image: url('https://twinbasic.com/images/vipGold_AutoWeighingSystems.png');
	background-size: contain;
	background-repeat: no-repeat;
	width: 200px;
	height: 40px;
	border-radius: 5px;
	background-position: center;
	cursor: pointer;
}

#vipGold_RepSoft
{
	background-color: white;
	background-image: url('https://twinbasic.com/images/vipGold_RepSoft.png');
	background-size: contain;
	background-repeat: no-repeat;
	width: 200px;
	height: 40px;
	border-radius: 5px;
	background-position: center;
	cursor: pointer;
}

#vipGold_XYplorerLogo
{
	background-color: white;
	background-image: url('https://twinbasic.com/images/vipGold_XYplorerLogo.png');
	background-size: cover;
	background-repeat: no-repeat;
	width: 200px;
	height: 40px;
	border-radius: 5px;
	background-position: center;
	cursor: pointer;
}

#vipGold_Kuba
{
	background-color: white;
	background-image: url('https://twinbasic.com/images/vipGold_Kuba.png');
	background-size: 80%;
	background-repeat: no-repeat;
	width: 200px;
	height: 40px;
	border-radius: 5px;
	background-position: center;
	cursor: pointer;
}

.announcement a:hover
{
	text-decoration: underline;
}

.roadmap-updated
{
	background: #ffff0033;
    display: inline-block;
    padding: 10px;
    margin: 0;
    margin-bottom: 15px;
	border: 1px solid #ff8f00;
}

.roadmap-note
{
	font-weight: bold;
    border: 1px solid grey;
    padding: 10px 30px;
    margin: 35px 0;
}

.contact-notice
{
	border: 1px solid grey;
    margin: 30px;
    padding: 25px 10px;
    padding-top: 0;
    padding-bottom: 10px;
    background: #ffff001c;
}

.email-link {
  display: inline-flex;
  align-items: center;
  gap: 1em;
}

.email-icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.content-section a
{
	text-decoration: underline;
}

.subscribeConsent
{
	margin: 20px 0;
}

#newsletterComplete
{
	text-align: center;
	width: 100%;
	margin: 20px 0;
	font-size: 140%;
}