[hidden] { display: none !important; }
body { margin: 0; }
.fc { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 3.5rem 1.25rem 2rem; box-sizing: border-box; }
.top { text-align: center; margin-bottom: 2.25rem; }
.eyebrow, .mono { font-family: var(--mono); letter-spacing: .08em; }
.eyebrow { color: var(--indigo); text-transform: uppercase; font-size: .8rem; margin: 0 0 .75rem; }
h1 { font-weight: 700; letter-spacing: -0.035em; margin: 0; line-height: 1; font-size: clamp(2.6rem, 6vw, 4rem); color: var(--ink); }
h1 em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0; color: var(--indigo); }
.lede { font-size: 1.1rem; margin: .9rem 0 0; color: color-mix(in srgb, var(--ink) 70%, transparent); }
.quiet { color: color-mix(in srgb, var(--ink) 60%, transparent); }
.emo.big { width: 2.6rem; height: 2.6rem; }

.tool { width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; flex: 1; }

.drop { width: 100%; aspect-ratio: 9 / 16; max-height: 62vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; text-align: center; padding: 1.5rem; box-sizing: border-box; background: var(--white); border: 1.5px dashed var(--lav); border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.drop strong { font-size: 1.15rem; letter-spacing: -0.01em; }
.drop:hover, .drop.over { border-color: var(--indigo); background: color-mix(in srgb, var(--lav) 12%, white); }

.preview { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.pills { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; }
.pill { font: 500 .95rem var(--sans); padding: .55rem 1rem; border-radius: 6px; border: 1px solid var(--line); background: var(--white); color: var(--ink); cursor: pointer; }
.pill:hover { border-color: var(--lav); }
.pill[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }

.phone { width: min(100%, calc(79.2vh * 0.4614)); min-width: 240px; padding: 10px; background: var(--ink); border-radius: 38px; box-sizing: border-box; }
.screen { position: relative; width: 100%; aspect-ratio: 1290 / 2796; overflow: hidden; border-radius: 28px; background: var(--ink); cursor: pointer; }
.screen[data-bg="light"] { background: var(--white); }
.post { position: absolute; left: 0; width: 100%; overflow: hidden; }
.layer { position: absolute; }
.media, .ui { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.media { object-fit: cover; }
.ui { pointer-events: none; }

.actions { display: flex; gap: .5rem; }
.btn { font: 700 .95rem var(--sans); padding: .65rem 1.1rem; border-radius: 6px; border: 1px solid transparent; cursor: pointer; }
.btn-ink { background: var(--ink); color: var(--white); }
.btn-quiet { background: var(--white); color: var(--ink); border-color: var(--line); }
.btn:hover { filter: brightness(1.08); }

.foot { margin-top: 3rem; font-size: .8rem; color: var(--indigo); }

/* their profile drawn on top of the app layer (1em = 1px of the 1080 x 1920 video) */
.me { position: absolute; inset: 0; pointer-events: none; color: #fff; font-family: var(--sans); text-shadow: 0 0 .25em rgb(0 0 0 / .35); }
.me > * { position: absolute; }
.av { border-radius: 50%; overflow: hidden; background: var(--indigo); display: flex; align-items: center; justify-content: center; font-weight: 700; box-sizing: border-box; }
.av.ring { overflow: visible; outline: 4em solid #E1306C; outline-offset: 4em; }
.av.ring img { border-radius: 50%; }
.av img { width: 100%; height: 100%; object-fit: cover; }
.nm { transform: translateY(-50%); font-weight: 700; white-space: nowrap; display: flex; align-items: center; gap: .55em; }
.nm > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.fol { font-size: .82em; font-weight: 700; border: .09em solid rgb(255 255 255 / .8); border-radius: .35em; padding: .18em .6em; text-shadow: none; }
.sub { transform: translateY(-50%); font-weight: 400; opacity: .78; white-space: nowrap; }
.cap { transform: translateY(-50%); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.you { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: .75rem; background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 1rem; box-sizing: border-box; }
.field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.flabel { font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; color: var(--indigo); }
.at-wrap { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 6px; background: var(--white); }
.at { padding-left: .7rem; color: color-mix(in srgb, var(--ink) 55%, transparent); }
.at-wrap input, .field textarea { font: 400 1rem var(--sans); color: var(--ink); border: 0; background: transparent; padding: .6rem .7rem .6rem .25rem; width: 100%; min-width: 0; outline: none; }
.field textarea { border: 1px solid var(--line); border-radius: 6px; padding: .6rem .7rem; resize: vertical; box-sizing: border-box; }
.at-wrap:focus-within, .field textarea:focus { border-color: var(--indigo); }
.photo-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: .5rem; font: 500 .95rem var(--sans); padding: .38rem .8rem .38rem .4rem; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; white-space: nowrap; }
.photo-btn:hover { border-color: var(--lav); }
.photo-dot { width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--lav) center / cover no-repeat; flex: none; }

/* ---- Instagram main feed, drawn in iPhone points: calc(1 * var(--pt)) = 1pt on a 430 x 932 screen ---- */
.feed { position: absolute; inset: 0; background: #fff; color: #000; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; overflow: hidden; }
.feed svg { display: block; }
.feed > *, .fv > *, .nav > * { position: absolute; }
.sb > * { position: absolute; }
.sb { left: 0; top: 0; width: calc(430 * var(--pt)); height: calc(61 * var(--pt)); }
.sb-time { left: calc(48 * var(--pt)); top: calc(18 * var(--pt)); font-size: calc(17 * var(--pt)); font-weight: 600; letter-spacing: calc(-0.02 * var(--pt)); }
.sb-island { position: absolute; left: calc(152.5 * var(--pt)); top: calc(11 * var(--pt)); width: calc(125 * var(--pt)); height: calc(37 * var(--pt)); border-radius: calc(18.5 * var(--pt)); background: #000; }
.sb-right { position: absolute; left: calc(314 * var(--pt)); top: calc(22 * var(--pt)); width: calc(90 * var(--pt)); height: calc(14 * var(--pt)); }
.fv { left: 0; top: calc(61 * var(--pt)); width: calc(430 * var(--pt)); height: calc(692 * var(--pt)); overflow: hidden; background: #222; }
.fv video, .fv img.media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fv-shade { left: 0; top: 0; width: 100%; height: calc(80 * var(--pt)); background: linear-gradient(rgb(0 0 0 / .28), rgb(0 0 0 / 0)); pointer-events: none; }
.fh { inset: 0; color: #fff; text-shadow: 0 0 .25em rgb(0 0 0 / .25); pointer-events: none; }
.fh > * { position: absolute; }
.fh-av { left: calc(10.7 * var(--pt)); top: calc(11.7 * var(--pt)); width: calc(32 * var(--pt)); height: calc(32 * var(--pt)); border-radius: 50%; overflow: hidden; background: var(--indigo); display: flex; align-items: center; justify-content: center; }
.fh-av img { width: 100%; height: 100%; object-fit: cover; }
.fh-av span { font-size: calc(16 * var(--pt)); font-weight: 700; }
.fh-name { left: calc(52.3 * var(--pt)); top: calc(19.7 * var(--pt)); transform: translateY(-50%); font-size: calc(15 * var(--pt)); font-weight: 600; white-space: nowrap; max-width: calc(250 * var(--pt)); overflow: hidden; text-overflow: ellipsis; }
.fh-sub { left: calc(52.3 * var(--pt)); top: calc(37.3 * var(--pt)); transform: translateY(-50%); display: flex; align-items: center; gap: calc(6 * var(--pt)); white-space: nowrap; }
.fh-sub svg { width: calc(10 * var(--pt)); height: calc(12 * var(--pt)); }
.fh-sub span { font-size: calc(13 * var(--pt)); opacity: .92; max-width: calc(310 * var(--pt)); overflow: hidden; text-overflow: ellipsis; }
.fh-menu { left: calc(398 * var(--pt)); top: calc(20 * var(--pt)); width: calc(20 * var(--pt)); height: calc(11 * var(--pt)); }
.bub { width: calc(43.4 * var(--pt)); height: calc(43.4 * var(--pt)); pointer-events: none; }
.bub img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.bub .bh { position: absolute; left: calc(30 * var(--pt)); top: calc(30.5 * var(--pt)); width: calc(17 * var(--pt)); height: calc(15.5 * var(--pt)); }
.b1 { left: calc(14.3 * var(--pt)); top: calc(634.3 * var(--pt)); }
.b2 { left: calc(76 * var(--pt)); top: calc(618.3 * var(--pt)); }
.mute { left: calc(390 * var(--pt)); top: calc(652.6 * var(--pt)); width: calc(25.4 * var(--pt)); height: calc(25.4 * var(--pt)); border-radius: 50%; background: rgb(38 38 38 / .72); color: #fff; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.mute svg { width: calc(15 * var(--pt)); height: calc(15 * var(--pt)); }
.fa { left: calc(12.7 * var(--pt)); top: calc(766 * var(--pt)); width: calc(404 * var(--pt)); height: calc(22 * var(--pt)); display: flex; align-items: center; }
.fa-g { display: flex; align-items: center; gap: calc(6.8 * var(--pt)); margin-right: calc(14.7 * var(--pt)); }
.fa-g b { font-size: calc(14.5 * var(--pt)); font-weight: 600; }
.fa svg { height: calc(21 * var(--pt)); }
.i-heart { width: calc(22.3 * var(--pt)); } .i-com { width: calc(21 * var(--pt)); } .i-rep { width: calc(18.7 * var(--pt)); height: calc(22 * var(--pt)) !important; } .i-share { width: calc(21.7 * var(--pt)); }
.i-save { width: calc(17.7 * var(--pt)); height: calc(20 * var(--pt)) !important; margin-left: auto; }
.fl { left: calc(12.3 * var(--pt)); top: calc(801 * var(--pt)); height: calc(20 * var(--pt)); display: flex; align-items: center; font-size: calc(1 * var(--pt)); white-space: nowrap; }
.fl { font-size: calc(15 * var(--pt)); }
.fl b { font-weight: 600; margin: 0 .25em; }
.fl b:last-child { margin-right: 0; }
.fl-avs { display: flex; margin-right: .3em; }
.fl-avs img { width: 1.29em; height: 1.29em; border-radius: 50%; border: .08em solid #fff; object-fit: cover; }
.fl-avs img + img { margin-left: -.45em; }
.fc-cap { left: calc(12.3 * var(--pt)); top: calc(822.3 * var(--pt)); width: calc(405 * var(--pt)); font-size: calc(1 * var(--pt)); }
.fc-cap .ln { font-size: calc(15 * var(--pt)); line-height: calc(21.3 * var(--pt)); white-space: nowrap; }
.fc-cap .ln + .ln { line-height: calc(16 * var(--pt)); margin-top: calc(-2.65 * var(--pt)); }
.fc-cap b { font-weight: 600; }
.fc-cap .more { color: #737373; }
.fc-time { left: calc(12.3 * var(--pt)); top: calc(843 * var(--pt)); font-size: calc(13 * var(--pt)); line-height: 1.6; color: #737373; }
.fnext { left: 0; top: calc(890 * var(--pt)); width: calc(430 * var(--pt)); height: calc(60 * var(--pt)); background: linear-gradient(120deg, #4a5a78, #8a96a8); }
.nav { left: calc(53.3 * var(--pt)); top: calc(855.7 * var(--pt)); width: calc(323.4 * var(--pt)); height: calc(49.3 * var(--pt)); border-radius: calc(24.7 * var(--pt)); background: rgb(255 255 255 / .92); box-shadow: 0 0 0 calc(.6 * var(--pt)) rgb(0 0 0 / .05), 0 calc(.5 * var(--pt)) calc(1.5 * var(--pt)) rgb(0 0 0 / .08); color: #000; }
.nav-on { left: calc(3.7 * var(--pt)); top: calc(3.6 * var(--pt)); width: calc(69.7 * var(--pt)); height: calc(41.4 * var(--pt)); border-radius: calc(20.7 * var(--pt)); background: rgb(0 0 0 / .08); }
.nav svg { top: calc(14.8 * var(--pt)); width: calc(19.8 * var(--pt)); height: calc(19.8 * var(--pt)); }
.n1 { left: calc(29.3 * var(--pt)); } .n2 { left: calc(91 * var(--pt)); } .n3 { left: calc(152.7 * var(--pt)); } .n4 { left: calc(214 * var(--pt)); }
.n5 { left: calc(274.4 * var(--pt)); top: calc(14.3 * var(--pt)); width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); border-radius: 50%; overflow: hidden; }
.n5 img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dot { width: calc(5.4 * var(--pt)); height: calc(5.4 * var(--pt)); border-radius: 50%; background: #FF3040; }
.d3 { left: calc(169 * var(--pt)); top: calc(28.3 * var(--pt)); } .d5 { left: calc(291.3 * var(--pt)); top: calc(28.9 * var(--pt)); }
.shot .top, .shot .pills, .shot .you, .shot .actions, .shot .foot { display: none !important; }
.shot .fc { padding: 0; }
.shot .phone { width: 387px; min-width: 0; padding: 0; border-radius: 0; }
.shot .screen { border-radius: 0; }

.fh-follow { left: calc(316.7 * var(--pt)); top: calc(12.3 * var(--pt)); width: calc(69 * var(--pt)); height: calc(30.3 * var(--pt)); box-sizing: border-box; border: calc(1.2 * var(--pt)) solid rgb(255 255 255 / .85); border-radius: calc(8 * var(--pt)); display: flex; align-items: center; justify-content: center; font-size: calc(15 * var(--pt)); font-weight: 600; text-shadow: none; }
.n5 { background: var(--indigo); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: calc(11 * var(--pt)); }

/* phone left, controls right */
.tool { max-width: 1000px; }
.preview { flex-direction: row; align-items: flex-start; justify-content: center; gap: 2.5rem; }
.preview .phone { flex: none; }
.side { width: 360px; display: flex; flex-direction: column; gap: .9rem; background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 1.25rem; box-sizing: border-box; }
.side .actions { flex-wrap: wrap; }
.pills { flex-direction: row; flex-wrap: nowrap; gap: .4rem; }
.pill { flex: 1; display: flex; align-items: center; justify-content: center; gap: .45rem; text-align: left; font-size: .82rem; padding: .5rem .7rem; }
.pill svg { width: 22px; height: 22px; flex: none; }
@media (max-width: 760px) { .preview { flex-direction: column; align-items: center; } .side { width: 100%; max-width: 420px; } }

/* story ring, paid partnership pictures, verified badge */
.fh-ring { left: calc(7 * var(--pt)); top: calc(8 * var(--pt)); width: calc(39.4 * var(--pt)); height: calc(39.4 * var(--pt)); }
.fh-pp { left: 0; top: 0; width: calc(45 * var(--pt)); height: calc(45 * var(--pt)); }
.fh-pp > span { position: absolute; border-radius: 50%; overflow: hidden; background: var(--lav); display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; }
.fh-pp img { width: 100%; height: 100%; object-fit: cover; }
.pp-back { left: calc(16.3 * var(--pt)); top: calc(10.7 * var(--pt)); width: calc(23 * var(--pt)); height: calc(23 * var(--pt)); font-size: calc(11 * var(--pt)); }
.pp-front { left: calc(7 * var(--pt)); top: calc(18.5 * var(--pt)); width: calc(24.4 * var(--pt)); height: calc(24.4 * var(--pt)); box-sizing: border-box; border: calc(1 * var(--pt)) solid #fff; background: var(--indigo) !important; font-size: calc(11 * var(--pt)); }
.fh-name { display: flex; align-items: center; overflow: visible; max-width: calc(255 * var(--pt)); }
.fh-name .nm-t { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fh-name .vb { width: .8em; height: .8em; flex: none; margin-left: .3em; }
.fh-name .nm-and { font-weight: 400; margin: 0 .3em; }
.fh-name .vb + .nm-and { margin-left: .3em; }

.fnext { overflow: hidden; background: linear-gradient(180deg, #7FA6D9, #A9C6EA); }
.fnext .cl { position: absolute; border-radius: 50%; background: rgb(255 255 255 / .75); filter: blur(calc(9 * var(--pt))); }
.c1 { left: calc(40 * var(--pt)); top: calc(20 * var(--pt)); width: calc(140 * var(--pt)); height: calc(50 * var(--pt)); }
.c2 { left: calc(230 * var(--pt)); top: calc(30 * var(--pt)); width: calc(170 * var(--pt)); height: calc(60 * var(--pt)); }
.c3 { left: calc(150 * var(--pt)); top: calc(5 * var(--pt)); width: calc(90 * var(--pt)); height: calc(30 * var(--pt)); opacity: .6; }
.fnext .nx-av { position: absolute; left: calc(10.7 * var(--pt)); top: calc(11.7 * var(--pt)); width: calc(32 * var(--pt)); height: calc(32 * var(--pt)); border-radius: 50%; background: rgb(255 255 255 / .55); filter: blur(calc(1.5 * var(--pt))); }
.fnext .nx-nm { position: absolute; left: calc(52.3 * var(--pt)); top: calc(15 * var(--pt)); width: calc(110 * var(--pt)); height: calc(10 * var(--pt)); border-radius: calc(5 * var(--pt)); background: rgb(255 255 255 / .6); filter: blur(calc(1.5 * var(--pt))); }

.check { display: flex; align-items: center; gap: .5rem; font-size: .9rem; cursor: pointer; margin-top: -.5rem; }
.partner .check { margin-top: 0; }
.check input { accent-color: var(--ink); width: 1rem; height: 1rem; margin: 0; }
.seg { display: grid; grid-template-columns: auto 1fr auto; gap: .35rem; }
.seg3 { grid-template-columns: 1fr 1.4fr 1fr; margin-top: .45rem; }
.seg button { font: 500 .82rem var(--sans); padding: .5rem .4rem; border-radius: 6px; border: 1px solid var(--line); background: var(--white); color: var(--ink); cursor: pointer; }
.seg button:hover { border-color: var(--lav); }
.seg button[aria-pressed="true"], .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.partner { display: flex; flex-direction: column; gap: .5rem; margin-top: .55rem; }
.fh.is-pp .fh-name { top: calc(19.3 * var(--pt)); }
.fh.is-pp .fh-sub { top: calc(34.7 * var(--pt)); }
.shot .side { display: none !important; }

/* ---- Instagram Reels tab, drawn in iPhone points (measured from Alysha's IMG_5086-5104) ---- */
.reels { position: absolute; inset: 0; color: #fff; background: #111; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; overflow: hidden; }
.reels svg, .feed svg, .reels img, .feed img { display: block; max-width: none; }
.reels > * { position: absolute; }
.rv { inset: 0; }
.rv video, .rv img.media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.r-shade-top { left: 0; top: 0; width: 100%; height: calc(130 * var(--pt)); background: linear-gradient(rgb(0 0 0 / .25), rgb(0 0 0 / 0)); }
.r-shade-bot { left: 0; bottom: 0; width: 100%; height: calc(330 * var(--pt)); background: linear-gradient(rgb(0 0 0 / 0), rgb(0 0 0 / .42)); }
.r-sb { color: #fff; }
.r-top { left: 0; top: calc(85 * var(--pt)); width: 100%; height: 0; text-shadow: 0 0 .3em rgb(0 0 0 / .2); }
.r-top > * { position: absolute; top: 0; transform: translateY(-50%); }
.r-top b { left: calc(107.5 * var(--pt)); font-size: calc(22 * var(--pt)); font-weight: 700; }
.r-fr { left: calc(185 * var(--pt)); font-size: calc(22 * var(--pt)); font-weight: 700; opacity: .6; }
.r-fav { left: calc(272.5 * var(--pt)); display: flex; }
.r-fav img { width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); border-radius: 50%; object-fit: cover; }
.r-fav img + img { margin-left: calc(-4 * var(--pt)); }
.r-filter { left: calc(386 * var(--pt)); width: calc(21.5 * var(--pt)); height: calc(21.5 * var(--pt)); }
.r-rail { left: 0; top: 0; width: 100%; height: 100%; text-shadow: 0 0 .3em rgb(0 0 0 / .2); }
.ri { position: absolute; left: calc(399.3 * var(--pt)); width: 0; display: flex; flex-direction: column; align-items: center; }
.ri svg { position: absolute; transform: translate(-50%, -50%); top: 0; left: 0; overflow: visible; }
.ri b { position: absolute; top: calc(30 * var(--pt)); left: 0; transform: translate(-50%, -50%); font-size: calc(13 * var(--pt)); font-weight: 600; white-space: nowrap; }
.ri[data-i="heart"] svg { width: calc(25 * var(--pt)); height: calc(22.3 * var(--pt)); }
.ri[data-i="com"] svg { width: calc(23.7 * var(--pt)); height: calc(23.7 * var(--pt)); }
.ri[data-i="rep"] svg { width: calc(21 * var(--pt)); height: calc(25 * var(--pt)); }
.ri[data-i="share"] svg { width: calc(24 * var(--pt)); height: calc(22 * var(--pt)); }
.ri[data-i="save"] svg { width: calc(19 * var(--pt)); height: calc(22.3 * var(--pt)); }
.ri[data-i="menu"] svg { width: calc(20 * var(--pt)); height: calc(11 * var(--pt)); }
.r-who { left: 0; top: 0; width: 100%; height: 0; text-shadow: 0 0 .25em rgb(0 0 0 / .25); }
.r-who > * { position: absolute; }
.r-ring { left: calc(16 * var(--pt)); top: calc(-22 * var(--pt)); width: calc(44 * var(--pt)); height: calc(44 * var(--pt)); }
.r-av { left: calc(19.25 * var(--pt)); top: calc(-18.75 * var(--pt)); width: calc(37.5 * var(--pt)); height: calc(37.5 * var(--pt)); border-radius: 50%; overflow: hidden; background: var(--indigo); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: calc(17 * var(--pt)); }
.r-av img { width: 100%; height: 100%; object-fit: cover; }
.r-txt { left: calc(68.5 * var(--pt)); top: 0; transform: translateY(-50%); display: flex; align-items: center; }
.r-col { display: flex; flex-direction: column; gap: calc(2.5 * var(--pt)); }
.r-name { display: flex; align-items: center; font-size: calc(15 * var(--pt)); font-weight: 600; white-space: nowrap; line-height: 1.2; }
.r-sub { line-height: 1.2; }
.r-name .nm-t { overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: calc(220 * var(--pt)); }
.r-name .vb { width: .8em; height: .8em; flex: none; margin-left: .3em; }
.r-follow { margin-left: calc(13.5 * var(--pt)); height: calc(24 * var(--pt)); padding: 0 calc(8.5 * var(--pt)); box-sizing: border-box; border: calc(1.1 * var(--pt)) solid rgb(255 255 255 / .7); border-radius: calc(6.5 * var(--pt)); display: flex; align-items: center; font-size: calc(14.5 * var(--pt)); font-weight: 600; text-shadow: none; flex: none; }
.r-sub { display: flex; align-items: center; gap: calc(6 * var(--pt)); white-space: nowrap; }
.r-sub svg { width: calc(10 * var(--pt)); height: calc(12 * var(--pt)); opacity: .85; }
.r-sub span { font-size: calc(13 * var(--pt)); opacity: .85; }
.r-cap { left: calc(16 * var(--pt)); transform: translateY(-50%); font-size: calc(15 * var(--pt)); white-space: nowrap; text-shadow: 0 0 .25em rgb(0 0 0 / .25); }
.r-fby { left: calc(16 * var(--pt)); transform: translateY(-50%); display: flex; align-items: center; font-size: calc(14 * var(--pt)); color: rgb(255 255 255 / .78); white-space: nowrap; text-shadow: 0 0 .25em rgb(0 0 0 / .25); }
.r-fby b { color: #fff; font-weight: 600; margin: 0 .25em; }
.r-fby b:last-child { margin-right: 0; }
.fby-avs { display: flex; margin-right: .45em; }
.fby-avs img { width: 1.21em; height: 1.21em; border-radius: 50%; object-fit: cover; }
.fby-avs img + img { margin-left: -.2em; }
.r-ad { right: calc(22.5 * var(--pt)); transform: translateY(-50%); font-size: calc(14 * var(--pt)); font-weight: 600; }
.r-prog { left: calc(16 * var(--pt)); top: calc(832.3 * var(--pt)); width: calc(398 * var(--pt)); height: calc(1.7 * var(--pt)); border-radius: 1em; background: rgb(255 255 255 / .35); overflow: hidden; }
.r-prog i { display: block; width: 14%; height: 100%; background: #fff; }
.reels .nav { left: calc(53.3 * var(--pt)); top: calc(855.7 * var(--pt)); width: calc(323.4 * var(--pt)); height: calc(49.3 * var(--pt)); }
.nav-dark { background: rgb(28 28 28 / .86); color: #fff; box-shadow: 0 0 0 calc(.6 * var(--pt)) rgb(255 255 255 / .08); }
.nav-dark .nav-on { left: calc(65.2 * var(--pt)); width: calc(70 * var(--pt)); background: rgb(255 255 255 / .16); }

/* ad button controls */
.sel { font: 500 .9rem/1.3 var(--sans); height: 2.4rem; box-sizing: border-box; color: var(--ink); padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 6px; background: var(--white); width: 100%; }
#cta-img-btn { margin-top: .45rem; align-self: flex-start; }
.photo-dot.sq { border-radius: 4px; }
.colrow { display: flex; align-items: center; gap: .4rem; margin-top: .45rem; font-size: .85rem; }
.colrow > span { margin-right: auto; }
.chip { font: 500 .8rem var(--sans); padding: .35rem .6rem; border-radius: 6px; border: 1px solid var(--line); background: var(--white); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.swatch { position: relative; }
#col-dot { width: .8rem; height: .8rem; border-radius: 3px; background: var(--lav); }
.switch { display: flex; align-items: center; gap: .6rem; font-size: .9rem; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track { width: 2.1rem; height: 1.2rem; border-radius: 6px; background: var(--line); position: relative; flex: none; transition: background .15s; }
.switch .track::after { content: ""; position: absolute; top: .15rem; left: .15rem; width: .9rem; height: .9rem; border-radius: 4px; background: var(--white); transition: transform .15s; }
.switch input:checked + .track { background: var(--ink); }
.switch input:checked + .track::after { transform: translateX(.9rem); }
.switch input:focus-visible + .track { outline: 2px solid var(--indigo); outline-offset: 2px; }

/* Reels ad button: three looks, measured from IMG_5112-5116 */
.r-cta { left: calc(16 * var(--pt)); transform: translateY(-50%); display: flex; align-items: center; box-sizing: border-box; font-size: calc(14.5 * var(--pt)); font-weight: 600; white-space: nowrap; text-shadow: none; }
.r-cta svg { flex: none; }
.r-cta img { display: none; }
.r-cta.sm { height: calc(31 * var(--pt)); padding: 0 calc(11.7 * var(--pt)) 0 calc(12.3 * var(--pt)); gap: calc(6.7 * var(--pt)); border-radius: calc(10 * var(--pt)); background: rgb(80 80 80 / .45); backdrop-filter: blur(calc(10 * var(--pt))); -webkit-backdrop-filter: blur(calc(10 * var(--pt))); }
.r-cta.sm svg { width: calc(12.5 * var(--pt)); height: calc(12.5 * var(--pt)); }
.r-cta.pv { height: calc(46.7 * var(--pt)); padding: 0 calc(15 * var(--pt)) 0 calc(8 * var(--pt)); gap: calc(12.3 * var(--pt)); border-radius: calc(13 * var(--pt)); background: rgb(48 48 48 / .82); border: calc(1 * var(--pt)) solid rgb(255 255 255 / .07); backdrop-filter: blur(calc(10 * var(--pt))); -webkit-backdrop-filter: blur(calc(10 * var(--pt))); }
.r-cta.pv img { display: block; width: calc(32 * var(--pt)); height: calc(32 * var(--pt)); border-radius: calc(6 * var(--pt)); object-fit: cover; background: rgb(255 255 255 / .15); }
.r-cta.pv svg { width: calc(14 * var(--pt)); height: calc(14 * var(--pt)); }
.r-cta.lg { width: calc(346.7 * var(--pt)); height: calc(47.6 * var(--pt)); padding: 0 calc(12 * var(--pt)) 0 calc(16.3 * var(--pt)); justify-content: space-between; border-radius: calc(10 * var(--pt)); background: var(--bar, rgb(100 100 100)); }
.r-cta.lg svg { width: calc(15 * var(--pt)); height: calc(15 * var(--pt)); }
.switch .hint { color: color-mix(in srgb, var(--ink) 55%, transparent); font-size: .8rem; }

/* ---- Instagram Story, measured from Alysha's IMG_5119-5129 (iPhone points) ---- */
.story { position: absolute; inset: 0; color: #fff; background: #0C0F14; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; overflow: hidden; }
.story svg, .story img { display: block; max-width: none; }
.story > *, .s-card > * { position: absolute; }
.s-card { left: 0; top: calc(59 * var(--pt)); width: calc(430 * var(--pt)); height: calc(764 * var(--pt)); border-radius: calc(7.7 * var(--pt)); overflow: hidden; background: #222; }
.sv { inset: 0; }
.sv video, .sv img.media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.s-shade { left: 0; top: 0; width: 100%; height: calc(110 * var(--pt)); background: linear-gradient(rgb(0 0 0 / .22), rgb(0 0 0 / 0)); }
.s-prog { left: calc(8 * var(--pt)); top: calc(8 * var(--pt)); width: calc(414 * var(--pt)); height: calc(2 * var(--pt)); border-radius: calc(1 * var(--pt)); background: rgb(255 255 255 / .36); overflow: hidden; }
.s-prog i { position: absolute; left: 0; top: 0; height: 100%; width: 8%; background: rgb(255 255 255 / .8); }
.s-av { left: calc(12.3 * var(--pt)); top: calc(18.3 * var(--pt)); width: calc(31.3 * var(--pt)); height: calc(31.3 * var(--pt)); border-radius: 50%; overflow: hidden; background: var(--indigo); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: calc(14 * var(--pt)); }
.s-av img, .s-pp img { width: 100%; height: 100%; object-fit: cover; }
.s-pp { left: 0; top: 0; width: calc(50 * var(--pt)); height: calc(55 * var(--pt)); }
.s-pp > span { position: absolute; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: calc(11 * var(--pt)); box-sizing: border-box; }
.s-pp-back { left: calc(20.7 * var(--pt)); top: calc(19 * var(--pt)); width: calc(23.3 * var(--pt)); height: calc(23.3 * var(--pt)); background: var(--lav); }
.s-pp-front { left: calc(12 * var(--pt)); top: calc(26.3 * var(--pt)); width: calc(24.6 * var(--pt)); height: calc(24.6 * var(--pt)); border: calc(1 * var(--pt)) solid #fff; background: var(--indigo); }
.s-name { left: calc(56.7 * var(--pt)); top: calc(34.3 * var(--pt)); transform: translateY(-50%); display: flex; align-items: center; font-size: calc(14.5 * var(--pt)); font-weight: 600; white-space: nowrap; text-shadow: 0 0 .3em rgb(0 0 0 / .2); }
.s-name .vb { width: .8em; height: .8em; flex: none; margin-left: .3em; }
.s-name .nm-and { font-weight: 400; margin: 0 .3em; }
.s-time { font-weight: 400; color: rgb(255 255 255 / .72); margin-left: calc(9 * var(--pt)); }
.s-dots { left: calc(362.7 * var(--pt)); top: calc(31.7 * var(--pt)); width: calc(14.7 * var(--pt)); height: calc(4 * var(--pt)); }
.s-x { left: calc(400 * var(--pt)); top: calc(24.3 * var(--pt)); width: calc(19.3 * var(--pt)); height: calc(19.3 * var(--pt)); }
.s-cta { left: 50%; top: calc(659.2 * var(--pt)); transform: translate(-50%, -50%); height: calc(48.3 * var(--pt)); box-sizing: border-box; padding: 0 calc(14.3 * var(--pt)) 0 calc(13.3 * var(--pt)); gap: calc(10.7 * var(--pt)); display: flex; align-items: center; border-radius: calc(11 * var(--pt)); font-size: calc(26 * var(--pt)); font-weight: 400; white-space: nowrap; letter-spacing: calc(-0.2 * var(--pt)); }
.s-cta svg { width: calc(25 * var(--pt)); height: calc(25 * var(--pt)); flex: none; }
.s-cta.grey { background: rgb(120 120 120 / .45); backdrop-filter: blur(calc(12 * var(--pt))); -webkit-backdrop-filter: blur(calc(12 * var(--pt))); color: #fff; }
.s-cta.white { background: #fff; color: rgb(18 18 20); }
.s-cta.white svg { color: #4295F6; }
.s-fby { left: calc(16 * var(--pt)); top: calc(745 * var(--pt)); transform: translateY(-50%); display: flex; align-items: center; font-size: calc(14.5 * var(--pt)); color: rgb(255 255 255 / .92); white-space: nowrap; text-shadow: 0 0 .3em rgb(0 0 0 / .25); }
.s-fby b { color: #fff; font-weight: 600; margin: 0 .25em; }
.s-fby b:last-child { margin-right: 0; }
.s-fby .fby-avs { margin-right: calc(8.3 * var(--pt)); }
.s-fby .fby-avs img { width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); }
.s-fby .fby-avs img + img { margin-left: calc(-4 * var(--pt)); }
.s-msg { left: calc(16 * var(--pt)); top: calc(844.3 * var(--pt)); width: calc(278.3 * var(--pt)); height: calc(43.3 * var(--pt)); box-sizing: border-box; border: calc(1 * var(--pt)) solid rgb(255 255 255 / .42); border-radius: calc(21.7 * var(--pt)); padding-left: calc(21.3 * var(--pt)); display: flex; align-items: center; font-size: calc(15 * var(--pt)); }
.s-heart { left: calc(313.3 * var(--pt)); top: calc(859.3 * var(--pt)); width: calc(22.7 * var(--pt)); height: calc(20.8 * var(--pt)); }
.s-com { left: calc(356 * var(--pt)); top: calc(858 * var(--pt)); width: calc(22 * var(--pt)); height: calc(22 * var(--pt)); }
.s-ad { left: calc(397.3 * var(--pt)); top: calc(869.3 * var(--pt)); transform: translateY(-50%); font-size: calc(14.5 * var(--pt)); }
.seg2 { grid-template-columns: 1fr 1fr; margin-top: .45rem; }

/* organic story bits (IMG_5131-5142) */
.s-reel { left: calc(56.7 * var(--pt)); top: calc(42 * var(--pt)); transform: translateY(-50%); display: flex; align-items: center; gap: calc(6 * var(--pt)); font-size: calc(13 * var(--pt)); font-weight: 600; white-space: nowrap; text-shadow: 0 0 .3em rgb(0 0 0 / .2); }
.s-reel svg { width: calc(10.7 * var(--pt)); height: calc(10.7 * var(--pt)); }
.s-reel .s-chev { width: calc(4.3 * var(--pt)); height: calc(7.5 * var(--pt)); margin-left: calc(-1 * var(--pt)); }
.s-ov-name { left: calc(21.3 * var(--pt)); top: calc(80.5 * var(--pt)); transform: translateY(-50%); font-size: calc(13 * var(--pt)); font-weight: 600; white-space: nowrap; text-shadow: 0 0 .3em rgb(0 0 0 / .25); }
.s-ov-time { right: calc(21.7 * var(--pt)); top: calc(80.5 * var(--pt)); transform: translateY(-50%); font-size: calc(13 * var(--pt)); color: rgb(255 255 255 / .85); text-shadow: 0 0 .3em rgb(0 0 0 / .25); }
.s-menu { left: calc(360 * var(--pt)); top: calc(29.3 * var(--pt)); width: calc(20 * var(--pt)); height: calc(10 * var(--pt)); }
.s-plane { left: calc(390.7 * var(--pt)); top: calc(858.3 * var(--pt)); width: calc(22.7 * var(--pt)); height: calc(20.8 * var(--pt)); }
.story.org .s-msg { width: calc(313.7 * var(--pt)); top: calc(846.7 * var(--pt)); }
.story.org .s-heart { left: calc(348.7 * var(--pt)); top: calc(858.3 * var(--pt)); }
.sel.own { margin-top: .45rem; }
#ppad-row, #sreel-row, #sfby-row { margin-top: .55rem; }
.seg3b { grid-template-columns: 1.2fr 1fr 1.2fr; margin-top: .45rem; }
.s-cta #s-cta-plane { width: calc(23 * var(--pt)); height: calc(21 * var(--pt)); }
.s-of { margin-left: .3em; }
.s-prog.split { background: none; overflow: visible; display: flex; gap: calc(2 * var(--pt)); }
.s-prog.split i { position: relative; flex: 1; height: 100%; border-radius: calc(1 * var(--pt)); background: rgb(255 255 255 / .36); overflow: hidden; width: auto; }
.s-prog.split i:first-child::after { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 25%; background: rgb(255 255 255 / .8); }
#scar-row { margin-top: .55rem; }

/* platform picker */
.plats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .4rem; }
.plat { display: flex; align-items: center; justify-content: center; gap: .5rem; font: 600 .9rem var(--sans); padding: .6rem .7rem; border-radius: 6px; border: 1px solid var(--line); background: var(--white); color: var(--ink); cursor: pointer; }
.plat svg { width: 20px; height: 20px; flex: none; }
.plat:hover { border-color: var(--lav); }
.plat[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }

/* ---- TikTok For You, measured from Alysha's IMG_5158-5166 (iPhone points) ---- */
.tt { position: absolute; inset: 0; color: #fff; background: #000; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; overflow: hidden; }
.tt svg, .tt img { display: block; max-width: none; }
.tt > *, .t-nav > * { position: absolute; }
.tv { left: 0; top: 0; width: 100%; height: calc(848.7 * var(--pt)); overflow: hidden; }
.tv video, .tv img.media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.t-shade-top { left: 0; top: 0; width: 100%; height: calc(130 * var(--pt)); background: linear-gradient(rgb(0 0 0 / .22), rgb(0 0 0 / 0)); }
.t-shade-bot { left: 0; top: calc(600 * var(--pt)); width: 100%; height: calc(248.7 * var(--pt)); background: linear-gradient(rgb(0 0 0 / 0), rgb(0 0 0 / .3)); }
.t-tab { top: calc(80.5 * var(--pt)); transform: translateY(-50%); font-size: calc(17 * var(--pt)); font-weight: 600; color: rgb(255 255 255 / .72); white-space: nowrap; text-shadow: 0 0 .2em rgb(0 0 0 / .2); letter-spacing: calc(-0.2 * var(--pt)); }
.t-tab.on { color: #fff; font-weight: 700; }
.t-uline { left: calc(321.7 * var(--pt)); top: calc(99.3 * var(--pt)); width: calc(23.3 * var(--pt)); height: calc(1.6 * var(--pt)); border-radius: calc(1 * var(--pt)); background: #fff; }
.t-search { left: calc(391.7 * var(--pt)); top: calc(71.5 * var(--pt)); width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); }
.t-av { left: calc(377.3 * var(--pt)); top: calc(450.7 * var(--pt)); width: calc(44.7 * var(--pt)); height: calc(44.7 * var(--pt)); border-radius: 50%; overflow: hidden; box-sizing: border-box; border: calc(1 * var(--pt)) solid rgb(255 255 255 / .9); background: var(--indigo); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: calc(18 * var(--pt)); }
.t-av img { width: 100%; height: 100%; object-fit: cover; }
.t-plus { left: calc(388.7 * var(--pt)); top: calc(484 * var(--pt)); width: calc(21.7 * var(--pt)); height: calc(21.7 * var(--pt)); }
.t-ri { left: calc(399.7 * var(--pt)); width: 0; height: 0; }
.t-ri svg { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); width: calc(29.3 * var(--pt)); height: calc(26.7 * var(--pt)); color: rgb(255 255 255 / .95); filter: drop-shadow(0 0 calc(1 * var(--pt)) rgb(0 0 0 / .2)); }
.t-ri .t-bm { width: calc(21.3 * var(--pt)); height: calc(24 * var(--pt)); }
.t-ri b { position: absolute; left: 0; transform: translate(-50%, -50%); font-size: calc(13 * var(--pt)); font-weight: 600; white-space: nowrap; text-shadow: 0 0 .2em rgb(0 0 0 / .3); }
.t-disc { left: calc(380 * var(--pt)); top: calc(795.3 * var(--pt)); width: calc(39.3 * var(--pt)); height: calc(39.3 * var(--pt)); border-radius: 50%; background: radial-gradient(#333 55%, #1a1a1a 56%); display: flex; align-items: center; justify-content: center; }
.t-disc-in { width: 62%; height: 62%; border-radius: 50%; overflow: hidden; background: var(--indigo); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: calc(11 * var(--pt)); }
.t-disc-in img { width: 100%; height: 100%; object-fit: cover; }
.t-left { left: calc(12.3 * var(--pt)); width: calc(313.4 * var(--pt)); }
.t-left > * { position: absolute; left: 0; transform: translateY(-50%); white-space: nowrap; }
.t-name { display: flex; align-items: center; font-size: calc(16.5 * var(--pt)); font-weight: 700; text-shadow: 0 0 .2em rgb(0 0 0 / .25); }
.t-vb { width: calc(14 * var(--pt)); height: calc(14 * var(--pt)); margin-left: calc(5 * var(--pt)); flex: none; }
.t-cap { font-size: calc(15 * var(--pt)); line-height: calc(17.5 * var(--pt)); width: 100%; text-shadow: 0 0 .2em rgb(0 0 0 / .25); transform: none !important; }
.t-cap .ln { height: calc(17.5 * var(--pt)); overflow: hidden; }
.t-cap .more { color: rgb(255 255 255 / .72); font-weight: 600; }
.t-tag { font-size: calc(12.5 * var(--pt)); font-weight: 600; padding: calc(1.5 * var(--pt)) calc(4.5 * var(--pt)); border-radius: calc(4 * var(--pt)); background: rgb(0 0 0 / .32); line-height: 1.2; }
.t-cta { left: calc(12.3 * var(--pt)); top: calc(801 * var(--pt)); width: calc(313.4 * var(--pt)); height: calc(35.7 * var(--pt)); border-radius: calc(8 * var(--pt)); background: rgb(0 0 0 / .14); display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--pt)); font-size: calc(15 * var(--pt)); font-weight: 600; color: rgb(255 255 255 / .75); backdrop-filter: blur(calc(8 * var(--pt))); -webkit-backdrop-filter: blur(calc(8 * var(--pt))); }
.t-cta svg { width: calc(4.5 * var(--pt)); height: calc(8 * var(--pt)); }
.t-nav { left: 0; top: calc(848.7 * var(--pt)); width: 100%; height: calc(83.3 * var(--pt)); background: #000; }
.t-n { top: 0; width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; }
.t-n { font-size: calc(10.5 * var(--pt)); font-weight: 600; white-space: nowrap; }
.t-n > svg, .t-n > .t-fr { position: absolute; top: calc(9.5 * var(--pt)); width: calc(21 * var(--pt)); height: calc(21 * var(--pt)); }
.t-n { justify-content: flex-start; padding-top: calc(32.5 * var(--pt)); box-sizing: border-box; }
.t-fr { border-radius: 50%; overflow: hidden; width: calc(26 * var(--pt)) !important; height: calc(26 * var(--pt)) !important; top: calc(6.5 * var(--pt)) !important; }
.t-fr img { width: 100%; height: 100%; object-fit: cover; }
.t-dot { position: absolute; top: calc(2.3 * var(--pt)); left: calc(7.5 * var(--pt)); width: calc(8 * var(--pt)); height: calc(8 * var(--pt)); border-radius: 50%; background: #E94359; }
.t-badge { position: absolute; top: calc(2.7 * var(--pt)); left: calc(-3 * var(--pt)); padding: 0 calc(5 * var(--pt)); height: calc(15.3 * var(--pt)); border-radius: calc(7.7 * var(--pt)); background: #E94359; font-size: calc(12 * var(--pt)); font-weight: 600; display: flex; align-items: center; }
.t-add { left: calc(192.3 * var(--pt)); top: calc(10 * var(--pt)); width: calc(45.3 * var(--pt)); height: calc(29 * var(--pt)); }
.t-add i { position: absolute; top: 0; height: 100%; border-radius: calc(8 * var(--pt)); }
.t-add .c { left: 0; width: calc(40 * var(--pt)); background: #5BD3E6; }
.t-add .p { right: 0; width: calc(40 * var(--pt)); background: #E94359; }
.t-add .w { left: calc(4.3 * var(--pt)); width: calc(36.7 * var(--pt)); background: #fff; }
.t-add svg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(13 * var(--pt)); height: calc(13 * var(--pt)); }
.t-left { top: 0; height: 0; }

/* empty state: phone shows the upload box, controls show greyed out as a preview */
.phone .drop { aspect-ratio: 1290 / 2796; max-height: none; border-radius: 28px; padding: 1.25rem; }
.preview.empty .screen, .preview.empty #swap, .preview.empty #play { display: none; }
.preview:not(.empty) .drop, .preview:not(.empty) .side-note { display: none; }
.preview.empty .side > :not(.side-note) { opacity: .4; filter: grayscale(1); pointer-events: none; user-select: none; }
.side-note { margin: 0; font: 500 .85rem var(--sans); color: var(--indigo); }

/* tabs: a row that ends at x 361 (For You stays put, like the real scrolling row) with ~21pt between tabs; For You underline sits under its own centre */
.t-tabs { right: calc(69 * var(--pt)); white-space: nowrap; top: calc(80.5 * var(--pt)); display: flex; gap: calc(21.2 * var(--pt)); transform: translateY(-50%); }
.t-tabs .t-tab { position: relative; top: auto; transform: none; }
.t-tab.on::after { content: ""; position: absolute; left: 50%; top: calc(100% + 7 * var(--pt)); width: calc(23.3 * var(--pt)); height: calc(1.6 * var(--pt)); transform: translateX(-50%); border-radius: calc(1 * var(--pt)); background: #fff; }

.t-n > .t-me { position: absolute; top: calc(8.5 * var(--pt)); width: calc(24 * var(--pt)); height: calc(24 * var(--pt)); border-radius: 50%; overflow: hidden; }
.t-me img { width: 100%; height: 100%; object-fit: cover; }
.kit { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; margin: 2.5rem 0 1.5rem; }
.btn-kit { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; }
.btn-kit svg { width: 18px; height: 18px; }

/* ---- Facebook, measured from Alysha's IMG_5179-5194 (iPhone points) ---- */
.fb, .fbr { position: absolute; inset: 0; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
.fb svg, .fb img, .fbr svg, .fbr img { display: block; max-width: none; }
.fb > *, .fbr > * { position: absolute; }
.fb { background: #fff; color: #080809; }
.bfv { left: 0; width: 100%; overflow: hidden; background: #222; }
.bfv video, .bfv img.media, .brv video, .brv img.media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fb-prev { left: 0; top: 0; width: 100%; height: calc(60.3 * var(--pt)); }
.fb-prev-img { position: absolute; left: 0; top: 0; width: 100%; height: calc(16 * var(--pt)); background: #24406B; }
.fb-sbbg { left: 0; top: 0; width: 100%; height: calc(52 * var(--pt)); background: linear-gradient(rgb(232 233 236 / .92), rgb(240 241 243 / .75)); }
.fb .sb, .fbr .sb { color: #fff; }
.fb .sb-time { text-shadow: 0 0 calc(2 * var(--pt)) rgb(0 0 0 / .15); }
.fb-div { left: 0; width: 100%; height: calc(2 * var(--pt)); background: #CBCDD1; }
.fb-av { left: calc(12 * var(--pt)); width: calc(40 * var(--pt)); height: calc(40 * var(--pt)); border-radius: 50%; overflow: hidden; box-sizing: border-box; box-shadow: inset 0 0 0 calc(.7 * var(--pt)) rgb(0 0 0 / .12); background: var(--indigo); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: calc(17 * var(--pt)); }
.fb-av.ring { box-shadow: 0 0 0 calc(2 * var(--pt)) #0866FF; outline: calc(2 * var(--pt)) solid #fff; outline-offset: calc(-2 * var(--pt)); }
.fb-av img { width: 100%; height: 100%; object-fit: cover; }
.fb-who { left: calc(60.3 * var(--pt)); width: calc(285 * var(--pt)); }
.fb-who > * { position: absolute; left: 0; transform: translateY(-50%); white-space: nowrap; display: flex; align-items: center; }
.fb-nm { top: calc(24.3 * var(--pt)); font-size: calc(16 * var(--pt)); font-weight: 400; letter-spacing: calc(-0.2 * var(--pt)); }
.fb-nm b { font-weight: 600; }
.fb-nm #fb-and { display: flex; align-items: center; white-space: pre; }
.fb-vb { width: calc(13 * var(--pt)); height: calc(13 * var(--pt)); margin-left: calc(4 * var(--pt)); flex: none; }
.fb-fol { white-space: pre; } .fb-fol span { color: #0866FF; font-weight: 600; }
.fb-sub { top: calc(41 * var(--pt)); font-size: calc(13 * var(--pt)); color: #65676B; white-space: pre; }
.fb-globe { width: calc(11.5 * var(--pt)); height: calc(11.5 * var(--pt)); color: #65676B; }
.fb-dots { left: calc(356 * var(--pt)); width: calc(16 * var(--pt)); display: flex; justify-content: space-between; transform: translateY(-50%); }
.fb-dots i { width: calc(4 * var(--pt)); height: calc(4 * var(--pt)); border-radius: 50%; background: #65676B; }
.fb-x { left: calc(400.7 * var(--pt)); width: calc(14.6 * var(--pt)); height: calc(14.6 * var(--pt)); transform: translateY(-50%); color: #65676B; }
.fb-cap { left: calc(12.7 * var(--pt)); width: calc(404 * var(--pt)); font-size: calc(15.5 * var(--pt)); line-height: calc(16.7 * var(--pt)); letter-spacing: calc(-0.1 * var(--pt)); }
.fb-cap .ln { white-space: nowrap; overflow: hidden; height: calc(16.7 * var(--pt)); }
.fb-cap .more { color: #65676B; font-weight: 500; }
.fb-about { right: calc(14.7 * var(--pt)); height: calc(25 * var(--pt)); padding: 0 calc(10 * var(--pt)) 0 calc(8 * var(--pt)); border-radius: calc(12.5 * var(--pt)); background: #fff; display: flex; align-items: center; gap: calc(5 * var(--pt)); font-size: calc(13.5 * var(--pt)); white-space: nowrap; }
.fb-about svg { width: calc(12 * var(--pt)); height: calc(12 * var(--pt)); }
.fb-mute { left: calc(385.5 * var(--pt)); width: calc(29 * var(--pt)); height: calc(29 * var(--pt)); border-radius: 50%; background: rgb(0 0 0 / .62); display: flex; align-items: center; justify-content: center; }
.fb-mute svg { width: 60%; height: 60%; }
.fb-strip { left: 0; width: 100%; height: calc(48 * var(--pt)); background: #F8F9FB; }
.fb-head { position: absolute; left: calc(13.3 * var(--pt)); top: calc(25 * var(--pt)); transform: translateY(-50%); max-width: calc(320 * var(--pt)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(15 * var(--pt)); }
.fb-btn { position: absolute; right: calc(12 * var(--pt)); top: calc(8 * var(--pt)); height: calc(32 * var(--pt)); padding: 0 calc(12.5 * var(--pt)); border-radius: calc(8 * var(--pt)); background: #0866FF; color: #fff; font-size: calc(15 * var(--pt)); font-weight: 600; display: flex; align-items: center; white-space: nowrap; }
.fb-row { left: calc(12.3 * var(--pt)); display: flex; gap: calc(25.6 * var(--pt)); transform: translateY(-50%); color: #65676B; }
.fb-a { display: flex; align-items: center; gap: calc(7 * var(--pt)); font-size: calc(15 * var(--pt)); }
.fb-a b { font-weight: 500; }
.fb-a svg { width: calc(23.4 * var(--pt)); height: calc(23.4 * var(--pt)); }
.fb-rx { right: calc(12 * var(--pt)); transform: translateY(-50%); }
.fb-react { display: flex; }
.fb-react svg { width: calc(17 * var(--pt)); height: calc(17 * var(--pt)); }
.fb-react svg + svg { margin-left: calc(-2 * var(--pt)); }
.fb-next { left: 0; width: 100%; height: calc(60 * var(--pt)); }
.fb-next > * { position: absolute; }
.fb-nav { left: calc(12 * var(--pt)); top: 0; width: calc(40 * var(--pt)); height: calc(40 * var(--pt)); }
.fb-nav > img { width: 100%; height: 100%; border-radius: calc(9 * var(--pt)); object-fit: cover; }
.fb-nav2 { position: absolute; right: calc(-4 * var(--pt)); bottom: calc(-4 * var(--pt)); width: calc(22 * var(--pt)); height: calc(22 * var(--pt)); border-radius: 50%; overflow: hidden; outline: calc(1.5 * var(--pt)) solid #fff; }
.fb-nav2 img { width: 100%; height: 100%; object-fit: cover; }
.fb-nnm { left: calc(60.3 * var(--pt)); top: calc(12.3 * var(--pt)); transform: translateY(-50%); font-size: calc(16 * var(--pt)); white-space: pre; }
.fb-nnm b { font-weight: 600; } .fb-join { color: #0866FF; font-weight: 600; }
.fb-nsub { left: calc(60.3 * var(--pt)); top: calc(29 * var(--pt)); transform: translateY(-50%); font-size: calc(13 * var(--pt)); color: #65676B; display: flex; align-items: center; white-space: pre; }
.fb-ndots { top: calc(10 * var(--pt)); transform: none; } .fb-nx { top: calc(10 * var(--pt)); transform: none; }

.fbr { background: #000; color: #fff; }
.brv { left: 0; top: 0; width: 100%; height: calc(854 * var(--pt)); overflow: hidden; }
.fr-back { left: calc(18.7 * var(--pt)); top: calc(76 * var(--pt)); width: calc(9.3 * var(--pt)); height: calc(18 * var(--pt)); }
.fr-search { left: calc(344.7 * var(--pt)); top: calc(73.7 * var(--pt)); width: calc(22.6 * var(--pt)); height: calc(22.6 * var(--pt)); }
.fr-more { left: calc(388.7 * var(--pt)); top: calc(73.7 * var(--pt)); width: calc(22.6 * var(--pt)); height: calc(22.6 * var(--pt)); }
.fbr svg { filter: drop-shadow(0 0 calc(1.5 * var(--pt)) rgb(0 0 0 / .25)); }
.fr-ri { left: calc(402 * var(--pt)); width: 0; height: 0; }
.fr-ri svg { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); width: calc(27 * var(--pt)); height: calc(27 * var(--pt)); }
.fr-ri b { position: absolute; left: 0; top: calc(27 * var(--pt)); transform: translate(-50%, -50%); font-size: calc(12.5 * var(--pt)); font-weight: 500; white-space: nowrap; text-shadow: 0 0 .25em rgb(0 0 0 / .3); }
.fr-dots { left: calc(392 * var(--pt)); width: calc(20 * var(--pt)); display: flex; justify-content: space-between; transform: translateY(-50%); }
.fr-dots i { width: calc(4 * var(--pt)); height: calc(4 * var(--pt)); border-radius: 50%; background: #fff; }
.fr-av { left: calc(13 * var(--pt)); width: calc(36 * var(--pt)); height: calc(36 * var(--pt)); transform: translateY(-50%); border-radius: 50%; overflow: hidden; background: var(--indigo); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: calc(15 * var(--pt)); }
.fr-av img { width: 100%; height: 100%; object-fit: cover; }
.fr-nm { left: calc(57.3 * var(--pt)); transform: translateY(-50%); display: flex; align-items: center; white-space: pre; font-size: calc(15.5 * var(--pt)); text-shadow: 0 0 .25em rgb(0 0 0 / .3); }
.fr-nm b { font-weight: 600; } .fr-nm #fr-and { display: flex; align-items: center; }
.fr-globe { margin-left: calc(5 * var(--pt)); color: #fff; } .fr-globe path { stroke: #444; }
.fr-fol { margin-left: calc(10 * var(--pt)); height: calc(24 * var(--pt)); padding: 0 calc(8 * var(--pt)); border: calc(1 * var(--pt)) solid rgb(255 255 255 / .85); border-radius: calc(6 * var(--pt)); display: flex; align-items: center; font-size: calc(14 * var(--pt)); font-weight: 600; }
.fr-pp { left: calc(13 * var(--pt)); transform: translateY(-50%); font-size: calc(14 * var(--pt)); color: rgb(255 255 255 / .62); }
.fr-cap { left: calc(13 * var(--pt)); width: calc(355 * var(--pt)); transform: translateY(-50%); font-size: calc(15 * var(--pt)); white-space: nowrap; overflow: hidden; text-shadow: 0 0 .25em rgb(0 0 0 / .3); }
.fr-cap .more { font-weight: 600; }
.fr-cta { left: calc(13 * var(--pt)); top: calc(762 * var(--pt)); width: calc(361 * var(--pt)); height: calc(41.3 * var(--pt)); border-radius: calc(10 * var(--pt)); background: rgb(255 255 255 / .2); backdrop-filter: blur(calc(10 * var(--pt))); -webkit-backdrop-filter: blur(calc(10 * var(--pt))); display: flex; align-items: center; justify-content: center; font-size: calc(16 * var(--pt)); font-weight: 600; }
.fr-ad { left: calc(12 * var(--pt)); top: calc(820 * var(--pt)); height: calc(21.3 * var(--pt)); padding: 0 calc(8 * var(--pt)) 0 calc(7 * var(--pt)); border-radius: calc(10.7 * var(--pt)); background: rgb(0 0 0 / .45); display: flex; align-items: center; gap: calc(4 * var(--pt)); font-size: calc(13 * var(--pt)); font-weight: 500; }
.fr-ad svg { width: calc(12 * var(--pt)); height: calc(12 * var(--pt)); }
.fr-prog { left: 0; top: calc(852 * var(--pt)); width: 100%; height: calc(1.6 * var(--pt)); background: rgb(255 255 255 / .3); }
.fr-prog i { position: absolute; left: 0; top: 0; height: 100%; width: 12%; background: #fff; }
.fr-cbar { left: calc(13.3 * var(--pt)); top: calc(866 * var(--pt)); width: calc(403.4 * var(--pt)); height: calc(44 * var(--pt)); border-radius: calc(22 * var(--pt)); background: #191919; color: #A8A8AA; display: flex; align-items: center; padding: 0 calc(12 * var(--pt)) 0 calc(17 * var(--pt)); box-sizing: border-box; gap: calc(12 * var(--pt)); font-size: calc(15.5 * var(--pt)); }
.fr-cbar span { flex: 1; }
.fr-cbar svg { width: calc(24 * var(--pt)); height: calc(24 * var(--pt)); color: #E4E6EB; filter: none; }

.plats .plat { height: auto; min-height: 3.4rem; line-height: 1.1; flex-direction: column; gap: .3rem; padding: .55rem .3rem; font-size: .8rem; min-width: 0; }

.fb-next { height: calc(600 * var(--pt)); }
.fb-ncap { left: calc(12.7 * var(--pt)); top: calc(57 * var(--pt)); transform: translateY(-50%); font-size: calc(15.5 * var(--pt)); white-space: nowrap; }
.fb-nimg { left: 0; top: calc(73 * var(--pt)); width: 100%; height: calc(520 * var(--pt)); overflow: hidden; background: linear-gradient(180deg, #7FA6D9, #A9C6EA); }
.fb-nimg .cl { position: absolute; border-radius: 50%; background: rgb(255 255 255 / .75); filter: blur(calc(9 * var(--pt))); }

/* ---- All placements: every placement's clear area on the raw 1080 x 1920 frame ---- */
.plats .plat-all { grid-column: 1 / -1; flex-direction: row; min-height: 0; padding: .55rem .6rem; gap: .45rem; }
.allv { position: absolute; inset: 0; background: #111; display: flex; flex-direction: column; justify-content: center; }
.all-frame { position: relative; width: 100%; aspect-ratio: 1080 / 1920; overflow: hidden; background: #222; }
.alv { position: absolute; inset: 0; }
.alv video, .alv img.media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.all-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; max-width: none; filter: drop-shadow(0 0 1px rgb(0 0 0 / .6)); }
.all-svg [hidden] { display: none; }
.all-cap { position: absolute; left: 0; right: 0; bottom: 3%; margin: 0; text-align: center; color: rgb(255 255 255 / .6); font: 500 .7rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.all-note { margin: .2rem 0 .5rem; font-size: .85rem; color: var(--ink); opacity: .75; line-height: 1.35; }
.az-row { display: flex; align-items: center; gap: .55rem; font-size: .88rem; padding: .22rem 0; cursor: pointer; }
.az-row input { accent-color: var(--ink); margin: 0; }
.az-row i { width: 26px; height: 0; border-top: 3px dashed; flex: none; }
.az-row i.az-lime { height: 12px; border: 2px solid #CEFF5B; background: rgb(206 255 91 / .3); border-radius: 2px; filter: none; }
.side.all-mode > .field:not(#plat-field):not(#all-fields), .side.all-mode > label, .side.all-mode > .switch, .side.all-mode .partner { display: none !important; }

/* condensed panel (Alysha's mockup, Oct 18th) */
.plats { grid-template-columns: repeat(4, 1fr) !important; }
.plats .plat-all { grid-column: auto; flex-direction: column; min-height: 3.4rem; padding: .55rem .3rem; gap: .3rem; }
.urow { display: grid; grid-template-columns: 1fr auto; gap: .6rem; align-items: start; }
.urow .at-wrap { height: calc(2.05rem + .6rem + 2px); box-sizing: border-box; }
.ufield, .pfield { display: flex; flex-direction: column; gap: .4rem; }
.ver-in { accent-color: var(--ink); width: 1.15rem; height: 1.15rem; margin: 0 .65rem 0 .3rem; flex: none; cursor: pointer; }
.photo-btn.photo-sq { padding: .3rem; align-self: auto; }
.photo-sq .photo-dot { width: 2.05rem; height: 2.05rem; }
.photo-sq .photo-dot:not([style*="url"]) { background: var(--silver) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%235047EB' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 60% no-repeat; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pill svg { width: 20px; height: 20px; }
.at-wrap input.ver-in { -webkit-appearance: checkbox; appearance: auto; width: 1.15rem; min-width: 1.15rem; height: 1.15rem; padding: 0; margin: 0 .65rem 0 .3rem; flex: none; }
.at-wrap #in-user { flex: 1; }
.photo-sq { height: calc(2.05rem + .6rem + 2px); box-sizing: border-box; }

.rcol { width: 360px; display: flex; flex-direction: column; gap: 1rem; }
.rcol .side { width: 100%; }
.rcol .kit { margin: 0; }
.rcol .btn-kit { width: 100%; justify-content: center; box-sizing: border-box; }
.shot .rcol { display: none !important; }
@media (max-width: 760px) { .rcol { width: 100%; max-width: 420px; } }

#seg { grid-template-columns: 1fr 1.35fr 1fr; }
#seg button { white-space: nowrap; }

/* username + profile on one shared grid so labels and boxes line up */
.urow { grid-template-rows: auto auto; row-gap: .4rem; align-items: center; }
.urow .ufield, .urow .pfield { display: contents; }
.urow .flabel { grid-row: 1; margin: 0; }
.urow .pfield .flabel { text-align: center; }
.urow .at-wrap { grid-row: 2; grid-column: 1; }
.urow .photo-sq { grid-row: 2; grid-column: 2; width: calc(2.05rem + .6rem + 2px); display: flex; align-items: center; justify-content: center; justify-self: center; padding: 0; }

/* ---- TikTok photo carousel, measured from Alysha's IMG_0291 (her posted 4:5 carousel, Oct 30 2026) ---- */
.tpv { left: 0; top: calc(121.5 * var(--pt)); width: 100%; height: calc(537.5 * var(--pt)); overflow: hidden; background: #141518; }
.tpv video, .tpv img.media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tp-safe { left: 0; top: 0; width: 100%; height: calc(934 * var(--pt)); pointer-events: none; }
.tp-back { left: calc(16.3 * var(--pt)); top: calc(74.3 * var(--pt)); width: calc(9.8 * var(--pt)); height: calc(15.3 * var(--pt)); }
.tp-search { left: calc(47.6 * var(--pt)); top: calc(64.8 * var(--pt)); width: calc(366.1 * var(--pt)); height: calc(34.2 * var(--pt)); box-sizing: border-box; border: calc(1 * var(--pt)) solid #fff; border-radius: calc(9.5 * var(--pt)); display: flex; align-items: center; font-size: calc(15 * var(--pt)); }
.tp-search svg { position: absolute; left: calc(12.3 * var(--pt)); width: calc(17 * var(--pt)); height: calc(17 * var(--pt)); color: rgb(255 255 255 / .72); }
.tp-ph { position: absolute; left: calc(36.7 * var(--pt)); color: rgb(255 255 255 / .72); font-weight: 600; white-space: nowrap; }
.tp-sdiv { position: absolute; left: calc(294.4 * var(--pt)); top: calc(10.4 * var(--pt)); width: calc(.6 * var(--pt)); height: calc(13 * var(--pt)); background: rgb(255 255 255 / .3); }
.tp-search b { position: absolute; left: calc(306.8 * var(--pt)); font-weight: 700; }
.tp-count { left: calc(371.4 * var(--pt)); top: calc(111.7 * var(--pt)); width: calc(46.6 * var(--pt)); height: calc(22.5 * var(--pt)); border-radius: calc(11.3 * var(--pt)); background: rgb(255 255 255 / .17); display: flex; align-items: center; justify-content: center; font-size: calc(12.6 * var(--pt)); color: rgb(255 255 255 / .9); white-space: nowrap; }
.t-av.tp-av { left: calc(378.9 * var(--pt)); top: calc(479.8 * var(--pt)); width: calc(43 * var(--pt)); height: calc(43 * var(--pt)); border: 0; }
.tp-more { left: calc(389.3 * var(--pt)); top: calc(763.9 * var(--pt)); width: calc(21.8 * var(--pt)); display: flex; justify-content: space-between; transform: translateY(-50%); }
.tp-more i { width: calc(5.4 * var(--pt)); height: calc(5.4 * var(--pt)); border-radius: 50%; background: rgb(255 255 255 / .92); }
.t-disc.tp-disc { left: calc(380.9 * var(--pt)); top: calc(800.5 * var(--pt)); }
.tp-dots { left: 0; top: calc(691.6 * var(--pt)); width: 100%; height: 0; display: flex; justify-content: center; align-items: center; gap: calc(7 * var(--pt)); }
.tp-dots i { flex: none; width: calc(4.6 * var(--pt)); height: calc(4.6 * var(--pt)); border-radius: 50%; background: rgb(255 255 255 / .4); }
.tp-dots i.on { background: #fff; }
.tp-dots i.s1 { width: calc(3.4 * var(--pt)); height: calc(3.4 * var(--pt)); }
.tp-dots i.s2 { width: calc(2 * var(--pt)); height: calc(2 * var(--pt)); }
.tp-name { left: calc(12 * var(--pt)); display: flex; align-items: center; gap: calc(5 * var(--pt)); transform: translateY(-50%); font-size: calc(15.5 * var(--pt)); white-space: nowrap; }
.tp-tag { display: inline-flex; align-items: center; gap: calc(3 * var(--pt)); height: calc(21.5 * var(--pt)); padding: 0 calc(5.5 * var(--pt)) 0 calc(5 * var(--pt)); border-radius: calc(3.3 * var(--pt)); background: #262626; font-size: calc(13.4 * var(--pt)); font-weight: 700; margin-left: calc(0.5 * var(--pt)); }
.tp-tag svg { width: calc(13 * var(--pt)); height: calc(13 * var(--pt)); }
.tp-ago { color: rgb(255 255 255 / .55); font-size: calc(15 * var(--pt)); }
.tp-cap { left: calc(12 * var(--pt)); width: calc(306 * var(--pt)); font-size: calc(14.5 * var(--pt)); line-height: calc(16.1 * var(--pt)); color: rgb(255 255 255 / .9); }
.tp-cap .ln { height: calc(16.1 * var(--pt)); white-space: nowrap; overflow: hidden; }
.tp-cap .ln.ttl { color: #fff; font-weight: 700; }
.tp-cap .more { color: rgb(255 255 255 / .62); }
.tp-music { left: calc(13 * var(--pt)); top: calc(830.7 * var(--pt)); display: flex; align-items: center; gap: calc(6.5 * var(--pt)); transform: translateY(-50%); font-size: calc(14.8 * var(--pt)); white-space: nowrap; max-width: calc(330 * var(--pt)); overflow: hidden; }
.tp-music svg { width: calc(11 * var(--pt)); height: calc(11 * var(--pt)); flex: none; }
.tp-div { left: 0; top: calc(853.5 * var(--pt)); width: 100%; height: calc(.5 * var(--pt)); background: #2a2a2a; }
.tp-stat { top: calc(878 * var(--pt)); display: flex; align-items: center; gap: calc(6 * var(--pt)); transform: translateY(-50%); font-size: calc(15.3 * var(--pt)); color: rgb(255 255 255 / .78); }
.tp-stat svg { width: calc(11 * var(--pt)); height: calc(13 * var(--pt)); color: rgb(255 255 255 / .78); }
.tp-stat + .tp-stat svg { width: calc(15.3 * var(--pt)); }
.tp-ins { left: calc(290.3 * var(--pt)); top: calc(861.3 * var(--pt)); width: calc(127.7 * var(--pt)); height: calc(31.6 * var(--pt)); border-radius: calc(15.8 * var(--pt)); background: #333; display: flex; align-items: center; gap: calc(7.5 * var(--pt)); padding-left: calc(11 * var(--pt)); box-sizing: border-box; font-size: calc(14.2 * var(--pt)); font-weight: 700; white-space: nowrap; }
.tp-ins svg { width: calc(13.2 * var(--pt)); height: calc(13.2 * var(--pt)); flex: none; }

/* ---- Instagram carousel, measured from Alysha's IMG_0293 (her posted 4:5 carousel, own Posts view, Oct 30 2026) ---- */
.igc { position: absolute; inset: 0; color: #fff; background: #0c0f14; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; overflow: hidden; --dy: 0; }
.igc svg, .igc img { display: block; max-width: none; }
.igc > *, .ic-below > * { position: absolute; }
.igc .sb { color: #fff; }
.igv { left: 0; top: calc(165.8 * var(--pt)); width: 100%; height: calc(537.5 * var(--pt)); overflow: hidden; background: #14161a; }
.igv video, .igv img.media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ic-safe { left: 0; top: 0; width: 100%; height: calc(934 * var(--pt)); pointer-events: none; }
.ic-back { left: calc(20 * var(--pt)); top: calc(60.8 * var(--pt)); width: calc(42 * var(--pt)); height: calc(42 * var(--pt)); border-radius: 50%; background: #2a2d33; display: flex; align-items: center; justify-content: center; }
.ic-back svg { width: calc(9 * var(--pt)); height: calc(15 * var(--pt)); margin-left: calc(-2 * var(--pt)); }
.ic-title { left: 0; top: calc(64 * var(--pt)); width: 100%; display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.ic-title b { font-size: calc(16.5 * var(--pt)); font-weight: 700; }
.ic-title span { font-size: calc(13.5 * var(--pt)); color: rgb(255 255 255 / .85); margin-top: calc(2 * var(--pt)); }
.ic-av { left: calc(7.4 * var(--pt)); top: calc(121.8 * var(--pt)); width: calc(37.2 * var(--pt)); height: calc(37.2 * var(--pt)); border-radius: 50%; box-sizing: border-box; border: calc(1.4 * var(--pt)) solid #3a3d44; padding: calc(2.4 * var(--pt)); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: calc(14 * var(--pt)); }
.ic-av img, .ic-av span:empty { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ic-av #ic-av-letter:not(:empty) { width: 100%; height: 100%; border-radius: 50%; background: var(--indigo); display: flex; align-items: center; justify-content: center; }
.ic-name { left: calc(51.2 * var(--pt)); top: calc(132.6 * var(--pt)); transform: translateY(-50%); display: flex; align-items: center; font-size: calc(15.5 * var(--pt)); white-space: nowrap; }
.ic-name b { font-weight: 600; }
.ic-name .vb { width: calc(13.5 * var(--pt)); height: calc(13.5 * var(--pt)); margin-left: calc(4.5 * var(--pt)); flex: none; }
.ic-song { left: calc(51.2 * var(--pt)); top: calc(149.5 * var(--pt)); transform: translateY(-50%); display: flex; align-items: center; gap: calc(6 * var(--pt)); font-size: calc(13.8 * var(--pt)); white-space: nowrap; }
.ic-song svg { width: calc(11 * var(--pt)); height: calc(12.5 * var(--pt)); }
.ic-menu { left: calc(398 * var(--pt)); top: calc(137 * var(--pt)); width: calc(20 * var(--pt)); height: calc(11 * var(--pt)); }
.ic-count { left: calc(373.3 * var(--pt)); top: calc(179.8 * var(--pt)); width: calc(43 * var(--pt)); height: calc(25.1 * var(--pt)); border-radius: calc(12.6 * var(--pt)); background: rgb(40 40 40 / .85); display: flex; align-items: center; justify-content: center; font-size: calc(13.4 * var(--pt)); white-space: nowrap; }
.ic-audio { left: calc(390.9 * var(--pt)); top: calc((664.6 + var(--dy)) * var(--pt)); width: calc(25.4 * var(--pt)); height: calc(25.4 * var(--pt)); border-radius: 50%; background: rgb(40 40 40 / .85); display: flex; align-items: center; justify-content: center; }
.ic-audio svg { width: calc(13 * var(--pt)); height: calc(13 * var(--pt)); }
.ic-below { left: 0; top: calc(var(--dy) * var(--pt)); width: 100%; height: 0; }
.ic-ins { left: calc(8 * var(--pt)); top: calc(726.8 * var(--pt)); transform: translateY(-50%); display: flex; align-items: center; gap: calc(6 * var(--pt)); color: #7e8dff; font-size: calc(15.3 * var(--pt)); font-weight: 600; white-space: nowrap; }
.ic-ins svg { width: calc(13 * var(--pt)); height: calc(13 * var(--pt)); }
.ic-boost { left: calc(315.7 * var(--pt)); top: calc(711.5 * var(--pt)); width: calc(102.3 * var(--pt)); height: calc(30.3 * var(--pt)); border-radius: calc(6 * var(--pt)); background: #4f5bf7; display: flex; align-items: center; justify-content: center; font-size: calc(15 * var(--pt)); font-weight: 600; }
.ic-div { left: 0; top: calc(749.6 * var(--pt)); width: 100%; height: calc(.5 * var(--pt)); background: #262a31; }
.ic-dots { left: 0; top: calc(764.6 * var(--pt)); width: 100%; height: 0; display: flex; justify-content: center; align-items: center; gap: calc(4.6 * var(--pt)); }
.ic-dots i { flex: none; width: calc(5.2 * var(--pt)); height: calc(5.2 * var(--pt)); border-radius: 50%; background: rgb(255 255 255 / .35); }
.ic-dots i.on { background: #4f6bff; }
.ic-dots i.s1 { width: calc(4 * var(--pt)); height: calc(4 * var(--pt)); }
.ic-dots i.s2 { width: calc(2.6 * var(--pt)); height: calc(2.6 * var(--pt)); }
.ic-act { top: calc(790.6 * var(--pt)); transform: translateY(-50%); display: flex; align-items: center; gap: calc(8 * var(--pt)); }
.ic-act svg { height: calc(21.5 * var(--pt)); width: auto; }
.ic-act b { font-size: calc(14.5 * var(--pt)); font-weight: 600; }
.ic-save { left: calc(397 * var(--pt)); }
.ic-cap { left: calc(11.7 * var(--pt)); top: calc(814.5 * var(--pt)); width: calc(405 * var(--pt)); font-size: calc(14.5 * var(--pt)); line-height: calc(16 * var(--pt)); }
.ic-cap .ln { white-space: nowrap; overflow: hidden; height: calc(16 * var(--pt)); }
.ic-cap b { font-weight: 600; }
.ic-cap .more { color: rgb(255 255 255 / .55); }
.ic-time { left: calc(11.7 * var(--pt)); font-size: calc(13.5 * var(--pt)); color: rgb(255 255 255 / .55); transform: translateY(-50%); }
/* 4 placements (Instagram): two rows of two */
.pills.four { flex-wrap: wrap; }
.pills.four .pill { flex: 1 1 calc(50% - .4rem); }