:root {
  --bg-cream: #f4f2ec;
  --eye-outer: #4b5871;
  --eye-middle: #232b3a;
  --eye-inner: #14161d;
  --eye-highlight: #f7f5ee;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg-cream);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

/* Full-viewport background layer holding the eye. Sits behind all page content. */
.eye-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Reference canvas for the layout below is 2000x1236 (the static export).
   The stage locks that aspect ratio via `aspect-ratio`, so every left/top/width
   percentage below is a percentage of the SAME fixed 2000x1236 coordinate
   space no matter what shape the actual browser window is. Mixing
   viewport-width percentages with viewport-height-based vmin sizing (the
   previous approach) only stays concentric when the window happens to match
   the reference aspect ratio -- on any other shape the layers drift apart,
   which is why the touch-the-edge gap grew wider than expected on some
   screens. */
.eye-stage {
  position: absolute;
  left: -1vmin;
  top: calc(50% - 50vmin);
  height: 100vmin;
  aspect-ratio: 2000 / 1236;
  transition: height 0.6s ease, top 0.6s ease, left 0.6s ease;
}

/* Small "badge" state: same internal layer geometry, just a smaller stage
   tucked into the top-right corner. Click toggles this class. Position/size
   use the same left+top+height properties as the large state (never
   left<->right or top<->bottom) so the transition above can interpolate
   cleanly between the two. */
.eye-stage.small {
  height: 24vmin;
  top: -11.84vmin;
  left: calc(100% - 38.44vmin);
}

.eye-layer {
  position: absolute;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  will-change: transform;
}

.eye-outer {
  left: 60.5%;
  top: -12.94%;
  width: 77%;
  background: var(--eye-outer);
  /* Only the outer layer accepts clicks -- clip-path restricts the hit area
     to the visible circle (not its square bounding box), and since the
     other layers inherit pointer-events:none from .eye-bg, a click anywhere
     inside the visible eye (even over the middle/inner/highlight layers,
     which sit on top of outer) falls through to this element. */
  pointer-events: auto;
  clip-path: circle(50% at 50% 50%);
  cursor: pointer;
}

.eye-middle {
  left: 79%;
  top: 16.99%;
  width: 40%;
  background: var(--eye-middle);
}

.eye-inner {
  left: 86%;
  top: 28.32%;
  width: 26%;
  background: var(--eye-inner);
}

.eye-highlight {
  left: 95.75%;
  top: 44.09%;
  width: 6.5%;
  background: var(--eye-highlight);
}

.page {
  position: relative;
  z-index: 1;
  max-width: 600px;
  padding: 4rem 2rem;
  color: #1a1a1a;
}