@keyframes background-move-200-x {
  0% {
      background-position: 0% 0%;
  }
  100% {
      background-position: -200% 0%;
  }
}

@keyframes background-move-200-y {
  0% {
      background-position: 0% 0%;
  }
  100% {
      background-position: 0% -200%;
  }
}

.hidden {
  display: none !important;
}

.no-scroll {
  overflow: hidden !important;
}

.no-break {
  white-space: nowrap !important;
}

.emphasis {
  font-weight: bold;
  font-style: italic;
}

.run-kwc {
  font-weight: bold;
  font-style: italic;
  font-family: inherit;
}

.run-kwc-banner {
  font-family: var(--font-family--sans-serif);
  font-size: clamp(4.8rem, 12vw, 6rem);
  font-style: italic;
  font-weight: 900;
  line-height: 0.8;
  color: var(--color-0);
  letter-spacing: -0.25rem;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 100vw;
    height: 100%;
    background: var(--background--70s-vibe);
    z-index: -1;
  }
}

.clock-label {
  font-weight: 800;
  font-size: 0.9rem;
  text-transform: uppercase;
  color: var(--color-6);
}

.red-glass-time-display {
  font-weight: 600;
  font-size: clamp(calc(3.4rem * .8), calc(8vw * .8), calc(4.8rem * .8));
  border: var(--border--red-glass);
  border-radius: 1rem;
  background-color: var(--background--red-glass);
  box-shadow: var(--box-shadow--red-glass);
  color: var(--color--red-glass);
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.add-run-kwc-btn {
  width: 100%;
  border-radius: 1rem;
  padding: 1.4rem 2rem;
  font-size: 1.4rem;
  letter-spacing: -0.05rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: var(--box-shadow--standard);
  background: var(--color-0-50);
  font-style: italic;
  border: var(--border--crevice);
  text-decoration: none;
  background: var(--background--retro-tread);
  background-size: var(--background-size--retro-tread);
  animation: var(--animation--retro-tread);
  color: var(--color-1);
  white-space: nowrap !important;
}

.buy-me-coffee-btn {
  background: var(--color-0-50);
  border-radius: 0.5rem;
  border: var(--border--crevice);
  padding: 0.15rem 0.75rem;
  text-decoration: none;
  font-weight: 400;
  background: var(--background--retro-tread);
  background-size: var(--background-size--retro-tread);
  animation: var(--animation--retro-tread);
  color: var(--color-1);
  white-space: nowrap !important;

  &::after {
    content: '☕';
    padding-left: 0.25rem;
  }
}

.text-btn {
  width: 100%; 
  border-radius: 1rem;
  padding: 1.4rem 2rem;
  background: linear-gradient(90deg, #2a2a2a 0%,#3a3a3a 40%, #3a3a3a 50%);
  box-shadow: 
    0 0 0.1rem 0.1rem var(--color-0-50),
    inset 0 2px 2px rgba(255, 255, 255, 0.3),
    inset 0 -2px 2px rgba(0, 0, 0, 0.6),
    inset 3px 0 2px rgba(255, 255, 255, 0.05),
    inset -3px 0 2px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.honda-accord-btn {
  width: 100%;
  border-radius: 1rem;
  padding: 1.4rem 2rem;
  color: var(--color-11);
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  background: #3a3a3a;
  box-shadow: 
    inset 0 2px 2px rgba(255, 255, 255, 0.3),
    inset 0 -2px 2px rgba(0, 0, 0, 0.6),
    inset 3px 0 2px rgba(255, 255, 255, 0.05),
    inset -3px 0 2px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;

  &.scary {
    background: var(--color--scary);
  }

  &.cool {
    background: var(--color--cool);
  }
}

.penny-btn {
  position: relative;
  background-color: var(--color-7);
  font-size: 1.1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  white-space: nowrap;
  text-decoration: none;
  padding: 1rem;
  box-shadow: inset 0 0.5rem 0.5rem var(--color-10-80);
  border-radius: var(--border-radius--circle);
  color: var(--color--3);
  gap: 0;
  border: solid 1px var(--color-9);
  background: var(--background--retro-tread);
  background-size: var(--background-size--retro-tread);
  animation: var(--animation--retro-tread);

  &.bigger {
    height: 6.2rem;
    width: 6.2rem;
  }

  &.selected {
    box-shadow: inset 0 0.5rem 0.5rem var(--color-0-50);
  }

  &:nth-child(2n + 1) {
    background: var(--background--retro-tread-offset);
    background-size: var(--background-size--retro-tread);
    animation: var(--animation--retro-tread);
  }

  svg {
    flex-shrink: 0;
  }
}

.step-title {
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 900;
  line-height: 0.8;
  color: var(--color-8);
  text-shadow: var(--box-shadow--standard);
  letter-spacing: -0.1rem;
  text-align: center;
  font-style: italic;
  width: 100%;
}

p.step-paragraph {
  text-align: center;
  text-wrap: balance;
  font-size: clamp(1.2rem, 2vw, 1.4rem);
  font-weight: 400;
  color: var(--color-10);
}

.phone-icon {
  font-size: 8rem;
  margin-bottom: 2rem;
  animation: phoneIconRotation 1.4s 1 linear forwards;
  animation-delay: 0.5s;

  &.reverse {
    animation: phoneIconRotationReverse 1.4s 1 linear forwards;
  }
}

@keyframes phoneIconRotation {
  0% { transform: rotate(0deg); }
  100% { transform: scale(1.1) rotate(-90deg); }
}

@keyframes phoneIconRotationReverse {
  0% { transform: scale(1.1) rotate(-90deg); }
  100% { transform: rotate(0deg); }
}

.round-btn {
  background-color: var(--color-7);
  font-size: 1.4rem;
  letter-spacing: -0.05rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: var(--border-radius--circle);
  color: var(--color--3);
  border: solid 2px var(--color-0);
  aspect-ratio: 1/1;
  width: 5rem;
  height: 5rem;
}
.celebration {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  container-type: size;



  .ribbon-1 {
    position: absolute;
    background:rgba(0,0,100,1);
    width: 35cqw;
    height: 50cqh;
    top: -10cqh;
    left: calc(50% - 3cqw);
    rotate: -10deg;
    transform: translateX(-50%);
  }

  .ribbon-2 {
    position: absolute;
    background:rgba(0,0,155,1);
    width: 35cqw;
    height: 50cqh;
    top: -10cqh;
    left: calc(50% + 3cqw);
    rotate: 10deg;
    transform: translateX(-50%);
  }

  .finish-time {
    background: radial-gradient(circle at 30% 30%, #ffd700, #ffed4e 66%, #ffb347 80%, #daa520 83%, #b8860b);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 75cqw;
    aspect-ratio: 1 / 1;
    border: solid 3px #b8860b;
    border-radius: var(--border-radius--circle);
    color: #8b4513;
    font-size: 15cqw;
    font-weight: 800;
    letter-spacing: -0.05rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 
      var(--box-shadow--standard),
      inset 0 0 20px rgba(255, 215, 0, 0.3),
      0 0 30px rgba(255, 215, 0, 0.2);
    position: relative;
  }
}
/* Reset box model */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Reset body defaults */
body {
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Remove list styles */
ul,
ol {
  padding-left: 2rem;
  margin-bottom: 1rem;
  li {
    margin-bottom: 0rem;
  }
}

/* Reset strong and em */
strong, em {
  font-size: inherit;
  color: inherit;
}

/* Reset image display */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* Reset form elements */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove default button styles */
button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* Reset tables */
table {
  border-collapse: collapse;
  border-spacing: 0;
}  
.fifty-fifty-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
  width: 100%;

  > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    container-type: size;
    padding: 5%;
    position: relative;

    p {
      position: absolute;
      margin-top: calc(2rem + clamp(2rem, 6vw, 3rem));
    }

    &:first-child {
      border-right: 1px solid var(--color-7-50);
      overflow: hidden;
    }

    button {
      background: var(--background--retro-tread);
      background-size: var(--background-size--retro-tread);
      animation: var(--animation--retro-tread);
      width: 75cqw;
      aspect-ratio: 1 / 1;
      border: solid 1px var(--color-9);
      border-radius: var(--border-radius--circle);
      color: var(--color-0);
      font-style: italic;
      font-size: 6vw;
      font-weight: 800;
      letter-spacing: -0.05rem;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: var(--box-shadow--standard);
    }
  }
}

@font-face {
  font-family: 'AzeretMono';
  src: url(/fonts/AzeretMono-VariableFont_wght.ttf) format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'AzeretMono';
  src: url(/fonts/AzeretMono-Italic-VariableFont_wght.ttf) format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'EBGaramond';
  src: url(/fonts/EBGaramond-VariableFont_wght.ttf) format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'EBGaramond';
  src: url(/fonts/EBGaramond-Italic-VariableFont_wght.ttf) format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}



.footer-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  gap: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-top: 1rem;
  padding-bottom: 2rem;
  height: var(--height--footer-actions);
  border-top: 1px solid var(--color-2-80);
  background: var(--background--wood-veneer);
  box-shadow: inset 0 3rem 3rem var(--color-0-50);
  z-index: 10;
}

.log-run {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;

  .log-run-title {
    font-size: clamp(2rem, 6vw, 3rem);
    font-weight: 900;
    line-height: 0.8;
    color: var(--color-8);
    text-shadow: var(--box-shadow--standard);
    letter-spacing: -0.1rem;
    text-align: center;
    font-style: italic;
    width: 100%;
  }

  .log-settings {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    border-top: solid 1px var(--color-3-80);
    border-bottom: solid 1px var(--color-3-80);
    background-color: var(--color-0);
    padding: 2rem;

    .log-display { 
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
      text-align: center;
    }

    .distance-input-container {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 0.5rem;
      height: 5rem;

      .distance-input {
        width: 100%;
        border: var(--border--red-glass);
        background-color: var(--color-0);
        border-radius: 1rem;
        flex: 1;
        outline: none;
        font-weight: 600;
        font-size: clamp(calc(3.4rem * .8), calc(8vw * .8), calc(4.8rem * .8));
        color: var(--color--red-glass);
        text-align: center;
        padding: 0 1rem;
        background-color: var(--background--gray-glass);

        &.selected {
          background-color: var(--background--red-glass);
          box-shadow: var(--box-shadow--red-glass);
        }
      
        &::placeholder {
          color: var(--color--red-glass);
          opacity: 0.6;
        }
      }

      .unit-toggle-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        border: var(--border--red-glass);
        border-radius: 1rem;
        overflow: hidden;
        width: 100%;
        height: 100%;
        font-size: 1rem;
        font-weight: 700;

        > span {
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          background-color: var(--color-3);
          color: var(--color-11-80);
          transition: opacity 0.2s ease;
          box-shadow: 
            0 0 0.1rem 0.1rem var(--color-0-50),
            inset 0 1px 1px rgba(255, 255, 255, 0.3),
            inset 0 -1px 1px rgba(0, 0, 0, 0.6),
            inset 2px 0 1px rgba(255, 255, 255, 0.05),
            inset -2px 0 1px rgba(0, 0, 0, 0.3);
        
          &.active {
            opacity: 1;
          }

          &:not(.active) {
            opacity: 0.4;
          }
        }
      }
    }

    .log-actions {
      display: grid;
      grid-template-columns: 1fr 2fr;;
      width: 100%;
      gap: 0.5rem;
    }
  }
}
.master-timer {
  position: relative;
  width: 100%;
  height: 100%;

  > div {
    background-color: var(--color-0);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
  }
}
/* Houses the "shields" that overlay the contents of a timer for stimulus click events */
.master-timer-shield { 
  position: absolute;
  z-index: var(--z-index--shields);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  container-type: size;

  svg {
    position: absolute;
    top: 2cqw;
    right: 2cqw;
    color: var(--color-8);
    width: 3cqw;
    height: 3cqw;
  }

  &.zero-or-next {
    display: grid;
    grid-template-columns: var(--pct-split--zero-or-next) calc(100% - var(--pct-split--zero-or-next));

    > div {
      position: relative;

      &:first-child {
        svg {
          left: 2cqw;
        }
      }

      &:last-child {
        svg {
          right: 2cqw;
        }
      }
    }
  }
}
.minutes-entry {
  --minutes-picker--item-height: 40px;
  --minutes-picker--show-item-visible-count: 5;

  form {
    width: 100%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .minutes-picker {
    margin-top: 1rem;
    width: 100%;
    background-color: var(--color-0);
    overflow: hidden;
    margin-top: -0.5rem;
    height: calc(var(--minutes-picker--item-height) * var(--minutes-picker--show-item-visible-count));
    position: relative;

    .picker-viewport {
      width: 100%;
      height: 100%;
      border: var(--border--red-glass);
      background-color: var(--background--red-glass);
      box-shadow: var(--box-shadow--red-glass);
      color: var(--color--red-glass);
      position: relative;
      overflow: hidden;
      border-radius: 1rem;
  
      .picker-scroll-area {
        width: 100%;
        height: auto;
        position: relative;
        cursor: grab;
        transition: transform 0.2s ease-out;
        padding: calc(var(--minutes-picker--item-height) * (var(--minutes-picker--show-item-visible-count) - 1)/2) 0;
      
        &:active {
          cursor: grabbing;
        }
      }
    
      .picker-item {
        height: var(--minutes-picker--item-height);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        font-weight: 600;
        opacity: 0.3;
        transition: all 0.2s ease;
        user-select: none;
        position: relative;
      
        &.active {
          opacity: 1;
          transform: scale(1.5);
        }
      
        &.near-active {
          opacity: 0.7;
          transform: scale(1.1);
        }
      }
    
      .picker-selection-indicator {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: calc(1.2 * var(--minutes-picker--item-height));
        transform: translateY(-50%);
        background: linear-gradient(
          90deg,
          transparent 0%,
          rgba(245, 230, 211, 0.1) 20%,
          rgba(245, 230, 211, 0.15) 50%,
          rgba(245, 230, 211, 0.1) 80%,
          transparent 100%
        );
        border-top: 1px solid var(--color-3-80);
        border-bottom: 1px solid var(--color-3-80);
        pointer-events: none;
      }
    }
  }
}

/* Wake Lock Step Specific Styles */
.wake-lock-step-container {
  .wake-lock-status {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem 0;
    
    .wake-lock-icon {
      width: 2rem;
      height: 2rem;
    }
  }
  
  .wake-lock-messages {
    text-align: center;
    min-height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .success-message {
      color: var(--color-7);
      font-weight: 600;
      font-size: 1.1rem;
    }
    
    .error-message {
      color: var(--color-6);
      font-weight: 500;
      font-size: 1rem;
    }
  }
}
.orientation-notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-wrap: balance;
  gap: 2rem;

  .rotate-text {
    padding: 0 5%;
    text-align: center;
    font-size: calc(clamp(2rem, 4vw, 3rem) * 0.7);
    font-weight: 400;
    color: var(--color-10);
  }
}
.turbo-progress-bar {
  background: hsla(38, 23%, 44%, 1) !important;
}
/* The framing around the steps of the timer */
.step-frame {
  margin-top: calc(var(--height--footer-actions) * -0.5);
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  background-color: var(--color-0);
  padding: 2rem;
  border: solid 2px var(--color-3-80);
  border-left: none;
  border-right: none;
}
.timer-options {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .time-settings {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    border-top: solid 1px var(--color-3-80);
    border-bottom: solid 1px var(--color-3-80);
    background-color: var(--color-0);
    padding: 2rem;
    position: relative;

    .stop-timer-btn {
      position: absolute;
      top: -1rem;
      left: 50%;
      transform: translateX(-50%) translateY(-100%);
      width: clamp(6rem, 20vw, 8rem);
      aspect-ratio: 1/1;
      border-radius: var(--border-radius--circle);
    }

    .time-displays { 
      width: 100%;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1rem;

      > div {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
        text-align: center;
      }
    }

    .time-actions {
      display: grid;
      width: 100%;
      grid-template-columns: 1fr 1fr;

      > button {
        &:first-child {
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
        }

        &:last-child {
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
        }
      }
    }
  }
}

:root {
  --color-0: hsla(0, 0%, 0%, 1);
  --color-0-30: hsla(0, 0%, 0%, 0.3);
  --color-0-50: hsla(0, 0%, 0%, 0.5);
  --color-0-70: hsla(0, 0%, 0%, 0.7);
  --color-0-80: hsla(0, 0%, 0%, 0.8);
  --color-1: hsla(20, 60%, 15%, 1);
  --color-1-50: hsla(20, 60%, 15%, 0.5);
  --color-1-70: hsla(20, 60%, 15%, 0.7);
  --color-1-80: hsla(20, 60%, 15%, 0.8);
  --color-2: hsla(37, 27%, 36%, 1);
  --color-2-50: hsla(37, 27%, 36%, 0.5);
  --color-2-70: hsla(37, 27%, 36%, 0.7);
  --color-2-80: hsla(37, 27%, 36%, 0.8);
  --color-3: hsla(38, 23%, 44%, 1);
  --color-3-50: hsla(38, 23%, 44%, 0.5);
  --color-3-70: hsla(38, 23%, 44%, 0.7);
  --color-3-80: hsla(38, 23%, 44%, 0.8);
  --color-4: hsla(38, 21%, 48%, 1);
  --color-4-50: hsla(38, 21%, 48%, 0.5);
  --color-4-70: hsla(38, 21%, 48%, 0.7);
  --color-4-80: hsla(38, 21%, 48%, 0.8);
  --color-5: hsla(37, 22%, 52%, 1);
  --color-5-50: hsla(37, 22%, 52%, 0.5);
  --color-5-70: hsla(37, 22%, 52%, 0.7);
  --color-5-80: hsla(37, 22%, 52%, 0.8);
  --color-6: hsla(38, 27%, 61%, 1);
  --color-6-50: hsla(38, 27%, 61%, 0.5);
  --color-6-70: hsla(38, 27%, 61%, 0.7);
  --color-6-80: hsla(38, 27%, 61%, 0.8);
  --color-7: hsla(37, 35%, 69%, 1);
  --color-7-50: hsla(37, 35%, 69%, 0.5);
  --color-7-70: hsla(37, 35%, 69%, 0.7);
  --color-7-80: hsla(37, 35%, 69%, 0.8);
  --color-8: hsla(37, 50%, 77%, 1);
  --color-8-50: hsla(37, 50%, 77%, 0.5);
  --color-8-70: hsla(37, 50%, 77%, 0.7);
  --color-8-80: hsla(37, 50%, 77%, 0.8);
  --color-9: hsla(37, 81%, 85%, 1);
  --color-9-50: hsla(37, 81%, 85%, 0.5);
  --color-9-70: hsla(37, 81%, 85%, 0.7);
  --color-9-80: hsla(37, 81%, 85%, 0.8);
  --color-10: hsla(37, 82%, 87%, 1);
  --color-10-50: hsla(37, 82%, 87%, 0.5);
  --color-10-70: hsla(37, 82%, 87%, 0.7);
  --color-10-80: hsla(37, 82%, 87%, 0.8);
  --color-11: hsla(255, 100%, 100%, 1);
  --color-11-20: hsla(255, 100%, 100%, 0.2);
  --color-11-50: hsla(255, 100%, 100%, 0.5);
  --color-11-70: hsla(255, 100%, 100%, 0.7);
  --color-11-80: hsla(255, 100%, 100%, 0.8);

  --color--clock-red: #6a1a2e;
  --color--red-glass: #fa112d;

  --color--scary: #ff3535;
  --color--cool: #6600cc;
  --color--neon: #00ff66;

  --background--retro-tread: linear-gradient(
    180deg,
    var(--color-8-70) 0%,
    var(--color-3-70) 100%
  ),linear-gradient(
    90deg,
    var(--color-10) 0%, var(--color-10) 5%,
    var(--color-9) 5%, var(--color-9) 15%,
    var(--color-8) 15%, var(--color-8) 25%,
    var(--color-7) 25%, var(--color-7) 35%,
    var(--color-6) 35%, var(--color-6) 45%,
    var(--color-5) 45%, var(--color-5) 55%,
    var(--color-6) 55%, var(--color-6) 65%,
    var(--color-7) 65%, var(--color-7) 75%,
    var(--color-8) 75%, var(--color-8) 85%,
    var(--color-9) 85%, var(--color-9) 95%,
    var(--color-10) 95%, var(--color-10) 100%
  );

  --background--retro-tread-offset: linear-gradient(
    180deg,
    var(--color-8-70) 0%,
    var(--color-3-70) 100%
  ),linear-gradient(
    90deg,
    var(--color-5) 0%, var(--color-5) 5%,
    var(--color-6) 5%, var(--color-6) 15%,
    var(--color-7) 15%, var(--color-7) 25%,
    var(--color-8) 25%, var(--color-8) 35%,
    var(--color-9) 35%, var(--color-9) 45%,
    var(--color-10) 45%, var(--color-10) 55%,
    var(--color-9) 55%, var(--color-9) 65%,
    var(--color-8) 65%, var(--color-8) 75%,
    var(--color-7) 75%, var(--color-7) 85%,
    var(--color-6) 85%, var(--color-6) 95%,
    var(--color-5) 95%, var(--color-5) 100%
  );

  --background--70s-vibe: repeating-linear-gradient(
    0deg,
    red 0%, red 33.3%,
    orange 33.3%, orange 66.7%,
    yellow 66.7%, yellow 100%
  );

  --background-size--retro-tread: 200% 100%;
  --animation--retro-tread: background-move-200-x 4s linear infinite;

  --background-size--70s-vibe: 100% 200%;
  --animation--70s-vibe: background-move-200-y 2s linear infinite;

  --box-shadow--inset: inset 0 1rem 1rem var(--color-0-50);
  --box-shadow--standard: 0 0.12rem 0.1rem var(--color-0-50);

  --font-family--sans-serif: system-ui;
  --font-family--serif: serif;
  --font-family--monospace: monospace;
  --font-family--clock: 'AzeretMono';

  --border-radius--circle: 99rem;

  --border--shapes: 2px solid var(--color-8-50);
  --border--shapes-eaten: 2px solid var(--color-8);
  --transition--shapes: all 0.3s ease;

  --width--readable: min(100%, 720px);

  --top--clear-favorites-btn: 2rem;

  --height--clear-favorites-btn: 3.5rem;
  --height--footer-actions: 8rem;


  --border--crevice: solid 1px var(--color-2-70);
  --background--crevice: var(--color-0-50);
  --box-shadow--crevice: var(--box-shadow--inset);

  --border--red-glass: solid 1px var(--color-2-50);
  --background--red-glass: var(--color--clock-red);
  --box-shadow--red-glass: inset 0 0 8px 5px rgba(0,0,0,0.3);

  --background--gray-glass: var(--color-1-50);

  --padding--main-sides: 2rem;

  --pct-split--zero-or-next: 50%;

  --background--wood-veneer: 
    /* Prominent vertical grain lines */
    repeating-linear-gradient(-1.5deg,
        transparent 0px,
        rgba(25, 17, 11, 0.15) 1px,
        transparent 2px,
        transparent 5px,
        rgba(41, 28, 18, 0.05) 6px,
        transparent 7px,
        transparent 10px,
        rgba(25, 17, 11, 0.11) 11px,
        transparent 12px,
        transparent 18px
    ),
    /* Secondary vertical grain */
    repeating-linear-gradient(1.5deg,
        transparent 0px,
        rgba(62, 42, 27, 0.11) 2px,
        transparent 3px,
        transparent 8px,
        rgba(41, 28, 18, 0.15) 9px,
        transparent 10px,
        transparent 14px
    ),
    /* Base walnut color with horizontal variation */
    linear-gradient(95deg, 
       /* #3e241a 0%,*/
        #6d4228 0%,
        #6d4228 100%
    );

  /* The bg for zero-or-next timer shields but used on the bg of the timer itself so it goes behind the graphics */
  --background--zero-or-next: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 0, 0, 0) calc(var(--pct-split--zero-or-next) * .2),
    rgba(255, 0, 0, 0.35) var(--pct-split--zero-or-next),
    transparent var(--pct-split--zero-or-next),
    transparent 100%
  );

  --z-index--shields: 100;
  --z-index--celebration: 101;
  --z-index--wake-lock-status: 9998;
  --z-index--wood-bevel-container: 9999;
}
.wake-lock-step {
  width: min(90%, 500px);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: transparent;
  gap: 2rem;
  
  button.enable-wake-lock-button {
    background: var(--color--cool);
    &.wake-lock-enabled {
      animation: wakeLockEnabledTransition 1s ease-out forwards;
    }
  }
}

