:root {
        --gold: #ffc600;
        --gold2: #fbdb65;
        --gold3: #f0e87b;
        --gold4: #f1eb9c;
        --green: #6cc24a;
        --green2: #a1d884;
        --green3: #addc91;
        --green4: #d0debb;
        --purple: #606eb2;
        --purple2: #8094dd;
        --purple3: #9faee5;
        --purple4: #cbd3eb;
        --text: #212322;
        --bg: #f7f8f3;
        --card: #fffef9;
        --line: #dcd9c8;
        --shadow: 0 12px 30px rgba(33, 35, 34, 0.08);
      }
      * {
        box-sizing: border-box;
      }
      html,
      body {
        margin: 0;
        padding: 0;
        background: linear-gradient(180deg, #fbfbf6 0%, #f4f3eb 100%);
        color: var(--text);
        font-family:
          Inter,
          system-ui,
          -apple-system,
          Segoe UI,
          Roboto,
          Arial,
          sans-serif;
      }
      body {
        line-height: 1.45;
      }
      .container {
        max-width: 1440px;
        margin: 0 auto;
        padding: 20px;
      }
      .hero {
        display: flex;
        gap: 16px;
        align-items: center;
        padding: 18px 20px;
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 18px;
        box-shadow: var(--shadow);
        margin-bottom: 18px;
      }
      .logo-img {
        width: 64px;
        height: 64px;
        display: grid;
        place-items: center;
        color: #fff;
        flex: 0 0 auto;
      }
      .hero h1 {
        margin: 0;
        font-size: 28px;
      }
      .hero p {
        margin: 6px 0 0;
        color: #4b4e4d;
      }
      .grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 18px;
      }
      .card {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 18px;
        box-shadow: var(--shadow);
        padding: 18px;
      }
      .card h2 {
        margin: 0 0 8px;
        font-size: 20px;
        color: var(--purple);
      }
      .sub {
        color: #5f635f;
        font-size: 14px;
        margin: 0 0 12px;
      }
      .controls {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin-top: 14px;
      }
      .full {
        grid-column: 1/-1;
      }
      .info {
        padding: 12px 14px;
        border-radius: 14px;
        background: linear-gradient(180deg, var(--gold4), #fff);
        border: 1px solid #ebe5c7;
        color: #303331;
      }
      .panel {
        background: #fff;
        border: 1px solid #e6e2cf;
        border-radius: 14px;
        padding: 12px;
      }

      select {
        width: 100%;
        padding: 12px 44px 12px 14px;
        border: 1px solid #dcd9c8;
        border-radius: 14px;
        background-color: #fffef9;
        color: var(--purple);
        font-size: 18px;
        font-weight: 700;
        line-height: 1.2;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        box-shadow: 0 8px 20px rgba(33, 35, 34, 0.05);
        transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
        cursor: pointer;
      }

      select:hover {
        border: 2px solid #dcd9c8;;
        border-color: #deb718;
      }
  
      .param-group.active {
        display: block;
      }
      .param-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }
      .param-grid .full {
        grid-column: 1/-1;
      }
      .param-group {
        display: none;
      }
      label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 6px;
      }

      .priorlabel {
        display: block;
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 6px;
      }
      .likelihoodlabel {
        display: block;
        font-size: 16px;
        font-weight: 600;
        margin-top: 12px;
        margin-bottom: 6px;
      }
      input[type="range"] {
        width: 100%;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background: none;
        background: transparent;
        cursor: pointer;
        padding: 0;
        box-sizing: border-box;
      }

      /* Webkit (Chrome, Edge, Safari, Opera) track */
      input[type="range"]::-webkit-slider-runnable-track {
        width: 100%;
        height: 6px;
        border-radius: 6px;
        background: linear-gradient(90deg, #e8e6e1 0%, #dcd9c8 100%);
        box-shadow: 0 1px 2px rgba(33, 35, 34, 0.08);
      }

      /* Firefox track */
      input[type="range"]::-moz-range-track {
        width: 100%;
        height: 6px;
        border-radius: 6px;
        background: linear-gradient(90deg, #e8e6e1 0%, #dcd9c8 100%);
        box-shadow: 0 1px 2px rgba(33, 35, 34, 0.08);
      }

      /* Webkit thumb */
      input[type="range"]::-webkit-slider-thumb {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #fff;
        border: 2px solid #606eb2;
        box-shadow: 0 2px 6px rgba(33, 35, 34, 0.18), 0 0 0 rgba(96, 110, 178, 0.1);
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        margin-top: -8px;
      }

      /* Firefox thumb */
      input[type="range"]::-moz-range-thumb {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #fff;
        border: 2px solid #606eb2;
        box-shadow: 0 2px 6px rgba(33, 35, 34, 0.18);
        cursor: pointer;
        appearance: none;
        -moz-appearance: none;
      }

      /* Focus state */
      input[type="range"]:focus {
        outline: none;
      }

      input[type="range"]:focus::-webkit-slider-thumb {
        box-shadow: 0 2px 6px rgba(33, 35, 34, 0.18), 0 0 0 4px rgba(96, 110, 178, 0.2);
      }

      input[type="range"]:focus::-moz-range-thumb {
        box-shadow: 0 2px 6px rgba(33, 35, 34, 0.18), 0 0 0 4px rgba(96, 110, 178, 0.2);
      }

      /* Hover state */
      input[type="range"]::-webkit-slider-thumb:hover {
        border-color: #8094dd;
        box-shadow: 0 3px 10px rgba(33, 35, 34, 0.22), 0 0 0 4px rgba(128, 148, 221, 0.15);
      }

      input[type="range"]::-moz-range-thumb:hover {
        border-color: #8094dd;
        box-shadow: 0 3px 10px rgba(33, 35, 34, 0.22), 0 0 0 4px rgba(128, 148, 221, 0.15);
      }
      .value {
        display: inline-block;
        min-width: 52px;
        text-align: right;
        color: var(--purple);
        font-weight: 700;
      }
      .plot-stack {
        display: grid;
        flex-direction: column;
        gap: 16px;
        grid-template-columns: 8fr 1.5fr 8fr 1.5fr 8fr;
        margin-top: 16px;
      }
      .formula-op {
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--purple);
        font-size: 48px;
        font-weight: 800;
        height: 100%;
      }
      .plot-card {
        background: linear-gradient(180deg, #fff 0%, #fffdfa 100%);
        border: 1px solid #e4e0cf;
        border-radius: 16px;
        padding: 12px;
      }
      .plot-title {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 10px;
        margin: 0 0 10px;
        font-weight: 700;
        color: var(--text);
      }
      .plot-title span {
        color: var(--green);
        font-weight: 700;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
      }
      .gapbetween {
        margin-top: 60px;
      }
      .canvas-shell {
        width: 100%;
      }
      .canvas-frame {
        width: 100%;

        aspect-ratio: 1/1;
        max-height: 60vh;
        position: relative;
        background: #fff;
        border: 1px solid #dcd9c8;
        border-radius: 16px;
        overflow: hidden;
      }
      .canvas-frame canvas {
        width: 100%;
        height: 100%;
        display: block;
      }

      .formula-box {
        grid-column: 1/-1;
      }
      .plot-card {
        min-width: 0;
      }
      .canvas-caption {
        margin-top: 8px;
        font-size: 13px;
        color: #5f635f;
      }
      .side-note {
        font-size: 14px;
        color: #505551;
      }
      .mobile-hide {
        display: block;
      }
      @media (max-width: 980px) {
        .controls {
          grid-template-columns: 1fr;
        }
        .param-grid {
          grid-template-columns: 1fr;
        }
        .plot-stack {
          grid-template-columns: 1fr;
        }
        .plotform-stack {
          flex-direction: row;
         /* grid-template-columns: 1fr;*/
        }
        .hero {
          align-items: flex-start;
        }
        .mobile-hide {
          display: none;
        }
        .canvas-frame {
          max-height: 56vh;
        }
      }