/* Reference scene isolated between the agreed opening and closing frames. */
body{
  background-color:#e7ddc6;
  background-image:url('/scene/assets/images/desk/background.webp');
  background-repeat:repeat;
  background-size:var(--tile-size);
  background-position:center top;
}
/* The surface is a *tiled* material, so it must keep a constant physical tile
 * size across viewports. `cover` scaled the whole photograph with the window,
 * which read as the tiles themselves growing and shrinking. The asset is a
 * seamless 7x4 block cropped on its grout lines, repeated at a fixed size.
 *
 * --tile-scrim is one dial for how far the pattern recedes behind the desk
 * media and copy: 0 = full strength, .45 = heavily muted.
 */
:root{
  --tile-size:1470px 840px;   /* 7 tiles across the block -> ~210px per tile */
  --tile-scrim:.22;
}
@media(max-width:900px){:root{--tile-size:1050px 600px}}
@media(max-width:600px){:root{--tile-size:770px 440px}}
/* The desk surface the scene actually renders (DeskBackground → .background).
 * Its own rule uses `background-size:80%` — a percentage of a 140%-of-viewport
 * element — so the tiles grew and shrank with the window. Pin them to a fixed
 * size and repeat instead, so the ceramic keeps a constant physical scale.
 */
.background{
  background-color:#e7ddc6!important;
  background-repeat:repeat!important;
  background-size:var(--tile-size)!important;
  background-position:center top!important;
}
.background::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:var(--tile-scrim);
  background:
    radial-gradient(ellipse 80% 64% at 50% 44%,#100a01 20%,#100a01a6 58%,#100a0140 100%),
    #140d02;
}
/* Parent-page campaign navigation replaces the source account links. */
a[href="https://poly.app/login"],a[href="https://poly.app/waitlist"]{display:none!important}
.dollars-wordmark{font-family:Arial,sans-serif;font-size:2.5rem;line-height:1;font-weight:600;letter-spacing:-.065em;color:white;display:block;}
.opening-copy-underline{width:4rem!important;translate:0 2.7rem;}
#__nuxt{opacity:0;transition:opacity .28s ease}
html.desk-ready #__nuxt{opacity:1}
.desk-dock{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);z-index:1000;display:flex;align-items:center;gap:0;padding:.45rem;border-radius:1rem;border:1px solid #ffffff42;background:linear-gradient(110deg,#3838389e,#555562ba);box-shadow:inset 0 1px 4px #fff3,0 3px 8px #0002;backdrop-filter:blur(24px);color:#f4f4f4;font-size:1rem;font-weight:600;white-space:nowrap;opacity:0;transition:opacity .3s;}
.desk-ready .desk-dock{opacity:1}
.desk-dock a,.desk-dock button{display:flex;align-items:center;gap:.65rem;padding:1.2rem .95rem;border-radius:.65rem;cursor:pointer;line-height:1;}
.desk-dock img{width:1.375rem;height:1.375rem;object-fit:contain}
.desk-dock a img{filter:grayscale(1)}
.desk-dock a:hover{background:#ffffff15}
.dock-active{background:#1e1e2480;box-shadow:inset 0 0 0 1px #fff6,inset 0 2px 0 #f79460,0 1px 5px #0008;}
.dock-divider{height:3.25rem;width:1px;background:linear-gradient(transparent,#fff3,transparent)}
.desk-dock a:focus-visible,.desk-dock button:focus-visible{outline:2px solid #8fc5ff;outline-offset:2px}
@media(max-width:767px){.desk-dock{bottom:1rem;font-size:.9rem}.desk-dock a,.desk-dock button{padding:1rem .9rem}.desk-dock img{display:none}}
@media(prefers-reduced-motion:reduce){#__nuxt,.desk-dock{transition:none}}

/* Supplied ad pilot */
.items .item img[src$="/ads/glossier-balm.webp"] { aspect-ratio: 363 / 497; height: auto; object-fit: contain; }
.items .item img[src$="/ads/allbirds-tree-runner.webp"] { aspect-ratio: 260 / 341; height: auto; object-fit: contain; }
.items .item img[src$="/ads/bruvi-coffee.webp"] { aspect-ratio: 363 / 497; height: auto; object-fit: contain; }
.items .item img[src$="/ads/bruvi-pod.webp"] { aspect-ratio: 363 / 497; height: auto; object-fit: contain; }
.items .item img[src$="/ads/kotn-outdoor.webp"] { aspect-ratio: 363 / 497; height: auto; object-fit: contain; }
.items .item img[src$="/ads/skyscanner-flights.webp"] { aspect-ratio: 260 / 341; height: auto; object-fit: contain; }

/* Supplied ad batch two */
.items .item img[src$="/ads/01-Peppy-Creative-03-PeptideTestimonials_1080x1920.webp"] { aspect-ratio: 247 / 341; height:auto; object-fit:contain; }
.items .item img[src$="/ads/01-Peppy-Creative-05-DoubleBPCWhiteboard_1080x1920.webp"] { aspect-ratio: 247 / 341; height:auto; object-fit:contain; }
.items .item img[src$="/ads/01-Peppy-Creative-01-SecretDoublesResults_1080x1920.webp"] { aspect-ratio: 247 / 341; height:auto; object-fit:contain; }
.items .item img[src$="/ads/01-Peppy-Creative-02-BPC157OnlyVsStack_1080x1920.webp"] { aspect-ratio: 247 / 341; height:auto; object-fit:contain; }
.items .item img[src$="/ads/04-Hum-19-changed-period-week.webp"] { aspect-ratio: 308 / 281; height:auto; object-fit:contain; }
.items .item img[src$="/ads/04-Hum-10-warm-compress.webp"] { aspect-ratio: 308 / 281; height:auto; object-fit:contain; }
.items .item img[src$="/ads/04-Hum-11-fits-in-shirt.webp"] { aspect-ratio: 308 / 281; height:auto; object-fit:contain; }
.items .item img[src$="/ads/04-Hum-12-wear-to-bed.webp"] { aspect-ratio: 308 / 281; height:auto; object-fit:contain; }
.items .item img[src$="/ads/04-Hum-14-hugs-ache.webp"] { aspect-ratio: 308 / 281; height:auto; object-fit:contain; }
.items .item img[src$="/ads/04-Hum-15-heating-pad-cant.webp"] { aspect-ratio: 308 / 281; height:auto; object-fit:contain; }
.items .item img[src$="/ads/04-Hum-17-nursing-secret.webp"] { aspect-ratio: 308 / 281; height:auto; object-fit:contain; }
.items .item img[src$="/ads/04-Hum-18-obgyn-appeal.webp"] { aspect-ratio: 308 / 281; height:auto; object-fit:contain; }
.items .item img[src$="/ads/06-Bedrock-07-brass-balls_1x1.webp"] { aspect-ratio: 260 / 341; height:auto; object-fit:contain; }
.items .item img[src$="/ads/06-Bedrock-10-tsa_1x1.webp"] { aspect-ratio: 260 / 341; height:auto; object-fit:contain; }
.items .item img[src$="/ads/06-Bedrock-01-got-cock_1x1.webp"] { aspect-ratio: 260 / 341; height:auto; object-fit:contain; }
.items .item img[src$="/ads/06-Bedrock-05-alt-b_1x1.webp"] { aspect-ratio: 260 / 341; height:auto; object-fit:contain; }
.items .item img[src$="/ads/06-Bedrock-05-agg-a1_1x1.webp"] { aspect-ratio: 260 / 341; height:auto; object-fit:contain; }
.items .item img[src$="/ads/01-Peppy-18-orange-figure_1x1.webp"] { aspect-ratio: 260 / 341; height:auto; object-fit:contain; }
.items .item img[src$="/ads/01-Peppy-np04-specialist_1x1.webp"] { aspect-ratio: 260 / 341; height:auto; object-fit:contain; }
.items .item img[src$="/ads/01-Peppy-02-office-desk_1x1.webp"] { aspect-ratio: 260 / 341; height:auto; object-fit:contain; }
.items .item img[src$="/ads/01-Peppy-14-windshield_1x1.webp"] { aspect-ratio: 260 / 341; height:auto; object-fit:contain; }
.items .item img[src$="/ads/01-Peppy-09-veiny-forearm_1x1.webp"] { aspect-ratio: 260 / 341; height:auto; object-fit:contain; }
.items .item img[src$="/ads/01-Peppy-Creative-05-DoubleBPCWhiteboard_1080x1080.webp"] { aspect-ratio: 260 / 341; height:auto; object-fit:contain; }
.items .item img[src$="/ads/01-Peppy-Creative-06-AnkleHealed_1080x1080.webp"] { aspect-ratio: 260 / 341; height:auto; object-fit:contain; }
.items .item img[src$="/ads/01-Peppy-Creative-07-55PercentOff_1080x1080.webp"] { aspect-ratio: 260 / 341; height:auto; object-fit:contain; }
.items .item img[src$="/ads/01-Peppy-Creative-01-SecretDoublesResults_1080x1080.webp"] { aspect-ratio: 260 / 341; height:auto; object-fit:contain; }
.items .item img[src$="/ads/01-Peppy-Creative-02-BPC157OnlyVsStack_1080x1080.webp"] { aspect-ratio: 260 / 341; height:auto; object-fit:contain; }
.items .item img[src$="/ads/01-Peppy-Creative-03-PeptideTestimonials_1080x1080.webp"] { aspect-ratio: 376 / 509; height:auto; object-fit:contain; }
.items .item img[src$="/ads/01-Peppy-Creative-04-WorldsFirstPeptideCompanion_1080x1080.webp"] { aspect-ratio: 376 / 509; height:auto; object-fit:contain; }

/* Supplied ad batch three */
.items .item img[src$="/ads/swipe-22_oura-ring-instagram-story.webp"] { aspect-ratio:363/497; height:auto; object-fit:contain; }
.items .item img[src$="/ads/swipe-17_clever-stihl-leafblower-ad.webp"] { aspect-ratio:363/497; height:auto; object-fit:contain; }
.items .item img[src$="/ads/swipe-14_chris-do-designcamp.webp"] { aspect-ratio:376/509; height:auto; object-fit:contain; }
.items .item img[src$="/ads/swipe-12_tjibbym-instagram-ad-for-creating-ai-content.webp"] { aspect-ratio:341/260; height:auto; object-fit:contain; }
.items .item img[src$="/ads/swipe-09_hims-before-after-hair-ad-for-social-media.webp"] { aspect-ratio:341/260; height:auto; object-fit:contain; }
.items .item img[src$="/ads/swipe-21_parachute-bathtub-ad.webp"] { aspect-ratio:341/260; height:auto; object-fit:contain; }
.items .item img[src$="/ads/swipe-15_cool-polaroid-ad.webp"] { aspect-ratio:341/260; height:auto; object-fit:contain; }
.items .item img[src$="/ads/swipe-10_radiant-plumbing-funny-van2.webp"] { aspect-ratio:341/260; height:auto; object-fit:contain; }
.items .item img[src$="/ads/swipe-07_microsoft-paint-mirror.webp"] { aspect-ratio:341/260; height:auto; object-fit:contain; }
.items .item img[src$="/ads/swipe-21_unnamed.webp"] { aspect-ratio:341/260; height:auto; object-fit:contain; }
.items .item img[src$="/ads/swipe-02_ecom-ad-example.webp"] { aspect-ratio:341/260; height:auto; object-fit:contain; }
.items .item img[src$="/ads/swipe-03_big-mac-hat.webp"] { aspect-ratio:341/260; height:auto; object-fit:contain; }
.items .item img[src$="/ads/swipe-04_use-one-big-fact-to-own-trust.webp"] { aspect-ratio:341/260; height:auto; object-fit:contain; }
.items .item img[src$="/ads/swipe-12_Tred21977vintagesneakerprintad@TheDeffest.webp"] { aspect-ratio:341/260; height:auto; object-fit:contain; }
.items .item img[src$="/ads/swipe-18_the-credit-card-that-sold-you-jeans-and-everything-else.webp"] { aspect-ratio:341/260; height:auto; object-fit:contain; }
.items .item img[src$="/ads/swipe-27_mcdonalds-banana-ad.webp"] { aspect-ratio:308/281; height:auto; object-fit:contain; }
.items .item img[src$="/ads/swipe-30_anduril-autonomous-warplane-hiring-ad.webp"] { aspect-ratio:308/281; height:auto; object-fit:contain; }
.items .item img[src$="/ads/swipe-05_lambo-vs-roadster.webp"] { aspect-ratio:308/281; height:auto; object-fit:contain; }
.items .item img[src$="/ads/swipe-25_upwork-dog-add-reddit.webp"] { aspect-ratio:308/281; height:auto; object-fit:contain; }
.items .item img[src$="/ads/swipe-31_vibe-marketing-an-ad-with-chatgpt.webp"] { aspect-ratio:341/260; height:auto; object-fit:contain; }
.items .item img[src$="/ads/swipe-28_service-that-offers-mirror-finishes-for-cybertrucks.webp"] { aspect-ratio:341/260; height:auto; object-fit:contain; }
.items .item img[src$="/ads/swipe-13_type-fast-win-a-porsche-06-05-2026-10-56-am.webp"] { aspect-ratio:341/260; height:auto; object-fit:contain; }
.items .item img[src$="/ads/swipe-09_cadillac-1978-car-ad.webp"] { aspect-ratio:341/260; height:auto; object-fit:contain; }

/* Final supplied sheets */
.items .item img[src$="/ads/final-sheet-1.webp"] { aspect-ratio:341/260; height:auto; object-fit:contain; }
.items .item img[src$="/ads/final-sheet-2.webp"] { aspect-ratio:260/341; height:auto; object-fit:contain; }
.items .item img[src$="/ads/final-sheet-3.webp"] { aspect-ratio:260/341; height:auto; object-fit:contain; }

/* --- Spotlight pill -------------------------------------------------------
 * ONE origin, ONE vertical rule. The glass, the text row and the enter badge
 * are all absolutely positioned against .search-bar's 50% line, all carry the
 * same --pill-dx/--pill-dy, and all take their height from --pill-h with
 * align-items:center. Previously the row sat in normal flow while the other
 * two were absolute; those two coordinate systems drifted apart whenever the
 * height or offset changed, which is what made the parts look unglued.
 *
 * Every dimension below is a variable and scales with the viewport. Do not
 * reintroduce hardcoded px here, and do not add transitions — pill-search.js
 * drives these from a spring on rAF.
 */
/* Desk media sweeps most of the viewport, so no amount of lifting keeps the
 * bar clear — raising it in the stack does. With blur(40px) on the surface the
 * media slides behind the glass and reads as depth rather than occlusion.
 * (An earlier attempt to dodge the media by moving the pill oscillated: the
 * measurement fed back into the position that produced it.) */
.search-bar{
  z-index:60!important;
  box-sizing:border-box;
  /* geometry */
  --bar-w:648px;
  --pill-w:360px;
  --pill-h:80px;
  --pill-dx:0px;
  --pill-dy:0px;
  --text-dy:0px;
  --caret-x:0px;
  --caret-y:0px;
  /* scale-driven metrics — the single source of truth, read back by JS */
  --pill-pad-l:clamp(14px,1.45vw,23px);
  --pill-gap:clamp(6px,.62vw,10px);
  --pill-tail:clamp(42px,4.2vw,66px);
  --pill-mark:clamp(15px,1.5vw,24px);
  --pill-text:clamp(13px,1.15vw,18px);
  --badge:clamp(20px,1.75vw,28px);
  height:auto!important;
  min-height:0!important;
  overflow:visible;
  background:none!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
/* Shared placement for the full-width parts of the pill. */
.pill-surface,
.pill-row,
.pill-drop{
  position:absolute!important;
  top:0;
  height:var(--pill-h);
  /* GSAP writes `translate:none` inline on these nodes and then applies its
   * own `transform`, computed against the scene's ORIGINAL pill layout. Since
   * we have replaced that layout, its offsets are simply wrong — the badge
   * ended up 26px above the glass. Neutralise both and place from our vars,
   * exactly as we do for the caret. */
  transform:none!important;
  translate:var(--pill-dx) var(--pill-dy)!important;
  margin:0!important;
}
.pill-surface{
  left:50%;
  width:var(--pill-w);
  margin-left:calc(var(--pill-w) / -2)!important;
  z-index:0;
  border-radius:calc(var(--pill-h) / 2);
  pointer-events:none;
  background:linear-gradient(100.81deg,#f4f4f433 7.89%,#f4f4f40d 91.16%);
  border:1px solid hsla(0,0%,95.7%,.3);
  -webkit-backdrop-filter:blur(40px);
  backdrop-filter:blur(40px);
  box-shadow:4px 5px 20px #0006,inset -1px -1px 4px #00000026,inset 1px 1px 4px #ffffff26;
}
.pill-row{
  left:50%;
  width:var(--pill-w);
  margin-left:calc(var(--pill-w) / -2)!important;
  z-index:1;
  display:flex!important;
  align-items:center!important;      /* vertical centring comes from here */
  justify-content:flex-start!important;
  gap:var(--pill-gap);
  padding-left:var(--pill-pad-l);
  padding-right:var(--pill-tail);
  box-sizing:border-box;
  min-width:0;
}
/* Enter badge: a small key-cap, NOT a full-height panel. It carries its own
 * border and background from the vendor sheet, so stretching it to --pill-h
 * turned it into a grey slab. Size it explicitly and centre it with a
 * percentage in `translate`, which resolves against its own box. */
.icon-container{
  position:absolute!important;
  left:calc(50% + var(--pill-w) / 2 - var(--pill-tail));
  top:calc(var(--pill-h) / 2);
  width:var(--badge)!important;
  height:var(--badge)!important;
  min-width:var(--badge);
  flex:0 0 auto;
  margin:0!important;
  z-index:2;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  transform:none!important;
  translate:var(--pill-dx) calc(var(--pill-dy) - 50%)!important;
}
/* The drag/drop preview belongs inside the pill, on the same rails. */
.pill-drop{
  left:50%;
  width:var(--pill-w);
  margin-left:calc(var(--pill-w) / -2)!important;
  z-index:1;
  display:flex!important;
  align-items:center!important;
  gap:var(--pill-gap);
  padding-left:var(--pill-pad-l);
  padding-right:var(--pill-tail);
  box-sizing:border-box;
}
.pill-drop>*{margin:0!important;}
.pill-drop .dragged-item img{max-height:calc(var(--pill-h) - 20px);width:auto;}
/* Currency glyph replaces the vendor magnifier. */
.pill-row>svg{display:none!important;}
.pill-currency{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Haffer','Haffer Variable',Arial,sans-serif;
  font-weight:500;
  font-size:var(--pill-mark);
  line-height:1;
  color:#fff;
  opacity:.92;
  -webkit-font-smoothing:antialiased;
}
.campaign-prompt{
  display:block;
  position:relative;
  translate:0 var(--text-dy);
  flex:0 1 auto;
  min-width:0;
  max-width:var(--prompt-max,100%);
  font-size:var(--pill-text)!important;
  line-height:1.45;
  overflow-wrap:normal;
  word-break:normal;
}
/* inline-block is load-bearing: adjacent spans carry no whitespace between
 * them, so it is the only thing permitting a break between phrases. nowrap
 * inside each span keeps words whole. */
.campaign-prompt>span{display:inline-block;white-space:nowrap;vertical-align:top;}
/* We place the caret from real glyph geometry; GSAP's inline offsets were
 * computed against the scene's original prompt layout and no longer line up.
 * A stylesheet !important outranks an inline style without one. */
.campaign-prompt .cursor{
  transform:none!important;
  left:var(--caret-x)!important;
  top:var(--caret-y)!important;
  height:1.45em;
}
/* Scene hero copy sits on a bright, busy ceramic ground now; white type at the
 * vendor's weight dissolves into it. Weight and a shadow rather than forcing
 * opacity, which GSAP animates. */
.section-title-sans,.section-title-serif{
  text-shadow:0 2px 20px #17100480,0 1px 3px #1710046b;
}
div[class*="max-w-[22rem]"]{
  font-weight:600;
  text-shadow:0 2px 14px #171004a6,0 1px 2px #17100480;
}

/* Avatars are now a currency mark. The vendor scales and nudges the <img>
 * inside a rounded-full box; neutralise that so the square fills the circle. */
.profilePicture img{
  transform:none!important;
  margin:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}