@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  /* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */
  html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }
  body,
  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
  }
  /* https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html */
  [role=list] {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  body {
    min-block-size: 100vh;
    line-height: 1.6;
    background: linear-gradient(135deg, #0a1628 0%, #0d1f3c 50%, #0a1628 100%);
    color: #e8e8e8;
    font-family: system-ui, -apple-system, sans-serif;
  }
  h1,
  h2,
  h3,
  button,
  input,
  label {
    line-height: 1.1;
  }
  h1,
  h2,
  h3,
  h4 {
    text-wrap: balance;
  }
  p,
  li {
    text-wrap: pretty;
  }
  img,
  picture {
    max-inline-size: 100%;
    display: block;
  }
  input,
  button,
  textarea,
  select {
    font: inherit;
  }
}
@layer base {
  :root {
    --brand-color-500: hsl(39, 95%, 50%);
    --brand-color-500: hsl(33, 100%, 50%);
    --brand-color-800: hsl(25, 100%, 50%);
    --brand-color-900: hsl(12, 100%, 50%);
    --accent-color-500: hsl(195, 100%, 50%);
    --accent-color-500-tl-l: hsl(195, 100%, 50%, 0.3);
    --accent-color-500-tl: hsl(195, 100%, 50%, 0.15);
    --accent-color-600: hsl(214, 52%, 25%);
  }
  a {
    color: var(--brand-color-500);
  }
  a:visited {
    color: var(--brand-color-800);
  }
}
@layer utilities {
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}
@layer components {
  @layer spinner-page {
    spinner-page {
      /* change the element from inline(default) to flex to use overflow hidden.
       Hides the overflow bar while it spins */
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2rem;
      padding: 2rem;
      overflow: hidden;
      --spinner-size: min(50rem, 80vw);
    }
    #ui-form {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      width: 100%;
      max-width: 400px;
    }
    .spinning-wheel {
      position: relative;
      margin: auto;
      width: fit-content;
      height: fit-content;
    }
    .preload-options {
      position: relative;
      z-index: 2;
    }
    .preload-option {
      display: flex;
      gap: 0.5rem;
      align-items: flex-end;
    }
    .preload-add-btn {
      padding: 0.5rem 1rem;
      border: 1px solid var(--accent-color-500);
      border-radius: 6px;
      background: transparent;
      color: #00bfff;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .preload-add-btn:hover {
      background: var(accent-color-500-tl);
      box-shadow: 0 0 10px var(--accent-color-500-tl-l);
    }
    .preload-add-btn:focus-visible {
      outline: 2px solid var(--accent-color-500);
      outline-offset: 2px;
    }
    about-section {
      position: fixed;
      top: 5rem;
      right: 1rem;
      max-width: 300px;
      z-index: 10;
    }
    @media (max-width: 800px) {
      about-section {
        position: static;
        max-width: 100%;
        margin-top: 2rem;
      }
    }
    #ui-form label {
      color: var(--brand-color);
      font-size: 0.875rem;
      font-weight: 500;
      margin-bottom: 0.25rem;
    }
    textarea.ui-input {
      width: 100%;
      min-width: 250px;
      resize: vertical;
      font-family: inherit;
      padding: 0.75rem 1rem;
      border: 2px solid var(--accent-color-600);
      border-radius: 8px;
      background: rgba(10, 22, 40, 0.8);
      color: #e8e8e8;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    textarea.ui-input::placeholder {
      color: #6b8aad;
    }
    textarea.ui-input:focus {
      outline: none;
      border-color: var(--accent-color-500);
      box-shadow: 0 0 0 3px rgba(0, 191, 255, 0.25), 0 0 20px rgba(0, 191, 255, 0.15);
    }
    .ui-button {
      padding: 0.75rem 1.5rem;
      border: none;
      border-radius: 8px;
      background: linear-gradient(135deg, var(--brand-color-500) 0%, var(--brand-color-800) 100%);
      color: white;
      font-weight: bold;
      cursor: pointer;
      box-shadow: 0 4px 15px rgba(255, 140, 0, 0.4);
      transition: transform 0.1s, box-shadow 0.1s, background 0.2s;
    }
    .ui-button:hover {
      background: linear-gradient(135deg, var(--brand-color-900) 0%, var(--brand-color-500) 100%);
      transform: scale(1.02);
      box-shadow: 0 6px 20px rgba(255, 140, 0, 0.5);
    }
    .ui-button:active {
      transform: scale(0.98);
    }
    .ui-button:focus-visible {
      outline: 2px solid #00bfff;
      outline-offset: 2px;
    }
    .wedges,
    .labels {
      position: absolute;
      inset: 0;
    }
    .labels {
      z-index: 1;
      pointer-events: none;
    }
    .slice-wedge {
      --section-size: calc(360deg / var(--slice-count, 4));
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 2px solid rgba(0, 0, 0, 0.6);
      background: conic-gradient(var(--slice-random-color, green) 0deg var(--section-size), transparent var(--section-size) 360deg);
      rotate: calc(var(--i) * var(--section-size));
    }
    .slice-label {
      --section-size: calc(360deg / var(--slice-count, 4));
      position: absolute;
      top: 50%;
      left: 50%;
      rotate: calc(var(--i) * var(--section-size) + var(--section-size) / 2 + 90deg);
      transform: translateY(calc(var(--spinner-size) * -0.35));
      font-size: 1rem;
      font-weight: bold;
      white-space: nowrap;
    }
    .slice-label-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: visible;
      pointer-events: none;
    }
    .slice-label-svg text {
      font-size: 5px; /* Relative to viewBox */
      font-weight: bold;
      text-anchor: middle;
      dominant-baseline: middle;
      pointer-events: auto;
      cursor: pointer;
    }
    .label-tooltip {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(10, 22, 40, 0.95);
      color: #ff8c00;
      padding: 0.75rem 1.5rem;
      border-radius: 8px;
      border: 1px solid #ff8c00;
      font-size: 1.5rem;
      font-weight: bold;
      white-space: nowrap;
      pointer-events: none;
      z-index: 100;
      box-shadow: 0 0 20px rgba(255, 140, 0, 0.3), 0 4px 15px rgba(0, 0, 0, 0.4);
    }
    .label-tooltip[hidden] {
      display: none;
    }
    .spinner {
      position: relative;
      width: var(--spinner-size);
      aspect-ratio: 1;
      overflow: visible;
      filter: drop-shadow(0 0 30px rgba(255, 140, 0, 0.3)) drop-shadow(0 8px 32px rgba(0, 0, 0, 0.5));
    }
    .spinner.spinning {
      animation: spin 3s cubic-bezier(0.17, 0.67, 0.12, 0.99) forwards;
    }
    @keyframes spin {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(calc(1800deg + var(--final-rotation, 137deg)));
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .spinner.spinning {
        animation-duration: 0.5s;
        animation-timing-function: ease-out;
      }
      @keyframes spin {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(var(--final-rotation, 137deg));
        }
      }
    }
    .slice {
      --section-size: calc(360deg / var(--slice-count, 4));
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border-style: solid;
      border-width: 2px;
      border-color: black;
      overflow: visible;
      background: conic-gradient(var(--slice-random-color, green) 0deg var(--section-size), transparent var(--section-size) 360deg);
      rotate: calc(var(--i) * var(--section-size));
    }
    .slice span {
      position: absolute;
      z-index: 10;
      top: 50%;
      left: 50%;
      /* 1. Rotate to middle of the wedge */
      /* 2. Move outward from center */
      rotate: calc(var(--section-size) / 2 + 90deg);
      transform: translateY(-1050%);
      font-size: 1rem;
      font-weight: bold;
      text-align: center;
      white-space: nowrap;
    }
    .indicator-wrapper {
      position: absolute;
      top: -15px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      filter: drop-shadow(0 0 8px rgba(255, 140, 0, 0.8));
    }
    .indicator {
      width: 25px;
      height: 50px;
      background: linear-gradient(180deg, #ff8c00 0%, #ff6b00 100%);
      clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
      filter: drop-shadow(0 0 8px rgba(255, 140, 0, 0.6));
    }
    .pin {
      position: absolute;
      top: calc(var(--spinner-size) / 2);
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      border-radius: 100%;
      border: 2px solid #ff8c00;
      background: radial-gradient(circle at 30% 30%, #ff8c00, #cc6600);
      width: 50px;
      height: 50px;
      box-shadow: 0 0 20px rgba(255, 140, 0, 0.5), inset 0 0 15px rgba(255, 255, 255, 0.2);
    }
  }
}

/*# sourceMappingURL=styles.css.map */