html {
    background: repeating-linear-gradient(
	-40deg,
	#f9f9f9 0, #f9f9f9 1rem,
	#f4f4f4 1.0rem, #f4f4f4 2rem

);

    background-repeat: no-repeat;
    background-attachment: fixed;
}

body {
    font-family: "Helvetica", Arial, sans-serif;
    line-height: 1.75rem;
}

a, a:hover, a:active {
    color: #f70;
    text-decoration-color: #fa0;
    text-decoration-thickness: 0.15rem;
}

.nav {
    list-style: none;
    margin: 0;
    padding: 0 1rem 1rem;
}

.nav-container {
    width: 200px;
}

a.nav-button {
    -webkit-background-clip: none;
    margin-bottom: 0.5rem;
    display: block;
    background-color: #e4e4e4;
    border: 4px solid;
    border-color: #CCC #555 #555 #CCC;
    text-decoration: none;

    text-align: center;
    padding: 0.25rem;
    color: black;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    font-weight: 700;
}


.page {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
}

.content {
    flex: 1;
}

.content a {
    color: #f70;
    text-decoration-color: #fa0;
    text-decoration-thickness: 2px;
}

.content a:hover, .content a:active {
      background: -webkit-linear-gradient(0deg, #0c0, #fa0);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
}

.breadcrumb {
    border-bottom: 1px dashed #ccc;
}


.content-inner {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    flex: 1;
    padding: 0 2rem 2rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.footer {
    font-size: 0.85rem;
    text-align: center;
    max-width: 960px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .page { display: block; }
    .nav-container {
    width: auto;
}
}

.hero {
    text-align: center;
    margin: 5rem 0;
}


.osx, .osx:hover {
    display: flex;
    align-items: center;
    justify-content: center;
  grid-row: 1;
  padding: 0.35rem 0;
  font-family: "myriad-pro", system-ui;
  font-weight: 400;
  text-align: center;
  text-decoration: none;
  color: black;
  height: 1.75em;
  min-width: 6em;
  border-radius: 1000px;
  position: relative;
  overflow: hidden;
  outline: none;
  margin-bottom: 1rem;
}

.osx.primary {
  background: linear-gradient(rgba(0, 65, 184, 0.625), rgba(45, 115, 199, 0.625), rgba(33, 160, 196, 0.625));
  box-shadow: 0 0.375em 0.5em rgba(0, 0, 0, 0.3),
              0 0.125em 0.125em rgba(0, 78, 187, 0.5),
              inset 0 0.25em 0.5em rgba(0, 17, 49, 0.8),
              inset 0 0.375em 0.5em 0.25em rgba(0, 78, 187, 0.75)
}
.osx.primary {
  /* A gradient transitioning from deep tangerine to a bright orange-amber */
  background: linear-gradient(
    rgba(255, 117, 0, 0.625),
    rgba(255, 140, 0, 0.625),
    rgba(255, 165, 0, 0.625)
  );

  /* Shadow adjustments to replace blue glow with warm orange/darker tones */
  box-shadow: 0 0.375em 0.5em rgba(0, 0, 0, 0.3),
              0 0.125em 0.125em rgba(204, 85, 0, 0.5), /* Burnt orange glow */
              inset 0 0.25em 0.5em rgba(49, 20, 0, 0.8), /* Dark brown-orange depth */
              inset 0 0.375em 0.5em 0.25em rgba(204, 85, 0, 0.75); /* Inner tangerine glow */
}

.osx.primary {
  /* High-saturation neon tangerine gradient */
  background: linear-gradient(
    rgba(255, 69, 0, 0.8),    /* Orange-Red base for depth */
    rgba(255, 102, 0, 0.8),   /* Vivid Tangerine middle */
    rgba(255, 140, 0, 0.8)    /* Bright Orange top */
  );

  /* Sharpened shadows for a "hot" glow effect */
  box-shadow: 0 0.375em 0.5em rgba(0, 0, 0, 0.4),
              0 0.125em 0.125em rgba(255, 69, 0, 0.6), /* Hot orange-red outer glow */
              inset 0 0.25em 0.5em rgba(80, 20, 0, 0.9),  /* Deep contrast core */
              inset 0 0.375em 0.5em 0.25em rgba(255, 120, 0, 0.8); /* Intense inner glow */
}
.osx.primary {
  /* Transitioning from a punchy lime to a bright electric green */
  background: linear-gradient(
    rgba(50, 205, 50, 0.75),   /* Lime Green */
    rgba(124, 252, 0, 0.75),  /* Lawn Green */
    rgba(173, 255, 47, 0.75)  /* Green Yellow highlight */
  );

  /* Shadows tuned for green depth and "zest" */
  box-shadow: 0 0.375em 0.5em rgba(0, 0, 0, 0.3),
              0 0.125em 0.125em rgba(50, 205, 50, 0.5),   /* Soft lime outer glow */
              inset 0 0.25em 0.5em rgba(10, 40, 0, 0.8),   /* Deep forest-green depth */
              inset 0 0.375em 0.5em 0.25em rgba(124, 252, 0, 0.7); /* Bright inner glow */
}

.osx.primary:focus,
.osx.primary:active {
  box-shadow: 0 0.375em 0.5em rgba(0, 0, 0, 0.3),
              0 0.125em 0.125em rgba(0, 78, 187, 0.5),
              inset 0 0.25em 0.5em rgba(0, 17, 49, 0.8),
              inset 0 0.375em 0.5em 0.25em rgba(0, 78, 187, 0.75),
              0 0 0.5em rgba(52, 106, 227, 0.5);
}


/* Focus and Active states */
.osx.primary:focus,
.osx.primary:active {
  box-shadow: 0 0.375em 0.5em rgba(0, 0, 0, 0.3),
              0 0.125em 0.125em rgba(50, 205, 50, 0.5),   /* Lime green outer glow */
              inset 0 0.25em 0.5em rgba(5, 30, 0, 0.9),    /* DEEPER forest-green depth (for active) */
              inset 0 0.375em 0.5em 0.25em rgba(100, 210, 0, 0.8), /* Concentrated bright inner glow */

              /* This is the final focus ring glow: */
              0 0 0.5em rgba(173, 255, 47, 0.6); /* Soft Green-Yellow halo */
}


.osx.secondary {
  background: linear-gradient(rgba(160, 160, 160, 0.625), rgba(255, 255, 255, 0.625));
  box-shadow: 0 0.375em 0.5em rgba(0, 0, 0, 0.2),
              0 0.125em 0.125em rgba(0, 0, 0, 0.3),
              inset 0 0.25em 0.25em rgba(0, 0, 0, 0.4),
              inset 0 0.375em 0.5em 0.25em #BBBBBB;
}

.osx.secondary:focus,
.osx.secondary:active {
  box-shadow: 0 0.375em 0.5em rgba(0, 0, 0, 0.2),
              0 0.125em 0.125em rgba(0, 0, 0, 0.3),
              inset 0 0.25em 0.25em rgba(0, 0, 0, 0.4),
              inset 0 0.375em 0.5em 0.25em #BBBBBB,
              0 0 0.5em rgba(0, 0, 0, 0.25);
}

.osx:before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  height: 33%;
  background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.3));
  width: calc(100% - 0.875em);
  border-radius: 2em 2em 0.5em 0.5em;
  top: 5%;
  filter: blur(1px);
  z-index: 2;
}

.osx:after {
        content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 33%;
  background: linear-gradient(rgba(255, 255, 255, 0.2), rgb(255, 255, 255, 0.5));
  width: calc(100% - 1.25em);
  border-radius: 0.75em;
  bottom: 10%;
  filter: blur(3px);
}

.osx span {
  letter-spacing: 0.0375em;
  -webkit-text-stroke-width: 0.025em;
  -webkit-text-stroke-color: #000000;
}

.osx.primary span {
  text-shadow: 0 0.25em 0.2em rgba(30, 77, 161, 0.5);
}

.osx.secondary span {
  text-shadow: 0 0.25em 0.2em rgba(0, 0, 0, 0.25);
}