:root {
  --bg: #f4ecdc;
  --ink: #2a2118;
  --muted: #7a6a58;
  --card: #fffaf0;
  --line: #e2d5bd;
  --accent: #b8457e;
  --accent-light: #d978a8;
  --accent-dark: #8a2f5d;
  --dark: #1b1510;
  --radius: 28px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; background: var(--bg); color: var(--ink);
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
main {
  width: min(980px, 100%); margin: 0 auto; text-align: center;
  padding: max(24px, env(safe-area-inset-top)) 16px 40px;
}
h1 { font-size: clamp(1.9rem, 6vw, 3.4rem); font-weight: 800; letter-spacing: -0.03em; margin: 8px 0 24px; line-height: 1; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ---------- Loader: a cat pouncing after a ball of yarn; the yarn it unrolls is the progress bar ---------- */
.loader { padding: 24px 0 8px; }
.chase { position: relative; width: min(420px, 100%); height: 128px; margin: 0 auto; }
.chase::before { /* the floor */
  content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; border-radius: 2px; background: var(--line);
}
.track { position: absolute; left: 88px; right: 18px; bottom: 0; height: 14px; }
.toy, .chaser { position: absolute; line-height: 1; }
.toy > span, .chaser > span { display: block; }
/* Emoji animals face left; these run right, so they're mirrored. */
.chaser { left: calc(var(--p, .06) * 100% - 88px); bottom: 7px; font-size: 58px; }
.strand {
  position: absolute; left: 0; bottom: 4px; width: 6%; height: 6px; border-radius: 99px;
  background: repeating-linear-gradient(65deg, #e2581f 0 4px, #f4924d 4px 7px);  /* twisted yarn, the colour of the ball (orange on Apple) */
}
.toy { left: calc(var(--p, .06) * 100%); bottom: 2px; font-size: 34px; transform: translateX(-50%); }
.toy > span { animation: roll .9s linear infinite; }
.chaser > span { transform-origin: 50% 100%; animation: pounce 1.9s infinite; }
@keyframes roll { to { transform: rotate(360deg); } }
@keyframes pounce {  /* crouch, wiggle, leap, land (mirrored, so -x is forward) */
  0% { transform: scaleX(-1); }
  30% { transform: scaleX(-1) scale(1.05, .88); }
  38% { transform: scaleX(-1) scale(1.05, .88) rotate(3deg); }
  46% { transform: scaleX(-1) scale(1.05, .88) rotate(-3deg); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  66% { transform: scaleX(-1) translate(-26px, -44px) rotate(16deg); animation-timing-function: cubic-bezier(.6, 0, .8, .5); }
  82% { transform: scaleX(-1) translate(-12px, 0) scale(1.06, .9); }
  100% { transform: scaleX(-1); }
}
.loader-status { font-size: 1.25rem; font-weight: 600; margin: 12px 0 14px; }
.bar { width: min(380px, 100%); height: 14px; margin: 0 auto; background: var(--card); border: 1px solid var(--line); border-radius: 99px; overflow: hidden; }
.bar-fill {
  height: 100%; width: 6%; border-radius: 99px;
  background: repeating-linear-gradient(-45deg, var(--accent) 0 10px, var(--accent-light) 10px 20px);
  background-size: 28px 28px; animation: stripes .8s linear infinite;
}
@keyframes stripes { to { background-position: 28px 0; } }
.loader.failed .loader-status { min-height: 1.5em; }

/* ---------- Stage ---------- */
.frames { display: flex; justify-content: center; gap: 24px; }
.frame {
  position: relative; width: min(480px, 100%); aspect-ratio: 1; border-radius: var(--radius); overflow: hidden;
  background: var(--dark); box-shadow: 0 2px 0 var(--line), 0 24px 40px -28px rgba(60, 40, 10, .6);
}
.frame video, .frame #shot { width: 100%; height: 100%; object-fit: cover; display: block; }
.frame .mirror { transform: scaleX(-1); }
.guide {
  position: absolute; inset: 12% 24% 10%; border: 3px dashed rgba(255, 255, 255, .6);
  border-radius: 50% / 45%; pointer-events: none; transition: opacity .3s;
}
.count {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  font-size: clamp(5rem, 22vw, 9rem); font-weight: 800; color: #fff; text-shadow: 0 4px 30px rgba(0, 0, 0, .5);
}
/* Full-screen camera flash: instant white, then a quick fade. */
.screen-flash { position: fixed; inset: 0; z-index: 80; background: #fff; opacity: 0; pointer-events: none; }
.screen-flash.go { animation: flash .6s cubic-bezier(.1, .7, .3, 1); }
@keyframes flash { 0% { opacity: 1; } 15% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .frame { transition: none !important; }
  @keyframes flash { 0% { opacity: .5; } 100% { opacity: 0; } }
}
.empty { position: absolute; inset: 0; display: grid; place-content: center; color: #d9cbb4; padding: 24px; }
.empty span { font-size: 3rem; }
.retake {
  position: absolute; right: 12px; top: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .92); color: var(--ink); display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25); transition: transform .2s;
}
.retake:hover { transform: rotate(-60deg); }

.frame.monkey { display: none; }
.monkey-photo { position: absolute; inset: 0; border: 0; padding: 0; background: center / cover no-repeat; cursor: pointer; opacity: 0; transition: opacity .35s; }
.monkey-photo.show { opacity: 1; }
/* Slot-machine reel: cards slide down through the frame with vertical motion blur. */
.reel { position: absolute; inset: 0; overflow: hidden; filter: url(#motionBlur); }
.reel-card { position: absolute; inset: 0; background: center / cover no-repeat; will-change: transform; }

.tabs { display: none; }

/* Capture: only the camera. Matching/result: both frames. */
.stage[data-state="capture"] .retake { display: none; }
.stage:not([data-state="capture"]) .frame.monkey { display: block; }
.stage:not([data-state="capture"]) .guide { opacity: 0; }
.stage:not([data-state="capture"]) .controls { display: none; }
.stage[data-state="matching"] .retake { display: none; }
.stage:not([data-state="capture"]) .frame { width: min(440px, 100%); }

/* ---------- Verdict ---------- */
.verdict { margin: 22px auto 0; max-width: 620px; }
.verdict:empty { display: none; }
.verdict h2 { margin: 0; font-size: clamp(1.7rem, 5vw, 2.6rem); letter-spacing: -0.02em; line-height: 1.05; }
.verdict h2 button {
  border: 0; background: none; padding: 0; cursor: pointer; font-weight: 800;
  text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 6px;
}
.verdict .pct { margin: 10px 0 0; font-size: 1.1rem; }
.verdict .pct b { color: var(--accent); }
.verdict .hint { color: var(--muted); font-size: .9rem; margin: 6px 0 0; }
/* "Download video" under the verdict (result view only) */
.share-row { display: flex; justify-content: center; margin: 16px 0 0; }
.stage:not([data-state="result"]) .share-row { display: none; }
.share-row .primary { display: inline-flex; align-items: center; gap: 8px; }
/* The clip in the drawer */
.drawer.video video { display: block; max-width: 100%; max-height: 62dvh; border-radius: 20px; margin: 4px auto 16px; box-shadow: 0 2px 0 var(--line), 0 24px 40px -28px rgba(60, 20, 20, .6); }
.video-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.video-actions .primary, .video-actions .secondary { flex: 1 1 160px; justify-content: center; }

/* ---------- Controls ---------- */
.controls { display: flex; gap: 12px; margin: 26px 0 8px; justify-content: center; flex-wrap: wrap; }
.primary, .secondary {
  font-weight: 700; font-size: 1.2rem; border: 0; cursor: pointer; border-radius: 99px;
  padding: 15px 30px; display: inline-flex; align-items: center; gap: 12px; min-height: 54px;
  transition: transform .08s, box-shadow .08s;
}
.primary { background: var(--accent); color: #fff; box-shadow: 0 4px 0 var(--accent-dark); }
.primary:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--accent-dark); }
.primary:disabled { opacity: .5; cursor: wait; }
.secondary { background: transparent; box-shadow: inset 0 0 0 2px var(--line); }
.secondary:hover { box-shadow: inset 0 0 0 2px var(--muted); }
kbd {
  font: 600 .75rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 5px 7px; border-radius: 7px;
  background: rgba(255, 255, 255, .22); border: 1px solid rgba(255, 255, 255, .45); border-bottom-width: 2px;
}
.secondary kbd { background: var(--card); border-color: var(--line); color: var(--muted); }
.err { color: #b3261e; margin: 12px 0 0; }
.err:empty { display: none; }

/* ---------- Runners-up ---------- */
.runners { margin: 32px auto 0; max-width: 904px; text-align: left; }
.runners h3 { margin: 0 0 12px; font-size: 1rem; color: var(--muted); font-weight: 600; }
.row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.mini {
  display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch;
  background: var(--card); border-radius: 18px; overflow: hidden; border: 1px solid var(--line);
  padding: 0; cursor: pointer; text-align: left; transition: transform .15s;
}
.mini:hover { transform: translateY(-3px); }
.mini img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; flex: none; }
.mini div { padding: 10px 12px 12px; font-size: .95rem; line-height: 1.25; }
.mini span { color: var(--accent); font-weight: 700; }

/* ---------- Spinner while embedding ---------- */
.thinking { color: var(--muted); font-weight: 600; margin-top: 18px; }
.thinking::after { content: "…"; display: inline-block; width: 1em; text-align: left; animation: dots 1s steps(4) infinite; overflow: hidden; vertical-align: bottom; }
@keyframes dots { from { width: 0; } to { width: 1em; } }

/* ---------- Footer ---------- */
.site-footer {
  width: min(904px, calc(100% - 32px)); margin: 8px auto 0; padding: 22px 0 max(28px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); text-align: center;
}
.footer-links { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; }
.footer-links a { color: var(--ink); text-decoration: none; font-weight: 600; border-radius: 99px; padding: 10px 18px; min-height: 44px; display: inline-flex; align-items: center; }
.coffee { background: var(--ink); color: var(--bg) !important; transition: transform .15s; }
.coffee:hover { transform: translateY(-2px) rotate(-1deg); }
/* While loading: just the loader. Footer and creator section appear once the page is ready. */
body.loading .site-footer, body.loading .creator { display: none; }
/* The coffee button waits until they've seen their monkey. */
body:not(.has-result) .coffee { display: none; }
.about { box-shadow: inset 0 0 0 2px var(--line); }
.about:hover { box-shadow: inset 0 0 0 2px var(--muted); }
.footer-note { color: var(--muted); font-size: .8rem; margin: 14px 0 0; }

/* ---------- About the creator ---------- */
html { scroll-behavior: smooth; }
.creator {
  width: min(904px, calc(100% - 32px)); margin: 12px auto 0; padding: 32px 0 max(48px, env(safe-area-inset-bottom));
  display: flex; gap: 32px; align-items: flex-start; scroll-margin-top: 24px;
}
.creator-video { width: 288px; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 18px; flex: none; background: var(--line); }
.creator-text { min-width: 0; color: var(--muted); line-height: 1.7; }
.creator-text h2 { color: var(--ink); margin: 0 0 6px; font-size: 1.6rem; letter-spacing: -0.02em; line-height: 1.2; }
.creator-text p { margin: .6em 0; }
.creator-text strong { color: var(--ink); }
.creator-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; font-size: .95rem; }
.creator-links a { color: var(--muted); text-underline-offset: 4px; }
.creator-links a:first-child { color: var(--accent); font-weight: 600; }
.creator-links a:hover { color: var(--ink); }
@media (max-width: 720px) {
  .creator { flex-direction: column; gap: 20px; }
  .creator-video { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- The other lookalike sites ---------- */
.more-sites { width: min(904px, calc(100% - 32px)); margin: 0 auto; padding: 0 0 max(48px, env(safe-area-inset-bottom)); }
.creator:has(+ .more-sites) { padding-bottom: 28px; }
.more-sites h2 { margin: 0 0 14px; font-size: 1.3rem; letter-spacing: -0.02em; }
.site-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.site-card {
  display: block; overflow: hidden; border-radius: 20px; background: var(--card); color: var(--ink); text-decoration: none;
  box-shadow: 0 0 0 1px var(--line), 0 14px 30px -22px rgba(40, 25, 10, .45); transition: transform .2s, box-shadow .2s;
}
.site-card:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--line), 0 20px 36px -22px rgba(40, 25, 10, .55); }
.site-card img { display: block; width: 100%; height: auto; aspect-ratio: 40 / 21; object-fit: cover; background: var(--line); }
.site-card-title { display: block; padding: 12px 16px 2px; font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; }
.site-card-url { display: block; padding: 0 16px 14px; color: var(--muted); font-size: .85rem; }
body.loading .more-sites { display: none; }
/* Phones: one row that scrolls sideways, the next card peeking in. */
@media (max-width: 720px) {
  .site-cards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 28px; margin-bottom: -22px; scrollbar-width: none; }
  .site-cards::-webkit-scrollbar { display: none; }
  .site-card { scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) { .site-card, .site-card:hover { transition: none; transform: none; } }

/* ---------- Problem popup ---------- */
.problem {
  position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px;
  background: rgba(42, 33, 24, .35); animation: fade .25s ease;
}
.problem-card {
  width: min(440px, 100%); background: var(--card); border-radius: 26px; padding: 28px 24px 24px; text-align: center;
  box-shadow: 0 24px 60px -20px rgba(40, 25, 10, .5); animation: pop .35s cubic-bezier(.2, .9, .3, 1.2);
}
.problem-emoji { font-size: 3.4rem; line-height: 1; }
.problem h2 { margin: 12px 0 8px; font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1.15; }
.problem p { margin: 0 0 20px; color: var(--muted); line-height: 1.5; }
.problem-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.problem-actions button { font-size: 1rem; padding: 12px 22px; min-height: 48px; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.96); } }

/* ---------- Full-screen photo viewer ---------- */
.gallery img { cursor: zoom-in; }
.viewer { position: fixed; inset: 0; z-index: 60; touch-action: none; user-select: none; -webkit-user-select: none; }
.viewer-bg { position: absolute; inset: 0; background: rgba(12, 9, 6, .94); }
.viewer-img { position: fixed; object-fit: cover; border-radius: 4px; will-change: transform; transform-origin: center; }
.viewer-close, .viewer-caption { opacity: 0; transition: opacity .2s ease; }
.viewer.chrome .viewer-close, .viewer.chrome .viewer-caption { opacity: 1; }
.viewer-close {
  position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px; width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: rgba(255, 255, 255, .14); color: #fff; font-size: 1.1rem; cursor: pointer;
}
.viewer-close:hover { background: rgba(255, 255, 255, .24); }
.viewer-caption {
  position: absolute; left: 16px; right: 16px; bottom: max(18px, env(safe-area-inset-bottom)); margin: 0;
  text-align: center; color: rgba(255, 255, 255, .8); font-size: .85rem;
}
.viewer-caption a { color: inherit; }

/* ---------- Drop overlay ---------- */
.drop-overlay {
  position: fixed; inset: 12px; border: 4px dashed var(--accent); border-radius: 32px; background: rgba(244, 236, 220, .92);
  display: grid; place-items: center; font-size: 2rem; font-weight: 800; opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 30;
}
.drop-overlay.on { opacity: 1; }

/* ---------- Drawer ---------- */
.scrim { position: fixed; inset: 0; background: rgba(20, 14, 8, .45); z-index: 40; opacity: 0; transition: opacity .25s; }
.scrim.on { opacity: 1; }
.drawer {
  position: fixed; left: 50%; bottom: 0; z-index: 50; width: min(680px, 100%); height: 92dvh;
  background: var(--card); border-radius: 26px 26px 0 0; box-shadow: 0 -10px 40px rgba(0, 0, 0, .25);
  transform: translate(-50%, calc(100% + 48px)); transition: transform .32s cubic-bezier(.2, .8, .2, 1);
  display: flex; flex-direction: column; text-align: left;
}
.drawer.dragging { transition: none; }
.handle { padding: 18px 0 21px; cursor: grab; touch-action: none; flex: none; }
.handle span { display: block; width: 46px; height: 5px; border-radius: 99px; background: var(--line); margin: 0 auto; }
.close {
  position: absolute; right: 14px; top: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0;
  background: var(--bg); cursor: pointer; font-size: 1rem;
}
.drawer-body { overflow-y: auto; padding: 4px 22px max(28px, env(safe-area-inset-bottom)); overscroll-behavior: contain; }
.drawer-body h2 { font-size: clamp(1.7rem, 6vw, 2.3rem); margin: 0 48px 2px 0; letter-spacing: -0.02em; line-height: 1.05; }
.drawer-body .desc { color: var(--muted); margin: 4px 0 16px; }
.drawer-body .match { display: inline-block; background: var(--bg); border-radius: 99px; padding: 4px 12px; font-size: .9rem; margin-bottom: 16px; }
.drawer-body .match b { color: var(--accent); }
.gallery { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 22px; margin: 0 -22px 18px; padding: 0 22px; }
.gallery img { height: 240px; border-radius: 16px; scroll-snap-align: start; flex: none; background: var(--line); }
.bio p { line-height: 1.55; margin: 0 0 12px; font-size: 1.02rem; }
.source { font-size: .9rem; margin: 6px 0 20px; }
.source a, .credits a { color: inherit; }
.credits { color: var(--muted); font-size: .75rem; line-height: 1.5; border-top: 1px solid var(--line); padding-top: 12px; }
.credits p { margin: 0 0 4px; }

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  /* Loading fills the phone screen, content centred. */
  body.loading main { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding-bottom: 12vh; }
  body.loading h1 { margin-bottom: 8px; }
  /* Result view: horizontal swipes switch tabs (app.js); vertical scrolling stays native. */
  .stage:not([data-state="capture"]) .frames { touch-action: pan-y; overflow: hidden; border-radius: var(--radius); }
  .footer-links { flex-wrap: nowrap; gap: 8px; }
  .footer-links a { padding: 10px 14px; font-size: .9rem; white-space: nowrap; }
  .frames { gap: 0; }
  /* Result view: the two frames form a strip wider than the container. It has to start at the left edge: flex
     centring would split the overflow over both sides and leave the visible frame half out of view. */
  .stage:not([data-state="capture"]) .frames { justify-content: flex-start; }
  .stage:not([data-state="capture"]) .frame { width: 100%; }
  .stage:not([data-state="capture"]) .tabs {
    display: inline-flex; background: var(--card); border: 1px solid var(--line); border-radius: 99px; padding: 4px; margin-bottom: 14px;
  }
  .tabs button { border: 0; background: none; padding: 9px 20px; border-radius: 99px; font-weight: 600; cursor: pointer; }
  .stage[data-tab="you"] .tabs [data-tab="you"],
  .stage[data-tab="monkey"] .tabs [data-tab="monkey"] { background: var(--ink); color: var(--bg); }
  /* Both frames sit side by side in one strip; the tab chooses which one is in view. The strip moves with the
     finger during a swipe (app.js sets the transform) and glides to the chosen tab otherwise. The frame out of view
     is hidden only once it has left, so it can't be focused or scrolled into view in between. */
  .stage:not([data-state="capture"]) .frame {
    flex: 0 0 100%; transition: transform .34s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .34s; visibility: hidden;
  }
  .stage:not([data-state="capture"])[data-tab="you"] .frame.you,
  .stage:not([data-state="capture"])[data-tab="monkey"] .frame.monkey { visibility: visible; transition-delay: 0s; }
  .stage:not([data-state="capture"])[data-tab="monkey"] .frame { transform: translateX(-100%); }
  .stage:not([data-state="capture"]) .frames.dragging .frame { transition: none; visibility: visible; }
  .primary, .secondary { width: 100%; justify-content: center; }
  .row { grid-template-columns: repeat(2, 1fr); }
  .gallery img { height: 170px; }
}
@media (min-width: 721px) {
  .drawer {
    left: auto; right: 0; top: 0; bottom: 0; width: min(680px, 92vw); height: 100dvh;
    border-radius: 26px 0 0 26px; box-shadow: -10px 0 40px rgba(0, 0, 0, .25);
    transform: translateX(calc(100% + 48px));
  }
  .drawer.open { transform: none; }
  .handle { display: none; }
  .close { top: 16px; right: 16px; }
  .drawer-body { padding-top: 64px; }
}
@media (max-width: 720px) {
  .drawer.video { height: 100dvh; border-radius: 0; }
  .drawer.video .drawer-body { padding-top: 60px; }
  .drawer.video .handle { display: none; }
}
/* Keyboard hints only where there's a keyboard. */
@media (hover: none), (pointer: coarse) {
  kbd { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .toy > span, .chaser > span, .bar-fill { animation: none; }
  .reel { filter: none; }
}