.gls-page-wrap {
      width: 100%;
      min-height: 100vh;
      background: #000000;
      padding-top: 146px;
      padding-bottom: 36px;
      position: relative;
      z-index: 1;
    }

    .gls-synth {
      --gls-bg: #ebebeb;
      --gls-bg-soft: #f7f7f7;
      --gls-panel: rgba(255, 255, 255, 0.9);
      --gls-panel-2: rgba(255, 255, 255, 0.75);
      --gls-panel-dark-1: rgba(18, 18, 18, 0.94);
      --gls-panel-dark-2: rgba(40, 35, 30, 0.94);
      --gls-border: rgba(0, 0, 0, 0.12);
      --gls-text: #1a1a1a;
      --gls-text-soft: #3d3d3d;
      --gls-muted: #5f5f5f;
      --gls-accent: #00b49d;
      --gls-accent-2: #703994;
      --gls-knob: #00b49d;
      --gls-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);

      max-width: 1120px;
      margin: 0 auto;
      padding: 24px;
      color: var(--gls-text);
      font-family: "Montserrat", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
      line-height: 1.5;
      box-sizing: border-box;
    }

    .gls-synth * {
      box-sizing: border-box;
    }

    .gls-synth h1,
    .gls-synth h2,
    .gls-synth h3 {
      width: auto;
      margin-left: 0;
      padding-top: 0;
      text-align: left;
    }

    .gls-synth-shell {
      background:
        radial-gradient(1200px 380px at 12% -12%, rgba(0, 180, 157, 0.11), transparent 62%),
        radial-gradient(800px 340px at 95% -15%, rgba(112, 57, 148, 0.08), transparent 58%),
        linear-gradient(180deg, var(--gls-bg-soft) 0%, var(--gls-bg) 100%);
      border: 1px solid var(--gls-border);
      border-radius: 18px;
      padding: 24px;
      box-shadow: var(--gls-shadow);
    }

    .gls-synth-header {
      display: grid;
      gap: 8px;
      margin-bottom: 20px;
      position: static;
      width: auto;
      height: auto;
      z-index: auto;
      overflow: visible;
      background: transparent;
    }

    .gls-synth-brand {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      padding: 5px 10px;
      border-radius: 999px;
      border: 1px solid var(--gls-border);
      background: rgba(255, 255, 255, 0.86);
      color: #2f2f2f;
      font-size: 12px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .gls-synth-brand-logo {
      width: 20px;
      height: 20px;
      border-radius: 6px;
      margin-right: 8px;
      object-fit: cover;
    }

    .gls-synth-title {
      margin: 0;
      font-size: clamp(2rem, 3.2vw, 2.7rem);
      font-weight: 800;
      letter-spacing: 0.01em;
      color: var(--gls-text);
    }

    .gls-synth-intro {
      margin: 0;
      color: var(--gls-text-soft);
      max-width: 80ch;
      font-size: 1.08rem;
      line-height: 1.62;
    }

    .gls-booking-cta {
      margin-top: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 11px 16px;
      border-radius: 999px;
      background: #00b49d;
      border: 1px solid rgba(0, 0, 0, 0.12);
      color: #0f0f0f;
      font-size: 0.92rem;
      font-weight: 700;
      letter-spacing: 0.01em;
      text-decoration: none;
      box-shadow: 0 10px 18px rgba(0, 180, 157, 0.22);
      transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
    }

    .gls-booking-cta:hover {
      background: #00c2aa;
      transform: translateY(-1px);
      box-shadow: 0 14px 22px rgba(0, 180, 157, 0.28);
      text-decoration: none;
      color: #0a0a0a;
    }

    .gls-booking-note {
      margin: 10px 0 14px;
      max-width: 76ch;
      color: #505050;
      font-size: 0.86rem;
      line-height: 1.5;
    }

    .gls-booking-urgency {
      margin: -4px 0 16px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: #6a4b10;
      font-size: 0.78rem;
      font-weight: 600;
      background: rgba(255, 214, 120, 0.28);
      border: 1px solid rgba(180, 130, 32, 0.28);
      border-radius: 999px;
      padding: 5px 10px;
    }

    .gls-booking-urgency::before {
      content: "•";
      font-size: 0.9rem;
      line-height: 1;
    }

    .gls-lab-credit {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin: 0 0 10px 0;
      color: #4f4f4f;
      letter-spacing: 0.04em;
    }

    .gls-lab-credit-icon {
      width: 16px;
      height: 16px;
      border-radius: 4px;
      opacity: 0.8;
      filter: saturate(0.9) contrast(0.95);
      transform: translateY(-0.5px);
    }

    .gls-synth-layout {
      display: grid;
      grid-template-columns: 1fr;
      gap: 18px;
    }

    .gls-synth-focus {
      margin: 0 0 18px;
      border: 1px solid rgba(255, 255, 255, 0.26);
      background: #000000;
      box-shadow: 0 18px 38px rgba(0, 0, 0, 0.5);
      color: #ffffff;
    }

    .gls-synth-focus h2 {
      margin-bottom: 6px;
      font-size: 1.02rem;
      color: #f3eee5;
    }

    .gls-synth-focus p {
      margin: 0 0 10px;
      color: #d9d1c5;
      font-size: 0.88rem;
    }

    .gls-synth-focus .gls-synth-actions {
      margin-top: 12px;
    }

    .gls-synth-focus .gls-synth-status {
      margin-top: 8px;
      margin-bottom: 0;
      color: #f2ede4;
    }

    .gls-synth-panel {
      background: linear-gradient(180deg, var(--gls-panel) 0%, var(--gls-panel-2) 100%);
      border: 1px solid var(--gls-border);
      border-radius: 14px;
      padding: 16px;
    }

    .gls-synth-panel h2 {
      margin: 0 0 12px;
      width: auto;
      margin-left: 0;
      padding-top: 0;
      text-align: left;
      font-size: 1rem;
      font-weight: 700;
      color: #141414;
      letter-spacing: 0.02em;
    }

    .gls-synth-controls {
      display: grid;
      gap: 12px;
    }
    .gls-iphone-hint {
      margin: 0 0 10px 0;
      padding: 8px 10px;
      border-radius: 8px;
      border: 1px solid rgba(180, 130, 32, 0.28);
      background: rgba(255, 214, 120, 0.26);
      color: #6a4b10;
      font-size: 0.76rem;
      line-height: 1.35;
      font-weight: 600;
    }

    .gls-synth-control {
      padding: 10px;
      border: 1px solid var(--gls-border);
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.82);
    }

    .gls-synth-label-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 6px;
    }

    .gls-synth-label {
      margin: 0;
      font-size: 0.92rem;
      font-weight: 600;
      color: #151515;
    }

    .gls-synth-value {
      font-size: 0.84rem;
      color: #0b7f71;
      font-variant-numeric: tabular-nums;
      font-weight: 600;
    }

    .gls-synth-help {
      margin: 6px 0 0;
      font-size: 0.82rem;
      color: #2f2f2f;
    }

    .gls-synth-range {
      width: 100%;
      accent-color: var(--gls-knob);
      pointer-events: auto !important;
      touch-action: none;
      -webkit-user-select: none;
      user-select: none;
    }

    .gls-synth-select {
      width: 100%;
      border: 1px solid var(--gls-border);
      background: #ffffff;
      color: #151515;
      border-radius: 8px;
      padding: 8px 10px;
      font-size: 0.92rem;
    }

    .gls-sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .gls-wave-picker {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .gls-wave-btn {
      border: 1px solid rgba(0, 0, 0, 0.15);
      border-radius: 10px;
      background: #ffffff;
      color: #161616;
      padding: 8px 10px;
      display: grid;
      grid-template-columns: 1fr;
      justify-items: center;
      gap: 6px;
      cursor: pointer;
      transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
      pointer-events: auto !important;
      touch-action: manipulation;
      -webkit-user-select: none;
      user-select: none;
    }

    .gls-wave-btn:hover {
      border-color: rgba(0, 180, 157, 0.65);
      transform: translateY(-1px);
    }

    .gls-wave-btn.is-active {
      border-color: rgba(0, 180, 157, 0.95);
      background: rgba(0, 180, 157, 0.08);
      box-shadow: 0 0 0 2px rgba(0, 180, 157, 0.18);
    }

    .gls-wave-btn-label {
      font-size: 0.78rem;
      font-weight: 600;
      color: #2a2a2a;
      text-transform: lowercase;
    }

    .gls-wave-svg {
      width: 100%;
      max-width: 120px;
      height: 24px;
      display: block;
    }

    .gls-wave-path {
      fill: none;
      stroke: #0f0f0f;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .gls-synth-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 6px;
      align-items: center;
    }

    .gls-synth-btn {
      border: 1px solid rgba(255, 255, 255, 0.24);
      background: rgba(255, 255, 255, 0.08);
      color: #f4eee5;
      border-radius: 999px;
      min-width: 120px;
      height: 48px;
      padding: 8px 16px;
      font-size: 0.9rem;
      font-weight: 600;
      cursor: pointer;
      transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .gls-synth-btn:hover {
      background: rgba(255, 255, 255, 0.18);
      border-color: rgba(255, 255, 255, 0.4);
      transform: translateY(-1px);
    }

    .gls-synth-btn:disabled {
      opacity: 0.85;
      cursor: default;
      transform: none;
    }

    .gls-synth-btn-play {
      background: rgba(0, 180, 157, 0.28);
      border-color: rgba(0, 180, 157, 0.72);
    }

    .gls-synth-btn.is-active {
      box-shadow: 0 0 0 2px rgba(0, 180, 157, 0.25);
      border-color: rgba(0, 180, 157, 0.78);
    }

    .gls-synth-btn-icon {
      font-size: 0.95rem;
      line-height: 1;
    }

    .gls-synth-btn-text {
      letter-spacing: 0.02em;
    }

    .gls-synth-status {
      margin: 10px 0 0;
      font-size: 0.86rem;
      color: #ece7de;
    }

    .gls-synth-edu {
      display: grid;
      gap: 12px;
    }

    .gls-synth-edu-card {
      border: 1px solid var(--gls-border);
      border-radius: 10px;
      padding: 12px;
      background: rgba(255, 255, 255, 0.84);
    }

    .gls-synth-edu-card h3 {
      margin: 0 0 6px;
      width: auto;
      text-align: left;
      font-size: 0.93rem;
      color: #141414;
    }

    .gls-synth-edu-card p {
      margin: 0;
      font-size: 0.86rem;
      color: #2b2b2b;
    }

    .gls-synth-edu-list {
      margin: 8px 0 0;
      padding-left: 16px;
      color: #2b2b2b;
      font-size: 0.84rem;
    }

    .gls-synth-edu-list li {
      margin-bottom: 4px;
    }

    .gls-guided-labs-intro {
      margin: 4px 0 18px;
      color: #404040;
    }

    .gls-guided-labs-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }

    .gls-guided-lab {
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 10px;
      padding: 10px;
      background: rgba(255, 255, 255, 0.78);
    }

    .gls-guided-lab h4 {
      margin: 0 0 8px;
      font-size: 0.92rem;
      color: #161616;
      letter-spacing: 0.01em;
    }

    .gls-guided-steps {
      margin: 0;
      padding-left: 18px;
      color: #2f2f2f;
      font-size: 0.84rem;
      line-height: 1.5;
    }

    .gls-guided-steps li {
      margin-bottom: 6px;
    }

    .gls-guided-outcome {
      margin: 6px 0 0;
      font-size: 0.82rem;
      color: #2d2d2d;
    }

    .gls-guided-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 10px 0 0;
    }

    .gls-guided-btn {
      border: 1px solid rgba(0, 0, 0, 0.14);
      background: rgba(255, 255, 255, 0.92);
      color: #151515;
      border-radius: 999px;
      padding: 7px 12px;
      font-size: 0.78rem;
      font-weight: 600;
      cursor: pointer;
      transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
    }

    .gls-guided-btn:hover {
      border-color: rgba(0, 180, 157, 0.72);
      background: rgba(0, 180, 157, 0.1);
      transform: translateY(-1px);
    }

    @media (min-width: 900px) {
      .gls-guided-labs-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    .gls-synth-adsr-graph {
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-radius: 10px;
      background: #0f0f12;
      padding: 10px;
    }

    .gls-synth-adsr-svg {
      display: block;
      width: 100%;
      height: auto;
    }

    .gls-synth-adsr-axis {
      stroke: #3a3a43;
      stroke-width: 1;
    }

    .gls-synth-adsr-grid {
      stroke: #25252b;
      stroke-width: 1;
      stroke-dasharray: 4 4;
    }

    .gls-synth-adsr-curve {
      fill: none;
      stroke: #7fe4d8;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .gls-synth-adsr-point {
      fill: #b8f0e8;
    }

    .gls-synth-adsr-legend {
      margin: 10px 0 0;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .gls-synth-adsr-pill {
      display: inline-flex;
      align-items: center;
      min-height: 30px;
      padding: 5px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.28);
      background: rgba(0, 0, 0, 0.34);
      color: #f8f4ec;
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      font-variant-numeric: tabular-nums;
      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    }

    .gls-synth-panel.gls-synth-focus h2 {
      color: #ffffff !important;
      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.42);
    }

    .gls-synth-panel.gls-synth-focus {
      background: #000000 !important;
    }

    .gls-synth-panel.gls-synth-focus p {
      color: #f3f3f3 !important;
      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.42);
    }

    .gls-synth-panel.gls-synth-focus .gls-synth-btn {
      color: #fffdf9;
      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.32);
    }

    .gls-synth-panel.gls-synth-focus .gls-synth-btn:hover {
      background: rgba(255, 255, 255, 0.24);
      border-color: rgba(255, 255, 255, 0.56);
    }

    .gls-synth-panel.gls-synth-focus .gls-synth-btn-play {
      background: rgba(0, 180, 157, 0.34);
      border-color: rgba(0, 180, 157, 0.82);
    }

    .gls-synth-panel.gls-synth-focus .gls-synth-btn:disabled {
      opacity: 0.62;
    }

    .gls-synth-panel.gls-synth-focus .gls-synth-adsr-pill {
      border-color: rgba(0, 180, 157, 0.6);
      background: linear-gradient(180deg, rgba(0, 180, 157, 0.18), rgba(0, 0, 0, 0.34));
      color: #ffffff;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }

    .gls-synth-panel.gls-synth-focus .gls-synth-status,
    .gls-synth-panel.gls-synth-focus .gls-synth-adsr-legend {
      color: #ffffff !important;
      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.42);
    }

    .gls-synth-title {
      width: auto;
      margin: 0 0 10px 0;
      color: #111111;
      text-align: left;
    }

    /* Sticky needs visible overflow in ancestor containers. */
    #lab2,
    #lab2 .capa_opaca,
    #lab2 .blog_overlay {
      overflow: visible;
    }

    #lab2 .blog_post {
      grid-template-columns: 1fr;
    }

    .gls-synth-workspace {
      display: grid;
      grid-template-columns: 1fr;
      gap: 18px;
      align-items: start;
      margin-bottom: 18px;
    }
    .gls-synth-workspace > .gls-synth-panel:first-child {
      position: relative;
      z-index: 3;
    }

    .gls-synth-sticky {
      position: sticky;
      top: 124px;
      align-self: start;
      margin: 0;
      z-index: 1;
    }

    .gls-synth-theory {
      margin-top: 4px;
    }

    .gls-synth-theory .gls-synth-edu-card {
      background: rgba(255, 255, 255, 0.9);
    }
    @media (min-width: 941px) {
      #lab2,
      #lab2 .capa_opaca,
      #lab2 .blog_overlay,
      #lab2 .blog_wrap,
      #lab2 .blog_post {
        overflow: visible !important;
      }

      .gls-synth-workspace {
        grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.95fr);
      }
    }

    @media (max-width: 940px) {

      .gls-page-wrap {
        padding-top: 98px;
      }

      .gls-synth-shell {
        margin-right: 0;
      }

      .gls-synth {
        padding: 14px;
      }

      .gls-synth-shell {
        padding: 16px;
      }

      .gls-synth-sticky {
        position: static !important;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        width: min(250px, 72vw);
        max-width: 100%;
        box-sizing: border-box;
        z-index: auto;
        margin: 0 !important;
        border-radius: 12px;
        box-shadow: none;
        pointer-events: auto;
        transition: none;
      }

      .gls-synth-panel.gls-synth-focus {
        max-height: none;
        overflow: hidden;
        padding: 8px 8px 7px;
        border-radius: 12px;
        pointer-events: auto;
      }

      .gls-synth-panel.gls-synth-focus h2 {
        display: none;
      }

      .gls-synth-panel.gls-synth-focus > p:first-of-type,
      .gls-synth-panel.gls-synth-focus .gls-synth-status {
        display: none;
      }

      .gls-synth-panel.gls-synth-focus p {
        margin: 0 0 4px;
        font-size: 0.7rem;
        line-height: 1.3;
      }

      .gls-synth-panel.gls-synth-focus .gls-synth-adsr-graph {
        display: block;
        padding: 3px;
        border-radius: 8px;
        margin-bottom: 3px;
      }

      .gls-synth-panel.gls-synth-focus .gls-synth-adsr-svg {
        height: 72px;
      }

      .gls-synth-panel.gls-synth-focus .gls-synth-adsr-grid {
        display: none;
      }

      .gls-synth-panel.gls-synth-focus .gls-synth-adsr-point {
        display: block;
        fill: #ffffff;
        stroke: rgba(255, 255, 255, 0.85);
        stroke-width: 1.2;
      }

      .gls-synth-panel.gls-synth-focus .gls-synth-adsr-axis {
        opacity: 0.45;
      }

      .gls-synth-panel.gls-synth-focus .gls-synth-adsr-curve {
        stroke-width: 2;
      }

      .gls-synth-panel.gls-synth-focus .gls-synth-adsr-legend {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
        margin-top: 0;
      }

      .gls-synth-panel.gls-synth-focus .gls-synth-adsr-pill {
        min-height: 20px;
        padding: 1px 6px;
        font-size: 0.64rem;
      }

      .gls-synth-panel.gls-synth-focus .gls-synth-actions {
        pointer-events: auto;
      }

      .gls-synth-panel.gls-synth-focus .gls-synth-btn {
        min-width: 100%;
        height: 30px;
        padding: 5px 9px;
        font-size: 0.72rem;
        pointer-events: auto;
      }

      .gls-synth-panel.gls-synth-focus .gls-synth-btn-icon {
        font-size: 0.7rem;
      }

      .gls-synth-panel.gls-synth-focus .gls-synth-status {
        margin-top: 6px;
        font-size: 0.72rem;
      }

      /* Reserve room so fixed floating panel doesn't hide content. */
      #lab2 .blog_wrap {
        padding-bottom: 0;
      }

      #lab2,
      #lab2 .capa_opaca,
      #lab2 .blog_overlay,
      #lab2 .blog_wrap,
      #lab2 .blog_post {
        overflow-x: hidden !important;
      }
    }

    @media (min-width: 941px) and (max-width: 1279px) {
      .gls-synth-sticky {
        position: static !important;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        width: 100%;
        max-width: none;
        z-index: auto;
        margin: 0;
      }

      #lab2 .blog_wrap {
        padding-bottom: 0;
      }
    }

    /* Small/medium viewports: floating ADSR panel */
    @media (max-width: 1279px) {
      body.gls-page .gls-synth-sticky {
        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: min(280px, 72vw) !important;
        max-width: 100% !important;
        z-index: auto !important;
        margin: 0 !important;
        border-radius: 12px !important;
        box-shadow: none !important;
        pointer-events: auto !important;
      }

      body.gls-page .gls-synth-sticky .gls-synth-actions,
      body.gls-page .gls-synth-sticky .gls-synth-btn {
        pointer-events: auto !important;
      }
    }