:root {
  color-scheme: dark;
  --paper: #000;
  --ink: #fff;
  --eye-width: clamp(54px, 6.2vmin, 68px);
  --eye-height: clamp(27px, 3.1vmin, 34px);
  --dot-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='3' fill='white'/%3E%3C/svg%3E") 5 5, default;
}

* { box-sizing: border-box; }
html, body {
  width: 100%; height: 100%; min-width: 0; margin: 0; overflow: hidden;
  background: var(--paper); color: var(--ink); overscroll-behavior: none;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
html, body, body *, body *::before, body *::after { cursor: var(--dot-cursor) !important; }
body { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
button { font: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

.app {
  position: relative; width: 100%; height: 100vh; height: 100svh; height: 100dvh;
  overflow: hidden; isolation: isolate; background: #000;
}
.layer { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.drawer { z-index: 1; background: #000; }
.transition { z-index: 3; display: block; pointer-events: none; touch-action: none; }
.app[data-state="offer"] .transition { pointer-events: auto; cursor: pointer; }
.app[data-state="drawing"] .transition,
.app[data-state="face-drawing"] .transition { pointer-events: auto; cursor: default; }
.app[data-state="drawing"] .drawer,
.app[data-state="face-drawing"] .drawer,
.app[data-state="face-hold"] .drawer,
.app[data-state="face-dropping"] .drawer,
.app[data-state="holding"] .drawer,
.app[data-state="morphing"] .drawer,
.app[data-state="dropping"] .drawer,
.app[data-state="offer"] .drawer,
.app[data-state="opening"] .drawer,
.app[data-state="playing"] .drawer,
.app[data-state="closing"] .drawer { pointer-events: none; }

.puzzle-reveal {
  z-index: 2;
  background: #000;
  visibility: hidden;
  clip-path: ellipse(0 0 at 50% 50%);
  pointer-events: none;
}
.puzzle-reveal.opening {
  visibility: visible;
  animation: reveal-puzzle 1100ms cubic-bezier(.2,.74,.16,1) forwards;
}
.puzzle-reveal.fading-in {
  visibility: visible;
  clip-path: none;
  pointer-events: none;
  animation: fade-puzzle 900ms ease-out forwards;
}
.puzzle-reveal.open {
  visibility: visible;
  clip-path: none;
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.puzzle-reveal.closing {
  visibility: visible;
  clip-path: none;
  pointer-events: none;
  transform-origin: 50% 50%;
  animation: shrink-puzzle var(--puzzle-close-duration, 1600ms) cubic-bezier(.7,0,.88,.28) forwards;
}
.puzzle-frame { display: block; width: 100%; height: 100%; border: 0; background: #000; }

@keyframes reveal-puzzle { to { clip-path: ellipse(150vmax 150vmax at 50% 50%); } }
@keyframes conceal-puzzle { to { clip-path: ellipse(calc(var(--eye-width) * .48) calc(var(--eye-height) * .48) at 50% 50%); } }
@keyframes fade-puzzle { from { opacity: 0; } to { opacity: 1; } }
@keyframes shrink-puzzle { from { transform: scale(1); } to { transform: scale(.001); } }

.eye {
  position: absolute;
  z-index: 5;
  left: 50%; top: 50%;
  width: var(--eye-width); height: var(--eye-height);
  padding: 0; border: 0; background: transparent; color: #fff;
  transform: translate(-50%, -50%) scale(.03, .03);
  transform-origin: center;
  cursor: pointer;
  transition: transform 360ms cubic-bezier(.2,.78,.2,1), opacity 220ms ease;
}
.eye[hidden] { display: none; }
.eye.closed { transform: translate(-50%, -50%) scale(1); }
.eye.open { transform: translate(-50%, -50%) scale(1); }
.eye.open.blinking,
.eye.open.hint { transform: translate(-50%, -50%) scale(1); }
.eye.point { transform: translate(-50%, -50%) scale(.03, .03); }
.eye.proxy { opacity: 0; pointer-events: none; }
.eye.behind-wheel { visibility: hidden; }
.eye:focus-visible { outline: 1px solid #fff; outline-offset: 8px; }

.eye-outline,
.eye::after {
  position: absolute;
  display: block;
  content: "";
  clip-path: polygon(0 50%, 12% 30%, 31% 12%, 50% 5%, 69% 12%, 88% 30%, 100% 50%, 88% 70%, 69% 88%, 50% 95%, 31% 88%, 12% 70%);
}
.eye-outline { inset: 0; background: #fff; }
.eye::after { inset: 3px 4px; background: #000; }
.eye-line {
  position: absolute; z-index: 3; left: 0; right: 0; top: 50%; height: 3px;
  border-radius: 99px; background: #fff; opacity: 0; transform: translateY(-50%);
}
.eye.closed .eye-outline,
.eye.closed::after,
.eye.closed .pupil,
.eye.open.blinking .eye-outline,
.eye.open.blinking::after,
.eye.open.blinking .pupil,
.eye.open.hint .eye-outline,
.eye.open.hint::after,
.eye.open.hint .pupil { opacity: 0; }
.eye.closed .eye-line,
.eye.open.blinking .eye-line,
.eye.open.hint .eye-line { opacity: 1; }

.pupil {
  position: absolute;
  z-index: 2;
  left: 50%; top: 50%;
  width: calc(var(--eye-height) * .45);
  height: calc(var(--eye-height) * .45);
  margin-left: calc(var(--eye-height) * -.225);
  margin-top: calc(var(--eye-height) * -.225);
  background: #fff;
  transform: translate(var(--look-x, 0), var(--look-y, 0));
  transition: transform 520ms cubic-bezier(.2,.72,.2,1);
}
.pupil-circle { border-radius: 50%; }
.pupil-triangle { clip-path: polygon(50% 0, 100% 88%, 0 88%); }
.pupil-square { clip-path: inset(5%); }
.pupil-pentagon { clip-path: polygon(50% 0, 98% 36%, 79% 94%, 21% 94%, 2% 36%); }
.pupil-hexagon { clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media (pointer: coarse) {
  .eye { min-width: 54px; min-height: 44px; }
  .eye-outline { top: 5px; bottom: 5px; }
  .eye::after { top: 8px; bottom: 8px; }
}

@media (max-width: 480px), (max-height: 480px) {
  :root { --eye-width: clamp(54px, 12vmin, 64px); --eye-height: clamp(27px, 6vmin, 32px); }
}

@media (prefers-reduced-motion: reduce) {
  .pupil { transition: none; }
  .puzzle-reveal.opening, .puzzle-reveal.fading-in, .puzzle-reveal.closing { animation-duration: 1ms; }
  .eye { transition-duration: 1ms; }
}