body {
      font-family: 'Inter', Arial, sans-serif;
      background: linear-gradient(to bottom, #f9f9f9, #e2e8f0);
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 40px;
    }

    .container {
      max-width: 800px;
      margin: 0 auto;
      padding: 0 1rem;
      text-align: center;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 40px;
    }

    h1 {
      margin-top: 0px;
      font-size: 2.5em;
      font-weight: bolder;
    }

    h2.value-label {
      margin-bottom: 20px;
      font-size: 2em;
      font-weight: bold;
    }

    .value-label .buffett-percentage {
      font-size: 2em;
      transition: color 0.3s ease;
    }

    select {
      margin-bottom: 20px;
      padding: 8px;
      font-size: 16px;
    }

    .gauge-wrapper {
      position: relative;
      width: 240px;
      height: 120px;
    }

    .gauge {
      position: relative;
      width: 240px;
      height: 240px;
      border-radius: 50%;
      background: conic-gradient(
        #2E7D32 0deg 36deg,      /* Strongly Undervalued */
        #66BB6A 36deg 72deg,     /* Undervalued */
        #FFD54F 72deg 108deg,    /* Fairly Valued */
        #FFA726 108deg 144deg,   /* Overvalued */
        #EF5350 144deg 180deg,   /* Strongly Overvalued */
        #ffffff 180deg 360deg    /* hidden bottom half */
      );
      transform: rotate(-90deg);
      overflow: hidden;
    }

    .strongly-overvalued {
      color: #EF5350;
    }
    .overvalued {
      color: #FFA726;
    }
    .strongly-undervalued {
      color: #2E7D32;
    }
    .undervalued {
      color: #66BB6A;
    }
    .fairly {
      color: #FFD54F;
    }

    .mask {
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      height: 50%;
      background: #f0f0f0;
      z-index: 2;
    }

    .needle {
      position: absolute;
      width: 4px;
      height: 100px;
      background: black;
      top: 20px;
      left: 50%;
      transform-origin: bottom;
      transition: transform 0.5s ease-in-out;
      z-index: 3;
    }

    .center-dot {
      position: absolute;
      width: 16px;
      height: 16px;
      background: black;
      border-radius: 50%;
      top: 112px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 4;
    }

    .value-label {
      margin-top: 0px;
      font-size: 18px;
      font-weight: bold;
      text-align: center;
    }

    .content-wrapper {
      z-index: 100;
    }
    .content-wrapper .content {
      line-height: 1.6;
    }
    .content-wrapper p {
      text-align: left;
    }
    .content-wrapper p.equation {
      text-align: center;
      font-weight: bold;
    }
    .content-wrapper span.bold {
      font-weight: bold;
    }
    .content-wrapper span.quote {
      font-style: italic;
      font-weight: bold;
    }
    .content-wrapper .source {
      margin-top: 20px;
      z-index: 100;
      text-align: center;
    }
    .content-wrapper .source h2 {
      text-align: center;
    }
    .content-wrapper .source p {
      text-align: center;
      font-size: small;
    }