/* Instagram UI kit. Every screen is one .ig: 402 × 874 pt, where 1px is one point.
   The timeline scales the whole screen to fit; nothing inside needs to know the display size. */
.ig {
  --ig-text: "SF Pro Text", -apple-system, BlinkMacSystemFont, system-ui, "Helvetica Neue", Arial, sans-serif;
  --ig-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, system-ui, "Helvetica Neue", Arial, sans-serif;
  --ig-blue: #4A5DF9;
  --ig-link: #7B8BFF;
  --ig-sheet: #1A1C1F;
  --ig-card: #22262B;
  --ig-glass: #101214CC;
  --ig-muted: #A8A8A8;
  --ig-soft: #D6D6D6;
  --ig-line: #FFFFFF2E;
  --ig-ai: linear-gradient(45deg, #FFD600 12%, #FF7A00 35%, #FF0069 58%, #D300C5 80%);
  --ig-ai: linear-gradient(in oklab 45deg, oklab(88.5% -.016 .181) 12%, oklab(72.3% .121 .146) 35%, oklab(64% .252 .043) 58%, oklab(60% .239 -.127) 80%);

  position: absolute; left: 0; top: 0; width: 402px; height: 874px; overflow: clip; isolation: isolate;
  background: #000; color: #fff; font: 12px/16px var(--ig-text); text-align: left;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: none;
  overflow-wrap: anywhere; user-select: none; -webkit-user-select: none; pointer-events: none;
}
.ig *, .ig *::before, .ig *::after { box-sizing: border-box; }
.ig p, .ig h1, .ig h2, .ig h3, .ig ul { margin: 0; padding: 0; }
.ig svg { display: block; flex-shrink: 0; }
.ig .a { position: absolute; }
.ig .row { display: flex; align-items: center; }
.ig .col { display: flex; flex-direction: column; }
.ig .grow { flex: 1 1 0%; min-width: 0; }
.ig .nw { white-space: nowrap; }
/* a row the viewer scrolls sideways on the phone: the one part of a screen that takes the pointer */
.ig .scroll-x { overflow: auto hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; pointer-events: auto; touch-action: pan-x; }
.ig .scroll-x::-webkit-scrollbar { display: none; }
.ig .ph { background: var(--ig-card) center / cover no-repeat; flex-shrink: 0; }   /* a photo */
.ig .ava { border-radius: 50%; background: #333 center / cover no-repeat; flex-shrink: 0; }

/* type: size/leading, then weight. Names follow the Paper text styles they mirror. */
.ig .t-time { font: 600 17px/20px var(--ig-text); letter-spacing: -.43px; }
.ig .t-h24 { font: 700 24px/29px var(--ig-display); letter-spacing: .07px; }
.ig .t-title { font: 600 20px/24px var(--ig-display); letter-spacing: .2px; }
.ig .t-h17 { font: 600 17px/22px var(--ig-text); letter-spacing: -.43px; }
.ig .t-btn { font: 600 15px/18px var(--ig-text); }
.ig .t-name { font: 600 14px/17px var(--ig-text); letter-spacing: -.15px; }
.ig .t-body { font: 400 14px/17px var(--ig-text); letter-spacing: -.15px; }
.ig .t-p { font: 400 14px/20px var(--ig-text); color: var(--ig-soft); }
.ig .t-tag { font: 600 13px/16px var(--ig-text); letter-spacing: -.1px; }
.ig .t-meta { font: 400 13px/17px var(--ig-text); color: var(--ig-muted); }
.ig .t-sub { font: 400 12px/15px var(--ig-text); color: var(--ig-muted); }
.ig .t-sub-s { font: 600 12px/15px var(--ig-text); }
.ig .t-count { font: 600 12px/14px var(--ig-text); }
.ig .t-cap { font: 400 12px/14px var(--ig-text); }
.ig .t-mini { font: 600 11px/13px var(--ig-text); }
.ig .c-soft { color: var(--ig-soft); }
.ig .c-muted { color: var(--ig-muted); }
.ig .c-link { color: var(--ig-link); }

/* the Reel's video, filling the screen like a Reel does */
.ig .ig-video { left: 0; top: 0; width: 402px; height: 874px; object-fit: cover; background: #000; }

/* status bar */
.ig .ig-status { left: 0; top: 0; width: 402px; height: 54px; }
.ig .ig-status .time { left: 35px; top: 22.26px; width: 60px; text-align: center; }
.ig .ig-status .glyphs { left: 285.5px; top: 20.7px; }
.ig .ig-island { left: 138.5px; top: 14.5px; width: 125px; height: 35.5px; border-radius: 18px; background: #000; }

/* Reels header: "Reels  Friends" + friend faces + filter */
.ig .ig-reels-head { left: 0; top: 70px; width: 402px; height: 34px; }
.ig .ig-reels-head .face { top: 7.5px; width: 19px; height: 19px; }
.ig .ig-reels-head .face.cut { -webkit-mask: radial-gradient(circle at -6.5px 9.5px, transparent 10.9px, #000 11.1px); mask: radial-gradient(circle at -6.5px 9.5px, transparent 10.9px, #000 11.1px); }

/* right-hand action column */
.ig .ig-actions { left: 344px; top: 360px; width: 56px; height: 400px; }
.ig .ig-actions .n { left: -2.5px; width: 60px; text-align: center; }

/* creator row + caption */
.ig .ig-creator { left: 16px; top: 683px; width: 340px; height: 74px; }
.ig .ig-ring { width: 44px; height: 44px; border-radius: 22px; background: var(--ig-ai); }
.ig .follow { height: 24px; width: 58px; border: 1px solid #FFFFFF6B; border-radius: 8px; justify-content: center; }

/* progress bar and floating tab bar */
.ig .ig-progress { left: 16px; top: 775px; width: 370px; height: 2px; border-radius: 1px; background: #FFFFFF52; }
.ig .ig-progress i { position: absolute; left: 0; top: 0; height: 2px; border-radius: 1px; background: #fff; }
.ig .ig-progress i.live { width: calc(var(--reel-t, .454) * 100%); }   /* the video's time, from IG.progress */
.ig .ig-tabbar { left: 22px; top: 792px; width: 358px; height: 60px; border-radius: 30px; border: 1px solid #FFFFFF1F; background: var(--ig-glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.ig .ig-tabbar .on { left: 71.4px; top: 4px; width: 78px; height: 50px; border-radius: 25px; background: #FFFFFF36; }

/* glass chips on the video: product tags, the Shop pill */
.ig .glass { background: var(--ig-glass); border: 1px solid #FFFFFF26; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
/* 8px corners like the Shop pill and Follow button: the photo's 4px corners plus its even 4px inset (3px padding inside the 1px border) */
.ig .ig-tag { height: 36px; gap: 8px; padding: 3px 12px 3px 3px; border-radius: 8px; }
.ig .ig-tag .ph { width: 28px; height: 28px; border-radius: 4px; }
.ig .ig-dot { width: 10px; height: 10px; border-radius: 5px; background: #fff; box-shadow: 0 0 0 4px #FFFFFF40; }
.ig .ig-pill { height: 28px; gap: 6px; padding: 0 11px 0 9px; border-radius: 8px; background: #FFFFFF2E; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
/* On the timeline's phone the pill comes in a beat after the Reel does (.fresh, index.html), as Instagram holds its ad CTA
   back until the video has played a while: it rises 6pt from .96 at its left end, untappable until then, and the finger
   that taps it waits for it. Back from the sheet it's already there; tools/screen.html keeps the still. Its fill is
   backwards only, so the pressed state (interact.css) still dims it after. */
.device .scr.fresh:not(.out) .ig .ig-pill { transform-origin: 0 50%; animation: ig-pill-in .32s .8s backwards; }
.device .scr.fresh:not(.out) .ig .ig-pill ~ .ig-tap { animation-delay: 1.4s, 2.1s; }
.device .scr.fresh:not(.out) .ig .ig-pill ~ .ig-tap::after { animation-delay: 2.1s; }
@keyframes ig-pill-in {
  0% { opacity: 0; visibility: hidden; translate: 0 6px; scale: .96; animation-timing-function: cubic-bezier(.23, 1, .32, 1); }
  100% { opacity: 1; visibility: visible; translate: none; scale: none; }
}
@media (prefers-reduced-motion: reduce) {
  .device .scr.fresh:not(.out) .ig .ig-pill { animation-name: ig-pill-fade; }
}
@keyframes ig-pill-fade { 0% { opacity: 0; visibility: hidden; } 100% { opacity: 1; visibility: visible; } }

/* where the finger is */
.ig .ig-tap { width: 44px; height: 44px; border-radius: 22px; background: #FFFFFF40; border: 2px solid #FFFFFFCC; z-index: 9; }
/* on the timeline's phone it taps: it lands as the hold's finger does (reel.css), then every 2.4s presses (down 120ms, held
   100ms) and lets go, a ring leaving it. tools/screen.html keeps the still marker Paper draws. */
.device .scr:not(.out) .ig .ig-tap { animation: ig-tap-land .35s .3s both, ig-tap-press 2.4s 1s infinite; }
.device .scr:not(.out) .ig .ig-tap::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid #FFFFFFCC; opacity: 0; animation: ig-tap-ring 2.4s 1s infinite; }
@keyframes ig-tap-land {
  0% { opacity: 0; scale: 1.3; animation-timing-function: cubic-bezier(.23, 1, .32, 1); }
  100% { opacity: 1; scale: 1; }
}
@keyframes ig-tap-press {
  0% { scale: 1; background-color: #FFFFFF40; animation-timing-function: cubic-bezier(.23, 1, .32, 1); }
  5% { scale: .86; background-color: #FFFFFF8C; }
  9.167% { scale: .86; background-color: #FFFFFF8C; animation-timing-function: cubic-bezier(.23, 1, .32, 1); }
  25%, 100% { scale: 1; background-color: #FFFFFF40; }
}
/* on a light surface, the same finger in black */
.ig .ig-tap.dark { background: #00000012; border-color: #000000A6; }
.device .scr:not(.out) .ig .ig-tap.dark { animation-name: ig-tap-land, ig-tap-press-dark; }
.device .scr:not(.out) .ig .ig-tap.dark::after { border-color: #000000A6; }
@keyframes ig-tap-press-dark {
  0% { scale: 1; background-color: #00000012; animation-timing-function: cubic-bezier(.23, 1, .32, 1); }
  5% { scale: .86; background-color: #0000002E; }
  9.167% { scale: .86; background-color: #0000002E; animation-timing-function: cubic-bezier(.23, 1, .32, 1); }
  25%, 100% { scale: 1; background-color: #00000012; }
}
@keyframes ig-tap-ring {
  0%, 9.1% { opacity: 0; scale: 1; }
  9.167% { opacity: .9; scale: 1; animation-timing-function: cubic-bezier(.23, 1, .32, 1); }
  40%, 100% { opacity: 0; scale: 1.7; }
}
/* a scroll guide (IG.swipe): the finger lands, presses, drags up 120pt and lifts. interact.js scrolls the page under it on
   this clock (the drag .15–.42, back .52–.75), so it reads as the page scrolling, not the phone swiping to the next screen.
   It plays twice each time the screen shows, then the finger stays gone and the page at its top.
   Without motion it's the tap marker's pulse, where the drag starts. */
.device .scr:not(.out) .ig .ig-swipe { animation: ig-swipe 2.8s 1s 2 both; }
.device .scr:not(.out) .ig .ig-swipe::after { animation: none; }   /* the ring is a tap's */
@keyframes ig-swipe {
  0% { opacity: 0; scale: 1.3; translate: 0 0; animation-timing-function: cubic-bezier(.23, 1, .32, 1); }
  10% { opacity: 1; scale: 1; background-color: #FFFFFF40; animation-timing-function: cubic-bezier(.23, 1, .32, 1); }
  15% { scale: .86; translate: 0 0; background-color: #FFFFFF8C; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  42% { opacity: 1; scale: .86; translate: 0 -120px; background-color: #FFFFFF8C; animation-timing-function: cubic-bezier(.23, 1, .32, 1); }
  50%, 100% { opacity: 0; scale: 1; translate: 0 -120px; background-color: #FFFFFF40; }
}
@media (prefers-reduced-motion: reduce) {
  .device .scr:not(.out) .ig .ig-tap { animation: ig-tap-press-fade 2.4s 1s infinite; }
  .device .scr:not(.out) .ig .ig-tap::after { animation: none; }
}
@keyframes ig-tap-press-fade { 0%, 25%, 100% { background-color: #FFFFFF40; } 5%, 9.167% { background-color: #FFFFFF8C; } }

/* sheets */
.ig .ig-sheet { left: 0; width: 402px; background: var(--ig-sheet); border-radius: 20px 20px 0 0; overflow: clip; display: flex; flex-direction: column; isolation: isolate; }   /* what's raised inside it (the gallery's bar, view counts) stays under what's drawn over the sheet */
/* a sheet's body that scrolls under the grabber; the end clears the home indicator */
.ig .ig-sheet-body { flex: 1 1 auto; min-height: 0; overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: none; padding-bottom: 34px; }
.ig .ig-sheet-body::-webkit-scrollbar { display: none; }
/* a foot pinned under the body (IG.sheet({ foot })): the page scrolls behind its hairline, and it clears the home indicator instead */
.ig .ig-sheet-foot { flex-shrink: 0; padding: 12px 16px 34px; border-top: 1px solid #2C2F34; background: var(--ig-sheet); }
.ig .ig-sheet-body:has(+ .ig-sheet-foot) { padding-bottom: 24px; }
.ig .ig-grab { display: flex; justify-content: center; padding: 8px 0 6px; flex-shrink: 0; }
.ig .ig-grab i { width: 36px; height: 5px; border-radius: 3px; background: #FFFFFF4D; }

/* seller row: initial badge, name, domain */
.ig .ig-bagbtn { position: relative; display: grid; flex-shrink: 0; }
.ig .ig-bagbtn > b { position: absolute; left: 13px; top: -5px; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: #FF3040;
  box-shadow: 0 0 0 2px var(--ig-sheet); color: #fff; font: 700 11px/17px var(--ig-text); text-align: center; }   /* Instagram's notification red */
.ig .ig-seller { gap: 10px; }
.ig .ig-seller .mark { width: 32px; height: 32px; border-radius: 16px; display: grid; place-items: center; font: 700 15px/18px var(--ig-display); }

/* buttons */
.ig .ig-btn { height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 6px; font: 600 15px/18px var(--ig-text); color: #fff; background: #FFFFFF1F; white-space: nowrap; }
.ig .ig-btn.primary { background: var(--ig-blue); }
.ig .ig-btn.light { background: #fff; color: #0B0B0B; }

/* size picker */
.ig .ig-sizes { display: flex; gap: 8px; }
.ig .ig-sizes > span { width: 66px; height: 38px; border-radius: 10px; border: 1px solid var(--ig-line); display: grid; place-items: center; font: 600 14px/17px var(--ig-text); flex-shrink: 0; }
.ig .ig-sizes > .on { background: #fff; color: #0B0B0B; border-color: #fff; }

/* finish picker: metal swatches the height of the size picker; the selected one gets a white ring */
.ig .ig-swatches { display: flex; gap: 14px; padding: 0 3px; }
.ig .ig-swatches > span { width: 38px; height: 38px; border-radius: 19px; flex-shrink: 0; display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px #FFFFFF26; font: 700 10px/12px var(--ig-text); letter-spacing: .02em; color: #FFFFFFB3; }
.ig .ig-swatches > .on { box-shadow: inset 0 0 0 1px #FFFFFF26, 0 0 0 2px var(--ig-sheet), 0 0 0 4px #fff; }
.ig .ig-swatches > .gold { background: linear-gradient(135deg, #F4E6BC 0%, #C9AD6B 55%, #EAD69F 100%); }
.ig .ig-swatches > .alloy { background: linear-gradient(135deg, #F3F4F5 0%, #A7ABB0 55%, #DFE1E3 100%); }
.ig .ig-swatches > .rose { background: linear-gradient(135deg, #F5D6C8 0%, #C68C77 55%, #EABFAD 100%); }
.ig .ig-swatches > .black { background: linear-gradient(135deg, #4B4B4D 0%, #1C1C1E 60%, #3A3A3C 100%); }

/* quantity stepper (IG.qty): − n + in a pill; − sits back where it can't go lower */
.ig .ig-qty { height: 36px; flex-shrink: 0; border: 1px solid var(--ig-line); border-radius: 18px; }
.ig .ig-qty > span { width: 34px; height: 34px; display: grid; place-items: center; transition: opacity .2s; }
.ig .ig-qty > .off { opacity: .3; }
.ig .ig-qty > b { min-width: 16px; text-align: center; font: 600 14px/17px var(--ig-text); font-variant-numeric: tabular-nums; }
/* a pressed segment lights as a whole; its glyph doesn't take the tap, so it never dims on its own */
.device .scr:not(.out) .ig .ig-qty svg { pointer-events: none; }
.device .scr:not(.out) .ig .ig-qty > span { border-radius: 17px; transition: background-color .2s, opacity .2s; }
.device .scr:not(.out) .ig .ig-qty > span:active { background: #FFFFFF1A; transition: none; }
.device .scr:not(.out) .ig .ig-qty > .off:active { background: none; }