/* "Your grid, at full size." (index.html #desk, assets/cx-desk.js): a pure-CSS laptop showing a made-up creator's
   Instagram profile on the web, in dark mode, filled with their designed avatar posts. Creator buttons switch the
   profile; as the section scrolls past, the page inside the screen scrolls with it and each tile loads as it comes
   into the screen. Without the script (or with reduced motion) it shows the first creator, finished, at the top.

   Sizes: the laptop scales from its own width (.cx-mac is a size container, frame sizes in cqw); everything on the
   screen is in pixels of a 1280-wide browser (--u = 1/1280 of the screen's width), so it looks the same at any size.
   Under 600px wide the frame becomes a tablet and the page an 820-wide browser with Instagram's icon rail. */

.cx-desk{position:relative;overflow:clip;isolation:isolate}
.cx-desk-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(46% 34% at 50% 64%,light-dark(oklch(1 0 0/.95),oklch(.4 .09 290/.5)),transparent 72%),
  radial-gradient(34% 22% at 70% 78%,light-dark(oklch(.92 .06 330/.35),oklch(.42 .14 340/.2)),transparent 70%),
  radial-gradient(30% 22% at 28% 72%,light-dark(oklch(.92 .05 230/.35),oklch(.4 .1 240/.22)),transparent 70%)}
.cx-desk-head{display:grid;justify-items:center;text-align:center;gap:16px;margin-bottom:clamp(22px,3vw,34px)}
.cx-desk h2{font-size:clamp(2.4rem,1.3rem + 4vw,5rem);line-height:.95;letter-spacing:-.045em}
.cx-desk h2 em{font-style:normal;color:var(--accent-text);
  background:linear-gradient(transparent 82%,var(--accent-soft) 82% 96%,transparent 96%) no-repeat}
.cx-desk .eyebrow::before{display:none}
.cx-desk .lede{max-width:52ch;margin-inline:auto}

/* ---------- creator buttons ---------- */
.cx-desk-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 auto clamp(30px,4.4vw,56px);padding-inline:var(--gutter)}
html:not(.js) .cx-desk-tabs{display:none}
.cx-desk-tab{display:inline-flex;align-items:center;gap:.65em;padding:5px 18px 5px 5px;border-radius:999px;font:600 .95rem/1 var(--f-text);
  color:var(--ink);background:color-mix(in oklab,var(--surface) 80%,transparent);border:1px solid var(--line-strong);
  box-shadow:var(--shadow-1);transition:background .3s,color .3s,border-color .3s,transform .3s var(--ease)}