@keyframes wakeLockEnabledTransition {
  0% {
    background: var(--color--cool);
    color: var(--color-11-80);
    transform: scale(1);
  }
  50% {
    transform: scale(0.95);
  }
  80% {
    transform: scale(1.05);
  }
  100% {
    background: var(--color--neon);
    color: var(--color-0);
    transform: scale(1);
  }
}

@keyframes successPulse {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes successBounce {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.wood-bevel-container {
  background: var(--background--wood-veneer);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-index--wood-bevel-container);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100cqh;
  width: 100cqw;
  container-type: size;

  /* Wrapper frame */
  > div:first-child {
    overflow: hidden;
    width: calc(100cqw - 2rem);
    height: calc(100cqh - 2rem);
    border-radius: 2rem;
    border: var(--border--crevice);
    background: var(--background--crevice);
    box-shadow: var(--box-shadow--crevice);
    margin: 1rem;
  }
}
.decaseconds {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  container-type: size;

  .value {
    font-size: 20cqw;
    font-weight: 800;
    color: var(--color-10);
    text-shadow: var(--box-shadow--standard);
    animation: pulse-scale 1s ease-out infinite;
  }
}
    
@keyframes pulse-scale {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
.double-speed {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: space-around;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 0 5%;
  box-sizing: border-box;
  container-type: size;
  background: var(--background--zero-or-next);

  .bars-container {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
  }

  .bar {
    position: relative;
    transform-origin: center;
    border: var(--border--shapes);
    border-radius: 2.5cqw;
    overflow: hidden;
    transition: var(--transition--shapes);
    width: 10cqw;
    height: 50cqh;
    background-color: var(--color-0);

    /* Visual order mapping: center outward */
    &:first-child {
      --bar-color: #ff0000; /* red */
      order: 4; /* Visual position 4 (center) */
      .bar-label { color: #ffff00; }
    }
    
    &:nth-child(2) {
      --bar-color: #ff2a00;
      order: 3; /* Visual position 3 */
      .bar-label { color: #ffff00; }
    }
    
    &:nth-child(3) {
      --bar-color: #ff5500;
      order: 5; /* Visual position 5 */
      .bar-label { color: #ffff00; }
    }
    
    &:nth-child(4) {
      --bar-color: #ff8000;
      order: 2; /* Visual position 2 */
      .bar-label { color: #ffff00; }
    }
    
    &:nth-child(5) {
      --bar-color: #ffaa00;
      order: 6; /* Visual position 6 */
      .bar-label { color: #ffff00; }
    }
    
    &:nth-child(6) {
      --bar-color: #ffd500;
      order: 1; /* Visual position 1 */
      .bar-label { color: #ff0000; }
    }
    
    &:nth-child(7) {
      --bar-color: #ffff00; /* yellow */
      order: 7; /* Visual position 7 */
      .bar-label { color: #ff0000; }
    }

    .bar-fill {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      background: var(--bar-color);
      transition: height 0.1s linear;
      height: var(--fill-height, 0%);
    }

    .bar-label {
      position: absolute;
      bottom: 5%;
      left: 50%;
      transform: translateX(-50%);
      font-size: 2.8cqw;
      font-weight: 700;
      white-space: nowrap;
      text-align: center;
      letter-spacing: -0.05rem;
    }

    &.eaten {
      border: var(--border--shapes-eaten);
    }

    &.current {
      transform: scale(1.25);
    }
  }
}
.over-the-hill {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 2%;
  box-sizing: border-box;
  container-type: size;
  background: var(--background--zero-or-next);

  .bars-container {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    gap: 0.3cqw;
  }

  .bar {
    position: relative;
    background: var(--color-0);
    transform-origin: center bottom;
    border-radius: var(--border-radius--circle);
    overflow: hidden;
    width: 4cqw;
    transition: var(--transition--shapes);
    border: var(--border--shapes);

    &.eaten {
      border: var(--border--shapes-eaten);
    }

    &.bar-1 .bar-fill { background-color: #ff0000; }   /* Red */
    &.bar-2 .bar-fill { background-color: #ff1a00; }   
    &.bar-3 .bar-fill { background-color: #ff3300; }   
    &.bar-4 .bar-fill { background-color: #ff4d00; }   
    &.bar-5 .bar-fill { background-color: #ff6600; }   /* Red-Orange */
    &.bar-6 .bar-fill { background-color: #ff8000; }   
    &.bar-7 .bar-fill { background-color: #ff9900; }   /* Orange */
    &.bar-8 .bar-fill { background-color: #ffb300; }   
    &.bar-9 .bar-fill { background-color: #ffcc00; }   
    &.bar-10 .bar-fill { background-color: #ffe600; }  /* Yellow */
    &.bar-11 .bar-fill { background-color: #ccff00; }  /* Yellow-Green */
    &.bar-12 .bar-fill { background-color: #99ff00; }  
    &.bar-13 .bar-fill { background-color: #66ff00; }  
    &.bar-14 .bar-fill { background-color: #33ff00; }  /* Green */
    &.bar-15 .bar-fill { background-color: #00ff33; }  
    &.bar-16 .bar-fill { background-color: #00ff66; }  
    &.bar-17 .bar-fill { background-color: #00ff99; }  /* Green-Cyan */
    &.bar-18 .bar-fill { background-color: #00ccff; }  /* Cyan */
    &.bar-19 .bar-fill { background-color: #0066ff; }  /* Blue */
    &.bar-20 .bar-fill { background-color: #3300ff; }  /* Blue-Purple */
    &.bar-21 .bar-fill { background-color: #6600cc; }  /* Purple */

    .bar-fill {
      position: absolute;
      bottom: -2px;
      left: -2px;
      border-radius: var(--border-radius--circle);
      width: calc(100% + 4px);
      height: calc(100% + 4px);
      background: inherit; 
      transition: height 0.1s linear;
      z-index: 1;

      &.eaten {
        height: 0%;
      }
    }
  }
}
.ten-timers {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  container-type: size;
  background: var(--background--zero-or-next);
  
  .rings-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, 1fr);
    width: 90%;
    height: auto;
    place-items: center;
    
    &.bottom-row-only {
      grid-template-rows: none;
      
      /*.ring:nth-child(-n+5) {
        display: none;
      }*/
    }
    
    .ring {
      position: relative;
      aspect-ratio: 1;
      border-radius: 50%;
      width: 18cqw;
      background: var(--color-0);
      display: flex;
      align-items: center;
      justify-content: center;
      border: var(--border--shapes);
      overflow: hidden;
      transition: var(--transition--shapes);
      
      &::before {
        content: '';
        position: absolute;
        inset: 0;
        background: orange;
        mask: conic-gradient(
          from 0deg,
          transparent 0%,
          transparent var(--ring-progress, 0%),
          var(--color-0) var(--ring-progress, 0%)
        );
        -webkit-mask: conic-gradient(
          from 0deg,
          transparent 0%,
          transparent var(--ring-progress, 0%),
          var(--color-0) var(--ring-progress, 0%)
        );
      }
      
      &:nth-child(1)::before { background: #ff0000; } /* Red */
      &:nth-child(2)::before { background: #ff1a00; }
      &:nth-child(3)::before { background: #ff3300; }
      &:nth-child(4)::before { background: #ff4d00; }
      &:nth-child(5)::before { background: #ff6600; }
      &:nth-child(6)::before { background: #ff8000; }
      &:nth-child(7)::before { background: #ff9900; }
      &:nth-child(8)::before { background: #ffb300; }
      &:nth-child(9)::before { background: #ffcc00; }
      &:nth-child(10)::before { background: #ffe600; } /* Yellow */
      
      &::after {
        content: '';
        position: absolute;
        inset: 30%;
        border-radius: 50%;
        background: var(--color-0);
        border: var(--border--shapes);
        z-index: 1;
      }
      
      &.eaten {
        border: var(--border--shapes-eaten);

        &::after {
          border: var(--border--shapes-eaten);
        }
      }
    }
  }
}
.up-and-down {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  container-type: size;
  background: var(--background--zero-or-next);

  .timer-display {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    height: 100%;
    width: 100%;

    &.masked {
      background: linear-gradient(to right, red, yellow);
      -webkit-mask-image: linear-gradient(to right, black 0%, black 0%, transparent 0%, transparent 100%);
      mask-image: linear-gradient(to right, black 0%, black 0%, transparent 0%, transparent 100%);
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;

      .timer-half {
        color: var(--color-0);
      }
    }

    .timer-half {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10.5cqw;
      font-weight: 800;
      letter-spacing: -0.1rem;
      color: var(--color-10);
      transition: transform 0.1s ease-out;
    }
  }

  .top-lines {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 15cqh;
    background: linear-gradient(
      to right,
      transparent 0%,
      transparent 10%,
      var(--color-8) calc(10%),
      var(--color-8) calc(10% + 1px),
      transparent calc(10% + 1px),
      transparent calc(20%),
      var(--color-8) calc(20%),
      var(--color-8) calc(20% + 1px),
      transparent calc(20% + 1px),
      transparent calc(30%),
      var(--color-8) calc(30%),
      var(--color-8) calc(30% + 1px),
      transparent calc(30% + 1px),
      transparent calc(40%),
      var(--color-8) calc(40%),
      var(--color-8) calc(40% + 1px),
      transparent calc(40% + 1px),
      transparent calc(50%),
      var(--color-8) calc(50%),
      var(--color-8) calc(50% + 1px),
      transparent calc(50% + 1px),
      transparent calc(60%),
      var(--color-8) calc(60%),
      var(--color-8) calc(60% + 1px),
      transparent calc(60% + 1px),
      transparent calc(70%),
      var(--color-8) calc(70%),
      var(--color-8) calc(70% + 1px),
      transparent calc(70% + 1px),
      transparent calc(80%),
      var(--color-8) calc(80%),
      var(--color-8) calc(80% + 1px),
      transparent calc(80% + 1px),
      transparent calc(90%),
      var(--color-8) calc(90%),
      var(--color-8) calc(90% + 1px),
      transparent calc(90% + 1px)
    );
    pointer-events: none;
    z-index: 5;
  }

  .bottom-lines {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 15cqh;
    background: linear-gradient(
      to right,
      transparent 0%,
      transparent calc(10%),
      var(--color-8) calc(10%),
      var(--color-8) calc(10% + 1px),
      transparent calc(10% + 1px),
      transparent calc(20%),
      var(--color-8) calc(20%),
      var(--color-8) calc(20% + 1px),
      transparent calc(20% + 1px),
      transparent calc(30%),
      var(--color-8) calc(30%),
      var(--color-8) calc(30% + 1px),
      transparent calc(30% + 1px),
      transparent calc(40%),
      var(--color-8) calc(40%),
      var(--color-8) calc(40% + 1px),
      transparent calc(40% + 1px),
      transparent calc(50%),
      var(--color-8) calc(50%),
      var(--color-8) calc(50% + 1px),
      transparent calc(50% + 1px),
      transparent calc(60%),
      var(--color-8) calc(60%),
      var(--color-8) calc(60% + 1px),
      transparent calc(60% + 1px),
      transparent calc(70%),
      var(--color-8) calc(70%),
      var(--color-8) calc(70% + 1px),
      transparent calc(70% + 1px),
      transparent calc(80%),
      var(--color-8) calc(80%),
      var(--color-8) calc(80% + 1px),
      transparent calc(80% + 1px),
      transparent calc(90%),
      var(--color-8) calc(90%),
      var(--color-8) calc(90% + 1px),
      transparent calc(90% + 1px)
    );
    pointer-events: none;
    z-index: 5;
  }
}
.x-groups-of-y {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  container-type: size;

  .groups-display {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 90%;

    > div {
      display: flex;
      align-items: center;
      justify-content: space-around;
      border: var(--border--shapes);
      border-radius: 1rem;

      span {
        font-size: 8.5cqw;
        font-weight: 800;
        letter-spacing: -0.05rem;

        &.static-text {
          color: var(--color-10);
        }

        &.groups-of-x {
          color: #00ff99;
        }

        &.time-of-x {
          color: #ff6600;
        }

        &.changed {
          animation: numberChange 0.3s ease-out;
        }
      }

      svg {
        color: var(--color-8);
      }
    }
  }
}

@keyframes numberChange {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *



 */

html {
  font-size: 16px;
}

body {
  font-family: var(--font-family--sans-serif);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
  background: var(--background--wood-veneer);
  color: var(--color-10);
}

main {
  margin-top: 12dvh;
  width: min(90vw, 800px);
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 4rem;
}

footer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2rem 0;
}

a {
  color: inherit;
}

h1 {
  font-weight: 700;
  font-size: clamp(4rem, 12vw, 6rem);
  line-height: 0.9;
  letter-spacing: -0.25rem;
  position: relative;
  font-family: 'EBGaramond';
  color: var(--color-10);
}

.banner-wrapper { 
  text-decoration: none;
  @media (min-width: 600px) {
    margin: 2rem 0;
  }
}

.master-timer-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 19.5 / 9; /* Phone ratio */
  border-radius: 2rem;
  background: var(--color-0);
  padding: 0.5rem;
  box-shadow: 0 0 2rem var(--color-0-50);

  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 100cqw;
    height: 6rem;
    background: var(--background--70s-vibe);
    z-index: -1;
  }

  .master-timer {
    border-radius: 1.5rem;
    overflow: hidden;
  }
}

h3 {
  margin-top: 2rem;
  font-size: clamp(2.2rem, 5vw, 2.8rem);
  font-family: var(--font-family--sans-serif);
  font-style: italic;
  font-weight: 800;
  letter-spacing: -0.05rem;
  line-height: 1;
}

p {
  font-family: 'EBGaramond';
  font-size: clamp(1.4rem, 2vw, 1.6rem);
  line-height: 1.3;

  &.desktop-note {
    border-radius: 2rem;
    border: var(--border--crevice);
    background: var(--background--crevice);
    box-shadow: var(--box-shadow--crevice);
    color: var(--color-10);
    padding: 2rem;
  }
}

.polaroid {
  float: right;
  width: 40%;
  rotate: 5deg;
  margin: 1.2rem;
  padding: 1%;
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  background-color: var(--color-10);

  @media (max-width: 600px) {
    display: none;
  }
}

.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 1rem;
  column-gap: 1rem;

  @media (max-width: 600px) {
    grid-template-columns: 1fr;
  }

  figure {
    figcaption {
      padding: 0 10%;
      text-align: center;
    }

    border-radius: 2rem;
    border: var(--border--crevice);
    background: var(--background--crevice);
    box-shadow: var(--box-shadow--crevice);
    padding-bottom: 2rem;
  }

  .refreshable {
    position: relative;
    overflow: hidden;
    
    &::before {
      content: "Re-zero!*";
      position: absolute;
      top: 10%;
      background: var(--color--scary);
      padding: 0.5rem 1rem;
      color: white;
      font-size: 0.8rem;
      font-weight: bold;
      text-transform: uppercase;
      transform: skewX(-15deg) translateX(10%);
      z-index: 10;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
  }

  .refreshable-note {
    padding: 1rem 2rem;
    font-family: var(--font-family--sans-serif);
    font-size: 1rem;
    background:  var(--color--scary);
    color: var(--color-11);

    @media (min-width: 600px) {
      grid-column: span 2;
    }
  }
}

/* Install Popup Styles */
.install-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background-color: var(--color-0-50);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  color: var(--color-1);

  .content {
    background: var(--color-10);
    border-radius: 1rem;
    width: 90vw;
    max-height: 80vh;
    overflow-y: auto;
    padding: 1.5rem;

    .header {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1rem;

      .close {
        position: absolute;
        top: -1rem;
        right: 0;
        background: none;
        border: none;
        font-size: 2rem;
        color: var(--color-1);
        cursor: pointer;
        padding: 0;
        width: 1rem;
        height: 1rem;
      }

      .title {
        margin: 0;
        font-size: 1.8rem;
        letter-spacing: -0.05rem;
        font-weight: 800;
        font-style: italic;
      }
    }

    .body {
      svg {
        display: inline;
      }

      ol {
        margin: 0 0 1rem 0;
        padding-left: 1.5rem;
      
        li {
          margin-bottom: 0.5rem;
          line-height: 1.4;
          font-size: 1rem;
        }
      }
    }

    .done-btn {
      background: var(--color-0);
      width: 100%;
      color: white;
      border: none;
      padding: 0.8rem 2rem;
      border-radius: 0.5rem;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: background-color 0.2s ease;
    }
  }
}