.container {
    width: min(90%, 500px);
    height: 50px;
    margin: auto;
    margin-bottom: 1em; /* Add some space after the container */
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(10, minmax(44px, 1fr));
  }

  .floppysquare-container {
    width: 100%;
    height: 50px;
    float: left;
    overflow: hidden;
    cursor: pointer;
    transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform;
    /* Reset native link/button chrome: the squares are now a nav */
    display: block;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
  }
  
  /* Hover lift only where hover exists; touch devices get the
     :active press instead, avoiding sticky post-tap hover states */
  @media (hover: hover) {
    .floppysquare-container:hover {
      transform: scale(1.2) rotate(15deg);
      z-index: 2;
    }
  }

  .floppysquare {
    display: block;
    width: 100%;
    height: 100%;
    transition: filter 0.3s ease, background-color 0.5s ease,
      border-radius 250ms ease-out, transform 80ms ease-out;
  }

  .floppysquare-container:hover .floppysquare {
    filter: brightness(1.2);
  }

  /* Keep all ten navigation targets at least 44px square by wrapping
     them into two rows on narrow screens. */
  @media (max-width: 600px) {
    .container {
      height: auto;
      grid-template-columns: repeat(5, minmax(44px, 1fr));
    }

    .floppysquare-container {
      height: 44px;
    }
  }

  /* Nav animation modes - flick between them with URL flags
     (#nav-flop, #nav-disco, #nav-grid, #nav-spin) or by clicking the
     "Brady Clarke" title, an easter egg that cycles through them.
     Every animation lives on the inner .floppysquare span, so the
     clickable container boxes never move in any mode, and hovering,
     focusing, or opening a square pauses only that square.
     Each square carries --i (0-9) inline for the staggered delays. */

  /* #nav-flop (default): each square flips in place on its own cycle */
  .container.nav-mode-flop .floppysquare {
    animation: navFlop 4s linear infinite;
    animation-delay: calc(var(--i, 0) * -0.4s);
  }

  /* #nav-spin: the classic strip flip - the same animation with no
     stagger, so the squares flip in unison about their shared midline */
  .container.nav-mode-spin .floppysquare {
    animation: navFlop 3s linear infinite;
  }

  @keyframes navFlop {
    0% { transform: rotate3d(1, 0, 0, 0deg); }
    50% { transform: rotate3d(1, 0, 0, 180deg); }
    100% { transform: rotate3d(1, 0, 0, 360deg); }
  }

  /* #nav-grid: stationary grid with breathing room and a gentle pulse.
     The gap (and the squares' border-radius, in the .floppysquare
     transition) ease in and out so switching modes doesn't snap. */
  .container {
    transition: gap 250ms ease-out;
  }

  .container.nav-mode-grid {
    gap: 6px;
  }

  .container.nav-mode-grid .floppysquare {
    border-radius: 4px;
    animation: navBreathe 5s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * -0.5s);
  }

  @keyframes navBreathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(0.9); filter: brightness(1.1); }
  }

  /* #nav-disco: staggered colour shimmer, fully stationary */
  .container.nav-mode-disco .floppysquare {
    animation: navDisco 6s linear infinite;
    animation-delay: calc(var(--i, 0) * -0.6s);
  }

  @keyframes navDisco {
    0%, 100% { filter: hue-rotate(0deg) brightness(1); }
    50% { filter: hue-rotate(180deg) brightness(1.15); }
  }

  /* Settle an individual square flat while it is hovered,
     keyboard-focused, or expanded into its info card. The other squares
     keep going. animation-play-state: paused would freeze the flip at an
     arbitrary angle - sometimes edge-on, where the square the user is
     aiming at becomes a near-invisible sliver - so the square's own
     animation stops and it presents face-on instead. */
  .floppysquare-container:hover .floppysquare,
  .floppysquare-container:focus-visible .floppysquare,
  .floppysquare-container.is-open .floppysquare {
    animation: none;
    transform: none;
  }

  /* Press feedback for both mouse and touch; placed after the mode and
     settle rules so it outranks them at equal specificity */
  .floppysquare-container:active .floppysquare {
    animation: none;
    transform: scale(0.9);
  }

  /* The "Brady Clarke" title doubles as the mode-cycling easter egg */
  .nav-mode-egg {
    display: inline-block;
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    transition: transform 200ms ease;
  }

  /* A whisper of affordance: the title leans when pointed at, and pops
     when clicked, without giving the whole secret away */
  .nav-mode-egg:hover,
  .nav-mode-egg:focus-visible {
    transform: rotate(-2deg) scale(1.02);
  }

  .nav-mode-egg.is-popping {
    animation: eggPop 250ms ease-out;
  }

  @keyframes eggPop {
    0% { transform: scale(1, 1); }
    40% { transform: scale(0.94, 0.86); }
    70% { transform: scale(1.05, 1.08); }
    100% { transform: scale(1, 1); }
  }

  /* Transient confirmation of which nav mode the egg just cycled to */
  .nav-mode-toast {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(20, 20, 35, 0.92);
    background: color-mix(in oklab, #18C1F3 14%, rgb(26 16 40 / 0.9));
    border: 1px solid rgba(255, 255, 255, 0.35);
    border: 1px solid color-mix(in oklab, #18C1F3 50%, transparent);
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    color: #fff;
    font-weight: 600;
    z-index: 10002;
    opacity: 0;
    pointer-events: none;
  }

  .nav-mode-toast.is-visible {
    animation: toastFade 1.2s ease forwards;
  }

  @keyframes toastFade {
    0% { opacity: 0; transform: translateX(-50%) translateY(14px) scale(0.92); }
    14% { opacity: 1; transform: translateX(-50%) translateY(-3px) scale(1.02); }
    24% { transform: translateX(-50%) translateY(0) scale(1); }
    85% { opacity: 1; }
    100% { opacity: 0; }
  }

  /* Square info card: the expanded square itself, so everything in it
     is mixed from the square's frozen colour - heading, padding glow,
     and the visit pill - in the site's own typographic voice */
  .square-info-card {
    border: 2px solid var(--square-colour, rgba(255, 255, 255, 0.35));
    border: 2px solid color-mix(in oklab, var(--square-colour, #fff) 70%, transparent);
    padding: 1.1rem 1.1rem 1.2rem;
  }

  .square-info-card h2 {
    margin: 0 2rem 0.5rem 0;
    font-size: 1.6rem;
    font-family: 'Gill Sans', Corbel, Tahoma, sans-serif;
    font-weight: bolder;
    letter-spacing: -1px;
    /* Lifted towards white so every swatch colour stays legible on the
       dark glass, while still unmistakably being that square's hue */
    color: var(--square-colour, #18C1F3);
    color: color-mix(in oklab, var(--square-colour, #18C1F3) 55%, white);
    text-shadow: 0 0 18px color-mix(in oklab, var(--square-colour, #18C1F3) 45%, transparent);
  }

  .square-info-card p {
    margin: 0 0 0.95rem;
    padding: 0;
    text-align: left;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.45;
  }

  .square-info-card .square-info-link {
    display: inline-block;
    border: 1px solid var(--square-colour, rgba(255, 255, 255, 0.5));
    border: 1px solid color-mix(in oklab, var(--square-colour, #fff) 60%, transparent);
    border-radius: 0.45rem;
    padding: 0.45rem 0.75rem;
    background: rgba(255, 255, 255, 0.08);
    background: color-mix(in oklab, var(--square-colour, #18C1F3) 22%, transparent);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 150ms ease, transform 150ms ease;
  }

  .square-info-card .square-info-link:hover,
  .square-info-card .square-info-link:focus-visible {
    background: rgba(255, 255, 255, 0.2);
    background: color-mix(in oklab, var(--square-colour, #18C1F3) 45%, transparent);
  }