.cx-desk-tab:hover{border-color:var(--ink-2);transform:translateY(-1px)}
.cx-desk-tab i{display:block;width:34px;height:34px;padding:2px;border-radius:50%;background:var(--line-strong);transition:background .3s}
.cx-desk-tab img{width:100%;height:100%;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--surface)}
.cx-desk-tab[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.cx-desk-tab[aria-pressed="true"] i{background:linear-gradient(45deg,#feda75,#fa7e1e 28%,#d62976 52%,#962fbf 76%,#4f5bd5)}
.cx-desk-tab[aria-pressed="true"] img{box-shadow:0 0 0 2px var(--ink)}
.cx-desk-tab:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

.cx-desk-fig{width:min(100% - 2 * var(--gutter),1180px);margin-inline:auto}
.cx-desk-cap{text-wrap:balance;margin-top:clamp(26px,3vw,40px);text-align:center;font-size:.72rem;letter-spacing:.06em;color:var(--muted)}
.cx-desk-foot{display:grid;justify-items:center;margin-top:clamp(20px,2.6vw,30px)}

/* ---------- the laptop ---------- */
.cx-mac{position:relative;container-type:inline-size;
  --alu-rim:light-dark(oklch(.8 .005 265),oklch(.46 .008 265));
  --alu:linear-gradient(180deg,light-dark(oklch(.97 .002 265),oklch(.66 .008 265)) 0,light-dark(oklch(.9 .004 265),oklch(.44 .008 265)) 22%,
    light-dark(oklch(.8 .005 265),oklch(.33 .008 265)) 64%,light-dark(oklch(.62 .006 265),oklch(.2 .006 265)) 100%)}
.cx-mac::after{content:"";position:absolute;left:4%;right:4%;bottom:-3.2cqw;height:4cqw;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,light-dark(oklch(.3 .03 265/.38),oklch(0 0 0/.75)),transparent);filter:blur(1.2cqw)}
.cx-mac-lid{position:relative;z-index:1;width:84cqw;margin-inline:auto;padding:1.15cqw 1.15cqw 2cqw;border-radius:2.4cqw 2.4cqw .55cqw .55cqw;
  background:#060607;box-shadow:0 0 0 .17cqw var(--alu-rim),inset 0 0 0 .12cqw oklch(1 0 0/.07),0 3cqw 6cqw -3cqw oklch(0 0 0/.45)}
.cx-mac-lid::after{content:"";position:absolute;left:9%;right:9%;bottom:-.55cqw;height:.6cqw;border-radius:0 0 .5cqw .5cqw;
  background:linear-gradient(180deg,#151517,#2d2e32 60%,#1a1b1d)}
.cx-mac-screen{position:relative;aspect-ratio:1.54;border-radius:.9cqw .9cqw .2cqw .2cqw;overflow:hidden;background:#000;
  container-type:inline-size;--vw:1280;--u:calc(100cqw / var(--vw))}
.cx-mac-screen::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(118deg,oklch(1 0 0/.075) 0%,oklch(1 0 0/.02) 34%,transparent 35%)}
.cx-mac-notch{position:absolute;left:50%;top:0;z-index:5;width:calc(200 * var(--u));height:calc(30 * var(--u));translate:-50% 0;
  border-radius:0 0 calc(12 * var(--u)) calc(12 * var(--u));background:#060607}
.cx-mac-notch::after{content:"";position:absolute;left:50%;top:42%;width:calc(8 * var(--u));aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#2a3550,#0b0d14 60%)}
.cx-mac-base{position:relative;height:2.1cqw;border-radius:0 0 1.5cqw 1.5cqw / 0 0 1.25cqw 1.25cqw;background:var(--alu);
  box-shadow:inset 0 .12cqw 0 light-dark(oklch(1 0 0/.9),oklch(1 0 0/.25)),inset 0 -.15cqw .2cqw oklch(0 0 0/.25)}
.cx-mac-base::before{content:"";position:absolute;left:50%;top:0;width:14cqw;height:.75cqw;translate:-50% 0;border-radius:0 0 1cqw 1cqw;
  background:linear-gradient(180deg,light-dark(oklch(.7 .006 265),oklch(.2 .005 265)),light-dark(oklch(.86 .004 265),oklch(.34 .006 265)));
  box-shadow:inset 0 .1cqw .2cqw oklch(0 0 0/.25)}
/* the soft reflection of the base on the desk */
.cx-mac-base::after{content:"";position:absolute;left:1.5%;right:1.5%;top:100%;height:2.6cqw;border-radius:0 0 50% 50%;opacity:.5;
  background:linear-gradient(180deg,light-dark(oklch(.75 .006 265/.55),oklch(.45 .006 265/.4)),transparent);filter:blur(.35cqw)}

/* ---------- Instagram on the web, dark mode, in px of a 1280-wide browser ---------- */
.cx-igw{position:absolute;inset:0;display:flex;flex-direction:column;background:#000;color:#f5f5f5;
  font:400 calc(14 * var(--u))/1.3 var(--f-text);-webkit-font-smoothing:antialiased;
  --mut:#a8a8a8;--line:#262626;--btn:#363636}
.cx-igw svg{display:block;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cx-igw img{display:block;width:100%;height:100%;object-fit:cover}

.cx-igw-menu{flex:none;display:flex;align-items:center;justify-content:space-between;height:calc(30 * var(--u));padding:0 calc(18 * var(--u));
  font-size:calc(13 * var(--u));color:#ececec;background:#141416}
.cx-igw-menu-l,.cx-igw-menu-r{display:flex;align-items:center;gap:calc(19 * var(--u))}
.cx-igw-menu-r{gap:calc(13 * var(--u))}
.cx-igw-menu svg{width:calc(17 * var(--u));stroke-width:1.8}
.cx-igw-menu .f{fill:currentColor;stroke:none}

.cx-igw-chrome{flex:none;display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:calc(20 * var(--u));height:calc(50 * var(--u));
  padding:0 calc(18 * var(--u));background:#232326;border-bottom:1px solid #000;color:#9a9aa0}
.cx-igw-dots{display:flex;gap:calc(8 * var(--u))}
.cx-igw-dots i{width:calc(12 * var(--u));aspect-ratio:1;border-radius:50%;background:#ff5f57}
.cx-igw-dots i:nth-child(2){background:#febc2e}.cx-igw-dots i:nth-child(3){background:#28c840}
.cx-igw-navs{display:flex;gap:calc(16 * var(--u))}
.cx-igw-navs svg{width:calc(17 * var(--u))}
.cx-igw-url{justify-self:center;position:relative;display:flex;align-items:center;justify-content:center;gap:calc(7 * var(--u));
  width:min(100%,calc(560 * var(--u)));height:calc(32 * var(--u));border-radius:calc(9 * var(--u));background:#38383c;color:#e8e8ec;font-size:calc(13.5 * var(--u));white-space:nowrap}
.cx-igw-url svg{width:calc(12 * var(--u))}
.cx-igw-url svg:last-child{position:absolute;right:calc(10 * var(--u));width:calc(14 * var(--u));color:#9a9aa0}

.cx-igw-view{flex:1;min-height:0;display:grid;grid-template-columns:calc(245 * var(--u)) 1fr}
.cx-igw-rail{display:flex;flex-direction:column;min-height:0;padding:calc(8 * var(--u)) calc(12 * var(--u)) calc(20 * var(--u));border-right:1px solid var(--line)}
.cx-igw-word{display:block;margin:calc(24 * var(--u)) calc(12 * var(--u)) calc(30 * var(--u));
  font:600 calc(29 * var(--u))/1 "Snell Roundhand","Segoe Script","Brush Script MT","Lucida Handwriting",cursive;letter-spacing:-.01em}
.cx-igw-glyph{display:none!important}
.cx-igw-rail ul{display:grid;gap:calc(4 * var(--u))}
.cx-igw-rail li{display:flex;align-items:center;gap:calc(16 * var(--u));height:calc(50 * var(--u));padding:0 calc(12 * var(--u));border-radius:calc(8 * var(--u));font-size:calc(16 * var(--u))}
.cx-igw-rail li svg{width:calc(25 * var(--u))}
.cx-igw-rail li.is-on{font-weight:700}
.cx-igw-rail-end{margin-top:auto}
.cx-igw-me{display:block;width:calc(25 * var(--u));aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 0 0 calc(2 * var(--u)) #f5f5f5}

.cx-igw-main{position:relative;min-height:0;overflow:hidden}
.cx-igw-page{position:relative;width:min(100%,calc(975 * var(--u)));margin-inline:auto;padding:calc(30 * var(--u)) calc(20 * var(--u)) 0;
  transform:translate3d(0,var(--cx-y,0px),0);transition:transform .6s var(--ease)}

.cx-igw-head{display:grid;grid-template-columns:calc(290 * var(--u)) 1fr;align-items:center;margin-bottom:calc(44 * var(--u))}
.cx-igw-ava{justify-self:center;width:calc(160 * var(--u));aspect-ratio:1;padding:calc(4 * var(--u));border-radius:50%;
  background:linear-gradient(45deg,#feda75,#fa7e1e 28%,#d62976 52%,#962fbf 76%,#4f5bd5)}
.cx-igw-ava img{border-radius:50%;box-shadow:0 0 0 calc(4 * var(--u)) #000}
.cx-igw-row{display:flex;align-items:center;gap:calc(8 * var(--u))}
.cx-igw-user{font-size:calc(20 * var(--u));font-weight:400;margin-right:calc(12 * var(--u))}
.cx-igw-btn{display:inline-flex;align-items:center;height:calc(32 * var(--u));padding:0 calc(16 * var(--u));border-radius:calc(8 * var(--u));background:var(--btn);font-weight:600}
.cx-igw-row svg{width:calc(24 * var(--u));margin-left:calc(6 * var(--u))}
.cx-igw-stats{display:flex;gap:calc(40 * var(--u));margin:calc(20 * var(--u)) 0;font-size:calc(16 * var(--u))}
.cx-igw-stats b{font-weight:600}
.cx-igw-bio{line-height:1.36}
.cx-igw-bio b{display:block;font-weight:600}
.cx-igw-cat{display:block;color:var(--mut)}

.cx-igw-hls{display:flex;gap:calc(30 * var(--u));padding:0 calc(26 * var(--u));margin-bottom:calc(44 * var(--u));overflow:hidden}
.cx-igw-hls li{display:grid;justify-items:center;gap:calc(9 * var(--u));width:calc(87 * var(--u));flex:none}
.cx-igw-hls i{display:block;width:100%;aspect-ratio:1;padding:calc(4 * var(--u));border-radius:50%;box-shadow:inset 0 0 0 1px #363636}
.cx-igw-hls img{border-radius:50%}
.cx-igw-hls span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:calc(12 * var(--u));font-weight:600}
.cx-igw-new i{display:grid;place-items:center;background:#121212}
.cx-igw-new svg{width:calc(40 * var(--u));color:#737373;stroke-width:1.4}

.cx-igw-tabs{display:flex;justify-content:center;gap:calc(60 * var(--u));border-top:1px solid var(--line)}
.cx-igw-tabs span{display:flex;align-items:center;gap:calc(6 * var(--u));height:calc(52 * var(--u));margin-top:-1px;
  font-size:calc(12 * var(--u));font-weight:600;letter-spacing:calc(1 * var(--u));text-transform:uppercase;color:var(--mut)}
.cx-igw-tabs svg{width:calc(12 * var(--u))}
.cx-igw-tabs .is-on{color:#f5f5f5;border-top:1px solid #f5f5f5}

.cx-igw-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(4 * var(--u))}
.cx-igw-tile{position:relative;aspect-ratio:4/5;overflow:hidden;background:#161616}
.cx-igw-mark{position:absolute;top:calc(9 * var(--u));right:calc(9 * var(--u));width:calc(20 * var(--u));fill:#fff!important;stroke:none!important;
  filter:drop-shadow(0 0 calc(3 * var(--u)) oklch(0 0 0/.5))}
.cx-igw-foot{padding:calc(44 * var(--u)) 0 calc(56 * var(--u));text-align:center;font-size:calc(12 * var(--u));color:#737373}

/* ---------- motion (the script adds .is-armed, never with reduced motion) ---------- */
.cx-igw-swap{transition:opacity .3s,filter .3s,transform .45s var(--ease)}
.cx-desk.is-swap .cx-igw-swap{opacity:0;filter:blur(calc(5 * var(--u)))}
.cx-desk.is-swap .cx-igw-head,.cx-desk.is-swap .cx-igw-hls{transform:translateY(calc(8 * var(--u)))}
.cx-desk.is-armed .cx-igw-tile img{opacity:0;transform:scale(1.07);
  transition:opacity .6s var(--ease),transform 1s var(--ease);transition-delay:calc(var(--k,0) * 90ms)}
.cx-desk.is-armed .cx-igw-tile.is-in img{opacity:1;transform:none}
.cx-desk.is-swap .cx-igw-tile img{transition-duration:.22s;transition-delay:0s}
.cx-desk.is-armed .cx-igw-tile::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,oklch(1 0 0/.06) 50%,transparent 70%);transform:translateX(-100%);
  animation:cx-shim 1.5s linear infinite}
.cx-desk.is-armed .cx-igw-tile.is-in::after{content:none}
.cx-desk.is-off .cx-igw-tile::after{animation-play-state:paused}
.cx-desk.is-armed .cx-igw-mark{opacity:0;transition:opacity .4s .5s}
.cx-desk.is-armed .cx-igw-tile.is-in .cx-igw-mark{opacity:1}
@keyframes cx-shim{to{transform:translateX(100%)}}

/* ---------- phones: a tablet, and Instagram's 820-wide layout ---------- */
@media (max-width:600px){
  .cx-desk-fig{width:min(100% - 2 * var(--gutter),440px)}
  .cx-desk-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-width:400px}
  .cx-desk-tab{font-size:.92rem;padding-right:14px}
  .cx-mac::after{bottom:-4cqw;height:6cqw}
  .cx-mac-lid{width:100cqw;padding:3.4cqw;border-radius:7cqw;box-shadow:0 0 0 .5cqw var(--alu-rim),inset 0 0 0 .3cqw oklch(1 0 0/.07),0 8cqw 12cqw -6cqw oklch(0 0 0/.5)}
  .cx-mac-lid::before{content:"";position:absolute;left:50%;top:1.2cqw;width:1.1cqw;aspect-ratio:1;translate:-50% 0;border-radius:50%;background:#1b2030}
  .cx-mac-lid::after,.cx-mac-base,.cx-mac-notch,.cx-igw-menu-l,.cx-igw-word,.cx-igw-rail li span,.cx-igw-rail-end li:first-child,
  .cx-igw-row .cx-igw-btn+.cx-igw-btn,.cx-igw-chrome .cx-igw-navs:last-child{display:none}
  .cx-mac-screen{aspect-ratio:3/4;border-radius:3.6cqw;--vw:820}
  .cx-igw-menu{justify-content:flex-end;height:calc(26 * var(--u))}
  .cx-igw-chrome{grid-template-columns:auto 1fr;height:calc(46 * var(--u))}
  .cx-igw-dots{display:none}
  .cx-igw-glyph{display:block!important;width:calc(26 * var(--u));margin:calc(26 * var(--u)) auto calc(22 * var(--u))}
  .cx-igw-view{grid-template-columns:calc(72 * var(--u)) 1fr}
  .cx-igw-rail li{justify-content:center;padding:0}
  .cx-igw-page{padding-top:calc(26 * var(--u))}
  .cx-igw-head{grid-template-columns:calc(220 * var(--u)) 1fr}
  .cx-igw-ava{width:calc(150 * var(--u))}
  .cx-igw-stats{gap:calc(30 * var(--u))}
  .cx-igw-hls{gap:calc(22 * var(--u));padding-inline:calc(10 * var(--u))}
  .cx-igw-tabs{gap:calc(44 * var(--u))}
}
@media (prefers-reduced-motion:reduce){
  .cx-igw-page{transform:none;transition:none}
  .cx-desk-tab,.cx-igw-swap{transition:none}
}