:root {
        --theme-bg: #000;
        --theme-default: #0f0;
        --theme-selection: #0f0;
        --theme-text: #fff;
        --theme-grid: rgba(0, 255, 0, 0.45);
        --theme-menu-bg: rgba(0, 60, 30, 0.95);
        --theme-menu-item-hover-bg: rgba(0, 255, 0, 0.2);
        --theme-looper-recording: #f00;
        --theme-looper-stop: #f55;
        --theme-looper-panic: #f00;
        --theme-mode-bar-bg: transparent;
      }
      body {
          margin: 0;
          padding: 0;
          background-color: var(--theme-bg);
          overflow: hidden;
          font-family: monospace;
          /* NEW: Flexbox layout for the entire app */
          display: flex;
          flex-direction: column;
          height: 100vh;
      }
      .audio-uninitialized #top-ui-wrapper,
      .audio-uninitialized #bottom-elements-wrapper,
      .audio-uninitialized #worm-game-button {
        visibility: hidden;
      }
      /* NEW: Wrapper for top bar elements is now a flex container */
      #top-ui-wrapper {
        flex-shrink: 0;
        z-index: 20;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        gap: 10px;
      }
      .canvas-container {
          position: relative; /* CHANGED from absolute */
          flex-grow: 1; /* This is the key change to make it fill space */
          margin: 0 10px 10px 10px; /* Add spacing for "monitor" look */
          border-radius: 50px; /* CRT style corners */
          overflow: hidden; /* Clip canvases to rounded corners */
          box-shadow: inset 0 0 15px rgba(0,0,0,0.5); /* CRT inset shadow effect */
          z-index: 5; /* ADDED: For stacking context */
      }
      .canvas-container canvas {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          display: block;
      }
      #gl-canvas { z-index: 0; }
      #visualizer-canvas { z-index: 1; background-color: transparent; }
      #objects-canvas { z-index: 2; }
      #ui-canvas { z-index: 3; cursor: none; }

      #top-right-controls {
        /* position: absolute; top: 10px; right: 10px; */ /* REMOVED */
        display: flex;
        align-items: center;
        gap: 8px;
        z-index: 30;
        flex-shrink: 0; /* Prevent these controls from shrinking */
      }
      .short-text { display: none; }

      #panic-button-container {
        pointer-events: auto;
      }
      #panic-button {
        width: 62px;
        height: 40px;
        border: 1px solid var(--theme-looper-panic);
        background: rgba(255,0,0,0.4);
        color: var(--theme-text);
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        text-shadow: 0 0 2px #000;
        border-radius: 8px;
      }
      #panic-button:hover {
        border-color: var(--theme-selection);
        box-shadow: 0 0 8px var(--theme-selection);
      }

      #output-record-button-container {
        pointer-events: auto;
      }
      #output-record-button {
        width: 40px;
        height: 40px;
        font-size: 22px;
        color: var(--theme-default);
        border: 2px solid var(--theme-grid);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        box-sizing: border-box;
      }
      #output-record-button:hover {
        border-color: var(--theme-selection);
        box-shadow: 0 0 5px var(--theme-selection);
      }
      #output-record-button.recording {
        color: var(--theme-looper-recording);
        border-color: var(--theme-looper-recording);
        animation: pulse 1.5s infinite;
      }

      #help-button-container {
        pointer-events: auto;
      }
      #help-button {
        width: 40px;
        height: 40px;
        font-size: 22px;
        font-weight: bold;
        color: var(--theme-default);
        border: 2px solid var(--theme-grid);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        box-sizing: border-box;
      }
      #help-button:hover {
        border-color: var(--theme-selection);
        box-shadow: 0 0 5px var(--theme-selection);
      }

      @keyframes pulse {
        0% { box-shadow: 0 0 5px var(--theme-looper-recording); }
        50% { box-shadow: 0 0 15px var(--theme-looper-recording); }
        100% { box-shadow: 0 0 5px var(--theme-looper-recording); }
      }

      #worm-game-button {
          position: absolute;
          right: 10px;
          bottom: 10px;
          z-index: 15;
          user-select: none;
          color: var(--theme-default);
          font-size: 24px;
          font-weight: bold;
          cursor: pointer;
          text-align: center;
          border-radius: 8px;
          width: 57px;
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          line-height: 1;
      }
      #worm-game-button:hover {
        border-color: var(--theme-selection);
        box-shadow: 0 0 8px var(--theme-selection);
      }


      /* --- TOP BAR --- */
      #looper-controls-container {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1 1 auto; /* Grow and shrink as needed */
        min-width: 0;   /* CRITICAL for allowing shrinking */
        justify-content: center;
      }
      #party-button-container {
        /* position: absolute; top: 10px; left: 10px; */ /* REMOVED */
        pointer-events: auto;
        user-select: none;
        flex-shrink: 0; /* Prevent this from shrinking */
      }
      #party-button {
        height: 40px;
        width: 65px;
        border: 2px solid var(--theme-selection);
        color: var(--theme-selection);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
        font-size: 16px;
        border-radius: 8px;
      }
      #party-button:hover {
        box-shadow: 0 0 8px var(--theme-selection);
        background: rgba(0, 255, 255, 0.1);
      }
      #party-button.copied {
        background: rgba(0, 255, 255, 0.3);
      }
      #looper-overview-container {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        pointer-events: auto;
        overflow: hidden;
        flex: 1;
        min-width: 0;
      }
      .loop-track {
        width: 70px;
        height: 40px; /* Set fixed height */
        box-sizing: border-box; /* Include border in height */
        border: 2px solid var(--theme-grid);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-size: 16px;
        color: var(--theme-default);
        transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
        border-radius: 8px;
        flex-shrink: 0; /* Prevent individual tracks from shrinking */
      }
      .loop-track:hover {
        border-color: var(--theme-selection);
      }
      .loop-track-icon {
        width: 10px;
        height: 10px;
        flex-shrink: 0;
      }
      .loop-track-icon.play {
        width: 0;
        height: 0;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-left: 10px solid var(--theme-default);
      }
      .loop-track-icon.stop {
        background-color: var(--theme-default);
      }
      .loop-track-icon.rec {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: var(--theme-looper-recording);
        box-shadow: 0 0 5px var(--theme-looper-recording);
      }

      #rec-button-container,
      #stop-all-button-container {
        pointer-events: auto;
        flex-shrink: 0; /* Prevent these buttons from shrinking */
      }
      .looper-button {
        width: 40px;
        height: 40px;
        border: 2px solid var(--theme-grid);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease-in-out;
        border-radius: 8px;
        background: transparent;
      }
      .looper-button:hover {
        border-color: var(--theme-selection);
        box-shadow: 0 0 5px var(--theme-selection);
      }
      #rec-button .icon { width: 22px; height: 22px; border-radius: 50%; background-color: var(--theme-default); transition: all 0.2s ease-in-out; }
      #rec-button.recording .icon { border-radius: 50%; background-color: #f00; }
      #stop-all-button .icon {
        width: 0;
        height: 0;
        background-color: transparent;
        border-style: solid;
        border-width: 10px 0 10px 18px;
        border-color: transparent transparent transparent var(--theme-default);
        transition: all 0.2s ease-in-out;
        box-sizing: border-box;
      }
      #stop-all-button.playing .icon {
        width: 20px;
        height: 20px;
        border-width: 0;
        background-color: var(--theme-default);
      }
      .loop-scroll-button {
        width: 30px;
        font-size: 20px;
        font-weight: bold;
        color: var(--theme-default);
      }
      .loop-scroll-button.disabled {
        color: var(--theme-grid);
        cursor: default;
        pointer-events: none;
        box-shadow: none;
        border-color: var(--theme-grid);
      }

      /* --- BOTTOM BAR --- */
      #bottom-elements-wrapper {
        position: relative; /* CHANGED from absolute */
        flex-shrink: 0; /* NEW */
        z-index: 10; /* ADDED: For stacking context */
      }
      #bottom-bar-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
      }

      #mode-bar-container {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 5px 0;
        pointer-events: auto;
        user-select: none;
        background-color: var(--theme-mode-bar-bg);
        max-width: 100%;
        overflow: hidden; /* This will be managed by JS to show/hide buttons */
      }

      .mode-button {
        font-family: monospace;
        font-size: 20px;
        color: var(--theme-default);
        padding: 0 8px; /* Reduced padding */
        height: 45px;
        line-height: 45px;
        border: 1px solid transparent;
        cursor: pointer;
        text-shadow: none;
        transition: color 0.2s, text-shadow 0.2s;
        border-radius: 8px;
        flex-shrink: 0; 
        white-space: nowrap; /* Prevent ugly text wrapping inside button */
      }
      .mode-button:hover {
        color: var(--theme-selection);
        text-shadow: 0 0 5px var(--theme-selection);
      }
      .mode-button.active {
        color: var(--theme-selection);
        border-color: var(--theme-selection);
        text-shadow: 0 0 10px var(--theme-selection);
        box-shadow: 0 0 10px var(--theme-selection);
      }
       .mode-button.focused {
        box-shadow: inset 0 -2px 0 0 var(--theme-selection);
      }

      .mode-scroll-button {
        height: 45px;
        width: 35px;
        font-size: 20px;
        font-weight: bold;
        color: var(--theme-default);
        flex-shrink: 0;
        /* NEW: Button-like styles */
        border: 2px solid var(--theme-grid);
        cursor: none;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease-in-out;
        border-radius: 8px;
        background: transparent;
        box-sizing: border-box;
      }
      .mode-scroll-button:hover {
        border-color: var(--theme-selection);
        box-shadow: 0 0 5px var(--theme-selection);
      }
      .mode-scroll-button.disabled {
        color: var(--theme-grid);
        cursor: default;
        pointer-events: none;
        box-shadow: none;
        border-color: var(--theme-grid);
      }
      
      #repl-toggle-button-container {
        flex-shrink: 0;
      }

      #repl-toggle-button {
        width: 35px;
        height: 40px;
        border: 0px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease-in-out;
        border-radius: 8px;
        background: transparent;
        box-sizing: border-box;
        font-size: 20px;
        font-weight: bold;
        color: var(--theme-default);
      }

      #repl-toggle-button:hover {
        border-color: var(--theme-selection);
        box-shadow: 0 0 5px var(--theme-selection);
      }

      #menu-popup-container {
        border-radius: 8px;
        border-width: 2px;
        box-shadow: 0 0 15px var(--theme-selection), inset 0 0 8px rgba(0,0,0,0.7);
        background-image: linear-gradient(rgba(0,0,0,0.2) 50%, transparent 50%);
        background-size: 100% 3px;
      }

      #menu-popup-container {
        position: absolute; /* CHANGED from fixed */
        bottom: 65px; /* Above the mode bar */
        z-index: 50; /* Ensure it's on top */
        background-color: var(--theme-menu-bg);
        border: 2px solid var(--theme-selection);
        padding: 15px;
        pointer-events: auto;
        user-select: none;
        min-width: 250px;
      }

      .param-item {
        font-size: 22px;
        padding: 0 10px;
        height: 40px;
        line-height: 40px;
        cursor: pointer;
        color: var(--theme-default);
        border-radius: 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        user-select: none;
      }
      .param-item:hover, .param-item.active {
        background-color: var(--theme-menu-item-hover-bg);
        color: var(--theme-selection);
        text-shadow: 0 0 5px var(--theme-selection);
      }
      .param-label {
        flex-grow: 1;
        text-align: left;
      }
      .param-value-wrapper {
        display: flex;
        align-items: center;
      }
      .param-button {
        visibility: visible;
        padding: 0 10px;
        font-size: 24px;
        font-weight: bold;
        color: var(--theme-grid);
        transition: color 0.2s;
      }
      .param-item:hover .param-button,
      .param-item.active .param-button,
      .param-item.editing .param-button {
        color: var(--theme-selection);
      }
      .param-item .param-value {
        min-width: 100px;
        text-align: center;
        padding: 0 5px;
        color: var(--theme-default);
      }
      .param-item.active .param-value, .param-item.editing .param-value {
        color: var(--theme-selection);
      }
      .param-item.editing .param-value {
        cursor: text;
      }
      .param-item.editing .param-value:hover {
        text-shadow: 0 0 8px var(--theme-selection);
      }
      .param-value input {
        background: rgba(0,0,0,0.5);
        color: var(--theme-text);
        border: 1px solid var(--theme-selection);
        outline: none;
        width: 100px;
        font-family: monospace;
        font-size: 22px;
        text-align: center;
        padding: 2px 0;
        border-radius: 4px;
      }

      /* --- NEW: Action Button Styles for Parameter Menu --- */
      .param-item.is-action-button .param-button {
        display: none;
      }
      .param-item.is-action-button.has-no-value {
        justify-content: center;
      }
      .param-item.is-action-button.has-no-value .param-value-wrapper {
        display: none;
      }
      .param-item.is-action-button.has-no-value .param-label {
        flex-grow: 0;
      }
      .param-item.is-action-button:not(.has-no-value) .param-value {
        min-width: unset;
        text-align: right;
        padding-right: 10px;
      }

      /* NEW: Styles for the SYNTH/SAMPLE toggle button */
      .param-item.is-toggle-button .param-label {
          display: none;
      }
      .param-item.is-toggle-button .param-value-wrapper {
          justify-content: center;
          flex-grow: 1;
      }
      .param-item.is-toggle-button .param-value {
          display: flex;
          gap: 10px;
          min-width: unset;
          text-align: center;
      }
      .param-item.is-toggle-button .param-value span {
          padding: 0 10px;
          color: var(--theme-grid);
          border: 1px solid transparent;
          border-radius: 6px;
      }
      .param-item.is-toggle-button .param-value span.active {
          color: var(--theme-selection);
          border-color: var(--theme-selection);
          text-shadow: 0 0 5px var(--theme-selection);
      }
      .param-item.is-toggle-button:hover .param-value span:not(.active) {
           color: var(--theme-default);
      }
      
      /* --- REPL Styles --- */
      @keyframes repl-cursor-blink {
          0%, 100% { opacity: 1; }
          50% { opacity: 0; }
      }

      #repl-container {
          position: relative; /* CHANGED from fixed */
          flex-shrink: 0; /* NEW */
          background-color: rgba(0, 20, 10, 0.65); /* Darker green background */
          color: #0f0;
          font-family: 'Courier New', Courier, monospace;
          font-size: 16px;
          border-top: 1px solid #000;
          box-shadow: 0 0 15px rgba(0, 255, 0, 0.5); /* Phosphor green glow */
          display: none; /* Initially hidden */
          flex-direction: column;
          z-index: 40;
          text-transform: uppercase;
          cursor: text;
      }

      #repl-output {
          padding: 10px;
          max-height: 128px; /* 8 lines * 16px */
          overflow-y: auto;
          line-height: 1;
          user-select: text;
      }

      #repl-output div {
          white-space: pre-wrap;
          word-break: break-all;
      }

      #repl-output .repl-in {
          color: rgba(0, 255, 0, 0.6); /* Dimmer green for history */
      }

      #repl-output .repl-stack {
          color: rgba(0, 255, 255, 0.8);
          font-style: italic;
      }

      #repl-output .repl-prompt {
          user-select: none;
          margin-right: 8px;
          color: rgba(0, 255, 0, 0.6); /* Match history color */
      }

      #repl-input-wrapper {
          display: flex;
          align-items: center;
          padding: 5px 10px;
          background-color: rgba(0, 0, 0, 0.3);
          position: relative;
      }

      #repl-prompt {
          margin-right: 8px;
          color: #0f0; /* Bright green for active prompt */
      }

      #repl-cursor {
          position: absolute;
          display: none; /* Hidden by default */
          width: 0.55em; /* Width of one character */
          background-color: var(--theme-default);
          animation: repl-cursor-blink 1.2s step-end infinite;
          pointer-events: none;
      }

      #repl-container.focused #repl-cursor {
          display: block;
      }

      #repl-input {
          flex-grow: 1;
          background: transparent;
          border: none;
          outline: none;
          color: #0f0;
          font-family: 'Courier New', Courier, monospace;
          font-size: 16px;
          text-transform: uppercase;
      }

      #repl-input:focus {
          caret-color: transparent;
      }

      /* Modal styles */
      #help-modal {
          position: fixed;
          top: 0;
          left: 0;
          width: 100vw;
          height: 100vh;
          background-color: rgba(0, 0, 0, 0.85);
          color: var(--theme-default);
          z-index: 100;
          overflow-y: auto;
          font-family: monospace;
          box-sizing: border-box;
      }
      #help-modal-content-wrapper {
          padding: 40px;
          max-width: 900px;
          margin: 0 auto;
      }
      #help-modal-content .content-wrapper { /* Target the actual content container */
          background: transparent !important;
          color: var(--theme-text) !important;
      }
      #help-modal-content h1 { color: var(--theme-selection) !important; text-shadow:0 0 10px var(--theme-selection) !important; border-bottom-color: var(--theme-grid) !important; }
      #help-modal-content h2 { color: var(--theme-default) !important; text-shadow:0 0 5px var(--theme-default) !important; }
      #help-modal-content h4 { color: #ff0; }
      #help-modal-content .key, #help-modal-content .param { background: #000; padding: 2px 6px; color: var(--theme-selection); border: 1px solid var(--theme-grid); }
      #help-modal-content .param { color: #ff0; }
      #help-modal-content li:before { color: var(--theme-selection) !important; }
      #help-modal-content li li:before { color: #ff0 !important; }
      #help-modal-content .button { border-color: var(--theme-selection) !important; color: var(--theme-selection) !important; }
      #help-modal-content .button:hover { background: var(--theme-menu-item-hover-bg) !important; }
      #help-modal-content .button.secondary { border-color: var(--theme-default) !important; color: var(--theme-default) !important; }
      #help-modal-content .button.secondary:hover { background: rgba(0, 255, 0, 0.1) !important; }
      #help-modal-content .back-link { border-color: var(--theme-selection) !important; color: var(--theme-selection) !important; }
      #help-modal-content .back-link:hover { background: var(--theme-menu-item-hover-bg) !important; }
      #help-modal-content table { border-color: var(--theme-grid) !important; background-color: var(--theme-menu-bg) !important; }
      #help-modal-content th, #help-modal-content td { color: var(--theme-default) !important; border-color: var(--theme-grid) !important; }
      #help-modal-content th { background-color: rgba(0, 255, 255, 0.1) !important; color: var(--theme-selection) !important; }
      #help-modal-content .accordion-toggle::after { color: var(--theme-selection) !important; }
      #help-modal-content .workflow { background:rgba(0,0,0,0.2); border-color: var(--theme-grid); }
      
      /* --- Combined and scoped styles for help.html and reference.html --- */
      #help-modal-content .content-wrapper { text-align: center; }
      #help-modal-content h1 { font-size: 28px; letter-spacing: 3px; }
      #help-modal-content h2 { font-size: 18px; letter-spacing: 1px; margin-top: 30px; }
      #help-modal-content p { color: var(--theme-text); }
      #help-modal-content ul { list-style: none; padding-left: 0; display: inline-block; text-align: left; }
      #help-modal-content li { margin-bottom: 5px; }
      #help-modal-content li:before { content: "» "; color: var(--theme-selection); }
      #help-modal-content li li:before { content: "• "; color: #ff0; }
      #help-modal-content .key { font-family: monospace; }
      #help-modal-content p.description { font-style: italic; color: var(--theme-default); margin: 20px 0 30px 0; }
      #help-modal-content p.description a { color: var(--theme-selection); text-decoration: underline; }
      #help-modal-content p.description a:hover { text-shadow: 0 0 5px var(--theme-selection); }
      #help-modal-content .button-container { margin-top: 50px; display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
      #help-modal-content .button { text-decoration: none; border: 1px solid var(--theme-selection); padding: 12px 20px; border-radius: 4px; color: var(--theme-selection); transition: background 0.2s; cursor: pointer; }
      #help-modal-content .button:hover { background: rgba(0, 255, 255, 0.1); }
      #help-modal-content .button.secondary { border-color: var(--theme-default); color: var(--theme-default); }
      #help-modal-content .button.secondary:hover { background: rgba(0, 255, 0, 0.1); }
      #help-modal-content .back-link { position: fixed; top: 10px; right: 10px; font-size: 16px; text-decoration: none; border: 1px solid var(--theme-selection); padding: 8px 15px; border-radius: 4px; z-index: 100; color: var(--theme-selection); cursor: pointer; text-align: center; }
      #help-modal-content .back-link:hover { background: rgba(0, 255, 255, 0.1); }

      /* Responsive UI for smaller screens */
      @media (max-width: 650px) {
        .full-text { display: none; }
        .short-text { display: block; font-size: 20px; font-weight: bold; }
        #party-button, #panic-button, #worm-game-button {
          width: 22px !important;
        }
      }